/*! Glacier Precast — generated by tools/build-css.mjs. Do not edit.
 *  Edit the files in assets/css/ and re-run: node tools/build-css.mjs
 */

/* ═══ tokens/fonts.css ═══════════════════════════════════ */
/* Glacier Precast Concrete — Webfonts (self-hosted)
   Brand typefaces: Space Grotesk (display/headlines) + DM Sans (body).
   Both ship as variable fonts covering the full weight range in one file per
   subset, so the whole 300–700 scale costs two requests per family.
   The design system's Google Fonts @import is replaced here per the handoff. */

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --gpc-font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --gpc-font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* semantic aliases */
  --font-display: var(--gpc-font-display);
  --font-heading: var(--gpc-font-display);
  --font-body: var(--gpc-font-body);
  --font-ui: var(--gpc-font-body);
}

/* ═══ tokens/colors.css ═══════════════════════════════════ */
/* Glacier Precast Concrete — Color tokens
   Source: GPC Brand Guidelines (July 2025), page 16.
   Primary: Dark Green, Beige. Secondary: Mustard, Deep Plum (use sparingly). */
:root {
  /* ---- Brand core (exact brand hexes) ---- */
  --gpc-green: #293c3a;   /* Dark Green — primary anchor, PMS 316 */
  --gpc-beige: #dbd3b4;   /* Beige — primary light surface, PMS 5803 */
  --gpc-mustard: #ccb24d; /* Mustard — secondary accent, PMS 606 */
  --gpc-plum: #4b2836;    /* Deep Plum — secondary, use sparingly, PMS 229 */
  --gpc-black: #1c1c1a;   /* Brand black (warm near-black) */
  --gpc-white: #ffffff;

  /* ---- Green ramp (tints/shades of the anchor) ---- */
  --gpc-green-900: #16211f;
  --gpc-green-800: #1e2c2a;
  --gpc-green-700: #293c3a; /* base */
  --gpc-green-600: #34504d;
  --gpc-green-500: #476863;
  --gpc-green-300: #8ba49f;
  --gpc-green-100: #cdd8d5;

  /* ---- Beige / sand neutrals (paper stock feel) ---- */
  --gpc-sand-50:  #f7f4ea;  /* lightest paper */
  --gpc-sand-100: #efe9d6;
  --gpc-sand-200: #e4dcc2;
  --gpc-sand-300: #dbd3b4;  /* brand beige */
  --gpc-sand-400: #c9bf9b;
  --gpc-sand-500: #a99f7c;

  /* ---- Mustard ramp ---- */
  --gpc-mustard-600: #a98f34;
  --gpc-mustard-500: #ccb24d; /* base */
  --gpc-mustard-300: #e2cf88;

  /* ---- Plum ramp ---- */
  --gpc-plum-700: #351a25;
  --gpc-plum-500: #4b2836; /* base */
  --gpc-plum-300: #7a5464;

  /* ---- Neutral greys (for UI chrome, borders) ---- */
  --gpc-ink: #1c1c1a;
  --gpc-grey-700: #3d3f3c;
  --gpc-grey-500: #6c6f6a;
  --gpc-grey-400: #9a9c96;
  --gpc-grey-300: #c4c6bf;
  --gpc-grey-200: #e0e1db;
  --gpc-grey-100: #eef0ea;

  /* ================= Semantic aliases ================= */
  /* Surfaces */
  --surface-page: var(--gpc-sand-50);
  --surface-card: var(--gpc-white);
  --surface-raised: var(--gpc-white);
  --surface-sunken: var(--gpc-sand-100);
  --surface-inverse: var(--gpc-green-700);
  --surface-accent: var(--gpc-beige);

  /* Text */
  --text-strong: var(--gpc-green-700);
  --text-body: var(--gpc-green-700);
  --text-muted: var(--gpc-grey-500);
  --text-subtle: var(--gpc-grey-400);
  --text-inverse: var(--gpc-sand-50);
  --text-on-accent: var(--gpc-green-700);
  --text-link: var(--gpc-green-700);
  --text-link-hover: var(--gpc-mustard-600);

  /* Brand actions */
  --brand-primary: var(--gpc-green-700);
  --brand-primary-hover: var(--gpc-green-800);
  --brand-primary-active: var(--gpc-green-900);
  --brand-secondary: var(--gpc-mustard-500);
  --brand-secondary-hover: var(--gpc-mustard-600);
  --brand-accent: var(--gpc-mustard-500);
  --brand-emphasis: var(--gpc-plum-500);

  /* Borders / lines */
  --border-default: var(--gpc-grey-200);
  --border-strong: var(--gpc-green-700);
  --border-muted: var(--gpc-sand-200);
  --focus-ring: var(--gpc-mustard-500);

  /* Status (derived to sit in the warm/earthy palette) */
  --status-success: #4f6b3a;
  --status-warning: var(--gpc-mustard-600);
  --status-danger: #9a3324;
  --status-info: var(--gpc-green-600);
}

/* ═══ tokens/typography.css ═══════════════════════════════════ */
/* Glacier Precast Concrete — Typography scale
   Derived from Brand Guidelines p.17-18. Space Grotesk Bold for headlines,
   DM Sans Regular/Semibold for body. Print specs translated to a web scale. */
:root {
  /* weights */
  --fw-light: 300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* fluid-ish fixed scale (px) */
  --fs-display: 64px;   /* hero */
  --fs-h1: 44px;        /* Headline One — Space Grotesk Bold */
  --fs-h2: 15px;        /* Headline Two — ALL CAPS, wide tracking, eyebrow */
  --fs-h3: 26px;        /* Headline Three */
  --fs-quote: 34px;     /* Pull quote — Plum */
  --fs-lead: 20px;
  --fs-body: 17px;      /* base body */
  --fs-body-sm: 15px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* line heights */
  --lh-tight: 1.08; /* @kind font */
  --lh-heading: 1.12; /* @kind font */
  --lh-snug: 1.3; /* @kind font */
  --lh-body: 1.6; /* @kind font */
  --lh-relaxed: 1.7; /* @kind font */

  /* letter spacing (brand uses tight display, very wide caps) */
  --ls-display: -0.02em; /* @kind font */
  --ls-heading: -0.015em; /* @kind font */
  --ls-caps: 0.22em; /* @kind font */
  --ls-caps-sm: 0.12em; /* @kind font */
  --ls-body: 0em; /* @kind font */

  /* semantic type tokens */
  --text-eyebrow-size: var(--fs-h2); /* @kind font */
  --text-eyebrow-spacing: var(--ls-caps); /* @kind font */
}

/* ═══ tokens/spacing.css ═══════════════════════════════════ */
/* Glacier Precast Concrete — Spacing, radius, shadow, layout tokens
   The brand reads clean, honest, structural — modest radii, crisp edges,
   restrained shadows. Concrete-inspired: solid, grounded, precise. */
:root {
  /* spacing scale (4px base) */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* radii — the brand is angular/architectural; keep corners crisp */
  --radius-none: 0;
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* borders */
  --border-width: 1px; /* @kind spacing */
  --border-width-thick: 2px; /* @kind spacing */

  /* shadows — subtle, earthy, low-spread (no glossy elevation) */
  --shadow-xs: 0 1px 2px rgba(28,28,26,0.06);
  --shadow-sm: 0 1px 3px rgba(28,28,26,0.08), 0 1px 2px rgba(28,28,26,0.04);
  --shadow-md: 0 4px 12px rgba(28,28,26,0.10);
  --shadow-lg: 0 12px 30px rgba(28,28,26,0.14);
  --shadow-inset: inset 0 0 0 1px rgba(41,60,58,0.08);

  /* layout */
  --container-sm: 640px;
  --container-md: 860px;
  --container-lg: 1120px;
  --container-xl: 1320px;
  --gutter: var(--space-6);

  /* transitions — quick, no bounce; honest and precise */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 320ms; /* @kind other */
}

/* ═══ base/reset.css ═══════════════════════════════════ */
/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header (74px) + utility strip (38px) clearance for #anchor jumps
     that arrive without JS. The JS smooth-scroll uses the spec's -130px. */
  scroll-padding-top: 130px;
}

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

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

a { color: var(--text-link); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; }

/* Component classes set display, which outranks the UA [hidden] rule at equal
   specificity — so filtered-out catalog rows and cards would stay visible. */
[hidden] { display: none !important; }

::selection { background: var(--gpc-mustard-300); color: var(--gpc-green-900); }

/* Scrollbar — 10px, thumb grey-300, 8px radius (DESIGN-SPEC § Interactions) */
* { scrollbar-width: thin; scrollbar-color: var(--gpc-grey-300) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gpc-grey-300); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ base/typography.css ═══════════════════════════════════ */
/* ── Typography ─────────────────────────────────────────────────────────────
   Space Grotesk for every heading, button, nav item, label, table header,
   eyebrow and stat value. DM Sans for body copy, table cells and inputs.
   No exceptions in the design. */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;                 /* tone preset: display weight 700 */
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

h1, h2 { text-wrap: balance; }

p { text-wrap: pretty; }

strong, b { font-weight: 700; }

/* ── Shared display sizes ───────────────────────────────────────────────── */

.gpc-h1        { font-size: clamp(34px, 5vw, 58px); line-height: 1.03; letter-spacing: -0.025em; }
.gpc-h1--home  { font-size: clamp(40px, 6.4vw, 74px); line-height: 1.02; }
.gpc-h1--spoke { font-size: clamp(32px, 4.6vw, 52px); line-height: 1.04; }

.gpc-h2         { font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.02em; }
.gpc-h2--cta    { font-size: clamp(28px, 4vw, 46px); }
.gpc-h2--feature{ font-size: clamp(30px, 4vw, 46px); line-height: 1.05; }
.gpc-h2--areas  { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; }

/* ── Eyebrow / kicker ───────────────────────────────────────────────────── */

.gpc-eyebrow {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gpc-mustard-600);
}
.gpc-eyebrow--on-dark { color: var(--gpc-mustard-500); }
.gpc-eyebrow--sm { font-size: 11.5px; }

/* ── Body copy ──────────────────────────────────────────────────────────── */

.gpc-lead {
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 400;
  line-height: 1.55;
}

