/* === SBH BikerHub – stili condivisi === */

body {
  background-color: #151515;
  color: #fff;
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

html,
body,
.bg-background {
  background-color: #151515 !important;
}

h1, h2, h3, .font-headline, .text-machined {
  font-family: "Space Grotesk", sans-serif;
}

.text-machined {
  letter-spacing: -0.02em;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

.site-logo-img {
  display: block;
  max-width: min(190px, 46vw);
  object-fit: contain;
  background: transparent;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.95))
    drop-shadow(0 5px 12px rgba(0, 0, 0, 0.45));
}

.gradient-primary {
  background: linear-gradient(135deg, #ffe792 0%, #ffd709 100%);
}

.noise-texture,
.noise-overlay,
.grain-texture {
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

.glass-overlay {
  backdrop-filter: blur(24px);
  background: rgba(32, 32, 31, 0.7);
}

/* Nascondi scrollbar dove serve */
.no-scrollbar::-webkit-scrollbar { display: none; }

.filter-btn {
  border: 1px solid transparent;
}

.filter-btn.is-active {
  border-color: rgba(255, 231, 146, 0.35);
  background: #2c2c2c;
  color: #ffe792;
}

[data-gallery-card] {
  transition: opacity 220ms ease, transform 220ms ease, filter 220ms ease;
}

[data-gallery-card].is-filtered-out {
  display: none;
}

.shock-hero {
  --shock-progress: 0;
  --shock-copy-opacity: 1;
  --shock-copy-shift: 0px;
  position: relative;
  min-height: 100vh;
  height: 260vh;
  overflow: visible;
  background: #151515;
  isolation: isolate;
}

.shock-hero__pin {
  position: sticky;
  top: 0;
  min-height: 100vh;
  width: 100%;
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  padding: clamp(6.25rem, 12vh, 8.5rem) clamp(1.5rem, 5vw, 6rem) clamp(3rem, 7vh, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.shock-hero__pin::before,
.shock-hero__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.shock-hero__pin::before {
  background:
    linear-gradient(90deg, rgba(21, 21, 21, 0.98) 0%, rgba(21, 21, 21, 0.92) 28%, rgba(21, 21, 21, 0.48) 54%, rgba(21, 21, 21, 0.1) 78%, rgba(21, 21, 21, 0.02) 100%),
    linear-gradient(180deg, rgba(14, 14, 14, 0.28) 0%, rgba(14, 14, 14, 0.04) 46%, rgba(21, 21, 21, 0.34) 100%);
}

.shock-hero__pin::after {
  background: linear-gradient(180deg, transparent 72%, #151515 100%);
}

.shock-copy {
  position: relative;
  z-index: 3;
  width: min(45rem, 54vw);
  max-width: 45rem;
  text-shadow: 0 0.35rem 1.8rem rgba(0, 0, 0, 0.72);
  opacity: var(--shock-copy-opacity);
  transform: translate3d(var(--shock-copy-shift), 0, 0);
  transition: opacity 120ms linear, transform 120ms linear;
  will-change: opacity, transform;
}

.shock-hero.is-copy-hidden .shock-copy {
  pointer-events: none;
}

.shock-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: #ffe792;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.shock-eyebrow::before {
  content: "";
  width: 2rem;
  height: 1px;
  background: #ffe792;
}

.shock-copy h1 {
  max-width: 10.5ch;
  margin-top: 1.25rem;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(3.3rem, 6.1vw, 7.2rem);
  font-weight: 900;
  line-height: 0.92;
  letter-spacing: 0;
}

.shock-copy p {
  max-width: 36rem;
  margin-top: 1.05rem;
  color: rgba(227, 226, 226, 0.82);
  font-size: clamp(1rem, 1.45vw, 1.35rem);
  line-height: 1.65;
}

.shock-services {
  max-width: 38rem;
  margin-top: 1.15rem;
  padding-left: 1rem;
  border-left: 2px solid rgba(255, 231, 146, 0.75);
}

.shock-services strong,
.shock-services span,
.shock-services small {
  display: block;
}

.shock-services strong {
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
}

.shock-services span {
  margin-top: 0.4rem;
  color: #ffe792;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.shock-services small {
  margin-top: 0.5rem;
  color: #adaaaa;
  line-height: 1.5;
}

.shock-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.35rem;
}

.shock-btn,
.shock-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.45rem;
  border-radius: 0.375rem;
  font-weight: 900;
}

.shock-btn {
  gap: 0.55rem;
  background: #ffe792;
  color: #655400;
  padding: 0 1.35rem;
}

.shock-link {
  color: #e3e2e2;
  border: 1px solid rgba(227, 226, 226, 0.18);
  padding: 0 1.15rem;
}

.shock-video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.shock-video,
.shock-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: 67% center;
  filter: saturate(1.02);
  transform: translate3d(0, 0, 0);
  transform-origin: center;
  backface-visibility: hidden;
}

.shock-video {
  display: block;
}

.shock-video-poster {
  display: none;
}

.shock-hero.is-video-fallback .shock-video {
  display: none;
}

.shock-hero.is-video-fallback .shock-video-poster {
  display: block;
}

.shock-stage-copy {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.shock-stage {
  position: absolute;
  width: min(25rem, 30vw);
  border-left: 2px solid rgba(255, 231, 146, 0.78);
  border-radius: 0.35rem;
  background: linear-gradient(90deg, rgba(7, 7, 7, 0.58), rgba(7, 7, 7, 0.16));
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.24);
  padding: 0.72rem 0.92rem 0.84rem;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 260ms ease, transform 260ms ease;
  text-shadow: 0 0.42rem 1.7rem rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
}

.shock-stage::before,
.shock-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.shock-stage::before {
  left: var(--callout-line-left);
  top: var(--callout-line-top);
  width: var(--callout-line-width);
  height: 2px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.42);
  transform: rotate(var(--callout-line-angle));
  transform-origin: var(--callout-line-origin);
}

