/* ════════════════════════════════════════════════════════════
   PAGE TRANSITIONS (View Transitions API)
   Smooth cross-fade between same-origin navigations on browsers
   that support it (Chromium 126+, Safari 18+). Firefox falls
   back to instant nav with no error. No JS, no SPA router.
   ════════════════════════════════════════════════════════════ */
@view-transition{ navigation:auto; }
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:.4s;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

/* ════════════════════════════════════════════════════════════
   RESET & VARIABLES
   ════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Backgrounds — deep forest tones */
  --bg:#0E1815;
  --bg-elevated:#13251F;
  --bg-card:#1F4A3D;
  /* Text */
  --text:#F8F5EE;
  --warm:#F3EDE1;
  --dim:#B9C5BE;
  --beige:#D8CBB8;
  /* Accents */
  --accent:#3DB191;        /* primary teal accent (replaces sage) */
  --accent-deep:#2E6F61;   /* deeper teal for secondary, borders */
  --accent-warm:#B89B5E;   /* muted gold for sparing highlights */
  /* Surfaces */
  --surf:rgba(248,245,238,0.04);
  --surf-b:rgba(248,245,238,0.08);
  --line:rgba(248,245,238,0.08);
  /* River backdrop colour: very dark forest, the colour the river bed
     would be in deep shade. Keeps glass content the focus. */
  --wave-color:#010e04;
}

/* ════════════════════════════════════════════════════════════
   VANTA WAVES BACKGROUND
   Fixed full-viewport target. Vanta replaces the contents of
   this div with an animated WebGL canvas on every device (the
   river is the site's signature visual). Mobile gets softened
   wave settings for performance. Skipped only on
   prefers-reduced-motion, where the solid background-color
   stays as the fallback.
   ════════════════════════════════════════════════════════════ */
#waves-bg{
  position:fixed;
  inset:0;
  z-index:0;
  background:var(--wave-color);
  pointer-events:none;
}
#waves-bg canvas{ display:block; }

/* River-zone bridge: the band between the hero and the Problem
   section that fades the solid forest dark out so the live waves
   underneath gradually appear. */
.transition-bridge--into{
  position:relative;
  z-index:1;
  height:18vh;
  background:linear-gradient(
    to bottom,
    var(--wave-color) 0%,
    var(--wave-color) 18%,
    rgba(1,14,4,0.85) 38%,
    rgba(1,14,4,0.55) 60%,
    rgba(1,14,4,0.25) 80%,
    transparent 100%
  );
  pointer-events:none;
}
@media(max-width:880px){
  .transition-bridge--into{ height:14vh; }
}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;font-size:clamp(15px,1.1vw,18px)}
/* Anchor scrolls land below the fixed nav, not jammed up under it.
   Targets any anchored section so #problem, #services, #workflow-review,
   #about (etc.) all reveal their heading rather than starting halfway
   into the content. */
section[id],
div[id]{scroll-margin-top:5rem;}
@media(max-width:880px){
  section[id],
  div[id]{scroll-margin-top:4.2rem;}
}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,sans-serif;
  background:var(--bg);color:var(--text);line-height:1.6;
  overflow-x:hidden;min-height:100vh;
  position:relative;
}

/* ════════════════════════════════════════════════════════════
   INTERNAL PAGE LAYOUT (about, services/*, workflow-review, contact)
   No hero video — content starts below the nav.
   ════════════════════════════════════════════════════════════ */
body.page-internal{padding-top:4.5rem;}
.page-content{position:relative;z-index:1;}
.page-hero{
  position:relative;
  isolation:isolate;
  padding:5rem 1.5rem 3rem;
  text-align:center;
  max-width:1040px;margin:0 auto;
}
/* Soft pool of darker forest behind the H1 + lede, so big white text doesn't
   sit naked on the moving river. Atmospheric vignette, not a card. */
.page-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(
    ellipse 70% 75% at 50% 50%,
    rgba(5,9,7,0.55) 0%,
    rgba(5,9,7,0.32) 45%,
    transparent 82%
  );
  pointer-events:none;
}
.page-hero .section-head{margin-bottom:1.5rem;}
.page-hero .lede{
  max-width:62ch;margin:0 auto;
  color:var(--dim);font-size:1.08rem;line-height:1.65;
}

/* Service-page variant classes (replace ad-hoc inline style overrides).
   Compound selector on --left so it beats .section-head's defaults
   regardless of source-order. */
.section-head.section-head--left{
  text-align:left;
  max-width:none;
  margin-left:0;
  margin-right:0;
}
.svc-list{
  max-width:680px;
  margin:1.5rem 0 0;
}
.svc-flow{
  aspect-ratio:auto;
  min-height:auto;
  padding:2rem;
  margin:2rem auto;
  max-width:480px;
}
.svc-flow .flow-list{margin:0;}
.svc-mock{
  max-width:480px;
  margin:2rem auto 0;
}
/* Generic content card — wraps a section's heading + list/content in a
   forest-tone container so it reads as a discrete unit on the river. */
