/* =========================================================
   The HandCraft Atelier — "Ivory Atelier"
   Ivory canvas · navy ink · antique gold thread · didone type
   ========================================================= */

/* ---------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------- */
:root{
  /* --- surface ramp (ivory) --- */
  --ink:#FBF4E8;              /* page canvas */
  --ink-2:#F6EDDC;            /* raised panel */
  --ink-3:#F1E5CF;            /* panel hover */
  --surface:rgba(16,35,71,.028);
  --surface-2:rgba(16,35,71,.055);
  --surface-3:rgba(16,35,71,.085);

  /* --- navy --- */
  --navy:#0C1B3C;
  --navy-2:#071228;
  --navy-hi:#16294F;
  --on-navy:#F7EFE0;
  --on-gold:#10224A;          /* text that sits on a gold fill */

  /* --- lines --- */
  --line:rgba(12,27,60,.20);
  --line-2:rgba(140,105,32,.60);
  --line-soft:rgba(12,27,60,.14);

  /* --- brand ---
     --gold      fills, rules, icon strokes
     --gold-deep gold used as TEXT (6.3:1 on the ivory canvas) */
  --gold:#A87F22;
  --gold-hi:#D9B65E;
  --gold-deep:#775711;
  --violet:#2F4F8F;           /* secondary accent — royal blue */
  --blue:#4E8FF5;
  --blue-hi:#93C4FF;
  --wa:#1FA855;
  --danger:#B4402C;

  /* --- text (all >= 6:1 on --ink) --- */
  --text:#0C1B3C;
  --text-2:#2E3A52;
  --text-3:#4B5567;

  /* --- shadow --- */
  --glow-gold:0 0 0 1px rgba(184,141,52,.35), 0 18px 44px -20px rgba(184,141,52,.55);
  --glow-soft:0 22px 60px -32px rgba(16,35,71,.42);
  --glow-lift:0 30px 72px -34px rgba(16,35,71,.45), 0 0 0 1px rgba(184,141,52,.26);

  /* --- type --- */
  --ff-d:"Playfair Display","Georgia","Times New Roman",serif;
  --ff-b:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --ff-s:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;

  --fs-xs:.75rem;
  --fs-sm:.875rem;
  --fs-base:1.0625rem;
  --fs-lg:1.1875rem;
  --fs-h3:1.1875rem;
  --fs-h2:clamp(2.05rem,1.15rem + 3.1vw,4rem);
  --fs-h1:clamp(2.7rem,1.5rem + 5vw,6rem);

  /* --- space (8pt rhythm) --- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;
  --s-9:96px; --s-10:128px;
  --sec-y:clamp(72px,9vw,140px);

  /* --- radius --- */
  --r-xs:8px; --r-sm:12px; --r:18px; --r-lg:26px; --r-pill:999px;

  /* --- motion --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:180ms;
  --t:320ms;
  --t-slow:620ms;

  /* --- layout --- */
  --nav-h:86px;
  --announce-h:34px;

  /* --- z-scale --- */
  --z-cosmos:0;
  --z-body:1;
  --z-fab:60;
  --z-nav:80;
  --z-drawer:90;
  --z-lb:100;
}

/* ---------------------------------------------------------
   2. RESET / BASE
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
}

body{
  margin:0;
  min-height:100dvh;
  font-family:var(--ff-b);
  font-size:var(--fs-base);
  font-weight:450;
  line-height:1.62;
  color:var(--text);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;}

img{max-width:100%;height:auto;display:block;}
svg{display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
ul,ol{margin:0;padding:0;list-style:none;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
strong{font-weight:650;color:var(--text);}

h1,h2,h3,h4{margin:0;line-height:1.08;}
h1,h2{
  font-family:var(--ff-d);
  font-weight:600;
  letter-spacing:-.015em;
  font-optical-sizing:auto;
}
h3,h4{
  font-family:var(--ff-b);
  font-weight:700;
  letter-spacing:-.005em;
  line-height:1.28;
}

::selection{background:var(--gold);color:#FFF9EC;}

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

.sprite{position:absolute;width:0;height:0;overflow:hidden;}

.skip{
  position:fixed;top:-100px;left:var(--s-4);z-index:200;
  padding:.75em 1.25em;border-radius:var(--r-pill);
  background:var(--navy);color:var(--on-navy);
  font-size:var(--fs-sm);font-weight:500;
  transition:top var(--t-fast) var(--ease);
}
.skip:focus{top:var(--s-4);}

/* ---------------------------------------------------------
   3. LAYOUT UTILITIES
   --------------------------------------------------------- */
.wrap{width:min(1280px,calc(100% - 2 * clamp(20px,5vw,56px)));margin-inline:auto;}
.wrap--narrow{width:min(820px,calc(100% - 2 * clamp(20px,5vw,56px)));}

.sec{position:relative;z-index:var(--z-body);padding-block:var(--sec-y);}

.sec__head{max-width:62ch;margin-bottom:clamp(40px,5vw,72px);}
.sec__head--split{
  max-width:none;display:grid;gap:var(--s-6);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
}
.sec__title{font-size:var(--fs-h2);line-height:1.18;margin-bottom:var(--s-5);text-wrap:balance;}
.sec__title:last-child{margin-bottom:0;}
.sec__sub{color:var(--text-2);max-width:56ch;font-size:var(--fs-lg);line-height:1.6;}

.grad{
  color:var(--gold-deep);     /* fallback: never render invisible text */
  font-style:italic;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad{
    background:linear-gradient(96deg,var(--gold-deep) 0%,#5F4508 52%,var(--gold-deep) 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;
  }
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.7em;
  margin:0 0 var(--s-5);
  font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow i{
  width:26px;height:1px;flex:none;
  background:linear-gradient(90deg,transparent,var(--gold));
}

/* section divider with a stitch mark */
.rule{
  position:relative;z-index:var(--z-body);
  display:flex;align-items:center;justify-content:center;
  width:min(1280px,calc(100% - 2 * clamp(20px,5vw,56px)));
  margin-inline:auto;
}
.rule::before,.rule::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,var(--line-2));
}
.rule::after{background:linear-gradient(270deg,transparent,var(--line-2));}
.rule span{padding-inline:var(--s-4);color:var(--gold-deep);font-size:.7rem;opacity:.8;}

/* reveal */
.reveal{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
}
.reveal.in{opacity:1;transform:none;}