.gpc-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
}

.gpc-prose > * + * { margin-top: 1em; }
.gpc-prose a { text-decoration: underline; text-underline-offset: 2px; }
.gpc-prose a:hover { color: var(--text-link-hover); }
.gpc-prose ul, .gpc-prose ol { padding-left: 1.25em; }
.gpc-prose li { list-style: disc; margin-top: 0.4em; }
.gpc-prose ol li { list-style: decimal; }

/* ── On-dark inversions ─────────────────────────────────────────────────── */

.gpc-on-dark,
.gpc-on-dark h1, .gpc-on-dark h2, .gpc-on-dark h3 { color: var(--gpc-sand-50); }
.gpc-on-dark p { color: var(--gpc-sand-200); }

/* ═══ base/a11y.css ═══════════════════════════════════ */
/* ── Accessibility ──────────────────────────────────────────────────────── */

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible focus everywhere — never outline:none (DESIGN-SPEC § Accessibility) */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 3px;
}

.gpc-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--gpc-green-700);
  color: var(--gpc-sand-50);
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: 8px;
  transition: top 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-skip-link:focus { top: 12px; }

/* Minimum 44px touch target on mobile (DESIGN-SPEC § Responsive) */
@media (max-width: 980px) {
  .gpc-touch-target { min-height: 44px; min-width: 44px; }
}

/* ═══ layout/container.css ═══════════════════════════════════ */
/* ── Containers ─────────────────────────────────────────────────────────── */

.gpc-container,
.gpc-container-wide {
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 40px);
  width: 100%;
}
.gpc-container      { max-width: 1180px; }
.gpc-container-wide { max-width: 1280px; }

/* ═══ layout/bands.css ═══════════════════════════════════ */
/* ── Section bands ──────────────────────────────────────────────────────────
   Alternating surfaces: --surface-page (#f7f4ea) and --gpc-sand-100 (#efe9d6). */

.gpc-band { padding: clamp(56px, 8vw, 96px) 0; }
.gpc-band--tight { padding: clamp(48px, 6vw, 72px) 0; }
.gpc-band--tight-lg { padding: clamp(48px, 7vw, 84px) 0; }

.gpc-band--page   { background: var(--surface-page); }
.gpc-band--sunken { background: var(--gpc-sand-100); }
.gpc-band--green  { background: var(--gpc-green-700); }
.gpc-band--green-800 { background: var(--gpc-green-800); }
.gpc-band--beige  { background: var(--gpc-beige); }

.gpc-band--bordered { border-bottom: 1px solid var(--border-muted); }

/* Bands that paint their own padding through the wide container */
.gpc-band--flush { padding: 0; }
.gpc-band--flush > .gpc-container-wide { padding-block: clamp(56px, 8vw, 92px); }

/* ── G-pattern watermark ────────────────────────────────────────────────────
   Decorative only — a CSS background, so it stays out of the a11y tree. */

.gpc-watermark { position: relative; overflow: hidden; }
.gpc-watermark > * { position: relative; z-index: 1; }
.gpc-watermark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--gpc-watermark-src);
  background-repeat: no-repeat;
  background-position: var(--gpc-watermark-pos, right -60px bottom -40px);
  background-size: var(--gpc-watermark-size, 220px);
  opacity: var(--gpc-watermark-opacity, 0.07);
  pointer-events: none;
}

/* ═══ layout/grid.css ═══════════════════════════════════ */
/* ── Grids & splits ─────────────────────────────────────────────────────────
   Auto-fill/auto-fit grids reflow on their own — the minmax() values below
   are the design's reflow points and must not drift. */

.gpc-split {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: var(--gpc-split-cols, 1fr 1fr);
  align-items: var(--gpc-split-align, center);
}

/* 920px: every two-column split collapses (DESIGN-SPEC § Responsive) */
@media (max-width: 920px) {
  .gpc-split { grid-template-columns: 1fr; }
}

.gpc-grid { display: grid; gap: var(--gpc-grid-gap, 20px); }

.gpc-grid--products    { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.gpc-grid--applications{ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.gpc-grid--specs       { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.gpc-grid--sizes       { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gpc-grid--capability  { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.gpc-grid--siblings    { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gpc-grid--reviews     { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.gpc-grid--certs       { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.gpc-grid--related     { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.gpc-grid--team        { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.gpc-grid--posts       { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px; }

/* Child-page cards sit in fixed thirds. A single open position should read as
   one card in a three-column layout, not a full-width banner — which is what
   auto-fit does when it collapses the empty tracks. */
.gpc-grid--children    { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 920px) { .gpc-grid--children { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gpc-grid--children { grid-template-columns: 1fr; } }
.gpc-grid--projects    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.gpc-grid--steps       { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.gpc-grid--stats       { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }

/* Two-up grids used for benefits, downloads and checklists */
.gpc-grid--two { grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .gpc-grid--two { grid-template-columns: 1fr; } }

.gpc-stack { display: flex; flex-direction: column; }
.gpc-row   { display: flex; align-items: center; }
.gpc-wrap  { flex-wrap: wrap; }

/* ═══ components/icon.css ═══════════════════════════════════ */
/* ── Icons ──────────────────────────────────────────────────────────────────
   Sprite symbols on a 24px grid, 1.75px stroke, currentColor. */

.gpc-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.gpc-icon--filled { fill: currentColor; stroke: none; }

/* ═══ components/buttons.css ═══════════════════════════════════ */
/* ── Buttons ────────────────────────────────────────────────────────────── */

.gpc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  border-radius: 8px;
  border: 0;
  cursor: pointer;
  text-align: center;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gpc-btn .gpc-icon { flex: none; }

/* Sizes */
.gpc-btn--sm { padding: 9px 15px;  font-size: 14px; }
.gpc-btn--md { padding: 13px 22px; font-size: 15px; }
.gpc-btn--lg { padding: 16px 28px; font-size: 16px; }
.gpc-btn--sm .gpc-icon { width: 17px; height: 17px; }
.gpc-btn--md .gpc-icon { width: 17px; height: 17px; }
.gpc-btn--lg .gpc-icon { width: 19px; height: 19px; }

/* Variants */
.gpc-btn--primary { background: var(--gpc-green-700); color: var(--gpc-sand-50); }
.gpc-btn--primary:hover { background: var(--gpc-green-800); color: var(--gpc-sand-50); }

.gpc-btn--secondary { background: var(--gpc-mustard-500); color: var(--gpc-green-900); }
.gpc-btn--secondary:hover { background: var(--gpc-mustard-600); color: var(--gpc-green-900); }

.gpc-btn--outline {
  background: transparent;
  color: var(--gpc-green-700);
  box-shadow: inset 0 0 0 1.5px var(--gpc-green-700);
}
.gpc-btn--outline:hover { background: var(--gpc-sand-100); color: var(--gpc-green-700); }

.gpc-btn--ghost-light {
  background: rgba(247, 244, 234, 0.09);
  color: var(--gpc-sand-50);
  box-shadow: inset 0 0 0 1.5px rgba(247, 244, 234, 0.4);
}
.gpc-btn--ghost-light:hover { background: rgba(247, 244, 234, 0.16); color: var(--gpc-sand-50); }

.gpc-btn--solid-light { background: var(--gpc-sand-50); color: var(--gpc-green-800); }
.gpc-btn--solid-light:hover { background: var(--gpc-sand-100); color: var(--gpc-green-800); }

.gpc-btn--block { width: 100%; }

/* Text link with trailing arrow — used on cards */
.gpc-textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--gpc-green-700);
}
.gpc-textlink .gpc-icon { width: 15px; height: 15px; }

.gpc-btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ═══ components/cards.css ═══════════════════════════════════ */
/* ── Card base ──────────────────────────────────────────────────────────── */

.gpc-card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(28, 28, 26, 0.05);
}

.gpc-card-hover { transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.gpc-card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 32px -20px rgba(28, 28, 26, 0.30);
  border-color: var(--gpc-green-300);
}

@media (prefers-reduced-motion: reduce) {
  .gpc-card-hover:hover { transform: none; }
}

/* ── Icon tiles ─────────────────────────────────────────────────────────────
   The recurring square/circle behind an icon. Size and colour set per use. */

.gpc-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 8px;
  width: var(--gpc-tile-size, 40px);
  height: var(--gpc-tile-size, 40px);
  background: var(--gpc-tile-bg, var(--gpc-sand-100));
  color: var(--gpc-tile-fg, var(--gpc-green-700));
}
.gpc-tile--round { border-radius: 999px; }
.gpc-tile--green { --gpc-tile-bg: var(--gpc-green-700); --gpc-tile-fg: var(--gpc-mustard-500); }
.gpc-tile--green-100 { --gpc-tile-bg: var(--gpc-green-100); --gpc-tile-fg: var(--gpc-green-700); }
.gpc-tile--plum { --gpc-tile-bg: var(--gpc-plum-500); --gpc-tile-fg: var(--gpc-sand-50); }

/* ── Badges & pills ─────────────────────────────────────────────────────── */

.gpc-badge-new {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
  font-family: var(--font-display);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gpc-pill-segment {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gpc-sand-100);
  color: var(--gpc-green-600);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gpc-badge-capacity {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--gpc-green-700);
  color: var(--gpc-sand-50);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.gpc-badge-load {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--gpc-green-100);
  color: var(--gpc-green-700);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Check card (benefits, what-to-know, capabilities) ───────────────────── */

.gpc-check-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}
.gpc-check-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--gpc-green-100);
  color: var(--gpc-green-700);
}
.gpc-check-card__mark .gpc-icon { width: 14px; height: 14px; }
.gpc-check-card__text { font-size: 14.5px; line-height: 1.45; }

.gpc-capability-card { padding: 18px 20px; }
.gpc-capability-card .gpc-check-card__mark { width: 30px; height: 30px; }
.gpc-capability-card .gpc-check-card__mark .gpc-icon { width: 16px; height: 16px; }
.gpc-capability-card .gpc-check-card__text {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
}

/* ═══ components/section-heading.css ═══════════════════════════════════ */
/* ── Section heading block ──────────────────────────────────────────────────
   Eyebrow → H2 → intro. Default max-width 680px, left-aligned. */

.gpc-section-heading { max-width: var(--gpc-heading-max, 680px); }
.gpc-section-heading .gpc-eyebrow { margin-bottom: 14px; }
.gpc-section-heading__intro { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }

.gpc-section-heading--center { margin-inline: auto; text-align: center; }
.gpc-section-heading--on-dark .gpc-section-heading__intro { color: var(--gpc-sand-200); }

/* Header row: heading left, action button right */
.gpc-section-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* ═══ components/photo-block.css ═══════════════════════════════════ */
/* ── Photo block ────────────────────────────────────────────────────────────
   A real photo where one exists, a branded G-pattern placeholder where one
   does not. The placeholder is a genuine fallback, not a broken state. */

.gpc-photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--gpc-photo-radius, 8px);
  background: var(--gpc-sand-200);
}
.gpc-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tone preset: no photo filter */
}
.gpc-photo--square-top { border-top-left-radius: 0; border-top-right-radius: 0; }
.gpc-photo--flush { border-radius: 0; }

.gpc-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: var(--gpc-placeholder-bg, var(--gpc-sand-200));
  background-image: var(--gpc-placeholder-pattern);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 44%;
}
.gpc-photo-placeholder--green { --gpc-placeholder-bg: var(--gpc-green-700); }
.gpc-photo-placeholder--sand  { --gpc-placeholder-bg: var(--gpc-sand-300); }
.gpc-photo-placeholder--plum  { --gpc-placeholder-bg: var(--gpc-plum-500); }

/* Overlay chip on the hub spotlight image */
.gpc-photo__chip {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(22, 33, 31, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: var(--gpc-sand-50);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}
.gpc-photo__chip .gpc-icon { width: 15px; height: 15px; color: var(--gpc-mustard-500); }

/* ═══ components/breadcrumb.css ═══════════════════════════════════ */
/* ── Breadcrumb ─────────────────────────────────────────────────────────── */

.gpc-breadcrumb { font-size: 13.5px; }
.gpc-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.gpc-breadcrumb li { display: inline-flex; align-items: center; gap: 7px; }
.gpc-breadcrumb a { color: var(--text-muted); }
.gpc-breadcrumb a:hover { color: var(--gpc-green-700); }
.gpc-breadcrumb [aria-current='page'] { color: var(--text-strong); font-weight: 500; }
.gpc-breadcrumb__sep { color: var(--text-subtle); }
.gpc-breadcrumb__sep .gpc-icon { width: 13px; height: 13px; display: block; }

.gpc-breadcrumb--on-dark a { color: var(--gpc-sand-200); }
.gpc-breadcrumb--on-dark a:hover { color: var(--gpc-mustard-500); }
.gpc-breadcrumb--on-dark [aria-current='page'] { color: var(--gpc-sand-50); }
.gpc-breadcrumb--on-dark .gpc-breadcrumb__sep { color: rgba(219, 211, 180, 0.5); }

/* ═══ components/header.css ═══════════════════════════════════ */
/* ── Site header ────────────────────────────────────────────────────────── */

.gpc-header {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Utility strip */
.gpc-utility {
  height: 38px;
  background: var(--gpc-green-900);
  color: var(--gpc-sand-200);
  font-size: 13px;
}
.gpc-utility > .gpc-container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 100%;
}
.gpc-utility__region { color: var(--gpc-sand-200); }
.gpc-utility__links { display: flex; align-items: center; gap: 20px; }
.gpc-utility__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gpc-sand-100);
  font-weight: 600;
}
.gpc-utility__link:hover { color: var(--gpc-mustard-500); }
.gpc-utility__link .gpc-icon { width: 14px; height: 14px; color: var(--gpc-mustard-500); }

@media (max-width: 1040px) {
  .gpc-utility__region,
  .gpc-utility__link--email { display: none; }
  .gpc-utility > .gpc-container-wide { justify-content: flex-end; }
}

/* Main bar */
.gpc-mainbar {
  background: rgba(247, 244, 234, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-muted);
}
.gpc-mainbar > .gpc-container-wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 74px;
}
.gpc-logo { display: inline-flex; align-items: center; }
.gpc-logo img, .gpc-logo svg { height: 36px; width: auto; }