.content-card{
  background:rgba(13,22,17,0.74);
  border:1px solid rgba(61,177,145,0.22);
  border-radius:22px;
  padding:2.6rem 2.2rem;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
.content-card .section-head{margin-bottom:1.4rem;}
.content-card .who-list{
  max-width:580px;
  margin:1.2rem auto 0;
}
.content-card .outcomes-list{
  max-width:580px;
  margin:1.2rem auto 0;
}
.content-card .faq-list{
  margin:1rem auto 0;
}
@media(max-width:520px){
  .content-card{padding:2rem 1.5rem;}
}

/* ════════════════════════════════════════════════════════════
   DASHBOARD MOCK (custom-applications "What it looks like")
   Richer than .mock-stats: header bar + Live tag, 3 number tiles
   in a row, status-dot feed list. Reads as "a real interface".
   ════════════════════════════════════════════════════════════ */
.mock--dashboard{
  max-width:540px;
  margin:2rem auto 0;
  padding:1.4rem 1.4rem 1.5rem;
  background:rgba(0,0,0,0.34);
  border-color:rgba(93,219,140,0.18);
}
.mock-dashboard-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-bottom:.95rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
  margin-bottom:1.05rem;
}
.mock-dashboard-title{
  font-size:.92rem;
  font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-.005em;
}
.mock-dashboard-date{
  font-size:.7rem;
  color:var(--dim);
  margin:.2rem 0 0;
}
.mock-dashboard-tag{
  font-size:.62rem;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.1em;
  padding:.3rem .7rem;
  background:rgba(93,219,140,0.1);
  border:1px solid rgba(93,219,140,0.32);
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:.42rem;
}
.mock-dashboard-tag::before{
  content:'';
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px rgba(61,177,145,0.65);
}
.mock-dashboard-tabs{
  display:inline-flex;
  gap:.2rem;
  margin:0 0 1rem;
  padding:.25rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
}
.mock-dashboard-tab{
  font-size:.72rem;
  font-weight:600;
  color:var(--dim);
  padding:.32rem .85rem;
  border-radius:5px;
  letter-spacing:.005em;
  user-select:none;
}
.mock-dashboard-tab--active{
  background:rgba(61,177,145,0.18);
  color:var(--accent);
  border:1px solid rgba(61,177,145,0.34);
  padding:calc(.32rem - 1px) calc(.85rem - 1px);
}
.mock-tile-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.55rem;
  margin-bottom:1.15rem;
}
.mock-tile{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:8px;
  padding:.7rem .8rem;
  display:flex;
  flex-direction:column;
}
.mock-tile-num{
  font-size:1.32rem;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.05;
}
.mock-tile-label{
  font-size:.66rem;
  color:var(--dim);
  margin-top:.32rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.mock-section-title{
  font-size:.66rem;
  font-weight:700;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0 0 .65rem;
}
.mock-feed{
  list-style:none;
  margin:0;padding:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mock-feed li{
  display:flex;
  align-items:center;
  gap:.65rem;
  font-size:.82rem;
  color:var(--text);
  line-height:1.4;
}
.mock-feed-dot{
  width:8px;height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.mock-feed-dot--green{
  background:var(--accent);
  box-shadow:0 0 8px rgba(61,177,145,0.5);
}
.mock-feed-dot--amber{
  background:#f5b758;
  box-shadow:0 0 8px rgba(245,183,88,0.45);
}
.mock-feed-dot--grey{
  background:rgba(255,255,255,0.28);
}
@media(max-width:520px){
  .mock-tile-row{gap:.4rem;}
  .mock-tile{padding:.55rem .55rem;}
  .mock-tile-num{font-size:1.15rem;}
  .mock-tile-label{font-size:.6rem;}
}

/* ════════════════════════════════════════════════════════════
   PHONE-FRAMED EMAIL MOCK (Smart Websites "A reply that writes itself")
   Shows the customer's POV: an auto-reply landing on their phone
   moments after they hit Send. Bezel ties the visual to the page's
   "built for a phone first" promise.
   ════════════════════════════════════════════════════════════ */
.mock--phone-email{
  max-width:340px;
  margin:2rem auto 0;
  padding:0;
  background:none;
  border:none;
}
.phone-bezel{
  position:relative;
  background:linear-gradient(165deg, #1a2620 0%, #0e1812 100%);
  border:1px solid rgba(61,177,145,0.22);
  border-radius:34px;
  padding:22px 12px 18px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.phone-notch{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:80px;
  height:14px;
  background:#040806;
  border-radius:0 0 12px 12px;
}
.phone-screen{
  background:rgba(13,22,17,0.92);
  border:1px solid rgba(255,255,255,0.05);
  border-radius:20px;
  padding:.85rem .8rem .9rem;
}
.email-app-head{
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:0 .2rem .65rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  font-size:.72rem;
  font-weight:600;
}
.email-app-back{
  color:var(--accent);
  font-size:1.1rem;
  line-height:1;
}
.email-app-title{color:rgba(220,232,224,0.7);}
.email-card{
  padding:.85rem .2rem .25rem;
}
.email-card-head{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}
.email-avatar{
  flex-shrink:0;
  width:34px;
  height:34px;
  border-radius:50%;
  background:linear-gradient(135deg, rgba(61,177,145,0.55), rgba(61,177,145,0.2));
  border:1px solid rgba(61,177,145,0.35);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:.02em;
}
.email-meta{flex:1;min-width:0;}
.email-from-line{
  margin:0;
  font-size:.8rem;
  color:var(--text);
  line-height:1.3;
}
.email-from-line strong{font-weight:700;}
.email-to-line{
  margin:.12rem 0 0;
  font-size:.68rem;
  color:rgba(220,232,224,0.7);
  line-height:1.3;
}
.email-auto-pill{
  flex-shrink:0;
  background:rgba(61,177,145,0.14);
  color:var(--accent);
  font-size:.56rem;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.22rem .55rem;
  border-radius:99px;
  border:1px solid rgba(61,177,145,0.3);
  white-space:nowrap;
}
.email-subject{
  margin:.85rem 0 .55rem;
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.005em;
  line-height:1.3;
}
.email-body{
  font-size:.78rem;
  color:rgba(220,232,224,0.82);
  line-height:1.55;
}
.email-body p{
  margin:.5rem 0;
}
.email-cta{
  display:inline-block;
  margin:.65rem 0 .25rem;
  background:rgba(61,177,145,0.12);
  border:1px solid rgba(61,177,145,0.4);
  border-radius:8px;
  padding:.42rem .8rem;
  font-size:.74rem;
  font-weight:600;
  color:var(--accent);
  text-decoration:none;
  letter-spacing:-.003em;
  pointer-events:none;
  cursor:default;
}

/* Long-form legal / policy pages. Tightens the section-h hierarchy
   inside a content-card so multiple subsections don't each shout. */
.legal-meta{
  font-size:.78rem;
  color:var(--dim);
  font-style:italic;
  text-align:center;
  margin-top:1rem;
}
.legal-doc{
  text-align:left;
}
.legal-doc h2{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.005em;
  margin:1.8rem 0 .6rem;
  line-height:1.3;
}
.legal-doc h2:first-child{margin-top:0;}
.legal-doc p,
.legal-doc li{
  font-size:.94rem;
  line-height:1.65;
  color:rgba(220,232,224,0.85);
  margin:.7rem 0;
}
.legal-doc ul{
  padding-left:1.3rem;
  margin:.7rem 0 1.1rem;
}
.legal-doc li{
  margin:.4rem 0;
}
.legal-doc strong{
  color:var(--text);
  font-weight:600;
}
.legal-doc a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-color:rgba(93,219,140,0.4);
  text-underline-offset:2px;
}
.legal-doc a:hover{
  text-decoration-color:var(--accent);
}
.email-sign{
  margin:.85rem 0 0;
  font-size:.76rem;
  color:rgba(220,232,224,0.7);
}
.email-footnote{
  margin:.85rem 0 0;
  padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,0.06);
  font-size:.6rem;
  color:rgba(220,232,224,0.7);
  text-align:center;
  letter-spacing:.02em;
}

/* Phone email reveal animation: blocks fade + slide up sequentially as
   the mock scrolls into view, giving the impression of an email loading
   onto the screen. CTA gets a small extra scale-pop. Total play ~1.7s.
   Driven by .mock--phone-email--play class added by main.js on scroll.
   Honours prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .mock--phone-email .email-app-head,
  .mock--phone-email .email-card-head,
  .mock--phone-email .email-subject,
  .mock--phone-email .email-body > *,
  .mock--phone-email .email-footnote{
    opacity:0;
    transform:translateY(8px);
  }
  .mock--phone-email .email-cta{
    transform:translateY(8px) scale(0.94);
    transform-origin:left center;
  }
  .mock--phone-email--play .email-app-head,
  .mock--phone-email--play .email-card-head,
  .mock--phone-email--play .email-subject,
  .mock--phone-email--play .email-body > *,
  .mock--phone-email--play .email-footnote{
    animation:email-block-in .55s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .mock--phone-email--play .email-cta{
    animation:email-cta-in .6s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .mock--phone-email--play .email-app-head{animation-delay:.15s;}
  .mock--phone-email--play .email-card-head{animation-delay:.35s;}
  .mock--phone-email--play .email-subject{animation-delay:.55s;}
  .mock--phone-email--play .email-body > *:nth-child(1){animation-delay:.75s;}
  .mock--phone-email--play .email-body > *:nth-child(2){animation-delay:.95s;}
  .mock--phone-email--play .email-body > *:nth-child(3){animation-delay:1.15s;}
  .mock--phone-email--play .email-body > *:nth-child(4){animation-delay:1.3s;}
  .mock--phone-email--play .email-footnote{animation-delay:1.45s;}
}
@keyframes email-block-in{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@keyframes email-cta-in{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* ════════════════════════════════════════════════════════════
   JOURNEY STRIP (Smart Websites "Example workflow")
   Vertical sequence of 5 stages, each a numbered node + a card
   containing a concrete preview of what happens at that step
   (URL bar, chat bubbles, form fields, email, summary). Connector
   spine runs down the left through the nodes.
   ════════════════════════════════════════════════════════════ */
.journey-strip{
  list-style:none;
  max-width:560px;
  margin:2.4rem auto 0;
  padding:0;
  position:relative;
}
.journey-step{
  position:relative;
  display:grid;
  grid-template-columns:48px 1fr;
  gap:1.1rem;
  padding-bottom:1.2rem;
}
.journey-step:last-child{padding-bottom:0;}
.journey-step::before{
  content:'';
  position:absolute;
  left:23px;
  top:48px;
  bottom:0;
  width:1.5px;
  background:linear-gradient(to bottom, rgba(61,177,145,0.45), rgba(61,177,145,0.2));
}
.journey-step:last-child::before{display:none;}
.journey-node{
  position:relative;
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(61,177,145,0.15);
  border:1.5px solid rgba(61,177,145,0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1;
  box-shadow:0 0 18px rgba(61,177,145,0.18);
}
.journey-num{
  font-size:1rem;
  font-weight:700;
  color:var(--accent);
  letter-spacing:-.02em;
}
.journey-card{
  background:rgba(13,22,17,0.74);
  border:1px solid rgba(61,177,145,0.18);
  border-radius:14px;
  padding:.95rem 1.1rem 1rem;
}
.journey-label{
  margin:0 0 .65rem;
  font-size:.82rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.005em;
  line-height:1.3;
}
.journey-preview{
  background:rgba(0,0,0,0.32);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  padding:.55rem .7rem;
  font-size:.74rem;
  color:rgba(220,232,224,0.78);
  line-height:1.4;
}
.journey-preview--url{
  display:flex;
  align-items:center;
  gap:.55rem;
}
.journey-url-dots{display:inline-flex;gap:.25rem;}
.journey-url-dots i{
  width:7px;height:7px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
}
.journey-url-bar{
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:5px;
  padding:.22rem .6rem;
  font-size:.7rem;
  color:rgba(220,232,224,0.7);
}
.journey-preview--chat{
  display:flex;
  flex-direction:column;
  gap:.42rem;
  padding:.7rem .8rem;
}
.journey-bubble{
  margin:0;
  padding:.48rem .72rem;
  border-radius:11px;
  font-size:.74rem;
  line-height:1.4;
  max-width:88%;
}
.journey-bubble--in{
  align-self:flex-start;
  background:rgba(255,255,255,0.05);
  border-bottom-left-radius:3px;
  color:rgba(230,238,232,0.92);
}
.journey-bubble--out{
  align-self:flex-end;
  background:rgba(61,177,145,0.18);
  border:1px solid rgba(61,177,145,0.34);
  border-bottom-right-radius:3px;
  color:var(--text);
}
.journey-preview--form{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:.55rem .8rem;
}
.journey-form-row{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.32rem 0;
  border-bottom:1px dashed rgba(255,255,255,0.07);
}
.journey-form-row:last-child{border-bottom:none;}
.journey-form-key{
  flex-shrink:0;
  min-width:48px;
  font-size:.6rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--dim);
  font-weight:700;
}
.journey-form-val{
  font-size:.76rem;
  color:var(--text);
  font-weight:500;
}
.journey-preview--email{
  display:flex;
  flex-direction:column;
  padding:.6rem .8rem;
}
.journey-email-from{
  margin:0;
  font-size:.6rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.08em;
}
.journey-email-subject{
  margin:.22rem 0 0;
  font-size:.78rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.003em;
}
.journey-preview--summary{
  display:flex;
  flex-direction:column;
  gap:.2rem;
  padding:.6rem .8rem;
}
.journey-summary-line{
  margin:0;
  font-size:.76rem;
  color:var(--text);
  line-height:1.4;
}
.journey-summary-line strong{
  color:var(--accent);
  font-weight:700;
}
.journey-summary-line--dim{
  color:rgba(220,232,224,0.6);
  font-size:.72rem;
}
@media(max-width:520px){
  .journey-step{grid-template-columns:36px 1fr;gap:.8rem;}
  .journey-step::before{left:17px;top:36px;}
  .journey-node{width:36px;height:36px;}
  .journey-num{font-size:.85rem;}
  .journey-card{padding:.8rem .9rem .9rem;border-radius:12px;}
}

/* Journey strip animation: each step fades + slides in from the left while
   its numbered node briefly pulses a teal halo ring. Driven by the
   .journey-strip--play class added by main.js on scroll. Honours
   prefers-reduced-motion (initial states + animations are skipped, so the
   final visible state is the default). */
@media (prefers-reduced-motion: no-preference){
  .journey-step .journey-card{
    opacity:0;
    transform:translateX(-8px);
  }
  .journey-step .journey-node::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:50%;
    border:1.5px solid rgba(61,177,145,0.6);
    opacity:0;
    pointer-events:none;
  }
  .journey-strip--play .journey-step .journey-card{
    animation:journey-card-in .85s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .journey-strip--play .journey-step .journey-node::after{
    animation:journey-node-pulse 1s ease-out forwards;
  }
  .journey-strip--play .journey-step:nth-child(1) .journey-card,
  .journey-strip--play .journey-step:nth-child(1) .journey-node::after{animation-delay:.15s;}
  .journey-strip--play .journey-step:nth-child(2) .journey-card,
  .journey-strip--play .journey-step:nth-child(2) .journey-node::after{animation-delay:.65s;}
  .journey-strip--play .journey-step:nth-child(3) .journey-card,
  .journey-strip--play .journey-step:nth-child(3) .journey-node::after{animation-delay:1.15s;}
  .journey-strip--play .journey-step:nth-child(4) .journey-card,
  .journey-strip--play .journey-step:nth-child(4) .journey-node::after{animation-delay:1.65s;}
  .journey-strip--play .journey-step:nth-child(5) .journey-card,
  .journey-strip--play .journey-step:nth-child(5) .journey-node::after{animation-delay:2.15s;}
}
@keyframes journey-card-in{
  to{
    opacity:1;
    transform:translateX(0);
  }
}
@keyframes journey-node-pulse{
  0%{
    opacity:0.75;
    transform:scale(1);
  }
  100%{
    opacity:0;
    transform:scale(1.7);
  }
}

/* ════════════════════════════════════════════════════════════
   APP SHOWCASE (Custom Web Apps "Realistic examples")
   Three mini-mockups side by side, each a different shape of app
   (booking grid, kanban board, quote builder) to communicate that
   "custom" means many things. Stacks on mobile.
   ════════════════════════════════════════════════════════════ */
.app-showcase{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  max-width:680px;
  margin:2.2rem auto 0;
}
.app-mock{
  background:linear-gradient(165deg, rgba(13,22,17,0.82) 0%, rgba(8,15,11,0.92) 100%);
  border:1px solid rgba(61,177,145,0.22);
  border-radius:14px;
  padding:1.3rem 1.4rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.55);
}
.app-mock-head{
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.app-mock-name{
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-.005em;
}
.app-mock-sub{
  color:var(--dim);
  font-weight:500;
}
.app-mock-meta{
  font-size:.6rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:.3rem 0 0;
}
.app-mock-foot{
  margin:.15rem 0 0;
  padding-top:.65rem;
  border-top:1px solid rgba(255,255,255,0.05);
  font-size:.65rem;
  color:rgba(220,232,224,0.7);
  text-align:center;
  letter-spacing:.01em;
  line-height:1.35;
}

/* ── Booking grid variant ── */
.app-mock-grid{
  display:flex;
  flex-direction:column;
  gap:.34rem;
}
.app-mock-grid-head,
.app-mock-grid-row{
  display:grid;
  grid-template-columns:110px repeat(7, 1fr);
  gap:.22rem;
  align-items:center;
}
.app-mock-grid-head span{
  font-size:.5rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.12em;
  text-align:center;
  font-weight:700;
}
.app-mock-grid-label{
  font-size:.72rem;
  color:rgba(220,232,224,0.78);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-right:.35rem;
  font-weight:500;
}
.app-mock-grid-cell{
  height:16px;
  background:rgba(255,255,255,0.04);
  border-radius:3px;
}
.app-mock-grid-cell--booked{
  background:linear-gradient(180deg, rgba(61,177,145,0.45), rgba(61,177,145,0.28));
  border:1px solid rgba(61,177,145,0.55);
  box-shadow:0 0 8px rgba(61,177,145,0.18);
}

/* ── Kanban variant ── */
.app-mock-kanban{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.42rem;
}
.app-mock-col{
  display:flex;
  flex-direction:column;
  gap:.32rem;
  min-width:0;
}
.app-mock-col-head{
  font-size:.52rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 .12rem;
  font-weight:700;
}
.app-mock-card{
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  padding:.55rem .6rem .55rem;
  line-height:1.3;
  display:flex;
  flex-direction:column;
  gap:.18rem;
}
.app-mock-card-title{
  margin:0;
  font-size:.7rem;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.003em;
}
.app-mock-card-meta{
  margin:0;
  font-size:.6rem;
  color:rgba(220,232,224,0.62);
  font-weight:500;
}
.app-mock-card-due{
  margin:.1rem 0 0;
  font-size:.55rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:600;
}
.app-mock-card--active{
  background:rgba(61,177,145,0.16);
  border-color:rgba(61,177,145,0.34);
}
.app-mock-card--active .app-mock-card-due{
  color:rgba(61,177,145,0.95);
}
.app-mock-card--done{
  opacity:0.55;
}

/* ── Quote builder variant ── */
.app-mock-quote{
  display:flex;
  flex-direction:column;
}
.app-mock-quote-section{
  margin:.65rem 0 .15rem;
  font-size:.58rem;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.1em;
}
.app-mock-quote-section:first-child{margin-top:.15rem;}
.app-mock-quote-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:.66rem;
  color:rgba(220,232,224,0.8);
  padding:.3rem 0;
  border-bottom:1px dashed rgba(255,255,255,0.07);
  gap:.5rem;
}
.app-mock-quote-item{
  flex:1;
  min-width:0;
}
.app-mock-quote-amount{
  font-weight:700;
  color:var(--text);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
}
.app-mock-quote-total{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:.55rem 0 .55rem;
  margin-top:.1rem;
}
.app-mock-quote-total-label{
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
  font-size:.6rem;
}
.app-mock-quote-total-amount{
  color:var(--accent);
  font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:1rem;
  letter-spacing:-.005em;
}
.app-mock-quote-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.45rem;
  margin-top:.4rem;
}
.app-mock-quote-send{
  background:rgba(61,177,145,0.16);
  border:1px solid rgba(61,177,145,0.45);
  border-radius:6px;
  padding:.48rem .7rem;
  font-size:.66rem;
  font-weight:700;
  color:var(--accent);
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.005em;
  text-align:center;
  pointer-events:none;
}
.app-mock-quote-send--ghost{
  background:transparent;
  border-color:rgba(255,255,255,0.15);
  color:rgba(220,232,224,0.78);
}
@media(max-width:520px){
  .app-mock-quote-actions{grid-template-columns:1fr;gap:.4rem;}
}

/* Mobile: tighten the stacked mocks (already vertical at all widths) */
@media (max-width: 600px){
  .app-mock{padding:1.1rem 1.1rem 1.2rem;}
  .app-mock-grid-head,
  .app-mock-grid-row{
    grid-template-columns:88px repeat(7, 1fr);
    gap:.18rem;
  }
  .app-mock-grid-label{font-size:.66rem;}
  .app-mock-grid-cell{height:13px;}
}

/* App showcase animation: block-stagger fade-in as the row scrolls into
   view, mirroring the phone-email mock pattern. */
@media (prefers-reduced-motion: no-preference){
  .app-showcase .app-mock{
    opacity:0;
    transform:translateY(14px);
  }
  .app-showcase--play .app-mock{
    animation:app-mock-in .75s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .app-showcase--play .app-mock:nth-child(1){animation-delay:.15s;}
  .app-showcase--play .app-mock:nth-child(2){animation-delay:.4s;}
  .app-showcase--play .app-mock:nth-child(3){animation-delay:.65s;}
}
@keyframes app-mock-in{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Journey-strip preview variants used on custom-applications "How it gets built".
   Each step's mini-preview shows a concrete artefact from the build process
   (pain list, wireframe boxes, week schedule, live KPIs, changelog). */
.journey-preview--maplist{
  display:flex;
  flex-direction:column;
  gap:0;
  padding:.55rem .8rem .65rem;
}
.journey-map-line{
  margin:0;
  font-size:.74rem;
  color:rgba(220,232,224,0.78);
  line-height:1.4;
  padding:.3rem 0;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
.journey-map-line:last-child{border-bottom:none;}
.journey-map-line::before{
  content:'\00d7';
  display:inline-block;
  width:1rem;
  color:rgba(245,183,88,0.85);
  font-weight:700;
  margin-right:.05rem;
}

.journey-preview--wireframe{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.45rem;
  padding:.7rem .8rem;
}
.journey-wireframe-box{
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.13);
  border-radius:5px;
  padding:.45rem .35rem .55rem;
  text-align:center;
  font-size:.62rem;
  font-weight:700;
  color:rgba(220,232,224,0.82);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.journey-wireframe-box::after{
  content:'';
  display:block;
  margin:.4rem auto 0;
  height:3px;
  width:65%;
  background:rgba(255,255,255,0.13);
  border-radius:2px;
  box-shadow:0 6px 0 -1px rgba(255,255,255,0.08), 0 12px 0 -2px rgba(255,255,255,0.05);
}

.journey-preview--build{
  display:flex;
  flex-direction:column;
  padding:.55rem .85rem;
}
.journey-build-row{
  display:flex;
  align-items:baseline;
  gap:.7rem;
  padding:.32rem 0;
  border-bottom:1px dashed rgba(255,255,255,0.07);
}
.journey-build-row:last-child{border-bottom:none;}
.journey-build-week{
  flex-shrink:0;
  font-size:.58rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:700;
  min-width:52px;
}
.journey-build-task{
  font-size:.74rem;
  color:var(--text);
}

.journey-preview--ministats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:.4rem;
  padding:.55rem .65rem;
}
.journey-ministat{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:.4rem .15rem .42rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:5px;
}
.journey-ministat-num{
  font-size:.95rem;
  font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  line-height:1.1;
}
.journey-ministat-label{
  font-size:.54rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-top:.18rem;
  font-weight:700;
}

.journey-preview--changelog{
  display:flex;
  flex-direction:column;
  gap:.18rem;
  padding:.55rem .8rem;
}
.journey-change{
  margin:0;
  font-size:.7rem;
  color:rgba(220,232,224,0.82);
  line-height:1.45;
  padding:.18rem 0;
  display:flex;
  align-items:baseline;
  gap:.5rem;
}
.journey-change::before{
  flex-shrink:0;
  display:inline-block;
  width:.9rem;
  text-align:center;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.journey-change--add::before{
  content:'+';
  color:var(--accent);
}
.journey-change--tweak::before{
  content:'\007e';
  color:rgba(245,183,88,0.85);
}
/* Block-level break inside a heading: respects natural wrap on narrow
   viewports without a hard <br/>. Use <span class="h-break"></span>. */
.section-h .h-break{display:block;}
.text-center{text-align:center;}
.page-section{
  padding:3.5rem 1.5rem;
  position:relative;z-index:1;
}
.page-section--narrow{
  width:min(820px,92vw);
  margin:0 auto;
}
.page-section--wide{
  width:min(1200px,92vw);
  margin:0 auto;
}
@media(max-width:880px){
  body.page-internal{padding-top:3.8rem;}
  .page-hero{padding:3rem 1.25rem 2rem;}
  .page-section{padding:3rem 1.25rem;}
}

/* ════════════════════════════════════════════════════════════
   ATMOSPHERIC BODY OVERLAY (replaces old mesh)
   ════════════════════════════════════════════════════════════ */
/* On pages with the waves layer, drop the solid backgrounds from the
   block sections so the river is visible all the way down. The cards
   inside (.glass.about, .leadmagnet-card, .ba-col, .audit-stage)
   keep their own surface treatments and pop against the moving water. */
.has-waves .audit,
.has-waves .who,
.has-waves .approach,
.has-waves .beforeafter,
.has-waves .final-cta{
  background:transparent;
}

/* Ambient radial overlay. Suppressed on pages that have the waves
   running underneath (the waves provide their own atmosphere). */
body:not(.has-waves)::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 75% 35% at 50% 0%, rgba(61,177,145,0.045), transparent 65%),
    radial-gradient(ellipse 120% 50% at 50% 110%, rgba(15,35,25,0.4), transparent 70%);
}

/* ════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════ */
.page{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  padding:5rem 1.5rem 3rem;
}
.wrap{width:min(720px,90vw);text-align:center}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:#0a1410;
}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:-2;
  pointer-events:none;
  transition:opacity 1.2s ease;
}
.hero-video--night{opacity:0;}
.hero.is-night .hero-video--day{opacity:0;}
.hero.is-night .hero-video--night{opacity:1;}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(5,9,7,.35) 0%,
      rgba(5,9,7,.45) 55%,
      rgba(5,9,7,.85) 88%,
      var(--wave-color) 100%);
}
.hero-content{
  position:relative;z-index:1;
  width:min(820px,92vw);text-align:center;
  padding:6rem 1.5rem 7rem;
}
.logo{
  width:min(480px,80vw);margin:0 auto 1.8rem;display:block;
  opacity:0;animation:fadeUp .9s .15s cubic-bezier(0,.55,.45,1) forwards;
}
.hero-h{
  font-size:clamp(2.6rem,6.2vw,4.8rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;
  color:var(--text);margin:0 0 1.1rem;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
  opacity:0;animation:fadeUp .9s .3s cubic-bezier(0,.55,.45,1) forwards;
}
.hero-h em{
  font-style:normal;color:var(--accent);font-weight:800;
}
.hero-sub{
  color:rgba(230,238,232,.88);
  font-size:clamp(1.02rem,1.35vw,1.18rem);
  max-width:54ch;margin:0 auto 2.4rem;
  line-height:1.6;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
  opacity:0;animation:fadeUp .9s .45s cubic-bezier(0,.55,.45,1) forwards;
}
.hero-cta{
  display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp .9s .6s cubic-bezier(0,.55,.45,1) forwards;
}
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.9rem 1.7rem;border-radius:999px;
  font-weight:600;font-size:.98rem;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), background .25s, border-color .25s, box-shadow .25s;
}
.btn-primary{
  background:var(--accent);color:#08130d;
  box-shadow:0 10px 30px -8px rgba(61,177,145,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{transform:translateY(-2px);background:#52CFAE;box-shadow:0 14px 36px -8px rgba(61,177,145,.65), inset 0 1px 0 rgba(255,255,255,.4)}
.btn-ghost{
  color:var(--text);
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.08)}
.hero-toggle{
  position:absolute;
  bottom:2rem;
  right:2rem;
  z-index:10;
  width:42px;height:42px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.9);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
  padding:0;
}
.hero-toggle:hover{
  background:rgba(0,0,0,0.5);
  border-color:rgba(61,177,145,0.4);
  transform:scale(1.05);
}
.hero-toggle-icon{
  width:18px;height:18px;
  position:absolute;
  transition:opacity .4s ease, transform .4s ease;
}
.hero-toggle-sun{opacity:0;transform:rotate(-90deg) scale(.5);}
.hero-toggle-moon{opacity:1;transform:rotate(0) scale(1);}
.hero.is-night .hero-toggle-sun{opacity:1;transform:rotate(0) scale(1);}
.hero.is-night .hero-toggle-moon{opacity:0;transform:rotate(90deg) scale(.5);}

.hero-scroll{
  position:absolute;bottom:1.8rem;left:50%;
  width:34px;height:34px;
  color:rgba(230,238,232,.55);
  text-decoration:none;
  animation:bob 2.6s ease-in-out infinite;
  transition:color .25s;
}
.hero-scroll:hover{color:var(--accent)}
.hero-scroll svg{width:100%;height:100%;display:block}

/* ════════════════════════════════════════════════════════════
   LIQUID GLASS CARD
   ════════════════════════════════════════════════════════════ */
/* Forest-tone panel (replaces old liquid-glass treatment) */
.glass{
  position:relative;
  background:linear-gradient(165deg, rgba(13,22,17,0.85) 0%, rgba(8,15,11,0.92) 100%);
  border:1px solid rgba(61,177,145,0.14);
  border-radius:20px;
  padding:2.5rem 2rem;
  text-align:left;
  overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 24px 60px -22px rgba(0,0,0,0.55);
}
.glass::before{
  content:'';
  position:absolute;
  top:0;left:2.5rem;
  width:48px;height:1.5px;
  background:linear-gradient(90deg, var(--accent), transparent);
  border-radius:2px;
}

/* ════════════════════════════════════════════════════════════
   SERVICES SECTION (homepage)
   3-card grid lives below as .svc-primary-grid; this is just the
   wrapper.
   ════════════════════════════════════════════════════════════ */
.services-section{
  position:relative;z-index:1;
  padding:5rem 1.5rem 4rem;
}

/* About card — same glass treatment, prose layout */
.about{
  margin-top:1.5rem;
  opacity:0;animation:fadeUp .8s .8s cubic-bezier(0,.55,.45,1) forwards;
}
.about h2{margin-bottom:1.25rem}
.about-body{position:relative;z-index:3}
.about-body p{
  color:var(--dim);font-size:.96rem;line-height:1.65;
  margin-bottom:.9rem;
}
.about-body p:last-child{margin-bottom:0}
.about-body strong{color:var(--text);font-weight:600}

/* ════════════════════════════════════════════════════════════
   CONTACT BAR
   ════════════════════════════════════════════════════════════ */
.contact{
  margin-top:2.5rem;
  display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;
  opacity:0;animation:fadeUp .8s .85s cubic-bezier(0,.55,.45,1) forwards;
}
.contact a{
  display:flex;align-items:center;gap:.5rem;
  color:var(--dim);text-decoration:none;font-size:.95rem;
  transition:color .25s;
}
.contact a:hover{color:var(--accent)}
.contact svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */
.foot{
  margin-top:2.5rem;color:var(--dim);font-size:.82rem;
  opacity:0;animation:fadeUp .8s 1s cubic-bezier(0,.55,.45,1) forwards;
}

/* ════════════════════════════════════════════════════════════
   SECTION HEADERS (Problem, Services, etc.)
   Headers stand out with a glowing teal accent rule above the
   eyebrow + a soft halo text-shadow behind the H2. No hard band.
   ════════════════════════════════════════════════════════════ */
.section-head{
  text-align:center;
  margin:0 auto 2.4rem;
  max-width:720px;
}
.section-h{
  text-shadow:
    0 0 26px rgba(0,0,0,0.55),
    0 0 52px rgba(0,0,0,0.32),
    0 2px 6px rgba(0,0,0,0.6);
}
.eyebrow{
  position:relative;
  text-shadow:0 1px 8px rgba(0,0,0,0.55);
}
.eyebrow::before{
  content:'';
  display:block;
  width:46px;
  height:1.5px;
  margin:0 auto 1rem;
  background:var(--accent);
  border-radius:2px;
  box-shadow:0 0 14px rgba(61,177,145,0.55), 0 0 32px rgba(61,177,145,0.28);
}
.section-head--left .eyebrow::before{margin-left:0;}
/* page-hero keeps its own scrim — eyebrow rule + text halo apply naturally */
.eyebrow{
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  color:var(--accent);
  margin-bottom:1rem;
}
.section-h{
  font-size:clamp(1.8rem,3.6vw,2.8rem);
  font-weight:700;letter-spacing:-.02em;line-height:1.18;
  color:var(--text);
}
.section-h em{
  font-style:normal;color:var(--accent);font-weight:700;
}

/* ════════════════════════════════════════════════════════════
   PROBLEM SECTION
   ════════════════════════════════════════════════════════════ */
.problem{
  position:relative;z-index:1;
  padding:3rem 1.5rem 3rem;
  /* Fully transparent so the live waves are visible all the way through.
     Continues seamlessly into the services / about / leadmagnet sections
     below, all of which now also sit on the river. */
  background:transparent;
}
.wrap-narrow{
  width:min(1040px,92vw);
  margin:0 auto;
}
.lede{
  text-align:center;
  font-size:1.08rem;color:var(--dim);
  max-width:62ch;margin:0 auto 3rem;
  line-height:1.65;
}
.problem-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  margin-bottom:3rem;
}
.problem-card{
  position:relative;
  background:linear-gradient(165deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.012) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:1.9rem 1.6rem;
  overflow:hidden;
  transition:border-color .4s ease, transform .4s ease, background .4s ease, box-shadow .4s ease;
}
.problem-card::before{
  content:'';
  position:absolute;
  top:0;left:1.6rem;
  width:32px;height:1.5px;
  background:var(--accent);
  border-radius:2px;
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.problem-card::after{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(61,177,145,.06), transparent 50%);
  opacity:0;
  transition:opacity .45s ease;
  pointer-events:none;
}
.problem-card:hover{
  border-color:rgba(61,177,145,.3);
  transform:translateY(-3px);
  background:linear-gradient(165deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.018) 100%);
  box-shadow:0 14px 40px -12px rgba(0,0,0,.4);
}
.problem-card:hover::before{width:64px;}
.problem-card:hover::after{opacity:1;}
.problem-card > *{position:relative;z-index:1;}
.problem-card h3{
  font-size:1.08rem;font-weight:700;
  color:var(--text);margin-bottom:.7rem;
}
.problem-card p{
  color:var(--dim);font-size:.94rem;line-height:1.6;
}
.problem-bottom{
  text-align:center;
  font-size:1.05rem;color:var(--text);
  max-width:64ch;margin:0 auto;
  line-height:1.65;
}
.problem-bottom em{
  font-style:normal;color:var(--accent);font-weight:600;
}

