/* ==========================================================================
   Vertex — Design System
   Ink / Paper / Kraft / Signal. Syne for voice, Inter for detail.
   ========================================================================== */

:root{
  --ink:#1a1714;
  --ink-soft:#2b241d;
  --paper:#f4f2ee;
  --paper-dim:#ece8e0;
  --white:#fffdfa;
  --kraft:#bfa07a;
  --kraft-deep:#a3835d;
  --signal:#e14b3d;
  --signal-deep:#c93a2d;
  --slate:#8c8478;
  --stock-green:#4b7a4f;
  --line:rgba(26,23,20,0.14);
  --line-soft:rgba(26,23,20,0.08);
  --line-on-dark:rgba(244,242,238,0.16);

  --font-display:'Syne', sans-serif;
  --font-body:'Inter', sans-serif;

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.16,.84,.44,1);

  --nav-h:84px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
[id]{scroll-margin-top:112px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-0.02em;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

.wrap{max-width:1200px;margin:0 auto;padding:0 40px;}
@media (max-width:640px){ .wrap{padding:0 22px;} }

section{position:relative;}

/* ---------- noise / grain overlay ---------- */
.grain{
  pointer-events:none;
  position:fixed; inset:0; z-index:2000;
  opacity:0.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor-dot{
  position:fixed; top:0; left:0; width:9px; height:9px; border-radius:50%;
  background:var(--signal); pointer-events:none; z-index:3000;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .2s ease;
  opacity:0;
}
.cursor-dot.is-active{opacity:1;}
.cursor-dot.is-hover{width:44px;height:44px;background:transparent;border:1.5px solid var(--signal);}
@media (hover:none), (max-width:900px){ .cursor-dot{display:none;} }

/* ---------- Link roll (duplicate-line hover swap) ----------
   Markup is generated by js/main.js (wraps existing text in a <span> and
   copies it into a data-text attribute picked up by ::after's content) —
   no manual HTML duplication needed per link. */
.link-roll{position:relative; display:inline-block; overflow:hidden;}
.link-roll > span{display:inline-block; transition:transform .45s var(--ease);}
.link-roll::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; white-space:nowrap;
  transform:translateY(100%);
  transition:transform .45s var(--ease);
}
@media (hover:hover){
  .link-roll:hover > span{transform:translateY(-100%);}
  .link-roll:hover::after{transform:translateY(0);}
}
@media (prefers-reduced-motion: reduce){
  .link-roll::after{display:none;}
  .link-roll:hover > span{transform:none;}
}

/* ---------- scroll reveal ----------
   Deliberately no default hidden state here (no opacity:0 / transform) —
   GSAP applies its own "from" state via inline style on init and animates
   to visible. If that inline style is ever cleared for any reason (e.g. a
   ScrollTrigger.refresh() revert pass after the tween has already finished
   ticking), the fallback must be "visible", not "hidden forever". */

/* ==========================================================================
   NAV
   ========================================================================== */
/* The floating pill is the permanent nav look, from page load, on every
   page — not just a scroll-up reveal. Hides on scroll-down past HIDE_AT,
   reappears the same way on scroll-up (see js/main.js "Nav scroll state"). */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:auto;
  display:flex; align-items:center;
  padding:14px 20px 0;
  background:transparent;
  transition:transform .45s var(--ease);
}
.site-nav.is-hidden{transform:translateY(-130%);}
@media (prefers-reduced-motion: reduce){
  .site-nav.is-hidden{transform:none;}
}

