/* Video hero. Tokens come from style.css (navy, gold-light). No inline styles (site CSP). The old pool-house hero is gone. */
.vh-hero{position:relative;isolation:isolate;overflow:hidden;color:#fff;background:#081929;height:clamp(640px,calc(100svh - 132px),840px)}
.vh-media{position:absolute;inset:0;z-index:-2;background:#081929 center/cover no-repeat}
.vh-media video{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s ease}
.vh-media.is-playing video{opacity:1}
/* one scrim: header edge, caption edge, and the right side where the words sit */
.vh-scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(8,25,41,.35),rgba(8,25,41,0) 18%),
  linear-gradient(0deg,#081929 0,#081929 120px,rgba(8,25,41,.55) 200px,rgba(8,25,41,0) 300px),
  linear-gradient(90deg,rgba(8,25,41,.06) 0,rgba(8,25,41,.36) 36%,rgba(8,25,41,.82) 62%,rgba(8,25,41,.86) 100%)}

/* Her cut-out ends at the waist, so navy must continue BELOW that cut or she reads as severed by the
   section boundary. The portrait stops 120px short of the hero bottom and .vh-scrim is opaque navy for
   that same 120px, so she always ends inside solid navy with navy beneath her. Keep the two numbers equal.
   Phones stack the hero (media query below), so both values are reset there. */
/* Tenia and the request box share one capped grid, so they stay fixed relative to each other at any width */
.vh-stage{height:100%;width:min(1320px,100%);margin-inline:auto;padding:0 4.5%;display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);column-gap:3%;align-items:end}
.vh-portrait{align-self:end;height:calc(100% - 120px);margin-bottom:120px;min-width:0;display:flex;align-items:flex-end;justify-content:flex-start;overflow:hidden}
/* Fill the box and let object-fit letterbox the picture inside it. `contain` can
   only scale, never stretch, so her proportions survive every viewport width. */
