/* ============================================================
   CORE.CSS — shared styles loaded on every page
   Sections: Fonts → Tokens (color, spacing, type, motion) →
             Reset → Layout → Components → Motion → Utilities →
             Reduced-motion (single consolidated block, all pages)
   ============================================================ */
  @font-face{font-family:'Archivo';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('../fonts/archivo-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Inter';font-style:normal;font-weight:300 500;font-stretch:100%;font-display:swap;src:url('../fonts/inter-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  @font-face{font-family:'Jost';font-style:normal;font-weight:300 500;font-stretch:100%;font-display:swap;src:url('../fonts/jost-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
  :root{
    --mahogany:#1A1413;
    --mahogany-70: rgba(26,20,19,0.7);
    --mahogany-40: rgba(26,20,19,0.4);
    --green-light:#3E6B45; /* "available" status only */
    --card:#FBF8F1;
    --sand:#F2ECDF;
    --sand-dim:#EAE2D2;
    --gold:#B9975B;
    --gold-dim:rgba(185,151,91,0.16);
    --mahogany-glow: radial-gradient(150% 125% at 50% -18%, #231A18 0%, var(--mahogany) 40%, #0A0706 100%);
    --ember-dim: rgba(48,18,13,0.16);
    --font-display:'Archivo', Helvetica, Arial, sans-serif;
    --font-body:'Inter', Helvetica, Arial, sans-serif;
    --font-serif: 'Jost', var(--font-display);

    /* ---- Spacing (8 px base) ---- */
    --space-1:  0.5rem;   /*   8px */
    --space-2:  1rem;     /*  16px */
    --space-3:  1.5rem;   /*  24px */
    --space-4:  2rem;     /*  32px */
    --space-5:  2.5rem;   /*  40px */
    --space-6:  3rem;     /*  48px */
    --space-7:  3.5rem;   /*  56px */
    --space-8:  4rem;     /*  64px */
    --space-10: 5rem;     /*  80px */
    --space-12: 6rem;     /*  96px */
    --space-14: 7rem;     /* 112px */
    --space-15: 7.5rem;   /* 120px */
    --space-16: 8rem;     /* 128px */
    --space-17: 8.5rem;   /* 136px */

    /* ---- Type scale ---- */
    --text-xs:      0.66rem;
    --text-sm:      0.72rem;
    --text-base:    1rem;
    --text-md:      1.05rem;
    --text-lg:      1.3rem;
    --text-xl:      clamp(1.5rem, 2.9vw, 2.3rem);
    --text-2xl:     clamp(1.7rem, 3.1vw, 2.7rem);
    --text-3xl:     clamp(2.2rem, 4.4vw, 3.7rem);
    --text-display: clamp(2.9rem, 7.4vw, 6.6rem);

    /* ---- Layout ---- */
    --container-max:    1080px;
    --container-wide:   1340px;
    --container-narrow: 760px;
    --gutter:        max(1.5rem, 2.5vw);   /* never under 24px, so text keeps clear of phone edges */
    --gutter-mobile: clamp(1.5rem, 6vw, 2.25rem);
    --section-y:     4rem;
    --section-y-sm:  3rem;

    /* ---- Motion — one shared language ----
       --ease (expo-out) is the primary curve: a fast start with a long, soft
       landing. Calm, consistent durations. The legacy token names below alias
       to the canonical set so every existing transition speaks it. */
    --ease:      cubic-bezier(.16, 1, .3, 1);
    --dur-fast:  .25s;
    --dur-base:  .6s;
    --dur-slow:  1s;
    --ease-out:       var(--ease);
    --ease-expo:      var(--ease);
    --duration-fast:  var(--dur-fast);
    --duration-base:  var(--dur-base);
    --duration-slow:  var(--dur-slow);

    /* ---- Breakpoints (documented constants — @media cannot read custom props) ----
       --bp-sm:   480px
       --bp-md:   768px
       --bp-lg:   1024px
       --bp-xl:   1280px
       Existing ad-hoc values: 560px, 640px, 700px, 900px, 992px, 1139px.
       These will be consolidated toward the canonical set over phases 2B–2C.
    */
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--mahogany);
    color:var(--sand);
    font-family:var(--font-body);
    font-weight:300;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:-1;
    background:var(--mahogany-glow);
    pointer-events:none;
  }
  picture{display:contents;}
  img{display:block;width:100%;height:100%;object-fit:cover;}
  /* The hero video has this grade baked into the file (scripts/optimize-video.sh):
     a CSS filter on a playing video is re-applied every frame and stutters in
     Safari and Firefox. */
  .founder-photo img, .project-card img{
    filter:saturate(.9) brightness(.96) sepia(.05);
  }
  .grain{
    position:fixed;
    inset:0;
    z-index:400;
    pointer-events:none;
    opacity:.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
  }
  /* Keep the blended grain off the playing hero video: an overlay blend over
     video forces every frame to be re-composited (stutters in Safari/Firefox). */
  .hero-onscreen .grain{display:none;}
  a{color:inherit;text-decoration:none;}
  .eyebrow{
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--gold);
  }
  .js .fade{
    opacity:0;
    transform:translateY(22px);   /* short rise — no big slides */
    transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .js .fade.in{opacity:1;transform:translateY(0);}
  /* ---------- NAV ---------- */
  .site-logo{
    position:fixed;
    top:24px;left:2.5vw;
    z-index:211;
    display:inline-flex;
    align-items:center;
    gap:.45em;
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.5rem;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--sand);
    padding:6px 2px;
    text-shadow:0 2px 20px rgba(0,0,0,0.55), 0 0 2px rgba(0,0,0,0.35);
    opacity:0;
    transform:translateY(-16px);
    animation:logoReveal .8s var(--ease-out) forwards;
    animation-delay:.35s;
  }
  .site-logo:hover{color:var(--gold);}
  .site-logo:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:4px;}
  /* Brand wordmark (CG HOMES logo). The white art sits over the dark hero and
     the mahogany compact bar; the drop-shadow keeps it legible over imagery. */
  .site-logo-img{
    display:block;
    height:2.2rem;
    width:auto;
    filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5));
    transition:opacity var(--dur-base) var(--ease);
  }
  .site-logo:hover .site-logo-img{opacity:.72;}
  /* Only the home page waits for the intro; internal pages reveal the logo promptly */
  @keyframes logoReveal{ to{opacity:1;transform:translateY(0);} }
  /* Fixed top bar (Carbon-style): logo lives in .site-logo top-left, this holds
     the always-visible hamburger top-right. Sits above the overlay so the X
     stays clickable. Colour is currentColor so the hamburger lines invert. */
  header.site-nav{
    position:fixed;
    top:0;left:0;right:0;
    z-index:210;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:24px var(--gutter);
    color:var(--sand);
    background:transparent;
    transition:color var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease),
               transform var(--dur-base) var(--ease),
               background var(--dur-base) var(--ease), backdrop-filter var(--dur-base) var(--ease);
    /* Let clicks pass through the empty bar; only the controls are hot. */
    pointer-events:none;
  }
  header.site-nav > *{pointer-events:auto;}
  /* ---------- DESKTOP INLINE LINKS (Carbon desktop bar) ---------- */
  /* Hidden by default (mobile uses the hamburger + overlay); shown ≥992px. */
  .nav-inline{display:none;}
  /* Hamburger button — two right-aligned lines that morph into an X on open,
     replicating Carbon's ~400ms ease morph (top line wide, bottom line short). */
  .nav-toggle{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    gap:9px;
    width:48px;height:48px;
    padding:0;
    background:none;
    border:none;
    color:inherit;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-icon{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:9px;
    width:32px;
  }
  .menu-icon-line{
    display:block;
    height:2px;
    background:currentColor;
    border-radius:2px;
    transition:transform .4s cubic-bezier(.65,.05,.36,1),
               width .4s cubic-bezier(.65,.05,.36,1);
  }
  .menu-icon-line:nth-child(1){width:32px;}
  .menu-icon-line:nth-child(2){width:20px;}
  .nav-toggle:hover .menu-icon-line:nth-child(2){width:32px;}
  .nav-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px;}
  .nav-toggle[aria-expanded="true"] .menu-icon-line:nth-child(1){
    width:32px;transform:translateY(5.5px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] .menu-icon-line:nth-child(2){
    width:32px;transform:translateY(-5.5px) rotate(-45deg);
  }
  .logo{
    font-family:var(--font-display);
    font-weight:700;
    font-size:1rem;
    letter-spacing:.2em;
    text-transform:uppercase;
  }
  /* Lock the page behind the open overlay so it doesn't scroll-bleed. */
  body.menu-open{overflow:hidden;}
  /* Over light (cream/sand) sections the sand hamburger loses contrast. JS adds
     .nav-on-light to swap the lines to mahogany — currentColor carries it. */
  header.site-nav.nav-on-light{color:var(--mahogany);}
  /* When the dark overlay is open the bar floats on mahogany, so keep it sand. */
  body.menu-open header.site-nav{color:var(--sand);}
  /* ---------- SCROLL FADE (Carbon-style) ----------
     Scrolling down past the hero, the whole bar (with the brand wordmark) fades
     out (nav-hidden); scrolling up brings the compact bar back immediately. */
  /* Compact bar gains a solid, blurred background so the links read clearly
     over any content — then this whole opaque bar fades out at nav-hidden. */
  body.nav-compact header.site-nav{
    color:var(--sand);
    /* Solid, fully opaque fill (no backdrop-filter): iOS Safari clips
       backdrop-filtered fixed elements inset from the viewport edges,
       which detached the bar from the top/right. A solid fill stays
       flush to every edge. */
    background:var(--mahogany);
    box-shadow:0 1px 0 rgba(242,236,223,0.08);
  }
  body.nav-hidden header.site-nav{opacity:0;transform:translateY(-14px);}
  body.nav-hidden header.site-nav > *{pointer-events:none;}
  body.nav-hidden .site-logo{pointer-events:none;}
  body.nav-hidden .site-logo-img{opacity:0;}
  /* Overlay open — always fully reveal the bar and logo regardless of scroll. */
  body.menu-open header.site-nav{opacity:1;transform:none;}
  body.menu-open header.site-nav > *{pointer-events:auto;}
  body.menu-open .site-logo{pointer-events:auto;}
  body.menu-open .site-logo-img{opacity:1;}
  /* Mobile (<992px): drop the compact bar's opaque background entirely —
     the logo mark and hamburger simply float over the page content. */
  @media (max-width:991px){
    body.nav-compact header.site-nav{
      background:transparent;
      box-shadow:none;
    }
    /* …so over light sections the floating hamburger must go mahogany too
       (the compact rule above otherwise outranks .nav-on-light). */
    body.nav-compact:not(.menu-open) header.site-nav.nav-on-light{color:var(--mahogany);}
  }
  /* ============================================================
     DESKTOP NAV (≥992px) — Carbon's inline top-right link bar with a
     thin full-bleed rule under it. The hamburger + overlay are hidden
     here and reserved for mobile.
     ============================================================ */
  @media (min-width:992px){
    .nav-toggle{display:none;}
    /* Taller bar so the inline links center on the enlarged logo and the
       underline rule drops clear of the logo mark. */
    header.site-nav{padding-top:0;padding-bottom:0;min-height:108px;}
    /* Logo spans the bar's full height and centers vertically, so it sits on
       the exact baseline of the inline menu links; enlarged for presence. */
    .site-logo{top:0;height:108px;padding:0;align-items:center;}
    .site-logo-img{height:3rem;}
    .nav-inline{
      display:flex;
      align-items:center;
      gap:clamp(1.6rem,3vw,3rem);
    }
    .nav-inline a{
      position:relative;
      font-family:var(--font-display);
      font-size:.82rem;
      font-weight:500;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:currentColor;
      padding:.35rem 0;
      transition:color var(--dur-fast) var(--ease);
    }
    .nav-inline a::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-1px;
      height:1.5px;
      background:var(--gold);
      transform:scaleX(0);
      transform-origin:left center;
      transition:transform .4s var(--ease-expo);
    }
    .nav-inline a:hover,
    .nav-inline a:focus-visible{color:var(--gold);outline:none;}
    .nav-inline a:hover::after,
    .nav-inline a:focus-visible::after{transform:scaleX(1);}
    /* Active page: the brand's dot, not an underline */
    .nav-inline a.is-current{color:var(--gold);}
    .nav-inline a.is-current::before{
      content:"";
      position:absolute;
      left:-.95em;top:50%;
      width:5px;height:5px;
      margin-top:-2.5px;
      border-radius:50%;
      background:var(--gold);
    }
    .nav-inline a:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:3px;}
    /* Thin full-bleed rule beneath the bar (Carbon's horizontal_line_element) */
    header.site-nav::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:0;
      height:1px;
      background:currentColor;
      opacity:.22;
      pointer-events:none;
    }
  }
  /* ============================================================
     FULL-SCREEN OVERLAY MENU (Carbon replica)
     Fixed, full-viewport, deep-mahogany. Fades + slides in; links
     stagger; each link has a left active-dot and a draw-in gold
     underline (Carbon's line-track / active-link-dot patterns).
     ============================================================ */
  .nav-overlay{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    flex-direction:column;
    padding:clamp(6.5rem,14vh,9rem) var(--gutter) clamp(2rem,6vh,3.5rem);
    background:
      radial-gradient(120% 90% at 82% -10%, rgba(35,26,24,0.9) 0%, rgba(14,10,9,0) 55%),
      var(--mahogany);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .5s var(--ease-expo), visibility .5s var(--ease-expo);
  }
  .nav-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-overlay-menu{
    display:flex;
    flex-direction:column;
    height:100%;
    width:100%;
    max-width:1200px;
    margin:0 auto;
  }
  .nav-overlay-list{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:clamp(.2rem,1.4vh,.9rem);
    flex:1 1 auto;
    justify-content:center;
    margin:0;padding:0;
  }
  .nav-overlay-item{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
  }
  .nav-overlay.is-open .nav-overlay-item{opacity:1;transform:none;}
  .nav-overlay.is-open .nav-overlay-item:nth-child(1){transition-delay:.10s;}
  .nav-overlay.is-open .nav-overlay-item:nth-child(2){transition-delay:.17s;}
  .nav-overlay.is-open .nav-overlay-item:nth-child(3){transition-delay:.24s;}
  .nav-overlay.is-open .nav-overlay-item:nth-child(4){transition-delay:.31s;}
  .nav-overlay.is-open .nav-overlay-item:nth-child(5){transition-delay:.38s;}
  .nav-overlay-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    width:fit-content;
    max-width:100%;
    padding:.06em 0 .12em 1.4em;
    color:var(--sand);
    font-family:var(--font-serif);
    font-weight:300;
    font-size:clamp(2.5rem,8vw,5.25rem);
    line-height:1.02;
    letter-spacing:-.02em;
    transition:color var(--dur-fast) var(--ease);
  }
  .nav-overlay-link:hover,
  .nav-overlay-link:focus-visible{color:var(--gold);outline:none;}
  /* Active-page dot — opacity 0 by default, 1 on the current page (Carbon) */
  .nav-link-dot{
    position:absolute;
    left:0;
    top:50%;
    width:.42em;height:.42em;
    margin-top:-.21em;
    border-radius:50%;
    background:var(--gold);
    opacity:0;
    transition:opacity var(--dur-base) var(--ease);
  }
  .nav-overlay-link.is-current .nav-link-dot{opacity:1;}
  .nav-overlay-link.is-current{color:var(--sand);}
  /* Draw-in underline — expands from the left on hover (Carbon line-track) */
  .nav-link-line{
    position:absolute;
    left:1.4em;right:0;
    bottom:.06em;
    height:1.5px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform .45s var(--ease-expo);
  }
  .nav-overlay-link:hover .nav-link-line,
  .nav-overlay-link:focus-visible .nav-link-line{transform:scaleX(1);}
  .nav-overlay-bottom{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:1.4rem 2rem;
    padding-top:clamp(1.5rem,4vh,2.2rem);
    margin-top:1rem;
    border-top:1px solid rgba(242,236,223,0.14);
    opacity:0;
    transform:translateY(28px);
    transition:opacity .6s var(--ease-expo), transform .6s var(--ease-expo);
  }
  .nav-overlay.is-open .nav-overlay-bottom{opacity:1;transform:none;transition-delay:.46s;}
  .nav-overlay-email{
    font-family:var(--font-display);
    font-size:.9rem;
    letter-spacing:.04em;
    color:var(--sand);
    opacity:.85;
    transition:color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .nav-overlay-email:hover{color:var(--gold);opacity:1;}
  .nav-overlay-social{display:flex;gap:1.6rem;}
  .nav-overlay-social a{
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--sand);
    opacity:.8;
    transition:color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
  }
  .nav-overlay-social a:hover,
  .nav-overlay-social a:focus-visible{color:var(--gold);opacity:1;}
  .nav-overlay .btn-light{flex:0 0 auto;}
  /* ---------- STATEMENT ---------- */
  .statement{
    position:relative;
    overflow:hidden;
    background:var(--mahogany-glow);
    padding:var(--section-y) var(--gutter);
    text-align:center;
  }
  .statement::before{
    content:"";
    position:absolute;
    top:-25%;right:-15%;
    width:60%;height:150%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(50px);
    pointer-events:none;
  }
  .statement::after{
    content:"";
    position:absolute;
    bottom:-30%;left:-15%;
    width:55%;height:140%;
    background:radial-gradient(circle, var(--ember-dim) 0%, rgba(140,58,30,0) 70%);
    filter:blur(60px);
    pointer-events:none;
  }
  .statement-inner{
    position:relative;
    z-index:1;
    max-width:var(--container-wide);
    margin:0 auto;
  }
  .statement-inner .eyebrow{display:inline-block;margin-bottom:1.7rem;font-size:.78rem;letter-spacing:.26em;color:var(--gold);}
  .statement-inner h1,
  .statement-inner .statement-title{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:clamp(2.15rem, 4.7vw, 4rem);
    letter-spacing:.04em;
    line-height:1.24;
    color:var(--sand);
    text-shadow:0 4px 30px rgba(0,0,0,0.35);
    margin-bottom:0;
  }
  .statement-inner p{
    font-size:var(--text-md);
    font-weight:300;
    color:rgba(242,236,223,0.75);
    max-width:560px;
    margin:0 auto 2.6rem;
  }
  /* staggered statement reveal */
  .js .statement-inner .eyebrow,
  .js .statement-inner h1,
  .js .statement-inner .statement-title,
  .js .statement-inner p,
  .js .statement-inner .btn{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .js .statement-inner.in .eyebrow{opacity:1;transform:none;transition-delay:.15s;}
  .js .statement-inner.in h1,
  .js .statement-inner.in .statement-title{opacity:1;transform:none;transition-delay:.32s;}
  .js .statement-inner.in p{opacity:1;transform:none;transition-delay:.52s;}
  .js .statement-inner.in .btn{opacity:1;transform:none;transition-delay:.7s;}
  /* Thin vertical accent line above the statement (Reference A). */
  .statement-rule{
    display:block;
    width:1px;
    height:clamp(54px,7vh,86px);
    margin:0 auto 2.4rem;
    background:linear-gradient(180deg, rgba(185,151,91,0) 0%, var(--gold) 100%);
  }
  .js .statement-inner .statement-rule{
    opacity:0;
    transform:scaleY(.4);
    transform-origin:top center;
    transition:opacity .9s var(--ease-out), transform 1.1s var(--ease-out);
  }
  .js .statement-inner.in .statement-rule{opacity:1;transform:none;transition-delay:.05s;}
  /* Mobile: keep the hero slogan + statement lead within the viewport. */
  @media (max-width:600px){
    .hero-title{font-size:clamp(2.4rem,11.5vw,3.6rem);max-width:13ch;}
    .statement{padding:var(--section-y-sm) var(--gutter-mobile);}
    .statement-inner .statement-title{
      font-size:clamp(1.55rem,7vw,2.4rem);
      letter-spacing:.02em;
      line-height:1.32;
      overflow-wrap:break-word;
    }
    .statement-inner .eyebrow{font-size:.72rem;letter-spacing:.22em;}
    .statement-inner p{font-size:1rem;}
  }
  /* Atelier buttons: hairline-bordered rectangle, flat surface. On hover a
     solid ink fill (::after) wipes in from the left and the label inverts;
     the fill sits 1px inside the border, leaving a fine keyline. */
  .btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    isolation:isolate;
    overflow:hidden;
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.24em;
    text-indent:.24em;         /* re-centres tracking on the last glyph */
    text-transform:uppercase;
    padding:1.1rem 2.2rem;
    border-radius:2px;
    border:1px solid;
    background:transparent;
    transition:color .5s var(--ease-out), border-color .5s var(--ease-out);
  }
  .btn::after{
    content:"";
    position:absolute;inset:0;
    z-index:-1;
    background:var(--btn-fill, currentColor);
    transform:scaleX(0);
    transform-origin:right center;   /* exits stage right… */
    transition:transform .55s var(--ease-expo);
  }
  .btn:hover::after,
  .btn:focus-visible::after{
    transform:scaleX(1);
    transform-origin:left center;    /* …enters stage left */
  }
  .btn:active{transform:scale(.985);transition-duration:.15s;}
  .btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .btn-light{
    color:var(--sand);
    border-color:rgba(242,236,223,0.4);
    --btn-fill:var(--sand);
  }
  .btn-light:hover,
  .btn-light:focus-visible{color:var(--mahogany);border-color:var(--sand);}
  .btn-dark{
    color:var(--mahogany);
    border-color:rgba(26,20,19,0.34);
    --btn-fill:var(--mahogany);
  }
  .btn-dark:hover,
  .btn-dark:focus-visible{color:var(--sand);border-color:var(--mahogany);}
  /* ---------- SECTION SCAFFOLD ---------- */
  section{position:relative;}
  .section-inner{padding:var(--section-y) var(--gutter);}
  /* ---------- WHY US ---------- */
  .why-us{
    position:relative;
    overflow:hidden;
    background:radial-gradient(120% 140% at 15% 0%, #FBF6EA 0%, var(--sand-dim) 65%);
    color:var(--mahogany);
    padding:var(--section-y) var(--gutter);
  }
  .why-us::before{
    content:"";
    position:absolute;
    top:-30%;right:-10%;
    width:55%;height:150%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(60px);
    pointer-events:none;
  }
  .why-head, .why-grid{position:relative;z-index:1;}
  /* Same chapter-ledger treatment as .section-head */
  .why-head{
    max-width:var(--container-wide);
    margin:0 auto 3.8rem;
    padding-top:1.5rem;
    text-align:left;
    border-top:1px solid rgba(26,20,19,0.16);
  }
  .why-head .eyebrow{
    color:var(--gold);
    display:flex;
    align-items:baseline;
    gap:1.1rem;
    margin-bottom:1.2rem;
  }
  .why-head .eyebrow::before{
    counter-increment:cg-section;
    content:counter(cg-section, decimal-leading-zero);
    opacity:.58;
  }
  .why-head h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:var(--text-3xl);
    letter-spacing:.04em;
    line-height:1.12;
    color:var(--mahogany);
    margin-top:0;
  }
  /* ---------- FLIP CARDS (Why Us) ---------- */
  .why-cards-stack{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    gap:1rem;
    width:100%;
    max-width:1400px;
    margin-inline:auto;
  }
  .flip-card{
    position:relative;
    width:100%;
    height:400px;
    cursor:pointer;
    border-radius:8px;
    /* Static shadow — animating box-shadow during the reveal caused repaint lag. */
    box-shadow:0 16px 40px rgba(26,20,19,0.14);
  }
  .flip-card-inner{
    position:relative;
    width:100%;
    height:100%;
  }
  /* Crossfade reveal (no 3D flip): the front image fades out over the
     always-opaque text panel beneath it, so the image never shows through. */
  @media (hover:hover){
    .flip-card:hover .flip-card-front{opacity:0;}
  }
  .flip-card.is-flipped .flip-card-front{opacity:0;}
  /* Touch cue: a discreet hint that the card flips. It rides on the front
     face, so it disappears on its own the moment the card turns. */
  .flip-hint{display:none;}
  @media (hover:none){
    .flip-hint{
      display:inline-flex;
      align-items:center;
      gap:.5rem;
      position:absolute;
      top:1.35rem;right:1.35rem;
      z-index:3;
      font-family:var(--font-display);
      font-size:.58rem;
      font-weight:600;
      letter-spacing:.18em;
      text-transform:uppercase;
      color:var(--sand);
      background:rgba(26,20,19,0.5);
      padding:.5rem .75rem;
      border-radius:100px;
      border:1px solid rgba(242,236,223,0.24);
      pointer-events:none;
    }
    .flip-hint::before{
      content:"";
      width:.62rem;height:.62rem;
      border:1px solid var(--gold);
      border-radius:50%;
      box-shadow:0 0 0 3px rgba(185,151,91,0.18);
    }
  }
  .flip-card-front,
  .flip-card-back{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:8px;
  }
  .flip-card-front{
    z-index:2;
    opacity:1;
    transition:opacity .55s var(--ease-out);
    will-change:opacity;
  }
  .flip-card-front img{
    width:100%;height:100%;
    object-fit:cover;
    /* No CSS filter here — filters on the 3D face are a big compositing cost
       during the flip. The gradient below carries the darkening instead. */
  }
  .flip-card-front::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0.12) 0%, rgba(26,20,19,0.05) 34%, rgba(26,20,19,0.78) 100%);
    pointer-events:none;
  }
  .flip-card-title{
    position:absolute;
    left:2.8rem;right:2.8rem;bottom:2.1rem;
    z-index:1;
    color:var(--sand);
  }
  .flip-card-title .why-index{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.2em;
    color:var(--gold);
    margin-bottom:.7rem;
  }
  .flip-card-title .why-index::after{
    content:"";
    width:2rem;height:1px;
    background:var(--gold);
    opacity:.6;
  }
  .flip-card-title h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.95rem;
    letter-spacing:-.005em;
    line-height:1.16;
    color:var(--sand);
    text-shadow:0 2px 16px rgba(0,0,0,0.4);
  }
  .flip-card-back{
    z-index:1;
    background:var(--mahogany-glow);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:3rem clamp(2.8rem,5vw,4.4rem);
  }
  .flip-card-back .why-index{
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.2em;
    color:var(--gold);
    margin-bottom:.9rem;
  }
  .flip-card-back .why-index::after{
    content:"";
    width:2rem;height:1px;
    background:var(--gold);
    opacity:.6;
  }
  .flip-card-back h3,
  .flip-card-back .flip-back-title{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.7rem;
    letter-spacing:-.005em;
    line-height:1.2;
    color:var(--sand);
    margin-bottom:1.1rem;
  }
  .flip-card-back p{
    font-size:1rem;
    line-height:1.6;
    color:rgba(242,236,223,0.8);
    max-width:680px;
  }
  @media (max-width:900px){
    .flip-card{height:400px;}
    .flip-card-title{left:1.8rem;right:1.8rem;bottom:1.5rem;}
    .flip-card-title h3{font-size:1.5rem;}
    .flip-card-back{padding:2.3rem 2rem;}
    .flip-card-back h3, .flip-card-back .flip-back-title{font-size:1.35rem;}
    .flip-card-back p{font-size:.95rem;}
  }
  @media (max-width:560px){
    .flip-card{height:520px;}
    .flip-card-title{left:1.5rem;right:1.5rem;}
    .flip-card-back{padding:2rem 1.6rem;}
    .flip-card-back p{font-size:.9rem;line-height:1.55;}
  }
  /* ---------- FOUNDER STORY (index, about, contact) ---------- */
  .founder{
    position:relative;
    overflow:hidden;
    background:var(--mahogany-glow);
    color:var(--sand);
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .founder::before{
    content:"";
    position:absolute;
    bottom:-20%;left:-10%;
    width:50%;height:120%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(60px);
    pointer-events:none;
    z-index:0;
  }
  .founder::after{
    content:"";
    position:absolute;
    top:-25%;right:-10%;
    width:45%;height:120%;
    background:radial-gradient(circle, var(--ember-dim) 0%, rgba(140,58,30,0) 70%);
    filter:blur(65px);
    pointer-events:none;
    z-index:0;
  }
  .founder-photo, .founder-copy{position:relative;z-index:1;}
  .founder-photo{height:100%;min-height:420px;position:relative;overflow:hidden;}
  .js .founder-photo img{
    transform:scale(1.15);
    transition:transform 1.4s var(--ease-out);
  }
  .js .founder.in .founder-photo img{transform:scale(1);}
  .founder-photo::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0) 60%, rgba(26,20,19,0.5) 100%);
  }
  .founder-copy{
    padding:var(--section-y) 2.25vw;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .founder-copy .eyebrow{color:var(--sand-dim);opacity:.75;}
  .quote-mark{
    display:block;
    font-family:var(--font-display);
    font-size:4.2rem;
    line-height:1;
    color:var(--gold);
    opacity:.65;
    margin:.5rem 0 -1rem;
  }
  .founder-rule{
    width:48px;height:1px;
    background:var(--gold);
    opacity:.6;
    margin:1.8rem 0 1.5rem;
  }
  blockquote{
    font-family:var(--font-serif);
    font-weight:400;
    font-style:normal;
    font-size:clamp(1.4rem,2.4vw,2rem);
    letter-spacing:-.01em;
    line-height:1.3;
    margin:1.4rem 0 2.2rem;
    color:var(--sand);
  }
  .founder-copy p.bio{
    font-size:.98rem;
    color:rgba(242,236,223,0.78);
    max-width:520px;
    margin-bottom:.5rem;
  }
  .founder-names{
    font-family:var(--font-serif);
    font-weight:600;
    letter-spacing:0;
    font-size:1.05rem;
    margin-top:1.6rem;
    color:var(--sand);
  }
  .founder-names span{
    display:block;
    font-family:var(--font-body);
    font-weight:300;
    letter-spacing:0;
    font-size:.82rem;
    color:rgba(242,236,223,0.72);
    margin-top:.2rem;
  }
  /* Staggered founder reveal (progressive enhancement — .js only). */
  .js .founder-copy .eyebrow,
  .js .founder-copy blockquote,
  .js .founder-copy p.bio,
  .js .founder-copy .founder-names{
    opacity:0;
    transform:translateY(20px);
    transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
  }
  .js .founder.in .founder-copy .eyebrow{opacity:1;transform:none;transition-delay:.1s;}
  .js .founder.in .founder-copy blockquote{opacity:1;transform:none;transition-delay:.28s;}
  .js .founder.in .founder-copy p.bio{opacity:1;transform:none;transition-delay:.48s;}
  .js .founder.in .founder-copy p.bio:nth-of-type(2){transition-delay:.6s;}
  .js .founder.in .founder-copy p.bio:nth-of-type(3){transition-delay:.72s;}
  .js .founder.in .founder-copy .founder-names{opacity:1;transform:none;transition-delay:.88s;}
  /* ---------- PROJECTS GRID ---------- */
  .projects{background:var(--sand);color:var(--mahogany);}
  .projects .eyebrow{color:var(--gold);}
  /* Tighter top rhythm: the heading should sit close to the work it introduces */
  .projects .section-inner{padding-top:5.5rem;padding-bottom:var(--space-10);}
  /* Same chapter-ledger treatment as .section-head */
  .projects-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:2.1rem;
    padding-top:1.5rem;
    border-top:1px solid rgba(26,20,19,0.16);
    gap:2rem;
    flex-wrap:wrap;
  }
  .projects-head .eyebrow{
    display:flex;
    align-items:baseline;
    gap:1.1rem;
  }
  .projects-head .eyebrow::before{
    counter-increment:cg-section;
    content:counter(cg-section, decimal-leading-zero);
    opacity:.58;
  }
  .projects-head h1,
  .projects-head h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:var(--text-3xl);
    letter-spacing:.04em;
    line-height:1.12;
    margin-top:1rem;
  }
  .projects-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem;
  }
  .project-card{
    position:relative;overflow:hidden;height:420px;
    transition:box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
  }
  .project-card:first-child{grid-column:span 2;}
  .project-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(0,0,0,0.35);}
  .project-card img{
    transform:scale(1.15);
    transition:transform 1.3s var(--ease-out);
  }
  .projects.in .project-card img{transform:scale(1);}
  .project-card:hover img,
  .project-card:focus-visible img{transform:scale(1.04);transition:transform var(--dur-slow) var(--ease);}
  .project-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .project-card::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0) 55%, rgba(26,20,19,0.78) 100%);
  }
  .project-label{
    position:absolute;left:1.6rem;bottom:1.5rem;z-index:2;color:var(--sand);
  }
  .project-index{
    display:block;
    font-family:var(--font-display);
    font-size:var(--text-xs);
    font-weight:500;
    letter-spacing:.18em;
    color:var(--gold);
    margin-bottom:.6rem;
  }
  .project-label .eyebrow{color:var(--sand-dim);opacity:.85;}
  .project-label h3{
    font-family:var(--font-serif);
    font-weight:400;
    font-size:1.35rem;
    margin-top:.35rem;
  }
  .project-cta{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-family:var(--font-display);
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.14em;
    text-transform:uppercase;
    margin-top:.8rem;
    color:var(--sand);
    opacity:0;
    transform:translateY(6px);
    transition:opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
  }
  .project-card:hover .project-cta,
  .project-card:focus-visible .project-cta{opacity:1;transform:translateY(0);}
  .project-cta i{font-style:normal;display:inline-block;transition:transform var(--dur-base) var(--ease);}
  .project-card:hover .project-cta i,
  .project-card:focus-visible .project-cta i{transform:translateX(4px);}
  /* ---------- CTA BAND ---------- */
  .cta-band{
    position:relative;
    overflow:hidden;
    background:var(--mahogany-glow);
    color:var(--sand);
    text-align:center;
    padding:6.5rem var(--gutter);
    border-top:1px solid rgba(242,236,223,0.08);
  }
  .cta-band::before{
    content:"";
    position:absolute;
    top:-40%;left:30%;
    transform:translateX(-50%);
    width:60%;height:170%;
    background:radial-gradient(circle, var(--gold-dim) 0%, rgba(185,151,91,0) 70%);
    filter:blur(60px);
    pointer-events:none;
  }
  .cta-band::after{
    content:"";
    position:absolute;
    bottom:-40%;right:10%;
    width:50%;height:160%;
    background:radial-gradient(circle, var(--ember-dim) 0%, rgba(140,58,30,0) 70%);
    filter:blur(65px);
    pointer-events:none;
  }
  .cta-band .eyebrow, .cta-band h2, .cta-band .btn{position:relative;z-index:1;}
  .cta-band .eyebrow{color:rgba(242,236,223,0.7);}
  .cta-band h2{
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:clamp(1.6rem,3.2vw,2.6rem);
    letter-spacing:.05em;
    text-shadow:0 4px 30px rgba(0,0,0,0.35);
    margin:1rem 0 2.2rem;
  }
  /* Deep charcoal CTA variant — matches the contact boxes */
  .cta-band.cta-green{background:#0E0A09;}
  .cta-band.cta-green::before,
  .cta-band.cta-green::after{content:none;}
  /* ---------- FOOTER ---------- */
  footer{
    background:var(--mahogany-glow);
    color:var(--sand);
    padding:5.5rem var(--gutter) 2.2rem;
    border-top:1px solid rgba(242,236,223,0.08);
  }
  .footer-main{
    display:grid;
    grid-template-columns:1.5fr .85fr auto;
    align-items:start;
    gap:var(--space-6);
    padding-bottom:var(--space-7);
    border-bottom:1px solid rgba(242,236,223,0.15);
  }
  .footer-logo{
    display:inline-flex;
    flex-direction:column;
    align-items:flex-start;
    color:var(--sand);
  }
  .footer-logo-img{
    height:2.4rem;
    width:auto;
    margin-bottom:1.2rem;
  }
  .footer-logo-sub{
    margin-top:.65rem;
    font-family:var(--font-display);
    font-size:.6rem;
    font-weight:600;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.55);
  }
  .footer-logo:hover .footer-logo-img{opacity:.72;}
  .footer-tagline{
    margin:1.2rem 0 0;
    max-width:30ch;
    font-size:.92rem;
    line-height:1.6;
    color:rgba(242,236,223,0.7);
    text-align:left;
    hyphens:manual;
  }
  .footer-heading{
    font-family:var(--font-display);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.55);
    margin-bottom:1.1rem;
  }
  .footer-block a, .footer-block span{
    display:block;
    font-size:.92rem;
    color:rgba(242,236,223,0.88);
    margin-bottom:.6rem;
  }
  .footer-block span{color:rgba(242,236,223,0.55);}
  .footer-block a{
    position:relative;
    width:fit-content;
    transition:color var(--dur-fast) var(--ease);
  }
  .footer-block a::after{
    content:"";
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:1px;
    background:var(--gold);
    transition:width .4s var(--ease-out);
  }
  .footer-block a:hover{color:var(--sand);}
  .footer-block a:hover::after{width:100%;}
  .footer-block a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .footer-nav{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:.4rem;
    text-align:right;
  }
  .footer-nav a{
    position:relative;
    width:fit-content;
    font-family:var(--font-serif);
    font-weight:400;
    font-size:clamp(1.5rem,1.9vw,1.85rem);
    line-height:1.45;
    letter-spacing:-.005em;
    color:var(--sand);
    transition:color var(--dur-fast) var(--ease);
  }
  .footer-nav a::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:2px;
    height:1px;
    background:var(--gold);
    transform:scaleX(0);
    transform-origin:right center;
    transition:transform var(--dur-base) var(--ease);
  }
  .footer-nav a:hover::after,
  .footer-nav a:focus-visible::after{transform:scaleX(1);transform-origin:left center;}
  .footer-nav a:hover{color:var(--gold);}
  .footer-nav a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .footer-col h4{
    font-family:var(--font-display);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.55);
    margin-bottom:1.1rem;
  }
  .footer-col a, .footer-col span{
    display:block;
    font-size:.92rem;
    color:rgba(242,236,223,0.88);
    margin-bottom:.6rem;
  }
  .footer-col a{
    position:relative;
    width:fit-content;
    transition:color var(--dur-fast) var(--ease);
  }
  .footer-col a::after{
    content:"";
    position:absolute;
    left:0;bottom:-2px;
    width:0;height:1px;
    background:var(--gold);
    transition:width .4s var(--ease-out);
  }
  .footer-col a:hover{color:var(--sand);}
  .footer-col a:hover::after{width:100%;}
  .footer-col a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .footer-bottom{
    display:flex;
    justify-content:space-between;
    padding-top:var(--space-4);
    font-size:.78rem;
    color:rgba(242,236,223,0.62);
    flex-wrap:wrap;
    gap:var(--space-2);
  }
  /* Privacy Notice link (footer) and the notice under each enquiry form */
  .footer-legal{color:inherit;text-decoration:none;border-bottom:1px solid rgba(242,236,223,0.25);transition:color .3s ease, border-color .3s ease;}
  .footer-legal:hover{color:var(--sand);border-color:var(--gold);}
  .form-privacy{flex-basis:100%;margin-top:1rem;font-size:.78rem;line-height:1.55;color:rgba(242,236,223,0.55);}
  .form-privacy a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(242,236,223,0.3);}
  .form-privacy a:hover{color:var(--sand);border-color:var(--gold);}
  /* ---------- RESPONSIVE ---------- */
  /* Compact placement: pull the fixed bar's hamburger and the logo tight to the
     corners so they never crowd the viewport on smaller screens. The overlay
     itself is already fully responsive (fluid clamps), so nothing else changes. */
  @media (max-width:1139px){
    #siteNav{top:16px;right:16px;}
    /* Give pinned-nav pages room so the first heading clears the fixed bar */
    body.nav-pinned .projects .section-inner{padding-top:6.5rem;}
    .site-logo{top:16px;left:16px;padding:11px 18px;font-size:.92rem;}
  }
  /* Phones/tablets: the logo box is the hamburger's height and sits on its
     centre line (bar top 16px + 24px padding + 24px = 64px). */
  @media (max-width:991px){
    .site-logo{top:40px;height:48px;align-items:center;}
  }
  @media (max-width:900px){
    .founder{grid-template-columns:1fr;}
    .founder-photo{min-height:320px;}
    .founder-copy{padding:4rem var(--gutter-mobile);}
    .projects-grid{grid-template-columns:1fr;}
    .project-card:first-child{grid-column:span 1;}
    .section-inner{padding:var(--section-y-sm) var(--gutter-mobile);}
    /* Tighten oversized vertical rhythm on the dark editorial bands */
    .statement{padding:var(--section-y-sm) var(--gutter-mobile);}
    .why-us{padding:var(--space-10) var(--gutter-mobile);}
    .cta-band{padding:var(--space-10) var(--gutter-mobile);}
    .footer-main{grid-template-columns:1fr 1fr;gap:2.6rem;}
    .footer-ident{grid-column:1 / -1;}
    .footer-nav{grid-column:1 / -1;align-items:flex-start;text-align:left;}
    /* Belt-and-suspenders: never let anything push a sideways scroll on phones */
    html,body{overflow-x:hidden;}
  }
  /* ---------- PHONE REFINEMENTS ---------- */
  @media (max-width:560px){
    .footer-main{grid-template-columns:1fr;gap:2.4rem;}
    .site-logo{font-size:.86rem;letter-spacing:.16em;padding:10px 15px;max-width:calc(100vw - 96px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .site-logo-img{height:1.55rem;}
    /* Comfortable tap targets + wrapping for the projects filter row */
    .project-filters{gap:.6rem;}
    .filter-btn{min-height:44px;padding:.7rem 1.15rem;}
    /* Keep display headings from clipping at the smallest widths */
    .projects-head{gap:1.2rem;margin-bottom:2.2rem;}
    .why-head{margin-bottom:2.6rem;}
    .founder-copy{padding:3.4rem var(--gutter-mobile);}
  }
  /* ---------- INTRO LOADER (already-played state) ---------- */
  .intro-done .intro-loader{display:none;}
  /* ---------- PINNED NAV (per-page) ---------- */
  /* ============================================================
     HIGH-END PAGE SECTIONS  (process / about / contact)
     Cinematic hero motion, staggered scroll reveals, and a small
     kit of editorial sections — all built on the existing tokens.
     ============================================================ */
  /* ---------- Generic staggered reveal ----------
     Uses the independent `translate` property (not `transform`) so a revealed
     element can still carry its own transform-based hover/scale without conflict. */
  .js [data-reveal] .r-item{
    opacity:0;
    translate:0 22px;
    transition:opacity var(--dur-slow) var(--ease), translate var(--dur-slow) var(--ease);
    will-change:opacity, translate;
  }
  .js [data-reveal].in .r-item{opacity:1;translate:0 0;}
  [data-reveal].in .r-item:nth-child(1){transition-delay:.05s;}
  [data-reveal].in .r-item:nth-child(2){transition-delay:.13s;}
  [data-reveal].in .r-item:nth-child(3){transition-delay:.21s;}
  [data-reveal].in .r-item:nth-child(4){transition-delay:.29s;}
  [data-reveal].in .r-item:nth-child(5){transition-delay:.37s;}
  [data-reveal].in .r-item:nth-child(6){transition-delay:.45s;}
  [data-reveal].in .r-item:nth-child(7){transition-delay:.53s;}
  [data-reveal].in .r-item:nth-child(8){transition-delay:.61s;}
  [data-reveal].in .r-item:nth-child(9){transition-delay:.69s;}
  [data-reveal].in .r-item:nth-child(10){transition-delay:.77s;}
  [data-reveal].in .r-item:nth-child(11){transition-delay:.85s;}
  [data-reveal].in .r-item:nth-child(12){transition-delay:.93s;}
  /* ---------- Section heading (shared) — chapter ledger ----------
     Full-width editorial header anchored to the content grid: a hairline
     rule on top, an auto chapter index beside the eyebrow, a large serif
     title on the left, and the lede in a right-hand column bottom-aligned
     with the title. Replaces the old small centered stack. */
  body{counter-reset:cg-section;}
  .section-head{
    max-width:var(--container-wide);
    margin:0 auto var(--space-8);
    padding-top:1.5rem;
    text-align:left;
    border-top:1px solid rgba(26,20,19,0.16);
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:clamp(2.5rem,6vw,7.5rem);
  }
  .section-head .eyebrow{
    grid-column:1;
    display:flex;
    align-items:baseline;
    gap:1.1rem;
    color:var(--gold);
  }
  .section-head .eyebrow::before{
    counter-increment:cg-section;
    content:counter(cg-section, decimal-leading-zero);
    opacity:.58;
  }
  .section-head h2{
    grid-column:1;
    font-family:var(--font-serif);
    font-weight:300;
    text-transform:uppercase;
    font-size:var(--text-3xl);
    letter-spacing:.04em;
    line-height:1.12;
    margin-top:1.2rem;
  }
  .section-head.light h2{color:var(--mahogany);}
  .section-head.dark{border-top-color:rgba(242,236,223,0.2);}
  .section-head.dark h2{color:var(--sand);}
  .section-head p.lede{
    grid-column:2;
    grid-row:1 / span 2;
    align-self:end;
    margin:0;
    font-size:1.02rem;
    font-weight:300;
    max-width:46ch;
  }
  .section-head.light p.lede{color:var(--mahogany-70);}
  .section-head.dark p.lede{color:rgba(242,236,223,0.72);}
  @media (max-width:900px){
    .section-head{grid-template-columns:1fr;grid-template-rows:none;}
    .section-head p.lede{grid-column:1;grid-row:auto;align-self:start;margin-top:1.1rem;}
  }
  /* ============================================================
     CROSS-DOCUMENT PAGE TRANSITIONS  (View Transitions API)
     Same-origin navigations cross-fade so moving between pages feels
     continuous instead of a hard load. The fixed logo and nav bar carry
     stable view-transition-names, so they hold their position across
     navigations instead of fading with the page. Pure progressive
     enhancement: browsers without support just navigate normally.
     ============================================================ */
  @view-transition{navigation:auto;}
  /* Soft cross-dissolve: the outgoing page eases away while the incoming page
     is already fully painted underneath (so there is no mid-transition flash),
     settling in from a hair of scale for a gentle "arrive". */
  ::view-transition-old(root){
    animation:cgViewOut .5s var(--ease) both;
  }
  ::view-transition-new(root){
    animation:cgViewIn .65s var(--ease) both;
  }
  @keyframes cgViewOut{ to{opacity:0;} }
  @keyframes cgViewIn{
    from{opacity:1;transform:scale(1.008);}
    to{opacity:1;transform:none;}
  }
  .site-logo{view-transition-name:site-logo;}
  header.site-nav{view-transition-name:site-nav;}
  /* ============================================================
     SITE-WIDE MOTION  (refined, subtle — text + images)
     Slow directional reveals, gentle image clip/scale-ins, gentle
     hero parallax, and calm hover micro-interactions. All motion is
     GPU-friendly (opacity / transform / translate) and fully disabled
     under prefers-reduced-motion (see guard at the end of this block).
     ============================================================ */
  /* ---------- Single-element rise + fade utility (translate-based,
     so it never fights a transform-based hover on the same node) ---------- */
  .js .reveal{
    opacity:0;
    translate:0 26px;
    transition:opacity var(--duration-slow) var(--ease-out), translate var(--duration-slow) var(--ease-out);
    will-change:opacity, translate;
  }
  .js .reveal.in{opacity:1;translate:0 0;}
  /* ---------- Image clip / scale-in (gallery tiles, media) ----------
     The tile itself carries the reveal transform; the inner <img> keeps its
     own hover scale, so the two never collide. */
  .js .reveal-media{
    opacity:0;
    transform:translateY(22px) scale(.99);
    transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    will-change:opacity, transform;
  }
  .js .reveal-media.in{opacity:1;transform:none;}
  /* ---------- Gentle hero parallax base ----------
     JS drives a small translate on scroll; the baseline scale gives the image
     room to move without ever revealing an edge. Opacity fades in on load
     (transform stays free for the JS parallax). */
  .project-hero img{
    animation:heroImgFade 1.6s ease forwards;
    transform:scale(1.12);
    will-change:transform;
  }
  @keyframes heroImgFade{ from{opacity:0;} to{opacity:1;} }
  /* ---------- Image hover micro-interactions ---------- */
  .gallery-item{cursor:zoom-in;}
  .gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(26,20,19,0) 55%, rgba(26,20,19,0.28) 100%);
    opacity:0;
    transition:opacity .6s var(--ease-out);
  }
  .gallery-item:hover::before{opacity:1;}
  /* Lightbox affordance on all eligible images */
  .project-card img,
  .project-hero img{cursor:zoom-in;}
  /* ============================================================
     LIGHTBOX  (full-screen image viewer)
     One reusable overlay, built in JS and appended to <body>. Dark
     neutral (near-black / mahogany) backdrop, contained (uncropped)
     image, prev/next + counter, close, keyboard + backdrop dismissal.
     ============================================================ */
  .lightbox{
    position:fixed;
    inset:0;
    z-index:500;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(1rem, 4vw, 3.5rem);
    background:rgba(14,10,9,0.94);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .5s var(--ease-out), visibility .5s;
  }
  .lightbox.open{opacity:1;visibility:visible;pointer-events:auto;}
  body.lb-lock{overflow:hidden;}
  .lightbox-stage{
    position:relative;
    max-width:100%;
    max-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .lightbox-img{
    display:block;
    width:auto;
    height:auto;
    max-width:min(92vw, 1600px);
    max-height:86vh;
    object-fit:contain;
    border-radius:4px;
    box-shadow:0 30px 80px rgba(0,0,0,0.55);
    transform:scale(.965);
    opacity:0;
    transition:opacity .5s var(--ease-out), transform .6s var(--ease-out);
  }
  .lightbox.open .lightbox-img{transform:scale(1);opacity:1;}
  .lightbox-btn{
    position:absolute;
    z-index:2;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--sand);
    background:rgba(26,20,19,0.42);
    border:1px solid rgba(255,255,255,0.22);
    border-radius:999px;
    cursor:pointer;
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    backdrop-filter:blur(12px) saturate(160%);
    box-shadow:0 8px 22px rgba(0,0,0,0.3);
    transition:background .35s ease, border-color .35s ease, transform .35s var(--ease-out);
  }
  .lightbox-btn:hover{background:rgba(26,20,19,0.66);border-color:var(--gold);}
  .lightbox-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
  .lightbox-close{
    top:clamp(1rem,3vw,2rem);
    right:clamp(1rem,3vw,2rem);
    width:3rem;height:3rem;
    font-family:var(--font-body);
    font-size:1.7rem;
    line-height:1;
  }
  .lightbox-nav{
    top:50%;
    translate:0 -50%;
    width:3.2rem;height:3.2rem;
    font-size:1.5rem;
    line-height:1;
  }
  .lightbox-nav:hover{background:rgba(26,20,19,0.66);}
  .lightbox-prev{left:clamp(.6rem,2.5vw,2rem);}
  .lightbox-next{right:clamp(.6rem,2.5vw,2rem);}
  .lightbox-nav i{font-style:normal;display:block;transform:translateY(-1px);}
  .lightbox-counter{
    position:absolute;
    left:50%;
    bottom:clamp(1rem,3vw,1.8rem);
    translate:-50% 0;
    z-index:2;
    font-family:var(--font-display);
    font-size:.7rem;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.72);
  }
  .lightbox[data-single="true"] .lightbox-nav,
  .lightbox[data-single="true"] .lightbox-counter{display:none;}
  @media (max-width:700px){
    .lightbox-nav{width:2.6rem;height:2.6rem;font-size:1.2rem;}
    .lightbox-img{max-height:80vh;}
  }

