@font-face{font-family:"Schibsted Grotesk";src:url("../fonts/schibsted-var.woff2") format("woff2-variations");
  font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonts/newsreader-italic-sub.woff2") format("woff2-variations");
  font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plexmono-400.woff2") format("woff2");
  font-weight:400 500;font-style:normal;font-display:swap}

:root{
  --paper:#F2F4F8;
  --paper-2:#E7EBF3;
  --ink:#0C1220;
  --ink-soft:#515D75;
  --ultra:#2334C4;
  --signal:#FFFFFF;
  /* Campaign accent: the cream yellow from the leadership-campaign brand.
     Measured 4.7:1 on the panel's light stop and 15:1 on ink, and ultra
     text on a cream fill is 7.4:1. It is ONLY ever used on the panel
     gradient or ink grounds - on paper it measures ~1.2:1, so it must
     never carry meaning on a light background, and the focus ring stays
     two-tone ink/white. */
  --accent:#F8F1B2;  /* sampled from the leadership-campaign creative */

  /* #4255EB is the lightest value on this hue/saturation that clears 5:1
     for white text (5.63:1). At .97 alpha the panel passes over a pure
     white pixel, so it is contrast-safe over any photograph. Do not
     lighten, do not thin. */
  --panel:linear-gradient(42deg, rgba(66,85,235,.97), rgba(32,48,190,.98));
  --panel-text-2:#E8ECFC;
  --panel-r:clamp(20px,2.6vw,32px);

  --wrap:1220px;
  --gut:clamp(20px,5vw,60px);

  --sans:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px var(--signal);border-radius:4px}
.panel :focus-visible,.foot :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(8,12,32,.9)}

.u-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);width:100%;position:relative}

/* ============ TYPE ============ */
.t-hero,.t-head{
  font-family:var(--sans);font-weight:500;letter-spacing:-.032em;
  margin:0;text-wrap:balance;
}
.t-hero{font-size:clamp(2.3rem,10.5vw,4.3rem);line-height:1.03}
@media(min-width:940px){.t-hero{font-size:clamp(2.6rem,5vw,4.3rem)}}
.t-head{font-size:clamp(1.85rem,3.9vw,3.1rem);line-height:1.07}
em.it{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-variation-settings:"opsz" 60;
  font-size:1.05em;letter-spacing:-.008em;padding-right:.05em;
}
/* the tagline accent: a stroke draws itself under the italic word once
   the masked lines have landed. Decorative only - no-JS never reveals
   it, reduced motion shows it instantly. */
.it--hl{position:relative;display:inline-block}
.hl-stroke{position:absolute;left:.02em;bottom:-.24em;width:96%;height:.17em;
  color:var(--accent);overflow:visible;pointer-events:none}
.hl-stroke path{stroke-dasharray:230;stroke-dashoffset:230}
.lines.is-in .hl-stroke path{
  transition:stroke-dashoffset .8s cubic-bezier(.2,.7,.3,1) .95s;
  stroke-dashoffset:0}
/* the stroke hangs below the line box - open the mask window for it */
.lines .ln:has(.it--hl){padding-bottom:.28em;margin-bottom:-.22em}
.t-sub{font-size:clamp(.98rem,1.4vw,1.12rem);line-height:1.55;margin:1rem 0 0;max-width:46ch}
.t-body{font-size:1rem;line-height:1.62;color:var(--ink-soft);max-width:56ch}
.u-label{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;margin:0;
}
.u-note{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;
  text-transform:uppercase;font-style:normal;opacity:.72;display:block;
}

.lines .ln{display:block;overflow:hidden;padding-bottom:.06em}
.lines .ln > i{
  display:block;font-style:normal;transform:translateY(115%);
  transition:transform .95s cubic-bezier(.16,.84,.28,1);
}
.lines.is-in .ln > i{transform:none}
.lines.is-in .ln:nth-child(2) > i{transition-delay:.08s}
.lines.is-in .ln:nth-child(3) > i{transition-delay:.16s}

