/* ── TOKENS ──────────────────────────────────────────────────────── */
/* Shared colors/fonts/ease/mx come from /tokens.css. Only this
   page's own overrides live here. */
:root {
  --maxw: 2200px;
  /* Fluid section padding: 64px@390 → 160px@1440 */
  --sp: clamp(64px, 12vw, 160px);
  --display-expanded: "Archivo", system-ui, sans-serif;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
  /* Respect browser/OS text size preferences, never lock font-size on html */
  font-size: 100%;
}
body {
  overflow-x: hidden;
  background: var(--ombra);
  color: var(--luce);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}
/* ── PAGE TRANSITION (out, to News) ──────────────────────────────── */
body.page-leaving {
  animation: page-fade-out 260ms ease forwards;
}
@keyframes page-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* ── LAYOUT ───────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--mx);
  width: 100%;
}
.section-py {
  padding: var(--sp) 0;
}

/* ── TYPE ─────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.h1 {
  font-family: var(--display-xl);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
  font-size: clamp(21.6px, 3vw, 38.4px);
}

/* ── REVEAL ───────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s var(--ease),
    transform 0.5s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay {
  transition-delay: 0.1s;
}

/* ── GLOW EDGE ─────────────────────────────────────────────────────── */
.glow-edge {
  transition:
    border-color 250ms ease-out,
    box-shadow 250ms ease-out;
}
@media (hover: hover) {
  .glow-edge:hover,
  .glow-edge:focus-within {
    border-color: var(--luce);
    box-shadow:
      0 0 0 1px rgba(250, 250, 250, 0.4),
      0 0 28px rgba(201, 201, 201, 0.28),
      0 0 60px rgba(110, 110, 110, 0.25);
  }
}

/* ── INTRO (B/W headquarters + symbol, no text) ───────────────────── */
#intro {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  background: #000;
  display: grid;
  place-items: center;
}
.intro-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  transform-origin: center;
  filter: grayscale(1) brightness(0.42) contrast(1.08);
}
.intro-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(to top, #000 0%, transparent 28%);
}
.intro-mark {
  position: relative;
  height: min(46vh, 440px);
  width: auto;
  fill: #fafafa;
  opacity: 0;
  animation: intro-in 1.4s 0.25s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.intro-cue {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 1px;
  height: 56px;
  transform: translateX(-50%);
  background: rgba(250, 250, 250, 0.25);
  overflow: hidden;
}
.intro-cue span {
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: #fafafa;
  animation: intro-cue 2s ease-in-out infinite;
}
@keyframes intro-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes intro-cue {
  to { top: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-mark { animation: none; opacity: 1; }
  .intro-cue span { animation: none; top: 30%; }
}
@media (max-width: 820px) {
  .intro-mark { height: min(38vh, 300px); }
}

/* ── HERO ─────────────────────────────────────────────────────────── */
#hero {
  position: relative;
  /*
   * svh, with vh underneath for browsers that cannot parse it.
   *
   * vh is the *largest* viewport: it measures the screen as if the browser
   * toolbars were retracted. On a 390x844 phone that makes the hero 844px
   * tall inside roughly 750px of visible page, so the bottom of it -- the
   * scroll cue included -- sat below the fold on first paint. svh is the
   * smallest viewport, the one with the toolbars showing, so the hero fits
   * whatever state the browser is in. Deliberately not dvh: that tracks the
   * toolbar live and would resize the hero mid-scroll. Desktop has no dynamic
   * toolbar, so all three units are the same value there.
   */
  height: 100vh;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--ombra);
}
/*
 * Phones and tablets: bound the hero's shape, not its share of the screen.
 *
 * The film is 16:9 and .hero-bg covers, so the crop is decided entirely by how
 * portrait this box is. At full height on a 390x844 phone the box is 0.46:1
 * against the film's 1.78:1, which scales the frame to fit the *height* and
 * throws away 1125px of its 1280px width -- the visitor saw a 25% centre slice,
 * heavily zoomed. A tablet in portrait saw 41%.
 *
 * A square box holds about 56% of the frame, and because it is keyed to the
 * hero's own proportions rather than to viewport height it holds that same 56%
 * at every phone and tablet width instead of sliding between 25% and 41%.
 * max-height keeps it on-screen where the viewport is shorter than it is wide,
 * and min-height has to go with it: at 640px the square would be overridden
 * back into a portrait box on every phone.
 *
 * The hero carries no text -- it is the video, two scrims and nothing else --
 * so height here costs presence and nothing more. Desktop keeps the full-height
 * treatment, where the frame already survives about 79% intact at 1280.
 */
