/* ============================================================
   Self-hosted IBM Plex Sans (variable, latin + latin-ext).
   Previously pulled from fonts.gstatic.com on every page view,
   which sent the visitor's IP to Google before any consent could
   be given. Serving the files from our own origin removes that
   third-party request entirely, so no consent is required for
   typography and the first paint is faster.
   ============================================================ */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../MEDIA/fonts/ibm-plex-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../MEDIA/fonts/ibm-plex-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Edilstasi e Company — design tokens
   ============================================================ */

:root {
  --stone: #f3eee2;
  --stone-dim: #ddd5c5;
  --ink: #1c1e1a;
  --ink-soft: #4a4a42;
  --petrol: #15323a;
  --petrol-deep: #0f272d;
  --night: #060d14; /* near-black navy: footer only, sets it apart from the petrol sections */
  --cypress: #5a6b4f;
  --brass: #a9803e;
  --brass-bright: #c29a52;
  --brass-deep: #8a6428; /* AA-safe brass for text on stone/paper and as a fill under paper text */
  --hairline: #c9c2b4;
  --hairline-on-dark: rgba(232, 226, 214, 0.22);
  --paper: #f4f1e9;

  --font-display: "IBM Plex Sans", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;

  --content-max: 1180px;
  --gutter: clamp(20px, 5vw, 72px);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  --ambient-glow:
    radial-gradient(circle at 20% 15%, rgba(94, 163, 153, 0.32) 0%, rgba(94, 163, 153, 0.2) 20%, rgba(94, 163, 153, 0.09) 38%, transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(194, 154, 82, 0.28) 0%, rgba(194, 154, 82, 0.16) 20%, rgba(194, 154, 82, 0.07) 38%, transparent 58%);
}

/* ============================================================
   Reset & base
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    /* Decorative motion is removed, but hover/focus/selected states still
       change: colour and opacity only, no movement. */
    transition-property: color, background-color, border-color, opacity, outline-color !important;
    transition-duration: 0.15s !important;
    transition-delay: 0s !important;
  }
}

/* ============================================================
   Scroll reveal — "fade in up"
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.reveal--delay-1 {
  --reveal-delay: 0.12s;
}

.reveal--delay-2 {
  --reveal-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   Title reveal — words fade up one after another
   (spans injected by title-reveal.js)
   ============================================================ */

.title-split .tw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.45em);
  transition: opacity 0.8s var(--ease-premium), transform 0.8s var(--ease-premium);
  transition-delay: calc(var(--i) * 110ms + var(--tw-base, 0.15s));
}

.title-split.is-in .tw {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .title-split .tw {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

body {
  margin: 0;
  max-width: 100%;
  overflow-x: hidden;
  overflow-wrap: break-word;
  background: var(--stone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
}

/* <picture> only chooses the file; the <img> inside keeps its layout. */
picture {
  display: contents;
}

a {
  color: inherit;
}

button {
  font-family: inherit;
}

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Focus visibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Horizon rule — the one recurring structural device */
.horizon {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: 0;
}
.horizon--dark {
  border-top-color: var(--hairline-on-dark);
}

/* ============================================================
   Header / nav
   ============================================================ */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--gutter);
  color: var(--paper);
  mix-blend-mode: normal;
  text-shadow: 0 1px 12px rgba(15, 39, 45, 0.45);
}

/* Scrim runs past the header so bright hero frames never wash out the text. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 -32px 0;
  background: linear-gradient(to bottom, rgba(15, 39, 45, 0.72) 0%, rgba(15, 39, 45, 0.38) 55%, rgba(15, 39, 45, 0) 100%);
  z-index: -1;
  pointer-events: none;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 0.02em;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.wordmark em {
  font-style: italic;
  color: var(--brass-bright);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 40px);
}

.main-nav__links {
  display: flex;
  gap: clamp(16px, 2.6vw, 32px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav__links a {
  text-decoration: none;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease-premium), opacity 0.35s var(--ease-premium);
}

.main-nav__links a:hover {
  border-bottom-color: var(--brass-bright);
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.lang-toggle button {
  background: none;
  border: none;
  color: var(--paper);
  opacity: 0.72;
  cursor: pointer;
  padding: 4px 2px;
  letter-spacing: 0.04em;
  transition: opacity 0.25s var(--ease);
}

.lang-toggle button[aria-pressed="true"] {
  opacity: 1;
  border-bottom: 1px solid var(--brass-bright);
}

.lang-toggle span {
  opacity: 0.4;
}

/* Burger — homepage only, shown below 900px. */
.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    padding: 0;
    background: none;
    border: none;
    color: var(--paper);
    cursor: pointer;
  }

  .nav-toggle span {
    display: block;
    width: 24px;
    height: 1.5px;
    background: currentColor;
    filter: drop-shadow(0 1px 4px rgba(15, 39, 45, 0.45));
    transition: transform 0.35s var(--ease-premium), opacity 0.2s var(--ease);
  }

  .site-header--menu.is-open .nav-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }

  .site-header--menu.is-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }

  .site-header--menu.is-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .site-header--menu.is-open {
    background: var(--petrol-deep);
  }

  .site-header--menu.is-open::before {
    opacity: 0;
  }

  .site-header--menu .main-nav {
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px var(--gutter) 28px;
    background: var(--petrol-deep);
    border-top: 1px solid var(--hairline-on-dark);
    box-shadow: 0 18px 30px rgba(6, 13, 20, 0.35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.35s var(--ease-premium), transform 0.35s var(--ease-premium), visibility 0s linear 0.35s;
  }

  .site-header--menu.is-open .main-nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  .site-header--menu .main-nav__links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .site-header--menu .main-nav__links a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    border-bottom: 1px solid var(--hairline-on-dark);
  }

  .site-header--menu .main-nav__links a:hover {
    border-bottom-color: var(--hairline-on-dark);
    color: var(--brass-bright);
  }

  .site-header--menu .lang-toggle {
    order: 0;
    margin-top: 20px;
    font-size: 14px;
  }

  .site-header--menu .btn--nav {
    order: 0;
    align-self: flex-start;
    margin-top: 20px;
  }
}

