/* ============================================================
   LAPOVISION · lapovision.studio · world-class rebuild (M-064)
   Paradiso di Sale: silence, suspension, held light, warm whites.
   Two voices: Instrument Serif SENTE, Inter INFORMA. One accent: bronze.
   The world breathes between a dark cinematic plane (the sky) and the
   pale salt shore (the terra). Aman fuoco-unico. Feadship progressive text.
   Owner: HEAD OF ENGINEERING. iOS-safe: no blur, no bg-fixed, safe-area.
   ============================================================ */

/* ---- OFL fonts, self-hosted (SIL OFL 1.1). No Google Fonts, no non-OFL. ---- */
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("/assets/fonts/InstrumentSerif-Italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}

:root{
  /* warm, never absolute black */
  --ink:#0E0C0B; --ink2:#15110D; --teak:#211810;
  --sale:#F1ECE6; --sand:#E5DCCD; --stone:#D2C6B4;
  --mineral:#C9BFB0; --ash:#8E8576;
  --bronze:#A07E50; --bronze-soft:#BC9A68;
  --white:#F8F4EE;                       /* titles on image, always white */
  --optic:#E7C64A;                       /* the one saturated exception, DOLOMIA only */
  --line-d:rgba(241,236,230,.12);
  --line-l:rgba(20,16,12,.14);
  --serif:"Instrument Serif",Georgia,serif;
  --grot:"Inter",-apple-system,Segoe UI,sans-serif;
  --ls:.30em;
  --gut:clamp(24px,6vw,120px);
}

*{margin:0;padding:0;box-sizing:border-box}
/* no global smooth-scroll (web law + it fights scroll-snap on the html scroller, see .fleet).
   Any page that wants smooth anchor-jumps opts in locally, JS pagers own their own easing. */
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--grot); color:var(--mineral); background:var(--ink);
  line-height:1.55; letter-spacing:.005em; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
a.soglia{display:flex}
/* no widows (Founder law): balance on titles, pretty on prose; JS nbsp is the fallback */
h1,h2,h3,.display,.whisper,.soglia-title,.bhero-frase,.cap-line,.zone-cap .l,.pcard-name,.founder-frase{text-wrap:balance}
p,.intro,.lede p,.soglia-line,.pcard-line,.disclosure{text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
::selection{background:var(--bronze);color:var(--ink)}

/* ============================================================
   z0 · the cinematic plane (the sky of the world)
   position:fixed promoted to its own GPU layer, NOT bg-fixed (iOS).
   ============================================================ */
.film{position:fixed;inset:0;z-index:0;background:#0b0a09;
  transform:translateZ(0);will-change:transform;backface-visibility:hidden}
.film-video{width:100%;height:100%;object-fit:cover;display:block;transform:translateZ(0)}
.film-veil{position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(130% 90% at 50% 28%, transparent 46%, rgba(10,9,8,.30) 100%),
    linear-gradient(180deg, rgba(10,9,8,.28) 0%, transparent 24%, transparent 68%, rgba(10,9,8,.46) 100%);
}

/* z1 · grain (tempo, patina) */
.grain{position:fixed;inset:-20%;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,.bar,.frame{position:relative;z-index:3}

/* z9 · scroll progress (one accent) */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--bronze),var(--bronze-soft));
  transition:transform .1s linear}

/* z4 · dossier frame (Tesla metadata, a quiet signature) */
.frame{position:fixed;inset:0;z-index:4;pointer-events:none;
  font-family:var(--grot);font-size:10px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash)}
.frame span{position:absolute;opacity:.62}
.frame-bl{left:var(--gut);bottom:22px}
.frame-br{right:var(--gut);bottom:22px}
.frame-br i{font-style:normal;color:var(--bronze-soft)}
@media(max-width:760px){.frame-bl{display:none}}

/* ============================================================
   whisper bar (dissolves at the top so the logo stands alone)
   ============================================================ */
.bar{position:fixed;top:0;left:0;right:0;z-index:8;display:flex;align-items:center;justify-content:space-between;
  padding:max(16px,env(safe-area-inset-top)) max(var(--gut),env(safe-area-inset-right)) 16px max(var(--gut),env(safe-area-inset-left));
  opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .6s ease, transform .6s ease;
  background:linear-gradient(180deg, rgba(10,9,8,.46), transparent)}
.bar.show{opacity:1;transform:none;pointer-events:auto}
.bar.solid{background:linear-gradient(180deg, rgba(10,9,8,.72), rgba(10,9,8,.30))}
.bar-brand img{width:116px;height:auto;opacity:.94}
.bar-right{display:flex;align-items:center;gap:clamp(16px,2vw,34px)}
.bar-right a{font-size:11px;letter-spacing:.18em;text-transform:lowercase;color:var(--stone);opacity:.78;transition:opacity .3s}
.bar-right a:hover{opacity:1}
.bar-right a.on{opacity:1;color:var(--white)}
.lang{background:none;border:0;color:var(--stone);font-family:var(--grot);font-size:11px;letter-spacing:.14em;cursor:pointer;opacity:.8;display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
.lang .sep{margin:0 5px;opacity:.5}
.lang .l-it{opacity:.42}
.lang.it .l-en{opacity:.42}.lang.it .l-it{opacity:1}

/* ============================================================
   mobile nav sheet (burger), one shared component, markup injected by js/site.js.
   Hidden on desktop; on <=760px the burger replaces the hidden bar links.
   Sheet is on the salt surface (riva di sale), no blur, iOS-safe. */
.bar-burger{display:none;background:none;border:0;cursor:pointer;color:var(--stone);
  width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;
  padding:0;margin:0 -8px 0 0;-webkit-tap-highlight-color:transparent}
.bar-burger .bl{display:block;width:22px;height:1.5px;background:currentColor;border-radius:2px}
.bar-burger .bl+.bl{margin-top:5px}
body.nav-open{overflow:hidden}
.navsheet{position:fixed;inset:0;z-index:20;background:var(--salt);color:var(--salt-ink);
  display:flex;flex-direction:column;
  padding:max(18px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left));
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .24s ease, visibility 0s linear .24s}
.navsheet.is-open{opacity:1;pointer-events:auto;visibility:visible;
  transition:opacity .24s ease}
