/* ==========================================================================
   Xentham — inner pages (V3 dark system)
   Loaded AFTER v3.css. Adds only what the homepage didn't already need;
   every token, button, card and type style comes from v3.css unchanged.
   ========================================================================== */

/* ==========================================================================
   Page hero — the compact counterpart to the homepage hero. Same gold glow,
   less height, always opens with breadcrumbs so deep pages stay locatable.
   ========================================================================== */

.phero { position: relative; overflow: hidden; padding-block: var(--s-64); border-bottom: 1px solid var(--line); }
.phero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 420px at 80% -15%, rgba(240, 180, 41, 0.17), transparent 70%),
    radial-gradient(520px 380px at 0% 115%, rgba(240, 180, 41, 0.07), transparent 70%);
}
.phero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-64); align-items: end; }
.phero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); }
.phero__aside { justify-self: end; width: 100%; }
.phero--solo .phero__inner { grid-template-columns: minmax(0, 820px); }

.h-page {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05; letter-spacing: -0.025em;
  /* Even out ragged last lines where a headline has no manual <br> */
  text-wrap: balance;
}

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8);
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
}
.crumbs a { transition: color .2s ease; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs i { font-style: normal; color: #4A4038; }
.crumbs [aria-current] { color: var(--ink); }

/* Active nav item — set from body[data-page] so no per-page class is needed */
body[data-page="about"]        .nav__links a[data-nav="about"],
body[data-page="services"]     .nav__links a[data-nav="services"],
body[data-page="service"]      .nav__links a[data-nav="services"],
body[data-page="case-studies"] .nav__links a[data-nav="case-studies"],
body[data-page="case-study"]   .nav__links a[data-nav="case-studies"],
body[data-page="reviews"]      .nav__links a[data-nav="reviews"],
body[data-page="blog"]         .nav__links a[data-nav="blog"],
body[data-page="post"]         .nav__links a[data-nav="blog"],
body[data-page="contact"]      .nav__links a[data-nav="contact"] {
  color: var(--gold-deep); border-bottom-color: var(--gold);
}

/* ==========================================================================
   Page-type headers
   --------------------------------------------------------------------------
   Four distinct treatments, because four different jobs. Only .phero — the
   marketing hero — carries the homepage's gold glow and a supporting aside;
   it belongs on pages whose job is to sell (About, Services, service detail).
   Index, article, case-study and conversion pages each get their own, much
   shallower, header so the real content starts near the top of the page.
   ========================================================================== */

/* --- 2. Index header — listings (blog, case studies, reviews) -------------
   No glow, no aside card, roughly a third of .phero's height. The point of a
   listing page is the list, so the header states what this is and gets out. */
.pagehead { padding-block: var(--s-48) var(--s-32); border-bottom: 1px solid var(--line); }
.pagehead__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-48); align-items: end; margin-top: var(--s-24); }
.h-index {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08; letter-spacing: -0.02em;
  text-wrap: balance;
}
.pagehead .body-m { margin-top: var(--s-12); max-width: 62ch; }

/* Compact stat cluster that replaces the hero's facts card */
.headstats { display: flex; gap: var(--s-32); flex-wrap: wrap; justify-self: end; }
.headstats div b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--gold-deep); }
.headstats div span { display: block; margin-top: var(--s-8); }

/* Rating cluster (reviews index) */
.headrate { display: flex; align-items: center; gap: var(--s-16); justify-self: end; }
.headrate b { font-family: var(--display); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--gold-deep); }

/* An index header already ends on a rule, so the first content section under
   one doesn't need a full 96px lead-in. */
.section--tight { padding-top: var(--s-48); }

/* Toolbar — filters and search, directly under an index header */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-24); flex-wrap: wrap;
  padding-block: var(--s-24);
  border-bottom: 1px solid var(--line);
}
.toolbar__search { display: flex; align-items: center; gap: var(--s-8); min-width: 260px; }
.toolbar__search input {
  flex: 1; background: transparent; border: 0; border-bottom: 1px solid #3A322A; border-radius: 6px;
  font-family: var(--body); font-size: 14px; color: var(--ink); padding: var(--s-8) 0;
  transition: border-color .2s ease;
}
.toolbar__search input::placeholder { color: #6B6058; }
.toolbar__search input:focus { outline: none; border-bottom-color: var(--gold); }
.toolbar__search svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }

