/* nolanscottteam.com - the whole design system, one file.
   Every page links this. Nothing here is page-specific; if a rule only
   applies to one page it belongs in that page's own <style> block.

   Paper is the default. Tokens live in :root with a full override at
   :root[data-theme="dark"], so a new color must be added to BOTH or the
   dark theme breaks.

   The material vocabulary is deliberately flat: hairline rules, solid
   surfaces, no blur, no glow, no gradient fills. The audience is lenders,
   CPAs and buyers who read printed offering memoranda, and the page should
   look like it came from the same drawer. */

/* ═══ TOKENS: INK (default) ═══ */
/* Gold #e8b931 on navy. Flat surfaces, hairline rules, no glass and no glow. */
:root{
  --bg:#0e1220; --bg-hero:#111627; --band:#121829; --surface:#171d30;
  --gold-light:#f3d267; --gold:#e8b931; --gold-deep:#b8860b;
  --amber:#e8b931; --kicker:#e8b931;
  --hi:#f2f5f9; --tx:#dde3ec; --body:#c2cad8; --dim:#8f98a8; --mute:#727b8b; --ghost:#565f6e;
  --pos:#34d399; --neg:#f87171; --warn:#eab308;
  --bd:rgba(226,232,240,.16); --bd-soft:rgba(226,232,240,.085); --bd-strong:rgba(226,232,240,.34);
  --panel:#171d30; --panel-deep:#131829; --stat:#171d30; --surface-solid:#171d30;
  --inset:#121829; --track:rgba(226,232,240,.13); --gold-wash:rgba(232,185,49,.09);
  --header:#0e1220;
  --cta-bg:#e8b931; --cta-bg-hover:#f3d267; --cta-ink:#0d1321;
  --shadow-ink:rgba(0,0,0,.5);
  /* The wordmark only. Runs dark on the left to pale on the right, per the
     logo artwork. Nothing else on the page gets a gradient fill. */
  --grad-mark:linear-gradient(90deg,#b8860b,#e8b931 45%,#f3d267);
  --f-mark:'Montserrat',system-ui,sans-serif;
  --f-disp:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-body:'DM Sans',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.4,.4,1);
  /* Near-square. Buttons were already 3px because Nolan asked for square
     buttons by name; the rest of the surfaces now agree with that. */
  --r-card:4px; --r-tile:3px; --r-pill:9999px; --r-btn:3px;
  --maxw:1280px;
  /* Header geometry. The scorecard bar sits inside the fixed header, so main
     and the mobile nav both offset by the total rather than by the nav alone. */
  --h-bar:38px; --h-nav:74px; --h-head:112px;
  /* Type scale. Four display steps and five text steps, nothing between. */
  --t-display:60px; --t-h2:42px; --t-h3:27px; --t-h4:20px;
  --t-lead:18px; --t-body:16px; --t-sm:14px; --t-xs:12px; --t-label:11px;
}
/* ═══ TOKENS: PAPER (toggle) ═══ */
:root[data-theme="light"]{
  --bg:#faf8f3; --bg-hero:#f5f2ea; --band:#f4f1e8; --surface:#ffffff;
  --gold-light:#a97b0b; --gold:#8a6408; --gold-deep:#6d4f06;
  --amber:#8a6408; --kicker:#8a6408;
  --hi:#12182a; --tx:#1e263a; --body:#39415a; --dim:#5c6478; --mute:#7b8494; --ghost:#9ba3b0;
  --pos:#0f6b46; --neg:#a32020; --warn:#8a6408;
  --bd:rgba(18,24,42,.15); --bd-soft:rgba(18,24,42,.085); --bd-strong:rgba(18,24,42,.32);
  --panel:#ffffff; --panel-deep:#f7f4ed; --stat:#ffffff; --surface-solid:#ffffff;
  --inset:#f5f2ea; --track:rgba(18,24,42,.11); --gold-wash:rgba(138,100,8,.07);
  --header:#faf8f3;
  --cta-bg:#12182a; --cta-bg-hover:#1e263a; --cta-ink:#faf8f3;
  --shadow-ink:rgba(18,24,42,.13);
  /* Same direction, pitched darker: the pale end of the dark-theme gradient
     disappears against ivory. */
  --grad-mark:linear-gradient(90deg,#7a5806,#a97b0b 45%,#c9971f);
}
html{color-scheme:dark;background:var(--bg)}
:root[data-theme="light"]{color-scheme:light}
body,header,.card,.chip,.driver,.step,.tool,.post,.quote,.pbcard,.gauge,.statstrip>div{
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease)}
@media (prefers-reduced-motion:reduce){body,header,.card,.chip,.driver,.step,.tool,.post,.quote,.pbcard,.gauge,.statstrip>div{transition:none}}

/* ═══ THEME TOGGLE ═══ */
.themebtn{flex:none;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;cursor:pointer;
  border:1px solid var(--bd);border-radius:var(--r-btn);background:none;color:var(--mute);
  transition:color .2s var(--ease),border-color .2s var(--ease)}
.themebtn:hover{color:var(--hi);border-color:var(--bd-strong)}
.themebtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Ink is the default, so the sun (switch to paper) shows first. */
.themebtn .moon{display:none}
:root[data-theme="light"] .themebtn .sun{display:none}
:root[data-theme="light"] .themebtn .moon{display:block}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--f-body);font-size:var(--t-body);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:var(--amber);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--gold-deep)}
:root[data-theme="dark"] a:hover{color:var(--gold-light)}
h1,h2,h3{margin:0;font-family:var(--f-disp);font-weight:600;color:var(--hi);letter-spacing:-.005em}
button{font-family:var(--f-body)}
input[type=range]{accent-color:var(--gold);width:100%;height:4px}
::selection{background:var(--gold-wash)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--bd-strong)}
.mono{font-family:var(--f-mono)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:32px;padding-right:32px}
section{padding:96px 0;border-top:1px solid var(--bd-soft)}
/* The header is fixed, so anchor targets have to clear it or they land
   underneath. Applies to every id since #sba and #buy sit on cards. */
[id]{scroll-margin-top:calc(var(--h-head) + 18px)}
/* Was a gradient clip. Gold is a flat accent now. */
.gold-text{color:var(--gold)}

/* ═══ LABELS ═══
   Set in the body sans, not the mono. Mono is for figures only. */
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.kicker span{font-size:var(--t-label);letter-spacing:.28em;text-transform:uppercase;color:var(--kicker);font-weight:600}
.kicker i{display:block;height:1px;width:28px;background:var(--gold);opacity:.55}
.microlabel{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:600}

