/* ==========================================================================
   PROS — main stylesheet
   Layout language adapted from the supplied reference: split hero, notched
   image shapes, pill buttons with circular icon badges, flat colour blocks.
   Palette/type are PROS brand assets throughout.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: var(--leading-tight); font-weight: 700; }
p { margin: 0; }
a { color: inherit; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: var(--space-4); top: -100px;
  z-index: var(--z-modal);
  background: var(--color-surface-invert); color: var(--color-on-invert);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-pill); font-weight: 700; text-decoration: none;
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ------------------------------ Buttons -------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-height: 52px;                     /* >= 44px touch target */
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border: 2px solid transparent; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-base); font-weight: 700;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn__icon {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--color-accent); color: var(--brand-navy-900);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn__icon svg { width: 17px; height: 17px; }

.btn--primary { background: var(--brand-navy-800); color: #FFFFFF; border-color: var(--brand-navy-800); }
.btn--primary:hover { background: var(--brand-navy-600); border-color: var(--brand-navy-600); }
.btn--primary:hover .btn__icon { transform: translateX(3px); }

.btn--ghost { background: transparent; color: var(--color-foreground); border-color: var(--color-border-strong); }
.btn--ghost .btn__icon { background: var(--brand-navy-800); color: #FFFFFF; }
.btn--ghost:hover { border-color: var(--brand-navy-800); background: rgba(24, 39, 64, .05); }
.btn--ghost:hover .btn__icon { transform: translateX(3px); }

.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 46px; font-size: var(--text-sm); padding-right: var(--space-4); }
.btn--sm .btn__icon { width: 30px; height: 30px; }

/* ------------------------------- Header -------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-background) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-stuck { border-bottom-color: var(--color-border); box-shadow: var(--shadow-sm); }

.header-inner {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: 76px;
}

.brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 44px;                      /* touch target */
  text-decoration: none; margin-right: auto;
}
/* logo-pros-mark.png is the monogram extracted from the supplied lockup:
   background keyed out to true alpha, tight-cropped, ink #314E5D. The
   "PRECISION" wordmark sits beside it as live text, so the mark is used alone.
   Source aspect 1.397:1 — the box below matches it, so nothing distorts. */
.brand__mark { flex: none; display: block; width: 56px; height: 40px; }
.brand__mark img { width: 100%; height: 100%; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.15rem; font-weight: 800;
  letter-spacing: .1em; color: var(--color-foreground);
}
.brand__tag {
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-foreground-mut); font-weight: 700;
}

.nav__list { display: flex; align-items: center; gap: var(--space-6); }
.nav__link {
  position: relative; display: inline-flex; align-items: center;
  min-height: 44px; min-width: 44px;     /* touch target */
  padding-inline: var(--space-1); justify-content: center;
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  color: var(--color-foreground);
  transition: color var(--dur-base) var(--ease-out);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 2px;
  background: var(--color-accent); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--color-accent-text); }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: none;
  background: transparent; border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-pill); cursor: pointer; color: var(--color-foreground);
}
.nav-toggle__bars { display: grid; gap: 4px; width: 20px; }
.nav-toggle__bars span {
  display: block; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* -------------------------------- Hero --------------------------------- */
.hero { padding-block: clamp(3rem, 7vw, 5.5rem) var(--section-y); }

.hero__inner {
  display: grid; gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}

.eyebrow {
  font-size: var(--text-xs); font-weight: 900;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-4);
}
.eyebrow--on-navy { color: var(--brand-gold-400); }
.eyebrow--on-gold { color: var(--brand-navy-900); }

.hero__title {
  font-size: clamp(2.75rem, 7.2vw, var(--text-5xl));
  font-weight: 800; letter-spacing: -.015em;
  margin-bottom: var(--space-6);
}
.hero__title em {
  font-style: italic; color: var(--color-accent-text);
  position: relative; white-space: nowrap;
}
.hero__title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .1em;
  background: var(--color-accent); border-radius: 2px; opacity: .55;
}

