/* ============================================================
   GRB Development — "Salt, cypress, Aegean"
   Palette, type and layout decisions are documented in CLAUDE.md.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --ink:        #0E1917;   /* cypress black */
  --ink-soft:   #17231F;
  --plaster:    #EFF0EB;   /* page ground */
  --stone:      #E1E3DC;
  --white:      #FAFBF7;
  --body:       #2B3733;   /* body copy on light */
  --sage:       #586359;   /* muted labels on light */
  --sage-dim:   #7B8177;   /* dimmed, but still 3:1 against the page for large text */
  --aegean:     #0E6F73;   /* single accent, light backgrounds */
  --aegean-up:  #6FC3BB;   /* same accent, lifted for dark backgrounds */
  --rule:       #C9CBC2;
  --rule-dark:  #35423D;
  --error:      #9C3B2E;   /* 6.5:1 on the form ground */

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wonk: "SOFT" 0, "WONK" 1;

  --gap: clamp(1.5rem, 3vw, 3rem);
  --pad-x: clamp(1.25rem, 5vw, 5rem);
  --max: 1440px;

  --ease: cubic-bezier(.22, .7, .2, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--plaster);
  color: var(--body);
  font-family: var(--f-body);
  font-size: clamp(1rem, .95rem + .2vw, 1.09rem);
  line-height: 1.65;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
[hidden] { display: none !important; }   /* component display rules must not beat the attribute */
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

:focus-visible {
  outline: 2px solid var(--aegean);
  outline-offset: 3px;
  border-radius: 1px;
}
.systems :focus-visible, .hero :focus-visible { outline-color: var(--aegean-up); }

.skip-link {
  position: fixed; top: 0; left: 0; z-index: 200;
  transform: translateY(-140%);
  background: var(--ink); color: var(--plaster);
  padding: .85rem 1.35rem;
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transition: transform .25s var(--ease);
}
.skip-link:focus-visible { transform: none; }
/* for text only screen readers should read */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* the skip link parks focus on <main>; that target should not draw a ring of its own */
main:focus, main:focus-visible { outline: none; }

/* ---------- shared layout + type ---------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: clamp(4.5rem, 10vw, 10rem); position: relative; }
main section[id] { scroll-margin-top: 5rem; }

.eyebrow {
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--sage);
  display: flex; align-items: center; gap: .8rem;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 0 0 clamp(2rem, 6vw, 5rem);
  background: currentColor; opacity: .45;
}
.eyebrow--light { color: rgba(239, 240, 235, .82); }

.h2 {
  font-family: var(--f-display);
  font-variation-settings: var(--wonk);
  font-size: clamp(2rem, 1.2rem + 3.4vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -.022em;
  color: var(--ink);
  max-width: 20ch;
  margin-block: 1.4rem .9rem;
}
.h3 {
  font-family: var(--f-display);
  font-variation-settings: var(--wonk);
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.lede {
  font-size: clamp(1.02rem, .97rem + .35vw, 1.24rem);
  line-height: 1.6;
  color: var(--body);
  max-width: 56ch;
}

.btn {
  --btn-fg: var(--plaster);
  --btn-bg: var(--ink);
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1.05rem 1.9rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: .82rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  text-decoration: none; border: 1px solid var(--btn-bg); border-radius: 0;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--aegean); border-color: var(--aegean); color: var(--white); transform: translateY(-2px); }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--white); border-color: rgba(250, 251, 247, .55); }
.btn--ghost:hover { background: rgba(250, 251, 247, .12); border-color: var(--white); color: var(--white); }
.btn--block { width: 100%; justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: .55rem;
  font-size: .8rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  color: var(--ink); text-decoration: none;
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--aegean), var(--aegean));
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .45s var(--ease), color .3s var(--ease);
}
.link-arrow span { transition: transform .35s var(--ease); }
.link-arrow:hover { background-size: 100% 1px; color: var(--aegean); }
.link-arrow:hover span { transform: translateX(5px); }

.reveal { opacity: 0; transform: translateY(26px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  transition-delay: var(--delay, 0ms);
}

/* ---------- navigation ---------- */
/* --frost runs 0 → 1 as the page scrolls, and is set by script.js. It reaches 1 at the
   point where the wordmark would start overlapping the hero's "Larnaca · Cyprus" line,
   and stays there for the rest of the page. */
.nav {
  --frost: 0;
  --nav-pad: clamp(1rem, 1.6vw, 1.6rem);
  position: fixed; inset: 0 0 auto; z-index: 80;
  padding-block: calc(var(--nav-pad) - (var(--nav-pad) - .75rem) * var(--frost));
  /* real frosted glass: thin tint, heavy blur — the page reads through it */
  background: rgba(239, 240, 235, calc(.62 * var(--frost)));
  backdrop-filter: blur(calc(22px * var(--frost))) saturate(calc(100% + 70% * var(--frost)));
  box-shadow: 0 1px 0 rgba(14, 25, 23, calc(.08 * var(--frost)));
  /* light type while the glass is still see-through, held legible by a halo that
     builds with the frost; it flips to ink once the glass is mostly opaque */
  color: var(--white);
  text-shadow: 0 0 calc(12px * var(--frost)) rgba(9, 17, 15, calc(.8 * var(--frost)));
  transition: color .28s var(--ease), text-shadow .28s var(--ease);
}
.nav__inner {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  display: flex; align-items: center; gap: var(--gap);
}
.nav.is-stuck { color: var(--ink); text-shadow: none; }