/* ═══ BUTTONS ═══ */
.btn{display:inline-block;padding:15px 28px;border-radius:var(--r-btn);font-weight:700;font-size:var(--t-sm);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);cursor:pointer}
.btn-primary{background:var(--cta-bg);color:var(--cta-ink);border:1px solid var(--cta-bg)}
.btn-primary:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--cta-ink)}
.btn-ghost{border:1px solid var(--bd-strong);color:var(--tx);font-weight:600;background:none}
.btn-ghost:hover{border-color:var(--hi);color:var(--hi);background:none}
.btn-sm{padding:13px 24px;font-size:13.5px}

/* ═══ SURFACES ═══
   A card is a sheet: solid fill, one hairline rule, no shadow, no glow. */
.card{padding:34px;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--panel)}
.card-muted{border-color:var(--bd-soft);background:var(--panel-deep)}
.card-key{border-color:var(--bd-strong);background:var(--panel)}

/* ═══ HEADER ═══ */
header{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--header);border-bottom:1px solid var(--bd)}
main{padding-top:var(--h-head)}

/* Scorecard bar. One line at every width: the description drops first, then
   the label, so the strip never wraps and never changes height. */
.topbar{height:var(--h-bar);background:var(--gold-wash);border-bottom:1px solid var(--bd-soft)}
/* Two groups now: the scorecard promo and the booking link. space-between
   rather than centre, with the promo free to shrink and the link never. */
.topbar-in{max-width:var(--maxw);height:100%;margin:0 auto;padding:0 32px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;white-space:nowrap;overflow:hidden}
.topbar .tb-left{display:flex;align-items:center;gap:14px;min-width:0;overflow:hidden}
/* Booking moved up here from the main bar so the portal could take its place.
   It is safe to demote because the offer is not carried by this link: there are
   over two hundred Calendly links across the site, three to six on every
   top-level page. What the header owes a returning client is a way in, and
   there was only one of those. */
.topbar .tb-cta{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--gold);flex:none}
.topbar .tb-cta:hover{color:var(--hi)}
.topbar .tb-label{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.topbar .tb-copy{font-size:13px;color:var(--dim)}
.topbar .tb-go{font-size:13px;font-weight:700;color:var(--amber)}
.topbar .tb-go:hover{color:var(--hi)}
@media (max-width:900px){.topbar .tb-copy{display:none}}
@media (max-width:520px){.topbar .tb-label{display:none}}

.hbar{max-width:var(--maxw);margin:0 auto;padding:0 32px;height:var(--h-nav);display:flex;align-items:center;justify-content:space-between;gap:28px}
/* The wordmark, rebuilt from the logo artwork: THE centred between two rules,
   the name, then a closing rule. Montserrat, and the only gradient on the site.
   One implementation, used by the header and both footers. */
/* width:max-content so the lockup sizes to the wordmark. Without it the footer
   copy stretches to its grid column, the rules run past the name and THE
   centres over the column instead of over the mark. */
.logo{display:flex;flex-direction:column;gap:4px;flex:none;width:max-content}
.logo .rule{display:flex;align-items:center;gap:9px}
.logo .rule i{display:block;height:1px;flex:1;background:var(--grad-mark)}
.logo .the{font-family:var(--f-mark);font-size:9px;letter-spacing:.3em;font-weight:500;white-space:nowrap;
  background:var(--grad-mark);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .name{font-family:var(--f-mark);font-size:17px;font-weight:500;letter-spacing:.1em;line-height:1.15;
  white-space:nowrap;background:var(--grad-mark);-webkit-background-clip:text;background-clip:text;color:transparent}
.logo .underrule{display:block;height:1px;background:var(--grad-mark)}
nav{display:flex;align-items:center;gap:2px;font-size:13.5px;font-weight:500}
.navitem{position:relative}
.navlink{display:flex;align-items:center;gap:6px;padding:10px 13px;color:var(--tx);border-radius:var(--r-btn);
  transition:color .2s var(--ease),background .2s var(--ease)}
.navlink:hover{background:var(--inset);color:var(--hi)}
.navlink .caret{font-size:8px;opacity:.5}
.dropdown{position:absolute;top:100%;left:0;padding-top:9px;z-index:70;opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s var(--ease),transform .15s var(--ease)}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropinner{min-width:266px;padding:7px;border-radius:var(--r-card);border:1px solid var(--bd);
  background:var(--surface-solid);box-shadow:0 12px 28px var(--shadow-ink)}
.dropinner a{display:block;padding:11px 13px;border-radius:var(--r-tile);color:var(--tx);transition:background .15s var(--ease)}
.dropinner a:hover{background:var(--inset);color:var(--hi)}
.dropinner b{display:block;font-weight:600;font-size:13.5px}
.dropinner em{display:block;font-style:normal;font-size:11.5px;color:var(--mute);margin-top:2px}
.hcta{flex:none;padding:11px 19px;border-radius:var(--r-btn);background:var(--cta-bg);color:var(--cta-ink);font-weight:700;font-size:13px;
  border:1px solid var(--cta-bg);transition:background .2s var(--ease),border-color .2s var(--ease)}
.hcta:hover{background:var(--cta-bg-hover);border-color:var(--cta-bg-hover);color:var(--cta-ink)}
/* Portal entry inside the collapsed menu. Hidden on desktop, where the button
   in the bar covers it, and shown from 1140px down where that button is gone.
   nav.mainnav is itself display:none until .open, so this only ever appears in
   an opened menu rather than duplicating the button. */
.navportal{display:none}
.menubtn{display:none;background:none;border:1px solid var(--bd-strong);color:var(--tx);border-radius:var(--r-btn);padding:9px 13px;font-size:13px;cursor:pointer}

/* ═══ HERO ═══ */
#hero{position:relative;overflow:hidden;padding:0;border-top:none;background:var(--bg-hero)}
.hero-grid{position:relative;padding-top:92px;padding-bottom:72px;display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
.hero-grid>*{min-width:0}
h1{font-size:var(--t-display);line-height:1.06;text-wrap:balance}
.lede{margin:26px 0 0;max-width:540px;font-size:var(--t-lead);line-height:1.62;color:var(--dim);text-wrap:pretty}
.ctarow{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.fineprint{margin:22px 0 0;font-size:var(--t-xs);color:var(--mute)}
.heroframe{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--bd)}
.floatstat{position:absolute;left:-28px;bottom:-24px;padding:18px 22px;border-radius:var(--r-card);
  border:1px solid var(--bd);background:var(--surface)}
.floatstat .fn{font-size:16px;font-weight:700;color:var(--hi);line-height:1.2}
.floatstat .fr{font-size:var(--t-xs);color:var(--dim);margin-top:7px;line-height:1.5}
.eyebrow-rule{margin:0;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:600}

/* image slots: drop an <img> inside; it covers the placeholder.
   If the file is missing the img removes itself and the placeholder shows through. */
.slot{position:relative;display:flex;align-items:center;justify-content:center;background:var(--inset);
  color:var(--ghost);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:12px}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot img.top{object-position:50% 22%}
/* For portraits framed tight at the top, where 22% already cuts the head. */
.slot img.crop-top{object-position:50% 0}

/* ═══ PAGE FIGURE ═══
   A photograph on a service page, beside or beneath the copy it illustrates.
   The frame matches .heroframe and the caption matches .prose .inlinefig, so
   the site keeps one frame and one caption treatment. The img sits in a .slot
   so a missing file degrades to the labeled placeholder like everywhere else.
   Used by the five service pages, which is why it is here and not inline. */
.pagefig{margin:0}
.pagefig .slot{aspect-ratio:16/10;border:1px solid var(--bd);border-radius:var(--r-card);overflow:hidden}
.pagefig figcaption{margin-top:11px;padding-left:14px;border-left:2px solid var(--gold);
  font-size:13px;line-height:1.55;color:var(--mute)}

/* ═══ STAT STRIP ═══ */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd-soft);border:1px solid var(--bd);border-radius:var(--r-card);overflow:hidden}
.statstrip>div{padding:26px 24px;background:var(--stat)}
.statstrip .n{font-family:var(--f-mono);font-size:29px;font-weight:700;color:var(--hi);line-height:1}
.statstrip .d{font-family:var(--f-disp);font-size:var(--t-h4);font-weight:600;color:var(--hi);line-height:1.3}
.statstrip .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:12px}
.statstrip .l{font-size:var(--t-xs);color:var(--mute);margin-top:9px;line-height:1.45}