/* ============================================================
   Hero
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--paper);
  overflow: hidden;
  background: var(--petrol);
}

.hero__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(90, 107, 79, 0.35), transparent 55%),
    linear-gradient(160deg, #1c3f47 0%, #0f272d 55%, #0a1c20 100%);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 20, 22, 0.78) 0%, rgba(10, 20, 22, 0.18) 46%, transparent 72%);
}

.hero__content {
  position: relative;
  padding: 0 var(--gutter) clamp(56px, 9vw, 108px);
  max-width: 880px;
}

.hero__kicker {
  font-size: 15px;
  color: var(--stone-dim);
  margin: 0 0 18px;
  opacity: 0;
  animation: rise 0.9s var(--ease) 0.15s forwards;
}

.hero__headline {
  --split-dist: 45vw;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 9vw, 104px);
  line-height: 0.98;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 22px;
  opacity: 0;
  animation: rise 1s var(--ease) 0.3s forwards;
}

/* Longer titles (Residence Due Laghi) run a size smaller. */
.hero__headline--long {
  font-size: clamp(30px, 7.6vw, 104px);
}

/* Staggered two-line title; hero-split.js drives --split (0–1) on scroll. */
.hero__line {
  display: block;
  text-align: left;
  text-wrap: balance;
  translate: calc(var(--split, 0) * -1 * var(--split-dist)) 0;
  will-change: translate;
}

.hero__line--bottom {
  text-align: right;
  translate: calc(var(--split, 0) * var(--split-dist)) 0;
}

.hero__headline.title-split {
  opacity: 1;
  animation: none;
  --tw-base: 0.3s;
}

.hero__lede {
  font-size: clamp(16px, 1.6vw, 19px);
  max-width: 46ch;
  color: rgba(244, 241, 233, 0.86);
  margin: 0 0 34px;
  opacity: 0;
  animation: rise 1s var(--ease) 1.1s forwards;
}

.hero__horizon {
  margin-bottom: 30px;
  max-width: 420px;
  opacity: 0;
  animation: widen 1.1s var(--ease) 1.25s forwards;
  transform-origin: left;
}

.hero__badges {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 420px;
  margin-bottom: 34px;
}

.hero__badge {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--hairline-on-dark);
  border-left: 2px solid var(--brass-bright);
  background: rgba(244, 241, 233, 0.04);
  opacity: 0;
  animation: badgeSlideIn 1s var(--ease) 0.66s forwards;
}

.hero__badges .hero__badge:nth-child(2) {
  animation-delay: 0.78s;
}

.hero__badge-emblem {
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--brass-bright);
}

.hero__badge-emblem svg {
  width: 100%;
  height: 100%;
}

.hero__badge-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--paper);
}

.hero__badges--corner {
  position: absolute;
  top: 84px;
  left: var(--gutter);
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  max-width: 200px;
  margin: 0;
}

.hero__badges--corner .hero__badge {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  animation-name: badgeSlideIn;
}

.hero__badges--corner .hero__badge-emblem {
  width: 38px;
  height: 38px;
}

.hero__badges--corner .hero__badge-title {
  font-size: 13.5px;
}

