/* ==========================================================================
   LUX Group — Swiss anchor.
   White ground, one sans family (Stapel), hairline rules, left-aligned
   asymmetry, numerals as composition. No accent hue: the photography is the
   only colour on the page.

   Written with logical properties throughout so the Hebrew build mirrors
   without a second stylesheet.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Stapel carries Latin + Cyrillic. It has no Georgian or Hebrew glyphs, so
   Noto Sans Georgian and Heebo are declared after it in the stack and the
   browser falls back per character. */

@font-face {
  font-family: 'Stapel';
  src: url('../fonts/stapel-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Stapel';
  src: url('../fonts/stapel-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Georgian';
  src: url('../fonts/noto-georgian-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}
@font-face {
  font-family: 'Heebo';
  src: url('../fonts/heebo-hebrew-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* --- Tokens -------------------------------------------------------------- */

:root {
  --ink: #000;
  --paper: #fff;
  --muted: #6b6b6b;
  --rule: rgba(0, 0, 0, 0.14);
  --rule-strong: rgba(0, 0, 0, 0.34);
  --on-photo: #fff;
  --rule-photo: rgba(255, 255, 255, 0.34);

  /* The one hue on the site. Petrol rather than a bright blue: it is the
     colour the sea actually is in the renders on either side of it, so the
     figures read as part of the photography rather than as a UI accent
     dropped on top. Deep enough to carry white type at AA on any of them. */
  --accent: #0e4557;
  --accent-deep: #0a3543;

  --font: 'Stapel', 'Noto Sans Georgian', 'Heebo', 'Helvetica Neue', Arial, sans-serif;

  /* Georgian and Hebrew are unicameral — uppercasing them does nothing at
     best and breaks shaping at worst, so the transform is a token. */
  --display-transform: uppercase;
  --display-track: -0.015em;
  --display-leading: 0.9;

  --gutter: clamp(20px, 5vw, 72px);
  --section: clamp(56px, 7.4vw, 112px);
  --maxw: 1560px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

:root[lang='ka'],
:root[lang='he'] {
  --display-transform: none;
  --display-track: 0;
  --display-leading: 1.06;
}

/* --- Reset --------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 300;
  font-size: clamp(15px, 1.02vw, 17px);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* --- Type scale ---------------------------------------------------------- */

.display,
.h1, .h2, .h3 {
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: var(--display-track);
  line-height: var(--display-leading);
  text-wrap: balance;
}

.h1 { font-size: clamp(38px, 7.4vw, 116px); }
.h2 { font-size: clamp(28px, 3.6vw, 54px); }
.h3 { font-size: clamp(19px, 1.7vw, 26px); line-height: 1.12; }

/* Wide-tracked uppercase micro-label. Latin/Cyrillic only — the ka/he tokens
   drop the transform, and the tracking with it. */
.label {
  font-size: clamp(10px, 0.72vw, 11.5px);
  font-weight: 300;
  text-transform: var(--display-transform);
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--muted);
}
:root[lang='ka'] .label,
:root[lang='he'] .label { letter-spacing: 0.06em; }

.lead { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.45; }
.muted { color: var(--muted); }

/* Numerals as composition elements — section folios. */
.folio {
  font-weight: 700;
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* --- Layout -------------------------------------------------------------- */

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

.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* Every section opens with a hairline rule and its folio + label on one line. */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(16px, 3vw, 48px);
  align-items: start;
  border-block-start: 1px solid var(--rule);
  padding-block-start: 14px;
  margin-block-end: clamp(22px, 3vw, 44px);
}
.section-head__meta { display: flex; gap: 14px; align-items: baseline; }
.section-head__body { max-width: 68ch; }
.section-head .h2 { margin-block-end: 14px; }

@media (max-width: 700px) {
  .section-head { grid-template-columns: 1fr; gap: 14px; }
}

.cols {
  display: grid;
  gap: clamp(20px, 2.6vw, 40px);
}
.cols--2 { grid-template-columns: repeat(2, 1fr); }
.cols--3 { grid-template-columns: repeat(3, 1fr); }
.cols--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1000px) {
  .cols--3, .cols--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .cols--2, .cols--3, .cols--4 { grid-template-columns: 1fr; }
}

/* --- The ring -----------------------------------------------------------
   The one structural motif: an open hairline circle at a constant 1px stroke,
   from a 13px list marker up to a 60vmin arc bleeding off the hero. */

.ring {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 50%;
  border-inline-end-color: transparent;
  aspect-ratio: 1;
  flex: none;
}
.ring--sm { width: 13px; }
.ring--md { width: 26px; }

.ring-arc {
  position: absolute;
  inline-size: 60vmin;
  aspect-ratio: 1;
  border: 1px solid var(--rule-photo);
  border-radius: 50%;
  border-inline-end-color: transparent;
  inset-block-start: -14vmin;
  inset-inline-start: -16vmin;
  pointer-events: none;
}

/* Scroll indicator: the same ring, closing as the page is read. */
.scroll-ring {
  position: fixed;
  inset-block-end: clamp(18px, 3vw, 34px);
  inset-inline-end: clamp(18px, 3vw, 34px);
  inline-size: 42px;
  aspect-ratio: 1;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  pointer-events: none;
}
.scroll-ring.is-on { opacity: 1; pointer-events: auto; }
.scroll-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.scroll-ring circle { fill: none; stroke-width: 1; }
.scroll-ring .track { stroke: var(--rule); }
.scroll-ring .fill { stroke: var(--ink); transition: stroke-dashoffset 0.1s linear; }
.scroll-ring button {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
}
.scroll-ring button::before {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 7px;
  block-size: 7px;
  border-inline-start: 1px solid currentColor;
  border-block-start: 1px solid currentColor;
  transform: translate(-50%, -30%) rotate(45deg);
}
:root[dir='rtl'] .scroll-ring button::before { transform: translate(50%, -30%) rotate(45deg); }

/* --- Masthead ------------------------------------------------------------ */

.masthead {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 80;
  color: var(--on-photo);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
  border-block-end: 1px solid transparent;
}
.masthead.is-solid {
  background: var(--paper);
  color: var(--ink);
  border-block-end-color: var(--rule);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: clamp(14px, 1.6vw, 22px);
}

/* Wordmark lockup: thin open ring with LUX and its caption set inside it, as
   in the original mark. The lockup is the circle — the text is centred on it
   rather than sitting alongside, so both lines have to stay small enough to
   clear the stroke. */
.mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: clamp(56px, 4.6vw, 74px);
  aspect-ratio: 1;
}
.mark__arc {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Logical properties cannot mirror a path, so Hebrew flips it explicitly and
   the ring opens the way the rest of the page runs. */
:root[dir='rtl'] .mark__arc { transform: scaleX(-1); }

.mark__text {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.mark__lux {
  font-weight: 300;
  font-size: clamp(11px, 0.94vw, 14px);
  letter-spacing: 0.16em;
  /* Tracking hangs off the last letter; trimming it keeps the X optically
     centred over the sub-line rather than pushed left. */
  margin-inline-end: -0.16em;
}
.mark__sub {
  font-size: clamp(5.5px, 0.42vw, 6.5px);
  font-weight: 300;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-block-start: 4px;
  margin-inline-end: -0.28em;
  opacity: 0.72;
}

.nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 34px); }
.nav a {
  font-size: clamp(11px, 0.8vw, 13px);
  letter-spacing: 0.14em;
  text-transform: var(--display-transform);
  padding-block: 6px;
  border-block-end: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.nav a:hover, .nav a[aria-current='page'] { border-block-end-color: currentColor; }

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

/* Language switch */
.langs { display: flex; align-items: center; gap: 2px; }
.langs a {
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 5px 8px;
  border: 1px solid transparent;
  transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease);
  opacity: 0.6;
}
.langs a:hover { opacity: 1; }
.langs a[aria-current='true'] { opacity: 1; border-color: currentColor; }

/* Lead-quiz button, seated right of the language switch. It is a link dressed
   as a button — the quiz is its own page. The .nav rule above would otherwise
   strip its lower edge and only paint it back on hover. */
.nav a.masthead__cta {
  padding: 9px 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  border: 1px solid currentColor;
}
/* Below this the burger takes over and the drawer carries the button instead. */
@media (max-width: 900px) {
  .nav a.masthead__cta { display: none; }
}
.drawer .drawer__cta {
  align-self: flex-start;
  margin-block-start: clamp(28px, 5vw, 48px);
  /* .drawer a sets the oversized nav type and a 6px block padding; the button
     needs its own size back. */
  padding: 14px 24px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
}

/* Mobile drawer */
.burger {
  display: none;
  background: none;
  border: 1px solid currentColor;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: var(--display-transform);
}
@media (max-width: 900px) { .burger { display: block; } }

.drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  transform: translateY(-100%);
  transition: transform 0.45s var(--ease);
}
/* `display: flex` above would otherwise beat the UA's `[hidden]` rule, leaving
   the closed drawer laid out off-screen — where its oversized links widened
   the document and broke the mobile layout. */
.drawer[hidden] { display: none; }
.drawer.is-open { transform: none; }
/* The links are inline by default and ran together as one block of text. */
.drawer nav { display: flex; flex-direction: column; align-items: flex-start; }
.drawer a {
  font-weight: 700;
  font-size: clamp(28px, 8vw, 52px);
  text-transform: var(--display-transform);
  line-height: 1.16;
  letter-spacing: var(--display-track);
  padding-block: 6px;
}
.drawer__close {
  position: absolute;
  inset-block-start: var(--gutter);
  inset-inline-end: var(--gutter);
  background: none;
  border: 1px solid var(--ink);
  padding: 9px 12px;
  cursor: pointer;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: var(--display-transform);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-block-size: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--on-photo);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* --- The film strip ------------------------------------------------------
   A band of its own directly under the masthead, at the film's own 16:9 until
   that would make it taller than the screen, at which point the height is
   capped and the frame crops rather than the band narrowing. The width is
   pinned at 100% for that reason: with only a ratio and a max height, a box
   this wide resolves its auto width from the ratio instead, and on an
   ultrawide screen it stopped 880px short of the right edge.

   The video is served from this site, so there is no player chrome to hide and
   nothing to fall back from; its poster is the hero's still, which holds the
   block until the first frame paints. */

.filmstrip {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  max-block-size: 100svh;
  overflow: hidden;
  background: #000;
}
.filmstrip__video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  background: #000;
}
/* Under the fixed masthead the top of the frame would sit in shadow, so the
   band carries its own light scrim rather than borrowing the hero's. */
.filmstrip::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  block-size: 30%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 46%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}
/* Two scrims: a vertical one to seat the masthead and the stat strip, and a
   horizontal one so the headline keeps contrast over a bright sky. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.88) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.14) 55%, rgba(0, 0, 0, 0) 78%);
}
:root[dir='rtl'] .hero::after { transform: scaleX(-1); }
.hero__inner { inline-size: 100%; padding-block-end: clamp(28px, 5vw, 64px); padding-block-start: 30svh; }
.hero .label { color: rgba(255, 255, 255, 0.92); }
.hero .h1 { max-inline-size: 17ch; margin-block: 18px 22px; }
.hero__sub { max-inline-size: 56ch; font-size: clamp(15px, 1.25vw, 20px); color: rgba(255, 255, 255, 0.86); }

/* Hero stat strip — hairline-divided, tabular figures. */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-block-start: 1px solid var(--rule-photo);
  margin-block-start: clamp(30px, 5vw, 58px);
}
/* Flex column with the value pushed down, so a label that wraps to two lines
   doesn't drop its figure out of line with its neighbours. */