@media (max-width: 1024px) {
  #hero {
    /* width has to be pinned. With it left to auto, max-height clamping the
       box also pulls the width in behind it, and the hero collapses into a
       390px square on an 829px landscape viewport with dead space beside it. */
    width: 100%;
    height: auto;
    min-height: 0;
    /*
     * 16:9 -- the film's own ratio, so cover has nothing left to crop and the
     * whole frame is on screen. The square this replaced still lost 44% of the
     * width; this loses none of it.
     *
     * max-height only bites in landscape, where 16:9 of the width would be
     * taller than the screen. There the box goes wider than the film and the
     * crop moves to top and bottom instead, which is the right way round.
     */
    aspect-ratio: 16 / 9;
    max-height: 100svh;
  }
  /*
   * The fade that carries the video into #projects below, which is solid
   * --ombra, so it lands on matching black rather than on an edge.
   *
   * Shorter than the 55% it inherits from desktop: that was measured against a
   * full-height hero, and against a 219px band on a phone it would black out
   * nearly half the frame we just stopped cropping.
   */
  .hero-scrim2 {
    background: linear-gradient(to top, #000 0%, transparent 34%);
  }
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  filter: brightness(1.15);
}
.hero-scrim1 {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(0, 0, 0, 0.35) 45%,
    rgba(0, 0, 0, 0.72) 100%
  );
}
.hero-scrim2 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000 0%, transparent 55%);
}
.hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  padding: 0 clamp(28px, 5vw, 80px) clamp(48px, 6vw, 96px) clamp(24px, 3vw, 56px);
  pointer-events: none;
}
.hero-inner {
  pointer-events: auto;
  min-width: 0;
  max-width: min(56vw, 840px);
}
.hero-title {
  font-family: var(--display-xl);
  font-weight: normal;
  font-size: clamp(2rem, 4.5vw, 4rem);
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: var(--luce);
  margin: 0 0 0 -4px;
  animation: heroIn 700ms ease-out 150ms both;
}

.hero-sub {
  font-family: var(--display-xl);
  font-weight: normal;
  font-size: clamp(18px, 2.4vw, 32px);
  letter-spacing: 0.04em;
  color: var(--luce);
  margin-top: 24px;
  white-space: nowrap;
  animation: heroIn 700ms ease-out 300ms both;
}
.hero-body {
  font-family: var(--text);
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.6;
  color: var(--cenere);
  max-width: 34vw;
  margin-top: 16px;
  animation: heroIn 700ms ease-out 400ms both;
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  animation: heroIn 700ms ease-out 500ms both;
}
.btn-primary {
  font-family: var(--text);
  font-weight: 600;
  font-size: 18px;
  background: var(--bianco);
  color: var(--ombra);
  border: none;
  padding: 14px 28px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  transition: background 250ms;
}
@media (hover: hover) {
  .btn-primary:hover {
    background: var(--nebbia);
  }
}
.btn-secondary {
  font-family: var(--text);
  font-weight: 600;
  font-size: 18px;
  background: transparent;
  color: var(--luce);
  border: 1px solid var(--luce);
  padding: 14px 28px;
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    background 250ms,
    color 250ms;
}
@media (hover: hover) {
  .btn-secondary:hover {
    background: var(--luce);
    color: var(--ombra);
  }
}
.btn-secondary .arrow {
  transition: transform 250ms;
}
@media (hover: hover) {
  .btn-secondary:hover .arrow {
    transform: translateX(4px);
  }
}
@keyframes heroIn {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── TORCH CURSOR ──────────────────────────────────────────────────── */
/* ── SPOTLIGHT CURSOR (site-wide, replaces native cursor) ────────── */
html,
body {
  cursor: none;
}
*,
*::before,
*::after {
  cursor: none !important;
}
#torch {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.28) 45%,
    rgba(255, 255, 255, 0.08) 72%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(3px);
  transform: translate3d(-100px, -100px, 0) translate(-50%, -50%) scale(1);
  transition:
    width 180ms var(--ease),
    height 180ms var(--ease),
    opacity 0.3s;
  opacity: 0;
  /* Above the portfolio lightbox (100000): with the native cursor hidden,
     anything stacked over the torch leaves the visitor with no pointer. */
  z-index: 100001;
  will-change: transform, width, height;
}
#torch.is-hover {
  width: 91px;
  height: 91px;
}
/* The glow is soft and white, so on a bright photo or a white button it
   vanishes and the click point is a guess. A small sharp dot in the
   centre marks the exact spot; difference blending keeps it visible on
   both dark and light backgrounds. It is its own element because the
   torch's blur filter would soften anything inside it. */
#torchDot {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 100002;
  will-change: transform;
}
/* Touch devices have no real cursor, mousemove fires from taps and
   leaves the torch stuck showing at the tap point. Restore native
   cursor and hide the torch entirely.

   Keyed on the pointer, not the width. The 768px cap this used to carry
   covered phones and nothing else: an iPad is 820px in portrait and 1024px or
   1366px in landscape, so on every tablet the site still hid the cursor and
   left a glowing 60px disc parked wherever the last tap landed. A desktop
   never matches a coarse pointer, so the torch is untouched there. */
