/* ============================================================
   IRNERIO - Rebuild
   Editorial monochrome design, mobile-first, animation-aware.
   ============================================================ */

/* --- Audrey Medium (commercial font) ---
   Audrey is shipped as a self-hosted webfont so every visitor sees it,
   regardless of OS or whether they have the font installed locally.

   Files: assets/fonts/audrey/Audrey-Medium.{woff2,woff,otf}

   Czech coverage:
     Audrey covers all of Latin-1 Supplement (so á é í ó ú ý and their
     uppercase work natively), plus Š/š and Ž/ž from Latin Extended-A.
     It's missing Č/č, Ď/ď, Ě/ě, Ň/ň, Ř/ř, Ť/ť, Ů/ů. The unicode-range
     below excludes those code points so the browser skips Audrey for
     them and falls back to Raleway (which has full Czech), keeping
     glyphs from ever rendering as missing-tofu boxes. */
@font-face {
  font-family: "Audrey";
  src: url("../assets/fonts/audrey/Audrey-Medium.woff2") format("woff2"),
       url("../assets/fonts/audrey/Audrey-Medium.woff")  format("woff"),
       url("../assets/fonts/audrey/Audrey-Medium.otf")   format("opentype"),
       local("Audrey Medium"),
       local("Audrey-Medium"),
       local("Audrey");
  /* We only ship Audrey-Medium, but the site requests weights 300–600
     in different places. Declaring a weight range tells Safari (which
     is strict about weight matching) to use this file for any of them,
     instead of silently falling back to a system font. */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  /* Audrey-Medium's cmap claims many more glyphs than it actually draws -
     entries like @, _, `, accented Czech letters etc. are present in the
     character map but have empty outlines (rendering as invisible blank
     glyphs). This unicode-range lists ONLY the codepoints that actually
     produce visible glyphs in the file, computed from fontTools bounds
     inspection. Anything else (most punctuation symbols, all Czech
     diacritics) falls through to Raleway. */
  unicode-range:
    U+0021-003B,      /* ! " # $ % & ' ( ) * + , - . / 0-9 : ; */
    U+003D, U+003F,   /* = ? */
    U+0041-005A,      /* A–Z */
    U+005B-005E,      /* [ \ ] ^ */
    U+0061-007A,      /* a–z */
    U+00C0-00C1, U+00C8-00C9, U+00D2-00D3, U+00D9-00DA, /* À Á È É Ò Ó Ù Ú */
    U+00E0-00E1, U+00E8-00E9, U+00EC-00ED, U+00F2-00F3, U+00F9-00FA, /* à á è é ì í ò ó ù ú */
    U+2018-2019, U+201C-201D, /* curly quotes ' ' " " */
    U+2044, U+2212;   /* fraction slash, minus */
}

