/* =============================================================
   Mitchell Martin Case Study — page styles
   Built on NewCombin Design System
   ============================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--nc-seasalt);color:var(--nc-dark-gray);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}

/* ------------ Container ------------ */
.cs-wrap{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:32px}
@media (max-width:960px){.cs-wrap{padding-inline:24px}}
@media (max-width:640px){.cs-wrap{padding-inline:16px}}

/* ------------ Buttons ------------ */
.btn{font:700 16px/1 var(--font-display);letter-spacing:.5px;border-radius:999px;padding:16px 24px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:box-shadow var(--dur-base) var(--ease-out),background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out)}
.btn .arr{display:inline-flex;align-items:center}
.btn-primary{background:var(--nc-orange);color:var(--nc-seasalt)}
.btn-primary:hover{background:#ed8c22;box-shadow:var(--shadow-glow-orange)}
.btn-ghost-light{background:transparent;border:2px solid rgba(255,255,255,.7);color:var(--nc-seasalt);padding:14px 22px}
.btn-ghost-light:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-ghost-dark{background:transparent;border:2px solid var(--nc-dark-gray);color:var(--nc-dark-gray);padding:14px 22px}
.btn-ghost-dark:hover{background:var(--nc-dark-gray);color:var(--nc-seasalt)}

/* ------------ Eyebrow ------------ */
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--nc-orange);margin:0;display:inline-flex;align-items:center;gap:10px}
.eyebrow.on-dark{color:var(--nc-fawn)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}

/* ============================================================
   NAVIGATION — promoted from Design System (glass over hero)
   ============================================================ */
.cs-nav-wrap{position:sticky;top:0;z-index:50;padding:16px 32px 0;transition:opacity .3s cubic-bezier(.25,.46,.45,.94),transform .3s cubic-bezier(.25,.46,.45,.94)}
.cs-nav-wrap.is-hidden{opacity:0;transform:translateY(-16px);pointer-events:none}
.cs-nav{max-width:var(--container-max);margin-inline:auto;height:94px;border-radius:16px;background:rgba(64,64,64,.75);border:2px solid rgba(250,250,250,.15);backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);display:flex;align-items:center;justify-content:space-between;padding:23px 29px;gap:32px}
.cs-nav__logo-link{display:inline-flex;align-items:center;flex:none}
.cs-nav__logo{height:31px;width:auto;display:block}
.cs-nav__row{display:contents}

.cs-nav__links{display:flex;flex:1;justify-content:flex-end;gap:16px;align-items:center;padding:0 16px;list-style:none;margin:0}
.cs-nav__links a{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:1px;line-height:32px;color:var(--nc-seasalt);padding:8px 16px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:background .22s var(--ease-out);text-decoration:none}
.cs-nav__links a:hover{background:rgba(255,255,255,.10)}
.cs-nav__links a svg{width:14px;height:14px;opacity:.85}