.navsheet-top{display:flex;align-items:center;justify-content:space-between;min-height:44px}
.navsheet-brand{font-family:var(--grot);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--salt-muted)}
.navsheet-close{background:none;border:0;cursor:pointer;color:var(--salt-ink);width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;padding:0;margin-right:-8px;font-size:24px;line-height:1;
  -webkit-tap-highlight-color:transparent}
.navsheet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:center;flex:1;gap:2px}
.navsheet-list li{margin:0}
.navsheet-list a{display:flex;align-items:center;min-height:58px;
  font-family:var(--serif);font-size:clamp(30px,8.5vw,44px);line-height:1.06;color:var(--salt-ink);
  text-decoration:none;letter-spacing:.005em;border-bottom:1px solid rgba(42,33,26,.12);text-transform:none}
.navsheet-list a.on{color:var(--salt-muted)}
.navsheet-foot{min-height:44px;display:flex;align-items:center}
.navsheet .lang{color:var(--salt-muted);opacity:1;padding-left:0}
@media(prefers-reduced-motion:reduce){.navsheet{transition:opacity .01s linear,visibility 0s}}

/* ============================================================
   ACT 0 · the logo, alone  +  progressive hero line
   ============================================================ */
.open{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.open-logo img{width:min(52vw,640px);height:auto;animation:rise 1.9s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.open-cue{position:absolute;bottom:calc(40px + env(safe-area-inset-bottom));left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:14px;
  font-size:10px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash);opacity:0;animation:fade 2s ease 1.2s forwards}
.cue-line{width:1px;height:48px;background:linear-gradient(var(--ash),transparent);opacity:.5;animation:breathe 3.6s ease-in-out infinite}
@keyframes fade{to{opacity:.72}}
@keyframes breathe{0%,100%{transform:scaleY(.6);opacity:.35}50%{transform:scaleY(1);opacity:.7}}

/* THE FRASE, progressive reveal (Feadship): the line descends one clause at a time */
.thesis-hero{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:14svh var(--gut)}
/* center-fix: the wrapper is a centered flex column so every child (h1, sub, cta) is centered
   as a flex item regardless of its own max-width, instead of a max-width block that left-aligns */
.thesis-hero>div{display:flex;flex-direction:column;align-items:center;width:100%}
.thesis-hero .frase{font-family:var(--serif);font-weight:400;color:var(--white);
  font-size:clamp(30px,5.4vw,74px);line-height:1.08;letter-spacing:-.015em;max-width:17ch;margin-inline:auto;
  text-shadow:0 1px 40px rgba(8,7,6,.55)}
.thesis-hero .sub{margin-top:clamp(22px,3vw,34px);font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone)}
.thesis-hero .cta{margin-top:clamp(26px,3.4vw,40px)}
/* clause reveal */
.clause{display:inline;opacity:0;filter:blur(6px);transform:translateY(10px);
  transition:opacity 1s cubic-bezier(.2,.7,.2,1),filter 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.thesis-hero.in .clause{opacity:1;filter:none;transform:none}
.thesis-hero.in .clause.c2{transition-delay:.5s}
.thesis-hero.in .clause.c3{transition-delay:1s}

/* ============================================================
   BREATH · a line floating in the film
   ============================================================ */
.breath{position:relative;min-height:64svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.whisper{font-family:var(--serif);font-weight:400;color:var(--sale);font-size:clamp(26px,4.4vw,56px);line-height:1.12;letter-spacing:-.01em;max-width:18ch;text-shadow:0 1px 40px rgba(8,7,6,.5)}
.whisper.sm{font-family:var(--grot);font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:var(--stone);max-width:42ch;text-shadow:none}

/* ============================================================
   THE TWO THRESHOLDS · THE FLEET / THE OBJECTS (Aman fuoco-unico)
   one full-bleed still, white title, one line, one entry. No grid.
   ============================================================ */
.soglia{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#0b0a09}
.soglia-media{position:absolute;inset:0;z-index:0}
.soglia-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 8s cubic-bezier(.2,.7,.2,1)}
.soglia.in .soglia-media img{transform:scale(1)}
.soglia::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.28) 0%, transparent 30%, transparent 48%, rgba(8,7,6,.74) 100%)}
.soglia-in{position:relative;z-index:2;padding:0 var(--gut) clamp(48px,10vh,120px);max-width:1180px;margin:0 auto;width:100%}
.soglia-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:16px;opacity:.9}
.soglia-title{font-family:var(--serif);font-weight:400;color:var(--white);font-size:clamp(46px,10vw,132px);line-height:.98;letter-spacing:-.02em}
/* proper name (boat/product) = Inter 800, the IG display weight (Founder 28/8 14:50, lock 19).
   LA FRASE / payoffs stay Instrument Serif; only real names carry .is-name. */
