/* ===========================================================
   Zenith Digital — "Ink & Forest" design system
   Web · SEO · AI for local businesses · Australia-wide
   Vanilla CSS. No frameworks. No external images.
   Display + UI/labels: Instrument Sans · Body: Inter
   Colour rule: the accent signals FUNCTION (buttons, links, labels,
   focus, icons, data). It never decorates a word inside a sentence.
   =========================================================== */

/* -----------------------------------------------------------
   1. Tokens
----------------------------------------------------------- */
:root{
  --bg:#f7f7f5;           /* warm off-white base */
  --paper:#ffffff;
  --ink:#12130f;          /* warm charcoal ink — hero, footer, authority */
  --ink-2:#1e201a;
  --ink-3:#2a2c25;        /* cards on dark */
  --accent:#1f5c3d;       /* deep forest green — on light surfaces */
  --accent-2:#3f9a68;     /* lifted green — on ink, clears WCAG AA (5.4:1) */
  --accent-soft:rgba(31,92,61,0.07);
  --accent-glow:rgba(31,92,61,0.20);
  --text:#12130f;
  --muted:#5c5f57;        /* body text muted */
  --muted-2:#8a8d83;      /* captions */
  --line:#e5e5e0;         /* light borders */
  --line-dark:rgba(255,255,255,0.09);

  --ease:cubic-bezier(0.16,1,0.3,1);
  --shadow-card:0 24px 48px -20px rgba(18,19,15,0.15);
  --maxw:1160px;

  --f-display:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --f-ui:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

/* -----------------------------------------------------------
   2. Reset + base
----------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:15px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  opacity:0;animation:pageIn 0.4s var(--ease) forwards;
}
@keyframes pageIn{to{opacity:1;}}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
img{max-width:100%;display:block;}
button{font-family:inherit;}

::selection{background:var(--accent);color:#fff;}

/* Focus (keyboard) */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;
}

/* Custom scrollbar */
::-webkit-scrollbar{width:11px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:#d3d3cc;border-radius:10px;border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:var(--accent);}
html{scrollbar-color:#d3d3cc var(--bg);}

/* -----------------------------------------------------------
   3. Typography
----------------------------------------------------------- */
h1,h2,h3,h4,h5{
  font-family:var(--f-display);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-1px;
  color:var(--text);
  text-wrap:balance;
}
/* Headings carry ONE colour and ONE style — impact comes from size,
   weight and spacing, never from tinting a word mid-sentence.
   Safety net in case stray inline markup survives in content. */
h1 em,h2 em,h3 em,h4 em,h5 em,
h1 span,h2 span,h3 span,h4 span,h5 span,
.statement h2 em{font-style:normal;font-weight:inherit;color:inherit;background:none;-webkit-text-fill-color:currentColor;}

/* -----------------------------------------------------------
   4. Layout helpers
----------------------------------------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 48px;}
main{display:block;}
section{position:relative;}
.section{padding:112px 0;}

/* Section header pattern */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--accent);margin-bottom:20px;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--accent);}
.on-dark .eyebrow,.eyebrow.on-dark{color:var(--accent-2);}
.on-dark .eyebrow::before,.eyebrow.on-dark::before{background:var(--accent-2);}

.section-head{max-width:640px;margin-bottom:58px;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-head.center .eyebrow{justify-content:center;}

h2.h2,.h2{font-size:clamp(30px,4.3vw,47px);letter-spacing:-1.2px;line-height:1.05;}
.section-head p,.lead{font-size:16px;color:var(--muted);line-height:1.72;max-width:520px;margin-top:18px;}
.section-head.center p{margin-left:auto;margin-right:auto;}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:#fff;}
.on-dark .section-head p,.on-dark .lead{color:rgba(255,255,255,0.6);}


/* -----------------------------------------------------------
   5. Buttons
----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--f-ui);font-size:14.5px;font-weight:500;
  padding:14px 28px;border-radius:100px;border:1px solid transparent;
  cursor:pointer;white-space:nowrap;
  transition:transform 0.25s var(--ease),box-shadow 0.25s var(--ease),
             background 0.25s var(--ease),border-color 0.25s var(--ease),color 0.25s var(--ease);
}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;transition:transform 0.25s var(--ease);}
.btn-primary{background:var(--ink);color:#fff;}
.btn-primary:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent-glow);}
.btn-primary:hover svg{transform:translateX(4px);}
.btn-secondary{background:var(--paper);color:var(--ink);border-color:var(--line);}
.btn-secondary:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 26px -16px rgba(18,19,15,0.4);}
.btn-lg{padding:16px 34px;font-size:15px;}
.btn-full{width:100%;}
/* dark-surface buttons */
.on-dark .btn-primary{background:var(--accent-2);color:#12130f;}
.on-dark .btn-primary:hover{background:#4fae79;}
.on-dark .btn-secondary{background:transparent;color:#fff;border-color:var(--line-dark);}
.on-dark .btn-secondary:hover{border-color:var(--accent-2);}

/* -----------------------------------------------------------
   6. Cards
----------------------------------------------------------- */
.card{
  position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:18px;padding:32px 30px;overflow:hidden;
  transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease),border-color 0.35s var(--ease);
}
.card.glow::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 60%);
  transition:opacity 0.35s var(--ease);
}
.card.glow:hover::before{opacity:1;}
.card:hover{transform:translateY(-4px);border-color:rgba(31,92,61,0.28);box-shadow:var(--shadow-card);}
.card>*{position:relative;}

/* icon tile */
.icon-tile{
  width:50px;height:50px;border-radius:13px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform 0.35s var(--ease),background 0.35s var(--ease);
}
.icon-tile svg{width:22px;height:22px;stroke:var(--accent);fill:none;stroke-width:1.8;transition:stroke 0.35s var(--ease);}
.card:hover .icon-tile{background:var(--accent);}
.card:hover .icon-tile svg{stroke:#fff;}

/* reusable checklist */
.checklist{display:flex;flex-direction:column;}
.checklist li{
  display:flex;align-items:flex-start;gap:11px;font-size:13.5px;color:var(--muted);
  padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5;
}
.checklist li:last-child{border-bottom:none;}
.checklist li svg{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2.5;flex-shrink:0;margin-top:2px;}
.on-dark .checklist li{color:rgba(255,255,255,0.68);border-color:var(--line-dark);}
.on-dark .checklist li svg{stroke:var(--accent-2);}

/* -----------------------------------------------------------
   7. Reveal + progress + back-to-top
----------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity 0.85s var(--ease),transform 0.85s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal-d1{transition-delay:0.12s;}
.reveal-d2{transition-delay:0.24s;}
.reveal-d3{transition-delay:0.36s;}

.progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:1000;background:var(--accent);transition:width 0.05s linear;}

.back-top{
  position:fixed;right:26px;bottom:26px;width:46px;height:46px;border-radius:50%;
  background:var(--ink);border:none;cursor:pointer;z-index:90;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transform:translateY(10px);
  transition:opacity 0.3s var(--ease),transform 0.3s var(--ease),background 0.25s;
  box-shadow:0 10px 28px -8px rgba(18,19,15,0.5);
}
.back-top.show{opacity:1;pointer-events:auto;transform:none;}
.back-top:hover{background:var(--accent);transform:translateY(-3px);}
.back-top svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.5;}

/* -----------------------------------------------------------
   8. Navigation
----------------------------------------------------------- */
nav#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:70px;
  background:rgba(247,247,245,0.72);
  backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid transparent;
  transition:height 0.3s var(--ease),border-color 0.3s var(--ease),background 0.3s var(--ease);
}
nav#nav.scrolled{height:58px;border-bottom-color:var(--line);background:rgba(247,247,245,0.85);}
.nav-inner{max-width:var(--maxw);margin:0 auto;height:100%;padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
.logo{display:inline-flex;align-items:center;gap:10px;}
.logo-mark{width:30px;height:30px;flex-shrink:0;transition:transform 0.3s var(--ease);}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.06);}
.logo-name{font-family:var(--f-ui);font-size:17px;font-weight:600;letter-spacing:-0.3px;color:var(--ink);}
.logo-name span{color:var(--accent);}

