/* Septic Blue — BOLD BLOCKS / SWISS. Light warm paper bg, saturated blue fields,
   heavy grotesk (Archivo) display + Inter body, duotone blue + one amber CTA. */

:root{
  /* OKLCH, neutrals tinted toward the brand blue hue (~250) */
  --paper:   oklch(0.985 0.006 250);   /* warm near-white */
  --paper-2: oklch(0.955 0.010 250);   /* faint block */
  --ink:     oklch(0.205 0.040 255);   /* deep navy ink (not #000) */
  --ink-soft:oklch(0.205 0.040 255 / 0.66);
  --blue:    oklch(0.560 0.190 252);   /* the signal blue field */
  --blue-d:  oklch(0.380 0.150 255);   /* deep blue */
  --amber:   oklch(0.760 0.150 70);    /* the ONE warm CTA accent */
  --amber-ink: oklch(0.300 0.080 60);
  --line:    oklch(0.205 0.040 255 / 0.16);
  --on-blue: oklch(0.985 0.010 250);

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --fhead: "Archivo", system-ui, sans-serif;
  --fbody: "Inter", system-ui, sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--fbody); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--fhead); font-weight:900; letter-spacing:-0.02em; line-height:0.98; margin:0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(64px,9vw,128px); }

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--fhead); font-weight:800; letter-spacing:0.01em;
  padding:.85em 1.4em; border-radius:2px; line-height:1;
  font-size:1rem; transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  border:2px solid transparent; cursor:pointer;
}
.btn-call{ background:var(--amber); color:var(--amber-ink); box-shadow:0 2px 0 var(--ink); }
.btn-call:hover{ transform:translateY(-2px); box-shadow:0 6px 0 var(--ink); }
.btn-lg{ font-size:1.12rem; padding:1.05em 1.7em; }
.btn-ghost{ background:transparent; border-color:currentColor; }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.phone-ico{ width:1.05em; height:1.05em; }

/* ---------- NAV ---------- */
.nav{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .25s ease, box-shadow .25s ease; }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.85rem; }
.brand{ display:flex; align-items:baseline; gap:.5ch; font-family:var(--fhead); font-weight:900; font-size:1.32rem; letter-spacing:-0.03em; color:var(--on-blue); }
.brand .sq{ width:.7em; height:.7em; background:var(--amber); display:inline-block; transform:translateY(.04em); }
.brand .thin{ font-weight:600; opacity:.85; }
.nav-links{ display:flex; gap:1.7rem; font-weight:600; font-size:.96rem; color:var(--on-blue); }
.nav-links a{ position:relative; padding-block:.2em; }
.nav-links a.active::after,.nav-links a:hover::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--amber); }
.nav-call{ font-size:.92rem; padding:.65em 1.05em; }
/* default: nav sits over the blue hero -> light text. Scrolled -> solid paper -> dark text */
.nav.scrolled{ background:var(--paper); box-shadow:0 1px 0 var(--line); }
.nav.scrolled .brand,.nav.scrolled .nav-links{ color:var(--ink); }
.nav-toggle{ display:none; }

