/* =====================================================================
   Good Creative Media — Shared Design System
   goodcreativemedia.com
   Version 1.1  /  May 25, 2026

   Family resemblance to The IMC Machine site: same 8pt grid, same type
   scale, same component logic. Different palette. The product site is
   dark and precise. The agency site is light and warm. Together they
   read as one company speaking in two rooms.

   Palette per Master Plan Section 9.2.
   ===================================================================== */

/* --- -1. Reset html font-size to browser default --------------------
   The bb-theme uses the 62.5% trick: html { font-size: 62.5% } which
   makes 1rem = 10px. The entire design system here uses rem units
   assuming the browser default 1rem = 16px (e.g. --measure-max is
   78rem expecting 1248px, the hero is 4.75rem expecting 76px, section
   padding is 6rem expecting 96px). Without this reset every rem-based
   value renders at 62.5% of intended, including container widths, type
   scale, and section spacing.

   16px is the browser default and a sensible reading size. This rule
   restores it for our pages without touching bb-theme on pages that
   still use it.

   We scope to the tpl-no-header-footer body so this only affects the
   pages we rebuilt; bb-theme keeps its 10px base anywhere we have not
   shipped a replacement. */
html:has(body.page-template-tpl-no-header-footer),
body.page-template-tpl-no-header-footer { font-size: 16px !important; }
/* Older browser fallback (no :has support before May 2022 Chromium). */
@supports not selector(:has(*)) {
  html { font-size: 16px !important; }
}

/* --- 0. Reset wrappers from Beaver Builder Theme ---------------------
   These pages use the bb-theme-child template tpl-no-header-footer.php,
   which strips the site header and footer but still renders these
   wrappers around the post content:

     div.fl-page                                  (page-wide background)
     |--div.fl-page-content                       (main role wrapper)
        |--div.fl-content-full.container           (Bootstrap container, max-width 1100px)
           |--div.row                              (Bootstrap row)
              |--div.fl-content.col-md-12          (Bootstrap column)
                 |--article.fl-post                (post article)
                    |--header.fl-post-header       (duplicate H1 with WP page title)
                    |--div.fl-post-content         (where our content lives)

   None of those belong on the rebuilt pages. Strip them so the design
   system runs the page edge to edge. Selectors are scoped to the
   theme classes only so our own .container, .row, .section, etc.
   keep working. */

body.page-template-tpl-no-header-footer { background: var(--paper) !important; }
body.page-template-tpl-no-header-footer .fl-page,
body.page-template-tpl-no-header-footer .fl-page-content {
  background: var(--paper) !important;
  background-color: var(--paper) !important;
}
body.page-template-tpl-no-header-footer .fl-content-full {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.page-template-tpl-no-header-footer .fl-content-full > .row {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
body.page-template-tpl-no-header-footer .fl-content-full > .row > .fl-content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
  flex: none !important;
}
body.page-template-tpl-no-header-footer .fl-post {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: var(--paper) !important;
  max-width: none !important;
}
body.page-template-tpl-no-header-footer .fl-post-content {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--paper) !important;
}
/* Hide the WP page title rendered by .fl-post-header (it duplicates
   our own page h1) and any related meta markup. */
body.page-template-tpl-no-header-footer .fl-post-header,
body.page-template-tpl-no-header-footer .fl-post-title,
body.page-template-tpl-no-header-footer .fl-post-meta { display: none !important; }
/* Hide any Beaver Themer header or footer part that tries to render
   on a template that should have neither. */
body.page-template-tpl-no-header-footer .fl-builder-content[data-type="header"],
body.page-template-tpl-no-header-footer .fl-builder-content[data-type="footer"] {
  display: none !important;
}
/* Defensive: the theme sometimes adds top padding to .fl-page-content
   for fixed-header offset. Our header is in the content so we do not
   need that offset. */
body.page-template-tpl-no-header-footer .fl-page-content { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Force our .container max-width to win over bb-theme's body-scoped
   .container rule (the theme's selector "body.fl-framework-base .container"
   has higher specificity than our plain ".container" and was clamping
   every content row to ~780px even at desktop widths). The page-template
   prefix here matches the theme's rule specificity and our !important
   forces it through. Same applies to .row to neutralize Bootstrap grid
   leakage. */
body.page-template-tpl-no-header-footer .container {
  max-width: var(--measure-max) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--s-3) !important;
  padding-right: var(--s-3) !important;
  float: none !important;
}
@media (min-width: 768px) {
  body.page-template-tpl-no-header-footer .container {
    padding-left: var(--s-5) !important;
    padding-right: var(--s-5) !important;
  }
}
/* Our header bar and footer grid use the same .container class. They
   inherit the above. Site header utility bar lives inside .site-header,
   not .container, so it picks up its own bg from the .site-header
   rules. */