.nav-row{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px;
  max-width:min(1040px, calc(100% - 8px));
  margin:0 auto;
  padding:9px 10px 9px 26px;
  border-radius:100px;
  background:rgba(255,253,250,0.82);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 14px 34px rgba(26,23,20,0.1), 0 0 0 1px rgba(26,23,20,0.05);
  transition:background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.is-scrolled .nav-row{
  background:rgba(255,253,250,0.96);
  box-shadow:0 20px 44px rgba(26,23,20,0.16), 0 0 0 1px rgba(26,23,20,0.06);
}
.nav-logo{display:flex; flex-direction:column; line-height:1;}
.nav-logo .word{font-family:var(--font-display); font-weight:800; font-size:22px; letter-spacing:-0.02em; color:var(--ink);}
.nav-logo .strap{display:none;}

.nav-links{display:flex; align-items:center; gap:2px;}
.nav-item{display:flex; align-items:center;}
.nav-links a{
  position:relative;
  font-size:14px; font-weight:600; color:var(--ink-soft);
  padding:10px 16px;
  display:inline-flex; align-items:center; gap:6px;
}
.mega-caret{font-size:9px; color:var(--slate); transition:transform .3s var(--ease);}
.nav-item.is-open .mega-caret{transform:rotate(180deg); color:var(--ink);}
.nav-links a::after{
  content:''; position:absolute; left:16px; right:16px; bottom:6px; height:1.5px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.is-active::after{transform:scaleX(1);}
.nav-links a.is-active{color:var(--ink);}

.nav-actions{display:flex; align-items:center; gap:18px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:600; font-size:14px;
  padding:13px 24px;
  border:1px solid transparent;
  position:relative;
  white-space:nowrap;
}
.btn-primary{background:var(--ink); color:var(--paper); box-shadow:0 0 0 0 rgba(225,75,61,0);}
.btn-primary:hover{background:var(--signal); color:var(--white); box-shadow:0 16px 36px rgba(225,75,61,0.32);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-on-dark{background:var(--paper); color:var(--ink); box-shadow:0 0 0 0 rgba(225,75,61,0);}
.btn-on-dark:hover{background:var(--signal); color:var(--white); box-shadow:0 16px 36px rgba(225,75,61,0.32);}
.btn-outline-dark{background:transparent; color:var(--paper); border-color:var(--line-on-dark);}
.btn-outline-dark:hover{border-color:var(--paper);}

/* ---------- Nav CTA (pill, always visible) ---------- */
.nav-cta{
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:var(--paper);
  font-family:var(--font-body); font-weight:600; font-size:13.5px;
  padding:11px 20px; border-radius:100px;
  transition:background .3s var(--ease), box-shadow .3s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover{background:var(--signal); color:var(--white); box-shadow:0 12px 28px rgba(225,75,61,0.35); transform:translateY(-1px);}
.nav-cta .status-dot{
  width:7px; height:7px; border-radius:50%; background:var(--stock-green); flex-shrink:0;
  animation:status-pulse 2s ease-in-out infinite;
}
@keyframes status-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(75,122,79,0.55);}
  50%{box-shadow:0 0 0 5px rgba(75,122,79,0);}
}

/* ---------- Floating sticky CTA ---------- */
.float-cta{
  position:fixed; right:28px; bottom:28px; z-index:1600;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper);
  padding:16px 24px 16px 18px; border-radius:100px;
  box-shadow:0 18px 44px rgba(26,23,20,0.3);
  font-family:var(--font-body); font-weight:600; font-size:14px;
  opacity:0; transform:translateY(18px) scale(0.9); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease), background .3s ease, box-shadow .3s ease;
}
.float-cta.is-visible{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.float-cta:hover{background:var(--signal); box-shadow:0 20px 48px rgba(225,75,61,0.4);}
.float-cta .ring{
  width:9px; height:9px; border-radius:50%; background:var(--signal); flex-shrink:0;
  animation:ring-pulse 2s ease-out infinite;
}
@keyframes ring-pulse{
  0%{box-shadow:0 0 0 0 rgba(225,75,61,0.5);}
  70%{box-shadow:0 0 0 11px rgba(225,75,61,0);}
  100%{box-shadow:0 0 0 0 rgba(225,75,61,0);}
}
@media (max-width:640px){ .float-cta{right:16px; bottom:16px; padding:14px 18px 14px 14px; font-size:13px;} }
@media (prefers-reduced-motion: reduce){ .nav-cta .status-dot, .float-cta .ring{animation:none;} }

/* ---------- Aurora backdrop (dark hero sections) ---------- */
.aurora{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.aurora span{
  position:absolute; border-radius:50%; filter:blur(90px);
  opacity:0.32; mix-blend-mode:screen;
  animation:aurora-drift 20s ease-in-out infinite;
}
.aurora span:nth-child(1){width:440px; height:440px; background:var(--signal); top:-12%; right:-6%;}
.aurora span:nth-child(2){width:360px; height:360px; background:var(--kraft); bottom:-16%; left:-8%; animation-duration:24s; animation-delay:2s;}
.aurora span:nth-child(3){width:280px; height:280px; background:#7a5f8a; top:38%; left:28%; animation-duration:28s; animation-delay:4s; opacity:0.16;}
@keyframes aurora-drift{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(34px,-28px) scale(1.09);}
}
@media (prefers-reduced-motion: reduce){ .aurora span{animation:none;} }
.btn-arrow{display:inline-block; transition:transform .3s var(--ease);}
.btn:hover .btn-arrow{transform:translateX(4px);}

.nav-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; border:none; background:none; padding:0;
}
.nav-burger span{display:block; width:22px; height:2px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s var(--ease);}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:900px){
  .nav-links{
    /* top is set inline by js/main.js at open time (nav's real bottom
       edge) — var(--nav-h) is only a pre-JS fallback, since the header's
       actual height varies (84px at rest, 66px once .is-scrolled). */
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    background:var(--paper);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:24px 22px; gap:4px;
    transform:translateX(100%);
    transition:transform .45s var(--ease);
  }
  .nav-links.is-open{transform:translateX(0);}
  .nav-links a{font-size:22px; padding:14px 4px; width:100%; border-bottom:1px solid var(--line-soft);}
  .nav-burger{display:flex;}
  .nav-cta{padding:10px 16px; font-size:12.5px;}
  .nav-cta .cta-label-full{display:none;}
}