/* --- Design tokens --- */
:root {
  /* Brand palette - strictly three hex codes (steel, gold, paper) + opacity-derived variants.
     No black, no near-black: every "ink" reference resolves to steel (#2E4A5F). */
  --steel:     #2E4A5F;   /* MAIN - dark surfaces, headlines AND body text on paper */
  --gold:      #E5B214;   /* ACCENT - primary CTA, active underline, hover, highlights */
  --gold-ink:  #7E5F0E;   /* deep antique gold for GOLD TEXT ON LIGHT (>=4.5:1 on paper) */
  --paper:     #F2F2F4;   /* off-white - page background, light surfaces */
  --ink:       #2E4A5F;   /* aliased to steel - kept for legacy refs */

  /* Derived - opacity variants of steel and paper only (no black, ever) */
  --ink-soft:        rgba(46, 74, 95, 0.92);
  --mute:            rgba(46, 74, 95, 0.62);
  --hair:            rgba(46, 74, 95, 0.18);
  --paper-2:         rgba(46, 74, 95, 0.05);    /* soft steel tint on paper */
  --white:           #F2F2F4;                   /* aliased to paper - kept for legacy refs */
  --on-dark-text:    rgba(242, 242, 244, 0.92);
  --on-dark-soft:    rgba(242, 242, 244, 0.65);
  --on-dark-hair:    rgba(242, 242, 244, 0.16);
  --overlay:         rgba(46, 74, 95, 0.5);     /* steel overlay on hero imagery */
  --overlay-strong:  rgba(46, 74, 95, 0.75);

  /* Typography
     Audrey is the brand display font, used everywhere (EN + CS).
     Raleway sits behind it as a fallback - for Czech accented letters
     that the local Audrey install lacks (Š, Ý, Ž, Č uppercase), the
     unicode-range on Audrey's @font-face causes the browser to skip
     Audrey for those code points and use Raleway, so nothing ever
     renders as a missing glyph. */
  --font-display: "Audrey", "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-heading: "Audrey", "Raleway", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Fluid type scale (mobile → desktop via clamp) */
  --fs-xs:    clamp(0.75rem, 0.72rem + 0.2vw, 0.82rem);
  --fs-sm:    clamp(0.875rem, 0.84rem + 0.2vw, 0.95rem);
  --fs-base:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --fs-lg:    clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-xl:    clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  --fs-2xl:   clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-3xl:   clamp(2.25rem, 1.6rem + 3vw, 4.25rem);
  --fs-hero:  clamp(2.5rem, 1.6rem + 5vw, 6rem);

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: 6.5rem;
  --space-8: 9rem;

  /* Layout */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video { max-width: 100%; display: block; height: auto; }

/* --- Skip-to-content link (accessibility) --- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--steel);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: top var(--dur-fast) var(--ease);
}
.skip-link:focus {
  top: 1rem;
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- Responsive breakpoint scale ---
   Mobile-first base styles; min-/max-width queries at:
   600px  - small tablet / large phone landscape
   640px  - card + grid reflow
   720px  - nav + hero tuning
   860px  - desktop layout (multi-column grids, side-by-side splits)
   Plus max-height queries (900/680/580) for the About timeline constellation. */

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--steel);
  margin: 0 0 0.5em;
  text-transform: uppercase;
  line-height: 1.12;
  letter-spacing: 0.03em;
  /* Balance heading lines so no single short word is ever left dangling. */
  text-wrap: balance;
}
h1 {
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: 0.01em;  /* tighter at display sizes */
}
h2 {
  font-size: var(--fs-3xl);
  letter-spacing: 0.02em;
}
h3 {
  font-size: var(--fs-xl);
  letter-spacing: 0.06em;
}
h4 {
  font-size: var(--fs-base);
  letter-spacing: 0.12em;
}
p  { margin: 0 0 1em; max-width: 68ch; font-size: var(--fs-base); }
.lead { color: var(--ink-soft); line-height: 1.6; max-width: 58ch; }   /* same size as base body text */
/* Prevent last-line orphans (a lone word/short fragment) in running text,
   at every viewport. Falls back gracefully where unsupported. */
p, li, dd, dt, figcaption, blockquote, .lead, .eyebrow, .hero__lead {
  text-wrap: pretty;
}
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
  display: inline-block;
  margin-bottom: var(--space-2);
}
.muted { color: var(--mute); }

/* --- Layout --- */
.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }
.wrap-narrow { width: min(var(--wrap-narrow), 92vw); margin-inline: auto; }
.section { padding-block: clamp(var(--space-5), 10vh, var(--space-8)); }
.section--tight { padding-block: clamp(var(--space-4), 6vh, var(--space-6)); }
/* Phones: the viewport-height (10vh) padding stacks into large empty gaps
   between sections. Tighten the vertical rhythm so blocks sit closer together. */
