/* BoldReach design system v3 (2026-08-31), the direction Jack picked.
 *
 * Warm paper ground, ink-blue text, brick-orange working harder than in the
 * preview: it now carries links, section labels, rules, hover states, numbers
 * and the CTA, not just an accent word.
 *
 * Deliberately NOT here: a dark canvas, uppercase display type, a row of
 * explainer boxes, or a 1-2-3-4 numbered list. Those were the three things that
 * read as generated, and they are replaced by the globe, the live phone demo,
 * and a horizontal process track.
 */
:root{
  --pg:#faf8f4; --pg2:#f2eee5; --pg3:#ebe6da; --card:#fff;
  --ink:#141c2b;
  /* Measured, not guessed. Against the paper ground:
       --mut   5.64:1  passes for body text
       --faint 5.06:1  was #98a0ac at 2.49:1, which FAILED WCAG and is exactly
                       the "light grey on white, hard to read" Jack called out
       --br    5.01:1  was #c2521f at 4.38:1, under the bar for small text */
  --mut:#5b6472; --faint:#646b78; --line:#e2ddd1;
  --br:#b8471a; --br-d:#96380f; --br-soft:#d9663a;
  --br-wash:#f9ece5; --br-line:#eccdbb;
  /* An ink tint for panels, so a section can change ground without going grey */
  --ink-wash:#eef0f3;
  --ok:#2f7d5b;
  --serif:Newsreader,Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --pad:clamp(20px,5vw,52px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--pg);color:var(--ink);
  font:17px/1.72 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0;line-height:1.2;
  letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2rem,3.7vw,3.1rem)}
h2{font-size:clamp(1.5rem,2.5vw,2.05rem)}
h3{font-size:1.25rem}
p{margin:0 0 1.1em;color:var(--mut)}
a{color:var(--br)}
.w{max-width:1220px;margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:760px}
.lbl{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--br);font-weight:600}
.lbl-q{color:var(--faint)}
.lead{font-size:1.1rem;line-height:1.72;color:var(--ink);max-width:52ch}
.mut{color:var(--mut)}

/* ---- buttons ---- */
.btn{background:var(--ink);color:var(--pg);text-decoration:none;padding:13px 24px;
  font-size:.93rem;font-weight:500;display:inline-block;border:1px solid var(--ink);
  cursor:pointer;transition:transform .2s,background .2s,border-color .2s,color .2s}