/* the overlay is dark, so the bar above it always reads light while it is open */
body.menu-open .nav {
  background: transparent; color: var(--plaster);
  box-shadow: none; backdrop-filter: none; text-shadow: none;
}

/* stacked lockup: "GRB" with "Development" tracked out directly beneath it, at every width */
.wordmark {
  display: flex; flex-direction: column; align-items: flex-start; gap: .12rem;
  text-decoration: none; margin-right: auto;
}
.wordmark__mark {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: 1.5rem; letter-spacing: .06em; line-height: .95;
}
.wordmark__sub {
  font-size: .58rem; font-weight: 400; letter-spacing: .22em; text-transform: uppercase;
  line-height: 1; opacity: .72;
  white-space: nowrap;
}
/* the narrowest phones tighten the lockup rather than dropping the second line */
@media (max-width: 460px) {
  .wordmark { gap: .1rem; }
  .wordmark__mark { font-size: 1.32rem; }
  .wordmark__sub { font-size: .52rem; letter-spacing: .17em; }
}

.nav__links { display: flex; gap: clamp(1.1rem, 2vw, 2.2rem); }
.nav__links a {
  position: relative;
  font-size: .82rem; font-weight: 400; letter-spacing: .08em; text-decoration: none;
  padding-block: .3rem;
  white-space: nowrap;   /* a label may wrap as a whole, never mid-phrase */
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover::after, .nav__links a.is-current::after { transform: scaleX(1); transform-origin: left; }
.nav__links a.is-current { color: var(--aegean); }
.nav:not(.is-stuck) .nav__links a.is-current { color: var(--aegean-up); }

.nav__toggle {
  display: none; align-items: center; gap: .6rem;
  background: none; border: 0; padding: .4rem 0; cursor: pointer;
  font-size: .74rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
}
.nav__toggle-bars { display: grid; gap: 5px; width: 26px; }
.nav__toggle-bars i { display: block; height: 1px; background: currentColor; transition: transform .35s var(--ease), opacity .3s var(--ease); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 70;
  background: var(--ink); color: var(--plaster);
  display: flex; flex-direction: column; justify-content: center; gap: 3rem;
  padding: 6rem var(--pad-x) 3rem;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
/* the drawer belongs to the small-screen nav only; never leave it up after a resize */
@media (min-width: 901px) { .menu { display: none; } }
.menu.is-open { opacity: 1; }
.menu__links { display: grid; gap: .35rem; }
.menu__links a {
  display: flex; align-items: baseline; gap: 1rem;
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.5rem, 7.4vw, 2.15rem); line-height: 1.3;
  text-decoration: none;
}
.menu__links em {
  font-family: var(--f-body); font-style: normal;
  font-size: .7rem; letter-spacing: .2em; opacity: .5;
}
.menu__foot { display: grid; gap: .4rem; font-size: .9rem; color: rgba(239, 240, 235, .75); }
.menu__foot a { text-decoration: none; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(7rem, 14vh, 10rem) clamp(1.5rem, 3vh, 2.5rem);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--ink); }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -1.5%, 0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(9, 17, 15, .9) 0%, rgba(9, 17, 15, .55) 30%, rgba(9, 17, 15, .28) 60%, rgba(9, 17, 15, .5) 100%),
    linear-gradient(to right, rgba(9, 17, 15, .72) 0%, rgba(9, 17, 15, .34) 45%, rgba(9, 17, 15, .08) 100%);
}
.hero__body { margin-top: auto; padding-bottom: clamp(3rem, 8vh, 6rem); }
.hero__title {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-weight: 300;
  font-size: clamp(2.3rem, 1rem + 6.4vw, 6.2rem);
  line-height: 1;
  letter-spacing: -.03em;
  margin: 1.4rem 0 1.6rem;
  max-width: 15ch;
}
/* each line is clipped so the rise animation can slide in from below; the padding
   gives the descenders of g, y and p room inside that clip, and the equal negative
   margin keeps the lines as tight as before */
.hero__title .line { display: block; overflow: hidden; padding-bottom: .24em; margin-bottom: -.24em; }
.hero__title em { font-style: normal; font-weight: 300; }