/* ════════════════════════════════════════════════════════════
   WORKFLOW AUDIT (pinned scroll)
   ════════════════════════════════════════════════════════════ */
.audit{
  position:relative;z-index:1;
  background:linear-gradient(180deg, var(--bg) 0%, #08110d 100%);
  border-top:1px solid rgba(255,255,255,.04);
  /* Tall enough to give the sticky child 2400px of scroll progress */
  min-height:calc(100vh + 2400px);
}
.audit-pin{
  position:sticky;top:0;
  height:100vh;
  display:flex;align-items:center;
  padding:5rem 1.5rem;
}
.audit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5rem;
  align-items:center;
  width:min(1200px,92vw);
  margin:0 auto;
}
.audit-text .section-head{
  text-align:left;
  margin:0 0 1.4rem;
  max-width:none;
}
.audit-lede{
  color:var(--dim);
  font-size:1rem;
  line-height:1.65;
  margin-bottom:2.2rem;
}
.audit-steps{
  list-style:none;
  margin-bottom:2.2rem;
  padding:0;
}
.audit-step{
  display:flex;gap:1.4rem;
  padding:1.1rem 0;
  border-bottom:1px solid rgba(255,255,255,.06);
  opacity:.35;
  transition:opacity .5s ease;
}
.audit-step:last-child{border-bottom:none}
.audit-step.active{opacity:1}
.audit-num{
  flex-shrink:0;
  font-size:1.3rem;font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  width:2.4rem;letter-spacing:-.02em;
}
.audit-step h3{
  font-size:1.12rem;font-weight:700;
  color:var(--text);margin-bottom:.3rem;
}
.audit-step p{
  font-size:.94rem;color:var(--dim);line-height:1.55;
}