/* ---------- MEGA MENU ---------- */
.mega-menu{
  position:fixed; left:0; right:0; top:0;
  background:var(--white);
  border-bottom:1px solid var(--line);
  box-shadow:0 30px 60px rgba(26,23,20,0.14);
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(-12px);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  z-index:950;
}
.mega-menu.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);}
.mega-inner{
  padding:46px 40px 50px;
  display:grid; grid-template-columns:1fr 1fr 0.85fr;
}
.mega-col{padding:0 28px;}
.mega-col:first-child{padding-left:0;}
.mega-col + .mega-col{border-left:1px solid var(--line);}
.mega-label{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--kraft-deep); font-weight:700; display:block; margin-bottom:16px;}
.mega-link{display:flex; align-items:flex-start; gap:14px; padding:11px 12px; margin:0 -12px; border-radius:2px; transition:background .25s ease;}
.mega-link:hover{background:var(--paper);}
.mega-link .mega-num{font-family:var(--font-display); font-weight:800; font-size:11px; color:var(--slate); padding-top:3px; flex-shrink:0;}
.mega-link strong{display:block; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:3px; letter-spacing:-0.005em;}
.mega-link small{display:block; font-size:12.5px; color:var(--slate); line-height:1.5;}
.mega-feature{background:var(--ink); color:var(--paper); padding:32px 28px; margin-left:28px; border-left:1px solid var(--line);}
.mega-feature-tag{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--kraft); margin-bottom:14px; font-weight:700;}
.mega-feature-quote{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.42; letter-spacing:-0.005em;}
@media (max-width:900px){ .mega-menu{display:none;} }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  padding:calc(var(--nav-h) + 88px) 0 96px;
  background:var(--ink);
  color:var(--paper);
  overflow:hidden;
  position:relative;
}
.hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 82% 8%, rgba(225,75,61,0.18), transparent 60%),
    radial-gradient(50% 40% at 10% 90%, rgba(191,160,122,0.12), transparent 60%);
  pointer-events:none;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--kraft);
  margin-bottom:26px;
}
.hero-eyebrow::before{content:''; width:7px; height:7px; border-radius:50%; background:var(--signal);}
.hero h1{
  font-weight:800; letter-spacing:-0.025em; line-height:1.02;
  font-size:clamp(40px, 6.6vw, 92px);
  max-width:920px;
}
.hero h1 .line{display:block; overflow:hidden;}
.hero h1 .line span{display:inline-block; transform:translateY(110%); transition:transform .9s var(--ease-soft);}
.hero.is-ready h1 .line span{transform:translateY(0);}
.hero h1 .line:nth-child(1) span{transition-delay:.05s;}
.hero h1 .line:nth-child(2) span{transition-delay:.15s;}
.hero h1 .line:nth-child(3) span{transition-delay:.25s;}
.hero h1 em{font-style:normal; color:var(--kraft);}

.hero-sub{
  font-size:19px; line-height:1.65; color:#c9c2b6; max-width:520px;
  margin-top:30px;
}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:44px;}

.hero-stats{
  margin-top:88px; padding-top:36px; border-top:1px solid var(--line-on-dark);
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px;
}
.hero-stat .num{font-family:var(--font-display); font-weight:800; font-size:clamp(28px,3.4vw,42px); color:var(--paper);}
.hero-stat .num .unit{color:var(--signal);}
.hero-stat .label{font-size:13px; color:var(--slate); margin-top:6px; max-width:180px;}

@media (max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,1fr); row-gap:32px;}
}

/* ==========================================================================
   MARQUEE
   ========================================================================== */
.marquee-strip{
  background:var(--paper); border-bottom:1px solid var(--line);
  padding:22px 0; overflow:hidden; white-space:nowrap;
}
.marquee-track{display:inline-flex; gap:56px; animation:marquee 32s linear infinite;}
.marquee-strip:hover .marquee-track{animation-play-state:paused;}
.marquee-track span{
  font-family:var(--font-display); font-weight:700; font-size:16px; color:var(--slate);
  letter-spacing:0.01em; display:inline-flex; align-items:center; gap:56px;
}
.marquee-track span::after{content:''; display:inline-block; margin-left:56px; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:9px solid var(--kraft);}
@keyframes marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ==========================================================================
   SECTION HEADS
   ========================================================================== */