.btn:hover{background:#0a1220;border-color:#0a1220;transform:translateY(-1px)}
.btn.br{background:var(--br);border-color:var(--br);color:#fff}
.btn.br:hover{background:var(--br-d);border-color:var(--br-d)}
.btn.o{background:transparent;color:var(--ink)}
.btn.o:hover{background:var(--ink);color:var(--pg)}
:focus-visible{outline:2px solid var(--br);outline-offset:3px}
.cta{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}

/* ---- nav ---- */
nav{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;
  background:rgba(250,248,244,.93);backdrop-filter:blur(10px)}
.nb{display:flex;align-items:center;gap:24px;padding-block:20px}
.bd{font-family:var(--serif);font-size:1.4rem;text-decoration:none;color:var(--ink);
  display:flex;align-items:center;gap:9px}
.bd i{width:9px;height:9px;background:var(--br);display:block;font-style:normal;
  border-radius:50%}
.nr{margin-left:auto;display:flex;gap:26px;align-items:center}
.nr a{font-size:.95rem;text-decoration:none;color:var(--mut);position:relative;
  padding-block:3px}
.nr a:not(.btn)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1.5px;
  background:var(--br);transition:width .25s}
.nr a:hover{color:var(--ink)}
.nr a:not(.btn):hover::after,.nr a[aria-current]::after{width:100%}
.nr a[aria-current]{color:var(--ink)}
.navtog{display:none;background:none;border:1px solid var(--line);width:44px;height:44px;
  cursor:pointer;align-items:center;justify-content:center;padding:0}
.navtog span{display:block;width:16px;height:1.5px;background:var(--ink);position:relative}
.navtog span::before,.navtog span::after{content:"";position:absolute;left:0;width:16px;
  height:1.5px;background:var(--ink);transition:transform .22s,top .22s}
.navtog span::before{top:-5px}.navtog span::after{top:5px}
.navtog[aria-expanded="true"] span{background:transparent}
.navtog[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.navtog[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media(max-width:860px){
  .navtog{display:flex;margin-left:auto;order:2}
  .nr{order:3;position:fixed;inset:78px 0 auto 0;background:var(--pg);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;
    padding:0 var(--pad) 22px;clip-path:inset(0 0 100% 0);transition:clip-path .3s ease}
  .nr.open{clip-path:inset(0 0 0 0)}
  .nr a{padding:18px 0;border-bottom:1px solid var(--line);font-size:1rem}
  .nr a.btn{margin-top:18px;text-align:center;border-bottom:1px solid var(--ink)}
}

/* ---- sections & rules ---- */
section{padding-block:clamp(42px,6vw,86px);border-bottom:1px solid var(--line)}
section:last-of-type{border-bottom:0}
.rule{border:0;border-top:1px solid var(--line);margin:0}
.cols{display:grid;grid-template-columns:1fr 2fr;gap:clamp(22px,4vw,66px);align-items:start}
/* A short intro column beside a tall panel leaves a block of dead space under
   the text. Centring the pair closes it without inventing filler copy. */
.cols-mid{align-items:center}
@media(max-width:820px){.cols-mid{align-items:start}}
@media(max-width:820px){.cols{grid-template-columns:1fr;gap:18px}}

/* ---- reveal: additive only. Content is visible without it. ---- */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rv{animation:rise forwards;animation-timeline:view();animation-range:entry 0% cover 16%}
    @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  }
}
@media print{.rv{opacity:1!important;transform:none!important;animation:none!important}}

/* ---- ticker ---- */
.tick{border-block:1px solid var(--line);overflow:hidden;padding-block:15px;
  background:var(--card)}
.tk{display:flex;width:max-content;animation:sl 40s linear infinite}
@media(prefers-reduced-motion:reduce){.tk{animation:none}}
.tk span{font-family:var(--serif);font-size:1.15rem;color:var(--ink);
  padding-inline:26px;white-space:nowrap}
/* .hot retained in markup; every niche now reads at the same weight. */
.tk span.hot{color:var(--ink)}
.tk i{color:var(--br);font-style:normal;padding-inline:2px}
@keyframes sl{to{transform:translateX(-50%)}}

/* ---- services: alternating rows ---- */
.svc{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(18px,3vw,44px);padding-block:clamp(26px,3.2vw,44px);
  border-top:1px solid var(--line);align-items:start;position:relative}
.svc:hover{background:linear-gradient(90deg,rgba(184,71,26,.035),transparent 62%)}
@media(max-width:820px){.svc{grid-template-columns:1fr;gap:14px}}
/* The left column was a title floating in a third of the page. It now carries a
   numbered rule, the title, the price and a one-line summary, so the row reads
   as a spread instead of a label beside a paragraph. */
.svc-i{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
.svc-i span{font-size:.72rem;letter-spacing:.14em;color:var(--br);font-weight:600}
.svc-i hr{flex:1;border:0;border-top:1px solid var(--br-line);margin:0}
.svc .pr{color:var(--br);font-size:.95rem;margin-top:8px;font-weight:500}
.svc .sum{font-size:.93rem;color:var(--mut);margin-top:12px;line-height:1.6}
.svc ul{margin:16px 0 0;padding:0;list-style:none;columns:2;column-gap:34px}
@media(max-width:620px){.svc ul{columns:1}}
.svc li{font-size:.95rem;color:var(--mut);padding:7px 0;break-inside:avoid;
  border-top:1px solid var(--line)}
.svc li::before{content:"";display:inline-block;width:5px;height:5px;background:var(--br);
  border-radius:50%;margin-right:11px;vertical-align:middle}
.more{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-size:.95rem;
  font-weight:500;color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--br);padding-bottom:2px}
.more span{transition:transform .25s}
.more:hover{color:var(--br)}
.more:hover span{transform:translateX(5px)}

/* ---- work rows ---- */
.wk{border-top:1px solid var(--line);padding-block:22px;display:grid;
  grid-template-columns:1.1fr 2fr auto;gap:clamp(14px,3vw,40px);align-items:baseline;
  transition:background .25s,padding-left .25s,border-color .25s}
.wk:hover{background:var(--card);padding-left:14px;border-color:var(--br-line)}
@media(max-width:760px){.wk{grid-template-columns:1fr;gap:5px}}
.wk b{font-family:var(--serif);font-size:1.24rem;font-weight:400}
.wk p{margin:0;font-size:.95rem}
.wk span{color:var(--br);font-size:.92rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;font-weight:500}

/* ---- pull quote ---- */
.pull{font-family:var(--serif);font-size:clamp(1.3rem,2.3vw,1.8rem);line-height:1.45;
  max-width:36ch;border-left:2px solid var(--br);padding-left:26px;color:var(--ink)}

/* ---- callout ---- */
.note{background:var(--br-wash);border-left:3px solid var(--br);
  padding:20px 24px;margin:clamp(24px,3.2vw,42px) 0}
.note p{margin:0;color:var(--ink);font-size:.98rem;line-height:1.68}

/* ---- price rows ---- */
.tier{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.5fr);
  gap:clamp(16px,3vw,44px);padding-block:clamp(24px,3.4vw,44px);
  border-top:1px solid var(--line);align-items:start}
@media(max-width:860px){.tier{grid-template-columns:1fr;gap:12px}}
.tier .amt{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--br);
  line-height:1;white-space:nowrap}
.tier .amt small{display:block;font-family:var(--sans);font-size:.76rem;color:var(--faint);
  margin-top:7px;letter-spacing:.06em;text-transform:uppercase}
.tier ul{margin:0;padding:0;list-style:none}
.tier li{padding:9px 0;border-top:1px solid var(--line);font-size:.94rem;color:var(--mut)}
.tier li:first-child{border-top:0;padding-top:0}

/* ---- faq ---- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:22px 0;font-family:var(--serif);font-size:1.18rem;cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center;
  transition:color .2s}
.faq summary:hover{color:var(--br)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{font-style:normal;color:var(--br);font-size:1.3rem;line-height:1;
  transition:transform .25s;flex:0 0 auto}
.faq details[open] summary i{transform:rotate(45deg)}
.faq p{margin:0 0 24px;max-width:68ch}

/* ---- horizontal process track ---- */
/* The process rail used to scroll horizontally, which meant the fourth step was
   always cut off at the viewport edge. Four steps is not a lot to show: on
   desktop they all fit in a row, and on phones they stack. Nothing is hidden
   behind a drag any more. */
.trackwrap{position:relative}
.track{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2.2vw,30px);
  margin-top:26px}
