/* ==========================================================================
   Basil Tech — Shopify Agency Homepage
   --------------------------------------------------------------------------
   Version 5.71 — updated 16 Oct 2026
   Pages load this file as styles.css?v=5.71.
   - New page: privacy-policy.html Latest changes:
   - Blog articles: wider highlighted Table of Contents with search, check-icon lists, "Mistake" tags
   - Blog articles (blog/*.html): sticky contents sidebar, tables, FAQ accordion
   - New pages: blog.html (card grid) and 404.html
   - Header: "Contact us" text button + compact WhatsApp pill (no phone number)
   - New Basil logo (uploads/basil-logo.svg)
   - Mobile menu button: blue background, crisp lines
   - Forms: thank-you pop-up; validation errors no longer change form height
   - Case studies: company initial instead of a photo in the testimonial
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --accent: #6E8BFF;
  --accent-soft: #A9C6FF;
  --link-hover: #7FB0FF;

  --greenmarked: #1c7f0d;

  --bg: #08090B;
  --bg-2: #0A0C0F;
  --surface: #101216;
  --surface-2: #0C0E11;
  --line: #1C1F25;
  --line-2: #23262C;
  --line-3: #2A2E35;
  --rule: #16181D;

  --text: #F2F4F7;
  --text-2: #C3C9D2;
  --muted: #A8AFBA;
  --muted-2: #8B93A0;
  --dim: #6E7684;

  --light: #F3F5F9;
  --white: #FFFFFF;
  --ink: #0B0D12;
  --ink-accent: #2F49B8;
  --ink-text: #2C3140;
  --ink-body: #4B5162;
  --ink-muted: #8A92A2;
  --ink-line: #E1E5EC;

  --whatsapp: #25D366;

  --font-sans: Figtree, ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', monospace;
  --font-script: 'Caveat', 'Segoe Script', cursive;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --h2: clamp(30px, 3.1vw, 42px); /* floors at 30px below ~968px */
  --container: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--text); text-decoration: none; }
:where(a:hover) { color: var(--link-hover); }
input, select, textarea, button { font-family: inherit; }
em { font-style: italic; }

.page { background: var(--bg); overflow-x: clip; }
.container { max-width: var(--container); margin: 0 auto; }
.dot { width: 7px; height: 7px; border-radius: 99px; background: var(--accent); flex: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Motion ---------- */
@keyframes sl-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes sl-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes sl-vscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } }

[data-reveal] { animation: sl-rise .8s var(--ease) both; }
@supports (animation-timeline: view()) {
  [data-reveal] { animation-timeline: view(); animation-range: entry 0% cover 26%; }
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--ink { color: var(--ink-accent); }
.eyebrow--tight { letter-spacing: .12em; }
.eyebrow--wide { letter-spacing: .16em; }

.title {
  margin: 0;
  font-size: var(--h2);
  line-height: 1.06;
  letter-spacing: -0.038em;
  font-weight: 600;
}
.title em { color: var(--accent); }
.title--ink { color: var(--ink); }
.title--ink em { color: var(--ink-accent); }

.lead {
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.7;
  color: var(--muted);
  text-wrap: pretty;
}
.lead--ink { color: var(--ink-body); }

.center { text-align: center; }
.head-narrow { max-width: 62ch; margin: 0 auto; text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 15.5px;
  font-weight: 500;
}
.btn--bold { font-weight: 600; }
.btn__arrow { opacity: .6; }

/* accent fill */
.btn--accent {
  background: var(--accent);
  color: var(--white);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn--accent:hover { color: var(--white); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(110,139,255,.35); }
.btn--accent-lg:hover { box-shadow: 0 16px 34px rgba(110,139,255,.35); }

/* Lead-CTA highlight: a light "comet" travels around the border while a soft glow pulses.
   Add .btn--glow to any pill button. --glow-angle is registered so the gradient can animate. */
@property --glow-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes btn-glow-spin { to { --glow-angle: 360deg; } }
@keyframes btn-glow-pulse { 0%, 100% { opacity: .45; } 50% { opacity: .95; } }
.btn--glow { position: relative; isolation: isolate; }
.btn--glow::before {
  content: ""; position: absolute; inset: -3px; z-index: 1;
  padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--glow-angle),
    rgba(169,198,255,0) 0deg, rgba(169,198,255,0) 200deg,
    #A9C6FF 280deg, #FFFFFF 330deg, rgba(169,198,255,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: btn-glow-spin 3s linear infinite;
}
.btn--glow::after {
  content: ""; position: absolute; inset: -2px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 22px 3px rgba(110,139,255,.6);
  animation: btn-glow-pulse 2.4s ease-in-out infinite;
}
.btn--glow:hover::before { animation-duration: 1.4s; }

.btn--outline {
  border: 1px solid var(--line-3);
  background: transparent;
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.btn--outline:hover { color: var(--text); border-color: var(--dim); transform: translateY(-2px); }

/* ink fill on light bg */
.btn--ink {
  background: var(--ink);
  color: var(--white);
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn--ink:hover {
  color: var(--white);
  background: var(--ink-accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -16px rgba(47,73,184,.6);
}
.btn--ink .btn__arrow { opacity: .7; }

/* light outline on white bg */
.btn--light {
  border: 1px solid #D5DAE4;
  background: var(--white);
  color: var(--ink);
  transition: border-color .2s ease, gap .2s ease;
}
.btn--light:hover { color: var(--ink); border-color: var(--ink); gap: 16px; }

/* ---------- Decorative layers ---------- */
.deco { position: absolute; pointer-events: none; }
.deco-grid {
  inset: 0;
  opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 75%);
          mask-image: radial-gradient(70% 60% at 50% 25%, #000, transparent 75%);
}
.deco-stripes {
  inset: 0;
  opacity: .18;
  background-image: repeating-linear-gradient(135deg, rgba(110,139,255,.35) 0 1px, transparent 1px 22px);
  -webkit-mask-image: radial-gradient(60% 55% at 50% 15%, #000, transparent 70%);
          mask-image: radial-gradient(60% 55% at 50% 15%, #000, transparent 70%);
}

/* ---------- Marquees ---------- */
.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; }

.marquee--fade-8  { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee--fade-10 { -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90;
  background: rgba(8,9,11,0);
  border-bottom: 1px solid rgba(0,0,0,0);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {
  background: rgba(0,0,0,.92);
  /* border-bottom-color: rgba(255,255,255,.07); */
  border-bottom-color: rgba(106, 134, 246, 0.35);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.8);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
          backdrop-filter: saturate(180%) blur(14px);
}
.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  height: 74px;
  /* Logo left, nav in the true centre, actions right (equal side columns) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__logo { display: flex; align-items: center; gap: 10px; justify-self: start; grid-column: 1; }
.site-header__logo img { height: 30px; width: auto; display: block; }
.site-nav { grid-column: 2; display: flex; align-items: center; gap: 26px; font-size: 14.5px; color: var(--muted); white-space: nowrap; }
/* Top-level links only (not the links inside the mega menu) */
.site-nav > a, .site-nav .nav-link {
  position: relative;
  padding: 6px 0;
  color: inherit;
  transition: color .25s ease;
}
/* Classic hover: text brightens and an accent underline slides in from the left */
.site-nav > a::after, .site-nav .nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right center;
  transition: transform .3s var(--ease);
}
.site-nav > a:hover, .site-nav > a:focus-visible,
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: var(--text); }
.site-nav > a:hover::after, .site-nav > a:focus-visible::after,
.site-nav .nav-link:hover::after, .site-nav .nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- Services mega menu (desktop) ----------
   .nav-item is left unpositioned so the panel is placed against the fixed header
   and spans its full width. Opens on hover / keyboard focus; closing is delayed
   slightly so the pointer can travel from the link down into the panel. */
.nav-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-link__chevron { transition: transform .3s var(--ease); }
.nav-item--mega:hover .nav-link, .nav-item--mega:focus-within .nav-link { color: var(--text); }
.nav-item--mega:hover .nav-link__chevron, .nav-item--mega:focus-within .nav-link__chevron { transform: rotate(180deg); }

.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  white-space: normal;
  background: rgba(10,12,15,.97);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.85);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  pointer-events: none; /* a closing panel must not catch the pointer and re-open */
  transition: opacity .25s ease, transform .3s var(--ease), visibility 0s linear .25s;
}
/* Invisible bridge from the link down into the panel, only as wide as the link,
   so moving sideways to Case Studies / About Us leaves the menu cleanly */
.nav-item--mega .nav-link::before { content: ""; position: absolute; left: -14px; right: -14px; top: 100%; height: 30px; }
.nav-item--mega:hover .mega, .nav-item--mega:focus-within .mega {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .25s ease, transform .3s var(--ease), visibility 0s;
}
/* After a link inside is clicked, stay closed until the pointer leaves */
.nav-item--mega.is-dismissed .mega { opacity: 0; visibility: hidden; pointer-events: none; transition: none; }
.site-header:has(.nav-item--mega:hover:not(.is-dismissed)),
.site-header:has(.nav-item--mega:focus-within:not(.is-dismissed)) { background: rgba(10,12,15,.97); border-bottom-color: var(--rule); }

.mega__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 30px 24px 34px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(200px, 250px);
  gap: 20px;
}
.mega__heading {
  margin: 0 0 12px; padding-left: 14px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim);
}
/* Each column spans the two shared rows, so items line up across columns */
.mega__inner { grid-template-rows: auto auto; row-gap: 4px; }
.mega__group { grid-row: span 2; display: grid; grid-template-rows: subgrid; gap: 4px; }
.mega__aside { grid-row: span 2; }
.mega-item {
  display: flex; gap: 14px;
  padding: 14px;
  border-radius: 14px;
  color: var(--text);
  transition: background .25s ease;
}
.mega-item:hover, .mega-item:focus-visible { color: var(--text); background: #14171D; }
.mega-item__icon { flex: none; margin-top: 1px; color: var(--muted-2); transition: color .25s ease; }
.mega-item:hover .mega-item__icon, .mega-item:focus-visible .mega-item__icon { color: var(--accent); }
.mega-item__text { display: grid; gap: 5px; }
.mega-item__title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.012em; }
.mega-item__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }

.mega__aside {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-left: 28px;
  border-left: 1px solid var(--line);
}
.mega__aside .mega__heading { padding-left: 0; }
.mega__links { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.mega__links a {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--text-2);
  transition: color .2s ease;
}
.mega__links a svg { color: var(--dim); transition: transform .25s var(--ease), color .2s ease; }
.mega__links a:hover { color: var(--text); }
.mega__links a:hover svg { color: var(--accent); transform: translateX(3px); }
.mega__cta { margin-top: auto; padding: 12px 20px; font-size: 14.5px; }

/* Industries: compact vertical dropdown under its own link (reuses the mega open/close rules) */
.nav-item--drop { position: relative; }
.mega.drop {
  top: calc(100% + 22px); left: 50%; right: auto; width: 270px; margin-left: -135px;
  display: grid; gap: 2px; padding: 10px;
  border: 1px solid var(--line-2); border-radius: 18px;
}
.drop-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.012em; color: var(--text);
  border: 1px solid transparent; transition: background .25s ease, border-color .25s ease;
}
.drop-item__icon {
  flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px;
  background: rgba(110,139,255,.14); color: var(--accent); transition: background .25s ease, color .25s ease;
}
.drop-item:hover, .drop-item:focus-visible, .drop-item[aria-current="page"] { color: var(--text); background: rgba(110,139,255,.07); border-color: rgba(110,139,255,.35); }
.drop-item:hover .drop-item__icon, .drop-item:focus-visible .drop-item__icon { background: var(--accent); color: var(--white); }
.drop__all {
  display: flex; align-items: center; justify-content: space-between; margin-top: 6px; padding: 12px 12px 4px;
  border-top: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--text-2); transition: color .2s ease;
}
.drop__all svg { color: var(--dim); transition: transform .25s var(--ease), color .2s ease; }
.drop__all:hover { color: var(--text); }
.drop__all:hover svg { color: var(--accent); transform: translateX(3px); }

.site-header__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 10px; }

/* WhatsApp: pill with number on desktop, icon-only circle below 1199px */
.wa-mini {
  height: 42px;
  padding: 0 16px 0 11px;
  border-radius: 999px;
  background: var(--whatsapp);
  flex: none;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--white);
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-mini:hover { color: var(--white); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(37,211,102,.8); }
.wa-mini svg { flex: none; }

/* Attention: a soft green ripple every 2.4s, and the icon "rings" every 5s */
@keyframes wa-ripple {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); }
  70%, 100% { box-shadow: 0 0 0 9px rgba(37,211,102,0); }
}
@keyframes wa-ring {
  0%, 12%, 100% { transform: rotate(0); }
  2% { transform: rotate(-16deg); }
  4% { transform: rotate(14deg); }
  6% { transform: rotate(-10deg); }
  8% { transform: rotate(6deg); }
  10% { transform: rotate(-3deg); }
}
.wa-mini { position: relative; }
.wa-mini::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: wa-ripple 2.4s ease-out infinite;
}
.wa-mini svg { animation: wa-ring 5s ease-in-out 1s infinite; }
.wa-mini__icon { display: grid; place-items: center; flex: none; }

/* Wide screens: "contact card" style pill - green icon disc overlapping a green-outlined pill
   with a small label and the phone number (below 1200px it stays the round green icon) */
@media (min-width: 1200px) {
  .site-header__actions .wa-mini {
    height: 46px; padding: 0 18px 0 0; gap: 11px;
    background: rgba(37,211,102,.08);
    border: 1.5px solid rgba(37,211,102,.7);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
  }
  .site-header__actions .wa-mini:hover { background: rgba(37,211,102,.16); border-color: var(--whatsapp); box-shadow: 0 10px 24px -12px rgba(37,211,102,.8); }
  .site-header__actions .wa-mini__icon {
    width: 50px; height: 50px; margin: -3px 0 -3px -3px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #4BE07F, #1DAA4F 75%);
    border: 3px solid #0B0D12;
    box-shadow: 0 0 0 1.5px rgba(37,211,102,.7), 0 8px 18px -6px rgba(37,211,102,.75);
  }
  .site-header__actions .wa-mini__icon svg { width: 22px; height: 22px; }
  .site-header__actions .wa-mini__label { display: grid; gap: 3px; line-height: 1; text-align: left; }
  .site-header__actions .wa-mini__label small { font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #8EEDB0; }
  .site-header__actions .wa-mini__label b { font-size: 15px; font-weight: 700; letter-spacing: .01em; color: var(--white); }
}

.btn-header {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 14.5px; font-weight: 500;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease;
}
.btn-header:hover { background: var(--accent); color: var(--white); transform: translateY(-1px); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; padding: 148px 24px 80px; overflow: hidden; }
.ring {
  left: 50%;
  transform: translateX(-50%);
  border-radius: 999px;
}

.hero__content { max-width: var(--container); margin: 0 auto; position: relative; text-align: center; }

/* ==========================================================================
   Shared dark section backgrounds
   ========================================================================== */
.dark-section { position: relative; overflow: hidden; border-top: 1px solid var(--rule); }
.bg-glow-top { background: radial-gradient(110% 80% at 50% 0%, #121A2C 0%, var(--bg) 60%); }

/* ==========================================================================
   Trusted by (logos)
   ========================================================================== */
.trust { padding: 56px 0 60px; }
.trust__head { position: relative; max-width: var(--container); margin: 0 auto 34px; padding: 0 24px; text-align: center; }
.trust__head .lead { margin: 16px auto 0; max-width: 62ch; }
.trust .marquee__track { align-items: center; gap: 64px; animation: sl-marquee 42s linear infinite; }
.trust__logo { height: 30px; width: auto; max-width: 150px; object-fit: contain; filter: brightness(0) invert(1); opacity: .58; }
/* Certifications & partner badges: a white bar in the logos' original colours that straddles the
   bottom of the dark hero and the light section below, so it joins the two */
.trust--merged { position: relative; z-index: 2; padding: 0 24px; background: linear-gradient(180deg, #08090B 0%, #08090B 50%, var(--light) 50%, var(--light) 100%); }
.trust__bar {
  max-width: 1080px; margin: 0 auto; padding: 22px 40px; overflow: hidden;
  background: #FFFFFF; border-radius: 24px; border: 1px solid var(--ink-line);
  box-shadow: 0 30px 60px -36px rgba(11,13,18,.55), 0 0 0 6px rgba(255,255,255,.06);
}
.trust__badges { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 18px 40px; }
.trust__badge.trust__badge--dup { display: none; }
/* Below 991px: the logos scroll continuously, like a marquee (no arrows or dots) */
@keyframes trust-marquee { to { transform: translateX(-50%); } }
@media (max-width: 991px) {
  .trust__bar { position: relative; padding: 18px 0; }
  /* soft white fades at both ends so logos slide in and out of the bar */
  .trust__bar::before, .trust__bar::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 56px; pointer-events: none; }
  .trust__bar::before { left: 0; background: linear-gradient(90deg, #FFFFFF 20%, rgba(255,255,255,0)); }
  .trust__bar::after { right: 0; background: linear-gradient(270deg, #FFFFFF 20%, rgba(255,255,255,0)); }
  .trust__badges { flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: trust-marquee 22s linear infinite; }
  .trust__badge, .trust__badge.trust__badge--dup { display: grid; flex: none; padding: 0 28px; }
  .trust__bar:hover .trust__badges { animation-play-state: paused; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .trust__badges { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: 16px 0; }
  .trust__badge.trust__badge--dup { display: none; }
}
.trust__badge { display: grid; place-items: center; }
.trust__badge img { display: block; width: auto; height: 32px; max-width: 180px; object-fit: contain; transition: transform .3s var(--ease); }
.trust__badge:hover img { transform: translateY(-2px) scale(1.04); }
.trust__badge--seal img { height: 58px; }
.trust__badge--upwork img { height: 42px; }

/* ==========================================================================
   Featured work
   ========================================================================== */
.light-section { padding: 100px 24px; background: var(--light); color: var(--ink); }
.white-section { background: var(--white); color: var(--ink); }

.featured__head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 28px; align-items: end; }
.featured__head .title { margin-top: 14px; max-width: 18ch; }
.featured__head p { margin: 0; font-size: 16.5px; line-height: 1.7; color: var(--ink-body); max-width: 48ch; text-wrap: pretty; }
.featured__list { margin-top: 48px; display: grid; gap: 28px; }

.case {
  --case-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  border-radius: 24px;
  background: var(--white);
  padding: clamp(22px, 2.6vw, 38px);
  display: flex; flex-wrap: wrap; flex-direction: row;
  gap: clamp(26px, 3.5vw, 56px);
  align-items: center;
  transition:
    translate .5s var(--case-ease),
    border-color .5s var(--case-ease),
    box-shadow .5s var(--case-ease);
}
.case--reverse { flex-direction: row-reverse; }
/* Faint blue tint that fades in from the top-right corner */
.case::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 70% at 100% 0%, rgba(110,139,255,.10), rgba(110,139,255,0) 60%);
  opacity: 0;
  transition: opacity .5s var(--case-ease);
}
.case:hover, .case:focus-within {
  translate: 0 -6px;
  border-color: rgba(47,73,184,.28);
  box-shadow: 0 36px 70px -42px rgba(47,73,184,.45), 0 0 0 1px rgba(47,73,184,.06);
}
.case:hover::before, .case:focus-within::before { opacity: 1; }
/* Whole card is clickable: the "View Case Study" link stretches over the card */
.featured__list .case { cursor: pointer; }
.case__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 24px; }
/* The button must never be transformed: a transform would make it the containing block of the
   ::after overlay, shrinking the overlay to the button and making single clicks miss the link */
.case .case__link, .case .case__link:hover, .case .case__link:focus-visible { transform: none; translate: none; }
.case:hover .case__link, .case:focus-within .case__link { background: var(--ink-accent); box-shadow: 0 16px 32px -16px rgba(47,73,184,.6); }
.case__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.case__media { flex: 1 1 340px; min-width: min(100%, 300px); border-radius: 18px; overflow: hidden; background: var(--light); }
.case__media img {
  display: block; width: 100%; object-fit: cover; object-position: top;
  transition: transform .9s var(--case-ease);
}
.case:hover .case__media img, .case:focus-within .case__media img { transform: scale(1.045); }
.case__body { flex: 1 1 380px; min-width: min(100%, 300px); }
.case__industry { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-accent); }
.case__title { margin: 14px 0 0; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.16; letter-spacing: -0.03em; font-weight: 600; color: var(--ink); text-wrap: balance; transition: color .5s var(--case-ease); }
.case:hover .case__title, .case:focus-within .case__title { color: var(--ink-accent); }
.case .btn__arrow { display: inline-block; transition: transform .45s var(--case-ease); }
.case:hover .btn__arrow, .case:focus-within .btn__arrow { transform: translateX(4px); }
.case__facts { margin: 22px 0 0; display: grid; gap: 12px; }
.case__fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.case__fact dt { font-size: 15px; color: var(--ink-muted); }
.case__fact dd { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-text); text-wrap: pretty; }
.case__tags { margin: 22px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.case__tags li {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 7px 14px; border-radius: 999px;
  background: var(--light); border: 1px solid #E6EAF1;
  font-size: 13.5px; font-weight: 500; color: var(--ink-text);
}
.case__metrics { margin-top: 24px; padding-top: 24px; border-top: 1px solid #EDF0F6; display: flex; flex-wrap: wrap; gap: 28px 44px; }
.case__metric-value { font-size: clamp(24px, 2.4vw, 32px); font-weight: 700; letter-spacing: -0.04em; color: var(--ink); }
.case__metric-label { margin-top: 4px; font-size: 14.5px; color: var(--ink-muted); }
.case .btn { margin-top: 26px; }

/* ==========================================================================
   About
   ========================================================================== */
.about { padding: 100px 24px 190px; }
.about__ring {
  top: -220px;
  width: min(820px, 120vw); height: 820px;
  opacity: .28;
  border: 1px solid rgba(110,139,255,.28);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 72%);
          mask-image: linear-gradient(180deg, #000, transparent 72%);
}
.about__content { position: relative; max-width: var(--container); margin: 0 auto; text-align: center; }
.tag-pill {
  display: inline-flex; align-items: center;
  padding: 7px 16px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 14px; color: var(--accent);
}
.about__title { margin: 22px auto 0; line-height: 1.1; max-width: 22ch; text-wrap: balance; }
.about__lead { margin: 22px auto 0; font-size: 17.5px; max-width: 68ch; }
.about__pillars { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.about__pillar {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: 12px 24px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 19px; font-style: italic; letter-spacing: -0.01em; color: var(--text);
}
.about__stats { margin: 52px auto 0; width: fit-content; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.stat { padding: 0 clamp(24px, 3.4vw, 46px); text-align: center; border-left: 1px solid transparent; }
.stat + .stat { border-left-color: rgba(255,255,255,.08); }
.stat__value { font-size: clamp(38px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--text); }
.stat__value span { color: var(--accent); }
.stat__label { margin-top: 12px; font-size: 15px; color: var(--muted); }

/* ==========================================================================
   Overlapping CTA card
   ========================================================================== */
.cta-band { position: relative; display: flow-root; padding: 0 24px; background: var(--light); }
.cta-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: var(--container);
  margin: clamp(-120px, -7vw, -70px) auto 0;
  box-shadow: 0 44px 90px -46px rgba(23,32,64,.75);
  border-radius: 28px;
  background: linear-gradient(135deg, #1B2340 0%, #141A2E 46%, #10131C 100%);
  border: 1px solid #2B3450;
  color: var(--white);
  padding: clamp(34px, 4.4vw, 60px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.cta-card__stripes {
  inset: 0; opacity: .16;
  background-image: repeating-linear-gradient(135deg, rgba(150,175,255,.35) 0 1px, transparent 1px 20px);
}
.cta-card__glow {
  right: -120px; top: -120px;
  width: 420px; height: 420px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(110,139,255,.35), rgba(11,13,18,0) 68%);
}
.cta-card__text { position: relative; }
.cta-card__title { margin: 16px 0 0; font-size: clamp(30px, 3vw, 40px); line-height: 1.08; max-width: 18ch; text-wrap: balance; }
.cta-card__text p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.7; color: var(--muted); max-width: 46ch; text-wrap: pretty; }
.cta-card__actions { position: relative; display: flex; flex-direction: column; gap: 14px; align-items: stretch; justify-self: end; }
.cta-card__actions .btn { justify-content: center; padding: 16px 28px; } /* same width (the email button's) and height */
.btn--white {
  gap: 12px;
  padding: 16px 28px;
  background: var(--white);
  color: var(--ink);
  font-weight: 600;
  transition: transform .25s ease, box-shadow .25s ease;
}
.btn--white:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 18px 34px -18px rgba(255,255,255,.5); }

/* ==========================================================================
   Services (accordion)
   ========================================================================== */
.services__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(32px, 5vw, 76px);
  align-items: start;
}
.sticky-col { position: sticky; top: 108px; }
.services__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  background: #E7EBF2; font-size: 14px; color: var(--ink-text);
}
.services__pill .dot { background: var(--ink); }
.services__title { margin-top: 24px; line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; }
.services__intro p { margin: 22px 0 0; font-size: 17.5px; line-height: 1.62; color: var(--ink-text); max-width: 46ch; text-wrap: pretty; }
.services__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.services__actions .btn { justify-content: center; padding: 16px 34px; }

/* Services accordion: each service is a soft white card (no divider lines).
   The open card gets a left accent bar, a blue outline/glow and a blue title. */
.accordion { display: grid; gap: 12px; }
.acc-item {
  --acc-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  padding: 0 clamp(20px, 2.4vw, 30px);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 10px 26px -20px rgba(11,13,18,.28);
  transition: translate .45s var(--acc-ease), box-shadow .45s var(--acc-ease);
}
.acc-item::before {
  content: ""; position: absolute; left: 0; top: 18px; bottom: 18px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--accent), var(--ink-accent));
  transform: scaleY(0); transform-origin: top center;
  transition: transform .5s var(--acc-ease);
}
.acc-item:hover { translate: 0 -2px; box-shadow: 0 1px 2px rgba(11,13,18,.04), 0 18px 34px -22px rgba(11,13,18,.35); }
.acc-item.is-open {
  translate: none;
  box-shadow: 0 0 0 1px rgba(47,73,184,.16), 0 26px 50px -30px rgba(47,73,184,.45);
}
.acc-item.is-open::before { transform: scaleY(1); }
.acc-item.is-open .acc-item__title { color: var(--ink-accent); }
.acc-item__trigger {
  width: 100%;
  background: none; border: 0; cursor: pointer;
  text-align: left; font-family: inherit;
  padding: clamp(14px, 1.7vw, 22px) 0;
  display: flex; align-items: center; gap: 20px;
}
.acc-item__title { flex: 1; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.14; letter-spacing: -0.028em; font-weight: 600; color: var(--ink); transition: color .4s ease; }
.acc-item__icon {
  flex: none;
  width: clamp(36px, 3.1vw, 40px); height: clamp(36px, 3.1vw, 40px); border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: #E7EBF2; color: var(--ink);
  transform: rotate(0deg);
  transition: background .25s ease, color .25s ease, transform .35s var(--ease);
}
.acc-item.is-open .acc-item__icon { background: var(--ink); color: var(--white); transform: rotate(-180deg); }
.acc-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .5s var(--ease), opacity .35s ease;
}
.acc-item.is-open .acc-item__panel { grid-template-rows: 1fr; opacity: 1; }
.acc-item__clip { overflow: hidden; min-height: 0; }
.acc-item__body { padding: 0 0 30px; }
.acc-item__body > p { margin: 0 0 20px; font-size: 16.5px; line-height: 1.65; color: var(--ink-body); max-width: 56ch; text-wrap: pretty; }
.acc-points { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px 32px; }
.acc-points li { display: flex; gap: 12px; }
.acc-points li::before { content: ""; margin-top: 7px; width: 6px; height: 6px; flex: none; border-radius: 99px; background: var(--ink-accent); }
.acc-points strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.018em; color: var(--ink); }
.acc-points span { display: block; margin-top: 5px; font-size: 15.5px; line-height: 1.6; color: var(--ink-body); text-wrap: pretty; }
/* Link from each service panel to its service page */
.acc-item__more { margin-top: 24px; color: var(--ink-accent); font-weight: 600; }
.acc-item__more:hover { color: var(--ink-accent); }

/* ==========================================================================
   Why us
   ========================================================================== */
.section-pad { padding: 100px 24px; }
.why { background: radial-gradient(110% 80% at 15% 0%, #111829 0%, var(--bg) 55%); }
.inner { position: relative; max-width: var(--container); margin: 0 auto; }
.why .title, .industries .title { margin-top: 14px; }
.why__cards { margin-top: 44px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.why-card {
  --why-ease: cubic-bezier(.22, .8, .24, 1);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  padding: 28px 26px;
  display: flex; flex-direction: column;
  min-height: 230px;
  /* The lift uses the separate `translate` property so it composes with the reveal
     animation's `transform` instead of fighting it — no !important needed. */
  transition:
    translate .5s var(--why-ease),
    border-color .5s var(--why-ease),
    box-shadow .5s var(--why-ease);
}
/* Soft blue spotlight from the top-left corner */
.why-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 0% 0%, rgba(110,139,255,.18), rgba(110,139,255,0) 60%);
  opacity: 0;
  transition: opacity .5s var(--why-ease);
}
/* Accent line that sweeps across the top edge */
.why-card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), rgba(169,198,255,.8) 60%, rgba(110,139,255,0));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s var(--why-ease);
}
.why-card:hover, .why-card:focus-within {
  translate: 0 -6px;
  border-color: rgba(110,139,255,.45);
  box-shadow: 0 30px 56px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(110,139,255,.08);
}
.why-card:hover::before, .why-card:focus-within::before { opacity: 1; }
.why-card:hover::after, .why-card:focus-within::after { transform: scaleX(1); }

.why-card__num {
  display: inline-block; align-self: flex-start;
  font-size: clamp(34px, 3.6vw, 46px); font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  background-image: linear-gradient(180deg, var(--accent) 0%, rgba(110,139,255,.25) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: transform .5s var(--why-ease), filter .5s var(--why-ease);
}
.why-card:hover .why-card__num, .why-card:focus-within .why-card__num {
  transform: translateY(-3px);
  filter: drop-shadow(0 8px 18px rgba(110,139,255,.45));
}
.why-card__title { margin: auto 0 0; padding-top: 30px; font-size: 21px; font-weight: 600; letter-spacing: -0.024em; }
.why-card__desc { margin: 10px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted-2); max-width: 32ch; text-wrap: pretty; transition: color .5s var(--why-ease); }
.why-card:hover .why-card__desc, .why-card:focus-within .why-card__desc { color: #B7BECB; }

/* ==========================================================================
   Industries (expanding panels)
   ========================================================================== */
.ind-row { margin-top: 44px; display: flex; gap: 6px; border-radius: 22px; overflow: hidden; background: var(--ink); }
.indp {
  position: relative;
  flex: 1;
  min-width: 120px;
  height: clamp(380px, 46vw, 560px);
  overflow: hidden;
  background: var(--ink);
  color: var(--text-2);
  outline: none;
  transition: flex .65s var(--ease), opacity .4s ease, filter .4s ease;
}
.indp > img {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 760px; max-width: none; height: 100%;
  object-fit: cover; display: block;
  transition: transform .8s var(--ease);
}
/* Thin accent outline on the highlighted panel */
.indp::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(110,139,255,.75);
  opacity: 0; transition: opacity .35s ease;
}
/* Round blue arrow, bottom-right (level with the title); appears on the highlighted panel */
.indp__arrow {
  position: absolute; bottom: 16px; right: 20px; z-index: 3;
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--white);
  box-shadow: 0 12px 26px -10px rgba(110,139,255,.9);
  opacity: 0; transform: translate(-8px, 0) scale(.8);
  transition: opacity .35s ease, transform .45s var(--ease), background .25s ease;
}
.indp__title { transition: padding .35s ease; }
.indp__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8,9,11,.15) 0%, rgba(8,9,11,.35) 52%, rgba(8,9,11,.92) 100%); }
.indp__caption { position: absolute; inset: auto 0 0 0; pointer-events: none; padding: 26px 24px; }
.indp-body { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .4s ease; }
.indp-body p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #D6DBE4; max-width: 34ch; padding-bottom: 16px; text-wrap: pretty; }
.indp__title { margin: 0; font-size: clamp(16px, 1.4vw, 21px); line-height: 1.2; font-weight: 600; letter-spacing: -0.024em; color: var(--white); text-wrap: balance; }
.ind-row:hover .indp { flex: .95; }
.indp:hover, .indp:focus-within { flex: 3.2 !important; }
.indp:hover .indp-body, .indp:focus-within .indp-body { max-height: 220px; opacity: 1; }