@media (max-width: 700px) {
  .section { padding-block: clamp(1.9rem, 5vh, 2.9rem); }
  .section--tight { padding-block: clamp(1.5rem, 4vh, 2.25rem); }
}
.section--alt { background: var(--paper); }
/* Dark sections now sit on steel (#2E4A5F) - the main brand surface */
.section--dark { background: var(--steel); color: var(--paper); }
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--paper); }
.section--dark p { color: var(--on-dark-text); }
.section--dark .eyebrow,
.hero .eyebrow { color: var(--gold); }
.section--dark .muted { color: var(--on-dark-soft); }

/* Ink variant - now resolves to steel (no black anywhere on the site) */
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink h1,
.section--ink h2,
.section--ink h3 { color: var(--paper); }
.section--ink p { color: var(--on-dark-text); }
.section--ink .eyebrow { color: var(--gold); }

.grid { display: grid; gap: var(--space-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Feature grids ("three qualities" on property pages): reserve two heading
   lines so the three paragraphs align across columns even when one title wraps
   to a second line. Scoped to exclude the About value cards (they carry icons). */
@media (min-width: 560px) {
  .grid-3:not(:has(.value-card)) > article > h3 { min-height: 2.4em; }
}
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Grid items default to min-content min-width, which lets long words like
   "ENTREPRENEURSHIP" push past their column and overlap the next one.
   Forcing min-width: 0 keeps content boxed to its column. We use
   `overflow-wrap: break-word` (not `anywhere`) so a too-long word breaks
   only as a last resort - preventing ugly mid-word breaks like
   "ENTREPRENEURS / HIP" at common widths. Pair with sized headings
   (.value-card h3 below) so words fit on one line normally. */
.grid > * { min-width: 0; }
.grid h3 { overflow-wrap: break-word; }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.8em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  will-change: transform;
}
.btn--primary { background: var(--gold); color: var(--steel); }
.btn--primary:hover { background: var(--steel); color: var(--gold); border-color: var(--steel); transform: translateY(-1px); }
.btn--ghost { border-color: var(--steel); color: var(--steel); }
.btn--ghost:hover { background: var(--steel); color: var(--paper); }
.btn--on-dark { background: var(--gold); color: var(--steel); border-color: var(--gold); }
.btn--on-dark:hover { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* --- Navigation --- */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 1.1rem;
  background: transparent;
  color: var(--paper);
  transition: background-color var(--dur-med) var(--ease),
              color var(--dur-med) var(--ease),
              padding var(--dur-med) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.nav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.95rem;
}
.nav__logo img { height: 64px; width: auto; transition: opacity var(--dur-fast), height var(--dur-fast); }
.nav.is-scrolled .nav__logo img,
.nav.is-solid .nav__logo img { height: 56px; }
.nav__list {
  display: none;
  gap: var(--space-4);
  align-items: center;
}
.nav__link {
  position: relative;
  font-family: var(--font-heading); /* Audrey, with Raleway fallback */
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-block: 0.4em;
  font-weight: 500;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur-med) var(--ease);
}
.nav__link:hover::after { transform: scaleX(1); transform-origin: left center; }
.nav__link[aria-current="page"]::after {
  background: var(--gold);
  transform: scaleX(1);
  transform-origin: left center;
  height: 2px;
}

/* Language switcher (CS / EN) */
.nav__lang {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: var(--space-3);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.nav__lang a {
  opacity: 0.55;
  transition: opacity 200ms var(--ease), color 200ms var(--ease);
  padding: 0.2em 0;
}
.nav__lang a:hover { opacity: 1; }
.nav__lang a[aria-current="true"] {
  opacity: 1;
  color: var(--gold);
}
.nav__lang span {
  opacity: 0.3;
  user-select: none;
}
.nav__drawer .nav__lang {
  margin-left: 0;
  margin-top: var(--space-3);
}

/* Scrolled state */
.nav.is-scrolled {
  background: rgba(242, 242, 244, 0.96);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  color: var(--ink);
  padding-block: 0.75rem;
  box-shadow: 0 1px 0 var(--hair);
}
/* Swap the white-on-dark logo for the brand-coloured version when the
   nav goes onto a light surface. `content: url(...)` replaces the image
   source while preserving alt text and size. Using a second asset (not
   filter:invert) keeps the gold R and gold "1941" gold - inverting the
   white logo would turn its gold accents into blue. */
.nav.is-scrolled .nav__logo img,
.nav.is-solid .nav__logo img { content: url("../assets/images/logo-color.png"); }
.nav.is-solid {
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--hair);
}

