/*
Theme Name: Saga Market Theme 2026
Theme URI: https://sagacom.com/
Author: Saga Communications
Description: Lead-generation block theme for Saga market sites. Multisite-ready: each market swaps three hex codes in Appearance > Market Settings. No ACF at any tier — native custom fields, native blocks, and a native settings page. Gravity Forms is the form engine when licensed; a built-in lead form with CSV export covers sites without it. Ships with no placeholder content: a new market either imports a finished market's template file or is filled in by its own staff.
Version: 1.48.0
Update URI: https://updates.sagacom.com/themes/
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
License: GPL-2.0-or-later
Text Domain: saga-lead
Tags: block-theme, full-site-editing, business, lead-generation
*/

/* ---------------------------------------------------------------------------
   MARKET COLORS — fallback defaults only.
   Do NOT edit per market here. Use Appearance > Market Settings,
   which prints an inline :root override on every page. These three values are
   what the entire theme is built from.
--------------------------------------------------------------------------- */
:root {
  --sg-brand:  #00304D;  /* headlines, dark bands, primary buttons */
  --sg-accent: #2B9AD9;  /* links, eyebrows, secondary buttons     */
  --sg-tint:   #E6F3FD;  /* section washes, form cards             */

  /* Derived — normally leave alone. */
  --sg-paper:  #FFFFFF;
  --sg-ink:    #0A1F2C;
  --sg-muted:  #5B7285;
  --sg-line:   #D8E5EF;
}

body { -webkit-font-smoothing: antialiased; }

/* No 24px seam between top-level bands (header → hero → sections). */
.wp-site-blocks > * + *,
.wp-site-blocks > main > * + * { margin-block-start: 0; }
.wp-site-blocks > header + main { margin-block-start: 0; }

/* Header → hero transition.
   The fade lives INSIDE the header: a white-to-transparent gradient in the
   header's own lower third over the tint, so the bar lightens toward its bottom
   edge and meets the hero without a visible seam. Painted as a background layer
   rather than a positioned overlay, so it can never sit over the nav or CTA. */
.sg-header {
  position: relative;
  z-index: 2;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 52%,
    color-mix(in oklab, var(--sg-paper) 55%, transparent) 82%,
    color-mix(in oklab, var(--sg-paper) 92%, transparent) 100%
  );
}
/* The row sits above the gradient layer. */
.sg-header > * { position: relative; }

/* Header row: the logo sets the bar height, nothing else. */
.sg-header .wp-block-site-logo img { display: block; height: auto; }
.sg-header .wp-block-navigation { align-items: center; }
.sg-headcta .wp-block-button__link { line-height: 1.15; }

/* The header's own z-index makes it a stacking context, so the nav overlay can
   never out-stack .sg-hero__media (z-index:3) from inside it — the hero photo
   peeked through the bottom of the open menu. Lift the whole header instead,
   and only while the menu is open, so the hero still overlaps the band below. */
.sg-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
  z-index: 100001;
}

/* Header phone — sits between the nav and the CTA, with a live dot. */
.sg-headphone { margin: 0; }
.sg-headphone__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sg-brand);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease;
}
.sg-headphone__link:hover { color: var(--sg-accent); }
.sg-headphone__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--sg-accent);
}

/* Hero radial wash — used by the .sg-hero pattern wrapper. */
.sg-hero {
  display: flow-root;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.85) 0%, rgba(255,255,255,.25) 38%, rgba(255,255,255,0) 70%),
    radial-gradient(90% 70% at 50% 120%, color-mix(in oklab, var(--sg-brand) 16%, transparent) 0%, transparent 68%),
    linear-gradient(180deg, var(--sg-tint) 0%, var(--sg-tint) 62%, color-mix(in oklab, var(--sg-tint) 35%, transparent) 100%);
}

/* Hero media hangs past the tint and sits ON TOP of the section below.
   position+z-index is what keeps the following section from clipping it. */
.sg-hero__media {
  position: relative;
  z-index: 3;
  margin-bottom: -78px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,48,77,.28);
}
.sg-hero__media img,
.sg-hero__media video,
.sg-hero__media iframe { display: block; width: 100%; height: auto; }

/* Whatever section follows the hero has to leave room for the card that hangs
   into it. Keyed off the hero, so reordering the homepage can't break it. */
.sg-hero + .sg-sec { padding-top: 104px !important; }

/* Rating chip: hug the text instead of filling the column. */
.sg-hero__rating,
.sg-hero > p.has-border-color:first-of-type {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons — every variant gets a real hover. WordPress prints per-block color
   utility classes, so these have to out-specify them. */
.wp-element-button,
.wp-block-button__link {
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
a.wp-element-button:hover {
  background-color: var(--sg-accent) !important;
  color: var(--sg-paper) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,48,77,.22);
}
/* Accent-filled buttons invert to brand instead of accent-on-accent. */
.wp-block-button__link.has-accent-background-color:hover,
.wp-block-button__link.has-accent-background-color:focus-visible {
  background-color: var(--sg-brand) !important;
}
/* Outline / light buttons fill with brand. */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background-color: var(--sg-brand) !important;
  border-color: var(--sg-brand) !important;
  color: var(--sg-paper) !important;
}
/* On the dark/accent CTA band an outline button flips to white. */
.sg-ctaband .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--sg-paper) !important;
  border-color: var(--sg-paper) !important;
  color: var(--sg-accent) !important;
}
.wp-element-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--sg-paper) 60%, var(--sg-accent)); outline-offset: 3px; }

/* Horizontal brand rail. */
.sg-rail { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 8px; }
.sg-rail::-webkit-scrollbar { display: none; }
.sg-rail > * { flex: 0 0 300px; scroll-snap-align: start; }

/* Rail slider shell + arrow controls (built by assets/js/motion.js). */
.sg-railshell { position: relative; }
.sg-rail:focus-visible { outline: 2px solid var(--sg-accent); outline-offset: 6px; border-radius: 18px; }
.sg-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.sg-rail.is-dragging a { pointer-events: none; }

.sg-railnav {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}
.sg-railshell.is-static .sg-railnav { display: none; }

