@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:200 600;font-display:swap;src:url("/fonts/hankengrotesk-var.woff2") format("woff2")}
/* ============================================================
   Roberto Pinna — one-page scroller
   Hero · Servizio · Contatti. Vanilla HTML/CSS/JS, no build step.
   ============================================================ */
:root{
  --frame-inset: 0px;            /* set to 40px to restore the framed mockup look */
  --ink:        #0a0a0a;
  --panel:      #121212;
  --panel-warm: #14110f;
  --text-hi:    #f3f0ea;
  --text-mid:   #9c9c9c;
  --text-dim:   #6f6f6f;
  --silver:     #cfc9c0;
  --seam:       #141414;   /* shared colour where page 1 meets page 2 */
  --maxw: 1383px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);   /* settle, no overshoot */
  --bar-h: 40px;                              /* hero top-row height (pill height) */
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }


body{
  background:#141414;
  color:var(--text-hi);
  font-family:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.scroller{ overflow-x:clip; }

/* ---------- animated film grain ----------
   one instance per section (last child of each .frame) so the strength can be
   tuned independently: strong over the dark hero, restrained over the lighter
   Features cards. Neutral mid-grey tile + `overlay` = no colour haze. */
.grain{
  position:absolute; inset:0;
  pointer-events:none;
  z-index:15;                 /* above media + decoration, below the text layers */
  background-image:url("../assets/grain.png");
  background-size:132px 132px;
  mix-blend-mode:overlay;
  animation:grain .9s steps(1) infinite;
  will-change:background-position;
}
.page--hero     .grain{ opacity:.5; }
.page--features .grain{ opacity:.075; }
/* The hero grain stays at full strength right down to its own bottom edge
   (it is clipped there anyway). The Features section then continues it: a
   carry layer at the same strength picks up exactly where the hero left off
   and ramps down to the section's own subtle grain — no gap, no step. */
.page--features .grain{
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 24%, #000 46%);
          mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 24%, #000 46%);
}
.page--features .grain--carry{
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,
    #000 0 4%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.34) 32%, rgba(0,0,0,.12) 46%, rgba(0,0,0,0) 60%);
          mask-image:linear-gradient(180deg,
    #000 0 4%, rgba(0,0,0,.72) 16%, rgba(0,0,0,.34) 32%, rgba(0,0,0,.12) 46%, rgba(0,0,0,0) 60%);
}
/* jump by whole-ish tile offsets each step so the noise reads as re-generated
   every frame instead of sliding across the screen */
@keyframes grain{
  0%   { background-position:  0px    0px }
  12%  { background-position:-97px   43px }
  25%  { background-position: 61px  -88px }
  37%  { background-position:-119px -31px }
  50%  { background-position: 34px  112px }
  62%  { background-position:-58px   19px }
  75%  { background-position:103px  -73px }
  87%  { background-position:-23px  -108px }
  100% { background-position:  0px    0px }
}

/* ---------- scroll structure ---------- */
.page{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  padding:var(--frame-inset);
  background:#141414;
}
.frame{
  position:relative;
  width:100%;
  min-height:calc(100vh - 2*var(--frame-inset));
  min-height:calc(100dvh - 2*var(--frame-inset));
  border-radius:calc(var(--frame-inset) * .5);
  overflow:hidden;
  isolation:isolate;
}

/* Chrome duplicates text into stale tiles when it overlaps a large image
   behind a backdrop-filter element. Promoting the text layers to their own
   compositing layer forces a clean repaint. */
.glyphs, .hero__note,
.feat__label, .feat__intro, .cards, .feat__panel{
  transform:translateZ(0);
}
/* the grain (z-index 15) sits over the buttons but under the running text.
   .topbar / .hero__body must NOT form their own stacking context, so their
   children can land on either side of the grain individually. */
.topbar, .hero__body{ transform:none; }
.nav, .hero__title{ position:relative; z-index:20; }   /* text: above the grain */
.actions, .cta{ position:relative; z-index:12; }       /* buttons: under the grain */

/* horizontal rhythm — measured off the reference mock.
   --edge-x : the left rail — logo, vertical rule, "Il servizio" label
   --pad-x  : nav, headline and the bottom-left note (the indented text column)
   --pad-r  : pills + bottom-right note                                        */
.frame > *{ --edge-x:6%; --pad-x:6%; --pad-r:6%; }
.page--hero     .frame > *{ --edge-x:8.5%; --pad-x:16%; --pad-r:9%; }
.page--features .frame > *{ --edge-x:8.5%; --pad-x:9%;  --pad-r:9%; }

/* ============================================================
   PAGE 1 — HERO
   ============================================================ */
.page--hero .frame{ background:#141414; }

.hero__photo{
  position:absolute; top:0; bottom:0; right:0; left:auto;
  width:46%; height:100%;
  object-fit:cover; object-position:center;
  transform:scaleX(-1);          /* mirrored horizontally */
  /* long, gentle feather across the left third of the clip (authored on the
     right end of this gradient because the element is mirrored) */
  -webkit-mask-image:linear-gradient(90deg, #000 0 62%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(90deg, #000 0 62%, rgba(0,0,0,0) 100%);
  z-index:0;
}
.hero__photo-fade{
  position:absolute; inset:0;
  z-index:1; pointer-events:none;
  /* dissolve the video into the section colour — same #141414 as the Features
     section, so the two blend with no dark band */
  background:
    linear-gradient(180deg, rgba(20,20,20,0) 66%,
                     rgba(20,20,20,.45) 84%, rgba(20,20,20,.85) 93%, #141414 100%);
}
/* bottom of the hero fades to the exact section colour so the scroll into the
   Features block is one continuous surface (mirrored by .frame::before) */
.page--hero .frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:30%;
  z-index:3; pointer-events:none;
  background:linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.35) 55%,
                             rgba(20,20,20,.8) 85%, #141414 100%);
}

/* decorative vertical rule: runs only between the two × marks, fades out
   towards each one, and keeps a clear gap around every cross */
.vrule{
  position:absolute; left:var(--edge-x); top:15%; bottom:11.5%;
  width:16px; transform:translateX(-50%);
  z-index:5; pointer-events:none;
}
.vrule::before{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg,
    rgba(255,255,255,0)   0%,
    rgba(255,255,255,.11) 7%,
    rgba(255,255,255,.11) 93%,
    rgba(255,255,255,0)   100%);
}
.vrule__mark{
  position:absolute; left:50%;
  color:rgba(255,255,255,.2);   /* semi-transparent */
  line-height:0;
}
.vrule__mark svg{ display:block; width:13px; height:13px; }
.vrule__mark--top{    top:0;    transform:translate(-50%,-50%); }
.vrule__mark--bottom{ bottom:0; transform:translate(-50%, 50%); }

/* -- logo + top bar --
   both rows share --bar-h and the same top, so the "RP" wordmark and the
   nav/pills sit on one optical line despite the different type sizes */
.topbar, .logo{ top:5.1%; min-height:var(--bar-h); display:flex; align-items:center; }
.topbar{
  position:absolute; left:var(--pad-x); right:var(--pad-r);
  gap:2.6vw;
}
/* "RP" wordmark — hero typeface, light weight, tight tracking.
   Centred on --edge-x so it caps the vertical rule and its × marks. */
.logo{
  position:absolute; left:var(--edge-x);
  transform:translateX(-50%);
  justify-content:center;
  z-index:6;
  font-size:23px; font-weight:300; letter-spacing:-.03em; line-height:1;
  color:var(--text-hi); text-decoration:none;
}
.nav{
  display:flex; align-items:center; gap:7px;
  font-size:11.5px; letter-spacing:.09em; font-weight:400;
  color:var(--text-mid); white-space:nowrap;
}
.nav a{ color:inherit; text-decoration:none; transition:color .2s; }
.nav a:hover{ color:var(--text-hi); }

.actions{ margin-left:auto; display:flex; gap:12px; flex:none; }
.pill{
  font:inherit; cursor:pointer; white-space:nowrap;
  font-size:11px; letter-spacing:.11em; color:var(--text-hi);
  padding:12px 22px; border-radius:16px; corner-shape:superellipse(4);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .2s, background .2s;
}
.pill--login{ background:rgba(150,122,106,.26); }   /* flat glass — no gradient */
.pill--start{ background:rgba(52,34,26,.42); }
.pill:hover{ transform:translateY(-1px); }

.glyphs{
  position:absolute; right:var(--pad-r); top:22%;
  display:flex; gap:16px; z-index:6;
  color:rgba(255,255,255,.45);
}
.glyphs svg{ width:16px; height:16px; display:block; fill:none; }

/* -- hero body -- */
.hero__body{
  position:absolute; left:var(--pad-x); top:26.5%;
}
.hero__title{
  font-weight:300;
  font-size:clamp(32px, 3.7vw, 54px);
  line-height:1.05;
  letter-spacing:-.034em;
  color:var(--text-hi);
}
.cta{
  margin-top:2.3em;
  font:inherit; cursor:pointer;
  font-size:10.5px; letter-spacing:.13em; color:var(--text-hi);
  padding:12px 26px; border-radius:15px; corner-shape:superellipse(4);
  background:rgba(26,26,26,.55);           /* flat glass — no gradient */
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .2s;
}
.cta:hover{ transform:translateY(-1px); }

/* mobile-only tagline under the CTA (desktop shows it in the top nav) */
.hero__tagline{ display:none; }

.hero__note{
  position:absolute; bottom:8%;
  font-size:12.5px; line-height:1.5; color:var(--text-hi);
  z-index:20;                 /* text sits above the grain */
}
.hero__note--left{ left:var(--pad-x); max-width:30rem; }
.hero__note--left .src{ display:block; margin-top:.5em; color:var(--text-dim); font-size:11px; }
.hero__note--right{
  right:var(--pad-r); max-width:16rem;
  display:flex; align-items:center; gap:12px;
  color:var(--text-hi); line-height:1.32;
}
.hero__note--right .mk{ flex:none; line-height:0; color:rgba(255,255,255,.2); }
.hero__note--right .mk svg{ display:block; width:13px; height:13px; }
.hero__note--right .on{ color:var(--text-hi); }

/* ============================================================
   PAGE 2 — FEATURES
   ============================================================ */
/* same dark grey as the hero, so the two sections read as one surface */
.page--features .frame{
  background:#141414;
  /* card-row geometry, overridden per breakpoint below */
  --cards-top: 32%;
  --card-h:    356px;
  --card-h-2:  390px;
  /* alt.html only — the single unified panel, kept separate from the
     three-card vars above so both pages can share this stylesheet */
  --unified-top: 32%;
}

.feat__photo{
  position:absolute; inset:0; z-index:0;
  background:url("../assets/warm_bg.webp") center / cover no-repeat;
  filter:blur(26px) saturate(.8) brightness(.92) hue-rotate(-6deg);
  transform:scale(1.2);
}
.feat__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, #141414 0%, rgba(20,20,20,.85) 7%, rgba(20,20,20,.42) 24%,
                    rgba(20,20,20,.1) 46%, rgba(20,20,20,.45) 80%, #141414 100%),
    linear-gradient(90deg, rgba(20,20,20,.6), rgba(20,20,20,0) 24%, rgba(20,20,20,0) 76%, rgba(20,20,20,.6)),
    radial-gradient(38% 90% at 50% 46%, rgba(216,158,162,.13), rgba(216,158,162,0) 70%);
}
/* top fade that mirrors the hero's bottom fade — the seam becomes one surface */
.page--features .frame::before{
  content:""; position:absolute; left:0; right:0; top:0; height:26%;
  z-index:3; pointer-events:none;
  background:linear-gradient(180deg, #141414 0%, rgba(20,20,20,.55) 35%,
                             rgba(20,20,20,.2) 65%, rgba(20,20,20,0) 100%);
}

.feat__label{
  position:absolute; left:var(--edge-x); top:6%;
  display:flex; align-items:flex-start; gap:11px;
  font-size:20px; font-weight:400; letter-spacing:.005em;
  color:var(--text-hi); z-index:20;
}
.feat__label > svg{ margin-top:6px; flex:none; }
/* semantic <h2>; the label's own font-size/weight carry the visual style */
.feat__label-t{
  font:inherit; font-weight:400;
  display:flex; flex-direction:column; gap:4px; line-height:1.1;
}
.feat__label-s{
  font-size:11px; font-weight:300; letter-spacing:.02em;
  color:var(--text-dim);
}
.feat__intro{
  position:absolute; right:var(--pad-x); top:5.4%;
  max-width:26rem;
  text-align:right; font-size:13.5px; line-height:1.32;
  color:var(--text-dim); z-index:20;
}
/* white line: one single line; grey text drops to its own line(s) below,
   with the same leading as the lines between themselves */
.feat__intro .on{
  color:var(--text-hi);
  display:block; white-space:nowrap;
}

/* -- card row -- */
.cards{
  position:absolute; left:3.6%; right:3.6%; top:var(--cards-top);
  display:flex; justify-content:center; align-items:center; gap:24px;
  z-index:5;
}
/* flat glass — same family as .pill / .cta, so the cards read as part of
   the same UI language as the buttons instead of a separate treatment */
.card{
  position:relative;
  flex:none;
  width:340px;
  height:var(--card-h);
  border-radius:38px;
  corner-shape:superellipse(4);   /* squircle — falls back to plain round */
  padding:28px 28px 26px;
  display:flex; flex-direction:column;
  background:rgba(26,26,26,.55);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px) saturate(.85) brightness(1.04);
  -webkit-backdrop-filter:blur(8px) saturate(.85) brightness(1.04);
  overflow:hidden;
}
.card--2{
  height:var(--card-h-2);   /* taller: align-items:center lifts it ~17px above the row */
  background:rgba(40,40,40,.6);
  border-color:rgba(255,255,255,.14);
}

