/* ===========================================================
   home.css — home page only (index.html). Loaded after style.css.
   Palette A = current navy + orange (default).
   Other pages never load this file.
   =========================================================== */

:root {
  --h-ink: #f2f5fa;            /* strong text */
  --h-mute: #9eabbf;           /* secondary text */
  --h-soft: #c9d3e1;           /* body text */
  --h-line: rgba(231, 237, 247, 0.13);
  --h-display: 'Sora', 'Inter', system-ui, sans-serif;
  --h-display-w: 700;
  --h-track: -0.045em;
  --h-panel: var(--accent-500);       /* invito panel */
  --h-panel-ink: #06101f;
  --h-panel-soft: rgba(6, 16, 31, 0.78);
  --h-btn-ink: #ffffff;
  --h-grain: 0.045;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
}


/* -------------------- Paper grain (static, below the content) -------------------- */
body::selection { background: var(--accent-500); }
main#main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--h-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* -------------------- Background per section (sectionBg.js) -------------------- */
body[data-bg="assaggio-servizi"] { --bg-c1: rgba(70, 160, 255, 0.16); --bg-c2: rgba(245, 135, 46, 0.14); --bg-c3: rgba(120, 190, 255, 0.10); --bg-c4: rgba(26, 58, 102, 0.55); }
body[data-bg="assaggio-servizi"]::before { translate: 12% 4%; }
body[data-bg="assaggio-servizi"]::after  { translate: -8% -3%; }
body[data-bg="invito"] { --bg-c1: rgba(245, 135, 46, 0.36); --bg-c2: rgba(36, 77, 132, 0.45); --bg-c3: rgba(255, 194, 122, 0.24); --bg-c4: rgba(26, 58, 102, 0.5); }
body[data-bg="invito"]::before { translate: 6% 10%; }
body[data-bg="invito"]::after  { translate: -3% -6%; }

/* -------------------- Animated background (js/modules/bgField.js) --------------------
   Fixed 2D canvas behind every section; main (z-index 10) stays on top. */
.bg-field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.bg-field.is-on { opacity: 1; }

/* -------------------- Word reveal (homeFx.js splits the headings) -------------------- */
.fx-w { display: inline-block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; vertical-align: top; }
.fx-w > span { display: inline-block; will-change: transform; }

/* ===================== HERO ===================== */
.hx {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-top: 7.25rem;
  overflow: hidden;
  overflow: clip;
}
.hx-inner {
  position: relative;
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  flex: 1 0 auto;
}
@media (min-width: 640px) { .hx-inner { padding: 0 2.5rem; } }

.hx-kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  color: var(--accent-300);
}
.hx-kicker::before {
  content: "";
  width: 2.75rem;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
  animation: hx-rule 1.2s .5s var(--ease-out) both;
}
@keyframes hx-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hx .hero-headline.hero-headline--tri {
  position: relative;
  z-index: 3;
  margin-top: 1.4rem;
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(2.55rem, 11.2vw, 4.6rem);
  line-height: .98;
  letter-spacing: var(--h-track);
  color: var(--h-ink);
}
.hx .hero-headline .word { padding: 0 .06em .14em 0; margin-bottom: -.14em; }
/* The title text is visible from the first paint: the words only rise a little
   (no clipping, no opacity 0), so the main content is not held back by the intro. */
.hx .hero-headline .word { overflow: visible; }
.hx .hero-headline .word span { transform: translateY(.3em); }
.hx-line { display: block; width: fit-content; }
/* staircase indents in em: they scale with the type, never push into the photo */
.hx-line--2 { padding-left: .55em; }
.hx-line--3 { padding-left: .2em; }
@media (min-width: 1024px) {
  .hx .hero-headline.hero-headline--tri { font-size: clamp(3.3rem, 6.4vw, 6.4rem); line-height: .96; }
  .hx-line { white-space: nowrap; }
  .hx-line--2 { padding-left: .9em; }
  .hx-line--3 { padding-left: .3em; }
}

.hx-mark { position: relative; display: inline-block; }
.hx-swash {
  position: absolute;
  left: 2%;
  right: 0;
  bottom: -.02em;
  width: 98%;
  height: .2em;
  overflow: visible;
  pointer-events: none;
}
.hx-swash path {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 4.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Portrait: the whole photo at its natural 768x1365 ratio (arms visible),
   rounded only at the top. Seal + caption sit in their own row underneath,
   so nothing overlaps the photo or the text. */
.hx-portrait {
  position: relative;
  z-index: 1;
  width: min(72%, 20rem);
  margin: 2.75rem 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: .9rem;
}
.hx-ph {
  grid-column: 1 / -1;
  position: relative;
  aspect-ratio: 768 / 1365;
  overflow: hidden;
  border-radius: 999px 999px 1.25rem 1.25rem / 38% 38% 1.25rem 1.25rem;
  background: var(--navy-800);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
.hx-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  will-change: transform;
}
.hx-seal {
  position: relative;
  margin-top: .9rem;
  width: 4.75rem;
  height: 4.75rem;
  border-radius: 50%;
  background: var(--navy-950);
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px var(--h-line);
}
.hx-seal-ring {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  animation: hx-spin 22s linear infinite;
}
.hx-seal-ring text {
  font: 600 8.4px/1 'Inter', system-ui, sans-serif;
  letter-spacing: .12em;
  fill: var(--h-soft);
}
.hx-seal-logo { width: 42%; height: auto; }
@keyframes hx-spin { to { transform: rotate(360deg); } }

.hx-cap {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-top: .9rem;
  font-size: .8rem;
  color: var(--h-mute);
}
.hx-cap-name { color: var(--h-ink); font-weight: 600; }
.hx-cap-role { color: var(--accent-400); letter-spacing: .06em; }

/* Copy column */
.hx-copy {
  position: relative;
  z-index: 2;
  max-width: 36rem;
  margin-top: 2.25rem;
  padding-left: 1.25rem;
}
.hx-copy::before {
  content: "";
  position: absolute;
  left: 0;
  top: .4rem;
  bottom: .4rem;
  width: 1px;
  background: linear-gradient(var(--accent-500), var(--h-line));
  transform-origin: top;
  animation: hx-drop 1.4s 1s var(--ease-out) both;
}
@keyframes hx-drop { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.hx-rot { color: var(--h-mute); }
.hx-lead { margin-top: 1.1rem; font-size: 1.08rem; line-height: 1.7; color: var(--h-soft); }
.hx-ctas { margin-top: 1.9rem; display: flex; flex-wrap: wrap; gap: .85rem; }

/* Mobile order: title, copy, portrait */
.hx-inner { display: flex; flex-direction: column; }
.hx-kicker { order: 1; }
.hx-title { order: 2; }
.hx-copy { order: 3; }
.hx-portrait { order: 4; }

/* Desktop: two areas that never overlap. Left = kicker, title, copy
   (all on the same left edge); right = portrait column. */
@media (min-width: 1024px) {
  .hx { padding-top: 7.5rem; }
  .hx-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(14rem, 22vw, 23rem);
    grid-template-areas: "kicker portrait" "title portrait" "copy portrait";
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(3rem, 6vw, 7rem);
    align-items: start;
  }
  .hx-kicker { grid-area: kicker; }
  .hx-title { grid-area: title; }
  .hx-copy { grid-area: copy; margin-top: 2.5rem; }
  .hx-portrait { grid-area: portrait; width: 100%; margin: 0; align-self: start; }
  .hx-seal { width: 5.25rem; height: 5.25rem; }
}

/* Hero buttons (also used for "Tutti i servizi") */
.hx-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.25rem;
  padding: .5rem .55rem .5rem 1.6rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
}
.hx-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.hx-btn:hover::before, .hx-btn:focus-visible::before { transform: translateY(0); }
.hx-btn--main { background: var(--accent-500); color: var(--h-panel-ink); }
.hx-btn--main::before { background: var(--h-ink); }
.hx-btn--line { padding-right: 1.6rem; color: var(--h-ink); box-shadow: inset 0 0 0 1px var(--h-line); }
.hx-btn--line::before { background: var(--h-ink); }
.hx-btn--line:hover, .hx-btn--line:focus-visible { color: var(--navy-950); }
.hx-btn-dot {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--h-panel-ink);
  color: var(--accent-400);
  transition: transform .5s var(--ease-out);
}
.hx-btn:hover .hx-btn-dot { transform: rotate(-45deg); }
.hx-btn:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 3px; }

