/* The Marketing Cartel · home sections 03 → 11 · PHONE base (E04, mobile-first). The desktop layer is
   sections.desktop.css (≥1024px). Phone-only structure lives in @media (max-width: 1023.98px) blocks, so it never
   leaks into the desktop. Transform/opacity only. */

/* ---------- phone frame (<1024px): section rhythm + gutter ---------- */
@media (max-width: 1023.98px) {
  /* 16px at 320 → 20px from 390; never less than the iPhone's landscape safe areas (viewport-fit=cover) */
  :root { --gutter: max(clamp(1rem, 5.714vw - .143rem, 1.25rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); }
  .cases, .how, .about, .team, .testimonials, .blog, .faq, .cta { padding-block: var(--section-y); }
}

/* ---------- 03 · Services vignettes: one tiny interface per service, drawn with the system (shared by every width) ---------- */
.svc-vis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  overflow: hidden;
  padding: 16px 20px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(60% 120% at 100% 100%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 70%),
    radial-gradient(70% 140% at 0% 0%, color-mix(in oklab, var(--violet-400) 28%, transparent), transparent 70%),
    var(--brand-soft);
}
.svc-vis > * { position: relative; z-index: 1; }
.vis-search { display: flex; align-items: center; gap: 8px; width: 46%; padding: 9px 14px; border-radius: var(--r-full); background: var(--bg-raised);
  box-shadow: var(--shadow-1); font: 500 .75rem / 1.2 var(--font-sans); color: var(--fg-muted); white-space: nowrap; overflow: hidden; }
.vis-search svg { flex: none; width: 14px; height: 14px; color: var(--fg); }
.vis-results { display: grid; gap: 6px; width: 44%; }
.vis-result { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; border-radius: 8px; background: color-mix(in oklab, var(--bg-raised) 70%, transparent); }
.vis-result i { display: block; height: 6px; width: 70%; border-radius: 3px; background: color-mix(in oklab, var(--fg) 14%, transparent); }
.vis-result i.short { width: 30%; } .vis-result i.shorter { width: 18%; }
.vis-result.is-top { background: var(--bg-raised); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand) 30%, transparent), var(--shadow-1); font: 700 .6875rem / 1 var(--font-sans); color: var(--fg); }
.vis-rank { padding: 3px 6px; border-radius: 6px; background: var(--brand); color: var(--bg-raised); font: 800 .625rem / 1 var(--font-sans); }
.vis-stars { margin-left: auto; color: var(--fg-accent); }
.vis-ad { display: grid; gap: 6px; width: 50%; padding: 12px 14px; border-radius: 12px; background: var(--bg-raised); box-shadow: var(--shadow-1); font: 700 .75rem / 1.25 var(--font-sans); color: var(--fg); }
.vis-ad i { display: block; height: 6px; width: 60%; border-radius: 3px; background: color-mix(in oklab, var(--fg) 12%, transparent); }
.vis-sponsored { font: 600 .625rem / 1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vis-bars { display: grid; gap: 6px; }
.vis-bars__label { font: 600 .625rem / 1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); }
.vis-bars__row { display: flex; align-items: flex-end; gap: 6px; height: 56px; }
.vis-bars__row i { display: block; width: 14px; height: 100%; border-radius: 4px 4px 2px 2px; background: var(--grad-brand); transform-origin: 50% 100%; transform: scaleY(var(--h)); }
.vis-browser { width: 52%; border-radius: 10px; overflow: hidden; background: var(--bg-raised); box-shadow: var(--shadow-1); }
.vis-browser__bar { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px; background: var(--bg-sunken); }
.vis-browser__bar i { width: 6px; height: 6px; border-radius: 50%; background: color-mix(in oklab, var(--fg) 20%, transparent); }
.vis-browser__bar span { flex: 1; height: 8px; margin-left: 8px; border-radius: 4px; background: var(--bg-raised); }
.vis-browser__page { display: grid; gap: 5px; justify-items: center; padding: 10px 10px 12px; }
.vis-browser__page b { display: block; width: 78%; height: 7px; border-radius: 3px; background: var(--fg); }
.vis-browser__page b.short { width: 52%; }
.vis-browser__btn { width: 34%; height: 10px; margin-top: 3px; border-radius: 4px; background: var(--grad-brand); }
.vis-gauge { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
.vis-gauge svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.vis-gauge circle { fill: none; stroke: color-mix(in oklab, var(--fg) 12%, transparent); stroke-width: 3.2; }
.vis-gauge circle.val { stroke: var(--brand); stroke-linecap: round; stroke-dasharray: 98 100; }
.vis-gauge b { font: 800 1.125rem / 1 var(--font-sans); letter-spacing: -.03em; color: var(--fg); }
.vis-posts { position: relative; width: 60%; height: 100%; }
.vis-post { position: absolute; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 12px; background: var(--grad-brand); box-shadow: var(--shadow-2);
  display: flex; align-items: flex-end; justify-content: flex-start; padding: 6px; }
.vis-post span { padding: 3px 7px; border-radius: var(--r-full); background: var(--bg-raised); font: 700 .625rem / 1 var(--font-sans); color: var(--fg); }
.vis-post:nth-child(1) { left: 6%; transform: translateY(-50%) rotate(-7deg); background: linear-gradient(135deg, var(--violet-300), var(--violet-600)); }
.vis-post:nth-child(2) { left: 35%; transform: translateY(-54%) rotate(2deg); z-index: 1; }
.vis-post:nth-child(3) { left: 64%; transform: translateY(-48%) rotate(8deg); background: linear-gradient(135deg, var(--pink-300), var(--pink-600)); }


/* ---------- 03 · Services on phones (<1024px): stacking cards (Arthur 29/09) ----------
   Stack: each service is a full card that sticks under the top bar; the next slides over it and the covered one
   shrinks a touch (scroll-driven where supported). Zero JS, native scroll, every card read in turn. Short screens
   (landscape) get a plain stack. */
@media (max-width: 1023.98px) {
  .svc { position: relative; padding-block: var(--section-y); background: var(--bg); }
  .svc__inner { display: grid; gap: var(--space-8); }
  .svc__head { display: grid; gap: var(--space-4); }
  .svc__head h2 { margin-top: var(--space-3); font-size: var(--text-h2); }
  .svc__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .svc__body { display: grid; gap: var(--space-4); timeline-scope: --svc-1, --svc-2, --svc-3; }

  .svc-panel {
    display: grid;
    gap: var(--space-2);
    padding: 10px;
    border-radius: var(--r-xl);
    background: var(--bg-raised);
    box-shadow: inset 0 0 0 1px var(--line), var(--shadow-3);
    scroll-margin-top: calc(var(--topbar-h) + 12px + var(--k, 0) * 10px);
  }
  .svc-vis { height: clamp(120px, 34vw, 170px); padding: 12px 14px; gap: 12px; border-radius: var(--r-lg); }
  /* the vignettes at phone width (Arthur 29/09: the SEO labels were cut or spilling): SEO = the search over the results;
     Ads = a smaller ad card. Every label fits on one line or wraps inside its own box */
  .svc-vis--seo { flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; height: auto; min-height: clamp(120px, 34vw, 170px); }
  .svc-vis--seo > * { flex-shrink: 0; }   /* a fixed height squeezed the search pill to 14px at 320 */
  .svc-vis--seo .vis-search { width: 100%; padding: 7px 12px; text-overflow: ellipsis; }
  .svc-vis--seo .vis-results { width: 100%; gap: 5px; }
  .svc-vis--seo .vis-result { height: 22px; }
  .svc-vis--seo .vis-result.is-top { white-space: nowrap; }
  .svc-vis--ads .vis-ad { width: 56%; padding: 9px 11px; gap: 4px; font-size: .6875rem; line-height: 1.2; }
  .svc-vis--ads .vis-bars__row { height: 44px; gap: 5px; }
  .svc-vis--ads .vis-bars__row i { width: 11px; }
  .svc-panel__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-3) var(--space-3); }
  .svc-panel__count { font: 600 .8125rem / 1 var(--font-mono); letter-spacing: .04em; color: var(--fg-muted); }
  .svc-panel h3 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem); letter-spacing: var(--track-heading); line-height: 1; }
  .svc-panel__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--fg-muted); }
  .svc-panel__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .svc-panel__cta { margin-top: var(--space-1); }

  .svc__list { display: none; }
  .svc-card, .svc-card__inner, .svc__stage { display: contents; }
  .svc-panel { position: sticky; top: calc(var(--topbar-h) + 12px + var(--k, 0) * 10px); transform-origin: 50% 0; }
  .svc-panel:last-child { margin-bottom: 0; }
  #svc-ads { view-timeline: --svc-1 block; }
  #svc-web { view-timeline: --svc-2 block; }
  #svc-social { view-timeline: --svc-3 block; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      #svc-seo { animation: svc-under linear both; animation-timeline: --svc-1; animation-range: entry 0% contain 0%; }
      #svc-ads { animation: svc-under linear both; animation-timeline: --svc-2; animation-range: entry 0% contain 0%; }
      #svc-web { animation: svc-under linear both; animation-timeline: --svc-3; animation-range: entry 0% contain 0%; }
    }
  }
  @media (max-height: 599.98px) { .svc-panel { position: relative; top: auto; animation: none; } }
}
@keyframes svc-under { to { transform: scale(.94); } }   /* scale only: the cards stay opaque, so a covered one never shows through */

