/* ConnectWholesale — Wholesale page styles
   Extracted from the approved wholesale 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:#4867d8;
      --cw-orange:#ff5805;
      --cw-dark:#141b2d;
      --soft-blue:#eaf0ff;
      --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-wholesale #main-content,
    body.wholesale #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-wholesale #main-content::before,
    body.wholesale #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-wholesale #main-content > *,
    body.wholesale #main-content > *{
      position:relative;
      z-index:1;
    }
    body.page-template-page-wholesale #main-content > .section,
    body.wholesale #main-content > .section{
      isolation:auto;
      border-top:0 !important;
      border-bottom:0 !important;
      background-color:transparent;
      background-image:none;
    }
    body.page-template-page-wholesale #main-content > .section::before,
    body.wholesale #main-content > .section::before{
      content:none;
      display:none;
    }
    body.page-template-page-wholesale #main-content > .section > .container,
    body.wholesale #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.2vw,108px);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-blue{background:var(--blue);color:#fff}
    .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-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}

    .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;
    }


    /* HERO — sourcing console */
    .hero{
      margin-top:-98px;
      padding:136px 0 88px;
      position:relative;
      overflow:hidden;
      background-color:#f6f5f1;
      background-image:var(--cw-wholesale-hero-background, url("../images/wholesale-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/brand 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}

    .sourcing-console{
      background:transparent;
      border:none;
      border-radius:0;
      box-shadow:none;
      overflow:visible;
    }
    .sourcing-console:hover{
      transform:none;
      box-shadow:none;
    }
    .console-body{
      padding:0;
    }
    .hero-card-grid,
    .result-list{
      position:relative;
      display:grid;
      grid-template-columns:repeat(2, 1fr);
      gap:16px;
      max-width:540px;
      margin-left:auto;
    }
    .hero-card,
    .result-row{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      padding:22px 20px;
      border-radius:22px;
      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(12,4,7,0.08), 0 2px 6px rgba(12,4,7,0.03);
      transition:background-color .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease);
      z-index:2;
    }
    .hero-card:hover,
    .result-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;
    }

    @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);
      }
    }

    .card-icon,
    .result-icon{
      width:44px;
      height:44px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:#141b2d;
      border:1px solid #141b2d;
      color:#ffffff;
      margin-bottom:14px;
      transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
      flex-shrink:0;
    }
    .card-icon svg,
    .result-icon svg{
      width:20px;
      height:20px;
      stroke:#ffffff;
      display:block;
      transition:stroke .25s var(--ease), transform .25s var(--ease);
    }
    .hero-card:hover .card-icon,
    .result-row:hover .result-icon{
      background:#ff5805;
      border-color:#ff5805;
      color:#ffffff;
      transform:scale(1.06);
    }
    .hero-card:hover .card-icon svg,
    .result-row:hover .result-icon svg{
      stroke:#ffffff;
      transform:scale(1.08);
    }
    .hero-card strong,
    .result-row strong,
    .card-content strong{
      display:block;
      font-size:15px;
      font-weight:700;
      color:var(--ink);
      margin-bottom:6px;
      line-height:1.28;
    }
    .hero-card small,
    .result-row small,
    .card-content small{
      display:block;
      color:var(--muted);
      font-size:12.5px;
      line-height:1.48;
    }

    /* ============================================================
       WHOLESALE OUTCOME MARQUEE BAR (MATCHED TO HOME HERO RULES)
       ============================================================ */
    .wholesale-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;
    }
    .wholesale-marquee-track {
      display: flex;
      width: max-content;
      animation: wholesaleMarqueeScroll 116s linear infinite;
      will-change: transform;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      align-items: center;
    }
    .wholesale-marquee-group {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
    }
    .wholesale-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;
    }
    .wholesale-marquee-item--orange {
      color: var(--cw-marquee-color-orange, #ff5805);
    }
    .wholesale-marquee-item--white {
      color: var(--cw-marquee-color-white, #ffffff);
    }
    .wholesale-marquee-item:hover {
      opacity: 0.88;
    }
    .wholesale-marquee-item .marquee-chevron {
      display: none;
    }
    .wholesale-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;
    }
    .wholesale-marquee-item--orange::after {
      color: var(--cw-marquee-glyph-orange, #ffffff);
    }
    .wholesale-marquee-item--white::after {
      color: var(--cw-marquee-glyph-white, #ff5805);
    }
    .wholesale-marquee-item:nth-child(1)::after { content: "⇄"; }
    .wholesale-marquee-item:nth-child(2)::after { content: "✦"; }
    .wholesale-marquee-item:nth-child(3)::after { content: "◎"; }
    .wholesale-marquee-item:nth-child(4)::after { content: "↗"; }
    .wholesale-marquee-item:nth-child(5)::after { content: "+"; }
    .wholesale-marquee-item:nth-child(6)::after { content: "◆"; }

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

    /* SECTION 1 — sourcing problems */
    .pain-grid{
      display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:stretch;
    }
    .pain-intro{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      border-radius:30px;
      padding:56px;
      min-height:540px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      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 14px 36px rgba(20,27,45,0.22);
    }
    .pain-intro::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(--pain-grid-x,-9999px) var(--pain-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--pain-grid-x,-9999px) var(--pain-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .pain-intro:hover::before{
      opacity:1;
    }
    .pain-intro > *{
      position:relative;
      z-index:1;
    }
    .pain-intro p{color:#c5ccdb;max-width:650px;margin-top:24px}
    .pain-quote{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:clamp(40px,4.2vw,64px);
      letter-spacing:.01em;
      line-height:.96;
      color:rgba(255,255,255,0.08);
      user-select:none;
      pointer-events:none;
      margin-top:36px;
    }
    .pain-stack{display:grid;gap:16px}
    .pain-card{
      background:#fff;
      border:1px solid var(--line);
      border-left:4px solid transparent;
      border-radius:22px;
      padding:28px;
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .pain-card:hover,
    .pain-card.is-in-view{
      transform:none !important;
      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;
    }
    .pain-card span{
      display:inline-flex;
      width:42px;
      height:42px;
      border-radius:13px;
      align-items:center;
      justify-content:center;
      background:#f0efeb;
      color:#141b2d;
      font-size:14px;
      font-weight:800;
      margin-bottom:22px;
      border:1px solid transparent;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    }
    .pain-card:hover span,
    .pain-card.is-in-view span{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }
    .pain-card h3{
      font-size:26px;
      margin-bottom:10px;
      color:#141b2d;
      transition:color .3s var(--ease);
    }
    .pain-card:hover h3,
    .pain-card.is-in-view h3{
      color:#141b2d !important;
    }
    .pain-card p{font-size:15px}

    /* SECTION 2 — buyer types */
    .buyer-type-head{
      display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:end;margin-bottom:48px;
    }
    .buyer-type-head p{max-width:650px}
    .buyer-cards{
      display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    }
    .buyer-card{
      position:relative;
      display:flex;
      flex-direction:column;
      background:#fff;
      border:1px solid var(--line);
      border-left:4px solid transparent;
      border-radius:24px;
      padding:28px 24px;
      min-height:330px;
      overflow:hidden;
      box-shadow:0 6px 20px rgba(20,27,45,0.04);
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .buyer-card:hover,
    .buyer-card.is-in-view{
      transform:none !important;
      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-card .num{
      display:inline-flex;
      width:42px;
      height:42px;
      border-radius:13px;
      align-items:center;
      justify-content:center;
      background:#f0efeb;
      color:#141b2d;
      font-family:"Bricolage Grotesque","Inter",sans-serif;
      font-size:14px;
      font-weight:800;
      letter-spacing:.02em;
      margin-bottom:20px;
      border:1px solid transparent;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
      flex-shrink:0;
    }
    .buyer-card:hover .num,
    .buyer-card.is-in-view .num{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }
    .buyer-card h3{
      font-size:24px;
      margin-bottom:10px;
      color:#141b2d;
      line-height:1.15;
      transition:color .3s var(--ease);
    }
    .buyer-card:hover h3,
    .buyer-card.is-in-view h3{
      color:#141b2d !important;
    }
    .buyer-card p{
      font-size:14px;
      line-height:1.52;
      color:var(--muted);
      margin:0 0 20px;
      flex-grow:1;
      min-height:4.6em;
    }
    .buyer-card small{
      display:inline-flex;
      width:max-content;
      margin-top:auto;
      padding:6px 12px;
      border-radius:999px;
      background:#f0efeb;
      font-size:11px;
      font-weight:700;
      color:#141b2d;
      text-transform:uppercase;
      letter-spacing:.08em;
      border:1px solid transparent;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    }
    .buyer-card:hover small{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }

    /* SECTION 3 — sourcing brief builder */
    .brief-shell{
      background:#fff;border:1px solid var(--line);border-radius:30px;overflow:hidden;
      display:grid;grid-template-columns:.8fr 1.2fr;
    }
    .brief-copy{
      background:linear-gradient(160deg,#4d6ddb,#263f8f);color:#fff;padding:54px;
    }
    .brief-copy p{color:#dde4ff;margin-top:22px}
    .brief-copy .eyebrow{color:#cbd5ff}
    .brief-form{padding:38px}
    .brief-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{
      padding:18px;border:1px solid #e0e1dc;border-radius:16px;background:#fafaf7;
    }
    .field label{
      display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#8a8e96;margin-bottom:7px;
    }
    .field strong{font-size:15px}
    .field.full{grid-column:1 / -1}
    .brief-note{
      margin-top:16px;padding:16px;border-radius:14px;background:#f0f2f8;color:#596173;font-size:13px;
    }

    /* ==========================================================================
       SECTION 4: WHAT MATTERS WHEN ASSESSING FIT - 3 BUYER PERSONA CARDS
       ========================================================================== */
    .decision-head{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:end;margin-bottom:40px;
    }
    .decision-head p{max-width:650px}

    .fit-persona-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:24px;
    }
    .fit-persona-card{
      background:#ffffff;
      border:1px solid var(--line);
      border-left:4px solid transparent;
      border-radius:24px;
      padding:32px 28px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
      box-shadow:0 4px 18px rgba(20,27,45,0.03);
    }
    .fit-persona-card:hover,
    .fit-persona-card.is-in-view{
      transform:none !important;
      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;
    }
    .fit-persona-header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      margin-bottom:18px;
    }
    .persona-badge{
      display:inline-flex;
      align-items:center;
      padding:6px 12px;
      border-radius:999px;
      background:#f0efeb;
      color:#141b2d;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.08em;
      border:1px solid transparent;
      transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
    }
    .fit-persona-card:hover .persona-badge,
    .fit-persona-card.is-in-view .persona-badge{
      background:#141b2d !important;
      color:#ffffff !important;
      border:1px solid #141b2d;
    }
    .persona-num{
      font-family:"Bricolage Grotesque",sans-serif;
      font-size:22px;
      font-weight:800;
      color:#b5b9c4;
      line-height:1;
    }
    .persona-question{
      font-size:20px;
      line-height:1.32;
      color:#141b2d;
      margin-bottom:12px;
      font-weight:700;
      min-height:2.65em;
    }
    .persona-intro{
      font-size:14px;
      line-height:1.55;
      color:#596173;
      margin-bottom:22px;
      min-height:3.1em;
    }
    .persona-priorities{
      position:relative;
      overflow:hidden;
      isolation:isolate;
      background-color:#141b2d;
      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,28px) var(--page-grid-size,28px);
      background-position:center top;
      border:1px solid rgba(255,255,255,0.08);
      border-radius:18px;
      padding:20px 18px;
      margin-bottom:22px;
      box-shadow:0 8px 24px rgba(20,27,45,0.12);
    }
    .persona-priorities::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,.14)) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(255,88,5,var(--page-grid-hover-opacity,.14)) 1px,transparent 1px);
      background-size:var(--page-grid-size,28px) var(--page-grid-size,28px);
      background-position:center top;
      opacity:0;
      mask-image:radial-gradient(circle var(--page-grid-hover-radius,180px) at var(--priority-grid-x,-9999px) var(--priority-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,180px) at var(--priority-grid-x,-9999px) var(--priority-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .persona-priorities:hover::before,
    .fit-persona-card:hover .persona-priorities::before{
      opacity:1;
    }
    .persona-priorities > *{
      position:relative;
      z-index:1;
    }
    .priority-label{
      font-size:11px;
      font-weight:800;
      text-transform:uppercase;
      letter-spacing:.08em;
      color:rgba(255,255,255,0.65);
      margin-bottom:14px;
    }
    .priority-list{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction:column;
      gap:14px;
    }
    .priority-list li{
      display:grid;
      grid-template-columns:20px 1fr;
      gap:12px;
      align-items:start;
      font-size:13px;
      line-height:1.45;
    }
    .priority-icon{
      width:20px;
      height:20px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-top:1px;
      flex-shrink:0;
      color:#ff5805;
      background:transparent;
    }
    .priority-icon svg{
      width:17px;
      height:17px;
      stroke:#ff5805;
      display:block;
    }
    .priority-list strong{
      display:block;
      color:#ff5805;
      font-size:13.5px;
      font-weight:700;
      margin-bottom:2px;
    }
    .priority-list span{
      display:block;
      color:rgba(255,255,255,0.82);
      font-size:12.5px;
    }
    .persona-verified-tags{
      padding-top:16px;
      border-top:1px solid var(--line);
    }
    .verified-title{
      display:block;
      font-size:11px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.07em;
      color:#8a8e96;
      margin-bottom:10px;
    }
    .tag-cloud{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
    }
    .tag-cloud span{
      padding:5px 10px;
      border-radius:8px;
      background:#f1f2f6;
      font-size:11.5px;
      font-weight:600;
      color:#141b2d;
      border:1px solid rgba(20,27,45,0.06);
    }
    .fit-persona-slider-wrap{
      position:relative;
      width:100%;
    }
    .fit-persona-controls{
      display:none;
    }

    /* SECTION 5 — process timeline */
    .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;
    }

    /* SECTION 6 — CONFIDENCE RAIL (Matches Home / Why ConnectWholesale & Brand journey properties) */
    .confidence{
      --confidence-grid-x:-9999px;
      --confidence-grid-y:-9999px;
      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);
    }
    .confidence::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(--confidence-grid-x,-9999px) var(--confidence-grid-y,-9999px),#000 0%,transparent 100%);
      -webkit-mask-image:radial-gradient(circle var(--page-grid-hover-radius,220px) at var(--confidence-grid-x,-9999px) var(--confidence-grid-y,-9999px),#000 0%,transparent 100%);
      transition:opacity .2s ease;
    }
    .confidence:hover::before{opacity:1}
    .confidence > *{
      position:relative;
      z-index:1;
    }
    .confidence-top{
      padding:60px 60px 32px;
      display:grid;
      grid-template-columns:1fr .9fr;
      gap:60px;
      align-items:end;
    }
    .confidence-top .eyebrow{color:#ff5805}
    .confidence-top h2{
      max-width:650px;
      font-size:clamp(38px,3.7vw,56px);
      font-weight:700;
      color:#ffffff;
    }
    .confidence-top h2 span{color:#ff5805}
    .confidence-top p{
      max-width:610px;
      color:rgba(255,255,255,.72);
      font-size:17px;
      line-height:1.65;
    }
    .confidence-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      border-top:1px solid rgba(255,255,255,.11);
    }
    .confidence-card{
      position:relative;
      min-height:270px;
      padding:0;
      overflow:hidden;
      border-right:1px solid rgba(255,255,255,.11);
      transition:background-color .3s var(--ease);
    }
    .confidence-card:hover,
    .confidence-card.is-in-view{background-color:rgba(255,255,255,.025)}
    .confidence-card:last-child{border-right:0}
    .confidence-card__inner{
      position:relative;
      z-index:1;
      height:100%;
      min-height:270px;
      padding:34px;
      transition:transform .35s var(--ease);
      transform-origin:center;
    }
    .confidence-card:nth-child(odd):hover .confidence-card__inner{transform:translateY(-3px) rotate(-.55deg)}
    .confidence-card:nth-child(even):hover .confidence-card__inner{transform:translateY(-3px) rotate(.55deg)}
    .confidence-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);
    }
    .confidence-card:hover .confidence-icon,
    .confidence-card.is-in-view .confidence-icon{
      background:#ff5805;
      color:#ffffff;
      transform:scale(1.04);
    }
    .confidence-card 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;
    }
    .confidence-card p{
      color:rgba(255,255,255,.66);
      font-size:15px;
      line-height:1.58;
    }
    .confidence-pills{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:20px;
    }
    .confidence-pills span{
      display:inline-flex;
      align-items:center;
      padding:6px 12px;
      border-radius:999px;
      background:rgba(255,255,255,0.07);
      border:1px solid rgba(255,255,255,0.12);
      color:rgba(255,255,255,0.85);
      font-family:"Satoshi","Inter",sans-serif;
      font-size:11px;
      font-weight:700;
      letter-spacing:.05em;
      line-height:1;
      text-transform:uppercase;
      transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
    }
    .confidence-card:hover .confidence-pills span,
    .confidence-card.is-in-view .confidence-pills span{
      background:rgba(255,88,5,0.14);
      border-color:rgba(255,88,5,0.35);
      color:#ffffff;
    }

    /* SECTION 7: QUESTIONS AND ANSWERS (Exact match with Home & Brand 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)}

    /* SECTION 8 — CTA (Exact match with Home & Brand CTA) */
    .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);
    }

    footer{
      margin-top:44px;background:var(--navy);color:#fff;border-radius:30px 30px 0 0;padding:56px 0 28px;
    }

    .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-card-grid,
      .result-list{
        margin-left:0;
        max-width:100%;
      }
      .hero-grid,.pain-grid,.brief-shell,.timeline-wrap,.confidence-top,.cta-panel{grid-template-columns:1fr}
      .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{gap:40px}
      .buyer-type-head,.decision-head{grid-template-columns:1fr}
      .buyer-cards{grid-template-columns:1fr 1fr}
      .fit-persona-grid{grid-template-columns:1fr}
      .timeline-copy{position:static}
      .confidence-grid{grid-template-columns:1fr}
      .confidence-card{border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}
      .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;
      }
      .sourcing-console{
        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;
      }
      .pain-card{
        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;
        padding:22px 20px !important;
      }
      .pain-card span{
        grid-column:1 / 2 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        flex-shrink:0 !important;
      }
      .pain-card h3{
        grid-column:2 / 3 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        font-size:clamp(19px, 4.8vw, 22px) !important;
        line-height:1.22 !important;
        letter-spacing:-0.02em !important;
      }
      .pain-card p{
        grid-column:1 / -1 !important;
        grid-row:2 / 3 !important;
        margin-top:2px !important;
        font-size:15px !important;
        line-height:1.58 !important;
      }
      .buyer-card{
        display:grid !important;
        grid-template-columns:auto 1fr !important;
        grid-template-rows:auto auto auto !important;
        column-gap:16px !important;
        row-gap:12px !important;
        align-items:center !important;
        padding:22px 20px !important;
        min-height:auto !important;
      }
      .buyer-card .num{
        grid-column:1 / 2 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        flex-shrink:0 !important;
      }
      .buyer-card h3{
        grid-column:2 / 3 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        font-size:clamp(20px, 5vw, 24px) !important;
        line-height:1.2 !important;
        letter-spacing:-0.02em !important;
      }
      .buyer-card p{
        grid-column:1 / -1 !important;
        grid-row:2 / 3 !important;
        margin:2px 0 0 !important;
        min-height:auto !important;
        font-size:15px !important;
        line-height:1.58 !important;
      }
      .buyer-card small{
        grid-column:1 / -1 !important;
        grid-row:3 / 4 !important;
        margin-top:6px !important;
        width:fit-content !important;
      }
      .buyer-type-head,
      .decision-head,
      .confidence-top,
      body.page-template-page-wholesale #main-content > .section .buyer-type-head,
      body.page-template-page-wholesale #main-content > .section .decision-head,
      body.page-template-page-wholesale #main-content > .section .confidence-top{
        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;
        width:100% !important;
      }
      .buyer-type-head > div,
      .decision-head > div,
      .confidence-top > div,
      body.page-template-page-wholesale #main-content > .section .buyer-type-head > div,
      body.page-template-page-wholesale #main-content > .section .decision-head > div,
      body.page-template-page-wholesale #main-content > .section .confidence-top > div{
        text-align:center !important;
        margin-inline:auto !important;
        width:100% !important;
      }
      .buyer-type-head .eyebrow,
      .decision-head .eyebrow,
      .confidence-top .eyebrow,
      body.page-template-page-wholesale #main-content > .section .buyer-type-head .eyebrow,
      body.page-template-page-wholesale #main-content > .section .decision-head .eyebrow,
      body.page-template-page-wholesale #main-content > .section .confidence-top .eyebrow{
        text-align:center !important;
        margin-inline:auto !important;
        margin-bottom:14px !important;
      }
      .buyer-type-head h2,
      .decision-head h2,
      .confidence-top h2,
      body.page-template-page-wholesale #main-content > .section .buyer-type-head h2,
      body.page-template-page-wholesale #main-content > .section .decision-head h2,
      body.page-template-page-wholesale #main-content > .section .confidence-top 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;
        max-width:100% !important;
      }
      .buyer-type-head p,
      .decision-head p,
      .confidence-top p,
      body.page-template-page-wholesale #main-content > .section .buyer-type-head > p,
      body.page-template-page-wholesale #main-content > .section .decision-head > p,
      body.page-template-page-wholesale #main-content > .section .confidence-top > 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;
      }
      .fit-persona-slider-wrap{
        width:100% !important;
        position:relative !important;
      }
      .fit-persona-grid{
        display:block !important;
        width:100% !important;
      }
      .fit-persona-card{
        display:none !important;
        width:100% !important;
        padding:24px 20px !important;
      }
      .fit-persona-card.is-active{
        display:flex !important;
        animation:personaSlideFade .32s cubic-bezier(.2,.7,.2,1) !important;
      }
      @keyframes personaSlideFade{
        from{opacity:0;transform:translateY(10px)}
        to{opacity:1;transform:translateY(0)}
      }
      .fit-persona-controls{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        margin:0 0 16px auto !important;
        width:100% !important;
      }
      .persona-dots{
        display:inline-flex !important;
        align-items:center !important;
        gap:3px !important;
        background:#f0efeb !important;
        padding:4px 5px !important;
        border-radius:999px !important;
        border:1px solid #e2e1dc !important;
        box-shadow:0 2px 8px rgba(20,27,45,0.04) !important;
      }
      .persona-dot{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:34px !important;
        height:34px !important;
        padding:0 !important;
        border-radius:50% !important;
        border:none !important;
        background:transparent !important;
        color:#5a4a50 !important;
        font-family:"Bricolage Grotesque",sans-serif !important;
        font-size:13.5px !important;
        font-weight:800 !important;
        cursor:pointer !important;
        transition:background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease) !important;
        -webkit-tap-highlight-color:transparent !important;
      }
      .persona-dot.is-active{
        background:#ff5805 !important;
        color:#ffffff !important;
        box-shadow:0 4px 12px rgba(255,88,5,0.35) !important;
      }
      .confidence-grid{
        grid-template-columns:1fr !important;
      }
      .confidence-card{
        min-height:auto !important;
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,.11) !important;
      }
      .confidence-card:last-child{
        border-bottom:0 !important;
      }
      .confidence-card__inner{
        min-height:auto !important;
        padding:26px 20px !important;
        display:grid !important;
        grid-template-columns:auto 1fr !important;
        grid-template-rows:auto auto auto !important;
        column-gap:16px !important;
        row-gap:12px !important;
        align-items:center !important;
        transform:none !important;
      }
      .confidence-card:nth-child(odd):hover .confidence-card__inner,
      .confidence-card:nth-child(even):hover .confidence-card__inner{
        transform:none !important;
      }
      .confidence-card .confidence-icon{
        grid-column:1 / 2 !important;
        grid-row:1 / 2 !important;
        margin-bottom:0 !important;
        flex-shrink:0 !important;
      }
      .confidence-card 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;
      }
      .confidence-card .confidence-br-desktop{
        display:none !important;
      }
      .confidence-card 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;
      }
      .confidence-pills{
        grid-column:1 / -1 !important;
        grid-row:3 / 4 !important;
        margin-top:6px !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:760px){
      .container{width:min(calc(100% - 24px),var(--container))}
      .section{padding:74px 0}
      .wholesale-marquee-bar{height:76px}
      .wholesale-marquee-item{padding:0 20px;gap:12px;font-size:26px}
      .wholesale-marquee-item::after{width:34px;flex-basis:34px;font-size:26px}
      .buyer-cards{grid-template-columns:1fr}
      .brief-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
      .fit-persona-card{padding:24px 20px}
      .pain-intro,.brief-copy,.brief-form,.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}
      .confidence-top{padding:38px 26px 24px}
    }

    @media(max-width:580px){
      .hero-card-grid,
      .result-list{
        grid-template-columns:1fr;
      }
    }

