/* =========================================================================
   Milossi — Colors & Type
   Source of truth for color tokens, font faces and the typographic scale.
   ========================================================================= */

/* ---- Fonts -------------------------------------------------------------- */
/* Archivo: variable font for everything that isn't a display headline.     */
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variablefont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-italic-variablefont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Moderniz: display face, used for the wordmark + giant headlines. */
@font-face {
  font-family: "Moderniz";
  src: url("/fonts/moderniz.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Color tokens ---------------------------------------------------- */
  /* Brand */
  --milossi-green:        #022B3A;  /* primary — never use pure black     */
  --milossi-green-2:      #1F7A8C;  /* accent / secondary                 */
  --white:                #FFFFFF;

  /* Tints (derived for surfaces, borders, dividers)                       */
  --green-95:             #F2F5F7;  /* near-white surface                  */
  --green-90:             #DCE5E9;  /* hairline on white                   */
  --green-80:             #B7C7CD;
  --green-60:             #6E8C95;
  --green-40:             #3B5E69;
  --green-20:             #022B3A;  /* === primary green                   */
  --green-15:             #021F2A;  /* deeper, used for hover on dark      */
  --accent-30:            #1F7A8C;  /* === secondary green                 */
  --accent-50:            #4FA0B0;  /* lighter accent, hover on green     */

  /* Semantic foreground / background --------------------------------- */
  --fg:                   var(--milossi-green);     /* default text       */
  --fg-on-dark:           var(--white);
  --fg-muted:             var(--green-60);
  --fg-link:              var(--milossi-green);
  --fg-accent:            var(--milossi-green-2);

  --bg:                   var(--white);
  --bg-dark:              var(--milossi-green);     /* dark sections      */
  --bg-soft:              var(--green-95);

  --border:               var(--milossi-green);     /* hairline pill brd  */
  --border-on-dark:       var(--white);
  --border-soft:          var(--green-90);

  /* ---- Type scale ------------------------------------------------------ */
  --font-display:         "Moderniz", "MODERNIZ", "Archivo Black", sans-serif;
  --font-body:            "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Body weights — Archivo Light is the default everywhere in the figma. */
  --fw-light:             300;
  --fw-regular:           400;
  --fw-medium:            500;
  --fw-bold:              700;

  /* Tracking & leading conventions from figma                            */
  --tracking-tight:       -0.005em;   /* small caps / labels              */
  --tracking-display:     -0.02em;    /* big display                      */
  --leading-display:      1.0;        /* MODERNIZ runs at 100% line       */
  --leading-display-relaxed: 1.15;    /* headlines with descenders        */
  --leading-body:         1.05;
  --leading-paragraph:    1.45;

  /* ---- Sizes (clamp() for responsive) --------------------------------- */
  --fs-hero:              clamp(64px, 9vw, 120px);  /* "This is milossi"  */
  --fs-display:           clamp(48px, 5.5vw, 75px); /* section megatitles */
  --fs-h1:                clamp(40px, 4.2vw, 54px); /* "We listen, we…"   */
  --fs-h2:                clamp(28px, 2.6vw, 34px);
  --fs-h3:                21px;
  --fs-lead:              21px;
  --fs-body:              17px;
  --fs-body-sm:           16px;
  --fs-meta:              15px;
  --fs-label:             10px;       /* the tiny pill labels              */

  /* ---- Spacing — 8/14pt rhythm, plus the 114px page gutter ------------ */
  --space-1:              4px;
  --space-2:              8px;
  --space-3:              14px;
  --space-4:              20px;
  --space-5:              32px;
  --space-6:              48px;
  --space-7:              70px;
  --space-8:              114px;      /* canonical page gutter             */
  --space-9:              200px;      /* between major sections            */

  /* ---- Radii & lines -------------------------------------------------- */
  --radius-pill:          100px;      /* labels and chips                  */
  --radius-none:          0;
  --hairline:             1px;
  --hairline-w:           0.5px;      /* used on pill borders              */
  --rule-thick:           3px;        /* the accordion ± plus signs        */

  /* ---- Motion --------------------------------------------------------- */
  --ease-smooth:          cubic-bezier(0.22, 0.61, 0.36, 1); /* default    */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-premium:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-premium:  cubic-bezier(0.7, 0, 1, 1);
  --dur-fast:             160ms;
  --dur-base:             320ms;
  --dur-slow:             640ms;
  --dur-micro:            240ms;
  --dur-reveal:           420ms;
  --dur-page:             800ms;

  /* ---- Layout --------------------------------------------------------- */
  --max-w-page:           1440px;
  --gutter:               114px;
  --gutter-tablet:        56px;
  --gutter-mobile:        24px;
}

/* =========================================================================
   Semantic type — apply these classes to slot into the system.
   ========================================================================= */
.t-hero {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: lowercase;
}
.t-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--fg);
  text-transform: lowercase;
}
.t-h1 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: 1.02;
  color: var(--fg);
}
.t-h2 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.05;
  color: var(--fg);
}
.t-h3 {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-h3);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-lead);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-meta {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-meta);
  line-height: 1.0;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.t-link {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 13px;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
}

/* Pill label — the tiny capsule chip used as a section eyebrow.           */
.t-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 1px 2px;
  border: var(--hairline-w) solid currentColor;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-tight);
  line-height: 1.0;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Wordmark — the logo text. Always uppercase, Moderniz/Unbounded.         */
.t-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1.0;
  text-transform: uppercase;
  color: var(--fg);
}

/* On-dark variants — flip the foreground.                                 */
.on-dark { color: var(--fg-on-dark); }
.on-dark .t-hero,
.on-dark .t-display,
.on-dark .t-h1,
.on-dark .t-h2,
.on-dark .t-h3,
.on-dark .t-lead,
.on-dark .t-body,
.on-dark .t-meta,
.on-dark .t-wordmark { color: var(--fg-on-dark); }
.on-dark .t-pill    { color: var(--fg-on-dark); }

/* Milossi — website UI kit
   Page-level styles. Tokens come from /colors_and_type.css. */

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

