/* ---------- Design tokens ----------
   TYPE — only two families, each with a defined role:
     --font-display : Cormorant Garamond — H1/H2, logo, prices, luxury voice
     --font-ui      : Space Grotesk      — body, kickers, labels, UI, buttons
     (handwritten note in .final-cta-note is the one intentional accent)
   COLOR
     --bg / --fg / --muted : base palette (cream, deep green ink, muted green)
     --accent              : timeline / process-flow signal (red)  — used ONLY in process
     --gold / --gold-dark  : luxury accent — used ONLY in plans + final CTA
     The two accents never share a viewport, so they read as section-scoped, not competing.
*/
:root{
  --bg:#f1ead8;
  --fg:#16332a;
  --muted:#5a6e63;
  --accent:#e63950;
  --accent-hover:#ff4a63;
  --gold:#d9a74f;
  --gold-dark:#9f6720;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:'Space Grotesk', system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden}
a{color:inherit;text-decoration:none}
sup{font-size:.55em;vertical-align:super;margin-left:1px}

/* ---------- Loader ---------- */
html.is-loading,html.is-loading body{background:#000}
.loader{
  position:fixed;inset:0;z-index:1000;
  background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:auto;
  transition:opacity .9s ease;
}
.loader.is-hidden{opacity:0;pointer-events:none}
.loader-title{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  color:#f4f4f6;
  text-shadow:0 2px 30px rgba(0,0,0,.55);
  margin-bottom:0;
}
.loader-title-main{
  font-family:var(--font-ui);
  font-weight:300;
  font-size:clamp(1.8rem, 4.6vw, 3.6rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
}
.loader-title-sub{
  font-family:var(--font-ui);
  font-weight:300;
  font-size:clamp(.85rem, 1.4vw, 1.15rem);
  letter-spacing:.62em;
  text-transform:uppercase;
  line-height:1;
  padding-left:.62em;
  opacity:.85;
}
.loader-ui{
  position:absolute;bottom:7vh;left:50%;transform:translateX(-50%);
  width:min(480px, 64vw);display:flex;flex-direction:column;gap:10px;
  color:#fff;
}
.loader-progress{
  width:100%;height:6px;background:rgba(255,255,255,.15);overflow:hidden;border-radius:3px;
}
.loader-progress-fill{
  width:0%;height:100%;background:#fff;
  box-shadow:0 0 12px rgba(255,255,255,.6);
  transition:width .12s linear;
}
.loader-percent{
  font-family:var(--font-ui);font-size:11px;
  letter-spacing:.42em;font-weight:400;text-align:right;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.78);
  padding-right:.1em;
}

/* ---------- Header — Liquid Glass Island ---------- */
.site-header{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:75%;
  max-width:1280px;
  height:64px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 28px;z-index:20;
  pointer-events:none;
  overflow:hidden;
  border-radius:20px;
  transition:
    opacity .55s cubic-bezier(.2,.8,.2,1),
    transform .55s cubic-bezier(.2,.8,.2,1);

  /* Glass substrate */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.085) 0%,
      rgba(255,255,255,0.02) 45%,
      rgba(255,255,255,0.065) 100%
    );
  backdrop-filter:blur(32px) saturate(190%) brightness(1.1);
  -webkit-backdrop-filter:blur(32px) saturate(190%) brightness(1.1);

  /* All-around glass border + specular rim + depth */
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.22),   /* top specular rim */
    inset 0 -1px 0 rgba(255,255,255,0.04),     /* bottom rim */
    inset 0 0 48px rgba(255,255,255,0.018),    /* diffuse inner glow */
    0 8px 32px rgba(0,0,0,0.45),               /* depth shadow */
    0 2px 8px rgba(0,0,0,0.28);
}
.site-header.is-hidden-on-plans{
  opacity:0!important;
  transform:translate(-50%, -88px);
  pointer-events:none;
}

/* Animated liquid refraction sweep */
.site-header::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(
    108deg,
    transparent 10%,
    rgba(255,255,255,0.03) 30%,
    rgba(255,255,255,0.09) 47%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.09) 53%,
    rgba(255,255,255,0.03) 70%,
    transparent 90%
  );
  animation:liquid-refraction 8s cubic-bezier(0.37,0,0.63,1) infinite alternate;
  pointer-events:none;
  will-change:transform,opacity;
}

/* Top-edge specular highlight */
.site-header::after{
  content:'';
  position:absolute;top:0;left:-30%;right:-30%;height:1.5px;
  background:linear-gradient(
    90deg,
    transparent 5%,
    rgba(255,255,255,0.06) 18%,
    rgba(255,255,255,0.55) 43%,
    rgba(255,255,255,0.75) 50%,
    rgba(255,255,255,0.55) 57%,
    rgba(255,255,255,0.06) 82%,
    transparent 95%
  );
  animation:specular-sweep 8s cubic-bezier(0.37,0,0.63,1) infinite alternate;
  pointer-events:none;
  will-change:transform,opacity;
}

