/* Page sections */

/* ---------- Hero (home) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; color: #fff; overflow: hidden; background: var(--ink); }
.hero-media { position: absolute; inset: 0; transform-origin: 50% 60%; }
.hero-media picture, .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media img.kb { animation: kenburns 28s var(--ease) both; }
@keyframes kenburns { from { transform: scale(1.08) translate3d(0, 1.5%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 22, 26, .55) 0%, rgba(5, 22, 26, 0) 26%, rgba(5, 22, 26, 0) 40%, rgba(5, 22, 26, .78) 100%),
    linear-gradient(90deg, rgba(5, 22, 26, .5) 0%, rgba(5, 22, 26, 0) 60%); }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(120% 70% at 50% var(--sun-y), var(--sun) 0%, transparent 60%); opacity: .55; transition: opacity 1.2s var(--ease); }
.hero-content { position: relative; z-index: 2; height: 100%; display: grid; grid-template-rows: 1fr auto; padding-top: var(--header-h); }
.hero-title { align-self: end; padding-bottom: clamp(24px, 4vw, 56px); }
.hero-title .eyebrow { color: rgba(255, 255, 255, .86); margin-bottom: 20px; }
.hero h1 { font-size: var(--t-3xl); max-width: 11ch; line-height: .94; }
.hero h1 em { color: #fff; }
.hero .hero-sub { margin-top: 24px; max-width: 40ch; font-size: var(--t-lg); color: rgba(255, 255, 255, .92); }
.hero .hero-actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero-bar { border-top: 1px solid rgba(255, 255, 255, .28); padding: 16px 0 88px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); font: var(--t-xs)/1.5 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-bar span { color: rgba(255, 255, 255, .72); display: block; }
.hero-bar .clock { color: #fff; }
@media (max-width: 720px) {
  .hero-bar { grid-template-columns: 1fr 1fr; row-gap: 12px; }
  .hero-bar > :nth-child(n+3) { display: none; }
}

/* ---------- Manifesto (slow tide) ---------- */
.manifesto { padding-block: var(--space-6) var(--space-5); }
.manifesto .grid { align-items: start; row-gap: 32px; }
.manifesto .eyebrow { grid-column: 1 / span 3; padding-top: 14px; }
.manifesto .big { grid-column: 4 / span 9; font: 300 var(--t-2xl)/1.08 var(--f-display); letter-spacing: -.02em;
  font-variation-settings: "opsz" 144, "SOFT" 100; text-wrap: balance; }
.manifesto .big .w { display: inline-block; opacity: .16; transition: opacity .6s var(--ease); }
.manifesto .big .w.on { opacity: 1; }
.no-js .manifesto .big .w, .manifesto .big.static .w { opacity: 1; }
.manifesto .aside { grid-column: 4 / span 4; color: var(--ink-2); }
.manifesto .turtle { grid-column: 10 / span 3; justify-self: end; width: 96px; color: var(--sea); }
@media (max-width: 900px) {
  .manifesto .eyebrow, .manifesto .big, .manifesto .aside { grid-column: 1 / -1; }
  .manifesto .turtle { grid-column: 1 / -1; justify-self: start; width: 64px; }
}

