/* Industry Bird: industrybird.ae
   One continuous cinematic flight. A WebGL canvas plays the footage behind the page; content sits on glass.
   Brand colours, type and the cut corner come from the brand guidelines. */

@font-face { font-family: "Chakra Petch"; font-weight: 300; font-display: swap; src: url("fonts/ChakraPetch-Light.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap; src: url("fonts/ChakraPetch-Regular.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("fonts/ChakraPetch-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("fonts/ChakraPetch-Bold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2"); }

:root {
  --deep-green: #0f3d2e;
  --safety-yellow: #f7b500;
  --paper: #f5f3ee;
  --steel: #5b6168;
  --dk-sunken: #0b3024;
  --dk-line: #2e5c4c;
  --dk-muted: #c9d4ce;
  --water-ink: #9fdde4;
  --amber: #ffae2b;
  --glass: rgba(5, 22, 17, .52);
  --glass-line: rgba(245, 243, 238, .16);

  --display: "Chakra Petch", "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", Arial, sans-serif;
  --arabic: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;

  --gutter: 20px;
  --max: 1240px;
}
@media (min-width: 760px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #06201a; color: var(--paper); font: 400 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 700; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--safety-yellow); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--safety-yellow); color: var(--deep-green); padding: 8px 16px; font-weight: 600; z-index: 50; }
.skip:focus { left: 8px; }

/* the film behind everything */
.cinema { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; background: #06201a; }
main, .site-footer { position: relative; z-index: 1; }
.bird-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 15; pointer-events: none; }

/* Buttons: one cut corner that opens up on hover */
.btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 22px;
  font: 600 15px/1.2 var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; border: 0; --cut: 8px;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  transition: clip-path 220ms cubic-bezier(.2,.7,.2,1), background-color 160ms, box-shadow 160ms;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--yellow { background: var(--safety-yellow); color: var(--deep-green); }
.btn--yellow:hover { background: #ffc21a; --cut: 16px; }
.btn--ghost { background: rgba(5,22,17,.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--paper); box-shadow: inset 0 0 0 2px rgba(245,243,238,.45); clip-path: none; }
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--paper); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Glass panels over the footage, with the brand's cut corner */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: inset 0 0 0 1px var(--glass-line); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); }

/* ---------- Header ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: 16px 0; transition: background-color 250ms, padding 250ms; }
.site-header.is-solid { background: rgba(6,28,21,.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); padding: 10px 0; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brandline { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 760px) { .brandline { flex-direction: row; align-items: center; gap: 16px; } }
.logo { display: block; width: 148px; }
@media (min-width: 760px) { .logo { width: 176px; } }
.logo__svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }
.logo__hat { transform-box: fill-box; transform-origin: 18% 92%; transition: transform 320ms cubic-bezier(.3,1.6,.5,1); }
.logo:hover .logo__hat, .logo:focus-visible .logo__hat { transform: rotate(-12deg) translateY(-2px); }
.ergonix { font: 500 10px/1.3 var(--body); letter-spacing: .02em; color: var(--dk-muted); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
@media (min-width: 760px) { .ergonix { font-size: 11px; max-width: 15em; padding-left: 16px; border-left: 1px solid rgba(245,243,238,.3); } }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a:not(.btn) { display: none; font: 500 15px/1 var(--body); text-decoration: none; color: var(--paper); text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.site-nav a:not(.btn):hover { color: var(--safety-yellow); }
@media (min-width: 1180px) { .site-nav a:not(.btn) { display: inline; } }
.site-nav .btn { min-height: 40px; padding: 10px 16px; font-size: 14px; }

/* ---------- Zones ---------- */
.scene { position: relative; min-height: 100svh; padding: 150px 0 140px; }
.flight { position: relative; height: 150vh; }
@media (max-width: 759px) { .flight { height: 120vh; } .scene { padding: 130px 0 110px; } }
.flight__label { opacity: 0; position: sticky; top: calc(50% - 20px); display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  font: 300 clamp(22px, 3vw, 34px)/1.1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--paper); text-shadow: 0 2px 18px rgba(0,0,0,.6); }
.flight__label span { font: 600 11px/1 var(--display); letter-spacing: .3em; color: var(--safety-yellow); }
.scene__head { display: grid; gap: 16px; margin-bottom: 44px; max-width: 640px; }
.scene__head h2 { font-size: clamp(38px, 6vw, 72px); line-height: .98; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0,0,0,.45); }
.scene__head p { font-size: 18px; max-width: 32em; color: var(--paper); text-shadow: 0 1px 12px rgba(0,0,0,.6); }

/* ---------- Scene 1: hero ---------- */
.scene--hero { min-height: 118svh; padding-bottom: 18svh; }
.hero { min-height: calc(100svh - 150px); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 32px; }
.hero__title { font-size: clamp(50px, 9.6vw, 146px); line-height: .86; text-transform: uppercase; max-width: 7.2em; text-shadow: 0 4px 40px rgba(0,0,0,.45); }
/* the second half of the slogan, in the same light cut as the closing title so the two read as one line */
.hero__title-2 { display: block; margin-top: .2em; font-weight: 300; font-size: .58em; line-height: 1; letter-spacing: .01em; }
.hero__foot { display: grid; gap: 22px; margin-top: 28px; }
@media (min-width: 900px) { .hero__foot { grid-template-columns: 7fr 5fr; align-items: end; } }
.hero__intro { max-width: 36em; font-size: 18px; line-height: 1.6; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.tagline-ar { font: 600 22px/1.7 var(--arabic); color: var(--paper); text-align: right; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
@media (min-width: 760px) { .tagline-ar { font-size: 28px; } }

/* ---------- Scene 2: RO vessels ---------- */
.scene__grid { display: grid; gap: 8px; }
@media (min-width: 1000px) { .scene__grid { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } .scene__grid .scene__head { position: sticky; top: 140px; } }
.train { display: grid; padding: 8px 0; }
.vessel { position: relative; border-top: 1px solid rgba(159,221,228,.18); }
.vessel:first-child { border-top: 0; }
.vessel button { position: relative; width: 100%; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px 16px;
  padding: 20px 22px; background: none; border: 0; text-align: left; cursor: pointer; }
@media (min-width: 760px) { .vessel button { grid-template-columns: 64px 1fr auto 24px; padding: 22px 28px; } }
.vessel button:hover { background: rgba(159,221,228,.06); }
.vessel__tag { font: 600 12px/1 var(--display); letter-spacing: .2em; color: var(--water-ink); }
.vessel__title { font: 600 clamp(19px, 2vw, 23px)/1.2 var(--display); }
.vessel__count { display: none; font-size: 13px; color: #b9dfe3; }
@media (min-width: 760px) { .vessel__count { display: block; } }
.vessel__icon { position: relative; width: 18px; height: 18px; justify-self: end; }
.vessel__icon::before, .vessel__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--water-ink); transition: transform 240ms; }
.vessel__icon::after { transform: rotate(90deg); }
.vessel.is-open .vessel__icon::after { transform: rotate(0deg); }
.vessel__panel { padding: 2px 22px 24px; }
@media (min-width: 760px) { .vessel__panel { padding: 2px 28px 28px 108px; } }
.vessel__panel ul { display: grid; gap: 10px 32px; }
@media (min-width: 760px) { .vessel__panel ul { grid-template-columns: 1fr 1fr; } }
.vessel__panel li { position: relative; padding-left: 20px; color: #e6f3f4; }
.vessel__panel li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); background: var(--water-ink); }

/* ---------- Scene 3: stations ---------- */
.stations { display: grid; gap: 14px; }
@media (min-width: 700px) { .stations { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .stations { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
.station { position: relative; display: grid; gap: 8px; align-content: start; text-align: left; cursor: pointer; border: 0; min-height: 168px;
  padding: 24px 24px 22px; background: var(--glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px var(--glass-line); clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
  transition: background-color 220ms, box-shadow 220ms, transform 220ms; }
.station:hover, .station.is-on { background: rgba(48,26,4,.62); box-shadow: inset 0 0 0 1px var(--amber), 0 0 40px rgba(255,140,30,.18); }
.station.is-on { transform: translateY(-4px); }
.station__tag { font: 600 12px/1 var(--display); letter-spacing: .2em; color: var(--amber); }
.station__title { font: 600 23px/1.2 var(--display); }
.station__desc { color: var(--dk-muted); }
.station__status { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font: 600 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--amber); visibility: hidden; }
.station__status::before { content: ""; width: 8px; height: 8px; background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.station.is-on .station__status { visibility: visible; }

/* ---------- Trades: pick a trade, the scene switches photo ---------- */
.trades { display: grid; gap: 18px; }
@media (min-width: 1000px) { .trades { grid-template-columns: 5fr 7fr; gap: 40px; align-items: start; } }
.trades__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 1000px) { .trades__tabs { grid-template-columns: 1fr; gap: 10px; } }
.trade-tab { position: relative; display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 14px 16px; border: 0; text-align: left; cursor: pointer;
  color: var(--paper); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--glass-line);
  font: 600 15px/1.2 var(--display); transition: background 240ms, box-shadow 240ms, transform 240ms; }
@media (min-width: 760px) { .trade-tab { font-size: 18px; padding: 18px 22px; } }
.trade-tab__num { font: 600 11px/1 var(--display); letter-spacing: .2em; color: var(--safety-yellow); }
.trade-tab:hover { background: rgba(5,22,17,.68); }
.trade-tab.is-on { background: rgba(5,22,17,.78); box-shadow: inset 4px 0 0 var(--safety-yellow), inset 0 0 0 1px rgba(247,181,0,.45); }
@media (min-width: 1000px) { .trade-tab.is-on { transform: translateX(8px); } }
.trades__panel { padding: 28px 26px 30px; min-height: 260px; }
@media (min-width: 760px) { .trades__panel { padding: 36px 36px 38px; } }
.trade-panel h3 { font-size: clamp(26px, 2.8vw, 36px); line-height: 1.05; text-transform: uppercase; }
.trade-panel p { margin-top: 14px; font-size: 17px; color: var(--paper); }
.trade-panel ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.trade-panel li { position: relative; padding-left: 20px; color: var(--dk-muted); }
.trade-panel li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--safety-yellow); }

/* ---------- Our work: concept website cards ---------- */
.work { display: grid; gap: 18px; }
@media (min-width: 760px) { .work { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.work-card { display: grid; text-decoration: none; color: var(--paper); transition: transform 300ms cubic-bezier(.2,.7,.2,1), box-shadow 300ms; }
.work-card:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1px rgba(247,181,0,.5), 0 24px 40px rgba(0,0,0,.35); }
.work-card__frame { display: block; margin: 12px 12px 0; overflow: hidden; background: #0b0d0e; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.work-card__bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #1b1e20; font: 500 11px/1 var(--body); color: rgba(245,243,238,.55); }
.work-card__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(245,243,238,.25); }
.work-card__bar span { margin-left: 8px; }
.work-card__frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform 900ms cubic-bezier(.2,.7,.2,1); }
.work-card:hover .work-card__frame img { transform: scale(1.03); }
.work-card__meta { display: grid; gap: 6px; padding: 18px 20px 22px; }
.work-card__tag { justify-self: start; font: 600 10px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--deep-green); background: var(--safety-yellow); padding: 5px 8px; }
.work-card__name { margin-top: 6px; font: 700 22px/1.15 var(--display); text-transform: uppercase; }
.work-card__ind { font: 600 12px/1.3 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.work-card__desc { color: var(--dk-muted); font-size: 15px; }
.work-card__cta { margin-top: 8px; font: 600 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--safety-yellow); }
.work-card__cta::after { content: " →"; }

/* ---------- Scene 4: the container yard ---------- */
.yard { display: grid; gap: 28px; }
@media (min-width: 1000px) { .yard { grid-template-columns: 7fr 5fr; gap: 40px; align-items: end; } }
.yard__stack { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 8px; padding: 30px 0 22px; }
@media (min-width: 700px) { .yard__stack { grid-template-columns: repeat(4, 1fr); gap: 38px 8px; } }
.yard__stack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; opacity: .9;
  background: repeating-linear-gradient(-45deg, var(--safety-yellow) 0 10px, #1d1f1c 10px 20px); }
.box { --c: #8a3b24; position: relative; display: grid; align-content: space-between; gap: 6px; aspect-ratio: 2.3 / 1; min-height: 78px;
  padding: 10px 12px 11px; border: 0; text-align: left; cursor: pointer; color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.28)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 2px, rgba(0,0,0,.18) 2px 4px, transparent 4px 9px),
    var(--c);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 3px 0 rgba(255,255,255,.14), 0 6px 14px rgba(0,0,0,.35);
  transition: transform 460ms cubic-bezier(.2,.8,.2,1), box-shadow 460ms; }