/* --- 3. Article header — a single post -----------------------------------
   Editorial, not promotional: narrow measure, no glow, no aside, and a rule
   that hands straight off to the cover image. */
.arthead { padding-block: var(--s-48) 0; }
.arthead__inner { max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); }
.h-art {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.1; letter-spacing: -0.025em;
  text-wrap: balance;
}
.arthead__lede { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.arthead__foot {
  width: 100%; margin-top: var(--s-8); padding-top: var(--s-24);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-24); flex-wrap: wrap;
}

/* --- 4. Case-study cover — result first -----------------------------------
   The number is the headline. Engagement details run as a full-width meta
   strip rather than a card floating beside the copy. */
.cshero { position: relative; overflow: hidden; padding-block: var(--s-48) var(--s-64); }
.cshero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(700px 380px at 50% -30%, rgba(240, 180, 41, 0.13), transparent 70%);
}
.cshero__inner { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); max-width: 900px; }
.metastrip {
  position: relative;
  margin-top: var(--s-48);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.metastrip > div { padding: var(--s-24); border-right: 1px solid var(--line); }
/* first cell flush left so the strip aligns with the headline above it */
.metastrip > div:first-child { padding-left: 0; }
.metastrip > div:last-child { border-right: 0; padding-right: 0; }
.metastrip dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.metastrip dd { margin: var(--s-8) 0 0; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* --- 5. Working header — contact and booking ------------------------------
   No separate hero band at all. The intro is simply the left column of the
   working area, so the form or calendar is visible without scrolling. */
.worktop { position: relative; overflow: hidden; padding-block: var(--s-48) var(--s-96); }
.worktop::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(620px 420px at 88% -10%, rgba(240, 180, 41, 0.13), transparent 70%);
}
.worktop__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: var(--s-48) var(--s-64); align-items: start; }
.worktop__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); }
/* Three children: intro, the form/calendar, and the supporting detail. On
   desktop the detail sits under the intro; on narrow screens it drops below
   the form, so the action is never buried behind a list of phone numbers. */
.worktop__copy  { grid-column: 1; grid-row: 1; }
.worktop__aside { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-24); width: 100%; }
.worktop__main  { grid-column: 2; grid-row: 1 / span 2; }
.h-work {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.06; letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ==========================================================================
   Nav dropdown — two services under one menu item
   --------------------------------------------------------------------------
   The parent stays a real link to the overview page, so the menu item is still
   clickable and crawlable; the caret button opens the submenu independently.
   That split is what keeps it usable on touch, where hover does not exist.
   ========================================================================== */

.nav__has-sub { position: relative; display: flex; align-items: center; gap: 4px; }
.nav__caret {
  display: grid; place-items: center;
  width: 16px; height: 16px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--muted);
  transition: color .2s ease, transform .2s ease;
}
.nav__caret svg { width: 9px; height: 6px; }
.nav__has-sub:hover .nav__caret,
.nav__caret[aria-expanded="true"] { color: var(--gold-deep); }
.nav__caret[aria-expanded="true"] { transform: rotate(180deg); }

.nav__sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 292px; z-index: 60;
  display: flex; flex-direction: column;
  padding: var(--s-8);
  border-radius: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lift);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav__has-sub:hover .nav__sub,
.nav__has-sub:focus-within .nav__sub,
.nav__sub.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* Bridges the gap between the nav item and the panel so the pointer can cross it */
.nav__has-sub::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; }

.nav__sub a {
  display: block; padding: var(--s-12) var(--s-16); border-radius: 11px;
  border-bottom: 0;
  transition: background-color .18s ease;
}
.nav__sub a:hover, .nav__sub a:focus-visible { background: rgba(240, 180, 41, 0.08); }
.nav__sub b {
  display: block;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: -0.01em; color: var(--ink); text-transform: none;
}
.nav__sub a:hover b { color: var(--gold-deep); }
.nav__sub span {
  display: block; margin-top: 3px;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.nav__sub li + li { margin-top: 2px; }

/* Active state covers both service detail pages */
body[data-page="service"] .nav__links a[data-nav="services"] { color: var(--gold-deep); border-bottom-color: var(--gold); }

@media (max-width: 991.98px) {
  /* Stacked nav: the panel becomes an inline block, opened by the caret only */
  .nav__has-sub { flex-wrap: wrap; width: 100%; }
  .nav__sub {
    position: static; transform: none; min-width: 0; width: 100%;
    margin-top: var(--s-8);
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
    box-shadow: none;
  }
  .nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { display: none; }
  .nav__sub.is-open { display: flex; }
  .nav__has-sub::after { content: none; }
  .nav__caret { width: 24px; height: 24px; }
}

/* ==========================================================================
   Small shared utilities
   ========================================================================== */

.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-24); }
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-16); }
.sec-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-48); align-items: end; margin-bottom: var(--s-48); }
.sec-head__note { text-align: right; justify-self: end; }
.mt-16 { margin-top: var(--s-16); }
.mt-24 { margin-top: var(--s-24); }
.mt-32 { margin-top: var(--s-32); }
.mt-48 { margin-top: var(--s-48); }

