/* The Next Revolution
   Shared stylesheet. Slate palette, locked 24 August 2026 (Mark's option B).
   Headings Fraunces, body Poppins, accent yellow #FBD207 (Mark's option 2, chosen 7 and
   9 September 2026; was #F9C909). Hover #D4B100, the brand pack's deep yellow.

   ACCESSIBILITY NOTES, do not change these values without re-measuring:
   - --surface #265693 carries --muted #b8d0ef at 4.69:1 and --accent #FBD207 at 5.05:1
     (measured 10 September; #F9C909 was 4.72). --muted is only just over the WCAG 2.1 AA
     minimum of 4.5. Nudging this colour lighter puts --muted under.
     Any change to it must be measured, not eyeballed.
   - --surface-hover #2b62a8 FAILS as a fill (3.90 muted, 4.19 accent). It is used as a
     border only.
   - Long body copy sits on --bg or --alt, never on --surface.
*/

/* ---------- SELF HOSTED FONTS ----------
   Fraunces (titles) and Poppins (body), SIL Open Font Licence 1.1, latin subset.
   Licence texts and provenance are in assets/fonts/. Replaces the Google Fonts CDN on
   3 September 2026, so the site makes no third party request and no visitor IP address
   reaches Google. That also keeps the fonts out of the privacy notice as a processor.

   PATHS: these URLs resolve relative to THIS STYLESHEET, which already sits in assets/.
   So it is fonts/x.woff2, not assets/fonts/x.woff2. Getting that wrong is what 404ed the
   hero image on every page on 24 August, and it looked deliberate rather than broken.

   Fraunces is variable: opsz 9 to 144, wght 100 to 900. Optical sizing is left on the
   browser default, which is how the large hero and the small card headings differ.
*/
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-var.woff2) format('woff2-variations')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:100 900;font-display:swap;
  src:url(fonts/fraunces-var-italic.woff2) format('woff2-variations')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;
  src:url(fonts/poppins-300.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-400.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-500.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-600.woff2) format('woff2')}

:root{
  --serif:'Fraunces','Georgia',serif;
  --sans:'Poppins','Segoe UI',system-ui,sans-serif;

  --bg:#1A2540;
  --alt:#141D33;
  --surface:#265693;
  --surface-hover:#2b62a8;
  --text:#EDF1FA;
  --muted:#b8d0ef;
  --accent:#FBD207;
  --accent-hover:#D4B100;
  --accent-text:#1A1600;
  --band:#265693;
  --border:rgba(119,163,220,0.30);
  --overlay:linear-gradient(105deg,#1A2540 44%,rgba(26,37,64,0.88) 62%,rgba(26,37,64,0.12) 84%);
  --hero-lede:#b8d0ef;
  --art-bg:#141D33;
}

html,body{margin:0;padding:0;background:var(--bg)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.65;min-height:100vh;-webkit-font-smoothing:antialiased}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{max-width:100%}

.wrap{max-width:1240px;margin:0 auto;padding:0 clamp(24px,5vw,80px)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.08}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-text);padding:12px 20px;font-family:var(--sans);font-weight:600;z-index:100;border-radius:0 0 8px 0}
.skip:focus{left:0}

.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.26em;text-transform:uppercase;color:var(--accent);display:block}

.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15px;border-radius:6px;padding:14px 30px;cursor:pointer;transition:.15s;letter-spacing:.02em;border:1.5px solid transparent}
.btn-primary{background:var(--accent);color:var(--accent-text);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:var(--accent-text)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--accent)}

/* ---------- NAV, shared by every page ---------- */
.nav{display:flex;align-items:center;gap:26px;padding:20px 0}
/* The logo sits straight on the navy, matching the footer. The cream chip was dropped on
   3 September 2026: it read as a sticker on a dark page. The file is tnr-logo-light-trim.svg,
   the brand negative logo with the canvas cropped to the artwork (the master sits on a
   283 square with the mark filling only 35 per cent of the height, so it rendered tiny) and
   with the retired COACHING | TRAINING | ADVISORY strapline removed, per decision 24.
   The masters tnr-logo-light.svg and tnr-logo-dark.svg are untouched alongside it. */
.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:50px;width:auto;display:block}
/* The .cap caption beside the logo carried "People, Purpose, Performance".
   Removed on 7 September 2026 when the tagline became "The Future of Work" and moved
   into the homepage headline.

   This comment originally said "removed from all fourteen pages". It was thirteen.
   about-us.html kept its span for the rest of that day, and because the rule here had
   already gone it rendered as unstyled inline text in the navigation rather than as a
   caption, which is why it read as stray body copy. Caught by Kat looking at the page.
   The lesson is in the log: a comment asserting that a change reached every page is a
   claim, and it needs the same verification as the change itself. */
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{font-size:15px;color:var(--text);opacity:.92}
.menu a:hover,.menu a[aria-current="page"]{color:var(--accent)}

/* ---------- DROPDOWNS, Services and Thought Leadership ----------
   Click driven, not hover: there is no hover on a touch screen, and a hover only menu
   is unreachable there. The button carries aria-expanded, Escape closes it and returns
   focus, and the panel is hidden with the hidden attribute so it is out of the tab order
   when closed. Below 980px the whole thing is replaced by the burger menu, where the
   sub items are simply listed rather than hidden behind a control. */
.hassub{position:relative;display:flex;align-items:center}
.subtoggle{background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);font-size:15px;
  font-weight:300;color:var(--text);opacity:.92;display:inline-flex;align-items:center;gap:7px;line-height:inherit}
.subtoggle:hover,.subtoggle[aria-expanded="true"],.subtoggle.on{color:var(--accent)}
.chev{transition:transform .18s ease;flex:0 0 auto}
.subtoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){.chev{transition:none}}
/* NAMED .navsub, not .sub. The homepage already used class="sub" for the section
   subtitle under "Four ways we work" (.help .sub, further down this file). A generic
   .sub rule here made that paragraph position:absolute with a border, so it floated
   half off the left edge of the homepage and the section lost its spacing. Found on
   3 September 2026 by Kat looking at the page; the automated sweep passed it, because
   it checked overflow, contrast, console, fonts and links, and none of those change
   when an unrelated element is restyled. Keep nav class names prefixed. */