@media (pointer: coarse) {
  html,
  body {
    cursor: auto;
  }
  *,
  *::before,
  *::after {
    cursor: auto !important;
  }
  #torch,
  #torchDot {
    display: none !important;
  }
}

/* ── PROJECTS ──────────────────────────────────────────────────────── */
#projects {
  background: var(--ombra);
  padding: var(--sp) 0;
  overflow: hidden;
}
.projects-slider-wrapper {
  position: relative;
  width: 100%;
}
.projects-slider {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.projects-slider::-webkit-scrollbar {
  display: none;
}
.projects-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
@media (max-width: 900px) {
  .projects-slider {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: auto;
    scroll-behavior: smooth;
    touch-action: pan-y pinch-zoom;
  }
}
.projects-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);
  margin-top: 48px;
}
/* display:flex above would otherwise beat the hidden attribute the slider
   sets when the CSV yields a single slide. */
.projects-nav[hidden] {
  display: none;
}
.projects-dots {
  display: flex;
  justify-content: center;
  gap: 24px;
}
/* Liquid glass, same recipe the projects page rail uses. The section sits on
   pure black, so backdrop-filter has nothing behind it to blur and cannot
   carry the glass alone: what reads as glass is the graded tint falling from
   a lit top edge to a darker base, the specular hairline in ::before, and the
   inset highlights. The blur is kept for the browsers where a card scrolls
   under the button mid-swipe. */
.slider-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 9999px;
  color: var(--luce);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.17) 0%,
    rgba(255, 255, 255, 0.1) 48%,
    rgba(255, 255, 255, 0.06) 100%
  );
  backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition:
    background 240ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 240ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 240ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-arrow::before {
  content: "";
  position: absolute;
  inset: 0 12px auto 12px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent
  );
  pointer-events: none;
}
.slider-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}
@media (hover: hover) {
  .slider-arrow:hover:not(:disabled) {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.24) 0%,
      rgba(255, 255, 255, 0.15) 48%,
      rgba(255, 255, 255, 0.1) 100%
    );
    border-color: rgba(255, 255, 255, 0.38);
  }
}
.slider-arrow:active:not(:disabled) {
  transform: scale(0.94);
}
.slider-arrow:focus-visible {
  outline: 2px solid var(--luce);
  outline-offset: 4px;
}
/* Kept in place rather than hidden at the ends: the pair is a fixed landmark
   either side of the dots, and removing one would shift the whole row. */
.slider-arrow:disabled {
  opacity: 0.28;
  cursor: default;
}
@media (hover: none) {
  .slider-arrow:hover:not(:disabled) {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.17) 0%,
      rgba(255, 255, 255, 0.1) 48%,
      rgba(255, 255, 255, 0.06) 100%
    );
    border-color: rgba(255, 255, 255, 0.22);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .slider-arrow {
    background: rgba(38, 38, 42, 0.92);
  }
}
.slider-dot {
  width: 60px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.slider-dot::after {
  content: "";
  position: absolute;
  inset: -10px; /* expands the clickable area */
}
.slider-dot.active {
  background: var(--luce);
  box-shadow:
    0 0 12px rgba(255, 255, 255, 0.8),
    0 0 24px rgba(255, 255, 255, 0.4);
  transform: scaleY(1.5);
}
.projects-counter {
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--cenere);
}
.projects-counter .pc-cur {
  color: var(--luce);
  font-weight: 500;
  min-width: 2ch;
  text-align: right;
}
.projects-counter .pc-sep {
  opacity: 0.4;
}
.projects-counter .pc-bar {
  position: relative;
  display: block;
  width: 80px;
  height: 1px;
  background: rgba(255, 255, 255, 0.15);
  margin: 0 6px;
  overflow: hidden;
}
.projects-counter .pc-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--pc-progress, 8.3%);
  background: var(--luce);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Declared before the mobile block below, not after it: the slides carry
   both .projects-slide and .projects-grid, and the mobile rules flatten
   them with display:contents. With this rule sitting *after* that media
   query it won re-declaration order at equal specificity, so the phone
   layout silently stayed a 3-column grid and the one-card-per-swipe
   carousel never engaged. */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 2vw, 24px);
  margin-top: clamp(24px, 4vw, 48px);
}

@media (max-width: 768px) {
  #projects {
    overflow: hidden;
  }
  .projects-slider-wrapper {
    position: relative;
    width: 100%;
    margin-top: clamp(32px, 5vw, 48px);
  }
  .projects-slider {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* overscroll-behavior-y stays auto. overflow-y:hidden already makes this
       a scroll port on the Y axis, so `none` here cut the scroll chain to the
       page: a finger landing anywhere on a card had nowhere to go, and the
       only strip of the section that still scrolled the page was the margin
       either side of the slider. */
    overscroll-behavior-y: auto;
    touch-action: pan-x pan-y;
    padding: 0;
    gap: 0;
    transform: none !important;
    transition: none;
    scrollbar-width: none;
  }
  .projects-slider::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  .projects-slide {
    display: contents;
  }
  .projects-grid {
    display: contents;
    margin-top: 0;
    gap: 0;
  }
  .projects-slider > .reveal,
  .projects-slide > .reveal {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    padding: 0 6vw;
    box-sizing: border-box;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .projects-slider img {
    pointer-events: none;
    -webkit-user-drag: none;
  }
  /* Phones page the strip a card at a time with a finger, and the counter
     below states where they are. Arrows here would be a second, coarser way
     to do the same thing, sized for a mouse. */
  .projects-nav,
  .projects-dots {
    display: none;
  }
  .projects-counter {
    display: flex;
    margin-top: 24px;
  }
}