/* ---------- HERO (type-only Swiss block on saturated blue) ---------- */
.hero{ background:var(--blue); color:var(--on-blue); padding-top:clamp(120px,16vw,180px); padding-bottom:0; position:relative; overflow:hidden; }
.hero::before{ content:""; position:absolute; top:0; right:0; width:38%; height:100%; background:var(--blue-d); opacity:.55; clip-path:polygon(28% 0,100% 0,100% 100%,0 100%); }
.hero-grid{ position:relative; z-index:2; display:grid; gap:clamp(28px,5vw,52px); }
.hero-eyebrow{ font-family:var(--fhead); font-weight:800; font-size:.86rem; letter-spacing:.14em; text-transform:uppercase; display:flex; align-items:center; gap:.7ch; flex-wrap:wrap; }
.hero-eyebrow .pip{ width:.55em; height:.55em; background:var(--amber); display:inline-block; }
.hero h1{ font-size:clamp(2.6rem,7.3vw,6.2rem); max-width:15ch; }
.hero h1 .amber{ color:var(--amber); }
.hero-sub{ font-size:clamp(1.05rem,2vw,1.32rem); max-width:46ch; color:oklch(0.985 0.01 250 / 0.92); line-height:1.5; }
.hero-cta{ display:flex; align-items:center; gap:1.3rem; flex-wrap:wrap; }
.hero-cta .resolve{ margin:0; font-size:.95rem; color:oklch(0.985 0.01 250 / 0.8); max-width:24ch; }
/* the data strip */
.hero-strip{ position:relative; z-index:2; margin-top:clamp(36px,6vw,64px); display:grid; grid-template-columns:repeat(3,1fr); border-top:2px solid var(--on-blue); }
.hero-strip .cell{ padding:1.1rem 1.3rem 1.4rem; border-right:1px solid oklch(0.985 0.01 250 / 0.28); }
.hero-strip .cell:last-child{ border-right:0; }
.hero-strip .num{ font-family:var(--fhead); font-weight:900; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1; letter-spacing:-0.02em; }
.hero-strip .lbl{ font-size:.82rem; letter-spacing:.04em; text-transform:uppercase; color:oklch(0.985 0.01 250 / 0.82); margin-top:.4em; }
/* hero photo as its own block under the fold */
.hero-photo{ position:relative; z-index:2; margin-top:clamp(40px,6vw,64px); }
.hero-photo img{ width:100%; height:clamp(240px,38vw,440px); object-fit:cover; }

/* ---------- BLOCKS / GENERIC ---------- */
.eyebrow{ font-family:var(--fhead); font-weight:800; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); display:inline-flex; align-items:center; gap:.6ch; }
.eyebrow .pip{ width:.5em; height:.5em; background:var(--amber); display:inline-block; }
.kicker-n{ color:var(--ink-soft); }

/* spine / problem block */
.spine{ background:var(--paper); }
.spine-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,5vw,64px); align-items:center; }
.spine h2{ font-size:clamp(1.9rem,4vw,3.1rem); max-width:18ch; margin-block:.5rem .8rem; }
.spine p{ max-width:46ch; color:var(--ink-soft); font-size:1.06rem; }
.spine .lead{ color:var(--ink); font-weight:500; font-size:1.16rem; }
.spine-photo{ position:relative; }
.spine-photo img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.spine-photo .tag{ position:absolute; left:0; bottom:0; background:var(--amber); color:var(--amber-ink); font-family:var(--fhead); font-weight:800; font-size:.85rem; padding:.6em .9em; }

/* services grid (Swiss blocks) */
.svc-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:clamp(28px,4vw,48px); }
.svc-head h2{ font-size:clamp(1.9rem,4.4vw,3.2rem); max-width:16ch; }
.svc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:var(--line); border:1px solid var(--line); }
.svc{ background:var(--paper); padding:clamp(24px,3vw,38px) clamp(22px,2.4vw,32px); display:flex; flex-direction:column; gap:.6rem; min-height:230px; transition:background .2s ease, color .2s ease; }
.svc:hover{ background:var(--ink); color:var(--paper); }
.svc:hover .svc-n,.svc:hover p{ color:oklch(0.985 0.01 250 / 0.82); }
.svc .svc-n{ font-family:var(--fhead); font-weight:900; font-size:.95rem; color:var(--blue); letter-spacing:.04em; }
.svc h3{ font-size:1.42rem; }
.svc p{ color:var(--ink-soft); font-size:1rem; margin:0; }
.svc .ev{ margin-top:auto; font-size:.86rem; font-style:italic; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:.8rem; }
.svc:hover .ev{ color:oklch(0.985 0.01 250 / 0.7); border-color:oklch(0.985 0.01 250 / 0.2); }

/* the signature PROCESS BAND (underground) */
.process{ background:var(--ink); color:var(--paper); }
.process .eyebrow{ color:var(--amber); }
.process h2{ font-size:clamp(1.9rem,4.4vw,3rem); max-width:18ch; margin-block:.6rem clamp(34px,5vw,56px); }
.proc-track{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.proc-line{ position:absolute; top:34px; left:0; height:3px; width:100%; background:oklch(0.985 0.01 250 / 0.18); }
.proc-line::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--fill,0%); background:var(--amber); transition:width .1s linear; }
.proc{ padding-right:1.6rem; position:relative; }
.proc .pnum{ width:54px; height:54px; display:grid; place-items:center; background:var(--blue); color:var(--on-blue); font-family:var(--fhead); font-weight:900; font-size:1.3rem; position:relative; z-index:2; }
.proc h3{ font-size:1.32rem; margin-top:1.1rem; }
.proc p{ color:oklch(0.985 0.01 250 / 0.74); font-size:.98rem; margin-top:.4rem; }

