/* ============================================================
   TradieBuddy AI, redesign base layer (theme-AGNOSTIC)
   Structure, type scale, spacing rhythm and component geometry
   only. Every colour / shadow / ornament is a var(--x) whose
   VALUE is supplied by theme-light.css or theme-dark.css.

   THEME CONTRACT, a theme MUST define, on :root:
   --canvas          page background
   --canvas-alt      alternate light section background
   --ink             heading colour
   --body-ink        body text colour
   --muted           secondary text
   --muted-2         tertiary text (roles, placeholders)
   --line            default hairline border
   --line-strong     inked outline border (cards, chips)
   --accent          the single loud accent (badges, open accordion)
   --accent-ink      text placed ON the accent
   --btn-bg          primary button fill
   --btn-fg          primary button text
   --btn-hover-bg    liquid-wipe hover fill
   --btn-hover-fg    button text after the wipe
   --link-hover      text-link hover colour
   --nav-bg          sticky nav background
   --band-bg         full-bleed dark band background
   --band-fg         dark band text
   --band-muted      dark band secondary text
   --band-line       dark band hairline
   --card-bg         card background
   --card-line       card border
   --card-line-hover card border on hover
   --acc-bg          accordion item background
   --acc-open-bg     OPEN accordion background (inverts)
   --acc-open-head   OPEN accordion heading colour
   --acc-open-body   OPEN accordion body colour
   --price-feat-bg   featured pricing card background
   --price-feat-fg   featured pricing card text
   --price-feat-muted featured pricing secondary text
   --badge-bg        pill badge background
   --badge-fg        pill badge text
   --input-bg        form control background
   --input-line      form control border
   --input-focus     form control focus border
   --focus-ring      form control focus halo (box-shadow colour)
   --err             validation error colour
   --ok              success colour
   --term-bg         app-window (brain demo) background
   --term-bar-bg     app-window title bar background
   --shadow-card     app-window / hover-card shadow
   --shadow-nav      sticky nav shadow
   --sel-bg          ::selection background
   ============================================================ */

/* ---------- fonts ---------- */
@font-face{font-family:"Saira Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:96%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Saira";src:url("/fonts/Saira-Variable.d00e219103.woff2") format("woff2");font-weight:400 700;font-stretch:100%;font-display:swap;font-style:normal;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Saira";src:url("/fonts/Saira-Variable-ext.68383f3128.woff2") format("woff2");font-weight:400 700;font-stretch:100%;font-display:swap;font-style:normal;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";src:url("/fonts/InterVariable.c940764593.woff2") format("woff2");font-weight:400 700;font-display:swap;font-style:normal}
/* size-adjusted local fallback so the swap does not shift layout */
:root{
  --font-display:"Saira","Saira Fallback","Helvetica Neue",Arial,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.1,0,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%;overflow-x:hidden}
img,svg,video{max-width:100%;display:inline-block;vertical-align:middle}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
ul[class],ol[class]{list-style:none}
::selection{background:var(--sel-bg)}
:is(a,button,select,[tabindex]):focus-visible{outline:2px solid var(--input-focus);outline-offset:2px}