/* Primary nav */
.gpc-nav { display: flex; align-items: center; gap: 2px; }
.gpc-nav__link,
.gpc-nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 11px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--gpc-grey-500);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-nav__link:hover,
.gpc-nav__toggle:hover,
.gpc-nav__toggle[aria-expanded='true'] {
  background: var(--gpc-sand-100);
  color: var(--gpc-green-700);
}
.gpc-nav__item--current > .gpc-nav__link,
.gpc-nav__item--current > .gpc-nav__toggle {
  background: var(--gpc-sand-200);
  color: var(--gpc-green-700);
}
.gpc-nav__toggle .gpc-icon { width: 15px; height: 15px; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.gpc-nav__toggle[aria-expanded='true'] .gpc-icon { transform: rotate(180deg); }
.gpc-nav__cta { margin-left: 12px; }

/* ── Mega menu ──────────────────────────────────────────────────────────── */

.gpc-megamenu {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--gpc-white);
  border-bottom: 1px solid var(--border-default);
  box-shadow: 0 20px 40px -20px rgba(28, 28, 26, 0.35);
  padding: 28px clamp(20px, 4vw, 40px) 26px;
  display: none;
}
.gpc-megamenu[data-open='true'] { display: block; }
.gpc-megamenu__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}
.gpc-megamenu__col-heading { margin-bottom: 14px; }
.gpc-megamenu__item {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 11px 12px;
  border-radius: 8px;
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-megamenu__item:hover { background: var(--gpc-sand-100); }
.gpc-megamenu__item .gpc-tile { --gpc-tile-size: 38px; }
.gpc-megamenu__item .gpc-tile .gpc-icon { width: 18px; height: 18px; }
.gpc-megamenu__title {
  display: block;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--gpc-green-700);
  line-height: 1.3;
}
.gpc-megamenu__tagline {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gpc-grey-400);
}

@media (max-width: 1120px) {
  .gpc-megamenu__inner { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

.gpc-hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--gpc-green-700);
}
.gpc-hamburger .gpc-icon { width: 26px; height: 26px; }

@media (max-width: 980px) {
  .gpc-nav { display: none; }
  .gpc-hamburger { display: inline-flex; }
}

.gpc-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--surface-page);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 200ms;
}
.gpc-mobile-menu[data-open='true'] { visibility: visible; opacity: 1; }
.gpc-mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  padding: 0 clamp(20px, 4vw, 40px);
  border-bottom: 1px solid var(--border-muted);
  flex: none;
}
.gpc-mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--gpc-green-700);
}
.gpc-mobile-menu__close .gpc-icon { width: 26px; height: 26px; }
.gpc-mobile-menu__body {
  flex: 1;
  overflow-y: auto;
  padding: 24px clamp(20px, 4vw, 40px) 40px;
}
.gpc-mobile-menu__body .gpc-eyebrow { margin-bottom: 10px; }
.gpc-mobile-menu__product {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 10px;
  min-height: 44px;
  border-bottom: 1px solid var(--gpc-sand-200);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--gpc-green-700);
}
.gpc-mobile-menu__product .gpc-icon { width: 19px; height: 19px; flex: none; }
.gpc-mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 13px 10px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--gpc-green-700);
}
.gpc-mobile-menu__links { margin-top: 22px; }
.gpc-mobile-menu__cta { margin-top: 24px; }

body.gpc-menu-open { overflow: hidden; }

/* ═══ components/footer.css ═══════════════════════════════════ */
/* ── Site footer ────────────────────────────────────────────────────────── */

.gpc-footer {
  background: var(--gpc-green-900);
  color: var(--gpc-sand-100);
}
.gpc-footer > .gpc-container-wide { padding-block: 58px 30px; }

.gpc-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 920px) { .gpc-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .gpc-footer__grid { grid-template-columns: 1fr; } }

.gpc-footer__logo img, .gpc-footer__logo svg { height: 38px; width: auto; }
.gpc-footer__blurb {
  margin-top: 18px;
  max-width: 300px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--gpc-sand-200);
}
.gpc-footer__nap { margin-top: 22px; line-height: 1.9; }
.gpc-footer__nap-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; }
.gpc-footer__nap-row .gpc-icon { width: 15px; height: 15px; color: var(--gpc-mustard-500); flex: none; margin-top: 6px; }
.gpc-footer__nap-row a { color: var(--gpc-sand-100); }
.gpc-footer__nap-row a:hover { color: var(--gpc-mustard-500); }

.gpc-footer__heading {
  margin-bottom: 15px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gpc-mustard-500);
}
.gpc-footer__links li + li { margin-top: 9px; }
.gpc-footer__links a { font-size: 14px; color: var(--gpc-sand-100); }
.gpc-footer__links a:hover { color: var(--gpc-mustard-500); }

.gpc-footer__newsletter { margin-top: 22px; }

/* Service areas sit in a wide row under the columns rather than a fifth
   column: city names are short and many, so they read better wrapped inline,
   and the 1.5fr 1fr 1fr 1fr grid stays as designed however many cities exist. */
.gpc-footer__areas {
  margin-top: 44px;
  padding-top: 26px;
  border-top: 1px solid rgba(219, 211, 180, 0.18);
}
.gpc-footer__areas .gpc-footer__heading a { color: inherit; }
.gpc-footer__areas .gpc-footer__heading a:hover { color: var(--gpc-sand-100); }
.gpc-footer__areas-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.gpc-footer__areas-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--gpc-sand-100);
}
.gpc-footer__areas-list a:hover { color: var(--gpc-mustard-500); }
.gpc-footer__areas-list .gpc-icon { width: 15px; height: 15px; color: var(--gpc-mustard-500); flex: none; }

