/* === WordPress-brug (gegenereerd door import_design.py) ===
   Zet de standaard blok-marges van WordPress terug naar browsergedrag,
   zodat uitsluitend de design-CSS hieronder de witruimte bepaalt. */
body :where(.wp-site-blocks, .is-layout-flow, .is-layout-constrained) > * { margin-block-start: revert; margin-block-end: revert; }

/* === Design-CSS, 1-op-1 uit homepage-levendig.html (alleen het font-pad in @font-face is naar de theme-map gezet) === */
/* Font uit de theme-map (assets/fonts), pad gezet door import_design.py */
@font-face{font-family:'Hanken Grotesk';src:url('../fonts/HankenGrotesk-Variable.woff2') format('woff2'),url('../fonts/HankenGrotesk-Variable.ttf') format('truetype');font-weight:100 900;font-display:swap}

:root{
  --paper:#FAF8F4;
  --sand:#F2ECE1;
  --ink:#2B2A28;
  --ink-soft:#6B6862;
  --gold:#B5804F;
  --gold-deep:#8A5E30;
  --gold-light:#D9A868;
  --gold-core:#E4B579;
  --line:#E3DDD0;
  --line-ink:rgba(250,248,244,0.18);
  --font:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  --container:1180px;
  --pad:clamp(1.25rem,5vw,3rem);
  --ease-out: cubic-bezier(0.23,1,0.32,1);
  --ease-in-out: cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  max-width:100%;
  overflow-x:hidden;
}
img,svg{max-width:100%;}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--pad);}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute;left:0;top:0;transform:translateY(-140%);
  background:var(--paper);color:var(--ink);padding:12px 20px;
  font-weight:600;z-index:500;border-radius:0 0 10px 0;
  transition:transform 0.2s ease;
}
.skip-link:focus{transform:translateY(0);}

/* ---------- Focus ---------- */
a,button,summary,input,textarea{font-family:inherit;}
:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px;border-radius:4px;}
.ink :focus-visible{outline-color:var(--gold-light);}

/* ---------- Header ---------- */
header.site{
  position:sticky;top:0;z-index:100;
  background:var(--ink);
  border-bottom:1px solid rgba(250,248,244,0.1);
}
.nav-row{
  display:flex;align-items:center;justify-content:space-between;
  min-height:68px;gap:1rem;padding-block:10px;
}
.brand-link{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--paper);}
.brand-link svg{display:block;flex-shrink:0;}
.brand-word{font-weight:600;font-size:1.25rem;letter-spacing:-0.01em;color:var(--paper);}
nav.primary-nav{display:none;}
nav.primary-nav ul{list-style:none;display:flex;gap:1.75rem;margin:0;padding:0;}
nav.primary-nav a{color:rgba(250,248,244,0.82);text-decoration:none;font-size:0.95rem;font-weight:500;}
.nav-cta{
  display:none;background:var(--gold-light);color:var(--ink);
  font-weight:600;font-size:0.9rem;padding:10px 20px;border-radius:999px;
  text-decoration:none;white-space:nowrap;
}
.nav-toggle{position:relative;}
.nav-toggle summary{
  list-style:none;cursor:pointer;color:var(--paper);
  border:1.5px solid rgba(250,248,244,0.4);border-radius:999px;
  padding:8px 16px;font-size:0.9rem;font-weight:600;
}
.nav-toggle summary::-webkit-details-marker{display:none;}
.nav-toggle[open] summary{background:rgba(250,248,244,0.08);}
.nav-toggle .panel{
  position:absolute;right:0;top:calc(100% + 8px);
  background:var(--ink);border:1px solid rgba(250,248,244,0.15);
  border-radius:14px;padding:1rem 1.25rem;min-width:220px;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
}
.nav-toggle .panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0;}
.nav-toggle .panel a{color:rgba(250,248,244,0.88);text-decoration:none;font-weight:500;}
.nav-toggle .panel ul a{display:block;padding:0.55rem 0;}
.nav-toggle .panel a.nav-cta{color:var(--ink);}
.nav-toggle .cta-row{margin-top:0.9rem;padding-top:0.9rem;border-top:1px solid rgba(250,248,244,0.15);}
@media (min-width:880px){
  nav.primary-nav{display:block;}
  .nav-toggle{display:none;}
  .nav-cta{display:inline-block;}
}