html,
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ---------- Custom Scrollbar ---------- */
::-webkit-scrollbar {
  display: none;
}

html {
  scrollbar-width: none;
}

/* Proportional scaling: the inline script in index.html applies html.zoom = viewportW / 1440
   at EVERY size. The layout viewport is therefore always exactly 1440px and the whole site
   scales as one block — identical proportions on any screen, large or small. */
body {
  max-width: 1440px;
  margin: 0 auto;
}

img,
.bg {
  display: block;
}

/* Global hover zoom effect for images - strictly internal */
img {
  scale: 1;
  transition: scale var(--dur-page) var(--ease-smooth);
}

div:hover>img,
a:hover>img,
section:hover>img,
img:hover {
  scale: 1.04;
}

/* Exclude specific sections from hover zoom (Make It Real and We Don't Stop At Eyewear) */
.home-mir-content img,
.works-mir-text img,
.works-mir-row div {
  transition: none !important;
  scale: 1 !important;
}

/* Assicura il ritaglio dello zoom all'interno dei riquadri dei genitori */
div:has(> img),
section:has(> img),
a:has(> img) {
  overflow: hidden;
}

/* ---------- Type system (scala ufficiale Milossi) ----------
   10 classi utility per coprire tutta la tipografia del sito.
   Applicare via className. Lasciare in inline style solo color, letterSpacing,
   textTransform, margin (cose non-tipografiche).
   Vedi CLAUDE.md → "Scala tipografica" per la documentazione completa. */
/* Core: Un solo Display Moderniz (75px) */
.t-display,
.t-display-l {
  font-family: var(--font-display);
  font-size: 75px;
  line-height: 1;
}

/* Core: Un solo Header (40px) */
.t-header,
.t-headline-m,
.t-headline-s {
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 40px;
  line-height: 40px;
}

/* Core: Un solo Body (16px) */
.t-body,
.t-body-l,
.t-body-s,
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- Eccezioni Consentite ---------- */

/* Eccezione 1: Fasi pesantemente animate (es. Hero) */
.t-display-mega {
  font-family: var(--font-display);
  font-size: clamp(64px, 9vw, 120px);
  line-height: 1;
}

/* Eccezione 2: Accordion in Works */
.t-display-s {
  font-family: var(--font-display);
  font-size: 50px;
  line-height: 1;
}

/* Eccezione 3: Copyright e metadati minori */
.t-caption {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11px;
  line-height: 1.2;
}

/* ---------- Page chrome ---------- */
.page {
  position: relative;
  width: 100%;
  min-width: 1024px;
}

.page-wrap {
  max-width: var(--max-w-page);
  margin: 0 auto;
  position: relative;
}

.gutter {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---------- Header ---------- */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100001;
  padding: 31px 29px 0;
  transition: color var(--dur-micro) var(--ease-smooth), opacity 0.3s ease-in-out;
}

/* Evita sovrapposizioni e collisioni visive dell'header durante le transizioni di pagina */
body.page-transition-active .header {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.15s ease-in-out !important;
}

.header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.header__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: inherit;
  text-decoration: none;
}

.header__nav {
  display: flex;
  gap: 22px;
}

.header__nav a {
  color: inherit;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding-top: 12px;
  transition: opacity var(--dur-micro) var(--ease-smooth);
}

.header__nav a:hover {
  opacity: 0.6;
}

.header__nav a.active {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.header__rule {
  position: absolute;
  left: 0;
  right: 0;
  top: 95px;
  height: 2px;
  background: currentColor;
}

.header--light {
  color: var(--milossi-green);
}

.header--dark {
  color: #fff;
}

.header--inline {
  position: relative;
  padding-top: 31px;
  padding-bottom: 16px;
  background: var(--bg);
  color: var(--milossi-green);
}

.header--inline .header__rule {
  background: var(--milossi-green);
}

.header--menu-open {
  color: #fff !important;
}

.header--menu-open .header__rule {
  opacity: 0;
}

/* Navbar reveal-on-scroll-up — pill blu dark flottante */
.header--floating {
  position: fixed;
  top: 0;
  padding: 10px 29px;
  transition: transform var(--dur-reveal) var(--ease-out), opacity var(--dur-reveal) ease;
  will-change: transform;
}

.header--floating .header__row {
  align-items: center;
  background: var(--milossi-green);
  color: #fff;
  border-radius: 15px;
  padding: 8px 13px;
  min-height: 35px;
}

.header--floating .header__mark {
  font-size: 16px;
  transform: translateY(0.14em);
}

.header--floating .header__menu-btn {
  font-size: 17px;
  gap: 5px;
}

.header--hidden {
  transform: translateY(-160%);
  opacity: 0;
  pointer-events: none;
}

/* Clean hero variant — no overlays, video only */
.hero--clean::after,
.hero--clean .hero__scrim {
  display: none;
}

/* Scroll pill at the bottom center of the hero */
.hero__pill-corner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(1.33);
  transform-origin: bottom center;
  bottom: 32px;
  z-index: 3;
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh / var(--zoom, 1));
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 43, 58, 0.15), rgba(2, 43, 58, 0.4));
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Safari/WebKit Hardware Acceleration & rendering fixes */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.hero--video::after {
  display: none;
}

/* gradient handled by hero__scrim */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 43, 58, 0.25), rgba(2, 43, 58, 0.55));
  z-index: 1;
}

.hero__title {
  position: relative;
  z-index: 2;
  padding-top: 235px;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: lowercase;
  color: #fff;
}

/* Short hero (Works / Services / Contact) — 475px tall at 1440px wide, title vertically centered */
.hero--short {
  height: 560px;
  background: #ffffff;
  color: var(--milossi-green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 220px;
  text-align: center;
  position: relative;
}

.hero--short::after {
  display: none !important;
}

.hero--short .hero__title {
  padding-top: 0;
  margin: 0;
  color: var(--milossi-green);
  text-transform: uppercase;
}

/* ---------- Hero mega title (this is milossi) ---------- */
.hero__mega-title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  padding: 0 var(--gutter);
  z-index: 2;
  pointer-events: none;
  margin: 0;
}

