/* Verity Agentic site.css — extracted from index.html inline styles | v20260811 */

/* --- block 1: main site styles --- */

    :root {
      --black: #050505;
      --ink: #0b0b0b;
      --charcoal: #151515;
      --paper: #efe7d8;
      --paper-deep: #ded2bd;
      --white: #f9f7ef;
      --muted: #c2c2c2;
      --yellow: #ffe600;
      --yellow-dark: #ffcc00;
      --pink: #ff1f8f;
      --pink-dark: #ab005d;
      --line: rgba(255, 255, 255, 0.16);
      --max: 1260px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--black);
      color: var(--white);
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
      line-height: 1.45;
      overflow-x: hidden;
    }


    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      position: relative;
      min-height: 100vh;
      background:
        radial-gradient(circle at 78% 14%, rgba(255, 31, 143, 0.14), transparent 23%),
        radial-gradient(circle at 8% 24%, rgba(255, 230, 0, 0.12), transparent 19%),
        linear-gradient(180deg, #040404 0%, #101010 42%, #050505 100%);
    }

    .nav {
      position: relative; z-index: 20;
      background: rgba(2, 2, 2, 0.94);
      border-bottom: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(10px);
    }

    .nav-inner {
      max-width: var(--max);
      margin: 0 auto;
      min-height: 76px;
      padding: 0 28px;
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 28px;
    }

    .logo {
      position: relative;
      display: inline-flex;
      align-items: center;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 25px;
      line-height: 1;
      text-transform: uppercase;
      color: var(--white);
      isolation: isolate;
      white-space: nowrap;
    }

    .logo::after {
      content: "";
      position: absolute;
      left: -7px;
      right: -9px;
      bottom: -7px;
      height: 12px;
      z-index: -1;
      background: var(--pink);
      transform: rotate(-2deg);
      clip-path: polygon(0 25%, 8% 5%, 22% 29%, 46% 10%, 74% 24%, 100% 3%, 96% 72%, 75% 61%, 54% 82%, 27% 67%, 5% 91%);
    }

    .nav-links {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 20px;
      color: #d8d8d8;
      font-weight: 900;
      font-size: 12px;
      text-transform: uppercase;
    }

    .nav-links a {
      position: relative;
      padding-top: 4px;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -7px;
      height: 3px;
      background: var(--yellow);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 160ms ease;
    }

    .nav-links a:hover::after {
      transform: scaleX(1);
    }

    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 48px;
      padding: 13px 20px 12px;
      border: 0;
      color: #050505;
      background: var(--yellow);
      font-family: 'Oswald', Impact, "Arial Black", sans-serif;
      font-weight: 700;
      text-transform: uppercase;
      font-size: 16px;
      line-height: 1;
      letter-spacing: 0.05em;
      box-shadow: 5px 5px 0 #000, 0 0 0 1px rgba(0, 0, 0, 0.5);
      cursor: pointer;
      white-space: nowrap;
    }

    .button span {
      font-size: 17px;
      transform: translateY(-1px);
    }

    .button-pink {
      position: relative;
      color: var(--white);
      background: var(--pink);
      box-shadow: 6px 6px 0 var(--yellow);
      letter-spacing: 0.05em;
    }

    .hero {
      position: relative;
      overflow: hidden;
      max-width: var(--max);
      margin: 0 auto;
      padding: 78px 28px 84px;
      display: grid;
      grid-template-columns: minmax(0, 1.02fr) minmax(390px, 0.78fr);
      gap: 42px;
      align-items: center;
      min-height: 708px;
    }

    .hero::before,
    .hero::after {
      content: "";
      position: absolute;
      pointer-events: none;
    }

    .hero::before {
      display: none;
    }

    .hero::after {
      display: none;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      max-width: 760px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
      color: var(--yellow);
      font-weight: 1000;
      text-transform: uppercase;
      font-size: 13px;
    }

    .eyebrow::before {
      content: "";
      display: inline-block;
      width: 42px;
      height: 4px;
      background: var(--pink);
      transform: rotate(-3deg);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 20px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(76px, 9vw, 139px);
      line-height: 0.88;
      text-transform: uppercase;
      text-wrap: balance;
      text-shadow: none;
    }

    .script-line {
      display: block;
      position: relative;
      width: fit-content;
      margin-top: 16px;
      padding: 14px 104px 18px 28px;
      color: #080808;
      background: var(--yellow);
      font-family: Impact, "Arial Black", sans-serif;
      font-style: italic;
      font-size: clamp(36px, 4.5vw, 58px);
      line-height: 0.9;
      text-transform: uppercase;
      text-shadow: none;
      transform: rotate(-2deg);
      clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
      z-index: 1;
    }

    /* Let the band run past the text column on screens with room beside it. See
       scripts/widen-script-line.py for why the max-width is shaped this way; the
       short version is that the last term is the container's own left margin and
       the flat 72px covers the gutter plus the scrollbar that 100vw counts and the
       layout viewport does not. */
    @media (min-width: 1024px) {
      .script-line {
        width: max-content;
        max-width: calc(100vw - 72px - max(28px, (100vw - 1260px) / 2));
      }
    }


    .script-line::before {
      content: none;
    }

    .hero-copy p {
      max-width: 675px;
      color: #e7e1d6;
      font-size: 23px;
      font-weight: 700;
      margin-bottom: 28px;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
    }

    .founder-note {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
    }

    .founder-note strong {
      color: var(--white);
    }

    .hero-visual {
      position: relative;
      z-index: 2;
      align-self: stretch;
      min-height: 575px;
    }

    .portrait-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      border-left: 1px solid rgba(255, 255, 255, 0.18);
      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
      background: #070707;
      box-shadow: -20px 22px 0 rgba(255, 31, 143, 0.16), 18px -18px 0 rgba(255, 230, 0, 0.13);
      clip-path: polygon(0 3%, 100% 0, 96% 100%, 5% 97%);
    }

    .portrait-wrap img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 52% 50%;
    }

    .portrait-wrap::after {
      display: none;
    }

    .graffiti {
      position: absolute;
      right: -16px;
      bottom: 52px;
      z-index: 4;
      max-width: 330px;
      color: var(--pink);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(29px, 3.7vw, 56px);
      line-height: 0.94;
      text-transform: uppercase;
      text-shadow: 3px 3px 0 #050505, 0 0 18px rgba(255, 31, 143, 0.34);
      transform: rotate(-4deg);
    }

    .interface-strip {
      position: absolute;
      left: -26px;
      top: 42px;
      z-index: 3;
      width: 190px;
      padding: 13px;
      background: rgba(5, 5, 5, 0.78);
      border: 1px solid rgba(255, 230, 0, 0.55);
      box-shadow: 8px 8px 0 rgba(255, 31, 143, 0.35);
      transform: rotate(-3deg);
    }

    .interface-strip div {
      height: 8px;
      margin: 8px 0;
      background: rgba(255, 255, 255, 0.18);
    }

    .interface-strip div:nth-child(2),
    .interface-strip div:nth-child(5) {
      width: 62%;
      background: var(--yellow);
    }

    .interface-strip div:nth-child(4) {
      width: 78%;
      background: var(--pink);
    }

    .section-inner {
      max-width: var(--max);
      margin: 0 auto;
      padding: 104px 28px;
    }

    .section-title {
      margin-bottom: 36px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(52px, 6vw, 100px);
      line-height: 0.92;
      text-transform: uppercase;
    }

    .paint-word {
      position: relative;
      display: inline-block;
      color: var(--white);
      font-family: "Brush Script MT", "Segoe Script", cursive;
      text-transform: none;
      padding: 0 12px 2px;
      text-shadow: 2px 2px 0 #090909;
      white-space: nowrap;
      z-index: 1;
    }

    .paint-word::before {
      content: "";
      position: absolute;
      z-index: -1;
      inset: 12% 0 8%;
      background: var(--pink);
      transform: rotate(-2deg);
      clip-path: polygon(0 38%, 10% 16%, 31% 30%, 53% 8%, 73% 28%, 100% 16%, 96% 76%, 67% 64%, 48% 91%, 23% 72%, 4% 90%);
    }

    .paint-word.stamp {
      color: var(--white);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 0.86em;
      line-height: 0.9;
      text-transform: uppercase;
      transform: rotate(-2deg);
    }

    .services {
      position: relative;
      overflow: hidden;
      background: #050505;
    }

    .services::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: 0.22;
      background:
        linear-gradient(115deg, transparent 0 49%, rgba(255, 255, 255, 0.12) 49.2% 49.8%, transparent 50%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 18px);
      pointer-events: none;
    }

    .services .section-inner {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(365px, 0.72fr);
      gap: 44px;
      align-items: start;
      padding-top: 128px;
      padding-bottom: 128px;
    }

    .services-callout {
      font-family: 'Oswald', Impact, sans-serif;
      font-weight: 700;
      font-size: clamp(22px, 2.6vw, 38px);
      line-height: 1;
      text-transform: none;
      color: var(--yellow);
      margin-bottom: 20px;
      letter-spacing: 0.02em;
    }

    .services h2 {
      color: var(--white);
      margin-bottom: 16px;
    }

    .services-sub {
      max-width: 760px;
      color: #d8d8d8;
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 34px;
    }

    /* BEFORE / AFTER TABLE */
    .ba-table {
      display: grid;
      /* minmax(0, 1fr), not 1fr: a plain 1fr track refuses to shrink below its
         content's min-content width, so at 320px the longest word in a cell pushed
         the whole grid past the section and it got clipped. */
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 0;
      margin-bottom: 30px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.04);
      box-shadow: 12px 12px 0 rgba(255, 31, 143, 0.22);
    }
    /* Rows are shared grid rows across all three columns, so a wrapping cell
       keeps its arrow and its opposite number aligned. The previous version
       stacked three independent lists and hand-tuned the arrow column with a
       fixed padding-top, which only lined up while every row was one line. */
    .ba-head {
      padding: 24px 28px 10px;
    }
    .ba-cell {
      padding: 10px 28px;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.35;
      display: flex;
      align-items: center;
      min-width: 0;
      overflow-wrap: anywhere;
    }
    /* At phone widths the 28px cell padding ate most of the available track, leaving
       less room than the longest word needed. Tighten the gutters instead of letting
       the grid overflow its section. */
    @media (max-width: 600px) {
      .ba-head { padding: 20px 14px 8px; }
      .ba-cell { padding: 9px 14px; font-size: 14px; }
      .ba-arrow-cell { padding: 9px 2px; font-size: 16px; }
    }
    .ba-table > .ba-cell:nth-last-child(-n + 3) {
      padding-bottom: 24px;
    }
    .ba-before.ba-cell {
      color: #888;
    }
    .ba-after.ba-cell {
      color: var(--white);
    }
    .ba-arrow-cell {
      color: var(--pink);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 20px;
      line-height: 1;
      padding: 10px 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .ba-col {
      padding: 24px 28px;
    }
    .ba-label {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 13px;
      font-weight: 1000;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 18px;
    }
    .ba-before .ba-label {
      color: var(--muted);
    }
    .ba-after .ba-label {
      color: var(--yellow);
    }
    .ba-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }
    .ba-list li {
      font-size: 15px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      line-height: 1.2;
    }
    .ba-before .ba-list li {
      color: #888;
    }
    .ba-after .ba-list li {
      color: var(--white);
    }
    .ba-divider {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: 24px;
      gap: 14px;
      padding-top: 56px;
    }
    .ba-arrow {
      color: var(--pink);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 20px;
      line-height: 1.2;
      text-align: center;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
      gap: 12px;
    }

    .feature {
      display: grid;
      align-content: start;
      gap: 10px;
      min-height: 126px;
      padding: 18px 16px 20px;
      border: 1px solid rgba(255, 255, 255, 0.16);
      background: rgba(255, 255, 255, 0.045);
    }

    /* Fixed colour, not a low-opacity white: #e7e1d6 on the noir section
       measures well above the 4.5:1 AA floor. */
    .feature-desc {
      font-size: 14px;
      line-height: 1.55;
      color: #e7e1d6;
      font-weight: 400;
    }

    .feature-icon {
      width: 35px;
      height: 35px;
      border: 3px solid var(--yellow);
      position: relative;
      transform: rotate(-4deg);
    }

    .feature-icon::before,
    .feature-icon::after {
      content: "";
      position: absolute;
      background: var(--yellow);
    }

    .feature-icon::before {
      width: 20px;
      height: 3px;
      left: 5px;
      top: 13px;
    }

    .feature-icon::after {
      width: 3px;
      height: 20px;
      left: 13px;
      top: 5px;
    }

    .feature strong {
      font-family: 'Oswald', Impact, sans-serif;
      font-weight: 700;
      font-size: 18px;
      line-height: 1;
      text-transform: none;
    }

    .offer-panel {
      position: relative; z-index: 20;
      padding: 26px;
      border: 3px solid var(--yellow);
      color: var(--white);
      background:
        linear-gradient(135deg, rgba(255, 230, 0, 0.06), transparent 38%),
        #080808;
      box-shadow: 12px 12px 0 rgba(255, 31, 143, 0.34);
      transform: none;
    }

    .offer-panel h3 {
      margin-bottom: 18px;
      color: var(--yellow);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 42px;
      line-height: 1;
      text-transform: uppercase;
    }

    .offer-panel ul {
      display: grid;
      gap: 13px;
      margin: 0 0 26px;
      padding: 0;
      list-style: none;
    }

    .offer-panel li {
      position: relative;
      padding-left: 29px;
      color: #e5e5e5;
      font-size: 18px;
      font-weight: 800;
    }

    .offer-panel li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 10px;
      width: 16px;
      height: 5px;
      background: var(--pink);
      transform: rotate(-10deg);
    }

    /* STATS SECTION */
    .stats-section {
      position: relative;
      background:
        radial-gradient(circle at 90% 10%, rgba(255,31,143,0.10), transparent 22%),
        radial-gradient(circle at 5% 80%, rgba(255,230,0,0.08), transparent 18%),
        #0d0d0d;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .stats-heading {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(32px, 4vw, 60px);
      line-height: 0.95;
      text-transform: uppercase;
      color: var(--white);
      margin-bottom: 16px;
      max-width: 860px;
      text-shadow: none;
    }
    .stats-sub {
      font-size: 19px;
      font-weight: 700;
      color: #b0a89e;
      max-width: 680px;
      margin-bottom: 52px;
      line-height: 1.5;
    }
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 20px;
    }
    .stat-card {
      padding: 28px 26px 24px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-top: 3px solid var(--yellow);
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .stat-number {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(48px, 6vw, 72px);
      line-height: 0.9;
      color: var(--yellow);
      text-shadow: none;
    }
    .stat-desc {
      font-size: 15px;
      font-weight: 800;
      color: var(--white);
      line-height: 1.4;
      text-transform: uppercase;
      letter-spacing: 0.02em;
      flex: 1;
    }
    .stat-source {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-top: 4px;
    }

    /* PROOF SECTION */
    .proof-section {
      position: relative;
      background:
        radial-gradient(circle at 12% 20%, rgba(255,230,0,0.08), transparent 20%),
        radial-gradient(circle at 88% 80%, rgba(255,31,143,0.10), transparent 22%),
        #080808;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .proof-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
      gap: 22px;
    }
    .proof-card {
      display: flex;
      flex-direction: column;
      gap: 13px;
      padding: 32px 30px 28px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.12);
      border-top: 3px solid var(--pink);
      transition: box-shadow 0.3s ease, transform 0.3s ease;
    }
    .proof-card:hover {
      box-shadow: 0 0 24px rgba(255,31,143,0.30), 0 0 48px rgba(255,31,143,0.12);
      transform: translateY(-3px);
    }
    .proof-number {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(46px, 5.5vw, 68px);
      line-height: 0.9;
      color: var(--yellow);
      text-shadow: none;
    }
    .proof-card h3 {
      font-family: 'Oswald', Impact, sans-serif;
      font-weight: 700;
      font-size: 21px;
      line-height: 1.15;
      color: var(--white);
      margin: 0;
    }
    .proof-card p {
      font-size: 16px;
      font-weight: 700;
      color: #cfc9c0;
      line-height: 1.5;
      margin: 0;
    }
    .proof-link {
      margin-top: 4px;
      align-self: flex-start;
      color: var(--pink);
      font-family: 'Oswald', Impact, sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .proof-link:hover { text-decoration: underline; }

    /* HOME FAQ SECTION */
    .faq-home {
      position: relative;
      background:
        radial-gradient(circle at 85% 15%, rgba(255,230,0,0.07), transparent 20%),
        #0b0b0b;
      border-top: 1px solid rgba(255,255,255,0.10);
    }
    .faq-home-list {
      display: grid;
      gap: 0;
      max-width: 900px;
    }
    .faq-home-item {
      padding: 24px 0;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .faq-home-item:first-child {
      border-top: 1px solid rgba(255,255,255,0.12);
    }
    .faq-home-q {
      font-family: 'Oswald', Impact, sans-serif;
      font-weight: 700;
      font-size: clamp(20px, 2.4vw, 27px);
      line-height: 1.2;
      color: var(--yellow);
      margin: 0 0 12px;
    }
    .faq-home-a {
      font-size: 17px;
      font-weight: 700;
      line-height: 1.55;
      color: #d6d0c7;
      margin: 0;
      max-width: 760px;
    }
    .faq-home-a a { color: var(--pink); }
    .faq-home-a a:hover { text-decoration: underline; }

    .footer-strip {
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 12px;
      padding: 22px 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.14);
      color: var(--muted);
      background: #030303;
      font-size: 13px;
      font-weight: 900;
      text-transform: uppercase;
      text-align: center;
    }
    .footer-strip p { margin: 0; max-width: 760px; }
    .footer-tag { line-height: 1.65; }
    /* The email is one unbreakable 240px string. As a flex item it refused to shrink
       below its min-content width, pushing every page 9px wide at 320px. Keep
       min-width and overflow-wrap here or that overflow comes back. */
    .legal-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .4rem 1.4rem;
      min-width: 0;
    }
    .legal-links a { color: var(--white); overflow-wrap: anywhere; }
    .legal-links a:hover,
    .legal-links a:focus-visible { color: var(--yellow); text-decoration: underline; }
    .footer-strip p { margin: 0; max-width: 760px; }
    .footer-tag { line-height: 1.65; }
    /* The email is one unbreakable 240px string. As a flex item it refused to shrink
       below its min-content width, pushing every page 9px wide at 320px. Keep
       min-width and overflow-wrap here or that overflow comes back. */
    .legal-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: .4rem 1.4rem;
      min-width: 0;
    }
    .legal-links a { color: var(--white); overflow-wrap: anywhere; }
    .legal-links a:hover,
    .legal-links a:focus-visible { color: var(--yellow); text-decoration: underline; }

    /* HAMBURGER NAV */
    .hamburger {
      display: none;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 44px;
      height: 44px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 8px;
      order: 2;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 3px;
      background: var(--yellow);
      border-radius: 1px;
      transition: all 180ms ease;
      transform-origin: center;
    }

    .hamburger.open span:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
    }

    .hamburger.open span:nth-child(2) {
      opacity: 0;
      transform: scaleX(0);
    }

    .hamburger.open span:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
    }

    .mobile-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 9;
      background: rgba(5, 5, 5, 0.98);
      border-bottom: 2px solid var(--yellow);
      flex-direction: column;
    }

    .mobile-menu.open {
      display: flex;
    }

    .mobile-menu a {
      display: block;
      padding: 18px 28px;
      color: var(--white);
      font-weight: 900;
      font-size: 15px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: color 120ms ease, background 120ms ease;
    }

    .mobile-menu a:hover {
      color: var(--yellow);
      background: rgba(255, 230, 0, 0.06);
    }

    @media (max-width: 1040px) {
      .nav-inner {
        grid-template-columns: 1fr auto;
      }

      .nav-links {
        display: none;
      }

      .hamburger {
        display: flex;
      }

      .nav {
        position: relative; z-index: 20;
      }

      .hero,
      .services .section-inner,
      .proof .section-inner {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 610px;
      }

      .offer-panel {
        position: relative;
        top: auto;
      }

      .feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 700px) {
      .nav-inner {
        padding: 0 16px;
      }

      .button {
        min-height: 44px;
        padding: 12px 14px;
        font-size: 14px;
      }

      .hero,
      .section-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .hero {
        min-height: auto;
        padding-top: 52px;
      }

      .hero-visual {
        min-height: 520px;
      }

      .hero-copy p,
      .services-sub {
        font-size: 19px;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .graffiti {
        right: 8px;
        bottom: 36px;
      }
    }
    /* === 320PX HEADER CTA FIX: shrink header CTA further so it fits a 320px viewport === */
    @media (max-width: 480px) {
      .nav-inner .button {
        padding: 8px 8px;
        font-size: 10px;
        letter-spacing: 0.02em;
        gap: 0;
        min-height: 36px;
        white-space: normal;
        text-align: center;
      }
      .nav-inner .button span {
        display: none;
      }
    }


/* === PULLQUOTE BAND === */
    .pullquote-band {
      background: #0d0d0d;
      border-top: 1px solid rgba(255, 230, 0, 0.18);
      border-bottom: 1px solid rgba(255, 230, 0, 0.18);
    }

    .pullquote-inner {
      width: min(92%, 1140px);
      margin: 0 auto;
      padding: 92px 28px 84px;
      position: relative;
    }

    .pullquote-mark {
      position: absolute;
      top: 24px;
      left: 20px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 180px;
      line-height: 1;
      color: var(--yellow);
      opacity: 0.18;
      pointer-events: none;
      user-select: none;
    }

    .pullquote-text {
      position: relative;
      z-index: 1;
      margin: 0 0 28px;
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(28px, 3.6vw, 56px);
      line-height: 1.05;
      text-transform: uppercase;
      text-align: center;
      color: var(--white);
      text-shadow: none;
      border: none;
      padding: 0;
    }

    .pullquote-attr {
      text-align: center;
      color: var(--yellow);
      font-size: 15px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin: 0;
    }

    /* === ORIGIN / ADOPTION.COM BAND === */
    .origin-band {
      background:
        radial-gradient(circle at 8% 30%, rgba(255, 31, 143, 0.12), transparent 22%),
        radial-gradient(circle at 92% 70%, rgba(255, 230, 0, 0.1), transparent 20%),
        #0d0d0d;
      clip-path: polygon(0 0, 100% 0, 100% 94%, 0 100%);
      padding: 16px 0;
    }

    .origin-inner {
      width: min(92%, 1140px);
      margin: 0 auto;
      padding: 72px 28px;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 56px;
      align-items: center;
    }

    .origin-stat {
      text-align: center;
      flex-shrink: 0;
    }

    .origin-year {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(90px, 11vw, 170px);
      line-height: 0.88;
      color: var(--yellow);
      text-shadow: none;
      white-space: nowrap;
    }

    .origin-name {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(22px, 2.8vw, 44px);
      line-height: 1;
      color: var(--pink);
      text-transform: uppercase;
      text-shadow: 2px 2px 0 #050505;
      margin-top: 8px;
    }

    .origin-copy {
      max-width: 640px;
    }

    .origin-text {
      font-size: clamp(19px, 2.1vw, 24px);
      font-weight: 700;
      color: #e0dbd3;
      line-height: 1.45;
      margin-bottom: 12px;
    }

    .origin-emphasis {
      font-family: Impact, "Arial Black", sans-serif;
      font-size: clamp(28px, 3.5vw, 52px);
      line-height: 1;
      color: var(--yellow);
      text-transform: uppercase;
      text-shadow: none;
      margin-bottom: 16px;
    }

    .origin-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      padding: 13px 22px 12px;
      background: transparent;
      border: 2px solid var(--yellow);
      color: var(--yellow);
      font-family: Impact, "Arial Black", sans-serif;
      font-size: 17px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      text-decoration: none;
      transition: background 0.2s ease, color 0.2s ease;
    }

    .origin-cta span {
      font-size: 20px;
    }

    .origin-cta:hover {
      background: var(--yellow);
      color: #050505;
    }

    @media (max-width: 700px) {
      .origin-inner {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: center;
      }
      .origin-cta {
        display: inline-flex;
      }
    }

    /* === ANIMATION 1: Hero gradient blobs === */
