/* ==========================================================================
   v2 layer — motion, 3D hero, cinematic bands. Loaded after site.css, so it
   restyles shared pieces (header, buttons, footer) and adds new ones.
   ========================================================================== */

@view-transition { navigation: auto; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { overflow-x: clip; }

/* film grain */
body::after {
  content: ""; position: fixed; inset: -50%; z-index: 90; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity: .065; mix-blend-mode: overlay;
}
::selection { background: var(--accent); color: var(--accent-ink); }
.s, em.s { font-family: var(--serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: -.01em; color: var(--accent); }

h1 { font-size: clamp(2.8rem, 8vw, 6.4rem); line-height: .9; }
h2 { font-size: clamp(2.1rem, 5vw, 4rem); line-height: .95; }
.sec-head { border-top-width: 1px; border-top-color: var(--rule); padding-top: 1rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); }
.sec-head h2 { max-width: 20ch; }

/* ---------- buttons: pill, fill wipes up on hover ---------- */

.btn {
  --bx: 0px; --by: 0px;
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 999px; min-height: 3.1rem; padding: .8rem 1.4rem;
  transform: translate(var(--bx), var(--by));
  transition: color .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), transform .45s var(--ease);
}
.btn:hover { transform: translate(var(--bx), var(--by)); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn-primary:hover { background: var(--accent); border-color: var(--ink); }
.btn-primary:hover::before { transform: none; }
.btn-ghost { border-color: rgba(231,238,236,.25); color: var(--ink); background: rgba(4,10,9,.35); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--ink); background: rgba(231,238,236,.06); }
.btn-lg { min-height: 3.6rem; }

/* ---------- header ---------- */

.site-header { transition: background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease); }
.site-header.hide { transform: translateY(-100%); }
.nav a { position: relative; background: none !important; }
.nav a::after { content: ""; position: absolute; left: .62rem; right: .62rem; bottom: .25rem; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.header-phone { border-radius: 999px; padding: .5rem .85rem; }

/* home: the header floats over the 3D until you scroll */
.home .site-header { position: fixed; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.home .site-header.scrolled { background: rgba(7,16,15,.74); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: var(--rule-soft); }

@media (max-width: 1040px) {
  .nav { background: var(--ground); }
}

/* ---------- 3D hero ---------- */

.hero3d { position: relative; height: 420vh; background: var(--deep); }
.hero3d-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.hero3d-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(80% 60% at 20% 0%, rgba(224,160,100,.22), transparent 60%),
    radial-gradient(70% 60% at 85% 10%, rgba(98,220,200,.10), transparent 70%),
    linear-gradient(180deg, #1B2422 0%, #0A1413 45%, #040A09 100%);
}
.hero3d-fallback { position: absolute; inset: 0; transition: opacity 1.2s var(--ease); }
.hero3d-fallback picture, .hero3d-fallback img { width: 100%; height: 100%; object-fit: cover; }
.hero3d-fallback::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,10,9,.88) 0%, rgba(4,10,9,.5) 50%, rgba(4,10,9,.1) 80%), linear-gradient(0deg, var(--deep) 0%, transparent 35%); }
.hero3d.gl-on .hero3d-fallback { opacity: 0; visibility: hidden; transition: opacity 1.2s var(--ease), visibility 0s 1.2s; }
.hero3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero3d.gl-on canvas { opacity: 1; }

.hero3d-copy { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; padding-top: 6rem; padding-bottom: 3rem; pointer-events: none; }
.hero3d-copy > * { pointer-events: auto; max-width: 42rem; }
.hero3d h1 { color: var(--deep-ink); font-size: clamp(2.6rem, 5.2vw, 5.4rem); line-height: .9; }
.hero3d h1 em { font-style: normal; color: var(--accent); display: block; }
.hero3d .kicker { color: var(--ochre); }
.hero3d .lede { color: var(--deep-soft); max-width: 40ch; }
.hero3d .hero-answers { max-width: 40rem; background: var(--deep-rule); }
.hero3d .hero-answers div { background: rgba(10,20,19,.82); backdrop-filter: blur(6px); }

