/* ==========================================================================
   SUTTON BURKE — DESIGN SYSTEM
   Black / white / grey. Editorial. Spacious. Colour used sparingly.
   1. Tokens   2. Reset   3. Typography   4. Layout   5. Buttons
   6. Header   7. Hero    8. Components   9. Forms    10. Footer  11. Utils
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Ink & paper */
  --sb-ink:            #0B0B0C;
  --sb-ink-soft:       #1C1C1E;
  --sb-ink-70:         rgba(11,11,12,.70);
  --sb-ink-50:         rgba(11,11,12,.50);
  --sb-paper:          #FFFFFF;
  --sb-bone:           #F5F4F1;
  --sb-mist:           #ECEBE7;
  --sb-grey:           #6E6E71;
  --sb-grey-light:     #A6A6A8;
  --sb-line:           #E2E0DB;
  --sb-line-dark:      rgba(255,255,255,.16);

  /* "Pops of colour, just a little."
     Psychedelic spectrum from the brand board — saturated, but rationed.
     Rule of the system: colour appears as ONE object per section, never as
     wallpaper. Black and white stay the brand; this is the pop. */
  --sb-magenta:        #FF2E93;
  --sb-violet:         #7B3FF2;
  --sb-cyan:           #00D1FF;
  --sb-orange:         #FF6B2C;
  --sb-accent:         var(--sb-violet);
  --sb-accent-warm:    var(--sb-magenta);
  --sb-accent-gold:    #E9B44C;
  /* The same hues taken down in lightness only, for the one place they sit on
     a photograph rather than on black or white. Each clears 4.5:1 against the
     darkest point the copy actually covers in that frame — (185,152,105), the
     warm shadow low on the wall — so they hold as small text, not only as the
     large numerals they are set in today. */
  --sb-violet-deep:    #3A0A97;
  --sb-magenta-deep:   #690033;
  --sb-orange-deep:    #601D00;
  --sb-gold-deep:      #453008;
  --sb-cyan-deep:      #003845;
  --sb-gradient:       linear-gradient(90deg,#7B3FF2 0%,#FF2E93 42%,#FF6B2C 74%,#00D1FF 100%);
  --sb-gradient-soft:  linear-gradient(140deg,#00D1FF 0%,#7B3FF2 34%,#FF2E93 68%,#FF6B2C 100%);

  /* Tinted grounds. Barely-there washes of the spectrum — enough to give the
     page a rhythm of colour without ever competing with the photography or
     turning the brand pastel. Each stays above 97% lightness. */
  --sb-tint-violet:    #F5F2FC;
  --sb-tint-magenta:   #FDF2F7;
  --sb-tint-coral:     #FFF4EF;
  --sb-tint-cyan:      #EFF8FD;

  /* Type */
  --sb-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sb-font-serif:"Instrument Serif", Georgia, "Times New Roman", serif;

  --sb-step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --sb-step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --sb-step-1:  clamp(1.125rem, 1.06rem + .3vw, 1.25rem);
  --sb-step-2:  clamp(1.375rem, 1.24rem + .62vw, 1.75rem);
  --sb-step-3:  clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem);
  --sb-step-4:  clamp(2.125rem, 1.7rem + 1.9vw, 3.5rem);
  --sb-step-5:  clamp(2.5rem, 1.85rem + 2.9vw, 4.75rem);
  --sb-step-6:  clamp(3rem, 2rem + 4.4vw, 6.5rem);

  /* Space */
  --sb-space-3xs: .25rem;  --sb-space-2xs: .5rem;   --sb-space-xs: .75rem;
  --sb-space-s:   1rem;    --sb-space-m:  1.5rem;   --sb-space-l:  2.25rem;
  --sb-space-xl:  3.5rem;  --sb-space-2xl: 5rem;    --sb-space-3xl: 7.5rem;
  --sb-section-y: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* Structure */
  --sb-wrap:       1240px;
  --sb-wrap-wide:  1480px;
  --sb-wrap-text:  68ch;
  --sb-gutter:     clamp(1.25rem, 4vw, 3rem);
  --sb-radius:     0px;
  --sb-header-h:   84px;

  --sb-ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--sb-header-h) + 1rem)}
body{
  margin:0;
  background:var(--sb-paper);
  color:var(--sb-ink);
  font-family:var(--sb-font-sans);
  font-size:var(--sb-step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
/* No blanket background on img. It was here as a while-loading tint, but it
   is an opaque panel behind every transparent asset — it boxed the logos, put
   a cream card behind the masked hero photograph (which read as a hard seam
   at the fade) and framed the book render. Containers that genuinely want a
   placeholder tint carry it themselves; see .sb-media-card__thumb. */
hr{border:0;border-top:1px solid var(--sb-line);margin:var(--sb-space-xl) 0}
::selection{background:var(--sb-ink);color:var(--sb-paper)}
:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}

.sb-skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--sb-ink);color:#fff;padding:.75rem 1.25rem;font-weight:600}
.sb-skip-link:focus{left:0}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{margin:0 0 var(--sb-space-m);font-weight:600;line-height:1.08;letter-spacing:-.02em}
p{margin:0 0 var(--sb-space-m)}
p:last-child{margin-bottom:0}

/* Structural headline: uppercase grotesk = authority */
.sb-h1,.sb-h2,.sb-h3{text-transform:uppercase;font-weight:600;letter-spacing:-.015em;line-height:1.02;text-wrap:balance}
.sb-h1{font-size:var(--sb-step-5)}
.sb-h2{font-size:var(--sb-step-4)}
.sb-h3{font-size:var(--sb-step-2);letter-spacing:.01em;line-height:1.15}

/* Human headline: serif = warmth */
.sb-serif{font-family:var(--sb-font-serif);font-weight:400;text-transform:none;letter-spacing:-.01em;line-height:1.06}
.sb-serif-italic{font-style:italic}

/* ---- Colour system ------------------------------------------------------
   Colour is rationed and it means something: one gradient statement per page,
   and a fixed spectrum order so a numbered set always reads in the same
   sequence. Never used on body text, where it would cost contrast. */

/* Gradient display type. Large sizes only — the clipped fill thins strokes,
   so it is unreadable below about 1.75rem. */
.sb-gradient-text{
  background:var(--sb-gradient);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  /* If background-clip:text is unsupported the text would vanish, so the
     colour is only made transparent where the feature is available. */
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .sb-gradient-text{color:var(--sb-accent);-webkit-text-fill-color:currentColor}
}

/* ---- Glitch ------------------------------------------------------------
   Chromatic aberration on a display line, in the cyan/magenta of the brand
   board.

   Two deliberate constraints, because this is a mental health brand:
   the type is perfectly clean at rest and only pulses for a fraction of a
   second every seven, and the whole thing is off under prefers-reduced-motion.
   A constant strobe would be both illegible and, on this subject, careless.

   Usage: <h2 class="sb-glitch" data-text="Now We Play">Now We Play</h2>
   The duplicated text lives in pseudo-elements, so it is decorative and never
   reaches the accessibility tree twice. */
/* Deliberately does not set `display`. Forcing inline-block to shrink-wrap
   the box pulls a heading out of block flow and the eyebrow above it ends up
   on the same line. The pseudo-elements are given width:100% instead, so they
   wrap exactly like the real text whatever the element's natural display is. */
.sb-glitch{position:relative}
.sb-glitch::before,
.sb-glitch::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;
  pointer-events:none;user-select:none;
  /* Hidden at rest — the burst is what reveals each slice. */
  clip-path:inset(0 0 100% 0);
  mix-blend-mode:screen
}
.sb-glitch::before{color:var(--sb-cyan)}
.sb-glitch::after{color:var(--sb-magenta)}

@media (prefers-reduced-motion:no-preference){
  .sb-glitch::before{animation:sb-glitch-cyan 5s steps(1,end) infinite}
  .sb-glitch::after{animation:sb-glitch-magenta 5s steps(1,end) infinite}
}

/* Weighted to the left half. Every slice is clipped from the midline
   outwards (the `right` inset stays at or above 42%), and the throw grows the
   further left it lands — so the break reads as tearing away from centre
   rather than shimmering evenly across the whole line. */
/* The host jolts and the RGB channels separate at the same instants the
   slices tear — technique from the frame-glitch-title skill, dialled back to
   a brief pulse rather than a constant cyberpunk shimmer. */