/* Dropdown — Solutions */
.cs-nav__dd{position:relative;display:inline-flex;align-items:center}
.cs-nav__dd-trigger{cursor:pointer}
.cs-nav__dd-trigger svg{transition:transform .2s ease}
.cs-nav__dd:hover .cs-nav__dd-trigger,.cs-nav__dd:focus-within .cs-nav__dd-trigger{background:rgba(255,255,255,.10)}
.cs-nav__dd:hover .cs-nav__dd-trigger svg,.cs-nav__dd:focus-within .cs-nav__dd-trigger svg{transform:rotate(180deg)}
.cs-nav__dd-menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px);min-width:220px;background:rgba(40,40,40,.92);border:1px solid rgba(250,250,250,.12);border-radius:14px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;box-shadow:0 16px 48px rgba(0,0,0,.4);z-index:60}
.cs-nav__dd:hover .cs-nav__dd-menu,.cs-nav__dd:focus-within .cs-nav__dd-menu{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.cs-nav__dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.cs-nav__dd-menu a{font:600 15px/1.3 var(--font-display);letter-spacing:.5px;color:var(--nc-seasalt);padding:10px 16px;border-radius:8px;text-decoration:none;white-space:nowrap;display:block}
.cs-nav__dd-menu a:hover{background:rgba(234,127,10,.15);color:#fff}

.cs-nav__apply{display:inline-flex;align-items:center;justify-content:center;height:35px;padding:0 18px;margin-right:8px;border-radius:999px;font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:1px;color:var(--nc-seasalt);background:transparent;border:2px solid var(--nc-orange);text-decoration:none;cursor:pointer;transition:background 180ms ease}
.cs-nav__apply:hover{background:rgba(234,127,10,.10)}

.cs-nav__cta{font-family:var(--font-display);font-weight:600;font-size:16px;letter-spacing:1px;line-height:19px;background:var(--nc-orange);color:var(--nc-seasalt);border:none;border-radius:999px;padding:8px 16px;height:35px;display:inline-flex;align-items:center;gap:8px;flex:none;cursor:pointer;text-decoration:none;transition:box-shadow .22s var(--ease-out)}
.cs-nav__cta:hover{box-shadow:var(--shadow-glow-orange)}

.cs-nav__toggle{display:none;background:transparent;border:none;color:var(--nc-seasalt);padding:8px;cursor:pointer}

.cs-nav__mobile{display:none}

@media (max-width:1024px){
  .cs-nav-wrap{padding:8px 16px 0}
  .cs-nav{height:64px;padding:0 16px}
  .cs-nav__logo{height:24px}
  .cs-nav__links{display:none}
  .cs-nav__apply{display:none !important}
  .cs-nav .cs-nav__cta{display:none !important}
  .cs-nav__toggle{display:inline-flex;color:var(--nc-orange);padding:8px}

  /* Mobile collapsible group */
  .cs-nav__mobile-group{display:flex;flex-direction:column;align-items:center;gap:0;width:100%}
  .cs-nav__mobile-trigger{background:transparent;border:none;color:var(--nc-seasalt);font-family:var(--font-display);font-weight:700;font-size:22px;line-height:28px;letter-spacing:.5px;padding:4px 12px;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
  .cs-nav__mobile-trigger svg{width:16px;height:16px;transition:transform .2s ease}
  .cs-nav__mobile-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}
  .cs-nav__mobile-sub{display:none;flex-direction:column;align-items:center;gap:10px;margin:8px 0 4px;padding:10px 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10);width:100%}
  .cs-nav__mobile-sub a{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:24px;letter-spacing:.5px;color:rgba(250,250,250,.85);text-decoration:none;padding:4px 12px}
  .cs-nav__mobile-sub a:hover{color:var(--nc-orange)}
  .cs-nav__mobile-group.is-open .cs-nav__mobile-sub{display:flex}

  .cs-nav-wrap.is-open{position:fixed;left:0;right:0;top:0;padding:8px 16px 0;max-height:100vh;overflow-y:auto}
  .cs-nav-wrap.is-open .cs-nav{height:auto;min-height:64px;flex-direction:column;align-items:stretch;padding:0 16px 24px}
  .cs-nav-wrap.is-open .cs-nav__row{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:56px}
  .cs-nav-wrap.is-open .cs-nav__mobile{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:8px 8px 4px;box-sizing:border-box}
  .cs-nav__mobile-links{display:flex;flex-direction:column;align-items:center;gap:14px;margin:18px 0 6px}
  .cs-nav__mobile-links a{font-family:var(--font-display);font-weight:700;font-size:22px;line-height:28px;letter-spacing:.5px;color:var(--nc-seasalt);text-decoration:none;padding:4px 12px;transition:opacity 180ms ease}
  .cs-nav__mobile-links a:hover{opacity:.8}
  .cs-nav__mobile-cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:14px;padding:0 16px}
  .cs-nav__mobile-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;border-radius:999px;font-family:var(--font-display);font-weight:700;font-size:18px;letter-spacing:.5px;text-decoration:none;cursor:pointer;transition:background 180ms ease,box-shadow 180ms ease}
  .cs-nav__mobile-btn--outline{background:transparent;color:var(--nc-seasalt);border:2px solid var(--nc-orange)}
  .cs-nav__mobile-btn--outline:hover{background:rgba(234,127,10,.10)}
  .cs-nav__mobile-btn--filled{background:var(--nc-orange);color:var(--nc-seasalt);border:2px solid var(--nc-orange)}
  .cs-nav__mobile-btn--filled:hover{box-shadow:var(--shadow-glow-orange)}
}

/* ============================================================
   1 — HERO
   ============================================================ */
.hero{position:relative;background:var(--nc-dark-gray);color:var(--nc-seasalt);padding:48px 0 96px;overflow:hidden;margin-top:-110px;padding-top:174px}
.hero::before{content:"";position:absolute;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(234,127,10,.32),transparent 65%);filter:blur(140px);top:-260px;right:-180px;pointer-events:none}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;background:linear-gradient(180deg,rgba(34,34,34,0) 0%,var(--nc-dark-gray) 100%);pointer-events:none}

.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
@media (max-width:1080px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* — Left column — */
.hero-tag-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.hero-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:6px 14px;font:600 12px/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--nc-fawn)}
.hero-pill i{font-size:14px}
.hero-pill--client{color:var(--nc-seasalt);background:rgba(234,127,10,.15);border-color:rgba(234,127,10,.45)}
.hero-pill--client b{color:var(--nc-orange);font-weight:700;letter-spacing:1.5px}

