/* Sure Point Compass Travel — base theme styles.
   Component classes only; no inline styles in templates. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--spct-white);
  color: var(--spct-ink);
  font-family: var(--spct-font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 1000;
  background: var(--spct-deep-teal);
  color: var(--spct-white);
  padding: 12px 20px;
  border-radius: 0 0 6px 6px;
  font-weight: 700;
  font-size: 14px;
}
.skip-link:focus { top: 0; }

/* Body text (~16px) in --spct-teal on white only reaches 4.21:1 — under the
   4.5:1 AA minimum for normal-size text (confirmed via contrast audit).
   --spct-deep-teal reaches 7.54:1, so it's the default for text; --spct-teal
   stays reserved for large surfaces (backgrounds, big bold headings/buttons)
   where the 3:1 large-text/non-text threshold applies. */
a { color: var(--spct-deep-teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-family: var(--spct-font-display);
  font-weight: 600;
  color: var(--spct-ink);
  letter-spacing: -0.02em;
  margin: 0 0 18px;
}
h1 { font-size: 56px; line-height: 1.1; }
h2 { font-size: 36px; line-height: 1.18; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: normal; }

p { color: var(--spct-grey); margin: 0 0 16px; line-height: 1.7; }

.eyebrow {
  display: block;
  font-family: var(--spct-font-body);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--spct-aqua);
  margin-bottom: 16px;
}
/* --spct-aqua on white/mint is 1.92:1 — fails badly. Use on dark/photo
   backgrounds only (8.90:1 there); this variant is for white/mint sections. */
.eyebrow--on-light { color: var(--spct-deep-teal); }

.container {
  max-width: var(--spct-container);
  margin: 0 auto;
  padding: 0 32px;
}
.container--text {
  max-width: var(--spct-container-text);
  margin: 0 auto;
  padding: 0 32px;
}

.section { padding: var(--spct-section-pad) 0; }
.section--mint { background: var(--spct-mint); }
.section--teal { background: var(--spct-teal); }
.section--deep-teal { background: var(--spct-deep-teal); }
.section--white { background: var(--spct-white); }
.section--teal h2, .section--deep-teal h2 { color: var(--spct-white); }
.section--deep-teal p { color: rgba(255, 255, 255, 0.85); } /* 5.93:1, passes AA */
/* Plain white on --spct-teal tops out at 4.21:1 even fully opaque — under
   the 4.5:1 normal-text minimum. Sizing/weighting it into WCAG's "large
   text" bracket (≥18.66px bold) lets the same 4.21:1 pass under the 3:1
   large-text threshold instead, without changing the brand background. */