.soglia-title.is-name,.bhero-frase.is-name{font-family:var(--grot);font-weight:800;letter-spacing:-.03em}
.soglia-line{margin-top:clamp(16px,2vw,24px);font-size:clamp(15px,1.5vw,19px);line-height:1.55;color:var(--sale);max-width:44ch}
.soglia-go{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(22px,3vw,34px);font-size:13px;letter-spacing:.06em;color:var(--white);
  border-bottom:1px solid var(--bronze-soft);padding-bottom:5px;transition:letter-spacing .4s ease,gap .4s ease}
.soglia-go:hover{letter-spacing:.1em;gap:.9em}

/* ============================================================
   PANELS · the material shore (emersione)
   ============================================================ */
.panel{position:relative;padding:clamp(80px,14vh,200px) 0}
.panel .wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)}
.panel.dark{background:linear-gradient(180deg,var(--ink) 0%, var(--ink2) 100%);color:var(--mineral)}
.panel.dark::before,.panel.warm::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--line-d)}
.panel.warm{background:linear-gradient(180deg,var(--sale) 0%, var(--sand) 100%);color:var(--teak)}
.panel.warm::before{background:var(--line-l)}

.ey{display:flex;align-items:baseline;gap:16px;margin-bottom:30px;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash)}
.ey.center{justify-content:center}
.ey .num{font-family:var(--serif);font-size:22px;letter-spacing:0;color:var(--bronze)}
.panel.warm .ey{color:#8a7a63}.panel.warm .ey .num{color:var(--bronze)}

.display{font-family:var(--serif);font-weight:400;line-height:1.02;letter-spacing:-.015em;font-size:clamp(34px,6vw,76px);max-width:16ch}
.panel.dark .display{color:var(--sale)}
.panel.warm .display{color:var(--teak)}
.display.big{font-size:clamp(46px,9vw,118px);max-width:none}

.lede{display:flex;flex-direction:column;gap:22px;margin-top:38px;max-width:60ch}
.lede p,.intro{font-size:clamp(16px,1.55vw,20px);line-height:1.62}
.panel.dark .lede p,.panel.dark .intro{color:var(--mineral)}
.panel.warm .intro{color:#5a4c3c}
.intro{margin-top:36px;max-width:56ch}
/* LA FRASE · the designer's closing payoff (Founder 29/8) · Instrument Serif, light on dark */
.founder-frase{font-family:var(--serif);font-weight:400;font-size:clamp(26px,4vw,48px);line-height:1.08;letter-spacing:-.015em;margin-top:clamp(30px,4vh,52px);max-width:20ch}
.panel.dark .founder-frase{color:var(--sale)}
.panel.warm .founder-frase{color:var(--teak)}
.seal{font-size:14px!important;letter-spacing:.02em;color:var(--ash)!important;font-style:italic}

/* diptych */
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:60px;background:var(--line-l)}
.dip{background:var(--sale);padding:clamp(26px,4vw,52px) clamp(22px,3vw,44px)}
.dip .k{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--bronze);margin-bottom:18px}
.dip .v{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);line-height:1.22;color:var(--teak)}
.dip .v.strong{color:#1b130c}

/* cta */
.cta{display:inline-block;margin-top:40px;font-size:13px;letter-spacing:.05em;border-bottom:1px solid var(--bronze);padding-bottom:4px;transition:opacity .3s, letter-spacing .3s}
.panel.dark .cta,.thesis-hero .cta{color:var(--sale)}.panel.warm .cta{color:var(--teak)}
.cta:hover{letter-spacing:.09em;opacity:.85}

/* ============================================================
   SHOT · full-bleed emotional image (fuoco unico, white caption)
   ============================================================ */
.shot{position:relative;height:100svh;overflow:hidden;background:#0b0a09}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.shot.in img{transform:scale(1)}
.shot::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.22) 0%, transparent 26%, transparent 56%, rgba(8,7,6,.62) 100%)}
.shot-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(34px,7vh,90px);z-index:2}
.cap-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:14px;opacity:.9}
.cap-line{font-family:var(--serif);font-weight:400;color:var(--white);font-size:clamp(24px,4vw,50px);line-height:1.08;letter-spacing:-.01em;max-width:20ch}

/* ============================================================
   SCHEDA · boat page hero (film or still) + spec metadata (Tesla)
   ============================================================ */
.bhero{position:relative;height:100svh;overflow:hidden;background:#0b0a09}
.bhero video,.bhero img.bhero-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.bhero img.bhero-still{opacity:1}
.bhero video.is-live{opacity:1}
.bhero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(8,7,6,.30) 0%, transparent 34%, transparent 52%, rgba(8,7,6,.72) 100%)}
.bhero-in{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(40px,9vh,110px);z-index:2}
.bhero-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:16px}
.bhero-frase{font-family:var(--serif);color:var(--white);font-size:clamp(28px,5vw,66px);line-height:1.05;letter-spacing:-.015em;max-width:18ch;text-shadow:0 1px 40px rgba(8,7,6,.5)}
.bhero-frase.is-name{font-size:clamp(34px,6vw,78px);line-height:1.0}
.bhero-sub{margin-top:clamp(12px,1.6vw,18px);color:var(--sale);font-size:clamp(15px,1.6vw,19px);line-height:1.5;max-width:32ch;text-shadow:0 1px 30px rgba(8,7,6,.5)}