/* Chip row that reads as a set of filters/anchors */
.chiprow { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chiprow .chip { cursor: pointer; background: transparent; color: var(--muted); border-color: var(--line); transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.chiprow .chip:hover { color: var(--gold-deep); border-color: var(--gold-brd); }
.chiprow .chip.is-on { color: var(--gold-deep); background: var(--gold-soft); border-color: var(--gold-brd); }

/* Key/value fact panel — client details, article meta, office details */
.facts { border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); overflow: hidden; }
.facts__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-16); padding: var(--s-16) var(--s-24); }
.facts__row + .facts__row { border-top: 1px solid var(--line); }
.facts__row dt { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.facts__row dd { margin: 0; font-size: 14px; color: var(--ink); }

/* Checklist — the "what you get" workhorse */
.checks { display: grid; gap: var(--s-12); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-12) var(--s-24); }
/* Absolute tick rather than a grid column: a grid item only holds ONE child,
   so any list entry mixing a <strong> with following text used to break into
   two rows and wrap a word per line. */
.checks li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px; border-radius: 6px;
  background: var(--gold-soft); border: 1px solid var(--gold-brd);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F7C75A' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}

/* Table — engagement comparison, deliverables, pricing */
.tbl-wrap { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card); }
.tbl { width: 100%; border-collapse: collapse; min-width: 640px; }
.tbl th, .tbl td { padding: var(--s-16) var(--s-24); text-align: left; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--muted); background: linear-gradient(160deg, #221C16, #191512); white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { font-size: 14px; color: var(--muted); }
.tbl td:first-child { color: var(--ink); font-weight: 500; }
.tbl .yes { color: var(--gold-deep); font-family: var(--display); font-weight: 700; }
.tbl .no { color: #574E45; }
.tbl tbody tr:hover td { background: rgba(240, 180, 41, 0.035); }

/* Media placeholder — every image on these mockups is a labelled slot so the
   client can see exactly what asset each block expects. */
.ph {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(240, 180, 41, 0.10), rgba(240, 180, 41, 0.02) 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    var(--card);
  border: 1px dashed rgba(240, 180, 41, 0.28);
  color: var(--muted);
  text-align: center;
  padding: var(--s-24);
  min-height: 200px;
}
.ph span { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; }
.ph b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: var(--s-8); }
.ph--16x9 { aspect-ratio: 16 / 9; min-height: 0; }
.ph--4x3 { aspect-ratio: 4 / 3; min-height: 0; }
.ph--1x1 { aspect-ratio: 1 / 1; min-height: 0; }
.ph--tall { aspect-ratio: 4 / 5; min-height: 0; }

/* Play badge for video slots */
.ph__play {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FFD874, #F0B429);
  color: #171310; box-shadow: 0 18px 38px -14px rgba(240, 180, 41, .7);
}
.ph__play svg { width: 22px; height: 22px; margin-left: 3px; fill: currentColor; }

/* ==========================================================================
   Creator reel wall
   --------------------------------------------------------------------------
   A marquee of 9:16 creator videos, interleaved with proof-stat cards so the
   row reads as evidence rather than decoration. Cards autoplay muted when
   they scroll into view and pause when they leave; tapping one unmutes it.
   Every competitor in this space leads with a row like this — it's the fastest
   way to say "TikTok Shop" without writing a word. Rendered in the V3 gold-on-
   charcoal palette rather than the platform's pink.
   ========================================================================== */

.reelband {
  position: relative; overflow: hidden;
  padding-block: var(--s-64);
  border-block: 1px solid var(--line);
  background: linear-gradient(180deg, #16120E, var(--paper) 65%);
}
.reelband::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(760px 300px at 50% -10%, rgba(240, 180, 41, 0.10), transparent 70%);
}
.reelband + .bg-card, .reelband + .signals { border-top: 0; }
.reelband__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-12); text-align: center; margin-bottom: var(--s-32); }
.reelband__head .eyebrow { justify-content: center; }

