/* Gasperi Performance Lab
   Palette: porcelain / ink navy / cobalt
   Type: Barlow Condensed (display) · Barlow (text) · IBM Plex Mono (labels)
   Layout: dark photo-hero, marquee, editorial index rows */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/plex-mono-500.woff2') format('woff2')}

:root{
  --paper:#eff2f1;
  --ink:#101d2c;
  --blue:#2244d6;
  --blue-deep:#1b36ab;
  --blue-bright:#6ea6e0;
  --steel:#54616c;
  --line:#c9d1d5;
  --card:#fbfcfc;
  --max:1200px;
  --header-h:4.25rem;
  --display:'Barlow Condensed',Arial,sans-serif;
  --text:'Barlow',Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.wrap{width:min(var(--max),100% - 2.5rem);margin-inline:auto}

/* voices */
.mono,.eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.eyebrow{color:var(--blue);margin:0 0 1.1rem}

/* signature ruler */
.ruler{height:16px;border-bottom:2px solid currentColor;color:var(--ink);opacity:.8;
  background:
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 9px) left bottom/100% 7px no-repeat,
    repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 45px) left bottom/100% 16px no-repeat}
.ruler.faint{color:var(--steel);opacity:.45}
.ruler.on-dark{color:#8b9aab;opacity:.65}
.ruler.on-blue{color:#fff;opacity:.7}

/* skip */
.skip{position:absolute;left:-999px;top:.5rem;z-index:99;background:#fff;color:var(--ink);padding:.6rem 1rem;font-family:var(--mono);font-size:.8rem}
.skip:focus{left:.5rem}

/* header */
.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 24px rgba(16,29,44,.08)}
.nav{min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{text-decoration:none;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.4rem;line-height:1}
.brand span{display:block;font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.3em;color:var(--steel);margin-top:.2rem}
/* menu toggle: a dumbbell that tilts 45° while the plates slide to the
   ends of the bar — stands in for the usual hamburger/X */
.menu-button{display:none;border:1px solid var(--ink);background:none;color:var(--ink);width:2.9rem;height:2.9rem;padding:0;cursor:pointer;touch-action:manipulation}
.mb-icon{display:block;width:1.55rem;height:1.55rem;margin:auto;overflow:visible;transition:transform .5s cubic-bezier(.3,1.45,.35,1)}
.mb-icon path{stroke:currentColor;stroke-width:2.1;stroke-linecap:round;fill:none;transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.45,.35,1)}
.menu-button[aria-expanded="true"] .mb-icon{transform:rotate(45deg)}
.menu-button[aria-expanded="true"] .mb-p1{transform:translateX(-1.5px)}
.menu-button[aria-expanded="true"] .mb-p2{transform:translateX(-3.2px)}
.menu-button[aria-expanded="true"] .mb-p3{transform:translateX(3.2px)}
.menu-button[aria-expanded="true"] .mb-p4{transform:translateX(1.5px)}
.nav-links{display:flex;align-items:center;gap:1.7rem}
.nav-links a{text-decoration:none;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.nav-links a:not(.button):hover,.nav-links a[aria-current]{color:var(--blue)}
.nav-links a[aria-current]{border-bottom:2px solid var(--blue);padding-bottom:.2rem}

/* buttons */
.button{position:relative;z-index:0;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;min-height:3rem;padding:.7rem 1.5rem;border:1px solid var(--blue);background:var(--blue);color:#fff;text-decoration:none;font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;transition:color .2s,border-color .2s}
.button::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.button:hover::before{transform:scaleX(1)}
.button:hover{border-color:var(--ink)}
.button.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.button.ghost::before{background:var(--ink)}
.button.ghost:hover{color:var(--paper)}
.button.on-dark{background:transparent;border-color:#fff;color:#fff}
.button.on-dark::before{background:#fff}
.button.on-dark:hover{color:var(--ink);border-color:#fff}
.button.on-blue{background:#fff;border-color:#fff;color:var(--blue-deep)}
.button.on-blue::before{background:var(--ink)}
.button.on-blue:hover{color:#fff;border-color:var(--ink)}
.button.on-blue-ghost{background:transparent;border-color:#fff;color:#fff}
.button.on-blue-ghost::before{background:#fff}
.button.on-blue-ghost:hover{color:var(--blue-deep)}

/* ============ HERO — photo-integrated, dark ============ */
/* mobile: photo on top, unobstructed, fading into ink; text follows below.
   Desktop switches to the side-by-side overlay layout. */
.hero{position:relative;overflow:hidden;background:var(--ink);color:#fff}
/* max-width capped: on phones the box is already narrower than this and
   stays full-bleed; past it (tablets, wide phone landscapes) the box would
   otherwise keep the same height while stretching very wide, and cover
   crops the tall portrait down to just the head to fill that short strip */
.hero-visual{position:relative;margin:0 auto;z-index:0;max-width:28rem;height:min(56vh,30rem);height:min(56svh,30rem)}
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.hero-visual::after{content:'';position:absolute;inset:0 0 -2px;background:linear-gradient(180deg,rgba(16,29,44,.35) 0%,rgba(16,29,44,0) 26%,rgba(16,29,44,0) 56%,rgba(16,29,44,.78) 82%,#101d2c 93%)}
.hero-content{position:relative;z-index:1;margin-top:-2.4rem;padding-bottom:2.8rem}
.hero .eyebrow{color:var(--blue-bright)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;letter-spacing:.015em;margin:0;font-size:clamp(2.4rem,6vw,4rem)}
.hero h1 .line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .line>span{display:block}
.hero h1 em{font-style:normal;color:var(--blue-bright)}
.hero .lead{font-size:clamp(1rem,.95rem + .35vw,1.18rem);line-height:1.55;max-width:30em;color:#c3cdd8;margin:1.2rem 0 0}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

.hero-lab{margin-top:1.6rem}
@media(min-width:600px){
  .hero-lab{margin-top:2.4rem}
}
.hero-quals-line{margin:.8rem 0 0;font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:#8b9aab;white-space:nowrap}
.hero-quals-line b{font-weight:500;color:var(--blue-bright)}

@media(min-width:600px){
  .hero{display:flex;align-items:center;min-height:min(calc(100svh - var(--header-h)),52rem)}
  /* photo pinned to the RIGHT EDGE OF THE CONTENT COLUMN, not the viewport:
     right = the side gutter (0 until the viewport passes --max), so on wide
     screens the portrait stays beside the text instead of drifting off toward
     the far edge. Width capped so object-fit:cover doesn't scale the portrait
     up and crop tighter on every resize. */
  .hero-visual{position:absolute;top:0;bottom:0;left:auto;height:auto;
    right:max(0px,(100% - var(--max)) / 2);width:min(42%,26rem);
    /* feather every edge so the portrait dissolves into the ink instead of
       sitting as a hard rectangle: a wide fade on the text side (left) plus
       softer fades on the other three. Two gradients intersected = all 4 edges. */
    -webkit-mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);
    -webkit-mask-composite:source-in;
    mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 90%,transparent);
    mask-composite:intersect}
  .hero-visual img{object-position:center 28%}
  .hero-visual::after{background:linear-gradient(0deg,rgba(16,29,44,.3),transparent 30%)}
  /* copy lives in the centered content column and stays left-aligned to it;
     the capped child width keeps the text clear of the portrait on the right */
  .hero-content{padding:clamp(3rem,7vw,4.5rem) 0;margin-top:0;max-width:none}
  /* 33rem for readability, but never wider than ~54vw so the copy always
     clears the portrait (≈42vw, pinned right) at narrow split widths */
  .hero .hero-content>*{max-width:min(33rem,54vw)}
}

/* marquee */
.marquee{overflow:hidden;border-bottom:1px solid var(--line);background:var(--paper);padding:.95rem 0}
.marquee-track{display:flex;width:max-content;gap:2.5rem}
.marquee-track>span{display:block;white-space:nowrap;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
@media(prefers-reduced-motion:no-preference){
  .marquee-track{animation:marquee 36s linear infinite}
  @keyframes marquee{to{transform:translateX(calc(-50% - 1.25rem))}}
}

/* ============ sections ============ */
.section{padding-block:clamp(3.5rem,7vw,5.5rem)}
.s-head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:1.6rem}
.s-head .s-label{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.s-head::after{content:'';flex:1;height:1px;background:var(--line);transform:translateY(-.2em)}
.s-head .s-count{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;color:var(--steel)}
.s-title{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;font-size:clamp(1.8rem,3.6vw,2.7rem);margin:0}
.s-intro{font-size:clamp(.98rem,.95rem + .25vw,1.1rem);color:var(--steel);max-width:42em;margin:1rem 0 0}

/* servizi — editorial index rows */
.service-list{margin-top:clamp(2.2rem,5vw,3.6rem);border-top:2px solid var(--ink)}
.service-row{display:grid;gap:.5rem 2.2rem;padding:1.6rem 0 1.8rem;border-bottom:1px solid var(--line)}
.service-row:last-child{border-bottom:2px solid var(--ink)}
.service-row .tag{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.service-row h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;font-size:clamp(1.35rem,2.6vw,1.9rem);margin:0;transition:color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.service-row p{margin:.4rem 0 0;color:var(--steel);max-width:38em}
.service-row:hover h3{color:var(--blue);transform:translateX(.6rem)}
@media(min-width:860px){
  .service-row{grid-template-columns:4.5rem 8rem minmax(0,1fr) 19rem;align-items:center;min-height:9.5rem;padding:1.4rem 0}
  .service-row .tag{padding-top:0}
  .service-row p{margin-top:0}
}

/* animated service pictograms */
.s-icon{display:block;width:44px;height:44px;overflow:visible}
.s-icon .ink{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-icon .blu{stroke:var(--blue);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s-icon .fill-blu{fill:var(--blue);stroke:none}
.icon-bars rect,.icon-group g,.icon-dumbbell .lift{transform-box:fill-box}
.icon-bars rect{transform-origin:bottom}
.icon-group g{transform-origin:center bottom}
@media(min-width:860px){.s-icon{width:48px;height:48px}}

/* chi sono */
.about-copy p{font-size:clamp(.98rem,.95rem + .25vw,1.1rem);color:var(--steel);margin:1.2rem 0 1.8rem;max-width:36em}
.about-grid{display:grid;gap:2.6rem;margin-top:clamp(2rem,4vw,3rem)}
@media(min-width:860px){
  .about-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:5rem;align-items:start}
  .about-grid .record{margin-top:.4rem}
}
.record{border:1px solid var(--ink);background:var(--card)}
.record-title{margin:0;padding:.7rem 1.1rem;font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:var(--paper)}
.record dl{margin:0}
.record .row{display:grid;grid-template-columns:7rem 1fr;gap:1rem;padding:.85rem 1.1rem;border-top:1px solid var(--line)}
.record .row:first-of-type{border-top:0}
.record dt{font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);padding-top:.25rem}
.record dd{margin:0;font-weight:600;font-size:.98rem}

/* CTA */
.cta{background:var(--blue);color:#fff}
.cta .wrap{padding-block:clamp(3.8rem,8vw,6rem)}
.cta .ruler{max-width:22rem;margin-bottom:2rem}
.cta h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;font-size:clamp(2rem,4.5vw,3.2rem);margin:0;max-width:24ch}
.cta h2 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #fff}
.cta p{margin:1.3rem 0 0;max-width:36em;font-size:clamp(.98rem,.95rem + .25vw,1.1rem);color:#dfe6ff}
.cta-actions{display:flex;flex-direction:column;gap:.75rem;margin-top:2.2rem}
@media(min-width:640px){.cta-actions{flex-direction:row;flex-wrap:wrap}}

/* ============ inner pages ============ */
.page-hero{padding-block:clamp(2.8rem,6vw,4.5rem) 0}
.page-hero-grid{display:grid;gap:1.6rem;margin-bottom:2rem}
.page-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;font-size:clamp(2.2rem,6vw,3.6rem);margin:0}
.page-hero .lead{font-size:clamp(.98rem,.95rem + .3vw,1.15rem);line-height:1.55;color:var(--steel);margin:0;max-width:36em}
@media(min-width:860px){
  .page-hero-grid{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:4rem;align-items:end}
  .page-hero .lead{padding-bottom:.5rem}
}

.content-grid{display:grid;gap:2.8rem;padding-block:clamp(2.5rem,6vw,4rem) clamp(4rem,9vw,6.5rem)}
@media(min-width:860px){
  .content-grid{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem;align-items:start}
  .content-grid>aside .photo{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
.content-grid h2{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.95;font-size:clamp(1.35rem,2vw,1.6rem);margin:2.4rem 0 .9rem}
.content-grid h2:first-child{margin-top:0}
.content-grid p,.content-grid li{color:var(--steel)}
.content-grid ul{margin:0;padding:0;list-style:none}
.content-grid li{padding:.7rem 0;border-bottom:1px solid var(--line)}
.content-grid li::before{content:'—';font-family:var(--mono);color:var(--blue);margin-right:.7rem}

/* photo card (about) */
.photo{margin:0;border:1px solid var(--ink);background:var(--card)}
.photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 15%}
.photo figcaption{display:flex;flex-wrap:wrap;gap:.35rem .9rem;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid var(--ink);font-family:var(--mono);font-size:.65rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.photo figcaption b{font-weight:500;color:var(--blue)}

/* credentials */
.credentials{display:grid;gap:.6rem}
.credential{display:flex;align-items:baseline;gap:.9rem;border:1px solid var(--line);background:var(--card);padding:1rem 1.1rem;text-decoration:none;font-weight:600;transition:border-color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.credential::before{content:'PDF';font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;color:#fff;background:var(--blue);padding:.2rem .45rem;flex:none}
.credential:hover{border-color:var(--blue);transform:translateX(.4rem)}

/* contact — channel index rows */
.channel-list{border-top:2px solid var(--ink);margin-top:clamp(2rem,4vw,3rem)}
.channel{display:grid;gap:.2rem 2rem;padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--line);text-decoration:none}
.channel:last-child{border-bottom:2px solid var(--ink)}
.channel small{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);padding-top:.5rem}
.channel strong{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;font-size:clamp(1.25rem,2.6vw,1.6rem);overflow-wrap:anywhere;transition:color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.channel .arrow{font-size:1.5rem;color:var(--steel);justify-self:end;align-self:center;transition:transform .25s cubic-bezier(.2,.7,.2,1),color .2s;display:none}
.channel:hover strong{color:var(--blue);transform:translateX(.6rem)}
.channel:hover .arrow{color:var(--blue);transform:translateX(.5rem)}
@media(min-width:860px){
  .channel{grid-template-columns:6.5rem minmax(0,1fr) auto;align-items:center}
  .channel .arrow{display:block}
}

/* calendly modal */
.calendly-modal{border:1px solid var(--ink);padding:0;width:min(1000px,94vw);height:min(720px,90dvh);background:var(--card);display:none;flex-direction:column}
.calendly-modal[open]{display:flex}
.calendly-modal::backdrop{background:rgba(16,29,44,.72)}
.modal-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--ink);color:var(--paper);padding:.55rem .6rem .55rem 1.1rem}
.modal-bar span{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.modal-close{border:1px solid var(--paper);background:none;color:var(--paper);padding:.45rem .9rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.modal-close:hover{background:var(--paper);color:var(--ink)}
.modal-body{position:relative;flex:1;min-height:0}
.modal-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.calendly-modal iframe{position:relative;width:100%;height:100%;border:0;display:block;background:transparent}
@media(prefers-reduced-motion:no-preference){
  .calendly-modal[open]{animation:modalin .25s cubic-bezier(.2,.7,.2,1)}
  @keyframes modalin{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
}

/* footer */
.site-footer{background:var(--ink);color:#e8edf2;padding:2.8rem 0}
.footer-grid{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.6rem;align-items:flex-end}
.site-footer .brand span{color:#8b9aab}
.footer-grid p{margin:.8rem 0 0;color:#8b9aab;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.footer-links{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer-links a{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.footer-links a:hover{color:var(--blue-bright)}

/* 404 */
.error{min-height:75vh;display:grid;place-items:center;text-align:center;padding-block:3rem}
.error h1{font-family:var(--display);font-weight:700;line-height:.85;font-size:clamp(4rem,16vw,7.5rem);margin:0;color:var(--blue)}
.error p{font-size:1.1rem;color:var(--steel)}
.error .ruler{max-width:16rem;margin:1.5rem auto}

/* ============ motion ============ */
@media(prefers-reduced-motion:no-preference){
  .hero h1 .line>span{transform:translateY(115%);animation:lineup .75s cubic-bezier(.16,.8,.2,1) forwards;animation-delay:.15s}
  .hero h1 .line:nth-child(2)>span{animation-delay:.27s}
  @keyframes lineup{to{transform:none}}
  .hero .fade{opacity:0;animation:fadeup .7s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .eyebrow.fade{animation-delay:.1s}
  .hero .lead.fade{animation-delay:.42s}
  .hero .actions.fade{animation-delay:.54s}
  .hero .hero-lab.fade{animation-delay:.68s}
  @keyframes fadeup{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  .hero-visual img{animation:heroimg 1.4s cubic-bezier(.2,.7,.2,1) both}
  @keyframes heroimg{from{transform:scale(1.07)}to{transform:none}}

  /* service pictograms: enter when the row reveals, replay gently on hover */
  html.js .service-row[data-reveal] .icon-bars rect{transform:scaleY(0)}
  html.js .service-row[data-reveal].in .icon-bars rect{animation:bargrow .5s cubic-bezier(.2,.7,.2,1) forwards}
  html.js .service-row[data-reveal].in .icon-bars .b2{animation-delay:.12s}
  html.js .service-row[data-reveal].in .icon-bars .b3{animation-delay:.24s}
  @keyframes bargrow{to{transform:scaleY(1)}}
  .service-row:hover .icon-bars rect{animation:barpulse .55s cubic-bezier(.3,.6,.3,1)}
  .service-row:hover .icon-bars .b2{animation-delay:.08s}
  .service-row:hover .icon-bars .b3{animation-delay:.16s}
  @keyframes barpulse{0%{transform:scaleY(1)}40%{transform:scaleY(.55)}100%{transform:scaleY(1)}}

  html.js .service-row[data-reveal] .icon-dumbbell .lift{opacity:0}
  html.js .service-row[data-reveal].in .icon-dumbbell .lift{animation:dumbin .6s .15s cubic-bezier(.2,.7,.2,1) forwards}
  @keyframes dumbin{0%{opacity:0;transform:translateY(9px)}60%{opacity:1;transform:translateY(-3px)}100%{opacity:1;transform:none}}
  .service-row:hover .icon-dumbbell .lift{animation:dumblift .7s cubic-bezier(.3,.6,.3,1)}
  @keyframes dumblift{0%{transform:none}35%{transform:translateY(-5px) rotate(-5deg)}70%{transform:translateY(0) rotate(2deg)}100%{transform:none}}

  html.js .service-row[data-reveal] .icon-group g{opacity:0;transform:scale(.5)}
  html.js .service-row[data-reveal].in .icon-group g{animation:popin .45s cubic-bezier(.2,.9,.3,1.3) forwards}
  html.js .service-row[data-reveal].in .icon-group .p2{animation-delay:.12s}
  html.js .service-row[data-reveal].in .icon-group .p3{animation-delay:.24s}
  @keyframes popin{to{opacity:1;transform:scale(1)}}
  .service-row:hover .icon-group g{animation:bob .55s cubic-bezier(.3,.6,.3,1)}
  .service-row:hover .icon-group .p2{animation-delay:.08s}
  .service-row:hover .icon-group .p3{animation-delay:.16s}
  @keyframes bob{0%{transform:none}40%{transform:translateY(-4px)}100%{transform:none}}

  html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1)}
  html.js [data-reveal].in{opacity:1;transform:none}
  html.js .service-row[data-reveal]:nth-child(2),html.js .channel[data-reveal]:nth-child(2){transition-delay:.09s}
  html.js .service-row[data-reveal]:nth-child(3),html.js .channel[data-reveal]:nth-child(3){transition-delay:.18s}
  html.js .channel[data-reveal]:nth-child(4){transition-delay:.27s}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mb-icon,.mb-icon path,.nav-links{transition:none}
  .button::before{display:none}
  .button:hover{background:var(--blue-deep)}
  .service-row:hover h3,.channel:hover strong,.credential:hover{transform:none}
}

/* ============ mobile nav ============ */
@media(max-width:859px){
  .menu-button{display:block}
  .nav-links{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--ink);padding:1rem 1.25rem 1.4rem;display:flex;flex-direction:column;align-items:stretch;gap:.2rem;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-.6rem);transition:opacity .26s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s .32s}
  .nav-links.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .26s ease,transform .32s cubic-bezier(.2,.7,.2,1)}
  .nav-links a{padding:.8rem 0;border-bottom:1px solid var(--line)}
  .nav-links a[aria-current]{border-bottom:1px solid var(--blue);padding-bottom:.8rem}
  .nav-links .button{margin-top:1rem;border-bottom:0}
  @media(prefers-reduced-motion:no-preference){
    .nav-links.open a{animation:navlink .32s cubic-bezier(.2,.7,.2,1) backwards}
    .nav-links.open a:nth-child(2){animation-delay:.05s}
    .nav-links.open a:nth-child(3){animation-delay:.1s}
    .nav-links.open a:nth-child(4){animation-delay:.15s}
    @keyframes navlink{from{opacity:0;transform:translateX(-.5rem)}}
  }
}

/* ≤599px — phones: stacked layout. Portrait full-bleed on top, fading into
   ink, copy below. At ≥600px the hero switches to the side-by-side split. */
@media(max-width:599px){
  /* eyebrow rides the empty band above Alex's head so the copy starts clean */
  .hero .eyebrow{position:absolute;top:1.2rem;left:0;width:100%;padding-inline:1.25rem;margin:0;z-index:2}
  /* qualifications already appear in "Chi sono"; dropped here to avoid a second
     line stacked over the photo */
  .hero-lab{display:none}
  /* full-bleed: no width cap, so the portrait spans edge to edge instead of
     floating as a centered box with ink bands on either side */
  .hero-visual{max-width:none;height:min(50vh,27rem);height:min(50svh,27rem)}
  .hero-visual img{object-position:center 20%}
  .hero-content{position:static;margin-top:1.4rem;padding-bottom:2.2rem}
  .hero .lead{margin-top:.9rem;font-size:.92rem;font-weight:400;line-height:1.5}
  .hero .actions{margin-top:1.4rem;align-items:center;gap:.55rem 1.15rem}
  .hero .actions .button{min-height:2.6rem;padding:.6rem 1.05rem;font-size:.68rem}
  .hero .actions .button.on-dark{border:0;background:transparent;padding:.6rem .1rem;text-decoration:underline;text-underline-offset:.45em;text-decoration-thickness:1px;text-decoration-color:rgba(255,255,255,.5)}
  .hero .actions .button.on-dark::before{display:none}
}

/* ≤859px — mobile rhythm: tighter, more deliberate vertical spacing */
@media(max-width:859px){
  .section{padding-block:3rem}
  .s-head{margin-bottom:1.3rem}
  .s-intro{margin-top:.8rem}
  .service-list{margin-top:1.8rem}
  /* icon and tag share the first line so each row reads as one unit */
  .service-row{grid-template-columns:auto 1fr;column-gap:.85rem;row-gap:.65rem;align-items:center;padding:1.7rem 0 1.9rem}
  .s-icon{width:34px;height:34px}
  .service-row h3,.service-row p{grid-column:1/-1}
  .service-row p{margin:0}
  .about-grid{gap:2rem;margin-top:1.6rem}
  .about-copy p{margin:1rem 0 1.5rem}
  .cta .wrap{padding-block:3.2rem}
  .cta .ruler{max-width:16rem;margin-bottom:1.6rem}
  .cta p{margin-top:1rem}
  .cta-actions{margin-top:1.8rem}
  .site-footer{padding:2.2rem 0}
}

/* ≤480px */
@media(max-width:480px){
  .wrap{width:calc(100% - 1.75rem)}
  .cta-actions .button{width:100%}
  .hero .eyebrow{padding-inline:.875rem}
  .record .row{grid-template-columns:1fr;gap:.25rem}
}