.hero__stats > * {
  display: flex;
  flex-direction: column;
  padding: 18px clamp(12px, 2vw, 28px) 4px;
  border-inline-start: 1px solid var(--rule-photo);
}
.hero__stats > *:first-child { border-inline-start: 0; padding-inline-start: 0; }
.hero__stats dt { font-size: 11px; letter-spacing: 0.18em; text-transform: var(--display-transform); opacity: 0.75; }
.hero__stats dd {
  margin: 8px 0 0;
  margin-block-start: auto;
  padding-block-start: 8px;
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 34px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: clamp(24px, 3vw, 38px); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border: 1px solid currentColor;
  background: none;
  cursor: pointer;
  font-size: clamp(11px, 0.82vw, 13px);
  letter-spacing: 0.16em;
  text-transform: var(--display-transform);
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.btn:hover { background: currentColor; }
.btn:hover > * { mix-blend-mode: difference; }
.btn--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--solid:hover { background: transparent; color: var(--ink); }
.btn--solid:hover > * { mix-blend-mode: normal; }
.btn--photo { color: var(--on-photo); }

/* --- Figures ------------------------------------------------------------- */

.fig { position: relative; margin: 0; background: #eee; overflow: hidden; }
.fig img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.fig img.is-loaded { opacity: 1; }
.fig--wide { aspect-ratio: 16 / 9; }
.fig--tall { aspect-ratio: 3 / 4; }
.fig--square { aspect-ratio: 1; }
.fig--plan { aspect-ratio: 16 / 9; background: #fff; }
.fig--plan img { object-fit: contain; }

.fig__cap {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  padding: 12px 16px;
  color: var(--on-photo);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: var(--display-transform);
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), transparent);
  inline-size: 100%;
}

/* --- Project cards (global page) ---------------------------------------- */

/* Full-bleed pair, hairline-gapped. The selector is the first thing after the
   hero, so the cards run edge to edge rather than sitting inside the measure. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(8px, 0.9vw, 14px);
  padding-inline: clamp(8px, 0.9vw, 14px);
}
@media (max-width: 820px) {
  .projects-grid { grid-template-columns: 1fr; }
}

.project {
  position: relative;
  color: var(--on-photo);
  overflow: hidden;
  isolation: isolate;
  min-block-size: clamp(420px, 58vh, 660px);
  padding: clamp(20px, 2.4vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.project img {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease);
}
/* The taller card puts the caption over more of the render, so the scrim ramps
   up earlier and finishes darker than it needed to at the old height. */
.project::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.24) 0%,
    rgba(0, 0, 0, 0.03) 38%,
    rgba(0, 0, 0, 0.46) 68%,
    rgba(0, 0, 0, 0.88) 100%
  );
}
.project:hover img { transform: scale(1.04); }
/* Highest in the caption, so the thinnest scrim behind it and the first thing
   to go unreadable over a bright render. Deepening the scrim far enough to
   carry it would have darkened the picture the card exists to show, so the
   contrast is carried by the text instead. */
