/* ============================================================================
   RAAYA INTERIO — V2
   01 TOKENS  02 BASE  03 PRIMITIVES  04 MOTION PRIMITIVES  05 LOADER
   06 NAV  07 HERO STAGE  08 SECTIONS  09 RESPONSIVE  10 REDUCED MOTION
   ============================================================================ */

/* ---------- 01 TOKENS ---------- */
:root{
  /* Brand palette (official brand kit) */
  --forest:#0E2A23;
  --forest-deep:#081A15;
  --forest-soft:#153B31;
  --copper:#C79A6E;
  --copper-bright:#E3BE96;
  /* copper-deep is the small-text shade for LIGHT sections only. Deepened from
     #A87A50 (3.11:1, failed AA) to reach 4.63:1 on ivory. The brand copper
     #C79A6E is untouched and still used everywhere on forest. */
  --copper-deep:#8A5E36;
  --rose:#B76A6A;
  --rose-light:#D08A8A;                 /* 5.59:1 on forest — dark-form errors */
  --burgundy:#8B1F4B;
  --ivory:#F2E8D8;
  --ivory-warm:#F8F2E7;
  --white:#FFFFFF;

  /* Derived surfaces */
  --ink:#1B231F;
  --ink-soft:rgba(27,35,31,.68);        /* 5.10:1 on ivory  — AA */
  --ink-faint:rgba(27,35,31,.66);       /* quiet captions   — AA */
  --ivory-soft:rgba(242,232,216,.68);   /* 6.55:1 on forest — AA */
  --ivory-faint:rgba(242,232,216,.55);  /* 4.77:1 on forest — AA (was .34 = 2.71, failed) */
  --rule-dark:rgba(14,42,35,.16);
  --rule-light:rgba(242,232,216,.18);
  --copper-rule:rgba(199,154,110,.38);

  /* Layout */
  --container:1400px;
  --container-narrow:980px;
  --gutter:clamp(18px,5vw,80px);
  --nav-h:84px;
  --dock-top:calc(var(--nav-h) + 26px);

  /* Spacing */
  --s-1:6px; --s-2:12px; --s-3:20px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:88px; --s-8:120px;
  --section-y:clamp(72px,10.5vw,150px);

  /* Type */
  --serif:'Cinzel','Trajan Pro','Times New Roman',serif;
  --sans:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --fs-display:clamp(2.35rem,6.4vw,5.8rem);
  --fs-h2:clamp(1.75rem,4vw,3.7rem);
  --fs-h3:clamp(1.2rem,2vw,1.95rem);
  --fs-body:clamp(0.93rem,1vw,1.05rem);
  --fs-small:0.8rem;
  --fs-eyebrow:0.68rem;
  --lh-display:1.07;
  --lh-body:1.82;
  --ls-eyebrow:.3em;

  /* Motion — single source of truth, mirrored by the MOTION object in JS */
  --ease:cubic-bezier(0.16,1,0.3,1);       /* primary   */
  --ease-editorial:cubic-bezier(0.7,0,0.2,1); /* editorial */
  --ease-soft:cubic-bezier(0.33,0,0.15,1);
  --t-micro:260ms;
  --t-ui:520ms;
  --t-reveal:900ms;
  --t-cine:1300ms;

  /* Shared-element geometry */
  --plate-h:clamp(190px,32vh,340px);
}

/* ---------- 02 BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html.no-js .loader{display:none;}
body{
  margin:0;background:var(--forest);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:var(--fs-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;overscroll-behavior-y:none;
}
body.is-locked{overflow:hidden;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:.02em;line-height:var(--lh-display);}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
::selection{background:var(--copper);color:var(--forest);}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
.skip{position:absolute;left:-9999px;top:0;z-index:9999;background:var(--copper);color:var(--forest);
  padding:12px 20px;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;}
.skip:focus{left:12px;top:12px;}

/* ---------- 03 PRIMITIVES ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);}
.section{position:relative;padding-block:var(--section-y);}
.bg-ivory{background:var(--ivory);color:var(--ink);}
.bg-ivory-warm{background:var(--ivory-warm);color:var(--ink);}
.bg-forest{background:var(--forest);color:var(--ivory);}
.bg-forest-deep{background:var(--forest-deep);color:var(--ivory);}

.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--copper-deep);line-height:1;}
.bg-forest .eyebrow,.bg-forest-deep .eyebrow,.on-dark .eyebrow{color:var(--copper);}
.eyebrow::before{content:"";width:clamp(22px,4vw,54px);height:1px;background:currentColor;opacity:.75;}

.sec-index{display:flex;align-items:center;gap:14px;font-family:var(--serif);font-size:var(--fs-small);
  letter-spacing:.24em;color:var(--copper-deep);margin-bottom:var(--s-3);}
.bg-forest .sec-index,.bg-forest-deep .sec-index{color:var(--copper);}
.sec-index span{opacity:.55;}

.lede{max-width:56ch;color:var(--ink-soft);font-weight:300;font-size:clamp(0.93rem,1.02vw,1.06rem);}
.bg-forest .lede,.bg-forest-deep .lede,.on-dark .lede{color:var(--ivory-soft);}

.ghost-number{position:absolute;font-family:var(--serif);line-height:.8;font-size:clamp(9rem,24vw,24rem);
  color:currentColor;opacity:.035;pointer-events:none;user-select:none;letter-spacing:-.02em;}

/* ---------- 04 MOTION PRIMITIVES (all gated on html.anim) ---------- */
/* A · line-masked typography */
.reveal-lines .line{display:block;overflow:hidden;padding-block:.02em;}
html.anim .reveal-lines .line > span{display:block;transform:translateY(112%);
  transition:transform var(--t-reveal) var(--ease);transition-delay:calc(var(--i,0) * 105ms);}
html.anim .reveal-lines.in .line > span{transform:translateY(0);}

/* B · restrained fade-up for supporting copy */
html.anim .fade-up{opacity:0;transform:translateY(22px);
  transition:opacity var(--t-ui) var(--ease),transform var(--t-ui) var(--ease);
  transition-delay:calc(var(--i,0) * 85ms);}
html.anim .fade-up.in{opacity:1;transform:none;}

/* C · three reusable image reveals — vertical mask, horizontal mask, scale */
.img-reveal{position:relative;overflow:hidden;background:var(--forest-soft);}
.img-reveal img{width:100%;height:100%;object-fit:cover;}
html.anim .img-reveal{clip-path:inset(0 0 100% 0);transition:clip-path var(--t-cine) var(--ease-editorial);}
html.anim .img-reveal.mask-x{clip-path:inset(0 100% 0 0);}
html.anim .img-reveal.in{clip-path:inset(0 0 0 0);}
html.anim .img-reveal img{transform:scale(1.08);transition:transform var(--t-cine) var(--ease);}
html.anim .img-reveal.in img{transform:scale(1);}

/* D · editorial photo — Philosophy's and Craft's primary images. Plain,
   always-visible, no clip-path/opacity/transform reveal and no dependency
   on GSAP or IntersectionObserver of any kind: the image is present and
   fully visible the instant the HTML parses, under every condition,
   including Live Server / file:// / any environment where a script-driven
   reveal could fail to trigger. Sizing matches what .img-reveal previously
   used at these exact spots, so layout is unchanged — only the reveal
   mechanism was removed. */
.editorial-photo{position:relative;overflow:hidden;background:var(--forest-soft);
  display:block;width:100%;border-radius:0;}
.editorial-photo img{display:block;width:100%;height:100%;object-fit:cover;
  opacity:1;visibility:visible;transform:none;clip-path:none;}