/* ═══ SECTION HEADS ═══ */
.sechead{max-width:720px;margin-bottom:52px}
.sechead h2{font-size:var(--t-h2);line-height:1.13}
.sechead p{margin:20px 0 0;font-size:16.5px;line-height:1.65;color:var(--dim)}

/* ═══ CALCULATORS ═══ */
.lab{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:start}
.lab>*{min-width:0}
.field{margin-bottom:26px}
.fieldhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.fieldhead span:first-child{font-size:13.5px;color:var(--body);font-weight:500}
.fieldhead output{font-family:var(--f-mono);font-size:16px;font-weight:700;color:var(--hi)}
.hint{font-size:11.5px;color:var(--mute);margin-top:8px;line-height:1.5}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.chip{padding:9px 15px;border-radius:var(--r-btn);cursor:pointer;font-size:12.5px;font-weight:600;transition:all .2s var(--ease);
  border:1px solid var(--bd);background:none;color:var(--dim)}
.chip[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);color:var(--gold)}
.drivers{display:grid;gap:8px}
.driver{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 16px;border-radius:var(--r-tile);
  cursor:pointer;font-size:13.5px;font-weight:500;transition:all .2s var(--ease);
  border:1px solid var(--bd);background:none;color:var(--dim)}
.driver[aria-pressed="true"]{border-color:var(--gold);background:var(--gold-wash);color:var(--hi)}
.driver .w{font-family:var(--f-mono);font-size:12px}
.bignum{font-family:var(--f-mono);font-size:48px;font-weight:700;line-height:1.05;margin-top:14px;color:var(--hi);letter-spacing:-.02em}
.rangebar{margin:26px 0 8px;height:6px;border-radius:var(--r-pill);background:var(--track);position:relative;overflow:hidden}
.rangebar .fill{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--gold);opacity:.45}
.rangebar .marker{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--hi);transition:left .35s var(--spring)}
.rangeends{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:11px;color:var(--mute)}
.datalist{margin-top:28px;display:grid;gap:1px;background:var(--bd-soft);border:1px solid var(--bd-soft);border-radius:var(--r-tile);overflow:hidden}
.datalist div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 16px;background:var(--inset);font-size:13px}
.datalist div span:first-child{color:var(--dim)}
.datalist div span:last-child{font-family:var(--f-mono);color:var(--hi);font-weight:500}
.disclaimer{margin:20px 0 0;font-size:var(--t-xs);line-height:1.6;color:var(--mute)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--bd-soft);border:1px solid var(--bd-soft);border-radius:var(--r-tile);overflow:hidden;margin-bottom:22px}
.kpis>div{padding:20px;background:var(--inset)}
.kpis .k{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--mute);margin-bottom:9px}
.kpis .v{font-family:var(--f-mono);font-size:22px;font-weight:700;color:var(--hi)}
.gauge{padding:22px;border-radius:var(--r-tile);border:1px solid var(--bd-soft);background:var(--inset)}
.gaugebar{height:6px;border-radius:var(--r-pill);background:var(--track);overflow:hidden;position:relative}
.gaugebar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:var(--r-pill);transition:width .4s var(--ease),background .2s var(--ease)}
.gaugebar .floor{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--dim)}

/* ═══ GRIDS ═══ */
.g2,.g3,.g4{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr);gap:28px}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2>*,.g3>*,.g4>*{min-width:0}

/* ═══ PANELS ═══ */
.panel{padding:44px;display:flex;flex-direction:column}
.panel h3{font-size:32px;line-height:1.16}
.panel p{margin:18px 0 26px;font-size:15.5px;line-height:1.7;color:var(--dim)}
.numlist{display:grid;gap:12px;margin-bottom:30px}
/* A list straight after a heading gets the space a <p> would have given it,
   so panels with and without an intro paragraph line up. */
.panel h3+.numlist{margin-top:24px}
.numlist div{display:flex;gap:14px;align-items:flex-start}
.numlist .n{color:var(--gold);font-family:var(--f-mono);font-size:12px;padding-top:3px}
.numlist p{margin:0;font-size:14.5px;color:var(--body);line-height:1.55}
.panel .go{margin-top:auto;align-self:flex-start}

