/* ============================================================
   TOKENS
   Palette sampled from the approved footage and from PURA's own
   mark (#4D2AB7) and reactor photograph (#FDA7F2 filament cores).
   ============================================================ */
:root{
  --canvas:#0C0E14;
  --canvas-lift:#11141C;
  --panel:#151922;
  --panel-edge:#232838;
  --steel:#6B7284;
  --accent:#7C4DF0;
  --accent-hover:#9670F5;
  --accent-deep:#4D2AB7;
  --discharge:#E79BF0;
  --accent-muted:rgba(124,77,240,.18);
  --text-primary:#EFF1F6;
  --text-secondary:#A2AAB9;

  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,.02,.16,1);

  --tshadow:0 1px 2px rgba(4,5,9,.95),0 3px 12px rgba(4,5,9,.8),0 10px 44px rgba(4,5,9,.82);
  --pad:clamp(20px,5vw,72px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  opacity:0;transition:opacity .8s var(--ease);
}
body.ready{opacity:1}
img{max-width:100%;display:block}
figure{margin:0}
a{color:inherit}
::selection{background:var(--accent);color:#fff}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-family:var(--mono);font-size:13px}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-hover);outline-offset:3px;border-radius:3px}

/* ============================================================
   THE FIXED ENVIRONMENT LAYER
   One slow drift behind everything so scrolling feels like
   moving through one place rather than past stacked sections.
   ============================================================ */
.env{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.env::before{
  content:"";position:absolute;inset:-25%;
  background:
    radial-gradient(46% 38% at 22% 26%,rgba(124,77,240,.13),transparent 62%),
    radial-gradient(40% 34% at 80% 74%,rgba(107,114,132,.14),transparent 64%);
  animation:envDrift 96s var(--ease-soft) -18s infinite alternate;
}
@keyframes envDrift{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.1)}
}
.env .motes{position:absolute;inset:0;opacity:.5}
/* Sixteen 2px dots drifting inside a fixed, full-screen layer stop the browser
   from taking its fast scroll path: 27 fps against 43 with them hidden, and the
   count makes no difference, only the movement. Note that pausing the animation
   does NOT help (21 fps) — the browser still treats it as running. They are
   hidden instead, which nobody notices at 2px while the page is moving. */
body.scrolling .env .motes{visibility:hidden}
.env .motes span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:var(--accent);opacity:.5;
  animation:moteRise 34s linear infinite;
}
@keyframes moteRise{
  0%{transform:translateY(18vh);opacity:0}
  12%{opacity:.5}
  88%{opacity:.4}
  100%{transform:translateY(-102vh);opacity:0}
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:16px var(--pad);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav::before{
  content:"";position:absolute;left:0;right:0;top:0;height:190%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,7,12,.82) 0%,rgba(6,7,12,.5) 46%,rgba(6,7,12,0) 100%);
  transition:opacity .5s var(--ease);
}
.nav.solid::before{opacity:0}
.nav.solid{background:rgba(12,14,20,.86);backdrop-filter:blur(14px);border-bottom-color:var(--panel-edge)}
.nav-links a:not(.btn){text-shadow:0 1px 3px rgba(4,5,10,.9)}
.brand b{text-shadow:0 1px 4px rgba(4,5,10,.9)}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:28px;height:auto}
.brand b{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:.14em}
.nav-links{display:flex;align-items:center;gap:28px}
.nav-links a{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);text-decoration:none;transition:color .35s var(--ease);
}
.nav-links a:hover{color:var(--text-primary)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;
  padding:11px 20px;border-radius:7px;text-decoration:none;border:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),color .35s var(--ease);
}
.btn-primary{background:var(--accent);color:#fff;font-weight:500}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn-ghost{border-color:var(--panel-edge);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-2px)}
@media (pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}

/* ============================================================
   HERO: 1600vh pinned, 100vh sticky stage
   ============================================================ */
.hero{position:relative;height:1600vh;z-index:1}
.stage{
  position:sticky;top:0;height:100vh;overflow:hidden;
  background:#07080C;
}
.poster{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease);
}
/* The poster is a 1280x714 landscape still. Cover-cropping it into a portrait
   phone keeps only the middle ~26% of its width and enlarges that strip about
   3.4x, which put the intake mesh on screen at a magnification that showed
   every artefact in it. Shifting the crop left lands on the mounting plate,
   the flange and the bolts instead, at the same scale. */