.section--teal p {
  color: var(--spct-white);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
}

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-head p { max-width: 540px; margin-left: auto; margin-right: auto; }
.section-copy--center { text-align: center; }
.text-center { text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--spct-font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 14px 32px;
  border-radius: var(--spct-radius-btn);
  border: none;
  cursor: pointer;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.btn-primary { background: var(--spct-white); color: var(--spct-deep-teal); }
.btn-primary:hover { background: var(--spct-mint); color: var(--spct-deep-teal); }
.btn-solid { background: var(--spct-teal); color: var(--spct-white); }
.btn-solid:hover { background: var(--spct-deep-teal); color: var(--spct-white); }
.btn-outline {
  background: transparent;
  /* Was `color: inherit` — resolved to body's near-black on the hero photo
     (1.02:1, effectively invisible). This button is for dark/photo
     backgrounds only, so it needs an explicit light color, not inherit. */
  color: var(--spct-white);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  font-weight: 500;
}
.btn-outline:hover { border-color: currentColor; }
.btn-outline-dark {
  background: transparent;
  color: var(--spct-deep-teal); /* --spct-teal here was 4.21:1, fails AA */
  border: 1.5px solid var(--spct-deep-teal);
  font-weight: 500;
}
.btn-outline-dark:hover { background: var(--spct-teal); color: var(--spct-white); }

/* Badges / pills */
.badge-pill {
  font-size: 12px;
  font-weight: 500;
  color: var(--spct-white);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 6px 14px;
  border-radius: 20px;
}
.badge-pill a { color: inherit; text-decoration: underline; }
.badge-pill a:hover { color: var(--spct-aqua); }
.badge-row { display: flex; gap: 10px; flex-wrap: wrap; }

.credential-badge {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--spct-deep-teal);
  background: var(--spct-mint);
  padding: 8px 16px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Icon badge — source SVGs are pre-composed teal squares with icon glyph;
   clipping to a circle keeps the "always on teal, do not recolor" spec. */
.icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.icon-badge--lg { width: 56px; height: 56px; }

/* Cards */
.card {
  background: var(--spct-white);
  border: 1px solid var(--spct-mint);
  border-radius: var(--spct-radius-card);
  padding: 28px 24px;
  box-shadow: var(--spct-shadow-card);
}
.card-stack { display: flex; flex-direction: column; gap: 12px; }
/* No real photography yet for region/portfolio cards (design handoff
   flagged several of these as drag-and-drop placeholders even in the
   mockup itself, and the rest are hotlinked to the old WP site, which
   we're not carrying forward) - gradient placeholder until real photos
   are sourced. */
.card-photo { border-radius: var(--spct-radius-card) var(--spct-radius-card) 0 0; overflow: hidden; }
.card-photo-placeholder {
  height: 150px;
  background: linear-gradient(135deg, var(--spct-mint) 0%, var(--spct-aqua) 100%);
}
.card--photo { padding: 0; overflow: hidden; }
.card--photo .card-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card-photo-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.card-link { color: var(--spct-deep-teal); font-weight: 700; font-size: 12.5px; margin-top: 4px; display: inline-block; }
.section-intro-text { max-width: 720px; margin: 0 0 40px; }

/* Reviews */
.testimonial-card { background: var(--spct-mint); border-radius: var(--spct-radius-card); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.testimonial-card .pull-quote-mark { color: var(--spct-teal); font-size: 44px; margin-bottom: 0; }
.testimonial-card blockquote { font-family: var(--spct-font-display); font-size: 18px; font-weight: 600; color: var(--spct-deep-teal); line-height: 1.45; margin: 0; }
.testimonial-card .pull-quote-attribution { background: none; margin-top: 0; }

/* Press releases */
.press-card { background: var(--spct-white); border: 1px solid var(--spct-mint); border-radius: 10px; padding: 24px 28px; }
.press-card h3 { font-size: 17px; margin-bottom: 8px; }
.press-card p { font-size: 13.5px; margin: 0; }
.press-card--link { display: block; color: inherit; transition: border-color 180ms ease, box-shadow 180ms ease; }
.press-card--link:hover { border-color: var(--spct-teal); box-shadow: 0 4px 16px rgba(0, 95, 90, 0.08); text-decoration: none; }
.press-card--link h3 { color: var(--spct-deep-teal); }

.quick-facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 40px; }
.quick-facts-grid dt { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--spct-deep-teal); margin-bottom: 4px; }
.quick-facts-grid dd { font-size: 14px; color: var(--spct-ink); line-height: 1.5; margin: 0; }
@media (max-width: 700px) { .quick-facts-grid { grid-template-columns: 1fr; } }

/* Our Commitments */
.standard-card { background: var(--spct-white); border-radius: var(--spct-radius-card); padding: 26px 24px; box-shadow: var(--spct-shadow-card); }
.standard-card h3 { color: var(--spct-teal); font-size: 17px; margin-bottom: 8px; }
.standard-card p { font-size: 13.5px; margin: 0; }