/* ---------- The day (pinned, horizontal on desktop) ---------- */
.day { position: relative; background: var(--paper); overflow: hidden; }
.day-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-top: var(--space-5); }
.day-head h2 { font-size: var(--t-2xl); max-width: 14ch; }
.day-dial { display: flex; align-items: center; gap: 16px; font: var(--t-xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.day-dial svg { width: 132px; height: 70px; overflow: visible; }
.day-dial .arc { fill: none; stroke: var(--line-strong); stroke-dasharray: 2 4; }
.day-dial .ground { stroke: var(--ink); }
.day-dial .sun-dot { fill: var(--accent); transition: fill 1.2s var(--ease); }
.day-dial output { font-size: 1.5rem; letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.day-track { display: flex; gap: var(--col-gap); padding: var(--space-4) var(--gutter) var(--space-5); width: max-content; }
.moment { width: min(72vw, 980px); flex: none; display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--col-gap); align-items: end; }
.moment .frame { aspect-ratio: 4 / 5; }
.moment:nth-child(odd) .frame { aspect-ratio: 5 / 6; }
.moment .time { font: 300 clamp(3.5rem, 8vw, 7.5rem)/.9 var(--f-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--accent); transition: color 1.2s var(--ease); }
.moment h3 { font-size: var(--t-xl); margin: 18px 0 14px; }
.moment p { color: var(--ink-2); }
.moment .link { margin-top: 16px; }
@media (max-width: 900px) {
  .day-track { width: auto; flex-direction: column; gap: var(--space-5); }
  .moment { width: 100%; grid-template-columns: 1fr; }
  .moment .frame, .moment:nth-child(odd) .frame { aspect-ratio: 4 / 5; }
}

/* ---------- Cocada (signature drink) ---------- */
.signature { background: var(--ink); color: #fff; overflow: hidden; }
.signature .grid { align-items: center; row-gap: 40px; }
.signature .frame { grid-column: 1 / span 6; aspect-ratio: 4 / 5; }
.signature .copy { grid-column: 8 / span 5; }
.signature .eyebrow { color: #9fd3d6; }
.signature h2 { font-size: var(--t-3xl); margin: 20px 0 24px; }
.signature h2 em { color: var(--brand); }
.signature p { color: #cfdcdb; }
.signature .btn { margin-top: 32px; }
.signature .ring { position: absolute; left: -14vw; bottom: -18vw; width: 46vw; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
@media (max-width: 900px) { .signature .frame, .signature .copy { grid-column: 1 / -1; } }

/* ---------- Split editorial blocks ---------- */
.split .grid { align-items: center; row-gap: 40px; }
.split .frame { grid-column: 2 / span 5; aspect-ratio: 4 / 5; max-width: 720px; }
.split .frame.is-wide { grid-column: 1 / span 6; aspect-ratio: 9 / 5; }
.split .copy { grid-column: 8 / span 4; }
.split.flip .frame { grid-column: 7 / span 5; grid-row: 1; }
.split.flip .frame.is-wide { grid-column: 7 / span 6; }
.split.flip .copy { grid-column: 2 / span 4; grid-row: 1; }
.split h2 { font-size: var(--t-2xl); margin: 18px 0 22px; }
.split p + p { margin-top: 14px; }
.split .link, .split .btn { margin-top: 24px; }
@media (max-width: 900px) {
  .split .frame, .split .copy, .split.flip .frame, .split.flip .copy, .split .frame.is-wide, .split.flip .frame.is-wide { grid-column: 1 / -1; grid-row: auto; }
}

/* ---------- Access types ---------- */
.access .head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: var(--space-4); }
.access h2 { font-size: var(--t-2xl); max-width: 16ch; }
.access-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.access-card { border-top: 1px solid var(--ink); padding-top: 20px; display: grid; gap: 12px; align-content: start; }
.access-card .n { font: var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; color: var(--ink-3); }
.access-card h3 { font-size: var(--t-xl); }
.access-card p { color: var(--ink-2); font-size: var(--t-sm); }
.access-card .price { font: var(--t-sm)/1.3 var(--f-mono); color: var(--coral); }
@media (max-width: 900px) { .access-list { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Strip of photos ---------- */
.strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: end; }
.strip .frame:nth-child(1) { grid-column: 1 / span 4; aspect-ratio: 3 / 4; }
.strip .frame:nth-child(2) { grid-column: 5 / span 5; aspect-ratio: 4 / 3; }
.strip .frame:nth-child(3) { grid-column: 10 / span 3; aspect-ratio: 3 / 5; }
@media (max-width: 720px) {
  .strip .frame:nth-child(1) { grid-column: 1 / span 7; }
  .strip .frame:nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .strip .frame:nth-child(3) { grid-column: 8 / span 5; }
}

/* ---------- Visit band ---------- */
.visit { border-top: 1px solid var(--line); }
.visit .grid { row-gap: 32px; }
.visit h2 { grid-column: 1 / span 5; font-size: var(--t-2xl); }
.visit dl { grid-column: 7 / span 6; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px var(--col-gap); }
.visit dt { font: var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.visit dd { font-size: var(--t-md); }
.visit dd a { display: inline-flex; min-height: 44px; align-items: center; }
.visit .clock { font-size: var(--t-sm); }
@media (max-width: 900px) { .visit h2, .visit dl { grid-column: 1 / -1; } }
@media (max-width: 480px) { .visit dl { grid-template-columns: 1fr; } }

/* ---------- Inner page heads: editorial split, photo bleeds to the right edge ---------- */
.page-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(44vw, 720px);
  min-height: 92vh; min-height: 92svh; background: var(--light); color: var(--ink); transition: background-color 1.2s var(--ease); }
.page-head .wrap { margin: 0; max-width: none; align-self: end; padding-top: calc(var(--header-h) + 48px); padding-bottom: var(--space-5);
  padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); }
.page-head .eyebrow { color: var(--ink-2); }
.page-head h1 { font-size: var(--t-3xl); margin-top: 18px; max-width: 11ch; }
.page-head p:not(.eyebrow) { margin-top: 24px; font-size: var(--t-lg); max-width: 40ch; color: var(--ink-2); }
.page-head .bg { position: relative; overflow: hidden; background: var(--paper-3); }
.page-head .bg picture { position: absolute; inset: -7% 0; }
.page-head .bg img { width: 100%; height: 100%; object-fit: cover; }
.page-head .bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: linear-gradient(180deg, var(--sun), transparent 55%); opacity: .4; }
.page-head .stamp { position: absolute; z-index: 1; left: 16px; bottom: 14px; color: #fff; font: var(--t-xs)/1.4 var(--f-mono);
  letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.page-head--plain { grid-template-columns: 1fr; min-height: 0; }
.page-head--plain .wrap { padding-bottom: var(--space-4); }
.page-head--plain h1 { max-width: 16ch; }
@media (max-width: 900px) {
  .page-head { grid-template-columns: 1fr; min-height: 0; }
  .page-head .bg { order: 2; aspect-ratio: 4 / 5; max-height: 80svh; }
  .page-head .wrap { padding-bottom: var(--space-4); }
}

/* ---------- Generic prose ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: var(--t-xl); margin: 48px 0 16px; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 14px; }
.prose ul { padding-left: 1.1em; display: grid; gap: 8px; }

/* ---------- Facts list ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap); border-top: 1px solid var(--line); }
.facts > div { padding-top: 20px; }
.facts dt { font: var(--t-xs)/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin-top: 10px; font: 300 var(--t-lg)/1.3 var(--f-display); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; row-gap: 28px; } }

/* ---------- Eco / turtle ---------- */
.eco { background: var(--paper-2); }
.eco .grid { row-gap: 40px; align-items: center; }
.eco .copy { grid-column: 1 / span 5; }
.eco h2 { font-size: var(--t-2xl); margin: 18px 0 22px; }
.eco .figure { grid-column: 7 / span 6; position: relative; }
.eco .turtle-big { width: min(100%, 520px); color: var(--sea); margin-inline: auto; }
.eco .turtle-big .shell path { transition: fill .6s var(--ease); }
.eco .tracks { position: absolute; inset: auto 0 0; height: 40px; color: var(--sand); }
.eco ul { margin-top: 24px; display: grid; gap: 0; }
.eco li { padding: 14px 0; border-top: 1px solid var(--line); color: var(--ink-2); display: flex; gap: 14px; }
.eco li span { font: var(--t-xs)/1.9 var(--f-mono); color: var(--ink-3); }
@media (max-width: 900px) { .eco .copy, .eco .figure { grid-column: 1 / -1; } }

/* ---------- Spaces grid ---------- */
.spaces { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--col-gap); }
.space { grid-column: 2 / span 4; }
.space:nth-child(even) { grid-column: 8 / span 4; margin-top: 16vh; }
.space .frame { aspect-ratio: 4 / 5; }
.space h3 { font-size: var(--t-xl); margin: 18px 0 8px; }
.space p { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 900px) { .space, .space:nth-child(even) { grid-column: 1 / -1; margin-top: 0; } }

/* ---------- Cocktail menu ---------- */
.bar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--col-gap); align-items: start; }
.bar-glass { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + 24px); }
.bar-glass .stage { position: relative; aspect-ratio: 4 / 5; background: var(--ink); overflow: hidden; display: grid; place-items: center; }
.bar-glass .stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 70%, var(--glass-glow, rgba(242, 194, 48, .3)), transparent 70%); transition: background 1s var(--ease); }
.bar-glass svg { position: relative; width: 62%; height: auto; }
.bar-glass .liquid { fill: var(--glass-fill, #f3e7cf); transition: fill 1s var(--ease), transform 1s var(--ease); transform-origin: 50% 100%; }
.bar-glass .glass-line { fill: none; stroke: rgba(255, 255, 255, .8); stroke-width: 1.2; }
.bar-glass .garnish { fill: var(--glass-garnish, #3c8a3f); transition: fill 1s var(--ease); }
.bar-glass .stage-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: flex; justify-content: space-between;
  font: var(--t-xs)/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #cfdcdb; }
.bar-list { grid-column: 7 / span 6; }
.drink { border-top: 1px solid var(--line); }
.drink:last-child { border-bottom: 1px solid var(--line); }
.drink button { width: 100%; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: baseline; text-align: left;
  min-height: 64px; padding: 20px 0; background: none; border: 0; }
.drink .n { font: var(--t-xs)/1 var(--f-mono); color: var(--ink-3); }
.drink .name { font: 300 var(--t-xl)/1.05 var(--f-display); transition: transform .6s var(--ease), color .6s var(--ease); }
.drink .tag { font: var(--t-xs)/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.drink button:hover .name, .drink button[aria-expanded="true"] .name { transform: translateX(8px); color: var(--accent); }
.drink .detail { padding: 0 0 24px 64px; color: var(--ink-2); display: grid; gap: 10px; font-size: var(--t-sm); }
.drink .detail[hidden] { display: none; }
.drink .detail dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; }
.drink .detail dt { font: var(--t-xs)/1.8 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 900px) {
  .bar-glass { grid-column: 1 / -1; position: relative; top: 0; }
  .bar-glass .stage { aspect-ratio: 5 / 4; }
  .bar-glass svg { width: 40%; }
  .bar-list { grid-column: 1 / -1; }
  .drink .detail { padding-left: 0; }
}

/* ---------- Menu highlights (food) ---------- */
.dishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.dish .frame { aspect-ratio: 4 / 5; }
.dish h3 { font-size: var(--t-lg); margin-top: 14px; }
.dish p { font-size: var(--t-sm); color: var(--ink-2); margin-top: 6px; }
@media (max-width: 900px) { .dishes { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .dishes { grid-template-columns: 1fr; } }

/* ---------- Booking preview ---------- */
.booking { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--col-gap); align-items: start; }
.booking .steps { grid-column: 1 / span 7; display: grid; gap: var(--space-4); }
.booking fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.booking legend { font: 300 var(--t-xl)/1.1 var(--f-display); margin-bottom: 18px; display: flex; gap: 14px; align-items: baseline; padding: 0; }
.booking legend span { font: var(--t-xs)/1 var(--f-mono); color: var(--ink-3); }
.booking label.field { display: grid; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.booking input[type="date"], .form input, .form textarea, .form select {
  min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: #fff; font-size: 1rem; width: 100%; }
.booking input:focus-visible, .form input:focus-visible, .form textarea:focus-visible { border-color: var(--accent); }
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.option { position: relative; }
.option input { position: absolute; opacity: 0; inset: 0; }
.option label { display: grid; gap: 8px; min-height: 100%; padding: 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer;
  transition: border-color .4s var(--ease), background-color .4s var(--ease); }
.option label strong { font: 400 var(--t-lg)/1.1 var(--f-display); }
.option label span { font-size: var(--t-sm); color: var(--ink-2); }
.option label em { font: normal var(--t-xs)/1.3 var(--f-mono); color: var(--coral); }
.option input:checked + label { border-color: var(--ink); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--ink); }
.option input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.counters { display: grid; gap: 12px; }
.counter { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.counter .ctrl { display: flex; align-items: center; gap: 6px; }
.counter button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; font-size: 1.2rem; line-height: 1; }
.counter button:hover { border-color: var(--ink); }
.counter input { width: 48px; min-height: 44px; text-align: center; border: 0; background: transparent; font: 400 1.25rem/1 var(--f-display); -moz-appearance: textfield; }
.counter input::-webkit-inner-spin-button { -webkit-appearance: none; }
.booking aside { grid-column: 9 / span 4; position: sticky; top: calc(var(--header-h) + 24px); border: 1px solid var(--ink); padding: 24px; display: grid; gap: 18px; background: #fff; }
.booking aside h2 { font-size: var(--t-xl); }
.booking aside dl { display: grid; gap: 12px; }
.booking aside dl div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.booking aside dt { font: var(--t-xs)/1.8 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.booking aside dd { text-align: right; font-size: var(--t-sm); }
.booking .btn { justify-content: center; }
.booking .result { padding: 14px; background: var(--paper-2); font-size: var(--t-sm); }
@media (max-width: 900px) {
  .booking .steps, .booking aside { grid-column: 1 / -1; position: relative; top: 0; }
  .options { grid-template-columns: 1fr; }
}

/* ---------- Gallery ---------- */
.masonry { columns: 3 320px; column-gap: var(--col-gap); }
.masonry a { display: block; margin-bottom: var(--col-gap); break-inside: avoid; position: relative; overflow: hidden; background: var(--paper-3); }
.masonry img { width: 100%; transition: transform 1.2s var(--ease); }
.masonry a:hover img { transform: scale(1.03); }
.masonry figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font: var(--t-xs)/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55); opacity: 0; transition: opacity .5s var(--ease); }
.masonry a:hover figcaption, .masonry a:focus-visible figcaption { opacity: 1; }
#lightbox { border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; background: rgba(8, 24, 28, .96); color: #fff; }
#lightbox::backdrop { background: rgba(8, 24, 28, .8); }
#lightbox .lb-inner { height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: 16px var(--gutter); gap: 12px; }
#lightbox .lb-top, #lightbox .lb-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: var(--t-xs)/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
#lightbox img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
#lightbox button { min-width: 48px; min-height: 48px; border: 1px solid rgba(255, 255, 255, .4); background: none; color: #fff; border-radius: 999px; padding: 0 16px; }
.lb-open, .lb-open body { overflow: hidden; }

/* ---------- Map + directions ---------- */
.coords { font: 300 clamp(2.4rem, 6vw, 5.5rem)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mapbox { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); border: 1px solid var(--line); overflow: hidden; }
.mapbox svg.chart { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mapbox [data-map-load] { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2; }
.mapbox.is-loaded svg.chart { display: none; }
@media (max-width: 720px) { .mapbox { aspect-ratio: 4 / 5; } }
.routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--col-gap); }
.route { border-top: 1px solid var(--ink); padding-top: 18px; }
.route h3 { font-size: var(--t-lg); margin-bottom: 10px; }
.route p { color: var(--ink-2); font-size: var(--t-sm); }
@media (max-width: 900px) { .routes { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- Contact form ---------- */
.form { display: grid; gap: 18px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form label { display: grid; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.form textarea { min-height: 160px; resize: vertical; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-4) var(--col-gap); }
.contact-grid .direct { grid-column: 1 / span 5; display: grid; gap: 24px; align-content: start; }
.contact-grid .formcol { grid-column: 7 / span 6; display: grid; gap: 18px; }
.contact-grid .big-link { font: 300 var(--t-xl)/1.1 var(--f-display); display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; border-bottom: 1px solid var(--line-strong); padding-bottom: 6px; }
.contact-grid .big-link:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 900px) { .contact-grid .direct, .contact-grid .formcol { grid-column: 1 / -1; } }

/* ---------- 404 ---------- */
.lost { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; text-align: center; padding: var(--header-h) var(--gutter) 96px; position: relative; overflow: hidden; }
.lost h1 { font-size: var(--t-3xl); }
.lost p { margin: 20px auto 32px; color: var(--ink-2); }
.lost .waves { position: absolute; left: 0; right: 0; bottom: 0; height: 30vh; color: var(--sea-2); opacity: .35; }
.lost .waves path { animation: drift 9s linear infinite; }
.lost .waves path:nth-child(2) { animation-duration: 13s; animation-direction: reverse; opacity: .6; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---------- Hero triptych (three hours of the day) ---------- */
.hero-media { display: flex; justify-content: center; gap: 2px; background: var(--ink); }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grade); mix-blend-mode: soft-light; transition: background-color 1.4s var(--ease); }
.panel { position: relative; flex: 1 1 0; min-width: 0; max-width: 720px; overflow: hidden; transition: flex-grow 1.4s var(--ease); }
.panel.is-active { flex-grow: 1.45; }
.panel picture, .panel img, .panel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel video { opacity: 0; transition: opacity 1.2s var(--ease); }
.panel video.is-playing { opacity: 1; }
.panel::after { content: ""; position: absolute; inset: 0; background: rgba(5, 22, 26, .28); transition: background-color 1.4s var(--ease); }
.panel.is-active::after { background: rgba(5, 22, 26, 0); }
.panel .panel-cap { position: absolute; z-index: 2; left: 16px; top: calc(var(--header-h) + 16px);
  font: var(--t-xs)/1.4 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.hero .horizon-line { position: absolute; z-index: 2; left: 0; right: 0; top: 52%; height: 1px; background: rgba(255, 255, 255, .55); transform-origin: 0 50%; pointer-events: none; }
@media (max-width: 720px) {
  .panel { display: none; }
  .panel.is-active { display: block; flex-grow: 1; }
  .panel .panel-cap { display: none; }
}
.eco li { flex-wrap: wrap; row-gap: 2px; }
.eco li .tbc { white-space: normal; }
@media (max-width: 900px) { .eco .turtle-big { width: 56%; } }