/* =========================================================
   Mobile refinement — loaded last.
   One spacing rhythm for the whole small-screen layout instead of
   per-section clamps: --gap-s / --gap-m / --gap-l are the only
   vertical measures used below, so sections breathe consistently.
   Desktop is untouched.
   ========================================================= */

@media (max-width: 720px) {
  :root {
    --gap-s: 14px;
    --gap-m: 24px;
    --gap-l: 40px;
    --pad-x: 20px;
    --sec-y: 52px;
  }

  /* ---------- shared section rhythm ---------- */
  section { padding: var(--sec-y) var(--pad-x); }
  .container, .container-narrow { padding: 0; }

  h2 { font-size: clamp(29px, 8.2vw, 40px); line-height: 1.06; }
  h3 { font-size: clamp(20px, 5.4vw, 25px); }
  .subhead { font-size: 15px; line-height: 1.55; max-width: none; }
  .eyebrow { font-size: 10.5px; letter-spacing: 0.16em; }

  /* ---------- nav ---------- */
  .nav { padding: 16px var(--pad-x); }
  .nav.scrolled { padding-top: 11px; padding-bottom: 11px; }
  .nav-brand { font-size: 19px; }
  .nav-cta { padding: 8px 14px !important; font-size: 11px; }

  /* ---------- globe hero ---------- */
  .globe-hero {
    min-height: 88svh;
    /* Push the copy into the lower third so the globe reads on its own */
    justify-content: flex-end;
    padding: 92px var(--pad-x) 92px;
  }
  .globe-inner { gap: var(--gap-s); max-width: none; }
  /* Tighter scrim: it sat over the globe's middle and flattened it */
  .globe-inner::before { width: 128%; height: 132%; top: 54%; }
  .globe-name { font-size: clamp(38px, 11.5vw, 60px); line-height: 1.04; }
  .globe-intro { font-size: 14.5px; line-height: 1.58; max-width: 40ch; }
  .globe-cta { gap: 10px; margin-top: 4px; width: 100%; }
  .globe-cta .btn { flex: 1 1 auto; justify-content: center; min-width: 44%; }
  .globe-scroll { bottom: 14px; }
  .globe-scroll .rail { height: 30px; }

  /* ---------- quote hero ---------- */
  .hero { min-height: auto; padding: 58px var(--pad-x) var(--sec-y); }
  .hero-meta { font-size: 10px; gap: 6px; }
  .hero-main { gap: var(--gap-m); padding: var(--gap-m) 0; margin: 0; }
  .hero-title { margin-top: var(--gap-s) !important; font-size: clamp(27px, 7.6vw, 38px); max-width: none; }
  .hero-tagline { margin-top: var(--gap-s); font-size: 14.5px; max-width: none; }
  .hero-main .btn { flex: 1 1 auto; justify-content: center; }
  .hero-main > div > div:last-child { margin-top: var(--gap-m) !important; gap: 10px !important; }
  .hero-photo { margin: 0 !important; aspect-ratio: 4 / 3; }
  /* Crop from the bottom, never through the face */
  .hero-photo img { object-position: 50% 14%; }
  .hero-footer { padding-top: var(--gap-s); margin-top: var(--gap-m); gap: var(--gap-s); }
  .hero-footer-item { font-size: 10px; }
  .hero-footer-item strong { font-size: 14px; }
  .scroll-indicator { display: none; }

  /* ---------- lyteboard ---------- */
  #lyteboard { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
  .lyteboard-wrap { gap: var(--gap-m); }
  .lyteboard-content h2 { margin: var(--gap-s) 0 var(--gap-s); }
  .lyteboard-content .subhead { margin-bottom: var(--gap-s); }
  .lyteboard-cta { gap: 10px; margin-top: 4px; }
  .lyteboard-cta .btn { flex: 1 1 auto; justify-content: center; }
  .lyteboard-mockup { aspect-ratio: 16 / 10; }
  .lyteboard-logo-plate { aspect-ratio: 16 / 9; }

  /* ---------- experience (scrolly) ---------- */
  .exp-sticky { padding-bottom: 22px !important; }
  .exp-cards { min-height: 48vh !important; }

  /* ---------- formazione (mobile-only block) ---------- */
  .formazione-mobile { padding: var(--sec-y) 0 !important; }
  .formazione-mobile .container { padding: 0 var(--pad-x); }
  .formazione-mobile .formazione-items { gap: var(--gap-s); margin-top: var(--gap-s); }

  /* ---------- skills ---------- */
  .skills-header { margin-bottom: var(--gap-l); }
  .skills-header .subhead { margin-top: var(--gap-s) !important; }
  .skills-grid { grid-template-columns: 1fr; gap: 12px; }
  .skill-card { padding: 22px; }
  .skill-card-icon { width: 38px; height: 38px; font-size: 16px; margin-bottom: var(--gap-s); }
  .skill-card h3 { font-size: 19px; margin-bottom: 9px; }
  .skill-card p { font-size: 13.5px; }
  .skill-card .skill-list { padding-top: var(--gap-s); gap: 5px; }
  .skill-card .skill-list li { font-size: 10.5px; padding: 4px 9px; }

  /* ---------- values ---------- */
  .values-intro { margin-bottom: var(--gap-l); }
  .values-list { grid-template-columns: 1fr; }
  .value { padding: var(--gap-m) 0; }
  .value:not(:last-child) { padding-right: 0; }
  .value-num { margin-bottom: 10px; }
  .value p { font-size: 14px; }

  /* ---------- confindustria ---------- */
  .confindustria { padding: var(--sec-y) var(--pad-x) !important; }
  .confindustria-inner { padding: 30px 22px; }
  .confindustria-logo { width: 62px; height: 62px; margin-bottom: var(--gap-s); }
  .confindustria h2 { font-size: clamp(25px, 7.2vw, 34px); margin-bottom: var(--gap-s); }
  .confindustria p { font-size: 14.5px; }

  /* ---------- contact ---------- */
  .contact { padding-top: var(--sec-y) !important; padding-bottom: var(--sec-y) !important; }
  .contact-grid { gap: var(--gap-l); }
  .contact-intro h2 { margin-bottom: var(--gap-s); }
  .contact-intro p { font-size: 15px; margin-bottom: var(--gap-m); }
  .contact-direct { padding-top: var(--gap-s); gap: 11px; font-size: 12px; }
  form.contact-form { padding: 22px 20px; gap: var(--gap-s); }
  .form-field input, .form-field textarea, .form-field select { font-size: 16px; padding: 13px 14px; }
  .form-field textarea { min-height: 104px; }
  .form-submit { width: 100%; padding: 15px 22px; }
  .form-consent { font-size: 12px; }

  /* ---------- footer ---------- */
  footer { padding: var(--gap-m) var(--pad-x); flex-direction: column; align-items: flex-start; gap: var(--gap-s); font-size: 10.5px; }
  .footer-legal { gap: 14px 18px; }

  /* ---------- cookie banner ---------- */
  .cookie-banner { padding: 18px; gap: 12px; }

  /* ---------- performance ---------- */
  /* Two fixed full-viewport composited layers cost real frames on a phone and
     buy almost nothing at this size: the aurora only tracks a pointer that
     isn't there, and the grain is invisible at mobile DPI. */
  .aurora { display: none; }
  .grain { display: none; }
  .skill-card { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.045); }
  form.contact-form { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.04); }
  .confindustria-inner { backdrop-filter: none; }
}

/* Very small phones — shave the horizontal inset and the largest type */
@media (max-width: 380px) {
  :root { --pad-x: 16px; --sec-y: 46px; }
  .globe-name { font-size: 34px; }
  .hero-title { font-size: 25px; }
  h2 { font-size: 26px; }
}

/* Landscape phones: the globe hero must not eat the whole viewport */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .globe-hero { min-height: auto; padding: 76px var(--pad-x, 20px) 44px; }
  .globe-scroll { display: none; }
}