@media (prefers-reduced-motion:no-preference){
  .sb-glitch{animation:sb-glitch-host 5s steps(1,end) infinite}
}
@keyframes sb-glitch-host{
  0%,88%,100%{transform:translate(0);filter:none}
  89%{transform:translate(-3px,1px);filter:url(#sb-rgb)}
  91%{transform:translate(4px,-1px);filter:none}
  93%{transform:translate(-2px,0);filter:url(#sb-rgb)}
  95%{transform:translate(2px,1px);filter:none}
  97%{transform:translate(-1px,0);filter:url(#sb-rgb)}
}

@keyframes sb-glitch-cyan{
  0%,88%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  89%{clip-path:inset(8% 48% 66% 0);transform:translate(-11px,-1px)}
  91%{clip-path:inset(46% 62% 28% 0);transform:translate(-16px,1px)}
  93%{clip-path:inset(24% 42% 52% 0);transform:translate(-7px,0)}
  95%{clip-path:inset(66% 70% 14% 0);transform:translate(-19px,1px)}
  97%{clip-path:inset(36% 55% 40% 0);transform:translate(-5px,-1px)}
}
@keyframes sb-glitch-magenta{
  0%,88%,100%{clip-path:inset(0 0 100% 0);transform:translate(0)}
  89%{clip-path:inset(52% 56% 22% 0);transform:translate(9px,1px)}
  91%{clip-path:inset(16% 44% 58% 0);transform:translate(13px,-1px)}
  93%{clip-path:inset(70% 66% 10% 0);transform:translate(6px,0)}
  95%{clip-path:inset(32% 74% 44% 0);transform:translate(17px,1px)}
  97%{clip-path:inset(58% 46% 26% 0);transform:translate(4px,-1px)}
}

/* Softer variant for secondary lines: shorter throw, longer gap. */
.sb-glitch--soft::before,
.sb-glitch--soft::after{opacity:.75}

/* The spectrum, in order. Applied to numbered sets so the eye can follow the
   sequence by hue as well as by digit. */
.sb-spectrum>*:nth-child(5n+1){--sb-hue:var(--sb-violet)}
.sb-spectrum>*:nth-child(5n+2){--sb-hue:var(--sb-magenta)}
.sb-spectrum>*:nth-child(5n+3){--sb-hue:var(--sb-orange)}
.sb-spectrum>*:nth-child(5n+4){--sb-hue:var(--sb-accent-gold)}
.sb-spectrum>*:nth-child(5n+5){--sb-hue:var(--sb-cyan)}

.sb-eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.8125rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  /* A solid chip rather than loose small caps: at this size the label needs
     its own field to sit in, or it reads as stray text above the heading. */
  background:var(--sb-ink);color:#fff;
  padding:.55em .95em;border-radius:2px;
  margin:0 0 var(--sb-space-m)
}
/* The gradient survives as a dot inside the chip — the dash that used to sit
   outside it has nowhere to live once the label has a background. */
.sb-eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--sb-gradient);flex:none
}
.sb-eyebrow--plain::before{display:none}
/* Above the scanline overlay: the texture is meant to fall across the field,
   not across a solid white label, where it just reads as dirt. */
.sb-scan .sb-eyebrow,
.sb-scan .sb-melt__kicker{position:relative;z-index:3}

/* Inverted on dark ground. A black chip on a black section is invisible, so
   every dark surface flips it to white-on-ink. */
.sb-section--ink .sb-eyebrow,
.sb-pagehero--ink .sb-eyebrow,
.sb-cta-band .sb-eyebrow,
.sb-herod .sb-eyebrow,
.sb-melt .sb-eyebrow{background:#fff;color:var(--sb-ink)}

.sb-lede{font-size:var(--sb-step-1);line-height:1.55;color:var(--sb-ink-70);max-width:60ch}
.sb-small{font-size:var(--sb-step--1);color:var(--sb-grey)}
.sb-measure{max-width:var(--sb-wrap-text)}

/* Editorial cadence list — the "Real life asks a lot of us" rhythm */
.sb-cadence{list-style:none;margin:0;padding:0}
.sb-cadence li{font-size:var(--sb-step-2);line-height:1.35;padding:.7em 0;border-bottom:1px solid var(--sb-line)}
.sb-cadence li:first-child{border-top:1px solid var(--sb-line)}

blockquote{margin:0;padding:0}

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.sb-wrap{width:100%;max-width:var(--sb-wrap);margin-inline:auto;padding-inline:var(--sb-gutter)}
.sb-wrap--wide{max-width:var(--sb-wrap-wide)}
.sb-wrap--narrow{max-width:860px}

.sb-section{padding-block:var(--sb-section-y);position:relative}
.sb-section--tight{padding-block:clamp(2.5rem,1.5rem + 4vw,5rem)}
.sb-section--bone{background:var(--sb-bone)}
.sb-section--mist{background:var(--sb-mist)}
.sb-section--violet{background:var(--sb-tint-violet)}
.sb-section--magenta{background:var(--sb-tint-magenta)}
.sb-section--coral{background:var(--sb-tint-coral)}
.sb-section--cyan{background:var(--sb-tint-cyan)}
.sb-section--ink{background:var(--sb-ink);color:var(--sb-paper)}
.sb-section--ink .sb-lede{color:rgba(255,255,255,.72)}
.sb-section--ink .sb-cadence li{border-color:var(--sb-line-dark)}

.sb-grid{display:grid;gap:var(--sb-space-l)}
.sb-grid--2{grid-template-columns:repeat(2,1fr)}
.sb-grid--3{grid-template-columns:repeat(3,1fr)}
.sb-grid--4{grid-template-columns:repeat(4,1fr)}
.sb-grid--5{grid-template-columns:repeat(5,1fr)}
.sb-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.sb-split--top{align-items:start}
.sb-split--media-first .sb-split__media{order:-1}

.sb-stack>*+*{margin-top:var(--sb-space-m)}
.sb-cluster{display:flex;flex-wrap:wrap;gap:var(--sb-space-s);align-items:center}
.sb-center{text-align:center}
.sb-center .sb-lede,.sb-center .sb-measure{margin-inline:auto}

.sb-rule{height:2px;background:var(--sb-gradient);border:0;margin:0;width:100%}
.sb-rule--short{width:72px}

/* --------------------------------------------------------------------------
   5. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-color:var(--sb-accent)}

/* Every button carries the brand gradient, wiping up from the bottom on hover
   and on keyboard focus. It lives on the base rule rather than on one variant,
   so no button — including one added later — can end up without it. The
   variants only choose their resting colours through --btn-bg / --btn-fg /
   --btn-bd; the gradient layer sits on top of whatever that ground is.
   Animating background-size is what makes it a wipe rather than a swap. */
.sb-btn{
  --btn-bg:var(--sb-ink); --btn-fg:#fff; --btn-bd:var(--sb-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:1.05rem 1.9rem;
  background-color:var(--btn-bg);
  background-image:linear-gradient(100deg,#7B3FF2 0%,#B14BE0 30%,#FF2E93 62%,#FF6B2C 100%);
  background-repeat:no-repeat;background-position:0 100%;background-size:100% 0%;
  color:var(--btn-fg);border:1px solid var(--btn-bd);
  font:600 .8125rem/1 var(--sb-font-sans);
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;border-radius:var(--sb-radius);text-align:center;
  /* The label turns white a beat after the wipe starts, so on the white
     buttons it is never white on white while the gradient is still low. */
  transition:background-size .45s var(--sb-ease),background-color .25s var(--sb-ease),
             color .25s var(--sb-ease) .1s,border-color .25s var(--sb-ease),
             box-shadow .3s var(--sb-ease),transform .2s var(--sb-ease);
}
.sb-btn:hover,
.sb-btn:focus-visible{
  background-size:100% 100%;
  --btn-fg:#fff;--btn-bd:transparent;
  box-shadow:0 10px 30px -12px rgba(255,46,147,.55)
}
.sb-btn:hover{transform:translateY(-2px)}
.sb-btn:active{transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .sb-btn{transition:none}
}

/* Resting colours only. The primary CTA is plain ink — told apart from the
   black label chip by size and shape, not colour — and is the base default.
   Hover belongs to .sb-btn above, identically for all of them. */
.sb-btn--ghost{--btn-bg:transparent;--btn-fg:var(--sb-ink);--btn-bd:var(--sb-ink)}
.sb-btn--light{--btn-bg:#fff;--btn-fg:var(--sb-ink);--btn-bd:#fff}
.sb-btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.sb-btn--sm{padding:.7rem 1.25rem;font-size:.6875rem}
.sb-btn--block{width:100%}

.sb-link{
  display:inline-flex;align-items:center;gap:.5em;
  font:600 .8125rem/1 var(--sb-font-sans);letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding-bottom:.45em;position:relative;color:inherit;
}
.sb-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform-origin:right;transform:scaleX(1);transition:transform .35s var(--sb-ease)}
.sb-link:hover::after{transform:scaleX(0);transform-origin:left}
.sb-link__arrow{transition:transform .3s var(--sb-ease)}
.sb-link:hover .sb-link__arrow{transform:translateX(4px)}

/* --------------------------------------------------------------------------
   6. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.sb-header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--sb-line);
  transition:box-shadow .3s var(--sb-ease);
}
.sb-header.is-scrolled{box-shadow:0 1px 24px rgba(11,11,12,.06)}
.sb-header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sb-space-m);min-height:var(--sb-header-h)}
.sb-brand{display:flex;flex-direction:column;gap:.15rem;text-decoration:none;flex:none}
.sb-brand__name{font-weight:600;font-size:1.0625rem;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.sb-brand__role{font-size:.5625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sb-grey)}
.sb-brand img{max-height:46px;width:auto}

.sb-nav{display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.75rem)}
.sb-nav ul{list-style:none;display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.75rem);margin:0;padding:0}
.sb-nav a{font-size:.75rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;text-decoration:none;padding:.4rem 0;position:relative;white-space:nowrap;display:inline-block}
.sb-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sb-ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--sb-ease)}
.sb-nav a:hover::after,.sb-nav .current-menu-item>a::after{transform:scaleX(1)}
.sb-nav .current-menu-item>a{font-weight:600}

.sb-header__actions{display:flex;align-items:center;gap:.6rem;flex:none}

.sb-nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--sb-line);background:transparent;cursor:pointer;align-items:center;justify-content:center;padding:0}
.sb-nav-toggle span{display:block;width:20px;height:1.5px;background:var(--sb-ink);position:relative;transition:background .2s}
.sb-nav-toggle span::before,.sb-nav-toggle span::after{content:"";position:absolute;left:0;width:20px;height:1.5px;background:var(--sb-ink);transition:transform .3s var(--sb-ease),top .2s}
.sb-nav-toggle span::before{top:-6px}
.sb-nav-toggle span::after{top:6px}
.sb-nav-toggle[aria-expanded="true"] span{background:transparent}
.sb-nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.sb-nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---- Full-screen mobile menu --------------------------------------------
   Lives at the top of <body>, never inside the header, so inset:0 can only
   resolve against the viewport. Hidden outright on desktop so the links are
   never duplicated in the accessibility tree. */
.sb-menu{
  display:none;
  position:fixed;inset:0;z-index:300;
  background:var(--sb-ink);color:#fff;
  padding:var(--sb-gutter);
  flex-direction:column;
  /* The panel itself never scrolls — only the link list inside it does, so
     the bar and the two CTAs stay pinned and visible on any screen height. */
  overflow:hidden
}
/* Visibility is the [hidden] attribute alone — deliberately not an opacity
   transition. A fade means that if the animation timeline ever stalls the
   menu ends up open but invisible, with no way for the user to recover.
   The motion below is decoration; this is the part that must not fail. */
.sb-menu[hidden]{display:none}

.sb-menu__orb{
  position:absolute;top:-12%;right:-22%;width:75vw;aspect-ratio:1;border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 34% 32%, #00D1FF 0%, transparent 48%),
    radial-gradient(circle at 70% 34%, #FF2E93 0%, transparent 52%),
    radial-gradient(circle at 58% 74%, #FF6B2C 0%, transparent 50%),
    #7B3FF2;
  filter:blur(64px);opacity:.42
}

.sb-menu__bar{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;
  min-height:calc(var(--sb-header-h) - var(--sb-gutter));
  position:relative;z-index:1
}
.sb-menu__brand{font-weight:600;font-size:1.0625rem;letter-spacing:.16em;text-transform:uppercase}
.sb-menu__close{
  width:48px;height:48px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;
  cursor:pointer;padding:0;
  transition:background .25s var(--sb-ease),border-color .25s var(--sb-ease),transform .25s var(--sb-ease)
}
.sb-menu__close svg{width:22px;height:22px;fill:none}
.sb-menu__close:hover,.sb-menu__close:focus-visible{background:#fff;color:var(--sb-ink);border-color:#fff;transform:rotate(90deg)}

/* flex:1 with min-height:0 is what lets this scroll instead of overflowing
   the panel and shoving the CTAs off the bottom of the screen. */
.sb-menu__nav{
  flex:1 1 auto;min-height:0;
  /* overflow-x must be stated: setting only overflow-y makes the other axis
     compute to auto, which is where the sideways scroll came from. */
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  position:relative;z-index:1;padding-block:var(--sb-space-m)
}
/* margin-block:auto centres the list when there is spare height and collapses
   to zero when there is not — so a long menu on a short phone still scrolls
   instead of being clipped, which is what centring with justify-content does. */
.sb-menu__nav ul{list-style:none;margin:auto 0;padding:0;width:100%;display:grid}
.sb-menu__nav li{border-bottom:1px solid rgba(255,255,255,.12)}
.sb-menu__nav li:first-child{border-top:1px solid rgba(255,255,255,.12)}
.sb-menu__nav a{
  display:block;padding:.5em 0;text-decoration:none;color:#fff;
  font-size:clamp(1.0625rem,4.6vw,1.625rem);line-height:1.15;
  letter-spacing:.01em;text-transform:uppercase;font-weight:600;
  overflow-wrap:break-word;
  transition:color .25s var(--sb-ease),padding-left .3s var(--sb-ease)
}
.sb-menu__nav a:active,.sb-menu__nav a:hover{padding-left:.35em}
.sb-menu__nav .current-menu-item>a{color:var(--sb-magenta)}

.sb-menu__foot{
  flex:none;display:grid;gap:.75rem;position:relative;z-index:1;
  padding-top:var(--sb-space-s);
  /* Clears the iOS home indicator so the CTA is never half under it. */
  padding-bottom:env(safe-area-inset-bottom,0)
}
.sb-menu__tag{
  margin:.5rem 0 0;font-family:var(--sb-font-serif);font-size:var(--sb-step-2);
  line-height:1.1;color:rgba(255,255,255,.55)
}

/* The entrance. Each row lifts in just behind the one above it, so opening
   the menu reads as a deliberate reveal rather than a panel appearing.
   Written as a keyframe animation rather than a transition from opacity:0,
   so the resting state of every row is already visible — if animations are
   disabled, throttled or unsupported, the menu simply appears, fully legible. */
@keyframes sb-menu-rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.sb-menu.is-open li,
.sb-menu.is-open .sb-menu__foot>*{
  animation:sb-menu-rise .45s var(--sb-ease) both;
  animation-delay:calc(var(--i,0) * 45ms + 60ms)
}
@media (prefers-reduced-motion:reduce){
  .sb-menu.is-open li,
  .sb-menu.is-open .sb-menu__foot>*{animation:none}
}

/* Sticky conversion bar (mobile) */
.sb-sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:180;display:none;gap:1px;background:var(--sb-line);transform:translateY(110%);transition:transform .35s var(--sb-ease)}
.sb-sticky-cta.is-visible{transform:translateY(0)}
.sb-sticky-cta .sb-btn{flex:1;padding:1.05rem .5rem;font-size:.6875rem;border:0}
.sb-sticky-cta .sb-btn--ghost{--btn-bg:#fff;--btn-fg:var(--sb-ink)}

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.sb-hero{position:relative;background:var(--sb-paper);overflow:hidden}
.sb-hero__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-block:clamp(3rem,3vw + 2rem,6.5rem)}
.sb-hero__kicker{font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--sb-grey);margin:0 0 var(--sb-space-m)}
.sb-hero__title{font-size:var(--sb-step-6);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;font-weight:600;margin:0 0 var(--sb-space-s);text-wrap:balance}
.sb-hero__sub{font-family:var(--sb-font-serif);font-size:var(--sb-step-3);line-height:1.1;margin:0 0 var(--sb-space-m)}
.sb-hero__text{font-size:var(--sb-step-1);line-height:1.55;color:var(--sb-ink-70);max-width:52ch;margin-bottom:var(--sb-space-l)}
.sb-hero__media{position:relative;isolation:isolate}
.sb-hero__media img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 20%}
/* Gradient rule sits at the top edge so nothing can ever cross the badge. */
.sb-hero__media::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--sb-gradient);z-index:1}
/* Badge stays fully inside the image box: no negative offsets, so the hero's
   overflow:hidden can never clip it, and no sibling can paint over it. */
.sb-hero__badge{
  position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;z-index:2;
  max-width:290px;background:var(--sb-ink);color:#fff;padding:1.15rem 1.4rem
}
.sb-hero__badge strong{display:block;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;line-height:1.2;margin-bottom:.45rem}
.sb-hero__badge span{display:block;font-size:.8125rem;color:rgba(255,255,255,.72);line-height:1.45}

/* ---- Hero B: dark, type-led ---------------------------------------------
   Black ground, oversized headline, the portrait bleeding off the right edge
   in black and white, one gradient orb behind the type. */
.sb-herod{
  /* The overshoot past each edge of the right half, and the fade that spans
     both of them. On the section rather than on the picture, because the copy
     column has to stay clear of the same fade and therefore has to know how
     long it is. */
  --sb-blend:10vw;
  --sb-fade:calc(var(--sb-blend) * 2);
  /* How far the wrap's content edge sits from the viewport: its own gutter,
     plus whatever the max-width cap leaves beside it on a wide screen. */
  --sb-herod-offset:max(var(--sb-gutter), (100vw - var(--sb-wrap-wide)) / 2 + var(--sb-gutter));
  position:relative;overflow:clip;isolation:isolate;
  background:var(--sb-ink);color:#fff;
  display:block;
  min-height:min(88vh,860px)
}
.sb-herod__media{
  position:absolute;inset:0 0 0 auto;width:58%;z-index:0;
  /* The photograph itself fades out to transparent on its left, rather than
     having a black panel laid over that edge. Overlaying ink worked while the
     hero was flat black, but against the animated background it drew a hard
     vertical seam exactly where the image box began — the overlay was opaque
     at 0%, so it covered the fluid instead of blending with it. Masking the
     image means the light behind simply continues through. */
  /* Reaches full opacity by 46% so the fade lands entirely in the empty part
     of the frame — her face sits past that point and stays clean. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.16) 13%, rgba(0,0,0,.70) 30%, #000 46%);
  mask-image:linear-gradient(90deg,
    transparent 0%, rgba(0,0,0,.16) 13%, rgba(0,0,0,.70) 30%, #000 46%)
}
.sb-herod__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 16%
}
/* A light veil only — the mask does the blending now, so this no longer has
   to hide an edge and can stay subtle enough to keep the portrait readable. */
.sb-herod__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(11,11,12,.45) 0%,
    rgba(11,11,12,.28) 34%,
    rgba(11,11,12,.05) 66%,
    rgba(11,11,12,.30) 100%)
}
/* Cutout hero.
   She stands on the background rather than being windowed into it, so the
   mask, the veil, the grayscale and object-fit:cover all have to come off —
   each exists to blend the edges of a rectangle, and this picture has no
   rectangle to blend. Anchored to the bottom so she stands on the section
   floor instead of floating in the middle of it. */
/* Full-bleed photograph on the right of the hero.

   The blend is two gradients doing two different jobs, because one cannot do
   both. The mask dissolves the edge — multi-stop rather than a straight ramp,
   since the kink where a linear ramp begins reads as a line. The veil darkens
   the same stretch, because alpha alone never hides this kind of join: the
   picture stays bright right up to the point it vanishes and the eye sees a
   luminance step through a perfectly clean fade. Converging the brightness
   first is what makes it disappear. */
.sb-herod__media--bleed{
  /* --sb-blend is the overshoot past each edge of the right half. Equal on
     both sides is what keeps her centred: the photograph fills the panel's
     width exactly — object-fit has no horizontal slack to give when the box
     is wider than the frame — so her centre is the panel's centre, which
     stays on 75% of the viewport however long the fade gets. The right-hand
     overshoot runs off-screen; the section clips it. */
  position:absolute;top:0;bottom:0;
  right:calc(var(--sb-blend) * -1);
  width:calc(50% + var(--sb-fade));
  z-index:0;pointer-events:none;
  /* The ramp spans both overshoots, so it is half done exactly on the centre
     line. Smoothstep, not linear: a straight ramp's derivative jumps at each
     end, and that kink is what the eye reads as an edge. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.028) calc(var(--sb-fade) * .1),
    rgba(0,0,0,.104) calc(var(--sb-fade) * .2),
    rgba(0,0,0,.216) calc(var(--sb-fade) * .3),
    rgba(0,0,0,.352) calc(var(--sb-fade) * .4),
    rgba(0,0,0,.5) calc(var(--sb-fade) * .5),
    rgba(0,0,0,.648) calc(var(--sb-fade) * .6),
    rgba(0,0,0,.784) calc(var(--sb-fade) * .7),
    rgba(0,0,0,.896) calc(var(--sb-fade) * .8),
    rgba(0,0,0,.972) calc(var(--sb-fade) * .9),
    #000 var(--sb-fade));
  mask-image:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.028) calc(var(--sb-fade) * .1),
    rgba(0,0,0,.104) calc(var(--sb-fade) * .2),
    rgba(0,0,0,.216) calc(var(--sb-fade) * .3),
    rgba(0,0,0,.352) calc(var(--sb-fade) * .4),
    rgba(0,0,0,.5) calc(var(--sb-fade) * .5),
    rgba(0,0,0,.648) calc(var(--sb-fade) * .6),
    rgba(0,0,0,.784) calc(var(--sb-fade) * .7),
    rgba(0,0,0,.896) calc(var(--sb-fade) * .8),
    rgba(0,0,0,.972) calc(var(--sb-fade) * .9),
    #000 var(--sb-fade))
}
/* The blurred understudy. Same frame, same crop, so it is in register; only
   the high frequencies are gone. It is masked to be strongest exactly where
   the sharp copy is weakest, and gone again by the time the sharp one is at
   full strength, so it never dulls the photograph itself. */
.sb-herod__media--bleed::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("../img/sutton-hero-office.jpg");
  background-image:image-set(url("../img/sutton-hero-office.webp") type("image/webp"),
                             url("../img/sutton-hero-office.jpg") type("image/jpeg"));
  background-size:cover;background-position:52% 30%;
  /* Scaled up because blur pulls the frame's own edges inward, and the top
     and bottom of this element are the section's edges. */
  filter:blur(38px);transform:scale(1.08);
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.30) calc(var(--sb-fade) * .18),
    rgba(0,0,0,.75) calc(var(--sb-fade) * .34),
    #000 calc(var(--sb-fade) * .5),
    #000 calc(var(--sb-fade) * .82),
    transparent calc(var(--sb-fade) * 1.15));
  mask-image:linear-gradient(90deg,
    transparent 0,
    rgba(0,0,0,.30) calc(var(--sb-fade) * .18),
    rgba(0,0,0,.75) calc(var(--sb-fade) * .34),
    #000 calc(var(--sb-fade) * .5),
    #000 calc(var(--sb-fade) * .82),
    transparent calc(var(--sb-fade) * 1.15))
}
/* Lifted, or the absolutely positioned pseudo-element would paint over it. */
.sb-herod__media--bleed picture{display:block;height:100%;position:relative;z-index:1}
.sb-herod__media--bleed img{
  display:block;width:100%;height:100%;
  object-fit:cover;object-position:52% 30%;
  filter:none;background:transparent
}
/* The luminance half of the blend: a bright wall meeting a black ground reads
   as a step even through a clean alpha ramp, so the photograph's brightness
   converges on the ink before it disappears. It ends where the ramp ends. It
   used to thin out across the whole panel, and 30% ink across her face is
   what made the hero read as dark — the brief for this frame is that it must
   not. */
.sb-herod__media--bleed::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,
    var(--sb-ink) 0,
    var(--sb-ink) calc(var(--sb-fade) * .25),
    rgba(11,11,12,.80) calc(var(--sb-fade) * .5),
    rgba(11,11,12,.42) calc(var(--sb-fade) * .78),
    rgba(11,11,12,.16) var(--sb-fade),
    rgba(11,11,12,.04) calc(var(--sb-fade) * 1.25),
    transparent calc(var(--sb-fade) * 1.5))
}

/* Cutout inside a two-column hero. Unlike the homepage hero this is a normal
   grid column, so it only has to shed the duotone treatment and sit on the
   section floor — no absolute positioning involved. */
/* Getting the cutout onto the section floor by removing the hero's bottom
   padding also took the air out from under the buttons in the copy column —
   they are in the same box. So the padding stays, and only the picture
   overflows it: a negative margin of exactly the padding it has to cross.
   Both read the same custom property, so they cannot drift apart. */
/* Only the picture belongs on the floor. Aligning the whole row to the end
   took the headline down with it, which is what put some hero copy at the
   bottom instead of the top. */
.sb-pagehero .sb-split{align-items:start}
.sb-split__media--cutout{
  align-self:end;overflow:visible;
  margin-bottom:calc(var(--sb-pagehero-pb, 0px) * -1)
}
.sb-split__media--cutout img{vertical-align:bottom}
/* The section's scanlines sit at z-index 2 over everything inside it,
   including this photograph — which is why it read as striped as well as
   grey. Lifted above them, the same way the eyebrow chips were. */
.sb-scan .sb-split__media--sticky{z-index:3}

.sb-split__media--cutout picture{
  display:flex;justify-content:center;width:100%
}
.sb-split__media--cutout img{
  display:block;width:100%;height:auto;
  filter:none;background:transparent
}

/* Between the stacking breakpoint and roughly 1200px the two columns are
   measured against different things — the copy against the wrap's inner
   width, the portrait against the viewport — so the gutters push them into
   each other. She gives up the width there. */
@media (min-width:901px) and (max-width:1379px){
  /* The copy column stops growing at 44rem, so below about 1380px the two
     boxes close on each other. The fade gets longer rather than the panel
     getting narrower — a narrower panel would pull the photograph off the
     centre line, and what the copy actually needs here is a gentler join, not
     more empty ground. */
  .sb-herod{--sb-blend:8vw}
}

.sb-hero__media--cutout{position:relative}
.sb-hero__media--cutout::after{content:none}
.sb-hero__media--cutout img{
  width:100%;height:auto;aspect-ratio:auto;object-fit:contain;
  filter:none;background:transparent
}

.sb-herod__orb{
  position:absolute;z-index:0;pointer-events:none;
  top:-18%;left:-6%;width:min(42vw,520px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 32%, #00D1FF 0%, transparent 48%),
    radial-gradient(circle at 70% 34%, #FF2E93 0%, transparent 52%),
    radial-gradient(circle at 58% 74%, #FF6B2C 0%, transparent 50%),
    #7B3FF2;
  filter:blur(66px);opacity:.5
}
/* Two columns. No bottom padding on the grid itself, so the portrait can run
   to the section floor; the copy carries its own instead. */
.sb-herod__inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,auto);
  gap:clamp(1.5rem,3vw,3rem);align-items:start;
  padding-block:clamp(2.75rem,7vh,5rem) 0;
  min-height:min(88vh,860px)
}
.sb-herod__copy{
  /* Measure first, then the photograph. 44rem is the reading measure; the
     second term is the point the dissolve starts to show something, less a
     step of clearance. Whichever is smaller wins, so the headline never sets
     itself against her — at any window width, without a breakpoint. */
  max-width:min(44rem, calc(50vw - var(--sb-blend) * .2 - var(--sb-herod-offset)));
  padding-bottom:clamp(4rem,10vh,7rem)
}
/* Sits over the gradient orb, so mid-grey lost too much contrast against the
   wash. Near-white, a size up, and a little less tracking. */
.sb-herod__kicker{
  display:inline-flex;align-items:center;gap:.75em;flex-wrap:wrap;
  font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,.88);margin:0 0 var(--sb-space-m)
}
.sb-herod__kicker::before{
  content:"";width:32px;height:2px;flex:none;background:var(--sb-gradient)
}
/* Sized against the fold, not the column. The headline is 47 characters now
   against the 27 it was designed around, and at the old size it set in four
   or five lines and pushed both CTAs off the first screen at every common
   laptop size — 916px of hero in an 800px window at 1280. Measured at
   1280x800, 1440x900, 1536x864 and 1820x900: the CTAs now land inside all
   four. */
.sb-herod__title{
  font-size:clamp(2.5rem,4.3vw,4.75rem);line-height:.88;letter-spacing:-.04em;
  text-transform:uppercase;font-weight:600;margin:0 0 var(--sb-space-m);
  text-wrap:balance
}
.sb-herod__sub{
  font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.05;
  margin:0 0 var(--sb-space-m)
}
.sb-herod__text{
  font-size:var(--sb-step-1);line-height:1.55;color:rgba(255,255,255,.72);
  max-width:46ch;margin:0 0 var(--sb-space-l)
}
/* The cover sits in perspective, as if set down on a surface: a Y rotation
   for the turn, a small X tilt for the lean, and a Z nudge so it is not
   mechanically square. The shadow is offset to match where the light would
   put it, which is what stops it reading as a flat sticker. */
