/* ===========================================================================
   Paradise Air Hawaii
   Palette and type are taken from the original site: magenta #990e96,
   gold #f2b01e, green #00c853, Work Sans throughout.
   =========================================================================== */

@font-face {
  font-family: 'Work Sans';
  src: url('/assets/fonts/work-sans.woff2') format('woff2');
  font-weight: 400 900;         /* variable font — one file, all weights */
  font-style: normal;
  font-display: swap;
}

:root {
  --magenta: #990e96;
  --magenta-lit: #b50bb2;
  --gold: #f2b01e;
  --green: #00c853;
  --ink: #17121a;
  --ink-soft: #4a4351;
  --rule: #e4dfe8;
  --mist: #f7f5f8;
  --paper: #fff;

  --measure: 68ch;
  --shell: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);

  /* Type scale */
  --display: clamp(2.6rem, 7.5vw, 5.75rem);
  --h1: clamp(2rem, 4.6vw, 3.1rem);
  --h2: clamp(1.4rem, 2.6vw, 1.95rem);
  --h3: clamp(1.1rem, 1.7vw, 1.3rem);
  --body: clamp(1rem, 0.55vw + 0.9rem, 1.12rem);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;   /* clear the sticky masthead on anchor jumps */
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--magenta-lit); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; z-index: 100;
}
.skip:focus { left: 1rem; top: 1rem; }

.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
.measure { max-width: var(--measure); }

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

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.masthead__in {
  display: flex; align-items: center; gap: var(--gap);
  min-height: 68px;
}
.brand { display: flex; align-items: center; gap: .6rem; margin-right: auto; text-decoration: none; order: 1; }
/* The logo is a 2.45:1 letterbox (636x260). Sized by height so the masthead
   height stays predictable; at 2.45:1 the widths come out ~140/118/98px. */
.brand img { height: 58px; width: auto; }
.brand span {
  font-weight: 900; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--magenta); line-height: 1.15;
}

.nav { display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.6rem); order: 2; }
.nav a {
  font-weight: 700; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; padding: .35rem 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--magenta); border-bottom-color: var(--magenta); }

.nav__call {
  font-weight: 900; color: #fff !important; background: var(--magenta);
  padding: .55rem .95rem !important; border-radius: 999px; border-bottom: 0 !important;
  white-space: nowrap;
}
.nav__call:hover { background: var(--magenta-lit); }

/* Mobile nav: a real <details> disclosure — no JavaScript required. */
.menu { position: relative; display: none; }
.menu > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  font-weight: 900; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--magenta);
  /* 44px minimum touch target. */
  min-width: 44px; min-height: 44px; padding: 0;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::before {
  content: ""; width: 20px; height: 2px; background: currentColor;
  box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor;
}
.menu__word { display: none; }   /* icon-only, so the header balances */
.menu__panel {
  position: absolute; left: 0; top: calc(100% + .5rem);
  min-width: min(78vw, 260px); background: #fff; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 18px 44px rgba(23,18,26,.16);
  padding: .5rem; display: grid;
}