.vh-portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:left bottom}
.vh-panel{align-self:center;padding:24px 0 56px 4%;max-width:640px}
.vh-hero h1{margin:0;font:400 clamp(44px,5vw,74px)/1.06 Georgia,serif;letter-spacing:-.03em;text-wrap:balance;text-shadow:0 2px 22px rgba(3,14,24,.45)}
.vh-hero h1 em{font-style:normal;color:var(--gold-light)}
.vh-sub{margin:18px 0 26px;max-width:46ch;font-size:18px;color:#eef3f6;text-shadow:0 1px 14px rgba(3,14,24,.6)}

/* the request box floats: no panel, only text, frames and buttons */
.vh-card{background:none;border:0;padding:0;color:#fff;text-shadow:0 1px 12px rgba(3,14,24,.55)}
.vh-ask-label{display:block;font:400 22px/1.25 Georgia,serif;margin-bottom:12px;color:#fff}
.vh-card textarea{display:block;width:100%;min-height:74px;resize:vertical;border:1px solid rgba(255,255,255,.72);border-radius:0;background:transparent;color:#fff;padding:13px 14px;font:17px/1.45 Arial,sans-serif;caret-color:var(--gold-light)}
.vh-card textarea::placeholder{color:rgba(255,255,255,.78);opacity:1}
.vh-card textarea:hover{border-color:#fff}
.vh-card textarea:focus{border-color:var(--gold-light)}
.vh-intent{margin:14px 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.vh-intent legend{float:left;margin:0 6px 0 0;padding:0;font-size:14px;color:#e6eef3;line-height:44px}
.vh-intent label{position:relative}
.vh-intent input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.vh-intent label>span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(255,255,255,.72);font-size:15px;color:#fff;background:transparent}
.vh-intent label:hover>span{border-color:#fff;background:rgba(255,255,255,.08)}
.vh-intent input:checked+span{background:var(--gold-light);border-color:var(--gold-light);color:#081929;text-shadow:none}
.vh-intent input:focus-visible+span{outline:3px solid var(--gold-light);outline-offset:3px}
.vh-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.vh-go{min-height:52px;padding:14px 26px;border:0;border-radius:0;background:var(--gold-light);color:#081929;font:15px/1.4 Arial,sans-serif;cursor:pointer;text-shadow:none}
.vh-go:hover{background:#efd99b;color:#081929}
.vh-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
#vh-status{margin:0;font-size:14px;color:#e6eef3;flex:1 1 220px;min-height:1.4em}
#vh-status.is-error{color:#ffd2c7}
#vh-status:empty{margin:0;min-height:0;height:0;flex:0 0 0}
.vh-try{margin:16px 0 0;font-size:14px;color:#e6eef3;max-width:none;text-shadow:0 1px 12px rgba(3,14,24,.55)}
.vh-try button{background:none;border:0;border-bottom:1px solid var(--gold-light);padding:6px 2px;margin:0 14px 0 8px;min-height:44px;color:#fff;font:inherit;cursor:pointer}
.vh-try button:hover{color:var(--gold-light)}
.vh-hero :focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}

.vh-foot{position:absolute;right:4.5%;bottom:16px;display:flex;align-items:center;gap:18px;font-size:12px;color:#e6eef3}
.vh-foot p{margin:0}
#vh-toggle{min-height:44px;padding:0 14px;border:1px solid rgba(255,255,255,.6);background:rgba(8,25,41,.5);color:#fff;font:12px Arial,sans-serif;cursor:pointer}
#vh-toggle:hover{border-color:var(--gold-light);color:var(--gold-light)}

/* one calm arrival, then the video is the only thing moving */
@media (prefers-reduced-motion:no-preference){.vh-panel{animation:vh-in .8s cubic-bezier(.16,1,.3,1) both}}
@keyframes vh-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.vh-media video{transition:none}}

@media (max-width:1100px) and (min-width:821px){.vh-hero{height:clamp(640px,calc(100svh - 132px),780px)}
  /* The panel needs a little less air at this width so it stays inside the hero
     and does not push the portrait past the bottom edge. */
  .vh-panel{padding-bottom:16px}
  .vh-sub{margin:14px 0 18px}
  /* The caption and pause button sit in the bottom-right corner; the "Try:" row used to run
     underneath them at this width. Drop that row here, as the phone layout does. */
  .vh-try{display:none}}
@media (max-width:820px){
  /* Phone: Tenia comes first, flush with the top of the hero, and the whole portrait fits on the
     first screen. Her height is the smaller of her natural size (92vw wide, capped at 500px) and the
     screen left below the header (--vh-top, measured by hero-video.js); width follows her own ratio,
     so nothing is stretched or clipped. The copy and form follow below her. */
  .vh-hero{height:auto;min-height:0}
  .vh-scrim{background:linear-gradient(180deg,rgba(8,25,41,.78),rgba(8,25,41,.74) 38%,rgba(8,25,41,.5) 58%,rgba(8,25,41,.16) 78%,rgba(8,25,41,.5))}
  .vh-stage{height:auto;display:flex;flex-direction:column;padding:0}
  .vh-panel{order:2;align-self:stretch;width:100%;padding:24px 5%;max-width:none;background:var(--navy);animation:none}
  .vh-portrait{order:1;height:auto;margin-bottom:0;align-self:stretch;width:100%;min-height:0;overflow:hidden;justify-content:center;padding:0}
  .vh-portrait img{width:auto;height:min(calc(min(92vw,500px) * 1132 / 760),calc(100svh - var(--vh-top,0px)));max-width:none;object-fit:contain;object-position:center top}
  .vh-hero h1{font-size:clamp(36px,10.5vw,48px)}
  .vh-sub{display:none}
  .vh-card{margin-top:10px}
  .vh-ask-label{font-size:16px;margin-bottom:6px}
  .vh-card textarea{min-height:60px;font-size:16px}
  .vh-intent{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
  .vh-intent legend{display:none}
  .vh-intent label>span{width:100%;justify-content:center;padding:0 4px;font-size:14px}
  .vh-more{display:none}
  .vh-actions{margin-top:12px}.vh-go{width:100%}
  #vh-status{flex-basis:100%}
  .vh-try{display:none}
  /* The caption bar is solid navy, the same colour as the band under it, so the hero ends exactly
     where Tenia's photo ends. Before, the video showed in a strip below her and she looked cut
     off mid-body. */
  .vh-foot{position:relative;inset:auto;z-index:1;margin:0;padding:12px 5% 14px;background:var(--navy);justify-content:space-between;font-size:11px}
  .vh-foot p{max-width:15ch;line-height:1.35}
}

/* About bio block: set it apart from the intro paragraphs above it. */
.about .bio{margin-top:44px}
/* About portrait dimensional depth, studio framing & presence (append to static/hero-video.css) */
.about .portrait{position:relative;isolation:isolate;width:min(94%,430px);background:var(--mist);border-radius:2px;box-shadow:0 28px 60px -18px rgba(8,25,41,.36),0 12px 26px -10px rgba(8,25,41,.2),0 0 0 1px rgba(201,162,39,.32);transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
.about .portrait::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid rgba(201,162,39,.38);background:radial-gradient(circle at 35% 28%,rgba(201,162,39,.12),transparent 70%);z-index:-1;pointer-events:none;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.about .portrait img{width:100%;height:auto;object-fit:contain;display:block;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.about .portrait span{display:block;padding:16px 22px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;border-top:1px solid rgba(201,162,39,.26);background:linear-gradient(180deg,var(--mist),rgba(8,25,41,.03))}
[data-theme=navy] .about .portrait{box-shadow:0 34px 72px -16px rgba(2,9,18,.78),0 14px 30px -8px rgba(2,9,18,.54),0 0 0 1px rgba(226,199,127,.36)}
[data-theme=navy] .about .portrait::before{border-color:rgba(226,199,127,.34);background:radial-gradient(circle at 35% 28%,rgba(226,199,127,.16),transparent 72%)}
[data-theme=navy] .about .portrait span{border-top-color:rgba(226,199,127,.24);background:linear-gradient(180deg,rgba(25,54,78,.96),rgba(16,40,62,.98))}
@media (hover:hover) and (pointer:fine){
  .about .portrait:hover{transform:translateY(-5px);box-shadow:0 36px 74px -18px rgba(8,25,41,.44),0 16px 32px -10px rgba(8,25,41,.26),0 0 0 1px rgba(201,162,39,.52)}
  .about .portrait:hover::before{transform:translate(-3px,-3px)}
}
@media (max-width:700px){
  .about .portrait{width:min(94%,380px)}
  .about .portrait::before{inset:-10px 10px 10px -10px}
}