.shock-stage::after {
  left: var(--callout-dot-left);
  top: var(--callout-dot-top);
  width: 0.72rem;
  height: 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 999px;
  background: rgba(255, 231, 146, 0.9);
  box-shadow:
    0 0 0 0.32rem rgba(255, 255, 255, 0.08),
    0 0 1.4rem rgba(255, 231, 146, 0.46);
}

.shock-stage.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.shock-stage span,
.shock-stage strong {
  display: block;
}

.shock-stage span {
  color: #ffe792;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.shock-stage strong {
  margin-top: 0.45rem;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.18rem, 1.62vw, 1.72rem);
  font-weight: 900;
  line-height: 1.12;
}

.shock-stage--dismantle {
  top: 17%;
  right: 2%;
  width: min(24rem, 24vw);
  --callout-line-left: -5.4vw;
  --callout-line-top: 1.1rem;
  --callout-line-width: 5.4vw;
  --callout-line-angle: 0deg;
  --callout-line-origin: right center;
  --callout-dot-left: calc(-5.4vw - 0.25rem);
  --callout-dot-top: calc(1.1rem - 0.28rem);
}

.shock-stage--seal {
  top: 48%;
  left: 39%;
  --callout-line-left: 100%;
  --callout-line-top: 1.15rem;
  --callout-line-width: 12vw;
  --callout-line-angle: -2deg;
  --callout-line-origin: left center;
  --callout-dot-left: calc(100% + 12vw - 0.1rem);
  --callout-dot-top: calc(1.15rem - 0.52rem);
}

.shock-stage--tuning {
  left: 44%;
  bottom: 9%;
  width: min(26rem, 30vw);
  --callout-line-left: 100%;
  --callout-line-top: 1.15rem;
  --callout-line-width: 4.8vw;
  --callout-line-angle: -18deg;
  --callout-line-origin: left center;
  --callout-dot-left: calc(100% + 4.6vw);
  --callout-dot-top: calc(1.15rem - 1.55rem);
}