/* Contact form success banner */
.form-success{
  background:var(--gold-dim);
  border:1px solid var(--gold);
  color:var(--sand);
  padding:0.9rem 1.1rem;
  border-radius:10px;
  font-size:0.95rem;
  line-height:1.5;
}

/* ============================================================
   CINEMATIC MOTION RETOUCH
   Word-rise headings, magnetic buttons with sheen, staggered
   card reveals, image wipes, drifting ambient glows.
   Everything below is disabled under prefers-reduced-motion.
   ============================================================ */
/* ---------- Word-rise headings ---------- */
.wr-w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:.09em;
  margin-bottom:-.09em;
}
.wr-w > span{
  display:inline-block;
  transform:translateY(118%);
  transition:transform var(--dur-slow) var(--ease);
  transition-delay:calc(var(--wi, 0) * .065s);
  will-change:transform;
}
.in .wr-w > span,
.wr.in .wr-w > span{transform:none;}
/* ---------- Buttons: subtle magnetic pull (JS sets --mx/--my) ---------- */
.btn{
  transform:translate3d(var(--mx,0px), var(--my,0px), 0);
}
.btn:hover{transform:translate3d(var(--mx,0px), var(--my,0px), 0);}
.btn:active{transform:translate3d(var(--mx,0px), var(--my,0px), 0) scale(.985);}
/* ---------- Project cards: label lift on hover ---------- */
.project-label{transition:transform .6s var(--ease-expo);}
.project-card:hover .project-label{transform:translateY(-6px);}
/* ---------- Projects grid: staggered rise ---------- */
.js .projects.fade .projects-grid .project-card{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), box-shadow .5s var(--ease-out);
}
.js .projects.fade.in .projects-grid .project-card{opacity:1;transform:none;}
.js .projects.fade.in .projects-grid .project-card:nth-child(2){transition-delay:.08s,.08s,0s;}
.js .projects.fade.in .projects-grid .project-card:nth-child(3){transition-delay:.16s,.16s,0s;}
.js .projects.fade.in .projects-grid .project-card:nth-child(4){transition-delay:.24s,.24s,0s;}
.js .projects.fade.in .projects-grid .project-card:nth-child(5){transition-delay:.32s,.32s,0s;}
.js .projects.fade.in .projects-grid .project-card:hover{transform:translateY(-5px);}
/* ---------- Filter re-reveal ---------- */
@keyframes cardIn{
  from{opacity:0;transform:translateY(22px) scale(.99);}
  to{opacity:1;transform:none;}
}
.projects-grid .project-card.refiltered{animation:cardIn .7s var(--ease-out) backwards;}
/* ---------- Media wipes: bolder clip reveal ---------- */
.js .reveal-media{
  clip-path:inset(11% 7% 11% 7%);
  transition:opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out), clip-path 1.25s var(--ease-expo);
}
.js .reveal-media.in{clip-path:inset(0 0 0 0);}
.js .founder .founder-photo{
  clip-path:inset(6% 5% 6% 5%);
  transition:clip-path 1.3s var(--ease-expo);
}
.js .founder.in .founder-photo{clip-path:inset(0 0 0 0);}
/* ---------- Ambient glow drift (dark bands) ---------- */
@keyframes glowDrift{
  from{transform:translate3d(-9%, 0, 0);}
  to{transform:translate3d(12%, 7%, 0);}
}
.statement::before,
.pull-quote::before,
.cta-band:not(.cta-green)::before{animation:glowDrift 16s ease-in-out infinite alternate;}
.cta-band.cta-green::before{
  content:"";
  position:absolute;
  top:-60%;left:18%;
  width:70%;height:180%;
  background:radial-gradient(circle, rgba(42,31,28,0.85) 0%, rgba(42,31,28,0) 70%);
  filter:blur(70px);
  pointer-events:none;
  animation:glowDrift 13s ease-in-out infinite alternate;
}