/* ---------------------------------------------------------
   4. IVORY BACKDROP
   --------------------------------------------------------- */
.cosmos{
  position:fixed;inset:0;z-index:var(--z-cosmos);
  pointer-events:none;overflow:hidden;
  background:
    radial-gradient(120% 85% at 50% -10%,#FFFBF3 0%,transparent 58%),
    radial-gradient(90% 60% at 100% 100%,#F3E7D2 0%,transparent 62%),
    var(--ink);
}
/* faint scattered "french knots" instead of stars */
.cosmos__stars{position:absolute;inset:0;width:100%;height:100%;opacity:.6;}

.cosmos__glow{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;}
.cosmos__glow--gold{
  width:52vw;height:52vw;max-width:760px;max-height:760px;
  top:-14vw;right:-10vw;
  background:radial-gradient(circle,rgba(184,141,52,.14),transparent 68%);
}
.cosmos__glow--violet{
  width:46vw;height:46vw;max-width:660px;max-height:660px;
  bottom:6vh;left:-14vw;
  background:radial-gradient(circle,rgba(16,35,71,.08),transparent 68%);
}

/* woven-cloth texture — the ivory reads as linen, not flat paint */
.cosmos__weave{
  position:absolute;inset:0;opacity:.75;
  background-image:
    repeating-linear-gradient(90deg,rgba(16,35,71,.028) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(0deg,rgba(16,35,71,.028) 0 1px,transparent 1px 5px);
  mask-image:radial-gradient(120% 90% at 50% 20%,#000 0%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 90% at 50% 20%,#000 0%,transparent 78%);
}

/* ---------------------------------------------------------
   5. ANNOUNCE BAR
   --------------------------------------------------------- */
.announce{
  position:relative;z-index:var(--z-nav);
  min-height:var(--announce-h);
  display:flex;align-items:center;
  border-bottom:1px solid var(--line-soft);
  background:rgba(246,237,220,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.announce__in{
  display:flex;align-items:center;justify-content:center;
  gap:var(--s-3);flex-wrap:wrap;
  font-size:var(--fs-xs);letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);
}
.announce__item{display:inline-flex;align-items:center;gap:.6em;}
.announce__sep{color:var(--gold);opacity:.55;}
.pulse{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(184,141,52,.55);
  animation:pulse 2.6s var(--ease) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(184,141,52,.5);}
  70%{box-shadow:0 0 0 8px rgba(184,141,52,0);}
  100%{box-shadow:0 0 0 0 rgba(184,141,52,0);}
}

/* ---------------------------------------------------------
   6. NAV
   --------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:var(--z-nav);
  border-bottom:1px solid transparent;
  transition:background var(--t) var(--ease),border-color var(--t) var(--ease),
             backdrop-filter var(--t) var(--ease);
}
.nav.stuck{
  background:rgba(251,244,232,.82);
  backdrop-filter:blur(18px) saturate(130%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom-color:var(--line);
}
.nav__in{
  min-height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
}

/* brand — the logo is a wordless mark, so the name sits beside it as text */
.brand{display:inline-flex;align-items:center;gap:var(--s-3);}
.brand__mark{
  display:block;flex:none;
  width:clamp(56px,5.2vw,70px);height:auto;
}
.brand__txt{display:flex;flex-direction:column;gap:.34em;line-height:1;}

/* "The" rides small and italic on the shoulder of the didone name */
.brand__name{
  font-family:var(--ff-d);font-weight:600;
  font-size:clamp(1.18rem,1.7vw,1.5rem);
  letter-spacing:.005em;color:var(--text);white-space:nowrap;
}
.brand__name i{
  font-style:italic;font-weight:400;
  font-size:.62em;letter-spacing:.02em;
  color:var(--gold-deep);
  margin-right:.3em;
  vertical-align:.22em;
}

/* ATELIER, flanked by the same hairline gold rules used under the headline */
.brand__sub{
  display:flex;align-items:center;gap:.6em;
  font-style:normal;font-weight:600;
  font-size:clamp(.58rem,.62vw,.68rem);
  letter-spacing:.36em;text-transform:uppercase;
  color:var(--gold-deep);
}
.brand__sub span{padding-left:.36em;}   /* optical: absorb the trailing track */
.brand__sub::before,.brand__sub::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(184,141,52,.75));
}
.brand__sub::after{
  background:linear-gradient(270deg,transparent,rgba(184,141,52,.75));
}

/* links */
.nav__links{display:flex;align-items:center;gap:var(--s-2);}
.nav__links > a:not(.btn){
  position:relative;
  padding:.6em .85em;border-radius:var(--r-xs);
  font-size:var(--fs-sm);font-weight:400;
  color:var(--text-2);
  transition:color var(--t-fast) var(--ease);
}
.nav__links > a:not(.btn)::after{
  content:"";position:absolute;left:.85em;right:.85em;bottom:.32em;
  height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--t) var(--ease);
}
.nav__links > a:not(.btn):hover{color:var(--text);}
.nav__links > a:not(.btn):hover::after,
.nav__links > a.active::after{transform:scaleX(1);}
.nav__links > a.active{color:var(--gold);}
.nav__cta{margin-left:var(--s-3);}

/* burger */
.nav__toggle{
  display:none;
  width:44px;height:44px;place-items:center;
  border-radius:var(--r-xs);border:1px solid var(--line);
  background:var(--surface);
}
.nav__bars{display:grid;gap:5px;width:18px;}
.nav__bars i{
  display:block;height:1.5px;width:100%;background:var(--text);
  border-radius:2px;transition:transform var(--t) var(--ease),opacity var(--t-fast) var(--ease);
}
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(2){opacity:0;}
.nav__toggle[aria-expanded="true"] .nav__bars i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}

.nav__scrim{
  position:fixed;inset:0;z-index:var(--z-drawer);
  background:rgba(10,23,51,.42);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}

/* ---------------------------------------------------------
   7. BUTTONS
   --------------------------------------------------------- */
.btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:.65em;
  min-height:44px;padding:.85em 1.6em;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--ff-b);font-size:var(--fs-sm);font-weight:500;
  letter-spacing:.03em;
  white-space:nowrap;cursor:pointer;
  touch-action:manipulation;
  transition:transform var(--t) var(--ease-out),
             box-shadow var(--t) var(--ease),
             background var(--t) var(--ease),
             border-color var(--t) var(--ease),
             color var(--t) var(--ease);
}
.btn .ico{width:1.15em;height:1.15em;flex:none;}
.btn .ico--chev{width:.85em;height:.85em;opacity:.85;}
/* the supplied WhatsApp mark is a raster badge — nudged up slightly because
   its own glow padding makes it optically small next to the label */
