/* ==========================================================================
   site.css — the public site. Loaded after design.css and app.css.

   Rules live in .claude/skills/frontend-design/SKILL.md: brand kit tokens
   only, Playfair Display for titles and Archivo for everything else, an 8px
   grid, three radii, navy-tinted soft shadows, motion through data-reveal.
   ========================================================================== */

:root {
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --section: clamp(4.5rem, 9vw, 8rem);
  --r-field: 10px;
  --r-card: 16px;
  --r-panel: 24px;
  --shadow-soft: 0 1px 2px rgba(4, 38, 86, 0.04), 0 10px 30px -12px rgba(4, 38, 86, 0.14);
  --shadow-lift: 0 30px 70px -24px rgba(4, 38, 86, 0.32);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(5rem + env(safe-area-inset-top));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body.site {
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.has-motion [data-reveal] {
  opacity: 0;
}
.nav-open { overflow: hidden; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

/* ------------------------------------------------------------------ type -- */

.eyebrow {
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}
.on-navy .eyebrow,
.eyebrow--gold { color: var(--gold-light); }

.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--navy);
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1.04; letter-spacing: -0.012em; }
.display-l { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.1; letter-spacing: -0.008em; }
.display-m { font-size: 1.5rem; line-height: 1.2; }
.on-navy .display-xl,
.on-navy .display-l,
.on-navy .display-m { color: #fff; }
.display-xl em,
.display-l em {
  font-style: italic;
  color: var(--gold-dark);
}
.on-navy .display-xl em,
.on-navy .display-l em { color: var(--gold-light); }

.lede {
  font-size: 1.175rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}
.on-navy .lede { color: rgba(255, 255, 255, 0.78); }
.copy { line-height: 1.65; max-width: 68ch; }
.copy + .copy { margin-top: 1rem; }

.section { padding-block: var(--section); }
.section--white { background: #fff; }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head .eyebrow { margin-bottom: 1rem; }
.section__head .lede { margin-top: 1.25rem; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head--center .lede { margin-inline: auto; }

/* --------------------------------------------------------------- buttons -- */

.btn {
  min-height: 3rem;
  font-family: var(--font-sans);
  letter-spacing: 0.005em;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--ease);
}
.btn--sm { min-height: 2.5rem; }
.btn svg {
  width: 1rem;
  height: 1rem;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-gold {
  background: var(--gold-light);
  color: var(--navy);
}
.btn-ghost-light {
  border-color: rgba(255, 255, 255, 0.32);
  color: #fff;
  background: transparent;
}
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  min-height: 2.75rem;
}
.link-more svg { width: 1rem; height: 1rem; transition: transform 0.25s var(--ease); }
.on-navy .link-more { color: var(--gold-light); }

/* ------------------------------------------------------------------- nav -- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: rgba(247, 244, 238, 0.84);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px -22px rgba(4, 38, 86, 0.35);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  min-height: 4.5rem;
}
.nav__brand { display: inline-flex; align-items: center; flex: none; }
.nav__lockup { height: 2.5rem; width: auto; display: block; }
.nav__brand picture { display: contents; }
.nav__links {
  display: flex;
  gap: 0.25rem;
  margin-left: auto;
}
.nav__links a {
  position: relative;
  padding: 0.6rem 0.85rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.2s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}
.nav__links a.is-active { color: var(--navy); }
.nav__links a.is-active::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { color: var(--navy); }
  .nav__links a:hover::after { transform: scaleX(1); }
}
@media (pointer: coarse) {
  .nav__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
}
.nav__links + .nav__actions { margin-left: 0.5rem; }
.nav__brand + .nav__actions { margin-left: auto; }
.nav__signin {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}
.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav__toggle svg { width: 1.25rem; height: 1.25rem; }
.nav-sheet {
  position: fixed;
  inset: calc(4.5rem + env(safe-area-inset-top)) 0 0;
  z-index: 49;
  background: var(--paper);
  padding: 1.5rem clamp(1.25rem, 4vw, 2.5rem) calc(2rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.nav-sheet[hidden] { display: none; }
.nav-sheet nav a {
  display: flex;
  align-items: center;
  min-height: 3.75rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--navy);
  text-decoration: none;
}
.nav-sheet nav a.is-active { color: var(--gold-dark); }
.nav-sheet__actions { margin-top: auto; padding-top: 2rem; display: grid; gap: 0.75rem; }
@media (max-width: 959px) {
  .nav__links, .nav__signin, .nav__cta { display: none; }
  .nav__actions, .nav__links + .nav__actions { margin-left: auto; }
  .nav__toggle { display: inline-flex; }
  .nav__brand + .nav__actions .nav__signin { display: inline-flex; }
}
@media (max-width: 479px) {
  .nav__lockup { height: 2.4rem; }
}

/* ------------------------------------------------------------------ hero -- */

.hero {
  position: relative;
  margin-inline: clamp(0.5rem, 1.4vw, 1.25rem);
  border-radius: var(--r-panel);
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 70% at 85% 10%, rgba(233, 182, 55, 0.16) 0%, rgba(233, 182, 55, 0) 60%),
    radial-gradient(70% 60% at 0% 100%, rgba(10, 48, 104, 0.9) 0%, rgba(10, 48, 104, 0) 70%);
}
.hero__inner {
  display: grid;
  gap: 3rem;
  align-items: center;
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
@media (min-width: 1024px) {
  .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 2rem; }
}
.hero__text { max-width: 38rem; }
/* The italic phrase always takes its own line, so the headline breaks the
   same way in the fallback face and in Playfair and nothing below it moves. */
.hero__text h1 em { display: block; }
.hero__text .lede { margin-top: 1.5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2.25rem; }
.hero__points {
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 1.75rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  gap: 0.75rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
}
@media (min-width: 640px) {
  .hero__points { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; }
}
.hero__points li { display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap; }
.hero__points svg { width: 1.05rem; height: 1.05rem; color: var(--gold-light); flex: none; }

.hero__visual {
  position: relative;
  min-height: 38rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero__arc {
  position: absolute;
  inset: -6% -14% -6% -10%;
  width: 124%;
  height: 112%;
  pointer-events: none;
}
.hero__arc path { fill: none; stroke-linecap: round; }

/* The phone: the product itself is the illustration. Sizes are in px so the
   mock keeps its proportions whatever the root font size. */
.phone {
  position: relative;
  width: 292px;
  border-radius: 46px;
  padding: 10px;
  background: var(--navy-deep);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  animation: float-slow 9s ease-in-out infinite;
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) { .phone { animation: none; } }
.phone::before {
  content: "";
  position: absolute;
  top: 20px;
  left: 50%;
  width: 84px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy-deep);
  transform: translateX(-50%);
  z-index: 2;
}
.phone__screen {
  border-radius: 36px;
  background: var(--paper);
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  height: 586px;
}
.phone__status {
  display: flex;
  justify-content: space-between;
  padding: 14px 26px 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.phone__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  margin-top: 8px;
}
.phone__bar img { height: 22px; width: auto; }
.phone__bar span { font-weight: 600; font-size: 12px; color: var(--ink-faint); margin-left: auto; }
.phone__body { padding: 16px 14px 0; flex: 1; overflow: hidden; }
.phone__hello { font-family: var(--font-display); font-size: 19px; color: var(--navy); line-height: 1.15; }
.phone__date { font-size: 11px; color: var(--ink-faint); margin: 2px 0 14px; }
.ui-job {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 6px 18px -12px rgba(4, 38, 86, 0.25);
}
.ui-job + .ui-job { margin-top: 10px; }
.ui-job__top { display: flex; justify-content: space-between; align-items: baseline; }
.ui-job__time { font-family: var(--font-display); font-weight: 600; font-size: 20px; color: var(--navy); }
.ui-job__dur { font-size: 10.5px; color: var(--ink-faint); }
.ui-job__addr { font-weight: 600; color: var(--ink); margin-top: 3px; font-size: 12.5px; }
.ui-job__meta { font-size: 11px; color: var(--ink-faint); }
.ui-job__btns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 5px; margin-top: 10px; }
.ui-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  padding: 6px 4px;
  background: #fff;
  white-space: nowrap;
}
.ui-pill--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.ui-pill--gold { background: var(--gold-light); border-color: var(--gold-light); color: var(--navy); }
.phone__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 8px 6px 16px;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-faint);
  text-align: center;
}
.phone__tabs div { display: grid; justify-items: center; gap: 3px; }
.phone__tabs svg { width: 17px; height: 17px; }
.phone__tabs .is-active { color: var(--navy); }

