/* ============================================================
   Atlas9 — shared shell for the trades hub and trade pages.
   Brand tokens match atlas9.ai exactly. --accent is the only
   thing that varies: the hub swaps it live, each trade page
   sets it once in its own <style>.
   ============================================================ */
:root{
  --bg:#FDFAF5; --card:#fff; --ink:#1B2430; --mut:#5B6472; --line:rgba(27,36,48,.1);
  --coral:#FF5A36; --cobalt:#2E4CFF; --sunny:#FFC728; --mint:#19C39C;
  --accent:#FF5A36;
  --shadow:0 30px 70px -28px rgba(27,36,48,.3);
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.65;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Outfit',sans-serif;letter-spacing:-.025em;line-height:1.06}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,56px)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,4vw,56px);transition:all .4s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(253,250,245,.9);backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line);padding-top:11px;padding-bottom:11px}
.logo{display:flex;align-items:center;gap:11px;filter:drop-shadow(0 1px 12px rgba(253,250,245,.95));transition:filter .35s}
nav.scrolled .logo{filter:none}
.logo .wm{height:36px;width:auto}
.ai-mark{position:relative;width:29px;height:29px;flex:none}
.ai-mark i{position:absolute;inset:0;border-radius:50%;border:2.5px solid transparent}
.ai-mark i:first-child{border-top-color:var(--accent);border-right-color:var(--accent);animation:sp 2.4s linear infinite;transition:border-color .6s}
.ai-mark i:nth-child(2){inset:5px;border-bottom-color:var(--cobalt);border-left-color:var(--cobalt);animation:sp 1.7s linear infinite reverse}
.ai-mark b{position:absolute;inset:9px;border-radius:50%;background:var(--accent);animation:pl 1.8s ease-in-out infinite;transition:background .6s}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes pl{0%,100%{transform:scale(.72);box-shadow:0 0 0 0 rgba(255,90,54,.45)}50%{transform:scale(1.05);box-shadow:0 0 0 7px rgba(255,90,54,0)}}
.nl{display:flex;gap:2px;font-size:.86rem;font-weight:500;color:var(--mut);text-shadow:0 1px 10px rgba(253,250,245,.9)}
nav.scrolled .nl{text-shadow:none}
.nl a{padding:8px 14px;border-radius:100px;transition:.25s}
.nl a:hover{color:var(--ink);background:rgba(27,36,48,.06)}
.nl a.here{color:var(--ink);font-weight:600}
@media(max-width:900px){nav{padding:11px 16px}}
/* ---------- mobile nav ----------
   .nl used to be display:none here with nothing offered in its place, which
   left every trade page with no navigation at all on a phone. Behaviour is in
   /assets/nav.js, shared with the homepage, pricing and about. */
.navburger{display:none;align-items:center;justify-content:center;flex:none;width:42px;height:42px;
  margin-left:6px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.75);
  color:var(--ink);cursor:pointer}
.navburger .ico-close{display:none}
.navburger.open .ico-open{display:none}
.navburger.open .ico-close{display:block}
@media(max-width:900px){
  .navburger{display:inline-flex}
  nav .btn{margin-left:auto}
  .nl{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:rgba(253,250,245,.98);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
    box-shadow:0 18px 36px -20px rgba(27,36,48,.45);padding:8px 16px 14px;text-shadow:none}
  .nl.open{display:flex}
  .nl a{padding:13px 8px;border-radius:10px;font-size:1rem;color:var(--ink);
    border-bottom:1px solid rgba(27,36,48,.06)}
  .nl a:last-child{border-bottom:none}
}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:14px 30px;border-radius:100px;
  font-family:'Outfit';font-weight:700;font-size:.94rem;background:var(--accent);color:#fff;border:none;cursor:pointer;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .3s,background .6s;
  box-shadow:0 12px 32px -12px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn:hover{transform:translateY(-3px)}