.navsub{position:absolute;top:calc(100% + 14px);left:-18px;min-width:266px;background:var(--alt);
  border:1px solid var(--border);border-radius:14px;padding:8px;z-index:40;
  box-shadow:0 18px 40px rgba(0,0,0,.38);display:flex;flex-direction:column}
.navsub a{display:block;padding:11px 14px;border-radius:9px;font-size:14.5px;color:var(--text);opacity:.92;white-space:nowrap}
.navsub a:hover,.navsub a[aria-current="page"]{background:var(--surface);color:var(--accent);opacity:1}
.navsub[hidden]{display:none}
/* HOMEPAGE ONLY, and this one was invisible. The homepage nav lives inside .hero, whose
   two direct .wrap children both carry z-index:2. The second one, the hero copy, is
   therefore painted over the dropdown panel that hangs down from the first. It has no
   background, so the panel still LOOKED correct in a screenshot while every link in it
   was unclickable: elementFromPoint at the centre of the first link returned DIV.wrap,
   not the link. Found 3 September 2026 by clicking through, not by looking.
   .hero also has overflow:hidden, so a panel taller than the remaining hero height would
   be clipped. At 100vh there is ample room, but that is the constraint if it ever grows. */
.hero > .wrap.navwrap{z-index:20}
/* Note the doubled class. `.hero > .navwrap` alone is the same specificity as
   `.hero > .wrap` further down the file, so the later rule won and z-index stayed at 2.
   The first attempt at this fix therefore changed nothing, and only the click-through
   test showed it. Adding .wrap.navwrap raises specificity and settles it regardless of
   source order. */
.nav .book{margin-left:8px;padding:11px 20px}
.navbar{background:var(--alt);border-bottom:1px solid var(--border)}

/* mobile menu */
.burger{display:none;margin-left:auto;background:transparent;border:1.5px solid var(--border);border-radius:8px;color:var(--text);width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center;flex:0 0 auto}
.burger svg{display:block}
.mobmenu{display:none;background:var(--alt);border-bottom:1px solid var(--border)}
.mobmenu.open{display:block}
.mobmenu a{display:block;padding:15px 0;font-size:17px;border-bottom:1px solid var(--border);color:var(--text)}
.mobmenu a:last-child{border-bottom:0}
.mobmenu .mobhead{display:block;padding:15px 0 6px;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border)}
.mobmenu a.subitem{padding-left:16px;font-size:15.5px;color:var(--muted)}
.mobmenu a.subitem[aria-current="page"]{color:var(--accent)}
/* The rule above sets colour on every link in the mobile menu and, being later in the
   file, it beat .btn-primary. That put --text (#EDF1FA) on the yellow Book a Call button
   at 1.39:1 against a 4.5 requirement, on every page, whenever the burger menu was open.
   Found 3 September 2026 by opening the menu and measuring. Do not remove. */
.mobmenu a.btn-primary,.mobmenu a.btn-primary:hover{color:var(--accent-text)}
.mobmenu a.btn-ghost{color:var(--text)}

/* ---------- HERO, homepage ---------- */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden}
.hero-art{position:absolute;inset:0;z-index:0;background-color:var(--art-bg);background-image:url('hero-earth.jpg');background-repeat:no-repeat;background-size:cover;background-position:78% center}
.hero::after{content:'';position:absolute;inset:0;z-index:1;background:var(--overlay)}
/* width:100% is load bearing. Without it the nav bar sizes to its own content
   and centres once the desktop menu is hidden. Recorded failure, 22 August 2026. */
.hero > .wrap{position:relative;z-index:2;width:100%}
.hero-inner{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;max-width:580px;padding:70px 0 90px;width:100%}
.hero .pill{display:inline-block;margin-bottom:28px}
.hero .eyebrow{font-size:11px;letter-spacing:0.22em;font-weight:500}
.hero h1{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(48px,6.5vw,88px);line-height:1.06;letter-spacing:-0.01em;margin:0 0 28px;color:var(--text);text-shadow:0 2px 24px rgba(0,0,0,.45)}
.hero .lede{color:var(--hero-lede);font-size:17px;line-height:1.78;max-width:620px;margin:0 0 44px;font-weight:300;text-shadow:0 1px 16px rgba(0,0,0,.4)}
.hero .btns{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap}
/* Hero lede as lines and a list, Mark's email of 7 September 2026. The wrapper keeps
   the .lede colour, size and shadow; the paragraph and list inherit them. Markers are
   the accent, as in .prose. Contrast is measured over the photograph, not the flat
   background (22 August lesson): re-measure if this block moves or grows. */
.hero .lede p{margin:0}
.hero .lede-list{list-style:none;margin:10px 0 0;padding:0}
.hero .lede-list li{position:relative;padding-left:22px;margin:4px 0 0}
.hero .lede-list li::before{content:'';position:absolute;left:2px;top:.72em;width:9px;height:2px;background:var(--accent)}

/* ---------- PAGE HEADER, every inner page ---------- */
.phero{background:var(--alt);padding:clamp(64px,9vw,116px) 0 clamp(48px,6vw,72px);border-bottom:1px solid var(--border)}
.phero h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.6vw,68px);line-height:1.08;letter-spacing:-0.01em;margin:18px 0 0;max-width:19ch}
.phero .lede{color:var(--muted);font-size:18px;line-height:1.75;max-width:62ch;margin:26px 0 0}
.phero .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

section{padding:clamp(64px,8vw,104px) 0}
.band{background:var(--alt)}

/* ---------- JUMP NAVIGATION, the two service pages ---------- */
.jump{position:sticky;top:0;z-index:30;background:rgba(20,29,51,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.jump ul{display:flex;gap:6px;list-style:none;overflow-x:auto;padding:10px 0;scrollbar-width:thin}
.jump a{display:block;white-space:nowrap;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);padding:9px 15px;border-radius:999px;border:1px solid transparent;transition:.15s}
.jump a:hover{color:var(--text);border-color:var(--border)}
.jump a.on{color:var(--accent);border-color:var(--accent)}

/* ---------- PROSE ---------- */
.prose{max-width:72ch}
.prose p{color:var(--muted);font-size:17px;line-height:1.8;margin:0 0 22px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--text);font-weight:500}
.prose ul{margin:0 0 22px;padding-left:22px}
.prose li{color:var(--muted);font-size:17px;line-height:1.8;margin-bottom:10px}
.prose li::marker{color:var(--accent)}
.svc{scroll-margin-top:76px;padding:clamp(56px,7vw,88px) 0;border-top:1px solid var(--border)}
.svc:first-of-type{border-top:0}
.svc h2{font-size:clamp(28px,4vw,44px);font-weight:400;margin:14px 0 26px;max-width:22ch}