/* image load failure keeps the prototype presentable */
img.img-failed{opacity:0;}
.has-failed{background:linear-gradient(135deg,var(--forest-soft),var(--forest-deep) 60%,#2a1f22);}
.has-failed::before{content:attr(data-fallback);position:absolute;inset:auto 0 20px;z-index:1;text-align:center;
  font-family:var(--serif);font-size:.68rem;letter-spacing:.26em;color:var(--copper);opacity:.6;text-transform:uppercase;}

/* D · botanical linework, drawn once */
.botanical{position:absolute;pointer-events:none;color:var(--copper);}
.botanical path{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;}
html.anim .botanical path{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900);}
html.anim .botanical.in path{transition:stroke-dashoffset 2000ms var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);stroke-dashoffset:0;}

/* E · buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  padding:18px 32px;border:1px solid var(--copper);font-size:.7rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;line-height:1;color:var(--ivory);overflow:hidden;isolation:isolate;
  min-height:52px;text-align:center;
  transition:color var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--copper);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--t-ui) var(--ease);}
.btn .arrow{transition:transform var(--t-ui) var(--ease);}
.btn--solid{background:var(--copper);color:var(--forest);}
.btn--solid::before{background:var(--forest);transform-origin:right center;}
.btn--dark{color:var(--ink);border-color:rgba(14,42,35,.3);}
.btn--dark::before{background:var(--forest);}
.btn--ghost{border-color:rgba(242,232,216,.34);}
.btn--sm{padding:14px 24px;font-size:.65rem;min-height:44px;}
.btn--block{width:100%;}
.btn[disabled]{opacity:.55;pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .btn:hover::before{transform:scaleX(1);}
  .btn:hover{color:var(--forest);}
  .btn--solid:hover{color:var(--ivory);}
  .btn--dark:hover{color:var(--ivory);border-color:var(--forest);}
  .btn:hover .arrow{transform:translateX(5px);}
}
.btn:focus-visible::before{transform:scaleX(1);}
.btn:focus-visible{color:var(--forest);}
.btn--solid:focus-visible{color:var(--ivory);}
.btn--dark:focus-visible{color:var(--ivory);}

.link-u{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:.7rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;padding-bottom:6px;color:var(--copper-deep);}
.on-dark .link-u,.bg-forest .link-u,.bg-forest-deep .link-u{color:var(--copper);}
.link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left center;transition:transform var(--t-ui) var(--ease);}
.link-u:hover::after,.link-u:focus-visible::after{transform:scaleX(1);}
.link-u:hover .arrow{transform:translateX(4px);}
.link-u .arrow{transition:transform var(--t-ui) var(--ease);}

/* ---------- 05 LOADER ---------- */
.loader{position:fixed;inset:0;z-index:9500;background:var(--forest);display:none;place-items:center;}
html.anim .loader{display:grid;}
.loader__inner{text-align:center;display:grid;justify-items:center;}
.loader__logo{position:relative;display:grid;place-items:center;}
/* subtle premium glow — sits behind the mark, never affects layout */
.loader__glow{position:absolute;width:260%;height:260%;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(199,154,110,.30) 0%,rgba(199,154,110,.13) 36%,rgba(199,154,110,0) 68%);}
.loader__mark{position:relative;height:clamp(74px,15vw,116px);width:auto;
  max-width:min(78vw,360px);opacity:0;}
.loader__line{width:min(260px,52vw);height:1px;background:var(--copper);margin:24px auto 20px;transform:scaleX(0);}
.loader__word{font-family:var(--serif);font-size:clamp(.8rem,2vw,1.02rem);letter-spacing:.4em;color:var(--ivory);
  text-indent:.4em;opacity:0;transform:translateY(8px);}
.loader.is-out{pointer-events:none;}

/* ---------- 06 NAVIGATION ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background var(--t-ui) var(--ease),backdrop-filter var(--t-ui) var(--ease),
             height var(--t-ui) var(--ease),border-color var(--t-ui) var(--ease);}
.nav__row{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);width:100%;}
.nav.scrolled{height:68px;background:rgba(14,42,35,.92);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--copper-rule);}
/* while transparent over the hero photograph, guard legibility without
   adding a background — resilient regardless of what the final image is */
.nav:not(.scrolled) .brand,.nav:not(.scrolled) .nav__links a,
.nav:not(.scrolled) .nav__wa,.nav:not(.scrolled) .nav__actions .btn{
  text-shadow:0 2px 14px rgba(8,26,21,.5);}
.brand{display:flex;align-items:center;gap:13px;color:var(--ivory);}
/* ---- LOGO SYSTEM -------------------------------------------------------
   One image asset (RaayaLogo.png) drives the loader, desktop nav, sticky nav,
   mobile menu and footer. Sizing is height-driven with width:auto, so the
   same file works whether it is a square monogram or a horizontal lockup —
   no cropping, no distortion, correct at every breakpoint.
   RETINA: largest rendered height is 116px (loader), so export the source at
   roughly 350px tall or more and it will stay sharp on 3x displays. */
.logo-mark{display:block;width:auto;object-fit:contain;font-family:var(--serif);
  font-size:.8rem;letter-spacing:.16em;color:var(--copper);-webkit-user-select:none;user-select:none;}
.brand__mark{height:38px;max-width:190px;flex:0 0 auto;
  transition:height var(--t-ui) var(--ease),max-width var(--t-ui) var(--ease);}
.nav.scrolled .brand__mark{height:33px;}
.footer .brand__mark{height:44px;max-width:210px;}
.menu .brand__mark{height:34px;}
@media (max-width:1024px){.brand__mark,.nav.scrolled .brand__mark{height:85px;max-width:150px;}}
@media (max-width:430px){.brand__mark,.nav.scrolled .brand__mark{height:90px;max-width:128px;}}
@media (max-height:560px){.brand__mark,.nav.scrolled .brand__mark{height:90px;}}
.brand__text{display:flex;flex-direction:column;gap:3px;}
.brand__name{font-family:var(--serif);font-size:.88rem;letter-spacing:.22em;line-height:1;}
.brand__tag{font-size:.52rem;letter-spacing:.19em;text-transform:uppercase;color:var(--copper);opacity:.85;line-height:1;}
html.anim .brand{opacity:0;}
html.anim body.loaded .brand{opacity:1;transition:opacity 600ms var(--ease) 120ms;}
.nav__links{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px);}
.nav__links a{position:relative;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ivory);
  opacity:.85;padding-block:6px;transition:opacity var(--t-micro) var(--ease);}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--copper);
  transform:scaleX(0);transform-origin:left center;transition:transform var(--t-ui) var(--ease);}
.nav__links a:hover{opacity:1;}
.nav__links a:hover::after,.nav__links a:focus-visible::after,.nav__links a[aria-current="true"]::after{transform:scaleX(1);}
.nav__actions{display:flex;align-items:center;gap:12px;}
.nav__wa{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--rule-light);color:var(--ivory);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);}
.nav__wa:hover{border-color:var(--copper);color:var(--copper);}
.nav__wa svg{width:17px;height:17px;fill:currentColor;}
.burger{display:none;width:46px;height:46px;place-items:center;gap:6px;flex-direction:column;}
.burger span{display:block;width:24px;height:1px;background:var(--ivory);transition:transform var(--t-ui) var(--ease);}

/* Mobile full-screen menu */
.menu{position:fixed;inset:0;z-index:950;background:var(--forest);display:flex;flex-direction:column;
  justify-content:center;padding:calc(var(--nav-h) + 16px) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  clip-path:inset(0 0 100% 0);transition:clip-path 700ms var(--ease-editorial);visibility:hidden;overflow-y:auto;}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;}
.menu__list a{display:block;font-family:var(--serif);font-size:clamp(1.55rem,7.5vw,2.7rem);color:var(--ivory);
  padding:9px 0;transition:color var(--t-micro) var(--ease);}
html.anim .menu__list a{opacity:0;transform:translateY(26px);
  transition:opacity 560ms var(--ease),transform 560ms var(--ease),color var(--t-micro) var(--ease);}