.project-card {
  display: block;
  text-align: center;
  cursor: pointer;
}
.project-card:focus-visible {
  outline: 2px solid var(--luce);
  outline-offset: 6px;
}
/* Keyboard focus reveals the same state as hover */
.project-card:focus-visible .project-img img {
  transform: scale(1.04);
  filter: grayscale(0) brightness(1);
}
.project-card:focus-visible .project-vignette {
  opacity: 0;
}
.project-img {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border: 1px solid var(--grafite);
  background: var(--notte);
  border-radius: 2px;
  max-height: min(270px, 20.5vh);
}
.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 700ms ease-out,
    filter 0.75s cubic-bezier(0.4, 0, 0.2, 1);
  /* Default: greyscale via filter on the img itself */
  filter: grayscale(1) brightness(0.85);
}
@media (hover: hover) {
  .project-card:hover .project-img img {
    transform: scale(1.04);
    filter: grayscale(0) brightness(1);
  }
}
/* A project whose CSV image column is still blank. It gets a labelled
   box rather than a broken image, and no vignette -- the gradient is
   tuned to sit over a photo and would swallow the label. */
.project-placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* Vignette fades out on hover */
.project-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 120% at 50% 50%,
    rgba(28, 28, 28, 0.2),
    rgba(0, 0, 0, 0.85)
  );
  transition: opacity 350ms;
  z-index: 3;
  pointer-events: none;
}
@media (hover: hover) {
  .project-card:hover .project-vignette {
    opacity: 0;
  }
}

/* ── Portfolio lightbox ──────────────────────────────────── */
.pf-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  padding: 24px;
}
.pf-lightbox.open {
  display: flex;
}
.pf-lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--luce);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) {
  .pf-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.16);
  }
}
.pf-lightbox-title {
  position: absolute;
  top: 26px;
  left: 24px;
  right: 80px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cenere);
  text-align: left;
}
.pf-lightbox-grid {
  display: grid;
  grid-template-columns: clamp(140px, 15vw, 260px) clamp(320px, 34vw, 640px) clamp(
      140px,
      15vw,
      260px
    );
  grid-template-rows: repeat(2, clamp(110px, 12.5vw, 220px));
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  justify-items: center;
}
.pf-thumb,
.pf-center {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--grafite);
}
.pf-thumb img,
.pf-center img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pf-thumb {
  /* button reset: the thumb is a real <button> so it is keyboard-reachable */
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  opacity: 0.55;
  transition: opacity 200ms;
}
@media (hover: hover) {
  .pf-thumb:hover,
  .pf-thumb:focus-visible {
    opacity: 1;
  }
}
.pf-thumb:focus-visible {
  outline: 2px solid var(--luce);
  outline-offset: 3px;
}
.pf-thumb[hidden] {
  display: none;
}
/* Empty slot waiting for a real photo: reads as a frame, not as content */
.pf-thumb-placeholder {
  opacity: 0.8;
  border-style: dashed;
}
@media (hover: hover) {
  .pf-thumb-placeholder:hover,
  .pf-thumb-placeholder:focus-visible {
    opacity: 1;
  }
}
/* Gallery smaller than 5 photos: drop the empty columns instead of padding them */
.pf-lightbox-grid[data-slots="1"] {
  grid-template-columns: clamp(320px, 34vw, 640px);
}
.pf-lightbox-grid[data-slots="2"],
.pf-lightbox-grid[data-slots="3"] {
  grid-template-columns: clamp(140px, 15vw, 260px) clamp(320px, 34vw, 640px);
}
.pf-lightbox-grid[data-slots="1"] #pfSlotCenter {
  grid-column: 1;
}
.pf-lightbox-grid[data-slots="2"] #pfSlotCenter,
.pf-lightbox-grid[data-slots="3"] #pfSlotCenter {
  grid-column: 2;
}
.pf-lightbox-grid[data-slots="2"] #pfSlotTL {
  grid-row: 1 / 3;
}
#pfSlotTL {
  grid-column: 1;
  grid-row: 1;
}
#pfSlotBL {
  grid-column: 1;
  grid-row: 2;
}
#pfSlotCenter {
  grid-column: 2;
  grid-row: 1 / 3;
  border-color: var(--luce);
}
#pfSlotTR {
  grid-column: 3;
  grid-row: 1;
}
#pfSlotBR {
  grid-column: 3;
  grid-row: 2;
}
.pf-lightbox-caption {
  text-align: center;
  margin-top: 24px;
}
.pf-lightbox-name {
  color: var(--luce);
  font-family: var(--text);
  font-size: 20px;
  font-weight: 600;
}
.pf-lightbox-meta {
  color: var(--cenere);
  font-family: var(--mono);
  font-size: 13px;
  margin-top: 4px;
}
.pf-lightbox-counter {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--cenere);
  opacity: 0.75;
}
.pf-lightbox-counter[hidden] {
  display: none;
}
.pf-lightbox-cta {
  margin-top: 24px;
}
/* "Explore All Projects" CTA -- same Liquid-Glass pill recipe used
   across the header/product pages, sized for inline placement rather
   than a full nav row. */