.gpc-footer__legal {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid rgba(219, 211, 180, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.gpc-footer__legal-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; }
.gpc-footer__copyright { font-size: 13px; color: var(--gpc-sand-300); }
.gpc-footer__credit { font-size: 13px; color: var(--gpc-sand-300); }
.gpc-footer__credit a {
  color: var(--gpc-sand-100);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(219, 211, 180, 0.4);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              text-decoration-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-footer__credit a:hover {
  color: var(--gpc-mustard-500);
  text-decoration-color: var(--gpc-mustard-500);
}
.gpc-footer__social { display: flex; align-items: center; gap: 10px; }
.gpc-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(219, 211, 180, 0.3);
  color: var(--gpc-sand-100);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-footer__social a:hover {
  background: var(--gpc-mustard-500);
  border-color: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
}
.gpc-footer__social .gpc-icon { width: 17px; height: 17px; }

/* ═══ components/hero.css ═══════════════════════════════════ */
/* ── Homepage video hero ────────────────────────────────────────────────── */

.gpc-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(560px, 80vh, 780px);
  overflow: hidden;
  background: var(--gpc-green-900) center / cover no-repeat;
}
.gpc-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Ken Burns stand-in — remove once the real MP4 lands. */
.gpc-hero--kenburns .gpc-hero__media {
  transform-origin: 60% 50%;
  animation: gpc-kenburns 28s ease-in-out infinite alternate;
}
@keyframes gpc-kenburns {
  from { transform: scale(1.03) translateY(0); }
  to   { transform: scale(1.13) translateY(-1.5%); }
}
@media (prefers-reduced-motion: reduce) {
  .gpc-hero--kenburns .gpc-hero__media { animation: none; }
}

/* Two stacked scrims — tone preset scrim 0.5 */
.gpc-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
/* Alpha scales off --gpc-hero-scrim (Settings → Homepage → Overlay darkness).
   The default 0.5 reproduces the design's values exactly: 0.5 / 0.35 / 0.15
   across the side scrim and 0.65 on the foot. */
.gpc-hero__scrim--side {
  background: linear-gradient(
    90deg,
    rgb(22 33 31 / calc(var(--gpc-hero-scrim, 0.5) * 1))   0%,
    rgb(22 33 31 / calc(var(--gpc-hero-scrim, 0.5) * 0.7)) 45%,
    rgb(22 33 31 / calc(var(--gpc-hero-scrim, 0.5) * 0.3)) 100%
  );
}
.gpc-hero__scrim--foot {
  background: linear-gradient(
    0deg,
    rgb(22 33 31 / calc(var(--gpc-hero-scrim, 0.5) * 1.3)) 0%,
    transparent 40%
  );
}

.gpc-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-block: clamp(40px, 7vw, 88px);
}
.gpc-hero__inner { max-width: 720px; }
.gpc-hero h1 { margin-top: 18px; color: var(--gpc-sand-50); }
.gpc-hero__lead { margin-top: 22px; max-width: 560px; color: var(--gpc-sand-100); }
.gpc-hero .gpc-btn-row { margin-top: 32px; }

/* ── Spotlight hero (product hub) ───────────────────────────────────────── */

.gpc-spotlight {
  background: var(--surface-page);
  padding-top: 26px;
}
.gpc-spotlight__breadcrumb { margin-bottom: 22px; }
.gpc-spotlight__split {
  --gpc-split-cols: 1.18fr 0.82fr;
  --gpc-split-align: flex-start;
  padding-bottom: clamp(36px, 5vw, 64px);
}
.gpc-spotlight__main { height: clamp(340px, 46vw, 520px); }
.gpc-spotlight__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.gpc-spotlight__thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-default);
  background: var(--gpc-sand-200);
  padding: 0;
  width: 100%;
}
.gpc-spotlight__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gpc-spotlight__thumb[aria-current='true'] { border: 2px solid var(--gpc-green-700); }
.gpc-spotlight__thumb-more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 60, 58, 0.72);
  color: var(--gpc-sand-50);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}

.gpc-spotlight__rail { position: sticky; top: 130px; }
@media (max-width: 920px) { .gpc-spotlight__rail { position: static; } }
.gpc-spotlight__rail h1 { margin-top: 14px; }
.gpc-spotlight__blurb {
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--text-muted);
}
.gpc-spotlight__rail .gpc-btn-row { margin-top: 30px; gap: 13px; }

.gpc-facts { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; }
.gpc-fact { display: flex; align-items: center; gap: 12px; }
.gpc-fact .gpc-tile .gpc-icon { width: 20px; height: 20px; }
.gpc-fact__value { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.2; }
.gpc-fact__label { font-size: 12.5px; color: var(--text-subtle); }

/* ── Spoke hero ─────────────────────────────────────────────────────────── */

.gpc-hero--spoke {
  background: var(--gpc-green-800);
  --gpc-watermark-src: url('../logos/g-pattern/GPC_G_White.svg');
  --gpc-watermark-size: 200px;
  --gpc-watermark-pos: right -50px top -30px;
  --gpc-watermark-opacity: 0.06;
}
.gpc-hero--spoke > .gpc-container-wide {
  padding-block: 26px clamp(40px, 5vw, 60px);
}
.gpc-hero--spoke .gpc-breadcrumb { margin-bottom: 22px; }
.gpc-hero--spoke .gpc-split { --gpc-split-cols: 1.1fr 0.9fr; }
.gpc-hero--spoke h1 { margin-top: 14px; color: var(--gpc-sand-50); }
.gpc-hero--spoke .gpc-hero__intro {
  margin-top: 18px;
  max-width: 540px;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  color: var(--gpc-sand-100);
}
.gpc-hero--spoke .gpc-btn-row { margin-top: 28px; }
.gpc-hero--spoke .gpc-photo { height: 360px; }

/* ── Simple page hero (Custom Solutions / Engineering / About) ───────────── */

.gpc-page-hero { background: var(--surface-page); padding-top: 26px; }
.gpc-page-hero__split {
  --gpc-split-cols: 1fr 1.05fr;
  padding-bottom: clamp(36px, 5vw, 64px);
}
.gpc-page-hero h1 { margin-top: 14px; }
.gpc-page-hero__blurb {
  margin-top: 18px;
  max-width: 520px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
}
.gpc-page-hero .gpc-btn-row { margin-top: 28px; }
.gpc-page-hero .gpc-photo { height: 460px; }

/* ═══ components/home.css ═══════════════════════════════════ */
/* ── Stats strip ────────────────────────────────────────────────────────── */

.gpc-stats { background: var(--gpc-beige); }
.gpc-stats > .gpc-container-wide { padding-block: 26px; }
.gpc-stat__value {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gpc-green-700);
}
.gpc-stat__label { margin-top: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); }

.gpc-stats__badge { display: flex; align-items: center; gap: 12px; }
.gpc-stats__badge .gpc-tile { --gpc-tile-size: 42px; }
.gpc-stats__badge .gpc-tile .gpc-icon { width: 22px; height: 22px; }
.gpc-stats__badge-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gpc-green-800);
  max-width: 170px;
}

/* ── Product card ───────────────────────────────────────────────────────── */

.gpc-product-card { display: flex; flex-direction: column; overflow: hidden; }
.gpc-product-card__photo { height: 172px; }
.gpc-product-card__body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 20px 22px;
  flex: 1;
}
.gpc-product-card__head { display: flex; align-items: center; gap: 12px; }
.gpc-product-card__head .gpc-tile { --gpc-tile-size: 36px; }
.gpc-product-card__head .gpc-tile .gpc-icon { width: 19px; height: 19px; }
.gpc-product-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.gpc-product-card__tagline { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.gpc-product-card .gpc-textlink { margin-top: auto; padding-top: 4px; }

/* ── Wall Panels feature ────────────────────────────────────────────────── */

.gpc-panels-feature {
  background: var(--gpc-green-800);
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  min-height: 480px;
}
@media (max-width: 920px) { .gpc-panels-feature { grid-template-columns: 1fr; } }
.gpc-panels-feature__photo { min-height: 320px; }
.gpc-panels-feature__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 64px);
  color: var(--gpc-sand-50);
}
.gpc-panels-feature h2 { margin-top: 14px; color: var(--gpc-sand-50); }
.gpc-panels-feature__body p {
  margin-top: 18px;
  max-width: 460px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--gpc-sand-200);
}
.gpc-panels-feature__lines {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 26px;
}
@media (max-width: 480px) { .gpc-panels-feature__lines { grid-template-columns: 1fr; } }
.gpc-panels-feature__line { display: flex; align-items: center; gap: 10px; }
.gpc-panels-feature__line .gpc-icon { width: 19px; height: 19px; color: var(--gpc-mustard-500); flex: none; }
.gpc-panels-feature__line span {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
}
.gpc-panels-feature .gpc-btn { margin-top: 30px; align-self: flex-start; }

/* ── Engineering split ──────────────────────────────────────────────────── */

.gpc-engineering__split { --gpc-split-cols: 0.95fr 1.05fr; }
.gpc-engineering .gpc-photo { height: 420px; }
.gpc-engineering__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 26px 0 30px;
}
@media (max-width: 560px) { .gpc-engineering__list { grid-template-columns: 1fr; } }
.gpc-engineering__item { display: flex; align-items: flex-start; gap: 11px; }
.gpc-engineering__item .gpc-tile { --gpc-tile-size: 26px; border-radius: 999px; }
.gpc-engineering__item .gpc-tile .gpc-icon { width: 15px; height: 15px; }
.gpc-engineering__item span { font-size: 15px; font-weight: 500; line-height: 1.4; }

/* ── Areas we serve ─────────────────────────────────────────────────────── */

.gpc-areas {
  background: var(--gpc-green-700);
  --gpc-watermark-src: url('../logos/g-pattern/GPC_G_White.svg');
  --gpc-watermark-size: 220px;
  --gpc-watermark-pos: right -60px bottom -40px;
  --gpc-watermark-opacity: 0.07;
}
.gpc-areas > .gpc-container-wide { padding-block: clamp(56px, 8vw, 92px); }
.gpc-areas__split { --gpc-split-cols: 0.9fr 1.1fr; --gpc-split-align: start; gap: clamp(32px, 5vw, 72px); }
.gpc-areas h2 { margin-top: 14px; color: var(--gpc-sand-50); }
.gpc-areas__body {
  margin-top: 18px;
  max-width: 440px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--gpc-sand-200);
}
.gpc-areas .gpc-btn { margin-top: 28px; }
.gpc-areas__region {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(219, 211, 180, 0.2);
}
.gpc-areas__region-index {
  flex: none;
  width: 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--gpc-mustard-500);
}
.gpc-areas__region-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gpc-sand-50);
}
.gpc-areas__hubs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}
@media (max-width: 520px) { .gpc-areas__hubs { grid-template-columns: 1fr; } }
.gpc-areas__hub { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--gpc-sand-100); }
.gpc-areas__hub .gpc-icon { width: 15px; height: 15px; color: var(--gpc-mustard-500); flex: none; }