/* the headline rises line by line once the page is ready (JS wraps each line) */
.line__in { display: block; }
.js .line__in { transform: translateY(105%); }
.is-ready .line__in { transform: none; transition: transform 1.1s var(--ease); }
.js .hero__body .eyebrow, .js .hero__lede, .js .hero__actions {
  opacity: 0; transform: translateY(14px);
}
.is-ready .hero__body .eyebrow, .is-ready .hero__lede,
.is-ready .hero__actions {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.is-ready .hero__body .eyebrow { transition-delay: .25s; }
.is-ready .hero__lede { transition-delay: .55s; }
.is-ready .hero__actions { transition-delay: .68s; }
.hero__lede {
  max-width: 46ch;
  font-size: clamp(1rem, .95rem + .4vw, 1.22rem);
  color: rgba(250, 251, 247, .88);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__actions .btn--solid { --btn-bg: var(--white); --btn-fg: var(--ink); }

/* ---------- studio ---------- */
.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .82fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.studio__text { max-width: 40rem; }
.pull {
  margin: 2.2rem 0;
  padding-left: clamp(1rem, 2vw, 1.8rem);
  border-left: 1px solid var(--aegean);
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.65rem);
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
  max-width: 34ch;
}
.studio__figure { margin: 0; position: relative; }
.studio__figure img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: saturate(.92) contrast(1.02);
}
.studio__figure figcaption {
  margin-top: .9rem;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage);
}

.stats-band {
  background: var(--ink);
  color: rgba(239, 240, 235, .78);
  padding-block: clamp(2rem, 4.5vw, 3.5rem);
  border-top: 1px solid var(--rule-dark);
}
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.stat { display: grid; gap: .5rem; align-content: start; }
.stat__num {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(2.4rem, 1.4rem + 3.2vw, 4.4rem);
  line-height: .9; letter-spacing: -.03em; color: var(--plaster);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat__label {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(239, 240, 235, .72); max-width: 22ch;
}
.stat__label em { font-style: normal; opacity: .75; text-transform: none; letter-spacing: .04em; }
.stat--placeholder .stat__num { color: rgba(239, 240, 235, .45); }

/* ---------- about us ---------- */
.about { background: var(--plaster); }

/* ---------- what we do (subsection of about us) ---------- */
.services {
  margin-top: clamp(3.5rem, 8vw, 7rem);
  padding-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.services__head .h2 { max-width: 24ch; }
.services__list { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; }
.service {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 21rem);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 3.6vw, 3.4rem);
  border-top: 1px solid var(--rule);
}
.service:last-child { border-bottom: 1px solid var(--rule); }
.service__stage {
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--sage); padding-top: .55rem;
}
.service__body { display: grid; gap: 1rem; justify-items: start; max-width: 42ch; }
.service__figure { margin: 0; overflow: hidden; }
.service__figure img {
  width: 100%; aspect-ratio: 5 / 4; object-fit: cover;
  filter: grayscale(.35) contrast(1.03);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.service:hover .service__figure img { transform: scale(1.06); filter: grayscale(0) contrast(1.05); }

/* ---------- projects ---------- */
.projects { background: var(--plaster); }
.projects__head .h2 { max-width: 22ch; }
.projects__ladder { margin-top: clamp(2.5rem, 5vw, 4.5rem); display: grid; gap: clamp(3rem, 7vw, 7rem); }

.project {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.project--flip .project__media { order: 2; }
.project__media {
  position: relative; display: block; overflow: hidden;
  background: var(--stone);
  width: 100%; padding: 0; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
/* the shots are stacked and cross-faded in place, so the hover scale below still
   applies to whichever one is showing */
.project__frames { position: relative; display: block; aspect-ratio: 16 / 11; }
.project__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: transform 1.1s var(--ease), filter .6s var(--ease), opacity 1s var(--ease);
}
.project__media img.is-current { opacity: 1; }

/* Square sources lose their base to the 16:11 card frame: object-fit centres the crop, which
   on a building means cutting the ground floor, the entrance and its planters while trimming
   empty sky off the top. data-focus="lower" drops the window towards the bottom of the frame
   so the building keeps standing on something. The gallery is unaffected — it shows the whole
   file. Add the attribute to any card whose photos are square or portrait. */
.project__media[data-focus="lower"] img { object-position: center 72%; }

/* A project whose photography has not arrived yet: the same 16:11 frame, holding an icon
   instead of a gallery. It is a div, not a button — there is nothing to open. */
.project__media--empty { background: var(--stone); border: 1px solid var(--rule); cursor: default; }
.project__media--empty .project__frames { display: grid; place-items: center; }
.project__empty { display: grid; justify-items: center; gap: .8rem; color: var(--sage); }
.project__empty-label { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; }
.project__media--empty .project__tag { transform: none; opacity: 1; }

/* Galleries longer than six swap the dots for a counter — thirteen dots would collide with
   the tag on a phone. script.js decides which, and keeps the counter in step. */
.project__count {
  /* top right: the tag owns the bottom left and can be long, and the zoom hint sits top left */
  position: absolute; right: 1rem; top: 1rem; z-index: 2;
  padding: .3rem .6rem;
  background: rgba(9, 17, 15, .62); color: var(--white);
  font-size: .64rem; letter-spacing: .12em; font-variant-numeric: tabular-nums;
}

.project__dots {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  display: flex; gap: .4rem;
}
.project__dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(250, 251, 247, .45);
  box-shadow: 0 0 0 1px rgba(9, 17, 15, .18);
  transition: background .4s var(--ease), transform .4s var(--ease);
}
.project__dots i.is-on { background: var(--white); transform: scale(1.35); }
.project__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9, 17, 15, .55), rgba(9, 17, 15, 0) 55%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.project__media:hover img, .project__media:focus-visible img { transform: scale(1.05); }
.project__media:hover::after, .project__media:focus-visible::after { opacity: 1; }
.project__tag {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  background: rgba(250, 251, 247, .92); color: var(--ink);
  padding: .5rem .9rem;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  transform: translateY(6px); opacity: 0;
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.project__media:hover .project__tag, .project__media:focus-visible .project__tag { transform: none; opacity: 1; }

.project__zoom {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .7rem;
  background: rgba(9, 17, 15, .62); color: var(--white);
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.project__media:hover .project__zoom, .project__media:focus-visible .project__zoom { opacity: 1; transform: none; }
@media (hover: none) { .project__zoom { opacity: 1; transform: none; } }
/* touch devices never hover, so the tag would never be readable — show it outright */
@media (hover: none) {
  .project__tag { transform: none; opacity: 1; }
}
.project__info { display: grid; gap: 1rem; justify-items: start; max-width: 46ch; }
.project__index { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
.project__name {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3.1rem);
  line-height: 1; letter-spacing: -.025em; color: var(--ink);
}
/* a quiet call to action that stays part of the description, set in the display italic
   so it reads as an aside rather than a button */
.project__note {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-style: italic; font-size: 1.08em; color: var(--aegean);
}
.specs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .1rem 2rem; width: 100%; max-width: 30rem;
  margin-top: .4rem;
}
.specs > div {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-block: .55rem;
  border-bottom: 1px solid var(--rule);
}
.specs dt { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.specs dd { font-size: .84rem; color: var(--ink); text-align: right; padding-right: .12em; }

.projects__foot {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
}
/* This band is a .wrap, so a border-top was painted across its horizontal padding too and
   overhung the text column by --pad-x at each end — the rule read as a stray line. Drawing
   it as an inset pseudo-element starts and stops it with the content. */
.projects__foot::before {
  content: ""; position: absolute; top: 0; left: var(--pad-x); right: var(--pad-x);
  height: 1px; background: var(--rule);
}
.projects__foot p {
  font-family: var(--f-display); font-variation-settings: var(--wonk); font-style: italic;
  font-size: clamp(1.3rem, 1rem + 1.4vw, 2.2rem); color: var(--ink);
  /* the inherited 1.65 line box sat the italic well below the button's centre */
  line-height: 1.15;
}

/* ---------- building systems (dark band) ---------- */
.systems { background: var(--ink); color: rgba(239, 240, 235, .82); }
.systems .h2, .systems .h3 { color: var(--plaster); }
.systems .lede { color: rgba(239, 240, 235, .74); }
.systems__head .h2 { max-width: 24ch; }
.systems__grid {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
.system { display: grid; gap: .85rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--rule-dark); }
.system__swatch { margin: 0 0 .6rem; overflow: hidden; }
.system__swatch img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(.5) brightness(.92);
  transition: transform .9s var(--ease), filter .6s var(--ease);
}
.system:hover .system__swatch img { transform: scale(1.05); filter: grayscale(.15) brightness(1); }
.system__full { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--aegean-up); margin-top: -.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .4rem; }
.chips li {
  font-size: .7rem; letter-spacing: .09em;
  padding: .4rem .75rem;
  border: 1px solid var(--rule-dark);
  color: rgba(239, 240, 235, .78);
}