.float-card {
  position: absolute;
  z-index: 3;
  background: #fff;
  color: var(--ink-soft);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--shadow-lift);
  font-size: 12.5px;
  line-height: 1.4;
  width: 224px;
}
.float-card__eyebrow { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-dark); }
.float-card__title { font-weight: 600; color: var(--ink); margin-top: 4px; font-size: 13.5px; }
.float-card__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.float-card__fee { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--navy); }
.float-card--board { top: 6%; right: 2%; }
@media (min-width: 1024px) {
  /* The phone sits left of centre so the board card can overlap its edge
     without covering the greeting. */
  .hero__visual { justify-content: flex-start; padding-left: 5%; }
  .float-card--board { right: -5%; }
  .float-card--sent { left: -7%; }
}
.float-card--sent { bottom: 9%; left: -4%; width: 244px; display: flex; gap: 12px; align-items: center; }
.float-card__tick {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.float-card__tick svg { width: 18px; height: 18px; }
.band-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
  background: #8dce46;
  color: var(--ink);
}
@media (max-width: 1023px) {
  .hero__visual { min-height: 36rem; }
  .float-card--board { right: 2%; }
  .float-card--sent { left: 2%; }
}
@media (max-width: 559px) {
  .hero__visual { min-height: 33rem; transform-origin: top center; }
  .phone { width: 262px; }
  .phone__screen { height: 530px; }
  .phone__body { padding-inline: 12px; }
  .ui-job { padding-inline: 10px; }
  .ui-pill { padding-inline: 2px; }
  .float-card--board { display: none; }
  /* `translate`, not `transform`: the reveal animation writes its own transform. */
  .float-card--sent { left: 50%; translate: -50% 0; bottom: 2%; }
}