.btn .ico--wa{width:1.45em;height:1.45em;object-fit:contain;}
.btn--sm{min-height:38px;padding:.6em 1.15em;font-size:var(--fs-xs);}
.btn--lg{min-height:52px;padding:1em 2em;font-size:var(--fs-base);}
.btn--block{display:flex;width:100%;}

/* primary — navy, matching the reference Explore Our Work button */
.btn--navy{
  background:linear-gradient(150deg,var(--navy-hi),var(--navy) 55%,var(--navy-2));
  color:var(--on-navy);
  border-color:rgba(184,141,52,.45);
  border-radius:var(--r-sm);
  box-shadow:0 14px 34px -16px rgba(16,35,71,.75);
}
/* hero buttons stay put — no hover shift, no magnetic drift */
.btn--navy:active{transform:scale(.985);}

/* secondary — hairline gold on ivory, the Get Custom Design outline */
.btn--gilt{
  background:rgba(255,252,245,.6);
  border-color:rgba(184,141,52,.55);
  border-radius:var(--r-sm);
  color:var(--navy);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--gilt:active{transform:scale(.985);}

/* gold fill carries navy ink — white on this gold is only ~2.6:1 */
.btn--gold{
  background:linear-gradient(140deg,#F0D89C,#DDBB68 52%,#C49B3C);
  color:var(--on-gold);
  box-shadow:0 12px 30px -14px rgba(138,104,25,.7);
}
.btn--gold:hover{
  background:linear-gradient(140deg,#F6E2B2,#E5C77C 52%,#CDA648);
  box-shadow:0 18px 44px -14px rgba(138,104,25,.85),0 0 0 1px rgba(184,141,52,.6);
}
.btn--gold:active{transform:scale(.975);}

.btn--ghost{
  border-color:var(--line-2);
  color:var(--navy);
  background:rgba(255,252,245,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.btn--ghost:hover{border-color:var(--gold);background:#FFFCF5;color:var(--gold-deep);}
.btn--ghost:active{transform:scale(.975);}

.btn--outline{
  border-color:var(--line);
  color:var(--text-2);
}
.btn--outline:hover{border-color:var(--gold);color:var(--gold-deep);background:var(--surface);}
.btn--outline:active{transform:scale(.975);}

/* ---------------------------------------------------------
   8. HERO
   --------------------------------------------------------- */
.hero{
  position:relative;z-index:var(--z-body);
  padding-block:clamp(40px,5vw,76px) clamp(96px,11vw,168px);
  overflow:hidden;
  isolation:isolate;
}
.hero__in{
  display:grid;
  gap:clamp(28px,3vw,48px);
  grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:center;
}

/* ---- decorative field ---------------------------------- */
.hero__deco{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;}

.hero__sprig{
  position:absolute;color:var(--gold);opacity:.26;
  width:clamp(150px,17vw,260px);height:auto;
}
.hero__sprig--tl{top:clamp(56px,7vw,116px);left:clamp(-6px,.5vw,14px);opacity:.17;}

.hero__thread{
  position:absolute;
  top:clamp(70px,8vw,128px);left:clamp(180px,26vw,430px);
  width:min(46vw,620px);height:clamp(120px,15vw,215px);
  color:var(--gold);opacity:.5;overflow:visible;
}
.thread__line{
  stroke-dasharray:7 7;
  stroke-dashoffset:0;
  animation:threadDrift 30s linear infinite;
}
@keyframes threadDrift{to{stroke-dashoffset:-280;}}

.hero__spark{
  position:absolute;color:var(--gold);opacity:.5;
  font-size:clamp(10px,1vw,15px);line-height:1;
  animation:twinkle 4.2s var(--ease) infinite;
}
.hero__spark--1{top:20%;left:48%;}
.hero__spark--2{top:33%;left:44%;font-size:1.4em;animation-delay:1.1s;}
.hero__spark--3{top:52%;left:43%;animation-delay:2.3s;}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(.85);}50%{opacity:.7;transform:scale(1);}}

/* navy wave with a gold running stitch riding its edge */
.hero__wave{
  position:absolute;left:0;right:0;bottom:-1px;
  height:clamp(120px,16vw,240px);
  isolation:isolate;
}
.hero__wave .wave__svg{width:100%;height:100%;display:block;}
.wave__fill{fill:var(--navy);}
.wave__stitch{stroke:var(--gold-hi);opacity:.65;}
.hero__wave-needle{
  position:absolute;
  left:clamp(84px,13vw,225px);bottom:1%;
  width:clamp(120px,14vw,225px);height:auto;
  /* screen drops the photo black out against the navy underneath */
  mix-blend-mode:screen;
  filter:brightness(1.12) saturate(1.05);
  pointer-events:none;
}
.hero__wave-leaf{
  position:absolute;
  left:clamp(10px,3vw,64px);bottom:4px;
  width:clamp(74px,8vw,124px);height:auto;
  color:var(--gold-hi);opacity:.55;
}

/* ---- copy ---------------------------------------------- */
.hero__copy{position:relative;}

.hero__eyebrow{
  margin:0 0 var(--s-5);
  font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy);
}

.hero__title{
  display:grid;
  font-size:clamp(2.3rem,1rem + 3.55vw,4.2rem);
  font-weight:400;
  line-height:1.04;
  color:var(--navy);
  margin-bottom:var(--s-4);
}
.hero__line{
  display:block;
  opacity:0;transform:translate3d(0,.34em,0);
  animation:lineUp 900ms var(--ease-out) forwards;
  animation-delay:calc(120ms + var(--l) * 130ms);
}
@keyframes lineUp{to{opacity:1;transform:none;}}

/* Stitch — gold calligraphy, sized up so it sits with the didone */
.hero__title .script{
  font-family:var(--ff-s);
  font-style:normal;font-weight:400;
  font-size:1.34em;line-height:.8;
  padding-right:.08em;
  color:var(--gold);
  background:linear-gradient(102deg,var(--gold-hi) 4%,var(--gold) 40%,var(--gold-deep) 96%);
  -webkit-background-clip:text;background-clip:text;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero__title .script{-webkit-text-fill-color:transparent;}
}
/* Beautiful — solid antique gold at the same didone weight */
.hero__title .gilt{
  font-weight:600;
  color:var(--gold-deep);
}

/* ornamental rule under the headline */
.orn{display:flex;align-items:center;gap:var(--s-3);max-width:480px;margin-bottom:var(--s-5);}
.orn__rule{
  height:1px;flex:1;
  background:linear-gradient(90deg,transparent,rgba(184,141,52,.6));
}
.orn__rule:last-child{background:linear-gradient(270deg,transparent,rgba(184,141,52,.6));}
.orn__mark{width:64px;height:16px;flex:none;color:var(--gold);}

.hero__lead{
  max-width:min(46ch,100%);font-size:var(--fs-base);color:var(--text-2);
  line-height:1.6;
  margin-bottom:var(--s-6);
}
.hero__lead strong{color:var(--gold-deep);font-weight:500;}

.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-6);}

/* ---- trust strip --------------------------------------- */
.hero__trust{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,1.8vw,26px);
  margin:0;
}
.trust{
  display:flex;align-items:center;gap:.7em;
  min-width:0;
}
.trust + .trust{
  padding-left:clamp(14px,1.8vw,26px);
  border-left:1px solid rgba(184,141,52,.42);
  min-height:2.9em;
}
.trust__ico{
  width:clamp(26px,2.4vw,32px);height:clamp(26px,2.4vw,32px);
  flex:none;color:var(--gold);
}
.trust__txt{
  font-size:var(--fs-xs);line-height:1.35;
  letter-spacing:.02em;color:var(--navy);
}