/* ---------- Section rhythm (no more numbered 01-06 badges: the flow-line
   carries that reading order now) ---------- */
main{position:relative;}
section{padding-block:clamp(3.25rem,7vw,6.5rem);position:relative;}
section > .wrap{position:relative;z-index:2;}
.ink{background:var(--ink);color:var(--paper);overflow:hidden;}
.sand{background:var(--sand);}
.paper{background:var(--paper);}

h2{
  font-weight:600;color:var(--ink);
  font-size:clamp(2rem,2.6vw + 1.2rem,3.5rem);
  line-height:1.1;margin:0 0 1rem;letter-spacing:-0.01em;
}
.ink h2{color:var(--paper);}
h3{
  font-weight:600;color:var(--ink);
  font-size:clamp(1.25rem,1vw + 0.95rem,1.625rem);
  line-height:1.25;margin:0 0 0.6rem;
}
.ink h3{color:var(--paper);}
.lead{
  font-size:clamp(1.0625rem,0.6vw + 0.9rem,1.375rem);
  line-height:1.6;color:var(--ink-soft);max-width:52ch;margin:0 0 2.25rem;
}
.ink .lead{color:rgba(250,248,244,0.82);}
p{font-size:1rem;line-height:1.7;color:var(--ink);}
.ink p{color:rgba(250,248,244,0.88);}

/* Section headings ease in a few pixels as they cross into view. CSS-only,
   progressive enhancement (Baseline "limited": Chrome/Edge 115+, Safari 26+,
   no Firefox stable yet - see 03-motion-technieken.md, package item 6). The
   "from" state is 16px off, never hidden, so a browser that starts the
   timeline mid-way, or doesn't support it at all, always shows real text. */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline: view()){
    section h2{ animation:oluHeadIn both; animation-timeline:view(); animation-range:entry 0% cover 30%; }
    @keyframes oluHeadIn{ from{ transform:translateY(8px); } to{ transform:translateY(0); } }
  }
}

/* ---------- Wave dividers between sections ----------
   Each divider is the *next* section's own background colour, sitting on
   top of the previous section, so the join reads as a soft curve instead
   of a hard rule. Decorative, aria-hidden, no layout impact (position
   absolute at the very top of the section it belongs to). */
.wave{position:absolute;top:-1px;left:0;width:100%;height:clamp(28px,5vw,56px);line-height:0;z-index:2;pointer-events:none;}
.wave svg{display:block;width:100%;height:100%;}
.wave-into-ink path{fill:var(--ink);}
.wave-into-sand path{fill:var(--sand);}
.wave-into-paper path{fill:var(--paper);}

/* ---------- Flow-line ----------
   One thin gold line, drawn as the page is scrolled, running from the
   hero ripple down through every section to the contact block. Decorative
   only (aria-hidden): it never carries information the text doesn't
   already carry on its own. Baseline state is fully drawn (safe default
   for no-JS / no scroll-timeline support); JS or the native
   animation-timeline only ever *adds* the "starts hidden, draws in"
   behaviour, gated behind a class the script sets once it can guarantee
   the draw will actually run. Hidden on narrow phones, where the gutter
   is too tight for a decorative line to sit clear of the text. */
.flow-line{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:1;overflow:hidden;}
.flow-line svg{position:absolute;left:0;top:0;display:block;overflow:visible;}
.flow-line .fl-track{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:0.18;}
.flow-line .fl-draw{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;opacity:0.85;}
.flow-line .fl-head{fill:var(--gold-core);}
.flow-line .fl-halo{fill:none;stroke:var(--gold-light);stroke-width:1.5;opacity:0.5;}
.flow-line .fl-end{fill:none;stroke:var(--gold-light);stroke-width:1.5;opacity:0;}
.flow-line.flow-done .fl-end{animation:flEnd 2.6s cubic-bezier(0.23,1,0.32,1) infinite;}
[data-motion="paused"] .flow-line.flow-done .fl-end{animation:none;opacity:0.25;}
@keyframes flEnd{0%{opacity:0;}20%{opacity:0.55;}100%{opacity:0;}}
@media (prefers-reduced-motion:reduce){ .flow-line .fl-end{animation:none!important;opacity:0.25;} }
@media (max-width:640px){ .flow-line{display:none;} }