.footer-contact {
  max-width: 1536px;
  margin: 0 auto 2.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px solid rgba(255, 231, 146, 0.18);
  border-radius: 0.5rem;
  background: rgba(19, 19, 19, 0.76);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-contact__links,
.social-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.footer-contact__link {
  color: #e3e2e2;
  font-weight: 800;
}

.footer-contact__link:hover {
  color: #ffe792;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  border: 1px solid rgba(227, 226, 226, 0.16);
  border-radius: 0.375rem;
  color: #ffe792;
  background: rgba(255, 255, 255, 0.03);
}

.social-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: currentColor;
}

/* Menu mobile */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open {
  transform: translateX(0);
}

/* Migliora aspetto input date/select su dark */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.8);
  cursor: pointer;
}

/* Stato successo form */
.form-success {
  border: 1px solid rgba(255, 215, 9, 0.4);
  background: rgba(255, 231, 146, 0.08);
  color: #ffe792;
}

.team-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 146, 0.12);
  border-radius: 0.5rem;
  background: #131313;
  text-align: left;
}

.team-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.35);
  transform: scale(1.01);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.team-card:hover img,
.team-card:focus-visible img {
  filter: grayscale(0);
  transform: scale(1.06);
}

.team-card__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.88) 100%);
}

.team-card__content {
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 1.25rem;
}

.team-card__content strong,
.team-card__content small {
  display: block;
}

.team-card__content strong {
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
}

.team-card__content small {
  margin-top: 0.45rem;
  color: #ffe792;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.info-row,
.method-step,
.service-tile {
  border: 1px solid rgba(72, 72, 71, 0.25);
  border-radius: 0.5rem;
  background: #131313;
}

.info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem;
}

.info-row strong,
.info-row small {
  display: block;
}

.info-row small {
  margin-top: 0.25rem;
  color: #adaaaa;
}

.service-tile {
  min-height: 260px;
  padding: 2rem;
}

.service-tile h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  color: #e3e2e2;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.service-tile p {
  color: #adaaaa;
  line-height: 1.65;
}

.method-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.25rem;
  padding: 1.4rem;
}

.method-step strong {
  color: #ffe792;
  font-family: "Space Grotesk", sans-serif;
}

.method-step span {
  color: #d4d4d4;
}

.booking-banner {
  padding: 2rem 1.5rem;
}

.booking-banner__inner {
  max-width: 1536px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border: 1px solid rgba(255, 231, 146, 0.25);
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(255, 231, 146, 0.16), rgba(19, 19, 19, 0.95));
  padding: 1.5rem;
}

.booking-banner span {
  color: #ffe792;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.booking-banner h2 {
  margin-top: 0.35rem;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 3vw, 3rem);
  font-weight: 900;
  line-height: 1;
}

.booking-banner p {
  max-width: 620px;
  margin-top: 0.6rem;
  color: #adaaaa;
}

.booking-banner a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.5rem;
  border-radius: 0.375rem;
  background: #ffe792;
  color: #655400;
  padding: 0 1.25rem;
  font-weight: 900;
}

.booking-banner a .material-symbols-outlined {
  color: #655400;
  font-size: 1.2rem;
  letter-spacing: 0;
  text-transform: none;
}

.booking-banner a span:not(.material-symbols-outlined) {
  color: inherit;
  font-size: inherit;
  letter-spacing: 0;
  text-transform: none;
}

.site-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}

.site-modal.is-open {
  display: flex;
}

.site-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.site-modal__panel {
  position: relative;
  width: min(100%, 680px);
  max-height: min(88vh, 780px);
  overflow: auto;
  border: 1px solid rgba(255, 231, 146, 0.22);
  border-radius: 0.5rem;
  background: #131313;
  padding: 1.25rem;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
}

.site-modal__close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.35rem;
  background: rgba(14, 14, 14, 0.8);
  color: #e3e2e2;
}

.site-modal__media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 0.35rem;
  margin-bottom: 1.4rem;
}

