/* =========================================================================
   Decart Building Contracting LLC
   Main stylesheet

   1.  Design tokens
   2.  Reset and base
   3.  Typography
   4.  Layout primitives
   5.  Buttons and links
   6.  Media
   7.  Site header and navigation
   8.  Site footer
   9.  Villa construction hero
   10. Home sections
   11. Page headers and breadcrumbs
   12. Service pages
   13. Projects
   14. Process
   15. Insights and articles
   16. Contact and forms
   17. Utilities, motion and print
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
  /* Brand palette ------------------------------------------------------ */
  --color-ivory: #f0e9db;
  --color-bronze: #cc935a;
  --color-brown: #704e2d;

  /* Supporting neutrals ------------------------------------------------ */
  --color-near-black: #171512;
  --color-soft-white: #fbf8f2;
  --color-stone: #b8afa2;

  --color-bronze-deep: #b07c45;
  /* Bronze is too light to carry text on the ivory backgrounds (2.2:1), so
     small accent type on light uses this deeper bronze, which clears WCAG AA
     on both --bg-page and --bg-warm. Bronze itself is kept for rules, borders
     and text on the dark sections, where it passes comfortably. */
  --color-bronze-ink: #8a5a28;
  --color-brown-deep: #563c22;
  --color-ink: #241f19;
  --color-ink-muted: #5d5449;

  /* Applied roles ------------------------------------------------------ */
  --bg-page: var(--color-soft-white);
  --bg-warm: var(--color-ivory);
  --bg-dark: var(--color-near-black);
  --bg-brown: var(--color-brown);

  --text-primary: var(--color-ink);
  --text-secondary: var(--color-ink-muted);
  --text-on-dark: #efe7d9;
  /* Light enough to clear AA on the Deep Brown footer as well as near-black. */
  --text-on-dark-muted: #d8cec0;
  --text-accent: var(--color-brown);

  --border-light: rgba(112, 78, 45, 0.2);
  --border-hairline: rgba(112, 78, 45, 0.12);
  --border-on-dark: rgba(240, 233, 219, 0.18);
  --overlay-dark: rgba(23, 21, 18, 0.42);
  --overlay-scrim: linear-gradient(
    to top,
    rgba(23, 21, 18, 0.78) 0%,
    rgba(23, 21, 18, 0.44) 38%,
    rgba(23, 21, 18, 0.08) 72%,
    rgba(23, 21, 18, 0) 100%
  );

  /* The homepage hero carries the largest type over the brightest, busiest
     photography. Two layers, kept separate so each can be tuned on its own:
     a bottom-weighted wash for the frame as a whole, and a left-to-right wash
     sized to the text column, because the copy is left-aligned. */
  --hero-scrim-vertical: linear-gradient(
    to top,
    rgba(23, 21, 18, 0.72) 0%,
    rgba(23, 21, 18, 0.6) 20%,
    rgba(23, 21, 18, 0.42) 42%,
    rgba(23, 21, 18, 0.24) 64%,
    rgba(23, 21, 18, 0.1) 84%,
    rgba(23, 21, 18, 0) 100%
  );
  /* Anchored in rem, not percentages. The hero copy lives in a column of at
     most 52rem, so a wash that stays strong to ~46rem and clears by 70rem
     covers the text at every viewport width. Percentage stops slid off the
     text as the viewport changed, which is how the headline kept failing
     contrast at some sizes and passing at others. */
  --hero-scrim-horizontal: linear-gradient(
    to right,
    rgba(23, 21, 18, 0.82) 0,
    rgba(23, 21, 18, 0.7) 28rem,
    rgba(23, 21, 18, 0.36) 48rem,
    rgba(23, 21, 18, 0) 70rem
  );

  /* Typography --------------------------------------------------------- */
  --font-sans: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;

  --step--2: clamp(0.688rem, 0.67rem + 0.09vw, 0.75rem);
  --step--1: clamp(0.813rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0: clamp(0.938rem, 0.91rem + 0.14vw, 1.031rem);
  --step-1: clamp(1.063rem, 1rem + 0.31vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.59vw, 1.625rem);
  --step-3: clamp(1.5rem, 1.29rem + 1.06vw, 2.188rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.88vw, 3rem);
  --step-5: clamp(2.25rem, 1.66rem + 2.94vw, 4.125rem);
  --step-6: clamp(2.625rem, 1.72rem + 4.53vw, 5.5rem);

  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.45;
  --leading-relaxed: 1.68;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-label: 0.18em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* Spacing ------------------------------------------------------------ */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;
  --section-y: clamp(4rem, 2.6rem + 6vw, 8.5rem);
  --section-y-tight: clamp(3rem, 2.2rem + 3.4vw, 5.5rem);

  /* Containers and grid ------------------------------------------------ */
  --container-max: 84rem;
  --container-wide: 96rem;
  --container-text: 46rem;
  --container-pad: clamp(1.25rem, 0.7rem + 2.4vw, 3.5rem);
  --grid-gap: clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
  --grid-gap-lg: clamp(2rem, 1.3rem + 3vw, 4.5rem);

  /* Radii, borders, shadows -------------------------------------------- */
  --radius-none: 0;
  --radius-xs: 1px;
  --radius-s: 2px;
  --radius-pill: 999px;
  --border-width: 1px;
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px rgba(23, 21, 18, 0.06);
  --shadow-raised: 0 18px 40px -28px rgba(23, 21, 18, 0.45);

  /* Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.5, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 620ms;
  --transition-base: var(--duration-base) var(--ease-out);

  /* Layers ------------------------------------------------------------- */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-float: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-skip: 600;

  --header-height: 4.75rem;
}

@media (min-width: 62em) {
  :root {
    --header-height: 6.5rem;
  }
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1.5rem);
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Deliberately no `overflow-x: hidden` on html or body. Setting it turns the
   body into its own scroll container, which stops window scroll position from
   driving the sticky villa hero. Horizontal overflow is instead prevented at
   source: see the `min-width: 0` grid reset and `.table-scroll`. */

body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

main {
  display: block;
}

hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: var(--border-width) solid var(--border-light);
}

:target {
  scroll-margin-top: calc(var(--header-height) + 2rem);
}

