/* Digital Vibe - shared design system
   Two themes scoped via body class: .theme-engineering and .theme-scuba.
   Brand fonts: CocoBiker (display, from current site) + Roboto (body). */

@font-face {
  font-family: "CocoBiker";
  src: url("../fonts/CocoBikeR.woff2") format("woff2"),
       url("../fonts/CocoBikeR.woff") format("woff"),
       url("../fonts/CocoBikeR.ttf") format("truetype");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  /* CocoBiker is a decorative brand font: used only on big headings (see rule below).
     Everything else (buttons, small headings, UI) uses Roboto for legibility. */
  --font-display: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-brand: "CocoBiker", "Roboto", sans-serif;

  --ink: #0f1620;
  --ink-soft: #3b4858;
  --ink-faint: #6b7888;
  --paper: #ffffff;
  --paper-alt: #f5f7fa;
  --line: #e3e8ef;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(15, 22, 32, 0.06), 0 2px 8px rgba(15, 22, 32, 0.05);
  --shadow-md: 0 8px 30px rgba(15, 22, 32, 0.10);
  --shadow-lg: 0 24px 60px rgba(15, 22, 32, 0.16);

  --maxw: 1120px;
  --space: clamp(1rem, 2.5vw, 1.5rem);

  /* default accent (overridden per theme) */
  --accent: #2f6df0;
  --accent-deep: #1c47a8;
  --accent-soft: #eaf1ff;
  --hero-grad: linear-gradient(135deg, #1c2b4a 0%, #0f1830 100%);
}

/* Engineering: Digital Vibe brand - coral / magenta / purple */
.theme-engineering {
  --accent: #d81e74;
  --accent-deep: #69346b;
  --accent-soft: #fce6f1;
  --hero-grad: radial-gradient(1100px 600px at 82% -10%, rgba(242, 95, 55, 0.45), transparent 55%),
               radial-gradient(900px 700px at 10% 110%, rgba(216, 30, 116, 0.45), transparent 55%),
               linear-gradient(135deg, #4a1f54 0%, #2a1230 100%);
}

/* Scuba: deep ocean + aqua */
.theme-scuba {
  --accent: #0fb6c4;
  --accent-deep: #086a78;
  --accent-soft: #e2fafc;
  --hero-grad: radial-gradient(1100px 700px at 15% -10%, rgba(15, 182, 196, 0.4), transparent 55%),
               linear-gradient(160deg, #04323d 0%, #021c24 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1, h2 { font-family: var(--font-brand); letter-spacing: 0.01em; font-weight: 400; }
h1 { font-size: clamp(2.2rem, 5.5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }

p { margin: 0 0 1rem; color: var(--ink-soft); }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}

.section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.section--alt { background: var(--paper-alt); }

.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 0.9rem;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 60ch; }

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.8rem 1.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--accent-deep); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }
.btn--light { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); backdrop-filter: blur(6px); }
.btn--light:hover { background: rgba(255,255,255,0.22); }

/* ---- top nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--hero-grad);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.brand__tag { font-size: 0.72rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.04em; }
.nav__links { display: flex; align-items: center; gap: 1.4rem; }
.nav__links a { color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__toggle { display: none; }

@media (max-width: 720px) {
  .nav__links { gap: 0.9rem; }
  .nav__links a:not(.btn) { display: none; }
}

/* ---- hero ---- */
.hero {
  position: relative;
  color: #fff;
  background: var(--hero-grad);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 10vw, 7rem); max-width: 760px; }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,0.82); font-size: clamp(1.05rem, 1.7vw, 1.25rem); max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }
.hero__crumb { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin-bottom: 1.2rem; }
.hero__crumb a { color: rgba(255,255,255,0.9); }

/* ---- grid + cards ---- */
.grid { display: grid; gap: 1.25rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .grid--3 { grid-template-columns: 1fr; } .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-deep);
  margin-bottom: 1rem;
}
.card h3 { margin-bottom: 0.4rem; }
.card p { margin-bottom: 0; font-size: 0.97rem; }