/* ============================================================
   SITE HEALTH PASS — skip link, long-gallery reveal
   ============================================================ */
/* Keyboard users can jump straight past the fixed logo/nav. */
  .skip-link{
    position:fixed;
    top:-100px;left:50%;
    transform:translateX(-50%);
    z-index:400;
    padding:12px 22px;
    border-radius:2px;
    background:var(--mahogany);
    color:var(--sand);
    font-family:var(--font-display);
    font-size:var(--text-sm);
    font-weight:600;
    letter-spacing:.18em;
    text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.25);
  transition:top var(--dur-fast) var(--ease);
}
.skip-link:focus-visible{top:14px;outline:2px solid var(--gold);outline-offset:3px;}
/* Long galleries load collapsed; the button reveals the full set. */
.gallery-item.gallery-hidden{display:none;}
.gallery-more{
  grid-column:1 / -1;
  justify-self:center;
  margin-top:.4rem;
}
/* ============================================================
   GLOBAL POLISH — larger type, justified copy, tighter rhythm
   ============================================================ */
html{font-size:108%;}
/* Running text is justified from tablet up. On phones the measure is too
   short for even spacing, so everything stays ragged-left there. */
p{text-wrap:pretty;}
@media (min-width:768px){
  p,
  .hero-sub,
  .timeline-body p,
  .flip-card-back p,
  .step-card p,
  .expand-content p,
  .contact-masthead-note p,
  .founder-copy p.bio,
  .statement-inner > p:not(.eyebrow),
  .cta-band > p:not(.eyebrow){text-align:justify;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty;}
  p.eyebrow,
  .founder-names,
  .form-group-label,
  .form-success,
  .attribution,
  footer p,
  .lightbox-counter,
  .gallery-empty,
  .stat .stat-label,
  .spec dt,
  .lot-detail{text-align:inherit;hyphens:none;-webkit-hyphens:none;}
}