/* ---------- residency ---------- */
.residency {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-block: 0;
  background: var(--stone);
}
.residency__media { margin: 0; position: relative; overflow: hidden; min-height: clamp(22rem, 46vw, 42rem); }
.residency__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.residency__panel { display: flex; align-items: center; padding: clamp(3rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem); }
.residency__inner { max-width: 34rem; display: grid; justify-items: start; }
.facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  margin: 1.8rem 0 2.2rem; width: 100%;
}
.facts > div { padding-block: .8rem; border-top: 1px solid var(--rule); display: grid; gap: .2rem; }
.facts dt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage); }
.facts dd { font-size: .98rem; color: var(--ink); }
.facts dd span { display: block; font-size: .78rem; color: var(--sage); }

/* ---------- contact ---------- */
.contact { background: var(--plaster); }
.contact__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.details { display: grid; gap: 0; font-style: normal; margin-top: 1.5rem; }
.detail {
  display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem;
  padding-block: 1.05rem;
  border-top: 1px solid var(--rule);
}
.detail:last-child { border-bottom: 1px solid var(--rule); }
.detail__label { font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; color: var(--sage); padding-top: .28rem; }
.detail a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color .3s var(--ease), color .3s var(--ease); }
.detail a:hover { color: var(--aegean); border-color: var(--aegean); }
.social { display: inline-flex; align-items: center; gap: .55rem; }

