/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

/* ── TOKENS ── */
:root {
  --josefin: 'Josefin Sans', sans-serif;
  --inter: 'Inter', sans-serif;
  /* brand colours */
  --yellow: #f6d736;
  --yellow-light: rgba(246,215,54,.12);
  --blue: #206de7;
  --blue-dark: #0f52ba;
  --blue-light: #eff6ff;
  --dark: #111827;
  --body: #374151;
  --muted: #6B7280;
  --light: #F9FAFB;
  --border: #E5E7EB;
  --white: #ffffff;
  --green: #16a34a;
  --red: #dc2626;
  --max: 1440px;
  --px: 80px;
  --r: 6px;
  --rlg: 12px;
}

body {
  font-family: var(--inter);
  color: var(--body);
  background: #fff;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
ul { list-style: none; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--px); }

/* ── BUTTONS ──
   All color values use !important to override Kadence's
   #wrapper a / #wrapper a:hover high-specificity rules         */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--josefin); font-weight: 600; letter-spacing: .5px;
  border: none; cursor: pointer; text-decoration: none !important;
  transition: transform .18s, box-shadow .18s, background .18s, color .18s, border-color .18s;
  border-radius: var(--r);
}

/* Primary — solid blue */
.btn-primary {
  background: var(--blue) !important;
  color: #fff !important;
  padding: 13px 28px; font-size: 15px;
}
.btn-primary:hover {
  background: var(--blue-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(32,109,231,.45);
}

/* Outline — transparent with border, fills dark on hover */
.btn-outline {
  background: transparent !important;
  color: var(--dark) !important;
  border: 1.5px solid var(--border);
  padding: 13px 28px; font-size: 15px;
}
.btn-outline:hover {
  background: var(--dark) !important;
  border-color: var(--dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

/* White — used on dark/blue backgrounds */
.btn-white {
  background: #fff !important;
  color: var(--blue) !important;
  padding: 12px 28px; font-size: 14px; font-weight: 700;
}
.btn-white:hover {
  background: var(--yellow) !important;
  color: var(--dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(246,215,54,.4);
}

.btn-lg { padding: 15px 36px !important; font-size: 16px; }

/* ══════════════════════════════════
   HERO
══════════════════════════════════ */
#hero {
  background: radial-gradient(ellipse 80% 120% at 70% 40%,
    #f5d84a 0%, #f7e56a 25%, #fdf0a0 55%, #fffce8 80%, #ffffff 100%);
  position: relative;
  overflow: hidden;
  /* height is driven by .hero-l padding + content */
}
.hero-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
  display: grid; grid-template-columns: 1fr 1.1fr;
  align-items: stretch; gap: 32px;
  position: relative; z-index: 2;
}
.hero-l {
  /* single, clear padding — no double-stacking with #hero */
  padding: 200px 0 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

/* heading */
.hero-h1 {
  font-family: 'Josefin Sans', sans-serif !important;
  font-size: 44px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: #111827 !important;
  letter-spacing: -0.3px !important;
  margin-bottom: 22px !important;
  text-transform: none !important;
  border: none !important;
  outline: none !important;
}

/* pills: force single row, vertically centred */
.hero-pills {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 22px !important;
}
.hero-pill {
  display: inline-flex; align-items: center;
  font-family: var(--josefin); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dark);
  border: 1.5px solid rgba(0,0,0,.18); border-radius: 50px;
  padding: 5px 13px; background: rgba(255,255,255,0.8); white-space: nowrap;
  flex-shrink: 0; cursor: default; line-height: 1;
  transition: border-color .18s, background .18s, transform .18s;
}
.hero-pill:hover {
  border-color: var(--blue);
  background: #fff;
  transform: translateY(-1px);
}
/* arrow separator sits BETWEEN pills, outside any border */
.pill-sep {
  display: inline-flex; align-items: center;
  color: var(--blue); font-size: 13px; font-weight: 700;
  flex-shrink: 0; line-height: 1;
}

.hero-p {
  font-family: var(--inter); font-size: 15px; line-height: 1.8;
  color: #374151; max-width: 480px; margin-bottom: 32px;
}
.hero-btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* RIGHT column */
.hero-r {
  position: relative;
  overflow: hidden;   /* contain image within column — prevents left bleed */
}
.hero-team-img {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 90%;          /* user-set: slightly smaller than full height */
  width: 100%;
  object-fit: contain;
  object-position: center bottom;
  z-index: 1;
}

/* Floating cards */
.hc {
  position: absolute;
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15); padding: 20px 22px;
  z-index: 10;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hc:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.hc-1 { width: 210px; bottom: 50px; left: 20px; }
.hc-2 { width: 215px; bottom: 30px; right: 20px; }
.hc h4 {
  font-family: var(--josefin); font-size: 15px; font-weight: 700;
  color: var(--dark); line-height: 1.3; margin-bottom: 8px;
}
.hc p { font-family: var(--inter); font-size: 12px; color: var(--muted); line-height: 1.6; }
.hc-check {
  position: absolute; top: -12px; right: -12px;
  width: 30px; height: 30px; background: var(--blue); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(26,86,219,0.4);
}
.hc-check svg { width: 14px; height: 14px; fill: #fff; }

/* ══════════════════════════════════
   STATS BAR
══════════════════════════════════ */
#stats { border-bottom: 1px solid var(--border); background: #fff; }
.stats-row {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
  display: grid; grid-template-columns: repeat(4,1fr);
}
.stat {
  padding: 30px 32px; border-right: 1px solid var(--border);
  transition: background .2s; cursor: default;
}
.stat:last-child { border-right: none; }
.stat:hover { background: var(--light); }
.stat:hover .stat-n { color: var(--blue); }
.stat-n {
  font-family: var(--josefin); font-size: 30px; font-weight: 700;
  color: var(--dark); letter-spacing: -0.5px; line-height: 1.1; margin-bottom: 4px;
  transition: color .2s;
}
.stat-l { font-family: var(--inter); font-size: 13px; color: var(--muted); }

/* ══════════════════════════════════
   SECTION COMMON
══════════════════════════════════ */
.sec { padding: 80px 0; }
.sec-bg { background: var(--light); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--josefin); font-size: 12px;
  font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--blue); margin-bottom: 12px;
}
/* yellow dot before every eyebrow */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--yellow);
  border-radius: 50%;
  flex-shrink: 0;
}
/* ensure block-level spacing when eyebrow precedes a heading */
.tc .eyebrow, #fcta .eyebrow { display: flex; justify-content: center; }
.sh {
  font-family: var(--josefin); font-size: 36px; font-weight: 700;
  line-height: 1.2; color: var(--dark); letter-spacing: -.3px; margin-bottom: 16px;
}
.sub {
  font-family: var(--inter); font-size: 15px; color: var(--body);
  line-height: 1.75; max-width: 640px; margin-bottom: 14px;
}
.tc { text-align: center; }
.tc .sub { margin: 0 auto 14px; }