/* Phone button — mobile only, balances the menu on the right. */
.callbtn {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--magenta); color: #fff;
  order: 3; flex: 0 0 auto;
}
.callbtn:hover { background: var(--magenta-lit); color: #fff; }
.menu__panel a {
  padding: .7rem .8rem; border-radius: 7px; text-decoration: none;
  font-weight: 700; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
.menu__panel a:hover { background: var(--mist); color: var(--magenta); }

@media (max-width: 900px) {
  /* Menu left · logo centred · phone right. The centre column takes the slack
     so the logo stays optically centred whatever the side widths are. */
  .masthead__in {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: .5rem;
  }
  .nav { display: none; }
  .menu { display: block; order: 1; justify-self: start; }
  .brand { order: 2; justify-self: center; margin-right: 0; }
  .callbtn { display: flex; order: 3; justify-self: end; }
  .brand img { height: 48px; }
}
@media (max-width: 360px) {
  .brand img { height: 40px; }
}

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

.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  /* Favour the upper part of the frame: that is where the coast and horizon
     are. Centre-cropping pushed them out and kept the engine. */
  object-position: 50% 38%;
}
/* Scrim, weighted to the BOTTOM rather than across the middle-left.
   The old diagonal wash sat over the centre of the frame, so the type competed
   with the view it is selling — on the current hero it darkened the coastline
   and left the engine as the brightest thing on the page. Now the copy sits in
   a band along the bottom and the upper two-thirds of the photograph — sky,
   ocean, coast — is left almost untouched. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(12,7,14,.90) 0%,
      rgba(12,7,14,.74) 26%,
      rgba(12,7,14,.34) 52%,
      rgba(12,7,14,.06) 74%,
      rgba(12,7,14,0)   100%),
    /* a whisper across the very top so the sticky header stays readable */
    linear-gradient(to bottom, rgba(12,7,14,.28), transparent 18%);
}
/* Bottom-anchored, and tall enough that a 3:2 photo is not cropped to a slot. */
.hero { min-height: min(78vh, 720px); display: grid; }
@supports (height: 1dvh) { .hero { min-height: min(78dvh, 720px); } }
.hero__in {
  position: relative; z-index: 1;
  align-self: end;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  display: grid; gap: 1.25rem; justify-items: start;
}
.hero__eyebrow {
  font-weight: 700; font-size: clamp(.66rem, 1.4vw, .78rem);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold); margin: 0;
  text-wrap: nowrap;
}
@media (max-width: 420px) { .hero__eyebrow { text-wrap: wrap; } }
@media (max-width: 700px) {
  /* Taller portrait crop so the frame reads as a photograph, not a letterbox
     slice. */
  /* Fixed px, no viewport units — see the note below. 580 is a compromise:
     tall enough to show a band of photograph above the copy, short enough that
     the section beneath is still visible on a 664px phone, so the visitor can
     tell there is more page. */
  .hero { min-height: 580px; }
  .hero--page { min-height: 320px; }

  /* Sit the copy LOWER and make it smaller. Measured on a 390px phone the copy
     block was 589px of a 640px hero — 92% of the frame — leaving 51px of
     photograph visible. Tightening the gaps, trimming the display size and
     cutting the bottom padding hands most of that back to the picture. */
  .hero .hero__in {
    gap: .55rem;
    /* Bottom padding still clears a phone's browser bar, but no more than that:
       every pixel here is a pixel of photograph. */
    padding-block: 1.25rem 1.6rem;
  }
  /* Keep the eyebrow on one line — wrapped, it cost 22px of photograph. */
  .hero .hero__eyebrow { font-size: .62rem; letter-spacing: .14em; }

  /* Drop the hero's CALL button on phones. It is redundant: the sticky header
     carries a dedicated 44px call button that is on screen at all times, so the
     phone is always one tap away. Reclaims ~62px of picture for nothing. */
  .hero .btn-row .btn--ghost { display: none; }
  .hero h1 { font-size: clamp(2.1rem, 10vw, 2.9rem); }
  .hero p { font-size: .94rem; line-height: 1.45; max-width: 36ch; }
  .hero .btn-row { gap: .6rem; }
  .hero .btn { padding: .8rem 1.2rem; font-size: .78rem; }
}
.hero h1 {
  margin: 0;
  font-size: var(--display); font-weight: 900; line-height: .92;
  letter-spacing: -.02em; text-transform: uppercase;
  text-wrap: balance;
}
.hero p { margin: 0; max-width: 44ch; font-size: 1.12rem; color: rgba(255,255,255,.9); }

/* Inner-page heroes: same principle as the homepage, smaller scale. They used
   to be a short band with the copy centred, which cropped the photograph to a
   sliver AND covered it across the middle. Now the band is tall enough to show
   the frame and the copy sits along the bottom. */