/* Mobile menu toggle */
.nav__toggle {
  --bar: currentColor;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  margin-right: -10px;
}
.nav__toggle span {
  width: 26px; height: 1.5px; background: var(--bar);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Prevent scroll behind open drawer (works on iOS too) */
body.nav-open { overflow: hidden; height: 100svh; }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  /* "safe center": centre the items when they fit, but align to the top (never
     clip Home/Contact) when they don't — e.g. landscape or very small phones. */
  justify-content: safe center;
  align-items: center;
  /* Compact, viewport-height-aware spacing so the items always fit (no scroll). */
  gap: clamp(0.45rem, 2.2vh, 1.3rem);
  /* Scroll only as a last resort (very short landscape). */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Clear the nav bar at the top and respect notch / home-indicator insets. */
  padding: max(4rem, calc(env(safe-area-inset-top, 0px) + 3.5rem)) 1.25rem
           max(var(--space-3), calc(env(safe-area-inset-bottom, 0px) + 1rem));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med);
  z-index: 49;
}
.nav__drawer.is-open { opacity: 1; visibility: visible; }
.nav__drawer .nav__link {
  font-size: clamp(1.3rem, 1rem + 2.2vh, 1.85rem);   /* shrinks on short screens so all links fit */
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav__drawer .nav__link::after { display: none; }

@media (min-width: 860px) {
  .nav__list { display: flex; }
  .nav__toggle { display: none; }
}

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  background: var(--steel);
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1600ms var(--ease);
  will-change: transform;
}
.hero.is-ready .hero__media img { transform: scale(1); }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    /* Bottom legibility band - guarantees text contrast on bright video frames */
    linear-gradient(180deg, rgba(46,74,95,0) 35%, rgba(46,74,95,0.55) 75%, rgba(46,74,95,0.88) 100%),
    /* Subtle global tint */
    linear-gradient(180deg, rgba(46,74,95,0.18) 0%, rgba(46,74,95,0.18) 100%);
  z-index: 1;
}
.hero__content {
  position: relative;
  padding-block: var(--space-7) var(--space-6);
  max-width: 920px;
}

/* Hero variant: only the brand logo centered over the video. */
.hero__content--logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--space-4);
  max-width: none;
  z-index: 2;
  pointer-events: none;
}
.hero__logo {
  margin: 0;
  line-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease, transform 900ms ease;
  perspective: 900px;            /* depth for the cursor-tilt */
}
.hero.is-ready .hero__logo { opacity: 1; transform: translateY(0); }
/* Wrapper that tilts toward the cursor (rotation set per-frame in main.js) */
.hero__logo-tilt {
  position: relative;
  display: inline-block;
  will-change: transform;
  transform-style: preserve-3d;
}
.hero__logo img {
  display: block;
  width: clamp(220px, 48vw, 560px);
  height: auto;
  filter: drop-shadow(0 2px 24px rgba(46, 74, 95, 0.45));
}
/* Gold sheen masked to the logo shape; slides with the tilt (main.js) */
.hero__logo-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask: url("../assets/images/irnerio-logo-negative.png") center / contain no-repeat;
          mask: url("../assets/images/irnerio-logo-negative.png") center / contain no-repeat;
  background: linear-gradient(
    105deg,
    rgba(255, 240, 205, 0) 40%,
    rgba(255, 240, 205, 0.70) 50%,
    rgba(255, 240, 205, 0) 60%
  );
  background-size: 260% 100%;
  background-position-x: 50%;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  .hero__logo-tilt { transform: none !important; }
  .hero__logo-sheen { display: none; }
}
/* Force hero text to paper (white) and add shadows for legibility on bright video frames */
.hero__title,
.hero .hero__title { color: var(--paper); text-shadow: 0 2px 28px rgba(46, 74, 95, 0.55), 0 1px 6px rgba(46, 74, 95, 0.45); }
.hero__lead { text-shadow: 0 1px 16px rgba(46, 74, 95, 0.55); }
.hero .eyebrow { color: var(--gold); text-shadow: 0 1px 10px rgba(46, 74, 95, 0.5); }

