/* ============================================================
   Rooted Coast Design — shared design system
   Single source of truth for the whole site. Edit here once,
   every page updates. LIGHT palette (sea fog) with the cyan accent;
   photo heroes stay dark plates. Decided 2026-09-02.
   ============================================================ */
:root{
  --ink:#F5F8FA; --ink-1:#FFFFFF; --panel:#FFFFFF; --panel-2:#EEF3F6;
  /* --cyan is the small-text accent (eyebrows, links, prices, the solid
     button's ground). #0083B0 measured 4.31:1 on white and 4.04:1 on the
     page, both under AA for text at these sizes. #00789F is the nearest
     value that clears 4.5 on BOTH surfaces (5.02 and 4.70) and is visually
     the same coastal cyan. */
  --cyan:#00789F; --cyan-2:#006E95; --cyan-deep:#00607F; --teal:#0f7b70;
  --head:#0B1418; --body:#3D525C; --muted:#5F7580; --faint:#627782;
  --line:rgba(0,120,159,.28); --line-soft:rgba(11,20,24,.09); --btn-fg:#FFFFFF;
  /* var(--ok) is 4.34:1 on white, under AA; #177a51 is 5.33:1 and the same green. */
  --ok:#177a51;
  /* dark plate: applied to photo heroes and any section that opts in with .plate */
  --plate-head:#EDF6FA; --plate-body:#C5D6DE; --plate-cyan:#5FE0FF; --plate-btn:#00C8FF; --plate-btn-fg:#04222b;
  --serif:'Playfair Display',Georgia,serif; --sans:'Inter',system-ui,sans-serif;
  --orb:'Orbitron',sans-serif; --script:'Allura',cursive;
  --wide:1160px; --s-sec:clamp(3rem,5.5vw,5rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--body);font-family:var(--sans);font-weight:400;line-height:1.7;-webkit-font-smoothing:antialiased}
/* height:auto so an <img> carrying width/height attributes (which it should,
   to reserve space and avoid layout shift) still scales by ratio instead of
   squashing to the literal attribute height. Class rules that set a real
   height, .hero-photo and the like, are more specific and still win. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{width:min(100% - 2.6rem,var(--wide));margin-inline:auto}
h1,h2,h3,h4{color:var(--head);margin:0;text-wrap:balance}
.eyebrow{font-family:var(--orb);font-weight:700;font-size:.64rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cyan)}
em{font-style:italic;color:var(--cyan)}
.btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.92rem;font-weight:600;letter-spacing:0;padding:.75rem 1.25rem;border-radius:8px;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;cursor:pointer;white-space:nowrap}
/* hover: a soft sheen sweeps across */
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .55s ease}
.btn:hover::after{transform:translateX(110%)}
.btn.solid{background:var(--cyan);color:var(--btn-fg);border-color:var(--cyan)}
.btn.solid:hover{background:var(--cyan-2);border-color:var(--cyan-2)}
.btn.ghost{background:#fff;color:var(--head);border-color:rgba(11,20,24,.16);box-shadow:0 1px 2px rgba(11,20,24,.05)}
.btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(0,120,159,.10) 50%,transparent 70%)}
.btn.ghost:hover{border-color:rgba(0,120,159,.45);background:rgba(0,120,159,.05)}
.btn.lg{font-size:1rem;padding:.9rem 1.5rem}

/* reveal at rest = visible; JS hides then reveals */
.rise{opacity:1}
@media (prefers-reduced-motion:reduce){.btn::after,.nlinks .cta::after{display:none}}
@media (prefers-reduced-motion:no-preference){
  .js .rise{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
  .js .rise.in{opacity:1;transform:none}
}

/* ---------------- LOCKUP ---------------- */
.lockup{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;text-decoration:none}
.lockup .mk{width:auto;height:44px;margin-bottom:3px}
.lockup .script{font-family:var(--script);font-size:1.5rem;line-height:.86;color:var(--head);-webkit-text-stroke:.4px var(--head)}
.lockup .word{font-family:var(--orb);font-weight:800;font-size:.52rem;letter-spacing:.42em;color:var(--cyan);margin-left:.21em;margin-top:1px}
/* nav: the Invoices site's lockup, measured off it and matched here.
   Mark on the left spanning both rows, script above the tracked word,
   the pair vertically centred against the mark. Their numbers exactly:
   38px mark, 10px column gap, 24px Allura at 1.05 line-height with a
   .6px stroke, then 9px Orbitron tracked 2.7px, nudged 1.35px right and
   1px down. Our mark is 714x645 rather than square, so it is set by
   height with width auto instead of a 38px box. */
nav .lockup{display:grid;grid-template-columns:auto auto;column-gap:10px;row-gap:0;align-items:center;justify-items:start;text-align:left}
nav .lockup .mk{grid-row:1 / span 2;width:auto;height:38px;margin:0}
nav .lockup .script{font-size:24px;line-height:1.05;margin-top:4px;-webkit-text-stroke:.6px var(--head)}
nav .lockup .word{font-size:9px;letter-spacing:2.7px;justify-self:center;margin-top:-4px;line-height:1.5;text-indent:2.7px}
@media(max-width:400px){
  nav .lockup{column-gap:8px}
  nav .lockup .mk{height:32px}
  nav .lockup .script{font-size:20px;margin-top:3px}
  nav .lockup .word{font-size:7.5px;letter-spacing:2.2px;margin-top:-3px;text-indent:2.2px}
}

/* ---------------- NAV ---------------- */
nav{position:sticky;top:0;z-index:50;background:rgba(245,248,250,.8);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line-soft)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
nav .wrap,footer .wrap{padding:0;max-width:none}
.nlinks{display:flex;gap:1.9rem;align-items:center;list-style:none;margin:0;padding:0}
.nlinks a{font-size:.875rem;font-weight:500;letter-spacing:0;color:rgba(11,20,24,.68);transition:color .18s}
.nlinks a:hover{color:var(--head)}
.nlinks li:has(.cta){margin-left:.4rem}
.nlinks .cta{background:var(--cyan);color:var(--btn-fg);padding:.5rem 1rem;border-radius:8px;font-weight:600;font-size:.84rem}
.nlinks .cta{position:relative;overflow:hidden;isolation:isolate}
.nlinks .cta::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-110%);transition:transform .55s ease}
.nlinks .cta:hover::after{transform:translateX(110%)}
.nlinks .cta:hover{background:var(--cyan-2);color:var(--btn-fg)}
/* burger: a quiet bordered tile that matches .btn.ghost, with lines that
   are deliberately uneven at rest, level out on hover, and fold into a
   clean X on open. The middle line collapses on its own axis rather than
   just fading, so the fold reads as one movement. */
.burger{display:none;flex-direction:column;gap:5px;width:42px;height:42px;align-items:center;justify-content:center;
  background:#fff;border:1px solid rgba(11,20,24,.16);border-radius:12px;cursor:pointer;padding:0;
  box-shadow:0 1px 2px rgba(11,20,24,.05);transition:border-color .2s,background .2s}
.burger:hover{border-color:rgba(0,120,159,.45);background:rgba(0,120,159,.05)}
.burger:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.burger span{display:block;width:20px;height:2px;background:var(--head);border-radius:2px;
  transition:transform .4s cubic-bezier(.2,.9,.25,1.1),opacity .18s ease,width .3s cubic-bezier(.2,.9,.25,1.1)}