html.anim .menu.open .menu__list a{opacity:1;transform:none;transition-delay:calc(var(--i) * 62ms + 150ms);}
.menu__list a:hover{color:var(--copper);}
.menu__list li + li{border-top:1px solid rgba(242,232,216,.09);}
.menu__foot{margin-top:var(--s-5);display:flex;flex-direction:column;gap:16px;}
html.anim .menu__foot{opacity:0;transform:translateY(18px);
  transition:opacity 560ms var(--ease) 560ms,transform 560ms var(--ease) 560ms;}
html.anim .menu.open .menu__foot{opacity:1;transform:none;}
.menu__foot .tel{font-family:var(--serif);font-size:1.02rem;letter-spacing:.12em;color:var(--copper);}
.menu .botanical{right:-40px;bottom:-30px;width:min(320px,58vw);opacity:.3;}
.menu__brand{position:absolute;top:26px;left:var(--gutter);opacity:1 !important;}
.menu__close{position:absolute;top:20px;right:var(--gutter);width:46px;height:46px;color:var(--ivory);}
.menu__close::before,.menu__close::after{content:"";position:absolute;top:50%;left:50%;width:25px;height:1px;background:currentColor;}
.menu__close::before{transform:translate(-50%,-50%) rotate(45deg);}
.menu__close::after{transform:translate(-50%,-50%) rotate(-45deg);}

/* ---------- 07 HERO + SHARED-ELEMENT STAGE ---------- */
/* .hero owns layout height only. .hero-stage owns every hero transform.
   Static by default; promoted to a fixed layer only once GSAP is live. */
.hero{position:relative;height:100vh;min-height:520px;overflow:hidden;background:var(--forest-deep);z-index:1;}
html.gsap .hero{overflow:visible;}
.hero-stage{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
html.gsap .hero-stage{position:fixed;inset:0;z-index:6;}
.hero-stage__media{position:absolute;inset:0;overflow:hidden;}
.hero-stage__media img{width:100%;height:100%;object-fit:cover;transform-origin:center;}
.hero-stage__scrim{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,26,21,.96) 0%,rgba(8,26,21,.58) 40%,rgba(8,26,21,.32) 70%,rgba(8,26,21,.62) 100%),
             linear-gradient(to right,rgba(8,26,21,.7),rgba(8,26,21,.05) 58%);}
.hero-stage__content{position:absolute;inset:0;display:flex;align-items:flex-end;pointer-events:none;}
.hero__inner{position:relative;width:100%;padding-bottom:clamp(30px,6vh,70px);pointer-events:auto;}
.hero-stage.is-out,.hero-stage.is-out .hero__inner{pointer-events:none;}
.hero__eyebrow{display:inline-flex;align-items:center;gap:13px;color:var(--copper);font-size:var(--fs-eyebrow);
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;font-weight:500;}
.hero__eyebrow::before{content:"";width:clamp(28px,4vw,52px);height:1px;background:currentColor;}
.hero h1{font-size:var(--fs-display);color:var(--ivory);margin:clamp(16px,2.6vh,26px) 0 clamp(18px,2.8vh,28px);max-width:15ch;}
.hero__copy{max-width:44ch;color:var(--ivory-soft);}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:clamp(26px,4vh,46px);}
/* the outline button reads faintly against varied hero photography at the
   shared component's default alpha — reinforced here, hero-only */
.hero__cta .btn--ghost{border-color:rgba(242,232,216,.55);}
/* soft ambient separation from the photograph, echoing the loader's
   "premium glow" language, so the primary action reads first */
.hero__cta .btn--solid{box-shadow:0 18px 40px -22px rgba(199,154,110,.6);}
@media (hover:hover) and (pointer:fine){
  .hero__cta .btn--solid:hover{box-shadow:0 22px 48px -18px rgba(199,154,110,.7);}
}
.hero__stats{display:flex;flex-wrap:wrap;gap:clamp(18px,5vw,66px);margin-top:clamp(26px,4.6vh,58px);
  padding-top:22px;border-top:1px solid rgba(242,232,216,.16);}
.hero__stat b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.3rem,2.4vw,2.05rem);
  color:var(--copper);line-height:1.1;}
.hero__stat span{display:block;margin-top:7px;font-size:.62rem;letter-spacing:.19em;text-transform:uppercase;color:var(--ivory-faint);}
.hero__scroll{position:absolute;right:var(--gutter);bottom:clamp(30px,6vh,70px);display:flex;flex-direction:column;
  align-items:center;gap:12px;font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ivory-faint);
  writing-mode:vertical-rl;}
.hero__scroll i{display:block;width:1px;height:56px;background:rgba(199,154,110,.35);position:relative;overflow:hidden;}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--copper);}
html.anim .hero__scroll i::after{animation:scrollPulse 3.1s var(--ease-editorial) infinite;}
@keyframes scrollPulse{0%,8%{transform:translateY(-100%);}55%{transform:translateY(100%);}100%{transform:translateY(100%);}}
.hero-stage .botanical{left:calc(var(--gutter) * -0.4);top:15%;width:min(220px,24vw);opacity:.26;}

/* hero entrance — CSS owns opacity/entry, GSAP owns scroll transforms (no overlap) */
html.anim .hero__eyebrow,html.anim .hero__copy,html.anim .hero__cta,
html.anim .hero__stats,html.anim .hero__scroll{opacity:0;transform:translateY(18px);}
html.anim body.loaded .hero__eyebrow{transition:opacity 760ms var(--ease) 120ms,transform 760ms var(--ease) 120ms;opacity:1;transform:none;}
html.anim body.loaded .hero__copy{transition:opacity 820ms var(--ease) 900ms,transform 820ms var(--ease) 900ms;opacity:1;transform:none;}
html.anim body.loaded .hero__cta{transition:opacity 820ms var(--ease) 1060ms,transform 820ms var(--ease) 1060ms;opacity:1;transform:none;}
html.anim body.loaded .hero__stats{transition:opacity 820ms var(--ease) 1210ms,transform 820ms var(--ease) 1210ms;opacity:1;transform:none;}
html.anim body.loaded .hero__scroll{transition:opacity 820ms var(--ease) 1380ms;opacity:1;transform:none;}
html.anim .hero h1 .line > span{transition-duration:1150ms;
  transition-delay:calc(260ms + var(--i,0) * 105ms);}   /* slots between eyebrow and copy */
html.anim body.loaded .hero h1.reveal-lines .line > span{transform:translateY(0);}

/* page sits above the hero layer once the shared element has handed off */
.page{position:relative;z-index:5;background:var(--ivory);}

/* ---------- 08 SECTIONS ---------- */

/* 08.1 LEAD CAPTURE + SHARED-ELEMENT DOCK PLATE ------------------------------ */
.lead{position:relative;overflow:hidden;}
.lead__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,90px);align-items:start;}
.lead__aside h2{font-size:var(--fs-h2);max-width:12ch;margin-bottom:var(--s-3);}
.lead__points{margin-top:var(--s-5);display:grid;gap:14px;}
.lead__points li{display:flex;gap:13px;align-items:flex-start;font-size:.88rem;color:var(--ink-soft);}
.lead__points li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:11px;border:1px solid var(--copper);transform:rotate(45deg);}
.on-dark .lead__points li{color:var(--ivory-soft);}

/* The plate is the docking target of the hero image (shared element). */
.plate{position:relative;width:100%;height:var(--plate-h);overflow:hidden;background:var(--forest-soft);
  margin-bottom:clamp(26px,4vw,44px);}
.plate img{width:100%;height:100%;object-fit:cover;}
.plate__frame{position:absolute;inset:10px;border:1px solid rgba(199,154,110,.42);pointer-events:none;}
.plate__cap{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;display:flex;justify-content:space-between;
  gap:16px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory);
  background:linear-gradient(transparent,rgba(8,26,21,.72));}