.hero__lead {
  font-size: var(--text-lg); color: var(--color-foreground-mut);
  max-width: 46ch; margin-bottom: var(--space-8);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* Notched image frame — the reference's signature shape */
.hero__visual { position: relative; }
.hero__figure {
  margin: 0; overflow: hidden;
  border-radius: var(--radius-lg) 64px var(--radius-lg) var(--radius-lg);
  background: var(--brand-navy-800);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
}
/* hero-globe.jpg is pre-cropped to the globe (the original banner carried
   headline copy that would duplicate the <h1>) and is already exactly 4:5,
   so it fills the frame with no repositioning needed. */
.hero__figure img { width: 100%; height: 100%; object-fit: cover; }

.hero__card {
  position: relative;
  margin: calc(var(--space-8) * -1) var(--space-4) 0 auto;
  width: min(300px, 100%);
  background: var(--color-accent); color: var(--brand-navy-900);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-gold);
}
.hero__card-title {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 700; margin-bottom: var(--space-3);
}
.checklist { display: grid; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; }
.checklist li { display: flex; align-items: flex-start; gap: var(--space-2); }
.check { width: 18px; height: 18px; flex: none; margin-top: 3px; }

/* Trust strip */
.trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.trust__label {
  font-size: var(--text-xs); font-weight: 900; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--color-foreground-mut);
}
.trust__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.trust__item {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-sm); color: var(--color-foreground);
}
.trust__item::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent); flex: none;
}

/* ------------------------------ Sections -------------------------------- */
.section { padding-block: var(--section-y); }
.section--cream { background: var(--color-surface-alt); }
.section--navy { background: var(--color-surface-invert); color: var(--color-on-invert); }
.section--navy .section__sub, .section--navy .contact__lead { color: var(--color-on-invert-mut); }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); max-width: var(--measure); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title {
  font-size: clamp(2rem, 4.4vw, var(--text-3xl));
  font-weight: 700; letter-spacing: -.01em;
}
.section__title em { font-style: italic; color: var(--color-accent-text); }
.section--navy .section__title em { color: var(--brand-gold-400); }
.section__sub {
  margin-top: var(--space-4); font-size: var(--text-lg);
  color: var(--color-foreground-mut); max-width: 60ch;
}
.section__head--center .section__sub { margin-inline: auto; }
.lead { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* --- About: the reference's bold flat colour block ---------------------- */
.section--gold-block {
  background: var(--color-accent);
  color: var(--brand-navy-900);
  border-radius: 0 96px 0 0;
}
.about__inner { display: grid; gap: clamp(2rem, 5vw, 4rem); }
.about__head .section__title { color: var(--brand-navy-900); }
.about__head .section__title em { color: var(--brand-navy-900); font-style: italic; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.about__body p { color: #23303F; }          /* 8.9:1 on gold */
.about__body p + p { margin-top: var(--space-4); }

/* --- Roles grid --------------------------------------------------------- */
.role-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.role-card {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.role-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.role-card__num {
  font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
  color: var(--color-accent-text); flex: none;
  font-variant-numeric: tabular-nums;
}
.role-card h3 { font-size: var(--text-base); font-family: var(--font-body); font-weight: 700; }

/* --- Practice-area pills ------------------------------------------------ */
.pill-cloud {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3);
}
.pill-cloud li {
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-pill);
  font-weight: 700; font-size: var(--text-sm);
  color: var(--color-on-invert);
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.pill-cloud li:hover { background: rgba(242, 187, 78, .14); border-color: var(--brand-gold-500); }

/* --- Why grid ----------------------------------------------------------- */
.why-grid {
  display: grid; gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.why-card {
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.why-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card__icon { width: 56px; height: 56px; margin-bottom: var(--space-4); border-radius: 50%; }
.why-card h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.why-card p { color: var(--color-foreground-mut); font-size: var(--text-sm); }

/* --- Steps -------------------------------------------------------------- */
.steps {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  position: relative; text-align: center;
}
.step { display: flex; flex-direction: column; align-items: center; position: relative; }
.step__dot {
  display: grid; place-content: center; gap: 0;
  width: 108px; height: 108px; border-radius: 50%;
  background: var(--brand-navy-800); color: #FFFFFF;
  margin-bottom: var(--space-4); flex: none;
  box-shadow: var(--shadow-md);
}
.step--final .step__dot {
  background: linear-gradient(150deg, var(--brand-gold-300), var(--brand-gold-500));
  color: var(--brand-navy-900);
}
.step__label {
  font-size: .625rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-gold-400);
}
.step--final .step__label { color: var(--brand-navy-900); }
.step__num { font-family: var(--font-display); font-size: 2.25rem; font-weight: 700; line-height: 1; }
.step__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step__text { font-size: var(--text-sm); color: var(--color-foreground-mut); max-width: 22ch; }

/* Dotted connector — decorative, hidden from AT, desktop only */
@media (min-width: 1024px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 54px; left: calc(50% + 62px); right: calc(-50% + 62px);
    border-top: 3px dotted var(--brand-cream-300);
  }
}

/* --- Certifications — typographic, no badge marks -----------------------
   Deliberately text-only: the official ISO / IAF / Google Partner marks have
   usage rules, so the claims are set in type rather than reproduced. */
.cert-row {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cert { padding-top: var(--space-6); border-top: 2px solid var(--brand-navy-800); }
.cert__name {
  display: flex; align-items: baseline; gap: var(--space-3);
  font-size: clamp(2rem, 3.4vw, 2.5rem); font-weight: 700;
  letter-spacing: -.01em; color: var(--color-foreground);
  margin-bottom: var(--space-1);
}
/* hairline running out from the name to the column edge — warm tone so it
   sits with the cream band rather than reading as a cool-grey artefact */
.cert__rule {
  flex: 1; height: 2px; background: var(--brand-cream-300);
  transform: translateY(-.3em);
}
.cert__status {
  font-size: var(--text-xs); font-weight: 900;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--color-accent-text);
  margin-bottom: var(--space-3);
}
.cert__note { font-size: var(--text-sm); color: var(--color-foreground-mut); max-width: 32ch; }

/* --- Contact ------------------------------------------------------------ */
.contact__inner { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: start; }
.contact__lead { font-size: var(--text-lg); margin-top: var(--space-4); max-width: 46ch; }
.contact__note {
  margin-top: var(--space-6); padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-invert);
  font-size: var(--text-sm); color: var(--color-on-invert-mut); max-width: 44ch;
}

.contact__channels { display: grid; gap: var(--space-4); }
.channel {
  display: flex; align-items: center; gap: var(--space-4);
  min-height: 72px; padding: var(--space-4) var(--space-6);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--color-border-invert);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.channel:hover { background: rgba(242, 187, 78, .12); border-color: var(--brand-gold-500); }
.channel:active { transform: translateY(1px); }
.channel__icon {
  display: grid; place-items: center; flex: none;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-accent); color: var(--brand-navy-900);
}
.channel__icon svg { width: 22px; height: 22px; }
.channel__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.channel__label {
  font-size: var(--text-xs); font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand-gold-400);
}
.channel__meta { font-weight: 700; letter-spacing: .04em; }
.channel__value {
  font-weight: 700; color: var(--color-on-invert);
  overflow-wrap: anywhere;          /* long email must not overflow at 375px */
}

