/* ================================================================
   LIVING TALLER — shared site chrome (design tokens, reset, type,
   layout helpers, buttons, nav, footer, mobile nav, WhatsApp FAB,
   reveal utility). Owned by ArchitectUX. Every page includes this.
   Scene-specific CSS (.scene-*, .figure-*, .scale-*, .bone-*,
   .bridge-* and friends) stays inline per-page — do not add it here.
   ================================================================ */

/* ============================================================
   Design tokens (verbatim from brand-system.md)
   ============================================================ */
:root {
  --bg-deep: #0A0D12;
  --bg-soft: #F7F4EE;

  --primary: #3A6EA5;
  --primary-glow: #8FD3FF;

  --accent: #C6A15B;
  --accent-ink: #8A6B33;

  --text-on-deep: #F5F3EE;
  --text-on-soft: #14181D;
  --muted-on-deep: #9BA4AE;
  --muted-on-soft: #5C6570;

  --success-on-deep: #5FAE8C;
  --success-on-soft: #2F7A57;

  --font-display: 'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;

  /* fluid type scale, ceiling values match brand spec exactly */
  --fs-eyebrow: clamp(.7rem, .66rem + .18vw, .75rem);
  --fs-h1: clamp(2.35rem, 1.55rem + 4.2vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 1.35rem + 2.8vw, 3rem);
  --fs-h3: clamp(1.4rem, 1.18rem + 1.1vw, 2rem);
  --fs-h4: clamp(1.18rem, 1.08rem + .5vw, 1.5rem);
  --fs-body-lg: clamp(1.04rem, .96rem + .4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;

  --ease-signature: cubic-bezier(.22,.61,.25,.99);
  --container: 1240px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { overflow-x:hidden; overflow-x:clip; scrollbar-gutter:stable; }
body {
  overflow-x:hidden; overflow-x:clip;
  max-width:100%;
  background:var(--bg-deep);
  color:var(--text-on-deep);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
h1,h2,h3,h4,p,figure { margin:0; }
ul { margin:0; padding:0; list-style:none; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

:focus-visible{ outline:2px solid var(--primary-glow); outline-offset:3px; border-radius:2px; }

/* ============================================================
   Type
   ============================================================ */
.eyebrow{
  font:600 var(--fs-eyebrow)/1.4 var(--font-body);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--accent);
  display:inline-block;
  margin-bottom:1.1em;
}
.bg-soft .eyebrow{ color:var(--accent-ink); }
h1{ font:400 var(--fs-h1)/1.05 var(--font-display); letter-spacing:-.01em; }
h2{ font:500 var(--fs-h2)/1.1 var(--font-display); letter-spacing:-.01em; }
h3{ font:500 var(--fs-h3)/1.2 var(--font-display); }
h4{ font:600 var(--fs-h4)/1.3 var(--font-body); }
.body-lg{ font:400 var(--fs-body-lg)/1.6 var(--font-body); }
.small{ font:500 var(--fs-small)/1.5 var(--font-body); letter-spacing:.01em; }
.muted-on-deep{ color:var(--muted-on-deep); }
.muted-on-soft{ color:var(--muted-on-soft); }

/* ============================================================
   Layout helpers
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,5vw,64px); }
.bg-deep{ background:var(--bg-deep); color:var(--text-on-deep); }
.bg-soft{ background:var(--bg-soft); color:var(--text-on-soft); }

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.95em 1.7em; border-radius:999px;
  font:600 .95rem/1 var(--font-body); letter-spacing:.01em;
  transition:transform .35s var(--ease-signature), box-shadow .35s var(--ease-signature), background-color .35s, color .35s, border-color .35s;
  white-space:nowrap;
}
.btn-primary{ background:var(--accent); color:#1b140a; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 28px -10px rgba(198,161,91,.55); }
.btn-ghost{ border:1px solid color-mix(in srgb, currentColor 35%, transparent); color:inherit; }
.btn-ghost:hover{ border-color:currentColor; transform:translateY(-2px); }
.btn-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
@media (max-width:480px){ .btn-row{ justify-content:center; } }

/* ============================================================
   NAV
   ============================================================ */
.site-nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; flex-direction:column;
  color:var(--text-on-deep);
  transition:color .4s ease, background-color .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.site-nav.scrolled{
  background:color-mix(in srgb, var(--bg-deep) 88%, transparent);
  backdrop-filter:blur(14px) saturate(140%);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.site-nav.on-light{ color:var(--text-on-soft); }
.site-nav.on-light.scrolled{
  background:color-mix(in srgb, var(--bg-soft) 90%, transparent);
  box-shadow:0 1px 0 rgba(20,24,29,.08);
}
.nav-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(20px,5vw,48px);
}
.nav-mark{ height:26px; width:auto; color:inherit; }
.nav-links{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.nav-links a:not(.btn){
  font:500 .92rem/1 var(--font-body);
  position:relative; padding:6px 0; opacity:.86;
  transition:opacity .25s ease;
}
.nav-links a:not(.btn):hover{ opacity:1; }
.nav-links a:not(.btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease-signature);
}
.nav-links a:not(.btn):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a.is-active:not(.btn){ opacity:1; }
.nav-links a.is-active:not(.btn)::after{ transform:scaleX(1); transform-origin:left; }
.nav-links .btn-primary{ padding:.68em 1.35em; font-size:.85rem; }
.nav-links-list{ display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
@media (max-width:900px){ .nav-links-list{ display:none; } }

/* Locations dropdown (desktop) */
.nav-dropdown{ position:relative; }
.nav-dropdown-toggle{ display:inline-flex; align-items:center; gap:5px; font:500 .92rem/1 var(--font-body); padding:6px 0; opacity:.86; }
.nav-dropdown-toggle:hover, .nav-dropdown-toggle[aria-expanded="true"]{ opacity:1; }
.nav-dropdown-caret{ width:9px; height:9px; transition:transform .25s var(--ease-signature); }
.nav-dropdown-toggle[aria-expanded="true"] .nav-dropdown-caret{ transform:rotate(180deg); }
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translate(-50%,6px);
  min-width:200px; background:var(--bg-deep); border:1px solid rgba(245,243,238,.1);
  border-radius:12px; padding:8px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 20px 44px -12px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, transform .25s var(--ease-signature), visibility 0s linear .25s;
}
.nav-dropdown-menu.is-open{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0);
  transition:opacity .25s ease, transform .25s var(--ease-signature), visibility 0s;
}
.nav-dropdown-menu a{ padding:.6em .85em; border-radius:8px; font-size:.88rem; opacity:.86; }
.nav-dropdown-menu a:hover, .nav-dropdown-menu a.is-active{ opacity:1; background:rgba(245,243,238,.07); }
.site-nav.on-light .nav-dropdown-menu{ background:var(--bg-soft); border-color:rgba(20,24,29,.1); box-shadow:0 20px 44px -14px rgba(20,24,29,.18); }
.site-nav.on-light .nav-dropdown-menu a:hover, .site-nav.on-light .nav-dropdown-menu a.is-active{ background:rgba(20,24,29,.05); }

/* Secondary in-page row (index only, desktop) */
.nav-subrow{
  display:flex; justify-content:center; gap:clamp(14px,2vw,26px);
  padding:0 clamp(20px,5vw,48px) 12px;
  font:500 .8rem/1 var(--font-body);
}
.nav-subrow a{ padding:4px 0; opacity:.72; transition:opacity .25s ease; }
.nav-subrow a:hover, .nav-subrow a.is-active{ opacity:1; }
@media (max-width:900px){ .nav-subrow{ display:none; } }

/* Hamburger toggle (<900px) */
.nav-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; width:44px; height:44px; flex:0 0 auto; position:relative; z-index:210;
}
.nav-toggle span{
  display:block; width:22px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .35s var(--ease-signature), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
@media (max-width:900px){ .nav-toggle{ display:inline-flex; } }

/* Full-screen mobile nav panel */
.nav-menu-mobile{
  position:fixed; inset:0; z-index:190;
  background:var(--bg-deep); color:var(--text-on-deep);
  padding:calc(20px + 64px) clamp(24px,8vw,48px) 40px;
  display:flex; flex-direction:column; overflow-y:auto;
  transform:translateY(-100%); opacity:0; visibility:hidden;
  transition:transform .5s var(--ease-signature), opacity .4s ease, visibility 0s linear .5s;
}
.nav-menu-mobile.is-open{
  transform:translateY(0); opacity:1; visibility:visible;
  transition:transform .5s var(--ease-signature), opacity .4s ease, visibility 0s;
}
.nav-menu-mobile-nav{ display:flex; flex-direction:column; gap:2px; }
.nav-menu-mobile-nav a{
  font:500 1.35rem/1 var(--font-display); padding:.55em 0;
  border-bottom:1px solid rgba(245,243,238,.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s var(--ease-signature);
}
.nav-menu-mobile-nav a.is-active{ color:var(--accent); }
.nav-menu-mobile-nav .btn{ margin-top:1.5em; align-self:flex-start; border-bottom:none; }
.nav-menu-mobile-label{
  font:600 .72rem/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-on-deep); margin:1.3em 0 .3em; opacity:0; transform:translateY(14px);
  transition:opacity .5s ease, transform .5s var(--ease-signature);
}
.nav-menu-mobile.is-open .nav-menu-mobile-nav a,
.nav-menu-mobile.is-open .nav-menu-mobile-label{ opacity:1; transform:translateY(0); }
/* stagger */
.nav-menu-mobile-nav a:nth-child(1),.nav-menu-mobile-label:nth-child(1){ transition-delay:.05s; }
.nav-menu-mobile-nav a:nth-child(2),.nav-menu-mobile-label:nth-child(2){ transition-delay:.09s; }
.nav-menu-mobile-nav a:nth-child(3),.nav-menu-mobile-label:nth-child(3){ transition-delay:.13s; }
.nav-menu-mobile-nav a:nth-child(4),.nav-menu-mobile-label:nth-child(4){ transition-delay:.17s; }
.nav-menu-mobile-nav a:nth-child(5),.nav-menu-mobile-label:nth-child(5){ transition-delay:.21s; }
.nav-menu-mobile-nav a:nth-child(6),.nav-menu-mobile-label:nth-child(6){ transition-delay:.25s; }
.nav-menu-mobile-nav a:nth-child(7),.nav-menu-mobile-label:nth-child(7){ transition-delay:.29s; }
.nav-menu-mobile-nav a:nth-child(8),.nav-menu-mobile-label:nth-child(8){ transition-delay:.33s; }
.nav-menu-mobile-nav a:nth-child(9),.nav-menu-mobile-label:nth-child(9){ transition-delay:.37s; }
.nav-menu-mobile-nav a:nth-child(10),.nav-menu-mobile-label:nth-child(10){ transition-delay:.41s; }
.nav-menu-mobile-nav a:nth-child(11),.nav-menu-mobile-label:nth-child(11){ transition-delay:.45s; }
.nav-menu-mobile-nav a:nth-child(12),.nav-menu-mobile-label:nth-child(12){ transition-delay:.49s; }
.nav-menu-mobile-nav a:nth-child(13),.nav-menu-mobile-label:nth-child(13){ transition-delay:.53s; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--bg-deep); color:var(--text-on-deep); padding:8vh 0 4vh; border-top:1px solid rgba(245,243,238,.08); }
.footer-top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:3rem; margin-bottom:5vh; }
.footer-brand .nav-mark{ height:30px; color:var(--accent); margin-bottom:1em; }
.footer-tagline{ color:var(--muted-on-deep); font:400 1.05rem/1.5 var(--font-display); font-style:italic; max-width:22ch; }
.footer-cols{ display:flex; gap:clamp(28px,5vw,72px); flex-wrap:wrap; }
.footer-col h5{ font:600 .78rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-on-deep); margin-bottom:1.2em; }
.footer-col ul{ display:flex; flex-direction:column; gap:.8em; }
.footer-col a{ opacity:.85; transition:opacity .25s; }
.footer-col a:hover{ opacity:1; }
.footer-col address{ font-style:normal; opacity:.85; line-height:1.6; }
.footer-social{ display:flex; gap:1.2em; }
.footer-bottom{ border-top:1px solid rgba(245,243,238,.08); padding-top:3vh; display:flex; flex-direction:column; gap:1.4em; }
.footer-legal{ color:var(--muted-on-deep); max-width:80ch; }
.footer-copy{ color:var(--muted-on-deep); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1em; }
@media (max-width:760px){ .footer-top{ gap:2.2rem; } }

