/* V24 — a single design system; targeted overrides on the V23 foundation. */
:root {
  --warm-white: #f4f9fd;
  --blue-fog: #cee8f9;
  --dark-blue: #06111d;
}
html,body {
  overflow-x: clip;
}
.stage {
  isolation: isolate;
}
/* HERO: keep only the V17 20px mist overlay inside the first viewport. */
.hero-mist {
  position: absolute !important;
  bottom: 0 !important;
  left: 0;
  right: 0;
  height: 26px !important;
  z-index: 16;
  pointer-events: none;
  overflow: visible !important;
  background: linear-gradient(180deg,transparent 0%,rgba(117,169,208,.03) 36%,rgba(189,221,246,.10) 74%,rgba(224,241,252,.16) 100%) !important;
  filter: blur(.2px);
}
.hero-mist::before {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  bottom: 2px;
  height: 42px;
  background: radial-gradient(ellipse 17% 62% at 7% 95%,rgba(255,255,255,.55),transparent 72%),radial-gradient(ellipse 16% 68% at 20% 100%,rgba(228,240,250,.65),transparent 74%),radial-gradient(ellipse 18% 60% at 37% 88%,rgba(247,252,255,.58),transparent 76%),radial-gradient(ellipse 16% 72% at 54% 98%,rgba(220,236,248,.72),transparent 74%),radial-gradient(ellipse 20% 64% at 71% 88%,rgba(255,255,255,.52),transparent 75%),radial-gradient(ellipse 18% 74% at 88% 100%,rgba(225,238,248,.64),transparent 73%);
  filter: blur(8px);
  animation: mistRise 11s ease-in-out infinite alternate;
}
.hero-mist::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 36px;
  background: radial-gradient(ellipse 22% 88% at 14% 100%,#e1f3ff6f,transparent 73%),radial-gradient(ellipse 24% 84% at 45% 100%,#f7fbff6a,transparent 74%),radial-gradient(ellipse 21% 86% at 79% 100%,#fff7,transparent 72%);
  filter: blur(10px);
  animation: v17MistTide 8s ease-in-out infinite alternate;
}
@keyframes v17MistTide {
  from {
    transform: translate3d(-7%,2px,0) scale(1.03);
  }
  to {
    transform: translate3d(7%,-2px,0) scale(1.05);
  }
}
@keyframes mistRise {
  0% {
    transform: translate3d(-2%,4px,0) scale(1.01);
  }
  50% {
    transform: translate3d(1%,0,0) scale(1.05);
  }
  100% {
    transform: translate3d(3%,-4px,0) scale(1.02);
  }
}
.hero .scroll {
  z-index: 21;
  bottom: 42px;
  filter: drop-shadow(0 0 6px #42b8ff);
}
/* Gradual transition immediately after the video; not another opaque strip of fog. */
.transition {
  position: relative;
  z-index: 4;
  pointer-events: none;
  height: 90px;
  overflow: visible;
  background: var(--dark-blue);
  margin: 0;
}
.transition svg {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: none !important;
  transform: none !important;
}
.transition.hero-seam {
  height: 138px;
  background: linear-gradient(180deg,#030a10 0%,#12283b 21%,#61849f 53%,#bed4e4 81%,#eaf3f9 100%);
}
.transition.philo-seam {
  background: #06111d;
}
.transition.media-seam {
  background: #edf5fa;
}
/* Seam gradient belongs to the previous and next scene colors. */
.philosophy {
  background: linear-gradient(180deg,#eaf3f9 0%,#f6fbff 22%,#f4f9fd 100%);
  min-height: 750px;
  overflow: hidden !important;
}
.philosophy .wrap {
  padding-top: 76px;
  padding-bottom: 90px;
}
.ph-grid {
  display: block;
  position: relative;
  min-height: 625px;
  overflow: visible;
}
.ph-copy {
  z-index: 8;
  position: relative;
  max-width: 100%;
}
.ph-title {
  font-family: "Playfair Display",Georgia,"Times New Roman",serif;
  letter-spacing: 0 !important;
  font-weight: 700;
  line-height: .83;
  font-size: clamp(76px,9.1vw,150px);
  white-space: nowrap;
  margin: 18px 0 28px;
  position: relative;
  z-index: 8;
  max-width: none;
}
.ph-title .line {
  white-space: nowrap;
}
.ph-copy .statement {
  font-size: clamp(23px,2.45vw,37px);
  line-height: 1.6;
  letter-spacing: .01em;
  margin-top: 30px;
  margin-bottom: 15px;
}
.ph-copy .description {
  max-width: 430px;
  color: #506983;
  line-height: 2.15;
}
.ph-action {
  font-weight: 500;
  border: none;
  letter-spacing: .19em;
  border-bottom: 1px solid #9cb2c7;
  transition: letter-spacing .3s,color .3s;
}
.ph-action:hover {
  letter-spacing: .23em;
  color: #147dd0;
}
.person {
  position: absolute;
  right: -2.8%;
  bottom: -93px;
  top: auto;
  width: clamp(390px,37vw,570px);
  height: 690px;
  z-index: 4;
  pointer-events: none;
}
.person img {
  inset: auto 0 0 auto;
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  filter: contrast(1.05) saturate(.92);
}
.glitch-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 13;
  contain: layout;
  mix-blend-mode: normal;
}
.glitch-overlay .px-cell {
  position: absolute;
  display: block;
  box-shadow: none;
  opacity: 0;
  will-change: opacity;
  transition: none !important;
  transform: none !important;
}
.glitch-overlay .px-cell.missing {
  opacity: 1 !important;
  background: #f4f9fd !important;
  box-shadow: none;
}
.glitch-overlay .px-cell.signal {
  background: rgba(32,119,210,.71);
  box-shadow: 0 0 11px #188ff32a;
}
.glitch-overlay .px-cell.signal.deep {
  background: #061c31c7;
  box-shadow: none;
}
.glitch-overlay .px-cell.signal.icy {
  background: rgba(175,219,249,.91);
  box-shadow: 0 0 10px #c1e8ff80;
}
.ph-grid::after {
  content: "";
  position: absolute;
  right: 13%;
  bottom: -42px;
  width: 46%;
  height: 150px;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse at 59% 100%,rgba(6,138,255,.36),transparent 66%);
  filter: blur(19px);
}
/* The photographed silhouette stays whole, only block-occluded in the requested left-edge band. */
/* Tilt planes all share one perspective, with an intentional front-facing rollover. */
.service {
  padding: 0 0 70px;
  background: radial-gradient(ellipse at 58% 4%,#183d60 0%,transparent 52%),linear-gradient(135deg,#030912,#061929 60%,#06111d);
}
.service>.wrap {
  padding-top: 55px;
  padding-bottom: 58px;
}
.service-header {
  margin-bottom: 34px;
}
.service-header .statement {
  font-size: clamp(29px,2.8vw,45px);
}
.service-grid {
  perspective: 1500px;
  gap: clamp(11px,1.6vw,25px);
  padding: 24px 25px 45px;
  grid-template-columns: repeat(5,minmax(0,1fr));
}
.service-card {
  transform: perspective(1100px) rotateY(-17deg) rotateX(1deg) !important;
  transform-origin: 50% 50%;
  border-radius: 13px;
  box-shadow: 22px 25px 34px #0008;
  overflow: hidden;
}
.service-card:hover,.service-card:focus-within {
  transform: perspective(1100px) rotateY(0deg) rotateX(0deg) translateY(-3px) !important;
  box-shadow: 0 29px 47px #000a,0 0 18px #147bda48;
}
.service-card .pic {
  aspect-ratio: 3/4;
}
.service-card .meta {
  padding: 15px 13px;
}
.service-card h3 {
  font-size: clamp(13px,1.24vw,18px);
}
/* Actual smoke will be rendered in WebGL into a transparent canvas. */
.smoke-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  height: 180px;
  z-index: 9;
  pointer-events: none;
  overflow: hidden;
}
.smoke-canvas {
  display: block;
  width: 100%;
  height: 100%;
  filter: blur(1px);
}
.smoke-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,transparent 18%,rgba(240,248,255,.03) 56%,rgba(247,252,255,.17) 100%);
  pointer-events: none;
}
/* Avoid the radial-circle fog of the earlier version. */
.transition .fog {
  display: none !important;
}
/* About — keep the real transparent infinity mark, animate only aura/smoke around it. */
.about {
  background: linear-gradient(180deg,#edf5fa 0%,#f8fbff 48%,#f1f7fb 100%);
}
.about .wrap {
  padding-top: 90px;
  padding-bottom: 90px;
}
.about-grid {
  grid-template-columns: 35% 65%;
}
.about-visual {
  min-height: 370px;
}
.about-visual .infinity {
  max-width: 850px;
}
.about-aura {
  filter: blur(22px);
  opacity: .75;
  animation-duration: 17s;
}
.about-smoke {
  z-index: 5;
  height: 88px;
  bottom: -18px;
  opacity: .55;
  background: radial-gradient(ellipse 28% 75% at 20% 110%,#fff9,transparent 75%),radial-gradient(ellipse 31% 80% at 70% 110%,#e1f4ff8a,transparent 80%);
  filter: blur(15px);
  animation: softMist 8s ease-in-out infinite alternate;
}
@keyframes softMist {
  from {
    transform: translateY(15px) scale(1);
  }
  to {
    transform: translateY(-15px) scale(1.04);
  }
}
/* Media uniformly angled in depth, only raises to facing direction on hover. */
.media {
  background: radial-gradient(ellipse at 50% 0%,#102d4c,#05101d 55%,#030b13);
}
.media .wrap {
  padding-top: 66px;
  padding-bottom: 90px;
}
.media-card {
  transform: perspective(1100px) rotateY(-17deg) rotateX(1deg) !important;
  transform-origin: center center;
  box-shadow: 20px 26px 36px #0009;
}
.media-card:hover,.media-card:focus-visible {
  transform: perspective(1100px) rotateY(0deg) rotateX(0deg) translateY(-4px) !important;
}
/* news and footer conform to reference: gentle, broad wave and small centered TOP tab */
.news {
  background: linear-gradient(180deg,#edf5fa,#f9fcff 24%,#f4f9fc 100%);
}
.news .wrap {
  padding-top: 100px;
  padding-bottom: 152px;
}
.news .news-list strong {
  font-size: clamp(14px,1.24vw,19px);
}
.site-footer {
  background: #030a12;
  border-radius: 0;
  padding: 42px 35px 27px;
  min-height: 130px;
  position: relative;
  isolation: isolate;
}
.site-footer::before {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  top: -112px;
  height: 120px;
  background: #030a12;
  clip-path: ellipse(85% 62% at 50% 100%);
  z-index: -1;
}
.site-footer .top-tab {
  width: 58px;
  height: 34px;
  top: -34px;
  background: #030a12;
  border-radius: 35px 35px 0 0;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .04em;
  z-index: 10;
}
.site-footer .footer-logo {
  width: clamp(200px,19vw,280px);
}
/* Glow must remain visible on light sections: source-over shadow, screen for white center. */
#roam-light {
  z-index: 30;
  mix-blend-mode: normal !important;
  pointer-events: none;
}
@media (max-width:1100px) {
  .philosophy {
    min-height: 0;
  }
  .philosophy .wrap {
    padding-bottom: 70px;
  }
  .ph-grid {
    min-height: 630px;
  }
  .ph-title {
    font-size: clamp(67px,9vw,108px);
  }
  .person {
    width: 42vw;
    right: -5%;
    height: 650px;
    bottom: -75px;
  }
  .service-grid {
    gap: 13px;
  }
  .media-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}
@media(max-width:740px) {
  .hero video {
    transform: scale(1.12);
  }
  .hero .scroll {
    bottom: 33px;
  }
  .transition.hero-seam {
    height: 110px;
  }
  .philosophy .wrap {
    padding: 74px 20px 74px;
  }
  .ph-grid {
    min-height: 760px;
  }
  .ph-title {
    font-size: clamp(52px,12.5vw,85px);
    letter-spacing: 0 !important;
    line-height: .89;
  }
  .ph-copy .statement {
    font-size: clamp(22px,5vw,30px);
  }
  .person {
    width: 85%;
    height: 440px;
    right: -7%;
    bottom: -50px;
    top: auto;
  }
  .ph-copy .description {
    max-width: 330px;
  }
  .service-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 13px;
  }
  .service-card {
    transform: perspective(1000px) rotateY(-9deg) !important;
  }
  .service-header .statement {
    font-size: 27px;
  }
  .smoke-wrap {
    height: 130px;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .media-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
  .media-card {
    transform: perspective(1000px) rotateY(-9deg) !important;
  }
  .news .wrap {
    padding-bottom: 130px;
  }
  .site-footer::before {
    top: -72px;
    height: 80px;
    clip-path: ellipse(88% 60% at 50% 100%);
  }
}
@media(prefers-reduced-motion:reduce) {
  .hero-mist::after,.about-smoke {
    animation: none;
  }
}
/* final proportion check against the supplied photo reference */
@media(min-width:1101px) {
  .ph-title {
    font-size: clamp(84px,10vw,162px);
  }
  .person {
    width: clamp(530px,45.5vw,710px);
    right: -4.5%;
    height: 730px;
    bottom: -95px;
  }
}
@media(min-width:741px) {
  .about-grid {
    grid-template-columns: 42% 58%;
  }
  .about .statement {
    font-size: clamp(29px,2.55vw,39px);
    line-height: 1.85;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .about .description {
    max-width: 480px;
  }
}
.site-footer .top-tab {
  top: -88px;
  z-index: 20;
}
@media(max-width:740px) {
  .site-footer .top-tab {
    top: -65px;
  }
}
@media(max-width:740px) {
  .hero-copy {
    left: 23px;
    max-width: 250px;
  }
  .hero-copy h1 {
    font-size: clamp(21px,5.6vw,24px);
    letter-spacing: .018em;
    line-height: 1.9;
    white-space: nowrap;
  }
  .hero-copy p {
    font-size: 10px;
    line-height: 1.95;
  }
}
@keyframes noiseJitter {
  0% {
    transform: translate3d(0,0,0);
  }
  25% {
    transform: translate3d(-1px,0,0);
  }
  50% {
    transform: translate3d(1px,0,0);
  }
  75% {
    transform: translate3d(-2px,.4px,0);
  }
  100% {
    transform: translate3d(1px,-.4px,0);
  }
}
.media .statement {
  max-width: 340px;
  line-height: 1.55;
}
.media .description {
  max-width: 320px;
}
/* V26 mobile refinements */
@media(max-width:740px) {
  .hero video {
    transform: scale(1.58) !important;
    transform-origin: center 54%;
  }
  .hero-copy {
    top: 23%;
    max-width: 280px;
    z-index: 12;
  }
  .hero-copy h1 {
    font-size: clamp(22px,5.8vw,27px);
    white-space: normal;
    line-height: 1.72;
  }
  /* The hero fog is an irregular updraft without an opaque horizontal cap. */
  .hero-mist {
    height: 22px !important;
    overflow: visible !important;
    background: transparent !important;
    bottom: 0 !important;
  }
  .hero-mist::before {
    height: 43px;
    bottom: -2px;
    filter: blur(9px);
    opacity: .73;
    animation: mistRise 7.6s ease-in-out infinite alternate;
  }
  .hero-mist::after {
    height: 36px;
    bottom: -5px;
    filter: blur(9px);
    opacity: .57;
  }
  .transition.hero-seam {
    height: 110px;
    background: linear-gradient(180deg,#020710 0%,#0e1b29 14%,#2f4e65 39%,#a6c1d5 75%,#eaf3f9 100%);
  }
  /* Keep glitch exclusively on portrait area, not body copy. */
  .glitch-overlay {
    clip-path: inset(51% 0 0 0);
    z-index: 9;
  }
  .ph-grid {
    min-height: 675px;
  }
  .person {
    height: 425px;
    bottom: -45px;
    width: 94%;
    right: -9%;
  }
  /* A single dark-to-light seam; no second rectangular white shelf. */
  .about .wrap {
    padding-top: 30px !important;
    padding-bottom: 18px !important;
  }
  .about {
    min-height: 0 !important;
  }
  .about-grid {
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .about-visual {
    min-height: 0 !important;
    margin-top: 4px;
    line-height: 0;
  }
  .about-visual .infinity {
    width: 100%;
    height: auto;
    max-width: none;
  }
  .about-smoke {
    height: 44px;
    bottom: -4px;
  }
  .service-card,.media-card {
    transition: transform 1.05s cubic-bezier(.16,1,.3,1),box-shadow .65s !important;
  }
  .service-card:not(.front-facing) {
    transform: perspective(1000px) rotateY(-20deg) rotateX(2deg) !important;
  }
  .media-card:not(.front-facing) {
    transform: perspective(1000px) rotateY(-19deg) rotateX(2deg) !important;
  }
  .service-card.front-facing,.media-card.front-facing {
    transform: perspective(1000px) rotateY(0deg) rotateX(0deg) !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  .service-card,.media-card {
    transform: none !important;
    transition: none !important;
  }
}
/* --- V27 targeted corrections --- */
.hero-copy h1 span {
  display: block;
  white-space: nowrap;
}
.hero-copy {
  max-width: 410px;
}
.hero-copy h1 {
  letter-spacing: .02em;
  line-height: 1.72;
}
.hero-copy p {
  letter-spacing: .30em;
}
.head img {
  filter: drop-shadow(0 0 12px rgba(26,126,255,.14));
}
/* Lower fog edge should be organic smoke that naturally fades into the light section. */
.hero-mist {
  height: 30px !important;
  overflow: visible !important;
  background: transparent !important;
}
.hero-mist::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -6px;
  height: 58px;
  background: radial-gradient(ellipse 18% 80% at 6% 96%,rgba(255,255,255,.72),transparent 73%),
  radial-gradient(ellipse 13% 68% at 16% 88%,rgba(228,240,250,.76),transparent 72%),
  radial-gradient(ellipse 18% 82% at 26% 98%,rgba(255,255,255,.68),transparent 73%),
  radial-gradient(ellipse 16% 66% at 40% 87%,rgba(233,243,251,.77),transparent 70%),
  radial-gradient(ellipse 19% 84% at 54% 99%,rgba(255,255,255,.72),transparent 73%),
  radial-gradient(ellipse 14% 62% at 66% 89%,rgba(224,239,249,.78),transparent 70%),
  radial-gradient(ellipse 18% 86% at 78% 100%,rgba(255,255,255,.66),transparent 73%),
  radial-gradient(ellipse 16% 66% at 90% 88%,rgba(227,241,250,.76),transparent 72%);
  filter: blur(10px);
  opacity: .94;
  animation: mistRise 9.2s ease-in-out infinite alternate;
}
.hero-mist::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 44px;
  background: radial-gradient(ellipse 20% 90% at 13% 100%,rgba(234,243,249,.62),transparent 74%),
  radial-gradient(ellipse 25% 85% at 48% 100%,rgba(242,248,252,.72),transparent 73%),
  radial-gradient(ellipse 22% 88% at 84% 100%,rgba(235,243,250,.60),transparent 72%);
  filter: blur(12px);
  opacity: .82;
  animation: v17MistTide 8.4s ease-in-out infinite alternate;
}
.transition.hero-seam {
  height: 126px;
  overflow: hidden;
  background: #eaf3f9;
}
.transition.hero-seam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(2,7,16,0) 0%,rgba(7,17,29,.10) 18%,rgba(77,104,129,.20) 44%,rgba(184,206,222,.40) 69%,rgba(234,243,249,.84) 100%);
  pointer-events: none;
}
.transition.hero-seam .hero-smoke {
  height: 152px;
  bottom: -8px;
  opacity: 1;
  z-index: 5;
}
.transition.hero-seam .hero-smoke::after {
  background: linear-gradient(180deg,rgba(3,10,16,0) 0%,rgba(198,219,235,.10) 35%,rgba(227,239,248,.38) 70%,#eaf3f9 100%);
}
.transition.hero-seam .hero-smoke .smoke-canvas {
  filter: blur(.65px) saturate(1.08);
}
/* Philosophy person / block noise */
.person {
  overflow: visible;
}
.person img.main-portrait {
  z-index: 2;
}
.person .ghost {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  mix-blend-mode: screen;
}
.person .ghost.cyan {
  filter: hue-rotate(165deg) saturate(1.65) brightness(1.18);
  transform: translateX(-6px);
}
.person .ghost.red {
  filter: hue-rotate(-55deg) saturate(1.55) brightness(1.05);
  transform: translateX(6px);
}
.person::after {
  content: "";
  position: absolute;
  inset: 17% 10% 14% 33%;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  background: repeating-linear-gradient(180deg,rgba(255,255,255,.0) 0 4px,rgba(255,255,255,.08) 4px 5px,rgba(0,0,0,.0) 5px 9px);
  mix-blend-mode: screen;
}
.person.glitching img.main-portrait {
  filter: contrast(1.15) saturate(1.02) brightness(1.04);
}
.person.glitching .ghost {
  opacity: .48;
  animation: ghostJitter .17s steps(2,end) infinite;
}
.person.glitching::after {
  opacity: .34;
  animation: scanFlicker .18s steps(2,end) infinite;
}
@keyframes ghostJitter {
  0% {
    transform: translateX(-6px);
  }
  50% {
    transform: translateX(4px);
  }
  100% {
    transform: translateX(-2px);
  }
}
@keyframes scanFlicker {
  0% {
    transform: translateY(-2px);
    opacity: .16;
  }
  50% {
    transform: translateY(2px);
    opacity: .36;
  }
  100% {
    transform: translateY(0);
    opacity: .22;
  }
}
.glitch-overlay {
  z-index: 13;
}
.glitch-overlay .px-cell {
  border-radius: 1px;
  overflow: hidden;
}
.glitch-overlay .px-cell.signal {
  background: radial-gradient(circle at 33% 34%,rgba(255,255,255,.18),transparent 32%),
 radial-gradient(circle at 72% 64%,rgba(117,177,226,.28),transparent 36%),
 linear-gradient(145deg,rgba(8,29,53,.94),rgba(17,61,103,.82));
  box-shadow: 0 0 10px rgba(9,85,152,.12);
}
.glitch-overlay .px-cell.signal.deep {
  background: radial-gradient(circle at 38% 30%,rgba(193,225,245,.12),transparent 30%),
 linear-gradient(145deg,rgba(5,16,31,.98),rgba(10,33,59,.92));
  box-shadow: none;
}
.glitch-overlay .px-cell.signal.icy {
  background: radial-gradient(circle at 34% 34%,rgba(255,255,255,.26),transparent 33%),
 radial-gradient(circle at 72% 64%,rgba(143,189,224,.16),transparent 38%),
 linear-gradient(145deg,rgba(25,60,92,.88),rgba(9,31,54,.94));
  box-shadow: 0 0 9px rgba(13,102,164,.15);
}
.glitch-overlay .px-cell.active {
  animation: noiseJitter var(--jitDur,760ms) steps(2,end) infinite;
}
.glitch-overlay .px-cell.glitch-burst {
  opacity: 1 !important;
  animation: glitchBurst .2s steps(2,end) 3;
}
@keyframes glitchBurst {
  0% {
    transform: translate3d(-4px,0,0);
  }
  50% {
    transform: translate3d(5px,-1px,0);
  }
  100% {
    transform: translate3d(-2px,1px,0);
  }
}
/* Cloudy block reveal instead of flat color tiles */
.reveal-mask canvas {
  mix-blend-mode: source-over;
}
/* Clean seams */
.transition.philo-seam {
  height: 72px;
  background: #06111d;
}
.transition.philo-seam svg {
  height: 92px;
  top: -50px;
}
.media .statement {
  max-width: 270px;
}
@media(max-width:740px) {
  .head {
    padding: 18px 18px 0;
  }
  .head img {
    width: 220px;
    max-width: 62vw;
  }
  .hero-copy {
    left: 22px;
    top: 22%;
    max-width: 310px;
  }
  .hero-copy h1 {
    font-size: clamp(22px,6vw,28px);
    line-height: 1.84;
    letter-spacing: 0;
  }
  .hero-copy p {
    margin-top: 24px;
    font-size: 10px;
    letter-spacing: .31em;
  }
  .hero .scroll {
    bottom: 40px;
  }
  .hero-mist {
    height: 26px !important;
  }
  .hero-mist::before {
    height: 52px;
    bottom: -6px;
    opacity: .92;
  }
  .hero-mist::after {
    height: 38px;
    bottom: -4px;
    opacity: .76;
  }
  .transition.hero-seam {
    height: 120px;
    background: #eaf3f9;
  }
  .transition.hero-seam::before {
    background: linear-gradient(180deg,rgba(2,7,16,0) 0%,rgba(19,33,48,.08) 18%,rgba(93,121,146,.17) 46%,rgba(200,220,234,.42) 73%,#eaf3f9 100%);
  }
  .transition.hero-seam .hero-smoke {
    height: 138px;
    bottom: -8px;
  }
  .philosophy .wrap {
    padding: 82px 22px 82px;
  }
  .ph-grid {
    min-height: 708px;
  }
  .ph-title {
    font-size: clamp(50px,13.1vw,92px);
    line-height: .90;
  }
  .ph-copy .description {
    max-width: 315px;
    line-height: 2.05;
  }
  .person {
    width: 93%;
    height: 402px;
    right: -9%;
    bottom: -34px;
  }
  .glitch-overlay {
    clip-path: inset(49% 0 0 0);
  }
  .transition.philo-seam {
    height: 56px;
  }
  .transition.philo-seam svg {
    height: 70px;
    top: -37px;
  }
  .about .wrap {
    padding-top: 44px !important;
    padding-bottom: 34px !important;
  }
  .about-visual {
    margin-top: 10px;
    min-height: 210px !important;
  }
  .about-visual .infinity {
    transform: translateY(-8px);
  }
  .about-smoke {
    height: 52px;
    bottom: -6px;
  }
  .media .statement {
    max-width: 225px;
  }
}
/* --- V28 smoke refinement: natural smoke, not banded gradient --- */
.hero-mist {
  height: 18px !important;
  background: transparent !important;
  overflow: visible !important;
}
.hero-mist::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: -4px;
  height: 44px;
  background: radial-gradient(ellipse 22% 95% at 10% 100%,rgba(255,255,255,.62),transparent 72%),
 radial-gradient(ellipse 14% 58% at 23% 86%,rgba(222,235,244,.55),transparent 69%),
 radial-gradient(ellipse 21% 85% at 37% 100%,rgba(246,250,252,.66),transparent 72%),
 radial-gradient(ellipse 15% 56% at 52% 85%,rgba(229,239,246,.54),transparent 68%),
 radial-gradient(ellipse 24% 88% at 63% 100%,rgba(255,255,255,.62),transparent 72%),
 radial-gradient(ellipse 14% 54% at 76% 84%,rgba(223,236,245,.50),transparent 68%),
 radial-gradient(ellipse 22% 92% at 90% 100%,rgba(248,251,253,.63),transparent 72%);
  filter: blur(9px);
  opacity: .92;
  animation: mistOrganic 10s ease-in-out infinite alternate;
}
.hero-mist::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -2px;
  height: 32px;
  background: radial-gradient(ellipse 30% 100% at 15% 100%,rgba(243,248,251,.40),transparent 73%),
 radial-gradient(ellipse 30% 100% at 51% 100%,rgba(244,249,252,.43),transparent 73%),
 radial-gradient(ellipse 30% 100% at 86% 100%,rgba(243,248,251,.37),transparent 73%);
  filter: blur(12px);
  opacity: .74;
  animation: mistOrganicB 11.5s ease-in-out infinite alternate;
}
@keyframes mistOrganic {
  0% {
    transform: translate3d(0,3px,0) scaleX(1) scaleY(1);
    opacity: .86;
  }
  50% {
    transform: translate3d(-8px,-1px,0) scaleX(1.03) scaleY(1.05);
    opacity: .96;
  }
  100% {
    transform: translate3d(7px,2px,0) scaleX(.98) scaleY(.97);
    opacity: .88;
  }
}
@keyframes mistOrganicB {
  0% {
    transform: translate3d(0,1px,0) scaleX(1);
  }
  50% {
    transform: translate3d(9px,-1px,0) scaleX(.98);
  }
  100% {
    transform: translate3d(-7px,2px,0) scaleX(1.04);
  }
}
.transition.hero-seam {
  height: 120px !important;
  background: #eaf3f9 !important;
  overflow: hidden;
}
.transition.hero-seam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(2,7,16,0) 0%,rgba(18,33,49,.04) 16%,rgba(78,103,127,.09) 44%,rgba(177,201,218,.24) 70%,rgba(234,243,249,.86) 100%);
  pointer-events: none;
}
.transition.hero-seam .hero-smoke {
  height: 164px !important;
  bottom: -14px !important;
  opacity: 1 !important;
  z-index: 5;
}
.transition.hero-seam .hero-smoke::after {
  background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(208,224,235,.08) 42%,rgba(230,240,247,.34) 72%,#eaf3f9 100%) !important;
}
.transition.hero-seam .hero-smoke .smoke-canvas {
  filter: blur(.55px) saturate(1.02) brightness(1.03);
  opacity: .98;
}
.media-smoke .smoke-canvas,.about-smoke .smoke-canvas {
  filter: blur(.55px) saturate(1.02) brightness(1.02);
}
@media(max-width:740px) {
  .hero-mist {
    height: 16px !important;
  }
  .hero-mist::before {
    height: 38px;
    bottom: -5px;
    opacity: .9;
  }
  .hero-mist::after {
    height: 28px;
    bottom: -2px;
    opacity: .7;
  }
  .transition.hero-seam {
    height: 112px !important;
  }
  .transition.hero-seam .hero-smoke {
    height: 148px !important;
    bottom: -12px !important;
  }
}
/* --- V29 refinements --- */
.hero-mist {
  height: 20px !important;
  overflow: visible !important;
  background: transparent !important;
}
.hero-mist::before,.hero-mist::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  background-image: url("../img/smoke-ref.png");
  background-repeat: repeat-x;
  background-size: auto 100%;
  mix-blend-mode: screen;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.95) 16%,rgba(0,0,0,.68) 52%,rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.95) 16%,rgba(0,0,0,.68) 52%,rgba(0,0,0,0) 100%);
}
.hero-mist::before {
  bottom: -4px;
  height: 54px;
  opacity: .88;
  filter: blur(.35px);
  animation: smokeDriftA 18s linear infinite;
}
.hero-mist::after {
  bottom: -7px;
  height: 62px;
  opacity: .62;
  filter: blur(1.6px);
  animation: smokeDriftB 24s linear infinite reverse;
}
@keyframes smokeDriftA {
  0% {
    background-position: 0 100%;
    transform: translate3d(0,2px,0) scale(1.02);
  }
  50% {
    background-position: 260px 96%;
    transform: translate3d(10px,-3px,0) scale(1.05);
  }
  100% {
    background-position: 520px 100%;
    transform: translate3d(-4px,1px,0) scale(1.02);
  }
}
@keyframes smokeDriftB {
  0% {
    background-position: 0 100%;
    transform: translate3d(0,3px,0) scale(1.05);
  }
  50% {
    background-position: -240px 94%;
    transform: translate3d(-8px,-5px,0) scale(1.07);
  }
  100% {
    background-position: -480px 100%;
    transform: translate3d(4px,1px,0) scale(1.03);
  }
}
.transition.hero-seam .hero-smoke,.transition.media-seam .smoke-wrap {
  overflow: visible;
}
.transition.hero-seam .hero-smoke::before,.transition.media-seam .smoke-wrap::before {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 100%;
  background-image: url("../img/smoke-ref.png");
  background-repeat: repeat-x;
  background-size: auto 82%;
  background-position: center bottom;
  opacity: .66;
  filter: blur(.6px);
  -webkit-mask-image: linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.82) 36%,rgba(0,0,0,.33) 72%,rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to top,rgba(0,0,0,1) 0%,rgba(0,0,0,.82) 36%,rgba(0,0,0,.33) 72%,rgba(0,0,0,0) 100%);
  animation: smokeDriftC 26s linear infinite;
}
@keyframes smokeDriftC {
  0% {
    background-position: 0 100%;
  }
  50% {
    background-position: 180px 96%;
  }
  100% {
    background-position: 360px 100%;
  }
}
.transition.hero-seam .hero-smoke::after {
  background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(217,231,240,.12) 42%,rgba(233,241,247,.45) 78%,#eaf3f9 100%) !important;
}
.transition.media-seam .smoke-wrap::after {
  background: linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(245,250,253,.06) 44%,rgba(237,245,250,.26) 70%,rgba(237,245,250,.78) 100%);
}
.person {
  overflow: hidden;
}
.person::after {
  display: none !important;
}
.person img.main-portrait,.person .ghost,.person .glitch-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  pointer-events: none;
}
.person .glitch-shot {
  opacity: 0;
  z-index: 5;
  mix-blend-mode: screen;
  transform: translateZ(0);
}
.person.glitching .ghost {
  opacity: .28;
  animation: ghostJitter .12s steps(2,end) infinite;
}
.person.glitching .glitch-shot {
  animation: glitchShotFlash .26s steps(1,end) infinite;
}
@keyframes glitchShotFlash {
  0%,9% {
    opacity: 0;
    transform: translate3d(0,0,0);
  }
  10%,16% {
    opacity: .94;
    transform: translate3d(-5px,0,0);
  }
  17%,23% {
    opacity: 0;
  }
  24%,33% {
    opacity: .88;
    transform: translate3d(5px,-1px,0);
  }
  34%,39% {
    opacity: 0;
  }
  40%,49% {
    opacity: .95;
    transform: translate3d(-3px,1px,0);
  }
  50%,57% {
    opacity: 0;
  }
  58%,68% {
    opacity: .84;
    transform: translate3d(4px,0,0);
  }
  69%,100% {
    opacity: 0;
    transform: translate3d(0,0,0);
  }
}
.glitch-overlay .px-cell {
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 0;
}
.glitch-overlay .px-cell.signal,.glitch-overlay .px-cell.signal.deep,.glitch-overlay .px-cell.signal.icy {
  box-shadow: none;
}
.glitch-overlay .px-cell.signal {
  background-color: rgba(17,55,91,.86);
  filter: saturate(.92) brightness(.82);
}
.glitch-overlay .px-cell.signal.deep {
  background-color: rgba(7,24,42,.95);
  filter: saturate(.9) brightness(.72);
}
.glitch-overlay .px-cell.signal.icy {
  background-color: rgba(26,63,102,.84);
  filter: saturate(.86) brightness(.9);
}
.glitch-overlay .px-cell.active {
  animation: noiseJitter var(--jitDur,820ms) steps(2,end) infinite;
}
@keyframes noiseJitter {
  0% {
    transform: translate3d(0,0,0);
  }
  25% {
    transform: translate3d(-1px,0,0);
  }
  50% {
    transform: translate3d(2px,.4px,0);
  }
  75% {
    transform: translate3d(-2px,-.4px,0);
  }
  100% {
    transform: translate3d(1px,0,0);
  }
}
@media(max-width:740px) {
  .head img {
    width: 248px;
    max-width: 70vw;
  }
  .hero-copy {
    left: 22px;
    top: 23%;
    max-width: 352px;
  }
  .hero-copy h1 {
    font-size: clamp(24px,7vw,30px);
    line-height: 1.72;
    letter-spacing: .01em;
  }
  .hero-mist {
    height: 22px !important;
  }
  .hero-mist::before {
    height: 48px;
    bottom: -4px;
  }
  .hero-mist::after {
    height: 56px;
    bottom: -8px;
  }
  .glitch-overlay {
    clip-path: inset(47% 0 0 0);
  }
  .person {
    width: 94%;
    height: 404px;
    right: -10%;
    bottom: -18px;
  }
}
/* --- V30 overrides: procedural smoke, single enlarged block noise, infinity fit --- */
.hero-mist,
.about-smoke,
.transition .smoke-wrap {
  overflow: visible !important;
  background: transparent !important;
}
.hero-mist {
  height: 86px !important;
  bottom: -6px !important;
  left: -2% !important;
  right: -2% !important;
  z-index: 18 !important;
}
.hero-mist::before,.hero-mist::after,.transition.hero-seam .hero-smoke::before,.transition.hero-seam .hero-smoke::after,.transition.media-seam .smoke-wrap::before,.transition.media-seam .smoke-wrap::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
.hero-mist canvas,.about-smoke canvas,.smoke-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
}
.transition.hero-seam .hero-smoke {
  bottom: -8px !important;
  height: 96px !important;
  opacity: .98 !important;
}
.transition.media-seam .smoke-wrap {
  bottom: -10px !important;
  height: 118px !important;
  opacity: .96 !important;
}
.about-smoke {
  height: 112px !important;
  bottom: -4px !important;
}
.glitch-overlay .px-cell {
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  image-rendering: auto;
  transform-origin: center center;
}
.reveal-mask canvas {
  mix-blend-mode: normal !important;
}
.about-grid {
  grid-template-columns: minmax(300px,.95fr) minmax(0,1.05fr) !important;
  gap: clamp(12px,2vw,34px) !important;
}
.about-visual {
  overflow: visible !important;
  padding-right: clamp(8px,2.6vw,40px) !important;
  min-height: 380px !important;
}
.about-visual .infinity {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  object-fit: contain !important;
}
@media(max-width:740px) {
  .hero-mist {
    height: 74px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -4px !important;
  }
  .transition.hero-seam .hero-smoke {
    height: 80px !important;
    bottom: -6px !important;
  }
  .transition.media-seam .smoke-wrap {
    height: 94px !important;
    bottom: -10px !important;
  }
  .about-grid {
    gap: 6px !important;
  }
  .about-visual {
    min-height: 238px !important;
    margin-top: 10px !important;
    padding-right: 0 !important;
  }
  .about-visual .infinity {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }
}
/* v31 boundary and smoke refinements */
.hero-mist {
  height: 94px !important;
  left: -8% !important;
  right: -8% !important;
  bottom: -6px !important;
  overflow: visible !important;
}
.hero-mist .smoke-canvas {
  position: absolute !important;
  left: -8% !important;
  top: 0 !important;
  width: 116% !important;
  height: 100% !important;
}
.transition.hero-seam {
  height: 132px !important;
  margin-top: -1px !important;
  background: #eaf3f9 !important;
  overflow: hidden !important;
}
.transition.hero-seam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(20,36,53,.06) 20%,rgba(90,117,141,.14) 46%,rgba(191,211,225,.34) 72%,rgba(234,243,249,.96) 100%) !important;
  pointer-events: none;
}
.transition.hero-seam .hero-smoke {
  height: 170px !important;
  bottom: -8px !important;
  left: -6% !important;
  right: -6% !important;
  opacity: 1 !important;
}
.transition.hero-seam .hero-smoke .smoke-canvas {
  position: absolute;
  left: -8% !important;
  top: 0 !important;
  width: 116% !important;
  height: 100% !important;
  filter: blur(.45px) saturate(1.03) brightness(1.04) !important;
}
.transition.hero-seam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
  background: linear-gradient(180deg,rgba(236,244,249,.18),rgba(236,244,249,0));
  pointer-events: none;
}
.transition.media-seam {
  position: relative;
  overflow: hidden !important;
}
.transition.media-seam {
  height: 94px !important;
  background: linear-gradient(180deg,#06111d 0%,#0a2134 24%,#244562 52%,#b8cfdf 80%,#f3f8fc 100%) !important;
}
.transition.media-seam svg {
  height: 92px !important;
  top: -16px !important;
}
.transition.media-seam .smoke-wrap {
  left: -4% !important;
  right: -4% !important;
  bottom: -12px !important;
  height: 122px !important;
  opacity: .98 !important;
}
.transition.media-seam .smoke-canvas {
  position: absolute;
  left: -6% !important;
  top: 0 !important;
  width: 112% !important;
  height: 100% !important;
  filter: blur(.55px) saturate(1.03) brightness(1.03) !important;
}
.transition.media-seam::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background: linear-gradient(180deg,rgba(8,22,36,.46),rgba(8,22,36,0));
  pointer-events: none;
}
.transition.media-seam::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 24px;
  background: linear-gradient(180deg,rgba(243,248,252,0),rgba(243,248,252,.82));
  pointer-events: none;
}
.person {
  overflow: visible !important;
}
.person::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -1%;
  bottom: -1px;
  height: 110px;
  background: linear-gradient(180deg,rgba(242,247,252,0) 0%,rgba(242,247,252,.22) 28%,rgba(242,247,252,.85) 62%,#f2f7fc 100%);
  pointer-events: none;
  z-index: 6;
}
.person img {
  z-index: 5;
  position: relative;
}
.media-grid-layout>div:first-child .statement {
  max-width: 420px;
}
.media-grid-layout>div:first-child .description {
  max-width: 330px;
}
@media (max-width:740px) {
  .hero-mist {
    height: 88px !important;
    left: -10% !important;
    right: -10% !important;
    bottom: -6px !important;
  }
  .hero-mist .smoke-canvas {
    left: -10% !important;
    width: 120% !important;
  }
  .transition.hero-seam {
    height: 124px !important;
  }
  .transition.hero-seam .hero-smoke {
    height: 156px !important;
    bottom: -8px !important;
  }
  .transition.media-seam {
    height: 84px !important;
  }
  .transition.media-seam .smoke-wrap {
    height: 108px !important;
    bottom: -10px !important;
  }
  .media-grid-layout>div:first-child .statement {
    max-width: 250px;
  }
}
/* --- V32 targeted fixes --- */
.philosophy {
  margin-top: 0 !important;
}
.service {
  padding-top: 36px !important;
}
.about-grid {
  grid-template-columns: 35% 65% !important;
}
.about-visual {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-height: 410px !important;
  padding-right: 0 !important;
}
.about-visual .infinity {
  width: min(100%,840px) !important;
  max-width: 840px !important;
  transform: translateX(-1.5%) !important;
  object-fit: contain !important;
}
@media (max-width:740px) {
  .about-visual {
    justify-content: center !important;
    min-height: 250px !important;
  }
  .about-visual .infinity {
    width: 98% !important;
    max-width: 98% !important;
    transform: translateX(0) !important;
  }
  .service {
    padding-top: 24px !important;
  }
}
/* V34 – portrait-anchored noise and a completely exported infinity image */
.ph-grid .glitch-overlay {
  position: absolute !important;
  right: auto !important;
  bottom: auto !important;
  mix-blend-mode: normal !important;
  overflow: hidden !important;
  pointer-events: none !important;
  z-index: 13 !important;
  contain: none !important;
}
.ph-grid .glitch-overlay .px-cell {
  position: absolute;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
.about-visual {
  overflow: visible !important;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box !important;
}
.about-visual .infinity {
  display: block !important;
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 14px rgba(17,135,255,.27)) !important;
}
.about-visual::before,.about-visual::after {
  border: 0 !important;
  outline: 0 !important;
}
@media(max-width:740px) {
  .about-visual {
    padding: 0 !important;
  }
  .about-visual .infinity {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* V35: uploaded landscape photographs. Crop horizontally at the card edges without stretching. */
.service-card .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}
/* Show supplied actual website screenshots in the existing Media cards. */
.media-card img {
  object-position: top center;
}
/* --- V37 updates --- */
.service {
  position: relative;
  --service-hover: rgba(37,138,255,0);
}
.service::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%,var(--service-hover) 0%,transparent 58%);
  transition: background .35s ease,opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.service>.wrap {
  position: relative;
  z-index: 1;
}
.service-card {
  cursor: pointer;
}
.service-card .meta {
  z-index: 5;
}
.service-card .pic {
  z-index: 2;
}
.service-card .meta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
.media .statement {
  font-size: clamp(28px,2.4vw,34px) !important;
  line-height: 1.55;
  max-width: 340px;
}
.media-grid-layout {
  align-items: start;
}
.media-carousel {
  overflow: hidden;
  padding: 20px 15px 40px;
  --media-gap: clamp(12px,1.35vw,20px);
}
.media-track {
  display: flex;
  gap: var(--media-gap);
  will-change: transform;
  transition: transform .88s cubic-bezier(.22,1,.36,1);
}
.media-track .media-card {
  flex: 0 0 calc((100% - (var(--media-gap) * 2)) / 3);
  max-width: calc((100% - (var(--media-gap) * 2)) / 3);
}
.media-card .reveal-mask {
  min-height: 282px;
}
.media-card img {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center center;
}
.media-card h3 {
  font-size: clamp(13px,1.1vw,17px);
}
.media-card p {
  font-size: 12px;
  line-height: 1.6;
}
@media(max-width:1100px) {
  .media-track .media-card {
    flex-basis: calc((100% - var(--media-gap)) / 2);
    max-width: calc((100% - var(--media-gap)) / 2);
  }
}
@media(max-width:740px) {
  .hero video {
    transform: scale(2.1) !important;
    transform-origin: center 48% !important;
  }
  .hero-copy {
    left: 22px;
    right: 22px;
    top: auto;
    bottom: 108px;
    max-width: 84vw;
    z-index: 24;
  }
  .hero-copy h1 {
    font-size: clamp(30px,8vw,38px) !important;
    line-height: 1.56 !important;
    letter-spacing: .01em !important;
  }
  .hero-copy h1 span {
    display: inline;
    white-space: normal;
  }
  .hero-copy h1 span:nth-child(1),.hero-copy h1 span:nth-child(2) {
    display: inline;
  }
  .hero-copy h1 span:nth-child(3) {
    display: block;
  }
  .hero-copy p {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: .28em;
  }
  .ph-copy,.ph-copy *,.view-philosophy-link {
    position: relative;
    z-index: 26;
  }
  .glitch-overlay {
    z-index: 12;
  }
  .media-track .media-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  .media .statement {
    font-size: clamp(27px,7.4vw,34px) !important;
    max-width: 260px;
  }
  .media-card .reveal-mask {
    min-height: 250px;
  }
  .media-card img {
    height: 230px;
  }
}
/* --- V38 Media carousel: exact three-card viewport, no cumulative drift --- */
.media-carousel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  clip-path: inset(0);
  padding: 18px 0 42px;
  --media-gap: clamp(12px,1.45vw,22px);
}
.media-track {
  display: flex;
  gap: var(--media-gap);
  width: 100%;
  align-items: stretch;
  transition: none;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.media-track .media-card {
  box-sizing: border-box;
  min-width: 0;
  flex: 0 0 calc((100% - 2 * var(--media-gap)) / 3);
  max-width: calc((100% - 2 * var(--media-gap)) / 3);
}
.media-track .media-card {
  backface-visibility: hidden;
}
.media-grid-layout {
  min-width: 0;
}
.media-grid-layout>* {
  min-width: 0;
}
/* Avoid visual slivers caused by perspective and overlay edges */
.media-carousel::before,.media-carousel::after {
  content: none !important;
}
/* --- V38 Service: photo fills whole section while blurred, fades per card --- */
.service {
  isolation: isolate;
  position: relative;
  --service-hover: transparent;
}
.service::before {
  opacity: 0 !important;
  content: none !important;
}
.service-photo-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
}
.service-photo-bg {
  position: absolute;
  inset: -6%;
  width: 112%;
  height: 112%;
  object-fit: cover;
  object-position: center;
  filter: blur(10px) brightness(.65) saturate(1.17);
  transform: scale(1.10);
  opacity: 0;
  transition: opacity .68s cubic-bezier(.22,1,.36,1),transform 4s ease;
  will-change: opacity;
}
.service-photo-bg.visible {
  opacity: .90;
  transform: scale(1.05);
}
.service-photo-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(1,8,17,.54),rgba(1,9,18,.26) 50%,rgba(1,9,18,.55));
  z-index: 1;
}
.service>.wrap {
  position: relative;
  z-index: 2;
}
.service-card .meta::after {
  pointer-events: none !important;
}
.service-card .meta .more {
  position: relative;
  z-index: 4;
  pointer-events: auto;
}
.service-card .pic::after {
  pointer-events: none;
}
@media(max-width:1100px) {
  .media-track .media-card {
    flex-basis: calc((100% - var(--media-gap)) / 2);
    max-width: calc((100% - var(--media-gap)) / 2);
  }
}
@media(max-width:740px) {
  .media-carousel {
    padding: 14px 0 35px;
  }
  .media-track .media-card {
    flex-basis: 100%;
    max-width: 100%;
  }
  .service-photo-bg {
    filter: blur(10px) brightness(.46) saturate(1.13);
  }
  .service-photo-bg.visible {
    opacity: .62;
  }
}
@media(prefers-reduced-motion:reduce) {
  .media-track {
    transition: none !important;
  }
  .service-photo-bg {
    transition: none !important;
    transform: scale(1.05) !important;
  }
}
/* The column gap must be deducted from the width; percentage columns used to overflow. */
@media(min-width:1101px) {
  .media-grid-layout {
    grid-template-columns: minmax(0,26fr) minmax(0,74fr);
  }
}
/* V39: service photographic backdrop. Quick reset on pointer rollout. */
.service-photo-bg {
  transition: opacity .16s ease-out,transform .16s ease-out;
}
.service.photo-active .service-photo-bg {
  transition: opacity .46s cubic-bezier(.22,1,.36,1),transform .9s ease;
}
@media(prefers-reduced-motion:reduce) {
  .service.photo-active .service-photo-bg {
    transition: none !important;
  }
}
/* V40: true block-reveal clipping of entire Service and Media panels. */
.service-card[data-block-reveal="pending"],.media-card[data-block-reveal="pending"] {
  pointer-events: none;
}
.service-card[data-block-reveal="complete"],.media-card[data-block-reveal="complete"] {
  pointer-events: auto;
}
/* The inner image retains its normal photo styling; no colored mosaic overlay. */
.reveal-mask canvas {
  display: none !important;
}
/* V41: a single mosaic square flashes BEFORE revealing its actual card area.
   The whole panel (picture + frame + captions + arrow) is masked as one. */