@media (orientation: portrait) and (max-width: 720px){
  .poster{background-position:22% 50%}
}
/* the call to action must not wrap on a narrow phone */
.nav .btn{white-space:nowrap}
.stage video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.1s var(--ease);
  will-change:transform;transform:translateZ(0);
}
.stage.video-ready video{opacity:1}
.stage.video-ready .poster{opacity:0}
.scrim{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 122% 92% at 50% 46%,rgba(6,7,12,0) 34%,rgba(6,7,12,.64) 100%);
}

/* the loading ring */
.ring{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  width:44px;height:44px;color:var(--accent);opacity:.9;
  transition:opacity .6s var(--ease);
}
.ring circle{transition:stroke-dashoffset .16s linear;transform:rotate(-90deg);transform-origin:50% 50%}
.stage.video-ready .ring{opacity:0;pointer-events:none}
.stage.moved .cue{opacity:0}
.cue{
  position:absolute;left:50%;bottom:60px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);opacity:0;
  transition:opacity .9s var(--ease);
}
/* a transition, not a forwards animation: an animation's final value would win
   permanently and the retirement below would silently never apply */
.stage.cued:not(.moved) .cue{opacity:.75}
.cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:cueRun 2.6s var(--ease-soft) -.6s infinite}
@keyframes cueRun{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

/* ---- caption bands ---- */
.band{
  position:absolute;inset:0;pointer-events:none;opacity:0;
  display:flex;align-items:center;
  padding:0 var(--pad);
  text-shadow:var(--tshadow);
}
.band::before{
  content:"";position:absolute;inset:-6%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
}
.band .inner{position:relative;z-index:2;max-width:min(560px,46vw)}
.band h1{font-weight:700}
.band .kicker{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accent-hover);margin:0 0 16px;
}
.band h1,.band h2{
  font-family:var(--display);font-weight:700;
  font-size:clamp(34px,5.1vw,68px);line-height:1.02;letter-spacing:-.022em;
  margin:0 0 18px;
}
.band p{
  font-size:clamp(15px,1.35vw,19px);color:#D7DBE4;margin:0;max-width:34ch;
}

/* band positions, matched to each segment's calm lane */
.pos-right{justify-content:flex-end;text-align:left}
.pos-left{justify-content:flex-start}
.pos-top{align-items:flex-start;justify-content:center;text-align:center;padding-top:19vh}
.pos-top .inner{max-width:min(680px,74vw)}
.pos-top p{max-width:44ch;margin:0 auto}
.pos-center{justify-content:center;text-align:center}
.pos-center .inner{max-width:min(720px,80vw)}
.pos-center p{max-width:46ch;margin:0 auto}

.pos-left::before{background:radial-gradient(ellipse 62% 66% at 26% 50%,rgba(4,5,10,.72) 0%,rgba(4,5,10,.5) 44%,rgba(4,5,10,0) 76%)}
.pos-right::before{background:radial-gradient(ellipse 62% 66% at 74% 50%,rgba(4,5,10,.72) 0%,rgba(4,5,10,.5) 44%,rgba(4,5,10,0) 76%)}
.pos-top::before{background:radial-gradient(ellipse 78% 52% at 50% 26%,rgba(4,5,10,.76) 0%,rgba(4,5,10,.54) 46%,rgba(4,5,10,0) 78%)}
.pos-center::before{background:radial-gradient(ellipse 74% 64% at 50% 50%,rgba(4,5,10,.74) 0%,rgba(4,5,10,.52) 46%,rgba(4,5,10,0) 78%)}

/* the settle band's call to action row */
.settle-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px;pointer-events:auto}
.band .btn{text-shadow:none}

/* ---- split text primitives ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vis{display:block}
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;will-change:transform,opacity}

/* (a) approach from depth */
.e-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:scale(calc(.84 + .16*var(--kc)))}
/* (b) grid snap-align */
.e-grid .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* (c) blur to sharp */
.e-blur .stack{position:relative;display:block}
.e-blur .soft{position:absolute;inset:0;filter:blur(11px);opacity:calc(1 - var(--k,0))}
.e-blur .sharp{opacity:var(--k,0)}
/* (d) scatter */
.e-scatter .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px)))
            rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (e) halves parting */
.e-part .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateX(calc((1 - var(--kc))*var(--jx,0px)))}
/* (f) word punch with overshoot */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);
  transform:scale(calc(.62 + (.38 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (g) weave */
.e-weave .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*var(--jy,0px)))}
/* (h) staged rise for the settle */
.e-rise .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*26px))}
.e-rise .sub{opacity:clamp(0,(var(--k,0) - .6)*4,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .6)*4,1))*14px))}
.e-rise .settle-cta{opacity:clamp(0,(var(--k,0) - .76)*5,1);transform:translateY(calc((1 - clamp(0,(var(--k,0) - .76)*5,1))*14px))}

