/* Polish layer. Hand written because the Tailwind build is not part of every deploy.
   Photo sections, press and focus states, and small typographic fixes. No brand colours change. */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }

::selection { background: rgba(217, 182, 115, .45); color: #0d1d19; }
html { -webkit-text-size-adjust: 100%; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
img { -webkit-user-drag: none; }

/* ---------- photo sections: a full bleed photograph behind real content ---------- */
.photo-sec {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background-color: #0d1d19; background-size: cover; background-position: center; background-repeat: no-repeat;
}
.photo-sec::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--scrim, linear-gradient(180deg, rgba(10,22,18,.6), rgba(10,22,18,.82))); }
.photo-sec::after { content: ""; position: absolute; inset: auto 0 0 0; height: 90px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(10,22,18,.35)); }
.photo-sec--left { --scrim: linear-gradient(90deg, rgba(10,22,18,.92) 0%, rgba(10,22,18,.8) 45%, rgba(10,22,18,.32) 100%); }
.photo-sec--even { --scrim: linear-gradient(180deg, rgba(10,22,18,.58), rgba(10,22,18,.8)); }
.photo-sec--tall { min-height: clamp(420px, 66vh, 680px); display: flex; align-items: center; }
.photo-sec--tall > .shell { width: 100%; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .photo-sec { background-attachment: fixed; } }

/* text colours inside a photo section: always light on the scrim */
.photo-sec .h-section, .photo-sec .h-sub, .photo-sec h2, .photo-sec h3 { color: #fff; }
.photo-sec .lede, .photo-sec .text-ink-soft { color: rgba(255,255,255,.84); }
.photo-sec .text-ink-mute { color: rgba(255,255,255,.7); }
.photo-sec p, .photo-sec li { color: rgba(255,255,255,.88); }
.photo-sec .font-semibold, .photo-sec strong { color: #fff; }
.photo-sec .src, .photo-sec small { color: rgba(255,255,255,.7); }
.photo-sec .eyebrow-free { margin: 0; }
.photo-sec li > span.bg-brass { background: #D9B673; }

/* a section header that sits on a photograph, with the original content below it on paper */
.photo-head { padding-block: clamp(4.5rem, 10vw, 8rem); }

/* ---------- press, hover and focus polish ---------- */
.btn-primary, .btn-outline, .btn-brass, .btn-ghost-lt, a.card, .card { transition: transform 180ms var(--ease-out), box-shadow 220ms var(--ease-out), background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.btn-primary:active, .btn-outline:active, .btn-brass:active, .btn-ghost-lt:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -26px rgba(13,29,25,.45); }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #D9B673; outline-offset: 3px; border-radius: 6px;
}
.photo-sec a:focus-visible, .bg-forest a:focus-visible, .bg-forest-deep a:focus-visible { outline-color: #D9B673; }
img { image-rendering: auto; }
figure { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary, .btn-outline, .btn-brass, .btn-ghost-lt, .card { transition: none; }
  .card:hover { transform: none; }
}

/* legibility over photography */
.photo-sec h1, .photo-sec h2, .photo-sec h3, .photo-sec p, .photo-sec li { text-shadow: 0 1px 22px rgba(5, 12, 10, .5); }
.photo-sec .btn-brass, .photo-sec .btn-ghost-lt { text-shadow: none; }

/* ---------- video player facade: a real frame, a play button and player chrome ---------- */
.vp-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vp-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,12,10,.18) 0%, rgba(5,12,10,.04) 45%, rgba(5,12,10,.72) 100%); }
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; color: #fff; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-track { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.35); }
.vp-knob { position: absolute; left: 0; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: #D9B673; box-shadow: 0 0 0 4px rgba(217,182,115,.28); }
[data-video] [data-video-play] { background: transparent; z-index: 2; }
[data-video] [data-video-play] > span:first-child { transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); box-shadow: 0 10px 34px -8px rgba(0,0,0,.6), 0 0 0 10px rgba(255,255,255,.16); }
@media (hover: hover) and (pointer: fine) { [data-video] [data-video-play]:hover > span:first-child { transform: scale(1.07); } }
[data-video] [data-video-play]:active > span:first-child { transform: scale(.95); }
[data-video] { box-shadow: 0 30px 60px -30px rgba(13,29,25,.55); }

/* a looping video behind a photo section; the photo stays as the poster and fallback */
.photo-sec > .photo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; z-index: -2; pointer-events: none; }