.hero__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  opacity: 0;
  animation: rise 1s var(--ease) 1.4s forwards;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes badgeSlideIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes widen {
  from {
    opacity: 0;
    transform: scaleX(0.4);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (min-width: 901px) {
  .hero__content {
    margin-inline: auto;
    text-align: center;
  }

  .hero__lede,
  .hero__horizon {
    margin-inline: auto;
  }

  /* Title spans the viewport (like the reference), the rest stays in the 880px column. */
  .hero__headline {
    font-size: clamp(64px, 7.2vw, 168px);
    width: min(100vw - 2 * var(--gutter), 2400px);
    margin-inline: calc((100% - min(100vw - 2 * var(--gutter), 2400px)) / 2);
  }

  .hero__headline--long {
    font-size: clamp(52px, 5.6vw, 132px);
  }

  .hero__horizon {
    transform-origin: center;
  }

  .hero__actions {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__kicker,
  .hero__headline,
  .hero__lede,
  .hero__horizon,
  .hero__badges .hero__badge,
  .hero__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .hero__line {
    translate: none;
  }
}

/* Rising squares — injected by hero-squares.js, clipped by the hero. */
.hero-squares {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-squares span {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: var(--s);
  height: var(--s);
  border: 1px solid rgba(244, 241, 233, 0.42);
  border-radius: 2px;
  translate: 0 calc(var(--hero-scroll, 0) * var(--speed) * var(--lift, 1) * -1px);
  animation: squareRise var(--d) linear var(--delay) infinite;
  will-change: transform;
}

.hero-squares span.is-solid {
  border-color: transparent;
  background: rgba(244, 241, 233, 0.2);
}

/* The showcase is several screens tall: a gentler scroll lift keeps its
   lower part populated. */
.hero-squares--circles {
  --lift: 0.2;
}

.hero-squares--circles span {
  border-radius: 50%;
  animation-name: circleRise;
}

@keyframes squareRise {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--sway), calc(var(--rise, 110svh) * -1), 0) rotate(45deg);
    opacity: 0;
  }
}

@keyframes circleRise {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  15% {
    opacity: 0.85;
  }
  75% {
    opacity: 0.55;
  }
  100% {
    transform: translate3d(var(--sway), calc(var(--rise, 110svh) * -1), 0);
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .hero-squares span:nth-child(n + 9) {
    display: none;
  }

  .hero-squares--circles span:nth-child(n + 9):nth-child(-n + 10) {
    display: block;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-squares {
    display: none;
  }
}

/* ============================================================
   Feature strip
   ============================================================ */

.features {
  background: var(--ambient-glow), var(--petrol-deep);
  color: var(--paper);
  padding-block: clamp(48px, 7vw, 80px);
  border-top: 1px solid var(--hairline-on-dark);
}

.features__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.features__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.features__icon {
  width: 48px;
  height: 48px;
  color: var(--brass-bright);
  opacity: 0;
  scale: 0.4;
  transition: transform 0.35s var(--ease-premium);
}

/* Pops in once the item's scroll reveal fires: fade, overshoot, settle. */
.features__item.is-visible .features__icon {
  animation: iconPop 1.1s var(--ease-premium) calc(var(--reveal-delay, 0s) + 0.15s) forwards;
}

@keyframes iconPop {
  0% {
    opacity: 0;
    scale: 0.4;
  }
  55% {
    opacity: 1;
    scale: 1.25;
  }
  75% {
    scale: 0.92;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .features__icon {
    opacity: 1;
    scale: 1;
  }
}

@media (hover: hover) {
  .features__item:hover .features__icon {
    transform: scale(1.18);
  }
}

.features__icon svg {
  width: 100%;
  height: 100%;
}

.features__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

.features__desc {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(244, 241, 233, 0.68);
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--brass-bright);
  background: transparent;
  color: var(--paper);
  padding: 13px 26px;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-premium), color 0.4s var(--ease-premium),
    border-color 0.4s var(--ease-premium), transform 0.4s var(--ease-premium),
    box-shadow 0.4s var(--ease-premium);
}

.btn:hover,
.btn:focus-visible {
  background: var(--brass-bright);
  color: var(--petrol-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -16px rgba(10, 20, 22, 0.45);
}

.btn:active {
  transform: translateY(0);
  box-shadow: none;
  transition-duration: 0.15s;
}

.btn--solid {
  background: var(--brass-deep);
  border-color: var(--brass-deep);
  color: var(--paper);
}

.btn--solid:hover,
.btn--solid:focus-visible {
  background: var(--brass-bright);
  border-color: var(--brass-bright);
  color: var(--petrol-deep);
}

.btn--nav {
  padding: 8px 18px;
  font-size: 13.5px;
  position: relative;
  border-color: transparent;
}

.btn--nav::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  background: linear-gradient(115deg, #ffffff, #bfe6e2, var(--petrol), #bfe6e2, #ffffff);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: btn-wave 10s ease-in-out infinite;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.btn--nav:hover::before,
.btn--nav:focus-visible::before {
  opacity: 0;
}

.btn--wave {
  border-color: transparent;
  background: linear-gradient(120deg, var(--brass-bright), #5ea399, var(--petrol), #5ea399, var(--brass-bright));
  background-size: 300% 300%;
  animation: btn-wave 10s ease-in-out infinite;
}

.btn--wave:hover,
.btn--wave:focus-visible {
  color: var(--petrol-deep);
  animation-duration: 4s;
}

/* Gold variant — the apartments page's CTA, reused on the homepage. Dark
   label, because paper would disappear against the cream stops. */
.btn--wave-gold {
  background-image: linear-gradient(120deg, #c9a24a, #f4e7c9, #dcb968, #f4e7c9, #c9a24a);
  color: #150e08;
}

.btn--wave-gold:hover,
.btn--wave-gold:focus-visible {
  color: #150e08;
}

@keyframes btn-wave {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero__scroll-hint {
  font-size: 13px;
  color: rgba(244, 241, 233, 0.55);
}

/* ============================================================
   Section shell
   ============================================================ */

.section {
  padding-block: clamp(64px, 10vw, 120px);
}

.section--dark {
  position: relative;
  isolation: isolate;
  background: var(--petrol);
  color: var(--paper);
}

.section--dark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--ambient-glow);
}

/* Light sections are plain white. The scroll-driven ones (.method, .why)
   are not .section and keep their ambient glow. */
.section:not(.section--dark):not(.section--lake) {
  position: relative;
  isolation: isolate;
  background: #fff;
}

.section__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.005em;
}

/* ============================================================
   Active project
   ============================================================ */

.project {
  padding-block: 0;
}

.project__showcase {
  position: relative;
  padding-block: clamp(64px, 10vw, 120px);
  overflow: hidden;
}

.project__showcase-media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 10% 150px, transparent 38px, rgba(194, 154, 82, 0.34) 40px, transparent 43px),
    radial-gradient(circle at 10% 150px, transparent 66px, rgba(194, 154, 82, 0.24) 68px, transparent 71px),
    radial-gradient(circle at 10% 150px, transparent 96px, rgba(194, 154, 82, 0.15) 98px, transparent 101px),
    radial-gradient(circle at 88% 130px, transparent 30px, rgba(194, 154, 82, 0.34) 32px, transparent 35px),
    radial-gradient(circle at 88% 130px, transparent 54px, rgba(194, 154, 82, 0.24) 56px, transparent 59px),
    radial-gradient(circle at 88% 130px, transparent 78px, rgba(194, 154, 82, 0.15) 80px, transparent 83px),
    radial-gradient(ellipse at 50% 40%, rgba(169, 128, 62, 0.08), transparent 60%),
    linear-gradient(160deg, #1c3f47 0%, #0f272d 55%, #0a1c20 100%);
}

@media (max-width: 900px) {
  .project__showcase-media {
    background:
      radial-gradient(circle at 14% 60px, transparent 22px, rgba(194, 154, 82, 0.36) 24px, transparent 27px),
      radial-gradient(circle at 14% 60px, transparent 40px, rgba(194, 154, 82, 0.24) 42px, transparent 45px),
      radial-gradient(circle at 14% 60px, transparent 58px, rgba(194, 154, 82, 0.15) 60px, transparent 63px),
      radial-gradient(circle at 86% 60px, transparent 18px, rgba(194, 154, 82, 0.36) 20px, transparent 23px),
      radial-gradient(circle at 86% 60px, transparent 32px, rgba(194, 154, 82, 0.24) 34px, transparent 37px),
      radial-gradient(circle at 86% 60px, transparent 46px, rgba(194, 154, 82, 0.15) 48px, transparent 51px),
      radial-gradient(ellipse at 50% 35%, rgba(169, 128, 62, 0.09), transparent 55%),
      linear-gradient(160deg, #1c3f47 0%, #0f272d 55%, #0a1c20 100%);
  }
}

.project__showcase-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 22, 0.88) 0%, rgba(10, 20, 22, 0.72) 40%, rgba(10, 20, 22, 0.88) 100%);
}

.project__showcase > .wrap {
  position: relative;
  z-index: 1;
}

/* The penthouse button under "In vendita" sits as close to the photo as the
   apartments button sits to the distances box below it. */
.project__showcase .section__head {
  margin-bottom: 0;
}

.project__showcase .project__grid {
  margin-top: 24px;
}

.project__showcase .project__location {
  color: var(--stone-dim);
}

.project__showcase .section__heading {
  color: var(--paper);
}

.project__showcase .project__info {
  background: rgba(244, 241, 233, 0.94);
  border: 1px solid var(--hairline);
  padding: clamp(24px, 3vw, 36px);
}

.project > .contact {
  margin-top: 0;
}

.project__location {
  font-size: 14px;
  color: var(--cypress);
  margin: 0 0 6px;
  letter-spacing: 0.01em;
}

.project__price {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 28px);
  color: var(--brass-bright);
  margin: 0;
}