.sb-herod__badge{
  display:flex;align-items:center;gap:clamp(1rem,2vw,1.6rem);
  margin:var(--sb-space-xl) 0 0;padding-top:var(--sb-space-m);
  border-top:1px solid rgba(255,255,255,.16);max-width:34rem
}
.sb-herod__book{
  flex:none;display:block;width:clamp(62px,6.5vw,92px);
  perspective:700px;text-decoration:none
}
/* The cover artwork is a 3D render with its own perspective and drop shadow.
   The transform and box-shadow that used to sit here were faking both for a
   flat, opaque cover; kept on, they tilt an already-tilted book and — because
   the render is transparent — trace a shadow around the image's rectangle
   rather than the book. Only the lift on hover survives. */
.sb-herod__book > img,
.sb-herod__book > picture,
.sb-herod__book picture > img,
.sb-herod__book .sb-book__placeholder{
  display:block;width:100%;height:auto;
  transition:transform .55s var(--sb-ease)
}
.sb-herod__book .sb-book__placeholder{
  border-radius:2px;box-shadow:14px 20px 34px rgba(0,0,0,.6)
}
.sb-herod__book:hover img,
.sb-herod__book:focus-visible img{transform:scale(1.06)}
.sb-herod__badge-text{display:block}
.sb-herod__badge-text strong{
  display:block;font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;
  margin-bottom:.4rem
}
.sb-herod__badge-text span{font-size:1rem;color:rgba(255,255,255,.72);line-height:1.45}
@media (prefers-reduced-motion:reduce){
  .sb-herod__book img{transition:none}
}

@media (max-width:900px){
  /* The photograph is a direct child of the section now, so it comes before
     the copy in the DOM. On a phone it belongs after — the section becomes a
     flex column and order does that without a second markup path. */
  .sb-herod{min-height:0;display:flex;flex-direction:column;align-items:stretch}
  /* Photograph first on a phone, as the hero was first built: she opens the
     page, her frame dissolves downward, and the headline and copy follow. */
  .sb-herod__media--bleed{order:0}
  .sb-herod__inner{order:1}
  /* The animated colour field is off on a phone. Stacked, it ends up painted
     over the photograph on some renderers, so the frame shows as an empty
     glow; below the photo the copy sits on black either way, and a phone is
     spared a WebGL loop it gains nothing from. */
  .sb-herod > .sb-fluid__canvas{display:none}

  /* The desktop rule keeps the type clear of the portrait. Stacked on a phone
     the portrait sits above the type, so that cap has to be released or the
     headline is squeezed into a 54%-wide sliver. */
  .sb-herod__inner>*{max-width:none}
  .sb-herod__title{max-width:none}

  /* svh, not vh. On a phone vh resolves against the LARGE viewport — the
     height the page gets only after the address bar retracts — so a hero
     measured in vh is always taller than what the visitor actually sees when
     the page loads. svh is the with-the-bar height, which is the one that
     matters for whether the headline is above the fold. */
  .sb-herod__media{
    position:relative;inset:auto;z-index:1;
    width:100%;height:auto;aspect-ratio:4/5;max-height:52svh;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.92) 78%,
      rgba(0,0,0,.72) 84%,rgba(0,0,0,.46) 90%,rgba(0,0,0,.20) 96%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 70%,rgba(0,0,0,.92) 78%,
      rgba(0,0,0,.72) 84%,rgba(0,0,0,.46) 90%,rgba(0,0,0,.20) 96%,transparent 100%)
  }
  .sb-herod__media img{height:100%;object-position:center 6%;background:transparent}

  /* Cutout overrides for the stacked layout — no crop, no mask, no veil. */
  /* Stacked, the portrait follows the copy — the same order it has in the
     markup, so nothing needs reordering. */
  .sb-herod__inner{
    display:flex;flex-direction:column;min-height:0;
    /* Pulled up onto the photograph's faded foot, so the kicker and headline
       sit where the image has already turned to black. */
    padding-block:0 var(--sb-space-xl);margin-top:calc(var(--sb-space-xl) * -1);
    gap:var(--sb-space-l)
  }
  .sb-herod__copy{max-width:none;padding-bottom:0}
  .sb-herod{--sb-blend:0px}
  .sb-herod__media--bleed{
    position:relative;inset:auto;align-self:auto;justify-self:auto;
    top:auto;margin-bottom:0;
    /* The desktop cap is a percentage of the viewport, so left in place it
       clamps this to 48% of a phone screen — 180px — and the portrait comes
       out a third of the size it should be. */
    width:100%;max-width:none;
    /* Sized by width, not by height. The frame is 2:3, so a height cap alone
       would decide the width for us and hand back a 210px column on a phone;
       filling the width and letting the height budget crop keeps her as large
       as the screen allows. */
    height:46svh;max-height:46svh;
    /* Her frame dissolves into the black below it, so the type can start on
       the fade rather than under a hard photo edge. */
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.85) 70%,
      rgba(0,0,0,.5) 84%,rgba(0,0,0,.18) 94%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.85) 70%,
      rgba(0,0,0,.5) 84%,rgba(0,0,0,.18) 94%,transparent 100%)
  }
  .sb-herod__media--bleed picture{display:block;width:100%;height:100%}
  .sb-herod__media--bleed img{
    width:100%;height:100%;max-width:none;max-height:none;
    object-fit:cover;object-position:52% 30%
  }
  .sb-herod__media--bleed::before,
  .sb-herod__media--bleed::after{content:none}
  .sb-herod__media::after{
    background:linear-gradient(180deg,rgba(11,11,12,.06) 0%,rgba(11,11,12,.06) 55%,
      rgba(11,11,12,.22) 72%,rgba(11,11,12,.44) 86%,rgba(11,11,12,.60) 100%)
  }

  /* Everything below is spend against a single budget: the headline, the
     subhead and the first CTA all have to land in the opening view. */
  /* The credential line was costing ~56px of vertical budget directly above
     the H1. Rather than take it out of flow — an absolutely positioned child
     anchors to the padding box, so it loses the wrap's gutter and no longer
     lines up with the headline — the whole type block is pulled up over the
     photograph's faded bottom edge. The mask already dissolves that edge, so
     the overlap reads as one continuous image, and the gutter is preserved. */
  .sb-herod__kicker{
    font-size:.5625rem;letter-spacing:.12em;gap:.5em;line-height:1.5;
    margin:0 0 var(--sb-space-s)
  }
  .sb-herod__kicker::before{width:20px}
  .sb-herod__title{
    /* No automatic hyphenation. With hyphens:auto, Safari on a phone split
       CAPACITY across two lines to balance the headline — Chrome on Windows
       has no English dictionary for it, so it never showed in testing. Words
       stay whole now, at a size where the longest one fits a 320px screen. */
    font-size:clamp(2rem,8.6vw,3rem);line-height:.94;
    margin-bottom:var(--sb-space-m);
    overflow-wrap:normal;hyphens:manual
  }
  .sb-herod__sub{font-size:var(--sb-step-0)}
  .sb-herod__text{font-size:var(--sb-step-0);line-height:1.45;margin-bottom:var(--sb-space-l)}

  /* Full-bleed stacked buttons: a thumb-sized target beats a tidy row. */
  .sb-herod__cta{flex-direction:column;align-items:stretch;gap:.6rem}
  .sb-herod__cta .sb-btn{width:100%;justify-content:center}

  /* Stacked, the orb would sit on top of the portrait and tint her face.
     Move it into the black below and let the photo paint above it. */
  .sb-herod__orb{top:auto;bottom:6%;left:-36%;width:88vw;opacity:.4}
  .sb-herod__badge{margin-top:var(--sb-space-l)}
}

/* Interior page hero */
.sb-pagehero{--sb-pagehero-pb:clamp(2rem,1.5rem + 3vw,4rem);padding-block:clamp(3rem,2rem + 5vw,6.5rem) var(--sb-pagehero-pb);border-bottom:1px solid var(--sb-line)}
.sb-pagehero__title{font-size:var(--sb-step-5);text-transform:uppercase;letter-spacing:-.03em;line-height:.98;margin:0 0 var(--sb-space-m)}
.sb-pagehero--ink{background:var(--sb-ink);color:#fff;border-bottom:0}
.sb-pagehero--ink .sb-lede{color:rgba(255,255,255,.72)}

/* Courses and Resources were the only main pages whose hero carried no
   photograph, which is what made moving between pages feel inconsistent.
   The existing narrow copy block becomes the left column here rather than
   each page growing its own bespoke layout. */
/* The entity line sits between the columns and the copyright, centred as one
   unit so the sentence and its link read as a single statement rather than
   two stray lines. */
/* Hero: the brand phrase sits between the promise and the detail, so it
   needs its own weight — larger than body copy, quieter than the H1. */
.sb-herod__line{
  font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.25;
  color:rgba(255,255,255,.92);margin:0 0 var(--sb-space-s);max-width:38ch
}

/* The copy column here is short — a heading, two lines and a button — beside
   a ten-item list, so it left a block of empty ground. The photograph fills
   it and stops the row reading as unbalanced. */
.sb-who__photo{margin-top:var(--sb-space-xl)}

/* Crossfading stack. Every slide occupies the same box, so the frame's height
   never jumps between photographs of different proportions. */
.sb-cycle__frame{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:2px;
  background:var(--sb-mist)
}
.sb-cycle__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity .9s var(--sb-ease)
}
.sb-cycle__slide.is-on{opacity:1}
.sb-cycle__slide img,.sb-cycle__slide picture{
  display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%
}

.sb-cycle__dots{display:flex;gap:.45rem;margin-top:var(--sb-space-s)}
.sb-cycle__dot{
  width:26px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:var(--sb-line);transition:background-color .35s var(--sb-ease)
}
.sb-cycle__dot.is-on{background:var(--sb-accent)}
.sb-cycle__dot:hover{background:var(--sb-grey)}
.sb-cycle__dot:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}
.sb-section--ink .sb-cycle__dot{background:rgba(255,255,255,.24)}
.sb-section--ink .sb-cycle__dot.is-on{background:#fff}

@media (prefers-reduced-motion:reduce){
  /* No cycling and no fade — the first photograph stays, the dots still work. */
  .sb-cycle__slide{transition:none}
}
@media (max-width:900px){
  .sb-who__photo{display:none}
}
@media (max-width:900px){
  /* Stacked, the list already follows the copy — the photograph would just
     push the list further from the words that introduce it. */
  .sb-who__photo{display:none}
}

/* The recognition list. Deliberately not cards: each line is one situation a
   visitor might be in, and boxing them turns a list you scan into three
   things you compare. */
.sb-recognise{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.sb-recognise li{
  position:relative;padding-left:1.6rem;font-size:var(--sb-step-1);
  line-height:1.45;color:var(--sb-ink)
}
.sb-recognise li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--sb-gradient)
}
.sb-section--ink .sb-recognise li,.sb-section--gradient .sb-recognise li{color:rgba(255,255,255,.9)}

/* The mission is a statement, not a paragraph. */
.sb-mission{
  font-family:var(--sb-font-serif);font-size:var(--sb-step-3);line-height:1.15;
  margin:var(--sb-space-m) 0 0;max-width:24ch
}

.sb-offer__desc{margin:.35rem 0 0;font-size:var(--sb-step-0);line-height:1.5;color:var(--sb-grey)}
.sb-card__lede{margin:0 0 .5rem;font-family:var(--sb-font-serif);font-size:var(--sb-step-1);line-height:1.25}

/* FREE has to be readable at a glance. It was carried by the words "Free
   resource 01", which is a label a scanner reads as a number, not a price. */
/* The Spiral Kit's mark: concentric rings turning through the brand spectrum,
   tightening inward — the shape of the thing it names. */
