/* ---- 00-fonts.css ---- */
/* Self-hosted Google Fonts (latin + latin-ext only), so no visitor IP goes
   to Google on page load (the GDPR point raised for the launch). Variable
   fonts: Google serves one file per family/style/subset for all weights. */
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/montserrat-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/playfair-display-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- 01-tokens.css ---- */
/* ============================================================
   Lead in Beauty — site, v2 (18.09 redesign)
   The rules below the tokens come from Contenuti_Sito_LeadInBeauty
   (September 2026) and are the client's, not ours:
     - every text in grigio scuro #545454, never black
     - italic words: Playfair Display Italic, in the page accent
     - bold words: in the page accent, never grey
     - giallo burro never for text, backgrounds only
     - one accent per page: About malva, Our method arancione,
       What we offer azzurro, Case history verde
     - official brand marks only, never redrawn
   The composition follows the two sites the client asked this one
   to resemble: M.net Consulting and elenaminozzi.net.
   ============================================================ */

:root{
  --malva:#A3698A;
  --panna:#F4EFEB;
  --panna-deep:#EBE4DE;
  --white:#FFFFFF;
  --grigio-scuro:#545454;
  --grigio-chiaro:#B0B0B0;
  --arancione:#FB9355;
  --azzurro:#8FB5D9;
  --verde:#079366;
  --giallo:#FBE790;
  --line:rgba(84,84,84,.16);

  --f-title:"Arial Nova",Arial,"Helvetica Neue",Helvetica,sans-serif;
  --f-sub:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-accent:"Playfair Display",Georgia,"Times New Roman",serif;

  /* Wide enough to use a 2560px screen; paragraphs keep their own measure. */
  --shell:1680px;
  --gutter:clamp(20px,5.6vw,96px);
  /* The menu and the Home header run edge to edge, as in her 18.09 frame. */
  --edge:max(var(--gutter),5.6vw);
  --section:clamp(84px,9.5vw,152px);
  --nav-h:clamp(74px,6.2vw,96px);
  --corner:clamp(18px,1.8vw,26px);
  --ease:cubic-bezier(.16,1,.3,1);

  --t-title:clamp(30px,3.4vw,54px);
  --t-lead:clamp(19px,1.7vw,25px);
  /* Review final (06.10): "Tutti i blocchi di testo (non i titoli) devono
     essere leggermente più grandi". Running text 16-15px became about 17px
     at 1440 and 19px on wide screens; card texts one step under it. */
  --t-body:clamp(16px,calc(.4vw + 11.4px),19px);
  --t-card:clamp(15.5px,calc(.3vw + 12.2px),17.5px);
}

/* The page accent, and the official marks drawn in it. Custom properties can
   carry url(), so components ask for var(--tl) and get the page's colour. */
body{
  --accent:var(--malva);
  --u:url("/assets/marks/underscore-malva.png");
  --barra:url("/assets/marks/barra-malva.png");
  --freccia:url("/assets/marks/freccia-malva.png");
  --tl:url("/assets/marks/corner-tl-malva.png");
  --tr:url("/assets/marks/corner-tr-malva.png");
  --bl:url("/assets/marks/corner-bl-malva.png");
  --br:url("/assets/marks/corner-br-malva.png");
}
body[data-accent="arancione"]{
  --accent:var(--arancione);
  --u:url("/assets/marks/underscore-arancione.png");
  --barra:url("/assets/marks/barra-arancione.png");
  --freccia:url("/assets/marks/freccia-arancione.png");
  --tl:url("/assets/marks/corner-tl-arancione.png");
  --tr:url("/assets/marks/corner-tr-arancione.png");
  --bl:url("/assets/marks/corner-bl-arancione.png");
  --br:url("/assets/marks/corner-br-arancione.png");
}
body[data-accent="azzurro"]{
  --accent:var(--azzurro);
  --u:url("/assets/marks/underscore-azzurro.png");
  --barra:url("/assets/marks/barra-azzurro.png");
  --freccia:url("/assets/marks/freccia-azzurro.png");
  --tl:url("/assets/marks/corner-tl-azzurro.png");
  --tr:url("/assets/marks/corner-tr-azzurro.png");
  --bl:url("/assets/marks/corner-bl-azzurro.png");
  --br:url("/assets/marks/corner-br-azzurro.png");
}
body[data-accent="verde"]{
  --accent:var(--verde);
  --u:url("/assets/marks/underscore-verde.png");
  --barra:url("/assets/marks/barra-verde.png");
  --freccia:url("/assets/marks/freccia-verde.png");
  --tl:url("/assets/marks/corner-tl-verde.png");
  --tr:url("/assets/marks/corner-tr-verde.png");
  --bl:url("/assets/marks/corner-bl-verde.png");
  --br:url("/assets/marks/corner-br-verde.png");
}

/* ---- 02-base.css ---- */
/* ---------- base ---------- */

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--nav-h);}
html.menu-open{overflow:hidden;}
body{
  margin:0;background:var(--panna);color:var(--grigio-scuro);
  font-family:var(--f-body);font-weight:400;font-size:var(--t-body);line-height:1.75;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em;}
h1,h2,h3{margin:0;font-weight:400;}
p,figure,blockquote,dl,dd{margin:0;}
:focus-visible{outline:2px solid var(--grigio-scuro);outline-offset:3px;}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;background:var(--grigio-scuro);color:var(--panna);font-size:14px;text-decoration:none;}
.skip:focus{top:12px;}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter);}
.shell--wide{max-width:none;padding-inline:var(--edge);}

/* ---------- emphasis, per the document ---------- */

em{font-family:var(--f-accent);font-style:italic;font-weight:400;color:var(--accent);}
strong{font-weight:700;color:var(--accent);}

/* ---------- type ---------- */

.title{
  font-family:var(--f-title);font-size:var(--t-title);line-height:1.12;
  letter-spacing:-.012em;margin-bottom:clamp(20px,2.4vw,34px);text-wrap:balance;
}
/* Playfair sits smaller on its x-height than Arial; lifted so the pair reads level. */
.title em{font-size:1.07em;letter-spacing:0;}
.subtitle{font-family:var(--f-sub);font-weight:300;font-size:clamp(18px,1.55vw,22px);line-height:1.5;}
.prose p{max-width:62ch;}
.prose p+p{margin-top:1.1em;}

/* Review 1 (28.09): section titles "tutti in stampatello con trattino di
   fianco come reference sotto ma più grande. Colorato solo trattino." Her
   reference is the company profile's "— WHY WORK WITH US." The dash is the
   official underscore in the page accent; the words stay grigio scuro. */
/* Review 2 (02.10): the dash "non al centro della frase ma allineata più in
   basso e più piccola", in the proportions of her "A CHI CI RIVOLGIAMO"
   sample: about as long as a capital is tall, thin, on the baseline. A flex
   item with no text aligns its bottom edge to the baseline. */
.title--dash{
  display:flex;align-items:baseline;gap:.55em;
  font-family:var(--f-body);font-weight:600;font-size:clamp(20px,1.85vw,30px);
  line-height:1.3;letter-spacing:.2em;text-transform:uppercase;text-wrap:balance;
  margin-bottom:clamp(20px,2.4vw,34px);
}
.title--dash::before{content:"";flex:0 0 auto;width:1.15em;height:.19em;background:var(--u) left bottom/100% 100% no-repeat;}
.title--dash em{font-family:inherit;font-style:normal;font-size:1em;color:inherit;}