/* Hovering (or keyboard-focusing) one industry fades the rest and highlights it */
.ind-row:hover .indp, .ind-row:has(.indp:focus-visible) .indp { opacity: .38; filter: grayscale(.8); }
.ind-row .indp:hover, .ind-row .indp:focus-visible { opacity: 1; filter: none; }
.indp:hover > img, .indp:focus-visible > img { transform: translateX(-50%) scale(1.06); }
.indp:hover::after, .indp:focus-visible::after { opacity: 1; }
.indp:hover .indp__arrow, .indp:focus-visible .indp__arrow { opacity: 1; transform: none; }
.indp:hover .indp__title, .indp:focus-visible .indp__title { padding-right: 56px; } /* keep the title clear of the arrow */
.indp__arrow:hover, .indp:hover .indp__arrow:hover { background: #4A66F0; }

/* ==========================================================================
   Process
   ========================================================================== */
.process { background: radial-gradient(110% 80% at 80% 0%, #101729 0%, var(--bg) 58%); }
.process .title { margin: 18px auto 0; max-width: 20ch; }
.process__lead { margin: 20px auto 0; color: var(--muted-2); max-width: 54ch; }
.steps {
  margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0;
}
.step { position: relative; padding: 0 18px 0 0; }
.step__node { display: flex; align-items: center; gap: 0; }
.step__ring {
  width: 54px; height: 54px; flex: none;
  border-radius: 999px;
  border: 2px solid #242832;
  background: var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 600; color: var(--dim);
  transition: border-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.step.is-active .step__ring { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px rgba(110,139,255,.12); }
.step__line { position: relative; height: 2px; flex: 1; background: #242832; overflow: hidden; }
.step__fill { position: absolute; inset: 0; width: 0%; background: var(--accent); transition: width .5s ease; }
.step__title { margin: 22px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.step__desc { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); max-width: 22ch; text-wrap: pretty; padding-bottom: 26px; }

/* Slider controls (shown at <=1199px, when the six steps no longer fit one row) */
.slider-controls { display: none; margin-top: 14px; align-items: center; justify-content: center; gap: 18px; }
.slider-btn {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, opacity .2s ease;
}
.slider-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.slider-btn:disabled { opacity: .35; cursor: default; }
.slider-dots { display: flex; align-items: center; gap: 8px; }
.slider-dot {
  position: relative;
  width: 8px; height: 8px;
  padding: 0; border: 0;
  border-radius: 99px;
  background: #2A2F3A;
  cursor: pointer;
  transition: width .3s var(--ease), background .3s ease;
}
.slider-dot::before { content: ""; position: absolute; inset: -10px -4px; } /* larger tap target */
.slider-dot.is-active { width: 24px; background: var(--accent); }

/* Light-section variant (case studies) */
.slider-controls--light .slider-btn { border-color: #D5DAE4; background: var(--white); color: var(--ink); }
.slider-controls--light .slider-btn:hover:not(:disabled) { border-color: var(--ink-accent); color: var(--ink-accent); }
.slider-controls--light .slider-dot { background: #C9D1DE; }
.slider-controls--light .slider-dot.is-active { background: var(--ink-accent); }

.process__note {
  margin: 10px auto 0;
  width: fit-content;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  text-align: center;
  gap: 6px 12px;
  padding: 14px 22px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 15px; line-height: 1.5; color: var(--muted);
}
.process__note .dot { width: 8px; height: 8px; }
.process__note strong { color: var(--text); font-weight: 600; }

/* ==========================================================================
   Growth engine (vertical ticker)
   ========================================================================== */
.growth { padding: 86px 0 94px; background: radial-gradient(120% 90% at 50% 100%, #141C33 0%, var(--bg-2) 62%); }
.growth__grid {
  position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.growth__title { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1.06; letter-spacing: -0.042em; font-weight: 600; max-width: 16ch; }
.growth__title em { color: var(--accent); }
.growth__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn--line {
  border: 1px solid #262A33; background: transparent; color: var(--text);
  transition: border-color .2s ease, gap .2s ease;
}
.btn--line:hover { color: var(--text); border-color: var(--accent); gap: 16px; }
.ticker {
  position: relative;
  container-type: inline-size;  /* lets the phrases size to the column width */
  height: clamp(280px, 34vw, 420px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 26%, #000 74%, transparent);
}
.ticker__glow {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 84px; transform: translateY(-50%);
  background: radial-gradient(60% 100% at 50% 50%, rgba(110,139,255,.22), rgba(110,139,255,0) 70%);
  pointer-events: none;
}
.ticker__track { display: flex; flex-direction: column; gap: clamp(10px, 1.4vw, 20px); animation: sl-vscroll 26s linear infinite; }
/* Capped at 7.8% of the column so the longest phrase ("Missed revenue opportunities") never clips */
.ticker__track span { display: block; font-size: min(clamp(28px, 3.6vw, 52px), 7.8cqi); line-height: 1.16; font-weight: 600; letter-spacing: -0.04em; color: var(--text-2); white-space: nowrap; }

/* ==========================================================================
   Shopify Plus
   ========================================================================== */
.plus { padding: 100px 24px; }
.plus__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.plus .title { margin-top: 18px; line-height: 1.08; letter-spacing: -0.035em; max-width: 18ch; }
.plus__text p { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); max-width: 58ch; text-wrap: pretty; }
.plus__text p + p { margin-top: 16px; }
.plus__ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.plus__badge { display: flex; justify-content: center; }
.plus__badge img { width: 100%; max-width: 520px; height: auto; display: block; }

/* ==========================================================================
   Ready CTA strip
   ========================================================================== */
.ready { padding: clamp(52px, 5.5vw, 76px) 24px; background: var(--bg-2); }
.ready__glow {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(900px, 130vw); height: 420px;
  background: radial-gradient(circle at 50% 50%, rgba(110,139,255,.26), rgba(10,12,15,0) 68%);
}
.ready__grid {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.ready__eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.ready__title { margin: 18px 0 0; font-size: clamp(30px, 3.1vw, 40px); letter-spacing: -0.04em; max-width: 20ch; color: var(--white); text-wrap: balance; }
.ready__ctas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; justify-self: end; }
.ready__ctas .btn--accent .btn__arrow { opacity: .85; }

/* ==========================================================================
   Migrate
   ========================================================================== */
.migrate { background: radial-gradient(120% 90% at 50% 0%, #131A2E 0%, var(--bg) 62%); }
.migrate__grid {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.migrate__title { margin-top: 20px; line-height: 1.04; letter-spacing: -0.04em; max-width: 14ch; }
.migrate__lead { margin: 22px 0 0; font-size: 17.5px; max-width: 48ch; }
.migrate__text .btn { margin-top: 30px; }
.migrate__panel { border: 1px solid var(--line); border-radius: 22px; background: var(--surface-2); padding: clamp(20px, 2.6vw, 32px); }
.platforms { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.platform {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface);
  font-size: 15.5px; color: #E7EAEF;
  transition: border-color .25s ease, background .25s ease;
}
.platform:hover { border-color: #3A4560; background: #12161F; }
.platform__mark {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  background: var(--tint); color: var(--ink-c);
}
.migrate__divider { margin: 24px 0; display: flex; align-items: center; gap: 14px; }
.migrate__divider::before, .migrate__divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.migrate__divider span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.migrate__target {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 22px; border-radius: 14px;
  border: 1px solid #2E3854;
  background: linear-gradient(100deg, rgba(110,139,255,.16), rgba(110,139,255,.04));
}
.migrate__target-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 9px; }
.migrate__target-mark svg { display: block; }
.migrate__target-name { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--white); }
.migrate__note { margin: 18px 0 0; display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 14.5px; color: #8FD9B6; }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials { padding: 100px 0; }
.testimonials__head { max-width: var(--container); margin: 0 auto 44px; padding: 0 24px; text-align: center; }
.testimonials__title { line-height: 1.05; letter-spacing: -0.04em; font-weight: 700; }
.testimonials__title span { color: var(--ink-accent); }
.testimonials__head p { margin: 16px auto 0; font-size: 18px; line-height: 1.6; color: var(--ink-body); max-width: 52ch; }
.rating { margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 15px; color: var(--ink-text); }
.rating__stars { color: #F5A623; letter-spacing: 2px; }
.testimonials .marquee__track { gap: 20px; padding: 6px 24px; animation: sl-marquee 52s linear infinite; }
.testimonials .marquee__track--rev { padding: 14px 24px 6px; animation: sl-marquee-rev 58s linear infinite; }
.quote-card {
  margin: 0;
  width: min(430px, 82vw);
  border: 1px solid #E4E8EF;
  border-radius: 16px;
  background: var(--white);
  padding: 26px;
  display: flex; flex-direction: column; gap: 18px;
  box-shadow: 0 20px 40px -38px rgba(11,13,18,.5);
}
.quote-card blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-text); text-wrap: pretty; }
.quote-card figcaption { margin-top: auto; display: flex; align-items: center; gap: 12px; }
.quote-card img { width: 38px; height: 38px; border-radius: 99px; object-fit: cover; flex: none; border: 1px solid #E4E8EF; }
.quote-card figcaption span { font-size: 14px; color: #6B7283; }
.quote-card figcaption strong { color: var(--ink); font-weight: 500; }
/* Company-based credit: round initial badge + company name, person and role underneath */
.quote-card figcaption .quote-card__badge {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #6E8BFF, #2F49B8); color: var(--white);
  font-size: 17px; font-weight: 700; line-height: 1; box-shadow: 0 6px 14px -6px rgba(47,73,184,.6);
}
.quote-card figcaption .quote-card__who { display: grid; gap: 2px; line-height: 1.3; }
.quote-card__who strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.quote-card__who small { font-size: 13px; color: #6B7283; }

/* ==========================================================================
   Integrations
   ========================================================================== */
.integrations { padding: 100px 0; }
.integrations__head { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 24px; text-align: center; }
.integrations__head .title { margin: 14px auto 0; max-width: 20ch; }
.integrations__head .lead { margin: 18px auto 0; max-width: 62ch; }
.integrations .marquee { margin-top: 46px; }
.integrations .marquee__track { gap: 16px; padding: 4px 24px; animation: sl-marquee 44s linear infinite; }
.integrations .marquee__track--rev { padding: 16px 24px 4px; animation: sl-marquee-rev 50s linear infinite; }
.integ {
  display: flex; align-items: center; gap: 14px; flex: 0 0 auto;
  padding: 18px 26px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--surface-2);
}
.integ__mark {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; letter-spacing: -0.02em;
  background: var(--tint); color: var(--ink-c);
}
.integ__text { text-align: left; }
.integ__name { display: block; font-size: 16px; font-weight: 500; color: var(--text); white-space: nowrap; }
.integ__kind { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.integrations__foot {
  max-width: var(--container); margin: 34px auto 0; padding: 0 24px;
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center;
  font-size: 15px; color: var(--muted);
}
.text-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-weight: 500; transition: gap .2s ease; }
.text-link:hover { color: var(--accent); gap: 14px; }

/* ==========================================================================
   Insights (blog cards)
   ========================================================================== */
.insights { padding: 96px 24px; }
.insights__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.insights__head .title { margin-top: 14px; }
.posts { margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.post-card {
  --post-ease: cubic-bezier(.22, .8, .24, 1);
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  min-height: 340px; padding: 22px;
  border-radius: 18px; border: 1px solid #E4E8EF;
  background: #F7F9FC;
  color: var(--ink);
  overflow: hidden; position: relative; isolation: isolate;
  transition:
    translate .5s var(--post-ease),
    border-color .5s var(--post-ease),
    box-shadow .5s var(--post-ease);
}
.post-card--dark { background: var(--ink); }
.post-card:hover, .post-card:focus-visible {
  color: var(--ink);
  translate: 0 -6px;
  border-color: rgba(110,139,255,.55);
  box-shadow: 0 34px 60px -34px rgba(20,30,72,.6), 0 0 0 1px rgba(110,139,255,.12);
}
/* Round "read" arrow that fades in at the bottom-right */
.post-card::after {
  content: ""; position: absolute; right: 22px; bottom: 22px; z-index: 3;
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center;
  box-shadow: 0 10px 24px -8px rgba(110,139,255,.8);
  opacity: 0; transform: translate(-8px, 8px) scale(.8);
  transition: opacity .4s var(--post-ease), transform .5s var(--post-ease);
}
.post-card:hover::after, .post-card:focus-visible::after { opacity: 1; transform: none; }
.post-meta { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 14px; font-size: 14px; color: var(--white); }
.post-meta time { opacity: .75; transition: opacity .5s var(--post-ease); }
.post-card:hover .post-meta time, .post-card:focus-visible .post-meta time { opacity: 1; }
.post-title {
  position: relative; z-index: 2;
  padding-right: 52px; /* keeps the title clear of the read arrow */
  font-size: clamp(19px, 2vw, 23px); line-height: 1.24; letter-spacing: -0.024em; font-weight: 600;
  color: var(--white); max-width: calc(22ch + 52px); text-wrap: pretty;
  transition: transform .5s var(--post-ease);
}
.post-card:hover .post-title, .post-card:focus-visible .post-title { transform: translateY(-4px); }
/* No category/date row any more: keep the title at the bottom of the card */
.post-card .post-title { margin-top: auto; }
.post-img { position: absolute; inset: 0; z-index: 1; transform: scale(1); transition: transform .9s var(--post-ease); }
.post-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.post-img__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,72,.78) 0%, rgba(14,20,48,.7) 40%, rgba(8,9,11,.97) 100%); transition: opacity .6s var(--post-ease); }
.post-card:hover .post-img, .post-card:focus-visible .post-img { transform: scale(1.06); }
.post-card:hover .post-img__shade, .post-card:focus-visible .post-img__shade { opacity: .55; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { padding: 92px 24px; background: var(--surface-2); }
.faq-grid {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(270px, 330px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px); align-items: start;
}
.faq .title { margin-top: 18px; line-height: 1.08; letter-spacing: -0.035em; max-width: 14ch; }
.faq-cats { margin-top: 30px; display: grid; gap: 8px; }
.faq-cat {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 15px 18px 15px 20px;
  border-radius: 14px;
  border: 1px solid #15181E;
  background: transparent;
  box-shadow: none;
  color: var(--muted-2);
  font-family: inherit; font-size: 15.5px; font-weight: 500; letter-spacing: -0.012em;
  text-align: left; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s ease, color .3s ease, box-shadow .3s ease;
}
.faq-cat__bar {
  position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 2px; height: 0; border-radius: 99px;
  background: transparent;
  transition: height .3s ease, background .3s ease;
}
.faq-cat__label { flex: 1; }
.faq-cat__arrow { font-size: 15px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.faq-cat.is-active {
  background: #12151B;
  border-color: #39415A;
  box-shadow: 0 14px 30px -18px rgba(110,139,255,.55), inset 0 1px 0 rgba(255,255,255,.04);
  color: var(--text);
}
.faq-cat.is-active .faq-cat__bar { height: 22px; background: var(--accent); }
.faq-cat.is-active .faq-cat__arrow { opacity: 1; transform: translateX(0); }
.faq-cat:hover { border-color: #2A2F3A; color: var(--text); }

.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item[hidden] { display: none; }
.faq-item__q { margin: 0; font: inherit; }
.faq-item__trigger {
  width: 100%;
  display: flex; align-items: center; gap: 20px;
  padding: 22px 0;
  background: none; border: 0; cursor: pointer;
  text-align: left; font-family: inherit;
  font-size: clamp(16.5px, 1.5vw, 19px); font-weight: 500; letter-spacing: -0.018em;
  color: var(--text);
}
.faq-item__trigger > span:first-child { flex: 1; }
.faq-item__icon { font-size: 20px; line-height: 1; color: var(--dim); transform: rotate(0deg); transition: transform .3s ease, color .3s ease; }
.faq-item.is-open .faq-item__icon { color: var(--accent); transform: rotate(45deg); }
.faq-item__panel { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .4s var(--ease), opacity .3s ease; }
.faq-item.is-open .faq-item__panel { max-height: 320px; opacity: 1; }
.faq-item__panel p { margin: 0 0 24px; padding-right: 40px; font-size: 16px; line-height: 1.7; color: var(--muted); max-width: 62ch; }

/* ==========================================================================
   Contact
   ========================================================================== */
/* Field errors take no space: every error row is always in the layout at zero height, and
   the message overflows into the gap under its field. The form (and the pop-up) keeps the
   same height when validation messages appear. The form's 6px gap is split 3px either side
   of the error row, so the spacing between fields is unchanged. */
.field-error {
  display: block !important; visibility: hidden;
  position: relative; z-index: 1;
  height: 0; margin: 0; overflow: visible;
  font-size: 12px; line-height: 14px; color: #d93025;
  pointer-events: none;
}
.field-error:not(:empty) { visibility: visible; }
.field[aria-invalid="true"] { border-bottom-color: #d93025; }
.contact { position: relative; padding: clamp(72px, 9vw, 112px) 24px; overflow: hidden; }
.contact-grid {
  max-width: var(--container); margin: 0 auto; position: relative;
  display: grid;
  grid-template-columns: minmax(240px, .85fr) minmax(320px, 1.3fr) minmax(220px, .85fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
}
.contact__intro { align-self: start; }
.contact .title { margin-top: 18px; line-height: 1.05; max-width: 16ch; }
.contact__intro p { margin: 22px 0 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); max-width: 42ch; text-wrap: pretty; }

.contact-form {
  border: 1px solid var(--ink-line);
  border-radius: 22px;
  background: var(--white);
  box-shadow: 0 30px 70px -40px rgba(11,13,18,.35), 0 4px 14px -8px rgba(11,13,18,.12);
  padding: clamp(26px, 3vw, 38px);
  display: grid; gap: 3px;
}
.contact-form__head { display: flex; align-items: center; gap: 12px; margin-bottom: 21px; }
.contact-form__icon {
  width: 36px; height: 36px; flex: none; border-radius: 10px;
  background: #EEF1F9; color: var(--ink-accent);
  display: flex; align-items: center; justify-content: center;
}
.contact-form__title { margin: 0; font-size: clamp(18px, 1.8vw, 21px); line-height: 1.25; font-weight: 600; letter-spacing: -0.026em; color: var(--ink); }
.field {
  width: 100%;
  padding: 14px 2px;
  border: 0; border-bottom: 1px solid var(--ink-line);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit; font-size: 16px;
  outline: none;
  transition: border-color .3s ease;
}
.field:focus { border-color: var(--ink-accent); }
select.field {
  -webkit-appearance: none;
          appearance: none;
  height: 50px; /* matches the design (Chrome's native select height) */
  padding-right: 28px;
  cursor: pointer;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230B0D12' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center;
}
input.field, textarea.field { -webkit-appearance: none; appearance: none; }
textarea.field { resize: vertical; line-height: 1.6; }
.contact-form__submit {
  margin-top: 25px;
  padding: 16px 20px;
  border-radius: 999px; border: 0;
  background: var(--ink); color: var(--white);
  font-family: inherit; font-size: 15.5px; font-weight: 600;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-form__submit:hover { background: var(--ink-accent); transform: translateY(-2px); box-shadow: 0 16px 32px -16px rgba(47,73,184,.6); }

.contact__details { display: grid; gap: 34px; align-content: end; }
.contact__details h3 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.022em; color: var(--ink); }
.contact__details p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-body); }
.contact__link { display: inline-block; margin-top: 6px; font-size: 16px; color: var(--ink-accent); transition: opacity .25s ease; }
.contact__link:hover { color: var(--ink-accent); opacity: .7; }
.contact__phone { display: inline-flex; align-items: center; gap: 9px; margin-top: 6px; font-size: 16px; font-weight: 500; color: var(--ink); transition: color .25s ease; }
.contact__phone:hover { color: var(--ink-accent); }

/* ==========================================================================
   Footer
   ========================================================================== */
   .newsletter__error {
    position: absolute;
    display: none;
    left: 10px;
    top: 100%;
    margin: 0 !important;
    padding: 0 !important;
    color: #d93025;
    font-size: 16px;
    line-height: 1.4;
}
.site-footer { position: relative; background: var(--bg); border-top: 1px solid var(--rule); padding: 0 24px 40px; }
.site-footer__bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); }
.footer-cols {
  max-width: var(--container); margin: 0 auto; padding: 70px 0 48px;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 40px 28px;
}
.footer-heading { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.footer-heading--spaced { margin-top: 30px; }

/* Footer accordion: above 767px the trigger is plain heading text and panels are always open */
.footer-acc__trigger {
  display: inline; padding: 0; margin: 0; border: 0; background: none;
  font: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; color: inherit;
  text-align: inherit; cursor: default;
}
.footer-acc__trigger:disabled { opacity: 1; color: inherit; }
.footer-acc__icon { display: none; }
.footer-acc__panel { display: grid; grid-template-rows: 1fr; }
.footer-acc__inner { min-height: 0; }
.footer-links { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; font-size: 15.5px; }
.footer-links a, .footer-col a.footer-link { color: var(--text-2); }
.footer-links a { display: block; }
.footer-col address { margin: 20px 0 0; font-style: normal; font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.footer-link { display: inline-block; margin-top: 18px; font-size: 15.5px; }
.socials { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.social {
  width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s ease, color .2s ease;
}
.social:hover { border-color: var(--accent); color: var(--white); }
.footer-phone { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 17px; font-weight: 500; color: var(--text); }
.footer-phone:hover { color: var(--text); }
.footer-phone__icon {
  width: 32px; height: 32px; flex: none; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--accent);
  display: flex; align-items: center; justify-content: center;
}

.footer-mid {
  max-width: var(--container); margin: 0 auto; padding-top: 40px;
  border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 32px; align-items: center;
}
.footer-mid__logo { height: 42px; width: auto; display: block; }
.newsletter { justify-self: start; width: 100%; max-width: 480px; position: relative;}
.newsletter__label { font-size: 17px; color: var(--text); }
.newsletter__form {
  margin-top: 14px;
  display: flex; gap: 8px;
  padding: 7px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--surface-2);
}
.newsletter__form input { flex: 1; min-width: 0; padding: 12px 18px; border: 0; background: transparent; color: var(--text); font-size: 15px; outline: none; }
.newsletter__form button {
  padding: 12px 24px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--white);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: transform .2s ease;
}
.newsletter__form button:hover { transform: translateY(-1px); }

.footer-bottom { max-width: var(--container); margin: 40px auto 0; text-align: center; }
.footer-bottom p { margin: 0 auto; font-size: 14px; line-height: 1.7; color: var(--dim); max-width: 100ch; }
.footer-legal { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-size: 14px; }
.footer-legal a { color: var(--muted-2); }

/* ==========================================================================
   Floating contact buttons
   ========================================================================== */
.fab-stack { position: fixed; right: 32px; bottom: 32px; z-index: 95; display: flex; flex-direction: column; gap: 12px; }
.fab {
  position: relative; overflow: hidden;
  width: 58px; height: 58px; border-radius: 999px;
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s ease;
}
.fab:hover { color: var(--white); transform: translateY(-3px); }
.fab svg { position: relative; }
.fab__stripes { position: absolute; inset: 0; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 6px, rgba(255,255,255,0) 6px 12px); }
.fab--wa { background: var(--whatsapp); box-shadow: 0 16px 34px -12px rgba(37,211,102,.75); }
.fab--call { background: var(--accent); box-shadow: 0 16px 34px -12px rgba(110,139,255,.8); }
.fab--mail {
  overflow: visible;
  border: 1px solid var(--line-3);
  background: rgba(12,14,17,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text);
  transition: border-color .2s ease, transform .2s ease;
}
.fab--mail:hover { color: var(--text); border-color: var(--dim); }

/* ---------- Contact launcher (speed dial) — desktop ----------
   One pulsing button + cursive title; click reveals WhatsApp / Call / Email with labels.
   Below 991px it falls back to three separate round buttons (see Responsive). */
@keyframes fab-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes fab-glow { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } }
@keyframes fab-online { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(34,197,94,0); } }
/* One 8s cycle: the icon wiggles as the cursive title fades in, holds, then fades out */
@keyframes fab-nudge {
  0%, 15%, 100% { transform: rotate(0) scale(1); }
  3% { transform: rotate(-14deg) scale(1.12); }
  6% { transform: rotate(12deg) scale(1.12); }
  9% { transform: rotate(-8deg) scale(1.06); }
  12% { transform: rotate(4deg) scale(1.02); }
}
/* Whole-button shake at the start of each cycle. Uses the individual translate/rotate
   properties so it composes with the hover transform instead of overriding it. */
@keyframes fab-shake {
  0%, 14%, 100% { translate: 0 0; rotate: 0deg; }
  2%  { translate: -4px 0; rotate: -9deg; }
  4%  { translate: 4px 0;  rotate: 9deg; }
  6%  { translate: -3px 0; rotate: -7deg; }
  8%  { translate: 3px 0;  rotate: 5deg; }
  10% { translate: -2px 0; rotate: -3deg; }
  12% { translate: 1px 0;  rotate: 2deg; }
}
@keyframes fab-title {
  0% { opacity: 0; transform: translateY(8px) rotate(-5deg) scale(.96); }
  6%, 46% { opacity: 1; transform: translateY(0) rotate(-5deg) scale(1); }
  54%, 100% { opacity: 0; transform: translateY(-6px) rotate(-5deg) scale(.98); }
}

/* The wrapper lets clicks pass through; only the button and (open) options catch them.
   Options sit out of flow above the button, so the closed launcher only occupies the button itself. */
.fab-dial { align-items: flex-end; pointer-events: none; }
.fab-dial__options {
  position: absolute; right: 0; bottom: calc(100% + 14px);
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.fab-dial__option {
  display: flex; align-items: center; gap: 12px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.92); transform-origin: right center;
  transition: opacity .22s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.fab-dial.is-open .fab-dial__option { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.fab-dial.is-open .fab-dial__option:nth-last-child(2) { transition-delay: .05s; }
.fab-dial.is-open .fab-dial__option:nth-last-child(3) { transition-delay: .1s; }
.fab-dial__option:hover .fab { transform: translateY(-3px); }
.fab-dial__label {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-3);
  background: rgba(12,14,17,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 14px 30px -16px rgba(0,0,0,.7);
  transition: border-color .2s ease;
}
.fab-dial__option:hover .fab-dial__label { border-color: var(--accent); }

.fab-dial__main { position: relative; display: flex; }
.fab-dial__toggle { pointer-events: auto; }
.fab-dial__toggle {
  position: relative;
  width: 64px; height: 64px;
  border: 0; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #9DB2FF 0%, var(--accent) 45%, #4A66F0 100%);
  color: var(--white);
  box-shadow:
    0 0 0 5px rgba(110,139,255,.18),
    0 18px 40px -10px rgba(110,139,255,.95),
    inset 0 1px 0 rgba(255,255,255,.35);
  cursor: pointer;
  transition: transform .2s ease, background .25s ease, box-shadow .25s ease;
  animation: fab-shake 8s ease-in-out 2.5s infinite;
}
.fab-dial.is-open .fab-dial__toggle { animation: none; }
.fab-dial__toggle:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 0 0 7px rgba(110,139,255,.24), 0 22px 44px -10px rgba(110,139,255,1), inset 0 1px 0 rgba(255,255,255,.35); }
/* Soft breathing glow behind the button */
.fab-dial__main::before {
  content: ""; position: absolute; inset: -14px; border-radius: 999px;
  background: radial-gradient(circle, rgba(110,139,255,.55), rgba(110,139,255,0) 70%);
  pointer-events: none;
  animation: fab-glow 2.6s ease-in-out infinite;
}
.fab-dial.is-open .fab-dial__main::before { animation: none; opacity: 0; }
/* Green "we're online" dot */
.fab-dial__badge {
  position: absolute; top: 3px; right: 3px; z-index: 1;
  width: 14px; height: 14px; border-radius: 999px;
  background: #22C55E; border: 2px solid var(--white);
  animation: fab-online 2s ease-out infinite;
}
.fab-dial.is-open .fab-dial__badge { opacity: 0; animation: none; }
.fab-dial__icon--chat { animation: fab-nudge 8s ease-in-out 2.5s infinite; }
.fab-dial__toggle .fab__stripes { border-radius: inherit; }
.fab-dial__toggle::before,
.fab-dial__toggle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: 2px solid var(--accent); pointer-events: none;
  animation: fab-pulse 2.6s ease-out infinite;
}
.fab-dial__toggle::after { animation-delay: 1.3s; }
.fab-dial.is-open .fab-dial__toggle { background: var(--ink); }
.fab-dial.is-open .fab-dial__toggle::before,
.fab-dial.is-open .fab-dial__toggle::after { animation: none; opacity: 0; }
.fab-dial__icon { position: relative; transition: transform .3s var(--ease), opacity .2s ease; }
.fab-dial__icon--close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.fab-dial.is-open .fab-dial__icon--chat { opacity: 0; transform: rotate(90deg); animation: none; }
.fab-dial.is-open .fab-dial__icon--close { opacity: 1; transform: none; }

/* Cursive title above the button, shown for ~3.5s of every 8s */
.fab-dial__title {
  position: absolute; right: 6px; bottom: calc(100% + 8px);
  display: flex; flex-direction: column; align-items: flex-end;
  font-family: var(--font-script); font-size: 25px; font-weight: 700; line-height: 1;
  white-space: nowrap; pointer-events: none;
  transform-origin: bottom right;
  opacity: 0;
  animation: fab-title 8s ease-in-out 2.5s infinite;
}
.fab-dial__title-text {
  padding: 5px 14px 7px;
  border-radius: 999px;
  border: 1px solid rgba(110,139,255,.4);
  background: rgba(8,9,11,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #B9CCFF;
  box-shadow: 0 12px 28px -14px rgba(110,139,255,.7);
}
.fab-dial__title-arrow { margin: 2px 16px 0 0; color: var(--accent); filter: drop-shadow(0 1px 2px rgba(8,9,11,.5)); }
.fab-dial.is-open .fab-dial__title { animation: none; opacity: 0; }

/* ==========================================================================
   Mobile menu (toggle + panel are hidden above 991px)
   ========================================================================== */
.menu-toggle {
  display: none;
  position: relative;
  width: 42px; height: 42px;
  flex: none;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(169,198,255,.45);
  background: linear-gradient(135deg, var(--accent), var(--ink-accent));
  color: var(--white);
  box-shadow: 0 0 0 4px rgba(110,139,255,.16), 0 8px 20px -8px rgba(110,139,255,.75);
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.menu-toggle:hover { border-color: rgba(169,198,255,.8); box-shadow: 0 0 0 5px rgba(110,139,255,.22), 0 10px 24px -8px rgba(110,139,255,.85); }
/* Bars use whole-pixel sizes and offsets from the centre (the button is always an even 42/38px),
   so they stay crisp on phone screens instead of blurring or merging at fractional positions */
.menu-toggle__bar {
  position: absolute;
  left: calc(50% - 8px); width: 16px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.menu-toggle__bar:first-child { top: calc(50% - 4px); }
.menu-toggle__bar:last-child { top: calc(50% + 2px); }
.is-menu-open .menu-toggle__bar:first-child { top: calc(50% - 1px); transform: rotate(45deg); }
.is-menu-open .menu-toggle__bar:last-child { top: calc(50% - 1px); transform: rotate(-45deg); }

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 89;
  padding: 96px 24px 32px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(8,9,11,.97);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  flex-direction: column;
  gap: 32px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mobile-menu__nav { display: grid; }
.mobile-menu__nav > a, .mm-group__toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 22px; font-weight: 600; letter-spacing: -0.03em;
  color: var(--text);
}
.mobile-menu__nav > a span { font-size: 18px; color: var(--dim); transition: transform .2s ease, color .2s ease; }
.mobile-menu__nav > a:hover span { color: var(--accent); transform: translateX(3px); }

/* Services: expandable list of all six services inside the mobile menu */
.mm-group__toggle {
  width: 100%;
  background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: inherit; text-align: left; cursor: pointer;
}
.mm-group__chevron { color: var(--dim); transition: transform .35s var(--ease), color .2s ease; }
.mm-group.is-open .mm-group__chevron { transform: rotate(180deg); color: var(--accent); }
.mm-group__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--ease);
}
.mm-group.is-open .mm-group__panel { grid-template-rows: 1fr; }
.mm-group__inner {
  min-height: 0; overflow: hidden;
  display: grid; gap: 2px;
  visibility: hidden; transition: visibility 0s linear .4s;
}
.mm-group.is-open .mm-group__inner { visibility: visible; transition-delay: 0s; padding: 10px 0 14px; border-bottom: 1px solid var(--rule); }
.mm-sub {
  display: flex; gap: 14px;
  padding: 12px;
  border-radius: 12px;
  color: var(--text);
  transition: background .2s ease;
}
.mm-sub:hover, .mm-sub:focus-visible { color: var(--text); background: #14171D; }
.mm-sub__icon { flex: none; margin-top: 2px; color: var(--accent); }
.mm-sub__text { display: grid; gap: 4px; }
.mm-sub__title { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
.mm-sub__desc { font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }
/* Title-only sub-items (Industries) sit centred on their icon */
.mm-sub:not(:has(.mm-sub__desc)) { align-items: center; }
.mm-sub:not(:has(.mm-sub__desc)) .mm-sub__icon { margin-top: 0; }
.mobile-menu__foot { display: grid; gap: 14px; justify-items: start; }
.mobile-menu__cta { width: 100%; justify-content: center; margin-bottom: 6px; }
.mobile-menu__meta { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--muted); }

.site-header.is-menu-open { background: rgba(8,9,11,.97); border-bottom-color: var(--rule); }
html.menu-open { overflow: hidden; }
.fab-stack { transition: opacity .25s ease; }
html.menu-open .fab-stack { opacity: 0; pointer-events: none; }

/* Small layout guards */
.faq-item__trigger > span:first-child { min-width: 0; }
.faq-item__icon { flex: none; }
.platform { min-width: 0; }
.contact__link { overflow-wrap: anywhere; }

img.blog-inner-img { width: 100%; margin: 0 0 12px; border-radius: 10px; object-fit: cover;}
img.blog-inner-img+h3 { margin-top: 0; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { animation: none; }
  .fab-dial__toggle::before, .fab-dial__toggle::after,
  .fab-dial__main::before, .fab-dial__badge, .fab-dial__icon--chat, .fab-dial__toggle { animation: none; }
  .fab-dial__toggle::before, .fab-dial__toggle::after { opacity: 0; }
  .fab-dial__title { animation: none; opacity: 1; transform: rotate(-5deg); }
  .btn--glow::before { animation: none; --glow-angle: 300deg; }
  .wa-mini::before, .wa-mini svg { animation: none; }
  .acc-item:hover,
  .why-card:hover, .why-card:focus-within,
  .case:hover, .case:focus-within,
  .post-card:hover, .post-card:focus-visible { translate: none; }
  .btn--glow::after { animation: none; opacity: .6; }
}


/* ==========================================================================
   Responsive
   Breakpoints: 1199 · 991 · 767 · 575 · 480
   ========================================================================== */

/* ---------- ≤1199px: large tablets / small laptops ---------- */
@media (max-width: 1199px) {
  /* Process: six steps no longer fit one row, so they become a swipe-only row (no arrows/dots).
     A fractional --per-view lets the next step peek in under a right-edge fade;
     the fade is removed once the row is scrolled to the end. */
  .steps {
    --per-view: 4.3;
    --fade: 90px;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  }
  .steps-slider.is-at-end .steps { -webkit-mask-image: none; mask-image: none; }
  .steps::-webkit-scrollbar { display: none; }
  [data-slider-track].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
  .step { flex: 0 0 calc(100% / var(--per-view)); scroll-snap-align: start; }
  .slider-controls { display: flex; }
  .posts-slider .slider-controls { display: none; } /* blog stays a grid until 991px */
  .ind-slider .slider-controls { display: none; }   /* industries stay a grid until 575px */
  .process__note { margin-top: 18px; }

  /* Case studies: one card per slide */
  .featured__list {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-top: 8px;               /* room for the hover lift */
    padding-bottom: 28px;           /* room for the card shadow */
    margin-top: 40px;               /* 48px minus the lift room, so spacing is unchanged */
    margin-bottom: -14px;
    cursor: grab;
  }
  .featured__list::-webkit-scrollbar { display: none; }
  .featured__list > .case { flex: 0 0 100%; scroll-snap-align: start; }

  /* Why us: swipe-only row; the next card peeks in under a right-edge fade (removed at the end) */
  .why__cards {
    --per-view: 3.3;
    --fade: 90px;
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    cursor: grab;
    margin-top: 36px;               /* 44px minus the lift room */
    padding: 8px 0 28px;            /* room for the hover lift and shadow */
    margin-bottom: -14px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  }
  .why__cards::-webkit-scrollbar { display: none; }
  .why-slider.is-at-end .why__cards { -webkit-mask-image: none; mask-image: none; }
  .why__cards > .why-card {
    flex: 0 0 calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view));
    scroll-snap-align: start;
    animation: none; /* scroll-reveal is unreliable inside a horizontal scroller */
  }

  /* Header WhatsApp: icon only */
  .wa-mini { width: 42px; padding: 0; }
  .wa-mini__number, .wa-mini__label { display: none; }

  /* Footer: 3 x 2 grid (768–1199px) */
  .footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Logo + newsletter row and copyright: side padding keeps them clear of the fixed
     WhatsApp / call / email buttons (58px wide, 18px from the edge) */
  .footer-mid, .footer-bottom { padding-left: 88px; padding-right: 88px; } /* launcher: 64px wide, 32px from the edge */
  .footer-mid__logo { width: min(100%, 254px); height: auto; }
}

/* ---------- ≤991px: tablets ---------- */
@media (max-width: 991px) {
  /* Growth heading follows the shared heading scale (≈30px here) */
  .growth__title { font-size: var(--h2); }

  /* Contact launcher: slightly smaller and closer to the edge */
  .fab-stack { right: 20px; bottom: 20px; }
  .fab-dial__toggle { width: 60px; height: 60px; }
  .footer-mid, .footer-bottom { padding-left: 72px; padding-right: 72px; } /* launcher: 60px wide, 20px from the edge */

  /* Header: nav links move into the mobile menu; two columns (logo | actions) */
  .site-header__inner { grid-template-columns: 1fr auto; }
  .site-header__actions { grid-column: 2; }
  .site-nav { display: none; }
  
  .menu-toggle { display: block; }
  .mobile-menu { display: flex; }

  .steps { --per-view: 3.3; }
  .why__cards { --per-view: 2.3; }

  /* Industries: 2-column grid; no hover on touch, so descriptions show up front */
  .ind-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .indp, .ind-row:hover .indp, .indp:hover, .indp:focus-within { flex: none !important; min-width: 0; height: 320px; }
  .indp-body { max-height: none; opacity: 1; }
  .indp > img { width: 100%; }
  .indp__arrow { opacity: 1; transform: none; width: 38px; height: 38px; bottom: 18px; right: 16px; }
  .indp__title { padding-right: 48px; }

  /* Case studies: no Challenge/Solution rows; image left, content right */
  .case, .case--reverse { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: clamp(20px, 3vw, 32px); }
  .case__media { flex: 0 0 42%; min-width: 0; }
  .case__media img { height: 100%; min-height: 260px; aspect-ratio: auto; }
  .case__body { flex: 1 1 auto; min-width: 0; align-self: center; }
  .case__facts { display: none; }
  .case__tags { margin-top: 18px; }

  /* Footer: logo and newsletter centred on one column */
  .footer-mid { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .newsletter { justify-self: center; }

  /* Migrate: single column (text above the platform panel) */
  .migrate__grid { grid-template-columns: minmax(0, 1fr); }
  .migrate__title, .migrate__lead { max-width: 60ch; }
  .platforms { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Blog: three cards no longer fit a row, so they become a slider */
  .posts {
    --per-view: 2;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-top: 28px;
    padding: 8px 0 28px;            /* room for the hover lift and shadow */
    margin-bottom: -14px;
    cursor: grab;
  }
  .posts::-webkit-scrollbar { display: none; }
  .posts-slider .slider-controls { display: flex; }
  .posts > .post-card { flex: 0 0 calc((100% - (var(--per-view) - 1) * 20px) / var(--per-view)); scroll-snap-align: start; }

  /* FAQ: smaller category tabs and a narrower left column */
  .faq-grid { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr); }
  .faq-cats { margin-top: 24px; gap: 6px; }
  .faq-cat { gap: 10px; padding: 11px 14px 11px 16px; border-radius: 12px; font-size: 14px; }
  .faq-cat.is-active .faq-cat__bar { height: 16px; }
  .faq-cat__arrow { font-size: 13px; }

  /* Contact: single column */
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid > .sticky-col { position: static; }
  .contact__details { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}

/* ---------- ≤767px: large phones / small tablets ---------- */
@media (max-width: 767px) {
  .steps { --per-view: 2.3; --fade: 70px; }
  .why__cards { --per-view: 1.8; --fade: 70px; }

  /* Stacked layouts: sticky side columns would slide over the content */
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-grid > .sticky-col,
  .services__grid > .sticky-col { position: static; }

  /* CTA sections stack: actions drop below the heading */
  .cta-card, .ready__grid { grid-template-columns: minmax(0, 1fr); }

  /* FAQ categories become a swipeable pill row */
  .faq-cats {
    display: flex;
    gap: 8px;
    margin: 24px -24px 0;
    padding: 0 24px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
  }
  .faq-cats::-webkit-scrollbar { display: none; }
  .faq-cat { width: auto; flex: none; padding: 11px 18px; border-radius: 999px; font-size: 14.5px; scroll-snap-align: start; white-space: nowrap; }
  .faq-cat__bar, .faq-cat__arrow { display: none; }

  /* About stats: three even columns so they never wrap unevenly */
  .about__stats { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat, .stat + .stat { padding: 0 8px; border-left: 0; } /* no dividers between the three stats */
  .stat__value { font-size: clamp(30px, 9vw, 38px); }
  .stat__label { margin-top: 10px; font-size: 13.5px; line-height: 1.4; }

  /* Footer: two columns; "Follow us" drops to the left column of the last row */
  /* Footer: Shopify / Services / Industries / Our office become full-width accordions;
     Follow us + Call us sit centred underneath */
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-col--acc { border-bottom: 1px solid var(--rule); }
  .footer-col--acc .footer-heading { font-size: 12px; }
  .footer-acc__trigger {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 18px 0; cursor: pointer;
  }
  .footer-acc__icon { display: block; flex: none; color: var(--muted); transition: transform .3s var(--ease); }
  .footer-col.is-open .footer-acc__icon { transform: rotate(180deg); }
  .footer-acc__panel { grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
  .footer-col.is-open .footer-acc__panel { grid-template-rows: 1fr; }
  .footer-acc__inner { overflow: hidden; visibility: hidden; transition: visibility 0s linear .4s; }
  .footer-col.is-open .footer-acc__inner { visibility: visible; transition-delay: 0s; }
  .footer-acc__inner > :first-child { margin-top: 0; }
  .footer-acc__inner > :last-child { margin-bottom: 20px; }
  .footer-col--social { margin-top: 36px; text-align: center; }
  .footer-col--social .socials { justify-content: center; }
  .footer-col--social .footer-heading--spaced,
  .footer-col--social .footer-phone { display: none; } /* "Call us today" hidden on mobile */

  /* Contact launcher: slightly smaller title */
  .fab-dial__title { font-size: 22px; }

  /* Migrate: platform names only, no letter icons */
  .platform__mark { display: none; }

  /* Insights: hide the "See all insights" button */
  .insights__head .btn { display: none; }

  /* Services accordion: smaller arrow circles and slightly shorter rows */
  .acc-item__trigger { gap: 16px; }
  .acc-item__icon svg { width: 16px; height: 16px; }

  /* Testimonials: a single scrolling row */
  .testimonials .marquee__track--rev { display: none; }

  /* Footer logo + newsletter: a little more side spacing */
  .footer-mid { padding-left: 84px; padding-right: 84px; }

  /* Hero: less space above the badge (header is 74px) */
  .hero { padding-top: 112px; }

  /* Industries: title + arrow only, no description */
  .indp-body { display: none; }


  /* Featured work: centred heading and intro */
  .featured__head { grid-template-columns: minmax(0, 1fr); gap: 16px; justify-items: center; text-align: center; }
  .featured__head .title, .featured__head p { margin-left: auto; margin-right: auto; }

  /* Case studies: image full width on top; only the title and button below */
  .case, .case--reverse { flex-direction: column; align-items: stretch; }
  .case__media { flex: none; }
  .case__media img { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .case__body { align-self: stretch; }
  .case__industry, .case__tags, .case__metrics { display: none; }
  .case__title { margin-top: 0; }
  .case .btn { margin-top: 20px; }

  /* "Let's build together" CTA card and strip: centred */
  .cta-card__text { text-align: center; }
  .cta-card__title, .cta-card__text p { margin-left: auto; margin-right: auto; }
  .cta-card__actions { justify-self: center; }
  .ready__grid { text-align: center; }
  .ready__title { margin-left: auto; margin-right: auto; }
  .ready__ctas { justify-self: center; justify-content: center; }

  /* Growth engine: one centred column */
  .growth__grid { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .growth__title { margin-left: auto; margin-right: auto; }
  .growth__ctas { justify-content: center; }
  .ticker__track span { text-align: center; }

  /* Shopify Plus: one centred column, badge below */
  .plus__grid { grid-template-columns: minmax(0, 1fr); }
  .plus__text { text-align: center; }
  .plus .title, .plus__text p { margin-left: auto; margin-right: auto; }
  .plus__ctas { justify-content: center; }

  /* Re-platform: centred text */
  .migrate__text { text-align: center; }
  .migrate__title, .migrate__lead { margin-left: auto; margin-right: auto; }

  /* Contact: centred intro */
  .contact__intro { text-align: center; }
  .contact__intro .title, .contact__intro p { margin-left: auto; margin-right: auto; }

 
}

/* ---------- ≤575px: phones ---------- */
@media (max-width: 575px) {
  /* Tighter vertical rhythm and 20px side gutters */
  .light-section, .section-pad, .plus { padding-top: 72px; padding-bottom: 72px; }
  .hero { padding: 100px 20px 64px; }
  .about { padding: 72px 20px 150px; }
  .trust { padding: 44px 0 48px; }
  .trust--merged { padding: 0 16px; }
  .trust__bar { padding: 14px 0; border-radius: 20px; }
  .trust__badge, .trust__badge--dup { padding: 0 20px; }
  .trust__badge img { height: 22px; max-width: 128px; }
  .trust__badge--seal img { height: 42px; }
  .trust__badge--upwork img { height: 30px; }
  .growth { padding: 64px 0 72px; }
  .testimonials, .integrations { padding-top: 72px; padding-bottom: 72px; }
  .insights, .faq { padding-top: 72px; padding-bottom: 72px; }
  .light-section, .section-pad, .plus, .insights, .faq, .cta-band, .ready, .site-footer { padding-left: 20px; padding-right: 20px; }
  .site-header__inner, .trust__head, .growth__grid, .testimonials__head,
  .integrations__head, .integrations__foot, .mobile-menu { padding-left: 20px; padding-right: 20px; }
  .faq-cats { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; }

  .posts { --per-view: 1; }
  
  .featured__list { margin-top: 28px; } /* 36px minus the 8px lift room */
  .why__cards { margin-top: 24px; } /* 32px minus the lift room */
  .ind-row { margin-top: 32px; }
  .why-card { min-height: 0; }

  .about__pillar { padding: 10px 20px; font-size: 17px; }

  /* Vertical ticker: wrap long phrases rather than clipping them */
  .ticker { height: 300px; }
  .ticker__track span { white-space: normal; font-size: clamp(26px, 8vw, 34px); }

  .case__metrics { gap: 20px 32px; }
  .step__desc { max-width: none; padding-bottom: 30px; }
  .process__note { border-radius: 18px; }
  .newsletter { max-width: none; }
  .footer-cols { padding-top: 40px; }

  /* Header: hide the "Contact Us" button (it's in the mobile menu) */
  .site-header__actions .btn-header { display: none; }

  .why__cards { --per-view: 1.3; --fade: 56px; }

  /* Industries: one full-width card per slide (slider controls appear below) */
  .ind-row {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-radius: 0;
    background: none;
    cursor: grab;
  }
  .ind-row::-webkit-scrollbar { display: none; }
  .ind-row .indp, .ind-row:hover .indp { width: 100%; height: 300px; border-radius: 18px; scroll-snap-align: start; }
  .ind-slider .slider-controls { display: flex; }
  /* No hover-fade while swiping on touch screens */
  .ind-row:hover .indp { opacity: 1; filter: none; }

  /* Industries: caption sizing on phones */
  .indp__caption { padding: 18px 16px; }
  .indp-body p { font-size: 13px; line-height: 1.5; padding-bottom: 10px; }
  .indp__title { font-size: 16px; padding-right: 40px; }
  .indp__arrow { width: 32px; height: 32px; bottom: 16px; right: 12px; }
  .indp__arrow svg { width: 15px; height: 15px; }
  .footer-mid, .footer-bottom { padding-left: 64px; padding-right: 64px; } /* launcher: 56px wide, 16px from the edge */
  .footer-mid { padding-left: 12px; padding-right: 12px; } /* logo + newsletter: near full width on phones */

  .fab-stack { right: 16px; bottom: 16px; gap: 12px; }
  .fab-dial__toggle { width: 56px; height: 56px; }
  .fab-dial__options { gap: 10px; }
  .fab-dial__label { padding: 8px 12px; font-size: 13px; }
  .fab-dial__title { font-size: 21px; }
  .fab { width: 48px; height: 48px; }
  .fab svg { width: 20px; height: 20px; }
}

/* ---------- ≤480px: small phones ---------- */
@media (max-width: 480px) {
  .steps { --per-view: 1.3; --fade: 56px; }

  /* Header: logo scales down so the three round buttons fit on the narrowest screens */
  .site-header__inner { gap: 10px; }
  .wa-mini, .menu-toggle { width: 38px; height: 38px; }
  .site-header__logo img { height: clamp(20px, 6.8vw, 30px); }
  

  /* Let long buttons (e.g. the email address) wrap instead of overflowing */
  .btn { max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: center; justify-content: center; }
  .cta-card__actions .btn, .ready__ctas .btn, .growth__ctas .btn, .plus__ctas .btn,
  .case .btn, .insights__head .btn { width: 100%; }
  .cta-card__actions, .ready__ctas { width: 100%; }
  .cta-card__actions { align-items: stretch; }
  .cta-card { padding-left: 22px; padding-right: 22px; }
  .cta-card__actions .btn { padding-left: 14px; padding-right: 14px; } /* keeps the email address on one line */
  .cta-card__actions .btn--white { font-size: clamp(13px, 4.2vw, 14.5px); }

  
  .platform { padding: 14px; }
  .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-item__panel p { padding-right: 0; }
  /* Newsletter: email field above a full-width button in the narrower row */
  .newsletter__form { flex-direction: column; border-radius: 22px; }
  .newsletter__form input { flex: none; padding: 12px 14px; }
  .newsletter__form button { padding: 13px 18px; }
}

/* ==========================================================================
   Intro loader — "We are Shopify Agency" + B. mark, then hands off to the
   header logo. html.is-loading is set in <head>; main.js drives the rest
   (is-active → is-leaving → is-out on the loader, is-intro on <html>).
   ========================================================================== */
.loader { display: none; }
html.is-loading .loader, html.is-intro .loader { display: block; }
html.is-loading, html.is-loading body { overflow: hidden; }

.loader {
  position: fixed; inset: 0; z-index: 200;
  --l-step: 70ms;      /* stagger between letters */
  --l-start: .35s;     /* first letter */
  cursor: progress;
}
.loader__bg {
  position: absolute; inset: 0; overflow: hidden; background: var(--bg);
  transition: opacity .7s var(--ease);
}
/* Soft brand-blue gradient that slowly drifts */
.loader__bg::before {
  content: ""; position: absolute; inset: -25%;
  background:
    radial-gradient(38% 34% at 30% 38%, rgba(60,89,228,.42), transparent 70%),
    radial-gradient(34% 30% at 72% 62%, rgba(110,139,255,.30), transparent 70%),
    radial-gradient(28% 26% at 55% 20%, rgba(169,198,255,.14), transparent 70%);
  filter: blur(40px);
  animation: loader-drift 9s ease-in-out infinite alternate;
}
/* Fine grid + dot pattern, faded out towards the edges */
.loader__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at center, rgba(169,198,255,.38) 1px, transparent 1.6px),
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -32px -32px, -1px -1px, -1px -1px;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 50%, #000 25%, transparent 100%);
          mask-image: radial-gradient(70% 62% at 50% 50%, #000 25%, transparent 100%);
  animation: loader-grid 1.4s var(--ease) both;
}
@keyframes loader-drift {
  from { transform: translate3d(-4%, -2%, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) rotate(14deg) scale(1.1); }
}
@keyframes loader-grid { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.loader.is-out { pointer-events: none; }
.loader.is-out .loader__bg { opacity: 0; }

/* ---------- B. mark (top centre, later flies into the header logo) ---------- */
.loader__mark {
  position: absolute; top: 34px; left: 50%; width: 46px; height: auto;
  margin-left: -23px; overflow: visible; transform-origin: 0 0;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1), opacity .3s linear .72s;
}
.loader__piece, .loader__dot { transform-box: fill-box; transform-origin: center; opacity: 0; }
.loader.is-active .loader__piece { animation: bm-piece .8s cubic-bezier(.34, 1.4, .64, 1) calc(var(--p) * 90ms) both; }
.loader.is-active .loader__dot { animation: bm-dot .6s cubic-bezier(.34, 1.8, .64, 1) calc(var(--l-start) + var(--n, 18) * var(--l-step) + .45s) both; }
.loader.is-landed .loader__mark { opacity: 0; }

@keyframes bm-piece { from { opacity: 0; transform: translateY(14px) scale(.4) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes bm-dot   { 0% { opacity: 0; transform: translateY(-260%) scale(.4); } 60% { opacity: 1; transform: translateY(0) scale(1.35, .7); } 100% { opacity: 1; transform: none; } }

/* ---------- Headline ---------- */
.loader__title {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 16px; gap: .04em;
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase; color: var(--text);
  font-size: clamp(56px, min(12.4vw, 25vh), 250px); line-height: .9; letter-spacing: .005em;
  --media-w: 1.6em;
}
.loader__line { will-change: transform, opacity; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 .22em; }
.loader__word { display: inline-flex; perspective: 600px; }
.loader__char { display: inline-block; opacity: 0; will-change: transform, opacity; }

/* Each letter gets its own entrance (fx-* is assigned in main.js) */
.loader.is-active .loader__char {
  animation-duration: .85s; animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22, 1, .36, 1);
  animation-delay: calc(var(--l-start) + var(--i) * var(--l-step));
}
.loader.is-active .fx-rise    { animation-name: fx-rise; }
.loader.is-active .fx-drop    { animation-name: fx-drop; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.loader.is-active .fx-flip    { animation-name: fx-flip; transform-origin: 50% 100%; }
.loader.is-active .fx-spin    { animation-name: fx-spin; }
.loader.is-active .fx-blur    { animation-name: fx-blur; }
.loader.is-active .fx-skew    { animation-name: fx-skew; }
.loader.is-active .fx-turn    { animation-name: fx-turn; }
.loader.is-active .fx-stretch { animation-name: fx-stretch; transform-origin: 50% 100%; animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
.loader.is-active .fx-zoom    { animation-name: fx-zoom; }

@keyframes fx-rise    { from { opacity: 0; transform: translateY(.7em); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-drop    { from { opacity: 0; transform: translateY(-.9em) rotate(-14deg); } 40% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-flip    { from { opacity: 0; transform: rotateX(-100deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-spin    { from { opacity: 0; transform: rotate(-200deg) scale(.2); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-blur    { from { opacity: 0; transform: scale(1.7); filter: blur(18px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes fx-skew    { from { opacity: 0; transform: translateX(-.7em) skewX(-30deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-turn    { from { opacity: 0; transform: rotateY(-110deg); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-stretch { from { opacity: 0; transform: scaleY(0); } 30% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes fx-zoom    { from { opacity: 0; transform: scale(.1) translateY(.4em); color: var(--accent); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }

/* Media card between WE and ARE: opens from nothing */
.loader__media {
  display: inline-block; height: .78em; width: 0; border-radius: .08em; overflow: hidden;
  margin: 0 -.11em; background: var(--surface); position: relative;
}
.loader__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); }
.loader.is-active .loader__media { animation: media-open 1.1s cubic-bezier(.76, 0, .24, 1) .55s both; }
.loader.is-active .loader__media img { animation: media-zoom 2.6s var(--ease) .55s both; }
@keyframes media-open { from { width: 0; margin: 0 -.11em; } to { width: var(--media-w); margin: 0; } }
@keyframes media-zoom { to { transform: scale(1); } }

/* Progress hairline */
.loader__progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
}
.loader.is-active .loader__progress { animation: loader-progress 2.7s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes loader-progress { to { transform: scaleX(1); } }

/* ---------- Exit ---------- */
.loader.is-leaving .loader__line { animation: line-out .7s cubic-bezier(.65, 0, .35, 1) both; }
.loader.is-leaving .loader__line + .loader__line { animation-delay: .07s; }
.loader.is-leaving .loader__media { animation: none; width: var(--media-w); margin: 0; }
.loader.is-leaving .loader__progress { animation: none; transform: scaleX(1); transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.7, 0, .84, 0); }
.loader.is-out .loader__progress { transform: scaleX(0); }
@keyframes line-out { from { opacity: 1; transform: none; } 70% { opacity: 1; } to { opacity: 0; transform: translate3d(0, -42%, 0) scale(.96); } }

/* ---------- Page hand-off ---------- */
/* Hold the hero and header until the loader leaves… */
html.is-loading .hero [data-reveal],
html.is-loading .site-nav,
html.is-loading .site-header__actions,
html.is-loading .site-header__logo img { animation: none; opacity: 0; }

/* …then the header logo wipes open from the B mark the loader dropped in */
html.is-intro .site-header__logo img { animation: logo-wipe 1.1s cubic-bezier(.76, 0, .24, 1) .7s both; }
html.is-intro .site-nav,
html.is-intro .site-header__actions { animation: intro-down .8s var(--ease) .9s both; }
html.is-intro .hero [data-reveal] { animation: sl-rise .9s var(--ease) both; animation-delay: .35s; }
html.is-intro .hero__content > :nth-child(2) { animation-delay: .45s; }
html.is-intro .hero__content > :nth-child(3) { animation-delay: .55s; }
html.is-intro .hero__content > :nth-child(4) { animation-delay: .65s; }
html.is-intro .hero__content > :nth-child(5) { animation-delay: .75s; }
html.is-intro .hero__content > :nth-child(n+6) { animation-delay: .85s; }

@keyframes logo-wipe {
  0%   { opacity: 0; clip-path: inset(0 85% 0 0); }
  12%  { opacity: 1; clip-path: inset(0 85% 0 0); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); }
}
@keyframes intro-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .loader__title { font-size: 19vw; line-height: .9; --media-w: 1.25em; }
  .loader__mark { top: 26px; width: 40px; margin-left: -20px; }
}

@media (prefers-reduced-motion: reduce) {
  .loader { display: none !important; }
}

/* ==========================================================================
   Header + hero v3 — centre "Menu" bar with a dropdown, text CTA on the
   right; full-screen hero over scrolling columns of project work.
   ========================================================================== */

/* ---------- Header ---------- */
/* Centre nav: plain links (underline on hover) */
@media (min-width: 992px) {
  .site-nav { gap: 30px; font-size: 14.5px; font-weight: 500; color: var(--text-2); }
  .wa-mini__number { display: none; }

  /* Services mega menu, in the site's card style */
  .mega {
    /* Lighter navy panel so the menu stands out from the dark header and page */
    background:
      radial-gradient(70% 120% at 50% 0%, rgba(110,139,255,.22), transparent 65%),
      linear-gradient(180deg, #1B2238 0%, #141A2B 100%);
    border-color: rgba(110,139,255,.28);
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(169,198,255,.12);
  }
  .mega-item__desc, .mega__heading { color: #A3ADC2; }
  .mega__links a { color: #D3DAE8; }
  .mega-item { border: 1px solid transparent; transition: background .25s ease, border-color .25s ease; }
  .mega-item:hover, .mega-item:focus-visible { background: rgba(110,139,255,.07); border-color: rgba(110,139,255,.35); }
  .mega-item__icon {
    width: 38px; height: 38px; padding: 9px; margin: 0; border-radius: 10px;
    background: rgba(110,139,255,.14); color: var(--accent);
    transition: background .25s ease, color .25s ease;
  }
  .mega-item:hover .mega-item__icon, .mega-item:focus-visible .mega-item__icon { background: var(--accent); color: var(--white); }
}

/* WhatsApp CTA: icon + "Start a conversation" + number (desktop) */
.btn-header {
  display: inline-flex; align-items: center; gap: 12px;
  height: 54px; padding: 0 22px 0 6px; border-radius: 999px;
  border: 1px solid rgba(37,211,102,.35); background: rgba(14,16,20,.72); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: border-color .25s ease, background .25s ease, transform .25s var(--ease);
}
.btn-header:hover { color: var(--text); border-color: var(--whatsapp); background: rgba(37,211,102,.1); transform: translateY(-1px); }
.btn-header__icon {
  position: relative; width: 42px; height: 42px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--whatsapp);
}
.btn-header__icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  animation: wa-ripple 2.4s ease-out infinite;
}
.btn-header__icon svg { animation: wa-ring 5s ease-in-out 1s infinite; }
.btn-header__text { display: grid; gap: 3px; line-height: 1; text-align: left; }
.btn-header__label { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.btn-header__number { font-size: 15px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
/* One WhatsApp entry point per size: this pill on wide desktops; the compact green pill
   (icon + number) from 992-1199px so the five menu items still fit; the round icon below 992px */
@media (max-width: 1199px) { .site-header__actions .btn-header { display: none; } }

/* Header actions: a compact green WhatsApp pill (icon + "WhatsApp", icon only below 1200px)
   and a "Contact us" text button (desktop header only; the mobile menu has its own Contact us button) */
.hdr-contact { display: none; }
@media (min-width: 992px) {
  .hdr-contact {
    flex: none; display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 20px; border-radius: 999px;
    background: var(--accent); color: var(--white);
    font-size: 14.5px; font-weight: 600; letter-spacing: -0.005em; white-space: nowrap;
    box-shadow: 0 10px 24px -12px rgba(110,139,255,.85);
    transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
  }
  .hdr-contact:hover, .hdr-contact:focus-visible, .hdr-contact[aria-current="page"] {
    background: var(--ink-accent); color: var(--white);
    box-shadow: 0 12px 26px -10px rgba(110,139,255,.95);
  }
  .hdr-contact:hover { transform: translateY(-1px); }
  .hdr-contact__arrow { transition: transform .25s ease; }
  .hdr-contact:hover .hdr-contact__arrow { transform: translateX(3px); }
}

/* ---------- Hero ---------- */
.hero.hero--panels {
  min-height: 100vh; min-height: 100svh;
  padding: 120px 24px 60px;
  display: flex; flex-direction: column; align-items: center;
  isolation: isolate;
}
.hero__panels { position: absolute; inset: 0; z-index: -3; overflow: hidden; }

/* Side columns: tilted inwards, fading out towards the centre and the edges */
.hero__col {
  position: absolute; top: -8%; bottom: -8%; width: 26%; padding: 0 14px; overflow: hidden;
  --fade-y: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  -webkit-mask-image: var(--fade-x), var(--fade-y);
  -webkit-mask-composite: source-in;
          mask-image: var(--fade-x), var(--fade-y);
          mask-composite: intersect;
}
.hero__col--left  { left: 0;  --fade-x: linear-gradient(90deg, #000 15%, rgba(0,0,0,.55) 60%, transparent 100%);  transform: perspective(1400px) rotateY(16deg);  transform-origin: 0 50%; }
.hero__col--right { right: 0; --fade-x: linear-gradient(270deg, #000 15%, rgba(0,0,0,.55) 60%, transparent 100%); transform: perspective(1400px) rotateY(-16deg); transform-origin: 100% 50%; }
.hero__col-track { display: flex; flex-direction: column; animation: sl-vscroll var(--dur, 70s) linear infinite; }
.hero__col--down .hero__col-track { animation-direction: reverse; }
.hero__col img {
  display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 14px; /* margin, not gap, keeps the loop seamless */
  object-fit: cover; object-position: top center;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.08);
  filter: grayscale(.4) brightness(.6) contrast(1.05);
}

/* Top/bottom fade + slight darkening over the columns */
.hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(8,9,11,.9) 0%, rgba(8,9,11,0) 22%, rgba(8,9,11,0) 72%, rgba(8,9,11,.97) 94%, #08090B 100%),
    linear-gradient(90deg, rgba(8,9,11,.35), rgba(8,9,11,0) 30%, rgba(8,9,11,0) 70%, rgba(8,9,11,.35));
}

/* Centre stage behind the title: drifting brand glow, dot grid, light rings */
.hero__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__stage::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(169,198,255,.22) 1px, transparent 1.6px);
  background-size: 26px 26px; background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 34% 42% at 50% 50%, #000 25%, transparent 100%);
}
.hero__orb { position: absolute; left: 50%; top: 50%; border-radius: 50%; filter: blur(70px); }
.hero__orb--a {
  width: min(48vw, 680px); aspect-ratio: 1; margin: calc(min(48vw, 680px) / -2) 0 0 calc(min(48vw, 680px) / -2);
  background: radial-gradient(circle, rgba(110,139,255,.38), transparent 68%);
  animation: orb-a 14s ease-in-out infinite alternate;
}
.hero__orb--b {
  width: min(34vw, 480px); aspect-ratio: 1; margin: calc(min(34vw, 480px) / -2) 0 0 calc(min(34vw, 480px) / -2);
  background: radial-gradient(circle, rgba(60,89,228,.42), transparent 70%);
  animation: orb-b 11s ease-in-out infinite alternate;
}
@keyframes orb-a { from { transform: translate(-14%, -8%) scale(1); } to { transform: translate(12%, 6%) scale(1.12); } }
@keyframes orb-b { from { transform: translate(18%, 10%) scale(1.1); } to { transform: translate(-16%, -12%) scale(.92); } }

/* Horizon: a glowing stage edge just under the title */
.hero__horizon {
  position: absolute; left: 50%; top: 78%; width: min(70vw, 1000px); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(169,198,255,.4) 50%, transparent);
  box-shadow: 0 0 22px 2px rgba(110,139,255,.22);
  animation: horizon-breathe 5s ease-in-out infinite;
}
.hero__horizon::before {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 120px;
  background: radial-gradient(50% 100% at 50% 100%, rgba(110,139,255,.12), transparent 70%);
}
@keyframes horizon-breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Three journey icons on the horizon; they swap with the rotating title word
   (main.js → initJourney) */
.hero__journey {
  position: absolute; left: 50%; top: 78%; height: 0; transform: translateX(-50%);
  display: flex; justify-content: center; gap: 120px;
}
.hero__step {
  position: relative; width: 48px; height: 48px; margin-top: -24px; border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(110,139,255,.28), rgba(16,20,32,.92) 70%);
  border: 1px solid rgba(169,198,255,.55); color: #DCE6FF;
  box-shadow: 0 0 0 4px rgba(8,9,11,.6), 0 0 22px -2px rgba(110,139,255,.55), inset 0 1px 0 rgba(255,255,255,.12);
}
.hero__step svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(110,139,255,.6)); }
/* Icon swap when the title word changes (flip on the icon, so the glow keeps running) */
.hero__step.is-flip-out svg { animation: step-flip-out .18s ease-in forwards; }
.hero__step.is-flip-in svg  { animation: step-flip-in .38s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes step-flip-out { to { transform: perspective(200px) rotateY(90deg) scale(.7); opacity: 0; } }
@keyframes step-flip-in  { from { transform: perspective(200px) rotateY(-90deg) scale(.7); opacity: 0; } }
/* Floor: perspective grid that keeps flowing towards the viewer */
.hero__floor-wrap {
  position: absolute; left: 0; right: 0; top: 78%; bottom: 0; overflow: hidden;
  perspective: 360px; perspective-origin: 50% 0;
  /* fades in below the horizon instead of starting with hard lines */
  -webkit-mask-image: radial-gradient(60% 140% at 50% 0%, #000 35%, transparent 100%), linear-gradient(180deg, transparent, #000 45%, #000 70%, transparent);
  -webkit-mask-composite: source-in;
          mask-image: radial-gradient(60% 140% at 50% 0%, #000 35%, transparent 100%), linear-gradient(180deg, transparent, #000 45%, #000 70%, transparent);
          mask-composite: intersect;
}
.hero__floor {
  position: absolute; left: -60%; right: -60%; top: 0; height: 900px;
  transform-origin: 50% 0; transform: rotateX(74deg);
  background-image:
    linear-gradient(rgba(110,139,255,.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110,139,255,.2) 1px, transparent 1px);
  background-size: 64px 64px; background-position: 50% 0;
  animation: floor-flow 1.8s linear infinite;
}
@keyframes floor-flow { to { background-position: 50% 64px; } }

/* Light pulses racing along the floor's grid lines */
.hero__pulse {
  position: absolute; top: 0; width: 2px; height: 180px;
  left: calc(50% - 33px + var(--x) * 64px);
  background: linear-gradient(180deg, transparent, rgba(169,198,255,.95));
  box-shadow: 0 0 10px 1px rgba(110,139,255,.8);
  border-radius: 2px; opacity: 0;
  animation: pulse-run calc(var(--t) * 1.6) cubic-bezier(.5, 0, .9, .6) var(--d) infinite;
}
@keyframes pulse-run {
  0%   { transform: translateY(-180px); opacity: 0; }
  22%  { opacity: 0; }
  40%  { opacity: .9; }
  80%  { opacity: 1; }
  100% { transform: translateY(900px); opacity: 0; }
}

.hero--panels .hero__content {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 0;
}
/* Desktop: centre the title in the space between the header (74px) and the
   floor's horizon (78%); the buttons stay down on the floor */
@media (min-width: 992px) {
  .hero.hero--panels { min-height: max(100svh, 640px); }
  .hero--panels .hero__content {
    position: absolute; left: 24px; right: 24px; top: 74px; bottom: 22%;
    padding: 0;
  }
  .hero--panels .hero__actions { margin-top: auto; }
}
.hero__kicker {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 26px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
}
.hero__headline {
  margin: 0;
  font-size: clamp(36px, 6.2vw, 106px); font-weight: 900; line-height: .95; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--text);
  text-shadow: 0 12px 40px rgba(0,0,0,.45);
}
.hero__headline-line { display: block; }
.hero__headline-line--accent { color: var(--accent); }

/* Rotating service word: old letters flip away, a highlighter bar sweeps
   across, new letters flip up into place (main.js → initRotator) */
.hero__rotator {
  display: inline-block; position: relative; white-space: nowrap; vertical-align: top;
  transition: width .5s cubic-bezier(.65, 0, .35, 1);
}
.hero__rotator-word { display: inline-block; perspective: 700px; }
.hero__rotator-word.is-out { position: absolute; left: 0; top: 0; }
.hero__rotator-char { display: inline-block; transform-origin: 50% 100%; }
.hero__rotator-word.is-out .hero__rotator-char { animation: rot-out .28s cubic-bezier(.7, 0, .84, 0) calc(var(--i) * 14ms) both; }
.hero__rotator-word.is-in .hero__rotator-char { animation: rot-in .55s cubic-bezier(.22, 1, .36, 1) calc(var(--i) * 24ms) both; }
@keyframes rot-out { to { opacity: 0; transform: translateY(-35%) rotateX(85deg); } }
@keyframes rot-in {
  from { opacity: 0; transform: translateY(60%) rotateX(-90deg) scale(.9); color: var(--text); }
  55%  { opacity: 1; color: var(--text); }
  to   { opacity: 1; transform: none; color: var(--accent); }
}
.hero__rotator-sweep {
  position: absolute; left: -.05em; right: -.05em; top: .1em; bottom: .02em; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--accent-soft));
  transform: scaleX(0); transform-origin: 0 50%;
}
.hero__rotator.is-sweeping .hero__rotator-sweep { animation: rot-sweep .56s cubic-bezier(.76, 0, .24, 1) both; }
@keyframes rot-sweep {
  0%   { transform: scaleX(0); transform-origin: 0 50%; }
  46%  { transform: scaleX(1); transform-origin: 0 50%; }
  54%  { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.hero__cta-main {
  padding: 18px 34px; font-size: 16.5px; font-weight: 700;
  box-shadow: 0 18px 40px -12px rgba(110,139,255,.75);
}
.hero__cta-main .btn__arrow { opacity: 1; transition: transform .25s var(--ease); }
.hero__cta-main:hover .btn__arrow { transform: translateX(4px); }
.hero__cta-alt {
  padding: 18px 34px; font-size: 16.5px; font-weight: 700;
  background: var(--white); color: var(--ink);
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.hero__cta-alt:hover { color: var(--ink); background: var(--light); transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,255,255,.18); }
@media (max-width: 991px) {
  /* Below desktop the buttons sit in the normal flow, so the horizon, floor and
     icons are anchored a fixed distance above them (--floor-h) instead of at a
     % of the banner — they can never run into the buttons. */
  .hero.hero--panels { --floor-h: 164px; min-height: 92svh; padding-top: 110px; }
  .hero__horizon, .hero__journey { top: auto; bottom: var(--floor-h); }
  .hero__floor-wrap { top: auto; height: var(--floor-h); }
  .hero--panels .hero__actions { margin-top: 96px; }  /* room for the icons above the buttons */
}
@media (min-width: 768px) and (max-width: 991px) {
  .hero__headline { font-size: 7.8vw; }  /* tablets: fill the space; "Shopify Development" still fits */
}
@media (max-width: 767px) {
  .hero__col { width: 34%; padding: 0 8px; opacity: .6; }
  .hero__col--left { transform: perspective(900px) rotateY(10deg); }
  .hero__col--right { transform: perspective(900px) rotateY(-10deg); }
  /* Phones: no floor icons, so the buttons sit closer to the title and the
     horizon runs just above them */
  .hero.hero--panels { --floor-h: 208px; }
  .hero__journey, .hero__horizon, .hero__floor-wrap { display: none; }  /* no floor on phones */
  .hero--panels .hero__actions { margin-top: 48px; }
  /* Sticky chat button: just the button, no "Let's talk Shopify!" label */
  .fab-dial__title { display: none; }
  .hero__journey { gap: 64px; }
  .hero__step { width: 30px; height: 30px; margin-top: -15px; border-radius: 9px; }
  .hero__step svg { width: 14px; height: 14px; }
  .hero__horizon { width: 90vw; }
  .hero__headline { font-size: 11.6vw; } /* largest size where "DEVELOPMENT" still fits at 320px */
  .hero__rotator { display: block; margin: 0 auto; min-height: .95em; } /* holds its line (= title line-height) while words swap */
  .hero__kicker { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 20px; }
  .hero__actions { width: 100%; flex-direction: column; gap: 12px; }
  .hero__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__col-track, .btn-header__icon::before, .btn-header__icon svg, .hero__orb, .hero__horizon, .hero__floor, .hero__pulse { animation: none; }
  .hero__pulse { display: none; }
}

/* ==========================================================================
   Hero icons — glass tiles with commerce icons floating around the title
   (≥1100px). Each icon has its own small motion.
   ========================================================================== */
.hero__icons { display: none; }
@media (min-width: 1100px) {
  .hero__icons {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    max-width: 1600px; margin: 0 auto; --px: 0; --py: 0;
  }
}
@media (min-width: 1100px) and (max-width: 1399px) { .hero__icons { zoom: .85; } }

.hi {
  position: absolute; width: calc(var(--s, 64px) * .85); height: calc(var(--s, 64px) * .85); pointer-events: auto;
  display: grid; place-items: center; border-radius: 30%;
  background: linear-gradient(145deg, rgba(38,44,58,.9), rgba(14,16,22,.9));
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  color: var(--text);
  transform: translate3d(calc(var(--px) * var(--d, 20) * 1px), calc(var(--py) * var(--d, 20) * 1px), 0);
  rotate: var(--r, 0deg);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), rotate .4s var(--ease), border-color .3s ease, box-shadow .3s ease;
  animation:
    hi-in .9s cubic-bezier(.34, 1.4, .64, 1) calc(.4s + var(--k) * 80ms) backwards,
    hi-float var(--f, 7s) ease-in-out calc(var(--k) * -1.1s) infinite alternate;
}
.hi svg { width: 46%; height: 46%; overflow: visible; }
.hi:hover { rotate: 0deg; border-color: rgba(110,139,255,.6); box-shadow: 0 24px 50px -22px rgba(0,0,0,.95), 0 0 30px -4px rgba(110,139,255,.55); }
.hi--accent {
  background: linear-gradient(145deg, var(--accent), #3C59E4);
  border-color: rgba(255,255,255,.18); color: var(--white);
  box-shadow: 0 24px 50px -20px rgba(60,89,228,.8), inset 0 1px 0 rgba(255,255,255,.25);
}
@keyframes hi-in { from { opacity: 0; scale: .3; } }
@keyframes hi-float { from { translate: 0 -8px; } to { translate: 0 8px; } }

/* Layout: a loose ring that keeps clear of the headline */
.hi--bag   { --s: 76px; --r: -8deg; --d: 28; --f: 7.4s; left: 10%;  top: 18%; }
.hi--card  { --s: 62px; --r: 7deg;  --d: 16; --f: 6.6s; left: 4%;   top: 50%; }
.hi--cart  { --s: 70px; --r: 6deg;  --d: 22; --f: 7s;   right: 10%; top: 18%; }
.hi--truck { --s: 66px; --r: -4deg; --d: 24; --f: 7.2s; right: 4%;  top: 50%; }
.hi--chart { --s: 70px; --r: -6deg; --d: 26; --f: 7.6s; left: 15%;  top: 72%; }
.hi--tag   { --s: 68px; --r: 8deg;  --d: 20; --f: 6.9s; right: 15%; top: 72%; }

/* Per-icon micro motion */
.hi--bag svg   { animation: hi-hop 2.8s cubic-bezier(.34, 1.6, .64, 1) infinite; transform-origin: 50% 100%; }
.hi--cart svg  { animation: hi-roll 3.2s ease-in-out infinite; }
.hi--card svg  { animation: hi-flip 4.5s ease-in-out infinite; }
.hi--truck svg { animation: hi-drive 1.4s ease-in-out infinite; }
.hi--tag svg   { animation: hi-swing 3s ease-in-out infinite; transform-origin: 20% 20%; }
.hi--chart .hi-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: hi-bar 2.6s ease-in-out infinite; color: var(--accent); }
.hi--chart .hi-bar--2 { animation-delay: .2s; }
.hi--chart .hi-bar--3 { animation-delay: .4s; }

@keyframes hi-hop     { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-5px) scale(1.05, .95); } 80% { transform: translateY(0) scale(.96, 1.04); } }
@keyframes hi-roll    { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes hi-flip    { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
@keyframes hi-drive   { 0%, 100% { transform: translate(-1px, 0); } 25% { transform: translate(0, -1px); } 50% { transform: translate(1px, 0); } 75% { transform: translate(0, .5px); } }
@keyframes hi-swing   { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes hi-bar     { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } }

@media (prefers-reduced-motion: reduce) {
  .hi, .hi svg, .hi .hi-bar { animation: none; }
  .hi { transition: none; }
}


/* ==========================================================================
   Case studies — desktop enhancements (≥1200px only; the ≤1199px slider,
   tablets and phones are untouched)
   ========================================================================== */
@media (min-width: 1200px) {
  /* Stacking deck: each card pins below the header and the next slides over it */
  .featured__list { gap: 56px; }
  .featured__list > .case {
    position: sticky; top: calc(96px + var(--stack, 0) * 18px);
    box-shadow: 0 -18px 50px -30px rgba(11,13,18,.28);
  }
  .featured__list > .case:nth-child(2) { --stack: 1; }
  .featured__list > .case:nth-child(3) { --stack: 2; }
  .featured__list > .case:hover, .featured__list > .case:focus-within {
    box-shadow: 0 36px 70px -42px rgba(47,73,184,.45), 0 0 0 1px rgba(47,73,184,.06);
  }

  /* Results in the brand gradient */
  .case__metric-value {
    background: linear-gradient(90deg, var(--ink-accent), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
/* No pinning when motion is reduced or the window is too short to show a whole card */
@media (min-width: 1200px) and (prefers-reduced-motion: reduce), (min-width: 1200px) and (max-height: 679px) {
  .featured__list > .case { position: relative; top: auto; }
}

/* ==========================================================================
   About — desktop enhancements (≥1200px only; layout unchanged, smaller
   screens untouched). Stat count-up lives in main.js → initAboutStats.
   ========================================================================== */
@media (min-width: 1200px) {
  /* Background depth: faint dot grid + a soft top light beam and two drifting
     brand glows (decorative layers behind the content) */
  .about__content { z-index: 1; }
  .about::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(169,198,255,.16) 1px, transparent 1.6px);
    background-size: 28px 28px; background-position: center;
    -webkit-mask-image: radial-gradient(60% 70% at 50% 45%, #000 20%, transparent 100%);
            mask-image: radial-gradient(60% 70% at 50% 45%, #000 20%, transparent 100%);
  }
  .about::after {
    content: ""; position: absolute; inset: -10% -5%; pointer-events: none;
    background:
      conic-gradient(from 168deg at 50% -8%, transparent 0deg, rgba(110,139,255,.13) 12deg, transparent 24deg),
      radial-gradient(30% 38% at 18% 62%, rgba(60,89,228,.20), transparent 70%),
      radial-gradient(28% 34% at 82% 38%, rgba(110,139,255,.16), transparent 70%);
    filter: blur(6px);
    animation: about-drift 16s ease-in-out infinite alternate;
  }
  @keyframes about-drift {
    from { transform: translate3d(-2%, -1%, 0) scale(1); }
    to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
  }

  /* Ring behind the section slowly breathes */
  .about__ring { animation: about-ring 7s ease-in-out infinite; }
  @keyframes about-ring { 0%, 100% { opacity: .2; } 50% { opacity: .42; } }

  /* Slow light shimmer across the highlighted words */
  .about__title em {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #DCE6FF 50%, var(--accent) 65%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: about-shimmer 5.5s ease-in-out infinite;
  }
  @keyframes about-shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }

  /* Pillars: a sheen sweeps across each in turn; lift + glow on hover */
  .about__pillar {
    position: relative; overflow: hidden;
    transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
  }
  .about__pillar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(169,198,255,.22), transparent);
    transform: skewX(-20deg);
    animation: pillar-sheen 6s ease-in-out infinite;
  }
  .about__pillar:nth-child(2)::after { animation-delay: .5s; }
  .about__pillar:nth-child(3)::after { animation-delay: 1s; }
  @keyframes pillar-sheen { 0% { left: -60%; } 30%, 100% { left: 130%; } }
  .about__pillar:hover {
    transform: translateY(-3px);
    border-color: rgba(110,139,255,.55);
    box-shadow: 0 14px 34px -14px rgba(110,139,255,.55);
  }

  /* Stats: glowing figures and fading divider lines */
  .stat__value {
    background: linear-gradient(180deg, #FFFFFF 30%, #B9C8FF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    font-variant-numeric: tabular-nums;
  }
  .stat__value span {
    -webkit-text-fill-color: var(--accent);
    text-shadow: 0 0 18px rgba(110,139,255,.65);
  }
  .stat { position: relative; }
  .stat + .stat { border-left-color: transparent; }
  .stat + .stat::before {
    content: ""; position: absolute; left: 0; top: -6px; bottom: -6px; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(110,139,255,.45), transparent);
  }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .about__ring, .about__title em, .about__pillar::after, .about::after { animation: none; }
}

/* ==========================================================================
   Services — desktop enhancements (≥1200px only; same layout and content,
   smaller screens untouched)
   ========================================================================== */
@media (min-width: 1200px) {
  /* Background: faint dot grid + soft blue glow behind the cards.
     overflow: clip (not hidden) so the sticky intro column keeps working. */
  #services { position: relative; overflow: clip; }
  #services .services__grid { position: relative; z-index: 1; }
  #services::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(47,73,184,.13) 1px, transparent 1.6px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(55% 60% at 70% 45%, #000 15%, transparent 100%);
            mask-image: radial-gradient(55% 60% at 70% 45%, #000 15%, transparent 100%);
  }
  #services::after {
    content: ""; position: absolute; right: -10%; top: 10%; width: 60%; height: 80%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(110,139,255,.16), transparent 75%);
    filter: blur(20px);
  }

  /* Heading accent + pulsing pill dot */
  .services__title em {
    background: linear-gradient(90deg, var(--ink-accent), var(--accent));
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .services__pill .dot { background: var(--ink-accent); animation: svc-dot 2.2s ease-out infinite; }
  @keyframes svc-dot { 0% { box-shadow: 0 0 0 0 rgba(47,73,184,.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(47,73,184,0); } }

  /* Numbered services */
  .accordion { counter-reset: svc; }
  .acc-item { counter-increment: svc; }
  .acc-item__trigger::before {
    content: counter(svc, decimal-leading-zero);
    flex: none; width: 26px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-muted);
    transition: color .4s ease;
  }
  .acc-item.is-open .acc-item__trigger::before { color: var(--ink-accent); }

  /* Closed cards: name nudges right and the button turns blue on hover */
  .acc-item__title { transition: color .4s ease, transform .4s var(--acc-ease); }
  .acc-item:not(.is-open):hover .acc-item__title { color: var(--ink-accent); transform: translateX(6px); }
  .acc-item:not(.is-open):hover .acc-item__icon { background: var(--ink-accent); color: var(--white); }

  /* Open card: blue wash from the top corner + glowing accent bar */
  .acc-item.is-open {
    background:
      radial-gradient(90% 70% at 100% 0%, rgba(110,139,255,.09), transparent 60%),
      var(--white);
  }
  .acc-item.is-open::before { box-shadow: 0 0 14px rgba(110,139,255,.7); }

  /* Points: gradient markers, and they fade up one after another on open */
  .acc-points li::before {
    width: 8px; height: 8px; margin-top: 6px; border-radius: 3px;
    background: linear-gradient(135deg, var(--accent), var(--ink-accent));
    box-shadow: 0 0 0 3px rgba(110,139,255,.14);
  }
  .acc-item.is-open .acc-points li { animation: svc-point .55s var(--acc-ease) backwards; }
  .acc-item.is-open .acc-points li:nth-child(1) { animation-delay: .12s; }
  .acc-item.is-open .acc-points li:nth-child(2) { animation-delay: .2s; }
  .acc-item.is-open .acc-points li:nth-child(3) { animation-delay: .28s; }
  .acc-item.is-open .acc-points li:nth-child(4) { animation-delay: .36s; }
  @keyframes svc-point { from { opacity: 0; transform: translateY(10px); } }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .services__pill .dot, .acc-item.is-open .acc-points li { animation: none; }
  .acc-item:not(.is-open):hover .acc-item__title { transform: none; }
}

/* ==========================================================================
   Why us — desktop enhancements (≥1200px only; same layout and content,
   smaller screens untouched). Card spotlight position: main.js → initWhySpotlight
   ========================================================================== */
@media (min-width: 1200px) {
  /* Drifting blue glow behind the cards */
  .why .inner { z-index: 1; }
  .why::after {
    content: ""; position: absolute; left: 50%; bottom: -10%; width: 70%; height: 70%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(110,139,255,.14), transparent 75%);
    filter: blur(30px);
    animation: why-drift 14s ease-in-out infinite alternate;
  }
  @keyframes why-drift { from { transform: translate(-65%, 0) scale(1); } to { transform: translate(-35%, -6%) scale(1.1); } }

  /* Heading shimmer (matches About) */
  .why .title em {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #DCE6FF 50%, var(--accent) 65%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: about-shimmer 5.5s ease-in-out infinite;
  }

  /* Spotlight follows the cursor inside the card */
  .why-card::before {
    background: radial-gradient(240px circle at var(--mx, 0%) var(--my, 0%), rgba(110,139,255,.22), rgba(110,139,255,0) 70%);
  }

  /* Cards light up one after another (01 → 04) while nothing is hovered */
  .why-card::after { animation: why-line 10s var(--why-ease) infinite; }
  .why-card .why-card__num { animation: why-num 10s ease-in-out infinite; }
  .why-card:nth-child(2)::after, .why-card:nth-child(2) .why-card__num { animation-delay: 2.5s; }
  .why-card:nth-child(3)::after, .why-card:nth-child(3) .why-card__num { animation-delay: 5s; }
  .why-card:nth-child(4)::after, .why-card:nth-child(4) .why-card__num { animation-delay: 7.5s; }
  @keyframes why-line {
    0%   { transform: scaleX(0); transform-origin: left center; }
    6%, 20% { transform: scaleX(1); transform-origin: left center; }
    20.01% { transform-origin: right center; }
    26%, 100% { transform: scaleX(0); transform-origin: right center; }
  }
  @keyframes why-num {
    0%, 26%, 100% { filter: none; }
    8%, 20% { filter: drop-shadow(0 6px 16px rgba(110,139,255,.6)); }
  }
  /* Hovering any card pauses the sequence; the hovered card takes over */
  .why__cards:hover .why-card::after, .why__cards:hover .why-card__num { animation: none; }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .why::after, .why .title em, .why-card::after, .why-card .why-card__num { animation: none; }
}

/* ==========================================================================
   Process — desktop enhancements (≥1200px only; same layout and content,
   smaller screens untouched). Builds on the scroll progress in initProcess.
   ========================================================================== */
@media (min-width: 1200px) {
  /* Drifting blue glow behind the timeline */
  .process .inner { z-index: 1; }
  .process::after {
    content: ""; position: absolute; left: 50%; top: 35%; width: 80%; height: 60%; pointer-events: none;
    background: radial-gradient(closest-side, rgba(110,139,255,.12), transparent 75%);
    filter: blur(30px);
    animation: process-drift 16s ease-in-out infinite alternate;
  }
  @keyframes process-drift { from { transform: translate(-60%, 0) scale(1); } to { transform: translate(-40%, -8%) scale(1.1); } }

  /* Heading shimmer (matches About / Why us) */
  .process .title em {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #DCE6FF 50%, var(--accent) 65%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: about-shimmer 5.5s ease-in-out infinite;
  }

  /* Glowing progress line */
  .step__line { overflow: visible; background: #1E222B; }
  .step__fill {
    background: linear-gradient(90deg, var(--accent), var(--accent-soft));
    box-shadow: 0 0 10px rgba(110,139,255,.75);
    border-radius: 2px;
  }

  /* Reached steps: filled blue circle; the newest one pulses */
  .step__ring { position: relative; transition: border-color .4s ease, color .4s ease, box-shadow .4s ease, background .4s ease, transform .35s var(--ease); }
  .step.is-active .step__ring {
    background: radial-gradient(circle at 35% 30%, #8FA6FF, var(--accent) 55%, #4A63D8);
    border-color: var(--accent-soft); color: var(--white);
    box-shadow: 0 0 0 6px rgba(110,139,255,.14), 0 10px 26px -6px rgba(110,139,255,.7);
  }
  .step.is-active:not(:has(+ .step.is-active)) .step__ring::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%;
    border: 2px solid var(--accent-soft);
    animation: step-ripple 1.8s ease-out infinite;
  }
  @keyframes step-ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(1.7); opacity: 0; } }

  /* Not-yet-reached steps stay dim; they brighten as the line arrives */
  .step__title, .step__desc { transition: color .5s ease, opacity .5s ease; }
  .step:not(.is-active) .step__title { color: var(--muted); }
  .step:not(.is-active) .step__desc { opacity: .55; }
  .step:hover .step__ring { transform: translateY(-3px); }
  .step:hover .step__title { color: var(--accent); }

  /* Finish moment: the note lights up once the last step is reached */
  .process__note { transition: border-color .6s ease, box-shadow .6s ease; }
  .inner:has(.step:last-child.is-active) .process__note {
    border-color: rgba(110,139,255,.5);
    box-shadow: 0 0 0 4px rgba(110,139,255,.08), 0 18px 40px -20px rgba(110,139,255,.6);
  }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .process::after, .process .title em, .step__ring::after { animation: none; }
}

/* ==========================================================================
   Ready CTA + Migrate — desktop enhancements (≥1200px only; same layout and
   content, smaller screens untouched)
   ========================================================================== */
@media (min-width: 1200px) {
  /* ---------- Ready CTA ---------- */
  .ready__title em, .migrate__title em {
    background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #DCE6FF 50%, var(--accent) 65%, var(--accent) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: about-shimmer 5.5s ease-in-out infinite;
  }
  .ready__glow { animation: ready-glow 8s ease-in-out infinite alternate; }
  @keyframes ready-glow {
    from { transform: translate(-58%, -50%) scale(1);    opacity: .8; }
    to   { transform: translate(-42%, -50%) scale(1.12); opacity: 1; }
  }
  .ready__eyebrow .dot { animation: svc-dot-dark 2.2s ease-out infinite; }
  @keyframes svc-dot-dark { 0% { box-shadow: 0 0 0 0 rgba(110,139,255,.55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(110,139,255,0); } }
  /* Light streak along the top edge */
  .ready::after {
    content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(169,198,255,.9), transparent);
    box-shadow: 0 0 12px rgba(110,139,255,.8);
    animation: ready-streak 6s ease-in-out infinite;
  }
  @keyframes ready-streak { 0% { transform: translateX(-100%); opacity: 0; } 10% { opacity: 1; } 60% { transform: translateX(340%); opacity: 1; } 70%, 100% { transform: translateX(340%); opacity: 0; } }
  .ready__ctas .btn--outline { transition: border-color .3s ease, box-shadow .3s ease, color .3s ease; }
  .ready__ctas .btn--outline:hover { border-color: rgba(110,139,255,.6); box-shadow: 0 0 0 4px rgba(110,139,255,.1), 0 14px 30px -14px rgba(110,139,255,.6); }

  /* ---------- Migrate ---------- */
  .migrate__panel { box-shadow: 0 30px 70px -40px rgba(110,139,255,.35), inset 0 1px 0 rgba(255,255,255,.04); }

  /* Platforms light up one after another (6s loop) */
  .platform { animation: plat-light 6s ease-in-out infinite; }
  .platform:nth-child(2) { animation-delay: 1s; }
  .platform:nth-child(3) { animation-delay: 2s; }
  .platform:nth-child(4) { animation-delay: 3s; }
  .platform:nth-child(5) { animation-delay: 4s; }
  .platform:nth-child(6) { animation-delay: 5s; }
  @keyframes plat-light {
    0%, 22%, 100% { border-color: var(--line); box-shadow: none; }
    6%, 12%       { border-color: rgba(110,139,255,.6); box-shadow: 0 0 0 3px rgba(110,139,255,.1), 0 10px 26px -12px rgba(110,139,255,.6); }
  }
  .platform__mark { transition: transform .3s var(--ease); }
  .platform:hover .platform__mark { transform: scale(1.12) rotate(-6deg); }
  .platforms:hover .platform { animation-play-state: paused; }

  /* Divider lines: light flows inwards towards "Migrates to" */
  .migrate__divider::before, .migrate__divider::after {
    background-size: 200% 100%;
    animation: flow-in 2.4s linear infinite;
  }
  .migrate__divider::before { background-image: linear-gradient(90deg, var(--line) 0%, var(--line) 40%, var(--accent-soft) 50%, var(--line) 60%, var(--line) 100%); }
  .migrate__divider::after  { background-image: linear-gradient(270deg, var(--line) 0%, var(--line) 40%, var(--accent-soft) 50%, var(--line) 60%, var(--line) 100%); animation-name: flow-in-rev; }
  @keyframes flow-in     { from { background-position: 100% 0; } to { background-position: -100% 0; } }
  @keyframes flow-in-rev { from { background-position: -100% 0; } to { background-position: 100% 0; } }

  /* Shopify target: light sweep + pulsing mark */
  .migrate__target { position: relative; overflow: hidden; }
  .migrate__target::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(169,198,255,.18), transparent);
    transform: skewX(-20deg);
    animation: pillar-sheen-target 4s ease-in-out infinite;
  }
  @keyframes pillar-sheen-target { 0% { left: -40%; } 45%, 100% { left: 120%; } }
  .migrate__target-mark { animation: mark-pulse 2s ease-in-out infinite; }
  @keyframes mark-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(110,139,255,.6); } 50% { box-shadow: 0 0 0 6px rgba(110,139,255,0), 0 0 18px rgba(110,139,255,.7); } }

  /* "Rankings preserved" tick */
  .migrate__note span { display: inline-block; animation: tick-pulse 2.4s ease-in-out infinite; }
  @keyframes tick-pulse { 0%, 100% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.25); text-shadow: 0 0 10px rgba(143,217,182,.8); } }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .ready__title em, .migrate__title em, .ready__glow, .ready__eyebrow .dot, .ready::after,
  .platform, .migrate__divider::before, .migrate__divider::after,
  .migrate__target::after, .migrate__target-mark, .migrate__note span { animation: none; }
  .ready::after { display: none; }
}

/* Migrate platforms: column counts chosen so the longest names ("WooCommerce",
   "BigCommerce") always fit inside their boxes */
@media (min-width: 992px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 399px) { .platform { padding: 14px 10px; gap: 8px; } }
@media (max-width: 359px) { .platforms { grid-template-columns: 1fr; } }

/* ==========================================================================
   Footer — desktop enhancements (≥1200px only; same layout and content,
   smaller screens untouched)
   ========================================================================== */
@media (min-width: 1200px) {
  .site-footer { overflow: hidden; }
  .footer-cols, .footer-mid, .footer-bottom { position: relative; z-index: 1; }

  /* Top colour bar: light flows along it */
  .site-footer__bar {
    background: linear-gradient(90deg, var(--accent), var(--accent-soft), #fff, var(--accent-soft), var(--accent));
    background-size: 300% 100%;
    animation: bar-flow 6s linear infinite;
    box-shadow: 0 0 18px rgba(110,139,255,.55);
  }
  @keyframes bar-flow { from { background-position: 100% 0; } to { background-position: -200% 0; } }

  /* Background: soft glow from the top + faint dot grid + giant wordmark */
  .site-footer::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60% 45% at 50% 0%, rgba(110,139,255,.12), transparent 70%),
      radial-gradient(rgba(169,198,255,.12) 1px, transparent 1.6px) 0 0 / 28px 28px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.6) 60%, transparent 100%);
  }
  .site-footer::after {
    content: "BASIL TECH"; position: absolute; left: 50%; bottom: -0.18em; transform: translateX(-50%);
    font-size: 15.5vw; font-weight: 900; letter-spacing: -.04em; line-height: 1; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(110,139,255,.22);
    background: linear-gradient(180deg, rgba(110,139,255,.13), transparent 80%);
    -webkit-background-clip: text; background-clip: text;
    pointer-events: none;
  }

  /* Links slide right with a small arrow */
  .footer-links a, .footer-col a.footer-link {
    position: relative; display: inline-block; transition: color .25s ease, transform .3s var(--ease);
  }
  .footer-links a::before, .footer-col a.footer-link::before {
    content: "\2192"; position: absolute; left: -18px; top: 0; opacity: 0; color: var(--accent);
    transition: opacity .25s ease, transform .3s var(--ease); transform: translateX(-6px);
  }
  .footer-links a:hover, .footer-col a.footer-link:hover { color: var(--white); transform: translateX(16px); }
  .footer-links a:hover::before, .footer-col a.footer-link:hover::before { opacity: 1; transform: none; }

  /* Socials: lift + fill on hover */
  .social { transition: border-color .25s ease, color .25s ease, background .25s ease, transform .3s var(--ease), box-shadow .3s ease; }
  .social:hover { background: var(--accent); border-color: var(--accent); color: var(--white); transform: translateY(-3px); box-shadow: 0 12px 24px -10px rgba(110,139,255,.8); }

  /* Phone icon pulses */
  .footer-phone__icon { position: relative; }
  .footer-phone__icon::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--accent);
    animation: step-ripple 2.4s ease-out infinite;
  }
  .footer-phone:hover { color: var(--accent); }

  /* Newsletter field glows when focused */
  .newsletter__form { transition: border-color .3s ease, box-shadow .3s ease; }
  .newsletter__form:focus-within { border-color: rgba(110,139,255,.6); box-shadow: 0 0 0 4px rgba(110,139,255,.12), 0 16px 34px -16px rgba(110,139,255,.6); }
  .newsletter__form button { background: linear-gradient(90deg, var(--accent), #8BA2FF); box-shadow: 0 8px 20px -8px rgba(110,139,255,.8); }

  /* Logo: subtle glow */
  .footer-mid__logo { filter: drop-shadow(0 0 18px rgba(110,139,255,.25)); }
}
@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
  .site-footer__bar, .footer-phone__icon::after { animation: none; }
}

/* ==========================================================================
   Start-your-project pop-up (opened by [data-popup-open]; initProjectPopup)
   ========================================================================== */
.project-modal {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 24px;
  overflow-y: auto; overscroll-behavior: contain;
}
.project-modal[hidden] { display: none; }
html.modal-open { overflow: hidden; }

.project-modal__backdrop {
  position: fixed; inset: 0;
  background: rgba(4,5,9,.72);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .35s ease;
}
.project-modal__dialog {
  position: relative; width: 100%; max-width: 940px;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  border-radius: 26px; overflow: hidden;
  background: var(--white);
  box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .4s var(--ease), transform .5s cubic-bezier(.22, 1, .36, 1);
}
.project-modal.is-open .project-modal__backdrop { opacity: 1; }
.project-modal.is-open .project-modal__dialog { opacity: 1; transform: none; }

/* Left: dark brand panel */
.project-modal__side {
  position: relative; overflow: hidden;
  padding: clamp(28px, 3.4vw, 44px);
  display: flex; flex-direction: column;
  background: linear-gradient(150deg, #1B2340 0%, #141A2E 50%, #0E1119 100%);
  color: var(--white);
}
.project-modal__side::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 50% at 0% 0%, rgba(110,139,255,.28), transparent 70%),
    radial-gradient(rgba(169,198,255,.14) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
          mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.project-modal__side > * { position: relative; }
.project-modal__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft);
}
.project-modal__title {
  margin: 18px 0 0; font-size: clamp(28px, 3vw, 38px); line-height: 1.05; letter-spacing: -0.04em; font-weight: 700;
}
.project-modal__title em { color: var(--accent); }
.project-modal__lead { margin: 16px 0 0; font-size: 15.5px; line-height: 1.65; color: #B9C1D3; }
.project-modal__points { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.project-modal__points li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: #E3E8F3; }
.project-modal__points li::before {
  content: ""; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: rgba(110,139,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9C6FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 11px no-repeat;
}
.project-modal__contact {
  margin-top: auto; padding-top: 28px; display: grid; gap: 8px;
  font-family: var(--font-mono); font-size: 13px;
}
.project-modal__contact a { color: #C7D0E3; transition: color .2s ease; }
.project-modal__contact a:hover { color: var(--white); }

/* Right: the form (reuses the contact-form styles, minus its own card frame) */
.project-modal__form.contact-form { border: 0; border-radius: 0; box-shadow: none; padding: clamp(28px, 3.4vw, 44px); padding-top: clamp(30px, 3.6vw, 46px); }
.project-modal__form .contact-form__submit { margin-top: 17px; }
/* Fields fade up one after another on open */
.project-modal.is-open .project-modal__form > * { animation: pm-in .5s var(--ease) backwards; }
.project-modal.is-open .project-modal__form > :nth-child(n+3)  { animation-delay: .06s; }
.project-modal.is-open .project-modal__form > :nth-child(n+6)  { animation-delay: .12s; }
.project-modal.is-open .project-modal__form > :nth-child(n+9)  { animation-delay: .18s; }
.project-modal.is-open .project-modal__form > :nth-child(n+12) { animation-delay: .24s; }
@keyframes pm-in { from { opacity: 0; transform: translateY(10px); } }

.project-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid var(--ink-line); background: var(--white); color: var(--ink);
  transition: background .25s ease, color .25s ease, transform .3s var(--ease), border-color .25s ease;
}
.project-modal__close:hover { background: var(--ink); border-color: var(--ink); color: var(--white); transform: rotate(90deg); }

/* Tablets & phones: one column — compact brand header above the form */
@media (max-width: 767px) {
  .project-modal { padding: 12px; place-items: start center; }
  .project-modal__dialog { grid-template-columns: 1fr; border-radius: 22px; margin: auto 0; }
  .project-modal__side { padding: 26px 22px 22px; }
  .project-modal__title { font-size: 26px; margin-top: 12px; }
  .project-modal__lead { font-size: 14.5px; margin-top: 10px; }
  .project-modal__points, .project-modal__contact { display: none; }
  .project-modal__form.contact-form { padding: 24px 22px 26px; }
  .project-modal__close { top: 14px; right: 14px; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .project-modal__backdrop, .project-modal__dialog { transition: none; }
  .project-modal.is-open .project-modal__form > * { animation: none; }
}

/* ==========================================================================
   Service page — Shopify Design (shopify-design.html). Desktop-first, with the
   responsive rules at the end of this block; the
   classes are prefixed .sd- so nothing here affects the homepage.
   ========================================================================== */
.sd-head { max-width: 760px; margin: 0 auto; text-align: center; }
.sd-head .title { margin-top: 14px; }
.sd-head .lead { margin: 18px auto 0; max-width: 60ch; }
.sd-head--left { margin: 0; text-align: left; }
.sd-head--left .lead { margin-left: 0; }
.service-page .title em { color: var(--accent); }
.service-page .title--ink em { color: var(--ink-accent); }

/* ---------- Hero ---------- */
.sd-hero { position: relative; overflow: hidden; padding: 128px 24px 72px; background: var(--bg); }
.sd-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 60% at 78% 40%, rgba(110,139,255,.22), transparent 70%),
    radial-gradient(40% 50% at 10% 0%, rgba(60,89,228,.18), transparent 70%),
    radial-gradient(rgba(169,198,255,.12) 1px, transparent 1.6px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
          mask-image: linear-gradient(180deg, #000 60%, transparent);
}
.sd-hero__inner {
  position: relative; max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center;
}
.sd-crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-size: 13.5px; color: var(--dim); }
.sd-crumbs a { color: var(--muted); }
.sd-crumbs a:hover { color: var(--text); }
.sd-crumbs [aria-current] { color: var(--text-2); }
.sd-hero__title { margin: 0; font-size: clamp(42px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -0.045em; font-weight: 700; color: var(--text); }
.sd-hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent) 35%, #DCE6FF 50%, var(--accent) 65%, var(--accent) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sd-shimmer 5.5s ease-in-out infinite;
}
@keyframes sd-shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0% 0; } }
.sd-hero__lead { margin: 22px 0 0; max-width: 54ch; font-size: 18px; line-height: 1.65; color: var(--muted); }
.sd-hero__ctas { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }

/* Design board */
.sd-board { position: relative; height: 420px; }
.sd-board__screen {
  position: absolute; margin: 0; overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1); background: var(--surface);
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.9);
}
.sd-board__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sd-board__screen--back { width: 62%; height: 250px; right: 0; top: 6px; opacity: .55; transform: rotate(4deg); }
.sd-board__screen--main { width: 82%; height: 310px; left: 0; top: 70px; z-index: 1; animation: sd-float 8s ease-in-out infinite alternate; }
@keyframes sd-float { from { translate: 0 -8px; } to { translate: 0 8px; } }
.sd-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(14,16,22,.82); border: 1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
  color: var(--text); font-size: 13px;
  animation: sd-float 7s ease-in-out infinite alternate;
}
.sd-chip strong { display: block; font-size: 13.5px; }
.sd-chip small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted-2); }
/* Tagline chips floating around the hero screenshots */
.sd-chip__icon {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: rgba(110,139,255,.16); border: 1px solid rgba(110,139,255,.3); color: var(--accent-soft);
}
.sd-chip--palette { right: 2%; top: 0; animation-delay: -2s; }
.sd-chip--type { left: -4%; top: 34px; animation-delay: -4s; }
.sd-chip--button { right: -3%; bottom: 64px; animation-delay: -1s; }
.sd-chip--devices { left: 6%; bottom: 6px; animation-delay: -5s; }

/* ---------- Intro + testimonial ---------- */
.sd-intro__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; align-items: center;
}
.sd-intro__title { margin-top: 14px; max-width: 16ch; }
.sd-intro__grid p { margin: 20px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.sd-intro__checks { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.sd-intro__checks li {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--ink-line); font-size: 14.5px; font-weight: 500; color: var(--ink-text);
  transition: translate .35s var(--ease), box-shadow .35s ease, border-color .35s ease;
}
.sd-intro__checks li::before { content: "\2713"; color: var(--ink-accent); font-weight: 700; }
.sd-quote {
  position: relative; margin: 0; padding: 52px 44px 44px; min-height: 380px;
  display: flex; flex-direction: column;
  border-radius: 24px; background: linear-gradient(150deg, #1B2340, #10131C);
  color: var(--white); overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(23,32,64,.75);
}
.sd-quote::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(110,139,255,.35), transparent); pointer-events: none;
}
.sd-quote__mark { position: absolute; right: 30px; top: 6px; font-size: 120px; line-height: 1; font-weight: 800; color: rgba(110,139,255,.25); }
.sd-quote .rating__stars { color: #FFC857; letter-spacing: 2px; }
.sd-quote blockquote { margin: 18px 0 28px; font-size: 20px; line-height: 1.55; letter-spacing: -0.015em; color: #E7EBF5; }
.sd-quote figcaption { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: 2px; font-size: 14px; color: var(--muted); }
.sd-quote figcaption strong { font-size: 16px; color: var(--white); }
/* Company-based testimonial credit (service pages + About): initial badge, company, person */
.sd-quote .quote-credit, .ab-quote .quote-credit { display: flex; align-items: center; gap: 12px; text-align: left; white-space: normal; }
.quote-credit__badge {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #6E8BFF, #2F49B8); color: var(--white);
  font-size: 17px; font-weight: 700; line-height: 1; box-shadow: 0 6px 16px -6px rgba(110,139,255,.7);
}
.quote-credit__who { display: grid; gap: 2px; line-height: 1.3; }
.quote-credit__who strong { font-size: 16px; color: var(--white); }
.quote-credit__who small { font-size: 13.5px; color: var(--muted); }

/* ---------- What's included ---------- */
.sd-included { background: var(--white); }
/* One list in a two-column grid, so it reads 01 02 / 03 04 and stacks in order on phones */
.sd-included.section-pad { padding-top: 84px; padding-bottom: 84px; }
.sd-rows {
  margin: 40px auto 0; padding: 0; list-style: none; max-width: var(--container);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
.sd-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center;
  padding: 20px 24px; border-radius: 16px; background: var(--light);
  position: relative; border: 1px solid transparent;
  transition: translate .35s var(--ease), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
/* Hover: card lifts onto white with a soft blue edge, and its number fills in */
.sd-row:hover {
  translate: 0 -4px; background: var(--white); border-color: rgba(47,73,184,.18);
  box-shadow: 0 24px 44px -26px rgba(47,73,184,.45);
}
.sd-row:hover .sd-row__num { filter: saturate(1.6) brightness(.85) contrast(1.4); }
.sd-row:hover .sd-row__title { color: var(--ink-accent); }
.sd-row__num {
  font-size: 56px; font-weight: 700; line-height: .9; letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(47,73,184,.5), rgba(110,139,255,.16));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .35s ease;
}
.sd-row__title { margin: 2px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); transition: color .35s ease; }
.sd-row__desc { margin: 5px 0 0; max-width: 64ch; font-size: 14.5px; line-height: 1.6; color: var(--ink-body); }

/* ---------- Process ---------- */
.sd-process__inner { position: relative; max-width: var(--container); margin: 0 auto; }
/* Five joined panels, light → dark across the brand palette (no angled cuts) */
.sd-flow {
  margin: 52px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 40px 80px -46px rgba(23,32,64,.6);
}
.sd-flow__step {
  position: relative; display: flex; flex-direction: column; min-height: 400px;
  padding: 40px 28px 34px;
  --fg: var(--ink); --muted-fg: var(--ink-body); --rule-c: rgba(11,13,18,.14);
  background: var(--bg-c); color: var(--fg);
  transition: filter .35s ease, box-shadow .35s ease;
}
.sd-flow__step--1 { --bg-c: var(--white); }
.sd-flow__step--2 { --bg-c: #E4EAFE; }
.sd-flow__step--3 { --bg-c: var(--accent); --fg: #fff; --muted-fg: rgba(255,255,255,.86); --rule-c: rgba(255,255,255,.35); }
.sd-flow__step--4 { --bg-c: var(--ink-accent); --fg: #fff; --muted-fg: rgba(255,255,255,.8); --rule-c: rgba(255,255,255,.28); }
.sd-flow__step--5 { --bg-c: #0B0D12; --fg: #fff; --muted-fg: rgba(255,255,255,.72); --rule-c: rgba(255,255,255,.18); }
.sd-flow__num { font-size: 76px; font-weight: 700; line-height: .85; letter-spacing: -0.05em; color: var(--fg); opacity: .32; transition: opacity .35s ease, translate .45s var(--ease); }
.sd-flow__title {
  margin: 26px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--rule-c);
  font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--fg);
}
.sd-flow__desc { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted-fg); }
.sd-flow__icon { margin-top: auto; padding-top: 28px; color: var(--fg); opacity: .9; transition: translate .45s var(--ease), opacity .35s ease; }
.sd-flow__icon svg { display: block; }
.sd-deliver {
  margin-top: 24px; padding: 22px 26px; border-radius: 18px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: #E9EDF6; border: 1px solid var(--ink-line);
}
.sd-deliver__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.sd-deliver ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.sd-deliver li { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--ink-text); }
.sd-deliver li::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: linear-gradient(135deg, var(--accent), var(--ink-accent)); }

/* ---------- Why Basil Tech: typical approach vs ours ---------- */
.sd-diff { padding: 80px 24px; background: radial-gradient(80% 90% at 85% 50%, #141C36 0%, var(--bg) 70%); }
.sd-diff__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 64px; align-items: center; }
.sd-diff .sd-head .title { max-width: 14ch; }
.sd-diff__table { position: relative; }
/* Our column sits on a raised, glowing panel; the typical column steps back */
.sd-diff__table::before {
  content: ""; position: absolute; top: -16px; bottom: -16px; right: 0; left: 40%; border-radius: 22px; pointer-events: none;
  background: linear-gradient(160deg, rgba(110,139,255,.24) 0%, rgba(47,73,184,.12) 55%, rgba(110,139,255,.06) 100%);
  border: 1px solid rgba(110,139,255,.5);
  box-shadow: 0 40px 90px -40px rgba(110,139,255,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.sd-diff__vs {
  position: absolute; z-index: 2; left: 40%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg); border: 1px solid rgba(110,139,255,.5); color: var(--accent-soft);
  background: #0E1324; box-shadow: 0 10px 24px -10px rgba(0,0,0,.8);
  font-size: 20px; font-weight: 700; font-style: italic; letter-spacing: -0.01em; padding-right: 2px;
}
.sd-diff__labels, .sd-diff__row { position: relative; display: grid; grid-template-columns: 40% 60%; }
.sd-diff__label {
  display: flex; align-items: center; padding: 22px 24px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5F6672;
}
.sd-diff__label--us { justify-content: center; gap: 10px; }
.sd-diff__label--us img { display: block; height: 30px; width: auto; }
.sd-diff__label--us em {
  font-style: normal; padding: 4px 9px; border-radius: 999px;
  background: rgba(110,139,255,.18); border: 1px solid rgba(110,139,255,.35); color: var(--accent-soft);
}
.sd-diff__rows { margin: 0; padding: 0 0 6px; list-style: none; }
.sd-diff__row + .sd-diff__row .sd-diff__them { border-top: 1px dashed rgba(255,255,255,.08); }
.sd-diff__row + .sd-diff__row .sd-diff__us { border-top: 1px solid rgba(110,139,255,.2); }
.sd-diff__them, .sd-diff__us { padding: 18px 24px; }
.sd-diff__them {
  margin: 0; display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.55; color: #6B7280;
  text-decoration: line-through; text-decoration-color: rgba(139,147,160,.4); text-decoration-thickness: 1px;
  transition: color .35s ease;
}
.sd-diff__x {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: rgba(239,68,68,.1); color: #C46B6B;
}
.sd-diff__us { display: flex; gap: 14px; align-items: flex-start; padding-left: 32px; transition: background .35s ease; }
.sd-diff__tick {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
  box-shadow: 0 0 0 4px rgba(110,139,255,.2), 0 6px 16px -4px rgba(110,139,255,.7);
  transition: transform .35s var(--ease);
}
.sd-diff__us h3 { margin: 2px 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.sd-diff__us p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: #C3CBDD; }

/* ---------- Design work ---------- */
.sd-work { background: var(--white); padding: 80px 24px; }
.sd-work__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sd-case {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; border: 1px solid rgba(11,13,18,.08);
  min-height: 450px; display: flex; flex-direction: column; justify-content: flex-end; background: #0B0D12;
  transition: translate .45s var(--ease), border-color .45s ease, box-shadow .45s ease;
  box-shadow: 0 30px 60px -36px rgba(23,32,64,.45);
}
.sd-case:hover { border-color: rgba(47,73,184,.4); box-shadow: 0 44px 80px -40px rgba(23,32,64,.6); translate: 0 -6px; }
a.sd-case { cursor: pointer; color: inherit; }
a.sd-case:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.sd-case__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.sd-case__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.1s var(--ease); }
.sd-case:hover .sd-case__media img { transform: scale(1.06); }
.sd-case__shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,13,18,0) 12%, rgba(11,13,18,.55) 34%, rgba(11,13,18,.9) 52%, #0B0D12 72%);
  transition: opacity .45s ease;
}
.sd-case__body { position: relative; padding: 24px 28px 26px; }
.sd-case__tag {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #fff;
}
.sd-case__title { margin: 12px 0 0; max-width: 30ch; font-size: 23px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 600; color: #fff; }
.sd-work__more { margin-top: 28px; text-align: center; }
/* Slider controls only appear once the grid becomes a slider (≤767px) */
.sd-work-slider .slider-controls { display: none; }


@media (prefers-reduced-motion: reduce) {
  .sd-hero__title em, .sd-board__screen--main, .sd-chip { animation: none; }
}

/* ---------- Mobile shopping experience ---------- */
.sd-mobile {
  position: relative; overflow: hidden; border-top: 1px solid var(--line);
  background: radial-gradient(70% 60% at 50% 0%, #0F1526 0%, var(--bg) 65%);
}
.sd-mobile.section-pad { padding-top: 72px; padding-bottom: 72px; }
.sd-mstage {
  position: relative; margin-top: 36px;
  display: grid; grid-template-columns: minmax(0, 1fr) 290px minmax(0, 1fr); align-items: stretch;
}
.sd-mstage__glow {
  position: absolute; left: 50%; top: 50%; width: 540px; height: 540px; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(110,139,255,.38), rgba(47,73,184,.16) 55%, transparent 100%);
  filter: blur(10px);
}
.sd-mstage__col { position: relative; }
/* Frosted callout chips, joined to the phone by a thin line */
.sd-mchip {
  position: absolute; top: var(--y); transform: translateY(-50%); width: min(300px, calc(100% - 72px));
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -30px rgba(0,0,0,.9);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.sd-mstage__col--left .sd-mchip { right: 72px; }
.sd-mstage__col--right .sd-mchip { left: 72px; }
.sd-mchip::after {
  content: ""; position: absolute; top: 50%; width: 72px; height: 1px;
  background: linear-gradient(90deg, rgba(110,139,255,.9), rgba(110,139,255,.25));
}
.sd-mstage__col--left .sd-mchip::after { left: 100%; }
.sd-mstage__col--right .sd-mchip::after { right: 100%; transform: scaleX(-1); }
.sd-mchip__num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 12px; font-weight: 700;
  box-shadow: 0 0 0 4px rgba(110,139,255,.2);
}
.sd-mchip strong { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
.sd-mchip span > span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* The phone */
.sd-phone {
  position: relative; z-index: 1; width: 290px; padding: 10px; border-radius: 46px;
  background: linear-gradient(160deg, #2A2F3B, #12151C 40%, #1D212B);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 60px 120px -40px rgba(0,0,0,.95), 0 0 80px -20px rgba(110,139,255,.45);
}
.sd-phone__screen {
  position: relative; overflow: hidden; border-radius: 37px; background: var(--white); color: var(--ink);
  display: flex; flex-direction: column;
}
.sd-phone__status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px 6px; font-size: 12px; }
.sd-phone__status b { font-weight: 700; }
.sd-phone__status i { width: 22px; height: 10px; border-radius: 3px; border: 1.5px solid var(--ink); }
.sd-phone__notch { position: absolute; left: 50%; top: 9px; width: 88px; height: 24px; transform: translateX(-50%); border-radius: 999px; background: #0B0D12; }
.sd-phone__nav { display: flex; align-items: center; justify-content: space-between; padding: 8px 18px 10px; border-bottom: 1px solid var(--ink-line); }
.sd-phone__nav b { font-size: 15px; font-weight: 800; letter-spacing: -0.03em; }
.sd-phone__cart { position: relative; display: grid; }
.sd-phone__cart em { position: absolute; top: -5px; right: -7px; min-width: 15px; height: 15px; border-radius: 99px; display: grid; place-items: center; background: var(--accent); color: #fff; font-style: normal; font-size: 9px; font-weight: 700; }
.sd-phone [data-m] { position: relative; }
.sd-phone__gallery { height: 214px; background: #EEF0F4; }
.sd-phone__gallery img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-phone__count { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.9); font-size: 10.5px; font-weight: 600; }
.sd-phone__dots { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: flex; gap: 5px; }
.sd-phone__dots i { width: 6px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.6); }
.sd-phone__dots i.is-on { width: 18px; background: #fff; }
.sd-phone__info { display: grid; gap: 7px; padding: 12px 14px 14px; }
.sd-phone__row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sd-phone__row h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.sd-phone__price { font-size: 16px; font-weight: 700; white-space: nowrap; }
.sd-phone__price s { margin-left: 4px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.sd-phone__rating { font-size: 11px; color: #F5A524; letter-spacing: 1px; }
.sd-phone__rating em { font-style: normal; letter-spacing: 0; color: var(--ink-body); }
.sd-phone__buy { display: grid; gap: 8px; margin-top: 2px; }
.sd-phone__label { font-size: 11.5px; color: var(--ink-body); }
.sd-phone__label b { color: var(--ink); }
.sd-phone__swatches { display: flex; gap: 8px; }
.sd-phone__swatches i { width: 24px; height: 24px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sd-phone__swatches i.is-on { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink); }
.sd-phone__sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sd-phone__sizes b { padding: 7px 0; text-align: center; border-radius: 8px; border: 1px solid var(--ink-line); font-size: 11.5px; font-weight: 600; }
.sd-phone__sizes b.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.sd-phone__sizes b.is-out { color: #B8BFCC; text-decoration: line-through; }
.sd-phone__btn { margin-top: 2px; padding: 12px; border-radius: 999px; background: var(--ink); color: #fff; text-align: center; font-size: 13px; font-weight: 600; }
.sd-phone__ship { display: grid; gap: 6px; padding: 10px 12px 10px 40px; border-radius: 12px; background: #F6F7FA; border: 1px solid var(--ink-line); }
.sd-phone__ship > span { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-text); }
.sd-phone__ship svg { color: #1F9D63; flex: none; }
.sd-phone__ship .sd-phone__acc { justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--ink-line); font-weight: 600; color: var(--ink); }
/* Numbered markers on the screen, matching the callouts */
.sd-phone__pin {
  position: absolute; z-index: 2; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 3px #fff, 0 6px 14px -4px rgba(47,73,184,.7);
}
.sd-phone__gallery .sd-phone__pin { left: 10px; top: 48%; }
.sd-phone__buy .sd-phone__pin { right: 0; top: 8px; margin-top: 0; }
.sd-phone__ship .sd-phone__pin { left: 9px; display: grid; gap: 0; font-size: 11px; color: #fff; }

/* Three principles */
.sd-mprinc {
  margin: 44px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0;
  border-top: 1px solid var(--line);
}
.sd-mprinc__item { position: relative; padding: 26px 32px 0; }
.sd-mprinc__item:first-child { padding-left: 0; }
.sd-mprinc__item + .sd-mprinc__item { border-left: 1px solid var(--line); }
.sd-mprinc__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(110,139,255,.1); border: 1px solid rgba(110,139,255,.25); color: var(--accent-soft);
  transition: background .35s ease, color .35s ease, box-shadow .35s ease, translate .4s var(--ease);
}
.sd-mprinc__title { margin: 16px 0 0; font-size: 19px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--text); transition: color .35s ease; }
.sd-mprinc__desc { margin: 8px 0 0; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- Design anatomy (example product page with pins) ---------- */
.sd-anatomy__inner { max-width: var(--container); margin: 0 auto; }
.sd-anatomy__lead { margin: 18px auto 0; max-width: 58ch; font-size: 17px; line-height: 1.65; color: var(--ink-body); }
.sd-anatomy { padding-top: 84px; padding-bottom: 84px; }
.sd-anatomy__grid { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: center; }

/* The mock product page */
.sd-pdp {
  position: relative; border-radius: 20px; overflow: visible;
  background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 50px 90px -50px rgba(11,13,18,.45), 0 4px 14px -8px rgba(11,13,18,.12);
}
.sd-pdp__bar {
  display: flex; align-items: center; gap: 7px; padding: 12px 16px;
  border-bottom: 1px solid var(--ink-line); background: #F6F7FA; border-radius: 20px 20px 0 0;
}
.sd-pdp__bar > span { width: 9px; height: 9px; border-radius: 50%; background: #D6DBE5; }
.sd-pdp__bar em { margin-left: 14px; padding: 4px 14px; border-radius: 999px; background: var(--white); border: 1px solid var(--ink-line); font-style: normal; font-size: 11.5px; color: var(--ink-muted); }
.sd-pdp__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 20px 22px 22px; transition: opacity .25s ease; }
.sd-pdp__gallery, .sd-pdp__price, .sd-pdp__variants, .sd-pdp__cta, .sd-pdp__trust, .sd-pdp__reviews {
  position: relative; border-radius: 12px;
  outline: 2px solid transparent; outline-offset: 6px;
  transition: outline-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.sd-pdp [data-anat].is-focus { outline-color: var(--accent); box-shadow: 0 0 0 10px rgba(110,139,255,.08); background: rgba(110,139,255,.06); }
.sd-pdp__main { aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #EEF0F4; }
.sd-pdp__main img, .sd-pdp__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd-pdp__thumbs { margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sd-pdp__thumbs img { aspect-ratio: 1; border-radius: 8px; }
.sd-pdp__thumbs img:first-child { outline: 2px solid var(--ink); outline-offset: 1px; }
.sd-pdp__info { display: flex; flex-direction: column; gap: 12px; }
.sd-pdp__crumb { font-size: 11.5px; color: var(--ink-muted); }
.sd-pdp__title { margin: -8px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.sd-pdp__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 4px 0; }
.sd-pdp__now { font-size: 22px; font-weight: 700; color: var(--ink); }
.sd-pdp__price s { font-size: 14px; color: var(--ink-muted); }
.sd-pdp__rating { flex-basis: 100%; font-size: 12.5px; color: #F5A524; letter-spacing: 1px; }
.sd-pdp__rating em { font-style: normal; letter-spacing: 0; color: var(--ink-body); margin-left: 4px; }
.sd-pdp__variants { display: grid; gap: 8px; padding: 4px 0; }
.sd-pdp__label { font-size: 12.5px; color: var(--ink-body); }
.sd-pdp__label b { color: var(--ink); }
.sd-pdp__swatches { display: flex; gap: 8px; }
.sd-pdp__swatches i { width: 26px; height: 26px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.sd-pdp__swatches i.is-on { box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--ink); }
.sd-pdp__sizes { display: flex; gap: 6px; }
.sd-pdp__sizes b { min-width: 38px; padding: 7px 0; text-align: center; border-radius: 8px; border: 1px solid var(--ink-line); font-size: 12.5px; font-weight: 600; color: var(--ink-text); }
.sd-pdp__sizes b.is-on { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sd-pdp__sizes b.is-out { color: #B8BFCC; text-decoration: line-through; }
.sd-pdp__cta { display: flex; gap: 8px; }
.sd-pdp__btn { flex: 1; padding: 14px; border-radius: 999px; background: var(--ink); color: var(--white); text-align: center; font-size: 14px; font-weight: 600; }
.sd-pdp__trust { margin: 0; padding: 4px 0; list-style: none; display: grid; gap: 6px; }
.sd-pdp__trust li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-text); }
.sd-pdp__trust li::before { content: "\2713"; color: #1F9D63; font-weight: 700; }
.sd-pdp__reviews {
  grid-column: 1 / -1; padding: 16px 18px; background: #F6F7FA; border: 1px solid var(--ink-line);
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
}
.sd-pdp__stars { color: #F5A524; font-size: 13px; letter-spacing: 1px; }
.sd-pdp__reviews p { margin: 0; font-size: 13.5px; color: var(--ink-text); }
.sd-pdp__who { font-size: 11.5px; color: var(--ink-muted); }
.sd-pdp__tag {
  position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}

/* Pins */
/* Plain dots (numbers live only in the list); only the active dot pulses */
.sd-pin {
  position: absolute; z-index: 3; top: -8px; right: -8px;
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  background: var(--accent); opacity: .55;
  box-shadow: 0 0 0 3px var(--white), 0 4px 10px -2px rgba(47,73,184,.5);
  transition: transform .3s var(--ease), background .3s ease, opacity .3s ease;
}
.sd-pin::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--accent);
  pointer-events: none; opacity: 0;
}
.sd-pin.is-active::after { animation: sd-pin-pulse 2s ease-out infinite; }
@keyframes sd-pin-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } }
.sd-pin.is-active { background: var(--ink-accent); opacity: 1; transform: scale(1.25); }
.sd-pdp__gallery > .sd-pin { top: 14px; right: 14px; }
.sd-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; opacity: 1; }

/* Explanation list */
.sd-anat__list { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
/* Thin rail joining the numbers */
.sd-anat__list::before { content: ""; position: absolute; left: 31px; top: 24px; bottom: 24px; width: 1px; background: var(--ink-line); }
.sd-anat__item {
  position: relative; overflow: hidden;
  display: flex; gap: 14px; padding: 11px 16px; border-radius: 14px; cursor: pointer;
  border: 1px solid transparent; outline: none;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sd-anat__item.is-active { background: var(--light); border-color: rgba(47,73,184,.22); box-shadow: 0 18px 36px -26px rgba(47,73,184,.5); }
.sd-anat__num {
  position: relative; z-index: 1; background: var(--white);
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--ink-line); font-size: 13px; font-weight: 700; color: var(--ink-muted);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.sd-anat__item.is-active .sd-anat__num { background: var(--accent); border-color: var(--accent); color: var(--white); box-shadow: 0 0 0 4px rgba(110,139,255,.18); }
/* Progress bar on the active item while auto-playing */
.sd-anat__bar {
  position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--ink-accent));
  transform: scaleX(0); transform-origin: left; opacity: 0;
}
.sd-anatomy.is-playing .sd-anat__item.is-active .sd-anat__bar { opacity: 1; animation: sd-anat-progress 3.2s linear forwards; }
@keyframes sd-anat-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Matching area lights up; the rest of the mock steps back */
.sd-pdp [data-anat] { transition: outline-color .35s ease, background .35s ease, box-shadow .35s ease, opacity .35s ease; }
.sd-pdp.has-focus [data-anat]:not(.is-focus) { opacity: .55; }
.sd-anatomy.is-before .sd-pdp [data-anat] { opacity: 1; background: none; }
.sd-anat__item strong { display: block; font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.sd-anat__item span > span { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--ink-body); }
@media (prefers-reduced-motion: reduce) { .sd-pin::after { animation: none; } }

/* ---------- Design anatomy: Before / After switch ---------- */
.sd-pdp-wrap { display: grid; }
.sd-toggle-row { margin-top: 30px; display: flex; justify-content: center; }
.sd-toggle {
  position: relative; justify-self: center; display: inline-grid; grid-template-columns: 1fr 1fr;
  padding: 6px; border-radius: 999px; background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 14px 30px -18px rgba(23,32,64,.35);
}
.sd-toggle__btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 24px; border: 0; background: none; cursor: pointer; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-body); white-space: nowrap; transition: color .3s ease;
}
.sd-toggle__btn svg { flex: none; opacity: .7; transition: opacity .3s ease; }
.sd-toggle__btn.is-on { color: var(--white); }
.sd-toggle__btn.is-on svg { opacity: 1; }
.sd-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sd-toggle__thumb {
  position: absolute; z-index: 0; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent));
  box-shadow: 0 10px 22px -8px rgba(47,73,184,.65);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1), background .3s ease, box-shadow .3s ease;
  transform: translateX(100%);
}
.sd-anatomy.is-before .sd-toggle__thumb { transform: translateX(0); background: #7C8496; box-shadow: 0 10px 22px -10px rgba(11,13,18,.5); }

/* Before view: a typical, unoptimised product page */
.sd-pdp__select { display: none; }
.sd-anatomy.is-before .sd-pdp__select {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px; border: 1px solid var(--ink-line); border-radius: 6px; font-size: 13px; color: var(--ink-muted);
}
.sd-anatomy.is-before .sd-pdp__variants,
.sd-anatomy.is-before .sd-pdp__trust,
.sd-anatomy.is-before .sd-pdp__reviews,
.sd-anatomy.is-before .sd-pdp__rating,
.sd-anatomy.is-before .sd-pdp__price s,
.sd-anatomy.is-before .sd-pdp__thumbs,
.sd-anatomy.is-before .sd-pin { display: none; }
.sd-anatomy.is-before .sd-pdp__main { filter: saturate(.4) brightness(.95); aspect-ratio: 4 / 3; }
.sd-anatomy.is-before .sd-pdp__now { font-size: 16px; font-weight: 500; color: var(--ink-body); }
.sd-anatomy.is-before .sd-pdp__title { font-size: 19px; font-weight: 500; }
.sd-anatomy.is-before .sd-pdp__btn { background: #E6E8EE; color: var(--ink-muted); font-weight: 500; padding: 10px; border-radius: 4px; }
.sd-anatomy.is-before [data-anat] { outline-color: transparent; box-shadow: none; }
.sd-pdp.is-swapping .sd-pdp__body { opacity: 0; }

.sd-anat__side { display: grid; gap: 14px; }
.sd-anat__note {
  display: none; padding: 20px 22px; border-radius: 16px; background: #FFF6E5; border: 1px solid #F5D9A3; color: #6B4B12;
}
.sd-anat__note strong { display: block; font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: #3E2A06; }
.sd-anat__note ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.sd-anat__note li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.sd-anat__note li span { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(196,107,59,.14); color: #B4532A; }
.sd-anat__note p { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #F5D9A3; font-size: 14px; }
.sd-anat__note b { color: #3E2A06; }
/* Before view: the note replaces the design list so the section stays compact */
.sd-anatomy.is-before .sd-anat__note { display: flex; flex-direction: column; justify-content: center; }
/* Stretch the note to the product page's height */
.sd-anatomy.is-before .sd-anatomy__grid { align-items: stretch; }
.sd-anatomy.is-before .sd-anat__side { align-content: stretch; }
.sd-anatomy.is-before .sd-anat__note p { margin-top: auto; }
.sd-anatomy.is-before .sd-anat__note ul { margin-top: 18px; gap: 14px; }
.sd-anatomy.is-before .sd-anat__list { display: none; }

/* Mobile section tabs (phones only): one callout at a time, its area lit up on the phone */
.sd-mtabs { display: none; }
@media (max-width: 767px) {
  .sd-mtabs {
    order: -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;
    padding: 5px; margin-bottom: 22px; border-radius: 999px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  }
  .sd-mtab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 8px; border: 0; border-radius: 999px; background: none; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease;
  }
  .sd-mtab i {
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px;
    background: rgba(255,255,255,.1); color: var(--text-2); transition: background .3s ease, color .3s ease;
  }
  .sd-mtab.is-active { background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff; box-shadow: 0 10px 24px -10px rgba(110,139,255,.8); }
  .sd-mtab.is-active i { background: #fff; color: var(--ink-accent); }
  .sd-mtab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Only the chosen callout shows, floating on the phone next to its area (main.js sets the position) */
  .sd-mstage.has-mtabs .sd-mchip { display: none; }
  .sd-mstage.has-mtabs .sd-mchip.is-active {
    display: flex; position: absolute; z-index: 3;
    top: var(--mt-top, 0); left: var(--mt-left, 0); width: var(--mt-w, auto);
    padding: 12px 14px; background: rgba(11,13,18,.9); border-color: rgba(110,139,255,.55);
    box-shadow: 0 18px 40px -12px rgba(0,0,0,.85), 0 0 0 4px rgba(110,139,255,.15);
    animation: sd-mtip-in .4s var(--ease) both;
  }
  .sd-mstage.has-mtabs .sd-mchip.is-active strong { font-size: 14.5px; }
  .sd-mstage.has-mtabs .sd-mchip.is-active span > span { font-size: 12.5px; }
  .sd-mstage.has-mtabs .sd-phone { margin-bottom: 0; }
  @keyframes sd-mtip-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

  /* Matching area on the phone screen lights up */
  .sd-phone [data-m] { transition: opacity .35s ease, outline-color .35s ease; outline: 2px solid transparent; outline-offset: -2px; }
  .sd-mstage.has-mtabs .sd-phone [data-m]:not(.is-focus) { opacity: .45; }
  .sd-mstage.has-mtabs .sd-phone [data-m].is-focus { outline-color: var(--accent); }
  .sd-mstage.has-mtabs .sd-phone__pin { opacity: 0; transition: opacity .3s ease; }
  .sd-mstage.has-mtabs [data-m].is-focus > .sd-phone__pin { opacity: 1; }
}

/* Design anatomy on phones: the product page shrinks to a preview (same two-column layout
   as desktop, scaled with zoom) and the list shows titles only; the active point opens its text */
@media (max-width: 767px) {
  .sd-pdp { zoom: .8; }
  .sd-pin { width: 20px; height: 20px; top: -10px; right: -10px; }
  .sd-anat__list { gap: 0; }
  .sd-anat__item { padding: 10px 12px; gap: 12px; align-items: center; }
  .sd-anat__item.is-active { align-items: flex-start; }
  .sd-anat__num { width: 26px; height: 26px; font-size: 12px; }
  .sd-anat__list::before { left: 25px; }
  .sd-anat__item strong { font-size: 15px; }
  .sd-anat__item span > span { display: none; font-size: 13.5px; }
  .sd-anat__item.is-active span > span { display: block; }
}
@media (max-width: 575px) { .sd-pdp { zoom: .7; } }
@media (max-width: 480px) { .sd-pdp { zoom: .6; } }

/* ---------- Enterprise challenges (Shopify Plus page): challenge on top, our fix below ---------- */
.sd-chal__grid {
  margin: 44px auto 0; padding: 0; list-style: none; max-width: var(--container);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;
}
.sd-chal__card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 30px 60px -44px rgba(23,32,64,.5);
  transition: translate .4s var(--ease), box-shadow .4s ease;
}
.sd-chal__card:hover { translate: 0 -4px; box-shadow: 0 40px 70px -40px rgba(47,73,184,.45); }
/* Tag on top, then icon and title side by side */
.sd-chal__problem { padding: 26px 28px 30px; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 18px 14px; align-items: center; }
.sd-chal__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.sd-chal__tag {
  padding: 5px 11px; border-radius: 999px; background: rgba(196,107,59,.1); border: 1px solid rgba(196,107,59,.22);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #B4532A;
}
.sd-chal__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: var(--light); border: 1px solid var(--ink-line); color: var(--ink-body);
}
.sd-chal__title { margin: 0; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
/* Arrow badge sitting on the seam between challenge and solution */
.sd-chal__arrow {
  position: relative; z-index: 1; align-self: flex-start; margin: -19px 0 -19px 28px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--ink-accent); border: 1px solid var(--ink-line);
  box-shadow: 0 8px 18px -8px rgba(47,73,184,.5);
  transition: transform .4s var(--ease);
}
.sd-chal__card:hover .sd-chal__arrow { transform: translateY(3px); }
.sd-chal__fix {
  flex: 1; padding: 32px 28px 28px;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
}
.sd-chal__label {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.sd-chal__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #A9F0C8; box-shadow: 0 0 0 3px rgba(169,240,200,.25); }
.sd-chal__fix p { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: #fff; }
@media (max-width: 1199px) {
  .sd-chal__grid { margin-top: 40px; gap: 20px; }
  .sd-chal__title { font-size: 20px; }
}
@media (max-width: 991px) {
  .sd-chal__grid { gap: 18px; }
  .sd-chal__problem { padding: 22px 22px 26px; }
  .sd-chal__fix { padding: 30px 22px 24px; }
  .sd-chal__arrow { margin-left: 22px; }
  .sd-chal__title { font-size: 19px; }
  .sd-chal__fix p { font-size: 15px; }
}
@media (max-width: 767px) {
  .sd-chal__grid { grid-template-columns: minmax(0, 1fr); margin-top: 32px; max-width: 560px; }
}
@media (max-width: 575px) {
  .sd-chal__grid { margin-top: 28px; gap: 16px; }
  .sd-chal__card { border-radius: 18px; }
  .sd-chal__problem { padding: 20px 20px 24px; grid-template-columns: 42px minmax(0, 1fr); gap: 16px 12px; }
  .sd-chal__icon { width: 42px; height: 42px; border-radius: 11px; }
  .sd-chal__title { font-size: 18px; }
  .sd-chal__arrow { width: 34px; height: 34px; margin: -17px 0 -17px 20px; }
  .sd-chal__fix { padding: 28px 20px 22px; }
  .sd-chal__fix p { font-size: 14.5px; }
}
@media (max-width: 399px) {
  .sd-chal__problem { padding: 18px 18px 22px; }
  .sd-chal__fix { padding: 26px 18px 20px; }
  .sd-chal__title { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .sd-chal__card:hover { translate: none; } }

/* ---------- Services overview page (services.html): centred hero + 3×2 card grid ---------- */
.sd-hero--center .sd-hero__inner { grid-template-columns: minmax(0, 1fr); max-width: 860px; text-align: center; }
.sd-hero--center .sd-crumbs, .sd-hero--center .sd-hero__ctas { justify-content: center; }
.sd-hero--center .sd-hero__lead { margin-left: auto; margin-right: auto; }
.sv-list { padding: 90px 24px; }
.sv-grid {
  margin: 44px auto 0; padding: 0; list-style: none; max-width: var(--container);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.sv-grid > li { display: flex; }
.sv-card {
  flex: 1; display: flex; flex-direction: column; padding: 30px 28px 26px; border-radius: 20px;
  background: var(--light); border: 1px solid transparent; color: inherit; text-decoration: none;
  transition: translate .35s var(--ease), background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.sv-card:hover, .sv-card:focus-visible {
  translate: 0 -5px; background: var(--white); border-color: rgba(47,73,184,.18);
  box-shadow: 0 30px 56px -32px rgba(47,73,184,.45); outline: none;
}
.sv-card:focus-visible { border-color: var(--accent); }
.sv-card__num {
  font-size: 48px; font-weight: 700; line-height: .9; letter-spacing: -0.05em;
  background: linear-gradient(180deg, rgba(47,73,184,.5), rgba(110,139,255,.16));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transition: filter .35s ease;
}
.sv-card:hover .sv-card__num { filter: saturate(1.6) brightness(.85) contrast(1.4); }
.sv-card__title { margin: 22px 0 0; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.sv-card__desc { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.sv-card__more {
  margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; color: var(--ink-accent); transition: gap .25s ease;
}
.sv-card:hover .sv-card__more { gap: 12px; }
@media (max-width: 1199px) { .sv-card { padding: 26px 24px 24px; } .sv-card__title { font-size: 20px; } }
@media (max-width: 991px) { .sv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) {
  .sv-list { padding: 64px 20px; }
  .sv-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
  .sv-card { padding: 22px 20px 20px; border-radius: 18px; }
  .sv-card__num { font-size: 40px; }
  .sv-card__title { margin-top: 18px; }
  .sv-card__title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .sv-card:hover, .sv-card:focus-visible { translate: none; } }

/* ---------- About page (about.html) ---------- */
/* Mission: centred statement, three pillars, quote band */
/* Heading split: title on the left, paragraph on the right (not a centred banner) */
.ab-mission__head {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: end;
}
.ab-mission__title .title { margin-top: 14px; max-width: 15ch; font-size: clamp(34px, 3.6vw, 52px); }
.ab-mission__lead { margin: 0; padding-left: 28px; border-left: 3px solid var(--accent); font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.ab-pillars {
  margin: 52px auto 0; padding: 0; list-style: none; max-width: var(--container);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
}
.ab-pillar { padding: 30px 28px; border-radius: 20px; background: var(--white); border: 1px solid var(--ink-line); text-align: center; }
.ab-pillar__icon {
  display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
  box-shadow: 0 14px 28px -12px rgba(47,73,184,.6);
}
.ab-pillar__title { margin: 20px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ab-pillar__text { margin: 8px auto 0; max-width: 30ch; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.ab-quote {
  position: relative; margin: 28px auto 0; max-width: var(--container); padding: 30px 40px 30px 96px; border-radius: 20px;
  background: linear-gradient(135deg, #1B2340, #10131C); color: #fff; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 40px; align-items: center;
}
.ab-quote__mark { position: absolute; left: 30px; top: 6px; font-size: 96px; line-height: 1; font-weight: 800; color: rgba(110,139,255,.4); }
.ab-quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; color: #E7EBF5; }
.ab-quote figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--muted); text-align: right; white-space: nowrap; }
.ab-quote figcaption strong { font-size: 16px; color: #fff; }
.ab-quote .quote-credit { justify-content: flex-end; }

/* Our journey (white): five soft panels, brand-blue dots climbing to a peak, outlined word behind (stacks on phones) */
.jr { position: relative; isolation: isolate; overflow: hidden; padding: 0 24px; background: var(--white); }
/* soft cloud bank behind the timeline, faded to white at the top so the section still reads white */
.jr::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../../uploads/journey-clouds.jpg") center bottom / cover no-repeat;
  opacity: .6; filter: saturate(.35) brightness(1.22) contrast(.85);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 80%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 80%);
}
.jr__word {
  position: absolute; right: 2%; bottom: 10px; z-index: 0; pointer-events: none;
  font-size: clamp(64px, 10vw, 170px); font-weight: 800; line-height: 1; letter-spacing: .16em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(47,73,184,.14);
}
.jr__inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; padding: 88px 0 170px; }
.jr__head .title { margin-top: 12px; }
.jr-line {
  position: relative; margin: 16px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Soft vertical panels */
.jr-step {
  position: relative; padding: var(--lift) 22px 0; min-height: 420px;
  border-left: 1px solid var(--ink-line);
  background: linear-gradient(180deg, rgba(243,245,249,0), rgba(243,245,249,.9));
}
.jr-step:nth-child(even) { background: linear-gradient(180deg, rgba(228,234,254,0), rgba(228,234,254,.7)); }
.jr-step:last-child { border-right: 1px solid var(--ink-line); }
/* Staircase: up to a peak in the middle, then down again */
.jr-step:nth-child(1) { --lift: 150px; --i: 0; }
.jr-step:nth-child(2) { --lift: 90px;  --i: 1; }
.jr-step:nth-child(3) { --lift: 30px;  --i: 2; }
.jr-step:nth-child(4) { --lift: 100px; --i: 3; }
.jr-step:nth-child(5) { --lift: 140px; --i: 4; }
.jr-dot {
  display: block; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); border: 4px solid var(--white);
  box-shadow: 0 0 0 1px rgba(47,73,184,.25), 0 8px 22px -4px rgba(47,73,184,.6);
  opacity: 0; scale: .4; transition: opacity .5s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1);
  transition-delay: calc(var(--i) * .2s);
}
.jr-line.is-in .jr-dot { opacity: 1; scale: 1; }
.jr-year {
  display: block; margin-top: 20px; font-size: clamp(40px, 4vw, 58px); font-weight: 700; line-height: 1; letter-spacing: -0.05em;
  background: linear-gradient(180deg, var(--ink-accent), rgba(110,139,255,.45));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.jr-title { margin: 14px 0 0; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.jr-text { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
@media (max-width: 1199px) {
  .jr-step { padding-left: 16px; padding-right: 16px; min-height: 380px; }
  .jr-step:nth-child(1) { --lift: 120px; } .jr-step:nth-child(2) { --lift: 70px; } .jr-step:nth-child(3) { --lift: 20px; }
  .jr-step:nth-child(4) { --lift: 80px; } .jr-step:nth-child(5) { --lift: 110px; }
  .jr-title { font-size: 16.5px; }
  .jr-text { font-size: 14px; }
}
/* Tablets and phones: vertical stack, dots on a line down the left */
@media (max-width: 991px) {
  .jr__inner { padding: 72px 0 130px; }
  .jr-line { grid-template-columns: minmax(0, 1fr); margin-top: 36px; max-width: 620px; }
  .jr-line::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, var(--accent), var(--ink-line)); }
  .jr-step { min-height: 0; padding: 0 0 34px 52px; border: 0 !important; background: none !important; }
  .jr-step:last-child { padding-bottom: 0; }
  .jr-dot { position: absolute; left: 0; top: 6px; }
  .jr-year { margin-top: 0; font-size: 38px; }
}
@media (max-width: 575px) {
  .jr { padding: 0 20px; }
  .jr__inner { padding: 64px 0 96px; }
  .jr__word { font-size: 50px; letter-spacing: .12em; bottom: 14px; }
  .jr-year { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) { .jr-dot { opacity: 1; scale: 1; transition: none; } }

/* Values: dark tiles with glowing icons */
.ab-values { padding: 96px 24px; background: radial-gradient(80% 70% at 50% 0%, #141C36 0%, var(--bg) 70%); }
.ab-values__grid {
  margin: 48px auto 0; padding: 0; list-style: none; max-width: var(--container);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.ab-value {
  position: relative; padding: 34px 26px 30px; border-radius: 20px; text-align: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-2);
  transition: border-color .35s ease, background .35s ease, box-shadow .35s ease, translate .35s var(--ease);
}
.ab-value:hover { translate: 0 -4px; border-color: rgba(110,139,255,.5); background: rgba(110,139,255,.08); box-shadow: 0 30px 60px -30px rgba(110,139,255,.55); }
.ab-value__icon {
  display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(110,139,255,.35), rgba(47,73,184,.15)); border: 1px solid rgba(110,139,255,.45);
  color: var(--accent-soft); box-shadow: 0 0 0 8px rgba(110,139,255,.06), 0 0 40px -6px rgba(110,139,255,.7);
  transition: box-shadow .35s ease, color .35s ease;
}
.ab-value:hover .ab-value__icon { color: #fff; box-shadow: 0 0 0 10px rgba(110,139,255,.1), 0 0 56px -4px rgba(110,139,255,.9); }
.ab-value__title { margin: 24px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.ab-value__text { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* Team: tall portrait panels in a draggable row; role + name fade in on hover
   (photos are TEMPORARY placeholders until real ones are supplied) */
.tm-slider { margin: 44px auto 0; max-width: var(--container); }
/* Desktop/tablet: plain 4-column grid (no slider controls) */
.tm-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tm-slider .slider-controls { display: none; }
.tm-card {
  position: relative; aspect-ratio: 3 / 4.3; overflow: hidden; border-radius: 18px;
  background: linear-gradient(180deg, #F3F5F9 0%, #E6EAF2 100%);
  transition: background .45s ease;
}
.tm-card:hover { background: linear-gradient(180deg, #E4EAFE 0%, #CFDAFF 100%); }
.tm-card__photo { position: absolute; left: 0; right: 0; bottom: 0; height: 80%; }
.tm-card__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top;
  /* multiply blends each photo's white studio backdrop into the panel colour, so every panel matches */
  mix-blend-mode: multiply;
  filter: grayscale(1) brightness(1.1) contrast(1.12); pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%); mask-image: linear-gradient(180deg, transparent 0%, #000 12%);
  transition: filter .5s ease, transform .8s var(--ease);
}
.tm-card:hover .tm-card__photo img { filter: grayscale(0) brightness(1.06) contrast(1.05); transform: scale(1.03); }
.tm-card__info {
  position: absolute; z-index: 1; top: 0; left: 0; right: 0; padding: 30px 18px 0; text-align: center;
  opacity: 0; translate: 0 -8px; transition: opacity .4s ease, translate .45s var(--ease);
}
.tm-card:hover .tm-card__info, .tm-card:focus-within .tm-card__info { opacity: 1; translate: 0 0; }
.tm-card__role { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.tm-card__name { margin: 8px 0 0; font-size: 24px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }

@media (max-width: 1199px) {
  .ab-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-card__name { font-size: 21px; }
}
/* Touch screens have no hover: keep names visible */
@media (hover: none) {
  .tm-card__info { opacity: 1; translate: 0 0; }
}
@media (max-width: 991px) {
  .ab-mission__head { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ab-mission__title .title { max-width: none; }
  .ab-pillars { gap: 14px; }
  .ab-pillar { padding: 26px 18px; }
  .ab-pillar__title { font-size: 19px; }
  .ab-quote { grid-template-columns: minmax(0, 1fr); padding: 30px 30px 28px 84px; }
  .ab-quote figcaption { text-align: left; }
  .ab-quote .quote-credit { justify-content: flex-start; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .tm-grid { gap: 10px; }
  .tm-card__info { padding: 20px 10px 0; }
  .tm-card__name { font-size: 17px; }
  .tm-card__role { font-size: 9.5px; }
}
@media (max-width: 767px) {
  .ab-pillars { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  /* Team becomes a slick-style slider: swipe/drag track + arrows and dots */
  .tm-grid {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; cursor: grab;
  }
  .tm-grid::-webkit-scrollbar { display: none; }
  .tm-grid.is-dragging { cursor: grabbing; scroll-snap-type: none; }
  .tm-card { flex: 0 0 calc((100% - 10px) / 1.6); scroll-snap-align: start; }
  .tm-slider .slider-controls { display: flex; margin-top: 22px; }
  /* Pillars and values become compact rows: icon left, text right */
  .ab-pillar, .ab-value {
    display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: start; text-align: left;
  }
  .ab-pillar__icon, .ab-value__icon { grid-row: span 2; margin: 0; }
  .ab-pillar__title, .ab-value__title { margin: 2px 0 0; }
  .ab-pillar__text, .ab-value__text { margin: 6px 0 0; max-width: none; }
  .ab-pillar { padding: 20px; }
  .ab-pillar__icon { width: 48px; height: 48px; border-radius: 13px; }
  .ab-pillar__icon svg { width: 22px; height: 22px; }
  .ab-values__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .ab-value { padding: 22px 20px; }
  .ab-value__icon { width: 52px; height: 52px; box-shadow: 0 0 0 6px rgba(110,139,255,.06), 0 0 28px -6px rgba(110,139,255,.7); }
  .ab-value__icon svg { width: 22px; height: 22px; }
}
@media (max-width: 575px) {
  .ab-values { padding: 64px 20px; }
  .ab-mission__lead { padding-left: 18px; font-size: 16px; }
  .ab-pillars { margin-top: 36px; gap: 14px; }
  .ab-pillar { padding: 24px 20px; }
  .ab-quote { padding: 56px 22px 24px; }
  .ab-quote__mark { left: 20px; top: 0; font-size: 80px; }
  .ab-quote blockquote { font-size: 16.5px; }
  .ab-values__grid { gap: 12px; margin-top: 32px; }
  .tm-slider { margin-top: 30px; }
  .tm-card { flex-basis: 74%; border-radius: 16px; }
  .tm-card__info { padding-top: 22px; }
  .tm-card__name { font-size: 19px; }
  .tm-card__role { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ab-value:hover, .tm-card:hover { translate: none; } }

/* ---------- Shopify Design page: motion & hover ---------- */
/* Process panels: number brightens, icon nudges, panel catches the light */
.sd-flow__step:hover { filter: brightness(1.04); box-shadow: inset 0 0 0 1px rgba(110,139,255,.35); }
.sd-flow__step:hover .sd-flow__num { opacity: .7; translate: 0 -3px; }
.sd-flow__step:hover .sd-flow__icon { translate: 6px 0; opacity: 1; }

/* Mobile principles: icon tile fills with the accent */
.sd-mprinc__item:hover .sd-mprinc__icon { background: var(--accent); color: #fff; box-shadow: 0 12px 28px -10px rgba(110,139,255,.8); translate: 0 -3px; }
.sd-mprinc__item:hover .sd-mprinc__title { color: var(--accent-soft); }

/* Mobile callouts: lift and brighten */
.sd-mchip:hover { background: rgba(255,255,255,.1); border-color: rgba(110,139,255,.5); box-shadow: 0 24px 50px -24px rgba(110,139,255,.6); }

/* Why Basil Tech rows: our side lights up, the tick pops */
.sd-diff__row:hover .sd-diff__us { background: rgba(110,139,255,.1); }
.sd-diff__row:hover .sd-diff__tick { transform: scale(1.15); }
.sd-diff__row:hover .sd-diff__them { color: #858C98; }

/* Intro pills */
.sd-intro__checks li:hover { translate: 0 -2px; border-color: rgba(47,73,184,.3); box-shadow: 0 10px 20px -14px rgba(47,73,184,.5); }

/* Shine sweep on the plain buttons (the glowing buttons already animate) */
.sd-hero .hero__cta-alt, .sd-work__more .btn {
  background-image: linear-gradient(110deg, transparent 35%, rgba(110,139,255,.22) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 130% 0; background-repeat: no-repeat;
  transition: background-position .8s var(--ease), border-color .2s ease, gap .2s ease, transform .25s ease;
}
.sd-hero .hero__cta-alt:hover, .sd-work__more .btn:hover { background-position: -30% 0; }

@media (prefers-reduced-motion: reduce) {
  .sd-flow__step:hover .sd-flow__num, .sd-flow__step:hover .sd-flow__icon, .sd-mprinc__item:hover .sd-mprinc__icon,
  .sd-intro__checks li:hover, .sd-case:hover { translate: none; }
}

/* ---------- Shopify Design page: responsive (breakpoints 1199 · 991 · 767 · 575 · 480) ---------- */
/* ≤1199px: large tablets / small laptops */
@media (max-width: 1199px) {
  .sd-hero__inner { gap: 40px; }
  .sd-board { height: 390px; }
  .sd-chip--type { left: -2%; }
  .sd-chip--button { right: 0; }
  .sd-intro__grid { gap: 48px; }
  .sd-quote { padding: 44px 36px 36px; }
  .sd-anatomy__grid { gap: 40px; }
  .sd-flow__step { min-height: 370px; padding: 34px 20px 28px; }
  .sd-flow__num { font-size: 62px; }
  .sd-flow__title { font-size: 18px; }
  .sd-flow__desc { font-size: 14.5px; }
  .sd-diff__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 44px; }
  .sd-mchip { width: min(270px, calc(100% - 56px)); }
  .sd-mstage__col--left .sd-mchip { right: 56px; }
  .sd-mstage__col--right .sd-mchip { left: 56px; }
  .sd-mchip::after { width: 56px; }
}

/* ≤991px: tablets — two-column layouts stack */
@media (max-width: 991px) {
  .sd-hero { padding-top: 120px; }
  .sd-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .sd-board { width: 100%; max-width: 620px; margin: 0 auto; }

  .sd-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .sd-intro__title { max-width: none; }
  .sd-quote { min-height: 0; }
  .sd-quote blockquote { font-size: 19px; }

  .sd-row { grid-template-columns: 64px minmax(0, 1fr); padding: 18px 20px; }
  .sd-row__num { font-size: 44px; }
  .sd-row__title { font-size: 17.5px; }

  /* Mobile section: phone on top, callouts become a row of cards below it (no connector lines) */
  .sd-mstage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .sd-mstage__col { display: contents; }
  .sd-phone { grid-column: 1 / -1; justify-self: center; margin-bottom: 18px; }
  .sd-mchip { position: static; transform: none; width: auto; }
  .sd-mchip::after { display: none; }
  .sd-mstage__col--left .sd-mchip:first-child { order: 1; }
  .sd-mstage__col--right .sd-mchip { order: 2; }
  .sd-mstage__col--left .sd-mchip:last-child { order: 3; }
  .sd-mprinc__item { padding: 24px 22px 0; }

  /* Anatomy: product page first, explanations underneath */
  .sd-anatomy__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }

  /* Process: the five panels become stacked rows (number · text · icon) */
  .sd-flow { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .sd-flow__step {
    min-height: 0; padding: 24px 28px;
    display: grid; grid-template-columns: 84px minmax(0, 1fr) 36px; column-gap: 18px; align-items: center;
    grid-template-areas: "num title icon" "num desc icon";
  }
  .sd-flow__num { grid-area: num; font-size: 56px; }
  .sd-flow__title { grid-area: title; margin: 0; padding: 0; border: 0; font-size: 19px; }
  .sd-flow__desc { grid-area: desc; margin: 6px 0 0; }
  .sd-flow__icon { grid-area: icon; margin: 0; padding: 0; justify-self: end; }
  .sd-flow__step:hover .sd-flow__icon { translate: 4px 0; }

  .sd-diff__grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .sd-diff .sd-head .title { max-width: none; }
  .sd-diff__table { max-width: 760px; }

  .sd-case { min-height: 400px; }
  .sd-case__title { font-size: 21px; }
}

/* ≤767px: large phones / small tablets — everything goes single column */
@media (max-width: 767px) {
  .sd-board { height: 330px; }
  .sd-board__screen--main { height: 250px; top: 56px; }
  .sd-board__screen--back { height: 200px; }
  .sd-chip { padding: 10px 12px; gap: 10px; }
  .sd-chip__icon { width: 30px; height: 30px; }
  .sd-chip strong { font-size: 12.5px; }
  .sd-chip small { font-size: 10.5px; }

  .sd-rows { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }

  .sd-mstage { grid-template-columns: minmax(0, 1fr); }
  .sd-mstage__glow { width: 420px; height: 420px; top: 32%; }
  .sd-mprinc { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .sd-mprinc__item, .sd-mprinc__item:first-child { padding: 24px 0; }
  .sd-mprinc__item + .sd-mprinc__item { border-left: 0; border-top: 1px solid var(--line); }
  .sd-mprinc__item:last-child { padding-bottom: 0; }

  .sd-toggle-row { margin-top: 24px; }
  .sd-anatomy__grid { gap: 36px; }

  /* Comparison: each row shows the typical approach (struck out) above ours, all on the blue panel */
  .sd-diff__table::before { left: 0; top: 0; bottom: 0; }
  .sd-diff__vs { display: none; }
  .sd-diff__labels { grid-template-columns: minmax(0, 1fr); }
  .sd-diff__label:not(.sd-diff__label--us) { display: none; }
  .sd-diff__label--us { padding: 22px 20px 8px; }
  .sd-diff__row { grid-template-columns: minmax(0, 1fr); }
  .sd-diff__them { padding: 16px 20px 0 60px; font-size: 13px; }
  .sd-diff__x { display: none; }
  .sd-diff__us { padding: 8px 20px 18px; }
  .sd-diff__row + .sd-diff__row .sd-diff__them { border-top: 1px solid rgba(110,139,255,.2); }
  .sd-diff__row + .sd-diff__row .sd-diff__us { border-top: 0; }

  /* Case studies: one-card swipe slider (scroll-snap track; arrows/dots from initSliders) */
  .sd-work__grid {
    display: flex; gap: 16px; margin-top: 28px; padding: 8px 0 4px; /* room for the hover lift */
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .sd-work__grid::-webkit-scrollbar { display: none; }
  .sd-work__grid.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .sd-case { flex: 0 0 100%; min-height: 380px; scroll-snap-align: start; }
  .sd-case:hover { translate: none; }
  .sd-work-slider .slider-controls { display: flex; margin-top: 18px; }
  .sd-work__more { margin-top: 22px; }

  .sd-deliver { padding: 20px 22px; gap: 14px; }
}

/* ≤575px: phones — tighter rhythm and 20px gutters */
@media (max-width: 575px) {
  .sd-hero { padding: 104px 20px 56px; }
  .sd-crumbs { margin-bottom: 20px; }
  .sd-hero__lead { font-size: 16.5px; }
  .sd-hero__ctas { margin-top: 28px; }
  .sd-board { height: 290px; }
  .sd-board__screen--main { width: 88%; height: 210px; top: 50px; }
  .sd-board__screen--back { width: 70%; height: 170px; }
  .sd-chip small { display: none; }
  .sd-chip--palette { right: 0; }
  .sd-chip--type { left: 0; top: 22px; }
  .sd-chip--button { right: 0; bottom: 40px; }
  .sd-chip--devices { left: 2%; bottom: 0; }

  .sd-included.section-pad, .sd-anatomy { padding-top: 64px; padding-bottom: 64px; }
  .sd-mobile.section-pad { padding-top: 64px; padding-bottom: 64px; }
  .sd-diff, .sd-work { padding: 64px 20px; }

  .sd-quote { padding: 36px 26px 28px; }
  .sd-quote__mark { font-size: 96px; right: 22px; }
  .sd-quote blockquote { font-size: 17.5px; }

  .sd-row { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
  .sd-row__num { font-size: 36px; }

  /* Anatomy mock: let the scaled preview shrink with the column */
  .sd-anatomy__grid > *, .sd-pdp-wrap > *, .sd-pdp__info { min-width: 0; }
  .sd-pdp__reviews { grid-template-columns: auto minmax(0, 1fr); }
  .sd-pdp__who { display: none; }
  .sd-pdp__bar em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

  .sd-flow__step { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 20px; grid-template-areas: "num title" "num desc"; }
  .sd-flow__num { font-size: 42px; align-self: start; }
  .sd-flow__icon { display: none; }

  .sd-deliver { flex-direction: column; align-items: flex-start; }
  .sd-deliver li { font-size: 14px; }

  .sd-diff__label--us img { height: 24px; }
  .sd-diff__us h3 { font-size: 16.5px; }
  .sd-diff__us p { font-size: 14px; }

  .sd-case { min-height: 340px; border-radius: 18px; }
  .sd-case__body { padding: 20px 20px 22px; }
  .sd-case__title { font-size: 19px; }
}

/* ≤480px: small phones */
@media (max-width: 480px) {
  .sd-hero__title { font-size: 36px; }
  .sd-hero__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .sd-board { height: 260px; }
  .sd-board__screen--main { height: 190px; }
  .sd-board__screen--back { height: 150px; }
  .sd-chip strong { font-size: 11.5px; }
  .sd-chip__icon { width: 26px; height: 26px; }
  .sd-chip__icon svg { width: 15px; height: 15px; }

  .sd-intro__checks li { font-size: 13.5px; padding: 8px 14px; }
  .sd-toggle__btn { padding: 10px 14px; font-size: 13px; gap: 6px; }
}

/* Narrowest phones (≤399px): shorter toggle label so both halves fit */
@media (max-width: 399px) {
  .sd-toggle__extra { display: none; }
  .sd-toggle__btn { padding: 10px 22px; }
  .sd-phone { width: 270px; }
}

/* ---------- Header lines up with the page content (all pages) ----------
   Sections are var(--container) wide inside their own 24px padding; the header, the
   Services menu and the homepage growth band add their 24px padding inside that width,
   which pushed them 24px right of the content on wide screens. Widening them by the
   padding puts everything on one edge. */
.site-header__inner,
.mega__inner,
.growth__grid { max-width: calc(var(--container) + 48px); }

/* ---------- Contact page (contact.html) ---------- */
/* Hero: copy on the left, the shared contact form card on the right */
.ct-hero { padding-bottom: 96px; }
/* Copy starts level with the form; its length is written to end roughly level with it too */
.ct-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; }
/* One row on desktop: text and spacing ease down with the viewport so all three fit */
.ct-hero__checks { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px clamp(12px, 1.5vw, 22px); }
.ct-hero__checks li { display: flex; align-items: center; gap: 8px; font-size: clamp(13px, 1.08vw, 15px); font-weight: 500; color: var(--text-2); white-space: nowrap; }
.ct-tick {
  flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(110,139,255,.8);
}
/* Client quote under the ticks: a glass card that balances the form column */
.ct-quote {
  position: relative; margin: 30px 0 0; max-width: 560px; padding: 16px 20px 14px;
  border-radius: 20px; border: 1px solid rgba(110,139,255,.22);
  background: linear-gradient(160deg, rgba(110,139,255,.12), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.ct-quote::before {
  content: "\201C"; position: absolute; right: 18px; top: 0; font-size: 64px; line-height: 1; font-weight: 700;
  color: rgba(110,139,255,.22); pointer-events: none;
}
.ct-quote__stars { display: block; font-size: 13px; letter-spacing: 2px; color: #FFC24B; }
.ct-quote blockquote { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ct-quote figcaption { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ct-quote__avatar {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.ct-quote figcaption strong { display: block; font-size: 13.5px; color: var(--text); }
.ct-quote figcaption small { display: block; margin-top: 1px; font-size: 12px; color: var(--muted-2); }
.ct-hero__form .contact-form { box-shadow: 0 50px 90px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(110,139,255,.18); }

/* Ways to reach us: four cards */
.ct-cards { margin: 48px auto 0; padding: 0; list-style: none; max-width: var(--container); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ct-card {
  display: flex; flex-direction: column; align-items: flex-start; padding: 28px 26px;
  border-radius: 20px; background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 30px 60px -48px rgba(23,32,64,.6);
  transition: translate .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.ct-card:hover { translate: 0 -6px; border-color: rgba(47,73,184,.3); box-shadow: 0 40px 70px -44px rgba(47,73,184,.55); }
.ct-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
  box-shadow: 0 14px 28px -12px rgba(47,73,184,.6);
}
.ct-card__icon--wa { background: linear-gradient(135deg, #3BE07F, #1DA851); box-shadow: 0 14px 28px -12px rgba(37,211,102,.6); }
.ct-card__title { margin: 22px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ct-card__text { margin: 8px 0 18px; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.ct-card__link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; color: var(--ink-accent); word-break: break-word;
}
.ct-card__link svg { transition: transform .25s var(--ease); }
.ct-card__link:hover { color: var(--accent); }
.ct-card__link:hover svg { transform: translateX(3px); }

/* What happens next: three numbered steps, each under an accent rule */
.ct-steps { position: relative; margin: 52px auto 0; padding: 0; list-style: none; max-width: var(--container); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.ct-step { position: relative; padding-top: 26px; border-top: 1px solid var(--ink-line); }
.ct-step::before { content: ""; position: absolute; left: 0; top: -1px; width: 64px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--ink-accent)); }
.ct-step__num {
  display: block;
  font-size: 58px; font-weight: 700; line-height: 1.15; letter-spacing: -0.03em;
  background-image: linear-gradient(180deg, var(--ink-accent), rgba(110,139,255,.4)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ct-step__title { margin: 16px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.ct-step__text { margin: 10px 0 0; max-width: 34ch; font-size: 15.5px; line-height: 1.65; color: var(--ink-body); }

/* Office map */
.ct-map__grid {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center;
}
.ct-map__text .title { margin-top: 14px; }
.ct-map__address { margin: 22px 0 0; font-style: normal; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.ct-map__hours { margin: 12px 0 28px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ct-map__frame { overflow: hidden; height: 420px; border-radius: 22px; border: 1px solid var(--ink-line); box-shadow: 0 40px 80px -56px rgba(23,32,64,.6); background: var(--ink-line); }
.ct-map__frame iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }

@media (max-width: 1199px) {
  .ct-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 40px; }
  .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-step__num { font-size: 50px; }
}
@media (max-width: 991px) {
  /* Stacked: paragraph, quote and form share one full content width */
  .ct-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ct-hero .sd-hero__lead, .ct-quote { max-width: none; }
  .ct-steps { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ct-step { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 14px; padding-top: 22px; }
  .ct-step__num { grid-row: span 2; font-size: 44px; }
  .ct-step__title { margin: 4px 0 0; }
  .ct-step__text { margin-top: 6px; max-width: none; }
  .ct-map { padding-top: 72px; padding-bottom: 72px; }
  .ct-map__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* Office text: heading across the top, address left, hours + directions right */
  .ct-map__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: end; }
  .ct-map__text > .eyebrow, .ct-map__text > .title { grid-column: 1 / -1; }
  .ct-map__address { grid-column: 1; grid-row: 3 / span 2; }
  .ct-map__hours { grid-column: 2; grid-row: 3; margin: 22px 0 14px; }
  .ct-map__text > .btn { grid-column: 2; grid-row: 4; justify-self: start; }
  .ct-map__frame { height: 360px; }
}
@media (max-width: 767px) {
  .ct-hero { padding-bottom: 72px; }
  .ct-card { padding: 24px 22px; }
}
@media (max-width: 575px) {
  .ct-hero { padding-bottom: 56px; }
  .ct-quote { padding: 16px 18px 14px; }
  .ct-hero__checks li { font-size: 15px; }
  .ct-cards { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ct-card { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 16px; }
  .ct-card__icon { width: 46px; height: 46px; }
  .ct-card__title { margin: 0; flex: 1; }
  .ct-card__text { flex-basis: 100%; margin: 12px 0 10px; }
  .ct-steps { margin-top: 36px; }
  .ct-step { grid-template-columns: 64px minmax(0, 1fr); }
  .ct-step__num { font-size: 38px; }
  .ct-step__title { font-size: 19px; }
  .ct-map__frame { height: 300px; border-radius: 18px; }
  .ct-map { padding-top: 64px; padding-bottom: 64px; }
  .ct-map__text { display: block; }
  .ct-map__hours { margin: 12px 0 24px; }
}
@media (prefers-reduced-motion: reduce) { .ct-card:hover { translate: none; } }

/* ---------- Case study pages (case-study-*.html) ---------- */
/* Browser frame used in the hero and the experience section */
.cs-browser { position: relative; margin: 0; overflow: hidden; border-radius: 16px; background: var(--white); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 50px 90px -40px rgba(0,0,0,.85); }
.cs-browser__bar { display: flex; gap: 6px; padding: 12px 14px; background: #EEF1F6; border-bottom: 1px solid var(--ink-line); }
.cs-browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: #D4D9E3; }
.cs-browser__bar span:nth-child(1) { background: #FF6B5F; } .cs-browser__bar span:nth-child(2) { background: #FFBE2E; } .cs-browser__bar span:nth-child(3) { background: #2ACB42; }
.cs-browser img { display: block; width: 100%; height: auto; }

/* 01 Hero */
.cs-hero { padding-bottom: 96px; }
.cs-hero .sd-hero__title { font-size: clamp(36px, 3.8vw, 56px); }
.cs-hero__stack { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-hero__stack li { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); font-size: 13px; color: var(--text-2); }
.cs-hero__shot { transform: rotate(-1.5deg); animation: sd-float 8s ease-in-out infinite alternate; }

/* 02 Overview: heading | paragraphs, then facts bar + scope */
.cs-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; margin-bottom: 48px; }
.cs-intro .title { margin-top: 14px; max-width: 20ch; }
.cs-intro__copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
/* Overview v3: centred head, project story as plain two-column text, scope in the approach-panel style */
.cs-story { margin: 40px auto 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.cs-story__block p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--ink-body); }
.cs-story__block p + p { margin-top: 14px; }
.cs-flow.cs-flow--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 48px; }
.cs-intro__copy p + p { margin-top: 16px; }
.cs-facts {
  margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: 22px; background: var(--white); border: 1px solid var(--ink-line); box-shadow: 0 30px 60px -48px rgba(23,32,64,.6);
}
.cs-fact { padding: 26px 28px; }
.cs-fact + .cs-fact { border-left: 1px solid var(--ink-line); }
.cs-fact dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.cs-fact dd { margin: 10px 0 0; font-size: 18px; font-weight: 600; line-height: 1.35; letter-spacing: -0.015em; color: var(--ink); }
/* Scope sits under the heading as a small card, filling the left column */
.cs-scope { margin-top: 26px; padding: 18px 22px; border-radius: 16px; background: var(--white); border: 1px solid var(--ink-line); }
.cs-scope__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.cs-scope p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-text); }

/* 03 Challenge: text + problem list */
.cs-split { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.cs-split__text .title { margin-top: 14px; max-width: 17ch; }
.cs-split__text p { margin: 20px 0 0; max-width: 56ch; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.cs-objective { padding-left: 18px; border-left: 3px solid var(--accent); }
/* Before-redesign screenshot beside the challenge copy */
.cs-split--before { align-items: center; gap: 56px; }
.cs-split--before .cs-split__text .title { max-width: 18ch; }
.cs-before { position: relative; margin: 0; }
.cs-before__shot { position: relative; overflow: hidden; border-radius: 24px; background: #F3F6FB; border: 1px solid var(--ink-line); box-shadow: 0 40px 80px -56px rgba(23,32,64,.55); }
.cs-before__shot img { display: block; width: 100%; height: auto; }
.cs-before__tag { position: absolute; top: 20px; left: 20px; z-index: 2; display: inline-flex; align-items: center; gap: 12px; padding: 6px 20px 6px 6px; border-radius: 999px; background: var(--ink); border: 1px solid rgba(229,72,77,.55); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--white); box-shadow: 0 0 0 6px rgba(229,72,77,.14), 0 18px 32px -14px rgba(11,13,18,.7); }
.cs-before__tag b { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 12px; border-radius: 999px; background: #E5484D; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--white); }
.cs-before__tag b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.cs-zone { position: absolute; border: 2px dashed #E5484D; border-radius: 8px; background: rgba(229,72,77,.09); box-shadow: 0 0 0 4px rgba(229,72,77,.12); pointer-events: none; animation: cs-zone-pulse 2.4s ease-in-out infinite; }
@keyframes cs-zone-pulse { 50% { box-shadow: 0 0 0 7px rgba(229,72,77,.05); } }
@media (prefers-reduced-motion: reduce) { .cs-zone { animation: none; } }
.cs-before__shot .cs-note { z-index: 1; }
.cs-before__cap { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--ink-muted); }
.cs-before__key, .cs-note.cs-note--issue i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 4px rgba(229,72,77,.2); }
.cs-note.cs-note--issue { border-color: rgba(229,72,77,.35); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(11,13,18,.45); }
.cs-objective strong { color: var(--ink); }
.cs-problems { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
/* Problem cards: raised white cards with a brand accent bar and a faded number */
.cs-problem {
  position: relative; overflow: hidden; display: flex; gap: 20px; padding: 26px 28px 26px 30px; border-radius: 20px;
  background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 30px 60px -36px rgba(23,32,64,.45);
  transition: translate .4s var(--ease), box-shadow .4s ease, border-color .4s ease;
}
.cs-problem::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent), var(--ink-accent)); }
.cs-problem:hover { translate: 0 -4px; border-color: rgba(47,73,184,.3); box-shadow: 0 40px 70px -36px rgba(47,73,184,.5); }
/* Faded gradient number in place of an icon, matching the site's other numbers */
.cs-problem__num {
  flex: none; min-width: 58px; font-size: 46px; font-weight: 700; line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ink-accent), rgba(110,139,255,.25)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-problem__title { margin: 4px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cs-problem p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-body); }
.cs-problem > div { flex: 1; min-width: 0; }

/* 04 Approach: one panel, four columns with dividers and a dot on the top edge of each, aligned with the column text */
.cs-flow {
  position: relative; margin: 56px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-radius: 24px; background: var(--white); border: 1px solid var(--ink-line);
  box-shadow: 0 40px 80px -60px rgba(23,32,64,.6);
}
.cs-flow__item { position: relative; padding: 44px 32px 40px; }
.cs-flow__item + .cs-flow__item::before { content: ""; position: absolute; left: 0; top: 40px; bottom: 40px; width: 1px; background: var(--ink-line); }
.cs-flow__dot {
  position: absolute; top: -7px; left: 46px; width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); box-shadow: 0 0 0 4px var(--light), 0 6px 14px -4px rgba(47,73,184,.7);
}
.cs-flow__label { display: block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.cs-flow__icon { display: block; margin-top: 28px; line-height: 0; transition: transform .4s var(--ease); }
.cs-flow__item:hover .cs-flow__icon { transform: translateY(-4px); }
.cs-flow__title { margin: 40px 0 0; font-size: 22px; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; color: var(--ink); }
.cs-flow__text { margin: 14px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-body); }

/* 04 Approach (rows): what changed + why, each with a storefront screenshot; alternating 45/55 */
.cs-rows { margin-top: 64px; display: grid; gap: 32px; }
.cs-row { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: 56px; align-items: center; padding: 48px; border-radius: 32px; background: linear-gradient(135deg, #FFFFFF 0%, #EEF2FF 100%); border: 1px solid #DCE3FA; box-shadow: 0 40px 80px -64px rgba(23,32,64,.45); }
.cs-row--flip { background: linear-gradient(225deg, #FFFFFF 0%, #EEF2FF 100%); }
.cs-row--flip { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); }
.cs-row--flip .cs-row__media { order: -1; }
.cs-row__label { display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px 5px 5px; border-radius: 999px; background: rgba(110,139,255,.14); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.cs-row__label b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #6E8BFF, #2F49B8); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.cs-row__title { margin: 16px 0 0; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.12; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.cs-row__desc { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.cs-row__result { display: inline-flex; align-items: center; gap: 14px; margin-top: 28px; padding: 16px 22px 16px 16px; border-radius: 18px; background: var(--white); border: 1px solid #DCE3FA; box-shadow: 0 18px 36px -24px rgba(47,73,184,.45); }
.cs-row__result .cs-row__result-icon { flex: none; display: grid; margin: 0; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(110,139,255,.18); color: var(--ink-accent); }
.cs-row__result strong { display: block; font-size: 34px; line-height: 1; font-weight: 700; letter-spacing: -0.03em; color: var(--ink-accent); }
.cs-row__result span { display: block; margin-top: 6px; font-size: 15px; font-weight: 700; color: var(--ink-accent); }
.cs-row__result small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-muted); }
.cs-row__media { position: relative; margin: 0; overflow: hidden; border-radius: 24px; background: var(--white); border: 1px solid var(--ink-line); box-shadow: 0 50px 90px -60px rgba(23,32,64,.65); }
.cs-row__media img { display: block; width: 100%; height: auto; }
/* Subtle blue annotations on a screenshot */
.cs-note {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; translate: -100% -50%; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(255,255,255,.94); border: 1px solid rgba(28,154,28,.4); box-shadow: 0 10px 24px -12px rgba(28,154,28,.55);
  font-size: 12.5px; font-weight: 600; color: var(--greenmarked); white-space: nowrap; pointer-events: none;
}
.cs-note--r { translate: 0 -50%; }
.cs-note i { width: 8px; height: 8px; border-radius: 50%; background: var(--greenmarked); box-shadow: 0 0 0 4px rgba(28,127,13,.2); }

/* 06 Growth timeline: vertical zig-zag of project phases. Each phase starts where the previous one ends; equal rows
   keep the numbered dots evenly spaced, and each item draws the line down to the next dot so it never crosses a number. */
.cs-journey { padding-bottom: 80px; }
.cs-tl { --tl-gap: 15px; display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); grid-auto-rows: 1fr; row-gap: var(--tl-gap); max-width: 1000px; margin: 56px auto 0; padding: 0; list-style: none; }
.cs-tl__item { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: inherit; align-items: start; pointer-events: none; opacity: 0; translate: 0 28px; transition: opacity .7s var(--ease), translate .7s var(--ease); }
.cs-tl__item:not(:last-child)::before, .cs-tl__item:not(:last-child)::after { content: ""; position: absolute; left: 50%; top: 43px; width: 2px; height: calc(100% + var(--tl-gap)); translate: -50% 0; }
.cs-tl__item::before { background: var(--ink-line); }
.cs-tl__item::after { background: linear-gradient(180deg, #6E8BFF, #2F49B8); transform: scaleY(0); transform-origin: top; transition: transform .6s var(--ease) .3s; }
.cs-tl.is-in .cs-tl__item { opacity: 1; translate: 0 0; }
.cs-tl.is-in .cs-tl__item::after { transform: scaleY(1); }
.cs-tl.is-in .cs-tl__item:nth-child(2) { transition-delay: .35s; }
.cs-tl.is-in .cs-tl__item:nth-child(3) { transition-delay: .7s; }
.cs-tl.is-in .cs-tl__item:nth-child(4) { transition-delay: 1.05s; }
.cs-tl.is-in .cs-tl__item:nth-child(5) { transition-delay: 1.4s; }
.cs-tl.is-in .cs-tl__item:nth-child(2)::after { transition-delay: .65s; }
.cs-tl.is-in .cs-tl__item:nth-child(3)::after { transition-delay: 1s; }
.cs-tl.is-in .cs-tl__item:nth-child(4)::after { transition-delay: 1.35s; }
.cs-tl__card { grid-column: 1; grid-row: 1; align-self: stretch; position: relative; pointer-events: auto; padding: 28px 32px 30px; border-radius: 24px; background: linear-gradient(135deg, #FFFFFF 0%, #F3F6FF 100%); border: 1px solid #DCE3FA; box-shadow: 0 30px 60px -50px rgba(23,32,64,.5); transition: translate .35s var(--ease), box-shadow .35s var(--ease); }
.cs-tl__card:hover { translate: 0 -4px; box-shadow: 0 36px 64px -44px rgba(47,73,184,.5); }
.cs-tl__card::after { content: ""; position: absolute; top: 43px; right: -23px; width: 23px; height: 2px; background: #C9D4F7; }
.cs-tl__item:nth-child(even) .cs-tl__card { grid-column: 3; }
.cs-tl__item:nth-child(even) .cs-tl__card::after { right: auto; left: -23px; }
.cs-tl__dot { grid-column: 2; grid-row: 1; justify-self: center; position: relative; z-index: 1; display: grid; place-items: center; margin-top: 22px; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #6E8BFF, #2F49B8); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--white); box-shadow: 0 0 0 6px #E9EEFF, 0 10px 20px -8px rgba(47,73,184,.6); }
.cs-tl__phase { display: inline-block; padding: 5px 12px; border-radius: 999px; background: rgba(110,139,255,.14); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.cs-tl__title { margin:0px 0 0; font-size: 21px; line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.cs-tl__text { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
@media (prefers-reduced-motion: reduce) {
  .cs-tl__item, .cs-tl__item::after { transition: none; }
}

/* 06 Experience: devices on a brand-blue stage, with callouts for what changed */
.cs-stage {
  position: relative; isolation: isolate; margin-top: 52px; padding: 72px 200px 96px; border-radius: 32px; overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(110,139,255,.30), transparent 70%),
    linear-gradient(160deg, #EEF2FF 0%, #E2E8FF 55%, #D9E1FF 100%);
  border: 1px solid rgba(110,139,255,.25);
}
.cs-stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(rgba(47,73,184,.16) 1px, transparent 1.6px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 85%); mask-image: radial-gradient(80% 80% at 50% 50%, #000, transparent 85%);
}
.cs-stage__glow { position: absolute; left: 50%; bottom: -120px; z-index: -1; width: 70%; height: 240px; translate: -50% 0; border-radius: 50%; background: rgba(110,139,255,.45); filter: blur(70px); pointer-events: none; }
.cs-devices { position: relative; max-width: 820px; margin: 0 auto; padding-right: 90px; }
.cs-devices__desktop { border-color: rgba(47,73,184,.18); box-shadow: 0 60px 100px -50px rgba(23,32,64,.6); }
.cs-phone {
  position: absolute; right: 0; bottom: -48px; margin: 0; width: 200px; aspect-ratio: 9 / 19; overflow: hidden;
  border: 9px solid #0B0D12; border-radius: 34px; background: #0B0D12; box-shadow: 0 50px 80px -30px rgba(11,13,18,.6);
}
.cs-phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% top; border-radius: 25px; }
.cs-phone__notch { position: absolute; top: 7px; left: 50%; translate: -50% 0; z-index: 1; width: 64px; height: 16px; border-radius: 999px; background: #0B0D12; }
/* Floating callouts */
.cs-callout {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px;
  background: rgba(255,255,255,.92); border: 1px solid rgba(110,139,255,.25);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -24px rgba(23,32,64,.45);
  animation: sd-float 7s ease-in-out infinite alternate;
}
.cs-callout strong { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.cs-callout small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-muted); }
.cs-callout__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff; }
.cs-callout--1 { left: 28px; top: 88px; animation-delay: -2s; }
.cs-callout--2 { right: 28px; top: 120px; animation-delay: -4s; }
.cs-callout--3 { left: 40px; bottom: 120px; animation-delay: -1s; }
.cs-callout--4 { right: 36px; bottom: 64px; animation-delay: -5s; }
.cs-experience { padding-bottom: 100px; }

/* 07 Results */
.cs-results { padding: 100px 24px; background: var(--bg); color: var(--text); }
/* Plain results numbers (case studies not yet moved to the result cards below) */
.cs-stats { margin: 52px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-stat { padding: 34px 30px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-2); }
.cs-stat__value {
  display: block; font-size: clamp(54px, 6vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-stat__label { display: block; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--muted); }
/* Result cards: number + what drove it + a chart that only encodes the reported figure */
.cs-results__grid { margin-top: 52px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cs-result {
  display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: 22px;
  background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-2);
}
.cs-result__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-result__value {
  font-size: clamp(48px, 4.6vw, 68px); font-weight: 700; line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(180deg, #fff, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cs-result__trend {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap; background: rgba(110,139,255,.14); border: 1px solid rgba(110,139,255,.3); color: var(--accent-soft);
}
.cs-result__label { margin: 18px 0 0; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #fff; }
.cs-result__text { margin: 8px 0 18px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
/* Before / after bars */
.cs-bars { margin-top: auto; display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.cs-bar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 36px; align-items: center; gap: 12px; }
.cs-bar__name { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.cs-bar__track { position: relative; height: 16px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.cs-bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: rgba(255,255,255,.28); transition: width 1.2s var(--ease); }
.cs-bar--after .cs-bar__fill { background: linear-gradient(90deg, var(--ink-accent), var(--accent)); box-shadow: 0 0 18px rgba(110,139,255,.55); transition-delay: .25s; }
[data-timeline].is-in .cs-bar__fill { width: var(--w); }
.cs-bar__val { font-size: 14px; font-weight: 600; text-align: right; color: var(--text-2); }
.cs-bar--after .cs-bar__val { color: #fff; }
/* Before / after trend line: the line and fill stretch with the card; the end points and chips are HTML so they stay round */
.cs-trend { position: relative; margin-top: auto; height: 170px; padding: 0 34px; }
.cs-trend::before { content: ""; position: absolute; inset: 40px 34px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 20%) left / 100% 100% no-repeat; -webkit-mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 8px); mask: repeating-linear-gradient(180deg, #000 0 4px, transparent 4px 8px); }
.cs-trend__svg { position: absolute; left: 34px; right: 34px; top: 40px; bottom: 0; width: calc(100% - 68px); height: calc(100% - 40px); overflow: visible; clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease); }
[data-timeline].is-in .cs-trend__svg { clip-path: inset(-10px -10px 0 -10px); }
.cs-trend__point { position: absolute; z-index: 1; width: 16px; height: 16px; border-radius: 50%; translate: -50% -50%; background: #2F5BFF; border: 3px solid #fff; box-shadow: 0 0 0 5px rgba(61,99,245,.25); opacity: 0; scale: .4; transition: opacity .4s var(--ease), scale .4s var(--ease); }
.cs-trend__point--start { left: 34px; top: calc(40px + 130px * var(--y0n)); }
.cs-trend__point--end { left: calc(100% - 34px); top: calc(40px + 130px * var(--y1n)); background: #fff; border-color: #fff; box-shadow: 0 0 0 4px #2F5BFF, 0 0 18px 4px rgba(110,139,255,.6); }
.cs-trend__chip { position: absolute; z-index: 2; display: grid; justify-items: center; gap: 2px; min-width: 68px; padding: 8px 12px 7px; border-radius: 12px; translate: -50% calc(-100% - 18px); font-size: 12px; font-weight: 500; line-height: 1.1; color: var(--muted); background: #161A22; border: 1px solid var(--line-3); opacity: 0; transition: opacity .5s var(--ease); }
.cs-trend__chip b { font-size: 19px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.cs-trend__chip--before { left: 34px; top: calc(40px + 130px * var(--y0n)); }
.cs-trend__chip--after { text-align: center; left: calc(100% - 34px); top: calc(40px + 130px * var(--y1n)); color: rgba(255,255,255,.85); background: linear-gradient(180deg, #3D6BFF, #2346E0); border-color: rgba(157,177,255,.5); box-shadow: 0 12px 28px -10px rgba(47,91,255,.7); }
[data-timeline].is-in .cs-trend__point, [data-timeline].is-in .cs-trend__chip { opacity: 1; scale: 1; }
[data-timeline].is-in .cs-trend__point--start, [data-timeline].is-in .cs-trend__chip--before { transition-delay: .2s; }
[data-timeline].is-in .cs-trend__point--end, [data-timeline].is-in .cs-trend__chip--after { transition-delay: 1.5s; }
@media (prefers-reduced-motion: reduce) { .cs-trend__svg, .cs-trend__point, .cs-trend__chip { transition: none; } }
/* Case study FAQ: reuses the homepage FAQ, with a short intro + CTA instead of category tabs */
.cs-faq__lead { margin: 18px 0 0; max-width: 34ch; font-size: 16px; line-height: 1.65; color: var(--muted); }
.cs-faq__cta { margin-top: 28px; }
/* Speed gauge (0-4s, Google LCP thresholds) */
.cs-gauge { margin-top: auto; padding-top: 22px; border-top: 1px solid var(--line-2); }
.cs-gauge__track { position: relative; display: flex; height: 16px; border-radius: 999px; overflow: visible; }
.cs-gauge__zone { height: 100%; }
.cs-gauge__zone--good { border-radius: 999px 0 0 999px; background: linear-gradient(90deg, rgba(110,139,255,.35), var(--accent)); }
.cs-gauge__zone--mid { border-radius: 0 999px 999px 0; background: rgba(255,255,255,.1); }
.cs-gauge__marker {
  position: absolute; top: 50%; left: 0; width: 18px; height: 18px; translate: -50% -50%; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(110,139,255,.45), 0 6px 16px rgba(0,0,0,.5); transition: left 1.2s var(--ease);
}
[data-timeline].is-in .cs-gauge__marker { left: var(--x); }
.cs-gauge__marker b { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; padding: 3px 8px; border-radius: 6px; background: #fff; color: var(--ink); font-size: 12px; white-space: nowrap; }
.cs-gauge__scale { position: relative; height: 18px; margin-top: 10px; font-size: 12px; color: var(--muted-2); }
.cs-gauge__scale span { position: absolute; top: 0; }
.cs-gauge__scale span:first-child { left: 0; }
.cs-gauge__scale span:nth-child(2) { translate: -50% 0; }
.cs-gauge__scale span:last-child { right: 0; }
.cs-gauge__legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.cs-gauge__legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-gauge__legend span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; }
.cs-gauge__legend .is-good::before { background: var(--accent); }
.cs-gauge__legend .is-mid::before { background: rgba(255,255,255,.18); }
/* Sites -> markets diagram */
.cs-markets { margin-top: auto; display: grid; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-2); }
.cs-markets__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cs-markets__k { width: 52px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.cs-markets__arrow { color: var(--accent-soft); }
.cs-chip { padding: 6px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; }
.cs-chip.is-off { background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.2); color: var(--muted-2); text-decoration: line-through; }
.cs-chip.is-hub { background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff; box-shadow: 0 0 18px rgba(110,139,255,.5); }
.cs-chip.is-on { background: rgba(110,139,255,.16); border: 1px solid rgba(110,139,255,.4); color: #fff; }
.cs-results__note { margin: 22px 0 0; text-align: center; font-size: 13px; color: var(--muted-2); }

/* Hero: project details + performance preview card */
.cs-hero__details { margin: 28px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; max-width: 520px; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.cs-hero__details div { padding: 14px 18px; background: rgba(14,16,22,.85); }
.cs-hero__details dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft); }
.cs-hero__details dd { margin: 6px 0 0; font-size: 15.5px; font-weight: 600; color: var(--text); }
.cs-chart {
  margin: 0; padding: 26px 26px 18px; border-radius: 24px; background: var(--white); color: var(--ink);
  box-shadow: 0 50px 100px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(110,139,255,.2);
}
.cs-chart__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.cs-chart__title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.cs-chart__sub { margin: 6px 0 0; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-body); }
.cs-chart__stat { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 16px; background: #EEF2FF; }
.cs-chart__stat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(110,139,255,.2); color: var(--ink-accent); }
.cs-chart__stat strong { display: block; font-size: 28px; line-height: 1; letter-spacing: -0.03em; color: var(--ink-accent); }
.cs-chart__stat b { display: block; margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cs-chart__stat small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-muted); }
.cs-chart img { display: block; width: 100%; height: auto; margin-top: 18px; }
.cs-hero__aside-cta { margin-top: 26px; justify-content: center; }

/* 08 Testimonial */
.cs-quote { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.cs-quote__mark { display: block; font-size: 110px; line-height: .8; font-weight: 700; color: var(--accent); opacity: .35; }
.cs-quote blockquote { margin: 8px 0 0; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.4; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.cs-quote figcaption { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; text-align: left; }
.cs-quote__photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--white); box-shadow: 0 10px 24px -10px rgba(23,32,64,.5); }
.cs-quote__initial { display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #6E8BFF, #2F49B8); font-size: 22px; font-weight: 700; line-height: 1; color: var(--white); padding: 8px;}
.cs-quote figcaption strong { display: block; font-size: 16px; color: var(--ink); }
.cs-quote figcaption small { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-muted); }

/* 09 More projects */
.cs-related__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.cs-related__head .title { margin-top: 14px; }
.cs-related__slider { margin-top: 40px; }
.cs-related__grid { margin-top: 0; }
.cs-related__card { color: #fff; }

/* Custom CSS (15-10-2026) */
.ready__ctas.custom_ctas { justify-content: flex-start; }
.cs-row__desc.custom_desc { width: 100%; max-width: 100%; margin: 0 0 20px; color: var(--muted); }
.cs-quote__photo.cs-quote__initial.cs-quote_logo { background: transparent; border-radius: 0; width: auto; height: 60px; max-width: 140px; overflow: hidden; display: flex; justify-content: center; padding: 10px; place-items: unset; }
.cs-quote__photo.cs-quote__initial.cs-quote_logo img { width: auto; height: auto; object-fit: contain; max-width: 100%; }

.blog-page .post-card.bl-card.blog-post-card, .insights .post-card.blog-post-card, .ar-more .post-card.blog-post-card{ min-height: auto; padding: 0; background: transparent; flex-direction: column-reverse; gap: 0;}
.blog-page .post-card.bl-card.blog-post-card .post-img, .insights .post-card.blog-post-card .post-img, .ar-more .post-card.blog-post-card .post-img{ position: initial; }
.blog-page .post-card.bl-card.blog-post-card .post-img img, .insights .post-card.blog-post-card .post-img img, .ar-more .post-card.blog-post-card .post-img img{ aspect-ratio: 8/3; }
.blog-page .post-card.bl-card.blog-post-card .post-title, .insights .post-card.blog-post-card .post-title, .ar-more .post-card.blog-post-card .post-title{ padding:24px 72px 24px 24px; margin: 0; font-size: clamp(1.125rem, 1.067rem + 0.256vw, 1.375rem); margin-bottom:auto; }
.blog-page .post-card.bl-card.blog-post-card .post-img__shade, .insights .post-card.blog-post-card .post-img__shade, .ar-more .post-card.blog-post-card .post-img__shade{ background: transparent; }
.ar-more .post-card.blog-post-card .post-title{color: var(--ink); text-shadow: unset;}
.case-studies-btn-wrapper { text-align: center; margin-top: 60px; }



@media (max-width: 1199px) {
  .cs-split { gap: 48px; }
  .cs-flow__item { padding: 40px 24px 34px; }
  .cs-flow__dot { left: 24px; }
  .cs-flow__title { margin-top: 30px; font-size: 20px; }
  .cs-fact { padding: 22px 22px; }
  .cs-fact dd { font-size: 16.5px; }
  .case-studies-btn-wrapper{margin-top: 40px; }
}
@media (max-width: 991px) {
  .cs-hero__shot { transform: none; }
  .cs-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 36px; }
  .cs-intro .title { max-width: 22ch; }
  .cs-scope { max-width: none; }
  .cs-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-flow__item:nth-child(3)::before { display: none; }
  .cs-flow__item:nth-child(n+3) { border-top: 1px solid var(--ink-line); }
  .cs-flow__item:nth-child(n+3) .cs-flow__dot { display: none; }
  .cs-split__text .title { max-width: none; }
  /* Callouts become a row of chips under the devices */
  .cs-stage { padding: 56px 40px 40px; display: flex; flex-direction: column; }
  .cs-devices { width: 100%; padding-right: 80px; margin-bottom: 72px; }
  .cs-phone { width: 170px; border-width: 8px; border-radius: 30px; }
  .cs-phone img { border-radius: 22px; }
  .cs-callout { position: static; animation: none; }
  .cs-stage { flex-flow: row wrap; justify-content: center; gap: 12px; }
  .cs-results { padding: 72px 24px; }
  .cs-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-results__grid > :last-child { grid-column: 1 / -1; }
  .blog-page .post-card.bl-card.blog-post-card .post-title, .insights .post-card.blog-post-card .post-title, .ar-more .post-card.blog-post-card .post-title{ padding:20px 64px 20px 20px; }
  .blog-page .post-card.bl-card.blog-post-card::after , .insights .post-card.blog-post-card::after, .ar-more .post-card.blog-post-card::after{ right: 20px; bottom: 20px; width: 34px; height: 34px; }
}
@media (max-width: 767px) {
  .cs-hero { padding-bottom: 72px; }
  .cs-results__grid { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; gap: 16px; }
  .cs-stats { gap: 14px; }
  .cs-stat { padding: 26px 16px; }
  .cs-stat__value { font-size: 46px; }
  .cs-stat__label { font-size: 14px; }
  .cs-related__head { flex-direction: column; align-items: flex-start; }
  .cs-related__card { min-height: 340px; }
  .ready__ctas.custom_ctas { justify-content: center; }
  .cs-row__desc.custom_desc {margin: 0 0 18px;}
}

@media (max-width: 575px) {
  .cs-hero { padding-bottom: 56px; }
  .cs-facts { grid-template-columns: minmax(0, 1fr); }
  .cs-fact + .cs-fact { border-left: 0; border-top: 1px solid var(--ink-line); }
  .cs-fact { padding: 18px 20px; }
  .cs-intro__copy p { font-size: 16px; }
  .cs-problem { padding: 20px 18px 20px 22px; gap: 14px; }
  .cs-problem__num { min-width: 46px; font-size: 38px; }
  .cs-problem__title { font-size: 18px; }
  .cs-flow { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .cs-flow__item { padding: 32px 22px 28px; }
  .cs-flow__dot { left: 22px; }
  .cs-flow__item + .cs-flow__item::before { left: 22px; right: 22px; top: 0; bottom: auto; width: auto; height: 1px; }
  .cs-flow__item + .cs-flow__item .cs-flow__dot { display: none; }
  .cs-flow__item:nth-child(n+3) { border-top: 0; }
  .cs-flow__item:nth-child(3)::before { display: block; }
  .cs-flow__icon svg { width: 44px; height: 44px; }
  .cs-flow__icon { margin-top: 18px; }
  .cs-flow__title { margin-top: 18px; }
  .cs-stage { margin-top: 36px; padding: 32px 16px 20px; border-radius: 22px; gap: 10px; }
  .cs-devices { padding-right: 52px; margin-bottom: 52px; }
  .cs-phone { width: 118px; border-width: 6px; border-radius: 22px; bottom: -30px; }
  .cs-phone img { border-radius: 16px; }
  .cs-phone__notch { width: 40px; height: 10px; top: 5px; }
  .cs-callout { width: 100%; }
  .cs-experience { padding-bottom: 64px; }
  .cs-results { padding: 64px 20px; }
  .cs-result { padding: 24px 20px 22px; }
  .cs-stats { grid-template-columns: minmax(0, 1fr); }
  .cs-stat__value { font-size: 54px; }
  .cs-quote__mark { font-size: 84px; }
}
/* Fashion case study: responsive rules for the challenge markers, approach rows, growth timeline, trend charts and FAQ */
.cs-before__legend { display: none; }
.cs-row__points { display: none; }
@media (max-width: 1199px) {
  .cs-row { gap: 40px; padding: 40px; }
  .cs-row__title { font-size: 30px; }
  .cs-tl { max-width: 920px; }
  .cs-trend { padding: 0 30px; }
  .cs-trend::before { inset: 40px 30px 0; }
  .cs-trend__svg { left: 30px; right: 30px; width: calc(100% - 60px); }
  .cs-trend__point--start, .cs-trend__chip--before { left: 30px; }
  .cs-trend__point--end, .cs-trend__chip--after { left: calc(100% - 30px); }
}
@media (max-width: 991px) {
  .cs-story { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 720px; }
  .cs-flow.cs-flow--3 { margin-top: 40px; }
  .cs-flow--3 .cs-flow__item:nth-child(3)::before { display: block; }
  .cs-flow--3 .cs-flow__item:nth-child(n+3) { border-top: 0; }
  .cs-flow--3 .cs-flow__item:nth-child(n+3) .cs-flow__dot { display: block; }
  .cs-split--before { gap: 36px; }
  .cs-split--before .cs-split__text p { max-width: none; }
  .cs-split--before .cs-split__text { text-align: center; }
  .cs-split--before .cs-split__text .title { margin-left: auto; margin-right: auto; }
  .cs-hero .sd-hero__lead, .cs-hero__details { max-width: none; }
  .cs-row__text { text-align: center; }
  .cs-row__desc { margin-left: auto; margin-right: auto; }
  .cs-row__result { text-align: left; }
  .cs-rows { margin-top: 48px; gap: 24px; }
  .cs-row, .cs-row--flip { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 36px; }
  .cs-row--flip .cs-row__media { order: 0; }
  .cs-row__desc { max-width: 60ch; }
  .cs-tl { --tl-gap: 16px; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); margin-top: 44px; }
  .cs-tl__card { padding: 24px 24px 26px; }
  .cs-tl__card::after { right: -15px; width: 15px; }
  .cs-tl__item:nth-child(even) .cs-tl__card::after { left: -15px; }
  .cs-tl__title { font-size: 19px; }
  .cs-tl__text { font-size: 14.5px; }
  .cs-faq__lead { max-width: none; }
}
@media (max-width: 767px) {
  .cs-flow.cs-flow--3 { grid-template-columns: minmax(0, 1fr); }
  .cs-flow--3 .cs-flow__item { padding: 32px 24px 28px; }
  .cs-flow--3 .cs-flow__item + .cs-flow__item::before { left: 24px; right: 24px; top: 0; bottom: auto; width: auto; height: 1px; }
  .cs-flow--3 .cs-flow__item + .cs-flow__item .cs-flow__dot, .cs-flow--3 .cs-flow__item:nth-child(n+3) .cs-flow__dot { display: none; }
  .cs-flow--3 .cs-flow__icon { margin-top: 18px; }
  .cs-flow--3 .cs-flow__title { margin-top: 18px; }
  .cs-note { padding: 4px 9px 4px 6px; gap: 6px; font-size: 11px; }
  .cs-before__tag { top: 12px; left: 12px; gap: 8px; padding: 4px 14px 4px 4px; font-size: 13px; box-shadow: 0 0 0 4px rgba(229,72,77,.14), 0 12px 24px -12px rgba(11,13,18,.7); }
  .cs-before__tag b { padding: 5px 10px 5px 9px; font-size: 11px; }
  .cs-row, .cs-row--flip { padding: 28px; border-radius: 26px; }
  .cs-row__title { font-size: 26px; }
  .cs-row__desc { font-size: 16px; }
  .cs-row__result strong { font-size: 30px; }
  .cs-row__result small { display: none; }
  /* Image notes become numbered pins on the screenshot, with the matching numbered list attached underneath */
  .cs-row__media { counter-reset: cs-pt; border-radius: 18px 18px 0 0; box-shadow: none; }
  .cs-row__media .cs-note { counter-increment: cs-pt; translate: -50% -50%; justify-content: center; width: 26px; height: 26px; padding: 0; gap: 0; border-radius: 50%; font-size: 0; background: var(--greenmarked); border: 2px solid var(--white); box-shadow: 0 0 0 4px rgba(28,127,13,.22), 0 6px 14px -4px rgba(11,13,18,.45); }
  .cs-row__media .cs-note i { display: none; }
  .cs-row__media .cs-note::before { content: counter(cs-pt); font-size: 12px; font-weight: 700; line-height: 1; color: var(--white); }
  .cs-row__points { counter-reset: cs-pt; display: grid; gap: 10px; margin: -32px 0 0; padding: 16px 18px; list-style: none; border: 1px solid var(--ink-line); border-top: 0; border-radius: 0 0 18px 18px; background: var(--white); box-shadow: 0 30px 60px -44px rgba(23,32,64,.55); }
  .cs-row__points li { counter-increment: cs-pt; display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
  .cs-row__points li::before { content: counter(cs-pt); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--greenmarked); font-size: 12px; font-weight: 700; color: var(--white); box-shadow: 0 0 0 4px rgba(28,127,13,.15); }
  /* Timeline: one column, line and numbers down the left */
  .cs-tl { grid-template-columns: 56px minmax(0, 1fr); }
  .cs-tl__card, .cs-tl__item:nth-child(even) .cs-tl__card { grid-column: 2; }
  .cs-tl__card::after, .cs-tl__item:nth-child(even) .cs-tl__card::after { left: -14px; right: auto; width: 14px; }
  .cs-tl__dot { grid-column: 1; justify-self: start; }
  .cs-tl__item:not(:last-child)::before, .cs-tl__item:not(:last-child)::after { left: 21px; }
  .cs-tl__card:hover { translate: none; }
  .cs-journey { padding-bottom: 64px; }
}
@media (max-width: 575px) {
  /* On-image labels get too small to read: keep the red zones, list the issues under the image instead */
  .cs-chart { padding: 20px 18px 14px; border-radius: 20px; }
  .cs-chart__head { flex-direction: column; gap: 14px; }
  .cs-chart__title { font-size: 20px; }
  .cs-chart__sub { max-width: none; }
  .cs-chart__stat { width: 100%; }
  /* "Before" tag sits in a strip above the screenshot so it doesn't cover the navigation zone */
  .cs-before__tag { position: relative; top: auto; left: auto; margin-bottom: 14px; }
  .cs-before__shot .cs-note { display: none; }
  /* Each red zone gets a numbered pin; the matching numbered list is attached under the screenshot */
  .cs-before__shot { counter-reset: cs-issue; border-radius: 18px 18px 0 0; box-shadow: none; }
  .cs-zone { counter-increment: cs-issue; }
  .cs-zone::before { content: counter(cs-issue); position: absolute; top: 50%; left: 0; translate: -50% -50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E5484D; border: 2px solid var(--white); font-size: 11px; font-weight: 700; line-height: 1; color: var(--white); box-shadow: 0 0 0 3px rgba(229,72,77,.25), 0 6px 12px -4px rgba(11,13,18,.45); }
  .cs-before__legend { counter-reset: cs-issue; display: grid; gap: 10px; margin: 0; padding: 14px 16px; list-style: none; border: 1px solid var(--ink-line); border-top: 0; border-radius: 0 0 18px 18px; background: var(--white); box-shadow: 0 30px 60px -44px rgba(23,32,64,.55); }
  .cs-before__legend li { counter-increment: cs-issue; display: flex; align-items: center; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: left; }
  .cs-before__legend li::before { content: counter(cs-issue); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E5484D; font-size: 12px; font-weight: 700; color: var(--white); box-shadow: 0 0 0 4px rgba(229,72,77,.15); }
  .cs-before__cap { margin-top: 14px; font-size: 13px; }
  .cs-before__key { display: none; }
  .cs-rows { margin-top: 36px; gap: 18px; }
  .cs-row, .cs-row--flip { padding: 22px 18px; gap: 24px; border-radius: 22px; }
  .cs-row__media { border-radius: 16px 16px 0 0; }
  .cs-row__points { margin-top: -24px; padding: 14px 16px; border-radius: 0 0 16px 16px; }
  .cs-row__title { font-size: 23px; }
  .cs-row__result { display: flex; padding: 14px 16px 14px 14px; }
  .cs-tl { --tl-gap: 14px; grid-template-columns: 48px minmax(0, 1fr); margin-top: 36px; }
  .cs-tl__dot { margin-top: 18px; width: 36px; height: 36px; font-size: 12px; box-shadow: 0 0 0 5px #E9EEFF, 0 8px 16px -8px rgba(47,73,184,.6); }
  .cs-tl__item:not(:last-child)::before, .cs-tl__item:not(:last-child)::after { left: 18px; top: 36px; }
  .cs-tl__card { padding: 20px 20px 22px; border-radius: 20px; }
  .cs-tl__card::after, .cs-tl__item:nth-child(even) .cs-tl__card::after { top: 35px; left: -12px; width: 12px; }
  .cs-tl__title { font-size: 18px; }
  .cs-trend { padding: 0 28px; }
  .cs-trend::before { inset: 40px 28px 0; }
  .cs-trend__svg { left: 28px; right: 28px; width: calc(100% - 56px); }
  .cs-trend__point--start, .cs-trend__chip--before { left: 28px; }
  .cs-trend__point--end, .cs-trend__chip--after { left: calc(100% - 28px); }
  .cs-faq__cta { margin-top: 22px; }
}
@media (max-width: 399px) {
  .cs-row, .cs-row--flip { padding: 20px 16px; }
  .cs-row__title { font-size: 21px; }
  .cs-row__result strong { font-size: 26px; }
  .cs-tl { grid-template-columns: 44px minmax(0, 1fr); }
  .cs-tl__card { padding: 18px 16px 20px; }
  .cs-trend__chip { min-width: 60px; padding: 7px 10px 6px; }
  .cs-trend__chip b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .cs-problem:hover { translate: none; } .cs-hero__shot, .cs-callout { animation: none; } .cs-bar__fill, .cs-gauge__marker { transition: none; } }

/* ---------- Case studies listing (case-studies.html) ---------- */
.csl-list { padding: 90px 24px 100px; }
.csl-filters { margin-top: 36px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.csl-filter {
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--ink-line); background: var(--white);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-text); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.csl-filter:hover { border-color: rgba(47,73,184,.4); color: var(--ink-accent); }
.csl-filter.is-active { background: linear-gradient(135deg, var(--accent), var(--ink-accent)); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -12px rgba(47,73,184,.7); }
.csl-grid { margin: 40px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.csl-item[hidden] { display: none; }
.csl-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px;
  background: var(--white); border: 1px solid var(--ink-line); box-shadow: 0 40px 70px -56px rgba(23,32,64,.65);
  transition: translate .45s var(--ease), box-shadow .45s ease, border-color .45s ease;
}
.csl-card:hover, .csl-card:focus-visible { translate: 0 -6px; border-color: rgba(47,73,184,.3); box-shadow: 0 50px 80px -50px rgba(47,73,184,.55); }
.csl-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--light); border-bottom: 1px solid var(--ink-line); }
.csl-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.1s var(--ease); }
.csl-card:hover .csl-card__media img { transform: scale(1.04); }
.csl-card__body { position: relative; flex: 1; display: flex; flex-direction: column; padding: 26px 28px 28px; }
.csl-card__tag { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(110,139,255,.12); color: var(--ink-accent); font-size: 12.5px; font-weight: 600; }
.csl-card__title { margin: 14px 0 0; padding-right: 56px; font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.csl-card__stats { margin: auto 0 0; padding-top: 22px; display: flex; gap: 32px; }
.csl-card__stats div { display: flex; flex-direction: column-reverse; }
.csl-card__stats dd { margin: 0; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; background: linear-gradient(180deg, var(--ink-accent), rgba(110,139,255,.45)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.csl-card__stats dt { margin-top: 6px; font-size: 13.5px; color: var(--ink-muted); }
.csl-card__arrow {
  position: absolute; right: 26px; bottom: 28px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--ink-line); color: var(--ink-accent); transition: background .3s ease, color .3s ease, border-color .3s ease, rotate .4s var(--ease);
}
.csl-card:hover .csl-card__arrow { background: var(--accent); border-color: var(--accent); color: #fff; rotate: 45deg; }
@media (max-width: 1199px) { .csl-card__title { font-size: 20px; } .csl-card__stats dd { font-size: 30px; } }
@media (max-width: 991px) { .csl-list { padding: 72px 24px 80px; } .csl-grid { gap: 20px; } .csl-card__body { padding: 22px 22px 24px; } .csl-card__arrow { right: 20px; bottom: 22px; width: 42px; height: 42px; } }
@media (max-width: 767px) { .csl-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) {
  .csl-list { padding: 64px 20px; }
  .csl-filters { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-left: -20px; margin-right: -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .csl-filters::-webkit-scrollbar { display: none; }
  .csl-filter { flex: none; padding: 10px 16px; font-size: 14px; }
  .csl-card__title { font-size: 19px; padding-right: 0; }
  .csl-card__stats { gap: 24px; padding-right: 56px; }
  .csl-card__stats dd { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .csl-card:hover, .csl-card:focus-visible { translate: none; } }

/* ---------- Blog listing (blog.html): simple 3-column grid of post cards ---------- */
.bl-list { padding: 90px 24px 100px; }
.bl-grid { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.bl-grid > li { display: flex; }
.bl-card { width: 100%; min-height: 380px; cursor: pointer; }
/* Light gradient: the photo shows clearly; a soft fade only at the top (category/date)
   and the bottom (title) keeps the white text readable */
.bl-card .post-title { font-size: clamp(21px, 1.9vw, 25px); font-weight: 700; line-height: 1.22; max-width: none; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.bl-card .post-meta { text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.bl-card .post-img__shade { background: linear-gradient(180deg, rgba(8,12,28,.42) 0%, rgba(8,12,28,0) 22%, rgba(8,12,28,0) 48%, rgba(8,12,28,.55) 72%, rgba(6,8,14,.88) 100%); }
.bl-card:hover .post-img__shade, .bl-card:focus-visible .post-img__shade { opacity: 1; }
.bl-card .post-meta { font-weight: 500; }

/* Blog page + homepage Insights cards: white fade rising from the bottom, dark navy title
   on the white area, photo left clear at the top */
.blog-page .bl-card, .insights .post-card { border-color: var(--ink-line); }
.blog-page .bl-card .post-img__shade, .insights .post-card .post-img__shade {
  background: linear-gradient(180deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0) 34%,
    rgba(255,255,255,.72) 58%, rgba(255,255,255,.96) 76%, #FFFFFF 100%);
}
.blog-page .bl-card:hover .post-img__shade, .blog-page .bl-card:focus-visible .post-img__shade,
.insights .post-card:hover .post-img__shade, .insights .post-card:focus-visible .post-img__shade { opacity: 1; }
.blog-page .bl-card .post-title, .insights .post-card .post-title { color: var(--ink); text-shadow: none; padding-right: 52px; font-weight: 700; }
/* Category + date: solid white pills so they stay readable on any photo (dark, light or busy) */
.blog-page .bl-card .post-meta, .insights .post-card .post-meta { align-items: flex-start; }
.blog-page .bl-card .post-meta span, .blog-page .bl-card .post-meta time,
.insights .post-card .post-meta span, .insights .post-card .post-meta time {
  padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.96);
  font-size: 13px; font-weight: 600; line-height: 1.2; text-shadow: none; opacity: 1;
  box-shadow: 0 6px 16px -6px rgba(11,13,18,.45);
}
.blog-page .bl-card .post-meta span, .insights .post-card .post-meta span { color: var(--ink-accent); }
.blog-page .bl-card .post-meta time, .insights .post-card .post-meta time { color: var(--ink); }

/* Compact blog banner (blog/index.html only) */
.sd-hero.bl-hero { padding: 112px 24px 44px; }
.bl-hero .sd-crumbs { margin-bottom: 16px; }
.bl-hero .sd-hero__title { font-size: clamp(34px, 3.6vw, 52px); }
.bl-hero .sd-hero__lead { margin-top: 14px; font-size: 17px; }
.bl-hero .sd-hero__ctas { margin-top: 24px; }
.bl-card__soon {
  position: relative; z-index: 2; align-self: flex-start; margin-top: -24px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--white);
}
@media (max-width: 991px) {
  .sd-hero.bl-hero { padding: 104px 24px 40px; }
  .bl-list { padding: 72px 24px 80px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 575px) {
  .sd-hero.bl-hero { padding: 96px 20px 34px; }
  .bl-list { padding: 64px 20px; }
  .bl-grid { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .bl-card { min-height: 300px; }
}

/* Real posts are links again; only "coming soon" cards hide the read arrow */
.bl-card--soon::after { display: none; }
.bl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ar-more .insights__head { margin-bottom: 0; }

/* ---------- Blog article (blog/*.html): dark hero, sticky contents sidebar, readable body ---------- */
.ar-hero { padding: 118px 24px 44px; }
.ar-hero__inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.ar-hero__cat {
  display: inline-block; margin-top: 16px; padding: 5px 12px; border-radius: 999px;
  background: rgba(110,139,255,.14); border: 1px solid rgba(110,139,255,.4);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-soft);
}
.ar-hero__title { margin: 12px 0 0; max-width: 30ch; font-size: clamp(28px, 3.3vw, 44px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; color: var(--white); text-wrap: balance; }
.ar-hero__meta { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; font-size: 15px; color: var(--muted); }

.ar-wrap { padding: 56px 24px 96px; }
.ar-layout { max-width: 1220px; margin: 0 auto; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
.ar-aside { position: sticky; top: 108px; }
/* The title stays put; only the list scrolls when it is taller than the screen */
.ar-toc {
  position: relative; overflow: hidden; padding: 24px 18px 18px; border-radius: 22px;
  display: flex; flex-direction: column; max-height: calc(100vh - 128px);
  background: linear-gradient(180deg, #F2F5FF 0%, #FFFFFF 38%);
  border: 1px solid rgba(110,139,255,.35);
  box-shadow: 0 24px 50px -34px rgba(47,73,184,.55);
}
.ar-toc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--ink-accent)); }
.ar-toc__title { flex: none; margin: 0 0 14px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.ar-toc__list { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px 0 0; padding: 0 6px 0 0; list-style: none; display: grid; align-content: start; gap: 2px; scrollbar-width: thin; scrollbar-color: rgba(110,139,255,.45) transparent; }
.ar-toc__list::-webkit-scrollbar { width: 6px; }
.ar-toc__list::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(110,139,255,.45); }
.ar-toc__list a {
  display: block; padding: 8px 12px 8px 14px; border-left: 3px solid transparent; border-radius: 0 10px 10px 0;
  font-size: 14px; line-height: 1.4; color: var(--ink-body); transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.ar-toc__list a:hover { color: var(--ink); background: rgba(110,139,255,.08); }
.ar-toc__list a.is-active { color: var(--white); font-weight: 600; border-left-color: #1E2F8A; background: linear-gradient(90deg, var(--ink-accent), #4A66F0); box-shadow: 0 8px 18px -10px rgba(47,73,184,.8); }
.ar-toc__list li[hidden] { display: none; }

.ar-body { min-width: 0; max-width: 760px; padding: 44px 48px 48px; border-radius: 24px; background: var(--white); border: 1px solid var(--ink-line); box-shadow: 0 30px 70px -50px rgba(23,32,64,.4); color: var(--ink-body); font-size: 17px; line-height: 1.75; }
.ar-body > p:first-of-type { font-size: 19px; line-height: 1.7; color: var(--ink-text); }
.ar-body p { margin: 0 0 12px; }
.ar-body h2 { margin: 44px 0 14px; scroll-margin-top: 110px; font-size: clamp(25px, 2.4vw, 31px); line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--ink); }
.ar-body h2:first-child, .ar-toc-mobile + h2 { margin-top: 0; }
.ar-body h3 { margin: 26px 0 8px; font-size: 20.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.ar-body h4 { margin: 20px 0 6px; font-size: 18px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.ar-body a { color: var(--ink-accent); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(47,73,184,.35); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.ar-body a:hover { text-decoration-color: var(--ink-accent); }
.ar-body strong { color: var(--ink); }
.ar-body ul { margin: 4px 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.ar-body ul li { position: relative; padding-left: 34px; }
/* Check-icon bullets */
.ar-body ul li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px 12px no-repeat,
    linear-gradient(135deg, #6E8BFF, #2F49B8);
  box-shadow: 0 4px 10px -4px rgba(47,73,184,.6);
}
/* "Mistake 1" style label in front of a section title */
.ar-h2-tag {
  display: inline-block; margin: 0 10px 8px 0; padding: 6px 12px 5px; border-radius: 999px; vertical-align: .2em;
  background: linear-gradient(135deg, #6E8BFF, #2F49B8); color: var(--white);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
  box-shadow: 0 8px 18px -10px rgba(47,73,184,.8);
}
.ar-quote { margin: 0 0 22px; padding: 18px 22px; border-left: 3px solid var(--accent); border-radius: 0 14px 14px 0; background: #F3F6FF; }
.ar-quote p { margin: 0; font-size: 17px; font-style: italic; color: var(--ink-text); }
.ar-table { margin: 6px 0 26px; overflow-x: auto; border: 1px solid var(--ink-line); border-radius: 16px; }
.ar-table:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ar-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.ar-table th { padding: 13px 16px; background: #0F1426; color: var(--white); font-weight: 600; text-align: left; white-space: nowrap; }
.ar-table td { padding: 12px 16px; border-top: 1px solid var(--ink-line); vertical-align: top; }
.ar-table tbody tr:nth-child(even) td { background: #F7F9FC; }
.ar-table td:first-child { font-weight: 600; color: var(--ink); }

.ar-faq { display: grid; gap: 10px; }
.ar-faq__item { border: 1px solid var(--ink-line); border-radius: 16px; background: #F9FAFD; transition: border-color .2s ease, background .2s ease; }
.ar-faq__item[open] { border-color: rgba(110,139,255,.45); background: var(--white); }
.ar-faq__item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.ar-faq__item summary::-webkit-details-marker { display: none; }
.ar-faq__icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(110,139,255,.12); color: var(--ink-accent); transition: transform .25s ease; }
.ar-faq__item[open] .ar-faq__icon { transform: rotate(180deg); }
.ar-faq__answer { padding: 0 18px 4px; font-size: 16px; }

.ar-toc-mobile { display: none; }

@media (max-width: 1199px) {
  .ar-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 36px; }
  .ar-body { padding: 40px 36px; }
}
@media (max-width: 991px) {
  .ar-hero { padding: 108px 24px 38px; }
  .ar-wrap { padding: 48px 24px 72px; }
  .ar-layout { grid-template-columns: minmax(0, 1fr); }
  .ar-aside { display: none; }
  .ar-body { max-width: none; }
  .ar-toc-mobile { display: block; margin: 0 0 32px; border: 1px solid var(--ink-line); border-radius: 16px; background: #F9FAFD; }
  .ar-toc-mobile summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
  .ar-toc-mobile summary::-webkit-details-marker { display: none; }
  .ar-toc-mobile[open] summary span { transform: rotate(180deg); }
  .ar-toc-mobile summary span { display: grid; transition: transform .25s ease; }
  .ar-toc-mobile ol { margin: 0; padding: 0 18px 16px 38px; display: grid; gap: 8px; font-size: 15px; }
  .ar-toc-mobile a { text-decoration: none; color: var(--ink-body); font-weight: 500; }
  .bl-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .ar-hero { padding: 100px 20px 30px; }
  .ar-hero__meta { font-size: 14px; }
  .ar-wrap { padding: 28px 12px 56px; }
  .ar-body { padding: 26px 18px 30px; border-radius: 20px; font-size: 16px; }
  .ar-body > p:first-of-type { font-size: 17px; }
  .ar-body h2 { margin-top: 40px; }
  .ar-body h3 { font-size: 18.5px; }
  .ar-body h4 { font-size: 16.5px; }
  .ar-faq__item summary { padding: 14px; font-size: 15.5px; }
  .ar-faq__answer { padding: 0 14px 2px; font-size: 15px; }
  .bl-grid--2 { grid-template-columns: minmax(0, 1fr); }
}

/* Privacy policy (privacy-policy.html): reuses the article layout; closing line as a soft callout */
.lg-note { margin-top: 28px !important; padding: 18px 22px; border-radius: 16px; background: linear-gradient(135deg, #EEF2FF, #F7F9FF); border: 1px solid rgba(110,139,255,.3); font-weight: 600; color: var(--ink-accent); }

/* ---------- 404 page ---------- */
.nf { position: relative; overflow: hidden; min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 140px 24px 100px; text-align: center; background: var(--bg); }
.nf__glow { position: absolute; left: 50%; top: 42%; width: min(900px, 120vw); height: 520px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(110,139,255,.32), rgba(110,139,255,0)); pointer-events: none; }
.nf__inner { position: relative; z-index: 1; max-width: 760px; }
.nf__code {
  margin: 0; font-family: var(--font-display); font-size: clamp(140px, 24vw, 300px); line-height: .9; letter-spacing: .02em;
  color: transparent; -webkit-text-stroke: 2px rgba(169,198,255,.55);
  background: linear-gradient(180deg, rgba(110,139,255,.35), rgba(110,139,255,0) 85%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 40px rgba(110,139,255,.35));
}
.nf__eyebrow { margin-top: 18px; justify-content: center; }
.nf__title { margin: 16px auto 0; max-width: 16ch; }
.nf__lead { margin: 18px auto 0; max-width: 52ch; font-size: 17px; line-height: 1.7; color: var(--muted); }
.nf__ctas { margin-top: 32px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.nf__links { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.nf__links-label { width: 100%; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.nf__links a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-3); color: var(--text-2); font-size: 14.5px; font-weight: 500; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.nf__links a:hover, .nf__links a:focus-visible { border-color: var(--accent); color: var(--white); background: rgba(110,139,255,.12); }
@media (max-width: 575px) {
  .nf { padding: 120px 20px 72px; }
  .nf__ctas .btn { width: 100%; justify-content: center; }
}

/* ---------- Industries overview (industries.html): 3×2 photo cards ---------- */
.il-list { padding: 90px 24px; }
.il-grid { margin: 48px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.il-grid > li { display: flex; }
.il-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; width: 100%; min-height: 420px;
  border-radius: 22px; color: #fff; background: var(--ink);
  box-shadow: 0 40px 70px -50px rgba(23,32,64,.75);
  transition: translate .45s var(--ease), box-shadow .45s ease;
}
.il-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.il-card__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8,9,11,.05) 0%, rgba(8,9,11,.3) 45%, rgba(8,9,11,.9) 100%); }
.il-card__body { padding: 26px 84px 28px 26px; } /* right padding keeps text clear of the arrow */
.il-card__title { margin: 0; font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.il-card__desc { margin: 10px 0 0; max-width: 34ch; font-size: 15px; line-height: 1.6; color: #D6DBE4; }
.il-card__arrow {
  position: absolute; right: 22px; bottom: 26px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background .3s ease, border-color .3s ease, rotate .4s var(--ease);
}
.il-card:hover, .il-card:focus-visible { translate: 0 -6px; box-shadow: 0 50px 80px -46px rgba(47,73,184,.7); }
.il-card:hover > img, .il-card:focus-visible > img { transform: scale(1.06); }
.il-card:hover .il-card__arrow, .il-card:focus-visible .il-card__arrow { background: var(--accent); border-color: var(--accent); rotate: 45deg; }
@media (max-width: 1199px) {
  .il-card { min-height: 380px; }
  .il-card__title { font-size: 21px; }
}
@media (max-width: 991px) {
  .il-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .il-list { padding: 72px 24px; }
}
@media (max-width: 767px) {
  .il-card { min-height: 340px; }
  .il-card__desc { font-size: 14px; }
}
@media (max-width: 575px) {
  .il-list { padding: 64px 20px; }
  .il-grid { margin-top: 36px; grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .il-card { min-height: 300px; }
  .il-card__body { padding: 22px 76px 22px 22px; }
  .il-card__arrow { width: 40px; height: 40px; right: 18px; bottom: 22px; }
}
@media (max-width: 399px) {
  .il-card { min-height: 270px; }
  .il-card__title { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { .il-card:hover, .il-card:focus-visible { translate: none; } }

/* ---------- Industry pages (industry-*.html) ---------- */
/* 01 Hero: one industry photo on the board instead of two screenshots */
.in-hero__photo { width: 74%; height: 400px; left: 13%; top: 10px; z-index: 1; animation: sd-float 8s ease-in-out infinite alternate; }
.in-hero__photo img { object-position: center; }
.in-hero .sd-chip--palette { right: 0; top: 36px; }
.in-hero .sd-chip--type { left: 0; top: auto; bottom: 120px; }
.in-hero .sd-chip--button { right: 2%; bottom: 10px; }

/* 02 Introduction: heading | copy, then a strip of three captioned photos */
.in-intro__head {
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: end;
}
.in-intro__head .title { margin-top: 14px; max-width: 16ch; }
.in-intro__copy { padding-left: 28px; border-left: 3px solid var(--accent); }
.in-intro__copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--ink-body); }
.in-intro__copy p + p { margin-top: 14px; }
.in-strip {
  max-width: var(--container); margin: 52px auto 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px;
}
.in-strip__item { position: relative; margin: 0; height: 380px; overflow: hidden; border-radius: 22px; box-shadow: 0 40px 70px -50px rgba(23,32,64,.7); }
.in-strip__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.in-strip__item--wide img { object-position: center 20%; }
.in-strip__item:hover img { transform: scale(1.05); }
.in-strip__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,9,11,.6)); pointer-events: none; }
.in-strip__item figcaption {
  position: absolute; left: 16px; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 10px; border-radius: 999px; background: rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.in-strip__tick {
  flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
}

/* 03 Solutions: dark bento grid (information only, no links) */
.in-sol { padding: 100px 24px; background: var(--bg); color: var(--text); }
.in-sol .inner { position: relative; }
.in-sol .lead { margin: 18px auto 0; color: var(--muted); }
.in-bento {
  margin-top: 48px; display: grid; gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 290px;
  grid-template-areas: "design design plus apps" "migrate dev cro cro";
}
.in-tile--design { grid-area: design; } .in-tile--plus { grid-area: plus; } .in-tile--apps { grid-area: apps; }
.in-tile--migrate { grid-area: migrate; } .in-tile--dev { grid-area: dev; } .in-tile--cro { grid-area: cro; }
.in-tile {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px; border-radius: 22px; color: var(--text);
  background: linear-gradient(160deg, var(--surface), var(--surface-2)); border: 1px solid var(--line-2);
  transition: border-color .4s ease;
}
.in-tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(80% 70% at 100% 0%, rgba(110,139,255,.22), transparent 70%);
}
.in-tile:hover { border-color: rgba(110,139,255,.35); }
.in-tile:hover::after { opacity: 1; }
.in-tile__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px;
  background: rgba(110,139,255,.16); border: 1px solid rgba(110,139,255,.3); color: var(--accent-soft);
}
.in-tile__title { margin: 0; font-size: 21px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: #fff; }
.in-tile__text { margin: 8px 0 0; max-width: 40ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.in-tile--photo .in-tile__media { position: absolute; inset: 0; z-index: -3; }
.in-tile--photo .in-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.in-tile--photo:hover .in-tile__media img { transform: scale(1.05); }
.in-tile__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(8,9,11,.15) 0%, rgba(8,9,11,.55) 45%, rgba(8,9,11,.92) 100%); }
.in-tile--photo .in-tile__icon { background: rgba(14,16,22,.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.in-tile--photo .in-tile__text { color: var(--text-2); }

/* 04 Challenges: comparison table */
.in-table-wrap {
  max-width: var(--container); margin: 48px auto 0; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--ink-line); background: var(--white);
  box-shadow: 0 40px 80px -60px rgba(23,32,64,.6);
}
.in-table { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: left; }
.in-table col, .in-table th, .in-table td { vertical-align: middle; }
.in-table thead th {
  padding: 18px 28px; background: var(--ink); color: #fff;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
}
.in-table thead th:nth-child(1) { width: 30%; }
.in-table thead th:nth-child(2) { width: 32%; color: var(--muted); }
.in-table thead th:nth-child(3) { background: var(--ink-accent); }
.in-table tbody tr + tr > * { border-top: 1px solid var(--ink-line); }
.in-table tbody th, .in-table tbody td { padding: 24px 28px; }
.in-table tbody th { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; color: var(--ink); }
.in-table__name { display: flex; align-items: center; gap: 14px; }
.in-table__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--light); border: 1px solid var(--ink-line); color: var(--ink-accent);
}
.in-table tbody td { font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.in-table__fix { background: rgba(110,139,255,.07); color: var(--ink-text) !important; }
/* Tick floats beside the text so it stays on the first line, however the cell is centred */
.in-table__fix > span:last-child { display: block; overflow: hidden; }
.in-table__tick {
  float: left; margin-right: 14px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff;
}
.in-table tbody tr { transition: background .3s ease; }
.in-table tbody tr:hover { background: #FAFBFE; }
.in-table tbody tr:hover .in-table__fix { background: rgba(110,139,255,.12); }

/* Industry pages: responsive (site breakpoints 1199 · 991 · 767 · 575 · 480 · 399) */
@media (max-width: 1199px) {
  .in-intro__head { gap: 44px; }
  .in-strip__item { height: 340px; }
  .in-bento { grid-auto-rows: 270px; gap: 16px; }
  .in-tile { padding: 22px; }
  .in-tile__title { font-size: 19px; }
  .in-table thead th, .in-table tbody th, .in-table tbody td { padding-left: 22px; padding-right: 22px; }
  .in-table tbody th { font-size: 16px; }
}
@media (max-width: 991px) {
  .in-intro__head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .in-intro__head .title { max-width: 20ch; }
  .in-strip { margin-top: 40px; gap: 16px; }
  .in-strip__item { height: 300px; }
  .in-sol { padding: 72px 24px; }
  .in-bento {
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 250px;
    grid-template-areas: "design design" "plus apps" "migrate dev" "cro cro";
  }
  .in-table thead th:nth-child(1) { width: 32%; }
  .in-table thead th:nth-child(2) { width: 30%; }
  .in-table__name { gap: 12px; }
  .in-table__icon { width: 40px; height: 40px; }
  .in-table tbody th, .in-table tbody td { padding-top: 20px; padding-bottom: 20px; font-size: 14.5px; }
  .in-table tbody th { font-size: 15.5px; }
}
@media (max-width: 767px) {
  .in-hero .sd-board { height: 330px; }
  .in-hero__photo { width: 68%; left: 16%; height: 300px; top: 10px; }
  .in-hero .sd-chip--palette { right: 0; top: 24px; }
  .in-hero .sd-chip--type { left: 0; bottom: 96px; }
  .in-hero .sd-chip--button { right: 0; bottom: 0; }
  /* Photo strip: wide image on top, two below */
  .in-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-strip__item { height: 240px; }
  .in-strip__item--wide { grid-column: 1 / -1; order: -1; height: 280px; }
  .in-strip__item figcaption { left: 12px; bottom: 12px; font-size: 13.5px; padding: 8px 14px 8px 8px; }
  .in-strip__tick { width: 22px; height: 22px; }
  .in-bento { grid-auto-rows: 230px; }
  .in-tile__text { font-size: 14px; }
  /* Table becomes one card per challenge */
  .in-table-wrap { margin-top: 36px; overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .in-table, .in-table tbody, .in-table tr, .in-table tbody th, .in-table tbody td { display: block; width: 100%; }
  .in-table thead { display: none; }
  .in-table tbody { display: grid; gap: 16px; }
  .in-table tbody tr {
    overflow: hidden; border-radius: 20px; border: 1px solid var(--ink-line); background: var(--white);
    box-shadow: 0 30px 60px -48px rgba(23,32,64,.6);
  }
  .in-table tbody tr + tr > * { border-top: 0; }
  .in-table tbody tr:hover { background: var(--white); }
  .in-table tbody th, .in-table tbody td { padding: 18px 22px; }
  .in-table tbody td { border-top: 1px solid var(--ink-line); }
  .in-table tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 6px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted);
  }
  .in-table__fix::before { color: var(--ink-accent) !important; }
  .in-table__tick { display: none; }
}
@media (max-width: 575px) {
  .in-sol { padding: 64px 20px; }
  .in-intro__copy { padding-left: 20px; }
  .in-intro__copy p { font-size: 16px; }
  .in-strip { grid-template-columns: minmax(0, 1fr); margin-top: 32px; gap: 14px; }
  .in-strip__item, .in-strip__item--wide { height: 230px; }
  .in-strip__item--wide { grid-column: auto; order: 0; }
  .in-bento { margin-top: 36px; grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-auto-rows: auto; gap: 14px; }
  .in-bento > .in-tile { grid-area: auto; min-height: 190px; gap: 28px; }
  .in-bento > .in-tile--photo { min-height: 260px; }
  .in-hero .sd-board { height: 290px; }
  .in-hero__photo { width: 74%; left: 13%; height: 260px; }
  .in-hero .sd-chip--type { left: 0; top: auto; bottom: 80px; }
  .in-hero .sd-chip--button { right: 0; bottom: 0; }
}
@media (max-width: 480px) {
  .in-hero .sd-board { height: 260px; }
  .in-hero__photo { height: 236px; }
  .in-hero .sd-chip--type { bottom: 70px; }
  .in-strip__item, .in-strip__item--wide { height: 210px; }
  .in-table tbody th, .in-table tbody td { padding: 16px 18px; }
}
@media (max-width: 399px) {
  .in-tile { padding: 20px 18px; }
  .in-tile__title { font-size: 18px; }
  .in-table__name { gap: 10px; }
}

/* ---------- Thank-you pop-up (built by custom.js after a form is sent) ---------- */
html.ty-open { overflow: hidden; }
.ty-modal { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 20px; }
.ty-modal[hidden] { display: none; }
.ty-modal__backdrop { position: fixed; inset: 0; background: rgba(4,5,9,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity .3s ease; }
.ty-modal__dialog {
  position: relative; width: 100%; max-width: 440px; padding: 48px 36px 40px; border-radius: 26px; text-align: center; overflow: hidden;
  background: var(--white); box-shadow: 0 60px 120px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0; transform: translateY(18px) scale(.96); transition: opacity .35s var(--ease), transform .45s cubic-bezier(.22, 1, .36, 1);
}
.ty-modal__dialog::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), var(--ink-accent)); }
.ty-modal.is-open .ty-modal__backdrop { opacity: 1; }
.ty-modal.is-open .ty-modal__dialog { opacity: 1; transform: none; }
.ty-modal__x {
  position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--light); border: 1px solid var(--ink-line); color: var(--ink); cursor: pointer; transition: background .2s ease, color .2s ease, transform .3s ease;
}
.ty-modal__x:hover { background: var(--ink); color: var(--white); transform: rotate(90deg); }
.ty-modal__icon {
  display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%;
  background: linear-gradient(135deg, #2BB24C, #1C7F0D); color: var(--white);
  box-shadow: 0 0 0 10px rgba(43,178,76,.14), 0 18px 34px -12px rgba(28,127,13,.6);
  transform: scale(.6); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1) .1s;
}
.ty-modal.is-open .ty-modal__icon { transform: scale(1); }
.ty-modal__tick { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s ease .35s; }
.ty-modal.is-open .ty-modal__tick { stroke-dashoffset: 0; }
.ty-modal__title { margin: 26px 0 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.ty-modal__text { margin: 12px auto 0; max-width: 34ch; font-size: 16px; line-height: 1.65; color: var(--ink-body); }
@media (max-width: 575px) {
  .ty-modal__dialog { padding: 42px 22px 32px; border-radius: 22px; }
  .ty-modal__icon { width: 64px; height: 64px; }
  .ty-modal__title { margin-top: 22px; font-size: 24px; }
  .ty-modal__text { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .ty-modal__dialog, .ty-modal__backdrop, .ty-modal__icon, .ty-modal__tick { transition: none; }
}

/* ==========================================================================
   Blog listing v2 (blog/index.html): two-column hero, topic tabs + search,
   featured article, live article count, light CTA band.
   Desktop only for now; the cards keep their existing design.
   ========================================================================== */
.sd-hero.bl-hero { padding: 120px 24px 64px; }
.bl-hero .sd-hero__inner { gap: 64px; }
.bl-hero__eyebrow { margin-bottom: 14px; }
.bl-hero__media { position: relative; }
.bl-hero__media img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 24px; border: 1px solid rgba(169,198,255,.16);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.7);
}

/* Toolbar: topic pills left, search right */
.bl-list { padding-top: 64px; }
.bl-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.bl-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-tab {
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--ink-line); background: var(--white);
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--ink-text); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.bl-tab:hover { border-color: rgba(47,73,184,.4); color: var(--ink-accent); }
.bl-tab.is-active { background: linear-gradient(135deg, var(--accent), var(--ink-accent)); border-color: transparent; color: #fff; box-shadow: 0 12px 26px -12px rgba(47,73,184,.7); }
.bl-search {
  position: relative; flex: 0 0 300px; display: flex; align-items: center;
  color: var(--ink-muted);
}
.bl-search svg { position: absolute; left: 16px; pointer-events: none; }
.bl-search input {
  width: 100%; padding: 12px 18px 12px 44px; border-radius: 999px;
  border: 1px solid var(--ink-line); background: var(--white);
  font: inherit; font-size: 15px; color: var(--ink); outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.bl-search input::placeholder { color: var(--ink-muted); }
.bl-search input:focus { border-color: var(--ink-accent); box-shadow: 0 0 0 4px rgba(47,73,184,.12); }

/* Featured article */
.bl-featured {
  margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: stretch;
  border: 1px solid var(--ink-line); border-radius: 24px; overflow: hidden; background: var(--white);
  color: var(--ink); text-decoration: none;
  transition: box-shadow .3s ease, border-color .3s ease, translate .3s ease;
}
.bl-featured[hidden] { display: none; }
.bl-featured:hover, .bl-featured:focus-visible { border-color: rgba(47,73,184,.35); box-shadow: 0 30px 60px -36px rgba(11,13,18,.35); translate: 0 -3px; }
.bl-featured__body { display: flex; flex-direction: column; padding: 48px 48px 40px; }
.bl-featured__label { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-accent); }
.bl-featured__title { margin-top: 18px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; }
.bl-featured__text { margin-top: 16px; font-size: 16.5px; line-height: 1.65; color: var(--ink-body); }
.bl-featured__foot { margin-top: auto; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; }
.bl-featured__time { font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.bl-featured__arrow {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--ink-accent)); color: #fff; font-size: 20px;
  transition: translate .3s ease;
}
.bl-featured:hover .bl-featured__arrow { translate: 4px 0; }
.bl-featured__media { position: relative; min-height: 360px; }
.bl-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Section heading + live count */
.bl-list__head { margin-top: 72px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bl-list__head .sd-head { margin: 0; text-align: left; }
.bl-count { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--ink-muted); white-space: nowrap; }
.bl-count [data-blog-count] { color: var(--ink); }
.bl-list .bl-grid { margin-top: 36px; }
.bl-grid > li[hidden] { display: none; }

/* Empty state */
.bl-empty { margin-top: 36px; padding: 48px 24px; border: 1px dashed var(--ink-line); border-radius: 20px; text-align: center; }
.bl-empty[hidden] { display: none; }
.bl-empty p { margin: 0 0 18px; font-size: 17px; color: var(--ink-body); }

/* CTA card: reuses the homepage .cta-card design; sits inside the article section, so no overlap */
.cta-card.bl-cta { margin: 88px auto 0; }

/* Blog listing cards: topic tag, short excerpt and read time added under the title.
   Image stays on top, title styling and the round read arrow are unchanged. */
.blog-page .post-card.bl-card.blog-post-card { flex-direction: column; }
.blog-page .post-card.bl-card.blog-post-card .post-img { order: -1; }
.blog-page .post-card.bl-card.blog-post-card .post-title { padding: 10px 24px 0; margin: 0; }
.blog-page .bl-card .post-tag {
  position: relative; z-index: 2; align-self: flex-start; margin: 22px 24px 0;
  padding: 5px 10px; border-radius: 999px; background: rgba(47,73,184,.08); border: 1px solid rgba(47,73,184,.18);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-accent);
}
.blog-page .bl-card .post-excerpt {
  position: relative; z-index: 2; margin: 10px 24px 0;
  font-size: 15px; line-height: 1.6; color: var(--ink-body);
}
.blog-page .bl-card .post-foot {
  position: relative; z-index: 2; margin-top: auto; padding: 20px 24px 24px; min-height: 34px; box-sizing: content-box;
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink-muted);
}
.blog-page .bl-card .post-foot svg { flex: none; }
.bl-list__head .sd-head .lead { margin: 14px 0 0; }
/* Heading now sits first in the section, above the tabs + search */
.bl-list .bl-list__head { margin-top: 0; }
.bl-list .bl-toolbar { margin-top: 40px; }

/* ---------- Blog listing v2: responsive (site breakpoints 1199 / 991 / 767 / 575 / 480 / 399) ---------- */
@media (max-width: 1199px) {
  .bl-hero .sd-hero__inner { gap: 40px; }
  .bl-search { flex-basis: 260px; }
  .bl-featured__body { padding: 40px 36px 34px; }
}
@media (max-width: 991px) {
  /* Hero stacks: text first, image below */
  .sd-hero.bl-hero { padding: 112px 24px 56px; }
  .bl-hero .sd-hero__inner { gap: 40px; }
  .bl-hero__media { max-width: 640px; }

  /* Search full width on top, topic pills scroll sideways below it */
  .bl-list .bl-toolbar { flex-direction: column-reverse; align-items: stretch; gap: 16px; margin-top: 32px; }
  .bl-search { flex: none; width: 100%; }
  .bl-tabs {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin: 0 -24px; padding: 2px 24px 6px;
  }
  .bl-tabs::-webkit-scrollbar { display: none; }
  .bl-tab { flex: none; }

  .bl-featured__body { padding: 30px 28px 26px; }
  .bl-featured__title { font-size: 24px; }
  .bl-featured__text { font-size: 15.5px; }
  .bl-featured__foot { padding-top: 24px; }
  .bl-featured__media { min-height: 0; }

  .cta-card.bl-cta { margin-top: 64px; }
}
@media (max-width: 767px) {
  .bl-list__head { align-items: flex-end; }
  /* Featured article stacks: image on top */
  .bl-featured { grid-template-columns: minmax(0, 1fr); }
  .bl-featured__media { order: -1; aspect-ratio: 16 / 9; }
  .bl-featured__body { padding: 28px 28px 24px; }
  .bl-featured__title { font-size: 25px; }
  .bl-featured__text { font-size: 16px; }
  .blog-page .bl-card .post-excerpt { font-size: 14.5px; }
}
@media (max-width: 575px) {
  .sd-hero.bl-hero { padding: 100px 20px 44px; }
  .bl-hero .sd-hero__inner { gap: 32px; }
  .bl-hero__media img { border-radius: 18px; }
  .bl-list { padding-top: 52px; }

  /* Heading stacks; the count sits under the intro text */
  .bl-list__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .bl-count { margin: 0; }

  .bl-tabs { margin: 0 -20px; padding: 2px 20px 6px; gap: 8px; }
  .bl-tab { padding: 10px 16px; font-size: 14px; }
  .bl-search input { font-size: 16px; } /* 16px stops iOS zooming into the field */

  .bl-featured { margin-top: 28px; border-radius: 20px; }
  .bl-featured__body { padding: 24px 20px 22px; }
  .bl-featured__title { margin-top: 14px; font-size: 23px; }
  .bl-featured__text { margin-top: 12px; font-size: 15px; }
  .bl-featured__foot { padding-top: 20px; }
  .bl-featured__arrow { width: 42px; height: 42px; font-size: 18px; }

  .bl-list .bl-grid { margin-top: 28px; }
  .blog-page .bl-card { min-height: 0; }
  .blog-page .bl-card .post-tag { margin: 18px 20px 0; }
  .blog-page .post-card.bl-card.blog-post-card .post-title { padding: 10px 20px 0; }
  .blog-page .bl-card .post-excerpt { margin: 8px 20px 0; }
  .blog-page .bl-card .post-foot { padding: 16px 20px 20px; }

  .bl-empty { padding: 36px 20px; }
  .cta-card.bl-cta { margin-top: 48px; }
}
@media (max-width: 480px) {
  .bl-featured__title { font-size: 21px; }
}
@media (max-width: 399px) {
  .bl-tab { padding: 9px 14px; font-size: 13.5px; }
  .bl-featured__body { padding: 22px 18px 20px; }
}
/* "Featured article" label: same pill as the topic tags on the cards */
.bl-featured__label {
  align-self: flex-start; padding: 5px 10px; border-radius: 999px;
  background: rgba(47,73,184,.08); border: 1px solid rgba(47,73,184,.18);
  font-size: 11px; letter-spacing: .1em;
}

/* ---------- Case study hero: "Project at a glance" box with icon tiles (desktop) ---------- */
.cs-glance {
  margin-top: 30px; max-width: 600px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,26,48,.9), rgba(12,15,24,.92));
  border: 1px solid rgba(110,139,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 30px 60px -40px rgba(0,0,0,.8);
}
.cs-glance__head {
  margin: 0; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  border-bottom: 1px solid rgba(169,198,255,.1);
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-soft);
}
.cs-glance__icon {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(60,89,228,.55), rgba(47,73,184,.35));
  border: 1px solid rgba(110,139,255,.3); color: #DCE4FF;
}
.cs-glance__head .cs-glance__icon { background: linear-gradient(135deg, #3C59E4, #2F49B8); color: #fff; }
.cs-hero__details.cs-glance__grid {
  margin: 0; max-width: none; border: 0; border-radius: 0; gap: 0; background: transparent;
}
.cs-glance__grid > div {
  position: relative; min-height: 76px; padding: 20px 22px 20px 82px; background: transparent;
  display: flex; flex-direction: column; justify-content: center;
}
.cs-glance__grid > div:nth-child(odd) { border-right: 1px solid rgba(169,198,255,.1); }
.cs-glance__grid > div:nth-child(n+3) { border-top: 1px solid rgba(169,198,255,.1); }
.cs-glance__grid dt .cs-glance__icon { position: absolute; left: 22px; top: 50%; translate: 0 -50%; }
.cs-glance__grid dt { font-size: 11.5px; letter-spacing: .16em; }
.cs-glance__grid dd { margin-top: 6px; font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); }
/* "Project at a glance": responsive */
@media (max-width: 1199px) {
  .cs-glance__grid > div { padding: 18px 18px 18px 74px; }
  .cs-glance__grid dt .cs-glance__icon { left: 18px; width: 42px; height: 42px; }
  .cs-glance__grid dd { font-size: 16px; }
}
@media (max-width: 991px) {
  .cs-glance { max-width: none; }
}
@media (max-width: 575px) {
  .cs-glance { margin-top: 26px; border-radius: 18px; }
  .cs-glance__head { padding: 15px 18px; font-size: 12px; }
  /* One column: each fact on its own row */
  .cs-hero__details.cs-glance__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-glance__grid > div { min-height: 0; padding: 16px 18px 16px 72px; }
  .cs-glance__grid > div:nth-child(odd) { border-right: 0; }
  .cs-glance__grid > div:nth-child(n+2) { border-top: 1px solid rgba(169,198,255,.1); }
  .cs-glance__grid dt .cs-glance__icon { width: 40px; height: 40px; border-radius: 11px; }
  .cs-glance__grid dt .cs-glance__icon svg { width: 18px; height: 18px; }
  .cs-glance__grid dd { font-size: 15.5px; }
}
@media (max-width: 399px) {
  .cs-glance__grid > div { padding-left: 66px; padding-right: 16px; }
  .cs-glance__grid dt .cs-glance__icon { left: 16px; width: 36px; height: 36px; }
  .cs-glance__grid dt { font-size: 11px; }
}
/* Featured image has its headline on the left: keep that side in view when cropped,
   and show the whole image (1200 x 760) once the card stacks */
@media (max-width: 1199px) { .bl-featured__media img { object-position: left center; } }
@media (max-width: 767px) { .bl-featured__media { aspect-ratio: 1200 / 760; } }
/* Blog banner image: a little smaller (keeps its rounded border and shadow) */
.bl-hero__media { justify-self: end; width: 100%; max-width: 500px; }
@media (max-width: 991px) { .bl-hero__media { justify-self: center; max-width: 460px; } }
/* Tabs + search don't fit on one line below 1200px: search on top, tabs swipe sideways */
@media (max-width: 1199px) {
  .bl-list .bl-toolbar { flex-direction: column-reverse; align-items: stretch; gap: 16px; }
  .bl-search { flex: none; width: 100%; }
  .bl-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -24px; padding: 2px 24px 6px; }
  .bl-tabs::-webkit-scrollbar { display: none; }
  .bl-tab { flex: none; }
}
@media (max-width: 575px) { .bl-tabs { margin: 0 -20px; padding: 2px 20px 6px; } }

/* Blog page CTA: full-width dark band (same as the case studies page) with a short line under the title */
.bl-ready__lead { margin: 16px 0 0; max-width: 52ch; font-size: 16.5px; line-height: 1.65; color: var(--muted); }
@media (max-width: 767px) { .bl-ready__lead { margin-left: auto; margin-right: auto; } }

/* Case studies page: three cards per row on desktop, two on laptops/tablets, one on phones */
.csl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.csl-card__body { padding: 22px 22px 24px; }
.csl-card__title { font-size: 19px; }
.csl-card__stats { gap: 24px; padding-right: 56px; }
.csl-card__stats dd { font-size: 28px; }
.csl-card__arrow { right: 20px; bottom: 22px; width: 42px; height: 42px; }
@media (max-width: 1199px) { .csl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .csl-grid { grid-template-columns: minmax(0, 1fr); } }
/* Case studies page: result numbers in solid blue (no fade to white) */
.csl-card__stats dd { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--ink-accent); }

/* Case studies page: the arrow icon now sits on the image and only appears,
   with a soft dark overlay, while the image itself is hovered */
.csl-card__media { position: relative; }
.csl-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,13,18,.35), rgba(11,13,18,.55));
  opacity: 0; transition: opacity .35s ease;
}
.csl-card__media .csl-card__arrow {
  z-index: 1; inset: 50% auto auto 50%; right: auto; bottom: auto; translate: -50% -50%;
  width: 60px; height: 60px; border: 0; background: var(--accent); color: #fff;
  box-shadow: 0 14px 30px -10px rgba(110,139,255,.8);
  opacity: 0; scale: .8; rotate: 0deg;
  transition: opacity .35s ease, scale .35s var(--ease);
}
.csl-card__media .csl-card__arrow svg { width: 24px; height: 24px; }
.csl-card__media:hover::after { opacity: 1; }
.csl-card__media:hover .csl-card__arrow { opacity: 1; scale: 1; }
.csl-card:hover .csl-card__media .csl-card__arrow { background: var(--accent); rotate: 0deg; }
.csl-card__stats { padding-right: 0; }

/* Homepage case cards: same image hover as the case studies page — dark overlay and a
   round arrow, shown only while the image is hovered. The image has its own link
   (above the card's stretched link) so its hover can be detected on its own. */
.case__media { position: relative; }
.case__media-link { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; }
.case__media-link::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,13,18,.35), rgba(11,13,18,.55));
  opacity: 0; transition: opacity .35s ease;
}
.case__media-arrow {
  position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  background: var(--accent); color: #fff; box-shadow: 0 14px 30px -10px rgba(110,139,255,.8);
  opacity: 0; scale: .8; transition: opacity .35s ease, scale .35s var(--case-ease);
}
.case__media-link:hover::before { opacity: 1; }
.case__media-link:hover .case__media-arrow { opacity: 1; scale: 1; }
/* Case studies page: overlay + arrow on the image appear when anywhere on the card is hovered */
.csl-card:hover .csl-card__media::after, .csl-card:focus-visible .csl-card__media::after { opacity: 1; }
.csl-card:hover .csl-card__media .csl-card__arrow, .csl-card:focus-visible .csl-card__media .csl-card__arrow { opacity: 1; scale: 1; }
/* Homepage case cards: overlay + arrow on the image appear when anywhere on the card is hovered */
.case:hover .case__media-link::before, .case:focus-within .case__media-link::before { opacity: 1; }
.case:hover .case__media-arrow, .case:focus-within .case__media-arrow { opacity: 1; scale: 1; }

/* Services page: service cards stand out a little more — soft blue tint, visible border,
   a gentle shadow and a blue accent line along the top */
.sv-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #F3F6FE 0%, #FFFFFF 100%);
  border-color: #DCE3F5;
  box-shadow: 0 18px 40px -30px rgba(47,73,184,.45);
}
.sv-card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--ink-accent));
  opacity: .55; transition: opacity .35s ease;
}
.sv-card:hover, .sv-card:focus-visible { border-color: rgba(47,73,184,.35); box-shadow: 0 34px 60px -30px rgba(47,73,184,.55); }
.sv-card:hover::before, .sv-card:focus-visible::before { opacity: 1; }
.sv-card__num { background: linear-gradient(180deg, rgba(47,73,184,.75), rgba(110,139,255,.3)); -webkit-background-clip: text; background-clip: text; }

/* Case study pages: "Explore more projects" uses the case studies page cards (3 across) */
.cs-related .csl-grid.cs-related__list { margin-top: 40px; }
/* "Explore more projects": 3-across grid on desktop, swipe slider below 1200px */
.cs-related .csl-slider { margin-top: 40px; }
.cs-related .csl-grid.cs-related__list { margin-top: 0; }
.csl-slider .slider-controls { display: none; }
@media (max-width: 1199px) {
  .cs-related .csl-grid.cs-related__list {
    display: flex; gap: 20px; padding: 8px 0 30px; /* room for the hover lift and card shadow */
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .cs-related__list::-webkit-scrollbar { display: none; }
  .cs-related__list.is-dragging { scroll-snap-type: none; cursor: grabbing; }
  .cs-related__list > .csl-item { flex: 0 0 calc((100% - 20px) / 2); scroll-snap-align: start; }
  .cs-related__list .csl-card:hover { translate: none; }
  .csl-slider .slider-controls { display: flex; margin-top: 8px; }
}
@media (max-width: 767px) {
  .cs-related__list > .csl-item { flex-basis: 100%; }
  .cs-related .csl-grid.cs-related__list { gap: 16px; }
}

/* v8.3 footer socials: always one row; circles shrink slightly in narrow columns instead of wrapping */
.socials { flex-wrap: nowrap; gap: 8px; }
.social { flex: 0 1 40px; width: auto; min-width: 30px; height: auto; aspect-ratio: 1 / 1; }