/* A mobile-only rail keeps its grid — and hides its controls — on desktop. */
.sg-railshell--mob > .sg-railfoot { display: none; }

.sg-railbtn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--sg-line);
  background: var(--sg-paper);
  color: var(--sg-brand);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(0,48,77,.16);
  transition: opacity .18s, transform .18s, border-color .18s;
  z-index: 2;
}
.sg-railbtn:hover:not(:disabled) { border-color: var(--sg-accent); transform: scale(1.06); }
.sg-railbtn:disabled { opacity: .28; cursor: default; }
.sg-railbtn:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: 2px; }

.sg-card { background: var(--sg-paper); border: 1px solid var(--sg-line); border-radius: 16px; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sg-card:hover { transform: translateY(-4px); box-shadow: 0 18px 34px rgba(0,48,77,.12); border-color: var(--sg-accent); }

/* Dark band variant (brand rail): flips shared card + rail chrome onto the deep
   blue. Scoped to the section so the same components stay light everywhere else. */
.sg-sec--dark .sg-card { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.sg-sec--dark .sg-card:hover { box-shadow: 0 20px 38px rgba(0,0,0,.32); border-color: #6FC2EF; }
.sg-sec--dark .sg-railbtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.26); color: #fff; }
.sg-sec--dark .sg-railbtn:hover:not(:disabled) { background: rgba(255,255,255,.16); border-color: #6FC2EF; }
.sg-sec--dark .sg-railbtn:focus-visible { outline-color: #6FC2EF; }
.sg-sec--dark .sg-raildot { background: rgba(255,255,255,.3); }
.sg-sec--dark .sg-raildot:hover { background: rgba(255,255,255,.55); }
.sg-sec--dark .sg-raildot.is-on { background: #6FC2EF; }

/* Our Brands archive: two-up station cards, format filter chips. */
.sg-brandgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.sg-brandcard { display: grid; grid-template-columns: 200px minmax(0, 1fr); }
.sg-brandcard[hidden] { display: none; }
.sg-bfilter {
  padding: 9px 18px; border: 1px solid var(--sg-line); border-radius: 999px;
  background: var(--sg-paper); color: var(--sg-brand);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background-color .16s, border-color .16s, color .16s;
}
.sg-bfilter:hover { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-bfilter.is-on { background: var(--sg-brand); border-color: var(--sg-brand); color: #fff; }
.sg-bfilter:focus-visible { outline: 3px solid var(--sg-accent); outline-offset: 2px; }

@media (max-width: 1100px) {
  .sg-brandgrid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sg-brandcard { grid-template-columns: minmax(0, 1fr); }
  .sg-brandcard__mark { border-right: 0 !important; border-bottom: 1px solid var(--sg-line); }
  .sg-brandstats { gap: 0 26px !important; }
}

/* Page heads: tint band above a page or archive, aligned to the same 1216px
   content column every band below it uses. */
.sg-pagehead .sg-eyebrow { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.sg-pagehead h1 { margin: 10px 0 0; font-size: 52px; line-height: 1.05; letter-spacing: -.03em; color: var(--sg-brand); text-wrap: balance; }
.sg-pagehead .wp-block-post-content { margin-top: 16px; }
.sg-pagehead .wp-block-post-content > *,
.sg-pagehead__lede { max-width: 720px; }
.sg-pagehead .wp-block-post-content p,
.sg-pagehead__lede { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--sg-muted); text-wrap: pretty; }
.sg-pagehead .wp-block-post-content p:last-child,
.sg-pagehead__lede { margin-bottom: 0; }
.sg-pagehead__lede { margin-top: 18px; }

/* Contact page head: the pagehead type scale inside a column. */
.wp-block-column.sg-pagehead .wp-block-post-content > * { max-width: none; }
.wp-block-column.sg-pagehead h1 { font-size: 46px; }
@media (max-width: 900px) { .wp-block-column.sg-pagehead h1 { font-size: 36px; } }

/* Contact cards + roster: one column once the grid can no longer breathe. */
@media (max-width: 600px) {
  .sg-contactcards { grid-template-columns: 1fr; }
}

/* Post cards (blog index and the related grid). Equal-height cards, the
   category as a chip on the photograph rather than another line of stacked
   text, clamped excerpt, and a footer rule pinned to the bottom so a short
   post and a long one still line up. */
.sg-blogloop .wp-block-post-template,
.sg-related .wp-block-post-template { align-items: stretch; }
.sg-blogloop li.wp-block-post,
.sg-related li.wp-block-post { display: flex; }
.sg-postcard { display: flex; flex-direction: column; flex: 1; }

.sg-postcard__media { position: relative; margin: 0; }
.sg-postcard__media .wp-block-post-featured-image { margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
/* Height and object-fit both matter: the demo photographs are a mix of 3:2 and
   16:9, and without them the cards in a row came out different heights. */
.sg-postcard__media .wp-block-post-featured-image img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s cubic-bezier(.2,.6,.2,1);
}
.sg-postcard:hover .sg-postcard__media .wp-block-post-featured-image img { transform: scale(1.045); }

.sg-postcard .sg-postcard__chip {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  margin: 0; padding: 6px 13px; border-radius: 999px;
  background: rgba(255,255,255,.95); backdrop-filter: blur(6px);
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0,48,77,.2);
}
.sg-postcard .sg-postcard__chip a { color: var(--sg-brand); text-decoration: none; }

/* The card group inherits the theme block gap, which pushed the title a full
   line below the photo. The text belongs directly under the image. */
.sg-postcard > * { margin-block-start: 0; }
.sg-postcard__body { display: flex; flex-direction: column; flex: 1; padding-bottom: 24px; }
.sg-postcard .wp-block-post-title { margin: 0 0 4px; font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }
.sg-postcard .wp-block-post-title a { color: var(--sg-brand); text-decoration: none; }
.sg-postcard:hover .wp-block-post-title a { color: var(--sg-accent); }
.sg-postcard .wp-block-post-excerpt { margin: 11px 0 0; }
.sg-postcard .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; font-size: 15px; line-height: 1.6; color: var(--sg-muted); }
.sg-postcard .wp-block-post-excerpt__more-text { display: none; }

/* The footer sat inside a constrained layout, which gave it auto margins and
   collapsed the date and the Read link into each other. Own the box outright. */
.sg-postcard .sg-postcard__foot {
  display: flex; width: 100%; max-width: none;
  margin: auto 0 0; padding-top: 20px;
  justify-content: space-between; align-items: center; gap: 16px;
  border-top: 1px solid color-mix(in oklab, var(--sg-brand) 10%, transparent);
}
.sg-postcard__foot .wp-block-post-date { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--sg-muted); white-space: nowrap; }
.sg-postcard__foot .wp-block-post-date a { color: inherit; text-decoration: none; }
.sg-readmore { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 800; color: var(--sg-accent); white-space: nowrap; }
.sg-readmore__arrow { transition: transform .18s ease; }
.sg-postcard:hover .sg-readmore__arrow { transform: translateX(4px); }

.sg-blogloop .wp-block-query-pagination { align-items: center; }
.sg-blogloop .wp-block-query-pagination a,
.sg-blogloop .wp-block-query-pagination .page-numbers {
  padding: 9px 15px; border: 1px solid var(--sg-line); border-radius: 999px;
  font-size: 14.5px; font-weight: 700; color: var(--sg-brand); text-decoration: none;
}
.sg-blogloop .wp-block-query-pagination a:hover { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-blogloop .wp-block-query-pagination .page-numbers.current { background: var(--sg-brand); border-color: var(--sg-brand); color: #fff; }
.sg-blogloop .wp-block-query-pagination-numbers { display: flex; gap: 8px; }

@media (max-width: 900px) {
  .sg-pagehead h1 { font-size: 38px; }
  .sg-pagehead .wp-block-post-content p, .sg-pagehead__lede { font-size: 16.5px; }
}

/* Brand color panels: single brand page hero. */
@media (max-width: 900px) {
  .sg-brandhero { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .sg-brandhero__mark { max-width: 260px; }
  .sg-brandhero h1 { font-size: 38px !important; }
}

/* Services page: alternating full-width service rows. */
@media (max-width: 1000px) {
  .sg-svcrow__grid { flex-direction: column !important; gap: 32px !important; }
  .sg-svcrow__grid > * { flex: 0 0 auto !important; max-width: 100% !important; width: 100%; }
  .sg-svcrow h2 { font-size: 32px !important; }
  .sg-svcclose { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
}

/* Single service page. */
@media (max-width: 1000px) {
  .sg-svchero { grid-template-columns: minmax(0, 1fr) !important; gap: 36px !important; }
  .sg-svchero h1 { font-size: 38px !important; }
  .sg-svcfaq { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .sg-svcsteps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 640px) {
  .sg-svcsteps { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Brand newsroom (digital news brands). */
@media (max-width: 1000px) {
  .sg-newscover { grid-template-columns: minmax(0, 1fr) !important; gap: 26px !important; }
  .sg-lineup__row { grid-template-columns: 110px minmax(0, 1fr) !important; gap: 8px 18px !important; }
  .sg-lineup__row > :last-child { grid-column: 2 !important; justify-content: flex-start !important; }
  .sg-newsstats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-newssteps { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-newswall { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 640px) {
  .sg-newsstats, .sg-newssteps { grid-template-columns: minmax(0, 1fr) !important; }
  .sg-newscover .sg-grid2 { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Legal pages: long-form prose, generous measure, scannable headings. */
.sg-legal .sg-legalnote {
  margin: 0 0 34px; padding: 20px 24px; border-radius: 14px;
  background: var(--sg-tint); border: 1px dashed var(--sg-accent);
  font-size: 15px; line-height: 1.6; color: var(--sg-brand);
}
.sg-legal .sg-updated { margin: 0 0 34px; font-size: 14.5px; font-weight: 700; color: var(--sg-muted); }
.sg-legal h2 { margin: 44px 0 12px; font-size: 26px; line-height: 1.2; letter-spacing: -.02em; color: var(--sg-brand); }
.sg-legal h3 { margin: 28px 0 8px; font-size: 18px; font-weight: 800; color: var(--sg-brand); }
.sg-legal p, .sg-legal li { font-size: 16.5px; line-height: 1.7; color: var(--sg-ink); text-wrap: pretty; }
.sg-legal ul, .sg-legal ol { padding-left: 22px; }
.sg-legal li { margin-bottom: 8px; }
.sg-legal p + p { margin-top: 14px; }
.sg-legal a { color: var(--sg-accent); }

/* Article typography (single.html). */
.sg-article p { font-family: var(--wp--preset--font-family--serif); font-size: 19px; line-height: 1.7; }
.sg-article h2 { font-size: 30px; letter-spacing: -.02em; margin-top: 44px; }
.sg-article blockquote { border-left: 6px solid var(--sg-accent); background: var(--sg-tint); border-radius: 0 16px 16px 0; padding: 28px 32px; margin: 38px 0; }
.sg-article blockquote p { font-family: var(--wp--preset--font-family--sans); font-size: 25px; line-height: 1.45; color: var(--sg-brand); margin: 0; }
/* Drop cap. Serif, to match the body it opens — a sans cap on a serif column
   read as an accident. Brand navy rather than accent blue: the accent already
   carries the kicker, the links, and the list markers, and a third blue at
   72px fights all of them. */
.sg-article > p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--serif);
  float: left;
  font-size: 74px;
  line-height: .78;
  font-weight: 600;
  color: var(--sg-brand);
  margin: 9px 13px 0 0;
}

/* ---------------------------------------------------------------------------
   Single article.

   Head, lead photograph, article, and related grid all sit in the same 1216px
   column — the same one every other page head uses. Previously the head was
   constrained to 820px and centred while the body sat in a 1328px container,
   so the kicker, the title, the photograph, and the first line of copy each
   started at a different left edge.
   --------------------------------------------------------------------------- */
.sg-articlehead__kicker { margin: 0 0 15px; font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.sg-articlehead__kicker a { color: var(--sg-accent); text-decoration: none; }
.sg-articlehead__kicker a:hover { text-decoration: underline; }

/* Everything below sits inside .sg-articlehead__inner, a flow-layout group.
   As direct children of the constrained band these would each pick up WP's
   auto side margins and centre themselves at their own max-width — which is
   exactly what staggered the kicker, title, standfirst and byline against one
   another. In flow they simply stack on the left edge. */
.sg-articlehead__inner > * { margin-left: 0; margin-right: 0; }
.sg-articlehead .wp-block-post-title {
  margin: 0; max-width: 940px;
  font-size: 50px; line-height: 1.06; letter-spacing: -.03em; text-wrap: balance;
}
.sg-articlehead__standfirst { margin: 20px 0 0; max-width: 680px; }
.sg-articlehead__standfirst p { margin: 0; font-size: 20px; line-height: 1.55; font-weight: 500; }

.sg-byline { margin: 32px 0 0; align-items: center; }
.sg-byline .wp-block-avatar img { display: block; }
.sg-byline__name { margin: 0; font-size: 15px; font-weight: 800; color: var(--sg-brand); }
.sg-byline__name a { color: inherit; text-decoration: none; }
.sg-byline__date { margin: 1px 0 0; font-size: 14px; color: var(--sg-muted); }

/* The lead photograph sits in the article column at the width of the copy, so
   it bridges the head and the first paragraph instead of arriving as a 520px
   full-bleed slab that dwarfed the article under it. */
.sg-articlefigure { margin: 0 0 44px; max-width: none; }
.sg-articlefigure img { display: block; width: 100%; border-radius: 18px; }

/* Sticky sidebar.
 *
 * A sticky box can only travel inside its nearest block-container ancestor.
 * The template part renders a <div class="wp-block-template-part"> between the
 * column and the form, and that wrapper is exactly as tall as the form itself —
 * so the sticky element had nowhere to go, no matter what the column did.
 * display:contents takes the wrapper out of the box tree entirely, so the form
 * measures against the column, which is as tall as the article beside it. */
.sg-articlegrid { align-items: stretch; }
.sg-articleside { align-self: stretch; }
.wp-block-column > .wp-block-template-part { display: contents; }
/* Sticky rail: starts level with the article and keeps a comfortable gap from
   the top of the window once it pins. */
.sg-articleside .sg-sticky { position: sticky; top: 104px; align-self: start; }

/* The measure is the column. A second constrained layout nested inside it was
   what pushed the copy off the head's left edge and opened a dead gutter
   between the article and the form. */
.sg-article { max-width: 720px; }
.sg-article > *:first-child { margin-top: 0; }
.sg-article h3 { font-size: 21px; letter-spacing: -.01em; margin-top: 34px; }
.sg-article ul, .sg-article ol { font-family: var(--wp--preset--font-family--serif); font-size: 19px; line-height: 1.7; padding-left: 22px; margin: 22px 0; }
.sg-article li { margin-bottom: 10px; }
.sg-article li::marker { color: var(--sg-accent); }
.sg-article hr { border: 0; border-top: 1px solid color-mix(in oklab, var(--sg-brand) 12%, transparent); margin: 46px 0; }

.sg-related__title { margin: 10px 0 32px; font-size: 34px; letter-spacing: -.02em; }

@media (max-width: 1100px) {
  .sg-articlegrid { flex-wrap: wrap; }
  .sg-articleside { position: static; flex-basis: 100% !important; }
  .sg-article { max-width: none; }
}
@media (max-width: 900px) {
  .sg-articlehead .wp-block-post-title { font-size: 34px; }
  .sg-articlehead__standfirst p { font-size: 17.5px; }
  .sg-articlefigure { margin-bottom: 32px; }
}

/* Sticky consultation rail. */
.sg-sticky { position: sticky; top: 104px; }

/* Subtle entrance reveal — progressive enhancement, see assets/js/motion.js */
@keyframes sg-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.sg-js .sg-reveal { opacity: 0; }
.sg-reveal.is-in { animation: sg-reveal .62s cubic-bezier(.22,.7,.3,1) both; }

@media (prefers-reduced-motion: reduce) {
  .sg-reveal, .sg-reveal.is-in { opacity: 1; animation: none; transform: none; }
}

/* On the accent CTA band the brand button flips to white. */
.sg-ctaband .wp-block-button__link.has-brand-background-color:hover,
.sg-ctaband .wp-block-button__link.has-brand-background-color:focus-visible {
  background-color: var(--sg-paper) !important;
  color: var(--sg-accent) !important;
}

/* One-per-slide rails: each slide is exactly the rail width and snaps to its
   left edge, so nothing ever half-shows. */
.sg-rail--solo { gap: 26px; scroll-padding: 0; }
.sg-rail--solo > * { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

/* Three-per-view rails (testimonials).
   Grid, not flex: a percentage flex-basis inside a horizontal scroll container
   resolves against the container's SCROLL width, which the cards themselves
   determine — circular, and it made the third card overflow the gutter. Grid
   columns resolve against the container's real content width, so three cards
   plus two gaps land exactly on the edge.
   align-items: stretch is what matches card heights, so a short quote does not
   leave a stubby card next to a tall one. */
.sg-rail--3up {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  scroll-padding: 0;
  align-items: stretch;
}
.sg-rail--3up > * {
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.sg-railfoot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 24px; }
.sg-railfoot .sg-railbtn { width: 44px; height: 44px; }
.sg-raildots { display: flex; align-items: center; gap: 8px; }
.sg-raildot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: var(--sg-line); cursor: pointer;
  transition: width .2s ease, background-color .2s ease, border-radius .2s ease;
}
.sg-raildot:hover { background: color-mix(in oklab, var(--sg-accent) 55%, var(--sg-line)); }
.sg-raildot.is-on { width: 28px; border-radius: 999px; background: var(--sg-accent); }
.sg-railshell.is-static .sg-railfoot { display: none; }

/* Footer contact stack: the Shortcode block's wpautop can still add a stray
   paragraph around the whole group — strip its margins so the column reads as
   one block of contact details. */
.sg-footcontact p { margin: 0; }
.sg-footer .wp-block-shortcode { margin: 0; }
.sg-footer .wp-block-shortcode > p { margin: 0; }
.sg-footer .wp-block-shortcode br { display: none; }
/* Any paragraph wpautop still manages to inject around the block. */
.sg-footer .wp-block-shortcode p:empty { display: none; }
.sg-footcontact > * { margin: 0; }
.sg-footcontact a { color: var(--sg-accent); }
.sg-footcontact a:hover { color: var(--sg-paper); }

/* Lead form — the grid, the fields, the submit. */
.saga-form, .saga-form *, .saga-form *::before, .saga-form *::after { box-sizing: border-box; }
.saga-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.saga-form__field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.saga-form__field--full { grid-column: 1 / -1; }
.saga-form__label { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--sg-brand); }
.saga-form__label span { color: var(--sg-accent); }
.saga-form input,
.saga-form select,
.saga-form textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid var(--sg-line);
  border-radius: 10px;
  background: var(--sg-paper);
  color: var(--sg-ink);
  font: inherit;
  font-size: 15px;
  line-height: 1.35;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.saga-form textarea { min-height: 104px; resize: vertical; }
.saga-form select { appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--sg-muted) 50%), linear-gradient(135deg, var(--sg-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.saga-form input:focus,
.saga-form select:focus,
.saga-form textarea:focus {
  outline: none;
  border-color: var(--sg-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--sg-accent) 22%, transparent);
}
.saga-form .saga-form__field.is-invalid input,
.saga-form .saga-form__field.is-invalid select,
.saga-form .saga-form__field.is-invalid textarea { border-color: #C0392B; }
.saga-form__note { font-size: 12.5px; color: #C0392B; }
.saga-form__submit {
  width: 100%;
  margin-top: 20px;
  padding: 17px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--sg-brand);
  color: var(--sg-paper);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.saga-form__submit:hover { background: var(--sg-accent); transform: translateY(-2px); box-shadow: 0 14px 28px rgba(0,48,77,.22); }
.saga-form__fine { margin: 13px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--sg-muted); text-align: center; }

/* ---------------------------------------------------------------------------
   MOBILE OVERLAY MENU
   Core's navigation block ships a grey hamburger and a plain white sheet. This
   turns it into a brand-filled pill button and a navy overlay whose links count
   themselves in and stagger on open — same 01–06 numbering as the strategy
   cards, so the menu reads as part of the design rather than a browser default.
--------------------------------------------------------------------------- */

/* The button */
/* No display declaration here on purpose — core hides this button above its
   own 600px breakpoint, and setting display would override that and leave a
   hamburger sitting in the desktop header. Centering rides on core's flex. */
.wp-block-navigation__responsive-container-open:not(.always-shown) {
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: var(--sg-brand);
  color: var(--sg-paper);
  box-shadow: 0 8px 18px rgba(0, 48, 77, .26);
  transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), background-color .2s ease, border-radius .22s ease;
}
.wp-block-navigation__responsive-container-open:not(.always-shown) svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.wp-block-navigation__responsive-container-open:not(.always-shown):hover {
  background: var(--sg-accent);
  border-radius: 24px;
}
.wp-block-navigation__responsive-container-open:not(.always-shown):active {
  transform: scale(.9);
}
.wp-block-navigation__responsive-container-open:not(.always-shown):focus-visible {
  outline: 3px solid color-mix(in oklab, var(--sg-accent) 60%, transparent);
  outline-offset: 3px;
}
/* Accent pip — the one bit of play. Breathes, then holds still for anyone who
   has asked the OS for less motion. */
.wp-block-navigation__responsive-container-open:not(.always-shown)::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sg-accent);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--sg-accent) 70%, transparent);
  animation: sgPip 2.6s ease-out infinite;
}
@keyframes sgPip {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--sg-accent) 55%, transparent); }
  35%           { box-shadow: 0 0 0 6px color-mix(in oklab, var(--sg-accent) 0%, transparent); }
}

/* The overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: 26px 24px 34px;
  background:
    radial-gradient(120% 80% at 82% 0%, color-mix(in oklab, var(--sg-accent) 42%, transparent) 0%, transparent 62%),
    linear-gradient(170deg, var(--sg-brand) 0%, color-mix(in oklab, var(--sg-brand) 88%, #000) 100%);
  color: var(--sg-paper);
  animation: sgSheet .3s ease-out both;
}
@keyframes sgSheet {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  top: 24px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: var(--sg-paper);
  transition: background-color .2s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
  background: rgba(255, 255, 255, .22);
  transform: rotate(90deg);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  padding-top: 64px;
  counter-reset: sgnav;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  gap: 0;
  align-items: stretch;
  width: 100%;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  counter-increment: sgnav;
  border-bottom: 1px solid rgba(255, 255, 255, .13);
  animation: sgNavIn .44s cubic-bezier(.2, .9, .3, 1) both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
  border-top: 1px solid rgba(255, 255, 255, .13);
}
@keyframes sgNavIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: .05s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: .10s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: .15s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: .20s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: .25s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: .30s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(n+7) { animation-delay: .35s; }

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 17px 2px;
  color: var(--sg-paper);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  text-decoration: none;
  transition: color .18s ease, padding-left .22s cubic-bezier(.2, .9, .3, 1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::before {
  content: counter(sgnav, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--sg-accent);
  opacity: .85;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--sg-accent);
  padding-left: 8px;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item .wp-block-navigation-item__content { color: var(--sg-accent); }

/* Submenus flatten into the same list rather than opening a second layer. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  gap: 0;
  padding-left: 34px;
  border: 0;
  background: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 11px 2px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  .wp-block-navigation__responsive-container-open::after { animation: none; }
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { animation: none; }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { transform: none; }
}

/* Check list — white tick in a blue circle, title over body. */
.sg-checklist { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.sg-checklist li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--sg-muted);
  text-wrap: pretty;
}
.sg-checklist li::before {
  content: "✓";
  grid-row: span 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sg-accent);
  color: var(--sg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  margin-top: 1px;
}
.sg-checklist strong { display: block; margin-bottom: 3px; font-size: 19px; font-weight: 800; color: var(--sg-brand); }

/* Consultation split — copy left, form card right, actually aligned. */
.sg-formsplit > .wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 520px;
  gap: 56px;
  align-items: center;
  margin: 0;
}
.sg-formsplit > .wp-block-columns > .wp-block-column {
  flex-basis: auto !important;
  min-width: 0;
  padding: 0;
}
.sg-trust { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sg-trust li { display: flex; gap: 11px; align-items: flex-start; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--sg-brand); }
.sg-trust li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sg-accent);
  color: var(--sg-paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

/* Dark process band: equal step cards, no stray column flex. */
.sg-process .sg-steps { gap: 22px; align-items: stretch; }
.sg-process .sg-steps > .wp-block-column { flex-basis: 0; flex-grow: 1; min-width: 0; align-self: stretch; }

/* Sticky mobile action bar — the CTA is always one tap away, so a long page
   never means a long scroll back to the form. */
.sg-mobcta { display: none; }

/* Footer columns + link lists. */
.sg-foot-label { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: .14em; color: var(--sg-accent); }
.sg-footlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; font-size: 15px; }
.sg-footlinks a { color: rgba(255,255,255,.72); text-decoration: none; }
.sg-footlinks a:hover { color: #fff; }
/* The footer Explore column renders the same menu as the header nav. */
.sg-footer .sg-footlinks .wp-block-navigation__container { gap: 12px; }
.sg-footer .sg-footlinks .wp-block-navigation-item__content { color: rgba(255,255,255,.72); font-weight: 500; text-decoration: none; }
.sg-footer .sg-footlinks .wp-block-navigation-item__content:hover { color: #fff; }
.sg-footer .sg-footlinks .wp-block-navigation__submenu-container { display: none; }
.sg-footbar { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; gap: 8px 26px; font-size: 13.5px; color: rgba(255,255,255,.55); }
.sg-footbar a { color: rgba(255,255,255,.72); text-decoration: none; }
.sg-footbar a:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
   Block templates carry inline padding/type, so these overrides are !important
   by necessity. Three steps: laptop (1100), tablet (980), phone (781).
--------------------------------------------------------------------------- */

/* Laptop */
@media (max-width: 1100px) {
  .sg-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .sg-wrap { padding-left: 34px !important; padding-right: 34px !important; }
  .sg-people { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 28px !important; }
}

/* Tablet */
/* Tablet: two testimonials per view. */
@media (max-width: 1100px) {
  .sg-rail--3up { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 980px) {
  .sg-headphone__link { font-size: 15px; }
  .sg-wrap { padding-left: 28px !important; padding-right: 28px !important; }
  .sg-sec { padding-top: 62px !important; padding-bottom: 62px !important; }

  .sg-formsplit { padding-top: 62px !important; padding-bottom: 62px !important; }
  .sg-formsplit > .wp-block-columns { grid-template-columns: minmax(0, 1fr); gap: 34px; }

  .sg-process { padding-top: 62px !important; padding-bottom: 62px !important; }
  .sg-process > .wp-block-columns { flex-wrap: wrap !important; gap: 34px !important; }
  .sg-process > .wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
  .sg-process .sg-steps { flex-wrap: wrap !important; }
  .sg-process .sg-steps > .wp-block-column { flex-basis: calc(50% - 11px) !important; }

  .sg-ctaband { padding-top: 60px !important; padding-bottom: 60px !important; }
  .sg-channels { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; }
}

/* Phone */
@media (max-width: 781px) {
  /* Header: the number lives in the sticky action bar on phones. The shortcode
     block does not carry its className through to the DOM, so hide the link's
     own markup and whatever paragraph the block wrapped it in. */
  .sg-headphone,
  .sg-headphone__link { display: none !important; }
  .sg-header p:has(> .sg-headphone__link) { display: none !important; }

  /* Header: logo + hamburger only — the sticky bar carries the CTA. */
  .sg-header { padding-top: 14px !important; padding-bottom: 14px !important; }
  .sg-header .sg-headcta { display: none !important; }
  .sg-header .wp-block-site-logo img { max-width: 148px !important; height: auto; }
  .sg-header .wp-block-site-title { font-size: 17px !important; }

  /* Gutters and rhythm: 20px sides, ~46px bands instead of 80–96px. */
  .sg-wrap { padding-left: 20px !important; padding-right: 20px !important; }
  .sg-sec { padding-top: 46px !important; padding-bottom: 46px !important; }
  .sg-sec--tight { padding-top: 34px !important; padding-bottom: 34px !important; }
  .sg-formsplit,
  .sg-process { padding-top: 48px !important; padding-bottom: 48px !important; }
  .sg-ctaband { padding-top: 52px !important; padding-bottom: 52px !important; }

  /* Type scale: nothing set in a template survives at desktop size. */
  h1 { letter-spacing: -.02em !important; }
  .sg-sec h2,
  .sg-formsplit h2,
  .sg-process h2,
  .sg-ctaband h2,
  .sg-footer h2 { font-size: clamp(26px, 7.6vw, 33px) !important; line-height: 1.14 !important; }
  .sg-process h3 { font-size: 20px !important; }
  .sg-hero p { font-size: 17px !important; }
  .sg-sec p, .sg-formsplit p, .sg-process p, .sg-ctaband p { text-wrap: pretty; }
  .sg-formsplit p:not(.saga-form__fine):not(.saga-form__note) { font-size: 16.5px !important; }
  .sg-checklist strong { font-size: 17px !important; }
  .sg-checklist li { font-size: 15px !important; }

  /* Hero: tighter, and the media card no longer overlaps into the next band.
     The gutter is owned by .sg-hero alone here — alignwide's own max-width and
     restored root padding both got a say before, which is what pushed the card
     off the right edge and let it sit on top of the next section's eyebrow. */
  .sg-hero {
    padding-top: 22px !important;
    padding-bottom: 30px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .sg-hero > * { padding-left: 0 !important; padding-right: 0 !important; }
  .sg-hero__media {
    width: auto !important;
    max-width: 100% !important;
    margin: 26px 0 0 !important;
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(0, 48, 77, .20);
  }
  /* No overlap on phones, so no clearance needed either. */
  .sg-hero + .sg-sec { padding-top: 48px !important; }
  .sg-hero .wp-block-buttons { gap: 10px !important; }
  .sg-hero .wp-block-button { flex: 1 1 100%; }
  .sg-hero .wp-block-button__link { display: block; text-align: center; }

  /* Every button is full-width and thumb-sized. */
  .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
  .sg-ctaband .wp-block-button { flex: 1 1 100%; }
  .sg-ctaband .wp-block-button__link { display: block; text-align: center; }
  /* No hover-lift on touch — it reads as a rendering glitch. */
  .wp-block-button__link:hover { transform: none; box-shadow: none; }

  /* Rails: one card per swipe, controls centered under the rail. */
  .sg-rail { gap: 16px; scroll-padding-left: 0; }
  .sg-rail > * { flex: 0 0 82vw !important; }
  .sg-rail--solo > * { flex-basis: 100% !important; }
  .sg-railnav { justify-content: center; margin-top: 14px; }
  .sg-railfoot { margin-top: 16px; gap: 12px; }
  .sg-railbtn { width: 44px; height: 44px; }

  /* Grids that become rails on a phone: six stacked cards become one swipe. */
  .sg-mobrail {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .sg-mobrail::-webkit-scrollbar { display: none; }
  .sg-mobrail > * { flex: 0 0 84vw !important; min-width: 0; scroll-snap-align: start; }
  .sg-railshell--mob > .sg-railfoot { display: flex; }

  /* Process steps swipe too, instead of three tall stacked cards. */
  .sg-process .sg-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 14px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .sg-process .sg-steps::-webkit-scrollbar { display: none; }
  .sg-process .sg-steps > .wp-block-column {
    flex: 0 0 84vw !important;
    scroll-snap-align: start;
    padding: 24px 22px 26px !important;
  }

  /* Testimonials: one card per swipe. */
  .sg-rail--3up { gap: 14px; grid-auto-columns: 86vw; }
  .sg-rail--3up figure { padding: 26px 22px 24px !important; }
  .sg-rail--3up figure blockquote p { font-size: 18px !important; }
  .sg-rail--solo figure { grid-template-columns: minmax(0, 1fr) !important; gap: 20px !important; padding: 28px 24px !important; }
  .sg-rail--solo figure blockquote p { font-size: 20px !important; line-height: 1.4 !important; }
  .sg-rail--solo figcaption { align-items: flex-start !important; text-align: left !important; }

  /* Channel footer inside the strategy band: label over chips. */
  .sg-channels { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; margin-top: 26px !important; padding-top: 24px !important; }
  .sg-chips { gap: 7px !important; }
  .sg-chips > span { font-size: 13px !important; padding: 7px 13px !important; }

  /* Stats: 2 up in the navy band, no hairline borders left dangling mid-row. */
  .sg-statband { padding: 38px 0 !important; }
  .sg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 18px 8px !important; }
  .sg-stats > div { border-left: 0 !important; padding: 4px 6px !important; }
  .sg-stats > div > div:first-child { font-size: 31px !important; }
  .sg-stats > div > div:last-child { font-size: 12.5px !important; margin-top: 4px !important; }

  /* Team: photo-left rows read fine, they just needed to fit. */
  .sg-people { grid-template-columns: minmax(0, 1fr) !important; gap: 22px !important; }
  .sg-people > div { grid-template-columns: 84px minmax(0, 1fr) !important; gap: 14px !important; }
  .sg-people img, .sg-people > div > div:first-child { width: 84px !important; height: 104px !important; }

  /* Why-us: the photo is decoration — drop it and keep the substance. */
  .sg-whyus > .wp-block-columns > .wp-block-column:first-child { display: none !important; }
  .sg-whyus .sg-checklist { gap: 16px !important; }

  /* Channels chips stack under their label. */
  .sg-channels { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; padding: 24px 22px !important; }

  /* Roster strip: full-width button under the copy. */
  .sg-roster .wp-block-buttons,
  .sg-roster .wp-block-button { width: 100%; }
  .sg-roster .wp-block-button__link { display: block; text-align: center; }

  /* Form card + footer. */
  .saga-form__grid { grid-template-columns: 1fr; }
  .saga-form input, .saga-form select, .saga-form textarea { font-size: 16px; }
  .sg-sticky { position: static; }
  .sg-footer { padding-top: 46px !important; padding-bottom: 30px !important; }
  .sg-footer > .wp-block-columns { gap: 30px !important; }
  .sg-footbar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Sticky action bar. */
  body { padding-bottom: 74px; }
  .sg-mobcta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--sg-paper) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--sg-line);
  }
  .sg-mobcta a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -.01em;
  }
  .sg-mobcta__book { background: var(--sg-brand); color: var(--sg-paper); }
  .sg-mobcta__call { border: 1.5px solid var(--sg-line); color: var(--sg-brand); background: var(--sg-paper); }
}

@media (max-width: 400px) {
  .sg-stats > div > div:first-child { font-size: 26px !important; }
  .sg-mobcta a { font-size: 14px; }
}


/* 404 --------------------------------------------------------------------
   The search field and quick links sit on the brand color, where WordPress's
   default search block chrome disappears. */
.sg-404 .wp-block-search__inside-wrapper { gap: 10px; max-width: 560px; margin: 0 auto; }
.sg-404 .wp-block-search__input {
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 16px;
}
.sg-404 .wp-block-search__input::placeholder { color: rgba(255,255,255,.6); }
.sg-404 .wp-block-search__input:focus {
  outline: none;
  border-color: #6FC2EF;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(111,194,239,.28);
}
.sg-404 .wp-block-search__button {
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--sg-accent);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  transition: filter .18s ease, transform .18s ease;
}
.sg-404 .wp-block-search__button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sg-404__links .wp-block-button__link { padding: 11px 20px; font-weight: 650; }
.sg-404__links .wp-block-button__link:hover { background: rgba(255,255,255,.12) !important; border-color: #fff !important; }
.sg-404 a { color: #fff; }
.sg-404 a:hover { color: #6FC2EF; }

@media (max-width: 860px) {
  .sg-404 h1 { font-size: 46px !important; }
  .sg-404 .wp-block-search__inside-wrapper { flex-wrap: wrap; }
  .sg-404 .wp-block-search__button { width: 100%; }
}

/* Booking popup ------------------------------------------------------------
   The consultation form as a modal. Hidden until :target (no JS) or .is-open
   (assets/js/booking.js) brings it up. */
.sg-modal { position: fixed; inset: 0; z-index: 999; display: none; align-items: center; justify-content: center; padding: 30px; }
.sg-modal:target,
.sg-modal.is-open { display: flex; animation: sg-modal-in .2s ease both; }
.sg-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(0,22,38,.55);
  backdrop-filter: blur(7px) saturate(135%);
  -webkit-backdrop-filter: blur(7px) saturate(135%);
}
.sg-modal__panel {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  width: min(940px, 100%);
  max-height: 90vh;
  overflow: auto;
  border-radius: 22px;
  background: var(--sg-paper);
  box-shadow: 0 40px 90px rgba(0,18,34,.45);
  animation: sg-modal-pop .26s cubic-bezier(.22,.7,.3,1) both;
}
.sg-modal__close {
  position: absolute; top: 15px; right: 15px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--sg-line); background: var(--sg-paper);
  color: var(--sg-muted); font-size: 13px; text-decoration: none;
}
.sg-modal__close:hover { background: var(--sg-brand); border-color: var(--sg-brand); color: #fff; }
.sg-modal__rail { display: flex; flex-direction: column; padding: 38px 30px; background: var(--sg-brand); color: #fff; }
.sg-modal__eyebrow { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #6FC2EF; }
.sg-modal__title { margin: 12px 0 0; font-size: 31px; line-height: 1.08; letter-spacing: -.02em; color: #fff; }
.sg-modal__copy { margin: 14px 0 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.74); }
.sg-modal__points { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.sg-modal__points li { position: relative; padding-left: 22px; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.sg-modal__points li::before { content: "\2713"; position: absolute; left: 0; color: #6FC2EF; font-weight: 900; }
.sg-modal__tel { margin: auto 0 0; padding-top: 26px; }
.sg-modal__tel span { display: block; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.6); }
.sg-modal__tel a { display: inline-block; margin-top: 5px; font-size: 19px; font-weight: 800; color: #fff; text-decoration: none; }
.sg-modal__tel a:hover { color: #6FC2EF; }
.sg-modal__body { padding: 36px; }
.sg-modal__formtitle { margin: 0; font-size: 21px; letter-spacing: -.01em; color: var(--sg-brand); }
.sg-modal__formnote { margin: 5px 0 22px; font-size: 14.5px; color: var(--sg-muted); }
.sg-modal__body .saga-form__submit { width: 100%; }
html.sg-modal-lock, html.sg-modal-lock body { overflow: hidden; }

@keyframes sg-modal-in { from { opacity: 0 } to { opacity: 1 } }
@keyframes sg-modal-pop { from { opacity: 0; transform: translateY(16px) scale(.975) } to { opacity: 1; transform: none } }

@media (max-width: 860px) {
  .sg-modal { padding: 0; }
  .sg-modal__panel { grid-template-columns: minmax(0, 1fr); width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
  .sg-modal__rail { padding: 26px 22px 22px; }
  .sg-modal__title { font-size: 25px; }
  .sg-modal__copy { font-size: 14.5px; }
  .sg-modal__points { margin-top: 18px; gap: 8px; }
  .sg-modal__tel { margin-top: 20px; padding-top: 18px; }
  .sg-modal__body { padding: 26px 22px 34px; }
}

/* Single advisor page: headshot beside bio, then form beside the steps. */
@media (max-width: 1000px) {
  .sg-advisor__body { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .sg-advisor__h2 { font-size: 32px !important; }
  .sg-advisor__head { grid-template-columns: 260px minmax(0, 1fr) !important; gap: 34px !important; }
  .sg-advisor__photo { height: 340px !important; }
}
@media (max-width: 700px) {
  .sg-advisor__head { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; }
  .sg-advisor__photo { max-width: 220px !important; height: auto !important; aspect-ratio: 4 / 5; }
  .sg-advisor__head h1 { font-size: 34px !important; }
  .sg-advisor__body .sg-formcard { padding: 22px !important; }
}

/* Video testimonials --------------------------------------------------------
   A quote card is unchanged until its testimonial carries a video URL, and
   then it gains this pill. The popup below is empty markup until JS fills it
   on open. */
.sg-watch {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 17px 0 13px;
  border: 1px solid color-mix(in oklab, var(--sg-brand) 16%, transparent);
  border-radius: 999px; background: var(--sg-paper);
  color: var(--sg-brand); font-size: 14px; font-weight: 800;
  text-decoration: none; cursor: pointer; flex: 0 0 auto;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sg-watch:hover, .sg-watch:focus-visible { background: var(--sg-brand); border-color: var(--sg-brand); color: #fff; }
.sg-watch__play {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sg-accent); color: #fff; font-size: 8px;
  transition: background .18s ease, color .18s ease;
}
.sg-watch__play::before { content: "\25B6"; margin-left: 1px; }
.sg-watch:hover .sg-watch__play, .sg-watch:focus-visible .sg-watch__play { background: #fff; color: var(--sg-brand); }

.sg-vidbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 30px; animation: sg-modal-in .2s ease both; }
.sg-vidbox[hidden] { display: none; }
.sg-vidbox__scrim {
  position: absolute; inset: 0;
  background: rgba(0,18,34,.72);
  backdrop-filter: blur(7px) saturate(130%);
  -webkit-backdrop-filter: blur(7px) saturate(130%);
}
.sg-vidbox__panel { position: relative; width: min(1040px, 100%); animation: sg-modal-pop .26s cubic-bezier(.22,.7,.3,1) both; }
.sg-vidbox__frame {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden; background: #000;
  box-shadow: 0 40px 90px rgba(0,18,34,.5);
}
.sg-vidbox__frame iframe,
.sg-vidbox__frame video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; }
.sg-vidbox__caption { margin: 15px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: rgba(255,255,255,.88); }
.sg-vidbox__close {
  position: absolute; top: -48px; right: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.16); color: #fff; font-size: 15px; cursor: pointer;
}
.sg-vidbox__close:hover { background: #fff; color: var(--sg-brand); }

@media (max-width: 860px) {
  .sg-vidbox { padding: 18px; }
  .sg-vidbox__close { top: auto; bottom: -48px; right: 50%; transform: translateX(50%); }
}