/* ===================================================================
   Rudderr, LLC — shared stylesheet for all pages
   Color scheme per WEBSITE.txt:
     white background / navy titles / orange graphics / gray subtext
   =================================================================== */

:root {
  --navy:        #012959;  /* rgb(1, 41, 89)    titles + subtitles */
  --navy-soft:   #0b3d76;
  --navy-wash:   #f2f6fb;
  --orange:      #f36a24;  /* rgb(243, 106, 36) graphics + accents */
  --orange-dark: #d4551a;
  --orange-wash: #fff3ed;
  --white:       #ffffff;
  --off-white:   #fbfaf8;  /* services card fill, per WEBSITE.txt */
  --gray:        #4a5568;  /* subtext — gray reads cleaner than black here */
  --gray-light:  #6b7688;
  --rule:        #e3e8ef;

  --wrap: 1140px;
  --radius: 14px;
  --shadow: 0 2px 4px rgba(1, 41, 89, .04), 0 12px 32px rgba(1, 41, 89, .07);
  --header-h: 96px;

  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px); /* keep anchors clear of sticky header */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--gray);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--navy);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.25rem; letter-spacing: -.01em; }

p { margin: 0 0 1.1em; }
a { color: var(--orange-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange); }
img { max-width: 100%; display: block; }
strong { color: var(--navy); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

/* Orange fill, not navy: this lands on top of the navy header when focused. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--orange-dark); color: var(--white);
  padding: 12px 20px; border-radius: 0 0 8px 8px;
  text-decoration: none; font-weight: 600;
  transition: top .18s ease;
}
.skip:focus { top: 0; color: var(--white); }

/* ===================================================================
   Header — identical on every page, sticky through scroll
   (WEBSITE.txt: "Banner stays on screen for every page and when scrolling")
   =================================================================== */
/* Filled with the navy from WEBSITE.txt, which also calls for white nav text.
   Solid rather than translucent so the fill is the specified colour at every
   scroll position. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
/* The lockup is navy artwork, so it sits on a white plate: it would otherwise
   vanish into the navy header. The same lockup is reused in the footer. */
.brand {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  background: var(--white);
  padding: 4px;
  border-radius: 8px;
}
.brand img { display: block; }
/* The lockup files are pre-cropped and resampled to their exact display size
   (with 2x/3x srcset variants), so render them at their native size: letting
   the browser shrink the 2052px source is what made the wordmark look soft. */
.brand__lockup { width: 72px; height: 80px; }

@media (max-width: 420px) {
  .brand__lockup { width: 63px; height: 70px; }
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: .975rem;
  padding: 9px 15px;
  border-radius: 8px;
  position: relative;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}
.nav a:hover { background: rgba(255, 255, 255, .14); color: var(--white); }
/* The current page keeps its white text and is marked by the orange rule
   below. Orange body text on navy sits right at the contrast floor, so the
   accent colour carries the state instead of the text colour. */
.nav a[aria-current="page"] { color: var(--white); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--orange);
}
.nav .nav__cta {
  background: var(--orange); color: var(--white);
  margin-left: 8px; padding-inline: 20px;
}
.nav .nav__cta:hover { background: var(--orange-dark); color: var(--white); }
.nav .nav__cta[aria-current="page"] { background: var(--orange-dark); color: var(--white); }
.nav .nav__cta[aria-current="page"]::after { display: none; }

.burger {
  display: none;
  background: none; border: 1px solid rgba(255, 255, 255, .32); border-radius: 9px;
  width: 44px; height: 44px; cursor: pointer; padding: 0;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; position: relative;
  width: 20px; height: 2px; border-radius: 2px; background: var(--white);
  transition: transform .2s ease, opacity .2s ease;
}
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  /* The drop-down panel carries the header's navy so the white links stay
     readable once the menu opens. */
  .nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--navy);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    padding: 12px 20px 20px;
    box-shadow: var(--shadow);
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding: 13px 14px; font-size: 1.05rem; }
  /* The underline reads as a divider across a full-width row, so the current
     page gets an orange edge marker in the stacked panel instead. */
  .nav a[aria-current="page"]::after { display: none; }
  .nav a[aria-current="page"]:not(.nav__cta) {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 3px 0 0 var(--orange);
  }
  .nav .nav__cta { margin: 8px 0 0; text-align: center; }
}