.hero--page { min-height: min(52vh, 460px); }
@supports (height: 1dvh) { .hero--page { min-height: min(52dvh, 460px); } }
.hero--page .hero__in {
  align-self: end;
  padding-block: clamp(2rem, 5vh, 3rem);
}
.hero--page h1 { font-size: var(--h1); }

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

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 900; font-size: .84rem; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; padding: .95rem 1.5rem; border-radius: 999px;
  border: 2px solid transparent; transition: transform .15s ease, background .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--gold:hover { background: #ffc23f; color: var(--ink); }
.btn--ghost { border-color: rgba(255,255,255,.55); color: #fff; }
.btn--ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.1); }
.btn--magenta { background: var(--magenta); color: #fff; }
.btn--magenta:hover { background: var(--magenta-lit); color: #fff; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* -------------------------------------------------------------- sections -- */

.band { padding-block: clamp(3rem, 8vw, 5.5rem); }
.band--mist { background: var(--mist); }
.band--ink { background: var(--ink); color: #fff; }
/* Exempt buttons: a blanket descendant link colour outranks .btn--gold
   (0,2,0 vs 0,1,0) and paints gold text onto a gold button — invisible. */
.band--ink a:not(.btn) { color: var(--gold); }

.band__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.band__head h2 {
  margin: 0 0 .4rem;
  font-size: var(--h2); font-weight: 900; letter-spacing: -.01em; text-transform: uppercase;
}
.band__head p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.band--ink .band__head p { color: rgba(255,255,255,.75); }

.eyebrow {
  font-weight: 700; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--magenta); margin: 0 0 .6rem;
}

/* --- Signature element: the photo tile grid, the original site's device --- */

/* Six tiles resolve as 2 + 4: two lead tiles, then a full row of four —
   no tile ever strands alone on its own row. */
.tiles {
  display: grid; gap: 12px;
  grid-template-columns: repeat(12, 1fr);
}
.tile {
  position: relative; display: block; overflow: hidden;
  min-height: 300px; border-radius: 4px; text-decoration: none; color: #fff;
  grid-column: span 3;
}
.tile:nth-child(1), .tile:nth-child(2) { grid-column: span 6; min-height: 430px; }
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,6,12,.82) 0%, rgba(10,6,12,.25) 45%, rgba(10,6,12,.05) 100%);
}
.tile:hover img { transform: scale(1.05); }
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 1.25rem 1.4rem;
}
.tile__label strong {
  display: block; font-size: clamp(1.25rem, 2.2vw, 1.75rem); font-weight: 900;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.05;
  /* The arrow is part of the label, not a separate line. Left to wrap it
     orphaned onto its own row on the longer titles ("PHOTOS & VIDEO →"), which
     made the titles start at different heights across the row. */
  text-wrap: balance;
}
/* Tiles 3-6 are a quarter of the row, not a half, so the title needs to be
   smaller to keep every label on ONE line and every baseline aligned. */
.tiles > .tile:nth-child(n+3) .tile__label strong {
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}
.tiles > .tile:nth-child(n+3) .tile__label span { font-size: .86rem; }
.tile__label span { font-size: .92rem; color: rgba(255,255,255,.85); }
.tile__label strong::after {
  content: " →"; color: var(--gold);
  display: inline-block; transition: transform .2s ease;
}
.tile:hover .tile__label strong::after { transform: translateX(4px); }

@media (max-width: 860px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tile, .tile:nth-child(1), .tile:nth-child(2) { grid-column: span 1; min-height: 220px; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile:nth-child(1), .tile:nth-child(2) { min-height: 240px; }
}

/* --- Stat strip: the numbers, pulled out of the prose -------------------- */

/* Flex, not grid. As a grid of auto-fit tracks, three stats at a width that
   fitted exactly two columns left an EMPTY fourth cell — and because the
   container's own background shows through the 1px gaps, that empty cell
   rendered as a blank square. Flex has no cells: the last row's items simply
   grow to fill the line, so a gap is impossible at any width or item count. */
.stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.stat {
  flex: 1 1 180px;
  background: #fff; padding: clamp(1.25rem, 3vw, 1.9rem);
}
.stat__n {
  display: block; font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900;
  line-height: 1; letter-spacing: -.03em; color: var(--magenta);
}
.stat__l {
  display: block; margin-top: .4rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-soft);
}
.band--ink .stats { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.14); }
.band--ink .stat { background: var(--ink); }
.band--ink .stat__n { color: var(--gold); }
.band--ink .stat__l { color: rgba(255,255,255,.72); }

/* --- Full-bleed quote over a photograph --------------------------------- */

.quoteband {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  display: grid; align-items: center;
  min-height: clamp(300px, 46vw, 460px);
}
.quoteband > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.quoteband::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,6,12,.78) 0%, rgba(10,6,12,.48) 52%, rgba(10,6,12,.16) 100%);
}
.quoteband__in { position: relative; z-index: 1; padding-block: clamp(2.5rem, 6vw, 4rem); }
.quoteband blockquote { margin: 0; max-width: 34ch; }
.quoteband blockquote p {
  margin: 0;
  font-size: clamp(1.35rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.22;
  letter-spacing: -.01em; text-wrap: balance;
}
.quoteband cite {
  display: block; margin-top: 1.1rem; font-style: normal;
  font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold);
}
.quoteband cite a { color: inherit; }
/* Longer quotes get calmer type and a wider measure. */
.quoteband--soft blockquote { max-width: 46ch; }
.quoteband--soft blockquote p {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 700; line-height: 1.4;
}