/* ---------- phone reveal (<1024px): the element holds its space; only opacity/transform change (CLS 0) ---------- */
@media (max-width: 1023.98px) and (prefers-reduced-motion: no-preference) {
  .js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
  .js .reveal { transition: opacity var(--d-reveal) var(--e-out), transform var(--d-reveal) var(--e-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
}

/* ---------- 04 · Cases on phones: the two cases stacked (main proof, no carousel); the story under the picture ------- */
@media (max-width: 1023.98px) {
  .cases { position: relative; }
  .cases__inner { display: grid; gap: var(--space-8); }
  .cases__head { display: grid; gap: var(--space-4); }
  .cases__head h2 { margin-top: var(--space-3); font-size: var(--text-h2); }
  .cases__aside { display: grid; gap: var(--space-4); justify-items: start; }
  .cases__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .cases__grid { display: grid; gap: var(--space-5); }
  .case-card {
    position: relative; display: grid; overflow: hidden; isolation: isolate; border-radius: var(--r-xl);
    background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1);
  }
  .case-card__media {
    position: relative; overflow: hidden; height: clamp(200px, 58vw, 280px);
    background: radial-gradient(90% 90% at 100% 100%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%),
                radial-gradient(80% 80% at 0% 0%, color-mix(in oklab, var(--violet-400) 22%, transparent), transparent 60%), var(--bg-sunken);
  }
  /* the laptop, drawn in CSS: an ink lid with a thin bezel and a base; it bleeds off the right edge like the desktop card */
  .case-card__device {
    position: absolute; left: 22px; top: 26px; width: 112%;
    aspect-ratio: 16 / 10.4; padding: 1.8%;
    border-radius: 3.2% / 5%; background: linear-gradient(160deg, #2c2738, #0c0a12 55%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), var(--shadow-3);
  }
  .case-card__device .device__screen { inset: 1.8%; border-radius: 1.4% / 2.2%; }
  /* the lid is the card's own box here (it bleeds off the right and bottom edges), so the shared frame's drawn lid
     and base (components.css §8) step aside */
  .case-card__device::before, .case-card__device::after { content: none; }
  .case-card__tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; background: var(--bg-raised); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .case-card__overlay { display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); }
  .case-card__overlay h3 { font-size: var(--text-h3); }
  .case-card__overlay p { margin-bottom: var(--space-3); color: var(--fg-muted); font-size: var(--text-sm); }
  .cases__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); container-type: inline-size; }
  .stat { display: grid; grid-template-rows: auto auto 1fr; gap: 6px; padding: var(--space-5) var(--space-3) var(--space-5) 0; border-bottom: 1px solid var(--line); }
  .stat:nth-child(odd) { padding-right: var(--space-4); border-right: 1px solid var(--line); }
  .stat:nth-child(even) { padding-left: var(--space-4); }
  /* capped by the row's width (cqi), so text at 200% cannot push the figures out of their column */
  .stat__value { margin: 0; display: flex; align-items: flex-start; gap: 2px; font: 800 min(clamp(2rem, 1.2rem + 3.6vw, 2.75rem), 13cqi) / .95 var(--font-sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .stat__value span { font-size: .5em; color: var(--brand); letter-spacing: 0; margin-top: .1em; }
  .stat__label { font: var(--w-ui) var(--text-sm) / 1.35 var(--font-sans); color: var(--fg); }
  .stat__src { align-self: end; margin-top: 4px; font: 500 .8125rem / 1.3 var(--font-sans); color: var(--fg-muted); }
  @media (min-width: 640px) {
    .cases__grid { grid-template-columns: 1fr 1fr; }
    .cases__metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat, .stat:nth-child(odd), .stat:nth-child(even) { padding: var(--space-5) var(--space-4); border-right: 0; }
    .stat + .stat { border-left: 1px solid var(--line); }
  }
}

/* ---------- 05 · How it works on phones: a vertical timeline; the line joining the numbers draws with the scroll ------- */
@media (max-width: 1023.98px) {
  .how { position: relative; background: var(--bg-sunken); }
  .how__inner { display: grid; gap: var(--space-8); }
  .how__head { display: grid; gap: var(--space-3); }
  .how__head h2 { font-size: var(--text-h2); }
  .how__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .how__steps { position: relative; display: grid; gap: var(--space-7); margin: 0; padding: 0; list-style: none; view-timeline: --how block; }
  .how__steps::before {
    content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; border-radius: 1px;
    background: linear-gradient(var(--brand), color-mix(in oklab, var(--accent) 70%, var(--brand)));
    transform-origin: 50% 0;
  }
  .step { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: var(--space-4); row-gap: var(--space-2); align-items: start; }
  .step__num { grid-row: 1 / span 2; position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-full); background: var(--grad-brand); color: var(--on-brand); font: 700 .8125rem / 1 var(--font-mono); box-shadow: 0 0 0 6px var(--bg-sunken); }
  .step h3 { padding-top: 6px; font-size: var(--text-h4); }
  .step p { color: var(--fg-muted); font-size: var(--text-body); }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      .how__steps::before { animation: how-draw linear both; animation-timeline: --how; animation-range: entry 30% cover 55%; }
    }
  }
}
@keyframes how-draw { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------- 06 · About on phones: copy, then the member card (its glare sweeps once), then "Recognized by" ---------- */
.team__count { display: none; }   /* phone only (below) */
@media (max-width: 1023.98px) {
  .about { position: relative; overflow: clip; isolation: isolate; }
  .about__bg { position: absolute; inset: 0; z-index: -1; }
  /* #1 no-want: never under text. On the phone the copy runs full width at the top, so the lines live only around the
     member card (the card's own surface covers their middle) */
  .about__bg.bg-topo {
    -webkit-mask-image: url("../sg/textures/topo-lines.svg"), radial-gradient(75% 26% at 50% 60%, #000 30%, transparent 100%);
    -webkit-mask-size: 100% 100%; -webkit-mask-composite: source-in;
    mask-image: url("../sg/textures/topo-lines.svg"), radial-gradient(75% 26% at 50% 60%, #000 30%, transparent 100%);
    mask-size: 100% 100%; mask-composite: intersect;
  }
  .about__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .about__copy { display: grid; justify-items: start; gap: var(--space-4); }
  .about__copy h2 { font-size: var(--text-h2); }
  .about__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg); }
  .about__body { color: var(--fg-muted); }
  .about__media { display: grid; place-items: center; }
  .member-card { width: min(100%, 420px); }
  .member-card__face { position: relative; display: grid; gap: var(--space-5); padding: 22px; border-radius: var(--r-xl); overflow: hidden;
    background: radial-gradient(120% 70% at 100% 0%, color-mix(in oklab, var(--violet-400) 26%, transparent), transparent 60%),
                radial-gradient(90% 60% at 0% 100%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 60%), var(--bg-raised);
    box-shadow: inset 0 0 0 1px var(--line), var(--highlight-top), var(--shadow-3); }
  .member-card__face.has-grain::after { opacity: calc(var(--grain-opacity) * .35); }
  .member-card__top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .member-card__logo { flex: none; width: 34px; height: 34px; }
  .member-card__brand { font: 780 .9375rem / 1 var(--font-sans); letter-spacing: -.02em; }
  .member-card__est { margin-left: auto; padding: 5px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: 700 .75rem / 1 var(--font-mono); }
  .member-card__place { font: 800 clamp(1.75rem, 1.2rem + 2.6vw, 2.25rem) / 1 var(--font-sans); letter-spacing: -.035em; }
  .member-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 14px 18px; margin: 0; }
  .member-card__facts dt { font: 600 .8125rem / 1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
  .member-card__facts dd { margin: 3px 0 0; font: var(--w-ui) .9375rem / 1.3 var(--font-sans); }
  .member-card__crew { display: flex; align-items: center; padding-top: var(--space-4); border-top: 1px solid var(--line); }
  .member-card__crew img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 0 0 3px var(--bg-raised); }
  .member-card__crew img + img { margin-left: -10px; }
  .member-card__more { display: grid; place-items: center; width: 42px; height: 42px; margin-left: -10px; border-radius: 50%; background: var(--bg-inverse); color: var(--fg-inverse); box-shadow: 0 0 0 3px var(--bg-raised); font: 700 .8125rem / 1 var(--font-sans); }
  /* no tilt on touch: a light sweeps across the card once, when it comes in */
  .member-card__glare { position: absolute; inset: -20% -60%; z-index: 3; pointer-events: none; opacity: 0;
    background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .42) 50%, transparent 62%); mix-blend-mode: soft-light; transform: translateX(-60%); }
  @media (prefers-reduced-motion: no-preference) {
    .member-card.is-swept .member-card__glare { animation: glare-sweep 1.1s var(--e-out) .15s both; }
  }
  .recog { display: grid; gap: 0; margin-top: var(--space-8); padding: var(--space-2) var(--space-5); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); }
  .recog__label { padding-block: var(--space-4) var(--space-2); font: var(--w-strong) var(--text-xs) / 1 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
  .recog__item { display: flex; align-items: center; gap: 12px; padding-block: var(--space-4); }
  .recog__item + .recog__item { border-top: 1px solid var(--line); }
  .recog__mark { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--fg-accent); }
  .recog__mark svg { width: 16px; height: 16px; }
  .recog__item > div > b { display: block; font: 700 .9375rem / 1.2 var(--font-sans); }
  .recog__item > div > span { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--fg-muted); }
}
@keyframes glare-sweep { 0% { opacity: 0; transform: translateX(-60%); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateX(60%); } }

