/* Homepage, firm-first (ZT-172 design lab, Sep 27 2026). Loads after style.css and d-water/water.css; styles only the
   sections this page adds. Ivo's direction (09 brief): lead with the firm, show the tech and the reach, and cut the
   writing: each section is one headline, at most one short line, and the action. Gold stays an accent (the step numbers,
   one line in the portal frame); everything else is pearl on charcoal. */

.svc4,.work,.reach,.faq{padding-block:clamp(72px,8vw,128px)}
:is(.svc4,.work,.reach,.faq) h2{font-size:clamp(30px,2.6vw + 14px,56px);line-height:1.02;letter-spacing:-.04em;color:var(--paper)}

/* ---------- Three services ---------- */
.svc4-list{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;gap:var(--s4);grid-template-columns:repeat(3,minmax(0,1fr))}
.svc4-card{display:flex;flex-direction:column;gap:var(--s2);height:100%;min-height:200px;padding:var(--s6) var(--s5);border:1px solid var(--pearl-faint);border-radius:20px;background:linear-gradient(180deg,rgba(251,250,247,.035),rgba(251,250,247,0));color:var(--paper);text-decoration:none;transition:border-color var(--dur-ui,200ms) var(--ease-out,ease),transform var(--dur-ui,200ms) var(--ease-out,ease)}
.svc4-card:hover{border-color:var(--pearl-line);transform:translateY(-2px)}
.svc4-card:active{transform:translateY(0) scale(.99)}
.svc4-g{width:44px;height:44px;margin-bottom:var(--s5);color:var(--pearl);--gbg:var(--night-0)}
.svc4-n{font:600 clamp(18px,.5vw + 15px,22px)/1.15 var(--f-display);letter-spacing:-.02em}
.svc4-l{color:var(--on-dark);font-size:var(--t-small)}
@media (max-width:860px){.svc4-list{grid-template-columns:1fr}}
@media (max-width:560px){.svc4-list{grid-template-columns:1fr}.svc4-card{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--s4);padding:var(--s5)}.svc4-g{margin:0;width:36px;height:36px}.svc4-l{flex-basis:100%}}

/* ---------- How we work, all year, told through the app (the app-screen styles are shared, in style.css) ---------- */
.work-n{color:var(--gold-l);font-size:14px}

/* ---------- Where we work ---------- */
.reach-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:end}
.reach-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);color:var(--on-dark);font-size:var(--t-lead)}
.reach-list li{display:flex;align-items:baseline;gap:var(--s3);padding-bottom:var(--s3);border-bottom:1px solid var(--pearl-faint)}
.reach-list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold-l);transform:translateY(-3px)}
.reach-list b{flex:none;color:var(--paper);font-weight:600}
@media (max-width:760px){.reach-row{grid-template-columns:1fr;gap:var(--s6)}}

/* ---------- Questions ---------- */
.faq-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s7);align-items:start}
.faq-list details{border-top:1px solid var(--pearl-faint)}
.faq-list details:last-child{border-bottom:1px solid var(--pearl-faint)}
.faq-list summary{position:relative;display:flex;align-items:center;min-height:64px;padding-right:40px;cursor:pointer;list-style:none;color:var(--paper);font-weight:600;font-size:var(--t-lead)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before,.faq-list summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:1.5px;background:var(--pearl);transition:transform var(--dur-ui,200ms) var(--ease-out,ease)}
.faq-list summary::after{transform:rotate(90deg)}
.faq-list details[open] summary::after{transform:rotate(0)}
.faq-list details p{margin:0 0 var(--s5);max-width:36em;color:var(--on-dark)}
@media (max-width:760px){.faq-row{grid-template-columns:1fr;gap:var(--s5)}}

/* ---------- Start online: the form area is shorter now ---------- */
.start-call{align-self:start}

/* ---------- Footer ---------- */
.foot-contact,.foot-legal{margin-top:var(--s3);color:var(--on-dark-2);font-size:var(--t-small)}
.foot-contact a,.foot-legal a{color:var(--paper);text-decoration-color:var(--pearl-rule);text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){.svc4-card,.faq-list summary::after{transition:none}.svc4-card:hover{transform:none}}