.site-modal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-modal__eyebrow {
  color: #ffe792;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.site-modal h2 {
  margin-top: 0.5rem;
  color: #fff;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 0.95;
}

.site-modal p[data-modal-body] {
  margin-top: 1rem;
  color: #d4d4d4;
  line-height: 1.7;
}

.site-modal__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5rem;
  min-height: 3rem;
  border-radius: 0.35rem;
  background: #ffe792;
  color: #655400;
  padding: 0 1rem;
  font-weight: 900;
}

@media (max-width: 760px) {
  .booking-banner__inner {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-banner a {
    width: 100%;
  }

  .shock-hero {
    height: 285vh;
    min-height: 100svh;
    overflow: visible;
  }

  .shock-hero__pin {
    position: sticky;
    min-height: 100svh;
    align-items: flex-start;
    padding: 5.75rem 1rem calc(10.5rem + env(safe-area-inset-bottom));
  }

  .shock-hero__pin::before {
    background:
      linear-gradient(180deg, rgba(21, 21, 21, 0.9) 0%, rgba(21, 21, 21, 0.34) 34%, rgba(21, 21, 21, 0.18) 56%, rgba(21, 21, 21, 0.86) 100%),
      linear-gradient(90deg, rgba(21, 21, 21, 0.72) 0%, rgba(21, 21, 21, 0.14) 58%, rgba(21, 21, 21, 0.28) 100%);
  }

  .shock-copy {
    width: min(100%, 23rem);
    padding-top: clamp(0.5rem, 4vh, 1.6rem);
  }

  .shock-copy h1 {
    max-width: 10ch;
    margin-top: 0.8rem;
    font-size: clamp(2.65rem, 13vw, 4.15rem);
    line-height: 0.94;
  }

  .shock-eyebrow {
    gap: 0.5rem;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
  }

  .shock-eyebrow::before {
    width: 1.3rem;
  }

  .shock-copy p {
    margin-top: 0.85rem;
    max-width: 21rem;
    font-size: 0.98rem;
    line-height: 1.48;
  }

  .shock-services {
    margin-top: 0.9rem;
    padding-left: 0.85rem;
  }

  .shock-services strong {
    font-size: 0.92rem;
  }

  .shock-services span {
    font-size: 0.72rem;
  }

  .shock-services small,
  .shock-link {
    display: none;
  }

  .shock-actions {
    margin-top: 1rem;
  }

  .shock-btn {
    min-height: 3.1rem;
    padding: 0 1rem;
    font-size: 0.9rem;
  }

  .shock-video-wrap {
    min-height: 100svh;
    height: 100svh;
  }

  .shock-video,
  .shock-video-poster {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 72% center;
  }

  .shock-stage-copy {
    inset: auto 0.85rem calc(0.9rem + env(safe-area-inset-bottom));
    min-height: 11.5rem;
    z-index: 4;
  }

  .shock-stage {
    top: auto !important;
    right: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100%;
    min-height: 8rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 0.45rem;
    background: rgba(12, 12, 12, 0.72);
    padding: 0.92rem 0.95rem 0.95rem 3.55rem;
    box-shadow: 0 1.3rem 3rem rgba(0, 0, 0, 0.36);
    backdrop-filter: blur(14px);
    transform: translate3d(0, 18px, 0) scale(0.98);
  }

  .shock-stage.is-active {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .shock-stage::before {
    content: attr(data-step);
    left: 1rem;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 231, 146, 0.65);
    border-radius: 999px;
    background: rgba(255, 231, 146, 0.12);
    color: #ffe792;
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: none;
    transform: none;
  }

  .shock-stage::after {
    display: none;
  }

  .shock-stage span {
    color: #ffe792;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
  }

  .shock-stage strong {
    margin-top: 0.42rem;
    font-size: clamp(0.98rem, 4.75vw, 1.24rem);
    line-height: 1.18;
  }

  .footer-contact {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* === Logo immagine: niente schiacciamento === */
.site-logo-img {
  display: block;
  height: 2.5rem;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .site-logo-img {
    height: 2.75rem;
    max-width: 260px;
  }
}
[data-mobile-menu] .site-logo-img {
  height: 2rem;
  max-width: 200px;
}

/* === Parallax === */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Stato filtri galleria attivo */
.filter-btn[aria-pressed="true"] {
  background-color: #2c2c2c;
  color: #ffe792;
  border: 1px solid rgba(255, 215, 9, 0.35);
}
/* Card galleria nascosta dal filtro */
[data-gallery-card].is-hidden {
  display: none !important;
}

.parallax-layer {
  --p: 0;
  --depth: 120px;
  --scale: 1.12;
  will-change: transform;
  transform: translate3d(0, calc(var(--p) * var(--depth)), 0) scale(var(--scale));
  transform-origin: center;
  transition: transform 30ms linear;
}

.parallax-fade {
  --p: 0;
  opacity: clamp(0, calc(1 - var(--p)), 1);
  transform: translate3d(0, calc(var(--p) * 40px), 0);
  will-change: transform, opacity;
}

.parallax-reveal {
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.parallax-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.parallax-zoom {
  transform: scale(1.08);
  filter: blur(1px);
  transition: transform 800ms ease, filter 800ms ease;
}

.parallax-zoom.is-visible {
  transform: scale(1);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer,
  .parallax-fade,
  .parallax-reveal,
  .parallax-zoom {
    transform: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .shock-hero {
    height: auto;
  }

  .shock-hero__pin {
    position: relative;
  }

  .shock-video {
    display: none;
  }

  .shock-video-poster {
    display: block;
  }
}

/* Sezione BIKE CARE blueprint */
.blueprint-section {
  position: relative;
  overflow: hidden;
  min-height: 90vh;
  display: flex;
  align-items: center;
  isolation: isolate;
}

.blueprint-bg {
  position: absolute;
  inset: -10% 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  filter: brightness(0.55) contrast(1.08) saturate(0.92);
  z-index: -2;
}

.blueprint-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.7) 36%, rgba(10,10,10,0.36) 62%, rgba(10,10,10,0.72) 100%),
    radial-gradient(ellipse at 52% 48%, rgba(14,14,14,0.18) 0%, rgba(14,14,14,0.58) 62%, rgba(14,14,14,0.96) 100%),
    linear-gradient(180deg, rgba(14,14,14,0.66) 0%, rgba(14,14,14,0.28) 48%, rgba(14,14,14,0.96) 100%);
  z-index: -1;
}

.blueprint-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ffe792;
}

.blueprint-eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: #ffe792;
}