/* "OCCHIELLO": the small titles top left that separate the sections */
.occhiello{
  display:flex;align-items:center;gap:12px;margin-bottom:clamp(18px,2vw,26px);
  font-size:11.5px;font-weight:700;letter-spacing:.24em;line-height:1.5;text-transform:uppercase;
}
.occhiello::before{content:"";flex:0 0 auto;width:24px;height:8px;background:var(--u) left center/contain no-repeat;}

/* Four official corner pieces "per incorniciare le cose importanti". Cut
   from the Drive's angoli artwork rather than drawn with borders. */
.framed{position:relative;}
.framed::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    var(--tl) left top / var(--corner) auto no-repeat,
    var(--tr) right top / var(--corner) auto no-repeat,
    var(--bl) left bottom / var(--corner) auto no-repeat,
    var(--br) right bottom / var(--corner) auto no-repeat;
}

/* "DISCOVER MORE": tracked capitals with the official arrow that moves on
   hover. Review 1: the hairline under it is gone ("togliere sottolineato"). */
.more{
  display:inline-flex;align-items:center;gap:16px;min-height:44px;padding:10px 0;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--grigio-scuro);
}
.more-arrow{flex:0 0 auto;width:30px;height:22px;background:var(--freccia) center/contain no-repeat;transition:transform .45s var(--ease);}
.more:hover .more-arrow,.more:focus-visible .more-arrow{transform:translateX(7px);}

/* ---------- sections over photographs ----------
   M.net's device: the image carries texture, a veil carries the contrast,
   so the copy never depends on the photograph. */
.backdrop{position:relative;isolation:isolate;padding-block:var(--section);background:var(--panna) center/cover no-repeat;}
.backdrop::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;}
.backdrop--corridor{background-image:url("/assets/img/corridor.jpg");}
.backdrop--corridor::before{background:linear-gradient(90deg,rgba(255,255,255,.93) 0%,rgba(255,255,255,.84) 52%,rgba(255,255,255,.62) 100%);}
.backdrop--peach{background-image:url("/assets/img/peach-light.jpg");}
.backdrop--peach::before{background:linear-gradient(90deg,rgba(244,239,235,.72) 0%,rgba(244,239,235,.5) 55%,rgba(244,239,235,.3) 100%);}
/* On a phone the section is tall, the corridor is scaled up, and its steps
   read as stray bars between the cards: the veil goes almost solid. */
@media (max-width:720px){
  /* Review ultima: "immagine di sfondo leggermente più visibile, soprattutto
     nell'ultima frase dove è tutto bianco": a lighter veil, lightest at the
     foot, and the corridor's darker left wall brought under the copy. */
  .backdrop--corridor{background-position:22% center;}
  .backdrop--corridor::before{background:linear-gradient(180deg,rgba(255,255,255,.84) 0%,rgba(255,255,255,.76) 60%,rgba(255,255,255,.5) 100%);}
  .backdrop--peach::before{background:rgba(244,239,235,.6);}
}

/* Inner pages open on the light-and-shadow wall, under the clear menu. */
.page-hero{position:relative;isolation:isolate;padding:calc(var(--nav-h) + clamp(56px,8vw,128px)) 0 var(--section);}
.page-hero{overflow:hidden;}
/* Review ultima: the inner pages open as Home and M.net do, the header's
   photograph settling while the title rises (the .reveal in the copy). */
.js .page-hero-bg{animation:hero-settle 1.8s var(--ease) both;}
.page-hero-bg{position:absolute;inset:0;z-index:-1;background:var(--panna) url("/assets/img/hero-light-2400.jpg") center top/cover no-repeat;}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(244,239,235,0) 45%,var(--panna) 100%);}
.page-title{max-width:22em;}

/* Review final: line breaks for one screen size only. Her phone copy breaks
   shorter lines than the desktop copy, in the same sentence. */
@media (max-width:899.98px){br.d-only{display:none;}}
@media (min-width:900px){br.m-only{display:none;}}

/* ---- 03-nav.css ---- */
/* ---------- nav ----------
   Clear over the top of every page, as on M.net; panna with a hairline once
   the page moves. Every page opens on a light ground, so the ink never has
   to change colour between the two states. */

.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background-color .4s var(--ease),box-shadow .4s var(--ease);}
.nav.is-stuck{background:var(--panna);box-shadow:0 1px 0 var(--line);}
@media (min-width:1000px){
  .nav.is-stuck{background:rgba(244,239,235,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--nav-h);transition:height .4s var(--ease);}
.nav.is-stuck .nav-bar{height:calc(var(--nav-h) - 14px);}
.nav-logo{flex:0 0 auto;display:block;}
/* Review 2: logo and menu "leggermente più grandi (1 o 2 punti)". */
.nav-logo img{height:clamp(44px,3.6vw,55px);width:auto;transition:height .4s var(--ease);}
.nav.is-stuck .nav-logo img{height:clamp(39px,3.2vw,47px);}

.nav-toggle{position:relative;z-index:2;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;color:var(--grigio-scuro);cursor:pointer;}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{
  position:absolute;left:11px;width:22px;height:1.5px;background:currentColor;
  transition:transform .35s var(--ease),background-color .2s;
}
.nav-toggle-bars{top:21px;}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:"";left:0;}
.nav-toggle-bars::before{top:-7px;}
.nav-toggle-bars::after{top:7px;}
.nav.is-open .nav-toggle-bars{background:transparent;}
.nav.is-open .nav-toggle-bars::before{transform:translateY(7px) rotate(45deg);}
.nav.is-open .nav-toggle-bars::after{transform:translateY(-7px) rotate(-45deg);}

/* Phone menu: the whole screen, faded rather than slid, so nothing parked
   off-canvas adds scroll width. */
.nav-menu{
  position:fixed;inset:0;z-index:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  padding:calc(var(--nav-h) + 28px) var(--gutter) 40px;overflow-y:auto;
  background:var(--panna);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease),visibility 0s linear .35s;
}
.nav.is-open .nav-menu{opacity:1;visibility:visible;transition:opacity .35s var(--ease);}
.nav.is-open .nav-logo{position:relative;z-index:2;}
.nav-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;}
.nav-menu a{
  position:relative;display:inline-block;padding:10px 0 14px;
  font-family:var(--f-title);font-size:clamp(30px,8vw,40px);line-height:1.15;text-decoration:none;
}
.nav-menu a[aria-current="page"]::after{
  content:"";position:absolute;left:0;bottom:4px;width:36px;height:9px;
  background:var(--u) left center/contain no-repeat;
}
.lang{display:flex;gap:10px;font-size:12px;font-weight:700;letter-spacing:.22em;}
.lang-off{color:var(--grigio-chiaro);}

html:not(.js) .nav-toggle{display:none;}
html:not(.js) .nav-menu{position:static;opacity:1;visibility:visible;padding:0;background:none;}

@media (min-width:1000px){
  .nav-toggle{display:none;}
  .nav-menu{
    position:static;flex-direction:row;align-items:center;gap:clamp(24px,2.6vw,44px);
    padding:0;background:none;overflow:visible;
    opacity:1;visibility:visible;transition:none;
  }
  .nav-menu ul{display:flex;gap:clamp(18px,2.2vw,36px);}
  .nav-menu a{
    padding:12px 0;font-family:var(--f-body);font-size:13px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
  }
  /* Hover draws a hairline in from the left, as on M.net; the page you are on
     keeps the official underscore in its accent. */
  .nav-menu a::before{
    content:"";position:absolute;left:0;right:100%;bottom:6px;height:1px;
    background:currentColor;transition:right .35s var(--ease);
  }
  .nav-menu a:hover::before,.nav-menu a:focus-visible::before{right:0;}
  .nav-menu a[aria-current="page"]::before{display:none;}
  .nav-menu a[aria-current="page"]::after{bottom:1px;width:24px;height:7px;}
  .lang{padding-left:clamp(20px,2.2vw,32px);border-left:1px solid rgba(84,84,84,.2);font-size:12px;}
}