.plate__cap b{font-family:var(--serif);font-weight:400;color:var(--copper);letter-spacing:.18em;}
/* while the hero layer is still flying, the static plate image waits underneath */
html.gsap .plate.is-waiting img,html.gsap .plate.is-waiting .plate__frame,
html.gsap .plate.is-waiting .plate__cap{opacity:0;}
.plate img,.plate__frame,.plate__cap{transition:opacity 320ms linear;}

/* 08.2 FORMS ------------------------------------------------------------------ */
.form{position:relative;background:var(--white);padding:clamp(24px,3.6vw,48px);border:1px solid var(--rule-dark);}
.form--dark{background:rgba(242,232,216,.04);border-color:rgba(242,232,216,.16);}
.form::before,.form::after{content:"";position:absolute;width:20px;height:20px;border:1px solid var(--copper);opacity:.55;}
.form::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.form::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.form__title{font-family:var(--serif);font-size:var(--fs-h3);margin-bottom:9px;}
.form__sub{font-size:.86rem;color:var(--ink-soft);margin-bottom:var(--s-4);max-width:44ch;}
.form--dark .form__sub{color:var(--ivory-soft);}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 18px;}
.field{position:relative;display:flex;flex-direction:column;min-width:0;}
.field--full{grid-column:1/-1;}
.field label{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--copper-deep);
  margin-bottom:8px;font-weight:500;}
.form--dark .field label{color:var(--copper);}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:16px;font-weight:300;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--rule-dark);
  padding:10px 0 11px;border-radius:0;-webkit-appearance:none;appearance:none;
  transition:border-color var(--t-micro) var(--ease);}
@media (min-width:768px){.field input,.field select,.field textarea{font-size:.94rem;}}
.form--dark .field input,.form--dark .field select,.form--dark .field textarea{color:var(--ivory);border-bottom-color:rgba(242,232,216,.24);}
.form--dark .field select option{background:var(--forest);color:var(--ivory);}
.field textarea{resize:vertical;min-height:80px;line-height:1.7;}
.field input::placeholder,.field textarea::placeholder{color:rgba(27,35,31,.55);}
.form--dark .field input::placeholder,.form--dark .field textarea::placeholder{color:rgba(242,232,216,.55);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--copper);
  box-shadow:0 1px 0 0 var(--copper);}
.field select{cursor:pointer;padding-right:26px;background-repeat:no-repeat;
  background-image:linear-gradient(45deg,transparent 50%,var(--copper) 50%),linear-gradient(135deg,var(--copper) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px),calc(100% - 6px) calc(50% + 1px);background-size:5px 5px,5px 5px;}
.field .err{font-size:.67rem;letter-spacing:.05em;color:var(--burgundy);margin-top:6px;min-height:1em;opacity:0;}
.form--dark .field .err{color:var(--rose-light);}
.field.invalid .err{opacity:1;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-bottom-color:var(--burgundy);}
.form--dark .field.invalid input,.form--dark .field.invalid select{border-bottom-color:var(--rose);}
.form__foot{margin-top:var(--s-5);display:flex;flex-direction:column;gap:14px;}
.form__note{font-size:.67rem;letter-spacing:.04em;color:var(--ink-faint);}
.form--dark .form__note{color:var(--ivory-faint);}
.form__status{display:none;gap:11px;padding:15px 17px;margin-top:var(--s-3);border:1px solid var(--copper);
  background:rgba(199,154,110,.09);font-size:.83rem;color:var(--ink);}
.form--dark .form__status{color:var(--ivory);}
.form__status.show{display:block;}
.form__status.is-error{border-color:var(--burgundy);background:rgba(139,31,75,.07);}
.form--dark .form__status.is-error{border-color:var(--rose);background:rgba(183,106,106,.1);}
.form__status b{font-family:var(--serif);font-weight:400;display:block;margin-bottom:3px;letter-spacing:.05em;}
.form__status a{color:var(--copper-deep);text-decoration:underline;text-underline-offset:3px;}
.form--dark .form__status a{color:var(--copper);}
.hp{position:absolute;left:-9999px;opacity:0;pointer-events:none;}
.btn .spin{width:13px;height:13px;border:1px solid currentColor;border-top-color:transparent;border-radius:50%;
  display:none;animation:spin .7s linear infinite;}
.btn.is-busy .spin{display:block;}
.btn.is-busy .arrow{display:none;}
@keyframes spin{to{transform:rotate(360deg);}}

/* 08.3 PHILOSOPHY ------------------------------------------------------------- */
/* The media column is sticky, so its own height decides how much empty
   background shows once it stops scrolling. The main image and a smaller
   supporting material-detail image (.philo__detail) together track the
   text column's height across desktop viewport heights, avoiding the empty
   background a single, shorter image would leave beneath it once stuck.
   Same .img-reveal component and reveal mechanism used throughout the rest
   of the page — no new animation system. */
.philo{overflow:hidden;}
.philo__grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:clamp(34px,5vw,100px);align-items:start;}
.philo__media{position:sticky;top:var(--dock-top);}
.philo__media .editorial-photo{height:clamp(340px,54vh,560px);}
.philo__caption{margin-top:16px;display:flex;justify-content:space-between;gap:18px;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.philo__detail{margin-top:28px;}
.philo__media .editorial-photo--detail{height:clamp(150px,16vh,210px);}
.philo__detail .philo__caption{margin-top:12px;}
.philo__text h2{font-size:var(--fs-h2);margin:18px 0 var(--s-4);}
.philo__text p + p{margin-top:20px;}
.philo__marks{margin-top:var(--s-6);display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px;}
.philo__mark{border-top:1px solid var(--rule-dark);padding-top:15px;}
.philo__mark b{display:block;font-family:var(--serif);font-size:.92rem;letter-spacing:.13em;margin-bottom:5px;}
.philo__mark span{font-size:.79rem;color:var(--ink-soft);line-height:1.7;}
.philo .botanical{right:-20px;top:7%;width:min(190px,19vw);opacity:.3;color:var(--copper-deep);}

/* 08.4 PHILOSOPHY → SERVICES HANDOFF ------------------------------------------ */
/* Ivory dissolves into forest across a dedicated band; the section index changes
   frame while the background morphs — no hard colour cut. */
.handoff{position:relative;height:clamp(230px,42vh,420px);overflow:hidden;
  background:linear-gradient(to bottom,var(--ivory-warm) 0%,#c9c3b4 34%,#4a5f52 68%,var(--forest) 100%);}
.handoff__word{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-family:var(--serif);font-size:clamp(2.6rem,12vw,9rem);line-height:1;color:var(--forest);opacity:.09;}
.handoff__word--b{color:var(--ivory);}
.handoff__label{position:absolute;left:var(--gutter);bottom:clamp(24px,5vh,54px);display:flex;align-items:center;
  gap:14px;font-family:var(--serif);font-size:.76rem;letter-spacing:.24em;color:var(--copper);}
.handoff__label i{display:block;width:clamp(40px,8vw,110px);height:1px;background:currentColor;transform-origin:left center;}
.handoff__rule{position:absolute;left:var(--gutter);right:var(--gutter);top:50%;height:1px;background:var(--copper-rule);
  transform:scaleX(0);transform-origin:left center;}

/* 08.5 SERVICES --------------------------------------------------------------- */
.services{overflow:hidden;}
.services__head{display:grid;grid-template-columns:1fr auto;gap:var(--s-4);align-items:end;margin-bottom:clamp(38px,5vw,74px);}
.services__head h2{font-size:var(--fs-h2);margin-top:18px;}
.services__body{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4vw,72px);align-items:start;}
.svc-list{border-top:1px solid var(--rule-light);}
.svc-item{border-bottom:1px solid var(--rule-light);}
.svc-trigger{width:100%;display:flex;align-items:baseline;gap:clamp(12px,2vw,26px);
  padding:clamp(15px,2.2vw,24px) 0;text-align:left;position:relative;
  transition:padding-left var(--t-ui) var(--ease);}
.svc-trigger .num{font-family:var(--serif);font-size:.76rem;letter-spacing:.15em;color:var(--copper);opacity:.5;
  transition:opacity var(--t-ui) var(--ease);}
.svc-trigger .name{font-family:var(--serif);font-size:clamp(1.02rem,1.9vw,1.62rem);color:var(--ivory);
  transition:color var(--t-ui) var(--ease);flex:1;}
.svc-trigger .bar{position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--copper);
  transform:scaleX(0);transform-origin:left center;transition:transform 640ms var(--ease);}
.svc-item.active .svc-trigger{padding-left:clamp(8px,1.5vw,20px);}
.svc-item.active .num{opacity:1;}
.svc-item.active .name{color:var(--copper);}
.svc-item.active .bar{transform:scaleX(1);}
@media (hover:hover) and (pointer:fine){.svc-trigger:hover .name{color:var(--copper-bright);}}
.svc-panel{overflow:hidden;height:0;transition:height var(--t-ui) var(--ease);}
.svc-panel__in{padding:0 0 24px;max-width:52ch;}
.svc-panel p{color:var(--ivory-soft);font-size:.9rem;}
.svc-panel .link-u{margin-top:18px;}
html.anim .svc-panel__in > *{opacity:0;transform:translateY(14px);
  transition:opacity 460ms var(--ease),transform 460ms var(--ease);}
html.anim .svc-item.active .svc-panel__in > *{opacity:1;transform:none;transition-delay:180ms;}
html.anim .svc-item.active .svc-panel__in > * + *{transition-delay:260ms;}

/* stage: image variants swap through an architectural mask */
.svc-stage{position:relative;height:clamp(360px,64vh,760px);background:var(--forest-deep);overflow:hidden;}
.svc-stage__layer{position:absolute;inset:0;clip-path:inset(0 0 100% 0);}
.svc-stage__layer img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);}
html.anim .svc-stage__layer{transition:clip-path 900ms var(--ease-editorial);}
html.anim .svc-stage__layer img{transition:transform 1400ms var(--ease);}
.svc-stage__layer.on{clip-path:inset(0 0 0 0);z-index:2;}
.svc-stage__layer.on img{transform:scale(1);}
.svc-stage__layer.out{clip-path:inset(0 0 0 0);z-index:1;}
.svc-stage__frame{position:absolute;inset:14px;border:1px solid rgba(199,154,110,.28);z-index:4;pointer-events:none;}
.svc-stage__meta{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:22px 24px;
  background:linear-gradient(transparent,rgba(8,26,21,.86));display:flex;align-items:flex-end;justify-content:space-between;gap:18px;}