/* corner castings */
.box::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(#1a1b1a, #1a1b1a) left top / 9px 7px no-repeat, linear-gradient(#1a1b1a, #1a1b1a) right top / 9px 7px no-repeat,
    linear-gradient(#1a1b1a, #1a1b1a) left bottom / 9px 7px no-repeat, linear-gradient(#1a1b1a, #1a1b1a) right bottom / 9px 7px no-repeat; }
/* the spreader and its cables, lowered onto the picked container */
.box::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 100%; height: 30px; pointer-events: none;
  background:
    linear-gradient(var(--safety-yellow), var(--safety-yellow)) center bottom / 100% 6px no-repeat,
    linear-gradient(#d5dadd, #d5dadd) 22% top / 2px calc(100% - 6px) no-repeat,
    linear-gradient(#d5dadd, #d5dadd) 78% top / 2px calc(100% - 6px) no-repeat;
  opacity: 0; transform: translateY(-14px); transition: opacity 260ms, transform 460ms cubic-bezier(.2,.8,.2,1); }
.box.is-up { transform: translateY(-14px); z-index: 2;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 3px 0 var(--safety-yellow), 0 22px 26px rgba(0,0,0,.5); }
.box.is-up::before { opacity: 1; transform: none; }
.box__code { font: 600 10px/1 var(--display); letter-spacing: .18em; color: rgba(245,243,238,.78); }
.box__title { font: 600 clamp(13px, 1.25vw, 16px)/1.15 var(--display); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.box--rust { --c: #8a3b24; } .box--steel { --c: #2f5872; } .box--ochre { --c: #9a6516; } .box--green { --c: #2d5a3f; }
.box--teal { --c: #1d6b66; } .box--grey { --c: #545b62; } .box--sand { --c: #86703f; } .box--maroon { --c: #6b2a2c; }
.box--navy { --c: #24406a; } .box--olive { --c: #586131; } .box--slate { --c: #36444f; } .box--plum { --c: #4f3552; }
.yard__manifest { padding: 28px 26px 30px; min-height: 280px; }
@media (min-width: 760px) { .yard__manifest { padding: 34px 34px 36px; } }
.sheet__code { font: 600 12px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--safety-yellow); }
.sheet h3 { margin-top: 14px; font-size: clamp(25px, 2.6vw, 34px); line-height: 1.05; text-transform: uppercase; }
.sheet p { margin-top: 12px; color: var(--dk-muted); }
.sheet__label { display: block; margin-top: 22px; font: 600 11px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: rgba(245,243,238,.7); }
.sheet ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.sheet li { position: relative; padding-left: 20px; }
.sheet li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--safety-yellow); }

/* ---------- Scene 5: steps ---------- */
.steps { display: grid; gap: 14px; }
@media (min-width: 640px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
.steps li { position: relative; padding: 26px 24px 28px; }
.steps li::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--safety-yellow); transition: width 900ms cubic-bezier(.2,.7,.2,1); box-shadow: 0 0 14px rgba(247,181,0,.6); }
.steps li.is-on::before { width: 100%; }
.steps .num { display: block; font: 300 60px/1 var(--display); color: rgba(245,243,238,.35); transition: color 500ms; }
.steps li.is-on .num { color: var(--safety-yellow); }
.steps h3 { margin-top: 16px; font-size: 22px; font-weight: 600; line-height: 1.25; }
.steps p { margin-top: 8px; color: var(--dk-muted); }

/* ---------- Scene 6: seen from above, contact ---------- */
.end__title { font: 300 clamp(48px, 10vw, 150px)/.9 var(--display); text-transform: uppercase; text-align: center; margin: 4vh 0 10vh; text-shadow: 0 4px 40px rgba(0,0,0,.5); }
.end__grid { display: grid; gap: 28px; }
@media (min-width: 900px) { .end__grid { grid-template-columns: 7fr 5fr; align-items: center; } }
.contact { padding: 34px 28px 32px; }
@media (min-width: 760px) { .contact { padding: 44px 44px 40px; } }
.safety-rule { display: block; width: 72px; height: 12px; background: var(--safety-yellow); margin-bottom: 26px; }
.contact h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1; text-transform: uppercase; max-width: 11em; }
.contact__lead { margin-top: 20px; font-size: 18px; color: var(--dk-muted); max-width: 32em; }
.details { margin: 34px 0 0; display: grid; gap: 18px 40px; border-top: 1px solid var(--glass-line); padding-top: 26px; }
@media (min-width: 640px) { .details { grid-template-columns: 1fr 1fr; } }
.details dt { font: 600 12px/1.4 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--dk-muted); }
.details dd { margin: 4px 0 0; font-size: 17px; }
.details a { text-decoration: none; border-bottom: 1px solid var(--glass-line); }
.details a:hover { border-bottom-color: var(--safety-yellow); }
.bird-host { position: relative; aspect-ratio: 4 / 5; width: 100%; max-width: 420px; justify-self: center; }
.bird-host__static { position: absolute; left: 50%; top: 50%; width: 44%; transform: translate(-50%, -50%); }
.is-cinema .bird-host__static { visibility: hidden; }

/* ---------- Footer ---------- */
.site-footer { background: rgba(6,28,21,.92); color: var(--dk-muted); padding: 48px 0 40px; font-size: 14px; line-height: 1.7; }
.site-footer .wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .site-footer .wrap { grid-template-columns: auto 1fr auto; align-items: start; gap: 48px; } }
.footer-logo { width: 150px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.site-footer nav a { text-decoration: none; color: var(--paper); }
.site-footer nav a:hover { text-decoration: underline; }
.legal strong { color: var(--paper); font-weight: 500; }

/* ---------- The bird's tap target ---------- */
.bird-hit { position: fixed; left: 0; top: 0; z-index: 25; width: 64px; height: 64px; padding: 0; border: 0; background: transparent; cursor: pointer;
  transform: translate(-300px, -300px); -webkit-tap-highlight-color: transparent; border-radius: 50%; }
.bird-hint { position: absolute; right: calc(100% + 6px); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 600 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; background: var(--safety-yellow); color: var(--deep-green); padding: 7px 9px; }
.bird-hint[hidden] { display: none; }

/* ---------- Static fallback: no WebGL or reduced motion ---------- */
.is-static .cinema, .is-static .bird-layer, .is-static .bird-hit, .is-static .flight { display: none; }
.is-static .scene { background-size: cover; background-position: center; }
.is-static .flight__label { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}