/* hero.css — an ink field and a plate, divided by one line.
   Owner pieces: "hero + video", "3D / WebGL layer"

   Why the type left the photograph.
   Nine images cycle through this frame. Seven of the nine are portrait originals
   (800×1200, 480×640); two are landscape. Three of them — the interior at
   Bioggio, the studio medico, the glazed stair — contain no sky, no mountain and
   no dark quarter at all, and two are white render on white cloud edge to edge.
   There is no region of this frame that is reliably dark and no region that is
   reliably empty. So every version of "set the sentence on the picture" ends in
   the same place: a gradient doing the work the composition should be doing, and
   letterforms landing on whatever mullion the next slide happens to put there.

   The fix is not a better crop. It is to stop asking the photograph to host the
   type. The frame is now two fields on two hard lines:

     · the vertical at 45% — ink to its left, photograph to its right;
     · the horizontal at the nav's own height — the plate starts where the bar
       ends, so all seven links sit on ink on every slide, at full contrast,
       permanently.

   Nothing overlays the picture, so the picture keeps its own exposure end to end
   and the gradient is deleted rather than tuned. The sentence registers to the
   one line that does not change between slides: --pad, the site's single declared
   margin — the same column the wordmark sits in above it and every section
   heading below it. And the plate stops being a 1.6:1 slice of a portrait
   photograph and becomes a near-square aperture, which is roughly the shape the
   photographs were actually taken in. */

.hero {
  position: relative;
  height: 100svh; min-height: 640px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: end;
  justify-items: start;
}

/* ── The bar ───────────────────────────────────────────────────────────────
   motion.js drops `.solid` until 86vh, so `:not(.solid)` is exactly "over the
   hero" and these rules never reach another page.

   All seven links stay. An earlier revision hid five of them here and let them
   reappear a screen down: it read beautifully and it cost the business its two
   revenue paths, because a visitor who lands and does not scroll never sees
   Vendita, Affitto or Modulo. Restraint is bought out of emphasis devices, never
   out of the sitemap — so what goes is the active state. HOME is already said by
   the wordmark two inches to its left, and "you are here" is not information on
   the page you arrive at: the underline and the brightness bump are both pure
   ornament. Seven words, one weight, no marks. The bar can also sit quieter than
   it did, because it is now on ink instead of on sky. */
@media (min-width: 901px) {
  .nav:not(.solid) .nav-cta { display: none; }
  .nav:not(.solid) .nav-main a { opacity: .66; }
  .nav:not(.solid) .nav-main a[aria-current="page"] { opacity: .66; }
  .nav:not(.solid) .nav-main a[aria-current="page"]::after { display: none; }
  .nav:not(.solid) .nav-main a:hover,
  .nav:not(.solid) .nav-main a:focus-visible { opacity: 1; }
}

/* The site's focus ring is ink, which was invisible over a dark hero photograph
   and is invisible over a solid ink field for certain. Seven of them are up
   there and they are the client's revenue path — they have to be keyboard
   reachable visibly, not just reachable. Not while the mobile menu sheet is
   down, though — that sheet is paper, and a paper ring on it is the same
   invisibility in the other direction. */
.nav:not(.solid):not(.open) :focus-visible { outline-color: var(--paper); }

/* ── The plate ─────────────────────────────────────────────────────────────
   Photograph under, WebGL depth layer over, both cropped by the same box so the
   frame never jumps as the layers hand over. The shader covers from the centre,
   so the poster does too — an off-centre object-position here would make the
   handover visibly slip. */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-media img,
.hero-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Line art, not a photograph: contain so no stroke is ever cropped by the
     plate's aspect. The ink ground fills whatever the drawing doesn't, and it is
     the same black, so the letterboxing is invisible. */
  object-fit: contain;
  object-position: 50% 50%;
  background: #fff;   /* the drawing's own paper, behind the contained frame */
}

/* The poster still is the LCP element and paints immediately; the clip fades in
   over it once it can actually play, so a slow connection sees a finished frame
   rather than a black box. */
.hero-media video { opacity: 0; transition: opacity 1s var(--ease); }
.hero-media video.ready { opacity: 1; }

/* No motion preference: the still is the hero, full stop. */
@media (prefers-reduced-motion: reduce) {
  .hero-media video { display: none; }
}

/* The plate holds close to its own exposure: a stop off the saturation because
   Swiss architectural work is cool and near-neutral, a touch of contrast, and no
   flattening. Nothing is set on it now, so nothing has to be rescued on it. */