.project .label {
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9), 0 0 4px rgba(0, 0, 0, 0.55);
}
.project__name {
  margin-block-start: 8px;
  font-weight: 700;
  font-size: clamp(30px, 3.2vw, 54px);
  text-transform: var(--display-transform);
  letter-spacing: var(--display-track);
  line-height: var(--display-leading);
}
.project__tag { color: rgba(255, 255, 255, 0.78); margin-block-start: 12px; font-size: clamp(13px, 1vw, 16px); }
.project__points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 18px;
  border-block-start: 1px solid var(--rule-photo);
  padding-block-start: 14px;
}
.project__points li { display: flex; align-items: center; gap: 9px; font-size: clamp(13px, 0.95vw, 15px); }
/* Side by side the two captions have to read as one row of information, but
   the name and the line under it wrap to different depths from one language
   and one width to the next. Subgrid hands both cards the same row tracks, so
   every row stays level without reserving space for a line that may not come;
   the leading 1fr track holds the slack, which keeps the caption on the floor
   of the card. Where subgrid is unsupported the cards fall back to the block
   below, stacked and bottom-aligned, just misaligned with each other. */
@media (min-width: 821px) {
  /* Height moves to the grid: a card that spans subgridded tracks takes its
     size from them, so its own min-block-size no longer stretches it. */
  .projects-grid {
    grid-template-rows: 1fr repeat(4, auto);
    min-block-size: clamp(420px, 58vh, 660px);
  }
  .project {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: end;
  }
  /* Placed row by row: auto-placement would drop the first unplaced child
     into the slack track at the top. */
  .project > .label { grid-row: 2; }
  .project > .project__name { grid-row: 3; }
  .project > .project__points { grid-row: 4; }
  /* A grid item stretches, and the rule under the link would run card-wide. */
  .project > .project__cta { grid-row: 5; justify-self: start; }
}
.project__cta {
  display: inline-flex;
  /* Stacked, the card lays its caption out with flex and would stretch this
     to the full width, taking the rule under the link with it. */
  align-self: flex-start;
  align-items: center;
  gap: 12px;
  margin-block-start: 18px;
  border-block-end: 1px solid currentColor;
  padding-block-end: 6px;
  font-size: clamp(12px, 0.85vw, 14px);
  letter-spacing: 0.16em;
  text-transform: var(--display-transform);
}