/* ---------- 07 · Team on phones: the desktop's fan, translated to the thumb — a snapping row; the centred card
   straightens and lifts, its neighbours keep their angle (scroll-driven on the row's axis; flat cards without it) ------ */
@media (max-width: 1023.98px) {
  .team { position: relative; overflow-x: clip; }
  .team__inner { display: grid; gap: var(--space-6); }
  .team__head { display: grid; gap: var(--space-4); }
  .team__head h2 { margin-top: var(--space-3); font-size: var(--text-h2); }
  .team__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .team-stack {
    --cw: min(62vw, 250px);
    display: flex; gap: var(--space-4); margin: 0 calc(-1 * var(--gutter)); padding: var(--space-7) calc((100% - var(--cw)) / 2 + var(--gutter)) var(--space-8);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none;
  }
  .team-stack::-webkit-scrollbar { display: none; }
  .team-stack:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
  .team-card {
    position: relative; flex: 0 0 var(--cw); display: flex; flex-direction: column; padding: 10px 10px 16px;
    border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--highlight-top), var(--shadow-2);
    scroll-snap-align: center; transform-origin: 50% 100%;
  }
  .team-card__photo { position: relative; flex: none; aspect-ratio: 1; border-radius: calc(var(--r-lg) - 10px); overflow: hidden;
    background: radial-gradient(80% 70% at 50% 100%, color-mix(in oklab, var(--violet-400) 30%, transparent), transparent 70%), var(--bg-sunken); }
  .team-card__photo img { position: absolute; left: 50%; bottom: -6%; width: 104%; max-width: none; height: auto; transform: translateX(-50%); }
  .team-card__name { margin-top: 12px; padding-inline: 6px; font: 750 1.0625rem / 1.2 var(--font-sans); letter-spacing: -.015em; }
  .team-card__role { margin-top: 4px; padding-inline: 6px; font-size: var(--text-sm); color: var(--fg-muted); }
  .team-card--all { padding: 0; background: color-mix(in oklab, var(--brand-soft) 55%, var(--bg-raised)); }
  .team-card__link { display: grid; align-content: center; justify-items: center; gap: 6px; height: 100%; min-height: 240px; padding: 0 16px; border-radius: inherit; color: var(--fg); text-align: center; }
  .team-card__plus { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--fg-accent); }
  .team-card__plus svg { width: 24px; height: 24px; }
  .team-card--all .team-card__name, .team-card--all .team-card__role { margin: 0; padding: 0; }
  .team__count { display: block; margin-top: calc(-1 * var(--space-4)); text-align: center; font: 600 .8125rem / 1 var(--font-mono); letter-spacing: .06em; color: var(--fg-muted); }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view(inline)) {
      .team-card { animation: team-fan linear both; animation-timeline: view(inline); }
    }
  }
}
@keyframes team-fan {
  0%   { transform: rotate(var(--rot, 3deg)) translateY(10px); }
  50%  { transform: rotate(0deg) translateY(-10px) scale(1.03); }
  100% { transform: rotate(calc(-1 * var(--rot, 3deg))) translateY(10px); }
}

