/* GTM Debug Sprint — human-native reset
   A small technical practice / field notebook, not an AI SaaS dashboard. */
@font-face {
  font-family:"Hanken Grotesk";
  src:url("fonts/hanken-grotesk-variable.woff2") format("woff2");
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
}
@font-face {
  font-family:"Hanken Grotesk";
  src:url("fonts/hanken-grotesk-italic-variable.woff2") format("woff2");
  font-style:italic;
  font-weight:100 900;
  font-display:swap;
}
:root {
  --paper: #f3f0e9;
  --paper-blue: #dde4e1;
  --paper-cream: #e8e5dd;
  --paper-yellow: #c8d39b;
  --ink: #202625;
  --muted: #6a706d;
  --line: rgba(32, 38, 37, 0.15);
  --line-soft: rgba(32, 38, 37, 0.08);
  --accent: #62797b;
  --red-pencil: #f0483e;
  --green-pencil: #39b54a;
  --purple-pencil: #371d9f;
  --cyan-pencil: #64dcff;
  --display: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --handwritten: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
}

html { background: var(--paper); }
body { background: var(--paper); color: var(--ink); }
::selection { background: var(--paper-yellow); color: var(--ink); }
.h-display { font-weight: 430; letter-spacing: -.045em; }
.h-display .accent, .h-display .wm.accent, .kinetic-statement .w.accent { color: inherit; }