@media(max-width:900px){.track{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.track{grid-template-columns:1fr;gap:0}}
.stop{padding:20px 0 0;border-top:2px solid var(--br-line);position:relative}
@media(max-width:560px){
  .stop{padding:16px 0;border-top:1px solid var(--line)}
  .stop:first-child{border-top:2px solid var(--br-line)}
}
.stop::before{content:"";position:absolute;top:-2px;left:0;width:26px;height:2px;
  background:var(--br)}
.stop .when{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--br);font-weight:600;margin-bottom:7px}
.stop h3{font-size:1.12rem;margin-bottom:8px}
.stop p{font-size:.9rem;color:var(--mut);line-height:1.62;margin:0}
.hint{display:none}
.stop:hover{border-color:var(--br)}
.stop::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;
  border-radius:50%;background:var(--pg);border:2px solid var(--br)}
.band-2 .stop::before{background:var(--pg2)}
.band-3 .stop::before{background:var(--pg3)}
.stop .when{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--br);font-weight:600;margin-bottom:8px}
.stop h3{font-size:1.12rem;margin-bottom:8px}
.stop p{font-size:.93rem;margin:0}
.hint{font-size:.8rem;color:var(--faint);margin-top:8px}

/* ---- forms ---- */
label{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);font-weight:600;margin-bottom:7px}
input,select,textarea{width:100%;border:0;border-bottom:1.5px solid var(--line);
  background:transparent;color:var(--ink);font:inherit;font-size:1.02rem;padding:11px 0;
  border-radius:0;transition:border-color .25s}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-color:var(--br)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{min-height:110px;resize:vertical}
.field{margin-bottom:26px}

/* ---- footer ---- */
footer{background:var(--pg2);border-top:1px solid var(--line);
  padding-block:clamp(40px,5.5vw,76px)}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(24px,4vw,60px)}
@media(max-width:760px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.fg{grid-template-columns:1fr}}
footer h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--br);
  margin:0 0 15px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
footer li a{font-size:.95rem;text-decoration:none;color:var(--mut)}
footer li a:hover{color:var(--br)}
.fbar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(32px,4.5vw,60px);padding-top:22px;border-top:1px solid var(--line);
  font-size:.85rem;color:var(--faint)}
.fbar a{color:var(--faint);text-decoration:none}
.fbar a:hover{color:var(--br)}

/* ---- alternating grounds --------------------------------------------------
   A single flat paper colour for a whole page is what makes it read as empty.
   Sections now alternate between paper, a warmer sand, and one ink panel, so
   the eye has somewhere to land and the page has a rhythm without more colour. */