/* ---- art collage --------------------------------------- */
.hero__art{
  position:relative;
  aspect-ratio:1/.92;
  min-height:430px;
  margin-right:clamp(-56px,-3vw,0px);
}
/* the navy fabric the pieces are laid on */
.hero__drape{
  position:absolute;z-index:0;
  top:-8%;right:-8%;width:104%;height:100%;
  background:url("assets/hero-section-background.webp") 64% 46% / cover no-repeat;
  /* feather every edge so the cloth settles into the ivory instead of
     ending on a hard rectangle */
  mask-image:radial-gradient(58% 56% at 54% 48%,#000 46%,rgba(0,0,0,.55) 68%,transparent 86%);
  -webkit-mask-image:radial-gradient(58% 56% at 54% 48%,#000 46%,rgba(0,0,0,.55) 68%,transparent 86%);
}

.hero__hoop,.hero__card{
  position:absolute;margin:0;
  overflow:hidden;
  will-change:transform;
  background:var(--ink-2);
}
.hero__hoop img,.hero__card img{width:100%;height:100%;object-fit:cover;}

/* the big centre hoop */
.hero__hoop{
  border-radius:50%;
  border:6px solid #E4C89A;
  box-shadow:0 34px 78px -30px rgba(10,23,51,.65),0 0 0 1px rgba(184,141,52,.35);
}
.hero__hoop--main{width:58%;top:2%;left:8%;aspect-ratio:1;z-index:3;}
.hero__hoop--top{width:28%;top:-2%;right:-2%;aspect-ratio:1;z-index:2;border-width:5px;}

/* the framed cards, white-matted like the reference */
.hero__card{
  border-radius:14px;
  padding:7px;
  background:#FFFDF8;
  box-shadow:0 26px 58px -26px rgba(10,23,51,.7),0 0 0 1px rgba(16,35,71,.06);
  z-index:4;
}
.hero__card img{border-radius:8px;}
/* six pieces on one drape: the three lower cards run left-to-right along the
   bottom, and the sixth sits on the right in the channel between the small
   hoop above it and the card below. Positions are tuned so cards only ever
   overlap the centre hoop — never each other. */
.hero__card--a{width:29%;bottom:9%;left:-3%;aspect-ratio:1/1.05;}
.hero__card--b{width:27%;bottom:3%;right:2%;aspect-ratio:1/1.05;}
.hero__card--c{width:27%;bottom:0;left:30%;aspect-ratio:1/1.05;z-index:5;}
.hero__card--d{width:24%;top:33%;right:-2%;aspect-ratio:1/1.05;z-index:4;}

/* ---- floating badge ------------------------------------ */
.hero__badge{
  grid-column:2;
  justify-self:center;
  z-index:6;
  margin-top:calc(-1 * clamp(8px,2.6vw,40px));
  display:inline-flex;align-items:center;gap:.85em;
  margin:clamp(4px,1vw,18px) 0 0;
  padding:.85em 1.6em;
  border-radius:var(--r-sm);
  background:linear-gradient(150deg,var(--navy-hi),var(--navy) 60%,var(--navy-2));
  border:1px solid rgba(184,141,52,.4);
  box-shadow:0 22px 52px -24px rgba(7,18,40,.85);
  color:var(--on-navy);
  font-size:var(--fs-sm);
  text-align:left;
  isolation:isolate;
}
/* the needle is a photo on black — screen blending drops the black out
   against the navy behind it */
.hero__badge-ico{
  width:58px;height:39px;flex:none;
  object-fit:cover;border-radius:4px;
  mix-blend-mode:screen;
  filter:brightness(1.35) saturate(1.1);
}
.hero__badge em{font-family:var(--ff-s);font-style:normal;font-size:1.35em;color:var(--gold-hi);}

/* ---------------------------------------------------------
   9. MARQUEE
   --------------------------------------------------------- */
.marquee{
  position:relative;z-index:var(--z-body);
  padding-block:var(--s-5);
  border-block:1px solid var(--line);
  background:linear-gradient(90deg,rgba(184,141,52,.07),transparent 30%,transparent 70%,rgba(16,35,71,.05));
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex;align-items:center;gap:var(--s-6);
  width:max-content;
  will-change:transform;
  /* the row is duplicated in the markup, so -50% is a seamless loop */
  animation:marqueeDrift 96s linear infinite;
}
@keyframes marqueeDrift{to{transform:translate3d(-50%,0,0);}}
.marquee__track span{
  font-family:var(--ff-d);font-style:italic;font-weight:400;
  font-size:clamp(1.1rem,.85rem + .9vw,1.75rem);
  color:var(--navy);white-space:nowrap;
}
.marquee__track i{color:var(--gold-deep);font-size:.65em;font-style:normal;opacity:.8;}

/* ---------------------------------------------------------
   10. SERVICES
   --------------------------------------------------------- */
.svc__grid{
  display:grid;gap:var(--s-4);
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.svc{
  position:relative;
  display:flex;flex-direction:column;
  padding:clamp(24px,2.4vw,34px);
  border-radius:var(--r);
  border:1px solid var(--line-soft);
  background:linear-gradient(160deg,#FFFDF7,rgba(255,253,247,.72) 60%);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  overflow:hidden;
  transition:transform var(--t) var(--ease-out),border-color var(--t) var(--ease),
             box-shadow var(--t) var(--ease);
}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(90% 60% at 50% 0%,rgba(184,141,52,.13),transparent 70%);
  opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none;
}
.svc:hover{transform:translateY(-4px);border-color:var(--line-2);box-shadow:var(--glow-lift);}
.svc:hover::before{opacity:1;}

.svc__media{
  margin:calc(-1 * clamp(24px,2.4vw,34px)) calc(-1 * clamp(24px,2.4vw,34px)) var(--s-5);
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:var(--ink-3);
}
.svc__media img{
  width:100%;aspect-ratio:3/2;object-fit:cover;
  display:block;
}
.svc h3{font-size:var(--fs-h3);margin-bottom:var(--s-3);color:var(--text);}
.svc p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;margin-bottom:var(--s-5);}

.svc__list{
  display:grid;gap:var(--s-2);
  margin-top:auto;
  padding-top:var(--s-4);border-top:1px solid var(--line-soft);
}
.svc__list li{
  position:relative;padding-left:1.35em;
  font-size:var(--fs-sm);color:var(--text-2);
}
.svc__list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:.75;
}

/* ---------------------------------------------------------
   11. GALLERY
   --------------------------------------------------------- */
.filters{
  display:flex;flex-wrap:wrap;gap:var(--s-2);
  margin-bottom:var(--s-5);
}
.chip{
  min-height:40px;padding:.5em 1.15em;
  border-radius:var(--r-pill);
  border:1px solid var(--line-soft);
  background:var(--surface);
  font-size:var(--fs-sm);color:var(--text-2);
  touch-action:manipulation;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
.chip:hover{color:var(--text);border-color:var(--line-2);}
.chip.is-active{
  color:var(--on-navy);border-color:transparent;
  background:linear-gradient(150deg,var(--navy-hi),var(--navy));
  box-shadow:0 10px 26px -12px rgba(16,35,71,.8);
}

.gal__status{
  margin:0 0 var(--s-5);
  font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-3);
}

.gal{
  display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.gal__item{
  position:relative;display:block;width:100%;
  padding:0;margin:0;text-align:left;
  aspect-ratio:4/5;
  border-radius:var(--r-sm);overflow:hidden;
  border:1px solid var(--line-soft);
  background:var(--surface);
  opacity:0;transform:translate3d(0,18px,0);
  animation:galIn 620ms var(--ease-out) forwards;
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
@keyframes galIn{to{opacity:1;transform:none;}}

.gal__item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 760ms var(--ease-out),filter var(--t) var(--ease);
  filter:saturate(.92) brightness(.98);
}
.gal__item:hover,.gal__item:focus-visible{
  border-color:var(--line-2);
  box-shadow:var(--glow-lift);
}
.gal__item:hover img,.gal__item:focus-visible img{
  transform:scale(1.04);
  filter:saturate(1.06) brightness(1.02);
}

.gal__ov{
  position:absolute;inset:auto 0 0 0;
  display:grid;gap:2px;
  padding:var(--s-5) var(--s-4) var(--s-4);
  background:linear-gradient(0deg,rgba(10,23,51,.94) 8%,rgba(10,23,51,.62) 55%,transparent);
  transform:translate3d(0,14%,0);opacity:0;
  transition:transform var(--t) var(--ease-out),opacity var(--t) var(--ease);
}
.gal__item:hover .gal__ov,.gal__item:focus-visible .gal__ov{transform:none;opacity:1;}
.gal__ov b{
  font-family:var(--ff-d);font-weight:500;font-size:1.02rem;
  line-height:1.2;color:var(--on-navy);
}
.gal__ov span{font-size:var(--fs-xs);color:#EBCE87;letter-spacing:.04em;}

/* ---------------------------------------------------------
   12. PROCESS
   --------------------------------------------------------- */
.proc{
  display:grid;gap:clamp(32px,4vw,64px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  align-items:start;
}
.proc__media{
  position:sticky;top:calc(var(--nav-h) + 32px);
  margin:0;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--glow-soft);
}
.proc__media img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.proc__media figcaption{
  padding:var(--s-4) var(--s-5);
  font-size:var(--fs-xs);color:var(--text-3);
  border-top:1px solid var(--line-soft);
  background:var(--surface);
}

/* The five steps hang on a single gold thread: a faint guide strand runs the
   full column, a running stitch is worked between each pair of beads as the
   step scrolls in, and a warm shimmer travels the rail so the flow reads as
   one continuous movement rather than five detached blocks. */
.proc__steps{
  --pad:clamp(52px,5.2vw,78px);   /* gutter reserved for the bead column   */
  --bead:clamp(40px,4.8vw,62px);  /* bead diameter                          */
  --gapy:clamp(36px,3.6vw,52px);  /* space between steps = stitch length    */
  --rail:calc(var(--bead) / 2);   /* rail centre, from the list's left edge */
  position:relative;
  display:grid;gap:var(--gapy);
  padding-left:var(--pad);
}

/* the guide strand — barely there, but it keeps the column reading as one line */
.proc__steps::before{
  content:"";position:absolute;
  left:var(--rail);top:calc(var(--bead) / 2);bottom:calc(var(--bead) / 2);
  width:1px;margin-left:-.5px;
  background:linear-gradient(180deg,
    rgba(168,127,34,0) 0%,
    rgba(168,127,34,.22) 7%,
    rgba(168,127,34,.22) 93%,
    rgba(168,127,34,0) 100%);
  pointer-events:none;
}

/* the shimmer travelling the rail */
.proc__steps::after{
  content:"";position:absolute;
  left:var(--rail);top:0;width:10px;height:20%;
  transform:translate3d(-50%,-40%,0);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,
    rgba(217,182,94,0) 0%,
    rgba(217,182,94,.50) 34%,
    rgba(255,244,214,.95) 50%,
    rgba(217,182,94,.50) 66%,
    rgba(217,182,94,0) 100%);
  filter:blur(5px);
  animation:procFlow 6.4s var(--ease) infinite;
  pointer-events:none;
}
@keyframes procFlow{
  0%   {transform:translate3d(-50%,-40%,0);opacity:0;}
  12%  {opacity:.85;}
  86%  {opacity:.85;}
  100% {transform:translate3d(-50%,520%,0);opacity:0;}
}

.proc__step{position:relative;padding-bottom:var(--s-2);}

/* the running stitch worked down to the next bead — drawn, not faded, so it
   reads as thread being pulled through rather than a div appearing */
.proc__step::before{
  content:"";position:absolute;
  left:calc(var(--bead) / 2 - var(--pad));
  top:calc(var(--bead) + 9px);
  bottom:calc(9px - var(--gapy));
  width:3px;margin-left:-1.5px;
  border-radius:2px;
  background:repeating-linear-gradient(180deg,
    var(--gold) 0 9px,
    rgba(168,127,34,0) 9px 17px);
  opacity:.72;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 900ms var(--ease-out) 140ms,opacity var(--t) var(--ease);
  pointer-events:none;
}
.proc__step.in::before{clip-path:inset(0 0 0 0);}
.proc__step:last-child::before{content:none;}

/* the bead — a knot sitting on the thread, punched out of it by an ivory halo */
.proc__n{
  position:absolute;
  left:calc(-1 * var(--pad));top:-2px;
  display:grid;place-items:center;
  width:var(--bead);height:var(--bead);
  border-radius:50%;
  background:radial-gradient(circle at 34% 28%,#FFFDF7 0%,#F4E9D4 78%);
  border:1px solid var(--line-2);
  box-shadow:
    0 0 0 5px var(--ink),
    0 0 0 6px rgba(168,127,34,.20),
    0 12px 24px -16px rgba(16,35,71,.55);
  font-family:var(--ff-d);font-size:clamp(.86rem,.72rem + .3vw,1.02rem);
  color:var(--gold-deep);
  font-variant-numeric:tabular-nums;
  transition:
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
/* the shimmer catches each bead as it passes */
.proc__n::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;
  border:1px solid transparent;
  animation:procCatch 6.4s var(--ease) infinite;
  animation-delay:calc(.55s + var(--i,0) * 1.16s);
  pointer-events:none;
}
@keyframes procCatch{
  0%,17%,100%{border-color:transparent;box-shadow:0 0 0 0 rgba(217,182,94,0);}
  5%         {border-color:rgba(217,182,94,.9);box-shadow:0 0 22px -2px rgba(217,182,94,.8);}
}

/* the last bead is the terminus — filled, so the thread visibly lands somewhere */
.proc__step:last-child .proc__n{
  background:linear-gradient(160deg,var(--navy-hi),var(--navy-2));
  border-color:rgba(217,182,94,.55);
  color:var(--gold-hi);
}

.proc__step:hover .proc__n,.proc__step:focus-within .proc__n{
  transform:scale(1.06);
  border-color:rgba(168,127,34,.85);
  box-shadow:
    0 0 0 5px var(--ink),
    0 0 0 6px rgba(168,127,34,.45),
    0 0 30px -4px rgba(217,182,94,.7),
    0 12px 24px -16px rgba(16,35,71,.55);
}
.proc__step:hover::before{opacity:.9;}

.proc__step h3{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);margin-bottom:var(--s-2);}
.proc__step p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;max-width:52ch;}

/* ---------------------------------------------------------
   13. WHY
   --------------------------------------------------------- */
.why__grid{
  display:grid;gap:1px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border:1px solid var(--line-soft);border-radius:var(--r);
  background:var(--line-soft);
  overflow:hidden;
}
.why{
  position:relative;
  padding:clamp(26px,2.6vw,40px);
  background:#FFFDF7;
  transition:background var(--t) var(--ease);
}
.why:hover{background:var(--ink-2);}
.why__k{
  display:block;margin-bottom:var(--s-4);
  font-family:var(--ff-d);font-size:1.5rem;
  color:var(--gold-deep);opacity:.55;
  font-variant-numeric:tabular-nums;
  transition:opacity var(--t) var(--ease);
}
.why:hover .why__k{opacity:1;}
.why h3{font-size:var(--fs-h3);margin-bottom:var(--s-3);}
.why p{color:var(--text-2);font-size:var(--fs-sm);line-height:1.7;}

/* ---------------------------------------------------------
   15. ORDER
   --------------------------------------------------------- */
.order__in{display:grid;justify-items:center;text-align:center;}
.order__side{max-width:62ch;}
.order__lead{color:var(--text-2);margin:0 auto var(--s-7);}

/* the ticks stay left-aligned inside the centred column — a centred list
   with ragged left edges is much harder to scan */
.order__points{
  display:inline-grid;gap:var(--s-3);
  margin-bottom:var(--s-7);text-align:left;
}
.order__points li{
  display:flex;gap:.7em;align-items:flex-start;
  font-size:var(--fs-sm);color:var(--text-2);
}
.tick{
  width:16px;height:16px;flex:none;margin-top:.28em;
  color:var(--gold-deep);
}

.order__cta{min-width:min(340px,100%);}
.order__foot{
  margin:var(--s-3) 0 var(--s-7);
  font-size:var(--fs-xs);color:var(--text-3);
}

.order__direct{
  display:inline-block;
  padding:var(--s-5) clamp(28px,4vw,56px);
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:var(--surface);
}
.order__direct-label{
  margin:0 0 var(--s-2);
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);
}
.order__phone{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--ff-d);font-size:1.5rem;color:var(--gold-deep);
  transition:color var(--t-fast) var(--ease);
}
.order__phone .ico{width:20px;height:20px;}
.order__phone:hover{color:var(--navy);}
.order__hours{margin:var(--s-2) 0 0;font-size:var(--fs-xs);color:var(--text-3);}