/* wrapper kept around each card purely as a reveal trigger (see the
   entrance-animation block below) — sizing/positioning is the card's own */
.card-slot{ position:relative; flex:none; }
.card-slot .card{ position:relative; z-index:1; }

/* ============================================================
   ALT.HTML ONLY — unified panel
   One glass object standing in for the three-card row, built with the
   same recipe as .modal__card: a soft radial highlight over a dark
   transparent fill, a plain hairline border (no gradient/shine), a heavy
   blur, and its own grain layer baked in with ::after — so the noise
   always reads regardless of what's behind the panel, and there is
   exactly one border/background/radius for all three segments. The only
   division between them is a 1px hairline — no gap, no elevation, no
   separate card chrome — so the eye reads "one service" before parsing
   a word. index.html never uses these classes; purely additive here.
   ============================================================ */
/* positions the panel (was .unified's own job); a plain flow element so
   the CTA below can just follow it in flow, at whatever height the panel
   actually renders at, instead of being pinned to a guessed offset */
.feat__panel{
  position:absolute; left:3.6%; right:3.6%; top:var(--unified-top);
  z-index:20;
}
.unified{
  position:relative;
  display:flex; align-items:stretch;
  border-radius:38px; corner-shape:superellipse(4);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(242,242,244,.08), rgba(242,242,244,.015) 70%),
    rgba(20,19,20,.28);
  backdrop-filter:blur(26px) saturate(.85);
  -webkit-backdrop-filter:blur(26px) saturate(.85);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.5);
  overflow:hidden;
  /* four empty notches bitten straight through the panel (background,
     blur, grain — everything) at the seam positions, top and
     bottom, so the section's own backdrop shows through undistorted: a
     soft, narrow dip, not a sharp V. Each dip is a raised-cosine bump (a
     full ease-in-out hump: zero slope where it leaves the flat edge,
     zero slope again at its own peak) sampled into a polygon, since
     clip-path: path() can't take percentages — no straight diagonals, no
     precise geometric arc, just one continuous easing curve. The
     polygon's outer corners sit exactly on the box's own corners, so it
     only ever removes the four dips — the rounded squircle corners still
     come from border-radius + overflow:hidden. */
  clip-path:polygon(
    0 0,
    32.48% 0, 32.59% .14%, 32.69% .56%, 32.8% 1.17%, 32.91% 1.9%,
    33.01% 2.63%, 33.12% 3.24%, 33.22% 3.66%, 33.33% 3.8%,
    33.44% 3.66%, 33.54% 3.24%, 33.65% 2.63%, 33.75% 1.9%, 33.86% 1.17%,
    33.97% .56%, 34.07% .14%, 34.18% 0,
    65.81% 0, 65.92% .14%, 66.02% .56%, 66.13% 1.17%, 66.23% 1.9%,
    66.34% 2.63%, 66.45% 3.24%, 66.55% 3.66%, 66.66% 3.8%,
    66.77% 3.66%, 66.87% 3.24%, 66.98% 2.63%, 67.08% 1.9%, 67.19% 1.17%,
    67.3% .56%, 67.4% .14%, 67.51% 0,
    100% 0, 100% 100%,
    67.51% 100%, 67.4% 99.86%, 67.3% 99.44%, 67.19% 98.83%, 67.08% 98.1%,
    66.98% 97.37%, 66.87% 96.76%, 66.77% 96.34%, 66.66% 96.2%,
    66.55% 96.34%, 66.45% 96.76%, 66.34% 97.37%, 66.23% 98.1%, 66.13% 98.83%,
    66.02% 99.44%, 65.92% 99.86%, 65.81% 100%,
    34.18% 100%, 34.07% 99.86%, 33.97% 99.44%, 33.86% 98.83%, 33.75% 98.1%,
    33.65% 97.37%, 33.54% 96.76%, 33.44% 96.34%, 33.33% 96.2%,
    33.22% 96.34%, 33.12% 96.76%, 33.01% 97.37%, 32.91% 98.1%, 32.8% 98.83%,
    32.69% 99.44%, 32.59% 99.86%, 32.48% 100%,
    0 100%
  );
}
/* same film grain as the modal, baked into the panel itself */
.unified::after{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background-image:url("../assets/grain.png");
  background-size:132px 132px;
  mix-blend-mode:overlay;
  opacity:.075;
  animation:grain .9s steps(1) infinite;
}
.unified__part{
  position:relative; z-index:1;
  flex:1 1 0;
  min-width:0;
  padding:28px 28px 26px;
  display:flex; flex-direction:column;
}
/* the CTA below the panel — same .cta shape as the hero button, but
   lighter (more of the section glowing through) and with its own grain
   baked in via ::after, same technique as .unified/.modal__card, at a
   stronger opacity than theirs since it's a small, isolated glass piece
   rather than a large surface. It shares .feat__panel (already promoted
   via translateZ(0)) with .unified's backdrop-filter + animated grain;
   without will-change here, :hover's transform promotes this button to
   its own layer for the first time on entry, forcing the whole stacking
   context to recomposite and catching the grain mid-frame — a one-frame
   flash under the panel. Pre-promoting it at rest means hover only
   updates an existing layer. */