.specstrip{display:flex;flex-wrap:wrap;gap:10px 40px;padding:clamp(26px,4vw,44px) var(--gut);background:var(--ink2);
  border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d)}
.specstrip .sp{display:flex;flex-direction:column;gap:6px}
.specstrip .sp b{font-family:var(--grot);font-weight:400;font-variant-numeric:tabular-nums;font-size:clamp(16px,2vw,22px);color:var(--sale);letter-spacing:0}
.specstrip .sp span{font-size:10px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--ash)}

/* zone: one image per zone, one honest line, white on image */
.zone{position:relative;height:92svh;overflow:hidden;background:#0b0a09}
.zone img{width:100%;height:100%;object-fit:cover;transform:scale(1.05);transition:transform 2.6s cubic-bezier(.2,.7,.2,1)}
.zone.in img{transform:scale(1)}
.zone::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg, rgba(8,7,6,.16) 0%, transparent 40%, rgba(8,7,6,.62) 100%)}
.zone-cap{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(30px,6vh,70px);z-index:2}
.zone-cap .k{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:10px}
.zone-cap .l{font-family:var(--serif);color:var(--white);font-size:clamp(22px,3.4vw,40px);line-height:1.1;max-width:22ch}
@media(max-width:760px){.zone{height:74svh}}

/* ============================================================
   PRODUCTS · the objects as works (Carpenters model)
   ============================================================ */
.pobj{position:relative}
.pcard{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(30px,5vw,80px);
  max-width:1180px;margin:0 auto;padding:clamp(70px,12vh,150px) var(--gut)}
.pcard-media{aspect-ratio:4/5;overflow:hidden;background:#0b0a09;border:1px solid var(--line-l)}
.pcard-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.pcard:hover .pcard-media img{transform:scale(1.06)}
.pcard-ey{font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--salt-muted)}
.pcard-name{font-family:var(--serif);font-size:clamp(34px,5vw,64px);line-height:1;color:var(--teak);margin:12px 0 6px}
.pcard-line{font-size:clamp(15px,1.5vw,19px);color:var(--salt-ink);max-width:40ch;line-height:1.55}
.pcard-ed{margin-top:16px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--bronze)}
.pcard-go{display:inline-block;margin-top:22px;font-size:13px;letter-spacing:.05em;color:var(--teak);border-bottom:1px solid var(--bronze);padding-bottom:4px;transition:letter-spacing .4s ease}
.pcard-go:hover{letter-spacing:.09em}
@media(max-width:820px){.pcard{grid-template-columns:1fr;gap:28px}}

/* ============================================================
   GATE WALL · /unlock
   ============================================================ */
.wall{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:14svh var(--gut) 8svh;text-align:center}
.wall-in{max-width:520px;width:100%}
.wall-logo img{width:min(52vw,240px);margin:0 auto clamp(40px,7vh,72px)}
.wall h1{font-family:var(--serif);font-weight:400;color:var(--sale);font-size:clamp(30px,5vw,52px);line-height:1.05;letter-spacing:-.015em}
.wall p{margin:18px auto 0;max-width:38ch;color:var(--mineral);font-size:clamp(15px,1.5vw,18px);line-height:1.6}
.wform{margin-top:clamp(34px,5vh,52px);display:flex;flex-direction:column;gap:12px}
.wform input{width:100%;height:52px;background:rgba(241,236,230,.05);border:1px solid var(--line-d);color:var(--sale);
  font-family:var(--grot);font-size:16px;letter-spacing:.02em;padding:0 18px;border-radius:var(--r1);transition:border-color .3s}
