/*
Theme Name:   RTG 2026
Theme URI:    https://www.rtgroup.ca
Author:       Robertson Technology Group Ltd.
Author URI:   https://www.rtgroup.ca
Description:  Block theme for rtgroup.ca. Built for business owners rather than
              technical readers: plain language, fast, fully responsive, and
              correct in light and dark. Ported from the approved design concept.
Version:      0.14.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  rtg
Update URI:   https://github.com/IanRVic/rtg-web-2026
Tags:         block-theme, custom-colors, custom-menu, accessibility-ready, wide-blocks
*/

/* ============================================================================
   Everything below is the design system from the approved concept.

   Colour is handled with three states rather than two, because the browser
   has three:
     1. bare :root                              light, and the default
     2. @media (prefers-color-scheme: dark)     guarded by :not([data-theme="light"])
     3. :root[data-theme="dark"]                an explicit choice wins either way

   Never give a colour its only definition inside a media query or a
   [data-theme] block, or one of the three states loses it.

   One hard-won rule, kept here because it cost an afternoon: a colour that
   works as a background does not automatically work as a foreground. --brand
   lifts to a pale lilac in dark mode, so white text on it measured 2.93:1.
   That is why --band-bg exists separately from --brand.
   ========================================================================= */

/* ---------- tokens : light is the bare :root ---------- */
:root{
  --bg:#FBFAFD;
  --bg-2:#F3F0F9;
  --surface:#FFFFFF;
  --border:#E4DFEF;
  --border-strong:#CFC6E4;
  --text:#191327;
  --text-muted:#5C5474;
  --brand:#523092;
  --brand-hover:#3E2372;
  --brand-ink:#FFFFFF;
  --brand-soft:#EFEAF8;
  --accent:#8D3092;
  --accent-soft:#F8EAF9;
  --band-bg:#523092;
  --band-card:#FBFAFD;
  --band-card-text:#191327;
  --band-card-border:#D8D0EA;
  /* Review stars. Gold has to clear 3:1 against whatever sits behind it,
     because WCAG 1.4.11 treats a rating graphic as meaningful rather than
     decorative. Every attractive bright gold measures under 2:1 on white,
     so light mode gets a deeper antique gold and dark mode gets the bright
     one. #AD7F00 measures 3.61:1 on the card, 3.47:1 on the page and 3.21:1
     on a tinted band. */
  --star:#AD7F00;
  --star-empty:#CFC6E4;
  /* A form field's edge is the only thing that says where the field is, so
     WCAG 1.4.11 wants it at 3:1 against whatever is behind it. --border-strong
     measured 1.63:1 on a white panel, which is why the first render looked
     like floating white boxes.

     Sized against the lightest panel a form sits on, which is --brand-soft on
     the contact page, not against white. 3.73:1 on a white card, 3.16:1 on
     brand-soft. Sizing it against white alone left it failing on the one page
     that matters most. */
  --field-border:#8A7EA8;
  --shadow:0 1px 2px rgba(25,19,39,.05), 0 8px 24px -12px rgba(82,48,146,.22);
  --shadow-lift:0 2px 4px rgba(25,19,39,.06), 0 16px 40px -16px rgba(82,48,146,.32);

  --max:1160px;
  /* The blog index is a grid of cards rather than a column of prose, so it
     earns more width than a reading page does. At 1160 a five-across grid
     gives 216px cards, which is too small to read a headline in. */
  --max-blog:1680px;
  --gutter:clamp(1rem, 4vw, 3rem);
  --step--1:clamp(.8125rem,.79rem + .1vw,.875rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.0625rem);
  --step-1:clamp(1.125rem,1.07rem + .28vw,1.3125rem);
  --step-2:clamp(1.375rem,1.27rem + .5vw,1.75rem);
  --step-3:clamp(1.75rem,1.55rem + .95vw,2.5rem);
  --step-4:clamp(2.25rem,1.8rem + 2.1vw,3.75rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#120F1A;
    --bg-2:#1A1526;
    --surface:#1E1830;
    --border:#302748;
    --border-strong:#453862;
    --text:#EFEBF7;
    --text-muted:#A99FC0;
    --brand:#A585EC;
    --brand-hover:#BFA6F7;
    --brand-ink:#17102A;
    --brand-soft:#241C3A;
    --accent:#D07BD6;
    --accent-soft:#2C1C33;
    --band-bg:#2E1A55;
    /* 10.54:1 on the dark card, 11.68:1 on the page. */
    --star:#F5C542;
    --star-empty:#453862;
    --field-border:#7A6BA0; /* 3.61:1 on the panel, 4.00:1 on the page. */
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
    --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 16px 40px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#120F1A;
  --bg-2:#1A1526;
  --surface:#1E1830;
  --border:#302748;
  --border-strong:#453862;
  --text:#EFEBF7;
  --text-muted:#A99FC0;
  --brand:#A585EC;
  --brand-hover:#BFA6F7;
  --brand-ink:#17102A;
  --brand-soft:#241C3A;
  --accent:#D07BD6;
  --accent-soft:#2C1C33;
  --band-bg:#2E1A55;
  --star:#F5C542;
  --star-empty:#453862;
  --field-border:#7A6BA0;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  --shadow-lift:0 2px 4px rgba(0,0,0,.45), 0 16px 40px -16px rgba(0,0,0,.8);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.15;
  text-wrap:balance;
  margin:0;
  letter-spacing:-.012em;
}
p{margin:0}
a{color:var(--brand);text-decoration-color:color-mix(in srgb, var(--brand) 35%, transparent);text-underline-offset:3px}
a:hover{color:var(--brand-hover)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
html.is-locked{overflow:hidden}

.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-blog{width:100%;max-width:var(--max-blog);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);margin:0;
}
.lead{font-size:var(--step-1);color:var(--text-muted);max-width:62ch;line-height:1.6}
.measure{max-width:65ch}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* placeholder facts */

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .wrap{
  display:flex;align-items:center;gap:1rem;
  min-height:74px;
}
.logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.logo img{display:block;width:auto;height:38px;max-width:100%}
.logo .logo-rev{display:none}
/* same three state pattern as the colour tokens */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .logo .logo-pos{display:none}
  :root:not([data-theme="light"]) .logo .logo-rev{display:block}
}
:root[data-theme="dark"] .logo .logo-pos{display:none}
:root[data-theme="dark"] .logo .logo-rev{display:block}
@media (max-width:420px){.logo img{height:32px}}
.nav-desktop{display:none;margin-left:auto;align-items:center;gap:.15rem}
.nav-desktop a{
  color:var(--text);text-decoration:none;font-size:.9375rem;font-weight:500;
  padding:.5rem .7rem;border-radius:6px;
}
.nav-desktop a:hover{background:var(--brand-soft);color:var(--brand)}
.nav-desktop a[aria-current="page"]{color:var(--brand);font-weight:600}
.header-cta{display:none}
.searchbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:8px;flex:0 0 auto;margin-left:auto;
  background:transparent;border:1px solid var(--border-strong);
  color:var(--text);cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.searchbtn svg{display:block}
.searchbtn:hover{background:var(--brand-soft);color:var(--brand);border-color:var(--brand)}

.search-form{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.75rem;max-width:620px}
.search-form input{
  flex:1 1 15rem;font:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;
  padding:.8rem 1rem;min-width:0;
}
.search-form input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.search-count{margin-top:1.5rem;font-size:.9375rem;color:var(--text-muted)}
/* Same shape as the post grid: the list is the container, each <li> is the
   card. Putting the card styling on the list turned every result into one
   tall box. */
.search-results{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:.9rem}
.search-results > li,.search-hit{
  display:grid;gap:.4rem;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  border-left:4px solid var(--brand);padding:1.25rem 1.35rem;margin:0;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.search-results > li:hover,a.search-hit:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.search-results > li h3,.search-hit h3{font-size:var(--step-1)}
.search-results > li h3 a{color:inherit;text-decoration:none}
.search-results > li h3 a:hover{color:var(--brand)}
.search-results > li p,.search-hit p{font-size:.9375rem;color:var(--text-muted);line-height:1.6}
.search-where{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);font-weight:500;
}
.search-hit mark{background:var(--brand-soft);color:var(--brand);font-weight:600;padding:0 .15em;border-radius:3px}
.search-empty{
  border:1px dashed var(--border-strong);border-radius:14px;
  padding:clamp(1.5rem,3vw,2rem);display:grid;gap:.6rem;
}
.burger{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--border-strong);border-radius:8px;
  color:var(--text);font:inherit;font-size:.875rem;font-weight:500;
  padding:.5rem .75rem;cursor:pointer;
}
.burger svg{display:block}
@media (min-width:1000px){
  .nav-desktop{display:flex}
  .header-cta{display:inline-flex;margin-left:.75rem}
  .burger{display:none}
}


