/*
Theme Name: Fractional Exec (gofab-style clone) v2
Description: Accurate free-tools clone of gofab.io's real design system — light editorial background, massive black Poppins-800 headlines, coral-red text links (not buttons), and multi-style scrolling text bands. No Salient/WPBakery.
Version: 2.0
Text Domain: gofab-clone
*/

:root{
  --bg: #f0f0f0;
  --accent-deep: #1B41B0;
  --black: #000000;
  --white: #ffffff;
  --accent: #2557E8;
  --text: #000000;
  --muted: #333333;
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1300px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.container{max-width:var(--container); margin:0 auto; padding:0 40px;}
@media (max-width:690px){ .container{padding:0 22px;} }

section{position:relative;}
.section-pad{padding:110px 0;}
@media (max-width:999px){ .section-pad{padding:72px 0;} }
@media (max-width:690px){ .section-pad{padding:56px 0;} }

/* gofab sizes display type off viewport HEIGHT (16vh for section headings,
   12vh for the hero). Reproduced here with clamp guards so short landscape
   viewports don't collapse the type. */
h1, h2.display-h{
  font-family:var(--font);
  font-weight:800;
  font-size:clamp(2.4rem, 16vh, 9rem);
  line-height:1.3;
  margin:0 0 20px;
  color:var(--black);
}
@media (max-width:999px){ h1, h2.display-h{ font-size:clamp(2rem, 6vh, 3.4rem); } }
@media (max-width:690px){ h1, h2.display-h{ font-size:clamp(2rem, 6vh, 3.2rem); } }

/* Visually hidden but available to screen readers and search engines. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.eyebrow{
  font-weight:500;
  font-size:clamp(1rem, 2.4vh, 1.35rem);
  color:var(--black);
  margin:0 0 18px;
}
p{ font-size:1.15rem; color:var(--muted); margin:0 0 20px; }
p.lede{ font-size:clamp(1.4rem,2.6vw,2.1rem); color:var(--black); font-weight:400; max-width:900px; }

/* text-link CTA — coral, underlined, NOT a button */
.text-link{
  display:inline-block;
  color: var(--accent);
  font-weight:600;
  font-size:clamp(1.2rem,2vw,1.9rem);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset:6px;
  transition: opacity .2s ease;
}
.text-link:hover{ opacity:.65; }

/* ===== Header ===== */
#site-header{
  padding:22px 0;
  position:fixed;          /* stays put while scrolling */
  top:0; left:0; right:0;
  z-index:200;
}
/* clear the fixed bar */
#hero{ padding-top:150px; overflow-x:hidden; overflow-x:clip; }
@media (max-width:999px){ #hero{ padding-top:104px; } }
@media (max-width:690px){ #hero{ padding-top:88px; } }
/* anchor targets shouldn't land underneath the fixed bar */
section[id]{ scroll-margin-top:96px; }
#site-header .container{ display:flex; align-items:center; justify-content:space-between; }
.site-logo{ display:block; line-height:0; padding:10px 0; }
.site-logo svg{ height:26px; width:auto; display:block; }
@media (max-width:1000px){ .site-logo svg{ height:22px; } }
.main-nav{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:flex-end; }
.main-nav a{
  font-size:.95rem; font-weight:500; color:var(--accent);
  position:relative; padding-bottom:3px;
}
/* animated underline — the source's data-lhe="animated_underline" */
.main-nav a:not(.li-icon)::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:currentColor;
  transform:scaleX(0); transform-origin:right center;
  transition: transform .45s var(--ease-out-cubic);
}
.main-nav a:not(.li-icon):hover::after,
.main-nav a:not(.li-icon):focus-visible::after{
  transform:scaleX(1); transform-origin:left center;
}
.main-nav a.li-icon{ background:var(--accent); color:#fff; padding:6px 8px; border-radius:6px; font-size:.85rem; }
.menu-toggle{ display:none; }

@media (max-width:1000px){
  .main-nav{
    position:fixed; top:0; right:0; height:100vh; width:min(320px,82vw);
    background: var(--white);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:26px; padding:0 40px;
    transform: translateX(100%);
    transition: transform .4s cubic-bezier(.7,0,.2,1);
    box-shadow: -20px 0 60px rgba(0,0,0,0.15);
  }
  body.menu-open .main-nav{ transform: translateX(0); }
  .main-nav a{ font-size:1.3rem; }
  .menu-toggle{
    display:flex; flex-direction:column; gap:5px; cursor:pointer; z-index:210; background:none; border:none; padding:6px;
  }
  .menu-toggle span{ width:24px; height:2px; background:#000; display:block; }
}

/* ===== Hero ===== */

/* Hero: copy left, oversized portrait right — mirrors the source's
   2:1 column split with the figure rendered at 250% of its column and
   pulled up/left so it bleeds over the layout. */
.hero-top{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:40px;
  align-items:start;
}
.hero-figure{
  position:relative;
  /* the figure is absolutely positioned, so reserve the row height here
     or the lede below collides with it */
  min-height:740px;
}
.hero-figure picture{
  display:block;
  position:absolute;
  top:-70px; left:-90px;
  width:155%;              /* source uses 250% for a line drawing; a photo
                              needs far less to carry the same weight */
  max-width:none;
  pointer-events:none;
}
.hero-figure img{
  width:100%; height:auto;
  /* dissolve the bottom crop into the page instead of a hard slice */
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
          mask-image: linear-gradient(to bottom, #000 72%, transparent 97%);
}

@media (max-width:1000px){
  .hero-top{ grid-template-columns:1fr; }
  .hero-figure{ min-height:auto; order:-1; }
  .hero-figure picture{
    position:relative; top:0; left:0;
    width:min(320px, 70vw); margin:0 auto 10px;
  }
}

/* the hero line is a three-beat sentence — sized so each beat holds one line */
/* gofab's own hero metrics: 108px at 1440 (7.5vw), line-height 1.3, weight 800 */
.hero-h1{ font-size:clamp(2.3rem, 12vh, 6.9rem); line-height:1.3; font-weight:800; }
@media (max-width:999px){ .hero-h1{ font-size:clamp(2.1rem, 7vh, 3.8rem); } }
#hero .lede-wrap{ max-width:1000px; margin-top:50px; }

.hero-columns{
  display:grid; grid-template-columns:1fr 1.6fr; gap:60px;
  margin-top:90px;
}
@media (max-width:999px){
  .hero-columns{ grid-template-columns:1fr; gap:34px; margin-top:56px; }
}
.disciplines h3{ font-size:1rem; font-weight:700; margin:22px 0 8px; }
.disciplines h3:first-child{ margin-top:0; }
.disciplines .eyebrow-small{ font-size:.85rem; font-weight:500; color:#555; margin-bottom:6px; display:block; }
.disciplines ul{ list-style:none; margin:0 0 4px; padding:0; }
.disciplines li{ font-size:.98rem; color:var(--muted); padding:2px 0; }
.bio p{ font-size:1.15rem; }
.bio p strong{ color:var(--black); }
.bio a{ color:var(--accent); text-decoration:underline; }
.scroll-hint{ margin-top:70px; text-align:center; font-size:.95rem; color:#444; }
.scroll-hint .arrow{ margin-top:14px; font-size:1.4rem; }

/* ===== How I help — matched to gofab's measured spec =====
   Measured off the live site at seven viewports:
     >=1000px : h2 40/50 w600, body 14/26, columns side by side
     690-999  : h2 27.2/33.6, columns stacked
     <690     : h2 25.5/31.5, columns stacked
   Body copy stays 14/26 at every width — the small body against very large
   headings is the defining contrast of the layout. */
.help-item{ margin-bottom:clamp(70px,10vw,150px); }
.help-item:last-child{ margin-bottom:0; }
.help-item h3{
  font-family:var(--font);
  font-weight:600;
  font-size:40px;
  line-height:50px;
  max-width:52%;
  margin:0 0 46px;
}
.help-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:56px; max-width:80%; margin-bottom:36px;
}
.help-cols p{ font-size:14px; line-height:26px; margin:0; padding:0 9px 0 0; }

@media (max-width:999px){
  .help-item h3{ font-size:27.2px; line-height:33.6px; max-width:100%; margin-bottom:30px; }
  .help-cols{ grid-template-columns:1fr; gap:22px; max-width:100%; }
  .help-cols p{ padding:0; }
}
@media (max-width:690px){
  .help-item h3{ font-size:25.5px; line-height:31.5px; }
}

/* ===== Clients heading + case studies ===== */
#clients-heading p.lede{ margin-top:14px; }
.clients-intro{ margin-bottom:30px; }

.case-scroll{ overflow:hidden; margin:40px 0 60px; }
/* the drift layer is over-wide, but it lives inside the clip above so it
   never widens the document */
.case-drift{
  width:calc(100% + 240px);
  margin-left:-120px;
  will-change:transform;
}
.case-track{ display:flex; gap:80px; width:max-content; animation: case-scroll 38s linear infinite; }
.case-track span{
  font-weight:700; font-size:clamp(1.6rem,3.4vw,2.6rem); color:var(--accent);
  max-width:560px; display:inline-block; line-height:1.2;
}
@keyframes case-scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ===== Marquee bands (3 variants, matching Salient's scrolling-text element) ===== */
.marquee-band{ overflow:hidden; white-space:nowrap; padding:26px 0; }
.marquee-track{ display:inline-flex; animation: marquee 20s linear infinite; }
.marquee-track span{ font-size:clamp(1.6rem,10vh,5.8rem); font-weight:700; padding:0 40px; }
@media (max-width:999px){ .marquee-track span{ font-size:clamp(1.5rem,5vh,2.6rem); padding:0 22px; } }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

.marquee-band.on-light{ background:var(--bg); }
.marquee-band.on-light span{ color:var(--black); }

.marquee-band.on-accent{ background:var(--accent); }
.marquee-band.on-accent span{ color:var(--white); }

.marquee-band.outline{ background:var(--bg); padding:50px 0; }
@media (max-width:999px){
  .marquee-band.outline{ padding:26px 0; }
  .marquee-band.outline span{ font-size:clamp(1.8rem,6vh,3rem); }
}
.marquee-band.outline span{
  font-size:clamp(2rem,18vh,9.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--black);
}

/* ===== Client logo carousel — 4 per view, drag / swipe / dots ===== */
#client-band{ background: var(--accent); padding-bottom:90px; }
.logo-carousel{ margin-top:60px; }
.logo-viewport{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.logo-viewport::-webkit-scrollbar{ display:none; }
.logo-viewport:active{ cursor:grabbing; }
.logo-viewport:focus-visible{ outline:2px solid #fff; outline-offset:6px; }
.logo-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
}
.logo-tile{
  aspect-ratio:1/1; background:rgba(255,255,255,0.12); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:.72rem; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
  border:1px solid rgba(255,255,255,0.25);
  transition: background .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic);
}
.logo-tile:hover{ background:rgba(255,255,255,0.2); transform:translateY(-4px); }
@media (max-width:999px){ .logo-slide{ grid-template-columns:repeat(2,1fr); } }

/* ===== Testimonial carousel (scroll-snap + working dots, drag/swipe native) ===== */
.testimonial-carousel{
  margin:70px -60px 0;
  padding:0 60px;   /* the pinch inset eats this padding, not the cards */
}
@media (max-width:820px){ .testimonial-carousel{ margin:50px 0 0; padding:0; } }
.testimonial-viewport{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
  cursor:grab;
}
.testimonial-viewport::-webkit-scrollbar{ display:none; }
.testimonial-viewport:active{ cursor:grabbing; }
.testimonial-viewport:focus-visible{ outline:2px solid #fff; outline-offset:6px; }
.testimonial-slide{
  flex:0 0 100%;
  scroll-snap-align:start;
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  padding-right:2px;
}
.testimonial-card{
  background:var(--white); border-radius:6px; padding:34px; margin:0;
  display:flex; flex-direction:column; justify-content:space-between;
}
.testimonial-card blockquote{ margin:0 0 18px; color:var(--black); font-size:1.05rem; }
.testimonial-card figcaption{ display:flex; flex-direction:column; }
.testimonial-card .name{ font-weight:700; font-size:.95rem; color:var(--black); }
.testimonial-card .role{ font-size:.85rem; color:#6a6a6a; }

.slider-dots{ display:flex; gap:16px; justify-content:center; margin-top:36px; }
.slider-dots button{
  position:relative;
  width:9px; height:9px; border-radius:50%; padding:0; border:none; cursor:pointer;
  background:rgba(255,255,255,0.45);
  transition: background .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic);
}
/* The dot stays 9px visually, but the pointer/touch target is 25px square
   so it clears the WCAG 2.2 minimum without changing the look. */
.slider-dots button::after{ content:''; position:absolute; inset:-8px; border-radius:50%; }
.slider-dots button:focus-visible{ outline:2px solid #fff; outline-offset:7px; }
.slider-dots.is-dark button:focus-visible{ outline-color:var(--accent); }
.slider-dots button:hover{ background:rgba(255,255,255,0.75); }
.slider-dots button.is-active{ background:#fff; transform:scale(1.25); }

@media (max-width:999px){ .testimonial-slide{ grid-template-columns:1fr; } }

/* ===== Scroll-to-top ===== */
#to-top{
  position:fixed; right:26px; bottom:26px; z-index:150;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--accent); color:#fff; font-size:1.1rem; line-height:1;
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition: opacity .35s var(--ease-out-cubic), transform .35s var(--ease-out-cubic);
}
#to-top.is-shown{ opacity:1; transform:translateY(0); pointer-events:auto; }
#to-top:hover{ background:var(--accent-deep); }

/* ===== Skip link ===== */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:9999;
  background:var(--black); color:#fff; padding:12px 18px; border-radius:0 0 6px 0;
}
.skip-link:focus{ left:0; }

/* ===== Final CTA stack ===== */
.final-cta{ text-align:left; }
.final-cta .eyebrow{ margin-bottom:10px; }
.cta-stack a{
  display:block;
  font-family:var(--font); font-weight:800; color:var(--black);
  font-size:clamp(1.9rem,14vh,5.6rem);
  line-height:1.18;
  transition: color .2s ease;
}
.cta-stack a:hover{ color: var(--accent); }

/* ===== Motion system =====
   Reproduces the source site's configured effects: line-masked heading
   reveals (line-reveal-by-space), per-letter reveal on the hero headline,
   and scroll-scrubbed transforms. Timing matches the source's global
   easeOutCubic @ 750ms. */
:root{
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur: 750ms;
}

/* --- line-masked heading reveal --- */
[data-split]{ }
[data-split] .split-line{
  display:block;
  overflow:hidden;
  padding-bottom:0.20em;   /* room for descenders inside the mask */
  margin-bottom:-0.20em;
}
[data-split] .split-line-inner{
  display:block;
  transform: translateY(110%);
  transition: transform var(--dur) var(--ease-out-cubic);
  will-change: transform;
}
[data-split].is-visible .split-line-inner{ transform: translateY(0); }

/* keep pre-split text from flashing unstyled */
[data-split]:not(.split-ready){ opacity:0; }
[data-split].split-ready{ opacity:1; }

/* --- per-letter reveal (hero headline) --- */
[data-split] .split-line-inner.is-letter-mode{
  transform:none;              /* letters animate individually instead */
  transition:none;
}
[data-split] .split-word-unit{ display:inline-block; white-space:nowrap; }
[data-split] .split-letter{
  display:inline-block;
  transform: translateY(110%);
  opacity:0;
  transition: transform var(--dur) var(--ease-out-cubic),
              opacity calc(var(--dur) * 0.6) var(--ease-out-cubic);
  will-change: transform;
}
[data-split].is-visible .split-letter{ transform: translateY(0); opacity:1; }

/* --- generic element reveals --- */
[data-reveal]{
  opacity:0;
  transition: opacity var(--dur) var(--ease-out-cubic),
              transform var(--dur) var(--ease-out-cubic);
}
[data-reveal="fade-up"]{ transform: translateY(36px); }
[data-reveal="fade-up"].is-visible{ opacity:1; transform:translateY(0); }

[data-reveal="grow-in"]{ transform: scale(.82); }
[data-reveal="grow-in"].is-visible{ opacity:1; transform:scale(1); }

[data-reveal="fade-up-in"]{ transform: translateY(70px); }
[data-reveal="fade-up-in"].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="fade-up-in"]{ transition-duration: 1100ms; }

[data-reveal="fade"]{ transform:none; }
[data-reveal="fade"].is-visible{ opacity:1; }

/* --- scroll-scrubbed transforms ---
   The scrub lives on .marquee-scrub and the infinite loop on .marquee-track,
   so the two transforms never overwrite each other. */
.marquee-scrub{
  transform: translateX(var(--scrub-x, 0));
  will-change: transform;
}
[data-scrub-out]{ transform-origin:center center; will-change: transform, opacity; }
[data-scrub-pinch]{ will-change: clip-path; }

/* staggered children within a revealed group */
.logo-grid .logo-tile,
.testimonial-row .testimonial-card,
.cta-stack a{
  opacity:0; transform:translateY(26px);
  transition: opacity .6s cubic-bezier(.25,.7,.3,1), transform .6s cubic-bezier(.25,.7,.3,1);
}
.logo-grid.is-visible .logo-tile,
.testimonial-row.is-visible .testimonial-card,
.cta-stack.is-visible a{ opacity:1; transform:translateY(0); }
.logo-grid .logo-tile:nth-child(1),.cta-stack a:nth-child(1){ transition-delay:.02s; }
.logo-grid .logo-tile:nth-child(2),.cta-stack a:nth-child(2){ transition-delay:.08s; }
.logo-grid .logo-tile:nth-child(3),.cta-stack a:nth-child(3){ transition-delay:.14s; }
.logo-grid .logo-tile:nth-child(4),.cta-stack a:nth-child(4){ transition-delay:.20s; }
.logo-grid .logo-tile:nth-child(5),.cta-stack a:nth-child(5){ transition-delay:.26s; }
.logo-grid .logo-tile:nth-child(6){ transition-delay:.32s; }
.logo-grid .logo-tile:nth-child(7){ transition-delay:.38s; }
.logo-grid .logo-tile:nth-child(8){ transition-delay:.44s; }
.logo-grid .logo-tile:nth-child(9){ transition-delay:.50s; }
.logo-grid .logo-tile:nth-child(10){ transition-delay:.56s; }
.testimonial-row.is-visible .testimonial-card:nth-child(2){ transition-delay:.15s; }
.cta-stack a:nth-child(6){ transition-delay:.32s; }

/* header goes solid once the page scrolls past the hero */
#site-header{ transition: background .3s ease, box-shadow .3s ease; }
#site-header.is-scrolled{ background:rgba(240,240,240,0.92); backdrop-filter:blur(6px); box-shadow:0 2px 16px rgba(0,0,0,0.06); }

@media (prefers-reduced-motion: reduce){
  [data-reveal], .logo-grid .logo-tile, .testimonial-row .testimonial-card, .cta-stack a{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
  /* WCAG 2.2.2 — the marquee bands loop forever, so stop them outright
     rather than just shortening them. */
  .marquee-track{ animation:none !important; transform:none !important; }
  .marquee-band{ overflow-x:auto; }
}

/* ===== Footer ===== */
#site-footer{ padding:90px 0 60px; }
#site-footer .li-cta{
  display:inline-flex; align-items:center; gap:16px;
  font-weight:800; font-size:clamp(2rem,5vw,3.6rem); color:var(--black);
}
#site-footer .li-badge{
  background:var(--accent); color:#fff; border-radius:8px; padding:10px 13px; font-size:1.4rem;
}
#site-footer .li-cta:hover{ color:var(--accent); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:24px; margin-top:34px; }
.footer-nav a{ font-size:.95rem; font-weight:500; color:var(--accent); padding:4px 0; }
.footer-nav a:hover, .footer-nav a:focus-visible{ text-decoration:underline; text-underline-offset:5px; }
#site-footer .copyright{ margin-top:26px; font-size:.85rem; color:#5f5f5f; }
#site-footer .copyright a{ color:#5f5f5f; text-decoration:underline; text-underline-offset:3px; }
#site-footer .copyright a:hover{ color:var(--accent); }


/* ===== Page-load transition: center mask reveal =====
   Matches the source's data-apte="center_mask_reveal" — four panels that
   retract off the four edges, uncovering the page from the centre out. */
#page-mask{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
}
#page-mask span{
  position:absolute; background:var(--bg);
  transition: transform 900ms var(--ease-out-cubic);
}
#page-mask .mask-top,
#page-mask .mask-bottom{ left:0; width:100%; height:51%; }
#page-mask .mask-top{ top:0; }
#page-mask .mask-bottom{ bottom:0; }
#page-mask .mask-left,
#page-mask .mask-right{ top:0; height:100%; width:51%; }
#page-mask .mask-left{ left:0; }
#page-mask .mask-right{ right:0; }

body.is-revealed #page-mask .mask-top{ transform: translateY(-100%); }
body.is-revealed #page-mask .mask-bottom{ transform: translateY(100%); }
body.is-revealed #page-mask .mask-left{ transform: translateX(-100%); }
body.is-revealed #page-mask .mask-right{ transform: translateX(100%); }
body.mask-done #page-mask{ display:none; }

@media (prefers-reduced-motion: reduce){
  #page-mask{ display:none; }
}

/* CTA stack hover — colour shift, matching the source's link hover */
.cta-stack a{ transition: color .3s var(--ease-out-cubic), transform .45s var(--ease-out-cubic); }
.cta-stack a:hover{ color: var(--accent); transform: translateX(14px); }

/* text-link hover: underline thickens rather than fading out */
.text-link{ transition: color .25s var(--ease-out-cubic), text-decoration-thickness .25s var(--ease-out-cubic); }
.text-link:hover{ opacity:1; color: var(--accent-deep); text-decoration-thickness:4px; }

/* visible keyboard focus */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px;
}

/* vertical parallax on the hero figure (source: transform_y, intensity 3.5) */
[data-parallax]{ will-change: transform; }
@media (prefers-reduced-motion: reduce){ [data-parallax]{ transform:none !important; } }


/* ===== Ventures ===== */
.venture-list{ margin-top:60px; border-top:1px solid rgba(0,0,0,.14); }
.venture-row{
  display:grid;
  grid-template-columns: 60px 1fr 220px;
  gap:30px; align-items:start;
  padding:38px 0;
  border-bottom:1px solid rgba(0,0,0,.14);
  color:inherit;
  transition: background .35s var(--ease-out-cubic), padding-left .35s var(--ease-out-cubic);
}
a.venture-row:hover{ background:rgba(37,87,232,.05); padding-left:14px; }
a.venture-row:hover .venture-name{ color:var(--accent); }
.venture-num{
  font-size:.85rem; font-weight:700; color:var(--accent);
  font-variant-numeric: tabular-nums; padding-top:.55em;
}
.venture-body{ display:flex; flex-direction:column; gap:10px; }
.venture-name{
  font-size:clamp(1.5rem,3vw,2.2rem); font-weight:700; line-height:1.15;
  color:var(--black); transition: color .3s var(--ease-out-cubic);
}
.venture-desc{ font-size:1rem; color:var(--muted); max-width:60ch; }
.venture-role{
  font-size:.9rem; font-weight:600; color:var(--muted);
  padding-top:.6em; text-align:right;
}
.venture-role:empty{ display:none; }
@media (max-width:999px){
  .venture-row{ grid-template-columns:40px 1fr; gap:16px; padding:28px 0; }
  .venture-role{ grid-column:2; text-align:left; padding-top:0; color:var(--accent); }
}

/* ===== Insights ===== */
.insight-carousel{ margin-top:60px; }
.insight-viewport{
  display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
}
.insight-viewport::-webkit-scrollbar{ display:none; }
.insight-viewport:active{ cursor:grabbing; }
.insight-viewport:focus-visible{ outline:2px solid var(--accent); outline-offset:6px; }
.insight-slide{
  flex:0 0 100%; scroll-snap-align:start;
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
}
.insight-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; margin-top:34px; flex-wrap:wrap;
}
.slider-dots.is-dark button{ background:rgba(0,0,0,.22); }
.slider-dots.is-dark button:hover{ background:rgba(0,0,0,.4); }
.slider-dots.is-dark button.is-active{ background:var(--accent); }
@media (max-width:999px){ .insight-slide{ grid-template-columns:1fr; } }
.insight-card{
  display:flex; flex-direction:column; gap:12px;
  background:rgba(0,0,0,.035);
  border:1px solid rgba(0,0,0,.10);
  border-radius:10px;
  padding:30px;
  color:inherit;
  transition: transform .4s var(--ease-out-cubic), border-color .3s var(--ease-out-cubic), background .3s var(--ease-out-cubic);
}
a.insight-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  background:rgba(37,87,232,.05);
}
.insight-date{
  font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent);
}
.insight-title{
  font-size:1.35rem; font-weight:700; line-height:1.25; margin:0; color:var(--black);
  text-wrap:balance;
}
.insight-excerpt{ font-size:.98rem; color:var(--muted); margin:0; }
.insight-more{ margin-top:auto; font-weight:600; color:var(--accent); font-size:.95rem; }
.insight-card.is-placeholder{ opacity:.72; }



