:root{
  /* Primary color system */
  --color--canvas:#4d2d63;
  --color--stage:#14081e;
  --color--shell:#221032;
  --color--line:#f6ecff;
  --color--copy:#ebdeff;
  --color--anchor:#7a8fa7;
  --color--brand:#2ea5ff;
  --color--brand-deep:#1479cf;
  --color--harbor:#53336f;
  --color--feature:#c48dff;
  --color--signal:#c8a2ff;
  --color--ember:#3a194f;

  /* Shared tones generated from the active scheme */
  --tone--copy-98:rgba(241,243,246,.98);
  --tone--copy-96:rgba(241,243,246,.96);
  --tone--copy-95:rgba(241,243,246,.95);
  --tone--copy-92:rgba(241,243,246,.92);
  --tone--copy-90:rgba(241,243,246,.90);
  --tone--copy-88:rgba(241,243,246,.88);
  --tone--copy-84:rgba(241,243,246,.84);
  --tone--copy-82:rgba(241,243,246,.82);
  --tone--copy-78:rgba(241,243,246,.78);
  --tone--copy-72:rgba(241,243,246,.72);
  --tone--copy-60:rgba(241,243,246,.60);
  --tone--line-88:rgba(255,255,255,.88);
  --tone--line-42:rgba(255,255,255,.42);
  --tone--line-32:rgba(255,255,255,.32);
  --tone--line-24:rgba(255,255,255,.24);
  --tone--line-22:rgba(255,255,255,.22);
  --tone--line-20:rgba(255,255,255,.20);
  --tone--line-18:rgba(255,255,255,.18);
  --tone--line-14:rgba(255,255,255,.14);
  --tone--line-12:rgba(255,255,255,.12);
  --tone--line-03:rgba(255,255,255,.03);
  --tone--line-025:rgba(255,255,255,.025);
  --tone--stage-86:rgba(0,0,0,.86);
  --tone--stage-78:rgba(0,0,0,.78);
  --tone--stage-75:rgba(0,0,0,.75);
  --tone--stage-65:rgba(0,0,0,.65);
  --tone--stage-62:rgba(0,0,0,.62);
  --tone--stage-55:rgba(0,0,0,.55);
  --tone--stage-52:rgba(0,0,0,.52);
  --tone--stage-46:rgba(0,0,0,.46);
  --tone--stage-45:rgba(0,0,0,.45);
  --tone--stage-42:rgba(0,0,0,.42);
  --tone--stage-35:rgba(0,0,0,.35);
  --tone--stage-32:rgba(0,0,0,.32);
  --tone--stage-30:rgba(0,0,0,.30);
  --tone--stage-28:rgba(0,0,0,.28);
  --tone--stage-24:rgba(0,0,0,.24);
  --tone--stage-18:rgba(0,0,0,.18);
  --tone--stage-10:rgba(0,0,0,.10);
  --tone--stage-0:rgba(0,0,0,0);
  --tone--brand-92:rgba(46,165,255,.92);
  --tone--brand-88:rgba(46,165,255,.88);
  --tone--brand-55:rgba(46,165,255,.55);
  --tone--brand-30:rgba(46,165,255,.30);
  --tone--brand-24:rgba(46,165,255,.24);
  --tone--brand-10:rgba(46,165,255,.10);
  --tone--brand-08:rgba(46,165,255,.08);
  --tone--shell-96:rgba(6,9,16,.96);
  --tone--shell-95:rgba(6,9,16,.95);
  --tone--shell-94:rgba(6,9,16,.94);
  --tone--shell-92:rgba(6,9,16,.92);
  --tone--shell-88:rgba(6,9,16,.88);
  --tone--shell-82:rgba(6,9,16,.82);
  --tone--shell-74:rgba(6,9,16,.74);
  --tone--shell-66:rgba(6,9,16,.66);
  --tone--shell-60:rgba(6,9,16,.60);
  --tone--shell-56:rgba(6,9,16,.56);
  --tone--shell-45:rgba(6,9,16,.45);
  --tone--shell-42:rgba(6,9,16,.42);
  --tone--shell-26:rgba(6,9,16,.26);

  /* Shared surfaces */
  --surface--page-glow-major:radial-gradient(1200px 700px at 55% 45%, var(--tone--brand-10), rgba(0,0,0,0) 55%);
  --surface--page-glow-minor:radial-gradient(900px 520px at 20% 35%, var(--tone--brand-08), rgba(0,0,0,0) 52%);
  --surface--accent-video:var(--color--canvas);
  --surface--accent-photo:var(--color--feature);
  --surface--accent-about:var(--color--harbor);
  --surface--accent-stream:var(--color--ember);
  --surface--video-stage:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-video) 66%, var(--color--stage) 34%) 0%, color-mix(in srgb, var(--surface--accent-video) 46%, var(--color--stage) 54%) 100%);
  --surface--video-frame:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-video) 52%, transparent), color-mix(in srgb, var(--surface--accent-video) 28%, var(--color--stage) 72%));
  --surface--video-sheen:linear-gradient(90deg, color-mix(in srgb, var(--surface--accent-video) 16%, transparent) 0%, color-mix(in srgb, var(--color--stage) 12%, transparent) 32%, color-mix(in srgb, var(--color--stage) 12%, transparent) 68%, color-mix(in srgb, var(--surface--accent-video) 16%, transparent) 100%), linear-gradient(180deg, var(--tone--line-025), color-mix(in srgb, var(--color--line) 1%, transparent));
  --surface--video-player-bg:linear-gradient(180deg, rgba(3,7,12,.96), rgba(4,8,14,.94));
  --surface--media-frame:linear-gradient(180deg, color-mix(in srgb, var(--color--shell) 40%, var(--color--stage) 60%), color-mix(in srgb, var(--color--stage) 80%, var(--color--ember) 20%));
  --surface--media-pane:linear-gradient(180deg, var(--tone--shell-96), var(--tone--shell-94));
  --surface--photo-stage:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-photo) 66%, var(--color--stage) 34%) 0%, color-mix(in srgb, var(--surface--accent-photo) 46%, var(--color--stage) 54%) 100%);
  --surface--photo-frame:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-photo) 52%, transparent), color-mix(in srgb, var(--surface--accent-photo) 28%, var(--color--stage) 72%));
  --surface--photo-sheen:linear-gradient(90deg, color-mix(in srgb, var(--surface--accent-photo) 16%, transparent) 0%, color-mix(in srgb, var(--color--stage) 12%, transparent) 32%, color-mix(in srgb, var(--color--stage) 12%, transparent) 68%, color-mix(in srgb, var(--surface--accent-photo) 16%, transparent) 100%), linear-gradient(180deg, var(--tone--line-025), color-mix(in srgb, var(--color--line) 1%, transparent));
  --surface--photo-gallery:var(--tone--shell-92);
  --surface--photo-void:var(--color--stage);
  --surface--stream-stage:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-stream) 68%, var(--color--stage) 32%) 0%, color-mix(in srgb, var(--surface--accent-stream) 48%, var(--color--stage) 52%) 100%);
  --surface--stream-frame:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-stream) 54%, transparent), color-mix(in srgb, var(--surface--accent-stream) 30%, var(--color--stage) 70%));
  --surface--stream-sheen:linear-gradient(90deg, color-mix(in srgb, var(--surface--accent-stream) 16%, transparent) 0%, color-mix(in srgb, var(--color--stage) 12%, transparent) 32%, color-mix(in srgb, var(--color--stage) 12%, transparent) 68%, color-mix(in srgb, var(--surface--accent-stream) 16%, transparent) 100%), linear-gradient(180deg, var(--tone--line-025), color-mix(in srgb, var(--color--line) 1%, transparent));
  --surface--stream-overview:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-stream) 58%, transparent), color-mix(in srgb, var(--surface--accent-stream) 42%, var(--color--stage) 58%));
  --surface--stream-inner:var(--surface--media-frame);
  --surface--stream-placeholder:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-stream) 62%, transparent), color-mix(in srgb, var(--surface--accent-stream) 48%, var(--color--stage) 52%));
  --surface--about-stage:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-about) 68%, var(--color--stage) 32%) 0%, color-mix(in srgb, var(--surface--accent-about) 48%, var(--color--stage) 52%) 100%);
  --surface--about-frame:linear-gradient(180deg, color-mix(in srgb, var(--surface--accent-about) 54%, transparent), color-mix(in srgb, var(--surface--accent-about) 30%, var(--color--stage) 70%));
  --surface--about-inner:var(--tone--shell-92);
  /* Universal role names for matching section elements across pages. */
  --surface--scheme-stage:linear-gradient(180deg, color-mix(in srgb, var(--color--harbor) 68%, var(--color--stage) 32%) 0%, color-mix(in srgb, var(--color--harbor) 48%, var(--color--stage) 52%) 100%);
  --surface--scheme-stage-flat:color-mix(in srgb, var(--color--harbor) 58%, var(--color--stage) 42%);
  --surface--scheme-frame:linear-gradient(180deg, color-mix(in srgb, var(--color--harbor) 54%, transparent), color-mix(in srgb, var(--color--harbor) 30%, var(--color--stage) 70%));
  --surface--scheme-sheen:linear-gradient(90deg, color-mix(in srgb, var(--color--harbor) 16%, transparent) 0%, color-mix(in srgb, var(--color--stage) 12%, transparent) 32%, color-mix(in srgb, var(--color--stage) 12%, transparent) 68%, color-mix(in srgb, var(--color--harbor) 16%, transparent) 100%), linear-gradient(180deg, var(--tone--line-025), color-mix(in srgb, var(--color--line) 1%, transparent));
  --surface--scheme-pane:var(--tone--shell-92);
  --surface--control-quiet:var(--tone--line-14);
  --surface--control-quiet-hover:var(--tone--line-20);
  --surface--control-strong:var(--tone--stage-62);
  --surface--control-strong-hover:var(--tone--stage-78);
  --surface--panel-border:var(--tone--line-18);
  --surface--panel-border-strong:var(--tone--line-24);
  --surface--signal-quiet:var(--tone--brand-24);
  --surface--signal-strong:var(--tone--brand-92);

  --page-bg:var(--color--canvas);
  --bg:var(--page-bg);
  --menu-bar-bg:rgba(77,45,99,.92);
  --page-bg-image:none;
  --index-bg-image:image-set(url("../images/Home/summer-meadow.webp") type("image/webp"), url("../images/Home/summer-meadow.png") type("image/png"));
  --all-other-frame-image:linear-gradient(#4d2d63, #4d2d63);
  --text: var(--color--copy);
  --muted: var(--tone--copy-72);
  --accent:#2ea5ff;
  --brand-accent:#1479cf;
  --wordmark-thunder:#f1f3f6;
  --wordmark-hollow:#2ea5ff;
  --wordmark-studio:#7a8fa7;
  --photos:var(--color--feature);
  --contact:var(--color--signal);
  --shadow: 0 30px 90px var(--tone--stage-55);
  --radius: 22px;
  --navH: 80px;
  --ths-nav-hide-offset: 0px;
}

/*
  Non-default schemes should keep matching element roles (stage/frame/sheen/pane)
  visually consistent across all pages and indexone sections.
*/
html[data-color-scheme]:not([data-color-scheme="default"]){
  --surface--video-stage:var(--surface--scheme-stage);
  --surface--photo-stage:var(--surface--scheme-stage);
  --surface--stream-stage:var(--surface--scheme-stage);
  --surface--about-stage:var(--surface--scheme-stage);

  --surface--video-frame:var(--surface--scheme-frame);
  --surface--photo-frame:var(--surface--scheme-frame);
  --surface--stream-frame:var(--surface--scheme-frame);
  --surface--about-frame:var(--surface--scheme-frame);

  --surface--video-sheen:var(--surface--scheme-sheen);
  --surface--photo-sheen:var(--surface--scheme-sheen);
  --surface--stream-sheen:var(--surface--scheme-sheen);

  --surface--stream-overview:var(--surface--scheme-frame);
  --surface--stream-placeholder:var(--surface--scheme-pane);
  --surface--about-inner:var(--surface--scheme-pane);
}

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