/* ---------- type scale (Saira, rebalanced 09/09/2026) ---------- */
body{font-family:var(--font-body);font-weight:400;font-size:21px;line-height:30px;color:var(--body-ink);background:var(--canvas);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;color:var(--ink)}
h1{font-size:clamp(38px,6.2vw,88px);line-height:1.06;letter-spacing:-.021em;margin-bottom:24px;text-wrap:balance}
h2{font-size:clamp(30px,3.6vw,56px);line-height:1.1;letter-spacing:-.017em;margin-bottom:22px;text-wrap:balance}
h3{font-size:clamp(21px,1.6vw,28px);line-height:1.3;letter-spacing:-.008em;text-wrap:balance}
h4{font-size:24px;line-height:28px}
h5{font-size:20px}
h6{font-size:18px}
p{margin-bottom:24px}
p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.small{font-size:16px;line-height:1.6}
.mono{font-family:var(--font-mono)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.disc{font-size:14px;line-height:1.6;color:var(--muted-2)}
b,strong{font-weight:600;color:var(--ink)}
.gt{color:inherit}
.hl-y{color:var(--link-hover)}

/* ---------- layout rhythm ---------- */
.container{max-width:1296px;margin-inline:auto;padding-inline:24px}
.section{padding:130px 0}
.section--grid{padding:125px 0 106px}
.section--band{padding:100px 0}
.section--flush{padding:0 0 130px}
.sec-head{padding-bottom:80px}
.sec-head.center{max-width:830px;margin-inline:auto;text-align:center}
.sec-head p{color:var(--muted)}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;font-family:var(--font-body);font-weight:700;font-size:16px;line-height:24px;padding:18px 40px;border-radius:8px;transition:color .4s var(--ease);isolation:isolate;text-align:center}
.btn>*{position:relative;z-index:1}
.btn::before{content:"";position:absolute;z-index:0;top:-110%;left:-10%;width:120%;padding-bottom:120%;border-radius:50%;background:var(--btn-hover-bg);transform:translateY(120%) scale(.2);transition:transform .4s var(--ease)}
.btn:hover::before{transform:translateY(0) scale(1.6)}
.btn-primary{background:var(--btn-bg);color:var(--btn-fg)}
.btn-primary:hover{color:var(--btn-hover-fg)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn-ghost:hover{color:var(--btn-hover-fg)}
.btn-nav{padding:13px 29px}
.btn-block{width:100%}
.btn-pill{border-radius:50px;width:100%;min-height:60px;padding:12px 24px;border:0;background:var(--btn-bg);color:var(--btn-fg);font-weight:700}
.btn-pill:hover{color:var(--btn-hover-fg)}
.arr{font-weight:400}
.txt-link{font-weight:700;font-size:16px;transition:color .3s}
.txt-link:hover{color:var(--link-hover)}
.iconbox .txt-link{display:inline-block;margin-top:12px}
.pcard .desc a{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:3px;transition:color .3s}
.pcard .desc a:hover{color:var(--link-hover)}
.term-body noscript{display:block;font-size:14.5px;line-height:1.55;color:#eef1f7}
.term-body noscript ul{margin:10px 0 10px 20px}
.term-body noscript p{margin-bottom:10px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:15px 0;background:transparent;transition:background .4s ease,box-shadow .4s ease}
.nav.sticky-menu{background:var(--nav-bg);box-shadow:var(--shadow-nav)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.15;color:var(--ink)}
.logo .mark{width:38px;height:38px;flex:none;border-radius:0;position:relative;background:url("/brand/icon-white.svg") center/contain no-repeat;box-shadow:none}
.logo .mark::after{content:none}
.logo small{display:block;font-family:var(--font-body);font-weight:500;font-size:11px;letter-spacing:.02em;color:var(--muted)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{font-size:16px;font-weight:600;padding:15px 19px;color:var(--ink);transition:color .3s}
.nav-links a:hover{color:var(--link-hover)}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-burger{display:none;flex-direction:column;gap:5px;padding:8px;min-width:44px;min-height:44px;align-items:center;justify-content:center}
.nav-burger span{display:block;width:24px;height:2px;background:var(--ink);transition:.3s}
.nav-menu{display:none;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg);box-shadow:var(--shadow-nav)}
.nav-menu.open{display:block}
.nav-menu-in{display:flex;flex-direction:column;padding-top:12px;padding-bottom:24px;gap:2px}
.nav-menu-in a{font-size:17px;font-weight:600;padding:12px 0;border-bottom:1px solid var(--line)}
.nav-menu-in .btn{margin-top:14px;border-bottom:0}

/* ---------- hero (centered display archetype) ---------- */
.hero{padding:195px 0 0;text-align:center;position:relative}
.hero .container{position:relative;z-index:1}
/* blueprint grid, radially faded, sits under the aurora blobs */
.hero-bg{position:absolute;inset:-120px 0 6%;z-index:0;pointer-events:none;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/100% 56px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 100%;
  -webkit-mask-image:radial-gradient(1000px 680px at 50% 14%,#000 26%,transparent 74%);
  mask-image:radial-gradient(1000px 680px at 50% 14%,#000 26%,transparent 74%);
  opacity:.55}
.hero-bg::before,.hero-bg::after{content:"";position:absolute;border-radius:50%}
/* headline chunks: masked rise (descender room via padding/margin cancel) */
.hw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.13em;margin-bottom:-.13em}
.hw>i{display:inline-block;font-style:normal}
html.hero-anim .hw>i{transform:translateY(114%);animation:hrise .9s var(--ease) .12s forwards}
html.hero-anim .hw:nth-child(2)>i{animation-delay:.3s}
html.hero-anim .hero .lead{opacity:0;animation:hfade .8s ease .62s forwards}
html.hero-anim .rotline{opacity:0;animation:hfade .8s ease .8s forwards}
html.hero-anim .hero-cta{opacity:0;animation:hfade .8s ease .96s forwards}
html.hero-anim .hero-shot{opacity:0;transform:translateY(34px);animation:hup 1.05s var(--ease) 1.15s forwards}
@keyframes hrise{to{transform:none}}
@keyframes hfade{to{opacity:1}}
@keyframes hup{to{opacity:1;transform:none}}
.scroll-cue{display:none}
.hero-content{max-width:1100px;margin-inline:auto}
.hero .lead{max-width:620px;margin:0 auto 26px;color:var(--muted);font-size:16.5px;line-height:1.6}
.rotline{font-family:var(--font-display);font-weight:600;font-size:clamp(20px,2.4vw,30px);color:var(--ink);margin-bottom:34px}
.rotwrap{display:inline-block;overflow:hidden;vertical-align:bottom;text-align:left}
.rot{display:inline-block;color:var(--link-hover);white-space:nowrap}
.hero-cta{display:flex;justify-content:center;flex-wrap:wrap;gap:24px;margin-bottom:80px}
.hero-shot{max-width:900px;margin-inline:auto}
.term-cap{font-size:18px;color:var(--muted);margin-bottom:18px}
.term-cap b{color:var(--link-hover)}
.term-cap span{font-size:15.5px;font-weight:400;color:var(--ink)}
.lead-punch{display:block;margin-top:14px;font-weight:700;color:var(--link-hover);white-space:normal}

/* ---------- CSS-only phone mockup (hero + brain demos) ----------
   Outer 3px metallic rim (gradient ring) -> dark bezel (::before)
   -> 44px-radius screen. Width 390, shrinks fluidly under 390+48. */
.phone{position:relative;width:390px;max-width:100%;margin-inline:auto;padding:10px;border-radius:54px;background:linear-gradient(160deg,#4a4f5b,#191b22 26%,#111318 74%,#40454f);box-shadow:var(--shadow-card)}
.phone::before{content:"";position:absolute;inset:3px;border-radius:51px;background:#07080d;pointer-events:none}
.ph-btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(90deg,#575c68,#1e2128)}
.pb-l1{left:-3px;top:96px;height:24px}
.pb-l2{left:-3px;top:134px;height:44px}
.pb-l3{left:-3px;top:188px;height:44px}
.pb-r{right:-3px;top:150px;height:70px}
.ph-screen{position:relative;border-radius:44px;overflow:hidden;background:var(--term-bg)}
.ph-status{position:relative;display:flex;align-items:center;justify-content:space-between;height:48px;padding:16px 27px 4px}
.ph-time{font-weight:600;font-size:14px;line-height:1;color:#fff;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.ph-island{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:98px;height:27px;border-radius:15px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.ph-island::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#1e2733,#000 70%)}
.ph-glyphs{display:inline-flex;align-items:center;gap:6px;color:#fff}
.phone .term,[data-theme] .phone .term{border:0;border-radius:0;box-shadow:none;background:transparent}
.phone .term-bar{padding:10px 20px}
.phone .term-bar i{display:none}
.phone .term-bar .t{margin-left:0}
.phone .term-body{padding:20px 18px 96px}
/* static in-app chrome pinned under the demo: disabled ask bar + home indicator.
   The screen is dark in BOTH themes (term-bg), so fixed light-on-dark inks are safe. */
.ph-dock{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:11px;padding:14px 18px 9px;background:linear-gradient(180deg,rgba(7,8,13,0),rgba(7,8,13,.9) 38%)}
.ph-ask{display:block;width:100%;font-family:var(--font-body);font-size:14px;line-height:1;color:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.14);border-radius:50px;padding:13px 18px;background:rgba(255,255,255,.05)}
.ph-home{width:118px;height:5px;border-radius:3px;background:rgba(255,255,255,.32);flex:none}

/* ---------- app-window / brain demo ---------- */
.term{border:1px solid var(--card-line);border-radius:20px;background:var(--term-bg);box-shadow:var(--shadow-card);overflow:hidden;text-align:left}
.term-bar{display:flex;align-items:center;gap:8px;padding:14px 18px;background:var(--term-bar-bg);border-bottom:1px solid var(--line)}
.term-bar i{width:11px;height:11px;border-radius:50%;flex:none}
.term-bar .t{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);margin-left:8px;margin-right:auto;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.term-bar .t-note{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);flex:none;white-space:nowrap;margin-right:auto}
.term-bar .live{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;background:var(--badge-bg);color:var(--badge-fg);border-radius:3px;padding:3px 9px;flex:none}
.term-body{padding:24px;min-height:555px}
.t-row{display:flex;gap:12px;margin-bottom:18px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.t-row.show{opacity:1;transform:none}
.t-ic{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;border:1px solid var(--line-strong);font-weight:700;font-size:15px;color:var(--ink)}
.t-ic.ai{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.t-bubble{flex:1;min-width:0}
.t-bubble .label{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:5px}
.t-prompt{font-size:17px;line-height:1.5;font-weight:600;color:var(--ink)}
.cursor{display:inline-block;width:2px;height:1.05em;background:var(--ink);vertical-align:-.15em;margin-left:1px;animation:blink 1s steps(1) infinite}
.thinking .stp{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.5;color:var(--muted);margin:7px 0}
.stp .sp{width:12px;height:12px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);flex:none;animation:spin .8s linear infinite}
.stp.done .sp{animation:none;border-color:var(--ok)}
.ans{font-size:16px;line-height:1.55;color:var(--body-ink)}
.ans .hl{font-weight:600;color:var(--ink)}
.ans ul{margin:10px 0 0;padding-left:20px}
.ans li{margin:6px 0}
.ans-foot{margin-top:14px;font-size:13px;color:var(--muted-2)}
.followups{margin-top:16px}
.fu-q{font-size:14px;font-weight:600;color:var(--muted);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:1.35;padding:8px 16px;border:1px solid var(--line-strong);border-radius:50px;color:var(--ink);transition:background .3s,color .3s}
.chip .st{width:9px;height:9px;border-radius:50%;background:var(--muted-2);flex:none;transition:background .3s}
.chip.run .st{background:var(--accent);animation:blink .6s steps(1) infinite}
.chip.done{background:var(--badge-bg);color:var(--badge-fg);border-color:transparent}
.chip.done .st{background:currentColor;animation:none}

/* ---------- dark bands (logo strip / counters) ---------- */
.band{background:var(--band-bg);color:var(--band-fg)}
.band h2,.band h3,.band h4,.band b,.band .strip-h{color:var(--band-fg)}
.band .muted,.band .disc,.band .eyebrow{color:var(--band-muted)}
.band .sec-head p{color:var(--band-muted)}
.strip-grid{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center}
.strip-grid>*,.split>*,.book-grid>*{min-width:0}
.strip-grid .strip-h{font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.2vw,30px)}
.marquee{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;align-items:center;gap:56px;width:max-content;animation:mq 26s linear infinite}
.mq-duo{display:grid;gap:26px}
.mq-rev .mq-track{animation-name:mq-r}
.marquee:hover .mq-track,.mq-duo:hover .mq-track,.mq-duo:focus-within .mq-track{animation-play-state:paused}
.mq-name{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:32px;letter-spacing:-.01em;color:var(--band-fg);opacity:.8;white-space:nowrap;flex:none}
.mq-track>span[aria-hidden]{display:flex;align-items:center;gap:56px;padding-right:56px}
.count-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:48px 100px;text-align:center}
.count-v{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,5.4vw,80px);line-height:1.05;letter-spacing:-1px;color:var(--band-fg);font-variant-numeric:tabular-nums}
.count-v .suf,.band .count-v{color:var(--band-fg)}
.count-s{font-size:16px;color:var(--band-muted);margin-top:8px}

/* ---------- iconbox cards ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.iconbox{background:var(--card-bg);border:1px solid var(--card-line);border-radius:10px;padding:30px;transition:border-color .4s ease}
.iconbox .ic{display:block;margin-bottom:18px;color:var(--accent)}
.iconbox .ic svg{width:28px;height:28px}
.iconbox h3{font-size:22px;line-height:1.3;margin-bottom:10px}
.iconbox p{font-size:16px;line-height:1.6;color:var(--muted)}
.iconbox .get{margin-top:10px;font-size:16px;font-weight:600;color:var(--ink)}
.pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 34px;margin-top:8px}
.pill{font-size:15.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.cta-band .pill-row{margin:2px 0 38px}
.cta-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:56px}

/* ---------- accordion (FAQ + pain points) ---------- */
.acc-item{border:1px solid var(--line);border-radius:20px;background:var(--acc-bg);padding:23px 24px;margin-bottom:20px;transition:background .3s ease}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;text-align:left}
.acc-title{display:block;font-family:var(--font-display);font-weight:600;font-size:20px;line-height:1.35;color:var(--ink);transition:color .3s}
.acc-cv{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line-strong);font-size:16px;font-weight:600;transition:transform .3s,color .3s,border-color .3s}
.acc-body{display:none;padding-top:15px}
.acc-body p{font-size:17px;line-height:1.65}
.acc-item.open{background:var(--acc-open-bg)}
.acc-item.open .acc-title{color:var(--acc-open-head)}
.acc-item.open .acc-body{display:block;color:var(--acc-open-body)}
.acc-item.open .acc-body b,.acc-item.open .acc-body strong{color:var(--acc-open-head)}
.acc-item.open .acc-cv{transform:rotate(45deg);color:var(--acc-open-head);border-color:var(--acc-open-head)}
/* pain-point cards: THE PAIN / THE BUILD carousel slides */
.sec-sub{font-size:16px;font-weight:500;line-height:1.5;margin-top:10px}
.sec-head .sec-sub{color:var(--muted)}
.eyebrow--lg{font-size:26px;letter-spacing:.12em;margin-bottom:8px}
.brain-sub{font-size:15px;color:var(--muted);margin-top:2px}
.pain-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px}
.pain-card{flex:0 0 calc((100% - 40px)/3);min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-line);border-radius:20px;padding:28px;transition:border-color .4s}
.pain-card h3{font-size:22px;line-height:1.25;margin:0 0 16px;font-weight:500}
.pc-lbl{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--badge-fg);margin-bottom:8px}
.pc-pain p{font-size:16px;line-height:1.6;color:var(--muted);margin:0}
.pc-build{display:flex;flex-direction:column;flex:1;margin-top:22px}
.pc-build .pc-agent{font-family:var(--font-display);font-weight:500;font-size:19px;line-height:1.3;color:var(--body-ink);margin:0 0 7px}
.pc-build p{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- splits ---------- */
.split{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.split.rev{grid-template-columns:7fr 5fr}
.split .lead{color:var(--muted)}

/* ---------- carousels: snap tracks + dots + arrow chrome ---------- */
.car{position:relative}
.car-track{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-dots{display:none;justify-content:center;gap:9px;margin-top:26px}
.car-dots button{width:9px;height:9px;border-radius:50%;padding:0;background:var(--line-strong);transition:background .3s,transform .3s}
.car-dots button.on{background:var(--accent);transform:scale(1.3)}
.car--pain .car-dots{display:flex}
.car-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border-radius:50%;border:1px solid var(--line-strong);background:var(--canvas);color:var(--ink);display:grid;place-items:center;transition:color .3s,border-color .3s,opacity .3s;box-shadow:var(--shadow-nav)}
.car-btn:hover{border-color:var(--card-line-hover);color:var(--link-hover)}
.car-btn[disabled]{opacity:.35;cursor:default}
.car-btn.prev{left:-10px}
.car-btn.next{right:-10px}
.car-btn svg{width:20px;height:20px}

/* ---------- marketing services ---------- */
.svc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 24px}
.svc-row{display:flex;gap:16px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:20px 22px;background:var(--card-bg);transition:border-color .4s}
.svc-row .ic{flex:none;display:block;margin-top:2px;color:var(--accent)}
.svc-row .ic svg{width:22px;height:22px}
.svc-row b{display:block;font-size:17px;margin-bottom:3px}
.svc-row p{font-size:15px;line-height:1.55;color:var(--muted)}
.mkt-label{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px;text-align:center}

/* ---------- pricing ---------- */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;max-width:900px;margin-inline:auto}
.pcard{display:flex;flex-direction:column;background:var(--card-bg);border:1px solid var(--card-line);border-radius:20px;padding:40px;transition:border-color .4s}
.pcard .stage{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.pcard h3{font-size:24px;margin-bottom:14px}
.pcard .amt{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,3.4vw,52px);line-height:1.1;letter-spacing:-1px;color:var(--ink);margin-bottom:8px}
.pcard .amt.amt-sm{font-size:clamp(21px,1.9vw,26px);letter-spacing:-.3px;color:var(--link-hover);margin-bottom:16px}
.pcard .desc{font-size:16px;line-height:1.6;color:var(--muted);margin-bottom:22px}
.pcard ul{list-style:none;display:flex;flex-direction:column;justify-content:center;gap:16px;flex:1;margin-bottom:26px}
.pcard li{font-size:15.5px;line-height:1.5;color:var(--muted)}
.pcard .foot{margin-top:auto}
.pcard.feat{background:var(--price-feat-bg);border-color:var(--price-feat-bg);color:var(--price-feat-fg)}
.pcard.feat h3,.pcard.feat .amt,.pcard.feat b{color:var(--price-feat-fg)}
.pcard.feat .desc,.pcard.feat .amt small,.pcard.feat .stage{color:var(--price-feat-muted)}
.pcard.feat li{color:var(--price-feat-muted)}
.pcard.feat .btn-pill:hover{color:var(--btn-hover-fg)}