/* ── Certifications ─────────────────────────────────────────────────────── */

.gpc-cert-card { display: flex; align-items: flex-start; gap: 14px; padding: 22px; }
.gpc-cert-card .gpc-tile { --gpc-tile-size: 44px; }
.gpc-cert-card .gpc-tile .gpc-icon { width: 22px; height: 22px; }
.gpc-cert-card__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.3; }
.gpc-cert-card__detail { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }

/* ── Reviews ────────────────────────────────────────────────────────────── */

.gpc-reviews .gpc-section-heading { margin-bottom: 44px; --gpc-heading-max: 620px; }
.gpc-review-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.gpc-review-card__stars { display: flex; gap: 3px; color: var(--gpc-mustard-500); }
.gpc-review-card__stars .gpc-icon { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.gpc-review-card__quote { flex: 1; font-size: 15.5px; line-height: 1.6; }
.gpc-review-card__foot {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--gpc-sand-200);
}
.gpc-review-card__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--gpc-green-100);
  color: var(--gpc-green-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
}
.gpc-review-card__name { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.gpc-review-card__place { font-size: 12.5px; color: var(--text-subtle); }

/* ═══ components/subnav.css ═══════════════════════════════════ */
/* ── Sticky in-page sub-nav (product hub) ───────────────────────────────── */

.gpc-subnav {
  position: sticky;
  top: 112px;
  z-index: 40;
  background: rgba(247, 244, 234, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--gpc-sand-200);
  border-bottom: 1px solid var(--gpc-sand-200);
}
.gpc-subnav > .gpc-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 56px;
  overflow-x: auto;
}
.gpc-subnav__tabs { display: flex; align-items: center; gap: 2px; }
.gpc-subnav__tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--gpc-grey-500);
  border-bottom: 2px solid transparent;
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-subnav__tab:hover { color: var(--gpc-green-700); }
.gpc-subnav__tab[aria-current='true'] {
  color: var(--gpc-green-700);
  border-bottom-color: var(--gpc-mustard-500);
}
@media (max-width: 1040px) { .gpc-subnav__cta { display: none; } }

/* ═══ components/catalog.css ═══════════════════════════════════ */
/* ── Filterable spec catalog ────────────────────────────────────────────────
   The accordion replacement. The table is server-rendered in full and is the
   canonical markup; JS only shows and hides rows. */

.gpc-catalog .gpc-section-heading { --gpc-heading-max: 640px; margin-bottom: 32px; }

.gpc-catalog__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.gpc-catalog__facets { display: flex; flex-wrap: wrap; gap: 8px; }
.gpc-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  background: var(--gpc-white);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-chip:hover { border-color: var(--gpc-green-300); color: var(--gpc-green-700); }
.gpc-chip[aria-pressed='true'],
.gpc-chip--active {
  background: var(--gpc-green-700);
  border-color: var(--gpc-green-700);
  color: var(--gpc-sand-50);
}

.gpc-catalog__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gpc-catalog__search { position: relative; }
.gpc-catalog__search .gpc-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--gpc-grey-400);
  pointer-events: none;
}
.gpc-catalog__search input {
  width: 170px;
  padding: 9px 12px 9px 34px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  font-size: 14px;
}
.gpc-catalog__search input:focus {
  outline: none;
  border-color: var(--gpc-green-600);
  box-shadow: 0 0 0 3px rgba(41, 60, 58, 0.13);
}

.gpc-viewtoggle {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
  background: var(--gpc-white);
}
.gpc-viewtoggle button {
  padding: 9px 14px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background-color 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-viewtoggle button[aria-pressed='true'] { background: var(--gpc-green-700); color: var(--gpc-sand-50); }

.gpc-catalog__count { margin-bottom: 14px; font-size: 13px; color: var(--text-subtle); }

/* Table view */
.gpc-catalog__tablewrap {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  overflow-x: auto;
}
.gpc-catalog__table { width: 100%; min-width: 720px; border-collapse: collapse; }
.gpc-catalog__table caption {
  text-align: left;
  padding: 14px 16px 0;
  font-size: 13px;
  color: var(--text-subtle);
}
.gpc-catalog__table thead tr { background: var(--gpc-sand-100); }

/* Column headers only. These rules must NOT reach the row headers in tbody:
   the product-name cell is a <th scope="row">, and inheriting `uppercase` and
   `nowrap` there shouted the product names and pushed long ones straight under
   the next column instead of wrapping. */
.gpc-catalog__table thead th {
  padding: 13px 16px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gpc-green-700);
  white-space: nowrap;
}
.gpc-catalog__table thead th:last-child { text-align: right; }

/* Row header — a body cell that happens to be a <th>. */
.gpc-catalog__table tbody th {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
  color: var(--gpc-green-700);
  border-top: 1px solid var(--gpc-sand-200);
}
.gpc-catalog__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
.gpc-catalog__sort .gpc-icon { width: 14px; height: 14px; opacity: 0.4; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms; }
.gpc-catalog__sort[data-sort='asc']  .gpc-icon { opacity: 1; transform: rotate(180deg); }
.gpc-catalog__sort[data-sort='desc'] .gpc-icon { opacity: 1; }
.gpc-catalog__table td {
  padding: 14px 16px;
  font-size: 14.5px;
  vertical-align: top;
  border-top: 1px solid var(--gpc-sand-200);
}
.gpc-catalog__table tbody tr:nth-child(even) { background: var(--surface-page); }
.gpc-catalog__table td:last-child { text-align: right; }
.gpc-catalog__name { font-family: var(--font-display); font-weight: 600; color: var(--gpc-green-700); }
.gpc-catalog__table tbody th { max-width: 52ch; }
.gpc-catalog__note {
  display: block;
  margin-top: 4px;
  max-width: 46ch;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
}
.gpc-spec-card__notes { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.gpc-catalog__dims { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.gpc-catalog__drawing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-link);
}
.gpc-catalog__drawing .gpc-icon { width: 15px; height: 15px; }
.gpc-catalog__drawing:hover { color: var(--text-link-hover); }

/* A product can carry several drawings — stack them in the cell. */
.gpc-catalog__drawings,
.gpc-spec-card__drawings {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.gpc-catalog__table td:last-child { white-space: nowrap; }
.gpc-spec-card__drawings { align-items: flex-start; }
.gpc-spec-card__filesize { color: var(--text-subtle); font-weight: 400; }

/* Card view */
.gpc-catalog__cards { display: none; }
.gpc-catalog[data-view='cards'] .gpc-catalog__tablewrap { display: none; }
.gpc-catalog[data-view='cards'] .gpc-catalog__cards { display: grid; }

.gpc-spec-card { display: flex; flex-direction: column; gap: 13px; padding: 20px; }
.gpc-spec-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gpc-spec-card__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.3; }
.gpc-spec-card__uses { display: flex; flex-wrap: wrap; gap: 6px; }
.gpc-spec-card__use {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gpc-sand-100);
  color: var(--gpc-green-600);
  font-size: 11.5px;
  font-weight: 600;
}
.gpc-spec-card__rows { border-top: 1px solid var(--gpc-sand-200); padding-top: 13px; }
.gpc-spec-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
}
.gpc-spec-card__row + .gpc-spec-card__row { margin-top: 7px; }
.gpc-spec-card__row dt { color: var(--text-muted); }
.gpc-spec-card__row dd { margin: 0; font-weight: 600; text-align: right; }

/* Empty state — not in the prototype, required by the handoff */
.gpc-catalog__empty {
  display: none;
  padding: 40px 24px;
  text-align: center;
  border: 1px dashed var(--gpc-sand-400);
  border-radius: 8px;
  background: var(--gpc-white);
}
.gpc-catalog[data-empty='true'] .gpc-catalog__empty { display: block; }
.gpc-catalog[data-empty='true'] .gpc-catalog__tablewrap,
.gpc-catalog[data-empty='true'] .gpc-catalog__cards { display: none; }
.gpc-catalog__empty p { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
.gpc-catalog__empty button {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Recommended sizes (spoke) */
.gpc-size-card { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; }
.gpc-size-card .gpc-badge-capacity { padding: 4px 10px; }
.gpc-size-card__name { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.gpc-size-card__meta { font-size: 13.5px; color: var(--text-muted); }

/* ═══ components/product.css ═══════════════════════════════════ */
/* ── Overview ───────────────────────────────────────────────────────────── */

.gpc-overview__split { --gpc-split-cols: 0.85fr 1.15fr; --gpc-split-align: start; }

/* ── Applications grid (spoke links) ────────────────────────────────────── */

.gpc-application-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; }
.gpc-application-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gpc-application-card__head .gpc-tile { --gpc-tile-size: 46px; }
.gpc-application-card__head .gpc-tile .gpc-icon { width: 23px; height: 23px; }
.gpc-application-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.25; }
.gpc-application-card__blurb { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); flex: 1; }

/* ── Downloads ──────────────────────────────────────────────────────────── */

.gpc-downloads__split { --gpc-split-cols: 0.85fr 1.15fr; --gpc-split-align: start; }
.gpc-downloads__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 620px) { .gpc-downloads__grid { grid-template-columns: 1fr; } }
.gpc-download-card { display: flex; align-items: center; gap: 13px; padding: 17px 18px; }
.gpc-download-card .gpc-tile { --gpc-tile-size: 40px; }
.gpc-download-card .gpc-tile .gpc-icon { width: 19px; height: 19px; }
.gpc-download-card__title { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.gpc-download-card__meta { margin-top: 3px; font-size: 12.5px; color: var(--text-subtle); }

/* ── FAQ accordion ──────────────────────────────────────────────────────── */

.gpc-faq__split { --gpc-split-cols: 0.8fr 1.2fr; --gpc-split-align: start; }
.gpc-faq__list { display: flex; flex-direction: column; gap: 10px; }
.gpc-faq__item {
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  overflow: hidden;
}
.gpc-faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 16.5px;
  font-weight: 600;
  color: var(--gpc-green-700);
  list-style: none;
  cursor: pointer;
}
.gpc-faq__trigger::-webkit-details-marker { display: none; }
.gpc-faq__trigger .gpc-icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--gpc-green-600);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-faq__item[open] .gpc-faq__trigger .gpc-icon { transform: rotate(180deg); }
.gpc-faq__panel {
  padding: 0 20px 20px;
  max-width: 760px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-muted);
}