a, a:visited, a:hover, a:active, a:focus{
  text-decoration: none !important;
  color: inherit;
}
a:focus-visible{
  outline: 2px solid var(--tone--brand-55);
  outline-offset: 3px;
  border-radius: 10px;
}

body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--page-bg-image) center / cover no-repeat fixed,
              var(--surface--page-glow-major),
              var(--surface--page-glow-minor),
              var(--bg);
  color: var(--text);
  overflow-x:hidden;
}

body.indexPage{
  background: var(--surface--page-glow-major),
              var(--surface--page-glow-minor),
              var(--bg);
}

html.is-embed-mode,
body.embed-mode{
  background: transparent !important;
}

body.embed-mode{
  overflow-x:hidden;
}

body.embed-mode header{
  display:none !important;
}

body.embed-mode main{
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}

body.embed-mode .card{
  margin-top:0 !important;
}

body.embed-mode .frameBottomCopyright,
body.embed-mode .videos2Copyright,
body.embed-mode .photosCopyright,
body.embed-mode .simpleCopyright,
body.embed-mode .aboutCopyright{
  display:none !important;
}

body.modal-open{
  overflow:hidden;
}

body.modal-open header,
body.modal-open .nav.has-menu-toggle > nav{
  z-index:40 !important;
}

/* ===== NAV ===== */
header{
  position:fixed;
  inset:0 0 auto 0;
  height: var(--navH);
  z-index:120;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 22px;
  background: var(--menu-bar-bg);
  backdrop-filter: blur(8px);
}

body:not(.toolsPage) header{
  background:rgba(77,45,99,.92);
}

.nav{
  width:100%;
  max-width:none;
  display:grid;
  grid-template-columns:auto 1fr auto;
  height:100%;
  min-height:100%;
  align-items:center;
  gap:18px;
}

.nav::after{
  display:none;
}

.brand{
  display:flex;
  align-items:center;
  justify-self:start;
  justify-content:flex-start;
  gap:clamp(8px, 1.1vw, 14px);
  min-width:0;
  text-decoration:none;
  color:var(--text);
}

.brandLogo{
  width:clamp(34px, 2.5vw, 44px);
  height:clamp(34px, 2.5vw, 44px);
  object-fit:contain;
  display:block;
  flex:0 0 auto;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.45));
}

.brandText{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  align-items:center;
  width:max-content;
  max-width:100%;
}
.brandText .title{
  display:inline-block;
  align-self:center;
  width:auto;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--wordmark-thunder);
  font-size: clamp(12px, 1.2vw, 16px);
  white-space: nowrap;
}
.brand .brandText .title{
  position:relative;
  display:inline-block;
  padding-bottom:5px;
  margin-bottom:2px;
}
.brand .brandText .title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    rgba(42,163,255,0) 0%,
    rgba(42,163,255,.85) 20%,
    rgba(42,163,255,.95) 50%,
    rgba(42,163,255,.85) 80%,
    rgba(42,163,255,0) 100%
  );
  pointer-events:none;
}
.brandText .title .accent{
  color: var(--wordmark-hollow);
}
.brandText .title .strong{
  color: var(--wordmark-studio);
}
.brandText .tagline{
  align-self:center;
  width:auto;
  font-size:clamp(10px, .9vw, 12px);
  color: var(--muted);
  text-align:center;
  white-space: nowrap;
}

@media (max-height:820px){
  :root{
    --navH:72px;
  }

  body.indexPage header{
    height:var(--navH);
    min-height:var(--navH);
    max-height:var(--navH);
    overflow:visible;
  }

  body.indexPage .brand{
    gap:8px;
  }

  body.indexPage .brandLogo{
    width:34px;
    height:34px;
  }

  body.indexPage .brandText .title{
    font-size:12.5px;
  }

  body.indexPage .brandText .tagline{
    font-size:10px;
  }

  body.indexPage nav a{
    padding:8px 10px;
    font-size:13px;
  }
}

nav{
  grid-column:2;
  height:100%;
  display:flex;
  align-items:center;
  justify-self:center;
}

nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  height:100%;
  align-items:center;
  justify-content:center;
  gap:14px;
}

nav a{
  color: rgba(255,255,255,.86);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  font-weight:600;
  font-size:14px;
  padding:10px 12px;
  border-radius:999px;
  transition:.18s ease;
  border: 1px solid transparent;
}
nav a:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

nav a.is-current{
  font-weight:800;
  color:rgba(255,255,255,.98);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
}

nav ul .navContactItem{
  display:none;
}

.navContactDock{
  grid-column:3;
  justify-self:end;
  color:#f4fbff;
  text-decoration:none;
  font-weight:700;
  font-size:0;
  width:42px;
  height:42px;
  padding:0;
  border-radius:12px;
  transition:.18s ease;
  border:1px solid rgba(255,255,255,.26);
  background:transparent !important;
  background-image:none !important;
  display:inline-grid;
  place-items:center;
  box-shadow:none !important;
}

.navContactDock:hover{
  background:transparent !important;
  border-color:rgba(255,255,255,.4);
  box-shadow:none !important;
}

.navContactDock::before{
  content:"";
  width:20px;
  height:20px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4fbff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5h16a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H9l-4.5 3v-3H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2z'/%3E%3Cpath d='M7.5 11.5h9'/%3E%3Cpath d='M7.5 14.5h6'/%3E%3C/svg%3E");
}

.single2FooterMain{
  min-height:132px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 16px 8px;
}

@media (max-width:900px){
  .single2FooterMain{
    min-height:120px;
  }
}

@media (max-width:640px){
  .single2FooterMain{
    min-height:108px;
  }
}

.single2Footer{
  width:min(980px, 92%);
  margin:0 auto 0;
  min-height:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  color:rgba(255,255,255,.96);
  text-align:center;
}

.single2FooterSocial{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.single2FooterIcon{
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(0,0,0,.16);
  color:rgba(255,255,255,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 38px;
  line-height:0;
  text-decoration:none;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.single2FooterIcon:hover{
  background:rgba(0,0,0,.3);
  border-color:rgba(255,255,255,.62);
  transform:translateY(-1px);
}

.single2FooterIcon svg{
  width:20px;
  height:20px;
  display:block;
  margin:0;
  fill:currentColor;
}

.single2FooterMenu{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  align-content:flex-end;
  justify-content:center;
  gap:8px 20px;
  min-height:calc(1.15em * 2);
  margin-top:auto;
}

.single2FooterMenu a{
  color:rgba(255,255,255,.95);
  text-decoration:none;
  font-weight:500;
  font-size:clamp(16px, 1vw, 22px);
  line-height:1.15;
  letter-spacing:.01em;
}

.single2FooterMenu a:hover{
  text-decoration:underline;
  text-underline-offset:4px;
}

.single2FooterCopyright{
  margin:0;
  font-size:clamp(14px, .85vw, 17px);
  line-height:1.2;
  letter-spacing:.01em;
  color:rgba(255,255,255,.92);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:6px 14px;
}

.single2FooterPrivacy{
  color:rgba(255,255,255,.92);
  text-decoration:underline;
  text-underline-offset:4px;
}

.single2FooterPrivacy:hover{
  color:#ffffff;
}

/* Match footer menu visibility to hamburger-mode layouts across the site. */
@media (max-width:1180px){
  .single2FooterMenu{
    display:none !important;
  }
}

.navToggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  width:42px;
  height:42px;
  padding:0;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.26);
  background:rgba(8,12,20,.72);
  cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}

.navToggle:hover,
.navToggle:focus-visible{
  background:rgba(14,22,34,.9);
  border-color:rgba(255,255,255,.45);
}

.navToggleBar{
  width:18px;
  height:2px;
  border-radius:999px;
  background:rgba(255,255,255,.95);
  transition:transform .18s ease, opacity .18s ease;
}

.nav.nav-menu-open .navToggleBar:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}

.nav.nav-menu-open .navToggleBar:nth-child(2){
  opacity:0;
}

.nav.nav-menu-open .navToggleBar:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* ===== MAIN ===== */
main{
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding: var(--navH) 0 22px;
}

.card{
  width:100%;
  max-width:none;
  margin-top:0;
  border-radius:0;
  position:relative;
  overflow:hidden;
  padding:34px;
  box-shadow:var(--shadow);
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--all-other-frame-image, linear-gradient(#000000, #000000)) right center / cover no-repeat;
  z-index:0;
  background-attachment: scroll;
}

.card::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(75% 75% at 12% 50%, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 40%, rgba(0,0,0,0) 70%),
    linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,0) 58%);
  z-index:2;
  pointer-events:none;
}

.card::before,
.card::after{
  transition: background-position .45s ease, opacity .35s ease;
}

/* Keep diffusion overlays only on the Default color scheme. */
html[data-color-scheme]:not([data-color-scheme="default"]) body .card::after,
html[data-color-scheme]:not([data-color-scheme="default"]) body .videos2Frame::after,
html[data-color-scheme]:not([data-color-scheme="default"]) body .photosFrame::after,
html[data-color-scheme]:not([data-color-scheme="default"]) body .simpleFrame::after,
html[data-color-scheme]:not([data-color-scheme="default"]) body .aboutFrame::after{
  background:none !important;
}

.grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:26px;
  align-items:stretch;
  min-height: clamp(476px, calc((100vh - var(--navH) - 112px) * 0.85), 646px);
}

.heroCopy{
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.heroSide{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  min-height:100%;
  padding:0 0 129px 0;
}

.creditOverlay{
  position:relative;
  max-width:min(34ch, 100%);
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(180deg, rgba(7,10,16,.18), rgba(7,10,16,.28));
  text-align:left;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
  transform:translate(-17px, 35px);
  animation:creditFade 15s ease-in-out infinite;
}

@keyframes creditFade{
  0%, 46.67%{ opacity:1; }
  60%, 86.67%{ opacity:0; }
  100%{ opacity:1; }
}

.creditOverlay span{
  display:block;
}

.creditOverlay span:first-child{
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
}

.creditOverlay span:last-child{
  margin-top:4px;
  font-size:30px;
  line-height:1.1;
  font-weight:900;
  letter-spacing:-.4px;
  color:rgba(255,255,255,.98);
  text-align:left;
  width:100%;
}

.creditBio{
  margin:12px 0 0;
  font-size:12.5px;
  line-height:1.5;
  font-weight:500;
  letter-spacing:.01em;
  color:rgba(255,255,255,.9);
  text-align:left;
}

.creditBio + .creditBio{
  margin-top:10px;
}

.clientLogoRow{
  width:100%;
  margin-top:16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:rgba(255,255,255,.92);
  text-shadow:0 2px 10px rgba(0,0,0,.55);
}

.clientLogo{
  display:block;
  height:44px;
  width:auto;
  max-height:none;
  max-width:none;
  flex-shrink:0;
  object-fit:contain;
  opacity:.95;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}

.clientLogo.crohns{
  height:46px;
}

.clientLogo.takeda{
  height:40px;
}

.clientLogo.lilly{
  height:40px;
}


.copyright{
  margin-top:auto;
  padding-top:18px;
  font-size:12px;
  font-weight:400;
  letter-spacing:.03em;
  color:rgba(255,255,255,.82);
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:0;
  padding:10px 16px;
  border-radius:999px;
  background: rgba(29,161,255,.10);
  border:1px solid rgba(29,161,255,.35);
  font-size:14px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:18px;
}
.pill .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent);
}

#heroCard{
  --logo-pill-offset:90px;
  --hero-content-shift-x:130px;
  --hero-content-scale:0.935;
  --index-bg-size:var(--theme-index-bg-size, cover);
  --index-bg-video-fit:var(--theme-index-bg-video-fit, cover);
  --index-bg-position-x:var(--theme-index-bg-position-x, 100%);
  --index-bg-position-y:var(--theme-index-bg-position-y, 50%);
  --index-bg-video-position:var(--theme-index-bg-video-position, right center);
  padding-top:24px;
  padding-bottom:44px;
}