.blueprint-title {
  margin-top: 1.5rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: #fff;
  text-shadow: 0 0.45rem 2rem rgba(0, 0, 0, 0.72);
}

.blueprint-title em {
  font-style: normal;
  color: #ffe792;
}

.blueprint-lead {
  max-width: 38rem;
  margin-top: 2rem;
  color: #e3e2e2cc;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  text-shadow: 0 0.35rem 1.25rem rgba(0, 0, 0, 0.78);
}

.blueprint-stats {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 36rem;
}

.blueprint-stats > div strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 900;
  color: #ffe792;
}

.blueprint-stats > div span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #adaaaa;
}

@media (max-width: 700px) {
  .blueprint-stats { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ============================================================
   BLOG - Layout 1 EDITORIAL
   ============================================================ */
.blog-hero {
  position: relative;
  height: 92vh;
  min-height: 620px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
}
.blog-hero img.blog-hero__bg {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; z-index: -2;
}
.blog-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(14,14,14,0.35) 0%, rgba(14,14,14,0.85) 75%, #0e0e0e 100%);
}
.blog-hero__inner {
  width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 6rem 1.5rem 4rem;
}
.blog-hero__cat {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 231, 146, 0.14);
  color: #ffe792;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 999px;
}
.blog-hero h1 {
  margin-top: 1.5rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 8vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
  max-width: 22ch;
}
.blog-hero__meta {
  display: flex; gap: 1.25rem; flex-wrap: wrap;
  margin-top: 1.5rem;
  color: #adaaaa; font-size: 0.85rem;
  letter-spacing: 0.04em;
}
.blog-hero__meta span { display: inline-flex; align-items: center; gap: 0.5rem; }