/* Service band */
.hx-band {
  position: relative;
  z-index: 2;
  margin-top: 3.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid var(--h-line);
  border-bottom: 1px solid var(--h-line);
  overflow: hidden;
  white-space: nowrap;
}
.hx-band-track { display: inline-flex; align-items: center; gap: 1.6rem; will-change: transform; animation: hx-band 46s linear infinite; }
.hx-band.is-js .hx-band-track { animation: none; }
.hx-band span {
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  letter-spacing: -.02em;
  color: var(--h-ink);
}
.hx-band span.is-outline { color: transparent; -webkit-text-stroke: 1px var(--h-soft); }
.hx-band i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent-500); flex: none; }
@keyframes hx-band { to { transform: translateX(-50%); } }
.scroll-cue { display: none; }

/* ===================== SERVIZI ===================== */
.sv { padding: 7rem 0 6rem; }
.sv-inner { max-width: 88rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .sv-inner { padding: 0 2.5rem; } }
.sv-head { max-width: 46rem; margin-bottom: 3.5rem; }
.sv .reveal-up.font-display { font-family: var(--h-display); font-weight: var(--h-display-w); letter-spacing: -.03em; }

.sv-list { position: relative; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line); }
.sv-row { position: relative; border-bottom: 1px solid var(--h-line); }
.sv-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .8s var(--ease-out);
}
.sv-row.is-active::after { transform: scaleX(1); }
.sv-link {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: .7rem .6rem;
  padding: 1.7rem 0;
  color: inherit;
  text-decoration: none;
}
.sv-num {
  padding-top: .55rem;
  font-family: var(--h-display);
  font-size: .82rem;
  font-weight: 600;
  color: var(--accent-400);
  font-variant-numeric: tabular-nums;
}
.sv-title {
  margin: 0;
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(1.85rem, 7.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: var(--h-track);
  color: var(--h-ink);
  transition: color .5s var(--ease-out), transform .7s var(--ease-out);
}
.sv-body { grid-column: 2; display: flex; flex-direction: column; gap: .6rem; max-width: 34rem; transition: opacity .5s ease; }
.sv-desc { color: var(--h-soft); font-size: .98rem; line-height: 1.65; }
.sv-more { color: var(--accent-400); font-weight: 600; font-size: .9rem; }
.sv-arrow { display: none; }
.sv-float { display: none; }

/* Active row (set by homeFx.js; without JS every row stays fully lit) */
.sv-list.is-js .sv-row:not(.is-active) .sv-title { color: var(--h-mute); }
.sv-list.is-js .sv-row:not(.is-active) .sv-body { opacity: .7; }
.sv-row.is-active .sv-title { transform: translateX(.6rem); }
.sv-link:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 4px; border-radius: .5rem; }

@media (min-width: 1024px) {
  .sv-head { margin-bottom: 4.5rem; }
  .sv-link {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(15rem, 23rem) 3.5rem;
    align-items: center;
    gap: 2rem;
    padding: 2.4rem 0;
  }
  .sv-num { align-self: start; padding-top: 1.1rem; }
  .sv-title { font-size: clamp(2.6rem, 4.6vw, 4.6rem); }
  .sv-body { grid-column: 3; }
  .sv-row.is-active .sv-title { transform: translateX(calc(1.5rem + var(--mx, 0px))) skewX(var(--sk, 0deg)); }
  .sv-arrow {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--h-line);
    color: var(--h-ink);
    transform: rotate(-45deg);
    transition: transform .6s var(--ease-out), background-color .4s ease, color .4s ease;
  }
  .sv-row.is-active .sv-arrow { transform: rotate(0); background: var(--accent-500); color: var(--h-panel-ink); box-shadow: none; }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .sv-float {
    display: block;
    position: absolute;
    top: 0; left: 0;
    z-index: 1;
    width: 19rem;
    aspect-ratio: 16 / 10;
    border-radius: 1rem;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    box-shadow: 0 30px 60px -25px rgba(0, 0, 0, .75);
  }
  .sv-float img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: brightness(.62) saturate(.9); }
}
.sv-foot { margin-top: 3rem; }

/* ===================== INVITO ===================== */
.iv { padding: 3rem 0 6rem; }
.iv-panel {
  position: relative;
  overflow: hidden;
  background: var(--h-panel);
  color: var(--h-panel-ink);
  padding: clamp(4.5rem, 12vw, 10rem) 1.25rem;
  clip-path: inset(0 0 round 0);
}
@media (min-width: 640px) { .iv-panel { padding-left: 2.5rem; padding-right: 2.5rem; } }
.iv-inner { position: relative; z-index: 2; max-width: 88rem; margin: 0 auto; }
.iv-title {
  max-width: 14ch;
  margin: 0;
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(2.5rem, 10vw, 7.4rem);
  line-height: .98;
  letter-spacing: var(--h-track);
  color: var(--h-panel-ink);
}
.iv-em {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: var(--iv-u, 100%) .07em;
}
.iv-text { max-width: 34rem; margin-top: 1.6rem; font-size: 1.1rem; line-height: 1.65; color: var(--h-panel-soft); }
.iv-ctas { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.4rem; }
.iv-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  min-height: 3.5rem;
  padding: .5rem .6rem .5rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: color .45s var(--ease-out);
}
.iv-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
.iv-btn:hover::before, .iv-btn:focus-visible::before { transform: scaleX(1); }
.iv-btn--main { background: var(--h-panel-ink); color: var(--h-btn-ink); }
.iv-btn--main::before { background: var(--navy-700); }
.iv-btn--line { padding-right: 1.7rem; color: var(--h-panel-ink); box-shadow: inset 0 0 0 1.5px var(--h-panel-ink); }
.iv-btn--line::before { background: var(--h-panel-ink); }
.iv-btn--line:hover, .iv-btn--line:focus-visible { color: var(--h-btn-ink); }
.iv-btn:focus-visible { outline: 3px solid var(--h-panel-ink); outline-offset: 3px; }
.iv-btn-dot {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--accent-500);
  color: var(--h-panel-ink);
  transition: transform .5s var(--ease-out);
}
.iv-btn:hover .iv-btn-dot { transform: translateX(.25rem) rotate(-45deg); }

