/* =========================================================
   app.css (CLEAN + CONFLICT-FREE + MOBILE MENU SLIDE)
   - One :root
   - One .topbar system
   - One logo sizing system (big logo + no overlaps)
   - Mobile menu slides down smoothly (no layout break)
   ========================================================= */

/* ---------- Theme ---------- */
:root{
  --bg:#0b1020;
  --card:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.70);
  --brand:#f59e0b;

  /* Header */
  --topbar-grey:#17181b;
  --topbar-black:#000;
  --topbar-line:rgba(255,255,255,.08);

  /* Logo (BIG) */
  --logo-h:92px;
  --logo-h-sm:78px;

  /* Mobile menu animation */
  --menu-max: 420px;        /* safe height for 4 links */
  --menu-dur: 260ms;
  --menu-ease: cubic-bezier(.2,.8,.2,1);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;

  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(245,158,11,.20), transparent 55%),
    radial-gradient(900px 500px at 80% 10%, rgba(56,189,248,.12), transparent 60%),
    var(--bg);
  color:var(--text);
}

main.main{ flex:1; width:100%; }
a{ color:inherit; }
.wrap{ max-width:1050px; margin:0 auto; padding:18px 16px; }
.muted{ color:var(--muted); }

/* ---------- Header (single source of truth) ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  border-bottom:1px solid var(--topbar-line);
  backdrop-filter:none;

  background:
    radial-gradient(1200px 260px at 22% 0%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 240px at 38% 0%, rgba(245,158,11,.06), transparent 58%),
    linear-gradient(180deg, var(--topbar-grey) 0%, var(--topbar-black) 78%);
}

.topbar .wrap{ padding:10px 16px; }

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height: 92px;
}

/* Brand container */
.brand,
.brand--logo-only{
  display:flex;
  align-items:center;
  text-decoration:none;
  min-width:0;
  line-height:0;                 /* kills inline image baseline gap */
}

/* IMPORTANT: no panel/box behind logo */
.brand--logo-only::before{ content:none !important; }

.brand-text{ display:none; }

/* Logo: big, left-aligned, never overlaps the toggle */
.brand-logo,
.brand-logo--float{
  height: var(--logo-h);
  width: auto;

  /* keep space for the hamburger button on mobile */
  max-width: min(560px, calc(100vw - 84px));
  object-fit: contain;
  object-position: left center;
  display:block;
  background: transparent;

  filter:
    drop-shadow(0 12px 22px rgba(0,0,0,.75))
    drop-shadow(0 0 14px rgba(245,158,11,.08));
}

/* Nav (desktop) */
.nav{
  display:flex;
  gap:16px;
  align-items:center;
}
.nav a{
  text-decoration:none;
  color:var(--muted);
}
.nav a:hover{ color:var(--text); }

/* Buttons */
.btn{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--brand);
  color:#111;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.15);
}
.btn.ghost{
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
}
.topbar .btn{ box-shadow:0 10px 18px rgba(0,0,0,.35); }

/* ---------- Mobile menu toggle (hamburger) ---------- */
.nav-toggle{
  display:none;                 /* shown only on mobile */
  appearance:none;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.12);
  color:inherit;
  cursor:pointer;
  padding:10px 10px;
  border-radius:12px;
  flex: 0 0 auto;
}
.nav-toggle:hover{ background:rgba(255,255,255,.06); }

