/* ============================================================
   Big Moves Inc. — Site Stylesheet
   Warm, modern, accessibility-first redesign
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700;6..12,800&display=swap');

:root {
  /* Brand palette — derived from the Big Moves logo blues + warm photography */
  --navy: #142B42;
  --navy-soft: #1E3A57;
  --blue: #1B7FC4;
  --blue-dark: #135F94;
  --blue-deep: #0E4A74;
  --sky: #EAF4FB;
  --sky-deep: #D6E9F7;
  --cream: #FDFAF4;
  --sand: #F7F0E4;
  /* Accent — light blue (client request 2026-07: replaced the orange) */
  --accent: #7CBDE8;        /* fills, buttons (pair with navy text) */
  --accent-hover: #69B1E2;
  --accent-strong: #3F94CE; /* large accent text, icons on light bg */
  --accent-deep: #2270A3;   /* small text & links on white (AA) */
  --gold: #E9A13B;
  --ink: #24313F;
  --ink-soft: #47576A;
  --white: #FFFFFF;
  --border: #E3DED2;
  --border-blue: #C9E0F1;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-blob: 58% 42% 44% 56% / 52% 47% 53% 48%;

  --shadow-sm: 0 2px 8px rgba(20, 43, 66, 0.07);
  --shadow-md: 0 10px 30px rgba(20, 43, 66, 0.10);
  --shadow-lg: 0 24px 60px rgba(20, 43, 66, 0.16);

  --wrap: 1180px;
  --transition: 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Keep anchor targets clear of the sticky header */
  scroll-padding-top: 6rem;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--navy);
  line-height: 1.15;
  text-wrap: balance;
  font-weight: 600;
}

h1 { font-size: clamp(2.4rem, 5.4vw, 4rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.55rem); }

p { max-width: 68ch; }

a { color: var(--blue-dark); }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--sky-deep); }

@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;
  }
}

/* ---------- Page transitions ----------
   Softens the hard cut when moving between pages. Browsers without the View
   Transitions API ignore all of this and navigate exactly as they did before,
   so there is nothing to fall back to. */
@view-transition { navigation: auto; }

@keyframes page-leave { to { opacity: 0; } }
@keyframes page-enter { from { opacity: 0; transform: translateY(10px); } }

::view-transition-old(root) {
  animation: page-leave 160ms cubic-bezier(0.25, 1, 0.5, 1) both;
}
::view-transition-new(root) {
  animation: page-enter 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* The sticky header is the one thing common to every page, so hold it still and
   let only the content beneath it change. Deliberately not applied to .topbar,
   which scrolls away and would be snapshotted off-screen. */
.site-header { view-transition-name: site-header; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Utilities ---------- */
.wrap {
  width: min(var(--wrap), 100% - 2.5rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  transition: top var(--transition);
}
.skip-link:focus { top: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-dark);
  margin-bottom: 1rem;
}
.eyebrow::before {
  content: "";
  width: 2.2rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), var(--gold));
}

.accent-word { color: var(--accent-strong); font-style: italic; }
.accent-blue { color: var(--blue-dark); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  min-height: 48px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: var(--accent);
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(124, 189, 232, 0.5);
}
.btn-primary:hover { background: var(--accent-hover); }

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

