/* Option A, "Three panels". The hero is the three business entries: stacked full-width bands on phones,
   three tall panels side by side from 900px (hover or keyboard focus widens one). Each panel is a parallax
   stack: background (slow, pans inside the panel surface), outlined word (medium), cut-out subject (fast),
   text (own speed). Word and subject are not clipped by the panel: they may cross its edges. */

.hero { position: relative; padding-top: calc(var(--header-h) + env(safe-area-inset-top)); }
.hero-title { position: relative; z-index: 4; padding: 16px var(--gutter) 14px; }
.hero-title h1 { margin: 0; font: 700 clamp(36px, 11.4vw, 92px)/.92 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.quick { display: none; }

/* ---------- Panels ---------- */
.panels { position: relative; display: grid; }
.panel {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  border-top: 1px solid var(--line);
}
.panel-bg { /* the panel surface: a fixed frame; its content pans slowly inside it */
  position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--hangar-raised); pointer-events: none;
}
.panel-bg > * {
  position: absolute; left: 0; top: -60px; width: 100%; height: calc(100% + 120px); max-width: none;
  object-fit: cover; transform: translate3d(0, calc(var(--p, 0) * -50px), 0); will-change: transform;
}
.panel-bg .photo { opacity: .3; filter: grayscale(.5) contrast(1.05); }
.panel-bg::after { /* veil so text stays readable over any background */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--hangar) 0, rgb(18 22 28 / .94) var(--veil-h, 300px), rgb(18 22 28 / .25) calc(var(--veil-h, 300px) + 160px), rgb(18 22 28 / .1) 100%);
}

.panel-stage { position: relative; height: clamp(290px, 78vw, 360px); }
.panel-word { /* medium layer, outlined */
  position: absolute; z-index: -2; left: 50%; top: 4px; pointer-events: none; user-select: none; white-space: nowrap;
  font: 700 var(--wsize, 230px)/.8 var(--display); letter-spacing: -.01em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgb(232 185 49 / .5);
  transform: translate3d(-50%, calc(var(--p, 0) * 36px), 0); will-change: transform;
}
.k9 .panel-word { --wsize: clamp(190px, 58vw, 300px); }
.judo .panel-word { --wsize: clamp(120px, 36vw, 190px); top: 18px; }
.lplate { /* driving: outlined L plate, medium layer */
  position: absolute; z-index: -2; left: 50%; top: 10px; width: clamp(150px, 42vw, 210px); aspect-ratio: 1;
  border: 2px solid rgb(232 185 49 / .5); border-radius: 10px;
  transform: translate3d(-50%, calc(var(--p, 0) * 36px), 0) rotate(-6deg); will-change: transform;
}
.lplate::before {
  content: "L"; position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 clamp(130px, 36vw, 190px)/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgb(206 17 38 / .9);
}

.subjects { position: absolute; z-index: 0; left: 50%; bottom: -14px; display: flex; align-items: flex-end; transform: translateX(-50%); }
.subjects img { width: auto; max-width: none; filter: var(--rim); will-change: transform; }
.k9 .dog-adult { height: clamp(250px, 70vw, 330px); transform: translate3d(0, calc(var(--p, 0) * 90px), 0); }
.k9 .dog-pup { height: clamp(160px, 44vw, 210px); margin-left: -18px; transform: translate3d(0, calc(var(--p, 0) * 130px), 0); }
.judo .subjects { bottom: 14px; }
.judo .throw { /* the source crop cuts the thrower at the top edge: fade it out */
  width: clamp(250px, 74vw, 340px); height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%);
  transform: translate3d(0, calc(var(--p, 0) * 100px), 0) rotate(calc(var(--p, 0) * -10deg));
}
.drive .subjects { bottom: 4px; }
.drive .car {
  width: clamp(330px, 96vw, 460px); height: auto;
  transform: translate3d(calc(var(--p, 0) * -110px), 0, 0);
}
.road { /* side-view road under the car; dashes move with scroll */
  position: absolute; z-index: -1; left: calc(var(--gutter) * -1); right: calc(var(--gutter) * -1); bottom: -6px; height: 42px; overflow: visible;
}
.panel .road { left: 0; right: 0; width: 100%; }
.road .lane { stroke-dashoffset: calc(var(--scroll, 0) * 1px); }