.sb-spiral{
  width:clamp(84px,18vw,128px);aspect-ratio:1;margin:0 0 var(--sb-space-m);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 14%, #00D1FF 14% 22%, transparent 22% 30%),
    radial-gradient(circle at 50% 50%, transparent 0 30%, #7B3FF2 30% 40%, transparent 40% 48%),
    radial-gradient(circle at 50% 50%, transparent 0 48%, #FF2E93 48% 60%, transparent 60% 70%),
    radial-gradient(circle at 50% 50%, transparent 0 70%, #FF6B2C 70% 86%, transparent 86%);
  filter:saturate(1.1)
}

/* The Toolkit's mark: a set of tiles, i.e. a collection of things you reach
   for, rather than another circle. */
.sb-toolmark{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;
  width:min(100%,220px);aspect-ratio:1
}
.sb-toolmark span{
  border-radius:3px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22)
}
.sb-toolmark span:nth-child(1){background:linear-gradient(140deg,#7B3FF2,#00D1FF);border-color:transparent}
.sb-toolmark span:nth-child(5){background:linear-gradient(140deg,#FF2E93,#FF6B2C);border-color:transparent}
.sb-toolmark span:nth-child(9){background:linear-gradient(140deg,#00D1FF,#7B3FF2);border-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .sb-toolmark span{transition:background-color .4s var(--sb-ease)}
}

.sb-tag{
  display:inline-flex;align-items:center;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:.4em .7em;border-radius:2px;margin-bottom:var(--sb-space-s)
}
.sb-tag--free{background:var(--sb-ink);color:#fff}
.sb-section--ink .sb-tag--free{background:#fff;color:var(--sb-ink)}

/* Credentials. A qualification and the institution beneath it, on a shared
   left edge, so a reader scanning the page can take in the background without
   reading paragraphs — which is what the client asked for. */
/* A remainder row centred under the row above. Five cards in a three-column
   grid otherwise leave the last two hanging off the left edge. */
/* The reel holds its place while the copy beside it scrolls past.
   A sticky child only travels if its parent stretches beyond it, and a grid
   defaults to stretching every item to the row height — which would make the
   media exactly as tall as its track and leave nothing to travel. align-items
   is therefore relaxed on the parent, scoped with :has() so no other split
   layout is affected. */
@media (min-width:901px){
  .sb-split:has(.sb-split__media--sticky){align-items:start}
  /* Child combinator, not the bare class: .sb-duotone also sets position and
     sits later in this file, so at equal specificity it would win and the
     element would quietly stay relative. */
  .sb-split > .sb-split__media--sticky{
    position:sticky;top:calc(var(--sb-header-h,72px) + var(--sb-space-l));
    align-self:start
  }
}
@media (prefers-reduced-motion:reduce){
  .sb-split > .sb-split__media--sticky{position:static}
}

/* A remainder row, centred under the row above.
   Odd counts in a fixed grid leave the last cards hanging off the left edge,
   which is what made several sections look unfinished. --cols is the width of
   the row above, --n how many cards are in this one; the track width is
   derived so the cards line up with the row above rather than merely looking
   about the same size. */
.sb-grid--centred{justify-content:center}
@media (min-width:901px){
  .sb-grid--centred{
    grid-template-columns:repeat(
      var(--n,2),
      minmax(0,calc((100% - (var(--cols,3) - 1) * var(--sb-space-l)) / var(--cols,3)))
    )
  }
}

.sb-creds{display:grid;gap:var(--sb-space-l)}
.sb-creds__group{border-top:1px solid var(--sb-line);padding-top:var(--sb-space-s)}
.sb-creds__title{
  font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  margin:0 0 var(--sb-space-s);color:var(--sb-ink)
}
.sb-creds__list{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.sb-creds__item{display:flex;flex-direction:column;gap:.15rem}
.sb-creds__lead{font-size:var(--sb-step-0);font-weight:600;line-height:1.35;color:var(--sb-ink)}
.sb-creds__meta{font-size:.875rem;line-height:1.4;color:var(--sb-grey)}
/* About, credentials: intro beside a photograph, credentials as a band.
   The photograph is positioned inside its box so it never adds height of its
   own — the intro text sets the row, and the image covers whatever that is,
   with a floor so a short intro cannot flatten her into a letterbox. */
.sb-credsband__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:stretch
}
.sb-credsband__intro>p{margin:1.25rem 0 0;max-width:62ch}
.sb-credsband__intro>.sb-lede{margin-top:1.75rem}
.sb-credsband__photo{position:relative;min-height:380px;overflow:clip;border-radius:2px}
.sb-credsband__photo picture,
.sb-credsband__photo img{position:absolute;inset:0;display:block;width:100%;height:100%}
.sb-credsband__photo img{object-fit:cover;object-position:center 18%}

.sb-credsband__list{margin-top:clamp(3rem,6vw,4.5rem)}
.sb-credsband .sb-creds{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.5rem,3vw,2.75rem)}
.sb-credsband .sb-creds__group{
  border-top:2px solid var(--sb-hue,var(--sb-ink));padding-top:var(--sb-space-m)
}
.sb-credsband .sb-creds__group:nth-child(4n+1){--sb-hue:var(--sb-violet)}
.sb-credsband .sb-creds__group:nth-child(4n+2){--sb-hue:var(--sb-magenta)}
.sb-credsband .sb-creds__group:nth-child(4n+3){--sb-hue:var(--sb-orange)}
.sb-credsband .sb-creds__group:nth-child(4n+4){--sb-hue:var(--sb-accent-gold)}
/* In a quarter of the width the training list reads better as one column. */
.sb-credsband .sb-creds__group:nth-child(3) .sb-creds__list{grid-template-columns:1fr}
@media (max-width:1000px){
  .sb-credsband .sb-creds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sb-credsband__top{grid-template-columns:1fr}
  .sb-credsband__photo{min-height:0;aspect-ratio:4/5}
}
@media (max-width:600px){
  .sb-credsband .sb-creds{grid-template-columns:1fr}
}
.sb-section--ink .sb-creds__group{border-color:rgba(255,255,255,.18)}
.sb-section--ink .sb-creds__title,.sb-section--ink .sb-creds__lead{color:#fff}
.sb-section--ink .sb-creds__meta{color:rgba(255,255,255,.66)}
/* Advanced training is a plain list of modalities with no institution line,
   so it reads better in columns than as one long ladder. */
.sb-creds__group:nth-child(3) .sb-creds__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.5rem}
@media (max-width:520px){
  .sb-creds__group:nth-child(3) .sb-creds__list{grid-template-columns:1fr}
}

/* Infinite Mindcare: a panel of its own in the footer rather than a line of
   small print. A gradient hairline frames it, a soft spectrum wash sits in
   one corner, the entity's name takes the gradient, and the button is the
   solid white one so it is the brightest control in the footer. */
.sb-footer__entity{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--sb-space-m) var(--sb-space-l);
  margin:var(--sb-space-l) 0 var(--sb-space-xl);
  padding:clamp(1.5rem,1rem + 2vw,2.5rem) clamp(1.5rem,1rem + 3vw,3rem);
  border:1px solid transparent;border-radius:4px;
  background:linear-gradient(#131315,#131315) padding-box,var(--sb-gradient) border-box
}
.sb-footer__entity::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-8%;top:-60%;width:min(55%,520px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 35% 40%,#7B3FF2 0%,transparent 58%),
    radial-gradient(circle at 70% 55%,#FF2E93 0%,transparent 55%);
  filter:blur(60px);opacity:.28
}
.sb-footer__entity-copy{flex:1 1 420px;min-width:0}
.sb-footer__entity-kicker{
  display:block;margin-bottom:.5rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6)
}
.sb-footer__entity p{
  margin:0;max-width:40ch;
  font-size:clamp(1.125rem,1rem + .6vw,1.5rem);line-height:1.35;color:#fff
}
.sb-footer__entity strong{
  font-weight:700;
  background:var(--sb-gradient);-webkit-background-clip:text;background-clip:text;color:transparent
}
.sb-footer__entity .sb-btn{flex:0 0 auto}
/* ".sb-footer a" paints every footer link light grey and outranks .sb-btn,
   which left white type on the white button. Buttons keep their own colour. */
.sb-footer .sb-btn,
.sb-footer .sb-btn:hover{color:var(--btn-fg);text-decoration:none}
@media (max-width:600px){
  .sb-footer__entity{flex-direction:column;align-items:flex-start}
  .sb-footer__entity .sb-btn{width:100%;justify-content:center}
}


.sb-pagehero__grid{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:start
}
.sb-pagehero__copy{max-width:44rem}
.sb-pagehero__media{
  position:relative;align-self:end;display:flex;align-items:flex-end;
  margin-bottom:calc(var(--sb-pagehero-pb, 0px) * -1)
}
.sb-pagehero__media img,
.sb-pagehero__media picture{display:block;width:100%;height:auto}

.sb-pagehero__media img{
  aspect-ratio:4/5;object-fit:cover;object-position:center 22%
}
/* The picture drives the section height here, and the copy beside it is
   short — so a tall portrait leaves a large empty block next to it. Capped by
   height to close that gap. 522px read as too small and 905 as too long, so
   this sits between them and still scales with the viewport. */
.sb-pagehero__media.sb-pagehero__media--cutout img{
  aspect-ratio:auto;object-fit:contain;object-position:bottom;
  filter:none;background:transparent;vertical-align:bottom;
  width:auto;max-width:100%;height:auto;
  max-height:clamp(540px,78vh,780px);
  margin-inline:auto
}
.sb-pagehero__media--cutout picture{display:flex;justify-content:center;width:100%}
@media (max-width:900px){
  .sb-pagehero__grid{grid-template-columns:1fr;gap:var(--sb-space-l)}
  .sb-pagehero__copy{max-width:none}
  .sb-pagehero__media img{aspect-ratio:16/10;object-position:center 18%}
  /* Photograph first on a phone, as on every other page. It no longer sits
     on the hero's bottom edge, so it drops the pull into the padding. */
  .sb-pagehero__media{order:-1;margin-bottom:0}
}

/* --------------------------------------------------------------------------
   8. COMPONENTS
   -------------------------------------------------------------------------- */

/* ---- Gradient orb -------------------------------------------------------
   The brand's one piece of psychedelic art, built entirely in CSS so it costs
   nothing to load and scales to any viewport. Use at most one per section,
   and only where there is no photograph competing with it. */
.sb-orb{
  position:relative;width:100%;aspect-ratio:1;max-width:520px;margin-inline:auto;
  border-radius:50%;
  background:
    radial-gradient(circle at 28% 26%, #00D1FF 0%, transparent 46%),
    radial-gradient(circle at 74% 30%, #FF2E93 0%, transparent 50%),
    radial-gradient(circle at 62% 76%, #FF6B2C 0%, transparent 48%),
    radial-gradient(circle at 24% 74%, #7B3FF2 0%, transparent 52%),
    #7B3FF2;
  filter:saturate(1.15);
  isolation:isolate;
}
/* Soft halo. Kept as a separate layer so the sphere edge stays crisp. */
.sb-orb::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;z-index:-1;
  background:inherit;filter:blur(46px);opacity:.42
}
/* Inner shading turns the flat disc into a sphere. */
.sb-orb::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.42) 0%, transparent 38%),
    radial-gradient(circle at 70% 78%, rgba(11,11,12,.42) 0%, transparent 56%);
  mix-blend-mode:overlay
}
.sb-orb--sm{max-width:280px}
.sb-orb--lg{max-width:640px}

/* ---- Light ribbons ------------------------------------------------------
   The psychedelic flare from the brand board: glossy ribbons converging under
   the line of type and fanning out as they fall.

   The artwork is a rendered asset, not CSS. Stacked text-shadows can extrude a
   glyph downward but cannot curve, vary width along their length, or carry a
   specular core — which is most of what the reference actually is. The render
   is generated from code (scratchpad/make_ribbons.py, fixed seed, so it is
   reproducible) and ships as a 35KB WebP.

   It is composited with mix-blend-mode:screen, so the black of the artwork
   drops out entirely and the light simply adds to whatever is behind it. That
   means no seam between the image and the panel, and the same asset works on
   any dark ground without being re-exported. */
.sb-melt{
  position:relative;overflow:hidden;
  /* Transparent, not ink. Painting its own black laid an obvious rectangle
     over the section's animated background. The ribbons composite with screen
     blending, so they read correctly over whatever sits behind them —
     and `isolation` is dropped for the same reason: isolating the panel would
     cut that blending off from the section underneath. */
  background:transparent;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,3vw,2.5rem);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center
}
.sb-melt__kicker{
  position:relative;z-index:3;flex:none;align-self:center;
  display:inline-block;
  font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  background:#fff;color:var(--sb-ink);
  padding:.55em .95em;border-radius:2px;margin:0 0 1.25rem
}
.sb-melt__text{
  position:relative;z-index:3;flex:none;
  width:100%;max-width:15ch;margin:0;
  font-family:var(--sb-font-serif);font-weight:400;
  font-size:clamp(1.75rem,3.9vw,3rem);line-height:1.1;letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 0 .5em rgba(11,11,12,.9),0 0 1.6em rgba(123,63,242,.55)
}
/* A flex child rather than an absolutely positioned layer, so the fan always
   starts directly beneath the type however many lines the copy runs to. */

/* The shader canvas rides on top of the static ribbon artwork. Until (or
   unless) it initialises, the image is what shows — so no-JS, no-WebGL and
   reduced-motion all land on a finished panel rather than an empty box. */
/* Fade the still frame out once the live one is running, so they never
   double up. */

/* Lava-lamp fluid background. Sits behind the section's content, added with
   screen blending so it can only lighten — it never has to know what colour
   the section already is. Kept low-opacity: it is atmosphere, not an image
   the copy has to compete with. */
.sb-fluid__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
  mix-blend-mode:screen;opacity:0;
  transition:opacity 1.2s var(--sb-ease)
}
.has-fluid>.sb-fluid__canvas{opacity:.46}
/* Dial it back where type sits directly on top. */
.sb-cta-band.has-fluid>.sb-fluid__canvas{opacity:.32}
/* Heroes run darker than the rest of the site. The colour still moves behind
   the type, but the ground reads as black with light in it rather than as a
   purple wash. */
.sb-herod.has-fluid>.sb-fluid__canvas,
.sb-pagehero.has-fluid>.sb-fluid__canvas{opacity:.22}
.has-fluid{position:relative;overflow:clip;isolation:isolate}
/* Lift only the static content wrappers above the canvas. A blanket
   position:relative on every child overrides the absolute positioning of the
   hero portrait and the orbs, which drops them back into flow — the layout
   collapses and the photograph lands on the wrong side. */
.has-fluid>.sb-wrap,
.has-fluid>.sb-herod__inner,
.has-fluid>.sb-herod__media,
.has-fluid>.sb-melt{z-index:1}
.has-fluid>.sb-wrap,
.has-fluid>.sb-herod__inner,
.has-fluid>.sb-melt{position:relative}

/* Interior heroes carry the same dark treatment as the homepage, so the site
   does not change character when someone lands on Speaking or Coaching from
   search. The ink variant already supplies the light-on-dark text rules. */
.sb-pagehero--ink{position:relative;background:var(--sb-ink);color:#fff;border-bottom:0}
/* Ink washed back over the moving ground, heavier at the edges than the
   middle, so the section resolves to black where it meets its neighbours and
   keeps some colour where the type sits. Sits under the content: the wraps
   are already lifted to z-index 1. */
.sb-herod::before,
.sb-pagehero--ink::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,11,12,.55) 0%,
    rgba(11,11,12,.18) 38%,
    rgba(11,11,12,.30) 72%,
    rgba(11,11,12,.72) 100%)
}
.sb-pagehero--ink .sb-lede,
.sb-pagehero--ink .sb-small{color:rgba(255,255,255,.75)}
.sb-pagehero--ink .sb-serif{color:#fff}
.sb-pagehero--ink .sb-btn--ghost{--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
/* Breadcrumbs sit above a dark hero now, so they need the light treatment. */
.sb-crumbs{color:var(--sb-grey)}

/* ---- Cyberpunk surface texture ------------------------------------------
   Scanlines and grain, as one pseudo-element each so any dark surface can
   take them without extra markup. Both are pure CSS: no image, no request. */
.sb-scan{position:relative;isolation:isolate}
.sb-scan::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px,
      transparent 1px, transparent 3px);
  opacity:.5;mix-blend-mode:multiply
}
.sb-scan::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")
}

/* ---- Hover glitch on cards ----------------------------------------------
   The chromatic split only appears on hover, so a grid of cards is calm at
   rest and reacts to attention rather than demanding it. */
.sb-card,.sb-offer,.sb-tile{transition:box-shadow .25s var(--sb-ease),transform .3s var(--sb-ease),border-color .3s var(--sb-ease)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sb-card:hover,.sb-offer:hover{
    box-shadow:
      -3px 0 0 -1px rgba(0,209,255,.55),
       3px 0 0 -1px rgba(255,46,147,.55),
       0 18px 40px -28px rgba(11,11,12,.5)
  }
  .sb-tile:hover .sb-tile__title{
    text-shadow:-2px 0 rgba(0,209,255,.7), 2px 0 rgba(255,46,147,.7);
    animation:sb-tile-jitter .28s steps(2,end) 2
  }
  @keyframes sb-tile-jitter{
    0%,100%{transform:translateX(0)}
    50%{transform:translateX(-1.5px)}
  }
}

/* ---- Waterbed ripple ----------------------------------------------------
   Host for the ripple shader. The image stays in the markup as a real <img>
   — indexable, printable, and what shows if WebGL is unavailable — and the
   canvas is layered over it only once the shader is live. */
.sb-ripple{position:relative;overflow:hidden;isolation:isolate}
.sb-ripple__canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;opacity:0;
  transition:opacity .8s var(--sb-ease)
}
.sb-ripple.has-ripple .sb-ripple__canvas{opacity:1}
.sb-ripple.has-ripple>img{opacity:0}

/* ---- Gradient section rule ---------------------------------------------- */
.sb-section--edge{position:relative}
.sb-section--edge::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--sb-gradient);opacity:.85
}

/* ---- Cutout portrait on a gradient --------------------------------------
   The subject is a transparent PNG/WebP over a separate gradient, not one
   flattened composite — so the background can be restyled, or swapped for the
   animated one, without ever re-exporting the person. */
.sb-portrait{
  position:relative;overflow:hidden;isolation:isolate;
  aspect-ratio:4/5;display:flex;align-items:flex-end;justify-content:center
}
.sb-portrait__bg{
  position:absolute;inset:0;z-index:0;
  background-image:url("../img/gradient-portrait.jpg");
  background-image:image-set(url("../img/gradient-portrait.webp") type("image/webp"),
                             url("../img/gradient-portrait.jpg") type("image/jpeg"));
  background-size:cover;background-position:center;
  transform:scale(1.02)
}
/* Slow drift so the colour behind her is never quite static. */
@media (prefers-reduced-motion:no-preference){
  .sb-portrait__bg{animation:sb-portrait-drift 28s ease-in-out infinite alternate}
}
@keyframes sb-portrait-drift{
  from{transform:scale(1.02) translate3d(-1.5%,0,0)}
  to{transform:scale(1.10) translate3d(1.5%,-2%,0)}
}
.sb-portrait__img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  background:none;
  filter:drop-shadow(0 24px 60px rgba(11,11,12,.45))
}

/* ---- Gradient section ---------------------------------------------------
   The portrait gradient promoted to a full-bleed section background, with a
   dark veil over it so white type keeps its contrast.

   Paired with .sb-section--ink rather than replacing it: that class already
   carries every light-on-dark rule for eyebrows, ledes, quotes and cadence
   lists, so the gradient only has to supply the image and the veil. */
.sb-section--gradient{
  position:relative;overflow:hidden;isolation:isolate;
  /* Under the photograph while it loads, and beside it on a phone where the
     frame only covers the top of the section. */
  background:var(--sb-bone);color:var(--sb-ink)
}
/* The photograph is the stage's ground, not the whole section's: the
   credentials below it sit on the bone. */
.sb-section--gradient{
  /* One value for the space above the credentials and the space below them.
     They were set separately — the row's own top margin (56px) and the
     standard section padding underneath (128px) — so the band never looked
     centred between the photograph and the next section. */
  --sb-meet-band:clamp(2.5rem,5vw,4.5rem);
  padding-top:0;padding-bottom:var(--sb-meet-band)
}
.sb-meet__stage{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  padding-block:var(--sb-section-y);
  /* Anchored to the floor below, so a wide stage crops the wall above her
     rather than her feet — that is where the excess air was. The height floor
     stops the stage getting wider than about 2.2:1: the frame is 3:2 and her
     head is 34% of the way down it, and past 2.2:1 the crop would reach it. */
  min-height:46vw
}
.sb-meet__stage::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("../img/sutton-meet-bg.jpg");
  background-image:image-set(url("../img/sutton-meet-bg.webp") type("image/webp"),
                             url("../img/sutton-meet-bg.jpg") type("image/jpeg"));
  background-size:cover;background-position:left bottom;
  background-repeat:no-repeat
}
/* One centred row under the photograph and the CTA. Two classes deep so the
   generic two-column rule for .sb-intro__stats on tablets cannot win. */
.sb-section--gradient .sb-meet__stats{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.5rem,4vw,3rem);max-width:1120px;
  margin:var(--sb-meet-band) auto 0;padding-top:0;border-top:0;
  text-align:center
}
/* Two by two below the desktop row: four across a tablet squeezes the longest
   label to a word a line, and one column on a phone makes a tall list of
   what should read as a single band. */
@media (max-width:900px){
  .sb-section--gradient .sb-meet__stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}
}
/* No veil. The wall carries black type at 8.8:1 at its darkest point under
   the copy — measured on the frame itself, not guessed — so darkening it
   would cost the photograph brightness and buy nothing. */
/* Set against the wall, not against black: the light hues and the grey both
   fall under 3:1 here. */
.sb-section--gradient .sb-spectrum>*:nth-child(5n+1){--sb-hue:var(--sb-violet-deep)}
.sb-section--gradient .sb-spectrum>*:nth-child(5n+2){--sb-hue:var(--sb-magenta-deep)}
.sb-section--gradient .sb-spectrum>*:nth-child(5n+3){--sb-hue:var(--sb-orange-deep)}
.sb-section--gradient .sb-spectrum>*:nth-child(5n+4){--sb-hue:var(--sb-gold-deep)}
.sb-section--gradient .sb-spectrum>*:nth-child(5n+5){--sb-hue:var(--sb-cyan-deep)}
/* 70% ink is 4.4:1 on the warm end of this wall — just under. 78% clears it. */
.sb-section--gradient .sb-stat__label{color:rgba(11,11,12,.78)}
.sb-section--gradient .sb-intro__stats{border-top-color:rgba(11,11,12,.22)}

/* The photograph is a positioned pseudo-element, so it paints above in-flow
   text however low its z-index. The copy has to be lifted explicitly: it was
   only ever on top by accident, because the reveal animation's transform
   happened to give it a stacking context of its own — which anyone browsing
   with reduced motion never gets. */
.sb-section--gradient .sb-wrap{position:relative;z-index:1}

/* The copy takes the right half, over the part of the frame that is wall.
   Nothing stands on the section's bottom edge any more, so the section keeps
   its own padding on both sides. */
.sb-section--gradient .sb-split{
  grid-template-columns:1fr 1fr;gap:0;align-items:center
}
/* Named explicitly: the copy is the only child now, and a lone grid item
   fills the first track — which is the half she is sitting in. */
.sb-section--gradient .sb-split>*{
  grid-column:2;padding-left:clamp(2rem,5vw,5rem)
}
.sb-cutout{
  display:block;width:100%;height:auto;background:none;
  vertical-align:bottom;margin-bottom:-1px;
  filter:drop-shadow(0 22px 34px rgba(11,11,12,.42))
}
/* 1200, not the usual 900. Side by side needs the section to be wider than
   the frame is tall, and below about 1200 it stops being: the copy column
   narrows, the section grows, and cover starts scaling the picture by height
   — which blows her back up to full size and puts the type across her again.
   Stacked, the frame sits across the top at its own proportions (3:2, so two
   thirds of the width) and the section's own ground carries the copy. */
@media (max-width:1200px){
  .sb-meet__stage::before{background-size:100% auto;background-position:center top}
  .sb-meet__stage{
    display:block;min-height:0;
    padding-top:calc(66.7vw + var(--sb-space-l));padding-bottom:0
  }
  .sb-section--gradient .sb-split{grid-template-columns:1fr}
  .sb-section--gradient .sb-split>*{grid-column:1;padding-left:0}
}

/* ---- Chromatic flare ----------------------------------------------------
   The poster from the brand board: a line of type at the top of a black
   panel, with light dispersing downward and fanning out beneath it.

   Built entirely in CSS. A repeating conic gradient whose origin sits just
   above the panel throws rays that naturally splay as they fall — which is
   the effect — and costs nothing to load, scales to any viewport, and needs
   no image to be art-directed for each breakpoint. */
.sb-flare{
  position:relative;isolation:isolate;overflow:hidden;
  background:#050507;
  min-height:clamp(420px,52vw,620px);
  display:flex;flex-direction:column;align-items:center;
  padding:clamp(2.5rem,5vw,4.5rem) clamp(1.25rem,4vw,3rem) 0;
  text-align:center
}

/* The rays. Origin just above the top edge so they converge on the type. */
.sb-flare__rays{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  /* The origin sits well above the panel, not just off its top edge. The
     further away it is, the narrower the angular slice that reaches the box —
     which turns a sunburst into a column of light that fans as it falls. */
  background:repeating-conic-gradient(from 178.2deg at 50% -70%,
    #2B1BD6 0deg .16deg,
    #6B3BF0 .16deg .34deg,
    #B14BE0 .34deg .44deg,
    #FF2E93 .44deg .55deg,
    transparent .55deg .82deg,
    #00D1FF .82deg .93deg,
    #3B6BF5 .93deg 1.12deg,
    transparent 1.12deg 1.58deg);
  filter:blur(6px) saturate(1.4);
  /* One elliptical envelope anchored just under the words. Brightness peaks
     where the light "starts", then falls away downward and outward — which is
     what makes it a beam rather than a curtain filling the whole panel. */
  -webkit-mask-image:radial-gradient(ellipse 58% 104% at 50% 6%,
    #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.45) 62%, transparent 86%);
  mask-image:radial-gradient(ellipse 58% 104% at 50% 6%,
    #000 0%, rgba(0,0,0,.92) 30%, rgba(0,0,0,.45) 62%, transparent 86%);
  opacity:.95
}

/* A soft bloom directly under the type, where the light "starts". */
.sb-flare__bloom{
  position:absolute;z-index:1;pointer-events:none;
  top:clamp(3.5rem,7vw,6.5rem);left:50%;transform:translateX(-50%);
  width:min(60%,420px);height:120px;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.55) 0%,rgba(123,63,242,.35) 38%,transparent 72%);
  filter:blur(26px)
}