.iv-rings {
  position: absolute;
  right: -18%;
  bottom: -30%;
  width: min(44rem, 110vw);
  height: auto;
  z-index: 1;
  pointer-events: none;
  animation: hx-spin 80s linear infinite;
}
.iv-rings circle { fill: none; stroke: var(--h-panel-ink); stroke-opacity: .16; stroke-width: 1; stroke-dasharray: 4 9; }
@media (min-width: 1024px) { .iv-rings { right: -6%; bottom: -40%; } }
.iv-rocket {
  position: absolute;
  z-index: 1;
  right: 12%;
  top: 14%;
  width: 3.5rem;
  height: auto;
  opacity: .9;
  animation: iv-float 6s ease-in-out infinite;
}
@media (max-width: 639px) { .iv-rocket { right: 1.25rem; top: 1.5rem; width: 2.5rem; } }
@keyframes iv-float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-6px, -14px) rotate(-6deg); }
}

/* -------------------- No GSAP: keep everything visible -------------------- */
html.no-gsap .hx-ph img { transform: none; }

/* -------------------- Reduced motion -------------------- */
@media (prefers-reduced-motion: reduce) {
  .hx-kicker::before, .hx-copy::before { animation: none; }
  .hx-seal-ring, .iv-rings, .iv-rocket, .hx-band-track { animation: none; }
  .hx-btn::before, .iv-btn::before, .sv-title, .sv-row::after { transition: none; }
}

/* ===========================================================
   LAVORI page (lavori.html, <main class="pg-lav">). The section's own
   rules live inline in lavori.html after this file, so every selector
   here starts with main.pg-lav to win without touching that block.
   =========================================================== */
main:is(.pg-lav, .pg-srv, .pg-chi, .pg-con, .pg-svc) .pg-head { padding-top: 9.5rem; }
main:is(.pg-lav, .pg-srv, .pg-chi, .pg-con, .pg-svc) .pg-title {
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(2.6rem, 8vw, 6.6rem);
  line-height: .98;
  letter-spacing: var(--h-track);
  max-width: 14ch;
  margin-bottom: 1.75rem;
}
main:is(.pg-lav, .pg-srv, .pg-chi, .pg-con, .pg-svc) .pg-head p.text-lg { color: var(--h-soft); font-size: 1.12rem; }

/* Demo sites: one big editorial row each, stage and text alternate sides */
main.pg-lav .lav__head { max-width: 48rem; }
main.pg-lav .lav__title {
  font-family: var(--h-display);
  font-size: clamp(2.1rem, 5vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.04em;
}
main.pg-lav .lav__grid { display: block; counter-reset: lav; border-bottom: 1px solid var(--h-line); }
main.pg-lav .lav__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding: 2.75rem 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--h-line);
  border-radius: 0;
  overflow: visible;
  transform: none;
  counter-increment: lav;
  position: relative;
}
main.pg-lav .lav__card::after {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  height: 1px; width: 100%;
  background: var(--accent-500);
  transform: scaleX(var(--lav-line, 0));
  transform-origin: left center;
}
main.pg-lav .lav__shot { border: 0; border-radius: 1.25rem; overflow: hidden; }
main.pg-lav .lav__stage { transform-style: preserve-3d; will-change: transform; }
main.pg-lav .lav__laptop, main.pg-lav .lav__phone { will-change: transform; }
main.pg-lav .lav__body { padding: 0; }
main.pg-lav .lav__body::before {
  content: counter(lav, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-family: var(--h-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-400);
}
main.pg-lav .lav__name {
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(2.3rem, 5vw, 4.2rem);
  line-height: 1;
  letter-spacing: var(--h-track);
  color: var(--h-ink);
  margin: .35rem 0 1.25rem;
}
@media (min-width: 900px) {
  main.pg-lav .lav__card {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: center;
    padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  }
  main.pg-lav .lav__card:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
  main.pg-lav .lav__card:nth-child(even) .lav__shot { order: 2; }
}

/* Provalo qui: editorial tab list + panel with a light that follows the mouse */
main.pg-lav .prova__title {
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 16ch;
}
main.pg-lav .prova__list { counter-reset: tab; gap: 0; border-top: 1px solid var(--h-line); }
main.pg-lav .prova__tab {
  counter-increment: tab;
  border-radius: 0;
  border-bottom: 1px solid var(--h-line);
  padding: 1.35rem 1rem 1.35rem 1.4rem;
  min-height: 44px;
}
main.pg-lav .prova__tab.is-active, main.pg-lav .prova__tab:hover { background: rgba(255, 255, 255, .025); }
main.pg-lav .prova__tabName { font-size: 1.2rem; }
main.pg-lav .prova__tabName::before {
  content: counter(tab, decimal-leading-zero);
  margin-right: .75rem;
  font-size: .8rem;
  color: var(--accent-400);
  vertical-align: .15em;
}
main.pg-lav .prova__panel {
  position: relative;
  border-radius: 1.25rem;
  background:
    radial-gradient(28rem circle at var(--px, 80%) var(--py, 0%), rgba(245, 135, 46, .10), transparent 60%),
    rgba(8, 18, 38, .82);
  box-shadow: inset 0 2px 0 var(--accent-500), 0 30px 60px -30px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
  main.pg-lav .lav__card::after { transform: scaleX(1); }
}main.pg-lav .lav__piuTit { min-height: 44px; }

/* ===========================================================
   SERVIZI page (servizi.html, <main class="pg-srv">)
   =========================================================== */
/* 4 services: big numbered editorial rows with a preview picture */
main.pg-srv .srv-list { counter-reset: srv; border-bottom: 1px solid var(--h-line); }
main.pg-srv .srv-row {
  counter-increment: srv;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  padding: 2.75rem 0;
  border-top: 1px solid var(--h-line);
}
main.pg-srv .srv-row::before {
  content: counter(srv, decimal-leading-zero);
  font-family: var(--h-display);
  font-size: .85rem;
  font-weight: 600;
  color: var(--accent-400);
}
main.pg-srv .srv-pic {
  margin: 0;
  overflow: hidden;
  border-radius: 1.1rem;
  aspect-ratio: 16 / 10;
  background: var(--navy-800);
}
main.pg-srv .srv-pic img { width: 100%; height: 116%; object-fit: cover; display: block; will-change: transform; transition: scale .9s var(--ease-out); }
main.pg-srv .srv-row:hover .srv-pic img { scale: 1.05; }
main.pg-srv .srv-row h3 {
  font-family: var(--h-display);
  font-weight: var(--h-display-w);
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: var(--h-track);
  margin-bottom: 1rem;
}
main.pg-srv .srv-row p.text-slate-400 { color: var(--h-soft); font-size: 1.05rem; max-width: 40rem; }
main.pg-srv .srv-row ul { font-size: .95rem; }
main.pg-srv .srv-row a { min-height: 44px; }
@media (min-width: 1024px) {
  main.pg-srv .srv-row {
    grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 24rem);
    column-gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    padding: 4rem 0;
  }
  main.pg-srv .srv-row::before { grid-column: 1; grid-row: 1; padding-top: 1rem; }
  main.pg-srv .srv-row [data-tilt-inner] { grid-column: 2; grid-row: 1; }
  main.pg-srv .srv-pic { grid-column: 3; grid-row: 1; }
}