/* --- Stats / feature rows ------------------------------------------------ */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); border-block-start: 1px solid var(--rule); }
.stats > div { padding: 22px clamp(12px, 2vw, 26px) 0; border-inline-start: 1px solid var(--rule); }
.stats > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.stats dt { font-weight: 700; font-size: clamp(28px, 3.6vw, 54px); line-height: 1; font-variant-numeric: tabular-nums; }
.stats dd { margin: 12px 0 0; font-size: 13px; color: var(--muted); max-inline-size: 22ch; }

.feature { border-block-start: 1px solid var(--rule); padding-block-start: 18px; }
.feature h3 { margin-block-end: 10px; }
.feature p { color: var(--muted); }

/* Numbered terms — the value is the composition element. */
.term { border-block-start: 1px solid var(--rule); padding-block-start: 18px; }
.term__v {
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 68px);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.term h3 { margin-block: 16px 8px; }
.term p { color: var(--muted); }

/* --- Charts (investment section) ---------------------------------------- */

.chart { margin-block-start: 26px; }
.chart__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: end;
  gap: clamp(4px, 0.8vw, 12px);
  block-size: clamp(150px, 22vw, 260px);
  border-block-end: 1px solid var(--rule-strong);
}
.chart__bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; block-size: 100%; }
.chart__bar i {
  display: block;
  background: var(--ink);
  inline-size: 100%;
  transform-origin: bottom;
  animation: grow 0.9s var(--ease) both;
}
@keyframes grow { from { transform: scaleY(0); } }
.chart__val {
  font-size: clamp(10px, 0.78vw, 12.5px);
  font-variant-numeric: tabular-nums;
  margin-block-end: 8px;
  white-space: nowrap;
}
.chart__years {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: clamp(4px, 0.8vw, 12px);
  margin-block-start: 10px;
}
.chart__years span { font-size: clamp(10px, 0.75vw, 12px); color: var(--muted); font-variant-numeric: tabular-nums; }
.chart__note { margin-block-start: 16px; font-size: 12px; color: var(--muted); }

.callouts { display: grid; gap: 20px; margin-block-start: 34px; }
.callouts p { border-block-start: 1px solid var(--rule); padding-block-start: 14px; color: var(--muted); font-size: 14px; }
@media (min-width: 800px) { .callouts { grid-template-columns: repeat(3, 1fr); gap: 26px; } }

/* --- Proximity / location ------------------------------------------------ */

.prox { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-block-start: 1px solid var(--rule); }
.prox > div { padding: 20px clamp(12px, 2vw, 26px) 0; border-inline-start: 1px solid var(--rule); }
.prox > div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.prox b { font-weight: 700; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.prox small { font-size: 11px; letter-spacing: 0.16em; text-transform: var(--display-transform); margin-inline-start: 6px; }
.prox p { margin-block-start: 10px; font-size: 13px; color: var(--muted); }

/* --- Gallery ------------------------------------------------------------- */

/* A mosaic on a fixed row unit rather than per-figure aspect ratios: mixing
   ratios in one row leaves the shorter figure with dead space under it. Each
   figure spans whole row units and stretches to fill, so every row closes
   flush. The pattern completes at five images and again at six — the two
   counts these galleries actually use.

     rows 1–2   [ 1 1 1 1 | 2 2 ]      row 3   [ 4 4 4 | 5 5 5 ]
                [ 1 1 1 1 | 3 3 ]      row 4   [ 6 6 6 6 6 6 ]              */
.gallery {
  display: grid;
  gap: clamp(8px, 1vw, 16px);
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: clamp(140px, 16vw, 250px);
}
.gallery .fig { grid-column: span 2; grid-row: span 1; }
.gallery .fig:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.gallery .fig:nth-child(4) { grid-column: span 3; }
.gallery .fig:nth-child(5) { grid-column: span 3; }
.gallery .fig:nth-child(6) { grid-column: span 6; }

@media (max-width: 800px) {
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: clamp(120px, 30vw, 190px); }
  .gallery .fig,
  .gallery .fig:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .gallery .fig:first-child { grid-column: span 2; grid-row: span 2; }
}

/* --- Rooftop band (full-bleed photo with list) --------------------------- */

.band {
  position: relative;
  color: var(--on-photo);
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(80px, 13vw, 190px);
}
.band img { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; }
.band::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.34) 62%, rgba(0, 0, 0, 0.14) 100%);
}
:root[dir='rtl'] .band::after { transform: scaleX(-1); }
.band .label { color: rgba(255, 255, 255, 0.78); }
.band__body { max-inline-size: 54ch; }
.band__body p { color: rgba(255, 255, 255, 0.9); margin-block-start: 20px; }
.band__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin-block-start: 30px;
  border-block-start: 1px solid var(--rule-photo);
  padding-block-start: 20px;
}
.band__list li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* A band carrying nothing but the photo — the company-page still that the film
   displaced. Its scrim is vertical only, to seat the photo against the sections
   above and below rather than to hold text. */