.sb-flare__text{
  position:relative;z-index:2;
  font-family:var(--sb-font-serif);color:#fff;
  font-size:clamp(1.75rem,4.4vw,3.25rem);line-height:1.05;
  margin:0;max-width:16ch;
  text-shadow:0 0 32px rgba(123,63,242,.55),0 0 12px rgba(0,0,0,.6)
}
.sb-flare__kicker{
  position:relative;z-index:2;
  font-size:.625rem;letter-spacing:.3em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.55);margin:0 0 1rem
}

@media (prefers-reduced-motion:no-preference){
  .sb-flare__rays{animation:sb-flare-drift 24s ease-in-out infinite alternate}
}
@keyframes sb-flare-drift{
  from{transform:rotate(-.6deg) scale(1.02)}
  to{transform:rotate(.6deg) scale(1.06)}
}

/* Concentric wave variant — the moiré/ripple language from the brand board. */
.sb-orb--wave{
  background:
    repeating-radial-gradient(circle at 50% 50%,
      #FF2E93 0 6px, #7B3FF2 6px 12px, #00D1FF 12px 18px, #0B0B0C 18px 26px);
  filter:saturate(1.1) contrast(1.05)
}
.sb-orb--wave::after{
  background:radial-gradient(circle at 50% 50%, transparent 0%, rgba(11,11,12,.85) 78%);
  mix-blend-mode:normal
}

@media (prefers-reduced-motion:no-preference){
  .sb-orb{animation:sb-drift 26s ease-in-out infinite alternate}
  @keyframes sb-drift{
    from{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
    to{transform:translate3d(0,-14px,0) rotate(8deg) scale(1.03)}
  }
}

/* Orb sitting behind content rather than beside it. Tight enough to read as
   an object — a wide, low-opacity blur just looks like fog on a dark ground. */
.sb-orb-bg{
  position:absolute;pointer-events:none;z-index:0;
  width:min(34vw,420px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 32%, #00D1FF 0%, transparent 48%),
    radial-gradient(circle at 70% 34%, #FF2E93 0%, transparent 52%),
    radial-gradient(circle at 58% 74%, #FF6B2C 0%, transparent 50%),
    #7B3FF2;
  filter:blur(52px);opacity:.55;
}
.sb-orb-bg--tr{top:-6%;right:-4%}
.sb-orb-bg--bl{bottom:-8%;left:-6%}

/* Lift the real content above the orb WITHOUT touching the orb itself —
   giving .sb-orb-bg position:relative here would drop it back into flow and
   push the whole section down by its own height. */
/* Every decorative layer has to be excluded by name here. Anything this
   rule catches gets position:relative and drops into flow — which is how a
   full-bleed canvas ends up adding 3000px to a section's height. */
.sb-section--ink>*:not(.sb-orb-bg):not(.sb-fluid__canvas),
.sb-cta-band>*:not(.sb-orb-bg):not(.sb-fluid__canvas),
.sb-pagehero--ink>*:not(.sb-orb-bg):not(.sb-fluid__canvas){position:relative;z-index:1}

/* Trust / client logo strip */
.sb-logos{padding-block:clamp(2rem,1.5rem + 2vw,3.25rem);border-block:1px solid var(--sb-line);background:var(--sb-paper)}
.sb-logos__label{text-align:center;font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sb-grey);margin:0 0 var(--sb-space-m)}
/* Flex, not grid: with grid the final row of an uneven set hangs to the left.
   Wrapping flex items centre every row, including the last. */
.sb-logos__grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(1.5rem,2.4vw,2.75rem) clamp(1.75rem,3vw,3.25rem);
  /* Narrower than the page wrapper on purpose: at full width 21 logos break
     into rows of 9/11/1, which reads as a leftover. Capped here they settle
     into three even rows. */
  max-width:1060px;margin-inline:auto
}
.sb-logos__grid img{
  flex:0 0 auto;
  /* Every logo file is a 160px-tall canvas with the mark optically centred
     inside it, so one fixed height here renders them all at equal weight —
     and fixing the height means no layout shift as they load. */
  height:80px;width:auto;max-width:100%;
  /* The global img{background} would otherwise show through every
     transparent logo as a grey tile. */
  background:none;
  /* Full original colour, at the client's direction. */
  opacity:.92;transition:opacity .3s var(--sb-ease),transform .3s var(--sb-ease)
}
.sb-logos__grid img:hover{opacity:1;transform:translateY(-2px)}
/* Three marks sit small inside their canvases — the Ritz-Carlton lion, the
   Government crest and the church wordmark fill 34-45% of the height where
   most logos fill 50-70% — so at the shared height they read a size smaller
   than the rest. Scaled rather than resized: the row keeps its height at every
   breakpoint, and the scale survives the hover lift. */
.sb-logos__grid img[src*="/ritz-carlton."],
.sb-logos__grid img[src*="/cayman-islands-government."],
.sb-logos__grid img[src*="/new-testament-church-of-god."]{transform:scale(1.35)}
.sb-logos__grid img[src*="/ritz-carlton."]:hover,
.sb-logos__grid img[src*="/cayman-islands-government."]:hover,
.sb-logos__grid img[src*="/new-testament-church-of-god."]:hover{transform:translateY(-2px) scale(1.35)}
.sb-logo-text{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-grey);text-align:center;font-weight:600}

/* ---- Featured: heading over a logo carousel ------------------------------ */
.sb-featured{background:var(--sb-paper);border-block:1px solid var(--sb-line)}
.sb-featured__title{
  font-size:var(--sb-step-3);line-height:1.08;
  max-width:30ch;margin:0 auto clamp(2.25rem,4vw,3.25rem);text-wrap:balance
}

.sb-logomarquee{
  /* One custom property sets both the gap between logos and the padding at
     each end of a set, at half the gap — so the join between the two copies
     is the same distance as every other pair and the loop has no seam. */
  --lm-gap:clamp(2.5rem,4vw,4.5rem)
}
.sb-logomarquee__viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)
}
.sb-logomarquee__track{display:flex;width:max-content}
.sb-logomarquee__set{
  display:flex;align-items:center;flex:none;
  gap:var(--lm-gap);padding:0 calc(var(--lm-gap) / 2);margin:0;list-style:none
}
.sb-logomarquee__set li{flex:none}
.sb-logomarquee__set img{display:block;height:64px;width:auto;max-width:none;background:none}
.sb-logomarquee__set .sb-logo-text{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .sb-logomarquee__track{animation:sb-marquee 60s linear infinite}
  .sb-logomarquee:hover .sb-logomarquee__track,
  .sb-logomarquee:focus-within .sb-logomarquee__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .sb-logomarquee__viewport{-webkit-mask-image:none;mask-image:none}
  .sb-logomarquee__track{width:auto}
  .sb-logomarquee__set{flex:1;flex-wrap:wrap;justify-content:center;row-gap:1.5rem}
  .sb-logomarquee__set[aria-hidden]{display:none}
}

/* ---- Video carousel ------------------------------------------------------ */
.sb-vids{
  --vid-w:clamp(190px,56vw,250px);--vid-gap:clamp(.75rem,1.4vw,1.25rem);
  min-width:0
}
.sb-vids__head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  margin-bottom:var(--sb-space-m)
}
.sb-vids__heading{min-width:0}
.sb-vids__title{
  font-size:1.0625rem;line-height:1.3;font-weight:600;letter-spacing:-.005em;
  margin:0;text-wrap:balance
}
.sb-vids__meta{
  margin:.45rem 0 0;font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:700;color:var(--sb-grey)
}
.sb-vids__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--vid-w);gap:var(--vid-gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
  margin:0;padding:0;list-style:none
}
/* Fit: on a wide screen the cards are sized so exactly --vid-n of them fill
   the row, which is what lets a four-clip and a two-clip row sit side by side
   at 2fr:1fr with cards of the same size. */
@media (min-width:1101px){
  .sb-vids--fit .sb-vids__track{
    grid-auto-columns:calc((100% - (var(--vid-n) - 1) * var(--vid-gap)) / var(--vid-n))
  }
}
.sb-vids__track::-webkit-scrollbar{display:none}
.sb-vids__track:focus-visible{outline:2px solid var(--sb-accent);outline-offset:6px}
.sb-vids__item{scroll-snap-align:start}

.sb-vids__card{
  position:relative;margin:0;aspect-ratio:9/16;overflow:hidden;isolation:isolate;
  border-radius:6px;background:#1a1a1c;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 24px 40px -28px rgba(0,0,0,.8)
}
.sb-vids__video{
  display:block;width:100%;height:100%;object-fit:cover;background:#1a1a1c;
  transition:transform .6s var(--sb-ease)
}
/* The playing clip gets the brand gradient as a ring — drawn with a masked
   pseudo-element, because border-image cannot follow a border-radius. */
.sb-vids__card::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  border-radius:inherit;padding:2px;background:var(--sb-gradient);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s var(--sb-ease)
}
.sb-vids__card.is-live::after{opacity:1}

.sb-vids__play{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  border:0;padding:0;cursor:pointer;color:#fff;
  background:linear-gradient(180deg,rgba(11,11,12,.05) 40%,rgba(11,11,12,.55) 100%)
}
/* The class sets display, so the hidden attribute needs its own rule. */
.sb-vids__play[hidden]{display:none}
.sb-vids__disc{
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .35s var(--sb-ease),border-color .35s var(--sb-ease),transform .35s var(--sb-ease)
}
.sb-vids__disc svg{width:22px;height:22px;margin-left:3px}
.sb-vids__play:focus-visible{outline:2px solid #fff;outline-offset:-8px}
@media (hover:hover){
  .sb-vids__card:hover .sb-vids__video{transform:scale(1.045)}
  .sb-vids__card.is-playing:hover .sb-vids__video{transform:none}
  .sb-vids__play:hover .sb-vids__disc,
  .sb-vids__play:focus-visible .sb-vids__disc{
    background:var(--sb-gradient);border-color:transparent;transform:scale(1.08)
  }
}
.sb-vids__len{
  position:absolute;top:.6rem;right:.6rem;z-index:2;pointer-events:none;
  font-size:.6875rem;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;
  color:#fff;background:rgba(11,11,12,.6);padding:.2rem .45rem;border-radius:3px
}
.sb-vids__card.is-playing .sb-vids__len{display:none}

.sb-vids__nav{display:flex;gap:.5rem;flex:none}
.sb-vids__nav[hidden]{display:none}
.sb-vids__btn{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--sb-ink);border-radius:50%;background:transparent;color:var(--sb-ink);cursor:pointer;
  transition:background-color .25s var(--sb-ease),color .25s var(--sb-ease),opacity .25s var(--sb-ease)
}
.sb-vids__btn:hover:not(:disabled){background:var(--sb-ink);color:#fff}
.sb-vids__btn:disabled{opacity:.28;cursor:default}
.sb-vids__btn:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}
.sb-vids__btn svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){
  .sb-vids__track{scroll-behavior:auto}
  .sb-vids__video,.sb-vids__disc{transition:none}
  .sb-vids__card:hover .sb-vids__video{transform:none}
}

/* ---- Headline beside its body, over a rule ------------------------------- */
.sb-headsplit{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(2rem,5vw,5rem);align-items:end;
  padding-bottom:clamp(2rem,4vw,3rem);border-bottom:1px solid var(--sb-line)
}
.sb-section--ink .sb-headsplit{border-bottom-color:var(--sb-line-dark)}
.sb-headsplit__title{margin:0}
.sb-headsplit__body{margin:0;max-width:62ch}
.sb-mfcards{margin-top:clamp(2.5rem,5vw,4rem)}
@media (max-width:900px){
  .sb-headsplit{grid-template-columns:1fr;gap:var(--sb-space-m)}
}

/* ---- Bring Sutton to speak ----------------------------------------------- */
/* One section, one ground. The pitch used to sit on white above a dark band
   of clips, and the change of ground read as two sections when it is one
   argument — here is what she does, here it is. The glow sits low, behind
   the clips. On the speaking page the band stands alone and carries the same
   ground itself. */
.sb-speakfeat{
  color:#fff;
  background:
    radial-gradient(70% 55% at 0% 100%,rgba(123,63,242,.20) 0%,transparent 60%),
    radial-gradient(60% 50% at 100% 100%,rgba(255,46,147,.14) 0%,transparent 60%),
    var(--sb-ink)
}
.sb-speakfeat .sb-headsplit{border-bottom:0;padding-bottom:0}
.sb-speakfeat__stage{position:relative;isolation:isolate;color:#fff}
.sb-speakfeat .sb-speakfeat__stage{margin-top:clamp(2.5rem,5vw,4rem)}
.sb-speakfeat__stage .sb-vids__meta{color:var(--sb-grey-light)}
.sb-speakfeat__stage .sb-vids__btn{border-color:rgba(255,255,255,.4);color:#fff}
.sb-speakfeat__stage .sb-vids__btn:hover:not(:disabled){background:#fff;color:var(--sb-ink)}

.sb-speakfeat__shows{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
/* The divider padding equals the card gap on both sides of the rule. That is
   what keeps the cards identical in size across the two rows: with 2fr:1fr
   columns, four cards and two, the widths only come out equal when the
   padding matches the gap. */
.sb-speakfeat__shows>.sb-vids:first-child{padding-right:var(--vid-gap)}
.sb-speakfeat__shows>.sb-vids+.sb-vids{
  padding-left:var(--vid-gap);border-left:1px solid rgba(255,255,255,.12)
}
/* Subgrid lines the two headers up on one row, so titles of different
   lengths still leave both rows of cards starting at the same height. */
@supports (grid-template-rows:subgrid){
  .sb-speakfeat__shows{grid-template-rows:auto auto}
  .sb-speakfeat__shows>.sb-vids{display:grid;grid-template-rows:subgrid;grid-row:span 2}
  .sb-speakfeat__shows .sb-vids__head{align-self:end}
}
.sb-speakfeat__cta{display:flex;justify-content:center;margin-top:clamp(2.5rem,5vw,3.5rem)}

/* Homepage: the pitch centred over the clips, and the two rows stacked and
   centred. A row's track shrinks to its own cards and centres itself; when
   the cards no longer fit it takes the full width and scrolls instead —
   max-content width with a 100% cap, rather than justify-content:center,
   which would push the first cards out of reach once the row overflows. */
.sb-speakfeat{
  /* The card size and gap live on the section, so the pitch above can be
     exactly as wide as the four-clip row below it — the same arithmetic, not
     a number that happens to match at one screen width. */
  --sf-card:clamp(190px,20vw,260px);
  --sf-gap:clamp(.75rem,1.4vw,1.25rem)
}
.sb-speakfeat__head{
  max-width:min(100%,calc(4 * var(--sf-card) + 3 * var(--sf-gap)));
  margin-inline:auto;text-align:center
}
.sb-speakfeat__head .sb-h2{margin:0 auto;max-width:22ch;text-wrap:balance}
.sb-speakfeat__head .sb-lede{margin:1.5rem auto 0;max-width:none}
.sb-speakfeat__rows{display:grid;row-gap:clamp(3rem,6vw,4.5rem)}
.sb-speakfeat__rows .sb-vids{--vid-w:var(--sf-card);--vid-gap:var(--sf-gap)}
.sb-speakfeat__rows .sb-vids__head{flex-direction:column;align-items:center;text-align:center;gap:.9rem}
.sb-speakfeat__rows .sb-vids__title{max-width:48ch}
.sb-speakfeat__rows .sb-vids__track{width:max-content;max-width:100%;margin-inline:auto}
@media (max-width:700px){
  .sb-speakfeat__rows .sb-vids{--vid-w:clamp(190px,56vw,250px)}
}

@media (max-width:1100px){
  .sb-speakfeat__shows{grid-template-columns:1fr;row-gap:clamp(2.5rem,6vw,3.5rem)}
  .sb-speakfeat__shows>.sb-vids:first-child{padding-right:0}
  .sb-speakfeat__shows>.sb-vids+.sb-vids{
    padding-left:0;border-left:0;
    padding-top:clamp(2.5rem,6vw,3.5rem);border-top:1px solid rgba(255,255,255,.12)
  }
  @supports (grid-template-rows:subgrid){
    .sb-speakfeat__shows{grid-template-rows:none}
    .sb-speakfeat__shows>.sb-vids{display:block;grid-row:auto}
  }
}

/* ---- The book ------------------------------------------------------------ */
.sb-bookfeat__grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(2rem,6vw,6rem);align-items:center
}
.sb-bookfeat__cover{display:block;justify-self:center;width:min(100%,340px)}
.sb-bookfeat__cover picture,.sb-bookfeat__cover img{display:block;width:100%;height:auto;background:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .sb-bookfeat__cover{transition:transform .5s var(--sb-ease)}
  .sb-bookfeat__cover:hover{transform:translateY(-6px) rotate(-1.2deg)}
}
.sb-bookfeat__sub{
  font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.2;
  color:var(--sb-ink-70);margin:.75rem 0 0
}
.sb-bookfeat__copy .sb-lede{margin-top:1.5rem}
.sb-bookfeat__cta{margin-top:2rem}
@media (max-width:900px){
  .sb-bookfeat__grid{grid-template-columns:1fr}
  .sb-bookfeat__cover{width:min(62%,250px)}
}

/* ---- Private Clarity & Capacity Sessions --------------------------------- */
.sb-clarity__grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,6vw,6rem);align-items:start
}
.sb-clarity__copy .sb-lede{margin-top:1.5rem}
/* 72% white on ink is 12.3:1 — quieter than the overview, still well clear. */
.sb-clarity__uses{
  font-size:var(--sb-step-0);line-height:1.7;color:rgba(255,255,255,.72);
  margin:1.25rem 0 0;max-width:60ch
}
.sb-clarity__cta{margin-top:2.25rem}
.sb-clarity__details{
  margin:0;padding:clamp(1.5rem,3vw,2.25rem);
  background:rgba(255,255,255,.04);
  border-top:3px solid var(--sb-accent)
}
.sb-clarity__row{padding-block:1.1rem;border-bottom:1px solid var(--sb-line-dark)}
.sb-clarity__row:first-child{padding-top:0}
.sb-clarity__row:last-child{padding-bottom:0;border-bottom:0}
.sb-clarity__row dt{
  font-size:.625rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--sb-grey-light);margin:0 0 .45rem
}
.sb-clarity__row dd{margin:0;font-size:var(--sb-step-1);line-height:1.4;color:#fff}
@media (max-width:900px){
  .sb-clarity__grid{grid-template-columns:1fr}
}

/* Video / speaker reel */
.sb-reel{position:relative;background:var(--sb-ink);aspect-ratio:16/9;overflow:hidden;width:100%;border:0;padding:0;cursor:pointer;display:block}
.sb-reel img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .4s var(--sb-ease),transform .6s var(--sb-ease)}
.sb-reel:hover img{opacity:.62;transform:scale(1.02)}
.sb-reel__play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;color:#fff}
.sb-reel__play svg{width:68px;height:68px;position:relative;z-index:1}
/* Gradient halo behind the play control — the single most important click on
   the page, so it gets the brand's colour. */