/* The rail itself is full-bleed, so cards run off both edges of the viewport */
.reelwall { position: relative; overflow: hidden; --reel-w: 232px; --reel-gap: var(--s-16); --reel-fade: var(--paper); }
.bg-card .reelwall { --reel-fade: var(--card); }
/* Fade the two ends so cards enter and leave rather than being sliced off */
.reelwall::before, .reelwall::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 15%; z-index: 2; pointer-events: none;
}
.reelwall::before { left: 0;  background: linear-gradient(90deg, var(--reel-fade), transparent); }
.reelwall::after  { right: 0; background: linear-gradient(270deg, var(--reel-fade), transparent); }

.reeltrack { display: flex; width: max-content; animation: reel-scroll 64s linear infinite; }
/* Each set carries its own gap plus a trailing one, so the two identical sets
   are exactly 50% of the track and -50% loops seamlessly. */
.reelset { display: flex; gap: var(--reel-gap); padding-right: var(--reel-gap); }
.reelwall:hover .reeltrack,
.reelwall:focus-within .reeltrack,
/* A clip is running — hold the wall still so it can actually be watched. */
.reelwall.is-playing .reeltrack { animation-play-state: paused; }
@keyframes reel-scroll { to { transform: translateX(-50%); } }

.reelwall--slow .reeltrack { animation-duration: 92s; }
.reelwall--rev  .reeltrack { animation-direction: reverse; }

/* --- The card --- */
.reel {
  position: relative; flex: 0 0 var(--reel-w);
  aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.reel:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }
.reel video, .reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* Placeholder plate for cards with no asset yet */
.reel__slot {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--s-16);
  background:
    linear-gradient(160deg, rgba(240, 180, 41, 0.10), rgba(240, 180, 41, 0.02) 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 12px, transparent 12px 24px),
    var(--card);
}
.reel__slot span { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

/* Play control — the only thing drawn over a clip. The button covers the whole
   card so a click anywhere toggles it, and it is a real button so the wall is
   reachable from the keyboard. */
.reel__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}

.reel__play-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  color: var(--gold);
  background: rgba(8, 7, 5, .58);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .9);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}

.reel__play svg { width: 20px; height: 20px; fill: currentColor; grid-area: 1 / 1; }
.reel__play .reel__icon-pause { display: none; }

.reel:hover .reel__play-icon,
.reel__play:focus-visible .reel__play-icon {
  transform: scale(1.06);
  color: #171310;
  background: linear-gradient(135deg, #FFD874, #F0B429);
  border-color: rgba(255, 214, 112, .5);
}

/* While a clip runs the control gets out of the way, and comes back on hover
   so there is always a visible way to stop it. */
.reel.is-playing .reel__play-icon { opacity: 0; transform: scale(.9); }
.reel.is-playing:hover .reel__play-icon,
.reel.is-playing .reel__play:focus-visible .reel__play-icon { opacity: 1; transform: scale(1); }
.reel.is-playing .reel__icon-play { display: none; }
.reel.is-playing .reel__icon-pause { display: block; }

@media (prefers-reduced-motion: reduce) {
  .reel__play-icon { transition: none; }
}

.reelband__foot { position: relative; margin-top: var(--s-32); display: flex; align-items: center; justify-content: center; gap: var(--s-16); flex-wrap: wrap; }

@media (max-width: 991.98px) { .reelwall { --reel-w: 190px; } }
@media (max-width: 575.98px) {
  .reelband { padding-block: var(--s-48); }
  .reelwall { --reel-w: 158px; }
  /* The control shrinks with the card so it does not swallow it. */
  .reel__play-icon { width: 42px; height: 42px; }
  .reel__play svg { width: 16px; height: 16px; }
}

/* With motion reduced the rail stops and becomes a normal scroller instead */
@media (prefers-reduced-motion: reduce) {
  .reelwall { overflow-x: auto; }
  .reelwall::before, .reelwall::after { display: none; }
}

/* ==========================================================================
   Service list
   --------------------------------------------------------------------------
   A plain list of what's on offer, one row per service. Rows rather than
   side-by-side cards, so the page reads as "here is what we do" instead of
   "choose between these" — and so a third service can be added without
   redesigning the grid.
   ========================================================================== */

.offers {
  display: grid;
  /* auto-fit so a third service later just flows in — no grid rewrite */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-24);
}
.offer {
  display: flex; flex-direction: column; gap: var(--s-16);
  border-radius: 20px; padding: var(--s-32);
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.offer:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }

.offer__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); }
.offer__num {
  font-family: var(--display); font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -0.02em;
  color: rgba(246, 241, 232, 0.14);
}
.offer:hover .offer__num { color: var(--gold-brd); }

.offer h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.1vw, 25px); line-height: 1.2; letter-spacing: -0.015em;
  color: var(--ink);
  transition: color .2s ease;
}
.offer:hover h3 { color: var(--gold-deep); }

.offer__tags { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.offer__tags span {
  border-radius: 999px; padding: 5px 11px;
  font-family: var(--mono); font-size: 9px;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); border: 1px solid var(--line);
  transition: color .25s ease, border-color .25s ease;
}
.offer:hover .offer__tags span { border-color: var(--gold-brd); color: var(--gold-deep); }

/* Footer link pinned to the bottom so cards of unequal copy still line up */
.offer__go {
  margin-top: auto; padding-top: var(--s-16);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--ink);
  transition: color .2s ease;
}
.offer:hover .offer__go { color: var(--gold-deep); }
.offer__go svg { width: 16px; height: 16px; transition: transform .2s ease; }
.offer:hover .offer__go svg { transform: translate(2px, -2px); }

@media (max-width: 575.98px) {
  .offers { grid-template-columns: 1fr; }
  .offer { padding: var(--s-24); }
}

/* ==========================================================================
   Blog — listing cards + pagination
   ========================================================================== */

.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-24); }

.post {
  display: flex; flex-direction: column;
  border-radius: 18px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }
.post .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.post__body { padding: var(--s-24); display: flex; flex-direction: column; gap: var(--s-12); flex: 1; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); }
.post__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: #4A4038; }
.post h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.28; letter-spacing: -0.012em; color: var(--ink); transition: color .2s ease; }
.post:hover h3 { color: var(--gold-deep); }
.post__foot { margin-top: auto; padding-top: var(--s-16); border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); font-family: var(--display); font-weight: 700; font-size: 13px; }
.post__foot span { transition: transform .2s ease; }
.post:hover .post__foot span { transform: translateX(4px); }

/* Featured post — same card, laid on its side */
.post--wide { flex-direction: row; }
.post--wide > .ph { flex: 0 0 46%; border-bottom: 0; border-right: 1px solid var(--line); aspect-ratio: auto; }
.post--wide .post__body { padding: var(--s-48); gap: var(--s-16); justify-content: center; }
.post--wide h3 { font-size: clamp(22px, 2.6vw, 32px); line-height: 1.15; }

/* Newsletter band */
.subscribe {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--s-48); align-items: center;
  border-radius: 24px; padding: var(--s-48);
  background: linear-gradient(150deg, #221C16, #14110E 70%);
  border: 1px solid var(--gold-brd); box-shadow: var(--shadow-lift);
}
.subscribe__form { display: flex; gap: var(--s-12); align-items: flex-end; }
.subscribe__form .field { flex: 1; }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: center; gap: var(--s-8); }
.pager a, .pager span {
  min-width: 42px; height: 42px; padding-inline: var(--s-12);
  display: grid; place-items: center; border-radius: 12px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--muted); background: var(--card); border: 1px solid var(--line);
  transition: color .2s ease, border-color .2s ease;
}
.pager a:hover { color: var(--gold-deep); border-color: var(--gold-brd); }
.pager .is-on { color: #171310; background: linear-gradient(135deg, #FFD874, #F0B429); border-color: rgba(255,214,112,.45); }
.pager .is-off { opacity: .4; }

/* ==========================================================================
   Article — sticky contents rail + prose
   ========================================================================== */

.article { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-64); align-items: start; }

.toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: var(--s-16); }
.toc h4 { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 0; }
.toc ol { display: flex; flex-direction: column; gap: var(--s-4); border-left: 1px solid var(--line); }
.toc a { display: block; padding: var(--s-8) var(--s-16); margin-left: -1px; border-left: 1px solid transparent; font-size: 13px; line-height: 1.4; color: var(--muted); transition: color .2s ease, border-color .2s ease; }
.toc a:hover { color: var(--ink); }
.toc a.is-on { color: var(--gold-deep); border-left-color: var(--gold); }