/* ===================================================================
   Buttons
   =================================================================== */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 650;
  padding: 15px 30px;
  border: 2px solid transparent; border-radius: 10px;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--orange); color: var(--white); }
.btn--primary:hover { background: var(--orange-dark); color: var(--white); }
.btn--ghost { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn--ghost:hover { background: var(--navy); color: var(--white); }
.btn--on-navy { border-color: rgba(255, 255, 255, .55); color: var(--white); background: transparent; }
.btn--on-navy:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.btn svg { flex-shrink: 0; }

/* ===================================================================
   Sections
   =================================================================== */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section--wash { background: var(--navy-wash); }
.section--navy { background: var(--navy); }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--navy p { color: rgba(255, 255, 255, .82); }

.eyebrow {
  display: inline-block;
  color: var(--orange-dark);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 14px;
}
.section--navy .eyebrow { color: var(--orange); }

.lead { font-size: 1.175rem; color: var(--gray); }
.section--navy .lead { color: rgba(255, 255, 255, .85); }

.head { max-width: 760px; margin-bottom: 56px; }
.head--center { margin-inline: auto; text-align: center; }

/* ===================================================================
   Home hero
   =================================================================== */
.hero {
  padding: clamp(60px, 9vw, 116px) 0 clamp(44px, 5vw, 68px);
  background:
    radial-gradient(760px 420px at 88% -12%, var(--orange-wash), transparent 70%),
    radial-gradient(680px 400px at 6% 6%, var(--navy-wash), transparent 68%);
}
.hero h1 { max-width: 17ch; }
.hero h1 em { font-style: normal; color: var(--orange); }
.hero .lead { max-width: 56ch; font-size: 1.24rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

.hero__note {
  display: flex; align-items: center; gap: 10px;
  margin-top: 26px;
  color: var(--navy); font-weight: 600; font-size: .975rem;
}
.hero__note svg { flex-shrink: 0; color: var(--orange); }
/* Two notes sit side by side and wrap to their own lines when the column is
   too narrow, so the flex gap has to carry the spacing the margin used to. */
.hero__notes { display: flex; flex-wrap: wrap; gap: 13px 30px; margin-top: 26px; }
.hero__notes .hero__note { margin: 0; }

/* ===================================================================
   Interior page hero (Wholesale / Services / Contact)
   =================================================================== */
.page-hero {
  padding: clamp(52px, 7vw, 88px) 0 clamp(40px, 5vw, 60px);
  background:
    radial-gradient(700px 380px at 90% -20%, var(--orange-wash), transparent 70%),
    radial-gradient(620px 360px at 2% 0%, var(--navy-wash), transparent 66%);
  border-bottom: 1px solid var(--rule);
}
.page-hero h1 { max-width: 22ch; }
.page-hero .lead { max-width: 60ch; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ===================================================================
   Marketplace logo strip
   Kept on a white background on purpose: several source logos are JPGs
   with baked-in white boxes, which only disappear against white.
   =================================================================== */
.logos { padding: 48px 0 8px; border-top: 1px solid var(--rule); }
.logos__label {
  text-align: center; color: var(--gray-light);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 30px;
}
.logos__row {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: clamp(22px, 3.4vw, 44px);
}
/* Full colour, never greyscale (WEBSITE.txt: "they should have their original colors") */
.logos__row img {
  height: 46px; width: auto;
  object-fit: contain; object-position: center;
  transition: transform .2s ease;
}
.logos__row img:hover { transform: scale(1.05); }

/* The seven marketplace marks are square app icons, pre-trimmed to their
   artwork and resampled to 44px (with 2x/3x srcset variants), so one shared
   height lines them all up and they render at native size. */
.logos__row img.logo--icon { height: 44px; }

@media (max-width: 560px) {
  .logos__row img { height: 34px; }
  .logos__row img.logo--icon { height: 34px; }
}

/* ===================================================================
   Business model — buy / optimize / scale
   =================================================================== */
.flow {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
  counter-reset: step;
}
@media (max-width: 860px) { .flow { grid-template-columns: 1fr; } }

.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 34px 28px 30px;
  box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: -19px; left: 28px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: 1.0625rem;
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--white);
}
/* Connector arrows between the three steps */
.step:not(:last-child)::after {
  content: "";
  position: absolute; top: 50%; right: -20px;
  width: 20px; height: 2px;
  background: var(--orange);
  opacity: .45;
}
@media (max-width: 860px) {
  .step:not(:last-child)::after {
    top: auto; right: 50%; bottom: -20px;
    width: 2px; height: 20px; transform: translateX(50%);
  }
}
.step__icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--orange-wash); color: var(--orange-dark);
  border-radius: 11px;
  margin: 8px 0 18px;
}
.step h3 { margin-bottom: .4em; }
.step p:last-child { margin-bottom: 0; }