.band--plain { padding-block: 0; block-size: clamp(280px, 44svh, 560px); }
.band--plain::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.06) 32%, rgba(0, 0, 0, 0.06) 68%, rgba(0, 0, 0, 0.5) 100%);
}

/* --- Progress timeline --------------------------------------------------- */

.timeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); overflow-x: auto; border-block-start: 1px solid var(--rule); }
.timeline > li { padding: 18px clamp(12px, 1.6vw, 22px) 0; border-inline-start: 1px solid var(--rule); }
.timeline > li:first-child { border-inline-start: 0; padding-inline-start: 0; }
.timeline .label { margin-block-end: 12px; }
.timeline p { font-size: 13.5px; }

/* --- Form ---------------------------------------------------------------- */

.form { display: grid; gap: 22px; }
.form__row { display: grid; gap: 22px; }
@media (min-width: 700px) { .form__row { grid-template-columns: 1fr 1fr; } }

.field { display: block; position: relative; }
.field > span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: var(--display-transform);
  color: var(--muted);
  margin-block-end: 8px;
}
.field input,
.field select,
.field textarea {
  inline-size: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-block-end: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 0;
  transition: border-color 0.2s var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-block-size: 92px; }
.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-block-end-color: var(--ink); }
.field select { background-image: none; cursor: pointer; }
.field__err { display: none; margin-block-start: 6px; font-size: 12px; }
.field.is-invalid input,
.field.is-invalid select { border-block-end-color: var(--ink); }
.field.is-invalid .field__err { display: block; }