/* ============ PROGRESS + NAV ============ */
.pgline{position:fixed;top:0;left:0;height:2px;width:0%;background:var(--accent);z-index:95}
.topnav{position:absolute;top:clamp(18px,3vh,30px);left:0;right:0;z-index:90;padding-inline:var(--gut)}
.topnav-in{
  max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.2rem 0;
}
.brand{font-weight:700;font-size:1.38rem;letter-spacing:-.026em;text-decoration:none;color:#fff}
.brand em{font-family:var(--serif);font-style:italic;font-weight:400;font-size:1.22em;color:#fff}
.nav-cta-l{display:none}
@media(min-width:560px){.nav-cta-l{display:inline}.nav-cta-s{display:none}}
@media(max-width:480px){.brand{font-size:1.08rem}}
@media(max-width:360px){.brand{font-size:.95rem}}

/* ============ BUTTONS ============ */
.b{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:600;font-size:.95rem;line-height:1;letter-spacing:-.01em;
  padding:.88rem 1.6rem;border:none;border-radius:999px;cursor:pointer;
  text-decoration:none;transition:transform .15s ease,background .2s ease,color .2s ease;
}
.b:active{transform:translateY(1px)}
.b--ultra{background:var(--accent);color:var(--ultra)}
.b--ultra:hover{background:#fff}
.b--white{background:var(--accent);color:var(--ultra)}
.b--white:hover{background:#fff;color:var(--ultra)}
/* state fills darken rather than lighten: translucent white over the
   panel drags white text below 4.5:1, ink tints can only raise it */
.b--ghost{background:rgba(6,10,26,.18);color:#fff;border:1px solid rgba(255,255,255,.44)}
.b--ghost:hover{background:rgba(6,10,26,.32);border-color:#fff}
.b--sm{padding:.6rem 1.15rem;font-size:.85rem;min-height:44px}

/* ============ SCENE ============ */
.scene{position:relative;overflow:hidden;isolation:isolate}
.scene--full{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.scene-media{position:absolute;inset:-14% 0;z-index:0}
.scene-media img{width:100%;height:100%;object-fit:cover;display:block}
.scene-shade{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,
    rgba(6,10,26,var(--scrim-b,.78)) 0%,
    rgba(6,10,26,var(--scrim-m,.44)) 52%,
    rgba(6,10,26,var(--scrim-t,.24)) 100%);
}
.scene-body{position:relative;z-index:3;width:100%;padding-block:clamp(96px,13vh,150px) clamp(56px,8vh,100px)}

.panel{
  background:var(--panel);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  border-radius:var(--panel-r);color:#fff;
  padding:clamp(24px,3.4vw,48px);
  box-shadow:0 40px 90px -50px rgba(6,12,40,.8);
  max-width:760px;
}
.panel--wide{max-width:100%}
.panel .t-sub{color:var(--panel-text-2)}
.panel a{color:#fff}
.panel em.it{color:var(--accent)}
/* .panel a would repaint the accent CTA's text */
.panel a.b--white,.panel a.b--white:hover{color:var(--ultra)}

/* ============ HERO ============ */
.hero .scene-body{padding-block:clamp(96px,13vh,150px) clamp(56px,9vh,110px)}
.hero-layout{display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;align-items:end}
@media (min-width:940px){.hero-layout{grid-template-columns:1.14fr .86fr}}
/* He is cropped mid-thigh: the section's bottom edge does the cutting.
   Never leave air under the cut line. */
.hero-figure{position:relative;margin:0;justify-self:center;width:100%;max-width:520px;
  align-self:end}
@media (min-width:940px){
  .hero-figure{
    position:absolute;z-index:4;margin:0;
    right:max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
    /* Bigger on desktop: scaled up and cropped higher (deeper bleed) so his
       head stays clear of the nav. */
    bottom:calc(-1 * clamp(140px,20vh,260px));
    /* also bounded by viewport height (image is 800x1372) so the head
       never crops off the top on short windows */
    width:min(50%,640px,calc(70vh - 40px));max-width:none;
  }
}
/* Halo: his silhouette measures 2.19:1 against the photo without it. */
.hero-figure::before{
  content:"";position:absolute;left:50%;top:12%;translate:-50% 0;
  width:116%;height:78%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.48),rgba(255,255,255,.16) 58%,transparent 76%);
  filter:blur(6px);z-index:0;
}
.hero-figure img{position:relative;z-index:1;width:100%;
  filter:drop-shadow(0 30px 46px rgba(6,10,32,.55))}
@media (max-width:939px){
  /* Stacked layout: the section must end at the cut line, never at 100svh -
     on tall phones/tablets that left him floating with sky beneath. */
  .hero.scene--full{display:block;min-height:0}
  /* Stacked hero is a full-bleed colour block: the panel runs edge to
     edge from the very top (behind the nav) and the photo + cutout hold
     the bottom. Guaranteed AA on the panel beats white-on-sky. */
  .hero .scene-body{padding-block:0}
  .hero .panel{
    max-width:none;border-radius:0;box-shadow:none;
    -webkit-backdrop-filter:none;backdrop-filter:none;
    margin-inline:calc(-1 * var(--gut));
    padding:clamp(96px,15vh,128px) var(--gut) clamp(30px,5vh,44px);
  }
  .hero-cta{flex-direction:column}
  .hero-cta .b{width:100%}
  .hero-figure{position:relative;z-index:4;margin:clamp(18px,5vw,38px) auto 0;
    max-width:330px;padding-inline:var(--gut);width:100%}
  /* stacked hero: the cue would overlap the panel/figure - drop it */
  .hero .scrollcue{display:none}
  .hero .u-wrap{position:relative}
  .hero-figure img{margin-bottom:calc(-1 * clamp(30px,8vw,70px))}
}
.hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:clamp(22px,2.8vw,32px)}
.hero-cta .b{min-height:52px}

.scrollcue{margin:clamp(24px,4vh,44px) 0 0;display:inline-flex;color:var(--panel-text-2)}
.scrollcue svg{animation:bob 2.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(7px);opacity:1}}

/* ============ WHY JAMES ============ */
.on-paper{background:var(--paper);padding-block:clamp(80px,11vw,150px);position:relative;z-index:2}
.why-head{max-width:760px}
.why-grid{
  display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr;
  margin-top:clamp(34px,4.6vw,64px);
}
@media(min-width:880px){.why-grid{grid-template-columns:repeat(3,1fr)}}
.why-card{margin:0}
/* The rounded/clipped frame is the image itself, not the <figure> - the figure
   now also carries the visible photo credit, and `overflow:hidden` on the
   figure would clip that caption away. */
.why-card figure{margin:0}
.why-card figure img{
  display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  border-radius:clamp(14px,1.6vw,20px);background:var(--paper-2);
  box-shadow:0 24px 50px -32px rgba(12,18,32,.45);
}
.why-card p{margin:clamp(16px,2vw,22px) 0 0;font-size:.99rem;line-height:1.62;color:var(--ink);max-width:44ch}
/* staggered entry, transform+opacity via the IO reveal, not scroll-linked */
.why-grid .why-card:nth-child(2){transition-delay:.09s}
.why-grid .why-card:nth-child(3){transition-delay:.18s}

/* ============ SUPPORT JAMES ============ */
.join-layout{display:grid;gap:clamp(28px,4vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:960px){.join-layout{grid-template-columns:.86fr 1.14fr}}
.frow{display:grid;gap:.85rem;grid-template-columns:1fr}
@media(min-width:520px){.frow.is-two{grid-template-columns:1fr 1fr}}
.fld{margin-bottom:.85rem}
.fld label{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--panel-text-2);margin-bottom:.42rem}
.fld input,.fld select{width:100%;font-family:var(--sans);font-size:1rem;padding:.82rem 1rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.32);background-color:rgba(6,10,26,.18);color:#fff}
.fld input::placeholder{color:var(--panel-text-2);opacity:1}
.fld input:focus,.fld select:focus{background-color:rgba(6,10,26,.32);border-color:var(--signal)}
.fld input[aria-invalid="true"],.fld select[aria-invalid="true"]{border-color:#FFD9CF}
.fld-err{color:#FFD9CF;font-weight:600;font-size:.82rem;margin:.4rem 0 0}
.fld-err[hidden]{display:none}
.formstatus{font-size:.9rem;color:var(--panel-text-2);margin:.8rem 0 0}
.fld select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:2.7rem;min-height:50px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23E8ECFC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.fld select[data-empty="true"]{color:var(--panel-text-2)}
.fld select option{color:var(--ink);background:#fff}
.perm{margin:1.4rem 0 0;padding:1.35rem 0 0;border:0;min-width:0;
  border-top:1px solid rgba(255,255,255,.26)}
.perm legend{float:left;width:100%;padding:0;margin:0 0 1rem;
  font-size:.86rem;color:var(--panel-text-2);line-height:1.55}
.perm legend + *{clear:both}
.perm-grid{display:grid;gap:.55rem;grid-template-columns:1fr}
.perm-box{display:flex;gap:.65rem;align-items:flex-start;font-size:.92rem;cursor:pointer;
  padding:.78rem .9rem;border-radius:12px;background:rgba(6,10,26,.16);transition:background .2s}
.perm-box:hover{background:rgba(6,10,26,.28)}
.perm-box input{margin:.18rem 0 0;accent-color:var(--accent);width:22px;height:22px;flex:none}
.smallprint{font-size:.78rem;color:var(--panel-text-2);margin:1.2rem 0 0;line-height:1.6}
.smallprint a{font-weight:500;text-underline-offset:3px}
.joinform .b{margin-top:1.3rem;width:100%;min-height:52px}
.errsum{border:2px solid #FFD9CF;background:rgba(120,20,8,.5);border-radius:14px;
  padding:1rem 1.1rem;margin-bottom:1.2rem}
.errsum[hidden]{display:none}
.errsum h3{margin:0 0 .5rem;font-size:1rem;font-family:var(--sans);
  text-transform:none;letter-spacing:-.01em;color:#fff}
.errsum ul{margin:0;padding-left:1.1rem}
.errsum a{color:#FFD9CF;font-weight:600}
.joinform .u-note{margin-top:.9rem;color:var(--panel-text-2)}

/* ============ FOOTER ============ */
.foot{background:var(--ink);color:var(--panel-text-2);padding-block:clamp(50px,6vw,80px);
  font-size:.9rem;position:relative;z-index:2}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:820px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr}}
.foot a{text-decoration:none;color:var(--panel-text-2)}
.foot a:hover{color:var(--accent)}
.foot h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:#C9D0DE;margin:0 0 .9rem;font-weight:500}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot .brand{color:#fff}
.foot .brand em{color:var(--accent)}
.motiontog{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);
  padding:.5rem .9rem;min-height:44px;border-radius:999px;font-family:var(--sans);
  font-size:.85rem;font-weight:500;cursor:pointer}
.motiontog[aria-pressed="true"]{background:#fff;color:var(--ink)}
.imprint{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.16);
  font-family:var(--sans);font-size:.8rem;line-height:1.85;color:var(--panel-text-2)}
.linklike{background:none;border:0;padding:0;color:var(--panel-text-2);font:inherit;
  cursor:pointer;text-align:left}
.linklike:hover{color:var(--accent)}

/* ============ COOKIE BANNER ============ */
/* No non-essential cookies exist today - the modal records a choice that
   gates anything added later (PECR: reject must be as easy as accept,
   hence two identical buttons in the same row). Nothing is pre-ticked
   except Necessary, which is locked on. */
.cmodal{position:fixed;inset:0;z-index:96;display:grid;place-items:center;padding:var(--gut)}
.cmodal[hidden]{display:none}
.cmodal-bg{position:absolute;inset:0;background:rgba(6,10,26,.62)}
.cmodal-in{position:relative;width:100%;max-width:560px;
  min-height:0;max-height:min(calc(100dvh - 2*var(--gut)), 100%);overflow:auto;
  background:var(--ink);color:#fff;border:1px solid rgba(255,255,255,.18);
  border-radius:20px;padding:1.35rem 1.4rem;
  box-shadow:0 30px 70px -30px rgba(6,12,40,.85)}
.cmodal-t{font-weight:700;font-size:1.12rem;margin:0 0 .4rem}
.cmodal-x{font-size:.86rem;color:var(--panel-text-2);margin:0 0 1.05rem;line-height:1.55}
.cmodal-x a{color:#fff}

.cmodal-cats{border:0;margin:0 0 1.1rem;padding:0}
.cmodal-cats legend{padding:0;margin:0 0 .5rem;font-size:.72rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--panel-text-2)}
.cmodal-cat{display:flex;gap:.65rem;align-items:flex-start;min-height:48px;
  padding:.6rem .7rem;margin:0 0 .45rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  background:rgba(6,10,26,.18)}
.cmodal-cat:hover{background:rgba(6,10,26,.32)}
.cmodal-cat input{margin:.1rem 0 0;accent-color:var(--accent);width:22px;height:22px;flex:none}
.cmodal-cat-b{flex:1 1 auto;min-width:0}
.cmodal-cat-n{display:block;font-weight:700;font-size:.92rem}
.cmodal-cat-p{display:block;font-size:.8rem;color:var(--panel-text-2);line-height:1.5;margin-top:.12rem}
.cmodal-cat.is-locked{opacity:.72;cursor:default}
.cmodal-cat.is-locked:hover{background:rgba(6,10,26,.18)}
.cmodal-lock{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;font-weight:400;
  color:var(--paper-2);margin-left:.4rem;white-space:nowrap}

.cmodal-b{display:flex;gap:.6rem;flex-wrap:wrap}
.cmodal-b .b{flex:1 1 140px;min-height:48px}
.cmodal-b--save{margin-top:.6rem}
@media(max-width:480px){
  .cmodal-in{padding:1.1rem 1rem;border-radius:16px}
  .cmodal-x{margin-bottom:.8rem;font-size:.82rem}
  .cmodal-cats{margin-bottom:.8rem}
  .cmodal-cat{padding:.5rem .55rem;margin-bottom:.4rem}
  .cmodal-cat-p{font-size:.76rem;line-height:1.45}
  .cmodal-b{display:block}
  .cmodal-b .b{display:block;width:100%}
  .cmodal-b .b + .b{margin-top:.6rem}
}
.cmodal-cat{transition:background .22s cubic-bezier(.2,.7,.3,1)}
html[data-motion="reduce"] .cmodal-cat{transition:none}
@media(prefers-reduced-motion:reduce){.cmodal-cat{transition:none}}

/* ============ REVEAL ============ */
/* Hidden state is gated on html.js (added by the script itself), so a
   blocked or failed script leaves every panel, card and the form
   visible - "content visible by default" has to survive no-JS. */
html.js [data-rise]{opacity:0;transform:translateY(30px);
  transition:opacity .85s cubic-bezier(.2,.7,.3,1),transform .85s cubic-bezier(.2,.7,.3,1)}
html.js [data-rise].is-in{opacity:1;transform:none}

/* ============ SUBTLE MOTION ============ */
.b,.fld input,.fld select,.perm-box{transition:all .22s cubic-bezier(.2,.7,.3,1)}
.b:hover{transform:translateY(-2px)}
.b:active{transform:translateY(0)}
.brand{transition:opacity .2s}.brand:hover{opacity:.82}

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html:not([data-motion="reduce"]) .hero-figure{
      animation:heroRise 1s cubic-bezier(.16,.84,.28,1) both .1s;
    }
    @keyframes heroRise{from{opacity:0;transform:translateY(26px) scale(.985)}to{opacity:1;transform:none}}

    html:not([data-motion="reduce"]) .hero-figure img{
      animation:heroLag linear both;
      animation-timeline:scroll(root block);
      animation-range:0 100vh;
    }
    @keyframes heroLag{to{transform:translateY(9%)}}
  }
}
html[data-motion="reduce"] *,
html[data-motion="reduce"] *::before,
html[data-motion="reduce"] *::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important}
html[data-motion="reduce"] [data-rise]{opacity:1 !important;transform:none !important}
/* the toggle must kill the same motion the OS preference kills - incl.
   the JS parallax's inline transforms and smooth anchor scrolling */
html[data-motion="reduce"]{scroll-behavior:auto}
html[data-motion="reduce"] .scene-media{transform:none !important;inset:0}
html[data-motion="reduce"] .lines .ln > i{transform:none !important}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  [data-rise]{opacity:1 !important;transform:none !important}
  .lines .ln > i{transform:none !important}
  .scene-media{transform:none !important;inset:0}
}
.cleverly-front #wp-admin-bar-root-default,
.cleverly-legal #wp-admin-bar-root-default{display:none}
body.cleverly-front{margin:0}
body.cleverly-legal{margin:0}
.legal{background:var(--paper);color:var(--ink);padding:80px var(--gut)}
.legal .wrap{max-width:760px;margin:0 auto}
/* Legal pages sit on paper, so the shared top nav flips to ink. */
.cleverly-legal .legal{padding-top:clamp(120px,16vh,160px)}
.cleverly-legal .topnav .brand{color:var(--ink)}
.cleverly-legal .topnav .brand em{color:var(--ultra)}


/* Blocksy draws its own tick with input::before on top of the native control,
   which showed two ticks. Native control only, everywhere we render a checkbox. */
.joinform .perm-box input[type="checkbox"]::before,.joinform .perm-box input[type="checkbox"]::after,
.cmodal-cat input[type="checkbox"]::before,.cmodal-cat input[type="checkbox"]::after{content:none!important;display:none!important}

/* Consent group legend: kept for assistive tech (it names the fieldset) but
   not shown — the rows speak for themselves visually. */
.joinform .perm-legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}