/* Status + penthouse button, stacked and left-aligned under the title. */
.project__head-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.project__price-dot {
  position: relative;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: var(--brass-bright);
}

.project__price-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brass-bright);
  animation: price-pulse 2.2s var(--ease) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .project__price-dot::after {
    animation: none;
  }
}

@keyframes price-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.project__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: stretch;
  gap: clamp(28px, 4vw, 56px);
  margin-top: 48px;
}

.project__gallery {
  display: grid;
  gap: 0;
  /* the column is stretched to match the specs column — its rows are not */
  align-content: start;
}

.project__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  /* the gallery column is stretched to match the specs column — the buttons are not */
  align-self: start;
  margin-top: 10px;
}

/* Desktop: the column is stretched to the specs column beside it, so pin the
   buttons and the distances box to its bottom and let the story breathe. */
@media (min-width: 901px) {
  .project__gallery {
    display: flex;
    flex-direction: column;
  }

  .project__ctas {
    margin-top: auto;
  }
}

.project__gallery-main {
  aspect-ratio: 4 / 3;
}

#project-gallery-main {
  cursor: pointer;
  transition: border-color 0.35s var(--ease);
}

#project-gallery-main:hover,
#project-gallery-main:focus-visible {
  border-color: var(--brass);
  box-shadow: 0 22px 40px -22px rgba(15, 39, 45, 0.35);
}

#project-gallery-main:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

/* Click hint: a small down arrow, top-centre, on the page photos that open a
   popup — featured photo, portfolio rows and the property pages' full-bleed
   slider. Photos inside the popups stay clean. */
#project-gallery-main::after,
.portfolio-row__media::after,
.section--glimpse::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 3;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border-radius: 50%;
  border: 1px solid rgba(244, 241, 233, 0.55);
  box-shadow: 0 4px 14px rgba(6, 13, 20, 0.35);
  background-color: rgba(15, 39, 45, 0.62);
  background-image: url("../MEDIA/icons/photo-hint-arrow.svg");
  background-position: center 55%;
  background-size: 18px;
  background-repeat: no-repeat;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: background-color 0.35s var(--ease);
  animation: hintNudge 2.4s var(--ease) infinite;
}

#project-gallery-main:hover::after,
#project-gallery-main:focus-visible::after,
.portfolio-row:hover .portfolio-row__media::after,
.portfolio-row:focus-visible .portfolio-row__media::after,
.section--glimpse:hover::after {
  background-color: rgba(169, 128, 62, 0.85);
}

@keyframes hintNudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 5px;
  }
}

#project-gallery-main img {
  transition: transform 0.5s var(--ease-premium);
}

#project-gallery-main:hover img,
#project-gallery-main:focus-visible img {
  transform: scale(1.02);
}

.project__story {
  position: relative;
  margin-top: 18px;
  padding: 28px clamp(20px, 3vw, 32px) 4px;
  border-top: 1px solid rgba(244, 241, 233, 0.16);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.65;
  color: var(--stone-dim);
}

.project__story p {
  position: relative;
  margin: 0;
  padding-left: 30px;
}

/* An arrow before each paragraph marks them as two separate descriptions. */
.project__story p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 18px;
  height: 12px;
  background: url("../MEDIA/icons/story-arrow.svg") center / contain no-repeat;
}

.project__story p + p {
  margin-top: 14px;
}

.project__story::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(20px, 3vw, 32px);
  width: 48px;
  height: 1px;
  background: var(--brass-bright);
}

.project__distances {
  position: relative;
  background: rgba(244, 241, 233, 0.94);
  border: 1px solid var(--hairline);
  padding: clamp(20px, 2.6vw, 28px) clamp(20px, 3vw, 32px);
  margin-top: 24px;
}

/* the same short brass rule that tops the story block */
.project__distances::before {
  content: "";
  position: absolute;
  top: -1px;
  left: clamp(20px, 3vw, 32px);
  width: 48px;
  height: 2px;
  background: var(--brass-bright);
}

.project__distances .modal__section-heading {
  margin-bottom: 6px;
  color: var(--brass-deep);
}

.project__distances .spec-table {
  border-top: none;
}

#specs .project__info > h3.modal__section-heading {
  margin-bottom: 0;
}