/* ----------------------------------------------------------------- strip -- */

.strip { padding-block: 2.25rem; }
.strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2.5rem;
}
.strip__label { font-size: 0.9rem; color: var(--ink-faint); }
/* Scheme logos are each scheme's own artwork, untouched, on equal white
   chips so five differently shaped marks read as one calm row. */
.strip__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.strip__logos li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  padding: 0.75rem 1.25rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
}
.strip__logos img { display: block; width: auto; height: auto; max-width: 100%; max-height: 2.5rem; }
/* A long one-line logo needs the width more than the padding. */
.strip__logos .strip__logo--wide { padding-inline: 0.75rem; }
.strip__text { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink-soft); }
@media (max-width: 959px) {
  .strip__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .strip__logos .strip__logo--wide { grid-column: span 2; padding-inline: 1.5rem; }
  .strip__logos .strip__logo--wide img { max-width: 17rem; }
}
@media (max-width: 559px) {
  .strip__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------------- steps -- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
  counter-reset: step;
}
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
.step {
  position: relative;
  padding-top: 2rem;
  border-top: 1px solid var(--line-strong);
}
.step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.5rem;
  height: 2px;
  background: var(--gold);
}
.step__n {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 3.25rem;
  line-height: 1;
  color: var(--gold-dark);
}
.step h3 { margin-top: 1.25rem; }
.step p { margin-top: 0.75rem; line-height: 1.65; }

/* ----------------------------------------------------------------- bento -- */

.bento { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(12, 1fr); } }
.tile {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.3s;
}
@media (min-width: 900px) {
  .tile--7 { grid-column: span 7; }
  .tile--5 { grid-column: span 5; }
  .tile--4 { grid-column: span 4; }
}
.tile h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; line-height: 1.2; color: var(--navy); }
.tile p { margin-top: 0.6rem; line-height: 1.6; max-width: 40ch; font-size: 0.975rem; }
.tile__art {
  margin-top: 1.75rem;
  flex: 1;
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 11rem;
  min-width: 0;
}
.tile--navy { background: var(--navy); border-color: var(--navy); color: rgba(255, 255, 255, 0.78); }
.tile--navy h3 { color: #fff; }
.tile--navy .tile__art { background: var(--navy-800); border-color: rgba(255, 255, 255, 0.1); }

/* mini month */
.mini-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
@media (max-width: 479px) { .mini-cal { gap: 3px; } .mini-cal__day { padding: 3px; font-size: 9px; } }
.mini-cal__dow { font-size: 10px; font-weight: 600; color: var(--ink-faint); text-align: center; padding-bottom: 2px; }
.mini-cal__day {
  aspect-ratio: 1 / 0.82;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 4px 5px;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-faint);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mini-cal__day.is-out { opacity: 0.4; }
.mini-cal__day.is-today { border-color: var(--navy); color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.mini-cal__bars { display: grid; gap: 2px; }
.mini-cal__bars i { display: block; height: 4px; border-radius: 2px; background: var(--navy); }
.mini-cal__bars i.g { background: var(--gold); }
.mini-cal__bars i.o { background: var(--line-strong); }

/* board cards */
.ui-board { display: grid; gap: 8px; }
.ui-board__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  align-items: center;
  font-size: 12px;
}
.ui-board__card strong { color: var(--ink); font-size: 13px; }
.ui-board__card span { color: var(--ink-faint); font-size: 11.5px; }
.ui-board__fee { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--navy); grid-row: span 2; text-align: right; }
.ui-board__foot { margin-top: 10px; font-size: 11px; color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.ui-board__foot svg { width: 13px; height: 13px; color: var(--gold-dark); }
.ui-board__card:nth-child(2) { opacity: 0.8; }
.ui-board__card:nth-child(3) { opacity: 0.55; }

/* route */
.ui-route { position: relative; height: 100%; min-height: 9rem; }
.ui-route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ui-route__btns { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

/* close form */
.ui-form { display: grid; gap: 8px; font-size: 11.5px; }
.ui-form__field {
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 8px 10px;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ui-form__field b { color: var(--ink); font-weight: 600; }
.ui-form__bands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ui-form__bands span {
  text-align: center;
  padding: 6px 0;
  border-radius: 7px;
  background: #fff;
  border: 1px solid var(--line);
  font-weight: 700;
  font-size: 11px;
  color: var(--ink-faint);
}
.ui-form__bands span.is-on { background: #8dce46; border-color: #8dce46; color: var(--ink); }
.ui-form__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }

/* fee */
.ui-fee { display: grid; gap: 10px; }
.ui-fee__big { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: #fff; }
.ui-fee__line { display: flex; justify-content: space-between; font-size: 12.5px; color: rgba(255, 255, 255, 0.78); padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.ui-fee__line b { color: var(--gold-light); font-weight: 600; }

/* -------------------------------------------------------------- services -- */

.services { display: grid; gap: 1.25rem; }
@media (min-width: 640px) { .services { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--paper);
  transition: transform 0.35s var(--ease), background-color 0.3s, border-color 0.3s;
}
.service__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.service__icon svg { width: 1.25rem; height: 1.25rem; }
.service h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--navy); }
.service p { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.55; }

/* ------------------------------------------------------------ photo cards -- */

.duo { display: grid; gap: 1.25rem; }
@media (min-width: 860px) { .duo { grid-template-columns: 1fr 1fr; } }
.photo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 26rem;
  border-radius: var(--r-panel);
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  isolation: isolate;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.photo-card picture,
.phead picture { display: contents; }
.photo-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.9s var(--ease);
}
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 38, 86, 0.25) 0%, rgba(4, 38, 86, 0.55) 45%, rgba(2, 19, 46, 0.94) 100%);
}
.photo-card h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.15; margin-top: 0.75rem; }
.photo-card p { margin-top: 0.75rem; max-width: 44ch; color: rgba(255, 255, 255, 0.82); line-height: 1.6; }
.photo-card .link-more { margin-top: 1.25rem; color: var(--gold-light); }