/* ============ JOIN: hand-drawn arrow to the first field ============ */
/* A pen stroke from the lede up to the first-name field: filled, tapered
   paths (generated from a centreline with a varying width) rather than a
   uniform SVG stroke, so the weight swells through the bend like ink.
   Desktop: absolute in the copy column — only top/height are set, so its
   horizontal position stays in-flow, right after "campaign."; site.js sets
   --join-arrow-w so the head stops just short of the field. Stacked: a small
   version points down at the form below. Cream on the panel only. */
.join-copy{position:relative}
.join-arrow{display:block;overflow:visible}
.join-arrow__ink{fill:var(--accent);stroke:none}
@media(min-width:960px){
  .join-lede{white-space:nowrap}
  .join-arrow{position:absolute;top:8px;width:var(--join-arrow-w,240px);height:calc(100% - 8px + .35em);max-height:480px;margin-left:.5rem;display:inline}
}
@media(max-width:959px){
  .join-arrow{display:none}
}
/* Ink wipes in from the tail to the tip on reveal; static under reduced motion. */
@media(prefers-reduced-motion:no-preference){
  html:not([data-motion="reduce"]) .join-arrow{clip-path:inset(100% 0 0 0);animation:joinArrowInk 1.1s cubic-bezier(.5,0,.15,1) .45s forwards}
  html:not([data-motion="reduce"]) .join-arrow__ink{opacity:.96}
}
@keyframes joinArrowInk{to{clip-path:inset(0 0 0 0)}}