.s-head{max-width:640px; margin-bottom:56px;}
.s-eyebrow{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--signal); font-weight:700; margin-bottom:14px; display:block;}
.s-head h2{font-weight:800; font-size:clamp(30px,4vw,46px); letter-spacing:-0.02em; margin-bottom:16px;}
.s-head p{font-size:16px; line-height:1.7; color:#41392f;}
.s-head.on-dark h2{color:var(--paper);}
.s-head.on-dark p{color:#c9c2b6;}
.s-head.center{margin-left:auto; margin-right:auto; text-align:center;}

.section-pad{padding:110px 0;}
@media (max-width:760px){ .section-pad{padding:72px 0;} }

/* ==========================================================================
   SWING TAG / PULL QUOTE
   ========================================================================== */
.swing-tag{
  position:relative;
  background:var(--paper); color:var(--ink);
  clip-path:polygon(9% 0, 100% 0, 100% 100%, 9% 100%, 0 50%);
  padding:56px 52px 56px 72px;
  max-width:620px;
}
.swing-tag::before{
  content:''; position:absolute; left:26px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:var(--ink);
}
.swing-tag .tag-big{font-family:var(--font-display); font-weight:800; font-size:clamp(24px,3vw,36px); letter-spacing:-0.01em; line-height:1.15;}
.swing-tag .tag-small{font-size:14px; color:var(--slate); margin-top:16px; line-height:1.6;}
.swing-tag .tag-attr{font-size:13px; color:var(--kraft-deep); margin-top:20px; font-weight:600;}

/* ==========================================================================
   CARDS — services / values
   ========================================================================== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line);}
/* The min-width:auto trap (see CLAUDE.md) — a grid item won't shrink below
   its content's intrinsic width by default, so a wide child (e.g. a
   receipt's longest line) can force the whole track, and the page, to
   overflow horizontally instead of just wrapping/shrinking in place. */
.grid-3 > *, .grid-2 > *{ min-width:0; }
@media (max-width:900px){ .grid-3{grid-template-columns:1fr;} .grid-2{grid-template-columns:1fr;} }

.tile{background:var(--white); padding:44px 38px; transition:background .35s var(--ease), transform .5s var(--ease-soft); position:relative; overflow:hidden; will-change:transform;}
.tile::before{content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--signal); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:2;}
.tile:hover{background:var(--paper);}
.tile:hover::before{transform:scaleX(1);}
.tile .tile-num{font-family:var(--font-display); font-weight:800; font-size:13px; color:var(--kraft-deep); letter-spacing:0.08em;}
.tile h3{font-size:22px; font-weight:700; margin:18px 0 12px; letter-spacing:-0.01em;}
.tile p{font-size:14.5px; line-height:1.65; color:#41392f;}
.tile .tile-tag{
  display:inline-block; margin-top:20px; font-size:12px; color:var(--slate);
  padding-top:16px; border-top:1px solid var(--line-soft); width:100%;
}

/* ==========================================================================
   RECEIPT
   ========================================================================== */
.receipt-wrap{display:flex; justify-content:center;}
.receipt{
  background:var(--white); width:100%; max-width:420px;
  padding:40px 32px 0;
  box-shadow:0 30px 70px rgba(26,23,20,0.16);
  transform:rotate(-1.2deg);
  transition:transform .5s var(--ease);
}
.receipt:hover{transform:rotate(0deg) translateY(-4px);}
/* Rotated receipts (base rotation here, or a per-card override via inline
   style like work.html uses) push their bounding box past the viewport
   edge on narrow screens with nothing to compensate for it, causing
   horizontal overflow. The !important is deliberate — it's the only way
   to override an inline style we don't control at the point of use. */
@media (max-width:640px){
  .receipt{ transform:none !important; }
  .receipt:hover{ transform:translateY(-4px); }
}
.receipt-head{text-align:center; margin-bottom:26px;}
.receipt-head .rname{font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:0.02em;}
.receipt-head .rsub{font-size:12px; color:var(--slate); margin-top:5px; letter-spacing:0.03em;}
.receipt-divider{border:none; border-top:1px dashed var(--slate); margin:18px 0;}
.receipt-line{display:flex; justify-content:space-between; gap:16px; font-size:14px; padding:8px 0;}
.receipt-line .rlabel{color:#41392f;}
.receipt-line .rval{font-weight:700; flex-shrink:0; font-family:var(--font-display);}
.receipt-total{display:flex; justify-content:space-between; font-family:var(--font-display); font-weight:800; font-size:18px; padding:18px 0; margin-top:6px; border-top:1px solid var(--ink);}
.receipt-note{font-size:12px; color:var(--slate); text-align:center; padding:18px 0 30px; line-height:1.6;}
.barcode{height:48px; margin:0 -32px; background:repeating-linear-gradient(90deg, var(--ink) 0px, var(--ink) 2px, transparent 2px, transparent 4px, var(--ink) 4px, var(--ink) 5px, transparent 5px, transparent 9px, var(--ink) 9px, var(--ink) 12px, transparent 12px, transparent 14px);}
.receipt-scallop{height:13px; margin:0 -32px; background-color:var(--paper); background-image:radial-gradient(circle at 8px 0, var(--white) 7px, transparent 7px); background-size:16px 13px; background-repeat:repeat-x;}

/* ==========================================================================
   BADGES / TAGS
   ========================================================================== */
.tag-sale{background:var(--signal); color:var(--white); font-weight:700; font-size:12px; padding:5px 11px 5px 15px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%); display:inline-block;}
.tag-new{background:var(--ink); color:var(--paper); font-weight:700; font-size:12px; padding:5px 11px 5px 15px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,6px 50%); display:inline-block;}
.tag-stock{display:inline-flex; align-items:center; gap:6px; color:var(--stock-green); font-weight:600; font-size:13px;}
.stock-dot{width:7px; height:7px; border-radius:50%; background:var(--stock-green); flex-shrink:0;}

/* ==========================================================================
   PRINCIPLES / LIST ROWS
   ========================================================================== */
.principle{
  display:grid; grid-template-columns:240px 1fr; gap:32px;
  padding:32px 0; border-bottom:1px solid var(--line);
}
.principle:first-child{border-top:1px solid var(--line);}
.principle h3{font-size:19px; font-weight:700;}
.principle p{font-size:15.5px; line-height:1.7; color:#41392f; max-width:560px;}
@media (max-width:760px){ .principle{grid-template-columns:1fr; gap:10px;} }

/* ==========================================================================
   FOUNDERS
   ========================================================================== */
.founder-card{background:var(--white); border:1px solid var(--line); padding:36px;}
.founder-avatar{
  width:64px; height:64px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--paper);
  margin-bottom:22px;
}
.founder-card h3{font-size:21px; font-weight:700;}
.founder-role{font-size:13px; color:var(--kraft-deep); font-weight:600; margin-top:4px; letter-spacing:0.01em;}
.founder-card p.bio{font-size:14.5px; line-height:1.7; color:#41392f; margin-top:16px;}

/* ==========================================================================
   PRICE LADDER
   ========================================================================== */
.price-ladder{display:flex; flex-direction:column; gap:0; max-width:480px;}
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-size:17px; padding:20px 0; border-bottom:1px solid var(--line);}
.price-row:first-child{border-top:1px solid var(--line);}
.price-row .name{font-family:var(--font-body); font-weight:600;}
.price-row .desc{display:block; font-size:13px; font-weight:400; color:var(--slate); margin-top:4px;}
.price-row .amount{font-family:var(--font-display); font-weight:800; white-space:nowrap;}

/* ==========================================================================
   PROCESS STEPS
   ========================================================================== */
.process-row{
  display:grid; grid-template-columns:80px 1fr; gap:28px;
  padding:34px 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.process-row:first-child{border-top:1px solid var(--line);}
.process-step-num{font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--kraft); transition:color .3s var(--ease);}
.process-row h3{font-size:20px; font-weight:700; margin-bottom:8px;}
.process-row p{font-size:15px; line-height:1.7; color:#41392f; max-width:560px;}
/* When a .process-row is a real link (services.html hub teasers) rather than
   a plain content row — reuse the same visual, just add a hover cue. */
a.process-row{ transition:padding-left .3s var(--ease); }
a.process-row:hover{ padding-left:8px; }
a.process-row:hover .process-step-num{ color:var(--signal); }
.link-arrow-row{
  display:inline-flex; align-items:center; gap:6px; margin-top:14px;
  font-size:13px; font-weight:600; color:var(--signal);
}
a.process-row:hover .link-arrow-row .btn-arrow{ transform:translateX(4px); }

/* ==========================================================================
   VOICE / QUOTE STRIP
   ========================================================================== */
.voice-strip{
  background:var(--signal); color:var(--white);
  padding:26px 30px; font-family:var(--font-display); font-weight:700;
  font-size:clamp(18px,2.4vw,26px); letter-spacing:-0.005em; line-height:1.3;
  max-width:680px;
}

/* ==========================================================================
   NOT-FOR / FIT GRID
   ========================================================================== */
.fit-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);}
.fit-col{background:var(--white); padding:44px;}
.fit-col h3{font-size:20px; font-weight:700; margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.fit-col.good h3::before{content:'✓'; color:var(--stock-green); font-family:var(--font-body);}
.fit-col.bad h3::before{content:'✕'; color:var(--signal); font-family:var(--font-body);}
.fit-col li{font-size:14.5px; line-height:1.7; color:#41392f; padding:11px 0; border-top:1px solid var(--line-soft);}
.fit-col li:first-of-type{border-top:none;}
@media (max-width:760px){ .fit-grid{grid-template-columns:1fr;} }

/* ==========================================================================
   CTA BAND
   ========================================================================== */
.cta-band{
  background:var(--ink); color:var(--paper);
  padding:110px 0; text-align:center; position:relative; overflow:hidden;
}
.cta-band::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(60% 60% at 50% 0%, rgba(225,75,61,0.16), transparent 65%);
}
.cta-band h2{font-weight:800; font-size:clamp(32px,5vw,58px); letter-spacing:-0.02em; max-width:760px; margin:0 auto 22px;}
.cta-band p{font-size:17px; color:#c9c2b6; max-width:480px; margin:0 auto 40px;}
.cta-band .btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap; position:relative; z-index:1;}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--ink); color:var(--slate); padding:64px 0 32px; border-top:1px solid var(--line-on-dark);}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--line-on-dark);}
.footer-brand .word{font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--paper);}
.footer-brand p{font-size:14px; line-height:1.7; color:var(--slate); max-width:280px; margin-top:16px;}
.footer-col h4{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--kraft); margin-bottom:16px;}
.footer-col li{margin-bottom:11px;}
.footer-col a{font-size:14px; color:#c9c2b6; transition:color .25s ease;}
.footer-col a:hover{color:var(--paper);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:28px; gap:16px; flex-wrap:wrap; font-size:13px;}
.footer-tag{
  background:var(--paper); color:var(--ink);
  font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:0.01em;
  padding:7px 14px 7px 18px;
  clip-path:polygon(0 0,100% 0,100% 100%,0 100%,7px 50%);
}
@media (max-width:900px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:36px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }

/* ==========================================================================
   PAGE HERO (inner pages)
   ========================================================================== */
.page-hero{
  padding:calc(var(--nav-h) + 76px) 0 76px;
  background:var(--ink); color:var(--paper);
  position:relative; overflow:hidden;
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(55% 50% at 88% 0%, rgba(225,75,61,0.16), transparent 60%);
}
.page-hero .s-eyebrow{color:var(--kraft);}
.page-hero h1{font-weight:800; font-size:clamp(34px,5.5vw,64px); letter-spacing:-0.02em; max-width:820px;}
.page-hero p{font-size:17px; color:#c9c2b6; max-width:520px; margin-top:22px; line-height:1.7;}

/* ==========================================================================
   FORM (contact)
   ========================================================================== */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); font-weight:600;}
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--white); border:1px solid var(--line); padding:14px 16px;
  transition:border-color .25s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--ink);
}
.form-field textarea{resize:vertical; min-height:120px;}
@media (max-width:640px){ .form-grid{grid-template-columns:1fr;} }

