/* ==========================================================
   Falco Focus Maine Media — main stylesheet
   Edit the colors below to re-theme the whole site.
   ========================================================== */
:root {
  --blue: #58b1e3;          /* brand accent */
  --blue-dark: #3f9bd0;
  --red: #f53434;
  --bg: #292929;            /* main dark background */
  --bg-deep: #1d1e20;       /* darker panels */
  --panel: #414141;         /* grey cards */
  --text: #ffffff;
  --muted: #cfcfcf;
  --light: #e7e7e7;
  --radius: 16px;
  --max: 1224px;
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }   /* jump links land below the sticky menu */
body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 500; }
p { margin: 0; }
.accent { color: var(--blue); }
.red { color: var(--red); }
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.center { text-align: center; }
.section { padding: 72px 0; }
.section--deep { background: var(--bg-deep); }
.section--white { background: #fff; color: #1d1e20; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 12px 32px;
  border-radius: 8px;
  background: var(--blue);
  color: #fff;
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  border: 2px solid var(--blue);
  white-space: nowrap;
  transition: background .2s, transform .2s;
}
.btn:hover { background: var(--blue-dark); border-color: var(--blue-dark); transform: translateY(-1px); }
.btn--outline {
  background: transparent;
  border: 2px solid #fff;
  border-radius: 999px;
  font-size: 13px;
  padding: 10px 36px;
}
.btn--outline:hover { background: #fff; color: var(--bg); border-color: #fff; }
.btn--wide { min-width: 300px; text-align: center; }
.btn--white { background: #fff; color: #1d1e20; border-color: #fff; }
.btn--white:hover, .btn--white:focus-visible { background: #e7e7e7; border-color: #e7e7e7; color: #1d1e20; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  /* No light line under the bar: it showed as a bright pixel row along the top of photos and videos */
  box-shadow: 0 1px 0 var(--bg);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 104px;
}
.header__logo img { height: 82px; width: auto; }
/* never squeeze the logo: it keeps its shape and the right side tightens up instead */
.header__logo { flex-shrink: 0; }
.header__logo img { max-width: none; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 15px; }
.nav > a, .nav__drop > button {
  color: #fff; text-decoration: none; background: none; border: 0;
  font: inherit; cursor: pointer; padding: 8px 0;
  display: inline-flex; align-items: center; gap: 8px;
}
/* Hover color only on devices with a real mouse: on phones a tapped button keeps :hover until you tap
   somewhere else, which left "Services" blue after closing it. */
@media (hover: hover) { .nav > a:hover, .nav__drop > button:hover { color: var(--blue); } }
.nav__drop.is-open > button { color: var(--blue); }
.nav__drop > button::after { transition: transform .2s ease; }
.nav__drop.is-open > button::after { transform: rotate(180deg) translateY(5px); }
.nav > a.is-active { color: var(--blue); border-bottom: 2px solid var(--blue); }
.nav__drop { position: relative; }
.nav__drop > button::after { content: ""; border: 5px solid transparent; border-top-color: currentColor; margin-top: 5px; }
.nav__menu {
  position: absolute; top: 100%; left: -16px; min-width: 210px;
  background: var(--bg); border-radius: 8px; padding: 8px 0;
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .18s;
}
.nav__drop:hover .nav__menu, .nav__drop:focus-within .nav__menu,
.nav__drop.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a { display: block; padding: 9px 20px; text-decoration: none; text-transform: capitalize; }
.nav__menu a:hover { color: var(--blue); background: rgba(255,255,255,.04); }
.header__right { display: flex; align-items: center; gap: 20px; }
.social { display: flex; gap: 14px; align-items: center; }
.social a { display: inline-flex; color: inherit; opacity: .9; }
.social a:hover { color: var(--blue); opacity: 1; }
.social svg { width: 18px; height: 18px; fill: currentColor; }
.menu-toggle { display: none; background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; }
.menu-toggle svg { width: 28px; height: 28px; }

/* ---------- Hero ---------- */
.hero {
  height: 595px;
  background: url("../images/hero.webp?v=baf97597") center / cover no-repeat;
}
/* Video hero: full-bleed drone film that fades into the page below */
.hero--video {
  position: relative; overflow: hidden; background: #141517;
  height: min(86vh, 820px); min-height: 520px;
  display: flex; align-items: flex-end;
}
/* A few pixels taller than the hero and centered, so the video's own soft edge rows (and any rounding gap) never show as a light line at the bottom */
.hero__video { position: absolute; left: 0; top: -3px; width: 100%; height: calc(100% + 6px); object-fit: cover; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,21,23,.55) 0%, rgba(20,21,23,0) 22%),
    linear-gradient(90deg, rgba(20,21,23,.5) 0%, rgba(20,21,23,.18) 45%, rgba(20,21,23,0) 70%),
    linear-gradient(180deg, rgba(41,41,41,0) 45%, rgba(41,41,41,.55) 72%, var(--bg) 100%);
}
.hero__content { position: relative; z-index: 46; padding-bottom: clamp(56px, 9vh, 96px); }   /* above the drones (45), below the menu (50) */
/* The text box covers most of the hero, so let clicks pass through it to the drones flying behind; only its buttons catch clicks */
.hero__content { pointer-events: none; }
.hero__content a, .hero__content button { pointer-events: auto; }
.hero__title {
  font-size: clamp(38px, 5.4vw, 74px); font-weight: 600; line-height: 1.02; letter-spacing: -.02em;
  max-width: 13ch; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.hero__sub { font-size: clamp(18px, 1.6vw, 22px); color: #e7e7e7; margin-top: 16px; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero__cta .btn { display: inline-flex; align-items: center; justify-content: center; }
.hero__sound {
  position: absolute; z-index: 46; right: max(16px, 3vw); bottom: clamp(56px, 9vh, 96px);
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px;
  background: rgba(13,14,16,.55); color: #fff; border: 1px solid rgba(255,255,255,.25);
  font: 500 13px/1 Rubik, sans-serif; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero__sound:hover { background: rgba(13,14,16,.75); }
.hero__sound:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.hero__sound svg { width: 16px; height: 16px; }
.hero__sound .on, .hero__sound[aria-pressed="true"] .off { display: none; }
.hero__sound[aria-pressed="true"] .on { display: inline; }

/* ---------- Intro ---------- */
.intro h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 500; max-width: 1000px; margin: 0 auto; }
.intro__lead {
  max-width: 820px; margin: 40px auto 0; color: var(--muted);
  font-style: italic; font-weight: 300; font-size: 18px;
}
.intro__lead a { color: var(--blue); }
.big-title { font-size: clamp(34px, 4.5vw, 56px); font-weight: 400; margin: 72px 0 24px; }
.big-title .accent { font-weight: 500; }

/* Residential card */
.res-card { border-radius: 32px; overflow: hidden; background: var(--panel); }
.res-card > img { width: 100%; aspect-ratio: 3 / 1.2; object-fit: cover; }
/* Photo drifts slightly slower than the page while scrolling (js/site.js, [data-parallax]) */
.res-card__media { position: relative; overflow: hidden; aspect-ratio: 3 / 1.2; }
.res-card__media img { position: absolute; left: 0; top: -20%; width: 100%; height: 140%; max-width: none; object-fit: cover; will-change: transform; }
.res-card__body {
  display: grid; grid-template-columns: 1fr 2fr; gap: 32px;
  padding: 32px 48px 48px;
}
.res-card__title { font-size: 48px; line-height: 1.1; }
.res-card__title em { font-weight: 300; display: block; }
.res-card ul { padding-left: 18px; margin: 20px 0 28px; color: var(--muted); font-size: 15px; }
.res-card li { margin-bottom: 10px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; counter-reset: step; }
.steps__cta { text-align: center; margin-top: 36px; }
.steps__cta .btn { min-width: 220px; }
/* Each step is its own box: darker panel, blue bar on top, step number, blue icon tile */
.step { position: relative; display: flex; flex-direction: column; align-items: center; padding: 30px 16px 24px; border-radius: 18px;
  background: #4c4d50; border: 1px solid rgba(255,255,255,.1); color: inherit; overflow: hidden; counter-increment: step;
  transition: transform .2s, border-color .2s; }
.step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue), #9fd4f1); }
.step::after { content: "0" counter(step); position: absolute; top: 14px; right: 16px; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--blue); }
a.step:hover, a.step:focus-visible { transform: translateY(-3px); border-color: rgba(88,177,227,.55); }
.step__icon {
  width: 64px; height: 64px; border-radius: 18px; background: var(--blue);
  display: grid; place-items: center; margin: 4px auto 16px; box-shadow: 0 10px 24px rgba(88,177,227,.28);
}
.step__icon svg { width: 32px; height: 32px; stroke: #10161a; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step h3 { font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.step p { font-size: 14px; font-weight: 400; line-height: 1.55; color: #dfe2e5; }
.step a { color: var(--blue); }
.res-card__title em { color: var(--blue); }
.res-card ul { list-style: none; padding-left: 0; }
.res-card li { position: relative; padding-left: 26px; }
.res-card li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.quote {
  max-width: 820px; margin: 48px auto 0; color: var(--muted);
  font-style: italic; font-weight: 300; font-size: 18px;
}

/* ---------- Video production cards ---------- */
.cta-title { font-size: clamp(32px, 4.2vw, 56px); font-weight: 600; text-align: center; margin-bottom: 96px; }
.cta-title span.sub { display: block; font-weight: 500; }
.vcard {
  background: var(--bg-deep); border: 1px solid #000;
  padding: 56px 64px; margin-bottom: 96px;
}
.vcard--gold { border: 2px solid #e2c32b; }
.vcard h2 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; margin-bottom: 28px; }
.vcard h2 strong { color: var(--blue); font-weight: 700; margin-left: 8px; }
.vcard p { color: var(--muted); font-size: 16px; }
.vcard p strong { color: var(--blue); }
.vcard p + p { margin-top: 20px; }
.video {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 6px; overflow: hidden;
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video--tall { aspect-ratio: 9 / 16; }
/* Click-to-play video with a custom thumbnail */
.yt-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: #000; cursor: pointer; display: block; }
.yt-facade img { width: 100%; height: 100%; object-fit: cover; transition: filter .25s; }
.yt-facade:hover img, .yt-facade:focus-visible img { filter: brightness(.85); }
.yt-facade__play {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%);
  background: var(--blue); border-radius: 14px; box-shadow: 0 4px 18px rgba(0,0,0,.35); transition: transform .2s, background-color .2s;
}
.yt-facade__play::after { content: ""; position: absolute; left: 29px; top: 15px; border: 10px solid transparent; border-left: 17px solid #fff; border-right: 0; }
.yt-facade:hover .yt-facade__play { transform: translate(-50%, -50%) scale(1.08); }
.vcard--ai .video { max-width: 760px; margin: 40px auto 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .btn { margin-top: 28px; }
.reels-grid { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; align-items: start; }
.reels-grid h3 { color: var(--blue); font-size: 26px; font-weight: 400; text-align: center; margin-bottom: 18px; }

/* ---------- Top picks ---------- */
/* Fixed "sliding" background: the photo stays put while the page scrolls past it.
   Uses a clipped fixed layer instead of background-attachment:fixed so it also works on iPhone/Android. */
.parallax { position: relative; clip-path: inset(0); isolation: isolate; background: none; }
.parallax::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100%; z-index: -2;
  /* Fixed height, not inset:0. On phones the screen gets taller when the address bar slides away;
     with inset:0 the photo was re-sized and jumped every time that happened while scrolling past it. */
  height: 100vh; height: 100lvh;
  background: var(--parallax-img) center / cover no-repeat;
  pointer-events: none;
}
.toppicks-strip { height: 427px; }
/* The photo is only set once the strip is near the screen (js/site.js adds .is-near): a fixed background
   would otherwise download with the page even though it's far down. */
.toppicks-strip.is-near { --parallax-img: url("/images/toppicks-bg.webp?v=0a2f22fa"); }
.section-title { font-size: clamp(32px, 4vw, 53px); font-weight: 600; }
.carousel-frame { width: 100%; height: 504px; border: 0; margin-top: 56px; display: block; }

/* ---------- Services grid ---------- */
.services { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; }
.services h3 { font-size: 24px; font-weight: 400; font-style: italic; margin-bottom: 20px; }
.services__lead { color: var(--muted); font-size: 20px; font-style: italic; font-weight: 300; margin-bottom: 32px; }
.svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.svc {
  position: relative; border-radius: 12px; overflow: hidden; min-height: 280px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff; isolation: isolate;
}
.svc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .4s; }
.svc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10,10,12,.96) 0%, rgba(10,10,12,.85) 45%, rgba(10,10,12,.25) 85%); }
.svc:hover img { transform: scale(1.05); }
.svc__body { padding: 20px; }
.svc h4 { color: var(--blue); font-size: 22px; font-weight: 400; margin-bottom: 8px; }
.svc p { font-size: 14px; }
.svc .more { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--blue); }