.hero__title { margin-bottom: var(--space-3); }
.hero__title .line {
  display: block;
  /* `clip` (not `hidden`) preserves the scroll-anchor behaviour while still
     masking the entrance translation. Extra block padding + a relaxed
     line-height stop Audrey's tall capital diacritics from being shaved
     off at the top of each line. */
  overflow: clip;
  line-height: 1.12;
  padding-block: 0.08em 0.02em;
}
.hero__title .line span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease);
}
.hero.is-ready .hero__title .line span { transform: translateY(0); }
.hero__title .line:nth-child(2) span { transition-delay: 120ms; }
.hero__title .line:nth-child(3) span { transition-delay: 240ms; }

.hero__lead {
  color: rgba(242,242,244,0.92);
  max-width: 52ch;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease) 360ms, transform var(--dur-slow) var(--ease) 360ms;
}
.hero__cta {
  margin-top: var(--space-4);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease) 520ms, transform var(--dur-slow) var(--ease) 520ms;
}
.hero.is-ready .hero__lead,
.hero.is-ready .hero__cta { opacity: 1; transform: translateY(0); }

.hero--short { min-height: 58svh; }
.hero--short .hero__content { padding-block: var(--space-6) var(--space-5); }

/* --- Hero with video background --- */
.hero--video { min-height: 100svh; }
.hero__media video,
.hero__media .hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  /* Subtle slow-zoom matching the still-image hero */
  transform: scale(1.04);
  transition: transform 2400ms var(--ease);
  will-change: transform;
}
.hero.is-ready .hero__media video { transform: scale(1); }
.hero__media video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Featured property slideshow --- */
.featured__viewport {
  position: relative;
  margin-top: var(--space-3);
  padding-inline: clamp(64px, 6vw, 88px);   /* room for arrows - min 64 px so 56 px button never clips into image */
}
.featured__stage {
  position: relative;
  overflow: hidden;
}
.featured__slides {
  position: relative;
  /* Provide enough room for the tallest slide content; image is responsive */
  min-height: clamp(420px, 56vw, 620px);
}
.featured__slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(var(--space-3), 4vw, var(--space-6));
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 600ms;
  pointer-events: none;
}
.featured__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.featured__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}
.featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 8s var(--ease);
}
.featured__slide.is-active .featured__media img { transform: scale(1.08); }   /* slow ken-burns drift */

.featured__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-inline: clamp(0px, 1vw, var(--space-2));
}
.featured__location {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--steel);   /* WCAG AA compliant on paper background */
  margin-bottom: var(--space-1);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.featured__location::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}
.featured__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--steel);
  line-height: 1.05;
  margin: 0;
  position: relative;
  padding-left: var(--space-3);
}
.featured__title::before {
  content: "";
  position: absolute;
  left: 0; top: 0.18em; bottom: 0.22em;
  width: 3px;
  background: var(--gold);
}
.featured__copy {
  color: var(--ink-soft);
  max-width: 44ch;
  margin: 0;
}
.featured__cta { margin-top: var(--space-2); }

