/* Way USA theme v2: clean and official. A bright azure blue band at the top and bottom of every page, white content, a soft warm yellow on
   the main actions, thin lines. Loaded after each page's own styles (added by tools/apply_theme.py). */
:root { --wu-navy: #0b2545; --wu-navy-2: #12325c; --wu-ink: #1a2a40; --wu-mute: #4a5a70; --wu-line: #e3e7ee; --wu-soft: #e9f3fe; --wu-cta: #ffd166; --wu-cta-hover: #ffc53d; --wu-accent: #1565c0; --wu-on-navy: #eaf3ff; --wu-band: #1565c0; --wu-band-2: #1e70cc; }

body { background: #fff !important; color: var(--wu-ink); }
h1, h2, h3 { color: var(--wu-navy); letter-spacing: -.03em; }

/* Small labels above headings: the azure accent. */
.section-kicker, .eyebrow, .k, .kicker { color: var(--wu-accent) !important; letter-spacing: .02em; }

/* ---------- light header (every page): white, like the bright photo under it ---------- */
html, body { overflow-x: clip; }
body > header, header.shell { background: #fff !important; border: 0 !important; }
/* header.shell is as wide as the content: a wide layer behind it paints the white and the thin line across the whole width. */
header.shell { position: relative; isolation: isolate; z-index: 30; }
header.shell::before { content: ""; position: absolute; inset: 0 -100vmax; background: #fff; border-bottom: 1px solid var(--wu-line); z-index: -1; }
body > header .brand, body > header .back, body > header nav a:not(.nav-cta):not(.lang-toggle), body > header .secure, body > header .secure span { color: var(--wu-navy) !important; }
body > header .lang-toggle { color: var(--wu-navy) !important; border: 1px solid var(--wu-navy) !important; background: transparent !important; }
body > header .lang-toggle:hover { background: var(--wu-soft) !important; }
body > header .menu-toggle span { background: var(--wu-navy) !important; }
@media (max-width: 900px) {
  #primary-nav.is-open { background: #fff !important; border-color: var(--wu-line) !important; box-shadow: 0 12px 30px rgba(11, 37, 69, .15) !important; }
}
body > header a:focus-visible, body > header button:focus-visible { outline: 3px solid var(--wu-accent) !important; outline-offset: 2px; }
/* the small "private service" line above the header: light, not a dark stripe */
.notice { background: var(--wu-soft) !important; color: var(--wu-navy) !important; border-bottom: 1px solid var(--wu-line); }

/* ---------- blue hero (home, service and landing pages) ---------- */
.hero { background: var(--wu-band) !important; color: #fff; }
.hero h1, .hero-copy h1 { color: #fff !important; }
.hero h1 span { color: #d4e7ff !important; }
.hero .lead, .hero-copy p, .hero > .shell > div > p { color: var(--wu-on-navy) !important; }
.hero .k, .hero .kicker, .hero .section-kicker, .hero .eyebrow { color: #fff !important; }
.hero .button.secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .8) !important; }
.hero .button.secondary:hover { background: rgba(255, 255, 255, .1) !important; }
.hero a:focus-visible, .hero button:focus-visible { outline: 3px solid #fff !important; }
/* the white cards inside the navy hero keep their own dark text */
.hero .hero-card, .hero .visual-card { background: #fff !important; }
.hero .hero-card h2, .hero .visual-card h3, .hero .visual-card strong { color: var(--wu-navy) !important; }
.floating-note { background: #fff !important; color: var(--wu-navy) !important; border: 1px solid var(--wu-line); border-radius: 8px !important; box-shadow: none !important; }
.floating-note strong { color: var(--wu-navy) !important; }

/* ---------- blue footer ---------- */
body > footer, footer { background: var(--wu-band) !important; color: var(--wu-on-navy) !important; border: 0 !important; }
footer a, footer .footer-brand { color: #fff !important; }

/* ---------- main actions: soft yellow with navy text; secondary: outlined navy ---------- */
.button.primary, .nav-cta, .price-btn, .pkg-btn, .submit, .sharebtn, .cta .button, .cta .btn, .gate button[type="submit"] {
  background: var(--wu-cta) !important; color: var(--wu-navy) !important; border: 1px solid #e9b949 !important; box-shadow: none !important;
}
.button.primary:hover, .nav-cta:hover, .price-btn:hover, .pkg-btn:hover, .submit:hover, .sharebtn:hover, .cta .button:hover, .cta .btn:hover, .gate button[type="submit"]:hover {
  background: var(--wu-cta-hover) !important;
}
.button.secondary, .tier-wa { background: #fff !important; color: var(--wu-navy) !important; border: 1px solid var(--wu-navy) !important; box-shadow: none !important; }
.button.secondary:hover, .tier-wa:hover { background: var(--wu-soft) !important; }
.whatsapp-button { box-shadow: none !important; }
.price-btn, .pkg-btn, .button, .nav-cta, .submit, .btn, .sharebtn { border-radius: 8px !important; }

/* ---------- cards: thin lines, sharper corners, almost no shadow ---------- */
.price-card, .about-card, .svc-card, .hero-card, .check-card, .aud-card, .visual-card, .formcard, .refer-card, .pkg, .tier, .famcard, .fam, .file, .share, .faq-item, .season {
  border-radius: 12px !important; box-shadow: 0 1px 2px rgba(11, 37, 69, .05) !important; border-color: var(--wu-line) !important;
}
.pkg.top { border: 2px solid var(--wu-navy) !important; }
.pkg-badge { background: var(--wu-cta) !important; color: var(--wu-navy) !important; border-radius: 6px !important; }
.tier-save { background: var(--wu-soft) !important; color: var(--wu-navy) !important; border-radius: 6px !important; }

/* ---------- quieter decoration; sections alternate white / light blue ---------- */
.hero:before, .hero:after, .yellow-shape { display: none !important; }
section.hero.shell:before { display: none !important; }
.about, .how, .aud, .pkgs { background: var(--wu-soft) !important; }
.pkgs { padding-top: 48px !important; }

.services-intro .section-kicker, .service-callout strong, .cta .k, .cta .kicker, .cta .section-kicker { color: var(--wu-pink) !important; }

/* The dark blocks inside the page take the same azure blue, with white labels. */
.services-intro, .cta { background: var(--wu-band) !important; }
.services-intro .section-kicker, .service-callout strong, .cta .k, .cta .kicker, .cta .section-kicker { color: #fff !important; }
.services-intro p, .services-intro .section-intro, .service-callout, .cta p { color: var(--wu-on-navy) !important; }

/* The "one step at a time" note is not shown (the owner removed it). */
.floating-note { display: none !important; }

/* ---------- home page: the family photo as the background of the top section ---------- */
/* The section spans the full width; the text stays inside the usual 1180px column on the side of the empty part of the photo. */
section.hero.shell {
  max-width: none !important; width: 100%; padding-inline: max(20px, calc((100% - 1180px) / 2 + 28px)) !important;
  grid-template-columns: minmax(0, 560px) 1fr !important;
  /* the photo keeps its full height (never cropped across a wide screen); the rest of the width is the same soft light colour */
  background: #f4f7fb url("/assets/hero-family.webp") left bottom / auto 100% no-repeat !important;
  min-height: 600px;
}
/* a soft white wash on the text side so the heading reads clearly; the family side stays clear */
section.hero.shell::after {
  content: "" !important; display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 1 !important;
  width: auto !important; height: auto !important; border-radius: 0 !important;
  background: linear-gradient(to left, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 72%) !important;
}
section.hero.shell > * { position: relative; z-index: 1; }
section.hero.shell > .visual { display: none !important; }
section.hero.shell h1 { color: var(--wu-navy) !important; }
section.hero.shell h1 span { color: var(--wu-accent) !important; }
section.hero.shell .lead { color: var(--wu-ink) !important; }
section.hero.shell .eyebrow { color: var(--wu-accent) !important; }
section.hero.shell .button.secondary { background: rgba(255, 255, 255, .9) !important; color: var(--wu-navy) !important; border: 1px solid var(--wu-navy) !important; }
section.hero.shell a:focus-visible { outline: 3px solid var(--wu-accent) !important; }
/* English reads left to right: the photo is mirrored so the family is on the right, and the wash comes from the left */
html[dir="ltr"] section.hero.shell { background-image: url("/assets/hero-family-ltr.webp") !important; background-position: right bottom !important; }
html[dir="ltr"] section.hero.shell::after { background: linear-gradient(to right, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 72%) !important; }
/* Phone: the photo fills the top section and the text sits on it, over a navy shade at the bottom so it reads clearly */
@media (max-width: 760px) {
  section.hero.shell, html[dir="ltr"] section.hero.shell {
    grid-template-columns: 1fr !important; align-content: end; min-height: min(760px, 92svh) !important;
    background: #0b2545 url("/assets/hero-family-phone.webp") center top / cover no-repeat !important;
    padding-top: 230px !important; padding-bottom: 30px !important;
  }
  section.hero.shell::after, html[dir="ltr"] section.hero.shell::after {
    display: block !important;
    background: linear-gradient(to top, rgba(11, 37, 69, .95) 0%, rgba(11, 37, 69, .86) 50%, rgba(11, 37, 69, .5) 68%, rgba(11, 37, 69, 0) 84%) !important;
  }
  section.hero.shell h1 { color: #fff !important; }
  section.hero.shell h1 span { color: #a9cdff !important; }
  section.hero.shell .lead { color: #eaf3ff !important; }
  section.hero.shell .eyebrow { color: #cfe4ff !important; }
  section.hero.shell .button.secondary { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .85) !important; }
  section.hero.shell a:focus-visible { outline-color: #fff !important; }
}

/* ---------- service pages with a photo behind the top section (tools/apply_hero_photos.py) ---------- */
section.hero.hero-photo {
  background: #f4f7fb var(--hero-img) left bottom / auto 100% no-repeat !important; color: var(--wu-ink);
  position: relative; isolation: isolate; min-height: 520px; display: flex; align-items: center;
}
section.hero.hero-photo::after {
  content: "" !important; display: block !important; position: absolute; inset: 0 !important; z-index: -1; pointer-events: none;
  width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important;
  background: linear-gradient(to left, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 72%) !important;
}
section.hero.hero-photo > .shell { width: 100%; grid-template-columns: minmax(0, 560px) 1fr !important; }
section.hero.hero-photo h1 { color: var(--wu-navy) !important; }
section.hero.hero-photo .lead { color: var(--wu-ink) !important; }
section.hero.hero-photo .k, section.hero.hero-photo .kicker { color: var(--wu-accent) !important; }
html[dir="ltr"] section.hero.hero-photo { background-image: var(--hero-img-ltr) !important; background-position: right bottom !important; }
html[dir="ltr"] section.hero.hero-photo::after { background: linear-gradient(to right, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, .35) 58%, rgba(255, 255, 255, 0) 72%) !important; }
.hero-after { padding-top: 28px !important; }
.hero-after .card { max-width: 760px; }
@media (max-width: 760px) {
  section.hero.hero-photo, html[dir="ltr"] section.hero.hero-photo {
    background: #0b2545 var(--hero-img-phone) center top / cover no-repeat !important;
    min-height: min(560px, 78svh); align-items: flex-end; padding-top: 200px !important; padding-bottom: 28px !important;
  }
  section.hero.hero-photo::after, html[dir="ltr"] section.hero.hero-photo::after {
    background: linear-gradient(to top, rgba(11, 37, 69, .95) 0%, rgba(11, 37, 69, .86) 50%, rgba(11, 37, 69, .5) 68%, rgba(11, 37, 69, 0) 84%) !important;
  }
  section.hero.hero-photo > .shell { grid-template-columns: 1fr !important; }
  section.hero.hero-photo h1 { color: #fff !important; }
  section.hero.hero-photo .lead { color: #eaf3ff !important; }
  section.hero.hero-photo .k, section.hero.hero-photo .kicker { color: #cfe4ff !important; }
}

/* guides strip on the home page */
.home-guides { padding: 46px 0; background: #fff; border-top: 1px solid var(--wu-line); }
.home-guides h2 { color: var(--wu-navy); margin: 4px 0 18px; }
.hg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.hg-card { display: block; padding: 16px 18px; border: 1px solid var(--wu-line); border-radius: 12px; background: var(--wu-soft); color: var(--wu-navy); text-decoration: none; line-height: 1.5; }
.hg-card:hover { border-color: var(--wu-accent); }
.hg-all { display: inline-block; margin-top: 16px; color: var(--wu-accent); font-weight: 700; }