h1.hero-h1{font-family:var(--font-display);font-weight:700;font-size:60px;line-height:1.04;letter-spacing:.5px;margin:0;color:var(--nc-seasalt);max-width:18ch}
h1.hero-h1 .accent{color:var(--nc-orange)}
.hero-sub{font-family:var(--font-body);font-size:19px;line-height:1.55;color:rgba(255,255,255,.78);margin:24px 0 0;max-width:54ch}

.hero-attribution{display:flex;align-items:center;gap:18px;margin-top:36px;padding:18px 22px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:20px;max-width:480px}
.hero-attribution__avatar{width:54px;height:54px;border-radius:50%;background:url(../images/paul-face.png) center/cover no-repeat;flex:none;border:2px solid rgba(234,127,10,.6)}
.hero-attribution__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-attribution__name{font:700 16px/1.2 var(--font-display);letter-spacing:.5px}
.hero-attribution__role{font:400 13px/1.3 var(--font-body);color:rgba(255,255,255,.7)}
.hero-attribution__client{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--nc-fawn);margin-top:2px}

.hero-cta-row{display:flex;align-items:center;gap:14px;margin-top:32px;flex-wrap:wrap}

/* — Right column: video — */
.hero-video{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06);cursor:pointer;isolation:isolate;text-align:left;color:inherit;font:inherit}
.hero-video__poster{position:absolute;inset:0;background:url(../images/portada-paul.png) center/cover no-repeat}
.hero-video__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 100%)}
.hero-video__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;background:var(--nc-orange);color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.hero-video__play::before{content:"";position:absolute;inset:-12px;border-radius:50%;background:rgba(234,127,10,.25);z-index:-1;animation:csPulse 2.4s var(--ease-out) infinite}
.hero-video:hover .hero-video__play{transform:translate(-50%,-50%) scale(1.06);box-shadow:var(--shadow-glow-orange)}
.hero-video__play svg{width:32px;height:32px;margin-left:4px}
.hero-video__chip{position:absolute;top:18px;left:18px;display:inline-flex;align-items:center;gap:8px;background:rgba(0,0,0,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 14px;font:700 11px/1 var(--font-display);letter-spacing:2px;text-transform:uppercase;color:#fff}
.hero-video__chip .live-dot{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 0 4px rgba(255,59,59,.18)}
.hero-video__caption{position:absolute;left:0;right:0;bottom:0;padding:20px 24px;display:flex;align-items:center;gap:16px;color:#fff}
.hero-video__caption .ct-name{font:700 18px/1.2 var(--font-display);letter-spacing:.3px}
.hero-video__caption .ct-role{font:400 13px/1.3 var(--font-body);color:rgba(255,255,255,.78);margin-top:3px}
.hero-video__caption .ct-meta{margin-left:auto;font:700 11px/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.7)}

.hero-video-cap{margin-top:18px;font-family:var(--font-body);font-size:14px;line-height:1.5;color:rgba(255,255,255,.62);max-width:60ch}
.hero-video-cap b{color:var(--nc-fawn);font-weight:600}

@keyframes csPulse{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.4);opacity:0}}

/* — Mobile order: copy → video → metrics handled with order in markup — */
@media (max-width:1080px){
  h1.hero-h1{font-size:44px}
  .hero{padding-top:140px;padding-bottom:64px}
}
@media (max-width:1024px){
  .hero{margin-top:-72px;padding-top:120px}
}
@media (max-width:640px){
  h1.hero-h1{font-size:34px}
  .hero-sub{font-size:16px}
  .hero-video__play{width:72px;height:72px}
  .hero-video__play svg{width:26px;height:26px}
  .hero-attribution{padding:14px 16px;gap:12px}
}

/* ============================================================
   2 — METRIC STRIP
   ============================================================ */
.metrics{background:var(--nc-dark-gray);position:relative;padding:0 0 96px;color:var(--nc-seasalt);overflow:hidden}
.metrics::before{content:"";position:absolute;inset:0;pointer-events:none}
.metrics-inner{position:relative;z-index:2}
.metrics-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.metrics-head .eyebrow{margin:0}
.metrics-head .meta{font:400 13px/1.4 var(--font-body);color:rgba(255,255,255,.55);max-width:34ch;text-align:right}

.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.metrics-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.metrics-grid{grid-template-columns:1fr}}