/* Cloudflare Turnstile sits between the consent smallprint and the submit
   button; give it air on both sides so it reads as its own step. */
.joinform .ff-el-group:has(.ff-el-turnstile){margin-top:.6rem;margin-bottom:0}
.joinform .ff-el-group:has(.ff-el-turnstile iframe){margin-top:1.4rem;margin-bottom:.2rem}
.joinform .ff-el-turnstile{margin-top:1.4rem;display:block}
.joinform .ff-el-group:has(.ff-el-turnstile) .ff-el-turnstile{margin-top:0}

/* ============ THANKS (post-signup) ============ */
.thanks{min-height:100svh;display:flex;align-items:center}
.thanks .scene-body{padding-block:clamp(120px,16vh,170px) clamp(56px,9vh,110px);width:100%}
.next{list-style:none;margin:1.4rem 0 0;padding:1.3rem 0 0;display:grid;gap:.7rem;border-top:1px solid rgba(255,255,255,.18)}
.next li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;line-height:1.55;color:#fff}
.next svg{flex:none;margin-top:.18em;color:var(--accent)}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.6rem}
@media(max-width:600px){.cta{flex-direction:column}.cta .b{width:100%}}
@media(max-width:939px){.thanks .panel{margin-inline:calc(-1 * var(--gut));border-radius:0}}