/* ── Related products ───────────────────────────────────────────────────── */

.gpc-related .gpc-section-heading { margin-bottom: 32px; }
.gpc-related-card__photo { height: 150px; }
.gpc-related-card__body { padding: 18px; }
.gpc-related-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; }
.gpc-related-card__tagline { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* ── Sibling spokes ─────────────────────────────────────────────────────── */

.gpc-sibling-card { display: flex; align-items: center; gap: 12px; padding: 18px; }
.gpc-sibling-card .gpc-tile { --gpc-tile-size: 40px; }
.gpc-sibling-card .gpc-tile .gpc-icon { width: 20px; height: 20px; }
.gpc-sibling-card__label { font-family: var(--font-display); font-size: 15px; font-weight: 600; line-height: 1.3; }

/* ── How to order steps ─────────────────────────────────────────────────── */

.gpc-step-card { padding: 26px; }
.gpc-step-card__num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gpc-mustard-600);
}
.gpc-step-card__title { margin-top: 10px; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25; }
.gpc-step-card__body { margin-top: 10px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }

/* ── Project types ──────────────────────────────────────────────────────── */

.gpc-project-card { display: flex; align-items: flex-start; gap: 14px; padding: 24px; }
.gpc-project-card .gpc-tile { --gpc-tile-size: 44px; }
.gpc-project-card .gpc-tile .gpc-icon { width: 22px; height: 22px; }
.gpc-project-card__title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.gpc-project-card__body { margin-top: 5px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }

/* ═══ components/forms.css ═══════════════════════════════════ */
/* ── Form fields (design-system baseline) ───────────────────────────────────
   These rules define the look; forms-plugins.css maps FluentForms and
   Gravity Forms markup onto it so both plugins render identically. */

.gpc-field { display: block; }
.gpc-field + .gpc-field { margin-top: 14px; }

.gpc-label,
.gpc-form label {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gpc-green-700);
}
.gpc-required { color: var(--status-danger); }

.gpc-input,
.gpc-form input[type='text'],
.gpc-form input[type='email'],
.gpc-form input[type='tel'],
.gpc-form input[type='url'],
.gpc-form input[type='number'],
.gpc-form input[type='search'],
.gpc-form input[type='date'],
.gpc-form select,
.gpc-form textarea {
  display: block;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-input::placeholder,
.gpc-form ::placeholder { color: var(--text-subtle); }

.gpc-input:focus,
.gpc-form input:focus,
.gpc-form select:focus,
.gpc-form textarea:focus {
  border-color: var(--gpc-green-600);
  box-shadow: 0 0 0 3px rgba(41, 60, 58, 0.13);
}

.gpc-form textarea { min-height: 120px; resize: vertical; }

.gpc-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 600px) { .gpc-field-row { grid-template-columns: 1fr; } }

/* ── Chip-style multi-select ────────────────────────────────────────────────
   Applied to a checkbox group by adding `gpc-chips` to the field's CSS class
   in the form builder. Replaces the old 14-item checkbox list. */

.gpc-chips-group { display: flex; flex-wrap: wrap; gap: 8px; }
.gpc-chip-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid var(--border-default);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 38px;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-chip-option:hover { border-color: var(--gpc-green-300); color: var(--gpc-green-700); }
.gpc-chip-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.gpc-chip-option:has(input:checked) {
  background: var(--gpc-green-700);
  border-color: var(--gpc-green-700);
  color: var(--gpc-sand-50);
}
.gpc-chip-option:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.gpc-chip-option::before {
  content: '';
  width: 0;
  height: 14px;
  opacity: 0;
  background: currentColor;
  -webkit-mask: var(--gpc-check-mask) center / contain no-repeat;
  mask: var(--gpc-check-mask) center / contain no-repeat;
  transition: width 140ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms;
}
.gpc-chip-option:has(input:checked)::before { width: 14px; opacity: 1; color: var(--gpc-mustard-500); }

:root {
  --gpc-check-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}

/* ── File attach control ────────────────────────────────────────────────── */

.gpc-file-trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1px dashed var(--gpc-sand-400);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms;
}
.gpc-file-trigger:hover { border-color: var(--gpc-green-600); background: var(--gpc-sand-50); }
.gpc-file-trigger .gpc-icon { width: 17px; height: 17px; color: var(--gpc-green-600); }

/* ── Inline expert form block ───────────────────────────────────────────── */

.gpc-expert {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--gpc-green-800);
  --gpc-watermark-src: url('../logos/g-pattern/GPC_G_White.svg');
  --gpc-watermark-size: 150px;
  --gpc-watermark-pos: right -30px top -30px;
  --gpc-watermark-opacity: 0.07;
}
.gpc-expert__inner {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 36px;
  align-items: center;
  padding: clamp(28px, 4vw, 48px);
}
@media (max-width: 920px) { .gpc-expert__inner { grid-template-columns: 1fr; } }
.gpc-expert h3 {
  margin-top: 14px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--gpc-sand-50);
}
.gpc-expert__body {
  margin-top: 16px;
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--gpc-sand-200);
}
.gpc-expert__phone {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gpc-sand-50);
}
.gpc-expert__phone .gpc-icon { width: 20px; height: 20px; color: var(--gpc-mustard-500); }
.gpc-expert__card {
  background: var(--gpc-white);
  border-radius: 8px;
  padding: 24px;
}

/* ── Success state ──────────────────────────────────────────────────────── */

.gpc-success-panel {
  padding: 32px;
  text-align: center;
  border-radius: 8px;
  background: rgba(247, 244, 234, 0.08);
  border: 1px solid rgba(219, 211, 180, 0.25);
}
.gpc-success-panel__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
}
.gpc-success-panel__mark .gpc-icon { width: 26px; height: 26px; }
.gpc-success-panel__title {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--gpc-sand-50);
}
.gpc-success-panel__body { margin-top: 8px; font-size: 14.5px; color: var(--gpc-sand-200); }

/* ── Embedded form band (job application, one-off forms) ────────────────── */

.gpc-embed-form { max-width: 760px; margin-inline: auto; }
.gpc-embed-form__card {
  margin-top: 28px;
  padding: clamp(24px, 3vw, 36px);
}
.gpc-embed-form .gpc-section-heading { --gpc-heading-max: 620px; }

/* ═══ components/forms-plugins.css ═══════════════════════════════════ */
/* ── Form plugin skin ───────────────────────────────────────────────────────
   Maps FluentForms and Gravity Forms markup onto the design system so both
   render identically. The plugin still owns validation, spam protection,
   notifications and entries — this file only changes how they look.

   To render a checkbox group as design-system chips, add `gpc-chips` to the
   field's CSS-class setting in the form builder. */

/* ═══ FluentForms ════════════════════════════════════════════════════════ */

.gpc-form-wrap .frm-fluent-form .ff-el-group { margin-bottom: 16px; }
.gpc-form-wrap .frm-fluent-form .ff-el-group:last-child { margin-bottom: 0; }

.gpc-form-wrap .frm-fluent-form .ff-el-input--label label {
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gpc-green-700);
  line-height: 1.3;
}
.gpc-form-wrap .frm-fluent-form .ff-el-is-required.asterisk-right label:after,
.gpc-form-wrap .frm-fluent-form .ff-el-is-required.asterisk-left label:before {
  color: var(--status-danger);
}

.gpc-form-wrap .frm-fluent-form .ff-el-form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  box-shadow: none;
  outline: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .frm-fluent-form .ff-el-form-control:focus {
  border-color: var(--gpc-green-600);
  box-shadow: 0 0 0 3px rgba(41, 60, 58, 0.13);
}
.gpc-form-wrap .frm-fluent-form textarea.ff-el-form-control { min-height: 120px; resize: vertical; }
.gpc-form-wrap .frm-fluent-form .ff-el-form-control::placeholder { color: var(--text-subtle); }

/* Submit */
.gpc-form-wrap .frm-fluent-form .ff-btn-submit,
.gpc-form-wrap .frm-fluent-form .ff-btn.ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 16px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .frm-fluent-form .ff-btn-submit:hover { background: var(--gpc-mustard-600); color: var(--gpc-green-900); }

/* Errors */
.gpc-form-wrap .frm-fluent-form .ff-el-is-error .ff-el-form-control { border-color: var(--status-danger); }
.gpc-form-wrap .frm-fluent-form .error.text-danger,
.gpc-form-wrap .frm-fluent-form .error-text {
  margin-top: 6px;
  font-size: 13px;
  color: var(--status-danger);
}

/* Checkbox / radio */
.gpc-form-wrap .frm-fluent-form .ff-el-form-check { margin-bottom: 8px; }
.gpc-form-wrap .frm-fluent-form .ff-el-form-check-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-body);
  line-height: 1.45;
  margin-bottom: 0;
}
.gpc-form-wrap .frm-fluent-form input[type='checkbox'],
.gpc-form-wrap .frm-fluent-form input[type='radio'] {
  accent-color: var(--gpc-green-700);
  width: 17px;
  height: 17px;
  margin-top: 1px;
  flex: none;
}

/* Chip treatment — opt in with the `gpc-chips` field class */
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-input--content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-form-check { margin: 0; }
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-form-check-label {
  padding: 8px 14px;
  min-height: 38px;
  align-items: center;
  border: 1.5px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-form-check-label:hover {
  border-color: var(--gpc-green-300);
  color: var(--gpc-green-700);
}
.gpc-form-wrap .frm-fluent-form .gpc-chips input[type='checkbox'],
.gpc-form-wrap .frm-fluent-form .gpc-chips input[type='radio'] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-form-check-label:has(input:checked) {
  background: var(--gpc-green-700);
  border-color: var(--gpc-green-700);
  color: var(--gpc-sand-50);
}
.gpc-form-wrap .frm-fluent-form .gpc-chips .ff-el-form-check-label:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* File upload */
.gpc-form-wrap .frm-fluent-form .ff_upload_btn.ff-btn,
.gpc-form-wrap .frm-fluent-form .ff-el-input--content .ff_upload_btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 16px;
  border: 1px dashed var(--gpc-sand-400);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
}
.gpc-form-wrap .frm-fluent-form .ff_upload_btn:hover {
  border-color: var(--gpc-green-600);
  background: var(--gpc-sand-50);
}