/* ---------------------------------------------------------
   16. FAQ
   --------------------------------------------------------- */
.faq{display:grid;gap:var(--s-2);}
.faq__item{
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:#FFFDF7;
  overflow:hidden;
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease);
}
.faq__item:hover{border-color:var(--line-2);}
.faq__item[open]{border-color:var(--line-2);background:#FFFAEF;}

.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
  min-height:56px;padding:var(--s-4) var(--s-5);
  cursor:pointer;list-style:none;
  font-family:var(--ff-b);font-size:var(--fs-base);font-weight:400;
  color:var(--text);
  transition:color var(--t-fast) var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary:hover{color:var(--gold-deep);}
.faq__item[open] summary{color:var(--gold-deep);}

.faq__ico{
  width:18px;height:18px;flex:none;color:var(--gold-deep);
  transition:transform var(--t) var(--ease);
}
.faq__item[open] .faq__ico{transform:rotate(135deg);}

.faq__body{
  padding:0 var(--s-5) var(--s-5);
  color:var(--text-2);font-size:var(--fs-sm);line-height:1.75;
  max-width:72ch;
}
.faq__item[open] .faq__body{animation:faqIn 320ms var(--ease-out);}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* ---------------------------------------------------------
   17. CTA BAND
   --------------------------------------------------------- */
.cta{
  position:relative;z-index:var(--z-body);
  padding-block:clamp(80px,10vw,150px);
  text-align:center;overflow:hidden;
  border-top:1px solid var(--line);
}
.cta__aura{
  position:absolute;left:50%;top:50%;
  width:130%;aspect-ratio:2/1;
  transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(184,141,52,.2),rgba(16,35,71,.07) 55%,transparent 75%);
  filter:blur(30px);pointer-events:none;
}
.cta__in{position:relative;}
.cta .eyebrow{justify-content:center;}
.cta__title{
  font-family:var(--ff-d);font-weight:400;
  font-size:var(--fs-h2);line-height:1.18;margin-bottom:var(--s-4);
  text-wrap:balance;
}
.cta__sub{color:var(--text-2);margin-bottom:var(--s-7);font-size:var(--fs-lg);}
.cta__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);justify-content:center;}

