@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');

:root {
  --black: #000000;
  --black-soft: #050505;
  --gold: #d4af37;
  --gold-bright: #f4d66d;
  --gold-deep: #8c6a16;
  --gold-rgb: 212, 175, 55;
  --white: #f5f2e9;
  --muted: #9d9684;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sans: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--gold-rgb), .07), transparent 35%),
    var(--black);
  color: var(--white);
  font-family: var(--sans);
  overflow-x: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

body::selection,
*::selection {
  background: transparent;
  color: inherit;
}

.site-shell {
  width: 100%;
  overflow: hidden;
}

/* ---------- HERO / YOUTUBE BACKGROUND ---------- */

.hero {
  position: relative;
  isolation: isolate;
  min-height: clamp(520px, 72vh, 850px);
  width: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000;
}

/* Modern browsers: track the ACTUAL visible viewport height, which
   changes as mobile browsers show/hide their address bar. Plain vh
   on mobile is fixed to the tallest possible viewport, so the hero
   (and the video clipped inside it) can end up shorter or taller
   than what's really on screen. Older browsers simply ignore this
   block and keep the vh value above. */
@supports (height: 100dvh) {
  .hero {
    min-height: clamp(520px, 72dvh, 850px);
  }
}

.video-layer {
  position: absolute;
  z-index: -4;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background: #000;
}

/*
  The iframe is intentionally oversized to behave like
  object-fit: cover while preserving the video's aspect ratio.
*/
.video-layer iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Sized slightly beyond a plain "cover" fit on purpose: YouTube draws
     its own UI chrome (the autoplay mute/unmute icon, and — if autoplay
     is ever blocked by a browser — its play button) anchored to the
     iframe's own edges. There is no embed parameter that removes
     this; it's part of YouTube's player, not something a site can
     turn off. A modest overscan pushes those edge-anchored elements
     outside the visible, overflow:hidden viewport — kept small here
     so the video still reads as a normal view, not a tight crop. */
  width: max(112vw, 199.11vh);
  height: max(112vh, 63vw);
  min-width: 112%;
  min-height: 112%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0.8;
  filter: saturate(1) contrast(1) brightness(1.1);
}

/* Same dvh upgrade for the video's own sizing math, so the
   overscan amount stays correct as the mobile viewport height
   actually changes (not the fixed, always-tallest vh value). */
@supports (height: 100dvh) {
  .video-layer iframe {
    width: max(112vw, 199.11dvh);
    height: max(112dvh, 63vw);
  }
}

.video-tint {
  position: absolute;
  z-index: -3;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.34) 35%,
      rgba(0,0,0,.52) 70%,
      rgba(0,0,0,.98) 100%),
    radial-gradient(circle at 50% 42%, transparent 0%, rgba(0,0,0,.55) 78%);
  pointer-events: none;
}

.video-vignette {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 180px 70px rgba(0,0,0,.9);
}

.scanlines {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 3px,
    rgba(255,255,255,.035) 4px
  );
}

.hero-content {
  width: min(92%, 1050px);
  text-align: center;
  padding: 80px 20px 110px;
}

.mark {
  width: 46px;
  height: 46px;
  margin: 0 auto 30px;
  border: 1px solid rgba(var(--gold-rgb), .85);
  display: grid;
  place-items: center;
  transform: rotate(45deg);
  box-shadow:
    0 0 16px rgba(var(--gold-rgb), .15),
    inset 0 0 16px rgba(var(--gold-rgb), .08);
  animation: markPulse 3s ease-in-out infinite;
}

.mark span {
  width: 12px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 18px rgba(var(--gold-rgb), .9);
  animation: innerPulse 2s ease-in-out infinite;
}

@keyframes markPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(var(--gold-rgb), .15), inset 0 0 16px rgba(var(--gold-rgb), .08); }
  50% { box-shadow: 0 0 32px rgba(var(--gold-rgb), .35), inset 0 0 24px rgba(var(--gold-rgb), .16); }
}

@keyframes innerPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.72); }
}

