/* ═══════════════════════════════════════════════════════════════
   NEST — SHARED FOUNDATION
   Extends the Nest brand tokens with a cool "midnight" family
   derived from the hero photograph. Copper stays the one accent.
   ═══════════════════════════════════════════════════════════════ */

@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 500; font-display:swap;
  src:url('../fonts/cormorant-normal.woff2') format('woff2'); }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:300 500; font-display:swap;
  src:url('../fonts/cormorant-italic.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:300; font-display:swap;
  src:url('../fonts/barlow-300.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family:'Barlow'; font-style:normal; font-weight:500 700; font-display:swap;
  src:url('../fonts/barlow-500.woff2') format('woff2'); }

:root{
  /* ── Brand core ── */
  --black:#0A0A0A; --black2:#111; --black-deep:#050505;
  --gold:#B87333; --gold-light:#D4956B; --gold-deep:#8C561F;
  --cream:#F5F0E8; --cream2:#EDE8DC; --linen:#EDE8DC; --warm-white:#FAF8F4;

  /* ── Warm matte-black family (brand-true; blue lives ONLY in the photo) ── */
  --midnight:#0F0D0A;       /* warm matte black — primary surface (theme color) */
  --midnight-2:#141009;     /* secondary warm-black surface */
  --slate:#1B1610;          /* raised warm panel */
  --slate-2:#241D14;        /* hairline-lifted warm panel */
  --steel:#3A2E20;          /* warm brown line / chrome */
  --steel-line:rgba(245,240,232,0.10);
  --steel-line-2:rgba(245,240,232,0.18);
  --mist:rgba(245,240,232,0.58);   /* warm muted text on dark */
  --mist-dim:rgba(245,240,232,0.55);

  /* ── Text ── */
  --text:#F4EFE7; --text-muted:rgba(245,240,232,.55); --text-dim:rgba(245,240,232,.30);
  --ink:#15110D; --ink-2:#4A4540; --ink-3:#8E8880;

  /* ── Lines ── */
  --gold-line:rgba(184,115,51,.26); --gold-line-soft:rgba(184,115,51,.14);
  --line-dk:rgba(245,240,232,.09); --line-lt:rgba(26,23,20,.10);

  --status-live:#4ADE80;

  /* ── Type families ── */
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Barlow',-apple-system,BlinkMacSystemFont,sans-serif;

  /* ── Scale (driven by tweak) ── */
  --type-scale:1;
  --h1: calc(clamp(3rem, 7vw, 7rem) * var(--type-scale));
  --h2: calc(clamp(2.2rem, 4.4vw, 4rem) * var(--type-scale));
  --h3: calc(clamp(1.7rem, 2.6vw, 2.5rem) * var(--type-scale));
  --body: calc(0.95rem * var(--type-scale));

  --kicker-size:.62rem; --kicker-track:.32em;
  --container:1320px; --pad:clamp(1.4rem,4vw,3.4rem);

  /* ── Motion (scaled by tweak: 0 = off, 1 = default, 1.6 = lush) ── */
  --motion:1;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html{font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--sans); font-weight:300;
  background:var(--midnight); color:var(--text);
  line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
::selection{background:var(--gold); color:var(--midnight);}

h1,h2,h3,h4{font-family:var(--serif); font-weight:300; margin:0; letter-spacing:-.01em; line-height:1.02;}
h1{font-size:var(--h1);}
h2{font-size:var(--h2); line-height:1.05;}
h3{font-size:var(--h3); line-height:1.12;}
em{font-style:italic; color:var(--gold);}
p{margin:0; font-size:var(--body); line-height:1.85; font-weight:300;}

.wrap{max-width:var(--container); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad);}

/* ── Kicker label ── */
.kicker{
  font-family:var(--sans); font-size:var(--kicker-size); font-weight:500;
  letter-spacing:var(--kicker-track); text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:.7rem;
}
.kicker::before{content:''; width:26px; height:1px; background:var(--gold); opacity:.8;}
.kicker.center{justify-content:center;}

/* ── Buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:1.05rem 1.9rem; border:1px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; transition:all .4s var(--ease);
}
.btn-primary{background:var(--gold); color:var(--midnight);}
.btn-primary:hover{background:var(--gold-light);}
.btn-primary::after{
  content:''; position:absolute; inset:0; background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .6s var(--ease);
}
.btn-primary:hover::after{transform:translateX(130%);}
.btn-ghost{background:transparent; color:var(--text); border-color:var(--steel-line-2);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}
.btn .ar{transition:transform .4s var(--ease);}
.btn:hover .ar{transform:translateX(5px);}
.on-light .btn-ghost{color:var(--ink); border-color:var(--line-lt);}
.on-light .btn-ghost:hover{color:var(--gold); border-color:var(--gold);}

/* ── NEST wordmark (exact from live site: serif letters + thin hairline dividers) ── */
.logo{display:inline-flex; align-items:center; line-height:1; color:var(--text);}
.logo .L{font-family:var(--serif); font-style:normal !important; font-weight:400; font-size:23px;
  padding:0 .18em; letter-spacing:.02em; color:inherit;}
.logo .D{display:inline-block; width:1px; height:26px; background:currentColor; opacity:.28; align-self:center;}
.logo .p{display:none;}

/* ── SentriX lockup (Sentri + chrome copper/silver X) ── */
.sx{white-space:nowrap; font-style:inherit; font-weight:inherit;}
.sx-x{display:inline-block; width:.82em; height:.82em; vertical-align:-0.17em; margin:0 .01em;
  background:url(sentrix-chrome-x.webp) center/contain no-repeat;}
.sx-suite img{display:inline-block; width:.74em; height:.74em; vertical-align:-0.05em; margin:0 .015em;}

/* ── Shared NAV (minimal: logo + burger only) ── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:120; height:74px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  transition:background .5s var(--ease), border-color .5s var(--ease), backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(15,13,10,.86); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--steel-line);}

/* 2-line hamburger → animates to a cross when open */
.nav-burger{display:flex; flex-direction:column; justify-content:center; gap:8px;
  width:34px; height:34px; background:none; border:0; cursor:pointer; padding:0; z-index:130; position:relative;}
.nav-burger span{display:block; width:30px; height:1.5px; background:var(--text); margin-left:auto;
  transition:transform .45s var(--ease), opacity .3s, width .45s var(--ease), background .3s;}
.nav-burger span:nth-child(2){width:22px;}
.nav-burger.open span{width:30px;}
.nav-burger.open span:nth-child(1){transform:translateY(4.75px) rotate(45deg);}
.nav-burger.open span:nth-child(2){transform:translateY(-4.75px) rotate(-45deg);}

/* ── Full-screen MENU overlay ── */
.menu{position:fixed; inset:0; z-index:115; background:rgba(12,10,8,.98);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .55s var(--ease), visibility .55s;}
.menu.open{opacity:1; visibility:visible;}
.menu-inner{max-width:var(--container); margin:0 auto; width:100%; padding:0 var(--pad);}
.menu-eyebrow{font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--gold);
  margin-bottom:2rem; opacity:0; transform:translateY(12px); transition:.6s var(--ease) .1s;}