/* HUD: fed by the 3D loop */
.well-hud {
  position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1.1rem; opacity: 0; pointer-events: none; width: min(24rem, 42vw);
}
.well-hud > * { pointer-events: auto; }
.hud-k { font-family: var(--mono); font-size: .7rem; letter-spacing: .01em; color: var(--deep-soft); }
.hud-metres { font-family: var(--display); font-weight: 700; font-size: clamp(5rem, 13vw, 11rem); line-height: .82; color: var(--deep-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.hud-metres small { font-size: .32em; color: var(--deep-soft); margin-left: .12em; }
.hud-price { font-family: var(--display); font-weight: 600; font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--ochre); font-variant-numeric: tabular-nums; line-height: 1; }
.hud-price small { font-size: .55em; color: var(--deep-soft); }
.hud-layer { font-family: var(--mono); font-size: .82rem; letter-spacing: .01em; color: var(--deep-ink); padding-top: .8rem; border-top: 1px solid var(--deep-rule); min-height: 2.6em; }
.hud-status { font-family: var(--mono); font-size: .72rem; letter-spacing: .01em; color: var(--deep-soft); display: flex; align-items: center; gap: .55rem; }
.hud-status i { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ochre); box-shadow: 0 0 0 5px rgba(224,160,100,.16); animation: pulse 1.1s ease-in-out infinite; }
.well-hud .st-water { display: none; }
.well-hud.struck .st-drill { display: none; }
.well-hud.struck .st-water { display: inline; color: var(--accent); }
.well-hud.struck .hud-status i { background: var(--accent); box-shadow: 0 0 0 6px rgba(98,220,200,.2); }
.well-hud.struck .hud-metres { color: var(--accent); }
@keyframes pulse { 50% { transform: scale(.7); opacity: .6; } }

.terrain { display: flex; flex-wrap: wrap; gap: .4rem; }
.terrain button {
  font: 500 .7rem var(--mono); letter-spacing: .01em;
  color: var(--deep-soft); background: rgba(10,20,19,.7); border: 1px solid var(--deep-rule);
  border-radius: 999px; padding: .55rem .8rem; min-height: 2.6rem; cursor: pointer; transition: .3s var(--ease);
}
.terrain button:hover { color: var(--deep-ink); border-color: var(--deep-soft); }
.terrain button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.terrain-note { font-size: .82rem; color: var(--deep-soft); font-family: var(--mono); letter-spacing: .01em; }

