/* Committed to a single white/light look on purpose — no dark-mode switch,
   so the background stays white regardless of the viewer's system setting. */

:root {
  --bg: #FFFFFF;
  --bg-raised: #FFFFFF;
  --ink: #18181B;
  --ink-soft: #63636B;
  --line: #E8E6E0;
  --gold: #D98A2B;
  --gold-ink: #9C5E14;
  --sage: #4E7A56;
  --sage-ink: #2E5136;
  --teal: #2E6E77;
  --teal-ink: #1F4E55;
  --slate: #3F6FA6;
  --slate-ink: #274A6E;
  --violet: #7A5CA8;
  --violet-ink: #52397A;
  --card-bg: #FFFFFF;
  --nav-bg: rgba(255, 255, 255, 0.88);
  --shadow: 0 1px 2px rgba(24,24,27,0.05), 0 10px 28px -16px rgba(24,24,27,0.14);
  --focus: #18181B;
}

* { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  padding-inline: 0;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: #18181B; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

h1, h2, h3 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  line-height: 1.04;
}

.mono {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.wrap {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: max(20px, env(safe-area-inset-left));
}

.eyebrow {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* ---------- NAV ---------- */
nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  position: relative;
  padding-block: 20px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.brand {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
}
.brand small {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  margin-top: 3px;
}
.nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.nav-links > li { position: relative; display: flex; align-items: center; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { color: var(--gold-ink); }
.btn {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  border-radius: 3px;
  padding: 10px 18px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-primary { background: var(--gold); color: #17110A; }
.btn-primary:hover { background: var(--gold-ink); }
.btn-ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); }
.nav-toggle {
  display: none;
  position: absolute;
  top: 18px;
  right: max(20px, env(safe-area-inset-left));
}

/* dropdown ("Reels") */
.dropdown-trigger {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.dropdown-trigger:hover { color: var(--gold-ink); }
.dropdown-trigger svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
.dropdown.open .dropdown-trigger svg { transform: rotate(180deg); }
.dropdown-menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 168px;
  display: none;
  flex-direction: column;
  gap: 2px;
}
.dropdown.open .dropdown-menu { display: flex; }
.dropdown-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.86rem;
}
.dropdown-menu a:hover { background: var(--bg); color: var(--gold-ink); }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: inline-flex;
    background: none; border: 1px solid var(--line); border-radius: 3px;
    padding: 8px 10px; color: var(--ink); cursor: pointer;
  }
  .nav-links.open {
    display: flex;
    position: absolute;
    inset: 100% 0 auto 0;
    background: var(--bg-raised);
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 22px;
    gap: 16px;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 60px);
    overflow-y: auto;
  }
  .nav-links.open > li { width: 100%; flex-direction: column; align-items: flex-start; }
  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: none;
    padding: 4px 0 4px 4px;
    width: 100%;
  }
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    repeating-radial-gradient(circle at 82% 22%, transparent 0 26px, rgba(217,138,43,0.13) 27px 28px, transparent 29px 54px),
    linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}

.hero-inner {
  padding-block: 64px 48px;
  display: grid;
  gap: 22px;
}

.tagline {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
}

.hero h1 {
  font-size: clamp(2.6rem, 8.5vw, 6.2rem);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-ink);
}
.hero-sub {
  max-width: 46ch;
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

/* smaller page-header hero used on inner pages */
.page-hero .hero-inner { padding-block: 44px 36px; gap: 14px; }
.page-hero h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }

/* ---------- SECTION SHELLS ---------- */
section { padding-block: 68px; border-bottom: 1px solid var(--line); }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.section-head p { max-width: 44ch; color: var(--ink-soft); font-size: 0.96rem; margin-top: 8px; }