/* Come lavoro: vertical path, the line draws itself while scrolling */
main.pg-srv #come-lavoro { background: transparent; }
main.pg-srv .srv-path { padding: 0; }
main.pg-srv .srv-path .timeline-line {
  display: block;
  left: 27px; right: auto; top: 28px; bottom: 28px;
  width: 2px; height: auto;
}
main.pg-srv .srv-path .timeline-line-fill {
  width: 100% !important;
  transform: scaleY(var(--tl, 0));
  transform-origin: top center;
}
main.pg-srv .srv-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 1.5rem;
  align-items: start;
  padding-bottom: 3rem;
}
main.pg-srv .srv-step:last-child { padding-bottom: 0; }
main.pg-srv .srv-step .timeline-step-dot { background: var(--navy-900); transition: box-shadow .4s ease, border-color .4s ease, transform .5s var(--ease-out); }
main.pg-srv .srv-step.is-on .timeline-step-dot { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(245, 135, 46, .18); border-color: var(--accent-400); }
main.pg-srv .srv-step-txt { padding-top: .35rem; }
main.pg-srv .srv-step-txt p.font-display {
  font-size: clamp(1.45rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--h-mute);
  transition: color .5s ease;
}
main.pg-srv .srv-step.is-on .srv-step-txt p.font-display { color: var(--h-ink); }
main.pg-srv .srv-step-txt p.text-sm { font-size: 1rem; color: var(--h-soft); max-width: 34rem; }

/* Come lavoro + FAQ on desktop: title sticky on the left, content on the right */
@media (min-width: 1024px) {
  main.pg-srv #come-lavoro > div,
  main.pg-srv #faq > div {
    max-width: 80rem;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  main.pg-srv #come-lavoro > div > div:first-child,
  main.pg-srv #faq > div > div:first-child { position: sticky; top: 8rem; margin-bottom: 0; }
}

/* FAQ: editorial numbered list, the open one gets an orange rule */
main:is(.pg-srv, .pg-svc) .srv-faq { counter-reset: faq; border-top: 1px solid var(--h-line); }
main:is(.pg-srv, .pg-svc) .faq-item { counter-increment: faq; position: relative; border-bottom: 1px solid var(--h-line); }
main:is(.pg-srv, .pg-svc) .faq-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--accent-500);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .6s var(--ease-out);
}
main:is(.pg-srv, .pg-svc) .faq-item.is-open::after { transform: scaleX(1); }
main:is(.pg-srv, .pg-svc) .faq-question { padding: 1.5rem 0; min-height: 44px; justify-content: flex-start; }
main:is(.pg-srv, .pg-svc) .faq-question::before {
  content: counter(faq, decimal-leading-zero);
  flex: none;
  width: 2.5rem;
  font-family: var(--h-display);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-400);
}
main:is(.pg-srv, .pg-svc) .faq-question > span { flex: 1; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.3; transition: color .3s ease; }
main:is(.pg-srv, .pg-svc) .faq-question:hover > span, main:is(.pg-srv, .pg-svc) .faq-item.is-open .faq-question > span { color: var(--accent-300); }
main:is(.pg-srv, .pg-svc) .faq-answer-inner { padding: 0 0 1.75rem 2.5rem; font-size: 1.02rem; color: var(--h-soft); max-width: 62ch; }

@media (prefers-reduced-motion: reduce) {
  main.pg-srv .srv-path .timeline-line-fill { transform: none; }
  main.pg-srv .srv-pic img { height: 100%; transition: none; }
}
/* ===========================================================
   CHI SONO page (chi-sono.html, <main class="pg-chi">)
   =========================================================== */
main.pg-chi .chi-portrait { width: min(80%, 20rem); margin: 0 auto 3rem; }
main.pg-chi .chi-portrait .portrait-frame {
  aspect-ratio: 768 / 1365;
  border-radius: 999px 999px 1.25rem 1.25rem / 38% 38% 1.25rem 1.25rem;
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7);
}
main.pg-chi .chi-portrait img { object-position: 50% 50%; }
main.pg-chi .chi-story p { font-size: 1.12rem; color: var(--h-soft); max-width: 40rem; }
main.pg-chi .chi-story p:first-child { font-size: clamp(1.25rem, 2vw, 1.5rem); line-height: 1.55; color: var(--h-ink); }
@media (min-width: 1024px) {
  main.pg-chi .chi-top {
    max-width: 80rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 24vw, 22rem);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  main.pg-chi .chi-top > * { grid-column: 1; }
  main.pg-chi .chi-portrait { grid-column: 2; grid-row: 1 / span 4; width: 100%; margin: 0; position: sticky; top: 8rem; }
}


/* Perché scegliermi: editorial rows instead of identical boxes */
main.pg-chi #perche-me { background: transparent; }
main.pg-chi .chi-rows { border-top: 1px solid var(--h-line); }
main.pg-chi .chi-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--h-line);
}
main.pg-chi .chi-row > svg { grid-row: 1 / span 2; margin: .5rem 0 0; }
main.pg-chi .chi-row p.font-display { font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.08; letter-spacing: -.035em; margin-bottom: .6rem; }
main.pg-chi .chi-row p.text-sm { font-size: 1.05rem; color: var(--h-soft); max-width: 40rem; }
main.pg-chi .chi-commit { display: grid; gap: 0; border-top: 1px solid var(--h-line); }
main.pg-chi .chi-commit > div { padding: 1.1rem 0; border-bottom: 1px solid var(--h-line); align-items: center; }
main.pg-chi .chi-commit p { font-size: 1.15rem; color: var(--h-ink); }
@media (min-width: 1024px) {
  main.pg-chi .chi-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4rem; border-top: 0; }
  main.pg-chi .chi-row { border-top: 1px solid var(--h-line); }
  main.pg-chi .chi-commit { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 3rem; border-top: 0; }
  main.pg-chi .chi-commit > div { border-top: 1px solid var(--h-line); }
}