.nav-links{display:flex;align-items:center;gap:34px;}
.nav-links a{position:relative;font-family:var(--f-ui);font-size:14px;font-weight:400;color:var(--muted);transition:color 0.2s;padding:4px 0;}
.nav-links a:hover{color:var(--ink);}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-3px;width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateX(-50%) scale(0);transition:transform 0.25s var(--ease);}
.nav-links a.active{color:var(--ink);}
.nav-links a.active::after{transform:translateX(-50%) scale(1);}
.nav-cta{padding:10px 22px;font-size:13.5px;}

.hamburger{display:none;background:none;border:none;cursor:pointer;width:42px;height:42px;position:relative;z-index:210;}
.hamburger span{display:block;width:20px;height:2px;margin:5px auto;border-radius:2px;background:var(--ink);transition:all 0.3s var(--ease);}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Full-screen overlay drawer */
/* Closed = invisible AND unfocusable (visibility flips after the fade-out) */
.drawer{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;justify-content:center;padding:100px 32px 40px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.4s var(--ease),visibility 0s linear 0.4s;overflow-y:auto;}
.drawer.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity 0.4s var(--ease);}
/* Desktop never shows the drawer, even if it was left open during a resize */
@media(min-width:861px){.drawer{display:none;}}
.drawer-links{display:flex;flex-direction:column;gap:6px;}
.drawer-links a{
  font-family:var(--f-display);font-size:clamp(32px,9vw,50px);font-weight:600;
  letter-spacing:-1px;color:#fff;padding:8px 0;width:max-content;
  opacity:0;transform:translateY(16px);transition:opacity 0.45s var(--ease),transform 0.45s var(--ease),color 0.2s;
}
.drawer.open .drawer-links a{opacity:1;transform:none;}
.drawer.open .drawer-links a:nth-child(1){transition-delay:0.08s;}
.drawer.open .drawer-links a:nth-child(2){transition-delay:0.14s;}
.drawer.open .drawer-links a:nth-child(3){transition-delay:0.2s;}
.drawer.open .drawer-links a:nth-child(4){transition-delay:0.26s;}
.drawer.open .drawer-links a:nth-child(5){transition-delay:0.32s;}
.drawer-links a:hover{color:var(--accent-2);}
.drawer-foot{margin-top:auto;padding-top:40px;border-top:1px solid var(--line-dark);display:flex;flex-direction:column;gap:8px;opacity:0;transition:opacity 0.5s var(--ease) 0.36s;}
.drawer.open .drawer-foot{opacity:1;}
.drawer-foot .dl{font-family:var(--f-ui);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);}
.drawer-foot a.dv,.drawer-foot .dv{font-size:15px;color:rgba(255,255,255,0.82);font-weight:500;}
.drawer-social{display:flex;gap:10px;margin-top:14px;}
.drawer-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.55);transition:all 0.2s;}
.drawer-social a:hover{border-color:var(--accent-2);color:var(--accent-2);}
.drawer-social svg{width:17px;height:17px;fill:currentColor;}

/* -----------------------------------------------------------
   9. Shared hero fragments (dot field, sub, actions)
----------------------------------------------------------- */
/* Ambient colour blobs — page heads, 404 and the closing beat. */
.aura{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.aura span{position:absolute;border-radius:50%;filter:blur(80px);}
.aura .a1{width:620px;height:620px;top:-140px;left:-120px;background:radial-gradient(circle,rgba(63,154,104,0.34),transparent 65%);animation:drift1 20s ease-in-out infinite;}
.aura .a2{width:560px;height:560px;top:24%;right:-140px;background:radial-gradient(circle,rgba(63,154,104,0.26),transparent 65%);animation:drift2 22s ease-in-out infinite;}
.aura .a3{width:480px;height:480px;bottom:-180px;left:34%;background:radial-gradient(circle,rgba(63,154,104,0.20),transparent 65%);animation:drift3 18s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,40px) scale(1.12);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,30px) scale(1.08);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(30px,-40px) scale(1.1);}}
.hero-dots{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,0.09) 1px,transparent 1px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 68% 60% at 42% 42%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse 68% 60% at 42% 42%,#000 15%,transparent 72%);}
.hero-sub{color:rgba(255,255,255,0.62);font-size:clamp(15px,2vw,18px);line-height:1.7;max-width:520px;margin-bottom:36px;}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:56px;}