/* ============================================================
   REDUCED MOTION  (consolidated)
   All prefers-reduced-motion overrides in one place.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  /* Page navigations swap instantly — no cross-fade */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important;}
  .site-logo{opacity:1;transform:none;animation:none;}
  .menu-icon-line,
  .nav-overlay,
  .nav-overlay-item,
  .nav-overlay-bottom,
  .nav-link-line,
  .nav-link-dot{transition:none;}
  .nav-overlay-item,
  .nav-overlay-bottom{transform:none;}
  .nav-overlay.is-open .nav-overlay-item,
  .nav-overlay.is-open .nav-overlay-bottom{transition-delay:0s;}
  .js .fade{opacity:1;transform:none;transition:none;}
  .js .statement-inner .eyebrow,
  .js .statement-inner h1,
  .js .statement-inner .statement-title,
  .js .statement-inner p,
  .js .statement-inner .btn,
  .js .statement-inner .statement-rule{opacity:1;transform:none;transition:none;}
  .project-hero img{animation:none;transform:none;}
  .project-hero .eyebrow,
  .project-hero h1,
  .project-hero .project-meta,
  .project-hero .hero-sub,
  .project-hero .hero-actions{animation:none;opacity:1;transform:none;}
  .js [data-reveal] .r-item{opacity:1;transform:none;translate:none;transition:none;}
  .js .reveal{opacity:1;translate:none;transition:none;}
  .js .reveal-media{opacity:1;transform:none;clip-path:none;transition:none;}
  .lightbox,
  .lightbox .lightbox-img{transition:opacity .2s linear;}
  .lightbox .lightbox-img{transform:none;}
  .lightbox-btn{transition:none;}
  .wr-w > span{transform:none;transition:none;}
  .btn, .btn:hover, .btn:active{transform:none;transition:none;}
  .btn::after{transition:none;}
  /* Micro-interactions land instantly: underline draws, arrow nudges, zooms */
  .nav-inline a, .nav-inline a::after,
  .footer-nav a, .footer-nav a::after,
  .footer-block a, .footer-block a::after,
  .footer-col a, .footer-col a::after,
  .project-cta, .project-cta i,
  .project-card, .project-card img{transition:none;}
  .project-card:hover{transform:none;}
  .project-card:hover img,
  .project-card:focus-visible img{transform:none;}
  .js .projects.fade .projects-grid .project-card{opacity:1;transform:none;transition:none;}
  .flip-card-front{transition:none;}
  .projects-grid .project-card.refiltered{animation:none;}
  .js .founder .founder-photo{clip-path:none;transition:none;}
  .js .founder-copy .eyebrow,
  .js .founder-copy blockquote,
  .js .founder-copy p.bio,
  .js .founder-copy .founder-names{opacity:1;transform:none;transition:none;}
  .statement::before,
  .pull-quote::before,
  .cta-band:not(.cta-green)::before{animation:none;}
  .cta-band.cta-green::before{animation:none;}
  /* — home page (intro loader) — */
  .intro-loader{display:none;}
  html.intro-active, html.intro-active body{overflow:auto;height:auto;}
  /* — interior pages (expand, map, timeline, renderings, project cells, press) — */
  .expand-overlay,.expand-sheet,.expand-close,.expand-hint,.expand-hint i{transition:none;}
  .map-marker.active .ring{animation:none;opacity:.8;}
  [data-region-for],.map-marker text,.map-marker .dot{transition:none;}
  .timeline-spine i{height:100%;}
  .timeline-photo img{transform:none;transition:none;}
  .draw-emblem path{stroke-dashoffset:0;transition:none;}
  [data-reveal] .stat::before{transform:none;transition:none;}
  .rend-slide{transition:opacity .2s ease;}
  .rend-slide img{transform:none;transition:none;}
  .rend-arrow,.rend-thumb{transition:none;}
  .project-cell-media img,
  .project-cell-view,
  .project-cell-view-text,
  .project-cell-arrow{transition:none;}
  .project-cell:hover .project-cell-media img,
  .project-cell:focus-visible .project-cell-media img{transform:none;}
  .press-card,
  .press-cover img{transition:none;}
  .press-card:hover{transform:none;}
  .press-card:hover .press-cover img,
  .press-cover:focus-visible img{transform:none;}
}