/* Hamburger icon */
.nav-toggle-bars{
  display:block;
  width: 26px;
  height: 2px;
  background: rgba(255,255,255,.90);
  position: relative;
  border-radius: 99px;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after{
  content:"";
  position:absolute;
  left:0;
  width: 26px;
  height: 2px;
  background: rgba(255,255,255,.90);
  border-radius: 99px;
  transition: transform var(--menu-dur) var(--menu-ease), top var(--menu-dur) var(--menu-ease), opacity var(--menu-dur) var(--menu-ease);
}
.nav-toggle-bars::before{ top:-8px; }
.nav-toggle-bars::after { top: 8px; }

/* turn hamburger into X when open */
.topbar.is-open .nav-toggle-bars{ background: transparent; }
.topbar.is-open .nav-toggle-bars::before{ top:0; transform: rotate(45deg); }
.topbar.is-open .nav-toggle-bars::after { top:0; transform: rotate(-45deg); }

/* ---------- Mobile dropdown panel (SLIDE ANIMATION) ---------- */
.nav-mobile{
  border-top: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(900px 220px at 20% 0%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(180deg, rgba(22,24,27,.96), rgba(0,0,0,.98));

  /* closed state (no gap) */
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;

  transition:
    max-height var(--menu-dur) var(--menu-ease),
    opacity    var(--menu-dur) var(--menu-ease),
    transform  var(--menu-dur) var(--menu-ease);
}
/* Smooth slide-down (no layout break) */
.nav-mobile{
  overflow:hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height .38s ease, opacity .22s ease, transform .22s ease;
}

.topbar.is-open .nav-mobile{
  max-height: 520px; /* big enough for all links */
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .nav-mobile{ transition:none; }
}

.topbar.is-open .nav-mobile{
  max-height: var(--menu-max);
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nav-mobile-inner{
  max-width:1050px;
  margin:0 auto;
  padding: 12px 16px 16px;
  display:grid;
  gap: 10px;
}

.nav-mobile a{
  text-decoration:none;
  color: rgba(255,255,255,.90);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}
.nav-mobile a:hover{ background: rgba(255,255,255,.06); }

.nav-mobile a.btn{
  display:flex;
  justify-content:center;
  border: 1px solid rgba(0,0,0,.15);
  background: var(--brand);
  color:#111;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .nav-mobile,
  .nav-toggle-bars::before,
  .nav-toggle-bars::after{
    transition:none !important;
  }
}

/* ---------- Header responsive ---------- */
@media (max-width: 820px){
  :root{ --logo-h: var(--logo-h-sm); }

  /* hide desktop nav completely on mobile */
  .nav--desktop{ display:none !important; }

  /* show toggle on mobile */
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  /* give logo maximum room */
  .topbar-inner{ gap:12px; min-height: 84px; }
  .topbar .wrap{ padding: 8px 12px; }
}

/* ---------- Typography / Layout ---------- */
h1{ font-size:42px; line-height:1.08; margin:12px 0 10px; }
.lead{ color:var(--muted); font-size:18px; max-width:62ch; }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
}

.hero{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:18px;
  align-items:stretch;
  padding:10px 0 18px;
}
.hero-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:14px; }

.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:14px;
}
.grid3 .card a{ color:var(--brand); text-decoration:none; font-weight:700; }

.footer{ border-top:1px solid var(--line); margin-top:26px; }

/* Forms */
.form{ display:grid; gap:12px; }
label{ display:grid; gap:6px; color:var(--muted); font-weight:650; }
input,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus,textarea:focus{ border-color:rgba(245,158,11,.55); }

.alert{ border-radius:14px; padding:10px 12px; margin:10px 0; border:1px solid var(--line); }
.alert.success{ background:rgba(34,197,94,.12); }
.alert.error{ background:rgba(239,68,68,.12); }

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; }
  .grid3{ grid-template-columns:1fr; }
  h1{ font-size:34px; }
}

/* ---------- Slider (simple banner slider) ---------- */
.slider{
  border-radius:18px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  overflow:hidden;
  margin:14px 0 18px;
}
.slider-viewport{ position:relative; overflow:hidden; }
.slider-track{ display:flex; transition:transform .6s ease; will-change:transform; }
.slide{ min-width:100%; height:360px; position:relative; }
.slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(1.05);
}
.slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(11,16,32,.78), rgba(11,16,32,.20), rgba(11,16,32,.78));
}
.slider-caption{
  position:absolute; left:16px; bottom:16px; right:16px;
  z-index:2; max-width:720px;
}
.slider-caption h2{ margin:0 0 6px; font-size:26px; }
.slider-caption p{ margin:0; color:var(--muted); }

.slider-dots{
  display:flex; gap:8px;
  padding:12px 14px;
  justify-content:center;
}
.slider-dots button{
  width:10px; height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.10);
  cursor:pointer;
}
.slider-dots button.active{
  background:var(--brand);
  border-color:rgba(0,0,0,.15);
}

/* ---------- Page images ---------- */
.page-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  align-items:stretch;
  margin:12px 0 16px;
}
.page-hero .photo{
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,.04);
}
.page-hero .photo img{
  width:100%;
  height:100%;
  min-height:320px;
  object-fit:cover;
  display:block;
}
@media (max-width: 900px){
  .slide{ height:260px; }
  .page-hero{ grid-template-columns:1fr; }
}

/* =========================================================
   Davey-style HERO (dd-hero) — Slide 1 image RIGHT
   (kept as-is from your base)
   ========================================================= */

