/* ------------------------------------------------------------------
   home10 — Night Drive.
   A harbour-night homepage: the limousine stands in a dark studio with
   light trails passing behind it, the booking card rides over the hero,
   then deco-framed bands for area, services, fleet, why us, reviews and
   the call band.

   Loaded after zulk.css. Everything is namespaced `h10-`.
   ------------------------------------------------------------------ */

.h10 {
  --ink: #0B1422;            /* harbour night */
  --lacquer: #111D2F;        /* raised surfaces */
  --lacquer-2: #16253B;
  --champagne: #DDBE82;      /* brand gold, from the logo */
  --brass: #A98646;
  --ivory: #EFE8D8;
  --smoke: #93A0B4;
  --garnet: #B23A48;         /* tail-light accent, used sparingly */
  --line: rgba(221, 190, 130, .22);
  --h10-display: "Poiret One", "Didot", "Bodoni 72", Georgia, serif;
  --h10-body: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --h10-gutter: clamp(16px, 5vw, 64px);
  --h10-max: 1200px;

  background: var(--ink);
  color: var(--ivory);
  font-family: var(--h10-body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 300;
  overflow-x: hidden;
}

:where(.h10) img { max-width: 100%; }
/* Only plain links inherit the text colour; classed buttons keep their own.
   See the note in home9.css — the same rule hid the header call button. */
:where(.h10) a:not([class]) { color: inherit; }
.h10 :focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; border-radius: 2px; }
.h10 .h10-wrap { max-width: var(--h10-max); margin-inline: auto; padding-inline: var(--h10-gutter); }
:where(.h10) h1, :where(.h10) h2, :where(.h10) h3 { font-family: var(--h10-display); font-weight: 400; text-wrap: balance; margin: 0; letter-spacing: .01em; }
:where(.h10) h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; color: var(--ivory); }
:where(.h10) h3 { font-size: 1.45rem; line-height: 1.2; }
:where(.h10) p { margin: 0; }