.contact-info-row{display:flex; align-items:center; gap:14px; padding:18px 0; border-top:1px solid var(--line);}
.contact-info-row:last-child{border-bottom:1px solid var(--line);}
.contact-info-row .ci-label{font-size:12px; color:var(--slate); width:110px; flex-shrink:0;}
.contact-info-row .ci-val{font-size:15px; font-weight:600;}

/* ==========================================================================
   COUNT UP UTILITY
   ========================================================================== */
[data-count]{font-variant-numeric:tabular-nums;}

/* ==========================================================================
   STATEMENT BAND — full-bleed, one bold line
   ========================================================================== */
.statement-band{
  width:100%; padding:130px 24px; text-align:center;
  background:var(--ink); color:var(--paper);
  position:relative; overflow:hidden;
}
.statement-band.is-kraft{background:var(--kraft); color:var(--ink);}
.statement-band.is-signal{background:var(--signal); color:var(--white);}
.statement-band .stmt-eyebrow{
  display:block; font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  margin-bottom:28px; opacity:0.6; font-weight:600;
}
.statement-band h2{
  font-family:var(--font-display); font-weight:800; letter-spacing:-0.035em; line-height:1.02;
  font-size:clamp(34px, 6.4vw, 90px); max-width:1180px; margin:0 auto;
}
.statement-band h2 em{font-style:normal; opacity:0.45;}
@media (max-width:640px){ .statement-band{padding:88px 22px;} }