.svc-num{position:relative;overflow:hidden;height:1.05em;font-family:var(--serif);
  font-size:clamp(1.9rem,3.6vw,3.2rem);line-height:1.05;color:var(--copper);}
.svc-num span{display:block;}
html.anim .svc-num span{transition:transform 560ms var(--ease);}
.svc-num .next{position:absolute;inset:0;transform:translateY(110%);}
.svc-num.swap .cur{transform:translateY(-110%);}
.svc-num.swap .next{transform:translateY(0);}
.svc-cap{position:relative;overflow:hidden;height:1.4em;text-align:right;flex:1;}
.svc-cap span{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-faint);line-height:1.4;}
html.anim .svc-cap span{transition:transform 560ms var(--ease);}
.svc-cap .next{position:absolute;inset:0;transform:translateY(110%);}
.svc-cap.swap .cur{transform:translateY(-110%);}
.svc-cap.swap .next{transform:translateY(0);}
.services .ghost-number{right:-2%;top:2%;color:var(--ivory);}

/* 08.6 SERVICES → PORTFOLIO HANDOFF ------------------------------------------- */
.svc-outro{position:relative;height:clamp(240px,48vh,520px);overflow:hidden;background:var(--forest);}
.svc-outro__media{position:absolute;inset:0;clip-path:inset(0 22% 0 22%);}
.svc-outro__media img{width:100%;height:100%;object-fit:cover;}
.svc-outro__media::after{content:"";position:absolute;inset:0;background:rgba(8,26,21,.34);}
.svc-outro__line{position:absolute;left:50%;bottom:clamp(22px,5vh,52px);transform:translateX(-50%);
  font-family:var(--serif);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);
  text-align:center;z-index:2;}

/* 08.7 SELECTED WORK ---------------------------------------------------------- */
.pf{background:var(--ivory-warm);position:relative;}
.pf__head{padding-top:var(--section-y);padding-bottom:clamp(28px,4vw,54px);}
.pf__headrow{display:grid;grid-template-columns:1fr auto;gap:var(--s-4);align-items:end;}
.pf__head h2{font-size:var(--fs-h2);margin-top:18px;max-width:14ch;}
.pf__steps{display:flex;align-items:center;gap:8px;margin-top:var(--s-4);}
.pf__step{display:flex;align-items:center;gap:8px;flex:1;}
.pf__step b{font-family:var(--serif);font-size:.7rem;font-weight:400;letter-spacing:.14em;color:var(--ink-faint);
  transition:color 460ms var(--ease);}
.pf__step i{flex:1;height:1px;background:var(--rule-dark);position:relative;overflow:hidden;}
.pf__step i::after{content:"";position:absolute;inset:0;background:var(--copper);transform:scaleX(0);
  transform-origin:left center;transition:transform 520ms var(--ease);}
.pf__step.done b,.pf__step.on b{color:var(--copper-deep);}
.pf__step.done i::after,.pf__step.on i::after{transform:scaleX(1);}
.pf__step.on b{font-size:.82rem;}
.pf__hint{margin-top:12px;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);}
.pf__viewport{overflow:hidden;padding-bottom:var(--section-y);}
.pf__track{display:flex;align-items:center;gap:clamp(16px,2.6vw,44px);padding-inline:var(--gutter);}
.pf-card{position:relative;flex:0 0 auto;width:clamp(260px,40vw,540px);}
.pf-card--tall{width:clamp(240px,30vw,410px);}
.pf-card__media{position:relative;overflow:hidden;background:var(--forest-soft);height:clamp(340px,58vh,660px);}
.pf-card--wide .pf-card__media{height:clamp(280px,46vh,520px);}
.pf-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease);}
.pf-card__media::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(8,26,21,.66));
  opacity:.8;transition:opacity 700ms var(--ease);}
.pf-card__num{position:absolute;top:20px;left:20px;z-index:2;font-family:var(--serif);font-size:.7rem;
  letter-spacing:.2em;color:var(--ivory);opacity:.8;}
.pf-card__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px;}
.pf-card__body h3{font-size:clamp(1.08rem,1.8vw,1.55rem);color:var(--ivory);}
.pf-card__meta{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.6rem;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(242,232,216,.7);}
.pf-card__view{margin-top:14px;display:inline-flex;align-items:center;gap:9px;font-size:.62rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--copper);}
/* active/upcoming hierarchy — driven by a class, not by hover alone */
html.anim .pf-card{transition:opacity 700ms var(--ease);}
html.anim .pf-card__body{transform:translateY(12px);transition:transform 700ms var(--ease);}
html.anim .pf-card__view{opacity:0;transform:translateY(8px);transition:opacity 600ms var(--ease),transform 600ms var(--ease);}
html.anim .pf-card.is-active .pf-card__body{transform:none;}
html.anim .pf-card.is-active .pf-card__view{opacity:1;transform:none;}
html.anim .pf-card.is-side{opacity:.66;}
html.anim .pf-card.is-side .pf-card__media::after{opacity:1;}
@media (hover:hover) and (pointer:fine){
  .pf-card:hover .pf-card__media img{transform:scale(1.045);}
  .pf-card:hover{opacity:1 !important;}
}
.pf-end{flex:0 0 auto;width:clamp(250px,25vw,370px);align-self:center;padding-right:var(--gutter);}
.pf-end h3{font-size:var(--fs-h3);margin-bottom:20px;}