/* ---------- Motion toggle (single, sitewide) ----------
   One visible pause control governs every continuous loop on the page
   (hero ripple, network pulses, marquee, invoice demo): the hero ripple,
   the tool-band marquee, the "how we work" pulses and the invoice demo
   all read [data-motion="paused"] on <html>. This satisfies WCAG 2.2.2
   without scattering a pause button next to every moving part. */
.motion-toggle{
  position:absolute;right:clamp(1rem,4vw,2rem);bottom:clamp(1rem,4vw,2rem);z-index:5;
  display:inline-flex;align-items:center;gap:8px;font:inherit;
  font-size:0.82rem;font-weight:600;color:var(--paper);
  background:rgba(250,248,244,0.1);border:1px solid rgba(250,248,244,0.35);
  border-radius:999px;padding:9px 16px;cursor:pointer;
}
.motion-toggle:hover{background:rgba(250,248,244,0.16);}
.motion-toggle .dot{width:7px;height:7px;border-radius:999px;background:var(--gold-light);}
html[data-motion="paused"] .motion-toggle .dot{background:rgba(250,248,244,0.4);}

/* ---------- Hero: living ripple ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--ink);
  padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(4.5rem,9vw,7rem);
}
.hero canvas{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);mask-image:radial-gradient(closest-side,#000 84%,transparent 100%);}
@media (max-width:899px){ .hero{padding-bottom:calc(clamp(4.5rem,9vw,7rem) + 300px);} }
.wp-site-blocks,body > main,body > header{overflow-x:clip;}
.hero-inner{position:relative;z-index:1;max-width:860px;}
/* from 900 px the text column lines up with the logo and leaves the right side to the ripple */
@media (min-width:900px){ .hero-inner{margin-left:max(0px,calc((100% - var(--container)) / 2));max-width:min(860px,62%);} }
.eyebrow{
  display:inline-block;font-size:0.8rem;font-weight:700;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold-light);margin-bottom:1.5rem;
}
/* The h1 is the LCP element: it renders at full opacity, in place, with no
   entrance transition. The one moving thing in this screen is the canvas
   ripple behind it - per the "one hero motion element" rule the copy
   itself stays still. This replaces an earlier version of this page where
   the h1 started at opacity:0 and only faded in once JS ran, which risked
   delaying LCP (opacity:0 elements aren't LCP candidates). */
.hero h1{
  font-weight:600;color:var(--paper);margin:0;
  font-size:clamp(2.1rem,3.2vw + 1.4rem,4.4rem);
  line-height:1.06;letter-spacing:-0.01em;
}
.hero h1 .line1,.hero h1 .line2{display:block;}
.hero h1 .line2{color:var(--gold-light);margin-top:0.15em;}
.payoff{
  font-weight:500;font-size:clamp(1.125rem,1vw + 0.9rem,1.5rem);
  color:var(--paper);margin:1.1rem 0 1.5rem;padding-top:1.1rem;
  border-top:1px solid rgba(250,248,244,0.22);max-width:20ch;
}
.hero-sub{
  font-size:clamp(1rem,0.4vw + 0.95rem,1.1875rem);
  line-height:1.65;color:rgba(250,248,244,0.72);max-width:56ch;margin:0 0 2.25rem;
}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;}

.btn-primary{
  position:relative;display:inline-block;font-weight:600;font-size:1rem;
  padding:14px 28px;border-radius:999px;text-decoration:none;
  background:var(--gold-deep);color:var(--paper);border:1px solid var(--gold-deep);
  transition:transform 150ms var(--ease-out),background 150ms ease;
  will-change:transform;
}
.btn-primary:active{transform:scale(0.98);}
.ink .btn-primary{background:var(--gold-light);color:var(--ink);border-color:var(--gold-light);}
/* One brand gesture on the primary buttons: a ring pulses out on
   hover/focus. Mouse/keyboard only, transform+opacity only, off under
   reduced motion. */
