/* Approved Anshin6 homepage: original deck identity, GTX artwork, red primary. */
:root{--primary:var(--fire-red);--secondary:#315cff}
header{height:86px;padding:0 4.2%;background:#080e1bf5;border-bottom:1px solid #ffffff08}
.brand img{width:236px;height:auto}
nav{font-size:var(--type-small);gap:32px;font-weight:500}
nav a:hover,nav a.active{color:#fff}
nav a.active:not(.nav-contact){text-decoration:underline;text-decoration-color:var(--primary);text-underline-offset:10px;text-decoration-thickness:2px}
.nav-contact{border:1px solid var(--primary);color:var(--fire-red);padding:10px 22px;margin-left:4px;border-radius:7px;font-weight:700}
.nav-contact:hover{background:color-mix(in srgb, var(--fire-red) 8%, transparent);color:var(--fire-red)}
.nav-contact span{margin-left:5px}
.hero{height:640px;min-height:640px;max-height:none;padding:48px 4.2% 0;background:#080e1b;isolation:isolate}
.hero-grid{display:none}
.hero-top{margin-top:6px;z-index:4}
.hero-top .eyebrow{font-size:var(--type-small);letter-spacing:3px;font-weight:500}
.hero-top .eyebrow i{width:9px;height:9px;box-shadow:none;background:var(--fire-red)}
.hero-index{display:none}
.hero-copy{padding-top:28px;width:52%;position:relative;z-index:3}
.hero h1{font-size:var(--type-display);letter-spacing:-3px;line-height:.88;margin-bottom:20px;font-weight:800;max-width:none;white-space:nowrap}
.hero h1 em{color:var(--fire-red)}
.hero h1 em:after{display:none}
.hero-copy p{font-size:var(--type-body);line-height:1.5;color:#d1d7e2;margin-bottom:0}
.hero-actions{gap:32px;margin-top:30px}
.hero .button{padding:16px 24px;border-radius:7px;gap:16px;font-size:var(--type-small)}
.hero .text-link{font-size:var(--type-small);gap:9px;font-weight:500}
.hero-artwork{position:absolute;z-index:1;top:4px;bottom:32px;right:-2%;width:68%;pointer-events:none;overflow:hidden}
.hero-artwork img{width:100%;height:100%;object-fit:contain;object-position:right center;display:block;mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 96%,transparent 100%)}
.hero-artwork:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#080e1b 0%,transparent 12%,transparent 90%,#080e1b 100%)}
.hero-bottom{bottom:30px;left:4.2%;right:4.2%;font-size:var(--type-small);letter-spacing:2.5px;align-items:center;gap:28px;color:#d9deea}
.hero-bottom:after{content:'';height:1px;background:#627087;flex:1;order:1}
.hero-bottom .hero-signoff{font-size:var(--type-small);letter-spacing:1.8px;order:2;color:#d2d8e4;text-align:right}
.partner-strip{min-height:80px;padding:20px 7%;justify-content:center;gap:30px;background:#101d33;border:0}
.partner-strip>span{font-size:var(--type-small);letter-spacing:3px;color:#d1dae9}
.partner-strip strong{font-size:var(--type-body);letter-spacing:0;border-left:1px solid #8692aa;padding-left:30px}
.partner-strip strong small{color:var(--fire-red);font-weight:700}
.partner-strip p{display:none}
.partner-strip a{margin-left:0;border-left:1px solid #8692aa;padding-left:30px;font-size:var(--type-small);letter-spacing:1px;color:#e8edf5}
.partner-strip a span{display:none}
.technology{padding-top:70px}
.technology .section-head{align-items:center;gap:45px}
.technology .section-head h2{font-weight:700;font-size:var(--type-display);letter-spacing:-2px;line-height:1.12}
.technology .section-head h2 em{font-style:normal;color:var(--fire-red)}
.technology .section-label{margin-bottom:24px}
.technology .section-head>p{font-size:var(--type-small)}
.intro{border-bottom:1px solid var(--line)}
.model-grid article{border-radius:5px;min-height:380px;padding:32px}
.model-grid article.featured{background:linear-gradient(130deg,var(--fire-red),var(--fire-red));border-color:var(--fire-red)}
.model-grid h3{font-size:var(--type-display);font-weight:700;margin:28px 0 13px}
.model-grid .micro{font-size:var(--type-small);letter-spacing:1.5px}
.model-grid p{font-size:var(--type-small);color:#d8e0ed}
.model-grid ul{font-size:var(--type-small);line-height:1.7;padding-top:20px}
.model-grid li{margin:14px 0;padding-left:22px}
.model-grid li:before{font-size:var(--type-body);line-height:1;color:var(--fire-red)}
.model-grid .featured li:before{color:#fff}
.model-grid a{font-size:var(--type-small)}
.live{background:#0e2045}
footer>.brand img{width:180px}
@media(min-width:1600px){.hero{height:700px;min-height:700px}.hero-copy{padding-top:45px}.hero-artwork{width:67%}.hero h1{font-size:var(--type-display)}}
@media(max-width:1150px){header{padding:0 4%}.brand img{width:195px}nav{gap:19px;font-size:var(--type-small)}.nav-contact{padding:9px 14px}.hero{height:600px;min-height:600px}.hero h1{font-size:var(--type-display);letter-spacing:-2px}.hero-copy{width:53%;padding-top:40px}.hero-artwork{right:-4%;width:70%;top:35px;bottom:60px}.hero .button{font-size:var(--type-small);padding:14px 18px}.hero .text-link{font-size:var(--type-small)}.hero-actions{gap:22px}.hero-top .eyebrow{letter-spacing:2px;font-size:var(--type-small)}.model-grid article{padding:26px 22px}.model-grid ul{font-size:var(--type-small)}.model-grid p{font-size:var(--type-small)}}
@media(max-width:760px){header{height:74px;padding:0 6%}.brand img{width:180px}nav{top:74px;font-size:var(--type-small);gap:0}.nav-contact{margin:12px 0 0;padding:12px}nav a.active:not(.nav-contact){text-underline-offset:5px}.hero{height:auto;min-height:850px;padding:30px 6% 335px}.hero-top{margin:0}.hero-top .eyebrow{font-size:var(--type-small);letter-spacing:1.4px;gap:9px}.hero-copy{padding-top:40px;width:100%}.hero h1{font-size:var(--type-display);line-height:.9;letter-spacing:-1.5px;margin-bottom:23px}.hero-copy p{font-size:var(--type-body);line-height:1.65}.hero-actions{gap:23px;margin-top:25px}.hero .button{font-size:var(--type-small);padding:14px 19px}.hero .text-link{font-size:var(--type-small);gap:7px}.hero-artwork{width:100%;height:355px;top:auto;bottom:52px;right:0;opacity:1}.hero-artwork img{object-fit:contain;mask-image:linear-gradient(180deg,transparent 0,#000 10%,#000 95%,transparent 100%);object-position:center}.hero-artwork:after{background:linear-gradient(180deg,#080e1b 0%,transparent 15%,transparent 90%,#080e1b 100%)}.hero-bottom{bottom:20px;left:6%;right:6%;font-size:var(--type-small);letter-spacing:1.5px;gap:15px}.hero-bottom .hero-signoff{font-size:var(--type-small);letter-spacing:.7px;max-width:110px}.hero-bottom:after{display:none}.partner-strip{padding:23px 6%;gap:15px;justify-content:center;flex-wrap:wrap}.partner-strip>span{font-size:var(--type-small);letter-spacing:1.5px}.partner-strip strong{font-size:var(--type-body);padding-left:17px}.partner-strip a{font-size:var(--type-small);padding-left:0;border:0;width:100%;text-align:center}.technology .section-head h2{font-size:var(--type-display);letter-spacing:-1.4px}.technology .section-head>p{margin-top:22px}.model-grid article{min-height:0;padding:28px}.model-grid h3{font-size:var(--type-display)}.model-grid ul{font-size:var(--type-small)}.model-grid p{font-size:var(--type-small)}.model-grid a{font-size:var(--type-small)}.partner-strip p{display:none}.intro{padding-top:65px;padding-bottom:65px}.contact .email-link{font-size:var(--type-small)}}
@media(max-width:390px){.hero h1{font-size:var(--type-display)}.hero-top .eyebrow{font-size:var(--type-small);letter-spacing:1.15px}.hero-copy p{font-size:var(--type-small)}.hero .button{font-size:var(--type-small);padding:13px 16px}.hero-actions{gap:16px}.hero .text-link{font-size:var(--type-small)}.hero{min-height:820px}.hero-artwork{height:330px}.technology .section-head h2{font-size:var(--type-display)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Official XT4 photograph, kept clear of the product caption. */
.device-feature{display:flex;flex-direction:column;justify-content:flex-start;min-height:480px}
.xt4-product{display:block;width:100%;height:285px;object-fit:contain;margin:16px 0 20px;mix-blend-mode:multiply}
.device-feature>div:last-child{margin-top:0;max-width:100%}
.device-feature h3{margin-bottom:10px}
@media(max-width:760px){.device-feature{min-height:450px}.xt4-product{height:280px;margin:14px 0 20px}}

/* The approved XT4 artwork shares the homepage's event lighting. */
.device-feature{background:#080e1b;color:#f5f7fc;padding:0;min-height:0}
.device-feature>.micro{padding:26px 30px 0;position:relative;z-index:2;color:#b5c4df}
.xt4-product{height:auto;width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:normal;margin:0}
.device-feature>div:last-child{padding:25px 30px 30px;background:#0b1425;margin:0}
.device-feature h3{color:#f5f7fc}
.technology .device-feature p{color:#b5c4df}
@media(max-width:760px){.device-feature{min-height:0}.xt4-product{height:auto;margin:0}.device-feature>.micro{padding:22px 25px 0}.device-feature>div:last-child{padding:22px 25px 25px}}

/* Coordinated founder portraits: preserve the complete square composition. */
.portrait{aspect-ratio:1;background:#080e1b}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center}
.portrait>span{color:#e1e9fa;text-shadow:0 1px 5px #080e1b}
@media(max-width:1050px){.portrait{aspect-ratio:1}.portrait img{object-position:center}}
@media(max-width:760px){.portrait{aspect-ratio:1}.portrait img{object-position:center}}
@media(max-width:370px){.portrait{aspect-ratio:1}.portrait img{object-position:center}}

.services-overview { background: #f0f3f8; color: #111b2b; }
.services-overview .section-label { color: #59667a; margin-bottom: 20px; }
.services-intro { display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 19vw, 250px); align-items: center; gap: clamp(24px, 6vw, 96px); margin-bottom: 40px; }
.services-intro img { display: block; width: 100%; height: auto; border-radius: 6px; }
.services-intro h2 { margin-bottom: 18px; }
.services-overview p { color: #49576b; margin: 0; }
.services-intro p { max-width: 55ch; }
.services-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.services-grid article { background: #fff; border-top: 3px solid var(--fire-red); padding: 24px; scroll-margin-top: 100px; }
.services-grid h3 { margin: 0 0 12px; }
@media (max-width: 760px) {
  .services-intro { grid-template-columns: 1fr; gap: 22px; margin-bottom: 26px; }
  .services-intro img { max-width: 180px; }
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* Shared color and type scale for the consolidated site. */
.nav-contact, .nav-contact:hover { color: #fff; }
.button:hover { box-shadow: 0 0 0 2px var(--fire-red); }
.model-grid article.featured { background: var(--fire-red); border-color: var(--fire-red); }
.hero h1 { letter-spacing: -0.03em; line-height: 1; }
.hero-copy p, .services-overview p, input, select, textarea { font-size: var(--type-body); }
.services-grid p { line-height: 1.5; }
.portrait > span { background: #080e1be6; padding: 4px 8px; max-width: calc(100% - 24px); font-weight: 600; line-height: 1.25; }
@media (max-width: 760px) {
  .hero { height: auto; min-height: 0; padding-bottom: 94px; }
  .hero-copy { padding-top: 26px; }
  .hero-artwork { position: relative; inset: auto; height: auto; aspect-ratio: 3 / 2; margin-top: 16px; }
  .hero-bottom { flex-wrap: wrap; gap: 4px 18px; }
  .hero-bottom .hero-signoff { text-align: left; max-width: none; }
}
small { font-size: var(--type-small); }

/* Industrial styling inspired by the reference layout. */
:root {
  --industrial-surface: #101824;
  --industrial-border: #354356;
  --industrial-muted: #b5c4d8;
}

header { background: #080e1bf5; border-bottom: 1px solid var(--industrial-border); }
nav a { text-transform: uppercase; letter-spacing: .06em; }
.nav-contact { background: var(--fire-red); }
.nav-contact:hover { background: var(--fire-red); box-shadow: 0 0 0 2px var(--fire-red); }

.hero-grid {
  display: block;
  background-image:
    linear-gradient(#8da8cd12 1px, transparent 1px),
    linear-gradient(90deg, #8da8cd12 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
}
.hero-top .eyebrow {
  border: 1px solid var(--industrial-border);
  border-radius: 100px;
  padding: 6px 12px;
  background: #101824;
  letter-spacing: .1em;
}
.hero h1 { font-family: 'Barlow Condensed', Impact, sans-serif; }
.hero h1 .outline-word {
  color: #f5f7fc;
}
@supports (-webkit-text-stroke: 1px white) {
  .hero h1 .outline-word { color: transparent; -webkit-text-stroke: 1px #f5f7fc; }
}
.hero .text-link {
  border: 1px solid var(--industrial-border);
  border-radius: 5px;
  padding: 13px 17px;
  background: #080e1be6;
}
.hero .text-link:hover { color: #fff; border-color: var(--fire-red); }
.partner-strip { border-block: 1px solid var(--industrial-border); background: var(--industrial-surface); }

.section h2 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}
.section .section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--industrial-muted);
}
.section .section-label::before {
  content: '';
  width: 20px;
  height: 2px;
  background: var(--fire-red);
  flex: 0 0 auto;
}
.services-overview { background: #0b1220; color: #f5f7fc; }
.services-overview p { color: var(--industrial-muted); }
.services-intro img { border: 1px solid var(--industrial-border); }
.services-grid article {
  background: var(--industrial-surface);
  border: 1px solid var(--industrial-border);
  border-top: 3px solid var(--fire-red);
  border-radius: 6px;
}
.services-grid h3 { font-weight: 700; }
.service-number {
  display: inline-block;
  font-size: var(--type-small);
  font-weight: 700;
  color: #e3eaf6;
  border-bottom: 2px solid var(--fire-red);
  margin-bottom: 14px;
  padding-bottom: 4px;
}
.model-grid article { border: 1px solid var(--industrial-border); }
.model-grid article.featured {
  background: #151c29;
  border: 1px solid var(--fire-red);
  border-top: 3px solid var(--fire-red);
}
.model-grid article.featured .micro { color: #fff; }
.about { border-block: 1px solid var(--industrial-border); }
.contact { background: #0b1220; color: #f5f7fc; }
.contact .large-copy, .contact .next-steps span, .contact .form-note { color: var(--industrial-muted); }
.contact .next-steps b, .contact label { color: #e5edf9; }
.contact a.email-link { color: #e5edf9; overflow-wrap: anywhere; }
.contact input, .contact select, .contact textarea {
  background: var(--industrial-surface);
  border-color: var(--industrial-border);
  color: #f5f7fc;
  color-scheme: dark;
}
.contact input::placeholder, .contact textarea::placeholder { color: #a4b3c8; }
@media (max-width: 760px) {
  .hero-top .eyebrow { white-space: normal; }
  .services-grid article { padding: 20px; }
}
@media (forced-colors: active) {
  .hero h1 .outline-word { color: CanvasText; -webkit-text-stroke: 0; }
}

.home-positioning > p { display: block; margin: 0; color: #e8edf5; font-size: var(--type-body); text-align: center; line-height: 1.5; }

.hero-bottom { font-size: var(--type-small); font-weight: 500; line-height: 1.5; letter-spacing: normal; color: #d9deea; }
.hero-bottom .hero-signoff { font: inherit; letter-spacing: inherit; color: inherit; }

.home-positioning { flex-direction: column; gap: 6px; padding-block: 24px; }
@media (max-width: 760px) { .hero { padding-bottom: 24px; } }

/* Fit the three-pedestal artwork alongside the homepage copy. */
@media (min-width: 761px) {
  .hero-artwork { width: 76%; right: 0; }
}
@media (max-width: 760px) {
  .hero-artwork { max-width: 640px; margin-inline: auto; }
}

/* Slightly larger GTX artwork within the existing hero frame. */
.hero-artwork img { transform: scale(1.19); }

.about-quote {
  color: var(--muted);
  font-size: var(--type-body);
  letter-spacing: normal;
}
.bio > .bio-experience {
  display: block;
  margin-top: 6px;
  color: #a8b2c5;
  letter-spacing: normal;
  font-weight: 400;
}
@media (max-width: 760px) {
  .about-quote { font-size: var(--type-small); }
}

.about-quote { font-family: 'Barlow Condensed', Impact, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: var(--type-body); }
@media (min-width: 1000px) { .about-quote { font-size: 34px; } }

/* Keep product movement within each image frame. */
.services-artwork {
  overflow: hidden;
  border: 1px solid var(--industrial-border);
  border-radius: 6px;
}
.services-artwork img { border: 0; border-radius: 0; }
@media (max-width: 760px) {
  .services-artwork { max-width: 180px; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-artwork { --pan-start: -3%; }
  .services-artwork { --pan-start: 3%; }
  .services-artwork img { transform: scale(1.08); }
  .product-pan img { animation: product-pan 9s ease-in-out infinite alternate; animation-play-state: paused; }
  .product-pan.is-in-view img { animation-play-state: running; }
}

@keyframes product-pan {
  from { translate: 0 0; scale: 1; }
  to { translate: var(--pan-start) 0; scale: 1.07; }
}


/* Feather the stationary frames so the edges stay soft throughout the pan. */
.hero-artwork {
  right: 0;
  mask-image: linear-gradient(90deg, transparent, #000 21%, #000 88%, transparent),
              linear-gradient(180deg, transparent, #000 13%, #000 83%, transparent);
  mask-composite: intersect;
}
.hero-artwork img {
  /* Fit the element to the photo so the mask starts at its visible edge. */
  position: absolute;
  inset-block: 0;
  right: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-block: auto;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 82%, transparent);
}
.hero-artwork::after { content: none; }

.services-artwork {
  border-color: transparent;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}
/* Preserve the feathered frame on browsers that lack layered mask support. */
@supports not (mask-composite: intersect) {
  .hero-artwork, .services-artwork {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 86%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 86%, transparent);
  }
  .hero-artwork::after, .services-artwork::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, #080e1b, transparent 15%, transparent 83%, #080e1b);
  }
  .services-artwork { position: relative; }
  .services-artwork::after {
    background: linear-gradient(180deg, #0b1220, transparent 14%, transparent 86%, #0b1220);
  }
}

/* Scale the homepage message together while keeping room for the product image. */
.hero {
  --hero-small: clamp(17px, 1.15vw, 20px);
  --hero-body: clamp(22px, 1.6vw, 28px);
  --hero-display: clamp(74px, 6.2vw, 108px);
}
.hero-top .eyebrow,
.hero .button,
.hero .text-link { font-size: var(--hero-small); }
.hero-top .eyebrow { padding: 9px 15px; }
.hero h1 { font-size: var(--hero-display); }
.hero-copy p { font-size: var(--hero-body); }
.hero .button,
.hero .text-link { padding: 19px 25px; }
.hero-actions { flex-wrap: wrap; gap: 14px 24px; }

@media (max-width: 760px) {
  .hero { --hero-display: clamp(58px, 10vw, 74px); }
  .hero-top .eyebrow { padding: 8px 12px; }
  .hero .button,
  .hero .text-link { padding: 14px 17px; }
}

/* Let the oversized, muted GTX photo sit behind the hero copy. */
.hero-artwork {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 75%, transparent);
  mask-composite: add;
}
.hero-artwork img {
  inset-block: 50% auto;
  right: 4%;
  width: 105%;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  transform: translateY(-49%);
  filter: grayscale(1);
  opacity: .46;
  mask-image: linear-gradient(90deg, transparent, #000 23%, #000 78%, transparent);
}
.hero-artwork::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #080e1baf, #080e1b65 40%, transparent 72%);
}
@media (max-width: 760px) {
  .hero { padding-bottom: 66px; }
  .hero-artwork { aspect-ratio: auto; }
  .hero-artwork img { width: 165%; right: -18%; }
  .hero-artwork::after { background: #080e1b65; }
}

/* Center the message and place the muted pedestals around it. */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: 42px;
  text-align: center;
}
.hero-top { justify-content: center; margin-top: 0; }
.hero-copy { width: 100%; max-width: 720px; padding-top: 28px; }
.hero h1 { margin-inline: auto; }
.hero-actions { justify-content: center; }
.hero-artwork img { right: -3%; }
.hero-artwork::after {
  background: radial-gradient(ellipse at center, #080e1b75, transparent 72%);
}
@media (max-width: 760px) {
  .hero { min-height: 510px; padding-block: 42px; }
  .hero-artwork img { right: -26%; }
}

/* Give the full-width homepage backdrop a wider sweep than the scanner image. */
@media (prefers-reduced-motion: no-preference) {
  .hero-artwork.product-pan img {
    animation-name: hero-backdrop-sweep;
    animation-duration: 6s;
  }
}
@keyframes hero-backdrop-sweep {
  0% { translate: -7% 0; scale: 1; }
  50% { scale: 1.2; }
  100% { translate: 7% 0; scale: 1; }
}

.hero { isolation: isolate; }
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.hero-video video,
.models-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .8;
}
.hero-video::after,
.models-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, #071b4773, #0a297b30 70%, #08132f83),
              linear-gradient(180deg, #080e1bb8, #102e6d25 26%, #102e6d25 60%, #080e1b 98%);
}
.hero-video-toggle {
  position: absolute;
  z-index: 4;
  right: 4%;
  top: 18px;
  padding: 5px 8px;
  font-size: .8rem;
  border: 1px solid #ffffff45;
  border-radius: 6px;
  background: #080e1be8;
  color: #fff;
}

/* Keep each line of the centered hero message together. */
.hero-copy { max-width: 1100px; }
.hero-copy p { white-space: nowrap; }

@media (max-width: 760px) {
  .hero {
    --hero-display: clamp(32px, 9.1vw, 66px);
    --hero-body: clamp(8px, 2.7vw, 20px);
  }
}

.hero-actions {
  display: inline-grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  align-items: stretch;
  max-width: 100%;
}
.hero-actions > a { justify-content: center; }

@media (max-width: 560px) {
  .hero-actions { grid-template-columns: 1fr; }
}

.hero .text-link, .hero .text-link:hover { border-color: #080e1b; }

@media (min-width: 761px) {
  header nav {
    position: absolute;
    inset: 0 4.2%;
    justify-content: center;
    pointer-events: none;
  }
  header nav a { pointer-events: auto; }
  header nav .nav-contact {
    position: absolute;
    right: 0;
    margin-left: 0;
  }
}

.services-intro h2 { font-size: clamp(36px, 5.1vw, 76px); margin-bottom: 0; }

.services-artwork { position: relative; }
.services-artwork .services-pedestals {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 83%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .services-artwork.product-pan img {
    animation: services-pan-zoom 8s ease-in-out infinite alternate, services-image-cycle 10s ease-in-out infinite;
    animation-play-state: paused;
  }
  .services-artwork.product-pan .services-pedestals { animation-delay: 0s, -5s; transform: scale(1.37); }
  .services-artwork.product-pan.is-in-view img { animation-play-state: running; }
}
@keyframes services-image-cycle {
  0%, 35%, 100% { opacity: 1; }
  50%, 85% { opacity: 0; }
}

@media (min-width: 761px) {
  .services-overview { isolation: isolate; }
  .services-intro {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    min-height: clamp(180px, 19vw, 250px);
  }
  .services-intro > :first-child,
  .services-grid { position: relative; z-index: 2; }
  .services-artwork {
    position: absolute;
    z-index: 1;
    top: -94px;
    right: 5%;
    width: min(43%, 420px);
    aspect-ratio: 1;
    opacity: .75;
    mask-image: linear-gradient(90deg, transparent, #000 20%, #000 85%, transparent),
                linear-gradient(180deg, transparent, #000 12%, #000 55%, transparent 95%);
  }
  .services-grid #operations,
  .services-grid #live-events { background: #121925e8; }
}
@media (max-width: 760px) {
  .services-artwork {
    width: min(100%, 340px);
    max-width: none;
    justify-self: center;
  }
  .services-artwork img { max-width: none; }
}

.services-grid h3 { font-size: clamp(21px, 2vw, 28px); }
.services-grid article { container-type: inline-size; }
.services-grid .sales-summary {
  display: grid;
  gap: 10px;
  color: #fff;
  font-size: clamp(13px, 5.25cqi, 17px);
  font-weight: 700;
  text-align: center;
}
.sales-row {
  display: block;

}
.sales-row > span {
  display: inline-block;
  padding-inline: 5px;
  background: #121925;
}

.services-grid :is(#technology, #operations, #live-events) h3 {
  font-size: clamp(18px, 7.5cqi, 28px);
  text-transform: uppercase;
}

.sales-row-process {
  color: var(--fire-red);
  background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat;
}


/* Open columns with line icons and vertical dividers. */
.services-grid { gap: 0; }
.services-grid article {
  padding: 18px clamp(16px, 2.5vw, 36px) 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.services-grid #operations,
.services-grid #live-events { background: transparent; }
.services-grid article + article { border-inline-start: 1px solid #a9b8d04a; }
.services-grid h3 {
  font-size: clamp(19px, 7.5cqi, 27px);
  text-transform: uppercase;
  margin: 18px 0 10px;
}
.services-grid :is(#technology, #operations, #live-events) h3 { font-size: clamp(20px, 8.1cqi, 29px); }
.services-grid .sales-summary { text-align: left; }
.sales-row-process {
  background: none;
  color: #f93825;
  word-spacing: .4em;
}
.sales-row-process > span { display: block; padding: 0; background: transparent; }

.service-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  color: var(--fire-red);
}
.service-icon::before, .service-icon::after {
  content: '';
  position: absolute;
  box-sizing: border-box;
}
.service-icon-device::before {
  inset: 2px 6px;
  border: 2px solid;
  border-radius: 5px;
}
.service-icon-device::after {
  width: 8px;
  height: 2px;
  background: currentColor;
  left: 13px;
  bottom: 8px;
}
.service-icon-link::before, .service-icon-link::after {
  width: 20px;
  height: 12px;
  border: 2px solid;
  border-radius: 8px;
  transform: rotate(-42deg);
}
.service-icon-link::before { left: 1px; top: 16px; }
.service-icon-link::after { left: 12px; top: 6px; }
.service-icon-support::before {
  inset: 4px 3px 7px;
  border: 2px solid;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
}
.service-icon-support::after {
  inset: 18px 3px 5px;
  border-inline: 5px solid;
  border-radius: 4px;
}
@media (min-width: 761px) {
  .services-grid {
    background: linear-gradient(180deg, transparent, #0e1521e8 35%, transparent);
  }
}
@media (max-width: 760px) {
  .services-grid article { padding-inline: 0; }
  .services-grid article + article {
    border-inline-start: 0;
    border-top: 1px solid #a9b8d04a;
  }
}

.services-grid :is(#technology, #operations, #live-events),
.services-grid :is(#technology, #operations, #live-events) .sales-summary { text-align: center; }
.services-grid :is(#technology, #operations, #live-events) .service-icon {
  margin-inline: auto;
  transform: scale(1.15);
}
.services-grid :is(#technology, #operations, #live-events) .sales-summary {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(25px, 10cqi, 36px);
  line-height: 1.05;
  text-transform: uppercase;
}

.access-control-label, #live-events .sales-row-process { word-spacing: .1em; }


@keyframes services-pan-zoom {
  from { translate: 0 0; scale: 1; }
  to { translate: var(--pan-start) 0; scale: 1.14; }
}
/* Carry the centered hero and open Services columns into the program options. */
.models {
  background: linear-gradient(180deg, #0e1521, #080e1b);
}
.models .section-label,
.models .section-head { text-align: center; }
.models .section-head {
  display: block;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.models .section-head h2 { font-size: clamp(36px, 5.1vw, 76px); }
.models .section-head > p {
  width: auto;
  max-width: 60ch;
  margin: 14px auto 0;
  font-size: var(--type-body);
}
.model-grid { gap: 0; }
.model-grid article {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 12px clamp(16px, 2.5vw, 36px) 20px;
  text-align: center;
}
.model-grid article + article { border-inline-start: 1px solid #a9b8d04a; }
.model-grid h3 {
  justify-content: center;
  color: #f93825;
  margin: 12px 0 6px;
}
.model-grid p { margin-bottom: 0; }
.model-grid ul {
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 24px;
  padding: 0;
  border: 0;
  text-align: left;
}
.model-grid a {
  align-self: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 16rem;
  padding: 12px 10px;
  border: 1px solid var(--fire-red);
  border-radius: 7px;
  background: #080e1b;
  text-align: center;
}
.model-grid a:hover { background: var(--fire-red); color: #fff; }
@media (max-width: 760px) {
  .model-grid article { padding-block: 24px; }
  .model-grid article + article {
    border-inline-start: 0;
    border-top: 1px solid #a9b8d04a;
  }
}

.models { position: relative; isolation: isolate; }
.models-video {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: clamp(390px, 49vw, 575px);
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(180deg, transparent, #000 13%, #000 55%, transparent);
}
@media (max-width: 760px) {
  .hero-video-toggle { top: 12px; }
}

.about { background: linear-gradient(180deg, #080e1b, #0e1521); padding-top: clamp(53px, calc(7.4vw - 12px), 84px); }
.about .section-head {
  display: block;
  margin-bottom: clamp(36px, 5vw, 64px);
  text-align: center;
}
.about .section-head h2 { font-size: clamp(36px, 5.1vw, 76px); }
.about .section-head > p {
  width: auto;
  max-width: 60ch;
  margin: 14px auto 0;
  font-size: var(--type-body);
}
.about .founders { gap: 0; }
.about .founders article {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 0 clamp(20px, 4vw, 60px) 24px;
  text-align: center;
}

.about .portrait {
  width: min(100%, 264px);
  aspect-ratio: 1;
  mask-image: radial-gradient(ellipse 60% 60% at center, #000 52%, transparent 87%);
}
.about .founders article:first-child .portrait img { transform: scale(1.1); }
.about .bio { max-width: 42ch; }
.about .bio h3 {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  text-transform: uppercase;
}
.about .bio > span:first-of-type { color: #f93825; }
.about .about-quote {
  margin-top: 16px;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(14px, 4vw, 40px);
  color: #f5f7fc;
}

@media (max-width: 760px) {
  .about .founders article { padding-inline: 0; }
  .about .founders article + article { padding-top: 24px; }
}

.about .about-quote span { color: #f93825; }

.contact {
  background: linear-gradient(180deg, #080e1bd0 0%, #080e1bc2 34%, #080e1bec 78%, #080e1b 100%),
              #080e1b url('assets/blue-haze-concert.png') center top / cover no-repeat;
}
.contact .contact-intro {
  display: block;
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 64px);
}
.contact .contact-intro h2 { font-size: clamp(36px, 5.1vw, 76px); }
.contact .contact-intro > p {
  width: auto;
  max-width: 60ch;
  margin: 14px auto 18px;
  font-size: var(--type-body);
}
.contact .email-link { display: inline-block; border-color: var(--fire-red); }
.contact-layout {
  max-width: 960px;
  margin-inline: auto;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: clamp(28px, 5vw, 64px);
}
.contact .next-steps { margin: 0; }
.contact .next-steps li {
  margin: 0;
  padding-block: 18px;
}
.contact .next-steps li + li { border-top: 1px solid #a9b8d04a; }
.contact .next-steps b { color: #f93825; margin-bottom: 6px; }
.contact .next-steps span { font-size: var(--type-body); }
.contact :is(input, select, textarea, .button) { border-radius: 7px; }
@media (min-width: 761px) {
  .contact form {
    border-inline-start: 1px solid #a9b8d04a;
    padding-inline-start: clamp(28px, 5vw, 64px);
  }
}
@media (max-width: 760px) {
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact form { border-top: 1px solid #a9b8d04a; padding-top: 28px; }
}


.contact .contact-intro > p,
.contact .next-steps span,
.contact .form-note { color: #e1e9f5; }

@media (min-width: 761px) {
  .about { padding-top: clamp(16px, 3svh, 48px); }
  .about .section-label { margin-bottom: clamp(12px, 2svh, 30px); }
  .about .section-head { margin-bottom: clamp(14px, 3svh, 46px); }
  .about .founders article { gap: clamp(8px, 1.5svh, 18px); }
  .about .portrait { width: min(100%, clamp(145px, calc(36svh - 55px), 264px)); }
  .about .bio p { margin-top: 12px; line-height: 1.6; }
}

@media (min-width: 761px) and (max-height: 780px) {
  .about .section-head h2 { font-size: clamp(34px, min(5.1vw, 7.4svh), 60px); }
  .about .section-head > p { margin-top: 8px; }
  .about .bio h3 { font-size: clamp(24px, 4.5svh, 34px); }
}