/* The EN / IT switch: two small links, not menu items. The language you are
   in stays dark; the other is grey until hovered. */
.nav-menu .lang a{
  display:inline-block;padding:10px 2px;font:inherit;letter-spacing:inherit;text-transform:none;
  text-decoration:none;transition:color .3s var(--ease);
}
.nav-menu .lang a::before,.nav-menu .lang a::after{content:none;}
.nav-menu .lang{align-items:center;}
.nav-menu .lang .lang-off:hover,.nav-menu .lang .lang-off:focus-visible{color:var(--grigio-scuro);}

/* ---- 04-home.css ---- */
/* ---------- home: header ----------
   Her frame, 18.09: the text top left, the vertical logo bottom right, and
   all of it on screen at landing. Type is sized off the viewport in both
   directions, so a short laptop screen shrinks it rather than pushing the
   logo below the fold. */

.hero{position:relative;overflow:hidden;background:var(--panna);}
.hero-bg{position:absolute;inset:0;display:block;}
.hero-bg img{width:100%;height:100%;object-fit:cover;}
.hero-inner{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto;
  min-height:100vh;min-height:100svh;
  padding-top:calc(var(--nav-h) + clamp(28px,9vh,128px));padding-bottom:clamp(32px,7.5vh,104px);
}
.hero-title{
  grid-column:1;grid-row:1;align-self:start;
  font-family:var(--f-title);font-size:clamp(27px,min(3.8vw,6.4vh),92px);
  line-height:1.17;letter-spacing:-.012em;
}
/* Review final: "Scrivere il titolo a sinistra leggermente più grande come
   era prima" - back to the Review 1 size. The block is a line taller, so the
   logo shares the title's rows (bottom right) instead of sitting under it,
   which keeps both on the first screen. */
.hero-line{display:block;}
.hero-title em{font-size:1.08em;line-height:1.08;letter-spacing:0;}
.hero-tag{margin-top:1.3em;font-size:.74em;font-weight:700;letter-spacing:.01em;text-transform:uppercase;}
.hero-tag strong{font-weight:inherit;}
.hero-logo{grid-column:2;grid-row:1 / -1;justify-self:end;align-self:end;width:clamp(220px,min(29vw,48vh),780px);height:auto;}

/* The wall settles in and the lines arrive one after another; the logo last. */
/* Review ultima: "Mettere stesse animazioni del sito di M.net ed Elena
   Minozzi quando si entra nella pagina": their motion.jsx values, the
   photograph settling from 1.07 over 1.8s and each line rising 20px over
   .7s, 110ms after the one before. */
