/* ============================================================
   BLUEPRINT FANDORSEMENT - landing.css  v1.0.3
   Source of truth: preview3.html (corrected colors + layout)
   Colors: #000000 black | #4B76BD blue | #D9D9D9 gray | #FFFFFF white
============================================================ */

/* ---- Nav: logo left, links right, visible on all pages ---- */

/* ---- PRESSIO font (display) ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{font-size:16px;-webkit-font-smoothing:antialiased;}
body{font-family:"Nudica",system-ui,sans-serif;font-weight:300;background: #D9D9D9;color:#fff;overflow-x:hidden;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

:root {
  --blue:   #2261A5;
  --black:  #000000;
  --gray:   #D9D9D9;
  --white:  #FFFFFF;
  --color-white: #FFFFFF;
  --disp:   "pressio-compressed","Arial Narrow","Impact",sans-serif;
  --body:   "Nudica",system-ui,sans-serif;
  --script: "Megasta",cursive;
  --expo:   cubic-bezier(0.16,1,0.3,1);
  --out:    cubic-bezier(0.25,1,0.5,1);
}

/* Logo */
.site-header__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-header__logo svg {
  height: 28px;
  width: auto;
  fill: #ffffff;
}

/* ================================================================
   HEADER - logo left, nav right
================================================================ */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem 2rem;
  transition:background .4s ease;
}
.site-header.is-scrolled {
  background:rgba(0,0,0,0.88);
  backdrop-filter:blur(14px);
}
.site-header svg { height:20px; width:auto; fill:#fff; }

/* ================================================================
   S1 HERO
   - Type fills full viewport width, left edge flush
   - No container padding - type bleeds to edges
   - "Get" small script top-right of headline block
   - "Ready" small script bottom-left
   - Eyebrow small caps, left-aligned
   - CTA centered below
================================================================ */
.section-hero {
  position:relative;
  height:100svh;
  min-height:600px;
  background:#000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.hero__video {
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  pointer-events:none;
}

/* Gradient: transparent at top, solid black at bottom */
.hero__overlay {
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.3) 50%,
    rgba(0,0,0,1) 100%
  );
  pointer-events:none;
}

.hero__halftone {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,0.09) 1.5px,transparent 1.5px);
  background-size:20px 20px;
}
.hero__vignette {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(ellipse 75% 80% at 50% 50%,
    transparent 15%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.85) 100%);
}

.hero__inner {
  position:relative; z-index:3;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:0 clamp(1.5rem,5vw,5rem);
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}

/* Eyebrow: centered, small caps, white */
.hero__eyebrow {
  font-family:var(--body);
  font-size:0.65rem;
  font-weight:400;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,1);
  width:100%;
  margin-bottom:0.75rem;
  opacity:0;
  transform:translateY(8px);
  animation:fadeUp .5s var(--out) .1s forwards;
}

/* Headline wrap */
.hero__headline-wrap {
  position:relative;
  width:100%;
  margin-bottom:3rem;
}

/* "Get" - old standalone wrapper, kept for safety */
.hero__get, .hero__ready { display:none; }

.hero__headline {
  font-family:var(--disp);
  font-weight: 700;
  font-size:clamp(6.5rem,20vw,300px);
  line-height:0.88;
  letter-spacing:-0.01em;
  text-transform:uppercase;
  color:var(--blue);
  display:block;
  width:100%;
  text-align:center;
}

h2.hero__subheading {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(2.5rem, 3vw, 75px);
    line-height: 0.88;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 60px;
}

/* Shrink-wrap to actual text width so scripts anchor to text edges */
.hero__line-wrap {
  display:block;
  width:fit-content;
  margin:0 auto;
  position:relative;
  opacity:0;
  transform:translateY(28px);
}
.hero__line-wrap--1 { animation:fadeUp .6s var(--expo) .28s forwards; }
.hero__line-wrap--2 { animation:fadeUp .6s var(--expo) .40s forwards; }

.hero__line {
  display:block;
  white-space:nowrap;
}

