/* =========================================================================
   Massachusetts Record Request · "Harbor ink"
   Paper-white pages, harbor-navy ink, cobalt stamp ink for action, manila for small highlights.
   Layout: documents laid over real Massachusetts photography. One signature motion: the seal stamp.
   ========================================================================= */

@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-normal.woff2") format("woff2"); font-weight: 500 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-normal.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("../fonts/public-sans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --paper: #F6F7F9; --paper-2: #ECEFF4; --card: #FFFFFF;
  --ink: #0B1A2E; --ink-2: #43536B; --ink-3: #5E6C82;
  --line: #D8DEE8; --line-strong: #B9C3D3;
  --cobalt: #1E40E6; --cobalt-press: #1733C2; --cobalt-soft: #E6EBFF; --on-cobalt: #FFFFFF;
  --manila: #E8D7AE; --manila-ink: #6E5313;
  --harbor: #0B1A2E; --harbor-2: #12253F; --on-harbor: #EAF0FA; --on-harbor-2: #A9B9D3;
  --success: #1E6B45; --success-bg: #E3F3EA; --warning: #7A5600; --warning-bg: #FBF0D6; --danger: #B3261E; --danger-bg: #FBE7E5;
  --shadow-1: 0 1px 2px rgba(11,26,46,.06), 0 2px 6px -2px rgba(11,26,46,.06);
  --shadow-2: 0 18px 40px -18px rgba(11,26,46,.28), 0 4px 10px -4px rgba(11,26,46,.08);
  --shadow-3: 0 40px 80px -30px rgba(11,26,46,.45);

  --font-display: "Schibsted Grotesk", "Public Sans", system-ui, sans-serif;
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --fs-hero: clamp(2.5rem, 1.25rem + 3.7vw, 4.75rem);
  --fs-h1: clamp(2.3rem, 1.5rem + 3.2vw, 4.2rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 2vw, 3.1rem);
  --fs-h3: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  --fs-lede: clamp(1.1rem, 1.03rem + .35vw, 1.28rem);

  --gutter: clamp(16px, 4.4vw, 56px); --max: 1240px;
  --r-s: 8px; --r: 14px; --r-l: 22px; --r-xl: 32px;
  --header-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --ease: cubic-bezier(.2, .7, .2, 1); --ease-in: cubic-bezier(.55, 0, .75, .3);
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #0A1424; --paper-2: #07101D; --card: #0F1D33;
    --ink: #E9EEF6; --ink-2: #A9B6CA; --ink-3: #8A99B0;
    --line: #1E2E48; --line-strong: #2E4262;
    --cobalt: #6B86FF; --cobalt-press: #8AA0FF; --cobalt-soft: #14224A; --on-cobalt: #07101D;
    --manila: #D9C48F; --manila-ink: #2A2106;
    --success: #7FD3A5; --success-bg: #0F2A1D; --warning: #E8C46C; --warning-bg: #2A2110; --danger: #FF9C94; --danger-bg: #2E1412;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5); --shadow-2: 0 18px 40px -18px rgba(0,0,0,.7); --shadow-3: 0 40px 80px -30px rgba(0,0,0,.8);
  }
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); accent-color: var(--cobalt); caret-color: var(--cobalt); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
.price-table, .summary, .picker__total, .picker__add, .order__total, .price-card__price, .price-card__speeds, .index__price, .mini-prices, .choice__price, .ticket__no, .cert__no { font-variant-numeric: tabular-nums; }
::selection { background: var(--cobalt); color: var(--on-cobalt); }
html { scrollbar-color: var(--line-strong) transparent; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
svg.icon { width: 1.2em; height: 1.2em; flex: none; display: inline-block; vertical-align: -.22em; }
a { color: var(--cobalt); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2.5px solid var(--cobalt); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0 0 .45em; font-family: var(--font-display); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 1em; }
p { text-wrap: pretty; }
ul, ol { padding-left: 1.25em; }
li + li { margin-top: .35em; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.muted { color: var(--ink-2); }
.small { font-size: .9375rem; }
.stack { display: grid; gap: 12px; }
.skip-link { position: absolute; left: 12px; top: -100px; z-index: 1000; background: var(--cobalt); color: var(--on-cobalt); padding: 12px 18px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- layout */
.container, .wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }
.section { padding-block: clamp(64px, 8vw, 128px); }
.section--tight { padding-block: clamp(40px, 5vw, 76px); }
.section--sunken { background: var(--paper-2); }
.section--harbor { background: radial-gradient(70% 90% at 100% 0%, rgba(30,64,230,.32), transparent 60%), var(--harbor); color: var(--on-harbor); --ink: var(--on-harbor); --ink-2: var(--on-harbor-2); --cobalt: #8EA4FF; --line: #22375A; }
.head-row { display: grid; gap: 8px 48px; margin-bottom: clamp(28px, 4vw, 48px); align-items: end; }
.head-row h2 { margin: 0; max-width: 16ch; }
.head-row p { margin: 0; color: var(--ink-2); font-size: var(--fs-lede); max-width: 46ch; }
@media (min-width: 900px) { .head-row { grid-template-columns: 1fr auto; } }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 58ch; }
.prose { max-width: 68ch; min-width: 0; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); letter-spacing: -.025em; }
.prose > :first-child { margin-top: 0; }
.prose ul li::marker { color: var(--cobalt); }
.more { margin-top: 28px; }
.split { display: grid; gap: clamp(32px, 6vw, 96px); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
  .split--top { align-items: start; }
  .split--aside { grid-template-columns: minmax(0, 1fr) 370px; align-items: start; }
  .sticky-col { position: sticky; top: calc(var(--header-h) + 40px); }
}

/* --------------------------------------------------------------- buttons */
.btn, .button {
  --bg: transparent; --fg: var(--ink); --bd: var(--line-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid var(--bd); background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: 1rem; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 140ms var(--ease), box-shadow 200ms var(--ease);
}
.btn:hover, .button:hover { --bd: var(--ink); text-decoration: none; }
.btn:active, .button:active { transform: scale(.96); transition-duration: 90ms; }
.btn .icon { width: 1.1em; height: 1.1em; transition: transform 260ms var(--ease-out); }
.btn:hover .icon { transform: translateX(4px); }
.btn--primary, .button:not(.secondary) { --bg: var(--cobalt); --fg: var(--on-cobalt); --bd: var(--cobalt); box-shadow: 0 10px 24px -12px rgba(30,64,230,.7); }
.btn--primary:hover, .button:not(.secondary):hover { --bg: var(--cobalt-press); --bd: var(--cobalt-press); box-shadow: 0 14px 30px -12px rgba(30,64,230,.8); }
.btn--ghost { --bd: var(--line-strong); }
.btn--light { --bg: #F6F7F9; --fg: #0B1A2E; --bd: #F6F7F9; }
.btn--light:hover { --bg: #fff; --bd: #fff; }
.btn--ghost-light { --fg: #F6F7F9; --bd: rgba(246,247,249,.45); }
.btn--ghost-light:hover { --bd: #fff; }
.section--harbor .btn--ghost, .cta .btn--ghost, .band .btn--ghost { --fg: #F6F7F9; --bd: rgba(246,247,249,.45); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; transform: none; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.btn.is-busy .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; text-decoration: none; color: var(--ink); background: linear-gradient(var(--cobalt), var(--cobalt)) 0 100% / 0 2px no-repeat; padding-bottom: 3px; transition: background-size 380ms var(--ease-out); }
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow .icon { color: var(--cobalt); transition: transform 260ms var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--paper) 82%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); border-bottom: 1px solid transparent; transition: border-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.site-header.is-scrolled { border-bottom-color: var(--line); box-shadow: 0 10px 30px -24px rgba(11,26,46,.5); }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header__bar { position: relative; display: flex; align-items: center; gap: 16px; height: var(--header-h); transition: height 300ms var(--ease-out); }
.site-header.is-scrolled .site-header__bar { height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; flex: none; border-radius: 8px; }
.brand__mark { width: 36px; height: 36px; border-radius: 9px; transition: transform 500ms var(--ease-out); }
.brand:hover .brand__mark { transform: scale(1.06) rotate(-4deg); }
.brand__text { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 600; font-size: .78rem; line-height: 1.1; letter-spacing: .02em; color: var(--ink-2); }
.brand__text b { font-weight: 800; font-size: 1.12rem; letter-spacing: -.025em; color: var(--ink); }
.brand--light .brand__text { color: var(--on-harbor-2); }
.brand--light .brand__text b { color: #fff; }
.nav { display: none; margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__list > li { margin: 0; }
.nav__link, .nav__trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 13px; border: 0; background: none; border-radius: 999px; cursor: pointer; color: var(--ink-2); font-size: .9688rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: color 200ms var(--ease), background-color 200ms var(--ease); }
.nav__link:hover, .nav__trigger:hover, .nav__trigger[aria-expanded="true"] { color: var(--ink); background: var(--paper-2); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--cobalt); }
.nav__trigger .icon { width: 14px; height: 14px; transition: transform 240ms var(--ease-out); }
.nav__trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu-button { display: inline-grid; place-content: center; gap: 6px; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); cursor: pointer; }
.menu-button span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 320ms var(--ease-out); }
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
@media (min-width: 1100px) {
  .nav { display: block; }
  .menu-button { display: none; }
  .header-actions { margin-left: 10px; }
}
@media (max-width: 400px) { .header-cta { display: none; } }

.nav__item--mega { position: static; }
.mega { position: absolute; top: calc(100% + 6px); right: max(var(--gutter), env(safe-area-inset-right, 0px)); width: min(880px, calc(100vw - 48px)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--shadow-3); padding: 26px 26px 0; transform-origin: 30% 0; overflow: hidden; }
.mega__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.mega__label { font-size: .8125rem; font-weight: 700; color: var(--ink-3); margin: 0 0 8px; }
.mega__link { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: var(--r-s); color: var(--ink); font-weight: 600; font-size: .9688rem; text-decoration: none; transition: background-color 180ms var(--ease); }
.mega__link:hover { background: var(--cobalt-soft); text-decoration: none; }
.mega__link small { color: var(--ink-3); font-weight: 500; font-size: .8125rem; white-space: nowrap; }
.mega__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 20px -26px 0; padding: 16px 26px; background: var(--paper-2); font-size: .9375rem; }
.mega__foot a { display: inline-flex; gap: 8px; align-items: center; font-weight: 650; text-decoration: none; }
.mega__foot span { color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .mega.is-open { animation: drop 280ms var(--ease-out) both; }
  @keyframes drop { from { opacity: 0; transform: translateY(-8px) scale(.985); clip-path: inset(0 0 40% 0 round 22px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 22px); } }
}

/* mobile menu: a harbor sheet that drops from the header */
.mobile-menu { position: fixed; z-index: 45; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 0; overflow-y: auto; overscroll-behavior: contain; background: var(--harbor); color: var(--on-harbor); padding-block: 18px calc(120px + env(safe-area-inset-bottom, 0px)); }
.site-header.is-scrolled ~ .mobile-menu { top: calc(60px + env(safe-area-inset-top, 0px)); }
.mobile-menu__big { list-style: none; margin: 0 0 28px; padding: 0; }
.mobile-menu__big li { margin: 0; border-bottom: 1px solid #1E3150; }
.mobile-menu__big a { display: flex; align-items: center; min-height: 60px; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6.5vw, 2.2rem); letter-spacing: -.03em; color: #fff; text-decoration: none; }
.mobile-menu__records { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 6px; }
.mobile-menu__records a { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 48px; padding: 8px 14px; border-radius: var(--r); background: #12253F; color: var(--on-harbor); text-decoration: none; font-weight: 600; font-size: .9688rem; }
.mobile-menu__records small { color: var(--on-harbor-2); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-menu.is-open { animation: sheet 380ms var(--ease-out) both; }
  .mobile-menu.is-open .mobile-menu__big li { animation: rise 520ms var(--ease-out) both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }
  @keyframes sheet { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}
body.menu-open { overflow: hidden; }

/* quick dock (phones) */
.quick-dock { position: fixed; z-index: 40; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: 1fr 1fr 1.8fr; gap: 4px; padding: 5px; border-radius: 22px; background: color-mix(in srgb, var(--harbor) 92%, transparent); -webkit-backdrop-filter: saturate(170%) blur(16px); backdrop-filter: saturate(170%) blur(16px); box-shadow: 0 18px 40px -16px rgba(11,26,46,.6); }
.quick-dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; border-radius: 18px; color: var(--on-harbor-2); font-size: .75rem; font-weight: 650; text-decoration: none; transition: transform 120ms var(--ease); }
.quick-dock a:active { transform: scale(.95); }
.quick-dock__primary { flex-direction: row !important; gap: 8px !important; background: #1E40E6; color: #fff !important; font-size: .9375rem !important; }
body { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 1100px) { .quick-dock { display: none; } body { padding-bottom: 0; } }

/* ------------------------------------------------------------------ hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(28px, 4vw, 56px) clamp(64px, 8vw, 120px); }
.hero__grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
.hero__title { font-size: var(--fs-hero); line-height: .98; letter-spacing: -.045em; margin-bottom: 26px; }
.hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__title .line > span { display: inline-block; }
.hero__lede { margin-bottom: 30px; }
.hero__fine { display: flex; gap: 10px; align-items: flex-start; margin: 26px 0 0; color: var(--ink-2); font-size: .9688rem; max-width: 46ch; }
.hero__fine .icon { color: var(--cobalt); margin-top: 2px; }
.hero__stage { position: relative; padding: 0 0 70px 0; }
@media (min-width: 960px) { .hero__stage { padding: 0 0 60px 40px; } }
@media (max-width: 959px) { .hero__stage { order: -1; padding-bottom: 54px; } .hero__photo { aspect-ratio: 16 / 11; } .hero__stage .cert { width: min(58%, 260px); padding: 12px 14px; } .hero__stage .cert__head strong { font-size: 1rem; } .hero__stage .cert__rows { gap: 7px; margin-top: 10px; } .hero__stage .ticket { top: 12px; right: 12px; bottom: auto; width: min(62%, 250px); padding: 10px 12px 12px; } .hero__stage .ticket__steps { font-size: .6875rem; } }
.hero__photo { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 5 / 4; box-shadow: var(--shadow-2); background: var(--paper-2); }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* certified copy + seal */
.cert { position: absolute; left: 0; bottom: 0; width: min(62%, 330px); aspect-ratio: 8.5 / 7.2; padding: 18px 20px; border-radius: 10px; background: linear-gradient(180deg, #FFFFFF, #F3F1EA); color: #0B1A2E; box-shadow: var(--shadow-3), 0 0 0 1px rgba(11,26,46,.06); transform: rotate(-3deg); display: flex; flex-direction: column; }
@media (min-width: 960px) { .cert { left: -12px; } }
.cert::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(11,26,46,.14); border-radius: 6px; pointer-events: none; }
.cert__head span { display: block; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5E6C82; }
.cert__head strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; margin-top: 2px; }
.cert__rows { display: grid; gap: 10px; margin-top: 16px; }
.cert__rows span { height: 7px; border-radius: 4px; background: rgba(11,26,46,.1); }
.cert__rows .w80 { width: 80%; } .cert__rows .w60 { width: 60%; } .cert__rows .w90 { width: 90%; } .cert__rows .w40 { width: 40%; }
.cert__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; }
.cert__sig { width: 44%; height: 22px; border-bottom: 1px solid rgba(11,26,46,.35); background: no-repeat center / 92% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 30'%3E%3Cpath d='M4 22c10-14 14-16 16-8s4 10 10-2 8-8 9 0 6 6 14-6 10 2 12 4 8-2 14-6' fill='none' stroke='%230B1A2E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.cert__no { font-family: var(--font-mono); font-size: .625rem; color: #5E6C82; }
.cert__stamp { position: absolute; right: 8%; bottom: 14%; width: 46%; color: #1E40E6; transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .9; }
.seal { width: 100%; height: auto; font-family: var(--font-display); }
.ticket { position: absolute; right: -8px; bottom: -6px; width: min(70%, 330px); padding: 14px 16px 16px; border-radius: var(--r); background: var(--harbor); color: var(--on-harbor); box-shadow: var(--shadow-3); }
.ticket__no { font-family: var(--font-mono); font-size: .75rem; color: var(--on-harbor-2); }
.ticket__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; list-style: none; margin: 8px 0 10px; padding: 0; font-size: .75rem; font-weight: 650; }
.ticket__steps li { margin: 0; color: var(--on-harbor-2); transition: color 300ms var(--ease); }
.ticket__steps li.is-on { color: #fff; }
.ticket__bar { display: block; height: 4px; border-radius: 4px; background: #22375A; overflow: hidden; }
.ticket__bar i { display: block; height: 100%; width: 75%; border-radius: 4px; background: linear-gradient(90deg, #6B86FF, #E8D7AE); transform-origin: left; }

/* The signature sequence. Plays once on load; resting state is the finished frame. */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .hero__title .line > span { animation: line-up 900ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 90ms); }
  .js .hero .hero__lede, .js .hero .hero__actions, .js .hero .hero__fine { animation: fade-up 800ms var(--ease-out) both; animation-delay: 420ms; }
  .js .hero .hero__actions { animation-delay: 520ms; } .js .hero .hero__fine { animation-delay: 620ms; }
  .js .hero .hero__photo { animation: wipe-up 1100ms var(--ease-out) both 120ms; }
  .js .hero .hero__photo img { animation: settle 1800ms var(--ease-out) both 120ms; }
  .js .hero .cert { animation: cert-in 900ms var(--ease-out) both 650ms, thud 260ms var(--ease) 1640ms; }
  .js .hero .cert__stamp { animation: stamp 420ms cubic-bezier(.3, 1.6, .5, 1) both 1500ms; }
  .js .hero .ticket { animation: fade-up 800ms var(--ease-out) both 900ms; }
  .js .hero .ticket__bar i { animation: fill 1300ms var(--ease-out) both 1100ms; }
  @keyframes line-up { from { transform: translateY(105%); } to { transform: none; } }
  @keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes wipe-up { from { clip-path: inset(100% 0 0 0 round 32px); } to { clip-path: inset(0 0 0 0 round 32px); } }
  @keyframes settle { from { transform: scale(1.14); } to { transform: none; } }
  @keyframes cert-in { from { opacity: 0; transform: translate(-30px, 40px) rotate(-9deg); } to { opacity: 1; transform: rotate(-3deg); } }
  @keyframes thud { 40% { transform: rotate(-3deg) translateY(3px) scale(.992); } }
  @keyframes stamp { 0% { opacity: 0; transform: rotate(-30deg) scale(2.4); filter: blur(3px); } 70% { opacity: .95; filter: none; } 100% { opacity: .9; transform: rotate(-14deg) scale(1); } }
  @keyframes fill { from { transform: scaleX(0); } to { transform: none; } }
}

/* ----------------------------------------------------------- photo heads */
main { position: relative; }
.crumbs-wrap { padding-top: 18px; }
main:has(> .phead) > .crumbs-wrap { position: absolute; z-index: 3; left: 0; right: 0; top: 0; }
main:has(> .phead) > .crumbs-wrap .crumbs ol, main:has(> .phead) > .crumbs-wrap .crumbs a { color: #fff; }
main:has(> .phead) > .crumbs-wrap .crumbs { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(11,26,46,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: .875rem; color: var(--ink-2); }
.crumbs li { margin: 0; display: inline-flex; gap: 6px; }
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.phead { position: relative; }
.phead__media { position: relative; height: clamp(300px, 52vh, 560px); overflow: hidden; background: var(--harbor); }
.phead__media img { width: 100%; height: 100%; object-fit: cover; }
.phead__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,26,46,.35) 0%, rgba(11,26,46,0) 30%, rgba(11,26,46,.15) 70%, rgba(11,26,46,.45) 100%); }
.phead__body { position: relative; z-index: 2; margin-top: clamp(-160px, -14vw, -90px); }
.phead__card { max-width: 860px; padding: clamp(24px, 4vw, 48px); border-radius: var(--r-xl); background: var(--paper); box-shadow: var(--shadow-2); }
.phead__card h1 { max-width: 18ch; }
.phead__card .lede { margin-bottom: 24px; }
.phead__kicker { display: inline-flex; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: var(--manila); color: var(--manila-ink); font-size: .8125rem; font-weight: 700; }
.shead { padding-block: clamp(44px, 6vw, 88px) clamp(24px, 3vw, 40px); }
.shead h1 { max-width: 16ch; }

/* reveal: image wipe on enter (default is visible; only hidden once JS has armed it) */
.wipe { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .js .wipe.is-armed:not(.is-in) { clip-path: inset(0 0 100% 0); }
  .js .wipe.is-armed:not(.is-in) img { transform: scale(1.12); }
  .js .wipe.is-armed { transition: clip-path 1100ms var(--ease-out); }
  .js .wipe.is-armed img { transition: transform 1600ms var(--ease-out); }
  .js .rise.is-armed:not(.is-in) { opacity: 0; transform: translateY(24px); }
  .js .rise.is-armed { transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
}

/* ------------------------------------------------------- record index */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index > li { margin: 0; border-bottom: 1px solid var(--line); }
.index__row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "thumb name price" "thumb text price"; gap: 2px 18px; align-items: center; padding: 18px 4px; color: var(--ink); text-decoration: none; }
.index__thumb { grid-area: thumb; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--paper-2); }
.index__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.index__name { grid-area: name; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .9vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; transition: transform 420ms var(--ease-out), color 200ms var(--ease); }
.index__text { grid-area: text; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.index__price { grid-area: price; font-weight: 700; white-space: nowrap; }
.index__go { display: none; }
.index__row:hover { text-decoration: none; }
.index__row:hover .index__name { color: var(--cobalt); }
.index__row:hover .index__thumb img { transform: scale(1.08); }
@media (min-width: 760px) {
  .index__row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto 44px; grid-template-areas: "name text price go"; padding: 24px 6px; gap: 24px; }
  .index__thumb { display: none; }
  .index__go { display: grid; grid-area: go; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--ink); transition: background-color 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 420ms var(--ease-out); }
  .index__row:hover .index__go { background: var(--cobalt); border-color: var(--cobalt); color: var(--on-cobalt); transform: rotate(-45deg); }
  .index__row:hover .index__name { transform: translateX(10px); }
}
.index--compact .index__row { padding-block: 18px; }
.index__float { position: fixed; z-index: 30; left: 0; top: 0; width: 260px; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0) scale(.85); box-shadow: var(--shadow-3); transition: opacity 260ms var(--ease), scale 360ms var(--ease-out); }
.index__float img { width: 100%; height: 100%; object-fit: cover; }
.index__float.is-on { opacity: 1; }
@media (hover: none), (max-width: 759px) { .index__float { display: none; } }

/* --------------------------------------------------------- speed picker */
.picker { padding: clamp(18px, 3vw, 28px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.picker__tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; border-radius: 18px; background: var(--paper-2); isolation: isolate; }
.picker__tab { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 76px; padding: 12px 14px; border: 0; border-radius: 14px; background: none; cursor: pointer; text-align: left; color: var(--ink-2); transition: color 240ms var(--ease); }
.picker__tab[aria-checked="true"] { color: var(--ink); }
.picker__name { font-weight: 750; font-size: .9688rem; line-height: 1.2; }
.picker__time { font-size: .8125rem; }
.picker__add { margin-top: auto; font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em; }
.picker__thumb { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 14px; background: var(--card); box-shadow: var(--shadow-1), 0 0 0 1.5px var(--cobalt); transform: translateX(calc(var(--k, 0) * 100%)); transition: transform 520ms var(--ease-out); }
.picker__readout { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; align-items: end; margin-top: 22px; }
.picker__k { display: block; font-size: .875rem; color: var(--ink-2); margin-bottom: 4px; }
.picker__date, .picker__total { display: block; font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; line-height: 1; }
.picker__date { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem); }
.picker__total { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); color: var(--cobalt); text-align: right; }
.picker__note { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink-2); font-size: .9375rem; }
@media (max-width: 520px) { .picker__tab { min-height: 84px; padding: 10px; } .picker__time { font-size: .75rem; } }

/* -------------------------------------------------------------- band, cta */
.band, .cta { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.band__media, .cta__media { position: absolute; inset: 0; z-index: -1; }
.band__media img, .cta__media img { width: 100%; height: 100%; object-fit: cover; }
.band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,26,46,.88) 0%, rgba(11,26,46,.55) 50%, rgba(11,26,46,.15) 100%); }
.cta__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,26,46,.55), rgba(11,26,46,.88)); }
.band__inner { padding-block: clamp(96px, 14vw, 200px); max-width: calc(760px + 2 * var(--gutter)); margin-left: 0; }
@media (min-width: 1240px) { .band__inner { margin-left: calc((100vw - var(--max)) / 2 - var(--gutter)); } }
.band h2, .cta h2 { color: #fff; }
.band p, .cta p { color: #D5DEEC; font-size: var(--fs-lede); max-width: 54ch; margin-bottom: 28px; }
.cta__inner { padding-block: clamp(96px, 12vw, 180px); text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta__inner h2 { max-width: 18ch; }

/* ---------------------------------------------------------- route (steps) */
.route { position: relative; list-style: none; margin: 0; padding: 0 0 0 52px; --p: 1; }
.route::before, .route::after { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; }
.route::before { background: var(--line); }
.route::after { background: var(--cobalt); transform-origin: top; transform: scaleY(var(--p)); }
.route > li { position: relative; margin: 0; padding-bottom: clamp(30px, 4vw, 52px); }
.route > li:last-child { padding-bottom: 0; }
.route > li::before { content: ""; position: absolute; left: -45px; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-strong); transition: border-color 300ms var(--ease), background-color 300ms var(--ease), box-shadow 300ms var(--ease); }
.route > li.is-hit::before { border-color: var(--cobalt); background: var(--cobalt); box-shadow: 0 0 0 6px var(--cobalt-soft); }
.route h3 { margin-bottom: 6px; }
.route p { color: var(--ink-2); margin: 0; max-width: 52ch; }
.route__photo { margin: 18px 0 0; border-radius: var(--r-l); overflow: hidden; aspect-ratio: 16 / 9; max-width: 520px; }
.route__photo img { width: 100%; height: 100%; object-fit: cover; }

/* harbor section bits */
.framed { margin: 0; border-radius: var(--r-xl); overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.framed img { width: 100%; height: 100%; object-fit: cover; }
.ticks { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 12px; align-items: center; margin: 0; font-weight: 600; }
.ticks .icon { color: var(--manila); }

/* FAQ: disclosure with a drawn plus */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -.02em; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary i { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 360ms var(--ease-out); }
.faq__item summary i::before, .faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform 360ms var(--ease-out), background-color 220ms var(--ease); }
.faq__item summary i::after { transform: rotate(90deg); }
.faq__item[open] summary i { background: var(--cobalt); border-color: var(--cobalt); transform: rotate(180deg); }
.faq__item[open] summary i::before, .faq__item[open] summary i::after { background: var(--on-cobalt); }
.faq__item[open] summary i::after { transform: rotate(0deg); }
.faq__a { padding: 0 0 20px; color: var(--ink-2); max-width: 62ch; }
.faq__a p { margin: 0; }
@media (prefers-reduced-motion: no-preference) { .faq__item[open] .faq__a { animation: fade-up 360ms var(--ease-out) both; } }

/* needs, price card */
.needs { padding: 24px 26px; border-radius: var(--r-l); background: var(--cobalt-soft); margin-bottom: 8px; }
.needs h2 { font-size: 1.35rem !important; margin: 0 0 12px !important; letter-spacing: -.02em; }
.needs ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.needs li { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.needs .icon { color: var(--cobalt); margin-top: 3px; }
.price-card { position: sticky; top: calc(var(--header-h) + 24px); padding: 28px; border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.price-card__label { font-size: .875rem; font-weight: 700; color: var(--ink-3); margin-bottom: 6px; }
.price-card__price { font-family: var(--font-display); font-weight: 850; font-size: 4rem; letter-spacing: -.05em; line-height: .95; margin-bottom: 12px; }
.price-card__price small { font-family: var(--font-sans); font-weight: 500; font-size: .9375rem; letter-spacing: 0; color: var(--ink-2); }
.price-card__sub { color: var(--ink-2); font-size: .9375rem; margin-bottom: 8px; }
.price-card__speeds { list-style: none; padding: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.price-card__speeds li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.price-card__speeds span { display: flex; flex-direction: column; line-height: 1.35; font-weight: 600; }
.price-card__speeds small { color: var(--ink-2); font-size: .8125rem; font-weight: 500; }
.price-card__speeds strong { white-space: nowrap; }
.price-card__fine { display: flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: .875rem; margin: 14px 0 0; }
.price-card h2.h3 { font-size: 1.6rem; }
@media (max-width: 959px) { .price-card { position: static; } .split--aside > .price-card { order: -1; } }
.mini-prices { list-style: none; padding: 0; margin: 0 0 1em; border-top: 1px solid var(--line); }
.mini-prices li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); margin: 0; }
.mini-prices strong { white-space: nowrap; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r); background: var(--paper-2); color: var(--ink); font-size: .9375rem; }
.note .icon { color: var(--cobalt); margin-top: 2px; }

/* directories */
.dir-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.dir-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 56px 22px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: border-color 220ms var(--ease), box-shadow 300ms var(--ease), transform 420ms var(--ease-out); }
.dir-card:hover { border-color: var(--cobalt); box-shadow: var(--shadow-2); transform: translateY(-3px); text-decoration: none; }
.dir-card__name { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -.025em; line-height: 1.2; }
.dir-card__place { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: .9375rem; }
.dir-card__meta { color: var(--ink-3); font-size: .8125rem; }
.dir-card__go { position: absolute; right: 18px; top: 50%; translate: 0 -50%; color: var(--cobalt); transition: transform 300ms var(--ease-out); }
.dir-card:hover .dir-card__go { transform: translateX(4px); }
.addr { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; }
.addr .icon { margin-top: 3px; color: var(--cobalt); }
.towns { color: var(--ink-2); line-height: 1.9; }
.panel--flat { padding: 16px; background: var(--paper-2); border-radius: var(--r); }
.panel--flat h3 { font-size: 1rem; margin-bottom: 8px; }
.finder-wrap { padding-bottom: 0; }
.town-finder { max-width: 640px; }
.town-finder label { display: block; font-weight: 700; margin-bottom: 10px; font-size: 1.05rem; }
.town-finder__row { display: flex; gap: 10px; flex-wrap: wrap; }
.town-finder__row .select { flex: 1 1 280px; }

/* price table */
.table-wrap { overflow-x: auto; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); }
.price-table th, .price-table td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.price-table thead th { font-size: .8125rem; font-weight: 700; color: var(--ink-3); background: var(--paper-2); }
.price-table tbody th { font-family: var(--font-display); font-weight: 750; letter-spacing: -.02em; font-size: 1.05rem; }
.price-table tbody th a { color: var(--ink); text-decoration: none; }
.price-table tbody th a:hover { color: var(--cobalt); }
.price-table td { color: var(--ink-2); }
.price-table td:nth-child(2) { color: var(--ink); font-weight: 700; white-space: nowrap; }
.price-table tbody tr { transition: background-color 180ms var(--ease); }
.price-table tbody tr:hover { background: var(--cobalt-soft); }
.price-table tr:last-child > * { border-bottom: 0; }
@media (max-width: 720px) {
  .price-table thead { display: none; }
  .price-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .price-table tbody th, .price-table td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border: 0; }
  .price-table td::before { content: attr(data-label); color: var(--ink-3); font-weight: 500; }
  .price-table td:last-child { display: block; }
  .price-table td:last-child::before { display: none; }
}