/* the "result" callout */
.result{border-left:3px solid var(--accent);padding:22px 0 22px 26px;margin:30px 0;max-width:72ch}
.result .rl{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:10px}
.result p{color:var(--text);font-size:17.5px;line-height:1.7;margin:0}

/* testimonial in context */
.tq{border:1px solid var(--border);border-radius:16px;padding:30px 32px;margin:30px 0;max-width:72ch;background:var(--alt)}
.band .tq{background:var(--bg)}
/* Quotes carry real quotation marks and sit in italic, agreed 7 September 2026.
   Mark asked for something that makes a quote read as a quote and stands out
   from the body copy. Italic rather than a third typeface: two faces is the
   limit that keeps a site coherent, and Fraunces has a true italic. The marks
   are set explicitly rather than left to the browser default, which varies by
   language. */
.tq q{font-family:var(--serif);font-style:italic;font-size:20px;line-height:1.5;quotes:"\201C" "\201D" "\2018" "\2019";color:var(--text);display:block}
.tq .who{color:var(--accent);font-family:var(--sans);font-size:12px;letter-spacing:0.14em;text-transform:uppercase;margin-top:18px;display:block}

.ctaline{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

/* ---------- OUR PEOPLE: TILES AND BIO MODAL ----------
   Colour photographs, square, full bleed, on the studio grey the shots already carry.
   Hover lifts the tile and eases the photograph in slightly; both are switched off under
   prefers-reduced-motion. Selecting a tile opens the biography in a native <dialog>,
   which brings focus trapping and Escape with it rather than us reimplementing them.

   Progressive enhancement: the biographies are real content in the page, in .bios below
   the grid, and each tile is an ordinary anchor to its own bio. With JavaScript the
   script adds .js to <html>, which hides that section and turns the anchors into modal
   triggers. With JavaScript off or broken the page is photographs plus readable bios,
   which is the standing rule for this site's script. */
.ptiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ptile{display:block;color:inherit;border-radius:18px}
.ptile-img{display:block;overflow:hidden;border-radius:18px;border:1px solid var(--border);
  aspect-ratio:1/1;background:var(--alt);transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease}
.ptile-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.ptile-meta{display:block;padding:16px 2px 0}
.ptile-name{display:block;font-family:var(--serif);font-size:23px;font-weight:500;color:var(--text);transition:color .2s ease}
.ptile-role{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-top:5px}
.ptile:hover .ptile-img,.ptile:focus-visible .ptile-img{transform:translateY(-6px);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.34)}
.ptile:hover .ptile-img img,.ptile:focus-visible .ptile-img img{transform:scale(1.045)}
.ptile:hover .ptile-name,.ptile:focus-visible .ptile-name{color:var(--accent)}
.ptiles-hint{margin-top:26px;color:var(--muted);font-size:14.5px}
html.js .ptiles-hint::after{content:""}
@media (prefers-reduced-motion:reduce){
  .ptile-img,.ptile-img img{transition:none}
  .ptile:hover .ptile-img,.ptile:focus-visible .ptile-img{transform:none}
  .ptile:hover .ptile-img img,.ptile:focus-visible .ptile-img img{transform:none}
}
@media(max-width:980px){.ptiles{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ptiles{grid-template-columns:1fr;gap:26px}}

/* the biographies as page content, hidden once the script takes over */
html.js .bios{display:none}
.bios-h{font-size:clamp(26px,3.4vw,38px);font-weight:400;margin-bottom:30px}
.bio{max-width:72ch;margin:0 0 46px;padding-bottom:34px;border-bottom:1px solid var(--border)}
.bio:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.bio-head{display:flex;gap:20px;align-items:center;margin-bottom:20px}
.bio-img{width:96px;height:96px;border-radius:14px;object-fit:cover;flex:0 0 auto;border:1px solid var(--border)}
.bio h3{font-size:26px;font-weight:500;margin-bottom:4px}
.bio .role{display:block;color:var(--accent);font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.bio-body p{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:16px}
.bio-body p:last-child{margin-bottom:0}
.li{display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--accent);
  font-family:var(--sans);font-size:13.5px;font-weight:600}
.li svg{flex:0 0 auto}
.li:hover{text-decoration:underline}

/* the modal */
/* A <dialog> centres itself with the UA's position:absolute plus margin:auto. Setting
   position:relative here to hang the close button off silently killed that and the panel
   sat in the top left corner, which the first screenshot showed. position:fixed with
   inset:0 and margin:auto both centres it and gives the close button its containing
   block. The scroll lives on .biomodal-body, so the close button stays pinned rather
   than scrolling away with a long biography. */
.biomodal{border:1px solid var(--border);border-radius:20px;background:var(--alt);color:var(--text);
  padding:0;max-width:min(760px,92vw);width:100%;overflow:visible;
  position:fixed;inset:0;margin:auto}
.biomodal::backdrop{background:rgba(8,13,26,.72)}
.biomodal-body{padding:38px 40px 40px;max-height:82vh;overflow:auto;border-radius:20px}
.biomodal-body .bio{border-bottom:0;margin:0;padding:0;max-width:none}
.biomodal-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:10px;
  background:transparent;border:1px solid var(--border);color:var(--text);font-size:22px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.biomodal-close:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:560px){.biomodal-body{padding:30px 22px 30px}.bio-head{gap:16px}.bio-img{width:76px;height:76px}}

/* ---------- CARDS AND GRIDS ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.cards.two{grid-template-columns:1fr 1fr}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:32px 28px;transition:.15s}
.card:hover{border-color:var(--surface-hover);transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.28)}
/* Icons enlarged from 26 to 34 on 7 September 2026 at Mark's request, and left
   aligned, which they already were. The size is set here rather than on each
   svg so all four stay in step. */