.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label {
  border: 1px solid var(--rule-strong);
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: var(--display-transform);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
/* Sized explicitly: these sit inside a .field, so without this they inherit
   `inline-size: 100%` from the text-input rule and each invisible radio
   stretches the full column width. */
.choices input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.choices input:checked + span,
.choices label:has(input:checked) { background: var(--ink); color: var(--paper); }
.choices label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.form__note { font-size: 12px; color: var(--muted); max-inline-size: 52ch; }
.form__status { font-size: 14px; border-block-start: 1px solid var(--rule); padding-block-start: 14px; }
.form__status:empty { display: none; }

/* Honeypot — must stay reachable to bots but invisible and unfocusable. */
.hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Bidi isolation -----------------------------------------------------
   A phone number is an LTR string wherever it appears. In an RTL paragraph a
   leading "+" is a neutral character and gets pushed to the visual end, so
   "+995 514 202 202" reads as "202 202 514 995+" unless the run is forced. */

.tel {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Standalone figures stay self-contained so a neighbouring RTL run can't
   reorder them. */
.hero__stats dd,
.stats dt,
.term__v,
.prox b,
.chart__val,
.chart__years span,
.folio {
  unicode-bidi: isolate;
}

/* --- Footer -------------------------------------------------------------- */

.footer { border-block-start: 1px solid var(--rule); padding-block: clamp(48px, 6vw, 88px) 34px; }
.footer__grid { display: grid; gap: 40px; grid-template-columns: 1.4fr repeat(3, 1fr); }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer h3 { font-size: 11px; letter-spacing: 0.18em; text-transform: var(--display-transform); color: var(--muted); font-weight: 300; margin-block-end: 16px; }
.footer li { margin-block-end: 9px; }
.footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__legal { border-block-start: 1px solid var(--rule); margin-block-start: clamp(38px, 5vw, 64px); padding-block-start: 20px; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: space-between; }
.footer__legal p { font-size: 12px; color: var(--muted); max-inline-size: 74ch; }

/* --- Reveal on scroll ---------------------------------------------------- */

[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

.skip {
  position: absolute;
  inset-block-start: -60px;
  inset-inline-start: var(--gutter);
  z-index: 100;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 18px;
  border: 1px solid var(--ink);
  transition: inset-block-start 0.2s var(--ease);
}
.skip:focus { inset-block-start: 10px; }

/* --- Switch --------------------------------------------------------------- */

/* Two or three words, one of them chosen: the projects slide over the render,
   the basemap over the map. Always paper with an ink hairline, and the live
   one inverted — the same weight as the buttons everywhere else on the page. */
.switch {
  display: flex;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.switch[hidden] { display: none; }
.switch__btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: 0.1em;
  padding: 8px 13px;
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.switch__btn + .switch__btn { border-inline-start: 1px solid var(--ink); }
.switch__btn:hover { background: #f2f2f2; }
.switch__btn.is-on { background: var(--ink); color: var(--paper); }

/* --- 360 tour ------------------------------------------------------------ */

/* Kuula renders its own controls and thumbnail strip inside the frame, so the
   box is sized here and the iframe fills it. Portrait on narrow screens keeps
   the thumbnails and hotspot labels legible instead of letterboxed. */
.tour {
  position: relative;
  margin-block-start: clamp(28px, 4vw, 48px);
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.tour__frame {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  display: block;
}
.tour__fallback { margin-block-start: 14px; font-size: 14px; color: var(--muted); }

@media (max-width: 700px) { .tour { aspect-ratio: 3 / 4; } }

/* --- Availability board ---------------------------------------------------- */

/* Someone else's application inside our page, so it gets a frame and nothing
   else: a hairline, the height it needs to show five floors at once, and a way
   out to the full screen underneath. */
.board {
  position: relative;
  margin-block-start: clamp(24px, 3vw, 40px);
  border: 1px solid var(--rule);
  background: var(--paper);
}
.board__frame {
  display: block;
  inline-size: 100%;
  block-size: clamp(560px, 78vh, 860px);
  border: 0;
}
.board__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-block-start: 12px;
  font-size: 13px;
  color: var(--muted);
}
.board__foot span { max-inline-size: 78ch; }
.board__foot a { color: var(--ink); border-block-end: 1px solid var(--rule); text-decoration: none; }
.board__foot a:hover { border-block-end-color: var(--ink); }

/* --- Floor plans ---------------------------------------------------------- */

/* One sheet at a time. The four floors are dealt into the same grid cell and
   the switch swaps them in place — stacked, four architectural drawings would
   run the page to twice its length and none of them would be read. The chosen
   sheet is marked in the HTML, so the first paint is already right.

   The sheet keeps its own white paper against the page: it is a drawing, not a
   render, and the hairline is what separates the two. */
.plans { margin-block-start: clamp(24px, 3vw, 40px); }
.plans__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-block-end: 14px;
}
.plans__sheets { display: grid; }
.plan {
  grid-area: 1 / 1;
  position: relative;
  display: block;
  /* The sheets are all but identical in shape — 1.47 for one building, 1.44
     for the other — so the frame reserves that ratio before the drawing
     arrives. Without it the box was zero-height until the image loaded and
     the section jumped, and switching floors nudged the page by a pixel. */
  aspect-ratio: 1.45;
  border: 1px solid var(--rule);
  background: #fff;
  transition: opacity 0.5s var(--ease);
}
.plan:not(.is-on) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--ease), visibility 0s 0.5s;
}
.plan img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }

/* The unit numbers are 6pt on the sheet, so every plan is a link to its own
   full-size file — the badge is there to say so. */
.plan__cta {
  position: absolute;
  inset-block-end: 0;
  inset-inline-end: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: var(--display-transform);
  padding: 8px 13px;
}
.plans__note {
  margin-block-start: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* --- Projects map -------------------------------------------------------- */

/* A drawn city rather than a photograph, run edge to edge: the canvas is the
   one element on the page that leaves the wrap, so the coast reaches both
   sides of the screen. Solid black pins for the office and the two buildings,
   a white badge for every place in Batumi a buyer asks about. The legend card
   sits on the canvas above 900px — lined up with the column the heading keeps
   — and drops beneath it below, where overlaid it would cover the very pins it
   labels.

   `--edge` is the white margin the wrap leaves on a screen wider than it: the
   card and the mode switch add the gutter to it and land on the page's grid
   while the map itself ignores both. */
.mapblock {
  --edge: max(0px, (100% - var(--maxw)) / 2);
  position: relative;
  margin-block-start: clamp(28px, 4vw, 48px);
  border-block: 1px solid var(--rule);
  background: #e9e7e3;
}
.mapblock__canvas {
  /* Leaflet stacks its panes up to z-index 700 and .leaflet-container opens no
     stacking context of its own, so one is opened here — otherwise the panes
     compete with the legend card in the section's context and win. */
  position: relative;
  z-index: 0;
  isolation: isolate;
  block-size: clamp(460px, 84vh, 940px);
  background: #e9e7e3;
}

/* Basemap switch — the same control the projects use to choose a slide, so it
   is the same component. Rendered hidden and shown by the script: with no
   Leaflet there is nothing for it to switch. */
.mapblock__modes {
  position: absolute;
  z-index: 2;
  inset-block-start: 16px;
  inset-inline-end: calc(var(--edge) + var(--gutter));
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.mapblock__legend {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--rule);
}
.mapblock__item {
  display: flex;
  gap: 14px;
  padding: 16px 20px;
  background: var(--paper);
}
.mapblock__item + .mapblock__item { border-block-start: 1px solid var(--rule); }

/* Projects read as solid pins, the office as an outline — the same two weights
   the canvas uses, so the legend and the map agree at a glance. */
.mapblock__marker {
  flex: none;
  inline-size: 11px;
  block-size: 11px;
  margin-block-start: 5px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
}
.mapblock__item--office .mapblock__marker { background: var(--paper); }

.mapblock__body { display: block; }
.mapblock__name {
  display: block;
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: var(--display-track);
  font-size: 15px;
  line-height: 1.25;
}
.mapblock__links { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-block-start: 6px; }
.mapblock__links a { font-size: 13px; color: var(--muted); text-decoration: none; border-block-end: 1px solid var(--rule); }
.mapblock__links a:hover { color: var(--ink); border-block-end-color: var(--ink); }

.mapblock__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 20px;
  margin-block-start: 12px;
  font-size: 13px;
  color: var(--muted);
}
.mapblock__foot span { max-inline-size: 62ch; }
.mapblock__foot small { font-size: 12px; }

@media (min-width: 900px) {
  .mapblock__modes { inset-block-start: 24px; }
  .mapblock__legend {
    position: absolute;
    z-index: 2;
    inset-block-start: 24px;
    inset-inline-start: calc(var(--edge) + var(--gutter));
    inline-size: 320px;
    border: 1px solid var(--ink);
  }
}

/* --- Sights -------------------------------------------------------------- */

/* The same fourteen places twice: as badges on the canvas, and as this list.
   The list is the one that survives without JavaScript, so it carries the
   links and the distances; with the script running, a chip lights its badge
   and flies the map to it. */
.sights { margin-block-start: clamp(30px, 4vw, 52px); }
.sights__list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.sight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 8px;
  padding-inline: 9px 15px;
  border: 1px solid var(--rule);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.25s var(--ease);
}
.sight:hover,
.sight:focus-visible,
.sight.is-on { border-color: var(--ink); }
.sight__icon {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.sight__icon svg { inline-size: 16px; block-size: 16px; display: block; }
.sight:hover .sight__icon,
.sight:focus-visible .sight__icon,
.sight.is-on .sight__icon {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.sight__name {
  font-size: 13px;
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: 0.04em;
}
.sight__away { font-size: 12px; color: var(--muted); }

/* --- Pins ---------------------------------------------------------------- */

/* Leaflet anchors an icon at its top-left corner, so each pin is translated
   back over its own coordinate — by half the dot, or half the badge. */
.lux-pin { position: absolute; display: flex; align-items: center; gap: 9px; transform: translate(-7px, -7px); white-space: nowrap; }
.lux-pin__dot {
  flex: none;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--paper), 0 2px 10px rgba(0, 0, 0, 0.45);
}
.lux-pin--office .lux-pin__dot { background: var(--paper); box-shadow: 0 0 0 3px var(--ink), 0 2px 10px rgba(0, 0, 0, 0.45); }
.lux-pin__label {
  background: var(--paper);
  color: var(--ink);
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: 0.1em;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.lux-pin--office .lux-pin__label { font-weight: 300; }

/* The three of them collapsed into one, which is what the city view shows:
   black on white, the only filled label on the canvas. */
.lux-pin--all .lux-pin__dot { inline-size: 16px; block-size: 16px; }
.lux-pin--all .lux-pin__label { background: var(--ink); color: var(--paper); }

:root[lang='ka'] .lux-pin__label,
:root[lang='he'] .lux-pin__label { letter-spacing: 0.04em; }

.sight-pin {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translate(-15px, -15px);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.sight-pin__badge {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sight-pin__badge svg { inline-size: 17px; block-size: 17px; display: block; }
.sight-pin__label {
  padding: 4px 9px;
  background: var(--paper);
  font-size: 10px;
  font-weight: 700;
  text-transform: var(--display-transform);
  letter-spacing: 0.08em;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
:root[dir='rtl'] .sight-pin__label { transform: translateX(6px); }
.sight-pin:hover .sight-pin__badge,
.sight-marker.is-on .sight-pin__badge { background: var(--ink); color: var(--paper); transform: scale(1.1); }
.sight-pin:hover .sight-pin__label,
.sight-marker.is-on .sight-pin__label { opacity: 1; transform: none; }

/* Leaflet writes its own z-index on every marker, ordered by latitude, so the
   raised pin needs the weight to beat it. */
.sight-marker:hover,
.sight-marker.is-on { z-index: 650 !important; }

/* Leaflet's own chrome, squared off to match everything else. */
.leaflet-container { font: inherit; background: #e9e7e3; }
.leaflet-touch .leaflet-bar,
.leaflet-bar {
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: none;
}
.leaflet-touch .leaflet-bar a,
.leaflet-bar a {
  border-radius: 0;
  color: var(--ink);
  border-block-end-color: var(--rule);
}
.leaflet-bar a:hover { background: #f2f2f2; }

/* Leaflet paints every anchor inside the container its own link blue, and it
   outranks the class on the pin. */
.leaflet-container a.sight-pin { color: var(--ink); }

/* On a phone the canvas is a third of the width, so the badges are shrunk to
   keep the old town legible, and the LUX labels with them. */
@media (max-width: 899px) {
  .lux-pin { gap: 6px; }
  .lux-pin__dot { inline-size: 11px; block-size: 11px; }
  .lux-pin--all .lux-pin__dot { inline-size: 13px; block-size: 13px; }
  .lux-pin__label { font-size: 9px; padding: 3px 6px; letter-spacing: 0.05em; }
  .sight-pin { gap: 6px; transform: translate(-12px, -12px); }
  .sight-pin__badge { inline-size: 24px; block-size: 24px; }
  .sight-pin__badge svg { inline-size: 14px; block-size: 14px; }
  .sight-pin__label { font-size: 9px; padding: 3px 6px; letter-spacing: 0.05em; }
  .mapblock__modes { inset-block-start: 12px; }
}


/* --- Copy over photography -----------------------------------------------
   Every block on the site that sets type over a picture does it the same way:
   a narrow column at the foot of the frame, a step down in scale, and a scrim
   only deep enough to hold contrast where the words actually are. The old
   settings were sized for a photograph of sky and sea; over a render of the
   building the headline ran straight across the façade, which is the one
   thing these blocks exist to show. */

.hero__inner {
  padding-block-start: 0;
  padding-block-end: clamp(20px, 2.6vw, 40px);
}
.hero .h1 {
  font-size: clamp(27px, 3.2vw, 50px);
  max-inline-size: 15ch;
  margin-block: 10px 12px;
}
.hero__sub {
  font-size: clamp(13px, 0.94vw, 15px);
  max-inline-size: 42ch;
  line-height: 1.55;
}
.hero__actions { margin-block-start: 18px; }
.hero .btn { padding: 10px 18px; font-size: clamp(10px, 0.72vw, 11.5px); }

/* The strip keeps its full width — it is a rule at the foot of the frame, not
   a block of copy — but loses roughly a third of its height. */
.hero__stats { margin-block-start: clamp(18px, 2.6vw, 32px); }
.hero__stats > * { padding-block: 12px 2px; }
.hero__stats dt { font-size: 9.5px; letter-spacing: 0.15em; }
.hero__stats dd { font-size: clamp(18px, 1.9vw, 28px); }

/* With the copy held to a column, the horizontal scrim can be pulled back off
   the building: it now only has to seat the left edge. */
.hero::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.34) 0%, rgba(0, 0, 0, 0.04) 24%, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.76) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.52) 0%, rgba(0, 0, 0, 0.1) 36%, rgba(0, 0, 0, 0) 56%);
}

/* The full-bleed bands are the same problem at a smaller size: a column of
   copy laid across a photograph. Same answer — hold it narrow, take it down a
   step, and give back the height the picture was losing to padding. */
.band { padding-block: clamp(56px, 8vw, 120px); }
.band__body { max-inline-size: 40ch; }
.band__body p { font-size: clamp(13px, 0.94vw, 15px); line-height: 1.55; margin-block-start: 14px; }
.band .h2 { font-size: clamp(24px, 2.8vw, 44px); }
.band__list { gap: 10px 22px; margin-block-start: 22px; padding-block-start: 16px; }
.band__list li { font-size: 12.5px; }
.band::after {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.24) 44%, rgba(0, 0, 0, 0) 62%);
}

