/* ===================================================================
   IWA Academy — Homepage sections
   Hero slider · YouTube classes · Contact

   Replaces ~350 lines of inline <style> that were previously duplicated
   into every homepage response. One external file is cacheable, so
   repeat visits pay nothing for it.

   Depth is rationed the same way as the file hub, so the two surfaces
   read as one product:
     Level 1  surface  — cards and panels: one soft shadow + 1px highlight
     Level 2  well     — blocks nested in a surface: flat tint + hairline
     Level 3  control  — inputs and chips: a shallow inset press
     Glass             — layers that float over content
     Clay              — primary CTAs and the hero portrait frame
     Spotlight         — pointer-following highlight, --sx/--sy from JS
   =================================================================== */

/* ------------------------------------------------------------------
   Tokens — dark default, light overrides after
------------------------------------------------------------------ */
.ih {
  --ih-accent: #ff014f;
  --ih-accent-2: #ff5c8d;
  --ih-btn-from: #e50045;
  --ih-btn-to: #bd0038;
  --ih-accent-3: #7c5cff;
  --ih-accent-soft: rgba(255, 1, 79, .13);
  --ih-glow: rgba(255, 1, 79, .34);

  --ih-text: var(--public-text, #c4cfde);
  --ih-head: var(--public-heading, #f7f8fa);
  --ih-muted: var(--public-muted, #8d96a5);

  --ih-surface: #23262c;
  --ih-surface-2: #1e2126;
  --ih-sheen: rgba(255, 255, 255, .055);
  --ih-well: rgba(255, 255, 255, .035);

  --ih-control: #1b1e23;
  --ih-control-inset: inset 0 2px 5px rgba(0, 0, 0, .34);

  /* Neomorphic set. A pressed control normally shares its panel's colour, but
     dark-on-dark shadows carry almost no contrast, so the field base is a step
     darker than the panel and the stack starts with a 1px rim. That rim is what
     makes the boundary readable — without it the field vanished into the panel. */
  --ih-neo: #22262c;
  --ih-neo-well: #1a1e23;
  --ih-neo-dark: #0e1114;
  --ih-neo-light: #343a42;
  --ih-neo-rim: rgba(0, 0, 0, .5);

  /* Rim first: box-shadow paints the first layer on top, so the crisp edge sits
     above the soft press. */
  --ih-neo-in:
    inset 0 0 0 1px var(--ih-neo-rim),
    inset 4px 5px 9px var(--ih-neo-dark),
    inset -3px -3px 8px var(--ih-neo-light);
  --ih-neo-out: 6px 6px 13px var(--ih-neo-dark), -6px -6px 13px var(--ih-neo-light);

  /* Claymorphic panel: thick drop shadow plus two inner highlights, which is
     what gives the puffed-up edge. */
  --ih-clay-panel:
    0 26px 50px -18px rgba(0, 0, 0, .58),
    inset 0 -10px 18px rgba(0, 0, 0, .24),
    inset 0 12px 20px rgba(255, 255, 255, .07);

  --ih-glass: linear-gradient(158deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .022));
  --ih-glass-solid: #23262c;

  --ih-border: rgba(255, 255, 255, .1);
  --ih-border-lit: rgba(255, 255, 255, .2);

  --ih-lift: 0 14px 30px -18px rgba(0, 0, 0, .58);
  --ih-lift-hover: 0 22px 40px -20px rgba(0, 0, 0, .68);

  /* Clay: puffy, for the portrait frame and primary CTAs only */
  --ih-clay:
    0 20px 38px -16px rgba(0, 0, 0, .6),
    inset 0 -7px 14px rgba(0, 0, 0, .26),
    inset 0 9px 16px rgba(255, 255, 255, .09);

  --ih-spot: rgba(255, 255, 255, .07);

  --ih-r-xl: 26px;
  --ih-r-lg: 20px;
  --ih-r-md: 14px;
  --ih-r-sm: 10px;

  --ih-ease: cubic-bezier(.22, 1, .36, 1);
  --ih-spring: cubic-bezier(.34, 1.4, .64, 1);
  --ih-blur: blur(20px) saturate(160%);

  position: relative;
  color: var(--ih-text);
  font-family: 'Hind Siliguri', 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-theme="light"] .ih,
body.light-mode .ih {
  --ih-accent: #df0046;
  --ih-accent-2: #ff5c8d;
  --ih-btn-from: #df0046;
  --ih-btn-to: #a8003a;
  --ih-accent-3: #6247ff;
  --ih-accent-soft: rgba(223, 0, 70, .08);
  --ih-glow: rgba(223, 0, 70, .26);

  --ih-surface: #ffffff;
  --ih-surface-2: #f7f9fc;
  --ih-sheen: rgba(255, 255, 255, .9);
  --ih-well: rgba(24, 37, 58, .035);

  --ih-control: #f1f4f9;
  --ih-control-inset: inset 0 2px 4px rgba(31, 49, 78, .09);

  /* A pure-white panel has no shadow to give back, so neomorphism disappears
     on it. The light base is deliberately tinted instead. */
  --ih-neo: #e9edf4;
  --ih-neo-well: #dfe5ee;
  --ih-neo-dark: #b6bfd0;
  --ih-neo-light: #ffffff;
  --ih-neo-rim: rgba(31, 49, 78, .16);

  --ih-neo-in:
    inset 0 0 0 1px var(--ih-neo-rim),
    inset 4px 5px 9px var(--ih-neo-dark),
    inset -3px -3px 8px var(--ih-neo-light);
  --ih-neo-out: 6px 6px 12px var(--ih-neo-dark), -6px -6px 12px var(--ih-neo-light);

  --ih-clay-panel:
    0 24px 44px -18px rgba(31, 49, 78, .3),
    inset 0 -10px 18px rgba(31, 49, 78, .07),
    inset 0 12px 20px rgba(255, 255, 255, .95);

  --ih-glass: linear-gradient(158deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .6));
  --ih-glass-solid: #ffffff;

  --ih-border: rgba(24, 37, 58, .11);
  --ih-border-lit: rgba(24, 37, 58, .22);

  --ih-lift: 0 12px 26px -16px rgba(31, 49, 78, .26);
  --ih-lift-hover: 0 20px 36px -18px rgba(31, 49, 78, .32);

  --ih-clay:
    0 18px 34px -16px rgba(31, 49, 78, .28),
    inset 0 -6px 13px rgba(31, 49, 78, .07),
    inset 0 9px 16px rgba(255, 255, 255, .95);

  --ih-spot: rgba(31, 49, 78, .05);
}

.ih *,
.ih *::before,
.ih *::after { box-sizing: border-box; }

.ih a { text-decoration: none; color: inherit; }
.ih h1, .ih h2, .ih h3, .ih h4 { margin: 0; color: var(--ih-head); }
.ih p { margin: 0; }
.ih ul { margin: 0; padding: 0; list-style: none; }
.ih svg { display: block; }
.ih img { max-width: 100%; }

/* The muted token is too close to the ambient background on mobile. */
.ih .ih-eyebrow { color: #b9c5d5; }
html[data-theme="light"] .ih .ih-eyebrow,
body.light-mode .ih .ih-eyebrow { color: #4b5d76; }

.ih :focus-visible {
  outline: 2px solid var(--ih-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.ih-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ih-shell {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
}

/* ------------------------------------------------------------------
   Ambient wash — gives the glass something to refract
------------------------------------------------------------------ */
.ih-ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ih-ambient span {
  position: absolute;
  display: block;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .18;
}

.ih-ambient span:nth-child(1) { top: -140px; left: -120px; background: var(--ih-accent); }
.ih-ambient span:nth-child(2) { bottom: -180px; right: -130px; background: var(--ih-accent-3); }

html[data-theme="light"] .ih-ambient span { opacity: .14; }

/* ------------------------------------------------------------------
   Surfaces
------------------------------------------------------------------ */
.ih-glass {
  position: relative;
  background: var(--ih-glass);
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-lg);
  box-shadow: var(--ih-lift), inset 0 1px 0 var(--ih-sheen);
  -webkit-backdrop-filter: var(--ih-blur);
  backdrop-filter: var(--ih-blur);
}

@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .ih-glass { background: var(--ih-glass-solid); }
}

/* ------------------------------------------------------------------
   Spotlight
   A single pseudo-element per card, positioned from --sx/--sy which
   JS writes on pointermove. Opacity is the only animated property, so
   the effect never triggers layout.
------------------------------------------------------------------ */
.ih-spotlight { position: relative; overflow: hidden; }

.ih-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(
    340px circle at var(--sx, 50%) var(--sy, 50%),
    var(--ih-spot),
    transparent 62%
  );
}

.ih-spotlight > * { position: relative; z-index: 1; }
.ih-spotlight:hover::before,
.ih-spotlight:focus-within::before { opacity: 1; }

/* Touch pointers have no hover state to reveal, so skip the work. */
@media (hover: none) {
  .ih-spotlight::before { display: none; }
}

/* ------------------------------------------------------------------
   Section heading
------------------------------------------------------------------ */
.ih-head {
  max-width: 720px;
  margin: 0 auto 34px;
  text-align: center;
}

.ih-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 14px;
  margin-bottom: 14px;
  border: 1px solid var(--ih-border);
  border-radius: 999px;
  background: var(--ih-accent-soft);
  color: var(--ih-accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.ih-eyebrow svg { width: 13px; height: 13px; }

.ih-h2 {
  font-size: clamp(24px, 4vw, 38px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.ih-h2 em { font-style: normal; color: var(--ih-accent); }

.ih-lede {
  margin-top: 11px;
  color: var(--ih-muted);
  font-size: 15px;
  line-height: 1.75;
}

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.ih-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--ih-r-md);
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .24s var(--ih-ease), box-shadow .24s ease, color .2s ease, border-color .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.ih-btn svg { width: 16px; height: 16px; }

/* `.ih` prefixed so these outrank `.ih a { color: inherit }` — a bare
   class selector loses to it and the label would inherit body colour.

   The gradient runs accent -> darker, never accent -> lighter: white on
   #ff5c8d is about 2.9:1, which fails contrast, so the old light-pink end
   made the label genuinely hard to read. This end keeps white above 5:1. */
.ih .ih-btn--primary {
  background: linear-gradient(140deg, var(--ih-btn-from), var(--ih-btn-to));
  color: #ffffff;
  box-shadow: 0 10px 22px -10px var(--ih-glow);
}

.ih .ih-btn--primary:hover,
.ih .ih-btn--primary:focus-visible {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -12px var(--ih-glow);
}

/* --ih-well is nearly transparent, so over the hero's ambient gradient the old
   ghost button had almost no edge and its label appeared to float. It now sits
   on a real surface with a visible border. */
.ih .ih-btn--ghost {
  background: var(--ih-surface);
  border-color: var(--ih-border-lit);
  color: var(--ih-head);
  box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .5);
}

.ih .ih-btn--ghost:hover,
.ih .ih-btn--ghost:focus-visible {
  color: var(--ih-accent);
  border-color: var(--ih-accent);
  transform: translateY(-2px);
}

.ih-btn--lg { padding: 15px 30px; font-size: 14.5px; }

/* ==================================================================
   1. HERO
================================================================== */
.ih-hero {
  position: relative;
  padding: 150px 0 84px;
  overflow: hidden;
}

.ih-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

@media (min-width: 992px) {
  .ih-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; }
}

.ih-hero__copy { min-width: 0; }
/* min-width:0 stops a long word in the copy column from forcing the grid wider
   than the viewport, which would reintroduce horizontal scroll on mobile. */
.ih-hero__art { min-width: 0; }

.ih-hero__title {
  font-size: clamp(30px, 5.4vw, 52px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.ih-hero__title span { color: var(--ih-accent); }

/* Word rotator. Height is fixed to one line so swapping the word can
   never reflow the paragraph below it. */
.ih-rotate {
  display: block;
  position: relative;
  height: 1.18em;
  margin-top: .12em;
  overflow: hidden;
}

.ih-rotate__word {
  position: absolute;
  inset: 0;
  color: var(--ih-head);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(60%);
  transition: opacity .4s var(--ih-ease), transform .5s var(--ih-ease);
}

.ih-rotate__word.is-in { opacity: 1; transform: none; }
.ih-rotate__word.is-out { opacity: 0; transform: translateY(-60%); }

.ih-hero__lede {
  max-width: 56ch;
  margin-top: 18px;
  font-size: 15.5px;
  line-height: 1.8;
}

.ih-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

/* Level 2 wells inside the hero */
.ih-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.ih-metablock {
  flex: 1 1 190px;
  padding: 14px 16px;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-md);
  background: var(--ih-well);
}

.ih-metablock__label {
  display: block;
  margin-bottom: 9px;
  color: var(--ih-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ih-social { display: flex; flex-wrap: wrap; gap: 8px; }

.ih-social a {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-sm);
  background: var(--ih-control);
  box-shadow: var(--ih-control-inset);
  color: var(--ih-muted);
  transition: color .2s ease, border-color .2s ease, transform .24s var(--ih-spring);
}

.ih .ih-social a:hover,
.ih .ih-social a:focus-visible { color: var(--ih-accent); border-color: var(--ih-border-lit); transform: translateY(-2px); }
.ih-social svg { width: 17px; height: 17px; }

.ih-skills { display: flex; flex-wrap: wrap; gap: 8px; }

.ih-skills li {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-sm);
  background: var(--ih-control);
  box-shadow: var(--ih-control-inset);
}

.ih-skills img { width: 21px; height: 21px; object-fit: contain; }

/* Portrait — the one place claymorphism is used at full strength.
   --py is written by the scroll parallax in iwa-home-sections.js; the float
   keyframe animates --pf, and the two are composed in one transform so they
   never overwrite each other. */
.ih-portrait {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  padding: 14px;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-xl);
  background: linear-gradient(165deg, var(--ih-surface), var(--ih-surface-2));
  box-shadow: var(--ih-clay);
  transform: translate3d(0, calc(var(--py, 0px) + var(--pf, 0px)), 0);
  will-change: transform;
}

.ih-portrait__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ih-well);
  animation: ih-float 7s ease-in-out infinite;
}

