/* Home cover reel only; portfolio previews keep their own media and styling. */
.reel-mobile-controls,.reel-frame-controls { display:none; }
.reel-video:fullscreen { width:100%;height:100%;object-fit:contain;background:#000; }
.reel-hero { position: relative; isolation: isolate; height: 100svh; min-height: 620px; overflow: hidden; background: #141d1b; color: #fff; }
.reel-video, .reel-scrim { position: absolute; inset: 0; width: 100%; height: 100%; }
.reel-video { object-fit: cover; object-position: center; z-index: -2; }
.reel-scrim { z-index: -1; pointer-events: none; background: linear-gradient(90deg,rgba(3,14,10,.32),transparent 58%), linear-gradient(0deg,rgba(3,14,10,.28),transparent 30%); }
.reel-copy { position: absolute; left: clamp(32px,4.4vw,76px); bottom: clamp(40px,7vh,100px); right: 24px; max-width: 850px; }
.reel-copy .eyebrow { margin: 0 0 16px; color: #ffffffe0; font-size: 9px; }
.reel-copy h1 { margin: 0; font-family: PLManrope,Arial,sans-serif; font-size: clamp(40px,4.3vw,69px); line-height: .98; font-weight: 400; letter-spacing: -.065em; text-transform: uppercase; color: #fff; }
@media(min-width:701px) { .reel-title-offset { display: inline-block; margin-left: 1.2em; } }
.reel-copy .reel-intro { max-width: 470px; margin: 0; font-size: 16px; line-height: 1.7; color: #fff; text-wrap: pretty; }
.reel-about { display: inline-flex; align-items: center; gap: 34px; min-height: 44px; margin-top: 20px; padding-block: 8px; border-bottom: 1px solid #ffffff80; color: #fff; font-size: 13px; }
.reel-about span { font-size: 20px; }
.reel-about:hover { border-bottom-color: #fff; }
.reel-about:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.reel-bottom { position: absolute; left: clamp(24px,4.4vw,76px); right: clamp(24px,4.4vw,76px); bottom: 67px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.reel-controls { display: flex; flex-wrap: wrap; gap: 9px; }
.reel-bottom > .reel-next { margin-left: auto; }
.reel-contact { display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-height:52px;padding:8px 9px 8px 22px;border:1px solid #ffffffb3;border-radius:999px;background:#fffffff2;color:#202b24;font-size:14px;box-shadow:0 6px 24px #0002;transition:background .2s,transform .2s; }
.reel-contact span { display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#24372d;color:#fff;font-size:19px; }
.reel-contact:hover { background:#fff;transform:translateY(-2px); }
.reel-contact:focus-visible { outline:2px solid #fff;outline-offset:5px; }
@media(max-width:768px) {
  .reel-hero .reel-bottom { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 10px; }
  .reel-hero .reel-contact { grid-column:1 / -1;justify-self:start;font-size:14px; }
  .reel-hero .reel-bottom > .reel-next { margin-left:0;justify-self:end;gap:10px; }
}
/* Desktop stays clean while autoplay runs, but a still cover always offers play.
   Hovering or focusing the lower actions also exposes pause without a permanent overlay. */
@media(min-width:769px) {
  .reel-hero[data-playback="paused"] .reel-mobile-controls,
  .reel-hero .reel-bottom:hover .reel-mobile-controls,
  .reel-hero .reel-bottom:focus-within .reel-mobile-controls,
  .reel-hero .reel-mobile-controls:focus-within { display:flex;align-items:center;gap:8px;margin-left:auto; }
  .reel-mobile-controls button { display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:44px;min-height:44px;padding:10px 16px;border:1px solid #ffffff80;border-radius:999px;background:#14221dcc;color:#fff;font-size:12px;line-height:1.5;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
  .reel-mobile-controls button[hidden] { display:none; }
  .reel-mobile-controls button:focus-visible { outline:2px solid #fff;outline-offset:4px; }
}
@media(prefers-reduced-motion:reduce) { .reel-contact { transition:none; }.reel-contact:hover { transform:none; } }
.reel-controls button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 44px; padding: 10px 16px; border: 1px solid #ffffff59; border-radius: 999px; background: #ffffff1c; color: #fff; font-size: 10px; box-shadow: 0 5px 16px #00000012; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.reel-controls button:hover:not(:disabled) { background: #ffffff38; }
.reel-controls button:disabled { opacity: .5; cursor: not-allowed; }
.reel-controls button:focus-visible, .reel-next:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.reel-next { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; font-size: 11px; }
.reel-next span { font-size: 20px; }
.reel-reference { position: absolute; left: clamp(24px,4.4vw,76px); bottom: 24px; margin: 0; color: #ffffffc7; font: 400 8px/1.7 'IBM Plex Mono',monospace; letter-spacing: .03em; }
.reel-fallback { position: absolute; top: 45%; left: 50%; transform: translate(-50%,-50%); width: min(400px,calc(100% - 48px)); margin: 0; padding: 19px 22px; background: #12201be8; border: 1px solid #ffffff40; border-radius: 10px; color: #fff; font-size: 12px; line-height: 1.8; text-align: center; }
.reel-fallback[hidden] { display: none; }

/* One glass capsule, simple text links; no separate pills inside the navigation. */
#home-header { background: transparent; color: #fff; }
#home-header .brand span { border-left-color: #ffffff66; color: #fff; }
#home-header nav { background: #111e1866; border: 1px solid #ffffff4d; box-shadow: 0 5px 16px #00000012; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#home-header nav a, #home-header nav a:hover, #home-header nav a:focus-visible { border: 0; background: transparent; background-image: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; }
#home-header nav a { min-height: 44px; display: inline-flex; align-items: center; }
#home-header nav a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #ffffff94; }
#home-header nav a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

@media(max-width:700px) {
  #home-header { height: auto; gap: 20px; padding: 24px; }
  #home-header nav { padding: 4px; gap: 0; width: 100%; border-radius: 999px; }
  #home-header nav a { justify-content: center; min-height: 40px; padding: 7px 7px; font-size: 9px; }
  .reel-hero { min-height: 740px; }
  .reel-copy { bottom: 157px; }
  .reel-copy h1 { font-size: clamp(38px,9vw,49px); }
  .reel-copy .eyebrow { font-size: 8px; }
  .reel-copy .reel-intro { font-size: 14px; line-height: 1.75; }
  .reel-about { margin-top: 16px; }
  .reel-bottom { bottom: 68px; flex-wrap: wrap; align-items: start; gap: 11px; }
  .reel-controls button { font-size: 9px; padding-inline: 13px; gap: 12px; }
  .reel-next { gap: 15px; font-size: 10px; }
  .reel-reference { max-width: calc(100% - 48px); font-size: 7px; bottom: 21px; }
}
@media(max-width:380px) { .reel-hero { min-height: 760px; } }
/* The vertical cover follows the real screen height, including short phones. */
.reel-hero[data-reel-format="vertical"] { height:100svh;min-height:0; }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { #home-header nav { background: #15221bea; }.reel-controls button { background: #26362eee; } }