/* ---------- The app glimpse in the hero (09 brief, point 7: the glass Z with a glimpse of the client app) ---------- */
/* A phone standing on the marble to the right of the mark, in the rig, so it rides the marble layer with the mark as the
   page scrolls. Above 900 px its size and place come from the photo box (water.css): the phone is 92% of the mark's
   height, its base on the marble at y .705 (a touch in front of the mark's .66), centred at x .865 of the photo. */
.app-glimpse{--ph:calc(var(--mh) * .92);--pw:calc(var(--ph) * .5);position:absolute;left:calc(var(--bw) * .865 - var(--pw) / 2);top:calc(var(--bh) * .705 - var(--ph));width:var(--pw);height:var(--ph);padding:5px;border-radius:calc(var(--pw) * .16);background:linear-gradient(160deg,#3A4049,#14171B 40%,#0B0D10);box-shadow:0 0 0 1px rgba(251,250,247,.16),0 30px 50px -20px rgba(0,0,0,.9),0 0 60px -10px rgba(226,194,122,.18);transform:perspective(900px) rotateY(-14deg) rotateZ(1deg);transform-origin:50% 100%;pointer-events:none}
.app-glimpse::after{content:"";position:absolute;left:10%;right:10%;bottom:-9px;height:12px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent)}
.ag-screen{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;gap:4%;padding:12% 9% 8%;border-radius:calc(var(--pw) * .13);background:linear-gradient(180deg,#1C2026,#0E1013);color:var(--paper);font-size:calc(var(--pw) * .078);line-height:1.25}
.ag-top{display:flex;align-items:center;gap:5px;margin-bottom:6%;font:600 1em/1 var(--f-mark)}
.ag-top img{width:auto;height:1.2em}
.ag-k{margin:0;color:var(--on-dark-2);font-size:.9em}
.ag-status{margin:0;font:600 1.75em/1.05 var(--f-display);letter-spacing:-.02em;color:var(--paper)}
.ag-screen .ag-steps{font-size:.72em}
.ag-rem{margin:auto 0 0;padding:6% 7%;border-radius:.8em;background:rgba(251,250,247,.06);font-size:.9em;color:var(--on-dark)}
.ag-rem b{display:block;color:var(--gold-l)}
.ag-sample{position:absolute;right:8%;top:9%;margin:0;padding:.1em .5em;border:1px solid var(--pearl-rule);border-radius:1em;font-size:.72em;color:var(--on-dark-2)}
/* 900 px and under: the mark sits above the words (water.css); the phone joins it, the same height, on the side with room:
   tablets left of the mark (the mark is on the right), phones right of it (the mark is on the reading line at the left). */
@media (max-width:900px){
  .app-glimpse{--ph:calc(var(--mark-h) * .98);left:calc(var(--ll) - var(--pw) - 28px);top:var(--lt);transform:perspective(700px) rotateY(12deg)}
}
@media (max-width:560px){
  .app-glimpse{left:calc(var(--ll) + var(--lw) + 22px);transform:perspective(700px) rotateY(-12deg)}
}
@media (prefers-reduced-motion:reduce){.app-glimpse{transform:none}}

/* ---------- Round 6 (Jorge's notes, Sep 27): credentials in view, tax and bookkeeping first, a little more gold ---------- */
/* The three services are equal cards (Ivo, Sep 27): the three-column grid above. */
/* The form reads a touch more expensive: a thin champagne edge on top of the form, and the heading's hairline in gold. */
.start-form{position:relative;padding:var(--s6);border:1px solid var(--pearl-faint);background:linear-gradient(180deg,rgba(226,194,122,.045),rgba(226,194,122,0) 40%)}
.start-form::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--gold-l) 20%,var(--gold-hot) 50%,var(--gold-l) 80%,transparent)}
.start-hair{color:rgba(226,194,122,.45)}
@media (max-width:560px){.start-form{padding:var(--s5) var(--s4)}}

/* ---------- The mark, with more presence (Jorge: "a little simple"; Ivo picked the glow, Sep 27) ---------- */
/* The logo itself never changes (assets/mark.svg is exact). The blue glass throws a little of its color onto the marble and
   carries a soft halo, as a lit glass object would. Poster and live 3D alike (the filter sits on the slot). */