/* "Get" - top-right of line 1 */
.hero__script-get {
  position:absolute;
  top:-0.2em;
  right:-0.2em;
  width:0.5em;
  transform:rotate(-8deg);
  transform-origin:bottom left;
  color:rgba(255,255,255,0.65);
  pointer-events:none;
}

/* "Ready" - bottom-left of line 2 */
.hero__script-ready {
  position:absolute;
  bottom:-0.1em;
  left:-0.40em;
  width:0.7em;
  transform:rotate(-5deg);
  transform-origin:top right;
  color:rgba(255,255,255,0.65);
  pointer-events:none;
}

.hero__script-get svg,
.hero__script-ready svg {
  width:100%; height:auto; display:block; overflow:visible;
}
.hero__script-get .hw-fill-path,
.hero__script-ready .hw-fill-path { fill:currentColor; }

/* Prevent parent containers clipping the SVG paths */
.hero__script-get,
.hero__script-ready { overflow:visible; }
.hero__line-wrap { overflow:visible; }
.hero__headline { overflow:visible; }
.hero__inner { overflow:visible; }

/* CTA */
.hero__cta {
  margin-top:2.5rem;
  opacity:0; transform:translateY(10px);
  animation:fadeUp .5s var(--out) .8s forwards;
}
.btn-pill {
  display:inline-flex; align-items:center;
  padding:.6rem 1.6rem;
  border-radius:100px;
  border:1.5px solid var(--blue);
  background:transparent;
  color:#fff;
  font-family:var(--body); font-weight:500;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  cursor:pointer; transition:background .2s ease;
  white-space:nowrap;
}
.btn-pill:hover{background:var(--blue);}

/* ================================================================
   S2 JOIN THE FAN COMMUNITY
================================================================ */
.section-join {
  position:relative;
  height:100svh;
  min-height:600px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  background:#000 center/cover no-repeat;
  overflow:hidden;
  z-index:2;
}
.join__heading,
.join__subtext,
.join__form {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .7s var(--out), transform .7s var(--out);
}
.join__subtext { transition-delay:.12s; }
.join__form    { transition-delay:.26s; }

.section-join.is-visible .join__heading,
.section-join.is-visible .join__subtext,
.section-join.is-visible .join__form {
  opacity:1;
  transform:none;
}

.join__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0.25) 0%,
    rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.join__content {
  position:relative; z-index:2;
  width:100%;
  max-width:900px;
  padding:0 clamp(1.5rem,5vw,5rem);
  display:flex; flex-direction:column; align-items:center;
}
.join__heading {
  font-family:var(--disp);
  font-weight: 700;
  font-size:clamp(5rem,7vw,150px);
  line-height:0.88;
  text-transform:uppercase;
  letter-spacing:-0.01em;
  color:#fff;
  margin-bottom:1.5rem;
  text-align:center;
}

/* Circle video around "FAN" */
.circle-word {
  display:inline-block;
  position:relative;
  white-space:nowrap;
}

/* Video container - centered over the word */
.circle-video-wrap {
  position:absolute;
  left:50%; top:45%;
  transform:translate(-50%, -50%);
  width:160%; height:220%;
  pointer-events:none;
  overflow:visible;
}

.circle-video {
  width:100%; height:100%;
  object-fit:contain;
  display:block;
  filter:invert(1) sepia(1) saturate(6) hue-rotate(185deg) brightness(2.5) opacity(0.5);
}

.join__subtext {
  font-family:var(--body); font-weight:300;
  font-size:.9rem; line-height:1.65;
  color:rgba(255,255,255,.6);
  max-width:400px; margin:0 auto 2rem;
}
.join__form {
  display:flex; align-items:center;
  width:100%; max-width:400px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:100px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(8px);
  transition:border-color .25s ease;
}
.join__form:focus-within { border-color:rgba(255,255,255,.55); }
.join__input {
  flex:1; background:transparent; border:none; outline:none;
  padding:.85rem 1.4rem;
  font-family:var(--body); font-size:.82rem;
  font-weight:300; color:#fff;
}
.join__input::placeholder { color:rgba(255,255,255,.4); }
.join__submit {
  width:2.2rem; height:2.2rem; margin-right:.25rem;
  border-radius:50%; background:#fff; border:none;
  cursor:pointer; display:flex; align-items:center;
  justify-content:center; color:#000; flex-shrink:0;
  transition:background .2s ease;
}
.join__submit:hover { background:rgba(255,255,255,.85); }