.hero__mega-word {
  display: block;
  font-family: var(--font-display);
  font-size: 16vw;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.9;
  color: #fff;
  text-transform: lowercase;
  white-space: nowrap;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  color: var(--milossi-green);
}

.pill--light {
  color: #fff;
}

/* ---------- Section block: pill -> headline -> body ---------- */
.block {
  padding-top: 70px;
  padding-bottom: 70px;
}

.block__pill {
  margin-bottom: 24px;
}

.block__head {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  text-transform: lowercase;
  color: inherit;
  max-width: 1100px;
}

.block__head--mega {
  font-size: var(--fs-hero);
  line-height: 1.15;
}

.block__body {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 21px;
  line-height: 22px;
  letter-spacing: var(--tracking-tight);
  color: inherit;
  max-width: 560px;
  margin-top: 28px;
}

.dark {
  background: var(--milossi-green);
  color: #fff;
}

/* ---------- Text link ---------- */
.tlink {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 13px;
  letter-spacing: var(--tracking-tight);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
  transition: opacity var(--dur-micro) var(--ease-smooth), text-decoration-thickness var(--dur-micro);
}

.tlink:hover {
  opacity: 0.6;
  text-decoration-thickness: 2px;
}

.tlink--big {
  font-size: 17px;
}

/* ---------- Buttons: primary / secondary ---------- */
/* Stesso ingombro per i due. Padding testo↔bordo ridotto di ~1/4 rispetto al vecchio LET'S CONNECT (32/20 → 24/15). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-micro) var(--ease-smooth),
    background var(--dur-micro) var(--ease-smooth);
}

.btn__text {
  position: relative;
}

/* Secondary — trasparente, crocini agli angoli (design LET'S CONNECT) */
.btn--secondary {
  background: transparent;
}

.btn--secondary .btn__text {
  /* Underline removed as requested */
}

.btn--secondary:hover {
  opacity: 1;
}

.btn__corner {
  position: absolute;
  width: 7px;
  height: 7px;
}

.btn__corner--tl {
  top: 0;
  left: 0;
}

.btn__corner--tr {
  top: 0;
  right: 0;
}

.btn__corner--bl {
  bottom: 0;
  left: 0;
}

.btn__corner--br {
  bottom: 0;
  right: 0;
}

/* Primary — rettangolo pieno con gradiente animato, testo bianco, stesso ingombro del secondary */
.btn--primary {
  background: linear-gradient(87deg, #022B3A 0.85%, #0677A0 75%, #022B3A 149.33%);
  background-size: 200% auto;
  color: #ffffff;
  animation: btn-gradient-wave 6s ease infinite;
}

@keyframes btn-gradient-wave {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* ---------- Accordion ---------- */
.acc {
  border-top: 1px solid currentColor;
}

.acc-row {
  border-bottom: 1px solid currentColor;
  padding: 32px 0;
  cursor: pointer;
  user-select: none;
}

.acc-row__top {
  display: grid;
  grid-template-columns: 1fr 60px;
  align-items: center;
  gap: 24px;
}

.acc-row__title {
  font-family: var(--font-display);
  font-size: 75px;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: lowercase;
  color: inherit;
  transition: color var(--dur-micro) var(--ease-smooth);
}

.acc-toggle {
  position: relative;
  width: 60px;
  height: 60px;
  justify-self: end;
  transition: color var(--dur-micro) var(--ease-smooth);
}

.acc-row:hover .acc-row__title {
  color: var(--milossi-green-2);
}

.acc-row:hover .acc-toggle {
  color: var(--milossi-green-2);
}

.acc-toggle .bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--dur-micro) var(--ease-smooth), background-color var(--dur-micro) var(--ease-smooth);
}

.acc-toggle .bar.v {
  transform: translateY(-50%) rotate(90deg);
}

.acc-row.open .acc-toggle .bar.v {
  transform: translateY(-50%) rotate(0deg);
}

.acc-row__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-reveal) var(--ease-smooth), padding var(--dur-micro) ease, opacity var(--dur-reveal) ease;
  opacity: 0;
}

.acc-row.open .acc-row__body {
  max-height: 320px;
  padding-top: 24px;
  opacity: 1;
}

/* Compact accordion variant — Archivo small text, used in Our Expertise */
.acc--compact .acc-row {
  padding: 18px 0;
}

.acc--compact .acc-row__top {
  grid-template-columns: 1fr 20px;
  gap: 16px;
}

.acc--compact .acc-row__title {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

.acc--compact .acc-toggle {
  width: 20px;
  height: 20px;
}

.acc--compact .acc-toggle .bar {
  height: 1px;
}

.acc-row__body p {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: var(--tracking-tight);
  max-width: 720px;
}

/* ---------- Milossi Steps trigger row ---------- */
.services-steps-row {
  border-top: 1px solid var(--milossi-green);
  border-bottom: 1px solid var(--milossi-green);
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 16px;
  color: var(--milossi-green);
  transition: color var(--dur-micro) var(--ease-smooth), border-color var(--dur-micro) var(--ease-smooth);
}

.services-steps-row:hover {
  color: var(--milossi-green-2);
}

.services-steps-body {
  height: 0;
  opacity: 0;
  overflow: hidden;
}

.services-steps-body .acc {
  border-top: none;
}

/* Works accordion variant — uppercase titles, body = text + 4 images */
.acc--works .acc-row__top {
  grid-template-columns: 1fr 30px;
}

.acc--works .acc-row__title {
  text-transform: uppercase;
  font-size: 50px;
}

.acc--works .acc-toggle {
  width: 30px;
  height: 30px;
}

.acc--works .acc-toggle .bar {
  height: 1.5px;
}

.acc--works .acc-row.open .acc-row__body {
  max-height: 400px;
}

.acc--works .acc-row__body-grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 48px;
  align-items: start;
}

