/* Shared by the homepage (/) and /south-africa. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}

/* Prismatic Syntax. Colour and type come from /theme.css; nothing here carries
   a literal colour. Reduced-motion handling lives in the block at the end. */
:root{--pad:clamp(20px,4.9vw,96px);--nav-h:84px;}
/* Ink, not paper: this is the colour a phone shows when you scroll past either end of
   the page, and every page on the site ends in the dark footer. On paper it left a blank
   white gap under the footer, and a white strip above the hero inside the safe area. */
html{scroll-behavior:smooth;background:var(--ink);}
body{font-family:var(--f-body);background:var(--paper);color:var(--text);overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;}
.skip-link{position:absolute;top:-100%;left:16px;z-index:10000;padding:12px 22px;border-radius:var(--r-pill);background:var(--blue);color:var(--surface);font:600 13px var(--f-display);text-decoration:none;transition:top .2s;}
.skip-link:focus{top:0;}
#scroll-bg{display:none;}

/* ── BUTTONS ── one fill that sweeps in from the left, shared by every button */
.btn-primary,.btn-ghost,.btn-nav,.btn-p,.btn-submit{--fill:var(--text);position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 15px/1 var(--f-display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .45s var(--ease),border-color .3s;}
/* The fill keeps one origin in both states. It used to grow from the left and retract to
   the right, which looks better uninterrupted but breaks the moment it is: transform-origin
   cannot animate, so re-entering mid-sweep re-anchored a half-drawn fill to the opposite
   edge and the colour jumped across the button. Anchored once, an interrupted sweep just
   reverses from wherever it had got to. */
:is(.btn-primary,.btn-ghost,.btn-nav,.btn-p,.btn-submit)::before{content:'';position:absolute;inset:-1px;z-index:-1;background:var(--fill);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);}
:is(.btn-primary,.btn-ghost,.btn-nav,.btn-p,.btn-submit):is(:hover,:focus-visible)::before{transform:scaleX(1);}
.btn-primary{height:54px;padding:0 26px;background:var(--blue);color:var(--surface);border:0;}
/* Filled buttons read as tinted glass: a lit top edge and a slightly darker bottom one. */
:is(.btn-primary,.btn-nav,.btn-submit,.btn-p.pop-btn){box-shadow:inset 0 1px 0 color-mix(in srgb,var(--surface) 30%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--ink) 22%,transparent);}
.btn-ghost{height:54px;padding:0 26px;background:transparent;color:var(--text);border:1px solid var(--text);}
.btn-ghost:hover,.btn-ghost:focus-visible{color:var(--surface);}
:is(.hero,.band-ink,.cta-banner,#page-contact) .btn-primary{--fill:var(--surface);}
:is(.hero,.band-ink,.cta-banner,#page-contact) .btn-primary:is(:hover,:focus-visible){color:var(--blue);}
:is(.band-ink,.cta-banner) .btn-ghost{--fill:var(--surface);color:var(--surface);background:color-mix(in srgb,var(--surface) 10%,transparent);border-color:color-mix(in srgb,var(--surface) 16%,transparent);}
:is(.band-ink,.cta-banner) .btn-ghost:is(:hover,:focus-visible){color:var(--text);}
.btn-link{position:relative;display:inline-flex;align-items:center;gap:12px;padding:10px 0;font:600 15px/1 var(--f-display);letter-spacing:-.005em;color:inherit;text-decoration:none;}
/* The underline brightens rather than wiping out and back. The wipe was a keyframe
   animation, so every re-entry restarted it from the first frame: hover the link a few
   times quickly and it flickered. A transition just reverses from wherever it is. */
.btn-link::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;opacity:.55;transition:opacity .3s var(--ease);}
.btn-link:is(:hover,:focus-visible)::after{opacity:1;}

/* ── NAV ── */
nav{position:fixed;top:calc(12px + env(safe-area-inset-top));left:max(calc(12px + env(safe-area-inset-left)),calc((100% - 1400px) / 2 + var(--pad) - 24px));right:max(calc(12px + env(safe-area-inset-right)),calc((100% - 1400px) / 2 + var(--pad) - 24px));z-index:200;height:calc(var(--nav-h) - 24px);padding:0 8px 0 24px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-radius:var(--r-pill);background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:0;box-shadow:var(--glass-shine);transition:background-color .4s,box-shadow .4s;animation:slideDown .9s var(--ease) backwards;}
/* The menu sheet is already glass, so the bar goes clear over it: never glass on glass. */
body:has(.mobile-menu.open) nav{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
body:has(.mobile-menu.open) nav::after{opacity:0;}
@keyframes slideDown{from{transform:translateY(-100%);opacity:0;}}
.logo{display:flex;align-items:center;text-decoration:none;cursor:pointer;color:var(--surface);flex-shrink:0;}
.logo svg{height:30px;width:auto;overflow:visible;}
.logo .m,.logo .lw{transform-box:fill-box;transform-origin:center;transition:transform .6s var(--ease);}
.logo:hover .m2{transform:translate(5%,-5%);}
.logo:hover .m3{transform:translate(-5%,5%);}
nav .m{animation:markIn 1.1s var(--ease) backwards;}
nav .m1{--tx:-70%;--ty:-40%;animation-delay:.15s;}
nav .m2{--tx:70%;--ty:-40%;animation-delay:.25s;}
nav .m3{--tx:-70%;--ty:40%;animation-delay:.35s;}
nav .m4{--tx:70%;--ty:40%;animation-delay:.45s;}
nav .lw{animation:wordIn 1s var(--ease) .55s backwards;}
nav .lw2{animation-delay:.68s;}
@keyframes markIn{from{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(-20deg);}}
@keyframes wordIn{from{opacity:0;transform:translateX(-5%);}}
footer .logo-lockup{height:40px;width:auto;}

.nav-links{display:flex;gap:2px;list-style:none;}
.nav-links a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-pill);color:var(--grey-dark);font:600 14.5px/1 var(--f-display);letter-spacing:-.005em;text-decoration:none;cursor:pointer;transition:color .3s,background-color .3s;}
.nav-links a:hover,.nav-links a.active{color:var(--surface);}
.nav-links>li>a:hover{background:color-mix(in srgb,var(--surface) 8%,transparent);}
/* The current page is a switched-on control: a bright pill with dark text. */
.nav-links>li>a.active{background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--text);}