.hero3d-caption {
  position: absolute; left: 50%; bottom: 7vh; z-index: 3; transform: translateX(-50%);
  font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.8rem);
  text-align: center; opacity: 0; width: min(92vw, 44rem); line-height: 1; color: var(--deep-ink);
}
.scroll-hint { position: absolute; right: var(--gutter); bottom: 2rem; z-index: 3; font-family: var(--mono); font-size: .78rem; letter-spacing: .01em; color: var(--deep-soft); display: flex; align-items: center; gap: .6rem; }
.scroll-hint i { width: 1px; height: 2.4rem; background: linear-gradient(var(--deep-soft), transparent); animation: drip 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

@media (max-width: 760px) {
  .hero3d { height: 300vh; }
  .hero3d-copy { justify-content: flex-start; padding-top: 5.8rem; gap: .9rem; }
  .hero3d h1 { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .hero3d .hero-answers { display: none; }
  .hero3d .lede { font-size: 1rem; }
  .scroll-hint { display: none; }
  .well-hud { top: 4.9rem; transform: none; width: auto; right: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: .55rem 1rem; }
  .well-hud .terrain { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .well-hud .terrain::-webkit-scrollbar { display: none; }
  .terrain button { flex: none; min-height: 2.5rem; padding: .45rem .75rem; font-size: .78rem; }
  .hud-metres { font-size: 4.4rem; }
  .hud-price { font-size: 1.35rem; }
  .hud-layer, .hud-status { grid-column: 1 / -1; }
  .hud-layer { min-height: 0; font-size: .7rem; padding-top: .5rem; }
  .terrain-note { display: none; }
  /* dark scrim behind the HUD so it never sits on the bright layers */
  .hero3d-stage::before { content: ""; position: absolute; inset: 0 0 auto; height: 48%; z-index: 2; pointer-events: none; opacity: var(--hudbg, 0); background: linear-gradient(180deg, rgba(4,10,9,.96) 0%, rgba(4,10,9,.85) 60%, rgba(4,10,9,0) 100%); }
  .hero3d-caption { bottom: 6.5rem; font-size: 1.5rem; }
  .hero3d-fallback::after { background: linear-gradient(180deg, rgba(4,10,9,.9) 0%, rgba(4,10,9,.55) 50%, rgba(4,10,9,.2) 75%, var(--deep) 100%); }
}

/* ---------- manifesto ---------- */

.manifesto { font-family: var(--display); font-weight: 600; font-size: clamp(2rem, 5.2vw, 4.8rem); line-height: .98; letter-spacing: .005em; max-width: 20ch; color: var(--ink); }
.manifesto .w { opacity: .13; transition: opacity .2s linear; }
.manifesto .s { font-size: 1.06em; }

/* ---------- cinematic video band ---------- */

.cine { position: relative; height: 170vh; }
.cine-stage { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.cine-media { position: absolute; inset: 0; clip-path: inset(var(--ci, 14%) var(--ci, 14%) round 10px); will-change: clip-path; }
.cine-media video, .cine-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--cs, 1.18)); }
.cine-media video { filter: brightness(.62) saturate(.95); }
.cine-media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 55% at 50% 50%, rgba(4,10,9,.55), rgba(4,10,9,.3) 70%, rgba(4,10,9,.75)); }
.cine-copy { position: relative; z-index: 2; text-align: center; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 1.1rem; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.cine-copy h2 { font-size: clamp(2.6rem, 8vw, 7.4rem); max-width: 14ch; color: var(--deep-ink); }
.cine-copy p { color: var(--deep-ink); max-width: 44ch; font-size: 1.12rem; }

/* ---------- marquee of places ---------- */

.marquee { overflow: hidden; border-block: 1px solid var(--rule); padding-block: 1rem; }
.marquee + .marquee { border-top: 0; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee a { font-family: var(--display); font-weight: 700; font-size: clamp(2.2rem, 6vw, 5.2rem); line-height: 1; white-space: nowrap; text-decoration: none; color: var(--ink); padding-inline: .45em; display: inline-flex; align-items: baseline; gap: .35em; transition: color .3s; }
.marquee a small { font-family: var(--mono); font-weight: 500; font-size: .22em; letter-spacing: .01em; color: var(--ink-faint); }
.marquee a.deep { -webkit-text-stroke: 1px var(--ink-faint); color: transparent; }
.marquee a:hover { color: var(--accent); -webkit-text-stroke: 0; }

/* ---------- process: drawn line (works with the existing .steps markup) ---------- */

.steps { position: relative; }
.steps > .line { position: absolute; left: 1.4rem; top: .5rem; bottom: .5rem; width: 1px; background: var(--accent); transform-origin: top; transform: scaleY(0); z-index: 1; }
.steps li.on .s-n { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- reveals ---------- */

.rv { opacity: 0; transform: translateY(26px); }
.rv.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.split .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split .ln > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.split.in .ln > span { transform: none; }

/* ---------- footer ---------- */

.footer-word { font-family: var(--display); font-weight: 700; font-size: clamp(3.4rem, 15vw, 15rem); line-height: .8; color: var(--surface); margin-top: 3rem; white-space: nowrap; overflow: hidden; user-select: none; }
.footer-word span { color: var(--accent-sunk); }

/* ---------- mobile call bar: pills ---------- */
@media (max-width: 760px) {
  .callbar { left: .6rem; right: .6rem; bottom: .6rem; gap: .5rem; background: none; border: 0; }
  .callbar a { border-radius: 999px; }
}

@media (prefers-reduced-motion: reduce) {
  .rv, .split .ln > span { opacity: 1 !important; transform: none !important; }
  .manifesto .w { opacity: 1 !important; }
  .hero3d, .cine { height: auto; }
  .hero3d-stage, .cine-stage { position: relative; height: auto; min-height: 100svh; }
  .cine-media { clip-path: none; }
  .cine-media video, .cine-media img { transform: none; }
}

/* ==========================================================================
   Mobile. The desktop layout stacked into one column made the home page
   ~20 screens long; on a phone the long runs become swipe rows instead.
   ========================================================================== */

@media (max-width: 640px) {
  .band { padding-block: 3.25rem; }
  .sec-head { margin-bottom: 1.4rem; }
  h2 { font-size: clamp(1.9rem, 8.4vw, 2.5rem); }
  .lede { font-size: 1.02rem; }

  /* swipe rows: videos and gallery */
  .vgrid, .gallery {
    display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory;
    background: none; border: 0; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) .4rem;
  }
  .vgrid::-webkit-scrollbar, .gallery::-webkit-scrollbar { display: none; }
  .vcard { flex: none; width: 64vw; scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; }
  .vcard-meta { padding: .8rem .2rem 0; }
  .gallery figure { flex: none; width: 78vw; height: 17rem; scroll-snap-align: start; border-radius: var(--radius); }
  .gallery .g-wide, .gallery .g-big, .gallery .g-tall { grid-column: auto; grid-row: auto; }
  .swipe-hint { display: flex; }

  /* the marquee already lists every municipality; the grid would double it */
  .home .regions-list { display: none; }
  .marquee a { font-size: 2.3rem; }

  /* hero: less copy weight so the model shows */
  .hero3d .btn-row { gap: .5rem; }
  .hero3d .btn-lg { min-height: 3.1rem; padding: .7rem 1.15rem; font-size: 1rem; }
  .hero3d .kicker { font-size: 1.15rem; }

  .cine { height: 140vh; }
  .cine-copy h2 { font-size: 2.6rem; }
  .cine-copy p { font-size: 1rem; }

  .footer-word { margin-top: 2rem; }
}

.swipe-hint { display: none; align-items: center; gap: .5rem; margin-top: .9rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .01em; color: var(--ink-faint); }
.band-deep .swipe-hint { color: var(--deep-soft); }
.swipe-hint::after { content: ""; flex: 0 0 2rem; height: 1px; background: currentColor; }

/* gallery: pack cells so a span never leaves a hole */
@media (min-width: 641px) { .gallery { grid-auto-flow: dense; } }
@media (min-width: 641px) and (max-width: 900px) {
  /* 2 columns: 16 cells don't map cleanly, so let tall cells be plain */
  .gallery .g-tall { grid-row: auto; }
}

/* 3D will run (decided in <head>): never paint the photo, fade the model
   in from the dark sky instead of swapping one hero for another. */
.gl .hero3d-fallback { display: none; }
.hero3d canvas { transition-duration: .8s; }

/* Closing line. Two deliberate lines instead of one wrapped sentence, no
   box: a soft dark glow behind the words keeps them legible over the pale
   strata without a hard panel. Offset right on desktop so it sits over the
   model and clear of the HUD. */
.hero3d-caption {
  left: 60%; bottom: 9vh; width: min(34rem, 44vw); max-width: none;
  padding: 0; background: none; border: 0; box-shadow: none; backdrop-filter: none;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  text-shadow: 0 2px 18px rgba(4, 10, 9, .9), 0 0 2px rgba(4, 10, 9, .8);
  isolation: isolate;
}
.hero3d-caption::before {
  content: ""; position: absolute; inset: -55% -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(4, 10, 9, .82), rgba(4, 10, 9, .55) 55%, rgba(4, 10, 9, 0));
}
.hero3d-caption .c1 { font-size: clamp(1.05rem, 1.55vw, 1.45rem); letter-spacing: .01em; color: var(--deep-ink); font-weight: 600; }
.hero3d-caption .c2 { display: block; font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: .95; color: var(--accent); letter-spacing: -.02em; }
@media (max-width: 760px) {
  .hero3d-caption { left: 50%; width: calc(100vw - 2 * var(--gutter)); bottom: 6.2rem; }
  .hero3d-caption .c1 { font-size: .9rem; letter-spacing: .01em; }
  .hero3d-caption .c2 { font-size: 2.6rem; }
}

/* Footer word sized to its container, not the viewport: "KopanjeBunara" in
   Bricolage Grotesque 800 at -.055em is 6.1em wide, so 15.9cqi fills ~97%
   of the column on any screen instead of clipping on wide monitors. */
.site-footer .wrap { container-type: inline-size; }
.footer-word { font-size: clamp(2.4rem, 12vw, 13rem); overflow: visible; }
@supports (font-size: 1cqi) { .footer-word { font-size: 15.9cqi; } }

/* ==========================================================================
   Typography v3. Sentence case everywhere, nothing set in capitals.
   Bricolage Grotesque for headings (its optical-size axis gives character
   at display sizes and stays clean small), Geist for reading and UI, Geist
   Mono for numbers and small labels, Instrument Serif italic only for the
   odd emphasised word. Emphasis is colour or italic, never capitals.
   ========================================================================== */

html { font-size: 100%; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.65; font-feature-settings: "ss01", "cv11"; letter-spacing: -.005em; }
p { text-wrap: pretty; }

h1, h2, h3, h4 {
  font-family: var(--display); font-optical-sizing: auto;
  text-transform: none; letter-spacing: -.035em; text-wrap: balance; color: var(--ink);
}
h1 { font-weight: 700; font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; }
h2 { font-weight: 650; font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.06; }
h3 { font-weight: 600; font-size: clamp(1.18rem, 1.7vw, 1.42rem); line-height: 1.2; letter-spacing: -.02em; }
h4 { font-weight: 600; font-size: 1.1rem; letter-spacing: -.015em; }

.lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink-soft); letter-spacing: -.01em; }
.prose p, .card p, .call p, .faq .a { line-height: 1.7; }
.kicker { font-family: var(--display); font-weight: 500; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: -.02em; line-height: 1.3; }