@media (hover:hover) and (pointer:fine){
  @media (prefers-reduced-motion:no-preference){
    .btn-primary::after{
      content:"";position:absolute;inset:0;border-radius:999px;border:1.5px solid currentColor;
      opacity:0;transform:scale(1);pointer-events:none;
    }
    .btn-primary:hover::after,.btn-primary:focus-visible::after{
      animation:oluBtnRing 700ms var(--ease-out);
    }
    @keyframes oluBtnRing{ from{opacity:0.55;transform:scale(1);} to{opacity:0;transform:scale(1.35);} }
  }
}

.btn-secondary{
  display:inline-block;font-weight:600;font-size:1rem;text-decoration:none;
  color:var(--paper);border-bottom:1.5px solid var(--gold-light);padding-bottom:2px;
  transition:color 160ms ease,border-color 160ms ease;position:relative;
}
.btn-secondary::after{content:"";position:absolute;inset:-12px -8px;}
.btn-outline{
  display:inline-block;font-weight:600;font-size:1rem;
  padding:13px 27px;border-radius:999px;text-decoration:none;
  background:transparent;color:var(--paper);border:1.5px solid rgba(250,248,244,0.5);
  transition:transform 150ms var(--ease-out),background 150ms ease,border-color 150ms ease;
}
.btn-outline:active{transform:scale(0.98);}

/* ---------- Tool-band (marquee, directly under the hero) ----------
   Sits right where the hero used to hand off in silence: a calm, narrow
   band naming the systems Olunda plugs into. Names only, no logos (brand
   terms as plain text, per 03-motion-technieken.md D3 - Microsoft's own
   logo-usage rules haven't been checked). Contrast: gold-deep #8A5E30 on
   sand #F2ECE1 measures 4.8:1, ink-soft #6B6862 on sand measures 4.7:1;
   both clear WCAG AA (4.5:1) for this text size. */