.acc--works .acc-imgs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.acc--works .acc-img {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.08);
}

/* ---------- Stat row ---------- */
.stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 560px;
}

.stats__row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 18px;
  align-items: center;
  padding-bottom: 14px;
  border-bottom: 1px solid currentColor;
}

.stats__row::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  clip-path: polygon(48% 0, 52% 0, 52% 48%, 100% 48%, 100% 52%, 52% 52%, 52% 100%, 48% 100%, 48% 52%, 0 52%, 0 48%, 48% 48%);
}

.stats__row span {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 17px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}

/* ---------- Footer ---------- */
.footer {
  background: var(--milossi-green);
  color: #fff;
  padding: 80px var(--gutter) 60px;
}

.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px;
}

.footer__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.footer__col a,
.footer__col span {
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 14px;
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  padding: 3px 0;
}

.footer__col a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.8;
}

.footer__rules {
  display: flex;
  flex-direction: column;
  gap: 70px;
  margin-top: 60px;
}

.footer__rules .rule {
  height: 1px;
  background: #fff;
  opacity: 0.5;
}

.footer__end {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-top: 40px;
}

/* ---------- Header — hamburger trigger ---------- */
.header__menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 25px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  line-height: 1;
}

.menu-toggle {
  position: relative;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.menu-toggle .bar {
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4.5px;
  height: 2px;
  background: currentColor;
  transform: none;
  transition: transform var(--dur-micro) var(--ease-in-out-premium);
}

.menu-toggle .bar.v {
  transform: rotate(90deg);
}

.menu-toggle.open .bar.v {
  transform: rotate(0deg);
}

.menu-icon {
  display: inline-block;
  transform-origin: center;
  transition: transform var(--dur-micro) var(--ease-in-out-premium);
}

.menu-icon--open {
  transform: rotate(45deg);
}

/* ---------- Nav overlay (full-screen menu) ---------- */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--milossi-green);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--dur-reveal) var(--ease-in-out-premium);
  pointer-events: none;
}

.nav-overlay--open {
  transform: translateY(0);
  pointer-events: auto;
}

.nav-overlay__bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 31px 29px 0;
}

.nav-overlay__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--milossi-green-2);
  text-decoration: none;
}

.nav-overlay__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 35px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  line-height: 1;
}

.nav-overlay__rule {
  display: none;
}

.nav-overlay__nav {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 29px 10px;
  flex: 1;
}

.nav-overlay__item {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  transition: opacity var(--dur-micro) var(--ease-smooth);
}

.nav-overlay__item:hover .nav-overlay__label {
  color: var(--milossi-green-2);
}

.nav-overlay__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(70px, 12vw, 180px);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: #fff;
  transition: color var(--dur-micro) var(--ease-smooth);
}

.nav-overlay__sub {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: var(--tracking-tight);
  color: #fff;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height var(--dur-reveal) var(--ease-smooth), opacity var(--dur-micro) ease, margin-top var(--dur-reveal) var(--ease-smooth);
}

.nav-overlay__item:hover .nav-overlay__sub {
  max-height: 50px;
  opacity: 1;
  margin-top: 6px;
}

/* ---------- Hero CTA underline ---------- */
.hero__cta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  padding: 32px var(--gutter) 0;
  align-items: center;
}

.hero__cta-left,
.hero__cta-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 17px;
  letter-spacing: var(--tracking-tight);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Form ---------- */
.form {
  max-width: 448px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.form__row {
  display: flex;
  gap: 24px;
}

.form__row > .form__field {
  flex: 1;
}

.form__field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form__label {
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 15px;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: inherit;
}

.form__input {
  border: 0;
  border-bottom: 1px solid currentColor;
  padding: 6px 0 12px;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 17px;
  color: inherit;
  background: transparent;
  outline: none;
  width: 100%;
}

.form__input::placeholder {
  opacity: 0.5;
}

.form__send {
  align-self: flex-start;
  font-family: var(--font-body);
  font-weight: var(--fw-light);
  font-size: 17px;
  color: inherit;
  background: transparent;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0;
}

/* ---------- Two-col helper ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

/* Full-bleed escape — divides vw by --zoom so it spans the true viewport under root zoom. */
.full-bleed {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: calc(-50vw / var(--zoom, 1));
  margin-right: calc(-50vw / var(--zoom, 1));
  width: calc(100vw / var(--zoom, 1));
}

.image-band {
  width: 100%;
  height: 585px;
  background-size: cover;
  background-position: center;
}

.image-band--tall {
  height: 735px;
}

.image-band--short {
  height: 200px;
}

/* Full-bleed sections (.dark, .footer, .section-bleed) are direct children of .page,
   which always fills the 1440px layout viewport — so they span the screen automatically
   at every size. No viewport-unit overrides needed now that zoom is always active. */

/* ---------- Make-it-real interleaved headline ---------- */
.make-it-real {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 28px;
  row-gap: 18px;
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 1.15;
  letter-spacing: var(--tracking-display);
  text-transform: lowercase;
  color: var(--milossi-green);
}

.make-it-real .word {
  display: inline-block;
}

.make-it-real .inline-img {
  display: inline-block;
  height: 110px;
  width: auto;
  object-fit: cover;
  vertical-align: middle;
}

.make-it-real .inline-img--lg {
  height: 130px;
  width: 280px;
}

.make-it-real .inline-img--sm {
  height: 70px;
  width: 200px;
}

/* ---------- Utility ---------- */
.no-scroll {
  overflow: hidden !important;
}

.mobile-only {
  display: none !important;
}

/* ---------- Section marquee (banda inferiore Who/Expertise/Why) ---------- */
.section-marquee {
  position: relative;
  width: 500px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  display: flex;
  align-items: center;
}

.section-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: section-marquee-scroll 18s linear infinite;
}