/* ---------- CTA band ---------- */
.cta-band{background:var(--btn-bg);color:var(--btn-fg);border-radius:40px;padding:100px 24px;text-align:center}
.cta-band h2{color:var(--btn-fg)}
.cta-band p{color:var(--btn-fg);opacity:.85;max-width:640px;margin:0 auto 34px}
.cta-band .btn-primary{background:var(--accent);color:var(--accent-ink)}
.cta-band .btn-primary:hover{color:var(--btn-hover-fg)}

/* ---------- booking ---------- */
.book-grid{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.book-lead{color:var(--muted)}
.bk-ic{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--badge-bg);color:var(--badge-fg);margin-top:2px}
.book-form{border:1px solid var(--line-strong);border-radius:16px;background:var(--card-bg);padding:36px;box-shadow:4px 4px 0 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.05),var(--shadow-card)}
.bf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:block;margin-bottom:16px}
.field>span{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;height:50px;border:1px solid var(--input-line);border-radius:8px;background:var(--input-bg);color:var(--body-ink);font-family:var(--font-body);font-size:16px;padding:0 14px;transition:border-color .3s;appearance:none;-webkit-appearance:none}
.field textarea{height:auto;padding:12px 14px;line-height:1.5;resize:vertical}
.field select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field input::placeholder,.field textarea::placeholder{color:var(--muted-2)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--focus-ring)}
.field .fld-err{display:none;font-size:13px;color:var(--err);margin-top:5px}
.field.invalid input{border-color:var(--err)}
.field.invalid .fld-err{display:block}
.bf-consent{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.5;color:var(--muted);margin:2px 0 0;cursor:pointer}
.bf-consent input{margin-top:2px;flex:none;accent-color:var(--btn-bg)}
.bf-err{display:none;font-size:14px;font-weight:600;color:var(--err);margin:14px 0 0}
.bf-err.show{display:block}
.book-form .btn{margin-top:18px}
.bf-note{font-size:12.5px;line-height:1.55;color:var(--muted-2);margin:16px 0 0}
.bf-done{text-align:center;padding:30px 8px}
.bf-done .bk-ic{width:64px;height:64px;margin:0 auto 18px}
.bf-done .bf-done-h{font-family:var(--font-display);font-weight:600;font-size:1.17em;color:var(--ink);margin-bottom:10px}
.bf-done p{font-size:16px;color:var(--muted)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:100px 0 33px}
.fg{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1fr;gap:40px 32px;padding-bottom:64px}
.fg .fh{font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:17px;margin-bottom:16px}
.fg a{display:block;font-size:15.5px;line-height:1.5;color:var(--muted);padding:5px 0;transition:color .3s}
.fg a:hover{color:var(--link-hover)}
.fg .blurb{font-size:14.5px;line-height:1.6;color:var(--muted);max-width:330px;margin:16px 0 12px}
.fb{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:26px;font-size:14px;color:var(--muted)}
.fb a{text-decoration:underline}

