/* ============================================================
   VENTRiQ — shared design system  (Faceted / V4-B)
   League Spartan headings · Poppins body · brand palette
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500&display=swap');

:root{
  --slate:#32646e; --vector:#722ca3; --teal:#5fabba; --indigo:#3769bf;
  --violet:#7b60db; --orange:#eb7d52; --coral:#c44e5f;
  --ink:#191a1f; --soft:#56595f; --paper:#ffffff; --cream:#eef1f3; --line:#e4e8ea;
  --maxw:1080px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Poppins',Arial,sans-serif;background:var(--paper);color:var(--ink);font-weight:300;
  line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4,.spartan{font-family:'League Spartan',sans-serif;line-height:1.0;letter-spacing:-0.012em;font-weight:700;text-wrap:balance}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;position:relative;z-index:3}
.narrow{max-width:760px;margin:0 auto}
.eyebrow{font-family:'League Spartan';text-transform:uppercase;letter-spacing:0.28em;font-size:11px;font-weight:600}

/* ---------- facets (decorative geometry) ---------- */
.facet{position:absolute;z-index:0;mix-blend-mode:multiply;opacity:.9;pointer-events:none}
.tri-tl{clip-path:polygon(0 0,100% 0,0 100%)}
.tri-tr{clip-path:polygon(0 0,100% 0,100% 100%)}
.tri-bl{clip-path:polygon(0 0,0 100%,100% 100%)}
.tri-br{clip-path:polygon(100% 0,100% 100%,0 100%)}
.bg-slate{background:var(--slate)}.bg-vector{background:var(--vector)}.bg-teal{background:var(--teal)}
.bg-indigo{background:var(--indigo)}.bg-violet{background:var(--violet)}.bg-orange{background:var(--orange)}.bg-coral{background:var(--coral)}

/* seven-colour facet divider */
.facetbar{display:flex;height:10px}
.facetbar i{flex:1}
.facetbar i:nth-child(1){background:var(--slate)}.facetbar i:nth-child(2){background:var(--teal)}
.facetbar i:nth-child(3){background:var(--indigo)}.facetbar i:nth-child(4){background:var(--violet)}
.facetbar i:nth-child(5){background:var(--vector)}.facetbar i:nth-child(6){background:var(--coral)}
.facetbar i:nth-child(7){background:var(--orange)}