.btn-light {
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.btn-light:hover { background: var(--sky); }

/* ============================================================
   Header
   ============================================================ */
.topbar {
  background: var(--navy);
  color: #DCE9F5;
  font-size: 0.88rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem 1.5rem;
  padding-block: 0.5rem;
}
.topbar-group { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; }
.topbar a, .topbar span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
  text-decoration: none;
}
.topbar a:hover { color: #fff; text-decoration: underline; }
.topbar svg { width: 0.95rem; height: 0.95rem; flex: none; color: var(--gold); }

/* On phones, keep the topbar to a single compact row: drop the
   hours/location group and let phone + email share the line. */
@media (max-width: 700px) {
  .topbar { font-size: 0.82rem; }
  .topbar .wrap { justify-content: center; }
  .topbar-group { gap: 0.3rem 1.1rem; }
  .topbar-group:last-child { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253, 250, 244, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.8rem;
}
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }
@media (max-width: 480px) {
  .brand img { height: 40px; }
  .site-header .wrap { padding-block: 0.65rem; }
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  padding: 0;
}
.primary-nav a {
  display: inline-block;
  padding: 0.55rem 0.8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
@media (min-width: 921px) and (max-width: 1180px) {
  .nav-cta { display: none; }
}
.primary-nav a:hover { background: var(--sky); color: var(--blue-deep); }
.primary-nav a[aria-current="page"] {
  background: var(--navy);
  color: #fff;
}
.nav-cta { flex: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.5rem;
  cursor: pointer;
  color: var(--navy);
}
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 920px) {
  .nav-toggle { display: inline-flex; }
  .nav-cta { display: none; }
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    display: none;
    padding: 1rem 1.25rem 1.5rem;
    /* Never taller than the viewport — scroll inside the menu instead */
    max-height: calc(100vh - 5rem);
    max-height: calc(100dvh - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .primary-nav.open { display: block; }
  /* Freeze the page behind the open menu */
  body.nav-open { overflow: hidden; }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: 0.25rem; }
  .primary-nav a { display: block; padding: 0.85rem 1rem; font-size: 1.05rem; }
  .primary-nav .mobile-cta { margin-top: 0.75rem; }
}
@media (min-width: 921px) {
  .primary-nav .mobile-cta { display: none; }
}

/* ============================================================
   Hero (home)
   ============================================================ */
.hero {
  position: relative;
  background:
    radial-gradient(60rem 30rem at 110% -10%, var(--sky-deep) 0%, transparent 60%),
    radial-gradient(50rem 26rem at -15% 110%, var(--sand) 0%, transparent 55%),
    var(--cream);
  overflow: clip;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
}
.hero-copy .eyebrow { margin-bottom: 1.2rem; }
.hero-copy h1 { margin-bottom: 1.1rem; }
.hero-sub {
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 2.2rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; list-style: none; }
.hero-badges li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  border: 1px solid var(--border-blue);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy-soft);
  box-shadow: var(--shadow-sm);
}
.hero-badges svg { width: 1rem; height: 1rem; color: var(--accent-strong); flex: none; }

.hero-media { position: relative; }
.hero-media::before {
  content: "";
  position: absolute;
  inset: -8% -6% -8% -6%;
  background: linear-gradient(135deg, var(--sky-deep), var(--sand));
  border-radius: var(--radius-blob);
  z-index: 0;
}
.hero-slideshow {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1000ms ease;
}
.hero-slide.active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-card {
  position: absolute;
  z-index: 2;
  left: -1.25rem;
  bottom: -1.5rem;
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 0.9rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  max-width: 21rem;
}
.hero-card .stars { color: var(--gold); display: flex; gap: 2px; }
.hero-card .stars svg { width: 1rem; height: 1rem; }
.hero-card p { font-size: 0.88rem; font-weight: 700; color: var(--navy); line-height: 1.35; }

@media (max-width: 920px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-media { margin-top: 1rem; }
  .hero-card { left: 0.75rem; bottom: -1.25rem; }
}

/* ============================================================
   Sections
   ============================================================ */