::selection {
  background-color: var(--color-bronze);
  color: var(--color-near-black);
}

:focus-visible {
  outline: 2px solid var(--color-brown);
  outline-offset: 3px;
}

.section--dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-bronze);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: var(--z-skip);
  padding: var(--space-xs) var(--space-m);
  background-color: var(--color-near-black);
  color: var(--text-on-dark);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
  transform: translate(-50%, -110%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
}

/* -------------------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.display {
  font-size: var(--step-6);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.heading-xl { font-size: var(--step-5); font-weight: var(--weight-light); line-height: 1.08; }
.heading-l  { font-size: var(--step-4); font-weight: var(--weight-light); line-height: 1.12; }
.heading-m  { font-size: var(--step-3); font-weight: var(--weight-regular); line-height: 1.2; }
.heading-s  { font-size: var(--step-2); font-weight: var(--weight-regular); line-height: 1.28; }
.heading-xs { font-size: var(--step-1); font-weight: var(--weight-medium); line-height: 1.35; letter-spacing: 0; }

.serif {
  font-family: var(--font-serif);
  font-weight: var(--weight-light);
  letter-spacing: 0;
}

.eyebrow {
  display: block;
  margin-bottom: var(--space-m);
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.eyebrow--rule::after {
  flex: 1;
  height: 1px;
  background-color: var(--border-light);
  content: "";
}

.section--dark .eyebrow {
  color: var(--color-bronze);
}

/* Bronze on Deep Brown is only 2.8:1, so the brown footer and brown sections
   carry their accent type in ivory and keep bronze for hairlines only. */
.site-footer .eyebrow,
.section--brown .eyebrow {
  color: var(--color-ivory);
}

.section--dark .eyebrow--rule::after,
.site-footer .eyebrow--rule::after {
  background-color: var(--border-on-dark);
}

.lede {
  max-width: 40ch;
  color: var(--text-secondary);
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}

.prose p,
.body-copy {
  max-width: 68ch;
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.prose > * + * {
  margin-top: var(--space-m);
}

.prose h2 {
  margin-top: var(--space-2xl);
  font-size: var(--step-3);
  font-weight: var(--weight-light);
  color: var(--text-primary);
}

.prose h3 {
  margin-top: var(--space-xl);
  font-size: var(--step-2);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
}

.prose h4 {
  margin-top: var(--space-l);
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.prose ul,
.prose ol {
  max-width: 68ch;
  padding-left: var(--space-m);
  color: var(--text-secondary);
}

.prose ul > li {
  position: relative;
  padding-left: var(--space-m);
  list-style: none;
}

.prose ul > li::before {
  position: absolute;
  top: 0.78em;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: var(--color-bronze);
  content: "";
}

.prose ol {
  padding-left: var(--space-l);
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-2xs);
}

.prose a {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.prose a:hover {
  color: var(--color-bronze-deep);
}

.prose strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.text-muted { color: var(--text-secondary); }
.text-accent { color: var(--text-accent); }

.meta {
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.container--wide { max-width: var(--container-wide); }
.container--text { max-width: var(--container-text); }
.container--flush { padding-inline: 0; }

.section {
  padding-block: var(--section-y);
}

.section--tight { padding-block: var(--section-y-tight); }
.section--warm { background-color: var(--bg-warm); }

.section--dark {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
}

.section--dark .lede,
.section--dark .body-copy,
.section--dark .prose p,
.section--dark .meta {
  color: var(--text-on-dark-muted);
}

.section--brown {
  background-color: var(--bg-brown);
  color: var(--text-on-dark);
}

.section--bordered {
  border-top: var(--border-width) solid var(--border-hairline);
}

.section-head {
  display: grid;
  gap: var(--space-m);
  margin-bottom: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}

@media (min-width: 48em) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--grid-gap-lg);
    align-items: end;
  }
}

.section-head__title {
  max-width: 22ch;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
}

.stack > * + * { margin-top: var(--space-m); }
.stack-l > * + * { margin-top: var(--space-l); }
.stack-xl > * + * { margin-top: var(--space-xl); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-m);
  align-items: center;
}

.rule {
  height: 1px;
  background-color: var(--border-light);
}

.section--dark .rule { background-color: var(--border-on-dark); }

/* Definition-style specification lists ---------------------------------- */

.spec-list {
  display: grid;
  gap: 0;
  border-top: var(--border-width) solid var(--border-light);
}

.spec-list > div {
  display: grid;
  gap: var(--space-3xs) var(--space-m);
  padding-block: var(--space-s);
  border-bottom: var(--border-width) solid var(--border-hairline);
}

@media (min-width: 30em) {
  .spec-list > div {
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    align-items: baseline;
  }
}