.placeholder {
  position: relative;
  background:
    linear-gradient(135deg, rgba(90, 107, 79, 0.16), rgba(21, 50, 58, 0.1)),
    repeating-linear-gradient(45deg, rgba(28, 30, 26, 0.05) 0 2px, transparent 2px 14px);
  background-color: var(--stone-dim);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}

.placeholder > img,
.placeholder > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.placeholder__label {
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  background: rgba(244, 241, 233, 0.7);
}

.project__info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.project__summary {
  margin: 0;
  color: var(--ink-soft);
}

.spec-table {
  border-top: 1px solid var(--hairline);
}

.spec-table__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 15px;
}

.spec-table__row dt {
  color: var(--ink);
  font-weight: 600;
}

.spec-table__row dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  text-align: right;
}

.spec-table__row--price dd {
  color: var(--brass-deep);
  font-size: 19px;
}

.project__map {
  aspect-ratio: 16 / 10;
}

.map-embed {
  border: 1px solid var(--hairline);
  background: var(--stone-dim);
  overflow: hidden;
  max-width: 100%;
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.modal__map .map-embed {
  aspect-ratio: 16 / 10;
}

.project__map-address {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ============================================================
   Contact panel
   ============================================================ */

.contact {
  margin-top: clamp(56px, 8vw, 96px);
  background: var(--ambient-glow), var(--petrol);
  color: var(--paper);
  padding: clamp(40px, 6vw, 72px) var(--gutter);
}

.contact__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px);
}

.contact__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 16px;
}

.contact__note {
  color: rgba(244, 241, 233, 0.75);
  max-width: 34ch;
  margin: 0 0 24px;
}

.contact__detail {
  font-size: 14.5px;
  color: rgba(244, 241, 233, 0.65);
  margin: 6px 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 22px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field--full {
  grid-column: 1 / -1;
}

.field label,
.field__label {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(244, 241, 233, 0.7);
}

.field__optional {
  font-size: 11px;
  font-weight: 400;
  opacity: 0.55;
  letter-spacing: 0.01em;
}

.field input,
.field select,
.field textarea {
  background: rgba(244, 241, 233, 0.06);
  border: 1px solid var(--hairline-on-dark);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 13px;
  border-radius: 1px;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(244, 241, 233, 0.6);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--brass-bright);
  outline-offset: 2px;
  border-color: var(--brass-bright);
  background: rgba(244, 241, 233, 0.1);
}

.field select option {
  color: var(--ink);
}

.field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(244, 241, 233, 0.75);
}

.field--checkbox input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--brass);
}

.field--checkbox a {
  color: var(--brass-bright);
  text-underline-offset: 2px;
}

.radio-group {
  display: flex;
  gap: 26px;
  margin-top: 2px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: rgba(244, 241, 233, 0.75);
  cursor: pointer;
  transition: color 0.25s var(--ease);
}

.radio-option:hover {
  color: var(--paper);
}

.radio-option input {
  width: 15px;
  height: 15px;
  accent-color: var(--brass);
  cursor: pointer;
}

.radio-option input:focus-visible {
  outline: 1px solid var(--brass-bright);
  outline-offset: 2px;
}

.radio-option:has(input:checked) {
  color: var(--brass-bright);
}

.form-msg {
  margin-top: 16px;
  font-size: 14px;
  min-height: 1.4em;
  color: var(--brass-bright);
}

.form-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 6px;
}

.form-fields {
  transition: opacity 0.5s var(--ease-premium);
}

.form-fields.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.form-success {
  padding: 34px 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-premium);
}

.form-success.is-visible {
  opacity: 1;
}

.form-success h3 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.01em;
  color: var(--brass-bright);
  margin: 0 0 10px;
}

.form-success p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(244, 241, 233, 0.75);
  margin: 0;
}

/* ============================================================
   Portfolio
   ============================================================ */

.portfolio__tabs {
  display: flex;
  gap: clamp(24px, 4vw, 44px);
  border-bottom: 1px solid var(--hairline);
}

.tab {
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink-soft);
  padding: 4px 0 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.35s var(--ease-premium);
}

.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease-premium);
}

.tab[aria-selected="true"] {
  color: var(--ink);
}

.tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.tab:hover {
  color: var(--ink);
}

.portfolio__panel {
  padding-top: 44px;
}

.portfolio__panel[hidden] {
  display: none;
}

/* ------------------------------------------------------------
   Gallery slider — shared by the Residenza Due Laghi landing page
   and by the portfolio rows below. Snap scrolling gives swipe on
   touch for free; the arrows appear on pointer devices only.
   ------------------------------------------------------------ */

.gallery-slider {
  position: relative;
  margin-top: 48px;
  aspect-ratio: 16 / 9;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
}

.gallery-slider::-webkit-scrollbar {
  display: none;
}

.gallery-slider__slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  overflow: hidden;
}

.gallery-slider__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-premium);
}

.gallery-slider__slide:hover .gallery-slider__img,
.gallery-slider__slide:focus-within .gallery-slider__img {
  transform: scale(1.02);
}

.gallery-slider:has(.gallery-slider__slide:hover),
.gallery-slider:has(.gallery-slider__slide:focus-within) {
  box-shadow: 0 22px 40px -22px rgba(15, 39, 45, 0.35);
}

.gallery-slider__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 1;
}

.gallery-slider__dot {
  width: 6px;
  height: 6px;
  background: rgba(244, 241, 233, 0.5);
  transition: background-color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.gallery-slider__dot.is-active {
  background: var(--brass-bright);
  transform: scale(1.4);
}

.gallery-slider__arrow {
  display: none;
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .gallery-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid rgba(244, 241, 233, 0.6);
    background: rgba(15, 39, 45, 0.28);
    color: var(--paper);
    cursor: pointer;
    opacity: 0.7;
    transform: translateY(-50%);
    backdrop-filter: blur(4px);
    transition: opacity 0.35s var(--ease-premium), background-color 0.35s var(--ease-premium), border-color 0.35s var(--ease-premium);
  }

  .gallery-slider__arrow--prev { left: 24px; }
  .gallery-slider__arrow--next { right: 24px; }

  .gallery-slider__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .gallery-slider__arrow:hover,
  .gallery-slider__arrow:focus-visible {
    background: rgba(15, 39, 45, 0.55);
    border-color: var(--brass-bright);
    color: var(--brass-bright);
  }
}