.acc-item.open .acc-panel { max-height: 220px; }

/* ============================================================
   WHOLESALE PAGE POST-HERO TYPOGRAPHY
   Matches the approved homepage and Brand page hierarchy.
   ============================================================ */
body.page-template-page-wholesale #main-content > .section .eyebrow,
body.page-template-page-wholesale #main-content > .section .pain-card span,
body.page-template-page-wholesale #main-content > .section .buyer-card small,
body.page-template-page-wholesale #main-content > .section .field label,
body.page-template-page-wholesale #main-content > .section .timeline-step .step-label,
body.page-template-page-wholesale #main-content > .section .cta-note{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-style:normal;
  font-weight:700;
}

body.page-template-page-wholesale #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-wholesale #main-content > .section .pain-intro .eyebrow,
body.page-template-page-wholesale #main-content > .section .confidence .eyebrow{
  color:#ff5805;
}
body.page-template-page-wholesale #main-content > .section .brief-copy .eyebrow{
  color:rgba(255,255,255,.84);
}

body.page-template-page-wholesale #main-content > .section h2,
body.page-template-page-wholesale #main-content > .section h3,
body.page-template-page-wholesale #main-content > .section .pain-quote,
body.page-template-page-wholesale #main-content > .section .confidence-card strong,
body.page-template-page-wholesale #main-content > .section .acc-btn,
body.page-template-page-wholesale #main-content > .section .cta-side .big{
  font-family:"Bricolage Grotesque","Inter",sans-serif;
  font-style:normal;
}
body.page-template-page-wholesale #main-content > .section h2{
  color:#141b2d;
  font-size:clamp(38px,3.7vw,56px);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.03em;
}
body.page-template-page-wholesale #main-content > .section h2 span,
body.page-template-page-wholesale #main-content > .section h2 .accent{
  color:#ff5805;
}
body.page-template-page-wholesale #main-content > .section h3{
  color:#141b2d;
  font-size:clamp(22px,1.8vw,27px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.025em;
}
body.page-template-page-wholesale #main-content > .section .pain-quote{
  font-size:clamp(40px,4.2vw,64px);
  font-weight:700;
  line-height:.96;
  letter-spacing:.01em;
  color:rgba(255,255,255,0.08);
  user-select:none;
  pointer-events:none;
}
body.page-template-page-wholesale #main-content > .section .confidence-card strong{
  font-size:clamp(21px,1.7vw,24px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
}
body.page-template-page-wholesale #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-wholesale #main-content > .section .pain-intro h2,
body.page-template-page-wholesale #main-content > .section .brief-copy h2,
body.page-template-page-wholesale #main-content > .section .confidence h2{
  color:#ffffff;
}

