:root {
  color-scheme: dark;
  --navy: #0b1229;
  --navy-deep: #070d20;
  --navy-mid: #131b35;
  --navy-soft: #1b2544;
  --ivory: #fbf8f4;
  --warm: #f3f0eb;
  --peach: #f3e2d8;
  --coral: #d89478;
  --coral-light: #e6aa91;
  --coral-deep: #b3624a;
  --slate: #4e5875;
  --white: #ffffff;
  --ink: #0b1229;
  --line: rgba(11, 18, 41, .14);
  --line-dark: rgba(255, 255, 255, .14);
  --container: min(1360px, calc(100vw - 72px));
  --gutter: clamp(22px, 4vw, 68px);
  --section-y: clamp(96px, 11vw, 170px);
  --header-h: 78px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 36px 100px rgba(3, 7, 19, .28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy-deep); }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--ivory);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img, svg { display: block; max-width: 100%; }
::selection { color: var(--navy); background: var(--coral); }
.site-shell { min-height: 100vh; overflow: clip; }
.skip-link {
  position: fixed;
  z-index: 500;
  top: -80px;
  left: 20px;
  padding: 12px 16px;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line);
  transition: top .2s;
}
.skip-link:focus { top: 18px; }

/* Header */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(240px, 1fr);
  align-items: center;
  gap: 24px;
  padding-inline: var(--gutter);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  transition: background .35s, border-color .35s, box-shadow .35s, backdrop-filter .35s;
}
.header.scrolled {
  background: rgba(7, 13, 32, .84);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 14px 45px rgba(0, 0, 0, .25);
  backdrop-filter: blur(20px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  width: max-content;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}
.brand-copy { display: grid; gap: 2px; line-height: 1.15; }
.brand-copy strong { font-size: 12px; letter-spacing: .11em; text-transform: uppercase; }
.brand-copy span { font-size: 9px; letter-spacing: .17em; text-transform: uppercase; opacity: .58; }
.nav { display: flex; align-items: center; justify-content: center; gap: 25px; }
.nav a { position: relative; font-size: 12px; opacity: .72; transition: opacity .2s; }
.nav a:hover { opacity: 1; }
.nav a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  color: var(--navy);
  background: var(--coral);
  font-weight: 760;
  opacity: 1 !important;
}
.header-meta { display: flex; align-items: center; justify-content: flex-end; gap: 13px; }
.header-meta span {
  max-width: 205px;
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
  opacity: .56;
}
.header-dot {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--navy);
  background: #fff;
  transition: transform .25s var(--ease), background .25s;
}
.header-dot:hover { transform: translateY(-2px) rotate(5deg); background: var(--coral); }
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
}
.menu-toggle span, .menu-toggle::before, .menu-toggle::after {
  content: "";
  width: 18px;
  height: 1px;
  display: block;
  margin: 4px auto;
  background: currentColor;
  transition: transform .25s, opacity .2s;
}
.menu-open .menu-toggle span { opacity: 0; }
.menu-open .menu-toggle::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-toggle::after { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 126px 28px 38px;
  color: #fff;
  background: radial-gradient(circle at 80% 12%, rgba(216,148,120,.18), transparent 28%), var(--navy);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: .25s;
}
.mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-menu a {
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(30px, 9vw, 50px);
  line-height: 1;
  letter-spacing: -.045em;
}
.mobile-menu small { margin-top: 22px; max-width: 460px; color: rgba(255,255,255,.62); }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: var(--navy);
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("./assets/images/hero-exterior.webp");
  background-size: cover;
  background-position: center 55%;
  transform: translateY(var(--hero-shift, 0px)) scale(1.03);
  will-change: transform;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(7,13,32,.95) 0%, rgba(7,13,32,.86) 36%, rgba(7,13,32,.38) 62%, rgba(7,13,32,.08) 100%),
    linear-gradient(180deg, rgba(7,13,32,.18) 0%, rgba(7,13,32,.04) 48%, rgba(7,13,32,.72) 100%);
}
.hero-noise {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, #000, transparent 82%);
}
.hero-inner {
  width: var(--container);
  min-height: 100svh;
  margin: auto;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 82px) 0 72px;
}
.hero-copy { width: min(1080px, 84vw); }
.eyebrow {
  display: block;
  margin-bottom: 18px;
  color: var(--coral);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  font-size: clamp(54px, 6.4vw, 104px);
  font-weight: 650;
  line-height: .92;
  letter-spacing: -.066em;
  text-wrap: balance;
}
.hero-line { display: block; max-width: 1020px; }
.hero-line-accent {
  max-width: 1160px;
  margin-top: .12em;
  color: var(--coral-light);
  font-size: .69em;
  line-height: 1.02;
  letter-spacing: -.055em;
}
.hero-lead {
  max-width: 700px;
  margin: 28px 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1.55;
}
.microcopy { margin: 18px 0 0; color: rgba(255,255,255,.48); font-size: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.btn {
  min-height: 53px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 2px;
  background: transparent;
  font-size: 12px;
  font-weight: 780;
  cursor: pointer;
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(0,0,0,.16); }
.btn-primary { color: var(--navy); background: var(--coral); border-color: var(--coral); }
.btn-primary:hover { background: var(--coral-light); }
.btn-secondary { color: #fff; background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.7); }
.btn-secondary:hover { color: var(--navy); background: #fff; }
.btn-light { color: var(--navy); background: #fff; border-color: #fff; }
.arrow { font-size: 16px; }
.scroll-cue {
  position: absolute;
  right: var(--gutter);
  bottom: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.52);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.scroll-cue i { color: var(--coral); font-style: normal; animation: floatArrow 1.8s ease-in-out infinite; }
@keyframes floatArrow { 50% { transform: translateY(6px); } }

/* Common sections */
.section { position: relative; padding: var(--section-y) 0; scroll-margin-top: var(--header-h); }
.section-inner { width: var(--container); margin: auto; }
.section-dark {
  color: #fff;
  background: radial-gradient(circle at 88% 12%, rgba(216,148,120,.13), transparent 25%), linear-gradient(160deg, #0b1229, #111a34 70%, #0a1127);
}
.section-gradient {
  color: #fff;
  background: radial-gradient(circle at 10% 10%, rgba(216,148,120,.17), transparent 30%), linear-gradient(135deg, #111933, #1a2442 62%, #10182e);
}
.section-ivory { color: var(--ink); background: var(--ivory); }
.process-section { color: #fff; background: linear-gradient(155deg, #111a34, #0a1127); }
.cycle-section { color: #fff; background: radial-gradient(circle at 50% 48%, rgba(216,148,120,.17), transparent 24%), linear-gradient(160deg, #0a1127, #151f3b 70%, #0a1127); }
.section-head {
  display: grid;
  grid-template-columns: minmax(170px, .58fr) minmax(0, 1.7fr);
  gap: clamp(34px, 6vw, 108px);
  align-items: start;
  margin-bottom: clamp(58px, 7vw, 100px);
}
.section-meta { position: sticky; top: 120px; }
.section-number { display: block; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.section-eyebrow { display: block; margin-top: 10px; color: var(--slate); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.section-dark .section-eyebrow, .section-gradient .section-eyebrow, .process-section .section-eyebrow, .cycle-section .section-eyebrow { color: rgba(255,255,255,.46); }
.section-head h2 {
  max-width: 1080px;
  margin: 0;
  font-size: clamp(47px, 5.6vw, 88px);
  font-weight: 640;
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}
.lead { max-width: 860px; margin: 25px 0 0; color: var(--slate); font-size: clamp(17px, 1.55vw, 22px); line-height: 1.56; }
.section-dark .lead, .section-gradient .lead, .process-section .lead, .cycle-section .lead { color: rgba(255,255,255,.64); }
.copy-block { color: rgba(255,255,255,.7); font-size: 18px; }
.copy-block p:first-child { margin-top: 0; }
.closing {
  display: block;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line-dark);
  color: #fff;
  font-size: clamp(23px, 2vw, 31px);
  line-height: 1.25;
  letter-spacing: -.03em;
}
.bullet-list { display: grid; gap: 14px; margin: 24px 0 0; padding: 0; list-style: none; }
.bullet-list li { position: relative; padding-left: 25px; }
.bullet-list li::before { content: ""; position: absolute; left: 0; top: .72em; width: 7px; height: 7px; border-radius: 50%; background: var(--coral); }

/* Images */
.visual-slot {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: var(--shadow);
  isolation: isolate;
}
.section-ivory .visual-slot { border-color: rgba(11,18,41,.12); box-shadow: 0 34px 90px rgba(11,18,41,.16); }
.visual-slot::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(7,13,32,.2)); pointer-events: none; }
.visual-slot img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.visual-slot:hover img { transform: scale(1.045); }
.visual-landscape { aspect-ratio: 1.45; }
.visual-portrait { aspect-ratio: .76; }

/* Problem */
.split-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.25fr); gap: clamp(44px, 7vw, 110px); align-items: center; }
.split-problem .visual-slot { min-height: 540px; }

/* Principle */
.principle-layout { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.2fr); gap: clamp(50px, 8vw, 125px); align-items: center; }
.principle-layout .visual-slot { max-height: 760px; }
.principle-copy { color: var(--slate); font-size: 18px; }
.principle-copy blockquote {
  margin: 48px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
  color: var(--navy);
  font-size: clamp(27px, 2.6vw, 42px);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -.035em;
}

/* Outcomes */
.outcomes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.outcome {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.outcome:hover { transform: translateY(-8px); border-color: rgba(216,148,120,.52); background: linear-gradient(180deg, rgba(216,148,120,.12), rgba(255,255,255,.02)); }
.outcome > span { color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.outcome h3 { margin: 62px 0 20px; font-size: clamp(29px, 2.7vw, 42px); line-height: 1; letter-spacing: -.045em; }
.outcome p { margin: 0; color: rgba(255,255,255,.64); }

/* Protocol */
.protocol-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .7fr); gap: clamp(34px, 5vw, 76px); align-items: stretch; }
.protocol-cards { display: grid; gap: 18px; }
.lever-card {
  min-height: 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(30px, 4vw, 52px);
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  transition: transform .35s var(--ease), border-color .35s;
}
.lever-card:hover { transform: translateX(7px); border-color: rgba(216,148,120,.5); }
.lever-card > span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.lever-card h3 { margin: 42px 0 18px; font-size: clamp(31px, 3vw, 47px); line-height: 1; letter-spacing: -.047em; }
.lever-card p { max-width: 700px; margin: 0; color: rgba(255,255,255,.64); font-size: 17px; }
.lever-card strong { margin-top: auto; padding-top: 30px; color: var(--coral-light); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.protocol-media { position: relative; min-height: 698px; overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); }
.protocol-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.protocol-media:hover img { transform: scale(1.035); }
.protocol-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(7,13,32,.94)); }
.protocol-media-copy { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 28px; }
.protocol-media-copy span { color: var(--coral); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.protocol-media-copy p { margin: 12px 0 0; color: rgba(255,255,255,.78); font-size: 16px; line-height: 1.5; }

/* Cycle */
.cycle-shell { position: relative; min-height: 730px; padding: 40px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.025); }
.cycle-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 290px;
  height: 290px;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(216,148,120,.48);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216,148,120,.18), rgba(7,13,32,.84) 68%);
  box-shadow: 0 0 80px rgba(216,148,120,.12);
}
.cycle-center::before, .cycle-center::after { content: ""; position: absolute; inset: -26px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.cycle-center::after { inset: -54px; border-color: rgba(216,148,120,.1); }
.cycle-center span { color: var(--coral); font-size: 11px; letter-spacing: .15em; text-transform: uppercase; }
.cycle-center strong { font-size: 48px; line-height: 1; letter-spacing: -.05em; }
.cycle-center small { max-width: 210px; margin: 17px auto 0; color: rgba(255,255,255,.52); }
.cycle-track { position: relative; width: 100%; height: 650px; }
.cycle-step {
  position: absolute;
  width: min(280px, 23%);
  min-height: 200px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.11);
  background: rgba(10,17,39,.82);
  backdrop-filter: blur(12px);
  transition: transform .35s var(--ease), border-color .35s;
}
.cycle-step:hover { transform: translateY(-7px); border-color: rgba(216,148,120,.52); }
.cycle-step span { color: var(--coral); font-size: 11px; letter-spacing: .14em; }
.cycle-step h3 { margin: 32px 0 12px; font-size: clamp(22px, 1.8vw, 29px); line-height: 1.04; letter-spacing: -.035em; }
.cycle-step p { margin: 0; color: rgba(255,255,255,.58); font-size: 14px; }
.cycle-step:nth-child(1) { left: 1%; top: 3%; }
.cycle-step:nth-child(2) { left: 37%; top: 0; }
.cycle-step:nth-child(3) { right: 1%; top: 9%; }
.cycle-step:nth-child(4) { right: 1%; bottom: 4%; }
.cycle-step:nth-child(5) { left: 37%; bottom: 0; }
.cycle-step:nth-child(6) { left: 1%; bottom: 8%; }
.cycle-statement { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 20px; background: rgba(255,255,255,.1); }
.cycle-statement strong { min-height: 150px; display: flex; align-items: center; padding: 28px; background: var(--navy); font-size: clamp(23px, 2.1vw, 33px); line-height: 1.1; letter-spacing: -.035em; }
.cycle-statement strong:nth-child(2) { color: var(--coral-light); }