/* ---------- 07b · Statement on phones: the words (or lines, option T1) light up in reading order as the band passes.
   The desktop effect (weight follows the cursor) has no trigger on touch, and animating weight on scroll would re-lay
   out text every frame; this is opacity only. phone.js writes the band's progress (--p); each unit knows its index. ---- */
@media (max-width: 1023.98px) {
  .statement { color-scheme: dark; --grain-opacity: .16; --grain-blend: screen; position: relative; overflow: clip;
    padding-block: clamp(4.5rem, 3rem + 6vw, 6rem); background: color-mix(in oklab, var(--night) 72%, #000); color: var(--fg); }
  .statement__glow { position: absolute; inset: 0; z-index: -1;
    background: radial-gradient(70% 45% at 100% 20%, color-mix(in oklab, var(--violet-600) 55%, transparent), transparent 70%),
                radial-gradient(60% 40% at 0% 100%, color-mix(in oklab, var(--pink-700) 28%, transparent), transparent 70%); }
  .statement__inner { display: grid; gap: var(--space-7); }
  .statement__figure { display: grid; gap: var(--space-6); margin: 0; }
  .vtp { font: 400 clamp(1.75rem, 1.2rem + 2.4vw, 2.25rem) / 1.18 var(--font-sans); letter-spacing: -.012em; }
  .statement.is-near .vtp { font-family: 'Roboto Flex Statement', var(--font-statement); }
  .st-w { opacity: clamp(.18, calc(var(--p, 1) * (var(--n, 1) + 2) - var(--i, 0)), 1); }
  .statement__by { display: flex; align-items: center; gap: 12px; font-size: var(--text-body); color: var(--fg-muted); }
  .statement__by b { color: var(--fg); font-weight: 700; }
  .statement__dash { flex: none; width: 32px; height: 2px; border-radius: 2px; background: var(--grad-brand); }
  .statement__photo { justify-self: start; width: 112px; }
  .statement__card { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-md); rotate: -4deg;
    background: radial-gradient(90% 70% at 50% 100%, color-mix(in oklab, var(--pink-500) 35%, transparent), transparent 70%), var(--grad-brand);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 20px 40px -16px rgb(0 0 0 / .7); }
  .statement__card img { position: absolute; left: 50%; bottom: -4%; width: 118%; max-width: none; height: auto; transform: translateX(-50%); }
  .statement__card .member-card__glare { display: none; }
}

/* ---------- 08 · Testimonials on phones: the three real reviews stacked (main proof: no carousel) ---------- */
@media (max-width: 1023.98px) {
  .testimonials { position: relative; }
  .testimonials__inner { display: grid; gap: var(--space-7); }
  .testimonials__head { display: grid; gap: var(--space-3); }
  .testimonials__head h2 { font-size: var(--text-h2); }
  .testimonials__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .tst-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
  .tst-card figure { display: grid; gap: var(--space-4); height: 100%; margin: 0; padding: 22px 24px 22px 22px; border-radius: var(--r-xl);
    background: radial-gradient(90% 60% at 100% 0%, color-mix(in oklab, var(--violet-400) 14%, transparent), transparent 70%), var(--bg-raised);
    box-shadow: inset 0 0 0 1px var(--line), var(--highlight-top), var(--shadow-2); }
  .tst-card__top { display: flex; align-items: center; justify-content: space-between; }
  .tst-card__mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grad-brand); color: var(--on-brand); }
  .tst-card__mark svg { width: 18px; height: 18px; }
  .tst-card__stars { display: flex; gap: 2px; color: var(--accent); }
  .tst-card__stars svg { width: 15px; height: 15px; }
  .tst-card blockquote p { font-size: 1.0625rem; line-height: 1.6; color: var(--fg); }
  .tst-card mark { color: inherit; font-weight: 650; background: linear-gradient(transparent 60%, color-mix(in oklab, var(--accent) 24%, transparent) 60%); }
  .tst-card__who { display: flex; align-items: center; gap: 12px; padding-top: var(--space-4); border-top: 1px solid var(--line); }
  .tst-card__avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; color: #fff; font: 700 .8125rem / 1 var(--font-sans); }
  .tst-grid > :nth-child(1) .tst-card__avatar { background: var(--violet-700); }
  .tst-grid > :nth-child(2) .tst-card__avatar { background: var(--pink-700); }
  .tst-grid > :nth-child(3) .tst-card__avatar { background: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); }
  .tst-card__who b { display: block; font: 700 .9375rem / 1.25 var(--font-sans); }
  .tst-card__who span span { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--fg-muted); }
  .testimonials__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; font-size: var(--text-sm); color: var(--fg-muted); text-align: center; }
  .testimonials__foot svg { width: 16px; height: 16px; color: var(--accent); }
  .testimonials__foot b { color: var(--fg); }
  .testimonials__foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg-accent); font-weight: var(--w-ui); text-decoration: underline; text-underline-offset: 3px; }
  @media (min-width: 640px) {
    .tst-grid { grid-template-columns: 1fr 1fr; }
    .tst-grid > :nth-child(3) { grid-column: 1 / -1; }
  }
}