.toolband{background:var(--sand);padding-block:18px;overflow:hidden;position:relative;z-index:3;}
.toolband-inner{display:flex;align-items:center;gap:1.5rem;}
.toolband-label{
  flex:none;font-size:0.78rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;
}
.toolband-track-wrap{flex:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.toolband-track{display:flex;gap:2.25rem;white-space:nowrap;width:max-content;color:#57544E;font-weight:600;font-size:0.95rem;}
.toolband-track span{flex:none;}
@media (prefers-reduced-motion:no-preference){
  .toolband-track{animation:oluMarquee 64s linear infinite;}
  html[data-motion="paused"] .toolband-track{animation-play-state:paused;}
  .toolband:hover .toolband-track,.toolband:focus-within .toolband-track{animation-play-state:paused;}
}
@keyframes oluMarquee{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .toolband-track{transform:none;} }
@media (max-width:640px){ .toolband-inner{flex-direction:column;align-items:stretch;gap:0.6rem;} .toolband-label{text-align:center;white-space:normal;} }

/* ---------- How we work ---------- */
.how-wrap{position:relative;}
.how-lead{position:relative;z-index:1;}

/* Network diagram (desktop/tablet): Outlook / Excel / Forms feed into the
   Olunda hub, which feeds Teams / SharePoint / Bookkeeping, with gold
   pulses running the connections. Placed in "How we work" rather than
   straight under the hero: this section is literally about the work
   travelling through a process, so the diagram illustrates the paragraph
   text next to it instead of duplicating the hero. */
.network{margin:1.5rem 0 0.5rem;position:relative;z-index:1;}
.network svg{display:block;width:100%;height:auto;}
.network .node rect{fill:rgba(250,248,244,0.05);stroke:rgba(250,248,244,0.22);}
.network .node text{font-family:var(--font);font-size:15px;font-weight:600;fill:var(--paper);}
.network .node .sm{font-size:12px;font-weight:500;fill:rgba(250,248,244,0.65);}
.network .path{fill:none;stroke:rgba(250,248,244,0.22);stroke-width:1.5;stroke-dasharray:3 5;}
@media (max-width:759.98px){ .network{display:none;} }

/* Network, mobile: same story, stacked, real text, no shrunk-down SVG. */
.network-mobile{display:none;margin:1.5rem 0 1rem;position:relative;z-index:1;}
@media (max-width:759.98px){ .network-mobile{display:block;} }
.nm-col{display:grid;gap:0.6rem;}
.nm-item{
  background:rgba(250,248,244,0.05);border:1px solid rgba(250,248,244,0.18);
  border-radius:12px;padding:0.85rem 1rem;
}
.nm-item b{display:block;color:var(--paper);font-weight:600;font-size:0.95rem;}
.nm-item span{display:block;color:rgba(250,248,244,0.65);font-size:0.82rem;margin-top:0.15rem;}
.nm-hub{
  display:flex;align-items:center;gap:0.6rem;justify-content:center;margin:0.75rem 0;
  color:var(--gold-light);font-weight:700;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;
}
.nm-arrow{color:rgba(250,248,244,0.4);font-size:1.1rem;text-align:center;line-height:1;}

/* Rotating setups: tabs, cross-fading scene, caption */
.flows{margin-top:2.25rem;position:relative;z-index:1;}
.flows-label{margin:0 0 1rem;font-size:0.8rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold-light);}
.flow-tabs{display:flex;flex-wrap:wrap;gap:0.5rem;}
.flow-tab{
  font:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;
  color:rgba(250,248,244,0.72);background:transparent;
  border:1px solid rgba(250,248,244,0.22);border-radius:999px;padding:7px 15px;
  position:relative;overflow:hidden;transition:color 180ms ease,border-color 180ms ease,background-color 180ms ease;
}
.flow-tab[aria-pressed="true"]{color:var(--ink);background:var(--gold-light);border-color:var(--gold-light);}
.flow-tab:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px;}
.flow-tab .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);opacity:0.35;transform:scaleX(0);transform-origin:left;}
.flow-tab[aria-pressed="true"] .bar.run{animation:tabBar var(--dwell,6500ms) linear forwards;}
[data-motion="paused"] .flow-tab .bar{display:none;}
@keyframes tabBar{to{transform:scaleX(1);}}
@media (hover:hover) and (pointer:fine){ .flow-tab:not([aria-pressed="true"]):hover{color:var(--paper);border-color:rgba(250,248,244,0.5);} }
html:not([data-motion]) .flows .network,html:not([data-motion]) .flow-tabs{display:none;}
.network svg{overflow:visible;}
.network .node rect{fill:#34322F;stroke:rgba(250,248,244,0.22);}
.network .link{fill:none;stroke:rgba(217,168,104,0.5);stroke-width:1.6;stroke-linecap:round;}
.network .chip rect{fill:rgba(250,248,244,0.06);stroke:rgba(250,248,244,0.2);}
.network .chip text{font-family:var(--font);font-size:12.5px;font-weight:600;fill:rgba(250,248,244,0.8);}
.network .tray-label{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:0.1em;fill:rgba(250,248,244,0.45);}
.flow-caption span.w{display:inline-block;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .35s cubic-bezier(0.23,1,0.32,1);}
.flow-caption.on span.w{opacity:1;transform:none;}
.network-mobile{transition:opacity .45s ease;}
.network-mobile:not(.on){opacity:0;}
@media (prefers-reduced-motion:reduce){ .flow-caption span.w{transition:none;opacity:1;transform:none;} .network-mobile{transition:none;opacity:1;} }
.net-scene{transition:opacity 450ms cubic-bezier(0.23,1,0.32,1);}
.net-scene.is-out{opacity:0;}
.flow-caption{margin:1.25rem 0 0;max-width:62ch;color:rgba(250,248,244,0.78);font-size:0.975rem;min-height:3.4em;}
.flow-caption b{color:var(--paper);font-weight:600;margin-right:0.25rem;}
@media (min-width:760px){ .flow-caption{margin-top:2.5rem;} } /* ruimte tussen toolbox en uitleg (CEO 29-09) */
@media (prefers-reduced-motion:reduce){ .net-scene{transition:none;} .flow-tab .bar{display:none;} }

.how-grid{display:grid;grid-template-columns:1fr;gap:2.5rem;margin-top:2.5rem;position:relative;z-index:1;}
@media (min-width:760px){
  .how-grid{grid-template-columns:repeat(3,1fr);gap:2.25rem;}
  .how-step{padding-left:2rem;border-left:1px solid rgba(250,248,244,0.14);}
  .how-step:first-child{padding-left:0;border-left:none;}
}
.how-step .step-num{
  font-weight:600;color:var(--gold-light);font-size:clamp(2rem,3vw,2.75rem);
  line-height:1;margin-bottom:0.6rem;
}

/* ---------- Situations ---------- */
.pull-quote-paper{
  font-weight:600;color:var(--gold-deep);
  font-size:clamp(1.375rem,1.4vw + 1rem,1.875rem);
  line-height:1.35;margin:0 0 2.25rem;max-width:34ch;
}
.situations-list{margin-top:1rem;}
.situation{
  display:grid;grid-template-columns:56px 1fr;gap:1rem 1.5rem;
  padding-block:1.9rem;border-top:1px solid var(--line);align-items:start;
  border-radius:10px;
}
.situation:first-child{border-top:none;padding-top:0.5rem;}
.situation-num{
  font-weight:600;color:var(--gold);
  font-size:clamp(1.75rem,3vw,2.5rem);line-height:1;
}
.situation h3{margin-bottom:0.5rem;}
.situation p{max-width:62ch;}

/* ---------- Example: living invoice demo ---------- */
.example-label{font-style:normal;color:var(--ink-soft);font-size:0.95rem;margin:0 0 1.75rem;max-width:52ch;}
.demo-frame{
  background:var(--sand);border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.5rem,4vw,2.5rem);display:grid;gap:2rem;
}
@media (min-width:900px){ .demo-frame{grid-template-columns:1fr 1fr;align-items:start;gap:2.5rem;} }