.metric{position:relative;border-radius:24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);padding:32px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:200px;backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);overflow:hidden;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.metric:hover{transform:translateY(-4px);border-color:rgba(234,127,10,.45)}
.metric::before{content:"";position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(234,127,10,.32),transparent 70%);filter:blur(40px);pointer-events:none}

.metric__num{font-family:var(--font-display);font-weight:800;font-size:64px;line-height:.95;letter-spacing:.5px;color:var(--nc-orange);display:flex;align-items:baseline;gap:8px}
.metric__num .unit{font-size:24px;font-weight:600;color:var(--nc-fawn);letter-spacing:1px}
.metric__num.tight{font-size:54px}
.metric__txt{font-family:var(--font-body);font-size:15px;line-height:1.45;color:rgba(255,255,255,.82);margin:0}
.metric__icon{position:absolute;top:24px;right:24px;width:36px;height:36px;border-radius:10px;background:rgba(234,127,10,.18);color:var(--nc-fawn);display:flex;align-items:center;justify-content:center;font-size:20px}

/* ============================================================
   3 — WHY (setup)
   ============================================================ */
.why{background:var(--nc-seasalt);position:relative;padding:120px 0;overflow:hidden}
.why::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:var(--nc-dark-gray);clip-path:ellipse(75% 100% at 50% 0%);transform:translateY(-1px)}

.section-head{max-width:880px;margin:0 0 56px}
.section-head h2{font-family:var(--font-display);font-weight:700;font-size:46px;line-height:1.08;letter-spacing:.5px;margin:14px 0 0;color:var(--nc-dark-gray);text-wrap:pretty}
.section-head .sub{font-family:var(--font-body);font-size:18px;line-height:1.55;color:var(--nc-ink-600);margin:18px 0 0;max-width:62ch}
@media (max-width:640px){.section-head h2{font-size:32px}.section-head .sub{font-size:16px}}

.why-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:start}
@media (max-width:1080px){.why-layout{grid-template-columns:1fr;gap:32px}}

.why-narrative{display:flex;flex-direction:column;gap:18px;color:var(--nc-ink-600);font-family:var(--font-body);font-size:17px;line-height:1.65}
.why-narrative p{margin:0}
.why-narrative b{color:var(--nc-dark-gray);font-weight:700}
.why-narrative .nc-flag{color:var(--nc-orange);font-weight:700}

.why-quote{margin-top:8px;padding:28px 32px;background:#fff;border-radius:24px;border:1px solid var(--color-border);box-shadow:var(--shadow-card);position:relative;overflow:hidden}
.why-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--nc-orange)}
.why-quote .mark{position:absolute;top:14px;right:18px;font-family:var(--font-display);font-size:88px;line-height:1;font-weight:800;color:var(--nc-fawn);opacity:.55}
.why-quote blockquote{margin:0;font-family:var(--font-display);font-weight:500;font-size:22px;line-height:1.4;color:var(--nc-dark-gray);max-width:38ch}
.why-quote .who{margin-top:14px;font:400 13px/1.4 var(--font-body);color:var(--nc-ink-500)}
.why-quote .who b{color:var(--nc-dark-gray);font-weight:700}