/* ═══ PHASES ═══
   A ledger grid: hairline gutters, no rounding inside. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd-soft);
  border:1px solid var(--bd);border-radius:var(--r-card);overflow:hidden}
.steps>*{min-width:0}
.step{background:var(--stat);padding:34px 30px;transition:background .2s var(--ease)}
.step:hover{background:var(--inset)}
.step .sn{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;
  letter-spacing:.2em;color:var(--gold)}
.step .sn::after{content:"";flex:1;height:1px;background:var(--bd-soft)}
.step h3{font-size:21px;margin-top:18px;line-height:1.25}
.step p{margin:12px 0 0;font-size:13.5px;line-height:1.65;color:var(--dim)}
.step.final{background:var(--gold-wash)}
.timerail{display:flex;align-items:center;gap:16px;margin:0 0 26px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.timerail i{flex:1;height:1px;background:var(--bd)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.steps{grid-template-columns:1fr}}

/* ═══ TOOL CARDS ═══ */
.tool{display:block;padding:32px;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--panel);color:inherit;
  transition:border-color .2s var(--ease)}
.tool:hover{border-color:var(--bd-strong);color:inherit}
.tool .tag{font-size:10px;color:var(--gold);letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:18px}
.tool h3{font-size:24px;margin-bottom:10px}
.tool p{margin:0;font-size:var(--t-sm);line-height:1.6;color:var(--dim)}
.tool .go{margin-top:20px;font-size:13.5px;font-weight:600;color:var(--amber)}

/* ═══ REVIEWS ═══ */
.ratingwrap{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:0;
  border:1px solid var(--bd);border-radius:var(--r-card);overflow:hidden;background:var(--panel)}
.ratingbig{padding:40px 36px;border-right:1px solid var(--bd-soft);display:flex;flex-direction:column;justify-content:center}
.ratingbig .score{font-family:var(--f-mono);font-size:62px;font-weight:700;line-height:1;color:var(--hi);letter-spacing:-.02em}
.ratingbig .stars{margin-top:14px;font-size:19px;letter-spacing:.16em;color:var(--gold)}
.ratingbig .scorenote{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--mute)}
.ratingstats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bd-soft)}
.ratingstats>div{padding:34px 26px;background:var(--stat);display:flex;flex-direction:column;justify-content:center}
.ratingstats .rn{font-family:var(--f-disp);font-size:21px;font-weight:600;color:var(--hi);line-height:1}
.ratingstats .rl{margin-top:11px;font-size:12.5px;line-height:1.5;color:var(--mute)}
@media (max-width:940px){
  .ratingwrap{grid-template-columns:1fr}
  .ratingbig{border-right:none;border-bottom:1px solid var(--bd-soft)}
  .ratingstats{grid-template-columns:1fr}
}

/* ═══ TESTIMONIALS ═══
   Ruled columns, not boxes. The rule above the quote does the work the
   border used to do, and the copy sits on the page instead of in a tray. */
.pill{display:inline-block;padding:5px 12px;border-radius:var(--r-btn);border:1px solid var(--bd);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.quote{margin:0;padding:26px 0 0;border-top:2px solid var(--hi);display:flex;flex-direction:column;background:none}
.quote blockquote{margin:0;font-family:var(--f-disp);font-size:16px;line-height:1.65;color:var(--tx);text-wrap:pretty}
.quote figcaption{margin-top:auto;padding-top:24px}
.quote .who{display:block;font-size:var(--t-sm);font-weight:700;color:var(--hi);line-height:1.2}
.quote .ctx{display:block;font-size:13px;color:var(--dim);margin-top:6px;line-height:1.5}
.quote .src{display:block;margin-top:12px;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;font-weight:600;color:var(--mute)}

/* ═══ AI DIVISION ═══
   Scoped blue so the division reads as a separate practice, but the same
   materials as the rest of the page. It is a department of this firm, not
   a second website embedded in the first one. */
#ai{--ai:#00C9FF; --ai-deep:#7CE8FF; --ai-ink:#05070D;
    --ai-wash:rgba(0,201,255,.08); --ai-bd:rgba(0,201,255,.26); --ai-bd-hi:rgba(0,201,255,.55)}
:root[data-theme="light"] #ai{--ai:#0b5f86; --ai-deep:#08475f; --ai-ink:#ffffff;
    --ai-wash:rgba(11,95,134,.06); --ai-bd:rgba(11,95,134,.26); --ai-bd-hi:rgba(11,95,134,.55)}
#ai .kicker span{color:var(--ai)}
#ai .kicker i{background:var(--ai)}

/* The division's own background, carried over from ai.nolanscottteam.com:
   a cyan wash behind the content and a rising particle field. Decorative, so
   the canvas is aria-hidden and skipped entirely under reduced motion. */
.orb{position:absolute;border-radius:50%;pointer-events:none}
@keyframes drift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(40px,-30px,0) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.orb{animation:none}}
#ai-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.85}
:root[data-theme="light"] #ai-particles{opacity:.45}
@media (prefers-reduced-motion:reduce){#ai-particles{display:none}}
.pbcard{display:block;padding:26px;border-radius:var(--r-card);border:1px solid var(--bd);background:var(--panel);
  color:inherit;transition:border-color .2s var(--ease)}
.pbcard:hover{border-color:var(--ai-bd-hi);color:inherit}
.pbcard .sub{display:flex;align-items:center;gap:10px;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ai);margin:0 0 16px}
.pbcard .sub::before{content:"";display:block;width:16px;height:1px;background:var(--ai);flex:none}
.pbcard .ind{font-family:var(--f-disp);font-size:var(--t-h4);font-weight:600;color:var(--hi);line-height:1.3}
.pbcard ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.pbcard li{position:relative;padding-left:18px;font-size:12.5px;line-height:1.55;color:var(--dim)}
.pbcard li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:1px;background:var(--ai)}
.pbcard .go{margin-top:20px;font-size:12.5px;font-weight:600;color:var(--ai)}
.pbcard .new{display:inline-block;margin-left:7px;padding:2px 7px;border-radius:var(--r-btn);
  border:1px solid var(--ai-bd);font-size:8.5px;letter-spacing:.16em;font-weight:700;color:var(--ai);vertical-align:middle}
.btn-ai{background:var(--ai);color:var(--ai-ink);border:1px solid var(--ai)}
.btn-ai:hover{background:var(--ai-deep);border-color:var(--ai-deep);color:var(--ai-ink)}
.btn-ai-line{border:1px solid var(--ai-bd);color:var(--ai);background:none}
.btn-ai-line:hover{border-color:var(--ai);color:var(--ai);background:none}
.aistrip{margin:0 0 34px;padding:0 0 0 22px;border-left:2px solid var(--ai);background:none;
  font-family:var(--f-disp);font-size:17px;line-height:1.6;color:var(--tx)}

