/* ==========================================================================
   Outline Department — Apple 2026 design language
   Typography, color and motion tokens modeled on apple.com / iOS 26
   ========================================================================== */

:root {
  --font-stack: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bg-white: #ffffff;
  --bg-gray: #F1F0EA; /* grigio caldo, meno clinico */
  --bg-black: #0C0C0A; /* near-black ink */
  --bg-ink: #0C0C0A;

  --text-primary: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-primary-dark: #f5f5f7;
  --text-secondary-dark: #86868b;

  /* Verde salvia accent system */
  --accent: #3d5a4c;        /* salvia — su fondi chiari (testo, riempimenti) */
  --accent-hover: #33493d;  /* salvia più scuro — hover riempimenti */
  --accent-light: #9dbbac;  /* salvia chiaro — accenti su fondi scuri */
  --on-accent: #ffffff;     /* testo/glifo sopra il salvia pieno */
  --accent-deep: var(--accent);

  /* Tinta degli aloni di sfondo (rgb, senza parentesi) — vira col progetto */
  --aura: 61, 90, 76;        /* salvia, sezioni chiare */
  --aura-dark: 157, 187, 172; /* salvia chiaro, sezioni scure */

  /* Legacy aliases (accent-mapped) */
  --link-blue: var(--accent);
  --link-blue-dark: var(--accent-light);
  --btn-blue: var(--accent);
  --btn-blue-hover: var(--accent-hover);

  --hairline: rgba(0, 0, 0, 0.16);
  --hairline-soft: #d2d2d7;

  --radius-tile: 22px;
  --radius-card: 18px;

  --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-tile: cubic-bezier(0.28, 0.11, 0.32, 1);

  --content-width: 980px;
  --wide-width: 1200px;
  --gutter: 22px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-stack);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
  color: var(--text-primary);
  background: var(--bg-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }

::selection { background: var(--accent); color: var(--on-accent); }

/* Grana finissima su tutto il sito: carattere tattile/organico, impercettibile */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
}
/* Striscia fissa che copre SEMPRE la safe-area della notch/status bar (iOS):
   il contenuto che scorre non compare più accanto a orario e batteria.
   Altezza 0 sui dispositivi senza notch → nessun effetto su desktop. */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: rgba(246, 246, 240, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  z-index: 1000;
  pointer-events: none;
}