/* Value */
.value-layout { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); gap: clamp(46px, 8vw, 120px); align-items: center; }
.value-copy { color: var(--slate); font-size: 18px; }
.value-copy .bullet-list { gap: 20px; }
.value-copy .bullet-list li { padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); }
.value-layout .visual-slot { min-height: 500px; }

/* Solutions */
.solution-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr); gap: clamp(48px, 7vw, 105px); align-items: start; }
.solution-list { border-top: 1px solid rgba(255,255,255,.13); }
.solution-item { border-bottom: 1px solid rgba(255,255,255,.13); }
.solution-item button {
  width: 100%;
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 26px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.solution-item button > span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.solution-item button strong { font-size: clamp(22px, 2.05vw, 31px); line-height: 1.08; letter-spacing: -.035em; }
.solution-item button i { font-style: normal; font-size: 25px; transition: transform .25s; }
.solution-item button[aria-expanded="true"] i { transform: rotate(45deg); }
.solution-panel { padding: 0 45px 28px 86px; }
.solution-panel p { max-width: 720px; margin: 0; color: rgba(255,255,255,.64); font-size: 17px; }
.solution-visuals { position: sticky; top: 118px; display: grid; gap: 16px; }
.solution-visuals img { width: 100%; object-fit: cover; border: 1px solid rgba(255,255,255,.11); box-shadow: var(--shadow); }
.solution-main { aspect-ratio: 1.15; }
.solution-secondary { aspect-ratio: 1.7; width: 78% !important; margin-left: auto; margin-top: -56px; }

/* Process */
.process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.process-step {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 28px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  transition: transform .35s var(--ease), border-color .35s, background .35s;
}
.process-step:hover { transform: translateY(-8px); border-color: rgba(216,148,120,.5); background: rgba(216,148,120,.07); }
.process-step > span { color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.process-step h3 { margin: 50px 0 16px; font-size: clamp(23px, 2vw, 31px); line-height: 1.02; letter-spacing: -.04em; }
.process-step p { margin: 0; color: rgba(255,255,255,.62); }

/* Audience */
.audience-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.audience-card { padding: clamp(32px, 4vw, 50px); background: var(--warm); border-top: 4px solid var(--coral); box-shadow: 0 24px 65px rgba(11,18,41,.08); }
.audience-card > span { font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--coral-deep); }
.audience-card .bullet-list { color: var(--slate); }
.audience-no { background: var(--navy); color: #fff; }
.audience-no > span { color: var(--coral); }
.audience-no .bullet-list { color: rgba(255,255,255,.74); }

/* FAQ */
.faq { max-width: 980px; margin-left: auto; }
.faq-item { border-top: 1px solid rgba(255,255,255,.13); }
.faq-item:last-child { border-bottom: 1px solid rgba(255,255,255,.13); }
.faq-button { width: 100%; display: flex; justify-content: space-between; gap: 24px; padding: 27px 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.faq-button strong { font-size: clamp(19px, 1.8vw, 26px); letter-spacing: -.025em; }
.faq-button span { font-size: 25px; color: var(--coral); transition: transform .25s; }
.faq-item.open .faq-button span { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.faq-answer p { overflow: hidden; margin: 0; color: rgba(255,255,255,.64); }
.faq-item.open .faq-answer { grid-template-rows: 1fr; }
.faq-item.open .faq-answer p { padding-bottom: 27px; }

/* Diagnosis */
.diagnosis {
  scroll-margin-top: var(--header-h);
  padding: var(--section-y) 0;
  color: #fff;
  background: radial-gradient(circle at 15% 18%, rgba(216,148,120,.15), transparent 24%), linear-gradient(160deg, #0b1229, #141c35 68%, #0a1127);
}
.diagnosis-inner { width: var(--container); margin: auto; display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: clamp(48px, 8vw, 120px); align-items: start; }
.diagnosis-copy { position: sticky; top: 120px; }
.diagnosis-copy .section-number { margin-bottom: 18px; }
.diagnosis-copy h2 { margin: 0; font-size: clamp(43px, 5vw, 75px); line-height: .98; letter-spacing: -.055em; }
.diagnosis-copy > p { margin-top: 27px; color: rgba(255,255,255,.65); font-size: 18px; }
.diagnosis-points { display: grid; gap: 12px; margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line-dark); }
.diagnosis-points span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.diagnosis-panel { padding: clamp(28px, 4vw, 54px); color: var(--navy); background: var(--ivory); box-shadow: 0 42px 100px rgba(0,0,0,.25); }
.diagnosis-panel > h3 { margin: 0 0 32px; font-size: clamp(29px, 3vw, 46px); line-height: 1.05; letter-spacing: -.04em; }
.diagnosis-form { position: relative; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-grid label { display: grid; gap: 8px; }
.form-grid label.full { grid-column: 1 / 3; }
.form-grid label > span { font-size: 11px; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.diagnosis-form input, .diagnosis-form select, .diagnosis-form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  color: var(--navy);
  background: #fff;
  border: 1px solid rgba(11,18,41,.18);
  border-radius: 0;
  outline: 0;
  transition: border-color .2s, box-shadow .2s;
}
.diagnosis-form textarea { resize: vertical; }
.diagnosis-form input:focus, .diagnosis-form select:focus, .diagnosis-form textarea:focus { border-color: var(--coral-deep); box-shadow: 0 0 0 3px rgba(216,148,120,.18); }
.consent { display: flex; gap: 12px; margin-top: 22px; color: var(--slate); font-size: 13px; }
.consent input { width: 17px; height: 17px; min-height: 0; margin-top: 2px; }
.consent a { text-decoration: underline; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 28px; }
.form-footer p { max-width: 330px; margin: 0; color: var(--slate); font-size: 12px; }
.form-status { margin-top: 20px; font-size: 14px; }
.form-status.success { color: #315e44; }
.form-status.error { color: #9e3d2c; }
.honeypot { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(1px,1px,1px,1px) !important; }

/* Footer */
.footer { padding: 90px 0 30px; color: #fff; background: linear-gradient(180deg, #070d20, #050a17); }
.footer-inner { width: var(--container); margin: auto; }
.footer-lead { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: end; padding-bottom: 70px; border-bottom: 1px solid var(--line-dark); }
.footer-lead .eyebrow { grid-column: 1 / 3; }
.footer-lead h2 { margin: 0; font-size: clamp(38px, 5.2vw, 76px); line-height: .98; letter-spacing: -.055em; }
.footer-lead h2 span { color: var(--coral); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 60px; padding: 60px 0; }
.footer-grid > div { display: grid; align-content: start; gap: 8px; }
.footer-grid h3 { margin: 0 0 12px; color: var(--coral); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.footer-grid a, .footer-grid p { color: rgba(255,255,255,.62); font-size: 14px; }
.footer-grid a:hover { color: #fff; }
.footer-grid .brand-mark { color: #fff; }
.is-placeholder { opacity: .4; pointer-events: none; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-top: 24px; border-top: 1px solid var(--line-dark); color: rgba(255,255,255,.42); font-size: 11px; }

/* Legal */
.legal-hero { min-height: 70vh; display: grid; place-items: end start; padding: calc(var(--header-h) + 90px) var(--gutter) 90px; color: #fff; background: var(--navy); }
.legal-hero > div { width: var(--container); margin: auto; }
.legal-hero h1 { max-width: 900px; margin: 0; font-size: clamp(58px, 8vw, 120px); line-height: .9; letter-spacing: -.065em; }
.legal-hero p { max-width: 740px; color: rgba(255,255,255,.68); font-size: 18px; }
.legal-copy { max-width: 850px; }
.legal-copy h2 { font-size: clamp(34px, 4vw, 60px); line-height: 1; letter-spacing: -.045em; }
.legal-copy p { color: var(--slate); font-size: 18px; }

/* Motion fallback */
.reveal { opacity: 1; transform: none; }
.motion-ready .reveal { opacity: 0; transform: translateY(28px); }
.motion-ready .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1180px) {
  .header { grid-template-columns: 1fr auto; }
  .nav, .header-meta { display: none; }
  .menu-toggle { display: block; }
  .process-grid { grid-template-columns: repeat(3, 1fr); }
  .cycle-shell { min-height: auto; }
  .cycle-track { height: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding-top: 390px; }
  .cycle-step { position: relative; inset: auto !important; width: auto; min-height: 205px; }
  .cycle-center { top: 190px; }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2; }
}

@media (max-width: 860px) {
  :root { --container: calc(100vw - 38px); --header-h: 68px; --section-y: 82px; }
  .header { height: var(--header-h); padding-inline: 19px; }
  .brand-copy span { display: none; }
  .hero { min-height: 900px; }
  .hero::before { background-position: 63% center; }
  .hero-overlay { background: linear-gradient(180deg, rgba(7,13,32,.72), rgba(7,13,32,.88) 55%, rgba(7,13,32,.99)); }
  .hero-inner { min-height: 900px; align-items: flex-end; padding: calc(var(--header-h) + 70px) 0 46px; }
  .hero-copy { width: 100%; }
  .hero h1 { font-size: clamp(47px, 10.4vw, 72px); line-height: .94; }
  .hero-line-accent { max-width: 100%; margin-top: .18em; font-size: .72em; }
  .hero-lead { max-width: 610px; font-size: 17px; }
  .scroll-cue { display: none; }
  .section-head { grid-template-columns: 1fr; gap: 22px; }
  .section-meta { position: static; }
  .section-head h2 { font-size: clamp(43px, 8.5vw, 68px); }
  .split-layout, .principle-layout, .protocol-layout, .value-layout, .solution-layout, .diagnosis-inner { grid-template-columns: 1fr; }
  .split-problem .visual-slot { min-height: 420px; }
  .principle-layout .visual-slot { width: min(620px, 100%); max-height: 560px; }
  .outcomes-grid { grid-template-columns: 1fr; }
  .outcome { min-height: 260px; }
  .outcome h3 { margin-top: 42px; }
  .protocol-media { min-height: 640px; max-width: 620px; }
  .cycle-track { grid-template-columns: 1fr 1fr; padding-top: 360px; }
  .cycle-center { top: 175px; width: 260px; height: 260px; }
  .cycle-statement { grid-template-columns: 1fr; }
  .cycle-statement strong { min-height: 115px; }
  .solution-visuals { position: relative; top: auto; max-width: 700px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-step { min-height: 290px; }
  .audience-grid { grid-template-columns: 1fr; }
  .diagnosis-copy { position: static; }
  .footer-lead { grid-template-columns: 1fr; }
  .footer-lead .eyebrow { grid-column: auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
  .form-footer { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  :root { --container: calc(100vw - 28px); --section-y: 68px; }
  .header .brand-copy strong { font-size: 10px; }
  .hero { min-height: 820px; }
  .hero-inner { min-height: 820px; padding-bottom: 34px; }
  .hero-eyebrow { max-width: 300px; font-size: 9px; }
  .hero h1 { font-size: clamp(43px, 12.2vw, 58px); letter-spacing: -.058em; }
  .hero-line-accent { font-size: .7em; line-height: 1.04; }
  .hero-lead { margin-top: 23px; font-size: 15px; line-height: 1.55; }
  .actions { align-items: stretch; flex-direction: column; }
  .btn { width: 100%; }
  .section-head h2 { font-size: 42px; }
  .lead { font-size: 17px; }
  .split-problem .visual-slot { min-height: 330px; }
  .visual-landscape { aspect-ratio: 1.05; }
  .principle-layout .visual-slot { max-height: 470px; }
  .outcome, .lever-card { padding: 28px; }
  .outcome h3 { margin-top: 36px; }
  .protocol-media { min-height: 520px; }
  .protocol-media-copy { left: 22px; right: 22px; bottom: 21px; }
  .cycle-shell { padding: 18px; }
  .cycle-track { grid-template-columns: 1fr; padding-top: 330px; }
  .cycle-center { top: 155px; width: 235px; height: 235px; }
  .cycle-center strong { font-size: 41px; }
  .cycle-step { min-height: auto; }
  .cycle-step h3 { margin-top: 24px; }
  .cycle-statement strong { padding: 23px; }
  .value-layout .visual-slot { min-height: 330px; }
  .solution-item button { grid-template-columns: 44px 1fr auto; gap: 10px; }
  .solution-item button strong { font-size: 21px; }
  .solution-panel { padding: 0 10px 26px 54px; }
  .solution-secondary { width: 88% !important; margin-top: -28px; }
  .process-grid { grid-template-columns: 1fr; }
  .process-step { min-height: auto; padding: 28px; }
  .process-step h3 { margin-top: 34px; }
  .audience-card { padding: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid label.full { grid-column: auto; }
  .diagnosis-panel { padding: 25px; }
  .diagnosis-copy h2 { font-size: 40px; }
  .footer-lead h2 { font-size: 40px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer { padding-top: 68px; }
  .footer-bottom { flex-direction: column; }
  .legal-hero { padding-inline: 18px; }
  .legal-hero h1 { font-size: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* =========================================================
   Premium composition refresh — August 2026
   ========================================================= */
html { scroll-behavior: auto; }
:root {
  --section-y: clamp(122px, 12.5vw, 202px);
  --header-h: 76px;
}

/* Compact header: brand and navigation belong to one visual group */
.header {
  display: flex;
  grid-template-columns: none;
  gap: 0;
  padding-inline: clamp(24px, 3.2vw, 54px);
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: var(--scroll-progress, 0%);
  height: 1px;
  background: var(--coral);
  opacity: .78;
  transition: width .08s linear;
}
.brand { flex: 0 0 auto; }
.nav {
  justify-content: flex-start;
  gap: clamp(17px, 1.7vw, 28px);
  margin-left: clamp(26px, 3.4vw, 56px);
}
.nav a { white-space: nowrap; }
.nav-cta { margin-left: 6px; }
.header-meta, .header-dot { display: none !important; }
.menu-toggle { margin-left: auto; }

/* Hero: restore the oversized Protocollo Esclusiva editorial title */
.hero { min-height: 100svh; }
.hero-inner {
  position: relative;
  display: block;
  min-height: 100svh;
  padding: calc(var(--header-h) + 44px) 0 58px;
}
.hero-display {
  position: absolute;
  top: clamp(108px, 13.4vh, 150px);
  left: 0;
  right: 0;
  z-index: 1;
  font-size: clamp(76px, 9.45vw, 148px);
  font-weight: 620;
  line-height: .76;
  letter-spacing: -.074em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  text-shadow: 0 16px 50px rgba(0,0,0,.14);
}
.hero-display span { display: block; }
.hero-display span:first-child { color: rgba(255,255,255,.96); }
.hero-display span:last-child {
  padding-right: clamp(4px, 2.2vw, 34px);
  color: var(--coral);
  text-align: right;
}
.hero-copy {
  position: absolute;
  left: 0;
  bottom: 58px;
  z-index: 3;
  width: min(640px, 46vw);
}
.hero h1 {
  font-size: clamp(52px, 4.55vw, 72px);
  line-height: .94;
  letter-spacing: -.06em;
}
.hero-line { max-width: 640px; }
.hero-line-accent {
  max-width: 660px;
  margin-top: .15em;
  font-size: .82em;
  line-height: 1;
}
.hero-lead { max-width: 620px; margin-top: 23px; font-size: clamp(16px, 1.25vw, 19px); }
.hero-overlay {
  background:
    linear-gradient(90deg, rgba(7,13,32,.96) 0%, rgba(7,13,32,.84) 34%, rgba(7,13,32,.26) 61%, rgba(7,13,32,.08) 100%),
    linear-gradient(180deg, rgba(7,13,32,.18), rgba(7,13,32,.02) 45%, rgba(7,13,32,.82) 100%);
}
.hero-noise { opacity: .1; }

/* More breathing room between narrative chapters */
.section { border-top: 1px solid rgba(255,255,255,.035); }
.section-ivory { border-top-color: rgba(11,18,41,.07); }
.section-head { margin-bottom: clamp(76px, 8.5vw, 126px); }
.cycle-section { padding-block: clamp(150px, 15vw, 226px); }
.cycle-shell {
  min-height: 790px;
  padding: 58px;
  background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
}
.cycle-track { height: 675px; }
.cycle-center { width: 304px; height: 304px; }
.cycle-step { min-height: 215px; padding: 26px; }
.cycle-statement { margin-top: 34px; }
.cycle-statement strong { min-height: 170px; }

/* Card polish and consistent text alignment */
.outcome, .lever-card, .process-step, .cycle-step {
  box-shadow: 0 20px 55px rgba(2,6,18,.08);
}
.outcome:hover, .lever-card:hover, .process-step:hover, .cycle-step:hover {
  transform: translateY(-5px);
}
.lever-card:hover { transform: translateY(-5px); }
.process-step {
  display: grid;
  grid-template-rows: auto minmax(104px, auto) 1fr;
  align-content: start;
}
.process-step h3 {
  align-self: end;
  margin: 34px 0 16px;
}
.process-step p { align-self: start; }
.solution-item button { padding-block: 29px; }
.solution-item button strong { align-self: center; }
.solution-panel { padding-bottom: 34px; }

/* Value visual is now a clean architectural photograph with no embedded proposal copy */
.value-layout .visual-slot { min-height: 560px; }
.value-layout .visual-slot img { object-position: center 46%; }

/* More refined visual reveal baseline; JS supplies the actual motion */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.992);
}
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}
.visual-slot, .protocol-media, .solution-visuals { will-change: transform, opacity; }
.cycle-center::before { animation: cyclePulse 6s ease-in-out infinite; }
@keyframes cyclePulse {
  0%, 100% { transform: scale(1); opacity: .7; }
  50% { transform: scale(1.035); opacity: 1; }
}

@media (max-width: 1180px) {
  .header { display: flex; }
  .nav { display: none; }
  .hero-display { font-size: 10.7vw; }
}

@media (max-width: 860px) {
  :root { --section-y: 96px; }
  .hero { min-height: 980px; }
  .hero-inner {
    min-height: 980px;
    display: flex;
    align-items: flex-end;
    padding: calc(var(--header-h) + 34px) 0 42px;
  }
  .hero-display {
    top: 103px;
    font-size: 13.1vw;
    line-height: .79;
  }
  .hero-display span:last-child { padding-right: 0; }
  .hero-copy {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(660px, 100%);
    padding-top: 260px;
  }
  .hero h1 { font-size: clamp(46px, 9.1vw, 68px); }
  .hero-line-accent { font-size: .78em; }
  .section-head { margin-bottom: 68px; }
  .cycle-section { padding-block: 112px; }
  .cycle-shell { padding: 30px; }
  .process-step { grid-template-rows: auto minmax(82px,auto) 1fr; }
}

@media (max-width: 560px) {
  :root { --section-y: 78px; }
  .header { padding-inline: 14px; }
  .brand { gap: 9px; }
  .brand-mark { width: 36px; height: 36px; }
  .hero { min-height: 910px; }
  .hero-inner { min-height: 910px; padding-bottom: 30px; }
  .hero-display {
    top: 94px;
    font-size: 13.6vw;
    line-height: .8;
    letter-spacing: -.067em;
  }
  .hero-copy { padding-top: 200px; }
  .hero h1 { font-size: clamp(41px, 11.4vw, 52px); }
  .hero-line-accent { font-size: .75em; line-height: 1.04; }
  .hero-lead { font-size: 15px; }
  .section-head { margin-bottom: 52px; }
  .cycle-section { padding-block: 88px; }
  .cycle-shell { padding: 18px; }
  .cycle-statement { margin-top: 22px; }
  .cycle-statement strong { min-height: 128px; }
  .process-step { grid-template-rows: auto auto 1fr; }
  .process-step h3 { margin-top: 30px; }
  .value-layout .visual-slot { min-height: 370px; }
}

@media (prefers-reduced-motion: reduce) {
  .cycle-center::before { animation: none; }
}

.hero-display { transform: translateY(var(--hero-title-shift, 0px)); will-change: transform; }

/* Mobile legibility over the photographic hero */
@media (max-width: 860px) {
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(7,13,32,.76) 0%,
      rgba(7,13,32,.82) 25%,
      rgba(7,13,32,.92) 54%,
      rgba(7,13,32,.98) 100%);
  }
}

/* =========================================================
   Final refinement — smoother rendering, spacious cycle,
   compact navigation and restrained premium motion
   ========================================================= */
html {
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--header-h) + 18px);
  scrollbar-gutter: stable;
}
body { overscroll-behavior-y: none; }

/* Keep the brand and section links visually connected. */
.header {
  background: linear-gradient(180deg, rgba(7,13,32,.34), rgba(7,13,32,0));
}
.header.scrolled {
  background: rgba(7,13,32,.96);
  backdrop-filter: none;
  box-shadow: 0 10px 34px rgba(0,0,0,.2);
}
.nav {
  flex: 1 1 auto;
  gap: clamp(15px, 1.45vw, 22px);
  margin-left: clamp(18px, 2vw, 32px);
}
.nav-cta { margin-left: auto; }

/* Optimised photographic background. */
.hero::before {
  background-image: url("./assets/images/hero-exterior.webp");
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.025);
}

/* More air around the virtuous cycle and no overlap with the centre. */
.cycle-section { padding-block: clamp(164px, 16vw, 242px); }
.cycle-shell {
  min-height: 910px;
  padding: 62px;
}
.cycle-track { height: 786px; }
.cycle-center { width: 310px; height: 310px; }
.cycle-step {
  width: min(300px, 23.5%);
  min-height: 225px;
  padding: 28px;
  background: rgba(10,17,39,.96);
  backdrop-filter: none;
}
.cycle-step:nth-child(1) { left: 0; top: 4%; }
.cycle-step:nth-child(2) { left: calc(50% - 150px); top: 0; }
.cycle-step:nth-child(3) { right: 0; top: 8%; }
.cycle-step:nth-child(4) { right: 0; bottom: 8%; }
.cycle-step:nth-child(5) { left: calc(50% - 150px); bottom: 0; }
.cycle-step:nth-child(6) { left: 0; bottom: 4%; }
.cycle-statement { margin-top: 58px; }

/* Titles inside process cards begin at the same visual level. */
.process-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.process-step h3 {
  min-height: 76px;
  display: flex;
  align-items: flex-start;
  margin: 32px 0 16px;
}

/* Avoid expensive permanent compositor layers and continuous movement. */
.visual-slot, .protocol-media, .solution-visuals { will-change: auto; }
.cycle-center::before { animation: none; }
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 13px, 0);
}
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Render-heavy media remain isolated from the rest of the page. */
.visual-slot, .protocol-media, .solution-visuals img {
  contain: paint;
}

@media (max-width: 1180px) {
  .nav { display: none; }
  .cycle-shell { min-height: auto; padding: 34px; }
  .cycle-track {
    height: auto;
    padding-top: 400px;
  }
  .cycle-step {
    width: auto;
    min-height: 215px;
  }
  .cycle-step:nth-child(n) { inset: auto !important; }
}

@media (max-width: 860px) {
  .hero::before {
    background-image: url("./assets/images/hero-exterior-mobile.webp");
    background-position: center 44%;
  }
  .cycle-section { padding-block: 118px; }
  .cycle-shell { padding: 28px; }
  .cycle-track { padding-top: 370px; }
  .cycle-statement { margin-top: 38px; }
  .process-step h3 { min-height: auto; }
}

@media (max-width: 560px) {
  html { scroll-padding-top: calc(var(--header-h) + 8px); }
  .cycle-section { padding-block: 94px; }
  .cycle-shell { padding: 18px; }
  .cycle-track { padding-top: 332px; }
  .cycle-statement { margin-top: 28px; }
  .cycle-statement strong { min-height: 138px; }
}

/* Additional vertical separation inside the six-step cycle. */
@media (min-width: 1181px) {
  .cycle-shell { min-height: 990px; }
  .cycle-track { height: 866px; }
}


/* =========================================================
   V3.4 — centred navigation, connected cycle and card polish
   ========================================================= */
html { scroll-behavior: smooth; }

/* The complete navigation, including the CTA, is centred in the viewport. */
.header {
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto minmax(220px,1fr);
  align-items: center;
  padding-inline: clamp(20px,3vw,50px);
}
.brand { justify-self: start; }
.nav {
  justify-self: center;
  margin: 0;
  gap: clamp(14px,1.35vw,22px);
}
.nav-cta { margin-left: 5px; }
.menu-toggle { justify-self: end; }

/* Process cards: titles and descriptions start on a coherent rhythm. */
.process-section { padding-block: clamp(132px,13vw,190px); }
.process-grid { gap: 18px; }
.process-step {
  min-height: 310px;
  display: grid;
  grid-template-rows: auto minmax(72px,auto) 1fr;
  padding: 30px;
  overflow: hidden;
}
.process-step::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(180deg,var(--coral),transparent 72%);
  opacity: .58;
}
.process-step h3 {
  min-height: 0;
  margin: 25px 0 14px;
  align-self: start;
}
.process-step p { align-self: start; }

/* The cycle is a real closed sequence on desktop. */
.cycle-section { padding-block: clamp(156px,15vw,224px); }
.cycle-shell {
  --cycle-column-gap: clamp(42px,5vw,78px);
  --cycle-row-gap: clamp(310px,27vw,360px);
  position: relative;
  min-height: 0;
  padding: clamp(46px,5vw,72px);
  overflow: hidden;
}
.cycle-track {
  position: relative;
  z-index: 2;
  height: auto;
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  grid-template-areas:
    "step1 step2 step3"
    "step6 step5 step4";
  column-gap: var(--cycle-column-gap);
  row-gap: var(--cycle-row-gap);
  padding: 0;
}
.cycle-step {
  position: relative;
  inset: auto !important;
  width: auto;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  padding: 27px;
  background: rgba(8,15,35,.96);
  backdrop-filter: none;
  z-index: 2;
}
.cycle-step:nth-child(1){grid-area:step1}.cycle-step:nth-child(2){grid-area:step2}.cycle-step:nth-child(3){grid-area:step3}
.cycle-step:nth-child(4){grid-area:step4}.cycle-step:nth-child(5){grid-area:step5}.cycle-step:nth-child(6){grid-area:step6}
.cycle-step h3 { margin: 30px 0 12px; }
.cycle-step p { margin-top: auto; }
.cycle-center {
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 306px;
  height: 306px;
  transform: translate(-50%,-50%);
  box-shadow: 0 30px 100px rgba(0,0,0,.32);
}
.cycle-link {
  position: absolute;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(216,148,120,.5);
  border-radius: 50%;
  color: var(--coral);
  background: #111a35;
  font-style: normal;
  opacity: .35;
  transition: opacity .45s ease,transform .45s ease;
}
.cycle-active .cycle-link { opacity: 1; }
.cycle-step::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg,rgba(216,148,120,.18),rgba(216,148,120,.7),rgba(216,148,120,.18));
}
.cycle-step:nth-child(1)::after,.cycle-step:nth-child(2)::after {
  top: 50%; right: calc(var(--cycle-column-gap) * -1); width: var(--cycle-column-gap); height: 1px;
}
.cycle-step:nth-child(1) .cycle-link,.cycle-step:nth-child(2) .cycle-link {
  right: calc(var(--cycle-column-gap) * -.5 - 15px); top: calc(50% - 15px);
}
.cycle-step:nth-child(1) .cycle-link::before,.cycle-step:nth-child(2) .cycle-link::before { content:"→"; }
.cycle-step:nth-child(3)::after {
  left: 50%; bottom: calc(var(--cycle-row-gap) * -1); width: 1px; height: var(--cycle-row-gap);
  background: linear-gradient(180deg,rgba(216,148,120,.18),rgba(216,148,120,.7),rgba(216,148,120,.18));
}
.cycle-step:nth-child(3) .cycle-link { left:calc(50% - 15px); bottom:calc(var(--cycle-row-gap) * -.5 - 15px); }
.cycle-step:nth-child(3) .cycle-link::before { content:"↓"; }
.cycle-step:nth-child(4)::after,.cycle-step:nth-child(5)::after {
  top:50%; left:calc(var(--cycle-column-gap) * -1); width:var(--cycle-column-gap); height:1px;
}
.cycle-step:nth-child(4) .cycle-link,.cycle-step:nth-child(5) .cycle-link {
  left:calc(var(--cycle-column-gap) * -.5 - 15px); top:calc(50% - 15px);
}
.cycle-step:nth-child(4) .cycle-link::before,.cycle-step:nth-child(5) .cycle-link::before { content:"←"; }
.cycle-step:nth-child(6)::after {
  left:50%; top:calc(var(--cycle-row-gap) * -1); width:1px; height:var(--cycle-row-gap);
  background:linear-gradient(180deg,rgba(216,148,120,.18),rgba(216,148,120,.7),rgba(216,148,120,.18));
}
.cycle-step:nth-child(6) .cycle-link { left:calc(50% - 15px); top:calc(var(--cycle-row-gap) * -.5 - 15px); }
.cycle-step:nth-child(6) .cycle-link::before { content:"↑"; }
.cycle-statement {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: clamp(54px,6vw,86px);
  background: transparent;
  border-top: 1px solid rgba(255,255,255,.12);
}
.cycle-statement strong {
  min-height: auto;
  padding: 24px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: transparent;
  font-size: clamp(28px,3.8vw,58px);
}
.cycle-statement strong:nth-child(2) { color:#fff; }
.cycle-statement strong:nth-child(3) { color:var(--coral); }

/* More concrete accordion details without making the page feel like a list of services. */
.solution-panel .bullet-list { gap: 8px; margin-top: 18px; color: rgba(255,255,255,.72); }
.solution-panel .bullet-list li { font-size: 14px; }

/* Footer statement: three explicit lines, with the commercial outcome highlighted. */
.footer-lead h2 { display: grid; gap: 7px; }
.footer-line { display: block; color:#fff; }
.footer-line-accent { color:var(--coral); }

@media (max-width:1180px) {
  .header { grid-template-columns:1fr auto; }
  .nav { display:none; }
}

/* Tablet and mobile: the loop becomes an explicit vertical sequence. */
@media (max-width:980px) {
  .cycle-shell { padding: 30px; }
  .cycle-center {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0 0 32px;
    padding: 30px;
    border-radius: 2px;
    transform: none;
  }
  .cycle-center::before,.cycle-center::after { display:none; }
  .cycle-center strong { font-size: clamp(38px,7vw,54px); }
  .cycle-center small { max-width: 540px; }
  .cycle-track {
    display: grid;
    grid-template-columns:1fr;
    grid-template-areas:none;
    row-gap: 44px;
    padding:0;
  }
  .cycle-step:nth-child(n) { grid-area:auto; min-height:0; }
  .cycle-step:nth-child(n)::after {
    left: 29px; right:auto; top:auto; bottom:-44px;
    width:1px; height:44px;
    background:linear-gradient(180deg,rgba(216,148,120,.75),rgba(216,148,120,.2));
  }
  .cycle-step:nth-child(n) .cycle-link {
    left:15px; right:auto; top:auto; bottom:-37px;
  }
  .cycle-step:nth-child(n) .cycle-link::before { content:"↓"; }
  .cycle-step:last-child::after { display:none; }
  .cycle-step:last-child .cycle-link { display:none; }
  .process-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:560px) {
  .process-section { padding-block:88px; }
  .process-grid { grid-template-columns:1fr; gap:12px; }
  .process-step { min-height:0; grid-template-rows:auto auto auto; padding:27px; }
  .process-step h3 { margin:23px 0 12px; }
  .cycle-section { padding-block:96px; }
  .cycle-shell { padding:18px; }
  .cycle-center { padding:25px 20px; margin-bottom:25px; text-align:left; align-items:flex-start; }
  .cycle-center span,.cycle-center strong,.cycle-center small { text-align:left; margin-left:0; margin-right:0; }
  .cycle-step { padding:25px; }
  .cycle-statement strong { padding:20px 0; font-size:clamp(27px,9vw,39px); }
  .footer-lead h2 { font-size:38px; }
}


/* Content always remains visible; motion enhances entry without blocking rendering. */
.motion-ready .reveal, .motion-ready .reveal.is-visible { opacity:1; transform:none; }

/* =========================================================
   V3.5 — centred desktop cluster, lighter mobile composition
   and restrained motion
   ========================================================= */

/* Brand and navigation form a single centred desktop group. */
.header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(18px, 2.6vw, 44px);
}
.header-cluster {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 2.8vw, 46px);
  width: max-content;
  max-width: calc(100vw - 110px);
}
.header .brand { flex: 0 0 auto; }
.header .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.25vw, 21px);
  margin: 0;
}
.header .nav-cta { margin-left: 4px; }
.header .menu-toggle {
  position: absolute;
  right: clamp(14px, 2.5vw, 38px);
}

/* Lighter rendering: no scroll-linked transforms or permanent compositor layers. */
.hero::before {
  transform: scale(1.02);
  will-change: auto;
}
.hero-display { transform: none; will-change: auto; }
.visual-slot,
.protocol-media,
.solution-visuals,
.cycle-step,
.process-step { will-change: auto; }

/* Subtle, short entry transitions only. */
.motion-ready .reveal {
  opacity: 0;
  transform: translate3d(0, 9px, 0);
  transition: opacity 440ms cubic-bezier(.22,1,.36,1), transform 440ms cubic-bezier(.22,1,.36,1);
}
.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.motion-ready .hero-display span,
.motion-ready .hero-copy > * {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  transition: opacity 520ms cubic-bezier(.22,1,.36,1), transform 520ms cubic-bezier(.22,1,.36,1);
}
.motion-ready.hero-ready .hero-display span,
.motion-ready.hero-ready .hero-copy > * {
  opacity: 1;
  transform: translate3d(0,0,0);
}
.motion-ready.hero-ready .hero-display span:nth-child(2) { transition-delay: 70ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(1) { transition-delay: 100ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(2) { transition-delay: 145ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(3) { transition-delay: 185ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(4) { transition-delay: 220ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(5) { transition-delay: 250ms; }

/* More compact supporting copy without weakening the sales argument. */
.section-head .lead { max-width: 770px; }

@media (max-width: 1180px) {
  .header {
    justify-content: space-between;
  }
  .header-cluster {
    justify-content: flex-start;
    max-width: calc(100vw - 82px);
  }
  .header .nav { display: none; }
  .header .menu-toggle { display: block; position: static; }
}

@media (max-width: 860px) {
  /* Show the property instead of covering it with a nearly opaque layer. */
  .hero::before {
    background-image: url("./assets/images/hero-exterior-mobile.webp");
    background-position: 58% center;
    transform: translate3d(0,-48px,0) scale(1.08);
  }
  .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(7,13,32,.18) 0%,
        rgba(7,13,32,.28) 28%,
        rgba(7,13,32,.58) 55%,
        rgba(7,13,32,.91) 82%,
        rgba(7,13,32,.98) 100%);
  }
  .hero-noise { opacity: .025; }
  .hero-copy { text-shadow: 0 2px 22px rgba(0,0,0,.42); }
  .hero-lead { max-width: 520px; }

  /* Reduce vertical weight of secondary copy. */
  .section-head { margin-bottom: 50px; }
  .section-head .lead {
    max-width: 620px;
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.52;
  }
  .copy-block,
  .principle-copy { font-size: 16px; }

  /* Horizontal card rails shorten the page while keeping all content available. */
  .outcomes-grid,
  .process-grid,
  .audience-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -19px;
    padding: 0 19px 18px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 19px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .outcomes-grid::-webkit-scrollbar,
  .process-grid::-webkit-scrollbar,
  .audience-grid::-webkit-scrollbar,
  .cycle-track::-webkit-scrollbar { display: none; }
  .outcome,
  .process-step,
  .audience-card {
    flex: 0 0 min(82vw, 350px);
    min-height: 285px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .process-step { grid-template-rows: auto auto 1fr; }
  .process-step h3 { min-height: 0; margin-top: 25px; }

  /* On mobile the circular diagram becomes a connected horizontal sequence. */
  .cycle-shell {
    padding: 22px 0 26px;
    overflow: hidden;
  }
  .cycle-center {
    width: auto;
    margin: 0 19px 26px;
    padding: 25px;
    text-align: left;
    background: linear-gradient(135deg, rgba(216,148,120,.12), rgba(255,255,255,.035));
    border: 1px solid rgba(216,148,120,.28);
  }
  .cycle-center span,
  .cycle-center strong,
  .cycle-center small {
    margin-inline: 0;
    text-align: left;
  }
  .cycle-center strong { font-size: clamp(39px, 11vw, 52px); }
  .cycle-center small { max-width: 440px; }
  .cycle-track {
    display: flex;
    grid-template-columns: none;
    grid-template-areas: none;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 19px 15px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 19px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cycle-step:nth-child(n) {
    flex: 0 0 min(82vw, 330px);
    min-height: 270px;
    grid-area: auto;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .cycle-step:nth-child(n)::after {
    display: block;
    left: auto;
    right: -20px;
    top: 50%;
    bottom: auto;
    width: 20px;
    height: 1px;
    background: linear-gradient(90deg, rgba(216,148,120,.25), rgba(216,148,120,.85));
  }
  .cycle-step:nth-child(n) .cycle-link {
    display: grid;
    left: auto;
    right: -17px;
    top: calc(50% - 12px);
    bottom: auto;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }
  .cycle-step:nth-child(n) .cycle-link::before { content: "→"; }
  .cycle-step:last-child::after,
  .cycle-step:last-child .cycle-link { display: none; }
  .cycle-statement { margin-top: 34px; }
}

@media (max-width: 560px) {
  :root { --section-y: 72px; }
  .brand-copy span { display: block; font-size: 7px; letter-spacing: .13em; }
  .header-cluster { max-width: calc(100vw - 68px); }

  .hero {
    min-height: 850px;
  }
  .hero-inner {
    min-height: 850px;
    padding-bottom: 28px;
  }
  .hero::before {
    background-position: 60% center;
    transform: translate3d(0,-62px,0) scale(1.1);
  }
  .hero-overlay {
    background: linear-gradient(180deg,
      rgba(7,13,32,.12) 0%,
      rgba(7,13,32,.24) 27%,
      rgba(7,13,32,.56) 51%,
      rgba(7,13,32,.93) 79%,
      rgba(7,13,32,.99) 100%);
  }
  .hero-copy { padding-top: 194px; }
  .hero-lead { margin-top: 19px; line-height: 1.48; }
  .microcopy { display: none; }

  .section-head h2 { font-size: clamp(39px, 10.8vw, 47px); }
  .section-head .lead { font-size: 15px; }
  .closing { font-size: 19px; }

  .outcomes-grid,
  .process-grid,
  .audience-grid {
    margin-inline: -14px;
    padding-inline: 14px;
    scroll-padding-inline: 14px;
  }
  .outcome,
  .process-step,
  .audience-card { flex-basis: min(86vw, 330px); }
  .outcome { min-height: 265px; }
  .process-step { min-height: 270px; }
  .audience-card { min-height: 0; }

  .cycle-center { margin-inline: 14px; }
  .cycle-track {
    padding-inline: 14px;
    scroll-padding-inline: 14px;
  }
  .cycle-step:nth-child(n) { flex-basis: min(86vw, 320px); min-height: 255px; }
  .cycle-statement strong {
    min-height: 0;
    padding: 18px 0;
    font-size: clamp(25px, 8vw, 34px);
  }

  .motion-ready .reveal {
    transform: translate3d(0, 6px, 0);
    transition-duration: 340ms;
  }
  .motion-ready .hero-display span,
  .motion-ready .hero-copy > * { transition-duration: 420ms; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal,
  .motion-ready .hero-display span,
  .motion-ready .hero-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Mobile length and media-load refinement. */
@media (max-width: 560px) {
  .protocol-cards {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    margin-inline: -14px;
    padding: 0 14px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 14px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .protocol-cards::-webkit-scrollbar { display:none; }
  .lever-card {
    flex: 0 0 min(86vw, 330px);
    min-height: 360px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .lever-card h3 { margin-top: 30px; }
  .protocol-media { min-height: 430px; }
  .protocol-media-copy p { font-size: 14px; }

  .principle-layout .visual-slot { max-height: 330px; }
  .principle-copy .bullet-list { gap: 10px; }
  .principle-copy .bullet-list li { padding-left: 22px; }

  .value-layout .visual-slot { min-height: 270px; }
  .value-copy .bullet-list { gap: 8px; }
  .value-copy .bullet-list li { padding-block: 10px; }

  .solution-visuals { margin-top: 20px; }
  .solution-main { height: 330px; aspect-ratio: auto; }
  .solution-secondary { display: none; }

  .visual-slot:hover,
  .outcome:hover,
  .lever-card:hover,
  .process-step:hover,
  .cycle-step:hover,
  .protocol-media:hover img { transform: none; }
}

/* =========================================================
   Final refinement — progressive form, footer and motion
   ========================================================= */
.footer-lead h2 .footer-line { color: #fff; }
.footer-lead h2 .footer-line-accent { color: var(--coral); }

/* Progressive analysis form */
.dynamic-form { min-height: 520px; display: flex; flex-direction: column; }
.form-progress { margin-bottom: clamp(30px,4vw,48px); }
.form-progress > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; color:var(--slate); font-size:10px; font-weight:760; letter-spacing:.13em; text-transform:uppercase; }
.form-progress-track { height:2px; overflow:hidden; background:rgba(11,18,41,.12); }
.form-progress-track i { display:block; width:11%; height:100%; background:linear-gradient(90deg,var(--coral-deep),var(--coral)); transition:width 520ms var(--ease); }
.form-steps { position:relative; flex:1; }
.form-step { min-height:300px; align-content:center; padding:4px 0 26px; }
.form-step[aria-hidden="true"] { display:none; }
.form-step.is-active { display:grid; animation:formStepIn 480ms var(--ease) both; }
@keyframes formStepIn { from { opacity:0; transform:translate3d(20px,0,0); } to { opacity:1; transform:translate3d(0,0,0); } }
.form-question-number { display:block; margin-bottom:24px; color:var(--coral-deep); font-size:11px; font-weight:800; letter-spacing:.16em; }
.form-step > label:not(.consent) { display:grid; gap:14px; }
.form-step > label > strong,
.form-final-copy > strong { max-width:720px; font-size:clamp(30px,3.4vw,50px); font-weight:650; line-height:1.04; letter-spacing:-.045em; }
.form-step > label > small,
.form-final-copy > small { max-width:650px; color:var(--slate); font-size:15px; line-height:1.55; }
.dynamic-form input:not([type="checkbox"]),
.dynamic-form select,
.dynamic-form textarea { margin-top:18px; min-height:62px; padding:15px 0; border:0; border-bottom:1px solid rgba(11,18,41,.22); background:transparent; font-size:clamp(17px,1.7vw,22px); box-shadow:none; }
.dynamic-form textarea { min-height:145px; padding-top:14px; }
.dynamic-form input:not([type="checkbox"]):focus,
.dynamic-form select:focus,
.dynamic-form textarea:focus { border-color:var(--coral-deep); box-shadow:none; }
.dynamic-form input::placeholder,
.dynamic-form textarea::placeholder { color:rgba(78,88,117,.52); }
.form-step-consent { align-content:center; }
.form-final-copy { display:grid; gap:14px; margin-bottom:34px; }
.form-step-consent .consent { margin:0; padding:20px; border:1px solid rgba(11,18,41,.13); background:#fff; }
.form-navigation { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:24px; border-top:1px solid rgba(11,18,41,.1); }
.form-back { min-height:48px; padding:0; border:0; background:transparent; color:var(--slate); font-size:12px; font-weight:760; cursor:pointer; }
.form-back:hover { color:var(--navy); }
.form-navigation .btn { margin-left:auto; min-width:190px; }
.form-navigation [hidden] { display:none !important; }
.form-assurance { max-width:470px; margin:18px 0 0; color:var(--slate); font-size:11px; line-height:1.5; }
.form-status { min-height:24px; }

/* Lightweight premium reveal system. No scroll interception. */
.motion-ready .reveal,
.motion-ready .motion-item,
.motion-ready .motion-media { opacity:0; transform:translate3d(0,18px,0); transition-property:opacity,transform; transition-duration:680ms; transition-timing-function:cubic-bezier(.22,1,.36,1); transition-delay:var(--motion-delay,0ms); }
.motion-ready .motion-media { transform:translate3d(0,12px,0) scale(.985); }
.motion-ready .reveal.is-visible,
.motion-ready .motion-item.is-visible,
.motion-ready .motion-media.is-visible { opacity:1; transform:translate3d(0,0,0) scale(1); }
.motion-ready .section-head.reveal { transform:translate3d(0,22px,0); }
.motion-ready .hero-display span { opacity:0; transform:translate3d(0,24px,0); transition:opacity 820ms cubic-bezier(.22,1,.36,1),transform 820ms cubic-bezier(.22,1,.36,1); }
.motion-ready .hero-copy > * { opacity:0; transform:translate3d(0,16px,0); transition:opacity 720ms cubic-bezier(.22,1,.36,1),transform 720ms cubic-bezier(.22,1,.36,1); }
.motion-ready.hero-ready .hero-display span,
.motion-ready.hero-ready .hero-copy > * { opacity:1; transform:none; }
.motion-ready.hero-ready .hero-display span:nth-child(2) { transition-delay:90ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(1) { transition-delay:160ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(2) { transition-delay:220ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(3) { transition-delay:280ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(4) { transition-delay:335ms; }
.motion-ready.hero-ready .hero-copy > *:nth-child(5) { transition-delay:380ms; }

@media (max-width:860px) {
  .hero-overlay { background:linear-gradient(180deg,rgba(7,13,32,.24) 0%,rgba(7,13,32,.34) 28%,rgba(7,13,32,.64) 55%,rgba(7,13,32,.93) 82%,rgba(7,13,32,.99) 100%); }
  .dynamic-form { min-height:470px; }
  .form-step { min-height:270px; }
  .form-step > label > strong,
  .form-final-copy > strong { font-size:clamp(29px,7.5vw,43px); }
  .motion-ready .reveal,
  .motion-ready .motion-item,
  .motion-ready .motion-media { transform:translate3d(0,12px,0); transition-duration:560ms; }
}

@media (max-width:560px) {
  .hero-overlay { background:linear-gradient(180deg,rgba(7,13,32,.20) 0%,rgba(7,13,32,.32) 27%,rgba(7,13,32,.64) 51%,rgba(7,13,32,.94) 79%,rgba(7,13,32,.995) 100%); }
  .diagnosis-panel { padding:25px 22px; }
  .diagnosis-panel > h3 { margin-bottom:26px; font-size:31px; }
  .dynamic-form { min-height:500px; }
  .form-progress { margin-bottom:24px; }
  .form-step { min-height:290px; padding-bottom:18px; }
  .form-question-number { margin-bottom:18px; }
  .form-step > label > strong,
  .form-final-copy > strong { font-size:30px; }
  .form-step > label > small,
  .form-final-copy > small { font-size:14px; }
  .dynamic-form input:not([type="checkbox"]),
  .dynamic-form select,
  .dynamic-form textarea { font-size:17px; }
  .form-navigation { align-items:stretch; flex-wrap:wrap; }
  .form-navigation .btn { width:auto; flex:1; min-width:170px; }
  .form-back { min-width:78px; text-align:left; }
  .form-assurance { font-size:10px; }
  .motion-ready .reveal,
  .motion-ready .motion-item,
  .motion-ready .motion-media { transition-duration:480ms; }
}

@media (prefers-reduced-motion:reduce) {
  .form-step.is-active { animation:none; }
}


/* Floating WhatsApp contact */


/* Legal policies and technical-cookie notice */
.legal-policy{
  max-width:980px;
  margin:0 auto;
  color:var(--navy);
}
.policy-intro{
  display:flex;
  justify-content:space-between;
  gap:24px;
  margin-bottom:56px;
  padding:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.policy-intro span{
  color:var(--slate);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.policy-intro strong{font-size:14px}
.policy-section{
  padding:38px 0;
  border-bottom:1px solid var(--line);
}
.policy-section h2{
  margin:0 0 20px;
  font-size:clamp(27px,3vw,42px);
  line-height:1.05;
  letter-spacing:-.04em;
}
.policy-section p,.policy-section li{
  color:var(--slate);
  font-size:17px;
  line-height:1.75;
}
.policy-section p{margin:0 0 16px}
.policy-section p:last-child{margin-bottom:0}
.policy-section ul{margin:16px 0 0;padding-left:22px}
.policy-section a{color:var(--coral-deep);text-decoration:underline;text-underline-offset:3px}
.policy-table{
  display:grid;
  margin:26px 0;
  border:1px solid var(--line);
}
.policy-table>[role="row"]{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.policy-table>[role="row"]>*{
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}
.policy-table>[role="row"]>*+*{border-left:1px solid var(--line)}
.policy-table>[role="row"]:last-child>*{border-bottom:0}
.policy-table>[role="row"]:first-child{background:var(--navy);color:#fff}
.policy-table>[role="row"]:not(:first-child) span{color:var(--slate);line-height:1.55}
.cookie-list{display:grid;gap:14px;margin:28px 0}
.cookie-list article{
  display:grid;
  grid-template-columns:minmax(180px,.7fr) minmax(150px,.5fr) minmax(0,1.5fr);
  gap:22px;
  align-items:start;
  padding:22px;
  border:1px solid var(--line);
  background:#fff;
}
.cookie-list article strong{color:var(--navy)}
.cookie-list article span{color:var(--coral-deep);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.cookie-list article p{margin:0;font-size:15px;line-height:1.55}
.policy-note{
  margin-top:54px;
  padding:28px 30px;
  border-left:3px solid var(--coral);
  background:var(--peach);
}
.policy-note strong{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.policy-note p{margin:0;color:var(--slate)}
.cookie-notice{
  position:fixed;
  z-index:360;
  left:24px;
  right:24px;
  bottom:22px;
  width:min(980px,calc(100vw - 48px));
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  padding:22px 24px;
  color:#fff;
  background:rgba(8,15,33,.96);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 28px 90px rgba(0,0,0,.34);
  backdrop-filter:blur(16px);
  transition:opacity .22s ease,transform .22s ease;
}
.cookie-notice[hidden]{display:none}
.cookie-notice.is-closing{opacity:0;transform:translateY(10px)}
.cookie-notice strong{display:block;margin-bottom:4px;font-size:16px}
.cookie-notice p{margin:0;color:rgba(255,255,255,.65);font-size:13px;line-height:1.5}
.cookie-notice-actions{display:flex;align-items:center;gap:14px}
.cookie-notice-actions a{
  color:rgba(255,255,255,.76);
  font-size:12px;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-notice-actions button{
  min-height:42px;
  padding:0 18px;
  border:1px solid var(--coral);
  color:var(--navy);
  background:var(--coral);
  font-weight:760;
  cursor:pointer;
}
.cookie-notice-actions button:hover{background:#e4a48a}
.cookie-notice-actions button:focus-visible{outline:3px solid rgba(255,255,255,.5);outline-offset:3px}
@media(max-width:720px){
  .policy-intro{align-items:flex-start;flex-direction:column;gap:6px;margin-bottom:30px}
  .policy-section{padding:30px 0}
  .policy-section p,.policy-section li{font-size:15px}
  .policy-table>[role="row"]{grid-template-columns:1fr}
  .policy-table>[role="row"]>*+*{border-left:0}
  .policy-table>[role="row"]>*{border-bottom:1px solid var(--line)!important}
  .policy-table>[role="row"]:last-child>*:last-child{border-bottom:0!important}
  .cookie-list article{grid-template-columns:1fr;gap:8px}
  .cookie-notice{left:12px;right:12px;bottom:12px;width:calc(100vw - 24px);grid-template-columns:1fr;gap:16px;padding:18px}
  .cookie-notice-actions{justify-content:space-between}
}


/* Transparent logo integration */
.brand-logo { display:block; width:clamp(182px, 15vw, 246px); height:auto; }
.footer-brand-logo { width: min(230px, 100%); }
.footer-grid .footer-brand-logo + p { margin-top: 14px; }
.header .brand { min-width: 0; }
.header .brand-logo { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
@media (max-width: 860px) {
  .header .brand-logo { width: 176px; }
}
@media (max-width: 560px) {
  .header .brand-logo { width: 154px; }
  .footer-brand-logo { width: 182px; }
}


/* Final typography hierarchy and updated logo */
.header .brand-logo {
  width: clamp(218px, 17vw, 288px);
  height: auto;
}
.footer-brand-logo {
  width: min(310px, 100%);
  height: auto;
}
.hero-eyebrow {
  margin-bottom: 22px;
  font-size: clamp(12px, .92vw, 15px);
  line-height: 1.35;
  letter-spacing: .145em;
}
.hero-copy {
  width: min(770px, 54vw);
}
.hero h1 {
  font-size: clamp(60px, 5.35vw, 86px);
  line-height: .92;
}
.hero-line {
  max-width: 760px;
}
.hero-line-accent {
  max-width: 790px;
  font-size: .84em;
  line-height: .99;
}
.section-eyebrow {
  margin-top: 12px;
  font-size: clamp(13px, 1.02vw, 16px);
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: .105em;
}
.diagnosis-copy > .eyebrow,
.footer-lead > .eyebrow {
  font-size: clamp(13px, 1.02vw, 16px);
  font-weight: 760;
  line-height: 1.25;
  letter-spacing: .105em;
}
@media (max-width: 1180px) {
  .header .brand-logo { width: 218px; }
}
@media (max-width: 860px) {
  .header .brand-logo { width: 202px; }
  .hero-copy { width: 100%; }
  .hero-eyebrow { font-size: 12px; }
  .hero h1 { font-size: clamp(50px, 9.8vw, 72px); }
  .hero-line-accent { font-size: .8em; }
  .section-eyebrow,
  .diagnosis-copy > .eyebrow,
  .footer-lead > .eyebrow { font-size: 13px; }
}
@media (max-width: 560px) {
  .header .brand-logo { width: 176px; }
  .footer-brand-logo { width: 230px; }
  .hero-eyebrow {
    max-width: 330px;
    margin-bottom: 18px;
    font-size: 11px;
    letter-spacing: .12em;
  }
  .hero h1 {
    font-size: clamp(45px, 12.5vw, 59px);
    line-height: .94;
  }
  .hero-line-accent {
    font-size: .78em;
    line-height: 1.02;
  }
  .section-eyebrow,
  .diagnosis-copy > .eyebrow,
  .footer-lead > .eyebrow {
    font-size: 12px;
    letter-spacing: .095em;
  }
}

/* ==================================================================== *
 * SCROLL-JOURNEY — hero video scrub + mid-site immersion
 * Adds a scroll-scrubbed <canvas> flythrough to the hero and a
 * full-screen "return into the villa" section mid-page. Everything
 * else (fonts, palette, copy, layout, existing motion) is untouched.
 * ==================================================================== */

/* ---- Pinned viewport shared by both scrub sections ---- */
/* overflow:visible is REQUIRED: the base .hero sets overflow:hidden, which would
   make .hero the scroll container for the sticky child and break the pin. */
.hero-journey { height: 600vh; min-height: 600vh; overflow: visible; }
.hero-journey .sj-sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 100svh;
  overflow: hidden;
}
.sj-canvas {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; display: block;
  background: var(--navy-deep);
}
/* Canvas is the hero background now → keep overlay/noise/copy above it,
   exactly like the original static image did. */
.hero-journey .hero-inner { position: relative; z-index: 1; }

/* ---- Hero text beats revealed progressively on scroll ---- */
.hero-journey .hero-copy [data-beat] {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(6px);
  transition: opacity .95s cubic-bezier(.22,1,.36,1),
              transform .95s cubic-bezier(.22,1,.36,1),
              filter .95s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.hero-journey .hero-copy [data-beat].is-in {
  opacity: 1; transform: none; filter: none;
}
/* Neutralise the load-time hero fade so the scroll reveal fully owns it. */
.motion-ready .hero-journey .hero-copy > *:not([data-beat]),
.motion-ready.hero-ready .hero-journey .hero-copy > *:not([data-beat]) {
  opacity: 1; transform: none; transition: none;
}
/* Scroll cue fades out once the journey starts moving. */
.hero-journey .scroll-cue { transition: opacity .4s ease; }

/* ---- Mid-site immersion (clip 3: from the sea back into the villa) ---- */
.midjourney { position: relative; height: 300vh; background: var(--navy-deep); }
.midjourney .sj-sticky {
  position: sticky; top: 0;
  height: 100svh; min-height: 100svh;
  overflow: hidden;
}
.midjourney .sj-canvas { z-index: 0; }
.midjourney-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,13,32,.62) 0%, rgba(7,13,32,.12) 34%, rgba(7,13,32,.10) 60%, rgba(7,13,32,.82) 100%);
}
.midjourney-copy {
  position: relative; z-index: 2;
  width: var(--container); height: 100%;
  margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 clamp(56px, 9vh, 120px);
  color: #fff;
}
.midjourney-copy .eyebrow { color: var(--coral); }
.midjourney-copy p {
  max-width: 640px; margin: 16px 0 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 46px);
  line-height: 1.12; letter-spacing: -.03em;
  color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.midjourney [data-beat] {
  opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(5px);
  transition: opacity 1s cubic-bezier(.22,1,.36,1),
              transform 1s cubic-bezier(.22,1,.36,1),
              filter 1s cubic-bezier(.22,1,.36,1);
}
.midjourney [data-beat].is-in { opacity: 1; transform: none; filter: none; }
.midjourney [data-beat="1"] { transition-delay: .08s; }

/* ---- Fallbacks: reduced-motion, static, or frames unavailable ----
   Never let the copy stay hidden. */
.sj-static, .sj-unavailable { height: auto !important; min-height: 100svh; }
.sj-static .sj-sticky, .sj-unavailable .sj-sticky { position: relative; }
.sj-static [data-beat], .sj-unavailable [data-beat] {
  opacity: 1 !important; transform: none !important; filter: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero-journey, .midjourney { height: auto; min-height: 100svh; }
  .hero-journey .sj-sticky, .midjourney .sj-sticky { position: relative; }
  .hero-journey .hero-copy [data-beat], .midjourney [data-beat] {
    opacity: 1; transform: none; filter: none; transition: none;
  }
}

/* Mobile: shorter scroll distance so the journey isn't exhausting on a phone. */
@media (max-width: 760px) {
  .hero-journey { height: 520vh; min-height: 520vh; }
}

/* ==================================================================== *
 * MOTION POLISH — richer, more cinematic on-scroll reveals (non-hero).
 * Overrides the lightweight reveal system above via later source order.
 * The hero uses its own data-beat system and is left untouched.
 * ==================================================================== */
.motion-ready .reveal,
.motion-ready .motion-item,
.motion-ready .motion-media {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  filter: blur(6px);
  transition-property: opacity, transform, filter;
  transition-duration: 820ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--motion-delay, 0ms);
}
/* Media frames rise a touch further, with more depth and a softer focus-in. */
.motion-ready .motion-media {
  transform: translate3d(0, 26px, 0) scale(.95);
  filter: blur(10px);
}
.motion-ready .section-head.reveal { transform: translate3d(0, 28px, 0); }
.motion-ready .reveal.is-visible,
.motion-ready .motion-item.is-visible,
.motion-ready .motion-media.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}
/* Card lift eases a bit richer on hover (adds a soft shadow to the existing move). */
.outcome, .cycle-step, .process-step {
  transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s, box-shadow .4s;
}
.outcome:hover, .cycle-step:hover, .process-step:hover {
  box-shadow: 0 26px 60px -30px rgba(0,0,0,.55);
}
/* Media frames get a gentle lift + shadow on hover, complementing the inner image zoom. */
.visual-slot, .protocol-media, .solution-main, .solution-secondary {
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, filter .5s;
}
.visual-slot:hover, .protocol-media:hover {
  transform: translateY(-5px);
  box-shadow: 0 34px 70px -34px rgba(7,13,32,.6);
}

/* Reduced-motion: never leave anything blurred or offset. */
@media (prefers-reduced-motion: reduce) {
  .motion-ready .reveal,
  .motion-ready .motion-item,
  .motion-ready .motion-media {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .visual-slot:hover, .protocol-media:hover,
  .outcome:hover, .cycle-step:hover, .process-step:hover { transform: none; box-shadow: none; }
}

/* ==================================================================== *
 * MOBILE HERO SEAM FIX + eyebrow line-break + horizontal-rail scroll hint
 * ==================================================================== */
/* The canvas is the hero background now; the old bluish static poster
   (.hero::before) could peek through the dynamic-viewport gap on mobile,
   showing a seam. Drop it on the journey hero and keep the fill navy so any
   gap is invisible. */
.hero-journey { background: var(--navy-deep); }
.hero-journey::before { display: none !important; }
.hero-journey .sj-sticky { background: var(--navy-deep); }

/* Eyebrow: one line on desktop, "Real Estate Marketing" / "per agenzie
   immobiliari" on two lines on mobile. */
.hero-eyebrow span { display: inline; }
@media (max-width: 760px) {
  .hero-eyebrow { max-width: none; }
  .hero-eyebrow span { display: block; }
}

/* (Right-edge fade on horizontal rails removed per feedback — the one-time JS
   nudge on first view is kept as the scroll affordance.) */

/* ==================================================================== *
 * HEADER LOGO + MOBILE MENU (clean X) + mobile CTA colour + hero fill
 * ==================================================================== */

/* Mobile hero: fill the DYNAMIC viewport so the address-bar gap can't leave a
   seam/cut at the bottom on mobile browsers. */
@media (max-width: 760px) {
  /* Stable svh (NOT dvh): the address bar showing/hiding must not resize the
     pinned hero, otherwise scrolling back up makes it jump/shift and cover the
     copy. A small navy strip may show at the very bottom when the bar hides —
     it blends with the hero background. */
  .hero-journey .sj-sticky { height: 100svh; min-height: 100svh; }
  /* CTA removed from the hero on mobile (per feedback). */
  .hero-journey .hero-cta { display: none; }
  /* The base mobile rules give .hero-inner a fixed min-height (820–900px) that is
     TALLER than the pinned svh viewport, so the bottom-aligned copy overflowed
     and got clipped ("Ottieni…in esclusiva" cut off). Match it to the viewport so
     the whole copy fits with breathing room above the fold. */
  .hero-journey .hero-inner {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 10px;
  }
  /* Bottom-aligned copy: a slightly more compact paragraph shortens the block,
     so its TOP drops (more video shows above) and nothing gets clipped by the
     pinned viewport. */
  .hero-journey .hero-lead { margin-top: 14px; font-size: 14px; line-height: 1.42; }
  .hero-journey .hero-overlay {
    background:
      linear-gradient(180deg,
        rgba(7,13,32,.06) 0%,
        rgba(7,13,32,.14) 24%,
        rgba(7,13,32,.42) 38%,
        rgba(7,13,32,.78) 54%,
        rgba(7,13,32,.94) 74%,
        rgba(7,13,32,.99) 100%);
  }
}

/* Clean hamburger → X. Absolutely-centred bars so the close icon is a crisp X
   instead of the broken offset shape. */
.header .menu-toggle { position: relative !important; }
.menu-toggle span,
.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 20px; height: 1.6px;
  margin: 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s cubic-bezier(.4,0,.2,1), opacity .18s;
}
.menu-toggle::before { transform: translate(-50%, calc(-50% - 6px)); }
.menu-toggle span    { transform: translate(-50%, -50%); }
.menu-toggle::after  { transform: translate(-50%, calc(-50% + 6px)); }
.menu-open .menu-toggle span    { opacity: 0; }
.menu-open .menu-toggle::before { transform: translate(-50%, -50%) rotate(45deg); }
.menu-open .menu-toggle::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* Mobile menu: highlight "Analisi Strategica" in coral. */
.mobile-menu .mobile-cta { color: var(--coral); }
.mobile-menu .mobile-cta:hover { color: var(--coral-light); }

/* Mobile hero: taller section + slightly smaller headline (per feedback) so the
   copy is less cramped and more of the video shows behind it. */
@media (max-width: 760px) {
  .hero-journey { height: 760vh; min-height: 760vh; }
  .hero-journey h1 { font-size: clamp(33px, 8.6vw, 44px); line-height: .97; }
}

.hero-mobile-copy { display: none; }

/* ==================================================================== *
 * MOBILE HERO (restored "overlay ampio 760vh"): copy overlaid on the video
 * with a wide dark overlay, headline at 47px, hero 760vh. Desktop unchanged.
 * ==================================================================== */
@media (max-width: 760px) {
  .hero-journey { height: 760vh; min-height: 760vh; }
  .hero-journey h1 { font-size: clamp(35px, 9.2vw, 47px); line-height: .94; }
  .hero-journey .hero-inner {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 4px;
  }
  .hero-journey .hero-copy {
    display: block;
    width: 100%;
    padding-top: 0;
  }

  /* On mobile the same scroll beats used on desktop now own the reveal:
     eyebrow, first headline, accent headline and paragraph enter in sequence. */
  html.motion-ready .hero-journey .hero-copy [data-beat] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    filter: blur(6px);
  }
  html.motion-ready .hero-journey .hero-copy [data-beat].is-in {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* A tighter lower copy block exposes more of the vertical video while keeping
     every line readable when all the beats have appeared. */
  .hero-journey .hero-eyebrow { margin-bottom: 12px; }
  .hero-journey .hero-line-accent { margin-top: .1em; line-height: .98; }
  .hero-journey .hero-lead {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.38;
  }
  .hero-journey .hero-cta { display: none; }
  .hero-eyebrow span { display: block; }

  /* The dark/navy support begins lower, so more of the 9:16 video remains
     visible above the copy and the bottom still closes into the brand blue. */
  .hero-journey .hero-overlay {
    background: linear-gradient(180deg,
      rgba(7,13,32,.035) 0%,
      rgba(7,13,32,.07) 31%,
      rgba(7,13,32,.20) 46%,
      rgba(7,13,32,.56) 62%,
      rgba(7,13,32,.90) 79%,
      rgba(7,13,32,.985) 92%,
      rgba(7,13,32,1) 100%);
  }
}

/* Mobile hero breathing space: visually extends the final navy area below the
   paragraph without changing the position of the copy or the video. */
.hero-mobile-extension { display: none; }
@media (max-width: 760px) {
  .hero-mobile-extension {
    display: block;
    height: 64px;
    background: var(--navy-deep);
  }
}

/* Refinement: compact mobile rail progress, contextual solution imagery and lighter cookie notice. */
.rail-indicator { display: none; }

.solution-visuals img {
  transition: opacity 180ms ease, transform 360ms var(--ease);
}
.solution-visuals.is-changing img {
  opacity: 0;
  transform: scale(.985);
}
.solution-panel-media {
  display: none;
  margin: 0;
  overflow: hidden;
}
.solution-panel-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The notice is informational only: keep it visible, but visually secondary. */
.cookie-notice {
  bottom: 16px;
  width: min(760px, calc(100vw - 40px));
  grid-template-columns: minmax(0,1fr) auto;
  gap: 18px;
  padding: 14px 16px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.cookie-notice strong {
  margin-bottom: 2px;
  font-size: 13px;
  line-height: 1.2;
}
.cookie-notice p {
  font-size: 11.5px;
  line-height: 1.35;
}
.cookie-notice-actions { gap: 12px; }
.cookie-notice-actions a { font-size: 10.5px; }
.cookie-notice-actions button {
  min-width: 42px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

@media (max-width: 760px) {
  .rail-indicator {
    display: flex;
    align-items: center;
    gap: 13px;
    min-height: 22px;
    margin-top: 2px;
    color: var(--navy);
    user-select: none;
  }
  .rail-count {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex: 0 0 auto;
    font-size: 10px;
    font-style: normal;
    font-weight: 760;
    letter-spacing: .13em;
  }
  .rail-count b {
    color: var(--coral-deep);
    font-size: 12px;
  }
  .rail-count i,
  .rail-count em {
    color: currentColor;
    font-style: normal;
    opacity: .48;
  }
  .rail-progress {
    position: relative;
    display: block;
    width: min(112px, 34vw);
    height: 2px;
    margin-left: auto;
    overflow: hidden;
    background: rgba(11,18,41,.14);
  }
  .rail-progress i {
    display: block;
    width: 0;
    height: 100%;
    background: var(--coral-deep);
    transition: width 260ms var(--ease);
  }
  .section-dark .rail-indicator,
  .cycle-section .rail-indicator { color: rgba(255,255,255,.78); }
  .section-dark .rail-progress,
  .cycle-section .rail-progress { background: rgba(255,255,255,.14); }
  .section-dark .rail-progress i,
  .cycle-section .rail-progress i { background: var(--coral); }
  .section-dark .rail-count b,
  .cycle-section .rail-count b { color: var(--coral); }

  .outcomes-grid + .rail-indicator,
  .process-grid + .rail-indicator,
  .audience-grid + .rail-indicator,
  .protocol-cards + .rail-indicator {
    margin-inline: 0;
    margin-bottom: 22px;
  }
  .cycle-track + .rail-indicator {
    margin: 3px 19px 0;
  }

  .solution-visuals { display: none; }
  .solution-panel-media {
    display: block;
    width: calc(100% + 54px);
    height: clamp(205px, 58vw, 265px);
    margin: 22px 0 0 -54px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 50px rgba(0,0,0,.22);
  }

  .cookie-notice {
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    width: calc(100vw - 20px);
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    padding: 11px 12px;
    border-color: rgba(255,255,255,.12);
    backdrop-filter: blur(13px);
  }
  .cookie-notice-copy { min-width: 0; }
  .cookie-notice strong { font-size: 12px; }
  .cookie-notice p {
    max-width: 245px;
    font-size: 10.5px;
    line-height: 1.3;
  }
  .cookie-notice-actions {
    justify-content: flex-end;
    gap: 9px;
  }
  .cookie-notice-actions a {
    max-width: 42px;
    font-size: 9.5px;
    line-height: 1.15;
    text-align: right;
  }
  .cookie-notice-actions button {
    min-width: 38px;
    min-height: 32px;
    padding: 0 10px;
    font-size: 11px;
  }
}


@media (min-width: 561px) and (max-width: 760px) {
  .protocol-cards + .rail-indicator { display: none; }
}

@media (min-width: 721px) and (max-width: 760px) {
  .solution-visuals { display: grid; }
  .solution-panel-media { display: none; }
}

@media (max-width: 720px) {
  .solution-panel { padding-left: 54px; padding-right: 0; }
}

@media (max-width: 360px) {
  .cookie-notice p { max-width: 190px; }
}

/* ==================================================================== *
 * DESKTOP RETINA / MAC HERO REFINEMENT
 * Keeps the cinematic title clear of the sales copy on 16:10 and other
 * non-ultrawide desktop displays. Ultrawide composition remains unchanged.
 * ==================================================================== */
@media (min-width: 1181px) and (max-aspect-ratio: 16 / 9) {
  .hero-display {
    top: clamp(96px, 10.5vh, 132px);
    font-size: clamp(76px, min(8.8vw, 9.5vh), 132px);
    line-height: .79;
  }
  .hero-copy {
    bottom: clamp(30px, 4.8vh, 52px);
    width: min(620px, 43vw);
  }
  .hero h1 {
    font-size: clamp(48px, min(4.2vw, 7vh), 68px);
  }
  .hero-line-accent { max-width: 620px; }
  .hero-lead {
    max-width: 590px;
    margin-top: 18px;
    font-size: clamp(15px, 1.08vw, 17px);
  }
  .hero-copy .actions { margin-top: 22px; }
}

@media (min-width: 1181px) and (max-height: 820px) and (max-aspect-ratio: 16 / 9) {
  .hero-display {
    top: calc(var(--header-h) + 20px);
    font-size: clamp(72px, min(8vw, 9vh), 104px);
  }
  .hero-copy { bottom: 24px; }
  .hero h1 { font-size: clamp(45px, min(3.9vw, 6.7vh), 60px); }
  .hero-lead { margin-top: 14px; line-height: 1.45; }
  .hero-copy .actions { margin-top: 17px; }
  .hero-copy .microcopy { margin-top: 10px; }
}

/* Typical MacBook / desktop browser viewports become wider after the browser
   chrome reduces the usable height, so target them explicitly as well. */
@media (min-width: 1181px) and (max-width: 2300px) and (max-height: 1100px) {
  .hero-display {
    top: clamp(96px, 10.5vh, 126px);
    font-size: clamp(76px, min(8.8vw, 9.5vh), 126px);
    line-height: .79;
  }
  .hero-copy {
    bottom: clamp(30px, 4.8vh, 50px);
    width: min(620px, 43vw);
  }
  .hero h1 { font-size: clamp(48px, min(4.2vw, 7vh), 66px); }
  .hero-line-accent { max-width: 620px; }
  .hero-lead {
    max-width: 590px;
    margin-top: 18px;
    font-size: clamp(15px, 1.08vw, 17px);
  }
  .hero-copy .actions { margin-top: 22px; }
}

/* Final adjustment: compact desktop title on standard/MacBook displays.
   The ultrawide composition and mobile layout remain untouched. */
.solution-layout-text-only {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1120px;
}
.solution-layout-text-only .solution-list { width: 100%; }

@media (min-width: 1181px) and (max-width: 2300px) and (max-height: 1100px) {
  /* Keep the same word-to-word geometry used by the ultrawide layout.
     The offset is tied to the title font size rather than to the viewport,
     so reducing the title on shorter MacBook screens no longer opens a gap. */
  .hero-display span:last-child {
    padding: 0;
    text-align: left;
  }
}

@media (min-width: 1181px) and (max-aspect-ratio: 16 / 9) {
  .hero-display span:last-child {
    padding: 0;
    text-align: left;
  }
}


/* ==================================================================== *
 * FINAL DESKTOP TITLE MATCH + CINEMATIC SITE PRELOADER
 * The title geometry mirrors the approved ultrawide composition on
 * standard desktop/MacBook viewports. Mobile and true ultrawide stay intact.
 * ==================================================================== */
@media (min-width: 1181px) and (max-width: 2300px) and (max-height: 1100px) {
  .hero-display {
    top: clamp(96px, 10.5vh, 126px);
    font-size: clamp(110px, 9.4vw, 148px);
    line-height: .76;
  }
  .hero-display span:last-child {
    padding: 0;
    margin-top: 0;
    margin-left: 4.39em;
    text-align: left;
  }
}

@media (min-width: 1181px) and (max-aspect-ratio: 16 / 9) {
  .hero-display {
    top: clamp(96px, 10.5vh, 126px);
    font-size: clamp(110px, 9.4vw, 148px);
    line-height: .76;
  }
  .hero-display span:last-child {
    padding: 0;
    margin-top: 0;
    margin-left: 4.39em;
    text-align: left;
  }
}

/* Il sito viene renderizzato dietro il preloader: in questo modo non può restare
   bloccato o invisibile anche se il video impiega più tempo a caricarsi. */
#app {
  opacity: 1;
  transition: opacity 720ms cubic-bezier(.22,1,.36,1);
}
.site-preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 74% 20%, rgba(216,148,120,.18), transparent 33%),
    radial-gradient(circle at 20% 82%, rgba(31,67,126,.22), transparent 38%),
    linear-gradient(145deg, #070d20 0%, #0b1430 54%, #121d3b 100%);
  opacity: 1;
  visibility: visible;
  transition:
    opacity 760ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s;
}
.site-preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 75%);
  pointer-events: none;
}
.site-preloader-inner {
  position: relative;
  z-index: 1;
  width: min(430px, calc(100vw - 64px));
  display: grid;
  justify-items: center;
  gap: 28px;
}
.site-preloader-logo {
  width: min(100%, 390px);
  height: auto;
  filter: drop-shadow(0 18px 46px rgba(0,0,0,.24));
  animation: peLoaderLogo 1.3s cubic-bezier(.22,1,.36,1) both;
}
.site-preloader-track {
  position: relative;
  width: min(210px, 54vw);
  height: 1px;
  overflow: hidden;
  background: rgba(255,255,255,.16);
}
.site-preloader-track::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--coral), transparent);
  transform: translateX(-100%);
  animation: peLoaderLine 1.35s ease-in-out infinite;
}
/* Fallback CSS indipendente da JavaScript: dissolve comunque entro 4 secondi. */
.site-preloader {
  animation: peLoaderEmergencyExit 700ms cubic-bezier(.22,1,.36,1) 3.3s forwards;
}
@keyframes peLoaderEmergencyExit {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

html.site-loaded .site-preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 760ms cubic-bezier(.22,1,.36,1),
    visibility 0s linear 760ms;
}
@keyframes peLoaderLogo {
  from { opacity: 0; transform: translate3d(0,12px,0) scale(.985); filter: blur(5px) drop-shadow(0 18px 46px rgba(0,0,0,.24)); }
  to { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 18px 46px rgba(0,0,0,.24)); }
}
@keyframes peLoaderLine {
  0% { transform: translateX(-110%); }
  55%, 100% { transform: translateX(110%); }
}
@media (max-width: 760px) {
  .site-preloader-inner { width: min(300px, calc(100vw - 52px)); gap: 23px; }
  .site-preloader-logo { width: min(100%, 280px); }
  .site-preloader-track { width: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader-logo,
  .site-preloader-track::after { animation: none; }
  #app,
  .site-preloader { transition-duration: 180ms; }
}


/* ==================================================================== *
 * FINAL MAC/DESKTOP TITLE GEOMETRY + 0–100% PRELOADER
 * Standard desktop screens reproduce the approved ultrawide composition:
 * PROTOCOLLO on the first line and ESCLUSIVA immediately below, right aligned.
 * True ultrawide and mobile keep their existing layouts.
 * ==================================================================== */
@media (min-width: 861px) and (max-aspect-ratio: 2 / 1) {
  .hero-display {
    top: clamp(88px, 10.2vh, 122px);
    font-size: clamp(118px, 10.7vw, 168px);
    line-height: .76;
    letter-spacing: -.074em;
  }
  .hero-display span:last-child {
    margin: 0;
    padding-right: clamp(4px, 2.2vw, 34px);
    text-align: right;
  }
}

/* The reveal state is set directly by the preloader as well, so the title
   can never remain hidden if the motion module finishes booting later. */
html.site-loaded .hero-display span {
  opacity: 1;
  transform: translate3d(0,0,0);
}

.site-preloader {
  animation: peLoaderEmergencyExit 700ms cubic-bezier(.22,1,.36,1) 5s forwards;
}
.site-preloader-inner {
  gap: 24px;
}
.site-preloader-progress-head {
  width: min(280px, 64vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: -12px;
  color: rgba(255,255,255,.72);
  font-size: 11px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-preloader-progress-head strong {
  min-width: 42px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.site-preloader-track {
  width: min(280px, 64vw);
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.16);
}
.site-preloader-track::after {
  display: none !important;
  content: none !important;
}
.site-preloader-fill {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--coral-deep), var(--coral-light));
  box-shadow: 0 0 18px rgba(216,148,120,.42);
  animation: peLoaderFill 4s linear forwards;
  transform-origin: left center;
}
@keyframes peLoaderFill {
  from { width: 0; }
  to { width: 100%; }
}
@media (max-width: 760px) {
  .site-preloader-progress-head,
  .site-preloader-track { width: min(220px, 66vw); }
  .site-preloader-progress-head { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-preloader-fill { animation-timing-function: linear; }
}