@keyframes liquid-refraction{
  0%  {transform:translateX(-45%) skewX(-10deg);opacity:.45}
  100%{transform:translateX(45%)  skewX(10deg); opacity:1}
}
@keyframes specular-sweep{
  0%  {transform:translateX(-28%);opacity:.6}
  100%{transform:translateX(28%); opacity:1}
}
.site-header > *{pointer-events:auto}
.logo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  color:#111715;
}
.logo-mark{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:block;
  object-fit:contain;
  border-radius:50%;
  transform:scale(1.55);
  filter:drop-shadow(0 8px 16px rgba(0,0,0,.18));
}
.logo-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
}
.logo-text-main{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:clamp(.9rem, 1.4vw, 1.1rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  color:#111715;
}
.logo-text-sub{
  font-family:var(--font-ui);
  font-weight:500;
  font-size:clamp(.48rem, .7vw, .58rem);
  letter-spacing:.62em;
  text-transform:uppercase;
  line-height:1;
  padding-left:.62em;
  opacity:.75;
  color:#111715;
}
.tagline{
  justify-self:center;
  font-family:var(--font-ui);
  font-size:12px;
  color:rgba(17,23,21,.62);
  letter-spacing:.02em;
  white-space:nowrap;
}
.actions{justify-self:end;display:flex;align-items:center;gap:18px}
.header-ink-button{
  position:relative;
  min-width:142px;
  height:44px;
  padding:0 20px;
  display:grid;
  place-items:center;
  overflow:visible;
  border-radius:999px;
  color:#fff;
  font-family:var(--font-ui);
  font-size:13px;
  font-weight:600;
  line-height:1;
  letter-spacing:.02em;
  text-shadow:0 2px 12px rgba(0,0,0,.65);
  transition:filter .24s ease,transform .24s ease;
}
.header-ink-button span{
  position:relative;
  z-index:4;
}
.header-ink-button .ink-texture-canvas{
  inset:-7px -12px;
  opacity:1;
  filter:
    drop-shadow(0 10px 14px rgba(0,0,0,.24))
    drop-shadow(0 18px 30px rgba(0,0,0,.18));
}
.header-ink-button:hover{
  filter:brightness(1.08) saturate(1.06);
  transform:translateY(-1px);
}
.menu{
  width:32px;height:32px;background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:5px;align-items:flex-end;
}
.menu span{display:block;height:1.5px;background:var(--fg);transition:width .25s ease}
.menu span:nth-child(1){width:22px}
.menu span:nth-child(2){width:14px}
.menu:hover span:nth-child(2){width:22px}

/* ---------- Hero ---------- */
.hero{
  position:relative;width:100vw;height:100vh;height:100dvh;min-height:720px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 40%, #f7f1e3 0%, #f1ead8 55%, #ebe3cf 100%);
}
#blob-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;z-index:1;
}
.hero-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.10), transparent 55%),
    radial-gradient(ellipse at 10% 10%, rgba(255,250,235,.55), transparent 50%);
}
html.is-loading .hero{
  background:#000;
}
html.is-loading .hero::after,
html.is-loading .hero-grain,
html.is-loading .hero-copy,
html.is-loading .hero-lens{
  opacity:0;
}
.hero-copy{
  position:absolute;left:9vw;top:50%;transform:translateY(-50%);
  z-index:0;max-width:1100px;pointer-events:none;
}
.hero-lens{
  position:absolute;inset:0;z-index:10;pointer-events:none;
  /* Transparent background so the bubble's iridescent texture shows
     through; only the duplicated text glyphs paint, in white. */
  background:transparent;
  --bx:-2000px;--by:-2000px;
  -webkit-mask-image:radial-gradient(circle var(--lens-r,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  mask-image:radial-gradient(circle var(--lens-r,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hero-lens .hero-copy{ visibility:visible; }
.hero-lens .hero-copy h1,
.hero-lens .hero-copy p{ color:#fff; }
.hero-copy h1{
  font-family:var(--font-ui);
  font-size:clamp(56px, 9.4vw, 148px);
  line-height:.92;letter-spacing:-0.035em;font-weight:700;
  color:#16332a;
  text-transform:uppercase;
}
.hero-copy p{
  margin-top:56px;font-size:clamp(16px,1.35vw,21px);line-height:1.45;
  color:#1f3d33;
  font-family:var(--font-ui);
  font-weight:500;max-width:520px;letter-spacing:-.005em;
}
.scroll-indicator{
  position:absolute;left:50%;bottom:24px;transform:translateX(-50%);
  font-size:11px;letter-spacing:.25em;color:#16332a;opacity:.55;z-index:2;
  font-family:var(--font-ui);font-weight:500;
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:.55;transform:translate(-50%,0)}
  50%{opacity:1;transform:translate(-50%,4px)}
}

/* ---------- Band section ---------- */
.band{padding:160px 80px;background:#050505;border-top:1px solid #111}
.band-inner{max-width:1100px}
.kicker{font-size:12px;color:#5a6e63;letter-spacing:.22em;margin-bottom:24px}
.band h2{
  font-size:clamp(32px,4.2vw,64px);line-height:1.05;letter-spacing:-.02em;
  font-weight:700;color:#ededed;margin-bottom:28px;
}
.band p{font-size:18px;line-height:1.55;color:#a8a8a8;max-width:680px}

/* ---------- Niches section ---------- */
.niches{
  position:relative;
  padding:80px 3vw 100px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 40%, #f7f1e3 0%, #f1ead8 55%, #ebe3cf 100%);
}
.niches::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.10), transparent 55%),
    radial-gradient(ellipse at 10% 10%, rgba(255,250,235,.55), transparent 50%);
}
/* Grain overlay — matches the hero's .hero-grain so both sections feel unified.
   Sits at z-index:2 in the root stacking context (above background, below canvas at 5). */
.niches-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.niches-stage{
  position:relative;
  width:100%;
  margin:0 auto;
  height:min(1500px, 145vh);
  /* No z-index here — keeping this out of a stacking context lets child elements
     (.niches-lens at z-index:11) participate in the root context and render
     above the bubble canvas (z-index:5). */
}
.niche-cards-mask{
  position:absolute;
  inset:0;
  pointer-events:none;
}
/* Cards stay in layout (so the bubble's painter can read their bounding
   rects) but are visually hidden — the bubble's refraction is the only way
   to see them. */
.niche-card{ visibility:hidden; }
.niche-card{
  position:absolute;
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 30px 60px rgba(60,40,15,.18),
    0 10px 26px rgba(60,40,15,.14);
  background:#fff;
  border:1px solid rgba(22,51,42,.08);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.niche-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* Top row — three cards spanning full width */
.niche-card--1{ top:1%;  left:1%;    width:30%; height:48%; transform:rotate(-5deg); }
.niche-card--2{ top:3%;  left:34%;   width:30%; height:46%; transform:rotate(-1.5deg); }
.niche-card--3{ top:0%;  left:67%;   width:31%; height:52%; transform:rotate(4deg); }

/* Bottom row — two cards on the left, heading fills the right */
.niche-card--4{ top:52%; left:2%;    width:30%; height:46%; transform:rotate(-3deg); }
.niche-card--5{ top:54%; left:34%;   width:29%; height:44%; transform:rotate(2.5deg); }

.niche-card:hover{ transform:rotate(0deg) scale(1.03); z-index:5; }

/* Lens overlay for niches — reveals white heading text inside the bubble */
.niches-lens{
  position:absolute;inset:0;z-index:11;pointer-events:none;
  background:transparent;
  --bx:-2000px;--by:-2000px;
  -webkit-mask-image:radial-gradient(circle var(--lens-r,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  mask-image:radial-gradient(circle var(--lens-r,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.niches-lens .niches-heading{ color:#fff; }

.niches-heading{
  position:absolute;
  right:2%;
  top:56%;
  width:35%;
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.92;
  color:#16332a;
  text-transform:uppercase;
  font-size:clamp(56px, 7vw, 128px);
  /* z-index intentionally omitted — participates in root stacking context at
     z-index:auto (below canvas at 5), so the bubble covers the dark text while
     the .niches-lens (z-index:11) shows white text above the bubble. */
}
.niches-heading .w{display:block}
.w-websites{ text-align:left;  }
.w-for     { text-align:right; margin-top:10px; padding-right:6%; }
.w-every   { text-align:left;  margin-top:22px; }
.w-niche   { text-align:right; margin-top:14px; }

@media (max-width:980px){
  .niches{padding:60px 16px 80px}
  .niches-stage{
    position:relative;
    width:100%;
    height:auto;
    min-height:178vh;
    display:block;
  }
  .niche-card{
    position:absolute;
    width:44%;
    height:auto;
    aspect-ratio:4/5;
    min-width:0;
    border-radius:10px;
  }
  .niche-card--1{ top:30vh;  left:4%;  right:auto; transform:rotate(-4deg); }
  .niche-card--2{ top:54vh;  right:4%; left:auto;  transform:rotate(3deg);  }
  .niche-card--3{ top:78vh;  left:4%;  right:auto; transform:rotate(-3deg); }
  .niche-card--4{ top:102vh; right:4%; left:auto;  transform:rotate(4deg);  }
  .niche-card--5{ top:126vh; left:4%;  right:auto; transform:rotate(-2deg); }
  .niches-heading{
    position:absolute;
    top:2vh;
    left:0;
    right:auto;
    width:100%;
    text-align:center;
    padding:0 16px;
    font-size:clamp(40px, 11vw, 72px);
  }
  .w-websites,.w-for,.w-every,.w-niche{
    text-align:center;
    padding:0;
    margin-top:6px;
  }
}

/* ---------- Process section ---------- */
.process{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 30% 40%, #f7f1e3 0%, #f1ead8 55%, #ebe3cf 100%);
}
.process::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 80% 90%, rgba(120,90,40,.10), transparent 55%),
    radial-gradient(ellipse at 10% 10%, rgba(255,250,235,.55), transparent 50%);
}
.process-grain{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.18  0 0 0 0 0.16  0 0 0 0 0.12  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.process-stage{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:flex-start;justify-content:center;
  padding-top:9vh;
}
.process-title{
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#16332a;
  font-size:clamp(40px, 5.6vw, 96px);
  text-align:center;
  line-height:.95;
}

/* Lens — masked to bubble. Transparent background so the bubble's
   black-painted interior shows through; only white step text paints.
   Lives at body root with position:fixed so it isn't trapped inside
   .process's stacking context once ScrollTrigger pins that section. */
.process-lens{
  position:fixed;inset:0;z-index:11;pointer-events:none;
  background:transparent;
  visibility:hidden;
  --bx:-2000px;--by:-2000px;
  /* Ellipse mask — independent x/y radii so the lens matches the bubble's
     horizontal-pill shape inside the section. Defaults to a circle when
     rx and ry are equal. */
  -webkit-mask-image:radial-gradient(ellipse var(--lens-rx,260px) var(--lens-ry,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  mask-image:radial-gradient(ellipse var(--lens-rx,260px) var(--lens-ry,260px) at var(--bx) var(--by),
    #000 72%, rgba(0,0,0,.6) 88%, transparent 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.process-lens.is-active{
  visibility:visible;
}
/* Title duplicate inside the lens. Painted white and shown only inside the
   bubble's mask, mirroring the original .process-title's typography and
   position so the bubble appears to "invert" the title to white when it
   passes over. Gated by .is-active so it never paints outside the section. */
.process-title-clone{
  /* top + left are written each frame by main.js to track the dark
     title's bounding rect (so it stays glued during scroll-in, not just
     after the section pins). The translate keeps it centered on left. */
  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, 0);
  font-family:var(--font-ui);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:#fff;
  font-size:clamp(40px, 5.6vw, 96px);
  text-align:center;
  line-height:.95;
  white-space:nowrap;
  margin:0;
}

.process-step{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:32%;
  color:#fff;
  font-family:var(--font-ui);
  opacity:0;
  will-change:opacity;
}
.process-step h3{
  font-size:clamp(28px, 3.6vw, 64px);
  font-weight:700;
  letter-spacing:-.02em;
  text-transform:uppercase;
  line-height:.95;
  margin-bottom:18px;
}
.process-step p{
  font-size:clamp(14px, 1.1vw, 18px);
  line-height:1.4;
  font-weight:500;
  color:#fff;
  margin-top:6px;
  letter-spacing:-.005em;
}
.process-step{ width:26%; }
.process-step[data-pos="left"]{   left:24%;  text-align:center; }
.process-step[data-pos="right"]{  right:24%; text-align:center; }
.process-step[data-pos="middle"]{ left:50%;  width:38%; transform:translate(-50%,-50%); text-align:center; }

@media (max-width:880px){
  .process-step{ width:min(72vw, 310px)!important; left:50%!important; right:auto!important; transform:translate(-50%,-50%)!important; text-align:center!important; }
  .process-step h3{ font-size:clamp(25px, 7.6vw, 31px); line-height:.98; margin-bottom:12px; }
  .process-step p{ font-size:clamp(12.5px, 3.6vw, 15px); line-height:1.32; }
}

/* ---------- Process flow chart timeline ---------- */
.process-flow{
  position:fixed;
  left:50%;
  bottom:7vh;
  transform:translate(-50%, 24px);
  width:min(960px, 80vw);
  z-index:12;
  pointer-events:none;
  opacity:0;
  transition:opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  font-family:var(--font-ui);
  color:#16332a;
}
.process-flow.is-active{
  opacity:1;
  transform:translate(-50%, 0);
}

.pf-rail, .pf-fill{
  position:absolute;
  top:6px;                /* center of 12px dot */
  height:1.5px;
  border-radius:1px;
  pointer-events:none;
}
.pf-rail{
  left:10%;right:10%;
  background:rgba(22,51,42,.18);
}
.pf-fill{
  left:10%;
  width:calc(var(--pf-progress, 0) * 80%);
  background:var(--accent);
  box-shadow:0 0 12px rgba(230,57,80,.45);
  transition:width .12s linear;
}

.pf-nodes{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  list-style:none;
  margin:0;padding:0;
}
.pf-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  position:relative;
}
.pf-dot{
  width:13px;height:13px;border-radius:50%;
  background:#f1ead8;
  border:1.5px solid rgba(22,51,42,.35);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             background .35s ease,
             border-color .35s ease,
             box-shadow .35s ease;
  flex-shrink:0;
  z-index:2;
}
.pf-num{
  font-size:10px;font-weight:600;letter-spacing:.22em;
  opacity:.45;transition:opacity .3s, color .3s;
  font-style:normal;
}
.pf-label{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.5;transition:opacity .3s, color .3s;
  white-space:nowrap;
}
.pf-node.is-past .pf-dot{
  background:var(--accent);
  border-color:var(--accent);
}
.pf-node.is-past .pf-num{ opacity:.7; }
.pf-node.is-active .pf-dot{
  background:var(--accent);
  border-color:var(--accent);
  transform:scale(1.5);
  box-shadow:0 0 0 6px rgba(230,57,80,.18), 0 0 18px rgba(230,57,80,.45);
}
.pf-node.is-active .pf-num{
  opacity:1;color:var(--accent);
}
.pf-node.is-active .pf-label{
  opacity:1;
}

/* "No upfront fee" bracket spanning dots 01..04 (the steps that happen
   before money changes hands), with a pill label centered beneath. */
.pf-bracket{
  position:absolute;
  top: calc(100% + 8px);
  /* Dots sit at 10/30/50/70/90% across the flow. Bracket spans 10% → 50%
     (dot 01 → dot 03 — every step before payment). */
  left: 10%;
  width: 40%;
  height: 11px;
  border-left: 1.5px solid var(--accent);
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  pointer-events:none;
  /* Match the timeline's fade-in with a touch of delay so the bracket
     "draws in" after the rail appears. */
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .55s ease .25s, transform .55s ease .25s;
}
.process-flow.is-active .pf-bracket{
  opacity:1;
  transform:translateY(0);
}
.pf-bracket-label{
  position:absolute;
  top: calc(100% + 8px + 11px + 8px); /* bracket top + bracket height + gap */
  left: 30%;                            /* midpoint of the 10–50% bracket */
  transform: translate(-50%, -4px);
  padding: 7px 18px 6px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 10.5px;
  letter-spacing: .26em;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  background: rgba(241,234,216,.55);   /* faintly matches page bg so it reads as a chip */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity:0;
  transition:opacity .55s ease .45s, transform .55s ease .45s;
}
.process-flow.is-active .pf-bracket-label{
  opacity:1;
  transform: translate(-50%, 0);
}

@media (max-width:880px){
  .process-flow{ width:90vw; bottom:4vh; }
  .pf-label{ display:none; }
  .pf-bracket{ top: calc(100% + 6px); height: 8px; }
  .pf-bracket-label{
    top: calc(100% + 6px + 8px + 6px);
    font-size: 9.5px;
    letter-spacing: .2em;
    padding: 6px 14px 5px;
  }
}

/* ---------- Plans section ---------- */
.plans{
  --plan-cream:#f6efe4;
  --plan-ink:#040509;
  --plan-gold:#d9a74f;
  --plan-gold-dark:#9f6720;
  --ink-progress:0;
  --ink-frontier:0%;
  position:relative;
  min-height:100vh;
  padding:64px clamp(22px, 4vw, 70px) 76px;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,250,241,.82), transparent 52%),
    radial-gradient(ellipse at 20% 12%, rgba(184,132,73,.11), transparent 38%),
    radial-gradient(ellipse at 78% 88%, rgba(94,60,24,.09), transparent 52%),
    #f1ead8;
  isolation:isolate;
}
.plans::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(108,77,44,.06) 1px, transparent 1px),
    linear-gradient(rgba(108,77,44,.035) 1px, transparent 1px);
  background-size:80px 80px, 80px 80px;
  opacity:.28;
}
.plans-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.48;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.17  0 0 0 0 0.13  0 0 0 0.24 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ink-surface{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#030408;
}
.ink-texture-canvas{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}
.plans .plan-card .ink-texture-canvas,
.plans .plan-button .ink-texture-canvas{
  opacity:0;
  transition:none;
}
.plans.has-ink-started .plan-card .ink-texture-canvas{
  opacity:1;
}
.plans .plan-ink .ink-texture-canvas{
  clip-path:inset(0 0 100% 0 round 24px 24px 0 0);
}
.plans .plan-card--premium > .ink-texture-canvas{
  clip-path:inset(0 0 100% 0 round 24px);
}
.plans .plan-button .ink-texture-canvas{
  display:none;
}
.plans-header{
  position:relative;z-index:3;
  text-align:center;
  margin:0 auto 34px;
  color:#060a0b;
}
.plans-kicker{
  color:var(--plan-gold-dark);
  font-family:var(--font-ui);
  font-weight:700;
  font-size:15px;
  letter-spacing:.34em;
  margin-bottom:8px;
}
.plans-header h2{
  font-family:var(--font-ui);
  font-weight:700;
  font-size:clamp(56px, 6.2vw, 98px);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  color:#16332a;
}
.plans-header > p:last-child{
  margin-top:14px;
  font-family:var(--font-ui);
  color:#526069;
  font-size:clamp(16px, 1.55vw, 24px);
  font-weight:500;
}
.plans-grid{
  position:relative;z-index:3;
  width:min(1370px, 100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(260px, 1fr) minmax(300px, 1.05fr) minmax(260px, 1fr);
  gap:28px;
  align-items:center;
}
.plan-card{
  position:relative;
  min-height:640px;
  overflow:hidden;
  border-radius:24px;
  background:rgba(247,240,229,.88);
  box-shadow:0 32px 60px rgba(72,48,24,.13);
  color:#07090a;
}
.plan-card--core,
.plan-card--custom{
  padding-top:176px;
}
.plan-card--premium{
  min-height:666px;
  padding:24px 50px 26px;
  color:#07090a;
  background:rgba(247,240,229,.88);
  border:1px solid rgba(218,167,79,.22);
  box-shadow:
    0 36px 75px rgba(36,24,14,.22),
    inset 0 0 0 1px rgba(255,255,255,.04);
}
.plans.is-inked .plan-card--premium{
  color:#f7efe2;
}
.plan-ink{
  position:absolute;
  top:0;left:0;right:0;
  height:178px;
  border-radius:24px 24px 0 0;
  overflow:hidden;
  background:transparent;
}
.plan-ink::before{
  content:'';
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-52px;
  height:92px;
  z-index:1;
  border-top:1.5px solid rgba(162,111,52,.28);
  border-radius:50% 50% 0 0 / 72% 72% 0 0;
  transform:rotate(var(--wave-tilt, 0deg));
}
.plan-ink > :not(.ink-texture-canvas),
.plan-card--premium > :not(.ink-texture-canvas),
.plan-button > :not(.ink-texture-canvas){
  position:relative;
  z-index:2;
}
.plan-icon,
.popular-badge,
.plan-body,
.plan-button{
  position:relative;
  z-index:2;
}
.plan-ink--wave::after{
  content:'';
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-52px;
  height:92px;
  background:var(--plan-cream);
  z-index:1;
  border-radius:50% 50% 0 0 / 72% 72% 0 0;
  transform:rotate(var(--wave-tilt, 0deg));
}
.plan-card--custom .plan-ink--wave::after{
  --wave-tilt:-2deg;
  left:-8%;
  right:-18%;
  bottom:-44px;
}
.plan-icon{
  position:absolute;
  top:48px;left:50%;
  transform:translateX(-50%);
  width:76px;height:76px;
  display:grid;place-items:center;
  color:#d8a339;
  border:1.3px solid rgba(218,167,79,.94);
  border-radius:50%;
  background:rgba(246,239,228,.48);
  z-index:2;
}
.plan-icon svg{
  width:34px;height:34px;
}
.plans.is-inked .plan-icon{
  background:rgba(3,4,8,.36);
}
.plan-icon--premium{
  top:68px;
  color:#d7a13c;
}
.popular-badge{
  position:absolute;
  top:28px;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  min-width:146px;
  padding:8px 22px 9px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  border-radius:999px;
  background:linear-gradient(180deg, #e6ba6a, #cc9140);
  color:#090705;
  font-family:var(--font-ui);
  font-size:15px;
  font-weight:600;
}
.plan-body{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 clamp(34px, 4vw, 72px) 30px;
}
.plan-card--premium .plan-body{
  padding:116px 0 0;
}
.plan-body h3{
  font-family:var(--font-display);
  font-size:clamp(42px, 3.5vw, 54px);
  font-weight:600;
  line-height:.9;
  letter-spacing:-.035em;
  text-transform:uppercase;
}
.plan-card--premium .plan-body h3{
  color:inherit;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.plan-tagline{
  margin-top:16px;
  color:#a06a22;
  font-family:var(--font-ui);
  font-size:17px;
  font-weight:500;
  text-align:center;
}
.plan-card--premium .plan-tagline{
  color:#e4ad47;
  font-size:18px;
}
.plan-rule{
  width:78%;
  height:1px;
  margin:28px 0 18px;
  background:rgba(162,111,52,.35);
}
.plan-card--premium .plan-rule{
  width:84%;
  background:linear-gradient(90deg, transparent, rgba(218,167,79,.95), transparent);
  height:2px;
}
.plan-price{
  font-family:var(--font-display);
  font-size:clamp(48px, 4.4vw, 68px);
  line-height:1;
  letter-spacing:-.04em;
}
.plan-price span{
  font-family:var(--font-ui);
  font-size:19px;
  letter-spacing:0;
  margin-right:8px;
  vertical-align:middle;
}
.plan-features{
  list-style:none;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:14px;
  margin:28px 0 30px;
  font-family:var(--font-ui);
  font-size:16px;
  font-weight:600;
}
.plan-card--premium .plan-features{
  margin-top:18px;
  color:#f4eadb;
  gap:10px;
}
.plan-features li{
  position:relative;
  padding-left:34px;
}
.plan-features li::before{
  content:'';
  position:absolute;
  left:0;top:.1em;
  width:21px;height:21px;
  border-radius:50%;
  background:#030506;
}
.plan-card--premium .plan-features li::before{
  background:#d9a74f;
}
.plan-features li::after{
  content:'';
  position:absolute;
  left:7px;top:8px;
  width:7px;height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}
.plan-card--premium .plan-features li::after{
  border-color:#12100d;
}
.plan-button{
  width:100%;
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#0b0907;
  background:linear-gradient(180deg, #e5b968, #d09945);
  font-family:var(--font-ui);
  font-size:18px;
  font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.plan-button:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
.plan-button--gold{
  background:linear-gradient(180deg, #e5b968, #d09945);
  color:#0b0907;
}
.plan-transition-ink{
  position:absolute;
  left:50%;
  top:0;
  width:52vw;
  height:25vh;
  min-width:520px;
  pointer-events:none;
  z-index:2;
  border-radius:0 0 48% 48% / 0 0 78% 78%;
  transform:translate(-50%, -64%) scale(calc(.22 + var(--ink-progress) * .78));
  opacity:calc((1 - var(--ink-progress)) * var(--ink-progress) * 2.4);
  filter:blur(calc((1 - var(--ink-progress)) * 12px));
}
.plan-bottom-ink{
  position:absolute;
  bottom:-80px;
  width:44vw;
  height:210px;
  min-width:480px;
  z-index:2;
  pointer-events:none;
  opacity:calc(var(--ink-progress) * .85);
}
.plan-bottom-ink--left{
  left:-7vw;
  border-radius:0 100% 0 0 / 0 84% 0 0;
  transform:translateY(calc((1 - var(--ink-progress)) * 80px)) rotate(9deg);
}
.plan-bottom-ink--right{
  right:-7vw;
  border-radius:100% 0 0 0 / 84% 0 0 0;
  transform:translateY(calc((1 - var(--ink-progress)) * 80px)) rotate(-9deg);
}
.plan-bottom-ink::after{
  content:'';
  position:absolute;
  inset:38px 24px auto auto;
  width:78%;
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(216,163,57,.8), transparent);
  transform:rotate(-13deg);
}
.plan-bottom-ink--right::after{
  inset:38px auto auto 24px;
  transform:rotate(13deg);
}
@media (max-width:1080px){
  .plans{padding-top:72px}
  .plans-grid{
    grid-template-columns:1fr;
    width:min(520px, 100%);
  }
  .plan-card,
  .plan-card--premium{
    min-height:auto;
  }
  .plan-card--premium{
    padding:26px 42px 34px;
  }
}

@media (max-width:620px){
  .plans{padding-inline:16px}
  .plans-header h2{font-size:52px}
  .plans-header > p:last-child{font-size:16px}
  .plan-card--core,
  .plan-card--custom{padding-top:156px}
  .plan-ink{height:156px}
  .plan-body{padding-inline:26px}
  .plan-card--premium{padding-inline:28px}
  .plan-bottom-ink{min-width:360px}
}

/* ---------- Final CTA ---------- */
.final-cta{
  position:relative;
  min-height:100vh;
  padding:clamp(120px, 16vh, 200px) clamp(18px, 4vw, 70px) clamp(90px, 12vh, 140px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255,250,241,.85), transparent 56%),
    radial-gradient(ellipse at 20% 18%, rgba(184,132,73,.08), transparent 36%),
    radial-gradient(ellipse at 78% 92%, rgba(94,60,24,.08), transparent 54%),
    #f1ead8;
  isolation:isolate;
}
.final-cta::before{
  content:'';
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255,255,255,.42), transparent 52%),
    radial-gradient(ellipse at 50% 100%, rgba(85,55,24,.11), transparent 58%);
}
.final-cta-grain{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.46;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.17  0 0 0 0 0.13  0 0 0 0.24 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.final-cta-inner{
  position:relative;
  z-index:2;
  width:min(1460px, 100%);
  margin:0 auto;
  text-align:center;
  transform-style:preserve-3d;
}
.final-cta-kicker{
  margin-bottom:28px;
  color:#b46f1f;
  font-family:var(--font-ui);
  font-size:clamp(13px, 1.2vw, 18px);
  font-weight:700;
  letter-spacing:.36em;
}
.final-cta h2{
  font-family:var(--font-ui);
  color:#16332a;
  font-weight:700;
  font-size:clamp(56px, 6vw, 100px);
  line-height:.92;
  letter-spacing:-.035em;
  text-transform:uppercase;
  margin-bottom:clamp(60px, 7vh, 100px);
}
.final-cta-button-wrap{
  width:min(1060px, 86vw);
  margin:0 auto;
  perspective:650px;
}
.final-cta-button{
  position:relative;
  min-height:clamp(120px, 13vw, 180px);
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:#fff;
  background:transparent;
  overflow:visible;
  transform-style:preserve-3d;
  will-change:transform;
  box-shadow:none;
  transition:filter .25s ease;
}
.final-cta-button::before{
  content:none;
}
.final-cta-button::after{
  content:none;
}
.final-cta-button .ink-texture-canvas{
  opacity:1;
  inset:-22px -32px;
  transform:translateZ(0);
  filter:
    drop-shadow(0 18px 24px rgba(0,0,0,.28))
    drop-shadow(0 32px 48px rgba(0,0,0,.18));
}
.final-cta-button-text{
  position:absolute;
  inset:0 0 clamp(6px, .8vw, 12px);
  z-index:5;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  padding-bottom:clamp(4px, .45vw, 8px);
  width:100%;
  height:100%;
  text-align:center;
  font-family:var(--font-display);
  font-size:clamp(42px, 5.5vw, 80px);
  font-weight:600;
  line-height:.96;
  letter-spacing:-.025em;
  text-shadow:0 3px 16px rgba(0,0,0,.58);
  transform:translateZ(34px);
  will-change:transform;
}
.final-cta-button-shine{
  display:none;
}
.final-cta-button:hover,
.final-cta-button.is-hot{
  filter:brightness(1.08) saturate(1.05);
}
.final-cta-button.is-hot::after{
  content:none;
}
.final-cta-button:hover .final-cta-button-shine,
.final-cta-button.is-hot .final-cta-button-shine{
  animation:none;
}
.final-cta-note{
  width:min(860px, 72vw);
  margin:48px auto 0;
  color:#747576;
}
.final-cta-note svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}
.final-cta-note text{
  fill:currentColor;
  font-family:"Caveat","Segoe Print","Bradley Hand",cursive;
  font-size:40px;
  font-weight:500;
  letter-spacing:.01em;
}
.final-cta-note path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.4;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.9;
}
.note-underline{
  stroke-width:2.1;
}

@media (max-width:860px){
  .final-cta{
    min-height:760px;
    padding-top:94px;
  }
  .final-cta-inner{
    transform-style:flat;
  }
  .final-cta-button-wrap{
    width:min(650px, 92vw);
    margin-inline:auto;
    perspective:none;
  }
  .final-cta-button{
    transform-style:flat;
    transform:none!important;
    display:grid;
    place-items:center;
  }
  .final-cta-button .ink-texture-canvas{
    inset:0;
    border-radius:999px;
    transform:none!important;
    filter:
      drop-shadow(0 14px 20px rgba(0,0,0,.24))
      drop-shadow(0 24px 34px rgba(0,0,0,.14));
  }
  .final-cta-button-text{
    inset:0;
    padding:0 24px 4px;
    transform:none;
    justify-self:center;
    align-self:center;
  }
  .final-cta-note{
    width:min(620px, 92vw);
    margin-top:26px;
  }
  .final-cta-note text{
    font-size:35px;
  }
}

@media (max-width:560px){
  .final-cta{
    min-height:700px;
  }
  .final-cta h2{
    font-size:clamp(48px, 14vw, 72px);
  }
  .final-cta-button{
    min-height:128px;
  }
  .final-cta-button-text{
    font-size:clamp(38px, 11.6vw, 46px);
  }
  .final-cta-note svg{
    transform:none;
  }
  .final-cta-note text{
    font-size:27px;
  }
}

/* ---------- Footer ---------- */
.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  padding:34px 42px;
  font-size:12px;
  color:#4f6258;
  border-top:1px solid rgba(22,51,42,.12);
  background:
    linear-gradient(180deg, rgba(235,227,207,.82), #ebe3cf 48%),
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.56), transparent 34%);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  color:#121714;
}
.footer-logo-mark{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:block;
  object-fit:contain;
  border-radius:50%;
  transform:scale(1.55);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.16));
}
.footer-brand span{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.footer-brand span{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.footer-brand-main{
  display:block;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  line-height:1;
  color:#121714;
}
.footer-brand-sub{
  display:block;
  font-family:var(--font-ui);
  font-weight:500;
  font-size:clamp(.52rem, .75vw, .65rem);
  letter-spacing:.62em;
  text-transform:uppercase;
  line-height:1;
  padding-left:.62em;
  opacity:.75;
  color:#121714;
  margin-top:5px;
}
.footer-meta{
  display:flex;
  align-items:center;
  gap:22px;
  font-family:var(--font-ui);
  color:rgba(18,23,20,.58);
}
.footer-meta a{
  color:#121714;
  font-weight:600;
  text-decoration:none;
}
.footer-meta a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}
/* ---------- Responsive ---------- */
@media (max-width:880px){
  .site-header{grid-template-columns:1fr auto;padding:0 20px;width:calc(100% - 28px)}
  .tagline{display:none}
  .logo{gap:10px}
  .logo-mark{width:36px;height:36px;flex-basis:36px;transform:scale(1.5)}
  .logo-text-main{font-size:.82rem}
  .logo-text-sub{font-size:.46rem}
  .actions{gap:12px}
  .header-ink-button{min-width:124px;height:40px;font-size:11.5px}
  .hero-copy{left:24px;right:24px;max-width:none}
  .band{padding:96px 24px}
  .site-footer{flex-direction:column;gap:14px;text-align:center;padding:28px 20px}
  .footer-brand{justify-content:center}
  .footer-logo-mark{width:40px;height:40px;flex-basis:40px;transform:scale(1.45)}
  .footer-brand-main{font-size:.92rem}
  .footer-brand-sub{font-size:.48rem}
  .footer-meta{flex-direction:column;gap:6px;font-size:11px}
}

@media (max-width:560px){
  .site-header{
    top:10px;
    height:54px;
    border-radius:16px;
    padding:0 14px;
  }
  .logo{gap:8px}
  .logo-mark{width:28px;height:28px;flex-basis:28px;transform:scale(1.42)}
  .logo-text{gap:4px}
  .logo-text-main{font-size:.72rem;letter-spacing:.15em}
  .logo-text-sub{font-size:.4rem;letter-spacing:.5em}
  .header-ink-button{display:none}
  .actions{gap:0}
  .site-footer{padding:22px 16px;gap:12px}
  .footer-logo-mark{width:34px;height:34px;flex-basis:34px;transform:scale(1.38)}
  .footer-brand-main{font-size:.8rem;letter-spacing:.15em}
  .footer-brand-sub{font-size:.42rem;letter-spacing:.5em}
  .footer-meta{font-size:10.5px;gap:4px}
}

/* ---------- Mobile nav overlay ---------- */
.mobile-nav{
  position:fixed;inset:0;z-index:50;
  background:rgba(2,2,3,.96);
  backdrop-filter:blur(40px);
  -webkit-backdrop-filter:blur(40px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .45s ease,visibility .45s ease;
}
.mobile-nav.is-open{opacity:1;visibility:visible}
.mobile-nav-inner{
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.mobile-nav-link{
  font-family:var(--font-ui);
  font-size:clamp(36px, 10vw, 56px);
  font-weight:700;color:#f4f3ef;
  letter-spacing:-.02em;text-transform:uppercase;
  padding:10px 20px;
  opacity:0;transform:translateY(18px);
  transition:opacity .35s ease,transform .35s ease,color .25s ease;
}
.mobile-nav.is-open .mobile-nav-link{opacity:1;transform:translateY(0)}
.mobile-nav.is-open .mobile-nav-link:nth-child(1){transition-delay:.06s}
.mobile-nav.is-open .mobile-nav-link:nth-child(2){transition-delay:.12s}
.mobile-nav.is-open .mobile-nav-link:nth-child(3){transition-delay:.18s}
.mobile-nav.is-open .mobile-nav-link:nth-child(4){transition-delay:.24s}
.mobile-nav-link:hover{color:rgba(244,243,239,.6)}
body.nav-open{overflow:hidden}

/* Close (X) button inside the mobile nav overlay */
.mobile-nav-close{
  position:absolute;
  top:22px;
  right:22px;
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  transition:background .25s ease, transform .25s ease;
}
.mobile-nav-close:hover{ background:rgba(244,243,239,.08); transform:rotate(90deg); }
.mobile-nav-close span{
  position:absolute;
  width:22px;
  height:2px;
  background:#f4f3ef;
  border-radius:1px;
}
.mobile-nav-close span:nth-child(1){ transform:rotate(45deg); }
.mobile-nav-close span:nth-child(2){ transform:rotate(-45deg); }

/* Hamburger → X */
.menu span{transition:width .25s ease,transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.menu.is-open span:nth-child(1){width:22px;transform:translateY(3.25px) rotate(45deg)}
.menu.is-open span:nth-child(2){width:22px;transform:translateY(-3.25px) rotate(-45deg)}

/* ---------- Footer nav ---------- */
.footer-nav{
  display:flex;gap:24px;
  font-family:var(--font-ui);font-size:13px;font-weight:600;
}
.footer-nav a{color:#16332a;transition:opacity .25s ease}
.footer-nav a:hover{opacity:.6}
@media (max-width:880px){
  .footer-nav{display:none}
}