.ih-portrait__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 448 / 600;
  object-fit: cover;
  /* Slow drift inside the frame: the crop moves, the frame does not, so the
     photo feels alive without the panel shifting. */
  animation: ih-drift 18s ease-in-out infinite alternate;
}

/* The photo is cropped by aspect-ratio, which left a hard horizontal cut along
   the bottom. This fades that edge into the panel colour so no crop line shows.
   A gradient overlay is used rather than mask-image because it needs no
   fallback and matches the panel exactly. */
.ih-portrait__frame::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--ih-surface-2) 55%, transparent) 55%,
    var(--ih-surface-2) 100%
  );
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .ih-portrait__frame::after {
    background: linear-gradient(to bottom, transparent 0%, var(--ih-surface-2) 100%);
  }
}

/* Conic ring behind the frame, rotating slowly. */
.ih-portrait::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, var(--ih-accent), var(--ih-accent-3), transparent 55%, var(--ih-accent));
  opacity: .34;
  filter: blur(9px);
  animation: ih-spin 14s linear infinite;
}

/* Sits over the faded bottom edge, so the fade reads as intentional. */
.ih-portrait__tag {
  position: absolute;
  left: 26px;
  right: 26px;
  bottom: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ih-head);
}

.ih-portrait__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #13b981;
  box-shadow: 0 0 0 4px rgba(19, 185, 129, .22);
}

