/* ============================================================
   EasyReach — public site
   Palette roles are fixed:
     purple  = structure   (nav, hero, headings, footer)
     coral   = action only (primary CTA + one badge)
     teal    = trust only  (trust icons, check marks)
     canvas  = page surface
   Never coral text on white. Never coral on purple.
   ============================================================ */

:root{
  --purple:      #4F008D;
  --purple-deep: #2A0A44;
  --purple-mid:  #6A1A9E;
  --coral:       #FF375E;
  --coral-dark:  #E01F45;      /* hover only */
  --teal:        #1CCED8;
  --teal-ink:    #0E7C84;      /* teal that is legible as text on white */
  --canvas:      #EFF0F2;
  --white:       #FFFFFF;

  --ink:      #241B33;
  --ink-soft: #5C5470;
  --line:     #E1E0E8;

  --wrap: 1200px;
  --r:    16px;
  --r-sm: 10px;

  --shadow:    0 1px 2px rgba(36,27,51,.05), 0 8px 24px rgba(36,27,51,.06);
  --shadow-lg: 0 2px 4px rgba(36,27,51,.06), 0 20px 48px rgba(36,27,51,.12);

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --body:    "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  color:var(--ink);
  background:var(--canvas);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.02em; margin:0; }
h1{ font-size:clamp(2.4rem, 5.2vw, 3.9rem); }
h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
h3{ font-size:1.15rem; }
p{ margin:0 0 1rem; }
a{ color:var(--purple); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:3px solid var(--teal); outline-offset:3px; border-radius:4px; }

.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--purple); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 var(--r-sm) 0;
}
.skip:focus{ left:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:28px; }
.wrap.narrow{ max-width:760px; }
.center{ text-align:center; }

.ico{ width:22px; height:22px; flex:0 0 auto; }