ul { list-style: none; }
a { color: var(--link-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

.section--dark :focus-visible, .section--ink :focus-visible,
.bento__tile--ink :focus-visible, .tile--copy-dark :focus-visible {
  outline-color: var(--accent);
}

/* Type scale --------------------------------------------------------------- */
.eyebrow {
  font-size: 12px;
  line-height: 1.33;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Acid-on-light rule: acid never appears as bare text or thin glyph on light
   surfaces — always a filled swatch with ink on top. Accent eyebrows on light
   are acid pills; dark sections reset them to plain acid text. */
.eyebrow--blue {
  color: var(--accent);
}

/* Acid highlight — tratto da evidenziatore vero (forma SVG organica:
   bordi lievemente ondulati, terminazioni non squadrate, leggera pendenza),
   non un rettangolo. Il tratto abbraccia la parola, otticamente centrato. */
mark.hl {
  display: inline;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M4.1 9.6 C3.1 7.8 4.4 6.2 6.9 6 C33 3.6 63 4.4 94.6 3.4 C97.4 3.3 98.9 4.8 98.4 7.2 C97.1 13.4 97.9 21.5 98.8 28.9 C99.2 31.6 97.7 33.5 94.8 33.8 C63 36.9 34 34.9 8.2 37.1 C5.3 37.3 3.4 35.9 3.3 33.2 C3.1 25.4 5.2 16.9 4.1 9.6 Z' fill='%233d5a4c'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%;
  color: var(--on-accent);
  padding: 0.06em 0.24em 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.hl-dark { color: var(--accent-light); }

.headline-hero {
  font-size: clamp(48px, 8vw, 96px);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.headline-xl {
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.0625;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.headline-lg {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.headline-md {
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.125;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.subhead {
  font-size: clamp(19px, 2.4vw, 24px);
  line-height: 1.29;
  font-weight: 400;
  letter-spacing: 0.007em;
  color: var(--text-secondary);
}

.subhead-sm {
  font-size: 21px;
  line-height: 1.38;
  font-weight: 400;
  letter-spacing: 0.011em;
  color: var(--text-secondary);
}

/* Dark-section text */
.section--dark { background: var(--bg-black); color: var(--text-primary-dark); }
.section--ink { background: var(--bg-ink); color: var(--text-primary-dark); }
.section--dark .subhead, .section--dark .subhead-sm,
.section--ink .subhead, .section--ink .subhead-sm { color: var(--text-secondary-dark); }
.section--dark .eyebrow, .section--ink .eyebrow { color: var(--text-secondary-dark); }
.section--dark .eyebrow--blue, .section--ink .eyebrow--blue {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--link-blue-dark);
}
/* Fondo organico: campo di aloni salvia sfalsati (asimmetrico, con carattere)
   su una base calda diagonale — non un velo piatto e uniforme. */
.section--gray {
  background:
    radial-gradient(75% 55% at 6% -8%, rgba(var(--aura), 0.08), transparent 52%),
    radial-gradient(65% 60% at 104% 14%, rgba(var(--aura), 0.05), transparent 55%),
    radial-gradient(90% 70% at 50% 118%, rgba(var(--aura), 0.035), transparent 60%),
    linear-gradient(162deg, #F3F2EB 0%, #ECEBE3 58%, #F1F0E8 100%);
}
.section--ink, .section--dark {
  background:
    radial-gradient(70% 55% at 84% 4%, rgba(var(--aura-dark), 0.07), transparent 55%),
    radial-gradient(64% 58% at 4% 100%, rgba(var(--aura-dark), 0.045), transparent 58%),
    var(--bg-ink);
}

/* Links & buttons ---------------------------------------------------------- */
/* Chevron link: ink text + acid chevron; hover = acid marker highlight */
.link-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  line-height: 1.29;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  padding: 3px 9px;
  margin: -3px -9px;
  border-radius: 5px;
  transition: background 250ms var(--ease-apple), color 250ms var(--ease-apple);
}

.link-more--lg { font-size: 21px; }

/* On light surfaces the chevron sits inside a small acid circular chip
   (acid fill, ink glyph) — never a bare thin acid glyph. */
.link-more .chev {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 4px 6.5px;
  background: var(--accent);
  border-radius: 50%;
  flex: none;
  transition: transform 300ms var(--ease-apple), background 250ms var(--ease-apple);
}

.link-more .chev path { stroke: var(--on-accent); }

.link-more:hover {
  color: var(--accent);
  text-decoration: none;
}

.link-more:hover .chev { transform: translateX(2px); background: var(--accent-hover); }

/* Dark/ink sections: salvia chiaro (leggibile sul near-black), chevron piano */
.section--dark .link-more, .section--ink .link-more,
.tile--copy-dark .link-more, .bento__tile--ink .link-more { color: var(--accent-light); }

.section--dark .link-more .chev, .section--ink .link-more .chev,
.tile--copy-dark .link-more .chev, .bento__tile--ink .link-more .chev {
  width: 9px;
  height: 14px;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.section--dark .link-more .chev path, .section--ink .link-more .chev path,
.tile--copy-dark .link-more .chev path, .bento__tile--ink .link-more .chev path {
  stroke: var(--accent-light);
}

.section--dark .link-more:hover, .section--ink .link-more:hover,
.tile--copy-dark .link-more:hover, .bento__tile--ink .link-more:hover {
  color: #ffffff;
}

.btn-pill {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: 980px;
  padding: 12px 22px;
  font-family: var(--font-stack);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.022em;
  cursor: pointer;
  transition: background 300ms var(--ease-apple);
}

.btn-pill:hover { background: var(--accent-hover); text-decoration: none; }

.cta-pair {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 34px;
}

/* Liquid Glass ------------------------------------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-radius: var(--radius-tile);
  border: 0.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Global nav (apple.com) ---------------------------------------------------- */
.globalnav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* Il vetro dell'header copre anche la safe-area della notch/status bar,
     così scorrendo il contenuto non spunta in cima (iPhone) */
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(246, 246, 240, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline);
}

.globalnav__content {
  max-width: 1024px;
  height: 48px;
  margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.globalnav__brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  transition: opacity 300ms var(--ease-apple);
}
.globalnav__brand::after { content: "."; color: var(--accent); }
.globalnav__brand:hover { opacity: 0.7; text-decoration: none; }

.globalnav__links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.globalnav__links a {
  position: relative;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(29, 29, 31, 0.82);
  transition: color 260ms var(--ease-apple);
}
.globalnav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -7px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms var(--ease-apple);
}
.globalnav__links a:hover { color: var(--text-primary); text-decoration: none; }
.globalnav__links a:hover::after { transform: scaleX(1); }
.globalnav__links a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.globalnav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* CTA nav (a destra) — dà equilibrio e funzione all'header */
.globalnav__cta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-accent);
  background: var(--accent);
  padding: 7px 15px;
  border-radius: 980px;
  transition: background 240ms var(--ease-apple);
}
.globalnav__cta:hover { background: var(--accent-hover); text-decoration: none; }
@media (max-width: 833px) { .globalnav__cta { display: none; } }

/* Hamburger */
.globalnav__menu {
  display: none;
  width: 40px;
  height: 40px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}

.globalnav__menu span {
  position: absolute;
  left: 11px;
  width: 18px;
  height: 1.2px;
  background: rgba(0, 0, 0, 0.8);
  transition: transform 320ms var(--ease-apple), top 320ms var(--ease-apple);
}

.globalnav__menu span:nth-child(1) { top: 17px; }
.globalnav__menu span:nth-child(2) { top: 23px; }

.globalnav__menu[aria-expanded="true"] span:nth-child(1) { top: 20px; transform: rotate(45deg); }
.globalnav__menu[aria-expanded="true"] span:nth-child(2) { top: 20px; transform: rotate(-45deg); }

/* Mobile full menu (apple.com slide-down) */
.mobilemenu {
  position: fixed;
  inset: calc(48px + env(safe-area-inset-top, 0px)) 0 0 0;
  z-index: 99;
  background: rgba(246, 246, 240, 0.9);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 40px max(48px, env(safe-area-inset-left)) calc(40px + env(safe-area-inset-bottom, 0px)) max(48px, env(safe-area-inset-right));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 360ms var(--ease-apple), transform 360ms var(--ease-apple), visibility 0s linear 360ms;
  overflow-y: auto;
}

.mobilemenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 360ms var(--ease-apple), transform 360ms var(--ease-apple);
}

.mobilemenu a {
  display: block;
  font-size: 28px;
  line-height: 1.14;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  padding: 12px 0;
  border-bottom: 0.5px solid var(--hairline);
  opacity: 0;
  transform: translateY(10px);
}

.mobilemenu a:hover { text-decoration: none; color: #000; }

.mobilemenu.is-open a {
  animation: menuLink 480ms var(--ease-apple) forwards;
  animation-delay: calc(60ms * var(--i, 0) + 80ms);
}

@keyframes menuLink {
  to { opacity: 1; transform: translateY(0); }
}

body.menu-locked { overflow: hidden; }

@media (max-width: 833px) {
  .globalnav__links { display: none; }
  .globalnav__menu { display: block; }
}

@media (min-width: 834px) {
  .mobilemenu { display: none; }
}

/* Sections ------------------------------------------------------------------ */
.section { padding: clamp(80px, 12vw, 140px) var(--gutter); }
.section--tight { padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }

.section-copy {
  max-width: var(--content-width);
  margin: 0 auto;
  text-align: center;
}

.section-copy .eyebrow { margin-bottom: 12px; }
.section-copy .subhead, .section-copy .subhead-sm { margin-top: 14px; }
.section-copy .cta-pair { margin-top: 26px; }

/* Hero — ritmo verticale a gap crescente (prossimità: etichetta stretta,
   didascalia media, gruppo azioni più staccato) */
.hero .section-copy .eyebrow  { margin-bottom: clamp(14px, 1.4vw, 20px); }
.hero .section-copy .subhead  { margin-top: clamp(24px, 2.8vw, 34px); }
.hero .section-copy .cta-pair { margin-top: clamp(34px, 4vw, 48px); }

.copy-narrow { max-width: 700px; margin-left: auto; margin-right: auto; }

/* Hero ----------------------------------------------------------------------- */
.hero {
  padding: clamp(88px, 13vw, 160px) var(--gutter) clamp(56px, 8vw, 88px);
  background:
    radial-gradient(68% 52% at 92% -12%, rgba(var(--aura), 0.10), transparent 54%),
    radial-gradient(56% 46% at -4% 6%, rgba(var(--aura), 0.05), transparent 56%),
    linear-gradient(178deg, #F4F4EE 0%, #F9F9F5 58%, #FFFFFF 100%);
}

/* Parola-chiave in verde salvia, senza evidenziazione */
.hero-kw { color: var(--accent); }

/* Sottotitolo dentro un box pieno salvia, angoli vivi */
.subhead-tag {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0;
  padding: 0.26em 0.6em;
}

.hero .section-copy > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 800ms var(--ease-apple) forwards;
}

.hero .section-copy > *:nth-child(2) { animation-delay: 120ms; }
.hero .section-copy > *:nth-child(3) { animation-delay: 240ms; }
.hero .section-copy > *:nth-child(4) { animation-delay: 360ms; }

@keyframes heroIn {
  to { opacity: 1; transform: translateY(0); }
}

/* Media figure — images always at native aspect ratio, never cropped */
.media-figure {
  margin: clamp(40px, 6vw, 72px) auto 0;
  text-align: center;
}

.media-figure img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: min(560px, 100%);
  max-height: 76vh;
  border-radius: var(--radius-tile);
}

/* Tile grid (apple.com store grammar) ---------------------------------------- */
.tile-grid {
  max-width: var(--wide-width);
  margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.tile-grid .tile--full { grid-column: 1 / -1; }

/* Masonry columns for work tiles: tile height follows the image's own ratio */
.masonry {
  max-width: var(--wide-width);
  margin: clamp(36px, 5vw, 56px) auto 0;
  columns: 3;
  column-gap: 20px;
}

.masonry .tile {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 20px;
}

.tile {
  position: relative;
  display: block;
  border-radius: var(--radius-tile);
  overflow: hidden;
  background: var(--bg-gray);
  transform: translateZ(0);
  transition: transform 300ms var(--ease-tile), box-shadow 300ms var(--ease-tile);
}

.tile:hover {
  transform: scale(1.008);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.14);
  text-decoration: none;
}

/* Image shown whole: width fills the tile, height follows the native ratio */
.tile__media img { width: 100%; height: auto; }

/* Liquid-glass caption on work tiles */
.tile__caption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  max-width: calc(100% - 36px);
  padding: 14px 20px 15px;
  text-align: left;
}

.tile__caption h3 {
  font-size: 19px;
  line-height: 1.21;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.tile__caption p {
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.33;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

/* Service tiles (copy-first tiles) */
.tile--copy {
  padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 48px);
  text-align: center;
  background: var(--bg-white);
}

.tile-grid--onwhite .tile--copy { background: var(--bg-gray); }

.tile--copy .eyebrow { margin-bottom: 10px; }
.tile--copy h3 { margin-bottom: 8px; }
.tile--copy p { color: var(--text-secondary); max-width: 430px; margin: 0 auto 16px; }

.tile--copy-dark { background: var(--bg-black) !important; color: var(--text-primary-dark); }
.tile--copy-dark p { color: var(--text-secondary-dark); }
.tile--copy-dark .eyebrow { color: var(--text-secondary-dark); }
.tile--copy-dark .link-more { color: var(--link-blue-dark); }

@media (max-width: 1068px) {
  .masonry { columns: 2; }
}

@media (max-width: 734px) {
  .tile-grid { grid-template-columns: 1fr; }
  .masonry { columns: 1; max-width: 480px; }
}

/* Clients marquee ---------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
  will-change: transform;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
  display: flex;
  align-items: center;
  flex: none;
}

.marquee__group span {
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: #6e6e73;
  white-space: nowrap;
  padding: 0 clamp(24px, 3vw, 34px);
}

.marquee__group .dot {
  padding: 0;
  color: #c7c7cc;
  font-size: clamp(14px, 1.8vw, 18px);
}

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

@media (prefers-reduced-motion: reduce) {
  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .marquee__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .marquee__group { flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .marquee__group[aria-hidden="true"] { display: none; }
}

/* Statement (black keynote moment) ---------------------------------------------- */
.statement p {
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.015em;
  max-width: 900px;
  margin: 0 auto;
}

/* Segmented control (iOS) -------------------------------------------------------- */
.segmented-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(28px, 4vw, 40px) auto 0;
  padding: 0 var(--gutter);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.segmented-wrap::-webkit-scrollbar { display: none; }

.segmented {
  position: relative;
  display: inline-flex;
  flex: none;
  background: #e8e8ed;
  border-radius: 980px;
  padding: 2px;
}

.segmented__thumb {
  position: absolute;
  top: 2px;
  left: 0;
  height: calc(100% - 4px);
  background: #ffffff;
  border-radius: 980px;
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.04);
  transition: transform 320ms var(--ease-tile), width 320ms var(--ease-tile);
  will-change: transform, width;
}

.segmented button {
  position: relative;
  z-index: 1;
  border: 0;
  background: none;
  font-family: var(--font-stack);
  font-size: 13px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  padding: 8px 16px;
  border-radius: 980px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 200ms var(--ease-apple);
}

.segmented button:not(.is-active) { color: rgba(29, 29, 31, 0.72); }

/* Tiny acid dot on the active segment */
.segmented button.is-active::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1.5px;
}

/* Works grid (lavori) — masonry, native image ratios ------------------------------- */
.works-grid .tile.is-hidden { display: none; }

.works-grid .tile.is-entering { animation: tileIn 480ms var(--ease-apple); }

@keyframes tileIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.tile__caption .cat {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--link-blue);
}