/* -------------------------------- Footer -------------------------------- */
.site-footer {
  background: var(--brand-navy-900); color: var(--color-on-invert);
  padding-block: var(--space-12);
}
.footer__inner { display: grid; gap: var(--space-8); align-items: center; }
.brand--footer .brand__name { color: #FFFFFF; }
.brand--footer .brand__tag { color: var(--color-on-invert-mut); }
/* The mark is dark slate and would disappear on the navy footer. Knock it out
   to white — replace with an official reversed asset if you have one. */
.brand--footer .brand__mark img { filter: brightness(0) invert(1); }
.footer__nav ul { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.footer__nav a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  justify-content: center;
  font-size: var(--text-sm); font-weight: 700; text-decoration: none;
  color: var(--color-on-invert-mut);
  transition: color var(--dur-base) var(--ease-out);
}
.footer__nav a:hover { color: var(--brand-gold-400); }
.footer__legal { font-size: var(--text-sm); color: var(--color-on-invert-mut); }

/* ============================== Responsive ============================== */
@media (max-width: 1023px) {
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--color-background);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    display: none;
    padding: var(--space-4) var(--gutter) var(--space-6);
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link {
    display: flex; width: 100%;
    min-height: 52px; font-size: var(--text-lg);
    border-bottom: 1px solid var(--color-border);
  }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__link::after { display: none; }
  .nav-toggle { display: inline-flex; order: 3; }
  .header-cta { display: none; }
  .site-header { position: sticky; }
}

@media (min-width: 768px) {
  .about__inner { grid-template-columns: 1fr 1fr; align-items: start; }
  .footer__inner { grid-template-columns: auto 1fr; }
  .footer__legal { grid-column: 1 / -1; padding-top: var(--space-6); border-top: 1px solid var(--color-border-invert); }
}