/* ================================================================
   Formidable Stuff
================================================================ */

/* ── Join - Formidable overrides ─────────────────────────────── */
.join__form-wrap .frm_forms {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

/* Hide Formidable labels and required star */
.join__form-wrap .frm_primary_label,
.join__form-wrap .frm_screen_reader,
.join__form-wrap legend {
  display: none;
  padding:0px;
}

.join__form-wrap .frm_primary_label {color:var(--color-white); font-family: var(--font-primary);
  font-weight: 100; }



/* ── Pill row: email + submit ─────────────────────────────────── */
.join__form-wrap .frm_fields_container {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Wrap email field + submit button side by side inside a pill */
.join__form-wrap #frm_field_8_container,
.join__form-wrap #frm_field_9_container {
  margin: 0;
}

/* Create the pill by targeting the two containers together */
.join__form-wrap .frm_fields_container {
  /* pill wrapper via pseudo-grouping handled below */
}

.join__form-wrap #frm_field_8_container {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  gap: 8px;
}

.join__form-wrap #frm_field_8_container input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding: 8px 0;
  min-width: 0;
}

.join__form-wrap #frm_field_8_container input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* Hide the actual field container for submit - we inject the button into the pill */
.join__form-wrap #frm_field_9_container {
  display: none; /* hidden - button moved via JS below */
}

/* ── Submit button ────────────────────────────────────────────── */
.join__form-wrap .frm_button_submit {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7h12M7 1l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  border: none;
  cursor: pointer;
  font-size: 0;
  color: transparent;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.join__form-wrap .frm_button_submit:hover {
  background-color: var(--blue);
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 14 14' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7h12M7 1l6 6-6 6'/%3E%3C/svg%3E");
  transform: translateX(2px);
}

/* ── Opt-in checkbox ──────────────────────────────────────────── */
.join__form-wrap #frm_field_10_container {
  margin-top: 14px;
}