/* small labels: quiet mono, no tracking games */
.eyebrow, .sec-head .tag, .k, .card-num, .hud-k, .hud-status, .swipe-hint, .terrain-note,
.hero-answers .l, .strata-scale, .strata-note, .footer-h, .footer-bottom, .crumbs, .r-d, .r-t {
  font-family: var(--mono); letter-spacing: 0; text-transform: none;
}
.eyebrow { font-size: .8rem; font-weight: 500; color: var(--accent); }
.sec-head .tag { font-size: .8rem; color: var(--ink-faint); }
.k, .card-num { font-size: .78rem; font-weight: 500; }
.hero-answers .l { font-family: var(--body); font-size: .86rem; line-height: 1.4; color: var(--deep-soft); }
.hero-answers .n { font-family: var(--display); font-weight: 700; letter-spacing: -.035em; }

/* UI */
.btn { font-family: var(--body); font-weight: 600; font-size: 1rem; letter-spacing: -.01em; text-transform: none; }
.btn-lg { font-size: 1.06rem; }
.nav a { font-family: var(--body); font-weight: 500; font-size: .95rem; letter-spacing: -.005em; text-transform: none; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: -.035em; text-transform: none; }
.header-phone { font-family: var(--mono); font-size: .88rem; }
.faq summary { font-family: var(--display); font-weight: 600; font-size: clamp(1.08rem, 1.5vw, 1.25rem); letter-spacing: -.02em; text-transform: none; }