/* ------------------------------------------------------------
   Portfolio — one property per row: name and status on the left,
   photo slider on the right. Stacks on small screens.
   ------------------------------------------------------------ */

.portfolio-list {
  display: grid;
}

.portfolio-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.55fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(34px, 4.5vw, 60px);
  border-top: 1px solid var(--hairline);
  cursor: pointer;
}

.portfolio-row:first-child {
  border-top: none;
  padding-top: 0;
}

.portfolio-row:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 8px;
}

.portfolio-row__info {
  min-width: 0;
}

.portfolio-row__location {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--cypress);
  margin: 0 0 6px;
}

.portfolio-row__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  margin: 0;
  transition: color 0.35s var(--ease-premium);
}

.portfolio-row:hover .portfolio-row__name,
.portfolio-row:focus-visible .portfolio-row__name {
  color: var(--brass-deep);
}

.portfolio-row__status {
  display: inline-block;
  margin: 14px 0 0;
  padding: 5px 12px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.portfolio-row__status--sale {
  background: var(--brass-deep);
  color: var(--paper);
}

.portfolio-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 16px 0 0;
  list-style: none;
  padding: 0;
}

.portfolio-row__price {
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--brass-deep);
  margin: 12px 0 0;
}

.portfolio-row__hint {
  font-size: 12.5px;
  color: var(--brass-deep);
  margin: 14px 0 0;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.portfolio-row:hover .portfolio-row__hint,
.portfolio-row:focus-visible .portfolio-row__hint {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-row__media {
  position: relative;
  min-width: 0;
}

.portfolio-row__media .gallery-slider {
  margin-top: 0;
  aspect-ratio: 3 / 2;
  transition: border-color 0.35s var(--ease), box-shadow 0.5s var(--ease-premium);
}

.portfolio-row:hover .portfolio-row__media .gallery-slider,
.portfolio-row:focus-visible .portfolio-row__media .gallery-slider {
  border-color: var(--brass);
  box-shadow: 0 26px 46px -26px rgba(15, 39, 45, 0.4);
}

@media (hover: hover) and (pointer: fine) and (min-width: 900px) {
  .portfolio-row__media .gallery-slider__arrow {
    width: 44px;
    height: 44px;
    opacity: 0;
  }

  .portfolio-row__media .gallery-slider__arrow--prev { left: 14px; }
  .portfolio-row__media .gallery-slider__arrow--next { right: 14px; }

  .portfolio-row:hover .gallery-slider__arrow,
  .portfolio-row:focus-within .gallery-slider__arrow {
    opacity: 1;
  }
}

@media (max-width: 860px) {
  .portfolio-row {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-block: clamp(28px, 7vw, 40px);
  }

  /* On a phone the photo leads and the details follow. */
  .portfolio-row__media {
    order: -1;
  }

  .portfolio-row__media .gallery-slider {
    aspect-ratio: 4 / 3;
  }

  /* The address and "vedi dettagli" share one line under the photo, each
     flush with one of its edges; the specifics move below the price. */
  .portfolio-row__info {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
  }

  .portfolio-row__hint {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
    opacity: 1;
    transform: none;
  }

  .portfolio-row__name {
    grid-column: 1 / -1;
    order: 1;
  }

  .portfolio-row__status {
    grid-column: 1 / -1;
    order: 2;
    /* grid would otherwise stretch the badge across the whole row */
    justify-self: start;
  }

  .portfolio-row__price {
    grid-column: 1 / -1;
    order: 3;
  }

  .portfolio-row__meta {
    grid-column: 1 / -1;
    order: 4;
  }
}

/* ============================================================
   About strip
   ============================================================ */

.about {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: -18px;
}

.about__figure {
  aspect-ratio: 3 / 4;
}

.about__title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin: 0 0 14px;
}

/* Desktop: the photo fills the whole left half of the section, edge to edge. */
@media (min-width: 901px) {
  .about {
    grid-template-columns: 1fr 1fr;
    margin-top: 0;
  }

  .about__figure {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    aspect-ratio: auto;
    border: none;
  }

  .about__figure.reveal {
    transform: none;
  }

  .about > :not(.about__figure) {
    grid-column: 2;
  }
}

/* Stacked: the photo runs edge to edge above the copy. */
@media (max-width: 900px) {
  .about__figure {
    margin-inline: calc(var(--gutter) * -1);
    aspect-ratio: 4 / 3;
    border-inline: none;
  }
}

.about__lede {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.35;
  margin: 0 0 22px;
  max-width: 22ch;
}

.about__body {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 28px;
}

.about__stats {
  display: flex;
  gap: clamp(28px, 5vw, 56px);
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  border-top: 1px solid var(--hairline);
  padding-top: 22px;
}

/* Four figures no longer fit on one line in the About column. */
.about .about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: 22px;
}

/* On desktop the section's blueprint backdrop runs a drawing line across
   the block — lift the figures and open the gap so the line falls between
   the two rows instead of crowding them. */
@media (min-width: 901px) {
  .about .about__stats {
    margin-top: 0;
    padding-top: 14px;
    row-gap: 40px;
  }
}

.about__stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
}

.about__stat span {
  font-size: 13px;
  color: var(--ink-soft);
}

/* ============================================================
   How we build — scroll-driven vertical tabs
   The tall track scrolls past while the stage stays pinned;
   script.js maps the scroll position to each title's bar
   (--fill) and the active photo.
   ============================================================ */