.js .hero-bg img{animation:hero-settle 1.8s var(--ease) both;}
.js .hero-line,.js .hero-logo{opacity:0;animation:hero-rise .7s var(--ease) .12s forwards;}
.hero-line:nth-child(2){animation-delay:.23s;}
.hero-line:nth-child(3){animation-delay:.34s;}
.hero-line:nth-child(4){animation-delay:.45s;}
.hero-line:nth-child(5){animation-delay:.56s;}
.hero-line:nth-child(6){animation-delay:.67s;}
.js .hero-logo{animation-duration:1.2s;animation-delay:.8s;}
@keyframes hero-settle{from{transform:scale(1.07);}to{transform:none;}}
@keyframes hero-rise{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* Review 1: "una seconda versione con tutto il testo grigio e senza corsivo
   per vedere come viene e poter decidere dopo" - /?hero=b */
.hero-b .hero-title em{font-family:var(--f-title);font-style:normal;font-size:1em;line-height:inherit;letter-spacing:inherit;color:var(--grigio-scuro);}
.hero-b .hero-title strong{color:var(--grigio-scuro);}

@media (max-width:699.98px){
  .hero-inner{grid-template-columns:1fr;padding-top:calc(var(--nav-h) + clamp(24px,6vh,56px));}
  .hero-logo{grid-row:2;}
  .hero-title{font-size:clamp(27px,7.6vw,36px);line-height:1.2;}
  .hero-logo{grid-column:1;width:min(64vw,300px);}
}

/* ---------- home: intro, after the company-profile slide ----------
   Review 1: "sfondo a contrasto netto, quindi tutto color malva con testi
   colore panna #f4efeb", her nail-polish column at the left edge, no
   pittogramma. */

.intro{
  --h:clamp(620px,88vh,1160px);
  --accent:var(--panna);
  position:relative;overflow:hidden;display:flex;align-items:center;
  min-height:var(--h);padding-block:clamp(72px,8vw,120px);background:var(--malva);color:var(--panna);
}
/* Review 2: "Fare immagine leggermente più piccola così che non si tagli":
   the whole column of bottles inside the band. */
.intro-bottles{
  position:absolute;left:clamp(12px,4vw,80px);top:50%;height:calc(var(--h) * .86);width:auto;max-width:none;
  transform:translateY(-50%);pointer-events:none;
}
.intro-inner{position:relative;width:100%;max-width:none;padding-inline:0;}
.intro-copy{
  margin-left:max(calc(var(--h) * .28 + 8vw), 30vw);margin-right:var(--gutter);
  max-width:min(58vw,1080px);
}
.intro-title{
  font-family:var(--f-title);font-size:clamp(34px,4.1vw,78px);line-height:1.1;
  letter-spacing:-.018em;color:var(--panna);text-wrap:balance;
}
.intro-title em{font-size:1.07em;letter-spacing:-.005em;}
.intro-more{--freccia:url("/assets/marks/freccia-panna.png");margin-top:clamp(22px,2.6vw,40px);color:var(--panna);}
.intro-text{
  max-width:50ch;margin-top:clamp(30px,3.6vw,60px);
  font-size:clamp(16px,calc(.45vw + 11.5px),21px);line-height:1.85;letter-spacing:.035em;
}

/* Phones: the column hangs from the top edge of the band, cut by it, with
   the title beside it and the text running full width underneath (the
   title used to start below the column, leaving it alone in empty space). */
@media (max-width:759.98px){
  .intro{display:grid;grid-template-columns:min(30vw,150px) minmax(0,1fr);align-items:center;column-gap:clamp(14px,4vw,28px);min-height:0;padding-block:0 clamp(72px,18vw,104px);}
  .intro-inner,.intro-copy{display:contents;}
  .intro-bottles{position:relative;top:auto;left:auto;grid-column:1;grid-row:1;align-self:start;height:auto;width:100%;margin:clamp(28px,7vw,48px) 0 0 clamp(0px,3vw,24px);transform:none;}
  .intro-title{grid-column:2;grid-row:1;margin:clamp(28px,7vw,48px) var(--gutter) 0 0;font-size:clamp(26px,7vw,38px);}
  .intro-text{grid-column:1 / -1;grid-row:2;max-width:none;margin:clamp(30px,8vw,48px) var(--gutter) 0;}
  .intro-more{grid-column:1 / -1;grid-row:3;justify-self:start;margin:clamp(18px,5vw,28px) var(--gutter) 0;}
}

/* ---------- home: who we work with ---------- */

/* Review 10.10 (Elena, WhatsApp): "trattino sopra e le tre linee sotto i
   blocchi in giallo in questa sezione... così si alterna e collega meglio poi
   al blocco tutto giallo sotto": the dash and the card rules in giallo burro,
   the marks only; texts, italics and bolds stay malva. */
.audience{--u:url("/assets/marks/underscore-giallo.png");}
.audience .aud{border-bottom-color:var(--giallo);}

.aud-grid{list-style:none;margin:clamp(34px,4vw,60px) 0 0;padding:0;display:grid;gap:clamp(14px,1.6vw,24px);}
@media (min-width:900px){.aud-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
.aud{
  background:var(--white);padding:clamp(28px,2.8vw,44px) clamp(24px,2.5vw,40px) clamp(30px,3vw,46px);
  border-bottom:2px solid var(--accent);
  box-shadow:0 30px 60px -44px rgba(84,84,84,.45);
}
/* Stacked, each card's shadow falls into the narrow gap over the corridor
   and reads as a smudged bar: flat cards there. */
@media (max-width:899.98px){.aud{box-shadow:none;}}
.aud p{font-size:var(--t-card);line-height:1.8;}
.aud-lead{display:block;margin-bottom:16px;font-family:var(--f-title);font-size:clamp(20px,1.55vw,24px);line-height:1.28;letter-spacing:-.005em;}
.aud-lead em{font-size:1.08em;}
.aud strong{letter-spacing:.02em;}
.aud-close{
  max-width:none;margin-top:clamp(48px,5.5vw,84px);
  font-family:var(--f-title);font-size:var(--t-lead);line-height:1.5;
}
.aud-close em{font-size:1.07em;}

/* ---------- home: our method ----------
   Review 1: text and THINK AHEAD ACT NOW both ranged left, DISCOVER MORE
   under them, and her swatches standing upright on the right. */

.teaser{position:relative;overflow:hidden;padding-block:var(--section);background:var(--panna);}
.teaser-grid{display:grid;gap:clamp(40px,5vw,80px);align-items:center;}
.teaser-copy{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(26px,3vw,44px);}
.teaser-copy .title--dash{margin-bottom:0;}
.teaser-text{max-width:17em;font-family:var(--f-title);font-size:clamp(25px,2.7vw,44px);line-height:1.3;letter-spacing:-.01em;}
.teaser-text em{font-size:1.07em;}
.teaser-lockup{display:block;width:min(100%,560px);margin-top:clamp(8px,2vw,28px);}
.teaser-lockup img{width:100%;height:auto;transition:transform .7s var(--ease);}
.teaser-lockup:hover img,.teaser-lockup:focus-visible img{transform:translateX(8px);}
.teaser-more{font-size:14px;gap:20px;}
.teaser-more .more-arrow{width:36px;height:26px;}
.teaser-img{justify-self:center;width:auto;height:clamp(420px,52vw,780px);max-width:100%;object-fit:contain;}
/* Review 2: "Immagine a destra in verticale farla più corta e più grande. In
   questo caso va bene che tocchi i bordi del blocco", as on her company-
   profile slide: the swatches fill the right of the block from its top edge
   to its bottom edge and run off the right side. */
@media (min-width:900px){
  .teaser-grid{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,500px);column-gap:clamp(48px,7vw,140px);}
  .teaser-img{
    position:absolute;top:0;right:0;bottom:0;height:100%;width:clamp(240px,26vw,500px);max-width:none;
    object-fit:cover;object-position:left center;
  }
  /* Review ultima: "Immagine più tagliata di lato come nelle nostre
     presentazioni": the column pushed past the right edge, a third of it cut. */
  .teaser-img{right:calc(clamp(240px,26vw,500px) * -.34);}
}
/* Phones. Review final: "o la facciamo più grande che si taglia di lato a
   destra": the column runs the full height of the block, as on desktop, and
   the screen edge cuts its right side; the copy keeps the rest of the width.
   "Discover more scritto un po' troppo grande qui": the size of the others. */
@media (max-width:899.98px){
  .teaser-grid{grid-template-columns:minmax(0,1fr) 22vw;column-gap:clamp(12px,4vw,32px);}
  .teaser-img{
    position:absolute;top:0;right:-9vw;bottom:0;height:100%;width:30vw;max-width:none;
    object-fit:cover;object-position:left center;
  }
  /* Review ultima: "spostare immagine un po' più a destra così che non
     viene attaccata al testo": 9vw further out, the copy column unchanged. */
  .teaser-text{font-size:clamp(22px,6vw,25px);}
  .teaser-more{font-size:12px;gap:16px;}
  .teaser-more .more-arrow{width:30px;height:22px;}
}

/* ---------- home: why brands choose us ----------
   Review 1: her leaf-shadow image as the ground; boxes as her reference (the
   company profile's panna card inside the official corners), the number in
   Arial Nova "quasi quanto la box" with the title and text to its right, and
   the texts at the size of the Who we work with boxes. */

.reasons-sec{position:relative;isolation:isolate;padding-block:var(--section);}
/* Review ultima (09.10, WhatsApp): "mettere tutto il fondo giallo o con codice
   #fbe790, sia nella versione telefono che pc": the leaf-shadow photograph
   gives way to plain giallo burro, so the text goes back to grigio scuro and
   the marks, italics and bolds to malva. */
.reasons-bg{position:absolute;inset:0;z-index:-1;background:var(--giallo);}
.reasons-sec{--accent:var(--malva);--u:url("/assets/marks/underscore-malva.png");--barra:url("/assets/marks/barra-malva.png");}
.reasons-head .title--dash{margin-bottom:0;}
/* "scriverla grande come le altre simili e tutto allineato a sinistra": the
   size of the Our method statement, a line per phrase as she broke it. */
.reasons-sub{margin-top:clamp(24px,2.8vw,40px);font-family:var(--f-title);font-size:clamp(25px,2.7vw,44px);line-height:1.25;letter-spacing:-.01em;}
.reasons-sub > *{display:block;}
.reasons-sub em{font-size:1.07em;line-height:1.15;}
.reasons-sub--end{margin-top:clamp(14px,1.6vw,24px);}
/* "Fare a bullet point con elemento grafico obliquo", no boxes, no numbers:
   two columns of points, each led by the official barra, the title in
   tracked capitals and the text indented under it. */
.reasons{list-style:none;margin:clamp(48px,5.5vw,84px) 0 0;padding:0;display:grid;gap:clamp(28px,3vw,44px) clamp(40px,6vw,120px);}
@media (min-width:900px) and (max-width:1099.98px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr));}}
.reason{position:relative;padding-left:clamp(34px,2.8vw,44px);max-width:560px;}
.reason::before{
  content:"";position:absolute;left:0;top:.18em;width:clamp(20px,1.7vw,26px);height:clamp(16px,1.4vw,21px);
  background:var(--barra) left center/contain no-repeat;
}
/* Review final: "I titoletti dei paragrafi in grassetto", the texts a little
   larger, and "Tutto il bullet point sulla destra con i punti uno sotto
   l'altro": from 1100px the statement holds the left column (and stays in
   view while the points scroll by) and the points run down the right. */
.reason-label{margin-bottom:8px;font-family:var(--f-sub);font-weight:700;font-size:clamp(16px,1.3vw,20px);letter-spacing:.06em;line-height:1.35;}
.reason p{font-size:var(--t-body);line-height:1.75;}
@media (min-width:1100px){
  .reasons-sec .shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(48px,6vw,120px);align-items:start;}
  .reasons-head{position:sticky;top:calc(var(--nav-h) + 32px);}
  .reasons-sub{font-size:clamp(25px,2.3vw,40px);}
  .reasons{grid-template-columns:1fr;margin-top:clamp(8px,1vw,16px);}
  .reason{max-width:600px;}
}

