:root{--bg:#F2FAFC;--surface:#FFFFFF;--primary:#067174;--primary-d:#055A5D;--on-primary:#FFFFFF;--text:#15343B;--text2:#526A70;--border:#B8DCE3;--tint:rgba(6,113,116,.09);--shadow:0 12px 28px rgba(16,42,48,.14);
--f-bg:#15343B;--f-text:#F2FAFC;--f-text2:#B8DCE3;--f-accent:#46B3A5;--f-line:rgba(184,220,227,.25);--f-field:rgba(255,255,255,.08);--nav-h:72px;
/* shared names mapped onto the palette */
--accent:var(--primary);--secondary:var(--primary-d);--muted:var(--text2);--glow:rgba(6,113,116,.18);--glow-2:rgba(6,113,116,.09)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:400 1rem/1.6 "Inter",system-ui,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
main{flex:1}
h1,h2,h3,h4{font-family:"Playfair Display",Georgia,serif;font-weight:700;line-height:1.2;margin:0 0 .5em;color:var(--text)}
h1{font-size:clamp(2rem,4vw,3rem)}
p{margin:0 0 1em;color:var(--text2)}
a{color:var(--primary)}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.container{width:min(1200px,100% - 48px);margin-inline:auto}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--primary);color:var(--on-primary);padding:10px 16px;border-radius:8px;z-index:200;text-decoration:none}
.skip:focus{top:12px}
.page-stub{padding:64px 0}

/* ---------- Navbar ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border)}
.nav-bar{display:flex;align-items:center;gap:24px;min-height:var(--nav-h)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);flex-shrink:0}
.brand svg{width:40px;height:40px;flex-shrink:0}
.brand-name{display:block;font:700 1.5rem/1 "Playfair Display",Georgia,serif;color:var(--text)}
.brand-tag{display:block;font-size:.875rem;line-height:1.2;color:var(--text2);margin-top:4px}
.nav-panel{flex:1;display:flex;justify-content:center}
.nav-menu{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.nav-menu>li{position:relative}
.nav-link{display:flex;align-items:center;gap:8px;padding:10px 14px;border:0;border-radius:8px;background:none;color:var(--text);font:500 1rem/1.2 "Inter",system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--primary);background:var(--tint)}
.chev{width:7px;height:7px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.has-sub.open .chev{transform:rotate(225deg);margin-top:3px}
.submenu{display:none;position:absolute;top:100%;inset-inline-start:0;min-width:210px;margin:0;padding:6px;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:var(--shadow)}
.has-sub:hover>.submenu,.has-sub:focus-within>.submenu,.has-sub.open>.submenu{display:block}
.submenu a{display:block;padding:10px 14px;border-radius:8px;color:var(--text);font-size:1rem;text-decoration:none;white-space:nowrap}
.submenu a:hover,.submenu a.active{background:var(--tint);color:var(--primary)}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
@media(min-width:1200px){.site-header .container{width:min(1360px,100% - 48px);padding-inline:10px}}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;min-width:42px;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:600 .875rem/1 "Inter",system-ui,sans-serif;cursor:pointer}
.icon-btn:hover{border-color:var(--primary);color:var(--primary)}
.icon-btn svg{width:20px;height:20px}
.sun{display:none}
.btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 22px;border:1.5px solid var(--primary);border-radius:10px;background:var(--primary);color:var(--on-primary);font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--primary-d);border-color:var(--primary-d)}
.hamburger{display:none;flex-direction:column;gap:4px}
.hamburger span{display:block;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .2s,opacity .2s}
.hamburger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hamburger[aria-expanded=true] span:nth-child(2){opacity:0}
.hamburger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.login-mob{display:none}

/* ---------- Footer ---------- */
.site-footer{background:var(--f-bg);color:var(--f-text2)}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1.6fr);gap:40px;padding:56px 0}
.site-footer h3{font:700 1.125rem/1.3 "Playfair Display",Georgia,serif;color:var(--f-text);margin:0 0 16px}
.site-footer p{color:var(--f-text2);font-size:1rem;margin:0 0 12px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a{color:var(--f-text2);text-decoration:none}
.site-footer a:hover{color:var(--f-accent);text-decoration:underline}
.site-footer .brand-name{color:var(--f-text)}
.site-footer .brand{margin-bottom:16px}
.site-footer .brand svg rect{fill:var(--f-accent)}
.site-footer .brand svg path{stroke:#102A30}
.footer-grid>*{min-width:0}
.news{display:flex;flex-wrap:wrap;gap:8px}
.news input{flex:1 1 150px;min-width:0;max-width:100%;height:44px;padding:0 14px;border:1px solid var(--f-line);border-radius:10px;background:var(--f-field);color:var(--f-text);font:400 1rem "Inter",system-ui,sans-serif}
.news input::placeholder{color:var(--f-text2)}
.news .btn{background:var(--f-accent);border-color:var(--f-accent);color:#102A30;height:44px;padding:0 18px}
.news .btn:hover{background:var(--f-text);border-color:var(--f-text)}
.news-msg{min-height:1.5em;margin:10px 0 0;font-size:.9375rem;color:var(--f-text2)}
.news-msg.ok{color:var(--f-accent)}
.news-msg.err{color:#FFB4A8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.footer-bottom{border-top:1px solid var(--f-line)}
.footer-bottom .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:20px 0}
.footer-bottom p{margin:0;font-size:.9375rem}
.footer-bottom ul{display:flex;gap:20px}
.footer-bottom li{margin:0}

/* Laptop (992-1199px): same full desktop navbar, only tighter so every item fits */
@media(max-width:1199px){
.brand-tag{display:none}
.nav-bar{gap:16px}
.nav-menu{gap:2px}
.nav-link{padding:10px}
}
/* Tablet and mobile (991px and below): hamburger menu */
@media(max-width:991px){
.hamburger{display:inline-flex}
.login-desk{display:none}
.nav-actions{margin-inline-start:auto}
.nav-panel{display:none;position:absolute;top:100%;inset-inline:0;flex-direction:column;align-items:stretch;justify-content:flex-start;background:var(--surface);border:1px solid var(--border);border-top:0;border-radius:0 0 14px 14px;box-shadow:var(--shadow);padding:8px 24px 20px;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
.nav-panel.open{display:flex}
.login-mob{display:flex;width:100%;margin:16px 0 0}
.nav-menu{flex-direction:column;gap:0;margin:0}
.nav-menu>li{border-bottom:1px solid var(--border)}
.nav-link{width:100%;justify-content:space-between;padding:14px 16px;border-radius:0}
.nav-link.active{border-inline-start:3px solid var(--accent);padding-inline-start:13px}
.has-sub:hover>.submenu,.has-sub:focus-within>.submenu{display:none}
.has-sub.open>.submenu{display:block;position:static;min-width:0;border:0;box-shadow:none;background:none;padding:0 0 4px;padding-inline-start:14px}
}
/* Footer: two columns on small laptops and tablets */
@media(max-width:1100px){
.footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px}
.footer-grid>:first-child{grid-column:1/-1}
}
@media(max-width:640px){
.container{width:min(1200px,100% - 32px)}
.footer-grid{grid-template-columns:minmax(0,1fr);padding:44px 0}
.footer-bottom .container{flex-direction:column;align-items:flex-start}
.nav-panel{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* Small phones (400px and below): keep the header on one line */
@media(max-width:400px){
.nav-bar{gap:8px}
.brand svg{width:34px;height:34px}
.brand-name{font-size:1.25rem}
.nav-actions{gap:6px}
.icon-btn{min-width:40px;height:40px;padding:0 9px}
}

/* =====================================================
   HOME 1 · SECTION 1 — Hero (merged from home.css)
   ===================================================== */
.hero{position:relative;overflow:hidden;padding:72px 0;background:var(--bg)}
/* soft glow behind the collage */
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-bg .orb{position:absolute;width:680px;height:680px;border-radius:50%;top:-200px;inset-inline-end:-180px;background:radial-gradient(circle,var(--glow) 0%,transparent 68%)}
.hero .container{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
/* small label above the headline */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--accent)}
/* headline: each line clips its own text so it can rise into view */
.hero h1{font-size:clamp(2.35rem,4.55vw,3.9rem);line-height:1.08;margin:0 0 24px}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.hero h1 .line>span{display:inline-block}
.hero h1 em{position:relative;font-style:normal;color:var(--accent)}
.hero h1 em::after{content:"";position:absolute;inset-inline:0;bottom:.02em;height:.1em;border-radius:4px;background:var(--accent);opacity:.28;transform-origin:left center}
[dir="rtl"] .hero h1 em::after{transform-origin:right center}
.lead{max-width:52ch;margin:0 0 32px;font-size:1rem;line-height:1.7}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:32px}
.btn-lg{height:50px;padding:0 26px;gap:10px;font-size:.9375rem}
.btn svg{width:18px;height:18px;flex-shrink:0}
.btn-outline{background:transparent;color:var(--accent)}
.btn-outline:hover{background:var(--accent);color:var(--on-primary);border-color:var(--accent)}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0;padding:0;list-style:none}
.hero-points li{display:flex;align-items:center;gap:8px;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.hero-points svg{width:18px;height:18px;color:var(--accent);flex-shrink:0}

/* image collage (desktop and tablet) */
.hero-visual{position:relative;width:100%;max-width:580px;margin-inline-start:auto;aspect-ratio:1/1.04}
.hero-visual img{width:100%;height:100%;object-fit:cover;display:block}
.arch-line{position:absolute;top:18px;inset-inline-start:calc(22% + 18px);width:58%;height:88%;border:2px solid var(--accent);border-radius:999px 999px 28px 28px;opacity:.35}
.arch{position:absolute;top:0;inset-inline-start:22%;width:58%;height:88%;overflow:hidden;border:8px solid var(--surface);border-radius:999px 999px 28px 28px;background:var(--surface);box-shadow:var(--shadow);z-index:1}
.arch img{border-radius:inherit}
.tile{position:absolute;top:10%;inset-inline-end:0;width:30%;aspect-ratio:3/4;overflow:hidden;border:6px solid var(--surface);border-radius:22px;box-shadow:var(--shadow);z-index:2}
.circle{position:absolute;bottom:0;inset-inline-start:2%;width:36%;aspect-ratio:1;overflow:hidden;border:8px solid var(--surface);border-radius:50%;box-shadow:var(--shadow);z-index:2}
/* floating info cards */
.float-card{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
.float-card p{margin:0;max-width:none}
.fc-title{color:var(--text);font:600 .9375rem/1.3 "Inter",system-ui,sans-serif}
.fc-sub{color:var(--muted);font-size:.875rem;line-height:1.4}
.status-card{top:16%;inset-inline-start:0}
.badge-card{bottom:5%;inset-inline-end:0}
.badge-card .fc-title{font-size:.875rem;line-height:1.4}
/* progress ring */
.ring{position:relative;width:56px;height:56px;flex-shrink:0}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:5}
.ring .ring-bg{stroke:var(--border)}
.ring .ring-fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:150.8;stroke-dashoffset:30.2}
.ring span{position:absolute;inset:0;display:grid;place-items:center;color:var(--text);font:700 .875rem/1 "Inter",system-ui,sans-serif}
.shield{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--glow-2);color:var(--accent);flex-shrink:0}
.shield svg{width:24px;height:24px}
/* stats bar */
.hero-stats{margin-top:56px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin:0;padding:0;list-style:none;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.stat{padding:28px 24px;text-align:center;border-inline-start:1px solid var(--border)}
.stat:first-child{border-inline-start:0}
.stat-num{display:block;color:var(--text);font:700 2.125rem/1.1 "Playfair Display",Georgia,serif}
.stat-num .suf{color:var(--accent)}
.stat-label{display:block;margin-top:6px;color:var(--muted);font-size:.9375rem;line-height:1.4}

@media(max-width:900px){
.hero{padding:48px 0}
.hero-grid{grid-template-columns:1fr;gap:48px}
.hero-visual{margin-inline:auto}
.hero-stats{margin-top:48px}
.stats{grid-template-columns:repeat(2,1fr)}
.stat:nth-child(odd){border-inline-start:0}
.stat:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(min-width:561px) and (max-width:900px){
.hero-copy{text-align:center}
.hero-copy .eyebrow{display:flex;width:fit-content;margin-inline:auto;margin-bottom:24px}
.hero-copy .lead{margin-inline:auto;margin-bottom:32px}
.hero-cta,.hero-points{justify-content:center}
}
/* phones: the collage becomes a clean stack, nothing overlaps */
@media(max-width:560px){
.hero-visual{display:grid;grid-template-columns:minmax(120px,38%) minmax(0,1fr);gap:16px;align-items:center;aspect-ratio:auto}
.arch{position:static;order:1;grid-column:1/-1;width:100%;height:auto;aspect-ratio:1/1.05}
.arch-line,.tile{display:none}
.status-card{position:static;order:2;grid-column:1/-1}
.circle{position:static;order:3;width:100%}
.badge-card{position:static;order:4}
.badge-card{min-width:0;padding:12px;gap:10px}
.badge-card>div{min-width:0}
.badge-card .fc-title{overflow-wrap:anywhere}
.stat{padding:22px 12px}
.stat-num{font-size:1.75rem}
.btn-lg{flex:1 1 100%}
}
/* hero motion: one load sequence + gentle ambient loops (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes rise{from{transform:translateY(105%)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
@keyframes pop{from{opacity:0;transform:scale(.85)}}
@keyframes unveil{from{clip-path:inset(100% 0 0 0);transform:scale(1.18)}}
@keyframes sweep{from{transform:scaleX(0)}}
@keyframes ring{from{stroke-dashoffset:150.8}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}
@keyframes ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}to{box-shadow:0 0 0 10px transparent}}
.hero-bg .orb{animation:drift 14s ease-in-out infinite alternate}
.pulse{animation:ping 1.8s ease-out infinite}
.reveal{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.hero h1 .line>span{animation:rise .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.hero h1 em::after{animation:sweep .9s cubic-bezier(.2,.7,.2,1) 1.1s backwards}
.arch img{animation:unveil 1.3s cubic-bezier(.2,.7,.2,1) .2s backwards}
.arch-line{animation:fadeUp 1s ease .9s backwards}
.tile{animation:pop .8s cubic-bezier(.2,.7,.2,1) .7s backwards}
.circle{animation:pop .8s cubic-bezier(.2,.7,.2,1) .85s backwards}
.status-card{animation:pop .8s cubic-bezier(.2,.7,.2,1) 1s backwards,float 6s ease-in-out 1.8s infinite}
.badge-card{animation:pop .8s cubic-bezier(.2,.7,.2,1) 1.15s backwards,float 7s ease-in-out 2s infinite reverse}
.ring .ring-fg{animation:ring 1.6s cubic-bezier(.2,.7,.2,1) 1.2s backwards}
}
@media(prefers-reduced-motion:no-preference) and (max-width:560px){
/* cards stay put on phones so they can never touch the images */
.status-card,.badge-card{animation:pop .8s cubic-bezier(.2,.7,.2,1) 1s backwards}
}

/* =====================================================
   HOME 1 · SECTION 2 — Services showcase
   Tabs on the left, one detail panel on the right.
   ===================================================== */
.services{padding:72px 0;background:var(--surface);border-block:1px solid var(--border)}
/* heading row */
.services-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.services-head h2{margin:0 0 8px;font-size:clamp(1.75rem,3vw,2.375rem)}
.services-head p{margin:0;max-width:56ch;font-size:1rem}
/* two columns: tab list + panel */
.services-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:stretch}
.svc-tabs{display:flex;flex-direction:column;gap:12px}
.svc-item{display:flex;flex:1}
.svc-tab{position:relative;display:flex;align-items:center;gap:16px;width:100%;padding:16px 20px 19px;overflow:hidden;text-align:start;color:var(--text);font:inherit;cursor:pointer;background:var(--bg);border:1px solid var(--border);border-radius:16px;transition:border-color .25s,background .25s}
.svc-tab:hover{border-color:var(--accent)}
.svc-tab[aria-selected="true"]{border-color:var(--accent);background:var(--glow-2)}
.svc-ico{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;color:var(--accent);background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:background .25s,color .25s,border-color .25s}
.svc-ico svg{width:24px;height:24px}
.svc-tab[aria-selected="true"] .svc-ico{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.svc-name{display:block;font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif}
.svc-sub{display:block;margin-top:2px;color:var(--muted);font-size:.9375rem;line-height:1.4}
/* progress bar along the bottom edge of the active tab */
.svc-bar{position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--border)}
.svc-bar i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .svc-bar i{transform-origin:right center}
.svc-tab[aria-selected="true"] .svc-bar i{transform:scaleX(1)}
/* panels share one grid cell so the box never changes height */
.svc-panels{display:grid;min-width:0}
.svc-panel{grid-area:1/1;display:flex;flex-direction:column;gap:20px;padding:24px;visibility:hidden;opacity:0;background:var(--bg);border:1px solid var(--border);border-radius:20px;transition:opacity .4s,visibility .4s}
.svc-panel.is-active{visibility:visible;opacity:1}
/* image with its caption BELOW it */
.svc-fig{margin:0}
.svc-fig img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:14px}
@media(min-width:901px){.svc-fig img[src*="accountant-signing-tax-documents"]{object-position:center 20%}}
.svc-fig figcaption{margin-top:12px;color:var(--muted);font-size:.9375rem;line-height:1.5}
.svc-body h3{margin:0 0 8px;font-size:1.5rem}
.svc-body p{margin:0;max-width:none;font-size:1rem}
/* feature list */
.svc-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;margin:0;padding:0;list-style:none}
.svc-feat li{display:flex;gap:10px;color:var(--text);font-size:.9375rem;line-height:1.45}
.svc-feat svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--accent)}
/* turnaround and price */
.svc-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.svc-meta div{padding:14px 18px}
.svc-meta div+div{border-inline-start:1px solid var(--border)}
.svc-meta dt{color:var(--muted);font-size:.9375rem;line-height:1.4}
.svc-meta dd{margin:2px 0 0;color:var(--text);font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif}
.svc-panel .btn{align-self:flex-start;margin-top:auto}

@media(max-width:900px){
.services{padding:48px 0}
.services-head{margin-bottom:32px}
.services-grid{grid-template-columns:minmax(0,1fr);gap:24px}
/* tabs become compact pills above the panel */
.svc-tabs{flex-direction:row;flex-wrap:wrap;gap:10px}
.svc-item{flex:0 1 auto;min-width:0;max-width:100%}
.svc-tab{width:auto;max-width:100%;gap:10px;padding:10px 16px 13px;border-radius:12px}
.svc-ico{width:34px;height:34px;border-radius:10px}
.svc-ico svg{width:20px;height:20px}
.svc-sub{display:none}
}
@media(max-width:560px){
.svc-tabs{flex-direction:column;flex-wrap:nowrap}
.svc-item{flex:0 0 68px;width:100%;max-width:100%}
.svc-tab{width:100%;height:68px;min-height:68px;box-sizing:border-box}
.svc-tab>span:nth-child(2){min-width:0}
.svc-panel{padding:20px}
.svc-feat{grid-template-columns:minmax(0,1fr)}
.svc-panel .btn{align-self:stretch}
}
/* services motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes svc-fill{from{transform:scaleX(0)}}
@keyframes svc-unveil{from{clip-path:inset(0 0 100% 0);transform:scale(1.06)}}
@keyframes svc-in{from{opacity:0;transform:translateY(14px)}}
/* scroll reveal: items start hidden only when JavaScript is running */
.js .services .svc-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .services.in .svc-reveal{opacity:1;transform:none}
/* autoplay: the bar fills, then the next tab opens (see index.js) */
.services.in .svc-tab[aria-selected="true"] .svc-bar i{animation:svc-fill 7s linear forwards}
.services:hover .svc-bar i,.services:focus-within .svc-bar i{animation-play-state:paused}
/* each time a panel opens: image unveils, text follows */
.svc-panel.is-active .svc-fig img{animation:svc-unveil .9s cubic-bezier(.2,.7,.2,1)}
.svc-panel.is-active .svc-body,.svc-panel.is-active .svc-feat,.svc-panel.is-active .svc-meta,.svc-panel.is-active .btn{animation:svc-in .6s cubic-bezier(.2,.7,.2,1) backwards}
.svc-panel.is-active .svc-body{animation-delay:.15s}
.svc-panel.is-active .svc-feat{animation-delay:.25s}
.svc-panel.is-active .svc-meta{animation-delay:.35s}
.svc-panel.is-active .btn{animation-delay:.45s}
}

/* =====================================================
   HOME 1 · SECTION 3 — Filing journey
   Four steps joined by a progress line. When the section
   scrolls into view the line fills, each step lights up in
   turn, and a small live preview inside the card plays.
   ===================================================== */
.journey{padding:72px 0;background:var(--bg)}
/* heading row: title left, replay + call to action right */
.jr-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.jr-head h2{margin:0 0 8px;font-size:clamp(1.75rem,3vw,2.375rem)}
.jr-head p{margin:0;max-width:56ch;font-size:1rem}
.jr-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.jr-replay{gap:8px}
.jr-replay svg{width:18px;height:18px}
.jr-actions .btn svg{width:18px;height:18px;margin-inline-start:10px}

/* four equal columns, one step per column */
.jr-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.jr-step{display:flex;flex-direction:column;min-width:0}
/* top row: numbered node, then the line that leads to the next node */
.jr-top{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.jr-node{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border:2px solid var(--accent);border-radius:50%;background:var(--accent);color:var(--on-primary);font:700 1.0625rem/1 "Inter",system-ui,sans-serif}
.jr-link{flex:1;height:4px;overflow:hidden;border-radius:4px;background:var(--border)}
.jr-link i{display:block;height:100%;background:var(--accent);transform-origin:left center}
[dir="rtl"] .jr-link i{transform-origin:right center}

/* step card: icon + time tag, copy, live preview (preview stretches so every card ends level) */
.jr-card{flex:1;display:flex;flex-direction:column;gap:16px;padding:22px;background:var(--surface);border:1px solid var(--border);border-radius:20px}
.jr-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jr-ico{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:var(--accent);background:var(--glow-2);border-radius:12px}
.jr-ico svg{width:22px;height:22px}
.jr-tag{padding:4px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font:500 .875rem/1.3 "Inter",system-ui,sans-serif;white-space:nowrap}
.jr-card h3{margin:0 0 6px;font-size:1.25rem}
.jr-card p{margin:0;font-size:.9375rem;line-height:1.55}

/* live preview box */
.jr-pv{flex:1;display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0;margin:0;padding:16px;list-style:none;background:var(--bg);border:1px solid var(--border);border-radius:14px}
/* step 1: files uploading */
.jr-file{display:flex;flex-direction:column;gap:6px}
.jr-fname{display:flex;align-items:center;gap:8px;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.jr-fname svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.jr-bar{height:6px;overflow:hidden;border-radius:6px;background:var(--border)}
.jr-bar i{display:block;height:100%;background:var(--accent);transform-origin:left center}
[dir="rtl"] .jr-bar i,[dir="rtl"] .jr-segs i{transform-origin:right center}
/* step 2: review checklist */
.jr-check{display:flex;align-items:center;gap:10px;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.jr-tick{display:grid;place-items:center;width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--accent);color:var(--on-primary)}
.jr-tick svg{width:14px;height:14px}
/* step 3: filed seal (ring and tick draw themselves) */
.jr-done{display:flex;align-items:center;gap:12px}
.jr-seal{width:48px;height:48px;flex-shrink:0;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.jr-seal .track{stroke:var(--border)}
.jr-seal .draw{stroke:var(--accent);stroke-dasharray:1;stroke-dashoffset:0}
.jr-done strong{display:block;color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif}
.jr-done span{display:block;color:var(--muted);font-size:.875rem;line-height:1.4}
/* small pill used in steps 3 and 4 */
.jr-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;max-width:100%;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif;white-space:normal;overflow-wrap:anywhere}
.jr-chip svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
/* step 4: status segments */
.jr-stat{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.jr-stat b{color:var(--accent);font-weight:600}
.jr-segs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.jr-segs i{display:block;height:6px;border-radius:6px;background:var(--accent);transform-origin:left center}

/* tablet and mobile: the journey runs top to bottom, line on the side */
@media(max-width:1000px){
.journey{padding:48px 0}
.jr-head{margin-bottom:32px}
.jr-steps{grid-template-columns:minmax(0,1fr);gap:0}
.jr-step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:16px}
.jr-top{flex-direction:column;margin-bottom:0}
.jr-link{flex:1;width:4px;height:auto;margin-block:8px}
.jr-link i{transform-origin:top center}
.jr-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"top pv" "copy pv";grid-template-rows:auto 1fr;gap:16px 24px;margin-bottom:20px}
.jr-step:last-child .jr-card{margin-bottom:0}
.jr-card-top{grid-area:top;justify-content:flex-start}
.jr-copy{grid-area:copy}
.jr-pv{grid-area:pv}
}
@media(max-width:640px){
.jr-step{grid-template-columns:40px minmax(0,1fr);column-gap:12px}
.jr-node{width:40px;height:40px;font-size:1rem}
.jr-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "copy" "pv";grid-template-rows:auto;gap:14px;padding:18px}
.jr-card-top{justify-content:space-between}
.jr-actions{width:100%}
.jr-actions .btn{flex:1}
}
/* visitors who prefer reduced motion see the finished journey and no replay button */
@media(prefers-reduced-motion:reduce){.jr-replay{display:none}}

/* journey motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes jr-node{to{background:var(--accent);border-color:var(--accent);color:var(--on-primary)}}
@keyframes jr-ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}to{box-shadow:0 0 0 14px transparent}}
@keyframes jr-fill-x{to{transform:scaleX(1)}}
@keyframes jr-fill-y{to{transform:scaleY(1)}}
@keyframes jr-flash{0%{border-color:var(--border);box-shadow:0 0 0 0 transparent}35%{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow-2)}100%{border-color:var(--border);box-shadow:0 0 0 0 transparent}}
@keyframes jr-pop{to{transform:scale(1)}}
@keyframes jr-draw{to{stroke-dashoffset:0}}
@keyframes jr-chip{to{opacity:1;transform:none}}
/* scroll reveal for the heading and the four steps (only when JavaScript is running) */
.js .journey .jr-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .journey.in .jr-reveal{opacity:1;transform:none}
/* starting positions (before the journey plays) */
.js .journey .jr-node{background:var(--surface);border-color:var(--border);color:var(--muted)}
.js .journey .jr-link i,.js .journey .jr-bar i,.js .journey .jr-segs i{transform:scaleX(0)}
.js .journey .jr-tick{transform:scale(0)}
.js .journey .jr-seal .draw{stroke-dashoffset:1}
.js .journey .jr-chip{opacity:0;transform:translateY(8px)}
/* playback: step n starts at n x 1.4s; --k staggers items inside a preview */
.js .journey.play .jr-node{animation:jr-node .35s ease calc(var(--i)*1.4s) forwards,jr-ping .9s ease-out calc(var(--i)*1.4s)}
.js .journey.play .jr-link i{animation:jr-fill-x 1s ease-in-out calc(var(--i)*1.4s + .35s) forwards}
.js .journey.play .jr-card{animation:jr-flash 1.2s ease calc(var(--i)*1.4s)}
.js .journey.play .jr-bar i,.js .journey.play .jr-segs i{animation:jr-fill-x .9s cubic-bezier(.2,.7,.2,1) calc(var(--i)*1.4s + .3s + var(--k,0)*.2s) forwards}
.js .journey.play .jr-tick{animation:jr-pop .4s cubic-bezier(.2,.9,.3,1.3) calc(var(--i)*1.4s + .3s + var(--k,0)*.25s) forwards}
.js .journey.play .jr-seal .draw{animation:jr-draw .8s ease calc(var(--i)*1.4s + .3s + var(--k,0)*.4s) forwards}
.js .journey.play .jr-chip{animation:jr-chip .5s ease calc(var(--i)*1.4s + .3s + var(--k,0)*.2s) forwards}
}
/* on tablet and mobile the connecting line fills downwards */
@media(prefers-reduced-motion:no-preference) and (max-width:1000px){
.js .journey .jr-link i{transform:scaleY(0)}
.js .journey.play .jr-link i{animation-name:jr-fill-y}
}

/* =====================================================
   HOME 1 · SECTION 4 — Client dashboard preview
   Copy and three feature buttons on the left, a live-looking
   dashboard window on the right. Hovering or tapping a feature
   highlights the matching tile inside the window.
   ===================================================== */
.dash{padding:72px 0;background:var(--glow-2);border-block:1px solid var(--border);overflow-x:clip}
.dash-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center}
/* left column: label, headline, short copy, features, buttons */
.dash .eyebrow{background:var(--bg)}
.dash-copy h2{margin:0 0 12px;font-size:clamp(1.75rem,3vw,2.375rem)}
.dash-copy>p:not(.eyebrow){max-width:52ch;margin:0 0 24px;font-size:1rem}
.db-feats{display:flex;flex-direction:column;gap:12px;margin:0 0 28px;padding:0;list-style:none}
.db-feat{display:flex;align-items:center;gap:16px;width:100%;padding:14px 16px;text-align:start;color:var(--text);font:inherit;cursor:pointer;background:var(--bg);border:1px solid var(--border);border-radius:14px;transition:border-color .25s,background .25s}
.db-feat:hover,.db-feat.is-on{border-color:var(--accent);background:var(--glow-2)}
.db-ico{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:var(--accent);background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:background .25s,color .25s,border-color .25s}
.db-ico svg{width:22px;height:22px}
.db-feat:hover .db-ico,.db-feat.is-on .db-ico{background:var(--accent);border-color:var(--accent);color:var(--on-primary)}
.db-feat strong{display:block;font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif}
.db-feat span span{display:block;margin-top:2px;color:var(--muted);font-size:.9375rem;line-height:1.4}
.dash-cta{display:flex;flex-wrap:wrap;gap:14px}

/* right column: the dashboard window */
.db-mock{min-width:0;background:var(--bg);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
/* window bar: dots, title, live label */
.db-bar{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.db-dots{display:flex;gap:6px;flex-shrink:0}
.db-dots i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.db-dots i:first-child{background:var(--accent)}
.db-title{flex:1;min-width:0;overflow:hidden;color:var(--text);font:600 .875rem/1.3 "Inter",system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.db-live{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;color:var(--muted);font:500 .875rem/1 "Inter",system-ui,sans-serif}
/* tiles: status + documents side by side, past returns full width */
.db-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px}
.db-tile{display:flex;flex-direction:column;min-width:0;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;transition:border-color .3s,box-shadow .3s}
.db-wide{grid-column:1/-1}
.db-label{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;color:var(--muted);font:600 .875rem/1.3 "Inter",system-ui,sans-serif}
/* highlight set from the feature buttons (see index.js) */
.db-mock[data-focus="status"] .db-status,.db-mock[data-focus="docs"] .db-docs-tile,.db-mock[data-focus="returns"] .db-wide{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow-2)}
/* small pill used for statuses */
.db-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif;white-space:nowrap}
.db-chip svg{width:14px;height:14px;flex-shrink:0;color:var(--accent)}
/* tile 1: progress ring + status segments */
.db-status-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.db-ring{position:relative;width:84px;height:84px;flex-shrink:0;border-radius:50%}
.db-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.db-ring circle{fill:none;stroke-width:7}
.db-ring .bg{stroke:var(--border)}
.db-ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:20}
.db-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text);font:700 1.125rem/1 "Inter",system-ui,sans-serif}
.db-status-row strong{display:block;color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif}
.db-status-row span.sub{display:block;margin-top:2px;color:var(--muted);font-size:.875rem;line-height:1.4}
.db-segs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:auto}
.db-segs i{position:relative;display:block;height:6px;overflow:hidden;border-radius:6px;background:var(--accent);transform-origin:left center}
[dir="rtl"] .db-segs i{transform-origin:right center}
.db-segs i:last-child{background:var(--border)}
.db-segs i:last-child::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:50%;background:var(--accent)}
/* tile 2: documents */
.db-docs{display:flex;flex:1;flex-direction:column;justify-content:space-between;gap:12px;margin:0;padding:0;list-style:none}
.db-doc{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.db-doc>svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.db-doc .nm{flex:1;min-width:0;overflow:hidden;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.db-load{flex:0 0 100%;height:6px;overflow:hidden;border-radius:6px;background:var(--border)}
.db-load i{display:block;height:100%;background:var(--accent);transform:scaleX(.6);transform-origin:left center}
[dir="rtl"] .db-load i{transform-origin:right center}
/* tile 3: past returns */
.db-rets{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.db-ret{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.db-ret:first-child{padding-top:0;border-top:0}
.db-ret:last-child{padding-bottom:0}
.db-ret .txt{flex:1;min-width:0}
.db-ret strong{display:block;color:var(--text);font:600 .9375rem/1.3 "Inter",system-ui,sans-serif}
.db-ret .sub{display:block;color:var(--muted);font-size:.875rem;line-height:1.4}
.db-dl{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:10px}
.db-dl svg{width:18px;height:18px}

@media(min-width:901px) and (max-width:1199px){
.dash-cta .btn{width:min(100%,240px);height:50px;flex:0 0 min(100%,240px)}
}
@media(max-width:900px){
.dash{padding:48px 0}
.dash-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media(max-width:560px){
.db-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:12px}
.db-wide{grid-column:auto}
.db-live{display:none}
.dash-cta .btn{flex:1 1 100%}
}
/* dashboard motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes db-load{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes db-ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 40%,transparent)}to{box-shadow:0 0 0 14px transparent}}
/* scroll reveal: copy rises, the window slides in, tiles follow one after another (only when JavaScript is running) */
.js .dash .db-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .dash .db-mock{opacity:0;transform:translateX(40px);transition:opacity .8s ease .15s,transform .8s cubic-bezier(.2,.7,.2,1) .15s}
[dir="rtl"] .js .dash .db-mock{transform:translateX(-40px)}
.js .dash.in .db-reveal,.js .dash.in .db-mock{opacity:1;transform:none}
/* inner details start empty and fill once the window is in */
.js .dash .db-ring .fg{stroke-dashoffset:100;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) .8s}
.js .dash.in .db-ring .fg{stroke-dashoffset:20}
.js .dash .db-segs i{transform:scaleX(0);transition:transform .5s ease calc(1s + var(--k,0)*.15s)}
.js .dash .db-doc .db-chip{opacity:0;transform:scale(.85);transition:opacity .4s ease calc(1s + var(--k,0)*.25s),transform .4s cubic-bezier(.2,.9,.3,1.3) calc(1s + var(--k,0)*.25s)}
.js .dash .db-ret{opacity:0;transform:translateX(24px);transition:opacity .5s ease calc(1.1s + var(--k,0)*.18s),transform .5s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--k,0)*.18s)}
[dir="rtl"] .js .dash .db-ret{transform:translateX(-24px)}
.js .dash.in .db-segs i,.js .dash.in .db-doc .db-chip,.js .dash.in .db-ret{opacity:1;transform:none}
/* ambient loops: the third document keeps uploading, the ring softly pulses */
.js .dash.in .db-load i{animation:db-load 3.2s ease-in-out 1.6s infinite}
.js .dash.in .db-ring{animation:db-ping 2.4s ease-out 2.6s infinite}
}
/* tablet and mobile: the window rises instead of sliding sideways so the page never scrolls sideways */
@media(prefers-reduced-motion:no-preference) and (max-width:900px){
.js .dash .db-mock,[dir="rtl"] .js .dash .db-mock{transform:translateY(24px)}
.js .dash.in .db-mock{transform:none}
}

/* =====================================================
   HOME 1 · SECTION 5 — Plan finder
   Pick who you are and the matching plan lights up:
   the control's pill slides across, the card gets its accent bar,
   the price counts up and the ticks pop in.
   ===================================================== */
.plans{padding:72px 0;background:var(--bg)}
/* heading row: title left, "I file as" control right */
.pl-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.pl-head h2{margin:0 0 8px;font-size:clamp(1.75rem,3vw,2.375rem)}
.pl-head p{margin:0;max-width:56ch;font-size:1rem}
/* segmented control: the pill (.pl-thumb) slides to the chosen option */
.pl-seg{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));min-width:340px;padding:4px;background:var(--surface);border:1px solid var(--border);border-radius:999px}
.pl-thumb{position:absolute;top:4px;bottom:4px;inset-inline-start:4px;width:calc((100% - 8px)/3);border-radius:999px;background:var(--accent);transform:translateX(calc(var(--i,1)*100%));transition:transform .45s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .pl-thumb{transform:translateX(calc(var(--i,1)*-100%))}
.pl-opt{position:relative;z-index:1;padding:10px 12px;border:0;border-radius:999px;background:none;color:var(--text);font:600 .9375rem/1.2 "Inter",system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .3s}
.pl-opt[aria-checked="true"]{color:var(--on-primary)}

/* three equal plan cards */
.pl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.pl-item{display:flex;min-width:0}
.pl-card{position:relative;flex:1;display:flex;flex-direction:column;min-width:0;padding:24px;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:20px;transition:border-color .35s,box-shadow .35s}
/* accent bar along the top edge: grows in when the card is the match */
.pl-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .pl-card::before{transform-origin:right center}
.pl-card.is-rec{border-color:var(--accent);box-shadow:0 0 0 4px var(--glow-2),var(--shadow)}
.pl-card.is-rec::before{transform:scaleX(1)}
/* card header: icon, plan name, "Best match" tag */
.pl-top{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.pl-ico{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;color:var(--accent);background:var(--glow-2);border-radius:12px}
.pl-ico svg{width:22px;height:22px}
.pl-top h3{margin:0;font-size:1.25rem}
.pl-for{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.4}
.pl-tag{margin-inline-start:auto;padding:4px 12px;border-radius:999px;background:var(--accent);color:var(--on-primary);font:600 .875rem/1.3 "Inter",system-ui,sans-serif;white-space:nowrap;visibility:hidden;opacity:0;transform:scale(.9);transition:opacity .3s,transform .3s,visibility 0s .3s}
.pl-card.is-rec .pl-tag{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* price */
.pl-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pl-amt{color:var(--text);font:700 2.5rem/1.1 "Playfair Display",Georgia,serif;transition:color .35s}
.pl-amt small{font-size:1.5rem}
.pl-card.is-rec .pl-amt{color:var(--accent)}
.pl-unit{color:var(--muted);font-size:.9375rem}
/* included features (grows so every card ends level) */
.pl-feat{flex:1;display:flex;flex-direction:column;gap:12px;margin:0 0 20px;padding:0;list-style:none}
.pl-feat li{display:flex;gap:10px;color:var(--text);font-size:.9375rem;line-height:1.45}
.pl-feat svg{width:18px;height:18px;flex-shrink:0;margin-top:2px;color:var(--accent)}
/* turnaround + support */
.pl-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 20px;background:var(--bg);border:1px solid var(--border);border-radius:14px}
.pl-meta div{padding:12px 16px}
.pl-meta div+div{border-inline-start:1px solid var(--border)}
.pl-meta dt{color:var(--muted);font-size:.875rem;line-height:1.4}
.pl-meta dd{margin:2px 0 0;color:var(--text);font:600 .9375rem/1.3 "Inter",system-ui,sans-serif}
/* button: outline normally, solid on the matching card */
.pl-card .btn{width:100%;gap:10px;background:transparent;color:var(--accent);transition:background .3s,color .3s,border-color .3s}
.pl-card .btn:hover{background:var(--accent);border-color:var(--accent);color:var(--on-primary)}
.pl-card.is-rec .btn{background:var(--accent);color:var(--on-primary)}
.pl-card.is-rec .btn:hover{background:var(--secondary);border-color:var(--secondary)}

/* tablet and mobile: one plan per row, features in two columns when there is room */
@media(max-width:900px){
.plans{padding:48px 0}
.pl-head{margin-bottom:32px}
.pl-grid{grid-template-columns:minmax(0,1fr);gap:20px}
.pl-feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;flex:none}
}
@media(max-width:700px){
.pl-seg{width:100%;min-width:0}
}
@media(max-width:560px){
.pl-card{padding:20px}
.pl-top{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;column-gap:12px;row-gap:8px}
.pl-tag{grid-column:2;justify-self:start;margin:0}
.pl-feat{grid-template-columns:minmax(0,1fr)}
.pl-opt{padding:10px 6px}
}
/* plan motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes pl-pop{from{opacity:0;transform:scale(.5)}}
/* scroll reveal for the heading and the cards (only when JavaScript is running) */
.js .plans .pl-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .plans.in .pl-reveal{opacity:1;transform:none}
/* the matching card's ticks pop in one after another each time it is chosen */
.pl-card.is-rec .pl-feat svg{animation:pl-pop .45s cubic-bezier(.2,.9,.3,1.3) calc(.25s + var(--k,0)*.1s) backwards}
}

/* =====================================================
   HOME 1 · SECTION 6 — Client voices
   Two rows of review cards drift in opposite directions
   (hover or the Pause button stops them). With reduced motion
   the rows become simple horizontal scrollers instead.
   ===================================================== */
.voices{padding:72px 0;background:var(--surface);border-block:1px solid var(--border);overflow-x:clip}
/* heading row: title left, rating summary + pause right */
.tm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:40px}
.tm-head h2{margin:0 0 8px;font-size:clamp(1.75rem,3vw,2.375rem)}
.tm-head p{margin:0;max-width:56ch;font-size:1rem}
.tm-side{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.tm-rate{display:flex;align-items:center;gap:16px;padding:14px 20px;background:var(--bg);border:1px solid var(--border);border-radius:16px}
.tm-score{color:var(--text);font:700 2.25rem/1 "Playfair Display",Georgia,serif}
.tm-score small{color:var(--muted);font:500 1rem/1 "Inter",system-ui,sans-serif}
.tm-rate .tm-stars{margin-bottom:6px}
.tm-rate p{margin:0;color:var(--muted);font-size:.875rem;line-height:1.4}
.tm-stars{display:flex;gap:4px;color:var(--accent)}
.tm-stars svg{width:18px;height:18px;fill:currentColor}
/* pause / play button (swaps icon and label) */
.tm-pause{gap:8px}
.tm-pause svg{width:16px;height:16px;fill:currentColor}
.tm-pause .i-play,.tm-pause[aria-pressed="true"] .i-pause{display:none}
.tm-pause[aria-pressed="true"] .i-play{display:block}

/* rows: full width, soft fade at both edges (the mask only hides edges, it adds no colour) */
.tm-rows{display:flex;flex-direction:column;gap:20px}
.tm-row{overflow-x:auto;scrollbar-width:thin;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.tm-track{display:flex;width:max-content;padding-inline:max(24px,calc((100% - 1200px)/2))}
/* review card (margin, not gap, so the loop is perfectly seamless) */
.tm-card{display:flex;flex:0 0 360px;flex-direction:column;gap:16px;margin:0 20px 0 0;padding:24px;background:var(--bg);border:1px solid var(--border);border-radius:20px;transition:border-color .3s}
[dir="rtl"] .tm-card{margin:0 0 0 20px}
.tm-card:hover{border-color:var(--accent)}
.tm-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tm-tag{padding:4px 12px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif;white-space:nowrap}
.tm-card blockquote{flex:1;margin:0}
.tm-card blockquote p{margin:0;color:var(--text);font-size:1rem;line-height:1.6}
/* person: caption sits below the quote */
.tm-who{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.tm-av{display:block;width:44px;height:44px;flex-shrink:0;object-fit:cover;border-radius:50%}
.tm-who strong{display:block;color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif}
.tm-who span.role{display:block;color:var(--muted);font-size:.875rem;line-height:1.4}

@media(max-width:900px){
.voices{padding:48px 0}
.tm-head{margin-bottom:32px}
}
@media(max-width:640px){
.tm-track{padding-inline:max(16px,calc((100% - 1200px)/2))}
.tm-card{flex-basis:300px;padding:20px}
.tm-side{width:100%}
.tm-rate{flex:1}
}
/* visitors who prefer reduced motion get plain scrolling rows, no clones, no pause button */
@media(prefers-reduced-motion:reduce){
.tm-card.is-clone,.tm-pause{display:none}
}
/* review motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes tm-left{to{transform:translateX(calc(var(--tm-shift,0px)*-1))}}
@keyframes tm-right{to{transform:translateX(var(--tm-shift,0px))}}
/* scroll reveal for the heading and the rows (only when JavaScript is running) */
.js .voices .tm-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .voices.in .tm-reveal{opacity:1;transform:none}
.js .voices .tm-rate .tm-stars svg{opacity:0;transform:scale(.4);transition:opacity .4s ease calc(.5s + var(--k,0)*.1s),transform .4s cubic-bezier(.2,.9,.3,1.3) calc(.5s + var(--k,0)*.1s)}
.js .voices.in .tm-rate .tm-stars svg{opacity:1;transform:none}
/* endless drift: index.js adds clones and sets --tm-shift (one set's width) and --tm-t (duration) */
.js .voices .tm-row{overflow:hidden}
.js .voices .tm-track{padding-inline:0;animation:tm-left var(--tm-t,60s) linear infinite}
.js .voices .tm-row+.tm-row .tm-track{animation-direction:reverse}
[dir="rtl"] .js .voices .tm-track{animation-name:tm-right}
/* pause on hover, on keyboard focus inside a row, or with the Pause button */
.js .voices .tm-row:hover .tm-track,.js .voices .tm-row:focus-within .tm-track,.js .voices.is-paused .tm-track{animation-play-state:paused}
}

/* =====================================================
   HOME 1 · SECTION 7 — Trust vault
   Four trust pillars on the left. On the right a vault card:
   a lock inside slowly turning security rings, and a live
   activity list that highlights one line after another.
   ===================================================== */
.trust{padding:72px 0;background:var(--glow-2)}
.trust-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
/* left column: label, headline, copy, pillars, buttons */
.trust-copy h2{margin:0 0 12px;font-size:clamp(1.75rem,3vw,2.375rem)}
.trust-copy>p:not(.eyebrow){max-width:56ch;margin:0 0 24px;font-size:1rem}
.tr-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 28px;padding:0;list-style:none}
.tr-pillars li{display:flex;min-width:0}
.tr-pillar{flex:1;display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;transition:border-color .25s}
.tr-pillar:hover{border-color:var(--accent)}
.tr-ico{display:grid;place-items:center;width:44px;height:44px;color:var(--accent);background:var(--glow-2);border-radius:12px;transition:background .25s,color .25s}
.tr-ico svg{width:22px;height:22px}
.tr-pillar:hover .tr-ico{background:var(--accent);color:var(--on-primary)}
.tr-pillar h3{margin:0;font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif}
.tr-pillar p{margin:0;font-size:.9375rem;line-height:1.5}
.trust-cta{display:flex;flex-wrap:wrap;gap:14px}

/* right column: the vault card */
.vault{min-width:0;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.vt-art{display:grid;place-items:center;margin-bottom:20px}
.vt-art svg{display:block;width:100%;max-width:240px;height:auto}
/* vault drawing: rings, orbiting dots, glowing core and lock */
.vt-ring{fill:none;stroke:var(--border);stroke-width:2}
.vt-dash{stroke:var(--accent);stroke-dasharray:2 10;stroke-linecap:round}
.vt-node{fill:var(--accent)}
.vt-halo{fill:var(--glow-2);stroke:var(--accent);stroke-width:1.5}
.vt-core{fill:var(--accent)}
.vt-lock{fill:none;stroke:var(--on-primary);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vt-key{fill:var(--on-primary)}
/* live activity list */
.vt-label{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--muted);font:600 .875rem/1.3 "Inter",system-ui,sans-serif}
.vt-log{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.vt-row{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:12px}
.vt-row svg{width:16px;height:16px;flex-shrink:0;color:var(--accent)}
.vt-row .t{flex:1;min-width:0;color:var(--text);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.vt-row time{flex-shrink:0;color:var(--muted);font-size:.875rem;line-height:1.3;white-space:nowrap}

@media(max-width:900px){
.trust{padding:48px 0}
.trust-grid{grid-template-columns:minmax(0,1fr);gap:32px}
}
@media(max-width:560px){
.tr-pillars{grid-template-columns:minmax(0,1fr)}
.vault{padding:20px}
.trust-cta .btn{flex:1 1 100%}
}
/* trust motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes vt-spin{to{transform:rotate(360deg)}}
@keyframes vt-spin-r{to{transform:rotate(-360deg)}}
@keyframes vt-halo{from{transform:scale(1);opacity:.8}to{transform:scale(1.55);opacity:0}}
@keyframes vt-draw{from{stroke-dashoffset:1}}
@keyframes vt-pop{from{opacity:0;transform:scale(.5)}}
@keyframes vt-row{0%,28%{border-color:var(--accent);background:var(--glow-2)}34%,100%{border-color:var(--border);background:var(--bg)}}
/* scroll reveal: copy and pillars rise, the vault scales in (only when JavaScript is running) */
.js .trust .tr-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .trust .vault{opacity:0;transform:scale(.94);transition:opacity .8s ease .2s,transform .8s cubic-bezier(.2,.7,.2,1) .2s}
.js .trust.in .tr-reveal,.js .trust.in .vault{opacity:1;transform:none}
/* the outer ring draws itself, the core pops in */
.js .trust.in .vt-draw{animation:vt-draw 1.6s cubic-bezier(.2,.7,.2,1) .4s backwards}
.js .trust.in .vt-core,.js .trust.in .vt-lock,.js .trust.in .vt-key{transform-box:fill-box;transform-origin:center;animation:vt-pop .6s cubic-bezier(.2,.9,.3,1.3) .9s backwards}
/* ambient loops: rings turn in opposite directions, halo pulses, activity lines highlight in turn */
.vt-spin-a,.vt-spin-b,.vt-pulse{transform-box:fill-box;transform-origin:center}
.vt-spin-a{animation:vt-spin 36s linear infinite}
.vt-spin-b{animation:vt-spin-r 28s linear infinite}
.vt-pulse{animation:vt-halo 2.6s ease-out infinite}
.js .trust.in .vt-row{animation:vt-row 6s ease infinite;animation-delay:calc(var(--k,0)*2s)}
}


/* =====================================================
   HOME 1 · SECTION 8 — Calm CTA band
   Copy, buttons and ticks on the left. On the right a
   quick-start card with a "calm meter": the ring fills
   and the face relaxes as the form is completed.
   ===================================================== */
.cta{position:relative;overflow:hidden;padding:72px 0;background:var(--surface);border-top:1px solid var(--border)}
.ct-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center}
/* soft glows behind the band (decorative, sit under the content) */
.ct-glow{position:absolute;z-index:0;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--glow) 0,transparent 70%);pointer-events:none}
.ct-glow-a{top:-200px;inset-inline-start:-140px}
.ct-glow-b{bottom:-220px;inset-inline-end:-120px;background:radial-gradient(circle,var(--glow-2) 0,transparent 70%)}
/* left column: label, headline, promise, buttons, ticks */
.cta .eyebrow{background:var(--bg)}
.ct-copy{min-width:0}
.ct-copy h2{max-width:18ch;margin:0 0 12px;font-size:clamp(1.75rem,3.4vw,2.75rem);text-wrap:balance}
.ct-copy>p:not(.eyebrow){max-width:52ch;margin:0 0 28px;font-size:1rem}
.ct-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:28px}
.ct-ticks{display:flex;flex-wrap:wrap;gap:12px 28px;margin:0;padding:0;list-style:none}
.ct-ticks li{display:flex;align-items:center;gap:8px;color:var(--text);font:500 .9375rem/1.3 "Inter",system-ui,sans-serif}
.ct-ticks svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.ct-ticks path{stroke-dasharray:1}
/* arrow nudges forward on hover (flipped for right-to-left) */
.cta .btn svg{transition:transform .25s ease}
.cta .btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .cta .btn:hover svg{transform:scaleX(-1) translateX(4px)}

/* right column: quick-start card */
.ct-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:28px;text-align:center;background:var(--bg);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.ct-card h3{margin:0;font-size:1.375rem}
.ct-state{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.3}
.ct-state strong{color:var(--text)}
.ct-fields{display:flex;flex-direction:column;gap:14px}
.ct-fields[hidden]{display:none}
.ct-input{display:block;width:100%;height:50px;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:400 1rem "Inter",system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.ct-input::placeholder{color:var(--muted);opacity:1}
.ct-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}
.ct-input[aria-invalid="true"]{border-color:var(--text)}
/* select: custom arrow, muted until a choice is made */
.ct-select{position:relative}
.ct-select select{appearance:none;-webkit-appearance:none;padding-inline-end:44px;cursor:pointer}
.ct-select select:required:invalid{color:var(--muted)}
.ct-select option{color:var(--text)}
.ct-select::after{content:"";position:absolute;inset-inline-end:20px;top:50%;width:7px;height:7px;border-inline-end:2px solid var(--muted);border-block-end:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.ct-submit{flex:0 0 auto;width:100%}
.ct-note{margin:0;color:var(--muted);font-size:.875rem;line-height:1.4}
.ct-note.is-error{color:var(--text);font-weight:600}
/* calm meter: ring + face */
.ct-meter{align-self:center;width:80px;height:80px}
.ct-meter svg{display:block;width:100%;height:100%}
.ct-halo{fill:var(--glow-2);transform-box:fill-box;transform-origin:center}
.ct-track{fill:none;stroke:var(--border);stroke-width:4}
.ct-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1),opacity .3s}
.ct-meter[data-level="1"] .ct-fill{stroke-dashoffset:.5;opacity:1}
.ct-meter[data-level="2"] .ct-fill{stroke-dashoffset:0;opacity:1}
.ct-eye{fill:var(--text)}
.ct-mouth{fill:none;stroke:var(--text);stroke-width:3;stroke-linecap:round;opacity:0;transition:opacity .3s}
.ct-meter[data-level="0"] .m0,.ct-meter[data-level="1"] .m1,.ct-meter[data-level="2"] .m2{opacity:1}
/* success message */
.ct-done{display:flex;flex-direction:column;align-items:center;gap:12px}
.ct-done[hidden]{display:none}
.ct-done p{margin:0;font-size:1rem;line-height:1.5}
.ct-done strong{color:var(--text)}
.ct-done span[data-cta-email]{color:var(--text);font-weight:600;overflow-wrap:anywhere}
.ct-check{display:grid;place-items:center;width:48px;height:48px;color:var(--accent);background:var(--glow-2);border:1.5px solid var(--accent);border-radius:50%}
.ct-check svg{width:24px;height:24px}
.ct-check path{stroke-dasharray:1}
.ct-reset{padding:0;border:0;background:none;color:var(--accent);font:600 .9375rem/1.3 "Inter",system-ui,sans-serif;text-decoration:underline;cursor:pointer}
.ct-reset:hover{color:var(--secondary)}

/* tablet and mobile: copy first, card second; buttons full width; ticks stacked */
@media(max-width:900px){
.cta{padding:48px 0}
.ct-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.ct-actions .btn{flex:1 1 100%}
.ct-ticks{flex-direction:column;gap:12px}
}
@media(max-width:560px){
.ct-card{padding:22px}
}
/* motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes ct-drift-a{from{transform:translate(0,0)}to{transform:translate(60px,40px)}}
@keyframes ct-drift-b{from{transform:translate(0,0)}to{transform:translate(-60px,-40px)}}
@keyframes ct-breathe{from{transform:scale(.94)}to{transform:scale(1.1)}}
@keyframes ct-tick{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.ct-glow-a{animation:ct-drift-a 16s ease-in-out infinite alternate}
.ct-glow-b{animation:ct-drift-b 18s ease-in-out infinite alternate}
.ct-halo{animation:ct-breathe 4s ease-in-out infinite alternate}
.ct-done:not([hidden]) .ct-check path{animation:ct-tick .6s ease .1s backwards}
/* scroll reveal: copy rises, the card slides in (only when JavaScript is running) */
.js .cta .ct-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .cta .ct-card{opacity:0;transform:translateY(24px);transition:opacity .8s ease .2s,transform .8s cubic-bezier(.2,.7,.2,1) .2s}
.js .cta.in .ct-reveal,.js .cta.in .ct-card{opacity:1;transform:none}
/* ticks draw one after another once the section is visible */
.js .cta.in .ct-ticks path{animation:ct-tick .5s ease backwards;animation-delay:calc(.7s + var(--k,0)*.2s)}
}
/* desktop only: the card slides in from the side (from the left in right-to-left) */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
.js .cta .ct-card{transform:translateX(48px)}
[dir="rtl"].js .cta .ct-card{transform:translateX(-48px)}
.js .cta.in .ct-card{transform:none}
}


/* =====================================================
   HOME 2 · SECTION 1 — Full-bleed hero
   The photo fills the whole section. Copy sits bottom-left
   on a fade made from the page colour (so it reads in light
   and dark mode). A rotating seal sits bottom-right and a
   glass dock of four ring gauges runs along the bottom.
   ===================================================== */
.hp{position:relative;isolation:isolate;overflow:hidden;padding:64px 0;background:var(--bg)}
/* background layers (stacked behind the content) */
.hp-bg{position:absolute;inset:-24px;z-index:-3;transform:translate(calc(var(--px,0)*-14px),calc(var(--py,0)*-10px));transition:transform .5s ease-out}
.hp-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:62% 18%}
[data-theme="dark"] .hp-bg img{filter:brightness(.78)}
.hp-scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(var(--hp-dir,90deg),color-mix(in srgb,var(--bg) 96%,transparent) 0,color-mix(in srgb,var(--bg) 88%,transparent) 40%,color-mix(in srgb,var(--bg) 30%,transparent) 70%,transparent 100%),linear-gradient(0deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 45%)}
[dir="rtl"] .hp{--hp-dir:270deg}
[dir="rtl"] .hp-bg img{object-position:38% 18%}
/* scanner beam: lives only on the photo side (right 44%), so it never crosses the text */
.hp-scan{position:absolute;z-index:-1;top:0;bottom:0;inset-inline-start:56%;inset-inline-end:0;overflow:hidden;pointer-events:none}
.hp-scan span{position:absolute;top:0;bottom:0;inset-inline-start:0;width:2px;background:linear-gradient(180deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);box-shadow:0 0 24px 6px var(--glow);opacity:0}

/* layout: copy (7) + seal (5) on the first row, dock across the second */
.hp-grid{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px 48px;align-items:end}
.hp-copy{min-width:0}
.hp .eyebrow{margin:0 0 20px}
.hp h1{margin:0 0 16px;max-width:none;font-size:clamp(2.25rem,5.2vw,4rem);line-height:1.08}
.hp-line{display:block;padding-bottom:.12em;margin-bottom:-.12em;overflow:hidden}
.hp-line>span{display:block}
.hp-copy>p:not(.eyebrow){max-width:50ch;margin:0 0 28px;color:var(--text);font-size:1.0625rem}
.hp-actions{display:flex;flex-wrap:wrap;gap:14px}
.hp-actions .btn-outline{background:color-mix(in srgb,var(--surface) 78%,transparent)}
.hp-actions .btn-outline:hover{background:var(--accent)}
/* arrow nudges forward on hover (flipped for right-to-left) */
.hp .btn svg{transition:transform .25s ease}
.hp .btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .hp .btn:hover svg{transform:scaleX(-1) translateX(4px)}

/* rotating trust seal */
.hp-seal-wrap{justify-self:end;align-self:end;transform:translate(calc(var(--px,0)*10px),calc(var(--py,0)*8px));transition:transform .5s ease-out}
.hp-seal{width:150px;height:150px}
.hp-seal svg{display:block;width:100%;height:100%;overflow:visible}
.hp-seal-bg{fill:color-mix(in srgb,var(--surface) 90%,transparent);stroke:var(--border);stroke-width:1.5}
.hp-seal text{fill:var(--text);font:600 13px "Inter",system-ui,sans-serif}
.hp-seal-spin{transform-box:view-box;transform-origin:75px 75px}
.hp-seal-core{fill:var(--glow-2);stroke:var(--accent);stroke-width:2}
.hp-seal-tick{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}

/* glass dock with four ring gauges */
.hp-dock{position:relative;grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden;background:color-mix(in srgb,var(--surface) 84%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.hp-dock::before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:translateX(-100%)}
.hp-stat{display:flex;align-items:center;gap:16px;min-width:0;padding:20px 24px}
.hp-stat+.hp-stat{border-inline-start:1px solid var(--border)}
.hp-ring{flex-shrink:0;width:56px;height:56px}
.hp-ring svg{display:block;width:100%;height:100%}
.hp-ring-bg{fill:none;stroke:var(--border);stroke-width:4}
.hp-ring-fill{fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--v,1))}
.hp-ico{fill:none;stroke:var(--accent);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.hp-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hp-num{display:block;color:var(--text);font:700 1.5rem/1.1 "Playfair Display",Georgia,serif}
.hp-lab{display:block;color:var(--muted);font-size:.9375rem;line-height:1.35}

/* tablet and mobile: copy first, dock second (2 columns); seal hidden; fade covers the whole photo */
@media(max-width:900px){
.hp{padding:48px 0}
.hp-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.hp-seal-wrap,.hp-scan{display:none}
.hp-scrim{background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent),color-mix(in srgb,var(--bg) 66%,transparent))}
.hp-bg img,[dir="rtl"] .hp-bg img{object-position:70% 20%}
.hp-dock{grid-template-columns:repeat(2,minmax(0,1fr))}
.hp-stat:nth-child(odd){border-inline-start:0}
.hp-stat:nth-child(n+3){border-top:1px solid var(--border)}
}
@media(max-width:560px){
.hp-actions .btn{flex:1 1 100%}
.hp-dock{grid-template-columns:minmax(0,1fr)}
.hp-stat+.hp-stat{border-inline-start:0;border-top:1px solid var(--border)}
}

/* motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes hp-zoom{from{transform:scale(1)}to{transform:scale(1.1)}}
@keyframes hp-beam{0%{transform:translateX(0);opacity:0}8%{opacity:1}42%{opacity:1}50%,100%{transform:translateX(calc(44vw - 2px));opacity:0}}
@keyframes hp-sweep{0%{transform:translateX(-100%)}45%,100%{transform:translateX(100%)}}
@keyframes hp-turn{to{transform:rotate(360deg)}}
@keyframes hp-draw{from{stroke-dashoffset:1}}
.hp-bg img{animation:hp-zoom 24s ease-in-out infinite alternate}
.hp-scan span{animation:hp-beam 9s ease-in-out 2.4s infinite}
[dir="rtl"] .hp-scan span{animation-name:hp-beam-rtl}
@keyframes hp-beam-rtl{0%{transform:translateX(0);opacity:0}8%{opacity:1}42%{opacity:1}50%,100%{transform:translateX(calc(-44vw + 2px));opacity:0}}
.hp-dock::before{animation:hp-sweep 6s ease-in-out 2.6s infinite}
.hp-seal-spin{animation:hp-turn 26s linear infinite}
/* entrance: headline lines slide up, copy rises, seal pops, dock slides up (only when JavaScript is running) */
.js .hp .hp-line>span{transform:translateY(112%);transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .hp .hp-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .hp .hp-seal{opacity:0;transform:scale(.6) rotate(-40deg);transition:opacity .7s ease .7s,transform .9s cubic-bezier(.2,.9,.3,1.2) .7s}
.js .hp .hp-dock{opacity:0;transform:translateY(40px);transition:opacity .8s ease .6s,transform .8s cubic-bezier(.2,.7,.2,1) .6s}
.js .hp.in .hp-line>span,.js .hp.in .hp-reveal,.js .hp.in .hp-seal,.js .hp.in .hp-dock{opacity:1;transform:none}
/* rings draw one after another, the seal tick draws last */
.js .hp .hp-ring-fill{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1) calc(1s + var(--k,0)*.15s)}
.js .hp.in .hp-ring-fill{stroke-dashoffset:calc(1 - var(--v,1))}
.js .hp.in .hp-seal-tick{animation:hp-draw .7s ease 1.5s backwards}
}


/* =====================================================
   HOME 2 · SECTION 2 — Services strip
   Five photo panels run edge to edge. The open panel widens
   and shows its details; the others fold into slim rails with
   a vertical title. A progress bar on the open panel times
   the automatic change to the next service.
   ===================================================== */
.sv{padding:72px 0;background:var(--bg)}
/* heading row */
.sv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:32px}
.sv-intro{min-width:0}
.sv-intro h2{margin:0 0 12px;max-width:20ch;font-size:clamp(1.75rem,3vw,2.375rem)}
.sv-intro>p:not(.eyebrow){max-width:56ch;margin:0;font-size:1rem}
.sv-ctrl{display:flex;align-items:center;gap:10px;flex-shrink:0}
.sv-count{margin-inline-end:6px;color:var(--muted);font:500 1rem/1 "Inter",system-ui,sans-serif;white-space:nowrap}
.sv-count b{color:var(--text);font:700 1.5rem/1 "Playfair Display",Georgia,serif}
[dir="rtl"] .sv-nav svg{transform:scaleX(-1)}

/* the strip: panels share the width, the open one takes four shares */
.sv-strip{--bw:520px;display:flex;gap:4px;width:min(1200px,100% - 48px);margin-inline:auto;height:clamp(520px,66vh,600px)}
.sv-panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--surface);transition:flex-grow .8s cubic-bezier(.2,.7,.2,1)}
.sv-panel.is-active{flex-grow:4}
.sv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%);transform:scale(1.08);transition:transform 1.2s ease,filter .6s ease}
[data-theme="dark"] .sv-img{filter:brightness(.8)}
.sv-panel.is-active .sv-img{transform:scale(1)}
/* soft fade from the page colour; closed panels get a stronger one so the vertical title stays readable */
.sv-scrim{position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 45%,transparent) 0,transparent 55%);transition:background .6s ease}
.sv-panel:not(.is-active) .sv-scrim{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 96%,transparent) 0,color-mix(in srgb,var(--bg) 70%,transparent) 60%,color-mix(in srgb,var(--bg) 40%,transparent) 100%)}
.sv-panel:not(.is-active):hover .sv-scrim{background:linear-gradient(0deg,color-mix(in srgb,var(--bg) 94%,transparent) 0,color-mix(in srgb,var(--bg) 50%,transparent) 60%,color-mix(in srgb,var(--bg) 20%,transparent) 100%)}
/* full-panel button (opens the panel) */
.sv-tab{position:absolute;inset:0;z-index:1;width:100%;margin:0;padding:0;border:0;background:none;cursor:pointer}
.sv-panel.is-active .sv-tab{cursor:default}
.sv-tab:focus-visible{outline:3px solid var(--accent);outline-offset:-5px}
/* progress bar: fills while the panel is open */
.sv-bar{position:absolute;z-index:4;top:0;inset-inline:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;pointer-events:none}
[dir="rtl"] .sv-bar{transform-origin:right center}
.sv-panel.is-active .sv-bar{transform:scaleX(1)}
.js .sv-panel:not(.is-active) .sv-bar{transform:scaleX(0)}
/* rail: icon chip, counter pill, vertical title */
.sv-rail{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;justify-content:space-between;padding:24px;pointer-events:none}
.sv-chip{display:grid;place-items:center;width:44px;height:44px;color:var(--accent);background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);border-radius:50%;transition:transform .3s ease}
.sv-chip svg{width:22px;height:22px}
.sv-panel:not(.is-active):hover .sv-chip{transform:translateY(-4px)}
.sv-pill{position:absolute;top:24px;inset-inline-end:24px;padding:8px 14px;color:var(--text);background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif;opacity:0;transition:opacity .4s ease}
.sv-panel.is-active .sv-pill{opacity:1;transition-delay:.4s}
.sv-vt{margin-inline-start:13px;color:var(--text);font:600 1.0625rem/1 "Inter",system-ui,sans-serif;white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);transition:opacity .3s ease}
.sv-panel.is-active .sv-vt{opacity:0}
/* body: details of the open panel */
.sv-body{position:absolute;z-index:3;bottom:24px;inset-inline-start:24px;width:calc(var(--bw) - 24px);display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:28px;background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s .4s}
.sv-panel.is-active .sv-body{opacity:1;visibility:visible;transition:opacity .4s ease .3s,visibility 0s 0s}
.sv-body h3{margin:0;font-size:1.75rem}
.sv-body p{max-width:46ch;margin:0;color:var(--text);font-size:1rem}
.sv-body ul{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.sv-body li{display:flex;align-items:center;gap:10px;color:var(--text);font:500 .9375rem/1.4 "Inter",system-ui,sans-serif}
.sv-body li svg{width:18px;height:18px;flex-shrink:0;color:var(--accent)}
.sv-body .btn{gap:10px;pointer-events:auto}
.sv-body .btn svg{transition:transform .25s ease}
.sv-body .btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .sv-body .btn svg{transform:scaleX(-1)}
[dir="rtl"] .sv-body .btn:hover svg{transform:scaleX(-1) translateX(4px)}
.sv-body .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* narrower laptops: smaller open panel and text column */
@media(max-width:1100px){
.sv-strip{--bw:360px}
.sv-panel.is-active{flex-grow:3.2}
.sv-body{padding:24px}
}
/* tablet and mobile: panels stack, the open one grows taller; controls sit under the heading */
@media(max-width:900px){
.sv{padding:48px 0}
.sv-head{flex-direction:column;align-items:flex-start;gap:24px;margin-bottom:24px}
.sv-strip{--bw:100%;flex-direction:column;height:auto}
.sv-panel{flex:none;height:88px;transition:height .8s cubic-bezier(.2,.7,.2,1)}
.sv-panel.is-active{height:540px}
.sv-rail{inset:0 0 auto 0;height:88px;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:0 20px}
.sv-vt{order:1;margin-inline-start:0;writing-mode:horizontal-tb;transform:none}
.sv-pill{top:22px;inset-inline-end:20px}
.sv-body{bottom:16px;inset-inline-start:16px;width:calc(100% - 32px);padding:22px 20px}
.sv-panel:not(.is-active) .sv-scrim{background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 94%,transparent),color-mix(in srgb,var(--bg) 60%,transparent))}
}
@media(max-width:560px){
.sv-strip{width:calc(100% - 32px)}
.sv-panel.is-active{height:580px}
.sv-ctrl{flex-wrap:wrap}
}

/* motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes sv-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sv-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
/* heading rises; panels wipe up one after another (only when JavaScript is running) */
.js .sv .sv-reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.js .sv.in .sv-reveal{opacity:1;transform:none}
.js .sv .sv-panel{clip-path:inset(100% 0 0 0)}
.js .sv.in .sv-panel{clip-path:inset(0);transition:flex-grow .8s cubic-bezier(.2,.7,.2,1),height .8s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--k,0)*.12s)}
/* open panel: photo settles in, line by line text rises, progress bar fills */
.sv-panel.is-active .sv-img{animation:sv-zoom 1.6s cubic-bezier(.2,.7,.2,1)}
.sv-body>*{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.sv-panel.is-active .sv-body>*{opacity:1;transform:none;transition:opacity .6s ease calc(.45s + var(--j,0)*.09s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--j,0)*.09s)}
.sv-body>:nth-child(2){--j:1}.sv-body>:nth-child(3){--j:2}.sv-body>:nth-child(4){--j:3}
.js .sv.in .sv-panel.is-active .sv-bar{animation:sv-fill 7s linear forwards}
.js .sv.is-paused .sv-bar,.js .sv-strip:hover .sv-bar,.js .sv-strip:has(:focus-visible) .sv-bar{animation-play-state:paused}
}

/* Home 2 Section 3: revenue model board, with balanced process and fee columns. */
.rm{padding:72px 0;background:var(--surface);border-block:1px solid var(--border)}
.rm-board{padding:clamp(20px,3vw,36px);background:var(--bg);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.rm-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.8fr);column-gap:28px;align-items:end;margin-bottom:24px}
.rm-head .eyebrow{grid-column:1/-1;width:fit-content;margin:0 0 12px;font-size:.875rem}
.rm-head h2{margin:0;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.2}
.rm-head>p:last-child{max-width:48ch;margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.rm-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px;align-items:stretch}
.rm-steps{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.rm-step{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.rm-step-no{display:grid;place-items:center;flex:0 0 42px;height:42px;color:var(--accent);background:var(--glow-2);border:1px solid var(--border);border-radius:12px;font:600 .875rem/1 "Inter",system-ui,sans-serif}
.rm-step>span:last-child{display:grid;gap:4px;min-width:0}
.rm-step strong{color:var(--text);font:600 1rem/1.35 "Inter",system-ui,sans-serif}
.rm-step>span:last-child>span{color:var(--muted);font-size:.875rem;line-height:1.4}
.rm-fees{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rm-fee{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:150px;padding:16px;background:var(--glow-2);border:1px solid var(--border);border-radius:14px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.rm-fee:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:var(--shadow)}
.rm-fee-label{color:var(--muted);font-size:.875rem;line-height:1.35}
.rm-fee strong{margin-top:8px;color:var(--accent);font:700 1.5rem/1.15 "Playfair Display",Georgia,serif}
.rm-fee-unit{margin-top:3px;color:var(--text);font-size:.8125rem;line-height:1.35}
.rm-fee p{margin:auto 0 0;padding-top:10px;color:var(--muted);font-size:.875rem;line-height:1.4}
.rm-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.rm-foot>span{color:var(--muted);font-size:.875rem;line-height:1.4}
.rm-foot .btn{flex:0 0 auto}
@media(max-width:900px){
.rm{padding:48px 0}
.rm-head{grid-template-columns:minmax(0,1fr);gap:10px}
.rm-head .eyebrow{margin-bottom:4px}
.rm-layout{grid-template-columns:minmax(0,1fr);gap:16px}
.rm-steps{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
}
@media(max-width:560px){
.rm-board{padding:18px;border-radius:18px}
.rm-steps{grid-template-columns:minmax(0,1fr);gap:10px}
.rm-fees{gap:10px;grid-auto-rows:1fr}
.rm-fee{min-height:156px;padding:14px}
.rm-fee-label{min-height:2.7em}
.rm-foot{align-items:stretch;flex-direction:column;gap:12px;margin-top:18px;padding-top:16px}
.rm-foot .btn{width:100%}
}
/* Scroll reveal animation is enabled only when motion is allowed and JS is available. */
@media(prefers-reduced-motion:no-preference){
.js .rm .rm-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease calc(var(--rm-order,0)*.08s),transform .6s cubic-bezier(.2,.7,.2,1) calc(var(--rm-order,0)*.08s)}
.js .rm.in .rm-reveal{opacity:1;transform:none}
}

/* =====================================================
   ABOUT US · Shared section spacing and opening divider
   Four vertical bars rise like a staircase with photos,
   captions below, and a dashed growth line above. All four sections use
   the same responsive top/bottom spacing value.
   ===================================================== */
.about-banner{--about-section-space:clamp(40px,6vw,64px);position:relative;overflow:hidden;height:auto;min-height:75vh;padding-block:var(--about-section-space);border-bottom:1px solid var(--border);background:linear-gradient(125deg,var(--glow-2) 0%,var(--bg) 68%,var(--surface) 100%)}
.about-grid{position:relative;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:0;align-items:end;height:max(440px,calc(75vh - 2 * var(--about-section-space)))}
/* Content in top-left corner */
.about-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;max-width:380px}
.about-content .eyebrow{align-self:flex-start;width:fit-content;margin:0 0 16px}
.about-content h1{margin:0 0 16px;font-size:clamp(2rem,3.5vw,2.75rem);line-height:1.15}
.about-content h1 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.about-content h1 .line>span{display:inline-block}
.about-content p{max-width:48ch;margin:0 0 24px;font-size:1rem;line-height:1.65}
.about-cta{display:flex;flex-wrap:wrap;gap:14px}
/* Staircase container */
.about-stairs{position:relative;display:flex;align-items:flex-end;gap:20px;height:100%}
/* Since 2014 pill at top right */
.about-pill{position:absolute;top:0;inset-inline-end:0;padding:8px 16px;background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--text);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;opacity:0;transform:scale(.9)}
/* Individual bars */
.about-bar{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;height:var(--h,100%);border-radius:18px 18px 0 0;overflow:hidden;transition:transform .3s ease}
.about-bar:not(.about-bar-filled){height:calc(var(--h,100%) + 30px)}
.about-bar:hover{transform:translateY(-8px)}
/* Photo inside bar */
.about-photo{flex:1;overflow:hidden;border-radius:18px 18px 0 0}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .6s ease}
.about-bar:hover .about-photo img{transform:scale(1.08)}
/* Filled bar (tallest one) with accent color */
.about-bar-filled{background:var(--accent)}
.about-stat{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:20px}
.about-num{display:block;color:var(--on-primary);font:700 3rem/1 "Playfair Display",Georgia,serif}
.about-label{color:black;font-size:1rem;line-height:1.3}
/* Caption below each bar */
.about-caption{display:flex;flex-direction:column;gap:4px;padding-top:8px;text-align:center}
.about-bar-filled .about-caption{padding-bottom:18px}
.about-year{color:var(--text);font:700 1.25rem/1 "Playfair Display",Georgia,serif}
.about-label{color:var(--muted);font-size:.9375rem;line-height:1.3}
.about-bar-filled .about-year,.about-bar-filled .about-stat .about-label,.about-bar-filled .about-caption .about-label{color:var(--on-primary)}
@media(min-width:1024px) and (max-width:1199px){
.about-stat{padding:12px}
.about-num{font-size:2rem}
.about-bar-filled .about-stat .about-label{font-size:.875rem}
}
/* Dashed growth line above bars */
.about-line{position:absolute;top:-14px;inset-inline:0;inset-block:0;pointer-events:none;color:var(--accent);opacity:0}
.about-line-path{stroke-dasharray:8 8}
.about-line-arrow{opacity:0}

/* Responsive: below 1024px, content on top, bars become 2x2 grid */
@media(max-width:1023px){
.about-banner{height:auto;min-height:0;padding-block:var(--about-section-space)}
.about-grid{grid-template-columns:minmax(0,1fr);gap:32px;height:auto}
.about-content{max-width:none;align-items:center;padding-block:0;text-align:center}
.about-content .eyebrow{align-self:center}
.about-cta{justify-content:center}
.about-stairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;height:auto;padding-bottom:0}
.about-pill{position:static;grid-column:1/-1;justify-self:end;margin-bottom:0}
.about-bar:not(.about-bar-filled){height:auto;min-height:270px}
.about-bar-filled{order:4}
.about-caption{padding-top:12px}
.about-line{display:none}
}
@media(max-width:640px){
.about-banner{padding-block:var(--about-section-space)}
.about-stairs{grid-template-columns:minmax(0,1fr)}
.about-bar:not(.about-bar-filled){min-height:250px}
.about-num{font-size:2.5rem}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes about-wipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes about-rise{from{transform:translateY(110%)}}
@keyframes about-grow{from{transform:scaleY(0)}}
@keyframes about-draw{from{stroke-dashoffset:100}}
@keyframes about-pop{from{opacity:0;transform:scale(.85)}}
@keyframes about-fade{from{opacity:0;transform:translateY(12px)}}
/* Entrance: banner wipes open left to right */
.js .about-banner{clip-path:inset(0 100% 0 0);transition:clip-path 1s cubic-bezier(.2,.7,.2,1)}
.js .about-banner.in{clip-path:inset(0)}
/* Headline lines rise one by one */
.js .about-banner:not(.in) .about-content h1 .line>span{transform:translateY(110%)}
.js .about-banner.in .about-content h1 .line>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
/* Bars grow upward from baseline one after another */
.js .about-banner:not(.in) .about-bar{transform:scaleY(0);transform-origin:bottom center}
.js .about-banner.in .about-bar{transition:transform .8s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--i,0)*.2s)}
/* Dashed growth line draws itself */
.js .about-banner:not(.in) .about-line{opacity:1}
.js .about-banner:not(.in) .about-line-path{stroke-dasharray:8 8;stroke-dashoffset:100}
.js .about-banner.in .about-line-path{transition:stroke-dashoffset 1.2s cubic-bezier(.2,.7,.2,1) 1.2s}
.js .about-banner.in .about-line-arrow{opacity:1;transition:opacity .4s ease 2.2s}
/* Tallest bar fills with accent, pill pops in */
.js .about-banner:not(.in) .about-bar-filled{transform:scaleY(0)}
.js .about-banner.in .about-bar-filled{transition:transform .8s cubic-bezier(.2,.7,.2,1) 1s}
.js .about-banner:not(.in) .about-pill{opacity:0;transform:scale(.85)}
.js .about-banner.in .about-pill{transition:opacity .5s ease 1.2s,transform .5s cubic-bezier(.2,.9,.3,1.3) 1.2s}
/* Years and captions fade in under each bar */
.js .about-banner:not(.in) .about-caption{opacity:0;transform:translateY(12px)}
.js .about-banner.in .about-caption{transition:opacity .6s ease calc(1.4s + var(--i,0)*.15s),transform .6s cubic-bezier(.2,.7,.2,1) calc(1.4s + var(--i,0)*.15s)}
/* Content rises */
.js .about-banner:not(.in) .about-content .eyebrow,.js .about-banner:not(.in) .about-content p,.js .about-banner:not(.in) .about-cta{opacity:0;transform:translateY(16px)}
.js .about-banner.in .about-content .eyebrow{transition:opacity .6s ease .5s,transform .6s cubic-bezier(.2,.7,.2,1) .5s}
.js .about-banner.in .about-content p{transition:opacity .6s ease .65s,transform .6s cubic-bezier(.2,.7,.2,1) .65s}
.js .about-banner.in .about-cta{transition:opacity .6s ease .8s,transform .6s cubic-bezier(.2,.7,.2,1) .8s}
.js .about-banner.in .about-content .eyebrow,.js .about-banner.in .about-content p,.js .about-banner.in .about-cta{opacity:1;transform:none}
}

/* Shared back-to-top control, created by the common site script on every page. */
.back-to-top{position:fixed;z-index:1000;inset-inline-end:24px;bottom:24px;display:grid;place-items:center;width:48px;height:48px;padding:0;color:var(--on-primary);background:var(--accent);border:1px solid var(--border);border-radius:50%;box-shadow:var(--shadow);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease}
.back-to-top:hover{background:var(--secondary)}
.back-to-top:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.back-to-top svg{width:22px;height:22px}
.back-to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}
@media(max-width:560px){.back-to-top{inset-inline-end:16px;bottom:16px}}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* =====================================================
   HOME 2 · SECTION 4 — Bento showcase
   Heading with a highlighted word, a short intro row,
   a row of five equal-height cards and a moving ticker.
   ===================================================== */
.bn{padding:72px 0;background:var(--bg)}
/* heading (centred) and the four decorative round icons around it */
.bn-head{position:relative;margin-bottom:32px;text-align:center}
.bn-title{position:relative;isolation:isolate;max-width:16em;margin:0 auto;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.18}
.bn-line{display:block;overflow:hidden;padding:.04em 0}
.bn-line>span{display:inline-block}
/* highlighted word: the pill sits behind the text */
.bn-mark{position:relative;display:inline-block;padding:0 .35em;color:var(--text);background:none}
.bn-mark::before{content:"";position:absolute;inset:.1em 0;z-index:-1;border-radius:999px;background:var(--glow);transform-origin:left center}
[dir="rtl"] .bn-mark::before{transform-origin:right center}
.bn-orb{position:absolute;display:grid;place-items:center;border-radius:50%;color:var(--accent);background:var(--surface);border:1.5px solid var(--accent)}
.bn-orb svg{width:45%;height:45%}
.bn-orb.is-fill{color:var(--on-primary);background:var(--accent)}
.bn-orb-1{top:4px;inset-inline-start:3%;width:48px;height:48px}
.bn-orb-2{top:76px;inset-inline-start:11%;width:42px;height:42px}
.bn-orb-3{top:0;inset-inline-end:5%;width:52px;height:52px}
.bn-orb-4{top:80px;inset-inline-end:12%;width:40px;height:40px}
/* intro row: text on one side, button on the other */
.bn-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:32px}
.bn-intro p{max-width:44ch;margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.bn-intro .btn{flex:0 0 auto}
/* five equal-height cards */
.bn-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:minmax(400px,auto);gap:16px}
.bn-card{display:flex;flex-direction:column;gap:14px;min-width:0;padding:14px;background:var(--surface);border:1px solid var(--border);border-radius:22px;transition:border-color .25s ease}
.bn-card:hover{border-color:var(--accent)}
/* picture area: the image fills it; the caption always sits BELOW it */
.bn-media{position:relative;flex:1 1 auto;min-height:200px;overflow:hidden;border-radius:14px}
.bn-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block}
.bn-cap{padding:0 6px 4px}
.bn-cap h3{margin:0 0 4px;font:600 1rem/1.35 "Inter",system-ui,sans-serif;color:var(--text)}
.bn-cap p{margin:0;max-width:none;color:var(--muted);font-size:.9375rem;line-height:1.5}
.bn-cap a{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:600;font-size:.9375rem;text-decoration:none}
.bn-cap a:hover{color:var(--secondary);text-decoration:underline}
.bn-cap a svg{width:16px;height:16px}
[dir="rtl"] .bn-cap a svg,[dir="rtl"] .bn-intro .btn svg{transform:scaleX(-1)}
/* pattern cards: rings that pulse outward around an icon */
/* ring size follows the SMALLER side of the box (cqmin), so rings never get cut off on wide or tall cards */
.bn-rings{container-type:size;display:grid;place-items:center;background:var(--glow-2);border:1px solid var(--border)}
.bn-rings i{--d:calc(var(--s) * 1cqmin);position:absolute;top:50%;inset-inline-start:50%;width:var(--d);height:var(--d);margin-top:calc(var(--d) / -2);margin-inline-start:calc(var(--d) / -2);border:1.5px solid var(--accent);border-radius:50%;opacity:.35}
.bn-chip{position:relative;display:grid;place-items:center;width:56px;height:56px;color:var(--on-primary);background:var(--accent);border-radius:16px}
.bn-chip svg{width:28px;height:28px}
/* stat cards: two stacked in one column */
.bn-stats{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:16px}
.bn-stat{justify-content:center;gap:6px;padding:20px;background:var(--glow-2)}
.bn-num{display:flex;align-items:baseline;color:var(--accent);font:700 2rem/1.1 "Playfair Display",Georgia,serif}
.bn-stat h3{margin:4px 0 0;font:600 1rem/1.35 "Inter",system-ui,sans-serif;color:var(--text)}
.bn-stat p{margin:0;max-width:none;color:var(--muted);font-size:.9375rem;line-height:1.5}
/* ticker under the cards */
.bn-marquee{margin-top:40px;overflow:hidden;direction:ltr;background:var(--surface);border-block:1px solid var(--border);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bn-track{display:flex;width:max-content}
.bn-group{display:flex;flex:0 0 auto;align-items:center;gap:28px;padding:16px 14px;margin:0;list-style:none}
.bn-group li{display:flex;align-items:center;gap:28px;color:var(--text);font:600 1.0625rem/1.2 "Inter",system-ui,sans-serif;white-space:nowrap}
.bn-group svg{width:16px;height:16px;color:var(--accent)}

/* desktop: each card is a subgrid of two shared rows (picture, caption),
   so every picture ends on the same line and every caption row has the same height */
@media(min-width:1001px){
.bn-grid{grid-template-rows:minmax(230px,1fr) auto;row-gap:0}
.bn-card:not(.bn-stat){display:grid;grid-row:1/span 2;grid-template-rows:subgrid;row-gap:14px}
.bn-stats{grid-row:1/span 2}
}
/* small laptops and tablets: three rows */
@media(max-width:1000px){
.bn-orb{display:none}
.bn-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:16px}
.bn-tall{order:1;grid-column:1/-1}
.bn-photo-2{order:2}
.bn-stats{order:3}
.bn-pat-1{order:4}
.bn-pat-2{order:5}
.bn-media{flex:none;min-height:0;aspect-ratio:4/3}
.bn-tall .bn-media{aspect-ratio:2/1}
.bn-rings{aspect-ratio:16/10}
}
/* phones: one column */
@media(max-width:640px){
.bn{padding:48px 0}
.bn-head{margin-bottom:24px}
.bn-intro{flex-direction:column;align-items:flex-start;gap:20px;margin-bottom:24px}
.bn-grid{grid-template-columns:minmax(0,1fr);gap:14px}
.bn-stats{grid-template-rows:none;gap:14px}
.bn-tall .bn-media{aspect-ratio:4/3}
.bn-marquee{margin-top:32px}
}

/* section 4 motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes bn-ping{0%{transform:scale(.75);opacity:0}35%{opacity:.7}100%{transform:scale(1.18);opacity:0}}
@keyframes bn-float{50%{translate:0 -8px}}
@keyframes bn-bob{50%{translate:0 -4px}}
@keyframes bn-scroll{to{transform:translateX(-50%)}}
@keyframes bn-unveil{from{clip-path:inset(0 0 100% 0)}}
@keyframes bn-spin{to{transform:rotate(360deg)}}
/* nothing is hidden unless JavaScript is running; items appear when the section scrolls into view */
.js .bn:not(.in) .bn-line>span{transform:translateY(110%)}
.js .bn.in .bn-line>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--l,0) * .12s)}
.js .bn:not(.in) .bn-mark::before{transform:scaleX(0)}
.js .bn.in .bn-mark::before{transition:transform .8s cubic-bezier(.2,.7,.2,1) .7s}
.js .bn:not(.in) .bn-orb{opacity:0;transform:scale(.6)}
.js .bn.in .bn-orb{transition:opacity .6s ease calc(.5s + var(--o,0) * .1s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--o,0) * .1s)}
.js .bn:not(.in) .bn-reveal{opacity:0;transform:translateY(28px)}
.js .bn.in .bn-reveal{transition:opacity .7s ease calc(.3s + var(--o,0) * .1s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--o,0) * .1s),translate .25s ease 0s,border-color .25s ease 0s}
/* ambient motion */
.bn-orb{animation:bn-float 6s ease-in-out infinite}
.bn-orb-2{animation-duration:7s;animation-delay:-2s}
.bn-orb-3{animation-duration:8s;animation-delay:-4s}
.bn-orb-4{animation-duration:6.5s;animation-delay:-1s}
.bn-card:hover{translate:0 -4px}
.bn-rings i{animation:bn-ping 3.6s ease-out infinite}
.bn-rings i:nth-child(2){animation-delay:1.2s}
.bn-rings i:nth-child(3){animation-delay:2.4s}
.bn-chip{animation:bn-bob 4s ease-in-out infinite}
.bn.in .bn-media:not(.bn-rings) img{animation:bn-unveil 1.1s cubic-bezier(.2,.7,.2,1) backwards;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.bn-card:hover .bn-media img{transform:scale(1.05)}
.bn-track{animation:bn-scroll 34s linear infinite}
.bn-marquee:hover .bn-track{animation-play-state:paused}
.bn-group svg{animation:bn-spin 9s linear infinite}
}
/* reduced motion: the ticker becomes a static, wrapped row */
@media(prefers-reduced-motion:reduce){
.bn-track{width:auto}
.bn-group{flex-wrap:wrap;justify-content:center}
.bn-group+.bn-group{display:none}
}

/* =====================================================
   ABOUT US · SECTION 2 — Ledger spread
   Two pages with a spine, like an open ledger book.
   ===================================================== */
/* Section 2 closes with a subtle divider before the team journey. */
.about-ledger{--about-section-space:clamp(40px,6vw,64px);padding-block:var(--about-section-space);border-bottom:1px solid var(--border);background:var(--bg)}
.ledger-book{display:grid;grid-template-columns:minmax(0,1fr) 4px minmax(0,1fr);gap:0;align-items:stretch}
/* Spine between pages */
.ledger-spine{background:var(--accent);border-radius:2px}
/* Pages */
.ledger-page{position:relative;padding:32px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}
/* Page edge lines to suggest thickness */
.ledger-page::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 -4px 0 var(--border)}
.ledger-page-left{border-top-right-radius:0;border-bottom-right-radius:0}
.ledger-page-right{border-top-left-radius:0;border-bottom-left-radius:0}
/* Left page: Our story */
.ledger-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif}
.ledger-page h2{margin:0 0 16px;font-size:clamp(1.75rem,3vw,2.25rem);line-height:1.2}
.ledger-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ledger-line>span{display:inline-block}
.ledger-page p{max-width:52ch;margin:0 0 28px;font-size:1rem;line-height:1.65}
/* Founder note */
.founder-note{display:flex;gap:20px;margin-top:32px}
.founder-photo{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid var(--border)}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-quote{flex:1;display:flex;flex-direction:column;gap:8px}
.founder-quote blockquote{margin:0;padding:0;border:none}
.founder-quote blockquote p{margin:0;font-size:1rem;line-height:1.5;font-style:italic;color:var(--text)}
.founder-quote cite{display:block;margin-top:4px;font-style:normal;color:var(--muted);font-size:.9375rem}
/* Right page: Our promise (ledger) */
.ledger-header{display:flex;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.ledger-pill{flex:1;padding:10px 16px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;text-align:center}
.ledger-rows{display:flex;flex-direction:column;gap:0}
.ledger-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.5fr) 32px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.ledger-row:last-child{border-bottom:0}
.ledger-name{color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif}
.ledger-desc{color:var(--muted);font-size:.9375rem;line-height:1.4}
.ledger-tick{display:grid;place-items:center;width:32px;height:32px;color:var(--accent);background:var(--glow-2);border-radius:50%}
.ledger-tick svg{width:18px;height:18px}
.ledger-footer{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border)}
.ledger-note{color:var(--muted);font-size:.875rem;line-height:1.3}
.ledger-stamp{padding:8px 20px;background:var(--accent);color:var(--on-primary);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif}

/* Responsive: below 900px, pages stack with horizontal spine */
@media(max-width:899px){
.about-ledger{padding-block:var(--about-section-space)}
.ledger-book{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 4px auto;gap:16px}
.ledger-spine{grid-row:2;width:100%;height:4px}
.ledger-page-left,.ledger-page-right{border-radius:16px}
.ledger-page::after{display:none}
.founder-note{flex-direction:column;gap:16px}
.founder-photo{width:64px;height:64px}
.ledger-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}
.ledger-tick{width:28px;height:28px}
.ledger-footer{flex-direction:column;align-items:flex-start;gap:12px}
.ledger-page-left{display:flex;flex-direction:column;align-items:center;text-align:center}
.ledger-page-left>p{margin-inline:auto}
.founder-note{align-items:center;text-align:center}
.founder-quote{align-items:center}
}
@media(max-width:640px){
.ledger-page{padding:24px}
.ledger-row{grid-template-columns:minmax(0,1fr);gap:8px}
.ledger-tick{width:24px;height:24px}
.ledger-tick svg{width:16px;height:16px}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes ledger-open{from{transform:rotateY(-90deg)}}
@keyframes ledger-open-rtl{from{transform:rotateY(90deg)}}
@keyframes ledger-write{from{clip-path:inset(0 0 0 100%)}}
@keyframes ledger-circle{from{clip-path:circle(0% at 50% 50%)}}
@keyframes ledger-slide{from{transform:translateX(40px);opacity:0}}
@keyframes ledger-draw{from{stroke-dashoffset:24}}
@keyframes ledger-thump{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes ledger-curl{from{transform:rotate(0)}to{transform:rotate(2deg)}}
/* Pages swing open from spine */
.js .about-ledger:not(.in) .ledger-page-left{transform:rotateY(-90deg);transform-origin:right center;opacity:0}
.js .about-ledger:not(.in) .ledger-page-right{transform:rotateY(90deg);transform-origin:left center;opacity:0}
[dir="rtl"] .js .about-ledger:not(.in) .ledger-page-left{transform:rotateY(90deg);transform-origin:left center}
[dir="rtl"] .js .about-ledger:not(.in) .ledger-page-right{transform:rotateY(-90deg);transform-origin:right center}
.js .about-ledger.in .ledger-page{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .6s ease;transform:none;opacity:1}
/* Left page text written line by line */
.js .about-ledger:not(.in) .ledger-line>span{clip-path:inset(0 0 0 100%)}
.js .about-ledger.in .ledger-line>span{transition:clip-path .6s ease var(--d,0s)}
/* Photo circle draws in */
.js .about-ledger:not(.in) .founder-photo{clip-path:circle(0% at 50% 50%)}
.js .about-ledger.in .founder-photo{transition:clip-path .7s ease .5s}
/* Ledger rows slide in from right */
.js .about-ledger:not(.in) .ledger-row{transform:translateX(40px);opacity:0}
[dir="rtl"] .js .about-ledger:not(.in) .ledger-row{transform:translateX(-40px)}
.js .about-ledger.in .ledger-row{transition:transform .5s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--i,0)*.12s),opacity .5s ease calc(.4s + var(--i,0)*.12s);transform:none;opacity:1}
/* Ticks draw one by one */
.js .about-ledger:not(.in) .ledger-tick svg{stroke-dasharray:24;stroke-dashoffset:24}
.js .about-ledger.in .ledger-tick svg{transition:stroke-dashoffset .4s ease calc(.6s + var(--i,0)*.12s);stroke-dashoffset:0}
/* CA verified stamp lands with thump */
.js .about-ledger:not(.in) .ledger-stamp{opacity:0;transform:scale(.8)}
.js .about-ledger.in .ledger-stamp{transition:opacity .5s ease 1.2s,transform .5s cubic-bezier(.2,.9,.3,1.3) 1.2s;opacity:1;transform:none}
.js .about-ledger.in .ledger-stamp{animation:ledger-thump .3s ease 1.6s}
/* Hover: lower corner curls slightly */
.ledger-page{transition:transform .3s ease,box-shadow .3s ease}
.ledger-page:hover{transform:perspective(1000px) rotateY(2deg);box-shadow:0 16px 32px rgba(16,42,48,.18)}
[dir="rtl"] .ledger-page:hover{transform:perspective(1000px) rotateY(-2deg)}
}

/* =====================================================
   ABOUT US · SECTION 3 — The team relay
   Four hand-offs on a connected line (left), an arched portrait that
   follows the active person with its caption below (right).
   ===================================================== */
.about-relay{--about-section-space:clamp(48px,5vw,72px);padding-block:var(--about-section-space)}   /* equal top and bottom */
.rl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.rl-eyebrow{display:inline-flex;margin:0 0 14px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--glow-2);color:var(--accent);font-size:.8125rem;font-weight:600}
.rl-head h2{margin:0;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2}
.rl-intro{max-width:460px;margin:0;color:var(--muted)}
.rl-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:64px;align-items:center}

/* ---- the relay list: numbered circles joined by a vertical line ---- */
.rl-list{margin:0;padding:0;list-style:none}
.rl-item{position:relative;padding-bottom:24px}
.rl-item:last-child{padding-bottom:0}
.rl-item:not(:last-child)::before,.rl-item:not(:last-child)::after{content:"";position:absolute;inset-inline-start:25px;top:52px;bottom:0;width:2px;background:var(--border)}
.rl-item:not(:last-child)::after{background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .6s ease}
.rl-item.is-past::after{transform:scaleY(1)}                /* line fills once a person has passed the return on */
.rl-btn{display:flex;align-items:center;gap:20px;width:100%;min-height:52px;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer}
.rl-n{position:relative;z-index:1;display:grid;place-items:center;flex:0 0 52px;height:52px;border:2px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);font:700 1rem/1 "Playfair Display",Georgia,serif;transition:background .3s,border-color .3s,color .3s,box-shadow .3s}
.rl-item.is-past .rl-n{border-color:var(--accent);color:var(--accent)}
.rl-item.is-on .rl-n{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:0 0 0 6px var(--glow)}
.rl-who b{display:block;font:700 1.5rem/1.2 "Playfair Display",Georgia,serif;transition:color .3s}
.rl-who i{display:block;color:var(--muted);font-size:.9375rem;font-style:normal}
.rl-btn:hover .rl-who b,.rl-item.is-on .rl-who b{color:var(--accent)}
.rl-btn:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}
/* the description opens smoothly under the active name */
.rl-body{display:grid;grid-template-rows:0fr;margin-inline-start:72px;transition:grid-template-rows .5s ease}
.rl-item.is-on .rl-body{grid-template-rows:1fr}
.rl-in{min-height:0;overflow:hidden}
.rl-in p{max-width:460px;margin:12px 0 14px;color:var(--muted)}
.rl-chip{display:inline-block;padding:6px 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.8125rem;font-weight:700;letter-spacing:.04em}
.rl-track{display:block;max-width:260px;height:3px;margin-top:16px;overflow:hidden;border-radius:99px;background:var(--border)}
.rl-track i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left}
[dir="rtl"] .rl-track i{transform-origin:right}
.rl-item.is-on .rl-track i{transform:scaleX(1)}

/* ---- arched portrait with caption below ---- */
.rl-fig{display:flex;flex-direction:column;align-items:center;gap:28px;margin:0}
.rl-arch{position:relative;width:min(100%,380px)}
.rl-arch::before{content:"";position:absolute;inset-block:-14px 14px;inset-inline:14px -14px;border:2px solid var(--accent);border-radius:999px 999px 28px 28px;opacity:.5}
.rl-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--border);border-radius:999px 999px 28px 28px;background:var(--surface);box-shadow:0 24px 48px var(--glow)}
.rl-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0;transform:scale(1.08);transition:opacity .7s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rl-frame img.is-on{opacity:1;transform:none}
[data-theme="dark"] .rl-frame img{filter:brightness(.9)}
.rl-cap{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.rl-cap-n{color:var(--accent);font-size:.875rem;font-weight:700;letter-spacing:.06em}
.rl-cap-name{font:700 1.5rem/1.2 "Playfair Display",Georgia,serif;color:var(--text)}
.rl-cap-role{color:var(--muted);font-size:.9375rem}
.rl-cap.swap{animation:rl-swap .5s ease}
@keyframes rl-swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- tablet and mobile: portrait first, list below ---- */
@media(max-width:991px){
.rl-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:36px}
.rl-stage{grid-template-columns:minmax(0,1fr);gap:40px}
.rl-fig{order:-1}
.rl-arch{width:min(100%,300px)}
}
@media(max-width:560px){
.rl-n{flex-basis:44px;height:44px}
.rl-item:not(:last-child)::before,.rl-item:not(:last-child)::after{inset-inline-start:21px;top:44px}
.rl-body{margin-inline-start:64px}
.rl-who b{font-size:1.25rem}
}

/* ---- motion: entrance, drifting outline, and the auto-advance timer (paused out of view or on hover) ---- */
@media(prefers-reduced-motion:no-preference){
.js .about-relay:not(.seen) .rl-rise{opacity:0;transform:translateY(24px)}
.about-relay.seen .rl-rise{transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.rl-arch::before{animation:rl-drift 6s ease-in-out infinite}
@keyframes rl-drift{0%,100%{translate:0 0}50%{translate:6px -6px}}
.rl-item.is-on .rl-track i{transform:scaleX(0);animation:rl-timer 6s linear forwards paused}
.about-relay.in .rl-item.is-on .rl-track i{animation-play-state:running}
.rl-stage:hover .rl-item.is-on .rl-track i{animation-play-state:paused}
@keyframes rl-timer{to{transform:scaleX(1)}}
}

/* =====================================================
   ABOUT US · SECTION 4 — Trust-focused editorial split
   Grayscale photography, an even value grid and captions below photos.
   ===================================================== */
.about-split{--about-section-space:clamp(48px,5vw,72px);padding-block:var(--about-section-space);border-top:1px solid var(--border);background:var(--surface)}
.split-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(28px,5vw,68px);align-items:center}
/* Main photo and its separate caption */
.split-left{min-width:0;margin:0}
.split-main-img{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 20px 50px var(--glow-2)}
.split-main-img img,.split-small-img img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.split-main-img img{object-position:50% 42%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.split-main-img:hover img{transform:scale(1.035)}
.split-caption{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--muted);font-size:.875rem;line-height:1.5}
.split-caption-mark{width:24px;height:2px;flex:0 0 24px;background:var(--accent)}
@media(min-width:901px){
  .split-grid{align-items:stretch}
  .split-left{display:flex;flex-direction:column}
  .split-main-img{flex:1;min-height:0;aspect-ratio:auto}
}
/* Right-side story and evenly spaced service principles */
.split-right{min-width:0}
.split-content{display:flex;flex-direction:column;gap:20px}
.split-content .eyebrow{margin:0;color:var(--secondary);font-size:.875rem;letter-spacing:.12em}
.split-content h2{max-width:15ch;margin:0;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.12;letter-spacing:-.035em}
.split-content p{margin:0;color:var(--muted);font-size:1rem;line-height:1.7}
.split-content .split-intro{max-width:56ch;color:var(--text);font-size:1.0625rem}
.split-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.split-value{min-width:0;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 8px 22px var(--glow-2);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.split-value:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 12px 28px var(--glow)}
.split-value-number{display:block;margin-bottom:9px;color:var(--accent);font-size:.875rem;font-weight:600;letter-spacing:.1em}
.split-value h3{margin:0 0 5px;color:var(--text);font-size:1rem;line-height:1.3}
.split-value p{font-size:.875rem;line-height:1.45}
.split-content .split-detail{max-width:56ch}
/* The proof list and second photo stay in separate columns */
.split-proof-row{display:grid;grid-template-columns:minmax(0,1fr) 148px;align-items:center;gap:22px}
.split-list{display:flex;flex-direction:column;gap:11px;margin:0;padding:0;list-style:none}
.split-list li{display:flex;align-items:flex-start;gap:11px;color:var(--text);font-size:.875rem;line-height:1.5}
.split-list li::before{content:"";width:8px;height:8px;flex:0 0 8px;margin-top:.42em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow-2)}
.split-small-figure{width:148px;margin:0}
.split-small-img{width:100%;aspect-ratio:4/3;overflow:hidden;border:1px solid var(--border);border-radius:13px;background:var(--surface);box-shadow:0 12px 28px var(--glow-2)}
.split-small-img img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.split-small-figure:hover .split-small-img img{transform:scale(1.05)}
.split-small-caption{margin-top:8px;color:var(--muted);font-size:.875rem;line-height:1.45;text-align:end}

/* Narrow screens keep the same spacing rhythm and stack without collisions */
@media(max-width:900px){
  .about-split{padding-block:var(--about-section-space)}
  .split-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .split-main-img{aspect-ratio:16/9}
  .split-content h2{max-width:19ch}
  .split-small-figure{width:100%}
  .split-small-img{aspect-ratio:16/9}
}
@media(max-width:640px){
  .about-split{padding-block:var(--about-section-space)}
  .split-grid{gap:26px}
  .split-content{gap:18px}
  .split-values{gap:9px}
  .split-value{padding:12px}
  .split-proof-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .split-small-figure{width:100%;justify-self:center}
  .split-small-caption{text-align:center}
}

/* Staggered scroll reveal and image movement honor reduced-motion settings */
@media(prefers-reduced-motion:no-preference){
  .js .about-split:not(.in) .split-content>*{opacity:0;transform:translateY(22px)}
  .js .about-split.in .split-content>*{opacity:1;transform:none;transition:opacity .65s ease var(--d,0s),transform .65s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .about-split:not(.in) .split-main-img{opacity:0;clip-path:inset(0 0 100% 0 round 22px);transform:scale(1.04)}
  .js .about-split.in .split-main-img{opacity:1;clip-path:inset(0 0 0 0 round 22px);transform:none;transition:opacity .7s ease .12s,clip-path .9s cubic-bezier(.2,.7,.2,1) .12s,transform .9s cubic-bezier(.2,.7,.2,1) .12s}
  .js .about-split:not(.in) .split-small-figure{opacity:0;transform:translateY(18px) scale(.96)}
  .js .about-split.in .split-small-figure{opacity:1;transform:none;transition:opacity .65s ease .5s,transform .65s cubic-bezier(.2,.7,.2,1) .5s}
  .js .about-split:not(.in) .split-value{opacity:0;transform:translateY(14px)}
  .js .about-split.in .split-value{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .5s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  .js .about-split:not(.in) .split-list li{opacity:0;transform:translateX(-10px)}
  .js .about-split.in .split-list li{opacity:1;transform:none;transition:opacity .45s ease var(--d,0s),transform .45s ease var(--d,0s)}
}

/* =====================================================
   ABOUT US · SECTION 5 — Our Process
   Sticky intro column on one side, a five-step path on the other.
   A thin line links the numbered markers and fills in as the visitor scrolls.
   Only the site's colour variables are used. Top and bottom padding share one variable.
   ===================================================== */
/* --about-section-space is used for BOTH padding-top and padding-bottom, so they are always equal */
.about-process{--about-section-space:clamp(48px,5vw,72px);--proc-marker:56px;--proc-gap:20px;padding-block:var(--about-section-space);border-top:1px solid var(--border);background:var(--bg)}
/* two columns: narrow intro, wider steps; one gap value keeps spacing even */
.process-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(32px,5vw,72px);align-items:start}

/* ---- Left column ---- */
.process-intro{display:flex;flex-direction:column;gap:20px;min-width:0}
.process-intro .eyebrow{align-self:flex-start;margin:0;font-size:.875rem}
.process-intro h2{margin:0;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.12;letter-spacing:-.035em}
/* masked line so the heading can slide up on load */
.process-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.process-line>span{display:inline-block}
.process-lead{max-width:46ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.7}
/* photo and caption are separate blocks: the caption always sits below the image */
.process-figure{margin:0}
.process-photo{width:100%;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:0 16px 40px var(--glow-2)}
.process-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.process-figure:hover .process-photo img{transform:scale(1.04)}
.process-caption{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--muted);font-size:.875rem;line-height:1.5}
.process-caption-mark{flex:0 0 24px;width:24px;height:2px;background:var(--accent)}
/* progress meter */
.process-meter{display:flex;align-items:center;gap:16px}
.process-count{flex:0 0 auto;min-width:7.5em;color:var(--text);font-size:.9375rem;font-weight:600;font-variant-numeric:tabular-nums}
.process-bar{flex:1;height:6px;overflow:hidden;border-radius:999px;background:var(--border)}
.process-bar-fill{display:block;width:100%;height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(.2);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .process-bar-fill{transform-origin:right center}

/* ---- Right column: steps ---- */
.process-steps{display:flex;flex-direction:column;gap:var(--proc-gap);margin:0;padding:0;list-style:none}
/* each step = marker column + card */
.process-step{position:relative;display:grid;grid-template-columns:var(--proc-marker) minmax(0,1fr);column-gap:var(--proc-gap);align-items:start}
/* connector: grey track (::after) with an accent fill (::before) drawn on top of it.
   It starts 8px below this marker and stops 8px above the next one, so it never touches a marker. */
.process-step:not(:last-child)::before,.process-step:not(:last-child)::after{content:"";position:absolute;inset-inline-start:calc(var(--proc-marker) / 2 - 1px);top:calc(var(--proc-marker) + 8px);bottom:-12px;width:2px;border-radius:2px}
.process-step:not(:last-child)::after{background:var(--border)}
.process-step:not(:last-child)::before{z-index:1;background:var(--accent);transform:scaleY(0);transform-origin:top center;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.process-step.is-linked:not(:last-child)::before{transform:scaleY(1)}
/* numbered marker */
.process-marker{display:flex;align-items:center;justify-content:center;width:var(--proc-marker);height:var(--proc-marker);border:2px solid var(--border);border-radius:50%;background:var(--surface);color:var(--muted);font:700 1.125rem/1 "Playfair Display",Georgia,serif;transition:background .4s ease,border-color .4s ease,color .4s ease,box-shadow .4s ease,transform .4s cubic-bezier(.2,.9,.3,1.3)}
.process-step.is-done .process-marker{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:0 0 0 6px var(--glow-2)}
.process-step.is-current .process-marker{box-shadow:0 0 0 6px var(--glow);transform:scale(1.06)}
/* card: equal 24px padding, equal 16px gap between icon and text */
.process-card{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:start;gap:16px;min-width:0;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 8px 22px var(--glow-2);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.process-step:hover .process-card,.process-step.is-current .process-card{border-color:var(--accent);box-shadow:0 14px 32px var(--glow)}
.process-step:hover .process-card{transform:translateY(-3px)}
.process-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--accent);transition:background .3s ease,color .3s ease,border-color .3s ease}
.process-icon svg{width:24px;height:24px}
.process-step.is-current .process-icon,.process-step:hover .process-icon{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.process-text{min-width:0}
.process-text h3{margin:0 0 8px;color:var(--text);font-size:1.1875rem;line-height:1.3}
.process-text p{margin:0;color:var(--muted);font-size:1rem;line-height:1.65}

/* Sticky intro only where the whole column fits inside the viewport */
@media(min-width:992px) and (min-height:760px){
  .process-intro{position:sticky;top:calc(var(--nav-h) + var(--about-section-space))}
}
/* Tablet and mobile: single column, same rhythm */
@media(max-width:991px){
  .process-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .process-lead{max-width:60ch}
  .process-photo{aspect-ratio:16/9}
}
@media(max-width:640px){
  .about-process{--proc-marker:44px;--proc-gap:14px}
  .process-marker{font-size:1rem}
  .process-card{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px}
  .process-icon{width:44px;height:44px}
  .process-text h3{font-size:1.125rem}
  .process-meter{gap:12px}
}

/* Animation: runs only when the visitor has not asked for reduced motion.
   Elements start hidden (.js, not yet .in / .is-visible) and are revealed by index.js */
@media(prefers-reduced-motion:no-preference){
  /* heading slides up out of its mask */
  .js .about-process:not(.in) .process-line>span{transform:translateY(110%)}
  .js .about-process.in .process-line>span{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1) .1s}
  /* eyebrow, lead, photo and meter fade up in sequence (--d is set in JS) */
  .js .about-process:not(.in) .process-intro .eyebrow,.js .about-process:not(.in) .process-lead,.js .about-process:not(.in) .process-figure,.js .about-process:not(.in) .process-meter{opacity:0;transform:translateY(20px)}
  .js .about-process.in .process-intro .eyebrow,.js .about-process.in .process-lead,.js .about-process.in .process-figure,.js .about-process.in .process-meter{opacity:1;transform:none;transition:opacity .65s ease var(--d,0s),transform .65s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  /* photo is unmasked from the top */
  .js .about-process:not(.in) .process-photo{clip-path:inset(0 0 100% 0 round 18px)}
  .js .about-process.in .process-photo{clip-path:inset(0 0 0 0 round 18px);transition:clip-path .9s cubic-bezier(.2,.7,.2,1) .3s}
  /* each step enters when it scrolls into view */
  .js .process-step:not(.is-visible) .process-card{opacity:0;transform:translateY(28px)}
  .js .process-step:not(.is-visible) .process-marker{transform:scale(.6);opacity:0}
  .js .process-step.is-visible .process-card{opacity:1;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1),border-color .3s ease,box-shadow .3s ease}
  .js .process-step.is-visible .process-marker{opacity:1}
}
/* Reduced motion: no movement, instant state changes */
@media(prefers-reduced-motion:reduce){
  .process-step::before,.process-marker,.process-card,.process-bar-fill,.process-photo img{transition:none}
}

/* =====================================================
   ABOUT US · SECTION 6 — Our Core Values
   Value selector on the left drives a detail card on the right.
   All five panels share one grid cell, so the card keeps a constant height.
   Only the site's colour variables are used. Top and bottom padding share one variable.
   ===================================================== */
/* --about-section-space is used for BOTH padding-top and padding-bottom, so they are always equal.
   --vals-gap is the single spacing unit between the list and the card and between list items. */
.about-values{--about-section-space:clamp(48px,5vw,72px);--vals-gap:clamp(16px,2vw,24px);--vals-dur:6s;padding-block:var(--about-section-space);border-top:1px solid var(--border);background:var(--surface)}

/* ---- Header ---- */
.values-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(28px,4vw,44px)}
.values-head-main{min-width:0}
.values-head .eyebrow{margin:0 0 20px;font-size:.875rem}
.values-head h2{margin:0;font-size:clamp(2rem,3.8vw,3.25rem);line-height:1.12;letter-spacing:-.035em}
/* masked lines so the heading can slide up on load */
.values-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.values-line>span{display:inline-block}
.values-lead{flex:0 1 44ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.7}

/* ---- Board ---- */
.values-board{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--vals-gap);align-items:stretch}

/* ---- Left: tabs ---- */
.values-tabs{display:flex;flex-direction:column;gap:var(--vals-gap);min-width:0}
.values-tab{position:relative;display:flex;flex:1;align-items:center;gap:16px;min-height:64px;padding:14px 20px 18px;border:1px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif;text-align:start;cursor:pointer;transition:transform .3s ease,background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.values-tab:hover{border-color:var(--accent);transform:translateX(4px)}
[dir="rtl"] .values-tab:hover{transform:translateX(-4px)}
.values-tab-num{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--accent);font:700 .875rem/1 "Inter",system-ui,sans-serif;transition:background .3s ease,color .3s ease,border-color .3s ease}
.values-tab-name{flex:1;min-width:0}
/* small chevron that points toward the card */
.values-tab-arrow{flex:0 0 8px;width:8px;height:8px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(-45deg);opacity:.55}
[dir="rtl"] .values-tab-arrow{transform:rotate(135deg)}
/* selected tab is filled; text uses --bg so it reads in light and dark */
.values-tab[aria-selected="true"]{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:0 14px 30px var(--glow)}
.values-tab[aria-selected="true"] .values-tab-num{border-color:var(--bg);background:var(--bg);color:var(--accent)}
.values-tab[aria-selected="true"] .values-tab-arrow{opacity:1}
/* auto-play timer: a track and a fill, sitting inside the tab's bottom padding (clear of the text) */
.values-timer{position:absolute;inset-inline:20px;bottom:8px;height:3px;border-radius:3px;overflow:hidden;opacity:0}
.values-timer::before,.values-timer::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bg)}
.values-timer::before{opacity:.3}
.values-timer::after{transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .values-timer::after{transform-origin:right center}
.about-values.is-playing .values-tab[aria-selected="true"] .values-timer{opacity:1}
.about-values.is-playing .values-tab[aria-selected="true"] .values-timer::after{animation:values-timer var(--vals-dur) linear forwards}
.about-values.is-paused .values-timer::after{animation-play-state:paused}
@keyframes values-timer{to{transform:scaleX(1)}}

/* ---- Right: detail card ---- */
.values-stage{display:flex;flex-direction:column;gap:24px;min-width:0;padding:clamp(24px,3vw,40px);border:1px solid var(--border);border-radius:22px;background:var(--bg);box-shadow:0 20px 50px var(--glow-2)}
.values-panels{display:grid;flex:1;min-width:0}
/* every panel occupies the same cell; inactive ones are hidden but keep their size */
.values-panel{grid-area:1/1;display:flex;flex-direction:column;gap:20px;min-width:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease,visibility 0s linear .4s}
.values-panel.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .5s cubic-bezier(.2,.7,.2,1) .1s,visibility 0s}
.values-panel-top{display:flex;align-items:center;gap:16px}
.values-icon{display:grid;place-items:center;flex:0 0 56px;width:56px;height:56px;border-radius:14px;background:var(--accent);color:var(--bg);box-shadow:0 0 0 6px var(--glow-2)}
.values-icon svg{width:28px;height:28px}
.values-panel-label{color:var(--muted);font-size:.875rem;font-weight:600}
.values-panel h3{margin:0;font-size:clamp(1.625rem,2.6vw,2.25rem);line-height:1.15;letter-spacing:-.02em}
.values-desc{max-width:52ch;margin:0;color:var(--text);font-size:1.0625rem;line-height:1.7}
.values-sub{margin:0;color:var(--secondary);font-size:.9375rem;font-weight:600}
.values-points{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.values-points li{display:flex;align-items:flex-start;gap:12px;color:var(--text);font-size:.9375rem;line-height:1.5}
.values-points li::before{content:"";flex:0 0 8px;width:8px;height:8px;margin-top:.45em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow-2)}

/* ---- Footer row ---- */
.values-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid var(--border)}
.values-hint{color:var(--muted);font-size:.875rem;line-height:1.5}
.values-pause{flex:0 0 auto;height:38px;padding:0 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 .875rem/1 "Inter",system-ui,sans-serif;cursor:pointer;transition:border-color .25s ease,color .25s ease}
.values-pause:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Responsive: one column, same rhythm ---- */
@media(max-width:991px){
  .values-board{grid-template-columns:minmax(0,1fr)}
  .values-tab{flex:0 0 auto}
}
@media(max-width:640px){
  .values-head{flex-direction:column;align-items:flex-start}
  .values-lead{flex-basis:auto}
  .values-tab{gap:14px;padding:12px 16px 16px}
  .values-timer{inset-inline:16px}
  .values-stage{gap:20px}
  .values-foot{flex-wrap:wrap}
}

/* ---- Animation (only when reduced motion is not requested; index.js adds .in / .is-playing) ---- */
@media(prefers-reduced-motion:no-preference){
  /* heading slides up out of its mask */
  .js .about-values:not(.in) .values-line>span{transform:translateY(110%)}
  .js .about-values.in .values-line>span{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--i,0)*.12s)}
  /* eyebrow and lead fade up */
  .js .about-values:not(.in) .values-head .eyebrow,.js .about-values:not(.in) .values-lead{opacity:0;transform:translateY(18px)}
  .js .about-values.in .values-head .eyebrow,.js .about-values.in .values-lead{opacity:1;transform:none;transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  /* tabs slide in one after another; the card rises last */
  .js .about-values:not(.in) .values-tab{opacity:0;transform:translateX(-28px)}
  [dir="rtl"] .js .about-values:not(.in) .values-tab{transform:translateX(28px)}
  .js .about-values.in .values-tab{opacity:1;transition:opacity .5s ease calc(.3s + var(--i,0)*.1s),transform .5s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--i,0)*.1s),background .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
  .js .about-values:not(.in) .values-stage{opacity:0;transform:translateY(28px) scale(.98)}
  .js .about-values.in .values-stage{opacity:1;transform:none;transition:opacity .7s ease .45s,transform .8s cubic-bezier(.2,.7,.2,1) .45s}
  /* each time a value is selected, its icon pops and its three points stagger in */
  .values-panel.is-active .values-icon{animation:values-pop .5s cubic-bezier(.2,.9,.3,1.3) .1s both}
  .values-panel.is-active .values-points li{animation:values-rise .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0)*.09s)}
}
@keyframes values-pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes values-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Reduced motion: switch instantly, no auto-play timer */
@media(prefers-reduced-motion:reduce){
  .values-panel,.values-panel.is-active,.values-tab,.values-tab-num{transition:none}
}

/* =====================================================
   ABOUT US · SECTION 7 — Final call to action
   One accent panel: message and buttons on the left, a summary card on the right
   whose figures sharpen from blurred to clear. Only the site's colour variables are used.
   ===================================================== */
/* --about-section-space is used for BOTH padding-top and padding-bottom, so they are always equal */
.about-final-cta{--about-section-space:clamp(48px,5vw,72px);--cta-pad:clamp(28px,5vw,64px);padding-block:var(--about-section-space);border-top:1px solid var(--border);background:var(--bg)}
/* panel: filled with the accent colours; one padding value on all sides, one gap between columns */
.cta-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--cta-pad);align-items:center;padding:var(--cta-pad);border-radius:28px;background:linear-gradient(135deg,var(--accent),var(--secondary));box-shadow:0 24px 60px var(--glow)}

/* ---- Left: copy ---- */
.cta-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.cta-copy h2{margin:0;color:var(--bg);font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;letter-spacing:-.035em}
/* masked lines so the heading can slide up on load */
.cta-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cta-line>span{display:inline-block}
.cta-text{max-width:46ch;margin:0;color:var(--bg);font-size:1.0625rem;line-height:1.7}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
/* buttons: --bg and --accent swap roles so they read on the panel in light and dark mode */
.cta-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 28px;border:2px solid var(--bg);border-radius:12px;font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
.cta-btn-main{background:var(--bg);color:var(--accent)}
.cta-btn-main:hover{transform:translateY(-3px);box-shadow:0 12px 26px var(--glow)}
.cta-btn-ghost{background:transparent;color:var(--bg)}
.cta-btn-ghost:hover{transform:translateY(-3px);background:var(--bg);color:var(--accent)}
.cta-btn:focus-visible{outline:3px solid var(--bg);outline-offset:3px}

/* ---- Right: summary card + caption below it ---- */
.cta-visual{min-width:0;margin:0}
.cta-card{padding:24px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 18px 44px var(--glow)}
.cta-card-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.cta-card-title{color:var(--text);font:700 1.125rem/1.3 "Playfair Display",Georgia,serif}
.cta-card-pill{padding:6px 14px;border-radius:999px;background:var(--accent);color:var(--bg);font-size:.875rem;font-weight:600;line-height:1.2}
.cta-rows{margin:0;padding:0;list-style:none}
/* every row has the same padding, so spacing is even */
.cta-row{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--border)}
.cta-row:last-child{padding-bottom:0;border-bottom:0}
.cta-row-body{display:flex;flex:1;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.cta-row-label{color:var(--muted);font-size:1rem}
.cta-row-value{color:var(--text);font-size:1.1875rem;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cta-row-tick{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--bg)}
.cta-row-tick svg{width:14px;height:14px}
/* caption is outside the card, below it */
.cta-caption{margin-top:14px;color:var(--bg);font-size:.875rem;line-height:1.5;text-align:end}

/* ---- Responsive ---- */
@media(max-width:900px){
  .cta-panel{grid-template-columns:minmax(0,1fr)}
  .cta-caption{text-align:start}
}
@media(max-width:480px){
  .cta-panel{border-radius:22px}
  .cta-actions{width:100%}
  .cta-btn{flex:1 1 100%}
  .cta-card{padding:20px}
  .cta-row{gap:8px}
  .cta-row-body{display:grid;grid-template-columns:minmax(0,1fr);justify-content:start;gap:4px}
  .cta-row-label{min-width:0}
  .cta-row-value{font-size:1rem}
  .cta-row-tick{align-self:center;flex-basis:26px;width:26px;height:26px}
}

/* ---- Animation (only when reduced motion is not requested; index.js adds .in) ---- */
@media(prefers-reduced-motion:no-preference){
  /* panel wipes open from the start edge */
  .js .about-final-cta:not(.in) .cta-panel{clip-path:inset(0 100% 0 0 round 28px)}
  [dir="rtl"] .js .about-final-cta:not(.in) .cta-panel{clip-path:inset(0 0 0 100% round 28px)}
  .js .about-final-cta.in .cta-panel{clip-path:inset(0 0 0 0 round 28px);transition:clip-path 1s cubic-bezier(.2,.7,.2,1)}
  /* heading lines slide up */
  .js .about-final-cta:not(.in) .cta-line>span{transform:translateY(110%)}
  .js .about-final-cta.in .cta-line>span{transform:none;transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i,0)*.12s)}
  /* text and buttons fade up in order */
  .js .about-final-cta:not(.in) .cta-text,.js .about-final-cta:not(.in) .cta-btn{opacity:0;transform:translateY(18px)}
  .js .about-final-cta.in .cta-text,.js .about-final-cta.in .cta-btn{opacity:1;transform:none;transition:opacity .6s ease var(--d,0s),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0s),background .25s ease,color .25s ease,box-shadow .25s ease}
  /* summary card rises in */
  .js .about-final-cta:not(.in) .cta-card,.js .about-final-cta:not(.in) .cta-caption{opacity:0;transform:translateY(26px)}
  .js .about-final-cta.in .cta-card,.js .about-final-cta.in .cta-caption{opacity:1;transform:none;transition:opacity .7s ease var(--d,0s),transform .8s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
  /* figures start blurred and sharpen row by row, then each tick pops */
  .js .about-final-cta:not(.in) .cta-row-body{filter:blur(8px);opacity:.5}
  .js .about-final-cta.in .cta-row-body{filter:none;opacity:1;transition:filter .9s ease calc(1.1s + var(--i,0)*.35s),opacity .9s ease calc(1.1s + var(--i,0)*.35s)}
  .js .about-final-cta:not(.in) .cta-row-tick{transform:scale(0);opacity:0}
  .js .about-final-cta.in .cta-row-tick{transform:none;opacity:1;transition:transform .5s cubic-bezier(.2,.9,.3,1.4) calc(1.5s + var(--i,0)*.35s),opacity .3s ease calc(1.5s + var(--i,0)*.35s)}
}

/* =====================================================
   HOME 2 · SECTION 5 — Proof panel
   No outer box. Copy and cards sit on the section background.
   A photo fills the full height of the right side of the section
   (out to the page edge) and carries no text; the two white cards
   rest on its left edge, as in the reference.
   ===================================================== */
/* --pf-pad is the section's top AND bottom padding, so the two are always equal */
.pf{--pf-pad:clamp(80px,9vh,112px);--pf-side-pad:clamp(24px,3vw,44px);position:relative;overflow:hidden;min-height:clamp(680px,82vh,900px);display:flex;align-items:center;padding:var(--pf-pad) 0;background:var(--bg);border-block:1px solid var(--border)}
/* grid wrapper: positioning only (no border, background or shadow) */
.pf-grid{position:relative;width:100%}
/* left side: sits above the photo so the cards stay on top of it */
.pf-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:24px;min-width:0;padding-inline:var(--pf-side-pad)}
/* photo: starts 70% across the content width, runs to the page edge (50% - 50vw = distance from the container edge to the screen edge) and covers the full section height */
.pf-photo{position:absolute;z-index:0;top:calc(var(--pf-pad) * -1);bottom:calc(var(--pf-pad) * -1);inset-inline-start:70%;inset-inline-end:var(--pf-side-pad);margin:0;overflow:hidden}
.pf-photo img{position:absolute;inset:-24px 0;width:100%;height:calc(100% + 48px);object-fit:cover;object-position:50% 50%;scale:1.1;transform:translate3d(0,var(--py,0px),0);display:block}
.pf-tag{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;color:var(--on-primary);background:var(--accent);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif}
.pf-tag .pulse{background:var(--on-primary)}
/* heading stops before the photo so text never reaches the image */
.pf-title{margin:0;max-width:calc(70% - 24px);font-size:clamp(1.625rem,2.7vw,2.25rem);line-height:1.2}
.pf-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.pf-line>span{display:inline-block}
/* list + three cards in one even row (equal 16px gaps) */
.pf-body{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:16px;width:100%}
.pf-list{display:grid;align-content:space-between;gap:16px;margin:0;padding:0;list-style:none}
.pf-item{display:flex;align-items:flex-start;gap:14px;min-width:0}
.pf-ico{flex:0 0 40px;width:40px;height:40px;color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pf-item>div{min-width:0}
.pf-item h3{margin:0 0 2px;font:600 .9375rem/1.35 "Inter",system-ui,sans-serif;color:var(--text)}
.pf-item p{margin:0;max-width:none;color:var(--muted);font-size:.875rem;line-height:1.45}
/* cards */
/* cards: solid surface so text is always readable, even where a card rests on the photo */
.pf-card{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:224px;padding:22px 18px;background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);transition:border-color .25s ease}
@media(min-width:761px){.pf-body>.pf-card{width:calc(100% - 20px);justify-self:center}}
.pf-card:hover{border-color:var(--accent)}
.pf-card h3{margin:0;font:600 .9375rem/1.35 "Inter",system-ui,sans-serif;color:var(--text)}
.pf-card p{margin:0;max-width:none;color:var(--muted);font-size:.875rem;line-height:1.5}
.pf-big{display:flex;align-items:baseline;color:var(--accent);font:700 2rem/1.1 "Playfair Display",Georgia,serif}
/* filled card: the main proof point */
.pf-dark{color:var(--on-primary);background:var(--accent);border-color:var(--accent)}
.pf-dark:hover{border-color:var(--accent)}
.pf-dark h3,.pf-dark .pf-big{color:var(--on-primary)}
.pf-dark .pf-big{font-size:clamp(2.5rem,4vw,3.25rem)}
.pf-dark p{color:var(--on-primary);opacity:.92}
.pf-bar{height:6px;margin-top:auto;overflow:hidden;border-radius:4px;background:color-mix(in srgb,var(--on-primary) 28%,transparent)}
.pf-bar i{display:block;height:100%;border-radius:4px;background:var(--on-primary);transform:scaleX(var(--v,1));transform-origin:left center}
[dir="rtl"] .pf-bar i{transform-origin:right center}
.pf-perks{display:grid;gap:10px;margin:2px 0 0;padding:0;list-style:none}
.pf-perks li{display:flex;gap:8px;color:var(--text);font-size:.875rem;line-height:1.4}
.pf-perks svg{flex:0 0 16px;width:16px;height:16px;margin-top:2px;color:var(--accent)}

/* tablets and phones: the photo becomes a banner above the copy, so nothing sits on the photo */
@media(max-width:1023px){
.pf{--pf-pad:56px}
.pf{min-height:0;display:block}
.pf-grid.container{width:calc(100% - 32px);margin-inline:auto}
.pf-main{padding-inline:0}
.pf-grid{display:flex;flex-direction:column;gap:24px}
.pf-photo{position:relative;order:-1;inset:auto;aspect-ratio:21/9;border-radius:22px}
.pf-title{max-width:26em}
.pf-body{grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-list{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start}
/* in a row of three, each icon sits above its text */
.pf-item{flex-direction:column;gap:10px}
}
/* phones: everything stacks in one column */
@media(max-width:760px){
.pf{--pf-pad:48px}
.pf-photo{aspect-ratio:16/9;border-radius:18px}
.pf-main{gap:20px}
.pf-body{grid-template-columns:minmax(0,1fr);gap:14px}
.pf-list{grid-template-columns:minmax(0,1fr);gap:16px}
.pf-item{flex-direction:row;gap:14px}
}

/* section 5 motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes pf-ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--on-primary) 55%,transparent)}to{box-shadow:0 0 0 9px transparent}}
@keyframes pf-zoom{from{scale:1.32}}
.pf-tag .pulse{animation:pf-ping 1.8s ease-out infinite}
/* Keep the proof section visible if its reveal observer is unavailable. */
.js .pf.in .pf-tag{transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.js .pf.in .pf-line>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--l,0) * .12s)}
.js .pf.in .pf-item{transition:opacity .6s ease calc(.55s + var(--o,0) * .14s),transform .6s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--o,0) * .14s)}
.js .pf.in .pf-ico path,.js .pf.in .pf-ico circle,.js .pf.in .pf-ico rect{stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s ease calc(.7s + var(--o,0) * .14s)}
.js .pf.in .pf-card{transition:opacity .7s ease calc(.7s + var(--o,0) * .12s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.7s + var(--o,0) * .12s),translate .25s ease 0s,border-color .25s ease 0s}
.pf-card:hover{translate:0 -4px}
.js .pf.in .pf-bar i{transition:transform 1.6s cubic-bezier(.2,.7,.2,1) 1.1s}
.js .pf.in .pf-perks svg{transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(1.2s + var(--o,0) * .15s)}
.js .pf.in .pf-photo img{transition:clip-path 1.3s cubic-bezier(.2,.7,.2,1) .2s}
.pf.in .pf-photo img{animation:pf-zoom 1.8s cubic-bezier(.2,.7,.2,1) .2s backwards}
}


/* =====================================================
   HOME 2 · SECTION 6 — Client snapshots
   Row 1 is one wide filled band: a short intro, then four
   photo tiles with their captions BELOW the photos.
   Row 2 is a photo, a block of about text and a filled
   column of four numbers. The number column starts exactly
   where the band ends, so the two filled areas join up.
   The fill is the site's teal (--accent) with --bg text on
   top, so it reads in light and dark mode.
   ===================================================== */
.cs{
  --g:24px;                                                     /* one gap used everywhere: between cells, tiles and rows */
  --pad:clamp(24px,3vw,40px);                                   /* inner padding of both filled areas */
  --pn:var(--accent);                                           /* fill of the band and the number column */
  --pn-t:var(--bg);                                             /* text on the fill */
  --pn-t2:color-mix(in srgb,var(--bg) 90%,transparent);         /* softer text on the fill */
  --pn-line:color-mix(in srgb,var(--bg) 32%,transparent);       /* thin lines on the fill */
  padding:72px 0;                                               /* top and bottom padding are equal */
  background:var(--bg)
}

/* board: twelve columns, row 1 = band, row 2 = photo + about + numbers */
.cs-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--g)}

/* ---------- Row 1: the filled band ---------- */
.cs-band{position:relative;grid-column:1/-1;overflow:hidden;padding:var(--pad);color:var(--pn-t);background:var(--pn);border-radius:28px;border-end-end-radius:0}
/* soft light from the top-left corner (decoration, sits behind the content) */
.cs-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 6% 0,color-mix(in srgb,var(--bg) 18%,transparent),transparent 55%);pointer-events:none}
/* intro column + four tile columns */
.cs-band-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:var(--g)}

/* intro */
.cs-intro{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.cs-tag{display:flex;align-items:center;gap:12px;margin:0 0 16px;color:var(--pn-t);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.cs-tag::before{content:"";flex:0 0 28px;height:2px;background:currentColor}
.cs-intro h2{margin:0 0 16px;color:var(--pn-t);font-size:clamp(1.375rem,1.9vw,2rem);line-height:1.15}
.cs-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.cs-line>span{display:block}
.cs-lead{margin:0 0 24px;color:var(--pn-t2);font-size:.9375rem;line-height:1.55}
/* "view all" link: small capitals, underline draws on hover, arrow nudges */
.cs-more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-bottom:6px;color:var(--pn-t);border-bottom:1px solid var(--pn-line);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:border-color .3s ease}
.cs-more svg{width:18px;height:18px;transition:transform .3s ease}
.cs-more:hover{border-color:var(--pn-t)}
.cs-more:hover svg{transform:translateX(4px)}
[dir="rtl"] .cs-more svg{transform:scaleX(-1)}
[dir="rtl"] .cs-more:hover svg{transform:scaleX(-1) translateX(4px)}
.cs-more:focus-visible,.cs-tile:focus-visible{outline:3px solid var(--pn-t);outline-offset:4px;border-radius:6px}

/* tiles: photo first, caption underneath (never on the photo) */
.cs-tile{display:flex;flex-direction:column;gap:14px;min-width:0;color:var(--pn-t);text-decoration:none}
.cs-fig{margin:0;overflow:hidden;aspect-ratio:1/1;border-radius:14px;background:var(--pn-line)}
.cs-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 50%)}
[data-theme="dark"] .cs-fig img{filter:brightness(.88)}
.cs-cap h3{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 2px;color:var(--pn-t);font:600 .9375rem/1.3 "Inter",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.cs-cap h3 svg{flex:0 0 18px;width:18px;height:18px}
.cs-cap p{margin:0;color:var(--pn-t2);font-size:.875rem;line-height:1.4}

/* ---------- Row 2 ---------- */
/* left: photo */
.cs-photo{position:relative;grid-column:1/5;min-height:300px;margin:0;overflow:hidden;border:1px solid var(--border);border-radius:24px}
.cs-photo img{position:absolute;inset:-20px 0;width:100%;height:calc(100% + 40px);object-fit:cover;object-position:50% 40%;scale:1.08;transform:translate3d(0,var(--py,0px),0)}
[data-theme="dark"] .cs-photo img{filter:brightness(.88)}

/* middle: about text, centred between the photo and the numbers */
.cs-about{grid-column:5/9;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;min-width:0}
.cs-about .cs-tag{margin:0;color:var(--accent)}
.cs-about h3{margin:0;font-size:clamp(1.5rem,2.2vw,1.875rem);line-height:1.2;text-wrap:balance}
.cs-about p:not(.cs-tag){margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.cs-ticks{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.cs-ticks li{display:flex;align-items:center;gap:10px;color:var(--text);font:500 .9375rem/1.4 "Inter",system-ui,sans-serif}
.cs-ticks svg{flex:0 0 20px;width:20px;height:20px;color:var(--accent)}
.cs-about .btn{gap:10px}
.cs-about .btn svg{width:18px;height:18px;transition:transform .25s ease}
.cs-about .btn:hover svg{transform:translate(2px,-2px)}
[dir="rtl"] .cs-about .btn svg{transform:scaleX(-1)}
[dir="rtl"] .cs-about .btn:hover svg{transform:scaleX(-1) translate(2px,-2px)}

/* right: filled column of numbers; pulled up by one gap so it touches the band */
.cs-stats{position:relative;grid-column:9/-1;margin-top:calc(var(--g)*-1);padding:var(--pad);color:var(--pn-t);background:var(--pn);border-radius:0 0 28px 28px}
/* small curved corner where the column meets the band (fills the column gap, so nothing overlaps) */
.cs-stats::before{content:"";position:absolute;top:0;inset-inline-end:100%;width:var(--g);height:var(--g);background:radial-gradient(circle at 0 100%,transparent calc(var(--g) - .5px),var(--pn) var(--g))}
[dir="rtl"] .cs-stats::before{background:radial-gradient(circle at 100% 100%,transparent calc(var(--g) - .5px),var(--pn) var(--g))}
.cs-stats-list{display:grid;grid-template-rows:repeat(4,minmax(0,1fr));height:100%;margin:0;padding:0;list-style:none}
.cs-stat{display:flex;flex-direction:column;justify-content:center;gap:4px;padding-block:12px;border-top:1px solid var(--pn-line)}
.cs-stat:first-child{border-top:0;padding-top:0}
.cs-stat:last-child{padding-bottom:0}
.cs-num{color:var(--pn-t);font:700 clamp(1.875rem,2.7vw,2.5rem)/1.05 "Playfair Display",Georgia,serif}
.cs-lab{color:var(--pn-t2);font:600 .875rem/1.35 "Inter",system-ui,sans-serif;letter-spacing:.07em;text-transform:uppercase}
/* right-to-left: caption titles keep the sans-serif face and the numbers keep their digit order */
[dir="rtl"] .cs-cap h3{font-family:"Inter","Segoe UI",Tahoma,"Noto Sans Arabic","Noto Sans Hebrew",Arial,sans-serif}
[dir="rtl"] .cs-num{direction:ltr;unicode-bidi:isolate;text-align:right}

/* below 1280px the tiles get narrow: the small arrow beside each caption title is dropped so titles never wrap */
@media(max-width:1279px){
.cs-cap h3 svg{display:none}
.cs-cap h3{letter-spacing:.04em}
}
/* tablet (700 to 1099px): the intro sits above four tiles; the numbers become a full-width row */
@media(max-width:1099px){
.cs-band{border-end-end-radius:28px}
.cs-band-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
/* intro becomes two columns: label, headline and link on the left, the short text centred on the right */
.cs-intro{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:var(--g);align-items:start}
.cs-intro .cs-tag,.cs-intro h2,.cs-intro .cs-more{grid-column:1}
.cs-intro .cs-tag{grid-row:1}
.cs-intro h2{grid-row:2}
.cs-intro .cs-more{grid-row:3;justify-self:start;margin-top:0}
.cs-intro .cs-lead{grid-column:2;grid-row:1/4;align-self:center;max-width:44ch;margin:0}
.cs-photo{grid-column:1/7}
.cs-about{grid-column:7/-1}
.cs-stats{grid-column:1/-1;margin-top:0;padding:var(--pad);border-radius:28px}
.cs-stats::before{display:none}
.cs-stats-list{grid-template-rows:none;grid-template-columns:repeat(4,minmax(0,1fr))}
.cs-stat,.cs-stat:first-child,.cs-stat:last-child{justify-content:flex-start;padding:4px 20px;border-top:0;border-inline-start:1px solid var(--pn-line)}
.cs-stat:first-child{border-inline-start:0;padding-inline-start:0}
.cs-stat:last-child{padding-inline-end:0}
}
@media(max-width:900px){
.cs{padding:48px 0}
}
/* phones (below 700px): everything stacks in one column, tiles and numbers in two */
@media(max-width:699px){
.cs{--g:16px}
.cs-band,.cs-stats{border-radius:22px}
.cs-band-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.cs-intro{display:flex}
.cs-intro .cs-lead{max-width:none;margin:0 0 24px}
.cs-intro .cs-more{margin-top:0}
.cs-photo,.cs-about,.cs-stats{grid-column:1/-1}
.cs-photo{min-height:0;aspect-ratio:4/3;border-radius:20px}
.cs-cap h3{display:block;min-height:2.6em}
.cs-cap p{min-height:2.8em}
.cs-stats-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
.cs-stat,.cs-stat:first-child,.cs-stat:last-child{padding:16px 0;border-inline-start:0;border-top:1px solid var(--pn-line)}
.cs-stat:nth-child(-n+2){border-top:0;padding-top:0}
.cs-stat:nth-child(n+3){padding-bottom:0}
.cs-stat:nth-child(even){padding-inline-start:16px;border-inline-start:1px solid var(--pn-line)}
.cs-num{font-size:clamp(1.75rem,8vw,2.25rem)}
}

/* motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes cs-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes cs-wipe-rtl{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes cs-shutter{from{clip-path:inset(100% 0 0 0 round 14px)}to{clip-path:inset(0 0 0 0 round 14px)}}
@keyframes cs-settle{from{transform:scale(1.32)}to{transform:none}}
@keyframes cs-open{from{clip-path:inset(0 -30px 100% -30px)}to{clip-path:inset(0 -30px 0 -30px)}}
@keyframes cs-photo-in{from{clip-path:inset(100% 0 0 0 round 24px)}to{clip-path:inset(0 0 0 0 round 24px)}}
@keyframes cs-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cs-line{from{transform:translateY(112%)}to{transform:none}}
@keyframes cs-sweep{0%{transform:translateX(-100%)}50%,100%{transform:translateX(100%)}}
@keyframes cs-sweep-rtl{0%{transform:translateX(100%)}50%,100%{transform:translateX(-100%)}}
/* ambient: a thin light runs along the top edge of the band every few seconds (stays on the edge, never crosses text) */
.cs-band::after{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,transparent,var(--pn-t),transparent);transform:translateX(-100%);animation:cs-sweep 7s ease-in-out 3s infinite;pointer-events:none}
[dir="rtl"] .cs-band::after{animation-name:cs-sweep-rtl}
/* hover: photo zooms inside its frame, caption arrow lifts */
.cs-fig img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cs-tile:hover .cs-fig img,.cs-tile:focus-visible .cs-fig img{transform:scale(1.07)}
.cs-cap h3 svg{transition:transform .3s ease}
.cs-tile:hover .cs-cap h3 svg{transform:translate(3px,-3px)}
/* entrance (only when JavaScript is running): band wipes in, headline lines rise, photos open like shutters,
   the number column drops down out of the band, the photo opens from the bottom, about text rises */
.js .cs:not(.in) .cs-band{clip-path:inset(0 100% 0 0)}
.js[dir="rtl"] .cs:not(.in) .cs-band{clip-path:inset(0 0 0 100%)}
.js .cs.in .cs-band{animation:cs-wipe 1.1s cubic-bezier(.65,0,.2,1) backwards}
.js[dir="rtl"] .cs.in .cs-band{animation-name:cs-wipe-rtl}
.js .cs:not(.in) .cs-line>span{transform:translateY(112%)}
.js .cs.in .cs-line>span{animation:cs-line .9s cubic-bezier(.2,.7,.2,1) calc(.55s + var(--l,0)*.12s) backwards}
.js .cs:not(.in) .cs-rise{opacity:0}
.js .cs.in .cs-band .cs-rise{animation:cs-rise .7s cubic-bezier(.2,.7,.2,1) calc(.75s + var(--k,0)*.12s) backwards}
.js .cs:not(.in) .cs-fig{clip-path:inset(100% 0 0 0 round 14px)}
.js .cs.in .cs-fig{animation:cs-shutter 1s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--k,0)*.14s) backwards}
.js .cs.in .cs-fig img{animation:cs-settle 1.7s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--k,0)*.14s) backwards}
.js .cs:not(.in) .cs-cap{opacity:0}
.js .cs.in .cs-cap{animation:cs-rise .7s cubic-bezier(.2,.7,.2,1) calc(1.2s + var(--k,0)*.14s) backwards}
.js .cs:not(.in) .cs-stats{clip-path:inset(0 -30px 100% -30px)}
.js .cs.in .cs-stats{animation:cs-open 1s cubic-bezier(.65,0,.2,1) 1.05s backwards}
.js .cs:not(.in) .cs-stat{opacity:0}
.js .cs.in .cs-stat{animation:cs-rise .7s cubic-bezier(.2,.7,.2,1) calc(1.45s + var(--k,0)*.13s) backwards}
.js .cs:not(.in) .cs-photo{clip-path:inset(100% 0 0 0 round 24px)}
.js .cs.in .cs-photo{animation:cs-photo-in 1.1s cubic-bezier(.2,.7,.2,1) .9s backwards}
.js .cs.in .cs-about .cs-rise{animation:cs-rise .7s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--k,0)*.12s) backwards}
}


/* =====================================================
   HOME 2 · SECTION 7 — Deadline calendar (stress-free tax season)
   Left: four deadline tabs. Right: the plan for the open one (3 steps).
   Bottom: a 12-month ribbon that lights up the months of the open deadline.
   Only the site colour variables are used. Nothing sits on a photo.
   ===================================================== */
.dl{
  --g:24px;                                                     /* one gap used between columns, rows and cards */
  --pad:clamp(20px,2.6vw,32px);                                 /* inner padding of the plan box */
  padding:72px 0;                                               /* top and bottom padding are equal */
  background:var(--surface);
  border-block:1px solid var(--border)
}

/* ---------- Header ---------- */
.dl-head{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:var(--g);margin-bottom:var(--g)}
.dl-tag{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 16px;color:var(--on-primary);background:var(--accent);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif}
.dl-tag .pulse{background:var(--on-primary)}
.dl-head h2{margin:0;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2}
.dl-hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}   /* each headline line rises out of a mask */
.dl-hl>span{display:inline-block}
.dl-lead{margin:0;max-width:none;color:var(--muted);font-size:1rem;line-height:1.6}

/* ---------- Board: tabs + plan box ---------- */
.dl-board{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--g);align-items:stretch}
.dl-tabs{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.dl-tabs>li{display:flex;flex:1}                                /* the four tabs share the box height equally */

/* one deadline tab: date badge + text (the progress bar runs along its bottom edge) */
.dl-tab{position:relative;display:flex;align-items:center;gap:16px;width:100%;overflow:hidden;padding:14px 18px;text-align:start;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:18px;font:inherit;cursor:pointer;transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.dl-tab:hover{border-color:var(--accent)}
.dl-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dl-date{flex:0 0 84px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 6px;color:var(--accent);background:var(--surface);border:1px solid var(--border);border-radius:14px;transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.dl-date b{font:700 1.5rem/1 "Playfair Display",Georgia,serif}
.dl-date span{font:600 .8125rem/1.2 "Inter",system-ui,sans-serif}
.dl-tab-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.dl-tab-txt strong{font:600 1rem/1.35 "Inter",system-ui,sans-serif}
.dl-tab-txt span{color:var(--muted);font-size:.875rem;line-height:1.4;transition:color .3s ease}
/* open tab: filled with the accent */
.dl-tab.is-active{color:var(--on-primary);background:var(--accent);border-color:var(--accent);box-shadow:0 10px 24px var(--glow)}
.dl-tab.is-active .dl-date{color:var(--on-primary);background:color-mix(in srgb,var(--on-primary) 16%,transparent);border-color:color-mix(in srgb,var(--on-primary) 36%,transparent)}
.dl-tab.is-active .dl-tab-txt span{color:var(--on-primary)}
/* progress bar (only moves for visitors who allow motion; see the motion block below) */
.dl-prog{position:absolute;inset:auto 0 0 0;height:4px;background:var(--on-primary);opacity:.9;transform:scaleX(0);transform-origin:left center}
[dir="rtl"] .dl-prog{transform-origin:right center}

/* ---------- Plan box ---------- */
.dl-panels{display:flex;flex-direction:column;gap:var(--g);min-width:0;padding:var(--pad);background:var(--bg);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}
.dl-stack{flex:1}
.dl-panel:not(.is-active){display:none}                         /* without JavaScript only the first plan shows */
.js .dl-stack{display:grid}                                     /* with JavaScript all plans share one cell */
.js .dl-panel{display:block;grid-area:1/1;transition:opacity .35s ease,visibility .35s ease}
.js .dl-panel:not(.is-active){visibility:hidden;opacity:0;pointer-events:none}
.dl-kicker{margin:0 0 4px;color:var(--accent);font:600 .875rem/1.3 "Inter",system-ui,sans-serif}
.dl-panel h3{margin:0 0 8px;font-size:clamp(1.375rem,2.2vw,1.75rem)}
.dl-desc{margin:0 0 var(--g);max-width:none;color:var(--muted);font-size:1rem;line-height:1.55}

/* three steps: node, a connecting line that stops before the next node, then text (no overlap) */
.dl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);margin:0;padding:0;list-style:none}
.dl-step{min-width:0}
.dl-step-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dl-node{flex:0 0 44px;display:grid;place-items:center;width:44px;height:44px;color:var(--accent);background:var(--surface);border:1.5px solid var(--accent);border-radius:50%}
.dl-node svg{width:20px;height:20px}
.dl-line{position:relative;flex:1;height:2px;overflow:hidden;background:var(--border);border-radius:2px}
.dl-line::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:left center}
[dir="rtl"] .dl-line::after{transform-origin:right center}
.dl-step h4{margin:0 0 4px;font:600 1rem/1.35 "Inter",system-ui,sans-serif}
.dl-step p{margin:0;max-width:none;color:var(--muted);font-size:.875rem;line-height:1.5}

/* plan box footer */
.dl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:var(--g);border-top:1px solid var(--border)}
.dl-foot p{margin:0;max-width:none;color:var(--muted);font-size:.9375rem}

/* ---------- Month ribbon ---------- */
.dl-ribbon{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin:var(--g) 0 0;padding:0;list-style:none}
.dl-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:14px;transition:background-color .35s ease calc(var(--i) * 35ms),color .35s ease calc(var(--i) * 35ms),border-color .35s ease calc(var(--i) * 35ms),box-shadow .35s ease calc(var(--i) * 35ms)}
.dl-mo{font:600 .875rem/1.3 "Inter",system-ui,sans-serif}
.dl-dy{min-height:1.3em;font:700 .875rem/1.3 "Inter",system-ui,sans-serif}   /* day of the due date (empty when the month is not lit) */
.dl-cell.is-lit{color:var(--on-primary);background:var(--accent);border-color:var(--accent);box-shadow:0 8px 18px var(--glow)}
.dl-note{margin:12px 0 0;max-width:none;color:var(--muted);font-size:.875rem;line-height:1.5}

/* ---------- Tablets: header and board stack, tabs become a 2 x 2 grid ---------- */
@media(max-width:1023px){
.dl{padding:56px 0}
.dl-head{grid-template-columns:minmax(0,1fr)}
.dl-board{grid-template-columns:minmax(0,1fr)}
.dl-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dl-ribbon{grid-template-columns:repeat(6,minmax(0,1fr))}
}
/* ---------- Phones: one column everywhere ---------- */
@media(max-width:640px){
.dl{padding:48px 0;--g:20px}
.dl-tabs{grid-template-columns:minmax(0,1fr);gap:10px}
.dl-steps{grid-template-columns:minmax(0,1fr)}
.dl-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px}
.dl-step-top{grid-row:1/3;margin:0}
.dl-line{display:none}                                          /* in one column the numbers already show the order */
.dl-foot .btn{width:100%}
}

/* ---------- Motion (skipped when the visitor prefers reduced motion) ---------- */
@media(prefers-reduced-motion:no-preference){
@keyframes dl-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes dl-draw{from{transform:scaleX(0)}}
@keyframes dl-pop{from{transform:scale(.6);opacity:0}}
@keyframes dl-fill{to{transform:scaleX(1)}}
@keyframes dl-ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--on-primary) 55%,transparent)}to{box-shadow:0 0 0 9px transparent}}
.dl-tag .pulse{animation:dl-ping 1.8s ease-out infinite}
/* on first view: headline lines rise, everything else fades up one after another */
.js .dl:not(.in) .dl-hl>span{transform:translateY(110%)}
.js .dl.in .dl-hl>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--l,0) * .12s)}
.js .dl:not(.in) .dl-up{opacity:0;transform:translateY(24px)}
.js .dl.in .dl-up{transition:opacity .7s ease calc(var(--k,0) * .1s),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * .1s)}
.js .dl:not(.in) .dl-cell{opacity:0;transform:translateY(14px)}
.js .dl.in .dl-cell{transition:opacity .5s ease calc(.6s + var(--i) * 40ms),transform .5s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--i) * 40ms),background-color .35s ease calc(var(--i) * 35ms),color .35s ease calc(var(--i) * 35ms),border-color .35s ease calc(var(--i) * 35ms),box-shadow .35s ease calc(var(--i) * 35ms)}
/* each time a deadline opens: its text rises, the step nodes pop and the lines draw one after another */
.dl-panel.is-active .dl-in{animation:dl-rise .55s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * 70ms) backwards}
.dl-panel.is-active .dl-step{animation:dl-rise .55s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--k,0) * .15s) backwards}
.dl-panel.is-active .dl-node{animation:dl-pop .5s cubic-bezier(.3,1.5,.5,1) calc(.25s + var(--k,0) * .15s) backwards}
.dl-panel.is-active .dl-line::after{animation:dl-draw .7s ease calc(.45s + var(--k,0) * .15s) backwards}
/* progress bar: 6 seconds per deadline, paused while the visitor hovers or focuses the board, or the section is off screen */
.dl-tab.is-active.is-playing .dl-prog{animation:dl-fill 6s linear forwards}
.dl.is-paused .dl-tab .dl-prog{animation-play-state:paused}
.dl-tab:hover{transform:translateX(4px)}
[dir="rtl"] .dl-tab:hover{transform:translateX(-4px)}
.dl-tab{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease,transform .3s ease}
}
/* reduced motion: the open tab shows a full bar instead of a moving one */
@media(prefers-reduced-motion:reduce){
.dl-tab.is-active .dl-prog{transform:scaleX(1)}
}


/* =====================================================
   HOME 2 · SECTION 8 — Call to action (stress-free tax season)
   One filled card, two even columns: message + buttons on the left,
   a sample filing-status card on the right. Only site colour variables are used.
   ===================================================== */
.fc{
  --g:32px;                                                     /* one gap: between the two columns and inside the left column rhythm */
  --pad:clamp(24px,4vw,48px);                                   /* inner padding of the filled card */
  --on:var(--on-primary);                                       /* text on the accent fill */
  --on-soft:color-mix(in srgb,var(--on-primary) 90%,transparent);
  --on-line:color-mix(in srgb,var(--on-primary) 45%,transparent);
  padding:72px 0;                                               /* top and bottom padding are equal */
  background:var(--bg)
}
.fc-card{display:grid;text-align:start;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:var(--g);padding:var(--pad);color:var(--on);background:var(--accent);border-radius:28px;box-shadow:0 18px 40px var(--glow)}

/* ---------- Left column ---------- */
.fc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.fc-tag{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;color:var(--on);border:1px solid var(--on-line);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif}
.fc-tag .pulse{background:var(--on)}
.fc-copy h2{margin:0;color:var(--on);font-size:clamp(1.875rem,3.4vw,2.75rem);line-height:1.15}
.fc-hl{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}   /* each headline line rises out of a mask */
.fc-hl>span{display:inline-block}
.fc-lead{margin:0;max-width:34em;color:var(--on-soft);font-size:1.0625rem;line-height:1.6}
.fc-actions{display:flex;flex-wrap:wrap;gap:12px}
/* solid button: surface fill with accent text, readable in light and dark mode */
.fc-solid{height:50px;padding:0 26px;gap:10px;color:var(--accent);background:var(--surface);border-color:var(--surface)}
.fc-solid:hover{color:var(--accent);background:var(--bg);border-color:var(--bg)}
.fc-solid svg{transition:transform .25s ease}
.fc-solid:hover svg{transform:translateX(4px)}
[dir="rtl"] .fc-solid:hover svg{transform:scaleX(-1) translateX(4px)}
/* outline button */
.fc-line{height:50px;padding:0 26px;color:var(--on);background:transparent;border-color:var(--on-line)}
.fc-line:hover{color:var(--accent);background:var(--surface);border-color:var(--surface)}
.btn:focus-visible{outline:2px solid var(--on);outline-offset:3px}
/* trust points */
.fc-ticks{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0;padding:0;list-style:none}
.fc-ticks li{display:flex;align-items:center;gap:8px;color:var(--on);font:500 .9375rem/1.4 "Inter",system-ui,sans-serif}
.fc-ticks svg{flex:0 0 18px;width:18px;height:18px}

/* ---------- Right column: sample filing-status card ---------- */
.fc-live{display:flex;flex-direction:column;gap:16px;min-width:0;padding:clamp(18px,2.4vw,24px);color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow)}
.fc-live-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fc-live-head p{margin:0;font:700 1.0625rem/1.3 "Playfair Display",Georgia,serif;color:var(--text)}
.fc-chip{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;color:var(--accent);background:var(--bg);border:1px solid var(--border);border-radius:999px;font:600 .8125rem/1.2 "Inter",system-ui,sans-serif}
.fc-chip .pulse{width:8px;height:8px;background:var(--accent)}
/* the four steps: node, name, status (all in one even row) */
.fc-rows{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.fc-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:14px;transition:border-color .35s ease,background-color .35s ease}
.fc-node{position:relative;display:grid;place-items:center;width:32px;height:32px;color:var(--on-primary);background:var(--surface);border:1.5px solid var(--border);border-radius:50%;transition:background-color .35s ease,border-color .35s ease}
.fc-node svg{width:16px;height:16px;opacity:0}
.fc-name{min-width:0;font:600 .9375rem/1.35 "Inter",system-ui,sans-serif;color:var(--text)}
.fc-st{color:var(--muted);font-size:.875rem;line-height:1.3;text-align:end}
/* three states per row: waiting (default), working, done. The matching status text shows. */
.fc-st>span{display:none}
.fc-row .fc-st-w{display:inline}
.fc-row.is-work .fc-st-w,.fc-row.is-done .fc-st-w{display:none}
.fc-row.is-work .fc-st-p{display:inline;color:var(--accent)}
.fc-row.is-done .fc-st-d{display:inline;color:var(--accent);font-weight:600}
.fc-row.is-work{border-color:var(--accent)}
.fc-row.is-work .fc-node{border-color:var(--border);border-top-color:var(--accent)}
.fc-row.is-done .fc-node{background:var(--accent);border-color:var(--accent)}
.fc-row.is-done .fc-node svg{opacity:1}
/* progress */
.fc-prog{display:grid;gap:8px}
.fc-prog-top{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.875rem;line-height:1.3}
.fc-prog-top b{color:var(--text);font-weight:700}
.fc-bar{height:8px;overflow:hidden;background:var(--bg);border:1px solid var(--border);border-radius:999px}
.fc-bar i{display:block;height:100%;background:var(--accent);border-radius:999px;transform:scaleX(var(--v,1));transform-origin:left center;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .fc-bar i{transform-origin:right center}
/* footer: note + badge (the badge keeps its space while hidden, so the card never changes height) */
.fc-live-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--border)}
.fc-live-foot p{margin:0;max-width:none;color:var(--muted);font-size:.875rem}
.fc-badge{white-space:nowrap;padding:6px 14px;color:var(--on-primary);background:var(--accent);border-radius:999px;font:600 .875rem/1.2 "Inter",system-ui,sans-serif;transition:opacity .4s ease,transform .4s cubic-bezier(.3,1.5,.5,1)}
.fc-badge.is-off{opacity:0;transform:scale(.8)}

/* ---------- Tablets and phones: columns stack ---------- */
@media(max-width:1023px){
.fc{padding:56px 0}
.fc-card{grid-template-columns:minmax(0,1fr);border-radius:24px}
}
@media(max-width:640px){
.fc{padding:48px 0;--g:24px}
.fc-card{border-radius:20px}
/* narrow screens: the status text moves under the step name, so the two never meet */
.fc-row{grid-template-columns:32px minmax(0,1fr);row-gap:2px}
.fc-st{grid-column:2;text-align:start}
.fc-live-foot{flex-wrap:wrap}
.fc-actions{flex-direction:column;align-self:stretch}
.fc-actions .btn{width:100%}
}

/* ---------- Motion (skipped when the visitor prefers reduced motion) ---------- */
@media(prefers-reduced-motion:no-preference){
@keyframes fc-spin{to{transform:rotate(360deg)}}
@keyframes fc-ping{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--on-primary) 55%,transparent)}to{box-shadow:0 0 0 9px transparent}}
@keyframes fc-ping-a{from{box-shadow:0 0 0 0 var(--glow)}to{box-shadow:0 0 0 8px transparent}}
.fc-tag .pulse{animation:fc-ping 1.8s ease-out infinite}
.fc-chip .pulse{animation:fc-ping-a 1.8s ease-out infinite}
/* on first view: headline lines rise, the rest fades up in order, the card opens */
.js .fc:not(.in) .fc-hl>span{transform:translateY(110%)}
.js .fc.in .fc-hl>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--l,0) * .12s)}
.js .fc:not(.in) .fc-up{opacity:0;transform:translateY(24px)}
.js .fc.in .fc-up{transition:opacity .7s ease calc(var(--k,0) * .1s),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--k,0) * .1s)}
.js .fc:not(.in) .fc-card{clip-path:inset(0 100% 0 0 round 28px)}
.js[dir="rtl"] .fc:not(.in) .fc-card{clip-path:inset(0 0 0 100% round 28px)}
.js .fc.in .fc-card{clip-path:inset(0 0 0 0 round 28px);transition:clip-path 1.1s cubic-bezier(.65,0,.2,1)}
/* a row that is working shows a spinning ring; a row that turns done pops its tick */
.fc-row.is-work .fc-node{animation:fc-spin .9s linear infinite}
.fc-row.is-done .fc-node svg path{stroke-dasharray:1;animation:fc-tick .45s ease backwards}
@keyframes fc-tick{from{stroke-dashoffset:1}}
}


/* Merged services page styles */
/* =====================================================================
   Services page · Section 1 · Banner ("Twin Arches")
   Centered headline between two arched photo windows, ring + marquee.
   All colours come from the site tokens, so light and dark both work.
   Smallest text on this section is 14px.
   ===================================================================== */
.sx-banner{
  --sx-pad:clamp(40px,6vh,64px);   /* top and bottom padding: always equal */
  --sx-gap:clamp(28px,4vh,40px);   /* one gap used between every row */
  --sx-aw:clamp(220px,19vw,290px); /* arch width */
  position:relative;isolation:isolate;overflow:hidden;
  min-height:75vh;display:flex;flex-direction:column;justify-content:center;
  padding-block:var(--sx-pad);background:var(--bg);
  border-bottom:1px solid var(--border)
}
.sx-wrap{flex:1;display:flex;flex-direction:column;gap:var(--sx-gap)}

/* ---------- main row: arch | copy | arch ---------- */
.sx-stage{position:relative;display:grid;grid-template-columns:var(--sx-aw) minmax(0,1fr) var(--sx-aw);
  gap:clamp(24px,3.4vw,56px);align-items:center;flex:1}

/* ---------- copy ---------- */
.sx-copy{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center}
.sx-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 16px;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);
  color:var(--primary);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.sx-dot{position:relative;width:9px;height:9px;border-radius:50%;background:var(--primary)}
.sx-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--primary);opacity:0}
.sx-banner h1{margin:0 0 18px;font-size:clamp(2rem,3.5vw,3.3rem);line-height:1.15;color:var(--text)}
.sx-line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.sx-line>span{display:inline-block}
.sx-banner h1 em{font-style:italic;color:var(--primary);position:relative;white-space:nowrap}
.sx-banner h1 em::after{content:"";position:absolute;inset-inline:0;bottom:-2px;height:3px;border-radius:3px;
  background:var(--primary);transform-origin:left center;opacity:.85}
[dir="rtl"] .sx-banner h1 em::after{transform-origin:right center}
.sx-lead{margin:0 0 24px;max-width:48ch;font-size:1.0625rem;line-height:1.65;color:var(--text2)}
.sx-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:var(--sx-gap)}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;
  border:1.5px solid var(--primary);border-radius:12px;font:600 1rem/1 "Inter",system-ui,sans-serif;
  text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.sx-btn svg{width:18px;height:18px;transition:transform .25s}
.sx-btn--solid{background:var(--primary);color:var(--on-primary)}
.sx-btn--solid:hover{background:var(--primary-d);border-color:var(--primary-d);box-shadow:var(--shadow);transform:translateY(-2px)}
.sx-btn--solid:hover svg{transform:translateX(4px)}
[dir="rtl"] .sx-btn svg{transform:scaleX(-1)}
[dir="rtl"] .sx-btn--solid:hover svg{transform:scaleX(-1) translateX(4px)}
.sx-btn--ghost{background:var(--surface);color:var(--primary)}
.sx-btn--ghost:hover{background:var(--primary);color:var(--on-primary);transform:translateY(-2px)}

/* stats */
.sx-stats{display:flex;justify-content:center;list-style:none;margin:0;padding:0}
.sx-stats li{display:flex;flex-direction:column;align-items:center;gap:2px;padding-inline:clamp(16px,2.2vw,30px)}
.sx-stats li+li{border-inline-start:1px solid var(--border)}
.sx-stats b{font:700 1.625rem/1.1 "Playfair Display",Georgia,serif;color:var(--text);font-variant-numeric:tabular-nums}
.sx-stats span{font-size:.875rem;line-height:1.3;color:var(--text2)}

/* ---------- arches ---------- */
.sx-arch{--r:calc(var(--sx-aw)/2);position:relative;display:block;width:var(--sx-aw);
  align-self:stretch;height:auto;min-height:340px;max-height:calc(var(--sx-aw)*2.4);justify-self:center;text-decoration:none;color:inherit;z-index:1;
  transform:translate3d(calc(var(--px,0)*var(--k,1)*-12px),calc(var(--py,0)*-8px),0);
  transition:translate .45s cubic-bezier(.2,.7,.2,1),transform .35s ease-out}
.sx-arch--r{--k:-1}
.sx-arch::before{content:"";position:absolute;inset:-10px;border:1.5px solid var(--border);
  border-radius:calc(var(--r) + 10px) calc(var(--r) + 10px) 34px 34px;transition:border-color .3s,inset .3s}
.sx-arch:hover{translate:0 -6px}
.sx-arch:hover::before,.sx-arch:focus-visible::before{border-color:var(--primary);inset:-14px}
.sx-arch:focus-visible{outline:none}
.sx-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--r) var(--r) 24px 24px;background:var(--tint);
  box-shadow:var(--shadow)}
.sx-frame img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sx-arch:hover .sx-frame img{transform:scale(1.07)}
[data-theme="dark"] .sx-frame img{filter:brightness(.86)}
.sx-frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 52%,rgba(16,42,48,.55) 100%)}
.sx-num{position:absolute;top:18px;inset-inline-start:50%;translate:-50% 0;z-index:2;
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:30px;padding:0 12px;border-radius:999px;
  background:var(--surface);color:var(--primary);font:700 .875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.06em}
[dir="rtl"] .sx-num{translate:50% 0}

/* glass info chip */
.sx-chip{position:absolute;z-index:3;inset-inline:14px;bottom:14px;display:flex;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);
  box-shadow:var(--shadow)}
@supports (backdrop-filter:blur(8px)){
  .sx-chip{background:color-mix(in srgb,var(--surface) 90%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.sx-ico{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:var(--tint);color:var(--primary)}
.sx-ico svg{width:22px;height:22px}
.sx-chip strong{display:block;font:700 1.0625rem/1.2 "Inter",system-ui,sans-serif;color:var(--text)}
.sx-chip small{display:block;margin-top:2px;font-size:.875rem;line-height:1.3;color:var(--text2)}
.sx-go{margin-inline-start:auto;flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--primary);color:var(--on-primary);transition:transform .25s}
.sx-go svg{width:15px;height:15px}
.sx-arch:hover .sx-go{transform:rotate(-45deg)}
[dir="rtl"] .sx-go svg{transform:scaleX(-1)}

/* ---------- marquee strip ---------- */
.sx-strip{position:relative;display:flex;align-items:center;gap:18px;padding:12px 18px;border:1px solid var(--border);
  border-radius:999px;background:var(--surface);overflow:hidden}
.sx-strip-label{flex:0 0 auto;padding-inline-end:18px;border-inline-end:1px solid var(--border);
  font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--primary);white-space:nowrap}
.sx-track-wrap{flex:1;min-width:0;overflow:hidden;direction:ltr;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sx-track{display:flex;width:max-content}
.sx-set{display:flex;align-items:center;flex-shrink:0}
.sx-set li{list-style:none;display:flex;align-items:center;white-space:nowrap;font:600 .9375rem/1.2 "Inter",system-ui,sans-serif;color:var(--text)}
.sx-set li::after{content:"";width:7px;height:7px;margin-inline:22px;background:var(--primary);transform:rotate(45deg);border-radius:1px;opacity:.8}
.sx-set{margin:0;padding:0}
.sx-strip:hover .sx-track{animation-play-state:paused}

/* ---------- motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .sx-dot::after{animation:sx-ping 2.2s ease-out infinite}
  .sx-eyebrow,.sx-lead,.sx-cta,.sx-stats,.sx-strip{animation:sx-rise .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
  .sx-line>span{animation:sx-line .9s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
  .sx-banner h1 em::after{animation:sx-draw .9s cubic-bezier(.2,.7,.2,1) 1s backwards}
  .sx-frame{animation:sx-open 1.1s cubic-bezier(.2,.7,.2,1) var(--d,.2s) backwards}
  .sx-frame img{animation:sx-zoom 1.8s cubic-bezier(.2,.7,.2,1) var(--d,.2s) backwards}
  .sx-chip{animation:sx-chip .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,.2s) + .7s) backwards,sx-float 5s ease-in-out calc(var(--d,.2s) + 1.6s) infinite alternate}
  .sx-num{animation:sx-rise .7s ease calc(var(--d,.2s) + .6s) backwards}
  .sx-track{animation:sx-marq 38s linear infinite}
}
@keyframes sx-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes sx-rise{from{opacity:0;transform:translateY(22px)}}
@keyframes sx-line{from{transform:translateY(110%)}}
@keyframes sx-draw{from{transform:scaleX(0)}}
@keyframes sx-open{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sx-zoom{from{transform:scale(1.25)}}
@keyframes sx-chip{from{opacity:0;transform:translateY(18px)}}
@keyframes sx-float{from{translate:0 0}to{translate:0 -5px}}
@keyframes sx-marq{to{transform:translateX(-50%)}}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sx-banner{--sx-aw:min(42vw,250px)}
  .sx-stage{grid-template-columns:1fr 1fr;gap:var(--sx-gap) clamp(20px,5vw,40px)}
  .sx-copy{grid-column:1 / -1;grid-row:1}
  .sx-arch{grid-row:2;align-self:auto;height:calc(var(--sx-aw)*1.3);min-height:0;max-height:none}
  .sx-arch--l{justify-self:end}
  .sx-arch--r{justify-self:start}
}
@media (max-width:640px){
  .sx-banner{--sx-aw:min(40vw,190px)}
  .sx-stats li{padding-inline:12px}
  .sx-stats b{font-size:1.375rem}
  .sx-arch{height:calc(var(--sx-aw)*1.55)}
  .sx-chip{inset-inline:8px;bottom:8px;padding:10px;justify-content:center;text-align:center}
  .sx-chip small,.sx-ico,.sx-go{display:none}
  .sx-chip strong{font-size:1rem}
  .sx-strip{padding:10px 14px;gap:12px;border-radius:20px}
  .sx-strip-label{display:none}
}

/* =====================================================================
   Services page · Section 2 · Filing wheel
   A dial of the financial year (April to March). Income tax dates sit on the
   outer track, GST on the inner track. The lists on both sides are linked to
   the dial: pick a row or a point and the other lights up, while the centre
   and the strip below show the details.
   Colours: site tokens only. Smallest text is 13px.
   ===================================================================== */
@property --fw-ang{syntax:"<angle>";inherits:true;initial-value:0deg}

.fw{
  --fw-pad:clamp(56px,7vw,96px);   /* top and bottom padding: always equal */
  --fw-gap:clamp(24px,3vw,40px);   /* one gap between every block */
  --fw-in:clamp(14px,1.6vw,18px);  /* inner padding of rows and strip */
  position:relative;isolation:isolate;overflow-x:clip;
  padding-block:var(--fw-pad);background:var(--surface);
  border-bottom:1px solid var(--border)
}
.fw .fw-sub{display:block;font-size:.875rem;line-height:1.4;color:var(--muted)}

/* ---------- heading row ---------- */
.fw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--fw-gap);align-items:end;margin-bottom:var(--fw-gap)}
.fw-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:8px 16px;
  border:1px solid var(--border);border-radius:999px;background:var(--bg);
  color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.fw-live{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fw h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.fw h2 em{font-style:italic;color:var(--accent)}
.fw-lead{margin:0;max-width:52ch;font-size:1.0625rem;line-height:1.65;color:var(--muted)}

/* ---------- three columns: income tax | wheel | GST, strip underneath ---------- */
.fw-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(340px,38vw,480px) minmax(0,1fr);
  grid-template-areas:"inc wheel gst" "strip strip strip";gap:var(--fw-gap);align-items:stretch}
.fw-flank--inc{grid-area:inc}
.fw-flank--gst{grid-area:gst}
.fw-stage{grid-area:wheel}
.fw-strip{grid-area:strip}

/* ---------- flanks: heading + ruled rows ---------- */
.fw-flank{display:flex;flex-direction:column;min-width:0}
.fw-fh{display:flex;align-items:center;gap:12px;padding:0 var(--fw-in) var(--fw-in);border-bottom:2px solid var(--accent)}
.fw-flank--gst .fw-fh{border-bottom-color:var(--secondary)}
.fw-fico{flex:0 0 44px;width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--glow-2);color:var(--accent)}
.fw-fico svg{width:22px;height:22px}
.fw-fh strong{display:block;font:700 1.25rem/1.2 "Playfair Display",Georgia,serif;color:var(--text)}
/* equal row heights, so rows line up across the two lists */
.fw-list{flex:1;display:grid;grid-auto-rows:1fr;margin:0;padding:0;list-style:none}
.fw-list li{display:flex}
.fw-row{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;
  width:100%;padding:var(--fw-in);border:0;border-bottom:1px solid var(--border);background:none;color:var(--text);
  font:inherit;text-align:start;cursor:pointer;transition:background .3s ease}
.fw-row::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:3px;background:var(--accent);
  transform:scaleY(0);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fw-flank--gst .fw-row::before{background:var(--secondary)}
.fw-row:hover,.fw-row.is-on{background:var(--glow-2)}
.fw-row.is-on::before{transform:scaleY(1)}
.fw-row:focus-visible{outline-offset:-3px}
.fw-num{font:700 .875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.06em;color:var(--accent)}
.fw-row strong{display:block;font:600 1.0625rem/1.25 "Inter",system-ui,sans-serif;color:var(--text)}
.fw-txt .fw-sub{margin-top:4px}
.fw-when{text-align:end}
.fw-when b{display:block;font:700 1.125rem/1.15 "Playfair Display",Georgia,serif;color:var(--text);white-space:nowrap}
.fw-when .fw-sub{margin-top:2px}

/* ---------- the wheel ---------- */
.fw-stage{container-type:inline-size;display:flex;flex-direction:column;align-items:center;gap:var(--fw-in);min-width:0}
.fw-wheel{--fw-ang:var(--fw-to,0deg);position:relative;width:100%;aspect-ratio:1}
.fw-wheel::before{content:"";position:absolute;inset:4%;border-radius:50%;background:radial-gradient(circle,var(--glow-2),transparent 68%)}
/* two tracks: income tax outside, GST inside (radius 29.5 and 21 of 50) */
.fw-orbit{position:absolute;border-radius:50%;border:1px solid var(--border)}
.fw-orbit--out{inset:20.5cqw}
.fw-orbit--in{inset:29cqw;border-style:dashed}
/* year progress ring: filled from April up to today */
.fw-ring{position:absolute;inset:13.5cqw;border-radius:50%;
  background:conic-gradient(var(--accent) var(--fw-ang),var(--border) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),var(--text) calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),var(--text) calc(100% - 3px))}
/* today marker rides on the ring */
.fw-now{position:absolute;inset:0;pointer-events:none;transform:rotate(var(--fw-ang))}
.fw-now::before{content:"";position:absolute;left:calc(50% - 6px);top:calc(13.5cqw + 1.5px - 6px);width:12px;height:12px;
  border-radius:50%;background:var(--accent);border:2px solid var(--surface);box-sizing:border-box}
/* every point (month label, dot, tick) is placed by angle --a and radius --r */
.fw-m,.fw-pt{position:absolute;left:50%;top:50%;
  transform:rotate(calc(var(--a)*1deg)) translateY(calc(var(--r)*-1cqw)) rotate(calc(var(--a)*-1deg))}
.fw-m{--a:calc(var(--i)*30 + 15);--r:43;width:36px;height:18px;margin:-9px 0 0 -18px;
  font:600 .8125rem/18px "Inter",system-ui,sans-serif;text-align:center;color:var(--muted)}
.fw-m.is-now{color:var(--accent);font-weight:700}
.fw-pt{--s:clamp(18px,5.6cqw,26px);width:var(--s);height:var(--s);margin:calc(var(--s)/-2) 0 0 calc(var(--s)/-2);padding:0;border:0;background:none}
/* Keep the annual dial uncluttered; deadlines remain selectable from the lists beside it. */
.fw-wheel .fw-pt,.fw-wheel .fw-now{display:none}
.fw-inc{--r:29.5}
.fw-gst{--r:21}
.fw-dot{cursor:pointer;transition:scale .25s cubic-bezier(.3,1.5,.5,1)}
.fw-dot:hover,.fw-dot:focus-visible{scale:1.18}
.fw-dot:focus-visible{outline-offset:3px;border-radius:50%}
.fw-dot::before,.fw-dot::after,.fw-tick::before{content:"";position:absolute;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
/* income tax: ring with a centre dot */
.fw-inc::before{inset:0;border-radius:50%;background:var(--surface);border:2px solid var(--accent)}
.fw-inc::after{inset:32%;border-radius:50%;background:var(--accent)}
.fw-inc.is-on::before{background:var(--accent)}
.fw-inc.is-on::after{background:var(--surface)}
/* GST: diamonds */
.fw-diamond::before{inset:22%;border-radius:3px;background:var(--surface);border:2px solid var(--secondary);transform:rotate(45deg)}
.fw-diamond.is-on::before{background:var(--secondary)}
.fw-tick{--s:10px;pointer-events:none}
.fw-tick::before{inset:0;border-radius:2px;border:1.5px solid var(--secondary);background:var(--surface);transform:rotate(45deg)}
.fw-tick.is-on::before{background:var(--secondary)}
/* centre readout disc */
.fw-core{position:absolute;left:50%;top:50%;width:27cqw;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  background:var(--bg);border:1px solid var(--border);box-shadow:0 0 0 7px var(--glow-2)}
.fw-core b{font:700 clamp(1.125rem,5.6cqw,1.625rem)/1.1 "Playfair Display",Georgia,serif;color:var(--text);white-space:nowrap}
.fw-core .fw-sub{margin-top:2px;font-size:.8125rem;line-height:1.2;white-space:nowrap}
.fw-core .swap{animation:fw-swap .4s ease}
/* legend */
.fw-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:0;padding:0;list-style:none}
.fw-legend li{display:flex;align-items:center;gap:8px;font-size:.875rem;line-height:1.3;color:var(--muted)}
.fw-k{display:block;flex:0 0 auto;box-sizing:border-box}
.fw-k--dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--accent);background:var(--surface)}
.fw-k--dia{width:10px;height:10px;margin:2px;border-radius:2px;border:2px solid var(--secondary);background:var(--surface);transform:rotate(45deg)}
.fw-k--now{width:12px;height:12px;margin:1px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--glow)}

/* ---------- readout strip ---------- */
.fw-strip{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;align-items:center;gap:var(--fw-gap);
  padding:calc(var(--fw-in)*1.5) calc(var(--fw-in)*1.8);border:1px solid var(--border);border-radius:20px;background:var(--bg)}
.fw-pill{display:inline-block;padding:4px 12px;border:1px solid var(--accent);border-radius:999px;
  color:var(--accent);font:600 .8125rem/1.4 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.fw-strip h3{margin:12px 0 0;font-size:1.375rem;line-height:1.25;color:var(--text)}
.fw-strip p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}
.fw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border:1.5px solid var(--accent);
  border-radius:12px;background:var(--accent);color:var(--bg);font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;
  transition:background .25s,border-color .25s,transform .25s}
.fw-btn svg{width:18px;height:18px;transition:transform .25s}
.fw-btn:hover{background:var(--secondary);border-color:var(--secondary);transform:translateY(-2px)}
.fw-btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .fw-btn svg{transform:scaleX(-1)}
[dir="rtl"] .fw-btn:hover svg{transform:scaleX(-1) translateX(4px)}
.fw-note{margin:var(--fw-gap) 0 0;text-align:center;font-size:.875rem;line-height:1.5;color:var(--muted)}

/* the banner arches jump here, so keep the sticky navbar clear of the heading */
.fw-flank{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* ---------- motion (skipped when the visitor prefers reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  /* hidden until the section scrolls into view (script adds .in) */
  .js .fw:not(.in) :is(.fw-orbit,.fw-ring,.fw-m,.fw-pt,.fw-now,.fw-core){opacity:0}
  .js .fw .fw-rv{opacity:0;transform:translate(var(--dx,0),22px);
    transition:opacity .7s ease calc(var(--o,0)*.09s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--o,0)*.09s)}
  .js .fw.in .fw-rv{opacity:1;transform:none}
  .fw-flank--inc{--dx:-28px}
  .fw-flank--gst{--dx:28px}
  [dir="rtl"] .fw-flank--inc{--dx:28px}
  [dir="rtl"] .fw-flank--gst{--dx:-28px}
  /* the dial builds itself: tracks, months clockwise, dots one by one, then the year sweeps to today */
  .fw.in .fw-orbit{animation:fw-grow 1s cubic-bezier(.2,.7,.2,1) .15s backwards}
  .fw.in .fw-orbit--in{animation-delay:.3s}
  .fw.in .fw-core{animation:fw-fade .8s ease .5s backwards}
  .fw.in .fw-m{animation:fw-fade .5s ease calc(var(--i)*.06s + .3s) backwards}
  .fw.in .fw-pt{animation:fw-pop .55s cubic-bezier(.3,1.5,.5,1) calc(var(--n,3)*.08s + .7s) backwards}
  .fw.in .fw-ring,.fw.in .fw-now{animation:fw-fade .5s ease .9s backwards}
  .js .fw:not(.in) .fw-wheel{--fw-ang:0deg}
  .fw-wheel{transition:--fw-ang 2s cubic-bezier(.3,.7,.2,1) 1s}
  .fw-now::before{animation:fw-halo 2.4s ease-out infinite}
  .fw-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:fw-ping 2.2s ease-out infinite}
  .fw-inc.is-on::before{animation:fw-halo 2.4s ease-out infinite}
  .fw-diamond.is-on::before{animation:fw-halo-d 2.4s ease-out infinite}
}
@keyframes fw-grow{from{scale:.7;opacity:0}}
@keyframes fw-fade{from{opacity:0}}
@keyframes fw-pop{from{scale:0;opacity:0}}
@keyframes fw-swap{from{opacity:0;translate:0 5px}}
@keyframes fw-halo{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 7px transparent}}
@keyframes fw-halo-d{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 6px transparent}}
@keyframes fw-ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* ---------- responsive ---------- */
/* Laptop and tablet: wheel on top, readout, then the two lists side by side */
@media (max-width:1180px){
  .fw-head{grid-template-columns:1fr;align-items:start}
  .fw-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"wheel wheel" "strip strip" "inc gst"}
  .fw-stage{width:min(100%,480px);justify-self:center}
}
/* Phone: everything in one column */
@media (max-width:760px){
  .fw-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"wheel" "strip" "inc" "gst"}
  .fw-strip{grid-template-columns:minmax(0,1fr);justify-items:start;gap:var(--fw-in)}
  .fw-btn{width:100%}
  .fw-strip p{min-height:4.8em}
}
@media (max-width:420px){
  /* the row number is hidden, so the row goes to two columns: text and date */
  .fw-num{display:none}
  .fw-row{grid-template-columns:minmax(0,1fr) auto;gap:12px}
}

/* =====================================================================
   Services page · Section 3 · Filing process on the glass-waves photo
   The photo is only a backdrop: every piece of text sits on a glass panel
   made from the site's own --surface colour. One bar, four steps; the
   active step widens and reveals its checklist.
   Colours: site tokens only. Smallest text is 13px.
   ===================================================================== */
.hw{
  --hw-pad:clamp(56px,7vw,96px);   /* top and bottom padding: always equal */
  --hw-gap:clamp(24px,3vw,40px);   /* one gap between blocks */
  --hw-in:clamp(18px,2vw,28px);    /* inner padding of every panel and step */
  --hw-glass:var(--surface);
  --hw-p:0;                        /* scroll position 0 to 1, set by the script */
  position:relative;isolation:isolate;overflow-x:clip;padding-block:var(--hw-pad);
  background:var(--bg) url("../images/abstract-teal-glass-waves.png") no-repeat center calc(20% + var(--hw-p)*60%)/cover;
  border-bottom:1px solid var(--border)
}
@supports (background:color-mix(in srgb,red,blue)){.hw{--hw-glass:color-mix(in srgb,var(--surface) 88%,transparent)}}
.hw-wrap{display:flex;flex-direction:column;align-items:center;gap:var(--hw-gap)}
.hw-intro,.hw-step,.hw-cta{border:1px solid var(--border);background:var(--hw-glass);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 18px 40px var(--glow)}

/* heading panel */
.hw-intro{width:min(100%,780px);padding:var(--hw-in) calc(var(--hw-in)*1.6);border-radius:24px;text-align:center;display:flex;flex-direction:column;align-items:center}
.hw-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;
  background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.hw-live{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.hw h2{margin:0 0 12px;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.hw h2 em{font-style:italic;color:var(--accent)}
.hw-lead{margin:0;max-width:52ch;font-size:1.0625rem;line-height:1.65;color:var(--muted)}

/* the steps: a 2 x 2 grid of separate glass cards, every checklist visible */
.hw-bar{position:relative;width:min(100%,980px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--hw-gap);margin:0;padding:0;list-style:none}
.hw-step{position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;border-radius:24px;
  transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background .4s ease}
.hw-step::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
[dir="rtl"] .hw-step::before{transform-origin:right center}
.hw-step:hover,.hw-step:focus-within{translate:0 -6px;background:var(--surface);border-color:var(--accent);box-shadow:0 26px 50px var(--glow)}
.hw-step:hover::before,.hw-step:focus-within::before{transform:scaleX(1)}
.hw-head{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico num" "t t";align-items:center;gap:16px 12px;width:100%;
  padding:var(--hw-in) var(--hw-in) 0;color:var(--text);text-align:start}
.hw-ico{grid-area:ico;width:52px;height:52px;display:grid;place-items:center;border-radius:14px;background:var(--bg);border:1px solid var(--border);color:var(--accent)}
.hw-ico svg{width:26px;height:26px}
.hw-num{grid-area:num;justify-self:end;font:700 2.5rem/1 "Playfair Display",Georgia,serif;color:var(--accent)}
.hw-head strong{grid-area:t;font:700 1.375rem/1.25 "Playfair Display",Georgia,serif;color:var(--text)}
.hw-body{display:block;flex:1}
.hw-inner{padding:12px var(--hw-in) var(--hw-in)}
.hw-inner p{margin:0;font-size:1rem;line-height:1.6;color:var(--muted)}
.hw-inner ul{margin:16px 0 0;padding:16px 0 0;list-style:none;border-top:1px solid var(--border)}
.hw-inner li{display:flex;align-items:flex-start;gap:10px;font:500 .9375rem/1.45 "Inter",system-ui,sans-serif;color:var(--text)}
.hw-inner li+li{margin-top:10px}
.hw-inner li::before{content:"";flex:0 0 8px;width:8px;height:8px;margin-top:7px;border-radius:2px;background:var(--accent);transform:rotate(45deg)}

/* closing strip */
.hw-cta{width:min(100%,780px);display:flex;align-items:center;justify-content:space-between;gap:var(--hw-gap);padding:calc(var(--hw-in)*.8) var(--hw-in);border-radius:20px}
.hw-cta p{margin:0;font-size:1.0625rem;line-height:1.5;color:var(--text)}
.hw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:0 0 auto;height:50px;padding:0 26px;border:1.5px solid var(--accent);border-radius:12px;
  background:var(--accent);color:var(--bg);font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s,transform .25s}
.hw-btn svg{width:18px;height:18px;transition:transform .25s}
.hw-btn:hover{background:var(--secondary);border-color:var(--secondary);transform:translateY(-2px)}
.hw-btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .hw-btn svg{transform:scaleX(-1)}
[dir="rtl"] .hw-btn:hover svg{transform:scaleX(-1) translateX(4px)}

/* motion (skipped when the visitor prefers reduced motion) */
@media (prefers-reduced-motion:no-preference){
  .js .hw .hw-rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease calc(var(--o,0)*.1s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--o,0)*.1s)}
  .js .hw.in .hw-rv{opacity:1;transform:none}
  /* keep the reveal delay, but let the hover lift and glow respond instantly */
  .js .hw .hw-step.hw-rv{transition:opacity .7s ease calc(var(--o,0)*.1s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--o,0)*.1s),translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .4s ease,background .4s ease}
  .hw-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:fw-ping 2.2s ease-out infinite}
  .hw-ico{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
  .hw-step:hover .hw-ico,.hw-step:focus-within .hw-ico{transform:rotate(-8deg) scale(1.08)}
}

/* phone and small tablet: cards stack in one column */
@media (max-width:760px){
  .hw-bar{grid-template-columns:1fr}
  .hw-cta{flex-direction:column;align-items:stretch;text-align:center}
}
@media (max-width:520px){.hw-intro{padding-inline:var(--hw-in)}}

/* =====================================================================
   Services page · Section 4 · Who we file for (growth staircase)
   Four filer profiles stand on one baseline. Each photo is taller than the last
   and a rising line joins the form badges above them. One profile is "on" at a time:
   it steps along by itself, follows the pointer, and follows the swipe on small screens.
   Captions sit below the photos. Colours: site tokens only. Smallest text is 13px.
   ===================================================================== */
.fl{
  --fl-pad:clamp(56px,7vw,96px);     /* top and bottom padding: always equal */
  --fl-gap:clamp(32px,4vw,56px);     /* heading to staircase */
  --fl-cg:clamp(20px,2.4vw,32px);    /* space between the four columns */
  --fl-base:150px;                   /* height of the first photo */
  --fl-step:64px;                    /* how much taller each next photo is */
  --fl-r:22px;                       /* photo corner radius */
  --fl-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;overflow-x:clip;padding-block:var(--fl-pad);background:var(--bg);border-bottom:1px solid var(--border)
}

/* heading + rolling counter */
.fl-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:var(--fl-gap)}
.fl-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.fl-live{position:relative;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.fl h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.fl h2 em{font-style:italic;color:var(--accent)}
.fl-count{display:flex;align-items:flex-end;gap:10px;flex:0 0 auto;font-family:"Playfair Display",Georgia,serif;font-weight:700}
.fl-roll{display:block;height:1em;overflow:hidden;font-size:clamp(2.5rem,5vw,4rem);line-height:1;color:var(--accent)}
.fl-roll b{display:block;height:1em;font-weight:700;transition:transform .7s var(--fl-ease);transform:translateY(calc(var(--fl-i,0)*-100%))}
.fl-of{padding-bottom:.35em;font:600 1rem/1 "Inter",system-ui,sans-serif;color:var(--muted)}

/* intro text: fills the free space above the first step */
.fl-body{position:relative}
.fl-aside{position:absolute;inset-block-start:0;inset-inline-start:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:18px;width:calc((100% - var(--fl-cg)*3)/4)}
.fl-aside p{margin:0;font-size:1rem;line-height:1.55;color:var(--muted)}
.fl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 26px;border:1.5px solid var(--accent);border-radius:12px;
  background:var(--accent);color:var(--bg);font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:background .25s,border-color .25s,transform .25s}
.fl-btn svg{width:18px;height:18px;transition:transform .25s}
.fl-btn:hover{background:var(--secondary);border-color:var(--secondary);transform:translateY(-2px)}
.fl-btn:hover svg{transform:translateX(4px)}
[dir="rtl"] .fl-btn svg{transform:scaleX(-1)}
[dir="rtl"] .fl-btn:hover svg{transform:scaleX(-1) translateX(4px)}

/* the four columns share six rows, so badges, photos, captions, titles, text and chips line up across all of them */
.fl-cols{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:var(--fl-cg);margin:0;padding:0;list-style:none}
.fl-col{--h:calc(var(--fl-base) + var(--s)*var(--fl-step));--dl:calc(.5s + var(--s)*.22s);grid-row:1/7;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);min-width:0}
.fl-fig{display:contents}
.fl-pill,.fl-frame,.fl-cap,.fl-num,.fl-col h3,.fl-col p,.fl-chips{grid-column:1}   /* every item in its own row, one column */

/* row 1: form badge above the photo (photos sit on the baseline, so each column starts at a different height) */
.fl-pill{grid-row:1;align-self:end;justify-self:center;margin-bottom:calc(var(--h) + 16px);padding:6px 14px;border:1px solid var(--border);border-radius:999px;
  background:var(--surface);color:var(--text);font:600 .8125rem/1.3 "Inter",system-ui,sans-serif;white-space:nowrap;transition:background .35s,border-color .35s,color .35s}
.fl-frame{grid-row:1;align-self:end;height:var(--h);overflow:hidden;border:1px solid var(--border);border-radius:var(--fl-r);background:var(--glow-2);transition:transform .6s var(--fl-ease),box-shadow .6s ease}
.fl-frame img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);filter:saturate(.7);transition:transform 2.4s var(--fl-ease),filter .6s ease}
[data-theme="dark"] .fl-frame img{filter:brightness(.85) saturate(.7)}

/* row 2: caption under a baseline segment that fills with the accent when the column is on */
.fl-cap{grid-row:2;position:relative;margin-top:14px;padding-top:12px;font-size:.8125rem;line-height:1.45;color:var(--muted)}
.fl-cap::before,.fl-cap::after{content:"";position:absolute;inset-inline:0;top:0;height:2px}
.fl-cap::before{background:var(--border)}
.fl-cap::after{background:var(--accent);transform:scaleX(0);transform-origin:left center;transition:transform .8s var(--fl-ease)}
[dir="rtl"] .fl-cap::after{transform-origin:right center}

/* rows 3 to 6 */
.fl-num{grid-row:3;margin-top:20px;font:700 1.375rem/1 "Playfair Display",Georgia,serif;color:var(--muted);transition:color .4s ease}
.fl-col h3{grid-row:4;min-height:2.4em;margin:10px 0 0;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.2;color:var(--text)}
.fl-col p{grid-row:5;min-height:4.65em;margin:10px 0 0;font-size:1rem;line-height:1.55;color:var(--muted)}
.fl-chips{grid-row:6;display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-content:start;gap:8px;margin:16px 0 0;padding:0;list-style:none}
.fl-chips li{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:4px 12px;border-radius:999px;background:var(--glow-2);font:500 .875rem/1.4 "Inter",system-ui,sans-serif;color:var(--text);transition:background .4s ease}
.fl-chips li::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--accent);transform:rotate(45deg);transition:transform .6s var(--fl-ease)}

/* the column that is "on" */
.fl-col.is-on .fl-pill{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.fl-col.is-on .fl-frame{transform:translateY(-8px);box-shadow:0 22px 40px -18px var(--glow)}
.fl-col.is-on .fl-frame img{transform:scale(1.14);filter:saturate(1.05)}
[data-theme="dark"] .fl-col.is-on .fl-frame img{filter:brightness(.95) saturate(1.05)}
.fl-col.is-on .fl-cap::after{transform:scaleX(1)}
.fl-col.is-on .fl-num{color:var(--accent)}
.fl-col.is-on .fl-chips li{background:var(--glow)}
.fl-col.is-on .fl-chips li::before{transform:rotate(225deg)}

/* rising line (drawn by the script from the real badge positions) */
.fl-trend{position:absolute;inset-block-start:0;left:0;overflow:visible;pointer-events:none}
.fl-seg,.fl-seg-glow{fill:none;stroke-dasharray:1 1}
.fl-seg{stroke:var(--accent);stroke-width:2}
.fl-seg-glow{stroke:var(--glow);stroke-width:10}
.fl-spark-halo{fill:var(--glow)}
.fl-spark-dot{fill:var(--accent)}

/* swipe progress, small screens only */
.fl-prog{display:none;height:3px;margin-top:20px;border-radius:3px;background:var(--border);overflow:hidden}
.fl-prog span{display:block;height:100%;width:calc(25% + var(--fl-p,0)*75%);background:var(--accent);transform-origin:left center}
[dir="rtl"] .fl-prog span{margin-inline-start:auto}

/* entrance: photos grow up from the baseline one after another, then badges pop, the line draws and the text follows
   (skipped when the visitor prefers reduced motion; without script everything simply shows) */
@media (prefers-reduced-motion:no-preference){
  .js .fl:not(.in) .fl-rv,.js .fl:not(.in) .fl-cap,.js .fl:not(.in) .fl-num,.js .fl:not(.in) .fl-col h3,.js .fl:not(.in) .fl-col p,.js .fl:not(.in) .fl-chips,.js .fl:not(.in) .fl-pill,.js .fl:not(.in) .fl-spark{opacity:0}
  .js .fl:not(.in) .fl-frame{clip-path:inset(100% 0 0 0 round var(--fl-r))}
  .js .fl:not(.in) .fl-seg,.js .fl:not(.in) .fl-seg-glow{stroke-dashoffset:1}
  .fl-rv{--dl:calc(var(--o,0)*.12s)}
  .fl.in .fl-rv,.fl.in .fl-cap,.fl.in .fl-num,.fl.in .fl-col h3,.fl.in .fl-col p,.fl.in .fl-chips{animation:fl-up .8s var(--fl-ease) var(--dl) backwards}
  .fl.in .fl-frame{animation:fl-rise 1.05s var(--fl-ease) calc(.1s + var(--s)*.22s) backwards}
  .fl.in .fl-frame img{animation:fl-zoom 1.6s var(--fl-ease) calc(.1s + var(--s)*.22s) backwards}
  .fl.in .fl-pill{animation:fl-pop .55s var(--fl-ease) calc(.75s + var(--s)*.22s) backwards}
  .fl.in .fl-seg,.fl.in .fl-seg-glow{animation:fl-draw .6s ease calc(.95s + var(--i)*.22s) backwards}
  .fl.in .fl-spark{animation:fl-fade .8s ease 2s backwards}
  .fl-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--accent);opacity:0;animation:fw-ping 2.2s ease-out infinite}
}
@keyframes fl-up{from{opacity:0;transform:translateY(22px)}}
@keyframes fl-rise{from{clip-path:inset(100% 0 0 0 round var(--fl-r))}to{clip-path:inset(0 0 0 0 round var(--fl-r))}}
@keyframes fl-zoom{from{transform:scale(1.4)}}
@keyframes fl-pop{from{opacity:0;transform:scale(.6)}}
@keyframes fl-draw{from{stroke-dashoffset:1}}
@keyframes fl-fade{from{opacity:0}}

/* tablets and phones: the staircase swipes sideways, intro text moves above it */
@media (max-width:959px){
  .fl{--fl-base:176px;--fl-step:18px}
  .fl-body{display:flex;flex-direction:column;gap:16px}
  .fl-aside{position:static;width:auto;order:-1}
  .fl-cols{grid-template-columns:repeat(4,min(78vw,320px));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .fl-cols::-webkit-scrollbar{display:none}
  .fl-col{scroll-snap-align:start}
  .fl-prog{display:block;margin-top:0}
}
@media (max-width:640px){
  .fl-head{align-items:flex-start}
}



/* =====================================================================
   Services page · Section 5 · Tax Planning & Advisory ("folder bento")
   Five index folders, each with its own tab, on an uneven 12-column grid:
   one tall folder, two wide and two narrow ones beside it, one full-width folder below.
   Every folder carries a small picture that animates when the section arrives.
   Captions and notes sit below pictures, never on them. Colours: site tokens only.
   Smallest text is 14px. Top and bottom padding use one variable, so they are always equal.
   ===================================================================== */
.tp{
  --tp-pad:clamp(56px,7vw,96px);     /* top and bottom padding: always equal */
  --tp-gap:clamp(16px,2vw,24px);     /* space between folders, both directions */
  --tp-in:clamp(22px,2.4vw,32px);    /* padding inside every folder and gap between its columns */
  --tp-tab:40px;                     /* height of a folder tab */
  --tp-sg:16px;                      /* space between advance-tax instalments */
  --tp-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--tp-pad);background:var(--surface);border-bottom:1px solid var(--border);overflow-x:clip
}

/* heading row */
.tp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(32px,4vw,56px)}
.tp-head-main{min-width:0}
.tp-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.tp-live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.tp h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.tp h2 em{font-style:italic;color:var(--accent)}
.tp-lead{flex:0 1 40ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* the bento grid: 12 columns, asymmetric on purpose */
.tp-board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--tp-gap)}
.tp-t1{grid-column:1 / span 5;grid-row:1 / span 2}
.tp-t2{grid-column:6 / span 7;grid-row:1}
.tp-t3{grid-column:6 / span 3;grid-row:2}
.tp-t4{grid-column:9 / span 4;grid-row:2}
.tp-t5{grid-column:1 / -1;grid-row:3}

/* a folder = a tab above a body. Colours come from the custom properties so the filled folder only changes them. */
.tp-tile{--tp-bg:var(--bg);--tp-bd:var(--border);--tp-fg:var(--text);--tp-mu:var(--muted);--tp-num:var(--accent);display:flex;flex-direction:column;min-width:0;transition:transform .35s var(--tp-ease)}
.tp-tile:hover{--tp-bd:var(--accent);transform:translateY(-4px)}
.tp-tile-main{--tp-bg:var(--accent);--tp-bd:var(--accent);--tp-fg:var(--bg);--tp-mu:var(--bg);--tp-num:var(--bg)}
/* the tab overlaps the body's top border by 1px and shares its background, so the two read as one piece */
.tp-tab{position:relative;z-index:1;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:var(--tp-tab);margin-bottom:-1px;padding:0 18px;border:1px solid var(--tp-bd);border-bottom:0;border-radius:14px 14px 0 0;background:var(--tp-bg);color:var(--tp-fg);font:600 .875rem/1 "Inter",system-ui,sans-serif;transition:border-color .3s ease}
.tp-tab b{color:var(--tp-num);font-weight:700}
/* the body's top corner next to the tab is square; the other three are round */
.tp-body{flex:1;display:flex;flex-direction:column;gap:16px;min-width:0;padding:var(--tp-in);border:1px solid var(--tp-bd);border-radius:22px;border-start-start-radius:0;background:var(--tp-bg);box-shadow:0 14px 34px var(--glow-2);transition:border-color .3s ease,box-shadow .3s ease}
.tp-tile:hover .tp-body{box-shadow:0 18px 40px var(--glow)}
.tp-body h3{margin:0;color:var(--tp-fg);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.tp-body p{margin:0;color:var(--tp-mu);font-size:1rem;line-height:1.6}
.tp-body .tp-note{color:var(--tp-mu);font-size:.875rem;line-height:1.5}
.tp-t1 h3{font-size:clamp(1.625rem,2.6vw,2.25rem);line-height:1.15}

/* folder 1: bars (a track with a fill) and the list of areas */
.tp-bars{display:grid;gap:16px}
.tp-bar-row{display:grid;gap:8px}
.tp-bar-label{color:var(--tp-fg);font-size:.9375rem;font-weight:600}
.tp-bar-track{position:relative;display:block;height:14px;border-radius:999px;overflow:hidden}
.tp-bar-track::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--tp-fg);opacity:.25}
.tp-bar-fill{position:absolute;inset-block:0;inset-inline-start:0;width:var(--w);border-radius:inherit;background:var(--tp-fg);transform-origin:left center}
[dir="rtl"] .tp-bar-fill{transform-origin:right center}
.tp-bar-dim{opacity:.55}
/* three short lines on how a plan starts: a rule above, an even gap between lines */
.tp-plan{display:grid;gap:12px;margin:0;padding:20px 0 0;border-top:1px solid var(--tp-fg);list-style:none}
.tp-plan li{display:flex;align-items:center;gap:12px;color:var(--tp-fg);font-size:1rem;font-weight:600;line-height:1.4}
.tp-plan li::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--tp-fg)}
.tp-chips{display:flex;flex-wrap:wrap;gap:10px;margin:auto 0 0;padding:0;list-style:none}
.tp-chips li{padding:8px 16px;border:1px solid var(--tp-fg);border-radius:999px;color:var(--tp-fg);font-size:.875rem;font-weight:600;line-height:1.2}

/* folder 2: four instalments. Each has a dot; a line runs from every dot to the next (it stops short of both dots). */
.tp-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--tp-sg);margin:0;padding:0;list-style:none}
.tp-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.tp-dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow);transition:background .4s ease,box-shadow .4s ease}
.tp-date{color:var(--text);font:700 1.25rem/1.2 "Playfair Display",Georgia,serif}
.tp-pct{color:var(--muted);font-size:.875rem;line-height:1.4}
.tp-step:not(:last-child)::before,.tp-step:not(:last-child)::after{content:"";position:absolute;top:6px;inset-inline-start:22px;width:calc(100% + var(--tp-sg) - 30px);height:2px;border-radius:2px}
.tp-step:not(:last-child)::after{background:var(--border)}
.tp-step:not(:last-child)::before{z-index:1;background:var(--accent);transform-origin:left center}
[dir="rtl"] .tp-step:not(:last-child)::before{transform-origin:right center}

/* folder 3: checked expense lines */
.tp-checks{display:grid;gap:12px;margin:auto 0 0;padding:0;list-style:none}
.tp-checks li{display:flex;align-items:center;gap:12px;color:var(--text);font-size:.9375rem;line-height:1.4}
.tp-tick{display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--bg)}
.tp-tick svg{width:13px;height:13px;stroke-dasharray:24;stroke-dashoffset:0}

/* folder 4: seal (a ring that closes, then a tick) */
.tp-seal{display:block;width:72px;height:72px}
.tp-seal svg{display:block;width:100%;height:100%}
.tp-seal circle{stroke-width:4}
.tp-seal-track{stroke:var(--border)}
.tp-seal-ring{stroke:var(--accent);stroke-dasharray:189;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:36px 36px}
.tp-seal-check{stroke:var(--accent);stroke-width:5;stroke-dasharray:44;stroke-dashoffset:0}

/* folder 5: copy on one side, the twelve months on the other */
.tp-year{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--tp-in);align-items:center}
.tp-year-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.tp-year-board{display:flex;flex-direction:column;gap:16px;min-width:0}
.tp-btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border:1.5px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--bg);font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .25s ease,box-shadow .25s ease}
.tp-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px var(--glow)}
.tp-months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.tp-months li{display:grid;place-items:center;height:46px;border:1px solid var(--accent);border-radius:12px;background:var(--accent);color:var(--bg);font-size:.9375rem;font-weight:600;transition:background .4s ease,color .4s ease,border-color .4s ease}

/* tablet: two columns, same spacing */
@media (max-width:991px){
  .tp-head{flex-direction:column;align-items:flex-start}
  .tp-lead{flex-basis:auto}
  .tp-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tp-t1,.tp-t2,.tp-t3,.tp-t4,.tp-t5{grid-row:auto;grid-column:auto}
  .tp-t1,.tp-t2,.tp-t5{grid-column:1 / -1}
  .tp-year{grid-template-columns:minmax(0,1fr)}
}
/* phone: one column; the instalments stand in a vertical line */
@media (max-width:640px){
  .tp-board{grid-template-columns:minmax(0,1fr)}
  .tp-t3,.tp-t4{grid-column:1 / -1}
  .tp-months{grid-template-columns:repeat(4,minmax(0,1fr))}
  .tp-steps{grid-template-columns:minmax(0,1fr)}
  .tp-step{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start}
  .tp-dot{grid-row:1 / span 2;margin-top:4px}
  .tp-step:not(:last-child)::before,.tp-step:not(:last-child)::after{top:26px;inset-inline-start:6px;width:2px;height:calc(100% + var(--tp-sg) - 34px)}
  .tp-step:not(:last-child)::before{transform-origin:center top}
}

/* ---- Animation: only when reduced motion is not requested (index.js adds .in) ---- */
@keyframes tp-file{from{opacity:0;transform:translateY(44px) rotate(-1.5deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* folders file themselves in, one after another */
  .js .tp:not(.in) .tp-tile{opacity:0}
  .js .tp.in .tp-tile{animation:tp-file .9s var(--tp-ease) calc(.15s + var(--i,0)*.13s) backwards}
  /* heading and lead fade up */
  .js .tp:not(.in) .tp-head-main,.js .tp:not(.in) .tp-lead{opacity:0;transform:translateY(18px)}
  .js .tp.in .tp-head-main,.js .tp.in .tp-lead{opacity:1;transform:none;transition:opacity .6s ease,transform .7s var(--tp-ease)}
  .js .tp.in .tp-lead{transition-delay:.12s}
  /* folder 1: bars grow */
  .js .tp:not(.in) .tp-bar-fill{transform:scaleX(0)}
  .js .tp.in .tp-bar-fill{transform:none;transition:transform 1.1s var(--tp-ease) calc(.9s + var(--k,0)*.25s)}
  /* folder 1: the three lines slide in after the bars */
  .js .tp:not(.in) .tp-plan li{opacity:0;transform:translateX(-14px)}
  [dir="rtl"] .js .tp:not(.in) .tp-plan li{transform:translateX(14px)}
  .js .tp.in .tp-plan li{opacity:1;transform:none;transition:opacity .5s ease calc(1.3s + var(--i,0)*.15s),transform .5s var(--tp-ease) calc(1.3s + var(--i,0)*.15s)}
  /* folder 2: dots light up one by one, lines fill between them */
  .js .tp:not(.in) .tp-dot{background:var(--surface);box-shadow:0 0 0 2px var(--border)}
  .js .tp.in .tp-dot{transition-delay:calc(1.1s + var(--i,0)*.45s)}
  .js .tp:not(.in) .tp-step:not(:last-child)::before{transform:scaleX(0)}
  .js .tp.in .tp-step:not(:last-child)::before{transform:none;transition:transform .45s linear calc(1.3s + var(--i,0)*.45s)}
  /* folder 3: ticks pop and draw */
  .js .tp:not(.in) .tp-tick{transform:scale(0)}
  .js .tp.in .tp-tick{transform:none;transition:transform .45s cubic-bezier(.2,.9,.3,1.4) calc(1s + var(--i,0)*.2s)}
  .js .tp:not(.in) .tp-tick svg{stroke-dashoffset:24}
  .js .tp.in .tp-tick svg{stroke-dashoffset:0;transition:stroke-dashoffset .4s ease calc(1.2s + var(--i,0)*.2s)}
  /* folder 4: ring closes, then the tick is drawn */
  .js .tp:not(.in) .tp-seal-ring{stroke-dashoffset:189}
  .js .tp.in .tp-seal-ring{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--tp-ease) 1s}
  .js .tp:not(.in) .tp-seal-check{stroke-dashoffset:44}
  .js .tp.in .tp-seal-check{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease 2.1s}
  /* folder 5: months fill in order, April to March */
  .js .tp:not(.in) .tp-months li{background:var(--surface);color:var(--text);border-color:var(--border)}
  .js .tp.in .tp-months li{transition-delay:calc(1.2s + var(--i,0)*.12s)}
}

/* =====================================================================
   Services page · Section 6 · Bookkeeping, notices & audits ("pinned ledger")
   A tall track holds one sticky stage. While the visitor scrolls the track, the stage stays pinned under the navbar:
   a rail on one side lights up chapter by chapter, and the card on the other side swaps its content.
   Everything moves vertically only (no sideways scrolling, no carousels).
   index.js sets data-pin on the section for wide, tall screens without reduced motion, and writes two things while pinned:
     --q  (0 to 1) progress of each chapter, used to scrub that chapter's picture
     --bk-p (0 to 1) progress of the whole track
   Without data-pin (phones, tablets, short screens, reduced motion, no JS) the four chapters are plain stacked cards, fully drawn.
   Captions and notes sit below pictures, never on them. Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable, so they are always equal.
   ===================================================================== */
.bk{
  --bk-pad:clamp(56px,7vw,96px);                          /* top and bottom padding: always equal */
  --bk-gap:clamp(16px,2vw,24px);                          /* space between cards, rail items and rows */
  --bk-in:clamp(22px,2.4vw,32px);                         /* padding inside cards and gap between columns */
  --bk-top:calc(var(--nav-h) + 24px);                     /* where the pinned stage sits: just under the navbar */
  --bk-h:min(600px,calc(100vh - var(--nav-h) - 48px));    /* height of the pinned stage */
  --bk-step:55vh;                                         /* scroll distance for each chapter */
  --bk-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--bk-pad);background:var(--bg);border-bottom:1px solid var(--border);overflow-x:clip
}

/* ---- heading row ---- */
.bk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(32px,4vw,56px)}
.bk-head-main{min-width:0}
.bk-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bk-live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.bk h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.bk h2 em{font-style:italic;color:var(--accent)}
.bk-lead{flex:0 1 40ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* ---- default layout (not pinned): the rail is hidden and the four chapters are cards in a grid ---- */
.bk-rail{display:none}
.bk-view{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--bk-gap)}
.bk-scene{display:flex;flex-direction:column;gap:14px;min-width:0;padding:var(--bk-in);border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 14px 34px var(--glow-2)}
.bk-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bk-tag{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--text);font:600 .875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bk-tag b{color:var(--accent);font-weight:700}
.bk-count{color:var(--muted);font-size:.875rem;font-weight:600;font-variant-numeric:tabular-nums}
.bk-scene h3{margin:0;font-size:clamp(1.375rem,2.2vw,1.75rem);line-height:1.2;color:var(--text)}
.bk-scene p{margin:0;color:var(--muted);font-size:1rem;line-height:1.6}
.bk-scene .bk-note{color:var(--muted);font-size:.875rem;line-height:1.5}
.bk-art{flex:1;display:flex;flex-direction:column;min-width:0}
.bk-art>*{flex:1}   /* the picture fills the free height, so no empty band is left above or below it */

/* ---- pinned layout ---- */
.bk[data-pin] .bk-track{height:calc(var(--bk-h) + var(--bk-n,4) * var(--bk-step))}   /* travel = n chapters x step */
.bk[data-pin] .bk-stage{position:sticky;top:var(--bk-top);height:var(--bk-h);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr);gap:clamp(24px,3vw,40px)}
.bk[data-pin] .bk-view{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:var(--bk-in);border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:0 14px 34px var(--glow-2)}
/* the scenes share one cell; the frame stays and only the content swaps (leaving fades first, entering follows) */
.bk[data-pin] .bk-scene{grid-area:1 / 1;min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.bk[data-pin] .bk-scene[data-state="past"]{transform:translateY(-28px)}
.bk[data-pin] .bk-scene[data-state="active"]{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .25s,transform .6s var(--bk-ease) .25s,visibility 0s}

/* ---- rail: four equal rows, each a number circle (with a line down to the next one) and a button ---- */
.bk[data-pin] .bk-rail{display:grid;grid-auto-rows:1fr;gap:var(--bk-gap);height:100%;margin:0;padding:0;list-style:none}
.bk-item{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:16px;min-height:0}
.bk-node{display:grid;place-items:center;width:40px;height:40px;border:2px solid var(--border);border-radius:50%;background:var(--bg);color:var(--muted);font:600 .875rem/1 "Inter",system-ui,sans-serif;transition:background .35s ease,border-color .35s ease,color .35s ease,box-shadow .35s ease}
/* line between two circles: grey track (::before) and an accent fill (::after) that draws as the chapter scrolls */
.bk-item:not(:last-child)::before,.bk-item:not(:last-child)::after{content:"";position:absolute;inset-inline-start:19px;top:calc(50% + 26px);width:2px;height:calc(100% + var(--bk-gap) - 52px);border-radius:2px}
.bk-item:not(:last-child)::before{background:var(--border)}
.bk-item:not(:last-child)::after{background:var(--accent);transform:scaleY(var(--q,0));transform-origin:center top}
.bk-pick{display:grid;gap:4px;width:100%;margin:0;padding:14px 18px;border:1px solid transparent;border-radius:16px;background:none;color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}
.bk-pick strong{color:var(--text);font:600 1.0625rem/1.3 "Inter",system-ui,sans-serif}
.bk-pick span{color:var(--muted);font-size:.875rem;line-height:1.45}
.bk-pick:hover{border-color:var(--border);background:var(--surface)}
.bk-item.is-done .bk-node{border-color:var(--accent);color:var(--accent)}
.bk-item.is-on .bk-node{border-color:var(--accent);background:var(--accent);color:var(--bg);box-shadow:0 0 0 5px var(--glow)}
.bk-item.is-on .bk-pick{border-color:var(--accent);background:var(--surface);box-shadow:0 12px 28px var(--glow-2)}

/* ---- scrub helper: every animated piece gets --r (0 to 1) from the chapter progress --q and its own start --s ---- */

/* scene 1: ledger rows rise in, then their ticks draw */
.bk-ledger{display:grid;grid-auto-rows:minmax(50px,1fr);gap:10px;margin:0;padding:0;list-style:none}
.bk-row{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 5),1);--r2:clamp(0,calc((var(--q,1) - var(--s,0) - .1) * 5),1);display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:50px;padding:8px 8px 8px 18px;border:1px solid var(--border);border-radius:14px;background:var(--bg);opacity:var(--r);transform:translateY(calc((1 - var(--r)) * 20px))}
.bk-name{color:var(--text);font-size:1rem;font-weight:600;line-height:1.3}
.bk-ok{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;height:34px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--bg);font-size:.875rem;font-weight:600;line-height:1}
.bk-ok svg{width:14px;height:14px;stroke-dasharray:24;stroke-dashoffset:calc((1 - var(--r2)) * 24)}

/* scene 2: book entry, a line that draws to a tick, then the bank line */
.bk-match{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px}
.bk-match-head,.bk-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,.5fr) minmax(0,1fr);align-items:center;gap:12px}
.bk-match-head span{color:var(--muted);font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.bk-match-head span:last-child{text-align:end}
.bk-pairs{display:grid;grid-auto-rows:minmax(46px,1fr);gap:10px;margin:0;padding:0;list-style:none}
.bk-cell{display:flex;align-items:center;min-height:46px;padding:8px 14px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font-size:.9375rem;font-weight:600;line-height:1.3}
.bk-link{display:flex;align-items:center;min-width:0}
.bk-seg{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 6),1);display:block;flex:1;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(var(--r));transform-origin:left center}
.bk-seg-b{--r:clamp(0,calc((var(--q,1) - var(--s,0) - .14) * 6),1)}
[dir="rtl"] .bk-seg{transform-origin:right center}
.bk-tick{--r:clamp(0,calc((var(--q,1) - var(--s,0) - .07) * 6),1);display:grid;place-items:center;flex:0 0 26px;width:26px;height:26px;margin-inline:6px;border-radius:50%;background:var(--accent);color:var(--bg);transform:scale(var(--r))}
.bk-tick svg{width:13px;height:13px}

/* scene 3: twelve bars share one baseline; each grows from the bottom, labels sit below */
.bk-chart{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:16px}
.bk-bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(6px,1vw,10px);margin:0;padding:0;list-style:none}
.bk-bars li{display:grid;grid-template-rows:minmax(140px,1fr) auto;gap:8px;justify-items:stretch}
.bk-bar{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 4),1);align-self:end;height:var(--h);min-height:6px;border-radius:8px 8px 3px 3px;background:var(--accent);transform:scaleY(var(--r));transform-origin:center bottom}
.bk-mo{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1;text-align:center}
.bk-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:16px 0 0;border-top:1px solid var(--border);list-style:none}
.bk-chips li{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 5),1);padding:8px 16px;border:1px solid var(--accent);border-radius:999px;color:var(--text);font-size:.875rem;font-weight:600;line-height:1.2;opacity:var(--r);transform:translateY(calc((1 - var(--r)) * 14px))}

/* scene 4: the letter (left) and the four steps (right) */
.bk-notice{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--bk-in);align-items:stretch}
.bk[data-pin] .bk-notice{grid-template-columns:repeat(2,minmax(0,1fr))}
.bk-letter{display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg)}
.bk-letter-tag{align-self:flex-start;padding:6px 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.875rem;font-weight:600;line-height:1.2}
/* a grey line with an accent copy on top that grows left to right: "being read" */
.bk-line{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 5),1);position:relative;display:block;width:100%;height:10px;border-radius:6px;background:var(--border);overflow:hidden}
.bk-line::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(var(--r));transform-origin:left center}
[dir="rtl"] .bk-line::after{transform-origin:right center}
.bk-line-short{width:60%}
.bk-letter-foot{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 3),1);display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:14px;border-top:1px solid var(--border)}
.bk-seal{display:block;flex:0 0 52px;width:52px;height:52px}
.bk-seal svg{display:block;width:100%;height:100%}
.bk-seal circle{stroke-width:4}
.bk-seal-track{stroke:var(--border)}
.bk-seal-ring{stroke:var(--accent);stroke-dasharray:189;stroke-dashoffset:calc((1 - var(--r)) * 189);transform:rotate(-90deg);transform-origin:36px 36px}
.bk-seal-check{stroke:var(--accent);stroke-width:5;stroke-dasharray:44;stroke-dashoffset:calc((1 - clamp(0,calc((var(--q,1) - var(--s,0) - .18) * 6),1)) * 44)}
.bk-seal-text{color:var(--text);font-size:1rem;font-weight:600;line-height:1.3}
/* steps: dot on the left, text on the right, a line draws down to the next dot */
.bk-flow{display:grid;grid-auto-rows:1fr;gap:var(--bk-gap);margin:0;padding:0;list-style:none}
.bk-flow li{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 6),1);--r2:clamp(0,calc((var(--q,1) - var(--s,0) - .06) * 6),1);position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:14px;min-height:0}
.bk-dot{position:relative;display:block;width:20px;height:20px;border:2px solid var(--border);border-radius:50%;background:var(--bg)}
.bk-dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--accent);transform:scale(var(--r))}
.bk-flow li:not(:last-child)::before,.bk-flow li:not(:last-child)::after{content:"";position:absolute;inset-inline-start:9px;top:calc(50% + 14px);width:2px;height:calc(100% + var(--bk-gap) - 28px);border-radius:2px}
.bk-flow li:not(:last-child)::before{background:var(--border)}
.bk-flow li:not(:last-child)::after{background:var(--accent);transform:scaleY(var(--r2));transform-origin:center top}
.bk-flow-text{color:var(--text);font-size:1rem;font-weight:600;line-height:1.35}

/* ---- narrower screens (default layout): cards stack in one column, the notice scene stays one column ---- */
@media (max-width:991px){
  .bk-head{flex-direction:column;align-items:flex-start}
  .bk-lead{flex-basis:auto}
}
@media (max-width:700px){
  .bk-view{grid-template-columns:minmax(0,1fr)}
  .bk-match-head,.bk-pair{grid-template-columns:minmax(0,1fr) minmax(36px,.25fr) minmax(0,1fr);gap:8px}
  .bk-cell{padding:8px 10px;font-size:.875rem}
  .bk-tick{margin-inline:4px}
}


/* =====================================================================
   Services page · Section 7 · Closing call to action
   One accent panel on a calm section: copy and two buttons on one side, a "what happens next" card on the other.
   Text on the panel uses --bg (same pairing as the filled folder in section 5), so it reads in light and dark mode.
   Colours: site tokens only. Smallest text is 14px. Top and bottom padding use one variable, so they are always equal.
   ===================================================================== */
.sc{
  --sc-pad:clamp(56px,7vw,96px);       /* top and bottom padding: always equal */
  --sc-in:clamp(24px,3.2vw,48px);      /* padding inside the panel and gap between its two columns */
  --sc-gap:16px;                       /* space between steps and between buttons */
  --sc-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--sc-pad);background:var(--surface);overflow-x:clip
}
.sc-panel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--sc-in);align-items:center;padding:var(--sc-in);border-radius:28px;background:var(--accent);color:var(--bg);box-shadow:0 22px 54px var(--glow)}

/* left column */
.sc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0}
.sc-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border:1px solid var(--bg);border-radius:999px;color:var(--bg);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.sc-live{width:9px;height:9px;border-radius:50%;background:var(--bg)}
.sc h2{margin:0;color:var(--bg);font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.15}
.sc h2 em{font-style:italic}
.sc-text{max-width:46ch;margin:0;color:var(--bg);font-size:1.0625rem;line-height:1.65}
.sc-actions{display:flex;flex-wrap:wrap;gap:var(--sc-gap);margin-top:8px}
.sc-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 28px;border:1.5px solid var(--bg);border-radius:12px;font:600 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none;white-space:nowrap;transition:transform .3s var(--sc-ease),box-shadow .3s ease,background .3s ease,color .3s ease}
.sc-btn svg{width:18px;height:18px;transition:transform .3s var(--sc-ease)}
.sc-btn-main{background:var(--bg);color:var(--accent)}
.sc-btn-ghost{background:transparent;color:var(--bg)}
.sc-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px var(--glow)}
.sc-btn-main:hover svg{transform:translateX(4px)}
[dir="rtl"] .sc-btn svg{transform:scaleX(-1)}
[dir="rtl"] .sc-btn-main:hover svg{transform:scaleX(-1) translateX(4px)}
.sc-btn-ghost:hover{background:var(--bg);color:var(--accent)}
.sc-btn:focus-visible{outline:3px solid var(--bg);outline-offset:3px}

/* right column: card with three steps, even spacing inside */
.sc-card{min-width:0;padding:var(--sc-in);border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--text)}
.sc-card h3{margin:0 0 20px;color:var(--text);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.sc-steps{display:grid;gap:var(--sc-gap);margin:0;padding:0;list-style:none}
.sc-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--bg)}
.sc-num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--bg);font:700 1rem/1 "Inter",system-ui,sans-serif}
.sc-step{display:grid;gap:2px;min-width:0}
.sc-step strong{color:var(--text);font-size:1rem;font-weight:600;line-height:1.35}
.sc-step span{color:var(--muted);font-size:.875rem;line-height:1.45}

/* tablet and phone: one column, same spacing */
@media (max-width:900px){
  .sc-panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:520px){
  .sc-actions{flex-direction:column;align-items:stretch}
  .sc-btn{width:100%;white-space:normal;text-align:center}
}

/* ---- Animation: only when reduced motion is not requested (index.js adds .in) ---- */
@keyframes sc-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes sc-pulse{0%,100%{box-shadow:0 0 0 0 var(--bg)}50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:no-preference){
  /* panel rises in, then the three steps follow one by one */
  .js .sc:not(.in) .sc-panel,.js .sc:not(.in) .sc-steps li{opacity:0}
  .js .sc.in .sc-panel{animation:sc-rise .9s var(--sc-ease) backwards}
  .js .sc.in .sc-steps li{animation:sc-rise .7s var(--sc-ease) calc(.45s + var(--i,0)*.14s) backwards}
  /* the small dot in the eyebrow pulses softly */
  .js .sc.in .sc-live{animation:sc-pulse 2.4s ease-in-out 1s infinite}
}


/* =====================================================
   PRICING · Banner (75vh)
   Full-cover photo, colour scrim on the text side, simple copy block.
   Top and bottom padding use the same value. Colours: site variables only.
   ===================================================== */
.price-banner{--price-space:clamp(40px,6vw,64px);position:relative;display:flex;align-items:center;min-height:75vh;padding-block:var(--price-space);overflow:hidden;border-bottom:1px solid var(--border);background:var(--bg)}
/* Photo fills the whole banner */
.price-bg{position:absolute;inset:0;background:url("../images/team-meeting-tax-planning.png") no-repeat center 35%/cover}
/* Solid page-colour scrim behind the text, fading out to show the photo */
.price-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,var(--bg) 42%,color-mix(in srgb,var(--bg) 72%,transparent) 64%,color-mix(in srgb,var(--bg) 8%,transparent) 100%)}
[dir="rtl"] .price-bg::after{background:linear-gradient(270deg,var(--bg) 0%,var(--bg) 42%,color-mix(in srgb,var(--bg) 72%,transparent) 64%,color-mix(in srgb,var(--bg) 8%,transparent) 100%)}
.price-inner{position:relative;z-index:1}
.price-copy{max-width:520px}
.price-proof{position:absolute;top:14%;inset-inline-end:0;width:250px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
.price-proof-rating{display:flex;align-items:center;gap:12px;margin-bottom:8px;color:var(--primary)}
.price-proof-rating svg{width:24px;height:24px;flex-shrink:0}
.price-proof-rating strong{font:700 1.5rem/1 "Playfair Display",Georgia,serif;color:var(--text)}
.price-proof p{margin:0;color:var(--muted);font-size:.9375rem;line-height:1.5}
.price-copy .eyebrow{margin:0 0 20px}
.price-copy h1{margin:0 0 16px;font-size:clamp(2rem,4.2vw,3.25rem);line-height:1.15}
.price-copy p{max-width:48ch;margin:0 0 28px;color:var(--muted);font-size:1.0625rem;line-height:1.65}
.price-cta{display:flex;flex-wrap:wrap;gap:14px}
.price-cta .btn-outline{background:var(--surface)}
.price-cta .btn-outline:hover{background:var(--accent)}

/* Phones and tablets: keep the text readable over the full-width photo */
@media(max-width:767px){
.price-banner{min-height:75vh}
.price-bg::after,[dir="rtl"] .price-bg::after{background:linear-gradient(180deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 55%,color-mix(in srgb,var(--bg) 55%,transparent) 100%)}
.price-inner{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.price-proof{position:static;width:min(250px,100%)}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes price-zoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes price-scrim{from{opacity:0}to{opacity:1}}
@keyframes price-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes price-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.price-bg{animation:price-zoom 2.4s cubic-bezier(.2,.7,.2,1) both}
.price-bg::after{animation:price-scrim 1.2s ease both}
.price-copy .eyebrow,.price-copy h1,.price-copy p,.price-cta{animation:price-up .8s cubic-bezier(.2,.7,.2,1) both}
.price-copy .eyebrow{animation-delay:.15s}
.price-copy h1{animation-delay:.3s}
.price-copy p{animation-delay:.45s}
.price-cta{animation-delay:.6s}
/* Accent line draws along the bottom edge */
.price-banner::after{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;background:var(--accent);transform-origin:left center;animation:price-line 1.2s cubic-bezier(.2,.7,.2,1) .8s both}
[dir="rtl"] .price-banner::after{transform-origin:right center}
}


/* =====================================================
   PRICING · Section 3 (plans showcase)
   Heading row, pinned stage with big photo, plan card bottom right, marquee bottom left.
   Scroll drives: card turns upright and grows, then card, photo and background change per plan.
   Top and bottom padding use the same value. Colours: site variables only.
   ===================================================== */
.pp{--pp-space:clamp(40px,6vw,64px);--pp-gap:16px;--pp-card-w:360px;--pp-marq-h:72px;--pp-h:max(560px,calc(100vh - var(--nav-h) - 48px));padding-block:var(--pp-space);background:color-mix(in srgb,var(--bg) 82%,var(--primary) 18%)}
/* Heading row: title left, button right */
.pp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.pp-eyebrow{margin:0 0 14px;padding-inline-start:12px;border-inline-start:4px solid var(--accent);color:var(--text);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.pp-head .btn{gap:8px}
.pp-head h2{margin:0;font-size:clamp(1.75rem,3.6vw,2.75rem);line-height:1.15}
/* Scroll track: tall enough for four steps, the stage stays pinned inside it */
.pp-track{position:relative;height:calc(var(--pp-h) + var(--n)*60vh)}
.pp-stage{--in:1;position:sticky;top:calc(var(--nav-h) + 24px);height:var(--pp-h)}
.pp-items{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.pp-item{position:absolute;inset:0;visibility:hidden;transition:visibility 0s linear .9s}
.pp-item.is-active{z-index:2;visibility:visible;transition-delay:0s}
/* Big background photo (leaves room for the marquee row) */
.pp-img{position:absolute;inset:0 0 calc(var(--pp-marq-h) + var(--pp-gap)) 0;overflow:hidden;border-radius:18px;border:1px solid var(--border);background:var(--surface);opacity:0}
.pp-item.is-active .pp-img{opacity:1}
.pp-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transform:scale(1.1)}
.pp-item.is-active .pp-img img{transform:scale(1)}
/* Plan card: bottom right, turns upright and grows with scroll (--in goes 0 to 1) */
.pp-card{position:absolute;inset-inline-end:0;bottom:0;width:var(--pp-card-w);display:flex;flex-direction:column;gap:10px;padding:16px 16px 20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 40px var(--glow);text-align:center;transform-origin:50% 100%;rotate:calc((1 - var(--in)) * -8deg);scale:calc(.82 + var(--in) * .18);opacity:0;translate:0 24px}
.pp-item.is-active .pp-card{opacity:1;translate:0 0}
.pp-thumb{width:100%;height:clamp(110px,20vh,160px);object-fit:cover;border-radius:10px}
.pp-step{margin:2px 0 0;color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em}
.pp-card h3{margin:0;font-size:1.5rem;line-height:1.2}
.pp-desc{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.pp-price{margin:0;color:var(--muted);font-size:1rem}
.pp-price strong{color:var(--text);font:700 1.5rem/1 "Playfair Display",Georgia,serif}
.pp-link{align-self:center;padding-bottom:2px;border-bottom:1.5px solid var(--accent);color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif;text-decoration:none}
.pp-link:hover{color:var(--accent)}
/* Marquee: bottom left, never reaches the card */
.pp-marq{position:absolute;inset-inline-start:0;bottom:0;display:flex;align-items:center;width:calc(100% - var(--pp-card-w) - 24px);height:var(--pp-marq-h);overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.pp-marq::before,.pp-marq::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.pp-marq::before{inset-inline-start:0;background:linear-gradient(90deg,var(--surface),transparent)}
.pp-marq::after{inset-inline-end:0;background:linear-gradient(270deg,var(--surface),transparent)}
[dir="rtl"] .pp-marq::before{background:linear-gradient(270deg,var(--surface),transparent)}
[dir="rtl"] .pp-marq::after{background:linear-gradient(90deg,var(--surface),transparent)}
.pp-marq-track{display:flex;width:max-content}
.pp-marq ul{display:flex;gap:48px;margin:0;padding:0 48px 0 0;list-style:none}
[dir="rtl"] .pp-marq ul{padding:0 0 0 48px}
.pp-marq li{color:var(--muted);font:500 1.125rem/1 "Inter",system-ui,sans-serif;white-space:nowrap}

/* Tablets and phones: no pinning, marquee on top, each plan is a photo with its card underneath */
@media(max-width:900px){
.pp-head{flex-direction:column;align-items:flex-start}
.pp-track{height:auto}
.pp-stage{position:static;display:flex;flex-direction:column;gap:24px;height:auto}
.pp-items{position:static;display:grid;gap:32px}
.pp-item{position:static;display:flex;flex-direction:column;gap:16px;visibility:visible}
.pp-img{position:relative;inset:auto;height:clamp(220px,48vw,340px);opacity:1}
.pp-img img,.pp-item.is-active .pp-img img{transform:none}
.pp-card{position:static;width:auto;opacity:1;translate:none;rotate:none;scale:none}
.pp-marq{position:relative;order:-1;width:auto}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes pp-marq{to{transform:translateX(-50%)}}
@keyframes pp-marq-rtl{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.pp-marq-track{animation:pp-marq 30s linear infinite}
[dir="rtl"] .pp-marq-track{animation-name:pp-marq-rtl}
.pp-marq:hover .pp-marq-track{animation-play-state:paused}
.pp-img{transition:opacity .9s ease}
.pp-img img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.pp-card{transition:opacity .35s ease,translate .35s ease}
.pp-item.is-active .pp-card{transition:opacity .6s ease .25s,translate .8s cubic-bezier(.2,.7,.2,1) .25s}
}
@media(prefers-reduced-motion:reduce){
.pp-marq{overflow-x:auto}
.pp-img img{transform:none}
}


/* =====================================================
   PRICING · Section 2 (promise panel)
   Dark panel left (message, buttons, proof card), photo with stat cards right.
   Top and bottom padding use the same value. Colours: site variables only.
   ===================================================== */
.ps{--ps-space:clamp(40px,6vw,64px);padding-block:var(--ps-space);background:var(--bg)}
.ps-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:stretch}
@media(min-width:901px){.ps-grid{min-height:540px}}
/* Left panel */
.ps-panel{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:clamp(24px,3vw,40px);border-radius:20px;background:var(--secondary);color:var(--on-primary)}
.ps-copy{display:flex;flex-direction:column;gap:18px}
.ps-eyebrow{margin:0;padding-inline-start:12px;border-inline-start:4px solid var(--on-primary);color:var(--on-primary);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ps-panel h2{margin:0;color:var(--on-primary);font-size:clamp(2rem,4vw,3.25rem);line-height:1.1}
.ps-text{max-width:46ch;margin:0;color:var(--on-primary);font-size:1.0625rem;line-height:1.65}
.ps-cta{display:flex;flex-wrap:wrap;gap:12px}
.ps-price-note{display:flex;align-items:center;gap:14px;max-width:520px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--on-primary) 28%,transparent);border-radius:14px;background:color-mix(in srgb,var(--on-primary) 10%,transparent);color:var(--on-primary);text-decoration:none;transition:background .2s ease,transform .2s ease}
.ps-price-note:hover{background:color-mix(in srgb,var(--on-primary) 17%,transparent);transform:translateY(-2px)}
.ps-price-mark{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:12px;background:var(--on-primary);color:var(--secondary);font:700 1.3rem/1 "Playfair Display",Georgia,serif}
.ps-price-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
.ps-price-copy strong{font:700 1rem/1.3 "Inter",system-ui,sans-serif}
.ps-price-copy>span{font-size:.875rem;line-height:1.45;opacity:.88}
.ps-price-arrow{margin-inline-start:auto;flex:0 0 auto;font-size:1.25rem}
.ps-btn{gap:8px;background:var(--surface);border-color:var(--surface);color:var(--text)}
.ps-btn:hover{background:var(--bg);border-color:var(--bg)}
.ps-btn-line{background:transparent;border-color:var(--on-primary);color:var(--on-primary)}
.ps-btn-line:hover{background:var(--on-primary);border-color:var(--on-primary);color:var(--secondary)}
/* Small proof card at the bottom of the panel */
.ps-proof{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid color-mix(in srgb,var(--on-primary) 30%,transparent);border-radius:14px;background:color-mix(in srgb,var(--on-primary) 12%,transparent)}
.ps-proof img{flex-shrink:0;width:88px;height:72px;object-fit:cover;border-radius:10px}
.ps-proof p{margin:0;color:var(--on-primary);font:600 1.0625rem/1.4 "Inter",system-ui,sans-serif}
/* Right frame: photo, then stats row under it */
.ps-visual{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface)}
.ps-photo{position:relative;flex:1;min-height:300px;overflow:hidden}
.ps-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.ps-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px}
.ps-stat{padding:18px 20px;border:1px solid var(--border);border-radius:14px;background:var(--bg)}
.ps-num{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;color:var(--accent);font:700 2.5rem/1 "Playfair Display",Georgia,serif}
.ps-num small{color:var(--muted);font:600 1rem/1 "Inter",system-ui,sans-serif}
.ps-label{margin:0;color:var(--muted);font-size:1rem;line-height:1.4}

/* Tablets and phones: panel first, photo block under it */
@media(max-width:900px){
.ps-grid{grid-template-columns:minmax(0,1fr)}
.ps-photo{flex:none;height:clamp(240px,60vw,360px);min-height:0}
}
@media(max-width:520px){
.ps-stats{grid-template-columns:minmax(0,1fr)}
.ps-proof img{width:72px;height:60px}
.ps-cta{display:grid;grid-template-columns:minmax(0,1fr)}
.ps-cta .btn{width:100%;height:48px}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
.js .ps:not(.in) .ps-panel,.js .ps:not(.in) .ps-visual{opacity:0;transform:translateY(28px)}
.js .ps:not(.in) .ps-proof,.js .ps:not(.in) .ps-stat{opacity:0;transform:translateY(18px)}
.js .ps:not(.in) .ps-photo img{transform:scale(1.12)}
.js .ps.in .ps-panel,.js .ps.in .ps-visual{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .ps.in .ps-visual{transition-delay:.15s}
.js .ps.in .ps-photo img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1) .15s}
.js .ps.in .ps-proof{transition:opacity .7s ease .6s,transform .7s cubic-bezier(.2,.7,.2,1) .6s}
.js .ps.in .ps-stat{transition:opacity .7s ease calc(.6s + var(--i,0)*.15s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--i,0)*.15s)}
.ps-proof,.ps-btn{transition:transform .25s ease,background .25s ease,color .25s ease}
}


/* =====================================================
   PRICING · Section 4 (find your plan)
   Left: heading, text, search pill, two stats, avatar stack.
   Right: bento grid, one large image card on top and two smaller below.
   Top and bottom padding use the same value. Colours: site variables only.
   ===================================================== */
.fp{--fp-space:clamp(40px,6vw,64px);padding-block:var(--fp-space);background:var(--bg)}
.fp-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:stretch}
/* Left column */
.fp-left{display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.fp-eyebrow{margin:0 0 14px}
.fp-top h2{margin:0 0 20px;font-size:clamp(2.25rem,4.6vw,3.75rem);line-height:1.08}
.fp-top h2 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.fp-top h2 .line>span{display:inline-block}
.fp-text{max-width:44ch;margin:0 0 24px;color:var(--muted);font-size:1rem;line-height:1.65}
.fp-search{display:flex;align-items:center;gap:8px;max-width:420px;padding:6px 6px 6px 22px;border:1px solid var(--border);border-radius:999px;background:var(--surface)}
.fp-search:focus-within{border-color:var(--accent)}
.fp-search input{flex:1;min-width:0;height:44px;border:0;outline:0;background:transparent;color:var(--text);font:500 1rem/1 "Inter",system-ui,sans-serif}
.fp-search input::placeholder{color:var(--muted);opacity:1}
.fp-search button{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:var(--secondary);color:var(--on-primary);cursor:pointer;transition:transform .25s ease}
.fp-search button:hover{transform:scale(1.08)}
.fp-search svg{width:20px;height:20px}
.fp-msg{margin:12px 0 0;padding-inline-start:22px;color:var(--accent);font:600 .9375rem/1.4 "Inter",system-ui,sans-serif}
.fp-msg:empty{display:none}
.fp-stats{display:flex;flex-wrap:wrap;gap:16px 56px}
.fp-num{display:flex;align-items:baseline;gap:6px;margin:0 0 6px;color:var(--accent);font:700 3rem/1 "Playfair Display",Georgia,serif}
.fp-num small{font-size:1.5rem}
.fp-label{max-width:16ch;margin:0;color:var(--text);font:600 1rem/1.35 "Inter",system-ui,sans-serif}
.fp-avatars{display:flex;margin:0;padding:0;list-style:none}
.fp-avatars li{width:52px;height:52px;overflow:hidden;border:3px solid var(--bg);border-radius:50%;background:var(--surface)}
.fp-avatars li+li{margin-inline-start:-12px}
.fp-avatars img{width:100%;height:100%;object-fit:cover;transform-origin:var(--ox) var(--oy);scale:2.6;object-position:var(--ox) var(--oy)}
/* Right column: bento cards */
.fp-bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1.4fr 1fr;gap:16px;min-height:540px}
.fp-card{position:relative;display:block;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:var(--surface);color:var(--on-primary);text-decoration:none}
.fp-card-lg{grid-column:1/-1}
.fp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.fp-card:hover img{transform:scale(1.06)}
/* Colour scrim at the top keeps the title readable in light and dark mode */
.fp-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--secondary) 94%,transparent) 0%,color-mix(in srgb,var(--secondary) 72%,transparent) 36%,transparent 68%);pointer-events:none}
.fp-card h3{position:absolute;z-index:2;top:20px;inset-inline:22px;margin:0;color:var(--on-primary);font-size:1.5rem;line-height:1.15}
.fp-card-lg h3{font-size:clamp(1.75rem,3vw,2.5rem);max-width:12ch}
.fp-btn{position:absolute;z-index:2;bottom:16px;inset-inline-start:16px;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease}
.fp-btn svg{width:20px;height:20px}
.fp-btn-arrow{background:var(--secondary);border-color:var(--secondary);color:var(--on-primary)}
.fp-card:hover .fp-btn{transform:rotate(90deg)}
.fp-card:hover .fp-btn-arrow{transform:rotate(45deg)}
.fp-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* Tablets and phones: left column first, bento cards stack under it */
@media(max-width:900px){
.fp-grid{grid-template-columns:minmax(0,1fr);gap:32px}
.fp-bento{grid-template-rows:none;grid-auto-rows:minmax(220px,auto);min-height:0}
.fp-card-lg{min-height:280px}
}
@media(min-width:521px) and (max-width:900px){
.fp-left{align-items:center;text-align:center}
.fp-top{display:flex;flex-direction:column;align-items:center;width:100%;text-align:center}
.fp-text{width:100%}
.fp-search{width:100%}
.fp-msg{padding-inline:0}
.fp-stats{justify-content:center;text-align:center}
.fp-label{margin-inline:auto}
.fp-avatars{align-self:center}
}
@media(max-width:520px){
.fp-bento{grid-template-columns:minmax(0,1fr)}
.fp-card-lg{grid-column:auto}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes fp-pop{from{opacity:0;scale:.5}}
/* before reveal */
.js .fp:not(.in) .fp-top h2 .line>span{transform:translateY(110%)}
.js .fp:not(.in) .fp-text,.js .fp:not(.in) .fp-msg,.js .fp:not(.in) .fp-stat{opacity:0;transform:translateY(18px)}
.js .fp:not(.in) .fp-search{clip-path:inset(0 100% 0 0 round 999px)}
.js .fp:not(.in) .fp-card{opacity:0;transform:translateY(32px);clip-path:inset(12% 6% 12% 6% round 22px)}
.js .fp:not(.in) .fp-card img{transform:scale(1.25)}
.js .fp:not(.in) .fp-card h3{opacity:0;transform:translateY(16px)}
.js .fp:not(.in) .fp-avatars li,.js .fp:not(.in) .fp-btn{opacity:0}
/* after reveal */
.js .fp.in .fp-top h2 .line>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.15s)}
.js .fp.in .fp-text{transition:opacity .7s ease .3s,transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.js .fp.in .fp-search{transition:clip-path 1s cubic-bezier(.2,.7,.2,1) .45s}
.js .fp.in .fp-stat{transition:opacity .7s ease calc(.6s + var(--i,0)*.15s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--i,0)*.15s)}
.js .fp.in .fp-avatars li{animation:fp-pop .5s cubic-bezier(.2,.9,.3,1.3) calc(.9s + var(--i,0)*.12s) backwards}
.js .fp.in .fp-card{transition:opacity .8s ease calc(.2s + var(--i,0)*.18s),transform .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*.18s),clip-path 1s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*.18s)}
.js .fp.in .fp-card img{transition:transform 1.6s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*.18s)}
.js .fp.in .fp-card:hover img{transition-duration:.9s;transition-delay:0s}
.js .fp.in .fp-card h3{transition:opacity .7s ease calc(.6s + var(--i,0)*.18s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.6s + var(--i,0)*.18s)}
.js .fp.in .fp-btn{animation:fp-pop .5s cubic-bezier(.2,.9,.3,1.3) calc(1s + var(--i,0)*.18s) backwards}
}


/* =====================================================
   PRICING · Section 5 (why FinTrust)
   Heading row (title left; avatar, stats, text and button right), then a bento grid:
   tall card | number + pathway cards | chart card | tall card, with a wide strip under the middle.
   Top and bottom padding use the same value. Colours: site variables only.
   ===================================================== */
.pbx{--pbx-space:clamp(40px,6vw,64px);--pbx-gap:16px;padding-block:var(--pbx-space);background:color-mix(in srgb,var(--bg) 82%,var(--primary) 18%)}
/* Heading row */
.pbx-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:32px}
.pbx-head .eyebrow{margin:0 0 20px}
.pbx-head h2{margin:0;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.1}
.pbx-head h2 .line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.pbx-head h2 .line>span{display:inline-block}
.pbx-head h2 em{position:relative;color:var(--accent);font-style:normal}
.pbx-top{display:flex;align-items:center;gap:28px;margin-bottom:16px}
.pbx-orb{position:relative;display:flex;flex-shrink:0;width:92px;height:56px}
.pbx-orb img{width:56px;height:56px;object-fit:cover;object-position:40% 18%;scale:1;border:3px solid var(--bg);border-radius:50%}
.pbx-orb-dot{position:absolute;inset-inline-start:36px;display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border:3px solid var(--bg);border-radius:50%;background:var(--secondary);color:var(--on-primary)}
.pbx-orb-dot svg{width:22px;height:22px}
.pbx-num{margin:0;color:var(--text);font:700 2.25rem/1 "Playfair Display",Georgia,serif}
.pbx-cap{margin:4px 0 0;color:var(--muted);font-size:.9375rem;line-height:1.3}
.pbx-text{max-width:48ch;margin:0 0 20px;color:var(--muted);font-size:1rem;line-height:1.65}
.pbx-cta{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.pbx-link{color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.pbx-link:hover{color:var(--accent)}

/* Bento grid */
.pbx-grid{display:grid;grid-template-columns:1fr 1.4fr 1.4fr 1fr;grid-template-rows:auto minmax(230px,1fr) auto;gap:var(--pbx-gap)}
.pbx-card{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:22px;overflow:hidden;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text)}
.pbx-card h3{margin:0;font-size:1.375rem;line-height:1.25}
.pbx-card p{margin:0;color:var(--muted);font-size:1rem;line-height:1.55}
.pbx-c1{grid-column:1;grid-row:1/4;background:linear-gradient(var(--glow-2),var(--glow-2)),var(--surface)}
.pbx-c2{grid-column:2;grid-row:1;flex-direction:row;align-items:center;gap:18px;background:var(--accent);border-color:var(--accent)}
.pbx-c3{grid-column:2;grid-row:2;background:linear-gradient(var(--glow),var(--glow)),var(--surface)}
.pbx-c4{grid-column:3;grid-row:1/3}
.pbx-c5{grid-column:4;grid-row:1/4;background:linear-gradient(var(--glow-2),var(--glow-2)),var(--surface)}
.pbx-c6{grid-column:2/4;grid-row:3;flex-direction:row;align-items:center;gap:20px;border-color:var(--secondary);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--on-primary) 8%,transparent) 0 2px,transparent 2px 14px),var(--secondary);color:var(--on-primary)}
/* Card 1: big outlined 01, search pill, mini cards */
.pbx-big{display:block;margin-bottom:8px;color:transparent;-webkit-text-stroke:2px var(--border);font:700 clamp(4.5rem,8vw,7rem)/.9 "Playfair Display",Georgia,serif}
.pbx-c1-body{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.pbx-search{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px 10px 18px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--muted);font:500 1rem/1 "Inter",system-ui,sans-serif;text-decoration:none}
.pbx-search svg{flex-shrink:0;width:34px;height:34px;padding:8px;border-radius:50%;background:var(--secondary);color:var(--on-primary)}
.pbx-search:hover{border-color:var(--accent);color:var(--text)}
.pbx-minis{display:grid;gap:10px;margin-top:4px}
.pbx-mini{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-decoration:none}
.pbx-mini img{flex-shrink:0;width:40px;height:40px;object-fit:cover;object-position:67% 30%;border-radius:50%}
.pbx-mini>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.pbx-mk{display:block;margin:0;color:var(--muted);font:500 .875rem/1.3 "Inter",system-ui,sans-serif}
.pbx-mv{display:block;margin:0;color:var(--text);font:600 1rem/1.3 "Inter",system-ui,sans-serif}
.pbx-mini-acc{flex-direction:column;align-items:flex-start;gap:2px;border-color:var(--accent);background:var(--accent)}
.pbx-mini-acc .pbx-mk,.pbx-mini-acc .pbx-mv{color:var(--on-primary)}
a.pbx-mini:hover{border-color:var(--accent)}
/* Card 2: number card */
.pbx-n{flex-shrink:0;color:var(--on-primary)!important;font:700 3.5rem/1 "Playfair Display",Georgia,serif!important}
.pbx-n-text{color:var(--on-primary)!important;font-weight:600;line-height:1.4!important}
/* Card 3: pathway card */
.pbx-c3-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pbx-k{color:var(--accent)!important;font:600 .875rem/1.2 "Inter",system-ui,sans-serif!important;letter-spacing:.08em;text-transform:uppercase}
.pbx-round{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--text);transition:transform .35s cubic-bezier(.2,.7,.2,1),background .25s ease,color .25s ease}
.pbx-round svg{width:20px;height:20px}
.pbx-round:hover{background:var(--secondary);border-color:var(--secondary);color:var(--on-primary);transform:rotate(45deg)}
.pbx-round-lt{margin-inline-start:auto;border-color:var(--on-primary);background:transparent;color:var(--on-primary)}
.pbx-round-lt:hover{background:var(--on-primary);border-color:var(--on-primary);color:var(--secondary)}
.pbx-chips{display:flex;flex-wrap:wrap;gap:8px;margin:auto 0 0;padding:0;list-style:none}
.pbx-chips li{padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:500 .875rem/1.2 "Inter",system-ui,sans-serif}
.pbx-chips-col{flex-direction:column;align-items:flex-start}
/* Card 4: bar chart */
.pbx-c4-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pbx-c4-top h3{max-width:18ch;font-size:1.25rem}
.pbx-pill{flex-shrink:0;padding:8px 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);font:500 .875rem/1.2 "Inter",system-ui,sans-serif}
.pbx-chart{display:flex;flex-direction:column;flex:1;gap:10px;min-height:200px}
.pbx-bars{display:flex;flex:1;align-items:flex-end;gap:6px}
.pbx-bar{flex:1;height:var(--h);min-height:8px;border-radius:8px 8px 4px 4px;background:color-mix(in srgb,var(--accent) 35%,var(--surface))}
.pbx-bar-peak{background:var(--accent)}
.pbx-labs{display:flex;gap:6px}
.pbx-labs span{flex:1;color:var(--muted);font:500 .8125rem/1 "Inter",system-ui,sans-serif;text-align:center}
/* Card 5 */
.pbx-chip-top{align-self:flex-start;padding:8px 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text)!important;font:500 .875rem/1.2 "Inter",system-ui,sans-serif!important}
.pbx-c5 h3{margin-top:auto}
.pbx-c5 .pbx-chips{margin-top:8px}
/* Card 6: wide strip */
.pbx-icons{display:flex;gap:10px;flex-shrink:0}
.pbx-icons a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--on-primary);border-radius:50%;color:var(--on-primary);transition:background .25s ease,color .25s ease,transform .25s ease}
.pbx-icons a:hover{background:var(--on-primary);color:var(--secondary);transform:translateY(-3px)}
.pbx-icons svg{width:20px;height:20px}
.pbx-c6 .pbx-c6-text{max-width:34ch;color:var(--on-primary);font:600 1.125rem/1.4 "Inter",system-ui,sans-serif}
.pbx-card{translate:0 0;transition:translate .3s ease,border-color .25s ease}
.pbx-card:hover{translate:0 -4px}

/* Tablets: two columns */
@media(max-width:1000px){
.pbx-head{grid-template-columns:minmax(0,1fr);gap:24px}
.pbx-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
.pbx-c1,.pbx-c2,.pbx-c3,.pbx-c4,.pbx-c5,.pbx-c6{grid-column:auto;grid-row:auto}
.pbx-c1{min-height:380px}
.pbx-c4{grid-column:1/-1;min-height:320px}
.pbx-c6{grid-column:1/-1}
}
/* Phones: one column */
@media(max-width:640px){
.pbx-grid{grid-template-columns:minmax(0,1fr)}
.pbx-c1,.pbx-c4,.pbx-c6{grid-column:auto}
.pbx-top{flex-wrap:wrap;gap:20px}
.pbx-c6{flex-wrap:wrap}
.pbx-c6 .pbx-c6-text{flex:1 1 200px}
}

/* Motion (skipped when the visitor prefers reduced motion) */
@media(prefers-reduced-motion:no-preference){
@keyframes pbx-pop{from{opacity:0;scale:.5}}
@keyframes pbx-glow{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 8px transparent}}
/* before reveal */
.js .pbx:not(.in) .eyebrow,.js .pbx:not(.in) .pbx-top,.js .pbx:not(.in) .pbx-text,.js .pbx:not(.in) .pbx-cta{opacity:0;transform:translateY(18px)}
.js .pbx:not(.in) .pbx-head h2 .line>span{transform:translateY(110%)}
.js .pbx:not(.in) .pbx-card{opacity:0;transform:translateY(34px) scale(.97)}
.js .pbx:not(.in) .pbx-bar{transform:scaleY(0)}
.js .pbx:not(.in) .pbx-big{opacity:0;transform:translateX(-24px)}
.js .pbx:not(.in) .pbx-chips li,.js .pbx:not(.in) .pbx-icons a{opacity:0}
/* after reveal */
.pbx-bar{transform-origin:50% 100%}
.js .pbx.in .eyebrow{transition:opacity .6s ease .1s,transform .6s cubic-bezier(.2,.7,.2,1) .1s}
.js .pbx.in .pbx-head h2 .line>span{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--i,0)*.15s)}
.js .pbx.in .pbx-top{transition:opacity .7s ease .4s,transform .7s cubic-bezier(.2,.7,.2,1) .4s}
.js .pbx.in .pbx-text{transition:opacity .7s ease .55s,transform .7s cubic-bezier(.2,.7,.2,1) .55s}
.js .pbx.in .pbx-cta{transition:opacity .7s ease .7s,transform .7s cubic-bezier(.2,.7,.2,1) .7s}
.js .pbx.in .pbx-orb img,.js .pbx.in .pbx-orb-dot{animation:pbx-pop .6s cubic-bezier(.2,.9,.3,1.3) .6s backwards}
.js .pbx.in .pbx-card{transition:opacity .8s ease calc(.5s + var(--i,0)*.12s),transform .9s cubic-bezier(.2,.7,.2,1) calc(.5s + var(--i,0)*.12s),translate .3s ease,border-color .25s ease}
.js .pbx.in .pbx-big{transition:opacity .8s ease 1s,transform .9s cubic-bezier(.2,.7,.2,1) 1s}
.js .pbx.in .pbx-bar{transition:transform .9s cubic-bezier(.2,.7,.2,1) calc(1.1s + var(--b,0)*.06s)}
.js .pbx.in .pbx-chips li{animation:pbx-pop .5s cubic-bezier(.2,.9,.3,1.3) calc(1.2s + var(--b,0)*.1s) backwards}
.js .pbx.in .pbx-icons a{animation:pbx-pop .5s cubic-bezier(.2,.9,.3,1.3) calc(1.3s + var(--b,0)*.1s) backwards}
.js .pbx.in .pbx-bar-peak{animation:pbx-glow 2.4s ease-in-out 2.4s infinite}
}

/* =====================================================================
   Pricing page · Section 6 · How your fee adds up ("fee receipt")
   A tall track holds one sticky stage. While the visitor scrolls the track, the stage stays pinned under the navbar:
   the starting price counts up, the copy on the left changes chapter by chapter, and a receipt on the right
   fills its dashed slots one at a time. Everything moves vertically only (no sideways scrolling, no carousels).
   index.js sets data-pin on the section for wide, tall screens without reduced motion, and writes:
     --q  (0 to 1) progress of a chapter, on every element marked data-pb-q (copy, slots, meter bars, price)
   Without data-pin (phones, tablets, short screens, reduced motion, no JS) the receipt is shown fully filled and the copy column is hidden.
   Captions sit below the receipt, never on it. Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable, so they are always equal.
   ===================================================================== */
.pb{
  --pb-pad:clamp(56px,7vw,96px);                          /* top and bottom padding: always equal */
  --pb-gap:clamp(16px,2vw,24px);                          /* space between rows and blocks */
  --pb-in:clamp(22px,2.4vw,32px);                         /* padding inside the receipt and gap between columns */
  --pb-top:calc(var(--nav-h) + 24px);                     /* where the pinned stage sits: just under the navbar */
  --pb-h:min(600px,calc(100vh - var(--nav-h) - 48px));    /* height of the pinned stage */
  --pb-step:55vh;                                         /* scroll distance for each chapter */
  --pb-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--pb-pad);background:var(--surface);border-bottom:1px solid var(--border);overflow-x:clip
}

/* ---- heading row ---- */
.pb-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(32px,4vw,56px)}
.pb-head-main{min-width:0}
.pb-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.pb-live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.pb h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.pb h2 em{font-style:italic;color:var(--accent)}
.pb-lead{flex:0 1 40ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* ---- default layout (not pinned): price on top, filled receipt below; copy and meter are hidden ---- */
.pb-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--pb-in);align-items:start}
.pb-side{display:grid;gap:var(--pb-gap);min-width:0}
.pb-copy,.pb-meter{display:none}
.pb-fig{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.pb-fig-label,.pb-fig-unit{color:var(--muted);font-size:1rem;font-weight:600;line-height:1.3}
.pb-fig-num{color:var(--accent);font:700 clamp(3.5rem,8vw,5.5rem)/1 "Playfair Display",Georgia,serif;font-variant-numeric:tabular-nums}

/* ---- the receipt ---- */
.pb-receipt{display:flex;flex-direction:column;gap:16px;min-width:0;padding:var(--pb-in);border:1px solid var(--border);border-radius:22px;background:var(--bg);box-shadow:0 14px 34px var(--glow-2)}
.pb-rhead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1.5px dashed var(--border)}   /* dashed rule = receipt look */
.pb-rhead h3{margin:0;color:var(--text);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.pb-rtag{padding:6px 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.875rem;font-weight:600;line-height:1.2;white-space:nowrap}
.pb-slots{flex:1;display:grid;grid-auto-rows:minmax(60px,1fr);gap:10px;margin:0;padding:0;list-style:none}
.pb-note{margin:0;color:var(--muted);font-size:.875rem;line-height:1.5}

/* a slot = a dashed ghost and the real card in the same cell. The ghost fades out first, then the card rises in. */
.pb-slot{--r:clamp(0,calc((var(--q,1) - var(--s,0)) * 4),1);display:grid;min-height:0}
.pb-ghost{grid-area:1 / 1;border:1.5px dashed var(--border);border-radius:16px;opacity:clamp(0,calc(1 - var(--r) * 3),1)}
.pb-fill{grid-area:1 / 1;display:flex;align-items:center;gap:14px;min-width:0;padding:10px 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface);opacity:clamp(0,calc((var(--r) - .33) * 1.5),1);transform:translateY(calc((1 - var(--r)) * 24px))}
.pb-ico{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:50%;background:var(--glow);color:var(--accent)}
.pb-ico svg{width:20px;height:20px}
.pb-txt{display:grid;gap:2px;flex:1;min-width:0}
.pb-txt strong{color:var(--text);font-size:1rem;font-weight:600;line-height:1.3}
.pb-txt span{color:var(--muted);font-size:.875rem;line-height:1.4}
.pb-ok{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--bg)}
.pb-ok svg{width:14px;height:14px}
/* the total slot is filled solid with the accent colour */
.pb-slot-total .pb-fill{border-color:var(--accent);background:var(--accent)}
.pb-slot-total .pb-txt strong,.pb-slot-total .pb-txt span{color:var(--bg)}
.pb-zero{flex-shrink:0;color:var(--bg);font:700 clamp(1.75rem,3vw,2.25rem)/1 "Playfair Display",Georgia,serif}

/* ---- pinned layout ---- */
.pb[data-pin] .pb-track{height:calc(var(--pb-h) + var(--pb-n,4) * var(--pb-step))}   /* travel = n chapters x step */
.pb[data-pin] .pb-stage{position:sticky;top:var(--pb-top);height:var(--pb-h);grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.pb[data-pin] .pb-side{align-content:center;row-gap:clamp(24px,3vw,36px);height:100%}   /* price, copy and meter stay together as one centred block */
.pb[data-pin] .pb-copy{display:grid;grid-template-columns:minmax(0,1fr);min-height:0}   /* height = the tallest chapter, so nothing below it jumps */
.pb[data-pin] .pb-meter{display:grid}
.pb[data-pin] .pb-receipt{height:100%}

/* copy blocks share one cell; leaving fades first, entering follows (vertical movement only) */
.pb-scene{grid-area:1 / 1;display:flex;flex-direction:column;justify-content:flex-start;gap:14px;min-width:0;opacity:0;visibility:hidden;transform:translateY(28px);transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s}
.pb-scene[data-state="past"]{transform:translateY(-28px)}
.pb-scene[data-state="active"]{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease .25s,transform .6s var(--pb-ease) .25s,visibility 0s}
.pb-step{margin:0;color:var(--accent);font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pb-scene h3{margin:0;color:var(--text);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.2}
.pb-scene p:not(.pb-step){margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.6}

/* chapter meter: four bars in one row, each fills with its chapter progress; the label sits below its bar */
.pb-meter{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.pb-meter button{display:grid;gap:10px;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.pb-bar{position:relative;display:block;height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.pb-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transform:scaleX(var(--q,0));transform-origin:left center}
[dir="rtl"] .pb-bar::after{transform-origin:right center}
.pb-lab{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.2;transition:color .3s ease}
.pb-meter li.is-on .pb-lab{color:var(--accent)}
.pb-meter button:hover .pb-lab{color:var(--text)}

/* ---- narrower screens (default layout) ---- */
@media (max-width:991px){
  .pb-head{flex-direction:column;align-items:flex-start}
  .pb-lead{flex-basis:auto}
}
@media (min-width:768px) and (max-width:1023px){
  .pb-stage{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);align-items:center}   /* price beside the receipt on tablets */
}

/* =====================================================================
   Pricing page · Section 7 · "Lock your fee" call to action
   A perforated ticket: main part on the left, tear-off stub on the right (stacked on small screens).
   The stub shows the fee of the chosen plan; index.js counts the number and replays the "Fee locked" stamp.
   No images. Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--lk-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.lk{
  --lk-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --lk-in:clamp(24px,3.4vw,48px);         /* padding inside the ticket */
  --lk-gap:clamp(16px,2vw,24px);          /* space between blocks */
  --lk-cut:26px;                          /* size of the round cut-outs */
  --lk-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--lk-pad);background:var(--bg);overflow-x:clip
}

/* ---- the ticket (rises in once, when the section is first seen) ---- */
.lk-ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,320px);overflow:hidden;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 18px 44px var(--glow-2)}
.lk[data-js]:not([data-in]) .lk-ticket{opacity:0}   /* hidden only when JS runs, so it never stays invisible */
.lk[data-in] .lk-ticket{animation:lk-rise .8s var(--lk-ease) both}
@keyframes lk-rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}

/* ---- main part ---- */
.lk-main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--lk-gap);min-width:0;padding:var(--lk-in)}
.lk-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.lk-live{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.lk h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.lk h2 em{font-style:italic;color:var(--accent)}
.lk-lead{max-width:56ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* plan picker: four equal tiles (two by two on small screens) */
.lk-picker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%}
.lk-opt{display:grid;gap:4px;min-width:0;padding:14px 16px;border:1.5px solid var(--border);border-radius:16px;background:var(--bg);color:var(--text);font:inherit;text-align:start;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .25s var(--lk-ease)}
.lk-opt:hover{border-color:var(--accent);transform:translateY(-2px)}
.lk-opt-name{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.lk-opt-fee{color:var(--text);font:700 1.25rem/1.2 "Playfair Display",Georgia,serif}
.lk-opt.is-on{border-color:var(--accent);background:var(--glow)}
.lk-opt.is-on .lk-opt-name{color:var(--accent)}

.lk-actions{display:flex;flex-wrap:wrap;gap:12px}
.lk-actions .btn{height:auto;min-height:50px;padding-block:10px;text-align:center}
.lk-trust{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0;padding:0;list-style:none}
.lk-trust li{position:relative;padding-inline-start:22px;color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.4}
.lk-trust li::before{content:"";position:absolute;inset-inline-start:2px;top:.3em;width:6px;height:11px;border-inline-end:2.5px solid var(--accent);border-block-end:2.5px solid var(--accent);transform:rotate(45deg)}   /* tick mark */

/* ---- stub: dashed perforation line + two round cut-outs ---- */
.lk-stub{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;padding:var(--lk-in);border-inline-start:2px dashed var(--border);background:var(--bg);text-align:center}
.lk-cut{position:absolute;width:var(--lk-cut);height:var(--lk-cut);border:1px solid var(--border);border-radius:50%;background:var(--bg)}
.lk-cut-a{top:calc(var(--lk-cut) / -2);inset-inline-start:calc(var(--lk-cut) / -2 - 1px)}
.lk-cut-b{bottom:calc(var(--lk-cut) / -2);inset-inline-start:calc(var(--lk-cut) / -2 - 1px)}
.lk-stub p{margin:0}
.lk-stub-label{color:var(--accent);font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lk-plan{color:var(--muted);font-size:1rem;font-weight:600;line-height:1.3}
.lk-price{color:var(--text)}
.lk-price strong{display:block;color:var(--accent);font:700 clamp(2.75rem,5vw,4rem)/1.05 "Playfair Display",Georgia,serif;font-variant-numeric:tabular-nums}
.lk-unit{color:var(--muted);font-size:1rem;font-weight:600;line-height:1.3}
.lk-stamp{display:inline-block;margin-top:14px;padding:8px 18px;border:2px solid var(--accent);border-radius:10px;color:var(--accent);font:700 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-4deg)}
.lk-stamp.is-hit{animation:lk-thud .55s var(--lk-ease)}
@keyframes lk-thud{0%{opacity:0;transform:translateY(-26px) rotate(-4deg) scale(1.25)}60%{opacity:1;transform:translateY(3px) rotate(-4deg) scale(.97)}100%{opacity:1;transform:translateY(0) rotate(-4deg) scale(1)}}
.lk-bars{display:block;width:100%;max-width:200px;height:34px;margin-top:14px;border-radius:4px;opacity:.55;background:repeating-linear-gradient(90deg,var(--text) 0 2px,transparent 2px 5px,var(--text) 5px 6px,transparent 6px 10px,var(--text) 10px 13px,transparent 13px 16px)}   /* barcode look */

/* medium screens: plan tiles go two by two so names never wrap unevenly */
@media (max-width:1100px){
  .lk-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* ---- narrower screens: the stub drops below the main part, the perforation turns horizontal ---- */
@media (max-width:860px){
  .lk-ticket{grid-template-columns:minmax(0,1fr)}
  .lk-stub{border-inline-start:0;border-block-start:2px dashed var(--border)}
  .lk-cut-a{top:calc(var(--lk-cut) / -2 - 1px);inset-inline-start:auto;left:calc(var(--lk-cut) / -2 - 1px)}
  .lk-cut-b{top:calc(var(--lk-cut) / -2 - 1px);bottom:auto;inset-inline-start:auto;left:auto;right:calc(var(--lk-cut) / -2 - 1px)}
  .lk-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .lk-actions .btn{flex:1 1 100%}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .lk[data-in] .lk-ticket,.lk-stamp.is-hit{animation:none}
  .lk-opt{transition:none}
}

/* =====================================================================
   Contact page · Banner (75vh) · "Front desk"
   No photos. Top row: copy on the left, a live desk card on the right (open status, week strip, hours bar).
   Below: three contact tiles. Stacks to one column below 992px.
   Entrance: lines and blocks rise (vertical movement only). index.js fills in the live parts.
   Colours: site tokens only. Smallest text is 14px, or 12px for mobile week labels.
   Top and bottom padding use one variable (--cb-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.cb{
  --cb-pad:clamp(40px,6vw,72px);          /* top and bottom padding: always equal */
  --cb-gap:clamp(20px,3vw,40px);          /* space between the top row and the tiles, and between columns */
  --cb-in:clamp(20px,2.4vw,28px);         /* padding inside the desk card and tiles */
  --cb-ease:cubic-bezier(.2,.7,.2,1);
  display:flex;align-items:center;min-height:75vh;padding-block:var(--cb-pad);overflow-x:clip;border-bottom:1px solid var(--border);
  /* soft glow from the top corner plus a faint dotted grid, both from site tokens */
  background:radial-gradient(circle at 0% 0%,var(--glow) 0,transparent 45%),radial-gradient(var(--border) 1px,transparent 1.5px) 0 0/28px 28px,var(--bg)
}
.cb-wrap{display:grid;gap:var(--cb-gap);min-width:0}
.cb-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--cb-gap);align-items:center}

/* ---- entrance: rise from below, staggered with --d ---- */
.cb-eyebrow,.cb-lead,.cb-actions,.cb-desk,.cb-tile{animation:cb-rise .8s var(--cb-ease) var(--d,0s) both}
@keyframes cb-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.cb-line{display:block;overflow:hidden;padding-block:.06em}          /* each heading line is a mask */
.cb-line>span{display:block;animation:cb-line .9s var(--cb-ease) var(--d,0s) both}
@keyframes cb-line{from{transform:translateY(110%)}to{transform:none}}

/* ---- copy ---- */
.cb-copy{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.cb-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.cb-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.cb h1{margin:0;font-size:clamp(2.25rem,5vw,4rem);line-height:1.12;color:var(--text)}
.cb h1 em{font-style:italic;color:var(--accent)}
.cb-lead{max-width:50ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}
.cb-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---- desk card ---- */
.cb-desk{display:grid;gap:20px;min-width:0;padding:var(--cb-in);border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 16px 40px var(--glow-2)}
.cb-desk-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px}
.cb-desk-title{margin:0;color:var(--text);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.cb-status{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 14px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font-size:.875rem;font-weight:600;line-height:1.3}
.cb-pulse{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--glow);animation:cb-ping 2s ease-out infinite}
@keyframes cb-ping{0%{box-shadow:0 0 0 0 var(--glow)}80%,100%{box-shadow:0 0 0 9px transparent}}
.cb-status[data-state="closed"]{border-color:var(--border);color:var(--muted)}
.cb-status[data-state="closed"] .cb-pulse{background:var(--muted);animation:none}

/* week strip: seven equal tiles */
.cb-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.cb-week li{display:grid;justify-items:center;gap:4px;min-width:0;padding:10px 2px;border:1px solid var(--border);border-radius:12px;background:var(--bg)}
.cb-d{color:var(--text);font-size:.875rem;font-weight:600;line-height:1.2}
.cb-h{color:var(--muted);font-size:.875rem;line-height:1.2;white-space:nowrap}
.cb-week .is-off{border-style:dashed}
.cb-week .is-today{border-color:var(--accent);background:var(--accent)}      /* today is filled solid */
.cb-week .is-today .cb-d,.cb-week .is-today .cb-h{color:var(--bg)}

/* hours bar: 9 am to 6 pm, the dot moves with the time (--now is 0 to 100) */
.cb-hours{display:grid;gap:10px}
.cb-track{position:relative;height:8px;border-radius:999px;background:var(--border)}
.cb-track::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:calc(var(--now) * 1%);border-radius:inherit;background:var(--accent);transition:width .8s var(--cb-ease)}
.cb-now{position:absolute;top:50%;inset-inline-start:calc(var(--now) * 1%);width:18px;height:18px;margin-top:-9px;margin-inline-start:-9px;border:3px solid var(--accent);border-radius:50%;background:var(--surface);box-shadow:0 0 0 4px var(--glow);transition:inset-inline-start .8s var(--cb-ease)}
.cb-hours[data-off] .cb-now,.cb-hours[data-off] .cb-track::before{display:none}   /* hidden while the office is closed */
.cb-ticks{display:flex;justify-content:space-between;gap:8px;margin:0;padding:0;list-style:none}
.cb-ticks li{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.2}

/* ---- contact tiles ---- */
.cb-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--cb-gap);margin:0;padding:0;list-style:none}
.cb-tile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-width:0;padding:var(--cb-in);border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:border-color .25s ease,transform .25s var(--cb-ease)}
.cb-tile:hover{border-color:var(--accent);transform:translateY(-3px)}
.cb-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--glow);color:var(--accent)}
.cb-ico svg{width:22px;height:22px}
.cb-tile-txt{display:grid;gap:2px;min-width:0}
.cb-tile-label{color:var(--accent);font-size:.875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.cb-tile-val{color:var(--text);font-size:1rem;font-weight:600;line-height:1.4;text-decoration:none;overflow-wrap:break-word}   /* the email has a break point after @, so it never splits mid-word */
a.cb-tile-val:hover{color:var(--accent)}
.cb-copy-btn{height:36px;padding:0 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--accent);font:600 .875rem/1 "Inter",system-ui,sans-serif;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.cb-copy-btn:hover{border-color:var(--accent)}
.cb-copy-btn.is-done{background:var(--accent);border-color:var(--accent);color:var(--bg)}

/* ---- narrower screens ---- */
@media (max-width:1100px){
  .cb-tiles{grid-template-columns:minmax(0,1fr)}      /* tiles stack so long values never get cramped */
}
@media (max-width:991px){
  .cb{min-height:0}
  .cb-top{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .cb-actions .btn{flex:1 1 100%}
  .cb-week{gap:4px}
  .cb-d,.cb-h{font-size:.75rem}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .cb-eyebrow,.cb-lead,.cb-actions,.cb-desk,.cb-tile,.cb-line>span,.cb-pulse{animation:none}
  .cb-track::before,.cb-now,.cb-tile,.cb-copy-btn{transition:none}
}

/* =====================================================================
   Contact page · Section 2 · "Send us a message"
   Left column: heading, leaf-shaped photo (caption BELOW it), "what happens next" list.
   Right column: two-step form card with a progress bar, then a thank-you panel.
   Stacks to one column below 992px. Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--cf-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.cf{
  --cf-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --cf-gap:clamp(24px,4vw,56px);          /* space between the two columns */
  --cf-in:clamp(22px,3vw,40px);           /* padding inside the form card */
  --cf-row:20px;                          /* space between rows in the form and the left column */
  --cf-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--cf-pad);background:var(--surface);border-bottom:1px solid var(--border);overflow-x:clip
}
.cf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--cf-gap);align-items:start}

/* ---- left column ---- */
.cf-side{display:grid;gap:var(--cf-row);min-width:0}
.cf-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.cf-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.cf h2{margin:0;font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.15;color:var(--text)}
.cf h2 em{display:block;font-style:italic;color:var(--accent)}   /* second line of the heading */

/* photo: leaf shape (two round corners, two soft ones). The caption is a separate line below the frame. */
.cf-fig{display:grid;gap:12px;margin:0}
.cf-frame{overflow:hidden;border:1px solid var(--border);border-radius:clamp(64px,9vw,120px) 24px clamp(64px,9vw,120px) 24px;background:var(--bg);box-shadow:0 14px 34px var(--glow-2)}
.cf-frame img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .8s var(--cf-ease)}
.cf-frame:hover img{transform:scale(1.04)}
.cf-fig figcaption{color:var(--muted);font-size:.875rem;line-height:1.5}

/* what happens next: numbered steps; the connecting line runs in the gap between two number circles */
.cf-next{display:grid;gap:0;margin:0;padding:0;list-style:none}
.cf-next li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;padding-bottom:var(--cf-row)}
.cf-next li:last-child{padding-bottom:0}
.cf-next li:not(:last-child)::before{content:"";position:absolute;top:48px;bottom:8px;inset-inline-start:19px;width:2px;background:var(--border)}
.cf-num{display:grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--accent);border-radius:50%;background:var(--bg);color:var(--accent);font:700 1rem/1 "Playfair Display",Georgia,serif}
.cf-next-txt{display:grid;gap:2px;align-content:center;min-width:0}
.cf-next-txt strong{color:var(--text);font-size:1rem;line-height:1.3}
.cf-next-txt span{color:var(--muted);font-size:.875rem;line-height:1.5}

/* ---- form card ---- */
.cf-card{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:var(--cf-row);min-width:0;padding:var(--cf-in);border:1px solid var(--border);border-radius:24px;background:var(--bg);box-shadow:0 16px 40px var(--glow-2)}

/* progress: two tab labels and a bar under them */
.cf-prog{display:grid;gap:12px}
.cf-prog[hidden]{display:none}   /* hidden after a send (display:grid would otherwise win) */
.cf-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.cf-tabs li{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:1rem;font-weight:600;line-height:1.2}
.cf-tab-n{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border:1.5px solid var(--border);border-radius:50%;font-size:.875rem;line-height:1}
.cf-tabs .is-on{color:var(--text)}
.cf-tabs .is-on .cf-tab-n{border-color:var(--accent);background:var(--accent);color:var(--bg)}
.cf-bar{height:6px;border-radius:999px;background:var(--border);overflow:hidden}
.cf-bar span{display:block;height:100%;width:calc(var(--p) * 1%);border-radius:inherit;background:var(--accent);transition:width .6s var(--cf-ease)}

/* steps: without JS both show; with JS only the active one */
.cf-form{margin:0}
.cf-step{display:grid;gap:var(--cf-row);min-width:0;margin:0;padding:0;border:0}
.cf-step+.cf-step{margin-top:var(--cf-row)}
.cf[data-js] .cf-step{display:none}
.cf[data-js] .cf-step.is-on{display:grid;animation:cf-in .5s var(--cf-ease) both}
@keyframes cf-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.cf-legend{padding:0;margin:0 0 4px;color:var(--text);font:700 1.25rem/1.25 "Playfair Display",Georgia,serif}
.cf[data-js] .cf-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}   /* the tab row already names the step */

/* fields */
.cf-field{display:grid;gap:8px;min-width:0}
.cf-field label:not(.cf-chip):not(.cf-check),.cf-label{color:var(--text);font-size:.875rem;font-weight:600;line-height:1.3}
.cf-field input[type="text"],.cf-field input[type="email"],.cf-field input[type="tel"],.cf-field textarea{width:100%;min-width:0;padding:13px 16px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font:400 1rem/1.5 "Inter",system-ui,sans-serif;transition:border-color .2s ease,box-shadow .2s ease}
.cf-field textarea{resize:vertical;min-height:112px}
.cf-field input::placeholder,.cf-field textarea::placeholder{color:var(--muted);opacity:1}
.cf-field input:focus,.cf-field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.cf-field.is-bad input,.cf-field.is-bad textarea{border-color:var(--secondary);border-width:2px}
.cf-err{min-height:0;margin:0;color:var(--secondary);font-size:.875rem;font-weight:600;line-height:1.4}
.cf-err:empty{display:none}

/* topic chips: native radio buttons, hidden but still focusable; the span is the visible chip */
.cf-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cf-chip{position:relative;display:block;min-width:0}
.cf-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.cf-chip span{display:flex;align-items:center;min-height:46px;padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-size:1rem;font-weight:500;line-height:1.3;transition:border-color .2s ease,background .2s ease}
.cf-chip:hover span{border-color:var(--accent)}
.cf-chip input:checked+span{border-color:var(--accent);background:var(--glow);color:var(--accent);font-weight:600}
.cf-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}

/* consent checkbox */
.cf-check{display:flex;align-items:flex-start;gap:12px;color:var(--muted);font-size:1rem;line-height:1.5;cursor:pointer}
.cf-check input{flex:0 0 20px;width:20px;height:20px;margin:2px 0 0;accent-color:var(--accent)}

/* buttons row */
.cf-nav{display:flex;flex-wrap:wrap;gap:12px}
.cf-nav-2{justify-content:space-between}
.cf-nav .btn{flex:1 1 auto}

/* thank-you panel */
.cf-done{display:grid;justify-items:center;gap:14px;padding:clamp(16px,3vw,32px) 0;text-align:center}
.cf-done[hidden]{display:none}
.cf-done:not([hidden]){animation:cf-in .6s var(--cf-ease) both}
.cf-done-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:var(--bg)}
.cf-done-ico svg{width:30px;height:30px}
.cf-done h3{margin:0;color:var(--text);font-size:clamp(1.5rem,2.4vw,1.875rem)}
.cf-done p{max-width:40ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.6;overflow-wrap:anywhere}

/* ---- narrower screens ---- */
@media (max-width:991px){
  .cf-grid{grid-template-columns:minmax(0,1fr)}
  .cf-card{position:static}      /* no sticky card on small screens */
}
@media (max-width:480px){
  .cf-chips{grid-template-columns:minmax(0,1fr)}
  .cf-tabs li{font-size:.875rem}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .cf[data-js] .cf-step.is-on,.cf-done:not([hidden]){animation:none}
  .cf-frame img,.cf-bar span,.cf-chip span,.cf-field input,.cf-field textarea{transition:none}
}

/* =====================================================================
   Contact page · Section 3 · "Find us" map
   One wide card: location bar above, the map in the middle, hours strip below. Nothing sits on top of the map.
   Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--cm-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.cm{
  --cm-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --cm-in:clamp(18px,2.4vw,28px);         /* padding inside the bars of the card */
  --cm-gap:clamp(16px,2vw,24px);          /* space between blocks */
  --cm-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--cm-pad);background:var(--bg);overflow-x:clip
}

/* ---- heading row ---- */
.cm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:clamp(28px,4vw,48px)}
.cm-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.cm-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.cm h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.cm h2 em{font-style:italic;color:var(--accent)}
.cm-lead{flex:0 1 40ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* ---- card ---- */
.cm-card{overflow:hidden;border:1px solid var(--border);border-radius:28px;background:var(--surface);box-shadow:0 18px 44px var(--glow-2)}

/* location bar: pin, address, buttons */
.cm-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--cm-gap);padding:var(--cm-in);border-bottom:1px solid var(--border)}
.cm-pin{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--glow);color:var(--accent)}
.cm-pin svg{width:24px;height:24px}
.cm-addr{display:grid;gap:2px;min-width:0;font-style:normal}
.cm-addr strong{color:var(--text);font:700 1.25rem/1.25 "Playfair Display",Georgia,serif}
.cm-addr span{color:var(--muted);font-size:1rem;line-height:1.5}
.cm-btns{display:flex;flex-wrap:wrap;gap:10px}
.cm-btns .btn{gap:8px}
.cm-copy{height:42px;padding:0 18px;border:1.5px solid var(--border);border-radius:10px;background:var(--bg);color:var(--accent);font:600 1rem/1 "Inter",system-ui,sans-serif;cursor:pointer;transition:border-color .2s ease,background .2s ease}
.cm-copy:hover{border-color:var(--accent)}
.cm-copy.is-done{border-color:var(--accent);background:var(--accent);color:var(--bg)}

/* map frame: fixed height range, the iframe fills it */
.cm-map{position:relative;height:clamp(300px,42vw,460px);background:var(--bg)}
.cm-map iframe{display:block;width:100%;height:100%;border:0}

/* hours strip: two equal items */
.cm-foot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--cm-gap);margin:0;padding:var(--cm-in);list-style:none;border-top:1px solid var(--border)}
.cm-foot li{display:flex;align-items:center;gap:14px;min-width:0;color:var(--muted);font-size:1rem;line-height:1.4}
.cm-foot li>span:last-child{display:grid;gap:2px;min-width:0}
.cm-foot strong{color:var(--text);font-size:1rem;font-weight:600}
.cm-foot a{color:var(--accent);font-weight:600;text-decoration:none}
.cm-foot a:hover{text-decoration:underline}
.cm-ico{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--glow);color:var(--accent)}
.cm-ico svg{width:20px;height:20px}

/* rises in once (JS adds data-in); hidden only when JS runs */
.cm[data-js]:not([data-in]) .cm-card{opacity:0}
.cm[data-in] .cm-card{animation:cm-rise .8s var(--cm-ease) both}
@keyframes cm-rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}

/* ---- narrower screens ---- */
@media (max-width:991px){
  .cm-head{flex-direction:column;align-items:flex-start}
  .cm-lead{flex-basis:auto}
  .cm-bar{grid-template-columns:auto minmax(0,1fr)}
  .cm-btns{grid-column:1 / -1}
}
@media (max-width:600px){
  .cm-foot{grid-template-columns:minmax(0,1fr)}
  .cm-btns .btn,.cm-copy{flex:1 1 100%}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .cm[data-in] .cm-card{animation:none}
  .cm-copy{transition:none}
}

/* =====================================================================
   Contact page · Section 5 · "Book a consultation"
   A full accent-coloured band with copy on the left and a booking pad (surface card) on the right.
   Text on the band uses --bg (always high contrast against --accent in light and dark mode).
   Animation: heading lines slide up, blocks rise, date tiles pop in one by one, the chosen tile pops, the button arrow nudges.
   All movement is vertical or a small scale. Stacks to one column below 992px.
   Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--bc-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.bc{
  --bc-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --bc-gap:clamp(24px,4vw,64px);          /* space between the two columns */
  --bc-in:clamp(20px,2.6vw,32px);         /* padding inside the booking pad */
  --bc-row:20px;                          /* space between rows in the pad */
  --bc-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--bc-pad);background:var(--accent);overflow-x:clip
}
.bc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--bc-gap);align-items:center}

/* ---- entrance animation: runs once when JS adds data-in (hidden only when JS runs) ---- */
.bc[data-js]:not([data-in]) .bc-rise,.bc[data-js]:not([data-in]) .bc-line>span{opacity:0}
.bc[data-in] .bc-rise{animation:bc-rise .8s var(--bc-ease) var(--d,0s) both}
@keyframes bc-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.bc-line{display:block;overflow:hidden;padding-block:.06em}            /* each heading line is a mask */
.bc[data-in] .bc-line>span{display:block;animation:bc-line .9s var(--bc-ease) var(--d,0s) both}
@keyframes bc-line{from{transform:translateY(110%)}to{transform:none}}

/* ---- left: copy ---- */
.bc-copy{display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0}
.bc-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0;padding:8px 16px;border:1.5px solid var(--bg);border-radius:999px;color:var(--bg);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.bc-dot{width:9px;height:9px;border-radius:50%;background:var(--bg)}
.bc h2{margin:0;color:var(--bg);font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.12}
.bc-line{display:block}
.bc-lead{max-width:48ch;margin:0;color:var(--bg);font-size:1.0625rem;line-height:1.65}
.bc-call{margin:0;color:var(--bg);font-size:1rem;line-height:1.5}
.bc-call a{color:var(--bg);font-weight:600;text-decoration:underline;text-underline-offset:4px}
.bc-call a:hover{text-decoration-thickness:2px}
.bc :focus-visible{outline-color:var(--bg)}

/* ---- right: booking pad ---- */
.bc-pad{display:grid;gap:var(--bc-row);min-width:0;padding:var(--bc-in);border-radius:24px;background:var(--surface);box-shadow:0 20px 48px var(--glow)}
.bc-pad-title{display:grid;gap:4px;margin:0;color:var(--text);font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.25}
.bc-pad-title span{color:var(--muted);font:400 .875rem/1.4 "Inter",system-ui,sans-serif}
.bc-group{display:grid;gap:10px;min-width:0}
.bc-label{margin:0;color:var(--text);font-size:.875rem;font-weight:600;line-height:1.3}

/* consultation types: two by two */
.bc-types{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bc-type{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:10px 14px;border:1.5px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:500 1rem/1.3 "Inter",system-ui,sans-serif;text-align:start;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .25s var(--bc-ease)}
.bc-type:hover{border-color:var(--accent);transform:translateY(-2px)}
.bc-tick{flex:0 0 18px;width:18px;height:18px;border:1.5px solid var(--border);border-radius:50%;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.bc-type[aria-pressed="true"]{border-color:var(--accent);background:var(--glow);font-weight:600}
.bc-type[aria-pressed="true"] .bc-tick{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px var(--surface)}   /* filled dot = chosen */

/* date tiles: six in a row on wide screens, three by two below */
.bc-dates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (min-width:1100px){.bc-dates{grid-template-columns:repeat(6,minmax(0,1fr))}}
.bc-date{display:grid;justify-items:center;gap:2px;min-width:0;padding:10px 4px;border:1.5px solid var(--border);border-radius:14px;background:var(--bg);color:var(--text);font:inherit;cursor:pointer;transition:border-color .2s ease,background .2s ease,transform .25s var(--bc-ease)}
.bc-date:hover{border-color:var(--accent);transform:translateY(-2px)}
.bc-date-d,.bc-date-m{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.2}
.bc-date-n{color:var(--text);font:700 1.5rem/1.1 "Playfair Display",Georgia,serif}
.bc-date[aria-pressed="true"]{border-color:var(--accent);background:var(--accent);animation:bc-pop .4s var(--bc-ease)}
.bc-date[aria-pressed="true"] .bc-date-d,.bc-date[aria-pressed="true"] .bc-date-m,.bc-date[aria-pressed="true"] .bc-date-n{color:var(--bg)}
@keyframes bc-pop{0%{transform:scale(1)}50%{transform:scale(1.08)}100%{transform:scale(1)}}
/* tiles pop in one after another once the section is seen (--i is set by JS) */
.bc[data-in] .bc-date.is-new{animation:bc-tile .6s var(--bc-ease) calc(.6s + var(--i,0) * .08s) both}
@keyframes bc-tile{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}

/* summary + button */
.bc-sum{margin:0;padding:12px 14px;border:1.5px dashed var(--border);border-radius:12px;color:var(--muted);font-size:1rem;line-height:1.4;text-align:center;overflow-wrap:anywhere}
.bc-sum.is-set{border-style:solid;border-color:var(--accent);color:var(--text);font-weight:600}
.bc-cta{width:100%;gap:10px}
.bc-arrow{display:inline-block;animation:bc-nudge 1.8s ease-in-out infinite}   /* the arrow nudges to invite a click */
@keyframes bc-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
[dir="rtl"] .bc-arrow{animation:none}

/* ---- narrower screens ---- */
@media (max-width:991px){
  .bc-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .bc-types{grid-template-columns:minmax(0,1fr)}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .bc[data-in] .bc-rise,.bc[data-in] .bc-line>span,.bc[data-in] .bc-date.is-new,.bc-date[aria-pressed="true"],.bc-arrow{animation:none}
  .bc[data-js]:not([data-in]) .bc-rise,.bc[data-js]:not([data-in]) .bc-line>span{opacity:1}
  .bc-type,.bc-date,.bc-tick{transition:none}
}

/* =====================================================================
   Contact page · Section 6 · FAQ as a conversation
   Left: heading + numbered question list. Right: a chat card. A chosen question appears as a message, the reply shows
   three bouncing dots for a moment, then the answer pops in. Only vertical movement and a small scale.
   Without JS the chat card is hidden and every answer shows under its question. Stacks to one column below 992px.
   Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--fq-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.fq{
  --fq-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --fq-gap:clamp(24px,4vw,56px);          /* space between the two columns */
  --fq-in:clamp(18px,2.4vw,28px);         /* padding inside the chat card */
  --fq-row:12px;                          /* space between questions and between chat messages */
  --fq-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--fq-pad);background:var(--bg);overflow-x:clip
}
.fq-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:var(--fq-gap);align-items:start}

/* ---- left column ---- */
.fq-side{display:grid;gap:clamp(24px,3vw,36px);min-width:0}
.fq-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase}
.fq-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.fq h2{margin:0;font-size:clamp(1.75rem,3.2vw,2.75rem);line-height:1.15;color:var(--text)}
.fq h2 em{display:block;font-style:italic;color:var(--accent)}

/* question list */
.fq-list{display:grid;gap:var(--fq-row);margin:0;padding:0;list-style:none}
.fq-item{min-width:0}
.fq-q{display:flex;align-items:center;gap:16px;width:100%;min-height:56px;padding:12px 18px;border:1.5px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);font:600 1rem/1.35 "Inter",system-ui,sans-serif;text-align:start;cursor:pointer;transition:border-color .25s ease,background .25s ease,transform .3s var(--fq-ease)}
.fq-q:hover{border-color:var(--accent);transform:translateY(-2px)}
.fq-n{flex:0 0 auto;color:var(--accent);font:700 1.125rem/1 "Playfair Display",Georgia,serif}
.fq-qt{min-width:0}
.fq-q[aria-selected="true"]{border-color:var(--accent);background:var(--accent);color:var(--bg)}   /* chosen question is filled solid */
.fq-q[aria-selected="true"] .fq-n{color:var(--bg)}
.fq-a{padding:12px 4px 0}
.fq-a p{margin:0;color:var(--muted);font-size:1rem;line-height:1.65}
.fq-a a{color:var(--accent);font-weight:600}

/* with JS: answers live in the chat card, and the list animates in once */
.fq[data-js] .fq-a{display:none}
.fq[data-js]:not([data-in]) .fq-item{opacity:0}
.fq[data-in] .fq-item{animation:fq-rise .7s var(--fq-ease) calc(var(--i) * .08s) both}
@keyframes fq-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* ---- chat card ---- */
.fq:not([data-js]) .fq-card{display:none}              /* no JS: the card is hidden, answers show in the list */
.fq-card{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:0;min-width:0;overflow:hidden;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 16px 40px var(--glow-2)}
.fq-bar{display:flex;align-items:center;gap:14px;padding:var(--fq-in);border-bottom:1px solid var(--border)}
.fq-bar-txt{display:grid;gap:2px;min-width:0}
.fq-bar-txt strong{color:var(--text);font-size:1rem;line-height:1.3}
.fq-bar-txt span{color:var(--muted);font-size:.875rem;line-height:1.4}
.fq-av{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--bg);font:700 .875rem/1 "Inter",system-ui,sans-serif;letter-spacing:.02em}

/* chat area: fixed minimum height so the card does not jump between short and long answers */
.fq-chat{display:grid;align-content:start;gap:var(--fq-row);min-height:clamp(300px,34vw,360px);padding:var(--fq-in);background:var(--bg)}
.fq-msg{display:flex;align-items:flex-start;gap:12px;min-width:0}
.fq-msg-q{justify-content:flex-end}
.fq-msg-q p{max-width:85%;margin:0;padding:12px 18px;border-radius:18px 18px 4px 18px;background:var(--accent);color:var(--bg);font-size:1rem;font-weight:600;line-height:1.45}
.fq-bubble{min-width:0;max-width:calc(100% - 52px);padding:14px 18px;border:1px solid var(--border);border-radius:18px 18px 18px 4px;background:var(--surface);color:var(--text)}
.fq-ans p{margin:0;color:var(--text);font-size:1rem;line-height:1.65;overflow-wrap:anywhere}
.fq-ans a{color:var(--accent);font-weight:600}
.fq-dots{display:none;align-items:center;gap:6px;height:26px}
.fq-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:fq-bounce 1s ease-in-out infinite}
.fq-dots i:nth-child(2){animation-delay:.15s}
.fq-dots i:nth-child(3){animation-delay:.3s}
@keyframes fq-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
/* states set by JS: typing = dots only; otherwise the answer */
.fq-chat.is-typing .fq-dots{display:flex}
.fq-chat.is-typing .fq-ans{display:none}
/* every new question: message pops in, reply follows */
.fq-chat.is-new .fq-msg-q{animation:fq-pop .45s var(--fq-ease) both}
.fq-chat.is-new .fq-msg-a{animation:fq-pop .45s var(--fq-ease) .25s both}
@keyframes fq-pop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.fq-chat.is-shown .fq-ans{animation:fq-pop .4s var(--fq-ease) both}

/* card footer */
.fq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;padding:var(--fq-in);border-top:1px solid var(--border)}
.fq-foot .btn{gap:8px}
.fq-foot p{margin:0;color:var(--text);font-size:1rem;font-weight:600}

/* ---- narrower screens ---- */
@media (max-width:991px){
  .fq-grid{grid-template-columns:minmax(0,1fr)}
  .fq-card{position:static}      /* no sticky card on small screens */
}
@media (max-width:480px){
  .fq-msg-q p{max-width:100%}
  .fq-ans p{font-size:.875rem}
  .fq-foot .btn{flex:1 1 100%}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .fq[data-in] .fq-item,.fq-chat.is-new .fq-msg-q,.fq-chat.is-new .fq-msg-a,.fq-chat.is-shown .fq-ans,.fq-dots i{animation:none}
  .fq[data-js]:not([data-in]) .fq-item{opacity:1}
  .fq-q{transition:none}
}

/* =====================================================================
   Contact page · Section 7 · Final call to action
   A centred stage: eyebrow between two rules, big headline with a self-drawing underline, and a pill-shaped
   "action rail" (call, book, write) with a highlight that glides to the hovered or focused choice.
   The glide is the BACKGROUND of the choices (z-index below the text), so text never sits on a moving shape.
   Entrance: lines slide up, blocks rise, the underline draws. The stage glow drifts slowly.
   Rail turns into a vertical stack below 992px. Colours: site tokens only. Smallest text is 14px.
   Top and bottom padding use one variable (--cr-pad), so they are always equal.
   Everything is sized to fit the container, so there is no sideways scroll.
   ===================================================================== */
.cr{
  --cr-pad:clamp(56px,7vw,96px);          /* top and bottom padding: always equal */
  --cr-in:clamp(28px,5vw,72px);           /* padding inside the stage */
  --cr-gap:clamp(20px,2.6vw,28px);        /* space between the stacked blocks */
  --cr-ease:cubic-bezier(.2,.7,.2,1);
  padding-block:var(--cr-pad);background:var(--surface);border-top:1px solid var(--border);overflow-x:clip
}
.cr-stage{display:flex;flex-direction:column;align-items:center;gap:var(--cr-gap);min-width:0;padding:var(--cr-in);border:1px solid var(--border);border-radius:clamp(28px,4vw,48px);text-align:center;
  /* soft glow that drifts slowly across the stage */
  background:radial-gradient(60% 80% at 20% 0%,var(--glow) 0,transparent 70%) 0 0/160% 160% no-repeat,var(--bg);animation:cr-drift 14s ease-in-out infinite alternate}
@keyframes cr-drift{from{background-position:0% 0%}to{background-position:100% 100%}}

/* ---- entrance (hidden only when JS runs, so it can never stay invisible) ---- */
.cr[data-js]:not([data-in]) .cr-rise,.cr[data-js]:not([data-in]) .cr-line>span{opacity:0}
.cr[data-in] .cr-rise{animation:cr-rise .8s var(--cr-ease) var(--d,0s) both}
@keyframes cr-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.cr-line{display:block;overflow:hidden;padding-block:.06em}            /* each headline line is a mask */
.cr[data-in] .cr-line>span{display:block;animation:cr-line .9s var(--cr-ease) var(--d,0s) both}
@keyframes cr-line{from{transform:translateY(110%)}to{transform:none}}

/* ---- eyebrow between two rules ---- */
.cr-eyebrow{display:flex;align-items:center;gap:16px;width:min(100%,420px);margin:0}
.cr-rule{flex:1;height:1px;background:var(--border)}
.cr-eyebrow-txt{color:var(--accent);font:600 .875rem/1.2 "Inter",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}

/* ---- headline + self-drawing underline ---- */
.cr h2{max-width:16em;margin:0;color:var(--text);font-size:clamp(2.25rem,5.4vw,4.5rem);line-height:1.1}
.cr h2 em{position:relative;display:block;width:fit-content;max-width:100%;margin-inline:auto;padding-bottom:.28em;font-style:italic;color:var(--accent)}
.cr-under{position:absolute;inset-inline:0;bottom:0;width:100%;height:.22em;overflow:visible}
.cr-under path{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.cr[data-in] .cr-under path{animation:cr-draw 1.2s var(--cr-ease) 1s both}
@keyframes cr-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.cr-lead{max-width:52ch;margin:0;color:var(--muted);font-size:1.0625rem;line-height:1.65}

/* ---- action rail: one pill, three choices ---- */
.cr-rail{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:min(100%,860px);padding:6px;border:1.5px solid var(--border);border-radius:999px;background:var(--surface);box-shadow:0 14px 34px var(--glow-2)}
.cr-glide{position:absolute;z-index:-1;left:0;top:0;width:0;height:0;border-radius:999px;background:var(--accent);opacity:0;transition:transform .5s var(--cr-ease),width .5s var(--cr-ease),height .5s var(--cr-ease),opacity .3s ease}   /* sits behind the text */
.cr[data-js] .cr-glide{opacity:1}
.cr-seg{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;padding:14px 20px;border-radius:999px;color:var(--text);text-align:start;text-decoration:none;transition:color .3s ease}
.cr:not([data-js]) .cr-seg.is-main{background:var(--accent);color:var(--bg)}   /* no JS: the main choice is filled directly */
.cr-ico{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:50%;background:var(--glow);color:var(--accent);transition:background .3s ease,color .3s ease}
.cr-ico svg{width:22px;height:22px}
.cr-seg-txt{display:grid;gap:2px;min-width:0}
.cr-seg-l{color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.2;transition:color .3s ease}
.cr-seg-txt strong{color:inherit;font-size:1rem;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
/* the choice under the glide: light text on the accent fill */
.cr-seg.is-on{color:var(--bg)}
.cr-seg.is-on .cr-seg-l{color:var(--bg)}
.cr-seg.is-on .cr-ico{background:var(--bg);color:var(--accent)}
.cr-seg:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---- promise row ---- */
.cr-promise{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:0;padding:0;list-style:none}
.cr-promise li{position:relative;padding-inline-start:24px;color:var(--muted);font-size:.875rem;font-weight:600;line-height:1.4}
.cr-promise li::before{content:"";position:absolute;inset-inline-start:3px;top:.28em;width:6px;height:11px;border-inline-end:2.5px solid var(--accent);border-block-end:2.5px solid var(--accent);transform:rotate(45deg)}   /* tick mark */

/* ---- narrower screens: the rail stacks vertically and the glide moves up and down ---- */
@media (max-width:991px){
  .cr-rail{grid-template-columns:minmax(0,1fr);width:min(100%,460px);border-radius:32px}
  .cr-seg{justify-content:flex-start;border-radius:26px}
  .cr-glide{border-radius:26px}
}
@media (max-width:480px){
  .cr-eyebrow{gap:12px}
}
/* no motion for people who ask for less of it */
@media (prefers-reduced-motion:reduce){
  .cr-stage,.cr[data-in] .cr-rise,.cr[data-in] .cr-line>span,.cr[data-in] .cr-under path{animation:none}
  .cr[data-js]:not([data-in]) .cr-rise,.cr[data-js]:not([data-in]) .cr-line>span{opacity:1}
  .cr-glide,.cr-seg,.cr-ico,.cr-seg-l{transition:none}
}


/* ==========================================================================
   ADMIN DASHBOARD (admin-dashboard.html)
   Sidebar + top bar shell with four views: Overview, Documents, Filing
   status, Past returns. Site colour variables only. Drawer below 992px.
   ========================================================================== */

/* page shell: cancel the site's column-flex body, then sidebar | content */
body.db-body{display:block;grid-template-columns:none;gap:0;padding:0}   /* cancels the home-page mock-up .db-body padding */
.db-shell{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:100vh}

/* ---- sidebar: brand, profile card, navigation, help card ---- */
.db-side{position:sticky;top:0;align-self:start;height:100vh;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:0 20px 20px;background:var(--surface);border-inline-end:1px solid var(--border)}
.db-brand{flex:none;display:flex;align-items:center;gap:12px;height:84px;margin:0 -20px;padding:0 20px;border-bottom:1px solid var(--border);color:var(--text);text-decoration:none}
.db-brand svg{width:40px;height:40px;flex-shrink:0}
.db-brand span{font:700 1.5rem/1 "Playfair Display",Georgia,serif}
.db-me{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;text-align:center;border:1px solid var(--border);border-radius:20px;background:var(--glow-2)}
.db-me img{width:72px;height:72px;border-radius:50%;object-fit:cover;border:2px solid var(--accent)}
.db-me strong{font-size:1.125rem;color:var(--text)}
.db-me span{font-size:.875rem;color:var(--muted);overflow-wrap:anywhere}
.db-nav{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin}
.db-nav a{flex:none;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;border-radius:12px;color:var(--text);font-weight:600;text-decoration:none;transition:background .25s,color .25s}
.db-nav svg{width:20px;height:20px;flex-shrink:0}
.db-nav a:hover{background:var(--glow-2);color:var(--accent)}
.db-nav a[aria-current="page"]{background:var(--accent);color:var(--bg);box-shadow:0 8px 20px var(--glow)}
.db-help{flex:none;margin-top:auto;padding:16px;border:1px solid var(--border);border-radius:20px;background:var(--glow-2)}
.db-help strong{display:block;margin-bottom:6px;color:var(--text)}
.db-help p{margin:0 0 12px;font-size:.875rem}
.db-help a{display:flex;justify-content:space-between;gap:12px;font-weight:600;text-decoration:none;color:var(--accent)}
[dir="rtl"] .db-help a span{transform:scaleX(-1)}
@media (max-height:900px) and (min-width:992px){.db-help{display:none}.db-me{padding:12px}.db-me img,.us-ini{width:56px;height:56px;font-size:1.25rem}}

/* ---- top bar: hamburger (small screens), RTL, theme, logout ---- */
.db-top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:84px;padding:0 32px;background:var(--surface);border-bottom:1px solid var(--border)}
.db-burger{display:none;margin-inline-end:auto}
.db-scrim{position:fixed;inset:0;z-index:290;background:var(--text);opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.db-scrim.show{opacity:.45;visibility:visible}

/* ---- content area and shared card ---- */
.db-main{display:flex;flex-direction:column;gap:24px;padding:24px 32px}
.db-card{padding:20px 24px;border:1px solid var(--border);border-radius:20px;background:var(--surface);box-shadow:0 12px 28px var(--glow-2)}
.db-card h2{margin:0 0 16px;font-size:1.375rem}
.db-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;background:linear-gradient(120deg,var(--glow-2),var(--surface))}
.db-head h1{margin:0 0 6px;font-size:clamp(1.75rem,3vw,2.5rem)}
.db-head p{margin:0;max-width:560px}
.db-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.db-stat span{display:block;margin-bottom:6px;color:var(--muted);font-size:.9375rem}
.db-stat strong{font-size:1.75rem;line-height:1.2;color:var(--text)}
.db-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}

/* ---- view switching: only the chosen panel is shown, with a soft entrance ---- */
.db-panel{display:flex;flex-direction:column;gap:20px;scroll-margin-top:104px}
.db-panel[hidden]{display:none}
.db-panel:not([hidden]){animation:db-in .5s ease both}
@keyframes db-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---- overview: review queue list and bar chart ---- */
.db-queue{display:flex;flex-direction:column;gap:10px}
.db-queue div{padding:12px 16px;border:1px solid var(--border);border-radius:14px;background:var(--glow-2)}
.db-queue strong,.db-row strong{display:block;color:var(--text)}
.db-sub{display:block;color:var(--muted);font-size:.875rem}
.db-split>.db-card:has(.db-bars){display:flex;flex-direction:column}
.db-bars{flex:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;align-items:end;min-height:260px}
.db-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:6px;height:100%;font-size:.875rem;color:var(--muted)}
.db-bar b{color:var(--text)}
.db-bar i{display:block;width:100%;height:var(--h);border-radius:10px 10px 0 0;background:var(--accent);box-shadow:0 8px 20px var(--glow);transform:scaleY(0);transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.db-panel:not([hidden]) .db-bar i{transform:scaleY(1)}

/* ---- list rows used by documents, filing status and past returns ---- */
.db-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}
.db-tools .db-field:first-of-type{margin-inline-start:auto}
.db-chip{height:40px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font:600 .875rem/1 "Inter",system-ui,sans-serif;cursor:pointer;transition:background .25s,color .25s}
.db-chip:hover{border-color:var(--accent);color:var(--accent)}
.db-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.db-field{height:40px;max-width:100%;padding:0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font:inherit;font-size:.9375rem}
.db-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(150px,1fr) auto;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--border)}
.db-row:first-child{border-top:0;padding-top:0}
.db-row:last-child{padding-bottom:0}
.db-meta{color:var(--muted);font-size:.9375rem}
.db-acts{display:flex;flex-wrap:wrap;gap:8px}
.db-empty{margin:0;color:var(--muted)}
.db-body .btn-sm{height:38px;padding:0 14px;font-size:.875rem}
.db-body .btn:disabled{opacity:.5;cursor:not-allowed}
.db-up{position:relative;overflow:hidden}
.db-up input{position:absolute;inset:0;opacity:0;cursor:pointer}
.db-badge{display:inline-flex;align-items:center;justify-self:start;padding:4px 12px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.8125rem;font-weight:600}
.db-badge.is-approved{background:var(--accent);border-color:var(--accent);color:var(--bg)}
.db-badge.is-fix{background:var(--glow-2);border-color:var(--secondary);color:var(--secondary)}

/* four-segment progress used by the filing status rows */
.db-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:8px}
.db-seg i{height:8px;border-radius:99px;background:var(--border);transition:background .4s}
.db-seg i.on{background:var(--accent)}
.db-step{font-size:.875rem;color:var(--muted)}

/* small confirmation message */
.db-toast{position:fixed;inset-inline-start:24px;bottom:24px;z-index:400;max-width:calc(100% - 96px);padding:12px 18px;border-radius:12px;background:var(--accent);color:var(--bg);font-weight:600;font-size:.9375rem;opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s;pointer-events:none}
.db-toast.show{opacity:1;transform:none}

/* ---- tablet and mobile: sidebar becomes a slide-in drawer ---- */
@media (max-width:991px){
  .db-shell{grid-template-columns:minmax(0,1fr)}
  .db-side{position:fixed;inset-block:0;inset-inline-start:0;z-index:300;width:min(320px,86vw);transform:translateX(-102%);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
  [dir="rtl"] .db-side{transform:translateX(102%)}
  .db-side.open,[dir="rtl"] .db-side.open{transform:none}
  .db-burger{display:inline-flex}
  .db-top{padding:0 20px}
  .db-main{padding:20px}
  .db-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .db-split{grid-template-columns:minmax(0,1fr)}
  .db-lock{overflow:hidden}
}
@media (max-width:767px){
  .db-row{grid-template-columns:minmax(0,1fr);gap:10px}
  .db-tools .db-field:first-of-type{margin-inline-start:0}
}
@media (max-width:480px){
  .db-grid4{grid-template-columns:minmax(0,1fr)}
  .db-main{padding:16px}
  .db-card{padding:16px}
  .db-top{gap:8px;padding:0 16px}
  .db-bars{gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .db-panel:not([hidden]){animation:none}
  .db-bar i,.db-seg i,.db-side,.db-toast{transition:none}
}


/* ==========================================================================
   CLIENT DASHBOARD (user-dashboard.html): reuses the admin shell above.
   Adds the welcome row, progress bars, upload box and stage steps.
   ========================================================================== */
.db-top .btn{gap:8px}                                   /* space between logout icon and text */
.us-ini{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:var(--bg);font-size:1.5rem;font-weight:700}
.us-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;align-items:stretch}
.us-hero .db-head{display:block}
.us-photo{position:relative;min-height:200px;overflow:hidden;border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 28px var(--glow-2)}
.us-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
[data-theme="dark"] .us-photo img{filter:brightness(.88)}
.us-prog{display:flex;justify-content:space-between;gap:12px;margin:16px 0 8px;font-weight:600;color:var(--text)}
.us-bar{height:10px;overflow:hidden;border-radius:99px;background:var(--border)}
.us-bar i{display:block;width:var(--w);height:100%;border-radius:99px;background:var(--accent);animation:us-fill 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes us-fill{from{width:0}}
.db-help .us-bar{margin:4px 0 14px}
.db-help .btn{width:100%}
.us-info strong{font-size:1.25rem}
/* upload box */
.us-drop{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:16px;padding:24px 20px;border:2px dashed var(--border);border-radius:16px;background:var(--glow-2);text-align:center;transition:border-color .25s,background .25s}
.us-drop.is-over{border-color:var(--accent);background:var(--glow)}
.us-drop p{margin:0}
.us-drop .db-tools{justify-content:center;margin:0}
/* four filing stages */
.us-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.us-steps li{display:flex;flex-direction:column;gap:6px;padding:16px 20px;border:1px solid var(--border);border-radius:16px;background:var(--glow-2)}
.us-steps li.now{border-color:var(--accent);box-shadow:0 8px 20px var(--glow)}
.us-steps strong{color:var(--text)}
.us-n{display:grid;place-items:center;width:36px;height:36px;border:2px solid var(--border);border-radius:50%;color:var(--muted);font-weight:700}
.us-steps .done .us-n,.us-steps .now .us-n{background:var(--accent);border-color:var(--accent);color:var(--bg)}
@media (max-width:991px){.us-hero{grid-template-columns:minmax(0,1fr)}.us-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.us-steps{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.us-bar i{animation:none}}


/* ==========================================================================
   Extra dashboard content: three-column stats, profile details list
   ========================================================================== */
.db-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.us-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0}
.us-dl div{padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--glow-2)}
.us-dl dt{color:var(--muted);font-size:.875rem}
.us-dl dd{margin:4px 0 0;color:var(--text);font-weight:600;overflow-wrap:anywhere}
@media (max-width:767px){.db-grid3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:480px){.us-dl{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   LOGIN PORTAL (login.html): photo + trust points | sign-in card. No footer.
   ========================================================================== */
.lg{padding:48px 0}                                    /* equal top and bottom */
.lg-wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:32px;align-items:stretch}
.lg-side{display:flex;flex-direction:column;gap:16px;animation:lg-in .7s ease both}
.lg-photo{position:relative;flex:1;min-height:440px;overflow:hidden;border:1px solid var(--border);border-radius:24px;box-shadow:0 12px 28px var(--glow-2)}
.lg-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-theme="dark"] .lg-photo img{filter:brightness(.88)}
.lg-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.lg-points li{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);font-size:.875rem;font-weight:600;text-align:center}
.lg-card{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 40px;border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:0 12px 28px var(--glow-2);text-align:center;animation:lg-in .7s ease .12s both}
.lg .lg-card,.lg .lg-card h1,.lg .lg-card>p,.lg .lg-card .lg-label,.lg .lg-card .lg-alt,.lg .lg-card .sg-note,.lg .lg-card .lg-check{text-align:center}
.lg-tag{align-self:center;margin-bottom:16px;padding:6px 14px;border:1px solid var(--border);border-radius:999px;background:var(--glow-2);color:var(--accent);font-size:.8125rem;font-weight:600}
.lg-card h1{margin:0 0 8px;font-size:clamp(1.875rem,3.4vw,2.5rem)}
.lg-card>p{margin:0 0 28px}
.lg-card form{width:100%}
.lg-label{display:block;margin-bottom:8px;color:var(--text);font-size:.9375rem;font-weight:600}
.lg-in{width:100%;height:50px;padding:0 16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--text);font:inherit;transition:border-color .25s,box-shadow .25s}
.lg-in:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px var(--glow)}
.lg-in[aria-invalid="true"]{border-color:var(--secondary)}
.lg-pass{position:relative}
.lg-pass .lg-in{padding-inline-end:80px}
.lg-eye{position:absolute;inset-inline-end:8px;top:50%;height:36px;padding:0 12px;transform:translateY(-50%);border:0;border-radius:8px;background:transparent;color:var(--accent);font:600 .875rem/1 "Inter",system-ui,sans-serif;cursor:pointer}
.lg-eye:hover{background:var(--glow-2)}
.lg-err{min-height:22px;margin:6px 0 10px;color:var(--secondary);font-size:.875rem;font-weight:600}
.lg-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;margin:2px 0 24px;font-size:.9375rem}
.lg-check{display:inline-flex;align-items:center;gap:10px;color:var(--text);cursor:pointer}
.lg-check input{width:18px;height:18px;accent-color:var(--accent)}
.lg-row a,.lg-alt a{color:var(--accent);font-weight:600}
.lg-submit{width:100%;flex:none}
.lg-msg{min-height:22px;margin:12px 0 0;color:var(--accent);font-size:.9375rem;font-weight:600;text-align:center}
.lg-alt{margin:16px 0 0;text-align:center;font-size:.9375rem}
.lg-alt+.lg-alt{margin-top:6px}
@keyframes lg-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:991px){.lg-wrap{grid-template-columns:minmax(0,1fr)}.lg-photo{min-height:300px}}
@media (max-width:560px){.lg{padding:32px 0}.lg-points{grid-template-columns:minmax(0,1fr)}.lg-card{padding:32px 20px}}
@media (prefers-reduced-motion:reduce){.lg-side,.lg-card{animation:none}}


/* ==========================================================================
   SIGNUP (signup.html): reuses the login layout, form first and photo last
   ========================================================================== */
.lg-wrap.is-flip .lg-side{order:2}                      /* photo on the right on wide screens */
.lg-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
select.lg-in{cursor:pointer}
/* password strength meter: four bars that fill as the password gets stronger */
.sg-meter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:10px 0 6px}
.sg-meter i{height:6px;border-radius:99px;background:var(--border);transition:background .3s}
.sg-meter i.on{background:var(--accent)}
.sg-note{margin:0;color:var(--muted);font-size:.875rem}
@media (max-width:991px){.lg-wrap.is-flip .lg-side{order:0}}
@media (max-width:560px){.lg-two{grid-template-columns:minmax(0,1fr)}}


/* ==========================================================================
   404 AND COMING SOON (404.html, coming-soon.html)
   Animated backdrop (grid, glowing orbs, rings), rising content, spinning zero,
   floating documents and a live countdown. Site colour variables only.
   ========================================================================== */
.er{position:relative;overflow:hidden;padding:88px 0}   /* equal top and bottom */
.er-bg{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;opacity:.45;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 15%,transparent 70%);
  animation:er-grid 16s linear infinite}
@keyframes er-grid{to{background-position:56px 56px}}
.er-orb{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--glow),transparent 68%);animation:er-float 9s ease-in-out infinite}
.er-orb.o1{inset-block-start:-120px;inset-inline-start:-80px}
.er-orb.o2{inset-block-end:-140px;inset-inline-end:-60px;animation-delay:-4s}
@keyframes er-float{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,24px)}}
.er-ring{position:absolute;inset-block-start:50%;inset-inline-start:50%;width:260px;height:260px;margin:-130px;border:2px solid var(--accent);border-radius:50%;opacity:0;animation:er-ring 6s ease-out infinite}
.er-ring.r2{animation-delay:2s}.er-ring.r3{animation-delay:4s}
@keyframes er-ring{0%{transform:scale(.4);opacity:.45}100%{transform:scale(3.4);opacity:0}}

/* layout: documents | content | documents (404) or a single centred column */
.er-wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:center;gap:32px}
.er-wrap.is-one{grid-template-columns:minmax(0,1fr);justify-items:center}
.er-core{display:flex;flex-direction:column;align-items:center;max-width:640px;text-align:center}
.er-core h1{margin:0 0 12px;font-size:clamp(1.875rem,4vw,2.75rem)}
.er-core p{max-width:520px;margin:0 0 28px}
.er-tag{margin-bottom:16px;padding:6px 16px;border:1px solid var(--border);border-radius:999px;background:var(--glow-2);color:var(--accent);font-size:.8125rem;font-weight:600}
.er-rise{animation:er-up .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes er-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* 404 digits: the zero is a ring that spins with a dot orbiting it */
.er-num{display:flex;align-items:center;justify-content:center;gap:.06em;margin-bottom:12px;direction:ltr;font:700 clamp(6rem,18vw,11rem)/1 "Playfair Display",Georgia,serif;color:var(--text)}
.er-num>span:not(.er-zero){display:block;animation:er-drop .9s cubic-bezier(.3,1.4,.5,1) both}
.er-num>span:last-child{animation-delay:.15s}
@keyframes er-drop{from{opacity:0;transform:translateY(-60px) rotate(-8deg)}to{opacity:1;transform:none}}
.er-zero{position:relative;width:.72em;height:.72em;border:.09em solid var(--accent);border-radius:50%;box-shadow:0 0 40px var(--glow),inset 0 0 30px var(--glow-2);animation:er-spin 7s linear infinite}
.er-zero i{position:absolute;inset-block-start:-.14em;inset-inline-start:50%;width:.16em;height:.16em;margin-inline-start:-.08em;border-radius:50%;background:var(--accent);box-shadow:0 0 22px var(--glow)}
@keyframes er-spin{to{transform:rotate(360deg)}}

/* floating documents (404 only, hidden on small screens) */
.er-doc{display:flex;flex-direction:column;gap:10px;width:min(100%,170px);justify-self:center;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 12px 28px var(--glow-2);animation:er-bob 6s ease-in-out infinite}
.er-doc.d1{transform:rotate(-6deg)}
.er-doc.d2{animation-delay:-3s}
.er-doc strong{color:var(--text);font-size:.9375rem}
.er-doc em{color:var(--muted);font-size:.875rem;font-style:normal}
.er-bar{display:block;height:8px;border-radius:99px;background:var(--border)}
.er-bar.short{width:60%;background:var(--accent)}
@keyframes er-bob{0%,100%{translate:0 0}50%{translate:0 -16px}}

.er-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px}
.er-btns .btn{flex:0 1 auto}
.er-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin:0;padding:0;list-style:none}
.er-links a,.er-back{color:var(--accent);font-weight:600}

/* coming soon: countdown, progress, notify form */
.er-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;width:min(100%,520px);margin-bottom:28px}
.er-cell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 8px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:0 12px 28px var(--glow-2)}
.er-cell b{font:700 clamp(1.75rem,5vw,2.5rem)/1 "Playfair Display",Georgia,serif;color:var(--accent)}
.er-cell b.tick{animation:er-tick .45s ease}
@keyframes er-tick{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.er-cell span{color:var(--muted);font-size:.875rem;font-weight:600}
.er-prog{width:min(100%,520px);margin-bottom:28px;text-align:start}
.er-prog .us-prog{margin-top:0}
.er-form{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;width:min(100%,520px)}
.er-form .lg-in{flex:1 1 240px;width:auto}
.er-form .btn{flex:0 0 auto}
.er-core .lg-msg{margin:12px 0 0}
.er-back{margin-top:20px}

@media (max-width:991px){.er-wrap{grid-template-columns:minmax(0,1fr)}.er-doc{display:none}}
@media (max-width:560px){.er{padding:56px 0}.er-count{gap:8px}.er-cell{padding:14px 4px}}
@media (prefers-reduced-motion:reduce){.er-bg,.er-orb,.er-ring,.er-rise,.er-num>span,.er-zero,.er-doc,.er-cell b.tick{animation:none}.er-ring{opacity:.2}}


/* ==========================================================================
   CONSISTENT HEADINGS (all pages)
   Every page title (h1) shares one size and every section heading (h2) shares
   one size. Highlighted words inside a heading (italic, accent colour, marker
   highlight, hand-drawn or swept underline) are switched off, so a heading
   reads the same wherever it appears. Dashboard card titles, the small
   "Front desk" tile title and the carousel card title keep their own size.
   ========================================================================== */
h1,h2{font-family:"Playfair Display",Georgia,serif;font-weight:700;font-style:normal;text-transform:none;text-decoration:none}
body:not(.db-body) h1:not(.er-rise):not(.lg-card h1){font-size:clamp(2.25rem,4.4vw,3.5rem)!important;line-height:1.15!important;letter-spacing:normal!important}
body:not(.db-body) h2:not(.cb-desk-title):not(.cs-title){font-size:clamp(1.75rem,3vw,2.5rem)!important;line-height:1.2!important;letter-spacing:normal!important}
h1 :is(em,mark),h2 :is(em,mark){font-style:normal!important;font-weight:inherit!important;color:inherit!important;background:none!important;text-decoration:none!important;padding:0!important;box-shadow:none!important}
h1 :is(em,mark)::before,h1 :is(em,mark)::after,h2 :is(em,mark)::before,h2 :is(em,mark)::after{content:none!important;display:none!important}
h1 svg,h2 svg,.cr-under{display:none!important}
.er-core h1,.lg-card h1{font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.2}   /* error, sign-in and sign-up titles match the 40px section size */