/* ConnectWholesale — Brand page styles
   Extracted from the approved brand HTML prototype. */

:root{
      --navy:#141b2d;
      --navy-2:#1a2238;
      --ink:#141b2d;
      --muted:#5a4a50;
      --paper:#f7f6f2;
      --card:#ffffff;
      --line:#dedfd9;
      --pink:#ff5805;
      --gold:#ff5805;
      --green:#35ae82;
      --blue:#4567d8;
      --cw-orange:#ff5805;
      --cw-dark:#141b2d;
      --container:1320px;
      --ease:cubic-bezier(.2,.7,.2,1);
      --shadow:0 24px 70px rgba(20,27,45,.08);
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:#ffffff;
      color:var(--ink);
      font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.6;
      overflow-x:hidden;
    }
    body.page-template-page-brand #main-content,
    body.brand #main-content{
      --page-grid-mouse-x:-9999px;
      --page-grid-mouse-y:-9999px;
      --page-grid-hover-active:0;
      position:relative;
      isolation:isolate;
      background-color:#ffffff;
      background-image:
        linear-gradient(to right,rgba(12,4,7,var(--page-grid-opacity,.015)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(12,4,7,var(--page-grid-opacity,.015)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      background-repeat:repeat;
      background-attachment:scroll;
    }
    body.page-template-page-brand #main-content::before,
    body.brand #main-content::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right,rgba(12,4,7,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(12,4,7,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      background-repeat:repeat;
      opacity:var(--page-grid-hover-active,0);
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--page-grid-mouse-x,-9999px) var(--page-grid-mouse-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--page-grid-mouse-x,-9999px) var(--page-grid-mouse-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    body.page-template-page-brand #main-content > *,
    body.brand #main-content > *{
      position:relative;
      z-index:1;
    }
    body.page-template-page-brand #main-content > .section,
    body.brand #main-content > .section{
      isolation:auto;
      border-top:0 !important;
      border-bottom:0 !important;
      background-color:transparent;
      background-image:none;
    }
    body.page-template-page-brand #main-content > .section::before,
    body.brand #main-content > .section::before{
      content:none;
      display:none;
    }
    body.page-template-page-brand #main-content > .section > .container,
    body.brand #main-content > .section > .container{
      position:relative;
      z-index:1;
    }

    a{color:inherit;text-decoration:none}
    button,input,select,textarea{font:inherit}
    .container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
    .section{padding:100px 0}
    .eyebrow{
      font-size:12px;
      font-weight:700;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--muted);
      margin-bottom:18px;
    }

    h1,h2,h3,h4{
      margin:0;
      font-family:"Bricolage Grotesque",sans-serif;
      letter-spacing:-.045em;
      line-height:.98;
    }
    h1{font-size:clamp(60px,7.5vw,112px);font-weight:600}
    h2{font-size:clamp(42px,5vw,72px);font-weight:600}
    h3{font-size:clamp(28px,3vw,42px);font-weight:600}
    p{margin:0;color:var(--muted);font-size:18px;line-height:1.58}

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:50px;
      padding:0 24px;
      border:1px solid transparent;
      border-radius:999px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
      will-change:transform;
    }
    .btn:hover{transform:translateY(-2px)}
    .btn-pink,
    .btn-hero-pink{
      background:#ff5805;
      color:#ffffff !important;
      box-shadow:0 10px 26px rgba(255,88,5,.28);
    }
    .btn-pink:hover,
    .btn-hero-pink:hover{
      background:#ff5805;
      box-shadow:0 14px 32px rgba(255,88,5,.38);
    }
    .btn-dark,
    .btn-hero-dark{
      background:#141b2d;
      color:#ffffff !important;
      box-shadow:0 10px 24px rgba(20,27,45,.22);
    }
    .btn-dark:hover,
    .btn-hero-dark:hover{
      background:#141b2d;
      box-shadow:0 14px 30px rgba(20,27,45,.32);
    }
    .btn-light{
      background:#fff;
      border-color:#d7d8dc;
      color:#141b2d;
      box-shadow:0 4px 14px rgba(20,27,45,.04);
    }
    .btn-light:hover{
      background:#fff;
      border-color:#c8c9ce;
      box-shadow:0 8px 22px rgba(20,27,45,.1);
    }
    .btn-outline-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
    .btn-label-swap {
      display: grid;
      overflow: hidden;
      white-space: nowrap;
      perspective: 240px;
      transform-style: preserve-3d;
    }
    .btn-label-swap > span,
    .btn-label-swap::after {
      grid-area: 1 / 1;
      backface-visibility: hidden;
      will-change: transform, opacity;
      transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    }
    .btn-label-swap > span {
      transform: translateY(0) rotateX(0deg);
      transform-origin: center bottom;
    }
    .btn-label-swap::after {
      content: attr(data-label);
      opacity: 0;
      transform: translateY(110%) rotateX(-90deg);
      transform-origin: center top;
    }
    .btn:hover .btn-label-swap > span,
    .btn:focus-visible .btn-label-swap > span {
      opacity: 0;
      transform: translateY(-110%) rotateX(90deg);
    }
    .btn:hover .btn-label-swap::after,
    .btn:focus-visible .btn-label-swap::after {
      opacity: 1;
      transform: translateY(0) rotateX(0deg);
    }
    .btn-arrow{
      display:inline-block;
      font-size:16px;
      line-height:1;
      will-change:transform;
      transition:transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .btn:hover .btn-arrow,
    .btn:focus-visible .btn-arrow{
      transform:translateX(5px);
    }

    .announcement{
      background:var(--navy);
      color:#fff;
      font-size:13px;
    }
    .announcement .container{
      min-height:34px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    header{
      position:sticky;
      top:0;
      z-index:60;
      background:rgba(246,244,239,.92);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(18,19,23,.06);
    }
    .nav{
      min-height:78px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:28px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:21px;
      font-weight:700;
      letter-spacing:-.04em;
      white-space:nowrap;
    }
    .brand-mark{
      width:34px;height:34px;border-radius:10px;
      position:relative;
      background:linear-gradient(135deg,var(--pink),var(--gold));
    }
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:8px;
      border:2px solid #fff;
      border-radius:7px;
    }


    /* 01 HERO — offset editorial layout */
    .hero{
      margin-top:-98px;
      padding:136px 0 88px;
      position:relative;
      overflow:hidden;
      background-color:#f6f5f1;
      background-image:var(--cw-brand-hero-background, url("../images/brand-bg.png"));
      background-size:cover;
      background-position:center bottom;
      background-repeat:no-repeat;
    }
    .hero-bg-overlay{
      display:none !important;
      position:absolute;
      inset:0;
      background-color:var(--cw-hero-overlay-color, #ffffff);
      opacity:0;
      pointer-events:none;
      z-index:0;
      transition:background-color 0.15s ease, opacity 0.15s ease;
    }
    /* Dark angled backing card matching home hero curvature */
    .hero::before{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:-80px;
      width:calc(50% + 72px);
      background:#141b2d;
      transform:skewX(-8.5deg);
      transform-origin:left bottom;
      border-radius:0 0 44px 0;
      box-shadow:18px 24px 60px rgba(20,27,45,0.3);
      z-index:1;
      pointer-events:none;
    }
    /* White angled content panel with matching curved bottom-right corner */
    .hero::after{
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:-80px;
      width:calc(50% + 52px);
      background-color:rgba(255, 255, 255, 0.94);
      background-image:
        linear-gradient(to right, rgba(12, 4, 7, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(12, 4, 7, 0.045) 1px, transparent 1px);
      background-size: var(--grid-size, 36px) var(--grid-size, 36px);
      background-position: center top;
      background-repeat: repeat;
      transform:skewX(-8.5deg);
      transform-origin:left bottom;
      border-radius:0 0 40px 0;
      z-index:2;
      pointer-events:none;
    }
    .hero-card-grid-spotlight{
      position:absolute;
      top:0;
      bottom:0;
      left:-80px;
      width:calc(50% + 52px);
      z-index:3;
      overflow:hidden;
      border-radius:0 0 40px 0;
      pointer-events:none;
      transform:skewX(-8.5deg);
      transform-origin:left bottom;
      background-image:
        linear-gradient(to right,rgba(12,4,7,0.22) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(12,4,7,0.22) 1px,transparent 1px);
      background-size:var(--grid-size,36px) var(--grid-size,36px);
      background-position:center top;
      background-repeat:repeat;
      opacity:0;
      mask-image:radial-gradient(circle 280px at calc(var(--hero-card-grid-x,-9999px) + 80px) var(--hero-card-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle 280px at calc(var(--hero-card-grid-x,-9999px) + 80px) var(--hero-card-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .hero:hover .hero-card-grid-spotlight{opacity:1}
    .hero .container{
      position:relative;
      z-index:4;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:72px;
      align-items:center;
    }
    .hero-copy{
      max-width:610px;
    }
    .hero-copy .eyebrow{
      margin:0 0 18px;
      font-size:12px;
      line-height:1;
      font-weight:700;
      letter-spacing:.13em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .hero-copy h1{
      font-size:clamp(38px,3.7vw,56px);
      font-weight:700;
      letter-spacing:-.03em;
      line-height:1.05;
      max-width:590px;
    }
    .hero-copy h1 .accent{color:var(--pink)}
    .hero-br-mobile{display:none}
    .hero-copy p{
      max-width:590px;
      margin-top:24px;
      font-size:17px;
      line-height:1.65;
      color:var(--muted);
    }
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:34px;
    }
    .hero-proof{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
      margin-top:28px;
      font-size:14px;
      color:var(--muted);
    }
    .hero-proof span::before{
      content:"✓";
      color:var(--green);
      font-weight:800;
      margin-right:7px;
    }

    .brand-brief{
      background:transparent;
      border:none;
      border-radius:0;
      box-shadow:none;
      overflow:visible;
    }
    .brand-brief:hover{
      transform:none;
      box-shadow:none;
    }
    .brief-body{
      padding:0;
    }
    .brief-stack{
      position:relative;
      display:grid;
      gap:14px;
      max-width:480px;
      margin-left:auto;
    }
    .brief-row{
      position:relative;
      display:grid;
      grid-template-columns:40px 1fr;
      gap:14px;
      align-items:center;
      padding:12px 20px 12px 14px;
      border-radius:26px;
      background:rgba(255,255,255,0.94);
      backdrop-filter:blur(16px);
      -webkit-backdrop-filter:blur(16px);
      border:1px solid rgba(255,255,255,0.95);
      border-left:4px solid transparent;
      box-shadow:0 10px 28px -6px rgba(11,21,52,0.09), 0 2px 6px rgba(11,21,52,0.03);
      transition:background-color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
      z-index:2;
    }
    .brief-row:hover{
      transform:none !important;
      background:#ffffff;
      border-color:rgba(20,27,45,0.16);
      border-left:4px solid #ff5805;
      box-shadow:0 14px 32px rgba(20,27,45,0.08);
      animation:orangeBorderBlink 1.4s infinite ease-in-out;
    }
    .brief-row span:first-child{
      width:40px;
      height:40px;
      border-radius:9999px;
      display:grid;
      place-items:center;
      background:#141b2d;
      border:1px solid #141b2d;
      color:#ffffff;
      transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
      flex-shrink:0;
    }
    .brief-row span:first-child svg{
      width:18px;
      height:18px;
      stroke:#ffffff;
      display:block;
      transition:stroke .25s var(--ease), transform .25s var(--ease);
    }
    .brief-row:hover span:first-child{
      background:#ff5805;
      border-color:#ff5805;
      color:#ffffff;
      transform:scale(1.08);
    }
    .brief-row:hover span:first-child svg{
      stroke:#ffffff;
      transform:scale(1.08);
    }
    .brief-row strong{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
    .brief-row small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
    .brief-cta{
      margin-top:16px;
      padding:20px 22px;
      border-radius:20px;
      background:linear-gradient(135deg,var(--navy),#1d2b4e);
      color:#fff;
    }
    .brief-cta p{font-size:13px;color:#c5ccda;margin:0 0 14px;line-height:1.5}

    /* ============================================================
       02 BRAND OUTCOME MARQUEE BAR (MATCHED TO HOME HERO RULES)
       ============================================================ */
    .brand-marquee-bar {
      --marquee-font-family: "Bricolage Grotesque", "Inter", sans-serif;
      --marquee-font-weight: 700;
      --marquee-font-style: italic;
      --marquee-text-size: 48px;
      --marquee-icon-size: 47px;
      position: relative;
      width: 100%;
      max-width: 100%;
      margin: 0;
      background: var(--cw-marquee-bg, #141b2d);
      border-top: 1px solid var(--cw-marquee-border, rgba(255, 88, 5, 0.25));
      border-bottom: 1px solid var(--cw-marquee-border, rgba(255, 88, 5, 0.25));
      border-left: none;
      border-right: none;
      border-radius: 0 !important;
      height: 112px;
      display: flex;
      align-items: center;
      overflow: hidden;
      box-shadow: var(--cw-marquee-shadow, 0 16px 38px -6px rgba(12, 4, 7, 0.35));
      user-select: none;
      z-index: 5;
      box-sizing: border-box;
      transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .brand-marquee-track {
      display: flex;
      width: max-content;
      animation: brandMarqueeScroll 116s linear infinite;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      align-items: center;
    }
    .brand-marquee-group {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }
    .brand-marquee-item {
      display: inline-flex;
      align-items: center;
      gap: 28px;
      padding: 0 44px;
      font-family: var(--marquee-font-family);
      font-size: var(--marquee-text-size);
      font-weight: var(--marquee-font-weight);
      font-style: var(--marquee-font-style);
      letter-spacing: -0.01em;
      line-height: 1;
      white-space: nowrap;
      transition: opacity 0.2s ease, color 0.3s ease;
    }
    .brand-marquee-item--orange {
      color: var(--cw-marquee-color-orange, #ff5805);
    }
    .brand-marquee-item--white {
      color: var(--cw-marquee-color-white, #ffffff);
    }
    .brand-marquee-item:hover {
      opacity: 0.88;
    }
    .brand-marquee-item .marquee-chevron {
      display: none;
    }
    .brand-marquee-item::after {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      flex: 0 0 52px;
      font-family: "Arial Black", "Arial", sans-serif;
      font-size: var(--marquee-icon-size);
      font-weight: 900;
      font-style: normal;
      line-height: 0.8;
      letter-spacing: -0.08em;
      -webkit-text-stroke: 0.35px currentColor;
      transition: color 0.3s ease;
    }
    .brand-marquee-item--orange::after {
      color: var(--cw-marquee-glyph-orange, #ffffff);
    }
    .brand-marquee-item--white::after {
      color: var(--cw-marquee-glyph-white, #ff5805);
    }
    .brand-marquee-item:nth-child(1)::after { content: "⇄"; }
    .brand-marquee-item:nth-child(2)::after { content: "✦"; }
    .brand-marquee-item:nth-child(3)::after { content: "◎"; }
    .brand-marquee-item:nth-child(4)::after { content: "↗"; }
    .brand-marquee-item:nth-child(5)::after { content: "+"; }
    .brand-marquee-item:nth-child(6)::after { content: "◆"; }

    @keyframes brandMarqueeScroll {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }

    /* 03 Bento benefits */
    .section-head{
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:72px;
      align-items:end;
      margin-bottom:52px;
    }
    .section-head p{max-width:650px}
    .bento{
      display:grid;
      grid-template-columns:1.1fr .9fr .9fr;
      grid-template-rows:repeat(2,minmax(240px,auto));
      gap:18px;
    }
    .bento-card{
      --bento-card-grid-x:-9999px;
      --bento-card-grid-y:-9999px;
      background:#ffffff;
      border:1px solid var(--line);
      border-radius:26px;
      padding:32px;
      overflow:hidden;
      position:relative;
      isolation:isolate;
      box-shadow:0 4px 16px rgba(20,27,45,0.03);
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .bento-card:not(.large)::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      opacity:0;
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--bento-card-grid-x,-9999px) var(--bento-card-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--bento-card-grid-x,-9999px) var(--bento-card-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .bento-card > *{
      position:relative;
      z-index:1;
    }
    .bento-card h3{
      font-size:30px;
      margin-bottom:14px;
      color:#141b2d;
      transition:color .3s var(--ease);
    }
    .bento-card p{
      font-size:15px;
      line-height:1.58;
      color:#5a4a50;
      transition:color .3s var(--ease);
    }
    .mini-tag{
      display:inline-flex;
      width:max-content;
      padding:7px 10px;
      border-radius:999px;
      background:#f0efeb;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.09em;
      color:#141b2d;
      margin-bottom:24px;
      transition:background .3s var(--ease),color .3s var(--ease);
    }

    /* Permanent Midnight Card: Large Left Card with Inside Grid and Mouse Spotlight */
    .bento-card.large{
      --bento-grid-x:-9999px;
      --bento-grid-y:-9999px;
      position:relative;
      overflow:hidden;
      isolation:isolate;
      grid-row:1 / span 2;
      background-color:var(--navy) !important;
      background-image:
        linear-gradient(to right,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      border-color:rgba(255,255,255,.1) !important;
      color:#ffffff;
      min-height:500px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      box-shadow:0 14px 36px rgba(20,27,45,0.22);
    }
    .bento-card.large::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      opacity:0;
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--bento-grid-x,-9999px) var(--bento-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--bento-grid-x,-9999px) var(--bento-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .bento-card.large:hover::before,
    .bento-card.large.is-in-view::before{
      opacity:1;
    }
    .bento-card.large > *{
      position:relative;
      z-index:1;
    }
    .bento-card.large h3{
      color:#ff5805 !important;
    }
    .bento-card.large p{
      color:rgba(255,255,255,0.82) !important;
    }
    .bento-card.large .mini-tag{
      background:rgba(255,255,255,0.12) !important;
      color:#ffffff !important;
    }
    .bento-figure{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:clamp(70px,8vw,120px);
      letter-spacing:-.07em;
      line-height:.82;
      color:rgba(255,255,255,0.08);
      user-select:none;
      pointer-events:none;
    }

    /* ==========================================================================
       BENTO CARDS: STATIC POSITION (NO MOVE/TILT), BLINKING ORANGE ACCENT & SOLID PILL
       ========================================================================== */

    /* Base side cards styling - static, no transform */
    .bento-card:not(.large) {
      background-color: #ffffff;
      border-left: 4px solid transparent;
      transform: none !important;
      transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
    }

    /* Card hover behavior: Completely static position (no movement), blinking left accent bar */
    .bento-card:not(.large):hover,
    .bento-card:not(.large).is-in-view {
      background-color: #ffffff;
      border-color: rgba(20, 27, 45, 0.16);
      border-left: 4px solid #ff5805;
      transform: none !important;
      box-shadow: 0 14px 32px rgba(20, 27, 45, 0.08);
      animation: orangeBorderBlink 1.4s infinite ease-in-out;
    }

    @keyframes orangeBorderBlink {
      0%, 100% {
        border-left-color: #ff5805;
        box-shadow: 0 14px 32px rgba(20, 27, 45, 0.08), -3px 0 14px rgba(255, 88, 5, 0.35);
      }
      50% {
        border-left-color: rgba(255, 88, 5, 0.25);
        box-shadow: 0 14px 32px rgba(20, 27, 45, 0.08), -1px 0 4px rgba(255, 88, 5, 0.08);
      }
    }

    /* Title stays high-contrast Midnight */
    .bento-card:not(.large):hover h3,
    .bento-card:not(.large).is-in-view h3 {
      color: #141b2d !important;
    }

    /* Pill turns into solid 100% Midnight background with crisp white text */
    .bento-card:not(.large):hover .mini-tag,
    .bento-card:not(.large).is-in-view .mini-tag {
      background: #141b2d !important;
      color: #ffffff !important;
      border: 1px solid #141b2d;
    }

    /* 04 sticky proposition builder */
    /* 04 process timeline / proposition builder (matches Wholesale How it works) */
    .timeline-wrap{
      display:grid;
      grid-template-columns:.7fr 1.3fr;
      gap:70px;
      align-items:start;
    }
    .timeline-copy{
      position:sticky;
      top:120px;
    }
    .timeline-copy p{margin-top:22px}
    .timeline{
      position:relative;
      padding-left:36px;
    }
    .timeline::before{
      content:"";
      position:absolute;
      left:10px;
      top:10px;
      bottom:10px;
      width:2px;
      background:#d5d9e5;
    }
    .timeline-step{
      position:relative;
      background:#ffffff;
      border:1px solid var(--line);
      border-left:4px solid transparent;
      border-radius:22px;
      padding:28px 32px;
      margin-bottom:16px;
      box-shadow:0 4px 16px rgba(20,27,45,0.03);
      transform:none !important;
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .timeline-step:hover,
    .timeline-step.is-in-view{
      background-color:#ffffff;
      border-color:rgba(20,27,45,0.16);
      border-left:4px solid #ff5805;
      transform:none !important;
      box-shadow:0 14px 32px rgba(20,27,45,0.08);
      animation:orangeBorderBlink 1.4s infinite ease-in-out;
    }
    .timeline-step::before{
      content:"";
      position:absolute;
      left:-33px;
      top:32px;
      width:14px;
      height:14px;
      border-radius:50%;
      background:#ff5805;
      box-shadow:0 0 0 6px #f7f6f2;
      transition:transform .25s var(--ease),box-shadow .25s var(--ease);
    }
    .timeline-step:hover::before,
    .timeline-step.is-in-view::before{
      transform:scale(1.2);
      box-shadow:0 0 0 8px rgba(255,88,5,.15);
    }
    .timeline-step .step-label{
      display:inline-flex;
      width:max-content;
      padding:6px 12px;
      border-radius:999px;
      background:#f0efeb;
      font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.09em;
      color:#141b2d;
      margin-bottom:14px;
      border:1px solid transparent;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    }
    .timeline-step:hover .step-label,
    .timeline-step.is-in-view .step-label{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }
    .timeline-step h3{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:28px;
      margin-bottom:10px;
      color:#141b2d;
    }
    .timeline-step:hover h3{
      color:#141b2d !important;
    }
    .timeline-step p{
      font-size:15px;
      line-height:1.58;
      color:#5a4a50;
    }

    /* 05 journey rail (Matches home / Why ConnectWholesale properties) */
    .journey{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      border-radius:32px;
      background-color:var(--navy);
      background-image:
        linear-gradient(to right,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      color:#fff;
      box-shadow:0 24px 70px rgba(20,27,45,0.16);
    }
    .journey::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      opacity:0;
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--journey-grid-x,-9999px) var(--journey-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--journey-grid-x,-9999px) var(--journey-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .journey:hover::before{opacity:1}
    .journey > *{
      position:relative;
      z-index:1;
    }
    .journey-head{
      padding:60px 60px 32px;
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:60px;
      align-items:end;
    }
    .journey-head h2{
      max-width:650px;
      font-size:clamp(38px,3.7vw,56px);
      font-weight:700;
    }
    .journey-head h2 span{color:var(--pink)}
    .journey-head p{
      max-width:610px;
      color:rgba(255,255,255,.72);
      font-size:17px;
      line-height:1.65;
    }
    .journey-rail{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      border-top:1px solid rgba(255,255,255,.11);
    }
    .journey-step{
      position:relative;
      min-height:270px;
      padding:0;
      overflow:hidden;
      border-right:1px solid rgba(255,255,255,.11);
      transition:background-color .3s var(--ease);
    }
    .journey-step:hover,
    .journey-step.is-in-view{background-color:rgba(255,255,255,.025)}
    .journey-step:last-child{border-right:0}
    .journey-step__inner{
      position:relative;
      z-index:1;
      height:100%;
      min-height:270px;
      padding:34px;
      transition:transform .35s var(--ease);
      transform-origin:center;
    }
    .journey-step:nth-child(odd):hover .journey-step__inner{transform:translateY(-3px) rotate(-.55deg)}
    .journey-step:nth-child(even):hover .journey-step__inner{transform:translateY(-3px) rotate(.55deg)}
    .journey-icon{
      display:grid;
      width:46px;
      height:46px;
      margin-bottom:20px;
      place-items:center;
      border:1px solid rgba(255,88,5,.45);
      border-radius:14px;
      background:rgba(255,88,5,.1);
      color:#ff5805;
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:16px;
      font-weight:700;
      transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
    }
    .journey-step:hover .journey-icon,
    .journey-step.is-in-view .journey-icon{
      background:#ff5805;
      color:#ffffff;
      transform:scale(1.04);
    }
    .journey-step strong{
      display:block;
      min-height:2.24em;
      margin-bottom:14px;
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:clamp(21px,1.7vw,24px);
      font-weight:600;
      line-height:1.12;
      color:#ffffff;
    }
    .journey-step p{
      color:rgba(255,255,255,.66);
      font-size:15px;
      line-height:1.58;
    }

    /* 06 interactive audience tabs & sticky scroll */
    .buyers-scroll-section{
      position:relative;
      padding:0;
    }
    .buyers-scroll-wrap{
      position:relative;
      height:280vh;
    }
    .buyers-sticky-stage{
      position:sticky;
      top:20px;
      padding:24px 0 20px;
      min-height:100vh;
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .buyers-sticky-stage .section-head{
      margin-bottom:24px;
      gap:32px;
      align-items:end;
    }
    .buyers-sticky-stage .section-head h2{
      font-size:clamp(30px, 2.7vw, 42px);
    }
    .buyers-layout{
      display:grid;
      grid-template-columns:.7fr 1.3fr;
      gap:36px;
      align-items:start;
      width:100%;
    }
    .buyer-tabs{
      display:grid;
      gap:10px;
    }
    .buyer-tab{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      text-align:left;
      border:1px solid var(--line);
      background:#fff;
      color:var(--navy);
      border-radius:14px;
      padding:13px 18px;
      font-size:15px;
      font-weight:700;
      cursor:pointer;
      transition:background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
    }
    .buyer-tab .tab-arrow{
      color:currentColor;
      opacity:0.35;
      transition:transform .25s ease, color .25s ease, opacity .25s ease;
    }
    .buyer-tab:hover{
      background:#141b2d;
      color:#fff;
      border-color:#141b2d;
      transform:translateX(3px);
    }
    .buyer-tab:hover .tab-arrow{
      opacity:1;
      color:#ff5805;
      transform:translateX(4px);
    }
    .buyer-tab.active{
      background:#141b2d;
      color:#fff;
      border-color:#141b2d;
      box-shadow:0 8px 24px rgba(20,27,45,0.12);
    }
    .buyer-tab.active .tab-arrow{
      opacity:1;
      color:#ff5805;
      transform:translateX(4px);
    }
    .buyer-panels-stage{
      position:relative;
      min-height:375px;
    }
    .buyer-panel{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      min-height:375px;
      background:#fff;
      border:1px solid var(--line);
      border-left:4px solid #ff5805;
      border-radius:24px;
      padding:32px 38px;
      box-shadow:0 14px 32px rgba(20,27,45,0.08);
      overflow:hidden;
      opacity:0;
      visibility:hidden;
      transform:translateY(20px) scale(0.98);
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease),opacity .4s cubic-bezier(0.16, 1, 0.3, 1), transform .4s cubic-bezier(0.16, 1, 0.3, 1), visibility .4s;
      pointer-events:none;
    }
    .buyer-panel.is-active{
      opacity:1;
      visibility:visible;
      transform:translateY(0) scale(1);
      pointer-events:auto;
      position:relative;
      z-index:2;
      background-color:#ffffff;
      border-color:rgba(20,27,45,0.16);
      border-left:4px solid #ff5805;
      box-shadow:0 14px 32px rgba(20,27,45,0.08);
      animation:orangeBorderBlink 1.4s infinite ease-in-out;
    }
    .buyer-panel:hover{
      background-color:#ffffff;
      border-color:rgba(20,27,45,0.16);
      border-left:4px solid #ff5805;
      box-shadow:0 14px 32px rgba(20,27,45,0.08);
      animation:orangeBorderBlink 1.4s infinite ease-in-out;
    }
    .buyer-panel .mini-tag{
      display:inline-flex;
      width:max-content;
      padding:6px 12px;
      border-radius:999px;
      background:#141b2d;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.09em;
      color:#ffffff;
      margin-bottom:14px;
      border:1px solid #141b2d;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    }
    .buyer-panel.is-active .mini-tag,
    .buyer-panel:hover .mini-tag{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }
    .buyer-panel h3{
      font-size:clamp(24px, 2vw, 32px) !important;
      max-width:620px;
      line-height:1.15;
      margin-bottom:8px;
      color:#141b2d;
    }
    .buyer-panel:hover h3{
      color:#141b2d !important;
    }
    .buyer-panel p{
      max-width:650px;
      margin-top:10px;
      font-size:14.5px;
      line-height:1.52;
    }
    .buyer-panel ul{
      list-style:none;
      padding:0;
      margin:20px 0 0;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px 14px;
    }
    .buyer-panel li{
      padding:10px 14px;
      background:#f3f2ee;
      border-radius:12px;
      font-size:13.5px;
      font-weight:700;
    }

    /* 07 QUESTIONS AND ANSWERS (Exact match with Home page) */
    .faq-section{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      background-color:transparent;
    }
    .faq-section > .container{position:relative;z-index:2}
    .faq-showcase{
      display:grid;
      grid-template-columns:minmax(300px,.72fr) minmax(0,1.28fr);
      gap:74px;
      align-items:start;
    }
    .faq-section .faq-intro{
      position:sticky;
      top:120px;
      padding:12px 0 36px 36px;
      border-left:6px solid #ff5805;
      max-width:530px;
    }
    .faq-section .faq-intro h2{
      font-size:clamp(38px,3.7vw,56px);
      font-weight:700;
      line-height:.98;
      letter-spacing:-.055em;
      color:#141b2d;
    }
    .faq-section .faq-intro h2 span{color:#ff5805}
    .faq-section .faq-intro > p{
      max-width:600px;
      margin-top:24px;
      font-size:17px;
      line-height:1.65;
      color:#5a4a50;
    }
    .faq-section .faq-intro .btn{margin-top:30px}
    .faq-audience{display:grid;gap:10px;margin-top:32px}
    .faq-audience-card{
      position:relative;
      display:grid;
      grid-template-columns:36px 1fr;
      column-gap:10px;
      align-items:center;
      padding:13px 14px;
      border:1px solid rgba(12,4,7,.09);
      border-radius:14px;
      background:rgba(255,255,255,.64);
    }
    .faq-audience-card > span{
      grid-row:1 / 3;
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:12px;
      font-weight:700;
      color:#ff5805;
    }
    .faq-audience-card strong{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:15px;
      line-height:1.2;
      color:#141b2d;
    }
    .faq-audience-card small{
      font-size:12px;
      line-height:1.35;
      color:#5a4a50;
    }
    .faq-list{display:grid;gap:12px;position:relative}
    .faq-item{
      position:relative;
      overflow:hidden;
      border:1px solid rgba(12,4,7,.12);
      border-radius:18px;
      background:#fff;
      transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
    }
    .faq-item:hover{
      transform:translateX(-5px);
      border-color:rgba(255,88,5,.32);
    }
    .faq-item.is-open{
      z-index:1;
      border-color:#d3cac3;
      background:#e5e1dd;
      background-image:none;
    }
    .faq-item h3{margin:0}
    .faq-item h3 button{
      display:grid;
      width:100%;
      padding:24px 26px;
      grid-template-columns:minmax(0,1fr) 40px;
      gap:18px;
      align-items:center;
      border:0;
      background:transparent;
      color:inherit;
      text-align:left;
      cursor:pointer;
    }
    .faq-item h3 button > span:first-child{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:clamp(16px,1.15vw,18px);
      font-weight:600;
      letter-spacing:-.02em;
      line-height:1.22;
      color:#141b2d;
    }
    .faq-toggle{
      position:relative;
      width:38px;
      height:38px;
      border:1px solid rgba(12,4,7,.14);
      border-radius:50%;
      background:#fff;
      color:#141b2d;
      transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
    }
    .faq-toggle::before,.faq-toggle::after{
      content:"";
      position:absolute;
      top:50%;
      left:50%;
      width:13px;
      height:2px;
      border-radius:2px;
      background:currentColor;
      transform:translate(-50%,-50%);
      transition:transform .3s var(--ease),opacity .3s var(--ease);
    }
    .faq-toggle::after{transform:translate(-50%,-50%) rotate(90deg)}
    .faq-item.is-open .faq-toggle{
      transform:rotate(90deg);
      border-color:#141b2d;
      background:#141b2d;
      color:#fff;
    }
    .faq-item.is-open .faq-toggle::after{opacity:0}
    .faq-answer{
      display:grid;
      grid-template-rows:0fr;
      transition:grid-template-rows .38s var(--ease);
    }
    .faq-answer > div{overflow:hidden}
    .faq-answer p{
      max-width:760px;
      padding:0 82px 0 26px;
      font-size:15px;
      line-height:1.68;
      color:#5a4a50;
      opacity:0;
      transform:translateY(-8px);
      transition:padding .38s var(--ease),opacity .28s var(--ease),transform .38s var(--ease);
    }
    .faq-item.is-open .faq-answer{grid-template-rows:1fr}
    .faq-item.is-open .faq-answer p{padding-bottom:28px;opacity:1;transform:translateY(0)}

    /* 08 FINAL CTA (Exact match with Home page) */
    .cta-panel{
      --cta-grid-x:-9999px;
      --cta-grid-y:-9999px;
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(300px,.55fr);
      align-items:center;
      gap:72px;
      overflow:hidden;
      isolation:isolate;
      padding:68px 64px;
      border:1px solid rgba(255,255,255,.1);
      border-radius:32px;
      background-color:var(--navy);
      background-image:
        linear-gradient(to right,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,255,255,var(--page-grid-opacity,.015)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      color:#fff;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:0;
      pointer-events:none;
      background-image:
        linear-gradient(to right,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,88,5,var(--page-grid-hover-opacity,.11)) 1px,transparent 1px);
      background-size:var(--page-grid-size,36px) var(--page-grid-size,36px);
      background-position:center top;
      opacity:0;
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--cta-grid-x) var(--cta-grid-y),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--cta-grid-x) var(--cta-grid-y),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .cta-panel:hover::before{opacity:1}
    .cta-panel > *{position:relative;z-index:1}
    .cta-copy .eyebrow{color:#ff5805}
    .cta-copy h3{
      max-width:720px;
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:clamp(38px,3.7vw,56px);
      font-weight:700;
      line-height:1.02;
      letter-spacing:-.05em;
      color:#ffffff;
    }
    .cta-copy h3 span{color:#ff5805}
    .cta-panel p{max-width:680px;margin-top:20px;color:#c8bec1;font-size:16px;line-height:1.65}
    .cta-actions{display:grid;gap:12px;width:100%;justify-self:end}
    .cta-actions .btn{
      width:100%;
      min-height:58px;
      justify-content:space-between;
      padding-inline:22px;
      transition:transform .28s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
    }
    .cta-actions .btn:hover{transform:translateX(6px)}
    .cta-actions .btn-pink{
      border-color:#ff5805;
      background:#ff5805;
      color:#ffffff;
    }
    .cta-actions .btn-pink:hover{
      border-color:#e04d04;
      background:#e04d04;
      box-shadow:0 8px 24px rgba(255,88,5,0.35);
    }
    .cta-actions .btn-light{
      border-color:#fff;
      background:#fff;
      color:var(--navy);
    }
    .cta-actions .btn-light:hover{
      background:#f3f2ee;
      border-color:#f3f2ee;
      box-shadow:0 8px 24px rgba(0,0,0,0.15);
    }
    .cta-actions .btn-dark-outline{
      border-color:rgba(255,255,255,.28);
      background:rgba(255,255,255,.035);
      color:#fff;
    }
    .cta-actions .btn-dark-outline:hover{
      border-color:#ff5805;
      background:rgba(255,88,5,.1);
    }

    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .7s var(--ease),transform .7s var(--ease);
    }
    .reveal.visible{opacity:1;transform:none}

    @media(max-width:1050px){
      .hero::before{
        clip-path:none;
        background:linear-gradient(to bottom, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.92) 55%, rgba(255,255,255,0.8) 100%);
        filter:none;
      }
      .hero::after{
        display:none;
      }
      .hero-grid,.section-head,.timeline-wrap,.proposition-wrap,.journey-head,.buyers-layout{grid-template-columns:1fr}
      .hero-copy,.timeline-copy,.proposition-sticky{position:static}
      .faq-section .faq-showcase{grid-template-columns:1fr;gap:52px}
      .faq-section .faq-intro{position:relative;top:auto;max-width:720px;padding:0 0 0 24px}
      .cta-panel{grid-template-columns:1fr;gap:40px}
      .buyers-scroll-wrap{height:auto}
      .buyers-sticky-stage{position:static;padding:0;min-height:auto}
      .buyer-panels-stage{min-height:auto}
      .buyer-panel{position:relative;display:none;opacity:1;visibility:visible;transform:none;min-height:auto}
      .buyer-panel.is-active{display:block}
      .bento{grid-template-columns:1fr 1fr}
      .bento-card.large{grid-row:auto;grid-column:1 / -1;min-height:400px}
      .journey-rail{grid-template-columns:1fr 1fr}
      .journey-step:nth-child(2){border-right:0}
      .journey-step{border-bottom:1px solid rgba(255,255,255,.12)}
      .footer-grid{grid-template-columns:1fr 1fr}

    }

    @media(max-width:768px){
      .hero{
        margin-top:-98px;
        padding-top:126px;
        padding-bottom:56px;
      }
      .hero::before,
      .hero::after,
      .hero-card-grid-spotlight{
        display:none !important;
        content:none !important;
        background:none !important;
      }
      .brand-brief{
        display:none !important;
      }
      .hero-bg-overlay{
        display:block !important;
        position:absolute;
        inset:0;
        background-color:#ffffff;
        opacity:0.75;
        pointer-events:none;
        z-index:0;
      }
      .hero-grid{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        width:100% !important;
      }
      .hero-copy{
        max-width:100% !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        margin:0 auto !important;
      }
      .hero-br-mobile{
        display:inline !important;
      }
      .hero-copy .eyebrow{
        text-align:center !important;
        margin:0 auto 18px !important;
      }
      .hero-copy h1{
        text-align:center !important;
        font-size:clamp(36px, 10vw, 48px) !important;
        line-height:1.08 !important;
        letter-spacing:-0.03em !important;
        font-weight:700 !important;
        margin:0 auto !important;
        max-width:100% !important;
      }
      .hero-copy p{
        text-align:center !important;
        margin:20px auto 0 !important;
        font-size:17px !important;
        line-height:1.6 !important;
        max-width:440px !important;
        padding:0 8px !important;
      }
      .hero-actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        max-width:360px !important;
        gap:14px !important;
        margin:28px auto 0 !important;
      }
      .hero-actions .btn,
      .hero-actions .btn-hero-pink,
      .hero-actions .btn-hero-dark{
        width:100% !important;
        min-height:52px !important;
        padding:0 24px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        font-size:15px !important;
        font-weight:700 !important;
        box-sizing:border-box !important;
      }
      .hero-actions .btn .btn-label-swap{
        display:inline-grid !important;
        text-align:center !important;
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
      }
      .hero-actions .btn .btn-arrow{
        display:inline-block !important;
        flex:0 0 auto !important;
        margin-left:0 !important;
      }
      .hero-proof{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:center !important;
        align-items:center !important;
        text-align:center !important;
        gap:12px !important;
        margin:24px auto 0 !important;
        font-size:13px !important;
        white-space:nowrap !important;
      }
      .section-head,
      .journey-head{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        gap:20px !important;
        margin-bottom:40px !important;
      }
      .section-head > div,
      .journey-head > div{
        text-align:center !important;
        margin-inline:auto !important;
      }
      .section-head .eyebrow,
      .journey-head .eyebrow{
        text-align:center !important;
        margin-inline:auto !important;
        margin-bottom:14px !important;
      }
      .section-head h2,
      .journey-head h2{
        text-align:center !important;
        margin-inline:auto !important;
        font-size:clamp(36px, 10vw, 48px) !important;
        line-height:1.08 !important;
        letter-spacing:-0.03em !important;
        font-weight:700 !important;
      }
      .section-head p,
      .journey-head p{
        text-align:center !important;
        margin-inline:auto !important;
        max-width:580px !important;
        font-size:17px !important;
        line-height:1.6 !important;
      }
      .timeline-copy{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        text-align:center !important;
        margin:0 auto 36px !important;
        width:100% !important;
      }
      .timeline-copy .eyebrow{
        text-align:center !important;
        margin:0 auto 14px !important;
      }
      .timeline-copy h2{
        text-align:center !important;
        margin:0 auto !important;
        font-size:clamp(36px, 10vw, 48px) !important;
        line-height:1.08 !important;
        letter-spacing:-0.03em !important;
        font-weight:700 !important;
      }
      .timeline-copy p{
        text-align:center !important;
        margin:18px auto 0 !important;
        max-width:580px !important;
        font-size:17px !important;
        line-height:1.6 !important;
      }
      .journey-rail{
        grid-template-columns:1fr !important;
      }
      .journey-step{
        min-height:auto !important;
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.11) !important;
      }
      .journey-step:last-child{
        border-bottom:0 !important;
      }
      .journey-step__inner{
        min-height:auto !important;
        padding:26px 20px !important;
        display:grid !important;
        grid-template-columns:auto 1fr !important;
        grid-template-rows:auto auto !important;
        column-gap:16px !important;
        row-gap:12px !important;
        align-items:center !important;
        transform:none !important;
      }
      .journey-step:nth-child(odd):hover .journey-step__inner,
      .journey-step:nth-child(even):hover .journey-step__inner{
        transform:none !important;
      }
      .journey-step .journey-icon{
        grid-column:1 / 2 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        flex-shrink:0 !important;
      }
      .journey-step strong{
        grid-column:2 / 3 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        min-height:auto !important;
        display:flex !important;
        align-items:center !important;
        font-size:clamp(19px, 5vw, 22px) !important;
        line-height:1.2 !important;
        color:#ffffff !important;
      }
      .journey-step p{
        grid-column:1 / -1 !important;
        grid-row:2 / 3 !important;
        margin:0 !important;
        font-size:15px !important;
        line-height:1.58 !important;
        color:rgba(255,255,255,.7) !important;
      }
      .cta-panel{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        text-align:center !important;
        padding:40px 24px !important;
        gap:32px !important;
      }
      .cta-copy{
        text-align:center !important;
        margin-inline:auto !important;
        width:100% !important;
      }
      .cta-copy .eyebrow{
        text-align:center !important;
        margin:0 auto 18px !important;
        color:#ff5805 !important;
      }
      .cta-copy h3{
        text-align:center !important;
        margin:0 auto !important;
        font-size:clamp(34px, 10vw, 46px) !important;
        line-height:1.05 !important;
        letter-spacing:-0.04em !important;
        font-weight:700 !important;
        color:#ffffff !important;
      }
      .cta-panel p{
        text-align:center !important;
        margin:20px auto 0 !important;
        max-width:580px !important;
        font-size:16px !important;
        line-height:1.65 !important;
        color:#c8bec1 !important;
      }
      .cta-actions{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        width:100% !important;
        max-width:360px !important;
        margin:0 auto !important;
        gap:14px !important;
      }
      .cta-actions .btn,
      .cta-actions .btn-pink,
      .cta-actions .btn-light{
        width:100% !important;
        min-height:52px !important;
        padding:0 24px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:10px !important;
        text-align:center !important;
        font-size:15px !important;
        font-weight:700 !important;
        box-sizing:border-box !important;
      }
      .cta-actions .btn .btn-label-swap{
        display:inline-grid !important;
        text-align:center !important;
        flex:0 0 auto !important;
        width:auto !important;
        margin:0 !important;
      }
      .cta-actions .btn .btn-arrow{
        display:inline-block !important;
        flex:0 0 auto !important;
        margin-left:0 !important;
      }
    }

    @media(max-width:700px){
      .container{width:min(calc(100% - 24px),var(--container))}
      .section{padding:74px 0}
      .hero-meta{grid-template-columns:1fr}
      .brand-marquee-bar{height:76px}
      .brand-marquee-item{padding:0 20px;gap:12px;font-size:26px}
      .brand-marquee-item::after{width:34px;flex-basis:34px;font-size:26px}
      .bento{grid-template-columns:1fr}
      .bento-card.large{grid-column:auto}
      .journey-rail{grid-template-columns:1fr}
      .journey-step{border-right:0}
      .buyer-panel{padding:30px}
      .buyer-panel ul{grid-template-columns:1fr}
      .cta-panel{padding:30px}
      .faq-section{padding-top:64px;padding-bottom:64px}
      .faq-section .faq-intro h2{font-size:clamp(34px,10vw,46px)}
      .faq-item h3 button{padding:21px 18px;grid-template-columns:minmax(0,1fr) 34px;gap:12px}
      .faq-toggle{width:34px;height:34px}
      .faq-item h3 button > span:first-child{font-size:16px}
      .faq-answer p{padding-left:18px;padding-right:54px;font-size:15px}
    }

/* ============================================================
   BRAND PAGE POST-HERO TYPOGRAPHY
   Matches the approved homepage section hierarchy.
   ============================================================ */
body.page-template-page-brand #main-content > .section .eyebrow,
body.page-template-page-brand #main-content > .section .mini-tag,
body.page-template-page-brand #main-content > .section .buyer-tab,
body.page-template-page-brand #main-content > .section .buyer-panel li,
body.page-template-page-brand #main-content > .section .timeline-step .step-label{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-style:normal;
  font-weight:700;
}

body.page-template-page-brand #main-content > .section .eyebrow{
  margin:0 0 18px;
  color:#5a4a50;
  font-size:12px;
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.page-template-page-brand #main-content > .section .eyebrow.eyebrow--soft,
body.page-template-page-brand #main-content > .section .journey .eyebrow,
body.page-template-page-brand #main-content > .section .register-side .eyebrow{
  color:#ff5805;
}
body.page-template-page-brand #main-content > .section .eyebrow.eyebrow--white-soft,
body.page-template-page-brand #main-content > .section .faq-copy .eyebrow{
  color:rgba(255,255,255,.82);
}

body.page-template-page-brand #main-content > .section .mini-tag{
  font-size:11px;
  line-height:1;
  letter-spacing:.09em;
  text-transform:uppercase;
  padding:7px 10px;
  border-radius:999px;
  background:#f0efeb;
  color:#141b2d;
  margin-bottom:24px;
}

body.page-template-page-brand #main-content > .section .buyer-tab,
body.page-template-page-brand #main-content > .section .buyer-panel li,
body.page-template-page-brand #main-content > .section .register-list span{
  font-size:14px;
  line-height:1.35;
  letter-spacing:0;
}

body.page-template-page-brand #main-content > .section h2,
body.page-template-page-brand #main-content > .section h3,
body.page-template-page-brand #main-content > .section .journey-step strong,
body.page-template-page-brand #main-content > .section .acc-btn{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-style:normal;
  color:#141b2d;
}
body.page-template-page-brand #main-content > .section h2{
  font-size:clamp(38px,3.7vw,56px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.03em;
}
body.page-template-page-brand #main-content > .section h2 span,
body.page-template-page-brand #main-content > .section h2 .accent{
  color:#ff5805;
}
body.page-template-page-brand #main-content > .section .bento-card h3,
body.page-template-page-brand #main-content > .section .proposition-card h3,
body.page-template-page-brand #main-content > .section .timeline-step h3{
  font-size:clamp(27px,2.15vw,33px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.025em;
}
body.page-template-page-brand #main-content > .section .buyer-panel h3,
body.page-template-page-brand #main-content > .section .register-side h3{
  font-size:clamp(32px,3vw,42px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.03em;
}
body.page-template-page-brand #main-content > .section .journey-step strong{
  font-size:clamp(21px,1.7vw,24px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}
body.page-template-page-brand #main-content > .section .acc-btn{
  font-size:clamp(16px,1.15vw,18px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.01em;
}

body.page-template-page-brand #main-content > .section .section-head > p,
body.page-template-page-brand #main-content > .section .timeline-copy > p,
body.page-template-page-brand #main-content > .section .proposition-sticky > p,
body.page-template-page-brand #main-content > .section .journey-head > p,
body.page-template-page-brand #main-content > .section .faq-copy > div > p,
body.page-template-page-brand #main-content > .section .register-copy > p{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  font-weight:400;
  line-height:1.65;
  letter-spacing:0;
  color:#5a4a50;
}
body.page-template-page-brand #main-content > .section .bento-card p,
body.page-template-page-brand #main-content > .section .proposition-card p,
body.page-template-page-brand #main-content > .section .timeline-step p,
body.page-template-page-brand #main-content > .section .journey-step p,
body.page-template-page-brand #main-content > .section .acc-panel p{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.58;
}
body.page-template-page-brand #main-content > .section .buyer-panel > p,
body.page-template-page-brand #main-content > .section .register-side > div > p{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
}

/* Dark and coloured surfaces keep the homepage light-text treatment. */
body.page-template-page-brand #main-content > .section .journey h2,
body.page-template-page-brand #main-content > .section .journey-step strong,
body.page-template-page-brand #main-content > .section .cta-copy h3{
  color:#ffffff !important;
}
body.page-template-page-brand #main-content > .section .cta-copy .eyebrow{
  color:#ff5805 !important;
}
body.page-template-page-brand #main-content > .section .cta-copy h3 span{
  color:#ff5805 !important;
}
body.page-template-page-brand #main-content > .section .journey-head > p,
body.page-template-page-brand #main-content > .section .journey-step p{
  color:rgba(255,255,255,.74);
}
body.page-template-page-brand #main-content > .section .cta-panel p{
  color:#c8bec1 !important;
}

@media(max-width:700px){
  body.page-template-page-brand #main-content > .section h2,
  body.page-template-page-brand #main-content > .section .cta-copy h3{
    font-size:clamp(34px,10vw,46px);
  }
  body.page-template-page-brand #main-content > .section .buyer-panel h3{
    font-size:clamp(28px,8vw,38px);
  }
}

body.page-template-page-brand .site-header,
body.page-template-page-brand .site-header:not(.is-scrolled),
body.brand .site-header,
body.brand .site-header:not(.is-scrolled) {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 0 !important;
}