/* ==================================================================
   2. YOUTUBE CLASSES
================================================================== */
.ih-yt {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

.ih-yt__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 1100px) {
  .ih-yt__layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
}

.ih-yt__stage { padding: 14px; }

/* Facade: a button showing the poster frame. The YouTube iframe (and its
   ~1MB of script) is only created after a real click, so the section
   costs one image instead of an embedded player. */
.ih-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ih-r-md);
  aspect-ratio: 16 / 9;
  background-color: #0d1014;
  background-position: center;
  background-size: cover;
  cursor: pointer;
  overflow: hidden;
}

.ih-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .5));
  transition: opacity .3s ease;
}

.ih-facade:hover::after { opacity: .7; }

.ih-facade__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--ih-accent-2), var(--ih-accent));
  color: #fff;
  box-shadow: 0 14px 30px -10px var(--ih-glow), inset 0 -5px 10px rgba(0, 0, 0, .22), inset 0 6px 12px rgba(255, 255, 255, .26);
  transform: translate(-50%, -50%);
  transition: transform .3s var(--ih-spring);
}

.ih-facade:hover .ih-facade__play { transform: translate(-50%, -50%) scale(1.09); }
.ih-facade__play svg { width: 22px; height: 24px; margin-left: 3px; }

/* Pulse ring, drawn once and reused. */
.ih-facade__play::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid var(--ih-accent);
  border-radius: 50%;
  opacity: .45;
  animation: ih-pulse 2.6s ease-out infinite;
}