/* ------------------------------------------------------------- client band -- */

.client-band {
  position: relative;
  border-radius: var(--r-panel);
  background: var(--navy);
  color: #fff;
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 900px) { .client-band { grid-template-columns: 1.3fr auto; gap: 4rem; } }
.client-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 120% at 100% 0%, rgba(233, 182, 55, 0.18) 0%, rgba(233, 182, 55, 0) 60%);
}
.client-band .lede { margin-top: 1rem; }
.client-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------------- faq -- */

.faq-layout { display: grid; gap: 3rem; }
@media (min-width: 960px) { .faq-layout { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; align-items: start; } .faq-layout .section__head { position: sticky; top: 7rem; margin-bottom: 0; } }
.faq { border-top: 1px solid var(--line-strong); }
.faq__item { border-bottom: 1px solid var(--line-strong); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 4.5rem;
  padding: 1.1rem 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.3;
  color: var(--navy);
  cursor: pointer;
}
.faq__icon {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--navy);
  transition: transform 0.4s var(--ease), background-color 0.3s, color 0.3s, border-color 0.3s;
}
.faq__icon svg { width: 1rem; height: 1rem; }
.faq__item.is-open .faq__icon { transform: rotate(45deg); background: var(--navy); border-color: var(--navy); color: var(--gold-light); }
.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 3.5rem 1.5rem 0; line-height: 1.7; max-width: 62ch; }

/* ------------------------------------------------------------------- cta -- */

.cta {
  position: relative;
  margin-inline: clamp(0.5rem, 1.4vw, 1.25rem);
  margin-bottom: clamp(0.5rem, 1.4vw, 1.25rem);
  border-radius: var(--r-panel);
  background: var(--navy);
  color: #fff;
  text-align: center;
  padding: clamp(4rem, 9vw, 7.5rem) 1.5rem;
  overflow: hidden;
  isolation: isolate;
}
.cta__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.cta__arc path { fill: none; stroke-linecap: round; }
.cta .display-l { max-width: 18ch; margin-inline: auto; }
.cta .lede { margin: 1.25rem auto 0; }
.cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 2.25rem; }

/* ---------------------------------------------------------------- footer -- */