.band-2{background:var(--pg2);border-block:1px solid var(--line)}
.band-3{background:var(--pg3);border-block:1px solid var(--line)}
.band-ink{background:var(--ink);color:#e9ecf1;border-block:1px solid var(--ink)}
.band-ink h2,.band-ink h3{color:#fff}
.band-ink p{color:#b9c0cc}
.band-ink .lbl{color:var(--br-soft)}
.band-ink .lead{color:#dfe3ea}
.band-ink .btn.o{color:#fff;border-color:rgba(255,255,255,.35)}
.band-ink .btn.o:hover{background:#fff;color:var(--ink);border-color:#fff}
.band-ink .rule,.band-ink .tier,.band-ink .wk{border-color:rgba(255,255,255,.14)}

/* Tighter vertical rhythm: the old clamp bottomed out at 86px top AND bottom
   on every section, which on a short section is more air than content. */
section{padding-block:clamp(28px,3.8vw,54px)}

/* ---- the cost calculator: fills the dead space beside the hero copy with
   something a prospect actually wants to know ---- */
.calc{background:var(--card);border:1px solid var(--line);padding:clamp(20px,2.4vw,30px)}
.calc h3{font-size:1.15rem;margin-bottom:6px}
.calc .sub{font-size:.88rem;color:var(--mut);margin-bottom:20px}
.calc .row{margin-bottom:18px}
.calc .row label{display:flex;justify-content:space-between;align-items:baseline;
  text-transform:none;letter-spacing:0;font-size:.92rem;color:var(--ink);font-weight:400;
  margin-bottom:9px}
.calc .row label b{font-family:var(--serif);font-size:1.25rem;color:var(--br);font-weight:400}
.calc input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;
  background:var(--line);border:0;padding:0;border-radius:0}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  background:var(--br);border-radius:50%;cursor:pointer;border:3px solid var(--card);
  box-shadow:0 0 0 1px var(--br)}
.calc input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--br);
  border-radius:50%;cursor:pointer;border:3px solid var(--card);box-shadow:0 0 0 1px var(--br)}
.calc .out{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}
.calc .out .big{font-family:var(--serif);font-size:clamp(2rem,4vw,2.9rem);color:var(--br);
  line-height:1;display:block}
.calc .out .cap{font-size:.9rem;color:var(--mut);margin-top:9px;display:block;line-height:1.55}
.calc .out .vs{font-size:.86rem;color:var(--ink);margin-top:14px;padding-top:14px;
  border-top:1px dashed var(--br-line)}
.calc .out .vs b{color:var(--br-d)}

/* ---- a denser two-up so short content does not float in a wide column ---- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,3vw,42px)}
@media(max-width:760px){.duo{grid-template-columns:1fr}}
.duo.trio{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.duo.trio{grid-template-columns:1fr}}

/* The call-demo row. Was called .demo, which collided with the .demo card used
   for the calendar and quote widgets: the phone row silently picked up that
   card's background, border and padding. Renamed so each name means one thing.
   The row was 1fr/300px/1fr, which on a wide screen is two large empty columns
   flanking a narrow phone; the outer columns are weighted down so the three
   parts sit together instead of drifting apart. */
.callrow{display:grid;grid-template-columns:1fr;gap:clamp(22px,4vw,54px);
  align-items:center;justify-items:start}
@media(min-width:1000px){
  .callrow{grid-template-columns:minmax(0,1fr) 300px minmax(0,.85fr);
    gap:clamp(24px,3.4vw,48px);justify-items:stretch}
}
/* Hero: the globe column was taller than the copy, leaving a gap under the
   buttons. Align both to the top and cap the globe so the row closes up. */
.hg{align-items:start}
.globe-wrap{min-height:0;aspect-ratio:1/.78}

/* The hero is three blocks, not two, so that on a phone the globe can sit
   directly under the headline instead of after the paragraph and both buttons.
   Scrolling past a wall of text to reach the picture loses the reader before
   they get there. On desktop the copy stacks in column one and the globe spans
   both rows in column two, which is the layout it always had. */
.hg-top{grid-column:1;grid-row:1}
.hg-rest{grid-column:1;grid-row:2}
.hg > .globe-wrap{grid-column:2;grid-row:1/span 2;align-self:center}
@media(max-width:900px){
  /* minmax(0,1fr), not 1fr: a bare 1fr floors the track at the content's
     min-content width, and the canvas carries a large intrinsic width from its
     width attribute, so the whole hero blew out past the viewport. */
  .hg{grid-template-columns:minmax(0,1fr);gap:16px}
  .hg-top,.hg-rest,.hg > .globe-wrap{grid-column:1;grid-row:auto;min-width:0}
  /* min-height:300px is still set on .globe-wrap; with an aspect-ratio that
     makes width = 300/.62 = 484px, which overflowed the 350px track. Width
     has to lead here and height follow from it. */
  .hg > .globe-wrap{aspect-ratio:1/.62;min-height:0;width:100%;margin-block:2px -6px}
}

/* Contrast on the tinted bands.
   Measured against --pg3 (#ebe6da): --br is 4.26:1 and --faint is 4.31:1,
   both under the 4.5:1 the standard wants for text below 24px. Rather than
   patching each class as it turns up, the tokens themselves are redefined
   for the tinted grounds, so anything added later inherits a passing colour.
     --br-d  on --pg3 = 5.88:1
     --mut   on --pg3 = 4.80:1 */
.band-2, .band-3{--br:var(--br-d); --faint:var(--mut)}

/* ============================================================ new components */

/* Work carousel: replaces the four dead stat boxes on the homepage. Real pages
   we have built, scrolled automatically, paused on hover so it can be read. */
.reel{overflow:hidden;position:relative;margin-top:26px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.reel-t{display:flex;gap:20px;width:max-content;animation:reel 46s linear infinite}
.reel:hover .reel-t{animation-play-state:paused}
@keyframes reel{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.reel-t{animation:none}
  .reel{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}
.shot{flex:0 0 300px;background:var(--card);border:1px solid var(--line);
  overflow:hidden;text-decoration:none;color:inherit;display:block;
  transition:transform .3s,box-shadow .3s}
.shot:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,28,43,.11)}
.shot-v{height:172px;position:relative;overflow:hidden;background:var(--pg2);
  border-bottom:1px solid var(--line)}
.shot-c{padding:14px 16px 16px}
.shot-c b{display:block;font-family:var(--serif);font-size:1.05rem}
.shot-c span{display:block;font-size:.78rem;color:var(--mut);margin-top:4px}
.shot-tag{position:absolute;top:10px;left:10px;z-index:2;font-size:.62rem;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  background:var(--ink);color:#fff;padding:4px 8px;border-radius:2px}
.shot-tag.live{background:var(--br)}

/* Miniature browser/phone frames drawn in CSS, used inside .shot-v and the
   feature blocks. No screenshots to keep current, and nothing to 404. */
.mini{position:absolute;inset:14px 14px -40px;background:#fff;border-radius:6px 6px 0 0;
  box-shadow:0 8px 22px rgba(20,28,43,.14);overflow:hidden}
.mini-bar{height:17px;background:var(--pg3);display:flex;align-items:center;gap:3px;
  padding-inline:7px;border-bottom:1px solid var(--line)}
.mini-bar i{width:5px;height:5px;border-radius:50%;background:#cfc7b8;display:block}
.mini-b{padding:10px 11px}
.mini-h{height:8px;border-radius:2px;background:var(--ink);opacity:.82;margin-bottom:7px}
.mini-l{height:5px;border-radius:2px;background:var(--line);margin-bottom:5px}
.mini-g{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;margin-top:9px}
.mini-g i{display:block;height:26px;border-radius:3px;background:var(--pg2)}
.mini-btn{height:14px;width:56px;border-radius:3px;background:var(--br);margin-top:9px}

/* Section head centred, for pages that open on a feature rather than a column. */
.mid{text-align:center;max-width:660px;margin-inline:auto}
.mid .lead{margin-inline:auto}
.mid .cta{justify-content:center}

/* The orbit hero: a ring system drawn around the page title. */
.orbit-wrap{position:relative;display:grid;place-items:center;
  padding-block:clamp(30px,6vw,74px)}
.orbit-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.orbit-in{position:relative;z-index:2}

/* Panels: a tighter way to show pricing than three tall cards of white space. */
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.panel{background:var(--card);padding:24px 24px 26px;display:flex;flex-direction:column}
.panel.feat{background:var(--br-wash)}
.panel h3{font-size:1.06rem;margin-bottom:4px}
.panel .amt{font-family:var(--serif);font-size:1.9rem;color:var(--br);margin:10px 0 2px}
.panel .amt small{font-size:.82rem;color:var(--mut);font-family:var(--sans)}
.panel .note{font-size:.8rem;color:var(--mut);margin-bottom:14px}
.panel ul{list-style:none;margin:0 0 16px;padding:0}
.panel li{font-size:.88rem;color:var(--mut);padding:6px 0 6px 17px;position:relative;
  line-height:1.5}
.panel li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;
  border-radius:50%;background:var(--br)}
.panel .foot{margin-top:auto}

/* FAQ: question full width, answer beneath. The old two-column version left a
   third of every row empty. */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:18px 40px 18px 0;position:relative;
  font-family:var(--serif);font-size:1.08rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;
  transform:translateY(-50%);color:var(--br);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--br)}
.faq .a{padding:0 0 20px;font-size:.95rem;color:var(--mut);line-height:1.7;
  max-width:74ch}

/* Live-looking demos: a booking calendar and a quote calculator, both real
   markup rather than an image, so they stay sharp and theme correctly. */
.demo{background:var(--card);border:1px solid var(--line);padding:18px}
.demo-h{display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.demo-h b{font-family:var(--serif);font-size:1.05rem}
.demo-h span{font-size:.72rem;color:var(--mut)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal i{font-size:.6rem;color:var(--faint);text-align:center;font-style:normal;
  text-transform:uppercase;letter-spacing:.08em;padding-bottom:3px}
.cal b{font-size:.8rem;text-align:center;padding:7px 0;border-radius:4px;
  background:var(--pg2);color:var(--mut);font-weight:400}
.cal b.on{background:var(--br-wash);color:var(--br-d);font-weight:600;
  box-shadow:inset 0 0 0 1px var(--br-line)}
.cal b.sel{background:var(--br);color:#fff;font-weight:600}
.slots{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.slots span{font-size:.76rem;padding:6px 10px;border:1px solid var(--line);
  border-radius:3px;color:var(--mut)}
.slots span.take{opacity:.4;text-decoration:line-through}
.slots span.pick{background:var(--br);border-color:var(--br);color:#fff;font-weight:600}
.quote-row{display:flex;justify-content:space-between;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:.88rem}
.quote-row:last-of-type{border-bottom:0}
.quote-row span{color:var(--mut)}
.quote-row b{font-weight:600}
.quote-tot{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:12px;padding-top:13px;border-top:2px solid var(--ink)}
.quote-tot span{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mut)}
.quote-tot b{font-family:var(--serif);font-size:1.75rem;color:var(--br)}

/* ---- phone-agents: waveform + transcript, a different spine to the sites page */
.wave{display:flex;align-items:center;gap:3px;height:54px;margin-block:6px}
.wave i{flex:1;background:var(--br);border-radius:2px;opacity:.75;
  animation:wv 1.1s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.wave i{animation:none;height:40%!important}}
@keyframes wv{0%,100%{height:18%}50%{height:92%}}
.ring{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:26px}
.ring div{background:var(--card);padding:22px}
.ring b{display:block;font-family:var(--serif);font-size:2rem;color:var(--br);
  line-height:1.1}
.ring span{display:block;font-size:.85rem;color:var(--mut);margin-top:8px;line-height:1.55}
.chat{background:var(--ink);padding:22px;border-radius:4px}
.chat .li{display:flex;gap:10px;margin-bottom:13px;align-items:flex-start}
.chat .li:last-child{margin-bottom:0}
.chat .who{flex:0 0 54px;font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;
  color:#8d97a8;padding-top:3px}
.chat .txt{flex:1;font-size:.9rem;line-height:1.6;color:#e9ecf1}
.chat .li.them .txt{color:#b9c0cc}
.tag-row{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.tag-row span{font-size:.72rem;padding:5px 11px;border-radius:20px;
  background:var(--br-wash);color:var(--br-d);border:1px solid var(--br-line)}

/* ---- about: a wider palette. Orange stays the lead, these are supporting.
   Every pairing measured against both the plain and banded grounds:
     teal 5.06/4.83  navy 7.51/7.23  gold 5.43/5.19  orange 6.33
   Gold started at #8a6a1f and measured 4.40, under the 4.5 bar for small text. */
:root{--tealw:#e8f0ef;--teal:#2f6f66;--navyw:#e9edf4;--navy:#2d4a7c;
      --goldw:#f6efdc;--gold:#7a5c18;--plumw:#f1eaf1;--plum:#6d3f6b}
.band-2, .band-3{--tealw:#e3ebea;--navyw:#e4e9f1;--goldw:#f2ead5;--plumw:#ece4ec}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px;margin-top:26px}
.tile{padding:22px;border-radius:5px;border:1px solid transparent}
.tile b{display:block;font-family:var(--serif);font-size:1.55rem;line-height:1.15}
.tile span{display:block;font-size:.86rem;margin-top:9px;line-height:1.6;opacity:.86}
/* Was four separate hues (teal, navy, gold, brick) on a site whose whole system
   is paper, ink and brick. Same four tiles, stepped through the brand's own
   tonal range instead, so they still read as four distinct things. */
.tile.t1{background:var(--pg);color:var(--ink);border-color:var(--line)}
.tile.t2{background:var(--br-wash);color:var(--br-d);border-color:var(--br-line)}
.tile.t3{background:var(--pg3);color:var(--ink);border-color:var(--line)}
.tile.t4{background:var(--ink);color:var(--pg);border-color:var(--ink)}
.tile.t4 span{opacity:.78}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.4vw,48px);
  align-items:center;margin-top:26px}
@media(max-width:820px){.split{grid-template-columns:1fr}}
/* Two demos shown together. They were absolutely positioned and overlapped so
   badly the calendar was invisible behind the quote; a simple offset grid keeps
   both readable while still reading as a stack. */
.stackcards{display:grid;gap:14px}
.stackcards .demo{transition:transform .3s}
.stackcards .demo:nth-child(1){transform:rotate(-1.1deg)}
.stackcards .demo:nth-child(2){transform:rotate(.9deg);margin-inline-start:22px}
.stackcards:hover .demo:nth-child(1){transform:rotate(-2deg) translateX(-6px)}
.stackcards:hover .demo:nth-child(2){transform:rotate(1.8deg) translateX(6px)}
@media(max-width:820px){.stackcards .demo:nth-child(2){margin-inline-start:0}}
@media(prefers-reduced-motion:reduce){.stackcards .demo{transition:none;transform:none}}


/* ---- the call demo: phone + lead card ----
   These lived in index.html's inline <style>, so /work used the same markup and
   rendered it as raw unstyled text. Component CSS belongs in the stylesheet
   every page already loads. */
.phone{width:300px;max-width:100%;border:1px solid var(--line);border-radius:26px;
  background:var(--card);padding:14px;box-shadow:0 24px 60px rgba(20,28,43,.10);
  justify-self:center}
.ph-top{display:flex;align-items:center;gap:10px;padding:6px 6px 12px;
  border-bottom:1px solid var(--line)}
.ph-av{width:34px;height:34px;border-radius:50%;background:var(--br);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:600}
.ph-who{font-weight:600;font-size:.92rem;line-height:1.25}
.ph-status{font-size:.76rem;color:var(--faint)}
.phone.ringing .ph-av{animation:ring .9s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}}
@media(prefers-reduced-motion:reduce){.phone.ringing .ph-av{animation:none}}
.ph-body{height:290px;overflow:hidden;padding:14px 4px;display:flex;
  flex-direction:column;gap:9px}
.bub{max-width:82%;padding:9px 13px;border-radius:15px;font-size:.87rem;line-height:1.45;
  opacity:0;transform:translateY(7px);transition:opacity .35s,transform .35s}
.bub.in{opacity:1;transform:none}
.bub.them{background:var(--pg2);color:var(--ink);align-self:flex-start;
  border-bottom-left-radius:4px}
.bub.us{background:var(--ink);color:var(--pg);align-self:flex-end;
  border-bottom-right-radius:4px}
.leadcard{border:1px solid var(--br-line);background:var(--br-wash);padding:20px;
  opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.leadcard.in{opacity:1;transform:none}
.leadcard .h{display:flex;align-items:center;gap:8px;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--br-d);font-weight:600;margin-bottom:13px}
.leadcard .h i{width:6px;height:6px;border-radius:50%;background:var(--br)}
.leadcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 16px;font-size:.9rem}
.leadcard dt{color:var(--mut)}
.leadcard dd{margin:0;font-weight:600;color:var(--ink)}
.replay{background:none;border:0;color:var(--br);font:inherit;font-size:.93rem;cursor:pointer;
  padding:0;margin-top:16px;border-bottom:1.5px solid var(--br)}
@media(prefers-reduced-motion:reduce){
  .bub,.leadcard{opacity:1;transform:none;transition:none}
}

/* ---- page header ----
   Was pasted inline into websites, phone-agents, about and work. Four copies of
   the same rules meant four places to forget. */
.phead{padding-block:clamp(26px,3.6vw,50px);border-bottom:1px solid var(--line);
  position:relative;overflow:hidden}
.phead::after{content:"";position:absolute;right:-14%;top:-70%;width:56%;height:240%;
  background:radial-gradient(circle,var(--br-wash),transparent 66%);pointer-events:none}
.phead .w{position:relative;z-index:2}
.phead h1{margin-top:14px;max-width:20ch}
.phead .lead{margin-top:18px}

/* ---- call demo: who is talking, and when someone is mid-sentence ----
   The transcript used to be bare bubbles appearing in silence, which read as
   lines of text rather than a call. Labels say who is speaking; the dots say
   somebody is talking right now, which is the part that makes it feel live. */
.spk{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--faint);margin-top:3px}
.spk.us{align-self:flex-end}
.spk.them{align-self:flex-start}
.bub.typing{display:flex;gap:5px;align-items:center;padding:12px 14px}
.bub.typing i{width:5px;height:5px;border-radius:50%;background:currentColor;
  opacity:.4;display:block}
@media(prefers-reduced-motion:no-preference){
  .bub.typing i{animation:tdot 1.1s infinite ease-in-out}
  .bub.typing i:nth-child(2){animation-delay:.15s}
  .bub.typing i:nth-child(3){animation-delay:.3s}
  @keyframes tdot{0%,60%,100%{transform:translateY(0);opacity:.35}
                  30%{transform:translateY(-3px);opacity:.95}}
}

/* ---- three replacements for a four-across rail that was on five pages ----
   Only the homepage rail is a real sequence (day one to week three). Everywhere
   else it was a list wearing a timeline, which is why four pages looked alike. */

/* websites: capabilities, led by the verb */
.verbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);margin-top:26px}
.verbs > div{background:var(--pg);padding:26px 24px 28px}
.verbs b{display:block;font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2rem);
  color:var(--br);font-weight:400;line-height:1;margin-bottom:12px}
.verbs p{margin:0;font-size:.94rem;color:var(--mut);line-height:1.66}

/* about: principles as prose, one per line, no grid */
.creed{margin-top:26px;border-top:1px solid var(--line)}
.creed > div{padding:20px 0;border-bottom:1px solid var(--line);font-size:1.02rem;
  line-height:1.7;color:var(--mut);max-width:74ch}
.creed b{font-family:var(--serif);font-size:1.2rem;font-weight:400;color:var(--ink);
  margin-right:8px}

/* 404: destinations, which is navigation and should look like it */
.dests{margin-top:26px;border-top:1px solid var(--line)}
.dests a{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);
  gap:clamp(14px,3vw,40px);padding:19px 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;align-items:baseline;transition:background .25s}
@media(max-width:700px){.dests a{grid-template-columns:1fr;gap:5px}}
.dests a:hover{background:linear-gradient(90deg,rgba(184,71,26,.05),transparent 70%)}
.dests b{font-family:var(--serif);font-size:1.2rem;font-weight:400}
.dests a:hover b{color:var(--br)}
.dests span{font-size:.94rem;color:var(--mut);line-height:1.6}

/* ---- what we build: three blocks ----
   Replaced five hairline .svc rows numbered 01-05. A rule-and-a-number list makes
   every service look like an entry in a table of contents; these have to look like
   things you can buy. Three grounds rather than three identical cards: paper, the
   brick wash for the one that sells most, and ink for the add-ons. */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;
  align-items:stretch}
@media(max-width:980px){.offers{grid-template-columns:1fr;gap:14px}}
.offer{display:flex;flex-direction:column;padding:clamp(22px,2.4vw,30px);
  background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s}
.offer:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,28,43,.09)}
.offer .oh{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.offer h3{font-size:clamp(1.35rem,2.2vw,1.75rem);line-height:1.18;margin:0}
.offer .op{margin-top:14px;font-family:var(--serif);font-size:1.3rem;color:var(--br);
  line-height:1.2}
.offer .op span{display:block;font-family:var(--sans);font-size:.78rem;color:var(--faint);
  letter-spacing:.05em;margin-top:5px}
.offer > p{margin:0;font-size:.95rem;line-height:1.66;color:var(--mut)}
.offer ul{margin:16px 0 0;padding:0;list-style:none}
.offer li{font-size:.9rem;color:var(--mut);padding:7px 0;border-top:1px solid var(--line);
  line-height:1.5}
.offer .og{margin-top:auto;padding-top:20px;font-size:.94rem;font-weight:500;
  color:var(--ink);display:inline-flex;gap:7px;align-items:center}
.offer .og i{font-style:normal;transition:transform .25s}
.offer:hover .og{color:var(--br)}
.offer:hover .og i{transform:translateX(5px)}

.offer.feat{background:var(--br-wash);border-color:var(--br-line)}
.offer.feat .oh,.offer.feat li{border-color:var(--br-line)}
.offer.feat > p,.offer.feat li{color:#5d4a41}

.offer.dark{background:var(--ink);border-color:var(--ink)}
.offer.dark h3,.offer.dark .og{color:var(--pg)}
.offer.dark .op{color:var(--br-soft)}
.offer.dark .op span{color:#9aa4b4}
.offer.dark > p,.offer.dark li{color:#c8cfda}
.offer.dark .oh,.offer.dark li{border-color:rgba(255,255,255,.15)}
.offer.dark:hover .og{color:#fff}
@media(prefers-reduced-motion:reduce){.offer{transition:none}.offer:hover{transform:none}}

/* ------------------------------------------------------------ logo + footer */
.bd-m{height:26px;width:auto;display:inline-block;vertical-align:-6px;margin-right:9px}
.bd i{display:none}
footer{background:var(--ink);color:#c6cdd8;margin-top:0;padding-block:0}
footer .w{padding-block:clamp(40px,5vw,64px) 0}
.f-cta{display:flex;justify-content:space-between;align-items:center;gap:26px;
  flex-wrap:wrap;padding-bottom:clamp(30px,4vw,46px);margin-bottom:clamp(30px,4vw,46px);
  border-bottom:1px solid rgba(255,255,255,.12)}
.f-cta h3{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);color:#fff;margin:0 0 6px}
.f-cta p{margin:0;color:#9aa3b2}
.f-cta-b{display:flex;gap:12px;flex-wrap:wrap}
.btn.fo{border:1px solid rgba(255,255,255,.35);color:#fff}
.btn.fo:hover{border-color:#fff}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(22px,3.5vw,54px);padding-bottom:clamp(30px,4vw,46px)}
@media(max-width:820px){footer .fg{grid-template-columns:1fr 1fr}}
@media(max-width:480px){footer .fg{grid-template-columns:1fr}}
footer .f-bd{color:#fff;font-size:1.35rem}
footer .f-line{margin:14px 0 0;max-width:30ch;font-size:.92rem;line-height:1.7;color:#9aa3b2}
footer h4{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--br-soft);margin:0 0 14px;font-weight:600}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin-bottom:10px;font-size:.92rem;color:#9aa3b2}
footer li a{color:#c6cdd8;text-decoration:none}
footer li a:hover{color:#fff}
footer .fbar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-block:18px;border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem;color:#7c8595}
footer .fbar a{color:#9aa3b2;text-decoration:none}
footer .fbar a:hover{color:#fff}

/* ------------------------------------------------- pull-you-down components */
/* Scroll cue under a hero: a slow falling dot inside a capsule. */
.scue{display:flex;flex-direction:column;align-items:center;gap:9px;
  margin-top:clamp(26px,4vw,44px);color:var(--mut);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase}
.scue i{width:22px;height:36px;border:1.5px solid var(--br-soft);border-radius:12px;
  position:relative;display:block}
.scue i::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:4px;
  margin-left:-2px;border-radius:50%;background:var(--br);animation:sfall 1.9s ease-in-out infinite}
@keyframes sfall{0%{transform:translateY(0);opacity:1}70%{transform:translateY(15px);opacity:0}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.scue i::after{animation:none;top:14px}}

/* Section hand-off: an angled ink sliver that leans the eye into the next band. */
.lean{height:clamp(34px,4.5vw,58px);background:linear-gradient(178deg,
  var(--from,var(--pg)) 49.6%, var(--to,var(--pg2)) 50.4%)}
.lean.l2{--from:var(--pg2);--to:var(--pg)}
.lean.l3{--from:var(--pg);--to:var(--pg3)}
.lean.l4{--from:var(--pg3);--to:var(--pg)}
.lean.li{--from:var(--pg);--to:var(--ink)}

/* Compact page hero, for pages whose point is below the fold. */
.phead.compact{padding-block:clamp(22px,3vw,40px)}
.phead.compact h1{font-size:clamp(1.9rem,4vw,3rem)}

/* -------------------------------------------------------- tools page grid */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px);margin-top:28px}
@media(max-width:900px){.tgrid{grid-template-columns:1fr}}
.tcard{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--br);
  padding:24px;display:flex;flex-direction:column;gap:12px;position:relative;
  transition:transform .28s,box-shadow .28s}
.tcard:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,28,43,.12)}
.tcard .tk-ic{width:44px;height:44px;border-radius:9px;background:var(--br-wash);
  border:1px solid var(--br-line);display:grid;place-items:center;
  font-size:1.25rem;color:var(--br-d)}
.tcard h3{font-size:1.15rem;margin:0}
.tcard .tp{font-family:var(--serif);color:var(--br);font-size:1.05rem}
.tcard p{font-size:.9rem;color:var(--mut);line-height:1.62;margin:0}
.tcard .tmore{margin-top:auto;padding-top:10px}

/* ------------------------------------------- call journey (new phone visual) */
.journey{position:relative;padding:26px 0 8px;margin-top:24px}
.journey .jline{position:absolute;left:0;right:0;top:44px;height:2px;
  background:var(--line);overflow:hidden}
.journey .jline i{position:absolute;inset:0;width:34%;
  background:linear-gradient(90deg,transparent,var(--br),transparent);
  animation:jrun 4.5s linear infinite}
@keyframes jrun{from{transform:translateX(-110%)}to{transform:translateX(320%)}}
@media(prefers-reduced-motion:reduce){.journey .jline i{animation:none;width:100%}}
.jsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:700px){.jsteps{grid-template-columns:repeat(2,1fr);row-gap:26px}
  .journey .jline{display:none}}
.jstep{text-align:center}
.jstep .jd{width:13px;height:13px;border-radius:50%;background:var(--card);
  border:2.5px solid var(--br);margin:0 auto 13px;position:relative;z-index:2}
.jstep b{display:block;font-family:var(--serif);font-size:1.08rem;margin-bottom:5px}
.jstep span{font-size:.82rem;color:var(--mut);line-height:1.5;display:block}
.jstep .jt{font-size:.68rem;letter-spacing:.13em;color:var(--br);font-weight:600;
  text-transform:uppercase;display:block;margin-bottom:6px}

/* ------------------------------------------------------ business finder */
.bizfind{position:relative}
.bizfind input{width:100%}
.bizlist{position:absolute;left:0;right:0;top:100%;z-index:30;background:var(--card);
  border:1px solid var(--line);border-top:0;box-shadow:0 16px 36px rgba(20,28,43,.14);
  max-height:260px;overflow-y:auto}
.bizlist button{display:block;width:100%;text-align:left;background:none;border:0;
  padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--pg2);font:inherit}
.bizlist button:hover{background:var(--br-wash)}
.bizlist b{display:block;font-size:.93rem}
.bizlist span{display:block;font-size:.78rem;color:var(--mut);margin-top:2px}
.bizpick{display:flex;align-items:center;gap:10px;background:var(--br-wash);
  border:1px solid var(--br-line);padding:10px 14px;border-radius:4px;margin-top:10px}
.bizpick b{font-size:.92rem}
.bizpick span{font-size:.78rem;color:var(--mut)}
.bizpick button{margin-left:auto;background:none;border:0;color:var(--br-d);
  cursor:pointer;font-size:.8rem;text-decoration:underline}


/* -------------------------------------------------------- closing band */
/* The last section before the footer used to share the footer's ink, so the
   two read as one block. Warm wash instead; the footer alone is dark. */
.band-close{background:var(--br-wash);border-top:1px solid var(--br-line)}
.band-close .pull{color:var(--ink);border-left-color:var(--br)}

/* ---------------------------------------------------- portal screenshots */
.shots{display:grid;grid-template-columns:1fr;gap:clamp(14px,2vw,22px);
  margin-top:26px;max-width:760px}
.shots .shotframe img{aspect-ratio:1280/860;object-fit:cover;object-position:top}
.shotframe{margin:0;background:var(--card);border:1px solid var(--line);border-radius:8px;
  overflow:hidden;box-shadow:0 18px 44px rgba(20,28,43,.12)}
.shotframe img{display:block;width:100%;height:auto}
.shotframe figcaption{font-size:.76rem;color:var(--mut);padding:9px 12px;border-top:1px solid var(--line)}
.testlist{list-style:none;margin:20px 0 0;padding:0}
.testlist li{font-size:.92rem;color:var(--mut);padding:8px 0 8px 18px;position:relative;
  border-top:1px solid var(--line);line-height:1.55}
.testlist li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;
  border-radius:50%;background:var(--br)}
/* On phones the hero grid gave the globe only ~200px of height, which made
   the planet a coin. Give it room. */
@media(max-width:900px){.globe-wrap{min-height:340px}#globe{height:340px}}