#heroCard::before{
  background-image: var(--index-bg-image, url("../images/Home/summer-meadow.webp"));
  background-position:right center;
  background-repeat:no-repeat;
  background-size:var(--index-bg-size, cover);
}

#heroCard .heroNarrowShade{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,1);
  opacity:0;
  z-index:3;
  pointer-events:none;
  transition:opacity .35s ease;
}

#heroCard .heroBackgroundVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:var(--index-bg-video-fit, cover);
  object-position:var(--index-bg-video-position, right center);
  display:block;
  border:0;
  margin:0;
  padding:0;
  background:transparent;
  opacity:0;
  z-index:1;
  pointer-events:none;
  transition:opacity .35s ease;
}

#heroCard.hero-hide-background::before{
  background-image:none !important;
}

#heroCard.hero-hide-background .heroBackgroundVideo{
  opacity:0 !important;
}

:root[data-index-bg-fit="height"]{
  --theme-index-bg-size:auto 100%;
  --theme-index-bg-video-fit:contain;
  --theme-index-bg-position-y:0%;
  --theme-index-bg-video-position:right top;
}

#heroCard .heroBackgroundVideo.is-active{
  opacity:0;
}

#heroCard .heroBackgroundVideo.is-active.is-ready{
  opacity:1;
}

#heroCard .grid{
  z-index:4;
  grid-template-columns:1.1fr .9fr;
}

#heroCard .heroCopy h1{
  margin:0 0 14px;
  text-align:center;
  transform:translateX(calc(var(--hero-content-shift-x) + var(--hero-title-shift-x, 0px))) scale(var(--hero-content-scale));
  transform-origin:center top;
}

#heroCard .meta{
  justify-content:center;
  transform:translate(calc(var(--hero-content-shift-x) + var(--hero-title-shift-x, 0px) + var(--hero-meta-shift-x, 0px)), 0px) scale(var(--hero-content-scale));
  transform-origin:center top;
}

#heroCard .ctaStack{
  align-items:center;
  margin-inline:auto;
  transform:translate(var(--hero-content-shift-x), 5px);
}

#heroCard .ctaRow{
  justify-content:center;
}

#heroCard .miniCarousel{
  margin-top:12px;
  margin-inline:auto;
  width:min(var(--hero-title-width, 538px), 100%);
}

#heroCard .miniCarouselNote{
  /* Keep aria-live updates available for assistive tech, but do not render below the carousel. */
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0, 0, 0, 0) !important;
  white-space:nowrap !important;
  border:0 !important;
}


#heroCard .heroSide{
  align-items:flex-start;
  justify-content:flex-end;
  padding:0;
}

#heroCard .creditOverlay.indexBio{
  position:absolute;
  right:calc(clamp(54px, 8vw, 140px) + 40px);
  bottom:clamp(58px, 10vh, 120px);
  transform:none;
  animation:none;
  opacity:1;
  text-align:center;
  max-width:min(420px, 42vw);
  z-index:4;
  pointer-events:none;
}

body.indexPage #heroCard .creditOverlay.indexBio{
  bottom:calc(clamp(58px, 10vh, 120px) + 100px);
}

#heroCard .creditOverlay.indexBio span:last-child{
  text-align:center;
  font-size:26px;
}

#heroCard .frameBottomWrap{
  position:absolute;
  left:var(--logo-pill-wrap-left, 0px);
  right:var(--logo-pill-wrap-right, 0px);
  width:var(--logo-pill-wrap-width, auto);
  top:var(--logo-pill-wrap-top, auto);
  bottom:var(--logo-pill-wrap-bottom, var(--logo-pill-bottom, 4px));
  transform:var(--logo-pill-wrap-transform, none);
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

#heroCard .frameBottomPill{
  width:var(--logo-pill-width, calc((100% - 24px) * 0.9));
  margin:var(--logo-pill-margin, 0 auto);
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:68px;
  min-height:68px;
  max-height:68px;
  margin-top:auto;
  margin-bottom:0;
  padding:8px 12px;
  overflow:hidden;
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  transform:none;
}

#heroCard .logoMarquee{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  border-radius:999px;
  clip-path:inset(0 round 999px);
}

#heroCard .logoMarqueeTrack{
  --logo-marquee-distance:0px;
  --logo-marquee-duration:46s;
  display:flex;
  height:100%;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:max-content;
  min-width:100%;
  animation:logoMarqueeScroll var(--logo-marquee-duration) linear infinite;
  will-change:transform;
}

#heroCard .logoMarqueeTrack.is-paused{
  animation-play-state:paused;
}

@keyframes logoMarqueeScroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-1 * var(--logo-marquee-distance))); }
}

#heroCard .frameBottomCopyright{
  margin-top:8px;
  width:calc((100% - 24px) * 0.9);
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  font-size:13px;
  font-weight:400;
  letter-spacing:.02em;
  color:rgba(255,255,255,.96);
  text-shadow:0 2px 10px rgba(0,0,0,.75);
}

@media (min-width:1201px){
  body.indexPage #heroCard{
    --hero-content-shift-x:230px;
    --hero-content-scale:1;
  }

  body.indexPage #heroCard .grid{
    min-height:clamp(560px, calc(100vh - var(--navH) - 52px), 760px);
  }

  body.indexPage #heroCard .heroCopy h1{
    font-size:clamp(56px, 4.35vw, 76px);
    line-height:0.98;
    letter-spacing:-1px;
  }

  body.indexPage #heroCard .meta{
    margin:0 auto 10px;
    padding:0;
    border:0;
    font-size:clamp(14px, 1.02vw, 18px);
  }

  body.indexPage #heroCard .ctaStack{
    margin-top:2px;
  }

  body.indexPage #heroCard .miniCarousel{
    width:min(var(--hero-title-width, 700px), 100%);
  }
}

@media (max-width:1180px){
  body.indexPage #heroCard{
    --hero-content-shift-x:0px;
    --hero-content-scale:1;
  }

  body.indexPage #heroCard .heroCopy h1,
  body.indexPage #heroCard .meta,
  body.indexPage #heroCard .ctaStack{
    transform:none;
  }

  body.indexPage #heroCard .meta{
    display:none !important;
    margin:0 !important;
  }
}

h1{
  margin:0 auto 14px;
  font-size:clamp(36px,4.8vw,62px);
  line-height:1.03;
  font-weight:900;
  letter-spacing: -.7px;
  text-align:center;
  white-space:nowrap;
  color:var(--wordmark-thunder);
}
.heroAccent{ color:var(--wordmark-hollow); }
.heroStudio{ color:var(--wordmark-studio) !important; }
#heroCard .heroCopy h1 .heroStudio{ color:var(--wordmark-studio) !important; }
.subhead{
  margin:0 0 18px;
  max-width:min(var(--hero-title-width, 60ch), 100%);
  color:rgba(255,255,255,.75);
  font-size:16px;
  line-height:1.6;
}

.meta{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  justify-content:center;
  font-weight:400;
  font-size:clamp(10px, .9vw, 12px);
  margin-bottom:18px;
  color:var(--muted);
  line-height:1.05;
}
.meta span{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}
.meta span + span::before{
  content:"•";
  margin:0 .45em;
  color:var(--muted);
}

.ctaStack{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:fit-content;
  max-width:100%;
  margin-inline:auto;
}

.ctaRow{
  display:flex;
  gap:14px;
  flex-wrap:nowrap;
  justify-content:center;
  width:max-content;
}

.miniCarousel{
  position:relative;
  width:min(var(--hero-title-width, 538px), 100%);
  aspect-ratio:16 / 9;
  height:auto;
  margin-top:12px;
  margin-inline:auto;
}

.miniCarouselViewport{
  height:100%;
  overflow:hidden;
  border-radius:16px;
  border:2px solid #fff;
  background:#060910;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.miniCarouselOverlay{
  position:absolute;
  left:50%;
  top:10px;
  bottom:auto;
  transform:translateX(-50%);
  z-index:4;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:min(calc(100% - 24px), 96%);
  padding:0 6px;
  border:none;
  border-radius:0;
  background:transparent;
  text-align:center;
  font-size:clamp(11px, 1.05vw, 15px);
  line-height:1.25;
  color:rgba(255,255,255,.96);
  pointer-events:none;
  text-shadow:0 2px 10px rgba(0,0,0,.85);
}

.miniCarouselOverlayTitle{
  display:block;
  max-width:100%;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.miniCarouselOverlayHint{
  display:block;
  width:100%;
  text-align:center;
  font-weight:400;
}

@media (max-width:780px){
  .miniCarouselOverlay{
    top:8px;
    bottom:auto;
    font-size:clamp(10px, 2.5vw, 12px);
    line-height:1.2;
  }
}

.miniCarouselTrack{
  display:flex;
  height:100%;
  transition: transform .525s ease;
  will-change: transform;
}

.miniSlide{
  min-width:100%;
  height:100%;
  overflow:hidden;
  background:#060910;
}

.miniSlideImage{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.miniSlideVideo{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#060910;
}

.miniSlideVideoFrame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  position:relative;
  z-index:1;
}

.miniSlideVideoElement{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  position:relative;
  z-index:1;
}

.miniSlideVideoFallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  opacity:1;
  transition:opacity .24s ease;
  pointer-events:none;
}

/* Home hero: crop embedded letterbox bars inside some 16:9 source frames. */
#heroCard .miniSlideImage,
#heroCard .miniSlideVideoElement,
#heroCard .miniSlideVideoFallback{
  transform:scale(1.24);
  transform-origin:center center;
}

.miniSlideVideoFallback.is-hidden{
  opacity:0;
}

.carouselControl{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:26px;
  height:26px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  z-index:8;
  display:grid;
  place-items:center;
  font-size:18px;
  line-height:1;
  color:rgba(255,255,255,.95);
  background:rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.28);
  transition:background .18s ease;
}

.carouselControl:hover{
  background:rgba(0,0,0,.5);
}

.carouselControl.prev{
  left:8px;
}

.carouselControl.next{
  right:8px;
}

[data-contact-open]{
  cursor:pointer;
}

[data-gallery-btn]{
  cursor:pointer;
}

[data-gallery-btn]:not(.is-active){
  opacity:.85;
}

[data-gallery-btn].is-active{
  opacity:1;
  box-shadow:0 0 0 2px rgba(255,255,255,.2), 0 10px 22px rgba(0,0,0,.35);
}

.heroMediaModal{
  position:fixed;
  inset:0;
  z-index:520;
  display:grid;
  place-items:center;
  padding:14px;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(3px);
}

.heroMediaModal.is-hidden{
  display:none;
}

.heroMediaDialog{
  width:min(1180px, 93vw);
  max-width:93vw;
  max-height:calc(100vh - 18px);
  overflow:hidden;
  position:relative;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg, rgba(3,7,12,.96), rgba(4,8,14,.94));
  box-shadow:0 24px 72px rgba(0,0,0,.62);
  display:flex;
  flex-direction:column;
}

.heroMediaStage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  border:none;
  background:#000;
  box-shadow:none;
  overflow:hidden;
}

.heroMediaOverlayName{
  position:absolute;
  left:14px;
  bottom:12px;
  margin:0;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(0,0,0,.62);
  color:rgba(255,255,255,.96);
  font-size:15px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
  z-index:4;
}

.heroMediaOverlayName.is-hidden{
  display:none;
}

.heroMediaFullscreen{
  position:absolute;
  right:14px;
  left:auto;
  top:14px;
  bottom:auto;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(0,0,0,.5);
  color:rgba(255,255,255,.96);
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
}

.heroMediaFullscreen svg{
  width:16px;
  height:16px;
  display:block;
}

.heroMediaFullscreen svg path,
.heroMediaFullscreen svg line,
.heroMediaFullscreen svg polyline{
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.heroMediaFullscreen:hover{
  background:rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.7);
}

.heroMediaFullscreen.is-active{
  border-color:rgba(56,189,248,.88);
  box-shadow:0 0 0 2px rgba(56,189,248,.38);
}