.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.7);
  margin-top: clamp(0.5rem, 1.4vw, 1.25rem);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer__top {
  display: grid;
  gap: 2.5rem;
  padding-block: clamp(3.5rem, 6vw, 5rem) 3rem;
}
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 3rem; } }
.footer__brand img { height: 2.75rem; width: auto; }
.footer__brand p { margin-top: 1.25rem; max-width: 36ch; line-height: 1.65; font-size: 0.95rem; }
.footer__contact { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__contact a { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; text-decoration: none; min-height: 2.25rem; }
.footer__contact svg { width: 1rem; height: 1rem; color: var(--gold-light); }
.footer__col h2 { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); }
.footer__col ul { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.footer__col a { display: inline-flex; align-items: center; min-height: 2.25rem; color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: 0.95rem; transition: color 0.2s; }
.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ------------------------------------------------------------ page header -- */

.phead {
  position: relative;
  margin-inline: clamp(0.5rem, 1.4vw, 1.25rem);
  border-radius: var(--r-panel);
  background: var(--navy);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.phead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(55% 90% at 92% 0%, rgba(233, 182, 55, 0.16) 0%, rgba(233, 182, 55, 0) 60%);
}
.phead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; }
.phead--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(4, 38, 86, 0.95) 0%, rgba(4, 38, 86, 0.86) 45%, rgba(4, 38, 86, 0.6) 100%);
}
.phead__inner { padding-block: clamp(3rem, 6vw, 5.5rem); max-width: 46rem; }
.phead .crumbs { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 1.5rem; }
.phead .crumbs a { color: inherit; text-decoration: none; }
.phead .eyebrow { margin-bottom: 1rem; }
.phead .display-l { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.phead .lede { margin-top: 1.25rem; }

/* ------------------------------------------------------------ inner pages -- */

.shell { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .shell { grid-template-columns: minmax(0, 1fr) 22rem; gap: 3rem; } .shell__aside { position: sticky; top: 6.5rem; } }
.sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-soft);
  padding: clamp(1.5rem, 3vw, 2.75rem);
}
.sheet + .sheet { margin-top: 1.25rem; }
.sheet h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; color: var(--navy); line-height: 1.2; }
.sheet h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--navy); }
.fieldset { border: 0; margin: 0; padding: 0; }
.fieldset + .fieldset { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
/* Floated so the legend sits inside the box rather than in its top border. */
.fieldset legend { float: left; width: 100%; font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--navy); padding: 0; margin-bottom: 0.35rem; }
.fieldset legend + * { clear: both; }
.fieldset__hint { font-size: 0.925rem; color: var(--ink-faint); margin-bottom: 1.5rem; }
.checks { display: grid; gap: 0.5rem; }
@media (min-width: 640px) { .checks { grid-template-columns: 1fr 1fr; } }
.checks .checkbox {
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: 0.75rem 0.9rem;
  align-items: center;
  transition: border-color 0.2s, background-color 0.2s;
}
.checks .checkbox:has(input:checked) { border-color: var(--navy); background: var(--brand-50); color: var(--navy); }
.checks .checkbox input { margin-top: 0; }