/* --- Split section: copy beside a picture, alternating sides ------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;          /* top-aligned: a short picture beside long copy
                                  must not float in the middle of a void */
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
.split__copy { max-width: 56ch; }
.split__copy > :first-child { margin-top: 0; }
.split__copy h2 {
  margin: 0 0 .8rem;
  font-size: var(--h2); font-weight: 900;
  letter-spacing: -.01em; line-height: 1.15;
}
.split__copy p + p { margin-top: 1rem; }
.split__copy p:last-child { margin-bottom: 0; }
/* Odd splits put the picture second; even ones flip, so the page alternates. */
.split:nth-of-type(even) .split__fig { order: -1; }

.split__fig { margin: 0; }
/* One consistent crop so every picture reads as a deliberate block rather
   than whatever aspect the source file happened to be. */
.split__fig img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; }
.split__fig figcaption {
  margin-top: .6rem; font-size: .84rem; color: var(--ink-soft);
}

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split:nth-of-type(even) .split__fig { order: 0; }
}

/* Award badges. These are the proof points — they earn their size. The panel
   stretches to the full height of the row so the badges fill it instead of
   floating in a short box beside a tall column of copy. */
.badges {
  display: flex; flex-direction: column;   /* stacked, so each badge can be big
                                              instead of capped at half a column */
  align-items: center; justify-content: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule); border-radius: 12px; background: var(--mist);
  align-self: stretch;          /* match the copy column's height */
  min-height: 100%;
}
.badges img { border-radius: 0; }
.badges .badge--tc  { width: min(84%, 380px); aspect-ratio: auto; object-fit: contain; }
.badges .badge--hof { width: min(62%, 280px); aspect-ratio: auto; object-fit: contain; }

@media (max-width: 800px) {
  /* Side by side once the panel is full-width — no height to fill. */
  .badges { flex-direction: row; flex-wrap: wrap; min-height: 0; }
  .badges .badge--tc  { width: min(48%, 300px); }
  .badges .badge--hof { width: min(38%, 220px); }
}

/* Small icon inside a card */
.card__icon {
  width: 46px; height: 46px; border-radius: 10px; margin-bottom: .9rem;
}

/* Photo inside a card (e.g. the photos-and-video card on /pricing/) */
.card__photo { margin-bottom: 1rem; border-radius: 8px; overflow: hidden; }
.card__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Compact person row (name + role + thumbnail) */
.mini { display: flex; align-items: center; gap: .85rem; }
.mini img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; flex: 0 0 auto; }
.mini h3 { margin: 0; font-size: 1.02rem; font-weight: 800; }
.mini .person__role { margin: 0 0 .15rem; }

/* --- Experience page ------------------------------------------------------ */

/* A split flush against its band's padding — the band supplies the air. */
.shell > .split:first-child { margin-top: 0; }
.shell > .split:last-child { margin-bottom: 0; }

/* Sub-heading inside a split's copy column. */
.split__copy h3 {
  margin: 1.7rem 0 .45rem;
  font-size: var(--h3); font-weight: 800; line-height: 1.25;
}

/* Portrait crop for a split figure — more presence beside long copy. */
.split__fig--tall img { aspect-ratio: 4 / 5; }

/* The badges card reads as paper when the band behind it is mist. */
.band--mist .badges { background: var(--paper); }

/* A pull-quote used as a grid item sits flush like a card. */
.cols .quote { margin: 0; }

/* Three equal photo tiles — the homepage device, sized for an inner page.
   Kept after the base .tiles rules and their media queries so these win. */
.tiles--trio { grid-template-columns: repeat(3, 1fr); }
.tiles--trio .tile,
.tiles--trio .tile:nth-child(1),
.tiles--trio .tile:nth-child(2) { grid-column: auto; min-height: 320px; }
@media (max-width: 860px) {
  .tiles--trio { grid-template-columns: 1fr; }
  .tiles--trio .tile,
  .tiles--trio .tile:nth-child(1),
  .tiles--trio .tile:nth-child(2) { min-height: 220px; }
}

/* Contact details as a definition list — label above value, one rhythm, and it
   is what the markup actually is. */
/* Margins, not grid gap: a gap applies between EVERY child, so it pushed each
   label away from its own value instead of only separating the pairs. */