/* ---------------------------------------------------------
   18. FOOTER
   --------------------------------------------------------- */
.foot{
  position:relative;z-index:var(--z-body);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,var(--navy),var(--navy-2));
  color:var(--on-navy);
  padding-top:clamp(48px,6vw,88px);
}
.foot .brand__mark{width:clamp(64px,6vw,78px);}
.foot .brand__name{color:var(--on-navy);}
.foot .brand__name i,.foot .brand__sub{color:var(--gold-hi);}
.foot .brand__sub::before{background:linear-gradient(90deg,transparent,rgba(217,182,94,.7));}
.foot .brand__sub::after{background:linear-gradient(270deg,transparent,rgba(217,182,94,.7));}
.foot__in{
  display:grid;gap:clamp(32px,4vw,56px);
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,.85fr)) minmax(0,1.1fr);
  padding-bottom:clamp(40px,5vw,72px);
}
.foot__brand .brand{margin-bottom:var(--s-4);}
.foot__blurb{color:rgba(247,239,224,.66);font-size:var(--fs-sm);max-width:38ch;line-height:1.7;}

.foot__col{display:flex;flex-direction:column;gap:var(--s-3);align-items:flex-start;}
.foot__h{
  margin:0 0 var(--s-1);
  font-family:var(--ff-b);font-size:var(--fs-xs);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#E4C57A;
}
.foot__col > a{
  font-size:var(--fs-sm);color:rgba(247,239,224,.78);
  padding-block:2px;
  transition:color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.foot__col > a:hover{color:var(--gold-hi);transform:translateX(3px);}

.foot__big{
  font-family:var(--ff-d);font-size:1.42rem;color:var(--on-navy)!important;
}
.foot__big:hover{color:var(--gold-hi)!important;}
.foot__wa{display:inline-flex;align-items:center;gap:.5em;color:var(--gold-hi)!important;}
.foot__wa .ico{width:15px;height:15px;transition:transform var(--t-fast) var(--ease);}
.foot__wa:hover .ico{transform:translateX(3px);}
.foot__meta{margin:var(--s-1) 0 0;font-size:var(--fs-xs);color:rgba(247,239,224,.55);}

.foot__bar{
  display:flex;flex-wrap:wrap;gap:var(--s-3);
  align-items:center;justify-content:space-between;
  padding-block:var(--s-5);
  border-top:1px solid rgba(247,239,224,.14);
  font-size:var(--fs-xs);color:rgba(247,239,224,.55);
}
.foot__bar p{margin:0;}
.foot__made{font-family:var(--ff-d);font-style:italic;color:var(--gold-hi);opacity:.85;}

/* ---------------------------------------------------------
   19. FLOATING WHATSAPP
   --------------------------------------------------------- */
.fab{
  position:fixed;z-index:var(--z-fab);
  right:clamp(16px,3vw,28px);
  bottom:max(clamp(16px,3vw,28px),env(safe-area-inset-bottom));
  display:grid;place-items:center;
  width:62px;height:62px;border-radius:50%;
  filter:drop-shadow(0 10px 22px rgba(31,168,85,.55));
  transform:translateY(20px) scale(.85);opacity:0;
  pointer-events:none;
  transition:transform 420ms var(--ease-out),opacity 320ms var(--ease),
             filter var(--t) var(--ease);
}
.fab.show{transform:none;opacity:1;pointer-events:auto;}
.fab:hover{filter:drop-shadow(0 14px 30px rgba(31,168,85,.85));}
.fab:active{transform:scale(.94);}
.fab__ico{width:62px;height:62px;object-fit:contain;position:relative;z-index:1;}
.fab__ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(31,168,85,.55);
  animation:ring 2.8s var(--ease) infinite;
}
@keyframes ring{
  0%{transform:scale(1);opacity:.7;}
  70%{transform:scale(1.55);opacity:0;}
  100%{transform:scale(1.55);opacity:0;}
}