/* case study cards */
.case {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  transition: transform 0.18s ease, box-shadow 0.22s ease;
}
.case:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.case__art { height: 150px; background: var(--hero-grad); position: relative; }
.case__art::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 18px 18px;
}
.case__body { padding: 1.4rem; }
.case__tag { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-deep); }
.case__body h3 { margin: 0.45rem 0 0.4rem; font-size: 1.15rem; }
.case__body p { margin: 0; font-size: 0.95rem; }

/* ---- split feature row ---- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }
.split__panel {
  border-radius: var(--radius);
  background: var(--hero-grad);
  min-height: 280px;
  box-shadow: var(--shadow-md);
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  color: #fff;
}

/* ---- list ---- */
.ticks { list-style: none; padding: 0; margin: 1rem 0 0; }
.ticks li { position: relative; padding-left: 1.8rem; margin-bottom: 0.7rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.45em;
  width: 0.8rem; height: 0.8rem; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}

/* ---- contact / cta ---- */
.cta {
  background: var(--hero-grad);
  color: #fff;
  border-radius: clamp(18px, 3vw, 28px);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  position: relative; overflow: hidden;
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,0.82); max-width: 52ch; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; margin-top: 1.6rem; }
.contact-row { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin-top: 1.4rem; font-size: 0.95rem; }
.contact-row a { color: #fff; font-weight: 600; }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); padding-block: 2.2rem; background: var(--paper-alt); }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.footer small { color: var(--ink-faint); }
.footer__links { display: flex; gap: 1.2rem; }
.footer__links a { color: var(--ink-soft); font-size: 0.9rem; }

/* ---- reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =====================================================
   SPLIT HOMEPAGE (chooser)
   ===================================================== */
.chooser { min-height: 100vh; display: flex; flex-direction: column; }
.chooser__head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  padding-block: 1.4rem;
  color: #fff;
}
.chooser__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: #fff; letter-spacing: -0.01em;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
.chooser__brand:hover { text-decoration: none; }

.split-screen { flex: 1; display: flex; min-height: 100vh; }
@media (max-width: 820px) { .split-screen { flex-direction: column; } }

.panel {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
  text-decoration: none;
  transition: flex 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  min-height: 50vh;
}
.panel:hover { text-decoration: none; }
.split-screen:hover .panel { flex: 0.85; }
.split-screen:hover .panel:hover { flex: 1.3; }
@media (max-width: 820px) {
  .split-screen:hover .panel,
  .split-screen:hover .panel:hover { flex: 1; }
  .chooser { min-height: 100vh; }
  .split-screen { min-height: 0; }
  .panel { min-height: 60vh; padding-block: 3.5rem 2.5rem; }
  .panel--eng { padding-top: 5rem; }
}

.panel--eng {
  background: radial-gradient(800px 500px at 75% 8%, rgba(242,95,55,0.45), transparent 58%),
              radial-gradient(700px 600px at 15% 105%, rgba(216,30,116,0.5), transparent 55%),
              linear-gradient(150deg, #4a1f54 0%, #2a1230 100%);
}
.panel--scuba {
  background: radial-gradient(900px 600px at 30% 10%, rgba(15,182,196,0.45), transparent 60%),
              linear-gradient(150deg, #04323d 0%, #02161d 100%);
}
.panel::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px; opacity: 0.6; pointer-events: none;
}
.panel__content { position: relative; z-index: 1; padding: 2rem; max-width: 420px; transform: translateY(0); transition: transform 0.4s ease; }
.panel:hover .panel__content { transform: translateY(-6px); }
.panel__icon { margin: 0 auto 1.2rem; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,0.12); display: grid; place-items: center; border: 1px solid rgba(255,255,255,0.22); }
.panel__kicker { font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 0.6rem; }
.panel h2 { color: #fff; font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: 0.6rem; }
.panel p { color: rgba(255,255,255,0.82); font-size: 1rem; max-width: 34ch; margin: 0 auto 1.4rem; }
.panel__enter {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600;
  padding: 0.7rem 1.4rem; border-radius: 999px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3);
  transition: background 0.2s ease, gap 0.2s ease;
}
.panel:hover .panel__enter { background: rgba(255,255,255,0.26); gap: 0.8rem; }
.chooser__foot { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; padding-block: 1.1rem; color: rgba(255,255,255,0.6); font-size: 0.82rem; z-index: 5; }