/* Arrows: pinned to vertical centre of the stage on desktop */
.featured__arrow {
  --size: 56px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;    /* guarantees border-radius clips on all browsers */
  background: var(--gold);
  color: var(--steel);
  border: 1px solid var(--gold);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease);
  box-shadow: 0 6px 20px rgba(46, 74, 95, 0.18);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.featured__arrow:hover {
  background: var(--steel);
  color: var(--gold);
  border-color: var(--steel);
  transform: translateY(-50%) scale(1.06);
}
.featured__arrow:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
}
.featured__arrow svg { width: 22px; height: 22px; }
.featured__arrow--prev { left: 0; }
.featured__arrow--next { right: 0; }

/* Footer row: dots + counter */
.featured__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.featured__dots {
  display: inline-flex;
  gap: 14px;
  align-items: center;
}
.featured__dot {
  width: 36px;
  height: 2px;
  background: var(--hair);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease), width var(--dur-med) var(--ease);
}
.featured__dot:hover { background: var(--mute); }
.featured__dot.is-active {
  background: var(--gold);
  width: 56px;
}
.featured__counter {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--mute);
}
.featured__counter [data-current] { color: var(--steel); font-weight: 600; }

@media (max-width: 860px) {
  /* Reserve a row at the top of the carousel for the prev/next nav, so it sits
     ABOVE the slide (image + property name) instead of overlapping the text. */
  .featured__viewport { padding: 56px 0 0; }
  .featured__slides { min-height: clamp(580px, 130vw, 760px); }
  .featured__slide {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-content: start;
  }
  .featured__media { aspect-ratio: 5 / 4; }
  .featured__arrow {
    --size: 44px;
    top: 4px;
    bottom: auto;
    transform: none;
  }
  .featured__arrow:hover { transform: scale(1.06); }
  /* Centred pair, 12 px apart, above the slide */
  .featured__arrow--prev { left: calc(50% - 50px); right: auto; }
  .featured__arrow--next { left: calc(50% + 6px); right: auto; }
  .featured__footer { margin-top: var(--space-5); }
}

/* --- Property navigation (prev/next on detail pages) --- */
.property-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: var(--wrap);
  margin: 0 auto var(--space-6);
  padding-inline: clamp(1rem, 4vw, var(--space-4));
}
.property-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: var(--space-3);
  background: var(--paper-2);
  border: 1px solid var(--hair);
  text-decoration: none;
  color: var(--steel);
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.property-nav__link:hover,
.property-nav__link:focus-visible {
  background: var(--steel);
  color: var(--paper);
  border-color: var(--steel);
  transform: translateY(-2px);
}
.property-nav__link--prev { text-align: left; }
.property-nav__link--next { text-align: right; }
.property-nav__direction {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}
.property-nav__link:hover .property-nav__direction,
.property-nav__link:focus-visible .property-nav__direction {
  color: var(--gold);
}
.property-nav__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.property-nav__link--prev .property-nav__direction::before { content: "← "; }
.property-nav__link--next .property-nav__direction::after  { content: " →"; }

@media (max-width: 600px) {
  .property-nav { grid-template-columns: 1fr; }
  .property-nav__link--next { text-align: left; }
  .property-nav__link--next .property-nav__direction::after { content: " →"; }
}

/* Scroll cue */
.hero__cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  z-index: 1;
}
/* Extra breathing room above the scroll cue on full heroes (property pages) */
.hero:not(.hero--short):not(.hero--video) .hero__content {
  padding-block-end: var(--space-7);
}
.hero:not(.hero--short) .hero__cue { bottom: 2.25rem; }
.hero__cue::after {
  content: "";
  width: 1px;
  height: 42px;
  background: currentColor;
  animation: cue 2.2s var(--ease) infinite;
  transform-origin: top center;
}
@keyframes cue {
  0%   { transform: scaleY(0); }
  40%  { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom center; }
}

/* --- Property gallery grids: column counts chosen so every row is complete
   (no orphan image / empty cell) at each breakpoint. --4 = 4/2 cols, --3 = 3/1,
   --2 = 2/1. Use the count that matches: 8 or 4 -> --4, 6 or 3 -> --3, 2 -> --2. */