.eyebrow {
  color: var(--gold-bright);
  font: 500 11px/1 var(--mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 0 0 18px rgba(var(--gold-rgb), .42);
}

h1 {
  font-size: clamp(1.9rem, 5.6vw, 5.1rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  font-weight: 300;
  color: #fff;
}

/* Each line reveals on its own: a soft rise out of blur, rather
   than a flat fade — reads as deliberate rather than a stock
   fade-in. */
h1 .line {
  display: inline-block;
  opacity: 0;
  transform: translateY(34px);
  filter: blur(9px);
  text-shadow: 0 5px 35px rgba(0,0,0,.75);
  animation: lineReveal .95s cubic-bezier(.16, 1, .3, 1) forwards;
}

h1 .line:not(.gold) {
  animation-delay: .15s;
}

@keyframes lineReveal {
  0%   { opacity: 0; transform: translateY(34px); filter: blur(9px); }
  55%  { filter: blur(0); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Gold line: same rise-and-focus entrance, followed by a single
   light sweep across the metallic gradient once it's settled. */
h1 .gold {
  background: linear-gradient(100deg,
    var(--gold-deep) 0%,
    var(--gold-bright) 24%,
    #fff6da 50%,
    var(--gold-bright) 76%,
    var(--gold-deep) 100%);
  background-size: 240% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-bright); /* fallback if background-clip: text isn't supported */
  text-shadow: 0 0 22px rgba(var(--gold-rgb), .22);
  animation:
    lineReveal .95s cubic-bezier(.16, 1, .3, 1) forwards .42s,
    goldSheen 2.4s ease-in-out forwards 1.05s;
}

@keyframes goldSheen {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}

.sub {
  --sub-spacing: .2em;
  margin-top: 26px;
  color: rgba(255,255,255,.7);
  font: 400 clamp(9px, 1.3vw, 12px)/1.5 var(--mono);
  letter-spacing: var(--sub-spacing);
  text-transform: uppercase;
  opacity: 0;
  filter: blur(4px);
  animation: subReveal .9s cubic-bezier(.16, 1, .3, 1) forwards .78s;
}

@keyframes subReveal {
  from { opacity: 0; letter-spacing: calc(var(--sub-spacing) * 2.5); filter: blur(4px); }
  to   { opacity: 1; letter-spacing: var(--sub-spacing); filter: blur(0); }
}

.scroll-indicator {
  margin: 58px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.48);
  opacity: 0;
  animation: fadeUp .8s ease forwards 1.3s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.scroll-indicator span {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(var(--gold), transparent);
  animation: scrollPulse 1.8s ease-in-out infinite;
}

.scroll-indicator small {
  font: 500 9px/1 var(--mono);
  letter-spacing: .25em;
}

@keyframes scrollPulse {
  0%, 100% { opacity: .35; transform: scaleY(.7); transform-origin: top; }
  50% { opacity: 1; transform: scaleY(1); transform-origin: top; }
}

/* ---------- WATCH ON YOUTUBE LINK ---------- */

.watch-link-wrap {
  text-align: center;
  padding: 0 20px;
  margin-top: 46px;
}

.watch-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  color: var(--white);
  text-decoration: none;
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(var(--gold-rgb), .4);
  background: rgba(255, 255, 255, .02);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  isolation: isolate;
  transition: border-color .35s ease, box-shadow .35s ease,
              background .35s ease, color .35s ease;
}

.watch-link svg {
  color: var(--gold-bright);
  transition: transform .35s ease;
}

.watch-link:hover,
.watch-link:focus-visible {
  color: var(--gold-bright);
  border-color: rgba(var(--gold-rgb), .85);
  background: rgba(var(--gold-rgb), .08);
  box-shadow:
    0 0 16px rgba(var(--gold-rgb), .3),
    0 0 32px rgba(var(--gold-rgb), .12);
}

.watch-link:hover svg,
.watch-link:focus-visible svg {
  transform: scale(1.15);
}

.watch-link:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* ---------- SERVICES ---------- */

.services {
  position: relative;
  width: min(1200px, calc(100% - 32px));
  margin: 0 auto;
  padding: 86px 0 100px;
}

.section-heading {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
  color: var(--gold);
  font: 500 10px/1 var(--mono);
  letter-spacing: .3em;
}

.heading-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb), .45));
}

.heading-line:last-child {
  background: linear-gradient(90deg, rgba(var(--gold-rgb), .45), transparent);
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.service-card {
  position: relative;
  isolation: isolate;
  min-height: 106px;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  color: var(--white);
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    rgba(8,8,8,.58);
  border: 1px solid rgba(var(--gold-rgb), .18);
  border-radius: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 35px rgba(0,0,0,.3);
  transition:
    transform .38s cubic-bezier(.2,.8,.2,1),
    border-color .38s ease,
    box-shadow .38s ease,
    background .38s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -120%;
  left: -35%;
  width: 35%;
  height: 340%;
  transform: rotate(25deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.06),
    rgba(var(--gold-rgb), .25),
    rgba(255,255,255,.06),
    transparent
  );
  transition: left .7s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  box-shadow:
    inset 0 0 25px rgba(var(--gold-rgb), .11),
    0 0 25px rgba(var(--gold-rgb), .14);
  transition: opacity .38s ease;
}