body.page-template-tpl-no-header-footer .site-header__bar,
body.page-template-tpl-no-header-footer .site-header__utility-bar,
body.page-template-tpl-no-header-footer .site-footer__grid {
  max-width: var(--measure-max) !important;
}
/* The site-header is supposed to be sticky at the top. Bb-theme can
   override position. Force it. */
body.page-template-tpl-no-header-footer .site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: var(--paper) !important;
}
/* Hide the Beaver Themer "Scroll To Top" button (rendered by the theme
   in the bottom-right corner). It collides with our own design. */
body.page-template-tpl-no-header-footer .fl-scroll-to-top-btn,
body.page-template-tpl-no-header-footer #fl-scroll-to-top { display: none !important; }

/* --- 1. Design tokens (warm teal + sand) ----------------------------- */

:root {
  /* Neutrals. Warm, light, calm. */
  --paper: #FFFFFF;             /* primary background */
  --bone:  #FBF8F0;             /* very light sand for soft surfaces */
  --sand:  #F2EFE6;             /* warm sand, official palette */
  --ink:   #1F2421;             /* charcoal, primary text */
  --charcoal: #2C342E;          /* secondary heading text */
  --graphite: #4A5550;          /* body text on white */
  --mist:  #8A938F;             /* muted text, metadata */
  --rule:  #E4E0D5;             /* hairlines on sand surfaces */
  --rule-strong: #C9D6D1;       /* official border gray */

  /* Brand. Deep teal primary, warm gold accent. */
  --teal: #14564A;
  --teal-tint: #E1F0EC;
  --teal-deep: #0E3D34;
  --teal-soft: #2A7E6C;
  --gold: #9A6B1F;
  --gold-tint: #F4EAD7;
  --gold-deep: #6F4A12;

  /* Aliases for editorial roles. The product side uses navy + oxblood.
     The agency side uses teal + gold. Same logic, different surface. */
  --accent: var(--teal);
  --accent-soft: var(--teal-tint);
  --accent-deep: var(--teal-deep);
  --highlight: var(--gold);
  --highlight-tint: var(--gold-tint);

  /* Type scale. NYC-agency editorial proportions. The hero tops out at
     92px so it reads as a magazine cover, not a startup landing. The
     section H2 stays at 36px so subordination remains clear. */
  --t-xs:   0.875rem;   /* 14px, readable floor */
  --t-sm:   0.9375rem;  /* 15px */
  --t-base: 1rem;       /* 16px */
  --t-md:   1.0625rem;  /* 17px lede on small screens */
  --t-lg:   1.125rem;   /* 18px */
  --t-xl:   1.25rem;    /* 20px */
  --t-2xl:  1.5rem;     /* 24px */
  --t-3xl:  2.25rem;    /* 36px section H2 max */
  --t-4xl:  3rem;       /* 48px page H1 max */
  --t-5xl:  5.75rem;    /* 92px hero max, cinematic */
  --t-display: 7.5rem;  /* 120px display headlines, manifesto pages */

  /* Spacing (8pt grid) */
  --s-0: 0;
  --s-1: 0.5rem;       /* 8px */
  --s-2: 1rem;         /* 16px */
  --s-3: 1.5rem;       /* 24px */
  --s-4: 2rem;         /* 32px */
  --s-5: 3rem;         /* 48px */
  --s-6: 4rem;         /* 64px */
  --s-7: 6rem;         /* 96px */
  --s-8: 8rem;         /* 128px */
  --s-9: 10rem;        /* 160px */

  /* Measure */
  --measure-narrow: 32rem;
  --measure-prose: 38rem;
  --measure-wide: 64rem;
  --measure-max: 78rem;

  /* Radii */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration: 200ms;

  /* Shadows (warmed for the agency palette) */
  --shadow-1: 0 1px 2px rgba(20, 86, 74, 0.06), 0 1px 1px rgba(20, 86, 74, 0.04);
  --shadow-2: 0 8px 22px -8px rgba(20, 86, 74, 0.14);
  --shadow-3: 0 24px 48px -16px rgba(20, 86, 74, 0.20);
}

/* --- 2. Reset and base ----------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: 'Inter', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--teal);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--duration) var(--ease);
}
a:hover { color: var(--teal-deep); }

/* --- 3. Typography (sans-serif throughout) --------------------------- */

h1, h2, h3, h4, h5 {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 var(--s-3) 0;
  text-wrap: balance;
}