.gallery-grid { display: grid; gap: var(--space-3); }
.gallery-grid--4 { grid-template-columns: repeat(4, 1fr); }
.gallery-grid--3 { grid-template-columns: repeat(3, 1fr); }
.gallery-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 920px) {
  .gallery-grid--4 { grid-template-columns: repeat(2, 1fr); }   /* 8->4 rows, 4->2 rows */
}
@media (max-width: 600px) {
  .gallery-grid--3,
  .gallery-grid--2 { grid-template-columns: 1fr; }
}

/* --- Property cards --- */
.cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card {
  position: relative;
  background: var(--paper);
  overflow: hidden;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--paper-2);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02);
  transition: transform 1000ms var(--ease), filter var(--dur-med) var(--ease);
}
.card:hover .card__media img { transform: scale(1.08); }
.card__body { padding: var(--space-3) 0.25rem var(--space-2); }
.card__title { font-size: var(--fs-xl); margin-bottom: 0.35em; }
.card__text { color: var(--ink-soft); font-size: var(--fs-base); line-height: 1.6; }
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-2);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink);
}
.card__link::after {
  content: "→";
  transition: transform var(--dur-fast) var(--ease);
}
.card:hover .card__link::after { transform: translateX(4px); }

/* Clickable property name in the rentals table -> jumps to that property's gallery */
.rentals__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--steel);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
  transition: color var(--dur-fast);
}
.rentals__link span { transition: transform var(--dur-fast) var(--ease); }
.rentals__link:hover { color: var(--gold); }
.rentals__link:hover span { transform: translateX(3px); }

/* --- Split / feature blocks --- */
.split {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}
.split__media { overflow: hidden; border-radius: var(--radius-md); }
.split__media img {
  width: 100%;
  transition: transform 1200ms var(--ease);
}
.split:hover .split__media img { transform: scale(1.03); }
@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .split--flip .split__media { order: 2; }
}

/* --- Metrics --- */
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-5) clamp(2.5rem, 7vw, 6.5rem);
  padding-block: var(--space-5);
  border-block: 1px solid var(--hair);
  text-align: center;
}
.metrics > * { flex: 0 0 auto; }
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.metric__label {
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 0.4em;
}

/* --- Team --- */
.team {
  display: grid;
  gap: var(--space-4) var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px) {
  .team { grid-template-columns: 1fr; }
}
.team__card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  text-align: left;
  padding: 0.5rem 0;
}
.team__photo {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  background: var(--paper-2);
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid var(--hair);
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease); }
.team__card:hover .team__photo img { transform: scale(1.06); }
/* Initials avatar - used while real photos are pending. The monogram
   matches the person's name (e.g. "Cora Segre" → "CS"), set via the
   data-initials attribute on the .team__photo element. */
.team__photo--initials {
  display: grid;
  place-items: center;
  background: var(--steel);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.team__photo--initials::before { content: attr(data-initials); }
.team__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.team__name { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 500; line-height: 1.2; color: var(--steel); }
.team__role { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); margin-bottom: 0.3rem; }
.team__bio  { font-size: var(--fs-sm); line-height: 1.55; color: var(--ink-soft); margin: 0; }
.team__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-xs);
  color: var(--steel);
  text-decoration: none;
  align-self: flex-start;
  margin-top: 0.45rem;
  border-bottom: 1px solid var(--gold);
  transition: color 200ms var(--ease);
}
.team__contact:hover { color: var(--gold); }
.team__contact svg { width: 12px; height: 12px; }