.heroMediaFullscreen.is-hidden{
  display:none;
}

.heroMediaImageCopyright{
  position:absolute;
  right:14px;
  bottom:12px;
  margin:0;
  font-size:11px;
  line-height:1.2;
  font-weight:500;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.78);
  pointer-events:none;
  z-index:5;
}

.heroMediaImageCopyright.is-hidden{
  display:none;
}

.heroMediaDetails{
  width:100%;
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.18);
  background:rgba(1,3,7,.9);
  padding:12px 16px 14px;
  height:164px;
  min-height:164px;
  max-height:164px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:6px;
  overflow:hidden;
  position:relative;
}

.heroMediaDetails.is-scroll-cued::after{
  content:"...";
  position:absolute;
  right:18px;
  bottom:10px;
  font-size:18px;
  line-height:1;
  letter-spacing:.02em;
  color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.75);
  pointer-events:none;
}

.heroMediaDetailsTitle{
  margin:0;
  font-size:24px;
  font-weight:800;
  line-height:1.16;
  color:rgba(255,255,255,.98);
  flex:0 0 auto;
  white-space:normal;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}

.heroMediaDetailsDescription{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:rgba(255,255,255,.88);
  flex:0 0 auto;
  min-height:calc(1.4em * 4);
  max-height:calc(1.4em * 4);
  overflow-y:hidden;
  padding-right:4px;
  white-space:pre-line;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  scrollbar-color:rgba(56,189,248,.92) rgba(56,189,248,.24);
}

.heroMediaDetailsDescription.has-overflow{
  overflow-y:scroll;
}

.heroMediaDetails.has-visible-scrollbar::before{
  content:"";
  position:absolute;
  right:6px;
  top:44px;
  bottom:14px;
  width:8px;
  border-radius:999px;
  background:rgba(56,189,248,.24);
  pointer-events:none;
}

.heroMediaDetails.has-visible-scrollbar .heroMediaDetailsDescription{
  padding-right:14px;
}

.heroMediaDetailsDescription::-webkit-scrollbar{
  width:9px;
}

.heroMediaDetailsDescription::-webkit-scrollbar-track{
  background:rgba(56,189,248,.24);
  border-radius:999px;
}

.heroMediaDetailsDescription::-webkit-scrollbar-thumb{
  background:rgba(56,189,248,.92);
  border-radius:999px;
}

.heroMediaDialog.is-photo-mode{
  height:auto;
  max-height:calc(100vh - 18px);
}

.heroMediaDialog.is-photo-mode .heroMediaStage{
  flex:0 0 auto;
  min-height:0;
  height:auto;
  aspect-ratio:16 / 9;
}

.heroMediaDialog.is-photo-mode .heroMediaOverlayName,
.heroMediaDialog.is-video-mode .heroMediaOverlayName{
  display:none;
}

.heroMediaDialog.is-photo-mode .heroMediaDetails,
.heroMediaDialog.is-video-mode .heroMediaDetails{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:4;
  width:auto;
  padding:44px 20px 18px;
  height:112px;
  min-height:112px;
  max-height:112px;
  border-top:none;
  background:none;
  backdrop-filter:none;
}

.heroMediaDialog.is-photo-mode .heroMediaDetails.is-scroll-cued::after,
.heroMediaDialog.is-video-mode .heroMediaDetails.is-scroll-cued::after{
  content:"... more";
  right:18px;
  bottom:12px;
  padding-left:10px;
  font-size:11px;
  line-height:1.1;
  letter-spacing:.03em;
  font-weight:700;
  color:rgba(255,255,255,.92);
  background:linear-gradient(90deg, rgba(1,3,7,0), rgba(1,3,7,.96) 44%);
}

.heroMediaDialog.is-photo-mode .heroMediaDetailsTitle,
.heroMediaDialog.is-video-mode .heroMediaDetailsTitle{
  font-size:26px;
  line-height:1.08;
  -webkit-line-clamp:1;
}

.heroMediaDialog.is-photo-mode .heroMediaDetailsDescription,
.heroMediaDialog.is-video-mode .heroMediaDetailsDescription{
  font-size:13px;
  line-height:1.35;
  min-height:calc(1.35em * 2);
  max-height:calc(1.35em * 2);
}

.heroMediaDialog.is-photo-mode .heroMediaDetails.has-visible-scrollbar::before,
.heroMediaDialog.is-video-mode .heroMediaDetails.has-visible-scrollbar::before{
  top:48px;
  bottom:18px;
}

.heroMediaDialog.is-photo-mode .heroMediaImageCopyright{
  bottom:126px;
}

.heroMediaVideo,
.heroMediaImage,
.heroMediaPoster{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#000;
}

.heroMediaVideo{
  border:0;
  z-index:1;
}

#heroMediaLocalVideo{
  object-fit:contain;
}

.heroMediaImage{
  object-fit:contain;
  z-index:1;
  opacity:1;
  transition:opacity .34s ease;
}

.heroMediaImage.is-loading{
  opacity:0;
}

.heroMediaPoster{
  object-fit:cover;
  z-index:2;
  pointer-events:none;
  opacity:1;
  transition:opacity .28s ease;
}

.heroMediaPoster.is-hidden{
  opacity:0;
}

.heroMediaPoster.is-photo-preview{
  object-fit:contain;
}

.heroMediaDialog:fullscreen,
.heroMediaDialog:-webkit-full-screen{
  width:100vw;
  max-width:none;
  height:100vh;
  max-height:none;
  border-radius:0;
  border:none;
  box-shadow:none;
  background:#000;
}

.heroMediaDialog:fullscreen .heroMediaStage,
.heroMediaDialog:-webkit-full-screen .heroMediaStage{
  flex:1 1 auto;
  height:100%;
  aspect-ratio:auto;
}

.heroMediaDialog:fullscreen .heroMediaDetails,
.heroMediaDialog:-webkit-full-screen .heroMediaDetails{
  display:none;
}


.heroMediaDialog:fullscreen #heroMediaFullscreen,
.heroMediaDialog:-webkit-full-screen #heroMediaFullscreen{
  display:grid !important;
  visibility:visible;
  opacity:1;
  right:14px;
  left:auto;
  top:14px;
  bottom:auto;
}

.heroMediaDialog:fullscreen .heroMediaImage,
.heroMediaDialog:-webkit-full-screen .heroMediaImage,
.heroMediaDialog:fullscreen .heroMediaPoster,
.heroMediaDialog:-webkit-full-screen .heroMediaPoster{
  object-fit:contain;
  background:#000;
}

.heroMediaVideo.is-hidden,
.heroMediaImage.is-hidden{
  display:none;
}

.heroMediaClose{
  position:absolute;
  top:auto;
  bottom:14px;
  right:14px;
  left:auto;
  width:38px;
  height:38px;
  border:1px solid rgba(255,255,255,.42);
  border-radius:999px;
  background:rgba(0,0,0,.5);
  color:rgba(255,255,255,.96);
  font-size:26px;
  font-weight:300;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
  z-index:14;
}

.heroMediaClose.is-left{
  left:auto;
  right:14px;
}

.heroMediaClose.is-right{
  right:14px;
  left:auto;
}

.heroMediaClose:hover{
  background:rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.7);
}

.heroMediaClose:focus-visible,
.heroMediaFullscreen:focus-visible{
  outline:2px solid rgba(255,255,255,.78);
  outline-offset:2px;
}

.contactModal{
  position:fixed;
  inset:0;
  z-index:120;
  display:grid;
  place-items:center;
  padding:24px;
  background:rgba(2,6,12,.6);
  backdrop-filter:blur(8px);
}

.contactModal.is-hidden{
  display:none;
}

.contactDialog{
  width:min(920px, 95vw);
  max-height:88vh;
  overflow:auto;
  position:relative;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.24);
  background:
    linear-gradient(180deg, rgba(10,16,26,.82), rgba(6,10,18,.9)),
    var(--all-other-frame-image, linear-gradient(#000000, #000000)) right center / cover no-repeat;
  box-shadow:0 28px 70px rgba(0,0,0,.55);
  padding:26px 24px 22px;
}

.contactHeader{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-right:58px;
  margin:0;
}

.contactHeroLogo{
  width:56px;
  height:56px;
  border-radius:12px;
  object-fit:cover;
  background-color:transparent;
  border:1px solid rgba(255,255,255,.58);
  box-shadow:0 8px 24px rgba(0,0,0,.45);
  filter:none;
  flex:0 0 auto;
  mix-blend-mode:normal;
  opacity:1;
}

.contactTitleWrap{
  min-width:0;
}

.contactDialog h2{
  margin:0;
  font-size:clamp(30px, 3vw, 40px);
  line-height:1.08;
  letter-spacing:-.5px;
  color:#fff;
}

.contactDialog h2.contactWordmarkTitle{
  font-weight:800;
  letter-spacing:-.03em;
}

.contactDialog h2 .contactLead{
  font-weight:650;
  color:#fff;
}

.contactDialog h2 .accent{
  color:var(--accent);
}

.contactIntro{
  margin:8px 0 6px;
  font-size:15px;
  color:rgba(255,255,255,.78);
}

.contactHowItWorks{
  margin:0 0 18px;
  font-size:13px;
  line-height:1.45;
  color:rgba(255,255,255,.72);
}

.contactClose{
  position:absolute;
  top:14px;
  right:14px;
  left:auto;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(0,0,0,.62);
  color:rgba(255,255,255,.96);
  font-size:32px;
  font-weight:300;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
}

.contactClose:hover{
  background:rgba(0,0,0,.78);
  border-color:rgba(255,255,255,.7);
}

.contactForm{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.contactEmailPhoneRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(180px, 260px);
  gap:12px;
  align-items:start;
}

.contactFieldGroup{
  display:grid;
  gap:10px;
}

.contactCommentRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(240px, 320px);
  gap:12px;
  align-items:start;
}

.fieldLabel{
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.9);
}

.fieldLabel .requiredMark{
  color:var(--accent);
  font-weight:900;
}

.fieldInput{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:11px 12px;
  font-size:15px;
}

.fieldInput:focus-visible{
  outline:2px solid rgba(29,161,255,.65);
  outline-offset:1px;
}

.fieldTextarea{
  resize:vertical;
  min-height:130px;
}

.contactActions{
  margin-top:6px;
  display:flex;
  justify-content:flex-start;
}

.contactForm .notification-box{
  display:none;
  margin:4px 0 0;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
}

.contactForm .notification-box.show-error,
.contactForm .notification-box.show-success{
  display:block;
}

.contactForm .notification-box.show-error{
  border-color:rgba(248,113,113,.48);
  background:rgba(127,29,29,.44);
  color:rgba(255,235,235,.96);
}

.contactForm .notification-box.show-success{
  border-color:rgba(74,222,128,.42);
  background:rgba(20,83,45,.38);
  color:rgba(236,253,245,.96);
}

.contactSuccessPopup{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  border-radius:22px;
  background:rgba(2,6,12,.76);
  backdrop-filter:blur(7px);
}

.contactSuccessPopup.is-hidden{
  display:none;
}

.contactSuccessDialog{
  position:relative;
  width:min(440px, 100%);
  padding:30px 34px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(180deg, rgba(11,18,32,.96), rgba(4,8,16,.98));
  box-shadow:0 20px 50px rgba(0,0,0,.45);
  color:rgba(255,255,255,.94);
  text-align:center;
}

.contactSuccessDialog h3{
  margin:0 0 10px;
  color:#fff;
  font-size:28px;
  line-height:1.15;
}

.contactSuccessDialog p{
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:15px;
  line-height:1.5;
}

.contactSuccessClose{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.32);
  background:rgba(0,0,0,.46);
  color:rgba(255,255,255,.94);
  font-size:26px;
  font-weight:300;
  line-height:1;
  display:grid;
  place-items:center;
  padding:0;
  cursor:pointer;
}

.contactSuccessClose:hover,
.contactSuccessClose:focus-visible{
  background:rgba(0,0,0,.68);
  border-color:rgba(255,255,255,.62);
}