/* Right-side visual: a designed flow diagram with icons + topographic background */
.audit-visual{
  position:relative;
  aspect-ratio:1/1;
  width:100%;
  max-height:520px;
  border-radius:24px;
  background:linear-gradient(165deg, rgba(13,22,17,0.78) 0%, rgba(8,15,11,0.88) 100%);
  border:1px solid rgba(61,177,145,0.18);
  overflow:hidden;
}
/* Atmospheric topographic contour lines as background, evokes a cartographer's map */
.flow-bg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:0;
}
.audit-stage{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:2rem;
  opacity:0;
  z-index:1;
  transition:opacity .5s ease;
}
.audit-stage.active{opacity:1}

.flow-list{
  list-style:none;
  margin:0 0 1.6rem;
  padding:0;
  position:relative;
  width:100%;
  max-width:280px;
}
/* Connecting line that runs through the centre of the icon markers */
.flow-list::before{
  content:'';
  position:absolute;
  left:16px;
  top:1.6rem;
  bottom:1.6rem;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(61,177,145,0.22) 12%, rgba(61,177,145,0.22) 88%, transparent 100%);
}
.flow-item{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.45rem 0;
  position:relative;
}
.flow-dot{
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(8,15,11,0.95);
  border:1.5px solid rgba(61,177,145,0.45);
  flex-shrink:0;
  position:relative;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  transition:all .35s ease;
}
.flow-icon{
  width:16px;height:16px;
  color:rgba(61,177,145,0.85);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:color .35s ease;
}
.flow-text{
  display:flex;
  flex-direction:column;
  gap:.08rem;
  min-width:0;
}
.flow-label{
  font-size:.9rem;
  color:var(--text);
  font-weight:500;
  letter-spacing:-.005em;
}
.flow-sub{
  font-size:.7rem;
  color:rgba(220,232,224,0.55);
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.3;
}
.flow-item--warn .flow-sub{ color:rgba(245,213,158,0.72); }
.flow-item--auto .flow-sub{ color:rgba(220,232,224,0.78); }
.flow-item--warn .flow-dot{
  background:rgba(255,180,80,0.12);
  border-color:rgba(255,180,80,0.7);
  box-shadow:0 0 12px rgba(255,180,80,0.3);
}
.flow-item--warn .flow-icon{color:#f5b758;}
.flow-item--warn .flow-label{color:#f5d59e;}
.flow-item--auto .flow-dot{
  background:rgba(61,177,145,0.18);
  border-color:var(--accent);
  border-width:1.8px;
  box-shadow:0 0 24px rgba(61,177,145,0.5);
}
.flow-item--auto .flow-icon{
  color:var(--accent);
}
.flow-item--auto .flow-label{
  color:var(--text);
  font-weight:600;
}
.flow-item--pulse .flow-dot::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1.5px solid var(--accent);
  animation:flow-pulse 1.8s ease-in-out infinite;
}
@keyframes flow-pulse{
  0%,100%{transform:scale(1);opacity:0.55;}
  50%{transform:scale(1.9);opacity:0;}
}
.flow-caption{
  color:var(--dim);
  font-size:.86rem;
  text-align:center;
  font-style:italic;
  max-width:36ch;
}

/* ════════════════════════════════════════════════════════════
   WHO THIS IS FOR
   ════════════════════════════════════════════════════════════ */
.who{
  position:relative;z-index:1;
  padding:5rem 1.5rem 3rem;
  background:linear-gradient(180deg, var(--bg) 0%, #08110d 100%);
}
.who .lede{margin-bottom:2.4rem}
.who-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  width:min(960px,92vw);
  margin:0 auto;
}
.who-col{
  background:rgba(13,22,17,0.72);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  padding:1.8rem 1.6rem;
}
.who-col--good{border-color:rgba(61,177,145,.22)}
.who-col h3{
  font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1.1rem;
}
.who-col--good h3{color:var(--accent)}
.who-col--bad h3{color:#d99088}
.who-list{
  list-style:none;
  display:flex;flex-direction:column;
  gap:.75rem;
  padding:0;
}
.who-list li{
  display:flex;align-items:flex-start;gap:.65rem;
  font-size:.94rem;
  color:var(--text);
  line-height:1.5;
}
.who-icon{
  flex-shrink:0;
  width:18px;height:18px;
  margin-top:2px;
  stroke-width:2;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;
}
.who-col--good .who-icon{color:var(--accent)}
.who-col--bad .who-icon{color:rgba(220,140,130,.75)}

/* ════════════════════════════════════════════════════════════
   THE RIVERWOOD APPROACH
   ════════════════════════════════════════════════════════════ */
.approach{
  position:relative;z-index:1;
  padding:5rem 1.5rem 4rem;
  background:linear-gradient(180deg, var(--bg) 0%, #08110d 100%);
}
.approach-body{
  max-width:680px;
  margin:0 auto;
  text-align:center;
}
.approach-body p{
  color:var(--dim);
  font-size:1.04rem;
  line-height:1.7;
  margin-bottom:1.4rem;
}
.approach-pillars{
  display:flex;flex-direction:column;
  gap:.6rem;
  margin:2.2rem auto;
  max-width:480px;
  text-align:left;
}
.approach-pillars p{
  margin:0;
  padding:.75rem 1.2rem;
  border-left:2px solid var(--accent);
  background:rgba(61,177,145,.04);
  color:var(--text);
  font-size:.98rem;
  font-weight:500;
  line-height:1.45;
}
.approach-close{
  margin-top:2rem !important;
  color:var(--text) !important;
  font-size:1.1rem !important;
  font-weight:600;
}

/* ════════════════════════════════════════════════════════════
   STICKY NAV (appears after hero)
   ════════════════════════════════════════════════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:50;
  padding:.85rem 1.5rem;
  /* Subtle glass backdrop in the unscrolled state so the nav reads
     against any background (over the hero video AND over the river).
     Stronger / more solid backdrop kicks in once scrolled. */
  background:rgba(5,9,7,0.42);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  transition:background .4s ease, border-color .4s ease, padding .3s ease;
}
.nav.scrolled{
  background:rgba(5,9,7,0.92);
  border-bottom-color:rgba(61,177,145,0.14);
  padding:.7rem 1.5rem;
}
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  width:min(1200px,92vw);
  margin:0 auto;
  gap:1.5rem;
}
.nav-logo{display:block;flex-shrink:0;line-height:0;}
.nav-logo img{height:30px;width:auto;display:block;}
.nav-links{
  list-style:none;
  display:flex;align-items:center;
  gap:1.5rem;
  margin:0;padding:0;
}
.nav-links a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-size:.92rem;
  font-weight:500;
  transition:color .25s, text-shadow .25s;
}
.nav:not(.scrolled) .nav-links a{
  text-shadow:0 1px 8px rgba(0,0,0,0.55);
}
.nav-links a:hover{color:#fff;}
.nav-cta{
  background:var(--accent);
  color:#08130d !important;
  padding:.55rem 1.1rem;
  border-radius:999px;
  font-weight:600 !important;
  font-size:.88rem !important;
  transition:background .25s, transform .25s;
}
.nav-cta:hover{
  background:#52CFAE;
  color:#08130d !important;
  transform:translateY(-1px);
}
/* Mobile hamburger button (hidden on desktop, revealed at the tablet breakpoint) */
.nav-hamburger{
  display:none;
  background:transparent;border:0;padding:0;cursor:pointer;
  width:36px;height:36px;
  flex-direction:column;justify-content:center;align-items:center;
  gap:5px;
}
.nav-hamburger span{
  display:block;width:22px;height:2px;
  background:rgba(255,255,255,0.92);border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .25s;
}
.nav.nav-open .nav-hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.nav-open .nav-hamburger span:nth-child(2){opacity:0;}
.nav.nav-open .nav-hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ════════════════════════════════════════════════════════════
   LEAD MAGNET (Workflow Review)
   ════════════════════════════════════════════════════════════ */
.leadmagnet{
  position:relative;z-index:1;
  padding:6rem 1.5rem 4rem;
  /* Transparent so the river continues underneath. The .leadmagnet-card
     inside has its own glass treatment and stays readable over the waves. */
  background:transparent;
}
.leadmagnet-inner{
  width:min(820px,92vw);
  margin:0 auto;
}
.leadmagnet-lede{
  text-align:center;
  font-size:1.05rem;
  color:var(--dim);
  line-height:1.7;
  margin:0 auto 2.5rem;
  max-width:60ch;
}
.leadmagnet-card{
  background:rgba(13,22,17,0.74);
  border:1px solid rgba(61,177,145,.32);
  border-radius:24px;
  padding:2.5rem 2rem;
  position:relative;
  overflow:hidden;
}
.leadmagnet-card::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(61,177,145,.12), transparent 70%);
  pointer-events:none;z-index:0;
}
.leadmagnet-card > *{position:relative;z-index:1;}
.leadmagnet-leave{
  font-size:.78rem;font-weight:700;
  color:var(--accent);
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:1.3rem;
  text-align:center;
}
.leadmagnet-list{
  list-style:none;
  display:flex;flex-direction:column;
  gap:.85rem;
  margin:0 auto 2.2rem;
  max-width:520px;
  padding:0;
}
.leadmagnet-list li{
  display:flex;align-items:flex-start;gap:.8rem;
  font-size:.98rem;
  color:var(--text);
  line-height:1.5;
}
.lm-icon{
  flex-shrink:0;width:20px;height:20px;
  margin-top:1px;
  stroke:var(--accent);fill:none;
  stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.leadmagnet-cta{text-align:center;}
.btn-large{padding:1rem 2rem;font-size:1rem;}
.leadmagnet-meta{
  margin-top:1.1rem;
  font-size:.86rem;
  color:var(--dim);
  font-style:italic;
}

/* ════════════════════════════════════════════════════════════
   ABOUT SECTION (refresh wrapper)
   ════════════════════════════════════════════════════════════ */
.about-section{
  position:relative;z-index:1;
  padding:5rem 1.5rem 3rem;
  /* Transparent so the river continues underneath. The .glass.about
     card inside has its own backdrop and stays readable over the waves. */
  background:transparent;
}
.about-section .wrap{margin:0 auto;}
.about{margin-top:0;animation:none;opacity:1;}

/* ════════════════════════════════════════════════════════════
   FINAL CTA
   ════════════════════════════════════════════════════════════ */
.final-cta{
  position:relative;z-index:1;
  padding:5rem 1.5rem 4rem;
  text-align:center;
  background:linear-gradient(180deg, var(--bg) 0%, #0a1814 100%);
}
.final-cta-inner{
  max-width:680px;
  margin:0 auto;
}
.final-cta .section-h{
  margin-bottom:1.4rem;
}
.final-cta-sub{
  font-size:1.08rem;
  color:var(--dim);
  margin:0 auto 2.4rem;
  line-height:1.6;
  max-width:54ch;
}
.final-cta-buttons{
  display:flex;
  gap:.9rem;
  justify-content:center;
  flex-wrap:wrap;
}

/* ════════════════════════════════════════════════════════════
   SITE FOOTER (3-column: what I do / RiverWood / get in touch)
   ════════════════════════════════════════════════════════════ */
.site-foot{
  position:relative;z-index:1;
  padding:3.5rem 1.5rem 1.5rem;
  border-top:1px solid rgba(255,255,255,.05);
}
.site-foot-inner{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  width:min(1100px, 92vw);
  margin:0 auto 2.5rem;
}
.site-foot-col h4{
  font-size:.78rem;font-weight:700;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.site-foot-col ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:.55rem;
}
.site-foot-col a{
  color:var(--dim);
  text-decoration:none;
  font-size:.94rem;
  transition:color .25s ease;
}
.site-foot-col a:hover{color:var(--accent);}
.site-foot-col p{
  color:var(--dim);
  font-size:.94rem;
  line-height:1.6;
  margin:0 0 .35rem;
}
.site-foot-col p:last-child{margin-bottom:0;}
.site-foot-bottom{
  text-align:center;
  font-size:.82rem;
  color:var(--dim);
  margin:0;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.04);
}
@media(max-width:880px){
  .site-foot{padding:3rem 1.25rem 1.25rem;}
  .site-foot-inner{
    grid-template-columns:1fr 1fr;
    gap:2rem;
    margin-bottom:2rem;
  }
}
@media(max-width:520px){
  .site-foot-inner{
    grid-template-columns:1fr;
    gap:1.6rem;
  }
}

/* ════════════════════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════════════════════ */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(25px)}
  to{opacity:1;transform:none}
}
@keyframes bob{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-50%,8px)}
}