/* Final invitation: strong orange panel like the Home one */
main:is(.pg-chi, .pg-svc) div:has(> .chi-iv) { max-width: 88rem; }
main:is(.pg-chi, .pg-svc) .chi-iv {
  background: var(--h-panel);
  color: var(--h-panel-ink);
  border-radius: 1.5rem;
  padding: clamp(3.5rem, 9vw, 7rem) clamp(1.5rem, 6vw, 5rem);
  text-align: left;
}
main:is(.pg-chi, .pg-svc) .chi-iv .chi-iv-title { font-size: clamp(2.4rem, 7vw, 6rem); line-height: .98; letter-spacing: var(--h-track); color: var(--h-panel-ink); }
main:is(.pg-chi, .pg-svc) .chi-iv p { color: var(--h-panel-soft); font-size: 1.15rem; margin-left: 0; }
main:is(.pg-chi, .pg-svc) .chi-iv .flex { justify-content: flex-start; }
main:is(.pg-chi, .pg-svc) .chi-iv .btn-primary { background: var(--h-panel-ink); color: #fff; box-shadow: none; }
main:is(.pg-chi, .pg-svc) .chi-iv .btn-ghost { border: 1.5px solid var(--h-panel-ink); color: var(--h-panel-ink); }
main:is(.pg-chi, .pg-svc) .chi-iv .btn-ghost:hover { background: var(--h-panel-ink); color: #fff; }
main:is(.pg-chi, .pg-svc) .chi-iv a:focus-visible { outline: 3px solid var(--h-panel-ink); outline-offset: 3px; }

/* ===========================================================
   CONTATTI page (contatti.html, <main class="pg-con">)
   =========================================================== */
main.pg-con .con-grid { display: grid; gap: 2.5rem; }
@media (min-width: 1024px) { main.pg-con .con-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 5vw, 5rem); align-items: start; } }
/* WhatsApp: the main channel, big and alive */
main.pg-con .con-wa {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 4.5rem 1.5rem 1.5rem;
  border-radius: 1.25rem;
  background: var(--accent-500);
  color: var(--h-panel-ink);
  text-decoration: none;
  margin-bottom: 1.5rem;
  transition: background-color .35s ease;
}
main.pg-con .con-wa:hover { background: var(--accent-400); }
main.pg-con .con-wa:focus-visible { outline: 3px solid var(--accent-300); outline-offset: 3px; }
main.pg-con .con-wa > div:first-child { position: relative; background: var(--h-panel-ink); border-color: transparent; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
main.pg-con .con-wa > div:first-child::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--h-panel-ink);
  opacity: 0;
  animation: con-ping 2.4s ease-out infinite;
}
@keyframes con-ping { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
main.pg-con .con-wa p.text-xs { color: var(--h-panel-soft); font-weight: 600; }
main.pg-con .con-wa p.text-slate-100 { color: var(--h-panel-ink); font-family: var(--h-display); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2.2rem); letter-spacing: -.02em; }
main.pg-con .con-wa:hover p.text-slate-100 { color: var(--h-panel-ink); }
main.pg-con .con-wa::after {
  content: "";
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 1.6rem; height: 1.6rem;
  margin-top: -.8rem;
  background: var(--h-panel-ink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transition: transform .5s var(--ease-out);
}
main.pg-con .con-wa:hover::after { transform: translateX(.35rem); }
/* email, zone, Instagram: plain rows */
main.pg-con .con-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 44px;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--h-line);
  text-decoration: none;
}
main.pg-con .con-wa + .con-row { border-top: 1px solid var(--h-line); }
main.pg-con .con-row > div:first-child { background: transparent; }
main.pg-con .con-row p.text-slate-100 { font-size: 1.1rem; }
/* form panel: orange bar + light that follows the mouse */
main.pg-con .con-form {
  border-radius: 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.75rem);
  background:
    radial-gradient(28rem circle at var(--px, 85%) var(--py, 0%), rgba(245, 135, 46, .10), transparent 60%),
    rgba(8, 18, 38, .82);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 255, 255, .05);
}
main.pg-con .con-bar {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--accent-500);
  transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
  main.pg-con .con-wa > div:first-child::after { animation: none; }
}
/* ===========================================================
   SERVICE PAGES (siti-web, e-commerce, social-media, manutenzione:
   <main class="pg-svc" data-mood="...">). One shared template; FAQ and
   final panel reuse the Servizi / Chi sono rules above.
   =========================================================== */
main.pg-svc .svc-pic { margin: 0 0 2.25rem; border-radius: 1.25rem; overflow: hidden; background: var(--navy-800); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7); }
main.pg-svc .svc-pic img { display: block; width: 100%; height: auto; will-change: transform; }
main.pg-svc .svc-top > p.text-lg { font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.55; color: var(--h-ink); }
main.pg-svc .svc-top > p { color: var(--h-soft); }
@media (min-width: 1024px) {
  main.pg-svc .svc-top {
    max-width: 80rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(16rem, 26vw, 24rem);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  main.pg-svc .svc-top > * { grid-column: 1 / -1; }
  main.pg-svc .svc-top > p.section-eyebrow,
  main.pg-svc .svc-top > h1,
  main.pg-svc .svc-top > p.text-lg,
  main.pg-svc .svc-top > p.mb-14 { grid-column: 1; }
  main.pg-svc .svc-pic { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
}
/* What's included (strong effect): numbered path, line drawn by the scroll */
main.pg-svc .svc-inc h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.08; }
main.pg-svc .svc-path { position: relative; counter-reset: inc; }
main.pg-svc .svc-line { position: absolute; left: 15px; top: .5rem; bottom: .9rem; width: 2px; background: rgba(245, 135, 46, .15); }
main.pg-svc .svc-line span { display: block; height: 100%; background: var(--accent-500); transform: scaleY(var(--tl, 0)); transform-origin: top center; }
main.pg-svc .svc-path > li[data-stagger-item] {
  counter-increment: inc;
  position: relative;
  display: block;
  padding: .3rem 0 1.5rem 3.25rem;
  font-size: 1.08rem;
  color: var(--h-mute);
  transition: color .5s ease;
}
main.pg-svc .svc-path > li[data-stagger-item] > svg { display: none; }
main.pg-svc .svc-path > li[data-stagger-item]::before {
  content: counter(inc);
  position: absolute; left: 0; top: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 600 .8rem/1 var(--h-display);
  color: var(--h-mute);
  background: var(--navy-900);
  box-shadow: inset 0 0 0 1px rgba(245, 135, 46, .3);
  transition: color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
main.pg-svc .svc-path > li.is-on { color: var(--h-ink); }
main.pg-svc .svc-path > li.is-on::before { color: var(--h-panel-ink); background: var(--accent-500); box-shadow: 0 0 0 5px rgba(245, 135, 46, .18); }
main.pg-svc .svc-for { border-top: 1px solid var(--h-line); }
main.pg-svc .svc-for > li { padding: .95rem 0; border-bottom: 1px solid var(--h-line); font-size: 1.05rem; color: var(--h-ink); }
main.pg-svc .svc-price { border-left: 3px solid var(--accent-500); padding: .2rem 0 .2rem 1.25rem; }
main.pg-svc .svc-price p.font-display { font-size: 1.35rem; }
main.pg-svc .svc-price p.text-sm { font-size: 1rem; color: var(--h-soft); }
@media (min-width: 1024px) {
  main.pg-svc .svc-inc { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  main.pg-svc .svc-inc { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}
main.pg-svc .svc-inc > div + div { margin-top: 2.5rem; }
@media (min-width: 768px) { main.pg-svc .svc-inc > div + div { margin-top: 0; } }
/* FAQ: title sticky on the left on desktop */
main.pg-svc .svc-h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -.04em; line-height: 1.04; }
@media (min-width: 1024px) {
  main.pg-svc .svc-faq-block { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  main.pg-svc .svc-h2 { position: sticky; top: 8rem; }
}
/* Other services: big rows with an arrow */
main.pg-svc .svc-more { border-top: 1px solid var(--h-line); }
main.pg-svc .svc-more-row {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 1.5rem 3.5rem 1.5rem 0;
  border-bottom: 1px solid var(--h-line);
  text-decoration: none;
}
main.pg-svc .svc-more-row p.font-display { font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.03em; transition: color .3s ease, transform .5s var(--ease-out); }
main.pg-svc .svc-more-row p.text-sm { font-size: 1rem; color: var(--h-soft); }
main.pg-svc .svc-more-row:hover p.font-display, main.pg-svc .svc-more-row:focus-visible p.font-display { color: var(--accent-300); transform: translateX(.75rem); }
main.pg-svc .svc-more-row:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 4px; }
main.pg-svc .svc-more-row::after {
  content: "";
  position: absolute; right: .5rem; top: 50%;
  width: 1.6rem; height: 1.6rem; margin-top: -.8rem;
  background: var(--accent-400);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M13 6l6 6-6 6'/></svg>") center / contain no-repeat;
  transform: rotate(-45deg);
  transition: transform .5s var(--ease-out);
}
main.pg-svc .svc-more-row:hover::after { transform: rotate(0); }
@media (prefers-reduced-motion: reduce) {
  main.pg-svc .svc-line span { transform: none; }
}
/* Lavori: VÉRAN and CARDINE pages scroll for real inside the frames.
   The first-screen image is the poster; the full page loads only when the
   card gets near the screen (homeFx.js initLiveShots). */
main.pg-lav .lav__shot--live { cursor: default; }
main.pg-lav .lav__scroll {
  display: block;
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  background: #0b1424;
}
main.pg-lav .lav__phone .lav__scroll { aspect-ratio: 390 / 844; border-radius: 11px; }
main.pg-lav .lav__scroll::-webkit-scrollbar { display: none; }
main.pg-lav .lav__scroll img { width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; border-radius: 0; }
main.pg-lav .lav__scroll:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }
/* ===========================================================
   HOME, richer: service icons, "Per chi lavoro" mosaic, less empty space
   =========================================================== */
.sv-ico {
  display: inline-block;
  width: .62em; height: .62em;
  margin: 0 .28em .08em 0;
  vertical-align: middle;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .55;
  transition: opacity .5s ease, transform .6s var(--ease-out);
}
.sv-ico .a { stroke: var(--accent-400); }
.sv-row.is-active .sv-ico { opacity: 1; transform: rotate(-6deg) scale(1.06); }

/* less empty space between Home sections */
.hx-band { margin-top: 2.5rem; }
.sv { padding: 4.5rem 0 4rem; }
.iv { padding: 1.5rem 0 4.5rem; }

/* Per chi lavoro: asymmetric mosaic (strong effect: tiles open + drift) */
.pc { padding: 4.5rem 0 1rem; }
.pc-inner { max-width: 88rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .pc-inner { padding: 0 2.5rem; } }
.pc-kicker {
  display: flex; align-items: center; gap: .9rem;
  margin-bottom: 1.5rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-300);
}
.pc-kicker::before { content: ""; width: 2.75rem; height: 1px; background: currentColor; }
.pc-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "a a" "b c" "d d";
}
@media (min-width: 900px) {
  .pc-grid {
    grid-template-columns: 1.35fr 1fr .8fr;
    grid-template-rows: 13rem 13rem;
    grid-template-areas: "a b b" "a c d";
    gap: 1rem;
  }
}
.pc-tile { position: relative; overflow: hidden; border-radius: 1.1rem; min-height: 10.5rem; background: linear-gradient(150deg, var(--navy-700), var(--navy-900) 70%); box-shadow: inset 0 0 0 1px var(--h-line); }
.pc-tile--a { grid-area: a; min-height: 16rem; }
.pc-tile--b { grid-area: b; }
.pc-tile--c { grid-area: c; }
.pc-tile--d { grid-area: d; }
.pc-media { position: absolute; inset: 0; display: grid; place-items: center; }
.pc-ill { width: 78%; max-width: 22rem; height: auto; overflow: visible; will-change: transform; }
.pc-ill path, .pc-ill ellipse, .pc-ill circle { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pc-ill .l { stroke: rgba(201, 211, 225, .55); }
.pc-ill .a { stroke: var(--accent-400); }
.pc-photo { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; will-change: transform; }
.pc-media:has(.pc-photo) .pc-ill { display: none; }
.pc-media:has(.pc-photo)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 22, .05) 30%, rgba(5, 11, 22, .82)); }
.pc-tag {
  position: absolute; left: 1rem; bottom: .9rem; z-index: 2;
  font-family: var(--h-display); font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.6rem); letter-spacing: -.02em;
  color: var(--h-ink);
  text-shadow: 0 2px 12px rgba(5, 11, 22, .6);
}
.pc-tile::after {
  content: ""; position: absolute; left: 1rem; right: 1rem; bottom: .55rem; height: 1px;
  background: var(--accent-500); transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease-out);
}
.pc-tile:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .pc-tile::after { transition: none; } }.pc-media { padding: .75rem .75rem 2.9rem; }
.pc-media:has(.pc-photo) { padding: 0; }
.pc-media { grid-template-rows: minmax(0, 1fr); }
.pc-ill { width: auto; height: 100%; max-width: 82%; min-height: 0; }
.pc-ill { position: absolute; top: .9rem; right: 1rem; height: calc(100% - 4.1rem); width: auto; max-width: 78%; }
.pc-ill { height: calc(100% - 4.8rem); }
.pc-tag { line-height: 1.1; }