/* ==========================================================================
   HORIZONTAL SCROLL GALLERY — bold color-blocked cards
   ========================================================================== */
.scroll-gallery-outer{width:100%; overflow:hidden; padding:6px 0 26px;}
.scroll-gallery{
  display:flex; gap:2px;
  overflow-x:auto; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding:0 max(24px, calc((100vw - 1200px) / 2)) 10px;
  scrollbar-width:none; cursor:grab;
}
.scroll-gallery::-webkit-scrollbar{display:none;}
.scroll-gallery.is-dragging{cursor:grabbing; scroll-snap-type:none; user-select:none;}
.scroll-card{
  scroll-snap-align:start; flex:0 0 auto; width:300px; min-height:340px;
  padding:38px 32px; display:flex; flex-direction:column; justify-content:space-between;
  transition:transform .4s var(--ease-soft);
}
.scroll-card:hover{transform:translateY(-6px);}
.scroll-card .sc-tag{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; opacity:0.65; font-weight:600;}
.scroll-card h3{font-family:var(--font-display); font-size:25px; font-weight:800; letter-spacing:-0.015em; margin-top:18px;}
.scroll-card p{font-size:14px; line-height:1.65; margin-top:14px; opacity:0.85;}
.scroll-card .sc-num{font-family:var(--font-display); font-weight:800; font-size:13px; opacity:0.55;}
.scroll-card.bg-ink{background:var(--ink); color:var(--paper);}
.scroll-card.bg-kraft{background:var(--kraft); color:var(--ink);}
.scroll-card.bg-signal{background:var(--signal); color:var(--white);}
.scroll-card.bg-paper{background:var(--white); color:var(--ink); border:1px solid var(--line);}
.scroll-hint{
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);
  margin-top:4px;
}
.scroll-hint .arrow{display:inline-block; animation:hint-slide 1.6s ease-in-out infinite;}
@keyframes hint-slide{ 0%,100%{transform:translateX(0);} 50%{transform:translateX(6px);} }