/* short screens: no room for the scroll cue */
@media (max-height:560px){.cue,.ring{display:none}}

/* ============================================================
   STATIC HERO (the five gates)
   These five queries must match the JS GATES array exactly.
   ============================================================ */
.static-hero{display:none;position:relative;min-height:100svh;z-index:1}
/* Only two cases still fall back to the static hero: reduced motion, and a
   landscape phone too short to hold a 100vh sticky stage. Phones in portrait
   now get the scroll journey and all eight captions; the video is simply not
   fetched there, so the poster carries it. */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{display:none}
  .static-hero{display:flex}
}
/* Each caption's entrance is paced in fractions of the hero's scroll length, so
   shortening the hero compresses every animation. 1500vh keeps roughly the same
   scroll distance per caption as the desktop's 1600vh, which is what makes the
   choreography readable rather than a snap. */
@media (max-width: 720px), (orientation: portrait) and (pointer: coarse){
  .hero{height:1500vh}
}
.static-hero .shot{position:absolute;inset:0;background-size:cover;background-position:50% 62%}
@media (orientation: portrait){.static-hero .shot{background-position:50% 28%}}
.static-hero .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,14,.72) 0%,rgba(8,9,14,.34) 34%,rgba(8,9,14,.86) 74%,rgba(8,9,14,.96) 100%)}
.static-hero .inner{position:relative;z-index:2;align-self:flex-end;padding:0 var(--pad) clamp(56px,11vh,110px);width:100%}
.static-hero .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hover);margin:0 0 16px}
.static-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(34px,8.6vw,60px);line-height:1.03;letter-spacing:-.022em;margin:0 0 18px;max-width:16ch;text-shadow:var(--tshadow)}
.static-hero p{font-size:17px;color:#D7DBE4;margin:0 0 30px;max-width:42ch;text-shadow:var(--tshadow)}
.static-hero .row{display:flex;gap:12px;flex-wrap:wrap}
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .static-hero .inner{padding-top:84px;padding-bottom:clamp(16px,4vh,32px)}
  .static-hero h1{font-size:clamp(26px,4.6vw,36px);margin-bottom:12px;max-width:22ch}
  .static-hero p{font-size:14.5px;margin-bottom:18px;max-width:52ch}
  .static-hero .kicker{margin-bottom:10px}
}

/* ============================================================
   PAGE SECTIONS
   ============================================================ */
main{position:relative;z-index:2;background:var(--canvas)}
section{padding:clamp(64px,8.5vh,104px) var(--pad);position:relative;scroll-margin-top:86px}
main{scroll-margin-top:86px}
.wrap{max-width:1200px;margin:0 auto}
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-hover);margin:0 0 18px;display:flex;align-items:center;gap:11px}
.kick::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.55}
h2.big{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.3vw,54px);line-height:1.06;letter-spacing:-.022em;margin:0 0 22px}
h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.9vw,24px);line-height:1.2;letter-spacing:-.012em;margin:0 0 12px}
.lede{font-size:clamp(16px,1.5vw,19px);color:var(--text-secondary);max-width:62ch;margin:0}
.rule{height:1px;background:linear-gradient(90deg,var(--panel-edge),transparent);border:0;margin:0}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}

/* --- proof bar --- */
.proof{border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge);background:var(--canvas-lift);padding-top:clamp(52px,8vh,84px);padding-bottom:clamp(52px,8vh,84px)}
.proof .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,60px)}
.stat .n{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.6vw,58px);line-height:1;letter-spacing:-.03em;display:block;margin-bottom:10px}
.stat .n em{font-style:normal;color:var(--steel);font-size:.46em;letter-spacing:0;margin-left:.24em}
.stat .l{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-secondary);margin:0}
.stat:nth-child(1) .rise{transition-delay:0s}
.stat:nth-child(2) .rise{transition-delay:.11s}
.stat:nth-child(3) .rise{transition-delay:.22s}
.proof.done .stat .rise{transition-delay:0s!important}
@media (max-width:760px){.proof .grid{grid-template-columns:1fr;gap:34px}}