@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: 1.05fr 1fr; }
  .hero__card { position: absolute; right: var(--space-8); bottom: calc(var(--space-12) * -1); margin: 0; }
  .hero__visual { padding-bottom: var(--space-12); }
  .contact__inner { grid-template-columns: 1fr 1fr; }
}

/* Very small screens: the tagline wraps to two lines and crowds the header */
@media (max-width: 480px) {
  .site-header .brand__tag { display: none; }
  .site-header .brand__mark { width: 49px; height: 35px; }

  /* Tighten the hero so the primary CTA clears the fold on short phones
     (375×590 puts it ~1px below otherwise). */
  .hero { padding-block: var(--space-6) var(--space-12); }
  .hero .eyebrow { margin-bottom: var(--space-3); }
  .hero__title { font-size: clamp(2.25rem, 9.5vw, 2.75rem); margin-bottom: var(--space-4); }
  .hero__lead { font-size: var(--text-base); margin-bottom: var(--space-6); }
}

/* Landscape phones: keep hero workable when height is tight */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { padding-block: var(--space-8); }
  .hero__title { font-size: clamp(2rem, 5vw, 2.75rem); }
}

/* Certifications in dark mode: the warm cream hairline reads far too bright,
   and the navy top rule disappears into the dark surface. Both need flipping,
   keeping the top rule stronger than the hairline so the hierarchy holds. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cert__rule { background: var(--color-border-strong); }
  :root:not([data-theme="light"]) .cert { border-top-color: rgba(255, 255, 255, .5); }
}
:root[data-theme="dark"] .cert__rule { background: var(--color-border-strong); }
:root[data-theme="dark"] .cert { border-top-color: rgba(255, 255, 255, .5); }
:root[data-theme="light"] .cert__rule { background: var(--brand-cream-300); }
:root[data-theme="light"] .cert { border-top-color: var(--brand-navy-800); }

/* In dark mode the header sits on navy too, so the mark needs the same
   knockout. Explicit [data-theme] must win in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .brand__mark img {
    filter: brightness(0) invert(1);
  }
}
:root[data-theme="dark"] .site-header .brand__mark img { filter: brightness(0) invert(1); }
:root[data-theme="light"] .site-header .brand__mark img { filter: none; }

/* ============================ Offer pop-up ==============================
   Rendered in the browser's top layer by <dialog>, so it needs no z-index. */
.offer {
  width: min(440px, calc(100vw - 2 * var(--space-4)));
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: var(--color-foreground);
  box-shadow: 0 24px 60px rgba(15, 27, 46, .28);
  overflow: hidden;
}
.offer::backdrop { background: rgba(15, 27, 46, .55); }

/* Focused programmatically on open; it's a container, not a control, so it
   should not paint a focus ring. */
.offer__inner { position: relative; }
.offer__inner:focus { outline: none; }

.offer__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: grid; place-items: center;
  width: 46px; height: 46px;                 /* touch target, with rounding headroom */
  background: rgba(15, 27, 46, .08);
  color: var(--brand-navy-900);
  border: 0; border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out);
}
.offer__close:hover { background: rgba(15, 27, 46, .18); }
.offer__close svg { width: 19px; height: 19px; }

.offer__banner {
  background: var(--color-accent);
  color: var(--brand-navy-900);
  padding: var(--space-8) var(--space-8) var(--space-6);
}
.offer__eyebrow {
  font-size: var(--text-xs); font-weight: 900;
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.offer__title {
  font-size: clamp(2rem, 7vw, 2.5rem); font-weight: 800;
  letter-spacing: -.015em; line-height: 1.05;
}
.offer__sub {
  font-family: var(--font-display); font-style: italic;
  font-size: var(--text-xl); margin-top: var(--space-1);
}

.offer__body { padding: var(--space-6) var(--space-8) var(--space-8); }
.offer__list { display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.offer__list li {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-size: var(--text-sm); color: var(--color-foreground);
}
.offer__list .check { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--color-accent-text); }

.offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.offer__later {
  min-height: 44px; padding-inline: var(--space-2);
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700;
  color: var(--color-foreground-mut);
  text-decoration: underline; text-underline-offset: 3px;
}
.offer__later:hover { color: var(--color-foreground); }

/* Enter animation — skipped under reduced-motion by the global rule */
@keyframes offer-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.offer[open] { animation: offer-in var(--dur-slow) var(--ease-out); }
.offer::backdrop { animation: offer-fade var(--dur-base) var(--ease-out); }
@keyframes offer-fade { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------- Scroll reveal (opt-in) ----------------------- */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}