@media (max-width: 820px) {
  .chooser__foot { position: static; background: #02161d; padding-block: 1.4rem; }
}

/* =====================================================
   BRAND LOGO + PHOTO HERO
   ===================================================== */
.brand__logo { height: 38px; width: auto; display: block; }
@media (max-width: 720px) { .brand__logo { height: 32px; } }

/* Logo on the dark split homepage header: render as a clean white knockout
   so it reads on the dark panels without a sticker-like background chip. */
.chooser__brand .brand__logo {
  height: 46px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.35));
}

/* ---------- Engineering hero: duotone circuit, alive ---------- */
.hero--photo { background: #160c1b; }
.hero--photo::after { display: none; } /* drop the generic dot grid */
.hero--photo .hero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(20,10,24,0.34) 0%, rgba(20,10,24,0.82) 100%),
    linear-gradient(125deg, rgba(216,30,116,0.62), rgba(105,52,107,0.28)),
    url("../img/shutterstock_1921044308-scaled.jpg");
  background-size: cover, cover, cover;
  background-position: center, center, 50% 50%;
  background-blend-mode: normal, color, normal;
  animation: techpan 32s ease-in-out infinite alternate;
}
/* periodic light sweep, like a data pulse across the board */
.hero--photo .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,190,235,0.12) 50%, transparent 62%);
  transform: translateX(-45%);
  animation: sheen 9s ease-in-out infinite;
}
@keyframes techpan {
  from { background-position: center, center, 47% 47%; }
  to   { background-position: center, center, 53% 53%; }
}
@keyframes sheen {
  0%, 100% { transform: translateX(-45%); opacity: 0; }
  50%      { transform: translateX(45%);  opacity: 0.8; }
}

/* ---------- Scuba hero: animated underwater scene ---------- */
.hero--ocean { background: #021c24; }
.hero--ocean::after { display: none; }
.hero--ocean .hero__bg {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% -20%, rgba(120,240,250,0.30), transparent 60%),
    linear-gradient(180deg, #0a6b76 0%, #064c58 38%, #04323d 66%, #021c24 100%);
}
/* sun rays filtering down from the surface */
.hero--ocean .hero__rays {
  position: absolute; inset: -25% -15% 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 34px,
    rgba(190,255,255,0.07) 34px 42px,
    transparent 42px 96px);
  filter: blur(7px);
  transform-origin: top center;
  mix-blend-mode: screen;
  animation: rays 13s ease-in-out infinite alternate;
}
@keyframes rays {
  from { opacity: 0.45; transform: rotate(5deg) translateX(-3%); }
  to   { opacity: 0.95; transform: rotate(11deg) translateX(3%); }
}
/* rising bubbles */
.hero--ocean .hero__bubbles {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.7;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.55) 2px, transparent 3px),
    radial-gradient(circle, rgba(255,255,255,0.35) 3px, transparent 4px),
    radial-gradient(circle, rgba(255,255,255,0.25) 1.5px, transparent 2.5px);
  background-size: 150px 150px, 230px 230px, 90px 90px;
  background-position: 10px 0, 80px 60px, 130px 30px;
  animation: bubbles 18s linear infinite;
}
@keyframes bubbles {
  from { background-position: 10px 110%, 80px 130%, 130px 120%; }
  to   { background-position: 10px -120%, 80px -130%, 130px -140%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--photo .hero__bg, .hero--photo .hero__bg::after,
  .hero--ocean .hero__rays, .hero--ocean .hero__bubbles { animation: none; }
}

/* Case studies: real photo art instead of gradient block. */
.case__art--photo { background-size: cover; background-position: center; }
.case__art--photo::after { background-image: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.25)); background-size: cover; }
.case a, a.case { text-decoration: none; color: inherit; }
a.card { display: block; text-decoration: none; color: inherit; }
a.card .case__more { margin-top: 0.9rem; }
.case__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.9rem; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--accent-deep); }
.case:hover .case__more { gap: 0.7rem; }