/* --- replaces: three cards + the answer --- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px}
.card{
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;
  padding:30px 26px 32px;position:relative;overflow:hidden;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.card:hover{border-color:rgba(124,77,240,.42);transform:translateY(-4px)}
.card .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 16px}
.card p{margin:0;color:var(--text-secondary);font-size:15.5px}
.card .cost{display:block;margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--discharge);opacity:.86}
.cards .card:nth-child(1) .rise{transition-delay:0s}
.cards .card:nth-child(2) .rise{transition-delay:.1s}
.cards .card:nth-child(3) .rise{transition-delay:.2s}
.cards.done .card .rise{transition-delay:0s!important}
.answer{
  margin-top:20px;padding:30px 32px;border-radius:14px;
  border:1px solid rgba(124,77,240,.34);background:linear-gradient(180deg,rgba(124,77,240,.1),rgba(124,77,240,.03));
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
}
.answer p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(19px,2.2vw,27px);letter-spacing:-.015em;flex:1 1 320px}
@media (max-width:900px){.cards{grid-template-columns:1fr}}

/* --- how it works: the schematic --- */
.how{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.schematic{width:100%;height:auto;overflow:visible}
.schematic .track{stroke:var(--panel-edge);stroke-width:2;fill:none}
.schematic .flow{stroke:var(--accent);stroke-width:2.4;fill:none;stroke-linecap:round;
  stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 1.9s var(--ease-soft)}
.schematic.drawn .flow{stroke-dashoffset:0}
.schematic .lbl{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--text-secondary);letter-spacing:.06em}
.schematic .box{fill:var(--panel);stroke:var(--panel-edge);stroke-width:1.5}
.schematic .core{fill:var(--accent);opacity:.9}
.schematic .glow{fill:var(--accent);opacity:0;animation:corePulse 5s var(--ease-soft) -1.4s infinite}
.schematic .vortex path{stroke:var(--accent);stroke-width:11;stroke-linecap:round;fill:none}
.schematic .lbl.dim{fill:var(--steel)}
.schematic .flow{transition-delay:0s}
.schematic.drawn .flow:nth-of-type(2){transition-delay:.22s}
.schematic.drawn .flow:nth-of-type(3){transition-delay:.48s}
.schematic.drawn .flow:nth-of-type(4){transition-delay:.74s}
.schematic.drawn .flow:nth-of-type(5){transition-delay:1s}
@keyframes corePulse{0%,100%{opacity:.1}50%{opacity:.42}}
.radicals{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.radicals span{font-family:var(--mono);font-size:13px;padding:7px 13px;border-radius:99px;border:1px solid rgba(124,77,240,.4);color:var(--discharge)}
@media (max-width:900px){.how{grid-template-columns:1fr}}

/* --- the interactive moment --- */
.run{background:var(--canvas-lift);border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge)}
.run .inner{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.dial{
  position:relative;width:min(300px,72vw);aspect-ratio:1;margin:0 auto;
  display:grid;place-items:center;cursor:pointer;user-select:none;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background:none;border:0;padding:0;color:inherit;
}
.dial svg{width:100%;height:100%;overflow:visible}
.dial .blade{
  stroke:var(--steel);stroke-width:11;stroke-linecap:round;fill:none;
  transition:stroke .5s var(--ease);
}
.dial .blade-lit{
  stroke:var(--accent);stroke-width:11;stroke-linecap:round;fill:none;
  stroke-dasharray:var(--bl,70);
  stroke-dashoffset:calc(var(--bl,70) * (1 - var(--hold,0)));
}
.dial .rotor{transform-origin:50px 50px;transform:rotate(calc(var(--hold,0) * 62deg))}
.dial .halo{fill:var(--accent);opacity:calc(var(--hold,0) * .3)}
.dial .readout{
  position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-secondary);bottom:-2px;
}
.dial:focus-visible{outline:2px solid var(--accent-hover);outline-offset:12px;border-radius:50%}
.outs{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:11px}
.outs li{
  display:flex;align-items:baseline;gap:13px;font-size:16px;color:var(--text-secondary);
  opacity:.3;transform:translateX(-8px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .6s var(--ease);
}
.outs li.lit{opacity:1;transform:none;color:var(--text-primary)}
.outs li i{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--steel);
  transition:background .6s var(--ease),box-shadow .6s var(--ease);
}
.outs li.lit i{background:var(--accent);box-shadow:0 0 0 4px var(--accent-muted)}
@media (max-width:900px){.run .inner{grid-template-columns:1fr}}