.section { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.section-tint { background: var(--sky); }
.section-sand { background: var(--sand); }
.section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head.center p { margin-inline: auto; }
.section-head h2 { margin-bottom: 0.9rem; }
.section-head p { color: var(--ink-soft); font-size: 1.08rem; }
.section-head p + p { margin-top: 1rem; }

/* Split (image + copy) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split.reverse > .split-media { order: 2; }
.split-media { position: relative; }
.split-media::before {
  content: "";
  position: absolute;
  inset: -6%;
  background: linear-gradient(140deg, var(--sky-deep), transparent 70%);
  border-radius: var(--radius-blob);
}
.split-media img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.split-copy h2 { margin-bottom: 1.1rem; }
.split-copy p + p { margin-top: 1rem; }
.split-copy p { color: var(--ink-soft); }
.split-copy .lead { font-size: 1.1rem; }
.split-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.8rem; }

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse > .split-media { order: 0; }
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.4rem;
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin: 1.1rem 0 0.55rem; }
.card p { color: var(--ink-soft); font-size: 0.98rem; }
.card-icon {
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--blue-deep);
}
.card-icon svg { width: 1.5rem; height: 1.5rem; }
.card:nth-child(3n + 2) .card-icon { background: #E1F0FA; color: var(--accent-deep); }
.card:nth-child(3n) .card-icon { background: #FCF3E2; color: #A16712; }

/* Mission band */
.mission-band {
  background:
    radial-gradient(50rem 26rem at 85% 120%, rgba(27, 127, 196, 0.35), transparent 60%),
    var(--navy);
  color: #E9F1F9;
  text-align: center;
}
.mission-band .eyebrow { color: var(--gold); justify-content: center; }
.mission-band .eyebrow::before { background: var(--gold); }
.mission-band blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.4;
  max-width: 56rem;
  margin: 0 auto;
  text-wrap: balance;
}
.mission-band blockquote strong { color: var(--gold); font-weight: 600; }

/* Feature list (numbered) */
.feature-list { list-style: none; padding: 0; display: grid; gap: 1rem; counter-reset: feat; }
.feature-list li {
  counter-increment: feat;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.feature-list li::before {
  content: counter(feat, decimal-leading-zero);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-deep);
  border: 2px solid currentColor;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 0.1rem;
}
.feature-list strong { color: var(--navy); }
.feature-list p { color: var(--ink-soft); font-size: 0.98rem; }

/* Checklist */
.check-list { list-style: none; padding: 0; display: grid; gap: 0.7rem; }
.check-list li { display: flex; gap: 0.7rem; align-items: flex-start; color: var(--ink-soft); }
.check-list svg { width: 1.35rem; height: 1.35rem; flex: none; color: var(--blue); margin-top: 0.15rem; }

/* Testimonials */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
}
.testimonial {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.testimonial .stars { display: flex; gap: 3px; color: var(--gold); }
.testimonial .stars svg { width: 1.15rem; height: 1.15rem; }
.testimonial blockquote {
  font-family: var(--font-display);
  font-size: 1.22rem;
  line-height: 1.45;
  color: var(--navy);
}
.testimonial figcaption { display: flex; align-items: center; gap: 0.85rem; margin-top: auto; }
.testimonial figcaption img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sky-deep);
}
.testimonial figcaption span { font-weight: 800; color: var(--navy-soft); font-size: 0.95rem; }

/* Google review CTA */
.google-review-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 2.8rem);
}
.google-review-cta p {
  margin: 0 auto 0.9rem;
  color: var(--ink-soft);
  font-weight: 600;
}
.google-review-cta .btn svg { width: 1.15rem; height: 1.15rem; }

/* Photo strip */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.photo-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}
.photo-strip img:hover { transform: scale(1.02); box-shadow: var(--shadow-md); }
.photo-strip img:nth-child(even) { transform: translateY(0.9rem); }
.photo-strip img:nth-child(even):hover { transform: translateY(0.9rem) scale(1.02); }
/* Stay 3-up on phones too — a 2-column grid would leave the third photo
   stranded beside an empty cell. */