.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(var(--gold-rgb), .8);
  background:
    linear-gradient(135deg, rgba(var(--gold-rgb), .11), rgba(255,255,255,.025)),
    rgba(10,10,10,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(var(--gold-rgb), .08),
    0 14px 42px rgba(0,0,0,.55),
    0 0 30px rgba(var(--gold-rgb), .16);
  outline: none;
}

.service-card:hover::before,
.service-card:focus-visible::before {
  left: 130%;
}

.service-card:hover::after,
.service-card:focus-visible::after {
  opacity: 1;
}

.service-number {
  color: rgba(var(--gold-rgb), .7);
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
}

.service-name {
  max-width: 90%;
  color: #f1ede2;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 400;
  line-height: 1.3;
  transition: color .3s ease, text-shadow .3s ease;
}

.service-card:hover .service-name,
.service-card:focus-visible .service-name {
  color: var(--gold-bright);
  text-shadow: 0 0 14px rgba(var(--gold-rgb), .34);
}

.service-arrow {
  position: absolute;
  right: 18px;
  bottom: 17px;
  color: rgba(var(--gold-rgb), .5);
  font-size: 17px;
  transform: translate(0, 0);
  transition: color .3s ease, transform .3s ease, text-shadow .3s ease;
}

.service-card:hover .service-arrow,
.service-card:focus-visible .service-arrow {
  color: var(--gold-bright);
  transform: translate(3px, -3px);
  text-shadow: 0 0 12px rgba(var(--gold-rgb), .7);
}

footer {
  padding: 0 20px 34px;
  text-align: center;
}

.disclaimer {
  max-width: 720px;
  margin: 0 auto 22px;
}

.disclaimer-strip {
  color: rgba(255, 255, 255, .42);
  font: 400 9px/1.6 var(--mono);
  letter-spacing: .05em;
  margin-bottom: 10px;
}

.disclaimer-full {
  text-align: left;
  border: 1px solid rgba(var(--gold-rgb), .16);
  border-radius: 6px;
  background: rgba(255, 255, 255, .015);
}

.disclaimer-full summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 16px;
  color: rgba(255, 255, 255, .42);
  font: 500 9px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  transition: color .3s ease;
}

.disclaimer-full summary::-webkit-details-marker {
  display: none;
}

.disclaimer-full summary::before {
  content: "＋ ";
  color: rgba(var(--gold-rgb), .6);
}

.disclaimer-full[open] summary::before {
  content: "－ ";
}

.disclaimer-full summary:hover,
.disclaimer-full summary:focus-visible {
  color: var(--gold-bright);
}

.disclaimer-body {
  padding: 4px 18px 18px;
  border-top: 1px solid rgba(var(--gold-rgb), .1);
}

.disclaimer-body p {
  color: rgba(255, 255, 255, .42);
  font: 400 9px/1.6 var(--sans);
  letter-spacing: .01em;
  margin-top: 12px;
}

.disclaimer-body p:first-child {
  margin-top: 14px;
}

.disclaimer-body strong {
  color: rgba(255, 255, 255, .42);
  font-weight: 600;
}

footer p {
  color: #655f50;
  font: 400 10px/1.5 var(--mono);
  letter-spacing: .09em;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero {
    min-height: 650px;
  }

  .hero-content {
    padding-bottom: 120px;
  }
}

@media (max-width: 600px) {
  .hero {
    min-height: 590px;
  }

  .hero-content {
    width: 94%;
    padding: 60px 8px 100px;
  }

  .mark {
    width: 38px;
    height: 38px;
    margin-bottom: 24px;
  }

  .mark span {
    width: 9px;
    height: 9px;
  }

  .eyebrow {
    letter-spacing: .2em;
    font-size: 9px;
  }

  h1 {
    font-size: clamp(2rem, 11vw, 3.4rem);
    line-height: 1.06;
  }

  .sub {
    --sub-spacing: .12em;
    font-size: 9px;
    line-height: 1.8;
  }

  .scroll-indicator {
    margin-top: 42px;
  }

  .services {
    width: min(100% - 22px, 520px);
    padding: 60px 0 72px;
  }

  .section-heading {
    gap: 10px;
    font-size: 9px;
    letter-spacing: .2em;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .service-card {
    min-height: 91px;
    padding: 17px;
  }

  .service-card:hover,
  .service-card:focus-visible {
    transform: translateY(-4px);
  }

  footer {
    padding-bottom: 25px;
  }

  footer p {
    font-size: 8px;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* These start hidden and rely on their entrance animation to
     reveal them — with animations off, force them visible instead
     of leaving the text permanently blank. */
  h1 .line,
  .sub,
  .scroll-indicator {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}