.card .ic{color:var(--accent);margin-bottom:18px;line-height:0}
.card .ic svg{width:34px;height:34px}
.card h3{font-size:23px;margin-bottom:10px;font-weight:500}
.card p{color:var(--muted);font-size:14.5px}
.card a.more{display:inline-block;margin-top:16px;color:var(--accent);font-family:var(--sans);font-weight:600;font-size:14px}

.ptwo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:44px}
.path{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:44px 40px;display:flex;flex-direction:column;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.path:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 42px rgba(0,0,0,.30)}
.plabel{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.path h3{font-family:var(--serif);font-size:clamp(26px,3vw,36px);font-weight:500;margin-bottom:18px;line-height:1.1}
.path p{color:var(--muted);font-size:15.5px;line-height:1.7;margin-bottom:26px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
/* Pills changed from yellow to white and bold, 7 September 2026. Mark's reason
   was that the page carried too much yellow. The border keeps its 40 per cent
   strength, only the hue changes, so the visual weight is unchanged. The pills
   are not links: the whole card is the link, and Mark chose not to add a second
   clickable thing inside it. Shared with the homepage cards by design. */
.tag{font-family:var(--sans);font-size:13.5px;font-weight:600;color:var(--text);border:1px solid color-mix(in srgb,var(--text) 40%,transparent);border-radius:999px;padding:7px 16px}
.pcta{font-family:var(--sans);font-weight:600;color:var(--accent);display:inline-flex;align-items:center;gap:8px;margin-top:auto}
.pcta .arrow{transition:transform .25s ease}
.path:hover .pcta .arrow{transform:translateX(5px)}

/* ---------- HOMEPAGE SECTIONS ---------- */
.q:last-child{margin-bottom:0}

.believe{text-align:center}
.believe h2{font-size:clamp(30px,5vw,54px);margin:16px auto 0;max-width:16ch;font-weight:400}
.believe p{color:var(--muted);font-size:19px;max-width:62ch;margin:28px auto 0}
.help .eyebrow,.paths .eyebrow,.quotes .eyebrow,.believe .eyebrow{text-align:center}
.help h2,.paths h2,.quotes h2{font-size:clamp(30px,4.4vw,50px);text-align:center;margin:14px auto 0;max-width:20ch;font-weight:400}
.help .sub{text-align:center;color:var(--muted);max-width:54ch;margin:14px auto 52px}
.paths{background:var(--alt)}

.quotes{text-align:center}
.slider{max-width:800px;margin:44px auto 0}
.slide{display:none}
.slide.active{display:block}
.slide q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(22px,3.2vw,34px);line-height:1.35;quotes:"\201C" "\201D" "\2018" "\2019";color:var(--text)}
.slide .who{color:var(--accent);font-family:var(--sans);font-size:13px;letter-spacing:0.14em;text-transform:uppercase;margin-top:26px;display:block}
.dots{display:flex;gap:10px;justify-content:center;margin-top:34px}
.dot{width:14px;height:14px;border-radius:50%;background:transparent;border:2px solid var(--muted);cursor:pointer;padding:0}
.dot.on{background:var(--accent);border-color:var(--accent)}
.sarrows{display:flex;gap:12px;justify-content:center;margin-top:22px}
.sarrows button{background:transparent;border:1.5px solid var(--border);color:var(--text);border-radius:999px;width:44px;height:44px;cursor:pointer;font-size:18px;line-height:1}
.sarrows button:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- SECTION SUB NAV, thought leadership ---------- */
.subnav{border-bottom:1px solid var(--border);background:var(--alt)}
.subnav ul{display:flex;gap:8px;list-style:none;overflow-x:auto;padding:0 0 0}
.subnav a{display:block;white-space:nowrap;font-family:var(--sans);font-size:15px;font-weight:500;color:var(--muted);padding:18px 4px;margin-right:22px;border-bottom:2px solid transparent}
.subnav a:hover{color:var(--text)}
.subnav a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- DOWNLOAD / RESEARCH ITEMS ---------- */
/* Publication cards carry a cover image from 7 September 2026. Mark asked for
   the image that identifies each paper rather than a bare row of text. The
   image column is fixed and the text flexes, so a long title never squeezes
   the picture. Below 860 the image goes full width above the text, and below
   700 the button drops underneath as it already did. A card with no image
   still lays out correctly, which is the state the NEET paper is in. */
.pub{display:grid;grid-template-columns:200px 1fr auto;gap:26px;align-items:center;border:1px solid var(--border);border-radius:18px;padding:26px 30px;margin-bottom:18px;background:var(--alt)}
.pub.nocover{grid-template-columns:1fr auto}
/* height:auto is load bearing. The img carries width and height attributes so the
   browser reserves space before the file arrives, and without height:auto that
   attribute wins over aspect-ratio: the picture rendered 200 wide by 750 tall. */
.pub-cover{width:200px;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--border)}
.pub h3{font-size:22px;font-weight:500;margin-bottom:10px}
.pub p{color:var(--muted);font-size:15.5px;max-width:60ch}
@media(max-width:860px){.pub{grid-template-columns:1fr auto}.pub-cover{width:100%;aspect-ratio:16/7;grid-column:1/-1}}
@media(max-width:700px){.pub,.pub.nocover{grid-template-columns:1fr}}

/* ---------- TEAM ---------- */
.teamlede{color:var(--muted);font-size:17px;line-height:1.8;max-width:68ch;margin:0}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:46px}
.member{background:var(--alt);border:1px solid var(--border);border-radius:18px;padding:34px 32px}
.member .top{display:flex;align-items:center;gap:20px;margin-bottom:22px}
.member .avatar{width:88px;height:88px;border-radius:50%;background:var(--surface);border:1px solid var(--border);flex:0 0 auto;object-fit:cover;object-position:center top}
.member h3{font-size:26px;font-weight:500;margin-bottom:4px}
.member .role{color:var(--accent);font-family:var(--sans);font-size:12px;letter-spacing:0.16em;text-transform:uppercase}
.member p{color:var(--muted);font-size:15.5px;line-height:1.75;margin-bottom:16px}
.member p:last-child{margin-bottom:0}