/* Photos (assets/foto, Unsplash, see CREDITI.txt): lazy, under the fold */
.pc-photo { z-index: 0; }
.pc-media:has(.pc-photo)::after { background: linear-gradient(180deg, rgba(5, 11, 22, .08) 25%, rgba(5, 11, 22, .88) 92%); z-index: 1; }
.pc-tile:hover .pc-photo { filter: saturate(1.1); }
.iv-photo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  opacity: .28;
  pointer-events: none;
}
.iv-panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, var(--h-panel) 30%, rgba(245, 135, 46, .55) 70%, rgba(245, 135, 46, .2));
}/* photos stay hidden (drawing visible) until really loaded */
.pc-photo, .iv-photo { opacity: 0; transition: opacity .8s ease; }
.pc-photo.is-in { opacity: 1; }
.iv-photo.is-in { opacity: .28; }
.pc-media:has(.pc-photo) .pc-ill { display: block; }
.pc-media:has(.pc-photo.is-in) .pc-ill { display: none; }
.pc-media:has(.pc-photo)::after { opacity: 0; transition: opacity .8s ease; }
.pc-media:has(.pc-photo.is-in)::after { opacity: 1; }
/* Lavori: every demo site shows a short silent video inside its frames.
   Nothing of the video is requested before the visitor asks for it
   (hover, keyboard focus, tap or the "Guarda il video" button). */
main.pg-lav .lav__shot--vid { cursor: default; }
main.pg-lav .lav__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  background: #0b1424;
}
main.pg-lav .lav__phone .lav__video { aspect-ratio: 390 / 844; border-radius: 11px; }
main.pg-lav .lav__video[hidden], main.pg-lav .lav__scroll[hidden] { display: none; }
main.pg-lav .lav__ctrl {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem;
  padding: .85rem 0 0;
  line-height: 1.3;
}
main.pg-lav .lav__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 1rem;
  border-radius: 999px;
  font: 600 .78rem/1 'Inter', system-ui, sans-serif;
  color: var(--h-ink);
  background: rgba(5, 11, 22, .6);
  border: 1px solid var(--h-line);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