.pf-explore-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 22px;
  border-radius: 9999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--luce);
  text-decoration: none;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  -webkit-backdrop-filter: blur(10px) saturate(150%) brightness(1.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    border-color 200ms var(--ease),
    background 200ms var(--ease);
}
.pf-explore-cta::before {
  content: "";
  position: absolute;
  inset: 0 12px auto 12px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5) 45%,
    rgba(255, 255, 255, 0.5) 55%,
    transparent
  );
  pointer-events: none;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-explore-cta {
    background: rgba(32, 32, 36, 0.9);
  }
}
@media (hover: hover) {
  .pf-explore-cta:hover {
    border-color: rgba(255, 255, 255, 0.32);
  }
}
@media (hover: none) {
  .pf-explore-cta:hover {
    border-color: rgba(255, 255, 255, 0.16);
  }
}
/* Bigger viewer on computers: the photos fill about 80% of the screen.
   --pf-h is the height of the photo block, leaving room for the caption
   below; the side columns hold the other photos of the project. */
@media (min-width: 641px) {
  .pf-lightbox {
    --pf-h: min(36vw, calc(100vh - 230px));
  }
  .pf-lightbox-grid {
    width: 80vw;
    height: var(--pf-h);
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 1.8vw, 32px);
  }
  .pf-lightbox-grid[data-slots="1"] {
    width: min(80vw, calc(var(--pf-h) * 1.5));
    grid-template-columns: minmax(0, 1fr);
  }
  .pf-lightbox-grid[data-slots="2"],
  .pf-lightbox-grid[data-slots="3"] {
    width: min(80vw, calc(var(--pf-h) * 2.05));
    grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr);
  }
  .pf-lightbox-caption {
    margin-top: 18px;
  }
  .pf-lightbox-cta {
    margin-top: 16px;
  }
}
.pf-lightbox-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--luce);
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.pf-lightbox-arrow[hidden] {
  display: none !important;
}
.pf-lightbox-arrow-prev {
  left: 16px;
}
.pf-lightbox-arrow-next {
  right: 16px;
}
@media (max-width: 640px) {
  /* Centre photo on top, the rest of the same project as a filmstrip beneath it */
  .pf-lightbox-grid[data-slots] {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 8px;
    width: min(100%, 360px);
  }
  #pfSlotCenter {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .pf-thumb {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  #pfSlotTL {
    grid-column: 1;
    grid-row: 2;
  }
  #pfSlotBL {
    grid-column: 2;
    grid-row: 2;
  }
  #pfSlotTR {
    grid-column: 3;
    grid-row: 2;
  }
  #pfSlotBR {
    grid-column: 4;
    grid-row: 2;
  }
  .pf-lightbox-arrow {
    display: flex;
  }
  .pf-lightbox-title {
    font-size: 10px;
    top: 22px;
  }
}

/* ── Spotlight canvas overlay ─────────────────────────────────────── */
#spotlight-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  /* canvas is transparent by default, drawn only on hover */
}

.project-placeholder {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.project-name {
  font-family: var(--text);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--luce);
  margin-top: 20px;
}
.project-meta {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 0.02em;
  color: var(--cenere);
  margin-top: 8px;
}

/* ── SERVICES ──────────────────────────────────────────────────────── */
#services {
  background: var(--notte);
  padding: var(--sp) 0;
}
.services-list {
  margin-top: clamp(32px, 5vw, 64px);
}
.service-row {
  border-top: 1px solid var(--grafite);
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  cursor: default;
}
.service-row:last-child {
  border-bottom: 1px solid var(--grafite);
}
.service-name {
  font-family: var(--text);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.2;
  color: var(--luce);
  transition: text-shadow 250ms;
}
@media (hover: hover) {
  .service-row:hover .service-name {
    text-shadow:
      0 0 18px rgba(250, 250, 250, 0.55),
      0 0 40px rgba(201, 201, 201, 0.35);
  }
}
.service-num {
  font-family: var(--mono);
  font-size: 19px;
  color: var(--cenere);
}
.service-desc {
  font-family: var(--mono);
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--cenere);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height 250ms var(--ease),
    opacity 250ms;
  padding-top: 0;
}
@media (hover: hover) {
  .service-row:hover .service-desc {
    max-height: 120px;
    opacity: 1;
    padding-top: 12px;
  }
}