/* ---------- CONTACT ---------- */
.ccols{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
/* Grid children default to min-width:auto, so a long <option> string sets a min-content
   width the column cannot shrink below and the page scrolls sideways. Caught by rendering
   at 390px on 24 August 2026. */
.ccols > *{min-width:0}
.form{min-width:0}
.field select{max-width:100%}
.form{background:var(--alt);border:1px solid var(--border);border-radius:18px;padding:36px 34px}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--sans);font-weight:500;font-size:14px;color:var(--text);margin-bottom:8px}
.field input,.field textarea,.field select{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--sans);font-size:15.5px;font-weight:300;padding:13px 15px}
.field textarea{min-height:130px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:rgba(184,208,239,.55)}
.field .hint{color:var(--muted);font-size:13px;margin-top:7px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px}
.consent input{width:20px;height:20px;flex:0 0 auto;margin-top:3px;accent-color:var(--accent)}
.consent label{font-size:14px;color:var(--muted);line-height:1.6}
.cways{display:flex;flex-direction:column;gap:18px;margin-top:8px}
.way{border:1px solid var(--border);border-radius:16px;padding:26px 28px;background:var(--alt)}
.way h3{font-size:20px;font-weight:500;margin-bottom:8px}
.way p{color:var(--muted);font-size:15px;margin-bottom:16px}
@media(max-width:900px){.ccols{grid-template-columns:1fr;gap:34px}}

/* ---------- FINAL CTA + FOOTER ---------- */
.final{background:var(--band);text-align:center}
.final h2{font-size:clamp(30px,5vw,52px);color:var(--text);font-weight:400}
.final p{color:var(--muted);max-width:52ch;margin:18px auto 0}
.final .btns{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
footer{background:var(--alt);border-top:1px solid var(--border);padding:60px 0 40px}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
.foot img{height:46px;width:auto}
.fmenu{display:flex;gap:22px;flex-wrap:wrap}
.fmenu a{color:var(--muted);font-size:14px}
.fmenu a:hover{color:var(--accent)}
.social{display:flex;gap:14px;align-items:center}
/* Tap targets enlarged to 44 x 44 on 10 September 2026. The icons were 20 x 20, under the
   WCAG 2.2 minimum of 24 x 24 and fiddly on a phone, which is the most likely reading of
   Mark's "the social media icons are not working properly" (7 September): the links
   themselves resolve and were not reproducibly broken. Negative margin keeps the visual
   spacing the same. */
.social a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px -6px}
.social a:hover{color:var(--accent)}
.note{color:var(--muted);font-size:12.5px;margin-top:34px;padding-top:20px;border-top:1px solid var(--border);text-align:center;line-height:1.7}
.note .legal{display:block;margin-top:8px}

/* ---------- REVIEW MODE ----------
   Marks claims that may not be published until Mark has confirmed them.
   Constraint 8 and 25 in PROJECT-LOG.md. Remove class="review" from <body>
   at launch and every marker disappears. */
.unverified{border-bottom:2px dotted var(--accent);cursor:help}
body:not(.review) .unverified{border-bottom:0;cursor:auto}
/* The draft banner was removed on 7 September 2026 so the preview reads as the
   finished site, which is what the colour decision has to be judged against.
   Review mode itself stays on: the body still carries class="review", which is
   what shows the dotted underline on the one unfinished heading and the preview
   note on the thank you page. Both still come off before launch. */

/* ---------- RESPONSIVE ---------- */
/* ---------- NAV WIDTH BUDGET ----------
   Home, Services, Thought Leadership and About Us, plus the logo, the caption and the
   Book a Call button, is close to the width of the bar. Every value below was measured
   by rendering at ten widths on 3 September 2026, not chosen by eye. Defaults hold from
   1200px to at least 2000px; tighter spacing holds to 1100px; below that the caption has
   to go. Re-measure before changing any of it, because the failure is a wrapped nav.

   Note the counter-intuitive part: .wrap padding is clamp(24px,5vw,80px), so the bar is
   NARROWER on a very wide screen than on a 1440 one (1080px against 1096px). The budget
   therefore has to be met at 1600px and above, not at 1440. That is why the caption
   letter-spacing came down from 0.22em to 0.12em rather than the gaps coming down. */
@media(max-width:1199px){
  .nav{gap:20px}
  .menu{gap:20px}
  .logo img{height:46px}
}
@media(max-width:1199px){
  /* The caption goes here rather than at 1099. About Us became a dropdown on
     3 September, and its chevron was the 17px that tipped the 1100 to 1199 band into
     wrapping on all fourteen pages. Measured, then moved. */
}

@media(max-width:980px){
  .cards{grid-template-columns:1fr 1fr}
  .cards.three{grid-template-columns:1fr 1fr}
  .ptwo{grid-template-columns:1fr}
  .team{grid-template-columns:1fr}
  .menu{display:none}
  .burger{display:inline-flex}
}
@media(max-width:760px){
  .nav{gap:14px}
  .nav .book{display:none}
  .logo img{height:40px}
  .hero h1{font-size:clamp(40px,12vw,60px)}
  .member .top{gap:16px}
  .member .avatar{width:72px;height:72px}
}
@media(max-width:560px){
  .cards,.cards.two,.cards.three{grid-template-columns:1fr}
  /* The Email us button on Contact carries the full address. At 390px it measured 341px
     inside a 286px column and pushed the page 4px sideways, which is the 24 August
     sideways-scroll failure returning in a different element. Measured 3 September 2026.
     Buttons inside the contact cards now fill their column, so no address length can
     overflow again. */
  .way{padding:24px 20px}
  .way .btn{display:block;width:100%;text-align:center;padding:14px 12px}
  /* Only the Email us button carries a 31 character address. Sized so it holds one line
     down to a 360px viewport, measured rather than eyeballed: 241px of text in 248px of
     space. overflow-wrap is the safety net below that, because an ugly wrap on a very
     old phone is better than the page scrolling sideways. */
  .way .btn.email{font-size:13.5px;letter-spacing:0;overflow-wrap:anywhere}
  .result{padding-left:20px}
  .tq{padding:24px 22px}
  .form{padding:28px 22px}
}
@media print{
  .jump,.subnav,.burger,.mobmenu{display:none}
  body{background:#fff;color:#000}
}

/* ---------- FORM VALIDATION AND DELIVERY, 7 September 2026 ----------
   The enquiry form validates in the browser and then hands the requested document
   over on the thank you page. Delivering there rather than by email is what lets the
   download work with no sending route behind it.

   ACCESSIBILITY: --error #FF9BA3 measures 8.35:1 on --alt and 7.57:1 on --bg, both well
   clear of the 4.5 minimum for normal text. Error state is never colour alone: the field
   also gains a message and aria-invalid. Re-measure if this value is ever changed. */
:root{--error:#FF9BA3}

.field .err,.consent .err{display:none;font-family:var(--sans);font-size:13px;
  color:var(--error);margin-top:7px}
.field.bad .err{display:block}
.consent.bad .err{display:block}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--error)}
.consent.bad input{outline:2px solid var(--error);outline-offset:2px}