/* ---------- ABOUT ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 700px) { .about-grid { grid-template-columns: 1fr; } }

.pilot-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card-bg);
  padding: 18px;
  box-shadow: var(--shadow);
}
.pilot-photo {
  aspect-ratio: 1;
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(217,138,43,0.35), transparent 55%),
    repeating-linear-gradient(115deg, rgba(78,122,86,0.22) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, var(--sage), var(--teal));
  display: grid;
  place-items: center;
  color: #F1EEE4;
  margin-bottom: 12px;
}
.pilot-photo svg { width: 58%; opacity: 0.92; }
.pilot-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
  display: block;
}
.pilot-card .mono { font-size: 0.68rem; color: var(--ink-soft); }
.pilot-card .callsign { font-size: 1rem; font-weight: 700; margin-top: 2px; }

.about-copy p { line-height: 1.7; font-size: 1.02rem; margin: 0 0 16px; max-width: 62ch; }
.about-copy p:last-of-type { margin-bottom: 20px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  padding: 6px 11px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--bg-raised);
}

/* ---------- SERVICES ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.service {
  background: var(--card-bg);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.service .num { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.72rem; color: var(--gold-ink); }
.service h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
}
.service p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; }
.service.highlight { background: linear-gradient(180deg, rgba(217,138,43,0.08), transparent 60%); }

/* ---------- REELS (grid + cards, reused by featured strip & gallery pages) ---------- */
.reel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.reel-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
a.reel-card { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.15s ease; }
a.reel-card:hover { box-shadow: 0 1px 2px rgba(24,24,27,0.05), 0 16px 34px -16px rgba(24,24,27,0.24); transform: translateY(-2px); }
a.reel-card:hover .play { background: rgba(18,25,42,0.9); }
.reel-thumb {
  position: relative;
  aspect-ratio: 16/10;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.reel-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.thumb-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,15,17,0.08), rgba(15,15,17,0.42));
}
.reel-thumb.cat-travel {
  background:
    repeating-radial-gradient(circle at 30% 70%, transparent 0 14px, rgba(217,138,43,0.4) 15px 16px, transparent 17px 30px),
    linear-gradient(160deg, #EFC48F, #D98A2B);
}
.reel-thumb.cat-client {
  background:
    repeating-radial-gradient(circle at 70% 30%, transparent 0 14px, rgba(49,85,56,0.4) 15px 16px, transparent 17px 30px),
    linear-gradient(160deg, #9BC3A2, #4E7A56);
}
.reel-thumb.cat-content {
  background:
    repeating-radial-gradient(circle at 40% 40%, transparent 0 14px, rgba(31,78,85,0.4) 15px 16px, transparent 17px 30px),
    linear-gradient(160deg, #8FCBD3, #2E6E77);
}
.reel-thumb.cat-property {
  background:
    repeating-radial-gradient(circle at 55% 55%, transparent 0 14px, rgba(39,74,110,0.4) 15px 16px, transparent 17px 30px),
    linear-gradient(160deg, #A9C6E4, #3F6FA6);
}
.reel-thumb.cat-music {
  background:
    repeating-radial-gradient(circle at 45% 60%, transparent 0 14px, rgba(82,57,122,0.4) 15px 16px, transparent 17px 30px),
    linear-gradient(160deg, #C6B3E0, #7A5CA8);
}
.reel-thumb .play {
  position: relative;
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(18,25,42,0.72);
  display: grid;
  place-items: center;
  color: #fff;
}
.reel-thumb .play svg { width: 16px; height: 16px; margin-left: 2px; }
.add-clip {
  position: absolute;
  z-index: 2;
  top: 10px; right: 10px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(18,25,42,0.72);
  color: #fff;
  padding: 5px 9px;
  border-radius: 20px;
}
.reel-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.reel-body .cat { font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.reel-body .cat.travel { color: var(--gold-ink); }
.reel-body .cat.client { color: var(--sage-ink); }
.reel-body .cat.content { color: var(--teal-ink); }
.reel-body .cat.property { color: var(--slate-ink); }
.reel-body .cat.music { color: var(--violet-ink); }
.reel-body h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.005em; }
.reel-body .loc { font-size: 0.84rem; color: var(--ink-soft); }

.reel-note {
  margin-top: 22px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold);
  padding-left: 14px;
}

/* ---------- EXPLORE TILES (home page, link out to gallery pages) ---------- */
.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.explore-tile {
  position: relative;
  display: block;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: #fff;
}
.explore-tile.cat-travel { background: linear-gradient(160deg, #EFC48F, #D98A2B); }
.explore-tile.cat-client { background: linear-gradient(160deg, #9BC3A2, #4E7A56); }
.explore-tile.cat-content { background: linear-gradient(160deg, #8FCBD3, #2E6E77); }
.explore-tile.cat-property { background: linear-gradient(160deg, #A9C6E4, #3F6FA6); }
.explore-tile.cat-music { background: linear-gradient(160deg, #C6B3E0, #7A5CA8); }
.explore-tile .tile-inner {
  position: absolute;
  inset: 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, transparent 45%, rgba(15,15,17,0.6));
}
.explore-tile h3 { font-size: 1.35rem; color: #fff; margin-bottom: 6px; }
.explore-tile .view {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.explore-tile:hover .view { gap: 10px; }
.explore-tile .view svg { width: 13px; height: 13px; transition: transform 0.15s ease; }

/* ---------- CLOSING TEASER BAND (home page) ---------- */
.teaser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
@media (max-width: 700px) { .teaser-grid { grid-template-columns: 1fr; } }
.teaser {
  background: var(--card-bg);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.teaser h3 { font-size: 1.25rem; }
.teaser p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; max-width: 42ch; }

/* ---------- CONTACT ---------- */
#contact { border-bottom: none; }
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 46px;
  align-items: start;
}
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-copy h2 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 14px; }
.contact-copy p { color: var(--ink-soft); max-width: 50ch; line-height: 1.6; margin-bottom: 22px; }

.contact-card {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card-bg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.contact-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.contact-row:last-child { border-bottom: none; }
.contact-row .k { color: var(--ink-soft); font-family: 'Hanken Grotesk', sans-serif; font-weight: 600; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; align-self: center; }
.contact-row .v a { text-decoration: none; font-weight: 600; }
.contact-row .v a:hover { color: var(--gold-ink); }

footer {
  padding-block: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--ink-soft);
}
footer .mono { font-size: 0.72rem; }