/* Services dropdown: hover and :focus-within, no JS, so it is reachable by
   keyboard. The padding-top bridges the gap under the trigger. */
.nav-has-sub{position:relative;}
.nav-sub{position:absolute;top:100%;left:-18px;z-index:120;min-width:230px;list-style:none;padding:22px 0 6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease),visibility .25s;}
.nav-has-sub:hover .nav-sub,.nav-has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:none;}
.nav-sub::before{content:'';position:absolute;inset:14px 0 0;background:var(--ink-2);border:1px solid var(--line-dark);border-radius:var(--r-md);}
.nav-sub li{position:relative;}
.nav-sub a{display:flex;margin:0 6px;padding:11px 12px;border-radius:var(--r-xs);font-size:14px;}
.nav-sub a:hover{color:var(--surface);background:color-mix(in srgb,var(--blue) 20%,transparent);}
.nav-sub-all{margin-top:4px;padding-top:4px;border-top:1px solid var(--line-dark);}
.nav-sub-all a{color:var(--blue-light);}

.nav-actions{display:flex;align-items:center;gap:10px;}
.btn-nav{--fill:var(--surface);height:44px;padding:0 22px;background:var(--blue);color:var(--surface);border:0;font-size:14px;}
.btn-nav:is(:hover,:focus-visible){color:var(--blue);}
/* The way across to the other audience's page: top right at every width, so a
   visitor sees it before any price in a currency that is not theirs. */
.nav-region{padding:11px 16px;margin-right:2px;border:1px solid var(--line-dark);border-radius:var(--r-pill);color:var(--surface);font:600 14px/1 var(--f-display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap;transition:background-color .3s,border-color .3s;}
.nav-region:hover{background:color-mix(in srgb,var(--surface) 8%,transparent);border-color:var(--glass-edge);}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:6px;width:44px;height:44px;padding:0 9px;cursor:pointer;}
.hamburger span{height:1.5px;background:var(--surface);transition:transform .4s var(--ease),opacity .3s;}
body:has(.mobile-menu.open) .hamburger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
body:has(.mobile-menu.open) .hamburger span:nth-child(2){opacity:0;}
body:has(.mobile-menu.open) .hamburger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}


.mobile-menu{display:none;position:fixed;inset:0;z-index:190;flex-direction:column;align-items:stretch;gap:2px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:color-mix(in srgb,var(--ink) 82%,transparent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);padding:calc(var(--nav-h) + 24px + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));}
.mobile-menu.open{display:flex;animation:menuIn .45s var(--ease);}
@keyframes menuIn{from{opacity:0;}}
.mobile-menu>a{display:flex;align-items:center;gap:14px;padding:6px 0;font:700 clamp(30px,8.4vw,44px)/1.2 var(--f-display);letter-spacing:-.02em;color:var(--surface);text-decoration:none;cursor:pointer;}
.mobile-menu>a::before{content:'';width:11px;height:11px;flex-shrink:0;border:1.5px solid var(--grey-dark);border-radius:50%;}
.mobile-menu>a:active::before,.mobile-menu>a.active::before{background:var(--blue);border-color:var(--blue);}
.mob-sub-group{display:flex;flex-direction:column;gap:2px;margin:2px 0 10px 25px;}
.mobile-menu a.mob-sub{padding:9px 0;font:500 16px/1 var(--f-display);letter-spacing:-.005em;color:var(--grey-dark);text-decoration:none;}

/* ── PAGES: visible by default for crawlers, hidden by JS for users ── */
.page{display:block;position:relative;z-index:1;min-height:100vh;padding-top:calc(var(--nav-h) + env(safe-area-inset-top));}
.js-ready .page{display:none;}
.js-ready .page.active{display:block;}
#page-home{padding-top:0;}
#page-contact{background:var(--ink-glow);color:var(--surface);}


/* ── SECTIONS ── bands paint full width; .sec is the measured column inside */
.band-mist{background:var(--mist);}
.band-ink{position:relative;overflow:hidden;background:var(--ink-glow);color:var(--surface);}
/* The second glass form sits low on the left of this band, in the gap under the heading
   column. The step cards are only 6% white, so anything behind them shows through and
   fights their text: it has to go where there is no card. The band is far enough down
   the page that it and the hero's can never share a screen, so only one is ever drawing.
   It sits clear of every edge of the band rather than bleeding off any of them: a shape
   sliced by an edge reads as broken, and the narrower the window the worse the slice got.
   The content needs no z-index here; .sec already carries one. */
.band-prism{position:absolute;left:max(20px,calc((100% - 1400px) / 2 + 20px));bottom:16px;width:clamp(260px,24vw,310px);aspect-ratio:1;}
/* The third sits in the contact band, in the corner the info column leaves free below
   it and left of the form panel, which is another 6% white and would show it through.
   The offsets are percentages of its own size, so the crop holds as the column narrows.
   It is 2450px from the one in the band above: they can never share a screen. */
/* The contact corner only leaves 197-254px under the details column, so this one is
   smaller than the band's. The page keeps the spacing it had: the shape fits the room
   that is there rather than the band growing to suit the shape. */
.contact-prism{position:absolute;left:max(20px,calc((100% - 1400px) / 2 + 20px));bottom:10px;width:clamp(180px,15vw,235px);aspect-ratio:1;}
/* On /south-africa contact is its own view rather than a band, so it needs the same
   frame to hang the shape in. Only one view is ever displayed, so that one can never
   be on screen with the hero's or the band's at all. */