.deliver{background:var(--alt);border:1px solid var(--border);border-radius:18px;
  padding:32px 34px;max-width:72ch}
.deliver h2{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--text);
  margin-bottom:6px}
.deliver.one h2{margin-bottom:2px}
.dl{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:20px}
.dl li{margin:0}
.dl .meta{display:block;color:var(--muted);font-family:var(--sans);font-size:13px;margin-top:9px}
.dl .soon{color:var(--muted);font-size:16px;line-height:1.75}
.dl .soon strong{color:var(--text);font-weight:500}
.dl .soon a{color:var(--accent)}

/* Preview only. Removing the review class removes this with it. */
.previewnote{display:none}
body.review .previewnote{display:block;border-left:3px solid var(--accent);
  padding:10px 0 10px 16px;margin-bottom:22px;color:var(--muted);
  font-family:var(--sans);font-size:13.5px;line-height:1.65}

/* ---------- OUR PEOPLE, INSIDE ABOUT US, 7 September 2026 ----------
   Our People merged into About Us as one scrolling page. The section needs its
   own heading and lede rules because .phero h1 and .phero .lede are scoped to
   the page hero and this is a second-level section, not a second hero. */
#our-people{padding-top:clamp(56px,7vw,88px)}
#our-people .teamhead{font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,4.2vw,46px);line-height:1.1;letter-spacing:-0.01em;
  margin:14px 0 0;max-width:20ch;color:var(--text)}
#our-people .teamlede{color:var(--muted);font-size:18px;line-height:1.75;
  max-width:62ch;margin:22px 0 40px}

/* The questions. Autoplay with controls, 21 September 2026. Replaces the pinned
   .solve-pin block, which was 700vh with a sticky panel: that is what made a
   fast scroll skip a question (constraint 48) and what Mark meant by being
   locked there. Nothing is pinned now, so scrolling past costs nothing.
   The start state is scoped under .ready, which the script adds, so with no
   script all six questions read down the page and the bar stays hidden. */
.qc{background:var(--alt);padding:clamp(80px,12vh,150px) 0}
.qc-title{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(32px,4.6vw,60px);line-height:1.08;letter-spacing:-0.01em;
  margin:22px 0 clamp(36px,6vh,66px);max-width:20ch;color:var(--text)}
.qc-stage{position:relative}
.qc-q{font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(27px,4vw,54px);line-height:1.16;letter-spacing:-0.01em;
  max-width:24ch;color:var(--text);margin:0 0 22px}
.qc-bar{display:none}
.qc-stage.ready{min-height:clamp(150px,22vh,240px);perspective:1000px}
.qc-stage.ready .qc-q{position:absolute;left:0;right:0;top:0;margin:0;opacity:0;
  transform:rotateX(-78deg) scale(.92);transform-origin:50% 100%;
  transition:transform .7s cubic-bezier(.16,.84,.44,1),opacity .4s ease}
.qc-stage.ready .qc-q.on{opacity:1;transform:none}
.qc-stage.ready .qc-q.out{opacity:0;transform:rotateX(60deg) scale(.96)}
.qc-stage.ready ~ .qc-bar{display:flex}
.qc-bar{align-items:center;gap:clamp(14px,2vw,26px);margin-top:clamp(30px,5vh,52px);flex-wrap:wrap}
.qc-btns{display:flex;gap:10px;flex:0 0 auto}
.qc-b{width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--border);border-radius:12px;background:transparent;
  color:var(--text);transition:background .2s ease,border-color .2s ease}
.qc-b:hover{background:rgba(119,163,220,0.12)}
/* [hidden] loses to display:grid on the button, so the play and pause icons
   both showed at once. Scoped reset. */
.qc-b svg[hidden]{display:none}
.qc-b:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.qc-main{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
.qc-main:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.qc-track{flex:1 1 180px;height:2px;background:rgba(184,208,239,0.28);border-radius:2px;overflow:hidden}
.qc-fill{display:block;height:100%;width:0;background:var(--muted)}
.qc-count{flex:0 0 auto;margin:0;font-family:var(--sans);font-size:13px;font-weight:500;
  letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
.qc-sep{opacity:.5;margin:0 2px}
@media(max-width:700px){
  /* The bar wraps: buttons and counter share the first row, the progress line
     takes the full width underneath, where it is long enough to read. */
  .qc-bar{gap:14px}
  .qc-btns{order:1}
  .qc-count{order:2;margin-left:auto}
  .qc-track{order:3;flex:1 0 100%}
  .qc-q{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .qc-stage.ready .qc-q{transition:none}
}

/* The second research paper is written but not published. Its card says so and
   offers to reserve a copy rather than pretending to be a download. Added
   7 September 2026. Scoped under .pub on purpose: a bare .pubsoon loses to
   .pub p, which is more specific, and the label rendered as plain body text. */
.pub .pubsoon{display:inline-block;font-family:var(--sans);font-weight:600;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:999px;padding:4px 12px;margin:2px 0 12px;max-width:none}

/* ---- blog: index cards and post pages ----
   Added 7 September 2026, when the 33 rescued Squarespace posts came across.

   The cards are anchors rather than divs with a link inside, so the whole card is one
   target for a mouse and one stop for a keyboard, and the focus ring frames the card. */
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;padding:clamp(48px,6vw,72px) 0}
.pcard{display:flex;flex-direction:column;background:var(--alt);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;transition:border-color .15s,transform .15s}
.pcard:hover{border-color:var(--accent);transform:translateY(-3px)}
.pcard:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* A fixed 16:10 window means 33 cards of wildly different source shapes still line up. */
.pcard-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg);display:flex;align-items:center;justify-content:center}
.pcard-img img{width:100%;height:100%;object-fit:cover;display:block}

/* Four posts have images too small to fill the window without going soft: 201x251 is the
   smallest. Those sit at their own size, centred, rather than being stretched. Capped at
   the source height so the browser cannot upscale them either. */