/* ---------------------------------------------------------
   20. LIGHTBOX
   --------------------------------------------------------- */
.lb{position:fixed;inset:0;z-index:var(--z-lb);display:grid;place-items:center;}
.lb[hidden]{display:none;}
.lb__backdrop{
  position:absolute;inset:0;
  background:rgba(10,23,51,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:fadeIn 240ms var(--ease);
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.lb__panel{
  position:relative;
  width:min(1120px,calc(100% - 2 * clamp(16px,4vw,48px)));
  max-height:calc(100dvh - 2 * clamp(16px,4vw,48px));
  animation:lbIn 340ms var(--ease-out);
}
@keyframes lbIn{from{opacity:0;transform:scale(.965) translateY(12px);}to{opacity:1;transform:none;}}

.lb__fig{
  display:grid;gap:0;margin:0;
  grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr);
  max-height:inherit;
  border-radius:var(--r);overflow:hidden;
  border:1px solid rgba(184,141,52,.35);
  background:#FFFDF7;
  box-shadow:0 40px 120px -40px rgba(4,10,26,.9);
}
.lb__fig img{
  width:100%;height:100%;max-height:calc(100dvh - 2 * clamp(16px,4vw,48px));
  object-fit:contain;background:var(--ink-2);
}
.lb__cap{
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);
  padding:clamp(24px,2.6vw,36px);
  border-left:1px solid var(--line-soft);
  overflow-y:auto;
}
.lb__count{
  margin:0;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-3);font-variant-numeric:tabular-nums;
}
.lb__title{
  margin:0;font-family:var(--ff-d);font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.14;
}
.lb__meta{margin:0;font-size:var(--fs-sm);color:var(--gold-deep);}
.lb__cap .btn{margin-top:var(--s-3);}