/* ---------- 08c · Blog brand thumbnails (shared by every width) ---------- */
/* brand thumbnails: the inverse surface of the page (dark on the light theme, light on the dark one) — color-scheme
   flips every role inside, so the SVG only uses roles. Doubled class: this block now loads before the card rules
   (E04 moved it out of the desktop layer), and the card's plain media background must not win. */
.blog-thumb.blog-thumb { color-scheme: dark; background: radial-gradient(70% 80% at 85% 0%, color-mix(in oklab, var(--violet-600) 34%, transparent), transparent 70%), var(--bg-sunken); }
:root[data-theme="dark"] .blog-thumb.blog-thumb { color-scheme: light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blog-thumb.blog-thumb { color-scheme: light; } }
:root[data-theme="dark"] .blog-thumb.blog-thumb { background: radial-gradient(70% 80% at 85% 0%, color-mix(in oklab, var(--violet-300) 40%, transparent), transparent 70%), var(--bg-sunken); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blog-thumb.blog-thumb { background: radial-gradient(70% 80% at 85% 0%, color-mix(in oklab, var(--violet-300) 40%, transparent), transparent 70%), var(--bg-sunken); } }
.blog-thumb svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bt-ring { fill: color-mix(in oklab, var(--brand) 8%, transparent); stroke: var(--line-strong); stroke-width: 1.2; }
.bt-ring--2 { fill: color-mix(in oklab, var(--brand) 12%, transparent); }
.bt-bars, .bt-bubble circle { fill: var(--fg-muted); }
.bt-bars rect:nth-child(3), .bt-bars rect:nth-child(6) { fill: var(--brand); }
.bt-bubble rect { fill: var(--bg-raised); stroke: var(--line-strong); stroke-width: 1.2; }
.bt-search rect:first-child, .bt-result rect:first-child { fill: var(--bg-raised); stroke: var(--line-strong); stroke-width: 1.2; }
.bt-search circle, .bt-search path { stroke: var(--fg-muted); }
.bt-result--top rect:first-child { stroke: var(--brand); stroke-width: 2; }
.bt-line { fill: var(--line-strong); }
.bt-line--strong { fill: var(--fg-muted); }
.bt-chip--pink { fill: var(--accent); } .bt-chip--violet { fill: var(--violet-600); }
.bt-chiptext { fill: #fff; font: 800 10px/1 var(--font-sans); text-anchor: middle; }
.bt-label { font: 800 13px/1 var(--font-sans); letter-spacing: .06em; }
.bt-label--pink { fill: var(--accent); } .bt-label--violet { fill: var(--brand); }
.bt-grid path { stroke: var(--line); stroke-width: 1; }
.bt-dot--pink { fill: var(--pink-600); } .bt-dot--violet { fill: var(--violet-600); }

/* ---------- 08c · Blog on phones: the latest post as a card, the next two as compact rows — every title and internal
   link in view without a gesture ---------- */
@media (max-width: 1023.98px) {
  .blog { position: relative; }
  .blog__inner { display: grid; gap: var(--space-6); }
  .blog__head { display: grid; gap: var(--space-4); justify-items: start; }
  .blog__head h2 { margin-top: var(--space-3); font-size: var(--text-h2); }
  .blog__head .btn { order: 2; }
  .blog-grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .blog-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: 10px 10px 18px; border-radius: var(--r-xl);
    background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--highlight-top), var(--shadow-1); }
  .blog-card > :not(.blog-card__media) { margin-inline: 10px; }
  .blog-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--r-xl) - 10px); background: var(--bg-sunken); }
  .blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--text-xs); color: var(--fg-muted); }
  .blog-card__tag { padding: 5px 10px; border-radius: var(--r-full); background: var(--brand-soft); color: var(--fg-accent); font: var(--w-strong) .75rem / 1 var(--font-sans); }
  .blog-card__title { font: 650 var(--text-h4) / 1.28 var(--font-sans); letter-spacing: -.018em; text-wrap: balance; }
  .blog-card__link { text-decoration: none; }
  .blog-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }   /* the whole card is the hitbox */
  .blog-card__excerpt { color: var(--fg-muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .blog-card__author { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--fg-muted); }
  .blog-card__initials { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); }
  .blog-card__initials svg { width: 20px; height: 20px; }
  .blog-card__author b { color: var(--fg); font-weight: var(--w-strong); }
  .blog-card:active { transform: scale(.99); }
  /* the next two: compact rows (tag · date, title) */
  .blog-grid > li:not(:first-child) { padding: 16px 18px; gap: var(--space-2); box-shadow: inset 0 0 0 1px var(--line); }
  .blog-grid > li:not(:first-child) > * { margin-inline: 0; }
  .blog-grid > li:not(:first-child) .blog-card__media,
  .blog-grid > li:not(:first-child) .blog-card__author { display: none; }
  .blog-grid > li:not(:first-child) .blog-card__excerpt { -webkit-line-clamp: 2; font-size: var(--text-sm); }
  .blog-grid > li:not(:first-child) .blog-card__title { font-size: 1.0625rem; }
  @media (min-width: 640px) {
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .blog-grid > li:first-child { grid-row: span 2; }
    .blog-grid > li:not(:first-child) { justify-content: center; }   /* the rows share the card's height: centred */
  }
}