/* review pull-quotes band */
.pull{ background:var(--blue); color:var(--on-blue); }
.pull .eyebrow{ color:var(--amber); }
.pull h2{ font-size:clamp(1.9rem,4.4vw,3rem); max-width:18ch; margin-block:.6rem clamp(30px,4vw,48px); }
.pull-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; background:oklch(0.985 0.01 250 / 0.22); border:1px solid oklch(0.985 0.01 250 / 0.22); }
.pq{ background:var(--blue); padding:clamp(22px,2.6vw,32px); display:flex; flex-direction:column; gap:1rem; }
.pq blockquote{ margin:0; font-size:1.08rem; line-height:1.45; }
.pq .stars{ color:var(--amber); font-size:.95rem; letter-spacing:.12em; }
.pq figcaption{ font-family:var(--fhead); font-weight:800; font-size:.92rem; margin-top:auto; }
.pq figcaption span{ font-weight:500; opacity:.8; }

/* big CTA block */
.cta{ background:var(--amber); color:var(--amber-ink); }
.cta-inner{ display:grid; gap:1.3rem; justify-items:start; }
.cta h2{ font-size:clamp(2rem,5vw,3.6rem); max-width:16ch; color:var(--amber-ink); }
.cta p{ font-size:1.12rem; max-width:42ch; margin:0; }
.cta .btn-call{ background:var(--ink); color:var(--paper); box-shadow:0 2px 0 var(--amber-ink); }
.cta .btn-call:hover{ box-shadow:0 6px 0 var(--amber-ink); }

/* ---------- PAGE HEADER (interior pages) ---------- */
.phead{ background:var(--blue); color:var(--on-blue); padding-top:clamp(120px,15vw,170px); padding-bottom:clamp(48px,7vw,84px); position:relative; overflow:hidden; }
.phead::before{ content:""; position:absolute; top:0; right:0; width:34%; height:100%; background:var(--blue-d); opacity:.5; clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
.phead .wrap{ position:relative; z-index:2; }
.phead .eyebrow{ color:var(--amber); }
.phead h1{ font-size:clamp(2.4rem,6vw,4.6rem); max-width:16ch; margin-top:.6rem; }
.phead p{ max-width:48ch; margin-top:1rem; font-size:1.1rem; color:oklch(0.985 0.01 250 / 0.9); }

/* about: big number + named techs */
.bignum{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); align-items:center; background:var(--ink); color:var(--paper); padding:clamp(32px,5vw,56px); }
.bignum .n{ font-family:var(--fhead); font-weight:900; font-size:clamp(3.4rem,9vw,7rem); line-height:.85; color:var(--amber); letter-spacing:-0.03em; }
.bignum .t{ font-size:1.15rem; color:oklch(0.985 0.01 250 / 0.86); max-width:40ch; }
.techs{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.4rem; }
.techs .chip{ background:var(--paper-2); border:1px solid var(--line); font-family:var(--fhead); font-weight:700; font-size:.95rem; padding:.5em .95em; }

/* reviews masonry */
.rev-grid{ columns:3; column-gap:2px; }
.rev{ break-inside:avoid; background:var(--paper-2); border:1px solid var(--line); padding:clamp(20px,2.4vw,28px); margin-bottom:2px; display:flex; flex-direction:column; gap:.9rem; }
.rev .stars{ color:var(--amber); letter-spacing:.12em; }
.rev blockquote{ margin:0; font-size:1.02rem; line-height:1.5; }
.rev figcaption{ font-family:var(--fhead); font-weight:800; font-size:.92rem; }

