/* Hallmark · shape: brand-led transport catalogue · genre: editorial · theme: brand
 * brand: SUN DAY TRAVEL (spec 2026-11-10) · paper: oklch(99.5% 0.002 25) · accent: oklch(52% 0.19 24) · display: Outfit · body: DM Sans
 * hero: full-width supplied fleet film beneath the text, by request · nav: inherited wordmark and service links · footer: company and booking contacts
 * signature: the actual Sun Day fleet moving through Queensland · axes: light/geometric-sans/warm · posture: Committed navy field, restrained red signal
 * contrast: tokenized and visually reviewed · fold: inspected at 1280/1440/1920/375 · job: book · v2.0.0
 * hero-review: subagent ship · finish-review: subagent fix, 3 resolved, 0 unresolved · gap: none */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 · weakest: V, the requested Ever Sun family style is retained while the real fleet film and photo wall identify Sun Day. */
/* Hallmark · waive 44a · full-width fleet film with bottom video controls · The fleet background keeps booking text above the vehicle rooflines and playback controls below, as confirmed by the fresh hero review. */
/* Hallmark · waive 44c · compact catalogue introductions followed by actual vehicle photographs · The fleet and gallery pages start their browseable inventory in the first screen instead of repeating the full-height home film. */
/* Hallmark · waive 59 · one continuous gallery inventory · The gallery has one photo wall between its introduction and booking close, so there are no repeated section gaps to vary. */
/* Hallmark · waive 78 · catalogue pages use item-scale close headings · The fleet and gallery pages keep the booking close secondary to vehicle images, while home sections use the full section size. */
/* Hallmark · waive 83 · user-requested real fleet photo wall · The gallery is an inventory of supplied vehicle exteriors and interiors so visitors can compare seating and luggage arrangements. */
/* Hallmark · dismissed 58 · The English service inventory fits one heading, four transport choices and a vehicle link in the measured window; its 86 words are separate labels and short descriptions, not a prose block. */
/* Hallmark · dismissed 77 · Gallery is a dedicated fleet photo wall reached from the full home page, rather than a second landing page with repeated marketing sections. */
/* Hallmark · answered F3 · Balanced display wrapping keeps the bilingual fleet headings readable across narrow viewports without a final short orphan word. */
@import url('/sun-day-theme/tokens.css');
@import url('/sun-day-theme/base.css');

