:root{
    --shadow:#130B05; --espresso:#321E0D; --cocoa:#56351A; --wood:#7A502E;
    --leather:#A06D42; --sage:#A19A87; --amber:#D7A466; --stone:#DAD8CD; --ease:cubic-bezier(.22,1,.36,1);
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  html{scroll-padding-top: env(safe-area-inset-top, 0px); overflow-x:hidden; overflow-x:clip; width:100%; max-width:100%;}
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--shadow);color:var(--stone);}
  body{
    font-family:'Inter',sans-serif; font-weight:300;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    overflow-x:clip;
    width:100%; max-width:100%;
  }
  #root{min-height:100%;}
  .serif{font-family:'Cormorant Garamond', serif;}
  .kicker{
    font-family:'Inter',sans-serif; font-size:11px; letter-spacing:.28em;
    text-transform:uppercase; color:var(--sage); font-weight:500;
  }
  ::selection{background:var(--amber); color:var(--shadow);}
  a, button { font-family:'Inter',sans-serif; }
  button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 1.5px solid var(--amber); outline-offset: 3px;
  }
  input, textarea{ font-family:'Inter',sans-serif; }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  }

  /* grain */
  .grain::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  }

  /* ---- Entrances. Three variants, all opacity / transform / clip-path only. ----
     up: a single block rises. stagger: a block's children rise one after another.
     wipe: an image is uncovered top to bottom while it settles from a slight zoom. */
  .fade-up{ opacity:0; transform:translateY(24px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
  .fade-up.in{ opacity:1; transform:translateY(0); }
  @keyframes riseIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
  @keyframes settle{ from{ transform:scale(1.14); } to{ transform:none; } }
  /* children use an animation (not a transition) so they keep their own hover transitions */
  .fade-stagger:not(.in) > *{ opacity:0; }
  .fade-stagger.in > *{ animation:riseIn 1s var(--ease) backwards; }
  .fade-stagger.in > *:nth-child(1){ animation-delay:calc(var(--rd,0ms) + 0ms); }
  .fade-stagger.in > *:nth-child(2){ animation-delay:calc(var(--rd,0ms) + 110ms); }
  .fade-stagger.in > *:nth-child(3){ animation-delay:calc(var(--rd,0ms) + 220ms); }
  .fade-stagger.in > *:nth-child(4){ animation-delay:calc(var(--rd,0ms) + 330ms); }
  .fade-stagger.in > *:nth-child(5){ animation-delay:calc(var(--rd,0ms) + 440ms); }
  .fade-stagger.in > *:nth-child(6){ animation-delay:calc(var(--rd,0ms) + 550ms); }
  .fade-stagger.in > *:nth-child(n+7){ animation-delay:calc(var(--rd,0ms) + 660ms); }
  /* The wrapper that scroll-detection watches is never clipped itself (a fully clipped element
     can count as "not on screen" in some browsers, so it would never be revealed). The wipe is
     applied to its children instead. */
  .fade-wipe:not(.in) > *{ clip-path:inset(0 0 100% 0); transform:scale(1.14); }
  .fade-wipe.in > *{ clip-path:inset(-48px); transition:clip-path 1.5s var(--ease) var(--rd,0ms);
    animation:settle 2.1s var(--ease) var(--rd,0ms) backwards; }
  .expand-in{ animation:riseIn .8s var(--ease) backwards; }

  /* images drift in slowly on hover (hover-capable devices only) */
  .zoom-hover img{ transition:transform 1.6s var(--ease); }
  @media (hover:hover){ .zoom-hover:hover img{ transform:scale(1.045); } }
  /* the hero photograph settles very slowly once the opening has resolved */
  @keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
  .kenburns img{ animation:kenburns 24s ease-out both; transform-origin:60% 55%; }

  /* mobile browsers report 100vh taller than the actually visible area (behind the
     address bar); 100dvh accounts for that so full-bleed sections are truly full-bleed */
  .h-screen-fix{ height:100vh; height:100dvh; }


  /* ---- Client wall: dim single-tone logos, lit by a slow scroll-bound amber beam ---- */
  .logo-grid{ display:flex; flex-wrap:wrap; justify-content:center; list-style:none; margin:0; padding:0; }
  .logo-cell{ width:50%; height:100px; padding-bottom:20px; position:relative; display:flex; align-items:center; justify-content:center; }
  @media (min-width:640px){ .logo-cell{ width:33.3333%; height:116px; padding-bottom:22px; } }
  @media (min-width:1024px){ .logo-cell{ width:16.6666%; height:128px; padding-bottom:24px; } }
  .logo-mark{ display:block; background:rgba(218,216,205,.5); transition:background .7s ease;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain; mask-size:contain; }
  .logo-mark-bright{ background:var(--amber); transition:none; }
  .logo-caption{ position:absolute; left:6px; right:6px; bottom:8px; text-align:center; opacity:0;
    transform:translateY(4px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
  .logo-caption-name{ display:block; font-size:11px; letter-spacing:.04em; color:var(--stone); }
  .logo-caption-sub{ display:block; margin-top:2px; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
  @media (hover:hover){
    .logo-cell:hover .logo-mark:not(.logo-mark-bright){ background:var(--stone); }
    .logo-cell:hover .logo-caption{ opacity:1; transform:none; }
  }
  .logo-beam{ position:absolute; inset:0; pointer-events:none; --beam:-30%;
    -webkit-mask-image:linear-gradient(100deg, transparent calc(var(--beam) - 14%), #000 var(--beam), transparent calc(var(--beam) + 14%));
    mask-image:linear-gradient(100deg, transparent calc(var(--beam) - 14%), #000 var(--beam), transparent calc(var(--beam) + 14%)); }
  /* small / touch screens and reduced motion: a still wall, no beam, no hover captions */
  @media (max-width:639px){ .logo-beam{ display:none; } .logo-mark:not(.logo-mark-bright){ background:rgba(218,216,205,.66); } .logo-caption{ display:none; } }
  @media (prefers-reduced-motion: reduce){ .logo-beam{ display:none; } .logo-mark:not(.logo-mark-bright){ background:rgba(218,216,205,.66); } }


  /* ---- The concierge desk ---- */
  .desk-wrap{ margin-top:clamp(40px,6vw,72px); }
  .desk-border{ padding:1px; clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
    background:linear-gradient(135deg, rgba(215,164,102,.6), rgba(215,164,102,.12) 38%, rgba(215,164,102,.12) 62%, rgba(215,164,102,.5)); }
  .desk-inner{ position:relative; overflow:hidden; clip-path:polygon(0 0, calc(100% - 25px) 0, 100% 25px, 100% 100%, 25px 100%, 0 calc(100% - 25px));
    background:linear-gradient(160deg, rgba(50,30,13,.78), rgba(19,11,5,.94)); }
  .desk-lamp{ position:absolute; inset:0; pointer-events:none;
    background:radial-gradient(480px circle at var(--mx,78%) var(--my,10%), rgba(215,164,102,.12), transparent 62%); }
  .desk-grid{ position:relative; display:grid; grid-template-columns:1fr; }
  @media (min-width:900px){ .desk-grid{ grid-template-columns:220px 1fr; } }

  .desk-rail{ display:none; padding:34px 26px; border-right:1px solid rgba(218,216,205,.12); }
  @media (min-width:900px){ .desk-rail{ display:flex; flex-direction:column; } }
  .desk-brand{ display:flex; align-items:center; gap:10px; color:var(--amber); font-size:10px; letter-spacing:.3em; text-transform:uppercase; margin-bottom:34px; }
  .desk-rail ol{ list-style:none; margin:0; padding:0; flex:1; }
  .desk-rail li{ display:flex; align-items:baseline; gap:14px; padding:9px 0; color:rgba(218,216,205,.5); transition:color .5s ease; }
  .desk-roman{ width:28px; font-family:'Cormorant Garamond',serif; font-size:15px; }
  .desk-rail-label{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; }
  .desk-rail li.is-active{ color:var(--stone); }
  .desk-rail li.is-active .desk-roman{ color:var(--amber); }
  .desk-rail li.is-done{ color:rgba(218,216,205,.72); }
  .desk-rail li.is-done .desk-roman{ color:var(--amber); }
  .desk-clocks{ display:flex; flex-direction:column; gap:4px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(218,216,205,.12);
    font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(218,216,205,.6); }
  .desk-clocks b{ color:var(--amber); font-weight:500; margin-left:6px; letter-spacing:.12em; }

  .desk-main{ position:relative; padding:clamp(22px,3.2vw,38px) clamp(22px,4.2vw,56px) clamp(24px,3.2vw,38px); display:flex; flex-direction:column; min-height:clamp(480px,56vw,580px); }
  .desk-top{ display:flex; justify-content:space-between; align-items:center; font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:rgba(218,216,205,.72); }
  .desk-clocks-mobile{ font-size:9.5px; letter-spacing:.16em; color:var(--amber); }
  @media (min-width:900px){ .desk-clocks-mobile{ display:none; } }
  .desk-progress{ height:1px; background:rgba(218,216,205,.14); margin:16px 0 0; }
  .desk-progress span{ display:block; height:3px; margin-top:-1px; background:var(--amber); transition:width .9s cubic-bezier(.22,1,.36,1); }
  .desk-stage{ flex:1; display:flex; flex-direction:column; justify-content:center; padding:clamp(28px,5vw,52px) 0; }

  .desk-fieldset{ border:0; margin:0; padding:0; min-width:0; }
  .desk-q{ display:block; padding:0; margin:14px 0 0; font-size:clamp(28px,3.5vw,46px); line-height:1.15; color:var(--stone); }
  .desk-q em{ font-style:italic; color:var(--amber); }
  .desk-hint{ margin:14px 0 0; font-size:15px; line-height:1.7; color:var(--sage); max-width:560px; }
  .desk-keyhint{ display:none; color:rgba(215,164,102,.85); }
  @media (hover:hover) and (min-width:900px){ .desk-keyhint{ display:inline; } }
  .desk-fine{ margin-top:22px; font-size:12px; color:rgba(218,216,205,.65); }

  .desk-input{ width:100%; margin-top:26px; background:transparent; border:0; border-bottom:1px solid rgba(218,216,205,.5); border-radius:0;
    padding:14px 2px; font-family:'Cormorant Garamond',serif; font-size:clamp(22px,2.4vw,30px); color:var(--stone); caret-color:var(--amber);
    transition:border-color .4s ease; }
  .desk-input::placeholder{ color:rgba(218,216,205,.42); }
  .desk-input:hover{ border-bottom-color:rgba(218,216,205,.8); }
  .desk-input:focus{ border-bottom-color:var(--amber); }
  .desk-textarea{ resize:none; line-height:1.5; font-size:clamp(20px,2.1vw,26px); }
  .desk-input-small{ margin-top:6px; font-size:20px; padding:8px 2px; }
  .desk-extra{ margin-top:34px; }
  .desk-err{ margin-top:12px; font-size:13px; color:var(--amber); }

  .desk-options{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:28px; }
  @media (min-width:640px){ .desk-options{ grid-template-columns:1fr 1fr; } }
  .desk-opt{ position:relative; display:flex; align-items:center; gap:14px; width:100%; min-height:54px; padding:12px 18px; text-align:left;
    font-size:16px; color:var(--stone); border:1px solid rgba(218,216,205,.28); background:rgba(19,11,5,.4);
    transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
  .desk-opt:hover{ border-color:rgba(215,164,102,.75); transform:translateX(3px); }
  .desk-opt.is-on{ border-color:var(--amber); background:rgba(215,164,102,.13); }
  .desk-key{ flex:0 0 auto; width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; letter-spacing:.05em;
    border:1px solid rgba(218,216,205,.35); color:rgba(218,216,205,.85); transition:all .4s ease; }
  .desk-opt.is-on .desk-key{ background:var(--amber); border-color:var(--amber); color:var(--shadow); }
  .desk-tick{ margin-left:auto; color:var(--amber); opacity:0; transform:scale(.6); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
  .desk-opt.is-on .desk-tick{ opacity:1; transform:none; }

  .desk-controls{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:22px; border-top:1px solid rgba(218,216,205,.12); }
  .desk-controls-right{ display:flex; align-items:center; gap:22px; }
  .desk-enter{ display:none; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(218,216,205,.6); }
  @media (min-width:640px){ .desk-enter{ display:inline; } }
  .desk-back{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:rgba(218,216,205,.75); padding:12px 4px; transition:color .4s ease; }
  .desk-back:hover{ color:var(--amber); }
  .desk-cta{ position:relative; margin-top:0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone); padding:15px 30px;
    border:1px solid var(--amber); background-image:linear-gradient(var(--amber),var(--amber)); background-repeat:no-repeat; background-size:0% 100%; background-position:left;
    transition:background-size .7s cubic-bezier(.22,1,.36,1), color .5s ease; }
  .desk-cta:hover{ background-size:100% 100%; color:var(--shadow); }
  .desk-stage .desk-cta{ margin-top:30px; }

  .desk-folio{ margin:26px 0 0; border-top:1px solid rgba(218,216,205,.14); }
  .desk-row{ display:grid; grid-template-columns:110px 1fr auto; gap:16px; align-items:baseline; padding:12px 0; border-bottom:1px solid rgba(218,216,205,.1); }
  .desk-row dt{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(218,216,205,.65); }
  .desk-row dd{ margin:0; font-size:15px; line-height:1.55; color:var(--stone); word-break:break-word; }
  .desk-edit{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .4s ease; }
  .desk-edit:hover{ border-bottom-color:var(--amber); }
  @media (max-width:520px){ .desk-row{ grid-template-columns:1fr auto; } .desk-row dt{ grid-column:1 / -1; } }

  .desk-stamp{ display:inline-block; padding:7px 14px; font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--amber);
    border:1px solid rgba(215,164,102,.7); transform:rotate(-2deg); }
  .desk-link{ margin-top:28px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); border-bottom:1px solid var(--amber); padding-bottom:3px; }


  @media (max-width:520px){
    .desk-controls{ flex-direction:column-reverse; align-items:stretch; gap:6px; }
    .desk-controls-right{ width:100%; }
    .desk-controls-right .desk-cta{ width:100%; padding:15px 16px; letter-spacing:.1em; }
    .desk-back{ align-self:flex-start; }
  }
  @media (max-width:480px){ .desk-clocks-mobile{ display:none; } }


  /* concierge refinements: optional tags, send-now, tighter small-screen behaviour */
  .desk-optional{ margin-left:8px; font-size:10px; font-style:italic; letter-spacing:.04em; color:rgba(218,216,205,.6); }
  .desk-row-static{ grid-template-columns:110px 1fr; }
  .desk-sendnow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); padding:12px 6px; border-bottom:1px solid transparent; transition:border-color .4s ease; }
  .desk-sendnow:hover{ border-bottom-color:var(--amber); }
  @media (max-width:520px){
    .desk-border{ clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
    .desk-inner{ clip-path:polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 17px 100%, 0 calc(100% - 17px)); }
    .desk-controls-right{ flex-direction:column-reverse; align-items:stretch; gap:2px; }
    .desk-sendnow{ align-self:center; padding:14px 8px; }
    .desk-back{ padding:14px 4px; }
    .desk-row-static{ grid-template-columns:1fr; gap:4px; }
  }

  @keyframes deskIn{ from{ opacity:0; transform:translateY(16px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
  @keyframes deskInBack{ from{ opacity:0; transform:translateY(-16px); filter:blur(6px); } to{ opacity:1; transform:none; filter:none; } }
  .desk-in{ animation:deskIn .8s cubic-bezier(.22,1,.36,1) both; }
  .desk-in-back{ animation:deskInBack .8s cubic-bezier(.22,1,.36,1) both; }
  @media (prefers-reduced-motion: reduce){
    .desk-in, .desk-in-back{ animation:none; }
    .desk-progress span, .desk-opt, .desk-cta{ transition:none; }
    .desk-lamp{ display:none; }
  }


  /* ---- Who we work with ---- */
  .sector-grid{ display:grid; grid-template-columns:1fr; gap:48px; }
  @media (min-width:900px){ .sector-grid{ grid-template-columns:7fr 5fr; gap:72px; align-items:start; } }
  .sector-list{ list-style:none; margin:0; padding:0; }
  .sector-row{ display:grid; grid-template-columns:44px 1fr; gap:6px; padding:30px 0; border-top:1px solid rgba(218,216,205,.16);
    transition:transform .7s var(--ease); }
  .sector-row:last-child{ border-bottom:1px solid rgba(218,216,205,.16); }
  .sector-n{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); padding-top:10px; }
  .sector-name{ margin:0; font-size:clamp(30px,4.4vw,60px); line-height:1.1; font-weight:400; color:var(--stone); transition:color .7s var(--ease); }
  .sector-line{ margin:12px 0 0; max-width:520px; font-size:15.5px; line-height:1.8; color:var(--sage); }
  .sector-thumb{ margin-top:18px; aspect-ratio:16/9; overflow:hidden; }
  .sector-stage{ display:none; }
  @media (min-width:900px){
    .sector-thumb{ display:none; }
    .sector-stage{ display:block; position:sticky; top:120px; aspect-ratio:4/5; overflow:hidden; background:#130B05; }
    .sector-img{ position:absolute; inset:0; transition:opacity 1.1s var(--ease); }
    .sector-ref{ position:absolute; left:14px; bottom:14px; font-size:9px; background:rgba(19,11,5,.6); padding:4px 8px; }
    .sector-row .sector-name{ color:rgba(218,216,205,.5); }
    .sector-row.is-active{ transform:translateX(12px); }
    .sector-row.is-active .sector-name{ color:var(--stone); }
  }

  .dossier-stories{ list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:1fr; column-gap:48px; }
  @media (min-width:640px){ .dossier-stories{ grid-template-columns:1fr 1fr; } }
  .dossier-stories li{ padding:10px 0; border-bottom:1px solid rgba(218,216,205,.14); font-family:'Cormorant Garamond',serif; font-size:19px; line-height:1.35; color:var(--stone); }


  /* ---- Hero: a living arrival ----
     A slow reel of Tatvani photographs, each pushed in or pulled out like a dolly move, under a
     headline that rises word by word. Only transform / opacity animate, and everything pauses
     when the hero is off screen or the tab is hidden. */
  .reel-layer{ position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1.9s ease, visibility 0s linear 1.9s; }
  .reel-layer[data-state="active"]{ opacity:1; visibility:visible; transition:opacity 1.9s ease, visibility 0s; }
  .reel-layer[data-state="prev"]{ visibility:visible; }
  .reel-layer img{ transform-origin:var(--ox,50%) var(--oy,50%); will-change:transform; }
  .reel-layer[data-state="active"] img, .reel-layer[data-state="prev"] img{ animation-duration:10.5s; animation-timing-function:cubic-bezier(.3,.1,.3,1); animation-fill-mode:forwards; }
  .reel-layer[data-dir="in"][data-state="active"] img, .reel-layer[data-dir="in"][data-state="prev"] img{ animation-name:reelIn; }
  .reel-layer[data-dir="out"][data-state="active"] img, .reel-layer[data-dir="out"][data-state="prev"] img{ animation-name:reelOut; }
  @keyframes reelIn{ from{ transform:scale(1.02) translate3d(0,0,0); } to{ transform:scale(1.13) translate3d(-1.4%,-.8%,0); } }
  @keyframes reelOut{ from{ transform:scale(1.13) translate3d(1.2%,.6%,0); } to{ transform:scale(1.02) translate3d(0,0,0); } }
  @keyframes reelFill{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

  /* scroll-driven exit (no transition: a transition on a scroll-driven value only makes it lag)
     and pointer-driven depth (eased, since the pointer is not the scroll) are kept on separate layers */
  .hero-scroll{ position:absolute; inset:0; transform:translate3d(0, calc(var(--hp,0) * 9vh), 0) scale(calc(1 + var(--hp,0) * .06)); }
  .hero-stage{ position:absolute; inset:-3%; transform:translate3d(calc(var(--px,0) * -16px), calc(var(--py,0) * -10px), 0); transition:transform 1.1s var(--ease); }
  .hero-content{ transform:translate3d(0, calc(var(--hp,0) * -7vh), 0); opacity:calc(1 - var(--hp,0) * 1.5); }
  .hero-lamp{ position:absolute; inset:0; pointer-events:none; background:radial-gradient(560px circle at var(--lx,50%) var(--ly,38%), rgba(215,164,102,.13), transparent 62%); }
  @media (pointer:coarse){ .hero-lamp{ display:none; } }

  /* the headline: each word rises out of a mask; the last word catches a slow band of light */
  .hero-line{ display:block; }
  .hero-word{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .08em .16em 0; margin:0 .14em -.16em 0; }
  .hero-word > span{ display:inline-block; transform:translateY(112%); }
  .hero-in .hero-word > span{ transform:none; transition:transform 1.6s var(--ease) calc(var(--w) * 130ms + 400ms); }
  .hero-shimmer{ text-shadow:none !important; filter:drop-shadow(0 6px 22px rgba(0,0,0,.7));
    background-image:linear-gradient(100deg, #E9D5B0 0%, #D7A466 36%, #FBEBC9 50%, #D7A466 64%, #E9D5B0 100%);
    background-size:260% 100%; background-position:120% 0; -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent; animation:heroShimmer 9s ease-in-out 3s infinite; }
  @keyframes heroShimmer{ 0%{ background-position:120% 0; } 38%{ background-position:-20% 0; } 100%{ background-position:-20% 0; } }

  /* cinematic bars that open as the arrival begins */
  .hero-bar{ position:absolute; left:0; right:0; height:9vh; background:var(--shadow); z-index:7; pointer-events:none; transition:transform 2.2s var(--ease) .15s; }

  /* drifting gold dust: sparse, with depth, and carried by one gentle wind. Each mote has two
     elements so its rise and its sway can animate independently. */
  .dust{ position:absolute; inset:0; overflow:hidden; pointer-events:none; transition:opacity 3.2s ease 2.2s; }
  .dust-tier{ position:absolute; inset:0; transform:translate3d(calc(var(--px,0) * var(--k,1) * -14px), calc(var(--py,0) * var(--k,1) * -9px), 0); transition:transform 1.4s var(--ease); }
  .dust-tier i{ position:absolute; bottom:-16px; left:var(--x); width:var(--s); height:var(--s); opacity:0; will-change:transform, opacity;
    animation:dustRise var(--d) linear var(--dl) infinite; }
  .dust-tier b{ display:block; width:100%; height:100%; border-radius:50%; will-change:transform, opacity;
    background:radial-gradient(circle, rgba(255,240,205,.98) 0%, rgba(235,190,115,.7) 30%, rgba(215,164,102,0) 70%);
    animation:dustSway var(--w) ease-in-out var(--wl) infinite alternate, dustTwinkle var(--t) ease-in-out var(--tl) infinite; }
  @keyframes dustRise{ 0%{ transform:translate3d(0,0,0); opacity:0; } 10%{ opacity:var(--o); } 90%{ opacity:var(--o); } 100%{ transform:translate3d(var(--dx),-112vh,0); opacity:0; } }
  @keyframes dustSway{ from{ transform:translateX(calc(var(--sw) * -1)); } to{ transform:translateX(var(--sw)); } }
  @keyframes dustTwinkle{ 0%,100%{ opacity:1; } 45%{ opacity:.4; } 70%{ opacity:.9; } }
  @media (max-width:639px){ .dust-tier[data-tier="far"] i:nth-child(n+4){ display:none; } .dust-tier[data-tier="near"] i:nth-child(2){ display:none; } }
  .mist-soft{ opacity:.55; }

  /* caption and reel progress */
  .hero-caption{ position:absolute; left:clamp(20px,4vw,48px); bottom:clamp(24px,5vh,40px); z-index:6; display:flex; flex-direction:column; gap:5px; transition:opacity 1.6s ease 1.6s; }
  .hero-cap-title{ font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--stone); text-shadow:0 2px 10px rgba(0,0,0,.8); }
  .hero-cap-sub{ font-size:10px; letter-spacing:.08em; color:rgba(218,216,205,.78); text-shadow:0 2px 10px rgba(0,0,0,.8); }
  .hero-cap-bars{ display:flex; gap:6px; margin-top:6px; }
  .hero-cap-bars i{ display:block; width:28px; height:1px; background:rgba(218,216,205,.32); position:relative; overflow:hidden; }
  .hero-cap-bars b{ position:absolute; inset:0; background:var(--amber); transform:scaleX(0); transform-origin:left; }
  .hero-cap-bars i.done b{ transform:scaleX(1); }
  .hero-cap-bars i.now b{ animation:reelFill 7s linear forwards; }
  /* the four sectors: one centred line on a wide screen; a centred stack on a narrow one.
     (A wrapped line left a dangling dot at its end, which pulled it visibly off-centre.) */
  .hero-cats{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; column-gap:1.1em; row-gap:.1em; width:100%; max-width:980px; line-height:2.1; }
  .hero-cat{ white-space:nowrap; padding-left:.2em; }
  .hero-cat-dot{ color:var(--amber); }
  @media (max-width:899px){ .hero-cats{ flex-direction:column; } .hero-cat-dot{ display:none; } }

  .hero-paused .reel-layer img, .hero-paused .hero-cap-bars i.now b, .hero-paused .dust-tier i, .hero-paused .dust-tier b, .hero-paused .hero-shimmer{ animation-play-state:paused; }
  @media (max-height:480px){ .hero-caption{ display:none; } }
  @media (prefers-reduced-motion: reduce){
    .reel-layer img{ animation:none !important; }
    .dust, .hero-lamp{ display:none; }
    .hero-shimmer{ animation:none; background-position:-20% 0; }
    .hero-scroll, .hero-stage{ transform:none !important; }
    .hero-content{ transform:none !important; opacity:1 !important; }
  }


  /* ---- Hero mist: slow bands of morning mist drifting across the fields, behind the headline ---- */
  .mist{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
  .mist i{ position:absolute; left:-30%; width:160%; top:var(--t); height:var(--h); opacity:var(--o); will-change:transform;
    background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(240,228,204,.9) 0%, rgba(240,228,204,.45) 38%, rgba(240,228,204,0) 72%);
    animation:mistA var(--d) ease-in-out var(--dl) infinite alternate; }
  .mist i[data-dir="b"]{ animation-name:mistB; }
  @keyframes mistA{ from{ transform:translate3d(-9%,0,0) scaleY(1); } to{ transform:translate3d(9%,-4%,0) scaleY(1.18); } }
  @keyframes mistB{ from{ transform:translate3d(8%,-3%,0) scaleY(1.12); } to{ transform:translate3d(-9%,2%,0) scaleY(.95); } }
  .hero-paused .mist i{ animation-play-state:paused; }
  @media (max-width:639px){ .mist i:nth-child(3){ display:none; } }
  @media (prefers-reduced-motion: reduce){ .mist i{ animation:none; } }

  /* ---- Fireflies: they wake only as the page reaches the Invitation, the end of the day ---- */
  .fireflies{ position:absolute; inset:0; overflow:hidden; pointer-events:none; opacity:0; transition:opacity 3.2s ease; }
  .fireflies.on{ opacity:1; }
  .fireflies:not(.on) i{ animation-play-state:paused; }
  .fireflies i{ position:absolute; left:var(--x); top:var(--y); width:var(--s); height:var(--s); margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
    border-radius:50%; opacity:0; will-change:transform, opacity;
    background:radial-gradient(circle, rgba(255,244,205,1) 0%, rgba(240,200,120,.85) 22%, rgba(215,164,102,.28) 48%, rgba(215,164,102,0) 70%);
    animation:ffDrift var(--d) ease-in-out var(--dl) infinite alternate, ffBlink var(--b) ease-in-out var(--bl) infinite; }
  @keyframes ffDrift{ 0%{ transform:translate3d(0,0,0); } 33%{ transform:translate3d(var(--ax),var(--ay),0); } 66%{ transform:translate3d(var(--bx),var(--by),0); } 100%{ transform:translate3d(calc(var(--ax) * -.6),calc(var(--ay) * .5),0); } }
  @keyframes ffBlink{ 0%,100%{ opacity:0; } 18%{ opacity:.95; } 34%{ opacity:.25; } 52%{ opacity:1; } 78%{ opacity:.1; } }
  @media (max-width:639px){ .fireflies i:nth-child(n+9){ display:none; } }
  @media (prefers-reduced-motion: reduce){ .fireflies{ display:none; } }


  /* ---- Case studies: same language as the homepage (dark ground, serif, amber rule, slow reveals) ---- */
  .cs-section{ padding:clamp(60px,10vw,128px) 0; }
  .cs-meta{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(218,216,205,.16); border-bottom:1px solid rgba(218,216,205,.16); margin:0; }
  @media (min-width:900px){ .cs-meta{ grid-template-columns:repeat(4,1fr); } }
  .cs-meta > div{ padding:22px 18px 22px 0; }
  @media (min-width:900px){ .cs-meta > div + div{ padding-left:24px; border-left:1px solid rgba(218,216,205,.12); } }
  .cs-meta dt{ font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--amber); margin:0 0 8px; }
  .cs-meta dd{ margin:0; font-size:15px; line-height:1.55; color:var(--stone); }
  .cs-p{ font-size:16.5px; line-height:1.9; color:var(--sage); margin:0; }
  .cs-p + .cs-p{ margin-top:20px; }
  .cs-h2{ font-size:clamp(30px,4.4vw,60px); line-height:1.1; color:var(--stone); font-weight:400; margin:18px 0 0; }
  .cs-h2 em{ color:var(--amber); font-style:italic; }
  .cs-pull{ margin:0; max-width:900px; font-size:clamp(24px,3.2vw,44px); line-height:1.25; font-style:italic; color:#EDEBE2; }
  .cs-pull::before{ content:''; display:block; width:56px; height:1px; background:var(--amber); margin-bottom:26px; }
  .cs-title{ margin:0; font-weight:400; }
  .cs-ref{ position:absolute; left:12px; bottom:12px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone); background:rgba(19,11,5,.68); padding:4px 8px; }

  .day-wrap{ position:relative; }
  .day-line{ position:relative; height:2px; margin:0 0 30px; background:rgba(218,216,205,.12); display:none; }
  @media (min-width:900px){ .day-line{ display:block; } }
  .day-line b{ position:absolute; inset:0; transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg, #E9B57C 0%, #F3E2B8 24%, #DAD8CD 44%, #D7A466 68%, #7A502E 86%, #56351A 100%); }
  .day-wrap.in .day-line b{ transform:scaleX(1); transition:transform 3.2s var(--ease) .2s; }
  .day-track{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:26px; }
  @media (min-width:900px){ .day-track{ grid-template-columns:repeat(6,1fr); gap:18px; } }
  .day-stop{ display:grid; grid-template-columns:112px 1fr; gap:16px; align-items:center; }
  @media (min-width:900px){ .day-stop{ display:block; } }
  .day-img{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#130B05; }
  .day-n{ display:block; font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); margin:0 0 6px; }
  @media (min-width:900px){ .day-n{ margin:16px 0 8px; } }
  .day-t{ margin:0; font-size:16px; line-height:1.5; color:var(--stone); }
  .day-wrap:not(.in) .day-stop{ opacity:0; }
  .day-wrap.in .day-stop{ animation:riseIn 1s var(--ease) backwards; animation-delay:calc(var(--i) * 150ms + 250ms); }

  .cs-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  @media (min-width:768px){ .cs-gallery{ grid-template-columns:repeat(12,1fr); gap:16px; } }
  .cs-tile{ position:relative; aspect-ratio:4/5; }
  .cs-tile.s7, .cs-tile.s6, .cs-tile.s12{ grid-column:span 2; aspect-ratio:3/2; }
  .cs-tile.s5p{ grid-column:span 2; aspect-ratio:4/5; }
  @media (min-width:768px){
    .cs-tile.s7{ grid-column:span 7; aspect-ratio:4/3; } .cs-tile.s5{ grid-column:span 5; aspect-ratio:4/5; }
    .cs-tile.s4{ grid-column:span 4; aspect-ratio:3/4; } .cs-tile.s6{ grid-column:span 6; aspect-ratio:3/2; } .cs-tile.s12{ grid-column:span 12; aspect-ratio:16/9; } .cs-tile.s5p{ grid-column:span 5; aspect-ratio:4/5; }
  }
  .cs-tile button{ display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }

  .lb{ position:fixed; inset:0; z-index:60; background:rgba(11,6,3,.95); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
    padding:clamp(16px,3vw,40px); animation:riseIn .5s var(--ease) backwards; }
  .lb img{ max-width:min(92vw,1400px); max-height:72vh; object-fit:contain; display:block; }
  .lb-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:min(92vw,1400px); }
  .lb-btn{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); padding:12px 14px; transition:color .4s ease; }
  .lb-btn:hover{ color:var(--amber); }
  .lb-cap{ font-size:13px; line-height:1.6; color:var(--sage); max-width:min(92vw,720px); text-align:center; margin:0; }

  .cs-tri{ display:grid; grid-template-columns:1fr; gap:40px; }
  @media (min-width:768px){ .cs-tri{ grid-template-columns:repeat(3,1fr); gap:28px; } }
  .cs-card-img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:#130B05; }
  .cs-card-n{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); margin:18px 0 6px; display:block; }
  .cs-card-t{ margin:0; font-size:clamp(24px,2.4vw,32px); line-height:1.15; color:var(--stone); font-weight:400; }
  .cs-card-d{ margin:10px 0 0; font-size:15px; line-height:1.8; color:var(--sage); max-width:520px; }
  .cs-stories{ display:grid; grid-template-columns:1fr; gap:56px 40px; }
  @media (min-width:768px){ .cs-stories{ grid-template-columns:1fr 1fr; } }

  .cs-index{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; column-gap:64px; }
  @media (min-width:900px){ .cs-index{ grid-template-columns:1fr 1fr; } }
  .cs-index li{ display:grid; grid-template-columns:44px 1fr; gap:6px; padding:18px 0; border-top:1px solid rgba(218,216,205,.16); }
  .cs-index .n{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); padding-top:4px; }
  .cs-index .t{ margin:0; font-size:clamp(20px,2vw,26px); line-height:1.25; color:var(--stone); font-weight:400; }
  .cs-index .d{ margin:4px 0 0; font-size:14px; line-height:1.7; color:var(--sage); }

  .cs-film{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#130B05;
    clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
  .cs-next{ position:relative; display:block; aspect-ratio:4/3; overflow:hidden; background:#130B05; }
  @media (min-width:768px){ .cs-next{ aspect-ratio:21/9; } }
  .case-in{ animation:riseIn .9s var(--ease) backwards; }


  /* ---- Tolani: two ends of the day, and the all-case-studies index ---- */
  .cs-diptych{ display:grid; grid-template-columns:1fr; gap:48px; }
  @media (min-width:900px){ .cs-diptych{ grid-template-columns:1fr 1fr; gap:36px; } }
  .cs-wash{ position:absolute; inset:0; pointer-events:none; }
  .cs-wash.dawn{ background:linear-gradient(180deg, rgba(196,208,218,.22) 0%, rgba(196,208,218,.04) 50%, rgba(19,11,5,.35) 100%); }
  .cs-wash.dusk{ background:linear-gradient(0deg, rgba(215,164,102,.36) 0%, rgba(215,164,102,.08) 55%, rgba(19,11,5,.25) 100%); }
  .case-index{ list-style:none; margin:26px 0 0; padding:0; }
  .case-row{ display:grid; grid-template-columns:36px 1fr 24px; column-gap:14px; row-gap:2px; align-items:baseline; padding:24px 0; border-top:1px solid rgba(218,216,205,.16); color:var(--stone); transition:transform .7s var(--ease); }
  .case-index li:last-child .case-row{ border-bottom:1px solid rgba(218,216,205,.16); }
  .case-row .n{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); }
  .case-row .name{ font-size:clamp(26px,3.8vw,50px); line-height:1.1; transition:color .6s var(--ease); }
  .case-row .place{ grid-column:2; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--sage); }
  .case-row .arrow{ grid-row:1; grid-column:3; color:var(--amber); transition:transform .6s var(--ease); }
  @media (min-width:900px){
    .case-row{ grid-template-columns:44px 1fr auto 28px; column-gap:24px; }
    .case-row .place{ grid-column:3; grid-row:1; }
    .case-row .arrow{ grid-column:4; }
  }
  @media (hover:hover){
    .case-row:hover{ transform:translateX(12px); }
    .case-row:hover .name{ color:var(--amber); }
    .case-row:hover .arrow{ transform:translateX(6px); }
  }

  .cs-wash.day{ background:linear-gradient(180deg, rgba(240,228,204,.16) 0%, rgba(240,228,204,.03) 55%, rgba(19,11,5,.3) 100%); }
  .cs-wash.night{ background:linear-gradient(180deg, rgba(14,20,40,.6) 0%, rgba(14,20,40,.3) 55%, rgba(19,11,5,.35) 100%); }


  /* ---- Image grades: labels, the contact sheet used for client-grade delivery, and the comparison ---- */
  .grade-note{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 0 0; font-size:13.5px; line-height:1.6; color:var(--sage); }
  .grade-chip{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); border:1px solid rgba(215,164,102,.5); padding:4px 9px; }
  .cs-sheet{ gap:6px !important; grid-template-columns:repeat(2,1fr) !important; }
  @media (min-width:768px){ .cs-sheet{ grid-template-columns:repeat(4,1fr) !important; } }
  .cs-sheet .cs-tile{ grid-column:auto !important; aspect-ratio:3/2 !important; }
  .cs-fn{ position:absolute; top:8px; left:10px; z-index:2; font-size:10px; letter-spacing:.16em; color:var(--stone); text-shadow:0 1px 8px rgba(0,0,0,.9); }
  .cmp{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#130B05; }
  .cmp-line{ position:absolute; top:0; bottom:0; width:1px; background:var(--amber); pointer-events:none; box-shadow:0 0 12px rgba(215,164,102,.6); }
  .cmp-range{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
  .cmp-range:focus-visible{ opacity:.0; outline:1.5px solid var(--amber); outline-offset:-3px; }


  /* ---- 12 Ngam Duphli: the four lines, and the Day / Night control ---- */
  .cs-lines{ list-style:none; margin:0; padding:0; }
  .cs-lines li{ display:grid; grid-template-columns:44px 1fr; gap:8px; padding:clamp(22px,3vw,36px) 0; border-top:1px solid rgba(218,216,205,.16); }
  .cs-lines li:last-child{ border-bottom:1px solid rgba(218,216,205,.16); }
  .cs-lines .n{ font-family:'Cormorant Garamond',serif; font-size:15px; color:var(--amber); padding-top:10px; }
  .cs-lines p{ margin:0; font-size:clamp(26px,4.2vw,58px); line-height:1.15; font-style:italic; color:#EDEBE2; }
  .dn{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#130B05; }
  .dn-night{ position:absolute; inset:0; transition:opacity 1.8s ease; }
  .dn-switch{ position:absolute; top:16px; right:16px; z-index:3; display:flex; align-items:center; gap:12px; padding:9px 14px; color:var(--stone);
    background:rgba(19,11,5,.72); border:1px solid rgba(215,164,102,.55); }
  .dn-opt{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.55; transition:opacity .5s ease, color .5s ease; }
  .dn-opt.on{ opacity:1; color:var(--amber); }
  .dn-track{ position:relative; width:34px; height:16px; border:1px solid rgba(218,216,205,.5); border-radius:10px; }
  .dn-track i{ position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--amber); transition:transform .6s var(--ease); }


  /* ---- The Great Room / Industrious: location strips and the brand overlap ---- */
  .cs-loc-frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .cs-loc-frame{ position:relative; aspect-ratio:4/5; overflow:hidden; background:#130B05; }
  .cs-fine{ margin:12px 0 0; font-size:12px; color:rgba(218,216,205,.7); }
  .cs-loc-wide{ display:grid; grid-template-columns:1fr; gap:10px; }
  .cs-loc-wide .cs-loc-frame{ aspect-ratio:var(--r, 3/2); }
  .cs-bleed{ display:grid; grid-template-columns:1fr; gap:10px; width:100%; }
  .cs-bleed-item{ position:relative; width:100%; overflow:hidden; background:#130B05; }
  .cs-overlap{ display:grid; grid-template-columns:1fr; gap:14px; }
  @media (min-width:900px){ .cs-overlap{ grid-template-columns:1fr 1.15fr 1fr; gap:0; } }
  .cs-ov{ padding:clamp(24px,3vw,40px) clamp(22px,2.6vw,34px); border:1px solid rgba(218,216,205,.18); }
  .cs-ov.mid{ border-color:rgba(215,164,102,.6); background:rgba(215,164,102,.07); }
  @media (min-width:900px){ .cs-ov + .cs-ov{ margin-left:-1px; } .cs-ov.mid{ position:relative; z-index:1; } }

  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0; }

  /* refined, reusable hover language: a slow, deliberate brighten + letter-spacing
     widen, used for the hero's scroll cue and other quiet text links site-wide */
  /* hover language for text links: colour shift, a small lift, and an underline that sweeps
     across. (Letter-spacing is deliberately not animated: it reflows the line on every frame.) */
  .link-elegant{ transition: color .45s var(--ease), transform .45s var(--ease), border-color .45s ease; }
  .link-elegant:hover{ color:var(--amber) !important; border-color:var(--amber) !important; }
  .link-sweep{ position:relative; display:inline-block; transition:color .45s var(--ease), transform .45s var(--ease); }
  .link-sweep::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--stone);
    transform:scaleX(0); transform-origin:right; transition:transform .7s var(--ease); }
  .link-sweep-dark::after{ background:var(--espresso); }
  @media (hover:hover){
    .link-sweep:hover{ color:var(--stone) !important; transform:translateY(-1px); }
    .link-sweep-dark:hover{ color:var(--espresso) !important; }
    .link-sweep:hover::after{ transform:scaleX(1); transform-origin:left; }
  }
  .desk-cta:active, .desk-opt:active{ transform:scale(.985); }
  /* the client wall arrives one logo at a time */
  .logo-wall .logo-cell{ opacity:0; transform:translateY(10px); }
  .logo-wall.in .logo-cell{ opacity:1; transform:none;
    transition:opacity 1.1s var(--ease) calc(var(--i,0) * 55ms), transform 1.2s var(--ease) calc(var(--i,0) * 55ms); }

  .scroll-cue-label{ font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:var(--stone);
    transition:letter-spacing .5s ease, color .5s ease; }
  .scroll-cue:hover .scroll-cue-label{ letter-spacing:.38em; color:var(--amber); }
  .scroll-cue-rail{ transition: opacity .5s ease; }
  .scroll-cue:hover .scroll-cue-rail{ opacity:1; }
  .scroll-cue-dot{ animation: scrollCueTravel 2.4s ease-in-out infinite; }
  @keyframes scrollCueTravel{
    0%{ transform:translateY(0) scale(1); opacity:0; }
    12%{ opacity:1; }
    50%{ transform:translateY(16px) scale(1.15); }
    88%{ opacity:1; }
    100%{ transform:translateY(32px) scale(1); opacity:0; }
  }
  @media (prefers-reduced-motion: reduce){
    .scroll-cue-dot{ animation:none; opacity:.85; top:16px !important; }
  }
  /* on very short viewports (a phone in landscape) the hero's text stack can run
     close to the bottom edge — the scroll cue is a progressive enhancement, not
     core content, so it steps aside rather than risk overlapping the CTA */
  @media (max-height: 480px) {
    button.scroll-cue { display:none; }
  }

  /* on short viewports (a phone in landscape, or one with a lot of browser chrome),
     the hero's text stack can need more room than the screen has — rather than let
     it overflow past the image into a bare dark gap, tighten the rhythm so it fits */
  @media (max-height: 700px) {
    .hero-kicker { margin-bottom: 10px !important; }
    .hero-headline { font-size: clamp(26px, 7.5vw, 60px) !important; line-height: 1.08 !important; }
    .hero-sub { margin-top: 12px !important; font-size: 14px !important; }
    .hero-cats { margin-top: 10px !important; font-size: 9.5px !important; line-height: 1.8 !important; }
    .hero-cta { margin-top: 16px !important; }
  }

  .hairline{ height:1px; background:linear-gradient(90deg, transparent, rgba(218,216,205,.3), transparent); }

  .scrollbar-none::-webkit-scrollbar{display:none;}

*, ::before, ::after{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgb(59 130 246 / 0.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/* ! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com */*,::after,::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}::after,::before{--tw-content:''}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.pointer-events-none{pointer-events:none}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.sticky{position:sticky}.-inset-3{inset:-0.75rem}.inset-0{inset:0px}.inset-x-0{left:0px;right:0px}.inset-y-0{top:0px;bottom:0px}.-bottom-1{bottom:-0.25rem}.-bottom-4{bottom:-1rem}.-right-4{right:-1rem}.bottom-0{bottom:0px}.bottom-10{bottom:2.5rem}.bottom-2{bottom:0.5rem}.bottom-24{bottom:6rem}.bottom-3{bottom:0.75rem}.bottom-5{bottom:1.25rem}.bottom-6{bottom:1.5rem}.bottom-8{bottom:2rem}.left-0{left:0px}.left-1\/2{left:50%}.left-2{left:0.5rem}.left-3{left:0.75rem}.left-5{left:1.25rem}.left-6{left:1.5rem}.right-0{right:0px}.right-6{right:1.5rem}.right-8{right:2rem}.top-0{top:0px}.top-6{top:1.5rem}.top-8{top:2rem}.bottom-9{bottom:2.25rem}.z-0{z-index:0}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-40{z-index:40}.order-1{order:1}.order-2{order:2}.mx-auto{margin-left:auto;margin-right:auto}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-14{margin-bottom:3.5rem}.mb-16{margin-bottom:4rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mt-1{margin-top:0.25rem}.mt-10{margin-top:2.5rem}.mt-2{margin-top:0.5rem}.mt-24{margin-top:6rem}.mt-3{margin-top:0.75rem}.mt-4{margin-top:1rem}.mt-5{margin-top:1.25rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.aspect-\[4\/5\]{aspect-ratio:4/5}.h-\[1px\]{height:1px}.h-full{height:100%}.w-0{width:0px}.w-full{width:100%}.max-w-\[1080px\]{max-width:1080px}.max-w-\[1300px\]{max-width:1300px}.max-w-\[1400px\]{max-width:1400px}.max-w-\[900px\]{max-width:900px}.max-w-lg{max-width:32rem}.max-w-md{max-width:28rem}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1\.5{gap:0.375rem}.gap-14{gap:3.5rem}.gap-16{gap:4rem}.gap-2{gap:0.5rem}.gap-24{gap:6rem}.gap-3{gap:0.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-9{gap:2.25rem}.gap-x-8{column-gap:2rem}.gap-y-3{row-gap:0.75rem}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:9999px}.px-2{padding-left:0.5rem;padding-right:0.5rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.text-left{text-align:left}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xs{font-size:0.75rem;line-height:1rem}.uppercase{text-transform:uppercase}.tracking-widest{letter-spacing:0.1em}.opacity-0{opacity:0}.opacity-30{opacity:0.3}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.duration-700{transition-duration:700ms}.duration-\[1200ms\]{transition-duration:1200ms}.duration-\[1400ms\]{transition-duration:1400ms}.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.group:hover .group-hover\:w-full{width:100%}.group:hover .group-hover\:translate-x-1\.5{--tw-translate-x:0.375rem;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:scale-150{--tw-scale-x:1.5;--tw-scale-y:1.5;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.group:hover .group-hover\:opacity-100{opacity:1}@media (min-width: 640px){.sm\:block{display:block}.sm\:aspect-\[16\/10\]{aspect-ratio:16/10}.sm\:w-auto{width:auto}}@media (min-width: 768px){.md\:-right-8{right:-2rem}.md\:bottom-10{bottom:2.5rem}.md\:bottom-28{bottom:7rem}.md\:left-10{left:2.5rem}.md\:left-16{left:4rem}.md\:right-16{right:4rem}.md\:order-1{order:1}.md\:order-2{order:2}.md\:col-span-4{grid-column:span 4 / span 4}.md\:col-span-5{grid-column:span 5 / span 5}.md\:col-span-7{grid-column:span 7 / span 7}.md\:col-span-8{grid-column:span 8 / span 8}.md\:mb-20{margin-bottom:5rem}.md\:mt-32{margin-top:8rem}.md\:flex{display:flex}.md\:hidden{display:none}.md\:aspect-\[21\/9\]{aspect-ratio:21/9}.md\:grid-cols-12{grid-template-columns:repeat(12, minmax(0, 1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}.md\:gap-12{gap:3rem}.md\:gap-32{gap:8rem}.md\:gap-5{gap:1.25rem}.md\:gap-8{gap:2rem}.md\:px-10{padding-left:2.5rem;padding-right:2.5rem}.md\:pb-10{padding-bottom:2.5rem}}