h1, .h1 {
  font-size: clamp(2rem, 4.5vw, var(--t-4xl));
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.hero-headline {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: clamp(2.5rem, 7.5vw, var(--t-5xl));
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 var(--s-3) 0;
  color: var(--ink);
  text-wrap: balance;
}

/* Display headline for manifesto / "thinking" pages. Bigger still. */
.display-headline {
  font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
  font-size: clamp(3rem, 10vw, var(--t-display));
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  margin: 0 0 var(--s-4) 0;
  color: var(--ink);
  text-wrap: balance;
}

h2, .h2 {
  font-size: clamp(1.25rem, 3vw, var(--t-3xl));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

h3, .h3 {
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

h4, .h4 {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

h5 {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mist);
}

.eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin: 0 0 var(--s-2) 0;
}

.lede {
  font-size: clamp(var(--t-md), 1.4vw, var(--t-xl));
  line-height: 1.55;
  font-weight: 400;
  color: var(--charcoal);
  max-width: var(--measure-prose);
  margin: 0 0 var(--s-4) 0;
  text-wrap: pretty;
}

p {
  margin: 0 0 var(--s-3) 0;
  max-width: var(--measure-prose);
}

p.wide { max-width: var(--measure-wide); }
p.narrow { max-width: var(--measure-narrow); }

ul, ol {
  margin: 0 0 var(--s-3) 0;
  padding-left: var(--s-4);
  max-width: var(--measure-prose);
}

li { margin-bottom: var(--s-1); color: var(--graphite); }

strong { font-weight: 700; color: var(--ink); }
em { font-style: italic; }

small, .small { font-size: var(--t-sm); color: var(--mist); }
.caption { font-size: var(--t-xs); color: var(--mist); letter-spacing: 0.04em; }

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

blockquote {
  margin: var(--s-5) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
  border-left: 3px solid var(--teal);
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--charcoal);
  max-width: var(--measure-prose);
}

blockquote cite {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  font-style: normal;
  color: var(--mist);
  letter-spacing: 0.04em;
}

/* The editorial accent serif. Section 9.3 allows one pull-quote per
   page on a long-form page. Source Serif handles it. */
.serif {
  font-family: 'Source Serif Pro', 'Georgia', serif;
  font-style: italic;
}

/* --- 4. Layout primitives -------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--measure-max);
  margin: 0 auto;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}

@media (min-width: 768px) {
  .container { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* Section padding. Pulled back from the previous parking-lot values
   (was 96/128px). New values are 64/96px so the page breathes without
   feeling sparse. Editorial density per the IMC Machine reference. */
.section {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
@media (min-width: 768px) {
  .section { padding-top: var(--s-7); padding-bottom: var(--s-7); }
}

.section-tight { padding-top: var(--s-4); padding-bottom: var(--s-4); }
@media (min-width: 768px) {
  .section-tight { padding-top: var(--s-5); padding-bottom: var(--s-5); }
}

.section-wide { padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 768px) {
  .section-wide { padding-top: var(--s-8); padding-bottom: var(--s-8); }
}

.section--sand { background: var(--sand); }
.section--bone { background: var(--bone); }
.section--teal-tint { background: var(--teal-tint); }
.section--ink {
  background: var(--ink);
  color: var(--paper);
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4, .section--ink .hero-headline {
  color: var(--paper);
}
.section--ink .lede,
.section--ink p,
.section--ink li { color: rgba(255, 255, 255, 0.85); }
.section--ink a { color: var(--paper); text-decoration-color: rgba(255, 255, 255, 0.4); }
.section--ink a:hover { text-decoration-color: var(--paper); }
.section--ink .eyebrow { color: rgba(255, 255, 255, 0.85); }

.section--teal {
  background: linear-gradient(112deg, var(--teal-deep) 0%, var(--teal) 60%, var(--teal-soft) 100%);
  color: var(--paper);
}
.section--teal h1, .section--teal h2, .section--teal h3, .section--teal h4, .section--teal .hero-headline { color: var(--paper); }
.section--teal .lede, .section--teal p, .section--teal li { color: rgba(255, 255, 255, 0.92); }
.section--teal a { color: var(--paper); }
.section--teal .eyebrow { color: rgba(255, 255, 255, 0.85); }

/* Grids */
.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.split-2 { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split-2 { grid-template-columns: 5fr 7fr; gap: var(--s-6); align-items: start; }
  .split-2.split-2--reverse { grid-template-columns: 7fr 5fr; }
}

.split-2-eq { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .split-2-eq { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
}

/* --- 5. Header / navigation ------------------------------------------ */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header__utility {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}
.site-header__utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 0.4rem var(--s-3);
}
@media (min-width: 768px) {
  .site-header__utility-bar { padding: 0.4rem var(--s-5); }
}
.site-header__utility a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.site-header__utility a:hover { color: var(--paper); }
.site-header__utility-phone { font-weight: 600; }
.site-header__utility-portal { font-weight: 500; }

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--s-3);
  max-width: var(--measure-max);
  margin: 0 auto;
}
@media (min-width: 768px) {
  .site-header__bar { padding: var(--s-3) var(--s-5); }
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-decoration: none;
}
.site-header__logo:hover { color: var(--teal); }
.site-header__logo svg { width: 28px; height: 28px; flex-shrink: 0; }

.site-nav {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 900px) {
  .site-nav { display: flex; }
}

.site-nav a {
  color: var(--charcoal);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 500;
  letter-spacing: 0;
  padding: 0.375rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.site-nav a:hover:not(.site-nav__cta) {
  color: var(--ink);
  border-bottom-color: var(--teal);
}
/* Current-page indicator on the non-CTA nav links: a clear teal
   underline plus weight bump so the visitor always sees where they
   are. Scope it away from .site-nav__cta so the Contact button does
   not pick up the underline (it has its own current-page treatment
   below). */
.site-nav a.is-active:not(.site-nav__cta) {
  color: var(--ink);
  border-bottom-color: var(--teal);
  font-weight: 600;
}

/* The Contact button is always present as a call-to-action. Its base
   style is the teal pill; this is intentionally NOT the same shape as
   the "you are here" indicator on the other nav links. When the
   visitor is actually on /contact/, the button takes a deeper press
   so it reads as the current page without changing the affordance. */
.site-nav__cta {
  background: var(--teal);
  color: var(--paper) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 8px;
  border: 1px solid transparent !important;
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease) !important;
  border-bottom: 1px solid transparent !important;
}
.site-nav__cta:hover {
  background: var(--teal-deep) !important;
  border-bottom-color: transparent !important;
  box-shadow: 0 2px 6px -2px rgba(20, 86, 74, 0.4);
}
.site-nav__cta.is-active {
  background: var(--teal-deep) !important;
  box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 0.45);
}