/* The persistent, always-visible record of the flow: exactly the four
   lines from the copy deck, unchanged, in document order. This is the
   real content; the animated window next to it is a decorative
   illustration of the same four lines and is aria-hidden. */
.demo-steps{list-style:none;margin:0;padding:0;counter-reset:ds;display:grid;gap:0.9rem;}
.demo-steps li{counter-increment:ds;display:flex;gap:0.85rem;align-items:flex-start;}
.demo-steps li::before{
  content:counter(ds);flex:none;width:1.7rem;height:1.7rem;border-radius:999px;
  background:var(--paper);border:1.5px solid var(--gold);color:var(--gold-deep);
  font-weight:700;font-size:0.85rem;display:flex;align-items:center;justify-content:center;
}
.demo-steps li p{margin-top:0.15rem;}

.demo-win{background:#fff;border-radius:14px;border:1px solid var(--line);box-shadow:0 18px 40px rgba(43,42,40,.08);overflow:hidden;}
.demo-win-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #EFEAE0;font-size:.82rem;color:var(--ink-soft);}
.demo-win-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;}
.demo-win-bar b{margin-left:6px;color:var(--ink);font-weight:600;}
.demo-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--gold-deep);font-size:.8rem;}
.demo-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);}
@media (prefers-reduced-motion:no-preference){ .demo-live::before{animation:oluBlink 1.6s ease-in-out infinite;} html[data-motion="paused"] .demo-live::before{animation-play-state:paused;} }
@keyframes oluBlink{50%{opacity:.3;}}
.demo-rows{list-style:none;margin:0;padding:6px 0;}
.demo-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:11px 15px;border-bottom:1px solid #F3EFE7;}
.demo-row:last-child{border-bottom:0;}
.demo-row .ic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--gold-deep);font-weight:700;font-size:.78rem;}
.demo-row .t{font-weight:600;font-size:.92rem;color:var(--ink);}
.demo-row .s{font-size:.8rem;color:var(--ink-soft);}
.demo-st{font-size:.76rem;font-weight:700;padding:4px 9px;border-radius:999px;background:var(--sand);color:var(--ink-soft);white-space:nowrap;}
.demo-row.active{background:#FBF6EC;}
.demo-row.active .demo-st{background:var(--gold-light);color:var(--ink);}
.demo-row.done .demo-st{background:var(--sand);color:var(--gold-deep);}
.demo-row.done .ic{background:var(--gold-deep);color:#fff;}
.demo-row.wait .demo-st{background:transparent;border:1px dashed var(--line);}
@media (prefers-reduced-motion:no-preference){ .demo-row{transition:background-color .4s ease;} }

/* ---------- Proof ---------- */
.proof-list{margin-top:1.5rem;border-top:1px solid var(--line);padding-top:2rem;}
.proof-item p{max-width:56ch;}
@media (max-width:879.98px){
  .proof-list{padding-top:0;}
  .proof-item{padding-block:1.5rem;border-bottom:1px solid var(--line);}
  .proof-item:last-child{border-bottom:none;}
}
@media (min-width:880px){
  .proof-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;}
}

/* ---------- Services ---------- */
.service{padding-block:2.5rem;border-top:1px solid var(--line);}
.service:first-child{border-top:none;padding-top:0.5rem;}
.service-row{display:grid;grid-template-columns:1fr;gap:1.75rem;}
@media (min-width:880px){ .service-row{grid-template-columns:260px 1fr;gap:3rem;align-items:start;} }
.service-left{display:flex;flex-direction:column;gap:0.15rem;}
.service-index{font-weight:600;color:var(--gold-deep);font-size:1.25rem;}
.service-name{
  font-size:clamp(1.5rem,1.6vw + 1rem,2.125rem);font-weight:600;color:var(--ink);
  margin:0.15rem 0 0.5rem;line-height:1.15;
}
.service-pricing-label{
  font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--ink-soft);margin:0.5rem 0 0.25rem;
}
.service-pricing{margin:0;font-size:1rem;color:var(--ink);max-width:26ch;}
.price-free{
  display:inline-block;font-weight:600;color:var(--gold-deep);
  font-size:clamp(1.375rem,1.4vw + 1rem,1.875rem);
}
.service-cols{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:0;}
@media (min-width:880px){ .service-cols{grid-template-columns:repeat(3,1fr);gap:1.75rem;} }
.service-cols dt{font-weight:700;font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:0.35rem;}
.service-cols dd{margin:0;font-size:1rem;color:var(--ink);max-width:38ch;}