/* --- installations --- */
.sites{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:52px}
.site{
  position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--panel-edge);
  aspect-ratio:4/5;background:var(--panel);
  transition:transform .55s var(--ease),border-color .55s var(--ease);
}
.site:hover{transform:translateY(-5px);border-color:rgba(124,77,240,.42)}
.site>.rise{position:absolute;inset:0}
.site img{width:100%;height:100%;object-fit:cover;opacity:.62;transition:opacity .55s var(--ease),transform .8s var(--ease)}
.site:hover img{opacity:.82;transform:scale(1.04)}
.site .meta{position:absolute;left:0;right:0;bottom:0;padding:20px 18px;background:linear-gradient(transparent,rgba(8,9,14,.93) 62%)}
.site .flow{font-family:var(--display);font-weight:700;font-size:23px;letter-spacing:-.02em;display:block;line-height:1.1}
.site .flow em{font-style:normal;font-size:.5em;color:var(--steel);margin-left:.3em;letter-spacing:0}
.site .who{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary);margin:6px 0 0}
.sites .site:nth-child(4n+1) .rise{transition-delay:0s}
.sites .site:nth-child(4n+2) .rise{transition-delay:.08s}
.sites .site:nth-child(4n+3) .rise{transition-delay:.16s}
.sites .site:nth-child(4n+4) .rise{transition-delay:.24s}
.sites.done .site .rise{transition-delay:0s!important}
.also{margin-top:22px;font-family:var(--mono);font-size:13px;color:var(--text-secondary)}
@media (max-width:560px){
  .nav .btn{font-size:10.5px;letter-spacing:.12em;padding:10px 13px}
}
@media (max-width:1000px){.sites{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.sites{grid-template-columns:1fr}}

/* --- facts --- */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(30px,5vw,70px);margin-top:44px}
.facts div{display:flex;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--panel-edge)}
.facts b{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:400;flex:0 0 26px}
.facts p{margin:0;font-size:16px;color:var(--text-secondary)}
@media (max-width:760px){.facts{grid-template-columns:1fr}}

/* --- faq --- */
.faq{max-width:860px;margin-top:44px}
details{border-bottom:1px solid var(--panel-edge)}
summary{
  cursor:pointer;list-style:none;padding:24px 40px 24px 0;position:relative;
  font-family:var(--display);font-weight:600;font-size:clamp(17px,1.75vw,21px);letter-spacing:-.012em;
  transition:color .35s var(--ease);
}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent-hover)}
summary::after{
  content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.6px solid var(--steel);border-bottom:1.6px solid var(--steel);
  transform:translateY(-70%) rotate(45deg);transition:transform .4s var(--ease),border-color .4s var(--ease);
}
details[open] summary::after{transform:translateY(-30%) rotate(225deg);border-color:var(--accent)}
details p{margin:0 0 26px;color:var(--text-secondary);max-width:66ch}

/* --- the form --- */
.flow-cta{background:var(--canvas-lift);border-top:1px solid var(--panel-edge)}
.flow-cta .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
form{display:grid;gap:16px}
.field{display:grid;gap:7px}
label{font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-secondary)}
input,select,textarea{
  font-family:var(--body);font-size:16px;color:var(--text-primary);
  background:var(--panel);border:1px solid var(--panel-edge);border-radius:9px;
  padding:13px 15px;width:100%;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}
input:hover,select:hover,textarea:hover{border-color:var(--steel)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:var(--canvas-lift)}
textarea{resize:vertical;min-height:92px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form button{margin-top:6px;justify-self:start;font-size:14px;padding:14px 26px;cursor:pointer;border:0}
.note{font-family:var(--mono);font-size:12px;color:var(--steel);margin:2px 0 0}
.sent{
  display:none;padding:26px 28px;border-radius:13px;
  border:1px solid rgba(124,77,240,.4);background:rgba(124,77,240,.08);
}
.sent.show{display:block}
.sent p{margin:0;color:var(--text-primary)}
.sent .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hover);margin:0 0 10px}
@media (max-width:900px){.flow-cta .inner{grid-template-columns:1fr}.two{grid-template-columns:1fr}}

/* --- footer --- */
footer{padding:clamp(56px,8vh,90px) var(--pad) 46px;border-top:1px solid var(--panel-edge)}
.foot{display:flex;justify-content:space-between;gap:34px;flex-wrap:wrap;align-items:flex-start}
.foot .brand{margin-bottom:16px}
.foot address{font-style:normal;color:var(--text-secondary);font-size:15px;line-height:1.9}
.foot address a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--panel-edge);transition:border-color .35s var(--ease)}
.foot address a:hover{border-color:var(--accent)}
.foot .cols{display:flex;gap:clamp(30px,5vw,72px);flex-wrap:wrap}
.foot h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 14px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot ul a{color:var(--text-secondary);text-decoration:none;font-size:15px;transition:color .35s var(--ease)}
.foot ul a:hover{color:var(--text-primary)}
.legal{margin-top:44px;padding-top:24px;border-top:1px solid var(--panel-edge);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.legal p{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--steel);letter-spacing:.05em}