.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-24); }
.prose p { font-size: 17px; line-height: 1.72; color: #CFC5BA; }
.prose h2 { font-family: var(--display); font-weight: 700; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin-top: var(--s-48); scroll-margin-top: 104px; }
.prose h3 { font-family: var(--display); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink); margin-top: var(--s-32); scroll-margin-top: 104px; }
.prose ul, .prose ol { display: flex; flex-direction: column; gap: var(--s-12); }
.prose ul li { position: relative; padding-left: var(--s-24); font-size: 16px; line-height: 1.65; color: #CFC5BA; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.prose ol { counter-reset: n; }
.prose ol li { position: relative; counter-increment: n; padding-left: var(--s-32); font-size: 16px; line-height: 1.65; color: #CFC5BA; }
.prose ol li::before { content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-family: var(--mono); font-size: 11px; color: var(--gold-deep); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a:not(.btn) { color: var(--gold-deep); border-bottom: 1px solid var(--gold-brd); }
.prose figure figcaption { margin-top: var(--s-12); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: var(--s-48); }

/* Answer box — the block an AI assistant or a featured snippet will lift.
   Placed directly under the H1 on every post for exactly that reason. */
.answer {
  border-radius: 18px; padding: var(--s-24) var(--s-32);
  background: linear-gradient(180deg, rgba(240, 180, 41, 0.09), var(--card) 60%);
  border: 1px solid var(--gold-brd); box-shadow: var(--shadow-card);
}
.answer h4 { display: flex; align-items: center; gap: var(--s-12); font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); margin: 0 0 var(--s-12); }
.answer p { font-size: 16px; line-height: 1.7; color: var(--ink); margin: 0; }
/* .answer p is more specific than .mono-xs, so restate the small caption here */
.answer p.mono-xs { font-size: 10px; line-height: 1.6; color: var(--muted); }
.answer ul { margin-top: var(--s-16); display: flex; flex-direction: column; gap: var(--s-8); }
.answer ul li { position: relative; padding-left: var(--s-24); font-size: 14px; line-height: 1.6; color: #CFC5BA; }
.answer ul li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 2px; background: var(--gold); }

.pull {
  border-left: 3px solid var(--gold);
  padding: var(--s-8) 0 var(--s-8) var(--s-32);
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink);
}
.pull cite { display: block; margin-top: var(--s-12); font-family: var(--mono); font-weight: 400; font-size: 10px; font-style: normal; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }

/* Author + share strip */
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16); }
.avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: #171310;
  background: linear-gradient(135deg, #FFD874, #E9A916);
}
.avatar--lg { width: 64px; height: 64px; font-size: 21px; }
.avatar--ghost { background: var(--card); border: 1px solid var(--gold-brd); color: var(--gold-deep); }

.author-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-24); align-items: start; }
.share { display: flex; align-items: center; gap: var(--s-8); }
.share a { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--muted); transition: color .2s ease, border-color .2s ease; }
.share a:hover { color: var(--gold-deep); border-color: var(--gold-brd); }
.share svg { width: 16px; height: 16px; }

/* ==========================================================================
   Reviews
   ========================================================================== */

.rating-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-32); align-items: center; border-radius: 20px; padding: var(--s-32); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.rating-panel__score { text-align: center; }
.rating-panel__score b { display: block; font-family: var(--display); font-weight: 800; font-size: 54px; line-height: 1; letter-spacing: -0.03em; color: var(--gold-deep); }