/* ═══ TEAM ═══ */
.memb{padding:0;overflow:hidden;display:flex;flex-direction:column}
.memb .portrait{width:100%;aspect-ratio:4/5}
.memb .mbody{padding:30px;display:flex;flex-direction:column;flex:1}
.memb h3{font-size:26px}
.memb .role{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-top:10px;line-height:1.6}
.memb p{margin:18px 0 0;font-size:14.5px;line-height:1.7;color:var(--dim)}
.memb .creds{margin-top:auto;padding-top:22px}
/* compact person card: support roles, not principals */
.person{display:flex;gap:18px;align-items:center}
/* Square rather than round: it matches the near-square radius the rest of the
   site uses, and a circle crops a portrait twice. */
.person .headshot{width:78px;height:78px;flex:none;border-radius:var(--r-tile);overflow:hidden}
.person .pn{font-size:16px;font-weight:700;color:var(--hi)}
.person .pr{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute);margin-top:6px}
.creds{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.creds span{padding:5px 10px;border-radius:var(--r-btn);border:1px solid var(--bd);
  font-size:10px;letter-spacing:.1em;font-weight:600;color:var(--dim)}

/* ═══ WRITING ═══
   Ruled entries rather than cards, so the section reads as a contents page. */
.post{display:flex;flex-direction:column;padding:24px 0 0;border-top:1px solid var(--bd-strong);
  background:none;color:inherit;transition:border-color .2s var(--ease)}
a.post:hover{border-top-color:var(--gold);color:inherit}
/* Index thumbnails. The rule above the card still carries the structure, so
   the image sits under it rather than becoming the top edge of a box. */
.post .postthumb{width:100%;aspect-ratio:16/9;border-radius:var(--r-tile);
  overflow:hidden;margin-bottom:20px;font-size:10px}
.post .postthumb img{transition:transform .4s var(--ease)}
a.post:hover .postthumb img{transform:scale(1.03)}
.post .tag{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold)}
.post h3{font-size:var(--t-h4);line-height:1.35;margin-top:14px}
.post p{margin:12px 0 0;font-size:13.5px;line-height:1.7;color:var(--dim)}
.post .pmeta{margin-top:auto;padding-top:22px;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
/* ═══ SOCIAL ═══
   Icon tiles rather than text buttons. Five platform names in a row read as a
   list of chores; the marks are recognised without being read.

   The glyphs are CSS masks, not <img>. Three reasons that is the right call
   here: one definition serves all 24 pages instead of a file per platform,
   `background: currentColor` means the mark recolours itself on hover and in
   the paper theme with no second asset, and there is no request to fail, so
   the onerror placeholder convention does not apply. Adding a platform is a
   path plus a class, and nothing new lands in img/.

   The link carries aria-label because there is no text inside it. */
/* Declared here rather than up in the token block on purpose: these are brand
   glyphs, not design tokens, they need no paper override, and a wall of path
   data in :root would bury the colours that block exists to make findable. */
:root{
  --ic-li:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.41v1.56h.05c.48-.9 1.63-1.85 3.36-1.85 3.6 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.72V1.72C24 .77 23.2 0 22.22 0z'/%3E%3C/svg%3E");
  --ic-yt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.88.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.55 15.57V8.43L15.82 12l-6.27 3.57z'/%3E%3C/svg%3E");
  --ic-ig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63c-.79.3-1.46.71-2.13 1.38S.93 3.35.63 4.14c-.3.76-.5 1.64-.56 2.91C.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91.3.79.71 1.46 1.38 2.13s1.34 1.08 2.13 1.38c.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56.79-.3 1.46-.71 2.13-1.38s1.08-1.34 1.38-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91-.3-.79-.71-1.46-1.38-2.13S20.65.93 19.86.63c-.76-.3-1.64-.5-2.91-.56C15.67.01 15.26 0 12 0zm0 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z'/%3E%3C/svg%3E");
  --ic-tt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E");
  --ic-fb:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.26h3.33l-.53 3.49h-2.8V24C19.61 23.09 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}
.socialrow{display:flex;gap:8px;flex-wrap:wrap}
.soc{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border:1px solid var(--bd);border-radius:var(--r-btn);
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.soc::before{content:'';width:17px;height:17px;background:var(--dim);
  transition:background .2s var(--ease);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.soc:hover{border-color:var(--gold);background:var(--inset)}
.soc:hover::before{background:var(--gold)}
.soc:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.soc-li::before{-webkit-mask-image:var(--ic-li);mask-image:var(--ic-li)}
.soc-yt::before{-webkit-mask-image:var(--ic-yt);mask-image:var(--ic-yt)}
.soc-ig::before{-webkit-mask-image:var(--ic-ig);mask-image:var(--ic-ig)}
.soc-tt::before{-webkit-mask-image:var(--ic-tt);mask-image:var(--ic-tt)}
.soc-fb::before{-webkit-mask-image:var(--ic-fb);mask-image:var(--ic-fb)}

/* ═══ CLOSER ═══ */
#closer{position:relative;padding:104px 0;background:var(--bg-hero)}
.closerbox{position:relative;max-width:820px;margin:0 auto;text-align:center}
.closerbox h2{font-size:48px;line-height:1.1;text-wrap:balance}
.closerbox p{margin:24px auto 0;max-width:600px;font-size:17px;line-height:1.7;color:var(--dim)}
.badges{display:flex;justify-content:center;align-items:center;gap:30px;flex-wrap:wrap;margin-top:52px;padding-top:36px;border-top:1px solid var(--bd)}
.badges span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute)}

/* ═══ FOOTER ═══ */
footer{padding:64px 0 40px;border-top:1px solid var(--bd);background:var(--bg)}
/* Five children, not four: the wordmark block plus four nav columns. It was
   1.4fr 1fr 1fr 1fr, so the fifth child wrapped onto a second row underneath
   the wordmark and the footer read as broken. Any column added here needs a
   track adding with it. */
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:40px 30px;
  padding-bottom:44px;border-bottom:1px solid var(--bd-soft)}
.fgrid h4{margin:0 0 16px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);font-weight:600}
.fgrid nav{display:grid;gap:10px;font-size:13.5px}
.fgrid nav a{color:var(--dim)}
.fgrid nav a:hover{color:var(--hi)}
/* Affiliation strip. Every mark is forced to a single ink so seven logos in
   seven brand colours do not turn the footer into a sticker sheet:
   brightness(0) flattens to black, invert(1) then flips it white for the dark
   theme. One rule handles any logo added later, colour or not. */