#page-contact{position:relative;overflow:hidden;}
.sec{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:clamp(64px,7vw,112px) var(--pad);}
.sec:has(>.cta-banner:last-child){padding-bottom:0;}
.sec-lbl{margin-bottom:20px;font:500 12.5px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);}
:is(.band-ink,.cta-banner,#page-contact) .sec-lbl{color:var(--grey-dark);}
.sec-h{margin-bottom:18px;font:700 clamp(32px,3.6vw,56px)/1.05 var(--f-display);letter-spacing:-.03em;overflow-wrap:break-word;}
.hl{color:var(--blue);}
.sec-sub{max-width:34em;margin-bottom:48px;font-size:clamp(15.5px,1.15vw,17.5px);line-height:1.65;color:var(--grey);}
:is(.band-ink,.cta-banner,#page-contact) .sec-sub{color:var(--grey-dark);}
.sec-sub a{color:var(--blue);text-decoration:underline;text-underline-offset:3px;}
#page-contact .sec-sub a{color:var(--blue-light);}
.sec-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:28px 64px;margin-bottom:56px;}
.sec-top .sec-h{margin-bottom:0;}
.sec-top>.sec-sub{max-width:27em;margin-bottom:6px;}

/* ── HERO ── */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:clamp(640px,54vw,880px);padding:calc(var(--nav-h) + 48px) var(--pad) 80px;background:var(--ink);color:var(--surface);}
/* Both entry pages float a form of liquid glass behind the headline, big enough that
   the words cross it. prism.js renders it live in WebGL so every part moves on its
   own; the blue glow behind it is plain CSS and stays if WebGL is unavailable.
   The text keeps z-index 1 and the hero's ::after lays a wash of ink between the two,
   so the headline reads over the glass instead of fighting it. */
.hero-media{position:absolute;top:50%;right:max(-40px,calc((100% - 1400px) / 2 - 40px));width:clamp(440px,58vw,900px);aspect-ratio:1;translate:calc(var(--px,0) * -22px) calc(-50% + var(--py,0) * -16px);transition:translate 1.2s var(--ease);}
.hero-media::before{content:'';position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--blue) 34%,transparent),transparent 72%);}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--ink) 16%,color-mix(in srgb,var(--ink) 78%,transparent) 44%,color-mix(in srgb,var(--ink) 40%,transparent) 62%,transparent 78%);}
.prism-canvas{position:relative;display:block;width:100%;height:100%;opacity:0;transition:opacity 1.4s var(--ease);}
.prism-canvas.is-drawn{opacity:1;}
/* The tiles only fade in place, so they run for reduced motion too. */
.js-ready .hero-tiles{position:absolute;inset:0;display:grid;grid-template:repeat(9,1fr)/repeat(9,1fr);background:var(--ink);}
.hero-tiles.is-ready{background:transparent;}
.hero-tiles i{background:var(--ink);box-shadow:0 0 0 1px var(--ink);animation:tile .8s cubic-bezier(.65,0,.35,1) both;}
.hero-tiles i.b{animation-name:tileB;}
@keyframes tile{to{opacity:0;}}
@keyframes tileB{40%{opacity:1;background:var(--blue);box-shadow:0 0 0 1px var(--blue);}to{opacity:0;background:var(--blue);box-shadow:0 0 0 1px var(--blue);}}
.hero-in{position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto;}
.hero-in>*{max-width:620px;}
.hero-in>h1{max-width:720px;}
/* Between the stacked layout and a wide screen the text column would run into the
   glass, so on desktop widths it narrows with the viewport. */
@media (min-width:1081px){
  .hero-in>*{max-width:min(620px,52vw);}
  /* the headline alone runs on into the glass, the way the reference site does; the
     lines below it stay in the clear column */
  .hero-in>h1{max-width:min(1020px,70vw);}
  /* except on /south-africa, whose headline ends in the blue highlight: blue words on
     blue glass is the one pairing the brand rules rule out, so it keeps clear of it */
  #page-home .hero-in>h1{max-width:min(720px,54vw);}
}
.eyebrow{display:flex;align-items:center;font:500 12.5px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;animation:fadeUp .8s var(--ease) .2s backwards;}
.hero h1{margin-top:22px;font:700 clamp(40px,4.8vw,76px)/1.02 var(--f-display);letter-spacing:-.035em;overflow-wrap:break-word;animation:wipeUp 1.2s var(--ease) .3s backwards;}
.hero-sub{margin-top:26px;font-size:clamp(16px,1.2vw,18.5px);line-height:1.55;color:var(--grey-dark);animation:fadeUp .8s var(--ease) .55s backwards;}
.hero-sub strong{color:var(--surface);font-weight:600;}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:18px 36px;margin-top:34px;animation:fadeUp .8s var(--ease) .65s backwards;}
.hero-assure{max-width:460px;margin-top:32px;position:relative;padding:16px 20px;border-radius:var(--r-md);background:color-mix(in srgb,var(--surface) 7%,transparent);font-size:14px;line-height:1.65;color:var(--grey-dark);animation:fadeUp .8s var(--ease) .75s backwards;}
.hero-assure strong{color:var(--surface);font-weight:600;}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}
@keyframes wipeUp{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(30px);}}


/* ── TRUST STRIP ── */
.trust-strip{background:var(--mist);border-bottom:1px solid var(--line);}
.trust-in{display:flex;flex-wrap:wrap;align-items:center;gap:22px 48px;max-width:1400px;min-height:clamp(96px,8.6vw,132px);margin:0 auto;padding:0 var(--pad);}
.trust-lbl{display:flex;align-items:center;gap:26px;font:500 11.5px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--grey);}
.trust-lbl::after{content:'';width:clamp(40px,7vw,110px);height:1px;background:var(--grey);opacity:.35;}
.trust-items{flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 36px;}
.trust-item{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--f-display);letter-spacing:-.01em;color:var(--grey);transition:color .3s;}
.trust-item svg{width:20px;height:20px;flex-shrink:0;}
.trust-item:hover{color:var(--text);}