.lb__btn{
  position:absolute;z-index:2;
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(184,141,52,.4);
  background:rgba(255,253,247,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--navy);
  transition:background var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.lb__btn svg{width:20px;height:20px;}
.lb__btn:hover{background:var(--navy);color:var(--on-navy);border-color:transparent;}
.lb__btn:active{transform:scale(.93);}
.lb__close{top:calc(-1 * var(--s-6));right:0;}
.lb__nav{top:50%;margin-top:-23px;}
.lb__nav--prev{left:calc(-1 * var(--s-7));transform:rotate(180deg);}
.lb__nav--prev:active{transform:rotate(180deg) scale(.93);}
.lb__nav--next{right:calc(-1 * var(--s-7));}

/* ---------------------------------------------------------
   21. RESPONSIVE
   --------------------------------------------------------- */
@media (max-width:1180px){
  .lb__nav--prev{left:var(--s-3);}
  .lb__nav--next{right:var(--s-3);}
  .lb__close{top:var(--s-3);right:var(--s-3);}
}

@media (max-width:1080px){
  .svc__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .why__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero__in{grid-template-columns:minmax(0,1fr);justify-items:start;}
  .hero__hoop--top{right:1%;}
  .hero__card--b{right:3%;bottom:1%;}
  .hero__card--a{left:0;}
  .hero__card--d{right:0;}
  .hero__art{min-height:0;aspect-ratio:1/.86;width:100%;max-width:620px;margin:0 auto;}
  .hero__badge{grid-column:1;justify-self:start;margin-top:var(--s-5);}
  .hero__thread{display:none;}
  .sec__head--split{grid-template-columns:1fr;align-items:start;}
  .proc{grid-template-columns:1fr;}
  .proc__media{position:static;max-width:520px;}
  .foot__in{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lb__fig{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;overflow-y:auto;}
  .lb__fig img{max-height:min(56dvh,520px);}
  .lb__cap{border-left:0;border-top:1px solid var(--line-soft);}
}

@media (max-width:860px){
  :root{--nav-h:74px;}

  .brand__mark{width:62px;}

  .nav__toggle{display:grid;}
  .nav__links{
    position:fixed;z-index:calc(var(--z-drawer) + 1);
    top:0;right:0;bottom:0;
    width:min(340px,88vw);
    flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:var(--s-1);
    padding:calc(var(--nav-h) + var(--s-6)) var(--s-5) var(--s-6);
    background:#FBF4E8;
    border-left:1px solid var(--line-2);
    box-shadow:-30px 0 80px -34px rgba(10,23,51,.6);
    transform:translateX(100%);
    transition:transform 380ms var(--ease-out);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .nav__links.open{transform:none;}
  .nav__links > a:not(.btn){
    padding:.9em .6em;
    font-size:1.05rem;
    border-bottom:1px solid var(--line-soft);
    border-radius:0;
  }
  .nav__links > a:not(.btn)::after{display:none;}
  .nav__cta{margin:var(--s-5) 0 0;}

  .hero{padding-block:var(--s-6) clamp(72px,16vw,110px);}
  .hero__sprig--tl{opacity:.16;}
  .hero__trust{gap:var(--s-4);}
  .trust + .trust{padding-left:var(--s-4);}
  .svc__grid{grid-template-columns:1fr;}
  .why__grid{grid-template-columns:1fr;}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr));}
  .foot__in{grid-template-columns:1fr;}
  .foot__bar{justify-content:center;text-align:center;}
}

@media (max-width:560px){
  :root{--nav-h:68px;}
  .brand__mark{width:52px;}
  .brand__name{font-size:1.08rem;}
  .brand__sub{font-size:.55rem;letter-spacing:.28em;gap:.45em;}
  .announce__sep,.announce__item:nth-child(3){display:none;}
  .hero__title{font-size:clamp(1.7rem,.9rem + 5.25vw,2.8rem);}
  .hero__lead br{display:none;}
  .hero__art{min-height:340px;}
  .hero__trust{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s-4) var(--s-3);
  }
  .trust + .trust{padding-left:0;border-left:0;}
  .hero__badge{
    width:100%;justify-self:stretch;
    font-size:var(--fs-sm);padding:.8em 1.15em;
  }
  .hero__actions{width:100%;}
  .hero__actions .btn{width:100%;}
  .gal{gap:var(--s-2);}
  .gal__ov{padding:var(--s-4) var(--s-3) var(--s-3);opacity:1;transform:none;}
  .cta__actions .btn{width:100%;}
  .lb__btn{width:44px;height:44px;}
}

/* keyboard focus must never sit behind the sticky nav */
@media (min-width:861px){
  .hero__scroll{display:flex;}
}

/* ---------------------------------------------------------
   22. MOTION / PRINT PREFERENCES
   --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important;}
  .hero__line{opacity:1!important;transform:none!important;animation:none!important;}
  .hero__spark,.hero__drape{animation:none!important;}
  .thread__line{animation:none!important;stroke-dashoffset:0!important;}
  .gal__item{opacity:1!important;transform:none!important;animation:none!important;}
  .fab{opacity:1;transform:none;pointer-events:auto;}
  .cosmos__stars{display:none;}
  .marquee__track{animation:none!important;transform:none!important;}
  .proc__steps::after{animation:none!important;opacity:0;}
  .proc__n::after{animation:none!important;}
  .proc__step::before{clip-path:none!important;}
}

@media print{
  .cosmos,.fab,.nav,.announce,.marquee,.lb,.hero__deco{display:none!important;}
  body{background:#fff;color:#000;}
}