/* ── GLOBAL TEXT GLOW (all non-hero text) ─────────────────────────── */
section:not(#hero)
  :is(
    .h1,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    .eyebrow,
    .service-name,
    .service-desc,
    .service-num,
    .project-name,
    .project-meta,
    .cert-desc,
    .cert-code,
    .studio-body
  ),
#hero :is(.hero-title, .hero-sub, .hero-body) {
  transition: text-shadow 250ms;
}
/* Hover-gated: a touch browser latches :hover on whatever was tapped
   last and never releases it, which would leave one random heading
   glowing for the rest of the session. */
@media (hover: hover) {
  section:not(#hero)
    :is(
      .h1,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      .eyebrow,
      .service-name,
      .service-desc,
      .service-num,
      .project-name,
      .project-meta,
      .cert-desc,
      .cert-code,
      .studio-body
    ):hover {
    text-shadow:
      0 0 18px rgba(250, 250, 250, 1),
      0 0 40px rgba(201, 201, 201, 0.85);
  }
  #hero :is(.hero-title, .hero-sub, .hero-body):hover {
    text-shadow:
      0 0 18px rgba(250, 250, 250, 0.85),
      0 0 40px rgba(201, 201, 201, 0.65);
  }
}

/* ── STUDIO ──────────────────────────────────────────────────────── */
#studio {
  background: var(--ombra);
  padding: var(--sp) 0;
}
.studio-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
  margin-top: 0;
}
.studio-img {
  position: relative;
  aspect-ratio: 4/3;
  max-height: min(560px, 60vh);
  overflow: hidden;
  border: 1px solid var(--grafite);
  background: var(--notte);
  border-radius: 2px;
}
.studio-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.studio-img-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 120% at 50% 40%,
    rgba(28, 28, 28, 0.15),
    rgba(0, 0, 0, 0.8)
  );
}
.studio-text p.eyebrow {
  margin-bottom: 12px;
}
.studio-text h2 {
  margin-top: 12px;
  color: var(--luce);
}
.studio-body {
  font-family: var(--text);
  font-size: clamp(20px, 1.9vw, 28px);
  line-height: 1.65;
  color: var(--cenere);
  margin-top: 32px;
  max-width: 640px;
  white-space: pre-line; /* keep the paragraph breaks of the studio text */
}

/* Contact form styles moved to contact.html; the old .footer-* block
   is gone -- every page now mounts site-footer.js's #site-footer. */

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
/* ── TABLET 1024px ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hamburger {
    display: block;
  }
  nav a {
    font-size: 17px;
  }
  .projects-grid {
    gap: 18px;
  }
  .studio-grid {
    gap: 32px;
  }
}

/* ── SMALL TABLET / LARGE PHONE 768px ─────────────────────────────── */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .studio-grid {
    grid-template-columns: 1fr;
  }
  .studio-img {
    order: 2;
  }
  .studio-text {
    order: 1;
  }
  /* services: show full descriptions on mobile */
  .service-row {
    align-items: flex-start;
    gap: 16px;
  }
  .service-desc {
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding-top: 12px;
  }

  /* ── PORTFOLIO CARD ──────────────────────────────────────────────
     These have to sit here rather than next to the carousel rules
     further up: the .project-img / .project-name base declarations
     come after that block, so an override placed there loses on
     source order. */
  .project-img {
    /* one card across = the desktop 270px cap would letterbox the art
       to 311x173 instead of the intended 4:3 */
    max-height: none;
  }
  .project-name {
    font-size: 22px;
    margin-top: 16px;
  }
  .project-meta {
    font-size: 15px;
  }
  .service-name {
    font-size: 22px;
  }
  .service-desc {
    font-size: 16px;
  }
  .service-num {
    font-size: 15px;
  }
  .studio-body {
    font-size: 17px;
    margin-top: 24px;
  }

  /* ── TOUCH TARGETS ───────────────────────────────────────────────
     Footer/contact links are 18-21px tall as inline text. Padding the
     anchors (rather than the list items) keeps the visual rhythm from
     the negative-margin trick already used on .footer-social. */
}

/* ── TABLET / MOBILE HERO FIX ─────────────────────────────────────── */
/* Header sizing on mobile now lives in site-chrome.js's own stylesheet.
   It is injected into <head> at runtime, i.e. after this <style>, so a
   .wordmark / .header-inner override here can never win. */