@media (prefers-reduced-motion: reduce){
  .hero-video{display:none}
  .hero{background:linear-gradient(180deg,#0a1f17 0%,var(--bg) 100%)}
  .hero-scroll{animation:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media(max-width:880px){
  .problem-grid{grid-template-columns:1fr;gap:1rem;}
  .problem{padding:2.5rem 1.25rem 2rem;}
  .pullquote{padding:3.5rem 1.25rem;}
  .audit{min-height:auto;}
  .audit-grid{grid-template-columns:1fr;gap:2rem}
  .audit-pin{position:static;height:auto;min-height:auto;padding:3.5rem 1.25rem 4.5rem}
  .audit-step{opacity:1}
  /* Audit visual on mobile: show only Stage 1 (the messy "before") and Stage 3 (the clean "after").
     Stages 2 and 4 are nuances of those — hiding them halves the scroll and keeps the before/after story clear. */
  .audit-visual{
    aspect-ratio:auto;max-height:none;min-height:auto;
    display:flex;flex-direction:column;gap:1.4rem;
    padding:1.5rem 1rem;
  }
  .audit-stage{
    position:relative;inset:auto;
    display:flex;opacity:1;
    padding:1.4rem 0;
    border-top:1px solid rgba(61,177,145,0.12);
  }
  .audit-stage[data-stage="2"],
  .audit-stage[data-stage="4"]{display:none;}
  .audit-stage:first-of-type{border-top:none;padding-top:.4rem;}
  /* Hide the topographic background lines on mobile — too busy when stages stack */
  .flow-bg{display:none;}
  .examples-grid{grid-template-columns:1fr;}
  .examples{padding:4rem 1.25rem 2rem}
  .who-grid{grid-template-columns:1fr;gap:1rem;}
  .who{padding:4rem 1.25rem 2rem}
  .approach{padding:4rem 1.25rem 3rem}
  .leadmagnet{padding:4.5rem 1.25rem 3rem}
  .leadmagnet-card{padding:2rem 1.4rem}
  .about-section{padding:4rem 1.25rem 2rem}
  .final-cta{padding:4rem 1.25rem 3rem}
  /* Mobile nav: links collapse into a hamburger-driven dropdown panel */
  .nav-hamburger{display:flex;}
  .nav-inner{position:relative;}
  .nav-links{
    position:absolute;top:calc(100% + .85rem);left:-1.5rem;right:-1.5rem;
    flex-direction:column;align-items:stretch;
    background:rgba(5,9,7,0.97);
    border-bottom:1px solid rgba(61,177,145,0.14);
    padding:1.2rem 1.5rem 1.4rem;
    gap:.2rem;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .3s ease;
  }
  .nav.nav-open .nav-links{
    transform:translateY(0);opacity:1;pointer-events:auto;
  }
  .nav-links a:not(.nav-cta){
    display:block;
    padding:.75rem 0;
    font-size:1rem;
    color:rgba(255,255,255,0.92);
    border-bottom:1px solid rgba(255,255,255,0.06);
  }
  .nav-links li:last-child{margin-top:.7rem;}
  .nav-cta{align-self:flex-start;}
  .nav-logo img{height:26px;}
  .services-section{padding:4rem 1.25rem 3rem;}
}
@media(max-width:520px){
  .glass{padding:1.8rem 1.3rem}
  .contact{gap:1.2rem;flex-direction:column;align-items:center}
  .hero-toggle{bottom:1.2rem;right:1.2rem;width:36px;height:36px;}
  .hero-toggle-icon{width:16px;height:16px;}
  .section-head{margin-bottom:1.8rem}
  .lede{font-size:1rem;margin-bottom:2rem}
  .problem-card{padding:1.4rem 1.3rem}
  /* Approach pillars: keep on mobile (they ARE the punchline of the section).
     Tighten layout instead of hiding. */
  .leadmagnet{padding:3.5rem 1.25rem 2.5rem}
  .leadmagnet-card{padding:1.6rem 1.2rem}
  .leadmagnet-list li{font-size:.94rem}
  .approach-pillars{margin:1.6rem auto;max-width:none}
  .approach-pillars p{font-size:.92rem;padding:.65rem 1rem;}
  .approach-close{font-size:1rem !important}
  .who-col{padding:1.4rem 1.3rem}
  .audit-text .section-head{margin-bottom:1rem}
  .audit-lede{font-size:.96rem;margin-bottom:1.6rem}
  .audit-step{padding:.85rem 0;gap:1rem}
  .audit-step h3{font-size:1.05rem}
  .audit-num{width:2rem;font-size:1.15rem}
  .flow-list{max-width:none}
  .hero-h{letter-spacing:-.025em}
  .hero-cta .btn{padding:.85rem 1.4rem;font-size:.95rem}
  .final-cta-buttons{flex-direction:column;align-items:stretch;}
  .final-cta-buttons .btn{justify-content:center;}
  .nav-cta{padding:.5rem .9rem;font-size:.82rem !important}
  .site-foot p{font-size:.78rem;line-height:1.5}
  .site-foot-sep{display:block;height:.4rem;visibility:hidden}
}

/* ════════════════════════════════════════════════════════════
   PRIMARY SERVICE CARDS (3-up on homepage)
   Replaces the previous 6-card svc grid. Each card links to a
   dedicated service page.
   ════════════════════════════════════════════════════════════ */
.svc-primary-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.6rem;
  width:min(1100px,92vw);
  margin:0 auto;
  list-style:none;
  padding:0;
}
.svc-primary{
  position:relative;
  display:flex;flex-direction:column;
  padding:2.4rem 2rem 2rem;
  background:linear-gradient(165deg, rgba(13,22,17,0.72) 0%, rgba(8,15,11,0.85) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  overflow:hidden;
  transition:border-color .4s ease, transform .4s ease, background .4s ease, box-shadow .4s ease;
}
.svc-primary::before{
  content:'';
  position:absolute;
  top:0;left:2rem;
  width:48px;height:1.5px;
  background:var(--accent);
  border-radius:2px;
  transition:width .45s cubic-bezier(.2,.7,.3,1);
}
.svc-primary:hover{
  border-color:rgba(93,219,140,0.34);
  background:linear-gradient(165deg, rgba(20,35,28,0.78) 0%, rgba(13,22,17,0.92) 100%);
  transform:translateY(-3px);
  box-shadow:0 18px 50px -14px rgba(0,0,0,.5);
}
.svc-primary:hover::before{width:84px;}
.svc-primary-head{
  display:flex;align-items:center;gap:.85rem;
  margin-bottom:.85rem;
}
.svc-primary-icon{
  width:34px;height:34px;
  color:var(--accent);
  flex-shrink:0;
  stroke-width:1.7;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.svc-primary h3{
  font-size:1.25rem;font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-.01em;
}
.svc-primary-desc{
  font-size:.95rem;
  color:var(--dim);
  line-height:1.6;
  margin:0 0 1.6rem;
  /* Reserve space for up to 4 wrapped lines so the figure starts at
     the same vertical position across all 4 cards (desktop grid). */
  min-height:6.1rem;
}
.svc-primary-flow{
  list-style:none;padding:0;margin:0 0 2rem;
  position:relative;
}
.svc-primary-flow::before{
  content:'';
  position:absolute;
  left:5.5px;
  top:.7rem;bottom:.7rem;
  width:1px;
  background:linear-gradient(180deg, transparent 0%, rgba(93,219,140,0.22) 14%, rgba(93,219,140,0.22) 86%, transparent 100%);
}
.svc-primary-flow li{
  display:flex;align-items:center;gap:.7rem;
  padding:.4rem 0;
  font-size:.88rem;
  color:var(--text);
  position:relative;
}
.svc-primary-flow li::before{
  content:'';
  width:11px;height:11px;
  border-radius:50%;
  background:rgba(8,15,11,0.95);
  border:1.5px solid rgba(93,219,140,0.5);
  flex-shrink:0;
  position:relative;
  z-index:1;
}
.svc-primary-flow li:last-child{
  font-weight:600;
}
.svc-primary-flow li:last-child::before{
  background:rgba(93,219,140,0.25);
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(93,219,140,0.3);
}
.svc-primary-figure{
  margin:0 0 1.6rem;
}
.svc-primary-figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
}
@keyframes svc-cta-pulse{
  0%, 100%{
    color:var(--accent);
    text-shadow:0 0 0 rgba(61,177,145,0);
  }
  50%{
    color:#7ce5a7;
    text-shadow:0 0 8px rgba(124,229,167,0.9), 0 0 22px rgba(124,229,167,0.55);
  }
}
.svc-primary-cta{
  margin-top:auto;
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.6rem 0;
  font-size:.92rem;font-weight:600;
  color:var(--accent);
  text-decoration:none;
  transition:gap .25s ease, color .25s ease;
  animation:svc-cta-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .svc-primary-cta{ animation:none; }
}
.svc-primary-cta:hover{
  gap:.7rem;
  color:#7ce5a7;
}
.svc-primary-cta-arrow{
  font-size:1rem;line-height:1;
}

@media(max-width:880px){
  .svc-primary-grid{grid-template-columns:1fr;gap:1.1rem;}
}
@media(max-width:520px){
  .svc-primary{padding:1.8rem 1.5rem 1.6rem;}
  .svc-primary::before{left:1.5rem}
}

/* ════════════════════════════════════════════════════════════
   PHASE 2B: BEFORE / AFTER section
   Visualises the value prop: chaotic admin → clean automated flow.
   Two columns side-by-side with distinct palettes:
   - Before: muted, slightly dimmer, amber accent (chaos)
   - After: bright, sage accent (calm)
   ════════════════════════════════════════════════════════════ */
.beforeafter{
  position:relative;z-index:1;
  padding:5rem 1.5rem 4rem;
  background:linear-gradient(180deg, var(--bg) 0%, #08110d 100%);
}
.ba-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.6rem;
  width:min(1100px,92vw);
  margin:2rem auto 0;
}
.ba-col{
  position:relative;
  display:flex;flex-direction:column;
  padding:2.2rem 1.9rem;
  background:linear-gradient(165deg, rgba(13,22,17,0.72) 0%, rgba(8,15,11,0.85) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px;
  overflow:hidden;
}
.ba-col--after{
  border-color:rgba(93,219,140,0.32);
  background:linear-gradient(165deg, rgba(20,55,40,0.74) 0%, rgba(8,30,18,0.88) 100%);
}
.ba-col--before{
  border-color:rgba(255,180,80,0.18);
}
.ba-tag{
  display:inline-flex;align-items:center;
  align-self:flex-start;
  font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.18em;
  padding:.32rem .7rem;
  border-radius:999px;
  margin-bottom:.95rem;
}
.ba-tag--before{
  color:#f5b758;
  background:rgba(255,180,80,0.1);
  border:1px solid rgba(255,180,80,0.32);
}
.ba-tag--after{
  color:var(--accent);
  background:rgba(93,219,140,0.1);
  border:1px solid rgba(93,219,140,0.35);
}
.ba-col h3{
  font-size:1.12rem;font-weight:700;
  color:var(--text);
  margin:0 0 1.2rem;
  letter-spacing:-.01em;
}
.ba-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;
  gap:.55rem;
}
.ba-list li{
  display:flex;align-items:flex-start;gap:.7rem;
  font-size:.94rem;
  line-height:1.5;
  padding:.55rem 0;
}
.ba-icon{
  flex-shrink:0;
  width:18px;height:18px;
  margin-top:2px;
  stroke-width:2;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;stroke-linejoin:round;
}
.ba-col--before .ba-list li{color:rgba(230,238,232,0.78);}
.ba-col--before .ba-icon{color:rgba(245,183,88,0.7);}
.ba-col--after .ba-list li{color:var(--text);}
.ba-col--after .ba-icon{color:var(--accent);}

@media(max-width:880px){
  .ba-grid{grid-template-columns:1fr;gap:1.1rem;}
  .beforeafter{padding:4rem 1.25rem 3rem}
}
@media(max-width:520px){
  .ba-col{padding:1.7rem 1.4rem}
}

/* About preview "Read more" link on homepage */
.about-more{
  margin-top:1.6rem !important;
  margin-bottom:0 !important;
}
.about-more-link{
  display:inline-flex;align-items:center;gap:.4rem;
  color:var(--accent);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  transition:gap .25s ease, color .25s ease;
}
.about-more-link:hover{
  gap:.7rem;
  color:#7ce5a7;
}
.about-more-arrow{font-size:1rem;line-height:1;}

/* ════════════════════════════════════════════════════════════
   PHASE 2C: MOCK INTERFACE ELEMENTS (inside example cards)
   Small UI snippets that look like real interface bits, demonstrating
   what each workflow's actual output looks like.
   ════════════════════════════════════════════════════════════ */
.mock{
  margin-top:1.4rem;
  padding:1rem;
  background:rgba(0,0,0,0.28);
  border:1px solid rgba(93,219,140,0.14);
  border-radius:10px;
  font-size:.84rem;
}
.mock-meta-bar{
  display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;
  font-size:.68rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:.75rem;
  padding-bottom:.6rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

/* ════════════════════════════════════════════════════════════
   CHAT MOCK (AI Receptionist "What it looks like")
   Shaped like a real messaging app: header bar with name + status,
   multi-turn exchange, bubbles fade in with stagger when scrolled
   into view (class .mock--chat--play added by main.js).
   ════════════════════════════════════════════════════════════ */
.mock--chat{
  max-width:420px;
  margin:2rem auto 0;
  padding:0;
  background:rgba(0,0,0,0.42);
  border:1px solid rgba(93,219,140,0.18);
  border-radius:16px;
  overflow:hidden;
}
.mock-chat-head{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1rem;
  background:rgba(0,0,0,0.34);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.mock-chat-avatar{
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(93,219,140,0.18);
  border:1px solid rgba(93,219,140,0.34);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--accent);
  font-weight:700;
  font-size:.95rem;
  flex-shrink:0;
}
.mock-chat-id{flex:1;min-width:0;}
.mock-chat-name{
  font-size:.88rem;
  font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-.005em;
}
.mock-chat-status{
  font-size:.7rem;
  color:var(--dim);
  margin:.15rem 0 0;
  display:flex;
  align-items:center;
  gap:.4rem;
}
.mock-chat-status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 6px rgba(61,177,145,0.55);
  flex-shrink:0;
}
.mock-chat-body{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mock-chat-time{
  text-align:center;
  font-size:.65rem;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.1em;
  margin:0 0 .5rem;
}
.mock-bubble{
  padding:.62rem .85rem;
  border-radius:14px;
  font-size:.85rem;
  line-height:1.4;
  max-width:82%;
  word-wrap:break-word;
}
.mock-bubble--in{
  background:rgba(255,255,255,0.055);
  align-self:flex-start;
  border-bottom-left-radius:4px;
  color:rgba(230,238,232,0.95);
}
.mock-bubble--out{
  background:rgba(93,219,140,0.18);
  border:1px solid rgba(93,219,140,0.34);
  align-self:flex-end;
  border-bottom-right-radius:4px;
  color:var(--text);
}

/* Typing indicator: small pill with 3 bouncing dots. Default collapsed
   so it takes no static space; .mock--chat--play kicks off a brief
   reveal-then-collapse cycle so it appears, dots bounce, then folds
   away as the next bubble fades in. */
.mock-typing{
  align-self:flex-start;
  display:inline-flex;
  gap:3px;
  align-items:center;
  padding:0 .85rem;
  background:rgba(255,255,255,0.05);
  border-radius:14px;
  border-bottom-left-radius:4px;
  width:fit-content;
  opacity:0;
  max-height:0;
  overflow:hidden;
}
.mock-typing span{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
}

/* Stagger reveal on scroll into view (driven by .mock--chat--play class
   added by main.js ScrollTrigger). Skipped on reduced-motion. */
@media (prefers-reduced-motion: no-preference){
  .mock--chat .mock-bubble,
  .mock--chat .mock-chat-time{
    opacity:0;
    transform:translateY(6px);
  }
  .mock--chat--play .mock-chat-time,
  .mock--chat--play .mock-bubble{
    animation:chat-bubble-in .45s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .mock--chat--play .mock-typing{
    animation:typing-cycle .9s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .mock--chat--play .mock-typing span{
    animation:chat-typing-dot 1.1s infinite;
  }
  .mock--chat--play .mock-typing span:nth-child(2){animation-delay:.16s;}
  .mock--chat--play .mock-typing span:nth-child(3){animation-delay:.32s;}

  /* Per-child delays: time / customer / typing / auto-reply, repeated.
     10 children total in mock-chat-body. */
  .mock--chat--play .mock-chat-body > *:nth-child(1){animation-delay:0s;}
  .mock--chat--play .mock-chat-body > *:nth-child(2){animation-delay:.4s;}
  .mock--chat--play .mock-chat-body > *:nth-child(3){animation-delay:1.0s;}
  .mock--chat--play .mock-chat-body > *:nth-child(4){animation-delay:1.85s;}
  .mock--chat--play .mock-chat-body > *:nth-child(5){animation-delay:2.5s;}
  .mock--chat--play .mock-chat-body > *:nth-child(6){animation-delay:3.2s;}
  .mock--chat--play .mock-chat-body > *:nth-child(7){animation-delay:4.05s;}
  .mock--chat--play .mock-chat-body > *:nth-child(8){animation-delay:4.9s;}
  .mock--chat--play .mock-chat-body > *:nth-child(9){animation-delay:5.55s;}
  .mock--chat--play .mock-chat-body > *:nth-child(10){animation-delay:6.4s;}
}
@keyframes chat-bubble-in{
  to{opacity:1;transform:translateY(0);}
}
/* Typing indicator: fades in + expands, holds, fades out + collapses. */
@keyframes typing-cycle{
  0%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:0; }
  18%, 78%{ opacity:1; max-height:34px; padding-top:.6rem; padding-bottom:.6rem; }
  100%{ opacity:0; max-height:0; padding-top:0; padding-bottom:0; margin-top:0; }
}
/* Bouncing dots inside the typing indicator. */
@keyframes chat-typing-dot{
  0%, 60%, 100%{ transform:translateY(0); opacity:.45; }
  30%{ transform:translateY(-3px); opacity:1; }
}

/* ════════════════════════════════════════════════════════════
   TRIGGER FANOUT (Admin Automation "Example workflow")
   Demonstrates the "one trigger -> many outputs" pattern: source
   card on the left, 5 output cards on the right joined by a
   branching connector. Source pops in, outputs cascade in with a
   tight stagger so they feel parallel.
   ════════════════════════════════════════════════════════════ */
.trigger-fanout{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:2rem;
  align-items:center;
  max-width:640px;
  margin:2rem auto 0;
  padding:2.2rem 1.8rem;
  background:linear-gradient(165deg, rgba(13,22,17,0.78) 0%, rgba(8,15,11,0.88) 100%);
  border:1px solid rgba(61,177,145,0.18);
  border-radius:18px;
}
.trigger-fanout-source{position:relative;}
.trigger-fanout-eyebrow{
  font-size:.6rem;
  font-weight:700;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:0 0 .55rem;
  text-align:center;
}
.trigger-fanout-source-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  padding:1rem 1.1rem;
  background:rgba(61,177,145,0.14);
  border:1.5px solid rgba(61,177,145,0.55);
  border-radius:12px;
  position:relative;
  min-width:140px;
  box-shadow:0 0 24px rgba(61,177,145,0.18);
}
.trigger-fanout-source-card::after{
  /* horizontal stub from right edge of source */
  content:'';
  position:absolute;
  left:100%;
  top:50%;
  width:2rem;
  height:1.5px;
  background:rgba(61,177,145,0.55);
  transform:translateY(-50%);
}
.trigger-fanout-icon{
  width:26px;height:26px;
  color:var(--accent);
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.trigger-fanout-source-text{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  min-width:0;
}
.trigger-fanout-source-label{
  font-size:.86rem;
  font-weight:700;
  color:var(--text);
  text-align:center;
  letter-spacing:-.005em;
  line-height:1.25;
}
.trigger-fanout-source-detail{
  font-size:.72rem;
  font-weight:400;
  color:rgba(220,232,224,0.6);
  text-align:center;
  letter-spacing:-.002em;
  line-height:1.35;
}
.trigger-fanout-outputs{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  position:relative;
}
.trigger-fanout-outputs::before{
  /* vertical line on left of outputs (the "spine" of the fan) */
  content:'';
  position:absolute;
  left:-1rem;
  top:1.05rem;
  bottom:1.05rem;
  width:1.5px;
  background:rgba(61,177,145,0.55);
}
.trigger-fanout-outputs li{
  position:relative;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem .9rem;
  background:rgba(255,255,255,0.045);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:8px;
  font-size:.85rem;
  color:var(--text);
}
.trigger-fanout-output-text{
  display:flex;
  flex-direction:column;
  gap:.12rem;
  min-width:0;
}
.trigger-fanout-output-label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text);
  letter-spacing:-.003em;
  line-height:1.25;
}
.trigger-fanout-output-detail{
  font-size:.72rem;
  font-weight:400;
  color:rgba(220,232,224,0.6);
  letter-spacing:-.002em;
  line-height:1.35;
}
.trigger-fanout-outputs li::before{
  /* horizontal tick from spine into output */
  content:'';
  position:absolute;
  left:-1rem;
  top:50%;
  width:1rem;
  height:1.5px;
  background:rgba(61,177,145,0.55);
  transform:translateY(-50%);
}
.trigger-fanout-outputs li svg{
  width:16px;height:16px;
  color:var(--accent);
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
@media(max-width:560px){
  .trigger-fanout{
    grid-template-columns:1fr;
    gap:1.2rem;
    padding:1.8rem 1.4rem;
  }
  .trigger-fanout-source-card::after{
    /* stub goes down on mobile */
    left:50%;
    top:100%;
    width:1.5px;
    height:1.1rem;
    transform:translateX(-50%);
  }
  .trigger-fanout-outputs::before{
    top:.5rem;
    bottom:.5rem;
  }
}

/* Animation: source pops, dispatches a ripple ring, then outputs cascade
   in one at a time, each with a brief teal highlight + a connector pulse
   so the "dispatch -> receive" flow reads clearly.
   Driven by .trigger-fanout--play class added by main.js on scroll. */
@media (prefers-reduced-motion: no-preference){
  .trigger-fanout-source-card{
    opacity:0;
    transform:scale(0.92);
  }
  /* Dispatch ripple: a teal ring just outside the source that expands
     and fades, signalling the moment the trigger fires. */
  .trigger-fanout-source-card::before{
    content:'';
    position:absolute;
    inset:-3px;
    border:1.5px solid var(--accent);
    border-radius:14px;
    opacity:0;
    pointer-events:none;
  }
  .trigger-fanout-outputs li{
    opacity:0;
    transform:translateX(-8px);
  }
  .trigger-fanout--play .trigger-fanout-source-card{
    animation:trigger-pop .7s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .trigger-fanout--play .trigger-fanout-source-card::before{
    animation:dispatch-ring .9s ease-out .85s forwards;
  }
  .trigger-fanout--play .trigger-fanout-outputs li{
    animation:trigger-output-in .7s cubic-bezier(.2,.7,.3,1) forwards;
  }
  /* Each output's connector tick pulses brighter as the output arrives */
  .trigger-fanout--play .trigger-fanout-outputs li::before{
    animation:branch-pulse .55s ease-out forwards;
  }
  /* Staggered delays: 250ms apart so each output gets its own moment */
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(1),
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(1)::before{animation-delay:1.4s;}
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(2),
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(2)::before{animation-delay:1.65s;}
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(3),
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(3)::before{animation-delay:1.9s;}
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(4),
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(4)::before{animation-delay:2.15s;}
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(5),
  .trigger-fanout--play .trigger-fanout-outputs li:nth-child(5)::before{animation-delay:2.4s;}
}
@keyframes trigger-pop{
  0%{opacity:0;transform:scale(0.92);}
  60%{opacity:1;transform:scale(1.04);}
  100%{opacity:1;transform:scale(1);}
}
/* Output fades in AND briefly highlights teal at the moment of arrival */
@keyframes trigger-output-in{
  0%{opacity:0;transform:translateX(-8px);background:rgba(255,255,255,0.045);border-color:rgba(255,255,255,0.09);}
  55%{opacity:1;transform:translateX(0);background:rgba(61,177,145,0.18);border-color:rgba(61,177,145,0.55);}
  100%{opacity:1;transform:translateX(0);background:rgba(255,255,255,0.045);border-color:rgba(255,255,255,0.09);}
}
/* Ripple ring expanding outward from source */
@keyframes dispatch-ring{
  0%{opacity:0.85;transform:scale(1);}
  100%{opacity:0;transform:scale(1.18);}
}
/* Connector tick brightens as its output arrives */
@keyframes branch-pulse{
  0%{background:rgba(61,177,145,0.55);}
  40%{background:rgba(61,177,145,1);}
  100%{background:rgba(61,177,145,0.55);}
}

/* ════════════════════════════════════════════════════════════
   SIDE-BY-SIDE MOCK PAIR (chat + owner-side summary)
   Used on AI Receptionist "What it looks like": shows the customer's
   chat alongside what the business owner receives once the chat ends.
   ════════════════════════════════════════════════════════════ */
.mock-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.4rem;
  align-items:start;
  width:min(820px, 92%);
  margin:2rem auto 0;
}
.mock-pair-side{
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-width:0;
}
.mock-pair-label{
  font-size:.66rem;
  font-weight:700;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:0;
  text-align:center;
}
/* Inside the pair, mocks fill their column instead of self-centering */
.mock-pair .mock--chat,
.mock-pair .mock--summary{
  max-width:none;
  margin:0;
  width:100%;
}
@media(max-width:760px){
  .mock-pair{
    grid-template-columns:1fr;
    gap:1.6rem;
  }
}

/* Summary card: what the owner sees in their inbox */
.mock--summary{
  padding:1.15rem 1.25rem 1.3rem;
  background:rgba(0,0,0,0.42);
  border:1px solid rgba(93,219,140,0.18);
  border-radius:16px;
}
.mock-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:.5rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,0.06);
  margin-bottom:.95rem;
}
.mock-summary-from{
  font-size:.68rem;
  font-weight:700;
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.12em;
  margin:0;
}
.mock-summary-time{
  font-size:.66rem;
  color:var(--dim);
  margin:0;
}
.mock-summary-title{
  font-size:.95rem;
  font-weight:700;
  color:var(--text);
  margin:0 0 .85rem;
  letter-spacing:-.005em;
}
.mock-summary-details{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.mock-summary-details li{
  display:grid;
  grid-template-columns:62px 1fr;
  gap:.55rem;
  font-size:.82rem;
  color:var(--text);
  line-height:1.4;
}
.mock-summary-label{
  font-size:.62rem;
  font-weight:700;
  color:var(--dim);
  text-transform:uppercase;
  letter-spacing:.08em;
  padding-top:.2rem;
}
.mock-summary-actions{
  list-style:none;
  padding:.75rem 0 0;
  margin:.95rem 0 .85rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.mock-summary-actions li{
  display:flex;
  align-items:center;
  gap:.55rem;
  font-size:.8rem;
  color:var(--text);
}
.mock-summary-actions svg{
  width:14px;height:14px;
  color:var(--accent);
  fill:none;
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.mock-summary-link{
  font-size:.78rem;
  color:var(--accent);
  margin:0;
  font-weight:600;
}

/* Summary side starts hidden; reveals after the chat conversation
   has played out (~7s). Driven by .mock-pair--play class added by
   main.js when the pair scrolls into view. */
.mock-pair-side--summary{
  opacity:0;
  transform:translateY(10px);
}
@media (prefers-reduced-motion: no-preference){
  .mock-pair--play .mock-pair-side--summary{
    animation:chat-bubble-in .6s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay:8s;
  }
}
@media (prefers-reduced-motion: reduce){
  .mock-pair-side--summary{opacity:1;transform:none;}
}

/* Checklist */
.mock-checks{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;
  gap:.42rem;
}
.mock-check{
  display:flex;align-items:center;gap:.55rem;
  font-size:.83rem;
  color:var(--dim);
}
.mock-check svg{
  width:13px;height:13px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.mock-check--done{color:var(--text);}
.mock-check--done svg{color:var(--accent);}

/* Email mock */
.mock-from{
  font-size:.78rem;
  color:var(--dim);
  margin-bottom:.3rem;
}
.mock-from strong{color:var(--text);font-weight:600;}
.mock-subject{
  font-size:.92rem;font-weight:700;
  color:var(--text);
  margin:.1rem 0 .4rem;
}
.mock-body{
  font-size:.82rem;
  color:rgba(230,238,232,0.78);
  line-height:1.5;
  margin:0;
}

/* Weekly digest */
.mock-stats{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;
  gap:.45rem;
}
.mock-stats li{
  display:flex;align-items:baseline;gap:.6rem;
  font-size:.84rem;
  color:var(--text);
}
.mock-stat-num{
  font-size:1.05rem;font-weight:700;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  min-width:1.4rem;
}
.mock-stat-tag{
  font-size:.7rem;font-weight:600;
  color:var(--accent);
  text-transform:uppercase;letter-spacing:.08em;
  padding:.15rem .4rem;
  border:1px solid rgba(93,219,140,0.35);
  border-radius:4px;
  background:rgba(93,219,140,0.06);
  min-width:1.4rem;
  text-align:center;
}

/* ════════════════════════════════════════════════════════════
   TASKLIST BOARD (Problem section)
   Scattered post-it notes with handwritten task labels — a real
   tradesperson's pile of small admin, not abstract chip pills.
   ════════════════════════════════════════════════════════════ */
.tasklist-board{
  position:relative;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1.6rem 1.8rem;
  margin:3rem auto 3.5rem;
  max-width:880px;
  padding:1.5rem .5rem 2.5rem;
}
.task-note{
  position:relative;
  width:clamp(180px, 22vw, 220px);
  min-height:130px;
  padding:1.5rem 1.15rem 1.2rem;
  font-family:'Caveat','Patrick Hand','Marker Felt','Comic Sans MS',cursive;
  font-size:1.5rem;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.005em;
  color:#2b2310;
  background:#e8cf6c;
  border-radius:2px;
  box-shadow:
    0 14px 28px rgba(0,0,0,0.38),
    0 6px 10px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(0,0,0,0.04);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease;
}
/* Tape strip across the top */
.task-note::before{
  content:'';
  position:absolute;
  top:-9px;
  left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:62px;
  height:18px;
  background:rgba(255,255,255,0.42);
  box-shadow:0 2px 4px rgba(0,0,0,0.18);
}
/* Three muted paper colours, mixed across the nine notes */
.task-note:nth-child(2),
.task-note:nth-child(5),
.task-note:nth-child(8){background:#e8b96c;}   /* amber */
.task-note:nth-child(3),
.task-note:nth-child(6),
.task-note:nth-child(9){background:#f0e09c;}   /* cream */
/* Slight scattered rotations */
.task-note:nth-child(1){transform:rotate(-2.5deg);}
.task-note:nth-child(2){transform:rotate(1.8deg);}
.task-note:nth-child(3){transform:rotate(-1.2deg);}
.task-note:nth-child(4){transform:rotate(2.4deg);}
.task-note:nth-child(5){transform:rotate(-2deg);}
.task-note:nth-child(6){transform:rotate(1.4deg);}
.task-note:nth-child(7){transform:rotate(-1.8deg);}
.task-note:nth-child(8){transform:rotate(2.1deg);}
.task-note:nth-child(9){transform:rotate(-1.5deg);}
/* Hover: note straightens, lifts off the desk */
.task-note:hover{
  transform:rotate(0) translateY(-4px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.42),
    0 8px 14px rgba(0,0,0,0.25),
    inset 0 0 0 1px rgba(0,0,0,0.04);
}

@media(max-width:880px){
  .tasklist-board{gap:1.2rem 1.4rem;margin:2.4rem auto 2.8rem;padding:1.2rem .5rem 2rem;max-width:560px;}
  .task-note{width:clamp(160px, 44vw, 200px);min-height:110px;font-size:1.3rem;padding:1.2rem 1rem 1rem;}
}
@media(max-width:520px){
  .tasklist-board{gap:1rem 1.1rem;}
  /* Less jagged rotations on small mobile */
  .task-note:nth-child(odd){transform:rotate(-1.5deg);}
  .task-note:nth-child(even){transform:rotate(1.2deg);}
  .task-note:nth-child(4){transform:rotate(-.8deg);}
}

/* Reduced motion: kill the rotations entirely */
@media (prefers-reduced-motion: reduce){
  .task-note,
  .task-note:nth-child(n){transform:none;}
  .task-note:hover{transform:translateY(-3px);}
}

/* ════════════════════════════════════════════════════════════
   NOTEPAD: lined-paper to-do list (homepage Problem section).
   Replaces the .tasklist-board post-its as of 2026-05-11. The
   post-it rules above are intentionally left in place so a
   revert is HTML-only (see memory: reference_postits_v2_and_tasklist_swap).
   ════════════════════════════════════════════════════════════ */
.notepad-wrap{
  perspective:1200px;
  display:flex;
  justify-content:center;
  width:100%;
  margin:2.5rem 0 1rem;
}
.notepad{
  --paper:#f1ead2;
  --paper-line:#a8bdd6;
  --paper-margin:#c95252;
  --ink:#142450;
  --ink-light:#4f6791;
  --ink-done:#6c80a0;

  position:relative;
  width:100%;
  max-width:480px;
  background:var(--paper);
  background-image:
    linear-gradient(to right, transparent 64px, var(--paper-margin) 64px, var(--paper-margin) 65px, transparent 65px),
    repeating-linear-gradient(to bottom,
      transparent 0,
      transparent 39px,
      var(--paper-line) 39px,
      var(--paper-line) 40px);
  background-position:0 100px, 0 100px;
  background-repeat:no-repeat, repeat;
  border-radius:3px 3px 6px 6px;
  padding:100px 36px 80px 88px;
  box-shadow:
    0 40px 80px -20px rgba(0,0,0,0.65),
    0 14px 30px -8px rgba(0,0,0,0.45),
    inset 0 0 80px rgba(150,130,80,0.06);
  transform:rotate(-1.2deg);
  border-top:6px solid rgba(0,0,0,0.04);
}
.notepad::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 0%, transparent 50%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,0.03) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,0.02) 0%, transparent 40%);
  pointer-events:none;
  border-radius:inherit;
}
.notepad::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:14px;
  background-image:radial-gradient(circle at 6px 7px, var(--bg, #020a04) 2.5px, transparent 3px);
  background-size:24px 14px;
  background-position:18px 0;
  border-bottom:1px dashed rgba(0,0,0,0.08);
}
.notepad-heading{
  position:absolute;
  top:30px;
  left:88px;
  right:36px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  font-family:'Caveat', cursive;
}
.notepad-title{
  font-size:1.85rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:.005em;
  line-height:1;
}
.notepad-title-underline{
  display:inline-block;
  border-bottom:2.5px solid var(--paper-margin);
  padding-bottom:2px;
}
.notepad-date{
  font-size:1.15rem;
  font-weight:500;
  color:var(--ink-light);
  transform:rotate(2.5deg);
  line-height:1;
  text-align:right;
}
.notepad-list{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
  z-index:1;
}
.notepad-task{
  display:flex;
  align-items:flex-start;
  gap:.9rem;
  font-family:'Kalam','Caveat',cursive;
  font-weight:400;
  font-size:1.32rem;
  line-height:40px;
  color:var(--ink);
  padding:0;
  min-height:40px;
  position:relative;
  /* Subtle ink bleed — biro effect, thickens the stroke just a hair */
  text-shadow:0 0 0.4px currentColor, 0 0 0.4px currentColor;
}
.notepad-task--done{ color:var(--ink-done); }
.notepad-task--done .notepad-task-text{
  position:relative;
  display:inline-block;
}
.notepad-task--done .notepad-task-text::before{
  content:'';
  position:absolute;
  left:-6px;
  right:-6px;
  top:46%;
  height:2.5px;
  background:var(--ink);
  transform:rotate(-1.2deg);
  border-radius:40%;
}
.notepad-task--done .notepad-task-text::after{
  content:'';
  position:absolute;
  left:-4px;
  right:-8px;
  top:54%;
  height:1.5px;
  background:var(--ink);
  transform:rotate(.6deg);
  opacity:.55;
}
.notepad-task:nth-child(1){ transform:rotate(-.6deg) translateX(2px); font-size:1.34rem; }
.notepad-task:nth-child(2){ transform:rotate(.9deg) translateX(4px); font-size:1.42rem; }
.notepad-task:nth-child(3){ transform:rotate(-.4deg) translateY(2px); font-size:1.48rem; font-weight:700; color:var(--paper-margin); }
.notepad-task:nth-child(3) .notepad-checkbox{ border-color:var(--paper-margin); }
.notepad-task:nth-child(4){ transform:rotate(1.1deg) translateX(-2px); font-size:1.28rem; }
.notepad-task:nth-child(5){ transform:rotate(-.8deg) translateX(1px); font-size:1.22rem; color:var(--ink-light); }
.notepad-task:nth-child(6){ transform:rotate(1.3deg) translateX(-3px); font-size:1.38rem; }
.notepad-task:nth-child(7){ transform:rotate(-1deg) translateX(2px); font-size:1.3rem; opacity:.72; }
.notepad-task:nth-child(8){ transform:rotate(.5deg) translateX(3px); font-size:1.24rem; letter-spacing:-.01em; }
.notepad-task:nth-child(9){ transform:rotate(-1.4deg) translateX(-1px); font-size:1.42rem; font-weight:700; }
.notepad-task:nth-child(10){ transform:rotate(.7deg) translateX(3px); font-size:1.28rem; font-style:italic; margin-top:3px; color:var(--ink-light); }
.notepad-circle{
  display:inline-block;
  position:relative;
  padding:0 .2rem;
}
.notepad-circle::after{
  content:'';
  position:absolute;
  inset:-2px -4px -4px -4px;
  border:1.8px solid var(--paper-margin);
  border-radius:50%;
  transform:rotate(-3deg);
  pointer-events:none;
}
.notepad-checkbox{
  flex-shrink:0;
  width:22px;
  height:22px;
  border:2px solid var(--ink);
  border-radius:3px;
  margin-top:9px;
  position:relative;
  transform:rotate(-2deg);
  background:transparent;
}
.notepad-task:nth-child(even) .notepad-checkbox{ transform:rotate(1.5deg); border-radius:4px; }
.notepad-task:nth-child(3) .notepad-checkbox{ transform:rotate(-3.5deg); }
.notepad-task:nth-child(7) .notepad-checkbox{ transform:rotate(3deg); }
.notepad-task--done .notepad-checkbox::after{
  content:'';
  position:absolute;
  width:14px;
  height:9px;
  border-left:2.5px solid var(--paper-margin);
  border-bottom:2.5px solid var(--paper-margin);
  transform:rotate(-50deg);
  top:1px;
  left:3px;
}
.notepad-task--urgent::before{
  content:'!';
  position:absolute;
  left:-32px;
  top:0;
  font-family:'Caveat',cursive;
  font-size:1.8rem;
  font-weight:700;
  color:var(--paper-margin);
  transform:rotate(-8deg);
  line-height:40px;
}
.notepad-task--star::before{
  content:'*';
  position:absolute;
  left:-30px;
  top:-2px;
  font-family:'Caveat',cursive;
  font-size:2.2rem;
  font-weight:700;
  color:var(--paper-margin);
  line-height:40px;
}
/* Hand-doodled spiral, upper-right margin where the coffee ring used to be. */
.notepad-spiral{
  position:absolute;
  top:128px;
  right:18px;
  width:62px;
  height:62px;
  color:var(--ink-light);
  opacity:.7;
  transform:rotate(-12deg);
  pointer-events:none;
  z-index:0;
}
/* Wavy scribble flourish on the lower-right margin */
.notepad-scribble{
  position:absolute;
  bottom:110px;
  right:30px;
  width:52px;
  height:14px;
  color:var(--ink-light);
  opacity:.6;
  transform:rotate(-6deg);
  pointer-events:none;
  z-index:0;
}
.notepad-doodle{
  position:absolute;
  left:18px;
  top:298px;
  width:36px;
  height:42px;
  pointer-events:none;
  color:var(--paper-margin);
  opacity:.85;
  transform:rotate(-8deg);
}
.notepad-blot{
  position:absolute;
  right:48px;
  top:228px;
  width:8px;
  height:6px;
  background:var(--ink);
  border-radius:50% 60% 40% 50%;
  opacity:.55;
  transform:rotate(35deg);
  pointer-events:none;
}
@media (max-width:560px){
  .notepad{
    padding:88px 22px 64px 70px;
    max-width:100%;
  }
  .notepad-heading{
    left:70px;
    right:22px;
    top:26px;
  }
  .notepad-title{font-size:1.55rem;}
  .notepad-date{font-size:1rem;}
  .notepad-task{font-size:1.18rem;}
  .notepad-task--urgent::before,
  .notepad-task--star::before{left:-26px;}
}
@media (prefers-reduced-motion: reduce){
  .notepad{transform:none;}
  .notepad-task,
  .notepad-task:nth-child(n){transform:none;}
}

/* ════════════════════════════════════════════════════════════
   PHASE 3: SERVICE PAGE COMPONENTS
   FAQ accordion (uses native details/summary, no JS), and a
   "outcomes" list variant for what-you-receive sections.
   ════════════════════════════════════════════════════════════ */
.faq-list{
  max-width:720px;
  margin:2rem auto 0;
}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:1.2rem 0;
}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  cursor:pointer;
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
  padding-right:2rem;
  position:relative;
  list-style:none;
  letter-spacing:-.005em;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::after{
  content:'+';
  position:absolute;
  right:0;top:-.05em;
  font-size:1.5rem;
  font-weight:300;
  color:var(--accent);
  transition:transform .3s ease;
  line-height:1;
}
.faq-item[open] .faq-q::after{
  transform:rotate(45deg);
}
.faq-a{
  margin-top:.85rem;
  font-size:.96rem;
  color:var(--dim);
  line-height:1.65;
}
.faq-q:hover{color:var(--accent);}

/* "What you receive" outcomes list — visually different from who-list so
   "what I build" + "what you receive" don't read as the same component twice
   in a row. Subtle accent rule on the left, no checkmarks. */
.outcomes-list{
  list-style:none;padding:0;margin:1.5rem 0 0;
  max-width:680px;
  display:flex;flex-direction:column;
  gap:.55rem;
}
.outcomes-list li{
  font-size:.98rem;
  color:var(--text);
  line-height:1.55;
  padding:.6rem 0 .6rem 1.1rem;
  border-left:2px solid rgba(61,177,145,0.45);
  transition:border-color .25s ease, padding-left .25s ease;
}
.outcomes-list li:hover{
  border-left-color:var(--accent);
  padding-left:1.25rem;
}
/* Hide the inline checkmark SVGs — markup stays so HTML diffs stay light. */
.outcomes-list svg{display:none;}

/* ════════════════════════════════════════════════════════════
   ABOUT PAGE — service preview grid
   Quieter than .svc-primary so it doesn't compete with the
   homepage service grid.
   ════════════════════════════════════════════════════════════ */
.about-services{
  list-style:none;padding:0;margin:2rem 0 0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1rem;
}
.about-services li{margin:0;}
.about-services a{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.15rem 1.25rem;
  border:1px solid rgba(255,255,255,0.09);
  border-radius:12px;
  background:rgba(255,255,255,0.015);
  color:var(--text);
  text-decoration:none;
  transition:border-color .25s ease, background .25s ease, transform .25s ease;
  height:100%;
}
.about-services a:hover{
  border-color:var(--accent);
  background:rgba(61,177,145,0.045);
  transform:translateY(-1px);
}
.about-services strong{
  font-size:1rem;font-weight:600;
  color:var(--text);
  letter-spacing:-.005em;
}
.about-services span{
  font-size:.92rem;color:var(--dim);line-height:1.5;
}
@media (max-width:640px){
  .about-services{grid-template-columns:1fr;gap:.75rem;}
  .about-services a{padding:1rem 1.1rem;}
}

/* ════════════════════════════════════════════════════════════
   CONTACT FORM
   Vertical stack of fields. Submits via mailto for now; the
   markup is backend-agnostic so switching to a Cloudflare
   Pages Function later is a one-handler change.
   ════════════════════════════════════════════════════════════ */
.contact-form{
  max-width:560px;
  margin:0 auto;
  display:flex;flex-direction:column;gap:1.25rem;
}
.form-field{
  display:flex;flex-direction:column;gap:.45rem;
}
.form-field label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--dim);
}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%;
  font:inherit;
  font-size:1rem;
  color:var(--text);
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:10px;
  padding:.85rem 1rem;
  line-height:1.45;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.form-field textarea{
  resize:vertical;min-height:7rem;
  font-family:inherit;
}
.form-field select{
  background-image:linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                   linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
  cursor:pointer;
}
.form-field input::placeholder,
.form-field textarea::placeholder{
  color:rgba(185,197,190,0.5);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(61,177,145,0.04);
  box-shadow:0 0 0 3px rgba(61,177,145,0.18);
}
.form-field input:invalid:not(:placeholder-shown),
.form-field textarea:invalid:not(:placeholder-shown){
  border-color:rgba(184, 100, 80, 0.45);
}
.form-actions{
  display:flex;flex-direction:column;align-items:flex-start;gap:.9rem;
  margin-top:.5rem;
}
.form-actions .btn{align-self:flex-start;}
.form-meta{
  font-size:.88rem;color:var(--dim);line-height:1.55;margin:0;
}
.form-meta a{color:var(--accent);text-decoration:none;}
.form-meta a:hover{text-decoration:underline;}
@media (max-width:520px){
  .form-actions{align-items:stretch;}
  .form-actions .btn{align-self:stretch;text-align:center;}
}

/* ════════════════════════════════════════════════════════════
   ACCESSIBILITY
   Skip-to-content link, focus-visible rings on interactive
   elements, and a high-contrast-safe outline on form fields
   to complement the existing box-shadow halo.
   ════════════════════════════════════════════════════════════ */
.skip-link{
  position:fixed;
  top:-100px;
  left:.5rem;
  z-index:9999;
  background:var(--accent);
  color:#fff;
  padding:.7rem 1rem;
  font:600 .95rem/1.2 'Inter',sans-serif;
  text-decoration:none;
  border-radius:0 0 .35rem .35rem;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:top .15s ease;
}
.skip-link:focus{top:0;outline:none;}
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible,
.form-field select:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}