main.pg-lav .lav__btn:hover { border-color: var(--accent-400); }
main.pg-lav .lav__btn:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }
main.pg-lav .lav__play { color: var(--h-panel-ink); background: var(--accent-500); border-color: transparent; }
main.pg-lav .lav__play:hover { background: var(--accent-400); }
main.pg-lav .lav__play::before { content: ""; width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
main.pg-lav .lav__play[aria-pressed="true"]::before { width: 8px; height: 10px; border: 0; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
main.pg-lav .lav__full[aria-pressed="true"] { border-color: var(--accent-400); color: var(--accent-300); }
main.pg-lav .lav__zoomv { cursor: zoom-in; }
main.pg-lav .lav__vhint { font-size: .78rem; color: var(--h-mute); }
main.pg-lav .lav__vhint--touch { display: none; }
@media (hover: none) { main.pg-lav .lav__vhint--mouse { display: none; } main.pg-lav .lav__vhint--touch { display: inline; } }
/* ===========================================================
   Moving backgrounds: real video on computers (js/modules/bgVideo.js),
   generated shader elsewhere (js/modules/bgShader.js). The layer is
   <div class="bgv"> inside the page head; a dark veil keeps text readable.
   =========================================================== */
.bgv {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(120% 90% at 75% 20%, #0f2448 0%, #071226 55%, #050b16 100%);
}
.bgv[data-poster] { background-position: center; background-size: cover; background-repeat: no-repeat; }
.bgv-video, .bgv-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.bgv-video.is-in { opacity: 1; }
.bgv-video.is-front { z-index: 1; }
.bgv.is-on .bgv-canvas { opacity: 1; }
.bgv::after {
  content: "";
  position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(5, 11, 22, .82) 0%, rgba(5, 11, 22, .62) 55%, rgba(5, 11, 22, .5) 100%),
    linear-gradient(180deg, rgba(5, 11, 22, .25) 0%, rgba(5, 11, 22, 0) 30%, rgba(5, 11, 22, .55) 85%, var(--navy-950) 100%);
}
/* page heads: full width, under the fixed bar, fading into the page */
.bgv--head, .bgv--top {
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent);
          mask-image: linear-gradient(180deg, #000 72%, transparent);
}
.bgv--head { top: -11rem; bottom: -4rem; }
.bgv--top { top: -11rem; bottom: auto; height: calc(100svh + 2rem); }
/* everything else stays above the layer */
.hx > .bgv ~ * { position: relative; z-index: 2; }
.pg-head, .chi-top, .svc-top { position: relative; }
.pg-head > *:not(.bgv),
.svc-top > *:not(.bgv),
.chi-top > *:not(.bgv):not(.chi-portrait) { position: relative; z-index: 1; }
.chi-top > .chi-portrait { z-index: 1; }
/* the light threads are dimmed while a moving background is on screen */
body.bgv-live .bg-field.is-on { opacity: .35; }/* the full-width background layers must never create a side scroll */
html { overflow-x: clip; }

/* ===========================================================
   LAVORI: tools section (#strumenti) — analyser and guided form,
   in the same panel language as the rest of the site.
   =========================================================== */
.st { position: relative; }
.st .prova { padding: 4rem 0 3rem; }
.st .prova__title { font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; max-width: 16ch; }
.st .prova__panel {
  border-radius: 1.25rem;
  background: radial-gradient(28rem circle at 85% 0%, rgba(245, 135, 46, .09), transparent 60%), rgba(8, 18, 38, .86);
  box-shadow: inset 0 2px 0 var(--accent-500), 0 30px 60px -30px rgba(0, 0, 0, .6);
}
.st .prova__list { gap: 0; border-top: 1px solid var(--h-line); }
.st .prova__tab { border-radius: 0; border-bottom: 1px solid var(--h-line); min-height: 44px; }
/* Glossary (js/modules/glossario.js): dotted words with a short explanation */
.gl-term { color: inherit; text-decoration: underline dotted rgba(255, 171, 92, .4); text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: help; border-radius: 4px; padding: 0 .1rem; }
.gl-term:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 2px; }
.gl-term[aria-expanded="true"] { background: rgba(255, 171, 92, .14); }
.gl-pop {
  position: fixed; z-index: 70; padding: .75rem .9rem; border-radius: .75rem;
  font: 400 .92rem/1.5 'Inter', sans-serif; color: #f2f5fa; background: #0e1b33;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 171, 92, .35);
}
.gl-pop strong { color: #ffc27a; }
.gl-term { position: relative; }
.gl-term::after { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.gl-term { position: relative; }
.gl-term::after { content: ""; position: absolute; left: -2px; right: -2px; top: -6px; bottom: -6px; }
.gl-ready [data-glossario] { text-decoration: underline dotted rgba(255, 171, 92, .4); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Chi sono: rhythm after the "Come lavoro" story */
main.pg-chi #perche-me { padding-top: 4.5rem; }#strumenti { scroll-margin-top: 6rem; }
/* service pages: 'Per chi e' alone after the scene; scene images never overflow before css/scena.css arrives */
main.pg-svc .svc-inc--solo { display: block; }
.scena img { max-width: 100%; height: auto; }

/* ---------- "Cosa include" on the service pages: plain checklist (no pinned scene) ---------- */
main.pg-svc .svc-includes__title { font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: -.03em; line-height: 1.08; margin-bottom: 1.5rem; }
main.pg-svc .svc-check { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--h-line); }
main.pg-svc .svc-check > li { position: relative; padding: .95rem 0 .95rem 2.4rem; border-bottom: 1px solid var(--h-line); font-size: 1.05rem; line-height: 1.5; color: var(--h-ink); }
main.pg-svc .svc-check > li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(245, 135, 46, .16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5872e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat; }

/* ===========================================================
   HOME 19/10/2026: hero A (photo + name tag under it), "Per chi lavoro"
   as one sentence with photos, orange band with the WhatsApp message.
   =========================================================== */
/* Title "Un sito fatto apposta per la tua attivita." */
.hx .hero-headline.hx-title--apposta { font-size: clamp(2.3rem, 10vw, 4.4rem); line-height: 1; }
.hx-title--apposta .hx-line--2 { padding-left: .5em; }
.hx-title--apposta .hx-line--3 { padding-left: 0; }
@media (min-width: 1024px) {
  .hx .hero-headline.hx-title--apposta { font-size: clamp(3.2rem, 5.6vw, 6rem); line-height: .98; }
  .hx-title--apposta .hx-line--2 { padding-left: .8em; }
}

/* Portrait: whole photo, soft corners, thin orange frame a few px off it */
.hxA { display: block; width: min(76%, 19rem); margin: 2.75rem 0 0 auto; }
.hxA-wrap { position: relative; isolation: isolate; transform-origin: 70% 100%; }
.hx-ph.hxA-ph { border-radius: 1.6rem; box-shadow: 0 50px 90px -45px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .06); }
.hxA-ph img { object-position: 50% 50%; }
.hxA-ph::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.hxA-frame { position: absolute; inset: -.7rem .7rem .7rem -.7rem; z-index: -1; border-radius: 1.9rem; border: 1.5px solid rgba(245, 135, 46, .55); }

/* Name tag: UNDER the photo (only its top edge touches the frame), so the
   crossed arms stay in sight. A slow light passes over it on its own. */
.hxA-tag {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: .9rem;
  width: max-content; max-width: calc(100% + 2rem);
  margin: -.9rem 0 0 -1.6rem;
  padding: .85rem 1.35rem .85rem .85rem;
  border-radius: 1.15rem;
  background: rgba(5, 11, 22, .92);
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 171, 92, .22);
  overflow: hidden;
}
.hxA-tag::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 35%;
  background: linear-gradient(100deg, transparent, rgba(255, 194, 122, .14), transparent);
  transform: skewX(-18deg);
  animation: hxA-sheen 6.5s 1.5s ease-in-out infinite;
}
@keyframes hxA-sheen { 0% { left: -40%; } 45%, 100% { left: 130%; } }
.hxA-logo { width: 3.4rem; height: 3.4rem; object-fit: contain; flex: none; filter: drop-shadow(0 6px 14px rgba(245, 135, 46, .25)); }
.hxA-txt { display: flex; flex-direction: column; gap: .3rem; }
.hxA-name { font-family: var(--h-display); font-weight: 700; font-size: 1.35rem; line-height: 1; letter-spacing: -.025em; color: var(--h-ink); white-space: nowrap; }
.hxA-role { position: relative; font-size: .68rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--accent-400); white-space: nowrap; padding-bottom: .35rem; }
.hxA-role::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent-500); transform-origin: left; animation: hxA-line 1.1s 1s var(--ease-out) both; border-radius: 2px; }
@keyframes hxA-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (min-width: 1024px) {
  .hx-inner { grid-template-columns: minmax(0, 1fr) clamp(15rem, 21vw, 21.5rem); }
  .hxA { width: 100%; margin: 0; }
  .hxA-tag { margin-left: -2.6rem; }
  .hxA-logo { width: 4rem; height: 4rem; }
  .hxA-name { font-size: clamp(1.4rem, 1.7vw, 1.8rem); }
}
@media (max-width: 420px) {
  .hxA-tag { margin-left: -1.1rem; padding: .7rem 1rem .7rem .7rem; gap: .7rem; }
  .hxA-logo { width: 2.9rem; height: 2.9rem; }
  .hxA-name { font-size: 1.2rem; }
  .hxA-role { font-size: .62rem; letter-spacing: .2em; }
}