/* ---------- FAQ ---------- */
.faq-list{margin-top:1rem;}
details.faq-item{border-top:1px solid var(--line);padding-block:1rem;border-radius:8px;}
details.faq-item:first-child{border-top:none;}
details.faq-item summary{
  cursor:pointer;font-weight:600;font-size:1.0625rem;color:var(--ink);
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-block:0.4rem;
}
details.faq-item summary::-webkit-details-marker{display:none;}
.faq-icon{position:relative;width:1rem;height:1rem;flex-shrink:0;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;background:var(--gold-deep);border-radius:1px;
  transition:transform 220ms var(--ease-in-out);
}
.faq-icon::before{left:0;top:50%;width:100%;height:2px;transform:translateY(-50%);}
.faq-icon::after{top:0;left:50%;width:2px;height:100%;transform:translateX(-50%);}
details.faq-item[open] .faq-icon::after{transform:translateX(-50%) scaleY(0);}
details.faq-item p{margin:0.75rem 0 0.25rem;max-width:64ch;color:var(--ink-soft);}

/* ---------- CTA + Form (contact) ---------- */
.contact-head{max-width:640px;position:relative;z-index:1;}
.contact-head p{color:rgba(250,248,244,0.85);max-width:56ch;}
.contact-routes{margin-top:3.5rem;display:grid;grid-template-columns:1fr;gap:2.5rem;position:relative;z-index:1;}
.route-scan{padding-top:2.5rem;border-top:1px solid var(--line-ink);position:relative;}
.route-micro{margin-top:0.85rem;font-size:0.9rem;color:rgba(250,248,244,0.65);}
.hero-micro{margin:1rem 0 0;font-size:0.875rem;color:rgba(250,248,244,0.62);position:relative;}
.or-divider{
  display:flex;align-items:center;gap:1rem;color:rgba(250,248,244,0.58);
  font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;
}
.or-divider::before,.or-divider::after{content:"";flex:1;height:1px;background:rgba(250,248,244,0.18);}
.route-form{padding-top:0;}
@media (min-width:880px){
  .contact-routes{grid-template-columns:1fr 2.5rem 1fr;gap:2rem;}
  .route-scan{border-top:none;padding-top:0;align-self:center;}
  .or-divider{flex-direction:column;align-items:center;width:2.5rem;}
  .or-divider::before,.or-divider::after{width:1px;height:auto;flex:1;background:rgba(250,248,244,0.18);}
}

/* Where the flow-line comes to rest: a small ripple, drawn once, sitting
   behind the scan button - the same motif as the hero, closing the loop. */
.scan-ripple{position:absolute;inset:-70px -60px auto auto;top:-40px;right:-40px;width:170px;height:170px;pointer-events:none;z-index:-1;opacity:0.55;}
.scan-ripple circle{fill:none;stroke:var(--gold-light);stroke-width:1.5;}