.section-marquee__item {
  white-space: nowrap;
  padding-right: 48px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

@keyframes section-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes rotate-cursor {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ---------- Masked Clip Line (After Effects mask style) ---------- */
.clip-line {
  display: block;
  overflow: hidden;
  padding-top: 8px;
  margin-top: -8px;
  padding-bottom: 8px;
  margin-bottom: -8px;
}

/* Variante per headline grandi (54px+): padding ridotto al minimo */
.clip-line--tight {
  padding-top: 3px;
  margin-top: -3px;
  padding-bottom: 4px;
  margin-bottom: -4px;
}

.clip-line-inner {
  display: inline-block;
  will-change: transform;
  opacity: 0;
}

/* ---------- Pill FOUC Prevention ---------- */
.pill-corner-bl,
.pill-corner-tr {
  opacity: 0;
}

.pill-text-inner {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
}

/* ---------- Carousel Nav Indicators ---------- */
.carousel-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 10px;
  margin: 0 -7px;
  cursor: pointer;
  outline: none;
  transition: margin 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-nav-btn svg {
  display: block;
  width: 20px;
  height: 20px;
  transform-origin: center;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-nav-btn:hover {
  margin: 0 -1px;
}

.carousel-nav-btn:hover svg {
  transform: rotate(45deg);
}

/* Hide the connect button when the nav overlay is open */
body.no-scroll .connect-button {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* ---------- Harmonics Image Transition ---------- */
.harmonics-img-container {
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05);
}

.harmonics-img-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  /* Start clipped out from bottom */
  opacity: 1;
  z-index: 1;
  transition: none;
  /* Instant cleanup when removing was-active */
  will-change: clip-path;
}

.harmonics-img-layer.active {
  clip-path: inset(0% 0 0 0);
  /* Reveal fully */
  opacity: 1;
  z-index: 3;
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.harmonics-img-layer.was-active {
  clip-path: inset(0% 0 0 0);
  /* Stay static as a background */
  opacity: 1;
  z-index: 2;
  transition: none;
  /* No transition so it remains static */
}

/* ---------- Sezione "Design System" (Home) — base desktop ---------- */
.ds-section {
  padding-top: 100px;
  padding-bottom: 100px;
}

.ds-title {
  margin-top: 48px;
}

.ds-carousel {
  margin-top: 50px;
  margin-bottom: 50px;
}

.design-system-carousel-track {
  gap: 10px;
}

.ds-carousel-item {
  width: 370px;
  height: 331px;
}

/* ---------- Safari / WebKit Video Rendering Fixes ---------- */
video {
  /* Prevent default iOS Safari gray/black background during video load */
  background-color: transparent !important;
  /* Force hardware acceleration (compositing layer) in WebKit to prevent layout flickering and blanks */
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  /* Ensure WebKit handles video masking/clip-path smoothly */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Ensure parents of clipped/animated videos also force GPU rendering */
.reveal-clip,
.works-designs-video-col,
.section-bleed {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Fix Webkit clip-path masking behavior */
  will-change: transform, clip-path;
}

/* =========================================================================
   Mobile (< 768px) — sotto questo breakpoint lo zoom si spegne (vedi index.html)
   e subentra un layout fluido nativo. La scala .t-* viene rimappata qui in un
   punto solo: cambia solo la dimensione, NON le classi usate nel JSX.
   ========================================================================= */
@media (max-width: 767px) {
  :root {
    --gutter: 8px;
  }

  /* La .page ha min-width:1024px (necessario al sistema zoom desktop): a zoom
     spento va annullato, altrimenti l'intera pagina resta larga 1024px e tutto
     sborda. Questo è il fix strutturale chiave del layout fluido mobile. */
  .page {
    min-width: 0;
  }

  body {
    max-width: 100%;
  }

  /* Safety net: immagini/video non traboccano dal viewport fluido.
     (le misure fisse inline verranno esternalizzate nella fase layout) */
  img {
    max-width: 100%;
    height: auto;
  }

  video {
    max-width: 100%;
  }

  /* ---- Scala tipografica mobile (rimappa i gruppi .t-* esistenti) ---- */
  .t-display,
  .t-display-l {
    font-size: 38px;
    line-height: 1.05;
  }

  .t-display-mega {
    font-size: clamp(40px, 12vw, 64px);
  }

  .t-display-s {
    font-size: 30px;
  }

  .t-header,
  .t-headline-m,
  .t-headline-s {
    font-size: 28px;
    line-height: 1;
  }

  .t-body,
  .t-body-l,
  .t-body-s,
  .t-eyebrow {
    line-height: 1.4;
  }

  /* ---- Sezione "Design System": carosello adattato a misura mobile ---- */
  .ds-section {
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .ds-title {
    margin-top: 0;
  }

  .ds-title br {
    display: none;
    /* su mobile il titolo va a capo naturalmente, come nel frame */
  }

  .ds-carousel {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .design-system-carousel-track {
    gap: 20px;
  }

  /* stesse immagini del desktop, a ingombro mobile (~286x256, mantengono aspect ratio desktop) */
  .ds-carousel-item {
    width: 286px;
    height: 256px;
  }

  /* CTA primaria a tutta larghezza, testo allineato a sinistra (come nel frame) */
  .ds-cta>span {
    display: block;
    width: 100%;
  }

  .ds-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* ---- Home Carousel Mobile Override ---- */
  .desktop-carousel-container {
    height: auto !important;
    padding-top: 40px !important;
    position: relative !important;
  }

  .desktop-carousel-container section {
    height: auto !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
  }

  .home-carousel-grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    height: auto !important;
    gap: 24px !important;
  }

  .home-carousel-center {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 402 / 215 !important;
    position: relative !important;
    overflow: hidden !important;
    order: -1 !important;
    /* Image on top */
  }

  .home-carousel-center>div {
    left: var(--gutter) !important;
    right: var(--gutter) !important;
  }

  .home-carousel-left {
    width: 100% !important;
    height: 500px !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    /* Colonna flessibile: finestra testo scrollabile in alto,
       CTA + indicatori ancorati come footer in fondo.
       Altezza fissa = la CTA sta sempre nella stessa posizione (footer);
       se il testo supera la finestra, il paragrafo scrolla. */
  }

  .home-carousel-left>div {
    /* Finestra del testo: era absolute (inline) → la riportiamo nel flusso
       come riga flex che occupa tutto lo spazio sopra la CTA. */
    position: relative !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
    height: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    /* Taglia lo scorrimento orizzontale delle slide */
  }

  .home-carousel-left>div>div {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    padding-bottom: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* Il paragrafo scorre in verticale dentro la finestra;
       la CTA in fondo resta ferma. */
  }

  /* CTA animata + indicatori = footer ancorato in fondo alla colonna.
     Forzato con specificità alta perché ".desktop-carousel-container section"
     rendeva questa <section> position:relative e il suo bottom:25px inline
     la spingeva SOPRA il testo (causa del bug "fluttua sopra al testo"). */
  .home-carousel-left .home-carousel-mobile-controls {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    padding-top: 16px !important;
    padding-bottom: 25px !important;
    transition: padding-top var(--dur-reveal) var(--ease-smooth) !important;
  }

  .home-carousel-left.accordion-open .home-carousel-mobile-controls {
    padding-top: 24px !important;
  }

  /* Slide 2 — accordion APERTO: la card cresce e la CTA+icone scendono,
     invece di scrollare/tagliare il testo dell'accordion.
     La finestra passa ad altezza automatica e la slide attiva (3° figlio)
     torna nel flusso per darle altezza; le altre 2 restano assolute fuori
     schermo (clippate orizzontalmente dall'overflow:hidden della finestra). */
  .home-carousel-left.accordion-open {
    height: auto !important;
  }

  .home-carousel-left.accordion-open>div {
    flex: 0 0 auto !important;
    height: auto !important;
  }

  .home-carousel-left.accordion-open>div>div:nth-child(3) {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Reset button container margins/spacings on mobile */
  .home-carousel-left div[style*="marginTop"],
  .home-carousel-left div[style*="margin-top"] {
    margin-top: 48px !important;
    /* Space above CTA */
    margin-bottom: 0 !important;
    align-self: stretch !important;
    width: 100% !important;
  }

  /* Compact accordion even further on mobile to save vertical space */
  .home-carousel-left .acc--compact {
    margin-top: 16px !important;
  }

  .home-carousel-left .acc--compact .acc-row {
    padding: 10px 0 !important;
  }

  /* Compact controls on mobile */
  .home-carousel-controls {
    display: none !important;
  }

  .carousel-progress-container {
    width: 100% !important;
  }

  .carousel-nav-btn {
    padding: 0 !important;
    margin: 0 !important;
  }

  .carousel-nav-btn:hover {
    margin: 0 !important;
    transform: none !important;
  }

  .carousel-nav-btn:hover svg {
    transform: none !important;
  }

  /* ---- Header Mobile Override ---- */
  .header {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .header__row {
    align-items: center;
  }

  .header--floating {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
  }

  .header--floating .header__row {
    height: 45px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* ---- Hero Mobile Override ---- */
  .hero {
    height: 100vh !important;
    height: 100dvh !important;
  }

  /* ---- Hero Short Mobile Override ---- */
  .hero--short {
    height: 350px !important;
    /* Riduce l'altezza totale della sezione */
    padding-top: 120px !important;
    /* Regola lo spazio sopra il titolo */
  }

  /* ---- Nav Overlay Mobile Override ---- */
  .nav-overlay__nav {
    padding: 0 var(--gutter) 10px 6px;
  }

  .nav-overlay__item {
    padding: 5px 0;
  }

  .nav-overlay__label {
    font-size: 46px !important;
    white-space: nowrap;
  }

  .nav-overlay__sub {
    display: none !important;
  }

  /* ---- Footer Mobile Override ---- */
  .footer-giant-link {
    font-size: 60px !important;
    line-height: 62px !important;
    white-space: normal !important;
  }

  .mobile-only {
    display: flex !important;
  }

  .desktop-only {
    display: none !important;
  }

  .form__row {
    flex-direction: column !important;
    gap: 36px !important;
  }

  /* ---- Works: Collage Section Mobile Override ---- */
  .works-pin-section {
    height: auto !important;
  }

  .works-pin-section>div {
    height: auto !important;
  }

  .works-images-wall {
    position: relative !important;
    padding: 40px var(--gutter) !important;
  }

  /* ---- Works: We Design Eyewear Mobile Override ---- */
  .works-eyewear-section {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    gap: 32px !important;
  }

  .works-eyewear-img-col {
    order: -1 !important;
    width: 100% !important;
    padding: 0 var(--gutter) !important;
    overflow: hidden !important;
  }

  .works-eyewear-img-col img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .works-eyewear-text-col {
    width: 100% !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    gap: 20px !important;
  }

  .works-eyewear-text-col>div {
    gap: 16px !important;
  }

  .works-eyewear-text-col p {
    max-width: 100% !important;
  }

  /* ---- Works: Gadgets & Accessories Mobile Override ---- */
  .works-designs-section {
    padding-top: 80px !important;
    padding-bottom: 120px !important;
  }

  .works-designs-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .works-designs-video-col {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 570 / 320 !important;
  }

  .works-designs-text-col {
    width: 100% !important;
    gap: 20px !important;
  }

  .works-designs-text-col p {
    max-width: 100% !important;
  }

  .works-designs-text-col .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---- Works: We're Here Section Mobile Override ---- */
  .works-were-here-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    height: 400px !important;
    margin-bottom: 80px !important;
  }

  .works-were-here-content {
    width: 100% !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box !important;
  }

  .works-were-here-title {
    text-align: center !important;
  }

  .works-were-here-title span {
    white-space: normal !important;
    display: block !important;
  }

  .works-were-here-content .btn {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 20px !important;
  }

  /* ---- Services: Diagram Mobile Override ---- */
  .services-diagram-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .services-diagram-wrapper {
    height: auto !important;
  }

  .services-diagram-img {
    height: auto !important;
    object-fit: contain !important;
  }

  /* ---- Services: Milossi Steps Mobile Override ---- */
  .services-steps-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
  }

  .services-steps-text-col {
    width: 100% !important;
  }

  .services-steps-text-col p {
    max-width: 100% !important;
  }

  .services-steps-harmonics {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 485 / 566 !important;
  }

  /* ---- Contact Page: Mobile Overrides ---- */
  .contact-map-section {
    padding-top: 20px !important;
    padding-bottom: 30px !important;
  }

  .contact-map-container {
    height: auto !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .contact-map-img {
    transform: none !important;
    height: auto !important;
    width: 125% !important;
    max-width: 125% !important;
    margin-left: -12.5% !important;
  }

  .contact-map-cta-wrapper {
    position: relative !important;
    left: auto !important;
    bottom: auto !important;
    margin-top: 16px !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .contact-map-cta-wrapper .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .contact-details-section {
    padding-top: 30px !important;
    padding-bottom: 60px !important;
  }

  .contact-details-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 48px !important;
  }

  .contact-details-left-col,
  .contact-details-right-col {
    width: 100% !important;
  }

  .contact-details-left-col p {
    max-width: 100% !important;
  }

  .contact-details-right-col .form {
    max-width: 100% !important;
  }

  .contact-details-right-col .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .connect-button {
    display: none !important;
  }

  /* ---- Home Contact Section Mobile Override ---- */
  .home-contact-section {
    padding-top: 60px !important;
    padding-bottom: 0px !important;
  }
}

/* Play/Pause Video Button */
.video-play-pause-btn {
  position: absolute;
  left: 30px;
  bottom: 30px;
  width: 35px;
  height: 35px;
  z-index: 10;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.video-play-pause-btn:hover {
  transform: scale(1.08);
  background-color: rgba(255, 255, 255, 0.15);
}

.video-play-pause-btn:active {
  transform: scale(0.95);
}

.video-play-pause-btn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.video-play-pause-btn path.morph-path {
  transition: d 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

@media (max-width: 767px) {
  .video-play-pause-btn {
    left: 20px;
    bottom: 20px;
    width: 35px;
    height: 35px;
  }
}
/* Technical and semantic improvements; original colours, display type and layout remain. */
.skip-link{position:fixed;top:12px;left:12px;padding:12px 18px;background:#fff;color:var(--milossi-green);z-index:1000000;transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--milossi-green-2);outline-offset:5px}
a{color:inherit}.nav-overlay__item{text-decoration:none}.seo-intro{font:300 20px/1.5 var(--font-body);max-width:760px;margin:24px 0 42px;color:var(--milossi-green)}
.seo-services{padding-top:82px;padding-bottom:82px}.seo-services .t-eyebrow{margin-bottom:22px}.seo-services .t-headline-m{margin:0 0 40px}.seo-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}
.seo-service-card{display:block;border-top:1px solid var(--green-80);padding:22px 0;text-decoration:none;color:var(--milossi-green)}.seo-service-number{font:400 12px/1.4 var(--font-body);color:var(--milossi-green-2)}.seo-service-card h3{font:500 24px/1.2 var(--font-body);margin:35px 0 16px;display:flex;justify-content:space-between;gap:16px}.seo-service-card p{font:300 17px/1.5 var(--font-body);max-width:330px}.seo-service-card:hover h3{color:var(--milossi-green-2)}
.footer-service-links{display:flex;gap:24px;flex-wrap:wrap;border-top:1px solid var(--green-90);padding-top:22px;margin-top:34px;font:400 13px/1.6 var(--font-body)}.footer-service-links a{text-decoration:underline;text-underline-offset:4px}.footer-service-links button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
.project-form{display:flex;flex-direction:column;gap:24px;width:100%;max-width:660px}.project-form .form__row{width:100%}.form__textarea{resize:vertical;min-height:100px;font:inherit}.form-notice,.form-direct{font:300 14px/1.5 var(--font-body);margin:0}.project-form a{text-decoration:underline;text-underline-offset:3px}.project-submit{display:inline-flex;align-self:flex-start;align-items:center;justify-content:space-between;gap:32px;background:var(--milossi-green);color:#fff;border:1px solid var(--milossi-green);padding:17px 25px;font:500 13px/1.1 var(--font-body);letter-spacing:.035em;cursor:pointer}.project-submit:hover{background:var(--milossi-green-2)}.project-submit:disabled{opacity:.6;cursor:wait}.form-status{font:400 15px/1.5 var(--font-body);margin:0}.form-status:empty{display:none}.form-status--error{color:#963400}.contact-direct{font:400 20px/1.7 var(--font-body)}
.service-hero .t-eyebrow{margin:45px 0 24px}.breadcrumb{display:flex;flex-wrap:wrap;gap:12px;margin:24px 0 0;font:300 13px/1.6 var(--font-body)}.breadcrumb a{text-decoration:underline;text-underline-offset:3px}.service-title{font-size:clamp(36px,5vw,72px);margin:0;line-height:1.12;overflow-wrap:anywhere}.service-title>span{display:block}.accent{color:var(--milossi-green-2)}.service-subtitle{font:300 25px/1.35 var(--font-body);max-width:830px;margin:26px 0 10px}.service-overview{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:center;padding-top:70px;padding-bottom:90px}.service-lead{font:300 24px/1.45 var(--font-body);margin:0 0 30px}.service-hero-image{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}.service-detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);gap:100px;padding-bottom:90px}.service-editorial article{margin-bottom:45px}.service-editorial h2,.privacy-copy h2{font:500 28px/1.25 var(--font-body);margin:0 0 20px}.service-editorial p,.service-brief>p,.privacy-copy p{font:300 18px/1.6 var(--font-body);margin:0 0 24px}.service-deliverables{padding:25px 0;border-top:1px solid var(--milossi-green)}.service-deliverables ul{padding:0 0 0 20px;margin:25px 0 40px;font:300 17px/1.5 var(--font-body)}.service-deliverables li{margin:16px 0}.text-arrow{font:500 16px/1.5 var(--font-body);text-underline-offset:5px}.service-brief{background:var(--green-95);padding-top:70px;padding-bottom:70px}.service-brief>p{max-width:770px}.service-brief .project-form{margin-top:40px}.privacy-copy{max-width:1000px;padding-top:40px;padding-bottom:70px}.privacy-copy h2{margin-top:45px}
/* A usable static document remains when JavaScript or the animation CDN is unavailable. */
html:not(.is-interactive) .header__menu-btn{display:none}html:not(.is-interactive) .pill-text-inner,html:not(.is-interactive) .clip-line-inner,html:not(.is-interactive) [data-reveal],html:not(.is-interactive) .js-fadeup,html.motion-disabled [data-reveal],html.motion-disabled .clip-line-inner,html.motion-disabled .js-fadeup{opacity:1!important;visibility:visible!important;transform:none!important;clip-path:none!important}
html:not(.is-interactive) .desktop-carousel-container,html.motion-disabled .desktop-carousel-container{height:auto!important;min-height:800px}
html:not(.is-interactive) .works-pin-section,html.motion-disabled .works-pin-section{height:auto!important;min-height:700px}
html:not(.is-interactive) .works-photos-wall,html.motion-disabled .works-photos-wall{opacity:1!important;visibility:visible!important;transform:none!important}
html:not(.is-interactive) .reveal-clip,html.motion-disabled .reveal-clip{clip-path:none!important;transform:none!important;opacity:1!important}
html.motion-disabled .ds-carousel{cursor:pointer!important}html.motion-disabled .ds-carousel *{cursor:pointer!important}
@media(max-width:767px){.seo-intro{font-size:17px;margin:22px 0 32px}.seo-services{padding-top:50px;padding-bottom:50px}.seo-services-grid{grid-template-columns:1fr;gap:10px}.seo-service-card h3{margin-top:18px;font-size:23px}.seo-service-card p{max-width:none}.footer-service-links{flex-direction:column;gap:13px}.service-title{font-size:clamp(29px,7.9vw,52px);letter-spacing:-.035em}.service-subtitle{font-size:21px}.service-hero .t-eyebrow{margin-top:32px;line-height:1.5}.service-overview{grid-template-columns:1fr;gap:32px;padding-top:38px;padding-bottom:50px}.service-lead{font-size:21px}.service-detail-grid{grid-template-columns:1fr;gap:24px;padding-bottom:50px}.service-editorial h2,.privacy-copy h2{font-size:24px}.service-editorial p,.service-brief>p,.privacy-copy p{font-size:17px}.service-brief{padding-top:45px;padding-bottom:45px}.project-form{gap:22px}.form__textarea{font-size:16px}.contact-direct{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.analytics-consent{position:fixed;bottom:24px;left:24px;right:24px;margin-left:auto;max-width:460px;background:#fff;color:var(--milossi-green);border:1px solid var(--green-80);box-shadow:0 8px 40px rgba(2,43,58,.18);padding:24px;z-index:1000000;font:400 14px/1.5 var(--font-body)}.analytics-consent[hidden]{display:none}.analytics-consent p{margin:0 0 14px}.analytics-consent>div{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}.analytics-consent button{flex:1;background:var(--milossi-green);color:#fff;border:1px solid var(--milossi-green);padding:12px;cursor:pointer;font:inherit}.analytics-consent a{text-decoration:underline}.analytics-consent strong{font-size:18px}
html:not(.is-interactive) .acc-row__body{max-height:none!important;grid-template-rows:1fr!important;height:auto!important;opacity:1!important;display:block!important}html:not(.is-interactive) .acc-row__body p{padding-bottom:18px!important}

/* Keep overlapping animation layers legible before the animation runtime starts. */
html:not(.is-interactive) [data-carousel-slide][data-current="false"],html.motion-disabled [data-carousel-slide][data-current="false"]{display:none!important}
html:not(.is-interactive) [data-carousel-slide][data-current="true"],html.motion-disabled [data-carousel-slide][data-current="true"]{transform:none!important;clip-path:none!important;opacity:1!important;visibility:visible!important}
html:not(.is-interactive) .home-carousel-left,html.motion-disabled .home-carousel-left{height:auto!important;min-height:400px}
html:not(.is-interactive) .home-carousel-left>div,html.motion-disabled .home-carousel-left>div{position:relative!important;height:auto!important;overflow:visible!important}
html:not(.is-interactive) .home-carousel-left>div>[data-current="true"],html.motion-disabled .home-carousel-left>div>[data-current="true"]{position:relative!important;height:auto!important}
html:not(.is-interactive) .carousel-nav-btn,html:not(.is-interactive) .carousel-progress-container{display:none!important}
html:not(.is-interactive) .pill-corner-bl,html:not(.is-interactive) .pill-corner-tr,html.motion-disabled .pill-corner-bl,html.motion-disabled .pill-corner-tr,html.motion-disabled .pill-text-inner{opacity:1!important;transform:none!important}
@media(max-width:767px){html:not(.is-interactive) .desktop-carousel-container,html.motion-disabled .desktop-carousel-container{min-height:0!important}html:not(.is-interactive) .home-carousel-left,html.motion-disabled .home-carousel-left{min-height:0!important}html:not(.is-interactive) .home-carousel-left>div,html.motion-disabled .home-carousel-left>div{flex:auto!important}}

/* Service introductions need natural height: the original short hero was sized for one title only. */
.hero.hero--short.service-hero{height:auto;min-height:0;padding:132px var(--gutter) 30px;overflow:visible}
.service-hero .breadcrumb{margin-top:0;justify-content:center}
.service-title{max-width:100%}
@media(max-width:767px){.hero.hero--short.service-hero{height:auto!important;padding:100px var(--gutter) 24px!important}.service-title{font-size:clamp(22px,7.2vw,52px)}.service-subtitle{margin-top:24px;max-width:100%}}

html:not(.is-interactive) .home-carousel-mobile-controls,html:not(.is-interactive) .home-carousel-controls{display:none!important}