/* ══════════════════════════════════
   ABOUT
══════════════════════════════════ */
.about-g { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about-img { border-radius: var(--rlg); overflow: hidden; }
.about-img img { width: 100%; height: 460px; object-fit: cover; transition: transform .4s ease; }
.about-img:hover img { transform: scale(1.04); }
.ab-body { font-family: var(--inter); font-size: 15px; color: var(--body); line-height: 1.8; }
.ab-body p { margin-bottom: 14px; }
.ab-body strong { color: var(--dark); font-weight: 600; }
.ab-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--border); margin-top: 32px; padding-top: 24px; gap: 8px;
}
.ab-stat { padding: 0 8px 0 0; }
.ab-stat .stat-n { font-size: 22px; }
.ab-stat .stat-n.ab-n-sm { font-size: 18px; letter-spacing: 0; }
.ab-stat .stat-l { font-size: 11px; }

/* ══════════════════════════════════
   FLEXIBLE WAYS
══════════════════════════════════ */
.ways-g {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  background: var(--border); border: 1px solid var(--border);
  border-radius: var(--rlg); overflow: hidden; margin-top: 44px;
}
.way {
  background: #fff; padding: 36px 32px;
  transition: background .2s, transform .2s, box-shadow .2s;
  display: block; color: inherit;
}
.way:hover {
  background: var(--light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.07);
}
.way-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; transition: transform .2s;
}
.way:hover .way-icon { transform: scale(1.12); }
.way h3 {
  font-family: var(--josefin); font-size: 16px; font-weight: 700;
  color: var(--dark) !important; margin-bottom: 10px; letter-spacing: .2px;
}
.way p { font-family: var(--inter); font-size: 14px; color: var(--muted) !important; line-height: 1.7; }