.form-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:560px;margin-top:0;}
@media (min-width:640px){
  .form-grid{grid-template-columns:1fr 1fr;}
  .form-grid .full{grid-column:1 / -1;}
}
.field label{display:block;font-size:0.85rem;font-weight:600;color:rgba(250,248,244,0.85);margin-bottom:0.4rem;}
.field input,.field textarea{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(250,248,244,0.4);
  background:rgba(250,248,244,0.06);color:var(--paper);font-family:var(--font);font-size:0.9375rem;
  transition:background 160ms ease;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(250,248,244,0.55);}
.field input:focus,.field textarea:focus{background:rgba(250,248,244,0.1);}
.form-submit{margin-top:0.5rem;}

/* ---------- Footer ---------- */
footer.site{padding-block:clamp(2.75rem,6vw,4.5rem);}
.footer-top{
  display:grid;grid-template-columns:1fr;gap:2.25rem;padding-bottom:2.5rem;
  border-bottom:1px solid rgba(250,248,244,0.14);
}
@media (min-width:760px){ .footer-top{grid-template-columns:2fr 1fr 1fr;gap:2rem;} }
.footer-brand-line{display:flex;align-items:center;gap:10px;margin-bottom:0.9rem;}
.footer-brand-line .brand-word{color:var(--paper);}
.footer-tagline{max-width:38ch;color:rgba(250,248,244,0.72);font-size:0.9375rem;}
.footer-col h4{
  font-size:0.8rem;text-transform:uppercase;letter-spacing:0.08em;color:rgba(250,248,244,0.55);
  margin:0 0 0.9rem;font-weight:700;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.6rem;}
.footer-col a{color:rgba(250,248,244,0.82);text-decoration:none;font-size:0.9375rem;}
/* phones: tap targets of at least 44 px, readable labels in the toolbox list (09-10) */
@media (max-width:640px){ .brand-link{min-height:44px;} .nav-toggle summary{min-height:44px;box-sizing:border-box;display:flex;align-items:center;} .flow-tab{min-height:44px;} .nm-item span{font-size:0.875rem;} .motion-toggle{min-height:44px;} }
@media (max-width:640px){ .footer-col ul{gap:0;} .footer-col a{display:inline-block;padding:0.6rem 0;} details.faq-item summary{min-height:44px;} }
h1,h2,h3,.lead{text-wrap:balance;}
p,li,dd{text-wrap:pretty;}
.footer-legal{padding-top:1.5rem;font-size:0.8125rem;color:rgba(250,248,244,0.55);line-height:1.7;}
.footer-legal a{color:rgba(250,248,244,0.7);}

/* ---------- Hover polish (mouse/trackpad only, gated) ---------- */
@media (hover:hover) and (pointer:fine){
  nav.primary-nav a{transition:color 160ms ease;}
  nav.primary-nav a:hover{color:var(--paper);}
  .nav-cta{transition:background 160ms ease;}
  .nav-cta:hover{background:var(--gold-core);}
  .nav-toggle .panel a{transition:color 160ms ease;}
  .nav-toggle .panel a:hover{color:var(--gold-light);}
  .btn-primary:hover{background:var(--ink);}
  .ink .btn-primary:hover{background:var(--gold-core);}
  .btn-secondary:hover{color:var(--gold-light);}
  .btn-outline:hover{background:rgba(250,248,244,0.08);border-color:rgba(250,248,244,0.8);}
  .footer-col a{transition:color 160ms ease;}
  .footer-col a:hover{color:var(--gold-light);}
  .situation{transition:background-color 220ms ease;}
  .situation:hover{background-color:rgba(181,128,79,0.05);}
  .service{transition:background-color 220ms ease;}
  .service:hover{background-color:rgba(181,128,79,0.05);}
  details.faq-item summary{transition:color 180ms ease;}
  details.faq-item summary:hover{color:var(--gold-deep);}
}

/* ---------- Reduced motion: everything static, fully drawn/finished ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms!important;animation-iteration-count:1!important;
    transition-duration:0.01ms!important;scroll-behavior:auto!important;
  }
  section h2{transform:none!important;}
}