html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: var(--space-3xl); }
body { overflow-x: clip; font-synthesis: none; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; min-width: 0; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration-thickness: 2px; }
a, button, input, select, textarea, summary { min-width: 0; }
:focus-visible { outline-width: 3px; }
.skip { position: absolute; top: calc(-1 * var(--space-3xl)); left: var(--space-md); z-index: var(--z-toast); padding: var(--space-sm) var(--space-md); color: var(--color-paper); background: var(--color-ink); }
.skip:focus-visible { top: var(--space-md); }
.contact-strip { background: var(--color-field); color: var(--color-field-ink); font-size: var(--text-xs); }
.contact-strip .container { display: flex; align-items: center; justify-content: space-between; min-height: 32px; gap: var(--space-md); }
.contact-strip a:focus-visible, .sun-footer a:focus-visible, .sun-hero :focus-visible { outline-color: var(--color-focus-on-dark); }
.sun-header { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-bottom: 1px solid var(--color-rule); }
.navigation { display: flex; align-items: center; gap: var(--space-lg); min-height: 88px; }
.sun-logo { flex-shrink: 0; }
.sun-logo img { width: 112px; height: 78px; object-fit: contain; }
.navigation nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.navigation nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-size: var(--text-sm); font-weight: 600; }
.navigation nav a:hover, .navigation nav a[aria-current='page'] { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.4em; }
.nav-actions { display: flex; align-items: center; gap: var(--space-xs); }
.btn, .language-button, .menu-button, .video-toggle, .filter-control { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-control); color: var(--color-accent-ink); background: var(--color-accent); font-size: var(--text-md); font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { color: var(--color-accent-ink); background: var(--color-accent-hover); text-decoration: none; }
.btn:active, .language-button:active, .menu-button:active, .video-toggle:active { transform: translateY(1px); }
.btn:disabled, button:disabled, [aria-disabled='true'] { cursor: not-allowed; opacity: 0.55; transform: none; }
.btn[aria-busy='true'], button[aria-busy='true'] { cursor: progress; }
.btn.quiet { background: transparent; border-color: currentColor; color: inherit; }
.btn.quiet:hover { background: var(--color-paper-3); color: var(--color-ink); }
.language-button, .menu-button { color: var(--color-ink); background: transparent; border-color: var(--color-rule); padding-inline: var(--space-sm); }
.language-button:hover, .menu-button:hover { background: var(--color-paper-3); }
.language-button { font-size: var(--text-sm); }
.menu-button { display: none; width: 48px; flex-shrink: 0; }
.menu-button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.nav-quote { font-size: var(--text-sm); padding-inline: var(--space-md); }
.sun-hero { position: relative; isolation: isolate; overflow: clip; background: var(--color-field); color: var(--color-field-ink); }
.hero-backdrop, .hero-backdrop::after { position: absolute; inset: 0; }
.hero-backdrop { z-index: -1; pointer-events: none; }
.hero-backdrop video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-backdrop::after { content: ''; background: linear-gradient(90deg, color-mix(in oklab, var(--color-field) 96%, transparent), color-mix(in oklab, var(--color-field) 82%, transparent) 42%, color-mix(in oklab, var(--color-field) 24%, transparent) 80%), linear-gradient(0deg, color-mix(in oklab, var(--color-field) 85%, transparent), transparent 45%); }
.sun-hero .hero-layout { position: relative; min-height: min(720px, calc(100svh - 120px)); display: flex; flex-direction: column; justify-content: center; align-items: start; padding-block: var(--space-lg) var(--space-4xl); }
.sun-intro { min-width: 0; width: 57%; }
.sun-intro h1 { font-size: clamp(2.6rem, 4.6vw, 4.4rem); max-width: 18ch; line-height: 1.06; }
.sun-intro p { color: var(--color-field-muted); font-size: var(--text-lead); line-height: 1.6; max-width: 45ch; margin-top: var(--space-lg); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-xl); }
.hero-actions .quiet:hover { background: var(--color-field-ink); color: var(--color-field); }
.hero-film-tools { position: absolute; bottom: var(--space-lg); left: var(--gutter); right: var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.hero-film-tools p { font-size: var(--text-sm); color: var(--color-field-ink); }
.hero-film-tools .video-toggle { background: var(--color-field); }
.hero-film { min-width: 0; margin: 0; }
.film-frame { position: relative; aspect-ratio: 16 / 9; background: var(--color-ink); border-radius: var(--radius-card); overflow: clip; }
.film-frame video { width: 100%; height: 100%; object-fit: contain; }
.film-tools { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); }
.film-tools p { font-size: var(--text-sm); color: var(--color-field-muted); }
.video-toggle { min-height: 44px; padding-inline: var(--space-md); border-color: var(--color-field-rule); color: var(--color-field-ink); background: transparent; font-size: var(--text-sm); font-weight: 600; }
.video-toggle:hover { background: var(--color-ink-2); }
html:not(.js) .video-toggle { display: none; }
.sun-footer { background: var(--color-field); color: var(--color-field-ink); padding-top: var(--space-2xl); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); padding-bottom: var(--space-2xl); }
.footer-grid h2 { font-family: var(--font-body); font-size: var(--text-md); font-weight: 700; line-height: 1.5; letter-spacing: normal; margin-bottom: var(--space-md); }
.footer-grid a { display: block; font-size: var(--text-sm); margin-block: var(--space-sm); }
.footer-identity > a { display: inline-block; margin: 0; }
.footer-identity img { width: 136px; height: 112px; object-fit: contain; border-radius: var(--radius-control); }
.footer-identity p { font-size: var(--text-sm); color: var(--color-field-muted); margin-top: var(--space-sm); max-width: 50ch; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--color-field-rule); font-size: var(--text-xs); }
.footer-bottom > div { display: flex; gap: var(--space-lg); }
.page-loading { padding: var(--space-2xl); }
.section { padding-block: var(--section-gap-s); }
.section-compact { padding-block: var(--space-2xl); }
.section-heading { margin-bottom: var(--space-xl); }
.section-heading .lead { margin-top: var(--space-lg); color: var(--color-muted); }
.with-link { display: flex; justify-content: space-between; align-items: end; gap: var(--space-xl); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-accent); font-weight: 700; min-height: 44px; text-decoration: underline; text-underline-offset: 0.2em; }
.text-link:hover { color: var(--color-accent-hover); text-decoration-thickness: 2px; }
.text-link span { flex-shrink: 0; }
.service-list article { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: start; gap: var(--space-lg); padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.service-list article:last-child { border-bottom: 1px solid var(--color-rule); }
.service-list h3 { font-size: var(--text-2xl); }
.service-list p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 60ch; }
.service-number { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); }
.fleet-section, .tours-section { background: var(--color-paper-2); }
.fleet-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.fleet-card { min-width: 0; background: var(--color-paper); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: clip; }
.fleet-card > img { aspect-ratio: 4 / 3; width: 100%; height: auto; object-fit: cover; }
.fleet-card-body { padding: var(--space-lg); }
.fleet-card h3 { font-size: var(--text-xl); line-height: 1.25; }
.fleet-card .text-link { margin-top: var(--space-md); font-size: var(--text-sm); white-space: normal; }
.reference-note, .caption { font-size: var(--text-sm); line-height: 1.65; color: var(--color-muted); }
.reference-note { margin-top: var(--space-sm); }
.reference-note a { text-decoration: underline; }
.split-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-2xl); align-items: center; }
.split-layout .lead { margin-top: var(--space-lg); color: var(--color-muted); }
.split-layout .text-link { margin-top: var(--space-lg); }
.split-layout figure { min-width: 0; margin: 0; }
.interior-section .film-tools p { color: var(--color-muted); }
.interior-section .video-toggle { color: var(--color-ink); border-color: var(--color-rule); }
.interior-section .video-toggle:hover { background: var(--color-paper-3); }
.route-list { border-top: 1px solid var(--color-rule); }
.route-row { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.route-days { color: var(--color-accent); font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1; }
.route-days span { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-family: var(--font-body); font-size: var(--text-sm); }
.route-row h3 { font-size: var(--text-xl); }
.route-row p { margin-top: var(--space-sm); color: var(--color-muted); max-width: 65ch; }
.route-row > .text-link { font-size: var(--text-sm); }
.ticket-panel { padding-block: var(--section-gap-s); background: var(--color-field); color: var(--color-field-ink); }
.ticket-panel :focus-visible { outline-color: var(--color-focus-on-dark); }
.ticket-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-3xl); align-items: center; }
.ticket-panel .lead { margin-top: var(--space-lg); color: var(--color-field-muted); }
.ticket-panel .btn { margin-top: var(--space-xl); gap: var(--space-md); }
.ticket-panel .caption { color: var(--color-field-muted); margin-top: var(--space-md); max-width: 60ch; }
.ticket-destinations { padding-left: var(--space-xl); border-left: 1px solid var(--color-field-rule); }
.ticket-destinations p { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.5; }
.ticket-destinations span { display: block; margin-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-field-muted); }
.photo-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--space-lg); }
.photo-wall figure { min-width: 0; margin: 0; }
.photo-wall a { display: block; border-radius: var(--radius-card); }
.photo-wall img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-card); background: var(--color-paper-3); }
.photo-wall figcaption { font-size: var(--text-sm); color: var(--color-muted); margin-top: var(--space-sm); }
.quote-close { background: var(--color-paper-3); padding-block: var(--space-2xl); }
.close-layout { display: flex; justify-content: space-between; align-items: center; gap: var(--space-xl); }
.close-layout h2 { font-size: var(--text-3xl); }
.close-layout p { margin-top: var(--space-md); color: var(--color-muted); max-width: 60ch; }
.page-head { padding-block: var(--space-2xl); background: var(--color-paper-2); }
.page-head h1 { font-size: var(--text-display-s); max-width: 26ch; }
.page-head .lead { margin-top: var(--space-lg); color: var(--color-muted); max-width: 65ch; }
.tour-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--space-lg); }
.tour-filters label { min-width: 0; font-size: var(--text-sm); font-weight: 700; }
.tour-filters input, .tour-filters select { display: block; margin-top: var(--space-xs); width: 100%; min-height: 48px; padding: var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); }
.tour-filters input:hover, .tour-filters select:hover { border-color: var(--color-muted); }
.result-count { margin-block: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.route-note { margin-top: var(--space-xl); max-width: 70ch; }
.empty-results { padding-block: var(--space-2xl); }
.empty-results p { margin-top: var(--space-md); }
.itinerary-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: var(--space-2xl); align-items: start; }
.route-summary { color: var(--color-muted); margin-bottom: var(--space-xl); }
.day-list { margin: 0; padding: 0; list-style: none; }
.day-list > li { padding-block: var(--space-lg); border-top: 1px solid var(--color-rule); }
.day-list h2 { font-size: var(--text-2xl); }
.stop-list { margin: var(--space-lg) 0 0; padding-left: var(--space-lg); }
.stop-list li { padding: var(--space-xs) 0 var(--space-xs) var(--space-xs); }
.stop-list li::marker { color: var(--color-accent); }
.trip-enquiry { position: sticky; top: var(--space-4xl); padding: var(--space-lg); background: var(--color-paper-2); border-radius: var(--radius-card); border: 1px solid var(--color-rule); }
.trip-enquiry h2 { font-size: var(--text-2xl); }
.trip-enquiry p { margin-top: var(--space-md); }
.trip-enquiry .btn { white-space: normal; text-align: center; margin-top: var(--space-lg); width: 100%; }
.trip-enquiry .text-link { margin-top: var(--space-md); }
.contact-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }
.contact-details h2, #faq h2 { font-size: var(--text-3xl); margin-bottom: var(--space-lg); }
.contact-email { display: inline-block; font-size: var(--text-xl); color: var(--color-accent); margin-bottom: var(--space-lg); overflow-wrap: anywhere; }
.contact-details p { margin-bottom: var(--space-md); }
.contact-details strong { display: inline-block; min-width: 60px; }
.contact-details p a { display: inline-flex; align-items: center; min-height: 44px; }
.contact-details .btn { margin-top: var(--space-lg); }
#faq details { border-top: 1px solid var(--color-rule); padding-block: var(--space-lg); }
#faq details:last-child { border-bottom: 1px solid var(--color-rule); }
#faq summary { cursor: pointer; font-weight: 700; min-height: 32px; }
#faq details p { margin-top: var(--space-md); color: var(--color-muted); }
.legal-copy { max-width: 850px; }
.legal-copy section { margin-bottom: var(--space-xl); }
.legal-copy h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.legal-copy p { max-width: 70ch; }
@media (min-width: 120rem) { :root { --container: 1520px; } }
@media (max-width: 74rem) { .navigation { gap: var(--space-md); } .navigation nav { gap: var(--space-md); } .nav-quote { padding-inline: var(--space-sm); } }
@media (max-width: 64rem) {
  .contact-strip span { display: none; }
  .contact-strip .container { justify-content: center; }
  .navigation { flex-wrap: wrap; min-height: 80px; }
  .sun-logo img { width: 100px; height: 70px; }
  .nav-actions { margin-left: auto; }
  .navigation nav { order: 3; width: 100%; flex-wrap: wrap; padding-bottom: var(--space-md); margin-left: 0; }
  .js .navigation nav { display: none; }
  .js .navigation nav.is-open { display: flex; }
  .menu-button { display: inline-flex; }
  .sun-hero .hero-layout { gap: var(--space-xl); }
  .sun-intro h1 { font-size: clamp(2.5rem, 5vw, 3.7rem); }
  .footer-grid { gap: var(--space-xl); }
  .fleet-grid, .photo-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-layout, .ticket-layout, .contact-layout { gap: var(--space-xl); }
  .ticket-destinations p { font-size: var(--text-2xl); }
}
@media (max-width: 48rem) {
  .sun-hero .hero-layout { min-height: min(680px, calc(100svh - 112px)); padding-block: var(--space-xl) var(--space-3xl); }
  .sun-intro { width: 100%; }
  .hero-backdrop::after { background: linear-gradient(90deg, color-mix(in oklab, var(--color-field) 92%, transparent), color-mix(in oklab, var(--color-field) 75%, transparent)), linear-gradient(0deg, var(--color-field), transparent 60%); }
  .hero-backdrop video { object-position: 60% center; }
  .hero-film-tools { align-items: end; gap: var(--space-sm); }
  .hero-film-tools p { max-width: 28ch; font-size: var(--text-xs); }
  .sun-intro h1 { font-size: clamp(2.4rem, 8vw, 3.5rem); max-width: 19ch; }
  .sun-intro p { font-size: var(--text-md); max-width: 45ch; margin-top: var(--space-md); }
  .hero-actions { margin-top: var(--space-lg); }
  .hero-actions .btn { padding-inline: var(--space-md); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-identity { grid-column: 1 / -1; }
  .with-link, .close-layout { align-items: start; flex-direction: column; gap: var(--space-lg); }
  .service-list article { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-md); }
  .service-list .text-link { grid-column: 2; }
  .service-list h3 { font-size: var(--text-xl); }
  .split-layout, .ticket-layout, .itinerary-layout, .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .ticket-destinations { display: none; }
  .route-row { grid-template-columns: 44px minmax(0, 1fr); gap: var(--space-md); }
  .route-row > .text-link { grid-column: 2; }
  .tour-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .tour-filters label:first-child { grid-column: 1 / -1; }
  .trip-enquiry { position: static; }
  .contact-layout { gap: var(--space-2xl); }
}
@media (max-width: 40rem) { .fleet-grid, .photo-wall { grid-template-columns: minmax(0, 1fr); } .section-compact, .page-head { padding-block: var(--space-xl); } .page-head h1 { font-size: clamp(2.2rem, 7vw, 3rem); } }
@media (max-width: 23rem) { .navigation { gap: var(--space-xs); } .sun-logo img { width: 82px; } .nav-quote { font-size: var(--text-xs); } .language-button { min-width: 44px; padding-inline: var(--space-xs); } .nav-actions { gap: var(--space-2xs); } .footer-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn, .language-button, .menu-button, .video-toggle { transition: none; } }