/* ==========================================================================
   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;
  --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:hidden;
}
img,svg,video,iframe{max-width:100%;height:auto;display:block}
img{background:var(--sb-mist)}
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}
}

/* 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:.6875rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sb-grey);margin:0 0 var(--sb-space-m);
}
.sb-eyebrow::before{content:"";width:28px;height:2px;background:var(--sb-gradient);flex:none}
.sb-eyebrow--plain::before{display:none}

.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-eyebrow{color:var(--sb-grey-light)}
.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)}

.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:var(--btn-bg);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;
  transition:background .25s var(--sb-ease),color .25s var(--sb-ease),border-color .25s var(--sb-ease),transform .2s var(--sb-ease);
}
.sb-btn:hover{transform:translateY(-2px)}
.sb-btn:active{transform:translateY(0)}
.sb-btn--primary:hover{--btn-bg:var(--sb-accent);--btn-bd:var(--sb-accent)}
.sb-btn--ghost{--btn-bg:transparent;--btn-fg:var(--sb-ink);--btn-bd:var(--sb-ink)}
.sb-btn--ghost:hover{--btn-bg:var(--sb-ink);--btn-fg:#fff}
.sb-btn--light{--btn-bg:#fff;--btn-fg:var(--sb-ink);--btn-bd:#fff}
.sb-btn--light:hover{--btn-bg:transparent;--btn-fg:#fff}
.sb-btn--ghost-light{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.55)}
.sb-btn--ghost-light:hover{--btn-bg:#fff;--btn-fg:var(--sb-ink);--btn-bd:#fff}
.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{background:#fff;color: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:center;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{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--sb-ink);color:#fff;
  display:flex;align-items:center;
  min-height:min(88vh,860px)
}
.sb-herod__media{position:absolute;inset:0 0 0 auto;width:52%;z-index:0}
.sb-herod__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 16%;
  filter:grayscale(1) contrast(1.06) brightness(.94)
}
/* Feathered edge so the photograph dissolves into the black instead of
   sitting on it as a hard rectangle. */
.sb-herod__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,
    var(--sb-ink) 0%,
    rgba(11,11,12,.92) 18%,
    rgba(11,11,12,.55) 42%,
    rgba(11,11,12,.15) 72%,
    rgba(11,11,12,.35) 100%)
}
.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
}
.sb-herod__inner{position:relative;z-index:1;padding-block:clamp(4rem,10vh,7rem)}
/* Keep the type column clear of the portrait — a headline crossing her face
   reads as a mistake, not as layering. */
.sb-herod__inner>*{max-width:min(54%,44rem)}
.sb-herod__kicker{
  font-size:.6875rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;
  color:var(--sb-grey-light);margin:0 0 var(--sb-space-m)
}
.sb-herod__title{
  font-size:clamp(2.75rem,6.4vw,6rem);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-3);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)
}
.sb-herod__badge{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .9rem;
  margin:var(--sb-space-xl) 0 0;padding-top:var(--sb-space-s);
  border-top:1px solid rgba(255,255,255,.16);max-width:34rem
}
.sb-herod__badge strong{font-size:.75rem;letter-spacing:.18em;text-transform:uppercase}
.sb-herod__badge span{font-size:.8125rem;color:rgba(255,255,255,.6)}

@media (max-width:900px){
  .sb-herod{min-height:0}
  /* The desktop rule keeps the type clear of the portrait. 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}
  /* Portrait proportion on a phone, not a letterbox strip: 52vw came out at
     about 195px on a 375px screen, which cropped her to a band. */
  .sb-herod__media{
    position:relative;inset:auto;width:100%;
    height:auto;aspect-ratio:4/5;max-height:62vh
  }
  .sb-herod__media img{height:100%;object-position:center 18%}
  .sb-herod__media::after{
    background:linear-gradient(180deg,rgba(11,11,12,.15) 0%,rgba(11,11,12,.55) 62%,var(--sb-ink) 100%)
  }
  .sb-herod{flex-direction:column;align-items:stretch}
  .sb-herod__inner{padding-block:var(--sb-space-l) var(--sb-space-xl)}
  /* 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 regardless. */
  .sb-herod__media{z-index:1}
  .sb-herod__orb{top:auto;bottom:6%;left:-36%;width:88vw;opacity:.4}
  .sb-herod__title{max-width:none}
  .sb-herod__badge{margin-top:var(--sb-space-l)}
}

/* Interior page hero */
.sb-pagehero{padding-block:clamp(3rem,2rem + 5vw,6.5rem) clamp(2rem,1.5rem + 3vw,4rem);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)}
.sb-pagehero--ink .sb-eyebrow{color:var(--sb-grey-light)}

/* --------------------------------------------------------------------------
   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}

/* 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. */
.sb-section--ink>*:not(.sb-orb-bg),
.sb-cta-band>*:not(.sb-orb-bg),
.sb-pagehero--ink>*:not(.sb-orb-bg){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)}
.sb-logo-text{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-grey);text-align:center;font-weight:600}

/* 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}
.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:.625rem;letter-spacing:.24em;text-transform:uppercase;color:var(--sb-grey-light);font-weight:600}
.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)}
.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)}
.sb-card--accent{border-top:3px solid transparent;border-image:var(--sb-gradient) 1;border-image-width:3px 0 0 0}

/* 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;transition:background .3s var(--sb-ease),color .3s var(--sb-ease)}
.sb-tile:hover{background:var(--sb-ink);color:#fff}
.sb-tile:hover .sb-tile__body,.sb-tile:hover .sb-tile__num{color:rgba(255,255,255,.72)}
.sb-tile__num{font-size:.625rem;letter-spacing:.24em;color:var(--sb-grey-light);font-weight:600}
.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}
.sb-framework__item::before{content:"";position:absolute;top:0;left:0;width:44px;height:3px;background:var(--sb-gradient)}
.sb-framework__label{font-family:var(--sb-font-serif);font-size:var(--sb-step-3);line-height:1;margin:0 0 .75rem;color:#fff}
.sb-framework__body{color:rgba(255,255,255,.72);font-size:var(--sb-step--1);line-height:1.6;margin:0}

/* Testimonials */
.sb-quote{border-top:1px solid 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%;box-shadow:0 40px 80px -50px rgba(11,11,12,.6)}
.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}

/* 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}
.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)}
.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}
.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}

/* --------------------------------------------------------------------------
   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}
}