.burger span:nth-child(2){width:13px}
.burger span:nth-child(3){width:16px}
.burger:hover span,.burger.on span{width:20px}
.burger.on{background:rgba(0,120,159,.07);border-color:rgba(0,120,159,.45)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){transform:scaleX(0);opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:flex;flex-direction:column;gap:.2rem;padding:1rem 1.3rem 1.5rem;background:rgba(245,248,250,.98);border-bottom:1px solid var(--line)}
.mobile-menu a{padding:.85rem .2rem;font-size:.9rem;letter-spacing:.03em;color:var(--body);border-bottom:1px solid var(--line-soft)}
@media (prefers-reduced-motion:no-preference){
  .mobile-menu:not([hidden]){animation:menuDrop .28s cubic-bezier(.2,.85,.3,1) both}
  .mobile-menu:not([hidden]) a{animation:menuItem .34s cubic-bezier(.2,.85,.3,1) both}
  .mobile-menu:not([hidden]) a:nth-child(1){animation-delay:.04s}
  .mobile-menu:not([hidden]) a:nth-child(2){animation-delay:.08s}
  .mobile-menu:not([hidden]) a:nth-child(3){animation-delay:.12s}
  .mobile-menu:not([hidden]) a:nth-child(4){animation-delay:.16s}
  .mobile-menu:not([hidden]) a:nth-child(5){animation-delay:.20s}
  .mobile-menu:not([hidden]) a:nth-child(6){animation-delay:.24s}
  .mobile-menu:not([hidden]) a:nth-child(7){animation-delay:.28s}
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes menuItem{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu .mcta{color:var(--cyan);font-weight:600}
[hidden]{display:none!important}

/* ---------------- HERO (photo) ---------------- */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,80vh,760px);display:flex;align-items:center;--head:var(--plate-head);--body:var(--plate-body);--cyan:var(--plate-cyan);--btn-fg:var(--plate-btn-fg)}
.hero .btn.solid{background:var(--plate-btn);border-color:var(--plate-btn)}
.hero .btn.solid:hover{background:var(--plate-btn);border-color:var(--plate-btn)}
.hero .btn.ghost{background:transparent;color:var(--plate-head);border-color:rgba(255,255,255,.22);box-shadow:none}
.hero .btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%)}
.hero .btn.ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center right;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(95deg,rgba(6,8,9,.96),rgba(6,8,9,.84) 36%,rgba(6,8,9,.34) 64%,rgba(6,8,9,.5)),linear-gradient(0deg,rgba(6,8,9,.78),transparent 44%)}
.hero-inner{position:relative;z-index:2;padding:clamp(3rem,7vw,5rem) 0}
.hero-copy{max-width:37rem}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.5rem,1rem+5vw,4.6rem);line-height:1.04;letter-spacing:-.015em;margin:1.2rem 0 0;text-wrap:balance}
/* the emphasised clause always starts its own line, so a headline reads as
   two deliberate lines instead of wrapping mid-phrase */
.hero h1 em{display:block}
/* .dual: the two-colour headline where the accent words, read on their own,
   also form a complete line. Needs the emphasis inline, so it opts out of
   the block treatment above. */
.hero h1.dual em{display:inline}
.hero-sub{font-size:1.1rem;font-weight:300;color:var(--body);max-width:34rem;margin:1.5rem 0 0;line-height:1.75}
.hero-act{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:2rem}
.hero-call{display:inline-block;margin-top:1.2rem;color:var(--cyan);font-size:.9rem;letter-spacing:.03em}
.trust{display:flex;flex-wrap:wrap;gap:.55rem;margin:2rem 0 0;padding:0;list-style:none}
.trust li{font-size:.72rem;color:var(--body);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);padding:.42rem .85rem;border-radius:30px}
.trust li::before{content:"\2713";color:var(--cyan);font-weight:700;margin-right:.45rem}

/* ---------------- SECTIONS ---------------- */
section{position:relative}
.sec{padding:var(--s-sec) 0}
.divide{border-top:1px solid var(--line-soft)}
.sec-head{max-width:42rem}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,1rem+2.6vw,3rem);margin:.7rem 0 0;line-height:1.1}
.sec-head p{margin:1.1rem 0 0;font-weight:300;font-size:1.05rem}

/* lanes */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.6rem}
.lane{display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line-soft);border-radius:16px;padding:30px 26px 28px;box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.25s}
.lane:hover{border-color:var(--line);transform:translateY(-4px);box-shadow:0 18px 40px rgba(11,20,24,.10)}
.lane .ic{width:50px;height:50px;border-radius:13px;background:rgba(0,120,159,.08);border:1px solid var(--line);display:grid;place-items:center;color:var(--cyan);margin-bottom:18px}
.lane h3{font-family:var(--serif);font-size:1.5rem;font-weight:700}
.lane p{font-size:.93rem;font-weight:300;margin:.7rem 0 0;flex:1}
.lane .foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.4rem;padding-top:1.1rem;border-top:1px solid var(--line-soft)}
.lane .from{font-family:var(--orb);font-size:.66rem;letter-spacing:.06em;color:var(--cyan)}
.lane .go{font-size:.88rem;font-weight:600;color:var(--cyan)}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:2.6rem}
.step{padding:22px 20px;border:1px solid var(--line-soft);border-radius:14px;background:var(--ink-1)}
.step .n{font-family:var(--orb);font-size:.7rem;color:var(--cyan);letter-spacing:.1em}
.step h4{font-family:var(--serif);font-size:1.15rem;margin:.5rem 0 0}
.step p{font-size:.85rem;font-weight:300;margin:.4rem 0 0}