.btn.ghost{background:rgba(255,255,255,.78);color:var(--ink);border:1.5px solid var(--line);box-shadow:0 10px 30px -16px rgba(27,36,48,.4);backdrop-filter:blur(8px)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.sm{padding:11px 22px;font-size:.87rem}
/* The hero call button. A third option in .acts, deliberately NOT a third call
   to action: white rather than accent so it never competes with the mockup
   button. Shows the digits rather than the words "call us" — a contractor
   reads the number, and plenty will dial from a desk phone rather than tap. */
.btn.call{background:rgba(255,255,255,.92);color:var(--ink);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent);
  box-shadow:0 10px 30px -16px rgba(27,36,48,.4);backdrop-filter:blur(8px);gap:9px;white-space:nowrap}
.btn.call:hover{border-color:var(--accent)}
.btn.call svg{color:var(--accent);flex:none;transition:color .6s}
/* The nav is a logo and one button sharing one line, so it has to be sized for
   the narrowest phone, not the widest. At 360px this button was 149px next to a
   179px wordmark inside 328px of usable width, so it wrapped to two lines and
   sat on top of the logo. The homepage always had this second step-down; these
   pages did not, which is why the same button looked fine there and broken
   here.

   nowrap is the guarantee: this button must never wrap. If it ever stops
   fitting again it will overflow visibly rather than quietly restyle itself
   into a two-line block, and an obvious break gets fixed. */
@media(max-width:900px){nav .btn{padding:10px 18px;font-size:.83rem;white-space:nowrap}}
@media(max-width:412px){
  nav .btn{padding:9px 12px;font-size:.76rem}
  .logo .wm{height:28px}
  .logo{gap:8px}
  .ai-mark{width:24px;height:24px}
  .ai-mark i{border-width:2px}
  .ai-mark i:nth-child(2){inset:4px}
  .ai-mark b{inset:7px}
}
@media(max-width:360px){nav .btn{padding:8px 11px;font-size:.72rem}.logo .wm{height:25px}}

/* ---------- headers ---------- */
.head{position:relative;isolation:isolate;overflow:hidden}
.head>.inner{position:relative;z-index:3}
.head.full{min-height:100svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(28px,4vw,64px);padding:150px clamp(20px,4vw,56px) 100px}
.head.short{padding:170px 0 96px;text-align:center}
.head.short .inner{max-width:820px;margin:0 auto;padding:0 clamp(20px,5vw,56px)}
@media(max-width:1020px){.head.full{grid-template-columns:1fr;text-align:center;padding-top:126px;min-height:auto}}
@media(max-width:700px){.head.short{padding:140px 0 70px}}

.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--accent);background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:0 6px 22px -12px rgba(27,36,48,.3);
  border-radius:100px;padding:9px 20px;margin-bottom:26px;backdrop-filter:blur(8px);transition:color .6s}
.eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--mint);animation:pl 2.4s ease-in-out infinite}
.head h1{font-size:clamp(2.2rem,5.1vw,4.4rem);font-weight:900;margin-bottom:24px;text-shadow:0 2px 20px rgba(253,250,245,.7)}
/* the six trade pages now lead with the lost job, so their headlines are longer
   lines than the old "<Trade> websites that <verb>." pattern they replaced. The
   hub (.head.full) keeps the original size — its headline is still two words. */
.head.short h1{font-size:clamp(1.75rem,4.3vw,3.1rem);line-height:1.1}
.head h1 .hl{color:var(--accent);transition:color .6s}
.head .sub{color:#48525F;font-size:1.12rem;margin-bottom:34px;max-width:560px;
  text-shadow:0 1px 14px rgba(253,250,245,.95),0 1px 3px rgba(253,250,245,.9)}
.head.short .sub{margin-left:auto;margin-right:auto}
.acts{display:flex;gap:13px;flex-wrap:wrap}
.head.short .acts{justify-content:center}
@media(max-width:1020px){.head.full .sub{margin-left:auto;margin-right:auto}.head.full .acts{justify-content:center}}