/* 08.8 WHY RAAYA (low motion) -------------------------------------------------- */
.why{position:relative;overflow:hidden;}
.why__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5vw,84px);}
.why__head h2{font-size:var(--fs-h2);margin-top:18px;}
.why__list{border-top:1px solid var(--rule-light);}
.why-row{display:grid;grid-template-columns:auto minmax(170px,1.1fr) 1.4fr;gap:clamp(14px,3vw,44px);
  align-items:baseline;padding:clamp(20px,2.8vw,34px) 0;border-bottom:1px solid var(--rule-light);position:relative;
  transition:padding-left var(--t-ui) var(--ease);}
.why-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--copper);
  transform:scaleY(0);transform-origin:top center;transition:transform 640ms var(--ease);}
@media (hover:hover) and (pointer:fine){
  .why-row:hover{padding-left:clamp(12px,2vw,26px);}
  .why-row:hover::before{transform:scaleY(1);}
}
.why-row__n{font-family:var(--serif);font-size:.72rem;letter-spacing:.19em;color:var(--copper);opacity:.6;}
.why-row h3{font-size:clamp(1rem,1.6vw,1.38rem);color:var(--ivory);letter-spacing:.07em;}
.why-row p{color:var(--ivory-soft);font-size:.9rem;max-width:56ch;}
.why .botanical{left:-60px;bottom:-40px;width:min(260px,28vw);opacity:.22;}

/* 08.9 CRAFT INTRO + MATERIAL SEQUENCE ---------------------------------------- */
.craft-intro{background:var(--ivory);}
.craft-intro__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,84px);align-items:center;}
.craft-intro h2{font-size:var(--fs-h2);margin:18px 0 var(--s-4);}
.craft-intro p + p{margin-top:18px;}
.craft-intro .editorial-photo{height:clamp(300px,54vh,640px);}
.craft-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1.5vw,20px);margin-top:clamp(32px,5vw,60px);}
.craft-strip .img-reveal{height:clamp(180px,28vh,360px);}

.mat{position:relative;background:var(--forest-deep);}
.mat__sticky{position:sticky;top:0;height:100vh;overflow:hidden;}
.mat__panel{position:absolute;inset:0;display:grid;place-items:center;}
.mat__img{position:absolute;inset:0;overflow:hidden;clip-path:inset(50% 0 50% 0);}
.mat__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);}
.mat__img::after{content:"";position:absolute;inset:0;background:rgba(8,26,21,.58);}
.mat__word{position:relative;z-index:2;font-family:var(--serif);color:var(--ivory);
  font-size:clamp(2.6rem,14vw,12rem);line-height:.92;text-align:center;padding-inline:var(--gutter);}
.mat__word em{font-style:normal;color:var(--copper);}
.mat__label{position:absolute;z-index:3;left:var(--gutter);top:calc(var(--nav-h) + 30px);
  display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:.74rem;letter-spacing:.26em;
  color:var(--copper);opacity:0;}
.mat__label i{display:block;width:clamp(30px,6vw,80px);height:1px;background:currentColor;}
.mat__cap{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(26px,6vh,80px);z-index:3;
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px;font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ivory-faint);}
.mat__count{font-family:var(--serif);letter-spacing:.2em;color:var(--copper);}
/* static fallback when motion is off / GSAP missing */
html:not(.gsap) .mat__sticky{position:relative;height:auto;}
html:not(.gsap) .mat__panel{position:relative;inset:auto;height:clamp(420px,72vh,760px);}
html:not(.gsap) .mat__img{clip-path:inset(0 0 0 0);}
html:not(.gsap) .mat__img img{transform:scale(1);}
html:not(.gsap) .mat__label{opacity:1;}
html:not(.gsap) .mat__cap{display:none;}

/* 08.10 BEFORE / AFTER --------------------------------------------------------- */
.ba__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:end;margin-bottom:clamp(34px,4.5vw,64px);}
.ba__head h2{font-size:var(--fs-h2);margin-top:18px;}
.compare{position:relative;height:clamp(300px,62vh,700px);overflow:hidden;background:var(--forest-soft);
  touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none;}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;}
.compare__after{clip-path:inset(0 0 0 50%);}
.compare__tag{position:absolute;top:18px;z-index:3;padding:7px 14px;font-size:.58rem;letter-spacing:.22em;
  text-transform:uppercase;background:rgba(8,26,21,.72);color:var(--ivory);border:1px solid rgba(242,232,216,.2);}
.compare__tag--b{left:18px;}
.compare__tag--a{right:18px;color:var(--copper);border-color:var(--copper-rule);}
.compare__handle{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--copper);z-index:4;}
.compare__grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;
  border:1px solid var(--copper);background:rgba(8,26,21,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  display:grid;place-items:center;color:var(--copper);transition:transform var(--t-micro) var(--ease),background var(--t-micro) var(--ease);}
.compare.dragging .compare__grip{transform:translate(-50%,-50%) scale(.94);background:rgba(199,154,110,.16);}
.compare:focus-visible{outline:2px solid var(--copper);outline-offset:3px;}
.compare__grip svg{width:22px;height:11px;fill:currentColor;}
.ba__foot{margin-top:18px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;font-size:.62rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}

/* 08.11 PROCESS ---------------------------------------------------------------- */
.process{position:relative;overflow:hidden;}
.process__head{margin-bottom:clamp(40px,5vw,80px);max-width:44ch;}
.process__head h2{font-size:var(--fs-h2);margin-top:18px;}
.process__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,4.5vw,80px);align-items:start;}
.process__steps{position:relative;padding-left:clamp(26px,3.6vw,54px);}
.process__rail{position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(242,232,216,.14);}
.process__rail i{position:absolute;inset:0;background:var(--copper);transform:scaleY(0);transform-origin:top center;}
.step{position:relative;padding-block:clamp(18px,3vw,38px);opacity:.4;transition:opacity 620ms var(--ease);}
.step.active{opacity:1;}
.step::before{content:"";position:absolute;left:calc(clamp(26px,3.6vw,54px) * -1);top:calc(clamp(18px,3vw,38px) + 13px);
  width:9px;height:9px;border:1px solid var(--copper);background:var(--forest);transform:translateX(-4px) rotate(45deg);
  transition:background 560ms var(--ease),transform 560ms var(--ease);}
.step.active::before{background:var(--copper);transform:translateX(-4px) rotate(45deg) scale(1.14);}
.step__n{font-family:var(--serif);font-size:.74rem;letter-spacing:.19em;color:var(--copper);}
.step h3{font-size:clamp(1.05rem,1.8vw,1.55rem);color:var(--ivory);margin:10px 0 12px;letter-spacing:.06em;}
.step p{color:var(--ivory-soft);font-size:.9rem;max-width:52ch;}
.process__media{position:sticky;top:var(--dock-top);}
.process__stage{position:relative;height:clamp(300px,58vh,700px);overflow:hidden;background:var(--forest-soft);}
.process__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 100% 0);}
html.anim .process__stage img{transition:clip-path 900ms var(--ease-editorial);}
.process__stage img.on{clip-path:inset(0 0 0 0);}
.process__stage::after{content:"";position:absolute;inset:12px;border:1px solid rgba(199,154,110,.25);pointer-events:none;z-index:2;}
.process__cta{margin-top:var(--s-5);}
.process .ghost-number{left:-3%;bottom:0;color:var(--ivory);}