.method {
  position: relative;
  height: calc(100svh + 3 * 75svh);
  background: var(--ambient-glow), var(--stone);
}

.method + .contact {
  margin-top: 0;
}

.method__stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 64px;
}

/* Wider than the usual content column: the copy sits further left and the
   photo gets the room the reference gave to its "learn more" block. */
.method__inner {
  width: 100%;
  max-width: 1680px;
  margin-inline: auto;
  padding-inline: clamp(24px, 4vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.9fr) minmax(0, 0.5fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: center;
}

.method__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.method__eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--brass);
}

.method__aside .section__heading {
  margin-bottom: clamp(32px, 5vw, 56px);
}

.method__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.method__item {
  position: relative;
  border-bottom: 1px solid var(--hairline);
}

.method__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--brass-deep);
  transform: scaleX(var(--fill, 0));
  transform-origin: left;
}

.method__tab {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.35vw, 20px);
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 0.35s var(--ease);
}

.method__tab::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--hairline);
  transition: background-color 0.35s var(--ease);
}

.method__tab.is-active {
  color: var(--ink);
}

.method__tab.is-active::before {
  background: var(--brass);
}

.method__item.is-done .method__tab {
  color: rgba(74, 74, 66, 0.55);
}

.method__tab:hover,
.method__item.is-done .method__tab:hover {
  color: var(--brass-deep);
}

.method__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 78svh;
}

.method__photo {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.7s var(--ease), transform 1.2s var(--ease-premium);
}

.method__photo.is-active {
  opacity: 1;
  transform: none;
}

/* Step descriptions share one cell, level with the photo's bottom edge. */
.method__descs {
  display: grid;
  align-self: end;
}

.method__desc {
  grid-area: 1 / 1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}

.method__desc.is-active {
  opacity: 1;
}

@media (min-width: 901px) and (max-width: 1100px) {
  .method__inner {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
  }

  .method__descs {
    grid-column: 2;
    align-self: start;
  }
}

@media (max-width: 900px) {
  .method {
    height: calc(100svh + 3 * 60svh);
  }

  .method__stage {
    align-items: flex-start;
    padding-top: 84px;
  }

  .method__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .method__aside .section__heading {
    margin-bottom: 20px;
  }

  .method__tab {
    font-size: 16px;
    padding: 10px 0;
  }

  .method__media {
    max-height: 32svh;
  }

  .method__desc {
    font-size: 14px;
  }
}

/* Too short to pin the stage (landscape phones): plain block, tabs switch the photo. */
@media (max-height: 520px) {
  .method {
    height: auto;
  }

  .method__stage {
    position: static;
    height: auto;
    padding-block: 96px 64px;
  }

  .method__media {
    max-height: 80svh;
  }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  background: var(--night);
  border-top: 1px solid rgba(194, 154, 82, 0.2);
  color: rgba(244, 241, 233, 0.7);
  padding: clamp(48px, 6vw, 72px) var(--gutter) 32px;
}

.footer-grid {
  max-width: var(--content-max);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 36px;
  padding-bottom: 32px;
}

.footer-grid h3 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--paper);
  font-size: 17px;
  margin: 0 0 14px;
}

.footer-grid p,
.footer-grid a {
  font-size: 14px;
  line-height: 1.8;
  text-decoration: none;
  color: inherit;
}

.footer-grid a:hover {
  color: var(--brass-bright);
}

.footer-bottom {
  max-width: var(--content-max);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 12.5px;
  color: rgba(244, 241, 233, 0.6);
  border-top: 1px solid var(--hairline-on-dark);
  padding-top: 22px;
}

.footer-bottom__text,
.footer-bottom__links {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* No floating iubenda badge in any region. */
#iubenda-cs-badge,
.iubenda-cs-badge,
#iubenda-cs-widget {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.footer-bottom__link {
  display: inline-flex;
  align-items: center;
  font: inherit;
  line-height: inherit;
  vertical-align: middle;
  appearance: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.35s var(--ease-premium);
}

button.footer-bottom__link::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.footer-bottom__link:hover,
.footer-bottom__link:focus-visible {
  color: var(--brass-bright);
}

/* "Add as a preferred source on Google" — styled after Google's
   official badge, but with live text so it translates with the page. */
.site-footer .pref-source {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  padding: 8px 16px 8px 10px;
  background: #000;
  border: 1px solid rgba(244, 241, 233, 0.3);
  border-radius: 10px;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color 0.35s var(--ease-premium), transform 0.35s var(--ease-premium);
}

.site-footer .pref-source:hover,
.site-footer .pref-source:focus-visible {
  color: #fff;
  border-color: var(--brass-bright);
  transform: translateY(-1px);
}

.pref-source__logo {
  flex: none;
  width: 26px;
  height: 26px;
}

/* ============================================================
   Legal text (Terms of Service popup, js/terms-modal.js)
   ============================================================ */

.modal--legal .modal__panel {
  width: min(92vw, 760px);
}

.terms-modal__updated {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
}

.legal-content {
  max-width: 72ch;
}

.legal-content h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 21px);
  margin: clamp(28px, 4vw, 36px) 0 10px;
}

.legal-content h3:first-child {
  margin-top: 0;
}

.legal-content p {
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.legal-content strong {
  color: var(--ink);
}

.legal-content a {
  color: var(--brass-deep);
}

/* Smooth in and out: the backdrop fades, the panel reuses modal-in
   and plays it in reverse while .is-closing is set. */
.modal--legal .modal__backdrop {
  animation: backdrop-in 0.35s var(--ease) both;
}

.modal--legal.is-closing .modal__backdrop {
  animation: backdrop-in 0.25s var(--ease) reverse both;
}

.modal--legal.is-closing .modal__panel {
  animation: modal-out 0.25s var(--ease) forwards;
}

@keyframes backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal--legal .modal__backdrop,
  .modal--legal.is-closing .modal__backdrop,
  .modal--legal.is-closing .modal__panel {
    animation: none;
  }
}