/* ---------- desktop dropdowns ---------- */
.nav-item{position:relative;display:flex;align-items:center}
.nav-item > a{
  color:var(--text);text-decoration:none;font-size:.9375rem;font-weight:500;
  padding:.5rem .5rem .5rem .7rem;border-radius:6px 0 0 6px;
}
.nav-item.plain > a{padding-right:.7rem;border-radius:6px}
.nav-item > a:hover{background:var(--brand-soft);color:var(--brand)}
.nav-item > a[aria-current="page"]{color:var(--brand);font-weight:600}
.nav-caret{
  background:transparent;border:0;cursor:pointer;color:var(--text-muted);
  padding:.5rem .55rem .5rem .25rem;border-radius:0 6px 6px 0;
  display:flex;align-items:center;
}
.nav-caret:hover{background:var(--brand-soft);color:var(--brand)}
.nav-caret svg{transition:transform .18s ease}
.nav-item[data-open="true"] > a,
.nav-item[data-open="true"] > .nav-caret{background:var(--brand-soft);color:var(--brand)}
.nav-item[data-open="true"] .nav-caret svg{transform:rotate(180deg)}

.nav-panel{
  position:absolute;top:100%;left:0;z-index:50;
  margin-top:.4rem;
  min-width:280px;
  /* Never wider than the window. A 520px panel on a narrow laptop would
     otherwise push a scrollbar onto every page. */
  max-width:min(520px, calc(100vw - 2rem));
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow-lift);
  padding:.5rem;
  display:none;
}
/* The .4rem gap above is dead space: crossing it fires mouseleave on the
   parent and the panel vanishes before the pointer arrives. This bridges it,
   invisibly, so the pointer never leaves the item. */
.nav-panel::before{
  content:"";position:absolute;left:0;right:0;
  top:-.6rem;height:.6rem;
}
/* The last items sit near the right edge, so their panels open leftward. */
.nav-item:nth-last-child(-n+2) .nav-panel{left:auto;right:0}
.nav-item[data-open="true"] .nav-panel{display:block}
.nav-panel.wide{min-width:min(520px, calc(100vw - 2rem));columns:2;column-gap:.25rem}
/* One column once two will not fit, rather than two cramped ones. */
@media (max-width:1180px){.nav-panel.wide{columns:1;min-width:300px}}
.nav-panel a{
  display:block;break-inside:avoid;
  padding:.55rem .7rem;border-radius:8px;
  color:var(--text);text-decoration:none;font-size:.9375rem;font-weight:500;
}
.nav-panel a:hover{background:var(--brand-soft);color:var(--brand)}
.nav-panel a small{
  display:block;font-size:.75rem;font-weight:400;color:var(--text-muted);margin-top:.1rem;
}
.nav-panel a:hover small{color:var(--brand-hover)}
.nav-panel hr{
  border:0;border-top:1px solid var(--border);margin:.4rem .7rem;
}
.nav-panel .panel-all{color:var(--brand);font-weight:600}