/* ── START HERE: the three paths ── */

.paths-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.path-card{position:relative;display:flex;flex-direction:column;padding:32px clamp(22px,2.4vw,36px) 36px;text-align:left;font:inherit;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);cursor:pointer;transition:border-color .3s;}
.path-card:hover,.path-card:focus-visible{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
.path-q{font-size:14px;color:var(--grey);}
.path-v{margin:12px 0 16px;font:700 clamp(34px,3.6vw,54px)/1.02 var(--f-display);letter-spacing:-.03em;color:var(--text);transition:color .3s;}
.path-card:hover .path-v{color:var(--blue);}
.path-d{flex:1;max-width:30em;font-size:14.5px;line-height:1.65;color:var(--grey);}
.path-d strong{color:var(--text);}
.path-go{margin-top:22px;font:600 15px/1 var(--f-display);letter-spacing:-.005em;color:var(--blue);transition:transform .5s var(--ease);}
.path-card:hover .path-go{transform:translateX(6px);}


/* ── PROCESS: dark band, statement beside a ruled frame ── */
.sec-work{display:grid;grid-template-columns:38% 1fr;gap:clamp(32px,5vw,72px);align-items:start;}
.sec-work .sec-sub{max-width:24em;margin-bottom:32px;}
.proc-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.step{position:relative;padding:32px 30px 36px;background:color-mix(in srgb,var(--surface) 6%,transparent);border-radius:var(--r-lg);transition:background-color .4s;}
.step:hover{background:color-mix(in srgb,var(--surface) 9%,transparent);}
.step-n{margin-bottom:22px;font:800 clamp(44px,4.4vw,64px)/1 var(--f-display);letter-spacing:-.03em;color:var(--blue);}
.step-nm{margin-bottom:8px;font:600 18px/1.3 var(--f-display);letter-spacing:-.01em;}
.step-d{font-size:14.5px;line-height:1.65;color:var(--grey-dark);}

/* ── TEAM ── the founder, then everyone else in one row */
.founder{max-width:520px;padding:22px 26px;border-radius:var(--r-lg);background:var(--mist);}
.founder-photo{width:88px;height:88px;border-radius:50%;flex-shrink:0;object-fit:cover;}
.founder-name{margin-bottom:10px;font:600 17px/1.3 var(--f-display);letter-spacing:-.01em;}
/* each founder keeps their name and title together, so a narrow screen breaks at the dot */
.founder-name span{white-space:nowrap;}
.founder-bio{font-size:15px;line-height:1.7;color:var(--grey);}
.team-row{display:grid;grid-template-columns:repeat(6,1fr);gap:28px 24px;list-style:none;padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
.team-name{font:700 17px/1.2 var(--f-display);letter-spacing:-.01em;}
.team-role{margin-top:6px;font-size:13px;line-height:1.5;color:var(--grey);}

/* ── CTA BANNER ── dark, full-bleed even when it sits inside a .sec */
.cta-banner{position:relative;z-index:1;padding:clamp(64px,7vw,110px) var(--pad);background:var(--ink);color:var(--surface);box-shadow:0 0 0 100vmax var(--ink);clip-path:inset(0 -100vmax);}
.sec .cta-banner{margin-top:clamp(64px,7vw,112px);padding-inline:0;}
.cta-inner{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px 64px;max-width:1400px;margin:0 auto;}
.cta-inner h2{font:700 clamp(36px,4.8vw,72px)/1.02 var(--f-display);letter-spacing:-.035em;}
.cta-inner p{max-width:34em;font-size:clamp(15.5px,1.2vw,18px);line-height:1.6;color:var(--grey-dark);}
.cta-inner>.btn-primary,.cta-btns{grid-column:2;grid-row:1/span 2;align-self:end;}
.cta-btns{display:flex;flex-wrap:wrap;gap:12px;}
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);max-width:1400px;margin:clamp(48px,5vw,72px) auto 0;border-top:1px solid var(--line-dark);}
.s-cell{padding:28px 24px 0;border-left:1px solid var(--line-dark);}
.s-cell:first-child{border-left:0;padding-left:0;}
.s-big{font:800 clamp(34px,3.6vw,56px)/1 var(--f-display);letter-spacing:-.03em;color:var(--surface);}
.s-sm{margin-top:10px;font:500 11.5px/1.4 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-dark);}

/* ── SERVICES GRID ── */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.svc-card{position:relative;display:flex;flex-direction:column;padding:28px 24px 30px;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .3s;}
.svc-card:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
.svc-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-bottom:22px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--blue);transition:background-color .3s,color .3s,border-color .3s;}
.svc-card:hover .svc-icon{background:var(--blue);border-color:var(--blue);color:var(--surface);}
.svc-name{margin-bottom:8px;font:600 17px/1.3 var(--f-display);letter-spacing:-.01em;}
.svc-desc{font-size:14px;line-height:1.65;color:var(--grey);}
.svc-list{flex:1;list-style:none;margin-top:18px;}
.svc-list li{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text);}
.svc-list li::before{content:'';width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--blue);transform:translateY(-2px);}
.svc-more{margin-top:20px;font:600 15px/1 var(--f-display);letter-spacing:-.005em;color:var(--blue);transition:transform .5s var(--ease);}
a.svc-card:hover .svc-more{transform:translateX(6px);}
/* The homepage lists the services as plain rows with the cards' name and description type. */
.svc-rows{display:grid;grid-template-columns:repeat(2,1fr);column-gap:clamp(32px,5vw,72px);list-style:none;padding:4px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
.svc-rows li{padding:22px 0;border-top:1px solid var(--line);}
.svc-rows li:nth-child(-n+2){border-top:0;}

/* ── PACKAGES ── */
.deposit-note{display:flex;align-items:center;gap:16px;max-width:640px;margin-top:40px;padding:20px 24px;background:var(--mist);border-radius:var(--r-md);}
.deposit-icon,.assure-icon{display:flex;flex-shrink:0;color:var(--blue);}
.deposit-text{font-size:14.5px;line-height:1.6;color:var(--grey);}
.deposit-text strong{color:var(--text);}
.assure-note{margin-top:0;margin-bottom:48px;}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.p-card{position:relative;display:flex;flex-direction:column;padding:30px clamp(20px,1.8vw,28px) 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .3s;}
.p-card:hover,.m-card:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
/* The one tinted card: Apple tints the primary choice and nothing else. */
.p-card.pop,.m-card.rec{background:color-mix(in srgb,var(--blue) 5%,var(--surface));border-color:var(--blue);}
.pop-tag{align-self:flex-start;margin-bottom:18px;padding:7px 12px;border-radius:var(--r-pill);background:var(--blue);color:var(--surface);font:600 12.5px/1 var(--f-display);letter-spacing:0;}
.p-name{margin-bottom:14px;font:600 12.5px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}
.p-amount{margin-bottom:6px;font:700 clamp(30px,2.6vw,42px)/1.05 var(--f-display);letter-spacing:-.03em;color:var(--text);}
.p-period{margin-bottom:18px;font-size:13px;color:var(--grey);}
.p-best-for{margin-bottom:18px;font-size:13.5px;line-height:1.5;color:var(--text);}
.p-feats{list-style:none;margin-bottom:24px;}
.p-feats li{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--text);}
.p-feats li::before{content:'';width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--blue);transform:translateY(-2px);}
/* Sits at the foot of the card whatever the feature list does, so the four cards line
   their calls to action up with each other. */