/* Day-marked variant (Services, "the first 90 days"). Four milestones instead
   of three, and the marker shows the day from the markup rather than a CSS
   counter, so reordering the cards does not silently relabel them. The day
   labels carry the sequence on their own, so the connector arrows are dropped
   and the grid is free to reflow to two columns. */
.flow--days { grid-template-columns: repeat(4, 1fr); }
.flow--days .step::after { content: none; }
.flow--days .step::before {
  counter-increment: none;
  content: attr(data-day);
  top: -16px;
  width: auto; height: auto;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: .8rem; letter-spacing: .09em; text-transform: uppercase;
}
@media (max-width: 1040px) { .flow--days { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .flow--days { grid-template-columns: 1fr; } }

/* On navy the white card and its gray body copy would both fail, and the
   marker's white ring would read as a hole punched in the background. */
.section--navy .step {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .15);
  box-shadow: none;
}
.section--navy .step p { color: rgba(255, 255, 255, .82); }
.section--navy .step::before { box-shadow: 0 0 0 5px var(--navy); }
.section--navy .step__icon { background: rgba(243, 106, 36, .16); color: var(--orange); }

.offramp {
  margin-top: 40px;
  display: grid; gap: 20px;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) { .offramp { grid-template-columns: 1fr; } }
.offramp__card {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--orange);
  border-radius: var(--radius);
  background: var(--white);
  padding: 26px 28px;
}
.offramp__card h3 { font-size: 1.1rem; }
.offramp__card p:last-child { margin-bottom: 0; }

/* ===================================================================
   Story block and tick lists
   =================================================================== */
/* WEBSITE.txt asks that "A trusted wholesale partner since 2017" be the centre
   piece of its section. The tick list that used to sit beside it moved to the
   navy band, so the section is one centred column: the heading is centred and
   sized up, while the copy under it stays left aligned inside a readable
   measure. The three paragraphs share one size, per the spec, so nothing here
   sets a font-size on them. */
.story { max-width: 800px; margin-inline: auto; }
.story .head { margin-bottom: clamp(30px, 4vw, 44px); }
.story h2 { font-size: clamp(2rem, 4.4vw, 3.05rem); }
.story__body { display: grid; gap: 20px; }
.story__body p { margin-bottom: 0; }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ticks li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  align-items: start;
}
.ticks svg { color: var(--orange); margin-top: 3px; }
.ticks strong { display: block; }

/* On navy the default strong/body colours would vanish, and the list has the
   full section width to itself, so it runs in two columns. */
.section--navy .ticks {
  margin-top: 44px;
  grid-template-columns: 1fr 1fr;
  gap: 20px 44px;
  color: rgba(255, 255, 255, .82);
}
.section--navy .ticks strong { color: var(--white); }
@media (max-width: 900px) { .section--navy .ticks { grid-template-columns: 1fr; } }

/* ===================================================================
   Legal copy (privacy.html)
   =================================================================== */
.legal { max-width: 72ch; }
.legal__date { color: var(--gray-light); font-size: .95rem; }
.legal h2 { font-size: 1.35rem; letter-spacing: -.01em; margin-top: 2em; }
.legal ul { padding-left: 1.2em; margin: 0 0 1.1em; }
.legal li { margin-bottom: .4em; }
.legal li::marker { color: var(--orange); }

/* ===================================================================
   Services grid
   =================================================================== */
.free-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--orange); color: var(--white);
  font-weight: 700; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 99px;
  margin-bottom: 18px;
}
.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .cards { grid-template-columns: 1fr; } }