.details { margin: 0; }
.details dt {
  margin-top: 1.5rem;
  font-weight: 800; font-size: .78rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-soft);
}
.details dt:first-child { margin-top: 0; }
.details dd { margin: .3rem 0 0; font-size: 1.05rem; line-height: 1.5; }
.details__note { display: block; margin-top: .2rem; font-size: .88rem; color: var(--ink-soft); }

/* One-tap map link to the hangar (contact + directions). Pill-shaped like the
   buttons but quieter — an outline, so it reads as a utility, not the CTA. */
.maplink {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .8rem; min-height: 44px; padding: .55rem 1.1rem;
  border: 2px solid var(--magenta); border-radius: 999px;
  font-weight: 800; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--magenta); background: var(--paper);
}
.maplink:hover { background: var(--magenta); color: #fff; }
.maplink svg { flex: 0 0 auto; }

/* A picture that closes a section, sized so it never dwarfs the copy above. */
.figure-wide { margin: clamp(2.5rem, 6vw, 4rem) 0 0; }
.figure-wide img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 10px;
}
@media (max-width: 700px) { .figure-wide img { aspect-ratio: 16 / 10; } }

/* The hangar map. A diagram, not a photograph: never cropped, so no aspect
   ratio and no object-fit — it has to be read, not admired. */
.figure-map { margin: clamp(2rem, 5vw, 3rem) 0 0; }
/* The map's own ground is --mist, so on a white band it would bleed off the
   page with no edge. The rule gives it the same boundary the cards have. */
.figure-map img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid var(--rule);
}
.figure-map figcaption {
  margin-top: .7rem; font-size: .86rem; color: var(--ink-soft); max-width: var(--measure);
}

/* ----------------------------------------------------------------- prose -- */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 {
  margin-top: 2.4em; font-size: var(--h2); font-weight: 900;
  letter-spacing: -.01em; line-height: 1.15;
}
.prose h3 {
  margin-top: 1.9em; font-size: var(--h3); font-weight: 800; line-height: 1.25;
}
.prose h2 + p, .prose h3 + p { margin-top: .55em; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose li + li { margin-top: .4em; }
.prose strong { font-weight: 700; }
.prose blockquote {
  margin: 2em 0; padding: .2em 0 .2em 1.3rem;
  border-left: 3px solid var(--gold); font-size: 1.1rem;
}
.prose blockquote footer { margin-top: .5em; font-size: .9rem; color: var(--ink-soft); }

.lede { font-size: 1.2rem; color: var(--ink-soft); max-width: 58ch; }

/* ------------------------------------------------------------------ grid -- */

.cols { display: grid; gap: var(--gap); }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.cols--3 { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

.card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
}
.card h3 { margin: 0 0 .5rem; font-size: var(--h3); font-weight: 800; }
.card p:last-child { margin-bottom: 0; }

/* --- pricing --- */

.fares { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fare {
  border: 1px solid var(--rule); border-radius: 12px; padding: 1.6rem 1.5rem;
  display: grid; gap: .35rem; align-content: start; background: #fff;
}
/* Photo header on a fare card: bleeds through the card's padding so the
   image runs edge to edge, flush with the rounded top. */
.fare__photo {
  display: block; margin: -1.6rem -1.5rem 1.05rem;
  border-radius: 10px 10px 0 0; overflow: hidden;
}
.fare__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fare--feature { border-color: var(--magenta); border-width: 2px; position: relative; }
/* The badge sits INSIDE the photo, not straddling the card's top edge: the
   photo header bleeds flush to that edge, so a pill hung above it gets covered
   by the picture. z-index lifts it over the image; the shadow keeps it legible
   whatever the photo underneath happens to be. */
.fare--feature::before {
  content: "Most popular"; position: absolute; z-index: 2;
  top: .85rem; left: .85rem;
  background: var(--magenta); color: #fff; font-size: .66rem; font-weight: 900;
  letter-spacing: .14em; text-transform: uppercase; padding: .3rem .65rem;
  border-radius: 999px; box-shadow: 0 2px 10px rgba(12, 7, 14, .35);
}
.fare__name { font-weight: 900; text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }
.fare__time { color: var(--ink-soft); font-size: .92rem; }
.fare__price { font-size: 2.4rem; font-weight: 900; line-height: 1; letter-spacing: -.03em; }

/* --- FAQ --- */

.faq { max-width: var(--measure); display: grid; gap: .6rem; }
.faq details {
  border: 1px solid var(--rule); border-radius: 10px; background: #fff;
  padding: 0 1.15rem;
}
.faq details[open] { border-color: #cdb8cd; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.05rem 0;
  font-weight: 800; font-size: 1.02rem; line-height: 1.35;
  display: flex; gap: .8rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+"; flex: 0 0 auto; color: var(--magenta);
  font-weight: 900; font-size: 1.2rem; line-height: 1.15;
}
.faq details[open] summary::before { content: "–"; }
.faq__body { padding: 0 0 1.15rem 1.9rem; }
.faq__body > * + * { margin-top: .9em; }
.faq__body p { margin: 0; }

/* --- testimonials --- */

.quotes { columns: 2; column-gap: var(--gap); }
@media (max-width: 760px) { .quotes { columns: 1; } }
.quote {
  break-inside: avoid; margin: 0 0 var(--gap);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: 1.4rem 1.5rem;
}
.quote p { margin: 0 0 .8rem; }
.quote cite {
  font-style: normal; font-weight: 900; font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--magenta);
}

/* --- photo wall (photo-video page) ---
   Masonry columns, photos at their natural aspect — nothing is cropped,
   because on this page the photograph itself is the content. */

.wall { columns: 3; column-gap: 12px; }
.wall > a { margin: 0 0 12px; break-inside: avoid; border-radius: 4px; overflow: hidden; }
.wall img { width: 100%; }
@media (max-width: 900px) { .wall { columns: 2; column-gap: 8px; } .wall > a { margin-bottom: 8px; } }
@media (max-width: 560px) {
  /* One column, edge to edge — the phone becomes a photo reel. The body
     clip guards against a hairline horizontal scroll where 100vw includes
     a classic scrollbar. */
  body { overflow-x: clip; }
  .wall { columns: 1; margin-inline: calc(50% - 50vw); }
  .wall > a { border-radius: 0; margin-bottom: 6px; }
}

/* --- standalone lightbox-able figure --- */

.photo { margin: 0; }
.photo img { width: 100%; border-radius: 10px; }
.photo figcaption { margin-top: .6rem; font-size: .84rem; color: var(--ink-soft); }
.quotes .photo { break-inside: avoid; margin-bottom: var(--gap); }
.quotes .photo img { border-radius: 10px; }

/* --- person --- */

.person { display: grid; gap: var(--gap); grid-template-columns: minmax(200px, 280px) 1fr; align-items: start; }
.person img { border-radius: 10px; }
.person__role {
  font-weight: 900; font-size: .74rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--magenta); margin: 0 0 .3rem;
}
.person h2 { margin: 0 0 .8rem !important; }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } }

/* --- directions list --- */

.routes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.route {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.3rem;
  text-decoration: none; color: var(--ink); font-weight: 700; background: #fff;
}
.route:hover { border-color: var(--magenta); color: var(--magenta); }
.route::after { content: "→"; color: var(--gold); font-weight: 900; }

.steps { counter-reset: step; list-style: none; padding: 0; max-width: var(--measure); }
.steps li {
  counter-increment: step; position: relative;
  padding-left: 3rem; margin-bottom: 1.1rem;
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--magenta); color: #fff;
  font-weight: 900; font-size: .9rem;
  display: grid; place-items: center;
}

.callout {
  border-left: 3px solid var(--gold); background: var(--mist);
  padding: 1.1rem 1.3rem; border-radius: 0 8px 8px 0; max-width: var(--measure);
}
.callout p { margin: 0; }
.callout p + p { margin-top: .7em; }

/* ------------------------------------------------------------------ form -- */

/* align-content: start is load-bearing. As a grid item in .cols--2 the form is
   stretched to the height of the taller column, and a grid's default
   `align-content: stretch` then inflates every auto row to fill it — which made
   single-line inputs ~100px tall and pushed labels away from their fields. */
.form { max-width: 640px; display: grid; gap: 1.15rem; align-content: start; }
.field { display: grid; gap: .4rem; align-content: start; }
.field > label, .fieldset > legend {
  font-weight: 800; font-size: .84rem; letter-spacing: .04em;
}
.field .hint { font-size: .84rem; color: var(--ink-soft); }
.req { color: var(--magenta); }