.p-cta{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--f-display);letter-spacing:-.005em;color:var(--blue);text-decoration:none;transition:gap .3s var(--ease);}
.p-cta:hover{gap:12px;}
.p-feat-new{display:inline-block;padding:3px 7px;border:1px solid var(--blue);border-radius:var(--r-pill);color:var(--blue);font:600 9px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;}
.p-retainer{margin-top:auto;padding:16px 16px 14px;border:1px dashed color-mix(in srgb,var(--grey) 55%,transparent);border-radius:var(--r-sm);}
.p-retainer-lbl{margin-bottom:8px;font:600 10px/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--blue);}
.p-retainer-price{margin-bottom:4px;font:700 17px/1.2 var(--f-display);}
.p-retainer-desc{font-size:12px;line-height:1.5;color:var(--grey);}
/* Secondary buttons are the grey capsule iOS uses beside a tinted one. */
.btn-p{width:100%;height:50px;background:var(--mist);color:var(--text);border:0;font-size:14.5px;}
.btn-p:hover,.btn-p:focus-visible{color:var(--surface);}
.btn-p.pop-btn{background:var(--blue);border-color:var(--blue);color:var(--surface);}
.maint-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px;}
.m-card{position:relative;display:flex;flex-direction:column;padding:30px clamp(20px,1.8vw,26px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .3s;}
.m-card .p-feats{margin-top:8px;margin-bottom:auto;}
.m-card .btn-p{margin-top:22px;}
.m-name{margin-bottom:8px;font:700 17px/1.2 var(--f-display);}
.m-price{margin-bottom:8px;white-space:nowrap;font:700 clamp(26px,2.2vw,34px)/1.1 var(--f-display);letter-spacing:-.02em;}
.m-desc{margin-bottom:16px;font-size:13.5px;line-height:1.6;color:var(--grey);}
.m-tier-label{margin-bottom:14px;font:600 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--blue);}


/* ── BLOG ── */
/* ── CLIENT WORK ── the businesses we have worked for, in one row however many there are.
   Without JavaScript it is a row to swipe or scroll; home.js turns it into a slow marquee
   by setting a copy of the list beside it and sliding both, so the loop has no seam at any
   count. Tiles are one size and logos are capped by height, not width, so a long wordmark
   and a square mark carry the same weight. */
.work-grid{--work-gap:16px;display:flex;gap:var(--work-gap);list-style:none;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:6px;}
.work-item{flex:0 0 clamp(170px,17vw,230px);display:flex;align-items:center;justify-content:center;padding:24px 20px;min-height:124px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);scroll-snap-align:start;transition:border-color .4s;}
.work-item:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
.work-item img{max-width:100%;max-height:64px;width:auto;height:auto;object-fit:contain;}
.work-marquee{--work-gap:16px;display:flex;gap:var(--work-gap);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,var(--ink) 7%,var(--ink) 93%,transparent);mask-image:linear-gradient(90deg,transparent,var(--ink) 7%,var(--ink) 93%,transparent);}
/* each copy is at least as wide as the strip, so one full copy always covers the view, and
   sliding by exactly one copy plus the gap lands the second where the first began */
