/*
Theme Name: Global Self Storage Theme
Author: DevQ
Author URI: https://thedevq.com/
Description: A reusable WordPress theme for self-storage operators, with multi-provider support (StorEdge, SiteLink, Easy Storage Solutions, Cubby), AI-powered unit recommendations, and a built-in GA4/GSC reporting dashboard.
Version: 1.0.0
Text Domain: global-self-storage-theme
*/

/* -----------------------------------------------------------------------------
 * CSS Variables
 * -------------------------------------------------------------------------- */
:root {
  /* Note: --primary, --secondary, --tertiary, --font1, --font2 are set dynamically in theme-settings-css.php */
  /* Note: --spacing-small, --spacing-medium, --spacing-large are set dynamically in theme-settings-css.php */

  /* Figma design system — extended palette */
  --color-navy: #0f172a;
  --color-blue: #1e40af;
  --color-blue-light: #dbeafe;
  --color-red: #d32f2f;
  --color-text-dark: #191c1e;
  --color-text: #475569;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;
  --color-border: #f1f5f9;
  --color-border-dark: #e2e8f0;
  --color-bg-light: #f8fafc;
  --color-bg-page: #f7f9fc;
  --color-bg-warm: #f2f4f7;

  /* Z-index layers */
  --z-index-dropdown: 3;

  /* Transitions */
  --transition-fast: all 0.1s ease-in-out;
  --transition-default: all 0.3s ease-in-out;

  /* Other */
  --video-aspect-ratio: 56.25%;
  /* 16:9 */
}

/* -----------------------------------------------------------------------------
 * Base Elements
 * -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-page);
  position: relative;
  font-family: var(--font2);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
}

p, ul, li {
  font-family: var(--font2);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.5;
}

img {
  max-width: 100%;
}

/* -----------------------------------------------------------------------------
 * Typography
 * -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font1);
  font-weight: 800;
  line-height: 1.1;
  color: var(--color-text-dark);
  letter-spacing: -0.03em;
}

h1 {
  font-size: 3.75rem;
  line-height: 1;
}

h2 {
  font-size: 2.25rem;
  letter-spacing: -0.05em;
}

h3 {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0;
}

h4 {
  font-size: 1.5rem;
  letter-spacing: -0.05em;
}

h5 {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



/* -----------------------------------------------------------------------------
 * Layout
 * -------------------------------------------------------------------------- */
.container-fluid {
  max-width: 2400px;
  margin: auto;
}

.videoWrapper {
  position: relative;
  padding-bottom: var(--video-aspect-ratio);
  height: 0;
}

.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -----------------------------------------------------------------------------
 * Buttons
 * -------------------------------------------------------------------------- */
.btn {
  text-decoration: none;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--button-padding, 12px 28px);
  font-family: var(--font1);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  transition: var(--transition-default);
  border: 2px solid var(--primary);
  border-radius: var(--button-radius, 4px);
  cursor: pointer;
  min-width: 180px;
}

/* Eyebrow / topper - Figma pattern */
.cs-topper {
  font-family: var(--font2);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--sh-accent-lime-text, #5e7a10);
}