/* ══════════════════════════════════
   HOW IT WORKS
══════════════════════════════════ */
.steps-g { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; margin-top: 52px; }
.step {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--rlg); padding: 30px 22px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.09);
  border-color: var(--yellow);
}
.big-n {
  font-family: var(--josefin); font-size: 60px; font-weight: 700;
  color: rgba(246,215,54,.35);
  line-height: 1; letter-spacing: -2px; margin-bottom: 14px;
}
.pill {
  display: inline-block; font-family: var(--josefin); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 13px;
}
.pill-y { background: rgba(246,215,54,.25); color: #7a5800; border: 1px solid rgba(246,215,54,.6); }
.pill-b { background: var(--blue-light); color: var(--blue); }
.step h3 {
  font-family: var(--josefin); font-size: 15px; font-weight: 700;
  color: var(--dark); margin-bottom: 8px; letter-spacing: .2px;
}
.step p { font-family: var(--inter); font-size: 13px; color: var(--muted); line-height: 1.65; }

/* ══════════════════════════════════
   CTA STRIP
══════════════════════════════════ */
#cta-strip { background: var(--blue); padding: 64px 0; }
.cta-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--px);
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
.cta-inner h2 {
  font-family: var(--josefin); font-size: 32px; font-weight: 700;
  color: #fff; letter-spacing: -.2px; line-height: 1.25; margin-bottom: 12px;
}
.cta-inner .sub-w {
  font-family: var(--inter); font-size: 15px; color: rgba(255,255,255,.82);
  line-height: 1.75; margin-bottom: 26px;
}
.cta-inner .right-p {
  font-family: var(--inter); font-size: 15px; color: rgba(255,255,255,.82); line-height: 1.75;
}

/* ══════════════════════════════════
   TECH LOGOS
══════════════════════════════════ */
#tech { padding: 60px 0; border-bottom: 1px solid var(--border); }
.tech-title {
  font-family: var(--josefin); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--muted);
  text-align: center; margin-bottom: 40px;
}
.tech-row {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: center; gap: 28px 48px;
}
.tl {
  opacity: .45; transition: opacity .2s, transform .2s;
  display: flex; align-items: center; height: 38px; cursor: default;
}
.tl:hover { opacity: 1; transform: translateY(-2px); }
.tl svg { height: 32px; width: auto; }