/* ============ FLUENT FORMS PARITY ============ */
/* The join form is rendered by Fluent Forms, whose own stylesheet is dequeued
   on the front page (cleverly-form.php) so the reference styles above are the
   only ones in play. These rules only map FF's wrapper classes onto that
   reference layout - no colour or gradient value is introduced here. */

/* FF wraps every field in .ff-el-group (we set .fld / .perm-item on top of it)
   and its label in .ff-el-input--label; neither carries layout of its own. */
.joinform .ff-el-group{margin:0}
.joinform .fld.ff-el-group{margin-bottom:.85rem}
.joinform .ff-el-input--label,
.joinform .ff-el-input--content{display:block}
.joinform .ff-el-input--label label{margin:0}

/* FF's two-column container: the reference .frow grid governs the columns,
   so neutralise the inline flex-basis FF prints on each cell. */
.joinform .ff-t-container.frow{margin:0}
.joinform .ff-t-container.frow > .ff-t-cell{flex-basis:auto !important;min-width:0}

/* Required-field asterisks come from FF; the reference labels carry none. */
.joinform .ff-el-is-required.asterisk-right label::after,
.joinform .ff-el-is-required.asterisk-left label::before{content:none}

/* Consent rows: FF nests label inside .ff-el-group.perm-item > .ff-el-form-check.
   47px keeps each row above the 44px minimum touch target. */