.captchaBlock{
  width:100%;
  margin-top:0;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.turnstileBlock{
  width:100%;
  min-height:66px;
  margin-bottom:10px;
}

.turnstileBlock:empty{
  display:none;
}

.captchaPromptRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.captchaPrompt{
  margin:0;
  font-size:13px;
  font-weight:700;
  color:rgba(255,255,255,.9);
}

.captchaRefresh{
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.92);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.captchaRefresh:hover,
.captchaRefresh:focus-visible{
  background:rgba(255,255,255,.14);
}

.contactHoneypot{
  position:absolute !important;
  left:-10000px !important;
  width:1px;
  height:1px;
  overflow:hidden;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 18px;
  border-radius:16px;
  background: rgba(255,255,255,.08);
  color:var(--text);
  text-decoration:none;
  font-weight:800;
  min-width:170px;
  transition:.18s ease;
  border: 1px solid rgba(255,255,255,.14);
}
.btn:hover{ transform:translateY(-1px); background: rgba(255,255,255,.10); }

.btn.primary{
  border-color: rgba(29,161,255,.40);
  background:linear-gradient(180deg, rgba(29,161,255,.95), rgba(29,161,255,.70));
}

.btn.primary:disabled,
.btn.primary.is-disabled{
  border-color: rgba(148,163,184,.42);
  background:linear-gradient(180deg, rgba(148,163,184,.45), rgba(100,116,139,.42));
  color:rgba(255,255,255,.75);
  cursor:not-allowed;
  box-shadow:none;
}

.btn.primary:disabled:hover,
.btn.primary.is-disabled:hover{
  transform:none;
  background:linear-gradient(180deg, rgba(148,163,184,.45), rgba(100,116,139,.42));
}

.btn.photos{
  border-color: rgba(139,92,246,.42);
  background:linear-gradient(180deg, rgba(139,92,246,.95), rgba(109,40,217,.75));
}

.btn.contact{
  border-color: rgba(34,197,94,.42);
  background:linear-gradient(180deg, rgba(34,197,94,.95), rgba(22,163,74,.75));
}

.contactActions .btn.primary,
.contactActions .btn.primary:hover,
.contactActions .btn.primary:disabled,
.contactActions .btn.primary.is-disabled,
.contactActions .btn.primary:disabled:hover,
.contactActions .btn.primary.is-disabled:hover{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:176px;
  min-height:60px;
  padding:14px 24px;
  border-radius:18px;
  border-color:rgba(29,161,255,.42);
  background:linear-gradient(180deg, rgba(29,161,255,.95), rgba(29,161,255,.72)) !important;
  background-image:none !important;
  box-shadow:0 12px 30px rgba(8,17,30,.28);
  color:rgba(255,255,255,.96);
  font-size:16px;
  font-weight:800;
  line-height:1;
  letter-spacing:.01em;
}

.contactActions .btn.primary:hover{
  border-color:rgba(255,255,255,.62);
  background:linear-gradient(180deg, rgba(29,161,255,1), rgba(29,161,255,.8)) !important;
}

.contactActions .btn.primary:disabled,
.contactActions .btn.primary.is-disabled,
.contactActions .btn.primary:disabled:hover,
.contactActions .btn.primary.is-disabled:hover{
  border-color:rgba(148,163,184,.42);
  background:linear-gradient(180deg, rgba(148,163,184,.45), rgba(100,116,139,.42)) !important;
  color:rgba(255,255,255,.6);
  box-shadow:none;
}

@media (max-width: 720px){
  .heroMediaDialog:fullscreen #heroMediaFullscreen,
  .heroMediaDialog:-webkit-full-screen #heroMediaFullscreen{
    right:8px;
    left:auto;
    top:8px;
    bottom:auto;
  }

  .heroMediaModal{
    padding:0;
    place-items:center;
  }

  .heroMediaDialog{
    width:100vw;
    max-width:100vw;
    max-height:100vh;
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  .heroMediaStage{
    border-left:none;
    border-right:none;
    border-radius:0;
  }

  .heroMediaOverlayName{
    left:8px;
    bottom:8px;
    padding:6px 9px;
    font-size:13px;
  }

  .heroMediaFullscreen{
    display:grid !important;
    right:8px;
    left:auto;
    top:8px;
    bottom:auto;
    width:34px;
    height:34px;
  }

  .heroMediaFullscreen svg{
    width:14px;
    height:14px;
  }

  .heroMediaImageCopyright{
    right:8px;
    bottom:8px;
    font-size:10px;
  }

  .heroMediaDetails{
    padding:10px 12px 12px;
    height:132px;
    min-height:132px;
    max-height:132px;
    border-left:none;
    border-right:none;
    border-radius:0;
  }

  .heroMediaDetailsTitle{
    font-size:16px;
    line-height:1.18;
  }

  .heroMediaDetailsDescription{
    margin:0;
    font-size:11.5px;
    line-height:1.3;
    min-height:calc(1.3em * 4);
    max-height:calc(1.3em * 4);
    overflow-y:hidden;
    padding-right:3px;
  }

  .heroMediaDialog.is-photo-mode{
    height:auto;
    max-height:100vh;
  }

  .heroMediaDialog.is-photo-mode .heroMediaDetails,
  .heroMediaDialog.is-video-mode .heroMediaDetails{
    padding:34px 14px 14px;
    height:92px;
    min-height:92px;
    max-height:92px;
  }

  .heroMediaDialog.is-photo-mode .heroMediaDetailsTitle,
  .heroMediaDialog.is-video-mode .heroMediaDetailsTitle{
    font-size:18px;
  }

  .heroMediaDialog.is-photo-mode .heroMediaDetailsDescription,
  .heroMediaDialog.is-video-mode .heroMediaDetailsDescription{
    font-size:11px;
    line-height:1.28;
    min-height:calc(1.28em * 2);
    max-height:calc(1.28em * 2);
  }

  .heroMediaDialog.is-photo-mode .heroMediaDetails.has-visible-scrollbar::before,
  .heroMediaDialog.is-video-mode .heroMediaDetails.has-visible-scrollbar::before{
    top:36px;
    bottom:14px;
  }

  .heroMediaDialog.is-photo-mode .heroMediaImageCopyright{
    bottom:102px;
  }

  .heroMediaClose{
    top:auto;
    bottom:8px;
    width:34px;
    height:34px;
    font-size:24px;
  }

  .heroMediaClose.is-left{
    left:auto;
    right:8px;
  }

  .heroMediaClose.is-right{
    right:8px;
    left:auto;
  }

  .card::before{ background-position: right center; }
  #heroCard .heroBackgroundVideo{ object-position: right center; }
  #heroCard{
    padding:16px 10px 14px;
  }
  #heroCard .grid{
    gap:12px;
    min-height:0;
  }
  #heroCard .heroCopy h1{
    margin:0 0 8px;
    font-size:clamp(20px, 8.9vw, 34px);
    letter-spacing:-.25px;
    line-height:1.04;
  }
  #heroCard .meta{
    margin-bottom:10px;
    font-size:12px;
    column-gap:10px;
    row-gap:6px;
  }
  #heroCard .miniCarouselNote{
    margin-top:6px;
    min-height:calc(1.3em * 4 + 2px);
    font-size:10px;
    line-height:1.3;
  }
}

@media (max-width:1040px){
  #heroCard .frameBottomPill{
    display:flex;
    align-items:center;
    width:calc((100% - 18px) * 0.94);
  }
}
@media (max-width:1180px){
  .nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    position:relative;
    padding-left:54px;
    padding-right:54px;
  }

  .nav::after{
    display:none;
  }

  .navContactDock{
    display:none;
  }

  .brand{
    justify-self:center;
    justify-content:center;
    width:auto;
    max-width:100%;
    margin:0 auto;
  }

  .brandText{
    align-items:center;
    text-align:center;
    min-width:0;
  }

  .brandText .title{
    white-space:nowrap;
  }

  .brandText .tagline{
    display:none;
  }

  .navToggle{
    display:inline-flex;
    flex:0 0 auto;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }

  .nav.has-menu-toggle > nav{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:min(300px, calc(100vw - 24px));
    display:none;
    z-index:30;
  }

  .nav.has-menu-toggle.nav-menu-open > nav{
    display:block;
  }

  .nav.has-menu-toggle > nav ul{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    padding:10px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(8,12,20,.96);
    box-shadow:0 18px 46px rgba(0,0,0,.45);
    backdrop-filter:blur(12px);
  }

  .nav.has-menu-toggle > nav ul .navContactItem{
    display:list-item;
  }

  .nav.has-menu-toggle > nav a{
    display:block;
    width:100%;
    text-align:left;
    border-radius:10px;
    padding:10px 12px;
  }

  #heroCard .heroCopy h1,
  #heroCard .meta,
  #heroCard .ctaStack{
    transform:none;
  }

  #heroCard .heroCopy h1{
    width:100%;
  }

  #heroCard .meta{
    margin:0 auto 10px;
    display:flex;
    gap:0;
    width:auto;
    max-width:100%;
    justify-content:center;
  }

  #heroCard .meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    line-height:1.12;
    text-align:center;
  }

  #heroCard .meta span + span::before{
    margin:0 .42em;
  }

  #heroCard .ctaStack{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  #heroCard .miniCarousel{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  #heroCard .miniCarouselNote{
    width:100%;
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
    padding-left:12px;
    padding-right:12px;
  }

  #heroCard .miniCarouselViewport{
    border-radius:0;
  }

  .heroMediaModal{
    padding:0;
    place-items:center;
  }

  .heroMediaDialog{
    width:100vw;
    max-width:100vw;
    max-height:100vh;
    border-radius:0;
    border-left:none;
    border-right:none;
  }

  .heroMediaStage{
    border-left:none;
    border-right:none;
    border-radius:0;
  }
}

@media (max-width:1180px){
  .nav.has-menu-toggle > nav{
    position:fixed;
    inset:var(--navH) 0 0 0;
    width:100%;
    max-width:none;
    display:none;
    z-index:200;
  }

  .nav.has-menu-toggle.nav-menu-open > nav{
    display:flex;
  }

  .nav.has-menu-toggle > nav ul{
    height:100%;
    width:100%;
    justify-content:center;
    align-items:flex-end;
    padding:28px 32px 36px;
    gap:18px;
    border-radius:0;
    border:none;
    background:linear-gradient(180deg, rgba(6,16,30,.98), rgba(7,24,42,.98));
    box-shadow:none;
    backdrop-filter:blur(10px);
    text-align:right;
  }

  .nav.has-menu-toggle > nav a{
    width:auto;
    text-align:right;
    border-radius:0;
    padding:6px 0;
    font-size:clamp(20px, 4.6vw, 34px);
    font-weight:700;
    letter-spacing:.05em;
    color:rgba(200,237,255,.92);
    text-transform:uppercase;
    border:none;
    background:transparent;
  }

  .nav.has-menu-toggle > nav a.is-current{
    color:rgba(255,255,255,.98);
  }

  .nav.has-menu-toggle > nav ul .navContactItem{
    display:block;
    align-self:flex-end;
    margin-top:12px;
  }

  .nav.has-menu-toggle > nav ul .navContactItem a{
    text-transform:none;
    letter-spacing:.02em;
    font-size:16px;
    font-weight:800;
    padding:12px 22px;
    border-radius:8px;
    border:2px solid rgba(120,200,255,.85);
    color:rgba(200,237,255,.98);
    background:transparent;
    white-space:nowrap;
  }
}

@media (max-width:1180px) and (min-aspect-ratio:4/5){
  #heroCard .miniCarousel{
    width:calc(100% - 48px);
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  #heroCard .miniCarouselNote{
    width:calc(100% - 48px);
    max-width:760px;
    margin-left:auto;
    margin-right:auto;
  }

  #heroCard .miniCarouselViewport{
    border-radius:16px;
  }
}