/* ============================================================
   CONTACT POP-UP (site-wide; opened from the footer's Get in Touch / Contact)
   Deep ground, glassy card, the same field language as the contact page.
   ============================================================ */
body.cm-open{overflow:hidden;}
.cm{
  position:fixed;inset:0;z-index:400;
  display:flex;align-items:center;justify-content:center;
  padding:max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px));
}
.cm[hidden]{display:none;}
.cm-backdrop{
  position:absolute;inset:0;
  background:rgba(14,10,9,0.78);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  opacity:0;transition:opacity .42s var(--ease);
}
.cm-dialog{
  position:relative;
  width:100%;max-width:680px;max-height:calc(100svh - 2rem);
  overflow:auto;overscroll-behavior:contain;
  padding:2.2rem 2.4rem 2.4rem;
  border-radius:22px;
  color:var(--sand);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(42,31,28,0.85) 0%, rgba(14,10,9,0) 60%),
    #0E0A09;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.12);
  opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .42s var(--ease), transform .5s var(--ease);
  outline:none;
}
.cm.is-open .cm-backdrop{opacity:1;}
.cm.is-open .cm-dialog{opacity:1;transform:none;}
.cm-close{
  position:absolute;top:1rem;right:1rem;
  width:44px;height:44px;padding:0;
  display:grid;place-items:center;
  background:transparent;border:0;border-radius:50%;
  color:var(--sand);cursor:pointer;
  transition:background .3s ease;
}
.cm-close:hover,.cm-close:focus-visible{background:rgba(255,255,255,0.08);outline:none;}
.cm-close:focus-visible{box-shadow:0 0 0 2px var(--gold);}
.cm-close span{
  position:absolute;width:20px;height:1.5px;background:currentColor;
}
.cm-close span:first-child{transform:rotate(45deg);}
.cm-close span:last-child{transform:rotate(-45deg);}
.cm-head{margin:0 2.5rem 1.6rem 0;padding-bottom:1.4rem;border-bottom:1px solid rgba(242,236,223,0.12);}
.cm-eyebrow{
  margin:0 0 .7rem;
  font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.cm-title{
  margin:0;
  font-family:var(--font-serif);font-weight:400;
  font-size:clamp(1.5rem, 2.4vw, 2rem);letter-spacing:-.01em;line-height:1.15;
  color:var(--sand);text-align:left;
}
.cm-lede{margin:.8rem 0 0;font-size:.95rem;line-height:1.6;color:rgba(242,236,223,0.7);text-align:left;}
.cm-form{display:flex;flex-direction:column;gap:1.2rem;}
.cm-honey{display:none;}
.cm-group{display:flex;flex-direction:column;gap:1rem;padding-top:1.4rem;border-top:1px solid rgba(242,236,223,0.1);}
.cm-group:first-of-type{padding-top:0;border-top:0;}
.cm-group-label{
  display:flex;align-items:center;gap:.75rem;margin:0;
  font-family:var(--font-display);font-size:.64rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(242,236,223,0.5);text-align:left;
}
.cm-group-label span{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.6rem;height:1.6rem;border-radius:50%;
  border:1px solid rgba(185,151,91,0.5);color:var(--gold);font-size:.6rem;
}
.cm-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.cm-field{display:flex;flex-direction:column;gap:.5rem;min-width:0;}
.cm-field label{
  font-family:var(--font-display);font-size:.66rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(242,236,223,0.6);
}
.cm-field input,.cm-field select,.cm-field textarea{
  width:100%;
  font-family:var(--font-body);font-weight:300;font-size:1rem;
  color:var(--sand);
  background:#0A0706;
  border:1px solid rgba(255,255,255,0.16);border-radius:14px;
  padding:.95rem 1.1rem;
  transition:border-color .35s var(--ease), box-shadow .35s ease, background .35s ease;
}
.cm-field select{cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, rgba(242,236,223,0.6) 50%), linear-gradient(135deg, rgba(242,236,223,0.6) 50%, transparent 50%);
  background-position:calc(100% - 1.35rem) 50%, calc(100% - 1rem) 50%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.6rem;}