.menu.open .menu-eyebrow{opacity:1; transform:none;}
.menu-links{display:flex; flex-direction:column; border-top:1px solid var(--steel-line);}
.menu-links a{display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem;
  font-family:var(--serif); font-weight:300; font-size:clamp(1.9rem,5.5vw,3.6rem); line-height:1;
  color:var(--text); padding:clamp(.7rem,2vh,1.2rem) 0; border-bottom:1px solid var(--steel-line);
  transition:color .35s var(--ease), padding-left .35s var(--ease);
  opacity:0; transform:translateY(18px);}
.menu.open .menu-links a{opacity:1; transform:none; transition:opacity .6s var(--ease) var(--md,.15s), transform .6s var(--ease) var(--md,.15s), color .35s, padding-left .35s;}
.menu-links a:hover{color:var(--gold); padding-left:.6rem;}
.menu-links a em{font-style:italic; color:var(--gold);}
.menu-links a .idx{font-family:var(--sans); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--mist-dim); transform:translateY(-.4em);}
.menu-foot{display:flex; justify-content:space-between; align-items:center; gap:1.5rem; flex-wrap:wrap;
  margin-top:clamp(2rem,5vh,3.5rem); opacity:0; transition:.6s var(--ease) .4s;}
.menu.open .menu-foot{opacity:1;}
.menu-foot a.ph{font-family:var(--serif); font-size:1.5rem; color:var(--text); transition:color .3s;}
.menu-foot a.ph:hover{color:var(--gold);}
.menu-foot .social{display:flex; gap:1.4rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mist);}
.menu-foot .social a:hover{color:var(--gold);}
body.menu-open{overflow:hidden;}