@media (max-width:980px){
  #heroCard{
    padding:20px 18px 18px;
  }
  #heroCard .grid{
    grid-template-columns:1fr;
    gap:14px;
    min-height:0;
  }
  #heroCard .heroCopy h1,
  #heroCard .meta,
  #heroCard .ctaStack{
    transform:none;
  }
  #heroCard .heroCopy h1{
    margin:0 0 10px;
    width:100%;
    font-size:clamp(24px, 7.8vw, 44px);
    letter-spacing:-.38px;
    line-height:1.04;
  }
  #heroCard .heroNarrowShade{
    opacity:.35;
  }
  .pill{
    display:none;
  }

  .nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    position:relative;
    padding-left:54px;
    padding-right:54px;
  }

  .nav::after{
    display:none;
  }

  .brand{
    justify-self:center;
    justify-content:center;
    width:auto;
    max-width:100%;
    margin:0 auto;
  }

  .brandText{
    align-items:center;
    text-align:center;
    min-width:0;
  }

  .navToggle{
    display:inline-flex;
    flex:0 0 auto;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }

  .nav.has-menu-toggle > nav{
    position:fixed;
    inset:var(--navH) 0 0 0;
    width:100%;
    max-width:none;
    display:none;
    z-index:200;
  }

  .nav.has-menu-toggle.nav-menu-open > nav{
    display:flex;
  }

  .nav.has-menu-toggle > nav ul{
    height:100%;
    width:100%;
    justify-content:center;
    align-items:flex-end;
    padding:28px 32px 36px;
    gap:18px;
    border-radius:0;
    border:none;
    background:linear-gradient(180deg, rgba(6,16,30,.98), rgba(7,24,42,.98));
    box-shadow:none;
    backdrop-filter:blur(10px);
    text-align:right;
  }

  .nav.has-menu-toggle > nav a{
    width:auto;
    text-align:right;
    border-radius:0;
    padding:6px 0;
    font-size:clamp(20px, 4.6vw, 34px);
    font-weight:700;
    letter-spacing:.05em;
    color:rgba(200,237,255,.92);
    text-transform:uppercase;
    border:none;
    background:transparent;
  }

  .nav.has-menu-toggle > nav a.is-current{
    color:rgba(255,255,255,.98);
  }

  .nav.has-menu-toggle > nav ul .navContactItem{
    display:block;
    align-self:flex-end;
    margin-top:12px;
  }

  .nav.has-menu-toggle > nav ul .navContactItem a{
    text-transform:none;
    letter-spacing:.02em;
    font-size:16px;
    font-weight:800;
    padding:12px 22px;
    border-radius:8px;
    border:2px solid rgba(120,200,255,.85);
    color:rgba(200,237,255,.98);
    background:transparent;
    white-space:nowrap;
  }

  .subhead{
    display:none;
  }
  .meta{
    margin:0 auto 12px;
    display:flex;
    gap:0;
    width:auto;
    max-width:100%;
    justify-content:center;
    font-size:11px;
  }
  .meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    line-height:1.2;
    text-align:center;
  }
  .meta span + span::before{
    margin:0 .45em;
  }

  body.indexPage #heroCard .heroCopy{
    align-items:center;
    text-align:center;
  }

  body.indexPage #heroCard .heroCopy h1{
    text-align:center;
    white-space:nowrap;
    font-size:clamp(18px, 5.2vw, 34px);
    padding-inline:12px;
    margin-left:auto;
    margin-right:auto;
  }

  body.indexPage #heroCard .meta{
    display:none !important;
    margin:0 !important;
    height:0;
  }

  body.indexPage #heroCard .miniCarousel{
    width:min(92vw, 640px);
    max-width:92vw;
    margin-left:auto;
    margin-right:auto;
  }
  .ctaStack{
    margin-top:0;
    width:100%;
    max-width:none;
  }
  #heroCard .ctaStack{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }
  #heroCard .miniCarousel{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
  }
  #heroCard .miniCarouselNote{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    padding-left:12px;
    padding-right:12px;
    font-size:11px;
    text-align:center;
  }
  #heroCard .miniCarouselViewport{
    border-radius:0;
  }
  .ctaRow{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
    width:100%;
  }
  .ctaRow .btn{
    min-width:0;
    width:100%;
    padding:12px 16px;
  }

  .heroCopy{ min-height:0; }
  .heroSide{
    display:none;
  }
  .creditOverlay{
    display:none;
  }
  #heroCard .frameBottomWrap{
    left:var(--logo-pill-wrap-left, 0px);
    right:var(--logo-pill-wrap-right, 0px);
    width:var(--logo-pill-wrap-width, auto);
    top:var(--logo-pill-wrap-top, auto);
    bottom:var(--logo-pill-wrap-bottom, var(--logo-pill-bottom, 10px));
    transform:var(--logo-pill-wrap-transform, none);
  }
  #heroCard .frameBottomLead{
    width:calc((100% - 14px) * 0.96);
    margin-bottom:18px;
    font-size:clamp(11px, 1.95vw, 13px);
    line-height:1.35;
  }
  #heroCard .frameBottomPill{
    display:block;
    width:var(--logo-pill-width, calc((100% - 14px) * 0.96));
    margin:var(--logo-pill-margin, 0 auto);
    height:68px;
    min-height:68px;
    max-height:68px;
  }
  #heroCard .frameBottomCopyright{
    margin:0;
    text-align:left;
    left:10px;
    bottom:8px;
  }
}

@media (max-width:560px){
  header{ height:74px; }
  :root{ --navH:74px; }
  .nav{
    padding-left:46px;
    padding-right:46px;
  }
  #heroCard{
    padding:14px 8px 12px;
  }
  #heroCard .heroCopy h1{
    font-size:clamp(17px, 8.6vw, 28px);
    letter-spacing:-.15px;
    margin-bottom:8px;
  }
  #heroCard .meta{
    font-size:11px;
    gap:0;
    max-width:100%;
  }
  #heroCard .meta span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    line-height:1.2;
    text-align:center;
  }
  #heroCard .meta span + span::before{
    margin:0 .4em;
  }
  #heroCard .miniCarousel{
    width:100vw;
  }
  #heroCard .miniCarouselNote{
    padding-left:8px;
    padding-right:8px;
    font-size:10px;
  }
  .brandLogo{ width:38px; height:38px; }
  .brandText .tagline{ display:none; }
  .brandText .title{
    font-size:clamp(13px, 4vw, 15px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .navToggle{
    width:38px;
    height:38px;
    border-radius:10px;
  }
  .nav.has-menu-toggle > nav{
    top:calc(100% + 6px);
    width:min(270px, calc(100vw - 16px));
  }
  .nav.has-menu-toggle > nav ul{ gap:4px; }
  .nav.has-menu-toggle > nav a{ padding:9px 10px; font-size:13px; }
  .btn{ min-width:150px; border-radius:14px; }
  .ctaRow{
    grid-template-columns:1fr;
  }
  .ctaRow .btn{
    min-width:0;
    padding:10px 14px;
  }
  .carouselControl{
    width:28px;
    height:28px;
    font-size:18px;
  }
  .contactDialog{
    width:96vw;
    max-height:90vh;
    padding:20px 14px 14px;
  }
  .contactHeader{
    gap:10px;
    padding-right:44px;
  }
  .contactHeroLogo{
    width:44px;
    height:44px;
    border-radius:10px;
  }
  .contactDialog h2{
    font-size:30px;
  }
  .contactIntro{
    font-size:14px;
  }
  .contactHowItWorks{
    font-size:12px;
  }
  .contactClose{
    top:10px;
    right:10px;
    left:auto;
    width:38px;
    height:38px;
    font-size:28px;
  }
  .fieldInput{
    font-size:14px;
  }
  .contactEmailPhoneRow{
    grid-template-columns:1fr;
    gap:10px;
  }
  .contactCommentRow{
    grid-template-columns:1fr;
    gap:10px;
  }
  .captchaPromptRow{
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
  }
  .captchaRefresh{
    font-size:11px;
    padding:6px 8px;
  }
  .contactActions .btn{
    min-width:0;
    width:100%;
  }
  .contactActions .btn.primary{
    min-width:0;
    width:100%;
  }
  .creditOverlay{
    padding:10px 12px;
  }
  .creditOverlay span:first-child{
    font-size:12px;
  }
  .creditOverlay span:last-child{
    font-size:20px;
  }
  .creditBio{
    font-size:11.25px;
    line-height:1.42;
  }
}

@media (max-width:1180px) and (orientation:landscape){
  header{ height:70px; }
  :root{ --navH:70px; }

  .nav{
    padding-left:56px;
    padding-right:56px;
  }

  .brandLogo{
    width:38px;
    height:38px;
  }

  .brandText .title{
    font-size:clamp(13px, 1.35vw, 17px);
  }

  #heroCard{
    padding-top:12px;
    padding-bottom:132px;
    padding-left:0;
    padding-right:0;
  }

  #heroCard .grid{
    grid-template-columns:1fr;
    min-height:0;
    gap:12px;
  }

  #heroCard .heroSide,
  #heroCard .creditOverlay{
    display:none;
  }

  #heroCard .heroCopy h1{
    font-size:clamp(20px, 4vw, 34px);
    margin-bottom:8px;
    padding-left:12px;
    padding-right:12px;
  }

  #heroCard .meta{
    display:none;
  }

  #heroCard .ctaStack,
  #heroCard .miniCarousel,
  #heroCard .miniCarouselNote{
    width:100%;
    max-width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  #heroCard .miniCarousel{
    aspect-ratio:16 / 9;
    height:auto;
    margin-top:8px;
  }

  #heroCard .miniCarouselViewport{
    height:100%;
    border-left:none;
    border-right:none;
  }

  #heroCard .frameBottomWrap{
    top:auto;
    bottom:var(--logo-pill-bottom, 10px);
  }

  #heroCard .frameBottomPill{
    transform:translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .card::before, .card::after{ transition:none; }
  .creditOverlay{ animation:none; opacity:1; }
}


/* Responsive pass 1: menu + home hero usability */
@media (max-width:1180px){
  body.nav-menu-open{
    overflow:hidden;
  }

  .nav.has-menu-toggle > nav{
    position:fixed !important;
    top:calc(var(--navH) + 10px) !important;
    left:auto !important;
    right:12px !important;
    width:fit-content !important;
    max-width:calc(100vw - 24px) !important;
    max-height:calc(100svh - var(--navH) - 24px);
    overflow:visible;
    z-index:90;
  }

  .nav.has-menu-toggle.nav-menu-open > nav{
    display:block !important;
  }

  .nav.has-menu-toggle > nav ul{
    height:auto !important;
    width:fit-content !important;
    max-width:calc(100vw - 24px) !important;
    margin-left:auto !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
    gap:6px !important;
    padding:10px 14px !important;
    border-radius:24px !important;
    border:1px solid rgba(255,255,255,.18) !important;
    background:linear-gradient(180deg, rgba(9,17,29,.985), rgba(8,14,24,.965)) !important;
    box-shadow:0 24px 52px rgba(0,0,0,.52) !important;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
  }

  .nav.has-menu-toggle > nav a{
    border-radius:16px !important;
    padding:4px 0 !important;
    font-size:clamp(18px, 2.6vw, 26px) !important;
    line-height:1.06 !important;
  }
}

@media (max-width:1365px){
  #heroCard{
    padding:22px 20px 124px !important;
  }

  #heroCard .grid{
    min-height:clamp(420px, calc(100vh - var(--navH) - 84px), 620px) !important;
  }

  body.indexPage #heroCard .heroCopy h1{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-wrap:balance;
    font-size:clamp(40px, 4.7vw, 58px) !important;
  }

  #heroCard .meta{
    width:min(100%, 760px) !important;
    margin-bottom:12px !important;
    font-size:clamp(12px, 1.35vw, 15px) !important;
    row-gap:8px !important;
  }

  #heroCard .miniCarousel{
    width:min(100%, 700px) !important;
  }

  #heroCard .creditOverlay.indexBio{
    right:68px !important;
    bottom:108px !important;
    max-width:min(320px, 38vw) !important;
  }

  #heroCard .creditOverlay.indexBio span:last-child{
    font-size:22px !important;
  }

  #heroCard .frameBottomPill,
  #heroCard .frameBottomCopyright{
    width:var(--logo-pill-width, calc(100% - 28px)) !important;
  }
}