.spec-list dt {
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.spec-list dd {
  margin: 0;
  color: var(--text-primary);
}

.section--dark .spec-list { border-top-color: var(--border-on-dark); }
.section--dark .spec-list > div { border-bottom-color: var(--border-on-dark); }
.section--dark .spec-list dt { color: var(--color-bronze); }
.section--brown .spec-list dt { color: var(--color-ivory); }
.section--dark .spec-list dd { color: var(--text-on-dark); }

/* Numbered editorial list ----------------------------------------------- */

.numbered {
  counter-reset: step;
  border-top: var(--border-width) solid var(--border-light);
}

.numbered__item {
  display: grid;
  gap: var(--space-2xs) var(--grid-gap);
  padding-block: var(--space-l);
  border-bottom: var(--border-width) solid var(--border-hairline);
  counter-increment: step;
}

@media (min-width: 48em) {
  .numbered__item {
    grid-template-columns: 4.5rem minmax(0, 16rem) minmax(0, 1fr) 13rem;
    align-items: start;
  }
}

/* Documentary stage image on the homepage process strip. Kept small and
   consistent so the six stages read as one set rather than six pictures. */
.numbered__media {
  margin-block-start: var(--space-2xs);
  max-width: 22rem;
}

@media (min-width: 48em) {
  .numbered__media {
    margin-block-start: 0;
    max-width: none;
  }
}

.numbered__item::before {
  color: var(--color-bronze-ink);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  content: counter(step, decimal-leading-zero);
}

.numbered__title {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.24;
}

.numbered__body {
  color: var(--text-secondary);
  max-width: 60ch;
}

.section--dark .numbered { border-top-color: var(--border-on-dark); }
.section--dark .numbered__item { border-bottom-color: var(--border-on-dark); }
.section--dark .numbered__body { color: var(--text-on-dark-muted); }

/* Tag / label ----------------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 0.3em 0.7em;
  border: var(--border-width) solid var(--border-light);
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1.4;
  text-transform: uppercase;
}

.section--dark .tag {
  border-color: var(--border-on-dark);
  color: var(--color-bronze);
}

.notice {
  padding: var(--space-m);
  border-left: 2px solid var(--color-bronze);
  background-color: rgba(204, 147, 90, 0.09);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.section--dark .notice {
  background-color: rgba(204, 147, 90, 0.12);
  color: var(--text-on-dark-muted);
}

/* -------------------------------------------------------------------------
   5. Buttons and links
   ---------------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 3rem;
  padding: 0.9rem 1.75rem;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-none);
  background-color: var(--color-brown);
  color: var(--color-soft-white);
  font-family: inherit;
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base);
}

.button:hover {
  background-color: var(--color-brown-deep);
}

.button--secondary {
  background-color: transparent;
  border-color: var(--border-light);
  color: var(--text-accent);
}

.button--secondary:hover {
  border-color: var(--color-brown);
  background-color: rgba(112, 78, 45, 0.06);
  color: var(--color-brown-deep);
}

.button--bronze {
  background-color: var(--color-bronze);
  color: var(--color-near-black);
}

.button--bronze:hover {
  background-color: #d9a469;
}

.button--on-dark {
  background-color: transparent;
  border-color: var(--border-on-dark);
  color: var(--text-on-dark);
}

.button--on-dark:hover {
  border-color: var(--color-bronze);
  background-color: rgba(240, 233, 219, 0.08);
  color: var(--color-ivory);
}

.button--block {
  width: 100%;
}

/* Understated arrow link ------------------------------------------------ */

.link-arrow {
  display: inline-flex;
  align-items: center;
  /* Keeps the standalone section links at the 44px minimum target size. */
  min-height: 2.75rem;
  gap: var(--space-2xs);
  color: var(--text-accent);
  font-size: var(--step--1);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
}

.link-arrow::after {
  display: inline-block;
  content: "\2192";
  transition: transform var(--transition-base);
}

.link-arrow:hover::after {
  transform: translateX(4px);
}

.link-arrow:hover {
  color: var(--color-bronze-deep);
}

.section--dark .link-arrow {
  color: var(--color-bronze);
}

.site-footer .link-arrow,
.section--brown .link-arrow {
  color: var(--color-ivory);
}

/* Headline links: inline-block with vertical padding so the tap target
   reaches the 44px minimum without changing the type. */
.link-plain {
  display: inline-block;
  padding-block: 0.5rem;
  color: inherit;
  text-decoration: none;
}

.link-plain:hover {
  color: var(--text-accent);
}

.link-underline {
  color: var(--text-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* -------------------------------------------------------------------------
   6. Media
   ---------------------------------------------------------------------- */

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

.media {
  position: relative;
  overflow: hidden;
  background-color: var(--color-ivory);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--21x9 { aspect-ratio: 21 / 9; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--16x10 { aspect-ratio: 16 / 10; }
.media--3x2 { aspect-ratio: 3 / 2; }
.media--4x3 { aspect-ratio: 4 / 3; }
.media--1x1 { aspect-ratio: 1 / 1; }
.media--4x5 { aspect-ratio: 4 / 5; }

.media--zoom > img {
  transition: transform var(--duration-slow) var(--ease-out);
}

a:hover .media--zoom > img,
a:focus-visible .media--zoom > img {
  transform: scale(1.035);
}

figure {
  margin: 0;
}

figcaption {
  margin-top: var(--space-xs);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.section--dark figcaption { color: var(--text-on-dark-muted); }

/* -------------------------------------------------------------------------
   7. Site header and navigation
   ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--bg-page);
  border-bottom: var(--border-width) solid var(--border-hairline);
  transition: background-color var(--transition-base),
    border-color var(--transition-base);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-height);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

.site-header__brand img {
  width: auto;
  height: 3.25rem;
  transition: height var(--transition-base);
}

@media (min-width: 62em) {
  .site-header__brand img { height: 4.5rem; }
}

.site-header.is-condensed .site-header__brand img { height: 3rem; }

@media (min-width: 62em) {
  .site-header.is-condensed .site-header__brand img { height: 3.5rem; }
}

.site-nav {
  display: none;
}

@media (min-width: 62em) {
  .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 0.4rem + 1.5vw, 2.25rem);
  }
}

.site-nav__link {
  position: relative;
  padding-block: var(--space-2xs);
  color: var(--text-primary);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--transition-base);
}

.site-nav__link::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
  content: "";
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--text-accent);
}

.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.site-header__cta {
  display: none;
}

@media (min-width: 62em) {
  .site-header__cta {
    display: inline-flex;
    min-height: 2.75rem;
    padding: 0.7rem 1.35rem;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--space-2xs);
  border: var(--border-width) solid var(--border-light);
  background: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
}

@media (min-width: 62em) {
  .nav-toggle { display: none; }
}

.nav-toggle__bars {
  position: relative;
  display: block;
  width: 18px;
  height: 10px;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transition: transform var(--transition-base), top var(--transition-base);
  content: "";
}

.nav-toggle__bars::before { top: 0; }
.nav-toggle__bars::after { top: 9px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  top: 4px;
  transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  top: 4px;
  transform: rotate(-45deg);
}

/* Mobile panel ---------------------------------------------------------- */

.mobile-nav {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: var(--z-overlay);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-l) 0 var(--space-2xl);
  background-color: var(--bg-page);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-out),
    visibility 0s linear var(--duration-base);
}

.mobile-nav[data-open="true"] {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

/* Without JavaScript the toggle cannot open anything, so the panel becomes a
   plain in-flow list and the toggle is withdrawn. Navigation must never depend
   on a script. */
.no-js .nav-toggle {
  display: none;
}

.no-js .mobile-nav {
  position: static;
  inset: auto;
  transition: none;
  overflow: visible;
  padding-top: 0;
  padding-bottom: var(--space-l);
  visibility: visible;
  opacity: 1;
}

@media (min-width: 62em) {
  .mobile-nav { display: none; }
}

.mobile-nav__list {
  border-top: var(--border-width) solid var(--border-hairline);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  padding-block: var(--space-s);
  border-bottom: var(--border-width) solid var(--border-hairline);
  color: var(--text-primary);
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  text-decoration: none;
}

.mobile-nav__link[aria-current="page"] {
  color: var(--text-accent);
}

.mobile-nav__link::after {
  color: var(--color-bronze-ink);
  font-size: var(--step--1);
  content: "\2192";
}

.mobile-nav__footer {
  margin-top: var(--space-xl);
  display: grid;
  gap: var(--space-s);
}

.mobile-nav__contact {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-l);
  font-size: var(--step--1);
}

.mobile-nav__contact a {
  color: var(--text-secondary);
  text-decoration: none;
}

/* Persistent WhatsApp action -------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: clamp(0.875rem, 0.4rem + 1.4vw, 1.75rem);
  bottom: clamp(0.875rem, 0.4rem + 1.4vw, 1.75rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 3rem;
  min-height: 3rem;
  padding: 0.75rem;
  border: var(--border-width) solid var(--border-on-dark);
  background-color: var(--color-near-black);
  color: var(--color-ivory);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  text-transform: uppercase;
  box-shadow: var(--shadow-raised);
  transition: background-color var(--transition-base);
}

.whatsapp-float:hover {
  background-color: var(--color-brown);
}

.whatsapp-float svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: var(--color-bronze);
}

.whatsapp-float__text {
  display: none;
}

@media (min-width: 48em) {
  .whatsapp-float { padding: 0.75rem 1rem; }
  .whatsapp-float__text { display: inline; }
}

/* -------------------------------------------------------------------------
   8. Site footer
   ---------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--section-y-tight) var(--space-xl);
  background-color: var(--color-brown);
  color: var(--text-on-dark);
}

.site-footer a {
  color: var(--text-on-dark);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-ivory);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.site-footer__grid {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
}

@media (min-width: 40em) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  }
}

.site-footer__brand img {
  width: auto;
  height: 5rem;
}

.site-footer__title {
  margin-bottom: var(--space-m);
  color: var(--color-ivory);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.site-footer__list {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step--1);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: var(--border-width) solid var(--border-on-dark);
  color: var(--text-on-dark-muted);
  font-size: var(--step--2);
}

.site-footer address {
  font-style: normal;
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: var(--leading-relaxed);
}

/* -------------------------------------------------------------------------
   9. Villa construction hero
   ---------------------------------------------------------------------- */

/* Two states of one building, side by side. No wipe, no slider, no diagonal
   split: both states stay fully visible and uncropped. */
.compare {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 48em) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.compare__caption {
  margin-block-start: var(--space-xs);
  padding-block-start: var(--space-xs);
  border-top: var(--border-width) solid var(--border-light);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-snug);
}

.compare__label {
  display: block;
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Same rule as .eyebrow: the accent brown is unreadable on near-black, so
   dark sections carry bronze, and brown sections carry ivory. */
.section--dark .compare__label {
  color: var(--color-bronze);
}

.section--brown .compare__label {
  color: var(--color-ivory);
}

.villa-hero {
  position: relative;
  background-color: var(--color-near-black);
}

/* The scroll track gives the sticky frame room to advance through stages. */
/* The header is sticky and opaque, so a hero that sticks to top: 0 slides
   underneath it and loses its top band the moment the page moves - which is
   exactly where the villa's roofline sits. The hero therefore occupies the
   viewport *below* the header, and nothing is ever hidden or pushed below the
   fold. */
.villa-hero__track {
  position: relative;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
}

/* The sequence only ever runs at 48em and above, so the extra scroll track is
   only ever added there. Phones keep a single-screen hero.

   The whole five-frame crossfade completes within 55svh of extra scrolling:
   short enough that the hero never feels like it is holding the page
   hostage, and it releases to normal scrolling immediately afterwards. */
@media (min-width: 48em) {
  .villa-hero[data-sequence="on"] .villa-hero__track {
    height: calc(100svh - var(--header-height) + 55svh);
    min-height: 760px;
  }
}

.villa-hero__frame {
  position: sticky;
  top: var(--header-height);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  width: 100%;
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
}

.villa-hero__media {
  position: absolute;
  inset: 0;
}

/* The villa's roofline sits ~11% down the frame. A full-bleed hero is always
   flatter than the 16:9 source on wide, short screens, so a centred crop eats
   into the roof: at 1920x860 it removes 9.8% from the top. Biasing the crop
   upwards spends the loss on the driveway foreground instead, which carries
   far less of the picture. The mobile still is a 3:4 portrait and needs no
   bias. */
.villa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (min-width: 48em) {
  .villa-hero__media img { object-position: 50% 35%; }
}

/* Flatter frames lose more off the top, so shift further up again. These
   thresholds are viewport ratios, but the frame is flatter than the viewport
   because the header takes ~105px off its height - hence 1.75 and 2.1 rather
   than the 2.0 and 2.4 frame ratios they actually correspond to. */
@media (min-width: 48em) and (min-aspect-ratio: 7 / 4) {
  .villa-hero__media img { object-position: 50% 22%; }
}

@media (min-width: 48em) and (min-aspect-ratio: 21 / 10) {
  .villa-hero__media img { object-position: 50% 14%; }
}


/* The still is the honest baseline: it is what a phone, a reduced-motion
   visitor and a no-JavaScript visitor all see. The stage stack is layered
   over it only once the sequence is enabled. */
.villa-hero__still,
.villa-hero__stack {
  position: absolute;
  inset: 0;
}

.villa-hero__stack {
  display: none;
}

.villa-hero[data-sequence="on"] .villa-hero__stack {
  display: block;
}

.villa-hero[data-sequence="on"] .villa-hero__still {
  display: none;
}

/* Five matched frames of one villa, crossfaded rather than cut. Opacity is
   written by script as --hero-layer-N. No transform, scale or blur is applied
   to these images: the camera must not appear to move. */
.villa-hero__layer {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
}

.villa-hero__layer[data-hero-layer="0"] { opacity: var(--hero-layer-0, 1); }
.villa-hero__layer[data-hero-layer="1"] { opacity: var(--hero-layer-1, 0); }
.villa-hero__layer[data-hero-layer="2"] { opacity: var(--hero-layer-2, 0); }
.villa-hero__layer[data-hero-layer="3"] { opacity: var(--hero-layer-3, 0); }
.villa-hero__layer[data-hero-layer="4"] { opacity: var(--hero-layer-4, 0); }

.villa-hero__scrim {
  position: absolute;
  inset: 0;
  background-image: var(--hero-scrim-vertical);
}

.villa-hero__content {
  position: relative;
  z-index: var(--z-raised);
  width: 100%;
  padding-block: var(--space-2xl) clamp(3rem, 2rem + 4vw, 5rem);
  color: var(--text-on-dark);
}

.villa-hero__inner {
  position: relative;
  display: grid;
  gap: var(--space-l);
  max-width: 52rem;
}

/* The text wash is anchored to the text column, not to the viewport. The
   container is centred, so a viewport-anchored gradient drifts off the copy as
   the window widens - which is why the headline passed contrast at some widths
   and failed at others. Attached here it covers the text at every size. */
.villa-hero__inner::before {
  position: absolute;
  z-index: -1;
  inset: -3.5rem -12rem -3.5rem -50vw;
  background-image: linear-gradient(
    to right,
    rgba(23, 21, 18, 0.84) 0%,
    rgba(23, 21, 18, 0.78) 52%,
    rgba(23, 21, 18, 0.44) 80%,
    rgba(23, 21, 18, 0) 100%
  );
  /* Feathered top and bottom. Without this the box has hard horizontal edges
     and draws a visible seam across the photograph. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 18%,
    rgba(0, 0, 0, 1) 82%,
    rgba(0, 0, 0, 0) 100%
  );
  content: "";
  pointer-events: none;
}


/* Bronze measures ~2.9:1 against the scrimmed photograph here, so the hero
   eyebrow takes ivory -- the same substitution the brown sections and the
   footer already make. */
.villa-hero .eyebrow {
  color: var(--color-ivory);
  margin-bottom: 0;
}

/* Over photography a 300-weight face loses its thin strokes entirely. The
   headline carries a regular weight and a soft shadow for edge separation --
   functional contrast, not decoration. */
.villa-hero__headline {
  font-size: var(--step-6);
  font-weight: var(--weight-regular);
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(23, 21, 18, 0.34),
               0 2px 28px rgba(23, 21, 18, 0.42);
  text-wrap: balance;
}

.villa-hero__support {
  max-width: 46ch;
  color: var(--text-on-dark);
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  text-shadow: 0 1px 18px rgba(23, 21, 18, 0.44);
}

.villa-hero .eyebrow,
.villa-hero__scroll,
.villa-hero__stage-name,
.villa-hero__stage-current {
  text-shadow: 0 1px 14px rgba(23, 21, 18, 0.5);
}

.villa-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

/* Stage progress rail --------------------------------------------------- */

.villa-hero__stages {
  display: none;
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: var(--border-width) solid var(--border-on-dark);
}

.villa-hero[data-sequence="on"] .villa-hero__stages {
  display: block;
}

.villa-hero__stage-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2xs);
}

.villa-hero__stage {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  color: var(--text-on-dark-muted);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.villa-hero__stage::before {
  height: 2px;
  background-color: rgba(240, 233, 219, 0.22);
  content: "";
}

.villa-hero__stage[aria-current="step"] {
  color: var(--color-ivory);
}

.villa-hero__stage[aria-current="step"]::before {
  background-color: var(--color-bronze);
}

/* Never truncate a stage name. Ellipsis clipping depends on the exact font
   metrics, browser zoom and OS text scaling, so "Interior & Exterior" could
   render as "Interior & Exteri..." on a visitor's machine while measuring as
   fitting on ours. Wrapping to a second line always shows the whole label. */
.villa-hero__stage-name {
  display: block;
  overflow-wrap: break-word;
  hyphens: none;
}

.villa-hero__stage-current {
  margin-top: var(--space-xs);
  color: var(--color-ivory);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* Six stage names cannot be set legibly in six columns below ~56em without
   either dropping under the readable type floor or truncating the longest
   label ("Interior & Exterior"). Narrower screens therefore show the six
   progress bars plus a single label naming the current stage. */
@media (max-width: 47.99em) {
  .villa-hero__stage-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 48em) {
  .villa-hero__stage-current { display: none; }
}

.villa-hero__scroll {
  display: none;
  margin-top: var(--space-m);
  color: var(--text-on-dark-muted);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.villa-hero[data-sequence="on"] .villa-hero__scroll {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.villa-hero__scroll::after {
  content: "\2193";
}

/* -------------------------------------------------------------------------
   10. Home sections
   ---------------------------------------------------------------------- */

/* Introduction split ---------------------------------------------------- */

.split {
  display: grid;
  gap: var(--grid-gap-lg);
  align-items: center;
}

@media (min-width: 56em) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--media-first > .split__media { order: -1; }
  .split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

.split__body {
  display: grid;
  gap: var(--space-m);
  align-content: start;
}

/* Services grid --------------------------------------------------------- */

/* Eight services, so the grid divides exactly: four columns give two full
   rows, two columns give four. Nothing spans, every plate is the same 4:5,
   and the column and row gutters are the same measure -- the ragged half-row
   and the mixed image heights were what made this read as unresolved. */
.service-grid {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
}

@media (min-width: 40em) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68em) {
  .service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.service-card {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

/* Reserve two lines for every title so the descriptions start on one line
   across the row, whether the title wraps or not. */
@media (min-width: 40em) {
  .service-card__title {
    min-height: calc(2 * 1.22em);
  }
}

.service-card__link {
  display: grid;
  gap: var(--space-s);
  color: inherit;
  text-decoration: none;
}

.service-card__index {
  color: var(--color-bronze-ink);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.service-card__title {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.22;
  transition: color var(--transition-base);
}

.service-card__link:hover .service-card__title {
  color: var(--text-accent);
}

.service-card__text {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.service-card__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  padding-top: var(--space-2xs);
  border-top: var(--border-width) solid var(--border-light);
}

/* Featured projects ----------------------------------------------------- */

.project-feature {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
}

/* Six featured projects, so the grid divides exactly the same way the archive
   does: three columns give two full rows, two columns give three. The old
   twelve-column asymmetric layout produced five ragged rows and cover images
   ranging from 492px to 895px tall, which is what made the section look
   unresolved. */
@media (min-width: 40em) {
  .project-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68em) {
  .project-feature { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-card {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.project-card__link {
  display: grid;
  gap: var(--space-s);
  color: inherit;
  text-decoration: none;
}

.project-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  color: var(--text-secondary);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.project-card__title {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.2;
  transition: color var(--transition-base);
}

.project-card__link:hover .project-card__title {
  color: var(--text-accent);
}

.project-card__scope {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.section--dark .project-card__meta,
.section--dark .project-card__scope {
  color: var(--text-on-dark-muted);
}

.section--dark .project-card__link:hover .project-card__title {
  color: var(--color-bronze);
}

/* Advantage list -------------------------------------------------------- */

.advantage-grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 44em) {
  .advantage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72em) {
  .advantage-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.advantage {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: var(--border-width) solid var(--border-on-dark);
}

.advantage__title {
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.advantage__text {
  color: var(--text-on-dark-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

/* Material gallery ------------------------------------------------------ */

.material-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 48em) {
  .material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 72em) {
  .material-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.material-tile {
  display: grid;
  gap: var(--space-2xs);
}

.material-tile figcaption {
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Insight cards --------------------------------------------------------- */

.insight-grid {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
}

@media (min-width: 44em) {
  .insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.insight-card__link {
  display: grid;
  gap: var(--space-s);
  color: inherit;
  text-decoration: none;
}

.insight-card__title {
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.24;
  transition: color var(--transition-base);
}

.insight-card__link:hover .insight-card__title {
  color: var(--text-accent);
}

.insight-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-s);
  color: var(--text-secondary);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Closing call to action ------------------------------------------------ */

.cta-panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(26rem, 20rem + 22vw, 40rem);
  background-color: var(--color-near-black);
  color: var(--text-on-dark);
}

.cta-panel__media {
  position: absolute;
  inset: 0;
}

.cta-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cta-panel__media::after {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to top,
    rgba(23, 21, 18, 0.74) 0%,
    rgba(23, 21, 18, 0.4) 45%,
    rgba(23, 21, 18, 0.06) 100%
  );
  content: "";
}

.cta-panel__body {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-m);
  max-width: 46rem;
  padding-block: var(--space-2xl);
}

.cta-panel__title {
  font-size: var(--step-4);
  font-weight: var(--weight-light);
  line-height: 1.1;
}

.cta-panel__text {
  max-width: 52ch;
  color: var(--color-ivory);
  font-weight: var(--weight-light);
}

/* Short desktop viewports (1366x700, 1280x720 and similar laptops) leave the
   hero roughly 600px of height once the sticky header is subtracted. The
   default rhythm needs ~734px, so the copy would overflow upwards and slide
   under the header. Tighten the vertical spacing rather than let the headline
   clip. */
@media (min-width: 48em) and (max-height: 820px) {
  .villa-hero__content {
    padding-block: var(--space-l) var(--space-xl);
  }

  .villa-hero__inner {
    gap: var(--space-m);
  }

  .villa-hero__headline {
    font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.4rem);
  }

  .villa-hero__support {
    font-size: var(--step-0);
  }
}

/* Shorter still (1366x700, 1024x640). The scroll hint is the least essential
   element in the block -- the stage rail already signals that the hero
   advances -- so it goes before anything that carries meaning. */
@media (min-width: 48em) and (max-height: 760px) {
  .villa-hero__content {
    padding-block: var(--space-m) var(--space-l);
  }

  .villa-hero__inner {
    gap: var(--space-s);
  }

  .villa-hero__scroll {
    display: none;
  }
}

/* Smallest desktop windows (1024x600 and similar). The headline steps down
   once more so the block still clears the header. */
@media (min-width: 48em) and (max-height: 680px) {
  .villa-hero__headline {
    font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  }

  .villa-hero__support {
    font-size: var(--step--1);
    max-width: 54ch;
  }

  .villa-hero__content {
    padding-block: var(--space-s) var(--space-m);
  }
}

/* Below ~620px of hero height there is genuinely not room for the stage rail
   as well as the headline, copy and both calls to action. The rail is the
   enhancement, so it is the part that goes: the crossfade still reads. */
@media (min-width: 48em) and (max-height: 620px) {
  /* Matches the specificity of the rule that turns the rail on when the
     sequence runs, otherwise that rule wins and the rail stays visible. */
  .villa-hero[data-sequence="on"] .villa-hero__stages,
  .villa-hero__stages {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   11. Page headers and breadcrumbs
   ---------------------------------------------------------------------- */

.page-header {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: clamp(22rem, 16rem + 24vw, 38rem);
  background-color: var(--color-near-black);
  color: var(--text-on-dark);
}

.page-header__media {
  position: absolute;
  inset: 0;
}

.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Same two-axis scrim as the homepage hero. Page headers carry large light
   type over full-bleed photography, and the single bottom-weighted gradient
   was not enough on the brighter images. */
.page-header__media::after {
  position: absolute;
  inset: 0;
  background-image: var(--hero-scrim-vertical), var(--hero-scrim-horizontal);
  content: "";
}

.page-header__body {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: var(--space-m);
  max-width: 50rem;
  padding-block: var(--space-2xl) var(--space-xl);
}

.page-header__title {
  font-size: var(--step-5);
  font-weight: var(--weight-regular);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-shadow: 0 1px 2px rgba(23, 21, 18, 0.34),
               0 2px 28px rgba(23, 21, 18, 0.42);
}

.page-header__lede,
.page-header__caption,
.page-header .eyebrow {
  text-shadow: 0 1px 16px rgba(23, 21, 18, 0.5);
}

.page-header--plain .page-header__title,
.page-header--plain .page-header__lede,
.page-header--plain .eyebrow {
  text-shadow: none;
}

.page-header__lede {
  max-width: 52ch;
  color: var(--color-ivory);
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
}

/* Discreet disclosure that the project image is a visualisation rather than
   site photography. Deliberately quiet: it qualifies the picture, not the
   project. */
.page-header__caption {
  margin-block-start: var(--space-s);
  color: var(--color-stone);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
}

/* Bronze does not hold against photography; ivory does. Same substitution as
   the hero and the brown sections. */
.page-header .eyebrow { color: var(--color-ivory); margin-bottom: 0; }

/* Plain (image-free) page header ---------------------------------------- */

.page-header--plain {
  min-height: 0;
  padding-top: var(--space-2xl);
  background-color: var(--bg-warm);
  color: var(--text-primary);
}

.page-header--plain .page-header__lede { color: var(--text-secondary); }
.page-header--plain .eyebrow { color: var(--text-accent); }

.breadcrumbs {
  padding-block: var(--space-s);
  border-bottom: var(--border-width) solid var(--border-hairline);
  background-color: var(--bg-page);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  align-items: center;
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
}

.breadcrumbs li + li::before {
  color: var(--color-bronze-ink);
  content: "/";
}

.breadcrumbs a {
  color: var(--text-secondary);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--text-accent);
}

.breadcrumbs [aria-current="page"] {
  color: var(--text-primary);
}

/* -------------------------------------------------------------------------
   12. Service pages
   ---------------------------------------------------------------------- */

.definition {
  display: grid;
  gap: var(--grid-gap-lg);
}

@media (min-width: 56em) {
  .definition { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}

.definition__answer {
  font-family: var(--font-serif);
  font-size: var(--step-3);
  font-weight: var(--weight-light);
  line-height: 1.3;
  color: var(--text-primary);
}

.subservice-grid {
  display: grid;
  gap: 0;
  border-top: var(--border-width) solid var(--border-light);
}

@media (min-width: 40em) {
  .subservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68em) {
  .subservice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.subservice {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding: var(--space-m) var(--space-m) var(--space-l) 0;
  border-bottom: var(--border-width) solid var(--border-hairline);
}

.subservice__name {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: 1.3;
}

.subservice__index {
  color: var(--color-bronze-ink);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.subservice__text {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.checklist {
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 44em) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.checklist li {
  position: relative;
  padding-left: var(--space-l);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.checklist li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 14px;
  height: 1px;
  background-color: var(--color-bronze);
  content: "";
}

.section--dark .checklist li { color: var(--text-on-dark-muted); }

/* FAQ ------------------------------------------------------------------- */

.faq {
  border-top: var(--border-width) solid var(--border-light);
}

.faq__item {
  border-bottom: var(--border-width) solid var(--border-hairline);
}

.faq__question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-m) 0;
  border: 0;
  background: none;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.faq__question::after {
  flex: none;
  color: var(--color-bronze-ink);
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1;
  content: "+";
  transition: transform var(--transition-base);
}

.faq__question[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding-bottom: var(--space-m);
  color: var(--text-secondary);
  max-width: 68ch;
}

.faq__answer[hidden] {
  display: none;
}

.faq__answer > * + * {
  margin-top: var(--space-s);
}

/* Related cards --------------------------------------------------------- */

.related-grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 44em) {
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.related-card {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: var(--border-width) solid var(--border-light);
  color: inherit;
  text-decoration: none;
}

.related-card__title {
  font-size: var(--step-1);
  font-weight: var(--weight-medium);
  transition: color var(--transition-base);
}

.related-card:hover .related-card__title {
  color: var(--text-accent);
}

.related-card__text {
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

/* -------------------------------------------------------------------------
   13. Projects
   ---------------------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-xs);
  align-items: center;
  padding-block: var(--space-m);
  border-block: var(--border-width) solid var(--border-hairline);
}

.filter-bar__label {
  margin-right: var(--space-2xs);
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.filter-chip {
  min-height: 2.75rem;
  padding: 0.55rem 1rem;
  border: var(--border-width) solid var(--border-light);
  background: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--transition-base), color var(--transition-base),
    border-color var(--transition-base);
}

.filter-chip:hover {
  border-color: var(--color-brown);
  color: var(--text-accent);
}

.filter-chip[aria-pressed="true"] {
  border-color: var(--color-brown);
  background-color: var(--color-brown);
  color: var(--color-soft-white);
}

.project-archive {
  display: grid;
  gap: var(--grid-gap-lg) var(--grid-gap);
}

@media (min-width: 40em) {
  .project-archive { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68em) {
  .project-archive { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.project-archive__item[hidden] {
  display: none;
}

.filter-status {
  padding-top: var(--space-m);
  color: var(--text-secondary);
  font-size: var(--step--1);
}

/* Project gallery ------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 56em) {
  .gallery { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .gallery__item--wide { grid-column: span 12; }
  .gallery__item--half { grid-column: span 6; }
  .gallery__item--third { grid-column: span 4; }
  .gallery__item--two-thirds { grid-column: span 8; }
}

.compare-grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 44em) {
  .compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   14. Process
   ---------------------------------------------------------------------- */

.timeline {
  counter-reset: stage;
  border-top: var(--border-width) solid var(--border-light);
}

.timeline__stage {
  display: grid;
  gap: var(--space-m) var(--grid-gap-lg);
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.5rem);
  border-bottom: var(--border-width) solid var(--border-hairline);
  counter-increment: stage;
}

@media (min-width: 56em) {
  .timeline__stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
  .timeline__stage:nth-child(even) > .timeline__media { order: -1; }
}

.timeline__body {
  display: grid;
  gap: var(--space-s);
  align-content: start;
}

.timeline__index {
  color: var(--color-bronze-ink);
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
}

.timeline__title {
  font-size: var(--step-3);
  font-weight: var(--weight-light);
  line-height: 1.16;
}

.timeline__list {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.timeline__list li {
  position: relative;
  padding-left: var(--space-m);
  color: var(--text-secondary);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.timeline__list li::before {
  position: absolute;
  top: 0.7em;
  left: 0;
  width: 10px;
  height: 1px;
  background-color: var(--color-bronze);
  content: "";
}

/* Typographic plate used where documentary photography is still pending. */
.stage-plate {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-s);
  aspect-ratio: 3 / 2;
  padding: var(--space-l);
  border: var(--border-width) solid var(--border-light);
  background-color: var(--bg-warm);
  background-image:
    linear-gradient(to right, var(--border-hairline) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-hairline) 1px, transparent 1px);
  background-size: 3rem 3rem;
  text-align: center;
}

.stage-plate__number {
  font-family: var(--font-serif);
  font-size: var(--step-5);
  font-weight: var(--weight-light);
  line-height: 1;
  color: var(--color-bronze-ink);
}

.stage-plate__label {
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   15. Insights and articles
   ---------------------------------------------------------------------- */

.article-layout {
  display: grid;
  gap: var(--grid-gap-lg);
}

@media (min-width: 64em) {
  .article-layout {
    grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
  }
}

.toc {
  align-self: start;
  padding-top: var(--space-s);
  border-top: var(--border-width) solid var(--border-light);
}

@media (min-width: 64em) {
  .toc {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }
}

.toc__title {
  margin-bottom: var(--space-s);
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.toc__list {
  display: grid;
  gap: var(--space-2xs);
  font-size: var(--step--1);
}

.toc__list a {
  display: block;
  padding-block: var(--space-3xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: var(--space-xs);
  transition: color var(--transition-base), border-color var(--transition-base);
}

.toc__list a:hover,
.toc__list a.is-current {
  border-left-color: var(--color-bronze);
  color: var(--text-accent);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  padding-block: var(--space-m);
  border-block: var(--border-width) solid var(--border-hairline);
  color: var(--text-secondary);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

.takeaway {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-l);
  border: var(--border-width) solid var(--border-light);
  background-color: var(--bg-warm);
}

.takeaway__title {
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.takeaway p {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  line-height: 1.35;
}

/* Comparison and data tables -------------------------------------------- */

/* Grid and flex items default to min-width:auto, which lets wide content
   (tables, code, long words) push the container past the viewport. Resetting it
   is what keeps the horizontal scrolling inside .table-scroll. */
.article-layout > *,
.split > *,
.definition > *,
.timeline__stage > *,
.grid > * {
  min-width: 0;
}

.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}

.data-table caption {
  margin-bottom: var(--space-s);
  color: var(--text-secondary);
  font-size: var(--step--1);
  text-align: left;
}

.data-table th,
.data-table td {
  padding: var(--space-s) var(--space-m) var(--space-s) 0;
  border-bottom: var(--border-width) solid var(--border-hairline);
  vertical-align: top;
  line-height: var(--leading-normal);
}

.data-table thead th {
  border-bottom-color: var(--border-light);
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.data-table td {
  color: var(--text-secondary);
}

.data-table tbody th {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

/* -------------------------------------------------------------------------
   16. Contact and forms
   ---------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--grid-gap-lg);
}

@media (min-width: 62em) {
  .contact-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
}

.form-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 40em) {
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.field {
  display: grid;
  gap: var(--space-3xs);
}

.field > label {
  color: var(--text-primary);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}

.field__hint {
  color: var(--text-secondary);
  font-size: var(--step--2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.875rem;
  border: var(--border-width) solid var(--border-light);
  border-radius: var(--radius-none);
  background-color: var(--color-soft-white);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  transition: border-color var(--transition-base), background-color var(--transition-base);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--color-brown) 50%),
    linear-gradient(135deg, var(--color-brown) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.75rem center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: rgba(112, 78, 45, 0.4);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--color-brown);
  outline: 2px solid var(--color-brown);
  outline-offset: 1px;
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: #9a3412;
  background-color: rgba(154, 52, 18, 0.05);
}

.field__error {
  display: none;
  color: #8a2f10;
  font-size: var(--step--2);
  font-weight: var(--weight-medium);
}

.field--invalid .field__error {
  display: block;
}

.field--consent {
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-xs);
  align-items: start;
  min-height: 2.75rem;
}

/* 24px control, with the associated multi-line label providing the larger
   clickable area. */
.field--consent input {
  width: 1.5rem;
  min-height: 1.5rem;
  height: 1.5rem;
  margin-top: 0.15rem;
  accent-color: var(--color-brown);
}

.field--consent label {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  cursor: pointer;
}

.field--consent label {
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.field--consent .field__error {
  grid-column: 1 / -1;
}

.form-message {
  padding: var(--space-m);
  border: var(--border-width) solid var(--border-light);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
}

.form-message[hidden] {
  display: none;
}

.form-message--success {
  border-color: rgba(112, 78, 45, 0.45);
  background-color: rgba(204, 147, 90, 0.14);
  color: var(--text-primary);
}

.form-message--error {
  border-color: rgba(138, 47, 16, 0.4);
  background-color: rgba(138, 47, 16, 0.07);
  color: #7a2a0e;
}

.contact-panel {
  display: grid;
  gap: var(--space-l);
  align-content: start;
  padding: var(--space-l);
  border: var(--border-width) solid var(--border-light);
  background-color: var(--bg-warm);
}

.contact-panel__item {
  display: grid;
  gap: var(--space-3xs);
}

.contact-panel__label {
  color: var(--text-accent);
  font-size: var(--step--2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.contact-panel a {
  color: var(--text-primary);
  text-decoration: none;
}

.contact-panel a:hover {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

.map-embed {
  aspect-ratio: 16 / 9;
  border: var(--border-width) solid var(--border-light);
  background-color: var(--bg-warm);
}

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

/* -------------------------------------------------------------------------
   17. Utilities, motion and print
   ---------------------------------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.max-text { max-width: var(--container-text); }

/* Scroll-reveal is an enhancement only: without JS everything is visible. */
/* Scroll-reveal is an enhancement only. The hidden starting state is applied
   by the `js-reveal` class, which main.js adds immediately before it starts
   observing, so content cannot be left invisible if the script never runs or
   fails earlier in start-up. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .villa-hero__track,
  .villa-hero[data-sequence="on"] .villa-hero__track {
    height: auto;
  }

  .villa-hero__frame {
    position: relative;
    height: auto;
    min-height: 80vh;
  }
}

@media print {
  .site-header,
  .mobile-nav,
  .whatsapp-float,
  .cta-panel,
  .filter-bar,
  .toc {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .villa-hero__track { height: auto; }
  .villa-hero__frame { position: relative; height: auto; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}