.ih-yt__player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--ih-r-md);
  display: block;
  background: #000;
}

.ih-yt__info { padding: 18px 6px 6px; }

.ih-yt__now {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: var(--ih-accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ih-yt__now i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ih-accent);
  animation: ih-blink 1.6s ease-in-out infinite;
}

.ih-yt__title {
  font-size: clamp(17px, 2.4vw, 22px);
  font-weight: 700;
  line-height: 1.4;
}

.ih-yt__desc {
  margin-top: 8px;
  color: var(--ih-muted);
  font-size: 14px;
  line-height: 1.72;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ih-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.ih-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid var(--ih-border);
  border-radius: 999px;
  background: var(--ih-well);
  color: var(--ih-muted);
  font-size: 11px;
  font-weight: 700;
}

.ih-pill svg { width: 12px; height: 12px; }
.ih-pill--free { background: rgba(19, 185, 129, .12); border-color: rgba(19, 185, 129, .28); color: #13b981; }
.ih-pill--paid { background: rgba(255, 176, 32, .12); border-color: rgba(255, 176, 32, .28); color: #ffb020; }
.ih-pill--cat { background: var(--ih-accent-soft); border-color: transparent; color: var(--ih-accent); }

html[data-theme="light"] .ih-pill--paid { color: #9c6206; }
html[data-theme="light"] .ih-pill--free { color: #0d8f63; }

/* Filter chips */
.ih-chips {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}

.ih-chip {
  padding: 8px 16px;
  border: 1px solid var(--ih-border);
  border-radius: 999px;
  background: var(--ih-well);
  color: var(--ih-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.ih .ih-chip:hover { color: var(--ih-head); border-color: var(--ih-border-lit); }

.ih .ih-chip[aria-selected="true"] {
  color: var(--ih-accent);
  border-color: transparent;
  background: var(--ih-accent-soft);
  box-shadow: var(--ih-control-inset);
}

/* ------------------------------------------------------------------
   Slider rail — CSS scroll-snap, so there is no carousel library and
   it still works with JS disabled (native scroll + swipe).
------------------------------------------------------------------ */
.ih-rail { position: relative; }

.ih-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ih-rail__label {
  color: var(--ih-muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.ih-rail__nav { display: flex; gap: 7px; }

.ih-rail__btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-sm);
  background: var(--ih-well);
  color: var(--ih-head);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, opacity .2s ease;
}

.ih .ih-rail__btn:hover:not(:disabled) { color: var(--ih-accent); border-color: var(--ih-border-lit); }
.ih-rail__btn:disabled { opacity: .35; cursor: default; }
.ih-rail__btn svg { width: 16px; height: 16px; }

.ih-rail__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Room for the lifted card shadow so it is not clipped by the scroller. */
  padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch;
}

.ih-rail__track::-webkit-scrollbar { display: none; }

/* On the wide layout the rail becomes a vertical list beside the player. */
@media (min-width: 1100px) {
  .ih-rail__track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 460px;
    scroll-snap-type: y proximity;
    padding: 4px 6px 4px 2px;
  }
}

.ih-slide {
  flex: 0 0 auto;
  width: 260px;
  scroll-snap-align: start;
  padding: 0;
  border: 1px solid var(--ih-border);
  border-radius: var(--ih-r-md);
  background: linear-gradient(170deg, var(--ih-surface), var(--ih-surface-2));
  box-shadow: var(--ih-lift);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .3s var(--ih-ease), box-shadow .3s ease, border-color .2s ease;
}

@media (min-width: 1100px) {
  .ih-slide { width: auto; display: flex; gap: 11px; align-items: stretch; }
}

.ih-slide:hover {
  transform: translateY(-4px);
  border-color: var(--ih-border-lit);
  box-shadow: var(--ih-lift-hover);
}

@media (min-width: 1100px) {
  .ih-slide:hover { transform: translateX(4px); }
}

.ih-slide[aria-current="true"] {
  border-color: var(--ih-accent);
  box-shadow: var(--ih-lift), 0 0 0 1px var(--ih-accent) inset;
}

.ih-slide__thumb {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  background: var(--ih-well);
  overflow: hidden;
}

@media (min-width: 1100px) {
  .ih-slide__thumb { width: 116px; height: 65px; aspect-ratio: 16 / 9; align-self: flex-start; }
}

.ih-slide__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0d1014;
}

.ih-slide__thumb i {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, .74);
  color: #fff;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.ih-slide__body { padding: 12px 13px; min-width: 0; }

.ih-slide__num {
  display: block;
  margin-bottom: 4px;
  color: var(--ih-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ih-slide__title {
  color: var(--ih-head);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ih-slide__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.ih-slide.is-hidden { display: none; }

/* Scroll progress indicator for the horizontal rail */
.ih-rail__bar {
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: var(--ih-well);
  overflow: hidden;
}

.ih-rail__bar span {
  display: block;
  height: 100%;
  width: 20%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ih-accent-2), var(--ih-accent));
  transition: transform .15s linear;
}

@media (min-width: 1100px) {
  .ih-rail__bar { display: none; }
}

.ih-yt__cta { margin-top: 34px; text-align: center; }

/* ------------------------------------------------------------------
   3. CONTACT — the one section built on clay + neo throughout.
   Both panels are claymorphic (puffed, thick shadow, inner highlights)
   and every control inside is neomorphic (pressed into the same base
   colour as its panel).
------------------------------------------------------------------ */
.ih-contact {
  position: relative;
  padding: 88px 0;
  overflow: hidden;
}

.ih-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 992px) {
  .ih-contact__grid { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
}

/* Clay panels. Background is --ih-neo, not the surface gradient, so the
   neomorphic children can match it exactly. */
.ih-contact .ih-info,
.ih-contact .ih-form {
  background: var(--ih-neo);
  border: 0;
  border-radius: var(--ih-r-xl);
  box-shadow: var(--ih-clay-panel);
}

/* Info card */
.ih-info { overflow: hidden; }

.ih-info__thumb {
  margin: 14px 14px 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--ih-neo-in);
}

.ih-info__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ih-info__body { padding: 22px; }
.ih-info__name { font-size: 20px; font-weight: 800; line-height: 1.25; }

.ih-info__role {
  display: block;
  margin-top: 5px;
  color: var(--ih-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.ih-info__text { margin-top: 13px; color: var(--ih-muted); font-size: 14px; line-height: 1.75; }

.ih-info__rows { display: grid; gap: 11px; margin-top: 18px; }

/* Extruded neomorphic rows — raised, so they read as tappable. */
.ih-inforow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--ih-r-md);
  background: var(--ih-neo);
  box-shadow: var(--ih-neo-out);
  transition: box-shadow .22s ease, transform .24s var(--ih-ease);
}

.ih-inforow:hover { transform: translateY(-2px); }
.ih-inforow:active { transform: none; box-shadow: var(--ih-neo-in); }

.ih-inforow__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--ih-accent-soft);
  color: var(--ih-accent);
  box-shadow: inset 0 -3px 7px rgba(0, 0, 0, .16), inset 0 4px 8px rgba(255, 255, 255, .12);
}

html[data-theme="light"] .ih-inforow__icon {
  box-shadow: inset 0 -3px 7px rgba(31, 49, 78, .07), inset 0 4px 8px rgba(255, 255, 255, .9);
}

.ih-inforow__icon svg { width: 16px; height: 16px; }
.ih-inforow__body { min-width: 0; }

.ih-inforow__label {
  display: block;
  color: var(--ih-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.ih-inforow__value {
  display: block;
  margin-top: 2px;
  color: var(--ih-head);
  font-size: 13.5px;
  font-weight: 700;
  word-break: break-all;
}

.ih-info__social { margin-top: 18px; }

/* Social buttons inside a clay panel: extruded, press in on click. */
.ih-contact .ih-social a {
  border: 0;
  border-radius: 13px;
  background: var(--ih-neo);
  box-shadow: var(--ih-neo-out);
}

.ih-contact .ih-social a:active { box-shadow: var(--ih-neo-in); transform: none; }

/* ------------------------------- Form ------------------------------- */
.ih-form { padding: 28px; }

/* Explicit two columns rather than auto-fit: with auto-fit the column count
   changed with the panel width, so at some widths three narrow inputs appeared
   on one row and the fields looked cramped and uneven. */
.ih-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 17px;
}

@media (min-width: 600px) {
  .ih-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ih-field { min-width: 0; }
.ih-field--wide { grid-column: 1 / -1; }

.ih-label {
  display: block;
  margin-bottom: 8px;
  padding-left: 3px;
  color: var(--ih-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

/* `required` already carries the meaning for assistive tech, so the marker is
   decorative and hidden from the accessibility tree in the markup. */
.ih-req { color: var(--ih-accent); font-weight: 800; }

/* Leading icon gives each field a fixed visual anchor. There are no
   placeholders, so the icon plus label carries the whole affordance. */
.ih-inputwrap { position: relative; }

.ih-inputwrap > svg {
  position: absolute;
  top: 50%;
  left: 16px;
  z-index: 1;
  width: 16px;
  height: 16px;
  color: var(--ih-muted);
  transform: translateY(-50%);
  pointer-events: none;
  transition: color .2s ease;
}

.ih-inputwrap--top > svg { top: 17px; transform: none; }
.ih-inputwrap:focus-within > svg { color: var(--ih-accent); }

/* Neomorphic control, scoped with `.ih-form` on purpose.
   style.min.css ships `input[type=email] { background:0 0; box-shadow:none;
   padding:0 15px; border:1px solid }` at specificity (0,1,1), which outranks a
   bare `.ih-input` (0,1,0) — so the email field lost its background, its inset
   and its icon padding, and read as no field at all. `.ih-form .ih-input` is
   (0,2,0) and wins. `height: auto` fights the theme's `input { height: 40px }`. */
.ih-form .ih-input,
.ih-form .ih-textarea {
  width: 100%;
  height: auto;
  min-height: 52px;
  padding: 15px 16px 15px 44px;
  border: 0;
  border-radius: var(--ih-r-md);
  background: var(--ih-neo-well);
  box-shadow: var(--ih-neo-in);
  color: var(--ih-head);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  outline: none;
  transition: box-shadow .24s ease, background-color .24s ease;
  -webkit-appearance: none;
  appearance: none;
}

.ih-form .ih-textarea {
  min-height: 138px;
  padding-top: 15px;
  resize: vertical;
  line-height: 1.7;
}

/* Autofill repaints the background white in Chrome, which would erase the well.
   A long inset shadow of the field colour is the only reliable way to keep it. */
.ih-form .ih-input:-webkit-autofill,
.ih-form .ih-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ih-head);
  box-shadow: var(--ih-neo-in), inset 0 0 0 100px var(--ih-neo-well);
  transition: background-color 8000s ease-in-out 0s;
}

/* Focus deepens the press, turns the rim accent-coloured and adds a ring, so
   the active field is unmistakable without a border appearing from nowhere. */
.ih-form .ih-input:focus,
.ih-form .ih-textarea:focus {
  box-shadow:
    inset 0 0 0 1px var(--ih-accent),
    inset 4px 5px 9px var(--ih-neo-dark),
    inset -3px -3px 8px var(--ih-neo-light),
    0 0 0 3px var(--ih-accent-soft);
}

/* Native validation styling, but only once the field has been touched. */
.ih-form .ih-input:user-invalid,
.ih-form .ih-textarea:user-invalid {
  box-shadow:
    inset 0 0 0 1px #e24855,
    inset 4px 5px 9px var(--ih-neo-dark),
    inset -3px -3px 8px var(--ih-neo-light);
}

/* Verification + action. Grouping the anti-spam answer with the submit button
   keeps it read as a checkpoint before sending; on its own in the field grid it
   looked like a stray numeric input. The tray is raised, the input inside it
   pressed — the two neo states together make the nesting obvious. */
.ih-form__verify {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-top: 20px;
  padding: 17px 18px;
  border-radius: var(--ih-r-lg);
  background: var(--ih-neo);
  box-shadow: var(--ih-neo-out);
}

.ih-form__verify .ih-field { flex: 1 1 220px; }
.ih-form__verify .ih-btn { flex: 0 0 auto; }

.ih-verify__q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  margin-left: 5px;
  border-radius: 8px;
  background: var(--ih-accent-soft);
  color: var(--ih-accent);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .14), inset 0 3px 6px rgba(255, 255, 255, .1);
  font-variant-numeric: tabular-nums;
}

html[data-theme="light"] .ih-verify__q {
  box-shadow: inset 0 -2px 5px rgba(31, 49, 78, .06), inset 0 3px 6px rgba(255, 255, 255, .9);
}

/* Clay CTA: puffed accent block that presses in on click. */
.ih .ih-form__verify .ih-btn--primary {
  border: 0;
  border-radius: var(--ih-r-md);
  box-shadow:
    0 16px 28px -12px var(--ih-glow),
    inset 0 -6px 12px rgba(0, 0, 0, .26),
    inset 0 8px 14px rgba(255, 255, 255, .3);
}

.ih .ih-form__verify .ih-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 22px 34px -12px var(--ih-glow),
    inset 0 -6px 12px rgba(0, 0, 0, .26),
    inset 0 9px 16px rgba(255, 255, 255, .34);
}