/* Success message */
.gpc-form-wrap .ff-message-success {
  padding: 24px;
  border: 1px solid var(--gpc-green-100);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-size: 15.5px;
  line-height: 1.6;
}

/* Column layout */
.gpc-form-wrap .frm-fluent-form .ff-t-cell { padding-right: 8px; padding-left: 8px; }
.gpc-form-wrap .frm-fluent-form .ff-t-container { margin-right: -8px; margin-left: -8px; }

/* ═══ Gravity Forms ══════════════════════════════════════════════════════ */

.gpc-form-wrap .gform_wrapper.gravity-theme .gform_fields { grid-row-gap: 16px; }

.gpc-form-wrap .gform_wrapper .gfield_label,
.gpc-form-wrap .gform_wrapper.gravity-theme .gfield_label {
  margin-bottom: 7px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--gpc-green-700);
}
.gpc-form-wrap .gform_wrapper .gfield_required { color: var(--status-danger); }

.gpc-form-wrap .gform_wrapper input[type='text'],
.gpc-form-wrap .gform_wrapper input[type='email'],
.gpc-form-wrap .gform_wrapper input[type='tel'],
.gpc-form-wrap .gform_wrapper input[type='url'],
.gpc-form-wrap .gform_wrapper input[type='number'],
.gpc-form-wrap .gform_wrapper select,
.gpc-form-wrap .gform_wrapper textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  outline: none;
  transition: border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .gform_wrapper input:focus,
.gpc-form-wrap .gform_wrapper select:focus,
.gpc-form-wrap .gform_wrapper textarea:focus {
  border-color: var(--gpc-green-600);
  box-shadow: 0 0 0 3px rgba(41, 60, 58, 0.13);
}
.gpc-form-wrap .gform_wrapper textarea { min-height: 120px; resize: vertical; }

.gpc-form-wrap .gform_wrapper .gform_footer { margin: 20px 0 0; padding: 0; }
.gpc-form-wrap .gform_wrapper .gform_button,
.gpc-form-wrap .gform_wrapper input[type='submit'] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 28px;
  border: 0;
  border-radius: 8px;
  background: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .gform_wrapper .gform_button:hover { background: var(--gpc-mustard-600); }

.gpc-form-wrap .gform_wrapper .gfield_error input,
.gpc-form-wrap .gform_wrapper .gfield_error textarea,
.gpc-form-wrap .gform_wrapper .gfield_error select { border-color: var(--status-danger); }
.gpc-form-wrap .gform_wrapper .validation_message {
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--status-danger);
}
.gpc-form-wrap .gform_wrapper .gform_validation_errors {
  border: 1px solid var(--status-danger);
  border-radius: 8px;
  background: var(--gpc-white);
  box-shadow: none;
}

.gpc-form-wrap .gform_wrapper input[type='checkbox'],
.gpc-form-wrap .gform_wrapper input[type='radio'] { accent-color: var(--gpc-green-700); }

/* Chip treatment — add `gpc-chips` to the field's CSS Class Name in GF */
.gpc-form-wrap .gform_wrapper .gpc-chips .gfield_checkbox,
.gpc-form-wrap .gform_wrapper .gpc-chips .gfield_radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice { margin: 0; }
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice label {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  min-height: 38px;
  margin: 0;
  border: 1.5px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice label:hover {
  border-color: var(--gpc-green-300);
  color: var(--gpc-green-700);
}
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice input { position: absolute; opacity: 0; width: 0; height: 0; }
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice:has(input:checked) label {
  background: var(--gpc-green-700);
  border-color: var(--gpc-green-700);
  color: var(--gpc-sand-50);
}
.gpc-form-wrap .gform_wrapper .gpc-chips .gchoice:has(input:focus-visible) label {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.gpc-form-wrap .gform_confirmation_message {
  padding: 24px;
  border: 1px solid var(--gpc-green-100);
  border-radius: 8px;
  background: var(--gpc-white);
  color: var(--gpc-green-700);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ═══ Shared on-dark context (expert form card is white, so no inversion) ══ */

.gpc-form-wrap--newsletter .frm-fluent-form .ff-el-input--label label,
.gpc-form-wrap--newsletter .gform_wrapper .gfield_label { color: var(--gpc-sand-100); }
.gpc-form-wrap--newsletter .frm-fluent-form .ff-el-form-control,
.gpc-form-wrap--newsletter .gform_wrapper input[type='email'],
.gpc-form-wrap--newsletter .gform_wrapper input[type='text'] {
  background: rgba(247, 244, 234, 0.08);
  border-color: rgba(219, 211, 180, 0.28);
  color: var(--gpc-sand-50);
}
.gpc-form-wrap--newsletter .frm-fluent-form .ff-el-form-control::placeholder,
.gpc-form-wrap--newsletter .gform_wrapper input::placeholder { color: rgba(219, 211, 180, 0.6); }
.gpc-form-wrap--newsletter .ff-message-success,
.gpc-form-wrap--newsletter .gform_confirmation_message {
  padding: 14px 16px;
  background: rgba(247, 244, 234, 0.08);
  border-color: rgba(219, 211, 180, 0.25);
  color: var(--gpc-sand-100);
  font-size: 14px;
}

/* ═══ components/cta-band.css ═══════════════════════════════════ */
/* ── CTA band ───────────────────────────────────────────────────────────── */

.gpc-cta-band {
  background: var(--gpc-green-700);
  --gpc-watermark-src: url('../logos/g-pattern/GPC_G_White.svg');
  --gpc-watermark-size: 180px;
  --gpc-watermark-pos: right -40px center;
  --gpc-watermark-opacity: 0.08;
}
.gpc-cta-band > .gpc-container {
  padding-block: clamp(48px, 7vw, 80px);
  text-align: center;
}
.gpc-cta-band h2 {
  margin: 14px auto 0;
  max-width: 780px;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--gpc-sand-50);
}
.gpc-cta-band__body {
  margin: 18px auto 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--gpc-sand-200);
}
.gpc-cta-band .gpc-btn-row { margin-top: 30px; justify-content: center; }

/* ═══ components/estimate.css ═══════════════════════════════════ */
/* ── Get an Estimate ────────────────────────────────────────────────────── */

.gpc-estimate { background: var(--surface-page); }
.gpc-estimate > .gpc-container-wide {
  padding-block: clamp(34px, 5vw, 60px) clamp(56px, 7vw, 90px);
}
.gpc-estimate__head { max-width: 720px; margin-bottom: 40px; }
.gpc-estimate__head h1 { margin-top: 14px; font-size: clamp(34px, 5vw, 56px); }
.gpc-estimate__head p {
  margin-top: 18px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--text-muted);
}
.gpc-estimate__head p a { font-weight: 600; color: var(--gpc-green-700); }

.gpc-estimate__split { --gpc-split-cols: 1.4fr 0.85fr; --gpc-split-align: start; gap: clamp(28px, 4vw, 48px); }

.gpc-estimate__form { padding: clamp(24px, 3vw, 36px); }

.gpc-estimate__rail { display: flex; flex-direction: column; gap: 16px; }
.gpc-estimate__rail .gpc-photo { height: 200px; }

.gpc-trust-card {
  padding: 24px;
  border-radius: 8px;
  background: var(--gpc-green-700);
  color: var(--gpc-sand-100);
}
.gpc-trust-card__title {
  margin-bottom: 16px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--gpc-sand-50);
}
.gpc-trust-card__row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 11px; }
.gpc-trust-card__row:last-child { margin-bottom: 0; }
.gpc-trust-card__row .gpc-icon { flex: none; width: 17px; height: 17px; color: var(--gpc-mustard-500); margin-top: 2px; }
.gpc-trust-card__row span { font-size: 14.5px; line-height: 1.4; }

.gpc-contact-card { padding: 20px; }
.gpc-contact-card__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--gpc-green-700);
}
.gpc-contact-card__phone .gpc-icon { width: 18px; height: 18px; }
.gpc-contact-card__meta { margin-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--text-muted); }

/* Success state — replaces the form card in place */
.gpc-estimate__success {
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.gpc-estimate__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--gpc-green-700);
  color: var(--gpc-mustard-500);
}
.gpc-estimate__success-mark .gpc-icon { width: 32px; height: 32px; }
.gpc-estimate__success h2 {
  margin-top: 20px;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
}
.gpc-estimate__success p {
  margin: 12px auto 0;
  max-width: 420px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}
.gpc-estimate__success .gpc-btn { margin-top: 24px; }

/* ═══ components/service-area.css ═══════════════════════════════════ */
/* ── Service area ───────────────────────────────────────────────────────────
   Not designed in the handoff — built here from the established patterns:
   the spoke's dark hero, the hub's applications grid, and the FAQ block. */

.gpc-local-hero {
  background: var(--gpc-green-800);
  --gpc-watermark-src: url('../logos/g-pattern/GPC_G_White.svg');
  --gpc-watermark-size: 200px;
  --gpc-watermark-pos: right -50px top -30px;
  --gpc-watermark-opacity: 0.06;
}
.gpc-local-hero > .gpc-container-wide { padding-block: 26px clamp(40px, 5vw, 64px); }
.gpc-local-hero .gpc-breadcrumb { margin-bottom: 22px; }
.gpc-local-hero .gpc-split { --gpc-split-cols: 1.1fr 0.9fr; }
.gpc-local-hero h1 { margin-top: 14px; color: var(--gpc-sand-50); }
.gpc-local-hero__intro {
  margin-top: 18px;
  max-width: 540px;
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.6;
  color: var(--gpc-sand-100);
}
.gpc-local-hero .gpc-btn-row { margin-top: 28px; }
.gpc-local-hero .gpc-photo { height: 360px; }