.feat__cta{
  position:relative;
  display:block; width:max-content;
  margin:32px auto 0;
  overflow:hidden;
  background:rgba(26,26,26,.16);
  will-change:transform;
}
.feat__cta::after{
  content:""; position:absolute; inset:0;
  pointer-events:none;
  background-image:url("../assets/grain.png");
  background-size:132px 132px;
  mix-blend-mode:overlay;
  opacity:.08;
  animation:grain .9s steps(1) infinite;
}
.feat__cta > span{ position:relative; z-index:1; }
@media (prefers-reduced-motion:reduce){ .feat__cta::after{ animation:none; } }
@media (prefers-reduced-motion:reduce){ .unified::after{ animation:none; } }

/* ------------------------------------------------------------
   card layout — content distributed like the reference:
   label / tag row → large headline + sub → icon-button / mark row
   ------------------------------------------------------------ */
.card__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
}
.card__tag{
  display:block; max-width:27ch;
  font-size:11px; font-weight:200; letter-spacing:.005em; line-height:1.12;
  color:rgba(243,240,234,.88);
}
.card--2 .card__tag{ color:rgba(255,253,250,.95); }
.card__cap{
  flex:none; padding-top:1px;
  display:inline-flex; align-items:center; gap:6px;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(243,240,234,.4); white-space:nowrap;
}