/* --- the turning divider (the signature, at whisper level) --- */
.divider{display:flex;justify-content:center;padding:8px 0}
.divider svg{width:34px;height:34px;opacity:.4}
.divider .rotor{transform-origin:50px 50px;animation:vortex 42s linear -9s infinite}
@keyframes vortex{to{transform:rotate(360deg)}}
.divider path{stroke:var(--accent);stroke-width:11;stroke-linecap:round;fill:none}

/* ============================================================
   REDUCED MOTION, honoured completely and in both directions
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;
  }
  body{opacity:1}
  .rise{opacity:1;transform:none}
  .schematic .flow{stroke-dashoffset:0}
  .outs li{opacity:1;transform:none;color:var(--text-primary)}
  .outs li i{background:var(--accent)}
  .env::before{transform:none}
  .env .motes{display:none}
  /* positional transforms re-applied so nothing lands off screen */
  .nav .brand,.static-hero .inner{transform:none}
  .ring,.cue{display:none}
}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ============================================================
   INNER PAGES
   ============================================================ */

/* the nav on inner pages carries five links plus the button, so it
   collapses into a menu on narrow screens */
.burger{
  display:none;background:none;border:1px solid var(--panel-edge);border-radius:7px;
  width:44px;height:44px;cursor:pointer;color:var(--text-primary);align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .35s var(--ease)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.menu-open .burger span{background:transparent}
body.menu-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-links a.on{color:var(--text-primary)}
.nav-links a.on::after{content:"";display:block;height:1px;background:var(--accent);margin-top:4px}
@media (max-width:1000px){
  .nav-links a:not(.btn){display:none}
  .burger{display:inline-flex}
  body.menu-open .nav-links{
    position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(10,12,17,.955);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:var(--pad);z-index:55;
  }
  body.menu-open .nav-links a:not(.btn){display:block;font-size:22px;font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-transform:none}
  body.menu-open .nav-links .btn{margin-top:10px}
  /* the burger is taken out of the flex flow so it cannot shift sideways when
     the menu opens and .nav-links leaves the flow */
  .burger{position:absolute;right:var(--pad);top:16px;z-index:56}
  /* the burger sits over the bar, so the row must reserve its width or the
     call to action slides underneath it */
  .nav-links{padding-right:56px}
  body.menu-open .nav-links{padding-right:var(--pad)}
  /* backdrop-filter makes an element the containing block for fixed-position
     descendants, which would size this overlay to the nav instead of the
     viewport, so the blur is dropped while the menu is open */
  /* transition:none matters: a transitioning backdrop-filter still holds a
     near-zero blur for half a second, and any blur at all re-creates the
     containing block, so the removal has to be instant */
  body.menu-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-bottom-color:transparent;transition:none}
  body.menu-open .brand{position:relative;z-index:56}
  body.menu-open{overflow:hidden}
}

/* the inner-page hero: a composed still, shorter than the journey */
.page-hero{position:relative;min-height:min(72vh,640px);display:flex;align-items:flex-end;z-index:1;overflow:hidden}
.page-hero .shot{position:absolute;inset:0;background-size:cover;background-position:center}
.page-hero .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,14,20,.55) 0%,rgba(12,14,20,.3) 40%,rgba(12,14,20,.96) 100%)}
.page-hero .inner{position:relative;z-index:2;padding:calc(90px + 8vh) var(--pad) clamp(44px,7vh,72px);width:100%;max-width:1200px;margin:0 auto}
.page-hero .kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#C7B2FF;margin:0 0 16px;text-shadow:0 1px 2px rgba(6,8,14,.92),0 2px 14px rgba(6,8,14,.85)}
.page-hero h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.6vw,72px);line-height:1.02;letter-spacing:-.024em;margin:0 0 18px;max-width:14ch;text-shadow:var(--tshadow)}
.page-hero p{font-size:clamp(16px,1.5vw,20px);color:#D7DBE4;margin:0;max-width:52ch;text-shadow:var(--tshadow)}

/* long-form text */
.prose{max-width:68ch}
.lede+.prose{margin-top:34px}
.prose p{margin:0 0 1.25em;color:var(--text-secondary);font-size:clamp(16px,1.35vw,18px)}
.prose p strong{color:var(--text-primary);font-weight:500}
.prose h3{margin-top:2.2em}
.prose ul{margin:0 0 1.4em;padding-left:1.2em;color:var(--text-secondary)}
.prose li{margin:.35em 0}
.prose li::marker{color:var(--accent)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start;margin-top:44px}
.two-col.sticky-figure>.fig{position:sticky;top:100px}
/* A portrait photograph in a half-width column runs far taller than the prose
   beside it. Cap the height and let the figure shrink to the picture, so the
   whole frame still shows, just smaller. */
.two-col>.fig img{max-height:520px;width:auto;max-width:100%}
.two-col>.fig{width:fit-content;max-width:100%}
@media (max-width:900px){.two-col{grid-template-columns:1fr}.two-col.sticky-figure>.fig{position:static}}

/* figures */
.fig{border-radius:14px;overflow:hidden;border:1px solid var(--panel-edge);background:var(--panel)}
.fig img{width:100%;height:auto;display:block}
.fig figcaption{padding:12px 16px;font-family:var(--mono);font-size:12px;color:var(--steel);letter-spacing:.04em}
.fig+.fig{margin-top:16px}
.fig-row>.fig+.fig{margin-top:0}
.fig-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:44px}
@media (max-width:900px){.fig-row{grid-template-columns:1fr}}