/* ---------------- nav ---------------- */
.h10-nav { position: fixed; inset: 0 0 auto 0; z-index: 30; padding-top: env(safe-area-inset-top, 0px); transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.h10-nav.is-solid { background: rgba(11, 20, 34, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-color: var(--line); }
.h10-nav .h10-wrap { display: flex; align-items: center; gap: 28px; height: 78px; }
.h10-nav__logo { display: block; height: 46px; flex: none; }
/* The logo ships as black artwork on transparency, and this bar is dark in
   both states, so it needs inverting to white the way the footer mark is in
   zulk.css. The champagne glow keeps it from looking pasted on. */
.h10-nav__logo img { height: 100%; width: auto; display: block; filter: invert(1) drop-shadow(0 0 10px rgba(221, 190, 130, .28)); }
.h10-nav__links { display: flex; gap: 26px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.h10-nav__links a { text-decoration: none; font-size: .93rem; color: var(--smoke); transition: color .2s; }
.h10-nav__links a:hover { color: var(--champagne); }
.h10-call { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; border: 1px solid var(--champagne); color: var(--champagne); padding: 9px 16px; font-size: .92rem; font-weight: 500; letter-spacing: .02em; transition: background .2s, color .2s; white-space: nowrap; }
.h10-call:hover { background: var(--champagne); color: var(--ink); }
.h10-call svg { width: 16px; height: 16px; }
/* Phone menu: the links fold into a panel under the bar. */
.h10-burger { display: none; flex: none; width: 44px; height: 42px; border: 1px solid var(--line); background: transparent; cursor: pointer; place-content: center; gap: 6px; padding: 0; }
.h10-burger span { display: block; width: 18px; height: 1.5px; background: var(--champagne); transition: transform .3s; }
.h10-nav.is-open .h10-burger span:first-child { transform: translateY(3.75px) rotate(45deg); }
.h10-nav.is-open .h10-burger span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.h10-nav__only-panel { display: none; }
@media (max-width: 980px) {
  .h10-nav .h10-call { margin-left: auto; }
  .h10-nav .h10-wrap { gap: 12px; }
  .h10-burger { display: grid; }
  .h10-nav.is-open { background: var(--ink); border-color: var(--line); }
  .h10-nav__links { position: absolute; top: 100%; left: 0; right: 0; margin: 0; flex-direction: column; gap: 0; padding: 4px var(--h10-gutter) 24px; background: var(--ink); border-bottom: 1px solid var(--line); max-height: calc(100svh - 78px); overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s; }
  .h10-nav.is-open .h10-nav__links { opacity: 1; visibility: visible; transform: none; }
  .h10-nav__links a { display: block; padding: 15px 2px; font-size: 1.1rem; color: var(--ivory); border-bottom: 1px solid var(--line); }
  .h10-nav__only-panel { display: block; padding-top: 18px; }
  .h10-nav__only-panel a { border: 0; text-align: center; background: var(--champagne); color: var(--ink); font-weight: 500; }
  .h10-nav__only-panel a:hover { color: var(--ink); background: #E9CF9B; }
}
@media (max-width: 520px) { .h10-nav .h10-call span { display: none; } .h10-nav .h10-call { padding: 10px; } }

/* ---------------- hero ---------------- */
.h10-hero {
  position: relative; min-height: min(880px, 100svh); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 70% at 70% 100%, #1B2C47 0%, transparent 60%), var(--ink);
}
.h10-hero::before {
  content: ""; position: absolute; left: 50%; bottom: -40%; width: 180vmax; height: 180vmax; transform: translateX(-50%); z-index: -2;
  background: repeating-conic-gradient(from 0deg, rgba(221, 190, 130, .07) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%); mask: radial-gradient(circle, #000 0 30%, transparent 62%);
}
.h10-stage { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
/* Shown until the 3D takes over, and left in place when it cannot run. */
.h10-fallback { position: absolute; z-index: -1; right: 2%; bottom: 20%; width: min(58%, 760px); pointer-events: none; }
.h10-fallback img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .6)); }
.h10-hero__in { width: 100%; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px 48px; align-items: end; padding-block: 150px 56px; }
.h10-hero__in .h10-book { grid-column: 1 / -1; }
.h10-hero__copy { padding-bottom: 24px; }
.h10-hero h1 { font-size: clamp(3rem, 7.6vw, 6.4rem); line-height: .95; color: var(--ivory); }
.h10-hero h1 em { font-style: normal; color: var(--champagne); }
.h10-lede { margin-top: 22px; max-width: 34ch; font-size: 1.15rem; color: var(--smoke); }
.h10-meta { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 30px; font-size: .95rem; color: var(--ivory); }
.h10-meta b { font-family: var(--h10-display); font-weight: 400; font-size: 2rem; color: var(--champagne); display: block; line-height: 1; }
.h10-in { animation: h10rise 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.h10-in.d2 { animation-delay: .15s; } .h10-in.d3 { animation-delay: .3s; } .h10-in.d4 { animation-delay: .45s; }
@keyframes h10rise { from { transform: translateY(24px); opacity: .001; } to { transform: none; opacity: 1; } }

/* booking card */
.h10-book { background: linear-gradient(180deg, rgba(22, 37, 59, .92), rgba(17, 29, 47, .94)); border: 1px solid var(--line); padding: 26px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; }
.h10-book::before, .h10-book::after { content: ""; position: absolute; width: 22px; height: 22px; border: 1px solid var(--champagne); }
.h10-book::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.h10-book::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.h10-book h2 { font-size: 1.45rem; color: var(--champagne); margin-bottom: 4px; }
.h10-book .h10-sub { font-size: .9rem; color: var(--smoke); margin-bottom: 18px; }
.h10-tabs { display: flex; margin-bottom: 18px; border: 1px solid var(--line); min-width: min(100%, 340px); }
.h10-tabs label { flex: 1; text-align: center; color: var(--smoke); font-size: .88rem; padding: 9px 6px; cursor: pointer; transition: background .2s, color .2s; }
.h10-tabs input { position: absolute; opacity: 0; pointer-events: none; }
.h10-tabs input:checked + label { background: var(--champagne); color: var(--ink); font-weight: 500; }
.h10-tabs input:focus-visible + label { outline: 2px solid var(--champagne); outline-offset: 2px; }
.h10-book__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 24px; }
.h10-book__row { display: flex; gap: 14px; align-items: flex-end; }
/* The date column is wider than it looks like it needs to be: the browser's
   own date control draws 01/10/2026 plus a calendar button, and anything
   narrower clips the year. */
.h10-fields { display: grid; grid-template-columns: 1.3fr 1.3fr 1.35fr .95fr .8fr 1.05fr; gap: 12px; flex: 1; min-width: 0; }
.h10-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.h10-field label { font-size: .78rem; color: var(--smoke); letter-spacing: .03em; }
/* color-scheme tells the browser to draw its own parts — the calendar and
   clock buttons, the picker panel, the select arrow — for a dark background.
   Without it they come out near-black on near-black. */
.h10-field input, .h10-field select { background: rgba(11, 20, 34, .7); border: 1px solid rgba(147, 160, 180, .28); color: var(--ivory); color-scheme: dark; font: inherit; font-size: .95rem; padding: 10px 12px; border-radius: 0; min-width: 0; width: 100%; transition: border-color .2s; }
.h10-field input[type="date"], .h10-field input[type="time"] { padding-inline: 10px; }
.h10-field input:focus, .h10-field select:focus { outline: none; border-color: var(--champagne); }
.h10-btn { display: inline-flex; justify-content: center; align-items: center; gap: 10px; background: var(--champagne); color: var(--ink); border: 0; font: inherit; font-weight: 500; font-size: 1rem; padding: 14px 22px; cursor: pointer; text-decoration: none; transition: background .2s, transform .2s; }
.h10-btn:hover { background: #E9CF9B; color: var(--ink); }
.h10-btn:active { transform: translateY(1px); }
.h10-book .h10-btn { white-space: nowrap; padding-block: 12px; }
.h10-note { margin-top: 12px; font-size: .88rem; color: var(--champagne); }
@media (max-width: 1100px) { .h10-fields { grid-template-columns: 1fr 1fr 1fr; } .h10-book__row { flex-direction: column; align-items: stretch; } }
@media (max-width: 900px) { .h10-hero__in { grid-template-columns: 1fr; padding-block: 120px 40px; gap: 36px; } .h10-hero { min-height: auto; } .h10-hero__copy { padding-bottom: min(62vw, 300px); } .h10-fallback { width: 86%; right: 4%; bottom: 34%; } }
@media (max-width: 640px) { .h10-fields { grid-template-columns: 1fr 1fr; } .h10-fields .h10-full { grid-column: 1 / -1; } }
@media (max-width: 440px) { .h10-fields { grid-template-columns: 1fr; } }

/* ---------------- area strip ---------------- */
.h10-area { border-block: 1px solid var(--line); background: var(--lacquer); }
.h10-area .h10-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; padding-block: 22px; }
.h10-area p { color: var(--smoke); font-size: .95rem; }
.h10-states { display: flex; gap: 28px; flex-wrap: wrap; }
.h10-states span { font-family: var(--h10-display); font-size: 1.5rem; color: var(--champagne); }
.h10-area .h10-ticker { margin-left: auto; font-size: .95rem; color: var(--ivory); }

/* ---------------- sections ---------------- */
.h10-band { padding-block: clamp(72px, 10vw, 128px); }
.h10-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 52px; }
.h10-head p { color: var(--smoke); max-width: 48ch; }
.h10-rule { display: flex; align-items: center; gap: 14px; color: var(--champagne); margin-bottom: 18px; }
.h10-rule::after { content: ""; height: 1px; flex: 1; max-width: 120px; background: linear-gradient(90deg, var(--champagne), transparent); }
.h10-rule svg { width: 26px; height: 14px; }
@media (max-width: 800px) { .h10-head { grid-template-columns: 1fr; } }

/* services */
.h10-services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.h10-svc { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 26px 34px; display: flex; flex-direction: column; gap: 12px; position: relative; transition: background .35s; text-decoration: none; color: inherit; }
.h10-svc:hover { background: var(--lacquer); }
.h10-svc__ic { width: 44px; height: 44px; display: grid; place-items: center; color: var(--champagne); font-size: 1.3rem; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.h10-svc:hover .h10-svc__ic { transform: translateY(-4px); }
.h10-svc h3 { font-size: 1.35rem; }
.h10-svc p { color: var(--smoke); font-size: .95rem; }
.h10-svc--feature { grid-column: span 2; background: linear-gradient(135deg, var(--lacquer-2), var(--lacquer)); }
.h10-svc--feature h3 { font-size: 1.8rem; color: var(--champagne); }
@media (max-width: 1000px) { .h10-services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .h10-services { grid-template-columns: 1fr; } .h10-svc--feature { grid-column: auto; } }

/* fleet */
.h10-fleet-band { background: linear-gradient(180deg, var(--ink), var(--lacquer) 40%, var(--ink)); }
.h10-fleet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.h10-view { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 55% at 50% 78%, rgba(221, 190, 130, .16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(221, 190, 130, .05) 0 1px, transparent 1px 48px), var(--ink); }
.h10-view img { position: absolute; left: 6%; right: 6%; bottom: 14%; width: 88%; height: 68%; object-fit: contain; transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .2, 1); }
.h10-view img.is-out { opacity: 0; transform: translateX(-40px); }
.h10-view__floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, rgba(221, 190, 130, .12), transparent); border-top: 1px solid var(--line); }
.h10-view__cap { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--smoke); z-index: 1; }
.h10-view__cap b { color: var(--champagne); font-weight: 500; }
.h10-list { display: flex; flex-direction: column; }
.h10-list button { all: unset; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px 4px; border-bottom: 1px solid var(--line); transition: padding .3s; }
.h10-list button:first-child { border-top: 1px solid var(--line); }
.h10-list button:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }
.h10-list .n { font-family: var(--h10-display); font-size: 1.6rem; color: var(--smoke); transition: color .3s; }
.h10-list .s { color: var(--smoke); font-size: .9rem; text-align: right; font-variant-numeric: tabular-nums; }
.h10-list .d { grid-column: 1 / -1; color: var(--smoke); font-size: .92rem; max-height: 0; overflow: hidden; transition: max-height .45s; }
.h10-list button[aria-selected="true"] { padding-left: 14px; }
.h10-list button[aria-selected="true"] .n { color: var(--champagne); }
.h10-list button[aria-selected="true"] .d { max-height: 90px; }
.h10-list button:hover .n { color: var(--ivory); }
@media (max-width: 900px) { .h10-fleet { grid-template-columns: 1fr; } }