/* ===== Buttons ===== */
.btn-outline{
  display:inline-block; padding:13px 24px; border-radius:6px;
  border:1.5px solid var(--accent); color:var(--accent);
  font-weight:600; font-size:.95rem;
  transition: background .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic);
}
.btn-outline:hover{ background:var(--accent); color:#fff; }
.btn-solid{
  display:inline-block; padding:15px 30px; border-radius:6px; border:none;
  background:var(--accent); color:#fff; font-family:var(--font);
  font-weight:600; font-size:1rem; cursor:pointer;
  transition: background .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic);
}
.btn-solid:hover{ background:var(--accent-deep); transform:translateY(-2px); }

/* ===== Contact form ===== */
.contact-form{ max-width:760px; margin-top:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:700px){ .form-row{ grid-template-columns:1fr; } }
.field{ display:block; margin-bottom:22px; }
.field-label{
  display:block; margin-bottom:8px;
  font-size:.85rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#555;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea{
  width:100%; padding:14px 16px; font-family:var(--font); font-size:1rem;
  color:var(--black); background:rgba(0,0,0,.03);
  border:1.5px solid rgba(0,0,0,.16); border-radius:6px;
  transition: border-color .25s var(--ease-out-cubic), background .25s var(--ease-out-cubic);
}
.contact-form textarea{ resize:vertical; min-height:130px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent); background:#fff;
}
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
/* honeypot — hidden from people, visible to bots */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{
  padding:14px 18px; border-radius:6px; font-size:1rem; max-width:760px; margin-top:26px;
}
.form-note.is-success{ background:rgba(37,87,232,.10); border:1px solid var(--accent); color:var(--black); }
.form-note.is-error{ background:rgba(200,30,30,.08); border:1px solid #c81e1e; color:#8c1414; }
.form-fallback{ margin-top:18px; font-size:.95rem; }
.form-fallback a{ color:var(--accent); text-decoration:underline; }

/* accordion CTA is a button now, not a link */
button.text-link{
  background:none; border:none; cursor:pointer; font-family:var(--font); padding:0;
}


/* ===== Parallax depth layers in the accent band ===== */
#client-band{ overflow:hidden; }
.band-depth{
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.band-orb{
  position:absolute; display:block; border-radius:50%;
  will-change:transform;
}
.band-orb--a{
  width:min(46vw,560px); aspect-ratio:1;
  top:-8%; right:-10%;
  /* multi-stop falloff reaching zero inside the box — a single linear ramp
     leaves a perceptible edge against flat colour */
  background:radial-gradient(circle closest-side,
    rgba(255,255,255,.15) 0%, rgba(255,255,255,.09) 38%,
    rgba(255,255,255,.03) 66%, rgba(255,255,255,0) 88%);
}
.band-orb--b{
  width:min(34vw,420px); aspect-ratio:1;
  bottom:-12%; left:-8%;
  background:radial-gradient(circle closest-side,
    rgba(0,0,0,.13) 0%, rgba(0,0,0,.07) 40%,
    rgba(0,0,0,.02) 68%, rgba(0,0,0,0) 88%);
}
.band-orb--c{
  width:min(22vw,260px); aspect-ratio:1;
  top:38%; left:26%;
  border:1px solid rgba(255,255,255,.10);
  background:transparent;
}
/* band content sits above the decorative layers */
#client-band > .container,
#client-band > .marquee-band{ position:relative; z-index:1; }

/* transformed containers get their own layer */
[data-depth], [data-tilt], [data-parallax-x]{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  [data-depth], [data-tilt], [data-parallax-x], [data-skew], .band-orb{
    transform:none !important;
  }
  .band-depth{ display:none; }
}


/* ===== Small-screen refinements ===== */
@media (max-width:999px){
  .scroll-hint{ margin-top:44px; }
  .case-track{ gap:44px; }
  .case-track span{ max-width:78vw; }
  .insight-controls{ gap:16px; }
  #site-header{ padding:16px 0; }
  #to-top{ right:16px; bottom:16px; width:40px; height:40px; }
  section[id]{ scroll-margin-top:76px; }
}
@media (max-width:690px){
  .clients-intro{ margin-bottom:22px; }
  .testimonial-card{ padding:26px 22px; }
  .insight-card{ padding:24px 22px; }
  .contact-form{ margin-top:28px; }
  .logo-carousel{ margin-top:40px; }
  #site-footer .li-cta{ gap:12px; }
}


/* =====================================================================
 * Article pages (single.php) and the writing archive (index.php)
 * The front page shouts; an article has to be readable for nine minutes.
 * So the display scale is dropped to something human and the measure is
 * held near 68 characters, while the palette and motion stay identical.
 * ===================================================================== */

.post-hero{ padding-bottom:0; }
.post-hero .eyebrow{ margin-bottom:14px; }

/* NOT the 16vh display size — an article title has to wrap sanely */
.post-single .post-title{
  font-size:clamp(2rem, 5.2vw, 4rem);
  line-height:1.12;
  letter-spacing:-0.015em;
  font-weight:800;
  max-width:19ch;
  margin:0 0 22px;
  text-wrap:balance;
}
@media (max-width:999px){ .post-single .post-title{ font-size:clamp(1.9rem,7vw,2.6rem); max-width:none; } }

.post-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  font-size:.9rem; color:#5f5f5f; margin:0 0 30px;
  font-variant-numeric:tabular-nums;
}
.post-meta .dot{ color:#a5a5a5; }

.post-standfirst{
  font-size:clamp(1.15rem,2vw,1.5rem);
  line-height:1.5;
  color:var(--black);
  max-width:34ch;
  font-weight:400;
  margin:0;
  padding-left:20px;
  border-left:3px solid var(--accent);
}
@media (max-width:999px){ .post-standfirst{ max-width:none; } }

.post-figure{ margin-top:54px; }
.post-figure img{ width:100%; height:auto; border-radius:8px; }

.post-body{ padding:60px 0 90px; }
@media (max-width:999px){ .post-body{ padding:44px 0 64px; } }

/* --- the prose column --- */
.prose{ max-width:68ch; }
.prose > *:first-child{ margin-top:0; }
.prose p{
  font-size:1.12rem; line-height:1.75; color:#2a2a2a; margin:0 0 1.45em;
}
.prose strong{ color:var(--black); font-weight:600; }
.prose em{ font-style:italic; }
.prose a{ color:var(--accent-deep); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--accent); }

.prose h2{
  font-size:clamp(1.5rem,2.6vw,2.05rem); font-weight:700; line-height:1.2;
  color:var(--black); margin:2.4em 0 .7em; letter-spacing:-0.01em;
  text-wrap:balance;
}
.prose h2::after{
  content:''; display:block; width:52px; height:3px;
  background:var(--accent); margin-top:16px;
}
.prose h3{
  font-size:clamp(1.15rem,1.8vw,1.32rem); font-weight:700; line-height:1.3;
  color:var(--black); margin:2.1em 0 .6em; text-wrap:balance;
}

.prose ul, .prose ol{ margin:0 0 1.45em; padding-left:0; list-style:none; }
.prose ol{ counter-reset:prose-ol; }
.prose li{
  position:relative; padding-left:26px; margin-bottom:.75em;
  font-size:1.08rem; line-height:1.7; color:#2a2a2a;
}
.prose ul > li::before{
  content:''; position:absolute; left:2px; top:.68em;
  width:7px; height:7px; border-radius:50%; background:var(--accent);
}
.prose ol > li::before{
  counter-increment:prose-ol; content:counter(prose-ol) '.';
  position:absolute; left:0; top:0; color:var(--accent); font-weight:700; font-size:.95em;
}

.prose blockquote{
  margin:2em 0; padding:4px 0 4px 26px;
  border-left:3px solid var(--accent);
  font-size:1.2rem; line-height:1.55; color:var(--black);
}
.prose blockquote p:last-child{ margin-bottom:0; }

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.88em;
  background:rgba(0,0,0,.05); padding:2px 6px; border-radius:3px;
}
.prose pre{
  background:rgba(0,0,0,.045); border:1px solid rgba(0,0,0,.10);
  padding:18px 20px; border-radius:8px; overflow-x:auto; margin:0 0 1.45em;
}
.prose pre code{ background:none; padding:0; font-size:.85rem; line-height:1.65; }