.heading--spaced { margin-bottom: 44px; }
.social-block { display: flex; flex-direction: column; gap: 20px; }
.social-block-item h3 { color: var(--spct-teal); font-size: 19px; margin-bottom: 4px; }
.social-block-item .subhead { display: block; font-size: 12.5px; font-weight: 600; color: var(--spct-deep-teal); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 10px; }
.social-block-item p { font-size: 14.5px; margin: 0 0 12px; }
.practice-list { display: flex; flex-direction: column; gap: 6px; }
.practice-list .checklist-item { align-items: flex-start; gap: 10px; }
.practice-list .check-bullet { width: 16px; height: 16px; background-size: 9px 9px; margin-top: 3px; }
.practice-list span:not(.check-bullet) { font-size: 13.5px; color: var(--spct-grey); line-height: 1.6; }
.card-duration {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--spct-deep-teal); /* aqua on white card = 1.92:1, fails AA */
}
.card--centered { align-items: center; text-align: center; }
.partner-grid { margin-bottom: 40px; }
.partner-card {
  text-align: center;
  font-family: var(--spct-font-display);
  font-weight: 600;
  color: var(--spct-deep-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  border: none;
}
.partner-logo { width: 100%; object-fit: contain; }
.choose-card { text-decoration: none; }
.choose-card:hover { border-color: var(--spct-aqua); }
.choose-card .cta-label { color: var(--spct-deep-teal); font-weight: 700; font-size: 13px; }

.media-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
.media-placeholder { background: var(--spct-mint); border-radius: var(--spct-radius-card); min-height: 320px; justify-self: center; width: 320px; }
.media-photo { width: 320px; height: 320px; border-radius: var(--spct-radius-card); object-fit: cover; justify-self: center; }
@media (max-width: 900px) { .media-row { grid-template-columns: 1fr; } .media-photo { width: 100%; height: auto; aspect-ratio: 1; } }

.cta-contact-line { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.75); }

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

/* Hero */
.hero {
  background-size: cover;
  background-position: center;
  min-height: 640px;
  display: flex;
  align-items: center;
  position: relative;
}
.hero--short { min-height: 420px; }
/* Interior-page hero: shorter than Home's full-bleed 640px. */
.hero--page { min-height: 0; padding: 0 68px; }
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(0, 20, 20, 0.78) 0%, rgba(0, 20, 20, 0.55) 40%, rgba(0, 20, 20, 0.15) 75%);
}
/* No local photography exists yet for most interior pages (design handoff
   only shipped one hero photo, and the rest are hotlinked to the old WP
   site, which we're not allowed to leave live). Gradient stand-in until
   real photography is sourced - flagged per-page in each page's frontmatter. */
.hero--no-photo { background: linear-gradient(135deg, var(--spct-deep-teal) 0%, var(--spct-teal) 100%); }
.hero--no-photo::before { content: none; }

/* Mid-page photo-background sections (darker overlay than the hero, no
   min-height/centering) - e.g. "Who We're Best For". Same no-photo
   gradient fallback as .hero--no-photo. */
.photo-section {
  position: relative;
  background: linear-gradient(135deg, var(--spct-deep-teal) 0%, var(--spct-teal) 100%);
}
.photo-section .container { position: relative; z-index: 1; }
.photo-section h2 { color: var(--spct-white); }
.photo-section p { color: rgba(255, 255, 255, 0.85); }
.hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--spct-container);
  margin: 0 auto;
  padding: 80px 32px;
  width: 100%;
}
.hero--page .hero-content { padding: 40px 32px; }
.hero-content > .hero-copy { max-width: 640px; }
.hero .eyebrow { color: var(--spct-aqua); }
.hero h1 { color: var(--spct-white); margin-bottom: 24px; }
.hero p { color: rgba(255, 255, 255, 0.82); font-size: 17px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 40px; }
.hero-tagline {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--spct-aqua);
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