/* Mobile nav toggle */
.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
}
@media (min-width: 900px) { .site-nav__toggle { display: none; } }
.site-nav__toggle span,
.site-nav__toggle span::before,
.site-nav__toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.site-nav__toggle span::before,
.site-nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
}
.site-nav__toggle span::before { top: -6px; }
.site-nav__toggle span::after  { top: 6px; }

.site-nav--mobile {
  display: none;
  flex-direction: column;
  gap: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: var(--s-2) var(--s-3);
}
.site-nav--mobile.is-open { display: flex; }
@media (min-width: 900px) { .site-nav--mobile { display: none !important; } }
.site-nav--mobile a {
  display: block;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.site-nav--mobile a:last-child { border-bottom: none; }

/* --- 6. Footer ------------------------------------------------------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--s-7) 0 var(--s-4) 0;
  margin-top: var(--s-7);
}

.site-footer__grid {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 0 var(--s-3);
}
@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    padding: 0 var(--s-5);
  }
}
@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

.site-footer__title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: var(--s-2);
  color: var(--paper);
}

.site-footer__about {
  font-size: var(--t-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  max-width: 24rem;
}

.site-footer__motto {
  font-size: var(--t-sm);
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-top: var(--s-3);
  display: block;
}

.site-footer h5 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 var(--s-2) 0;
  font-weight: 700;
}

.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--s-1); }

.site-footer a {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--t-sm);
  text-decoration: none;
}
.site-footer a:hover { color: var(--paper); text-decoration: underline; }

.site-footer__social {
  display: flex;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.site-footer__social a {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  transition: background var(--duration) var(--ease);
}
.site-footer__social a:hover { background: rgba(255, 255, 255, 0.18); text-decoration: none; }
.site-footer__social svg { width: 16px; height: 16px; fill: currentColor; }

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  font-size: var(--t-xs);
  color: rgba(255, 255, 255, 0.5);
  max-width: var(--measure-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-3);
  padding-right: var(--s-3);
}
@media (min-width: 768px) {
  .site-footer__legal { padding-left: var(--s-5); padding-right: var(--s-5); }
}

/* --- 7. Buttons / CTAs ----------------------------------------------- */

.btn {
  display: inline-block;
  padding: 0.625rem 1.125rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  line-height: 1.3;
  white-space: nowrap;
}

.btn--primary {
  background: var(--teal);
  color: var(--paper);
}
.btn--primary:hover { background: var(--teal-deep); color: var(--paper); }

.btn--accent {
  background: var(--gold);
  color: var(--paper);
}
.btn--accent:hover { background: var(--gold-deep); color: var(--paper); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--outline {
  background: var(--paper);
  color: var(--teal);
  border-color: var(--teal);
}
.btn--outline:hover { background: var(--teal-tint); color: var(--teal-deep); }

.btn--on-ink {
  background: var(--paper);
  color: var(--ink);
}
.btn--on-ink:hover { background: var(--sand); color: var(--ink); }

.btn--lg { padding: 0.75rem 1.5rem; font-size: var(--t-base); }
.btn--sm { padding: 0.4rem 0.9rem; font-size: var(--t-sm); }

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* --- 8. Cards / tiles ------------------------------------------------ */

.card {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: var(--s-3);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-1);
}

.card h3 { margin-bottom: var(--s-1); font-size: var(--t-lg); letter-spacing: -0.005em; }
.card h4 { margin-bottom: var(--s-1); font-size: var(--t-base); }
.card p { font-size: var(--t-sm); color: var(--graphite); margin-bottom: var(--s-2); line-height: 1.55; }
.card a.card__link {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--teal);
}
.card a.card__link::after {
  content: ' →';
  transition: transform var(--duration) var(--ease);
  display: inline-block;
}
.card a.card__link:hover::after { transform: translateX(2px); }