@media (max-width:1024px){
  #heroCard{
    padding:18px 14px 122px !important;
  }

  #heroCard .grid{
    min-height:clamp(400px, calc(100vh - var(--navH) - 108px), 540px) !important;
  }

  body.indexPage #heroCard .heroCopy h1{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-wrap:balance;
    font-size:clamp(27px, 6vw, 40px) !important;
  }

  #heroCard .meta{
    width:min(100%, 620px) !important;
    margin-bottom:10px !important;
    font-size:12px !important;
    row-gap:8px !important;
  }

  #heroCard .meta span{
    white-space:normal !important;
  }

  #heroCard .miniCarousel{
    width:min(100%, 620px) !important;
  }

  #heroCard .creditOverlay.indexBio{
    right:18px !important;
    bottom:100px !important;
    max-width:min(260px, 46vw) !important;
  }

  #heroCard .creditOverlay.indexBio span:first-child{
    font-size:15px !important;
  }

  #heroCard .creditOverlay.indexBio span:last-child{
    font-size:20px !important;
  }
}

@media (max-width:767px){
  .nav{
    padding-left:16px !important;
    padding-right:64px !important;
    justify-content:flex-start !important;
  }

  .brand{
    width:min(100%, calc(100vw - 96px)) !important;
    justify-content:flex-start !important;
    margin:0 !important;
  }

  .brandLogo{
    width:34px !important;
    height:34px !important;
  }

  .brandText{
    align-items:flex-start !important;
    text-align:left !important;
  }

  .brandText .title{
    font-size:clamp(12px, 3.2vw, 16px) !important;
  }

  .nav.has-menu-toggle > nav{
    left:auto !important;
    right:10px !important;
    top:calc(var(--navH) + 8px) !important;
    max-width:calc(100vw - 20px) !important;
  }

  .nav.has-menu-toggle > nav ul{
    width:fit-content !important;
    max-width:calc(100vw - 20px) !important;
    margin-left:auto !important;
    gap:4px !important;
    padding:8px 12px !important;
    border-radius:20px !important;
  }

  .nav.has-menu-toggle > nav a{
    padding:2px 0 !important;
    font-size:clamp(17px, 6.2vw, 22px) !important;
    line-height:1.03 !important;
  }

  #heroCard{
    padding:14px 8px 136px !important;
    border-radius:20px !important;
  }

  #heroCard .grid{
    gap:10px !important;
    min-height:clamp(320px, calc(100svh - var(--navH) - 146px), 430px) !important;
  }

  body.indexPage #heroCard .heroCopy h1{
    width:100%;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
    text-wrap:balance;
    font-size:clamp(21px, 7.6vw, 30px) !important;
    line-height:1.04 !important;
    margin-bottom:8px !important;
  }

  #heroCard .meta{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px 10px !important;
    width:min(100%, 420px) !important;
    margin-bottom:10px !important;
    font-size:11px !important;
  }

  #heroCard .meta span{
    display:flex !important;
    min-height:2.4em;
    justify-content:center !important;
    text-align:center !important;
  }

  #heroCard .meta span + span::before{
    display:none !important;
  }

  #heroCard .miniCarousel{
    width:100% !important;
    margin-top:8px !important;
  }

  #heroCard .miniCarouselViewport{
    border-radius:12px !important;
  }

  #heroCard .miniCarouselOverlay{
    width:calc(100% - 16px) !important;
    top:8px !important;
    bottom:auto !important;
    font-size:11px !important;
  }

  #heroCard .creditOverlay.indexBio{
    display:none !important;
  }

  #heroCard .frameBottomWrap{
    left:var(--logo-pill-wrap-left, 0px) !important;
    right:var(--logo-pill-wrap-right, 0px) !important;
    width:var(--logo-pill-wrap-width, auto) !important;
    top:var(--logo-pill-wrap-top, auto) !important;
    bottom:var(--logo-pill-wrap-bottom, var(--logo-pill-bottom, 12px)) !important;
    transform:var(--logo-pill-wrap-transform, none) !important;
  }

  #heroCard .frameBottomPill{
    width:var(--logo-pill-width, calc(100% - 16px)) !important;
    margin:var(--logo-pill-margin, 0 auto) !important;
    height:58px !important;
    min-height:58px !important;
    max-height:58px !important;
    padding:6px 10px !important;
    transform:none !important;
  }

  #heroCard .logoMarqueeTrack{
    gap:10px !important;
  }

  #heroCard .frameBottomCopyright{
    width:calc(100% - 16px) !important;
    margin-top:6px !important;
    font-size:12px !important;
  }
}

@media (max-width:767px) and (orientation:portrait){
  #heroCard .miniCarousel{
    width:calc(100% + 16px) !important;
    max-width:none !important;
    margin-left:-8px !important;
    margin-right:-8px !important;
  }

  #heroCard .miniCarouselViewport{
    border-left:none !important;
    border-right:none !important;
    border-radius:0 !important;
  }

  #heroCard .miniCarouselOverlay{
    width:calc(100% - 20px) !important;
  }
}

@media (max-height:500px) and (orientation:landscape) and (max-width:1180px){
  #heroCard .miniCarousel{
    width:min(calc(85dvh * 16 / 9), 92vw) !important;
    max-width:min(calc(85dvh * 16 / 9), 92vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #heroCard .miniCarouselViewport{
    border-left:none !important;
    border-right:none !important;
    border-radius:10px !important;
  }

  #heroCard .miniCarouselOverlay{
    width:calc(100% - 16px) !important;
  }
}

@media (max-width:1180px){
  header{
    transform:translateY(calc(-1 * var(--ths-nav-hide-offset, 0px)));
    transition:transform .18s ease;
    will-change:transform;
  }

  .navToggle{
    transform:translateY(calc(-50% + var(--ths-nav-hide-offset, 0px)));
    transition:transform .18s ease, background .18s ease, border-color .18s ease;
    z-index:230;
  }

  .nav.has-menu-toggle > nav{
    transform:translateY(var(--ths-nav-hide-offset, 0px));
    transition:transform .18s ease;
  }

  body.nav-menu-open header{
    transform:none;
  }

  body.nav-menu-open .navToggle{
    transform:translateY(-50%);
  }

  body.nav-menu-open .nav.has-menu-toggle > nav{
    transform:none;
  }
}

/* Backout-safe: keep home hero centered/scaled once hamburger nav breakpoint is active. */
@media (max-width:1180px){
  body.indexPage #heroCard{
    width:100% !important;
    max-width:none !important;
  }

  body.indexPage #heroCard .grid{
    width:min(95vw, 1400px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.indexPage #heroCard .frameBottomWrap{
    left:var(--logo-pill-wrap-left, 50%) !important;
    right:var(--logo-pill-wrap-right, auto) !important;
    width:var(--logo-pill-wrap-width, min(95vw, 1400px)) !important;
    top:var(--logo-pill-wrap-top, auto) !important;
    bottom:var(--logo-pill-wrap-bottom, var(--logo-pill-bottom, 12px)) !important;
    transform:var(--logo-pill-wrap-transform, translateX(-50%)) !important;
  }

  body.indexPage #heroCard .heroCopy{
    align-items:center !important;
    text-align:center !important;
  }

  body.indexPage #heroCard .heroCopy h1{
    width:100% !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    text-wrap:balance !important;
    text-align:center !important;
  }

  body.indexPage #heroCard .miniCarousel{
    width:min(95vw, 700px) !important;
    max-width:95vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

@media (max-width:767px) and (orientation:portrait){
  body.indexPage #heroCard .grid{
    min-height:auto !important;
  }

  body.indexPage #heroCard .miniCarousel{
    width:min(95vw, 700px) !important;
    max-width:95vw !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  body.indexPage #heroCard .miniCarouselViewport{
    border-left:2px solid #fff !important;
    border-right:2px solid #fff !important;
    border-radius:12px !important;
  }
}

@media (max-height:500px) and (orientation:landscape) and (max-width:1180px){
  body.indexPage #heroCard .miniCarousel,
  body.indexPage #heroCard .miniCarouselNote{
    width:min(calc(85dvh * 16 / 9), 92vw) !important;
    max-width:min(calc(85dvh * 16 / 9), 92vw) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

/* Narrow fullscreen close affordance for local video player (videos + indexone videos section). */
.localFullscreenClose{
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:12;
  width:42px;
  height:42px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.46);
  background:rgba(0,0,0,.58);
  color:rgba(255,255,255,.98);
  font-size:28px;
  line-height:1;
  display:none;
  place-items:center;
  cursor:pointer;
  padding:0;
  text-shadow:0 1px 2px rgba(0,0,0,.7);
}

.localFullscreenClose.is-visible{
  display:grid;
}

@media (max-width:900px){
  .localFullscreenClose{
    right:8px;
    bottom:8px;
    width:40px;
    height:40px;
    font-size:26px;
  }
}

/* Fullscreen media pass: keep controls visible, center media, and suppress hamburger overlap. */
@media (max-width:1180px){
  body.media-fullscreen-open header{
    transform:translateY(calc(-100% - 8px)) !important;
    pointer-events:none !important;
  }

  body.media-fullscreen-open .navToggle{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(calc(-100% - 8px)) !important;
  }

  body.media-fullscreen-open .nav.has-menu-toggle > nav{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-16px) !important;
  }
}

/* Mobile nav placement pass: keep hamburger and menu anchored to top-left. */
@media (max-width:1180px){
  .nav{
    padding-left:64px !important;
    padding-right:16px !important;
    justify-content:flex-start !important;
  }

  .navToggle{
    left:0 !important;
    right:auto !important;
  }

  .nav.has-menu-toggle > nav{
    left:12px !important;
    right:auto !important;
  }

  .nav.has-menu-toggle > nav ul{
    margin-left:0 !important;
    margin-right:auto !important;
    align-items:flex-start !important;
    text-align:left !important;
  }

  .nav.has-menu-toggle > nav a{
    text-align:left !important;
  }

  .nav.has-menu-toggle > nav ul .navContactItem{
    align-self:flex-start !important;
  }
}

@media (max-width:767px){
  .nav{
    padding-left:64px !important;
    padding-right:16px !important;
  }

  .nav.has-menu-toggle > nav{
    left:10px !important;
    right:auto !important;
  }
}

.heroMediaDialog:fullscreen,
.heroMediaDialog:-webkit-full-screen{
  height:100dvh !important;
  max-height:100dvh !important;
}

.heroMediaDialog:fullscreen .heroMediaStage,
.heroMediaDialog:-webkit-full-screen .heroMediaStage{
  display:grid;
  place-items:center;
  height:100dvh;
}

.heroMediaDialog:fullscreen #heroMediaLocalVideo,
.heroMediaDialog:-webkit-full-screen #heroMediaLocalVideo{
  width:auto !important;
  height:auto !important;
  max-width:100vw !important;
  max-height:100dvh !important;
  margin:auto;
}

.heroMediaDialog:fullscreen #heroMediaClose,
.heroMediaDialog:-webkit-full-screen #heroMediaClose{
  top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
  right:calc(env(safe-area-inset-right, 0px) + 10px) !important;
  left:auto !important;
  bottom:auto !important;
  z-index:40 !important;
}

.heroMediaDialog:fullscreen #heroMediaFullscreen,
.heroMediaDialog:-webkit-full-screen #heroMediaFullscreen{
  top:calc(env(safe-area-inset-top, 0px) + 10px) !important;
  right:calc(env(safe-area-inset-right, 0px) + 58px) !important;
  left:auto !important;
  bottom:auto !important;
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  z-index:40 !important;
}