/* The band was padded 32px above and 4px below, so the marks sat almost on the
   rule that closes it. Even padding, and the row-gap covers the wrap case. */
.flogos{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:26px 38px;padding:30px 0;border-bottom:1px solid var(--bd-soft)}
/* brightness(0) invert(1) paints every OPAQUE pixel white, which is only what
   you want for transparent line art. A white-background JPEG or a filled badge
   has no transparency to spare, so the whole shape turns into a solid block.
   Marks that arrived that way get a real alpha channel first, in
   tools/make-logo-masks.ps1, and are used here as logo-*-mono.png. Adding an
   opaque logo to this row without running that script puts a grey rectangle in
   the footer, which is exactly how it shipped. */
/* Every mark in this row carries width and height ATTRIBUTES in the markup,
   and they are load bearing rather than tidiness. height is set here and width
   is auto, so with no intrinsic size the box is zero pixels wide until the
   bytes arrive. A zero-area box never intersects the viewport, loading="lazy"
   therefore never fires, the bytes never arrive, and the row collapses to a
   band of empty space with alt text in it. That is a loop, not a slow load,
   and it is what shipped. The attributes give the box an aspect ratio to
   reserve space with, which breaks the loop. Do not strip them. */
.flogos img{height:26px;width:auto;opacity:.5;
  filter:grayscale(1) brightness(0) invert(1);transition:opacity .2s var(--ease)}
.flogos img:hover{opacity:.85}
/* Tall narrow marks carry little whitespace, so they need the extra height to
   read at the same size as a wordmark. */
.flogos img.tall{height:34px}
/* Circular badges are the opposite case: the full height is ink, so matching
   the wordmarks' 26px would still read as the heaviest thing in the row. They
   were on .tall at 34px, which is why they looked like two grey coins. */
.flogos img.badge{height:29px}
:root[data-theme="light"] .flogos img{filter:grayscale(1) brightness(0);opacity:.45}
@media (max-width:820px){.flogos{gap:20px 26px;padding:24px 0}
  .flogos img{height:20px}.flogos img.tall{height:26px}.flogos img.badge{height:23px}}

.fbottom{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:26px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--mute)}
.fbottom a{color:var(--mute)}
.fbottom a:hover{color:var(--hi)}
.faddr{margin:18px 0 0;font-size:13.5px;line-height:1.7;color:var(--dim);max-width:300px}

/* ═══ ARTICLE PROSE ═══
   Long-form body copy for /post/*. Measure is capped in ch rather than px so
   the line length holds regardless of the type scale. */
.artwrap{max-width:1280px;margin:0 auto;padding:0 32px;display:grid;
  grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:start}
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:22px;
  font-size:12px;letter-spacing:.06em;color:var(--mute)}
.artmeta .dot{width:3px;height:3px;border-radius:50%;background:var(--mute)}
.prose{max-width:72ch;font-size:17px;line-height:1.78;color:var(--body)}
.prose>*:first-child{margin-top:0}
/* A rule above every h2 so a long article reads as sections rather than as
   one continuous wall, matching how the marketing pages are divided. */
.prose h2{font-size:28px;line-height:1.25;margin:52px 0 0;padding-top:30px;
  border-top:1px solid var(--bd-soft);color:var(--hi)}
.prose>h2:first-child{margin-top:0;padding-top:0;border-top:none}
.prose .lead{font-size:19px;line-height:1.7;color:var(--tx)}
/* Hero image. Degrades to a labeled placeholder like every other slot.
   16:8 rather than 16:7: most of the stock is 4:3 or 3:2, and the wider the
   frame the more height gets cropped away, which is what was decapitating
   people. This costs a little drama and saves the subject. */
.arthero{margin:32px 0 36px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--bd);aspect-ratio:16/8}
/* Contents rail in the sidebar, built from the h2s */
.toc{display:grid;gap:2px}
.toc a{display:block;font-size:12.5px;line-height:1.45;color:var(--dim);
  padding:7px 0 7px 14px;border-left:1px solid var(--bd);transition:color .2s var(--ease),border-color .2s var(--ease)}
.toc a:hover{color:var(--gold);border-left-color:var(--gold)}

/* ═══ FAQ DISCLOSURE ═══
   Shared: used by the four marketing pages and every article. */
.faq{border:1px solid var(--bd-soft);border-radius:var(--r-tile);background:var(--panel);
  margin-bottom:12px;overflow:hidden;transition:border-color .25s var(--ease)}
.faq[open]{border-color:var(--bd)}
.faq summary{cursor:pointer;list-style:none;padding:22px 26px;font-size:16.5px;font-weight:700;
  color:var(--tx);display:flex;align-items:center;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);font-size:21px;color:var(--gold);
  flex:none;transition:transform .25s var(--ease)}
.faq[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--hi)}
.faqbody{padding:0 26px 24px}
.faqbody p{margin:0;font-size:14.5px;line-height:1.8;color:var(--dim);max-width:78ch}
/* Breadcrumb line above an article or page title */
.crumb{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ghost);margin-bottom:26px}
.crumb a{color:var(--mute)}
.crumb a:hover{color:var(--gold)}
.prose h3{font-size:20px;line-height:1.35;margin:34px 0 0;color:var(--hi)}
.prose p{margin:18px 0 0}
.prose ul,.prose ol{margin:18px 0 0;padding-left:20px}
.prose li{margin:9px 0}
.prose li::marker{color:var(--gold)}
.prose strong{color:var(--hi);font-weight:700}
.prose a{text-decoration:underline;text-underline-offset:3px}
.prose blockquote{margin:26px 0 0;padding-left:20px;border-left:2px solid var(--gold);
  font-family:var(--f-disp);font-size:19px;line-height:1.6;color:var(--tx)}
.prose figure{margin:28px 0 0}
/* Inline art sits under the section it illustrates, with air above so it reads
   as a break in the argument rather than as an interruption of a paragraph. */
.prose .inlinefig{margin:44px 0 0}
.prose .inlinefig img{width:100%;aspect-ratio:16/8;object-fit:cover;
  border-radius:var(--r-card);border:1px solid var(--bd)}
/* Square stat cards are composed images: cropping one deletes its header and
   footer, so they opt out of the 16:8 crop and render whole, slightly
   narrower than the column so a square does not tower over the prose. */