.hero-media {
  transform-origin: 50% 50%;
  animation: hero-settle 3s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes hero-settle { from { transform: scale(1.06); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-media { animation: none; } }

/* ── The sentence ──────────────────────────────────────────────────────────
   Left edge on --pad, floor on --pad: a square corner in the ink field. Four
   short lines rather than two long ones, broken only at spaces that were already
   in the client's sentence — a narrow column wants a stanza, and four stacked
   lines stand up the way the buildings beside them do. */
.hero-inner {
  position: relative; z-index: 2;
  padding: 0 var(--pad) clamp(58px, 11vh, 124px);
  max-width: min(100%, 1180px);
  text-align: left;
}

.hero h1 {
  margin: 0;
  font-size: clamp(31px, 5.8vw, 84px);
  line-height: 1.02;
  letter-spacing: -.024em;
}

/* ── The action ────────────────────────────────────────────────────────────
   Everything above states the offer; nothing on the first screen asked for the
   job. One filled action to the request form — the single funnel both revenue
   paths run through — and one quiet link to the proof behind the claim. Both
   register to the sentence's own left edge, so the column reads as one block. */
.hero-cta {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(14px, 1.8vw, 30px);
  margin-top: clamp(24px, 3.2vw, 46px);
}

/* .btn-pill is drawn in ink for paper pages; on the ink field it has to invert. */
.btn-pill.on-ink {
  background: var(--paper); color: var(--ink); border-color: var(--paper);
}
.btn-pill.on-ink:hover,
.btn-pill.on-ink:focus-visible {
  background: transparent; color: var(--paper); border-color: var(--paper);
}

.hero-alt {
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(241, 239, 234, .74);
  /* Vertical pad only: it clears 44px on its own, and when the row wraps on a
     phone the link still starts on the sentence's left edge, not 16px inside it. */
  padding: 15px 0;
  transition: color .35s var(--ease);
}
.hero-alt:hover, .hero-alt:focus-visible { color: var(--paper); }

/* ── Desktop: the two fields ───────────────────────────────────────────────── */
@media (min-width: 901px) {
  .hero { --plate-x: 45%; }

  /* Flush right and flush bottom, top edge on the bar. */
  .hero-media { inset: var(--nav-h) 0 0 var(--plate-x); }

  .hero-inner {
    position: absolute;
    left: 0; bottom: 0; width: var(--plate-x);
    max-width: none;
    padding: 0 clamp(40px, 4.4vw, 76px) var(--pad) var(--pad);
    container-type: inline-size;
  }

  /* Sized off the column it lives in, not off the viewport, so the measure holds
     from 901px to a 27-inch screen without a ladder of breakpoints. The value is
     set so the longest line ("investimenti") stops short of the column edge with
     room to spare — the gutter between type and plate then reads wider than the
     margin at the left, which is what keeps the plate's edge feeling like an edge
     rather than something the sentence is pressed against. */
  .hero h1 {
    font-size: clamp(34px, 19.6cqw, 118px);
    line-height: .99;
    letter-spacing: -.03em;
  }
}

/* Short laptop screens: four lines plus a --pad floor is tight at 800px tall. */
@media (min-width: 901px) and (max-height: 780px) {
  .hero-inner { padding-bottom: clamp(34px, 6vh, 60px); }
  .hero h1 { font-size: clamp(34px, 17.4cqw, 92px); }
}

/* ── Narrow ──────────────────────────────────────────────────────────────────
   The narrow layout lives in mobile.css: below 901px the two fields stack
   instead of overlapping, so nothing is ever set over the drawing and there is
   no gradient to tune. What used to live here — a scrim over the bottom eighth
   and a saturate/contrast/brightness grade on the plate — were both written for
   the photographic hero this replaced. On a white line drawing brightness(.88)
   only turned the paper grey, so both are gone rather than retuned. */

/* ── 2026-09-23 corrections ────────────────────────────────────────────────
   Hero plate is now the Residenza Stella sale video (vertical footage, so it
   covers the plate), the sentence is smaller, and the offer list sits under it. */
.hero-media img, .hero-media video { object-fit: cover; object-position: 50% 40%; background: var(--ink); }
.hero-sale {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 36px var(--pad) 22px;
  background: linear-gradient(to top, rgba(20, 20, 15, .72), rgba(20, 20, 15, 0));
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--paper);
}
.hero-sale .arr { transition: transform .35s var(--ease); }
.hero-sale:hover .arr, .hero-sale:focus-visible .arr { transform: translateX(4px); }

.hero h1 { font-size: clamp(26px, 5vw, 44px); line-height: 1.06; }
.hero-list {
  list-style: none; margin: clamp(16px, 2.2vw, 26px) 0 0; padding: 0;
  display: grid; gap: 0;
  font-size: clamp(13px, 1.1vw, 15px); line-height: 1.35; color: rgba(241, 239, 234, .82);
}
.hero-list li { padding: 8px 0; border-top: 1px solid rgba(241, 239, 234, .16); }
.hero-list li:last-child { border-bottom: 1px solid rgba(241, 239, 234, .16); }
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(26px, 10.5cqw, 56px); line-height: 1.04; letter-spacing: -.024em; }
}
@media (min-width: 901px) and (max-height: 780px) {
  .hero h1 { font-size: clamp(24px, 9.5cqw, 46px); }
  .hero-list li { padding: 6px 0; }
}