/* CTA band */
.cta-band {
  background:
    radial-gradient(45rem 22rem at -10% -40%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(120deg, var(--accent), var(--accent-strong));
  border-radius: var(--radius-lg);
  color: var(--navy);
  padding: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: 1.4fr auto;
  align-items: center;
  gap: 2rem;
  box-shadow: var(--shadow-lg);
}
.cta-band h2 { color: var(--navy); margin-bottom: 0.7rem; }
.cta-band p { color: var(--navy-soft); font-size: 1.05rem; }
.cta-band .btn-light { color: var(--accent-deep); }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
@media (max-width: 780px) {
  .cta-band { grid-template-columns: 1fr; }
}

/* ============================================================
   Page hero (interior pages)
   ============================================================ */
.page-hero {
  background:
    radial-gradient(48rem 22rem at 90% -30%, rgba(27, 127, 196, 0.4), transparent 60%),
    var(--navy);
  color: #DCE9F5;
  text-align: center;
  padding-block: clamp(3.2rem, 6vw, 5rem);
}
.page-hero h1 { color: #fff; margin-bottom: 0.9rem; }
.page-hero .eyebrow { color: var(--gold); justify-content: center; }
.page-hero .eyebrow::before { background: var(--gold); }
.page-hero p { margin-inline: auto; max-width: 52rem; font-size: 1.1rem; }
.breadcrumb {
  display: inline-flex;
  gap: 0.6rem;
  align-items: center;
  list-style: none;
  padding: 0.4rem 1.1rem;
  margin-top: 1.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}
.breadcrumb a { color: #BBD8EE; text-decoration: none; }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }
.breadcrumb li[aria-current] { color: var(--gold); }
.breadcrumb li + li::before { content: "→"; margin-right: 0.6rem; color: #7FA8C9; }

/* ============================================================
   Services page
   ============================================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.value-col {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.value-col-head {
  padding: 1.5rem 1.6rem 1.2rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.value-col-head .card-icon { flex: none; }
.value-col:nth-child(2) .card-icon { background: #E1F0FA; color: var(--accent-deep); }
.value-col:nth-child(3) .card-icon { background: #FCF3E2; color: #A16712; }
.value-col-body { padding: 1.4rem 1.6rem 1.7rem; }
.value-col-body p { color: var(--ink-soft); font-size: 0.98rem; }
.value-col-body p + p { margin-top: 0.9rem; }
.value-col-body .check-list li { font-size: 0.98rem; }

.guideline-card {
  background: #fff;
  border-left: 6px solid var(--blue);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.8rem;
}
.guideline-card + .guideline-card { margin-top: 1.1rem; }
.guideline-card h3 { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; }
.guideline-card h3 svg { width: 1.4rem; height: 1.4rem; color: var(--blue-dark); flex: none; }
.guideline-card p { color: var(--ink-soft); }
.guideline-card p + p { margin-top: 0.75rem; }

/* ============================================================
   Resources page
   ============================================================ */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.5rem;
}
.resource-cat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.6rem;
}
.resource-cat h2 {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.1rem;
}
.resource-cat h2 .card-icon { width: 2.7rem; height: 2.7rem; flex: none; }
.resource-cat ul { list-style: none; padding: 0; display: grid; gap: 0.35rem; }
.resource-cat a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--navy-soft);
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  transition: background var(--transition), color var(--transition);
}
.resource-cat a:hover { background: var(--sky); color: var(--blue-deep); }
.resource-cat a svg { width: 1rem; height: 1rem; flex: none; color: var(--blue); }
.resource-note {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0 auto 2.2rem;
}

/* ============================================================
   Contact page
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; }
}
.contact-info-list { list-style: none; padding: 0; display: grid; gap: 1rem; margin-top: 1.8rem; }
.contact-info-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem;
  box-shadow: var(--shadow-sm);
}
.contact-info-list .card-icon { width: 2.7rem; height: 2.7rem; flex: none; }
.contact-info-list strong { color: var(--navy); display: block; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; }
.contact-info-list a { color: var(--ink-soft); text-decoration: none; font-weight: 700; }
.contact-info-list a:hover { color: var(--blue-dark); text-decoration: underline; }
.contact-info-list span.detail { color: var(--ink-soft); font-weight: 700; }

.contact-form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
}
.contact-form-card h2 { margin-bottom: 0.4rem; }
.contact-form-card > p { color: var(--ink-soft); margin-bottom: 1.6rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.form-field { display: flex; flex-direction: column; gap: 0.4rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 800; color: var(--navy); font-size: 0.95rem; }
.form-field .req { color: var(--accent-deep); }
.form-field input,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  min-height: 48px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { resize: vertical; min-height: 8.5rem; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(27, 127, 196, 0.2);
}
.form-note { grid-column: 1 / -1; font-size: 0.9rem; color: var(--ink-soft); }
@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ (native details/summary accordion)
   ============================================================ */