/* ---------- 09 · FAQ on phones: full-width rows; hairlines only (#24 no-want: no box on the open item) ---------- */
@media (max-width: 1023.98px) {
  .faq { position: relative; }
  .faq__inner { display: grid; gap: var(--space-6); }
  .faq__intro { display: grid; gap: var(--space-6); }
  .faq__text { display: grid; justify-items: start; gap: var(--space-4); }
  .faq__text h2 { font-size: var(--text-h2); }
  .faq__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .faq-help { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px; border-radius: var(--r-lg); background: var(--bg-sunken); }
  .faq-help__faces { display: flex; }
  .faq-help__faces img { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-raised); box-shadow: 0 0 0 3px var(--bg-sunken); }
  .faq-help__faces img + img { margin-left: -10px; }
  .faq-help__text b { display: block; font: var(--w-strong) .9375rem / 1.25 var(--font-sans); }
  .faq-help__text span { display: block; margin-top: 2px; font-size: var(--text-sm); color: var(--fg-muted); }
  .faq-help__btn { grid-column: 1 / -1; justify-content: center; background: var(--bg-raised); }
  .faq-list { border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item__h { margin: 0; font: inherit; letter-spacing: normal; }
  .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 64px; padding: 16px 0; border: 0;
    background: none; color: var(--fg); text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    font: 700 1.0625rem / 1.3 var(--font-sans); letter-spacing: -.016em; }
  .faq-q__icon { position: relative; isolation: isolate; display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--fg); }
  .faq-q__icon::before, .faq-q__icon::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: opacity var(--d-ui) var(--e-out); }
  .faq-q__icon::before { background: var(--bg-sunken); box-shadow: inset 0 0 0 1px var(--line); }
  .faq-q__icon::after { background: var(--grad-brand); opacity: 0; }
  .faq-q__icon svg { width: 15px; height: 15px; transition: transform var(--d-ui) var(--e-out); }
  .faq-q[aria-expanded="true"] .faq-q__icon { color: var(--on-brand); }
  .faq-q[aria-expanded="true"] .faq-q__icon::after { opacity: 1; }
  .faq-q[aria-expanded="true"] .faq-q__icon svg { transform: rotate(45deg); }
  .faq-a > p { padding: 0 8px 20px 0; color: var(--fg-muted); font-size: var(--text-body); line-height: var(--lh-body); transition: opacity var(--d-ui) var(--e-out), transform var(--d-ui) var(--e-out); }
  .faq-a.is-entering > p { opacity: 0; transform: translateY(-8px); transition: none; }
  .faq-a a { color: var(--fg-accent); font-weight: var(--w-ui); text-decoration: underline; text-underline-offset: 3px; }
  html:not(.js) .faq-a[hidden] { display: block; content-visibility: visible; }
  @media (prefers-reduced-motion: reduce) { .faq-a > p, .faq-q__icon svg { transition: none; } .faq-a.is-entering > p { opacity: 1; transform: none; } }
}