.map { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.map__frame {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--stone);
  overflow: hidden;
}
.map__frame iframe {
  display: block; width: 100%; height: 100%;
  aspect-ratio: 13 / 8; border: 0;
  /* graded back towards the page palette; full colour on interaction */
  filter: grayscale(.45) contrast(1.03);
  transition: filter .5s var(--ease);
}
.map__frame:hover iframe, .map__frame:focus-within iframe { filter: none; }
.map figcaption {
  margin-top: .8rem; font-size: .74rem; letter-spacing: .1em; color: var(--sage);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
}
.map figcaption a { color: var(--aegean); text-decoration: none; border-bottom: 1px solid currentColor; }

.form {
  display: grid; gap: 1.5rem;
  background: var(--white);
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--rule);
}
.form__head { display: grid; gap: .5rem; }
.form__title {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem);
  line-height: 1.1; letter-spacing: -.02em; color: var(--ink);
}
.form__note { font-size: .88rem; color: var(--sage); max-width: 40ch; }

.field { display: grid; gap: .45rem; }
.field label {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--sage);
  display: flex; align-items: center; gap: .35rem;
}
.field__req { color: var(--aegean); }
.field input, .field textarea {
  width: 100%;
  background: var(--plaster);
  border: 1px solid var(--rule);
  padding: .85rem .95rem;
  font-size: 1rem; color: var(--ink);
  border-radius: 0;
  transition: border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #6A7169; }  /* 4.7:1 on the field ground */
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.55; }
.field input:hover, .field textarea:hover { border-color: var(--sage); }
.field input:focus, .field textarea:focus {
  outline: none;
  background: var(--white);
  border-color: var(--aegean);
  box-shadow: inset 0 -2px 0 var(--aegean);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--aegean); outline-offset: 3px; }
.field__hint { font-size: .78rem; color: var(--sage); }