/* contact */
.contact { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.contact h2 { font-size: 1.1rem; color: var(--ink-3); letter-spacing: 0; font-weight: 700; }
.contact__big { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.contact__big a { color: var(--ink); text-decoration-color: var(--cobalt); }

/* ----------------------------------------------------------- order form */
.order { display: grid; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .order { grid-template-columns: minmax(0, 1fr) 360px; } }
.order__form { display: grid; gap: 16px; min-width: 0; }
.order__card { margin: 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-l); background: var(--card); border: 1px solid var(--line); min-width: 0; transition: border-color 260ms var(--ease), box-shadow 260ms var(--ease); }
.order__card:focus-within { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line)); box-shadow: var(--shadow-2); }
.order__card legend { display: flex; align-items: center; gap: 12px; float: left; width: 100%; margin-bottom: 18px; padding: 0; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.2; }
.order__card legend + * { clear: both; }
.order__n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--cobalt-soft); color: var(--cobalt); font-family: var(--font-sans); font-size: .875rem; font-weight: 750; letter-spacing: 0; }
.order__lede { color: var(--ink-2); margin-top: -6px; }
.order__empty { color: var(--ink-3); font-size: .9375rem; margin: 0 0 16px; }
.optional { font-family: var(--font-sans); font-size: .8125rem; color: var(--ink-3); font-weight: 500; letter-spacing: 0; }
.order__fine { color: var(--ink-2); font-size: .9375rem; margin: 18px 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fields { display: grid; gap: 16px 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin-bottom: 16px; }
.fields:last-child { margin-bottom: 0; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--wide, .field-group { grid-column: 1 / -1; }
.field label { font-size: .9375rem; font-weight: 650; }
.req { color: var(--cobalt); }
.field__hint { color: var(--ink-2); font-size: .875rem; line-height: 1.45; }
.field__static { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; letter-spacing: -.025em; }
.field__change { font-size: .9375rem; }
.input, .select, .textarea { width: 100%; min-height: 50px; padding: 12px 14px; font-size: 16px; line-height: 1.4; color: var(--ink); background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: 12px; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease); appearance: none; -webkit-appearance: none; }
.select { padding-right: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2343536B' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 18px; }
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--ink-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--cobalt); background: var(--card); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cobalt) 18%, transparent); }
.input--file { padding: 11px; }
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }
@media (prefers-reduced-motion: no-preference) { .field.is-invalid { animation: nudge 300ms var(--ease); } @keyframes nudge { 30% { transform: translateX(-4px); } 60% { transform: translateX(3px); } } }
.choices { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 12px; }
.choice { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice__body { display: flex; flex-direction: column; gap: 2px; min-height: 100%; padding: 16px 18px; border-radius: var(--r); border: 1.5px solid var(--line-strong); background: var(--paper); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), background-color 200ms var(--ease), transform 140ms var(--ease); }
.choice:active .choice__body { transform: scale(.97); }
.choice__title { font-weight: 750; }
.choice__meta { color: var(--ink-2); font-size: .875rem; }
.choice__price { margin-top: 8px; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1; }
.choice input:checked + .choice__body { border-color: var(--cobalt); box-shadow: 0 0 0 1.5px var(--cobalt) inset; background: var(--cobalt-soft); }
.choice input:focus-visible + .choice__body { outline: 2.5px solid var(--cobalt); outline-offset: 2px; }
.check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--cobalt); }
.order__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; margin-bottom: 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.order__total strong { font-family: var(--font-display); font-weight: 850; font-size: 2.2rem; letter-spacing: -.04em; line-height: 1; color: var(--cobalt); }
.order__summary { position: sticky; top: calc(var(--header-h) + 24px); }
@media (max-width: 999px) { .order__summary { position: static; } }
.summary { padding: 26px; border-radius: var(--r-xl); background: radial-gradient(90% 70% at 100% 0%, rgba(30,64,230,.35), transparent 60%), var(--harbor); color: var(--on-harbor); box-shadow: var(--shadow-3); }
.summary__eyebrow { font-size: .875rem; font-weight: 700; color: var(--on-harbor-2); margin-bottom: 4px; }
.summary__record { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1.15; margin-bottom: 16px; }
.summary__lines { margin: 0; border-top: 1px solid #22375A; }
.summary__lines div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid #22375A; font-size: .9375rem; }
.summary__lines dt { color: var(--on-harbor-2); }
.summary__lines dd { margin: 0; font-weight: 650; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 18px; }
.summary__total strong { font-family: var(--font-display); font-weight: 850; font-size: 2.8rem; letter-spacing: -.045em; line-height: 1; }
.summary__note { color: var(--on-harbor-2); font-size: .875rem; margin: 10px 0 16px; }
.summary__trust { list-style: none; padding: 16px 0 0; margin: 0; border-top: 1px solid #22375A; display: grid; gap: 8px; font-size: .875rem; color: var(--on-harbor-2); }
.summary__trust li { display: flex; gap: 8px; align-items: center; margin: 0; }
.summary__trust .icon { color: var(--manila); }
.order__done { grid-column: 1 / -1; text-align: center; padding: clamp(36px, 6vw, 72px); border-radius: var(--r-xl); background: var(--card); border: 1px solid var(--line); }
.order__done-stamp { width: 150px; margin: 0 auto 20px; color: var(--cobalt); transform: rotate(-12deg); }
.order__done-id { font-family: var(--font-mono); font-size: 1.05rem; }
.order__done p { max-width: 54ch; margin-inline: auto; color: var(--ink-2); }
.order.is-done .order__form, .order.is-done .order__summary { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .order__done:not([hidden]) { animation: fade-up 500ms var(--ease-out) both; }
  .order__done:not([hidden]) .order__done-stamp { animation: stamp-done 460ms cubic-bezier(.3, 1.6, .5, 1) both 260ms; }
  @keyframes stamp-done { 0% { opacity: 0; transform: rotate(-34deg) scale(2.2); filter: blur(3px); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); filter: none; } }
  .summary__total strong.is-bump, .picker__total.is-bump { animation: bump 380ms var(--ease-out); }
  @keyframes bump { 40% { transform: scale(1.07); } }
}
.notice { padding: 14px 18px; border-radius: var(--r); }
.notice p { margin: 0; }
.notice--warning { background: var(--warning-bg); color: var(--ink); }
.notice--danger { background: var(--danger-bg); color: var(--ink); margin-bottom: 14px; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--harbor); color: var(--on-harbor-2); padding-block: clamp(56px, 7vw, 96px) 28px; }
.site-footer a { color: var(--on-harbor); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .btn { color: var(--fg); text-decoration: none; }
.site-footer .btn:hover { color: var(--fg); text-decoration: none; }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 56px); border-bottom: 1px solid #1E3150; }
.footer-say { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.4rem); letter-spacing: -.04em; line-height: 1.02; color: #fff; max-width: 18ch; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.footer-grid h2 { font-family: var(--font-sans); font-size: .875rem; font-weight: 700; letter-spacing: 0; color: var(--manila); margin-bottom: 14px; }
.footer-grid > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 10px; font-size: .9375rem; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-contact { line-height: 2; font-size: .9375rem; }
.footer-contact .icon { color: var(--manila); display: inline-block; margin-right: 6px; }
.footer-hours { font-size: .875rem; }
.footer-disclaimer { margin: 44px 0 0; padding: 20px 22px; border-radius: var(--r); background: #0F223A; font-size: .875rem; }
.footer-disclaimer strong { color: var(--on-harbor); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #1E3150; font-size: .8125rem; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }

.legal h1 { font-size: var(--fs-h2); }

/* staff and legacy backend pages (mrr/bridge.php) */
.private-bar { background: var(--harbor); color: var(--manila); font-size: .8125rem; font-weight: 700; padding: 10px 0; }
.mrr-shell { padding-block: 32px 64px; }
.mrr-shell th, .mrr-shell td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: .9375rem; }
.mrr-shell input, .mrr-shell select, .mrr-shell textarea { width: 100%; max-width: 520px; min-height: 44px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--card); }
.mrr-shell button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: var(--card); cursor: pointer; margin: 6px 6px 6px 0; }
.mrr-shell .mrr-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.mrr-shell .mrr-table { overflow-x: auto; }
.mrr-details { display: grid; grid-template-columns: minmax(120px, 220px) 1fr; gap: 6px 16px; }
.mrr-details dd { margin: 0; }

/* page transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 160ms var(--ease-in) both vt-out; }
  ::view-transition-new(root) { animation: 360ms var(--ease-out) both vt-in; }
  @keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
}
/* Reduced motion: no spatial movement; state changes stay as quick fades. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .picker__thumb, .faq__item summary i, .menu-button span { transition-duration: 120ms !important; }
}
@media print { .site-header, .quick-dock, .site-footer, .order__summary, .index__float { display: none !important; } body { padding: 0; } }