.aside-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.5rem;
}
.aside-card + .aside-card { margin-top: 1rem; }
.aside-card h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; color: var(--navy); }
.aside-card--navy { background: var(--navy); border-color: var(--navy); color: rgba(255, 255, 255, 0.8); }
.aside-card--navy h2 { color: #fff; }
.aside-card p { margin-top: 0.6rem; font-size: 0.95rem; line-height: 1.6; }
.timeline-mini { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.timeline-mini li { display: grid; grid-template-columns: 2rem 1fr; gap: 0.85rem; font-size: 0.95rem; line-height: 1.5; }
.timeline-mini b {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(233, 182, 55, 0.6);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ticks { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.ticks li { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; line-height: 1.55; }
.ticks svg { width: 1.25rem; height: 1.25rem; color: var(--gold-dark); margin-top: 0.15rem; }
.path { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 700px) { .path { grid-template-columns: 1fr 1fr; } }
.path li { border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; background: var(--paper); }
.path .step__n { font-size: 2.25rem; }
.path h3 { margin-top: 0.85rem; }
.path p { margin-top: 0.5rem; font-size: 0.95rem; line-height: 1.6; }
.done-state { text-align: center; padding-block: 2rem; }
.done-state__tick {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.done-state__tick svg { width: 1.75rem; height: 1.75rem; }

/* ------------------------------------------------------------------ auth -- */

.auth { min-height: 100vh; min-height: 100dvh; display: grid; }
@media (min-width: 960px) { .auth { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.auth__brand {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: space-between;
  margin: clamp(0.5rem, 1.4vw, 1.25rem);
  border-radius: var(--r-panel);
  background: var(--navy);
  color: #fff;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 960px) { .auth__brand { display: flex; } }
.auth__brand img { height: 3rem; width: auto; align-self: flex-start; }
.auth__brand .display-l { font-size: clamp(2rem, 3vw, 2.75rem); max-width: 16ch; }
.auth__brand .lede { margin-top: 1rem; font-size: 1.05rem; max-width: 38ch; }
.auth__arc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.auth__arc path { fill: none; stroke-linecap: round; }
.auth__main {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 4vw, 3rem);
  padding-top: calc(clamp(1.25rem, 4vw, 3rem) + env(safe-area-inset-top));
}
.auth__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.auth__top img { height: 2.4rem; width: auto; }
@media (min-width: 960px) { .auth__top img { visibility: hidden; } }
.auth__top a { font-weight: 600; color: var(--navy); text-decoration: none; font-size: 0.95rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.auth__form { width: 100%; max-width: 25rem; margin: auto; padding-block: 3rem; }
.auth__form h1 { font-family: var(--font-display); font-weight: 500; font-size: clamp(2rem, 3vw, 2.5rem); line-height: 1.1; color: var(--navy); }
.auth__form .lede { font-size: 1rem; margin-top: 0.75rem; }
.auth__form form { margin-top: 2.25rem; }
.auth__form .btn-primary { width: 100%; justify-content: center; margin-top: 1.5rem; }
.auth__form .form-error:not(:empty) { margin-top: 1rem; }
.auth__form .form-error:not(:empty) + .btn-primary { margin-top: 1rem; }
.auth__foot { font-size: 0.9rem; color: var(--ink-faint); text-align: center; }
.auth__foot a { color: var(--navy); font-weight: 600; text-decoration: none; }
/* login.js holds the form back while it checks a saved sign-in (an installed
   app opening on /login). */
.auth__main.is-checking .auth__form,
.auth__main.is-checking .auth__foot { visibility: hidden; }

/* ----------------------------------------------------------------- legal -- */
/* Privacy notice and cookie policy: a contents list that stays in view on
   wide screens, and a single column of prose at a readable measure. */

.legal { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.legal__aside .eyebrow { margin-bottom: 1rem; }
.legal__toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.125rem; counter-reset: toc; }
.legal__toc a {
  display: flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.25rem 0.75rem;
  border-left: 2px solid var(--line);
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.35;
  transition: color 0.2s, border-color 0.2s;
}
.legal__updated { margin-top: 1.5rem; font-size: 0.85rem; color: var(--ink-faint); }
@media (min-width: 960px) {
  .legal { grid-template-columns: 16rem minmax(0, 1fr); gap: 4rem; }
  .legal__aside { position: sticky; top: 6.5rem; }
}
@media (max-width: 959px) {
  .legal__toc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}
@media (max-width: 559px) {
  .legal__toc { grid-template-columns: 1fr; }
}

.prose { min-width: 0; max-width: 46rem; color: var(--ink-soft); line-height: 1.7; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.prose h2:first-child { padding-top: 0; border-top: 0; }
.prose h3 { margin-top: 1.75rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 600; color: var(--ink); }
.prose p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.6rem; list-style: disc; }
.prose li::marker { color: var(--gold); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.prose code { font-size: 0.85em; padding: 0.15em 0.4em; border-radius: 4px; background: var(--paper); color: var(--ink); overflow-wrap: anywhere; }
.table-scroll { margin-top: 1.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-field); }
.legal-table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: 0.92rem; line-height: 1.55; }
.legal-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--paper);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.legal-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--line); vertical-align: top; }
.legal-table td:first-child { color: var(--ink); font-weight: 500; }

/* The line above a form's send button that says what happens to the details. */
.form-privacy { margin-top: 1.5rem; font-size: 0.875rem; line-height: 1.55; color: var(--ink-faint); }
.form-privacy a { color: var(--navy); font-weight: 500; text-underline-offset: 3px; }
.form-privacy + .form-actions { margin-top: 1rem; }
.auth__legal { margin-top: 0.5rem; font-size: 0.8rem; text-align: center; color: var(--ink-faint); }
.auth__legal a { color: inherit; text-underline-offset: 3px; }

/* Footer legal links. */
.footer__legal > div { display: grid; gap: 0.35rem; max-width: 46rem; line-height: 1.6; }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.footer__links a,
.footer__links button {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}

/* --------------------------------------------------------- cookie notice -- */
/* A card in the corner, never a wall across the page. Accept and Reject are
   the same button on purpose: the law wants refusing to be as easy as agreeing. */
.cookie {
  position: fixed;
  z-index: 80;
  left: max(1rem, env(safe-area-inset-left));
  right: max(1rem, env(safe-area-inset-right));
  bottom: calc(1rem + env(safe-area-inset-bottom));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lift);
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cookie.is-open { opacity: 1; transform: none; }
@media (min-width: 640px) { .cookie { right: auto; width: 26rem; left: max(1.5rem, env(safe-area-inset-left)); bottom: calc(1.5rem + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; transform: none; } }
.cookie__title { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; color: var(--navy); margin-bottom: 0.5rem; }
.cookie__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-top: 1.25rem; }
.cookie__actions .btn { min-height: 2.75rem; }
.cookie__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
p .cookie__link { display: inline; min-height: 0; padding: 0; }
.cookie__prefs { display: grid; gap: 0.5rem; margin-top: 1rem; }
.cookie__prefs[hidden] { display: none; }
.cookie__pref { display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.75rem; align-items: start; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-field); cursor: pointer; }
.cookie__pref input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--navy); }
.cookie__pref strong { display: block; color: var(--ink); font-weight: 600; }
@media print { .cookie { display: none; } }

/* ==========================================================================
   Touch and iOS layer (28 September 2026)
   From an audit of every public page on emulated iPhone SE, 13 and Pro Max
   and iPad, portrait and landscape. Each rule names what it fixes.
   ========================================================================== */

/* Landscape on a notched iPhone: keep content clear of the notch and the
   rounded corners. The navy panels may still run to the edge. */
.wrap {
  padding-left: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-right));
}
.nav-sheet {
  padding-left: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 4vw, 2.5rem), env(safe-area-inset-right));
  overscroll-behavior: contain;
}
.auth__main {
  padding-left: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-left));
  padding-right: max(clamp(1.25rem, 4vw, 3rem), env(safe-area-inset-right));
  padding-bottom: calc(clamp(1.25rem, 4vw, 3rem) + env(safe-area-inset-bottom));
}
/* Menu open on a wide screen (an iPad rotated with the menu open): never
   leave the sheet up once its button has gone. */