.joinform .perm-item{margin:0}
.joinform .perm-item .ff-el-form-check{margin:0}
/* Scoped to .joinform so the reference .perm-box rule above keeps its
   align-items:flex-start everywhere else. 47px clears the 44px touch target. */
.joinform .perm-box{min-height:47px;align-items:center}
.joinform .perm-box > span{flex:1 1 auto}

/* The submit button keeps its reference .b .b--white styling; strip FF's own
   wrapper spacing and text alignment. */
.joinform .ff_submit_btn_wrapper{margin:0;text-align:left}

/* FF's server-side validation messages, styled like the client-side .fld-err
   so a JS-off submission looks the same as a JS-on one. */
.joinform .error.text-danger,
.joinform .ff-el-is-error .text-danger{color:#FFD9CF;font-weight:600;font-size:.82rem;
  margin:.4rem 0 0;list-style:none;padding:0}
.joinform .ff-errors-in-stack{border:2px solid #FFD9CF;background:rgba(120,20,8,.5);
  border-radius:14px;padding:1rem 1.1rem;margin-bottom:1.2rem;color:#fff}
.joinform .ff-errors-in-stack .error{color:#FFD9CF}

/* Confirmation message shown in place of the form after a successful submit. */
.joinform-wrap .ff-message-success{border:1px solid rgba(255,255,255,.26);border-radius:14px;
  padding:1.1rem 1.2rem;color:#fff;background:rgba(6,10,26,.28)}

/* Blocksy (parent theme) styles Fluent Forms controls through its own
   `.ff-inherit-theme-style ...` / `.fluentform .ff-el-group button.ff-btn`
   selectors, which outrank the reference `.fld input` and `.b--white` rules
   above. These re-assert the reference values at a higher specificity - the
   declarations are copied verbatim from the reference rules, no new values. */
.joinform.frm-fluent-form .fld .ff-el-input--content input,
.joinform.frm-fluent-form .fld .ff-el-input--content select{width:100%;height:auto;
  font-family:var(--sans);font-size:1rem;line-height:normal;padding:.82rem 1rem;border-radius:12px;
  border:1px solid rgba(255,255,255,.32);background-color:rgba(6,10,26,.18);color:#fff}
.joinform.frm-fluent-form .fld .ff-el-input--content select{padding-right:2.7rem;min-height:50px}
.joinform.frm-fluent-form .fld .ff-el-input--content input:focus,
.joinform.frm-fluent-form .fld .ff-el-input--content select:focus{background-color:rgba(6,10,26,.32);
  border-color:var(--signal)}
.joinform.frm-fluent-form .fld .ff-el-input--content input[aria-invalid="true"],
.joinform.frm-fluent-form .fld .ff-el-input--content select[aria-invalid="true"]{border-color:#FFD9CF}
.joinform.frm-fluent-form .perm-box input[type="checkbox"]{width:22px;height:22px;
  min-width:22px;min-height:22px;top:auto;margin:.18rem 0 0;margin-inline-end:0;
  accent-color:var(--accent);appearance:auto;-webkit-appearance:auto;flex:none}
.joinform.frm-fluent-form .ff-el-group button.ff-btn.b--white{margin-top:1.3rem;
  width:100%;min-height:52px;padding:.88rem 1.6rem;border-radius:999px;
  background-color:var(--accent);color:var(--ultra);border:0}
.joinform.frm-fluent-form .ff-el-group button.ff-btn.b--white:hover{
  background-color:#fff;color:var(--ultra)}

/* Blocksy resets `a{text-decoration:none}` globally. The reference relies on
   the browser's default underline for body links (it opts out explicitly on
   .brand, .b and .foot a), so restore it here. */
a{text-decoration:underline}

/* Blocksy styles focus rings through selectors such as
   `.ff-inherit-theme-style .ff-el-form-control:not([size]):not([multiple])`
   (specificity 0,4,0), which outranks the reference `:focus-visible` rules
   near the top of this file - on the join form it replaced the ring with a
   transparent outline, i.e. no visible focus indicator at all. The two rules
   below are those reference rules repeated verbatim, with the selector
   prefixed by repeated `:root` purely to raise specificity. No new values. */
:root:root:root:root :focus-visible{outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px var(--signal);border-radius:4px}
:root:root:root:root .panel :focus-visible,
:root:root:root:root .foot :focus-visible{outline-color:#fff;box-shadow:0 0 0 6px rgba(8,12,32,.9)}
/* Blocksy also sets outline-width/-color on its own form-field :focus rule,
   which survives the shorthand above; re-assert the reference panel ring on
   the join form's text fields and select. */
:root:root:root .joinform.frm-fluent-form .fld .ff-el-input--content input:focus-visible,
:root:root:root .joinform.frm-fluent-form .fld .ff-el-input--content select:focus-visible{
  outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px rgba(8,12,32,.9)}

/* Blocksy paints every heading with its own --theme-headings-color, which
   turned the hero and join headings dark instead of white. The reference
   leaves h1-h6 to inherit from their section (white on the scenes, ink on
   the paper section), so restore that inheritance. */
h1,h2,h3,h4,h5,h6{color:inherit}