.sb-reel__play::before{
  content:"";position:absolute;top:50%;left:50%;
  width:180px;aspect-ratio:1;transform:translate(-50%,-58%);
  border-radius:50%;background:var(--sb-gradient-soft);
  filter:blur(44px);opacity:.6;
  transition:opacity .4s var(--sb-ease),width .4s var(--sb-ease)
}
.sb-reel:hover .sb-reel__play::before{opacity:.85;width:230px}
.sb-reel__play span{font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600}
.sb-reel iframe{position:absolute;inset:0;width:100%;height:100%}

/* Cards */
.sb-card{background:var(--sb-paper);border:1px solid var(--sb-line);padding:clamp(1.5rem,2.5vw,2.25rem);display:flex;flex-direction:column;gap:var(--sb-space-s);height:100%;position:relative;transition:border-color .3s var(--sb-ease),transform .3s var(--sb-ease),box-shadow .3s var(--sb-ease)}
.sb-card:hover{border-color:var(--sb-ink);transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(11,11,12,.45)}
.sb-card__num{
  font-size:.6875rem;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--sb-hue,var(--sb-grey-light))
}
.sb-card__title{font-size:var(--sb-step-1);text-transform:uppercase;letter-spacing:.02em;line-height:1.2;margin:0;font-weight:600}
.sb-card__body{color:var(--sb-ink-70);font-size:var(--sb-step--1);line-height:1.6;margin:0;flex:1}
.sb-card__cta{margin-top:auto;padding-top:var(--sb-space-s)}

/* A card that sizes to its content and centres against a taller neighbour,
   instead of stretching to the row and opening a gap in its own middle. */
.sb-card--fit{height:auto;align-self:center}
.sb-card--fit .sb-card__body{flex:none}

/* About, "Where do you want to start?". Title, body and CTA share rows across
   the three cards, so a one-line title no longer starts its body 24px above
   the others; and the cards are only as tall as their longest content, with
   tighter padding. */
.sb-startgrid{grid-template-rows:auto auto auto;row-gap:0}
.sb-startgrid>.sb-card{
  display:grid;grid-template-rows:subgrid;grid-row:span 3;
  row-gap:var(--sb-space-s);height:auto;
  padding:clamp(1.25rem,1.8vw,1.5rem)
}
.sb-startgrid .sb-card__body{flex:none;font-size:var(--sb-step-0)}
/* These were light cards on the black section, and the section's rules set
   their titles and ghost buttons white: the headline and the CTA of every
   card were white on white, leaving a lone grey paragraph floating in an
   empty box. Dark cards, as on the homepage, with a hairline so each one still
   reads as a card against the black. */
.sb-startgrid>.sb-card--ink{border-color:rgba(255,255,255,.14)}
.sb-startgrid .sb-card__cta{margin-top:0;padding-top:0;align-self:end}
@supports not (grid-template-rows:subgrid){
  .sb-startgrid .sb-card__title{min-height:2.4em}
}
@media (max-width:900px){
  .sb-startgrid{grid-template-rows:none;row-gap:var(--sb-space-l)}
  .sb-startgrid>.sb-card{display:flex;grid-row:auto}
}

/* Speaking topics, all open: title beside body, one hairline between rows. */
.sb-topiclist{border-top:1px solid var(--sb-line)}
.sb-topiclist__item{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:clamp(1rem,4vw,4rem);align-items:start;
  padding-block:clamp(1.5rem,3vw,2.25rem);border-bottom:1px solid var(--sb-line)
}
.sb-topiclist__title{
  margin:0;font-size:var(--sb-step-1);line-height:1.25;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em
}
.sb-topiclist__body{margin:0;color:var(--sb-ink-70);line-height:1.7;max-width:64ch}
@media (max-width:900px){
  .sb-topiclist__item{grid-template-columns:1fr;gap:.75rem}
}
.sb-card--ink{background:var(--sb-ink);color:#fff;border-color:var(--sb-ink)}
.sb-card--ink .sb-card__body{color:rgba(255,255,255,.72)}
/* One solid colour per card rather than the full gradient on each — three
   cards side by side each wearing the same gradient reads as noise. */
.sb-card--accent{border-top:3px solid var(--sb-hue,var(--sb-accent))}
.sb-card--accent:hover{border-top-color:var(--sb-hue,var(--sb-accent))}

/* Offer cards. A three-column comparison the eye can scan: name, format,
   price, who it is for, one action — always in that order, so the columns
   line up across cards and can be compared row by row. */
.sb-offer{
  display:flex;flex-direction:column;gap:.85rem;height:100%;
  background:var(--sb-paper);border:1px solid var(--sb-line);
  border-top:3px solid var(--sb-hue,var(--sb-accent));
  padding:clamp(1.5rem,2.5vw,2.25rem);
  transition:border-color .3s var(--sb-ease),transform .3s var(--sb-ease),box-shadow .3s var(--sb-ease)
}
.sb-offer:hover{transform:translateY(-3px);box-shadow:0 18px 40px -28px rgba(11,11,12,.45)}
.sb-offer__name{
  font-size:var(--sb-step-2);text-transform:uppercase;letter-spacing:.01em;
  line-height:1.15;margin:0;font-weight:600
}
.sb-offer__format{
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  color:var(--sb-grey);margin:0
}
.sb-offer__price{
  font-size:var(--sb-step-1);font-weight:600;letter-spacing:-.01em;margin:0;
  color:var(--sb-hue,var(--sb-ink))
}
.sb-offer__best{font-size:var(--sb-step--1);line-height:1.6;color:var(--sb-ink-70);margin:0;flex:1}
.sb-offer__label{
  display:block;font-size:.5625rem;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--sb-grey-light);margin-bottom:.35rem
}
.sb-offer__cta{margin-top:auto;padding-top:var(--sb-space-s)}

/* The book offer carries its own cover, set at the same angle as the one in
   the hero so the object reads as the same object in both places. */
.sb-offer__cover{margin-top:auto;padding-top:var(--sb-space-s)}
.sb-offer__cover > img,
.sb-offer__cover > picture,
.sb-offer__cover .sb-book__placeholder{
  display:block;width:min(58%,150px);height:auto;
  transition:transform .55s var(--sb-ease)
}
/* Child combinators above, so the width lands on the <picture> wrapper once
   and not again on the <img> inside it — nested, the percentage would resolve
   against the wrapper and shrink the cover to 58% of 58%. */
.sb-offer__cover picture > img{width:100%}
.sb-offer__cover .sb-book__placeholder{
  border-radius:2px;box-shadow:16px 22px 34px rgba(11,11,12,.34)
}
.sb-offer:hover .sb-offer__cover img{transform:scale(1.05)}
/* With a cover in the card, the CTA no longer needs to absorb the slack. */
.sb-offer__cover ~ .sb-offer__cta{margin-top:var(--sb-space-m)}

/* Topic tiles */
.sb-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--sb-line);border:1px solid var(--sb-line)}
.sb-tile{
  background:var(--sb-paper);padding:clamp(1.5rem,2.4vw,2.25rem);
  display:flex;flex-direction:column;gap:.75rem;position:relative;
  transition:background .3s var(--sb-ease),color .3s var(--sb-ease)
}
/* Each tile carries its own colour from the spectrum, as a rule that draws
   itself on hover — the colour arrives as a reward for attention rather than
   sitting there as decoration. */
.sb-tile::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--sb-hue,var(--sb-accent));
  transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--sb-ease)
}
.sb-tile:hover::before{transform:scaleX(1)}
.sb-tile:hover{background:var(--sb-ink);color:#fff}
.sb-tile:hover .sb-tile__body{color:rgba(255,255,255,.72)}
.sb-tile__num{
  font-size:.75rem;letter-spacing:.2em;font-weight:700;
  color:var(--sb-hue,var(--sb-grey-light))
}
.sb-tile__title{font-size:.9375rem;text-transform:uppercase;letter-spacing:.04em;font-weight:600;line-height:1.25;margin:0}
.sb-tile__body{font-size:var(--sb-step--1);color:var(--sb-ink-70);line-height:1.6;margin:0}

/* Framework — Connect Up / In / Now */
.sb-framework{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--sb-line-dark)}
.sb-framework__item{background:var(--sb-ink);padding:clamp(1.75rem,3vw,3rem);position:relative;overflow:hidden}
/* Connect Up / In / Now each take one colour and keep it — three steps of a
   practice read as three things, not one gradient smeared across all of them. */
.sb-framework__item:nth-child(1){--sb-hue:var(--sb-cyan)}
.sb-framework__item:nth-child(2){--sb-hue:var(--sb-magenta)}
.sb-framework__item:nth-child(3){--sb-hue:var(--sb-orange)}
.sb-framework__item::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--sb-hue)
}
/* A wash of that colour bleeding in from the corner, so the panel is not a
   flat black box with a stripe on top. */
.sb-framework__item::after{
  content:"";position:absolute;bottom:-40%;right:-25%;
  width:70%;aspect-ratio:1;border-radius:50%;
  background:var(--sb-hue);filter:blur(60px);opacity:.22;pointer-events:none
}
.sb-framework__label{
  font-family:var(--sb-font-serif);font-size:var(--sb-step-3);line-height:1;
  margin:0 0 .75rem;color:var(--sb-hue);position:relative;z-index:1
}
.sb-framework__body{color:rgba(255,255,255,.74);font-size:var(--sb-step--1);line-height:1.6;margin:0;position:relative;z-index:1}

/* Testimonials */
.sb-quote{
  border-top:2px solid var(--sb-hue,var(--sb-line));
  padding-top:var(--sb-space-m);display:flex;flex-direction:column;
  gap:var(--sb-space-s);height:100%
}
.sb-quote__text{font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.28;margin:0;flex:1}
.sb-quote__by{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-grey);font-weight:600;margin:0}
.sb-section--ink .sb-quote{border-color:var(--sb-line-dark)}
.sb-section--ink .sb-quote__by{color:var(--sb-grey-light)}
.sb-quote-feature{padding:clamp(2rem,4vw,4rem);border-left:3px solid transparent;border-image:var(--sb-gradient) 1;border-image-width:0 0 0 3px}
.sb-quote-feature p{font-family:var(--sb-font-serif);font-size:var(--sb-step-3);line-height:1.2;margin:0 0 var(--sb-space-m)}

/* Accordion — long copy folded away, per the design brief */
.sb-accordion{border-top:1px solid var(--sb-line)}
.sb-accordion__item{border-bottom:1px solid var(--sb-line)}
.sb-accordion__btn{width:100%;background:none;border:0;padding:1.4rem 3rem 1.4rem 0;cursor:pointer;text-align:left;display:block;position:relative;font:600 var(--sb-step-1)/1.25 var(--sb-font-sans);text-transform:uppercase;letter-spacing:.01em;color:inherit}
.sb-accordion__btn::after{content:"";position:absolute;right:.35rem;top:50%;width:13px;height:13px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--sb-ease)}
.sb-accordion__btn[aria-expanded="true"]::after{transform:translateY(-30%) rotate(-135deg)}
.sb-accordion__btn small{display:block;font:400 .75rem/1 var(--sb-font-sans);letter-spacing:.16em;color:var(--sb-grey);margin-top:.5rem;text-transform:uppercase}
.sb-accordion__panel{overflow:hidden;height:0;transition:height .35s var(--sb-ease)}
.sb-accordion__panel-inner{padding:0 0 1.75rem;max-width:70ch;color:var(--sb-ink-70)}
.sb-accordion__panel-inner ul{padding-left:1.1rem;margin:0 0 var(--sb-space-m)}
.sb-accordion__panel-inner li{margin-bottom:.4rem}
.sb-accordion__panel-inner strong{color:var(--sb-ink)}

/* Book feature */
.sb-book{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sb-book__cover img{width:100%}
.sb-book__placeholder{aspect-ratio:2/3;background:var(--sb-paper);border:1px solid var(--sb-line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:2rem;text-align:center;box-shadow:0 40px 80px -50px rgba(11,11,12,.5)}
.sb-book__placeholder strong{font-size:var(--sb-step-3);text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.sb-book__placeholder span{font-family:var(--sb-font-serif);font-size:var(--sb-step-1);color:var(--sb-grey)}

.sb-price{font-size:var(--sb-step-3);font-weight:600;letter-spacing:-.02em;line-height:1;display:block}
.sb-price small{font-size:.6875rem;letter-spacing:.18em;color:var(--sb-grey);text-transform:uppercase;font-weight:600;display:block;margin-top:.5rem}

/* Media grid */
.sb-media-card{display:flex;flex-direction:column;gap:.9rem;text-decoration:none}
.sb-media-card__thumb{aspect-ratio:16/9;overflow:hidden;background:var(--sb-mist);position:relative}
.sb-media-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--sb-ease)}
.sb-media-card:hover .sb-media-card__thumb img{transform:scale(1.04)}
.sb-media-card__meta{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sb-grey);font-weight:600}
.sb-media-card__title{font-size:var(--sb-step-1);line-height:1.25;margin:0;font-weight:500;letter-spacing:-.01em}

/* Visually hidden, still read aloud. */
.screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0
}

/* ---- Centred page hero (no photograph) ---------------------------------------
   Copy centred and the hero only as tall as its text. */
.sb-pagehero--center{padding-block:clamp(2.5rem,2rem + 3vw,4.5rem)}
.sb-pagehero__center{max-width:880px;margin-inline:auto;text-align:center}
.sb-pagehero__phonephoto{display:none}
@media (max-width:900px){
  .sb-pagehero__phonephoto{display:block;margin-bottom:var(--sb-space-l)}
  .sb-pagehero__phonephoto picture,
  .sb-pagehero__phonephoto img{display:block;width:100%}
  .sb-pagehero__phonephoto img{aspect-ratio:16/10;object-fit:cover;object-position:center 22%}
}
.sb-pagehero__center .sb-eyebrow{margin-inline:auto}
.sb-pagehero__center .sb-lede{margin-inline:auto;max-width:62ch}
.sb-pagehero__center .sb-pagehero__cta{justify-content:center;margin-top:2rem}

/* ---- Media library -------------------------------------------------------------
   Jump links under the hero CTA, then one section per type: a heading with the
   count, and a grid of cards — the piece's image (16:9, a play mark on video),
   outlet, and headline — with a solid top line in the spectrum hue. */
.sb-medialib__jump{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:var(--sb-space-l)}
.sb-medialib__jump a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .9rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);color:#fff;text-decoration:none;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase
}
.sb-medialib__jump a span{
  display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .35rem;border-radius:999px;
  background:rgba(255,255,255,.14);font-size:.6875rem;letter-spacing:0
}
.sb-medialib__jump a:hover{background:var(--sb-gradient);border-color:transparent}

.sb-medialib__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:clamp(1.75rem,3vw,2.5rem)}
.sb-medialib__head .sb-h2{margin:0}
.sb-medialib__count{margin:0;font-size:.75rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-ink-70)}
.sb-medialib__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.8vw,1.5rem)
}
.sb-mcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--sb-line);border-top:3px solid var(--sb-hue,var(--sb-accent))
}
.sb-mcard__thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--sb-mist)}
.sb-mcard__thumb picture,
.sb-mcard__thumb img{display:block;width:100%;height:100%}
.sb-mcard__thumb img{object-fit:cover;transition:transform .5s var(--sb-ease)}
.sb-mcard:hover .sb-mcard__thumb img{transform:scale(1.04)}
.sb-mcard__play{
  position:absolute;left:.75rem;bottom:.75rem;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:rgba(11,11,12,.82);color:#fff
}
.sb-mcard__body{display:flex;flex-direction:column;gap:.45rem;padding:1rem 1.1rem 1.25rem}
.sb-mcard__outlet{margin:0;font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-ink-70)}
.sb-mcard__title{margin:0;font-family:var(--sb-font-sans);font-size:1.0625rem;font-weight:600;line-height:1.3;letter-spacing:-.005em;text-transform:none}
.sb-mcard__title a{color:var(--sb-ink);text-decoration:none}
.sb-mcard__title a:hover{text-decoration:underline;text-underline-offset:.18em}
.sb-mcard__title a:focus-visible{outline:2px solid var(--sb-accent);outline-offset:3px}
@media (max-width:1100px){.sb-medialib__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.sb-medialib__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.sb-medialib__grid{grid-template-columns:1fr}}

/* Who-she-is intro: a compact credibility band, deliberately not a full
   section. It answers "who is talking?" before the page asks the visitor to
   recognise themselves in the problem. */
.sb-intro{display:grid;grid-template-columns:200px 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.sb-intro__media img{width:100%;aspect-ratio:1;object-fit:cover;object-position:center 22%}
.sb-intro__lead{
  font-size:var(--sb-step-2);line-height:1.3;letter-spacing:-.015em;
  font-weight:500;margin:0 0 var(--sb-space-s);text-wrap:balance
}
.sb-intro__stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1rem,2.5vw,2rem);
  margin-top:clamp(2rem,4vw,3.5rem);padding-top:clamp(1.5rem,3vw,2.25rem);
  border-top:1px solid var(--sb-line)
}
.sb-intro__stats .sb-stat__num{
  font-size:var(--sb-step-3);letter-spacing:-.03em;
  color:var(--sb-hue,var(--sb-ink))
}
.sb-intro__stats .sb-stat__label{font-size:.625rem;letter-spacing:.14em;line-height:1.4;display:block}

/* Stats */
.sb-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sb-space-l)}
.sb-stat__num{font-size:var(--sb-step-4);font-weight:600;letter-spacing:-.04em;line-height:1;display:block;margin-bottom:.4rem}
.sb-stat__label{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--sb-grey);font-weight:600}
.sb-section--ink .sb-stat__label{color:var(--sb-grey-light)}

/* CTA band */
.sb-cta-band{background:var(--sb-ink);color:#fff;padding-block:clamp(3rem,2rem + 5vw,6rem);text-align:center;position:relative;overflow:hidden}
.sb-cta-band::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--sb-gradient)}
/* Photographic ground for the closing band.
   The scrim is 60% ink, which is what the arithmetic asks for: against the
   95th-percentile colour of the image's central band — where the copy sits —
   that puts the heading at 6.05:1 and the lede at 4.92:1, both clear of the
   4.5:1 floor. A lighter scrim fails the lede; a heavier one buries the
   photograph for no gain. */