input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select {
  font: inherit; font-size: 1rem; color: var(--ink);
  padding: .8rem .9rem; border: 1px solid #c9c2ce; border-radius: 8px;
  background: #fff; width: 100%;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus { border-color: var(--magenta); }

.fieldset { border: 1px solid var(--rule); border-radius: 10px; padding: 1.1rem 1.2rem; margin: 0; }
.fieldset > legend { padding: 0 .4rem; }
.choices { display: grid; gap: .55rem; margin-top: .7rem; }
.choice { display: flex; align-items: flex-start; gap: .6rem; font-weight: 500; }
.choice input { margin-top: .35rem; }

.form__error {
  border-left: 3px solid #c0392b; background: #fdf0ee;
  padding: .9rem 1.1rem; border-radius: 0 8px 8px 0; font-weight: 600;
}

.hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }

/* -------------------------------------------------------------- lightbox -- */

/* Triggers: real links to the full-size file, upgraded by lightbox.js. */
a[data-lb] { display: block; cursor: zoom-in; }
a[data-lb] img { transition: filter .35s ease; }
a[data-lb]:hover img { filter: brightness(1.07); }

.lb-lock { overflow: hidden; }   /* no body scroll behind the open viewer */

.lightbox {
  position: fixed; inset: 0;
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: rgba(10, 6, 12, .97); color: #fff;
}
.lightbox::backdrop { background: rgba(10, 6, 12, .8); }

.lightbox__stage {
  margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 3.75rem)
           calc(env(safe-area-inset-right, 0px) + .75rem)
           calc(env(safe-area-inset-bottom, 0px) + 3.25rem)
           calc(env(safe-area-inset-left, 0px) + .75rem);
  touch-action: pan-y;            /* horizontal swipes belong to the viewer */
}
.lightbox__stage img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  border-radius: 3px;
}

.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
  padding: .8rem calc(env(safe-area-inset-right, 0px) + 1.1rem)
           calc(env(safe-area-inset-bottom, 0px) + .8rem)
           calc(env(safe-area-inset-left, 0px) + 1.1rem);
  font-size: .88rem; color: rgba(255,255,255,.92);
  background: linear-gradient(to top, rgba(10,6,12,.75), transparent);
  pointer-events: none;
}
.lightbox__count { font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.72); white-space: nowrap; }

.lightbox button {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff;
}
.lightbox button:hover { background: rgba(255,255,255,.24); }
.lightbox button[hidden] { display: none; }

.lightbox__close {
  position: absolute; z-index: 2;
  top: calc(env(safe-area-inset-top, 0px) + .75rem);
  right: calc(env(safe-area-inset-right, 0px) + .75rem);
}
.lightbox__nav {
  position: absolute; z-index: 2; top: 50%; transform: translateY(-50%);
}
.lightbox__nav--prev { left: calc(env(safe-area-inset-left, 0px) + .6rem); }
.lightbox__nav--next { right: calc(env(safe-area-inset-right, 0px) + .6rem); }

@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-in .18s ease; }
  @keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
}

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

.foot { background: var(--magenta); color: #fff; padding-block: clamp(2.5rem, 6vw, 3.75rem); }
.foot a:not(.btn) { color: #fff; }
.foot__in { display: grid; gap: 1.4rem; text-align: center; justify-items: center; }
.foot__name { font-weight: 900; font-size: 1.15rem; letter-spacing: .02em; margin: 0; }
.foot__links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem;
  list-style: none; margin: 0; padding: 0;
}
.foot__links a {
  font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none;
}
.foot__links a:hover { text-decoration: underline; }
.foot__meta { margin: 0; font-size: .92rem; color: rgba(255,255,255,.86); }
.foot__contact { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center; font-weight: 700; }
.foot__fine { font-size: .8rem; color: rgba(255,255,255,.7); margin: 0; }

/* Touch ergonomics — give small text links a >=44px tap box on touch-width
   screens without changing the desktop footer. Text sizes are untouched. */
@media (max-width: 900px) {
  .foot__links { gap: 0 .25rem; }
  .foot__links a { display: inline-block; padding: .95rem .5rem; }
  .foot__contact a { display: inline-block; padding: .55rem .5rem; }
  .choice { padding-block: .55rem; }
}
/* "More from the guest book" — grow the tap box without shifting layout. */
.quoteband cite a { display: inline-block; padding-block: .95rem; margin-block: -.95rem; }

/* --------------------------------------------------------------- utility -- */

.stack > * + * { margin-top: 1.1rem; }
.center { text-align: center; }
.mt-0 { margin-top: 0 !important; }
.nowrap { white-space: nowrap; }