/* ---------- reveal choreography ----------
   Hidden state is gated on html.js, stamped by app.js only once the
   IntersectionObserver is live. No JS / failed JS = full content. */
html.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}

/* ---------- motion ---------- */
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes mq-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes cueFloat{50%{transform:translateY(6px)}}
@media (max-width:767px) and (max-height:700px){.hero{padding-top:102px}.hero-content{min-height:calc(100vh - 112px);min-height:calc(100svh - 112px)}.hero-content h1{font-size:36px}.hero-cta .btn{padding:14px 26px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .mq-track,.mq-rev .mq-track{animation:none;flex-wrap:wrap;width:auto}
  .mq-track>span[aria-hidden]{display:none}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .cursor,.sp,.chip.run .st{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:991px){
  .section{padding:100px 0}
  .section--grid{padding:100px 0 76px}
  .section--band{padding:80px 0}
  .section--flush{padding:0 0 100px}
  .sec-head{padding-bottom:60px}
  .hero{padding-top:150px}
  .nav-links{display:none}
  .nav-cta .btn{display:none}
  .nav-burger{display:flex}
  .split,.split.rev,.book-grid,.strip-grid{grid-template-columns:1fr;gap:44px}
  .price-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .svc-list{grid-template-columns:1fr}
  .count-grid{gap:40px 56px}
}
@media (max-width:767px){
  html{scroll-padding-top:80px}
  /* first screen = headline story only; the brain demo lives below the fold */
  .hero-content{display:flex;flex-direction:column;min-height:calc(100vh - 142px);min-height:calc(100svh - 142px)}
  .hero-content h1{margin-top:auto}
  .scroll-cue{display:grid;place-items:center;width:44px;height:44px;margin:auto auto 0;color:var(--muted-2)}
  html.hero-anim .scroll-cue{opacity:0;animation:hfade .8s ease 1.6s forwards}
  .scroll-cue svg{animation:cueFloat 2.4s ease-in-out 2.4s infinite}
  .hero .lead{font-size:15.5px}
  .hero-cta{margin-bottom:12px}
  .hero-shot{padding-top:30px}
  .pcard li{font-size:14px}
  body{font-size:20px;line-height:29px}
  .logo .mark{width:32px;height:32px;border-radius:9px}
  p{margin-bottom:20px}
  h1{font-size:clamp(34px,9vw,44px);letter-spacing:-.018em}
  h2{font-size:clamp(26px,6.4vw,34px);letter-spacing:-.014em}
  h3{font-size:24px}
  .section{padding:80px 0}
  .section--grid{padding:80px 0 56px}
  .section--flush{padding:0 0 80px}
  .sec-head{padding-bottom:40px}
  .hero{padding-top:130px}
  .hero-cta{gap:14px;margin-bottom:56px}
  .btn{padding:16px 30px}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .bf-row{grid-template-columns:1fr}
  .book-form{padding:26px 20px}
  .term-body{padding:18px;min-height:555px}
  .cta-band{border-radius:20px;padding:64px 20px}
  .fg{grid-template-columns:1fr 1fr}
  .fg>div:first-child{grid-column:1/-1}
  footer{padding-top:80px}
  .fb{flex-direction:column}
}
@media (max-width:479px){
  h1{font-size:40px}
  h2{font-size:34px}
  .count-v{font-size:44px}
  .phone{padding:8px;border-radius:46px}
  .phone::before{inset:2.5px;border-radius:44px}
  .ph-screen{border-radius:38px}
  .phone .term-body{padding:18px 14px 92px;min-height:615px}
}

/* ---------- responsive: pills + carousels (kept last so modes win) ---------- */
.foot-disc{max-width:820px;margin:0 0 22px}
@media (min-width:992px){
  .pill-row--nowrap{flex-wrap:nowrap}
}
@media (max-width:767px){
  .pill-row{flex-direction:column;align-items:center;gap:11px}
  .pill{white-space:normal;text-align:center}
  .lead-punch{display:none}
  .sec-sub{font-size:14.5px}
  .pcard{padding:28px 20px}
}
@media (max-width:1199px){
  .pain-card{flex-basis:calc((100% - 20px)/2)}
}
@media (max-width:767px){
  .pain-card{flex-basis:86%;scroll-snap-align:center}
  .car-btn{display:none}
}
/* card decks that grid on desktop but swipe on mobile */
@media (max-width:767px){
  .car--m .car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px}
  .car--m .car-track>*{flex:0 0 86%;min-width:0;scroll-snap-align:center}
  .car--m .car-dots{display:flex;margin-top:20px}
  /* lead-in/out spacers so the first and last card can rest centred */
  .car--m .car-track::before,.car--m .car-track::after{content:"";flex:0 0 6px}
  .pain-track::before,.pain-track::after{content:"";flex:0 0 2px}
  /* 14/09/2026: a swiped card is never faded in. The next card peeks in from the edge to say
     "swipe for more", but the reveal waits for 15% of it to be on screen, so the peek stayed
     invisible and the cue was lost (the Website Builder's page check found 15 such cards). */
  html.js .car--m .car-track>.reveal{opacity:1;transform:none;transition:none}
}
@media (max-width:991px){
  .car--md .car-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px;max-width:none}
  .car--md .car-track>*{flex:0 0 88%;min-width:0;scroll-snap-align:center}
  .car--md .car-dots{display:flex;margin-top:20px}
  .car--md .car-track::before,.car--md .car-track::after{content:"";flex:0 0 3px}
  html.js .car--md .car-track>.reveal{opacity:1;transform:none;transition:none}
}
/* JS-driven hidden state must beat every mode above */
.car-btn[hidden],.car-dots[hidden]{display:none}