@keyframes blobFloat1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(20px, 30px); }
}
@keyframes blobFloat2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-20px, -20px); }
}
@keyframes blobFloat3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(15px, -25px); }
}
.hero-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.hero-blob-1 {
  width: 600px;
  height: 600px;
  top: -100px;
  left: -80px;
  background: radial-gradient(circle, rgba(255,230,0,0.6) 0%, transparent 70%);
  opacity: 0.06;
  filter: blur(80px);
  animation: blobFloat1 20s infinite alternate ease-in-out;
}
.hero-blob-2 {
  width: 500px;
  height: 500px;
  bottom: -80px;
  right: -60px;
  background: radial-gradient(circle, rgba(255,31,143,0.6) 0%, transparent 70%);
  opacity: 0.05;
  filter: blur(100px);
  animation: blobFloat2 25s infinite alternate-reverse ease-in-out;
}
.hero-blob-3 {
  width: 400px;
  height: 400px;
  top: 30%;
  right: 20%;
  background: radial-gradient(circle, rgba(255,230,0,0.6) 0%, transparent 70%);
  opacity: 0.04;
  filter: blur(60px);
  animation: blobFloat3 30s infinite alternate ease-in-out;
}

/* === ANIMATION 4: Hover glows on cards and buttons === */
.feature {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.feature:hover {
  box-shadow: 0 0 24px rgba(255,31,143,0.35), 0 0 48px rgba(255,31,143,0.15);
  transform: translateY(-3px);
}
.node {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.node:hover {
  box-shadow: 0 0 24px rgba(255,31,143,0.35), 0 0 48px rgba(255,31,143,0.15);
  transform: translateY(-3px);
}
.button {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.button:hover {
  box-shadow: 5px 5px 0 #000, 0 0 0 1px rgba(0,0,0,0.5), 0 0 20px rgba(255,31,143,0.5), 0 0 40px rgba(255,31,143,0.25);
}
.button-pink {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.button-pink:hover {
  box-shadow: 6px 6px 0 var(--yellow), 0 0 20px rgba(255,31,143,0.5), 0 0 40px rgba(255,31,143,0.25);
}

  
    .audit-lede {
      max-width: min(100%, 584px); font-size: 19px; line-height: 1.7;
      color: #e7e1d6; margin: 0 0 18px;
    }
    
    /* ---- Client proof ---- */
    .proof-quote {
      max-width: min(100%, 584px); margin: 40px auto 0; padding-top: 28px;
      border-top: 1px solid rgba(255, 255, 255, 0.16);
    }
    .proof-quote.on-paper { border-top-color: rgba(5, 5, 5, 0.18); }
    .proof-quote blockquote {
      margin: 0 0 18px; font-size: 19px; line-height: 1.7; color: #e7e1d6;
    }
    .proof-quote.on-paper blockquote { color: #1c1c1c; }
    .proof-label {
      font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
      color: var(--yellow); margin-bottom: 16px; font-weight: 700;
    }
    .proof-quote.on-paper .proof-label { color: var(--pink-dark); }
    .proof-attrib { font-size: 15px; line-height: 1.5; color: var(--white); font-weight: 800; }
    .proof-quote.on-paper .proof-attrib { color: #0b0b0b; }
    .proof-attrib span { display: block; font-weight: 400; color: #b9b3a6; margin-top: 3px; }
    .proof-quote.on-paper .proof-attrib span { color: #4a4a4a; }
    .proof-attrib i { font-style: italic; }
    

    .proof-headshot-row { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
    .proof-headshot { width:48px; height:48px; display:grid; place-items:center; background:var(--yellow); color:#050505; font-family: Impact, "Arial Black", sans-serif; font-size:18px; line-height:1; border:2px solid var(--pink); transform: rotate(-3deg); }
    .proof-headshot-meta { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); }

    .proof-logo { display: inline-block; margin-bottom: 20px; }
    /* aspect-ratio reserves the box before the lazy image arrives; width:auto alone
       leaves it 0 wide and shifts the layout on load. */
    .proof-logo img {
      display: block; height: 88px; width: auto; max-width: 100%;
      aspect-ratio: 411 / 176;
    }
    
    /* Keyboard focus — visible outline for tab users (WCAG 2.4.7) */
    a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
    .button:focus-visible, .button-pink:focus-visible, .button-quiz-cta:focus-visible, .button-audit-cta:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

    /* Respect prefers-reduced-motion (WCAG 2.3.3) — disable blob float, hover lift, scroll-behavior */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
      .hero-blob, .button:hover, .feature:hover, .proof-card:hover, .node:hover { animation: none !important; transform: none !important; box-shadow: 5px 5px 0 #000 !important; }
    }

  

/* --- block 2: readiness / additional sections --- */

      /* READINESS SECTION */
      .readiness-section {
        position: relative;
        overflow: hidden;
        background:
          radial-gradient(circle at 15% 30%, rgba(255, 31, 143, 0.1), transparent 22%),
          radial-gradient(circle at 85% 70%, rgba(255, 230, 0, 0.08), transparent 18%),
          #0d0d0d;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
      }
      .readiness-inner {
        max-width: 760px;
      }
      .readiness-tag {
        display: inline-block;
        padding: 6px 14px;
        background: var(--yellow);
        color: #050505;
        font-family: Impact, "Arial Black", sans-serif;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 20px;
        clip-path: polygon(0 14%, 96% 0, 100% 82%, 4% 100%);
      }
      .readiness-heading {
        font-family: Impact, "Arial Black", sans-serif;
        font-size: clamp(44px, 5.5vw, 90px);
        line-height: 0.9;
        text-transform: uppercase;
        color: var(--white);
        text-shadow: none;
        margin-bottom: 22px;
      }
      .readiness-body {
        font-size: 20px;
        font-weight: 700;
        color: #c8c8c8;
        max-width: 640px;
        margin-bottom: 16px;
      }
      .readiness-form {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 32px;
        align-items: center;
      }
      .readiness-input {
        flex: 1;
        min-width: 260px;
        max-width: 420px;
        height: 52px;
        padding: 0 18px;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: var(--white);
        font-size: 16px;
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        outline: none;
      }
      .readiness-input::placeholder {
        color: var(--muted);
      }
      .readiness-input:focus {
        border-color: var(--yellow);
      }
      .button-quiz-cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 56px;
        padding: 15px 28px 14px;
        border: 0;
        color: var(--white);
        background: var(--pink);
        font-family: 'Oswald', Impact, "Arial Black", sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        letter-spacing: 0.05em;
        box-shadow: 6px 6px 0 var(--yellow);
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        margin-top: 8px;
      }
      .button-quiz-cta span { font-size: 22px; }

      /* === ANIMATION 4 (continued): Hover glows for section-specific buttons === */
      .button-leak-cta {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
      }
      .button-leak-cta:hover {
        box-shadow: 7px 7px 0 var(--yellow), 0 0 20px rgba(255,31,143,0.5), 0 0 40px rgba(255,31,143,0.25);
      }
      .button-quiz-cta {
        transition: box-shadow 0.25s ease, transform 0.25s ease;
      }
      .button-quiz-cta:hover {
        box-shadow: 6px 6px 0 var(--yellow), 0 0 20px rgba(255,31,143,0.5), 0 0 40px rgba(255,31,143,0.25);
      }
    

/* --- block 3: articles surface --- */

        .articles-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
        .article-card { display:flex; flex-direction:column; gap:10px; padding:24px 22px 20px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.12); border-top:3px solid var(--yellow); text-decoration:none; transition: box-shadow 0.3s ease, transform 0.3s ease; }
        .article-card:hover { box-shadow:0 0 24px rgba(255,230,0,0.22), 0 0 48px rgba(255,230,0,0.10); transform: translateY(-3px); }
        .article-kicker { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); }
        .article-card h3 { font-family:'Oswald', Impact, sans-serif; font-weight:700; font-size:19px; line-height:1.15; color:var(--white); margin:0; }
        .article-card p { font-size:14px; font-weight:700; line-height:1.5; color:#cfc9c0; margin:0; flex:1; }
        @media (max-width: 980px) { .articles-grid { grid-template-columns:1fr; } }