.prose hr{
  border:none; height:1px; background:rgba(0,0,0,.14); margin:2.8em 0;
}

/* --- the comparison table --- */
.article-table{
  margin:2.4em 0; padding:0;
  /* wider than the prose measure, because a 4-column table needs room */
  width:min(100%, 980px);
  max-width:none;
}
@media (min-width:1100px){ .article-table{ width:min(calc(100% + 200px), 980px); } }
.article-table table{
  border-collapse:collapse; width:100%; min-width:640px;
  background:var(--white); font-size:.92rem;
}
.article-table{ overflow-x:auto; }
.article-table th, .article-table td{
  text-align:left; vertical-align:top; padding:13px 16px;
  border-bottom:1px solid rgba(0,0,0,.10);
  line-height:1.5;
}
.article-table thead th{
  background:var(--black); color:var(--white);
  font-size:.8rem; font-weight:600; letter-spacing:.03em;
  border-bottom:none;
}
.article-table thead th .th-sub{
  display:block; font-weight:400; font-size:.74rem;
  color:rgba(255,255,255,.62); margin-top:2px;
}
.article-table tbody th{
  font-weight:600; color:var(--black); white-space:nowrap;
  background:rgba(0,0,0,.03); font-size:.88rem;
}
.article-table td{ color:#3a3a3a; }
.article-table tr.verdict th, .article-table tr.verdict td{
  border-bottom:none; background:rgba(37,87,232,.06);
  font-weight:600; color:var(--black);
}
.article-table tr.verdict td em{ font-weight:400; }

/* --- tags --- */
.post-tags{
  display:flex; flex-wrap:wrap; gap:10px;
  list-style:none; margin:56px 0 0; padding:34px 0 0;
  border-top:1px solid rgba(0,0,0,.14);
  max-width:68ch;
}
.post-tags a{
  display:inline-block; padding:6px 13px; border-radius:100px;
  border:1px solid rgba(0,0,0,.18); font-size:.82rem; color:#4a4a4a;
  transition: border-color .25s var(--ease-out-cubic), color .25s var(--ease-out-cubic);
}
.post-tags a:hover{ border-color:var(--accent); color:var(--accent); }

/* --- prev / next --- */
.post-nav{ border-top:1px solid rgba(0,0,0,.14); padding:34px 0; }
.post-nav .container{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.post-nav-item{ max-width:44ch; display:block; }
.post-nav-item.is-next{ text-align:right; margin-left:auto; }
.post-nav-dir{ display:block; font-size:.82rem; color:var(--accent); font-weight:600; margin-bottom:5px; }
.post-nav-title{ font-size:1.05rem; font-weight:600; color:var(--black); line-height:1.3; }
.post-nav-item:hover .post-nav-title{ color:var(--accent); }

/* --- closing CTA --- */
.post-cta{ background:rgba(0,0,0,.025); border-top:1px solid rgba(0,0,0,.08); }
.post-cta .lede{ margin-top:6px; }
.post-cta-links{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:32px; }

/* --- archive --- */
.archive-head{ padding-bottom:0; }
.archive-list{ padding:50px 0 100px; }
.archive-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; }
@media (max-width:900px){ .archive-grid{ grid-template-columns:1fr; } }
.archive-card .insight-title{ font-size:1.5rem; }
.archive-card .insight-date{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.archive-card .insight-date .dot{ color:rgba(0,0,0,.3); }

.navigation.pagination{ margin-top:50px; }
.navigation.pagination .nav-links{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.navigation.pagination a, .navigation.pagination span{
  display:inline-block; padding:9px 15px; border-radius:6px;
  border:1px solid rgba(0,0,0,.16); font-size:.92rem; font-weight:500;
}
.navigation.pagination .current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.navigation.pagination a:hover{ border-color:var(--accent); color:var(--accent); }
.navigation.pagination .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* --- article figures --- */
.article-figure{ margin:2.6em 0; padding:0; width:min(100%, 980px); max-width:none; }
@media (min-width:1100px){ .article-figure{ width:min(calc(100% + 200px), 980px); } }
.article-figure img{ display:block; width:100%; height:auto; border:1px solid rgba(0,0,0,.10); }
.article-figure figcaption{ margin-top:14px; font-size:.86rem; line-height:1.65; color:#6a6a6a; max-width:68ch; }

/* --- insight card thumbnails --- */
.insight-card.has-img{ overflow:hidden; }
.insight-thumb{ display:block; margin:-30px -30px 8px; aspect-ratio:1200/630; overflow:hidden; background:rgba(0,0,0,.04); border-bottom:1px solid rgba(0,0,0,.08); }
.insight-thumb img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out-cubic); }
.insight-card:hover .insight-thumb img{ transform:scale(1.03); }
@media (max-width:690px){ .insight-thumb{ margin:-24px -22px 6px; } }
html{ scroll-padding-top:90px; }

/* --- review article elements --- */
.prose .post-credit{ font-size:.92rem; color:#6a6a6a; margin:0 0 2.1em; padding-bottom:1.1em; border-bottom:1px solid rgba(0,0,0,.10); }
.prose .post-signoff{ font-size:.95rem; color:#4a4a4a; }
.article-table td.v-yes strong{ color:var(--accent); }
.article-table td.v-no strong{ color:#b4342c; }

/* --- client logo tiles --- */
.logo-tile{ aspect-ratio:auto; min-height:106px; padding:18px 14px; text-align:center; }
.logo-word{ font-size:.94rem; font-weight:600; letter-spacing:0; text-transform:none; line-height:1.3; text-wrap:balance; }
.logo-tile img{ max-width:100%; max-height:54px; width:auto; height:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.94; }
.logo-slide.is-short.n2 > :first-child{ grid-column:2; }
@media (max-width:999px){ .logo-slide.is-short.n2 > :first-child{ grid-column:auto; } }
@media (max-width:690px){ .logo-tile{ min-height:88px; padding:14px 10px; } .logo-word{ font-size:.85rem; } }


/* --- client logo tiles v2: bigger, fuller marks --- */
.logo-tile{ padding:14px 16px; }
.logo-tile img{ max-height:72px; max-width:100%; opacity:1; }
@media (max-width:640px){ .logo-tile img{ max-height:60px; } }


/* --- typography pass: line endings and measure --- */

/* a re-split must not replay the reveal */
.no-split-anim .split-line-inner,
.no-split-anim .split-letter,
.no-split-anim .split-word{ transition:none !important; }

/* keep a lone word off the last line of running text */
p.lede, .clients-intro, .venture-desc, .insight-excerpt,
.prose p, .prose li, .post-credit, .post-signoff,
.article-figure figcaption{ text-wrap:pretty; }

/* short headings break at a sensible point instead of one word over */
.insight-title, .venture-name, .display-h, h3, h4{ text-wrap:balance; }

/* ventures: the description stopped at 60ch and left a dead gap before the
   right-hand role column, so the text crammed into three lines beside empty
   space. Give it the width the row already has. */
@media (min-width:1100px){ .venture-desc{ max-width:76ch; } }

/* --- typography pass 2 --- */

/* The headline is sized off viewport HEIGHT, so a narrow-but-tall window
   (around 1024) put ~110px type in a 603px column and broke it one word per
   line. Cap it by width too, above the single-column breakpoint only. */
@media (min-width:1000px){
  .hero-h1{ font-size: clamp(2.3rem, min(12vh, 10vw), 6.9rem); }
}

/* Article: the wide figure and the comparison table bled only to the right,
   so they sat off-axis against the text column. Centre them, and give the
   verdict column the width its sentences need. */
@media (min-width:1100px){
  .prose .article-figure,
  .prose .article-table{ width:auto; max-width:none; margin-left:-100px; margin-right:-100px; }
  .article-table td:nth-child(1){ width:30%; }
  .article-table td:nth-child(2){ width:12%; }
  .article-table td:nth-child(3){ width:20%; }
  .article-table td:nth-child(4){ width:38%; }
}

/* --- typography pass 3: blocks the first sweep missed --- */
.bio p, .help-cols p, .post-standfirst,
.article-table td, .article-table th{ text-wrap:pretty; }
.post-nav-title, .post-title{ text-wrap:balance; }