.sb-cta-band--photo{
  background-size:cover;background-position:center 62%;background-repeat:no-repeat
}
.sb-cta-band--photo::after{
  content:"";position:absolute;inset:0;
  background:rgba(11,11,12,.60);pointer-events:none
}
.sb-cta-band--photo>*{position:relative;z-index:1}
@media (max-width:700px){
  /* Portrait viewports crop a 2.8:1 panorama to a sliver, so the ground gets
     darker to keep the type legible over whatever slice survives. */
  .sb-cta-band--photo::after{background:rgba(11,11,12,.68)}
}

.sb-cta-band__title{font-size:var(--sb-step-4);text-transform:uppercase;letter-spacing:-.025em;line-height:1;margin:0 0 var(--sb-space-s)}
.sb-cta-band__sub{font-family:var(--sb-font-serif);font-size:var(--sb-step-2);color:rgba(255,255,255,.8);margin:0 0 var(--sb-space-l)}
.sb-cta-band .sb-cluster{justify-content:center}

/* Answer block — AEO/GEO extractable definition (40-60 words) */
.sb-answer{background:var(--sb-bone);border-left:3px solid transparent;border-image:var(--sb-gradient) 1;border-image-width:0 0 0 3px;padding:clamp(1.5rem,3vw,2.5rem)}
.sb-answer__q{font-size:var(--sb-step-1);font-weight:600;margin:0 0 .75rem;letter-spacing:-.01em}
.sb-answer__a{margin:0;color:var(--sb-ink-70);max-width:70ch}
/* On a tinted ground the bone fill turns muddy — go white so the block still
   reads as a card lifted off the page. */
.sb-section--violet .sb-answer,
.sb-section--magenta .sb-answer,
.sb-section--coral .sb-answer,
.sb-section--cyan .sb-answer{background:var(--sb-paper)}
.sb-section--ink .sb-answer{background:rgba(255,255,255,.05)}
.sb-section--ink .sb-answer__a{color:rgba(255,255,255,.75)}

/* Breadcrumbs */
.sb-crumbs{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-grey);padding-block:1rem}
.sb-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0}
.sb-crumbs li+li::before{content:"/";margin-right:.5rem;color:var(--sb-line)}
.sb-crumbs a{text-decoration:none}
.sb-crumbs a:hover{text-decoration:underline}

/* Article body */
.sb-prose{max-width:var(--sb-wrap-text);font-size:var(--sb-step-1);line-height:1.72}
.sb-prose h2{font-size:var(--sb-step-3);text-transform:uppercase;letter-spacing:-.02em;margin-top:var(--sb-space-xl)}
.sb-prose h3{font-size:var(--sb-step-2);margin-top:var(--sb-space-l)}
.sb-prose ul,.sb-prose ol{padding-left:1.25rem;margin-bottom:var(--sb-space-m)}
.sb-prose li{margin-bottom:.5rem}
.sb-prose img{margin-block:var(--sb-space-l)}
.sb-prose blockquote{border-left:3px solid var(--sb-ink);padding-left:var(--sb-space-m);font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.3;margin-block:var(--sb-space-l)}

/* Pagination */
.sb-pagination{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:var(--sb-space-xl)}
.sb-pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:1px solid var(--sb-line);text-decoration:none;font-size:.8125rem;font-weight:600}
.sb-pagination .page-numbers.current,.sb-pagination .page-numbers:hover{background:var(--sb-ink);color:#fff;border-color:var(--sb-ink)}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
.sb-form{display:grid;gap:var(--sb-space-m)}
.sb-form__row{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sb-space-m)}
.sb-field{display:flex;flex-direction:column;gap:.5rem}
.sb-field label{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--sb-grey)}
.sb-field .req{color:var(--sb-accent-warm)}
.sb-field input,.sb-field select,.sb-field textarea{
  font:400 var(--sb-step-0)/1.5 var(--sb-font-sans);color:var(--sb-ink);
  background:var(--sb-paper);border:1px solid var(--sb-line);border-radius:var(--sb-radius);
  padding:.9rem 1rem;width:100%;transition:border-color .25s var(--sb-ease),box-shadow .25s var(--sb-ease)
}
.sb-field textarea{min-height:130px;resize:vertical}
.sb-field input:focus,.sb-field select:focus,.sb-field textarea:focus{outline:0;border-color:var(--sb-ink);box-shadow:0 0 0 3px rgba(91,61,245,.12)}
.sb-field__hint{font-size:.75rem;color:var(--sb-grey)}
.sb-field--inline{display:grid;grid-template-columns:1fr auto;gap:.5rem;align-items:stretch}
.sb-hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

.sb-consent{display:flex;gap:.65rem;align-items:flex-start;font-size:.75rem;color:var(--sb-grey);line-height:1.5}
.sb-consent input{width:16px;height:16px;margin-top:.2rem;flex:none;accent-color:var(--sb-accent)}

.sb-notice{padding:1rem 1.25rem;border-left:3px solid var(--sb-accent);background:var(--sb-bone);font-size:var(--sb-step--1)}
.sb-notice--error{border-color:var(--sb-accent-warm)}

.sb-optin{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.sb-footer{background:var(--sb-ink);color:#fff;padding-block:clamp(3rem,2rem + 4vw,5.5rem) 2rem}
.sb-footer a{color:rgba(255,255,255,.78);text-decoration:none}
.sb-footer a:hover{color:#fff;text-decoration:underline}
.sb-footer__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,4vw,4rem);padding-bottom:var(--sb-space-xl)}
.sb-footer__name{font-size:var(--sb-step-2);text-transform:uppercase;letter-spacing:.06em;margin:0 0 .5rem;font-weight:600}
.sb-footer__role{font-size:.625rem;letter-spacing:.28em;text-transform:uppercase;color:var(--sb-grey-light);margin:0 0 var(--sb-space-m)}
.sb-footer__tag{font-family:var(--sb-font-serif);font-size:var(--sb-step-2);line-height:1.15;margin:0 0 var(--sb-space-s)}
/* Column heading vs. link: deliberately different on four axes at once —
   size, tracking, brightness and a divider — so the label never reads as
   just another item in the list. */
.sb-footer__heading{
  font-size:.5625rem;letter-spacing:.32em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.40);
  margin:0 0 var(--sb-space-s);padding-bottom:.85rem;
  border-bottom:1px solid rgba(255,255,255,.12)
}
.sb-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.sb-footer ul a{
  font-size:.9375rem;letter-spacing:0;font-weight:400;line-height:1.35;
  color:rgba(255,255,255,.86);text-transform:none
}
.sb-footer ul a:hover{color:#fff}
.sb-footer__bottom{border-top:1px solid var(--sb-line-dark);padding-top:var(--sb-space-m);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sb-space-s);font-size:.75rem;color:var(--sb-grey-light)}
.sb-social{display:flex;gap:1rem}
.sb-social a{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase}

/* Agency credit — quiet, but a real crawlable link. */
.sb-credit{
  margin:1.25rem 0 0;font-size:.6875rem;letter-spacing:.06em;
  color:rgba(255,255,255,.42)
}
.sb-credit a{
  color:rgba(255,255,255,.62);text-decoration:none;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.22);padding-bottom:1px;
  transition:color .25s var(--sb-ease),border-color .25s var(--sb-ease)
}
.sb-credit a:hover{color:#fff;border-color:var(--sb-magenta);text-decoration:none}

/* ======================================================================
   MOTION SET
   Effects driven by --sb-vel (scroll velocity, published by theme.js) and
   by CSS alone. None of these open a WebGL context, so they cost nothing
   beyond paint — which is why they can be used across the whole site while
   the shaders stay rationed to a handful of sections.
   ====================================================================== */
/* --------------------------------------------------------------------------
   Scroll rail and pointer glow
   Both are injected by theme.js and both flip on dark grounds, because the
   page alternates ink and paper and a single colour would vanish on half of it.
   -------------------------------------------------------------------------- */
.sb-rail{
  position:fixed;right:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);
  height:min(46vh,420px);width:22px;z-index:40;pointer-events:none;
  display:flex;justify-content:center;
  --rail-track:rgba(11,11,12,.14);
  --rail-tick:rgba(11,11,12,.26);
  transition:opacity .4s var(--sb-ease)
}
.sb-rail.on-dark{--rail-track:rgba(255,255,255,.18);--rail-tick:rgba(255,255,255,.34)}

.sb-rail__track{
  position:relative;width:2px;height:100%;background:var(--rail-track);border-radius:2px
}
.sb-rail__fill{
  position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:var(--sb-gradient);border-radius:2px
}

/* One mark per section: the rail doubles as a map of the page rather than a
   restyled scrollbar. */
.sb-rail__ticks{position:absolute;inset:0;width:22px}
.sb-rail__tick{
  position:absolute;left:50%;width:7px;height:1px;
  transform:translate(-50%,-50%);background:var(--rail-tick);
  transition:width .3s var(--sb-ease),background-color .3s var(--sb-ease)
}
.sb-rail__tick.is-past{width:13px;background:var(--sb-accent)}

.sb-glow{
  position:fixed;left:0;top:0;width:26px;height:26px;border-radius:50%;
  z-index:39;pointer-events:none;opacity:0;
  border:1px solid rgba(11,11,12,.34);
  transition:opacity .3s var(--sb-ease),width .28s var(--sb-ease),
             height .28s var(--sb-ease),border-color .28s var(--sb-ease),
             background-color .28s var(--sb-ease)
}
.sb-glow.is-on{opacity:1}
.sb-glow.on-dark{border-color:rgba(255,255,255,.45)}
.sb-glow.is-near{
  width:52px;height:52px;
  border-color:transparent;background:rgba(123,63,242,.16)
}
.sb-glow.is-near.on-dark{background:rgba(255,255,255,.14)}
.sb-glow.is-down{width:20px;height:20px}

@media (prefers-reduced-motion:reduce){
  .sb-rail__fill,.sb-rail__tick{transition:none}
  .sb-glow{display:none}
}
@media (max-width:900px){
  .sb-rail,.sb-glow{display:none}
}

:root{--sb-vel:0}

/* ---- Scroll-velocity chromatic split ------------------------------------
   The big display headings separate into cyan and magenta in proportion to
   how fast the page is moving, and recompose when it settles. */
@media (prefers-reduced-motion:no-preference){
  .sb-h1,.sb-h2,.sb-hero__title,.sb-herod__title,.sb-pagehero__title{
    text-shadow:
      calc(var(--sb-vel) * -6px) 0 rgba(0,209,255,calc(var(--sb-vel) * .75)),
      calc(var(--sb-vel) *  6px) 0 rgba(255,46,147,calc(var(--sb-vel) * .75))
  }
}

/* ---- Duotone photography -------------------------------------------------
   Photographs live in black and white until you touch them, then take the
   brand spectrum. This is what ties the photography to the palette — until
   now the two lived in separate worlds. */
/* Every photograph on the site is shown in its own colour. The grayscale
   filter and the brand-tinted colour blend that used to live here are both
   gone — the blend replaced a picture's hues outright, which is a duotone
   effect and only made sense over a grey base. The frame and the slow zoom
   on hover remain. */
.sb-duotone{position:relative;overflow:hidden;isolation:isolate}
.sb-duotone img{transition:transform .7s var(--sb-ease)}
@media (hover:hover){
  .sb-duotone:hover img{transform:scale(1.03)}
}

/* ---- Marquee -------------------------------------------------------------
   The track is duplicated and the pair translated by exactly half its width,
   so the loop closes on itself with no jump at the seam. */
.sb-marquee{
  position:relative;overflow:hidden;
  /* Clear of whatever sits above it — a ticker butted straight against a row
     of buttons reads as one crowded block. */
  margin-top:clamp(2.5rem,5vw,4.5rem);
  padding-block:clamp(1rem,2vw,1.75rem);
  border-block:1px solid var(--sb-line-dark);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)
}
.sb-marquee__track{display:flex;width:max-content;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .sb-marquee__track{animation:sb-marquee 38s linear infinite}
}
@keyframes sb-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.sb-marquee__item{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;
  font-size:clamp(1.125rem,2.4vw,1.75rem);font-weight:600;
  text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap;
  color:rgba(255,255,255,.9)
}
.sb-marquee__item::after{
  content:"";width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--sb-gradient)
}

/* ---- Noise-displaced section edge ---------------------------------------
   A wave cut from turbulence instead of a ruled line between sections. */
.sb-wave-edge{position:relative}
.sb-wave-edge::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:34px;
  background:inherit;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='34' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='0.012 0.28' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26'/%3E%3C/filter%3E%3Crect width='1200' height='34' fill='%23000' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='34' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='0.012 0.28' numOctaves='2' seed='5'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='26'/%3E%3C/filter%3E%3Crect width='1200' height='34' fill='%23000' filter='url(%23w)'/%3E%3C/svg%3E");
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  transform:translateY(-100%)
}

/* ---- Liquid reveal -------------------------------------------------------
   Images wipe in behind a turbulent edge rather than fading. */
@media (prefers-reduced-motion:no-preference){
  [data-reveal].sb-liquid{
    opacity:1;transform:none;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 60%);
    mask-image:linear-gradient(180deg,#000 0%,#000 40%,transparent 60%);
    -webkit-mask-size:100% 260%;mask-size:100% 260%;
    -webkit-mask-position:0 100%;mask-position:0 100%;
    transition:-webkit-mask-position 1.1s var(--sb-ease),mask-position 1.1s var(--sb-ease)
  }
  [data-reveal].sb-liquid.is-in{-webkit-mask-position:0 0;mask-position:0 0}
}

/* ---- Magnetic buttons ----------------------------------------------------
   theme.js writes the transform; this only supplies the easing so the button
   springs back rather than snapping. */
.sb-btn{will-change:transform}

/* --------------------------------------------------------------------------
   11. UTILITIES / MOTION / RESPONSIVE
   -------------------------------------------------------------------------- */
.sb-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sb-hide{display:none !important}

[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--sb-ease),transform .7s var(--sb-ease)}
[data-reveal].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-reveal]{opacity:1;transform:none}
}