/* -----------------------------------------------------------
   10. Browser frame component (signature)
----------------------------------------------------------- */
.browser{background:var(--paper);border:1px solid rgba(255,255,255,0.12);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,0.5);}
.browser-bar{height:38px;display:flex;align-items:center;gap:14px;padding:0 14px;background:var(--bg);border-bottom:1px solid var(--line);}
.browser-dots{display:flex;gap:6px;}
.browser-dots i{width:10px;height:10px;border-radius:50%;background:#d6d6cf;}
.browser-dots i:nth-child(1){background:#f0736a;}
.browser-dots i:nth-child(2){background:#f2b34b;}
.browser-dots i:nth-child(3){background:#4bce8e;}
.browser-url{flex:1;height:22px;border-radius:6px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 10px;font-family:var(--f-ui);font-size:10.5px;color:var(--muted);}
.browser-url svg{width:10px;height:10px;stroke:var(--muted-2);fill:none;stroke-width:2;}
.browser-body{padding:20px;background:linear-gradient(180deg,var(--paper),var(--bg));}

/* stylised mini website mockup (Web Design illustration) */
.mock-site{display:flex;flex-direction:column;gap:12px;}
.mock-nav{display:flex;align-items:center;justify-content:space-between;}
.mock-logo{width:52px;height:10px;border-radius:5px;background:var(--accent);}
.mock-nav-links{display:flex;gap:8px;}
.mock-nav-links i{width:22px;height:6px;border-radius:3px;background:var(--line);}
.mock-hero{border-radius:10px;background:var(--ink);padding:20px 18px;position:relative;overflow:hidden;}
.mock-hero::after{content:"";position:absolute;top:-30px;right:-20px;width:120px;height:120px;background:radial-gradient(circle,var(--accent-glow),transparent 65%);}
.mock-hero .l{height:9px;border-radius:5px;background:rgba(255,255,255,0.85);margin-bottom:7px;}
.mock-hero .l.w70{width:70%;}
.mock-hero .l.w45{width:45%;background:var(--accent-2);}
.mock-hero .btn-fake{margin-top:12px;width:74px;height:20px;border-radius:100px;background:var(--accent);}
.mock-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mock-cards i{height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--line);}
.mock-cards i:nth-child(2){background:var(--accent-soft);border-color:rgba(31,92,61,0.25);}

/* SEO search-results illustration */
.illus{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:26px;overflow:hidden;}
.illus-search .search-bar{background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:11px 16px;display:flex;align-items:center;gap:10px;font-family:var(--f-ui);font-size:13px;color:var(--muted);margin-bottom:16px;}
.illus-search .search-bar svg{width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:2;}
.result{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;}
.result.top{border-color:rgba(31,92,61,0.4);box-shadow:0 10px 24px -14px var(--accent-glow);}
.result .tag-pin{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-size:9.5px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--accent);margin-bottom:9px;}
.result .tag-pin::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);}
.result .rl{height:8px;border-radius:4px;background:var(--line);margin-bottom:6px;}
.result .rl.t{height:10px;width:62%;background:var(--accent);}
.result .rl.w80{width:80%;}
.result .rl.w40{width:40%;}
.result:not(.top){opacity:0.62;}

/* AI chat illustration */
.illus-chat{display:flex;flex-direction:column;gap:12px;}
.bubble{max-width:80%;padding:12px 15px;border-radius:16px;font-size:12.5px;line-height:1.5;}
.bubble.them{align-self:flex-start;background:var(--paper);border:1px solid var(--line);color:var(--muted);border-bottom-left-radius:4px;}
.bubble.me{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px;}
.bubble .typing{display:inline-flex;gap:4px;}
.bubble .typing i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.85);animation:blink 1.2s infinite;}
.bubble .typing i:nth-child(2){animation-delay:0.2s;}
.bubble .typing i:nth-child(3){animation-delay:0.4s;}
@keyframes blink{0%,100%{opacity:0.3;}50%{opacity:1;}}