@media (min-width: 960px) {
  .nav-sheet { display: none !important; }
  .nav-open { overflow: visible; }
}
/* A short landscape screen: the header scrolls away instead of taking a
   third of what the keyboard leaves. It stays put while the menu is open,
   because the sheet is positioned under it. */
@media (max-height: 500px) {
  .nav { position: relative; }
  .nav-open .nav { position: sticky; }
}

/* 44px tap targets. */
.nav__brand { min-height: 2.75rem; }
.footer__col ul { gap: 0; }
.footer__col a,
.footer__contact a { min-height: 2.75rem; }
.phead .crumbs { margin-bottom: 0.75rem; }
.phead .crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.25rem; margin-inline: -0.25rem; }
.auth__foot a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.auth__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.25rem; }
.legal__toc a { min-height: 2.75rem; }
@media (max-width: 767px), (pointer: coarse) {
  .btn--sm { min-height: 2.75rem; }
}

/* The cookie notice: never over the open menu, and compact on phones. */
.nav-open .cookie { visibility: hidden; }
/* A field has focus on a touch screen (ui.js sets kb-open): the notice
   steps aside, as the app's pinned bars do. */
body.kb-open .cookie { visibility: hidden; }
@media (max-width: 639px) {
  .cookie { padding: 1rem 1.25rem; font-size: 0.875rem; }
  .cookie__title { font-size: 1.05rem; margin-bottom: 0.25rem; }
  .cookie__actions { margin-top: 0.5rem; }
}

/* The hero on tablets: place the floating cards against the phone, not the
   edges of the panel, so they only overlap its bezel. */
@media (min-width: 700px) and (max-width: 1023px) {
  .float-card--board { right: auto; left: calc(50% + 120px); }
  .float-card--sent { left: auto; right: calc(50% + 120px); }
}
@media (min-width: 560px) and (max-width: 699px) {
  .float-card--board { display: none; }
}

/* Mini calendar: cells in a row the same height on small phones. */
@media (max-width: 479px) {
  .mini-cal__day { aspect-ratio: auto; min-height: 2.5rem; }
}

/* Equipment ranges inside a card: give the text more of the width. */
@media (max-width: 559px) {
  .sheet .service { padding: 1rem; gap: 0.75rem; }
}

/* The route tile's end markers: HTML dots, so they stay round however the
   drawing stretches. */