.cm-field select option{color:#1A1413;background:#F2ECDF;}
.cm-field textarea{min-height:110px;resize:vertical;line-height:1.6;}
.cm-field input::placeholder,.cm-field textarea::placeholder{color:rgba(242,236,223,0.32);}
.cm-field input:focus,.cm-field select:focus,.cm-field textarea:focus{
  outline:none;border-color:var(--gold);background:#161110;box-shadow:0 0 0 3px var(--gold-dim);
}
.cm-field .is-invalid{border-color:rgba(214,120,96,0.9);}
.cm-error{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;margin:0;padding:1rem 1.1rem;border-radius:14px;
  border:1px solid rgba(224,161,140,0.35);background:rgba(224,161,140,0.07);}
.cm-error-text{margin:0;font-size:.88rem;line-height:1.55;color:#E0A18C;text-align:left;}
.cm-mailto{font-size:.72rem;}
.cm-actions{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.4rem;}
.cm-submit{cursor:pointer;}
.cm-submit[disabled]{opacity:.6;cursor:progress;}
.cm-alt{font-size:.85rem;color:rgba(242,236,223,0.6);text-decoration:none;border-bottom:1px solid rgba(242,236,223,0.25);}
.cm-alt:hover{color:var(--sand);border-color:var(--gold);}
.cm-success{display:flex;flex-direction:column;align-items:flex-start;gap:.4rem;padding:1rem 0 .4rem;}
.cm-success .btn{margin-top:1.4rem;cursor:pointer;}
@media (max-width:640px){
  .cm{padding:0;align-items:flex-end;}
  .cm-dialog{
    max-width:none;max-height:calc(100svh - 1.5rem);
    padding:2rem var(--gutter-mobile) calc(1.8rem + env(safe-area-inset-bottom, 0px));
    border-radius:22px 22px 0 0;border-bottom:0;
    transform:translateY(40px);
  }
  .cm-row{grid-template-columns:1fr;}
  .cm-actions{flex-direction:column;align-items:stretch;}
  .cm-submit{width:100%;min-height:52px;}
  .cm-alt{text-align:center;align-self:center;}
}
@media (prefers-reduced-motion: reduce){
  .cm-backdrop,.cm-dialog{transition:none;}
  .cm-dialog{transform:none;}
}