.wform input::placeholder{color:var(--ash)}
.wform input:focus{outline:none;border-color:var(--bronze-soft)}
.wform button{height:52px;background:var(--sale);color:var(--ink);border:0;border-radius:var(--r2);font-family:var(--grot);
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:transform .16s ease-out,opacity .3s}
.wform button:active{transform:scale(.98)}
.wform button:hover{opacity:.92}
.werr{min-height:20px;margin-top:6px;font-size:12px;letter-spacing:.04em;color:var(--bronze-soft)}
.wsep{margin:clamp(40px,6vh,60px) 0 0;padding-top:clamp(34px,5vh,48px);border-top:1px solid var(--line-d)}
.wsep .lead-t{font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash);margin-bottom:16px}
.wsep p{margin-top:0}
.wlead{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.wnote{margin-top:16px;font-size:11px;line-height:1.6;color:var(--ash);opacity:.8;max-width:40ch;margin-inline:auto}
.wback{display:inline-block;margin-top:clamp(34px,5vh,48px);font-size:11px;letter-spacing:.16em;text-transform:lowercase;color:var(--stone);opacity:.7}
.wback:hover{opacity:1}

/* ============================================================
   LANDING · the warm shore + disclosure (site-wide, D-074)
   ============================================================ */
.land{position:relative;z-index:3;background:linear-gradient(180deg,var(--sand) 0%, var(--sale) 34%);color:var(--teak);text-align:center;padding:clamp(110px,20vh,260px) var(--gut) 64px}
.land-in{max-width:900px;margin:0 auto}
.land .display.big{margin:18px auto 0;color:var(--teak)}
.land-sub{font-size:12px;letter-spacing:.16em;text-transform:lowercase;color:#8a7a63;margin:26px 0 12px}
.land-mail{display:inline-block;font-size:clamp(17px,2.4vw,24px);color:var(--teak);border-bottom:1px solid var(--bronze);padding-bottom:5px;transition:letter-spacing .3s}
.land-mail:hover{letter-spacing:.02em}
.land-mail.slot{opacity:.5;border-bottom-style:dashed;cursor:default}
.land-ig{display:block;width:fit-content;margin:26px auto 0;font-size:12px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--bronze);border-bottom:1px solid transparent;transition:border-color .5s ease}
.land-ig:hover{border-bottom-color:var(--bronze)}
.land-mark{margin:clamp(70px,14vh,150px) auto 40px;opacity:.9}
.land-mark img{width:min(44vw,280px);height:auto;margin:0 auto}
.land-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;font-size:10px;letter-spacing:.16em;text-transform:lowercase;color:#9a8a72}

/* disclosure (safe-harbor D-074), quiet, always present */
.disclosure{max-width:60ch;margin:clamp(40px,6vh,60px) auto 0;padding-top:clamp(26px,4vh,40px);border-top:1px solid var(--line-l);
  font-size:11px;line-height:1.7;letter-spacing:.02em;color:var(--salt-muted)}
.panel.dark .disclosure,.bhero + * .disclosure{border-top-color:var(--line-d);color:var(--ash)}
.disclosure b{font-weight:400;color:#7a6a52}

/* ============================================================
   reveal
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1.15s cubic-bezier(.2,.7,.2,1),transform 1.15s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ============================================================
   responsive
   ============================================================ */
@media(max-width:760px){
  .bar-right a:not(.lang){display:none}
  .bar-burger{display:inline-flex}
  .open-logo img{width:80vw}
  .diptych{grid-template-columns:1fr}
  .whisper{max-width:14ch}
  .shot{height:86svh}
  .specstrip{gap:14px 26px}
  .grain{display:none}   /* fixed mix-blend grain recomposites the viewport each frame on mobile */
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal,.clause{opacity:1;transform:none;filter:none}
  .open-cue{opacity:.72}
  .progress{display:none}
}

/* ondata 3B: image held for legal review (no bytes served) */
.zone-hold{width:100%;height:100%;min-height:52vh;display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--ash);font-family:var(--grot);font-size:11px;letter-spacing:var(--ls);text-transform:lowercase}

/* ---- ONDATA C · contact (values in js/site.js), at a glance, picture full-bleed ---- */
.contact-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;margin-top:clamp(22px,3vw,34px)}
/* contact row (populated by js/contact.js): icon height = text size (1em), centered inline. Same on desktop and phone (LVPO-SISTEMAZIONE-3008, Founder 30/8). */
.contact-link{display:inline-flex;align-items:center;gap:.55em;min-height:44px;font-size:clamp(16px,2vw,21px);color:var(--teak);border-bottom:1px solid var(--bronze);transition:letter-spacing .3s}
.contact-link:hover{letter-spacing:.02em}
.contact-link .ci{width:1em;height:1em;flex:0 0 auto}
.contact-link:not([href]){display:none}
.contact-row:empty{display:none}
.glance{background:var(--ink2);color:var(--mineral);padding:clamp(70px,10vh,130px) var(--gut)}
.glance .display{color:var(--sale)}
.glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 40px;margin-top:clamp(30px,4vw,50px);border-top:1px solid var(--line-d);padding-top:clamp(26px,3vw,40px)}
.gl{display:flex;flex-direction:column;gap:8px}
.gk{font-size:10px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--ash)}
.gv{font-family:var(--grot);font-variant-numeric:tabular-nums;font-size:clamp(16px,2vw,22px);color:var(--sale)}
.soglia-media picture,.zone picture,.shot picture,.bhero picture{display:contents}

/* ---- FLEET · one boat per full screen, snap, never a grid (Founder 28/8 15:50) ---- */
/* M-064 ondata5: the global html{scroll-behavior:smooth} fights scroll-snap on the SAME
   element (the html scroller), so every wheel/touch tick smooth-animates while snap re-pulls
   -> stepped, janky scroll. Kill smooth here so momentum + snap run clean. Smooth stays elsewhere.
   M-064 ondata6 (Founder 29/8, desktop mouse wheel): ondata5 also downgraded to proximity, and
   proximity + a real Windows-Chrome wheel tick RUBBER-BANDS you back to boat 1 (measured: 18
   direction reversals on downward bursts, scroller stuck at y=0). Fix: mandatory here (clean,
   deterministic snap for TOUCH), and on a fine pointer (desktop mouse) site.js sets snap-type:none
   and owns a single eased wheel pager, so the native snap never fights the OS smooth-wheel. */