/* The latest WEBSITE.txt revision asks for a navy outline, navy headings,
   orange icons, an off-white fill, and body copy that does not clash, so these
   went from navy cards to outlined ones. Orange stays on the icon rather than
   the heading: on off-white it is a graphic (3:1 is the bar it has to clear)
   while heading text needs the navy. Body copy is the site's gray. */
.card {
  background: var(--off-white);
  border: 1.5px solid var(--navy);
  border-radius: var(--radius);
  padding: 26px 26px 24px;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.card:hover {
  border-color: var(--orange-dark);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--orange-wash); color: var(--orange);
  border: 1px solid rgba(243, 106, 36, .3);
  border-radius: 10px;
  margin-bottom: 16px;
}
.card h3 { font-size: 1.075rem; margin-bottom: .35em; color: var(--navy); }
.card p { font-size: .975rem; margin-bottom: 0; color: var(--gray); }

/* Full-width card; also keeps the last grid row from orphaning. Every card
   carries the same colour treatment, so width is the only difference here. */
.card--wide { grid-column: 1 / -1; }
.card--wide p { max-width: 78ch; }

.inhouse {
  margin-top: 34px;
  display: flex; align-items: center; gap: 14px;
  background: var(--orange-wash);
  border: 1px solid rgba(243, 106, 36, .28);
  border-radius: var(--radius);
  padding: 20px 26px;
  color: var(--navy); font-weight: 600;
}
.inhouse svg { flex-shrink: 0; color: var(--orange-dark); }

/* ===================================================================
   Reviews — three per page on Home, Wholesale and Services, laid out
   horizontally next to each other (WEBSITE.txt). The brand name in the
   citation is the link out to that partner's own site.
   =================================================================== */
/* The cards stretch to a shared height (default grid behaviour) because
   WEBSITE.txt asks the three reviews to stay uniform with each other. The
   quotes differ a lot in length, so any quote too tall for that shared height
   collapses behind a "See more" toggle. js/main.js measures each quote and
   adds [data-clamped] plus the button only where one actually overflows, which
   means with JavaScript off every quote still renders in full. */
.reviews {
  display: grid; gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 980px) {
  .reviews { grid-template-columns: 1fr; max-width: 680px; margin-inline: auto; }
}

.review {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 26px 28px 24px;
  box-shadow: var(--shadow);
}
.review::before {
  content: "\201C";
  display: block;
  color: var(--orange);
  font-size: 2.8rem; font-weight: 700; line-height: 1;
  margin-bottom: 2px;
}
.review blockquote { margin: 0; }
.review blockquote p {
  font-size: .95rem; line-height: 1.6;
  color: var(--gray);
  margin-bottom: .9em;
}
.review blockquote p:last-child { margin-bottom: 0; }

/* Collapsed state. The fade sits on the card background, so the logos-style
   white here has to match .review's background. */
.review blockquote[data-clamped] {
  position: relative;
  max-height: 16.2em;
  overflow: hidden;
}
.review blockquote[data-clamped]::after {
  content: "";
  position: absolute; right: 0; bottom: 0; left: 0;
  height: 3.4em;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 78%);
  pointer-events: none;
}

.review__more {
  align-self: flex-start;
  margin-top: 14px;
  padding: 0;
  border: 0; background: none;
  font-family: inherit; font-size: .93rem; font-weight: 650;
  color: var(--orange-dark);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Needed because the display above would otherwise beat the UA stylesheet's
   [hidden] { display: none } and show the toggle on every review. js/main.js
   sets .hidden on the quotes that fit without clamping. */
.review__more[hidden] { display: none; }
.review__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.review__more::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.review__more[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }

.review__cite {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-style: normal;
  display: block;
}
.review__brand {
  color: var(--navy);
  font-weight: 700; font-size: 1rem;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
}
.review__brand:hover { color: var(--orange-dark); text-decoration: underline; text-underline-offset: 3px; }
.review__brand svg { flex-shrink: 0; color: var(--orange); }

/* The partner's own logo, small, to the left of the brand name. Capped on both
   axes so a tall mark (Hold Fast Pro) and a wide wordmark (AnyPet) both land on
   the same line height. Every source file is either transparent or on white,
   which is what the white card needs. */
.review__logo {
  height: 28px; width: auto; max-width: 112px;
  object-fit: contain; object-position: left center;
  flex-shrink: 0;
  margin-right: 3px;
}
/* energydots ships as a square file with the wordmark on a thin band across
   the middle, so it takes the same fixed-box crop the Faire logo does. */
.review__logo--tight {
  width: 100px; height: 22px; max-width: none;
  object-fit: cover; object-position: center;
}

/* ===================================================================
   FAQ
   =================================================================== */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq details[open] summary { color: var(--orange-dark); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px;
  color: var(--navy);
  font-weight: 650; font-size: 1.075rem;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--orange-dark); }