.gpc-local-meta { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 26px; }
.gpc-local-meta__item { display: flex; align-items: center; gap: 10px; }
.gpc-local-meta__item .gpc-icon { width: 18px; height: 18px; color: var(--gpc-mustard-500); flex: none; }
.gpc-local-meta__value { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--gpc-sand-50); }
.gpc-local-meta__label { font-size: 12.5px; color: var(--gpc-sand-300); }

.gpc-delivery {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
}
.gpc-delivery .gpc-tile { --gpc-tile-size: 46px; }
.gpc-delivery .gpc-tile .gpc-icon { width: 23px; height: 23px; }
.gpc-delivery__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.gpc-delivery__body { margin-top: 7px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

.gpc-local-project { overflow: hidden; }
.gpc-local-project__photo { height: 180px; }
.gpc-local-project__body { padding: 20px; }
.gpc-local-project__title { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; line-height: 1.3; }
.gpc-local-project__body p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.gpc-area-card { display: flex; align-items: center; gap: 12px; padding: 18px; }
.gpc-area-card .gpc-tile { --gpc-tile-size: 40px; }
.gpc-area-card .gpc-tile .gpc-icon { width: 20px; height: 20px; }
.gpc-area-card__name { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.gpc-area-card__meta { margin-top: 2px; font-size: 12.5px; color: var(--text-subtle); }

/* Capability cards — a titled variant of the check card. */
.gpc-local-capability { padding: 24px; }
.gpc-local-capability .gpc-check-card__mark { width: 30px; height: 30px; }
.gpc-local-capability .gpc-check-card__mark .gpc-icon { width: 16px; height: 16px; }
.gpc-local-capability__title {
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}
.gpc-local-capability__text {
  margin-top: 8px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* ═══ components/misc.css ═══════════════════════════════════ */
/* ── Archive, search, 404 ───────────────────────────────────────────────── */

.gpc-archive-head { background: var(--surface-page); padding-top: 26px; }
.gpc-archive-head__inner { padding-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }
.gpc-archive-head h1 { margin-top: 14px; }
.gpc-archive-head p { margin-top: 18px; font-size: clamp(17px, 2vw, 20px); line-height: 1.6; color: var(--text-muted); }

.gpc-archive-group + .gpc-archive-group { margin-top: clamp(40px, 5vw, 64px); }
.gpc-archive-group__heading { margin-bottom: 20px; }

.gpc-search-form { display: flex; gap: 10px; max-width: 520px; }
.gpc-search-form input { flex: 1; }

.gpc-result-list { display: flex; flex-direction: column; gap: 14px; }
.gpc-result { padding: 22px 24px; }
.gpc-result__type {
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gpc-mustard-600);
}
.gpc-result__title { margin-top: 8px; font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.gpc-result__excerpt { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-muted); }

.gpc-404 { text-align: center; max-width: 620px; margin-inline: auto; }
.gpc-404 h1 { margin-top: 14px; }
.gpc-404 p { margin-top: 18px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.gpc-404 .gpc-btn-row { margin-top: 30px; justify-content: center; }
.gpc-404__links { margin-top: 44px; text-align: left; }

.gpc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.gpc-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--gpc-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
}
.gpc-pagination .page-numbers:hover { border-color: var(--gpc-green-300); color: var(--gpc-green-700); }
.gpc-pagination .page-numbers.current {
  background: var(--gpc-green-700);
  border-color: var(--gpc-green-700);
  color: var(--gpc-sand-50);
}

/* Block-editor content inside classic templates */
.gpc-entry-content { max-width: 760px; }
.gpc-entry-content > * + * { margin-top: 1.1em; }
.gpc-entry-content h2 { margin-top: 1.6em; font-size: clamp(24px, 3vw, 32px); }
.gpc-entry-content h3 { margin-top: 1.4em; font-size: 21px; }
.gpc-entry-content ul, .gpc-entry-content ol { padding-left: 1.25em; }
.gpc-entry-content li { list-style: disc; margin-top: 0.4em; }
.gpc-entry-content ol li { list-style: decimal; }
.gpc-entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.gpc-entry-content a:hover { color: var(--text-link-hover); }
.gpc-entry-content img { border-radius: 8px; }

/* ── Team & child-page cards ────────────────────────────────────────────── */

.gpc-team-card,
.gpc-cards-card { display: flex; flex-direction: column; overflow: hidden; }

.gpc-team-card__photo { aspect-ratio: 4 / 5; }
.gpc-cards-card__photo { height: 172px; }

.gpc-team-card__body,
.gpc-cards-card__body { padding: 18px 20px 20px; }

.gpc-team-card__role {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gpc-mustard-600);
}
.gpc-team-card__title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.gpc-cards-card__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; }
.gpc-cards-card__excerpt { margin-top: 7px; font-size: 14px; line-height: 1.55; color: var(--text-muted); }

/* ── Blog ───────────────────────────────────────────────────────────────── */

.gpc-post-card { overflow: hidden; }
.gpc-post-card__link { display: flex; flex-direction: column; height: 100%; color: inherit; }
.gpc-post-card__photo { height: 190px; }
.gpc-post-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 22px;
  flex: 1;
}
.gpc-post-card__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gpc-mustard-600);
}
.gpc-post-card__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.gpc-post-card__excerpt { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); }
.gpc-post-card .gpc-textlink { margin-top: auto; padding-top: 4px; }

/* Single post */
.gpc-post-hero { background: var(--surface-page); padding-top: 26px; }
.gpc-post-hero__inner { max-width: 760px; padding-bottom: clamp(24px, 3vw, 36px); margin-top: 22px; }
.gpc-post-hero h1 { margin-top: 14px; }
.gpc-post-hero__photo {
  height: clamp(240px, 42vw, 460px);
  margin-bottom: clamp(8px, 2vw, 20px);
}
.gpc-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--text-muted);
}

/* Article body — a narrower measure than the theme's other prose. */
.gpc-post-body { max-width: 760px; margin-inline: auto; font-size: 17px; line-height: 1.7; }
.gpc-post-body > * + * { margin-top: 1.15em; }
.gpc-post-body h2 { margin-top: 1.8em; font-size: clamp(24px, 3vw, 32px); }
.gpc-post-body h3 { margin-top: 1.5em; font-size: 21px; }
.gpc-post-body img,
.gpc-post-body figure { border-radius: 8px; }
.gpc-post-body figcaption { margin-top: 8px; font-size: 13.5px; color: var(--text-subtle); }
.gpc-post-body blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--gpc-mustard-500);
  font-size: 19px;
  line-height: 1.55;
  color: var(--text-strong);
}
.gpc-post-body ul, .gpc-post-body ol { padding-left: 1.25em; }
.gpc-post-body li { list-style: disc; margin-top: 0.45em; }
.gpc-post-body ol li { list-style: decimal; }
.gpc-post-body a { text-decoration: underline; text-underline-offset: 2px; }
.gpc-post-body a:hover { color: var(--text-link-hover); }

.gpc-post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 760px;
  margin: 32px auto 0;
}
.gpc-post-tag {
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-card);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  transition: border-color 140ms cubic-bezier(0.4, 0, 0.2, 1), color 140ms cubic-bezier(0.4, 0, 0.2, 1);
}
.gpc-post-tag:hover { border-color: var(--gpc-green-300); color: var(--gpc-green-700); }
.gpc-post-pages { max-width: 760px; margin: 24px auto 0; font-size: 14px; }

/* ── Tables inside article content ──────────────────────────────────────────
   The guide content ships real comparison and dimension tables; without this
   they inherit nothing and render as unreadable runs of text. Wrapped so a
   wide table scrolls inside itself rather than pushing the page sideways. */

.gpc-post-body table,
.gpc-entry-content table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 15px;
}
.gpc-post-body table thead,
.gpc-entry-content table thead { background: var(--gpc-sand-100); }
.gpc-post-body th,
.gpc-entry-content th {
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gpc-green-700);
  border: 1px solid var(--gpc-sand-200);
  white-space: nowrap;
}
.gpc-post-body td,
.gpc-entry-content td {
  padding: 12px 14px;
  vertical-align: top;
  line-height: 1.5;
  border: 1px solid var(--gpc-sand-200);
}
.gpc-post-body tbody tr:nth-child(even),
.gpc-entry-content tbody tr:nth-child(even) { background: var(--surface-page); }

/* A row header inside body content is a cell, not a column heading. */
.gpc-post-body tbody th,
.gpc-entry-content tbody th {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

.gpc-post-body ol,
.gpc-entry-content ol { padding-left: 1.25em; }
.gpc-post-body ol li,
.gpc-entry-content ol li { list-style: decimal; }

/* ── Guides ─────────────────────────────────────────────────────────────── */

.gpc-guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
}
.gpc-guide-card__flag {
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--gpc-mustard-500);
  color: var(--gpc-green-900);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gpc-guide-card__title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.gpc-guide-card__text { font-size: 14.5px; line-height: 1.55; color: var(--text-muted); flex: 1; }
.gpc-guide-card .gpc-textlink { margin-top: auto; }

.gpc-guide-upsell {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  flex-wrap: wrap;
}
.gpc-guide-upsell > div { flex: 1; min-width: 220px; }
.gpc-guide-upsell__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.3; }
.gpc-guide-upsell__text { margin-top: 5px; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }

.gpc-post-meta a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; }
.gpc-post-meta a:hover { color: var(--text-link-hover); }

/* Utility */
.gpc-hidden { display: none !important; }
.gpc-mt-0 { margin-top: 0 !important; }

/* ═══ main.css ═══════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════════
   Glacier Precast — theme stylesheet entry point
   Author: Hill Media Group

   Plain CSS, no build step. Custom properties carry the design tokens; the
   "Clean & technical" tone preset is baked in as literals (8px radius, no
   photo filter, 700 display weight, 0.5 hero scrim) — there is deliberately
   no --ui-* variable layer to ship.

   tokens/ is copied verbatim from the GPC design system and is the single
   source of truth. Edit tokens there, not in components.
   ═══════════════════════════════════════════════════════════════════════ */

/* Tokens ── order matters: fonts → colors → typography → spacing */





/* Base */




/* Layout */




/* Components */