html:has(.fleet){scroll-snap-type:y mandatory;scroll-behavior:auto}
.fleet{background:var(--ink)}
.fbay{position:relative;height:100svh;min-height:100svh;scroll-snap-align:start;overflow:hidden;display:flex;align-items:flex-end}
.fbay-media{position:absolute;inset:0;z-index:0}
/* whole-section click target (Founder 28/8 19:20): the boat opens its full site. Sits above the media, below .fbay-in (z2) so the CTA label stays live and text stays selectable. */
.fbay-hit{position:absolute;inset:0;z-index:1;display:block}
.fbay-media img{width:100%;height:100%;object-fit:cover;display:block}
.fbay::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(14,12,11,.30) 0%,rgba(14,12,11,0) 30%,rgba(14,12,11,.68) 100%)}
.fbay--dark{background:linear-gradient(180deg,#0b0a09 0%,#161311 100%)}
.fbay--dark::after{background:none}
/* museo: fondo galleria chiaro, il titolo resta BIANCO (legge del bianco, Founder 26/8) con scrim inferiore rinforzato per il contrasto */
.fbay--museo::after{background:linear-gradient(180deg,rgba(14,12,11,.10) 0%,rgba(14,12,11,0) 32%,rgba(14,12,11,.52) 70%,rgba(14,12,11,.86) 100%)}
.fbay-in{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:0 var(--gut) clamp(66px,12vh,132px);text-align:center}
.fbay-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:16px}
.fbay-name{font-family:var(--grot);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--white);font-size:clamp(36px,7vw,92px);margin:0;text-shadow:0 1px 40px rgba(8,7,6,.5)}
.fbay-line{font-family:var(--serif);color:var(--sale);font-size:clamp(17px,2vw,24px);line-height:1.3;max-width:26ch;margin:16px auto 0;text-shadow:0 1px 30px rgba(8,7,6,.5)}
.fbay-cta{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:11px 4px;margin-top:clamp(18px,3vh,30px);font-family:var(--grot);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--white);border-bottom:1px solid rgba(248,244,238,.42);transition:letter-spacing .3s,opacity .3s}
.fbay-cta:hover{letter-spacing:.22em;opacity:.9}
.fbay-note{margin-top:14px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ash);opacity:.6}
.fclose{position:relative;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:22px;padding:clamp(80px,14vh,140px) var(--gut);background:var(--sale);color:var(--teak)}
@media(min-width:900px){.fbay-in{padding-bottom:clamp(84px,14vh,152px)}}
/* fleet: tap target 44px sugli elementi tappabili visibili (Founder 28/8, chiude benchmark F2 sulla categoria) */
body[data-fleet] .bar-brand,body[data-fleet] .bar-right a:not([style*="display:none"]),body[data-fleet] .lang{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:760px){body[data-fleet] .bar-right a:not(.lang){display:none}}

/* ---------- RAL palette · Founder 28/8: NO borders, tints desaturated + veiled, small.
   Reusable component (also inlined on 56 and 39). Each page sets --ral-ink for its ground;
   default here fits the dark theme of this stylesheet. Built from palette_ral.json (6 tints, JSON order). ---------- */
.ral{--ral-ink:rgba(247,243,237,.74);max-width:1240px;margin:0 auto;padding:clamp(40px,7vh,84px) var(--gut)}
.ral-eyebrow{font-family:var(--grot);font-weight:100;font-size:11px;letter-spacing:var(--ls);text-transform:uppercase;color:var(--ral-ink);margin:0 0 16px;text-align:center}
.ral-row{display:flex;gap:16px;justify-content:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px}
.ral-row::-webkit-scrollbar{display:none}
.ral-chip{flex:0 0 auto;text-align:center;min-width:52px}
.ral-chip .code{display:block;font-family:var(--grot);font-weight:400;font-size:11px;letter-spacing:.01em;color:var(--ral-ink);margin:0 0 6px;white-space:nowrap}
.ral-chip .sw{display:block;width:26px;height:26px;border-radius:7px;margin:0 auto;border:0;outline:0;box-shadow:none;filter:saturate(.72);opacity:.86}
.ral-chip .lab{display:block;font-family:var(--grot);font-weight:100;font-size:10px;letter-spacing:.02em;color:var(--ral-ink);margin:7px auto 0;max-width:10ch;line-height:1.3}

/* ============================================================
   ONDATA 6 · INTERIORS · horizontal-scroll gallery (Founder 29/8, verdict on pixels)
   Cinematic film-strip of interior stills. Native horizontal scroll + light snap.
   NO scroll-behavior:smooth here and NONE on html for this scroller (the snap is on
   .igal-scroll, its own element, not the html scroller, so it never fights the page).
   iOS-safe: no backdrop blur, no background-attachment:fixed, momentum on.
   ============================================================ */