.card--sand {
  background: var(--sand);
  border-color: var(--rule);
}

.card--teal {
  background: var(--teal-tint);
  border-color: color-mix(in srgb, var(--teal) 20%, transparent);
}
.card--teal h3 { color: var(--teal-deep); }

.card--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.card--ink h3 { color: var(--paper); }
.card--ink p { color: rgba(255, 255, 255, 0.85); }
.card--ink a { color: var(--paper); }

.payment-grid {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .payment-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.payment-card {
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding: var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: var(--shadow-1);
}

.payment-card__qr {
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: #fff;
}

.payment-card__qr img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
}

.payment-card h3 {
  margin: 0;
  font-size: var(--t-lg);
}

.payment-card p {
  margin: 0;
  font-size: var(--t-sm);
}

.payment-note {
  max-width: var(--measure-wide);
  margin-top: var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--bone);
}

.payment-note p {
  margin: 0;
  max-width: none;
  font-size: var(--t-sm);
}

.payment-hero {
  padding-bottom: var(--s-4);
}

.payment-section {
  padding-top: var(--s-4);
}

/* Case study tile with image */
.case-tile {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
  text-decoration: none;
  color: inherit;
}
.case-tile:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-1);
}
.case-tile__media {
  aspect-ratio: 4 / 3;
  background: var(--sand);
  overflow: hidden;
  position: relative;
}
.case-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-tile__media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--teal-tint) 0%, var(--sand) 100%);
  color: var(--teal-deep);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--s-3);
  text-align: center;
  line-height: 1.5;
}
.case-tile__body { padding: var(--s-3); }
.case-tile__client {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin: 0 0 var(--s-1) 0;
}
.case-tile__title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 var(--s-2) 0;
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.case-tile__type {
  font-size: var(--t-sm);
  color: var(--graphite);
  margin: 0;
  line-height: 1.5;
}
.case-tile__link {
  display: inline-block;
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--teal);
}

/* --- 9. Callout / pull quote ----------------------------------------- */

.callout {
  background: var(--bone);
  border-left: 3px solid var(--teal);
  padding: var(--s-3) var(--s-4);
  margin: var(--s-4) 0;
  border-radius: 0 8px 8px 0;
  max-width: var(--measure-wide);
}
.callout p:last-child { margin-bottom: 0; }
.callout p { font-size: var(--t-base); line-height: 1.6; color: var(--charcoal); max-width: none; }
.callout .eyebrow { color: var(--teal); }

.callout--gold {
  border-left-color: var(--gold);
  background: var(--gold-tint);
}
.callout--gold .eyebrow { color: var(--gold-deep); }
.callout--gold p { color: var(--ink); }

.pullquote {
  font-family: 'Source Serif Pro', 'Georgia', serif;
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: var(--measure-wide);
  margin: var(--s-6) auto;
  padding: 0 var(--s-3);
  text-align: center;
  font-weight: 400;
}
.pullquote::before { content: '\201C'; color: var(--teal); margin-right: 0.1em; }
.pullquote::after  { content: '\201D'; color: var(--teal); margin-left: 0.05em; }

/* --- 10. Feature / service list ------------------------------------- */

.feature-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: var(--measure-wide);
}
.feature-list li {
  display: block;
  margin: 0;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-strong);
}
.feature-list li:first-child { padding-top: 0; }
.feature-list li:last-child { border-bottom: none; }
.feature-list h4 {
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 0 0 0.375rem 0;
  color: var(--ink);
}
.feature-list p {
  margin: 0;
  color: var(--graphite);
  font-size: var(--t-sm);
  line-height: 1.6;
}