/* ==========================================================================
   MISC
   ========================================================================== */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
@media (max-width:900px){ .split{grid-template-columns:1fr; gap:40px;} }

.kicker-line{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.kicker-line .dash{width:32px; height:1.5px; background:var(--signal);}
.kicker-line span{font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--slate); font-weight:600;}

/* ==========================================================================
   SCROLL PROGRESS
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; height:2.5px; width:0%;
  background:var(--signal); z-index:2500;
  box-shadow:0 0 8px rgba(225,75,61,0.6);
}

/* ==========================================================================
   PAGE-LOAD CURTAIN
   ========================================================================== */
.page-curtain{
  position:fixed; inset:0; z-index:4000; background:var(--ink);
  transform-origin:bottom; pointer-events:none;
}
.page-curtain.is-hidden{animation:curtain-out 1s var(--ease) forwards;}
.page-curtain.is-leaving{animation:curtain-in .5s var(--ease) forwards;}
@keyframes curtain-out{ to{ transform:scaleY(0); } }
@keyframes curtain-in{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@media (prefers-reduced-motion: reduce){ .page-curtain{display:none;} }

/* ==========================================================================
   SPOTLIGHT (mouse-follow glow on dark / feature sections)
   ========================================================================== */
.spotlight-zone{position:relative; isolation:isolate;}
.spotlight-zone::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(560px circle at var(--sx,50%) var(--sy,20%), rgba(225,75,61,0.16), transparent 62%);
  opacity:0; transition:opacity .4s ease;
}
.spotlight-zone:hover::before{opacity:1;}
.spotlight-zone > .wrap{position:relative; z-index:1;}

/* ==========================================================================
   GRID OVERLAY (decorative backdrop on dark sections)
   ========================================================================== */
.grid-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(var(--line-on-dark) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-on-dark) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.6), transparent 75%);
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.6), transparent 75%);
}

/* ==========================================================================
   VERTEX MARK — converging lines, the literal brand motif
   ========================================================================== */
.vertex-mark{position:absolute; pointer-events:none; z-index:0; overflow:visible;}
.vertex-mark path{fill:none; stroke:var(--kraft); stroke-width:1; opacity:0.55;
  stroke-dasharray:600; stroke-dashoffset:600; animation:draw-line 2.4s var(--ease-soft) forwards;}
.vertex-mark path:nth-child(1){animation-delay:.1s;}
.vertex-mark path:nth-child(2){animation-delay:.28s;}
.vertex-mark path:nth-child(3){animation-delay:.46s;}
.vertex-mark path:nth-child(4){animation-delay:.64s;}
.vertex-mark circle{fill:var(--signal); opacity:0; animation:dot-pop .5s var(--ease) forwards; animation-delay:1.5s;}
@keyframes draw-line{ to{stroke-dashoffset:0;} }
@keyframes dot-pop{ from{opacity:0; transform:scale(0);} to{opacity:1; transform:scale(1);} }
@media (prefers-reduced-motion: reduce){
  .vertex-mark path{stroke-dashoffset:0; animation:none;}
  .vertex-mark circle{opacity:1; animation:none;}
}

/* ==========================================================================
   HERO WATERMARK
   ========================================================================== */
.hero-watermark{
  position:absolute; right:-2%; bottom:-6%; z-index:0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(140px,24vw,380px); line-height:1; letter-spacing:-0.045em;
  color:transparent; -webkit-text-stroke:1px var(--line-on-dark);
  pointer-events:none; user-select:none; white-space:nowrap;
}

/* ==========================================================================
   BADGE STAMP — rotating seal
   ========================================================================== */
.badge-stamp{
  position:absolute; width:126px; height:126px;
  animation:spin-slow 26s linear infinite;
  z-index:1;
}
.badge-stamp svg{width:100%; height:100%;}
.badge-stamp .stamp-core{
  position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  background:var(--signal); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(225,75,61,0.35);
}
.badge-stamp .stamp-core span{
  font-family:var(--font-display); font-weight:800; font-size:10px; color:var(--white);
  text-align:center; line-height:1.15; letter-spacing:0.01em;
}
@keyframes spin-slow{ to{transform:rotate(360deg);} }
@media (max-width:900px){ .badge-stamp{display:none;} }

/* ==========================================================================
   TILT CARDS
   ========================================================================== */
.tile.tilt{transition:transform .35s var(--ease-soft), background .35s var(--ease);}

/* ==========================================================================
   SPLIT-WORD HEADLINE REVEAL
   ========================================================================== */
[data-split]{overflow:visible;}
.split-word{display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:0.08em; margin-bottom:-0.08em;}
.split-word span{display:inline-block;}
/* No default hidden transform here — see the [data-reveal] comment above;
   same reasoning applies (GSAP-managed inline style, safe fallback = visible). */