.igal{background:var(--ink);padding:clamp(56px,11vh,132px) 0 clamp(48px,9vh,112px);overflow:hidden}
.igal-head{max-width:1180px;margin:0 auto;padding:0 var(--gut) clamp(26px,4vh,46px)}
.igal-ey{display:block;font-size:11px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--stone);margin-bottom:14px;opacity:.9}
.igal-title{font-family:var(--serif);font-weight:400;color:var(--white);font-size:clamp(40px,8vw,104px);line-height:.98;letter-spacing:-.02em;margin:0}
.igal-scroll{display:flex;gap:clamp(12px,1.6vw,24px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 var(--gut);overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.igal-scroll::-webkit-scrollbar{display:none}
.igal-item{flex:0 0 auto;scroll-snap-align:center;margin:0}
.igal-item img{display:block;height:clamp(360px,64vh,760px);width:auto;max-width:none;object-fit:cover;background:#0b0a09;border-radius:var(--r1);-webkit-user-drag:none;user-select:none}
.igal-cue{max-width:1180px;margin:clamp(18px,3vh,30px) auto 0;padding:0 var(--gut);font-size:10px;letter-spacing:var(--ls);text-transform:lowercase;color:var(--ash);opacity:.72}
/* interiors page: its own room, more space */
.igal--room .igal-item img{height:clamp(400px,72vh,860px)}
.igal--room .igal-title{font-size:clamp(44px,9vw,120px)}
@media(hover:hover) and (pointer:fine){
  .igal-scroll{cursor:grab}
  .igal-scroll.drag{cursor:grabbing}
  .igal-scroll.drag{scroll-snap-type:none}
}
@media(max-width:760px){
  .igal-item img{height:clamp(320px,52vh,480px)}
  .igal--room .igal-item img{height:clamp(340px,56vh,520px)}
}
@media(prefers-reduced-motion:reduce){
  .igal-scroll{scroll-snap-type:none;scroll-behavior:auto}
}
@media(max-width:760px){.ral-chip .sw{width:20px;height:20px;border-radius:6px}.ral-chip .lab{display:none}}

/* ============================================================
   SYSTEM 2100 · additive material layer (M-064 rebuild)
   Owner: HEAD OF ENGINEERING. css/site.css is the single source.
   Coherent with the salt-block card (_LANDING_BIGLIETTO_M064): one
   material, one light key (top-left), one radius scale, incised voices.
   ADDITIVE by design: every token below is a NEW name, every class is
   a NEW class. Nothing here overrides an existing rule. Page agents opt
   a surface INTO the salt system, then swap flat color / incoherent
   radius / flat shadow for these tokens per SYSTEM_2100.md.
   Palette law (Canone section 4): the DARK film plane keeps --ink /
   --sale / --teak (titles on image stay white). The SALT shore uses
   --salt and --salt-ink (bruno-ardesia #2A211A, never black).
   Two worlds, one grammar.
   ============================================================ */
:root{
  /* S1 · ONE radius scale, iOS squircle (wide radius + overflow:hidden). No 2px survives. */
  --r1:12px; --r2:18px; --r3:28px; --rfull:999px;

  /* S3 · light is a SYSTEM, key top-left. Elevation, never flat shadows.
     e0 incised (pressed in) · e1 chip · e2 rising CTA · e3 slab over the film */
  --e0:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 1px rgba(42,33,26,.10);
  --e1:0 1px 2px rgba(42,33,26,.10), inset 0 1px 0 rgba(255,255,255,.45);
  --e2:0 2px 8px rgba(42,33,26,.16), inset 0 1px 0 rgba(255,255,255,.4);
  --e3:0 -30px 80px rgba(8,7,6,.42);

  /* S2 · SALT matter (the shore). Gradient inside Sale, delta luminance <=4%, never a band. */
  --salt:#F4EFE8;            /* salt surface, never pure white */
  --salt-lo:#E9E1D5;         /* gradient bottom stop */
  --salt-ink:#2A211A;        /* bruno-ardesia ink on salt, never black */
  --salt-muted:#6E6152;      /* muted body on salt */
  --salt-faint:#9C8E79;      /* faintest meta / disclosure on salt */
  --salt-grad:linear-gradient(180deg,var(--salt),var(--salt-lo));
  /* incised groove: dark lip above, light rise below. Replaces every flat 1px hairline. */
  --groove:linear-gradient(180deg,rgba(42,33,26,.12),rgba(255,255,255,.5));
  /* grain, salt (feTurbulence 0.9), applied at opacity .03 by .salt::before */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* veil (Heavensake): gradient only at TOP, never a box-scrim under the title. */
  --veil-top:linear-gradient(180deg,rgba(8,7,6,.34) 0%,rgba(8,7,6,.05) 34%,transparent 60%);

  /* S6 · material motion. Settle once, matter easing. NOT fade-up-on-scroll. */
  --ease:cubic-bezier(.2,.7,.2,1);
  --t-settle:.24s;           /* hero settle */
  --t-tap:.12s;              /* deboss on press */

  /* spacing rhythm (fluid) so every section shares one scale */
  --sp1:clamp(8px,1.4vw,14px);
  --sp2:clamp(16px,2.6vw,28px);
  --sp3:clamp(28px,4.4vw,52px);
  --sp4:clamp(48px,8vh,96px);
  --sp5:clamp(80px,14vh,200px);
}

/* --- SALT SLAB · the material shore surface (S2). A section that rises over the film. --- */
.salt{position:relative;background:var(--salt-grad);color:var(--salt-ink)}
.salt::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:var(--grain);background-size:140px 140px}
.salt>*{position:relative;z-index:1}
/* the slab that scrolls up over the film: rounded top, deep elevation e3 */
.salt--slab{border-radius:var(--r3) var(--r3) 0 0;box-shadow:var(--e3)}
.salt--slab::before{border-radius:var(--r3) var(--r3) 0 0}

/* --- GRIP · the drawer handle on a rising slab --- */
.grip{width:44px;height:4px;border-radius:var(--rfull);background:var(--stone);
  box-shadow:var(--e0);margin:0 auto;opacity:.7}

/* --- PILL / squircle CTA (S9). Card-identical. This is the CTA, never a flat 2px rectangle. --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 24px;border-radius:var(--rfull);overflow:hidden;text-align:center;
  font-family:var(--grot);font-weight:800;font-size:13px;letter-spacing:.06em;cursor:pointer;border:0;
  transition:transform .18s var(--ease),background .2s ease,box-shadow .2s ease}
.btn svg{width:16px;height:16px;flex:0 0 auto}
/* on the SALT shore: ink pill */
.btn--primary{background:var(--salt-ink);color:var(--salt);box-shadow:var(--e2)}
.btn--primary:hover{background:var(--ink)}
.btn--primary:active{transform:scale(.985);box-shadow:var(--e0);transition-duration:var(--t-tap)}
.btn--ghost{background:transparent;color:var(--salt-ink);box-shadow:inset 0 0 0 1px var(--line-l)}
.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--salt-ink)}
.btn--ghost:active{transform:scale(.985);transition-duration:var(--t-tap)}
/* on the DARK film: light pill */
.btn--light{background:var(--white);color:var(--ink);box-shadow:var(--e2)}
.btn--light:hover{background:var(--sale)}
.btn--light:active{transform:scale(.985);box-shadow:var(--e0);transition-duration:var(--t-tap)}
.btn--on-film{background:rgba(12,10,9,.28);color:var(--white);box-shadow:inset 0 0 0 1px rgba(248,244,238,.5)}
.btn--on-film:hover{box-shadow:inset 0 0 0 1px var(--white)}
.btn--on-film:active{transform:scale(.985);transition-duration:var(--t-tap)}