.ui-route__dot { position: absolute; border-radius: 50%; translate: -50% -50%; }
.ui-route__dot--from { left: 7.33%; top: 64%; width: 12px; height: 12px; background: #fff; border: 2.5px solid var(--navy); }
.ui-route__dot--to { left: 92.67%; top: 17.33%; width: 14px; height: 14px; background: var(--gold); }

/* FAQ: a collapsed answer is hidden from VoiceOver too, after the close. */
.faq__a > div { visibility: hidden; transition: visibility 0s 0.45s; }
.faq__item.is-open .faq__a > div { visibility: visible; transition-delay: 0s; }

/* Footer on iPad portrait: three link columns under the brand. */
@media (min-width: 560px) and (max-width: 859px) {
  .footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

/* Legal tables on phones: each row becomes a small card, labelled from the
   column headings (legal.js copies them into data-label). */
@media (max-width: 639px) {
  .table-scroll { overflow: visible; }
  .legal-table { min-width: 0; }
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table tr { display: block; padding: 0.85rem 1rem; border-top: 1px solid var(--line); }
  .legal-table tbody tr:first-child { border-top: 0; }
  .legal-table td { display: block; border: 0; padding: 0.15rem 0; }
  .legal-table td::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
  }
  .legal-table td:first-child::before { margin-top: 0; }
}

/* Contents-list jumps: the heading text, not its top padding, lands just
   under the header (html carries the header height). */
.prose h2 { scroll-margin-top: -1.5rem; }

/* "Ask us" jump link in the page header, for phones where the form sits
   several screens down. */
.phead__jump { margin-top: 1.25rem; }
@media (min-width: 1024px) { .phead__jump { display: none; } }
#ask { scroll-margin-top: 0.5rem; }
.field-msg { margin-top: 0.35rem; color: var(--danger); font-weight: 500; }
.sr-only { font-size: 16px; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* New to assessing (29 September 2026): our other products and the reading list. */
.product-card {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  color: var(--ink-soft);
  text-decoration: none;
  transition: border-color 0.2s;
}
.product-card__name { font-family: var(--font-display); font-weight: 500; font-size: 1.3rem; color: var(--navy); }
.product-card__text { line-height: 1.6; }
.product-card .link-more { margin-top: 0.25rem; }
.reading { display: grid; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 760px) { .reading { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.reading__group h3 { font-family: var(--font-sans); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); }
.reading__group ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.25rem; }
.reading__group li { display: grid; padding: 0.35rem 0; border-bottom: 1px solid var(--line); }
.reading__group li:last-child { border-bottom: 0; }
.reading__group a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--navy); text-underline-offset: 3px; }
.reading__group span { margin-top: -0.35rem; font-size: 0.875rem; line-height: 1.5; color: var(--ink-faint); }

/* Sweep fixes (29 September 2026). */
/* The cookie notice steps aside for dialogs, and messages show above it. */
body.modal-open .cookie { visibility: hidden; }
body.site .toast-host { z-index: 90; }
/* Hero cards on small tablets stay inside the panel. */
@media (min-width: 700px) and (max-width: 1023px) {
  .float-card--sent { left: max(0.75rem, calc(50% - 364px)); right: auto; }
  .float-card--board { left: min(calc(50% + 120px), calc(100% - 224px - 0.75rem)); right: auto; }
}
/* Legal pages: on phones the contents list folds away under its heading. */
.legal__toc-wrap summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; cursor: pointer; }
.legal__toc-wrap summary::-webkit-details-marker { display: none; }
.legal__toc-wrap summary::after { content: '+'; font-size: 1.25rem; color: var(--navy); }
.legal__toc-wrap[open] summary::after { content: '-'; }
@media (min-width: 960px) { .legal__toc-wrap summary { display: none; } }

/* Hover effects are for a mouse: a touch screen keeps :hover on the last
   thing tapped (a card still gold after coming back from EPC Checker, an
   arrow still nudged). Same gate as the nav links and app.css. */
@media (hover: hover) and (pointer: fine) {
  .btn:hover svg { transform: translateX(3px); }
  .btn-gold:hover { background: #f1c654; }
  .btn-ghost-light:hover { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.06); }
  .link-more:hover svg { transform: translateX(4px); }
  .nav__signin:hover,
  .auth__top a:hover,
  .auth__foot a:hover { text-decoration: underline; text-underline-offset: 4px; }
  .tile:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(4, 38, 86, 0.04), 0 24px 50px -22px rgba(4, 38, 86, 0.24); border-color: var(--line-strong); }
  .service:hover { transform: translateY(-3px); background: #fff; border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
  .photo-card:hover img { transform: scale(1.04); }
  .footer__col a:hover,
  .phead .crumbs a:hover,
  .footer__links a:hover,
  .footer__links button:hover { color: #fff; }
  .checks .checkbox:hover { border-color: var(--line-strong); }
  .legal__toc a:hover { color: var(--navy); border-left-color: var(--gold); }
  .auth__legal a:hover { color: var(--navy); }
  .product-card:hover { border-color: var(--gold); }
}
/* design.css (not edited) has its own hovers for these: without a mouse,
   put the resting look back. */
@media not all and (hover: hover) and (pointer: fine) {
  .phead .crumbs a:hover { color: inherit; }
  .btn-ghost-light:hover { background: transparent; }
}