/* ==========================================================================
   FLOATING ORBIT DOT (subtle ambient motion on light sections)
   ========================================================================== */
.orbit-field{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}
.orbit-dot{
  position:absolute; border-radius:50%; background:var(--kraft);
  opacity:0.35; animation:orbit-float 9s ease-in-out infinite;
}
.orbit-dot.d2{background:var(--signal); animation-duration:11s; animation-delay:1.2s;}
.orbit-dot.d3{background:var(--slate); animation-duration:13s; animation-delay:2.4s;}
@keyframes orbit-float{
  0%,100%{transform:translate(0,0);}
  50%{transform:translate(18px,-22px);}
}

/* ==========================================================================
   ASCENT-ALIGNED RESKIN — services.html, contact.html & work.html only,
   scoped by body class so about.html and the original homepage concept
   keep their current look. Pulls the big display headings on these pages
   toward the oversized, uppercase, tight-tracking Syne treatment the
   ascent homepage settled on, and swaps the sparing --signal accent out
   for --kraft-deep on the smaller kicker accents (signal stays for
   buttons/hover/progress only, per the brand system).
   ========================================================================== */
body.page-services .page-hero h1,
body.page-contact .page-hero h1,
body.page-work .page-hero h1,
body.page-faq .page-hero h1{
  text-transform:uppercase; letter-spacing:-0.04em; line-height:0.95;
}
body.page-services .statement-band h2,
body.page-contact .statement-band h2,
body.page-work .statement-band h2{
  text-transform:uppercase; letter-spacing:-0.045em; line-height:0.9;
}
body.page-services .cta-band h2,
body.page-contact .cta-band h2,
body.page-work .cta-band h2,
body.page-faq .cta-band h2{
  text-transform:uppercase; letter-spacing:-0.04em; line-height:0.92;
}
body.page-services .s-head h2,
body.page-contact .s-head h2,
body.page-work .s-head h2{
  text-transform:uppercase; letter-spacing:-0.03em; line-height:0.95;
}
body.page-services .kicker-line .dash,
body.page-contact .kicker-line .dash,
body.page-work .kicker-line .dash,
body.page-faq .kicker-line .dash{ background:var(--kraft-deep); }

/* ==========================================================================
   LEGAL PROSE — privacy.html, terms.html
   ========================================================================== */
.legal-content{ max-width:720px; }
.legal-content h2{ font-size:22px; font-weight:800; letter-spacing:-0.01em; margin:48px 0 14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content p{ font-size:15.5px; line-height:1.75; color:#41392f; margin-bottom:14px; }
.legal-content ul{ padding-left:22px; margin-bottom:14px; }
.legal-content li{ font-size:15.5px; line-height:1.75; color:#41392f; margin-bottom:8px; }
.legal-content a{ text-decoration:underline; color:var(--ink); }
.legal-content .legal-updated{ font-size:13px; color:var(--slate); margin-bottom:40px; }

/* ==========================================================================
   FAQ ACCORDION — faq.html, native <details>/<summary>
   ========================================================================== */
.faq-list{ max-width:760px; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding:26px 0; font-family:var(--font-display); font-weight:700; font-size:17px;
  letter-spacing:-0.01em; cursor:pointer; list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:22px; font-weight:400; color:var(--kraft-deep); flex-shrink:0;
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ font-size:15px; line-height:1.75; color:#41392f; max-width:600px; padding:0 0 26px; }

/* ==========================================================================
   SERVICE PAGE BREADCRUMB + IN-PAGE TOC — web-design/seo/email/meta-ads.html
   ========================================================================== */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:0.04em; margin-bottom:18px; }
.breadcrumb a{ color:var(--kraft); transition:color .25s ease; }
.breadcrumb a:hover{ color:var(--paper); }
.breadcrumb .crumb-sep{ color:var(--slate); }
.breadcrumb [aria-current]{ color:var(--paper); opacity:.7; }

.page-toc{
  position:sticky; top:var(--nav-h); z-index:500;
  display:flex; gap:28px; overflow-x:auto;
  padding:16px 40px; background:rgba(244,242,238,0.92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:top .45s var(--ease);
}
/* The floating nav pill hides itself on scroll-down (js/main.js toggles
   .nav-hidden on <html> to match) — close the gap that was reserved for
   it instead of leaving dead space above the sticky bar. */
html.nav-hidden .page-toc{ top:0; }
.page-toc a{
  font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap;
  padding-bottom:4px; border-bottom:2px solid transparent; flex-shrink:0;
  transition:color .3s var(--ease), border-color .3s var(--ease);
}
.page-toc a:hover, .page-toc a.is-active{ color:var(--ink); border-color:var(--signal); }
@media (max-width:640px){ .page-toc{ padding:14px 20px; gap:20px; } }
@media (prefers-reduced-motion: reduce){ .page-toc{ position:static; } }