@media (max-width: 900px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    text-align: center;
    padding-bottom: clamp(40px, 8vw, 96px);
    gap: 0;
  }
  .hero-inner {
    padding: 0 var(--mx);
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
  }
  .hero-title {
    font-size: clamp(56px, 14vw, 120px);
  }
  .hero-sub,
  .hero-body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
  }
  .hero-sub {
    font-size: clamp(16px, 4.2vw, 28px);
  }
  .hero-mark {
    width: clamp(160px, 32vw, 260px);
    left: 50%;
    top: calc(50% - 170px);
    transform: translate(-50%, -50%);
  }
  .hero-ctas {
    justify-content: center;
    align-items: stretch;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 480px) {
  .header-inner {
    padding: 10px var(--mx);
  }
  .wordmark {
    height: 34px;
  }
  .hero-ctas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 28px;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    padding: 16px 14px;
  }
  .hero-title {
    letter-spacing: -0.015em;
    font-size: clamp(48px, 15vw, 88px);
  }
  .hero-mark {
    width: clamp(130px, 36vw, 200px);
    left: 50%;
    top: calc(50% - 200px);
    transform: translate(-50%, -50%);
  }
}

/* ── TOUCH ──────────────────────────────────────────────────────────
   Nothing here reaches a mouse: (hover: none) is false on every desktop
   pointer. The portfolio's greyscale-until-hover treatment has no
   trigger on a phone, so the carousel promotes whichever card is
   snapped into view instead (.is-active, set by the scroll handler). */
@media (hover: none) {
  a,
  button,
  [role="button"],
  input,
  select,
  textarea,
  label {
    -webkit-tap-highlight-color: transparent;
  }
  a,
  button,
  [role="button"] {
    touch-action: manipulation;
  }
  .glow-edge:hover {
    border-color: var(--grafite);
    box-shadow: none;
  }
  .service-row:hover .service-name {
    text-shadow: none;
  }
  .project-card:hover .project-img img {
    transform: none;
    filter: grayscale(1) brightness(0.85);
  }
  .project-card:hover .project-vignette {
    opacity: 1;
  }
  .project-card:active .project-img {
    border-color: var(--nebbia);
  }
  .btn-primary:hover {
    background: var(--bianco);
  }
  .btn-primary:active {
    background: var(--nebbia);
  }
  .btn-secondary:hover {
    background: transparent;
    color: var(--luce);
  }
  .btn-secondary:active {
    background: var(--luce);
    color: var(--ombra);
  }
  .pf-thumb:hover {
    opacity: 0.55;
  }
  .pf-thumb:active {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  .project-card.is-active .project-img img,
  .projects-slider .reveal.is-active .project-img img {
    filter: grayscale(0) brightness(1);
  }
  .project-card.is-active .project-vignette,
  .projects-slider .reveal.is-active .project-vignette {
    opacity: 0;
  }
  .project-card.is-active .project-img {
    border-color: rgba(250, 250, 250, 0.45);
  }
  /* the slider owns horizontal panning; vertical stays with the page */
  .projects-slider {
    touch-action: pan-x pan-y;
  }
  .pf-lightbox {
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .pf-lightbox-close {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }
  .pf-lightbox-name {
    font-size: 17px;
  }
  .pf-lightbox-meta {
    font-size: 12px;
  }
  .pf-lightbox-caption {
    margin-top: 16px;
  }
  .pf-lightbox-cta {
    margin-top: 16px;
    height: 44px;
  }
  .pf-lightbox-grid {
    touch-action: pan-y;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  .reveal {
    transition: none !important;
    animation: none !important;
  }
  .hero-title,
  .hero-sub,
  .hero-body,
  .hero-ctas {
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}
/* S1: present to screen readers and to the heading outline, absent
   from the visual design. clip-path rather than display:none, which
   would remove it from the accessibility tree entirely. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * Legibility floor: nothing below 12px on a small screen.
 *
 * These labels are set at 10-11px mono, which reads as a quiet register on a
 * desktop and as unreadable on a phone. 12px is the smallest mono size the
 * site already uses elsewhere, so this borrows a value rather than inventing
 * one. Gated on width rather than pointer: it is a typographic scale, and
 * above 900px a tablet shows the desktop composition and keeps its type.
 */
@media (max-width: 900px) {
  .project-placeholder {
    font-size: 12px;
  }
  .pf-explore-cta {
    font-size: 12px;
  }
}

/* Big titles are wide capitals: on phones keep them to ~8% of the
   screen width so long words (MONTERIGGIONI, COLLABORAZIONI) still fit. */
@media (max-width: 600px) {
  .h1 {
    font-size: min(21.6px, 4.8vw);
  }
}

/* ── Company key facts (from the 2025-26 Company Profile) ── */
.studio-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px) clamp(20px, 3vw, 40px);
  margin: clamp(28px, 3.4vw, 44px) 0 0;
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--grafite);
}
.studio-facts dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oro);
}
.studio-facts dd {
  margin: 8px 0 0;
  font-family: var(--text);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--luce);
}
@media (max-width: 520px) {
  .studio-facts {
    grid-template-columns: 1fr;
  }
}