/* Snapshot card */
.snapshot{position:sticky;top:104px;border-radius:24px;background:#fff;border:1px solid var(--color-border);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.06)}
.snapshot__head{background:var(--nc-dark-gray);color:var(--nc-seasalt);padding:22px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.snapshot__head h3{margin:0;font:700 14px/1 var(--font-display);letter-spacing:2.5px;text-transform:uppercase;color:var(--nc-fawn)}
.snapshot__mm{font:800 16px/1 var(--font-display);letter-spacing:.5px;color:#fff}
.snapshot__body{padding:24px 26px}
.snapshot__row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px dashed rgba(64,64,64,.14)}
.snapshot__row:last-child{border-bottom:none}
.snapshot__k{font:600 12px/1.2 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:var(--nc-ink-500);flex:none;min-width:88px}
.snapshot__v{font:600 14px/1.4 var(--font-body);color:var(--nc-dark-gray);text-align:right;text-wrap:pretty}
.snapshot__v b{font-weight:700;color:var(--nc-orange)}

/* Pain points grid (full width row below) */
.pains{margin-top:80px}
.pains__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.pains__head h3{font:700 28px/1.15 var(--font-display);color:var(--nc-dark-gray);margin:8px 0 0;max-width:24ch}
.pains__head .lead{font:400 16px/1.5 var(--font-body);color:var(--nc-ink-600);max-width:42ch}
.pains-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:880px){.pains-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pains-grid{grid-template-columns:1fr}}

.pain{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:20px;padding:22px 24px;display:flex;flex-direction:row;align-items:center;gap:16px;min-height:88px;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.pain:hover{transform:translateY(-3px);border-color:rgba(234,127,10,.35)}
.pain__icon{width:44px;height:44px;border-radius:12px;background:var(--nc-fawn-tint);color:var(--nc-deep-orange);display:flex;align-items:center;justify-content:center;font-size:22px;flex:none}
.pain h4{margin:0;font:700 17px/1.25 var(--font-display);color:var(--nc-dark-gray);text-wrap:pretty}

/* ============================================================
   4 — TEST & TRUST
   ============================================================ */
.trust{background:var(--nc-dark-gray);color:var(--nc-seasalt);padding:120px 0;position:relative;overflow:hidden}
.trust::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:var(--nc-seasalt);clip-path:ellipse(75% 100% at 50% 0%);transform:translateY(-1px)}
.trust::after{content:"";display:nonepx;pointer-events:none}
.trust .section-head h2{color:var(--nc-seasalt)}
.trust .section-head .sub{color:rgba(255,255,255,.72)}
.trust .section-head .eyebrow{color:var(--nc-fawn)}

/* What NC handled — header above, 2-column grid of items below */
.handled{display:block;margin-bottom:80px;position:relative;z-index:1}
.handled__intro{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.10)}
.handled__intro h3{margin:14px 0 18px;font:700 28px/1.2 var(--font-display);color:#fff;letter-spacing:.3px;max-width:14ch;text-wrap:pretty}
.handled__intro p{font-family:var(--font-body);font-size:16px;line-height:1.65;color:rgba(255,255,255,.72);margin:0 0 14px;max-width:42ch}
.handled__intro b{color:#fff;font-weight:600}

.handled-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width:760px){.handled-list{grid-template-columns:1fr}}
.handled-list li{display:flex;align-items:flex-start;gap:14px;padding:22px 24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:16px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.handled-list .check{width:28px;height:28px;border-radius:8px;background:var(--nc-orange);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:16px;margin-top:1px}
.handled-list p{margin:0;font:500 15px/1.5 var(--font-body);color:rgba(255,255,255,.92)}

/* Ramp callout — clean dark card with orange accent rule */
.ramp{display:grid;grid-template-columns:auto 1px 1fr;align-items:stretch;gap:40px;padding:40px 44px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);color:#fff;margin-bottom:72px;position:relative}
.ramp__num{font:700 96px/.9 var(--font-display);letter-spacing:.5px;color:var(--nc-orange);display:flex;align-items:baseline;gap:6px;align-self:center}
.ramp__num small{font-size:24px;font-weight:500;letter-spacing:.5px;color:var(--nc-fawn)}
.ramp__rule{background:rgba(255,255,255,.12);width:1px;align-self:stretch}
.ramp__txt{align-self:center;display:flex;flex-direction:column;gap:8px}
.ramp__txt .lab{font:600 13px/1.4 var(--font-display);letter-spacing:.5px;color:var(--nc-fawn);font-style:italic}
.ramp__txt h3{margin:0;font:700 24px/1.25 var(--font-display);color:#fff;letter-spacing:.2px}
.ramp__txt p{margin:0;font:400 15px/1.55 var(--font-body);color:rgba(255,255,255,.72)}
.ramp__seal{display:none}
@media (max-width:760px){.ramp{grid-template-columns:1fr;gap:20px;padding:32px 28px}.ramp__rule{height:1px;width:100%}.ramp__num{font-size:72px;justify-content:flex-start}}

/* Trust quote — sober glass card following DS quote pattern */
.bigquote{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;padding:48px 56px;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);margin-bottom:72px;position:relative}
.bigquote__avatar{width:88px;height:88px;border-radius:50%;background:url(../images/paul-face.png) center/cover no-repeat;flex:none;border:1px solid rgba(255,255,255,.18)}
.bigquote__body{position:relative}
.bigquote__mark{font:700 56px/.6 var(--font-display);color:var(--nc-orange);margin-bottom:14px;height:24px;letter-spacing:-2px}
.bigquote blockquote{margin:0;font:500 24px/1.4 var(--font-display);color:#fff;letter-spacing:.2px;text-wrap:pretty}
.bigquote .who{margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10);font:400 14px/1.4 var(--font-body);color:rgba(255,255,255,.6);max-width:48ch}
.bigquote .who b{color:#fff;font-weight:700}
@media (max-width:760px){.bigquote{grid-template-columns:1fr;padding:36px 28px;gap:20px}.bigquote blockquote{font-size:20px}.bigquote__avatar{width:64px;height:64px}}

/* Before / After — sober two-column with vertical hairline divider */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:24px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);overflow:hidden;align-items:stretch;position:relative}
.ba::before{content:"";position:absolute;top:32px;bottom:32px;left:50%;width:1px;background:rgba(255,255,255,.10)}
.ba__col{padding:40px 44px;display:flex;flex-direction:column;gap:12px}
.ba__lab{display:inline-flex;align-items:center;gap:10px;font:700 11px/1 var(--font-display);letter-spacing:3px;text-transform:uppercase;margin-bottom:4px}
.ba__lab i{font-size:14px}
.ba__col--before .ba__lab{color:rgba(255,255,255,.48)}
.ba__col--after .ba__lab{color:var(--nc-orange)}
.ba__col h4{margin:0;font:700 22px/1.25 var(--font-display);color:#fff;letter-spacing:.2px;text-wrap:pretty}
.ba__col--before h4{color:rgba(255,255,255,.78)}
.ba__col p{margin:0;font:400 15px/1.6 var(--font-body);color:rgba(255,255,255,.7)}
.ba__col--after .accent{color:var(--nc-fawn);font-weight:600}
.ba__arrow{display:none}
@media (max-width:760px){.ba{grid-template-columns:1fr}.ba::before{top:auto;bottom:auto;left:32px;right:32px;width:auto;height:1px;top:50%}.ba__col{padding:32px 28px}}

/* ============================================================
   5 — EXPANSION
   ============================================================ */
.expand{background:var(--nc-seasalt);padding:120px 0;position:relative;overflow:hidden}
.expand::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:var(--nc-dark-gray);clip-path:ellipse(75% 100% at 50% 0%);transform:translateY(-1px)}
.expand .section-head{margin-bottom:64px;text-align:center;margin-inline:auto}
.expand .section-head h2{margin-inline:auto}
.expand .section-head .eyebrow{justify-content:center}

/* Hero metric — 1 → 3 */
.expand-hero{display:grid;grid-template-columns:1fr 1.2fr;gap:48px;align-items:center;background:var(--nc-dark-gray);border-radius:32px;padding:64px;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.18)}
.expand-hero::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(234,127,10,.45),transparent 60%);filter:blur(130px);bottom:-300px;right:-200px;pointer-events:none}
.expand-hero::after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(250,188,120,.3),transparent 65%);filter:blur(140px);top:-180px;left:-100px;pointer-events:none}
@media (max-width:1080px){.expand-hero{grid-template-columns:1fr;padding:40px;gap:32px;text-align:center}}