.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars svg { width: 15px; height: 15px; fill: currentColor; }
.stars--dim svg { fill: #3A322A; }

.quotes { columns: 3; column-gap: var(--s-24); }
.quote {
  break-inside: avoid; margin-bottom: var(--s-24);
  display: flex; flex-direction: column; gap: var(--s-16);
  border-radius: 18px; padding: var(--s-24);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }
.quote__mark { font-family: var(--display); font-weight: 800; font-size: 34px; line-height: .7; color: var(--gold-brd); }
.quote p { font-size: 15px; line-height: 1.65; color: #CFC5BA; }
.quote__who { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--s-12); align-items: center; padding-top: var(--s-16); border-top: 1px solid var(--line); }
.quote__who b { display: block; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--ink); }
.quote--gold { background: linear-gradient(150deg, #FFDC7C, #F0B429 60%, #DF9F12); border-color: rgba(255,214,112,.45); }
.quote--gold p, .quote--gold .quote__who b { color: #171310; }
.quote--gold .quote__mark { color: rgba(23,19,16,.35); }
.quote--gold .quote__who { border-top-color: rgba(23,19,16,.2); }
.quote--gold .mono-xs { color: rgba(23,19,16,.7); }
.quote--gold .avatar { background: #171310; color: var(--gold); }
.quote--gold .stars { color: #171310; }

/* ==========================================================================
   Case studies
   ========================================================================== */

.cs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-24); }
.cs-card {
  display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cs-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }
.cs-card .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.cs-card__body { padding: var(--s-24) var(--s-32) var(--s-32); display: flex; flex-direction: column; gap: var(--s-16); flex: 1; }
.cs-card h3 { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); }
.cs-card:hover h3 { color: var(--gold-deep); }
.cs-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); padding-block: var(--s-16); border-block: 1px solid var(--line); }
.cs-metrics b { display: block; font-family: var(--display); font-weight: 800; font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--gold-deep); }
.cs-metrics span { display: block; margin-top: 6px; }

/* Big number band — "results at a glance" */
.band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.band > div { padding: var(--s-32); border-right: 1px solid var(--line); }
.band > div:last-child { border-right: 0; }
.band b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); }
.band span { display: block; margin-top: var(--s-12); }

/* ==========================================================================
   Team / values / milestones (About)
   ========================================================================== */

.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-24); }
.member { display: flex; flex-direction: column; gap: var(--s-16); border-radius: 18px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-brd); }
.member .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.member__body { padding: 0 var(--s-24) var(--s-24); }
.member__body b { display: block; font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); }
.member__body span { display: block; margin-top: var(--s-4); }

/* Milestone rail — a lighter horizontal cousin of the homepage .vtl */
.miles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-24); position: relative; }
.miles::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 2px; background: linear-gradient(90deg, rgba(240,180,41,.1), var(--gold) 10%, var(--gold) 90%, rgba(240,180,41,.1)); }
.mile { position: relative; padding-top: var(--s-32); }
.mile::before { content: ""; position: absolute; left: 0; top: 1px; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--gold-brd); }
.mile b { display: block; font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; color: var(--gold-deep); }
.mile h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--ink); margin-top: var(--s-8); }
.mile p { margin-top: var(--s-8); }
.bg-card .mile::before { box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--gold-brd); }

/* Value card — icon tile + copy, no hover lift (they're statements, not links) */
.value { display: flex; flex-direction: column; gap: var(--s-16); border-radius: 18px; padding: var(--s-24); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); }
.value h3 { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }

/* Award / logo strip */
.awards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--card); box-shadow: var(--shadow-card); }
.award { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-8); padding: var(--s-24) var(--s-16); text-align: center; border-right: 1px solid var(--line); color: #7C7168; transition: color .25s ease, background-color .25s ease; }
.award:last-child { border-right: 0; }
.award:hover { color: var(--gold-deep); background: rgba(240, 180, 41, 0.06); }
.award svg { width: 26px; height: 26px; }
.award b { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: -0.01em; }

/* ==========================================================================
   Contact / booking
   ========================================================================== */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: var(--s-48); align-items: start; }
.contact-grid--rev { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }

.ways { display: flex; flex-direction: column; gap: var(--s-16); }
.way { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-16); align-items: center; border-radius: 16px; padding: var(--s-16) var(--s-24); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: border-color .25s ease, transform .25s ease; }
.way:hover { border-color: var(--gold-brd); transform: translateY(-2px); }
.way b { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink); }
.way span { display: block; margin-top: 2px; }

.field textarea {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid #3A322A; border-radius: 6px;
  font-family: var(--body); font-size: 15px; color: var(--ink); padding: var(--s-12) 0;
  resize: vertical; min-height: 96px; transition: border-color .2s ease;
}
.field textarea::placeholder { color: #6B6058; }
.field textarea:focus { outline: none; border-bottom-color: var(--gold); }
.field--check { flex-direction: row; align-items: flex-start; gap: var(--s-12); }
.field--check input { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--gold); }
.field--check label { font-family: var(--body); font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; color: var(--muted); }