.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 11px; height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.faq details > div { padding: 0 4px 24px; max-width: 68ch; }
.faq details > div p:last-child { margin-bottom: 0; }
.faq details > div ul { margin: 0 0 1.1em; padding-left: 1.15em; }
.faq details > div li { margin-bottom: .55em; }
.faq details > div li::marker { color: var(--orange); }

/* ===================================================================
   Contact form
   =================================================================== */
.contact { display: grid; gap: clamp(36px, 5vw, 60px); grid-template-columns: .85fr 1.15fr; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }

.form {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  color: var(--navy); font-weight: 600; font-size: .93rem;
  margin-bottom: 7px;
}
.field .req { color: var(--orange-dark); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-size: 1rem;
  color: var(--navy);
  background: var(--white);
  padding: 13px 15px;
  border: 1px solid #ccd5e0;
  border-radius: 9px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 128px; resize: vertical; }
.field select {
  appearance: none; cursor: pointer; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23012959' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 106, 36, .16);
}
.field input:user-invalid, .field textarea:user-invalid { border-color: #d92c2c; }

.form__row { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

.form .btn { width: 100%; justify-content: center; margin-top: 4px; }
.form__fine { font-size: .85rem; color: var(--gray-light); margin: 16px 0 0; }

/* Honeypot — hidden from humans, catches naive bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status {
  display: none;
  margin-top: 18px; padding: 15px 18px;
  border-radius: 10px;
  font-size: .95rem; font-weight: 600;
}
.form__status[data-state="ok"]  { display: block; background: #eaf6ee; color: #1b6b33; border: 1px solid #bfe3ca; }
.form__status[data-state="err"] { display: block; background: #fdecec; color: #a11c1c; border: 1px solid #f3c4c4; }

.contact__aside .ticks { margin-top: 26px; }

/* ===================================================================
   Closing call-to-action band
   =================================================================== */
.cta-band { background: var(--navy); padding: clamp(56px, 7vw, 88px) 0; text-align: center; }
.cta-band h2 { color: var(--white); max-width: 22ch; margin-inline: auto; }
.cta-band p { color: rgba(255, 255, 255, .82); max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ===================================================================
   Footer — identical on every page
   =================================================================== */
.footer {
  background: var(--navy);
  color: rgba(255, 255, 255, .74);
  padding: 62px 0 28px;
  font-size: .96rem;
}
.footer__top {
  display: grid; gap: 44px;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  padding-bottom: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__top { grid-template-columns: 1fr; gap: 34px; } }

/* Same white-plate lockup as the header, one step larger: the footer has
   no height limit, and the wordmark reads better with the room. */
.footer__brand .brand { padding: 6px; }
.footer__brand .brand__lockup { width: 90px; height: 100px; }
.footer__brand p { margin: 18px 0 0; max-width: 34ch; color: rgba(255, 255, 255, .7); }

.footer h4 {
  color: var(--white);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.footer a:hover { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

.store {
  display: inline-flex; align-items: center; gap: 13px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 11px;
  padding: 13px 17px;
  text-decoration: none;
  margin-bottom: 20px;
}
.store:hover { border-color: var(--orange); text-decoration: none; }
.store img { height: 45px; width: auto; background: var(--white); padding: 5px 9px; border-radius: 6px; }
.store b { color: var(--white); display: block; font-size: .95rem; }
.store span { font-size: .82rem; color: rgba(255, 255, 255, .62); }

/* Each platform's own icon in its own colours, drawn as inline SVG so it
   stays sharp at any pixel density, on the white plate every piece of
   artwork needs over the navy footer. All four share one square chip. */
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.social a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.social a:hover { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange); }
.social__icon { display: block; width: 24px; height: 24px; }

.footer__bottom {
  padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
  font-size: .88rem; color: rgba(255, 255, 255, .55);
}
.footer__bottom p { margin: 0; }