.ih .ih-form__verify .ih-btn--primary:active {
  transform: none;
  box-shadow:
    0 6px 14px -8px var(--ih-glow),
    inset 0 6px 12px rgba(0, 0, 0, .3),
    inset 0 -5px 10px rgba(255, 255, 255, .18);
}

.ih-form__note {
  display: flex;
  gap: 9px;
  margin-top: 15px;
  padding-left: 3px;
  color: var(--ih-muted);
  font-size: 11.5px;
  line-height: 1.65;
}

.ih-form__note svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }

.ih-msg { margin-top: 15px; min-height: 0; font-size: 13.5px; line-height: 1.6; }

.ih-msg__ok,
.ih-msg__err {
  display: flex;
  gap: 9px;
  padding: 13px 15px;
  border: 0;
  border-radius: var(--ih-r-md);
  background: var(--ih-neo-well);
  box-shadow: var(--ih-neo-in);
}

.ih-msg__ok { color: var(--ih-text); border-left: 3px solid #13b981; }
.ih-msg__err { color: var(--ih-text); border-left: 3px solid #e24855; }

/* ------------------------------------------------------------------
   Reveal on scroll
   Elements start visible; JS adds .ih-anim to the section only when
   IntersectionObserver exists, so a failed script leaves content shown.
------------------------------------------------------------------ */
.ih-anim .ih-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ih-ease), transform .7s var(--ih-ease);
  transition-delay: var(--d, 0ms);
}