/* ── Company photo: whole picture, black & white, colour on hover ──
   The frame takes the photo's own 3:2 shape and the image is never
   cropped (contain). Grey by default to suit the dark page; hovering
   (or tapping, on touch screens) brings back the real colours and lifts
   the dark vignette. */
.studio-img {
  aspect-ratio: 3 / 2;
  max-height: none;
}
.studio-img img {
  display: block;
  object-fit: contain;
  transition:
    filter 700ms var(--ease),
    transform 900ms var(--ease);
}
.studio-img-overlay {
  transition: opacity 700ms var(--ease);
}
.studio-img:hover img,
.studio-img:active img {
  filter: grayscale(0);
  transform: scale(1.015);
}
.studio-img:hover .studio-img-overlay,
.studio-img:active .studio-img-overlay {
  opacity: 0.25;
}

/* ── Hero sound button ── */
.hero-sound {
  position: absolute;
  right: var(--mx);
  bottom: clamp(20px, 4vh, 44px);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px 0 14px;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--luce);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 200ms var(--ease),
    background 200ms var(--ease);
}
.hero-sound[hidden] {
  display: none;
}
.hero-sound svg {
  width: 18px;
  height: 18px;
}
.hero-sound .hs-on,
.hero-sound.is-on .hs-off {
  display: none;
}
.hero-sound.is-on .hs-on {
  display: block;
  color: var(--oro);
}
.hero-sound.is-on {
  border-color: rgba(201, 169, 98, 0.6);
}
@media (hover: hover) {
  .hero-sound:hover {
    border-color: rgba(201, 169, 98, 0.7);
    background: rgba(0, 0, 0, 0.5);
  }
}
@media (max-width: 600px) {
  .hero-sound {
    height: 40px;
    padding: 0 12px;
  }
  .hero-sound .hs-label {
    display: none;
  }
}

/* 2026-10-29: no glow when hovering texts or the company photo */
@media (hover: hover) {
  section:not(#hero) :is(.h1, h1, h2, h3, h4, h5, h6, p, .eyebrow, .service-name, .service-desc, .service-num, .project-name, .project-meta, .cert-desc, .cert-code, .studio-body):hover,
  #hero :is(.hero-title, .hero-sub, .hero-body):hover,
  .service-row:hover .service-name {
    text-shadow: none;
  }
  .glow-edge:hover,
  .glow-edge:focus-within {
    border-color: var(--grafite);
    box-shadow: none;
  }
}
.studio-img.glow-edge,
.studio-img {
  border-color: transparent;
}

/* 2026-10-29: portfolio photos at a proper 3:2 shape, not capped into strips */
@media (min-width: 901px) {
  .projects-slider .project-img {
    aspect-ratio: 3 / 2;
    max-height: none;
  }
}

/* 2026-10-29 (b) ─────────────────────────────────────────────────────
   Scroll fix: the portfolio strip scrolls sideways only. Its cards rise
   24px into place as they appear, which gave the strip a little height to
   scroll too, so the mouse wheel got stuck there instead of moving the page. */
.projects-slider {
  overflow-y: hidden;
}

/* Quick view: solid black, no frames, photos fade softly at the edges,
   arrows on the big photo */
.pf-lightbox {
  background: #000;
}
.pf-thumb,
.pf-center,
#pfSlotCenter,
.pf-thumb-placeholder {
  border: 0 !important;
  border-radius: 0;
}
.pf-thumb img,
.pf-center img {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
#pfSlotCenter {
  position: relative;
}
.pf-lightbox .pf-lightbox-arrow:not([hidden]) {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}
.pf-lightbox .pf-lightbox-arrow svg {
  width: 22px;
  height: 22px;
}
.pf-lightbox .pf-lightbox-arrow-prev {
  left: 4%;
}
.pf-lightbox .pf-lightbox-arrow-next {
  right: 4%;
}
@media (hover: hover) {
  .pf-lightbox .pf-lightbox-arrow:hover {
    background: rgba(0, 0, 0, 0.7);
    border-color: var(--oro);
  }
}
@media (max-width: 640px) {
  .pf-lightbox .pf-lightbox-arrow:not([hidden]) {
    width: 40px;
    height: 40px;
  }
}

/* 2026-10-29 (c): quick view photos shown plainly again (no edge fade);
   no frame lines around the project photos, on hover or otherwise;
   the project type and place in gold */
.pf-thumb img,
.pf-center img {
  -webkit-mask-image: none;
  mask-image: none;
}
.project-img,
.project-card:hover .project-img,
.project-card:active .project-img,
.project-card.is-active .project-img {
  border: 0 !important;
}
.project-meta {
  color: var(--oro);
}

/* 2026-10-29 (d): company text and photo side by side, top and bottom
   level (the text size is set by a small script in ombre1.html) */
@media (min-width: 769px) {
  .studio-grid.studio-fit {
    align-items: start;
  }
  .studio-grid.studio-fit .studio-body {
    max-width: none;
    line-height: 1.6;
  }
}