/* hero + HUD */
.hero3d h1 { font-size: clamp(2.6rem, 5.2vw, 5rem); line-height: .98; letter-spacing: -.045em; }
.hero3d .kicker { color: var(--ochre); }
.hud-metres { font-family: var(--body); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.hud-metres small { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.hud-price { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hud-k, .hud-status { font-size: .8rem; }
.hud-layer { font-family: var(--body); font-weight: 500; font-size: .98rem; letter-spacing: -.01em; }
.terrain button { font-family: var(--body); font-size: .86rem; font-weight: 500; letter-spacing: -.005em; }

/* the manifesto: big, readable, emphasis by colour and italic */
.manifesto {
  font-family: var(--display); font-weight: 600; font-size: clamp(1.9rem, 4.1vw, 3.6rem);
  line-height: 1.12; letter-spacing: -.035em; max-width: 24ch; text-transform: none;
}
.manifesto .hl { color: var(--accent); }
.manifesto .s { color: var(--ochre); font-size: 1.06em; letter-spacing: -.01em; }

.hero3d-caption .c1 { font-family: var(--body); font-weight: 500; font-size: clamp(1.02rem, 1.4vw, 1.3rem); letter-spacing: -.01em; }
.cine-copy h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.marquee a { font-family: var(--display); font-weight: 700; letter-spacing: -.04em; text-transform: none; }
.marquee a small { font-family: var(--mono); font-weight: 400; font-size: .24em; letter-spacing: 0; }
.footer-word { font-family: var(--display); font-weight: 800; letter-spacing: -.055em; text-transform: none; }

@media (max-width: 640px) {
  h1 { font-size: clamp(2.3rem, 10vw, 3rem); }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.2rem); }
  .hero3d h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); }
  .manifesto { font-size: 1.9rem; }
  .marquee a { font-size: 2.1rem; }
}

/* Bricolage has no italic: an <em> in a heading would be a synthetic slant.
   Headline emphasis is colour instead; .s keeps the real serif italic. */
