/* =============================================================================
   furnisystems.ro — flagship v5 — site.css
   One design system, reused verbatim by interior pages.
   Order: fonts · tokens · base · type · components · header · acts 1→8 ·
   footer · responsive · reduced motion.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */
/* Display: Instrument Serif (regular + italic), latin + latin-ext so ș ț ă î â
   render in every weight used. Text: Inter variable (400–500). Archivo is
   kept on disk as fallback letter A; it is not loaded by this page. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("assets/fonts/archivo-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;
  src:url(assets/fonts/instrument-serif-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* Metric-matched local fallbacks: the page lays out at the same measure before
   the woff2 arrives, so there is no shift when it lands (fonts are preloaded). */
@font-face{font-family:"Instrument Serif Fallback";src:local("Georgia"),local("Times New Roman");
  size-adjust:88%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Helvetica Neue"),local("Arial");
  size-adjust:100%;ascent-override:96%;descent-override:24%;line-gap-override:0%}

/* ----------------------------------------------------------------- tokens */
:root{
  /* palette — LOCKED */
  --bg:#0B0C0F; --surface:#15171C; --line:#2A2C31; --metal:#8A8D93; --metal-2:#C9CBD1; --ink:#E8E9EC;
  --gold:#FFB25B; --blue:#8FB6E6;
  --gold-soft:rgba(255,178,91,.14); --blue-soft:rgba(143,182,230,.14);
  --hair:rgba(232,233,236,.12); --hair-strong:rgba(232,233,236,.26);

  /* type */
  --f-display:"Archivo","Inter","Helvetica Neue",Arial,sans-serif;  /* wordmark A — Michael 2026-09-03 */
  --f-text:"Inter","Inter Fallback","Helvetica Neue",Arial,system-ui,sans-serif;
  --t-h1:clamp(40px, 1.5rem + 4vw, 82px);             /* hero, Archivo 300: two lines at 1440 (was 128 for the serif) */
  --t-h2:clamp(36px, 1.5rem + 2.75vw, 72px);           /* section: 64–72 / 36 */
  --t-h3:clamp(26px, 1.2rem + 1.4vw, 40px);
  --t-num:clamp(64px, 3rem + 6vw, 150px);              /* Spur numbers */
  --t-body:18px; --t-small:15px; --t-eyebrow:12px;

  /* rhythm */
  --gutter:clamp(20px, 4.2vw, 64px);
  --maxw:1440px;
  --gap-s:clamp(88px, 20vh, 208px);                     /* RHYTHM unit: last content of a section → first content of the next = 1/5 screen (fora) */
  --gap-m:calc(var(--gap-s) * .5);                      /* head → body inside a section, major inner blocks */
  --sp-section:var(--gap-s);                            /* section padding token = the unit (rhythm.js equalises the boundaries) */
  --sp-block:clamp(28px, 4vw, 56px);
  --hdr-h:72px;
  --r-pill:999px;
  --r-card:22px;                                        /* Apple-style corners: every image, card, plate (round 3) */
  --r-inner:14px;                                       /* an image inset inside a card */
  --r-field:8px;                                        /* inputs, small notes */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-reveal:cubic-bezier(.16,.84,.3,1);            /* blur→sharp reveals: fast in, long settle */
  --rise:40px;                                          /* Poct's reveal travel: translate 0 2.5rem */
}
@media (max-width:860px){ :root{ --t-body:17px; --hdr-h:60px; } }