/* ---------- mobile menu groups ---------- */
.menu-group{border-bottom:1px solid var(--border)}
.menu-row{display:flex;align-items:stretch;gap:.5rem}
.menu-row > a{
  flex:1 1 auto;
  font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;font-weight:600;
  color:var(--text);text-decoration:none;padding:1.05rem 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
}
.menu-row > a small{
  font-family:"IBM Plex Sans",sans-serif;font-size:.8125rem;font-weight:400;
  color:var(--text-muted);text-align:right;flex:0 1 auto;
}
.menu-row > a[aria-current="page"]{color:var(--brand)}
.menu-toggle{
  flex:0 0 auto;width:52px;
  background:transparent;border:0;border-left:1px solid var(--border);
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.menu-toggle svg{transition:transform .18s ease}
.menu-toggle[aria-expanded="true"]{color:var(--brand)}
.menu-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
/* The hidden attribute has to beat any author display rule, or a collapsed
   panel renders open. The mobile submenus are display:grid and were doing
   exactly that: every group showed expanded and the toggle worked backwards.
   The concept never hit this because its host page supplied the reset. */
[hidden]{display:none!important}

.menu-sub{display:grid;gap:.1rem;padding:0 0 1rem}
.menu-sub a{
  display:block;padding:.65rem .9rem;border-radius:8px;
  color:var(--text-muted);text-decoration:none;font-size:1rem;font-weight:500;
  background:var(--bg-2);
}
.menu-sub a:hover{color:var(--brand)}

/* ---------- mobile menu ---------- */
.menu{
  position:fixed;inset:0;z-index:60;
  background:var(--bg);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;
}
.menu[data-open="true"]{transform:translateX(0)}
.menu-top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.1rem var(--gutter);border-bottom:1px solid var(--border);
}
.menu-close{
  background:transparent;border:1px solid var(--border-strong);border-radius:8px;
  color:var(--text);font:inherit;font-size:.875rem;font-weight:500;
  padding:.5rem .8rem;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
}
.menu-links{display:flex;flex-direction:column;padding:.5rem var(--gutter) 0}
.menu-links a{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-family:"Source Serif 4",Georgia,serif;font-size:1.5rem;font-weight:600;
  color:var(--text);text-decoration:none;
  padding:1.05rem 0;border-bottom:1px solid var(--border);
}
.menu-links a small{
  font-family:"IBM Plex Sans",sans-serif;font-size:.8125rem;font-weight:400;
  color:var(--text-muted);text-align:right;flex:0 1 auto;
}
.menu-links a[aria-current="page"]{color:var(--brand)}
.menu-foot{margin-top:auto;padding:1.5rem var(--gutter) 2.5rem;display:grid;gap:.9rem}
.menu-foot .btn{width:100%}
.menu-call{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  font-weight:600;color:var(--text);text-decoration:none;
  border:1px solid var(--border-strong);border-radius:10px;padding:.85rem 1rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:"IBM Plex Sans",sans-serif;font-size:.9375rem;font-weight:600;
  line-height:1;padding:.9rem 1.35rem;border-radius:10px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn-primary{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover);color:var(--brand-ink)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn-onbrand{background:#fff;color:#3E2372;border-color:#fff}
.btn-onbrand:hover{background:#F2ECFC;color:#2E1A55}
.btn-onbrand-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.btn-onbrand-ghost:hover{background:rgba(255,255,255,.12);color:#fff;border-color:#fff}

/* ---------- sections ---------- */
.section{padding-block:clamp(3.5rem,7vw,6rem)}
.section-tint{background:var(--bg-2)}
.section-head{display:grid;gap:.9rem;margin-bottom:2.5rem;max-width:60ch}
.section-head h2{font-size:var(--step-3)}

/* ---------- hero ---------- */
.hero{padding-block:clamp(2.75rem,6vw,4.75rem) clamp(2.5rem,5vw,4rem)}
.hero-grid{display:grid;gap:clamp(2rem,4vw,3.5rem)}
.hero-copy{display:grid;gap:1.35rem;justify-items:start}
.hero h1{font-size:var(--step-4);max-width:15ch}
.hero .lead{max-width:52ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:.35rem}
.tagline{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:"Source Serif 4",Georgia,serif;font-style:italic;font-size:var(--step-1);
  color:var(--brand);
}
.tagline::before{content:"";width:28px;height:2px;background:var(--accent);flex:0 0 auto}

.proof{
  display:grid;gap:0;
  border:1px solid var(--border);border-radius:14px;background:var(--surface);
  overflow:hidden;box-shadow:var(--shadow);
}
.proof-item{padding:1.15rem 1.35rem;border-bottom:1px solid var(--border)}
.proof-item:last-child{border-bottom:0}
.proof-figure{
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-2);font-weight:700;
  color:var(--brand);display:block;line-height:1.2;font-variant-numeric:tabular-nums;
}
.proof-label{display:block;font-size:var(--step--1);color:var(--text-muted);margin-top:.2rem}
@media (min-width:560px){
  .proof{grid-template-columns:repeat(2,1fr)}
  .proof-item{border-right:1px solid var(--border)}
  .proof-item:nth-child(2n){border-right:0}
  .proof-item:nth-last-child(-n+2){border-bottom:0}
}
@media (min-width:1000px){
  .proof{grid-template-columns:repeat(4,1fr)}
  .proof-item{border-bottom:0;border-right:1px solid var(--border)}
  .proof-item:nth-child(2n){border-right:1px solid var(--border)}
  .proof-item:last-child{border-right:0}
}

/* ---------- pitch panel ---------- */
.pitch{
  margin-top:1.1rem;
  display:grid;gap:1.75rem;
  background:var(--brand-soft);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.5rem,3.5vw,2.5rem);
}
.pitch-body{display:grid;gap:.85rem}
.pitch-body h3{font-size:var(--step-2);max-width:26ch}
.pitch-body p{color:var(--text-muted);max-width:60ch}
.pitch-list{
  list-style:none;margin:0;padding:0;display:grid;gap:.7rem;align-content:center;
}
.pitch-list li{
  position:relative;padding-left:1.6rem;font-size:.9375rem;font-weight:500;
}
.pitch-list li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:8px;height:8px;border-radius:2px;background:var(--accent);
}
@media (min-width:900px){
  /* the list is a pulled-out summary of the text beside it, so it sits
     optically level with that text rather than stranded at the top */
  .pitch{grid-template-columns:1.5fr 1fr;gap:0;align-items:center}
  .pitch-list{
    border-left:1px solid var(--border-strong);
    padding-left:2.5rem;margin-left:2.5rem;
  }
}

/* ---------- card grids ---------- */
.grid{display:grid;gap:1.1rem}
@media (min-width:640px){.grid-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid-4{grid-template-columns:repeat(4,1fr)}}

.card{
  display:flex;flex-direction:column;gap:.6rem;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1.5rem;text-decoration:none;color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.card:hover{border-color:var(--brand);box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.card h3{font-size:var(--step-1)}
.card p{color:var(--text-muted);font-size:.9375rem}
.card-wide{grid-column:1/-1}
@media (min-width:760px){
  .card-wide{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
  .card-wide > div{display:grid;gap:.5rem;max-width:62ch}
  .card-wide .card-more{margin-top:0;padding-top:0;flex:0 0 auto}
}
.card-more{
  margin-top:auto;padding-top:.5rem;
  font-size:.875rem;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:.35rem;
}
a.card:hover .card-wide{grid-column:1/-1}
@media (min-width:760px){
  .card-wide{flex-direction:row;align-items:center;justify-content:space-between;gap:2rem}
  .card-wide > div{display:grid;gap:.5rem;max-width:62ch}
  .card-wide .card-more{margin-top:0;padding-top:0;flex:0 0 auto}
}
.card-more{color:var(--brand-hover)}
.card-more svg{transition:transform .15s ease}
a.card:hover .card-more svg{transform:translateX(3px)}

/* industries list: flat, all visible, no flipping */
.ind-list{display:grid;gap:.65rem}
@media (min-width:700px){.ind-list{grid-template-columns:repeat(2,1fr)}}

.ind-item{
  display:grid;gap:.2rem;align-content:start;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  padding:1.1rem 1.2rem;text-decoration:none;color:inherit;
  border-left:3px solid var(--accent);
  transition:border-color .15s ease, background-color .15s ease;
}
.ind-item:hover{background:var(--brand-soft);border-color:var(--brand);border-left-color:var(--brand)}
.ind-item strong{font-size:1.0625rem;font-weight:600;color:var(--text)}
.ind-item span{font-size:.875rem;color:var(--text-muted);line-height:1.5}
.ind-item:hover strong{color:var(--brand)}

/* ---------- steps : a real sequence, so numbered ---------- */
.steps{display:grid;gap:1.75rem;counter-reset:step}
@media (min-width:840px){.steps{grid-template-columns:repeat(3,1fr);gap:2.25rem}}
.step{display:grid;gap:.6rem;align-content:start;padding-top:1.25rem;border-top:2px solid var(--brand)}
.step-n{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;color:var(--accent);
}
.step h3{font-size:var(--step-1)}
.step p{color:var(--text-muted);font-size:.9375rem}

/* ---------- thesis ---------- */
.thesis{
  background:var(--band-bg);color:#fff;border-radius:18px;
  padding:clamp(2rem,5vw,3.5rem);
  display:grid;gap:1.25rem;
}
.thesis h2{font-size:var(--step-3);color:#fff;max-width:22ch}
.thesis p{color:rgba(255,255,255,.86);max-width:58ch;font-size:var(--step-1);line-height:1.6}
.thesis .eyebrow{color:rgba(255,255,255,.75)}

/* ---------- quote ---------- */
.quote{
  display:grid;gap:1.25rem;max-width:60ch;
  border-left:3px solid var(--accent);padding-left:clamp(1.25rem,3vw,2rem);
}
.quote blockquote{
  margin:0;font-family:"Source Serif 4",Georgia,serif;
  font-size:var(--step-2);line-height:1.4;color:var(--text);
}
.quote figcaption{font-size:.9375rem;color:var(--text-muted)}
.quote figcaption b{color:var(--text);font-weight:600}

/* ---------- blog ---------- */
.post{
  display:flex;flex-direction:column;gap:.55rem;
  text-decoration:none;color:inherit;
  border-top:1px solid var(--border);padding-top:1.1rem;
}
.post:hover h3{color:var(--brand)}
.post-meta{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.post h3{font-size:var(--step-1);transition:color .15s ease}
.post p{font-size:.9375rem;color:var(--text-muted)}

/* ---------- cta band ---------- */
.band{background:var(--band-bg);color:#fff}
.band .wrap{
  padding-block:clamp(2.75rem,6vw,4.25rem);
  display:grid;gap:1.5rem;align-items:center;
}
.band h2{font-size:var(--step-3);color:#fff;max-width:18ch}
.band p{color:rgba(255,255,255,.85);max-width:50ch}
.band-actions{display:flex;flex-wrap:wrap;gap:.75rem}
@media (min-width:900px){
  .band .wrap{grid-template-columns:1fr auto;gap:2.5rem}
}

/* ---------- footer ---------- */
.site-footer{background:var(--bg-2);border-top:1px solid var(--border)}
.footer-grid{
  display:grid;gap:2.25rem;
  padding-block:clamp(2.75rem,5vw,4rem);
}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.footer-grid{grid-template-columns:1.5fr repeat(4,1fr)}}
.footer-col h4{
  font-family:"IBM Plex Sans",sans-serif;font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin:0 0 .9rem;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.footer-col a{color:var(--text);text-decoration:none;font-size:.9375rem}
.footer-col a:hover{color:var(--brand);text-decoration:underline}
.footer-about p{color:var(--text-muted);font-size:.9375rem;max-width:38ch;margin-top:1rem}
.footer-contact{display:grid;gap:.35rem;margin-top:1.1rem;font-size:.9375rem}
.footer-contact a{color:var(--brand);text-decoration:none;font-weight:500}
.footer-bottom{
  border-top:1px solid var(--border);padding-block:1.35rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;
  font-size:.8125rem;color:var(--text-muted);
}
.footer-bottom .spacer{flex:1 1 auto}

/* ---------- industries page ---------- */
.page-head{padding-block:clamp(2.75rem,6vw,4.5rem) clamp(1.5rem,3vw,2.5rem)}
.page-head h1{font-size:var(--step-4);max-width:16ch;margin-bottom:1.1rem}
.ind-card{
  display:grid;gap:1rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.9rem);
}
.ind-card h3{font-size:var(--step-2);color:var(--brand)}
/* The four industries with a page of their own link from their heading.
   Not the whole card: each card already holds two or three chips through to
   service pages, and a link inside a link is invalid and unreachable by
   keyboard. The stretched-link trick would swallow those chips. */
.ind-card h3 a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:color-mix(in srgb, var(--brand) 40%, transparent)}
.ind-card h3 a:hover,.ind-card h3 a:focus-visible{text-decoration-color:currentColor}
.ind-card h3 a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
.ind-block{display:grid;gap:.3rem}
.ind-block h4{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0;
}
.ind-block p{font-size:.9375rem;color:var(--text-muted)}
.ind-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}
.chip{
  font-size:.8125rem;font-weight:500;text-decoration:none;
  border:1px solid var(--border-strong);border-radius:999px;padding:.35rem .8rem;
  color:var(--text);
}
.chip:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}


/* ---------- blog index ---------- */
.blog-head{padding-block:clamp(2.5rem,5vw,4rem) 0}
.blog-head h1{font-size:var(--step-4);max-width:14ch;margin-bottom:1rem}
.cats{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding-block:1.75rem;margin-top:1.75rem;
  border-top:1px solid var(--border);
}
.cat{
  font-size:.875rem;font-weight:500;text-decoration:none;color:var(--text);
  border:1px solid var(--border-strong);border-radius:999px;padding:.4rem .9rem;
  white-space:nowrap;
}
.cat:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}
.cat[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}

.feature{
  display:grid;gap:1.5rem;text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:18px;background:var(--surface);
  padding:clamp(1.5rem,3vw,2.25rem);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.feature:hover{border-color:var(--brand);box-shadow:var(--shadow-lift)}
.feature h2{font-size:var(--step-3);max-width:22ch}
.feature p{color:var(--text-muted);max-width:62ch}
.thumb{
  border-radius:12px;aspect-ratio:16/10;max-width:100%;
  background:var(--brand-soft);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);text-align:center;padding:1rem;
}
.feature-body{display:grid;gap:.8rem;align-content:center}
@media (min-width:860px){
  .feature{grid-template-columns:1.1fr 1fr;gap:2.25rem;align-items:center}
  .feature .thumb{order:2}
}

/* The post grid.

   Written against what WordPress actually emits, which is not what the
   mockup had. The query block renders a <ul class="wp-block-post-template">
   holding one <li> per post, with the pagination as a sibling of that list.
   The first version put the grid on the query block instead, so the grid had
   two children, the list and the pager: every card stacked in one narrow
   column and the pager sat beside them in column two. A class on a block is
   not a class on the thing you pictured.

   Columns are stepped rather than auto-fill so a card never lands between
   sizes. Cards stay between roughly 280 and 350px at every width. */
.post-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(1.5rem,2.1vw,2.25rem);
  grid-template-columns:1fr;
}
@media (min-width:560px){.post-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.post-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1320px){.post-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1700px){.post-grid{grid-template-columns:repeat(5,1fr)}}

.post-grid > li{
  position:relative;
  display:flex;flex-direction:column;
  margin:0;padding:0 0 1.35rem;
  background:var(--surface);
  border:1px solid var(--border);border-radius:16px;overflow:hidden;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.post-grid > li > *{padding-inline:1.35rem}
.post-grid > li:hover{border-color:var(--brand);box-shadow:var(--shadow-lift);transform:translateY(-3px)}
.post-grid > li:focus-within{border-color:var(--brand);box-shadow:var(--shadow-lift)}

/* Every one of these images is a made graphic with words baked into it, so
   the crop has to be gentle. HubSpot produced them at roughly 1.91:1 and
   16/9 is the nearest standard ratio, which trims a few percent off the
   sides rather than cutting a headline in half. */
.post-grid .card-media{margin:0 0 0;padding-inline:0;line-height:0}
.post-grid .card-media img{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;object-fit:cover;
  border:0;border-radius:0;
  border-bottom:1px solid var(--border);
}
.post-grid > li:not(:has(.card-media img)) .wp-block-post-terms{padding-top:1.35rem}

.post-grid .card-topic{
  margin:.95rem 0 .45rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.625rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);
}
/* Lifted above the card-wide title link below, so the topic stays clickable. */
.post-grid .card-topic a{position:relative;z-index:1;color:inherit;text-decoration:none}
.post-grid .card-topic a:hover{color:var(--brand);text-decoration:underline}

.post-grid .wp-block-post-title{
  font-size:1.0625rem;line-height:1.35;margin:0 0 .55rem;font-weight:600;
}
.post-grid .wp-block-post-title a{color:var(--text);text-decoration:none;transition:color .15s ease}
.post-grid > li:hover .wp-block-post-title a{color:var(--brand)}
/* The whole card is the target, image included, without wrapping it in an
   anchor. One tab stop per card and no anchor nested inside another.
   
   The featured image is deliberately not a link of its own. Every imported
   image carries alt="", so linking it would create a link with no
   accessible name and a second tab stop on every card, to reach the page
   the title already reaches. The overlay covers the image, so clicking the
   picture works and the keyboard still sees one target.

   The card must not clamp the title with overflow:hidden, or this overlay
   gets clipped to the heading and stops covering anything. */
.post-grid .wp-block-post-title a::after{content:"";position:absolute;inset:0}
/* The focus ring goes on the link, so a browser without :has() still shows
   one. Only where :has() works is it moved to the card, which is the shape
   the pointer target actually has. Never drop the ring first and add it back
   conditionally: on the browser that misses the condition, there is none. */
.post-grid .wp-block-post-title a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}
@supports selector(:has(a)){
  .post-grid .wp-block-post-title a:focus-visible{outline:none}
  .post-grid > li:has(.wp-block-post-title a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
}

.post-grid .wp-block-post-excerpt{margin:0 0 .9rem}
.post-grid .wp-block-post-excerpt__excerpt{
  margin:0;font-size:.875rem;line-height:1.55;color:var(--text-muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.post-grid .post-meta{margin-top:auto;padding-top:.35rem}

.blog-list .pager{margin-top:clamp(2.5rem,4vw,3.5rem)}
.blog-list{padding-block:clamp(.5rem,1.5vw,1.25rem) clamp(3.5rem,6vw,5.5rem)}

/* Room at the sides on a wide screen. The container caps at 1560, but below
   that the grid ran to within a --gutter of the window edge, which reads as
   squashed rather than full width. */
@media (min-width:1100px){
  .wrap-blog{padding-inline:clamp(3rem,5vw,4.5rem)}
}

.pager{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:center;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border);
}
.pager a,.pager span{
  min-width:42px;text-align:center;font-size:.9375rem;font-weight:500;
  padding:.5rem .75rem;border-radius:8px;text-decoration:none;color:var(--text);
  border:1px solid transparent;
}
.pager a:hover{background:var(--brand-soft);color:var(--brand)}
.pager [aria-current="page"]{background:var(--brand);color:var(--brand-ink)}
.pager .dots{color:var(--text-muted)}

/* ---------- single post ---------- */
.breadcrumb{
  font-size:.8125rem;color:var(--text-muted);
  padding-block:1.5rem 0;display:flex;gap:.45rem;flex-wrap:wrap;
}
.breadcrumb a{color:var(--text-muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand);text-decoration:underline}
/* A post is one centred reading column.

   It used to be margin-inline:0, which on a 2100px monitor left a 570px
   column of text jammed against the left edge with two thirds of the screen
   empty beside it. Reading width is a typographic decision and stays where
   it is; where that column sits on the page is a layout decision and it
   belongs in the middle.

   The cover image is allowed to be wider than the text. That difference is
   what gives the page a shape at full width. */
.article{max-width:740px;margin-inline:auto;padding-block:clamp(1.75rem,3vw,2.5rem) clamp(3rem,6vw,5rem)}
.article-head{
  max-width:740px;margin-inline:auto;
  display:grid;gap:.9rem;
  padding-block:clamp(2.25rem,5vw,3.5rem) 0;
}
.article-head h1{font-size:var(--step-3);line-height:1.2}
.article-head .eyebrow a{color:inherit;text-decoration:none}
.article-head .eyebrow a:hover{text-decoration:underline}

.post-cover{padding-top:clamp(1.5rem,3vw,2.25rem)}
/* 980 is the breakout width the rest of the site already uses for a wide
   figure. Wider than the 740 reading column so the page has a shape, narrow
   enough that a 16:9 graphic does not fill a laptop screen on its own. */
.post-cover .figure-featured{margin:0 auto;width:min(980px,100%)}
.post-cover .figure-featured img{border-radius:16px}

/* The end of a post is the point at which somebody has read the whole thing
   and is most likely to want to talk to us. It used to be a tag list and
   then the footer. */
.post-band{margin-top:0}
.article-meta{
  display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center;
  font-size:.875rem;color:var(--text-muted);
}
.article .tags{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  margin-top:2.75rem;padding-top:1.75rem;border-top:1px solid var(--border);
}
.article .tags a{
  font-size:.8125rem;font-weight:500;text-decoration:none;color:var(--text);
  border:1px solid var(--border-strong);border-radius:999px;
  padding:.3rem .8rem;background:var(--surface);
}
.article .tags a:hover{border-color:var(--brand);background:var(--brand-soft);color:var(--brand)}

.article-body{display:grid;gap:1.35rem;font-size:1.0625rem;line-height:1.75}
.article-body h2{font-size:var(--step-2);margin-top:1.25rem}
.article-body h3{font-size:var(--step-1);margin-top:.75rem}
.article-body ul{margin:0;padding-left:1.35rem;display:grid;gap:.6rem}
.article-body li::marker{color:var(--accent)}
.article-body strong{font-weight:600;color:var(--text)}
.article-body blockquote{
  margin:.5rem 0;padding-left:1.35rem;border-left:3px solid var(--accent);
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-2);line-height:1.4;
}
.takeaway{
  background:var(--brand-soft);border-radius:14px;
  padding:clamp(1.35rem,3vw,1.9rem);display:grid;gap:.8rem;
  border-left:4px solid var(--brand);
}
.takeaway h2{margin:0;font-size:var(--step-1)}
.takeaway ul{margin:0;padding-left:1.25rem;display:grid;gap:.5rem;font-size:1rem}
.author{
  display:flex;gap:1.1rem;align-items:flex-start;
  border-top:1px solid var(--border);margin-top:2.5rem;padding-top:1.75rem;
}
.author-avatar{
  width:56px;height:56px;border-radius:50%;flex:0 0 auto;
  background:var(--brand-soft);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:var(--brand);font-size:1.1rem;
}
.author-body{display:grid;gap:.3rem}
.author-body strong{font-size:1.0625rem}
.author-body p{font-size:.9375rem;color:var(--text-muted)}


/* ---------- about + enquiry block ---------- */
.aboutcta{display:grid;gap:1.25rem}
@media (min-width:900px){.aboutcta{grid-template-columns:1.15fr 1fr;gap:2rem;align-items:start}}
.about-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.5rem,3vw,2.25rem);display:grid;gap:1rem;align-content:start;
}
.about-panel h2{font-size:var(--step-2)}
.about-panel p{color:var(--text-muted)}
.about-facts{
  display:grid;gap:.55rem;margin:.25rem 0;padding:0;list-style:none;
}
.about-facts li{
  display:flex;gap:.7rem;align-items:baseline;font-size:.9375rem;
  border-top:1px solid var(--border);padding-top:.55rem;
}
.about-facts li:first-child{border-top:0;padding-top:0}
.about-facts b{
  font-family:"Source Serif 4",Georgia,serif;font-weight:700;color:var(--brand);
  flex:0 0 auto;min-width:7.5rem;font-variant-numeric:tabular-nums;
}
.about-facts span{color:var(--text-muted)}
.about-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.25rem}