/* about / spine images on interior */
.media-band{ position:relative; }
.media-band img{ width:100%; height:clamp(260px,34vw,420px); object-fit:cover; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--line); border:1px solid var(--line); }
.cblock{ background:var(--paper); padding:clamp(26px,3.4vw,44px); display:flex; flex-direction:column; gap:.9rem; }
.cblock.blue{ background:var(--blue); color:var(--on-blue); }
.cblock h3{ font-size:1.5rem; }
.cblock .big{ font-family:var(--fhead); font-weight:900; font-size:clamp(1.4rem,3.4vw,2.4rem); letter-spacing:-0.02em; overflow-wrap:anywhere; word-break:break-word; max-width:100%; }
.cblock .big.email{ font-size:clamp(1.1rem,2.2vw,1.7rem); }
.cblock{ min-width:0; }
.cblock .big a{ overflow-wrap:anywhere; }
.cblock .big a{ color:inherit; }
.cblock.blue .eyebrow{ color:var(--amber); }
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; }
.chips .chip{ border:1px solid currentColor; font-weight:600; font-size:.92rem; padding:.45em .85em; opacity:.92; }

/* ---------- FOOTER ---------- */
.footer{ background:var(--ink); color:oklch(0.985 0.01 250 / 0.82); padding-block:clamp(40px,6vw,64px); }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; }
.foot-brand{ font-family:var(--fhead); font-weight:900; font-size:1.5rem; color:var(--paper); display:flex; align-items:baseline; gap:.5ch; }
.foot-brand .sq{ width:.62em; height:.62em; background:var(--amber); display:inline-block; }
.footer h4{ font-family:var(--fhead); font-weight:800; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:var(--paper); margin:0 0 .9rem; }
.footer a:hover{ color:var(--amber); }
.foot-col a{ display:block; padding-block:.28em; }
.foot-bottom{ margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid oklch(0.985 0.01 250 / 0.16); font-size:.85rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- REVEAL ---------- */
.reveal{ opacity:0; transform:translateY(22px); }
.no-js .reveal{ opacity:1; transform:none; }

/* ---------- SAMPLE WATERMARK (removable: drop body[data-sample]) ---------- */
.zv-sample-badge{ display:none; }
body[data-sample="1"] .zv-sample-badge{
  display:flex; align-items:center; gap:.5ch;
  position:fixed; left:14px; bottom:14px; z-index:200;
  background:var(--ink); color:var(--paper);
  font-family:var(--fbody); font-size:.74rem; font-weight:600; letter-spacing:.02em;
  padding:.5em .8em; border-radius:2px; box-shadow:0 4px 14px rgba(0,0,0,.28);
  border-left:3px solid var(--amber); max-width:78vw;
}
.zv-sample-badge .sq{ width:.7em; height:.7em; background:var(--amber); display:inline-block; flex:none; }
@media (max-width:600px){ .zv-sample-badge{ font-size:.68rem; left:8px; bottom:8px; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .spine-grid{ grid-template-columns:1fr; }
  .svc-grid,.pull-grid{ grid-template-columns:repeat(2,1fr); }
  .proc-track{ grid-template-columns:repeat(2,1fr); gap:2.4rem 1.2rem; }
  .proc-line{ display:none; }
  .rev-grid{ columns:2; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .nav-links{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav.open .nav-links{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); padding:.4rem var(--gut) 1rem; box-shadow:0 8px 20px rgba(0,0,0,.12); }
  .nav.open .nav-links a{ color:var(--ink); padding-block:.7em; border-bottom:1px solid var(--line); }
  .hero-strip{ grid-template-columns:1fr; }
  .hero-strip .cell{ border-right:0; border-bottom:1px solid oklch(0.985 0.01 250 / 0.28); }
  .svc-grid,.pull-grid,.contact-grid{ grid-template-columns:1fr; }
  .proc-track{ grid-template-columns:1fr; gap:2rem; }
  .rev-grid{ columns:1; }
  .foot-grid{ grid-template-columns:1fr; gap:1.6rem; }
  .bignum{ grid-template-columns:1fr; }
}

/* nav hamburger */
.nav-toggle{ background:none; border:0; flex-direction:column; gap:5px; padding:6px; cursor:pointer; }
.nav-toggle span{ width:26px; height:2px; background:var(--on-blue); display:block; transition:background .2s; }
.nav.scrolled .nav-toggle span{ background:var(--ink); }
.nav.open .nav-toggle span{ background:var(--ink); }