/* a numbered list of steps with equal treatment */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px;counter-reset:step}
.step{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:28px 26px 30px;position:relative}
.step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.14em;display:block;margin-bottom:16px}
.step h3{margin:0 0 10px;font-size:clamp(17px,1.6vw,21px)}
.step p{margin:0;color:var(--text-secondary);font-size:15.5px}
.steps .step:nth-child(1) .rise{transition-delay:0s}
.steps .step:nth-child(2) .rise{transition-delay:.1s}
.steps .step:nth-child(3) .rise{transition-delay:.2s}
.steps.done .step .rise{transition-delay:0s!important}
@media (max-width:900px){.steps{grid-template-columns:1fr}}

/* a callout that holds one idea */
.callout{
  margin:44px 0 0;padding:30px 32px;border-radius:14px;
  border:1px solid rgba(124,77,240,.34);background:linear-gradient(180deg,rgba(124,77,240,.1),rgba(124,77,240,.03));
}
.callout p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(18px,2vw,25px);letter-spacing:-.015em;line-height:1.3}
.callout p+p{margin-top:12px;font-family:var(--body);font-weight:400;font-size:16px;color:var(--text-secondary);letter-spacing:0}

/* a compact two-column comparison */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:44px}
.compare>div{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:28px 26px}
.compare>div.pura{border-color:rgba(124,77,240,.42);background:linear-gradient(180deg,rgba(124,77,240,.09),var(--panel))}
.compare .tag{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin:0 0 14px}
.compare .pura .tag{color:var(--accent-hover)}
.compare ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.compare li{display:flex;gap:12px;align-items:baseline;color:var(--text-secondary);font-size:15.5px}
.compare li::before{content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:var(--steel);transform:translateY(-2px)}
.compare .pura li::before{background:var(--accent)}
.compare .pura li{color:var(--text-primary)}
@media (max-width:800px){.compare{grid-template-columns:1fr}}

/* the sector strip */
.sectors{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.sectors span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;padding:8px 14px;border-radius:99px;border:1px solid var(--panel-edge);color:var(--text-secondary)}

/* the contact page */
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.contact-card{background:var(--panel);border:1px solid var(--panel-edge);border-radius:14px;padding:30px 28px;margin-top:22px}
.contact-card h3{margin:0 0 8px}
.contact-card p{margin:0;color:var(--text-secondary)}
.contact-card a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--panel-edge);transition:border-color .35s var(--ease)}
.contact-card a:hover{border-color:var(--accent)}
.contact-card .big{font-family:var(--display);font-weight:600;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.015em;display:block;margin:6px 0 4px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}

/* page-level rhythm: the first section after an inner hero sits closer */
.page-hero+main>section:first-child{padding-top:clamp(56px,9vh,96px)}

/* ============================================================
   VIDEO PROOF
   A click-to-load facade: the poster is a local file, so nothing
   is requested from YouTube until the visitor asks for playback.
   No autoplay, and reduced motion is honoured by the shared rules.
   ============================================================ */
.videos{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:44px}
.videos.one{grid-template-columns:1fr;max-width:820px}
/* The footage is shot vertically and sits letterboxed inside a 16:9 still, so a
   16:9 card is mostly black bars. This row is narrow and tall, and cover-crops
   straight to the picture. */
.videos.three{grid-template-columns:repeat(3,1fr);max-width:none}
.videos.three .thumb{aspect-ratio:3/5}
@media (max-width:700px){.videos.three{grid-template-columns:1fr;max-width:420px}}
@media (max-width:800px){.videos{grid-template-columns:1fr}}

