/* ============================================================
   BASE RESET & GLOBAL STYLES
   ============================================================ */

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

/* Root scale: every rem in the theme keys off this, so the whole
   design scales with the screen. */
html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Between full desktop and the 1120px mobile-nav switch, content is
   tight — scale the whole rem system down a notch. */
@media (max-width: 1360px) {
  html { font-size: 15px; }
}

@media (max-width: 400px) {
  html { font-size: 13.5px; }
}

body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow: clip prevents horizontal scrolling without creating a scroll container that breaks sticky descendants. Keep the fallback for unsupported browsers. */
  overflow-x: hidden;
  overflow-x: clip;
}

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

img { height: auto; }

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition-base);
}

/* Plain links entered in rich text must remain visibly identifiable. */
main p a:not([class]) {
  color: var(--prose-link-color, var(--color-primary));
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

ul, ol { list-style: none; }

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Anchored sections land below the fixed header */
#page-content [id] {
  scroll-margin-top: 6rem;
}

/* --- Container --- */
.sh-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* No horizontal padding: --container is a share of the viewport, so
     it already leaves the edge inset. Padding here would inset the
     content a second time and this container would sit narrower than
     every.sh-*__inner. */
  padding: 0;
}

/* --- Section wrapper --- */
.sh-section {
  width: 100%;
  position: relative;
}

/* PILL CHIP — eyebrow badge used on every section Updated spec (Services page): no dot, Manrope SemiBold 16, deep-blue text on white with a soft teal border. */
.sh-pill-chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border-chip);
  border-radius: var(--radius-pill);
  padding: 1.125rem 2.25rem;
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-blue-deep);
  white-space: nowrap;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  /* Shared maximum button padding. */
  padding: 0.875rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: var(--transition-base);
  white-space: nowrap;
  text-decoration: none;
}

/* Solid blue pill — "Lets talk", "See who we help", "Talk to us" */
.sh-btn--blue {
  background: var(--color-primary);
  color: #fff;
}

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

.sh-btn--blue svg { width: 1rem; height: 1rem; }

/* Outline blue pill — contact cards */
.sh-btn--outline {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 500;
}

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

/* Outline white — dark/blue card */
.sh-btn--outline-white {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-weight: 500;
}

.sh-btn--outline-white:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Auto-contrast outline — reads against any hero background, including
   one close to the brand blue where the white/blue outline pills above
   would blend in. --hero-side-fg is set inline per-hero (see
   template-parts/sections/hero.php 'side' layout); currentColor is the
   fallback for any other context. */
.sh-btn--outline-contrast {
  background: transparent;
  border: 1px solid var(--hero-side-fg, currentColor);
  color: var(--hero-side-fg, currentColor);
  font-weight: 500;
}

.sh-btn--outline-contrast:hover {
  background: var(--hero-side-fg, currentColor);
  color: var(--hero-side-bg, #fff);
}

/* Icon-pill CTAs (pill-white/pill-blue/pill-plain): label centred on the button's full width, icon circle pinned to the right edge, at any width. */
/* Primary/secondary buttons (the pill-white/pill-blue/pill-plain trio) no longer carry the circular arrow badge — square button, label only. */
.sh-btn--pill-white,
.sh-btn--pill-blue,
.sh-btn--pill-plain {
  justify-content: center;
  border-radius: 8px;
}

.sh-btn--pill-white .sh-btn__icon,
.sh-btn--pill-blue .sh-btn__icon,
.sh-btn--pill-plain .sh-btn__icon {
  display: none;
}

.sh-btn--pill-white {
  --btn-icon-size: 3.125rem;
  background: #fff;
  color: var(--color-primary);
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 600;
}

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

.sh-btn--pill-white:hover { transform: translateY(-1px); color: var(--color-primary); }

/* Blue pill with white icon circle — header CTA. */
.sh-btn--pill-blue {
  --btn-icon-size: 3.125rem;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-nav);
  font-size: var(--text-md);
  font-weight: 600;
}

.sh-btn--pill-blue .sh-btn__icon {
  background: #fff;
  color: var(--color-primary);
}

.sh-btn--pill-blue:hover { background: var(--color-primary-hover); color: #fff; }

/* Compact size — same pill-blue look, smaller footprint for menu contexts (mega panel, mobile drawer) where the full header-CTA size is too heavy. */
.sh-btn--compact.sh-btn--pill-blue {
  --btn-icon-size: 2.25rem;
  --btn-icon-inset: 4px;
  --btn-icon-gap: 0.5rem;
  font-size: var(--text-sm);
}

.sh-btn--compact.sh-btn--pill-blue .sh-btn__icon svg { width: 0.875rem; height: 0.875rem; }

/* White pill, dark text, blue icon circle — "Explore" */
.sh-btn--pill-plain {
  --btn-icon-size: 3.125rem;
  background: #fff;
  color: var(--color-heading);
  font-size: var(--text-md);
  font-weight: 600;
}

.sh-btn--pill-plain .sh-btn__icon {
  background: var(--color-primary);
  color: #fff;
}

.sh-btn--pill-plain:hover { color: var(--color-heading); transform: translateY(-1px); }

/* Rotate the up-right arrow 45 degrees to point right. */
.sh-btn--pill-plain .sh-btn__icon svg { transform: rotate(45deg); }

.sh-btn__icon svg { width: 1.125rem; height: 1.125rem; }

/* Mobile: compact pill chips so long labels ("What makes us
   different") fit a 320px screen. */
@media (max-width: 768px) {
  .sh-pill-chip {
    font-size: 0.9375rem;
    padding: 0.75rem 1.375rem;
    max-width: 100%;
  }
}

/* Very small screens: shrink the icon-circle pills so they keep
   side breathing room instead of hugging the screen edges. */
@media (max-width: 400px) {
  /* Only the icon size changes — padding and min-height recompute
     from it, so there is nothing else to keep in step here. */
  .sh-btn--pill-white,
  .sh-btn--pill-blue,
  .sh-btn--pill-plain {
    --btn-icon-size: 2.5rem;
    --btn-icon-gap: 0.5rem;
    max-width: 100%;
    font-size: 0.9375rem;
  }

  .sh-btn__icon svg { width: 0.9375rem; height: 0.9375rem; }

  .sh-btn--blue,
  .sh-btn--outline,
  .sh-btn--outline-white {
    font-size: 0.9375rem;
    padding: 0.875rem 1.5rem;
  }
}

/* Text-link CTA ("Contact Us →") */
.sh-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-md);
  font-weight: 500;
  color: var(--color-primary);
  transition: var(--transition-base);
}

.sh-cta-link:hover { color: var(--color-primary-hover); }
.sh-cta-link svg { width: 1rem; height: 1rem; }

/* --- Utility --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.text-center { text-align: center; }