.ih-anim .ih-reveal.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------------
   Motion
------------------------------------------------------------------ */
@keyframes ih-spin { to { transform: rotate(360deg); } }

/* Frame float and photo drift are separate so the panel shadow stays put while
   the crop moves. Both animate transform only, so neither triggers layout. */
@keyframes ih-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 0); }
}

@keyframes ih-drift {
  from { transform: scale(1.06) translate3d(0, 1.2%, 0); }
  to   { transform: scale(1.11) translate3d(0, -1.2%, 0); }
}

@keyframes ih-pulse {
  0%   { transform: scale(.9); opacity: .5; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes ih-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
  .ih *,
  .ih *::before,
  .ih *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  .ih-anim .ih-reveal { opacity: 1; transform: none; }
  .ih-portrait { transform: none; }
  .ih-rail__track { scroll-behavior: auto; }
  .ih-slide:hover,
  .ih .ih-btn--primary:hover,
  .ih .ih-social a:hover { transform: none; }
}

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .ih-hero { padding: 116px 0 66px; }
  .ih-portrait { max-width: 340px; }
  .ih-portrait__tag { left: 20px; right: 20px; bottom: 20px; }
  /* Portrait first on narrow screens. Reordered visually rather than in the
     markup so the <h1> stays the first thing in the DOM for crawlers and
     screen readers. */
  .ih-hero__art { order: -1; }
  .ih-hero__copy { order: 0; }
}