/* Let content breathe. Replace UI polish with paper, rules, and small annotations. */
.site-header { height: 7.2rem; background: rgba(243,240,233,.94); backdrop-filter: blur(12px); border-bottom-color: var(--line-soft); }
.brand { font-size: 1.45rem; }
.brand img { width: 2.05rem; height: 2.05rem; }
.main-nav { gap: 2.6rem; }
.main-nav .btn { padding: 1.05rem 1.7rem; font-size: 1.2rem; background: var(--ink); color: #fff; border-radius: .35rem; box-shadow: none; }
.btn { border-radius: .3rem; padding: 1.55rem 2.25rem; font-size: 1.45rem; box-shadow: none; }
.btn-filled { background: var(--ink); color: #fff; }
.btn-filled .ripple span { background: var(--accent); }
.btn-ghost { border: 1px solid var(--ink); color: var(--ink); }
.btn-ghost .ripple span { background: var(--paper-yellow); }

/* Hero: photograph first, small readable paper note second. */
.lab-hero { padding-top: clamp(12rem,15vw,18rem); padding-bottom: clamp(7rem,9vw,11rem); background: var(--paper); }
.lab-hero::after { height: 12%; background: linear-gradient(transparent, var(--paper)); }
@media (min-width:768px) {
  .lab-hero-grid { grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(4rem,7vw,10rem); }
  .lab-hero-copy { padding-bottom: 4rem; }
}
.lab-hero-copy .h-display { max-width: 10ch; font-size: clamp(5rem,7.4vw,10rem); line-height: .96; }
.lab-hero-copy .lede { max-width: 38ch; color: var(--muted); font-size: clamp(1.7rem,2vw,2rem); }
.hero-actions { margin-top: 3.2rem; }
.hero-visual-stack { min-height: clamp(45rem, 48vw, 62rem); padding-bottom: clamp(8.6rem,9vw,11rem); }
.hero-photo { border-radius: 0; background: #26231f; box-shadow: none; }
.hero-photo::after { display: none; }
.hero-photo img { filter: saturate(.82) contrast(1.02); }
.hero-overlay { background: linear-gradient(0deg, rgba(13,13,12,.52), transparent 42%); }
.hero-caption { left: 1.8rem; bottom: 1.7rem; font-size: 1.05rem; letter-spacing: .07em; }
.hero-caption::before { width: .55rem; height: .55rem; background: var(--paper-yellow); box-shadow: none; }
@media (max-width:767px) {
  .lab-hero { padding-top: 12rem; }
  .hero-visual-stack { min-height: 42rem; padding-bottom: 8rem; }
}

/* Problem and audience: paragraph-led, no named taxonomy. */
.kinetic { background: var(--paper); color:var(--ink); }
.kinetic .shell { padding-block: clamp(7rem,11vw,13rem); }
.kinetic-statement { max-width: 19ch; font-size: clamp(3.6rem,6.2vw,7.4rem); line-height: 1.02; }
.kinetic-cap { margin-top: 2.6rem; color: var(--accent); letter-spacing: .03em; text-transform: none; font-size: 1.55rem; font-weight: 400; }
.cycle-band { min-height: 62rem; background: var(--dark); }
.cycle-band::before { background: linear-gradient(90deg,rgba(32,38,37,.95) 0%,rgba(32,38,37,.78) 49%,rgba(32,38,37,.28) 100%); }
.cycle-band .shell { padding-block: 10rem; }
.cycle-copy h2 { max-width: 10ch; font-size: clamp(4rem,6.7vw,7.4rem); }
.cycle-copy p { max-width: 43ch; }
.made-item { padding: 4rem 0; }
.made-item .num { color: var(--muted); font-size: 1.25rem; letter-spacing: .1em; }
.made-item h3 { font-size: 3.05rem; }
.made-item p { max-width: 50ch; }
.made-item .tags { display: none; }

/* The metaphoric buyer-band becomes quieter editorial context. */
.wedge-band { min-height: 46rem; background: var(--dark); }
.wedge-band::after { background: linear-gradient(90deg,rgba(32,38,37,.92),rgba(32,38,37,.56)); }
.wedge-grid { padding-block: clamp(8rem,10vw,11rem); }
.wedge-grid h2 { max-width: 11ch; font-size: clamp(3.8rem,5.8vw,6.8rem); }
.decision-triad { display: none; }

/* Remove the software-like score matrix. Use a readable plain-language review note. */
.sample-quote { max-width: 25ch; font-size: clamp(2.6rem,4.2vw,4.7rem); line-height: 1.05; }
.sample-attr { max-width: 56ch; line-height: 1.5; }
.sample-scores { display: none; }
.sample-link { margin-top: 3rem; }
.splitshow { display: block; margin-top: 4.5rem !important; border-top: 1px solid var(--line); }
.splitshow > div:nth-child(even) { margin-top: 0; }
.deliv { position: relative; display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 2.6rem 0; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; overflow: visible; }
.deliv::before, .deliv::after { display:none; }
.deliv img { display: none; }
.deliv .num { grid-column: 1; grid-row: 1 / span 2; color: var(--muted); font-size: 1.25rem; letter-spacing: .08em; }
.deliv h3 { grid-column:2; margin: 0; font-size: 2.45rem; }
.deliv p { grid-column:2; margin: .75rem 0 0; max-width: 54ch; }
@media (max-width:767px) { .deliv { grid-template-columns: 4.5rem 1fr; } }

/* Process: one readable sequence, no buttons, tabs, or dynamic “states.” */
.method-experience { margin-top: 4.5rem; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.method-rail { display: none; }
.method-stage { --method: var(--ink); display: grid; grid-template-columns: 4.4rem 1fr; gap: 2.2rem; margin:0; padding:3.4rem 0; border:0; border-radius:0; background:transparent; overflow:visible; }
.method-stage::after { display:none; }
.method-orbit { width: 1px; height: 100%; min-height: 15rem; border:0; border-radius:0; background: var(--ink); box-shadow: none; margin-left: 1rem; }
.method-orbit::before { width: 1.5rem; height: 1.5rem; top: 0; right: -.7rem; background: var(--paper-yellow); border: 1px solid var(--ink); box-shadow: none; }
.method-orbit::after { display:none; }
.method-stage .method-no { color: var(--muted); letter-spacing: .08em; }
.method-stage h3 { margin-top:.75rem; font-size:clamp(3.3rem,4.6vw,5.3rem); line-height:1; }
.method-stage p { margin-top:1.35rem; max-width: 45ch; color:var(--muted); font-size:1.8rem; }
.method-evidence { gap: .7rem; margin-top:2rem; }
.method-evidence span { padding:0; border:0; border-radius:0; background:transparent; color:var(--muted); font-size:1.2rem; letter-spacing:.04em; text-transform:none; }
.method-evidence span + span::before { content:" / "; color:var(--muted); }
.process-checkpoints { position:relative; margin-top:0; }
.process-checkpoints .step { --step: var(--ink); padding: 3.1rem 0 3.1rem 4.4rem; border-top:1px solid var(--line); }
.process-checkpoints .step::before { left: 1rem; top: 3.55rem; width:1rem; height:1rem; background: var(--paper-yellow); border: 1px solid var(--ink); box-shadow:none; }
.process-checkpoints .step:hover { padding-left:4.4rem; }
.process-checkpoints .step .no { color:var(--muted); }
.process-checkpoints .step h3 { font-size:2.55rem; }

/* Price: a plain editorial note instead of a SaaS pricing module. */
.price-bridge { max-width: 45ch; font-size: 1.95rem; }
.investment-hero { display:block; margin-top:4rem; padding:clamp(3rem,5vw,5rem); border:1px solid rgba(25,25,25,.14); border-radius:2.4rem; color:var(--ink); background:var(--paper-blue); box-shadow:0 1.6rem 3.2rem rgba(17,22,42,.06); }
.investment-hero::before, .investment-hero::after { display:none; }
.investment-label { color:var(--muted); }
.investment-hero h3 { max-width:16ch; margin-top:1rem; font-size:clamp(3.2rem,4.7vw,5.4rem); }
.investment-hero p { max-width:54ch; color:var(--muted); }
.investment-side { display:flex; align-items:end; gap:2rem; margin-top:3.5rem; flex-wrap:wrap; }
.investment-price { color:var(--ink); font-size:clamp(5rem,7vw,7.6rem); text-align:left; }
.investment-side .micro { color:var(--muted); text-align:left; }
.investment-side .btn { margin:0 0 .15rem auto; background:var(--ink); color:#fff; }
.entry-options { margin-top:3.4rem; padding:0; border:0; border-radius:0; background:transparent; }
.entry-options > .micro { color:var(--muted); }
.entry-options > p { max-width:55ch; }
.entry-grid { gap:0; margin-top:1.7rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.entry-card { --entry:var(--ink); padding:2.5rem 0; border:0; border-radius:0; background:transparent; }
.entry-card + .entry-card { border-left:1px solid var(--line); padding-left:2.5rem; }
.entry-card h3 { font-size:2.5rem; }
.entry-card .entry-price { color:var(--ink); font-size:3.3rem; }
.entry-card a { color:var(--ink); }
@media(max-width:767px){ .investment-side .btn { margin:1.2rem 0 0; } .entry-card + .entry-card { border-left:0; border-top:1px solid var(--line); padding-left:0; } }

/* A human working sequence, not a pipe of automation nodes. */
.operating-diagram { margin-top:4.5rem; padding:0; border:0; border-radius:0; background:transparent; overflow:visible; }
.flow-track { grid-template-columns: 4.4rem 1fr; gap:0; align-items:stretch; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.flow-node { --flow:var(--ink); min-height:0; padding:2.4rem 0 2.4rem 4.4rem; border:0; border-radius:0; background:transparent; }
.flow-node:nth-of-type(n) { --flow:var(--ink); }
.flow-node::after { display:none; }
.flow-node .flow-index { position:absolute; margin-left:-3.3rem; margin-top:.15rem; color:var(--muted); }
.flow-node strong { margin:0; font-size:2.15rem; }
.flow-node small { margin-top:.55rem; font-size:1.4rem; max-width:46ch; }
.flow-arrow { display:none; }
.diagram-notes { grid-template-columns:1fr; gap:0; margin-top:2.2rem; padding-top:0; border-top:0; }
.diagram-note { padding:1.2rem 0; border-left:0; border-top:1px solid var(--line-soft); font-size:1.45rem; }
.diagram-note:nth-child(n) { border-left:0; }
.diagram-note strong { font-family:var(--display); font-size:1.9rem; font-weight:500; }
.operating-principles { display:block; margin-top:2rem; }
.operating-principle { padding:0; border:0; border-radius:0; background:transparent; }
.operating-principle + .operating-principle { margin-top:1.4rem; }
.operating-principle strong { font-size:2.2rem; }
.operating-principle p { font-size:1.55rem; }
@media(max-width:767px){ .flow-track { grid-template-columns:1fr; } .flow-node { padding-left:3.4rem; } .flow-node .flow-index { margin-left:-2.7rem; } }

/* Founder, FAQ, contact, and footer: strip away slogan behavior. */
.operator-portrait { width:18rem; height:18rem; border-radius:50%; object-fit:cover;
  -webkit-mask-image:radial-gradient(circle, #000 58%, transparent 74%);
  mask-image:radial-gradient(circle, #000 58%, transparent 74%);
  filter:saturate(.9); }
.operator-copy p { max-width:58ch; }
.founder-quote { display:none; }
.cred-list { display:none; }
.async-note { margin-top:3rem; padding:2.4rem; border:1px solid var(--line); border-radius:1.4rem; background:var(--paper-blue); color:var(--muted); }
.faq-item summary { font-size:2rem; }
.form-note { border-left:1px solid var(--ink); background:var(--paper-cream); padding:1.8rem 2rem; }
.site-footer { background:var(--ink); }
.footer-cta { background:var(--ink); }
.footer-cta h2 { max-width:15ch; }
.footer-cta .giant-link { color:var(--paper-yellow); }

/* The old process cards should not animate as a dashboard even if scripts remain. */
.method-rail article, .method-card { transition:none !important; }

/* Quiet human process: a reading path, not a dashboard. */
.working-sequence { position:relative; margin-top:4.8rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.working-sequence::before { content:""; position:absolute; left:1.4rem; top:2.8rem; bottom:2.8rem; width:1px; background:var(--ink); }
.working-sequence article { display:grid; grid-template-columns:5.2rem 1fr; gap:1.8rem; padding:3.2rem 0; border-top:1px solid var(--line-soft); position:relative; }
.working-sequence article:first-child { border-top:0; }
.working-sequence article > span { width:2.8rem; height:2.8rem; display:grid; place-items:center; position:relative; z-index:1; background:var(--paper); border:1px solid var(--ink); border-radius:50%; color:var(--muted); font-size:1.05rem; letter-spacing:.07em; }
.working-sequence article:nth-child(1) > span { background:var(--paper-yellow); }
.working-sequence article:nth-child(3) > span { background:var(--paper-blue); }
.working-sequence article:nth-child(5) > span { background:var(--paper-cream); }
.working-sequence h3 { margin:0; font-family:var(--display); font-size:clamp(2.3rem,3.3vw,3.8rem); font-weight:500; letter-spacing:-.025em; line-height:1.04; }
.working-sequence p { margin:1rem 0 0; max-width:53ch; color:var(--muted); font-size:1.65rem; line-height:1.55; }
@media(max-width:767px) { .working-sequence::before { left:1.15rem; } .working-sequence article { grid-template-columns:4.4rem 1fr; gap:1.2rem; padding:2.6rem 0; } .working-sequence article > span { width:2.3rem; height:2.3rem; font-size:.95rem; } .working-sequence p { font-size:1.52rem; } }

/* Social marks: recognizable at a glance, text labels remain in accessible names. */
.footer-socials { align-items:center; }
.footer-socials .social-icon { display:inline-grid; place-items:center; width:2.8rem; height:2.8rem; color:rgba(255,255,255,.72); letter-spacing:0; }
.footer-socials .social-icon svg { width:1.7rem; height:1.7rem; display:block; }
.footer-socials .social-icon:hover { color:#fff; }
.footer-socials .social-icon:focus-visible { outline:1px solid var(--paper-yellow); outline-offset:4px; }
@media(max-width:767px) { .footer-socials .social-icon { width:2.6rem; height:2.6rem; } }


/* ================================================================
   Soft mineral palette
   Limestone · fog · muted petrol · soft citron · mineral ink
   ================================================================ */
:root {
  --zoho-blue: #62797b;
  --zoho-cyan: #dde4e1;
  --zoho-periwinkle: #e8e5dd;
  --zoho-lavender: #edf0de;
  --zoho-blush: #f3f0e9;
  --zoho-green: #dde4e1;
  --zoho-yellow: #c8d39b;
  --zoho-cream: #e8e5dd;
  --zoho-pale-blue: #dde4e1;
  --zoho-purple: #62797b;
  --zoho-red: #f0483e;
  --zoho-leaf: #39b54a;
  /* unified dark: one token for every dark band */
  --dark: #202625;
}

/* Hero: one photograph, no audit artifact, no caption/tag. */
.hero-visual-stack { min-height: 0; padding-bottom: 0; }
.hero-photo { width:100%; min-height: clamp(42rem, 48vw, 64rem); overflow:hidden; }
.hero-photo img { width:100%; height:100%; min-height:inherit; object-fit:cover; filter:saturate(.94) contrast(1.02); }
.hero-overlay { background:linear-gradient(90deg, rgba(15,15,14,.16), transparent 42%, rgba(15,15,14,.08)); }
.hero-caption { display:none !important; }
@media(max-width:767px){ .hero-photo { min-height:36rem; } }

/* Restore the four deliverable artifacts as colored working folders. */
.section-deliverables { background:var(--paper); }
.section-deliverables .splitshow { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem; margin-top:5rem !important; border:0; }
.section-deliverables .deliv { display:block; min-height:42rem; padding:2rem; border:1px solid rgba(25,25,25,.12); border-radius:1.8rem; overflow:hidden; box-shadow:0 1.4rem 2.8rem rgba(17,22,42,.05); transform:translateY(0); transition:transform .35s ease, box-shadow .35s ease; }
.section-deliverables .deliv:hover { transform:translateY(-.7rem); box-shadow:0 2rem 4rem rgba(17,22,42,.09); }
.section-deliverables .deliv::before,
.section-deliverables .deliv::after { display:none; }
.section-deliverables .deliv-media { position:relative; margin:0 0 2rem; }
.section-deliverables .deliv img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:contain; object-position:center; margin:0; border:1px solid rgba(25,25,25,.14); border-radius:1rem; background:#fff; }
.section-deliverables .deliv-tack {
  position:absolute;
  top:-1.25rem;
  left:50%;
  z-index:3;
  width:2.7rem;
  height:3.52rem;
  border:0;
  border-radius:0;
  background:url("images/red-pushpin.webp") center / 100% 100% no-repeat;
  filter:drop-shadow(.08rem .16rem .14rem rgba(25,25,25,.24));
  transform:translateX(-50%);
  pointer-events:none;
}
.section-deliverables .deliv-tack::before,
.section-deliverables .deliv-tack::after { display:none; content:none; }
.section-deliverables .deliv .num { display:block; color:rgba(25,25,25,.55); font-size:1.15rem; letter-spacing:.12em; }
.section-deliverables .deliv h3 { margin:.75rem 0 0; font-size:2.8rem; line-height:1.04; }
.section-deliverables .deliv p { margin:1rem 0 0; max-width:36ch; color:rgba(25,25,25,.7); font-size:1.5rem; line-height:1.5; }
.section-deliverables .deliv-cyan { --card-accent:var(--ink); --card-dot:var(--accent); background:var(--paper-blue); }
.section-deliverables .deliv-periwinkle { --card-accent:var(--ink); --card-dot:var(--paper-yellow); background:var(--paper-cream); }
.section-deliverables .deliv-lavender { --card-accent:var(--ink); --card-dot:var(--accent); background:var(--paper); }
.section-deliverables .deliv-blush { --card-accent:var(--ink); --card-dot:var(--paper-yellow); background:var(--paper-blue); }
@media(max-width:767px){
  .section-deliverables .shell { width:100%; padding-inline:1.6rem; }
  .section-deliverables .splitshow { grid-template-columns:1fr; gap:1.8rem; }
  .section-deliverables .deliv { min-height:0; padding:1.5rem; }
  .section-deliverables .deliv img { height:auto; aspect-ratio:16 / 9; }
  .section-deliverables .deliv-tack { top:-1.05rem; width:2.3rem; height:3rem; }
  .section-deliverables .deliv h3 { font-size:2.4rem; }
}

/* One continuous canvas; color lives in objects, not full-width resets. */
.section-sample { background:var(--paper); }
.section-process { background:var(--paper); }
.section-pricing { background:var(--paper); }
.section-pricing .investment-hero { color:var(--paper); background:var(--accent); border-color:var(--accent); box-shadow:0 1.6rem 3.2rem rgba(32,38,37,.12); }
.section-pricing .investment-hero .investment-label,
.section-pricing .investment-hero p,
.section-pricing .investment-hero .investment-price,
.section-pricing .investment-hero .investment-side .micro { color:rgba(243,240,233,.82); }
.section-pricing .investment-hero .investment-price { color:var(--paper); }
.section-pricing .investment-side .btn { background:var(--paper-yellow); color:var(--ink); }
.section-pricing .entry-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.4rem; align-items:stretch; }
.section-pricing .entry-card { min-width:0; display:flex; flex-direction:column; }
.section-pricing .entry-card a { margin-top:auto; padding-top:1.5rem; }
.section-pricing .entry-card:first-child { background:var(--paper-cream); padding:2rem; border-radius:1.6rem; }
.section-pricing .entry-card:last-child { background:var(--paper-blue); padding:2rem; border-radius:1.6rem; }
.section-pricing .entry-card + .entry-card { border-left-color:rgba(25,25,25,.12); }
.section-boundaries { background:var(--paper); }
.section-operator { background:var(--paper); }
.section-operator .async-note { background:var(--paper-blue); border-color:rgba(98,121,123,.2); }
.section-proof { background:linear-gradient(180deg,var(--paper) 0%,var(--paper-blue) 18%,var(--paper-blue) 82%,var(--paper) 100%); }
.section-faq { background:var(--paper); }
.section-contact { background:var(--paper); }
.section-contact .form-note { background:var(--paper-blue); border-left-color:var(--accent); }
@media(max-width:767px){
  .section-pricing .entry-grid { grid-template-columns:1fr; gap:1.8rem; }
  .section-pricing .entry-card:first-child, .section-pricing .entry-card:last-child { padding:2rem; }
  .section-pricing .entry-card + .entry-card { border-left:1px solid rgba(25,25,25,.12); }
}

/* How we work: a visible working thread, animated locally with GSAP. */
.section-boundaries .lede { max-width:54ch; }
.work-thread { position:relative; margin-top:4.6rem; padding:1rem 0 0; }
.thread-line { position:absolute; left:2.8rem; top:0; bottom:12rem; width:5.5rem; pointer-events:none; }
.thread-line svg { width:100%; height:100%; overflow:visible; }
.thread-line path { fill:none; stroke:var(--accent); stroke-width:1.5; stroke-linecap:round; stroke-dasharray:5 7; opacity:.7; }
.thread-dot { position:absolute; left:2.35rem; top:0; width:1rem; height:1rem; border-radius:50%; background:var(--paper-yellow); border:1px solid var(--ink); box-shadow:0 0 0 .65rem rgba(200,211,155,.28); }
.thread-steps { position:relative; display:grid; gap:1.15rem; padding-left:8rem; }
.thread-step { --thread-bg:var(--zoho-pale-blue); --thread-ink:var(--zoho-blue); display:grid; grid-template-columns:3.8rem 1fr; gap:1.5rem; align-items:start; padding:2rem 2.2rem; border:1px solid var(--line-soft); border-radius:1.2rem; background:rgba(243,240,233,.72); box-shadow:0 .6rem 1.4rem rgba(32,38,37,.035); opacity:1; transform:translateX(0) scale(.985); transition:transform .35s ease, background-color .35s ease, box-shadow .35s ease; }
.thread-step.is-active { background:var(--thread-bg); opacity:1; transform:translateX(.45rem) scale(1); box-shadow:0 1.2rem 2.4rem rgba(25,25,25,.07); }
.thread-index { display:grid; place-items:center; width:2.8rem; height:2.8rem; border:1px solid rgba(25,25,25,.28); border-radius:50%; background:rgba(255,255,255,.65); color:var(--thread-ink); font-size:1.05rem; letter-spacing:.08em; }
.thread-step h3 { margin:0; font-family:var(--display); font-size:clamp(2.25rem,3.2vw,3.6rem); line-height:1.03; letter-spacing:-.03em; }
.thread-step p { margin:.8rem 0 0; max-width:45ch; color:rgba(25,25,25,.7); font-size:1.52rem; line-height:1.48; }
.thread-artifact { display:inline-block; margin-top:1rem; padding:.5rem .8rem; border-left:2px solid var(--thread-ink); color:var(--thread-ink); background:rgba(255,255,255,.42); font-size:1.16rem; letter-spacing:.02em; }
.thread-cyan { --thread-bg:var(--paper-blue); --thread-ink:var(--accent); }
.thread-periwinkle { --thread-bg:var(--paper-yellow); --thread-ink:var(--ink); }
.thread-lavender { --thread-bg:var(--paper-cream); --thread-ink:var(--accent); }
.thread-blush { --thread-bg:var(--paper-blue); --thread-ink:var(--accent); }
.thread-green { --thread-bg:var(--paper-blue); --thread-ink:var(--accent); }
.thread-yellow { --thread-bg:var(--paper-yellow); --thread-ink:var(--ink); }
.thread-outcomes { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; margin:2.6rem 0 0 8rem; }
.thread-outcome { padding:1.6rem 1.8rem; border:1px solid rgba(25,25,25,.12); border-radius:1.2rem; background:var(--paper-blue); }
.thread-outcome.thread-coral { background:var(--paper-cream); }
.thread-outcome strong { display:block; font-family:var(--display); font-size:2rem; }
.thread-outcome span { display:block; margin-top:.45rem; color:rgba(25,25,25,.68); font-size:1.3rem; line-height:1.4; }
@media(max-width:767px){
  .thread-line { left:1.4rem; width:3.2rem; bottom:15rem; }
  .thread-dot { left:1.35rem; width:.85rem; height:.85rem; }
  .thread-steps { padding-left:4.7rem; }
  .thread-step { grid-template-columns:2.8rem 1fr; gap:1rem; padding:1.5rem 1.2rem; }
  .thread-index { width:2.25rem; height:2.25rem; font-size:.9rem; }
  .thread-step h3 { font-size:2.15rem; }
  .thread-step p { font-size:1.4rem; }
  .thread-artifact { font-size:1.05rem; }
  .thread-outcomes { grid-template-columns:1fr; margin-left:4.7rem; }
}

@media(prefers-reduced-motion:reduce){
  .thread-step { opacity:1; transform:none; transition:none; }
  .thread-dot { display:none; }
  .section-deliverables .deliv { transition:none; }
}


/* Final hero composition repair: the image owns a true half-width, full-height column. */
@media(min-width:768px){
  .lab-hero-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; min-height:clamp(52rem, 60vw, 72rem); }
  .lab-hero-copy { display:flex; flex-direction:column; justify-content:center; padding-bottom:0; }
  .hero-visual-stack { height:100%; min-height:0; align-self:stretch; padding:0; }
  .hero-photo { height:100%; min-height:0; border-radius:0; }
}
@media(max-width:767px){
  .hero-visual-stack { height:auto; min-height:0; padding:0; }
  .hero-photo { height:36rem; min-height:36rem; }
}


/* Hero viewport repair: eliminate the remaining white bands around the image on desktop. */
@media(min-width:768px){
  .lab-hero { padding-top:7.2rem; padding-bottom:0; }
  .lab-hero-grid { min-height:calc(100svh - 7.2rem); }
}


/* Reviews: centered interruption with a scalable, bidirectional horizontal track. */
.section-proof { overflow:hidden; }
.proof-heading { text-align:center; }
.proof-heading .kicker { display:block; }
.proof-heading .h-display { max-width:15ch; margin:1.8rem auto 0; text-wrap:balance; }
.proof-scroll { width:100%; margin-top:5rem; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x proximity; scrollbar-width:none; cursor:grab; }
.proof-scroll:active { cursor:grabbing; }
.proof-scroll.is-dragging { cursor:grabbing; user-select:none; scroll-snap-type:none; }
.proof-scroll:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.proof-scroll::-webkit-scrollbar { display:none; }
.proof-notes { display:flex; align-items:stretch; width:max-content; gap:2rem; padding:0 max(2rem,calc((100vw - 120rem) / 2)) 2.4rem; }
.proof-note { flex:0 0 clamp(30rem,36vw,46rem); margin:0; position:relative; padding:2.4rem; border:1px solid var(--line); border-radius:1.6rem; background:var(--paper); scroll-snap-align:center; box-shadow:0 1rem 2.2rem rgba(32,38,37,.055); }
.proof-note .proof-mark { position:absolute; top:1.8rem; right:2rem; font-family:var(--display); font-size:4.8rem; line-height:.7; color:rgba(98,121,123,.22); user-select:none; }
.proof-note blockquote { margin:1.8rem 0 0; font-family:var(--handwritten); font-style:italic; font-weight:420; font-size:clamp(1.9rem,2.05vw,2.45rem); line-height:1.3; letter-spacing:-.01em; }
.proof-note figcaption { margin-top:2rem; padding-top:1.2rem; border-top:1px solid var(--ink); display:flex; align-items:baseline; flex-wrap:wrap; gap:.8rem; }
.proof-name { font-size:1.3rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; }
.proof-product { font-size:1.3rem; color:var(--muted); }
.proof-rating { --rating:100%; position:relative; display:inline-block; width:7.8em; height:1.2em; color:#d8d0c1; font-size:1.55rem; line-height:1; letter-spacing:.18em; }
.proof-rating::before,
.proof-rating::after { content:"★★★★★"; position:absolute; inset:0 auto auto 0; white-space:nowrap; }
.proof-rating::before { color:#d8d0c1; }
.proof-rating::after { width:var(--rating); overflow:hidden; color:#899665; }

/* Preserve each tool's original brand colours. */
.tool-logo { opacity:1; }
@media (max-width:767px){
  .proof-scroll { margin-top:3.6rem; scroll-snap-type:x mandatory; }
  .proof-notes { gap:1.4rem; padding-inline:1.6rem; }
  .proof-note { flex-basis:calc(100vw - 5.6rem); padding:2rem; }
  .proof-note blockquote { font-size:1.85rem; line-height:1.3; }
}

/* Tool wordmarks: "Powered by" band, bare marks, no claim, seamless marquee. */
.tool-strip { overflow:hidden; padding:4rem 0 4.4rem; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.tool-strip-label { display:block; text-align:center; font-weight:500; font-size:1.3rem; letter-spacing:.12em; line-height:1.1; text-transform:uppercase; color:var(--muted); margin-bottom:3rem; }
@media (min-width:768px) { .tool-strip-label { font-size:1.4rem; } }
.tool-track { display:flex; width:max-content; animation:toolScroll 30s linear infinite; will-change:transform; }
.tool-set { display:flex; align-items:center; gap:6rem; padding-right:6rem; }
.tool-logo { display:inline-flex; align-items:center; flex-shrink:0; }
.tool-logo svg { height:clamp(4.4rem,4.5vw,6.8rem); width:auto; display:block; }
.tool-strip:hover .tool-track { animation-play-state:paused; }
@keyframes toolScroll { from { transform:translateX(0); } to { transform:translateX(-25%); } }
@media (prefers-reduced-motion: reduce){ .tool-track { animation:none; } }


/* ================================================================
   Signal palette: warm editorial paper + electric field notes.
   One blue carries action; one acid signal marks decisions.
   ================================================================ */
:root {
  --paper:#f3f0e8;
  --paper-blue:#dfe7fb;
  --paper-cream:#fffdf8;
  --paper-yellow:#dfff55;
  --ink:#15161a;
  --muted:#65676d;
  --line:rgba(21,22,26,.17);
  --line-soft:rgba(21,22,26,.085);
  --accent:#2b50d8;
  --signal:#dfff55;
  --dark:#15161a;
  --bg:var(--paper);
  --blue:var(--accent);
  --blue-soft:var(--paper-yellow);
  --amber:var(--accent);
  --amber-soft:var(--paper-cream);
  --teal:var(--accent);
  --teal-soft:var(--paper-blue);
  --violet:var(--accent);
  --violet-soft:var(--paper-yellow);
  --coral:var(--accent);
  --coral-soft:var(--paper-yellow);
  --green:var(--accent);
  --green-soft:var(--paper-blue);
  --zoho-blue:var(--accent);
  --zoho-cyan:var(--paper-blue);
  --zoho-periwinkle:var(--paper-cream);
  --zoho-lavender:var(--paper-yellow);
  --zoho-blush:var(--paper);
  --zoho-green:var(--paper-blue);
  --zoho-yellow:var(--paper-yellow);
  --zoho-cream:var(--paper-cream);
  --zoho-pale-blue:var(--paper-blue);
  --zoho-purple:var(--accent);
  --zoho-red:var(--accent);
  --zoho-leaf:var(--accent);
}

html, body { background:var(--paper); color:var(--ink); }
.site-header { background:rgba(243,240,232,.93); }
.lab-hero { background:var(--paper); }
.lab-hero::after { display:none; }
.lab-hero .h-display .accent { color:var(--accent); }

/* Large environments create rhythm; individual widgets do not invent colors. */
.kinetic { background:var(--signal); }
.cycle-band { background:var(--dark); }
.cycle-band::before { background:rgba(27,27,31,.74); }
#offer { background:var(--paper); }
.wedge-band { background:var(--dark); }
.wedge-band::after { background:rgba(27,27,31,.68); }
.section-sample,
.section-deliverables { background:var(--paper-cream); }

/* Deliverable artifacts sit on neutral working boards; the red tack is the material accent. */
.section-deliverables .deliv-cyan,
.section-deliverables .deliv-lavender { background:var(--paper-cream); }
.section-deliverables .deliv-periwinkle,
.section-deliverables .deliv-blush { background:var(--paper-blue); }

/* Pricing: a decisive blue field, not a stack of generic SaaS cards. */
.section-pricing { background:var(--accent); color:#fff; }
.section-pricing .caption,
.section-pricing .kicker,
.section-pricing .price-bridge { color:rgba(255,255,255,.78); }
.section-pricing .investment-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(21rem,.46fr);
  align-items:end;
  gap:clamp(3rem,5vw,7rem);
  background:var(--dark);
  border-color:var(--dark);
  color:#fff;
  box-shadow:none;
  overflow:hidden;
}
.section-pricing .investment-hero::before {
  display:none;
}
.section-pricing .investment-hero::after {
  display:none;
}
.section-pricing .investment-copy,
.section-pricing .investment-side { position:relative; z-index:1; }
.section-pricing .investment-hero .investment-label,
.section-pricing .investment-hero p,
.section-pricing .investment-hero .investment-price,
.section-pricing .investment-hero .investment-side .micro { color:rgba(255,255,255,.78); }
.section-pricing .investment-hero .investment-price { color:#fff; }
.section-pricing .investment-price {
  font-size:clamp(4.2rem,6vw,7rem);
  font-weight:500;
  line-height:.95;
  letter-spacing:-.03em;
}
.section-pricing .investment-side .btn { background:var(--signal); color:var(--ink); }
.section-pricing .entry-options { color:var(--ink); }
.section-pricing .entry-options > .micro,
.section-pricing .entry-options > p { color:rgba(255,255,255,.82); }
.section-pricing .entry-grid { gap:1.4rem; border:0; }
.section-pricing .entry-card {
  min-height:31rem;
  padding:clamp(2.4rem,3vw,3.4rem);
  border:1px solid rgba(21,22,26,.12);
  border-radius:1.2rem;
}
.section-pricing .entry-card:first-child { background:var(--paper-cream); }
.section-pricing .entry-card:last-child { background:var(--signal); }
.section-pricing .entry-card + .entry-card { border-left:1px solid rgba(21,22,26,.12); }
.section-pricing .entry-card h3 { font-size:clamp(2.8rem,3.5vw,4.2rem); }
.section-pricing .entry-card p { max-width:46ch; font-size:1.55rem; line-height:1.5; }
.section-pricing .entry-card .entry-price { margin-top:auto; padding-top:2.8rem; font-size:4.2rem; }
.section-pricing .entry-card a { padding-top:1.7rem; text-decoration:none; }
.section-pricing .entry-card a::after { content:""; display:block; width:100%; height:1px; margin-top:.55rem; background:currentColor; transform:scaleX(.22); transform-origin:left; transition:transform .45s var(--ease); }
.section-pricing .entry-card a:hover::after { transform:scaleX(1); }

.pricing-decisions {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:clamp(3.6rem,5vw,5.5rem);
  border-top:1px solid rgba(255,255,255,.38);
  border-bottom:1px solid rgba(255,255,255,.38);
}
.pricing-decision {
  display:block;
  min-width:0;
  padding:clamp(2.6rem,3.4vw,4rem) clamp(2rem,3vw,3.5rem) clamp(2.6rem,3.4vw,4rem) 0;
  color:#fff;
}
.pricing-decision + .pricing-decision { padding-left:clamp(2rem,3vw,3.5rem); border-left:1px solid rgba(255,255,255,.38); }
.pricing-decision strong { display:block; font-family:var(--display); font-size:clamp(2.6rem,3vw,3.8rem); font-weight:470; line-height:1; letter-spacing:-.035em; }
.pricing-decision div > span { display:block; max-width:30ch; margin-top:1rem; color:rgba(255,255,255,.9); font-size:1.5rem; line-height:1.45; }
.pricing-boundary {
  display:grid;
  grid-template-columns:minmax(13rem,.35fr) 1fr;
  gap:clamp(2rem,4vw,5rem);
  align-items:start;
  padding-top:clamp(3rem,4vw,4.8rem);
  color:#fff;
}
.pricing-boundary .micro { color:var(--signal); }
.pricing-boundary p { max-width:46ch; font-size:clamp(1.8rem,2vw,2.25rem); line-height:1.35; }
.pricing-boundary strong { font-weight:620; }

/* Process uses one concrete field and one white card system. */
.section-boundaries { background:var(--paper-blue); }
.thread-step,
.thread-step.is-active,
.thread-cyan,
.thread-periwinkle,
.thread-lavender,
.thread-blush,
.thread-green,
.thread-yellow { --thread-bg:#fff; --thread-ink:var(--accent); }
.thread-step { background:rgba(255,255,255,.62); }
.thread-step.is-active { background:#fff; }
.thread-dot { background:var(--signal); border-color:var(--ink); box-shadow:0 0 0 .65rem rgba(43,80,216,.16); }

/* Reviews become the second deliberate dark interruption. */
.section-proof {
  padding-block:clamp(9rem,12vw,15rem) clamp(8rem,10vw,12rem);
  background:var(--dark);
  color:#fff;
}
.section-proof .kicker { color:rgba(255,255,255,.62); }
.section-proof .proof-scroll { margin-top:clamp(5.5rem,7vw,8rem); }
.proof-note { background:#fff; color:var(--ink); border-color:rgba(255,255,255,.12); box-shadow:none; }
.proof-note .proof-mark { color:rgba(43,80,216,.3); }
.proof-rating::after { color:var(--accent); }
.tool-strip { background:var(--paper-blue); }

.section-faq { background:var(--paper-cream); }

/* Intake closes on ink, with the signal colour reserved for action. */
.section-contact { background:var(--dark); color:#fff; }
.section-contact .caption,
.section-contact .kicker,
.section-contact .micro,
.section-contact label { color:rgba(255,255,255,.78); }
.section-contact input,
.section-contact select,
.section-contact textarea {
  color:#fff;
  border-bottom-color:rgba(255,255,255,.42);
}
.section-contact input:focus,
.section-contact select:focus,
.section-contact textarea:focus { border-bottom-color:#fff; }
.section-contact input::placeholder,
.section-contact textarea::placeholder { color:rgba(255,255,255,.5); }
.section-contact label em { color:rgba(255,255,255,.58) !important; }
.section-contact select option { color:var(--ink); background:#fff; }
.section-contact .btn-filled { background:var(--signal); color:var(--ink); }

@media(max-width:767px){
  .section-pricing .investment-hero { grid-template-columns:1fr; }
  .section-pricing .investment-price { font-size:3.9rem; }
  .section-pricing .entry-grid { grid-template-columns:1fr; gap:1.2rem; }
  .section-pricing .entry-card { min-height:0; padding:2.4rem; }
  .section-pricing .entry-card + .entry-card { border-left:1px solid rgba(21,22,26,.12); }
  .pricing-decisions { grid-template-columns:1fr; }
  .pricing-decision { padding:2.6rem 0; }
  .pricing-decision + .pricing-decision { padding-left:0; border-left:0; border-top:1px solid rgba(255,255,255,.38); }
  .pricing-boundary { grid-template-columns:1fr; gap:1.2rem; }
  .pricing-boundary p { font-size:1.8rem; }
}

@media(prefers-reduced-motion:reduce){
  .section-pricing .entry-card a::after { transition:none; }
}


/* Hero image: preserve the copy grid while letting the photograph meet the viewport edge. */
@media(min-width:1024px){
  .lab-hero > .shell {
    width:100%;
    max-width:none;
    padding-left:max(13.5rem, calc((100vw - 160rem) / 2 + 12rem));
    padding-right:0;
  }
  .lab-hero-grid {
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(4rem,6vw,9rem);
  }
  .hero-photo img { object-position:72% center; }
}

@media(max-width:1023px){
  .lab-hero { padding-top:7.2rem; }
  .lab-hero > .shell {
    width:100%;
    max-width:none;
    padding-inline:0;
  }
  .lab-hero-grid {
    grid-template-columns:1fr;
    min-height:0;
    gap:0;
  }
  .lab-hero-copy {
    padding:clamp(5rem,8vw,8rem) clamp(2.4rem,7vw,7rem);
  }
  .hero-visual-stack,
  .hero-photo {
    width:100%;
    height:clamp(34rem,62vw,52rem);
    min-height:0;
  }
  .hero-photo img { object-position:68% center; }
}