.pcard.tiny .pcard-img img{width:auto;height:auto;max-width:60%;max-height:78%;object-fit:contain;border-radius:6px}

.pcard-txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcard-txt time{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent)}
/* Titles run from four words to twenty-four and excerpts are all the same length only by
   accident, which left rows of cards with very different amounts of text and a lot of
   dead space under the short ones. Both are clamped so every card occupies the same
   shape. The full title is always on the post itself, so nothing is lost. */
.pcard-txt h2{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.25;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.pcard-txt p{color:var(--muted);font-size:14.5px;line-height:1.65;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr);gap:28px 24px}}
@media(max-width:660px){.pgrid{grid-template-columns:1fr;gap:24px}.pcard-txt h2{font-size:20px}}

/* ---- a single post ---- */
.posthead h1{max-width:24ch}
.backlink{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);display:inline-block;margin-bottom:6px}
.backlink:hover{color:var(--accent)}
.byline{font-family:var(--sans);font-size:14.5px;color:var(--muted);margin:22px 0 0}
.byline time{color:var(--accent);font-weight:600;letter-spacing:.06em}
.byline .sep{margin:0 10px;opacity:.5}

/* The hero sits in the text column rather than full bleed. Eight of the 33 posts have no
   image large enough to be a hero at all, and a column-width image keeps the difference
   between a post with one and a post without from reading as a fault. */
.posthero{display:block;width:100%;max-width:760px;height:auto;border-radius:12px;
  border:1px solid var(--border);margin:clamp(36px,5vw,56px) auto 0}
.postbody{margin:0 auto}
/* One post links to Academia.edu with the bare URL as the link text, a 1,483px
   unbreakable string that pushed the whole page sideways. Breaking long words applies to
   every post rather than that one, because the next pasted URL would do the same. */
.postbody{overflow-wrap:anywhere}
.postbody a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.postbody a:hover{text-decoration-thickness:2px}
.postbody em{font-style:italic}

.postnav{padding:0 0 clamp(48px,6vw,72px)}
.pnrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:0 auto;
  border-top:1px solid var(--border);padding-top:34px}
.pn{font-family:var(--serif);font-size:18px;line-height:1.35;color:var(--text);
  border:1px solid var(--border);border-radius:10px;padding:18px 22px;transition:border-color .15s}
.pn:hover{border-color:var(--accent)}
.pn span{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.pn.next{text-align:right}
.pn.prev:only-child{grid-column:1}
.pn.next:only-child{grid-column:2}
@media(max-width:660px){.pnrow{grid-template-columns:1fr}.pn.next{text-align:left}.pn.next:only-child{grid-column:1}}

/* ---- About Us: the biographies below the photographs ----
   Added 7 September 2026. The four full biographies used to run one after another under
   the team photographs, repeating what the pop-up already shows.

   They are hidden rather than removed, because they are the pop-up's only source: the
   script clones them out of the page. They are also the fallback for a browser without
   dialog support, or with no script, where the tiles are ordinary anchors that jump to
   them. `bios-live` is set by the script at the point the modal is confirmed working, so
   the list disappears only when there is something better in its place. */
.bios-live .bios{display:none}

/* Our People now sits on the darker band, separating it from Who we are above.
   The page reads alt, bg, alt, band from top to bottom. */

/* ---------- PODCAST: THE QUOTE AND THE PINNED EPISODES, 10 September 2026 ----------
   Mark's email of 7 September: the podcast line as a large quote with speech marks, and
   "Everything starts with an idea." beneath in smaller type. Italic Fraunces with explicit
   curly marks, the same treatment as the testimonials (7 September), so no third face.
   Both marks are enlarged and set in the accent; they are generated content, so screen
   readers are not given them as characters to announce. */
.phero .bigq{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(26px,3.4vw,42px);
  line-height:1.3;color:var(--text);max-width:24ch;margin:26px 0 0;position:relative;padding-left:.9em}
.phero .bigq q{quotes:"\201C" "\201D" "\2018" "\2019"}
.phero .bigq q::before{position:absolute;left:0;top:-.28em;font-size:2.2em;line-height:1;color:var(--accent)}
/* Closing mark matched to the opening one in colour and size (Kat, 10 September). It stays
   inline so it follows the last word wherever the line breaks; line-height 0 stops the
   larger glyph from opening up the gap between the two lines of the quote. */
.phero .bigq q::after{font-size:2.2em;line-height:0;color:var(--accent);vertical-align:-.3em;margin-left:-.02em}
.phero .bigq-sub{color:var(--muted);font-size:18px;line-height:1.7;margin:18px 0 0;padding-left:calc(.9 * clamp(26px,3.4vw,42px))}
.eps .ep{display:flex;flex-direction:column}
.ep .epno{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
.ep h3{font-size:21px;line-height:1.3}
.ep .epguest{color:var(--text);font-size:14px;margin-bottom:10px}
.ep .eplink{margin-top:auto;padding-top:18px;color:var(--accent);font-family:var(--sans);font-weight:500;font-size:14.5px;text-decoration:none}
.ep .eplink:hover{text-decoration:underline}

/* ---------- SERVICE IMAGES, 10 September 2026 ----------
   Agreed 7 September: one image per service section, alternating left and right to break
   up the text, plus one on the services overview. The images are Mark's shortlist of
   9 September, placed as TEST images so everyone can judge the layout: two are still
   watermarked Adobe Stock previews and every one must be licensed before launch
   (constraint 4, README Before launch).
   Desktop: text column and a sticky image column, so a long section does not leave the
   image stranded at the top. Ratio 4:3 by default; .fig-tall is 4:5 for portrait sources;
   .fig-wide keeps the source ratio where cropping would cut people out (Jeff and Mark sit at
   the two edges of the speaking photograph).
   Below 980px the image sits above the text at 16:9, or its own ratio for .fig-wide. */
.svc-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(40px,5vw,76px);align-items:start}
.svc.img-left .svc-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.svc.img-left .svc-fig{order:-1}
.svc-fig{margin:0;position:sticky;top:92px;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:var(--alt);border:1px solid var(--border)}
.band .svc-fig{background:var(--bg)}
.svc-fig.fig-tall{aspect-ratio:4/5}
.svc-fig img{display:block;width:100%;height:100%;object-fit:cover}
.svc-fig.fig-wide{aspect-ratio:auto}
.svc-fig.fig-wide img{height:auto}
/* The per-service images came out on 21 September, at Mark's direction of
   16 September: images at the top of each main page only, not beside every
   service line. With no second column, .svc-text is the whole band and needs a
   reading width of its own, or the lines run the full 1240px of .wrap.
   The .svc-fig and .svc-grid rules above are left in place deliberately. They
   cost nothing, and putting an image back into a band is then a markup change
   rather than a stylesheet one. */
.svc-text{min-width:0}
/* Scoped to bands that lost their figure. The podcast intro still uses
   .svc-grid, and capping its text column would centre it inside the column. */
.svc .wrap:not(.svc-grid) .svc-text{max-width:72ch;margin-inline:auto}

/* Podcast intro. Mark, 16 September: the Jeff and Mark photograph stays but is
   "no taller than the block of text beside it". Matching a fixed ratio would
   only approximate that, so the figure is stretched to the grid row and the
   photograph is cropped to fill it. The text decides the height.
   object-position keeps both faces, which sit in the upper half of the frame;
   the desk and microphones at the bottom are what gets cropped. Below 980px the
   grid is one column and the rules below hand back to the shared 16:9 treatment. */
.pod-intro .svc-grid{align-items:stretch}
/* top:auto matters: .svc-fig is sticky with top:92px, and left in place under
   position:relative it pushes the photograph 92px below the text. Measured.
   The image is taken out of the flow so the figure has no intrinsic height of
   its own, otherwise the row is sized by the photograph and the text is what
   gets the empty space.
   The width is capped rather than filling the column: object-fit cover scales to
   the box width, so a full-width column rendered the faces very large and cut
   both men off at the chest. 340px shows them from the chest up. Narrower zooms
   out further, wider zooms in. Verified at 1440, 1024, 980 and 390. */
.pod-intro .svc-fig{position:relative;top:auto;aspect-ratio:auto;height:auto;
  width:min(340px,100%);justify-self:end}
.pod-intro .svc-fig img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 28%}
@media(max-width:980px){
  .svc-grid,.svc.img-left .svc-grid{grid-template-columns:1fr}
  .svc-fig,.svc.img-left .svc-fig{order:-1;position:static;aspect-ratio:16/9}
  .svc-fig.fig-tall{aspect-ratio:16/9}
  .svc-fig.fig-wide{aspect-ratio:auto}
  .pod-intro .svc-fig{width:auto;height:auto;justify-self:stretch;aspect-ratio:16/9}
}
@media print{.svc-fig,.phero-art{display:none}}