.cta-panel{
  background:var(--brand-soft);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.5rem,3vw,2rem);display:grid;gap:1rem;align-content:start;
}
.cta-panel h2{font-size:var(--step-1)}
.cta-panel > p{color:var(--text-muted);font-size:.9375rem}
.field{display:grid;gap:.35rem}
.field label{font-size:.8125rem;font-weight:600;letter-spacing:.01em}
.field input,.field textarea{
  font:inherit;font-size:.9375rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
  padding:.65rem .8rem;width:100%;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--brand);outline:2px solid var(--accent);outline-offset:1px}
.cta-panel .btn{width:100%}
.cta-alt{
  font-size:.875rem;color:var(--text-muted);text-align:center;
  padding-top:.65rem;border-top:1px solid var(--border);
}
.form-note{font-size:.75rem;color:var(--text-muted)}
.check{
  display:flex;gap:.65rem;align-items:flex-start;
  font-size:.875rem;line-height:1.5;cursor:pointer;
  background:var(--surface);border:1px solid var(--border-strong);border-radius:9px;
  padding:.75rem .85rem;
}
.check input{
  flex:0 0 auto;width:18px;height:18px;margin:.1rem 0 0;accent-color:var(--brand);cursor:pointer;
}
.check:hover{border-color:var(--brand)}