/* Pull quote */
.pull-quote {
  max-width: var(--spct-container-text);
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.pull-quote-mark {
  font-family: var(--spct-font-display);
  font-size: 88px;
  font-weight: 600;
  color: var(--spct-teal);
  line-height: 0.6;
  margin-bottom: 8px;
}
.pull-quote blockquote {
  font-family: var(--spct-font-display);
  font-size: 25px;
  font-weight: 600;
  color: var(--spct-deep-teal);
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin: 0;
}
.pull-quote-attribution { font-size: 13px; color: var(--spct-deep-teal); margin-top: 16px; } /* --spct-slate on white was 3.48:1, fails AA */

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* --spct-deep-teal, not the primary --spct-teal: white nav text on
     plain teal maxes at 4.21:1 even fully opaque (under the 4.5:1 AA
     minimum), which forced the nav text to blow up to "large text" size
     to comply. Deep teal is an official brand color too (the guideline's
     "Supporting Brand Colors" swatch, #005F5A) and gives white text
     7.54:1 at full opacity / 5.45:1 at 80% — enough headroom to keep
     nav text small and still be compliant, no size trade-off needed. */
  background: var(--spct-deep-teal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header .container {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-logo img { height: 40px; width: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
/* :not(.btn) so this can't out-specificity .btn-primary's text color —
   it did before (.site-nav a > .btn-primary), making the "Contact Us"
   button render white-on-white and invisible. */
.site-nav a:not(.btn) {
  font-size: 14.5px; /* +2px over the original 12.5px mockup spec */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85); /* 5.93:1 on deep-teal — well past AA */
  padding: 8px 11px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.site-nav a:not(.btn):hover { color: var(--spct-white); }
.site-nav a.active { color: var(--spct-white); text-decoration: underline; text-underline-offset: 4px; } /* not color alone — WCAG 1.4.1 */
.site-nav .btn { margin-left: 10px; padding: 9px 18px; font-size: 13.5px; }
.nav-toggle { display: none; color: var(--spct-white); border-color: rgba(255, 255, 255, 0.5); }
.nav-toggle:hover { border-color: var(--spct-white); }

/* Footer */
.site-footer {
  background: var(--spct-footer-bg);
  color: rgba(255, 255, 255, 0.75);
  padding: 72px 0 32px;
  font-size: 13.5px;
}
.site-footer a { color: rgba(255, 255, 255, 0.75); }
.site-footer a:hover { color: var(--spct-white); }
.site-footer h4 {
  font-family: var(--spct-font-body);
  color: var(--spct-white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.footer-grid {
  display: flex;
  gap: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-wrap: wrap;
}
.footer-brand { flex: 0 0 300px; display: flex; flex-direction: column; gap: 16px; }
.footer-links-group { flex: 1 1 480px; display: flex; gap: 40px; flex-wrap: wrap; }
.footer-links-group > div { flex: 1 1 160px; }
.footer-logo { height: 36px; }
.footer-about-text { color: rgba(255, 255, 255, 0.6); max-width: 320px; margin: 0; }
.footer-contact-lines { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-link-static { color: rgba(255, 255, 255, 0.6); } /* unlinked service - no page yet */
.footer-social { display: flex; gap: 12px; margin: 0 0 20px; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.footer-actions { display: flex; flex-direction: column; gap: 12px; }
.footer-outline-btn { color: var(--spct-white); border-color: rgba(255, 255, 255, 0.5); }
.footer-outline-btn:hover { border-color: var(--spct-white); }
.footer-bottom {
  margin-top: 20px;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6); /* was .55 = 4.31:1, just under AA; .6 = 4.8:1 */
}

/* Forms */
.form-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; }
.form-field--full { flex-basis: 100%; }
.consultation-form { max-width: var(--spct-container-text); margin: 0 auto; }
.consultation-form .btn { margin-bottom: 20px; }
.form-field label { font-size: 13px; font-weight: 600; color: var(--spct-ink); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: var(--spct-font-body);
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid var(--spct-mint);
  border-radius: 6px;
  background: var(--spct-white);
  color: var(--spct-ink);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-note { font-size: 12px; color: var(--spct-grey); }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--spct-mint); padding: 20px 0; }
.faq-item h3 { margin-bottom: 8px; }
.faq-card { background: var(--spct-white); border-radius: 10px; padding: 22px 26px; }
.faq-card h3 { font-size: 15.5px; margin-bottom: 8px; }
.faq-card p { font-size: 13.5px; margin: 0; }
.faq-list { display: flex; flex-direction: column; gap: 24px; }

/* Checklist (check-bullet + text rows, e.g. "Who We're Best For").
   A plain checkmark, not the branded icon-badge: the badge SVGs are a
   solid teal square, which nearly disappears against the teal/deep-teal
   gradient these checklists tend to sit on. */
.checklist { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.checklist-item { display: flex; align-items: flex-start; gap: 12px; }
.check-bullet {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background-color: var(--spct-teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 12L13 4' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 10px;
}
.photo-section .check-bullet,
.hero .check-bullet {
  background-color: var(--spct-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.2 12L13 4' stroke='%23005F5A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.checklist-item span { font-size: 15px; line-height: 1.6; }
.hero .checklist-item span,
.photo-section .checklist-item span { color: var(--spct-white); }

/* Service path / pillar cards */
.path-card h3 { color: var(--spct-teal); font-size: 20px; margin-bottom: 4px; }
.path-card .card-duration { margin-bottom: 4px; }
.path-card p { font-size: 13.5px; margin: 0; }
.path-card p strong { color: var(--spct-ink); }

.pillar-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.pillar-grid h3 { color: var(--spct-teal); font-size: 17px; margin-bottom: 6px; }
.pillar-grid p { font-size: 14px; margin: 0; }

/* Chips (e.g. "What We Plan") */
.chip-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.chip {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--spct-deep-teal);
  background: var(--spct-white);
  padding: 10px 18px;
  border-radius: 8px;
  box-shadow: var(--spct-shadow-card);
}

.badge-outline {
  font-size: 12px;
  font-weight: 600;
  color: var(--spct-deep-teal);
  background: var(--spct-white);
  border: 1px solid var(--spct-aqua);
  padding: 6px 14px;
  border-radius: 20px;
}

/* Blog hub / post-detail two-column layout (main content + sidebar) */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
.blog-empty-message { padding: 48px 0; text-align: center; font-size: 14.5px; color: var(--spct-slate); }
.card--link { display: block; color: inherit; text-decoration: none; transition: border-color 180ms ease, box-shadow 180ms ease; }
.card--link:hover { text-decoration: none; border-color: var(--spct-aqua); box-shadow: 0 4px 16px rgba(0, 95, 90, 0.08); }

.blog-sidebar { display: flex; flex-direction: column; gap: 36px; }
.sidebar-card { display: flex; flex-direction: column; gap: 12px; }
.sidebar-card h3 {
  font-family: var(--spct-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spct-deep-teal);
  margin: 0;
}
.sidebar-search-form { margin: 0; }
.sidebar-search-input-wrap { position: relative; }
.sidebar-search-input {
  width: 100%;
  font-family: var(--spct-font-body);
  font-size: 13.5px;
  padding: 12px 34px 12px 16px;
  border: 1.5px solid var(--spct-mint);
  border-radius: 6px;
  background: var(--spct-white);
  color: var(--spct-ink);
}
.sidebar-search-input:focus { border-color: var(--spct-aqua); outline: none; }
/* Hide the native search-cancel affordance (Webkit/Blink only, and it
   doesn't navigate/resubmit on its own) in favor of the real clear link
   below, which actually removes ?q= and re-filters the feed. */
.sidebar-search-input::-webkit-search-cancel-button { display: none; }
.sidebar-search-clear {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  color: var(--spct-slate);
}
.sidebar-search-clear:hover { color: var(--spct-deep-teal); text-decoration: none; }

.sidebar-category-list { display: flex; flex-direction: column; gap: 2px; }
.sidebar-category {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--spct-ink);
}
.sidebar-category:hover { background: var(--spct-mint); text-decoration: none; }
.sidebar-category-count { font-size: 11px; color: var(--spct-slate); }
.sidebar-category--active { background: var(--spct-teal); font-weight: 600; color: var(--spct-white); }
.sidebar-category--active:hover { background: var(--spct-deep-teal); }
.sidebar-category--active .sidebar-category-count { color: rgba(255, 255, 255, 0.75); }

.sidebar-recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.sidebar-recent-list a { display: flex; gap: 12px; align-items: flex-start; color: inherit; }
.sidebar-recent-list a:hover { text-decoration: none; }
.sidebar-recent-list a:hover .sidebar-recent-title { color: var(--spct-deep-teal); text-decoration: underline; }
.sidebar-recent-list img, .sidebar-recent-thumb-placeholder {
  width: 56px; height: 56px; border-radius: 6px; object-fit: cover; flex: 0 0 56px;
}
.sidebar-recent-thumb-placeholder { background: linear-gradient(135deg, var(--spct-mint) 0%, var(--spct-aqua) 100%); }
.sidebar-recent-copy { display: flex; flex-direction: column; gap: 4px; }
.sidebar-recent-title { font-size: 13px; font-weight: 600; color: var(--spct-ink); line-height: 1.35; }
.sidebar-recent-date { font-size: 11.5px; color: var(--spct-slate); }

/* Blog post detail: back link, byline row, lede, pull-quote callout */
.hero-back-link { display: inline-block; font-size: 13px; font-weight: 600; color: var(--spct-aqua); margin-bottom: 18px; }
.hero-back-link:hover { color: var(--spct-white); text-decoration: none; }
.blog-post-byline { padding-top: 64px; padding-bottom: 20px; }
.byline-row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--spct-mint); padding-bottom: 32px; }
.byline-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--spct-teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--spct-font-display); font-size: 15px; font-weight: 600; color: var(--spct-white); flex: 0 0 44px;
}
.byline-name { display: block; font-size: 14px; font-weight: 600; color: var(--spct-ink); }
.byline-meta { display: block; font-size: 12.5px; color: var(--spct-slate); }
.blog-post-body-section { padding-top: 0; padding-bottom: 88px; }
.blog-post-body { display: flex; flex-direction: column; gap: 20px; }
.blog-post-lede { font-family: var(--spct-font-display); font-size: 19px; font-weight: 600; color: var(--spct-deep-teal); line-height: 1.55; margin: 0; }
.blog-post-body p { font-size: 16px; color: #3d3d3d; line-height: 1.85; margin: 0; }
.pull-quote-callout { background: var(--spct-mint); border-radius: 12px; padding: 28px 32px; margin-top: 12px; }
.pull-quote-callout p { font-family: var(--spct-font-display); font-size: 17px; font-weight: 600; color: var(--spct-deep-teal); line-height: 1.5; margin: 0; }
.tag-pill-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.blog-post-cta { padding: 64px 0; }
.blog-post-cta h2 { font-size: 28px; }

@media (max-width: 900px) {
  .blog-layout { grid-template-columns: 1fr; }
}

/* Contact page two-column layout */
.contact-layout { display: grid; grid-template-columns: 340px 1fr; gap: 72px; align-items: flex-start; }
.contact-info-row { display: flex; align-items: center; gap: 14px; }
.contact-info-row .icon-badge { width: 36px; height: 36px; }
.contact-info-row span { font-size: 14px; font-weight: 500; color: var(--spct-ink); }
.privacy-card { background: var(--spct-white); border-radius: 10px; padding: 20px; box-shadow: var(--spct-shadow-card); }
.privacy-card .eyebrow { font-size: 12px; margin-bottom: 8px; }
.privacy-card p { font-size: 12.5px; margin: 0; }
.contact-form-card {
  background: var(--spct-white);
  border-radius: 12px;
  padding: 36px;
  box-shadow: 0 4px 24px rgba(0, 95, 90, 0.08);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-form-card .form-row { margin-bottom: 0; } /* spacing now comes from the form's own gap */
.contact-form-card .btn { align-self: flex-start; }
.confirmation-card {
  background: var(--spct-white);
  border-radius: 16px;
  padding: 64px 48px;
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 4px 32px rgba(0, 95, 90, 0.1);
}
.confirmation-card .icon-badge { display: block; margin: 0 auto 20px; }
.confirmation-card p { font-size: 15px; color: var(--spct-ink); margin: 0; }

/* Grav Form plugin markup — matches existing .form-field/.form-row styling
   above; these classes come from the plugin's own field/button templates,
   not this theme's hand-written markup. */
.contact-form-card .form-columns { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 0; }
.contact-form-card .form-columns > .form-field { flex: 1 1 220px; }
.contact-form-card .buttons { margin: 0; align-self: flex-start; }
.contact-form-card .form-honeybear { display: none; }
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 40px; }
  .pillar-grid { grid-template-columns: 1fr; }
}

.hero-copy--wide { max-width: 800px; }
.service-footnote { max-width: 700px; margin: 32px auto 0; color: var(--spct-slate); text-align: center; }
.heading--deep-teal { color: var(--spct-deep-teal); }
.emphasis-line { color: var(--spct-deep-teal); font-weight: 600; }
.highlight-strip { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
.highlight-strip .eyebrow { margin: 0; font-size: 12.5px; }
.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cta-row h2 { margin: 0; }
@media (max-width: 600px) { .cta-row { justify-content: center; text-align: center; } }

/* Tabs (Policy page). Mockup used plain --spct-teal for this header, but
   white tab-link text there tops out at 4.21:1 (fails AA) same as the
   nav bar - deep-teal fixes it the same way, with real margin at 13px. */
.policy-header { background: var(--spct-deep-teal); padding: 96px 0 0; }
.policy-header .eyebrow { margin-bottom: 16px; }
.policy-header h1 { color: var(--spct-white); margin-bottom: 40px; }
.tabs-header { display: flex; gap: 6px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.tab-link {
  padding: 16px 18px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75); /* 6.49:1 on deep-teal, passes AA */
  border-bottom: 2px solid transparent;
}
.tab-link:hover { color: var(--spct-white); }
.tab-link.active { color: var(--spct-white); border-bottom-color: var(--spct-aqua); }

/* Progressive enhancement: without JS, every section stays visible and
   readable (never hide legal/compliance text behind a broken interaction).
   With JS, .tabs-js is added and normal tab show/hide behavior applies. */
.tab-panel { padding-top: 40px; }
.tab-panel:first-child { padding-top: 0; }
.tabs-js .tab-panel { display: none; padding-top: 0; }
.tabs-js .tab-panel.active { display: block; }

.effective-date { font-size: 13px; color: var(--spct-deep-teal); margin-bottom: 32px; }
.legal-section { margin-bottom: 28px; }
.legal-section h3 { font-size: 16.5px; margin-bottom: 8px; }
.legal-section p { font-size: 14px; margin: 0 0 10px; }

/* Responsive */
@media (max-width: 900px) {
  h1 { font-size: 40px; }
  h2 { font-size: 28px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { flex-direction: column; gap: 32px; }
  .footer-brand { flex-basis: auto; }
}
@media (max-width: 1040px) {
  .site-nav { display: none; }
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--spct-deep-teal);
    padding: 12px 16px 20px;
  }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 700px) {
  .grid-4, .grid-3 { grid-template-columns: 1fr; }
  .hero-content { padding: 56px 24px; }
  h1 { font-size: 32px; }
}

/* Schedule a Consultation - live booking embed */
.schedule-embed {
  display: block;
  width: 100%;
  height: 900px;
  border: 1px solid var(--spct-mint);
  border-radius: var(--spct-radius-card);
  box-shadow: var(--spct-shadow-card);
}
.schedule-embed-fallback { text-align: center; font-size: 13px; color: var(--spct-slate); margin-top: 16px; }
@media (max-width: 700px) {
  .schedule-embed { height: 1100px; }
}