/* On dark/navy sections the bright lime is the readable one - keep it there. */
.hero-text-light .cs-topper,
[data-theme="dark"] .cs-topper,
.bg-navy .cs-topper,
.bg-dark .cs-topper {
  color: var(--sh-accent-lime, #a6d71c);
}

.btn i {
  font-size: 14px;
}

.btn:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Button Variants */
.btn.btn-secondary {
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn.btn-secondary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.btn-tertiary {
  background: var(--tertiary);
  border-color: var(--tertiary);
  color: var(--primary);
}

.btn.btn-tertiary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.btn.btn-white {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

.btn.btn-white:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn.btn-outline:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.btn.btn-outline-secondary {
  background: transparent;
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-secondary:hover {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}

.btn.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.btn.btn-outline-white:hover {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

/* Header & navigation styles are in template-parts/header/ */
/* Footer styles are in template-parts/footer/ */
/* Mobile menu styles are in template-parts/mobile-menu/ */

/* -----------------------------------------------------------------------------
 * Utility Classes
 * -------------------------------------------------------------------------- */
.mobileonly,
.mobileOnly {
  display: none;
}

/* Section background variants */
.section-light {
  background-color: var(--color-bg-light);
}

.section-offwhite {
  background-color: var(--color-bg-warm);
}

.section-dark {
  background-color: var(--color-navy);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark p,
.section-dark li {
  color: #fff;
}

.section-dark .cs-topper {
  color: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Browser Customization
 * -------------------------------------------------------------------------- */
::selection {
  background: var(--tertiary);
  color: var(--secondary);
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background-color: #f5f5f5;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--tertiary);
}

/* -----------------------------------------------------------------------------
 * Content Styles
 * -------------------------------------------------------------------------- */
.maincopy ul li {
  list-style: none;
  position: relative;
  margin-bottom: 15px;
}

/* -----------------------------------------------------------------------------
 * Media Queries
 * -------------------------------------------------------------------------- */
@media (max-width: 1199px) {

  /* Utility Classes */
  .mobileonly,
  .mobileOnly {
    display: initial;
  }

  .desktopOnly {
    display: none;
  }
}

/* Mobile Styles - 767px and below */
@media (max-width: 767px) {

  .btn {
    width: 100%;
    min-width: unset;
  }

  /* Typography */
  h1 {
    font-size: 2.5rem;
  }

  h2 {
    font-size: 2.25rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.75rem;
  }

  h5 {
    font-size: 1.5rem;
  }

  .bigger-title {
    font-size: 3rem;
  }

  .sub-title {
    font-size: 20px;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Store Here brand signature
 * Brand: Store Here Self Storage. Tokens locked from legacy LM360 site so the
 * new theme reads as the same company. Lime is the *signal* color: only on
 * promo pulses, headline accents, and "alive" moments. Never decorative.
 * ────────────────────────────────────────────────────────────────────────── */
:root {
  --sh-primary: #295ba2;
  --sh-primary-hover: #295bcf;
  --sh-accent-lime: #a6d71c;
  --sh-accent-lime-soft: #d6f06b;
  /* Same hue as --sh-accent-lime, darkened to clear WCAG AA as small text.
     #a6d71c is only 1.70:1 on white; this is 4.92:1. Use for text, never fills. */
  --sh-accent-lime-text: #5e7a10;
  --sh-navy-deep: #122b4a;
  --sh-navy-mid: #618bc1;
  --sh-cta-red: #d32f2f;
}

/* Lime "vacancy" pulse — used on cards with active promo/availability.
 * Small, alive, ownable. 1.6s cycle, scoped via `position: relative` parent. */
.sh-pulse {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font1);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-dark);
}
.sh-pulse::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sh-accent-lime);
  box-shadow: 0 0 0 0 rgba(166, 215, 28, 0.6);
  animation: sh-pulse 1.6s ease-out infinite;
}
@keyframes sh-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(166, 215, 28, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(166, 215, 28, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 215, 28, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .sh-pulse::before { animation: none; }
}

/* Hand-drawn-ish lime underline beneath headline accents.
 * Wrap a span around the accent word(s) and add this class. */
.sh-accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.sh-accent::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -4px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q 50 2 100 6 T 198 5' fill='none' stroke='%23a6d71c' stroke-width='4' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.sh-accent--solid::after {
  background-image: none;
  background-color: var(--sh-accent-lime);
  height: 8px;
  bottom: 0;
  border-radius: 4px;
  opacity: 0.85;
}

/* Lime promo pill — used on hero strips, location cards, info card */
.sh-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sh-accent-lime);
  color: #1b3000;
  font-family: var(--font1);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  line-height: 1;
}
.sh-pill--soft {
  background: var(--sh-accent-lime-soft);
  color: #2d4500;
}
.sh-pill--navy {
  background: var(--color-navy);
  color: var(--sh-accent-lime);
}

/* Asymmetric card grid — image bleeds 12px outside the body, lifting the card
 * off the page. Use for location cards on home + archive. */
.sh-card {
  position: relative;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 24px -10px rgba(15, 23, 42, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.sh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 38px -14px rgba(15, 23, 42, 0.28);
}
.sh-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-warm);
}
.sh-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.sh-card:hover .sh-card__media img {
  transform: scale(1.04);
}
.sh-card__pin {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
}
.sh-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sh-card__title {
  font-family: var(--font1);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.sh-card__meta {
  font-family: var(--font2);
  font-size: 0.875rem;
  color: var(--color-text);
  margin: 0;
}
.sh-card__footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border);
}
.sh-card__price {
  font-family: var(--font1);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sh-primary);
  line-height: 1;
}
.sh-card__price-suffix {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-left: 2px;
}
.sh-card__cta {
  font-family: var(--font1);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--sh-primary);
  padding: 9px 16px;
  border-radius: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
}
.sh-card__cta:hover {
  background: var(--sh-primary-hover);
  text-decoration: none;
}
.sh-card[data-coming-soon="1"] .sh-card__cta {
  background: var(--color-text-muted);
}