/* ---------- 10 · Contact on phones: the offer, the promises, the form, then phone and email as big tap rows ---------- */
@media (max-width: 1023.98px) {
  .cta { position: relative; isolation: isolate; overflow: clip; }
  .cta__glow { position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(70% 40% at 10% 10%, color-mix(in oklab, var(--violet-400) 16%, transparent), transparent 70%); }
  .cta__topo { position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, color-mix(in oklab, var(--violet-400) 72%, transparent), color-mix(in oklab, var(--pink-400) 60%, transparent));
    -webkit-mask-image: url("../sg/textures/topo-lines-bold.svg"), linear-gradient(transparent 55%, #000 100%);
    -webkit-mask-size: 100% 100%; -webkit-mask-composite: source-in;
    mask-image: url("../sg/textures/topo-lines-bold.svg"), linear-gradient(transparent 55%, #000 100%);
    mask-size: 100% 100%; mask-composite: intersect; }
  .contact-card { display: grid; overflow: hidden; border-radius: var(--r-xl); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--highlight-top), var(--shadow-3); }
  .contact-card__main { padding: var(--space-6) var(--space-5) var(--space-5); }
  .cta__copy { display: grid; justify-items: start; gap: var(--space-4); }
  .cta__copy h2 { font-size: var(--text-h2); }
  .cta__lead { font-size: var(--text-lead); line-height: var(--lh-lead); color: var(--fg-muted); }
  .cta__promises { display: grid; gap: 10px; font-size: var(--text-sm); font-weight: var(--w-ui); color: var(--fg); }
  .cta__promises li { display: inline-flex; align-items: center; gap: 10px; }
  .cta__promises svg { flex: none; width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; background: var(--brand-soft); color: var(--fg-accent); }
  .cta__promises li { align-items: flex-start; }                    /* E10: a wrapped promise keeps its tick on the first line */
  .cta__promises svg { margin-top: calc((1lh - 22px) / 2); }
  .contact-card__form { padding: var(--space-5); background: var(--bg-sunken); border-block: 1px solid var(--line); }
  /* E05 (Arthur 30/09): sized to each step. The slot reserves only Q1 (measured: 668px at 320, 565 at 360, 538 at
     390/414, 477 at 768), so nothing moves when the form arrives; (a stamped game plan has no data-step until gameplan.js mounts: the rule must not match it, or the slot collapses for a frame or two) after the first answer it fits whatever step is shown —
     each change follows a tap, inside the input window, so it never counts as layout shift */
  .audit-slot { min-height: 565px; }
  @media (max-width: 359.98px) { .audit-slot { min-height: 668px; } }
  @media (min-width: 390px) { .audit-slot { min-height: 538px; } }
  @media (min-width: 768px) { .audit-slot { min-height: 477px; } }
  .audit-slot:has(.gp[data-step]:not([data-step="q1"])) { min-height: 0; }
  .contact-card__details { padding: var(--space-2) var(--space-5) var(--space-4); }
  .contact-info { display: grid; margin: 0; padding: 0; }
  .contact-info__item { display: flex; align-items: center; gap: 14px; min-height: 60px; padding-block: 8px; border-bottom: 1px solid var(--line); position: relative; }
  .contact-info__item:last-child { border-bottom: 0; }
  .contact-info__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--r-md); background: var(--bg-sunken); color: var(--fg); }
  .contact-info__icon svg { width: 19px; height: 19px; }
  .contact-info__item > span:last-child { min-width: 0; }
  .contact-info__label { display: block; font: var(--w-strong) .875rem / 1.2 var(--font-sans); color: var(--fg-muted); }
  .contact-info__value { display: block; margin-top: 2px; font-size: var(--text-body); line-height: 1.35; color: var(--fg); overflow-wrap: anywhere; }
  a.contact-info__value { font-weight: var(--w-strong); color: var(--fg-accent); }
  a.contact-info__value::after { content: ""; position: absolute; inset: 0; }   /* the whole row is the target */
}