.service-card[data-block-reveal="pending"],
.media-card[data-block-reveal="pending"] {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  pointer-events: none;
}
.block-reveal-content {
  position: relative;
  width: 100%;
  min-height: 100%;
  background: #081725;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(160,216,255,.22);
}
.block-reveal-overlay,.block-noise-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.block-noise-flash {
  position: absolute;
  display: block;
  background-color: #123653;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: inset 0 0 0 1px rgba(104,191,255,.18),0 0 8px rgba(30,127,235,.23);
  animation: flashNoiseShift .075s steps(2,end) infinite;
}
@keyframes flashNoiseShift {
  0% {
    filter: brightness(.85) saturate(1.0);
    transform: translateX(0);
  }
  50% {
    filter: brightness(1.3) saturate(1.3);
    transform: translateX(var(--noise-jitter,1px));
  }
  100% {
    filter: brightness(.94) saturate(1.1);
    transform: translateX(0);
  }
}
@media(prefers-reduced-motion:reduce) {
  .block-noise-flash {
    animation: none !important;
  }
}
/* V42: keep Media viewport clipping simple; avoid SVG + CSS double clip when translating track */
.media-carousel {
  clip-path: none !important;
  overflow: hidden !important;
}
.media-card.media-clone {
  visibility: visible !important;
  opacity: 1 !important;
}