.video{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--panel-edge);
  border-radius:14px;overflow:hidden;background:var(--panel);cursor:pointer;color:inherit;
  text-align:left;font:inherit;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.video:hover{border-color:rgba(124,77,240,.42);transform:translateY(-4px)}
/* display:block matters: these are spans inside a button, and neither
   aspect-ratio nor absolute positioning works on an inline box */
.video .thumb{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0C11}
.video .thumb img{width:100%;height:100%;object-fit:cover;opacity:.72;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.video:hover .thumb img{opacity:.92;transform:scale(1.03)}
.video .thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,14,.15) 0%,rgba(8,9,14,.1) 45%,rgba(8,9,14,.8) 100%);
}
.video .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  background:rgba(124,77,240,.92);display:grid;place-items:center;
  box-shadow:0 10px 40px rgba(4,5,10,.55);
  transition:background .4s var(--ease),transform .4s var(--ease);
}
.video:hover .play{background:var(--accent-hover);transform:translate(-50%,-50%) scale(1.07)}
.video .play svg{width:22px;height:22px;margin-left:3px;fill:#fff}
.video .meta{display:block;position:relative;z-index:2;padding:16px 18px 18px}
.video .meta b{display:block;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:5px}
.video .meta span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary)}
.video iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.video.playing{cursor:default;transform:none}
.video.playing:hover{transform:none}
.video-note{margin-top:18px;font-family:var(--mono);font-size:12px;color:var(--steel)}

/* figures sitting side by side in a row must be the same height, or the row
   reads as a hole; the image fills its tile and crops rather than setting it */
.fig-row{align-items:stretch}
.fig-row .fig{display:flex;flex-direction:column}
.fig-row .fig img{aspect-ratio:4/3;object-fit:cover;object-position:center;flex:0 0 auto}
.fig-row .fig figcaption{flex:1 1 auto}

/* a prose block that no longer has a figure beside it */
.prose-only{margin-top:44px;max-width:62ch}

/* the honeypot field: present for bots, never shown or focusable for people */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note:empty{display:none}
.form-note.bad{color:#FFAFAF}

/* ============================================================
   LANGUAGE SWITCH
   A small bordered tag in the bar; inside the phone menu it becomes
   a spelled-out line, because "EN" alone on a big overlay reads as
   a stray abbreviation.
   ============================================================ */
.nav-links .lang{border:1px solid var(--panel-edge);border-radius:5px;padding:5px 8px;font-size:11.5px;line-height:1;letter-spacing:.12em}
.nav-links .lang:hover{border-color:var(--accent)}
.nav-links .lang .long{display:none}
@media (max-width:1000px){
  body.menu-open .nav-links a.lang{border:0;padding:0;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
  body.menu-open .nav-links .lang .short{display:none}
  body.menu-open .nav-links .lang .long{display:inline}
}


/* The Italian labels are longer, so the Italian bar needs about 190px more
   than the English one and would wrap between 1001 and 1200px. There the
   Italian pages collapse into the menu early; the English bar is untouched. */
@media (min-width:1001px) and (max-width:1200px){
  html[lang="it"] .nav-links a:not(.btn){display:none}
  html[lang="it"] .burger{display:inline-flex}
  html[lang="it"] body.menu-open .nav-links{
    position:fixed;left:0;right:0;top:0;bottom:0;background:rgba(10,12,17,.955);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;
    padding:var(--pad);z-index:55;
  }
  html[lang="it"] body.menu-open .nav-links a:not(.btn){display:block;font-size:22px;font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-transform:none}
  html[lang="it"] body.menu-open .nav-links .btn{margin-top:10px}
  html[lang="it"] .burger{position:absolute;right:var(--pad);top:16px;z-index:56}
  html[lang="it"] .nav-links{padding-right:56px}
  html[lang="it"] body.menu-open .nav-links{padding-right:var(--pad)}
  html[lang="it"] body.menu-open .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:transparent;border-bottom-color:transparent;transition:none}
  html[lang="it"] body.menu-open .brand{position:relative;z-index:56}
  html[lang="it"] body.menu-open{overflow:hidden}
  html[lang="it"] body.menu-open .nav-links a.lang{border:0;padding:0;font-family:var(--mono);font-size:14px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary)}
  html[lang="it"] body.menu-open .nav-links .lang .short{display:none}
  html[lang="it"] body.menu-open .nav-links .lang .long{display:inline}
}

/* "Inviateci la portata" is three words longer than "Send us your flow" and
   runs into the PURA mark on a phone, so the bar says "Scriveteci" there. */
.nav .btn .cta-short{display:none}
@media (max-width:560px){
  .nav .btn .cta-long{display:none}
  .nav .btn .cta-short{display:inline}
}