/* ── Reveal engine ── */
[data-reveal]{opacity:0; transform:translateY(calc(28px * var(--motion)));
  transition:opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--rd,0s);}
[data-reveal].in{opacity:1; transform:none;}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(calc(-34px * var(--motion)));}
[data-reveal="left"].in{transform:none;}
.clip-up{clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease-out); transition-delay:var(--rd,0s);}
.clip-up.in{clip-path:inset(0 0 0 0);}

/* ── Footer (shared, dark) ── */
.foot{background:var(--black-deep); border-top:1px solid var(--steel-line); padding:5rem 0 2.5rem;}
.foot-grid{display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:3rem;}
.foot p{color:var(--mist); font-size:.86rem; max-width:30ch; margin-top:1.2rem;}
.foot h3{font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 1.2rem;}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem;}
.foot ul a{color:var(--mist); font-size:.84rem; transition:color .3s;}
.foot ul a:hover{color:var(--gold);}
.foot-bot{display:flex; justify-content:space-between; margin-top:4rem; padding-top:1.6rem;
  border-top:1px solid var(--steel-line); color:var(--mist-dim); font-size:.72rem; letter-spacing:.05em;}

/* ── Tweaks panel ── */
.tweaks{position:fixed; right:18px; bottom:18px; z-index:9999; width:236px;
  background:rgba(15,13,10,.95); backdrop-filter:blur(18px);
  border:1px solid var(--steel-line-2); padding:1.1rem 1.2rem 1.3rem;
  transform:translateY(140%); transition:transform .5s var(--ease); font-family:var(--sans);}
.tweaks.on{transform:none;}
.tweaks h6{margin:0 0 1rem; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  display:flex; justify-content:space-between; align-items:center;}
.tweaks .grp{margin-bottom:1rem;}
.tweaks .lb{font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mist); margin-bottom:.5rem;}
.tweaks .seg{display:flex; gap:4px;}
.tweaks .seg button{flex:1; background:transparent; border:1px solid var(--steel-line-2); color:var(--mist);
  font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; padding:.5rem .2rem; cursor:pointer; transition:all .25s; font-family:var(--sans);}
.tweaks .seg button.on{background:var(--gold); border-color:var(--gold); color:var(--midnight);}
.tweaks .row{display:flex; align-items:center; gap:.7rem;}
.tweaks input[type=range]{flex:1; accent-color:var(--gold);}

@media(max-width:860px){
  .nav-links,.nav-phone{display:none;}
  .nav-burger{display:flex;}
  .foot-grid{grid-template-columns:1fr 1fr; gap:2rem;}
  :root{--type-scale:.86;}
}

/* Static / print safety — never let an un-run transition hide content */
@media print{
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .hero-sub,.hero-actions,.hero-meta,.a-hero-plate,.a-hero-foot,.l-hero-sub,.l-hero-actions,.l-panel{opacity:1 !important; transform:none !important;}
  .hero h1 .ln>span,.a-hero h1 .l>span,.l-hero h1 .reveal-line>span{transform:none !important;}
}

/* ── Crisp overflow guard ──
   Crisp pre-renders its (hidden) chat UI off-screen-right inside a
   transform-contained fixed root, which body's overflow-x can't clip and
   which adds phantom horizontal scroll. Clip at the document root
   (sticky-safe, unlike body/html overflow:hidden) + cap Crisp's own roots. */
html { overflow-x: clip; }
#crisp-client, #crisp-chatbox { max-width: 100vw; }