/* Calendly slot — a framed, clearly-labelled embed placeholder */
.booker { border-radius: 20px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.booker__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); padding: var(--s-16) var(--s-24); border-bottom: 1px solid var(--line); background: linear-gradient(160deg, #221C16, #191512); }
.booker__head strong { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.booker__frame { min-height: 560px; display: grid; place-items: center; padding: var(--s-48); text-align: center; background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px), var(--paper); }
.booker__frame > div { display: flex; flex-direction: column; align-items: center; gap: var(--s-16); max-width: 42ch; }

/* Simple month grid so the booking page reads as a calendar, not an empty box */
.cal { width: 100%; max-width: 340px; border-collapse: collapse; }
.cal th { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding-bottom: var(--s-8); font-weight: 400; }
.cal td { padding: 3px; }
.cal td span { display: grid; place-items: center; height: 36px; border-radius: 10px; font-family: var(--display); font-weight: 700; font-size: 13px; color: #5E554C; border: 1px solid transparent; }
.cal td span.free { color: var(--gold-deep); background: var(--gold-soft); border-color: var(--gold-brd); }
.cal td span.pick { color: #171310; background: linear-gradient(135deg, #FFD874, #F0B429); }

/* Time-slot pills */
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-8); width: 100%; max-width: 340px; }
.slots span { display: grid; place-items: center; height: 38px; border-radius: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.slots span.free { color: var(--gold-deep); border-color: var(--gold-brd); }

/* ==========================================================================
   Mockup index (internal review page only — not a client-facing template)
   ========================================================================== */

.map-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-16); }
.map-card { display: flex; flex-direction: column; gap: var(--s-8); border-radius: 16px; padding: var(--s-24); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform .25s ease, border-color .25s ease; }
.map-card:hover { transform: translateY(-3px); border-color: var(--gold-brd); }
.map-card b { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.map-card:hover b { color: var(--gold-deep); }
.map-card__lvl { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .14em; color: var(--gold-deep); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
  .phero__inner { grid-template-columns: 1fr; gap: var(--s-48); align-items: start; }
  .phero__aside { justify-self: start; }
  .article { grid-template-columns: 1fr; gap: var(--s-48); }
  .toc { position: static; }
  .toc ol { flex-direction: row; flex-wrap: wrap; border-left: 0; }
  .toc a { border-left: 0; border: 1px solid var(--line); border-radius: 999px; margin-left: 0; padding: 6px 14px; }
  .toc a.is-on { border-color: var(--gold-brd); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes { columns: 2; }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .miles { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-48); }
  .miles::before { display: none; }
  .band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band > div:nth-child(2n) { border-right: 0; }
  .band > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .awards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-grid, .contact-grid--rev { grid-template-columns: 1fr; gap: var(--s-32); }
  .worktop__grid { grid-template-columns: 1fr; gap: var(--s-48); }
  .worktop__copy  { grid-column: 1; grid-row: auto; order: 1; }
  .worktop__main  { grid-column: 1; grid-row: auto; order: 2; }
  .worktop__aside { grid-column: 1; grid-row: auto; order: 3; }
  .pagehead__row { grid-template-columns: 1fr; gap: var(--s-24); align-items: start; }
  .headstats, .headrate { justify-self: start; }
  .metastrip > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .metastrip > div:last-child { border-bottom: 0; }
  .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .sec-head__note { text-align: left; justify-self: start; }
  .cs-grid { grid-template-columns: 1fr; }
  .post--wide { flex-direction: column; }
  .post--wide > .ph { flex: none; border-right: 0; border-bottom: 1px solid var(--line); aspect-ratio: 16 / 9; }
  .post--wide .post__body { padding: var(--s-32); }
  .subscribe { grid-template-columns: 1fr; padding: var(--s-32); gap: var(--s-32); }
  .rating-panel { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .toolbar { flex-direction: column; align-items: flex-start; gap: var(--s-16); }
  .toolbar__search { width: 100%; }
}

@media (max-width: 575.98px) {
  .phero { padding-block: var(--s-48); }
  .post-grid { grid-template-columns: 1fr; }
  .quotes { columns: 1; }
  .team, .grid-4, .miles { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .band > div { border-right: 0; border-bottom: 1px solid var(--line); }
  .band > div:last-child { border-bottom: 0; }
  .awards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .award:nth-child(2n) { border-right: 0; }
  .checks--2 { grid-template-columns: 1fr; }
  .cs-metrics { grid-template-columns: 1fr; gap: var(--s-12); }
  .map-grid { grid-template-columns: 1fr; }
  .subscribe__form { flex-direction: column; align-items: stretch; }
  .facts__row { grid-template-columns: 1fr; gap: var(--s-4); }
}