.card__head{ margin-top:56px; }
.card__head h3{
  font-weight:400; font-size:31px; line-height:1.04; letter-spacing:-.02em;
  color:var(--text-hi);
}
.card--2 .card__head h3{ font-size:33px; }
.card__head p{
  margin-top:15px;
  display:flex; align-items:center; gap:12px;
}
.card__head p > span:last-child{
  font-size:12.5px; font-weight:200; line-height:1.28; color:var(--text-hi);
  max-width:33ch;
}
.card__x{
  flex:none; width:13px; height:13px; line-height:0;
  color:rgba(255,255,255,.4);
}
.card__x svg{ display:block; width:100%; height:100%; }

.card__foot{
  margin-top:auto;
  display:flex; align-items:flex-end; justify-content:flex-end;
}
.card__icon{
  width:36px; height:36px;
  color:rgba(243,240,234,.92);
  filter:
    drop-shadow(0 0 9px rgba(226,186,202,.16))
    drop-shadow(0 0 24px rgba(226,186,202,.08));
}
.card__icon svg{ width:100%; height:100%; display:block; overflow:visible; }
.card__icon svg *{ vector-effect:non-scaling-stroke; }
.card--2 .card__icon{ color:#fff; }

/* ============================================================
   page 3 — contatto / cta  (flow layout, non absolute)
   ============================================================ */
.page--contact .frame{
  display:flex; align-items:center; justify-content:center;
  background:#141414;
}
.page--contact .frame > *{ --pad-x:9%; }
/* Same strong grain as the hero (.5). At the top it starts at the exact
   effective strength of the Features grain (.5 * .15 = .075) and ramps up
   gently, so the seam with page 2 has no step. */
.page--contact .grain{
  opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.62) 26%, #000 42%);
          mask-image:linear-gradient(180deg,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.3) 12%, rgba(0,0,0,.62) 26%, #000 42%);
}

.contact{
  position:relative; z-index:20;
  width:100%; max-width:var(--maxw);
  padding:16vh var(--pad-x) 12vh;
  display:flex; flex-direction:column; align-items:center;
  text-align:center;
}
.contact__mark{
  color:rgba(255,255,255,.2); line-height:0;
  margin-bottom:34px;
}
.contact__mark svg{ width:15px; height:15px; display:block; }

.contact__title{
  font-weight:300; font-size:clamp(30px,3.5vw,50px);
  line-height:1.06; letter-spacing:-.034em; color:var(--text-hi);
}
.contact__lead{
  margin-top:22px; max-width:34rem;
  font-size:13.5px; font-weight:300; line-height:1.5; color:var(--text-dim);
}
.contact__mail{
  margin-top:40px;
  font-size:clamp(20px,2.1vw,30px); font-weight:300; letter-spacing:-.02em;
  color:var(--text-hi); text-decoration:none;
  padding-bottom:4px;
  border-bottom:1px solid rgba(255,255,255,.16);
  transition:border-color .2s, color .2s;
}
.contact__mail:hover{
  color:#ffdcec;
  border-bottom-color:rgba(226,186,202,.55);
}
.contact__reply{
  margin-top:16px;
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-dim);
}
.contact__foot{
  margin-top:14vh;
  display:flex; align-items:center; gap:12px;
  color:var(--text-dim);
}
.contact__logo{
  font-size:15px; font-weight:300; letter-spacing:-.03em;
  color:rgba(243,240,234,.5);
}
.contact__copy{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}