/* ---------- article images ---------- */
.figure{margin:0;display:grid;gap:.6rem}
.figure img{
  display:block;width:100%;height:auto;max-width:100%;
  border-radius:12px;border:1px solid var(--border);
}
.figure figcaption{
  font-size:.8125rem;line-height:1.55;color:var(--text-muted);
  padding-left:.9rem;border-left:2px solid var(--accent);
}
/* stand-in for a real image, sized to the aspect the real one will use */
.imgbox{
  border-radius:12px;border:1px solid var(--border);background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:1rem;max-width:100%;
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand);
}
.figure-featured{margin-bottom:2rem}
.figure-featured .imgbox{aspect-ratio:16/9}
.figure-inline .imgbox{aspect-ratio:3/2}
/* breaks out past the text column on wide screens, never past the viewport */
.figure-wide{width:min(980px, 100%)}
.figure-wide .imgbox{aspect-ratio:21/9}
@media (min-width:1080px){
  .figure-wide{width:980px;max-width:calc(100vw - (2 * var(--gutter)))}
}
@media (max-width:760px){
  .figure-wide .imgbox{aspect-ratio:16/9}
}


/* ---------- the fork: which model are you ---------- */
.fork{display:grid;gap:1.25rem}
@media (min-width:880px){.fork{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
.fork-card{
  display:grid;gap:1rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.25rem);
  border-top:4px solid var(--brand);
}
.fork-card h3{font-size:var(--step-2)}
.fork-card > p{color:var(--text-muted)}
.recognise{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.recognise li{
  position:relative;padding-left:1.75rem;font-size:.9375rem;line-height:1.55;
}
.recognise li::before{
  content:"";position:absolute;left:0;top:.42em;width:10px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
.fork-foot{margin-top:.35rem;display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
/* the "not this" counterpart to .recognise */
.recognise-no li::before{
  content:"";position:absolute;left:1px;top:.45em;width:11px;height:11px;
  border:0;transform:none;
  background:
    linear-gradient(to bottom right, transparent 44%, var(--text-muted) 44%, var(--text-muted) 56%, transparent 56%),
    linear-gradient(to bottom left,  transparent 44%, var(--text-muted) 44%, var(--text-muted) 56%, transparent 56%);
}
.recognise-no li{color:var(--text-muted)}

/* ---------- service detail ---------- */
.svc-hero{padding-block:clamp(1.5rem,3vw,2.5rem) clamp(2.5rem,5vw,3.5rem)}
.svc-hero h1{font-size:var(--step-4);max-width:16ch;margin-bottom:1.1rem}
.svc-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
/* product hero: copy first on mobile, image alongside on wide screens */
.svc-hero-split{display:grid;gap:2rem}
@media (min-width:940px){
  .svc-hero-split{grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
}
.hero-shot{
  border-radius:16px;overflow:hidden;border:1px solid var(--border);
  background:var(--bg-2);box-shadow:var(--shadow);
  aspect-ratio:1/1;max-width:100%;
}
.hero-shot img{width:100%;height:100%;object-fit:cover;display:block}
/* A wide shot rather than a product cut-out. The square crop suits a single
   device on white; a desk scene loses half its subject to it. */
.hero-shot-wide{aspect-ratio:3/2}
.shot-credit{
  font-size:.75rem;color:var(--text-muted);margin-top:.6rem;
}

.scene{
  background:var(--band-bg);color:#fff;border-radius:18px;
  padding:clamp(1.75rem,4vw,3rem);display:grid;gap:1rem;
}
.scene h2{color:#fff;font-size:var(--step-2);max-width:24ch}
.scene p{color:rgba(255,255,255,.86);max-width:60ch}
.scene .eyebrow{color:rgba(255,255,255,.75)}

.incl{display:grid;gap:1.75rem}
@media (min-width:760px){.incl{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media (min-width:1080px){.incl{grid-template-columns:repeat(3,1fr)}}
.incl-group{display:grid;gap:.75rem;align-content:start;padding-top:1rem;border-top:2px solid var(--brand)}
.incl-group h3{font-size:var(--step-1)}
.incl-group ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.incl-group li{
  position:relative;padding-left:1.1rem;
  font-size:.9375rem;color:var(--text-muted);line-height:1.55;
}
/* without a marker these read as loose paragraphs rather than a list */
.incl-group li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--accent);
}

/* ---------- FAQ: answers always visible ---------- */
.faq{display:grid;gap:1.75rem;max-width:none}
@media (min-width:900px){.faq{grid-template-columns:repeat(2,1fr);gap:2rem 3rem}}
.faq-item{display:grid;gap:.5rem;align-content:start}
.faq-item h3{font-size:var(--step-1)}
.faq-item p{color:var(--text-muted);font-size:.9375rem}

.xlinks{display:grid;gap:.65rem}
@media (min-width:700px){.xlinks{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.xlinks{grid-template-columns:repeat(3,1fr)}}


/* ---------- pricing pathway: a real three year sequence ---------- */
.path{display:grid;gap:1.25rem;counter-reset:yr}
@media (min-width:900px){.path{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.path-step{
  display:grid;gap:.7rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.85rem);
  border-top:4px solid var(--brand);
}
.path-year{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.path-step h3{font-size:var(--step-1)}
.path-step p{font-size:.9375rem;color:var(--text-muted)}
.path-cost{
  margin-top:.35rem;padding-top:.7rem;border-top:1px solid var(--border);
  font-size:.9375rem;font-weight:600;color:var(--brand);
}

/* ---------- safety net panel ---------- */
.safety{
  border:2px solid var(--brand);border-radius:18px;background:var(--brand-soft);
  padding:clamp(1.75rem,4vw,2.75rem);display:grid;gap:1rem;
}
.safety h2{font-size:var(--step-2);max-width:24ch}
.safety p{color:var(--text-muted);max-width:62ch}

.policy{max-width:70ch;display:grid;gap:1.3rem;font-size:1.0625rem;line-height:1.75}
.policy h2{font-size:var(--step-1);margin-top:1.4rem}
.policy ul{margin:0;padding-left:1.35rem;display:grid;gap:.7rem}
.policy li::marker{color:var(--accent)}
.policy strong{font-weight:600;color:var(--text)}
.policy a{font-weight:600}
.policy-meta{
  font-size:var(--step--1);color:var(--text-muted);
  border-top:1px solid var(--border);padding-top:1.1rem;margin-top:1.25rem;
}

/* ---------- cohort detail strip ---------- */
.cohort{
  display:grid;gap:0;border:1px solid var(--border);border-radius:14px;
  background:var(--surface);overflow:hidden;
}
.cohort div{padding:1.15rem 1.35rem;border-bottom:1px solid var(--border)}
.cohort div:last-child{border-bottom:0}
.cohort dt{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);margin:0 0 .3rem;
}
.cohort dd{margin:0;font-size:1rem;font-weight:500}
@media (min-width:760px){
  .cohort{grid-template-columns:repeat(3,1fr)}
  .cohort div{border-bottom:0;border-right:1px solid var(--border)}
  .cohort div:last-child{border-right:0}
}


/* ---------- audience: a second axis, kept visually distinct from topic ---------- */
.filterbar{
  display:grid;gap:1rem;padding-block:1.75rem;margin-top:1.75rem;
  border-top:1px solid var(--border);
}
.filterrow{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.filterlabel{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);
  flex:0 0 auto;margin-right:.15rem;
}
.aud-pick{display:inline-flex;border:1px solid var(--border-strong);border-radius:999px;overflow:hidden}
.aud-pick a{
  font-size:.8125rem;font-weight:500;text-decoration:none;color:var(--text);
  padding:.4rem .9rem;border-right:1px solid var(--border-strong);white-space:nowrap;
}
.aud-pick a:last-child{border-right:0}
.aud-pick a:hover{background:var(--brand-soft);color:var(--brand)}
.aud-pick a[aria-current="true"]{background:var(--brand);color:var(--brand-ink)}
/* badge on a post that is not written for the default reader */
.aud{
  display:inline-block;font-family:"IBM Plex Sans",sans-serif;
  font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:.15rem .5rem;border-radius:4px;
  background:var(--accent-soft);color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  vertical-align:middle;margin-left:.4rem;
}


/* ---------- founder ---------- */
.founder{display:grid;gap:1.75rem}
@media (min-width:820px){
  .founder{grid-template-columns:minmax(240px,320px) 1fr;gap:3rem;align-items:start}
}
.founder-photo{
  border-radius:16px;overflow:hidden;border:1px solid var(--border);
  background:var(--brand-soft);aspect-ratio:4/5;max-width:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:1.25rem;
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand);line-height:1.7;
}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block}
.founder-body{display:grid;gap:1.1rem;align-content:start}
.founder-body h2{font-size:var(--step-3)}
.founder-role{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);
}
.founder-body p{color:var(--text-muted);max-width:62ch}
.founder-quote{
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-2);line-height:1.4;
  color:var(--text);border-left:3px solid var(--accent);padding-left:1.25rem;margin:.35rem 0;
}
.founder-links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.35rem}

/* ---------- values ---------- */
.values{display:grid;gap:1.75rem}
@media (min-width:700px){.values{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media (min-width:1040px){.values{grid-template-columns:repeat(4,1fr)}}
.value{display:grid;gap:.5rem;align-content:start;padding-top:1rem;border-top:2px solid var(--brand)}
.value h3{font-size:var(--step-1)}
.value p{font-size:.9375rem;color:var(--text-muted)}


/* ---------- brand mark, reusable, theme aware ---------- */
.brandmark{
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:var(--brand-soft);border:1px solid var(--border);border-radius:12px;
  padding:.85rem;overflow:hidden;
}
.brandmark img{width:100%;height:100%;object-fit:contain;display:block}
.brandmark .mark-rev{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brandmark .mark-pos{display:none}
  :root:not([data-theme="light"]) .brandmark .mark-rev{display:block}
}
:root[data-theme="dark"] .brandmark .mark-pos{display:none}
:root[data-theme="dark"] .brandmark .mark-rev{display:block}

/* ---------- the bridge between the two about pages ---------- */
.crosscard{
  display:grid;gap:1.25rem;align-items:center;
  background:var(--surface);border:1px solid var(--border);border-radius:18px;
  padding:clamp(1.5rem,3vw,2.25rem);text-decoration:none;color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.crosscard:hover{border-color:var(--brand);box-shadow:var(--shadow-lift)}
@media (min-width:700px){
  .crosscard{grid-template-columns:auto 1fr auto;gap:1.75rem}
}
.crosscard-visual{
  width:88px;height:110px;border-radius:12px;flex:0 0 auto;
  background:var(--brand-soft);border:1px solid var(--border);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:"IBM Plex Mono",monospace;font-size:.5625rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand);padding:.5rem;line-height:1.6;
}
.crosscard-visual img{width:100%;height:100%;object-fit:cover;display:block}
.crosscard-visual.is-mark{padding:.85rem}
.crosscard-visual.is-mark img{object-fit:contain}
.crosscard-body{display:grid;gap:.4rem}
.crosscard-body h3{font-size:var(--step-2)}
.crosscard-body p{color:var(--text-muted);font-size:.9375rem;max-width:56ch}
.crosscard-go{
  font-size:.9375rem;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:.4rem;flex:0 0 auto;
}
.crosscard:hover .crosscard-go svg{transform:translateX(3px)}
.crosscard-go svg{transition:transform .15s ease}


/* ---------- client support: a utility page, not a sales page ---------- */
.urgent{
  display:grid;gap:1rem;align-items:center;
  background:var(--band-bg);color:#fff;border-radius:18px;
  padding:clamp(1.5rem,3.5vw,2.25rem);
}
@media (min-width:760px){.urgent{grid-template-columns:1fr auto;gap:2rem}}
.urgent h2{color:#fff;font-size:var(--step-2);max-width:22ch}
.urgent p{color:rgba(255,255,255,.86);max-width:52ch}
.urgent .eyebrow{color:rgba(255,255,255,.75)}
.bignum{
  font-family:"Source Serif 4",Georgia,serif;font-weight:700;
  font-size:clamp(1.75rem,4vw,2.5rem);color:#fff;text-decoration:none;
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bignum:hover{color:#fff;text-decoration:underline;text-underline-offset:6px}

.support-grid{display:grid;gap:1.25rem}
@media (min-width:820px){.support-grid{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.support-card{
  display:grid;gap:.75rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.5rem,3vw,2rem);text-decoration:none;color:inherit;
  border-top:4px solid var(--brand);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.support-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.support-icon{
  width:46px;height:46px;border-radius:13px;
  background:var(--brand-soft);color:var(--brand);
  display:grid;place-items:center;
  transition:background .15s ease, color .15s ease;
}
.support-icon svg{width:23px;height:23px;display:block}
a.support-card:hover .support-icon{background:var(--brand);color:var(--brand-ink)}
.support-card h3{font-size:var(--step-2)}
.support-card p{color:var(--text-muted);font-size:.9375rem}
.support-when{
  margin-top:.35rem;padding-top:.75rem;border-top:1px solid var(--border);
  font-size:.875rem;
}
.support-when b{display:block;font-size:.6875rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);font-family:"IBM Plex Mono",monospace;margin-bottom:.3rem;font-weight:500}
.support-go{
  margin-top:auto;padding-top:.75rem;font-size:.9375rem;font-weight:600;color:var(--brand);
  display:inline-flex;align-items:center;gap:.4rem;
}
a.support-card:hover .support-go svg{transform:translateX(3px)}
.support-go svg{transition:transform .15s ease}

.warn{
  border:2px solid var(--accent);border-radius:16px;background:var(--accent-soft);
  padding:clamp(1.5rem,3.5vw,2.25rem);display:grid;gap:.85rem;
}
.warn h2{font-size:var(--step-2);max-width:26ch}
.warn p{color:var(--text-muted);max-width:62ch}
.warn strong{color:var(--text)}


/* ---------- careers ---------- */
.jobs{display:grid;gap:.85rem}
.job{
  display:grid;gap:.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1.35rem 1.5rem;text-decoration:none;color:inherit;
  border-left:3px solid var(--brand);
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.job:hover{border-color:var(--brand);box-shadow:var(--shadow-lift)}
.job-top{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between}
.job h3{font-size:var(--step-1)}
.job p{font-size:.9375rem;color:var(--text-muted);max-width:62ch}
.job-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.2rem}
.tag{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:var(--accent-soft);border-radius:4px;padding:.15rem .45rem;
}
.tag-open{color:var(--brand);border-color:color-mix(in srgb, var(--brand) 35%, transparent);background:var(--brand-soft)}
.jobs-empty{
  border:1px dashed var(--border-strong);border-radius:14px;background:var(--bg-2);
  padding:clamp(1.35rem,3vw,1.85rem);display:grid;gap:.5rem;
}
.jobs-empty h3{font-size:var(--step-1)}
.jobs-empty p{color:var(--text-muted);font-size:.9375rem;max-width:62ch}

.perks{display:grid;gap:1.75rem}
@media (min-width:700px){.perks{grid-template-columns:repeat(2,1fr);gap:2rem}}
@media (min-width:1040px){.perks{grid-template-columns:repeat(3,1fr)}}
.perk{display:grid;gap:.5rem;align-content:start;padding-top:1rem;border-top:2px solid var(--brand)}
.perk h3{font-size:var(--step-1)}
.perk p{font-size:.9375rem;color:var(--text-muted)}


/* ---------- service area ---------- */
.area{display:grid;gap:1.75rem}
@media (min-width:860px){.area{grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:start}}
.area-group{display:grid;gap:.85rem;align-content:start}
.area-group h3{font-size:var(--step-1)}
.area-group > p{font-size:.9375rem;color:var(--text-muted);max-width:56ch}
.places{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.places li{
  font-size:.875rem;font-weight:500;
  border:1px solid var(--border-strong);border-radius:999px;padding:.35rem .85rem;
  background:var(--surface);
}
.places-soft li{background:transparent;color:var(--text-muted)}

/* ---------- contact routes ---------- */
.routes{display:grid;gap:1.25rem}
@media (min-width:820px){.routes{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
.route{
  display:grid;gap:.6rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.85rem);text-decoration:none;color:inherit;
  border-top:4px solid var(--brand);
  transition:box-shadow .15s ease, transform .15s ease;
}
a.route:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.route h3{font-size:var(--step-1)}
.route p{font-size:.9375rem;color:var(--text-muted)}
.route-value{
  font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:var(--step-2);
  color:var(--brand);font-variant-numeric:tabular-nums;word-break:break-word;
}


/* ---------- newsletter issue ---------- */
.issue-head{
  display:grid;gap:.9rem;
  padding-bottom:1.75rem;margin-bottom:2rem;
  border-bottom:3px double var(--border-strong);
}
.issue-meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.issue-meta .sep{color:var(--border-strong)}
.issue-head h1{font-size:var(--step-3)}
.issue-standfirst{font-size:var(--step-1);color:var(--text-muted);line-height:1.6}

.issue-note{
  display:grid;gap:1rem;
  background:var(--bg-2);border-radius:14px;
  padding:clamp(1.35rem,3vw,1.85rem);margin-bottom:2.5rem;
}
.issue-note p{color:var(--text);line-height:1.7}
.issue-from{display:flex;align-items:center;gap:.8rem}
.issue-from img{width:44px;height:44px;border-radius:50%;object-fit:cover;display:block;flex:0 0 auto}
.issue-from span{font-size:.875rem;color:var(--text-muted)}
.issue-from b{display:block;color:var(--text);font-size:.9375rem}

.issue-items{display:grid;gap:0}
.issue-item{
  display:grid;gap:.55rem;
  padding-block:1.75rem;border-top:1px solid var(--border);
}
.issue-item:first-child{border-top:0;padding-top:.5rem}
.issue-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--accent);
}
.issue-item h2{font-size:var(--step-2)}
.issue-item p{color:var(--text-muted);line-height:1.7}
.issue-item a.more{font-weight:600;font-size:.9375rem;display:inline-flex;align-items:center;gap:.4rem}
.issue-item a.more svg{transition:transform .15s ease}
.issue-item a.more:hover svg{transform:translateX(3px)}

.issue-sign{
  margin-top:2.5rem;padding-top:1.75rem;border-top:3px double var(--border-strong);
  display:grid;gap:.5rem;
}
.issue-sign p{color:var(--text-muted)}
.issue-sign .sig{
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-2);
  color:var(--brand);font-weight:600;
}

.subscribe{
  display:grid;gap:1rem;
  border:2px solid var(--brand);border-radius:16px;background:var(--brand-soft);
  padding:clamp(1.5rem,3.5vw,2.25rem);
}
.subscribe h2{font-size:var(--step-2);max-width:24ch}
.subscribe > p{color:var(--text-muted);max-width:58ch}
.subscribe-form{display:grid;gap:.75rem;max-width:440px}
@media (min-width:560px){
  .subscribe-form{grid-template-columns:1fr auto;align-items:end;max-width:520px}
  .subscribe-form .form-note{grid-column:1/-1}
}


/* ---------- post lede: wider than the reading column ---------- */
.article-lede{
  width:min(980px, 100%);
  margin-bottom:2.25rem;
}
@media (min-width:1080px){
  /* the wrap is wider than the reading column, so media can run on past it */
  .article-lede{width:980px;max-width:calc(100vw - (2 * var(--gutter)))}
}
.article-head-split{display:grid;gap:1.5rem;align-items:start}
@media (min-width:820px){
  .article-head-split{grid-template-columns:1.25fr .75fr;gap:2.5rem}
}
.article-head-split .hero-shot{aspect-ratio:4/3}

/* ---------- video: a facade, so the player only loads on demand ---------- */
.video{
  position:relative;aspect-ratio:16/9;max-width:100%;
  border-radius:14px;overflow:hidden;border:1px solid var(--border);
  background:var(--bg-2);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;margin-top:1.5rem;
}
.video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.video-play{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;text-align:center;
}
.video-play-btn{
  width:66px;height:66px;border-radius:50%;
  background:var(--band-bg);color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px -6px rgba(0,0,0,.45);
  transition:transform .15s ease, background-color .15s ease;
}
.video:hover .video-play-btn{transform:scale(1.07);background:var(--brand-hover)}
.video-label{
  font-family:"IBM Plex Mono",monospace;font-size:.6875rem;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--text-muted);
}
.video-cap{font-size:.8125rem;color:var(--text-muted);margin-top:.6rem}
/* small play badge on cards for posts that have a video */
.has-video{position:relative}
.has-video::after{
  content:"";position:absolute;left:.65rem;top:.65rem;
  width:26px;height:26px;border-radius:50%;
  background:var(--brand);
  clip-path:circle(50%);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.has-video::before{
  content:"";position:absolute;left:1.42rem;top:1.24rem;z-index:1;
  border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent #fff;
}


/* ---------- 30 day roadmap: a genuine sequence, so genuinely numbered ---------- */
.roadmap{display:grid;gap:1.25rem;position:relative}
@media (min-width:1000px){.roadmap{grid-template-columns:repeat(4,1fr);gap:1.5rem}}
.stage{
  display:grid;gap:.7rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.75rem);
  border-top:4px solid var(--brand);
}
.stage-days{
  font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
}
.stage h3{font-size:var(--step-1)}
.stage ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.stage li{font-size:.9375rem;color:var(--text-muted);line-height:1.55;padding-left:1rem;position:relative}
.stage li::before{
  content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}

/* ---------- the two starting points ---------- */
.starts{display:grid;gap:1.25rem}
@media (min-width:880px){.starts{grid-template-columns:repeat(2,1fr);gap:1.5rem}}

/* ---------- objections answered plainly ---------- */
.myths{display:grid;gap:1.5rem}
@media (min-width:820px){.myths{grid-template-columns:repeat(2,1fr);gap:1.75rem 2.5rem}}
.myth{display:grid;gap:.4rem;align-content:start;padding-left:1.1rem;border-left:3px solid var(--accent)}
.myth h3{font-size:1.0625rem;color:var(--text-muted);font-family:"IBM Plex Sans",sans-serif;font-weight:500;font-style:italic}
.myth p{font-size:.9375rem}
.myth p strong{color:var(--text)}


/* ---------- FAQ library ---------- */
.faq-search{display:grid;gap:.75rem;max-width:560px;margin-top:1.75rem}
.faq-search input{
  font:inherit;font-size:1rem;color:var(--text);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:10px;
  padding:.8rem 1rem;width:100%;
}
.faq-search input:focus{border-color:var(--brand);outline:2px solid var(--accent);outline-offset:1px}
.faq-meta{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;font-size:.8125rem;color:var(--text-muted)}
.faq-count{font-variant-numeric:tabular-nums}
.faq-expand{
  background:transparent;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:600;color:var(--brand);
  text-decoration:underline;text-underline-offset:3px;
}

.faq-list{display:flex;flex-direction:column}
.faq-head{padding-block:2rem .75rem}
.faq-head h2{font-size:var(--step-2)}
.faq-head p{font-size:.9375rem;color:var(--text-muted);max-width:60ch;margin-top:.35rem}

/* native details, so the answer is in the HTML whether it is open or not */
.faq-q{border-top:1px solid var(--border)}
.faq-q > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;gap:1rem;justify-content:space-between;
  padding-block:1.15rem;
}
.faq-q > summary::-webkit-details-marker{display:none}
.faq-q > summary:hover .faq-qtext{color:var(--brand)}
.faq-q > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.faq-qtext{
  font-family:"Source Serif 4",Georgia,serif;font-size:var(--step-1);font-weight:600;
  line-height:1.3;transition:color .15s ease;
}
.faq-chevron{
  flex:0 0 auto;margin-top:.35rem;color:var(--text-muted);
  transition:transform .2s ease, color .15s ease;
}
.faq-q[open] > summary .faq-chevron{transform:rotate(180deg);color:var(--brand)}
.faq-q[open] > summary .faq-qtext{color:var(--brand)}
.faq-a{padding-bottom:1.35rem;display:grid;gap:.75rem;max-width:68ch}
.faq-a p{color:var(--text-muted);font-size:.9375rem;line-height:1.65}
.faq-a p strong{color:var(--text)}
.faq-tags{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.15rem}
.faq-where{
  font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);
}
.faq-pin{
  font-family:"IBM Plex Sans",sans-serif;font-size:.625rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--brand-ink);background:var(--brand);border-radius:4px;padding:.1rem .4rem;
}
.faq-empty{
  border:1px dashed var(--border-strong);border-radius:14px;background:var(--bg-2);
  padding:2rem;text-align:center;color:var(--text-muted);margin-top:2rem;
}

/* the same component embedded on any other page */
.faq-embed{border-top:1px solid var(--border)}
.faq-embed .faq-head{display:none}


/* ---------- CTA band with an inline form ---------- */
.band-split{display:grid;gap:2rem}
@media (min-width:900px){.band-split{grid-template-columns:1fr minmax(340px,420px);gap:3rem;align-items:start}}
.band-copy{display:grid;gap:1rem;align-content:start}

.band-form{
  background:var(--band-card);color:var(--band-card-text);
  border:1px solid var(--band-card-border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.75rem);
  display:grid;gap:.85rem;
}
.band-form h3{font-size:var(--step-1);color:var(--band-card-text)}
.band-form > p{font-size:.875rem;color:#5C5474}
.band-form .field label{color:var(--band-card-text)}
.band-form .field input{
  background:#fff;color:var(--band-card-text);border-color:#CFC6E4;
}
.band-form .field input:focus{border-color:#523092;outline-color:#8D3092}
.band-form .btn{width:100%;background:#523092;color:#fff;border-color:#523092}
.band-form .btn:hover{background:#3E2372;border-color:#3E2372;color:#fff}
.band-form-note{font-size:.6875rem;color:#5C5474;line-height:1.5}
.band-form-note a{color:#523092}
.field-row{display:grid;gap:.85rem}
@media (min-width:480px){.field-row{grid-template-columns:1fr 1fr}}


/* ---------- partner badge ---------- */
.partner-badge{
  display:inline-block;border-radius:12px;overflow:hidden;
  border:1px solid var(--border);background:#333;line-height:0;
  max-width:280px;
}
.partner-badge img{width:100%;height:auto;display:block}


/* ---------- client reviews ---------- */
.stars{display:flex;gap:.15rem;line-height:0;color:var(--star)}
.stars svg{flex:0 0 auto;width:18px;height:18px;fill:currentColor}
.stars .star-empty{color:var(--star-empty)}
/* Windows high contrast replaces authored colour outright, so give the
   filled and empty stars a shape difference rather than only a colour one. */
@media (forced-colors: active){
  .stars svg{fill:currentColor}
  .stars .star-empty{opacity:.45}
}

.reviews{display:grid;gap:1.25rem}
@media (min-width:760px){.reviews{grid-template-columns:repeat(2,1fr);gap:1.5rem}}
@media (min-width:1100px){.reviews{grid-template-columns:repeat(3,1fr)}}
.review{
  display:grid;gap:1rem;align-content:start;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(1.35rem,3vw,1.75rem);
  border-top:4px solid var(--accent);
}
.review blockquote{
  margin:0;font-family:"Source Serif 4",Georgia,serif;
  font-size:var(--step-1);line-height:1.45;color:var(--text);
}
.review figcaption{
  margin-top:auto;padding-top:.85rem;border-top:1px solid var(--border);
  font-size:.875rem;color:var(--text-muted);
}
.review figcaption b{display:block;color:var(--text);font-size:.9375rem;font-weight:600}
.review-meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-top:.5rem}
.review-src{
  font-family:"IBM Plex Mono",monospace;font-size:.625rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background:var(--accent-soft);border-radius:4px;padding:.1rem .4rem;
}
.review-date{font-size:.8125rem;color:var(--text-muted)}
.review-pending{
  grid-column:1/-1;
  border:1px dashed var(--border-strong);border-radius:16px;background:var(--bg-2);
  padding:clamp(1.5rem,3.5vw,2.25rem);display:grid;gap:.6rem;
}
.review-pending h3{font-size:var(--step-1)}
.review-pending p{color:var(--text-muted);font-size:.9375rem;max-width:62ch}

/* ============================================================================
   WordPress specifics. Everything above this line came from the concept.
   ========================================================================= */

/* The admin bar is position:fixed, so a sticky header needs to clear it. */
.admin-bar .site-header{top:32px}
@media (max-width:782px){.admin-bar .site-header{top:46px}}

/* Editor alignment classes.

   These are scoped to .article-body, the blog reading column, and must never
   be widened to .entry-content. WordPress puts entry-content on the content
   block of every page, so a max-width there caps every section of every page.
   That is exactly what happened: with --measure undefined the fallback of 70ch
   applied site-wide, and margin-inline:0 pinned it all to the left.

   Pages size themselves with .wrap. Nothing here should reach them. */
.article-body > *{max-width:100%;margin-inline:0}
/* Wider than the text, centred on it. min() keeps it inside the viewport on a
   narrow screen, where the breakout collapses to nothing rather than causing
   a sideways scroll. */
.article-body > .alignwide{
  width:min(980px, calc(100vw - (2 * var(--gutter))));
  max-width:none;
  margin-inline:calc((100% - min(980px, calc(100vw - (2 * var(--gutter))))) / 2);
}
.article-body > .alignfull{width:100vw;max-width:none;margin-inline:calc(50% - 50vw)}

/* The body of every imported post is HubSpot's own markup, which carries
   inline widths, wrapper divs and embed scaffolding written for a different
   page. None of it can be trusted to stay inside the column on its own. */
.article-body img{max-width:100%;height:auto;border-radius:12px}
.article-body iframe,.article-body video,.article-body embed,.article-body object{max-width:100%}
.article-body figure{margin:0}
.article-body table{width:100%;border-collapse:collapse;font-size:.9375rem}
.article-body table th,.article-body table td{
  border:1px solid var(--border);padding:.6rem .75rem;text-align:left;vertical-align:top;
}
.article-body pre{overflow-x:auto;max-width:100%}
.alignleft{float:left;margin:.35rem 1.5rem 1rem 0}
.alignright{float:right;margin:.35rem 0 1rem 1.5rem}
.aligncenter{margin-inline:auto}

/* WordPress emits these on images and captions. */
.wp-block-image img{height:auto;border-radius:12px}
.wp-block-image figcaption,.wp-caption-text{
  font-size:var(--step--1);color:var(--text-muted);margin-top:.6rem;line-height:1.5;
}
.screen-reader-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Skip link. Visible only once focused, which is the whole point of it. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--brand);color:var(--brand-ink);
  padding:.75rem 1.25rem;border-radius:0 0 8px 0;font-weight:600;
}
.skip-link:focus{left:0}

/* A single toggle in the footer. The site follows the operating system until
   somebody says otherwise, and the choice is remembered per browser. */
.themeswitch{
  display:inline-flex;align-items:center;gap:.5rem;
  background:transparent;border:1px solid var(--border-strong);border-radius:999px;
  color:var(--text-muted);font:inherit;font-size:.8125rem;font-weight:500;
  padding:.4rem .9rem;cursor:pointer;
}
.themeswitch:hover{border-color:var(--brand);color:var(--brand)}
.themeswitch svg{display:block}

/* The core categories block renders a plain list. Dress it as the concept's
   filter chips so the blog index matches the rest of the site. */
.wp-block-categories.cats{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem;
}
.wp-block-categories.cats li{margin:0}
.wp-block-categories.cats a{
  display:inline-block;
  font-size:.875rem;font-weight:500;text-decoration:none;color:var(--text);
  border:1px solid var(--border-strong);border-radius:999px;
  padding:.35rem .85rem;background:var(--surface);
}
.wp-block-categories.cats a:hover{
  border-color:var(--brand);color:var(--brand);background:var(--brand-soft);
}
.wp-block-categories.cats .current-cat > a{
  background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600;
}

/* ---------- narrow header ----------
   At 320px the logo, search and a labelled burger together overflow the
   header, pushing the burger off screen and making the menu unreachable.
   Shed the label first, then tighten, so the menu is always reachable. */
.site-header .wrap{flex-wrap:nowrap;min-width:0}
.logo{min-width:0}
.burger{flex:0 0 auto;white-space:nowrap}
@media (max-width:400px){
  .burger-label{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .burger{gap:0;padding:.55rem .6rem}
  .searchbtn{width:36px;height:36px}
  .site-header .wrap{gap:.5rem}
  .logo img{height:28px}
}
@media (max-width:340px){
  .logo img{height:26px}
  .site-header .wrap{gap:.35rem}
}

/* ---------- responsive guards ----------
   Checked at 320, 360, 390, 414, 768, 834, 1024, 1280, 1440 and 1920. */

/* Nothing may push the page sideways. Wide things scroll inside their own box
   instead, which is handled per component below. */
html,body{overflow-x:clip;max-width:100%}

/* The header has to survive the awkward width where the desktop nav has just
   appeared but there is not much room for it yet. */
@media (min-width:1000px) and (max-width:1180px){
  .site-header .wrap{gap:.5rem}
  .nav-desktop{gap:0}
  .nav-desktop a{padding-inline:.45rem;font-size:.875rem}
  .header-cta{margin-left:.4rem}
}
/* Below 1120px the call to action is the first thing worth losing; the phone
   number is in the header on mobile and in the footer everywhere. */
@media (min-width:1000px) and (max-width:1119px){
  .header-cta{display:none}
}

/* Anything that genuinely cannot reflow scrolls in its own container rather
   than widening the page. */
.wp-block-table,
.entry-content table{display:block;max-width:100%;overflow-x:auto}

/* Long unbroken strings, which in practice means URLs pasted into copy. */
.article-body,.policy,.faq-a,.card p,.lead{overflow-wrap:break-word}

/* Images never exceed their column, whatever width attribute they carry. */
img,svg,video,iframe{max-width:100%;height:auto}

/* iOS zooms the page when a focused field is under 16px. */
@media (max-width:782px){
  input,select,textarea{font-size:16px}
}

/* Tap targets on touch devices. */
@media (pointer:coarse){
  .nav-panel a,.menu-links a,.footer-col a{min-height:44px;display:flex;align-items:center}
  .btn{min-height:44px}
}

/* Respect a stated preference for less movement. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}