.work-marquee .work-grid{flex-shrink:0;min-width:100%;justify-content:space-around;overflow:visible;padding-bottom:0;animation:workSlide var(--work-duration,40s) linear infinite;}
.work-marquee:hover .work-grid,.work-marquee.is-paused .work-grid{animation-play-state:paused;}
@keyframes workSlide{to{transform:translateX(calc(-100% - var(--work-gap)));}}
.work-pause{display:block;margin:16px 0 0 auto;padding:9px 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--grey);font:600 13px/1 var(--f-display);cursor:pointer;transition:color .3s,border-color .3s;}
.work-pause:hover{color:var(--text);border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
@media (max-width:760px){.work-grid,.work-marquee{--work-gap:12px;}.work-item{flex-basis:160px;min-height:104px;padding:18px 14px;}}
/* the lap time is set by home.js from a pace, so it holds steady as businesses are added */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.blog-card{position:relative;display:flex;flex-direction:column;padding:28px 26px 30px;color:inherit;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .3s;}
.blog-card:hover{border-color:color-mix(in srgb,var(--blue) 35%,var(--line));}
.blog-tag{align-self:flex-start;margin-bottom:18px;padding:6px 11px;border-radius:var(--r-pill);border:1px solid var(--blue);color:var(--blue);font:600 12.5px/1 var(--f-display);letter-spacing:0;}
.blog-date{margin-bottom:12px;font-size:12.5px;color:var(--grey);}
.blog-title{margin-bottom:12px;font:700 19px/1.25 var(--f-display);letter-spacing:-.01em;}
.blog-excerpt{flex:1;margin-bottom:22px;font-size:14px;line-height:1.65;color:var(--grey);}
.blog-read{font:600 15px/1 var(--f-display);letter-spacing:-.005em;color:var(--blue);transition:transform .5s var(--ease);}
.blog-card:hover .blog-read{transform:translateX(6px);}

/* ── CONTACT ── the one dark view */
.wa-primary{margin-bottom:48px;}
.btn-wa-lg{height:58px;padding:0 30px;}
.wa-primary-note{margin-top:12px;font-size:13.5px;color:var(--grey-dark);}
.contact-wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:start;}
.info-item{display:flex;align-items:flex-start;gap:18px;padding:22px 0;border-top:1px solid var(--line-dark);}
.info-item:last-child{border-bottom:1px solid var(--line-dark);}
.info-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--surface) 8%,transparent);color:var(--blue-light);transition:background-color .3s,color .3s,border-color .3s;}
.info-item:hover .info-icon{background:color-mix(in srgb,var(--surface) 90%,transparent);color:var(--blue);}
.info-lbl{margin-bottom:8px;font:500 11px/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;color:var(--grey-dark);}
.info-val{font:500 16px/1.4 var(--f-display);color:var(--surface);}
.info-val a{color:var(--surface);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .6s var(--ease);}
.info-val a:hover{background-size:100% 1px;}
.contact-form{position:relative;padding:clamp(24px,3vw,44px);background:color-mix(in srgb,var(--surface) 6%,transparent);border-radius:var(--r-lg);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.form-group{margin-bottom:26px;}
.form-group label{display:block;margin-bottom:10px;font:500 14px/1 var(--f-display);letter-spacing:0;color:var(--grey-dark);}
.form-group label .opt{text-transform:none;letter-spacing:0;opacity:.7;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:13px 16px;background:color-mix(in srgb,var(--surface) 5%,transparent);border:1px solid var(--line-dark);border-radius:var(--r-sm);color:var(--surface);font:400 16px var(--f-body);outline:none;transition:border-color .3s,box-shadow .3s;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue-light);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue-light) 25%,transparent);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--grey-dark);opacity:.55;}
.form-group select option{background:var(--ink-2);color:var(--surface);}
.form-group textarea{min-height:120px;resize:vertical;}
.btn-submit{--fill:var(--surface);width:100%;height:56px;background:var(--blue);color:var(--surface);border:0;}
.btn-submit:hover,.btn-submit:focus-visible{color:var(--blue);}
#contact-status{font-size:14px;color:var(--grey-dark);}
#contact-status a{color:var(--blue-light);}

/* ── FAQ ACCORDION ── */
.faq-main-header{margin-bottom:14px;font:700 clamp(32px,3.6vw,56px)/1.05 var(--f-display);letter-spacing:-.03em;}
.faq-sub-header{max-width:40em;margin-bottom:40px;font-size:16px;line-height:1.6;color:var(--grey);}
.faq-accordion{display:flex;flex-direction:column;padding:0 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);}
.faq-item-accordion{padding:22px 0;border-top:1px solid var(--line);cursor:pointer;}
.faq-item-accordion:first-child{border-top:0;}
.faq-q-accordion{display:flex;justify-content:space-between;align-items:center;gap:16px;font:600 16.5px/1.4 var(--f-display);transition:color .3s;}
.faq-item-accordion:hover .faq-q-accordion,.faq-item-accordion.open .faq-q-accordion{color:var(--blue);}
.faq-q-accordion::after{content:'+';display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--mist);font:500 22px/1 var(--f-display);color:var(--blue);transition:transform .4s var(--ease);}
.faq-item-accordion.open .faq-q-accordion::after{transform:rotate(45deg);}
.faq-a-accordion{max-width:62em;max-height:0;overflow:hidden;font-size:15px;line-height:1.75;color:var(--grey);transition:max-height .5s var(--ease),margin-top .4s var(--ease);}
.faq-item-accordion.open .faq-a-accordion{max-height:260px;margin-top:14px;}

/* ── FOOTER ── */
footer{position:relative;z-index:1;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:72px max(var(--pad),calc((100% - 1400px) / 2 + var(--pad))) 56px;background:var(--ink);color:var(--surface);}
.foot-desc{max-width:34ch;margin:18px 0;font-size:14px;line-height:1.7;color:var(--grey-dark);}
.foot-contact{font-size:14px;line-height:1.9;color:var(--grey-dark);}
.foot-contact a{color:var(--surface);text-decoration:none;}
.foot-contact a:hover{color:var(--blue-light);}
.foot-h{margin-bottom:18px;font:500 11.5px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;color:var(--grey-dark);}
.foot-links{list-style:none;}
.foot-links li{margin-bottom:10px;}
.foot-links a{display:inline-block;font-size:14px;color:var(--surface);opacity:.85;text-decoration:none;cursor:pointer;transition:opacity .3s,color .3s,transform .4s var(--ease);}
.foot-links a:hover{opacity:1;color:var(--blue-light);transform:translateX(4px);}
.foot-bottom{position:relative;z-index:1;display:flex;justify-content:center;padding:22px var(--pad) 28px;background:var(--ink);border-top:1px solid var(--line-dark);}
.foot-bottom p{font-size:13px;text-align:center;color:var(--grey-dark);}
.foot-bottom p a{color:var(--surface);text-underline-offset:3px;}
.foot-bottom p a:hover{color:var(--blue-light);}