/* ------------------------------------------------ header */
.hdr{
  position:sticky; top:0; z-index:100;
  background:var(--purple-deep);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hdr-in{ display:flex; align-items:center; gap:24px; min-height:72px; }

.brand{ display:flex; align-items:center; gap:10px; color:#fff; margin-right:auto; }
.brand:hover{ text-decoration:none; }
.brand-logo{ display:block; height:30px; width:auto; }
.ftr-logo{ display:block; height:32px; width:auto; margin-bottom:12px; }
.brand-name{ font-family:var(--display); font-weight:700; font-size:1.22rem; letter-spacing:-.02em; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ color:rgba(255,255,255,.82); font-size:.97rem; font-weight:500; }
.nav a:hover{ color:#fff; text-decoration:none; }
.nav a.on{ color:#fff; }
.nav a.on::after{
  content:""; display:block; height:2px; margin-top:5px; border-radius:2px; background:var(--teal);
}
.navtoggle,.burger{ display:none; }

/* ------------------------------------------------ buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:1.0625rem; line-height:1;
  padding:16px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  text-decoration:none;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn .ico{ width:19px; height:19px; }
.btn-sm{ padding:11px 19px; font-size:.95rem; }
.btn-block{ display:flex; width:100%; }

/* the ONE action colour — white on coral, never the reverse */
.btn-cta{ background:var(--coral); color:#fff; box-shadow:0 6px 18px rgba(255,55,94,.28); }
.btn-cta:hover{ background:var(--coral-dark); color:#fff; }

.btn-ghost{ border-color:rgba(255,255,255,.45); color:#fff; }
.btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); color:#fff; }

.btn-outline{ border-color:var(--purple); color:var(--purple); background:transparent; }
.btn-outline:hover{ background:var(--purple); color:#fff; }

.link-more{ display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--purple); }
.link-more .ico{ width:18px; height:18px; }

/* ------------------------------------------------ flash */
.flash{ margin:18px 0 -8px; padding:14px 18px; border-radius:var(--r-sm); font-weight:500; }
.flash-ok { background:#E6FBFC; color:#0E5B61; border:1px solid #A9EDF2; }
.flash-err{ background:#FFF0F3; color:#8A0F2C; border:1px solid #FFC9D4; }

/* ------------------------------------------------ hero */
.hero{
  background:
    radial-gradient(120% 80% at 82% -10%, rgba(28,206,216,.18) 0%, transparent 60%),
    linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 88%);
  color:#fff;
  padding:clamp(56px, 8vw, 96px) 0 0;
}
.hero-in{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; }

.eyebrow{
  font-family:var(--display); font-size:.78rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:0 0 18px;
}
.eyebrow-dark{ color:var(--teal-ink); }

.hero h1{ color:#fff; margin-bottom:20px; }
.hl{ color:var(--teal); }
.lede{ font-size:clamp(1.05rem, 1.6vw, 1.2rem); color:rgba(255,255,255,.84); max-width:52ch; }
.subhero .lede,
.band .lede{ color:var(--ink-soft); }

.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; }
.cta-center{ justify-content:center; }

/* ---- signature: two surfaces, one catalogue ---- */
.sig{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; }
.surface{
  margin:0; padding:16px; border-radius:var(--r);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(2px);
}
.surface figcaption{
  font-family:var(--display); font-size:.7rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:12px;
}
.sk{ display:block; background:rgba(255,255,255,.22); border-radius:6px; }
.sk-hero{ height:52px; margin-bottom:10px; border-radius:8px; }
.sk-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sk-tile{ height:38px; }
.sk-list{ display:grid; gap:9px; margin-bottom:14px; }
.sk-line{ height:13px; }
.sk-line:nth-child(1){ width:88%; }
.sk-line:nth-child(3){ width:66%; }
.sk-total{ height:20px; width:52%; margin-left:auto; background:rgba(255,255,255,.4); }
.sk.shared{ background:var(--teal); box-shadow:0 0 0 3px rgba(28,206,216,.22); }

.tie{ display:grid; justify-items:center; gap:8px; }
.tie-line{ width:2px; height:34px; background:repeating-linear-gradient(var(--teal) 0 5px, transparent 5px 10px); }
.tie-label{
  font-family:var(--display); font-size:.66rem; font-weight:600; text-align:center;
  letter-spacing:.1em; text-transform:uppercase; color:var(--teal); line-height:1.5;
}

/* ---- hero stat strip ---- */
.stats{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(44px, 6vw, 72px);
  border-top:1px solid rgba(255,255,255,.16);
}
.stats li{ padding:26px 22px 30px; border-right:1px solid rgba(255,255,255,.16); }
.stats li:last-child{ border-right:0; }
.stats li:first-child{ padding-left:0; }
.stats strong{ display:block; font-family:var(--display); font-size:1.6rem; font-weight:700; color:#fff; }
.stats span{ font-size:.9rem; color:rgba(255,255,255,.66); }

/* ------------------------------------------------ sub hero (inner pages) */
.subhero{
  background:linear-gradient(160deg, var(--purple) 0%, var(--purple-deep) 100%);
  color:#fff; padding:clamp(52px, 7vw, 84px) 0 clamp(70px, 9vw, 110px);
}
.subhero h1{ color:#fff; margin-bottom:16px; }
.subhero .lede{ color:rgba(255,255,255,.84); }
.subhero-tall{ padding-bottom:clamp(64px, 8vw, 96px); }
/* hero for pages whose next section is NOT pulled up over it */
.subhero-flat{ padding-bottom:clamp(48px, 6vw, 72px); }
.subhero-tall .lede{ margin-inline:auto; }

/* ------------------------------------------------ bands */
.band{ padding:clamp(64px, 8vw, 104px) 0; }
.band-tight{ padding:clamp(40px, 5vw, 64px) 0; }
.band-alt{ background:var(--white); }
.band-pull{ padding-top:0; margin-top:clamp(-88px, -7vw, -56px); position:relative; z-index:2; }

.sec-head{ max-width:640px; margin-bottom:clamp(34px, 4vw, 52px); }
.sec-head h2{ color:var(--purple); }
.sec-sub{ margin-top:14px; color:var(--ink-soft); font-size:1.06rem; }

/* Content is visible by default. The animation only applies when JS is running,
   so a blocked or failed script can never leave a section invisible. */
.js [data-reveal]{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
.js [data-reveal].in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{ opacity:1; transform:none; transition:none; }
  .btn:hover{ transform:none; }
}

/* ------------------------------------------------ trust (teal only) */
.trustband{ padding-top:clamp(48px,6vw,72px); padding-bottom:clamp(48px,6vw,72px); }
.trust{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.trust-item{ display:flex; gap:14px; align-items:flex-start; }
.ico-trust{ width:28px; height:28px; color:var(--teal-ink); }
.trust-item h3{ color:var(--purple); margin-bottom:4px; }
.trust-item p{ margin:0; color:var(--ink-soft); font-size:.97rem; }

/* ------------------------------------------------ cards */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:30px 26px 28px; box-shadow:var(--shadow);
}
.ico-card{ width:26px; height:26px; color:var(--purple); margin-bottom:16px; }
.card h3{ color:var(--purple); margin-bottom:10px; display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.card p{ margin:0; color:var(--ink-soft); font-size:.98rem; }
.tag{
  font-family:var(--body); font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  background:var(--canvas); color:var(--purple); padding:4px 9px; border-radius:999px; white-space:nowrap;
}

/* ------------------------------------------------ integrations */
.integrations{
  display:grid; grid-template-columns:1fr 1fr; gap:22px;
}
.int-col{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px;
}
.int-col h3{ color:var(--purple); margin-bottom:8px; }
.int-col p{ color:var(--ink-soft); font-size:.97rem; }
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }
.chips li{
  font-weight:600; font-size:.92rem; color:var(--purple);
  background:var(--canvas); border-radius:999px; padding:8px 15px;
}
.chips-quiet li{ background:transparent; border:1px solid var(--line); color:var(--ink-soft); }
.chips-teal li{ display:inline-flex; align-items:center; gap:7px; background:var(--white); border:1px solid var(--line); }
.chips-teal .ico-check{ color:var(--teal-ink); }

/* ------------------------------------------------ plans */
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; align-items:start; }
.plan{
  position:relative; background:var(--white); border:1px solid var(--line);
  border-radius:var(--r); padding:32px 28px 30px; box-shadow:var(--shadow);
}
.plan-feat{
  background:linear-gradient(165deg, var(--purple) 0%, var(--purple-deep) 100%);
  border-color:transparent; box-shadow:var(--shadow-lg); color:#fff;
}
.plan-badge{
  position:absolute; top:-13px; left:28px;
  background:var(--coral); color:#fff;
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
}
.plan-name{ font-size:1.5rem; color:var(--purple); }
.plan-feat .plan-name{ color:#fff; }
.plan-tag{ margin-top:8px; color:var(--ink-soft); font-size:.95rem; min-height:2.9em; }
.plan-feat .plan-tag{ color:rgba(255,255,255,.78); }

.plan-price{ display:flex; align-items:baseline; gap:6px; margin:20px 0 2px; }
.plan-price .cur{ font-family:var(--display); font-size:1rem; font-weight:600; color:var(--ink-soft); }
.plan-price .amt{ font-family:var(--display); font-size:2.9rem; font-weight:700; letter-spacing:-.03em; color:var(--purple); }
.plan-price .per{ font-size:.95rem; color:var(--ink-soft); }
.plan-feat .plan-price .cur,
.plan-feat .plan-price .per{ color:rgba(255,255,255,.7); }
.plan-feat .plan-price .amt{ color:#fff; }

.plan-setup{ font-size:.9rem; color:var(--ink-soft); margin-bottom:22px; }
.plan-feat .plan-setup{ color:rgba(255,255,255,.7); }

.plan-inherit{
  margin:22px 0 12px; font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--teal-ink); padding-top:18px; border-top:1px solid var(--line);
}
.plan-feat .plan-inherit{ color:var(--teal); border-top-color:rgba(255,255,255,.2); }

.plan-list{ display:grid; gap:11px; margin-top:18px; }
.plan-list li{ display:flex; gap:10px; align-items:flex-start; font-size:.96rem; }
.ico-check{ width:18px; height:18px; margin-top:3px; color:var(--teal-ink); }
.plan-feat .ico-check{ color:var(--teal); }
.plan-feat .plan-list li{ color:rgba(255,255,255,.9); }

/* the featured card sits inside a purple surface, so its CTA must stay white-on-coral */
.plan-feat .btn-outline{ border-color:rgba(255,255,255,.5); color:#fff; }
.plan-feat .btn-outline:hover{ background:#fff; color:var(--purple); }

.fineprint{ margin-top:26px; font-size:.86rem; color:var(--ink-soft); max-width:70ch; }

/* ------------------------------------------------ comparison matrix */
.table-scroll{ overflow-x:auto; border-radius:var(--r); border:1px solid var(--line); background:var(--white); }
.matrix{ width:100%; border-collapse:collapse; min-width:640px; }
.matrix th,.matrix td{ padding:16px 18px; text-align:center; border-bottom:1px solid var(--line); }
.matrix thead th{
  background:var(--purple); color:#fff; font-family:var(--display); font-weight:600; font-size:1rem;
  border-bottom:0;
}
.matrix thead th:first-child{ text-align:left; }
.matrix tbody th{ text-align:left; font-weight:500; font-size:.97rem; color:var(--ink); }
.matrix tbody tr:last-child th,
.matrix tbody tr:last-child td{ border-bottom:0; }
.matrix tbody tr:nth-child(even){ background:#FAFAFB; }
.matrix .col-feat{ background:rgba(79,0,141,.045); }
.matrix thead .col-feat{ background:var(--purple-deep); }
.matrix .yes{ display:inline-flex; color:var(--teal-ink); }
.matrix .no{ color:#A9A5B5; }
.matrix .txt{ font-size:.85rem; font-weight:600; color:var(--purple); }
.matrix-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:26px; }

/* ------------------------------------------------ included */
.incl{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:30px 28px; }
.incl h3{ color:var(--purple); margin-bottom:6px; }

/* ------------------------------------------------ process */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; counter-reset:none; }
.steps li{
  padding-top:22px; border-top:3px solid var(--purple);
}
.steps li:nth-child(2){ border-top-color:var(--purple-mid); }
.steps li:nth-child(3){ border-top-color:#9B4FC7; }
.steps li:nth-child(4){ border-top-color:var(--teal); }
.step-when{
  display:block; font-family:var(--display); font-size:.74rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink); margin-bottom:8px;
}
.steps h3{ color:var(--purple); margin-bottom:8px; }
.steps p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

/* ------------------------------------------------ faq */
.faq details{
  background:var(--canvas); border-radius:var(--r-sm); margin-bottom:10px; overflow:hidden;
}
.band-alt .faq details{ background:var(--canvas); }
.faq summary{
  cursor:pointer; list-style:none; padding:18px 22px;
  font-family:var(--display); font-weight:600; font-size:1.02rem; color:var(--purple);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.4rem; font-weight:400; color:var(--teal-ink); line-height:1;
}
.faq details[open] summary::after{ content:"–"; }
.faq-a{ padding:0 22px 18px; color:var(--ink-soft); font-size:.98rem; }
.faq-a p:last-child{ margin-bottom:0; }

/* ------------------------------------------------ contact */
.contact-grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:26px; align-items:start; }
.formcard{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:34px 32px; box-shadow:var(--shadow-lg);
}
.formcard h2{ color:var(--purple); font-size:1.6rem; }
.formcard-sub{ color:var(--ink-soft); margin-top:8px; margin-bottom:24px; }

.f2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin:0 0 16px; display:block; }
.field label{ display:block; font-size:.9rem; font-weight:600; color:var(--ink); margin-bottom:7px; }
.req{ color:var(--purple); }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--white); transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(79,0,141,.12);
}
.field textarea{ resize:vertical; }
.phone-row{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:8px; }
.phone-row select{ text-overflow:ellipsis; }
.hint{ font-size:.87rem; color:var(--ink-soft); margin:-6px 0 18px; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.contact-side{ display:grid; gap:18px; }
.side-block{ background:var(--white); border:1px solid var(--line); border-radius:var(--r); padding:26px 24px; }
.side-block h3{ color:var(--purple); margin-bottom:12px; }
.side-block p{ margin:0 0 10px; }
.side-steps ol{ display:grid; gap:14px; }
.side-steps li{ font-weight:500; font-size:.96rem; }

/* ------------------------------------------------ closing cta */
.endcta{
  background:linear-gradient(120deg, var(--purple) 0%, var(--purple-deep) 100%);
  color:#fff; padding:clamp(56px, 7vw, 84px) 0;
}
.endcta-in{ display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap; }
.endcta h2{ color:#fff; margin-bottom:10px; }
.endcta p{ color:rgba(255,255,255,.8); max-width:56ch; margin:0; }
.endcta-actions{ display:flex; gap:13px; flex-wrap:wrap; }

/* ------------------------------------------------ footer */
.ftr{ background:var(--purple-deep); color:rgba(255,255,255,.72); padding:56px 0 0; }
.ftr-in{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px; padding-bottom:40px; }
.ftr .brand-name{ color:#fff; display:block; margin-bottom:10px; }
.ftr-tag{ color:var(--teal); font-size:.9rem; margin-bottom:8px; }
.ftr-note{ font-size:.94rem; max-width:34ch; }
.ftr-col h4{ font-family:var(--display); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:14px; }
.ftr-col a{ display:block; color:rgba(255,255,255,.78); font-size:.96rem; margin-bottom:9px; }
.ftr-col a:hover{ color:#fff; }
.ftr-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,.12); padding-top:22px; padding-bottom:26px;
  font-size:.88rem; color:rgba(255,255,255,.55);
}
.ftr-base a{ color:rgba(255,255,255,.7); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1000px){
  .hero-in{ grid-template-columns:1fr; gap:44px; }
  .sig{ max-width:520px; }
  .cards,.trust,.steps{ grid-template-columns:repeat(2,1fr); }
  .plans{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .plan-tag{ min-height:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .integrations{ grid-template-columns:1fr; }
  .ftr-in{ grid-template-columns:1fr 1fr; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stats li{ border-right:0; padding-left:0; }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }

  /* mobile nav */
  .burger{ display:flex; flex-direction:column; gap:5px; padding:10px; cursor:pointer; }
  .burger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; }
  .nav{
    position:absolute; top:100%; left:0; right:0; display:none;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--purple-deep); border-top:1px solid rgba(255,255,255,.12); padding:12px 20px 20px;
  }
  .navtoggle:checked ~ .nav{ display:flex; }
  .nav a{ padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); }
  .nav a.on::after{ display:none; }
  .nav .btn{ margin-top:14px; border-bottom:0; }

  .cards,.trust,.steps,.f2{ grid-template-columns:1fr; }
  .phone-row{ grid-template-columns:118px minmax(0,1fr); }
  .brand-logo{ height:26px; }
  .sig{ grid-template-columns:1fr; }
  .tie{ grid-auto-flow:column; }
  .tie-line{ width:34px; height:2px; background:repeating-linear-gradient(90deg, var(--teal) 0 5px, transparent 5px 10px); }
  .endcta-in{ flex-direction:column; align-items:flex-start; }
  .ftr-in{ grid-template-columns:1fr; }
  .band-pull{ margin-top:-48px; }
}

/* ------------------------------------------------ partners */
.strip-head{
  text-align:center; font-family:var(--display); font-size:.8rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px;
}
.strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:18px 44px;
}
.strip-item{ display:flex; align-items:center; justify-content:center; height:40px; }
.strip-item img{
  max-height:40px; width:auto; max-width:150px; object-fit:contain;
  filter:grayscale(1); opacity:.62; transition:filter .2s ease, opacity .2s ease;
}
.strip-item:hover img{ filter:none; opacity:1; }
.strip-name{
  font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--purple); opacity:.72;
}
.strip-more{ margin-top:28px; }

.plist{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pcard{
  display:block; background:var(--white); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; box-shadow:var(--shadow); color:inherit;
}
a.pcard:hover{ text-decoration:none; border-color:var(--purple); transform:translateY(-2px); transition:transform .15s ease, border-color .15s ease; }
.pcard-logo{ display:flex; align-items:center; height:46px; margin-bottom:16px; }
.pcard-logo img{ max-height:46px; max-width:170px; width:auto; object-fit:contain; }
.pcard-name{ font-family:var(--display); font-weight:600; font-size:1.35rem; color:var(--purple); }
.pcard h3{ color:var(--purple); margin-bottom:8px; }
.pcard p{ margin:0; color:var(--ink-soft); font-size:.95rem; }

.quotes{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
.quote{
  margin:0; background:var(--canvas); border-radius:var(--r); padding:28px 26px;
  border-left:3px solid var(--teal);
}
.band-alt .quote{ background:var(--canvas); }
.quote blockquote{ margin:0 0 18px; font-size:1.02rem; color:var(--ink); }
.quote blockquote p:last-child{ margin-bottom:0; }
.quote figcaption{ display:flex; align-items:center; gap:12px; }
.quote-photo{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.quote figcaption strong{ display:block; color:var(--purple); font-size:.98rem; }
.quote figcaption em{ font-style:normal; color:var(--ink-soft); font-size:.88rem; }

@media (max-width: 1000px){
  .plist{ grid-template-columns:repeat(2,1fr); }
  .quotes{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .plist{ grid-template-columns:1fr; }
  .strip{ gap:16px 28px; }
  .strip-item{ height:32px; }
  .strip-item img{ max-height:32px; max-width:110px; }
}

/* ------------------------------------------------ client logo marquee */
.clients{ padding-top:clamp(44px,5vw,64px); padding-bottom:clamp(44px,5vw,64px); }
.sec-head-mid{ max-width:640px; margin-inline:auto; text-align:center; margin-bottom:34px; }
.sec-head-mid .sec-sub{ margin-top:10px; }

.mq{
  position:relative; overflow:hidden; width:100%;
  /* fade both edges so logos slide in and out rather than being chopped */
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track{
  display:flex; align-items:center; gap:24px; width:max-content; padding:6px 0;
  animation:mq-slide 44s linear infinite;
  will-change:transform;
}
.mq:hover .mq-track,
.mq:focus-within .mq-track{ animation-play-state:paused; }

/* Too few logos to be worth scrolling: show them once, centred and still. */
.mq-still{ -webkit-mask-image:none; mask-image:none; }
.mq-still .mq-track{
  animation:none; width:auto; flex-wrap:wrap;
  justify-content:center; gap:20px;
}

@keyframes mq-slide{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}

/* Each logo sits on its own white card. That reads as a deliberate portfolio
   tile, and it means a supplied logo with a white background looks intentional
   rather than like a stray rectangle on the canvas. */
.mq-item{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; min-width:196px; height:116px; padding:20px 28px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
}
.mq-item img{
  max-height:72px; width:auto; max-width:184px; object-fit:contain;
}
.mq-name{
  font-family:var(--display); font-weight:600; font-size:1.15rem;
  color:var(--purple); white-space:nowrap;
}

/* No animation without JS-free motion consent: fall back to a static wrapped row.
   The second pass is hidden so logos are not repeated when nothing is moving. */
@media (prefers-reduced-motion: reduce){
  .mq{ -webkit-mask-image:none; mask-image:none; }
  .mq-track{
    animation:none; width:auto; flex-wrap:wrap;
    justify-content:center; gap:24px 48px;
  }
  .mq-item[aria-hidden="true"]{ display:none; }
}

@media (max-width: 760px){
  .mq-track{ gap:14px; animation-duration:32s; }
  .mq-item{ min-width:150px; height:92px; padding:16px 20px; border-radius:14px; }
  .mq-item img{ max-height:56px; max-width:140px; }
  .mq-name{ font-size:1rem; }
}

/* A light logo — white artwork that arrived on a black or navy background —
   would vanish on a white tile, so it gets a dark one instead. */
.mq-item.mq-dark{ background:var(--purple-deep); border-color:transparent; }
.mq-item.mq-dark .mq-name{ color:#fff; }
.pcard-logo-dark{
  background:var(--purple-deep); border-radius:10px;
  padding:10px 16px; margin-left:-4px;
}
.pcard-logo-dark .pcard-name{ color:#fff; }