/* 08.12 TESTIMONIALS (low motion) ---------------------------------------------- */
.quotes{background:var(--ivory);position:relative;overflow:hidden;}
.quotes__inner{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,72px);align-items:start;}
.quotes__mark{font-family:var(--serif);font-size:clamp(4rem,10vw,10rem);line-height:.7;color:var(--copper);opacity:.3;}
.quotes__stage{position:relative;min-height:clamp(230px,36vh,340px);touch-action:pan-y;}
.quote{position:absolute;inset:0;pointer-events:none;visibility:hidden;}
.quote.on{pointer-events:auto;visibility:visible;}
html.anim .quote{opacity:0;}
html.anim .quote blockquote,html.anim .quote figcaption{transform:translateY(26px);}
html.anim .quote.on{opacity:1;transition:opacity 520ms var(--ease);}
html.anim .quote.on blockquote{transform:none;transition:transform 700ms var(--ease);}
html.anim .quote.on figcaption{transform:none;transition:transform 700ms var(--ease) 90ms;}
html.anim .quote.out{opacity:0;visibility:visible;transition:opacity 380ms var(--ease);}
html.anim .quote.out blockquote,html.anim .quote.out figcaption{transform:translateY(-26px);transition:transform 520ms var(--ease);}
.quote blockquote{margin:0;max-width:44ch;font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,2.05rem);line-height:1.45;}
.quote figcaption{margin-top:var(--s-4);display:flex;flex-direction:column;gap:6px;}
.quote__name{font-family:var(--serif);font-size:1.05rem;letter-spacing:.03em;color:var(--ink);}
.quote__dash{display:inline-block;margin-right:6px;color:var(--copper-deep);}
.quote__meta{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);}
.quotes__controls{display:flex;align-items:center;gap:22px;margin-top:clamp(26px,3.6vw,48px);}
.qbtn{width:50px;height:50px;border:1px solid var(--rule-dark);display:grid;place-items:center;color:var(--ink);
  transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease),background var(--t-micro) var(--ease);}
.qbtn:hover{border-color:var(--copper);color:var(--copper-deep);background:rgba(199,154,110,.08);}
.qbtn svg{width:19px;height:10px;fill:currentColor;}
.qcount{font-family:var(--serif);font-size:.78rem;letter-spacing:.22em;color:var(--copper-deep);}

/* 08.13 FINAL CINEMATIC CTA ---------------------------------------------------- */
.final{position:relative;display:flex;align-items:center;overflow:hidden;background:var(--forest-deep);}
.final__media{position:absolute;inset:0;z-index:0;overflow:hidden;clip-path:inset(0 0 0 0);}
.final__media img{width:100%;height:100%;object-fit:cover;}
.final__scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(8,26,21,.94) 0%,rgba(8,26,21,.78) 46%,rgba(8,26,21,.4) 100%);}
.final__inner{position:relative;z-index:2;padding-block:clamp(80px,13vw,180px);}
.final h2{font-size:clamp(1.9rem,4.8vw,4.3rem);margin:20px 0 24px;max-width:16ch;color:var(--ivory);}
.final__benefits{margin-top:var(--s-5);display:grid;gap:12px;max-width:46ch;}
.final__benefits li{display:flex;gap:13px;align-items:flex-start;color:var(--ivory-soft);font-size:.88rem;}
.final__benefits .tick{color:var(--copper);flex:0 0 auto;line-height:1.6;}
.final__actions{margin-top:var(--s-6);display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.final__tel{display:inline-flex;flex-direction:column;gap:4px;margin-left:6px;}
.final__tel small{font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ivory-faint);}
.final__tel b{font-family:var(--serif);font-weight:400;font-size:1.02rem;letter-spacing:.1em;color:var(--copper);}
.final .botanical{right:4%;top:11%;width:min(260px,24vw);opacity:.28;}

/* 08.14 FAQ -------------------------------------------------------------------- */
.faq__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,4.5vw,84px);align-items:start;}
.faq__head h2{font-size:var(--fs-h2);margin-top:18px;}
.faq__head .aside{margin-top:var(--s-5);padding-top:20px;border-top:1px solid var(--rule-dark);}
.faq__list{border-top:1px solid var(--rule-dark);}
.faq-item{border-bottom:1px solid var(--rule-dark);transition:border-color var(--t-ui) var(--ease);}
.faq-item.open{border-bottom-color:var(--copper);}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:22px;text-align:left;
  padding:clamp(16px,2.2vw,24px) 0;font-family:var(--serif);font-size:clamp(.95rem,1.4vw,1.14rem);
  transition:color var(--t-micro) var(--ease);}
.faq-item.open .faq-q,.faq-q:hover{color:var(--copper-deep);}
.faq-icon{position:relative;flex:0 0 auto;width:16px;height:16px;transition:transform 480ms var(--ease);}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;top:50%;left:0;width:100%;height:1px;background:currentColor;}
.faq-icon::after{transform:rotate(90deg);}
.faq-item.open .faq-icon{transform:rotate(135deg);color:var(--copper);}
.faq-a{height:0;overflow:hidden;transition:height 480ms var(--ease);}
.faq-a__in{padding-bottom:24px;max-width:64ch;color:var(--ink-soft);font-size:.9rem;}

/* 08.15 AREAS ------------------------------------------------------------------ */
.areas{background:var(--forest);color:var(--ivory);padding-block:clamp(50px,6.5vw,92px);}
.areas__grid{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,66px);align-items:center;}
.areas h2{font-size:clamp(1.05rem,1.7vw,1.35rem);letter-spacing:.17em;}
.areas ul{display:flex;flex-wrap:wrap;gap:9px 10px;}
.areas li{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ivory-soft);
  border:1px solid rgba(242,232,216,.16);padding:8px 14px;}
.areas p{margin-top:16px;font-size:.76rem;color:var(--ivory-faint);}

/* 08.16 FOOTER ----------------------------------------------------------------- */
.footer{background:var(--forest-deep);color:var(--ivory);position:relative;overflow:hidden;padding-block:clamp(52px,6.5vw,96px) 0;}
.footer__grid{display:grid;grid-template-columns:1.4fr .7fr .9fr;gap:clamp(30px,4.5vw,76px);}
.footer__brand .brand{margin-bottom:20px;opacity:1 !important;}
.footer__tag{font-family:var(--serif);font-size:.98rem;letter-spacing:.09em;color:var(--copper);margin-bottom:16px;}
.footer p{color:var(--ivory-soft);font-size:.86rem;max-width:44ch;}
.footer h3{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--copper);
  font-family:var(--sans);font-weight:500;margin-bottom:20px;}
.footer__nav li + li{margin-top:11px;}
.footer__nav a{font-size:.85rem;color:var(--ivory-soft);transition:color var(--t-micro) var(--ease);}
.footer__nav a:hover{color:var(--copper);}
.footer__contact li{margin-bottom:15px;font-size:.85rem;color:var(--ivory-soft);}
.footer__contact b{display:block;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory-faint);
  margin-bottom:5px;font-weight:400;}
.footer__social{display:flex;gap:12px;margin-top:24px;}
.footer__social a{width:42px;height:42px;border:1px solid rgba(242,232,216,.16);display:grid;place-items:center;
  color:var(--ivory);transition:border-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);}
.footer__social a:hover{border-color:var(--copper);color:var(--copper);}
.footer__social svg{width:15px;height:15px;fill:currentColor;}
.footer__bar{margin-top:clamp(40px,5vw,74px);padding-block:24px;border-top:1px solid rgba(242,232,216,.1);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.66rem;letter-spacing:.11em;color:var(--ivory-faint);}
.footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:20px;}
.footer__legal a{color:var(--ivory-faint);transition:color var(--t-micro) var(--ease);}
.footer__legal a:hover{color:var(--copper);}
.footer .botanical{right:-30px;bottom:-20px;width:min(280px,32vw);opacity:.2;}

/* 08.17 MOBILE CONVERSION BAR -------------------------------------------------- */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:880;display:none;grid-template-columns:1fr 1fr;
  background:rgba(14,42,35,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--copper-rule);padding-bottom:env(safe-area-inset-bottom);
  transform:translateY(102%);transition:transform var(--t-ui) var(--ease);}
.mbar.show{transform:none;}
.mbar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:15px 8px;min-height:52px;
  font-size:.64rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ivory);}