/* ---------- Per chi lavoro: one sentence, photos inside the text ---------- */
.pcx {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(3.5rem, 7vw, 6rem);
  background: linear-gradient(180deg, transparent, rgba(12, 28, 56, .65) 16%, rgba(12, 28, 56, .65) 84%, transparent);
}
.pcx-inner { max-width: 88rem; margin: 0 auto; padding: 0 1.25rem; }
@media (min-width: 640px) { .pcx-inner { padding: 0 2.5rem; } }
.pcx .pc-kicker { margin-bottom: 1.2rem; }
.pcx-h { max-width: 40rem; margin: 0 0 clamp(2rem, 4vw, 3.5rem); font-family: var(--h-display); font-weight: 600; font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; color: var(--h-soft); }
.pcx-h strong { color: var(--h-ink); font-weight: 700; }
.pcx-flow {
  margin: 0;
  font-family: var(--h-display); font-weight: 700;
  font-size: clamp(1.85rem, 5.2vw, 5rem);
  line-height: 1.16; letter-spacing: -.035em;
  color: var(--h-ink);
  text-wrap: pretty;
}
.pcx-flow .soft { color: var(--h-mute); font-weight: 600; }
.pcx-dot { display: inline-block; width: .2em; height: .2em; margin: 0 .2em .16em; border-radius: 50%; background: var(--accent-500); vertical-align: middle; }
.pcx-inl {
  position: relative; display: inline-block;
  width: 2.5em; height: .86em; margin: 0 .12em -.06em;
  border-radius: 999px; overflow: hidden; vertical-align: baseline;
  background: linear-gradient(120deg, var(--navy-700), var(--navy-900));
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8);
  transition: width .7s var(--ease-out), box-shadow .5s ease;
}
.pcx-inl img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .8s ease; animation: pcx-pan 9s ease-in-out infinite alternate; }
.pcx-inl img.is-in { opacity: 1; }
.pcx-inl:nth-of-type(2n) img { animation-duration: 11s; animation-direction: alternate-reverse; }
@keyframes pcx-pan { from { transform: scale(1.05) translateX(-4%); } to { transform: scale(1.25) translateX(4%); } }
@media (hover: hover) and (pointer: fine) {
  .pcx-inl:hover { width: 3.4em; box-shadow: 0 0 0 2px var(--accent-500), 0 20px 40px -16px rgba(0, 0, 0, .8); }
}
.pcx-foot { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; font-size: 1.05rem; color: var(--h-soft); }
.pcx-foot a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; color: var(--accent-400); font-weight: 600; text-decoration: none; border-bottom: 1.5px solid rgba(255, 171, 92, .4); transition: border-color .3s ease, gap .4s var(--ease-out); }
.pcx-foot a:hover, .pcx-foot a:focus-visible { border-color: var(--accent-400); gap: .8rem; }
.pcx-foot a:focus-visible { outline: 3px solid var(--accent-400); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 639px) { .pcx-inl { width: 1.7em; height: .8em; } }

/* ---------- Orange band: photo + WhatsApp message writing itself ---------- */
.ivx .iv-panel { padding: 0; }
.ivx .iv-panel::before { display: none; }
.ivx-grid {
  position: relative; z-index: 2;
  max-width: 88rem; margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) 1.25rem;
  display: grid; gap: 2.5rem; align-items: center;
}
@media (min-width: 640px) { .ivx-grid { padding-left: 2.5rem; padding-right: 2.5rem; } }
@media (min-width: 1024px) { .ivx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 6rem); } }
.ivx .iv-inner { max-width: none; margin: 0; }
.ivx .iv-title { max-width: 12ch; font-size: clamp(2.4rem, 8.6vw, 6rem); }
.ivx .iv-text { color: rgba(6, 16, 31, .86); }
.ivA-media { position: relative; padding-bottom: 2.5rem; }
.ivA-photo { position: relative; aspect-ratio: 3 / 2; border-radius: 1.5rem; overflow: hidden; background: rgba(6, 16, 31, .18); box-shadow: 0 40px 80px -40px rgba(6, 16, 31, .7); }
.ivA-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; opacity: 0; transition: opacity .8s ease; }
.ivA-photo img.is-in { opacity: 1; }
.ivA-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 40%; display: block; }
.ivA-photo.has-video img { display: none; }
.ivA-chat {
  position: absolute; right: clamp(-2rem, -1.5vw, -.5rem); bottom: 0;
  width: min(80%, 21rem);
  padding: .9rem; border-radius: 1.2rem;
  background: #0b1527; color: #e9eef6;
  box-shadow: 0 30px 60px -25px rgba(6, 16, 31, .85);
  font-size: .9rem;
}
.ivA-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.ivA-head img { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #fff; padding: .15rem; object-fit: contain; }
.ivA-head b { display: block; font-size: .85rem; }
.ivA-head small { color: #8fa0b8; font-size: .72rem; }
.ivA-wa { margin-left: auto; color: #25d366; display: grid; }
.ivA-msg { margin-left: auto; max-width: 92%; min-height: 4.4rem; padding: .6rem .75rem .45rem; border-radius: .9rem .9rem .25rem .9rem; background: #1f3a5f; line-height: 1.45; }
.ivA-caret { display: inline-block; width: 2px; height: 1em; margin-left: 1px; background: var(--accent-400); vertical-align: -2px; animation: ivA-blink 1s steps(1) infinite; }
@keyframes ivA-blink { 50% { opacity: 0; } }
.ivA-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; margin-top: .25rem; color: #8fa0b8; font-size: .68rem; }
.ivA-ticks { color: #53bdeb; opacity: 0; transition: opacity .4s ease; }
.ivA-chat.is-sent .ivA-ticks, .ivA-chat.is-still .ivA-ticks { opacity: 1; }
.ivA-chat.is-still .ivA-caret { display: none; }
/* phone: the message sits under the photo (only its top overlaps), so the screen in the photo stays visible */
@media (max-width: 639px) {
  .ivA-media { padding-bottom: 0; }
  .ivA-chat { position: relative; right: auto; bottom: auto; width: 92%; margin: -2.25rem -.25rem 0 auto; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hxA-tag::before, .hxA-role::after, .pcx-inl img, .ivA-caret { animation: none; }
  .pcx-inl { transition: none; }
}