@media (max-width:1080px){
  .sb-grid--4,.sb-grid--5{grid-template-columns:repeat(2,1fr)}
  .sb-framework{grid-template-columns:1fr}
  .sb-footer__top{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  :root{--sb-header-h:70px}

  /* Desktop bar navigation off, full-screen overlay on. Only one set of
     links exists in the accessibility tree at any width. */
  .sb-nav{display:none}
  .sb-menu:not([hidden]){display:flex}
  .sb-nav-toggle{display:inline-flex}
  .sb-header__actions .sb-btn{display:none}
  .sb-sticky-cta{display:flex}
  .sb-hero__inner{grid-template-columns:1fr;gap:var(--sb-space-l)}
  .sb-hero__media{order:-1}
  .sb-hero__media img{aspect-ratio:4/3;object-position:center 18%}
  .sb-hero__badge{position:static;max-width:none;left:auto;right:auto;bottom:auto}
  .sb-split,.sb-book,.sb-optin{grid-template-columns:1fr}
  /* Stacked, not a 120px thumbnail beside a squeezed column: the portrait
     goes on top at a size worth looking at and the copy gets the full width. */
  .sb-intro{grid-template-columns:1fr;gap:var(--sb-space-m);align-items:start}
  .sb-intro__media{max-width:240px}
  .sb-intro__stats{grid-template-columns:repeat(2,1fr)}
  .sb-split__media{order:-1}
  .sb-grid--2,.sb-grid--3{grid-template-columns:1fr}
  .sb-form__row{grid-template-columns:1fr}
  .sb-footer__top{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sb-grid--4,.sb-grid--5{grid-template-columns:1fr}
  .sb-btn{width:100%}
  .sb-sticky-cta .sb-btn{width:auto}
}

@media print{
  .sb-header,.sb-footer,.sb-sticky-cta,.sb-cta-band{display:none}
  body{color:#000;background:#fff}
}

/* ---- Card top line --------------------------------------------------------
   Every card, light or dark, on every page, carries a solid colour line along
   its top edge in its spectrum hue — the treatment the homepage mental-fitness
   cards set. Plain cards had none, a hover turned the edge ink, testimonials
   drew it grey on dark sections, tiles only showed it on hover, and the
   Clarity panel used the gradient. The class is repeated so no variant,
   context or hover rule above can repaint the top edge. */
.sb-card.sb-card.sb-card{border-top:3px solid var(--sb-hue,var(--sb-accent))}
.sb-quote.sb-quote{border-top:3px solid var(--sb-hue,var(--sb-accent))}
.sb-tile.sb-tile::before{transform:none}

/* ---- Scanlines stay on the ground ----------------------------------------
   The scanlines and grain used to sit at z-index 2 over everything in the
   section, so they printed across every photograph. Lifting a photograph to
   z-index 3 did not help: the wrap it lives in is itself z-index 1, and
   nothing inside it can climb above a sibling layer at 2. The texture is now
   at z-index 0, over the section's ground and its colour field but under the
   wrap, so no photograph or line of type on any page carries it. */
.sb-scan>.sb-wrap{position:relative;z-index:1}

/* ---- About hero -----------------------------------------------------------
   The Meet Sutton stage as the page's opening. There is no credentials band
   under it, so the section drops the bottom padding that band needs. The
   book badge takes dark type and a dark rule on the light wall. */
.sb-abouthero{padding-bottom:0}
.sb-abouthero .sb-herod__cta{margin-top:2rem}
/* The copy column is wider than the homepage's half, so the same text runs
   shorter and the stage (whose height the text sets) loses the wall above
   her; the stage padding comes down too. From 1280px, where the photograph at
   110% of the width is still taller than the stage, she is drawn a little
   larger from the floor up. Below that the stage keeps "cover". Her right
   edge stays clear of the copy column at every width from 1000px. */
/* Only from 1201px: at 1200 and below the stage stacks (photograph across the
   top, copy underneath — see the Meet Sutton rules), and these overrides
   would squeeze the copy into a column beside a photograph that is no longer
   there and cancel the padding that keeps the copy below it. */
@media (min-width:1201px){
  .sb-abouthero .sb-meet__stage{padding-block:clamp(2.5rem,4.5vw,4.5rem)}
  .sb-abouthero .sb-wrap{max-width:1320px}
  .sb-abouthero .sb-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
}
@media (min-width:1280px){
  .sb-abouthero .sb-meet__stage::before{background-size:110% auto;background-position:left bottom}
}
/* Phone: the full frame across a 375px screen leaves her a small figure in a
   wide wall. The frame is drawn at 150% of the width instead — its full
   height (100vw) shown, the empty wall on the right cropped — and the copy
   starts under that taller band. */
/* Stacked, the stage drops its bottom padding (the homepage has its stats band
   under it) and the About section has none either, so the buttons sat on the
   next section's edge. */
@media (max-width:1200px){
  .sb-abouthero .sb-meet__stage{padding-bottom:clamp(3rem,8vw,4.5rem)}
}
@media (max-width:700px){
  .sb-abouthero .sb-meet__stage::before{background-size:150vw auto;background-position:left top}
  .sb-abouthero .sb-meet__stage{padding-top:calc(100vw + var(--sb-space-l))}
}
.sb-herod__badge--dark{border-top-color:rgba(11,11,12,.16)}
.sb-herod__badge--dark .sb-herod__badge-text strong{color:var(--sb-ink)}
.sb-herod__badge--dark .sb-herod__badge-text span{color:var(--sb-ink-70)}

/* ---- Primary buttons on dark grounds ----------------------------------------
   An ink button's border is ink, which on a black section is no border at all:
   it read as loose white text beside an outlined neighbour. It takes the same
   light rule as ghost-light there; the hover still clears it for the wipe. */
.sb-section--ink .sb-btn--primary,
.sb-pagehero--ink .sb-btn--primary,
.sb-herod .sb-btn--primary,
.sb-cta-band .sb-btn--primary,
.sb-footer .sb-btn--primary{--btn-bd:rgba(255,255,255,.55)}
.sb-section--ink .sb-btn--primary:hover,
.sb-pagehero--ink .sb-btn--primary:hover,
.sb-herod .sb-btn--primary:hover,
.sb-cta-band .sb-btn--primary:hover,
.sb-footer .sb-btn--primary:hover,
.sb-section--ink .sb-btn--primary:focus-visible,
.sb-pagehero--ink .sb-btn--primary:focus-visible,
.sb-herod .sb-btn--primary:focus-visible,
.sb-cta-band .sb-btn--primary:focus-visible,
.sb-footer .sb-btn--primary:focus-visible{--btn-bd:transparent}

/* ---- Colour touches --------------------------------------------------------
   A soft, blurred spot of the brand spectrum in the empty stretch beside a
   headline on a light section. The host isolates, so the spot at z-index -1
   sits over the section's ground and under its content. A spot that overflows
   its host upward paints over the section above as well, which is how one
   touch can run across two containers. Hidden below 900px, where the columns
   stack and the empty stretch no longer exists. */
.sb-glowhost{isolation:isolate}
.sb-glowspot{
  --glow-size:min(34vw,460px);
  position:absolute;z-index:-1;pointer-events:none;
  width:var(--glow-size);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 36%,#7B3FF2 0%,transparent 56%),
    radial-gradient(circle at 70% 40%,#FF2E93 0%,transparent 54%),
    radial-gradient(circle at 52% 74%,#FF6B2C 0%,transparent 52%);
  filter:blur(70px);opacity:.22
}
.sb-glowspot--bottom-left{left:4%;bottom:6%}
.sb-glowspot--right{right:3%;top:8%}
.sb-glowspot--straddle-right{right:4%;top:calc(var(--glow-size) * -.5)}
@media (max-width:900px){
  .sb-glowspot{display:none}
}

/* ---- Speaking: signature keynote -------------------------------------------
   Outcomes as a centred row of cards under the argument. Five across on a wide
   screen, three and two below 1100px, one on a phone; the row wraps from the
   centre, so a short last row sits in the middle rather than hanging left. */
.sb-keynote__aside{display:flex;flex-direction:column;gap:1.5rem}
.sb-keynote__outcomes{margin-top:clamp(3rem,6vw,4.5rem);text-align:center}
.sb-keynote__outcomes>.sb-eyebrow{margin:0 auto var(--sb-space-l)}
.sb-keynote__cards,
.sb-cardrow{
  --kc-gap:clamp(1rem,1.6vw,1.5rem);
  display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kc-gap);text-align:left
}
.sb-keynote__cards>.sb-card,
.sb-cardrow>.sb-card{flex:0 1 calc((100% - 4 * var(--kc-gap)) / 5);height:auto}
.sb-keynote__outcome{margin:0;font-size:var(--sb-step-0);line-height:1.45;color:var(--sb-ink)}
@media (max-width:1100px){
  .sb-keynote__cards>.sb-card,
  .sb-cardrow>.sb-card{flex-basis:calc((100% - 2 * var(--kc-gap)) / 3)}
}
@media (max-width:700px){
  .sb-keynote__cards>.sb-card,
  .sb-cardrow>.sb-card{flex-basis:100%}
}

/* ---- A colour touch on every white section -----------------------------------
   The same soft spectrum spot as the placed touches, on every section without
   a ground colour of its own, alternating corners so consecutive white
   sections do not repeat. Sections that place their own touch (.sb-glowhost),
   the logo strip, and every tinted or dark ground are left alone. The spot sits
   under the content; hidden below 900px. */
.sb-section:not(.sb-section--ink,.sb-section--bone,.sb-section--mist,.sb-section--violet,.sb-section--magenta,.sb-section--coral,.sb-section--cyan,.sb-section--gradient,.sb-glowhost,.sb-featured){isolation:isolate}
.sb-section:not(.sb-section--ink,.sb-section--bone,.sb-section--mist,.sb-section--violet,.sb-section--magenta,.sb-section--coral,.sb-section--cyan,.sb-section--gradient,.sb-glowhost,.sb-featured)::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  right:3%;top:8%;width:min(30vw,420px);aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 34% 36%,#7B3FF2 0%,transparent 56%),
    radial-gradient(circle at 70% 40%,#FF2E93 0%,transparent 54%),
    radial-gradient(circle at 52% 74%,#FF6B2C 0%,transparent 52%);
  filter:blur(70px);opacity:.2
}
.sb-section:nth-of-type(even):not(.sb-section--ink,.sb-section--bone,.sb-section--mist,.sb-section--violet,.sb-section--magenta,.sb-section--coral,.sb-section--cyan,.sb-section--gradient,.sb-glowhost,.sb-featured)::after{
  right:auto;top:auto;left:3%;bottom:8%
}
@media (max-width:900px){
  .sb-section:not(.sb-section--ink,.sb-section--bone,.sb-section--mist,.sb-section--violet,.sb-section--magenta,.sb-section--coral,.sb-section--cyan,.sb-section--gradient,.sb-glowhost,.sb-featured)::after{content:none}
}

/* A centred section heading: the eyebrow chip sits on the centre line too. */
.sb-center-head .sb-eyebrow{margin-inline:auto}
.sb-center-head .sb-lede{margin-inline:auto}

/* ---- Framework cards in the card style ---------------------------------------
   Connect Up / In / Now read like every other dark card on the site: a white
   sans title in capitals under the coloured top line, no colour wash in the
   corner. The line keeps each step's own hue. */
.sb-framework__item::after{content:none}
.sb-framework__label{
  font-family:var(--sb-font-sans);font-size:var(--sb-step-1);font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;line-height:1.2;color:#fff
}

/* ---- A list in two columns under its headline ------------------------------
   Filled column by column, five and five, so it still reads top to bottom;
   each column opens with its own rule. One column on a phone. */
.sb-cadence--two{
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;column-gap:clamp(2rem,5vw,5rem);
  margin-top:clamp(2rem,4vw,3rem)
}
.sb-cadence--two li:nth-child(1),
.sb-cadence--two li:nth-child(6){border-top:1px solid var(--sb-line)}
/* Centred under a centred headline: the two columns sit as one block in the
   middle of the wrap, not stretched to its edges. */
.sb-cadence--center{max-width:920px;margin-inline:auto}
@media (max-width:900px){
  .sb-cadence--two{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .sb-cadence--two li:nth-child(6){border-top:0}
}

/* ---- Footer columns ----------------------------------------------------------
   Brand: the name, a short gradient bar, the tagline at display size and a
   Book Sutton button. Explore: eight links in two columns of four, so the
   column is half as tall. Start here: each action a row of its own between
   hairlines, with a spectrum dot and an arrow that slides on hover. Headings
   carry a short gradient rule instead of a full-width grey line. */
.sb-footer__top{grid-template-columns:1.25fr 1fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.sb-footer__name{font-size:var(--sb-step-3);letter-spacing:.04em;line-height:1.05}
.sb-footer__role{margin-bottom:var(--sb-space-m)}
.sb-footer__bar{display:block;width:56px;height:3px;background:var(--sb-gradient);margin:0 0 var(--sb-space-m)}
.sb-footer__tag{font-size:var(--sb-step-3);line-height:1.1;margin-bottom:.5rem}
.sb-footer__sub{margin:0;font-size:.9375rem;color:rgba(255,255,255,.62)}
.sb-footer__brand-cta{margin-top:var(--sb-space-l)}

.sb-footer__heading{
  position:relative;border-bottom:0;padding-bottom:.9rem;margin-bottom:var(--sb-space-m);
  font-size:.6875rem;letter-spacing:.24em;color:rgba(255,255,255,.55)
}
.sb-footer__heading::after{content:"";position:absolute;left:0;bottom:0;width:32px;height:2px;background:var(--sb-gradient)}

.sb-footer__col--explore ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sb-space-m);row-gap:.85rem}
.sb-footer__col--explore ul a{position:relative;display:inline-block;font-size:1rem}
.sb-footer__col--explore ul a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--sb-gradient);transform:scaleX(0);transform-origin:left;transition:transform .25s ease
}
.sb-footer__col--explore ul a:hover{text-decoration:none}
.sb-footer__col--explore ul a:hover::after{transform:scaleX(1)}

.sb-footer ul.sb-footer__start{gap:0;border-top:1px solid rgba(255,255,255,.12)}
.sb-footer__start li{border-bottom:1px solid rgba(255,255,255,.12)}
.sb-footer__start li:nth-child(5n+1){--sb-hue:#7B3FF2}
.sb-footer__start li:nth-child(5n+2){--sb-hue:#FF2E93}
.sb-footer__start li:nth-child(5n+3){--sb-hue:#FF6B2C}
.sb-footer__start li:nth-child(5n+4){--sb-hue:#00D1FF}
.sb-footer__start li:nth-child(5n+5){--sb-hue:#C9A227}
.sb-footer .sb-footer__start a{
  display:flex;align-items:center;gap:.85rem;padding:.95rem 0;
  font-size:1rem;color:#fff;transition:padding-left .25s ease
}
.sb-footer__start a::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--sb-hue)}
.sb-footer__start a::after{content:"→";margin-left:auto;color:rgba(255,255,255,.45);transition:transform .25s ease,color .25s ease}
.sb-footer .sb-footer__start a:hover{text-decoration:none;padding-left:.35rem}
.sb-footer__start a:hover::after{transform:translateX(4px);color:var(--sb-hue)}

@media (max-width:1080px){
  .sb-footer__top{grid-template-columns:1fr 1fr}
  .sb-footer__brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .sb-footer__top{grid-template-columns:1fr}
}

/* ---- Footer bottom row ---------------------------------------------------------
   Copyright on the left, the social links as outlined pills with their icons
   in the middle, Back to top on the right; the agency credit centred on its
   own quiet line underneath. One centred column on a phone. */
.sb-footer__bottom{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sb-space-m);
  padding-top:var(--sb-space-l);border-top:1px solid rgba(255,255,255,.12);
  font-size:.8125rem;color:rgba(255,255,255,.6)
}
.sb-footer__copy{margin:0}
.sb-social--icons{gap:.625rem;flex-wrap:wrap;justify-content:center}
.sb-footer .sb-social--icons a{
  display:inline-flex;align-items:center;gap:.5rem;height:40px;padding:0 1rem 0 .8rem;
  border:1px solid rgba(255,255,255,.2);border-radius:999px;
  font-size:.6875rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  transition:background-color .25s ease,border-color .25s ease
}
.sb-footer .sb-social--icons a:hover,
.sb-footer .sb-social--icons a:focus-visible{background:var(--sb-gradient);border-color:transparent;text-decoration:none;color:#fff}
.sb-footer .sb-footer__totop{
  justify-self:end;display:inline-flex;align-items:center;gap:.75rem;
  font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.75)
}
.sb-footer__totop-icon{
  display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(255,255,255,.25);font-size:1rem;letter-spacing:0;transition:transform .25s ease,background-color .25s ease
}
.sb-footer .sb-footer__totop:hover{color:#fff;text-decoration:none}
.sb-footer__totop:hover .sb-footer__totop-icon{transform:translateY(-3px);background:#fff;color:var(--sb-ink);border-color:#fff}
.sb-footer .sb-credit{
  margin:var(--sb-space-m) 0 0;padding-top:var(--sb-space-m);border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:.75rem;color:rgba(255,255,255,.45)
}
.sb-footer .sb-credit a{color:#fff;font-weight:600}
@media (max-width:760px){
  .sb-footer__bottom{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sb-footer .sb-footer__totop{justify-self:center}
}

/* ---- Accessibility bubble ---------------------------------------------------------
   A floating button bottom-left (raised above the sticky action bar on a
   phone) opening a panel of reading adjustments. Options are classes on
   <html>, set by assets/js/a11y.js and, before first paint, by the inline
   script from sb_a11y_boot(). The widget sizes itself in px and is excluded
   from the font and spacing overrides, so it stays usable at every setting. */
.sb-a11y{
  position:fixed;left:20px;bottom:20px;z-index:250;
  font-family:var(--sb-font-sans);font-size:15px;line-height:1.3;letter-spacing:0;text-transform:none;color:#0B0B0C
}
.sb-a11y button{font:inherit;color:inherit;margin:0;-webkit-appearance:none;appearance:none;cursor:pointer}
.sb-a11y button:focus-visible{outline:3px solid #7B3FF2;outline-offset:2px}
.sb-a11y__toggle{
  position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
  border:3px solid transparent;color:#fff !important;
  background:linear-gradient(#0B0B0C,#0B0B0C) padding-box,var(--sb-gradient) border-box;
  box-shadow:0 10px 28px rgba(11,11,12,.3);transition:transform .2s ease
}
.sb-a11y__toggle:hover{transform:scale(1.06)}
.sb-a11y .sb-a11y__toggle:focus-visible{outline:3px solid #FFD400;outline-offset:3px}
.sb-a11y__toggle.is-active::after{
  content:"";position:absolute;top:-2px;right:-2px;width:14px;height:14px;border-radius:50%;
  background:#FF2E93;border:2px solid #fff
}
.sb-a11y__panel{
  position:absolute;left:0;bottom:calc(100% + 12px);
  width:min(340px,calc(100vw - 40px));max-height:calc(100vh - 120px);overflow:auto;
  padding:18px;border-radius:12px;border:0;border-top:4px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--sb-gradient) border-box;
  box-shadow:0 24px 60px rgba(11,11,12,.28)
}
.sb-a11y__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sb-a11y__title{margin:0;font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.sb-a11y__close{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;background:#F1F1F4}
.sb-a11y__close:hover{background:#E3E3E8}
.sb-a11y__size{margin-bottom:14px}
.sb-a11y__label{display:block;margin-bottom:8px;font-size:13px;font-weight:600}
.sb-a11y__stepper{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:8px}
.sb-a11y__stepper button{height:46px;border:0;border-radius:8px;background:#F1F1F4;font-size:17px;font-weight:700}
.sb-a11y__stepper button:hover:not(:disabled){background:#0B0B0C;color:#fff}
.sb-a11y__stepper button:disabled{opacity:.4;cursor:not-allowed}
.sb-a11y__stepper output{text-align:center;font-size:16px;font-weight:700}
.sb-a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sb-a11y__opt{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-height:78px;padding:12px;
  border:1.5px solid #E3E3E8;border-radius:10px;background:#fff;text-align:left;font-size:14px;font-weight:600
}
.sb-a11y__opt:hover{border-color:#0B0B0C}
.sb-a11y__opt[aria-pressed="true"]{background:#0B0B0C;border-color:#0B0B0C;color:#fff}
.sb-a11y__opt[aria-pressed="true"] svg{color:#FF7AB8}
.sb-a11y__reset{width:100%;margin-top:12px !important;padding:12px;border:1.5px solid #0B0B0C;border-radius:10px;background:transparent;font-size:14px;font-weight:600}
.sb-a11y__reset:hover{background:#0B0B0C;color:#fff}
@media (hover:none){.sb-a11y__opt--guide{display:none}}
@media (max-width:900px){
  .sb-a11y{left:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
  .sb-a11y__toggle{width:50px;height:50px}
  .sb-a11y__panel{max-height:calc(100svh - 190px)}
}
@media print{.sb-a11y,.sb-a11y-readbar{display:none !important}}

/* Text size: rem-based type scales with the root. */
html[data-a11y-size="1"]{font-size:115%}
html[data-a11y-size="2"]{font-size:130%}
html[data-a11y-size="3"]{font-size:150%}
html[data-a11y-size="4"]{font-size:175%}

/* Text spacing, to the WCAG 1.4.12 values. */
html.sb-a11y-spacing body *:not(.sb-a11y):not(.sb-a11y *){line-height:1.8 !important;letter-spacing:.06em !important;word-spacing:.16em !important}

/* Readable font: a plain, wide sans and no all-capitals. */
html.sb-a11y-font body *:not(.sb-a11y):not(.sb-a11y *){font-family:Verdana,Tahoma,Arial,sans-serif !important;text-transform:none !important;font-style:normal !important}

/* Contrast and greyscale compose into one filter on the page regions. */
html{--a11y-c:contrast(1);--a11y-g:grayscale(0)}
html.sb-a11y-contrast{--a11y-c:contrast(1.45)}
html.sb-a11y-gray{--a11y-g:grayscale(1)}
html.sb-a11y-contrast :is(main,.sb-header,.sb-footer,.sb-sticky-cta,.sb-menu),
html.sb-a11y-gray :is(main,.sb-header,.sb-footer,.sb-sticky-cta,.sb-menu){filter:var(--a11y-c) var(--a11y-g)}

/* Highlight links: every text link underlined, every link and button ringed. */
html.sb-a11y-links a:not(.sb-btn):not(.sb-a11y *){text-decoration:underline !important;text-decoration-thickness:2px !important;text-underline-offset:.2em !important}
html.sb-a11y-links :is(a,button):not(.sb-a11y *){outline:2px solid #FFD400 !important;outline-offset:2px !important}

/* Large cursor. */
html.sb-a11y-cursor,
html.sb-a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19.5 11l-6.4 1.8-2.8 6.2z' fill='%230B0B0C' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 10 5,auto !important}

/* Pause animations: no motion, no transitions, reveals shown, decorative
   canvases and glitch slices off. */
html.sb-a11y-motion *,
html.sb-a11y-motion *::before,
html.sb-a11y-motion *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
html.sb-a11y-motion [data-reveal]{opacity:1 !important;transform:none !important;-webkit-mask:none !important;mask:none !important}
html.sb-a11y-motion :is(.sb-fluid__canvas,.sb-ripple__canvas){display:none !important}
html.sb-a11y-motion .sb-glitch::before,
html.sb-a11y-motion .sb-glitch::after{display:none !important}

/* Reading guide: a clear band follows the pointer and dims the rest. The
   element's class must not be "sb-a11y-guide" — that is the option's class on
   <html>, and a shared name made the root element itself fixed, 44px tall and
   click-swallowing, which broke the page and hid the bubble's off switch. */
.sb-a11y-readbar{
  position:fixed;left:0;right:0;top:0;height:44px;z-index:240;pointer-events:none;
  border-block:2px solid #FFD400;box-shadow:0 0 0 100vmax rgba(11,11,12,.4)
}