/* Servizi — bento grid ---------------------------------------------------------------- */
[id] { scroll-margin-top: 64px; }

.bento {
  max-width: var(--wide-width);
  margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

.bento__tile {
  grid-column: span 3;
  border-radius: var(--radius-tile);
  padding: clamp(44px, 6vw, 72px) clamp(28px, 4vw, 56px);
  text-align: center;
  background: var(--bg-gray);
}

.bento__tile--full { grid-column: 1 / -1; }

.bento__tile--ink { background: var(--bg-black); color: var(--text-primary-dark); }
.bento__tile--ink .eyebrow--blue {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--link-blue-dark);
}
.bento__tile--ink .bento__desc { color: var(--text-secondary-dark); }
.bento__tile--ink .bento__outputs span { color: var(--text-secondary-dark); }
.bento__tile--ink .link-more { color: var(--link-blue-dark); }

.bento__tile .eyebrow { margin-bottom: 12px; }

.bento__desc {
  max-width: 560px;
  margin: 14px auto 0;
  color: var(--text-secondary);
  font-size: 17px;
}

.bento__tile--full .bento__desc { max-width: 680px; }

.bento__outputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 10px;
  margin: 20px auto 0;
  max-width: 620px;
}

.bento__outputs span {
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bento__outputs .dot { color: #c7c7cc; }
.bento__tile--ink .bento__outputs .dot { color: #4a4a45; }

.bento__tile .link-more { margin-top: 22px; }

@media (max-width: 900px) {
  .bento__tile { grid-column: 1 / -1; }
}

.image-card {
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
}

.image-card img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: min(520px, 100%);
  max-height: 72vh;
  border-radius: var(--radius-tile);
}

/* iOS inset grouped list ---------------------------------------------------------------- */
.inset-list {
  max-width: 640px;
  margin: 0 auto;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.inset-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 13px 20px;
}

.inset-list__row + .inset-list__row { border-top: 0.5px solid var(--hairline); }

.inset-list__row .k {
  font-size: 17px;
  color: var(--text-primary);
  flex: none;
}

.inset-list__row .v {
  font-size: 17px;
  color: var(--text-secondary);
  text-align: right;
}

/* Settings-style link rows (contatti) */
.inset-list--links .inset-list__row { align-items: center; padding: 15px 20px; }

a.inset-list__row { color: var(--text-primary); }
a.inset-list__row:hover { text-decoration: none; background: rgba(0, 0, 0, 0.03); }

.inset-list__row .v-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.inset-list__row .v-group .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.inset-list__row .chev-r { width: 8px; height: 13px; flex: none; }
.inset-list__row .chev-r path { stroke: #c7c7cc; }

/* Linked value (e.g. Servizio row on work pages) */
.inset-list__row .v--link { color: var(--accent-deep); font-weight: 600; }
a.inset-list__row:hover .v--link { text-decoration: underline; }

/* Work pages ---------------------------------------------------------------------------- */
.work-hero { padding: clamp(72px, 10vw, 120px) var(--gutter) 0; }

.work-hero .section-copy > * {
  opacity: 0;
  transform: translateY(20px);
  animation: heroIn 800ms var(--ease-apple) forwards;
}

.work-hero .section-copy > *:nth-child(2) { animation-delay: 120ms; }
.work-hero .section-copy > *:nth-child(3) { animation-delay: 240ms; }

.work-hero__media {
  margin: clamp(36px, 5vw, 56px) auto 0;
  text-align: center;
}

.work-hero__media img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: min(560px, 100%);
  max-height: 78vh;
  border-radius: var(--radius-tile);
}

.work-body p {
  max-width: 660px;
  margin: 0 auto 22px;
  text-align: center;
}

.work-body p:last-child { margin-bottom: 0; }

/* Metrics (keynote numbers) */
.metrics {
  max-width: var(--content-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(40px, 8vw, 120px);
  text-align: center;
}

.metric__value {
  font-size: clamp(56px, 9vw, 96px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.metric__label {
  margin-top: 10px;
  font-size: 17px;
  color: var(--text-secondary);
}

.section--dark .metric__label { color: var(--text-secondary-dark); }

/* Embeds --------------------------------------------------------------------------------- */
.media-note {
  margin-top: 18px;
  text-align: center;
  font-size: 14px;
  color: var(--text-secondary);
}

.embed-169, .embed-916, .embed-45 {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: #000;
}

.embed-169 { aspect-ratio: 16 / 9; }
.embed-916 { aspect-ratio: 9 / 16; background: var(--bg-gray); }
.embed-45 { aspect-ratio: 4 / 5.4; background: var(--bg-gray); }

.embed-169 iframe, .embed-916 iframe, .embed-45 iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.grid-2, .grid-3, .grid-reel-2, .grid-reel-3, .reel-single, .photo-single {
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); max-width: var(--wide-width); }
.grid-reel-2 { grid-template-columns: repeat(2, minmax(0, 320px)); justify-content: center; }
.grid-reel-3 { grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; }
.reel-single { grid-template-columns: minmax(0, 340px); justify-content: center; }
.photo-single { grid-template-columns: minmax(0, 400px); justify-content: center; }

.media-ext { display: flex; justify-content: center; margin-top: 26px; }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 734px) {
  .grid-2, .grid-3, .grid-reel-2, .grid-reel-3 { grid-template-columns: minmax(0, 340px); justify-content: center; }
}

/* Service pages ---------------------------------------------------------------------------- */
.feature-169 { max-width: var(--content-width); margin: 0 auto; }

/* "Cosa produciamo" — iOS inset grouped list with numbered rows */
.svc-outputs {
  max-width: 780px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.svc-output__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 18px 22px;
}

.svc-output__row + .svc-output__row { border-top: 0.5px solid var(--hairline); }

.svc-output__num {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-deep);
}

.svc-output__body { flex: 1; min-width: 0; }

.svc-output__name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

.svc-output__desc { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--text-secondary); }

.svc-output__meta {
  flex: none;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .svc-output__meta { display: none; }
}

/* "Come lavoriamo" — steps on ink */
.steps {
  max-width: var(--wide-width);
  margin: clamp(36px, 5vw, 56px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step {
  background: rgba(255, 255, 255, 0.06);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: center;
}

.step__num {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.step__title { margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }

.step__text { margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--text-secondary-dark); }

@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .steps { grid-template-columns: 1fr; }
}

/* Podcast vs Vodcast — iOS inset comparison table */
.ptable {
  max-width: 780px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  background: var(--bg-white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  text-align: left;
}

.ptable__row {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr;
  gap: 14px;
  padding: 13px 22px;
}

.ptable__row + .ptable__row { border-top: 0.5px solid var(--hairline); }

.ptable__row--head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-gray);
}

.ptable__row--head .acid { color: var(--accent-deep); }

.ptable .k { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.ptable .v { font-size: 15px; line-height: 1.4; color: var(--text-secondary); }

@media (max-width: 600px) {
  .ptable__row { grid-template-columns: 1fr; gap: 4px; }
  .ptable .k { font-size: 13px; text-transform: uppercase; color: var(--text-secondary); }
}

/* Related-works rows */
.work-rows { max-width: 640px; margin: clamp(24px, 3vw, 36px) auto 0; }

/* Next project ---------------------------------------------------------------------------- */
.next-work { text-align: center; }

.next-work .tile {
  display: inline-block;
  width: 100%;
  max-width: 440px;
  margin: clamp(28px, 4vw, 40px) auto 0;
}

/* Footer (apple.com grammar) ---------------------------------------------------------------- */
.footer {
  background: var(--bg-gray);
  padding: 0 var(--gutter) 34px;
}

.footer__content { max-width: var(--content-width); margin: 0 auto; }

.footer__crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 17px 0;
  font-size: 12px;
  line-height: 1.33;
  color: var(--text-secondary);
  border-bottom: 0.5px solid var(--hairline-soft);
}

.footer__crumbs a { color: var(--text-secondary); }
.footer__crumbs a:hover { color: var(--text-primary); text-decoration: underline; }
.footer__crumbs .sep { color: #a1a1a6; }

.footer__note {
  padding: 17px 0 10px;
  font-size: 12px;
  line-height: 1.33;
  color: var(--text-secondary);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  padding-top: 10px;
  border-top: 0.5px solid var(--hairline-soft);
  font-size: 12px;
  line-height: 1.33;
  color: var(--text-secondary);
}

.footer__links {
  display: flex;
  gap: 8px;
  align-items: center;
}

.footer__links a { color: var(--text-primary); font-size: 12px; }
.footer__links .sep { color: var(--hairline-soft); }

/* Contact page ---------------------------------------------------------------------------- */
.contact-email {
  display: inline-block;
  font-size: clamp(24px, 4.6vw, 44px);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  padding: 0 0.14em;
  border-radius: 10px;
  word-break: break-word;
  transition: background 250ms var(--ease-apple);
}

.contact-email:hover {
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
}

/* Scroll reveal ---------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-apple), transform 700ms var(--ease-apple);
}

.reveal.in-view { opacity: 1; transform: translateY(0); }

/* Reduced motion ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero .section-copy > *, .work-hero .section-copy > *, .mobilemenu.is-open a {
    opacity: 1;
    transform: none;
  }
  .hero mark.hl { background-size: 100% 100%; }
}

/* ── Refinement mobile ──────────────────────────────────────────────────────
   Teoria: (1) lo spazio verticale su phone è prezioso → il macro-spazio da
   desktop va compresso, non "portato dietro" (ritmo scalato al viewport);
   (2) target tattili ≥ 44px (Apple Human Interface Guidelines);
   (3) prossimità mantenuta ma con gap proporzionati al piccolo schermo.        */
@media (max-width: 734px) {
  .section { padding-top: clamp(52px, 11vw, 72px); padding-bottom: clamp(52px, 11vw, 72px); }
  .hero { padding-top: clamp(64px, 20vw, 104px); padding-bottom: clamp(44px, 9vw, 64px); }

  /* Controllo filtri: tap comodo (≥44px) */
  .segmented button { padding-top: 13px; padding-bottom: 13px; }

  /* Link con freccia: area tattile più ampia senza spostare la grafica */
  .link-more { padding: 8px 10px; margin: -8px -10px; }

  /* Righe contatti: altezza comoda al tocco */
  .inset-list__row { padding-top: 16px; padding-bottom: 16px; }
}

@media (max-width: 480px) {
  /* Evita che le parole lunghe della headline sfondino su schermi stretti */
  .headline-hero { font-size: clamp(37px, 12.5vw, 64px); }
  .headline-xl { font-size: clamp(32px, 9vw, 44px); }
}

/* ── Filtri su tablet/mobile: da segmented-pill (scroll orizzontale) a chip
   che vanno a capo — nessun overflow. Chiave: .segmented deve essere
   vincolata a max-width:100% (non più flex:none) così il flex-wrap scatta. ── */
@media (max-width: 820px) {
  .segmented-wrap { overflow: visible; padding: 0 var(--gutter); }
  .segmented {
    flex: 0 1 auto;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    background: transparent;
    padding: 0;
  }
  .segmented__thumb { display: none; }
  .segmented button {
    flex: 0 0 auto;
    background: #e8e8ed;
    border-radius: 980px;
    padding: 11px 15px;
    font-size: 13px;
    white-space: normal;
  }
  .segmented button:not(.is-active) { color: rgba(29, 29, 31, 0.72); }
  .segmented button.is-active { background: var(--accent); color: var(--on-accent); }
  .segmented button.is-active::before { display: none; }
}