/* line-mask entrance */
.ln{display:block;overflow:hidden}
.ln>i{display:block;font-style:normal;transform:translateY(105%);animation:lnUp 1s cubic-bezier(.16,1,.3,1) forwards}
@keyframes lnUp{to{transform:none}}
.fu{opacity:0;animation:fu .95s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fu{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* ---------- proof row ---------- */
.proof{display:flex;gap:clamp(18px,3vw,44px);margin-top:42px;padding-top:26px;border-top:1px solid var(--line)}
.head.short .proof{justify-content:center}
/* on the hub this row sits low enough to land on the dark treeline, past where
   the copy scrim has faded out — so it carries its own halo like the sub does */
.head .proof div b,.head .proof div span{text-shadow:0 1px 14px rgba(253,250,245,.98),0 1px 3px rgba(253,250,245,.95)}
.head .proof{border-top-color:rgba(27,36,48,.22)}
.proof div b{display:block;font-family:'Outfit';font-weight:800;font-size:1.6rem;line-height:1.15;letter-spacing:-.02em}
.proof div span{font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:#48525F}

/* ---------- sections ---------- */
section{position:relative;z-index:2}
.pad{padding:clamp(74px,9vw,118px) 0}
.kicker{display:inline-block;font-family:'Outfit';font-weight:700;font-size:.75rem;letter-spacing:.19em;text-transform:uppercase;color:var(--accent);margin-bottom:15px;transition:color .6s}
.h2{font-size:clamp(1.85rem,3.9vw,2.9rem);font-weight:800;margin-bottom:16px}
.h2 mark{background:none;color:var(--accent);transition:color .6s}
.lead{color:var(--mut);max-width:660px;font-size:1.05rem}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- browser frame ---------- */
.viewport{position:relative}
.frame{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);will-change:transform}
.frame .bar{height:36px;background:linear-gradient(#fff,#F6F1EA);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:7px;padding:0 14px}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:rgba(27,36,48,.16);display:block}
.frame .bar u{flex:1;height:17px;border-radius:9px;background:rgba(27,36,48,.06);margin-left:10px;text-decoration:none;
  display:flex;align-items:center;padding:0 10px;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--mut)}
.shots{position:relative;aspect-ratio:16/11.2;overflow:hidden;background:#fff}
.shots img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;opacity:0;transform:scale(1.05);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform 1.2s cubic-bezier(.2,.7,.2,1)}
.shots img.on{opacity:1;transform:scale(1)}
.sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);transform:translateX(-110%)}
.sheen.go{animation:sweep .85s cubic-bezier(.3,0,.4,1)}
@keyframes sweep{to{transform:translateX(110%)}}
.chip{position:absolute;z-index:6;display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:13px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border:1px solid var(--line);font-size:.78rem;font-weight:600;
  box-shadow:0 22px 46px -24px rgba(27,36,48,.4);white-space:nowrap}
.chip .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);animation:pl 2s ease-in-out infinite}
.ch1{top:-18px;left:-16px;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}

/* ---------- AI assistant card ---------- */
.assist{background:rgba(255,255,255,.92);backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:18px;
  padding:16px 18px;box-shadow:0 34px 70px -30px rgba(27,36,48,.45)}