.field.has-error input, .field.has-error textarea { border-color: var(--error); background: #FDF6F4; }
.field.has-error input:focus, .field.has-error textarea:focus { box-shadow: inset 0 -2px 0 var(--error); }
.field__error {
  display: flex; align-items: baseline; gap: .45rem;
  font-size: .8rem; color: var(--error);
}
.field__error span { font-weight: 500; }
.field.is-valid input, .field.is-valid textarea { border-color: #9BA79B; }

/* the honeypot is off-screen rather than display:none so bots still fill it in */
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__submit { position: relative; }
.form__submit[disabled] { opacity: .75; cursor: progress; }
.form__spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  display: none;
}
.form__submit.is-sending .form__spinner { display: block; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.form__status { font-size: .85rem; color: var(--sage); }
.form__status:empty { display: none; }
.form__status.is-error { color: var(--error); }
.form__status.is-note { color: var(--body); }
.form__alt { font-size: .82rem; color: var(--sage); }
.form__alt a { color: var(--ink); }

.form-sent {
  display: grid; gap: .8rem; justify-items: start;
  background: var(--white);
  border: 1px solid var(--aegean);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.form-sent__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(14, 111, 115, .1); color: var(--aegean);
}
.form-sent__title {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.9rem); line-height: 1.1; color: var(--ink);
}
.form-sent p { color: var(--body); }
.form-sent .link-arrow { background: none; border: 0; padding: .4rem 0 .35rem; cursor: pointer; margin-top: .4rem; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: rgba(239, 240, 235, .72); padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.wordmark--foot { color: var(--plaster); margin-right: clamp(1rem, 4vw, 3rem); }
.footer__links { display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.8rem); }
.footer__links a { font-size: .78rem; letter-spacing: .08em; text-decoration: none; opacity: .8; transition: opacity .3s var(--ease), color .3s var(--ease); }
.footer__links a:hover { opacity: 1; color: var(--aegean-up); }
.footer__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-left: auto;
  color: rgba(239, 240, 235, .9);
  border: 1px solid var(--rule-dark);
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.footer__social:hover { color: var(--aegean-up); border-color: var(--aegean-up); }
.footer__legal { flex-basis: 100%; font-size: .74rem; letter-spacing: .06em; color: rgba(239, 240, 235, .5); padding-top: 1.25rem; border-top: 1px solid var(--rule-dark); }

/* ============================================================
   responsive
   ============================================================ */
@media (max-width: 1080px) {
  .service { grid-template-columns: 6rem minmax(0, 1fr); }
  .service__figure { grid-column: 2; max-width: 22rem; }
  .systems__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: inline-flex; }
  .studio__grid { grid-template-columns: minmax(0, 1fr); }
  .studio__figure { max-width: 26rem; }
  .studio__figure img { aspect-ratio: 5 / 4; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1.5rem; }
  /* Mobile card order: the number and area, the project name, then the photos, then the
     copy. `display: contents` lets .project__info's children take their own place in the
     card's column, so no markup had to be duplicated for the small screen. */
  /* align-items comes from the desktop grid, where it centres the two columns against each
     other; in a column flex box it would centre every line of the card instead */
  .project { display: flex; flex-direction: column; align-items: stretch; gap: 1.15rem; }
  .project__info { display: contents; }
  .project__index { order: 1; }
  .project__name { order: 2; margin-top: -.8rem; }
  .project__media, .project--flip .project__media { order: 3; }
  /* the description is the only unclassed paragraph in the card — .project__index is a <p> too */
  .project__info > p:not([class]) { order: 4; }
  .project .specs { order: 5; margin-top: 0; }
  .project__info .link-arrow { order: 6; align-self: flex-start; }
  .residency { grid-template-columns: minmax(0, 1fr); }
  .residency__media { min-height: 18rem; }
  .contact__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  /* ---- the opening screen, the same on every phone ----
     Three things make it work at any height, from a 640px Android to a 932px iPhone:
     the hero fills exactly one small-viewport screen, the block of type is centred in
     the space under the bar instead of pinned to its bottom, and the photo dissolves
     into the ink of the figures band. Centring is what makes it universal — the air
     above and below the type is a share of whatever height the phone has, so a short
     screen tightens and a tall one opens up, with no fixed gap to go wrong.
     Pinning it to the bottom left 265px of empty sky on a 844px screen; cropping the
     hero to 86svh fixed that but cut a hard line across the bottom of the first view. */
  .hero {
    min-height: 100svh;
    justify-content: center;
    padding-block: calc(4.75rem + env(safe-area-inset-top, 0px)) calc(1.75rem + env(safe-area-inset-bottom, 0px));
  }
  /* optically centred: a block of type reads as centred when it sits a little above the
     true middle, and it keeps the gap under the wordmark tight. The offset is a share of
     the screen, so it scales with the phone instead of being a fixed number. */
  .hero__body { margin-top: 0; padding-bottom: 0; margin-bottom: 2.5svh; }
  /* the first layer lands the bottom of the photo on exactly --ink, the figures band's
     own colour, so the two meet with nothing to see — no edge, no rule, no tonal step */
  .hero__scrim {
    background:
      linear-gradient(to top, var(--ink) 0%, rgba(14, 25, 23, 0) 12%),
      linear-gradient(to top, rgba(9, 17, 15, .9) 0%, rgba(9, 17, 15, .55) 30%, rgba(9, 17, 15, .28) 60%, rgba(9, 17, 15, .5) 100%),
      linear-gradient(to right, rgba(9, 17, 15, .72) 0%, rgba(9, 17, 15, .34) 45%, rgba(9, 17, 15, .08) 100%);
  }
  .stats-band { border-top: 0; }
  .service { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .service__figure { grid-column: 1; max-width: none; }
  .service__figure img { aspect-ratio: 16 / 9; }
  .systems__grid { grid-template-columns: minmax(0, 1fr); }
  .specs, .facts { grid-template-columns: minmax(0, 1fr); }
  .detail { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
  .detail__label { padding-top: 0; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .projects__foot { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; transform: scale(1.04); }
  .js .line__in { transform: none; }
  .js .hero__body .eyebrow, .js .hero__lede, .js .hero__actions { opacity: 1; transform: none; }
}

/* ============================================================
   accessibility widget + the display modes it switches on
   ============================================================ */
.a11y { position: fixed; left: clamp(.9rem, 2vw, 1.5rem); bottom: clamp(.9rem, 2vw, 1.5rem); z-index: 120; }
/* one overlay at a time: the drawer owns the screen while it is open */
body.menu-open .a11y { display: none; }

/* a plain square carrying only the icon, at every width — it sits beside the WhatsApp
   circle as the other half of a pair, so it stays the same size as it */
.a11y__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; padding: 0;
  background: var(--ink); color: var(--plaster);
  /* a light hairline keeps the square readable where it sits on the dark hero photo */
  border: 1px solid rgba(239, 240, 235, .3); border-radius: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(14, 25, 23, .28);
  transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.a11y__btn:hover, .a11y__btn:focus-visible { background: var(--aegean); border-color: var(--aegean); transform: translateY(-2px); }
/* the label is the button's accessible name, so it is hidden from sight, not from the DOM */
.a11y__btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.a11y__panel {
  position: absolute; left: 0; bottom: calc(100% + .6rem);
  width: min(20rem, calc(100vw - 2rem));
  display: grid; gap: 1rem;
  padding: 1.25rem;
  background: var(--white); color: var(--body);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(14, 25, 23, .22);
}
.a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y__title {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: 1.15rem; line-height: 1; color: var(--ink); margin: 0;
}
.a11y__close {
  display: inline-flex; padding: .35rem; background: none; border: 1px solid var(--rule);
  color: var(--body); cursor: pointer;
}
.a11y__close:hover { border-color: var(--aegean); color: var(--aegean); }

.a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y__label { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); }
.a11y__stepper { display: flex; align-items: center; gap: .35rem; }
.a11y__stepper button {
  width: 2rem; height: 2rem; line-height: 1;
  background: var(--plaster); border: 1px solid var(--rule); color: var(--ink);
  font-size: 1rem; cursor: pointer;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.a11y__stepper button:hover { border-color: var(--aegean); background: var(--white); }
.a11y__value { min-width: 3.5rem; text-align: center; font-size: .85rem; font-variant-numeric: tabular-nums; }

.a11y__switch {
  display: grid; grid-template-columns: 2.6rem 1fr; align-items: start; gap: .75rem;
  cursor: pointer; padding-block: .15rem;
}
.a11y__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.a11y__track {
  position: relative; width: 2.6rem; height: 1.4rem; margin-top: .1rem;
  background: var(--stone); border: 1px solid var(--rule);
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.a11y__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(1.4rem - 8px); height: calc(1.4rem - 8px);
  background: var(--sage);
  transition: transform .3s var(--ease), background .3s var(--ease);
}
.a11y__switch input:checked + .a11y__track { background: rgba(14, 111, 115, .16); border-color: var(--aegean); }
.a11y__switch input:checked + .a11y__track::after { transform: translateX(1.2rem); background: var(--aegean); }
.a11y__switch input:focus-visible + .a11y__track { outline: 2px solid var(--aegean); outline-offset: 3px; }
.a11y__switch-text { font-size: .92rem; color: var(--ink); display: grid; gap: .1rem; }
.a11y__switch-text em { font-style: normal; font-size: .78rem; color: var(--sage); }

.a11y__reset {
  justify-self: start;
  background: none; border: 1px solid var(--rule); color: var(--body);
  padding: .55rem 1rem; cursor: pointer;
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.a11y__reset:hover { border-color: var(--aegean); color: var(--aegean); }

/* ---------- mode: high contrast ---------- */
html.a11y-contrast {
  --plaster: #FFFFFF;
  --stone:   #F4F4F1;
  --white:   #FFFFFF;
  --ink:     #000000;
  --body:    #101614;
  --sage:    #333C36;
  --sage-dim:#3E463F;
  --aegean:  #0A5457;
  --rule:    #6E756C;
  --rule-dark: #7C857F;
  --error:   #8A2C20;
}
html.a11y-contrast .systems { color: #FFFFFF; }
html.a11y-contrast .systems .lede,
html.a11y-contrast .stats-band,
html.a11y-contrast .footer,
html.a11y-contrast .stat__label,
html.a11y-contrast .chips li { color: #FFFFFF; }
html.a11y-contrast .stat--placeholder .stat__num,
html.a11y-contrast .footer__legal,
html.a11y-contrast .hero__lede,
html.a11y-contrast .hero__now { color: rgba(255, 255, 255, .92); }
html.a11y-contrast .hero__scrim {
  background: linear-gradient(to right, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .66) 55%, rgba(0, 0, 0, .5) 100%);
}
html.a11y-contrast .a11y__btn { border-color: #FFFFFF; }
/* the back-to-top button is light, so its hairline goes dark rather than white */
html.a11y-contrast .totop { background: #FFFFFF; color: #000000; border-color: #000000; }
html.a11y-contrast .service__figure img,
html.a11y-contrast .system__swatch img,
html.a11y-contrast .map__frame iframe { filter: none; }
html.a11y-contrast .eyebrow::after { opacity: .9; }
html.a11y-contrast :focus-visible { outline-width: 3px; }

/* ---------- mode: underline links ---------- */
html.a11y-underline a { text-decoration: underline; text-underline-offset: .18em; }
html.a11y-underline .btn, html.a11y-underline .wordmark { text-decoration: none; }

/* ---------- mode: readable font ---------- */
html.a11y-readable {
  --f-display: "Verdana", "DejaVu Sans", system-ui, sans-serif;
  --f-body: "Verdana", "DejaVu Sans", system-ui, sans-serif;
}
html.a11y-readable body { line-height: 1.85; font-weight: 400; letter-spacing: .01em; }
html.a11y-readable .h2, html.a11y-readable .h3, html.a11y-readable .hero__title,
html.a11y-readable .project__name, html.a11y-readable .stat__num, html.a11y-readable .form__title,
html.a11y-readable .form-sent__title, html.a11y-readable .a11y__title, html.a11y-readable .wordmark__mark {
  font-variation-settings: normal; letter-spacing: 0; line-height: 1.25; font-style: normal;
}
html.a11y-readable .pull, html.a11y-readable .projects__foot p,
html.a11y-readable .project__note { font-style: normal; }
html.a11y-readable .project__note { font-weight: 500; }
html.a11y-readable .eyebrow, html.a11y-readable .stat__label, html.a11y-readable .service__stage,
html.a11y-readable .project__index, html.a11y-readable .detail__label, html.a11y-readable .specs dt,
html.a11y-readable .facts dt, html.a11y-readable .system__full, html.a11y-readable .field label,
html.a11y-readable .link-arrow, html.a11y-readable .btn, html.a11y-readable .a11y__label {
  text-transform: none; letter-spacing: .02em;
}

/* ============================================================
   project gallery (opened from a project photo)
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 150;
  display: grid; grid-template-rows: auto 1fr auto;
  gap: clamp(.75rem, 2vw, 1.5rem);
  padding: clamp(.9rem, 2.5vw, 2rem);
  background: rgba(9, 14, 13, .975);
  backdrop-filter: blur(8px);
  color: var(--plaster);
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.lightbox.is-open { opacity: 1; }

.lightbox__bar { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 2rem); }
.lightbox__heading { display: grid; gap: .2rem; margin-right: auto; }
.lightbox__title {
  font-family: var(--f-display); font-variation-settings: var(--wonk);
  font-size: clamp(1.1rem, .95rem + .8vw, 1.7rem); line-height: 1; letter-spacing: -.02em;
}
.lightbox__tag, .lightbox__count {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(239, 240, 235, .68);
}
.lightbox__count { font-variant-numeric: tabular-nums; }
.lightbox__close {
  display: inline-flex; padding: .55rem;
  background: none; border: 1px solid var(--rule-dark); color: inherit; cursor: pointer;
  transition: border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__close:hover { border-color: var(--aegean-up); color: var(--aegean-up); }

.lightbox__stage {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(.5rem, 2vw, 1.75rem);
  width: 100%; max-width: 76rem; margin-inline: auto;
  min-height: 0;
}
.lightbox__figure {
  margin: 0; min-height: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .85rem;
}
.lightbox__figure img {
  max-width: 100%; max-height: 100%;
  min-height: 0; width: auto; height: auto;
  object-fit: contain;
  background: var(--ink-soft);
}
.lightbox__figure figcaption {
  font-size: .82rem; color: rgba(239, 240, 235, .72); text-align: center; max-width: 60ch;
}
.lightbox__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(2.5rem, 5vw, 3.25rem); aspect-ratio: 1;
  background: rgba(239, 240, 235, .06); border: 1px solid var(--rule-dark);
  color: inherit; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.lightbox__nav:hover { background: rgba(239, 240, 235, .14); border-color: var(--aegean-up); color: var(--aegean-up); }

.lightbox__thumbs {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  padding-top: .25rem;
}
.lightbox__thumbs button {
  width: clamp(4rem, 9vw, 6.5rem); aspect-ratio: 16 / 11;
  padding: 0; border: 1px solid transparent; background: var(--ink-soft);
  cursor: pointer; overflow: hidden;
  opacity: .55;
  transition: opacity .3s var(--ease), border-color .3s var(--ease);
}
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox__thumbs button:hover { opacity: .85; }
.lightbox__thumbs button[aria-current="true"] { opacity: 1; border-color: var(--aegean-up); }

.lightbox :focus-visible { outline-color: var(--aegean-up); }

@media (max-width: 620px) {
  .lightbox__stage { grid-template-columns: minmax(0, 1fr); }
  .lightbox__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(9, 14, 13, .72);
  }
  .lightbox__nav--prev { left: clamp(.9rem, 2.5vw, 2rem); }
  .lightbox__nav--next { right: clamp(.9rem, 2.5vw, 2rem); }
  .lightbox__thumbs { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
  .lightbox__thumbs button { flex: 0 0 auto; width: 4.5rem; }
}

/* ============================================================
   WhatsApp — floating on every screen, thumb-reachable on phones
   ============================================================ */
.wa {
  --wa: #25D366;
  position: fixed; z-index: 130;
  right: clamp(.9rem, 2vw, 1.5rem);
  bottom: max(clamp(.9rem, 2vw, 1.5rem), env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem;
  background: var(--wa); color: var(--ink);
  border: 2px solid var(--wa); border-radius: 999px;
  text-decoration: none;
  font-size: .78rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 10px 28px rgba(14, 25, 23, .3);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.wa:hover, .wa:focus-visible {
  transform: translateY(-2px);
  background: #1FBE59;
  box-shadow: 0 14px 34px rgba(37, 211, 102, .38);
}
.wa__icon { flex: 0 0 auto; }
.wa:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the label stays for screen readers; the button itself is the icon at every width */
.wa__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* one floating control at a time while the drawer or a gallery is open */
body.menu-open .wa { display: none; }
.lightbox:not([hidden]) ~ .wa { display: none; }

html.a11y-contrast .wa { background: #0B7C34; color: #FFFFFF; border-color: #0B7C34; }

/* ============================================================
   back to top — square, to pair with the accessibility button
   ============================================================ */
.totop {
  --totop-size: 28px;      /* about half the WhatsApp circle it sits above */
  position: fixed; z-index: 125;
  /* centred on the WhatsApp circle's axis, so the two read as one stack */
  right: calc(clamp(.9rem, 2vw, 1.5rem) + (52px - var(--totop-size)) / 2);
  bottom: calc(max(clamp(.9rem, 2vw, 1.5rem), env(safe-area-inset-bottom, 0px)) + 52px + .6rem);
  width: var(--totop-size); height: var(--totop-size); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* light, but stone rather than white, so it stays inside the palette on both grounds */
  background: var(--stone); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(14, 25, 23, .26);
  opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease),
              background .3s var(--ease), border-color .3s var(--ease);
}
.totop.is-in { opacity: 1; transform: none; }
.totop:hover, .totop:focus-visible { background: var(--aegean-up); border-color: var(--aegean-up); }
.totop__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* one floating control at a time while the drawer or a gallery is open */
body.menu-open .totop { display: none; }
.lightbox:not([hidden]) ~ .totop { display: none; }