/* ------------------------------------------------------------------- base */
*,*::before,*::after{ box-sizing:border-box; }
html{ background:var(--bg); color-scheme:dark; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:400 var(--t-body)/1.55 var(--f-text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
::selection{ background:rgba(255,178,91,.35); }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.rule{ height:1px; background:var(--hair); border:0; margin:0; }

/* ------------------------------------------------------------------- type */
/* Display title — serif, tight, italic <em> for the key word (L'Agence). */
.display{
  font-family:var(--f-display); font-weight:300;
  letter-spacing:-.025em; line-height:.98; text-wrap:balance;
  color:var(--ink);
}
.display em{ font-style:normal; font-weight:400; color:var(--gold); }  /* Archivo has no italic: key word carries gold + a step of weight */
.display em.is-blue{ color:var(--blue); }
.display--h1{ font-size:var(--t-h1); line-height:.94; letter-spacing:-.02em; }
.display--h2{ font-size:var(--t-h2); }
.display--h3{ font-size:var(--t-h3); line-height:1.06; }

/* Eyebrow — 12px, uppercase, tracked, metal. */
.eyebrow{
  display:block; font:500 var(--t-eyebrow)/1 var(--f-text);
  letter-spacing:.1em; text-transform:uppercase; color:var(--metal);
}
.eyebrow--gold{ color:var(--gold); }
.eyebrow--blue{ color:var(--blue); }
.eyebrow + .display{ margin-top:22px; }

.lede{ font-size:var(--t-body); line-height:1.55; color:var(--metal-2); max-width:44ch; }
.small{ font-size:var(--t-small); color:var(--metal); }
.num{ font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------- components */
/* Pill button. Primary = gold on dark with ink #0B0C0F; secondary = hairline. */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 26px; border-radius:var(--r-pill);
  font:500 15px/1 var(--f-text); letter-spacing:.005em; white-space:nowrap;
  background:var(--gold); color:#0B0C0F;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.pill:hover{ background:#FFC17A; }
.pill:active{ transform:translateY(1px); }
.pill--ghost{ background:transparent; color:var(--ink); border:1px solid var(--hair-strong); }
.pill--ghost:hover{ background:rgba(232,233,236,.06); border-color:var(--metal); }
.pill--sm{ min-height:40px; padding:0 18px; font-size:14px; }
.pill .arr{ display:inline-block; transition:transform .2s var(--ease); }
.pill:hover .arr{ transform:translateX(3px); }

/* Text link with arrow. */
.link{ display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--ink); min-height:44px;
  box-shadow:inset 0 -1px 0 var(--hair-strong); }
.link:hover{ box-shadow:inset 0 -1px 0 var(--gold); }
.link--gold{ color:var(--gold); box-shadow:inset 0 -1px 0 rgba(255,178,91,.35); }

/* Hairline card (fora.so language): thin border, dark surface, calm padding. */
.card{
  position:relative; border:1px solid var(--hair); border-radius:var(--r-card);
  background:var(--surface); padding:clamp(22px, 2.4vw, 34px);
  transition:border-color .22s var(--ease);
}
.card:hover{ border-color:var(--hair-strong); }
.card--flat{ background:transparent; }
.card__k{ display:block; font:500 12px/1 var(--f-text); letter-spacing:.1em; color:var(--metal); font-variant-numeric:tabular-nums; }
.card__t{ font-family:var(--f-display); font-weight:300; font-size:clamp(24px, 1.2rem + 1vw, 32px); line-height:1.08; letter-spacing:-.01em; margin-top:14px; }
.card__p{ margin-top:12px; color:var(--metal-2); font-size:16px; line-height:1.5; }
.card__price{ display:block; margin-top:16px; font-size:14px; color:var(--metal); }

/* Placeholder plate: a --surface field with a soft light, never an image yet. */
.plate{
  position:relative; overflow:hidden; border-radius:var(--r-card);
  background:
    radial-gradient(110% 80% at 10% 0%, rgba(255,178,91,.38), rgba(255,178,91,0) 60%),
    linear-gradient(160deg, #1B1D23 0%, var(--surface) 60%, #10121600 100%), var(--surface);
  border:1px solid var(--hair);
}
.plate--blue{ background:
    radial-gradient(120% 90% at 92% 100%, rgba(143,182,230,.18), rgba(143,182,230,0) 55%),
    linear-gradient(160deg, #15181F 0%, var(--surface) 60%), var(--surface); }
.plate__tag{ position:absolute; left:16px; bottom:14px; font:500 11px/1 var(--f-text); letter-spacing:.1em; text-transform:uppercase; color:var(--metal); opacity:.7; }

/* Number tile (Spur): huge serif number, hairline on the left, one caption. */
.tile{ padding:clamp(20px, 2.2vw, 36px) clamp(18px, 2vw, 32px) clamp(24px, 2.6vw, 44px); border-left:1px solid var(--hair); }
.tile__n{ font-family:var(--f-display); font-weight:300; font-size:var(--t-num); line-height:.9; letter-spacing:-.03em; color:var(--ink); font-variant-numeric:tabular-nums; }
.tile__n i{ font-style:normal; color:var(--metal); }
.tile__n em{ font-style:normal; font-weight:400; color:var(--gold); }
.tile__c{ margin-top:22px; font-size:16px; line-height:1.5; color:var(--metal-2); max-width:24ch; }

/* Numbered step: hairline top, number in metal, title + body. */
.step{ display:grid; grid-template-columns:56px 1fr; gap:0 18px; padding:26px 0; border-top:1px solid var(--hair); }
.step:last-child{ border-bottom:1px solid var(--hair); }
.step__n{ font:500 13px/1.6 var(--f-text); letter-spacing:.08em; color:var(--metal); font-variant-numeric:tabular-nums; padding-top:6px; }
.step__t{ font-family:var(--f-display); font-weight:300; font-size:clamp(24px, 1.1rem + 1.1vw, 34px); line-height:1.1; letter-spacing:-.01em; color:var(--ink); }
.step__p{ margin-top:10px; color:var(--metal-2); font-size:16px; line-height:1.55; max-width:52ch; }

/* Forms */
.field{ display:grid; gap:8px; }
.field label{ font:500 12px/1 var(--f-text); letter-spacing:.08em; text-transform:uppercase; color:var(--metal); }
.field input,.field textarea,.field select{
  width:100%; min-height:48px; padding:12px 14px; border-radius:var(--r-field);
  background:var(--bg); border:1px solid var(--hair-strong); color:var(--ink);
  font:400 16px/1.4 var(--f-text); outline:none; transition:border-color .18s var(--ease);
}
.field textarea{ min-height:112px; resize:vertical; }
.field input:focus,.field textarea:focus{ border-color:var(--gold); }
.field.is-bad input,.field.is-bad textarea{ border-color:#E07B6A; }
.field__err{ font-size:13px; color:#E9927F; min-height:1em; }

/* Section rhythm */
.section{ padding-block:var(--sp-section); }
[data-rhythm]{ position:relative; }                       /* paint order = DOM order, so a section pulled up by rhythm.js covers the dead space of the pinned stage before it */
.section--tight{ padding-block:calc(var(--sp-section) * .6); }
.section__head{ max-width:1100px; }
.section__head .lede{ margin-top:22px; }

/* --------------------------------------------------------------- pinning */
/* An act is a tall track holding one sticky stage; acts.js writes --p (0→1). */
.act{ position:relative; --p:0; }
.act__stage{ position:sticky; top:0; height:100lvh; overflow:hidden; isolation:isolate; contain:layout paint; }
@supports not (height:100lvh){ .act__stage{ height:100svh; } }
[data-plane]{ will-change:transform; }
/* Windowed reveals: children carrying data-window="from to" light up inside it
   (one-shot toggle, used by act 6). */
.reveal{ opacity:0; transform:translateY(8px); visibility:hidden; will-change:opacity, transform;
  transition:opacity .55s var(--ease), transform .55s var(--ease), visibility 0s linear .55s; }
.reveal[data-active]{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
.stack{ display:grid; }
.stack > *{ grid-area:1 / 1; }

/* ------------------------------------------------------ reveals (round 3) */
/* 1) Scrub reveal (.sreveal): inside a pinned act, acts.js writes --rv (0→1
   visibility) and --rd (+1 entering / −1 leaving) per frame from scroll
   progress. Blur 10px → 0, a 40px rise on the way in, a 40px lift on the way
   out; symmetric, never a hard cut. Topology feel.
   Poct pass (Michael, 2026-09-04): the travel is Poct's 2.5rem (--rise), mapped
   onto the same ramp as opacity, so the element visibly climbs toward the block
   above it as it sharpens and sinks back down when you scroll the other way.
   The blur rides a LATER slice of the ramp than opacity: it holds full strength
   until rv .30 and only clears at rv .94, so the sharpening is the last thing to
   land instead of being over in the first third. Window positions and RAMP are
   untouched; act 2 still crossfades with no black gap. */
.sreveal{ --rv:0; --rd:1; opacity:var(--rv); will-change:opacity, filter, transform;
  filter:blur(calc((1 - clamp(0, (var(--rv) - .3) / .64, 1)) * 10px));
  transform:translate3d(0, calc((1 - var(--rv)) * var(--rise) * var(--rd)), 0);
  visibility:visible; }
.sreveal[data-hidden]{ visibility:hidden; }
/* 2) Entry reveal ([data-reveal]): every heading / paragraph / card / step /
   footer column on the site. Round 5 (Michael, 2026-09-04): no clock any more.
   reveal.js writes --rv (0→1 visible) and --rd (+1 the block sits BELOW its
   place at the bottom edge, −1 it sits ABOVE its place at the top edge) from
   scroll position, at BOTH edges of the viewport. A block sharpens and climbs
   40px (--rise, Poct's 2.5rem) as it enters at the bottom, holds, then blurs
   back out and keeps climbing as it passes under the header, and the same
   positions replay in reverse when you scroll the other way.
   The blur rides a LATER slice of the ramp than opacity, holding full strength
   to rv .30 and clearing at rv .94, so the sharpening is the last thing to land
   the way Poct's long linear fade reads. Same recipe as .sreveal above.
   No-JS = visible; .is-in is a readout of rv ≥ .98, not the driver. */
[data-reveal]{ --rv:0; --rd:1; opacity:var(--rv);
  filter:blur(calc((1 - clamp(0, (var(--rv) - .3) / .64, 1)) * 8px));
  transform:translate3d(0, calc((1 - var(--rv)) * var(--rise) * var(--rd)), 0); }
/* images: blur and fade from the same rv, no rise; transform belongs to the zoom below */
[data-reveal="img"]{ transform:scale(1); transition:transform .7s var(--ease); }
.no-js [data-reveal]{ opacity:1; filter:blur(0); transform:none; }
/* Scroll zoom (Michael, 2026-09-03): every photo zooms IN by 3.5% as it comes into view and back OUT to 1
   when you scroll away — short, subtle, visible, reversible (reveal.js toggles .is-zoom at 30% visibility). */
[data-reveal="img"].is-zoom{ transform:scale(1.035); }
[data-reveal].is-in{ will-change:auto; }
/* Rounded image frame: an overflow-hidden box so the zoom keeps its corners. */
.frame{ position:relative; overflow:hidden; border-radius:var(--r-card); border:1px solid var(--hair); background:var(--surface); }
.frame > img, .frame > video{ width:100%; height:100%; object-fit:cover; display:block; }
/* Photographs: rounded, hairline, cover. Inside a .frame the frame owns both. */
.photo{ border-radius:var(--r-card); border:1px solid var(--hair); object-fit:cover; }
.frame > .photo{ border:0; border-radius:0; }

/* ----------------------------------------------------------------- header */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100; height:var(--hdr-h);
  display:flex; align-items:center;
  color:var(--hero-ink, var(--ink));
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
/* Fully transparent, in the hero and past it (L'Agence): no fill, no rule, no blur, so the
   page keeps its depth and the film runs edge to edge under the controls. Legibility comes
   from a soft shadow on the marks themselves, never from a bar. */
.hdr.is-solid{ color:var(--ink); }
/* Past the hero the page's own copy scrolls under the controls and would overprint the
   wordmark. A soft top-down fade, not a bar: no edge, no rule, no blur, the depth stays. */
.hdr::before{ content:""; position:absolute; z-index:-1; inset:0 0 auto 0; pointer-events:none;
  height:calc(var(--hdr-h) * 1.8); opacity:0; transition:opacity .35s var(--ease);
  background:linear-gradient(to bottom, rgba(11,12,15,.86), rgba(11,12,15,.58) 48%, rgba(11,12,15,0)); }
.hdr.is-past::before{ opacity:1; }
.hdr .wordmark, .hdr__nav a, .hdr .lang{ text-shadow:0 1px 2px rgba(8,9,12,.5); }
.hdr__burger, .hdr__full{ filter:drop-shadow(0 1px 2px rgba(8,9,12,.55)); }
.hdr__cta .pill{ text-shadow:none; box-shadow:0 2px 10px rgba(8,9,12,.3); }
/* the mobile sheet is opaque, so the strip above it has to be too while it is open */
.hdr:has(.hdr__burger[aria-expanded="true"]){ background:var(--bg); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.wordmark{ font-family:var(--f-display); font-weight:300; font-size:24px; letter-spacing:-.01em; line-height:1; display:inline-flex; align-items:center; min-height:44px; }
.hdr__nav{ display:flex; gap:clamp(14px, 1.8vw, 30px); font-size:14px; font-weight:500; }
.hdr__nav a{ opacity:.82; transition:opacity .18s; }
.hdr__nav a:hover{ opacity:1; }
.hdr__cta{ display:flex; align-items:center; gap:14px; }
.hdr .lang{ border-color:currentColor; opacity:.85; }
.hdr .lang a{ min-height:36px; padding:0 10px; }
.hdr .lang a[aria-current]{ background:transparent; color:inherit; font-weight:600; }
.hdr .lang a:not([aria-current]){ opacity:.7; }
.hdr__sheet-lang{ display:flex; align-items:center; justify-content:space-between; padding-top:18px; }
.hdr .pill{ min-height:40px; padding:0 18px; font-size:14px; }
.hdr__burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; }
/* Fullscreen toggle (Michael, 2026-09-04: he wants the film to own the whole screen on Android).
   Same transparent treatment as the burger: no plate, no fill, just the icon in the header's own
   colour. site.js unhides it only where document.fullscreenEnabled is true. */
.hdr__full{ display:none; width:44px; height:44px; align-items:center; justify-content:center; border-radius:50%; color:inherit; opacity:.82; transition:opacity .18s var(--ease); }
.hdr__full:hover{ opacity:1; }
.hdr__full[hidden]{ display:none; }
.hdr__burger span{ display:block; width:20px; height:1.5px; background:currentColor; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor; }
.hdr__sheet{ display:none; }

/* ------------------------------------------------------------ act 1: hero */
.hero{ position:relative; height:500vh; }
.hero__stage{
  position:sticky; top:0; height:100lvh; overflow:hidden; isolation:isolate; background:#0B0C0F;
  /* ink travels with the film: set by hero.js each frame */
  --hero-ink:#E8E9EC; --hero-ink-soft:rgba(232,233,236,.78); --night:0;   /* round 3: light ink all day over the dark edge shading */
  --hero-ink-lead:rgba(232,233,236,.92);                                 /* the lead, one step toward ink: it crosses the bright side of the frame */
  color:var(--hero-ink);
}
@supports not (height:100lvh){ .hero__stage{ height:100svh; } }
.hero__stage canvas, .hero__poster{ position:absolute; inset:0; width:100%; height:100%; }
.hero__poster{ object-fit:cover; z-index:1; transition:opacity .45s ease; }
.hero__stage canvas{ z-index:2; }
/* Night scrim: a floor under the chapters and a veil under the title that only
   exist at night (opacity = --night). */
.hero__scrim{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--night);
  background:
    linear-gradient(to top, rgba(11,12,15,.82) 0%, rgba(11,12,15,.42) 30%, rgba(11,12,15,0) 56%),
    linear-gradient(to bottom, rgba(11,12,15,.55) 0%, rgba(11,12,15,0) 34%); }
/* Dark edge shading (round 3, replaces the daylight veil): a soft lens vignette
   on the left/top/bottom edges — where the type lives — so light ink and the
   gold pop over the sunlit frame while the focal desk zone (centre-right) stays
   bright. Eases to .6 at night, when the scrim already carries the floor. */
.hero__shade{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:calc(1 - var(--night) * .4);
  background:
    radial-gradient(78% 84% at 0% 0%, rgba(8,9,12,.78), rgba(8,9,12,.42) 42%, rgba(8,9,12,0) 74%),
    radial-gradient(64% 58% at 0% 100%, rgba(8,9,12,.74), rgba(8,9,12,.3) 46%, rgba(8,9,12,0) 74%),
    linear-gradient(to bottom, rgba(8,9,12,.42), rgba(8,9,12,0) 20%),
    linear-gradient(to top, rgba(8,9,12,.62), rgba(8,9,12,0) 24%); }

/* fg plane: the analog clock — hairline dial, hour + minute hands, gold pivot. It takes the
   title's place after the first scroll (hero.js fades title out / clock in, sets the hands). */
/* Right side on every viewport: the chapters are left-aligned, so on landscape phones the
   dial and the chapter text used to sit on top of each other. Same vertical position. */
.hero__aclock{
  position:absolute; z-index:6; right:var(--gutter); top:calc(var(--hdr-h) + clamp(28px, 5vh, 56px));
  display:flex; flex-direction:column; align-items:flex-end; gap:16px;
  color:var(--hero-ink); opacity:0; visibility:hidden; pointer-events:none; will-change:opacity, transform;
}
.aclock{ width:clamp(170px, 18vw, 270px); height:auto; display:block; overflow:visible; filter:drop-shadow(0 2px 18px rgba(8,9,12,.5)); }
.aclock__ring{ fill:rgba(11,12,15,.22); stroke:currentColor; stroke-opacity:.6; stroke-width:1; vector-effect:non-scaling-stroke; }
.aclock__ticks line{ stroke:currentColor; stroke-opacity:.45; stroke-width:1; vector-effect:non-scaling-stroke; }
.aclock__ticks line.is-q{ stroke-opacity:.95; stroke-width:1.5; }
.aclock__h{ stroke:currentColor; stroke-width:3.2; stroke-linecap:round; }
.aclock__m{ stroke:currentColor; stroke-width:1.6; stroke-linecap:round; }
.aclock__dot{ fill:var(--gold); }
/* fg plane: the title, top-left, two lines, Topology scale */
.hero__title{
  position:absolute; z-index:6; left:var(--gutter); right:var(--gutter);
  top:calc(var(--hdr-h) + clamp(28px, 5vh, 56px));
  max-width:min(100%, 1240px);
}
.hero__title .display--h1{ width:max-content; max-width:100%; text-wrap:initial; }
/* sub + CTA read once, then hand the stage to the chapters (hero.js sets --lead) */
.hero__lead{ opacity:var(--lead, 1); transform:translate3d(0, calc((1 - var(--lead, 1)) * -12px), 0); visibility:visible; }
.hero__lead[data-gone]{ visibility:hidden; }
.hero__title .display--h1{ color:var(--hero-ink); }
.hero__title, .hero__chapters{ will-change:transform, opacity; }
/* Soft radial shading behind the copy block (round-2 A2 mechanism, kept): now a
   DARK haze by day and night — never a light one, which muddied the gold. It
   eases off at night, when the scrim already darkens the frame. */
.hero__haze{ position:absolute; z-index:-1; inset:-24% -30% -20% -26%; pointer-events:none;
  background:radial-gradient(58% 60% at 34% 46%, rgba(8,9,12,.58), rgba(8,9,12,.26) 44%, rgba(8,9,12,0) 74%);
  opacity:calc(1 - var(--night) * .5); }
/* One soft dark shadow only: nothing light ever sits on the glyphs, so the gold
   renders as #FFB25B (verified by the QA pixel sample). */
.hero__title .display--h1, .hero__sub, .chapter__t{ text-shadow:0 2px 22px rgba(8,9,12,.45); }
/* The lead sits lower and wider than the H1, so on a phone its right half lands on the
   bright window and the white robot, where the soft 22px shadow alone dissolves (Michael,
   2026-09-04: measured 1.17:1 on 390×844). One step toward ink plus a tight edge shadow,
   the same treatment the clock caption already needed on that side of the frame. */
.hero__sub{ text-shadow:0 1px 2px rgba(8,9,12,.55), 0 2px 22px rgba(8,9,12,.45); }
/* the caption now sits over the window side of the frame, the brightest area: it needs a tight
   edge shadow on top of the soft one, or the last glyph disappears into a white shoulder */
.hero__clock{ text-shadow:0 1px 2px rgba(8,9,12,.65), 0 2px 22px rgba(8,9,12,.5); }
.hero__title .display--h1 em{ color:var(--gold); }
.hero__sub{ margin-top:clamp(18px, 2.4vh, 28px); max-width:470px; font-size:var(--t-body); line-height:1.5; color:var(--hero-ink-lead); }
.hero__cta{ margin-top:clamp(20px, 3vh, 32px); display:flex; gap:12px; flex-wrap:wrap; }
.hero__cta .pill--ghost{ color:var(--hero-ink); border-color:currentColor; opacity:.85; }

/* mid plane: chapters, bottom-left, one lit at a time */
.hero__chapters{
  position:absolute; z-index:6; left:var(--gutter); right:var(--gutter);
  bottom:clamp(150px, 22vh, 210px); max-width:min(100%, 480px);
  display:grid;
}
.hero__chapters::before{ content:""; position:absolute; z-index:-1; inset:-34% -40% -30% -36%; pointer-events:none;
  background:radial-gradient(60% 60% at 40% 50%, rgba(8,9,12,.6), rgba(8,9,12,0) 74%); opacity:calc(1 - var(--night) * .4); }
.hero__chapters > .chapter{ grid-area:1 / 1; }
.chapter{ opacity:0; transform:translateY(14px); visibility:hidden;
  transition:opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s; }
.chapter[data-active]{ opacity:1; transform:none; visibility:visible; transition-delay:0s; }
.chapter::before{ content:""; display:block; width:36px; height:1px; background:currentColor; opacity:.55; margin-bottom:18px; }
.chapter__t{ font:300 clamp(24px, 1rem + 1.1vw, 32px)/1.1 var(--f-display); letter-spacing:-.015em; color:var(--hero-ink); text-wrap:balance; }
.chapter__t em{ font-style:normal; font-weight:400; color:var(--gold); }

/* Footer row inside the hero: © · EXPLOREAZĂ ↓.
   The full-width hairline and its gold scroll-progress fill are gone (Michael, 2026-09-04:
   „e mai elegant fără bara aia, acoperă mai puțin din video"). Scroll progress in the hero is
   now carried by the clock; the page's own progress hairlines live in the Căi act. */
.hero__foot{
  position:absolute; z-index:6; left:var(--gutter); right:var(--gutter); bottom:calc(var(--gutter) - 4px);
  display:flex; justify-content:space-between; align-items:center;
  font:500 11px/1 var(--f-text); letter-spacing:.14em; text-transform:uppercase; color:var(--hero-ink-soft);
}
.hero__clock{ color:var(--hero-ink); font:500 clamp(18px, .9rem + .6vw, 24px)/1 var(--f-text); letter-spacing:.04em; font-variant-numeric:tabular-nums; text-transform:none; opacity:.9; }
.hero__explore{ color:var(--hero-ink); font:500 12px/1 var(--f-text); letter-spacing:.14em; opacity:.95; }
.hero__explore .arr{ animation:bob 1.6s var(--ease) infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
.hero__foot > a, .hero__foot > span{ display:inline-flex; align-items:center; min-height:44px; margin-block:-16px; }
.hero__foot .arr{ display:inline-block; margin-left:6px; }

/* poster-only / no-js safety */
.no-js .hero{ height:auto; }
.no-js .hero__stage{ position:relative; }
.no-js .chapter{ opacity:1; transform:none; visibility:visible; position:relative; }

/* -------------------------------------------------------- act 2: problema */
.problem .act__stage{ display:grid; align-items:center; background:var(--bg); padding-top:var(--hdr-h); }
.problem__in{ display:grid; grid-template-columns:1fr; }
.problem__in > *{ grid-area:1 / 1; }
.problem__exit{ max-width:1040px; }
.problem__exit .display{ font-size:clamp(34px, 1.2rem + 3.4vw, 80px); line-height:1.02; }
.problem__exit .display em{ color:var(--ink); }
.problem__body{ display:grid; grid-template-columns:1fr; gap:clamp(28px, 4vw, 56px); }
.problem__body .display--h2{ max-width:1100px; }
.problem__paras{ display:grid; justify-self:end; width:min(100%, 600px); }
.problem__paras > p{ grid-area:1 / 1; font-size:clamp(18px, 1rem + .5vw, 22px); line-height:1.5; color:var(--metal-2); max-width:40ch; }
.problem__paras > p strong{ color:var(--ink); font-weight:500; }
.problem__paras > p.is-urgent strong{ color:var(--gold); }

/* --------------------------------------- act 3: soluții (stacking cards) */
/* fora.so "What you get": full-viewport sticky cards that stack; the next card
   slides up over the previous one, which scales to .95 and dims (--cover is
   written by acts.js). Each card is ONE link. The image reaches close to the
   top and side edges (12px inset) so the cards read as layered planes. */
.solutions{ padding-top:var(--sp-section); padding-bottom:calc(var(--sp-section) * .6); }
.solutions .section__head .lede{ max-width:52ch; }
.sols{ margin-top:var(--gap-m); }
/* A covered card lifts 14px and shrinks to .96, so a sliver of it stays visible
   above the incoming card: the stack reads as layered planes (fora). */
.sol{ position:sticky; top:calc(var(--hdr-h) + 16px); height:min(calc(100lvh - var(--hdr-h) - 32px), 780px); margin-bottom:12vh;
  transform:translate3d(0, calc(var(--cover, 0) * -14px), 0) scale(calc(1 - var(--cover, 0) * .04)); transform-origin:50% 0; will-change:transform; }
@supports not (height:100lvh){ .sol{ height:min(calc(100vh - var(--hdr-h) - 32px), 780px); } }
.sol:nth-child(1){ z-index:1; } .sol:nth-child(2){ z-index:2; } .sol:nth-child(3){ z-index:3; } .sol:nth-child(4){ z-index:4; }
.sol:last-child{ margin-bottom:0; }
.sol__in{ position:relative; display:grid; grid-template-rows:minmax(0, 1fr) auto; height:100%; padding:12px; gap:0;
  border:1px solid var(--hair); border-radius:var(--r-card); background:var(--surface); overflow:hidden;
  box-shadow:0 -24px 80px -40px rgba(0,0,0,.9); color:var(--ink);
  transition:border-color .3s var(--ease); }
.sol__in:hover{ border-color:var(--hair-strong); }
.sol--gold .sol__in{ border-color:rgba(255,178,91,.34); background:linear-gradient(180deg, rgba(255,178,91,.05), rgba(255,178,91,0) 40%), var(--surface); }
.sol--gold .sol__in:hover{ border-color:rgba(255,178,91,.6); }
.sol__in::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:var(--bg); opacity:calc(var(--cover, 0) * .6); pointer-events:none; }
.sol__media{ position:relative; overflow:hidden; border-radius:var(--r-inner); background:var(--bg); min-height:0; }
.sol__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .9s var(--ease); }
.sol__in:hover .sol__media img{ transform:scale(1.03); }
.sol__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(11,12,15,.4), rgba(11,12,15,0) 40%); pointer-events:none; }
.sol__k{ position:absolute; left:20px; top:18px; z-index:1; font:500 11px/1 var(--f-text); letter-spacing:.14em; color:var(--ink); opacity:.9; padding:9px 12px; border-radius:var(--r-pill); border:1px solid rgba(232,233,236,.28); background:rgba(11,12,15,.42); }
.sol--gold .sol__k{ color:var(--gold); border-color:rgba(255,178,91,.45); }
.sol__copy{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:end; gap:24px; padding:clamp(20px, 2.2vw, 30px) clamp(12px, 1.4vw, 20px) clamp(8px, 1vw, 14px); }
.sol__t{ font:300 clamp(28px, 1.2rem + 1.8vw, 46px)/1.02 var(--f-display); letter-spacing:-.02em; }
.sol__t em{ font-style:normal; font-weight:400; color:var(--gold); }
.sol__p{ margin-top:12px; color:var(--metal-2); font-size:17px; line-height:1.5; max-width:52ch; }
.sol__price{ display:inline-block; margin-top:12px; font-size:14px; color:var(--metal); }
.sol__go{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 22px; border-radius:var(--r-pill); border:1px solid var(--hair-strong); font:500 15px/1 var(--f-text); white-space:nowrap; transition:background .25s var(--ease), border-color .25s var(--ease); }
.sol__in:hover .sol__go{ background:rgba(232,233,236,.08); border-color:var(--metal); }
.sol--gold .sol__go{ background:var(--gold); color:#0B0C0F; border-color:var(--gold); }
.sol--gold .sol__in:hover .sol__go{ background:#FFC17A; border-color:#FFC17A; }
.sol__go .arr{ display:inline-block; transition:transform .25s var(--ease); }
.sol__in:hover .sol__go .arr{ transform:translateX(3px); }
.solutions__more{ margin-top:clamp(28px, 4vw, 56px); display:flex; justify-content:center; }
.solutions__more .link{ color:var(--metal-2); font-size:15px; }
.solutions__more .link:hover{ color:var(--ink); }

/* -------------------------------------------------------- act 4: training */
.training{ padding-block:var(--sp-section); }
/* Left column capped at 600px: the 4:5 export is 1229px wide, so the photo stays ≥ 1:1 at 1440 @2x. */
.training__grid{ display:grid; grid-template-columns:minmax(0, 600px) minmax(0, 1fr); gap:clamp(40px, 6vw, 112px); align-items:start; }
.training__media{ position:sticky; top:calc(var(--hdr-h) + 24px); }
/* The photo is exported as a real 4:5 crop of the 2752px source (no CSS crop →
   no upscale); the .frame keeps the corners while the image zooms in. */
.training__media .frame{ aspect-ratio:4 / 5; width:100%; }
.training__media .photo{ width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.step__sub{ margin-top:10px; display:grid; gap:8px; color:var(--metal-2); font-size:16px; line-height:1.55; max-width:52ch; }
.step__sub b{ color:var(--ink); font-weight:500; }
.training__media figcaption{ margin-top:14px; font-size:13px; color:var(--metal); letter-spacing:.02em; }
.training__copy .display--h2{ max-width:640px; }
.training__steps{ margin-top:clamp(36px, 4vw, 56px); }
.training__price{ margin-top:clamp(28px, 3vw, 40px); display:grid; gap:10px; max-width:52ch; }
.training__price b{ font:400 clamp(24px, 1.1rem + 1vw, 32px)/1.1 var(--f-display); color:var(--ink); }
.training__price p{ color:var(--metal-2); font-size:16px; line-height:1.55; }
.training__cta{ margin-top:32px; display:flex; gap:14px; align-items:center; flex-wrap:wrap; }

/* ----------------------------------------------------------- act 5: vasul */
/* Round 3: the tunnel video is gone. A calm full-bleed still (rounded plate,
   12px inset) with a slow far-plane parallax; a new film lands on the same
   <img> (data-placeholder="vasul-film"). */
.vessel{ height:150vh; }
.vessel .act__stage{ background:#0B0C0F; padding:12px; }
.vessel__frame{ position:absolute; inset:12px; border-radius:var(--r-card); overflow:hidden; background:#0B0C0F; isolation:isolate; }
.vessel__still{ position:absolute; inset:-18% 0; width:100%; height:136%; object-fit:cover; object-position:50% 50%; z-index:0; will-change:transform; }
.vessel__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(11,12,15,.9) 0%, rgba(11,12,15,.5) 38%, rgba(11,12,15,.08) 70%), linear-gradient(to right, rgba(11,12,15,.5), rgba(11,12,15,0) 50%); }
.vessel__copy{ position:absolute; z-index:2; left:var(--gutter); right:var(--gutter); bottom:clamp(48px, 9vh, 96px); display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:clamp(24px, 5vw, 96px); align-items:end; }
.vessel__copy .display--h2{ max-width:760px; font-size:clamp(32px, 1.2rem + 2.2vw, 60px); }
.vessel__copy p{ color:var(--metal-2); font-size:var(--t-body); line-height:1.55; max-width:44ch; }
.vessel__copy .link{ margin-top:22px; }

/* --------------------------------------------------------- act 6: două căi */
.paths{ height:300vh; }
.paths .act__stage{ background:var(--bg); }
/* Ambient loop at ≤ 20% (round 3: it competed with the copy at 30%). */
.paths__video{ position:absolute; inset:-14% 0; height:128%; width:100%; z-index:0; opacity:.16; }
.paths__video video, .paths__video img{ width:100%; height:100%; object-fit:cover; filter:saturate(.5) brightness(.8); }
.paths__scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(to bottom, rgba(11,12,15,.7), rgba(11,12,15,.25) 40%, rgba(11,12,15,.9)); }
.paths__in{ position:absolute; inset:0; z-index:2; display:grid; grid-template-rows:auto 1fr auto; padding:calc(var(--hdr-h) + clamp(16px, 3vh, 40px)) var(--gutter) clamp(24px, 4vh, 48px); }
/* The head is a mid plane (±.17 × half the stage = up to ~40px of travel). Its
   bottom padding is the room that travel needs, so the hairline of the columns
   below can never cross the title, whatever the leftover space (round 4, B). */
.paths__head{ max-width:980px; padding-bottom:clamp(44px, 6vh, 64px); }
.paths__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px, 5vw, 96px); align-items:end; padding-bottom:clamp(16px, 3vh, 40px); }
.path{ opacity:.32; transform:translateY(6px); will-change:opacity, transform; transition:opacity .6s var(--ease), transform .6s var(--ease); }
.path[data-active]{ opacity:1; transform:none; }
.path .eyebrow{ margin-bottom:16px; }
.path .display--h3{ font-size:clamp(28px, 1.2rem + 1.7vw, 46px); max-width:16ch; }
.path--gold .display--h3 em{ color:var(--gold); }
.path--blue .display--h3 em{ color:var(--blue); }
.path p{ margin-top:18px; color:var(--metal-2); font-size:17px; line-height:1.55; max-width:42ch; }
.path__bar{ height:1px; width:100%; background:var(--line); margin-bottom:22px; position:relative; overflow:hidden; }
/* progress hairline: the faint base line stays; on top, a 1px line whose WIDTH is the act's
   progress through this path's own window (--w0 → --w0 + --wl). Scroll-bound, no transition,
   so it fills left→right while you scroll and empties when you scroll back. */
.path{ --w0:0; --wl:1; }
.path--gold{ --w0:0;  --wl:.5; }   /* Calea 1: fills over 0 → .5, full exactly when Calea 2 takes over */
.path--blue{ --w0:.5; --wl:.5; }   /* Calea 2: fills over .5 → 1, full exactly when the next section arrives */
.path__bar::after{ content:""; position:absolute; left:0; top:0; bottom:0; transition:none;
  width:clamp(0%, calc((var(--p, 0) - var(--w0)) / var(--wl) * 100%), 100%); }
.path--gold .path__bar::after{ background:var(--gold); }
.path--blue .path__bar::after{ background:var(--blue); }
.paths__foot{ border-top:1px solid var(--hair); padding-top:18px; display:flex; justify-content:space-between; gap:24px; font-size:15px; color:var(--metal-2); }
.paths__foot b{ font-weight:500; color:var(--ink); }

/* ------------------------------------------ act 7: sisteme (calm, static) */
/* Round 3: the stacking moved to the solutions act; Sisteme is a still
   fora-style grid of hairline cards — two columns, the Website card wide. */
.systems{ padding-bottom:calc(var(--sp-section) * .5); }
.sysgrid{ margin-top:var(--gap-m); display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px, 1.6vw, 24px); }
.sys{ display:grid; grid-template-rows:auto 1fr auto; gap:0; min-height:260px; padding:clamp(24px, 2.6vw, 36px); }
.sys .display--h3{ margin-top:clamp(28px, 4vw, 56px); font-size:clamp(28px, 1.2rem + 1.4vw, 40px); }
.sys p{ margin-top:14px; color:var(--metal-2); font-size:16px; line-height:1.55; max-width:44ch; }
.sys__foot{ margin-top:22px; padding-top:16px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:13px; color:var(--metal); }
.sys--web{ grid-column:1 / -1; grid-template-columns:minmax(0, 1fr) auto; grid-template-rows:auto; align-items:end; gap:24px; border-color:rgba(255,178,91,.3);
  background:linear-gradient(160deg, rgba(255,178,91,.07), rgba(255,178,91,0) 55%), var(--surface); }
.sys--web .display--h3{ margin-top:22px; }
.sys--web p{ max-width:56ch; }

/* ----------------------------------------------------------- act 8: dovezi */
.proof{ padding-block:var(--sp-section) 0; }
.projects{ margin-top:var(--gap-m); display:grid; grid-template-columns:repeat(4, 1fr); gap:clamp(14px, 1.6vw, 24px); }
.project{ padding:0; overflow:hidden; }
.project .plate{ aspect-ratio:16 / 10; border:0; border-radius:0; border-bottom:1px solid var(--hair);
  transition:transform .6s var(--ease); transform-origin:50% 50%; will-change:transform; }
.project:hover .plate{ transform:scale(1.04); }                /* hover zoom on project plates (round 3) */
.project__body{ padding:18px 20px 22px; }
.project__t{ font:400 22px/1.1 var(--f-display); }
.project__c{ margin-top:8px; font-size:14px; color:var(--metal); line-height:1.45; }
.project--wip{ opacity:.7; }
.project--wip .project__t{ color:var(--metal-2); }

/* contact */
.contact{ padding-block:var(--sp-section); }
.contact__grid{ margin-top:var(--gap-m); display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(20px, 2.4vw, 40px); align-items:start; }
.contact .card{ padding:clamp(26px, 3vw, 44px); }
/* Option 1 is typographic until a usable owner photo exists (round 3, item 13):
   a big display line carries the card instead of an image. */
.contact__opt--gold{ display:grid; align-content:start; }
.contact__opt .contact__big{ font:300 clamp(40px, 1.6rem + 3vw, 72px)/.98 var(--f-display); letter-spacing:-.03em; color:var(--ink); margin:clamp(24px, 3vw, 40px) 0 clamp(20px, 2.6vw, 36px); max-width:none; text-wrap:balance; }
.contact__big em{ font-style:normal; font-weight:400; color:var(--gold); }
.contact__opt .display--h3{ margin-top:14px; }
.contact__opt p{ margin-top:14px; color:var(--metal-2); font-size:16px; line-height:1.55; max-width:40ch; }
.contact__opt .pill{ margin-top:28px; }
.contact__meta{ margin-top:34px; padding-top:22px; border-top:1px solid var(--hair); display:grid; gap:8px; font-size:14px; color:var(--metal); }
.contact__meta b{ color:var(--metal-2); font-weight:500; }
.contact__opt--gold{ border-color:rgba(255,178,91,.3); background:linear-gradient(160deg, rgba(255,178,91,.06), rgba(255,178,91,0) 50%), var(--surface); }
.form{ display:grid; gap:18px; margin-top:26px; }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.form__note{ font-size:13px; color:var(--metal); max-width:36ch; }
.form__ok{ padding:14px 16px; border:1px solid rgba(143,182,230,.35); border-radius:var(--r-field); color:var(--blue); font-size:15px; }

/* ----------------------------------------------------------------- footer */
.foot{ border-top:1px solid var(--hair); padding:64px 0 32px; color:var(--metal); font-size:14px; }
.foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px, 4vw, 64px); }
.foot__brand p{ margin-top:16px; max-width:34ch; line-height:1.55; color:var(--metal-2); }
.foot__meta{ margin-top:18px; display:grid; gap:6px; }
.foot__meta b{ color:var(--metal-2); font-weight:500; }
.foot__col{ display:grid; align-content:start; gap:2px; }
.foot__col .eyebrow{ margin-bottom:12px; }
.foot__col a{ display:inline-flex; align-items:center; min-height:44px; color:var(--metal-2); }
.foot__col a:hover{ color:var(--ink); }
.foot__bottom{ margin-top:48px; padding-top:22px; padding-right:84px; border-top:1px solid var(--hair); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }   /* right padding clears the contact fab */
.foot__bottom a{ display:inline-flex; align-items:center; min-height:44px; margin-block:-14px; }
.foot__bottom a:hover{ color:var(--ink); }
/* Discreet contact button, bottom-right: round, hairline, gold glyph (round 3).
   Links to the contact section; WhatsApp deep-link is a data-todo. */
.chatfab{ position:fixed; right:clamp(16px, 2vw, 28px); bottom:clamp(16px, 2vw, 28px); z-index:90;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--hair-strong); background:rgba(11,12,15,.72); color:var(--gold);
  box-shadow:0 10px 30px -12px rgba(0,0,0,.7); transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
.chatfab{ opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease), background .2s, border-color .2s; }
body.past-hero .chatfab{ opacity:1; pointer-events:auto; transform:none; }
.chatfab:hover{ background:rgba(21,23,28,.95); border-color:var(--gold); transform:translateY(-2px); }
.chatfab svg{ width:22px; height:22px; display:block; }
.chatfab__tip{ position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%); white-space:nowrap; font:500 12px/1 var(--f-text); letter-spacing:.06em; color:var(--metal-2);
  padding:10px 14px; border-radius:var(--r-pill); border:1px solid var(--hair); background:rgba(11,12,15,.9); opacity:0; pointer-events:none; transition:opacity .25s var(--ease); }