@media (max-width: 767.98px) {
  .ih { --ih-r-xl: 20px; --ih-r-lg: 17px; --ih-r-md: 12px; }
  .ih-shell { padding: 0 14px; }
  .ih-hero { padding: 104px 0 54px; }
  .ih-hero__grid { gap: 26px; }
  .ih-yt,
  .ih-contact { padding: 60px 0; }
  .ih-head { margin-bottom: 26px; }
  .ih-yt__stage { padding: 10px; }
  .ih-yt__info { padding: 15px 4px 4px; }
  .ih-form { padding: 20px; }
  .ih-info__body { padding: 18px; }
  .ih-info__thumb { margin: 11px 11px 0; border-radius: 14px; }
  .ih-slide { width: 232px; }
  .ih-facade__play { width: 54px; height: 54px; }
  .ih-facade__play svg { width: 18px; height: 20px; }
  .ih-form__grid { gap: 15px; }
  .ih-form__verify { flex-direction: column; align-items: stretch; padding: 15px; }
  /* flex-basis follows the main axis, so the desktop `flex: 1 1 220px` became a
     220px *height* once this block turned into a column — leaving ~140px of dead
     space under the security question. Reset it to content height here. */
  .ih-form__verify .ih-field { flex: 0 0 auto; }
  .ih-form__verify .ih-btn { width: 100%; }
  .ih-form .ih-input,
  .ih-form .ih-textarea { min-height: 50px; padding: 14px 14px 14px 42px; }
}

@media (max-width: 400px) {
  /* 16px stops iOS zooming the page when a field takes focus. */
  .ih-form .ih-input,
  .ih-form .ih-textarea { font-size: 16px; }
}

/* ------------------------------------------------------------------
   Print
------------------------------------------------------------------ */
@media print {
  .ih-ambient,
  .ih-chips,
  .ih-rail__nav,
  .ih-rail__bar,
  .ih-form,
  .ih-yt__cta { display: none !important; }
  .ih-info,
  .ih-glass,
  .ih-portrait,
  .ih-inforow {
    background: none !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}