/* ════════════════════════════════════════════════════════════
   RORA — shared styles (cursor · nav · overlay · transition · footer)
   ════════════════════════════════════════════════════════════ */

html {
  background: var(--c-ink);
  color: var(--c-white);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
}
/* Native cursor restored (fix #1) — only the water-drop bead trails it */

body { position: relative; }

/* Reusable type helpers ─────────────────────────────────────── */
.label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c-grey-dim);
}
.ital {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Asset placeholder ─────────────────────────────────────────── */
.ph {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(142,142,160,0.18), transparent 60%),
    linear-gradient(135deg, #2c2c3a 0%, #15151c 60%, #101015 100%);
  isolation: isolate;
}
.ph::before {
  /* subtle film grain */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
}
.ph::after {
  content: attr(data-label);
  position: absolute;
  left: 14px; bottom: 12px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}

/* ════════════════════════════════════════════════════════════
   Water-drop trailing bead (fix #1)
   Native cursor stays visible; this glassy bead lerps behind it.
   The 3D read comes from light (layered gradients + rim light/shadow),
   not zoom. Edge refraction is attempted via an SVG feDisplacementMap on
   backdrop-filter (injected by cursor.js). Support is uneven — where it's
   ignored, the CSS bead alone still reads as a dimensional glass drop.
   ════════════════════════════════════════════════════════════ */
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  will-change: transform;
  transform: translate(-50%, -50%);
  /* glassy body: specular highlight (upper-left) → denser, darker bottom edge */
  background:
    radial-gradient(40% 38% at 33% 27%, rgba(255,255,255,0.92), rgba(255,255,255,0) 62%),
    radial-gradient(125% 120% at 50% 122%, rgba(16,16,28,0.34), rgba(16,16,28,0) 56%),
    radial-gradient(100% 100% at 50% 45%, rgba(255,255,255,0.05), rgba(255,255,255,0.015) 70%);
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,0.70),   /* top inner rim highlight */
    inset 0 -7px 11px rgba(8,8,18,0.38),         /* bottom inner shadow (mass) */
    inset 0 0 0 1px rgba(255,255,255,0.10),      /* faint edge rim */
    0 9px 20px rgba(0,0,0,0.30);                 /* soft drop shadow beneath bead */
  backdrop-filter: blur(0.6px) brightness(1.06) saturate(1.05) url(#waterRefraction);
  -webkit-backdrop-filter: blur(0.6px) brightness(1.06) saturate(1.05);
  transition: width .35s var(--ease-expo), height .35s var(--ease-expo);
}
.cursor-ring::after {                            /* crisp specular glint */
  content: "";
  position: absolute; top: 17%; left: 23%;
  width: 24%; height: 17%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95), rgba(255,255,255,0) 70%);
  filter: blur(0.3px);
}
body.cur-hover .cursor-ring { width: 58px; height: 58px; }   /* subtle swell over links */
@media (hover: none), (pointer: coarse) {
  .cursor-ring { display: none; }
}

/* ════════════════════════════════════════════════════════════
   Top nav  (transparent always, floats above everything)
   ════════════════════════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad-x);
  z-index: var(--z-nav);
  background: transparent;
  mix-blend-mode: difference;        /* logo/burger stay legible on any bg */
}
/* iOS: the nav is position:fixed and spans the viewport, so its blend makes
   WebKit re-read the whole page backdrop on every scroll frame — the single
   costliest layer during the work stack. The site's surfaces are all dark, so
   plain white reads virtually identically. Chrome AND desktop Safari keep the
   blend. */
html.is-ios .nav { mix-blend-mode: normal; }
/* single uniform definition — identical on every page (fix #5).
   Image mark (Logo #2); .nav's mix-blend-mode: difference still inverts it. */
.nav__logo {
  font-family: var(--font-logo);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.37em;
  color: var(--c-white);
  display: inline-flex; align-items: center;
}
.nav__logo-img { height: 36px; width: auto; display: block; }

/* Hamburger */
.burger { width: 22px; height: 14px; position: relative; }
.burger__box { position: absolute; inset: 0; }
.burger__line {
  position: absolute; left: 0;
  width: 22px; height: 1px;
  background: var(--c-grey-mid);
  transition: background .3s, transform .4s var(--ease-io), opacity .4s var(--ease-io);
}
.burger__line:nth-child(1) { top: 0; transform-origin: center; }
.burger__line:nth-child(2) { top: 6px; }
.burger__line:nth-child(3) { top: 12px; transform-origin: center; }
.nav:hover .burger__line,
.burger:hover .burger__line { background: var(--c-white); }
/* open → ✕ */
body.nav-open .burger__line:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.nav-open .burger__line:nth-child(2) { opacity: 0; }
body.nav-open .burger__line:nth-child(3) { top: 6px; transform: rotate(-45deg); }
body.nav-open .burger__line { background: var(--c-white); }

/* ════════════════════════════════════════════════════════════
   Full-screen nav overlay
   ════════════════════════════════════════════════════════════ */