.chatfab:hover .chatfab__tip, .chatfab:focus-visible .chatfab__tip{ opacity:1; }

.lang{ display:inline-flex; border:1px solid var(--hair); border-radius:var(--r-pill); overflow:hidden; }
.lang a{ padding:0 14px; font:500 12px/1 var(--f-text); letter-spacing:.08em; min-height:44px; display:inline-flex; align-items:center; }
.lang a[aria-current]{ background:var(--surface); color:var(--ink); }

/* ------------------------------------------------------------- responsive */
@media (max-width:1100px){
  .hdr__nav, .hdr__cta .lang{ display:none; }
  .hdr__burger{ display:inline-flex; }
  .hdr__full:not([hidden]){ display:inline-flex; }
  /* The sheet belongs to the burger, so it lives at the burger's breakpoint
     (round 4: it was defined only ≤ 860px, leaving a dead burger at 861–1100). */
  .hdr__sheet{ position:fixed; inset:var(--hdr-h) 0 0 0; background:var(--bg); z-index:99; padding:24px var(--gutter); display:grid; align-content:start; gap:6px; overflow-y:auto; }
  .hdr__sheet a{ font:400 32px/1.2 var(--f-display); padding:10px 0; border-bottom:1px solid var(--hair); }
  .hdr__sheet[hidden]{ display:none; }
  .tile:nth-child(-n+2){ border-bottom:1px solid var(--hair); }
  .projects{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:860px){
  .hdr .pill{ min-height:44px; padding:0 14px; font-size:13px; }
  .wordmark{ font-size:17px; letter-spacing:0; }
  .hdr__in{ gap:12px; }
  .hdr__cta{ gap:8px; }
  .hdr__burger{ border:1px solid currentColor; opacity:.92; }
  .hdr__burger span{ width:20px; height:2px; box-shadow:0 6px 0 currentColor, 0 -6px 0 currentColor; }
  .hero__cta .pill--ghost{ display:none; }
  /* mobile browser bars: the stage is 100lvh, so anchor the bottom UI above the collapsed-bar zone */
  .hero__stage{ --bars:max(0px, calc(100lvh - 100svh)); }
  .hero__foot{ bottom:calc(var(--gutter) + var(--bars, 0px) + env(safe-area-inset-bottom, 0px)); }

  .hero__title{ top:calc(var(--hdr-h) + 20px); max-width:100%; }
  .hero__title .display--h1{ font-size:40px; }
  .hero__sub{ font-size:16px; max-width:30ch; margin-top:14px; }
  .hero__cta{ margin-top:18px; }
  .hero__aclock{ top:calc(var(--hdr-h) + 20px); gap:12px; }
  .aclock{ width:150px; }
  /* The single radial is centred at 34% and is gone by 74% of its own radius, so the lead's
     right half sat on bare frame. A second, wider and much softer radial biased to the window
     side carries the haze across the full width of the title block. Two soft radials, no box,
     and the film still reads through both. */
  .hero__haze{ inset:-16% -12% -14% -14%;
    background:
      radial-gradient(58% 60% at 34% 46%, rgba(8,9,12,.58), rgba(8,9,12,.26) 44%, rgba(8,9,12,0) 74%),
      radial-gradient(86% 46% at 72% 52%, rgba(8,9,12,.52), rgba(8,9,12,.30) 52%, rgba(8,9,12,0) 88%); }
  .hero__shade{ background:
    linear-gradient(to bottom, rgba(8,9,12,.62) 0%, rgba(8,9,12,.28) 9%, rgba(8,9,12,0) 20%),
    radial-gradient(120% 60% at 0% 0%, rgba(8,9,12,.78), rgba(8,9,12,.36) 46%, rgba(8,9,12,0) 78%),
    linear-gradient(to top, rgba(8,9,12,.82) 0%, rgba(8,9,12,.42) 28%, rgba(8,9,12,0) 48%); }
  .hero__chapters{ bottom:calc(var(--gutter) + 78px + var(--bars, 0px) + env(safe-area-inset-bottom, 0px)); max-width:88%; }
  .chapter__t{ font-size:27px; }
  .hero__clock{ font-size:17px; white-space:nowrap; }
  .hero__foot > span:first-child{ display:none; }
  .hero__foot{ justify-content:space-between; }

  .problem__body{ grid-template-columns:1fr; gap:28px; align-items:start; }
  /* phone: the act's text sits in the upper third so it shows after ~1/3 of the slide-in, not a full screen */
  .problem .act__stage{ align-items:start; padding-top:calc(var(--hdr-h) + 12vh); }
  .problem__paras > p{ font-size:17px; }

  .solutions{ padding-top:calc(var(--sp-section) * .8); }
  .sol{ top:calc(var(--hdr-h) + 10px); height:min(calc(100lvh - var(--hdr-h) - 20px), 720px); margin-bottom:8vh; }
  .sol__in{ padding:8px; }
  .sol__copy{ grid-template-columns:1fr; align-items:start; gap:14px; padding:18px 10px 10px; }
  .sol__t{ font-size:clamp(26px, 7vw, 32px); }
  .sol__p{ font-size:15px; margin-top:8px; }
  .sol__go{ min-height:44px; }
  .sol__k{ left:14px; top:12px; }

  .training__grid{ grid-template-columns:1fr; gap:36px; }
  .training__media{ position:static; }
  .training__media .frame{ aspect-ratio:4 / 3; }
  .step{ grid-template-columns:40px 1fr; padding:20px 0; }

  .vessel .act__stage{ padding:8px; }
  .vessel__frame{ inset:8px; }
  .vessel__copy{ grid-template-columns:1fr; gap:18px; bottom:40px; }
  .vessel__copy p{ font-size:16px; }
  .vessel__scrim{ background:linear-gradient(to top, rgba(11,12,15,.94) 0%, rgba(11,12,15,.66) 45%, rgba(11,12,15,.1) 78%); }

  /* Căi on a phone: the act stays PINNED with the dominance swap (Michael: the effect is the point).
     Only the head is fixed in place (no mid-plane travel) so the hairline never crosses the title;
     the inactive path shows just eyebrow + title so both fit one screen. */
  .paths__in{ grid-template-rows:auto 1fr auto; padding:calc(var(--hdr-h) + 16px) var(--gutter) 24px; }
  .paths__head{ padding-bottom:28px; transform:none!important; }
  .paths__head .display--h2{ font-size:clamp(30px, 8.5vw, 40px); }
  .paths__cols{ grid-template-columns:1fr; gap:22px; align-items:start; padding-bottom:18px; }
  .path .display--h3{ max-width:none; font-size:clamp(26px, 7.6vw, 32px); }
  .path p{ font-size:16px; max-width:none; margin-top:12px; }
  .path:not([data-active]) p{ display:none; }
  .paths__foot{ flex-direction:column; gap:6px; font-size:14px; padding-right:80px; }   /* right padding clears the chat fab */


  .projects{ grid-template-columns:1fr; }
  .project .plate{ aspect-ratio:16 / 7; }

  .sysgrid{ grid-template-columns:1fr; }
  .sys{ min-height:0; }
  .sys--web{ grid-template-columns:1fr; }
  .contact__big{ font-size:clamp(36px, 10vw, 44px); }
  .chatfab{ width:48px; height:48px; }
  .chatfab__tip{ display:none; }
  .foot__grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .foot__brand{ grid-column:1 / -1; }
  .contact__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .hero__title .display--h1{ font-size:38px; }
}
/* Short landscape viewports: keep the hero title and chapters from meeting. */
@media (max-height:640px) and (min-width:861px){
  .hero__title .display--h1{ font-size:clamp(44px, 9vh, 96px); }
  .chapter__t{ font-size:clamp(22px, 4vh, 34px); }
}
/* Short desktop windows (≤ 760px tall laptops): Căi must still fit one stage. */
@media (max-height:760px) and (min-width:861px){
  .paths__in{ padding-top:calc(var(--hdr-h) + 16px); }
  .paths__head .display--h2{ font-size:clamp(32px, 5.4vh, 56px); }
  .paths__head{ padding-bottom:clamp(36px, 5vh, 48px); }
  .path .display--h3{ font-size:clamp(24px, 4vh, 36px); }
  .path p{ font-size:15px; line-height:1.5; }
}

/* =============================================================================
   Round 4 — PHONE IN LANDSCAPE (≈ 844–932 × 390–430 CSS px). A 412px-tall
   frame with a fixed header is a different medium: everything that is pinned
   must fit the stage under the header, and every size drops one step. This
   block is self-sufficient — it overrides both the desktop rules (915/932 wide)
   and the ≤ 860px rules (844 wide), so the three common phones get one design.
   ========================================================================== */
@media (max-height:520px) and (orientation:landscape){
  :root{
    --hdr-h:56px; --sp-section:96px;
    --t-h1:clamp(32px, 1rem + 5vh, 44px);       /* interior page heroes */
    --t-h2:clamp(30px, 1rem + 6.5vh, 44px);
    --t-h3:clamp(22px, 1rem + 2.5vh, 28px);
    --t-body:16px;
  }
  .hdr .pill{ min-height:40px; padding:0 16px; font-size:13px; }
  .hdr__sheet{ padding:12px var(--gutter) 20px; grid-template-columns:1fr 1fr; column-gap:32px; row-gap:0; }
  .hdr__sheet a{ font-size:22px; padding:8px 0; }
  .hdr__sheet-lang{ grid-column:1 / -1; padding-top:14px; }

  /* --- hero: title top-left at 32px, sub 14px (2 lines), CTA 40px; chapters
     lower-left, ≥ 24px below the title (QA asserts); ghost clock off; the foot
     row stays above the browser bars (--bars). */
  .hero__stage{ --bars:max(0px, calc(100lvh - 100svh)); }
  /* Landscape is the tightest screen we ship: the title block starts under a 56px header and
     the foot row rides up by --bars when the browser chrome shows. Tightened one step so the
     CTA keeps its distance from the foot even on the shortest bar-heavy landscape (QA asserts
     no intersection and ≥ 12px of clearance on 915×412 and 844×390). */
  .hero__title{ top:calc(var(--hdr-h) + 8px); max-width:100%; }
  .hero__title .display--h1{ font-size:32px; line-height:.96; }
  .hero__sub{ display:block; font-size:14px; line-height:1.4; max-width:72ch; margin-top:8px; }
  .hero__cta{ margin-top:10px; }
  .hero__cta .pill{ min-height:40px; padding:0 18px; font-size:14px; }
  .hero__cta .pill--ghost{ display:none; }
  .hero__aclock{ top:calc(var(--hdr-h) + 12px); gap:6px; }
  .aclock{ width:92px; }
  .hero__clock{ font-size:13px; }
  .hero__haze{ inset:-30% -14% -26% -16%;
    background:
      radial-gradient(58% 60% at 34% 46%, rgba(8,9,12,.58), rgba(8,9,12,.26) 44%, rgba(8,9,12,0) 74%),
      radial-gradient(88% 45% at 72% 55%, rgba(8,9,12,.52), rgba(8,9,12,.30) 52%, rgba(8,9,12,0) 88%); }
  .hero__chapters{ bottom:calc(var(--gutter) * .6 + 58px + var(--bars, 0px) + env(safe-area-inset-bottom, 0px)); max-width:min(100%, 440px); }
  .chapter::before{ margin-bottom:12px; }
  .chapter__t{ font-size:22px; line-height:1.12; }
  .hero__foot{ bottom:calc(var(--gutter) * .6 + var(--bars, 0px) + env(safe-area-inset-bottom, 0px)); justify-content:space-between; }
  .hero__foot > span:first-child{ display:none; }
  .hero__clock{ font-size:22px; white-space:nowrap; }

  /* --- act 2: exit line and body centred in the stage under the header; one
     left-aligned column, 48ch. Scrub mechanics untouched. */
  .problem .act__stage{ padding-top:var(--hdr-h); }
  .problem__in{ align-items:center; }
  .problem__exit{ max-width:none; }
  .problem__exit .display{ font-size:30px; line-height:1.08; }
  .problem__body{ gap:16px; align-items:start; }
  .problem__body .eyebrow + .display{ margin-top:12px; }
  .problem__body .display--h2{ font-size:28px; max-width:none; }
  .problem__paras{ justify-self:start; width:100%; max-width:48ch; }
  .problem__paras > p{ font-size:15px; line-height:1.45; max-width:48ch; }

  /* --- stacking cards: OVERLAY layout. The image is the whole card (22px
     corners); tag top-left; the copy sits bottom-left over a subtle text-side
     gradient. Sticky stacking, --cover dim and the image reveal are unchanged. */
  .solutions{ padding-top:var(--sp-section); }
  .sol{ top:calc(var(--hdr-h) + 12px); height:calc(100lvh - var(--hdr-h) - 24px); margin-bottom:8vh; }
  .sol__in{ display:block; padding:0; }
  .sol__media{ position:absolute; inset:0; border-radius:inherit; }
  .sol__media::after{ display:none; }
  .sol__k{ left:16px; top:16px; }
  .sol__copy{ position:absolute; inset:0; display:grid; grid-template-columns:1fr; align-content:end; justify-items:start; gap:14px;
    padding:20px 24px 22px; border-radius:inherit;
    background:linear-gradient(to right, rgba(11,12,15,.58), rgba(11,12,15,.32) 44%, rgba(11,12,15,0) 72%),
               linear-gradient(to top, rgba(11,12,15,.5), rgba(11,12,15,0) 56%); }
  .sol__t{ font-size:28px; text-shadow:0 1px 18px rgba(8,9,12,.5); }
  .sol__p{ font-size:14px; line-height:1.45; margin-top:8px; max-width:46ch; color:var(--ink); opacity:.92; text-shadow:0 1px 14px rgba(8,9,12,.5); }
  .sol__price{ font-size:13px; margin-top:8px; color:var(--metal-2); }
  .sol__go{ min-height:40px; padding:0 18px; font-size:14px; }

  /* --- training: one column, the 4:3 phone crop (see <source media>). */
  .training__grid{ grid-template-columns:1fr; gap:28px; }
  .training__media{ position:static; }
  .training__media .frame{ aspect-ratio:4 / 3; }
  .step{ grid-template-columns:44px 1fr; padding:20px 0; }

  /* --- vasul: the copy is boxed between the header and the frame's bottom, so
     the title can never be clipped by the rounded frame. */
  .vessel .act__stage{ padding:8px; }
  .vessel__frame{ inset:8px; }
  .vessel__copy{ top:calc(var(--hdr-h) + 12px); bottom:24px; align-content:end; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:32px; }
  .vessel__copy .display--h2{ font-size:27px; line-height:1.05; max-width:none; }
  .vessel__copy p{ font-size:14px; line-height:1.45; max-width:none; }
  .vessel__copy .link{ margin-top:12px; min-height:40px; font-size:14px; }
  .vessel__scrim{ background:linear-gradient(to top, rgba(11,12,15,.9) 0%, rgba(11,12,15,.55) 45%, rgba(11,12,15,.1) 80%), linear-gradient(to right, rgba(11,12,15,.45), rgba(11,12,15,0) 55%); }

  /* --- căi: a short pin (one viewport of scroll) with the title in flow above
     two side-by-side columns; the dominance swap stays because the columns are
     side by side. The stage is min-height (not height), so on a phone shorter
     than the content it grows instead of clipping. */
  .paths{ height:200vh; }
  .paths .act__stage{ position:sticky; top:0; height:auto; min-height:100lvh; }
  .paths__in{ position:relative; inset:auto; grid-template-rows:auto 1fr auto; min-height:100lvh; padding:calc(var(--hdr-h) + 20px) var(--gutter) 22px; }
  .paths__head{ padding-bottom:26px; transform:none!important; }
  .paths__head .eyebrow + .display{ margin-top:12px; }
  .paths__head .display--h2{ font-size:26px; }
  .paths__cols{ grid-template-columns:1fr 1fr; gap:32px; align-items:end; padding-bottom:22px; }
  .path{ opacity:1; transform:none; }
  .path:not([data-active]){ opacity:.45; }
  .path:not([data-active]) p{ display:block; }
  .path .eyebrow{ margin-bottom:10px; }
  .path__bar{ margin-bottom:12px; }
  .path .display--h3{ font-size:22px; max-width:none; }
  .path p{ font-size:14px; line-height:1.45; margin-top:10px; max-width:none; }
  .paths__foot{ flex-direction:row; padding-top:12px; padding-right:80px; font-size:13px; }

  /* --- the static sections: one size step down, nothing else. */
  .sys .display--h3{ margin-top:24px; }
  .contact__opt .contact__big{ font-size:40px; }
  .phero{ padding-top:calc(var(--hdr-h) + 40px); }
  .phero__media{ margin-top:40px; }
  .chatfab{ width:48px; height:48px; }
  .chatfab__tip{ display:none; }
}

/* --------------------------------------------------------- reduced motion */
/* Stages become static, stacked sections with posters; the page still reads
   completely. scrub.js flips the hero itself via [data-scrub-static]. */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms!important; animation-duration:.01ms!important; }
  .act{ height:auto!important; }
  .act__stage{ position:relative; height:auto; min-height:0; overflow:visible; }
  .reveal, .path{ opacity:1; transform:none; visibility:visible; }
  .sreveal{ --rv:1; filter:none; transform:none; visibility:visible!important; }
  [data-reveal]{ --rv:1; opacity:1; filter:none; transform:none; transition:none; }
  [data-reveal="img"].is-zoom{ transform:none; }
  [data-plane]{ transform:none!important; }
  .problem__in > *{ grid-area:auto; }
  .problem__paras{ display:grid; gap:18px; }
  .problem__paras > p{ grid-area:auto; }
  .problem .act__stage{ padding-block:var(--sp-section); }
  .problem__exit{ margin-bottom:var(--sp-block); }
  .paths .act__stage{ min-height:100svh; }
  .paths__in{ position:relative; }
  .paths__video video{ display:none; }
  .path:not([data-active]) p{ display:block; }
  .path__bar::after{ width:100%; }          /* no scrub: both progress lines read full and static */
  .sol{ position:relative; top:auto; height:auto; margin-bottom:24px; transform:none!important; }
  .sol__in{ grid-template-rows:auto auto; }
  .sol__in::after{ display:none; }
  .sol__media{ aspect-ratio:16 / 9; }
  .sol__media img{ transition:none; }
  .hero__explore .arr{ animation:none; }
  .vessel .act__stage{ min-height:100svh; }
  .vessel__frame{ position:relative; inset:auto; min-height:100svh; }
  .vessel__still{ inset:0; height:100%; }
  .project .plate{ transition:none; }
}
.hero[data-scrub-static]{ height:auto; }
.hero[data-scrub-static] .hero__stage{ position:relative; height:auto; min-height:100svh; padding-bottom:var(--gutter);
  --hero-ink:var(--ink); --hero-ink-soft:var(--metal-2); --night:1; }
.hero[data-scrub-static] .hero__stage canvas, .hero[data-scrub-static] .hero__aclock{ display:none; }
.hero[data-scrub-static] .hero__title{ position:relative; margin-top:calc(var(--hdr-h) + 40px); }
.hero[data-scrub-static] .hero__chapters{ position:relative; inset:auto; margin:56px var(--gutter) 40px; max-width:60ch; display:grid; gap:28px; }
.hero[data-scrub-static] .hero__foot{ position:relative; inset:auto; margin:0 var(--gutter); }