.blog-prose {
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #d4d4d4;
}
.blog-prose p { margin-bottom: 1.4rem; }
.blog-prose p:first-of-type::first-letter {
  font-family: "Space Grotesk", sans-serif;
  font-size: 4rem;
  font-weight: 900;
  color: #ffe792;
  float: left;
  line-height: 0.9;
  margin: 0.2rem 0.6rem 0 0;
}
.blog-prose h2 {
  margin: 3rem 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  color: #fff; font-size: 1.9rem; font-weight: 900;
  letter-spacing: -0.02em;
}
.blog-prose h3 {
  margin: 2rem 0 0.7rem;
  font-family: "Space Grotesk", sans-serif;
  color: #ffe792; font-size: 1.25rem; font-weight: 800;
}
.blog-prose blockquote {
  margin: 2.5rem 0;
  padding: 1.6rem 2rem;
  border-left: 3px solid #ffe792;
  background: rgba(255, 231, 146, 0.06);
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  font-style: italic;
  color: #fff;
  line-height: 1.4;
}
.blog-prose ul { margin: 1rem 0 1.5rem 1.5rem; }
.blog-prose li { margin-bottom: 0.45rem; }

.blog-fullbleed {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(50vh, 70vw, 90vh);
  overflow: hidden;
  isolation: isolate;
}
.blog-fullbleed img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover; z-index: -1;
}
.blog-fullbleed figcaption {
  position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem;
  max-width: 30rem;
  padding: 1rem 1.25rem;
  background: rgba(14,14,14,0.7);
  border-left: 2px solid #ffe792;
  font-size: 0.85rem;
  color: #d4d4d4;
  backdrop-filter: blur(10px);
}

.blog-video {
  max-width: 1100px;
  margin: 4rem auto;
  padding: 0 1.5rem;
}
.blog-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255, 231, 146, 0.15);
  background: #000;
}
.blog-video__frame iframe,
.blog-video__frame video { width: 100%; height: 100%; border: 0; }
.blog-video__frame .blog-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.55) 100%);
  cursor: pointer;
  transition: background 0.3s ease;
}
.blog-video__frame .blog-video__play:hover { background: rgba(0,0,0,0.45); }
.blog-video__frame .blog-video__play span {
  width: 84px; height: 84px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffe792; color: #655400;
  border-radius: 999px;
  font-size: 3.5rem;
}
.blog-video figcaption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: #adaaaa;
  text-align: center;
}

.blog-related {
  max-width: 1280px;
  margin: 4rem auto 6rem;
  padding: 0 1.5rem;
}
.blog-related h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem; font-weight: 900;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}
.blog-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}
.blog-related__card {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #131313;
}
.blog-related__card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.blog-related__card:hover img { transform: scale(1.05); }
.blog-related__card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
}
.blog-related__card span {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.25rem; z-index: 1;
  color: #fff; font-family: "Space Grotesk", sans-serif;
  font-size: 1.1rem; font-weight: 800;
}

/* ============================================================
   BLOG - Layout 2 TECHNICAL
   ============================================================ */
.tech-hero {
  position: relative;
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  background: #0e0e0e;
  isolation: isolate;
  overflow: hidden;
}
@media (min-width: 900px) {
  .tech-hero { grid-template-columns: 1.1fr 1fr; }
}
.tech-hero__copy {
  padding: 8rem 2rem 4rem;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid rgba(72,72,71,0.25);
  position: relative;
  z-index: 1;
}
.tech-hero__copy::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #ffe792, transparent 70%);
}
.tech-hero__id {
  font-family: "JetBrains Mono", "Inter", monospace;
  color: #ffe792;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.tech-hero h1 {
  margin-top: 1.5rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: #fff;
}
.tech-hero h1 em { font-style: normal; color: #ffe792; }
.tech-hero__sub {
  margin-top: 1.5rem;
  max-width: 36rem;
  color: #d4d4d4;
  font-size: 1.1rem;
  line-height: 1.6;
}
.tech-hero__media {
  position: relative;
  min-height: 60vh;
  overflow: hidden;
}
.tech-hero__media img {
  position: absolute; inset: -8% 0; width: 100%; height: 116%;
  object-fit: cover;
}
.tech-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(14,14,14,0.6), transparent 60%);
}