.expand-hero__num{position:relative;display:flex;align-items:center;gap:24px;font-family:var(--font-display);font-weight:800;letter-spacing:.5px;line-height:.9}
.expand-hero__num .from,.expand-hero__num .to{font-size:200px;display:block}
.expand-hero__num .from{color:rgba(255,255,255,.4)}
.expand-hero__num .to{color:var(--nc-orange);text-shadow:0 0 60px rgba(234,127,10,.6)}
.expand-hero__num .arr{font-size:88px;color:var(--nc-fawn);font-weight:600}
@media (max-width:1080px){.expand-hero__num{justify-content:center}.expand-hero__num .from,.expand-hero__num .to{font-size:140px}.expand-hero__num .arr{font-size:64px}}
@media (max-width:520px){.expand-hero__num .from,.expand-hero__num .to{font-size:96px}.expand-hero__num .arr{font-size:44px}}

.expand-hero__body{position:relative}
.expand-hero__body .eyebrow{color:var(--nc-fawn)}
.expand-hero__body h3{margin:14px 0 14px;font:700 36px/1.1 var(--font-display);color:#fff;letter-spacing:.3px;max-width:14ch}
.expand-hero__body p{margin:0 0 12px;font:400 17px/1.6 var(--font-body);color:rgba(255,255,255,.82);max-width:46ch}
@media (max-width:1080px){.expand-hero__body p{margin-inline:auto}.expand-hero__body h3{margin-inline:auto}}
.expand-hero__body p .hl,.expand-hero__body p b.hl{color:var(--nc-fawn);font-weight:700;background:linear-gradient(transparent 60%,rgba(234,127,10,.22) 60%);padding:0 2px}

/* Timeline */
.timeline{margin-top:64px;position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:stretch}
@media (max-width:760px){.timeline{grid-template-columns:1fr;gap:16px}}
.tl-step{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:24px;padding:28px 28px 32px;display:flex;flex-direction:column;gap:10px}
.tl-step:not(:last-child){margin-right:24px}
@media (max-width:760px){.tl-step:not(:last-child){margin-right:0}}
.tl-step__lab{font:700 11px/1 var(--font-display);letter-spacing:2px;text-transform:uppercase;color:var(--nc-ink-500)}
.tl-step__head{display:flex;align-items:center;gap:14px}
.tl-step__num{width:48px;height:48px;border-radius:50%;background:var(--nc-fawn-tint);color:var(--nc-deep-orange);font:800 22px/1 var(--font-display);display:flex;align-items:center;justify-content:center;flex:none}
.tl-step__title{font:700 22px/1.15 var(--font-display);color:var(--nc-dark-gray);margin:0}
.tl-step p{margin:6px 0 0;font:400 14px/1.5 var(--font-body);color:var(--nc-ink-600)}
.tl-step--final{background:var(--nc-orange);color:#fff;border-color:transparent}
.tl-step--final .tl-step__lab{color:rgba(255,255,255,.82)}
.tl-step--final .tl-step__num{background:#fff;color:var(--nc-orange)}
.tl-step--final .tl-step__title{color:#fff}
.tl-step--final p{color:rgba(255,255,255,.92)}
.tl-step__connector{position:absolute;top:50%;right:-24px;width:24px;height:2px;background:repeating-linear-gradient(to right,rgba(64,64,64,.3) 0,rgba(64,64,64,.3) 4px,transparent 4px,transparent 8px)}
.tl-step__connector::after{content:"";position:absolute;right:-2px;top:-4px;width:0;height:0;border-left:8px solid var(--nc-orange);border-top:5px solid transparent;border-bottom:5px solid transparent}
@media (max-width:760px){.tl-step__connector{display:none}}

/* Closing quote on expand */
.expand-quote{margin-top:64px;text-align:center;max-width:760px;margin-inline:auto}
.expand-quote blockquote{margin:0;font:500 30px/1.3 var(--font-display);color:var(--nc-dark-gray);letter-spacing:.3px;position:relative;padding:0 32px}
.expand-quote blockquote::before,.expand-quote blockquote::after{content:'"';color:var(--nc-orange);font-weight:800;position:absolute;top:-10px;font-size:48px}
.expand-quote blockquote::before{left:0}
.expand-quote blockquote::after{right:0;top:auto;bottom:-44px}
.expand-quote .who{margin-top:24px;font:400 14px/1.4 var(--font-body);color:var(--nc-ink-500)}
.expand-quote .who b{color:var(--nc-dark-gray);font-weight:700}
@media (max-width:640px){.expand-quote blockquote{font-size:22px;padding:0 16px}}

/* ============================================================
   6 — LESSONS + CTA
   ============================================================ */
.lessons{background:var(--nc-seasalt);padding:0 0 120px}
.lessons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:48px}
@media (max-width:760px){.lessons-grid{grid-template-columns:1fr}}
.lesson{position:relative;background:#fff;border:1px solid var(--color-border);border-radius:24px;padding:32px 36px;display:flex;flex-direction:column;gap:10px;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.lesson:hover{transform:translateY(-3px);box-shadow:var(--shadow-card);border-color:rgba(234,127,10,.4)}
.lesson__num{font:800 14px/1 var(--font-display);letter-spacing:2px;color:var(--nc-orange);display:flex;align-items:center;gap:10px}
.lesson__num .digit{width:36px;height:36px;border-radius:50%;background:var(--nc-fawn-tint);display:flex;align-items:center;justify-content:center;font:800 16px/1 var(--font-display);color:var(--nc-deep-orange);letter-spacing:0}
.lesson h3{margin:8px 0 0;font:700 22px/1.2 var(--font-display);color:var(--nc-dark-gray);max-width:24ch;text-wrap:pretty}
.lesson p{margin:0;font:400 15px/1.55 var(--font-body);color:var(--nc-ink-600)}
.lesson--wide{grid-column:1/-1;background:linear-gradient(120deg,rgba(234,127,10,.08),rgba(250,188,120,.18));border-color:rgba(234,127,10,.28)}

/* Self-qualification list */
.qualify{margin-top:80px;display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;background:var(--nc-dark-gray);color:#fff;border-radius:32px;padding:56px;position:relative;overflow:hidden}
.qualify::before{content:"";position:absolute;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(234,127,10,.32),transparent 65%);filter:blur(140px);top:-300px;right:-200px;pointer-events:none}
@media (max-width:960px){.qualify{grid-template-columns:1fr;padding:36px;gap:32px}}
.qualify__head{position:relative}
.qualify__head .eyebrow{color:var(--nc-fawn)}
.qualify__head h3{margin:14px 0 14px;font:700 32px/1.15 var(--font-display);color:#fff;letter-spacing:.3px;max-width:18ch}
.qualify__head p{margin:0;font:400 16px/1.6 var(--font-body);color:rgba(255,255,255,.78);max-width:42ch}
.qualify__list{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.qualify__list li{display:flex;align-items:flex-start;gap:14px;padding:14px 18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:14px;font:400 15px/1.45 var(--font-body);color:rgba(255,255,255,.88)}
.qualify__list .tick{width:24px;height:24px;border-radius:50%;background:var(--nc-orange);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px;margin-top:1px}

/* Closing CTA */
.cta-final{margin-top:64px;border-radius:32px;padding:80px 32px;text-align:center;position:relative;overflow:hidden;background:linear-gradient(120deg,rgb(234,88,24) 0%,rgb(234,127,10) 60%,rgb(250,188,120) 100%);color:#fff}
.cta-final::before{content:"";position:absolute;top:-200px;left:50%;transform:translateX(-50%);width:800px;height:800px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.25),transparent 60%);pointer-events:none}
.cta-final h3{margin:0;font:800 44px/1.05 var(--font-display);letter-spacing:.5px;text-shadow:0 4px 30px rgba(0,0,0,.15);max-width:18ch;margin-inline:auto;position:relative}
.cta-final p{margin:18px auto 32px;font:400 17px/1.55 var(--font-body);color:rgba(255,255,255,.92);max-width:48ch;position:relative}
.cta-final .btn-final{position:relative;display:inline-flex;align-items:center;gap:10px;background:#fff;color:var(--nc-deep-orange);font:800 18px/1 var(--font-display);letter-spacing:.5px;padding:20px 32px;border-radius:999px;text-decoration:none;border:none;cursor:pointer;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.cta-final .btn-final:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(0,0,0,.18)}
@media (max-width:640px){.cta-final{padding:56px 24px}.cta-final h3{font-size:32px}}

/* ============================================================
   FOOTER
   ============================================================ */
/* ============================================================
   FOOTER — DS spec
   ============================================================ */
.cs-footer{background:var(--nc-gray);color:var(--nc-seasalt);padding:70px 0px}
.cs-footer__row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:48px;align-items:flex-start}
.cs-footer__links + .cs-footer__actions{margin-left:-16px}
.cs-footer__brand{display:flex;flex-direction:column;gap:18px}
.cs-footer__brand img.wordmark{height:46px;width:209px;object-fit:contain}
.cs-footer__badges{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.cs-footer__badges .b-clutch{width:78px;height:auto}
.cs-footer__badges .b-gptw{width:54px;height:auto}
.cs-footer__badges .b-rev{width:200px;height:auto}
.cs-footer__links{display:flex;flex-direction:column;gap:14px;padding-top:6px}
.cs-footer__links a{font:600 16px/19px var(--font-display);letter-spacing:1px;color:var(--nc-seasalt);text-decoration:none;transition:opacity var(--dur-base) ease}
.cs-footer__links a:hover{opacity:.78}
.cs-footer__nav{display:flex;gap:48px}
.cs-footer__nav + .cs-footer__actions{margin-left:-16px}
.cs-footer__col{display:flex;flex-direction:column;gap:14px;padding-top:6px;min-width:0;max-width:248px}
.cs-footer__col-title{font:700 13px/1 var(--font-display);letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.55);margin:0 0 6px}
.cs-footer__col a{font:600 16px/1.35 var(--font-display);letter-spacing:1px;color:var(--nc-seasalt);text-decoration:none;transition:opacity var(--dur-base) ease;text-wrap:pretty}
.cs-footer__col a:hover{opacity:.78}
.cs-footer__actions{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.cs-footer__actions a{display:inline-flex;align-items:center;gap:10px;font:400 16px/19px var(--font-display);letter-spacing:1px;color:var(--nc-seasalt);text-decoration:none;padding:4px;transition:opacity var(--dur-base) ease}
.cs-footer__actions a:hover{opacity:.78}
.cs-footer__actions svg{flex:none;color:var(--nc-seasalt)}
.cs-footer__copy{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font:400 13px/1.5 var(--font-body);color:rgba(255,255,255,.6);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
@media (max-width:960px){.cs-footer{padding:48px 0 28px}.cs-footer__row{grid-template-columns:1fr 1fr;gap:32px}.cs-footer__brand{grid-column:1/-1}.cs-footer__nav{gap:32px}}
@media (max-width:640px){.cs-footer__row{grid-template-columns:1fr}.cs-footer__badges{flex-wrap:wrap}.cs-footer__links+.cs-footer__actions{margin-left:0}.cs-footer__nav+.cs-footer__actions{margin-left:0}.cs-footer__nav{flex-direction:column;gap:28px}.cs-footer__col{max-width:none}.cs-footer__actions a{padding-left:0;padding-right:0}}

/* ------------ Reduced motion ------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}