/* ---------- logo rails (case histories, career) ----------
   Seam-free loop: identical sets each slide -100% of their own width, and
   site.js adds as many copies as the screen needs. Every mark sits on the
   same 760x300 cell at equal ink area, so they read the same size. */

.marquee{
  display:flex;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-set{display:flex;flex:0 0 auto;align-items:center;margin:0;padding:0;list-style:none;}
.marquee.is-running .marquee-set{animation:marquee var(--marquee-dur,48s) linear infinite;}
.marquee.is-running:hover .marquee-set{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-100%);}}
.marquee-set li{flex:0 0 auto;width:var(--cell);padding-inline:clamp(8px,1.2vw,22px);}
.marquee-set img{width:100%;height:auto;}
html:not(.js) .marquee,.marquee.is-static{-webkit-mask-image:none;mask-image:none;justify-content:center;}
html:not(.js) .marquee-set,.marquee.is-static .marquee-set{flex-wrap:wrap;justify-content:center;}
@media (prefers-reduced-motion:reduce){.marquee.is-running .marquee-set{animation:none;}}

/* Review final: "Sfondo color panna come il blocco sotto, non bianco". Then
   "Aggiustare spazio tra questo blocco e quello dopo": both blocks are panna,
   so their two paddings read as one double gap; the Instagram block drops
   its top padding and the gap is one section, as everywhere else. */
.clients{padding-block:var(--section);background:var(--panna);}
.clients + .insta{padding-top:0;}
.marquee--clients{--cell:clamp(240px,21vw,450px);margin-top:clamp(36px,4.5vw,68px);}
.marquee--clients img{opacity:.9;}

/* ---------- home: instagram ----------
   Until the account's feed is connected the tiles are the brand's own
   ground with the pittogramma, and every one leads to the profile. */

.insta{padding-block:var(--section);background:var(--panna);overflow:hidden;}
.insta-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 40px;}
.insta-head .title--dash{margin-bottom:0;}
.insta-handle{
  display:inline-flex;align-items:center;gap:12px;min-height:44px;padding-bottom:6px;
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
}
.insta-handle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;}
.insta-handle svg circle:last-child{fill:currentColor;stroke:none;}
.insta-handle:hover{color:var(--accent);}
.insta-feed{margin-top:clamp(30px,3.6vw,52px);}
.insta-track{
  list-style:none;margin:0 auto;padding:0 var(--gutter);max-width:calc(var(--shell) + 2 * var(--gutter));
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(8px,.9vw,16px);
}
/* Review 1: "Post non quadrati ma con formato post IG", Instagram's 4:5 portrait. */
.insta-tile{position:relative;display:block;aspect-ratio:4 / 5;overflow:hidden;background:var(--panna-deep);}
.insta-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease);}
.insta-tile:hover img{transform:scale(1.05);}
.insta-tile--ph::after{
  content:"";position:absolute;inset:0;margin:auto;width:22%;height:22%;
  background:url("/assets/marks/pittogramma-panna.png") center/contain no-repeat;opacity:.95;
}
.insta-track li:nth-child(6n+1) .insta-tile--ph{background:var(--malva) url("/assets/img/why-1000.jpg") center/cover;}
.insta-track li:nth-child(6n+2) .insta-tile--ph{background:#E9D5CA url("/assets/img/peach-light.jpg") 30% 40%/260% auto;}
.insta-track li:nth-child(6n+3) .insta-tile--ph{background:#DCD6D2 url("/assets/img/corridor.jpg") 55% center/cover;}
.insta-track li:nth-child(6n+4) .insta-tile--ph{background:var(--panna-deep) url("/assets/img/hero-light.jpg") center/cover;}
.insta-track li:nth-child(6n+5) .insta-tile--ph{background:var(--malva) url("/assets/img/why-1000.jpg") 80% 70%/240% auto;}
.insta-track li:nth-child(6n) .insta-tile--ph{background:#E9D5CA url("/assets/img/peach-light.jpg") 80% 70%/220% auto;}
.insta-track li:nth-child(3n+3) .insta-tile--ph::after{background-image:url("/assets/marks/pittogramma-malva.png");}
@media (max-width:899.98px){
  .insta-track{grid-auto-columns:minmax(58vw,1fr);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none;}
  .insta-track::-webkit-scrollbar{display:none;}
  .insta-track li{scroll-snap-align:start;}
}
/* Review 2: the live posts take the tiles' place, still and in Instagram's
   order, rather than running as a rail. */

/* ---- 05-about.css ---- */
/* ---------- about: the founders ----------
   Review 1 (28.09): her new photograph of Elena and Teodora at the table
   replaces the cutout, and three figures "come in M.net Consulting" follow
   the text. */

.founders{
  position:relative;isolation:isolate;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(36px,5vw,88px)) 0 clamp(24px,3vw,48px);
  background:var(--panna);
}
.founders::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:url("/assets/img/hero-light-2400.jpg") center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.founders-grid{display:grid;gap:clamp(36px,5vw,72px);align-items:center;}
.founders-title{font-size:clamp(34px,3.7vw,68px);line-height:1.1;margin-bottom:clamp(24px,2.8vw,40px);}
.founders-title span{display:block;}
/* Review 2: her new photograph is a portrait (4:5), so its column narrows. */
.founders-figure{margin:0;}
.founders-photo{width:100%;height:auto;aspect-ratio:4 / 5;object-fit:cover;box-shadow:0 40px 80px -56px rgba(84,84,84,.6);}
@media (min-width:900px){
  .founders-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);column-gap:clamp(48px,6vw,120px);}
  .founders-figure{max-width:560px;justify-self:end;width:100%;}
}
/* Review 2, phones: "Immagini subito sotto il titolo prima del testo". */
@media (max-width:899.98px){
  .founders-grid{gap:0;}
  .founders-copy{display:contents;}
  .founders-title{order:1;}
  .founders-figure{order:2;margin-bottom:clamp(28px,7vw,44px);}
  .founders-copy .prose{order:3;}
  .figures{order:4;}
}

/* The figures, set as on M.net: the numeral large in the accent, its label
   in tracked capitals under it, three across. */
.figures{list-style:none;margin:clamp(34px,4vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);max-width:620px;}
.figure{display:flex;flex-direction:column;gap:10px;}
.figure strong{font-family:var(--f-title);font-weight:400;font-size:clamp(34px,3.6vw,56px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.figure-label{font-size:10.5px;font-weight:700;letter-spacing:.14em;line-height:1.55;text-transform:uppercase;}
@media (max-width:520px){.figures{grid-template-columns:1fr;gap:22px;}}

/* "Sotto, una riga con i loghi del percorso, tutti in una tinta unita" —
   no band of its own any more: the rail runs on the page ground. */
.career{--cell:clamp(170px,15vw,320px);padding-block:clamp(48px,5.4vw,88px);}
.career img{opacity:.85;}

/* ---------- about: positioning ---------- */

.positioning{padding-block:calc(var(--section) * .45) calc(var(--section) * .8);}
.positioning-card{position:relative;margin:0;display:grid;background:#E9E9EA;}
.positioning-img{width:100%;height:auto;}
.positioning-copy .title{max-width:13em;}
@media (min-width:900px){
  .positioning-card{grid-template-columns:44% 56%;aspect-ratio:16 / 9;overflow:hidden;}
  .positioning-img{position:absolute;inset:0;height:100%;object-fit:cover;object-position:left center;}
  /* The open wall to the right of the bottles, lifted a touch so the copy
     sits on an even ground. */
  .positioning-card::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.46) 54%,rgba(255,255,255,.62) 100%);}
  .positioning-copy{
    position:relative;z-index:1;grid-column:2;align-self:center;
    padding:clamp(32px,4vw,72px) clamp(32px,5vw,96px) clamp(32px,4vw,72px) clamp(8px,1.5vw,24px);
  }
}
/* Phones. Review final: one box, as on desktop.
   Review ultima (09.10, WhatsApp): the upright photograph "sul computer è
   bellissima ... ma qui su telefono no ... con le bottigliette in orizzontale
   e che lo sfondo si sfuma mentre si scende": a phone version of the same
   photograph turned a quarter clockwise (about-bottles-row.jpg, through the
   <picture> source), so the bottles stand in one row across the screen with
   their shadows falling below, and the wall fades into the copy. */
