/* ============================================================
   Orange in the Blue — homepage-only sections
   (shared shell/nav/buttons/footer live in the theme's style.css)
   ============================================================ */

/* ---------- HERO ---------- */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--gutter);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media.gradient {
  background:
    radial-gradient(80% 55% at 72% 4%, rgb(var(--accent-soft-rgb) / .55), transparent 55%),
    radial-gradient(120% 42% at 50% 0%, var(--surf-sun), transparent 46%),
    /* fade the bottom to transparent so the page's descent gradient flows through (no seam) */
    linear-gradient(180deg, #f6ab63 0%, #d98f63 11%, #6ea7cd 36%, var(--surf-blue) 56%, var(--zone-sun) 80%, transparent 100%);
}
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-media.gradient::after {
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(60% 40% at 30% -10%, rgba(180,225,255,.18), transparent 60%),
    radial-gradient(40% 30% at 75% -5%, rgb(var(--accent-soft-rgb) / .14), transparent 60%);
  filter: blur(8px);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1.05); } to { transform: translate3d(4%, 3%, 0) scale(1.12); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* left scrim for text legibility only — no bottom band, so the hero flows into the next section */
  background: linear-gradient(90deg, rgba(2,12,20,.55) 0%, rgba(2,12,20,.16) 46%, transparent 72%);
}
.hero-inner { position: relative; z-index: 2; max-width: 60rem; }
.hero h1 { font-family: var(--display); font-weight: 300; font-size: clamp(2.8rem, 8.5vw, 6.4rem); line-height: .98; letter-spacing: -.015em; }
.hero h1 em { font-style: italic; color: var(--orange-soft); }
.hero p.tag { margin-top: 1.3rem; font-size: clamp(1rem, 2vw, 1.3rem); color: var(--ink); max-width: 40ch; font-weight: 300; }
.cta-row { margin-top: 2.4rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- WORK GRID ---------- */
.work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.grid { display: grid; gap: .85rem; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 14vw; }
.tile { position: relative; overflow: hidden; border-radius: 4px; background: linear-gradient(135deg, var(--deep), var(--blue)); cursor: pointer; }
.tile .ph { position: absolute; inset: 0; }
.tile .ph.sw0 { background: linear-gradient(150deg,#0a3a5e,#072033 70%); }
.tile .ph.sw1 { background: linear-gradient(150deg,#13577f,#0a2c47 70%); }
.tile .ph.sw2 { background: radial-gradient(120% 90% at 30% 10%, rgb(var(--accent-rgb) / .35), transparent 50%), linear-gradient(150deg,#0d4163,#061d30 70%); }
.tile .ph.sw3 { background: linear-gradient(150deg,#0f4a70,#082539 70%); }
.tile .ph.sw4 { background: linear-gradient(150deg,#114e76,#08293f 70%); }
.tile .ph.sw5 { background: radial-gradient(120% 90% at 70% 20%, rgb(var(--accent-soft-rgb) / .3), transparent 50%), linear-gradient(150deg,#0b3a5c,#06202f 70%); }
.tile .ph.sw6 { background: linear-gradient(150deg,#0e4368,#071f31 70%); }
.tile .ph.sw7 { background: linear-gradient(150deg,#125580,#0a2a44 70%); }
.tile.wide { grid-column: span 2; }
.tile.tall { grid-row: span 2; }
.tile .cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 1rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); opacity: 0; transform: translateY(8px);
  background: linear-gradient(transparent, rgba(3,16,27,.85));
  transition: opacity .3s ease, transform .3s ease;
}
.tile:hover .cap { opacity: 1; transform: translateY(0); }
.tile::after { content:""; position:absolute; inset:0; box-shadow: inset 0 0 0 1px var(--line); border-radius:4px; }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 34vw; } .tile.wide { grid-column: span 2; } }

/* ---------- FILMS ---------- */
.films { background: transparent; }
.film-stage {
  position: relative; border-radius: 8px; overflow: hidden; margin-top: 2rem;
  aspect-ratio: 21 / 9;
  background: radial-gradient(80% 120% at 50% 0%, rgb(var(--accent-rgb) / .18), transparent 55%), linear-gradient(160deg, #0c456b, #04141f);
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px var(--line);
}
.play { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--orange); display: grid; place-items: center; transition: transform .25s ease, background .25s ease; }
.play:hover { transform: scale(1.06); background: rgb(var(--accent-rgb) / .12); }
.play::after { content:""; width:0; height:0; margin-left:5px; border-left: 18px solid var(--orange); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.film-stage .label { position: absolute; bottom: 1.2rem; left: 1.4rem; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }

/* ---------- ABOUT ---------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,4.5rem); align-items: center; }
.portrait { aspect-ratio: 4/5; border-radius: 6px; background: radial-gradient(90% 70% at 30% 20%, rgb(var(--accent-soft-rgb) / .25), transparent 55%), linear-gradient(160deg, #0e4870, #061d2f); box-shadow: inset 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.portrait span { position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; }
.about p { color: var(--muted); margin-top: 1.1rem; }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .portrait { max-width: 320px; } }

/* ---------- SHOP ---------- */
.shop { text-align: center; background: transparent; }
.shop .lead { margin: 1rem auto 0; }
.shop-row { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin: 2.6rem 0; }
.shop-card { width: 200px; display: block; transition: transform .2s ease; }
.shop-card:hover { transform: translateY(-4px); }
.shop-card:hover p { color: var(--orange); }
.shop-card .thumb { aspect-ratio: 1; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.shop-card:nth-child(1) .thumb { background: linear-gradient(150deg,#0f4870,#06202f); }
.shop-card:nth-child(2) .thumb { background: radial-gradient(100% 90% at 40% 20%, rgb(var(--accent-rgb) / .3), transparent 55%), linear-gradient(150deg,#0c3f63,#05192a); }
.shop-card:nth-child(3) .thumb { background: linear-gradient(150deg,#125580,#082942); }
.shop-card p { margin-top:.7rem; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color: var(--muted); }