/* ---------- Sale banner ---------- */
.sale { padding: 120px 0; }
.sale.is-near { --parallax-img: url("/images/sale-bg.webp?v=f257da00"); }
.sale::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.35) 55%, rgba(0,0,0,.05));
}
.sale h3 { font-size: 24px; font-weight: 400; max-width: 560px; margin-bottom: 40px; }

/* ---------- Packages ---------- */
.pk-head .eyebrow { color: var(--blue); font-size: 16px; }
.pk-head h2 { font-size: 22px; margin: 4px 0 16px; }
.pk-head p { color: var(--muted); font-size: 20px; max-width: 400px; margin-bottom: 32px; }
.packages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.pkg {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: 2px solid transparent; border-radius: 16px;
  padding: 14px; color: var(--text); text-decoration: none;
  transition: border-color .25s, background .25s;
}
.pkg > * { transition: opacity .25s; }
.pkg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.pkg h3 { font-size: 20px; font-weight: 500; margin: 20px 6px 4px; }
.pkg__label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); margin: 0 6px; }
.pkg ol { font-size: 14px; font-weight: 400; color: var(--muted); padding-left: 26px; margin: 12px 6px 4px; flex: 1; }
.pkg li { margin-bottom: 5px; padding-left: 2px; }
.pkg li::marker { color: var(--muted); font-weight: 400; }
/* Phones / touch: price shows at the bottom of the card */
.pkg__price {
  display: block; margin: 14px 6px 4px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: 20px; font-weight: 400; color: #fff;
}
/* Mouse: price is hidden until hover, then shown large over the dimmed card (like the original site) */
@media (hover: hover) and (pointer: fine) {
  .pkg__price {
    position: absolute; inset: 0; margin: 0; padding: 0; border: 0;
    display: grid; place-items: center; text-align: center;
    font-size: 40px; opacity: 0; pointer-events: none;
  }
  .pkg:hover, .pkg:focus-visible { border-color: #fff; background: var(--bg-deep); outline: none; }
  .pkg:hover > :not(.pkg__price), .pkg:focus-visible > :not(.pkg__price) { opacity: .3; }
  .pkg:hover .pkg__price, .pkg:focus-visible .pkg__price { opacity: 1; }
}
.more-link { text-align: center; margin-top: 40px; }

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; transition: transform .3s, box-shadow .3s; cursor: zoom-in; }
.gallery img:hover { transform: scale(1.02); box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Homepage photo wall: photos separated by thin white lines, button floating in the middle */
.photo-wall-section { background: #333436; }
.photo-wall { position: relative; }
.photo-wall .gallery { gap: 10px; background: #fff; }
.photo-wall .gallery img { border-radius: 0; display: block; transition: filter .25s; }
.photo-wall .gallery img:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.photo-wall__btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #292929; color: #fff; text-decoration: none; white-space: nowrap;
  border: 2px solid #fff; border-radius: 3px; padding: 14px 26px;
  font-size: 17px; font-weight: 500; letter-spacing: .02em;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); transition: background .2s, color .2s;
}
.photo-wall__btn:hover, .photo-wall__btn:focus-visible { background: #fff; color: #292929; outline: none; }
.lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 100;
  display: none; place-items: center; padding: 24px; cursor: zoom-out;
}
.lightbox.is-open { display: grid; }
.lightbox img { max-height: 90vh; width: auto; border-radius: 6px; }

/* ---------- Trusted by ---------- */
.trusted img { margin: 0 auto; }
.trusted .t1 { width: 100%; max-width: 675px; }

/* ---------- Stats ---------- */
.stats { padding-bottom: 40px; }
.stats h2 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 500; }
.stats__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.stat {
  width: 300px; max-width: 100%; padding: 22px 24px;
  border: 2px solid #fff; border-radius: 999px;
  display: grid; gap: 2px; justify-items: center;
}
.stat strong { font-size: 42px; font-weight: 400; line-height: 1.15; }
.stat span { font-size: 22px; color: var(--light); }
.stat__note { display: block; font-style: normal; font-size: 14px; color: #9aa0a6; margin-top: 2px; }

/* ---------- Reviews ---------- */
.reviews { padding-top: 24px; }
.reviews__box {
  max-width: 920px; margin: 0 auto; padding: 32px 36px 36px;
  border: 1.5px solid #000; border-radius: 12px;
}
.reviews h2 { font-size: clamp(30px, 3.4vw, 40px); font-weight: 400; }
.reviews .sub { color: var(--muted); margin-top: 14px; font-size: 14px; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 44px; text-align: left; }
.review {
  margin: 0; background: #ededf0; color: #121212; border-radius: 0; padding: 30px 20px 36px;
  display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.55;
}
.review .stars { color: #1d1e20; font-size: 18px; letter-spacing: 1px; }
.review p { flex: 1; }
.review cite { font-style: normal; font-weight: 400; font-size: 14px; color: #1d1e20; }
.reviews__more { display: inline-block; margin-top: 26px; font-size: 13px; color: #fff; text-decoration: none; }
.reviews__more:hover, .reviews__more:focus-visible { color: var(--blue); text-decoration: underline; }

/* Rating badge under the Reviews heading: frosted, big score, gold stars */
.rating { display: inline-flex; align-items: center; gap: 18px; margin-top: 22px; padding: 14px 26px 14px 22px; border-radius: 22px; text-decoration: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 0 0 1px rgba(245,179,1,.08), 0 18px 40px rgba(0,0,0,.25), 0 0 60px rgba(245,179,1,.12); transition: transform .2s, border-color .2s; }
.rating:hover, .rating:focus-visible { transform: translateY(-2px); border-color: rgba(245,179,1,.55); }
.rating__score { font-size: 48px; font-weight: 700; line-height: 1; color: #fff; }
.rating__right { display: grid; gap: 6px; text-align: left; }
.rating__stars { color: #f5b301; font-size: 28px; letter-spacing: 3px; line-height: 1; text-shadow: 0 0 18px rgba(245,179,1,.45); }
.rating__count { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #d4d8dc; }
.rating__count svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 520px) { .rating { gap: 12px; padding: 12px 18px; } .rating__score { font-size: 38px; } .rating__stars { font-size: 22px; } .rating__count { font-size: 12.5px; } }

/* Review slider: the current review in front, its neighbours pulled back and turned on each side */
.reviews__box:has(.rv) { max-width: none; border: 0; padding: 32px 0 36px; }
.rv { position: relative; margin-top: 44px; overflow: hidden; padding: 10px 0 84px; margin-bottom: -60px; }
/* The stage is as tall as the review in front (set in JS), so short reviews don't leave a gap */
.rv__stage { display: grid; grid-template-rows: 100%; perspective: 1400px; max-width: 460px; margin: 0 auto; transition: height .5s cubic-bezier(.22,.61,.36,1); }
.rv__card {
  grid-area: 1 / 1; align-self: center; margin: 0; text-align: left; background: #ededf0; color: #17181a; border-radius: 20px;
  padding: 30px 30px 26px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 24px 50px rgba(0,0,0,.35);
  transform: translateX(0) scale(.7); opacity: 0; pointer-events: none;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease, filter .5s ease;
}
.rv__card.is-current { transform: none; opacity: 1; z-index: 3; pointer-events: auto; }
.rv__card.is-prev, .rv__card.is-next { opacity: .55; z-index: 2; pointer-events: auto; cursor: pointer; filter: brightness(.82); }
.rv__card.is-prev { transform: translateX(-64%) scale(.8) rotateY(16deg); }
.rv__card.is-next { transform: translateX(64%) scale(.8) rotateY(-16deg); }
.rv__card.is-far-prev { transform: translateX(-120%) scale(.7) rotateY(22deg); }
.rv__card.is-far-next { transform: translateX(120%) scale(.7) rotateY(-22deg); }
.rv__stars { color: #f5b301; font-size: 20px; letter-spacing: 2px; }
.rv__card blockquote { margin: 0; flex: 1; }
.rv__more { display: none; background: none; border: 0; padding: 6px 0 0; color: #1f7fb6; font: 600 13px/1.2 Rubik, sans-serif; cursor: pointer; }
.rv__more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.rv__card blockquote p { font-size: 15px; line-height: 1.62; }
.rv__card figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(0,0,0,.1); padding-top: 14px; }
.rv__card figcaption strong { font-weight: 600; font-size: 15px; }
.rv__card figcaption strong span { display: block; font-weight: 400; font-size: 13px; color: #5d6268; }
.rv__card figcaption em { font-style: normal; font-size: 13px; color: #5d6268; }
.rv__arrow { position: absolute; top: 50%; z-index: 5; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
  display: grid; place-items: center; background: rgba(20,21,23,.7); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s; }
.rv__arrow:hover { background: var(--blue); border-color: var(--blue); color: #10161a; }
.rv__arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.rv__arrow svg { width: 22px; height: 22px; }
.rv__arrow--prev { left: max(8px, calc(50% - 545px)); }
.rv__arrow--next { right: max(8px, calc(50% - 545px)); }
@media (max-width: 1000px) and (min-width: 701px) {
  .rv__stage { max-width: min(400px, 52%); }
  .rv__card.is-prev { transform: translateX(-52%) scale(.78) rotateY(16deg); }
  .rv__card.is-next { transform: translateX(52%) scale(.78) rotateY(-16deg); }
}
@media (max-width: 700px) {
  /* Phones: one review at a time, sliding in from the side; no arrows, just swipe (it also moves on by itself) */
  .rv__stage { max-width: calc(100% - 76px); touch-action: pan-y; }
  .rv__card { padding: 20px 18px 16px; gap: 12px; border-radius: 16px; }
  .rv__card blockquote p { font-size: 13.5px; line-height: 1.55; }
  .rv__card blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; overflow: hidden; }
  .rv__card.is-full blockquote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
  .rv__card.is-long .rv__more, .rv__card.is-full .rv__more { display: inline-block; }
  .rv__stars { font-size: 16px; }
  .rv__card figcaption { padding-top: 10px; }
  .rv__card figcaption strong { font-size: 14px; }
  .rv__card figcaption em { font-size: 12px; }
  .rv__card.is-prev, .rv__card.is-next, .rv__card.is-far-prev, .rv__card.is-far-next { opacity: 0; pointer-events: none; filter: none; }
  .rv__card.is-prev, .rv__card.is-far-prev { transform: translateX(-60%) scale(.9); }
  .rv__card.is-next, .rv__card.is-far-next { transform: translateX(60%) scale(.9); }
  /* small arrows on either side, level with the middle of the review */
  .rv__arrow { width: 32px; height: 32px; margin-top: -16px; top: 50%; bottom: auto; }
  .rv__arrow svg { width: 16px; height: 16px; }
  .rv__arrow--prev { left: 2px; } .rv__arrow--next { right: 2px; }
  .rv { padding-bottom: 24px; margin-bottom: 0; }
  .rv + .reviews__more { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rv__card { transition: opacity .2s; } }

/* ---------- Instagram CTA ---------- */
.insta { text-align: center; }
.insta h3 { font-size: 22px; font-weight: 600; }
.insta p { margin-top: 4px; }
.insta img { max-width: 300px; margin: 28px auto 0; border-radius: 12px; }

/* ---------- Vimeo ---------- */
.vimeo-wrap { background: #fcfafd; padding: 32px 0; }
.vimeo-wrap .video { max-width: 640px; margin: 0 auto; }

/* ---------- Footer ---------- */
.footer { background: var(--bg-deep); color: #c9cdd2; padding: 64px 0 28px; border-top: 3px solid var(--blue); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.footer__grid > * { min-width: 0; }
.footer h4 { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.footer__brand strong { display: block; color: #fff; font-size: 20px; font-weight: 600; }
.footer__brand p { margin-top: 8px; font-size: 15px; }
.footer__brand a { display: block; width: fit-content; margin-top: 14px; color: var(--blue); font-size: 15px; text-decoration: none; }
.footer__brand a:hover { text-decoration: underline; }
.footer__brand a + a { margin-top: 6px; }
.footer__col a { display: block; color: #c9cdd2; font-size: 15px; text-decoration: none; padding: 5px 0; }
.footer__col a:hover, .footer__col a:focus-visible { color: var(--blue); }
.footer__account { display: inline-flex !important; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 16px !important; border-radius: 999px;
  border: 1px solid rgba(88,177,227,.6); color: #fff !important; }
.footer__account:hover { background: var(--blue); color: #10161a !important; }
.footer .social { color: #fff; gap: 12px; }
.footer .social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.06); transition: background-color .2s; }
.footer .social a:hover { background: var(--blue); color: #10161a; }
.footer .social svg { width: 19px; height: 19px; }
/* Footer: each icon in its own brand color */
.footer .social a { color: #fff; transition: transform .2s ease, filter .2s ease, background-color .2s; }
.footer .social a:hover { transform: translateY(-2px); filter: brightness(1.12); color: #fff; }
.footer .social a[aria-label="Facebook"], .footer .social a[aria-label="Facebook"]:hover { background: #1877f2; }
.footer .social a[aria-label="Instagram"], .footer .social a[aria-label="Instagram"]:hover { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.footer .social a[aria-label="YouTube"], .footer .social a[aria-label="YouTube"]:hover { background: #ff0033; }
.footer .social a[aria-label="TikTok"], .footer .social a[aria-label="TikTok"]:hover { background: #000; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.footer .social a[aria-label="TikTok"] svg { filter: drop-shadow(1.2px 1.2px 0 #fe2c55) drop-shadow(-1.2px -1.2px 0 #25f4ee); }
@media (prefers-reduced-motion: reduce) { .footer .social a:hover { transform: none; } }
.copyright { text-align: center; font-size: 13px; color: #8a9096; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav, .header__right .social { display: none; }
  .menu-toggle { display: inline-flex; }
  .header__inner { height: 80px; }
  .header__logo img { height: 60px; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 80px; left: 0; right: 0;
    background: var(--bg); padding: 12px 24px 24px; box-shadow: 0 20px 30px rgba(0,0,0,.4);
  }
  .nav.is-open > a, .nav.is-open .nav__drop > button { padding: 14px 0; width: 100%; border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav.is-open .nav__menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; padding: 0 0 8px 12px; }
  .nav.is-open .nav__drop.is-open .nav__menu { display: block; }
  .res-card__body, .split, .services, .reels-grid { grid-template-columns: 1fr; }
  .packages { grid-template-columns: repeat(2, 1fr); }
  .gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .section { padding: 52px 0; }
  .hero { height: 363px; background-image: url("../images/hero-mobile.webp?v=b60460c7"); }
  .hero--video { height: 78svh; min-height: 480px; background-image: none; }
  .hero__content { padding-bottom: 88px; }
  .hero__sound { right: 16px; bottom: 24px; }
  .header__right .btn { padding: 9px 16px; font-size: 13px; }
  .res-card__body { padding: 24px 20px 32px; }
  .res-card__title { font-size: 38px; }
  .steps { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .steps__cta .btn { width: 100%; }
  .step h3 { font-size: 24px; }
  .vcard { padding: 32px 20px; margin-bottom: 56px; }
  .cta-title { margin-bottom: 56px; }
  .reels-grid { grid-template-columns: 1fr; }
  .reels-grid .video--tall { max-width: 300px; margin: 0 auto; }
  .toppicks-strip { height: 220px; }
  .carousel-frame { height: 300px; }
  .svc-grid, .packages, .review-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .photo-wall .gallery { gap: 6px; }
  .photo-wall__btn { font-size: 15px; padding: 12px 20px; }
  .stat { width: 100%; padding: 16px 20px; }
  .stat strong { font-size: 34px; }
  .stat span { font-size: 18px; }
  .reviews__box { padding: 26px 16px 28px; }
  .btn--wide { min-width: 0; width: 100%; white-space: normal; }
}

/* ==========================================================
   SHARED PAGE COMPONENTS (used by every inner page)
   ========================================================== */
.nav__drop.is-active > button { color: var(--blue); }
.gold { color: #e2c32b; }
.muted { color: var(--muted); }
.narrow { max-width: 860px; margin-left: auto; margin-right: auto; }
.section--panel { background: var(--panel); }
.section--light { background: var(--light); color: #1d1e20; }
.section--white .muted, .section--light .muted { color: #555; }
.stack > * + * { margin-top: 20px; }
.mt-0 { margin-top: 0 !important; } .mt-24 { margin-top: 24px; } .mt-40 { margin-top: 40px; } .mt-64 { margin-top: 64px; }

/* Page hero: big title band, optional background photo */
.page-hero {
  position: relative; padding: 96px 0; text-align: center;
  background: var(--bg) center / cover no-repeat;
}
.page-hero--image { padding: 140px 0; }
.page-hero--image::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.page-hero > .container { position: relative; }
.page-hero h1 { font-size: clamp(32px, 4.5vw, 56px); font-weight: 600; }
.page-hero p { font-size: 19px; color: var(--muted); max-width: 820px; margin: 20px auto 0; }
.page-hero--image p { color: #eee; }

.eyebrow { color: var(--blue); font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 10px; }
.h-xl { font-size: clamp(34px, 4.5vw, 56px); font-weight: 600; }
.h-lg { font-size: clamp(28px, 3.4vw, 42px); font-weight: 500; }
.h-md { font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; }
.lead { font-size: 19px; color: var(--muted); }
.section--white .lead, .section--light .lead { color: #444; }

/* Rich text */
.prose { font-size: 16px; color: var(--muted); }
.prose h2 { font-size: clamp(26px, 3vw, 36px); color: var(--text); margin: 40px 0 16px; font-weight: 500; }
.prose h3 { font-size: 22px; color: var(--text); margin: 32px 0 12px; font-weight: 500; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p + p { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; margin: 14px 0; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); }
.prose a { color: var(--blue); }
.prose strong { color: var(--text); }
.section--white .prose, .section--light .prose { color: #333; }
.section--white .prose h2, .section--white .prose h3, .section--white .prose strong,
.section--light .prose h2, .section--light .prose h3, .section--light .prose strong { color: #1d1e20; }

/* Layout helpers */
.split--reverse > :first-child { order: 2; }
.split--top { align-items: start; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Images */
.media { width: 100%; border-radius: 14px; object-fit: cover; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 9; }
.media--photo { aspect-ratio: 3 / 2; }

/* Cards */
.card {
  background: var(--panel); border-radius: 14px; padding: 28px;
  border: 1px solid rgba(0,0,0,.4);
}
.card--deep { background: var(--bg-deep); }
.card--outline { background: transparent; border: 1px solid rgba(255,255,255,.18); }
.card > img:first-child { border-radius: 10px; margin-bottom: 18px; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.card h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 15px; }
.card .btn { margin-top: 20px; }

/* Pricing cards */
.price-card {
  background: var(--bg-deep); border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 32px 28px; display: flex; flex-direction: column; gap: 14px;
}
.price-card--featured { border: 2px solid var(--blue); box-shadow: 0 0 0 4px rgba(88,177,227,.12); }
.price-card h3 { font-size: 26px; font-weight: 600; }
.price-card .price { font-size: 34px; font-weight: 700; color: var(--blue); line-height: 1.1; }
.price-card .price small { font-size: 15px; font-weight: 400; color: var(--muted); }
.price-card ul { list-style: none; padding: 0; margin: 4px 0; flex: 1; }
.price-card li { padding: 8px 0 8px 28px; position: relative; font-size: 15px; border-bottom: 1px solid rgba(255,255,255,.06); }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.price-card .btn { text-align: center; }
.price-card .terms { font-size: 13px; text-align: center; color: var(--muted); }
.price-card .terms a { color: var(--blue); }

/* Embeds (tours, booking, widgets) */
.embed { width: 100%; border: 0; border-radius: 10px; background: #111; display: block; }
.embed--600 { height: 600px; } .embed--700 { height: 700px; } .embed--350 { height: 350px; }
.embed-box { border-radius: 12px; overflow: hidden; }

/* Video grids */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.video-grid--3 { grid-template-columns: repeat(3, 1fr); }
.video-title { font-size: 20px; font-weight: 500; margin: 14px 0 6px; }
.video-grid p { color: var(--muted); font-size: 15px; }

/* Numbered checklist */
.checklist { counter-reset: c; list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.checklist li {
  counter-increment: c; position: relative; padding: 18px 20px 18px 68px;
  background: var(--bg-deep); border-radius: 12px;
}
.checklist li::before {
  content: counter(c); position: absolute; left: 18px; top: 16px; width: 34px; height: 34px;
  border-radius: 50%; background: var(--blue); color: #1d1e20; font-weight: 700;
  display: grid; place-items: center;
}
.checklist li strong { color: #fff; }

/* Team */
.team-member { display: grid; grid-template-columns: 400px 1fr; gap: 56px; align-items: center; }
.team-member + .team-member { margin-top: 80px; }
.team-member--reverse > img { order: 2; }
.team-member h2 { font-size: 34px; font-weight: 600; margin-bottom: 6px; }
.team-member .role { color: var(--blue); margin-bottom: 18px; }
.team-member p { color: var(--muted); font-size: 16px; }

/* Forms */
.form { display: grid; gap: 16px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label { display: grid; gap: 6px; font-size: 14px; color: var(--muted); }
.form input, .form textarea, .form select {
  width: 100%; font: inherit; color: #1d1e20; background: #fff;
  border: 1px solid #cfcfcf; border-radius: 8px; padding: 12px 14px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
.form button { justify-self: start; cursor: pointer; font-family: inherit; }
.form-status { margin: 0; font-size: 15px; }
.form-status.is-ok { color: #6fd28a; }
.form-status.is-error { color: #ff7b7b; }
.section--white .form label, .section--light .form label { color: #333; }

/* Steps / numbered feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature + .feature { margin-top: 96px; }
.feature--reverse > :first-child { order: 2; }
.feature h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 600; margin-bottom: 18px; }
.feature p { color: var(--muted); }
.feature p + p { margin-top: 14px; }

/* Before / after or comparison tables */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; vertical-align: top; }
.table th { color: var(--blue); font-weight: 500; }

@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .video-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .team-member, .feature { grid-template-columns: 1fr; gap: 28px; }
  .team-member--reverse > img, .feature--reverse > :first-child, .split--reverse > :first-child { order: 0; }
  .team-member > img { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4, .video-grid, .video-grid--3 { grid-template-columns: 1fr; }
  .page-hero { padding: 64px 0; }
  .page-hero--image { padding: 96px 0; }
  .form .row { grid-template-columns: 1fr; }
  .embed--600, .embed--700 { height: 480px; }
  .feature + .feature { margin-top: 64px; }
}

/* ---------- Customer accounts (/account/) ---------- */
.acct { padding: 64px 16px 96px; display: flex; justify-content: center; }
.acct-card { width: 100%; max-width: 460px; background: #333436; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; padding: 36px 32px; }
.acct-card--wide { max-width: 680px; }
.acct-card h1 { font-size: 30px; font-weight: 600; line-height: 1.15; }
.acct-lead { color: #b9c0c7; margin-top: 8px; }
.acct-form { display: grid; gap: 14px; margin-top: 24px; }
.acct-field { display: grid; gap: 6px; }
.acct-field label { font-size: 14px; color: #d6dbe0; }
.acct-field input { font: inherit; font-size: 16px; color: #fff; background: #26272a; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 12px 14px; width: 100%; }
.acct-field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: transparent; }
.acct-hint { font-size: 14px; color: #b9c0c7; margin-top: -4px; }
form + .acct-hint, .acct-submit + .acct-hint { margin-top: 16px; line-height: 1.55; }
.acct-hint a, .acct-switch a, .acct-fine a, .acct-plan__again a { color: var(--blue); }
.acct button { font-family: inherit; }
.acct-submit { width: 100%; font-weight: 600; display: inline-flex; justify-content: center; padding: 13px 18px; font-size: 16px; margin-top: 6px; }
.acct-switch { margin-top: 22px; text-align: center; color: #b9c0c7; font-size: 15px; }
.acct-fine { margin-top: 22px; font-size: 13px; color: #9aa1a8; }
.acct-msg { margin-top: 18px; padding: 13px 16px; border-radius: 12px; font-size: 15px; border: 1px solid; }
.acct-msg p { margin: 0; }
.acct-msg--ok { background: rgba(88,177,227,.1); border-color: rgba(88,177,227,.45); }
.acct-msg--info { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.18); }
.acct-msg--error { background: rgba(232,93,93,.1); border-color: rgba(232,93,93,.5); }
.acct-linkbtn { background: none; border: 0; padding: 0; margin-top: 8px; color: var(--blue); font: inherit; text-decoration: underline; cursor: pointer; }
.acct-field input.acct-code { font-size: 26px; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; padding: 14px; }
.acct-switch--row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.acct-plan-pill { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(88,177,227,.45); color: var(--blue); font-size: 14px; font-weight: 500; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.acct-logout { padding: 8px 18px; font-size: 13px; }
.acct-plan { margin-top: 28px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.1); }
.acct-plan h2 { font-size: 20px; font-weight: 600; margin-bottom: 14px; }
.acct-plan__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; background: #26272a; }
.acct-plan__name { font-size: 18px; font-weight: 600; }
.acct-plan__price { color: #b9c0c7; font-size: 15px; margin-top: 2px; }
.acct-plan__date { margin: 14px 0 18px; color: #d6dbe0; }
.acct-plan__again { margin-top: 16px; color: #b9c0c7; }
.acct-plan + .acct-plan { margin-top: 30px; }
.acct-sessions { margin: 4px 0 18px; padding: 14px 16px; border-radius: 12px; background: #26272a; }
.acct-sessions p { margin: 0; }
.acct-sessions strong { font-size: 18px; }
.acct-sessions span { color: #9aa3ab; font-size: 14px; }
.acct-sessions .acct-hint { margin-top: 4px; }
.acct-plan__choose { display: grid; gap: 10px; margin: 18px 0 8px; }
.acct-plan__choose .btn { display: inline-flex; justify-content: center; }
.acct-chip { flex: none; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; white-space: nowrap; }
.acct-chip--ok { background: rgba(88,177,227,.16); color: var(--blue); }
.acct-chip--warn { background: rgba(240,180,70,.16); color: #f0b446; }
.acct-chip--bad { background: rgba(232,93,93,.16); color: #ff8a8a; }
.acct-chip--muted { background: rgba(255,255,255,.08); color: #b9c0c7; }
/* Owner-only subscribers page */
.acct-card--admin { max-width: 1040px; }
.adm-sec { margin-top: 34px; }
.adm-sec h2 { font-size: 22px; margin: 0 0 14px; }
.adm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.adm-stats div { background: #26272a; border-radius: 14px; padding: 14px 16px; }
.adm-stats strong { display: block; font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.adm-stats span { color: #b9c0c7; font-size: 14px; }
.adm-table { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); }
.adm-row { display: grid; grid-template-columns: 2.2fr 1.4fr 1.2fr 1fr 1fr 1fr; gap: 12px; align-items: center; padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.07); font-size: 15px; }
.adm-row:first-child { border-top: 0; }
.adm-row--head { background: #26272a; color: #b9c0c7; font-size: 13px; font-weight: 600; }
.adm-row small { display: block; color: #9aa3ab; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.adm-who a { color: #fff; font-weight: 600; text-decoration: none; }
.adm-who a:hover, .adm-who a:focus-visible { color: var(--blue); text-decoration: underline; }
.adm-muted { color: #9aa3ab; }
.adm-note { display: block; margin-top: 6px; font-size: 13px; color: #f0b446; }
.adm-edit { display: block; margin-top: 4px; font-size: 13px; color: var(--blue); }
.adm-edit:hover, .adm-edit:focus-visible { text-decoration: underline; }
.ope-view { flex-basis: 100%; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.adm-tabs { display: flex; gap: 6px; margin: 22px 0 4px; padding: 4px; background: #26272a; border-radius: 12px; width: fit-content; max-width: 100%; flex-wrap: wrap; }
.adm-tabs a { flex: 1 1 auto; text-align: center; padding: 9px 14px; border-radius: 9px; color: #b9c0c7; text-decoration: none; font-weight: 600; font-size: 15px; }
.adm-tabs a:hover { color: #fff; }
.adm-tabs a[aria-current="page"] { background: var(--blue); color: #10151a; }
.adm-tabs a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.adm-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adm-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e85d5d; color: #fff; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.ope-alert { margin-top: 26px; border: 1px solid rgba(232,93,93,.55); background: rgba(232,93,93,.10); border-radius: 16px; padding: 18px 20px; }
.ope-alert h2 { margin: 0 0 6px; font-size: 22px; color: #ff9a9a; }
.ope-alert > p { margin: 0 0 12px; color: #e6d3d3; }
.ope-alert ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ope-alert li { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: rgba(0,0,0,.18); border-radius: 12px; padding: 12px 14px; }
.ope-alert li small { display: block; color: #c9b8b8; font-size: 13px; margin-top: 2px; }
.ope-alert__do { display: flex; align-items: center; gap: 14px; }
.ope-alert__do .btn { padding: 9px 16px; font-size: 14px; }
.ope-alert__do .adm-edit { margin: 0; }
.ope-alert__fine { margin: 12px 0 0; font-size: 13px; color: #c9b8b8; }
.adm-stats .is-bad { background: rgba(232,93,93,.14); }
.adm-stats .is-bad strong { color: #ff8a8a; }
.ope-row { grid-template-columns: 2fr 1.3fr 1.1fr 1.4fr minmax(150px, 1.3fr); }
.ope-count { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ope-count::before { flex-basis: 100%; }
.ope-count form { display: contents; }
.ope-step { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22); background: none; color: #fff; font: inherit; font-size: 18px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.ope-step:hover { border-color: var(--blue); color: var(--blue); }
.ope-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ope-step:disabled { opacity: .35; cursor: default; }
.ope-card { border-top: 1px solid rgba(255,255,255,.07); }
.ope-card .adm-row { border-top: 0; }
.ope-card.is-over { background: rgba(232,93,93,.06); }
.ope-more { padding: 0 16px 12px; }
.ope-more summary { cursor: pointer; color: var(--blue); font-size: 14px; width: fit-content; }
.ope-list { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.ope-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #26272a; border-radius: 10px; padding: 9px 12px; font-size: 14px; flex-wrap: wrap; }
.ope-list li small { color: #9aa3ab; flex: 1 1 200px; }
.ope-list li.is-over { box-shadow: inset 3px 0 0 #ff8a8a; }
.ope-list .acct-linkbtn { margin: 0; font-size: 14px; }
.ope-add { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: #b9c0c7; }
.ope-add label { display: grid; gap: 4px; }
.ope-add input, .ope-other select { font: inherit; font-size: 14px; color: #fff; background: #26272a; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 10px; }
.ope-add .btn, .ope-other .btn { padding: 8px 14px; font-size: 14px; }
.ope-other, .ope-zap { background: #26272a; border-radius: 14px; padding: 14px 16px; }
.ope-other summary, .ope-zap summary { cursor: pointer; font-weight: 600; }
.ope-other h3 { font-size: 16px; margin: 18px 0 6px; }
.ope-other__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.07); flex-wrap: wrap; }
.ope-other__row small { display: block; color: #9aa3ab; font-size: 13px; }
.ope-other__row form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ope-other__row > form + form { margin-left: -4px; }
.ope-other__row .acct-linkbtn { margin: 0; font-size: 14px; }
.ope-zap dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; font-size: 14px; }
.ope-zap dt { color: #9aa3ab; }
.ope-reveal { display: inline; }
.ope-reveal summary { display: inline; cursor: pointer; color: var(--blue); text-decoration: underline; }
.ope-reveal[open] summary { display: none; }
.ope-zap code { overflow-wrap: anywhere; background: rgba(255,255,255,.06); padding: 1px 6px; border-radius: 5px; }
@media (max-width: 760px) {
  .adm-stats.adm-stats--4 { grid-template-columns: 1fr 1fr; }
  .ope-row { grid-template-columns: 1fr 1fr; }
  .ope-zap dl { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .adm-stats { grid-template-columns: 1fr; }
  .adm-row--head { display: none; }
  .adm-row { grid-template-columns: 1fr 1fr; }
  .adm-row .adm-who { grid-column: 1 / -1; }
  .adm-row [data-label]::before { content: attr(data-label); display: block; color: #9aa3ab; font-size: 12px; }
}
@media (max-width: 520px) {
  .acct { padding-top: 32px; }
  .acct-card { padding: 28px 20px; }
  .acct-head { flex-direction: column; }
  .acct-plan__row { flex-direction: column; align-items: flex-start; }
}

/* Phone mock-up playing a vertical reel (Online Presence Engine page + homepage teaser) */
  .ope-phone {
    width: min(100%, 300px); margin: 0 auto; aspect-ratio: 9 / 19; border-radius: 42px; padding: 12px;
    background: #0d0e10; box-shadow: 0 0 0 2px #3a3c40, 0 30px 80px rgba(0,0,0,.55), 0 0 120px rgba(88,177,227,.18);
    position: relative;
  }
  .ope-phone::before { content: ""; position: absolute; top: 20px; left: 50%; width: 76px; height: 22px; transform: translateX(-50%); background: #0d0e10; border-radius: 12px; z-index: 2; }
  .ope-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: #000; }
  .ope-phone__screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .ope-sound {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: 999px;
    background: rgba(13,14,16,.72); color: #fff; border: 1px solid rgba(255,255,255,.22);
    font: 500 13px/1 Rubik, sans-serif; cursor: pointer; white-space: nowrap; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  }
  .ope-sound:hover { background: rgba(13,14,16,.88); }
  .ope-sound:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
  .ope-sound svg { width: 16px; height: 16px; flex: none; }
  .ope-sound .on, .ope-sound[aria-pressed="true"] .off { display: none; }
  .ope-sound[aria-pressed="true"] .on { display: inline; }
  .ope-phone__cap { text-align: center; color: #b9c0c7; font-size: 14px; margin-top: 16px; }

/* Hearts and likes floating up from the bottom-left of the phone, like a live social post (js/site.js).
   The outer span rises and fades; the inner one sways side to side, so the path is a smooth curve. */
.ope-react { position: absolute; left: 0; bottom: 0; width: 50%; height: 80%; pointer-events: none; z-index: 2; }
.ope-react > span { position: absolute; bottom: 64px; left: 14px; opacity: 0; --rise: 300px; will-change: transform, opacity;
  animation: ope-rise var(--d, 3.4s) cubic-bezier(.33,.0,.4,1) both; }
.ope-react > span > i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0,0,0,.3);
  animation: ope-sway var(--s, 1.6s) ease-in-out infinite alternate; }
.ope-react svg { width: 16px; height: 16px; fill: #fff; }
.ope-react .is-heart > i { background: linear-gradient(135deg, #ff5a7a, #e1306c); }
.ope-react .is-like > i { background: linear-gradient(135deg, #6cc3f0, var(--blue)); }
@keyframes ope-rise {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  12%  { transform: translateY(calc(var(--rise) * -.1)) scale(1); opacity: 1; }
  55%  { opacity: 1; }
  100% { transform: translateY(calc(var(--rise) * -1)) scale(.9); opacity: 0; }
}
@keyframes ope-sway { from { transform: translateX(calc(var(--x) * -.5)); } to { transform: translateX(var(--x)); } }

/* Pop-up player: the video opens big in the middle of the screen */
.vpop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px; background: rgba(8,9,10,.82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .25s ease; }
.vpop.is-open { opacity: 1; }
.vpop__box { position: relative; width: min(1100px, 100%); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000;
  box-shadow: 0 40px 100px rgba(0,0,0,.6); transform: scale(.88) translateY(20px); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.vpop--tour .vpop__box { width: min(1280px, 100%); aspect-ratio: auto; height: min(84vh, 820px); }
.vpop--tall .vpop__box { width: auto; height: min(86vh, 900px); aspect-ratio: 9 / 16; max-width: 100%; }
.vpop.is-open .vpop__box { transform: none; }
.vpop__box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vpop__close { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
  background: rgba(20,21,23,.8); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.vpop__close:hover { background: var(--blue); color: #10161a; }
@media (max-width: 640px) {
  .vpop { padding: 12px; }
  .vpop__box { border-radius: 12px; }
  .vpop--tour .vpop__box { height: 78vh; }
  .vpop__close { top: 10px; right: 10px; width: 42px; height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .vpop, .vpop__box { transition: none; } }

/* =====================================================================
   Service pages (Photography, Videography, 3D Tours): shared building blocks.
   Dark page, blue glow in the hero, rounded panels, blue checks and chips.
   ===================================================================== */
.sv-hero { padding: 64px 0 72px; background: radial-gradient(900px 480px at 82% 30%, rgba(88,177,227,.16), transparent 62%), var(--bg); }
.sv-hero__grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: center; }
.sv-hero h1 { font-size: clamp(36px, 4.6vw, 60px); font-weight: 600; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance; }
.sv-hero h1 span { color: var(--blue); }
.sv-lead { color: #c9cdd2; font-size: 19px; line-height: 1.6; margin-top: 20px; max-width: 46ch; text-wrap: pretty; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; list-style: none; padding: 0; }
.sv-chips li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; border-radius: 999px; font-size: 14.5px; color: #fff;
  background: rgba(88,177,227,.12); border: 1px solid rgba(88,177,227,.45); }
.sv-chips li::before { content: ""; width: 9px; height: 5px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg) translateY(-2px); }
.sv-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; }
.sv-cta .btn { display: inline-flex; align-items: center; justify-content: center; }
.sv-media { position: relative; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.45); background: #000; }
.sv-media > img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.sv-media.video { border-radius: 20px; }

.sv-jump { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.sv-jump a { padding: 9px 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: 14.5px; text-decoration: none; transition: background-color .2s, border-color .2s; }
.sv-jump a:hover, .sv-jump a:focus-visible { background: var(--blue); border-color: var(--blue); color: #10161a; }

.sv-panel { position: relative; border-radius: 26px; padding: 44px; background: #2b2c2f; border: 1px solid rgba(255,255,255,.08); scroll-margin-top: 110px; }
.sv-panel + .sv-panel { margin-top: 70px; }   /* 2.5x the old 28px (owner, Oct 2026) */
.sv-panel::before { content: ""; position: absolute; left: 44px; right: 44px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--blue), transparent); }
.sv-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; align-items: baseline; margin-bottom: 26px; }
.sv-num { font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--blue); }
.sv-head h2 { font-size: clamp(26px, 2.8vw, 36px); font-weight: 500; line-height: 1.15; }
.sv-head h2 span { color: var(--blue); }
/* text-wrap: pretty stops a single word hanging on the last line */
.sv-head p { grid-column: 2; color: #c9cdd2; font-size: 16.5px; line-height: 1.6; max-width: 70ch; text-wrap: pretty; }
.sv-row { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.sv-row--flip > :first-child { order: 2; }
.sv-text p { color: #c9cdd2; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.sv-text p + p { margin-top: 14px; }
.sv-points { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 11px; }
.sv-points li { position: relative; padding-left: 28px; color: #e6e8ea; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.sv-points li::before { content: ""; position: absolute; left: 3px; top: 7px; width: 12px; height: 7px; border-left: 2.5px solid var(--blue); border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg); }
.sv-points strong { color: var(--blue); font-weight: 600; }
.sv-photo { border-radius: 18px; overflow: hidden; box-shadow: 0 20px 44px rgba(0,0,0,.35); }
.sv-photo img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sv-tag { display: inline-block; margin-top: 12px; padding: 6px 13px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: #dfe2e5; font-size: 13.5px; text-decoration: none; }
a.sv-tag:hover { border-color: var(--blue); color: #fff; }
.sv-price { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.sv-price strong { font-size: 26px; font-weight: 600; }
.sv-price span { color: #b9c0c7; font-size: 15px; }

/* video sets: a wide video beside its vertical cut */
.sv-vset { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.sv-vcard { border-radius: 18px; padding: 16px; background: var(--bg-deep); border: 1px solid rgba(255,255,255,.07); }
.sv-vcard h3 { font-size: 20px; font-weight: 500; }
.sv-vcard h3 span { color: var(--blue); }
.sv-vpair { display: grid; grid-template-columns: 2.4fr 1fr; gap: 10px; align-items: center; margin-top: 14px; }
.sv-vpair .video { border-radius: 10px; }
.sv-reels { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 460px; justify-self: center; width: 100%; }

.sv-embed { width: 100%; height: min(72vh, 640px); border: 0; border-radius: 18px; display: block; background: #000; box-shadow: 0 24px 50px rgba(0,0,0,.4); }
.sv-cta-box { max-width: 880px; margin: 0 auto; padding: 46px 40px; border-radius: 26px; text-align: center;
  background: radial-gradient(600px 300px at 50% 0%, rgba(88,177,227,.22), transparent 70%), #2b2c2f; border: 1px solid rgba(88,177,227,.3); }
.sv-cta-box h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; }
.sv-cta-box h2 span { color: var(--blue); }
.sv-cta-box p { color: #c9cdd2; font-size: 17px; line-height: 1.6; margin: 12px auto 0; max-width: 54ch; }
.sv-cta-box .sv-cta { justify-content: center; }

@media (max-width: 1000px) {
  .sv-hero__grid, .sv-row { grid-template-columns: 1fr; gap: 32px; }
  .sv-row--flip > :first-child { order: 0; }
  .sv-vset { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sv-hero { padding: 36px 0 48px; }
  .sv-lead { font-size: 17px; }
  .sv-panel { padding: 30px 18px 22px; border-radius: 20px; }
  .sv-panel::before { left: 18px; right: 18px; }
  .sv-head { grid-template-columns: 1fr; }
  .sv-head p { grid-column: 1; }
  .sv-vpair { grid-template-columns: 1.9fr 1fr; gap: 8px; }
  .sv-vcard { padding: 12px; }
  .sv-embed { height: 64vh; border-radius: 14px; }
  .sv-cta-box { padding: 32px 20px; border-radius: 20px; }
  .sv-cta .btn { flex: 1 1 100%; }
}

/* Click-to-open 3D tour (opens in the pop-up player, js/site.js) */
.tour-facade { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; }
.tour-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .25s; }
.tour-facade:hover img { filter: brightness(.85); }
.tour-facade__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 999px; background: var(--blue); color: #10161a; font: 600 14px/1 Rubik, sans-serif; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,.35); }
.tour-facade__label svg { width: 18px; height: 18px; }
.tour-facade:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }

/* Video statistics band (Videography page): three big numbers, then supporting facts, each with its source */
.sv-stats { padding: 72px 0; background: var(--bg-deep); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); }
.sv-stats h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; text-align: center; text-wrap: balance; }
.sv-stats h2 span { color: var(--blue); }
.sv-stats__sub { color: #c9cdd2; font-size: 17px; text-align: center; margin: 12px auto 0; max-width: 60ch; text-wrap: pretty; }
.sv-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; list-style: none; padding: 0; }
.sv-big li { position: relative; padding: 30px 26px 24px; border-radius: 20px; background: #2b2c2f; border: 1px solid rgba(255,255,255,.08); overflow: hidden; display: flex; flex-direction: column; }
.sv-big li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--blue), #9fd4f1); }
.sv-big strong { font-size: clamp(44px, 5vw, 64px); white-space: nowrap; font-weight: 700; line-height: 1; color: var(--blue); letter-spacing: -.02em; }
.sv-big .sv-big__what { color: #fff; font-size: 18px; line-height: 1.45; margin-top: 12px; text-wrap: pretty; }
.sv-big .sv-big__why { display: inline-block; align-self: flex-start; margin-top: 14px; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: #10161a; background: var(--blue); font-weight: 600; }
.sv-src { display: block; margin-top: auto; padding-top: 14px; color: #8a9096; font-size: 12.5px; line-height: 1.4; }
.sv-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 18px; list-style: none; padding: 0; }
.sv-small li { padding: 20px 20px 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); display: flex; flex-direction: column; }
.sv-small strong { font-size: 32px; font-weight: 700; line-height: 1; color: #fff; }
.sv-small span:not(.sv-src) { color: #c9cdd2; font-size: 15px; line-height: 1.45; margin-top: 8px; text-wrap: pretty; }
@media (max-width: 900px) { .sv-big, .sv-small { grid-template-columns: 1fr 1fr; } .sv-big li:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sv-stats { padding: 52px 0; } .sv-big, .sv-small { grid-template-columns: 1fr; } .sv-big li { padding: 24px 20px 20px; } }
.sv-big .sv-big--long strong { font-size: clamp(34px, 3.5vw, 48px); padding: 6px 0 8px; }
/* Headings inside a two-column row stay on one line on wide screens */
@media (min-width: 1001px) { .sv-row .sv-head h2 { font-size: clamp(24px, 2.3vw, 32px); white-space: nowrap; } }
/* Two-way video switch (Videography marketing video) */
.sv-pick { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 14px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
/* The blue pill slides under whichever video is chosen, so it reads as a switch */
.sv-pick::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--blue);
  box-shadow: 0 6px 16px rgba(88,177,227,.35); transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.sv-pick:has(button:nth-child(2)[aria-pressed="true"])::before { transform: translateX(100%); }
.sv-pick button { position: relative; z-index: 1; border: 0; border-radius: 999px; padding: 10px 18px; background: transparent; color: #c9cdd2; font: 500 14px/1.15 Rubik, sans-serif; cursor: pointer; transition: color .25s; white-space: nowrap; }
.sv-pick button[aria-pressed="true"] { color: #10161a; font-weight: 600; }
.sv-pick button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sv-pick::before { transition: none; } }
@media (max-width: 1000px) {
  .sv-pick { display: grid; width: min(100%, 340px); margin: 16px auto 0; }
  .sv-pick button { padding: 11px 8px; font-size: 14px; }
  .sv-pick__x { display: none; }
  .sv-pick__link { text-align: center; }
}
@media (max-width: 380px) { .sv-pick button { font-size: 12px; padding: 10px 2px; } .sv-pick { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
.sv-pick__link { display: block; margin-top: 12px; color: var(--blue); font-size: 14px; text-decoration: none; }
.sv-pick__link:hover { text-decoration: underline; }
/* Section headings on phones: sized to fit on one line */
@media (max-width: 640px) { .sv-head h2 { font-size: min(5.6vw, 28px); white-space: nowrap; } }

/* ---------- Drone swarm: the + drone button in the header launches up to 5 drones (js/site.js) ---------- */
.swarm-btn { position: relative; display: inline-flex; align-items: center; gap: 2px; height: 34px; padding: 0 10px 0 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.swarm-btn svg { width: 26px; height: 20px; }
.swarm-btn__plus { font: 600 17px/1 Rubik, sans-serif; margin-left: 1px; }
.swarm-btn:hover { background: var(--blue); border-color: var(--blue); color: #10161a; }
.swarm-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.swarm-btn__count { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #10161a;
  font: 700 11px/18px Rubik, sans-serif; text-align: center; }
.swarm-btn__count:empty { display: none; }
.swarm-btn.is-full .swarm-btn__plus { display: none; }
.swarm-btn.is-full::after { content: "−"; font: 600 18px/1 Rubik, sans-serif; margin-left: 3px; }
/* 1-second safety wait after switching to "−": a blue bar fills underneath, then it can be pressed */
.swarm-btn.is-arming { cursor: wait; opacity: .7; }
.swarm-btn.is-arming::before { content: ""; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--blue);
  transform-origin: left; animation: swarm-arm 1s linear forwards; }
@keyframes swarm-arm { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.swarm-btn.is-spent { opacity: .35; cursor: default; }
.swarm-btn.is-spent:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); color: #fff; }
.swarm-btn:disabled { pointer-events: none; }
.swarm { position: fixed; inset: 0; z-index: 44; pointer-events: none; overflow: hidden; }
.swarm__d { position: absolute; left: 0; top: 0; width: 140px; will-change: transform; contain: layout paint style;
  }
.swarm__d svg { display: block; width: 100%; height: auto; overflow: visible; }
/* only the painted drone catches clicks (click to shoot it down); the space around it stays click-through */
.swarm__d svg { pointer-events: visiblePainted; cursor: crosshair; }
.swarm__d.is-down svg { pointer-events: none; }
/* Performance: nothing inside a drone animates (spinning props repainted 20 glowing drones every frame),
   so each drone is drawn once and the browser only moves the finished picture around. Capped at 5 (js/site.js). */
.swarm__d .sd { opacity: .35; }
.swarm__d .sp { opacity: .55; }
@media (max-width: 768px) { .swarm__d { width: 78px; } .swarm-btn { height: 32px; padding: 0 8px 0 6px; } .swarm-btn svg { width: 22px; } }
@media (prefers-reduced-motion: reduce) { .swarm-btn { display: none; } }

/* Phone header: logo keeps its shape, the right-hand items sit close together, drone button just left of the menu */
@media (max-width: 768px) {
  .header__right { gap: 8px; }
  .header__right .btn { order: 1; }
  .header__right .swarm-btn { order: 2; }
  .header__right .menu-toggle { order: 3; padding: 6px; }
}
@media (max-width: 400px) {
  .header__right { gap: 6px; }
  .header__right .btn { padding: 8px 12px; font-size: 12.5px; }
  .swarm-btn { padding: 0 6px 0 5px; height: 30px; }
  .swarm-btn svg { width: 20px; height: 16px; }
}
@media (max-width: 340px) {
  .header__logo img { height: 50px; }
  .header__right { gap: 4px; }
  .header__right .btn { padding: 7px 10px; font-size: 12px; }
  .header__right .menu-toggle { padding: 4px; }
}

/* Phones: the "See What's on Sale" photo band reads lighter */
@media (max-width: 768px) {
  .sale { padding: 72px 0; }
  .sale h3 { font-size: 17px; line-height: 1.5; margin-bottom: 26px; }
}

/* Phones: the hero headline a bit smaller, and the whole block centered */
@media (max-width: 700px) {
  .hero__content { text-align: center; }
  .hero__title { font-size: min(8.4vw, 32px); max-width: 15ch; margin: 0 auto; }
  .hero__sub { font-size: 16px; margin-top: 10px; }
  .hero__cta { justify-content: center; margin-top: 22px; }
  .hero--video { align-items: center; }               /* words and buttons sit in the middle of the video */
  .hero--video .hero__content { padding-bottom: 0; }
}

/* Phones: stats become a side-scrolling row instead of a tall stack. The next card peeks in so it's clear
   there is more. No auto-scroll (owner's call): it only moves when swiped. */
@media (max-width: 700px) {
  .sv-big, .sv-small, .page-win-listings ul.wl-stats {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; max-width: none;
  }
  .sv-big::-webkit-scrollbar, .sv-small::-webkit-scrollbar, .page-win-listings ul.wl-stats::-webkit-scrollbar { display: none; }
  .sv-big > li, .sv-small > li, .page-win-listings ul.wl-stats > li { flex: 0 0 84%; scroll-snap-align: start; }
  .sv-small > li { flex-basis: 70%; }
  .page-win-listings .wl-stats { text-align: left; }
}

/* Stacked service pages (one column): the photo or video comes right after the title, not at the end.
   Top of the page: headline, then the picture, then the text and buttons.
   Numbered panels whose title sits inside the text column: title, then the picture, then the text. */
@media (max-width: 1000px) {
  .sv-hero__grid { row-gap: 0; }
  .sv-hero__grid > :first-child { display: contents; }
  .sv-hero__grid > :first-child > * { order: 3; }
  .sv-hero__grid > :first-child > h1, .sv-hero__grid > :first-child > .ex-logo { order: 1; }
  .sv-hero__grid > :last-child { order: 2; margin: 24px 0 4px; }

  .sv-row:has(> .sv-text > .sv-head) { row-gap: 0; }
  .sv-row:has(> .sv-text > .sv-head) > .sv-text { display: contents; }
  .sv-row:has(> .sv-text > .sv-head) > .sv-text > * { order: 3; }
  .sv-row:has(> .sv-text > .sv-head) > .sv-text > .sv-head { order: 1; margin-bottom: 18px; }
  .sv-row:has(> .sv-text > .sv-head) > :not(.sv-text) { order: 2; margin-bottom: 22px; }
  .sv-row:has(> .sv-text > .sv-head) > .sv-text > .sv-tag { justify-self: start; }
}

/* Stacked: panels whose title block also holds an intro paragraph (videos, 3D tours, films).
   Number and title first, then the video / tour, then that paragraph and the rest. */
@media (max-width: 1000px) {
  .sv-panel:has(> .sv-head > p) { display: flex; flex-direction: column; }
  .sv-panel:has(> .sv-head > p) > * { order: 5; }
  .sv-panel > .sv-head:has(> p) { display: contents; }
  .sv-panel > .sv-head:has(> p) > .sv-num { order: 1; margin-bottom: 6px; }
  .sv-panel > .sv-head:has(> p) > h2 { order: 2; margin-bottom: 18px; }
  .sv-panel > .sv-head:has(> p) > p { order: 4; margin-bottom: 4px; }
  .sv-panel:has(> .sv-head > p) > :is(.sv-vset, .sv-embed, .ex-films),
  .sv-panel:has(> .sv-head > p) > .sv-embed + p { order: 3; }
  .sv-panel:has(> .sv-head > p) > :is(.sv-vset, .ex-films) { margin: 0 0 22px; }
  .sv-panel:has(> .sv-head > p) > .sv-embed { margin-bottom: 0; }
  .sv-panel:has(> .sv-head > p) > .sv-embed + p { margin: 10px 0 18px !important; }
  .sv-panel:has(> .sv-head > p) > .sv-embed:not(:has(+ p)) { margin-bottom: 22px; }
  /* the marketing-video panel: its video sits in a row next to the bullet list */
  .sv-panel:has(> .sv-head > p) > .sv-row:not(:has(> .sv-text)):has(> div > .video) { display: contents; }
  .sv-panel:has(> .sv-head > p) > .sv-row:not(:has(> .sv-text)):has(> div > .video) > :last-child { order: 3; margin-bottom: 22px; }
  .sv-panel:has(> .sv-head > p) > .sv-row:not(:has(> .sv-text)):has(> div > .video) > :first-child { order: 5; }
}

/* Phones: the three numbers sit side by side instead of three tall stacked pills */
@media (max-width: 700px) {
  .stats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
  .stats__row .stat { width: auto; padding: 14px 6px; border-radius: 18px; border-width: 1.5px; align-content: center; }
  .stats__row .stat strong { font-size: min(5.8vw, 26px); font-weight: 500; white-space: nowrap; }
  .stats__row .stat span { font-size: 12px; line-height: 1.3; text-wrap: balance; }
  .stats__row .stat__note { font-size: 10.5px; margin-top: 1px; }
}

/* Order Form button: in the header on computers, at the bottom of the open menu on phones */
.nav > a.nav__order { display: none; }
@media (max-width: 768px) {
  .header__right > .btn { display: none; }
  .nav.is-open > a.nav__order { display: flex; justify-content: center; width: 100%; margin-top: 18px; padding: 14px 20px; border-bottom: 0; border-radius: 8px; background: var(--blue); color: #fff; font-weight: 500; }
}

/* Shown over a YouTube video that had to start muted (phones): one tap turns the sound on */
.yt-unmute { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 13px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(13,14,16,.72); color: #fff;
  font: 500 14px/1 Rubik, sans-serif; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.yt-unmute svg { width: 18px; height: 18px; }

/* Exclusives: the Luxury logo in the bar, sized so FALCO, Focus and the bird match the normal logo exactly
   (its extra MAINE MEDIA / LUXURY lettering sits around them). Measured from the two image files:
   the luxury mark is drawn 0.92x the height of the normal one and starts a little further left and higher. */
.page-exclusives .header__logo img { height: 75.4px; margin: 4.6px 0 2px 6.7px; }
@media (max-width: 1080px) { .page-exclusives .header__logo img { height: 55.2px; margin: 3.4px 0 1.4px 4.9px; } }
@media (max-width: 340px) { .page-exclusives .header__logo img { height: 46px; margin: 2.8px 0 1.2px 4.1px; } }