.assist.float{position:absolute;right:-26px;bottom:-52px;width:min(316px,84%);z-index:5;animation:bob 8s ease-in-out infinite}
.assist .who{display:flex;align-items:center;gap:9px;font-size:.71rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);margin-bottom:11px}
.assist .who em{width:22px;height:22px;border-radius:50%;background:var(--accent);display:grid;place-items:center;font-style:normal;color:#fff;font-size:.66rem;font-weight:800;transition:background .6s}
.assist .q{font-size:.86rem;font-weight:600;margin-bottom:9px}
.assist .a{font-size:.86rem;color:var(--mut);min-height:3.2em}
.assist.typing .a::after{content:'';display:inline-block;width:2px;height:1em;background:var(--accent);margin-left:2px;vertical-align:-.14em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
@media(max-width:1020px){.assist.float{position:relative;right:0;bottom:0;width:100%;margin-top:18px;animation:none}}

/* ---------- trade switcher ---------- */
.switch{margin-bottom:32px}
.switch>span{display:block;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.pills{display:flex;gap:9px;flex-wrap:wrap}
.head.short .pills,.center .pills{justify-content:center}
/* A pill must never change size when it becomes active. If it does, the row
   reflows, the pills slide out from under the cursor, and hover fires on
   whichever pill lands there — that oscillation is a visible jump. So every
   pill always reserves the dot slot; only the dot's opacity changes, and only
   transform/colour/shadow animate. */
.pill{position:relative;padding:10px 19px 10px 26px;border-radius:100px;font-size:.86rem;font-weight:600;font-family:'Inter';
  background:rgba(255,255,255,.75);border:1.5px solid var(--line);cursor:pointer;backdrop-filter:blur(6px);color:var(--ink);
  transition:transform .3s cubic-bezier(.2,.7,.2,1),background .3s,color .3s,border-color .3s,box-shadow .3s}
.pill::before{content:'';position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
  background:var(--accent);opacity:0;transition:opacity .3s,background .6s}
.pill:hover{transform:translateY(-2px);border-color:rgba(27,36,48,.28)}
.pill.on{background:var(--ink);color:#fff;border-color:var(--ink);transform:translateY(-2px);box-shadow:0 12px 26px -14px rgba(27,36,48,.6)}
.pill.on::before{opacity:1}
/* The "any trade" pill. An anchor, not a button, and dashed so it reads as an
   invitation rather than a seventh trade — the row is a set of examples, not
   the menu. line-height is pinned because a button's default is `normal` and an
   anchor would otherwise inherit body's 1.65 and stand taller than its row. */
a.pill.more{display:inline-block;line-height:normal;padding-left:19px;border-style:dashed;
  border-color:rgba(27,36,48,.3);background:rgba(255,255,255,.5);color:var(--mut)}
a.pill.more::before{display:none}
a.pill.more:hover{background:rgba(255,255,255,.9);color:var(--ink);border-color:var(--accent)}

/* the word that swaps with the trade. inline-grid with both words in the SAME
   cell is what stops the jump: during a swap they overlap instead of both
   sitting in the inline flow and doubling the line width. */
.swap{position:relative;display:inline-grid;justify-items:start;vertical-align:top;color:var(--accent);
  transition:color .6s,width .42s cubic-bezier(.2,.7,.2,1)}
.swap>.word{grid-area:1/1;display:block;white-space:nowrap}
/* the outgoing word clears out faster than the incoming one arrives, so the
   two are never both near full opacity in the same grid cell */
.swap .word.out{animation:wOut .26s cubic-bezier(.4,0,1,1) forwards}
.swap .word.in{animation:wIn .42s .12s cubic-bezier(.16,1,.3,1) forwards}
@keyframes wOut{to{opacity:0;transform:translateY(-46%) rotateX(52deg);filter:blur(4px)}}
@keyframes wIn{from{opacity:0;transform:translateY(46%) rotateX(-52deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.swap::after{content:'';position:absolute;left:0;right:0;bottom:.06em;height:.09em;border-radius:99px;background:var(--accent);opacity:.28;transition:background .6s}
.swap-ruler{position:absolute;visibility:hidden;white-space:nowrap;pointer-events:none;top:0;left:0}
/* the sub copy changes per trade, so reserve its tallest case */
.head .sub.swaps{min-height:calc(3 * 1.6 * 1.12rem)}

/* ---------- cards / grids ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
@media(max-width:1020px){.grid3{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}}
@media(max-width:640px){.grid3{grid-template-columns:1fr}}

.tcard{position:relative;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 54px -32px rgba(27,36,48,.3);transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 36px 72px -34px rgba(27,36,48,.4)}
/* 2/1, not 16/10. These are full-page screenshots anchored at the top, so the
   thumb's aspect ratio IS the crop line: at 16/10 it cut 0.625 of the image
   width down the page, which lands past the hero on four of the six designs and
   straight through the middle of roofing's service-icon row. Every hero here
   ends between 0.519 and 0.706 of width, so 0.5 clears all of them and every
   card shows the same thing — nav and hero, cut at nothing. Re-measure before
   changing it if a screenshot is ever replaced. */
.tcard .thumb{aspect-ratio:2/1;overflow:hidden;border-bottom:1px solid var(--line);background:#F6F1EA}
/* Hover pans DOWN the page rather than zooming in. The old scale(1.05) showed
   LESS of the site the moment you leaned in to look at it, which is why the
   motion read as decoration. The image keeps its natural height and is clipped
   by .thumb, so there is real page below the fold to pan into. */
.tcard .thumb img{width:100%;height:auto;display:block;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.tcard:hover .thumb img{transform:translateY(-26%)}
.tcard .body{padding:22px 24px 26px}
.tcard h3{font-size:1.22rem;font-weight:800;margin-bottom:7px;display:flex;align-items:center;gap:9px}
.tcard h3 i{width:9px;height:9px;border-radius:50%;flex:none}
.tcard p{color:var(--mut);font-size:.92rem;margin-bottom:14px}
.tcard .go{font-family:'Outfit';font-weight:700;font-size:.88rem;display:inline-flex;align-items:center;gap:7px;transition:gap .25s}
.tcard:hover .go{gap:12px}
/* The "any trade" band spans the full row under the six cards. Full width, not
   a seventh cell: as a cell it would read as a seventh trade and leave an
   orphan in a three-column grid. Dashed, and it doesn't lift on hover — it's a
   statement with one button in it, not a card you click. */
.anytrade{grid-column:1/-1;scroll-margin-top:96px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:26px 30px 28px;background:rgba(255,255,255,.6);border-style:dashed;border-width:1.5px}
.anytrade:hover{transform:none;box-shadow:0 24px 54px -32px rgba(27,36,48,.3)}
.anytrade p{margin-bottom:0;max-width:720px}
.anytrade .btn{flex:none}

.feat{display:flex;gap:15px;padding:20px 0;border-bottom:1px solid var(--line)}
.feat:last-child{border-bottom:none}
.feat i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:.82rem;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);transition:background .6s,color .6s}
.feat h3{font-size:1.03rem;font-weight:700;margin-bottom:4px;font-family:'Outfit'}
.feat p{color:var(--mut);font-size:.94rem}

.qa{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;box-shadow:0 20px 46px -30px rgba(27,36,48,.28)}
.qa+.qa{margin-top:14px}
.qa .q{font-weight:700;margin-bottom:8px;display:flex;gap:10px}
.qa .q em{font-style:normal;color:var(--accent);font-weight:800;transition:color .6s}
.qa .a{color:var(--mut);font-size:.95rem;display:flex;gap:10px}
.qa .a em{font-style:normal;color:var(--mut);font-weight:800;flex:none}

/* ---------- strips ---------- */
.strip{background:var(--ink);color:#fff;padding:17px 0;overflow:hidden;white-space:nowrap;position:relative;z-index:3}
.tt{display:inline-flex;animation:tx 32s linear infinite}
.tt b{font-family:'Outfit';font-weight:700;font-size:.87rem;letter-spacing:.13em;text-transform:uppercase;padding:0 26px;color:rgba(255,255,255,.82)}
.tt b em{font-style:normal;color:var(--accent);margin-right:20px;transition:color .6s}
@keyframes tx{to{transform:translateX(-50%)}}

.otherTrades{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.otherTrades a{display:inline-flex;align-items:center;gap:9px;padding:10px 20px;border-radius:100px;background:#fff;
  border:1.5px solid var(--line);font-size:.88rem;font-weight:600;transition:.25s}
.otherTrades a:hover{transform:translateY(-2px);border-color:var(--ink)}
.otherTrades a i{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- CTA band ---------- */
.cta{background:var(--ink);color:#fff;border-radius:26px;padding:clamp(38px,5vw,64px);text-align:center;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(80px);opacity:.5;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,transparent),transparent 66%);top:-200px;right:-120px;transition:background .6s}
.cta>*{position:relative;z-index:2}
.cta h2{font-size:clamp(1.7rem,3.4vw,2.5rem);font-weight:800;margin-bottom:12px}
.cta p{color:rgba(255,255,255,.72);max-width:520px;margin:0 auto 26px}
/* The phone alternative beside the CTA button. Sits on the dark .cta panel, so
   it takes its own colours rather than inheriting .cta p's muted white. */
.cta .callline{color:rgba(255,255,255,.72);font-size:.92rem;margin:20px auto 0}
.cta .callline a{color:#fff;font-weight:700;white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.45)}
.cta .callline a:hover{border-bottom-color:#fff}

footer{padding:54px 0 64px;border-top:1px solid var(--line);margin-top:20px;color:var(--mut);font-size:.88rem}
footer .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
footer a:hover{color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .ln>i{transform:none}.reveal{opacity:1;transform:none}
}