/* Section eyebrow — tiny lime tick + uppercase label, used above section H2s */
.sh-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font1);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}
.sh-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 3px;
  background: var(--sh-accent-lime);
  border-radius: 2px;
}

/* Section header row with right-aligned link (used on Locations grid section) */
.sh-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.sh-section-head__title {
  margin: 0;
}
.sh-section-head__link {
  font-family: var(--font1);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sh-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.18s ease, gap 0.18s ease;
}
.sh-section-head__link:hover {
  color: var(--sh-primary-hover);
  gap: 10px;
  text-decoration: none;
}
.sh-section-head__link::after {
  content: "→";
  font-weight: 600;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Hero block — Store Here voice
 * Heading accent line just inherits the heading color — no decoration.
 * ────────────────────────────────────────────────────────────────────────── */
.hero-block .hero-heading-accent {
  display: block;
  color: inherit;
}
.hero-block .hero-eyebrow.cs-topper {
  color: var(--sh-accent-lime);
  font-weight: 800;
}
.hero-block .hero-social-proof-text {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 500;
}
.hero-block .hero-stars i {
  color: var(--sh-accent-lime);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Locations grid block — refined card system on the home page
 * Selector overrides .lg-card to apply Store Here lift/feel without rewriting
 * the block render template.
 * ────────────────────────────────────────────────────────────────────────── */
.location-grid-block .lg-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.location-grid-block .lg-card {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 8px 22px -10px rgba(15, 23, 42, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.location-grid-block .lg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 18px 36px -14px rgba(15, 23, 42, 0.28);
}
.location-grid-block .lg-card-image {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-warm);
}
.location-grid-block .lg-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.location-grid-block .lg-card:hover .lg-card-image img {
  transform: scale(1.04);
}
.location-grid-block .lg-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.location-grid-block .lg-card-name {
  font-family: var(--font1);
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--color-text-dark);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}
.location-grid-block .lg-card-address {
  font-family: var(--font2);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  margin: 0;
}
.location-grid-block .lg-card-footer {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-border);
}
.location-grid-block .lg-card-price {
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.location-grid-block .lg-price-amount {
  font-family: var(--font1);
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--sh-primary);
  line-height: 1;
}
.location-grid-block .lg-price-period {
  font-family: var(--font2);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.location-grid-block .lg-card-btn {
  font-family: var(--font1);
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  background: var(--sh-primary);
  padding: 9px 16px;
  border: none;
  border-radius: 8px;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}
.location-grid-block .lg-card-btn:hover {
  background: var(--sh-primary-hover);
  transform: translateY(-1px);
  text-decoration: none;
  color: #fff;
}
.location-grid-block .lg-card[data-coming-soon="1"] .lg-card-btn,
.location-grid-block .lg-card.is-coming-soon .lg-card-btn {
  background: var(--color-text-muted);
}
.location-grid-block .lg-view-all {
  font-family: var(--font1);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sh-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.18s ease, gap 0.18s ease;
}
.location-grid-block .lg-view-all:hover {
  color: var(--sh-primary-hover);
  gap: 12px;
  text-decoration: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Hero buttons — primary stays blue, secondary goes lime ghost (Pay Bill).
 * Frosted button is fine for white-on-image hero patterns.
 * ────────────────────────────────────────────────────────────────────────── */
.hero-block .btn,
.hero-block .btn:hover {
  font-family: var(--font1);
}
.hero-block .btn-frosted:hover {
  border-color: var(--sh-accent-lime);
  background: rgba(166, 215, 28, 0.18);
  color: #fff;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Features List — "Why Store Here" variant
 * Custom class `featureslist-wsh` flips the icon into a lime circle with a navy
 * inner glyph. Use this variant when inserting featureslist on the home page.
 * ────────────────────────────────────────────────────────────────────────── */
.featureslist-block.featureslist-wsh {
  background: #fff;
}
.featureslist-block.featureslist-wsh .featureslist-header {
  text-align: left;
  max-width: 920px;
  margin: 0 0 56px;
}
.featureslist-block.featureslist-wsh .featureslist-eyebrow {
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}
.featureslist-block.featureslist-wsh .featureslist-eyebrow::before {
  content: "";
  width: 24px;
  height: 3px;
  background: var(--sh-accent-lime);
  border-radius: 2px;
  display: inline-block;
}
.featureslist-block.featureslist-wsh .featureslist-heading {
  font-size: 2.5rem;
  letter-spacing: -0.04em;
  max-width: 700px;
}
.featureslist-block.featureslist-wsh .featureslist-subheading {
  font-size: 1.0625rem;
  color: var(--color-text);
  max-width: 600px;
}
.featureslist-block.featureslist-wsh .featureslist-grid {
  gap: 28px;
}
.featureslist-block.featureslist-wsh .featureslist-item {
  flex-direction: column;
  align-items: flex-start;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--color-border-dark);
  border-radius: 16px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.featureslist-block.featureslist-wsh .featureslist-item:hover {
  border-color: var(--sh-accent-lime);
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -16px rgba(15, 23, 42, 0.18);
}
.featureslist-block.featureslist-wsh .featureslist-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 50%;
  background: var(--sh-accent-lime);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  position: relative;
  box-shadow: 0 0 0 6px rgba(166, 215, 28, 0.18);
}
.featureslist-block.featureslist-wsh .featureslist-icon i {
  color: var(--color-navy);
  font-size: 1.375rem;
}
.featureslist-block.featureslist-wsh .featureslist-title {
  font-family: var(--font1);
  font-size: 1.1875rem;
  font-weight: 800;
  color: var(--color-text-dark);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.featureslist-block.featureslist-wsh .featureslist-description {
  color: var(--color-text);
  font-size: 0.9375rem;
  line-height: 1.55;
}
@media (max-width: 767px) {
  .featureslist-block.featureslist-wsh .featureslist-heading { font-size: 1.875rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
 * Closing CTA block (cta-bg-primary) — tighten to brand
 * ────────────────────────────────────────────────────────────────────────── */
.cta-block.cta-bg-primary {
  background: linear-gradient(135deg, #0f172a 0%, var(--sh-primary) 100%);
}
.cta-block.cta-bg-primary::before {
  /* lime corner spark */
  content: "";
  position: absolute;
  inset: auto -120px -120px auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(166, 215, 28, 0.35) 0%, transparent 70%);
  pointer-events: none;
}
.cta-block { position: relative; overflow: hidden; }

/* Mobile — section padding tightens, eyebrow lock-up scales down */
@media (max-width: 767px) {
  .sh-eyebrow { font-size: 0.6875rem; letter-spacing: 0.16em; }
  .sh-section-head { margin-bottom: 24px; }
}