.overlay {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  visibility: hidden;
  pointer-events: none;
}
.overlay.is-open { visibility: visible; pointer-events: auto; }
.overlay__cover {
  position: absolute; inset: 0;
  background: var(--c-overlay);
  width: 0%;
  will-change: width;
}
.overlay__nav {
  position: relative;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad-x);
  padding-top: var(--nav-h);
}
.overlay__item { display: block; width: max-content; max-width: 100%; }
.overlay__mask { display: block; overflow: hidden; padding: 0.1em 0; }
.overlay__word {
  display: block;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(56px, 13vw, 180px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-white);
  transform: translateY(110%);
  transition: opacity .3s;
}
.overlay__item:hover .overlay__word { opacity: 0.55; }
.overlay__rule {
  display: block;
  height: 1px; width: 100%;
  background: rgba(255,255,255,0.25);
  transform: scaleX(0);
  transform-origin: left center;
}
.overlay__meta {
  position: absolute; left: var(--pad-x); bottom: 40px;
  display: flex; gap: 2rem;
  color: var(--c-grey-mid);
  font-size: var(--t-label);
  letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0;
}
@media (max-width: 640px) {
  .overlay__meta { flex-direction: column; gap: .4rem; }
}

/* ════════════════════════════════════════════════════════════
   Footer (consistent across pages)
   ════════════════════════════════════════════════════════════ */
.footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 2rem;
  padding: 4rem var(--pad-x) 3rem;
  background: var(--c-ink);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer__left {
  font-size: var(--t-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-grey-dim);
  align-self: start;   /* lockup top-aligns with the SITE column across breakpoints */
  /* column gap sets the lockup ↔ copyright rhythm; scales with the viewport */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.5rem, 3.5vw, 2.75rem);
}
.footer__lockup {
  width: 96px; height: auto;
  display: block;
  border-radius: 8px;   /* soften the solid-bg square tile */
}
.footer__center { display: flex; flex-direction: column; gap: .5rem; }
.footer__center .label { margin-bottom: .4rem; }
.footer__center a {
  font-family: var(--font-display);
  font-style: italic; font-weight: 300;
  font-size: 16px;
  color: var(--c-grey-mid);
  transition: color .3s;
  width: max-content;
}
.footer__center a:hover { color: var(--c-white); }
.footer__right {
  justify-self: end;
  display: flex; flex-direction: column; gap: .6rem; align-items: flex-end;
}
.footer__social {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-ui); font-weight: 500;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--c-grey-mid);
  transition: color .3s;
}
.footer__social svg { width: 13px; height: 13px; }
/* icons inherit currentColor via stroke — hover changes color ONLY, never fill,
   so shapes stay identical between rest and hover */
.footer__social:hover { color: var(--c-white); }
@media (max-width: 768px) {
  .footer { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer__right { justify-self: start; align-items: flex-start; }
  .footer__left { align-self: start; order: 3; }
}

/* ════════════════════════════════════════════════════════════
   Shared section bits
   ════════════════════════════════════════════════════════════ */
/* Inner-page hero — shared by Studio / Solutions / FAQ. Top padding clears the
   fixed nav at every viewport so the title never collides with the RORA mark. */
.page-hero {
  min-height: 70svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--nav-h) + clamp(2.5rem, 6vh, 5rem)) var(--pad-x) clamp(3rem, 8vh, 6rem);
  background: var(--c-primary);
}
/* Studio: ~90svh so the next (black) section peeks — a scroll affordance */
body[data-page="studio"] .page-hero { min-height: 90svh; }
.page-hero__label { margin-bottom: 1.4rem; color: var(--c-grey-mid); }
.page-hero__title {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(48px, 9vw, 150px); line-height: 0.95;
}
.page-hero__sub {
  margin-top: 1.6rem; max-width: 46ch;
  color: var(--c-grey-mid); font-size: var(--t-sm);
}

.section { padding: var(--section) var(--pad-x); }
.eyebrow { margin-bottom: 1.5rem; }
.reveal { will-change: transform, opacity; }

/* Solutions-direct button — rises over the held 4th project with a rounded dome
   top, identical to the Home hero → filler transition. z-index keeps it above
   the work-rows as it sweeps up. Compact band (no tall empty space above link). */
.solutions-direct {
  position: relative;
  z-index: 2;
  display: grid; place-items: center;
  padding: clamp(7rem, 16vh, 13rem) var(--pad-x);
  background: var(--c-primary);
  text-align: center;
}
.solutions-direct::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;                 /* flat bottom flush on the section's top edge */
  transform: translateX(-50%);
  width: 150vw;
  height: 20vw;
  background: var(--c-primary); /* same color as the section */
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;   /* same convex dome as the filler */
  pointer-events: none;
}
@media (max-width: 768px) {
  /* same as .filler::before — full width so it cannot overflow the viewport
     and force iOS to zoom the page out (see css/home.css) */
  .solutions-direct::before {
    width: 100%; left: 0; transform: none;
    height: clamp(32px, 9vw, 56px);
  }
}
/* arrow built from the type system: baseline-aligned, em-scaled, stroke
   weight tuned to the light display face (fix #4) */
.sol-direct__link {
  display: inline-flex; align-items: baseline; gap: 0.22em;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(36px, 7vw, 96px);
  color: var(--c-white);
  opacity: 1; transition: opacity .4s var(--ease-expo);
}
.sol-direct__link:hover { opacity: 0.55; }
@media (min-width: 1024px) {
  .sol-direct__link { transform: translateY(-32px); }   /* desktop-only lift */
}
.sol-arrow {
  width: 0.6em; height: 0.6em;
  align-self: center;
  transform: translateY(-0.02em);
  overflow: visible;
  transition: transform .4s var(--ease-expo);
}
.sol-direct__link:hover .sol-arrow { transform: translate(0.06em, -0.08em); }