.prose .inlinefig.statcard{max-width:520px;margin-left:auto;margin-right:auto}
.prose .inlinefig.statcard img{aspect-ratio:auto;object-fit:unset}
.prose .inlinefig figcaption{margin-top:11px;padding-left:14px;
  border-left:2px solid var(--gold);font-size:13px;line-height:1.55;color:var(--mute)}
/* A heading straight after a figure keeps its rule but loses the big gap. */
.prose .inlinefig+h2{margin-top:44px}
.prose img{max-width:100%;height:auto;border-radius:var(--r-tile);display:block}
.prose figcaption{margin-top:10px;font-size:12.5px;color:var(--mute)}
/* Sticky sidebar rail beside the article */
.artside{position:sticky;top:calc(var(--h-head) + 24px);display:grid;gap:16px}
@media (max-width:1060px){
  .artwrap{grid-template-columns:1fr;gap:44px}
  .artside{position:static}
}

/* ═══ IMAGE FOCAL POINTS ═══
   object-fit:cover crops equally off both edges, so a 16:7 hero cut from a 4:3
   source loses about 45% of its height and takes heads and building tops with
   it. The focal point belongs to the photograph, not to where it is placed, so
   these are keyed by filename and apply everywhere the file is used: hero,
   inline figure, index thumbnail. Lower percentage keeps more of the top.
   Headshots are excluded: .top and .crop-top set their own and are more
   specific. */
img[src$="atlanta-skyline-day.jpg"]{object-position:50% 22%}
img[src$="atlanta-skyline-night.jpg"]{object-position:50% 28%}
img[src$="atlanta-skyline-sunset.jpg"]{object-position:50% 30%}
img[src$="office-building-modern.jpg"]{object-position:50% 18%}
img[src$="home-services-technician.jpg"]{object-position:50% 12%}
img[src$="woodworker-shop-saw.jpg"]{object-position:62% 40%}
img[src$="brick-warehouse-autumn.jpg"]{object-position:50% 40%}
img[src$="home-interior-kitchen.jpg"]{object-position:50% 45%}
img[src$="atlanta-skyline-golden-hour.jpg"]{object-position:30% 50%}
img[src$="advisors-whiteboard-review.jpg"]{object-position:50% 35%}
img[src$="medical-practice-corridor.jpg"]{object-position:50% 16%}
img[src$="workshop-craftsman.jpg"]{object-position:50% 26%}
img[src$="owner-portrait-cafe.jpg"]{object-position:50% 26%}
img[src$="advisor-client-meeting.jpg"]{object-position:50% 30%}
img[src$="hvac-technician-rooftop.jpg"]{object-position:50% 38%}
img[src$="restaurant-interior.jpg"]{object-position:50% 42%}

/* ═══ TRANSACTION DATA BAND ═══
   Facts under a case study. Column count is set inline per use, since it
   varies with how many figures a given deal has worth stating. */
.tband{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bd-soft);
  border:1px solid var(--bd);border-radius:var(--r-card);overflow:hidden}
.tband>div{background:var(--stat);padding:20px}
.tband .tk{font-size:10px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--mute);margin-bottom:9px}
.tband .tv{font-family:var(--f-mono);font-size:19px;font-weight:700;color:var(--hi);line-height:1.2}
.tband .tv.sm{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--dim);line-height:1.45}
@media (max-width:820px){.tband{grid-template-columns:1fr!important}}
/* #re-grid carries grid-template-columns as an INLINE style, so a plain rule
   here loses to it and the block stays three columns at every width. On a phone
   that is one word per line and the third column clipped off the right edge.
   !important is not laziness, it is the only thing that beats an inline style
   short of editing the markup. Same reason .tband above has it. */
@media (max-width:820px){#re-grid{grid-template-columns:1fr!important;gap:32px!important;padding:32px!important}}

/* ═══ GATED RESULTS ═══
   The sliders stay open. The number is what gets gated, at the moment the
   visitor most wants it. The form posts to Netlify Forms and only unlocks on a
   successful POST, so the blur is not decoration: see assets/site.js. .hp is
   the honeypot and must stay invisible to people and reachable to bots, which
   is why it is display:none rather than hidden with an attribute. */
.gated{position:relative}
.gated .gate-blur{filter:blur(9px);opacity:.5;pointer-events:none;user-select:none;transition:filter .4s var(--ease),opacity .4s var(--ease)}
.gated.open .gate-blur{filter:none;opacity:1;pointer-events:auto;user-select:auto}
.gatecard{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;
  width:min(100%,340px);padding:26px;border-radius:var(--r-card);
  border:1px solid var(--bd-strong);background:var(--panel);text-align:center}
.gated.open .gatecard{display:none}
.gatecard .gl{font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:12px}
.gatecard h4{margin:0;font-family:var(--f-disp);font-size:21px;font-weight:600;line-height:1.3;color:var(--hi)}
.gatecard p{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--dim)}
.gateform{display:grid;gap:9px;margin-top:20px}
.gateform input{width:100%;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--bd);
  background:var(--inset);color:var(--tx);font-family:var(--f-body);font-size:14px}
.gateform input::placeholder{color:var(--mute)}
.gateform input:focus{outline:none;border-color:var(--gold)}
.gateform button{width:100%;border:none}
.gateform button[disabled]{opacity:.55;cursor:default}
.gateform .hp{display:none}
/* Two classes deep on purpose: .gatecard p already claims a color, and a
   one-class rule loses to it, so the error would render in --dim. */
.gateform .gate-err{margin:2px 0 0;font-size:12px;line-height:1.55;color:var(--neg);text-align:left}
.gateform .gate-err[hidden]{display:none}
.gatecard .fine{margin:12px 0 0;font-size:11px;line-height:1.55;color:var(--mute)}

/* ═══ LEGAL PAGES ═══
   The effective-date block under the title on /terms and /privacy. Its own
   rule rather than borrowing .lead, which is 19px display copy sized to open
   an article and far too loud for two lines of administrative metadata. */
.legalmeta{margin:20px 0 0;font-size:14px;line-height:1.7;color:var(--mute)}

/* ═══ OPT-IN FORM ═══
   Home page, /terms and /privacy, so by the three-page rule it lives here
   rather than inline. The heading and intro differ per page and are markup;
   everything structural is shared.

   The SMS consent checkbox is not optional decoration. Carriers require an
   explicit, unchecked opt-in with the programme name, frequency, rates, STOP
   and HELP wording and links to both policies before they will approve A2P
   messaging. Do not pre-check it, do not shorten the label, and do not make
   submission depend on it: the Terms say consent is not a condition of any
   service, so gating the form on it would contradict the page it sits on. */