/* ============================================================
   404 and thanks pages (same centred layout on the dark section)
   ============================================================ */

/* The page is shorter than tall screens: the footer colour continues below it. */
.page-notfound,
.page-thanks {
  background: var(--night);
}

.notfound,
.thanks {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  padding-bottom: clamp(64px, 10vw, 120px);
}

.notfound__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(72px, 14vw, 148px);
  line-height: 1;
  color: var(--brass-bright);
  margin: 0;
}

.thanks__icon {
  display: block;
  width: clamp(64px, 9vw, 88px);
  margin: 0 auto;
  color: var(--brass-bright);
}

.thanks__icon svg {
  width: 100%;
  height: auto;
}

.notfound__kicker,
.thanks__kicker {
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--stone-dim);
  margin: 12px 0 6px;
}

.notfound__heading,
.thanks__heading {
  color: var(--paper);
  margin-bottom: 18px;
}

.notfound__note,
.thanks__note {
  color: rgba(244, 241, 233, 0.75);
  max-width: 46ch;
  margin: 0 auto 36px;
}

.notfound__actions,
.thanks__actions {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Cookie consent gate (Google Maps embeds)
   ============================================================ */

.consent-gate {
  cursor: pointer;
}

.consent-gate__button {
  font: inherit;
  color: var(--ink-soft);
  background: rgba(244, 241, 233, 0.7);
  border: 1px solid var(--hairline);
  padding: 10px 16px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium);
}

.consent-gate__button:hover,
.consent-gate__button:focus-visible {
  border-color: var(--brass);
  color: var(--ink);
}

/* ============================================================
   Project detail modal
   ============================================================ */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
}

.modal[hidden] {
  display: none;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 39, 45, 0.72);
}

.modal__panel {
  position: relative;
  z-index: 1;
  background: var(--paper);
  color: var(--ink);
  width: min(92vw, 960px);
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--hairline);
  animation: modal-in 0.35s var(--ease) forwards;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal__panel {
    animation: none;
  }
}

.modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.35s var(--ease-premium), color 0.35s var(--ease-premium),
    transform 0.35s var(--ease-premium);
}

.modal__close:hover,
.modal__close:focus-visible {
  border-color: var(--brass);
  color: var(--brass-deep);
  transform: rotate(90deg);
}

.modal__body {
  padding: clamp(28px, 5vw, 56px);
  max-width: 100%;
}

.modal__header {
  margin: 0 0 28px;
  padding-right: 48px;
}

.modal__location {
  font-size: 14px;
  color: var(--cypress);
  margin: 0 0 6px;
}

.modal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 8px;
}

.modal__price {
  font-family: var(--font-display);
  color: var(--brass-deep);
  font-size: 19px;
  margin: 0;
}

.modal__section {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.modal__section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 18px;
}

.modal__gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 14px;
}

.modal__gallery .placeholder {
  aspect-ratio: 4 / 3;
}

.modal__gallery-tile {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--hairline);
  cursor: pointer;
}

.modal__gallery-tile:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
}

.modal__gallery-tile:hover,
.modal__gallery-tile:focus-within {
  box-shadow: 0 22px 40px -22px rgba(15, 39, 45, 0.35);
}

.modal__gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-premium);
}

.modal__gallery-tile:hover img,
.modal__gallery-tile:focus-within img {
  transform: scale(1.02);
}


.modal__cta {
  margin-top: 32px;
}

.modal__panel--zoom {
  background: transparent;
  border: none;
  padding: 0;
  width: auto;
  max-width: 92vw;
  max-height: 88vh;
}

.modal__panel--zoom .modal__close {
  top: 12px;
  right: 12px;
  background: rgba(10, 20, 22, 0.55);
  border-color: rgba(244, 241, 233, 0.4);
  color: var(--paper);
}

.modal__panel--zoom .modal__close:hover,
.modal__panel--zoom .modal__close:focus-visible {
  border-color: var(--brass-bright);
  color: var(--brass-bright);
  background: rgba(10, 20, 22, 0.75);
}

.modal__zoom-img {
  display: block;
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 900px) {
  .main-nav__links {
    display: none;
  }

  .features__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .section__head,
  .project__grid,
  .contact__inner,
  .about,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .project__map {
    order: 2;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 6px;
  }
}

@media (max-width: 560px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 20px;
    gap: 14px;
  }

  .main-nav {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: 10px;
  }

  .btn--nav {
    order: 1;
  }

  .hero__badges--corner {
    top: 120px;
  }

  /* Homepage header is a single row (wordmark + burger). */
  .site-header.site-header--menu {
    flex-direction: row;
    align-items: center;
  }

  .hero--home .hero__badges--corner {
    top: 88px;
  }

  .features__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .lang-toggle {
    font-size: 12px;
    order: 2;
  }

  .about__stats {
    flex-wrap: wrap;
    row-gap: 18px;
  }

  .portfolio-row__meta {
    flex-wrap: wrap;
  }

  .modal {
    padding: 0;
  }

  .modal__panel {
    width: 100vw;
    max-width: 100vw;
    height: 100svh;
    max-height: none;
    border: none;
  }

  .modal__panel--zoom {
    width: auto;
    max-width: 92vw;
    height: auto;
    max-height: 82vh;
  }

  .modal__zoom-img {
    max-height: 82vh;
  }
}

/* ============================================================
   Touch targets (>= 44px hit area without changing layout)
   and skip link
   ============================================================ */

.lang-toggle button,
.footer-bottom__link {
  position: relative;
}

.lang-toggle button::after,
.footer-bottom__link::after {
  content: "";
  position: absolute;
  inset: -12px -8px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 300;
  padding: 12px 18px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--brass);
  font-size: 14px;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 16px;
}