@media (max-width:899.98px){
  .positioning-card{background:#EFEFF5;overflow:hidden;}
  .positioning-card picture{display:block;}
  .positioning-card::after{
    content:"";position:absolute;left:0;right:0;top:0;aspect-ratio:941 / 780;pointer-events:none;
    background:linear-gradient(180deg,rgba(239,239,245,0) 55%,#EFEFF5 100%);
  }
  .positioning-img{aspect-ratio:941 / 780;object-fit:cover;}
  .positioning-copy{position:relative;z-index:1;margin-top:-10%;padding:0 clamp(22px,6vw,40px) clamp(32px,8vw,48px);}
}

/* ---------- about: network ----------
   Review 1: the framed line on the right, where the drawing was.
   Review 2: "Mettere fondo panna come resto della pagina": back on panna,
   so the marks and italics return to malva. (The contact block below is now
   malva, which keeps the two apart.) */

.network{padding-block:var(--section);background:var(--panna);}
.network-grid{display:grid;gap:clamp(40px,5vw,96px);align-items:center;}
/* Review 2: the boxed line keeps her breaks, so its column is the wider one. */
@media (min-width:900px){.network-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);}}
.closing{
  padding:clamp(28px,3.4vw,48px) clamp(26px,3.4vw,52px);
  font-family:var(--f-title);font-size:clamp(21px,2.1vw,30px);line-height:1.4;
}
.closing em{font-size:1.07em;}
/* A touch smaller than the other closings, so the Italian lines ("Con loro
   pensiamo in grande ed agiamo subito.") keep her breaks as well. */
.network .closing{margin:0;font-size:clamp(20px,1.85vw,27px);}
/* Review final: the text a little larger and further right, and the corners
   "più vicini alla scritta": the box is as wide as its lines, set right. */
/* Phones too, with her shorter lines: the corners close round the text. */
@media (max-width:899.98px){
  .network .closing{width:fit-content;max-width:100%;padding:clamp(22px,6vw,32px) clamp(24px,6.5vw,36px);}
}
@media (min-width:900px){
  .network .closing{justify-self:end;width:fit-content;max-width:100%;font-size:clamp(19px,1.9vw,29px);padding:clamp(24px,2.4vw,36px) clamp(26px,2.6vw,40px);}
}

/* ---- 06-method.css ---- */
/* ---------- our method ----------
   Review 1 (28.09): the title in the dash style, the lockup smaller and on
   the right (the Home size); the explanation smaller and tighter, with no
   rules between the parts, inside a box with her peach-stairs image on the
   left, as in the reference she gave. */

.method-hero{padding-bottom:clamp(40px,5vw,80px);}
.method-head{display:grid;gap:clamp(28px,4vw,56px);}
.method-head .title--dash{font-size:clamp(22px,2.3vw,38px);}
/* Review 2: "Tutto il testo metterlo a sinistra" - the lockup too, as on Home. */
.method-lockup{justify-self:start;width:min(100%,560px);height:auto;}

.method{padding-block:0 var(--section);}
/* The box, as the About card she pointed at: the photograph is the box, the
   stairs and their shadow on the left, and the method over the right side on
   a light veil, which also keeps the arancione legible over the peach wall. */
.method-card{position:relative;isolation:isolate;overflow:hidden;display:grid;background:#EFB28F;}
.method-card-img{width:100%;height:auto;aspect-ratio:5 / 4;object-fit:cover;}
@media (min-width:900px){
  /* Tall enough for the tip of the shadow triangle to stay in the frame. */
  /* Review final: "Mettere tutto il testo allineato a sinistra
     dell'immagine (la parte sfocata bianca può essere anche a sinistra)":
     the method and its veil on the left, the stairs rising on the right. */
  .method-card{grid-template-columns:minmax(0,60fr) minmax(0,40fr);min-height:clamp(560px,50vw,860px);}
  .method-card-img{position:absolute;inset:0;z-index:-2;height:100%;aspect-ratio:auto;object-position:center;}
  .method-card::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(90deg,rgba(251,244,239,.9) 0%,rgba(251,244,239,.8) 52%,rgba(251,244,239,0) 66%);
  }
  .method-card .tracks{grid-column:1;align-self:center;}
}
/* Phones. Review ultima: "mettere l'immagine delle scale come sfondo sfumata
   come nella versione desktop? Il testo quindi si sposta in alto e infondo
   alla sfumatura poi si vedono le scale": the photograph sits at the foot of
   the box, a veil runs from the top down and clears over the stairs, and the
   copy rests on the veiled part with room left below for the stairs. */
@media (max-width:899.98px){
  .method-card-img{position:absolute;left:0;right:0;bottom:0;z-index:-2;object-position:center bottom;}
  .method-card::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(251,244,239,.93) 0%,rgba(251,244,239,.9) calc(100% - 66vw),rgba(251,244,239,0) calc(100% - 26vw));
  }
  .method-card .tracks{padding-bottom:70vw;}
}
.tracks{display:grid;gap:clamp(22px,2.6vw,36px);padding:clamp(30px,3.6vw,60px) clamp(24px,3.6vw,64px);}
.track,.feed{display:grid;gap:14px 20px;}
.feed{column-gap:clamp(28px,2.6vw,40px);}
.track-name{font-family:var(--f-title);font-size:clamp(32px,3.2vw,52px);line-height:1;letter-spacing:-.02em;}
.track-name em{font-size:1.07em;letter-spacing:-.005em;}
.track-claim{margin:10px 0 8px;font-size:clamp(12px,.9vw,14px);font-weight:700;letter-spacing:.22em;}
.track-text{max-width:42ch;font-size:var(--t-body);line-height:1.7;}

.track-lane{display:flex;flex-direction:column;gap:14px;padding-top:6px;}
/* The bar continues the official arrow's shaft, so its thickness is the
   arrow's own: measured at 8.4% of the artwork's height. */
.track-line{--h:clamp(22px,2.1vw,30px);display:flex;align-items:center;width:var(--reach);height:var(--h);}
.track-bar{flex:1 1 auto;height:max(2px,calc(var(--h) * .084));margin-right:-3px;background:var(--accent);transform-origin:left center;}
.track-line img{flex:0 0 auto;height:100%;width:auto;}
.track-tip{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;}
.track-when{font-size:clamp(12px,.9vw,14px);font-weight:700;letter-spacing:.22em;}
.track-result{font-size:clamp(14px,1.05vw,16px);letter-spacing:.12em;}