.mbar a + a{border-left:1px solid rgba(242,232,216,.14);color:var(--copper);}
.mbar svg{width:15px;height:15px;fill:currentColor;}

/* 08.18 CUSTOM CURSOR ---------------------------------------------------------- */
.cursor{position:fixed;top:0;left:0;z-index:9000;width:78px;height:78px;border-radius:50%;
  border:1px solid var(--copper);background:rgba(14,42,35,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:none;place-items:center;pointer-events:none;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--copper);opacity:0;transition:opacity 340ms var(--ease);}
@media (hover:hover) and (pointer:fine) and (min-width:1025px){html.anim .cursor{display:grid;}}
.cursor.on{opacity:1;}

/* ---------- 09 RESPONSIVE ---------- */
@media (max-width:1279px){
  .why-row{grid-template-columns:auto 1fr;}
  .why-row p{grid-column:2/-1;}
}
@media (max-width:1024px){
  :root{--nav-h:72px;}
  .nav__links{display:none;}
  .burger{display:flex;}
  .lead__grid,.philo__grid,.services__body,.why__head,.craft-intro__grid,
  .ba__head,.process__grid,.faq__grid,.footer__grid{grid-template-columns:1fr;}
  .philo__media,.process__media{position:static;}
  .philo__media .editorial-photo{height:clamp(280px,46vh,460px);}
  .philo__media .editorial-photo--detail{height:clamp(140px,24vh,220px);}
  .process__media{margin-top:var(--s-5);}
  .process__stage{height:clamp(260px,42vh,420px);}
  .svc-stage{order:-1;height:clamp(230px,36vh,400px);margin-bottom:var(--s-4);}
  .services__head{grid-template-columns:1fr;align-items:start;}
  .services__head .btn{justify-self:start;}
  .pf__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .pf__viewport::-webkit-scrollbar{display:none;}
  .pf-card,.pf-card--tall{width:min(76vw,400px);scroll-snap-align:center;}
  .pf-card__media{height:clamp(320px,52vh,520px);}
  .quotes__inner{grid-template-columns:1fr;}
  .quotes__mark{font-size:clamp(2.4rem,9vw,3.4rem);line-height:.6;margin-bottom:-6px;}
  .areas__grid{grid-template-columns:1fr;align-items:start;}
  .craft-intro .editorial-photo{height:clamp(260px,42vh,420px);}
}
@media (max-width:860px){
  .form__grid{grid-template-columns:1fr;}
  .philo__marks{grid-template-columns:1fr;}
  .craft-strip{grid-template-columns:1fr 1fr;}
  .craft-strip .img-reveal:last-child{display:none;}
}
@media (max-width:767px){
  /* the nav CTA does not fit alongside the burger at phone widths — it is
     covered by the hero CTA, the menu CTA and the fixed mobile bar */
  .nav__actions > .btn{display:none;}
  /* comfortable touch targets on form controls (39px → 44px) */
  .field input,.field select{min-height:44px;}
  .mbar{display:grid;}
  .footer__bar{padding-bottom:76px;}
  .hero__scroll{display:none;}
  .compare{height:clamp(260px,50vh,420px);}
  .compare__grip{width:46px;height:46px;}
  .final__scrim{background:linear-gradient(180deg,rgba(8,26,21,.88) 0%,rgba(8,26,21,.86) 60%,rgba(8,26,21,.92) 100%);}
  .final__actions{gap:12px;}
  .final__tel{margin-left:0;}
  .pf__steps{gap:5px;}
  .pf__step b{font-size:.6rem;}
  .pf__step.on b{font-size:.7rem;}
}
@media (max-width:430px){
  .btn{padding:16px 22px;letter-spacing:.16em;}
  .brand__tag{display:none;}
  .hero h1{max-width:none;}
  .form{padding:22px 18px;}
  .why-row{grid-template-columns:1fr;gap:9px;}
  .why-row p{grid-column:auto;}
  .areas li{font-size:.64rem;padding:7px 11px;}
  .quotes__stage{min-height:300px;}
}
/* short viewports — 1280x720, 1366x768, landscape phones */
@media (max-height:760px) and (min-width:1025px){
  :root{--plate-h:clamp(170px,26vh,260px);}
  .hero h1{font-size:clamp(2.2rem,4.6vw,3.9rem);margin:14px 0 16px;}
  .hero__copy{font-size:.92rem;max-width:46ch;}
  .hero__stats{margin-top:22px;padding-top:16px;}
  .hero__cta{margin-top:22px;}
  .svc-stage{height:clamp(320px,56vh,520px);}
  .pf-card__media{height:clamp(300px,52vh,480px);}
}
@media (max-height:560px){
  .hero{min-height:460px;}
  .hero h1{font-size:clamp(0.9rem,7vw,2.6rem);margin:10px 0 12px;}
  .hero__stats{display:none;}
  .hero__cta{margin-top:18px;}
  .menu{justify-content:flex-start;}
}

/* ---------- 10 REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0ms !important;scroll-behavior:auto !important;}
  .loader{display:none !important;}
  .hero{position:relative;height:auto;min-height:0;padding-block:calc(var(--nav-h) + 40px) 60px;}
  .hero-stage{position:absolute;}
  .hero-stage__content{position:relative;inset:auto;}
  .philo__media,.process__media{position:static !important;}
  .mat__sticky{position:relative;height:auto;}
  .mat__panel{position:relative;inset:auto;height:clamp(380px,64vh,600px);}
  .mat__img{clip-path:inset(0 0 0 0) !important;}
  .mat__img img{transform:none !important;}
  .mat__label{opacity:1 !important;}
  .mat__cap{display:none;}
  .quote{position:relative;visibility:visible;pointer-events:auto;opacity:1 !important;}
  .quote + .quote{margin-top:40px;padding-top:40px;border-top:1px solid var(--rule-dark);}
  .quotes__stage{min-height:0;}
  .quotes__controls{display:none;}
  .step{opacity:1 !important;}
  .process__stage img{clip-path:inset(0 0 0 0) !important;position:relative;}
  .process__stage img + img{display:none;}
  .svc-outro__media{clip-path:inset(0 0 0 0) !important;}
  .cursor{display:none !important;}
  .handoff{height:120px;}
}

/* ---------- 11 TRANSFORM OWNERSHIP + GSAP-CONDITIONAL GEOMETRY ---------- */
/* Once the hero entrance has played, CSS releases these properties so the
   scrubbed GSAP timeline is their only owner. No two systems ever write the
   same transform at the same time. */
body.hero-done .hero__eyebrow,body.hero-done .hero__copy,body.hero-done .hero__cta,
body.hero-done .hero__stats,body.hero-done .hero__scroll,
body.hero-done .hero h1 .line > span{transition:none !important;}

/* scroll distance for the Material film exists only when GSAP drives it */
html.gsap .mat{height:300vh;}
html:not(.gsap) .svc-outro__media{clip-path:inset(0 0 0 0);}
.mat__cap{z-index:9;}

/* portfolio fallback: if the pinned track can't run, the row stays swipeable */
.pf__viewport.is-swipe{overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.pf__viewport.is-swipe::-webkit-scrollbar{display:none;}
.pf__viewport.is-swipe .pf-card{scroll-snap-align:center;}

/* ---------- 12 PROGRESSIVE UNIT ENHANCEMENT ----------
   Baseline uses vh so older Safari/Firefox get correct geometry.
   Where the mobile address bar actually causes visible jumps — the full-height
   hero and the pinned Material film — swap in small-viewport units. */
@supports (height:100svh){
  :root{--plate-h:clamp(190px,32svh,340px);}
  .hero{height:100svh;}
  .mat__sticky{height:100svh;}
  html.gsap .mat{height:300svh;}
  .svc-stage{height:clamp(360px,64svh,760px);}
  .pf-card__media{height:clamp(340px,58svh,660px);}
  .compare{height:clamp(300px,62svh,700px);}
  .process__stage{height:clamp(300px,58svh,700px);}
}