/* Case study detail page */
.work-hero { position: relative; min-height: 360px; display: flex; align-items: flex-end; color: #fff; background-size: cover; background-position: center; }
.work-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,10,24,0.35) 0%, rgba(20,10,24,0.85) 100%); }
.work-hero__inner { position: relative; z-index: 1; padding-block: 2.4rem; }
.work-hero h1 { color: #fff; max-width: 18ch; }
.work-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.tag { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.28); padding: 0.3rem 0.7rem; border-radius: 999px; }
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2.2rem; }
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
@media (max-width: 720px) { .metrics { grid-template-columns: 1fr; } }
.metric { background: var(--accent-soft); border-radius: var(--radius-sm); padding: 1.2rem; }
.metric strong { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--accent-deep); line-height: 1.1; }
.metric span { font-size: 0.9rem; color: var(--ink-soft); }
.back-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; margin-bottom: 1rem; color: var(--accent-deep); }

/* Video feature (About page, scuba dive log) */
.video-feature { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); background: #000; line-height: 0; }
.video-feature video { width: 100%; height: auto; display: block; }
.video-caption { line-height: 1.6; margin-top: 0.9rem; font-size: 0.9rem; color: var(--ink-faint); text-align: center; }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (max-width: 880px) { .about-split { grid-template-columns: 1fr; } }

/* Instagram embed slot */
.ig-embed { max-width: 540px; margin-inline: auto; }
.ig-embed .instagram-media { margin: 0 auto !important; }
.ig-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.5rem; margin-top: 2rem;
  align-items: start; justify-items: center;
}
.ig-grid .instagram-media { margin: 0 auto !important; }

/* Homepage social-proof strip (below the split chooser) */
.home-social {
  background:
    radial-gradient(900px 500px at 82% -10%, rgba(216,30,116,0.20), transparent 60%),
    radial-gradient(900px 600px at 8% 115%, rgba(15,182,196,0.24), transparent 55%),
    linear-gradient(180deg, #06222a 0%, #04141a 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.home-social__head { text-align: center; max-width: 60ch; margin-inline: auto; }
.home-social .eyebrow { color: #7fe8f0; }
.home-social h2 { color: #fff; }
.home-social .lede { color: rgba(255,255,255,0.82); margin-inline: auto; }
.home-social .ig-grid { margin-top: 2.4rem; }
.home-social__cta { text-align: center; margin-top: 2rem; }

/* Scroll cue at the bottom of the chooser */
.scroll-cue {
  position: absolute; bottom: 4.2rem; left: 50%; transform: translateX(-50%);
  z-index: 6; color: rgba(255,255,255,0.82); display: inline-flex; flex-direction: column;
  align-items: center; gap: 0.35rem; font-family: var(--font-sans); font-size: 0.72rem;
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite;
}
.scroll-cue:hover { color: #fff; text-decoration: none; }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue { animation: none; } }
@media (max-width: 820px) { .scroll-cue { display: none; } }
.ig-placeholder {
  max-width: 540px; margin: 1.5rem auto 0; aspect-ratio: 1 / 1;
  border-radius: var(--radius); display: grid; place-items: center; text-align: center;
  color: #fff; padding: 2rem; background: var(--hero-grad); box-shadow: var(--shadow-md);
}
.ig-placeholder svg { margin-bottom: 0.8rem; }