/* ---- 09/09/2026: hero clarity pass -------------------------------------
   .live--sample  the hero terminal shows illustrative figures, so the chip names
                  the DATA as sample rather than branding the PRODUCT a demo. The
                  amber badge treatment and the glow are dropped here: they read as
                  a live status, which is not true of sample figures.
   .hero-sec      the old second hero button, demoted to a quiet link so the hero
                  carries one primary decision instead of two competing buttons.
   index.html loads base.css + theme-dark.css only (styles.css serves the 93
   non-homepage pages). NOTE: the dark-theme glow override for .live--sample does
   NOT live here, it is in theme-dark.css directly after the .live glow rule it
   overrides. Same specificity means source order decides, and theme-dark.css loads
   second, so an override placed in this file silently loses and the amber "live"
   glow comes back on content labelled ILLUSTRATIVE. Do not move it here.     */
.term-bar .live--sample{background:transparent;color:var(--muted-2);font-weight:500;padding:3px 0}
.hero-cta .hero-sec{flex-basis:100%;display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:15px;font-weight:500;color:var(--muted);text-decoration:none;
  transition:color .3s}
.hero-cta .hero-sec span.arr{transition:transform .25s}
.hero-cta .hero-sec:hover{color:var(--ink)}
.hero-cta .hero-sec:hover span.arr{transform:translateX(4px)}
.hero-cta .hero-sec:focus-visible{outline:2px solid var(--accent,#FF6A00);outline-offset:4px;border-radius:3px}


/* ---- 09/09/2026: What-we-do tiles ---------------------------------------
   Ported from site_kit/src/blocks/ServicesShowcase.astro (the electrical build) and
   adapted from that light, per-service-accent theme to this dark single-accent one.

   ONE accent for all six, not six. The kit gives each service its own colour because it
   is a light page; here BRAND_DESIGN_SYSTEM section 2 is explicit that a screen with two
   competing accents is wrong. The variety comes from the objects, not the colour, so the
   hover is an amber rim and glow rather than six loud orange fills.

   Every hover effect reads one number, --on, flipped by :hover on pointer devices and by
   :focus-within, so a keyboard user gets exactly what a mouse gets. Touch devices have no
   hover, so --open forces the foot visible: the tile is complete without being touched.
   All CSS, no script.                                                                  */
.stile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0}
.stile{
  --on:0; --open:0; --show:max(var(--on),var(--open));
  /* The object must DOMINATE the card at rest: the resting frame is the only one a
     phone or a thumbnail ever shows. 46cqi left it stranded in a tall empty box,
     which is the exact failure ServicesShowcase.astro documents. The zone flexes,
     so widening the object costs no height. */
  --art:clamp(7rem,72cqi,13rem);
  position:relative;isolation:isolate;overflow:clip;container-type:inline-size;
  display:flex;flex-direction:column;min-height:20rem;
  padding:26px;border-radius:12px;
  background:var(--card-bg);border:1px solid var(--card-line);
  transform:translateY(calc(var(--on) * -4px));
  box-shadow:4px 4px 0 0 rgba(255,255,255,calc(.10 - var(--on)*.10)),
             6px 6px 0 0 rgba(var(--accent-rgb,255,106,0),calc(var(--on)*.45)),
             inset 0 1px 0 rgba(255,255,255,calc(.10 + var(--on)*.04));
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .5s ease;
}
@media (hover:hover){.stile:hover{--on:1;border-color:rgba(var(--accent-rgb,255,106,0),.45)}}
.stile:focus-within{--on:1;border-color:rgba(var(--accent-rgb,255,106,0),.45)}
@media (hover:none),(max-width:900px){.stile{--open:1}}

/* The amber wash. A gradient cannot transition, opacity can, so it is its own layer. Kept
   low: this is a rim-lit card, not an orange block. */
.stile::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:var(--on);
  background:radial-gradient(120% 80% at 12% 0%,rgba(var(--accent-rgb,255,106,0),.16),transparent 62%);
  transition:opacity .65s ease;
}
.stile-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.stile-title{font-size:20px;line-height:1.3;margin:0;text-wrap:balance}
.stile-link{color:var(--ink);text-decoration:none}
/* Stretched link: its ::after is the click target for the whole card, so the foot needs no
   second anchor and nothing is nested. */