/* ---------- 11 · Footer on phones: brand + NAP first (tap to call, tap the address for Maps), the link columns in view
   (local-SEO links are never collapsed), the map card, the legal bar ---------- */
@media (max-width: 1023.98px) {
  .site-footer { position: relative; padding-top: var(--space-11); background: var(--bg-sunken); color: var(--fg); }
  .site-footer__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
  .site-footer__brand, .footer-map, .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) { grid-column: 1 / -1; }
  .site-footer__brand { display: grid; justify-items: start; gap: var(--space-5); min-width: 0; }
  .site-footer__brand > * { max-width: 100%; }
  .site-footer__logo span { min-width: 0; }
  .site-footer__logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--fg); font: 780 1.125rem / 1 var(--font-sans); letter-spacing: -.02em; }
  .site-footer__logo svg { width: 40px; height: 40px; }
  .site-footer__tag { font: 720 1.375rem / 1.2 var(--font-sans); letter-spacing: -.022em; text-wrap: balance; }
  .site-footer__nap { display: grid; gap: 4px; font-style: normal; font-size: var(--text-body); line-height: 1.45; color: var(--fg-muted); }
  .site-footer__row { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: center; min-height: 44px; }
  .site-footer__row svg { width: 18px; height: 18px; color: var(--fg-accent); }
  .site-footer__row a { display: inline-flex; align-items: center; min-height: 44px; color: var(--fg); font-weight: var(--w-strong); }
  .site-footer__social { display: flex; gap: 8px; }
  .site-footer__social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-button); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
  .site-footer__social svg { width: 19px; height: 19px; }
  .site-footer__col h2 { margin-bottom: var(--space-2); font: var(--w-strong) var(--text-xs) / 1.2 var(--font-sans); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--fg-muted); }
  .site-footer__col ul { display: grid; }
  .site-footer__col { min-width: 0; }
  .site-footer__col a { display: flex; align-items: center; min-height: 44px; font-size: var(--text-body); font-weight: var(--w-ui); color: var(--fg); overflow-wrap: anywhere; }
  .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) a { padding-inline: 14px; border-radius: var(--r-full); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--text-sm); }
  .site-footer__more { margin-top: 10px; font-size: var(--text-sm); color: var(--fg-muted); }
  .footer-map__link { position: relative; display: block; height: 168px; overflow: hidden; border-radius: var(--r-lg); color: var(--fg); isolation: isolate; }
  .footer-map__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
  .footer-map__img { position: absolute; inset: 0; z-index: -1; background: url("assets/map/office-light.webp") 50% 50% / cover no-repeat var(--bg-sunken); }
  :root[data-theme="dark"] .footer-map__img { background-image: url("assets/map/office-dark.webp"); }
  .footer-map__pin { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50% 50% 50% 0;
    background: var(--grad-brand); color: #fff; box-shadow: var(--shadow-2); transform: translate(-50%, -100%) rotate(-45deg); }
  .footer-map__pin svg { width: 17px; height: 17px; transform: rotate(45deg); }
  .footer-map__cta { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-full);
    background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); font: var(--w-ui) var(--text-sm) / 1 var(--font-sans); }
  .footer-map__cta svg { width: 14px; height: 14px; }
  .footer-map__credit { position: absolute; right: 8px; bottom: 6px; font-size: 10px; line-height: 1; color: var(--fg-muted); pointer-events: none; }
  .site-footer__bar { display: grid; gap: 8px; margin-top: var(--space-9); padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: var(--text-sm); color: var(--fg-muted); }
  .site-footer__legal { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .site-footer__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (max-width: 1023.98px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .footer-map__img { background-image: url("assets/map/office-dark.webp"); } }

/* ---------- wider phones and tablets (640–1023px): the same structure, more columns where the content allows, and a
   reading measure (~70 characters) on every paragraph ---------- */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .svc__lead, .cases__lead, .how__lead, .about__lead, .about__body, .team__lead, .testimonials__lead, .faq__lead, .cta__lead,
  .hero__lead, .svc-panel__desc, .tst-card blockquote p, .blog-card__excerpt, .faq-a > p { max-width: 36em; }
  .how__steps { max-width: 40rem; }
  /* Services cards: the vignette beside the text */
  .svc-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: stretch; }
  .svc-vis { height: auto; min-height: 220px; }
  .svc-panel__body { justify-content: center; }
  /* footer: Services · Company · Areas in three columns */
  .site-footer__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) { grid-column: auto; }
  .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) ul { display: grid; gap: 0; }
  .site-footer__col:is([aria-label="Areas we serve"], [aria-label="Businesses and areas we serve"]) a { padding-inline: 0; border-radius: 0; background: none; box-shadow: none; font-size: var(--text-body); }
}


/* ---------- phones: every section column is a single track that can shrink (text at 200% must wrap, never widen the
   column past the screen) ---------- */
@media (max-width: 1023.98px) {
  .proof__inner, .svc__inner, .cases__inner, .how__inner, .about__inner, .team__inner, .statement__inner, .testimonials__inner,
  .blog__inner, .faq__inner { grid-template-columns: minmax(0, 1fr); }
  .stat { min-width: 0; }
  .stat__label, .stat__src, .metric__label { overflow-wrap: anywhere; }
}

/* E06: the third footer column holds two lists (Industries, Areas we serve) */
.site-footer__col .site-footer__sub { margin-top: var(--space-7); }