/* ============================================================
   client login modal — same language as the cards, minimal
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.modal[hidden]{ display:none; }
.modal__backdrop{
  position:absolute; inset:0;
  background:rgba(8,8,9,.62);
  backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  animation:modal-bg .3s ease both;
}
@keyframes modal-bg{ from{ opacity:0 } to{ opacity:1 } }
.modal__card{
  position:relative; z-index:1;
  width:100%; max-width:360px;
  padding:32px 30px 24px;
  border-radius:24px; corner-shape:superellipse(4);
  background:
    radial-gradient(130% 90% at 50% 0%, rgba(242,242,244,.08), rgba(242,242,244,.015) 70%),
    rgba(20,19,20,.28);
  border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(26px) saturate(.85); -webkit-backdrop-filter:blur(26px) saturate(.85);
  box-shadow:0 30px 80px -24px rgba(0,0,0,.5);
  overflow:hidden;
  animation:modal-in .34s var(--ease-out) both;
}
@keyframes modal-in{
  from{ opacity:0; transform:translateY(10px) scale(.985) }
  to  { opacity:1; transform:none }
}
/* same film grain as the Features section */
.modal__card::after{
  content:""; position:absolute; inset:0; z-index:0;
  pointer-events:none;
  background-image:url("../assets/grain.png");
  background-size:132px 132px;
  mix-blend-mode:overlay;
  opacity:.075;
  animation:grain .9s steps(1) infinite;
}
.modal__card > *{ position:relative; z-index:1; }
.modal__x{
  position:absolute; top:15px; right:15px;
  width:26px; height:26px; padding:6px;
  color:rgba(255,255,255,.4);
  background:none; border:0; cursor:pointer;
  transition:color .2s;
}
.modal__x:hover{ color:var(--text-hi); }
.modal__x svg{ width:100%; height:100%; display:block; }
.modal__cap{
  display:block;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(243,240,234,.4);
}
.modal__title{
  margin-top:9px;
  font-weight:300; font-size:26px; letter-spacing:-.02em;
  color:var(--text-hi);
}
.modal__lead{
  margin-top:10px;
  font-size:12px; font-weight:300; line-height:1.45; color:var(--text-dim);
}
.modal__form{ margin-top:22px; display:flex; flex-direction:column; gap:16px; }
.modal__field{ display:flex; flex-direction:column; gap:6px; }
.modal__field span{
  font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--text-mid);
}
.modal__field input{
  font:inherit; font-size:13px; color:var(--text-hi);
  padding:8px 2px;
  background:none; border:0; border-bottom:1px solid rgba(255,255,255,.16);
  transition:border-color .2s;
}
.modal__field input:focus{ outline:none; border-bottom-color:rgba(226,186,202,.6); }
.modal__error{ font-size:11.5px; line-height:1.35; color:#e2a0a6; }
.modal__submit{
  margin-top:4px;
  font:inherit; cursor:pointer;
  font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-hi);
  padding:12px 26px; border-radius:14px; corner-shape:superellipse(4);
  background:rgba(26,26,26,.55);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:transform .2s, background .2s;
}
.modal__submit:hover{ transform:translateY(-1px); background:rgba(40,40,40,.6); }
.modal__help{
  display:inline-block; margin-top:18px;
  font-size:11px; color:var(--text-mid); text-decoration:none;
  transition:color .2s;
}
.modal__help:hover{ color:var(--text-hi); }
@media (prefers-reduced-motion:reduce){ .modal__card, .modal__card::after{ animation:none } }

/* ============================================================
   entrance reveals — staggered, once, on scroll into view
   ------------------------------------------------------------
   fade + short rise, settle easing (no overshoot).
   `translate` (the property, not `transform`) is used so the button
   :hover lifts, which live on `transform`, stay independent.
   JS adds `.is-in`; the `data-reveal` attribute holds the delay in ms.
   Hidden only under `.js` so the page stays readable without scripts.
   ============================================================ */
.js [data-reveal]:not(.card-slot){
  opacity:0;
  translate:0 13px;
  transition:opacity .7s var(--ease-out), translate .7s var(--ease-out);
}
.js [data-reveal]:not(.card-slot).is-in{ opacity:1; translate:0 0; }

/* The card slot is a reveal trigger only — it never moves itself. The card
   must not fade (backdrop-filter can't composite under a changing opacity),
   so it slides in on its own translate, driven by the slot's `.is-in`. */
.js .card-slot .card{
  translate:0 14px;
  transition:translate .7s var(--ease-out);
}
.js .card-slot.is-in .card{ translate:0 0; }

@media (prefers-reduced-motion:reduce){
  .js [data-reveal]:not(.card-slot),
  .js .card-slot .card{ opacity:1; translate:none; transition:none; }
}

/* ============================================================
   RESPONSIVE
   1140px: the card row tightens but stays a row.
   768px:  every section drops its absolute positioning and
           reflows as a single column (see block below).
   ============================================================ */
@media (max-width:1140px){
  .page--features .frame{ --cards-top:24%; --card-h:360px; --card-h-2:392px; --unified-top:26%; }
  .cards{ gap:16px; }
  .card-slot{ width:30.5%; }
  .card, .card--2{ width:100%; }
  .card__head h3{ font-size:26px; }
  .card__head p > span:last-child{ font-size:12px; }
}
/* ============================================================
   MOBILE — the desktop layout is absolute-positioned per section;
   below this width every section falls back to normal flow.
   ============================================================ */