/* why */
.h10-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.h10-why div { border-top: 1px solid var(--champagne); padding-top: 22px; }
.h10-why h3 { color: var(--champagne); margin-bottom: 10px; }
.h10-why p { color: var(--smoke); }
@media (max-width: 800px) { .h10-why { grid-template-columns: 1fr; gap: 32px; } }

/* reviews */
.h10-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.h10-rev { border: 1px dashed rgba(221, 190, 130, .35); padding: 28px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.h10-rev .stars { color: var(--champagne); letter-spacing: 4px; }
.h10-rev p { color: var(--smoke); font-size: .95rem; }
.h10-rev small { color: var(--brass); }
@media (max-width: 860px) { .h10-reviews { grid-template-columns: 1fr; } }

/* call band */
.h10-cta { position: relative; border: 1px solid var(--line); padding: clamp(36px, 6vw, 72px); overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, rgba(221, 190, 130, .14), transparent 60%), var(--lacquer); }
.h10-cta::after { content: ""; position: absolute; right: -120px; top: 50%; width: 420px; height: 420px; transform: translateY(-50%); border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 18px, rgba(221, 190, 130, .12) 18px 19px); }
.h10-cta__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 36px; align-items: center; }
.h10-phones { display: flex; flex-direction: column; gap: 14px; }
.h10-phone { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--line); padding: 14px 18px; background: rgba(11, 20, 34, .6); }
.h10-phone a { font-family: var(--h10-display); font-size: clamp(1.5rem, 3vw, 2rem); text-decoration: none; color: var(--ivory); font-variant-numeric: tabular-nums; }
.h10-phone small { color: var(--smoke); font-size: .82rem; display: block; }
.h10-copy { background: none; border: 1px solid var(--line); color: var(--champagne); font: inherit; font-size: .82rem; padding: 6px 10px; cursor: pointer; }
.h10-copy:hover { border-color: var(--champagne); }
@media (max-width: 860px) { .h10-cta__grid { grid-template-columns: 1fr; } }

/* ---------------- concept switcher ----------------
   Shared preview pill; its styling lives in home8.css, which this page does
   not load, so it is restated here in this design's own colours. */
.h10 .h8-switch { position: fixed; bottom: 18px; left: 18px; z-index: 90; display: flex; gap: 4px; padding: 6px; border-radius: 999px; background: rgba(11, 20, 34, .92); border: 1px solid var(--line); backdrop-filter: blur(10px); }
.h10 .h8-switch a { padding: 6px 12px; border-radius: 999px; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; color: var(--smoke); }
.h10 .h8-switch a[aria-current="page"], .h10 .h8-switch a:hover { background: var(--champagne); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .h10-in { animation: none; }
  .h10 * { transition: none !important; }
}