.track--ahead{--reach:100%;--draw:2.4s;}
/* Review 2: "Tutto il testo metterlo a sinistra" - the Think ahead tip was
   ranged right, under the head of its arrow. */
.track--ahead .track-tip{justify-content:flex-start;text-align:left;}
.track--now{--reach:30%;--draw:.6s;}
.track--now .track-lane{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px;}
/* Review final, phones: "Scrivere anche in act now '30 days' e 'short-term
   results' uno sotto l'altro come in Think ahead": on both tracks the time
   sits over the result, and the Act now line over both. */
@media (max-width:899.98px){
  .track-tip{flex-direction:column;align-items:flex-start;}
  .track--now .track-lane{flex-direction:column;align-items:stretch;gap:14px;}
}

.feed{grid-template-columns:auto minmax(0,1fr);align-items:center;}
.feed-arrows{display:flex;gap:4px;}
.feed-arrows span{display:grid;place-items:center;width:26px;height:clamp(48px,4.4vw,64px);overflow:visible;}
.feed-arrows img{width:clamp(48px,4.4vw,64px);max-width:none;height:auto;}
.feed-up img{transform:rotate(-90deg);}
.feed-down img{transform:rotate(90deg);}
.feed-text{max-width:54ch;font-size:var(--t-body);line-height:1.7;}

@media (min-width:1200px){
  .track{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);align-items:center;}
}

/* The sense of the method, drawn: when the tracks scroll into view the Act
   now arrow lands at once and the Think ahead arrow takes its time. */
.js .track-bar{transform:scaleX(0);}
.js .track-line img{opacity:0;}
.js .track.is-in .track-bar,.no-reveal .track-bar{transform:none;transition:transform var(--draw) cubic-bezier(.5,0,.2,1) .25s;}
.js .track.is-in .track-line img,.no-reveal .track-line img{opacity:1;transition:opacity .25s linear calc(var(--draw) * .92 + .25s);}
@media (prefers-reduced-motion:reduce){.js .track-bar{transform:none;}.js .track-line img{opacity:1;}}

/* Review 1: the closing line without its corners or pittogramma, broken
   where she asked, with her lipsticks standing on the right. */
.closing-sec{padding-bottom:var(--section);}
.closing-grid{display:grid;gap:clamp(32px,4vw,64px);align-items:center;}
@media (min-width:900px){.closing-grid{grid-template-columns:minmax(0,1fr) auto;}}
.closing--big{
  max-width:1080px;margin:0;padding:0;
  font-size:clamp(25px,3.1vw,46px);line-height:1.28;
}
.closing-img{justify-self:center;width:auto;height:clamp(320px,34vw,560px);max-width:100%;object-fit:contain;}
@media (max-width:899.98px){.closing-img{height:auto;width:min(46vw,200px);}}
/* Review final, phones: her lines must each hold on one line ("Una strategia
   senza attivazione" was wrapping), so the size follows the screen width. */
@media (max-width:599.98px){.closing--big{font-size:min(25px,5.9vw);}}

/* ---- 07-offer.css ---- */
/* ---------- what we offer: the services ----------
   Review 1 (28.09): "Fare le box esattamente come quelle di M.net in cui si
   passa sopra il mouse e compare il testo", without numbers. The M.net card:
   the photograph is the card, the title sits on a veil at the foot, and the
   text opens under it on hover or keyboard focus; where there is no hover
   (phones) the text is simply shown. Titles stay in Inter, per the document. */

.services{padding-bottom:var(--section);}
.services .title--dash{margin-bottom:clamp(18px,2vw,28px);font-size:clamp(22px,2.3vw,38px);}
.services-lead{max-width:24em;}
.services-lead em{font-size:1.07em;}
.svc-grid{list-style:none;margin:clamp(40px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,16px);}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr;}}
.svc{position:relative;overflow:hidden;aspect-ratio:4 / 5;background:#2B2929;outline-offset:4px;}
/* Phones. Review ultima: "fare immagini dei servizi come in pagina di M.net":
   one per row, upright 4:5 as theirs, the title and text over the dark veil
   at the foot, the text always shown. */
@media (max-width:640px){
  .svc{aspect-ratio:4 / 5;}
  .svc-veil{background:linear-gradient(180deg,rgba(40,38,38,0) 30%,rgba(40,38,38,.55) 58%,rgba(40,38,38,.9) 100%);}
}
.svc > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);}
.svc:hover > img,.svc:focus-within > img{transform:scale(1.06);}
.svc-veil{
  position:absolute;inset:0;transition:background .55s var(--ease);
  background:linear-gradient(180deg,rgba(40,38,38,.04) 0%,rgba(40,38,38,.16) 40%,rgba(40,38,38,.8) 74%,rgba(40,38,38,.95) 100%);
}
.svc:hover .svc-veil,.svc:focus-within .svc-veil{
  background:linear-gradient(180deg,rgba(40,38,38,.24) 0%,rgba(40,38,38,.46) 40%,rgba(40,38,38,.86) 74%,rgba(40,38,38,.96) 100%);
}
.svc-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.4vw,34px);color:var(--panna);}
.svc-title{font-family:var(--f-sub);font-weight:400;font-size:clamp(15px,1.2vw,19px);line-height:1.38;letter-spacing:.1em;color:var(--white);}
.svc-text{font-size:var(--t-card);line-height:1.7;}
@media (hover:hover){
  .svc-text{max-height:0;opacity:0;overflow:hidden;transition:max-height .55s var(--ease),opacity .4s var(--ease),margin-top .55s var(--ease);}
  .svc:hover .svc-text,.svc:focus-within .svc-text{max-height:14em;opacity:.92;margin-top:12px;}
}
@media (hover:none),(max-width:640px){.svc-text{max-height:none;margin-top:10px;opacity:.92;}}

/* ---------- our approach ----------
   The steps are consequential, so one line runs through them: it draws
   itself when the block comes into view, fills each step's dot as it
   passes, lets that step's content arrive, and ends on the official arrow.
   Across the top on a wide screen, down the left edge on a phone. */

.approach{padding-block:var(--section);background:var(--white);}
.approach .title--dash{margin-bottom:clamp(18px,2vw,28px);font-size:clamp(22px,2.3vw,38px);}
.steps-wrap{position:relative;margin-top:clamp(28px,4vw,60px);}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(52px,7vw,72px);}
.step{position:relative;}
.step-label{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:11.5px;font-weight:700;letter-spacing:.24em;}
.step-name{padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--line);font-family:var(--f-title);font-size:clamp(34px,3.4vw,52px);line-height:1.1;}
/* Review 1: the step texts larger. */
.step-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:clamp(17px,1.35vw,21px);}
.step-list li{position:relative;padding-left:28px;}
.step-list li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:10px;background:var(--barra) left center/contain no-repeat;}

.steps-line{position:absolute;display:flex;align-items:center;pointer-events:none;}
.steps-line-bar{flex:1 1 auto;background:var(--accent);}
.steps-line img{flex:0 0 auto;width:auto;}
.step::before{
  content:"";position:absolute;width:15px;height:15px;border-radius:50%;
  border:1.5px solid var(--accent);background:var(--white);
  transition:background-color .45s var(--ease),transform .6s var(--ease);
}

/* Phone: the line down the left edge, the steps to its right. */
.steps-line{left:6px;top:4px;bottom:-40px;width:2px;flex-direction:column;}
.steps-line-bar{width:2px;}
.steps-line img{height:auto;width:34px;transform:translateY(-8px) rotate(90deg);}
.step{padding-left:40px;}
.step::before{left:0;top:3px;}