/* ============================================================
   WhatsApp floating action button
   ============================================================ */
.whatsapp-fab{
  position:fixed; right:20px; bottom:max(20px, env(safe-area-inset-bottom));
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#25D366; color:#fff; z-index:150;
  box-shadow:0 8px 24px -6px rgba(0,0,0,.45);
  transition:transform .3s var(--ease-signature), box-shadow .3s ease;
  animation:fabScaleIn .6s var(--ease-signature) .4s both;
}
.whatsapp-fab:hover{ transform:translateY(-4px); box-shadow:0 14px 34px -8px rgba(0,0,0,.5); }
.whatsapp-fab svg{ width:27px; height:27px; }
@keyframes fabScaleIn{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }

/* ============================================================
   Reveal-on-scroll utility (chrome-level, for subpages)
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease-signature), transform .7s var(--ease-signature);
}
.reveal-visible{ opacity:1; transform:translateY(0); }

/* ============================================================
   Placeholder slots — fill before launch
   ============================================================ */
.slot{ color:var(--accent-ink); background:rgba(198,161,91,.09); border-bottom:1px dashed rgba(138,107,51,.55); padding:0 .25em; border-radius:3px 3px 0 0; }
.bg-deep .slot{ color:var(--accent); background:rgba(198,161,91,.12); border-bottom-color:rgba(198,161,91,.5); }

/* ============================================================
   Reduced motion — chrome-layer overrides
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .whatsapp-fab{ animation:none; }
  .nav-toggle span{ transition:none; }
  .nav-dropdown-menu{ transition:none; }
  .nav-menu-mobile{ transition:none; }
  .nav-menu-mobile-nav a, .nav-menu-mobile-label{ transition:none; opacity:1; transform:none; }
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}