/* --- TESSERA · one icon tile, identical squircle of salt, official glyph colour INSIDE (S4).
   The tile stays salt; colour lives only in the glyph. The Instagram glyph carries its own
   SVG linearGradient (currentColor cannot gradient), so do not force .g-ig on a solid glyph:
   use the official gradient SVG inside a plain .tessera. --- */
.tessera{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:36px;height:36px;border-radius:var(--r2);background:var(--salt);box-shadow:var(--e1)}
.tessera svg{width:20px;height:20px;display:block}
.tessera--lg{width:44px;height:44px}
.tessera--lg svg{width:24px;height:24px}
.g-li{color:#0A66C2}.g-wa{color:#25D366}.g-mail{color:var(--salt-ink)}.g-site{color:var(--salt-ink)}

/* --- FIG · incised technical label FIG. NN LABEL (Virgil, S9). Sits on the salt. --- */
.fig{display:block;font-family:var(--grot);font-weight:800;font-size:11px;
  letter-spacing:.24em;color:var(--bronze);margin-bottom:10px;text-shadow:0 1px 0 rgba(255,255,255,.5)}
/* on the dark film the white lip would glow: drop the shadow, lift the colour */
.fig--on-film{color:var(--bronze-soft);text-shadow:none}

/* --- INCISED separator · dark lip + light rise. Replaces flat 1px hairlines between blocks. --- */
.incised{position:relative}
.incised::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--groove)}
.incised-t{position:relative}
.incised-t::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--groove)}

/* --- FULLBLEED · one subject per screen, veil only at the top (Heavensake).
   Put the image/video as the first child, the copy in .fb-in. Title = white + text-shadow, no scrim. --- */
.fullbleed{position:relative;min-height:100svh;overflow:hidden;background:#0b0a09;display:flex;align-items:flex-end}
.fullbleed>img,.fullbleed>picture>img,.fullbleed>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fullbleed::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--veil-top)}
.fullbleed>.fb-in{position:relative;z-index:2;width:100%}

/* --- TYPE ROLES · three voices, never mixed (Canone section 2). Reusable, size set at the call site. --- */
.name-xl{font-family:var(--grot);font-weight:800;text-transform:uppercase;letter-spacing:-.03em;line-height:.94;
  font-size:clamp(40px,9vw,120px)}                              /* THE NAME (Nike), one per screen */
.frase-serif{font-family:var(--serif);font-weight:400;letter-spacing:-.015em;line-height:1.08}  /* LA FRASE / payoff */
.datum{font-family:var(--grot);font-weight:100;letter-spacing:.20em;text-transform:uppercase;
  font-variant-numeric:tabular-nums}                            /* THE DATUM (Inter 100) */
/* title over an image is ALWAYS white, held by text-shadow not a scrim box (Founder law) */
.on-image{color:var(--white);text-shadow:0 1px 40px rgba(8,7,6,.5),0 1px 4px rgba(8,7,6,.45)}

/* --- SETTLE · material entrance (S6): scale 1.01 -> 1, once. Replaces the dated AOS fade-up.
   JS adds .in when the element enters view (reuse the existing reveal observer). --- */
.settle{opacity:0;transform:scale(1.01);transform-origin:left bottom;
  transition:opacity var(--t-settle) var(--ease),transform var(--t-settle) var(--ease)}
.settle.in{opacity:1;transform:none}
.settle.s1{transition-delay:.04s}.settle.s2{transition-delay:.08s}.settle.s3{transition-delay:.12s}

@media(prefers-reduced-motion:reduce){
  .settle{opacity:1!important;transform:none!important}
}

/* ============================================================
   M-064 · official image protection (Founder 31/8). Images and hero video only:
   drag off, iOS/Android long-press callout off, image selection off. Text stays
   selectable, links and forms stay usable. The JS guard (/js/protect.js) adds the
   context-menu block and the transparent .lv-veil over the media-only covers.
   Honest limit: no site can stop a screenshot or a determined DevTools user.
   ============================================================ */
img,picture,video{
  -webkit-user-drag:none;-khtml-user-drag:none;
  -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
.lv-veil{position:absolute;inset:0;background:transparent;pointer-events:auto;z-index:1;-webkit-tap-highlight-color:transparent}