.join__form-wrap .frm_opt_container {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.join__form-wrap .frm_checkbox label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.join__form-wrap .frm_checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.join__form-wrap .frm_checkbox input[type="checkbox"]:checked {
  background: var(--blue);
  border-color: var(--blue);
}

.join__form-wrap .frm_checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

/* ── Success / error messages ─────────────────────────────────── */
.join__form-wrap .frm_message {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  margin-top: 1rem;
  padding: 0;
  background: transparent;
  border: none;
}


/* Inline field errors */
.join__form-wrap .frm_error {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: #ff6b6b;
  margin-top: 4px;
  padding-left: 20px;
}

/* ── Formidable error banner ──────────────────────────────────── */
.join__form-wrap .frm_error_style {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-top: 10px;
  padding: 0;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none !important;
}

/* ================================================================
   S3 STATEMENT
================================================================ */
.section-statement {
  position:relative;
  min-height:125svh;
  background:#D9D9D9;
  border-radius:2rem 2rem 0 0;
  margin-top:-3rem;
  z-index:3;
  overflow:visible;
  color:#000;
  display:flex;
  align-items:center;
}

.statement__inner {
  position:relative;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* Text block - full width, centered, above images */
.stmt-text {
  max-width:100%;
  width:100%;
  text-align:center;
  position:relative;
  z-index:2;
  overflow:visible;
}

/* Line wrap - inline-block creates a proper containing block for absolute SVGs */
.stmt-line-wrap {
  display:inline-block;
  position:relative;
  overflow:visible;
  vertical-align:top;
}

/* Single continuous text block */
.stmt-body {
  display:block;
  text-align:center;
  position:relative;
  z-index:2;
  margin:0;
  overflow:visible;
}

/* All statement text - single animated block */
.stmt-all {
  font-family:var(--disp);
  font-weight: 700;
  font-size:clamp(5rem,9vw,300px);
  line-height:.9;
  letter-spacing:-.01em;
  text-transform:uppercase;
  display:inline;
}
.stmt-all .word {
  display:inline;
  color:#CACACA;
  transition:color .4s var(--out);
}
.stmt-all .word.is-lit { color:#000000; }

/* "Our" - top-right of solid block */
.stmt-script-our {
    position: absolute;
    top: -6rem;
    right: 6rem;
    width: clamp(60px, 7vw, 300px);
    transform: rotate(-7deg);
    transform-origin: bottom left;
    color: var(--blue);
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    display: block;
    line-height: 0;
    opacity: 0.6;
}

/* "Story" - bottom-left of ghost block */
.stmt-script-story {
    position: absolute;
    bottom: -4rem;
    left: 12rem;
    width: clamp(70px, 8vw, 300px);
    transform: rotate(-9deg);
    transform-origin: top right;
    color: var(--blue);
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    display: block;
    line-height: 0;
    opacity: 0.6;
}

.stmt-script-our svg,
.stmt-script-story svg {
  width:100%; height:auto; display:block; overflow:visible;
}
.stmt-script-our .hw-fill-path,
.stmt-script-story .hw-fill-path { fill:currentColor; }

/* Prevent clipping */
.stmt-line-wrap { overflow:visible; }
.stmt-text { overflow:visible; }
.statement__inner { overflow:visible; }

/* Top-right photo - behind text, natural size */
.stmt-img-right {
  position:absolute;
  top:0; right:0;
  z-index:0;
  overflow:visible;
}
.stmt-img-right .stmt-img,
.stmt-img-right img {
  display:block;
  width:auto;
  max-width:clamp(200px,30vw,420px);
  height:auto;
  border-radius:0;
}

/* Bottom-left photo - behind text, natural size */
.stmt-img-left {
  position:absolute;
  bottom:-2rem; left:0;
  z-index:0;
  overflow:visible;
}
.stmt-img-left .stmt-img,
.stmt-img-left img {
  display:block;
  width:auto;
  max-width:clamp(120px,30vw,400px);
  height:auto;
  border-radius:0;
}

/* ================================================================
   CONTAINER
================================================================ */
.container {
  width:100%; max-width:1440px;
  margin:0 auto;
  padding:0 clamp(1.5rem,4vw,5rem);
}

/* GPU compositing hints for overlapping sections */
.section-statement,
.section-pillars,
.section-who,
.site-footer {
  will-change: transform;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--out),transform .8s var(--out);
}
.reveal.is-visible{opacity:1;transform:none;}
.reveal-d1{transition-delay:.12s;} .reveal-d2{transition-delay:.26s;}

@keyframes fadeUp { to{opacity:1;transform:none;} }

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:900px){
  @media (max-width: 768px) {

    .stmt-script-our {
        top: -3rem;
        right: 3rem;
        width: clamp(4rem, 7vw, 300px);
    }

    .stmt-script-story {
        bottom: -2rem;
        left: 0;
        width: clamp(4rem, 8vw, 300px);
    }

    .stmt-img-right {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        margin-bottom: 1.5rem;
		display:none;
    }

    .stmt-img-right img {
        max-width: 100%;
        width: 100%;
    }

    .stmt-img-left {
        position: relative;
        bottom: auto;
        left: auto;
        width: 60%;
        margin-top: 2rem;
        margin-left: auto;
		display:none;
    }

    .stmt-img-left img {
        max-width: 100%;
        width: 100%;
    }
	  
	  .footer__photo {width:100%;}
	  .footer__photo-img {object-position:center center}
	  
	  #statement {padding-bottom: clamp(10rem, 8vw, 8rem)}

}
  .stmt-text{max-width:100%;}
  .stmt-story{display:none;}
  .footer__wordmark{max-width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .hero__headline span,.hero__eyebrow,.hero__cta,.reveal{
    animation:none!important;opacity:1!important;transform:none!important;}
  .circle-word ellipse{stroke-dashoffset:0!important;}
  .stmt-ghost .word{color:rgba(0,0,0,.82)!important;}
  .hw-clip-rect{width:9999px!important;}
}
/* ================================================================
   S5 MISSION / THE PROBLEM
================================================================ */
.section-mission {
    position: relative;
    background: var(--black);
    z-index: 5;
    padding: clamp(5rem, 10vw, 10rem) 0;
    color: var(--white);
    border-radius: 2rem 2rem 0 0;
    margin-top: -3rem;
}

.section-mission .mission__inner {
    max-width: 900px;
}

.mission__eyebrow {
    font-family: var(--body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 1.5rem;
}

.mission__headline {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 3rem;
}

.mission__body {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.mission__para {
    font-family: var(--body);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
    max-width: 720px;
}

.mission__kicker {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 42px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--blue);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    padding-top: 2.5rem;
    margin-top: 1rem;
}

/* ================================================================
   S6 PILLARS / FAN POWERED ADVANTAGE
================================================================ */
.section-pillars {
    position: relative;
    background: var(--gray);
    z-index: 6;
    padding: clamp(5rem, 10vw, 10rem) 0;
    color: var(--black);
    border-radius: 2rem 2rem 0 0;
    margin-top: -3rem;
}

.pillars__eyebrow {
    font-family: var(--body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--blue);
    margin-bottom: 2rem;
}

.pillars__intro {
    font-family: var(--body);
    font-size: clamp(0.9rem, 1.2vw, 1.05rem);
    font-weight: 300;
    line-height: 1.75;
    color: rgba(0, 0, 0, 0.6);
    max-width: 720px;
    margin-bottom: 4rem;
}

.pillars__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
}

.pillar-card {
    background: var(--black);
    padding: clamp(2rem, 4vw, 3.5rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pillar-card:first-child {
    border-radius: 1rem 0 0 1rem;
}

.pillar-card:last-child {
    border-radius: 0 1rem 1rem 0;
}

.pillar-card__number {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 56px);
    line-height: 1;
    color: var(--blue);
    letter-spacing: -0.02em;
}

.pillar-card__title {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.2vw, 28px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    margin: 0;
}

.pillar-card__desc {
    font-family: var(--body);
    font-size: clamp(0.8rem, 1vw, 0.9rem);
    font-weight: 300;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    margin-top: auto;
}

/* ================================================================
   S7 WHO WE ARE
================================================================ */
.section-who {
    position: relative;
    background: var(--blue);
    z-index: 7;
    padding: clamp(5rem, 10vw, 10rem) 0;
    color: var(--white);
    border-radius: 2rem 2rem 0 0;
    margin-top: -3rem;
}

.who__eyebrow {
    font-family: var(--body);
    font-size: 0.65rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2.5rem;
}

.who__list {
    list-style: none;
    padding: 0;
    margin: 0 0 4rem;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.who__item {
    font-family: var(--disp);
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.who__item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.who__item-icon {
    display: inline-block;
    width: clamp(10px, 1vw, 14px);
    height: clamp(10px, 1vw, 14px);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    flex-shrink: 0;
}

.who__cta {
    display: flex;
    justify-content: flex-start;
}

.btn-pill--white {
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--white);
}

.btn-pill--white:hover {
    background: var(--white);
    color: var(--blue);
}

/* ================================================================
   RESPONSIVE - new sections
================================================================ */
@media (max-width: 768px) {
    .pillars__grid {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .pillar-card:first-child { border-radius: 1rem 1rem 0 0; }
    .pillar-card:last-child  { border-radius: 0 0 1rem 1rem; }

    .who__item {
        font-size: clamp(1.5rem, 6vw, 42px);
    }
}

/* ================================================================
   HERO V2 - BRING HOME THE DREAM
================================================================ */

.hero__script-home {
  position: absolute;
  top: -0.2em; right: -0.2em;
  width: 0.5em;
  transform: rotate(-8deg);
  transform-origin: bottom left;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
  overflow: visible;
}

.hero__script-dream {
  position: absolute;
  bottom: -0.1em; left: -0.40em;
  width: 0.7em;
  transform: rotate(-5deg);
  transform-origin: top right;
  color: rgba(255,255,255,0.65);
  pointer-events: none;
  overflow: visible;
}

.hero__script-home svg,
.hero__script-dream svg { width:100%; height:auto; display:block; overflow:visible; }

.hero__script-home .hw-fill-path,
.hero__script-dream .hw-fill-path { fill:currentColor; }

.hero__script-home,
.hero__script-dream { overflow:visible; }

.hero__cta--double {
  display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap; justify-content:center;
  margin-top:2.5rem;
  opacity:0; transform:translateY(10px);
  animation:fadeUp .5s var(--out) .8s forwards;
}

.btn-pill--solid { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-pill--solid:hover { background:#1a4f8a; border-color:#1a4f8a; }

.btn-pill--outline { background:transparent; border-color:rgba(255,255,255,0.5); color:#fff; }
.btn-pill--outline:hover { background:rgba(255,255,255,0.08); border-color:#fff; }

/* ================================================================
   HOW IT WORKS SECTION
================================================================ */

.section-how {
  background:#000;
  padding:8rem 0 0;
  overflow-x:hidden;
}

.how__wrap {
  max-width:1300px;
  margin:0 auto;
  padding-left:clamp(1.5rem,5vw,5rem);
  padding-right:clamp(1.5rem,5vw,5rem);
}

.how__intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem;
  align-items:flex-end;
  padding-top:0;
  padding-bottom:4rem;
}

.how__headline {
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(4rem,9vw,8rem);
  line-height:0.88;
  text-transform:uppercase;
  color:#fff;
  letter-spacing:-0.02em;
  margin:0;
}

.how__body {
  font-family:var(--body);
  font-size:0.9rem;
  line-height:1.75;
  color:rgba(255,255,255,0.6);
  margin:0;
  align-self:flex-end;
  padding-bottom:0.25rem;
}

.how__rule {
  border:none;
  border-top:1px solid rgba(255,255,255,0.12);
  margin:0;
}

.how__step {
  display:grid;
  grid-template-columns:80px 1fr 1fr;
  gap:2.5rem;
  align-items:center;
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.how__step-num {
  font-family:var(--body);
  font-size:0.75rem;
  color:rgba(255,255,255,0.35);
  letter-spacing:0.06em;
}

.how__step-title {
  font-family:var(--body);
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
  line-height:1.5;
  margin:0;
}

.how__step-copy {
  font-family:var(--body);
  font-size:0.85rem;
  color:rgba(255,255,255,0.5);
  margin:0;
  line-height:1.6;
}

.how__ticker {
  background:var(--blue);
  padding:1.1rem 0;
  overflow:hidden;
  white-space:nowrap;
  margin:0;
}

.how__ticker-track {
  display:inline-flex;
  animation:ticker-scroll 22s linear infinite;
  will-change:transform;
  backface-visibility:hidden;
}

.how__ticker-item {
  font-family:var(--disp);
  font-weight:700;
  font-size:clamp(2.5rem,4.5vw,4rem);
  text-transform:uppercase;
  color:#fff;
  letter-spacing:-0.01em;
  line-height:1;
  white-space:nowrap;
  padding-right:4rem;
}

@keyframes ticker-scroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

.how__ticker:hover .how__ticker-track { animation-play-state:paused; }

@media (max-width:900px) {
  .how__intro { grid-template-columns:1fr; gap:2rem; padding-bottom:3rem; }
  .how__step { grid-template-columns:48px 1fr; grid-template-rows:auto auto; gap:1rem 1.5rem; }
  .how__step-copy { grid-column:2; }
}

@media (max-width:600px) {
  .hero__cta--double { flex-direction:column; align-items:center; width:100%; }
  .hero__cta--double .btn-pill { width:100%; justify-content:center; }
}

/* end of landing.css */