.localPlayer:fullscreen .localFullscreenClose,
.localPlayer:-webkit-full-screen .localFullscreenClose{
  top:calc(env(safe-area-inset-top, 0px) + 10px);
  right:calc(env(safe-area-inset-right, 0px) + 10px);
  left:auto;
  bottom:auto;
  z-index:20;
}

@media (max-width:900px) and (orientation:portrait), (max-height:500px) and (orientation:landscape){
  .heroMediaDialog:fullscreen #heroMediaFullscreen,
  .heroMediaDialog:-webkit-full-screen #heroMediaFullscreen{
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 52px) !important;
  }

  .heroMediaDialog:fullscreen #heroMediaClose,
  .heroMediaDialog:-webkit-full-screen #heroMediaClose{
    top:calc(env(safe-area-inset-top, 0px) + 8px) !important;
    right:calc(env(safe-area-inset-right, 0px) + 8px) !important;
  }

  .localPlayer:fullscreen .localFullscreenClose,
  .localPlayer:-webkit-full-screen .localFullscreenClose{
    top:calc(env(safe-area-inset-top, 0px) + 8px);
    right:calc(env(safe-area-inset-right, 0px) + 8px);
  }
}

/* ===== Home Hero Lockup (single rigid stage) ===== */
#heroCard.hero-lockup{
  --hero-stage-w:1600;
  --hero-stage-h:960;
  --hero-y-shift:.7;
  --hero-copy-left:1.8;
  --hero-copy-width:67.8;
  --hero-rail-left:3.9;
  --hero-rail-width:58.6;
  --hero-side-left:71.8;
  --hero-side-width:23;
  --hero-name-left:67.2;
  --hero-name-top:39.7;
  --hero-name-width:28.5;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}

#heroCard.hero-lockup::before,
#heroCard.hero-lockup::after{
  content:none !important;
  display:none !important;
}

#heroCard.hero-lockup .heroBackgroundVideo,
#heroCard.hero-lockup .heroNarrowShade{
  display:none !important;
}

#heroCard.hero-lockup > .heroSceneViewport{
  position:relative;
  width:min(80vw, calc(var(--hero-stage-w) * 1px));
  aspect-ratio:var(--hero-stage-w) / var(--hero-stage-h);
  margin:0 auto;
  min-height:0;
  overflow:visible;
  --stage-unit:10px;
}

#heroCard.hero-lockup .heroSceneCanvas{
  position:relative;
  display:block !important;
  width:100%;
  height:100%;
  min-height:0 !important;
  gap:0 !important;
  grid-template-columns:none !important;
}

#heroCard.hero-lockup .heroCopy{
  position:absolute;
  left:calc(var(--stage-unit) * var(--hero-copy-left)) !important;
  top:calc((var(--stage-unit) * 1.15) + (var(--stage-unit) * var(--hero-y-shift))) !important;
  width:calc(var(--stage-unit) * var(--hero-copy-width)) !important;
  min-height:0 !important;
  display:block !important;
  text-align:center;
}

#heroCard.hero-lockup .heroCopy h1{
  margin:0 !important;
  width:max-content !important;
  max-width:none !important;
  display:flex;
  flex-wrap:nowrap !important;
  align-items:baseline;
  justify-content:center;
  gap:.15em;
  font-size:calc(var(--stage-unit) * 5.9) !important;
  line-height:.94 !important;
  letter-spacing:calc(var(--stage-unit) * -0.11) !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  word-break:normal !important;
  transform:none !important;
}

#heroCard.hero-lockup .meta{
  display:flex !important;
  flex-wrap:nowrap !important;
  justify-content:center !important;
  white-space:nowrap !important;
  gap:calc(var(--stage-unit) * 1) !important;
  margin:calc(var(--stage-unit) * .25) 0 0 !important;
  font-size:calc(var(--stage-unit) * 1.38) !important;
  transform:translateX(var(--hero-meta-shift-x, 0px)) !important;
}

#heroCard.hero-lockup .meta span{
  white-space:nowrap !important;
}

#heroCard.hero-lockup .meta span::before{
  content:"•";
  margin-right:calc(var(--stage-unit) * .9);
  color:rgba(255,255,255,.62);
  font-weight:700;
}

#heroCard.hero-lockup .meta span:first-child::before{
  content:none;
}

#heroCard.hero-lockup .heroSceneBody{
  position:absolute;
  inset:0;
  min-height:0;
}

#heroCard.hero-lockup .heroCarouselRail{
  position:absolute;
  left:calc(var(--stage-unit) * var(--hero-rail-left)) !important;
  top:calc((var(--stage-unit) * 11.5) + (var(--stage-unit) * var(--hero-y-shift))) !important;
  width:calc(var(--stage-unit) * var(--hero-rail-width)) !important;
  display:flex;
  flex-direction:column;
  min-width:0;
  z-index:2;
}

#heroCard.hero-lockup .ctaStack{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  transform:none !important;
}

#heroCard.hero-lockup .miniCarousel{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  aspect-ratio:16 / 9;
}

#heroCard.hero-lockup .miniCarouselViewport{
  border-radius:calc(var(--stage-unit) * 1.12) !important;
  border:calc(var(--stage-unit) * .18) solid rgba(255,255,255,.9) !important;
  box-shadow:0 calc(var(--stage-unit) * 1) calc(var(--stage-unit) * 2.12) rgba(0,0,0,.24);
  overflow:hidden;
}

#heroCard.hero-lockup .miniCarouselOverlay{
  display:none !important;
}

#heroCard.hero-lockup .miniCarouselNote{
  position:absolute !important;
  top:calc(var(--stage-unit) * .62) !important;
  left:0;
  right:0;
  width:auto !important;
  height:auto !important;
  clip:auto !important;
  margin:0 !important;
  padding:0 calc(var(--stage-unit) * 3) !important;
  overflow:visible !important;
  white-space:normal !important;
  border:0 !important;
  font-size:calc(var(--stage-unit) * 1) !important;
  line-height:1.22;
  font-weight:700;
  color:rgba(255,255,255,.95);
  text-align:center;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
  pointer-events:none;
}

#heroCard.hero-lockup .carouselControl{
  width:clamp(26px, calc(var(--stage-unit) * 2.75), 44px);
  height:clamp(26px, calc(var(--stage-unit) * 2.75), 44px);
  top:55%;
  font-size:clamp(20px, calc(var(--stage-unit) * 2.12), 34px);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.58);
}

#heroCard.hero-lockup .heroSide{
  position:absolute;
  left:calc(var(--stage-unit) * var(--hero-side-left)) !important;
  top:calc((var(--stage-unit) * .8) + (var(--stage-unit) * var(--hero-y-shift))) !important;
  right:auto !important;
  width:calc(var(--stage-unit) * var(--hero-side-width)) !important;
  height:calc(var(--stage-unit) * 56.2) !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:center !important;
  min-height:0;
  padding:0 !important;
  z-index:3;
}

#heroCard.hero-lockup .heroPrincipalFigure{
  display:block;
  width:auto !important;
  height:100% !important;
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.35));
}

#heroCard.hero-lockup .creditOverlay.indexBio{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:calc(var(--stage-unit) * .36) !important;
  position:absolute;
  left:calc(var(--stage-unit) * var(--hero-name-left)) !important;
  top:calc((var(--stage-unit) * var(--hero-name-top)) + (var(--stage-unit) * var(--hero-y-shift))) !important;
  right:auto !important;
  bottom:auto !important;
  width:calc(var(--stage-unit) * var(--hero-name-width)) !important;
  max-width:97%;
  transform:none !important;
  animation:none !important;
  opacity:1 !important;
  text-align:center;
  z-index:4;
  padding:calc(var(--stage-unit) * .9) calc(var(--stage-unit) * 1.35) !important;
  background:linear-gradient(180deg, rgba(64,27,50,.36), rgba(40,17,32,.46));
  border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(1.5px);
}

#heroCard.hero-lockup .creditOverlay.indexBio span:first-child{
  margin:0 !important;
  width:auto !important;
  max-width:100% !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  line-height:1.06 !important;
  font-size:calc(var(--stage-unit) * 1.45) !important;
  letter-spacing:0 !important;
}

#heroCard.hero-lockup .creditOverlay.indexBio span:last-child{
  margin:0 !important;
  width:auto !important;
  max-width:100% !important;
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  line-height:1.02 !important;
  text-align:center;
  font-size:calc(var(--stage-unit) * 2.35) !important;
}

#heroCard.hero-lockup .frameBottomWrap{
  position:static !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  width:100% !important;
  margin:calc(var(--stage-unit) * .9) 0 0 !important;
}

#heroCard.hero-lockup .frameBottomPill{
  width:100% !important;
  margin:0 !important;
  transform:none !important;
  min-height:calc(var(--stage-unit) * 4.75) !important;
  height:calc(var(--stage-unit) * 4.75) !important;
  max-height:calc(var(--stage-unit) * 4.75) !important;
  padding:calc(var(--stage-unit) * .75) calc(var(--stage-unit) * .9) !important;
  border:calc(var(--stage-unit) * .12) solid rgba(255,255,255,.28);
  background:rgba(30,8,24,.58);
}

#heroCard.hero-lockup .logoMarqueeTrack{
  gap:calc(var(--stage-unit) * 1.25);
}

#heroCard.hero-lockup .frameBottomCopyright{
  display:none !important;
}

#heroCard.hero-lockup .clientLogo{
  height:calc(var(--stage-unit) * 2.75);
}

#heroCard.hero-lockup .clientLogo.crohns{
  height:calc(var(--stage-unit) * 3.1);
}

#heroCard.hero-lockup .clientLogo.takeda{
  height:calc(var(--stage-unit) * 2.5);
}

@media (max-width:834px){
  #heroCard.hero-lockup .heroSide,
  #heroCard.hero-lockup .creditOverlay.indexBio{
    display:none !important;
  }

  #heroCard.hero-lockup .heroCopy{
    width:100% !important;
    left:0 !important;
    top:calc((var(--stage-unit) * 2.2) + (var(--stage-unit) * var(--hero-y-shift))) !important;
  }

  #heroCard.hero-lockup .heroCopy h1{
    font-size:calc(var(--stage-unit) * 5.9) !important;
  }

  #heroCard.hero-lockup .meta{
    font-size:calc(var(--stage-unit) * 1.38) !important;
    gap:calc(var(--stage-unit) * 1) !important;
  }

  #heroCard.hero-lockup .heroCarouselRail{
    left:6% !important;
    top:18% !important;
    width:88% !important;
  }

  #heroCard.hero-lockup .frameBottomWrap{
    width:88% !important;
    margin:calc(var(--stage-unit) * .9) auto 0 !important;
  }
}

@media (max-width:620px){
  #heroCard.hero-lockup .frameBottomWrap{
    display:none !important;
  }
}

/* Final home lockup guard: never wrap hero title, keep BJ + title visible on narrow screens. */
body.indexPage #heroCard.hero-lockup .grid{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

body.indexPage #heroCard.hero-lockup .miniCarousel{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

body.indexPage #heroCard.hero-lockup .frameBottomWrap{
  left:auto !important;
  right:auto !important;
  width:100% !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
  margin:calc(var(--stage-unit) * .9) 0 0 !important;
}

body.indexPage #heroCard.hero-lockup .heroCopy h1,
body.indexPage #heroCard.hero-lockup .heroCopy h1 span{
  white-space:nowrap !important;
  text-wrap:nowrap !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
  hyphens:none !important;
}

@media (max-width:834px){
  body.indexPage #heroCard.hero-lockup .heroSide{
    display:block !important;
  }

  body.indexPage #heroCard.hero-lockup .creditOverlay.indexBio{
    display:flex !important;
  }
}

/* On phone-width hero, hide tiny carousel caption because the full video player section is immediately visible below. */
@media (max-width:460px){
  body.indexPage #heroCard.hero-lockup .miniCarouselOverlay,
  body.indexPage #heroCard.hero-lockup .miniCarouselNote{
    display:none !important;
  }
}


/* Honeypot field for spam protection. */
.hp-field{
  position:absolute !important;
  left:-10000px !important;
  top:auto !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}