.stile-link::after{content:"";position:absolute;inset:0;z-index:2}
.stile-chev{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
  color:color-mix(in srgb,var(--accent) calc(var(--on)*100%),var(--muted));
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,rgba(var(--accent-rgb,255,106,0),.42) calc(var(--on)*100%),rgba(255,255,255,.10));
  transform:rotate(calc(var(--on) * -45deg));
  transition:color .5s,box-shadow .5s,transform .7s var(--ease);
}
/* Three boxes deep on purpose: .stile-lift carries the hover lift as a TRANSITION and
   .stile-bob the idle float as an ANIMATION. An animation outranks a transition on the same
   property, so on one element the lift would never paint. */
.stile-zone{position:relative;flex:1 1 auto;margin-top:14px;min-height:calc(var(--art) + 1rem)}
.stile-lift{
  position:absolute;inset:0;display:grid;grid-template-columns:100%;grid-template-rows:100%;
  place-items:center;
  transform:translateY(calc(var(--on) * -8px)) scale(calc(1 + var(--on) * .05));
  transition:transform .9s var(--ease);
}
/* One definite track each way. On an auto row the image's own height sizes the row and its
   100% then resolves against that, so a tall render overflows the box. */
.stile-bob{height:min(var(--art),100%);width:min(calc(var(--art) * 1.4),100%);
  display:grid;grid-template-columns:100%;grid-template-rows:100%;place-items:center}