h1 em:not(.s), h2 em:not(.s), h3 em:not(.s) { font-style: normal; color: var(--accent); }
.s { font-synthesis: none; }

/* readout: three figures must not leave a hole in a two-column grid */
@media (max-width: 640px) {
  .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* hero copy can sit over the rig mast on phones */
.hero3d-copy { text-shadow: 0 1px 14px rgba(4, 10, 9, .85); }

/* ==========================================================================
   Inquiry form (the only contact channel)
   ========================================================================== */

[hidden] { display: none !important; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.upit { display: flex; flex-direction: column; gap: 1.25rem; }
.upit fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.upit legend { font-family: var(--display); font-weight: 650; font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.1; padding: 0; margin-bottom: .35rem; color: var(--ink); }
/* without JS every step shows, separated */
.upit:not(.is-stepped) fieldset + fieldset { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.upit:not(.is-stepped) .upit-progress, .upit:not(.is-stepped) .upit-count,
.upit:not(.is-stepped) [data-next], .upit:not(.is-stepped) [data-prev] { display: none; }

.upit .field { display: flex; flex-direction: column; gap: .4rem; }
.upit label { font-family: var(--body); font-size: .92rem; font-weight: 500; color: var(--ink-soft); }
.upit input[type="text"], .upit input[type="tel"], .upit input[type="email"], .upit select, .upit textarea {
  width: 100%; min-height: 3.1rem; padding: .75rem .9rem; font: 400 1rem var(--body); color: var(--ink);
  background: var(--ground); border: 1px solid var(--rule); border-radius: 10px; transition: border-color .25s, box-shadow .25s;
}
.upit textarea { min-height: 6rem; resize: vertical; }
.upit input:focus, .upit select:focus, .upit textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(98, 220, 200, .18); }
.upit .hint { font-size: .84rem; color: var(--ink-faint); }
.upit .q { font-size: .95rem; font-weight: 500; color: var(--ink); margin-top: .25rem; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

/* big tap targets instead of tiny radios */
.choice { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: .5rem; }
.opt { position: relative; cursor: pointer; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opt span {
  display: flex; align-items: center; min-height: 3.1rem; height: 100%; padding: .7rem .9rem;
  border: 1px solid var(--rule); border-radius: 10px; background: var(--ground);
  font: 500 .95rem var(--body); color: var(--ink-soft); line-height: 1.25; transition: .2s var(--ease);
}
.opt:hover span { border-color: var(--ink-faint); color: var(--ink); }
.opt input:checked + span { border-color: var(--accent); background: var(--accent-sunk); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.consent input { width: 1.25rem; height: 1.25rem; margin-top: .1rem; accent-color: #62DCC8; flex: none; }

.upit-progress { height: 3px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.upit-progress i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(.2); transition: transform .5s var(--ease); }
.upit-count { font-family: var(--mono); font-size: .8rem; color: var(--ink-faint); margin-top: -.6rem; }
.upit-nav { display: flex; gap: .6rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.upit-nav [data-next], .upit-nav [data-submit] { margin-left: auto; }
.upit-error { color: var(--ochre); font-size: .92rem; font-weight: 500; }
.estimate { padding: .85rem 1rem; border-radius: 10px; background: var(--accent-sunk); color: var(--ink); font-size: .95rem; border: 1px solid rgba(98, 220, 200, .25); }
.upit-done { display: flex; flex-direction: column; gap: 1rem; padding: 1rem 0; outline: none; }
.upit-panel { scroll-margin-top: 6rem; }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.ticks li { display: grid; grid-template-columns: 1.2rem 1fr; gap: .6rem; align-items: start; color: var(--ink-soft); line-height: 1.5; }
.band-deep .ticks li { color: var(--deep-ink); }
.ticks svg { width: 1.1rem; height: 1.1rem; color: var(--accent); margin-top: .2rem; }

.header-upit { min-height: 2.6rem; padding: .5rem 1.05rem; font-size: .92rem; }
.callbar .c-viber { font-family: var(--body); }

@media (max-width: 640px) {
  .row2 { grid-template-columns: 1fr; }
  .choice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .choice > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .upit-nav .btn-lg { flex: 1; justify-content: center; }
}

/* on phones the form comes first; the reasons follow it */
@media (max-width: 860px) { .upit-panel { order: -1; } }