body.page-template-page-wholesale #main-content > .section .pain-intro > div > p,
body.page-template-page-wholesale #main-content > .section .buyer-type-head > p,
body.page-template-page-wholesale #main-content > .section .brief-copy > p,
body.page-template-page-wholesale #main-content > .section .decision-head > p,
body.page-template-page-wholesale #main-content > .section .timeline-copy > p,
body.page-template-page-wholesale #main-content > .section .confidence-top > p,
body.page-template-page-wholesale #main-content > .section .cta-main > 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-wholesale #main-content > .section .pain-card p,
body.page-template-page-wholesale #main-content > .section .buyer-card p,
body.page-template-page-wholesale #main-content > .section .timeline-step p,
body.page-template-page-wholesale #main-content > .section .confidence-card p,
body.page-template-page-wholesale #main-content > .section .acc-panel p{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  font-weight:400;
  line-height:1.58;
  letter-spacing:0;
}
body.page-template-page-wholesale #main-content > .section .cta-side p{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.65;
}

body.page-template-page-wholesale #main-content > .section .pain-intro > div > p,
body.page-template-page-wholesale #main-content > .section .brief-copy > p,
body.page-template-page-wholesale #main-content > .section .confidence-top > p{
  color:rgba(255,255,255,.76);
}

body.page-template-page-wholesale #main-content > .section .buyer-card small{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#ff5805;
}
body.page-template-page-wholesale #main-content > .section .field label{
  font-size:11px;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.page-template-page-wholesale #main-content > .section .field strong{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.4;
  color:#0c0407;
}
body.page-template-page-wholesale #main-content > .section .brief-note,
body.page-template-page-wholesale #main-content > .section .cta-note{
  font-family:"Satoshi","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.55;
}

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

@media(max-width:760px){
  body.page-template-page-wholesale #main-content > .section h2,
  body.page-template-page-wholesale #main-content > .section .cta-copy h3{
    font-size:clamp(34px,10vw,46px);
  }
  body.page-template-page-wholesale #main-content > .section .pain-quote{
    font-size:clamp(32px,9vw,44px);
  }
}

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