/* -----------------------------------------------------------
   11. Grids + services (home)
----------------------------------------------------------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.svc-card{display:flex;flex-direction:column;}
.svc-card .icon-tile{margin-bottom:24px;}
.card h3.svc-name{font-size:22px;letter-spacing:-0.5px;margin-bottom:11px;}
.svc-desc{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:20px;}
.svc-card .checklist{margin-bottom:22px;}
.svc-more{margin-top:auto;font-family:var(--f-ui);font-size:13px;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;gap:7px;transition:gap 0.25s var(--ease);}
.svc-more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.card:hover .svc-more{gap:11px;}

/* -----------------------------------------------------------
   12. Process (dark, self-drawing line)
----------------------------------------------------------- */
.process{background:var(--ink);color:#fff;overflow:hidden;}
.process::before{content:"";position:absolute;top:-180px;right:-160px;width:520px;height:520px;background:radial-gradient(circle,rgba(63,154,104,0.14),transparent 65%);pointer-events:none;}
.proc-grid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.proc-line{position:absolute;top:53px;left:12%;right:12%;height:2px;z-index:0;overflow:visible;}
.proc-line line{stroke:url(#procgrad);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;}
.proc-line.draw line{transition:stroke-dashoffset 1.6s var(--ease);stroke-dashoffset:0;}
.proc{position:relative;z-index:1;background:rgba(255,255,255,0.03);border:1px solid var(--line-dark);border-radius:18px;padding:30px 26px;transition:transform 0.35s var(--ease),border-color 0.35s var(--ease),background 0.35s var(--ease);}
.proc:hover{transform:translateY(-4px);border-color:rgba(63,154,104,0.4);background:rgba(255,255,255,0.05);}
.proc-node{width:46px;height:46px;border-radius:50%;background:var(--ink-2);border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;font-family:var(--f-ui);font-weight:600;font-size:15px;color:var(--accent-2);margin-bottom:20px;position:relative;z-index:2;}
.proc h3{font-size:19px;color:#fff;letter-spacing:-0.4px;margin-bottom:11px;}
.proc p{font-size:13.5px;color:rgba(255,255,255,0.55);line-height:1.65;}

/* Guarantee banner (dark) */
.guarantee{margin-top:56px;display:flex;align-items:center;gap:26px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(63,154,104,0.14),rgba(63,154,104,0.04));border:1px solid rgba(63,154,104,0.26);border-radius:20px;padding:34px 38px;}
.guarantee .g-icon{width:58px;height:58px;border-radius:16px;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 14px 30px -10px var(--accent-glow);}
.guarantee .g-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2;}
.guarantee h3{font-size:21px;color:#fff;margin-bottom:6px;letter-spacing:-0.4px;}
.guarantee p{font-size:14px;color:rgba(255,255,255,0.58);max-width:600px;line-height:1.6;}

/* -----------------------------------------------------------
   13. FAQ
----------------------------------------------------------- */
.faq-wrap{max-width:760px;margin:0 auto;}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:15px;margin-bottom:10px;overflow:hidden;transition:border-color 0.25s,box-shadow 0.25s;}
.faq-item:hover{border-color:#d8d8d1;}
.faq-item.open{border-color:rgba(31,92,61,0.4);box-shadow:0 12px 30px -18px var(--accent-glow);}
.faq-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:20px 24px;font-family:var(--f-display);font-size:17.5px;font-weight:600;letter-spacing:-0.3px;color:var(--text);}
.faq-toggle{width:27px;height:27px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.3s;}
.faq-toggle svg{width:12px;height:12px;stroke:var(--ink);fill:none;stroke-width:2.5;transition:transform 0.3s var(--ease);}
.faq-item.open .faq-toggle{background:var(--accent);}
.faq-item.open .faq-toggle svg{stroke:#fff;transform:rotate(45deg);}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.4s var(--ease);}
.faq-a p{padding:0 24px 22px;font-size:14px;color:var(--muted);line-height:1.7;max-width:660px;}

/* -----------------------------------------------------------
   14. CTA band
----------------------------------------------------------- */
.cta-band{padding:112px 0;}
.cta-inner{position:relative;max-width:860px;margin:0 auto;border-radius:26px;padding:74px 48px;text-align:center;background:var(--ink);overflow:hidden;}
.cta-inner .aura span{opacity:0.55;}
.cta-inner>*{position:relative;z-index:2;}
.cta-inner h2{font-size:clamp(28px,4vw,42px);color:#fff;letter-spacing:-1px;line-height:1.1;margin-bottom:16px;}
.cta-inner p{color:rgba(255,255,255,0.6);font-size:15.5px;max-width:460px;margin:0 auto 32px;}

/* -----------------------------------------------------------
   15. Page head (subpages)
----------------------------------------------------------- */
.page-head{position:relative;background:var(--ink);color:#fff;overflow:hidden;padding:152px 0 86px;}
.page-head .aura span{opacity:0.5;}
.page-head .container{position:relative;z-index:2;}
.crumbs{font-family:var(--f-ui);font-size:12.5px;color:rgba(255,255,255,0.5);margin-bottom:20px;}
.crumbs a{color:var(--accent-2);}
.crumbs a:hover{text-decoration:underline;}
.page-head h1{font-size:clamp(36px,5.6vw,60px);letter-spacing:-1.4px;line-height:1.04;max-width:860px;margin-bottom:20px;color:#fff;}
.page-head p{font-size:clamp(15px,2vw,18px);color:rgba(255,255,255,0.62);max-width:620px;line-height:1.7;}

/* -----------------------------------------------------------
   16. Services page — numbered rows + sub-nav + illustrations
----------------------------------------------------------- */
.svc-layout{display:grid;grid-template-columns:200px 1fr;gap:56px;align-items:start;}
.svc-subnav{position:sticky;top:110px;display:flex;flex-direction:column;gap:4px;}
.svc-subnav a{font-family:var(--f-ui);font-size:13.5px;color:var(--muted);padding:9px 14px;border-radius:10px;border-left:2px solid transparent;transition:all 0.2s;}
.svc-subnav a:hover{color:var(--ink);background:var(--bg);}
.svc-subnav a.active{color:#1f5c3d;border-left-color:var(--accent);background:var(--accent-soft);font-weight:500;}
.svc-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:60px 0;border-bottom:1px solid var(--line);}
.svc-row:last-child{border-bottom:none;}
.svc-row.flip .svc-copy{order:2;}
.svc-row.flip .svc-visual{order:1;}
.svc-index{font-family:var(--f-ui);font-size:12px;font-weight:600;letter-spacing:1.5px;color:var(--accent);margin-bottom:10px;}
.svc-copy h2{font-size:clamp(27px,3.4vw,39px);letter-spacing:-0.9px;margin-bottom:16px;line-height:1.08;}
.svc-copy>p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:16px;}
.svc-copy strong{color:var(--ink);font-weight:600;}
.svc-mini-cta{margin-top:8px;}
.svc-visual{position:relative;}

/* -----------------------------------------------------------
   17. Pricing — tiers + comparison table
----------------------------------------------------------- */
.tier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.tier{position:relative;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:34px 30px;transition:transform 0.35s var(--ease),box-shadow 0.35s var(--ease),border-color 0.35s var(--ease);}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:rgba(31,92,61,0.28);}
.tier.featured{border-color:transparent;background:var(--ink);color:rgba(255,255,255,0.72);overflow:hidden;padding-top:44px;}
.tier.featured::before{content:"";position:absolute;inset:0;border-radius:20px;padding:1.5px;background:linear-gradient(135deg,var(--accent-2),rgba(63,154,104,0.25));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;}
.tier.featured>*{position:relative;}
.tier-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);width:max-content;font-family:var(--f-ui);font-size:10.5px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:#fff;background:var(--accent);padding:6px 14px;border-radius:100px;box-shadow:0 8px 20px -8px var(--accent-glow);white-space:nowrap;}
.tier h3{font-size:23px;letter-spacing:-0.5px;margin-bottom:8px;}
.tier.featured h3{color:#fff;}
.tier-for{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:22px;min-height:44px;}
.tier.featured .tier-for{color:rgba(255,255,255,0.58);}
.tier-price{font-family:var(--f-display);font-weight:600;font-size:25px;letter-spacing:-0.4px;color:var(--ink);margin-bottom:4px;line-height:1.1;}
.tier.featured .tier-price{color:#fff;}
.tier-price span{display:block;font-family:var(--f-ui);font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:6px;}
.tier.featured .tier-price span{color:rgba(255,255,255,0.5);}
.tier .checklist{flex:1;margin:22px 0 26px;}
.tier.featured .checklist li{color:rgba(255,255,255,0.72);border-color:var(--line-dark);}
.tier.featured .checklist li svg{stroke:var(--accent-2);}

.compare-table-wrap{margin-top:64px;overflow-x:auto;}
.compare-table{width:100%;border-collapse:collapse;min-width:560px;}
.compare-table th,.compare-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;}
.compare-table thead th{font-family:var(--f-ui);font-size:14px;color:var(--ink);font-weight:600;}
.compare-table thead th.tier-col{text-align:center;}
.compare-table thead th.featured-col{color:var(--accent);}
.compare-table td.feat{color:var(--muted);}
.compare-table td.cell{text-align:center;}
.compare-table td.cell svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:2.5;display:inline-block;vertical-align:middle;}
.compare-table td.cell .dash{color:var(--muted-2);}
.compare-table tbody tr:hover{background:var(--bg);}
.compare-table .featured-col{background:var(--accent-soft);}

/* -----------------------------------------------------------
   18. About — timeline + mini stats
----------------------------------------------------------- */
.about-split{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center;}
.about-split p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:16px;}
.about-split strong{color:var(--ink);font-weight:600;}
.mini-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.mini-stat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:26px 22px;transition:transform 0.3s var(--ease),border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);}
.mini-stat:hover{transform:translateY(-3px);border-color:rgba(31,92,61,0.28);box-shadow:var(--shadow-card);}
.mini-stat .n{font-family:var(--f-display);font-size:35px;font-weight:600;letter-spacing:-1px;color:var(--ink);line-height:1;margin-bottom:8px;}
.mini-stat .n span{color:var(--accent);}
.mini-stat .l{font-family:var(--f-ui);font-size:12.5px;color:var(--muted);line-height:1.4;}