/* On a phone the frame is portrait: the picture is mostly above the copy
   rather than behind it, so the column is allowed the full measure. */
@media (max-width: 700px) {
  .hero .h1 { max-inline-size: none; font-size: clamp(26px, 7.4vw, 38px); }
  .hero__sub { max-inline-size: none; }
  .band__body { max-inline-size: none; }
  .band::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.62) 100%); }
}

/* --- Pins over imagery ----------------------------------------------------
   The white discs were drawn for the grey canvas, where a filled circle is the
   only solid thing on the page. Dropped onto a satellite photograph they read
   as stickers laid over it: fifteen bright dots competing with the city.

   Over imagery they invert — a dark, slightly translucent disc with a white
   glyph and a hairline ring, a size smaller. That is the language aerial maps
   already use, so the badges sit in the photograph rather than on it, and the
   three LUX pins keep their white labels and stay the brightest marks on the
   canvas, which is the point of the section. */

.mapblock__canvas.is-imagery .sight-pin__badge {
  inline-size: 25px;
  block-size: 25px;
  color: #fff;
  background: rgba(9, 11, 14, 0.6);
  border-color: rgba(255, 255, 255, 0.62);
  box-shadow: 0 1px 7px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.mapblock__canvas.is-imagery .sight-pin__badge svg { inline-size: 14px; block-size: 14px; }

/* Hover and the chip-driven highlight still flip to solid, but to white on
   dark rather than the other way round. */
.mapblock__canvas.is-imagery .sight-pin:hover .sight-pin__badge,
.mapblock__canvas.is-imagery .sight-marker.is-on .sight-pin__badge {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.mapblock__canvas.is-imagery .sight-pin__label {
  background: rgba(9, 11, 14, 0.82);
  color: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* On a phone the badges are already shrunk; take the imagery pair down with
   them so the old town stays legible. */
@media (max-width: 899px) {
  .mapblock__canvas.is-imagery .sight-pin__badge { inline-size: 21px; block-size: 21px; }
  .mapblock__canvas.is-imagery .sight-pin__badge svg { inline-size: 12px; block-size: 12px; }
}

/* --- Prose beside a picture ----------------------------------------------
   A section that is only paragraphs reads as an unfinished page however good
   the writing is: the eye has nothing to rest on and the white space around it
   looks like something failed to load. Where a section makes a claim that a
   photograph can answer, the copy is held to one column and the picture sits
   beside it, so the two carry the block together. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: start;
}
.split__body { display: grid; gap: clamp(14px, 1.4vw, 22px); }
.split .fig { margin-block-start: 6px; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: clamp(22px, 5vw, 34px); }
}

/* --- Prose that has to stand alone ---------------------------------------
   The sections that stay text-only get the emptiness taken out of them
   instead: a shorter measure so the lines are read rather than scanned, and
   the section's own height cut back, since the padding was scaled for blocks
   carrying a photograph. */

.lead { max-inline-size: 62ch; }
.cols--2 > .lead { max-inline-size: none; }

/* --- Figures as blocks ----------------------------------------------------
   The stat strip used to be four numbers hung off hairlines, which reads as a
   caption to the picture rather than as the claims of the business. They are
   solid rectangles now, in the one colour on the site, sitting on the floor of
   the frame where the scrim is already deepest — so the render above them is
   untouched and the numbers are the only coloured thing on the page. */

.hero__stats {
  border-block-start: 0;
  gap: 2px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.hero__stats > * {
  background: var(--accent);
  border-inline-start: 0;
  padding: 14px clamp(12px, 1.4vw, 20px) 14px;
}
/* The rule that stripped the first cell's padding was there to line the old
   text strip up with the copy above it; a block has to keep its own. */
.hero__stats > *:first-child { padding-inline-start: clamp(12px, 1.4vw, 20px); }
.hero__stats > *:nth-child(even) { background: var(--accent-deep); }
.hero__stats dt { opacity: 0.82; }
.hero__stats dd { padding-block-start: 6px; }

/* The bars are the same statistics in another form, so they take the same
   colour. One tint for all of them, not two alternating: these are one series
   read left to right, and banding them would draw a distinction between odd
   and even years that the data does not make. The gaps already separate
   them. */
.chart__bar i { background: var(--accent); }

@media (max-width: 700px) {
  .hero__stats { grid-template-columns: repeat(2, 1fr); }
}