/* --- 11. Timeline (used on About page) ------------------------------ */

.timeline {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: 1fr;
  margin: var(--s-4) 0;
  max-width: var(--measure-wide);
}
@media (min-width: 768px) {
  .timeline { grid-template-columns: 1fr 1fr; gap: var(--s-4); }
}
.timeline__item {
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-left: 2px solid var(--teal);
  position: relative;
}
@media (min-width: 768px) {
  .timeline__item {
    border-left: none;
    border-top: 2px solid var(--teal);
    padding: var(--s-2) var(--s-2) 0 0;
  }
}
.timeline__year {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--teal);
  margin-bottom: 0.375rem;
}
.timeline__title {
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 0.375rem 0;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.timeline__body {
  font-size: var(--t-sm);
  color: var(--graphite);
  margin: 0;
  line-height: 1.55;
  max-width: none;
}

/* --- 12. Breadcrumbs ------------------------------------------------ */

.breadcrumbs {
  font-size: var(--t-sm);
  color: var(--mist);
  margin-bottom: var(--s-3);
}
.breadcrumbs a { color: var(--mist); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal); }
.breadcrumbs span.sep { margin: 0 0.5em; }

/* --- 13. Tag / pill ------------------------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0.3em 0.85em;
  border-radius: 999px;
  background: var(--sand);
  color: var(--charcoal);
  margin-right: var(--s-1);
  border: 1px solid var(--rule);
}
.tag--accent { background: var(--teal-tint); color: var(--teal-deep); border-color: color-mix(in srgb, var(--teal) 18%, transparent); }
.tag--gold { background: var(--gold-tint); color: var(--gold-deep); border-color: color-mix(in srgb, var(--gold) 18%, transparent); }

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--s-3);
}
.pill {
  display: inline-flex;
  align-items: center;
  font-size: var(--t-sm);
  font-weight: 500;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--paper);
  color: var(--graphite);
  border: 1px solid var(--rule-strong);
  line-height: 1.4;
}

/* --- 14. Form elements ---------------------------------------------- */

.form-field { display: block; margin-bottom: var(--s-3); }
.form-field label {
  display: block;
  font-size: var(--t-sm);
  font-weight: 600;
  margin-bottom: var(--s-1);
  color: var(--charcoal);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: var(--s-2);
  font-family: inherit;
  font-size: var(--t-base);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--ink);
  transition: border-color var(--duration) var(--ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-tint);
}
.form-field textarea { min-height: 8rem; resize: vertical; }

.form-help {
  font-size: var(--t-sm);
  color: var(--mist);
  margin-top: var(--s-1);
}

/* --- 15. Hero variants ---------------------------------------------- */

.hero {
  padding-top: var(--s-5);
  padding-bottom: var(--s-5);
}
@media (min-width: 768px) {
  .hero { padding-top: var(--s-6); padding-bottom: var(--s-6); }
}

.hero__split {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .hero__split { grid-template-columns: 7fr 5fr; gap: var(--s-6); }
}

.hero__visual {
  aspect-ratio: 5 / 4;
  border-radius: 12px;
  background: linear-gradient(150deg, var(--teal-tint) 0%, var(--sand) 65%, var(--gold-tint) 100%);
  position: relative;
  overflow: hidden;
}
.hero__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__visual--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-5);
  text-align: center;
  font-size: var(--t-sm);
  color: var(--teal-deep);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* --- 16. Audience split cards (homepage) ---------------------------- */

.audience-card {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.audience-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-1);
}
.audience-card__eyebrow {
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin: 0 0 var(--s-1) 0;
}
.audience-card__title {
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.audience-card__body {
  font-size: var(--t-base);
  color: var(--graphite);
  margin: 0;
  line-height: 1.6;
}
.audience-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* --- 17. Utilities -------------------------------------------------- */

.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.no-margin { margin: 0; }

.divider-rule {
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

.center-narrow {
  max-width: var(--measure-prose);
  margin-left: auto;
  margin-right: auto;
}
.center-wide {
  max-width: var(--measure-wide);
  margin-left: auto;
  margin-right: auto;
}

.section-head {
  margin-bottom: var(--s-4);
  max-width: var(--measure-wide);
}
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p {
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--charcoal);
  max-width: var(--measure-prose);
}

/* --- 17.4 Editorial components for top-tier agency presentation ----
   The site uses these for moments that need to read like a magazine
   page, not a marketing page. */

/* Manifesto / stance list. A numbered set of opinionated assertions.
   The number is a quiet decoration, not a counter. Each item gets its
   own ample breathing room. */
.stance-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s-5);
  counter-reset: stance;
  max-width: var(--measure-wide);
}
.stance-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  align-items: baseline;
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--s-3);
}
.stance-list li::before {
  counter-increment: stance;
  content: "" counter(stance, decimal-leading-zero);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--teal);
  white-space: nowrap;
}
.stance-list h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 var(--s-2) 0;
  color: var(--ink);
  text-wrap: balance;
}
.stance-list p {
  font-size: var(--t-md);
  color: var(--charcoal);
  line-height: 1.55;
  margin: 0;
  max-width: var(--measure-prose);
}