.tech-specs {
  max-width: 1280px;
  margin: 5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 900px) {
  .tech-specs { grid-template-columns: minmax(280px, 360px) 1fr; gap: 4rem; }
}
.tech-specs__rail {
  border-left: 1px solid rgba(255,231,146,0.18);
  padding-left: 1.5rem;
}
.tech-specs__rail h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #ffe792;
  font-weight: 900;
  margin-bottom: 1.25rem;
}
.tech-specs__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(72,72,71,0.25);
  font-size: 0.92rem;
}
.tech-specs__row span { color: #adaaaa; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; }
.tech-specs__row strong { color: #fff; font-family: "Space Grotesk", sans-serif; }

.tech-content {
  max-width: 720px;
  font-size: 1.05rem;
  line-height: 1.8;
  color: #d4d4d4;
}
.tech-content h2 {
  margin: 2.5rem 0 1rem;
  font-family: "Space Grotesk", sans-serif;
  color: #fff; font-size: 1.7rem; font-weight: 900;
  letter-spacing: -0.02em;
}
.tech-content p { margin-bottom: 1.2rem; }

.tech-gallery {
  max-width: 1280px;
  margin: 5rem auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}
.tech-gallery > * {
  position: relative;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #131313;
  aspect-ratio: 4 / 3;
}
.tech-gallery > *:nth-child(1) { grid-column: span 8; aspect-ratio: 16 / 9; }
.tech-gallery > *:nth-child(2) { grid-column: span 4; aspect-ratio: 3 / 4; }
.tech-gallery > *:nth-child(3) { grid-column: span 4; aspect-ratio: 3 / 4; }
.tech-gallery > *:nth-child(4) { grid-column: span 8; aspect-ratio: 16 / 9; }
.tech-gallery img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease, filter 0.6s ease;
  filter: grayscale(0.2);
}
.tech-gallery > *:hover img {
  transform: scale(1.04);
  filter: grayscale(0);
}
@media (max-width: 760px) {
  .tech-gallery { grid-template-columns: 1fr; }
  .tech-gallery > *:nth-child(n) { grid-column: span 1; aspect-ratio: 4 / 3; }
}

.tech-quote {
  max-width: 1100px;
  margin: 5rem auto;
  padding: 3rem 2rem;
  border-top: 1px solid rgba(255,231,146,0.18);
  border-bottom: 1px solid rgba(255,231,146,0.18);
  text-align: center;
}
.tech-quote p {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.25;
}
.tech-quote cite {
  display: block;
  margin-top: 1.5rem;
  color: #ffe792;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-style: normal;
}

.tech-sticky-video {
  position: relative;
  height: 200vh;
}
.tech-sticky-video__frame {
  position: sticky; top: 5rem;
  margin: 0 1.5rem;
  aspect-ratio: 16 / 9;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid rgba(255,231,146,0.18);
  background: #000;
}
.tech-sticky-video__frame iframe,
.tech-sticky-video__frame video { width: 100%; height: 100%; border: 0; }

.blog-cta {
  max-width: 1280px;
  margin: 6rem auto 4rem;
  padding: 3rem 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, rgba(255,231,146,0.16), rgba(19,19,19,0.95));
  border: 1px solid rgba(255,231,146,0.25);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.blog-cta h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
  max-width: 32ch;
}
.blog-cta a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #ffe792; color: #655400;
  padding: 0.9rem 1.4rem;
  border-radius: 0.375rem;
  font-weight: 900;
}