.optin{border:1px solid var(--bd);border-radius:var(--r-card);
  background:var(--panel);padding:32px}
.optin h3{font-family:var(--f-disp);font-size:var(--t-h3);font-weight:600;
  line-height:1.2;color:var(--hi);margin:0 0 10px}
.optin .oi-sub{font-size:14.5px;line-height:1.65;color:var(--dim);margin:0 0 24px;max-width:56ch}
.oi-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.oi-field{display:flex;flex-direction:column;gap:7px}
.oi-field.wide{grid-column:1 / -1}
.oi-field label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--mute)}
.oi-field label .req{color:var(--gold)}
.optin input[type="text"],.optin input[type="email"],.optin input[type="tel"],.optin textarea{
  width:100%;padding:12px 14px;border-radius:var(--r-btn);border:1px solid var(--bd);
  background:var(--inset);color:var(--tx);font-family:var(--f-body);font-size:14.5px}
.optin textarea{min-height:96px;resize:vertical;line-height:1.6}
.optin input:focus,.optin textarea:focus{outline:none;border-color:var(--gold)}
.optin input::placeholder,.optin textarea::placeholder{color:var(--ghost)}
/* Checkbox rows. The native box is kept rather than replaced with a styled
   span: a consent control that assistive technology cannot identify is worth
   nothing legally, whatever it looks like. */
.oi-check{display:flex;gap:12px;align-items:flex-start;margin-top:22px}
.oi-check input[type="checkbox"]{width:17px;height:17px;flex:none;margin-top:2px;
  accent-color:var(--gold);cursor:pointer}
.oi-check span{font-size:12.5px;line-height:1.65;color:var(--dim)}
.oi-check a{color:var(--dim);text-decoration:underline;text-underline-offset:2px}
.oi-check a:hover{color:var(--gold)}
.oi-hp{display:none}
.optin .oi-submit{margin-top:24px}
.oi-err{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--neg)}
.oi-err[hidden]{display:none}
/* Replaces the form on success rather than sitting above it, so there is no
   filled-in form still on screen inviting a second submission. */
.oi-done{display:none;padding:8px 0}
.optin.sent .oi-body{display:none}
.optin.sent .oi-done{display:block}
.oi-done p{font-size:15px;line-height:1.7;color:var(--body);margin:0}
.oi-done .oi-tick{font-family:var(--f-mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin-bottom:10px}
@media (max-width:600px){.optin{padding:24px}.oi-grid{grid-template-columns:1fr}}

/* ═══ REVEALS ═══
   Shorter and shallower than before. Content should arrive, not perform. */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ═══ RESPONSIVE ═══ */
@media (max-width:1140px){
  nav.mainnav{display:none} .menubtn{display:block}
  /* The bar needs 643px of children at a 455px viewport: wordmark 207, theme
     36, menu 61, CTA 191, plus 28px gaps and 64px of padding. It overflowed
     the right edge, and body{overflow-x:clip} meant it was cut off rather than
     scrollable, so the CTA was sliced mid-word on every page.
     The CTA is the piece to drop: it is the largest, and it is the only one
     that is duplicated elsewhere, since every page opens with the same call to
     action and the menu carries the booking links. */
  .hbar{gap:16px}
  /* The bar cannot carry it at this width. The portal is not dropped though,
     it moves into the menu below, so a client on a phone still has a way in.
     Booking stays reachable in the top strip. */
  .hcta{display:none}
  .navportal{display:block}
  nav.mainnav.open{display:flex;position:absolute;top:var(--h-head);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:12px 20px 20px;background:var(--header);border-bottom:1px solid var(--bd)}
  nav.mainnav.open .dropdown{position:static;opacity:1;visibility:visible;transform:none;padding-top:0}
  nav.mainnav.open .dropinner{border:none;background:none;box-shadow:none;padding:0 0 8px 14px;min-width:0}
}
@media (max-width:1060px){
  .hero-grid,.lab,.g2{grid-template-columns:1fr}
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  h1{font-size:44px} .sechead h2{font-size:34px} .closerbox h2{font-size:38px}
  /* Kills the sticky column on narrow screens, but NOT with position:static.
     #gate-val is also .gated, and .gated{position:relative} is the containing
     block for .gatecard, which is absolutely positioned at 50%/50%. Take the
     containing block away and the card resolves against an ancestor further
     up, so on a phone the valuation gate rendered over the hero at the top of
     the page. relative with top:auto stops the sticking and keeps the anchor. */
  .lab .card-key{position:relative!important;top:auto!important}
  .floatstat{left:auto;right:16px;bottom:16px}
  /* Five footer tracks are too narrow here and "SBA affordability model" wraps
     to three lines. The wordmark takes its own row and the nav becomes 2x2. */
  .fgrid{grid-template-columns:repeat(2,1fr);gap:36px 30px}
  .fgrid>:first-child{grid-column:1 / -1}
}
@media (max-width:820px){
  .g3,.g4{grid-template-columns:1fr}
  section{padding:64px 0} .wrap{padding-left:20px;padding-right:20px}
  .panel,.card{padding:26px} h1{font-size:36px} .bignum{font-size:36px}
  .person{flex-direction:column;align-items:flex-start}
  /* The wordmark is flex:none and width:max-content, so it cannot shrink out
     of an overflow on its own. At 375px the bar is within a pixel or two of
     the edge with it at full size. */
  .hbar{padding:0 20px;gap:12px}
  .logo .name{font-size:15px}
  /* Stacked into one column, the footer is a narrow ragged-left list against a
     lot of empty space on the right. Centred it reads as a deliberate block. */
  .fgrid{grid-template-columns:1fr;text-align:center;justify-items:center;gap:34px}
  /* align-items centres the lockup CONTENTS. It does not centre the lockup,
     because .logo is width:max-content and narrower than the cell the address
     and the social row set, so it sat 20px left of everything under it. Auto
     margins are what centre a shrink-wrapped box; text-align cannot reach it.
     The same align-items also collapsed .underrule to zero width, since a
     block with no width in a centred column flex has nothing to stretch to,
     which is why the rule under the name disappeared on phones and not on
     desktop. align-self puts it back at the width of the name. */
  .fgrid .logo{align-items:center;margin-left:auto;margin-right:auto}
  .fgrid .logo .underrule{align-self:stretch}
  .faddr{max-width:none;margin-left:auto;margin-right:auto}
  .socialrow{justify-content:center}
  .fbottom{justify-content:center;text-align:center}
}