/* "By the numbers" specificity grid. Each cell is one specific surprise. */
.numbers-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  max-width: var(--measure-wide);
}
@media (min-width: 600px) { .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }
@media (min-width: 900px) { .numbers-grid { grid-template-columns: repeat(3, 1fr); } }
.numbers-grid__cell {
  border-top: 2px solid var(--teal);
  padding-top: var(--s-3);
}
.numbers-grid__number {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--ink);
  margin: 0 0 var(--s-2) 0;
}
.numbers-grid__label {
  font-size: var(--t-md);
  color: var(--charcoal);
  line-height: 1.5;
  margin: 0;
  max-width: 30ch;
}

/* Drop-cap for editorial pieces. The first letter of a paragraph takes
   over the room the way the NYT magazine does it. */
.drop-cap::first-letter {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 5.5rem;
  line-height: 0.85;
  float: left;
  padding: 0.25rem 0.5rem 0 0;
  color: var(--teal);
}

/* Marquee rule. A single horizontal line that anchors a manifesto-style
   page. Quiet, confident. */
.marquee-rule {
  border: none;
  border-top: 2px solid var(--ink);
  margin: var(--s-6) 0;
  max-width: var(--measure-wide);
}

/* Pull quote, oversized. For one moment per long page. */
.pullquote--lg {
  font-family: 'Inter', system-ui, sans-serif;
  font-style: normal;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: var(--measure-wide);
  margin: var(--s-7) 0;
  text-wrap: balance;
}
.pullquote--lg::before,
.pullquote--lg::after { content: none; }
.pullquote--lg cite {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--mist);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: var(--s-3);
}

/* Editorial spread, for case studies and long-form pieces. */
.spread {
  display: grid;
  gap: var(--s-5);
  grid-template-columns: 1fr;
  max-width: var(--measure-max);
  margin: 0 auto;
}
@media (min-width: 900px) {
  .spread {
    grid-template-columns: 1fr 2fr;
    gap: var(--s-6);
    align-items: start;
  }
}
.spread__sidebar {
  font-size: var(--t-sm);
  color: var(--mist);
  letter-spacing: 0.04em;
  position: sticky;
  top: 6rem;
}
.spread__sidebar h5 {
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--mist);
  margin: 0 0 var(--s-1) 0;
  font-weight: 700;
}
.spread__sidebar p {
  font-size: var(--t-sm);
  color: var(--charcoal);
  margin: 0 0 var(--s-3) 0;
}

/* --- 17.5 Sitemap-page layout --------------------------------------
   Modeled after juliegood.com/sitemap. Each section reads as one
   thought: a heading (with a period), a short italic introduction,
   then a list of pages with bold link + a one-line description. */
.sm-section {
  border-top: 1px solid var(--rule-strong);
  padding: var(--s-5) 0;
  max-width: var(--measure-wide);
}
.sm-section:last-child { border-bottom: 1px solid var(--rule-strong); }
.sm-section h2 {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  letter-spacing: -0.015em;
  margin: 0 0 var(--s-1) 0;
  color: var(--ink);
}
.sm-section__intro {
  font-family: 'Source Serif Pro', Georgia, serif;
  font-style: italic;
  font-size: var(--t-lg);
  color: var(--charcoal);
  margin: 0 0 var(--s-4) 0;
  max-width: var(--measure-prose);
}
.sm-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure-wide);
}
.sm-list li {
  margin: 0;
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--rule);
}
.sm-list li:last-child { border-bottom: none; }
.sm-list a {
  display: inline-block;
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.sm-list a:hover {
  color: var(--teal);
  text-decoration-color: var(--teal);
}
.sm-list p {
  margin: 0.25rem 0 0 0;
  font-size: var(--t-sm);
  color: var(--graphite);
  line-height: 1.55;
  max-width: var(--measure-prose);
}

/* --- 17.6 Shop page ------------------------------------------------- */

/* Sticky category index at the top of the shop. */
.shop-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-2) 0;
  margin-bottom: var(--s-5);
}
.shop-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  max-width: var(--measure-max);
  margin: 0 auto;
  padding: 0 var(--s-3);
}
@media (min-width: 768px) {
  .shop-nav__inner { padding: 0 var(--s-5); }
}
.shop-nav a {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--charcoal);
  text-decoration: none;
  white-space: nowrap;
}
.shop-nav a:hover { color: var(--teal); }