@media (min-width:900px){
  .steps{--line-gap:64px;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,6vw,108px);padding-top:var(--line-gap);}
  .step{padding-left:0;}
  /* On the line, which runs 13px below the top of the block, above the
     step's own box: centre of a 15px dot at 13px, minus the gap. */
  .step::before{top:calc(5.5px - var(--line-gap));}
  .steps-line{left:0;right:0;top:0;bottom:auto;width:auto;height:26px;flex-direction:row;}
  .steps-line-bar{width:auto;height:2px;}
  .steps-line img{width:auto;height:100%;transform:none;margin-left:-3px;}
}

.js .steps-line-bar{transform:scaleY(0);transform-origin:center top;}
@media (min-width:900px){.js .steps-line-bar{transform:scaleX(0);transform-origin:left center;}}
.js .steps-line img{opacity:0;}
.js .step > *{opacity:0;transform:translateY(18px);}
.steps-wrap.is-in .steps-line-bar,.no-reveal .steps-line-bar{transform:none;transition:transform 2.6s cubic-bezier(.5,0,.2,1) .2s;}
.steps-wrap.is-in .steps-line img,.no-reveal .steps-line img{opacity:1;transition:opacity .4s linear 2.7s;}
.steps-wrap.is-in .step > *,.no-reveal .step > *{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);}
.steps-wrap.is-in .step::before{background:var(--accent);transform:scale(1.15);}
.steps-wrap.is-in .step:nth-child(1)::before,.steps-wrap.is-in .step:nth-child(1) > *{transition-delay:.3s;}
.steps-wrap.is-in .step:nth-child(2)::before,.steps-wrap.is-in .step:nth-child(2) > *{transition-delay:1.15s;}
.steps-wrap.is-in .step:nth-child(3)::before,.steps-wrap.is-in .step:nth-child(3) > *{transition-delay:1.95s;}
@media (prefers-reduced-motion:reduce){
  .js .steps-line-bar{transform:none;}
  .js .steps-line img,.js .step > *{opacity:1;transform:none;}
}

/* Review 1: "Togliere box e scrivere come altri testi allineato a sinistra". */
.approach-close em{font-size:1.07em;}
.approach-close{
  margin-top:clamp(64px,7.5vw,112px);
  font-family:var(--f-title);font-size:clamp(24px,2.6vw,40px);line-height:1.3;letter-spacing:-.01em;
}

/* ---- 08-cases.css ---- */
/* ---------- case history ----------
   The marks on white cells behind a hairline grid, as on M.net, rather than
   on grey tiles. Eight marks divide 4 / 2 with no orphan row. */

.logo-grid{
  list-style:none;margin:clamp(20px,3vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);
}
.logo-grid li{display:grid;place-items:center;aspect-ratio:3/2;padding:clamp(14px,2vw,32px);background:var(--white);}
.logo-grid img{width:100%;height:auto;opacity:.9;}
@media (min-width:760px){.logo-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}

.case-image{padding-bottom:var(--section);}
/* A slot, not a grey block: the light wall inside the corners until the
   image arrives. */
.case-placeholder{display:grid;place-items:center;aspect-ratio:4/3;background:var(--white) url("/assets/img/hero-light-2400.jpg") center/cover no-repeat;--corner:clamp(22px,2.4vw,36px);}
.case-placeholder img{width:clamp(44px,5vw,72px);height:auto;}
@media (min-width:700px){.case-placeholder{aspect-ratio:21/9;}}

/* ---- 09-contact.css ---- */
/* ---------- contact + footer (every page) ----------
   Review 1 (28.09):
     - "Let's make strategy happen": a break after "Let's make", as on
       elenaminozzi.net, and "happen" in grigio #545454;
     - CONTACTS, and the contacts smaller, as on elenaminozzi.net, all in
       grey. Grey needs a light ground, so the block sits on panna;
     - the footer strip below: no logo, only the copyright, in Elena's name,
       and in the colour of the page (Home and About malva, Our method
       arancione, What we offer azzurro, Case history verde). */

/* Review 2 (02.10): "Il blocco dove ci sono scritti i contatti in tutte le
   pagine deve avere sfondo colorato come la pagina": the whole block in the
   page accent, the text in panna, running straight into the footer strip. */
.contact{
  --line:rgba(244,239,235,.32);
  padding-block:var(--section) 0;background:var(--accent);color:var(--panna);
}
.contact-grid{display:grid;gap:clamp(36px,5vw,80px);padding-bottom:var(--section);}
@media (min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:start;}}
.contact-title{font-family:var(--f-title);font-size:clamp(40px,4.6vw,76px);line-height:1.08;letter-spacing:-.018em;}
.contact-title span{display:block;}
.contact-title em{font-size:1.08em;letter-spacing:-.005em;color:var(--panna);}
.contact-label{margin-bottom:clamp(12px,1.4vw,18px);font-size:10.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;}
.contact-list{border-top:1px solid var(--line);}
.contact-list div{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 40px;
  padding-block:clamp(12px,1.3vw,16px);border-bottom:1px solid var(--line);
}
.contact-list dt{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.contact-list dd{margin:0;font-family:var(--f-accent);font-style:italic;font-weight:400;font-size:clamp(17px,1.5vw,20px);line-height:1.25;}
.contact-list a{text-decoration:none;transition:opacity .3s var(--ease);}
.contact-list a:hover{opacity:.72;}
.contact :focus-visible{outline-color:var(--panna);}
@media (max-width:520px){
  .contact-list div{flex-direction:column;gap:4px;}
}

/* Same colour as the block above it, so a hairline marks where it starts.
   Review 2: "Copyright LEAD in Beauty" and the company details. */
.site-foot{background:var(--accent);color:var(--panna);}
.site-foot .shell{border-top:1px solid rgba(244,239,235,.32);}
.site-foot-inner{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 32px;
  padding-block:clamp(18px,1.8vw,24px);font-size:12px;letter-spacing:.14em;
}
.site-foot-company{font-size:11px;letter-spacing:.08em;opacity:.92;}
.site-foot-company span+span::before{content:"·";margin-inline:.7em;}
@media (max-width:720px){.site-foot-company span{display:block;}.site-foot-company span+span::before{content:none;}}
.site-foot :focus-visible{outline-color:var(--panna);}
.site-foot-inner > p:first-child a{color:inherit;}

/* ---------- privacy, 404 ---------- */
.legal-inner{max-width:860px;}
.legal .page-title{margin-bottom:clamp(28px,3vw,48px);}
.legal-text h2{margin:clamp(28px,3vw,40px) 0 10px;font-family:var(--f-sub);font-weight:700;font-size:clamp(15px,1.1vw,17px);letter-spacing:.08em;text-transform:uppercase;}
.legal-text p{font-size:var(--t-body);line-height:1.75;}
.legal-text a{color:var(--accent);}
.legal-date{margin-top:clamp(28px,3vw,40px);font-size:13px;opacity:.75;}

/* ---- 10-motion.css ---- */
/* ---------- reveal ----------
   Scroll-triggered fade-up, once, on transform and opacity only, as on the
   M.net pages. --d staggers siblings: style="--d:1", "--d:2"... */

.js .reveal{
  opacity:0;transform:translateY(26px);
  transition:opacity .75s var(--ease),transform .75s var(--ease);
  transition-delay:calc(var(--d,0) * 110ms);
}
.js .reveal.is-in,.no-reveal .reveal{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
  .js .hero-bg img,.js .hero-line,.js .hero-logo,.js .page-hero-bg{animation:none;opacity:1;}
}