/* ── WHATSAPP ── */
.wa-btn{position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));right:calc(24px + env(safe-area-inset-right));z-index:300;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--whatsapp) 88%,transparent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shine),0 10px 30px color-mix(in srgb,var(--ink) 30%,transparent);text-decoration:none;cursor:pointer;transition:transform .4s var(--ease);animation:fadeUp 1s var(--ease) 1.2s backwards;}
.wa-btn:hover{transform:scale(1.1) rotate(-8deg);}
.wa-btn svg{width:28px;height:28px;fill:var(--surface);}
/* the back-to-top button (theme.css) stands on it, centred, with a 12px gap */
body:has(.wa-btn) .to-top{right:calc(30px + env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));}


/* ── RESPONSIVE ── */
@media (max-width:1200px){
  .price-grid,.maint-grid{grid-template-columns:repeat(2,1fr);}
  .team-row{grid-template-columns:repeat(3,1fr);}
  .svc-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1080px){
  .nav-links,.btn-nav{display:none;}
  .nav-actions{margin-left:auto;}
  .nav-region{margin-right:0;}
  .hamburger{display:flex;}
  /* Stacked hero: once the text column is as wide as the screen it would sit on
     the glass, so the glass goes above it, a square as wide as the column. It stays
     inside its frame, so it needs no room of its own below, only the 32px the text
     overlaps plus a little air. */
  .hero{display:block;min-height:0;padding:0 var(--pad) 64px;}
  .hero-media{position:relative;top:auto;right:auto;width:auto;aspect-ratio:auto;margin:0 calc(-1 * var(--pad));padding:calc(var(--nav-h) + 4px) var(--pad) 44px;translate:none;}
  .hero-media .prism-canvas{width:min(100%,460px);height:auto;aspect-ratio:1;margin:0 auto;}
  /* stacked, nothing crosses the headline, so the wash of ink over the glass comes off */
  .hero::after{display:none;}
  /* Stacked, there is no room behind the content to hide a shape in, so they leave the
     corner and sit in the flow instead: a centred square opening each section. A phone
     still only ever draws one, and still only builds each when it is first reached. */
  .band-prism,.contact-prism{position:relative;left:auto;bottom:auto;width:min(62vw,240px);margin:44px auto 0;}
  .hero-in{margin-top:-32px;}
  .sec-work,.contact-wrap{grid-template-columns:1fr;}
  .cta-inner{grid-template-columns:1fr;}
  .cta-inner>.btn-primary,.cta-btns{grid-column:1;grid-row:auto;justify-self:start;}
  footer{grid-template-columns:1fr 1fr;}
  footer>div:first-child{grid-column:1/-1;}
}
@media (max-width:760px){
  :root{--nav-h:76px;}
  nav{gap:10px;padding:0 6px 0 18px;}
  .logo svg{height:26px;}
  .nav-region{padding:9px 12px;font-size:13px;}
  .faq-toggle::after{width:44px;height:44px;font-size:28px;}
  .hero h1{font-size:clamp(32px,10vw,56px);}
  .trust-in{padding-block:28px;}
  .trust-items{justify-content:flex-start;}
  .paths-grid,.svc-rows,.svc-grid,.blog-grid,.price-grid,.maint-grid,.stats-bar,.proc-steps{grid-template-columns:1fr;}
  .team-row{grid-template-columns:repeat(2,1fr);}
  .paths-grid .path-card{padding:26px 24px 30px;}
  .svc-rows{padding:4px 22px;}
  .svc-rows li:nth-child(2){border-top:1px solid var(--line);}
  .faq-accordion{padding:0 20px;}
  .team-row{padding:22px;}
  .stats-bar{border-top:0;}
  .stats-bar .s-cell{padding:22px 0;border-left:0;border-top:1px solid var(--line-dark);}
  .form-row{grid-template-columns:1fr;}
  footer{grid-template-columns:1fr;padding-top:56px;}
  .wa-btn{right:18px;bottom:calc(18px + env(safe-area-inset-bottom));width:50px;height:50px;}
  .wa-btn svg{width:24px;height:24px;}
  body:has(.wa-btn) .to-top{right:21px;bottom:calc(80px + env(safe-area-inset-bottom));}
}

@media (max-width:380px){
  nav{gap:6px;padding:0 4px 0 14px;}
  .logo svg{height:22px;}
  .nav-region{padding:8px 4px;border-color:transparent;}
  .hamburger{width:40px;}
}

/* ── iOS 27 GLASS DETAILS ── */
/* Only the layers that float over moving content blur what is behind them: the nav,
   the mobile menu, the WhatsApp button and the back-to-top button. The glass cards
   on dark bands sit on a flat or smooth background where a blur shows nothing, and
   backdrop-filter is expensive enough on many Windows GPUs to make scrolling judder,
   so they keep the translucent fill and rim without it. */
/* The rim: a 1px ring brightest where light would catch the corners. A border
   can only be one colour, so it is a gradient masked down to its outer pixel. */
/* ── LIGHT GLASS ── the cards on light bands as clear glass rather than flat white: bright
   where the light comes in (top left), thinner and a shade cooler where it leaves, edged
   with a dark hairline outside and a lit rim inside, which is what makes glass read on a
   light page. No backdrop blur: nothing scrolls behind these, so blur would only cost a
   PC frames for no visible change. */
:is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder){position:relative;isolation:isolate;background:var(--glass-card);border:1px solid var(--glass-card-edge);box-shadow:var(--lift);}
:is(.p-card.pop,.m-card.rec){background:var(--glass-card-rec);border-color:var(--blue);}
:is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder)::after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;}
:is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder)::after{padding:1px;background:var(--glass-rim-light);-webkit-mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);mask-composite:exclude;}
/* hairlines inside the glass are tinted, not grey, so they hold on the blue card too */
:is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder) .p-feats li{border-top-color:var(--glass-card-edge);}
:is(nav,.wa-btn,.hero-assure,.step,.contact-form,.info-icon)::after{content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:var(--glass-rim);-webkit-mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);-webkit-mask-composite:xor;mask:linear-gradient(var(--ink) 0 0) content-box,linear-gradient(var(--ink) 0 0);mask-composite:exclude;pointer-events:none;transition:opacity .4s;}
/* Over a light section the bar turns frosted white, the way iOS flips a small
   glass control with what is behind it. home.js sets .on-light. */