/* ---------- SERVICES OVERVIEW HEADER AS A PHOTOGRAPH, 10 September 2026 ----------
   Kat's request: the overview image displayed the way the homepage hero is, full bleed
   behind the header with the navy fading across it, rather than as a framed picture.
   Same construction as .hero: the photograph sits in .phero-art behind everything, and an
   overlay runs from solid --alt on the text side to almost clear on the right.
   The picture is an <img> rather than a CSS background so its path stays relative to
   the page, not the stylesheet (the 24 August hero 404).
   CONTRAST: measured over the rendered photograph, not the flat colour (22 August
   lesson). Re-measure if the image or the overlay changes. The current file is a
   1000px Adobe preview, so it will look soft on a wide screen until the licensed
   full-size image replaces it. */
.phero-photo{position:relative;overflow:hidden;isolation:isolate;min-height:min(86vh,820px);display:flex;align-items:center}
.phero-photo > .wrap{width:100%}
.phero-art{position:absolute;inset:0;z-index:-2;background:var(--alt)}
/* Mirrored for this photograph only: its subject (the two chamois) sits lower left, which
   is exactly where the text and the dark fade go. Flipped, they land on the open right
   side, the way the Earth does on the homepage. Remove .mirror if the final image is
   composed the other way round. */
.phero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:30% 100%;
  transform-origin:50% 100%}
/* The photograph is anchored at its bottom edge and enlarged a little from there, so the
   snow ridge stays in frame and the chamois ride higher, standing clearly on the
   mountain (Kat, 10 September). */
.phero-art img.mirror{transform:translateX(7%) scaleX(-1) scale(1.18)}
.phero-photo::after{content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,#141D33 40%,rgba(20,29,51,.86) 58%,rgba(20,29,51,.1) 84%)}
@media(max-width:980px){
  .phero-photo{min-height:0;display:block}
  .phero-photo::after{background:linear-gradient(180deg,rgba(20,29,51,.78) 0%,#141D33 62%)}
  .phero-art img{object-position:70% 30%}
}

/* ---- enquiry form: submission to Web3Forms ----
   Added 7 September 2026, when the form stopped being a validation exercise and
   started reporting to contact@thenextrevolution.co.uk.

   .hp is the honeypot. Hidden with position rather than display:none or
   hidden, because some bots skip anything display:none and fill in the rest.
   Off-screen and out of the tab order it is invisible to people and to screen
   readers, while still being a real field a naive bot will complete. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* The button while the request is in flight. Kept clickable-looking rather than
   greyed out, because the disabled attribute already stops a second submission
   and a greyed button reads as broken. */
#enquiry button[type=submit][disabled]{opacity:.72;cursor:progress}

/* #formnote carries both outcomes. The muted default used to be an inline style
   on the element, which no stylesheet rule can override, so the failure message
   rendered in the calm blue instead of the error colour. Both states live here
   now. Same trap as .pubsoon: specificity was not the problem, an inline style
   was. */
#formnote{color:var(--muted);font-size:14px;margin-top:16px}
#formnote.bad{color:var(--error)}


/* Long-form legal pages: privacy, terms, accessibility. Headings inside .prose.
   Contrast measured against --bg #1A2540: --text 13.43:1, --muted 9.62:1,
   --accent 10.36:1. All pass AA and AAA. */
.prose h2{font-family:var(--serif);font-size:26px;font-weight:500;color:var(--text);
  line-height:1.2;margin:42px 0 14px}
.prose h2:first-child{margin-top:0}
.prose a{color:var(--accent)}
.prose .updated{font-size:15px;margin-top:42px}
@media(max-width:660px){.prose h2{font-size:23px;margin:34px 0 12px}}