/* ══════════════════════════════════
   COMPARISON TABLE
══════════════════════════════════ */
.diff-wrap { overflow-x: auto; margin-top: 44px; }
/* border-separate so border-radius works on th.th-r */
.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--inter); font-size: 13px; }
.dt thead th {
  padding: 13px 18px; font-family: var(--josefin); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
  border-bottom: 2px solid var(--border); text-align: left;
}
.dt thead th.th-r {
  background: var(--blue); color: #fff; text-align: center;
  border-radius: 8px 8px 0 0; border-bottom: none;
}
.dt tbody td {
  padding: 13px 18px; border-bottom: 1px solid var(--border);
  color: var(--body); vertical-align: top; line-height: 1.5;
}
.dt tbody td:not(:first-child) { text-align: center; color: var(--muted); font-size: 13px; }
.dt tbody td:first-child { font-weight: 500; color: var(--dark); }
.dt tbody td.td-r {
  background: var(--blue-light); text-align: center; font-weight: 600; color: var(--blue);
}
.dt .cat td {
  background: var(--light); font-family: var(--josefin); font-weight: 700;
  font-size: 12px; color: var(--dark); text-transform: uppercase;
  letter-spacing: .5px; padding: 9px 18px;
}
.dt .cat td.td-r { background: #dbeafe; }
.dt tbody tr:not(.cat):hover td { background: var(--light); }
.dt tbody tr:not(.cat):hover td.td-r { background: #dbeafe; }
.ck { color: var(--green); font-size: 15px; }
.cx { color: var(--red); font-size: 15px; }
.dsub { font-size: 11px; font-weight: 400; color: var(--muted); display: block; margin-top: 2px; }

/* ══════════════════════════════════
   FAQ
══════════════════════════════════ */
.faq-g { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.faq-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.faq-photo { border-radius: var(--rlg); overflow: hidden; }
.faq-photo img { width: 100%; object-fit: cover; transition: transform .4s ease; }
.faq-photo:hover img { transform: scale(1.05); }
.faq-photo.tall img { height: 240px; }
.faq-photo.short img { height: 160px; }
.faq-list { margin-top: 28px; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-btn {
  width: 100%; background: none !important; border: none; text-align: left;
  padding: 16px 18px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--josefin); font-size: 14px; font-weight: 600;
  letter-spacing: .3px; color: var(--dark) !important;
  border-radius: 6px;
  transition: background .18s, color .18s;
}
.faq-btn:hover {
  background: var(--blue) !important;
  color: #fff !important;
}
.faq-item.open .faq-btn {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 6px 6px 0 0;
}
.faq-icon {
  font-size: 20px; color: inherit; flex-shrink: 0;
  transition: transform .25s; line-height: 1;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
/* smooth slide-open animation via max-height */
.faq-ans {
  font-family: var(--inter); font-size: 14px; color: var(--muted);
  line-height: 1.75;
  max-height: 0; overflow: hidden; padding-bottom: 0;
  transition: max-height .32s ease, padding-bottom .32s ease;
}
.faq-item.open .faq-ans { max-height: 300px; padding-bottom: 18px; }

/* ══════════════════════════════════
   WHO WE WORK WITH
══════════════════════════════════ */
.who-g { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.who-list { margin-top: 24px; }
.who-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 8px 16px 0; border-bottom: 1px solid var(--border);
  font-family: var(--josefin); font-size: 16px; font-weight: 600;
  letter-spacing: .2px; color: var(--dark);
  transition: background .18s, padding-left .18s, color .18s;
  border-radius: 6px; cursor: default;
}
.who-list li:hover { background: var(--light); padding-left: 10px; color: var(--blue); }
.who-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); border: 1.5px solid rgba(0,0,0,0.12); flex-shrink: 0;
}
.who-blue {
  background: var(--blue); border-radius: var(--rlg); padding: 28px 26px; margin-top: 24px;
  transition: box-shadow .2s;
}
.who-blue:hover { box-shadow: 0 12px 32px rgba(32,109,231,.3); }
.who-blue h4 {
  font-family: var(--josefin); font-size: 18px; font-weight: 700;
  color: #fff; margin-bottom: 8px; letter-spacing: .2px;
}
.who-blue p {
  font-family: var(--inter); font-size: 14px; color: rgba(255,255,255,.85);
  line-height: 1.7; margin-bottom: 18px;
}
.who-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.who-photo { border-radius: var(--rlg); overflow: hidden; }
.who-photo img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s ease; }
.who-photo.tall img { height: 300px; }
.who-photo:hover img { transform: scale(1.05); }

/* ══════════════════════════════════
   FEELS LIKE
══════════════════════════════════ */
.feels-g {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start; margin-top: 40px;
}
.feels-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feels-col { display: flex; flex-direction: column; gap: 12px; }
.feels-col.offset { margin-top: 40px; }
.fp { border-radius: var(--rlg); overflow: hidden; }
.fp img { width: 100%; object-fit: cover; transition: transform .4s ease; }
.fp:hover img { transform: scale(1.05); }
.fp-tall img { height: 260px; }
.fp-short img { height: 180px; }
.feels-list { margin: 22px 0; }
.feels-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 8px; border-bottom: 1px solid var(--border);
  font-family: var(--inter); font-size: 15px; color: var(--body); line-height: 1.6;
  transition: background .18s, padding-left .18s;
  border-radius: 6px; cursor: default;
}
.feels-list li:hover { background: var(--yellow-light); padding-left: 14px; }
.feels-list li::before {
  content: '✓';
  color: var(--blue); font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.feels-bold {
  font-family: var(--josefin); font-size: 17px; font-weight: 700;
  color: var(--dark); margin-bottom: 24px; letter-spacing: .2px;
}

/* ══════════════════════════════════
   BOTTOM FEATURES
══════════════════════════════════ */
.bf { background: var(--light); padding: 80px 0; }
.bf-g { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; margin-top: 48px; }
.bf-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--rlg); padding: 30px 26px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.bf-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.09);
  border-color: var(--yellow);
}
/* yellow bar accent */
.bf-card::before {
  content: ''; display: block;
  width: 32px; height: 3px; background: var(--yellow);
  border-radius: 2px; margin-bottom: 16px;
}
.bf-card h3 {
  font-family: var(--josefin); font-size: 16px; font-weight: 700;
  color: var(--dark); margin-bottom: 9px; letter-spacing: .2px;
}
.bf-card p { font-family: var(--inter); font-size: 14px; color: var(--muted); line-height: 1.7; }

/* ══════════════════════════════════
   FINAL CTA
══════════════════════════════════ */
#fcta { padding: 96px 0; text-align: center; }
#fcta h2 {
  font-family: var(--josefin); font-size: 40px; font-weight: 700;
  color: var(--dark); letter-spacing: -.3px; line-height: 1.2;
  margin: 10px auto 16px; max-width: 600px;
}
#fcta p {
  font-family: var(--inter); font-size: 16px; color: var(--muted);
  max-width: 480px; margin: 0 auto 36px; line-height: 1.75;
}