@media (max-width:768px){
  /* tighter, uniform gutter; the rail collapses onto it */
  .page--hero     .frame > *{ --edge-x:7%; --pad-x:7%; --pad-r:7%; }
  .page--features .frame > *{ --edge-x:7%; --pad-x:7%; --pad-r:7%; }

  /* desktop-only decoration */
  .nav, .vrule, .glyphs, .hero__note--right, .grain--carry,
  .page--features .frame::before{ display:none; }

  /* ---- hero → flow column ---- */
  .page--hero .frame{ display:flex; flex-direction:column; }
  .page--hero .frame::after{ height:120px; }

  .hero__photo{
    position:relative; order:-1;
    width:100%; height:32vh; left:auto; right:auto;
    transform:none;
    -webkit-mask-image:linear-gradient(180deg, #000 0 58%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(180deg, #000 0 58%, rgba(0,0,0,0) 100%);
  }
  .hero__photo-fade{
    inset:0 0 auto; height:32vh;
    background:linear-gradient(180deg,
      rgba(20,20,20,.7) 0%, rgba(20,20,20,0) 34%,
      rgba(20,20,20,0) 55%, #141414 100%);
  }

  /* nav bar overlays the top of the photo band */
  .topbar{ left:var(--pad-x); right:var(--pad-r); top:18px; }
  .logo{
    left:var(--pad-x); top:18px;
    transform:none; justify-content:flex-start;
    font-size:20px;
  }
  .actions{ gap:8px; }
  .pill{ padding:9px 13px; font-size:10px; letter-spacing:.07em; }

  .hero__body{ position:static; order:1; padding:10vh var(--pad-x) 8vh; }
  .hero__title{ font-size:clamp(19px, 5.9vw, 54px); }

  .hero__note{ position:static; order:2; margin-top:auto; padding:0 var(--pad-x) 34px; }
  .hero__note--left{ left:auto; max-width:none; }

  /* ---- servizio → flow ----
     The desktop section is a stack of absolutely-placed layers over a
     blurred photo; on mobile it becomes ordinary flow. Two things have to
     be undone by hand:
     - the .translateZ(0) repaint hack (needed only where text crosses the
       big background image, which is hidden here) otherwise it turns
       .cards into a backdrop root and flattens the card glass;
     - z-index only works on positioned elements, so the flow items must be
       `relative` to stay above the grain (z-15) instead of under it. */
  .page--features .frame{ display:block; }
  .feat__photo{ display:none; }
  .feat__veil{
    background:
      linear-gradient(180deg, #141414 0%, #17161a 30%, #17161a 70%, #141414 100%),
      radial-gradient(80% 30% at 50% 20%, rgba(216,158,162,.12), rgba(216,158,162,0) 70%);
  }

  .feat__label,
  .feat__intro,
  .cards, .feat__panel{ transform:none; }

  .feat__label{
    position:relative; z-index:20;
    padding:15vw var(--pad-x) 0;
  }

  .feat__intro{
    position:relative; z-index:20;
    inset:auto; width:auto;
    text-align:left; max-width:none;
    padding:16px var(--pad-x) 0;
    font-size:13.5px; line-height:1.5; color:var(--text-mid);
  }
  .feat__intro .on{ display:inline; white-space:normal; color:var(--text-hi); }

  .cards{
    position:relative; z-index:16;
    flex-direction:column; align-items:stretch; gap:16px;
    padding:32px var(--pad-x) 40px;
  }
  .card-slot{ width:100%; max-width:none; }
  .card, .card--2{ width:100%; height:auto; padding:24px 24px 26px; }
  .card__top{ flex-direction:column; gap:6px; }
  .card__cap{ letter-spacing:.12em; }
  .card__head{ margin-top:24px; }
  .card__head h3, .card--2 .card__head h3{ font-size:27px; }
  .card__foot{ margin-top:22px; }

  /* alt.html — the panel stacks. The top/bottom-edge notches mark where a
     side-by-side seam crosses the panel's own border — stacked, there is
     no such crossing (segments meet between rows, not through the top or
     bottom edge), so the clip-path is dropped and the border is whole
     again. No divider between the stacked segments either — spacing
     alone separates them, same as on the wide layout.
     .feat__panel keeps its desktop left:3.6%/right:3.6% here unless reset:
     on a `position:relative` box with width:auto, `right` is ignored and
     `left` becomes a pure offset — the panel stayed full-width but slid
     3.6% right, overflowing the frame. That was the "card exits the right
     edge" bug. */
  .feat__panel{
    position:relative; z-index:16;
    left:auto; right:auto; top:auto;
    margin-top:26px;                 /* breathing room under .feat__intro */
  }
  .unified{
    flex-direction:column; clip-path:none;
    margin:0 var(--pad-x);           /* align to the same left edge as the
                                         label/intro text above, instead of
                                         running the full width of the frame */
  }
  /* dividers are gone (see the note above the desktop rule); with nothing
     but padding between the three stacked segments they read as cramped,
     so mobile gets a bigger internal gap than the 24px desktop default */
  .unified__part{ padding:24px 22px 22px; }
  .unified__part + .unified__part{ margin-top:28px; }
  .feat__cta{ margin-top:24px; }

  /* ---- contatti → tighter ---- */
  .page--contact .frame{ min-height:100svh; }
  .contact{ padding:14vh var(--pad-x) 10vh; }
  /* flex column + align-items:center shrink-wraps children to their
     max-content width, so long copy overflows instead of wrapping;
     stretch the text blocks back to full width (mail stays centered
     so its underline hugs the address). */
  .contact__title, .contact__lead, .contact__reply, .contact__foot{
    align-self:stretch;
  }
  .contact__title{ font-size:clamp(22px, 6vw, 50px); }
  .contact__lead{ max-width:none; }
  .contact__lead br{ display:none; }
  .contact__mail{ font-size:clamp(18px, 5.4vw, 30px); max-width:100%; }
  .contact__foot{
    margin-top:12vh;
    flex-wrap:wrap; justify-content:center; row-gap:4px;
  }
  .contact__logo{ display:none; }

  /* ============================================================
     MOBILE REFINEMENTS (desktop untouched — everything here lives
     inside the 768px query)
     One spacing scale for every vertical gap (no more vh/vw drift):
     8 · 12 · 16 · 24 · 32 · 40 · 56 · 72
     Contrast lifted for small text (WCAG 2.2 AA, >= 4.5:1 on #141414).
     ============================================================ */
  .page{
    --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:56px; --sp-8:72px;
    --text-mid:#b4b4b4; --text-dim:#8f8f8f;
  }
  /* hero: video band a little lower; the whole column (title, CTA,
     "Una PMI…" note) sits higher, and the hero no longer stretches
     to a full screen with a big empty tail */
  .page--hero, .page--hero .frame{ min-height:0; }
  /* lower the footage INSIDE its band (crop from the top of the frame) instead of
     offsetting the band itself: the band stays glued to the top edge so its top/
     bottom feathers line up and no hard seam shows */
  /* bigger footage, sitting lower and behind the top of the headline: the video
     is taken out of the flow (the column below starts at 34vh) and feathered
     top AND bottom with the same box, so no seam shows anywhere */
  .page--hero .frame{ padding-top:34vh; }
  .hero__photo{
    position:absolute; top:5vh; left:0; right:0; width:100%; height:56vh;
    object-position:22% 30%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 50%, transparent 100%);
            mask-image:linear-gradient(180deg, transparent 0, #000 22%, #000 50%, transparent 100%);
  }
  .hero__photo-fade{
    inset:5vh 0 auto; height:56vh;
    background:linear-gradient(180deg, #141414 0%, rgba(20,20,20,0) 20%,
                               rgba(20,20,20,0) 62%, #141414 100%);
  }
  .hero__body{ padding:var(--sp-4) var(--pad-x) var(--sp-4); }
  .hero__tagline{
    display:block; margin-top:var(--sp-5);
    font-size:17px; line-height:1.5; letter-spacing:.01em; color:var(--text-mid);
    text-wrap:balance;
  }
  /* "Una PMI italiana…" sits further down, clear of the tagline */
  .hero__note{ margin-top:0; padding:calc(var(--sp-8) + 16px) var(--pad-x) 96px; }
  /* the hero text must sit ABOVE the video feather (z1) and the grain (z15).
     In flow (position:static) it painted underneath them, so on tall phones
     the fade cut straight through the tagline. */
  .hero__body, .hero__note{ position:relative; z-index:20; left:0; right:auto; top:0; bottom:auto; }
  /* (position:relative honours the desktop left/top/bottom offsets that were
     harmless while these were static — reset them or the text drifts right/down) */

  /* servizio: label hangs its icon in the gutter so "Il servizio" starts
     on the same left edge as the text and the card; more air after it */
  .feat__label{ left:0; padding:var(--sp-8) var(--pad-x) 0 max(calc(var(--pad-x) - 26px), 0px); }
  .feat__intro{ padding-top:var(--sp-6); }
  /* more air between the intro text and the big card */
  .feat__panel{ margin-top:var(--sp-7); }
  .unified__part{ padding:var(--sp-5); }
  .unified__part + .unified__part{ margin-top:var(--sp-6); }
  .feat__cta{ margin-top:var(--sp-5); }

  /* third part closer to the card above */
  .contact{ padding:var(--sp-6) var(--pad-x) var(--sp-8); }
  .contact__lead{ margin-top:var(--sp-4); }
  .contact__mail{ margin-top:var(--sp-5); }
  .contact__reply{ margin-top:var(--sp-3); }
  .contact__foot{ margin-top:var(--sp-7); }

  /* touch targets >= 44px */
  .pill, .cta, .feat__cta, .modal__submit{
    min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  }
  .feat__cta{ display:flex; margin-left:auto; margin-right:auto; }
  .page--features .frame{ padding-bottom:calc(var(--sp-8) + 24px); }
  /* rose glow UNDER the card lives at frame level (below the bottom fade), not
     inside the panel's stacking context — otherwise the fade could not cover it
     and the glow ended in a hard edge */
  .page--features .frame::before{
    display:block; content:""; position:absolute; left:0; right:0; top:auto; bottom:0;
    height:520px; z-index:2; pointer-events:none;
    background:radial-gradient(78% 52% at 50% 76%, rgba(236,118,160,.78), rgba(236,118,160,.34) 42%, rgba(236,118,160,0) 76%);
    filter:blur(16px);
  }
  /* the glow dissolves into the section colour at the bottom edge (no seam
     against the contact section) */
  .page--features .frame::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:170px;
    z-index:15; pointer-events:none;
    background:linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,.22) 28%,
                               rgba(20,20,20,.55) 56%, rgba(20,20,20,.86) 80%, #141414 100%);
  }

  /* reading comfort: body leading 1.6, display leading tight, balanced headings */
  .feat__intro, .contact__lead, .hero__note, .card__head p{ line-height:1.6; }
  .hero__title{ line-height:1.18; text-wrap:balance; }
  .card__head h3, .card--2 .card__head h3{ line-height:1.15; }
  .contact__title{ line-height:1.2; text-wrap:balance; }
  .feat__intro, .contact__lead, .hero__note, .card__head p{ text-wrap:pretty; }

  /* ---- type: larger on mobile (≈ +35% over desktop, body copy ≥ 17px) ---- */
  .logo{ font-size:27px; }
  .pill{ font-size:14px; padding:13px 17px; min-height:48px; letter-spacing:.06em; }
  .actions{ gap:10px; }
  .cta{ font-size:14.5px; padding:15px 24px; min-height:52px; }
  .hero__title{ font-size:clamp(26px, 7.6vw, 68px); }
  .hero__note{ font-size:17px; }
  .hero__note--left .src{ font-size:15px; }
  .feat__label{ font-size:27px; }
  .feat__label-s{ font-size:15px; }
  .feat__intro{ font-size:18px; }
  .card__tag{ font-size:15px; }
  .card__cap{ font-size:14px; }
  .card__head h3, .card--2 .card__head h3{ font-size:35px; }
  .card__head p > span:last-child{ font-size:16.5px; }
  .contact__title{ font-size:clamp(30px, 8vw, 64px); }
  .contact__lead{ font-size:18px; }
  .contact__mail{ font-size:clamp(24px, 7vw, 40px); }
  .contact__reply{ font-size:15px; }
  .contact__copy{ font-size:14.5px; }
  .modal__cap{ font-size:14px; }
  .modal__title{ font-size:34px; }
  .modal__lead{ font-size:16.5px; }
  .modal__field span{ font-size:14px; }
  .modal__field input{ font-size:17px; }
  .modal__error{ font-size:15.5px; }
  .modal__submit{ font-size:14.5px; padding:15px 24px; }
  .modal__help{ font-size:15px; }

  /* ---- service card, closer to desktop ----
     desktop: dark glass over a rose-tinted glow that also spills below the
     card, and boxy superellipse corners. Mobile hides the desktop photo, so
     the glow is rebuilt behind the panel (it is blurred by the panel's own
     backdrop-filter, same as desktop) and extends underneath it. */
  .feat__panel::before{
    content:""; position:absolute; z-index:-1; pointer-events:none;
    left:-14%; right:-14%; top:4%; bottom:-64px;
    background:
      radial-gradient(95% 30% at 50% 55%, rgba(216,150,165,.30), rgba(216,150,165,0) 72%),
      radial-gradient(90% 18% at 50% 6%, rgba(216,158,162,.20), rgba(216,158,162,0) 70%);
    filter:blur(26px);
  }
  .unified{ border-radius:14px; }
  @supports (corner-shape:superellipse(4)){ .unified{ border-radius:24px; } }
  /* the desktop seams are notches on the top/bottom edges; stacked, the seams
     run horizontally, so the same raised-cosine dips are bitten into the LEFT
     and RIGHT edges at the 1/3 and 2/3 marks. Three equal rows keep the seams
     exactly on those marks. */
  .unified{
    display:grid; grid-template-rows:repeat(3, 1fr);
    clip-path:polygon(
    0 0,
    0.00px calc(33.333% + -11.00px),
    0.51px calc(33.333% + -9.62px),
    1.98px calc(33.333% + -8.25px),
    4.17px calc(33.333% + -6.88px),
    6.75px calc(33.333% + -5.50px),
    9.33px calc(33.333% + -4.12px),
    11.52px calc(33.333% + -2.75px),
    12.99px calc(33.333% + -1.38px),
    13.50px calc(33.333% + 0.00px),
    12.99px calc(33.333% + 1.38px),
    11.52px calc(33.333% + 2.75px),
    9.33px calc(33.333% + 4.12px),
    6.75px calc(33.333% + 5.50px),
    4.17px calc(33.333% + 6.88px),
    1.98px calc(33.333% + 8.25px),
    0.51px calc(33.333% + 9.62px),
    0.00px calc(33.333% + 11.00px),
    0.00px calc(66.666% + -11.00px),
    0.51px calc(66.666% + -9.62px),
    1.98px calc(66.666% + -8.25px),
    4.17px calc(66.666% + -6.88px),
    6.75px calc(66.666% + -5.50px),
    9.33px calc(66.666% + -4.12px),
    11.52px calc(66.666% + -2.75px),
    12.99px calc(66.666% + -1.38px),
    13.50px calc(66.666% + 0.00px),
    12.99px calc(66.666% + 1.38px),
    11.52px calc(66.666% + 2.75px),
    9.33px calc(66.666% + 4.12px),
    6.75px calc(66.666% + 5.50px),
    4.17px calc(66.666% + 6.88px),
    1.98px calc(66.666% + 8.25px),
    0.51px calc(66.666% + 9.62px),
    0.00px calc(66.666% + 11.00px),
    0 100%,
    100% 100%,
    calc(100% - 0.00px) calc(66.666% + 11.00px),
    calc(100% - 0.51px) calc(66.666% + 9.62px),
    calc(100% - 1.98px) calc(66.666% + 8.25px),
    calc(100% - 4.17px) calc(66.666% + 6.88px),
    calc(100% - 6.75px) calc(66.666% + 5.50px),
    calc(100% - 9.33px) calc(66.666% + 4.12px),
    calc(100% - 11.52px) calc(66.666% + 2.75px),
    calc(100% - 12.99px) calc(66.666% + 1.38px),
    calc(100% - 13.50px) calc(66.666% + 0.00px),
    calc(100% - 12.99px) calc(66.666% + -1.38px),
    calc(100% - 11.52px) calc(66.666% + -2.75px),
    calc(100% - 9.33px) calc(66.666% + -4.12px),
    calc(100% - 6.75px) calc(66.666% + -5.50px),
    calc(100% - 4.17px) calc(66.666% + -6.88px),
    calc(100% - 1.98px) calc(66.666% + -8.25px),
    calc(100% - 0.51px) calc(66.666% + -9.62px),
    calc(100% - 0.00px) calc(66.666% + -11.00px),
    calc(100% - 0.00px) calc(33.333% + 11.00px),
    calc(100% - 0.51px) calc(33.333% + 9.62px),
    calc(100% - 1.98px) calc(33.333% + 8.25px),
    calc(100% - 4.17px) calc(33.333% + 6.88px),
    calc(100% - 6.75px) calc(33.333% + 5.50px),
    calc(100% - 9.33px) calc(33.333% + 4.12px),
    calc(100% - 11.52px) calc(33.333% + 2.75px),
    calc(100% - 12.99px) calc(33.333% + 1.38px),
    calc(100% - 13.50px) calc(33.333% + 0.00px),
    calc(100% - 12.99px) calc(33.333% + -1.38px),
    calc(100% - 11.52px) calc(33.333% + -2.75px),
    calc(100% - 9.33px) calc(33.333% + -4.12px),
    calc(100% - 6.75px) calc(33.333% + -5.50px),
    calc(100% - 4.17px) calc(33.333% + -6.88px),
    calc(100% - 1.98px) calc(33.333% + -8.25px),
    calc(100% - 0.51px) calc(33.333% + -9.62px),
    calc(100% - 0.00px) calc(33.333% + -11.00px),
    100% 0
    );
  }
  .unified__part + .unified__part{ margin-top:0; }
  .unified{ background:
      radial-gradient(130% 40% at 50% 0%, rgba(242,242,244,.09), rgba(242,242,244,.015) 70%),
      rgba(20,19,20,.30); }
}

@media (prefers-reduced-motion:reduce){
  .grain{ animation:none; }
  html{ scroll-behavior:auto; }
}