.faq-list { display: grid; gap: 0.9rem; max-width: 52rem; margin-inline: auto; }
.faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.4rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  transition: background var(--transition);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--sky); }
.faq-item summary .faq-chevron {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--blue-deep);
  transition: transform var(--transition), background var(--transition);
}
.faq-item summary .faq-chevron svg { width: 1.05rem; height: 1.05rem; }
.faq-item[open] summary .faq-chevron { transform: rotate(180deg); background: var(--sky-deep); }
.faq-answer { padding: 0 1.4rem 1.4rem; color: var(--ink-soft); }
.faq-answer p + p { margin-top: 0.8rem; }
.faq-answer a { font-weight: 700; }

/* ============================================================
   Getting Started steps
   ============================================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  counter-reset: step;
}
.step-card {
  position: relative;
  counter-increment: step;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 2.4rem 1.7rem 1.9rem;
}
.step-card::before {
  content: counter(step);
  position: absolute;
  top: -1.3rem;
  left: 1.5rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: var(--navy);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  box-shadow: 0 6px 16px rgba(124, 189, 232, 0.55);
}
.step-card h3 { margin-bottom: 0.6rem; }
.step-card p { color: var(--ink-soft); font-size: 0.98rem; }
.step-card p + p { margin-top: 0.7rem; }
@media (max-width: 700px) {
  /* Stacked cards need room for the number badge hanging above each one */
  .steps-grid { row-gap: 2.4rem; }
}

/* ============================================================
   Contact path cards
   ============================================================ */
.path-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.path-card {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.7rem 1.6rem;
  text-decoration: none;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.path-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-blue); }
.path-card h3 { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.5rem; font-size: 1.25rem; }
.path-card h3 .card-icon { width: 2.7rem; height: 2.7rem; flex: none; }
.path-card p { color: var(--ink-soft); font-size: 0.95rem; }
.path-card .path-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  font-weight: 800;
  color: var(--accent-deep);
}
.path-card .path-link svg { width: 1rem; height: 1rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  background: var(--navy);
  color: #B9CBDC;
  margin-top: clamp(3rem, 6vw, 5rem);
}
.footer-main {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 2.5rem;
  padding-block: clamp(2.8rem, 5vw, 4rem);
}
.footer-brand img { height: 52px; width: auto; margin-bottom: 1.2rem; }
.footer-brand p { font-size: 0.95rem; line-height: 1.7; }
.footer-social { display: flex; gap: 0.7rem; margin-top: 1.4rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  transition: background var(--transition), transform var(--transition);
}
.footer-social a:hover { background: var(--blue); transform: translateY(-2px); }
.footer-social svg { width: 1.15rem; height: 1.15rem; }

.site-footer h2 {
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.2rem;
}
.footer-links ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-links a {
  color: #B9CBDC;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}
.footer-links a:hover { color: #fff; text-decoration: underline; }

.footer-contact ul { list-style: none; padding: 0; display: grid; gap: 0.9rem; }
.footer-contact li { display: flex; gap: 0.7rem; align-items: flex-start; font-size: 0.95rem; }
.footer-contact svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--gold); margin-top: 0.2rem; }
.footer-contact a { color: #B9CBDC; text-decoration: none; font-weight: 600; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  font-size: 0.88rem;
}
.footer-bottom a { color: #B9CBDC; }
.footer-bottom a:hover { color: #fff; }

@media (max-width: 820px) {
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   Scroll reveal
   ============================================================ */
/* Hidden state applies only when JS is running (html.js), so content is
   always visible without JavaScript. */
html.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(0.33, 1, 0.68, 1);
}
html.js .reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; }
}