.timeline{position:relative;max-width:760px;margin:0 auto;padding-left:34px;}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--accent),var(--line));}
.tl-item{position:relative;padding-bottom:38px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-34px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--paper);border:3px solid var(--accent);box-shadow:0 0 0 4px var(--accent-soft);}
.tl-year{font-family:var(--f-ui);font-size:12.5px;font-weight:600;color:var(--accent);letter-spacing:0.5px;text-transform:uppercase;margin-bottom:8px;}
.tl-item h3{font-size:19px;letter-spacing:-0.4px;margin-bottom:8px;}
.tl-item p{font-size:14px;color:var(--muted);line-height:1.7;max-width:560px;}

.val-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.val .icon-tile{margin-bottom:18px;}
.val h3{font-size:17px;letter-spacing:-0.3px;margin-bottom:9px;}
.val p{font-size:13.5px;color:var(--muted);line-height:1.65;}

/* -----------------------------------------------------------
   19. Contact — floating labels
----------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:52px;align-items:start;}
/* direct contact details (left column) */
.cinfo{display:flex;flex-direction:column;gap:12px;margin-top:34px;}
.cinfo-row{display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);border-radius:15px;padding:16px 18px;transition:transform 0.3s var(--ease),border-color 0.3s var(--ease),box-shadow 0.3s var(--ease);}
a.cinfo-row:hover{transform:translateY(-3px);border-color:rgba(31,92,61,0.28);box-shadow:var(--shadow-card);}
.cinfo-icon{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.cinfo-icon svg{width:19px;height:19px;}
.cinfo-l{display:block;font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted-2);margin-bottom:2px;}
.cinfo-v{display:block;font-family:var(--f-ui);font-size:15px;font-weight:500;color:var(--ink);overflow-wrap:anywhere;}
.cform{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:38px;box-shadow:0 30px 70px -40px rgba(18,19,15,0.2);}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.fg{position:relative;margin-bottom:20px;}
.fg input,.fg textarea,.fg select{width:100%;font-family:var(--f-body);font-size:14.5px;color:var(--ink);background:var(--bg);border:1.5px solid transparent;border-radius:12px;padding:22px 16px 8px;outline:none;transition:border-color 0.2s,background 0.2s,box-shadow 0.2s;}
.fg textarea{min-height:120px;resize:vertical;padding-top:26px;}
.fg select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235c5f57' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.fg label{position:absolute;left:16px;top:16px;font-family:var(--f-ui);font-size:14px;color:var(--muted);pointer-events:none;transition:transform 0.2s var(--ease),color 0.2s,font-size 0.2s;transform-origin:left;}
.fg label .req{color:var(--accent);}
.fg input:focus,.fg textarea:focus,.fg select:focus{border-color:var(--accent);background:var(--paper);box-shadow:0 0 0 4px var(--accent-soft);}
.fg select~label,
.fg input:focus~label,.fg input.filled~label,
.fg textarea:focus~label,.fg textarea.filled~label{transform:translateY(-9px) scale(0.78);color:var(--accent);}
.fg textarea~label{top:18px;}
.fg .err{display:none;font-size:12px;color:#d64545;margin-top:6px;padding-left:2px;}
.fg.invalid input,.fg.invalid textarea,.fg.invalid select{border-color:#d64545;background:#fdf3f3;box-shadow:0 0 0 4px rgba(214,69,69,0.07);}
.fg.invalid .err{display:block;}
.fg.valid input,.fg.valid textarea{border-color:#2ea36f;}
.fsub{width:100%;position:relative;background:var(--ink);color:#fff;border:none;padding:15px;border-radius:100px;font-family:var(--f-ui);font-size:14.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:transform 0.25s var(--ease),box-shadow 0.25s var(--ease),background 0.25s;}
.fsub:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 14px 30px -10px var(--accent-glow);}
.fsub:disabled{opacity:0.75;cursor:default;transform:none;box-shadow:none;}
.fsub .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,0.4);border-top-color:#fff;border-radius:50%;display:none;animation:spin 0.7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fsub.loading .spinner{display:inline-block;}
.fsub.loading .fsub-label{opacity:0.85;}
.form-note{font-family:var(--f-ui);font-size:12px;color:var(--muted);text-align:center;margin-top:14px;line-height:1.6;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* -----------------------------------------------------------
   20. Toast
----------------------------------------------------------- */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);display:flex;align-items:center;gap:10px;background:var(--ink);color:#fff;font-family:var(--f-ui);font-size:13.5px;font-weight:500;padding:13px 22px;border-radius:100px;box-shadow:0 16px 40px rgba(18,19,15,0.3);opacity:0;visibility:hidden;transition:all 0.35s var(--ease);z-index:9999;max-width:90vw;}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.toast-check{width:19px;height:19px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast-check svg{width:10px;height:10px;stroke:#fff;fill:none;stroke-width:3;}

/* -----------------------------------------------------------
   21. Thank you
----------------------------------------------------------- */
.thanks{text-align:center;max-width:640px;margin:0 auto;padding:40px 0;}
.thanks-check{width:92px;height:92px;margin:0 auto 30px;}
.thanks-check circle{fill:none;stroke:var(--accent);stroke-width:4;stroke-dasharray:283;stroke-dashoffset:283;animation:draw 0.7s var(--ease) forwards;}
.thanks-check polyline{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw 0.5s var(--ease) 0.6s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.thanks h1{font-size:clamp(33px,5vw,50px);letter-spacing:-1.2px;margin-bottom:16px;}
.thanks p{font-size:16px;color:var(--muted);max-width:480px;margin:0 auto 34px;line-height:1.7;}
.next-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 auto 40px;text-align:left;}
.next-step{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px 22px;}
.next-step .ns-num{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);font-family:var(--f-ui);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.next-step h3{font-size:16px;letter-spacing:-0.3px;margin-bottom:7px;}
.next-step p{font-size:13px;color:var(--muted);line-height:1.6;margin:0;max-width:none;}

/* -----------------------------------------------------------
   22. 404
----------------------------------------------------------- */
.err-page{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--ink);color:#fff;overflow:hidden;padding:120px 24px;}
.err-page .container{position:relative;z-index:2;}
.err-code{font-family:var(--f-display);font-size:clamp(96px,20vw,190px);font-weight:600;line-height:1;letter-spacing:-0.04em;color:#fff;margin-bottom:6px;}
.err-page h1{font-size:clamp(25px,4vw,38px);color:#fff;letter-spacing:-0.6px;margin-bottom:14px;}
.err-page p{color:rgba(255,255,255,0.6);font-size:16px;max-width:440px;margin:0 auto 32px;line-height:1.7;}
.err-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* -----------------------------------------------------------
   23. Prose (legal)
----------------------------------------------------------- */
.prose{max-width:760px;}
.prose .updated{font-family:var(--f-ui);font-size:13px;color:var(--muted);margin-bottom:20px;}
.prose h2{font-size:25px;letter-spacing:-0.6px;margin:38px 0 14px;}
.prose h3{font-size:18px;letter-spacing:-0.3px;margin:26px 0 10px;}
.prose p{font-size:15px;color:#3a3d35;line-height:1.8;margin-bottom:16px;}
.prose ul{margin:0 0 16px;}
.prose ul li{position:relative;font-size:15px;color:#3a3d35;line-height:1.75;padding-left:22px;margin-bottom:10px;}
.prose ul li::before{content:"";position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.prose a{color:var(--accent);text-decoration:underline;}
.prose em{color:var(--muted);}

/* -----------------------------------------------------------
   24. Footer
----------------------------------------------------------- */
footer{background:var(--ink);padding:62px 0 32px;}
.footer-inner{max-width:var(--maxw);margin:0 auto;padding:0 48px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark);}
.footer-brand{max-width:290px;}
.footer-brand .logo{margin-bottom:16px;}
.footer-brand .logo-name{color:#fff;}
.footer-desc{font-size:13.5px;color:rgba(255,255,255,0.62);line-height:1.7;margin-bottom:16px;}
.footer-legal{font-family:var(--f-ui);font-size:12.5px;color:rgba(255,255,255,0.55);line-height:1.6;}
.footer-col h4,.footer-col h3{font-family:var(--f-ui);font-size:11.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,0.62);margin-bottom:16px;}
.footer-col a{display:block;font-size:13.5px;color:rgba(255,255,255,0.62);padding:5px 0;transition:color 0.2s,padding-left 0.2s;}
.footer-col a:hover{color:var(--accent-2);padding-left:4px;}
.footer-bottom{max-width:var(--maxw);margin:0 auto;padding:26px 48px 0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.footer-bottom span{font-family:var(--f-ui);font-size:12.5px;color:rgba(255,255,255,0.55);}
.social{display:flex;gap:10px;}
.social a{width:37px;height:37px;border-radius:10px;border:1px solid var(--line-dark);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.5);transition:all 0.2s;}
.social a:hover{border-color:var(--accent-2);color:var(--accent-2);transform:translateY(-2px);}
.social svg{width:16px;height:16px;fill:currentColor;}

/* -----------------------------------------------------------
   25. Responsive
----------------------------------------------------------- */
@media(max-width:1024px){
  .container{padding:0 32px;}
  .nav-inner,.footer-inner,.footer-bottom{padding-left:32px;padding-right:32px;}
  .about-split{gap:40px;}
  .svc-layout{grid-template-columns:1fr;gap:0;}
  .svc-subnav{display:none;}
}
@media(max-width:860px){
  .nav-links,.nav-cta{display:none;}
  .hamburger{display:block;}
  .grid-3,.val-grid,.tier-grid,.next-steps{grid-template-columns:1fr;}
  .proc-grid{grid-template-columns:1fr 1fr;}
  .proc-line{display:none;}
  .svc-row{grid-template-columns:1fr;gap:36px;padding:44px 0;}
  .svc-row.flip .svc-copy{order:1;}
  .svc-row.flip .svc-visual{order:2;}
  .about-split{grid-template-columns:1fr;gap:36px;}
  .contact-grid{grid-template-columns:1fr;gap:36px;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-brand{grid-column:1 / -1;}
}
@media(max-width:768px){
  .section{padding:78px 0;}
  .cta-band{padding:78px 0;}
  .cta-inner{padding:52px 28px;}
  .page-head{padding:122px 0 60px;}
}
@media(max-width:560px){
  .container{padding:0 20px;}
  .nav-inner,.footer-inner,.footer-bottom{padding-left:20px;padding-right:20px;}
  .frow{grid-template-columns:1fr;}
  .cform{padding:26px 22px;}
  .proc-grid{grid-template-columns:1fr;}
  .footer-top{grid-template-columns:1fr;gap:28px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero-actions .btn{width:100%;}
}
/* touch devices (phones + tablets) */
@media(pointer:coarse){
  /* 16px stops iOS Safari auto-zooming the page when a field is focused */
  .fg input,.fg textarea,.fg select{font-size:16px;}
  /* bigger hit area on breadcrumb links without shifting the layout */
  .crumbs a{display:inline-block;padding:12px 6px;margin:-12px -6px;}
}

/* -----------------------------------------------------------
   26. Cinematic homepage — orchestrated opening, narrative
       beats, word reveals, scroll-linked colour + line draw
----------------------------------------------------------- */

/* --- narrative beat backgrounds ---
   Static colours are the fallback (no JS / reduced motion).
   With fx on, beats go transparent and JS interpolates the
   body background between ink and off-white across scroll. */
/* Beats carry solid, opaque backgrounds so text contrast is always
   correct (never computed against a morphing body). Smooth tone
   changes happen in the content-free seam at the top of the first
   beat of a new run — a soft gradient, not a hard edge. */
.beat-dark{background:var(--ink);}
.beat-light{background:var(--bg);}
.cinema .seam-from-dark{background:linear-gradient(180deg,var(--ink) 0,var(--bg) 150px);}
.cinema .seam-from-light{background:linear-gradient(180deg,var(--bg) 0,var(--ink) 150px);}

/* --- opening sequence (curtain) --- */
.intro{position:fixed;inset:0;z-index:3000;display:none;pointer-events:none;}
html.intro-play .intro{display:block;}
.ipanel{position:absolute;left:0;right:0;height:50.6vh;background:var(--ink);transition:transform 0.45s cubic-bezier(0.76,0,0.24,1);}
.ip-t{top:0;}
.ip-b{bottom:0;}
.intro-line{position:absolute;top:50%;left:0;right:0;height:2px;z-index:2;transform:translateY(-50%) scaleX(0);background:linear-gradient(90deg,transparent,var(--accent-2) 20%,var(--accent-2) 80%,transparent);transition:transform 0.4s var(--ease),opacity 0.3s ease 0.05s;}
.intro.line .intro-line{transform:translateY(-50%) scaleX(1);}
.intro.open .ip-t{transform:translateY(-102%);}
.intro.open .ip-b{transform:translateY(102%);}
.intro.open .intro-line{opacity:0;}
.intro.done{display:none !important;}

/* --- word-by-word reveals (spans injected by JS) --- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0.05em 0.02em 0.14em;margin:-0.05em -0.02em -0.14em;}
.wi{display:inline-block;transform:translateY(118%);transition:transform 0.85s var(--ease);will-change:transform;}
[data-words].words-in .wi,
html.hero-in [data-hero-words] .wi{transform:translateY(0);}

/* --- masked line-rise reveal (interior page-head headings) --- */
.line-clip{overflow:hidden;padding-bottom:0.1em;}
.line-clip .li-inner{display:block;transform:translateY(112%);transition:transform 0.9s var(--ease);will-change:transform;}
.line-clip.line-in .li-inner{transform:translateY(0);}

/* --- hero: one idea, full screen --- */
.hero-cine{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;color:#fff;overflow:hidden;padding:150px 0 120px;}
.hero-cine .hero-inner{position:relative;z-index:2;width:100%;max-width:1080px;margin:0 auto;padding:0 32px;text-align:center;}
.hero-cine h1{font-size:clamp(56px,10vw,130px);line-height:0.98;letter-spacing:-0.03em;color:#fff;margin-bottom:34px;text-wrap:balance;}
.hero-cine .hero-sub{color:rgba(255,255,255,0.6);font-size:clamp(15px,1.8vw,19px);line-height:1.7;max-width:600px;margin:0 auto 42px;}
.hero-cine .hero-actions{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:0;}

/* barely-there fine grid, slow diagonal pan (depth without noise) */
.hero-mesh{position:absolute;inset:-620px;pointer-events:none;opacity:0.04;background-image:linear-gradient(rgba(255,255,255,0.8) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.8) 1px,transparent 1px);background-size:62px 62px;animation:meshPan 60s linear infinite;}
@keyframes meshPan{from{transform:translate3d(0,0,0);}to{transform:translate3d(620px,620px,0);}}

/* scroll invitation: thin line, travelling dot */
.cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:10px;}
.cue-track{position:relative;width:1px;height:56px;background:rgba(255,255,255,0.15);overflow:hidden;}
.cue-dot{position:absolute;left:50%;top:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--accent-2);animation:cueDrop 2.4s cubic-bezier(0.45,0,0.55,1) infinite;}
@keyframes cueDrop{0%{transform:translateY(-8px);opacity:0;}20%{opacity:1;}70%{opacity:1;}100%{transform:translateY(62px);opacity:0;}}
.cue-label{font-family:var(--f-ui);font-size:9.5px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);}

/* --- intro-gated first paint: sub, CTAs, cue and nav follow the words --- */
html.intro-play nav#nav{opacity:0;transform:translateY(-10px);}
html.intro-play .hero-sub{opacity:0;transform:translateY(14px);}
html.intro-play .hero-actions{opacity:0;transform:translateY(14px);}
html.intro-play .cue{opacity:0;}
html.intro-play.hero-in nav#nav{opacity:1;transform:none;transition:opacity 0.5s var(--ease) 0.55s,transform 0.5s var(--ease) 0.55s;}
html.intro-play.hero-in .hero-sub{opacity:1;transform:none;transition:opacity 0.45s var(--ease) 0.5s,transform 0.45s var(--ease) 0.5s;}
html.intro-play.hero-in .hero-actions{opacity:1;transform:none;transition:opacity 0.45s var(--ease) 0.66s,transform 0.45s var(--ease) 0.66s;}
html.intro-play.hero-in .cue{opacity:1;transition:opacity 0.6s var(--ease) 1s;}

/* --- section numbers: quiet wayfinding --- */
.beat-no{display:flex;align-items:center;gap:14px;font-family:var(--f-ui);font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted-2);margin-bottom:36px;}
.beat-no::after{content:"";width:44px;height:1px;background:currentColor;opacity:0.45;}
.on-dark .beat-no{color:rgba(255,255,255,0.55);}

/* --- statement beats: type IS the graphic --- */
.statement{display:flex;align-items:center;min-height:92vh;padding:140px 0;}
.statement .container,.close-beat .container{width:100%;}
.statement h2{font-size:clamp(40px,7vw,96px);line-height:1.03;letter-spacing:-0.028em;text-wrap:balance;}
.statement.on-dark h2{color:#fff;}
.statement-sm{min-height:0;padding:150px 0 30px;}

/* --- quiet stat row (beat 02) — numbers always in the sans --- */
.stat-row{display:flex;flex-wrap:wrap;margin-top:58px;}
.qstat{padding-right:42px;margin-right:42px;border-right:1px solid var(--line);}
.qstat:last-child{border-right:none;margin-right:0;padding-right:0;}
.qstat-n{font-family:var(--f-ui);font-weight:600;font-size:clamp(24px,2.6vw,32px);letter-spacing:-0.5px;color:var(--ink);}
.qstat-n .u{color:var(--accent);}
.qstat-l{font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-top:5px;}

/* --- service card illustrations (beat 03) --- */
.svc-illus{border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:16px;height:196px;overflow:hidden;margin-bottom:24px;pointer-events:none;}
.svc-illus .mock-site{gap:10px;}
.svc-illus .mock-hero{padding:16px 15px;}
.svc-illus .mock-cards i{height:26px;}
.svc-illus .search-bar{background:var(--paper);border:1px solid var(--line);border-radius:100px;padding:9px 14px;display:flex;align-items:center;gap:9px;font-family:var(--f-ui);font-size:12px;color:var(--muted);margin-bottom:12px;}
.svc-illus .search-bar svg{width:14px;height:14px;stroke:var(--accent);fill:none;stroke-width:2;flex-shrink:0;}
.svc-illus .result{padding:11px 13px;margin-bottom:8px;}
.svc-illus .illus-chat{gap:8px;}
.svc-illus .bubble{padding:9px 13px;font-size:11.5px;border-radius:13px;}
.svc-illus .bubble.them{border-bottom-left-radius:4px;}
.svc-illus .bubble.me{border-bottom-right-radius:4px;}

/* illustration micro-animations: play only once scrolled into view */
.fx .cine-svc .mock-hero::after{opacity:0;transition:opacity 1s var(--ease) 0.4s;}
.fx .cine-svc.live .mock-hero::after{opacity:1;}
.fx .cine-svc .result{opacity:0;transform:translateY(14px);transition:opacity 0.55s var(--ease) 0.1s,transform 0.55s var(--ease) 0.1s;}
.fx .cine-svc .result + .result{transition-delay:0.3s,0.3s;}
.fx .cine-svc.live .result{opacity:1;transform:none;}
.fx .cine-svc.live .result:not(.top){opacity:0.62;}
.fx .cine-svc .bubble{opacity:0;transform:translateY(10px);transition:opacity 0.45s var(--ease),transform 0.45s var(--ease);}
.fx .cine-svc .bubble:nth-child(2){transition-delay:0.5s,0.5s;}
.fx .cine-svc .bubble:nth-child(3){transition-delay:1s,1s;}
.fx .cine-svc.live .bubble{opacity:1;transform:none;}

/* --- process: line draws with scroll progress (fx) --- */
.fx .proc-line line{transition:none;stroke-dashoffset:calc(1 - var(--proc-p,0));}

/* breathing room around dark ↔ light boundaries so the colour
   interpolation happens over whitespace, not over text */
.cinema #work.section{padding-bottom:190px;}
.cinema .process{padding-top:170px;}
.cinema #contact.section{padding-top:150px;}

/* --- close beat: full-screen CTA --- */
.close-beat{position:relative;display:flex;align-items:center;min-height:96vh;padding:140px 0;overflow:hidden;text-align:center;}
.close-beat .container{position:relative;z-index:2;max-width:960px;}
.close-beat .beat-no{justify-content:center;}
.close-beat .beat-no::before{content:"";width:44px;height:1px;background:currentColor;opacity:0.45;}
.close-beat h2{font-size:clamp(46px,8vw,110px);line-height:1;letter-spacing:-0.03em;color:#fff;margin-bottom:42px;text-wrap:balance;}
.close-beat .aura span{opacity:0.5;}

/* --- hide-on-scroll + dark-aware nav --- */
nav#nav{transition:height 0.3s var(--ease),border-color 0.3s var(--ease),background 0.3s var(--ease),transform 0.35s var(--ease),opacity 0.35s var(--ease);}
nav#nav.nav-hide{transform:translateY(-100%);}
.nav-dark nav#nav{background:rgba(18,19,15,0.5);}
.nav-dark nav#nav.scrolled{background:rgba(18,19,15,0.75);border-bottom-color:var(--line-dark);}
.nav-dark .logo-name{color:#fff;}
.nav-dark .nav-links a{color:rgba(255,255,255,0.6);}
.nav-dark .nav-links a:hover,.nav-dark .nav-links a.active{color:#fff;}
.nav-dark .hamburger span{background:#fff;}
.hamburger.open span{background:#fff;}
.nav-dark .nav-cta{background:var(--accent-2);color:#12130f;}
.nav-dark .nav-cta:hover{background:#4fae79;}
/* wordmark "Digital" needs the lifted green to clear AA on ink */
.nav-dark .logo-name span,.footer-brand .logo-name span{color:var(--accent-2);}

/* --- cinematic responsive --- */
@media(max-width:768px){
  .statement{min-height:70vh;padding:100px 0;}
  .statement-sm{min-height:0;padding:110px 0 10px;}
  .close-beat{min-height:78vh;padding:100px 0;}
  .hero-cine{padding:130px 0 100px;}
}
@media(max-width:560px){
  .qstat{padding-right:24px;margin-right:24px;}
  .proc-grid{position:relative;padding-left:24px;}
  .proc-grid::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-2));transform-origin:top;transform:scaleY(1);}
  .fx .proc-grid::before{transform:scaleY(var(--proc-p,0));}
}

/* -----------------------------------------------------------
   27. Reduced motion
   Must stay LAST in the file: several of these overrides carry
   no !important and share specificity with the cinematic rules
   above (.hero-mesh, .cue-dot, nav#nav.nav-hide), so they only
   win by source order.
----------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important;}
  body{opacity:1;animation:none;}
  .reveal{opacity:1;transform:none;}
  .aura span,.hero-mesh,.cue-dot{animation:none;}
  .wi,.li-inner{transform:none !important;}
  .intro{display:none !important;}
  nav#nav.nav-hide{transform:none;}
}