.panel-body { position: relative; z-index: 1; padding: 22px var(--gutter) 30px; }
.k9 { --veil-h: 330px; }
.judo { --veil-h: 470px; }
.drive { --veil-h: 330px; }
.panel h2 { margin: 0 0 8px; font: 700 clamp(32px, 9.4vw, 46px)/.95 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.panel-line { margin: 0 0 12px; max-width: 34rem; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.tags li { padding: 3px 7px; border: 1px solid var(--line); font: 500 12px/16px var(--mono); color: var(--muted); text-transform: uppercase; }
.panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.logo-chip { width: 48px; height: 48px; border-radius: 50%; }
.logo-chip.square { border-radius: 4px; }
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }

.choices { display: grid; gap: 10px; }
.choice {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: start;
  padding: 12px; background: rgb(28 34 43 / .86); border: 1px solid var(--line); border-left: 3px solid var(--gold);
}
.choice img { grid-row: span 2; width: 48px; height: 48px; object-fit: contain; }
.choice .aylwin-logo { background: #fff; border-radius: 50%; padding: 2px; }
.choice h3 { margin: 0; font: 600 22px/24px var(--display); text-transform: uppercase; }
.choice p { margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); }
.choice .panel-actions { grid-column: 1 / -1; margin-top: 6px; }

/* ---------- Biography ---------- */
.section { position: relative; max-width: 1200px; margin: 0 auto; padding: 72px var(--gutter) 40px; }
.bio { display: grid; gap: 8px; }
.bio-art { position: relative; height: clamp(360px, 104vw, 560px); }
.bio-chev { /* slow layer: stacked gold chevrons */
  position: absolute; z-index: 0; left: 50%; top: 6%; display: grid; gap: 14px; pointer-events: none;
  transform: translate3d(-50%, calc(var(--p, 0) * -40px), 0);
}
.bio-chev i { display: block; width: clamp(200px, 60vw, 320px); height: clamp(60px, 18vw, 96px); background: rgb(232 185 49 / .14); clip-path: var(--chevron); }
.bio-chev i:first-child { background: rgb(232 185 49 / .32); }
.bio-dan { /* medium layer */
  position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; user-select: none;
  font: 700 clamp(120px, 38vw, 220px)/.8 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgb(131 146 163 / .45);
  transform: translate3d(0, calc(var(--p, 0) * 40px), 0);
}
.bio-portrait { /* fast layer */
  position: absolute; z-index: 2; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
  transform: translate3d(-50%, calc(var(--p, 0) * 70px), 0); filter: drop-shadow(0 16px 20px rgb(0 0 0 / .5));
}
.bio-text p { margin: 0 0 14px; }
.bio-text h2 { margin-bottom: 16px; }
.bio .creds { margin: 22px 0 14px; }
.orgs { margin: 0; padding: 0; list-style: none; font: 500 13px/18px var(--mono); }
.orgs li { padding: 8px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.orgs a { color: var(--gold); text-underline-offset: 3px; }

/* ---------- Socials and contact ---------- */
.socials-sec, .contact-sec { padding-top: 56px; }
.contact-sec { padding-bottom: 64px; }
.venue { margin: 0; font-size: 15px; }

@media (max-width: 559px) {
  .creds { grid-template-columns: minmax(0, 1fr); }
  .creds div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: baseline; }
  .creds dd { margin: 0; }
}
@media (max-width: 899px) {
  .menu { gap: 12px; }
  .menu a { font-size: 14px; letter-spacing: .04em; }
}

/* ---------- Desktop: three panels side by side ---------- */
@media (min-width: 900px) {
  .hero { display: flex; flex-direction: column; min-height: 100svh; }
  .hero-title {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; padding: 26px var(--gutter) 20px;
  }
  .hero-title h1 { font-size: clamp(56px, 6vw, 92px); }
  .quick { display: grid; grid-template-columns: repeat(3, auto); gap: 1px; margin: 0; background: var(--line); border: 1px solid var(--line); }
  .quick div { padding: 8px 14px; background: var(--hangar-raised); }
  .quick dt { font: 500 11px/14px var(--mono); text-transform: uppercase; color: var(--muted); }
  .quick dd { margin: 2px 0 0; font: 500 15px/20px var(--mono); }
  .quick a { color: var(--gold); text-decoration: none; }
  .quick a:hover { text-decoration: underline; }

  .panels {
    flex: 1; min-height: 640px;
    grid-template-columns: 1fr 1fr 1fr; grid-template-rows: minmax(300px, 1fr) auto;
    transition: grid-template-columns .5s cubic-bezier(.2, .7, .2, 1);
  }
  .panels:has(> .k9:is(:hover, :focus-within)) { grid-template-columns: 1.6fr 1fr 1fr; }
  .panels:has(> .judo:is(:hover, :focus-within)) { grid-template-columns: 1fr 1.6fr 1fr; }
  .panels:has(> .drive:is(:hover, :focus-within)) { grid-template-columns: 1fr 1fr 1.6fr; }
  .panel { grid-row: 1 / span 2; display: grid; grid-template-rows: subgrid; border-top: 0; border-left: 1px solid var(--line); }
  .panel:first-child { border-left: 0; }
  .panel-stage { height: auto; min-height: 300px; }
  .panel-body { padding: 18px 28px 30px; }
  .k9 .panel-word { --wsize: clamp(200px, 19vw, 300px); }
  .judo .panel-word { --wsize: clamp(120px, 12vw, 190px); }
  .k9 .dog-adult { height: min(42vh, 360px); }
  .k9 .dog-pup { height: min(26vh, 220px); }
  .judo .throw { width: min(24vw, 330px); }
  .judo { --veil-h: 560px; }
  .drive .car { width: min(33vw, 480px); }
  .panel h2 { font-size: clamp(32px, 2.8vw, 44px); }

  .bio { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .bio-art { height: 620px; }
  .bio .creds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .panel-body { padding: 20px 32px 30px; }
  .panels { grid-template-columns: 1fr 1.3fr 1fr; }
  .panels:has(> .k9:is(:hover, :focus-within)) { grid-template-columns: 1.5fr 1.2fr .9fr; }
  .panels:has(> .judo:is(:hover, :focus-within)) { grid-template-columns: .9fr 1.6fr .9fr; }
  .panels:has(> .drive:is(:hover, :focus-within)) { grid-template-columns: .9fr 1.2fr 1.5fr; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice { grid-template-columns: 40px minmax(0, 1fr); align-content: start; }
  .choice img { grid-row: auto; width: 40px; height: 40px; }
  .choice h3 { align-self: center; font-size: 20px; line-height: 22px; }
  .choice p { grid-column: 1 / -1; font-size: 13px; line-height: 18px; }
  .choice .panel-actions { gap: 2px 12px; }
  .choice .btn { width: 100%; }
  .choice .soc { font-size: 12px; gap: 0 12px; }
  .judo { --veil-h: 420px; }
}