/* clients (case-study rows) */
.clients-rows{margin-top:2.6rem}
.crow{display:grid;grid-template-columns:340px 1fr auto;gap:30px;align-items:center;border:1px solid var(--line-soft);border-radius:16px;background:var(--panel);padding:20px;box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.25s}
.crow + .crow{margin-top:18px}
.crow:hover{border-color:var(--cyan);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,20,24,.10)}
.crow .shot{position:relative;border-radius:11px;overflow:hidden;border:1px solid var(--line-soft);background:#E6EDF1;aspect-ratio:16/9}
.crow .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.crow .shot .live{position:absolute;top:10px;left:10px;font-family:var(--orb);font-size:.52rem;letter-spacing:.1em;color:var(--ok);background:rgba(255,255,255,.9);padding:3px 7px;border-radius:20px}
.crow .cinfo{display:flex;flex-direction:column}
.crow .nm{font-family:var(--serif);color:var(--head);font-size:1.5rem}
.crow .role{font-size:.95rem;color:var(--body);margin-top:.4rem}
.crow .loc{font-family:var(--orb);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:.7rem}
.crow .go{font-size:.88rem;font-weight:600;color:var(--head);white-space:nowrap;border:1px solid rgba(11,20,24,.16);background:#fff;padding:.65rem 1.1rem;border-radius:8px;transition:.2s}
.crow:hover .go{border-color:var(--cyan)}

/* review */
.review{text-align:center}
.review .q{font-family:var(--serif);font-size:3.4rem;line-height:.1;color:var(--cyan);opacity:.35}
.review blockquote{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--head);font-size:clamp(1.4rem,1rem+1.5vw,2.15rem);line-height:1.4;max-width:46rem;margin:1.4rem auto 0}
.review .stars{color:var(--cyan);letter-spacing:.3em;margin-top:1.5rem}
.review .who{font-family:var(--orb);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-top:.8rem}
.review .src{font-size:.72rem;color:var(--muted);margin-top:.3rem}

/* software band */
/* dark plate section */
.sec.plate,.close.plate{background:#0B1418}
.plate{--head:var(--plate-head);--body:var(--plate-body);--cyan:var(--plate-cyan);--btn-fg:var(--plate-btn-fg);--muted:#8fa3ad;--line-soft:rgba(255,255,255,.09);color:var(--body)}
.plate .btn.solid{background:var(--plate-btn);border-color:var(--plate-btn)}
.plate .btn.solid:hover{background:var(--plate-btn);border-color:var(--plate-btn)}
.plate .sec-head h2,.plate .sec-head p{color:inherit}
.plate .sec-head h2{color:var(--plate-head)}
.plate .btn.ghost{background:transparent;color:var(--plate-head);border-color:rgba(255,255,255,.22);box-shadow:none}
.plate .btn.ghost::after{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 50%,transparent 70%)}
.plate .btn.ghost:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.soft{position:relative;overflow:hidden;background:radial-gradient(110% 130% at 88% -10%,rgba(0,200,255,.18),transparent 55%),linear-gradient(180deg,#0b1215,#080b0d)}
.soft-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding:var(--s-sec) 0}
.soft h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,1rem+2.6vw,3rem);margin:.7rem 0 0}
.soft p{font-weight:300;margin:1.1rem 0 0;max-width:32rem}
.soft .exs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.soft .exs span{font-size:.72rem;color:var(--body);border:1px solid var(--line-soft);padding:.38rem .75rem;border-radius:30px}
.soft .act{margin-top:1.7rem;display:flex;gap:.8rem;flex-wrap:wrap}
.inv{background:#fbfcfd;border-radius:14px;padding:22px;color:#0c1417;box-shadow:0 30px 60px rgba(0,0,0,.5);max-width:350px;margin-left:auto;transform:rotate(-1.4deg);font-size:.82rem}
.inv .top{display:flex;justify-content:space-between;border-bottom:1px solid #e5eaed;padding-bottom:11px}
.inv .biz{font-family:var(--orb);font-weight:800;font-size:.7rem;color:#0a1418}
.inv .num{font-size:.66rem;color:#7d8b92}
.inv .paid{background:#e6f8f0;color:var(--ok);font-weight:700;font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:20px;height:fit-content}
.inv .li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed #eef1f3;color:#33454d}
.inv .li b{color:#12222a;font-variant-numeric:tabular-nums}
.inv .tot{display:flex;justify-content:space-between;padding-top:11px;font-weight:800;font-size:1rem;color:#0a1418}
.inv .tot b{font-variant-numeric:tabular-nums}
.inv .pay{margin-top:13px;background:var(--cyan-deep);color:#fff;text-align:center;padding:11px;border-radius:7px;font-weight:700;font-size:.74rem;letter-spacing:.04em}

/* stats */
.why{background:var(--ink-1);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:var(--s-sec) 0}
.stat{text-align:center}
.stat .n{font-family:var(--serif);font-weight:900;font-size:clamp(2rem,1rem+2vw,2.7rem);color:var(--cyan);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-size:.76rem;color:var(--muted);margin-top:.6rem;letter-spacing:.03em}

/* close */
.close{text-align:center;padding:var(--s-sec) 0}
.close h2{font-family:var(--serif);font-weight:900;font-size:clamp(2.2rem,1rem+4.4vw,4rem);line-height:1.04}
.close p{max-width:34rem;margin:1.2rem auto 0;font-weight:300}
.close .act{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:2.2rem}
/* three steps under a close CTA, so the band is never a blank field */
.next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.8rem;text-align:left}
.next div{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.next .n{font-family:var(--orb);font-size:.66rem;letter-spacing:.1em;color:var(--cyan)}
.next b{display:block;font-size:.98rem;font-weight:600;color:var(--head);margin-top:.45rem}
.next span{display:block;font-size:.88rem;color:var(--body);margin-top:.3rem;line-height:1.6}
.plate .next div{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:none}
/* Step cards inherit their text colours from .plate, which redefines --head,
   --body and --line-soft. Only the white card fill needs overriding. */
.plate .step{background:rgba(255,255,255,.04);box-shadow:none}
@media(max-width:760px){.next{grid-template-columns:1fr;gap:12px}}

/* footer: dark plate */
footer{background:#0B1418;color:var(--plate-body);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;align-items:start}
/* same lockup construction as the nav, on the dark plate */
.fbrand .lockup{display:inline-grid;grid-template-columns:auto auto;column-gap:10px;align-items:center;justify-items:start;text-align:left}
.fbrand .lockup .mk{grid-row:1 / span 2;width:auto;height:38px;margin:0}
.fbrand .lockup .script{font-size:24px;line-height:1.05;margin-top:4px;color:#fff;-webkit-text-stroke:.6px #fff}
.fbrand .lockup .word{font-size:9px;letter-spacing:2.7px;justify-self:center;margin-top:-4px;line-height:1.5;text-indent:2.7px;color:var(--plate-cyan)}
.fg .tag{font-size:.9rem;line-height:1.65;color:#8fa3ad;margin:1.1rem 0 0;max-width:22rem}
.fcta{display:inline-block;margin-top:1.1rem;font-size:.9rem;font-weight:600;color:var(--plate-cyan)}
.fcta:hover{color:#fff}
.fcol h3,.fcol h4{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:.3rem 0 .9rem}
.fcol a,.fcol .fplain{display:block;font-size:.9rem;padding:.3rem 0;color:#b7c7cf}
.fcol a:hover{color:#fff}
.fcol .fplain{color:#8fa3ad}
.fbar{border-top:1px solid rgba(255,255,255,.09);margin-top:2.6rem;padding-top:1.3rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.78rem;color:#7E929C}

@media(max-width:900px){
  .hero-grid,.soft-in{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .stat-grid{grid-template-columns:1fr 1fr;gap:26px}
  .nlinks{display:none}
  .burger{display:flex}
  .inv{margin:0 auto;transform:none}
  .fg{grid-template-columns:1fr 1fr;gap:32px}
  .fbrand{grid-column:1 / -1}
}
@media(min-width:901px){.mobile-menu{display:none}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.fg{gap:24px}.fcol:last-child{grid-column:1 / -1}}
@media(max-width:760px){.crow{grid-template-columns:1fr;gap:16px}.crow .go{justify-self:start}}

/* ---------------- SHOP ---------------- */
.shop-hero{min-height:clamp(480px,62vh,600px);text-align:center}
.shop-hero .hero-photo{object-position:center 55%}
.shop-hero .hero-scrim{background:linear-gradient(180deg,rgba(6,8,9,.62),rgba(6,8,9,.5) 45%,rgba(6,8,9,.72))}
.shop-hero .hero-copy{max-width:46rem;margin-inline:auto}
.shop-hero h1{font-size:clamp(2.3rem,1rem+4vw,3.9rem);margin-top:1rem}
.shop-hero .hero-sub{margin-inline:auto}
.shop-hero .hero-act,.shop-hero .trust{justify-content:center}
/* Shop hero, phones: keep the two buttons on one row. Stacked they made the
   copy block tall enough to push the headline up into the busy, bright top of
   the photo; on one row the whole block centres lower, over the calm dark
   middle. The trust chips below deliberately sit over the objects. */
/* Shop hero on phones: crop the top off the photo.
   The mobile image is 1400x2508 — proportionally taller than the hero box — so
   object-fit:cover fits the full height and crops the sides, which means
   object-position does nothing vertically and the whole photo always shows.
   The scattered phones and cards occupy the top two-thirds; the calm dark area
   sits at roughly 40-65% down. Making the photo 128% of the hero and anchoring
   it to the bottom pushes that top ~22% above the hero's overflow:hidden edge,
   so the headline and sub land on clear background instead of on the objects.
   Text and buttons keep their full size — only the photo moves. */
@media(max-width:560px){
  .shop-hero .hero-photo{height:128%;top:auto;bottom:0;object-position:center}
}
.trust.light{margin-top:1.8rem}
.trust.light li{background:#fff;border-color:var(--line-soft);color:var(--body)}
.lane-nav{position:sticky;top:64px;z-index:40;background:rgba(245,248,250,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.lane-nav .wrap{display:flex;gap:.25rem;justify-content:center}
.lane-nav a{padding:.85rem 1rem;font-size:.9rem;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.18s}
.lane-nav a:hover{color:var(--head)}
.lane-nav a.on{color:var(--cyan);border-color:var(--cyan)}
.shop .sec-head{max-width:46rem}
.shop .dim{color:var(--muted);font-weight:400}
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
.price b{font-family:var(--serif);font-weight:700;font-size:2rem;color:var(--head);line-height:1;letter-spacing:-.01em}
.price span{font-size:.82rem;color:var(--muted)}
.price.big b{font-size:2.8rem}
.inc{list-style:none;margin:0;padding:0}
.inc li{position:relative;padding:.38rem 0 .38rem 1.5rem;font-size:.92rem;color:var(--body);border-bottom:1px solid var(--line-soft)}
.inc li:last-child{border-bottom:none}
.inc li::before{content:"";position:absolute;left:0;top:.72rem;width:15px;height:15px;border-radius:50%;background:rgba(0,120,159,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300789F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");background-size:9px;background-position:center;background-repeat:no-repeat}
.inc.two{columns:2;column-gap:2rem}
.inc.two li{break-inside:avoid}
.btn.wide{width:100%;justify-content:center}
.btn.added{background:rgba(23,122,81,.1);color:var(--ok);border-color:rgba(23,122,81,.3)}
.btn.added::after{display:none}
/* tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.6rem;align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:28px 26px 26px;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.tier.hot{border-color:rgba(0,120,159,.45);box-shadow:0 18px 40px rgba(0,120,159,.10)}
.badge{position:absolute;top:-12px;left:26px;background:var(--cyan);color:#fff;font-size:.68rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.3rem .7rem;border-radius:20px}
.tier h3,.plan h4{font-family:var(--serif);font-size:1.45rem;font-weight:700;margin:0}
.tier-for{font-size:.92rem;color:var(--body);margin:.6rem 0 0;min-height:4.4rem}
.tier .price{margin:1.2rem 0 1.1rem}
.tier .inc{flex:1}
.tier-meta{display:flex;justify-content:space-between;gap:.6rem;font-size:.76rem;color:var(--muted);margin:1.1rem 0 1rem;padding-top:.9rem;border-top:1px solid var(--line-soft)}
.tier-alt{display:block;width:100%;margin-top:.7rem;background:none;border:none;font:inherit;font-size:.8rem;color:var(--cyan);cursor:pointer;text-align:center;padding:.3rem 0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(0,120,159,.35)}
.tier-alt.added{color:var(--ok);text-decoration:none}
/* strip (reskin) */
.strip{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;margin-top:20px;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:26px 28px}
.strip h3{font-family:var(--serif);font-size:1.35rem;margin:0}
.strip p{margin:.5rem 0 0;font-size:.92rem;max-width:52rem}
.strip-act{display:flex;align-items:center;gap:1.4rem;white-space:nowrap}
/* bundle */
.bundle{display:grid;grid-template-columns:1.4fr 1fr;gap:2.5rem;margin-top:20px;background:linear-gradient(135deg,#fff,#EEF3F6);border:1px solid rgba(0,120,159,.3);border-radius:18px;padding:34px 36px;align-items:center}
.bundle h3{font-family:var(--serif);font-size:1.9rem;margin:.5rem 0 0}
.bundle p{margin:.7rem 0 1rem;max-width:34rem}
.bundle-buy{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:24px;text-align:center}
.bundle .was{font-size:.82rem;color:var(--muted);text-decoration:line-through}
.bundle .price{justify-content:center;margin:.3rem 0 .4rem}
.bundle .price span{color:var(--ok);font-weight:600}
.bundle .fine{font-size:.78rem;color:var(--muted);margin-bottom:1rem}
/* sub heads */
.sub-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-top:clamp(3rem,6vw,4.5rem)}
.sub-head h3{font-family:var(--serif);font-size:1.7rem;margin:0}
.sub-head p{margin:.5rem 0 0;max-width:40rem;font-size:.95rem}
.seg{display:inline-flex;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:3px}
.seg button{background:none;border:none;font:inherit;font-size:.84rem;font-weight:500;color:var(--muted);padding:.5rem .9rem;border-radius:8px;cursor:pointer;transition:.18s}
.seg button small{font-size:.68rem;color:var(--ok);font-weight:600;margin-left:.25rem}
.seg button.on{background:var(--head);color:#fff}
.seg button.on small{color:#9be3c0}
/* care */
.care{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:1.6rem}
.plan{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:26px 24px 24px}
.plan.hot{border-color:rgba(0,120,159,.45)}
.plan .price{margin:.9rem 0 1rem}
.plan .price b{font-size:1.9rem}
.plan .inc{flex:1;margin-bottom:1.2rem}
/* add-ons */
.addons{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addon{display:grid;grid-template-columns:1fr auto auto;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:12px;padding:14px 16px}
.addon b{display:block;font-size:.95rem;color:var(--head);font-weight:600}
.addon span{display:block;font-size:.8rem;color:var(--muted);margin-top:.15rem}
.addon em{font-style:normal;font-weight:600;color:var(--head);white-space:nowrap;font-size:.92rem}
.addon-add{font:inherit;font-size:.82rem;font-weight:600;color:var(--cyan);background:rgba(0,120,159,.08);border:1px solid transparent;border-radius:8px;padding:.45rem .85rem;cursor:pointer;transition:.18s}
.addon-add:hover{background:rgba(0,120,159,.14)}
.addon.locked{opacity:.55}
.addon.locked .addon-add{color:var(--muted);background:rgba(11,20,24,.05);cursor:not-allowed}
.addon.added .addon-add{color:var(--ok);background:rgba(23,122,81,.1)}
/* print */
.print-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.6rem}
.pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;transition:.25s}
.pcard:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,20,24,.08)}
.pimg{aspect-ratio:4/3;background:#E6EDF1;overflow:hidden}
.pimg img,.pimg svg{width:100%;height:100%;object-fit:cover;display:block}
.pbody{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.pbody h3{font-family:var(--serif);font-size:1.25rem;margin:0}
.pbody p{font-size:.88rem;margin:.5rem 0 0;flex:1}
.pbody .price{margin:1rem 0 1rem}
.pbody .price b{font-size:1.6rem}
.plate-price{margin-top:1.4rem}
.plate-price b{color:#fff}
.plate-price span{color:#8fa3ad}
/* toast */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--head);color:#fff;padding:.8rem 1.1rem;border-radius:12px;font-size:.9rem;display:flex;gap:1rem;align-items:center;box-shadow:0 16px 40px rgba(11,20,24,.25);z-index:90;transition:.25s}
#toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
#toast a{color:var(--plate-cyan);font-weight:600;white-space:nowrap}
#toast.warn{background:#7a3b0a}
@media(max-width:900px){.print-grid{grid-template-columns:1fr}}
@media(max-width:900px){.tiers,.care{grid-template-columns:1fr}.tier-for{min-height:0}.bundle{grid-template-columns:1fr}.strip{grid-template-columns:1fr}.strip-act{white-space:normal}.addons{grid-template-columns:1fr}.lane-nav{top:64px}}
@media(max-width:560px){.print-grid{grid-template-columns:1fr}.inc.two{columns:1}.lane-nav a{padding:.8rem .7rem;font-size:.84rem}.sub-head{align-items:flex-start}}

/* product shots: real screenshots of Rooted Coast Invoices in a browser frame */
.soft-in.app{grid-template-columns:.85fr 1.15fr}
.shots{background:#0f1a1f;border-radius:14px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.shots-chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#fff;border-bottom:1px solid #E3EBE9}
.shots-chrome span{width:9px;height:9px;border-radius:50%;background:#DDE5E3}
.shots-chrome i{font-style:normal;margin-left:10px;font-size:10px;color:#8A9C99;background:#F1F5F4;padding:3px 10px;border-radius:6px;flex:1;text-align:center;font-family:var(--sans)}
.shots-stage{position:relative;aspect-ratio:1600/833;background:#F7F9F8;overflow:hidden}
.shots-stage .shot{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .6s ease;pointer-events:none;border:none;border-radius:0;background:none;aspect-ratio:auto}
.shots-stage .shot.on{opacity:1;pointer-events:auto}
.shots-stage .shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.shots-stage .shot figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;background:rgba(11,20,24,.86);backdrop-filter:blur(8px);color:#fff;padding:.65rem .9rem;border-radius:9px;font-size:.8rem;line-height:1.35}
.shots-stage .shot figcaption b{font-weight:600;white-space:nowrap}
.shots-stage .shot figcaption span{color:#b7c7cf}
.shots-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:8px 10px;background:#0B1418}
.shots-btn{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;transition:.18s}
.shots-btn svg{width:16px;height:16px}
.shots-btn:hover{background:rgba(255,255,255,.12)}
.shots-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.shots-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:none;background:rgba(255,255,255,.22);cursor:pointer;transition:.2s}
.shots-dots button.on{background:var(--plate-cyan);transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.shots-stage .shot{transition:none}}
@media(max-width:900px){.soft-in.app{grid-template-columns:1fr}.shots-stage .shot figcaption{font-size:.74rem;padding:.5rem .7rem}}

/* ---------------- CITY PAGES ---------------- */
.city-hero{min-height:clamp(520px,72vh,680px)}
.city-hero .hero-photo{object-position:center 40%}
.city-hero .hero-copy{max-width:40rem}
.city-hero h1{font-size:clamp(2.2rem,1rem+4.2vw,4rem)}
.city-hero .trust li b{color:var(--plate-cyan);font-weight:600}
.city-lede{padding-bottom:0}
.city-lede .lede{font-size:clamp(1.15rem,1rem+.7vw,1.45rem);font-weight:300;line-height:1.65;color:var(--head);max-width:52rem;margin:0}
.city .sec-head{max-width:52rem}
.city .sec-head p{font-size:1rem;color:var(--body);margin-top:1rem;line-height:1.75}
.city .sec-head p a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.chips span{font-size:.82rem;color:var(--body);background:#fff;border:1px solid var(--line-soft);padding:.45rem .85rem;border-radius:30px}
.lane[href]{color:inherit}
.lanes-note{margin:1.4rem 0 0;font-size:.9rem;color:var(--muted)}
.lanes-note a{color:var(--cyan);font-weight:600}
.why-steps .step p{margin:0;font-size:.92rem;font-weight:400;color:var(--body)}
/* A bold lead-in is a heading, not inline emphasis. Scoped to the grids that
   actually use the pattern — city-page steps put the <b> inside a <p> as a
   run-in and should stay that way. */
.why-steps .step b,.steps.prose .step b,.steps.three .step b{display:block;color:var(--head);font-family:var(--serif);font-size:1.1rem;font-weight:700;line-height:1.25;margin-bottom:.45rem;text-wrap:balance}
.meet{margin:1.6rem 0 0;max-width:52rem;color:var(--body)}
.faq{margin-top:1.6rem;max-width:52rem;border-top:1px solid var(--line-soft)}
.faq .qa{border-bottom:1px solid var(--line-soft)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.05rem 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--cyan);flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq h3{font-family:var(--serif);font-size:1.12rem;font-weight:700;margin:0}
.faq p{margin:0 0 1.2rem;color:var(--body);font-size:.95rem;line-height:1.7}
.faq p a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
/* two column FAQ so a long list does not leave half the row empty */
.faq.two{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,4vw,3.5rem);border-top:none}
.faq.two .qa{border-top:1px solid var(--line-soft)}
@media(max-width:820px){.faq.two{grid-template-columns:1fr}}
@media(max-width:900px){.why-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.why-steps{grid-template-columns:1fr}}

/* ---------------- SERVICE AREAS ---------------- */
.areas-hero{padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.areas-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,1rem+3.4vw,3.4rem);line-height:1.08;margin:.7rem 0 0;max-width:20ch}
.areas-hero .hero-act{margin-top:2.2rem}
.area-group + .area-group{margin-top:2.6rem}
.area-group h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 1rem}
.areas{display:flex;flex-wrap:wrap;gap:10px}
.area{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:.7rem 1.05rem;font-size:.92rem;font-weight:500;color:var(--head);box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.18s}
.area:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:0 10px 22px rgba(11,20,24,.08)}
.areas-note{margin:2.6rem 0 0;color:var(--muted);font-size:.95rem;max-width:46rem}
.areas-note a{color:var(--cyan);font-weight:600}

/* ---------------- SERVICES ---------------- */
/* services now uses the photo hero, so it only needs the h1 sizing */
.svc-hero{min-height:clamp(500px,66vh,640px)}
.svc-hero .hero-photo{object-position:center 55%}
.svc-hero h1{font-size:clamp(2.1rem,1rem+3.6vw,3.6rem);line-height:1.07;margin:.7rem 0 0;max-width:18ch}
.svc-hero .hero-act{margin-top:2rem}
.svc-act{display:flex;align-items:center;gap:1rem 1.2rem;flex-wrap:wrap;margin-top:1.8rem}
.svc-from{font-size:.86rem;color:var(--muted)}
.svc-text{margin:.9rem 0 0;font-size:.88rem}
.svc-text a{color:var(--cyan);font-weight:600}
.caps{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:2rem}
.cap{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:22px 22px 20px;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.cap h3{font-family:var(--serif);font-size:1.15rem;margin:0}
.cap p{font-size:.9rem;margin:.5rem 0 0;color:var(--body)}
.cap.wide{grid-column:1 / -1}
.cap-tag{display:inline-block;font-family:var(--sans);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan);margin-bottom:.5rem}
.plate .cap{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.09);box-shadow:none}
.plate .cap p{color:var(--plate-body)}
.quote-note{margin:1.6rem 0 0;max-width:52rem;font-size:.92rem;color:var(--body);border-left:2px solid var(--line);padding-left:1rem}
.quote-note b{color:var(--head)}
@media(max-width:760px){.caps{grid-template-columns:1fr}}

/* ---------------- ABOUT ---------------- */
.about-hero{min-height:clamp(520px,68vh,660px)}
.about-hero .hero-photo{object-position:center 60%}
.about-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,1rem+3.6vw,3.7rem);line-height:1.08;margin:.8rem 0 0}
.about-split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.about-pics{display:grid;gap:16px}
.about-pics img{width:100%;height:100%;object-fit:cover;border-radius:14px;border:1px solid var(--line-soft);aspect-ratio:4/3;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.statement{padding:clamp(3rem,7vw,5rem) 0;background:#0B1418;text-align:center}
.statement h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,1rem+2.6vw,3rem);line-height:1.15;max-width:22ch;margin:0 auto}
.statement p{color:#b7c7cf;max-width:44rem;margin:1.2rem auto 0;font-weight:300}
.facts{margin:2.4rem 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fact{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:26px 24px 24px;box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.25s}
.fact:hover{border-color:var(--line);transform:translateY(-3px);box-shadow:0 18px 40px rgba(11,20,24,.08)}
.fact-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:rgba(0,120,159,.08);border:1px solid var(--line);color:var(--cyan);margin-bottom:16px}
.fact h3{font-family:var(--serif);font-size:1.2rem;font-weight:700;margin:0}
.fact p{margin:.55rem 0 0;color:var(--body);font-size:.92rem;line-height:1.7}
.band{position:relative;overflow:hidden;min-height:clamp(360px,44vh,460px);display:flex;align-items:center;text-align:center}
.band-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,8,9,.72),rgba(6,8,9,.6) 50%,rgba(6,8,9,.78))}
.band-in{position:relative;z-index:2;padding:clamp(2.5rem,6vw,4rem) 0}
.band-in h2{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,1rem+2.2vw,2.6rem);color:var(--plate-head)}
.band-in p{color:var(--plate-body);max-width:44rem;margin:1rem auto 1.6rem;font-weight:300}
.band-in .btn.ghost{background:transparent;color:var(--plate-head);border-color:rgba(255,255,255,.28);box-shadow:none}
.band-in .btn.ghost:hover{border-color:rgba(255,255,255,.55)}
@media(max-width:1000px){.facts{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.about-split{grid-template-columns:1fr}.about-pics{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.facts{grid-template-columns:1fr}}

/* ---------------- PROCESS ---------------- */
/* process uses the photo hero; the art is a wide, near-black band so it is
   anchored low and kept dark enough for the copy to sit anywhere on it. */
.proc-hero{min-height:clamp(480px,62vh,600px)}
.proc-hero .hero-photo{object-position:center 70%}
.proc-hero h1{font-size:clamp(2.1rem,1rem+3.6vw,3.6rem);line-height:1.07;margin:.7rem 0 0;max-width:18ch}
.proc-hero .hero-act{margin-top:2rem}
.timeline{list-style:none;margin:2.6rem 0 0;padding:0;position:relative}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan),rgba(0,120,159,.12))}
.tl-item{position:relative;display:grid;grid-template-columns:40px 1fr;gap:1.4rem;padding-bottom:2rem}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--cyan);color:#fff;font-family:var(--orb);font-weight:700;font-size:.9rem}
.tl-day{display:inline-block;font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);background:rgba(0,120,159,.08);padding:.3rem .7rem;border-radius:20px}
.tl-body h3{font-family:var(--serif);font-size:1.35rem;margin:.7rem 0 0}
.tl-list{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.1rem}
.tl-list li{position:relative;padding:.3rem 0 .3rem 1.5rem;font-size:.93rem;color:var(--body)}
.tl-list li::before{content:"";position:absolute;left:0;top:.72rem;width:15px;height:15px;border-radius:50%;background:rgba(0,120,159,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300789F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E");background-size:9px;background-position:center;background-repeat:no-repeat}
.tl-note{margin:1.1rem 0 0;font-size:.88rem;color:var(--muted);background:#fff;border:1px solid var(--line-soft);border-radius:10px;padding:.75rem 1rem}
.tl-note a{color:var(--cyan);font-weight:600;white-space:nowrap}
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.4rem}
.ocard{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:24px 22px 22px}
.ocard-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(95,224,255,.12);color:var(--plate-cyan);margin-bottom:14px}
.ocard-ic svg{width:20px;height:20px}
.ocard-tier{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--plate-cyan);margin-bottom:.5rem}
.ocard h3{font-family:var(--serif);font-size:1.2rem;margin:0;color:var(--plate-head)}
.ocard p{margin:.5rem 0 0;font-size:.9rem;color:var(--plate-body)}
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:2.4rem}
.tool{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:22px}
.tool-role{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
.tool h3{font-family:var(--serif);font-size:1.15rem;margin:.5rem 0 0}
.tool p{margin:.5rem 0 0;font-size:.9rem;color:var(--body)}
@media(max-width:1000px){.ocards,.tools{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ocards,.tools{grid-template-columns:1fr}.tl-item{gap:1rem}}

/* ---------------- PORTFOLIO (Work) ---------------- */
.port-hero{min-height:clamp(540px,74vh,700px)}
.port-hero .hero-photo{object-position:center right}
.port-hero h1{font-size:clamp(2.3rem,1rem+4.4vw,4.2rem)}
.crow.deep{grid-template-columns:340px 1fr auto;align-items:start}
.crow.deep .cinfo{padding-top:.2rem}
.crow .desc{font-size:.93rem;color:var(--body);margin-top:.7rem;line-height:1.65;max-width:38rem}
.crow .meta{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}
.crow .meta span{font-size:.74rem;color:var(--body);background:var(--panel-2);border:1px solid var(--line-soft);padding:.3rem .65rem;border-radius:20px}
.crow .meta span b{color:var(--head);font-weight:600}
.crow.deep .go{align-self:center}
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2.4rem}
.quote{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:26px 26px 24px;box-shadow:0 1px 2px rgba(11,20,24,.04);display:flex;flex-direction:column}
.quote .stars{color:var(--cyan);letter-spacing:.2em;font-size:.9rem}
.quote blockquote{font-family:var(--serif);font-style:italic;font-weight:600;color:var(--head);font-size:1.15rem;line-height:1.5;margin:.9rem 0 0;flex:1}
.quote .who{display:block;font-family:var(--sans);font-size:.98rem;font-weight:600;letter-spacing:0;color:var(--head);margin-top:1.3rem}
.quote .src{display:block;font-size:.76rem;color:var(--muted);margin-top:.25rem}
.quote .src a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.trades{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:2.4rem}
.trade{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:24px 24px 22px;box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.25s}
.trade:hover{border-color:var(--line);box-shadow:0 18px 40px rgba(11,20,24,.08)}
.trade h3{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0}
.trade .pills{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 0 0;padding:0;list-style:none}
.trade .pills li{font-size:.86rem;font-weight:500;color:var(--head);background:var(--panel-2);border:1px solid var(--line-soft);padding:.42rem .8rem;border-radius:30px}
.trade p{margin:1rem 0 0;font-size:.88rem;color:var(--body);line-height:1.65}
.steps.three{grid-template-columns:repeat(3,1fr)}
/* Long-form step cards — a heading plus a full paragraph. Four across squeezes
   them into unreadable columns; two is the right measure. Short numbered steps
   keep the 4-up .steps default. */
.steps.prose{grid-template-columns:repeat(2,1fr)}
/* Spec sheet: a term and its one-line definition, hairline separated. Used on
   the dark plate where a grid of prose cards would read as a wall. */
.specsheet{margin:2.6rem 0 0;display:grid;gap:0}
.specrow{display:grid;grid-template-columns:minmax(210px,.9fr) 2fr;gap:2rem;padding:1.15rem 0;border-top:1px solid rgba(255,255,255,.12)}
.specrow:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.specrow dt{font-family:var(--serif);font-size:1.06rem;font-weight:700;color:var(--plate-head);line-height:1.3}
.specrow dd{margin:0;font-size:.94rem;color:var(--plate-body);font-weight:300}
@media(max-width:760px){.specrow{grid-template-columns:1fr;gap:.35rem;padding:1rem 0}}
.steps.prose .step p{font-size:.92rem;font-weight:400;color:var(--body);margin:0}
.steps.three .step p{font-size:.92rem;font-weight:400}
@media(max-width:900px){.quotes{grid-template-columns:1fr}.steps.three{grid-template-columns:1fr}}
@media(max-width:760px){.crow.deep{grid-template-columns:1fr}.crow.deep .go{align-self:start}}
@media(max-width:760px){.trades{grid-template-columns:1fr}}

/* ---------------- CONTACT + SHARED FORMS ---------------- */
.contact-hero{padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.contact-hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,1rem+3.6vw,3.6rem);line-height:1.07;margin:.7rem 0 0;max-width:16ch}
.cgrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
.cside h2{font-family:var(--serif);font-size:clamp(1.5rem,1rem+1.4vw,2rem);line-height:1.15}
.cside > p{margin:1rem 0 0;font-size:.98rem}
.cways{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:12px}
.cway{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px;box-shadow:0 1px 2px rgba(11,20,24,.04);transition:.2s}
.cway:hover{border-color:var(--line)}
.cway .ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(0,120,159,.08);border:1px solid var(--line);color:var(--cyan)}
.cway .ic svg{width:19px;height:19px}
.cway .lbl{display:block;font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cway .val{display:block;font-size:1rem;font-weight:600;color:var(--head);margin-top:.2rem;overflow-wrap:anywhere}
.cway a.val:hover{color:var(--cyan)}
.cway .note{display:block;font-size:.82rem;color:var(--muted);margin-top:.2rem}
.hours{margin:1.6rem 0 0;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px}
.hours h3{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .6rem}
.hrow{display:flex;justify-content:space-between;gap:1rem;font-size:.92rem;padding:.35rem 0;border-bottom:1px solid var(--line-soft)}
.hrow:last-child{border-bottom:none}
.hrow span:first-child{color:var(--body)}
.hrow span:last-child{color:var(--head);font-weight:500}
/* form card */
.fcard{background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:clamp(22px,3vw,32px);box-shadow:0 18px 40px rgba(11,20,24,.06)}
.fcard h2{font-family:var(--serif);font-size:1.6rem}
.fcard .fsub{margin:.5rem 0 1.6rem;font-size:.93rem;color:var(--body)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.fgroup{margin-bottom:1.05rem}
.fgroup label{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.fgroup label .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--muted)}
.fgroup input,.fgroup select,.fgroup textarea{width:100%;font:inherit;font-size:.95rem;color:var(--head);background:var(--ink);border:1px solid rgba(11,20,24,.14);border-radius:9px;padding:.72rem .85rem;transition:border-color .18s,box-shadow .18s}
.fgroup textarea{min-height:130px;resize:vertical;line-height:1.6}
.fgroup select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7580' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center;background-size:15px;padding-right:2.4rem}
.fgroup input:focus,.fgroup select:focus,.fgroup textarea:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,120,159,.13);background:#fff}
.fgroup input::placeholder,.fgroup textarea::placeholder{color:var(--faint)}
.fnote{font-size:.82rem;color:var(--muted);margin:.9rem 0 0;text-align:center}
.ferr{font-size:.88rem;color:#b3261e;margin:.8rem 0 0;line-height:1.5}
.ferr a{color:#b3261e;text-decoration:underline}
.promo-row{display:flex;gap:.5rem}
.promo-row input{flex:1}
.promo-apply{font:inherit;font-size:.88rem;font-weight:600;color:var(--cyan);background:rgba(0,120,159,.08);border:1px solid transparent;border-radius:9px;padding:0 1.1rem;cursor:pointer}
.promo-msg{font-size:.84rem;margin-top:.5rem}
.promo-msg.error{color:#b3261e}
.promo-msg.success{color:var(--ok)}
.fdone{display:none;text-align:center;padding:1.5rem .5rem}
.fdone .tick{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.1rem;border-radius:50%;background:rgba(23,122,81,.1);color:var(--ok)}
.fdone .tick svg{width:26px;height:26px}
.fdone h3{font-family:var(--serif);font-size:1.6rem}
.fdone p{margin:.8rem auto 0;max-width:32rem;font-size:.95rem}
.fdone a{color:var(--cyan);font-weight:600}
/* quick add package cards */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:2.2rem}
.pick{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:24px;box-shadow:0 1px 2px rgba(11,20,24,.04);position:relative}
.pick.hot{border-color:rgba(0,120,159,.45);box-shadow:0 18px 40px rgba(0,120,159,.10)}
.pick h3{font-family:var(--serif);font-size:1.35rem}
.pick .price{margin:.7rem 0 .5rem}
.pick .price b{font-size:1.75rem}
.pick p{font-size:.9rem;margin:0 0 1.3rem;flex:1}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}.picks{grid-template-columns:1fr}}
@media(max-width:560px){.frow{grid-template-columns:1fr}}

/* ---------------- CART / CHECKOUT ----------------
   Class names here are emitted by the checkout script in cart.html.
   Rename nothing without changing that script too.                  */
.cart-page{max-width:720px;margin-inline:auto}
.cart-items{border:1px solid var(--line-soft);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.cart-item{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.3rem;border-bottom:1px solid var(--line-soft)}
.cart-item:last-child{border-bottom:none}
.cart-item-name{font-size:1rem;font-weight:600;color:var(--head);line-height:1.35}
.cart-item-sub{font-size:.83rem;color:var(--muted);margin-top:.25rem}
.cart-item-right{display:flex;align-items:flex-start;gap:.85rem;padding-top:.1rem}
.cart-item-price-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:.15rem}
.cart-item-price{font-size:1.05rem;font-weight:600;color:var(--head);white-space:nowrap;font-variant-numeric:tabular-nums}
.cart-item-was{font-size:.76rem;color:var(--muted);text-decoration:line-through;white-space:nowrap;display:flex;align-items:center;gap:.35rem}
.cart-item-save{font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--ok);padding:.12rem .4rem;border-radius:20px;text-decoration:none}
.cart-item-remove{background:none;border:none;color:var(--faint);cursor:pointer;font-size:.9rem;line-height:1;padding:.3rem .4rem;border-radius:6px;transition:.18s}
.cart-item-remove:hover{color:#b3261e;background:rgba(179,38,30,.07)}
.cart-card-spec{margin-top:.7rem;padding:.7rem .85rem;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:10px;font-size:.8rem;color:var(--body);display:grid;gap:.25rem}
.cart-card-spec .r{display:flex;gap:.6rem}
.cart-card-spec .k{color:var(--muted);min-width:72px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;font-size:.62rem;font-weight:600;padding-top:.15rem}
.cart-spec-edit{justify-self:start;margin-top:.4rem;background:none;border:none;color:var(--cyan);cursor:pointer;font:inherit;font-size:.8rem;font-weight:600;padding:0;text-decoration:underline;text-underline-offset:3px}
.cart-zone-row{margin-top:.7rem;max-width:380px}
.cart-zone-label{display:block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem}
.cart-zone-select{width:100%;font:inherit;font-size:.88rem;color:var(--head);background:var(--ink);border:1px solid rgba(11,20,24,.14);border-radius:8px;padding:.55rem .7rem}
.cart-interval-row{display:flex;gap:.4rem;margin-top:.7rem;flex-wrap:wrap}
.cart-interval-btn{display:inline-flex;align-items:center;gap:.35rem;background:#fff;border:1px solid rgba(11,20,24,.14);color:var(--body);font:inherit;font-size:.76rem;font-weight:600;padding:.35rem .65rem;border-radius:20px;cursor:pointer;transition:.18s}
.cart-interval-btn:hover{border-color:var(--cyan);color:var(--head)}
.cart-interval-btn.active{background:rgba(0,120,159,.08);border-color:var(--cyan);color:var(--cyan)}
.cart-interval-save{background:var(--ok);color:#fff;font-size:.58rem;font-weight:700;padding:.1rem .35rem;border-radius:20px}
.cart-totals{background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:1.4rem 1.5rem;margin-top:18px;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.total-row{display:flex;justify-content:space-between;gap:1rem;font-size:.93rem;color:var(--body);padding:.32rem 0;font-variant-numeric:tabular-nums}
.total-row span:last-child{color:var(--head);font-weight:500}
.total-row.highlight{color:var(--head);font-weight:700;font-size:1.15rem;padding-top:.9rem;margin-top:.6rem;border-top:1px solid var(--line-soft)}
.total-row.highlight span:last-child{font-weight:700}
.cart-lead{margin-top:2.6rem}
.payment-note{font-size:.88rem;color:var(--body);line-height:1.65;background:var(--panel-2);border:1px solid var(--line-soft);border-radius:12px;padding:.9rem 1.1rem;margin:0 0 1.2rem}
.checkout-err{margin-top:.9rem;padding:.85rem 1.1rem;border:1px solid rgba(179,38,30,.35);border-radius:10px;background:rgba(179,38,30,.06);color:#8c1d18;font-size:.9rem;line-height:1.55}
.cart-empty{text-align:center;background:#fff;border:1px solid var(--line-soft);border-radius:18px;padding:clamp(2.5rem,6vw,4rem) 1.5rem}
.cart-empty .ic{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 1.2rem;border-radius:50%;background:rgba(0,120,159,.08);color:var(--cyan)}
.cart-empty .ic svg{width:26px;height:26px}
.cart-empty h2{font-family:var(--serif);font-size:1.5rem}
.cart-empty p{margin:.7rem auto 1.6rem;max-width:26rem}
.cart-done{display:none;text-align:center;padding:2.5rem 1rem}
.cart-done.show{display:block}
/* travel widget (on site photography) */
.rcd-travel{margin-top:.8rem;max-width:420px}
.rcd-travel-label{display:block;font-size:.66rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:.35rem}
.rcd-travel-wrap{position:relative}
.rcd-travel-input{width:100%;font:inherit;font-size:.88rem;color:var(--head);background:var(--ink);border:1px solid rgba(11,20,24,.14);border-radius:8px;padding:.55rem .7rem}
.rcd-travel-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,120,159,.13);background:#fff}
.rcd-travel-btn{margin-top:.5rem;font:inherit;font-size:.82rem;font-weight:600;color:var(--cyan);background:rgba(0,120,159,.08);border:1px solid transparent;border-radius:8px;padding:.45rem .9rem;cursor:pointer}
.rcd-travel-btn:hover{background:rgba(0,120,159,.14)}
.rcd-travel-note{display:none;font-size:.82rem;color:var(--body);margin-top:.5rem}
.rcd-travel-note.show{display:block}
.rcd-suggest{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:20;background:#fff;border:1px solid var(--line-soft);border-radius:10px;box-shadow:0 18px 40px rgba(11,20,24,.12);overflow:hidden}
.rcd-suggest:empty{display:none}
.rcd-suggest div{padding:.55rem .7rem;font-size:.86rem;cursor:pointer}
.rcd-suggest div:hover{background:var(--panel-2)}
@media(max-width:560px){.cart-item{flex-direction:column}.cart-item-right{align-self:stretch;justify-content:space-between}}

/* ---------------- STATUS PAGES (404, cancel, success) ---------------- */
.status{display:grid;place-items:center;min-height:calc(100vh - 64px);padding:clamp(3rem,8vw,6rem) 0;text-align:center}
.status-card{max-width:34rem}
.status .ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1.6rem;border-radius:50%;background:rgba(0,120,159,.08);border:1px solid var(--line);color:var(--cyan)}
.status .ic svg{width:28px;height:28px}
.status .ic.ok{background:rgba(23,122,81,.1);border-color:rgba(23,122,81,.3);color:var(--ok)}
.status h1{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,1rem+2.6vw,3rem);line-height:1.1;margin:.6rem 0 0}
.status p{margin:1.1rem auto 0;max-width:30rem;font-weight:300}
.status .act{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:2rem}
.status .panel{text-align:left;background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px;margin-top:2.2rem;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.status .panel h2{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 .8rem}
.status .panel ol{margin:0;padding-left:1.2rem;display:grid;gap:.5rem}
.status .panel li{font-size:.93rem;color:var(--body)}
.status .panel p{margin:0;font-size:.93rem;text-align:left;max-width:none}

/* ---------------- LEGAL / LONG-FORM COPY ---------------- */
.legal{max-width:46rem}
.legal .updated{font-size:.85rem;color:var(--muted);margin-top:1rem}
.legal h2{font-family:var(--serif);font-size:clamp(1.3rem,1rem+.9vw,1.7rem);margin:2.6rem 0 0}
.legal h3{font-family:var(--serif);font-size:1.12rem;margin:1.8rem 0 0}
.legal p,.legal li{font-size:.97rem;line-height:1.75;color:var(--body)}
.legal p{margin:.9rem 0 0}
.legal ul{margin:.9rem 0 0;padding-left:1.2rem;display:grid;gap:.4rem}
.legal a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px}
.legal strong{color:var(--head)}
.legal .box{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px;margin-top:1.6rem;box-shadow:0 1px 2px rgba(11,20,24,.04)}
.legal .box p:first-child{margin-top:0}

/* accessibility: skip link */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--cyan);color:var(--btn-fg);padding:.7rem 1.1rem;border-radius:0 0 6px 0;font-weight:600;font-size:.8rem}
.skip-link:focus{left:0}