.hero-room .hero-mark{filter:drop-shadow(0 0 22px rgba(0,163,224,.38)) drop-shadow(0 0 70px rgba(0,163,224,.16))}
.hero-room .hero-mark::before{left:-34%;right:-34%;bottom:-5%;height:17%;background:radial-gradient(closest-side,rgba(0,163,224,.34),rgba(0,163,224,.1) 55%,transparent)}
/* Spanish page: the service pages are English for now, so each card carries a small EN tag (the link says so to screen readers). */
.svc4-en{display:inline-block;margin-left:8px;padding:2px 4px 1px;border:1px solid var(--pearl-rule);color:var(--on-dark-2);font:600 10px/1 var(--f-body);letter-spacing:.06em;vertical-align:.35em}
/* Spanish: "Presentada" is twice as long as "Filed", so the hero phone's progress labels step down a size to fit. */
html[lang="es"] .ag-screen .ag-steps{font-size:.6em;letter-spacing:-.01em}

/* ---------- The client portal on the web (Ivo, Sep 27): the words and the button left, a small browser window right showing
   the real sign-in page's shape in its own light colors, so it reads as "the page you'll see". ---------- */
.portal{padding-block:clamp(72px,8vw,128px)}
.portal h2{font-size:clamp(30px,2.6vw + 14px,56px);line-height:1.02;letter-spacing:-.04em;color:var(--paper)}
.portal-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:var(--s8);align-items:center}
.portal-lead{margin:var(--s4) 0 var(--s6);max-width:30em;color:var(--on-dark);font-size:var(--t-lead);line-height:1.55}
.portal-note{display:flex;align-items:center;gap:8px;margin-top:var(--s4);color:var(--on-dark-2);font-size:var(--t-small)}
.portal-note svg{flex:none;width:18px;height:18px;color:var(--gold-l)}
.portal-win{border-radius:14px;overflow:hidden;border:1px solid var(--pearl-rule);box-shadow:0 40px 80px -40px rgba(0,0,0,.9),0 0 70px -24px rgba(0,163,224,.25);transform:perspective(1200px) rotateY(-6deg);transform-origin:0 50%}
.pw-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#24282E;color:var(--on-dark-2);font-size:12px}
.pw-bar i{width:9px;height:9px;border-radius:50%;background:rgba(251,250,247,.18)}
.pw-bar span{margin-left:12px;padding:3px 12px;border-radius:999px;background:rgba(251,250,247,.07)}
.pw-body{display:grid;justify-items:center;gap:6px;padding:28px 44px 32px;background:radial-gradient(60% 40% at 50% 12%,rgba(0,163,224,.16),transparent 70%),linear-gradient(180deg,#FBFAF7,#F1EADF);color:#16191D}
.pw-body img{width:auto;height:40px;margin-bottom:6px;filter:drop-shadow(0 6px 10px rgba(0,113,159,.25))}
.pw-h{margin:0 0 8px;font:700 22px/1.1 var(--f-mark);letter-spacing:-.02em}
.pw-f{justify-self:stretch;margin:4px 0 0;font-size:12px;font-weight:600}
.pw-in{justify-self:stretch;height:30px;border:1px solid #DAD6CD;border-radius:10px;background:#fff}
.pw-btn{justify-self:stretch;margin-top:10px;padding:9px;border-radius:999px;background:#16191D;color:#FBFAF7;font-size:13px;font-weight:600;text-align:center}
@media (max-width:900px){.portal-row{grid-template-columns:1fr;gap:var(--s7)}.portal-win{max-width:420px;transform:none}}
@media (prefers-reduced-motion:reduce){.portal-win{transform:none}}

/* ---------- The hero's keyword line, trust chip and two doors (ZT-384, Ivo, Oct 2) ----------
   The keyword line is the H1's first span (what we do and where, for search), set small in gold above the big line; the
   big line comes down a step on desktop so the doors fit on the first screen. The EA chip sits in the button row, the two
   doors under the micro line: frosted black glass cards (site.css), one link each, nothing that moves on its own. */
.hero h1 .h1-kw{max-width:none;margin-bottom:var(--s4);color:var(--gold-l);font:600 var(--t-small)/1.4 var(--f-body);letter-spacing:.01em;word-spacing:normal;text-wrap:balance}
@media (min-width:901px){.hero-room h1{max-width:none;font-size:clamp(56px,3.2vw + 28px,84px)}}
.hero-ea{display:inline-flex;align-items:center;gap:8px;min-height:36px;margin:0;padding:0 14px 0 10px;border:1px solid rgba(226,194,122,.34);border-radius:999px;background:rgba(22,25,29,.5);color:var(--paper);font-size:var(--t-cap);font-weight:600;line-height:1.25}
.hero-ea-i{flex:none;width:16px;height:16px;color:var(--gold-l)}
.hero-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);max-width:640px;margin:var(--s5) 0 0;padding:0;list-style:none}
.hero-door{display:flex;align-items:center;gap:14px;height:100%;min-height:84px;padding:12px 16px 12px 12px;color:var(--paper);text-decoration:none;transition:border-color var(--dur-ui) var(--ease-out)}
.hero-door:hover{border-color:rgba(226,194,122,.42)}
.hd-thumb{position:relative;flex:none;width:64px;height:60px;overflow:hidden;border-radius:12px}
.hd-tax{display:grid;place-items:center;background:radial-gradient(closest-side,rgba(251,250,247,.14),rgba(251,250,247,.03))}
.hd-tax img{width:58px;height:auto}
.hd-text{display:grid;gap:3px;min-width:0}
.hd-t{font-size:var(--t-body);font-weight:600;line-height:1.25}
.hd-l{color:var(--on-dark);font-size:var(--t-cap);line-height:1.35}
.hd-arrow{flex:none;width:16px;height:16px;margin-left:auto;color:var(--gold-l);transition:transform var(--dur-ui) var(--ease-out)}
.hero-door:hover .hd-arrow{transform:translateX(3px)}
/* The tiny website: a cream page (nav, photo, two lines) with a mint new-lead dot at its corner. */
.hd-web{background:rgba(251,250,247,.06)}
.hd-site{position:absolute;inset:8px 8px 6px;display:grid;grid-template-rows:5px 1fr 3px 3px;gap:3px;padding:5px;border-radius:6px;background:#F6F1E8}
.hd-site i{display:block;border-radius:2px;background:#D9D2C5}
.hd-site .hd-nav{width:55%;background:#A84A16}
.hd-site .hd-photo{border-radius:3px;background:linear-gradient(135deg,#2F4A5C,#4C6B7A)}
.hd-site .hd-short{width:60%}
.hd-lead{position:absolute;right:4px;top:4px;width:12px;height:12px;border:2px solid var(--night);border-radius:50%;background:var(--mint)}
@media (max-width:900px){.hero-doors{max-width:none}}

/* ---------- Three services with live examples (ZT-394, Ivo, Oct 3) ----------
   Tax, Bookkeeping, Growth: glass cards, an example of the work in the top half (ServicePreview, all in cqw so the copy in
   the lens lines up), the name, one benefit line, a foot line with the arrow. The name's link stretches over the card; the
   example's switch (a button over the stage) sits above it. Desktop: hover or keyboard focus shows the second state and
   lifts the example a little out of the glass. Phones: still, a tap on the example switches. */
.svc5-card{position:relative;gap:0;min-height:0;padding:10px 10px var(--s5)}
.svc5-stage{position:relative;aspect-ratio:16/10;overflow:hidden;margin-bottom:var(--s5);border:1px solid rgba(251,250,247,.08);border-radius:13px;background:radial-gradient(120% 90% at 20% 0%,rgba(0,163,224,.12),transparent 60%),rgba(9,11,14,.5);container-type:inline-size}
.svc5-card .svc4-n{margin:0 12px}
.svc5-card .svc4-l{margin:6px 12px 0;color:var(--on-dark);font-size:var(--t-small);line-height:1.45}
.svc5-foot{display:flex;align-items:center;gap:8px;margin:var(--s4) 12px 0;padding-top:var(--s3);border-top:1px solid rgba(251,250,247,.1);color:var(--on-dark-2);font-size:var(--t-cap);line-height:1.35}
.svc5-arrow{flex:none;width:16px;height:16px;margin-left:auto;color:var(--gold-l);transition:transform var(--dur-ui) var(--ease-out)}
.svc5-link{color:var(--paper);text-decoration:none}
.svc5-link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.svc5-link:focus-visible{outline:none}
.svc5-card:has(.svc5-link:focus-visible){outline:2px solid var(--mint);outline-offset:3px}
.svc5-card:hover .svc5-arrow,.svc5-card:has(.svc5-link:focus-visible) .svc5-arrow{transform:translateX(3px)}
.svc5-ex{position:absolute;left:8px;top:8px;z-index:3;padding:2px 8px;border:1px solid rgba(251,250,247,.22);border-radius:99px;background:rgba(9,11,14,.88);color:var(--paper);font:600 11px/1.4 var(--f-body);letter-spacing:.02em}
/* The switch: the whole example on touch screens; on desktop it lets the pointer through to the card's link (keyboard
   users can still reach and press it). */
.svc5-flip{position:absolute;inset:0;z-index:2;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.svc5-flip:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;border-radius:13px}
.svc5-tap{display:none;position:absolute;right:8px;bottom:8px;padding:3px 9px;border:1px solid rgba(251,250,247,.22);border-radius:99px;background:rgba(9,11,14,.88);color:var(--paper);font:600 11px/1.4 var(--f-body)}
@media (hover:hover){.svc5-flip{pointer-events:none}}
@media (hover:none){.svc5-tap{display:block}}

/* The example (100cqw wide, 62.5cqw tall) and its rise. */
.svc5-view{position:absolute;inset:0;display:block;transition:transform .35s var(--ease-out),filter .35s var(--ease-out)}
@media (hover:hover){
  .svc5-card:hover .svc5-stage>.svc5-view{transform:translateY(-2.2cqw) scale(1.02);filter:drop-shadow(0 3cqw 4cqw rgba(0,0,0,.45))}
}
.svc5-card:has(.svc5-link:focus-visible) .svc5-stage>.svc5-view{transform:translateY(-2.2cqw) scale(1.02)}
/* The lens: a round glass over part of the example, showing it 1.7x over the field's marks. Its copy is placed so the
   point under the lens's centre stays put (cqw, against the stage). */
.svc5-lens{position:absolute;left:calc((var(--cx) - var(--d) / 2) * 1cqw);top:calc((var(--cy) - var(--d) / 2) * 1cqw);z-index:1;width:calc(var(--d) * 1cqw);height:calc(var(--d) * 1cqw);overflow:hidden;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:url(/nl/field/field-tile-lens.png) 0 0/32cqw 32cqw,rgba(14,17,21,.9);box-shadow:inset 0 1px 1px rgba(255,255,255,.5),inset 0 -6px 12px -6px rgba(0,0,0,.6),0 0 0 3px rgba(255,255,255,.06),0 10px 22px -10px rgba(0,0,0,.8);pointer-events:none}
.svc5-lens::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.28),rgba(255,255,255,0) 38%),radial-gradient(circle at 50% 50%,transparent 62%,rgba(0,163,224,.16) 86%,rgba(212,165,60,.14) 100%)}
.svc5-lens-in{position:absolute;left:calc((var(--cx) - var(--d) / 2) * -1cqw);top:calc((var(--cy) - var(--d) / 2) * -1cqw);width:100cqw;height:62.5cqw;transform:scale(1.7);transform-origin:calc(var(--cx) * 1cqw) calc(var(--cy) * 1cqw)}

/* Tax: a 1040 over an 1120-S, paper on the night; the 1040 slides up to show the 1120-S. */
.tx-doc{position:absolute;display:grid;align-content:start;gap:1.6cqw;width:52cqw;height:60cqw;padding:3.2cqw 3.4cqw;border-radius:1cqw;background:#F6F1E8;color:#2A2F35;box-shadow:0 1.2cqw 3cqw -1cqw rgba(0,0,0,.7);transition:transform .45s var(--ease-out),opacity .45s var(--ease-out)}
.tx-s{left:40cqw;top:9cqw;transform:rotate(3deg)}
.tx-i{left:9cqw;top:6cqw;transform:rotate(-2.5deg)}
.tx-h{display:flex;align-items:baseline;gap:1.4cqw;padding-bottom:1.4cqw;border-bottom:.35cqw solid #2A2F35;font-family:var(--f-body)}
.tx-h small{font-size:2.6cqw;font-weight:500}
.tx-h b{font-size:5.2cqw;font-weight:700;letter-spacing:-.02em}
.tx-r{display:flex;align-items:baseline;gap:1.2cqw;padding-bottom:1cqw;border-bottom:.2cqw solid rgba(42,47,53,.18);font:500 2.55cqw/1.2 var(--f-body)}
.tx-r i{flex:1;min-width:0;overflow:hidden;font-style:normal;white-space:nowrap;text-overflow:ellipsis}
.tx-r b{font-weight:600;font-variant-numeric:tabular-nums}
.tx-r u{flex:0 0 40%;height:2.4cqw;border-bottom:.25cqw solid rgba(42,47,53,.45);text-decoration:none}
.svc5-card[data-alt] .tx-i{transform:translate(-6cqw,-48cqw) rotate(-6deg);opacity:.5}
.svc5-card[data-alt] .tx-s{transform:translate(-16cqw,-4cqw) rotate(0)}
@media (hover:hover){
  .svc5-card:hover .tx-i{transform:translate(-6cqw,-48cqw) rotate(-6deg);opacity:.5}
  .svc5-card:hover .tx-s{transform:translate(-16cqw,-4cqw) rotate(0)}
}
.svc5-card:has(.svc5-link:focus-visible) .tx-i{transform:translate(-6cqw,-48cqw) rotate(-6deg);opacity:.5}
.svc5-card:has(.svc5-link:focus-visible) .tx-s{transform:translate(-16cqw,-4cqw) rotate(0)}

/* Bookkeeping: the month's books in the client app's light colours; then the same month as a three-line P&L. */
.bk-panel{position:absolute;left:8cqw;right:8cqw;top:12cqw;bottom:-4cqw;padding:4cqw 4.4cqw;border-radius:2.4cqw;background:linear-gradient(180deg,#FBFAF7,#F1EADF);color:#16191D;box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.8)}
.bk-top{display:flex;align-items:center;justify-content:space-between;gap:2cqw;font:600 3.6cqw/1.2 var(--f-body)}
.bk-chip{padding:.7cqw 2cqw;border-radius:99px;background:rgba(46,230,166,.22);color:#0B5E43;font:600 2.7cqw/1.2 var(--f-body);font-style:normal;white-space:nowrap}
.bk-a,.bk-b{position:absolute;left:4.4cqw;right:4.4cqw;top:12cqw;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.bk-a{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;align-items:end}
.bk-ks{display:grid;gap:1.6cqw}
.bk-k{display:grid;gap:.3cqw}
.bk-k i{color:#5E574B;font:500 2.5cqw/1.2 var(--f-body);font-style:normal}
.bk-k b{font:600 3.8cqw/1.1 var(--f-body);font-variant-numeric:tabular-nums}
.bk-net b{color:#0B7A55}
.bk-bars{display:flex;align-items:flex-end;justify-content:space-between;height:22cqw;padding-bottom:.4cqw;border-bottom:.25cqw solid rgba(22,25,29,.25)}
.bk-bar{display:flex;align-items:flex-end;gap:.5cqw;height:100%}
.bk-bar i{width:2cqw;height:calc(var(--h) * 100%);border-radius:.5cqw .5cqw 0 0;background:#1F9AD4}
.bk-bar i+i{background:#D4A53C}
.bk-b{display:grid;gap:2.4cqw;opacity:0;transform:translateY(3cqw)}
.bk-line{display:flex;justify-content:space-between;gap:3cqw;padding-bottom:1.6cqw;border-bottom:.2cqw solid rgba(22,25,29,.16);font:500 3.4cqw/1.2 var(--f-body)}
.bk-line i{font-style:normal;color:#3A3F45}
.bk-line b{font-weight:600;font-variant-numeric:tabular-nums}
.bk-total{border-bottom:.5cqw double rgba(22,25,29,.6)}
.bk-total b{color:#0B7A55}
.svc5-card[data-alt] .bk-a{opacity:0;transform:translateY(-3cqw)}
.svc5-card[data-alt] .bk-b{opacity:1;transform:none}
@media (hover:hover){
  .svc5-card:hover .bk-a{opacity:0;transform:translateY(-3cqw)}
  .svc5-card:hover .bk-b{opacity:1;transform:none}
}
.svc5-card:has(.svc5-link:focus-visible) .bk-a{opacity:0}
.svc5-card:has(.svc5-link:focus-visible) .bk-b{opacity:1;transform:none}

/* In the P&L view the lens moves over the net profit figure (the !important beats the card's inline lens position). */
.svc5-card[data-svc="books"][data-alt] .svc5-lens,.svc5-card[data-svc="books"]:has(.svc5-link:focus-visible) .svc5-lens{--cx:82!important;--cy:42!important}
@media (hover:hover){.svc5-card[data-svc="books"]:hover .svc5-lens{--cx:82!important;--cy:42!important}}

/* Growth: the Zolt Growth Score dial and the leads line on a glass panel, a phone with a site behind it; then the phone
   comes forward. */
.gr-panel{position:absolute;left:6cqw;top:8cqw;width:50cqw;height:48cqw;z-index:1;display:grid;justify-items:center;align-content:center;gap:1.6cqw;border:1px solid rgba(251,250,247,.16);border-radius:3cqw;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01)),rgba(20,24,29,.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2cqw 5cqw -2cqw rgba(0,0,0,.8);transition:transform .45s var(--ease-out)}
.gr-dial{position:relative;display:grid;place-items:center;width:24cqw;height:24cqw}
.gr-dial svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.gr-dial circle{fill:none;stroke-width:7;stroke-linecap:round}
.gr-track{stroke:rgba(251,250,247,.1)}
.gr-arc{stroke:#2EE6A6;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--score,.82) * 100)}
.gr-dial b{color:var(--paper);font:600 7.4cqw/1 var(--f-body);font-variant-numeric:tabular-nums}
.gr-k{color:var(--on-dark);font:600 2.5cqw/1.2 var(--f-body)}
.gr-spark{display:flex;align-items:center;gap:1.6cqw;width:36cqw;color:var(--on-dark-2);font:500 2.3cqw/1 var(--f-body)}
.gr-spark svg{flex:1;height:5cqw;overflow:visible}
.gr-spark polyline{fill:none;stroke:#D4A53C;stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.gr-spark i{font-style:normal}
.gr-phone{position:absolute;left:62cqw;top:7cqw;width:27cqw;height:58cqw;padding:1.2cqw;border:1px solid rgba(251,250,247,.3);border-radius:4.5cqw;background:rgba(14,17,21,.9);box-shadow:0 2cqw 5cqw -2cqw rgba(0,0,0,.8);transition:transform .45s var(--ease-out)}
.gr-ps{display:grid;align-content:start;gap:1.6cqw;height:100%;padding:3cqw 2.4cqw;border-radius:3.4cqw;background:#F7F2EA}
.gr-ps i{display:block;height:1.6cqw;border-radius:1cqw;background:#D9D2C5}
.gr-ps .gr-logo{width:40%;background:#A84A16}
.gr-ps .gr-photo{height:13cqw;border-radius:1.6cqw;background:linear-gradient(135deg,#2F4A5C,#4C6B7A)}
.gr-ps .gr-short{width:60%}
.gr-ps b{justify-self:center;margin-top:1cqw;padding:1cqw 3cqw;border-radius:99px;background:#A84A16;color:#fff;font:700 2.2cqw/1.2 var(--f-body)}
.svc5-card[data-alt] .gr-phone{transform:translate(-20cqw,-3cqw) scale(1.08);z-index:2}
.svc5-card[data-alt] .gr-panel{transform:translateX(-3cqw) scale(.94)}
@media (hover:hover){
  .svc5-card:hover .gr-phone{transform:translate(-20cqw,-3cqw) scale(1.08);z-index:2}
  .svc5-card:hover .gr-panel{transform:translateX(-3cqw) scale(.94)}
}
.svc5-card:has(.svc5-link:focus-visible) .gr-phone{transform:translate(-20cqw,-3cqw) scale(1.08);z-index:2}

@media (max-width:860px){.svc5-list{max-width:560px}}
@media (max-width:560px){.svc5-card{flex-direction:column;flex-wrap:nowrap;align-items:stretch;padding:8px 8px var(--s5)}.svc5-card .svc4-l{flex-basis:auto}}
/* Reduced motion: the states still switch, nothing slides or lifts. */
@media (prefers-reduced-motion:reduce){
  .svc5-view,.tx-doc,.bk-a,.bk-b,.gr-panel,.gr-phone,.svc5-arrow{transition:none}
  .svc5-card:hover .svc5-stage>.svc5-view,.svc5-card:has(.svc5-link:focus-visible) .svc5-stage>.svc5-view{transform:none;filter:none}
}

/* ---------- "Prefer to type?" (ZT-394, Ivo, Oct 3) ----------
   The form's send button is the section's one call to action (mint glass, full width on phones); the left column
   reassures, with small gold marks, and offers the call as a quiet link. The form is one glass panel; its choices are glass
   tiles with a mint check when chosen, its fields dark glass with a mint focus ring, all at 4.5:1 or better. Scoped to
   #start so it outranks the paper tiles in site.css. */
.start-call{border-top:0;padding-top:0;margin-top:var(--s6)}
.start-points{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.start-points li{display:flex;align-items:center;gap:12px;color:var(--paper);font-size:var(--t-body);line-height:1.4}
.sp-i{flex:none;width:20px;height:20px;color:var(--gold-l)}
.start-talk{display:inline-block;padding-block:10px;margin-top:var(--s4);line-height:1.5;color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--pearl-rule);text-underline-offset:4px;transition:text-decoration-color var(--dur-ui) var(--ease-out)}
.start-talk:hover{text-decoration-color:var(--gold-l)}
.sp-arrow{display:inline-block;width:16px;height:16px;margin-left:8px;vertical-align:-2px;color:var(--gold-l);transition:transform var(--dur-ui) var(--ease-out)}
.start-talk:hover .sp-arrow{transform:translateX(3px)}
#start .start-form{border:1px solid rgba(251,250,247,.14);border-top-color:rgba(251,250,247,.26);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 30%),rgba(27,31,36,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 48px -26px rgba(0,0,0,.9)}
#start .start-form::before{content:none}
#start .sf-opt{border:1px solid rgba(251,250,247,.22);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.01));color:var(--paper);color-scheme:dark;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
#start .sf-opt:hover{border-color:rgba(251,250,247,.42);color:var(--paper);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
#start .sf-opt input{accent-color:var(--mint)}
#start .sf-opt:has(:checked){border-color:rgba(46,230,166,.8);background:linear-gradient(180deg,rgba(46,230,166,.14),rgba(46,230,166,.06));box-shadow:inset 0 0 0 1px rgba(46,230,166,.35);color:var(--paper)}
#start .sf-opt:has(:focus-visible){outline:2px solid var(--mint);outline-offset:2px}
#start .sf-set[data-invalid] .sf-opt{border-color:#F2B8A0;box-shadow:inset 0 0 0 1px #F2B8A0}
#start .sf-opts:not(.sf-opts-2) .sf-opt:last-child:nth-child(odd){grid-column:1/-1}
#start .start-form input:not([type="checkbox"]):not([type="radio"]),#start .start-form select{border:1px solid rgba(251,250,247,.24);border-radius:12px;background-color:rgba(255,255,255,.04)}
#start .start-form input:not([type="checkbox"]):not([type="radio"]):hover,#start .start-form select:hover{border-color:rgba(251,250,247,.42)}
#start .start-form input:not([type="checkbox"]):not([type="radio"]):focus,#start .start-form select:focus{border-color:rgba(46,230,166,.85);background-color:rgba(255,255,255,.06);outline:2px solid rgba(46,230,166,.55);outline-offset:2px}
#start .start-form input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]),#start .start-form select[aria-invalid="true"]{border-color:var(--paper);box-shadow:inset 0 0 0 1px var(--paper)}
#start .consent input{accent-color:var(--mint)}
#start .sf-send .btn{min-width:240px}
@media (max-width:560px){#start .sf-send .btn{width:100%;min-width:0}}
/* Stacked (tablets and phones): the reassurance and the quiet call link come right under the sub line, before the form. */
@media (max-width:1060px){#start .start-call{order:1;margin-top:var(--s5)}#start .start-form{order:2}}