/* ============================================================================
   WE BUILD WORLDS — polish layer
   Additive refinements loaded after site.css + brand-theme.css. Purely visual:
   depth, cinematic texture, motion and detailing. No layout/structure changes.
   ============================================================================ */

::selection { background: rgba(43, 197, 255, .28); color: #fff; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

:focus-visible {
  outline: 2px solid var(--acid);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Scroll progress + cinematic film grain (elements injected by site.js) --- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 60;
  background: linear-gradient(90deg, #1478a8, #2bc5ff 60%, #8fdbfa);
  box-shadow: 0 0 12px rgba(43, 197, 255, .55);
  transition: width .08s linear;
}
.grain {
  position: fixed; inset: 0; z-index: 56; pointer-events: none; opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Header / nav --------------------------------------------------------- */
.brand-logo img { transition: filter .3s, transform .3s; }
.brand-logo:hover img { filter: brightness(1.12); }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1.5px;
  background: var(--acid); transition: right .3s cubic-bezier(.2,.8,.2,1);
}
.main-nav > a:not(.nav-cta):hover::after,
.main-nav > a.active::after { right: 0; }
.nav-cta { transition: background .25s, color .25s, border-color .25s; }
.nav-cta:hover { background: var(--acid); color: #041016; border-color: var(--acid); }

/* --- Hero ----------------------------------------------------------------- */
.hero--home .hero-grid::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 58%, rgba(43,150,220,.22), transparent 70%);
}
.hero--home .hero-grid > * { position: relative; z-index: 1; }
.hero-emblem { animation: floatEmblem 7s ease-in-out infinite; }
@keyframes floatEmblem {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.brand-period { text-shadow: 0 0 26px rgba(43,197,255,.6); animation: periodPulse 3.6s ease-in-out infinite; }
@keyframes periodPulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.scroll-cue { opacity: .7; transition: opacity .3s, transform .3s; }
.scroll-cue:hover { opacity: 1; transform: translateY(3px); }

/* --- Eyebrow ridge tick (echoes the logo) --------------------------------- */
.eyebrow::before {
  content: ""; display: inline-block; width: 18px; height: 2px;
  background: currentColor; vertical-align: middle; margin-right: 10px;
  opacity: .85; border-radius: 2px;
}

/* --- Buttons -------------------------------------------------------------- */
.button { position: relative; overflow: hidden; }
.button--solid::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.button--solid:hover::after { left: 140%; }

/* --- World cards ---------------------------------------------------------- */
.world-card { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.world-card:hover { transform: translateY(-6px); }
.world-card__media {
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 18px 40px rgba(0,0,0,.32);
  transition: box-shadow .4s;
}
.world-card__media::after {  /* legibility + depth scrim */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(2,7,11,.55));
  border-radius: 14px;
}
.world-card:hover .world-card__media {
  box-shadow: 0 0 0 1px rgba(43,197,255,.4) inset, 0 26px 60px rgba(6,26,40,.5);
}
.card-index {
  backdrop-filter: blur(6px);
  background: rgba(6,14,20,.5) !important;
  border-color: rgba(141,201,230,.35) !important;
  letter-spacing: .08em;
}
.round-link { transition: background .25s, color .25s, transform .3s; }
.world-card:hover .round-link { transform: rotate(45deg); }

/* --- Viewer frame --------------------------------------------------------- */
.viewer-frame { border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.viewer-frame iframe { border-radius: 16px; }

/* --- Route + editorial rows: hover lift ----------------------------------- */
.route-list article, .editorial-rows article, .process-list li {
  transition: background .3s, padding-left .3s;
}
.route-list article:hover, .editorial-rows article:hover {
  background: linear-gradient(90deg, rgba(43,150,220,.06), transparent 60%);
  padding-left: 10px;
}

/* --- Price cards ---------------------------------------------------------- */
.price-card { border-radius: 16px; transition: transform .35s, box-shadow .35s, border-color .35s; }
.price-card:not(.price-card--featured):hover {
  transform: translateY(-6px); border-color: rgba(43,197,255,.4);
  box-shadow: 0 24px 60px rgba(6,26,40,.4);
}
.price-card--featured { box-shadow: 0 30px 80px rgba(6,26,40,.45); border-radius: 16px; }

/* --- Forms ---------------------------------------------------------------- */
.contact-form input, .contact-form textarea { transition: border-color .25s; }

/* --- Reveal: gentle blur-in ---------------------------------------------- */
.reveal { filter: blur(6px); }
.reveal.visible { filter: blur(0); transition-property: opacity, transform, filter; }

/* (Readability/text sizing now lives in brand-theme.css so it applies without a
   server restart and can't be overridden here.) */

@media (prefers-reduced-motion: reduce) {
  .hero-emblem, .brand-period { animation: none; }
  .reveal { filter: none; }
  .grain, .scroll-progress { display: none; }
}

/* ==========================================================================
   Destination-experience pricing page
   Tiers (suitable-for + includes), hosting, what-we-deliver, industries.
   ========================================================================== */

/* --- Tier cards ----------------------------------------------------------- */
.price-card { min-height: 0; }
.price-card h2 { margin: 8px 0 0; }
.price-card__quote { color: var(--acid); font-weight: 600; font-size: 15px; margin: 8px 0 0; }
.price-card--featured .price-card__quote { color: #116b94; }
.price-card__desc { color: var(--mist); font-size: 16px; margin: 14px 0 0; }
.price-card--featured .price-card__desc { color: #4e5b52; }
.price-card__forlabel {
  font-size: 12px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mist); margin: 26px 0 4px;
}
.price-card--featured .price-card__forlabel { color: #5e7748; }
.price-card__for, .price-card__features { list-style: none; margin: 0; padding: 0; }
.price-card__for li, .price-card__features li {
  border-top: 1px solid var(--line); padding: 10px 0; font-size: 15px;
}
.price-card--featured .price-card__for li, .price-card--featured .price-card__features li {
  border-top-color: rgba(16,22,18,.16);
}
.price-card .button { margin-top: 30px; }
.button-row--center { justify-content: center; }

/* --- Hosting & ongoing support ------------------------------------------- */
.hosting { display: grid; grid-template-columns: minmax(280px, .85fr) 1.15fr; gap: 6vw; align-items: start; }
.hosting__head h2 {
  font-size: clamp(34px, 4.4vw, 66px); line-height: .96; letter-spacing: -.045em;
  margin: 0; font-weight: 500;
}
.hosting__intro { color: var(--mist); font-size: 17px; margin: 22px 0 0; }
.hosting__price {
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 42px);
  color: var(--acid); margin: 18px 0 0;
}
.hosting__note { color: var(--mist); font-size: 15px; margin: 10px 0 0; }
.hosting__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(20px, 3vw, 50px);
}
.hosting__list li {
  border-top: 1px solid var(--line); padding: 16px 0; font-size: 16.5px;
  display: flex; align-items: baseline; gap: 12px;
}
.hosting__list li::before { content: "+"; color: var(--acid); font-weight: 600; }

/* --- What we deliver ------------------------------------------------------ */
.deliver-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 12px; }
.deliver-card {
  border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px;
  display: flex; flex-direction: column; gap: 18px; min-height: 158px;
  background: linear-gradient(160deg, rgba(19,37,54,.55), transparent 80%);
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.deliver-card:hover {
  transform: translateY(-6px); border-color: rgba(43,197,255,.4);
  box-shadow: 0 22px 55px rgba(6,26,40,.38);
}
.deliver-icon { width: 34px; height: 34px; color: var(--acid); }
.deliver-card h3 { font-size: 17px; line-height: 1.28; margin: 0; font-weight: 500; }

/* --- Industries we work with --------------------------------------------- */
.industries-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 4vw, 70px);
}
.industries-grid li {
  border-top: 1px solid var(--line); padding: 22px 0;
  display: flex; align-items: baseline; gap: 16px;
  font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.02em;
}
.industries-grid li span { font-family: var(--serif); color: var(--sand); font-size: 15px; }

@media (max-width: 980px) {
  .hosting { grid-template-columns: 1fr; gap: 40px; }
  .deliver-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .hosting__list { grid-template-columns: 1fr; }
}

/* --- Individual films (à-la-carte) ---------------------------------------- */
.films-pricing__intro { color: var(--mist); font-size: 17px; margin: 22px 0 0; max-width: 660px; }
.films-pricing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; }
.film-card {
  padding: 28px; border: 1px solid var(--line); border-radius: 16px;
  display: flex; flex-direction: column;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.film-card:hover { transform: translateY(-4px); border-color: var(--acid); }
.film-card--featured { background: var(--paper); color: var(--ink); box-shadow: 0 24px 60px rgba(6,26,40,.35); }
.film-card--featured .eyebrow { color: #5e7748; }
.film-card__format { color: var(--mist); font-size: 12px; letter-spacing: .03em; margin: 2px 0 0; }
.film-card--featured .film-card__format { color: #4e5b52; }
.film-card__price { font-family: var(--serif); font-weight: 400; font-size: 34px; margin: 16px 0 8px; }
.film-card__desc { color: var(--mist); font-size: 14px; line-height: 1.45; margin: 0; }
.film-card--featured .film-card__desc { color: #4e5b52; }
.films-pricing__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; margin-top: 36px; flex-wrap: wrap;
}
.films-pricing__note { color: var(--mist); font-size: 14px; line-height: 1.5; max-width: 700px; margin: 0; }
.films-pricing__foot .button { flex-shrink: 0; }

/* Per-area "order a film" prompt under a world's films */
.films-order {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; margin-top: 44px; padding-top: 30px;
  border-top: 1px solid var(--line); flex-wrap: wrap;
}
.films-order p { margin: 0; font-size: clamp(19px, 2vw, 27px); letter-spacing: -.02em; max-width: 520px; }
.films-order .button { flex-shrink: 0; }

@media (max-width: 900px) { .films-pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
  .films-pricing__grid { grid-template-columns: 1fr; }
  .films-pricing__foot, .films-order { flex-direction: column; align-items: flex-start; }
}

/* --- Interactive map sizing ------------------------------------------------
   The viewer is 16:9 at full section width, so on a wide monitor it became
   taller than the browser window and you had to scroll to see the bottom of the
   map. Cap its height against the viewport so the whole map is visible at once.
   The 3D camera reads the iframe's own aspect ratio, so a wider-than-16:9 box is
   fine - it just shows more landscape. */
/* Desktop: half the window height. min-height is kept low so that on a short
   window the 50% still holds rather than the minimum quietly overriding it. */
.viewer-frame { max-height: 50vh; min-height: 320px; }

@media (max-width: 980px) {
  .viewer-frame { max-height: 70vh; min-height: 360px; }
}
@media (max-width: 620px) {
  /* Portrait phones: keep it tall enough to be usable but never fill the screen
     so completely that the page around it feels unscrollable. */
  .viewer-frame { aspect-ratio: auto; height: 62vh; max-height: 62vh; min-height: 320px; }
}