.shop-section {
  padding: var(--s-5) 0;
  border-top: 1px solid var(--rule);
}
.shop-section:first-of-type { border-top: none; }
.shop-section__head {
  margin-bottom: var(--s-4);
}
.shop-section__head h2 {
  font-size: clamp(1.5rem, 3vw, var(--t-3xl));
  margin-bottom: var(--s-1);
}
.shop-section__head p {
  color: var(--graphite);
  font-size: var(--t-md);
  max-width: var(--measure-prose);
}

/* The product card grid. */
.shop-grid {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 600px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }

.shop-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.shop-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-2);
}
.shop-card__media {
  aspect-ratio: 3 / 2;
  background: var(--sand);
  overflow: hidden;
}
.shop-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shop-card__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, var(--teal-tint) 0%, var(--sand) 70%, var(--gold-tint) 100%);
  color: var(--teal-deep);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.shop-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: var(--s-3);
  flex: 1;
}
.shop-card__sku {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mist);
  margin: 0;
}
.shop-card__title {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.shop-card__price {
  font-size: var(--t-base);
  font-weight: 700;
  color: var(--teal);
  margin: 0;
}
.shop-card__desc {
  font-size: var(--t-sm);
  color: var(--graphite);
  line-height: 1.55;
  margin: 0 0 var(--s-2) 0;
  flex: 1;
}
.shop-card__cta {
  align-self: flex-start;
  display: inline-block;
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--paper);
  background: var(--teal);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background var(--duration) var(--ease);
}
.shop-card__cta:hover { background: var(--teal-deep); color: var(--paper); }

/* --- 18. Skip nav --------------------------------------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--s-2);
  background: var(--ink);
  color: var(--paper);
}

/* --- 19. Print styles ----------------------------------------------- */

@media print {
  .site-header, .site-footer, .btn-group, .skip-link { display: none; }
  body { background: white; color: black; font-size: 11pt; }
  a { color: black; text-decoration: underline; }
}

/* --- 19. Shop buy buttons + embedded contact form ------------------- */
.shop-card__cta-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
.shop-card__cta-row .shop-card__cta { align-self: auto; }
.shop-card__cta--buy { background: var(--gold, #b8860b); }
.shop-card__cta--buy:hover { background: var(--gold-deep, #8f6a09); color: var(--paper, #fff); }
.gcm-form-wrap { max-width: 640px; }
.gcm-form-wrap .contact-form label,
.gcm-form-wrap .jetpack-field-label { font-weight: 600; }
.gcm-form-wrap input[type="text"],
.gcm-form-wrap input[type="email"],
.gcm-form-wrap input[type="tel"],
.gcm-form-wrap select,
.gcm-form-wrap textarea {
  width: 100%;
  font: inherit;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rule, #d8d4c8);
  border-radius: 8px;
  background: var(--paper, #fff);
  color: var(--ink, #1F2421);
}
.gcm-form-wrap textarea { min-height: 8rem; resize: vertical; }
.gcm-form-wrap button[type="submit"], .gcm-form-wrap .wp-block-button__link {
  font: inherit; font-weight: 600;
  background: var(--teal, #0f8a7e); color: var(--paper, #fff);
  padding: 0.7rem 1.4rem; border: 0; border-radius: 8px; cursor: pointer;
}
.gcm-form-wrap button[type="submit"]:hover { background: var(--teal-deep, #0b6b62); }

/* --- 20. Fixed-line display headings --------------------------------
   A display heading holds the SAME authored line structure at every
   viewport. Each .hl span is one line; the font scales fluidly so the
   longest line always fits the container. --em-w is that longest
   line's width in em; --fs-max caps the size on wide screens. */
:root { --gutters: 3rem; }
@media (min-width: 768px) { :root { --gutters: 6rem; } }
.fixlines {
  text-wrap: unset;
  max-width: none;
  font-size: clamp(var(--fs-min, 1.125rem), calc((min(100vw, 78rem) - var(--gutters)) / var(--em-w, 20)), var(--fs-max, 3.5rem));
}
.hero-headline.fixlines { --fs-min: 1.5rem; }
.fixlines .hl { display: block; white-space: nowrap; }

/* --- 21. Column sanity ----------------------------------------------
   Text never sits in columns too narrow to read. Cards and text grids
   cap at two columns until the row is genuinely wide, and the widest
   card grids stop at three. */