.stile-img{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
@media (prefers-reduced-motion:no-preference){
  .stile-bob{animation:stile-bob 6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -1.35s)}
}
@keyframes stile-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Foot: in the flow, so the space is reserved and the tile never reflows. Hidden by a clip
   that wipes up from the bottom edge, never opacity:0. */
.stile-foot{
  display:flex;flex-direction:column;gap:10px;padding-top:14px;
  clip-path:inset(calc((1 - var(--show)) * 100%) 0 0 0);
  transform:translateY(calc((1 - var(--show)) * 10px));
  opacity:calc(.25 + var(--show) * .75);
  transition:clip-path .75s var(--ease) 40ms,transform .75s var(--ease) 40ms,opacity .75s 40ms;
}
.stile-desc{font-size:15.5px;line-height:1.6;color:var(--muted);margin:0;max-width:40ch}
.stile-more{
  display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
  color:color-mix(in srgb,var(--accent) calc(var(--on)*100%),var(--ink));
  transition:color .5s;
}
.stile-more .sarr{transition:transform .4s var(--ease);transform:translateX(calc(var(--on) * 4px))}
/* Ring the whole tile on keyboard focus, not just the title text. */
@supports selector(:has(a)){
  .stile-link:focus-visible{outline:none}
  .stile:has(.stile-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
}
@media (max-width:900px){
  .stile-grid{grid-template-columns:1fr}
  .stile{min-height:0}
}


/* ---- 09/09/2026: one card surface ---------------------------------------
   .iconbox, .pain-card, .pcard and .svc-row each carried their own radius
   (10 / 20 / 20 / 10), their own padding, and a hover that only changed the
   border colour. Four treatments for one idea is why the page read as
   assembled rather than designed. One primitive now.

   Adapted from the rumen.com.au card language: the signature there is a HARD
   offset shadow with NO blur, which reads as a raised plate rather than a
   floating box, plus a hairline top highlight so the card catches light from
   above. Translated to obsidian, the offset is a pale stack at rest and warms
   to amber on hover.

   Two things deliberately NOT copied from that reference:
   1. The chevron affordance. Rumen's cards are links. .pain-card is an
      <article> and .svc-row a <div>; neither goes anywhere, and a chevron on a
      non-interactive card promises a destination that does not exist.
   2. The .stile text reveal. Those tiles have a large object filling the
      resting frame, so their foot can sit empty. These carry their whole value
      in the text, so hiding it would cost scannability and gain nothing.   */
.iconbox,.pain-card,.pcard,.svc-row{
  border-radius:14px;
  box-shadow:4px 4px 0 0 rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .45s var(--ease),border-color .4s ease,
             box-shadow .45s var(--ease),background-color .4s ease;
}
.iconbox:hover,.pain-card:hover,.pcard:hover,.svc-row:hover,
.iconbox:focus-within,.pain-card:focus-within,.pcard:focus-within,.svc-row:focus-within{
  transform:translateY(-3px);
  border-color:var(--card-line-hover);
  background-color:rgba(255,255,255,.05);
  box-shadow:6px 6px 0 0 rgba(var(--accent-rgb,255,106,0),.45),
             inset 0 1px 0 rgba(255,255,255,.14);
}
/* the icon is the one element that animates, so the card has a focal point
   without any text moving */
.iconbox .ic,.svc-row .ic{transition:transform .45s var(--ease),color .4s ease}
.iconbox:hover .ic,.svc-row:hover .ic{transform:translateY(-2px) scale(1.08)}
/* the arrow in a service row tracks right, matching .stile-more */
.svc-row .arr,.iconbox .get{transition:transform .4s var(--ease)}
.svc-row:hover .arr,.iconbox:hover .get{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){
  .iconbox,.pain-card,.pcard,.svc-row,.iconbox .ic,.svc-row .ic{transition:none}
  .iconbox:hover,.pain-card:hover,.pcard:hover,.svc-row:hover{transform:none}
}