.dd-hero{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  margin:14px 0 18px;
  background:#0a0f1f;
  position:relative;
}
.dd-hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(1100px 520px at 18% 8%, rgba(245,158,11,.16), transparent 60%),
    radial-gradient(900px 520px at 82% 18%, rgba(255,255,255,.06), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  pointer-events:none;
}
.dd-hero .slider-viewport{ position:relative; overflow:hidden; }
.dd-hero .slider-track{
  display:flex;
  transition:transform .65s ease;
  will-change:transform;
}

.dd-slide{
  min-width:100%;
  position:relative;
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:10px;
  padding:26px 22px;
  min-height:520px;
  align-items:stretch;
  overflow:hidden;
}

.dd-mark{
  position:absolute;
  left:16px;
  top:-36px;
  font-family:"Cormorant Garamond", serif;
  font-weight:700;
  font-size:320px;
  line-height:1;
  letter-spacing:.08em;
  color:rgba(245,158,11,.20);
  opacity:.55;
  pointer-events:none;
  z-index:0;
}

.dd-media{
  grid-column:1 / 2;
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  min-height:468px;
  overflow:visible;
}
.dd-media::before{
  content:"";
  position:absolute;
  left:20px;
  bottom:44px;
  width:440px;
  height:440px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(245,158,11,.18), transparent 65%);
  filter:blur(2px);
  z-index:0;
}

.dd-portrait{
  position:absolute;
  left:var(--portrait-left, -60px);
  bottom:0;
  height:460px;
  width:auto;
  max-width:none;
  filter:drop-shadow(0 34px 72px rgba(0,0,0,.60));
  transform:translateZ(0);
  z-index:2;
  pointer-events:none;
}

.dd-portrait--gbv{ --portrait-left:-90px; }
.dd-portrait--youth{ --portrait-left:-80px; }

.dd-copy{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:10px 8px;
  z-index:5;
}

.dd-kicker{
  text-transform:uppercase;
  letter-spacing:.22em;
  font-size:12px;
  color:rgba(255,255,255,.70);
  margin-bottom:12px;
}

.dd-name{ margin:0; line-height:1; }

.dd-name .first{
  display:block;
  font-family:"Great Vibes", cursive;
  font-size:86px;
  color:rgba(245,158,11,.92);
  letter-spacing:.02em;
  margin-bottom:6px;
}
.dd-name .last{
  display:block;
  font-family:"Cormorant Garamond", serif;
  font-size:64px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:rgba(255,255,255,.95);
}

.dd-tagline{
  margin-top:14px;
  font-size:22px;
  color:rgba(255,255,255,.88);
  letter-spacing:.04em;
}
.dd-lead{
  margin-top:12px;
  color:rgba(255,255,255,.70);
  max-width:54ch;
  font-size:16px;
  line-height:1.6;
}
.dd-cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.dd-btn-outline{
  display:inline-block;
  padding:11px 16px;
  border-radius:12px;
  border:1px solid rgba(245,158,11,.55);
  background:rgba(0,0,0,.18);
  color:rgba(255,255,255,.90);
  text-decoration:none;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;
}
.dd-btn-outline:hover{ background:rgba(245,158,11,.10); }

.dd-slide--img-right{
  grid-template-columns:1.05fr .95fr;
}
.dd-slide--img-right .dd-copy{
  grid-column:1 / 2;
  margin-left:0;
  margin-right:-12px;
}
.dd-slide--img-right .dd-media{
  grid-column:2 / 3;
  justify-content:flex-end;
}
.dd-slide--img-right .dd-media::before{
  left:auto;
  right:20px;
}
.dd-slide--img-right .dd-portrait{
  left:auto;
  right:var(--portrait-right, -60px);
}
.dd-portrait--main-right{ --portrait-right:-90px; }

.dd-hero .slider-dots{
  position:relative;
  z-index:6;
  display:flex;
  gap:8px;
  padding:12px 14px 16px;
  justify-content:center;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.14);
}

@media (max-width: 980px){
  .dd-slide{
    grid-template-columns:1fr;
    min-height:auto;
    padding:18px 16px 22px;
  }
  .dd-media{ min-height:320px; }
  .dd-portrait{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%);
    bottom:-10px;
    height:360px;
    width:auto;
    max-width:none;
  }
  .dd-mark{
    left:50%;
    transform:translateX(-50%);
    font-size:240px;
    top:-30px;
    text-align:center;
  }
  .dd-name .first{ font-size:70px; }
  .dd-name .last{ font-size:46px; letter-spacing:.22em; }
  .dd-copy{ margin-left:0; margin-right:0; }
}