nav.on-light{background:var(--glass-fill-light);box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 7%,transparent),0 10px 30px -16px color-mix(in srgb,var(--ink) 28%,transparent);}
nav.on-light::after{background:var(--glass-rim-light);}
nav.on-light .logo{color:var(--text);}
nav.on-light .nav-links a{color:var(--grey);}
nav.on-light .nav-links a:hover{color:var(--text);}
nav.on-light .nav-links>li>a:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);}
nav.on-light .nav-links>li>a.active{background:var(--surface);color:var(--text);box-shadow:0 1px 4px color-mix(in srgb,var(--ink) 14%,transparent);}
nav.on-light .nav-region{color:var(--text);border-color:color-mix(in srgb,var(--ink) 12%,transparent);}
nav.on-light .nav-region:hover{background:color-mix(in srgb,var(--ink) 5%,transparent);}
nav.on-light .hamburger span{background:var(--text);}
nav.on-light .nav-sub::before{background:var(--surface);border-color:var(--line);box-shadow:var(--lift);}
nav.on-light .nav-sub a:hover{color:var(--text);background:color-mix(in srgb,var(--blue) 8%,transparent);}
nav.on-light .nav-sub-all{border-top-color:var(--line);}
nav.on-light .nav-sub-all a{color:var(--blue);}
:is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.faq-accordion,.svc-rows,.team-row){box-shadow:var(--lift);}
/* Apple's corners are continuous curves, not circular arcs. Browsers that can
   draw one get it, with larger radii because a squircle keeps more of the
   corner; everything else keeps the plain rounded corners. */
@supports (corner-shape:squircle){
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.faq-accordion,.svc-rows,.team-row,.founder,.step,.contact-form,.hero-assure,.deposit-note,.p-retainer,.svc-icon,.form-group input,.form-group textarea){corner-shape:squircle;}
  :is(.hero-assure,.step,.contact-form)::after,.nav-sub::before{corner-shape:squircle;}
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.founder)::after{corner-shape:squircle;}
}

/* ── GLASS FALLBACKS ── solid ink wherever the glass cannot do its job: visitors
   who ask for less transparency or more contrast (iOS 27 does the same), and
   browsers without backdrop-filter, which would show a see-through bar with
   nothing blurred behind it. */
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  nav,.mobile-menu{background:var(--ink);}
  nav.on-light{background:var(--surface);}
  :is(.hero-assure,.step,.contact-form,.info-icon){background:var(--ink-2);}
}
@media (prefers-reduced-transparency:reduce){
  nav,.mobile-menu,.wa-btn,.hero-assure,.step,.contact-form,.info-icon,:is(.band-ink,.cta-banner) .btn-ghost{-webkit-backdrop-filter:none;backdrop-filter:none;}
  nav,.mobile-menu{background:var(--ink);}
  nav.on-light{background:var(--surface);}
  :is(.hero-assure,.step,.contact-form,.info-icon){background:var(--ink-2);}
  .wa-btn{background:var(--whatsapp);}
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder){background:var(--surface);}
  :is(.p-card.pop,.m-card.rec){background:color-mix(in srgb,var(--blue) 5%,var(--surface));}
}
@media (prefers-contrast:more){
  nav,.mobile-menu{background:var(--ink);border-color:var(--surface);}
  nav.on-light{background:var(--surface);}
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.faq-accordion,.svc-rows,.team-row,.work-item,.founder){border-color:var(--text);}
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder){background:var(--surface);}
  :is(.p-card,.m-card,.svc-card,.blog-card,.path-card,.team-row,.work-item,.founder)::after{display:none;}
}

/* Reduced motion means no MOVEMENT, not a dead page. Windows turns this on whenever
   "Animation effects" is off, which it is on a huge share of PCs, and a blanket
   rule here used to stop every transition, so those PCs got a site that snapped
   between states. Fades, colour changes, button fills, the glass nav's tone and
   the FAQ opening still animate; only things that travel are held still. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  :is(.path-card:hover .path-go,a.svc-card:hover .svc-more,.blog-card:hover .blog-read,.foot-links a:hover,.wa-btn:hover,.logo:hover .m2,.logo:hover .m3){transform:none;}
  @keyframes fadeUp{from{opacity:0;}to{opacity:1;}}
  @keyframes wipeUp{from{opacity:0;}}
  @keyframes slideDown{from{opacity:0;}}
  @keyframes markIn{from{opacity:0;}}
  @keyframes wordIn{from{opacity:0;}}
}

/* ── HOMEPAGE (/) ── the single-page international layout */
.band[id]{scroll-margin-top:calc(var(--nav-h) - 1px);}
button.hamburger{background:none;border:0;}
.quote-line{max-width:22ch;}

/* ── FAQ collapses under its heading ── the list is visible without JS; home.js
   opens it from the heading, from links to #faq, and on arrival at #faq. The
   grid-row transition animates to the list's real height, however long the
   answers run. */
.faq-toggle{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;padding:0;background:none;border:0;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;}
.faq-toggle::after{content:'+';display:grid;place-items:center;flex-shrink:0;width:52px;height:52px;border-radius:50%;background:var(--mist);font:500 34px/1 var(--f-display);color:var(--blue);transition:transform .45s var(--ease);}
.faq-toggle[aria-expanded="true"]::after{transform:rotate(45deg);}
.faq-panel{margin-top:32px;}
.faq-sub-header+.faq-panel{margin-top:0;}
.js-ready .faq-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease);}
.js-ready .faq-panel.is-open{grid-template-rows:1fr;}
.faq-panel>.faq-accordion{min-height:0;overflow:hidden;}
/* a collapsed list is zero rows tall, but its border would still draw a sliver */
.js-ready .faq-panel:not(.is-open)>.faq-accordion{border-color:transparent;}
.faq-item-accordion:focus-visible{outline-offset:-2px;}