/* ══════════════════════════════════
   FOOTER
══════════════════════════════════ */
#ftr { background: #111827; color: #9ca3af; padding: 64px 0 0; }
.ftr-g {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  padding-bottom: 48px; border-bottom: 1px solid #1f2937;
}
.ftr-logo img { height: 28px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.ftr-about { font-family: var(--inter); font-size: 14px; line-height: 1.7; color: #9ca3af; }
.ftr-contact {
  font-family: var(--inter); font-size: 13px; color: #9ca3af; margin-top: 14px; line-height: 2;
}
.ftr-col h4 {
  font-family: var(--josefin); font-size: 12px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .8px; margin-bottom: 16px;
}
.ftr-col a {
  display: block; font-family: var(--inter); font-size: 14px;
  color: #9ca3af !important; margin-bottom: 10px;
  transition: color .15s, padding-left .15s;
}
.ftr-col a:hover { color: #fff !important; padding-left: 4px; }
.ftr-bottom {
  padding: 22px 0; display: flex; align-items: center;
  justify-content: space-between; font-family: var(--inter); font-size: 13px;
  color: #6b7280;
}
.ftr-legal { display: flex; gap: 20px; }
.ftr-legal a { color: #6b7280; font-family: var(--inter); font-size: 13px; transition: color .15s; }
.ftr-legal a:hover { color: #fff; }

/* ══════════════════════════════════
   SCROLL REVEAL ANIMATIONS
══════════════════════════════════ */
.rh-hidden {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.rh-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */
/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */

/* ── 1280px: still desktop 2-col, just scale text + cards ── */
@media (max-width: 1280px) {
  .hero-h1 { font-size: 38px !important; }
  .hero-l  { padding: 160px 0 40px !important; }
  .hc-1 { width: 185px; bottom: 44px; left: 12px; }
  .hc-2 { width: 188px; bottom: 18px; right: 12px; }
}

/* ── 1024px: tablet landscape — 2-col, hide cards, reduce padding ── */
@media (max-width: 1024px) {
  :root { --px: 32px; }
  /* hero stays 2-col, cards hidden (too cramped) */
  .hero-inner { grid-template-columns: 1fr 1fr !important; gap: 16px; }
  .hero-r  { display: block !important; }
  .hc      { display: none !important; }
  .hero-l  { padding: 80px 0 48px !important; }
  .hero-h1 { font-size: 32px !important; }
  .hero-p  { font-size: 14px; max-width: 100%; }
  .hero-pills { flex-wrap: wrap !important; }
  /* sections */
  .about-g, .faq-g, .who-g, .feels-g { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2) { border-right: none; }
  .steps-g { grid-template-columns: repeat(2,1fr); }
  .ways-g  { grid-template-columns: 1fr; }
  .bf-g    { grid-template-columns: 1fr 1fr; }
  .ftr-g   { grid-template-columns: 1fr 1fr; }
  .cta-inner { grid-template-columns: 1fr; gap: 32px; }
  .sh { font-size: 28px; }
  .about-g { gap: 40px; }
  .faq-g   { gap: 48px; }
}

/* ── 768px: tablet portrait — stack hero, image floats above text ── */
@media (max-width: 768px) {
  :root { --px: 24px; }
  /* switch hero to flex column so image can sit on top */
  .hero-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .hero-r {
    display: block !important;
    order: -1;              /* image appears above text */
    width: 100%;
    height: 300px;
    overflow: hidden;
    flex-shrink: 0;
  }
  .hero-team-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 20% !important;   /* show faces */
  }
  .hc { display: none !important; }
  .hero-l  { padding: 40px 0 48px !important; }
  .hero-h1 { font-size: 32px !important; }
  .hero-pills { flex-wrap: wrap !important; }
  .sh { font-size: 26px; }
  .sec { padding: 60px 0; }
}

/* ── 640px: mobile ── */
@media (max-width: 640px) {
  :root { --px: 20px; }
  .hero-r  { height: 240px; }
  .hero-l  { padding: 32px 0 40px !important; }
  .hero-h1 { font-size: 26px !important; }
  .hero-p  { font-size: 14px; margin-bottom: 20px; }
  .hero-btns .btn { padding: 11px 20px; font-size: 13px; }
  .sh { font-size: 22px; }
  .sec { padding: 48px 0; }
  .steps-g  { grid-template-columns: 1fr; }
  .bf-g     { grid-template-columns: 1fr; }
  .ftr-g    { grid-template-columns: 1fr; }
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat     { padding: 20px 16px; }
  .faq-photos   { display: none; }
  .who-photos   { display: none; }
  .feels-photos { display: none; }
  .ftr-bottom   { flex-direction: column; gap: 12px; text-align: center; }
  .ftr-legal    { justify-content: center; }
  .ab-stats     { grid-template-columns: repeat(2,1fr); gap: 16px; }
  .cta-inner h2 { font-size: 22px; }
  #fcta h2  { font-size: 24px; }
  #fcta     { padding: 56px 0; }
}