/* --- Status badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.7em;
  border-radius: 2em;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge--available {
  background: rgba(52, 168, 83, 0.12);
  color: #1e7e34;
}
.badge--soon {
  background: rgba(229, 178, 20, 0.15);
  color: #9a6900;
}
.badge--rented {
  background: var(--paper-2);
  color: var(--mute);
}

/* --- Rental table --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--radius-md); }
table.rentals {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  min-width: 560px;
}
.rentals th, .rentals td {
  text-align: left;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--hair);
}
.rentals th {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--mute);
  background: var(--paper);
}
.rentals tbody tr { transition: background-color var(--dur-fast); }
.rentals tbody tr:hover { background: var(--paper); }
.rentals tbody tr:last-child td { border-bottom: 0; }
.rentals td:last-child, .rentals th:last-child { text-align: right; }

/* --- Footer --- */
.footer {
  background: var(--steel);
  color: var(--on-dark-text);
  padding-block: var(--space-5) var(--space-3);
  font-size: var(--fs-sm);
}
.footer a { color: inherit; transition: color var(--dur-fast); }
.footer a:hover { color: var(--gold); }
.footer__grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-block: var(--space-4);
}
@media (min-width: 720px) {
  .footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.footer .footer__heading {
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: var(--space-2);
}
/* Footer is left-aligned across all viewports. Forced explicitly because
   text-align can be inherited from any ancestor (.center utility, hero,
   etc.) and a grid cell with mixed content shouldn't depend on defaults. */
.footer__grid > div { text-align: left; }
.footer__logo {
  display: block;          /* block so it claims its own line on the left */
  width: fit-content;      /* hug the image, no centring via auto-margins */
  margin: 0 0 var(--space-2) -23px;
}
.footer__logo img { height: 80px; width: auto; }
.footer__tagline { max-width: 38ch; color: var(--on-dark-soft); }
.footer__links li { margin-bottom: 0.5em; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-top: var(--space-3);
  color: var(--on-dark-soft);
  font-size: 0.85rem;
}

/* --- Reveal animations --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal--right { transform: translateX(-28px); }
.reveal--right.in-view { transform: translateX(0); }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }
.reveal[data-delay="5"] { transition-delay: 400ms; }

/* --- Utilities --- */
.center { text-align: center; }
.max-60 { max-width: 60ch; margin-inline: auto; }
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__title .line span { transform: none !important; }
  .hero__lead, .hero__cta { opacity: 1 !important; transform: none !important; }
  .hero__media img,
  .hero__media video { transform: none !important; }
}

/* --- Print --- */
@media print {
  .nav, .footer, .hero__cue { display: none; }
  body { color: var(--ink); background: var(--paper); }
}

/* --- Gallery lightbox (click any gallery image to enlarge) --- */
#gallery .card,
#gallery .card__media { cursor: zoom-in; }
/* subtle "click to enlarge" affordance on hover */
#gallery .card__media { position: relative; }
#gallery .card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(6, 9, 12, 0.0) 60%, rgba(6, 9, 12, 0.18) 100%);
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease);
  pointer-events: none;
}
#gallery .card:hover .card__media::after,
#gallery .card__media:focus-visible::after { opacity: 1; }
#gallery .card__media:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 9, 12, 0.97);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med) var(--ease);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
  transform: scale(0.97);
  transition: transform var(--dur-med) var(--ease);
}
.lightbox.is-open .lightbox__img { transform: scale(1); }
.lightbox__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(0.8rem, 3vh, 1.8rem);
  transform: translateX(-50%);
  max-width: 80vw;
  text-align: center;
  color: rgba(242, 242, 244, 0.82);
  font-size: var(--fs-sm);
}
.lightbox__counter {
  position: absolute;
  top: clamp(1rem, 4vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(242, 242, 244, 0.7);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
}
.lightbox__btn {
  position: absolute;
  z-index: 2;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.6rem;
  line-height: 1;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover,
.lightbox__btn:focus-visible { background: var(--gold); border-color: var(--gold); color: #0a1016; }
.lightbox__close { top: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem); width: 44px; height: 44px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: clamp(0.5rem, 3vw, 2rem); }
.lightbox__next { right: clamp(0.5rem, 3vw, 2rem); }
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { transition: none; }
  .lightbox__img { transform: none; }
}