/* ---------- buttons ---------- */
.btn{font-family:'League Spartan';font-weight:700;font-size:15px;letter-spacing:0.04em;padding:16px 40px;
  display:inline-block;transition:.25s;cursor:pointer;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.btn-dark{background:var(--ink);color:#fff}.btn-dark:hover{background:var(--vector)}
.btn-light{background:var(--cream);color:var(--ink)}.btn-light:hover{transform:translateY(-2px)}
.btn-line{border:2px solid currentColor;clip-path:none;border-radius:3px}.btn-line:hover{opacity:.7}
.btn:hover{transform:translateY(-2px)}

/* ---------- nav ---------- */
nav.site{position:sticky;top:0;z-index:60;background:rgba(231,234,238,0.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.brand-link img{height:30px;width:auto}
.nlinks{display:flex;gap:22px;font-size:13px;color:var(--soft);align-items:center;white-space:nowrap}
.nlinks a{transition:color .2s;position:relative;padding:4px 0}
.nlinks a:hover,.nlinks a.active{color:var(--vector)}
.nlinks a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--vector)}
.nlinks a.navcta{font-family:'League Spartan';font-weight:700;font-size:13px;letter-spacing:0.04em;padding:11px 22px;background:var(--ink);color:#fff;white-space:nowrap;
  border-radius:4px;transition:background .25s,transform .25s;margin-left:14px;line-height:1;box-shadow:0 8px 18px -10px rgba(25,26,31,.7)}
.nlinks a.navcta:hover{background:var(--vector);color:#fff;transform:translateY(-1px)}
.navtoggle{display:none;background:none;border:0;cursor:pointer;width:30px;height:24px;position:relative}
.navtoggle span{position:absolute;left:0;right:0;height:2px;background:var(--ink);transition:.3s}
.navtoggle span:nth-child(1){top:0}.navtoggle span:nth-child(2){top:11px}.navtoggle span:nth-child(3){top:22px}

/* nav collapses to a tidy menu earlier so laptop widths never cram */
@media(max-width:1080px){
  .nlinks{display:none;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:10px 24px 24px;white-space:normal}
  .nlinks.open{display:flex}
  .nlinks a{padding:14px 0;width:100%;border-bottom:1px solid var(--line)}
  .nlinks a.navcta{margin:14px 0 0;border-radius:4px;text-align:center;width:100%;box-shadow:none}
  .navtoggle{display:block}
}

/* ---------- page header (interior hero band) ---------- */
.pagehead{position:relative;overflow:hidden;color:#fff;padding:120px 0 90px}
.pagehead .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:50px;align-items:end}
.pagehead .eyebrow{color:rgba(255,255,255,.85)}
.pagehead h1{font-size:clamp(40px,5.4vw,76px);font-weight:800;max-width:14ch;margin-top:18px}
.pagehead .intro{font-size:17px;color:rgba(255,255,255,.92);font-weight:400;padding-bottom:8px}
.ph-coral{background:var(--coral)}.ph-purple{background:var(--vector)}.ph-violet{background:var(--violet)}
.ph-slate{background:var(--slate)}.ph-orange{background:var(--orange)}.ph-indigo{background:var(--indigo)}
.ph-teal{background:var(--teal)}.ph-tealblue{background:linear-gradient(140deg,var(--teal),var(--indigo))}
.ph-f{opacity:.9;mix-blend-mode:soft-light}

/* ---------- sections ---------- */
.band{padding:78px 0;position:relative;overflow:hidden}
.s-cream{background:var(--cream)}
.s-ink{background:var(--ink);color:#f1ece3}
.s-slate{background:var(--slate);color:#eaf3f4}
.s-coral{background:var(--coral);color:#fff}
.s-orange{background:var(--orange);color:#231a14}
.s-indigo{background:var(--indigo);color:#fff}
.s-teal{background:var(--teal);color:#0e2a30}
.s-vector{background:var(--vector);color:#fff}

.lab{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.lab.ctr{justify-content:center}
.lab .tk{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--vector)}
.h2{font-size:clamp(30px,4vw,54px);font-weight:800}
.lead{font-size:18px;color:var(--soft);max-width:58ch}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* ---------- reveal (progressive enhancement: hidden only when JS is active) ---------- */
.rv{transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
.js .rv{opacity:0;transform:translateY(24px)}
.js .rv.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.22s}.d3{transition-delay:.34s}.d4{transition-delay:.46s}.d5{transition-delay:.58s}.d6{transition-delay:.7s}

/* ---------- proof row ---------- */
.proof{text-align:center}
.proof .row{display:flex;justify-content:center;flex-wrap:wrap}
.proof .it{padding:0 42px;position:relative}
.proof .it+.it::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:1px;background:rgba(255,255,255,.16)}
.proof .n{font-family:'League Spartan';font-weight:800;font-size:54px;line-height:1}
.proof .it:nth-child(1) .n{color:var(--teal)}.proof .it:nth-child(2) .n{color:var(--violet)}
.proof .it:nth-child(3) .n{color:var(--orange)}.proof .it:nth-child(4) .n{color:var(--coral)}
.proof .l{font-size:12.5px;color:#9a9da3;margin-top:10px}

/* ---------- cards / pillars ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{position:relative;background:#fff;border:1px solid var(--line);padding:32px 32px;overflow:hidden;transition:.3s}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(40,40,60,.4)}
.card .corner{position:absolute;right:0;top:0;width:70px;height:70px;clip-path:polygon(100% 0,100% 100%,0 0)}
.card .pn{font-family:'League Spartan';font-weight:700;font-size:12px;letter-spacing:0.2em;text-transform:uppercase}
.card h3{font-size:24px;margin:14px 0 12px}
.card p{font-size:15px;color:var(--soft)}
.c-slate .corner{background:var(--slate)}.c-slate .pn{color:var(--slate)}
.c-indigo .corner{background:var(--indigo)}.c-indigo .pn{color:var(--indigo)}
.c-vector .corner{background:var(--vector)}.c-vector .pn{color:var(--vector)}
.c-coral .corner{background:var(--coral)}.c-coral .pn{color:var(--coral)}
.c-teal .corner{background:var(--teal)}.c-teal .pn{color:var(--teal)}
.c-orange .corner{background:var(--orange)}.c-orange .pn{color:var(--orange)}

/* ---------- chips ---------- */
.qline{display:flex;gap:13px;flex-wrap:wrap}
.qline.ctr{justify-content:center}
.qchip{font-family:'League Spartan';font-weight:700;font-size:16px;padding:13px 26px;color:#fff;transition:.25s;
  clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
.qchip:nth-child(1){background:var(--slate)}.qchip:nth-child(2){background:var(--indigo)}
.qchip:nth-child(3){background:var(--violet)}.qchip:nth-child(4){background:var(--vector)}
.qchip:nth-child(5){background:var(--coral)}
.qchip:hover{transform:translateY(-3px)}

/* ---------- arrowed list (six operational areas etc.) ---------- */
.arrowlist{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px}
.arrowlist .ai{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.6}
.arrowlist .ai .ar{flex:0 0 14px;margin-top:0;font-size:16px;line-height:1.6;color:var(--vector);font-weight:800;font-family:'League Spartan'}
.arrowlist .ai:nth-child(7n+1) .ar{color:var(--orange)}.arrowlist .ai:nth-child(7n+2) .ar{color:var(--slate)}
.arrowlist .ai:nth-child(7n+3) .ar{color:var(--indigo)}.arrowlist .ai:nth-child(7n+4) .ar{color:var(--vector)}
.arrowlist .ai:nth-child(7n+5) .ar{color:var(--coral)}.arrowlist .ai:nth-child(7n+6) .ar{color:var(--violet)}

/* ---------- numbered steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps .st{padding:30px 26px 34px;border-left:1px solid var(--line);position:relative}
.steps .st:first-child{border-left:none;padding-left:0}
.steps .st .num{font-family:'League Spartan';font-weight:800;font-size:70px;line-height:.8;color:var(--teal);opacity:.9}
.steps .st:nth-child(1) .num{color:var(--slate)}.steps .st:nth-child(2) .num{color:var(--indigo)}
.steps .st:nth-child(3) .num{color:var(--vector)}.steps .st:nth-child(4) .num{color:var(--coral)}
.steps .st h4{font-size:18px;margin:16px 0 8px}.steps .st p{font-size:14px;color:var(--soft)}

/* ---------- horizontal lifecycle ---------- */
.lifecycle{display:flex;align-items:stretch;gap:0;border:1px solid var(--line);background:#fff;border-radius:4px;overflow:hidden}
.lifecycle .ph{flex:1;padding:26px 20px;border-left:1px solid var(--line);position:relative;transition:.3s}
.lifecycle .ph:first-child{border-left:none}
.lifecycle .ph .cap{height:5px;position:absolute;top:0;left:0;right:0}
.lifecycle .ph:nth-child(1) .cap{background:var(--slate)}.lifecycle .ph:nth-child(2) .cap{background:var(--teal)}
.lifecycle .ph:nth-child(3) .cap{background:var(--indigo)}.lifecycle .ph:nth-child(4) .cap{background:var(--violet)}
.lifecycle .ph:nth-child(5) .cap{background:var(--vector)}.lifecycle .ph:nth-child(6) .cap{background:var(--coral)}
.lifecycle .ph .pnum{font-family:'League Spartan';font-weight:800;font-size:13px;color:var(--soft)}
.lifecycle .ph h4{font-size:16px;margin:8px 0 6px}.lifecycle .ph p{font-size:12.5px;color:var(--soft)}
.lifecycle .ph:hover{background:var(--cream)}

/* ---------- split content blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
.split.wide-l{grid-template-columns:1.2fr 1fr}
.split .body p{margin-top:16px}
.split ul{list-style:none;margin-top:18px}
.split ul li{position:relative;padding-left:24px;margin-bottom:10px;font-size:15px}
.split ul li::before{content:"";position:absolute;left:0;top:9px;width:0;height:0;border-left:7px solid var(--vector);border-top:5px solid transparent;border-bottom:5px solid transparent}

/* ---------- CTA strip ---------- */
.ctastrip{text-align:center;padding:84px 0;position:relative;overflow:hidden}
.ctastrip h2{font-size:clamp(36px,5vw,70px);font-weight:800;max-width:16ch;margin:0 auto}
.ctastrip p{font-size:17px;color:var(--soft);margin:22px auto 36px;max-width:42ch}

/* ---------- footer ---------- */
footer.site{background:var(--ink);color:rgba(246,241,233,.72);padding:64px 0 40px;font-size:13.5px}
footer.site .top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px;border-bottom:1px solid #2a2a32}
footer.site .brand img{height:26px;margin-bottom:18px}
footer.site .tbg{font-family:'League Spartan';font-weight:500;color:#86868e;font-size:12.5px;margin-top:10px}
footer.site h5{font-family:'League Spartan';font-weight:700;font-size:12px;letter-spacing:0.16em;text-transform:uppercase;color:#9a9aa2;margin-bottom:16px}
footer.site .fcol a{display:block;color:rgba(246,241,233,.78);margin-bottom:10px;transition:.2s}
footer.site .fcol a:hover{color:var(--teal)}
footer.site .bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;padding-top:28px}
footer.site .tag{font-family:'League Spartan';font-weight:600;color:var(--teal);letter-spacing:0.03em}

/* ---------- forms ---------- */
.field{margin-bottom:24px}
.field label{font-family:'League Spartan';font-weight:600;font-size:13px;letter-spacing:0.04em;display:block;margin-bottom:8px}
.field input,.field textarea{width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;padding:10px 2px;font-family:inherit;font-size:15px;color:var(--ink)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--vector)}
.field textarea{min-height:120px;resize:vertical}

/* ---------- accordion (native <details>, no JS needed) ---------- */
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;font-family:'League Spartan';font-weight:700;font-size:18px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .pm{font-size:26px;line-height:1;color:var(--vector);transition:.3s}
.acc details[open] summary .pm{transform:rotate(45deg)}
.acc .a{padding-bottom:22px;font-size:15px;color:var(--soft);max-width:62ch}

/* ---------- comparison table ---------- */
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--ink);color:#fff;font-family:'League Spartan';font-weight:700}
.cmp thead th:nth-child(2){color:var(--indigo)}.cmp thead th:nth-child(3){color:var(--violet)}
.cmp thead th:nth-child(4){color:var(--orange)}.cmp thead th:nth-child(5){color:var(--coral)}
.cmp tbody td:first-child{text-align:left;font-weight:500;color:var(--ink)}
.cmp .yes{color:#2f9e44;font-weight:700}.cmp .no{color:#c9c3b8}

/* ---------- utilities ---------- */
.mt0{margin-top:0}.mt-s{margin-top:14px}.mt-m{margin-top:24px}.mt-l{margin-top:38px}
.tagline-foot{font-family:'League Spartan'}

/* ---------- responsive ---------- */
@media(max-width:880px){
  .wrap{padding:0 24px}
  .nlinks{display:none;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);padding:10px 24px 24px}
  .nlinks.open{display:flex}
  .nlinks a{padding:14px 0;width:100%;border-bottom:1px solid var(--line)}
  .nlinks .navcta{margin-top:14px;clip-path:none;border-radius:3px;text-align:center}
  .navtoggle{display:block}
  .pagehead .wrap,.split{grid-template-columns:1fr;gap:30px}
  .pagehead{padding:120px 0 90px}
  .grid2,.grid3,.arrowlist{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .steps .st{border-left:none;padding-left:0}
  .lifecycle{flex-direction:column}.lifecycle .ph{border-left:none;border-top:1px solid var(--line)}.lifecycle .ph:first-child{border-top:none}
  .proof .it{padding:16px 26px}.proof .it+.it::before{display:none}
  footer.site .top{grid-template-columns:1fr 1fr}
  .cmp{font-size:12px}.cmp th,.cmp td{padding:10px 8px}
}

/* ============================================================
   Additional components: team, tiers, testimonial, certs, brands
   ============================================================ */

/* leadership team */
.team{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.member{position:relative;background:#fff;border:1px solid var(--line);padding:24px 26px;display:flex;gap:18px;align-items:flex-start;transition:.3s}
.member:hover{transform:translateY(-3px);box-shadow:0 20px 40px -22px rgba(40,40,60,.35)}
.member .ini{flex:0 0 auto;width:60px;height:60px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'League Spartan';font-weight:800;font-size:20px;clip-path:polygon(0 0,100% 0,100% 82%,50% 100%,0 82%)}
.member h4{font-size:19px}
.member .role{font-family:'League Spartan';font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:4px 0 10px}
.member p{font-size:13.5px;color:var(--soft)}
.member:nth-child(8n+1) .ini{background:var(--slate)}.member:nth-child(8n+1) .role{color:var(--slate)}
.member:nth-child(8n+2) .ini{background:var(--coral)}.member:nth-child(8n+2) .role{color:var(--coral)}
.member:nth-child(8n+3) .ini{background:var(--vector)}.member:nth-child(8n+3) .role{color:var(--vector)}
.member:nth-child(8n+4) .ini{background:var(--orange)}.member:nth-child(8n+4) .role{color:var(--orange)}
.member:nth-child(8n+5) .ini{background:var(--indigo)}.member:nth-child(8n+5) .role{color:var(--indigo)}
.member:nth-child(8n+6) .ini{background:var(--teal)}.member:nth-child(8n+6) .role{color:var(--teal)}
.member:nth-child(8n+7) .ini{background:var(--violet)}.member:nth-child(8n+7) .role{color:var(--violet)}
.member:nth-child(8n+8) .ini{background:var(--slate)}.member:nth-child(8n+8) .role{color:var(--slate)}

/* pricing tiers */
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tier{position:relative;border:1px solid var(--line);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.tier .top{padding:30px 32px 26px;color:#fff;position:relative;overflow:hidden}
.tier .top .facet{opacity:.18}
.tier .name{font-family:'League Spartan';font-weight:800;font-size:24px;position:relative;z-index:2}
.tier .tagl{font-size:13px;opacity:.92;margin-top:2px;position:relative;z-index:2}
.tier .fee{font-family:'League Spartan';font-weight:800;font-size:38px;line-height:1;margin-top:18px;position:relative;z-index:2}
.tier .feelbl{font-size:12.5px;opacity:.9;position:relative;z-index:2}
.tier .bd{padding:26px 32px 30px;display:flex;flex-direction:column;flex:1}
.tier h5{font-family:'League Spartan';font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:12px}
.tier ul{list-style:none;margin-bottom:20px}
.tier ul li{padding-left:22px;position:relative;font-size:14px;margin-bottom:9px}
.tier ul li::before{content:"";position:absolute;left:0;top:7px;width:0;height:0;border-left:7px solid var(--vector);border-top:5px solid transparent;border-bottom:5px solid transparent}
.tier .best{font-size:13.5px;color:var(--soft);border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.tier .best strong{color:var(--ink)}
.t-complete .top{background:var(--indigo)}.t-complete ul li::before{border-left-color:var(--indigo)}
.t-convert .top{background:var(--vector)}.t-convert ul li::before{border-left-color:var(--vector)}
.t-core .top{background:var(--orange)}.t-core ul li::before{border-left-color:var(--orange)}
.t-collect .top{background:var(--coral)}.t-collect ul li::before{border-left-color:var(--coral)}

/* testimonial */
.testimonial{display:grid;grid-template-columns:.9fr 1.3fr;align-items:stretch;border:1px solid var(--line);overflow:hidden}
.testimonial .ph{background:linear-gradient(140deg,var(--vector),var(--indigo));min-height:280px;position:relative;overflow:hidden}
.testimonial .tx{background:var(--cream);padding:48px}
.testimonial blockquote{font-family:'League Spartan';font-weight:700;font-size:clamp(21px,2.4vw,30px);line-height:1.3}
.testimonial cite{display:block;margin-top:22px;font-style:normal;font-size:14px;color:var(--soft)}

/* certifications */
.certs{display:flex;gap:18px;flex-wrap:wrap}
.cert{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);padding:16px 22px}
.cert .badge{width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:'League Spartan';font-weight:800;font-size:10px;text-align:center;line-height:1.05;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.cert .ct{font-family:'League Spartan';font-weight:700;font-size:15px}
.cert .cs{font-size:12px;color:var(--soft)}
.cert:nth-child(1) .badge{background:var(--slate)}.cert:nth-child(2) .badge{background:var(--indigo)}.cert:nth-child(3) .badge{background:var(--vector)}

/* brands powered by */
.brands{display:flex;gap:12px;flex-wrap:wrap}
.brandchip{font-family:'League Spartan';font-weight:700;font-size:14px;padding:12px 22px;background:#fff;border:1px solid var(--line);transition:.25s}
.brandchip:hover{border-color:var(--vector);color:var(--vector);transform:translateY(-2px)}

/* audience cards (who it's for) */
.aud{position:relative;background:#fff;border:1px solid var(--line);padding:36px;overflow:hidden;transition:.3s}
.aud:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(40,40,60,.4)}
.aud .tag2{font-family:'League Spartan';font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:inline-block;padding:5px 12px;color:#fff;margin-bottom:16px}
.aud h3{font-size:23px;margin-bottom:10px}
.aud p{font-size:15px;color:var(--soft)}

/* simple two-col compare for business case */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.vs .col{padding:34px;border:1px solid var(--line);background:#fff}
.vs .col.bad{background:var(--cream)}
.vs .col.good{background:var(--ink);color:#f1ece3;border-color:var(--ink)}
.vs .col h4{font-family:'League Spartan';font-weight:800;font-size:20px;margin-bottom:16px}
.vs .col.good h4{color:#fff}
.vs .col ul{list-style:none}
.vs .col li{padding-left:24px;position:relative;margin-bottom:12px;font-size:15px}
.vs .col.bad li::before{content:"\00d7";position:absolute;left:0;color:var(--coral);font-weight:700}
.vs .col.good li::before{content:"\2713";position:absolute;left:0;color:var(--teal);font-weight:700}

@media(max-width:880px){
  .team,.tiers,.vs{grid-template-columns:1fr}
  .testimonial{grid-template-columns:1fr}
  .testimonial .ph{min-height:180px}
}

/* photo support: drop an <img> inside .ini and it fills the faceted tile */
.member .ini{overflow:hidden}
.member .ini img{width:100%;height:100%;object-fit:cover}
/* duotone image frame for section imagery (drop an <img> inside) */
.imgframe{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(140deg,var(--vector),var(--indigo));min-height:300px}
.imgframe img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.92}
.imgframe .note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:'League Spartan';font-weight:700;font-size:14px;padding:20px}

/* ============================================================
   Imagery: portrait team cards, figures, unlocks band, brand graphic
   ============================================================ */
/* portrait team cards (photos are pre-duotoned) */
.member{padding:0;gap:0;align-items:stretch}
.member .meta{padding:22px 24px}
.member .por{flex:0 0 140px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--slate),var(--indigo))}
.member .por img{width:100%;height:100%;object-fit:cover;object-position:center 16%}
.member .por .ini{position:absolute;inset:0;width:auto;height:auto;clip-path:none;display:flex;align-items:center;justify-content:center;font-size:30px;background:transparent}
.member:nth-child(8n+1) .por{background:linear-gradient(160deg,var(--slate),#21434b)}
.member:nth-child(8n+2) .por{background:linear-gradient(160deg,var(--coral),#9e3a48)}
.member:nth-child(8n+3) .por{background:linear-gradient(160deg,var(--vector),#561f7a)}
.member:nth-child(8n+4) .por{background:linear-gradient(160deg,var(--orange),#c45f37)}
.member:nth-child(8n+5) .por{background:linear-gradient(160deg,var(--indigo),#2a4f90)}
.member:nth-child(8n+6) .por{background:linear-gradient(160deg,var(--teal),#3f8595)}
.member:nth-child(8n+7) .por{background:linear-gradient(160deg,var(--violet),#5a40b0)}
.member:nth-child(8n+8) .por{background:linear-gradient(160deg,var(--slate),#21434b)}

/* framed product/screenshot figure */
.figure{border:1px solid var(--line);background:#fff;overflow:hidden;border-radius:4px;box-shadow:0 26px 54px -32px rgba(30,30,55,.5)}
.figure img{width:100%;display:block}

/* brand graphic */
.brandgraphic{display:block;width:100%;max-width:660px;margin:6px auto 0;height:auto}

/* 'what it unlocks' people band */
.unlocks{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.unlock{position:relative;overflow:hidden;border:1px solid var(--line);min-height:320px;display:flex;align-items:flex-end}
.unlock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.unlock .cap{position:relative;z-index:2;margin:16px;background:#fff;padding:16px 18px;max-width:88%}
.unlock .cap h4{font-size:16px;margin-bottom:6px}
.unlock .cap p{font-size:13px;color:var(--soft)}

/* testimonial photo → duotone */
.testimonial .ph{position:relative}
.testimonial .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;mix-blend-mode:luminosity;opacity:.92}

@media(max-width:880px){
  .unlocks{grid-template-columns:1fr}
  .member .por{flex-basis:118px}
}