/* ============================================================================
   SATHAR AL KARAN — site stylesheet
   ----------------------------------------------------------------------------
   Design thesis: the logo is a single unbroken handwritten line, and the
   subject describes his own work as "creating bridges". So the structural
   signature of this site is ONE continuous hairline that threads the left
   margin of every page and carries the section markers. Everything else stays
   quiet so that line, and the 135-photograph archive, do the talking.

   Palette is plaster-and-ink, not cream-and-terracotta: a cool bone wall so
   the warm archival photography reads as lit plates hung on it. The single
   accent is a deep pine pulled from the subject's own reforestation ventures
   (Forestification, Plant the Emirates, Vanah), spent only on primary actions.
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  /* surface */
  --paper:      #edede8;   /* gallery-wall plaster, cool green undertone */
  --paper-sunk: #e4e4dc;   /* recessed surface */
  --paper-warm: #f4f3ee;   /* raised surface, plate mounts */
  --ink:        #14150f;   /* warm near-black, the signature's ink */
  --ink-soft:   #1d1f18;
  --text:       #14150f;
  --text-muted: #4c5047;   /* 7.4:1 on --paper */
  --text-dim:   #6a6e63;   /* 4.6:1 on --paper, captions only */
  --line:       #c6c7be;
  --line-firm:  #a9ab9f;
  --accent:     #2e4a35;   /* deep pine, primary action only */
  --accent-lift:#3d6045;
  --on-dark:        #edede8;
  --on-dark-muted:  #a4a89a;
  --on-dark-line:   #33362c;

  /* type */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* scale — ratio 1.25, held everywhere */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   1.9rem;
  --t-2xl:  clamp(2.1rem, 3.4vw, 2.9rem);
  --t-3xl:  clamp(2.6rem, 5.2vw, 4.4rem);
  --t-4xl:  clamp(3rem, 8vw, 6.2rem);

  /* rhythm — 8px base, deliberately uneven between tiers */
  --s-1: 4px;  --s-2: 8px;   --s-3: 16px;  --s-4: 24px;
  --s-5: 40px; --s-6: 64px;  --s-7: 96px;
  --band: clamp(64px, 8vw, 120px);

  /* structure */
  --shell:  1280px;
  --rail:   132px;          /* the continuous-line rail */
  --measure: 68ch;

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

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; margin: 0; }

/* a heading belongs to what follows it: more space above than below */
h2 { font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.018em; }
h4 { font-size: var(--t-md); line-height: 1.3; letter-spacing: -0.01em; }

p { margin: 0 0 var(--s-4); max-width: var(--measure); }

::selection { background: var(--accent); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-dark);
  padding: var(--s-3) var(--s-4); font-size: var(--t-sm);
}
.skip:focus { left: 0; }

/* ---------- shell ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 56px);
}

/* ============================================================================
   MASTHEAD
   ========================================================================= */
.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.masthead-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4);
  min-height: 68px;
}
.mark { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.mark img { height: 30px; width: auto; }
.mark span {
  font-family: var(--display); font-size: var(--t-md);
  letter-spacing: -0.01em;
}

.nav-toggle {
  display: none;
  align-items: center; gap: 10px;
  background: none; border: 1px solid var(--line-firm);
  color: var(--text); cursor: pointer;
  font-family: var(--body); font-size: var(--t-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 16px; min-height: 44px;
  border-radius: 2px;
}
.nav-toggle:hover { border-color: var(--ink); }

.nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px); }
.nav a {
  text-decoration: none;
  font-size: var(--t-sm);
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 180ms var(--ease), border-color 180ms var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--text); border-bottom-color: var(--line-firm); }
.nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--ink); }

.nav .nav-cta {
  border: 1px solid var(--accent); color: var(--accent);
  padding: 9px 16px; border-radius: 2px; letter-spacing: 0.05em;
}
.nav .nav-cta:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: var(--s-2) clamp(20px, 5vw, 56px) var(--s-4);
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav.open { display: flex; }
  .nav a {
    padding: 14px 0; border-bottom: 1px solid var(--line);
    font-size: var(--t-base); letter-spacing: 0.02em;
  }
  .nav a[aria-current="page"] { border-bottom-color: var(--line); color: var(--accent); }
  .nav .nav-cta { margin-top: var(--s-3); text-align: center; border-radius: 2px; }
}

/* ============================================================================
   HERO — dark band, asymmetric. The one place the page goes to ink.
   ========================================================================= */
.hero {
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(56px, 9vw, 112px) clamp(48px, 7vw, 88px);
  position: relative; overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: end;
}
.hero-signature { width: min(430px, 78%); margin-bottom: var(--s-5); }
.hero-signature img {
  width: 100%;
  /* the mark is black line-art on white; invert it onto the ink band */
  filter: invert(1) brightness(1.9);
  mix-blend-mode: screen;
}
.hero h1 {
  font-size: var(--t-3xl);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 300;
  max-width: 15ch;
  margin-bottom: var(--s-4);
}
.hero-lede {
  color: var(--on-dark-muted);
  font-size: var(--t-md);
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: var(--s-5);
}
.hero-roles {
  display: flex; flex-wrap: wrap; gap: 0;
  list-style: none; margin: 0 0 var(--s-5); padding: 0;
  font-size: var(--t-sm); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-dark-muted);
}
.hero-roles li { padding-right: 18px; margin-right: 18px; border-right: 1px solid var(--on-dark-line); }
.hero-roles li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.hero-portrait { position: relative; }
.hero-portrait img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%;
  border-radius: 2px;
}
.hero-portrait figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-dark-muted);
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hero-portrait { order: -1; }
  .hero-portrait img { aspect-ratio: 3 / 2; object-position: center 18%; }
  .hero-signature { width: min(320px, 82%); }
}

/* page hero — the lighter variant used on interior pages */
.pagehead {
  border-bottom: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 84px) clamp(32px, 4.5vw, 56px);
}
.pagehead-in {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
}
.pagehead-index {
  font-size: var(--t-xs); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.pagehead h1 {
  font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -0.035em;
  font-weight: 300; max-width: 18ch; margin-bottom: var(--s-4);
}
.pagehead-standfirst {
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--text);
  max-width: 30ch;
  margin: 0 0 var(--s-4);
}
.pagehead-lede {
  font-size: var(--t-md); line-height: 1.55; color: var(--text-muted);
  max-width: 58ch; margin: 0;
}
@media (max-width: 880px) {
  .pagehead-in { grid-template-columns: 1fr; gap: var(--s-3); }
  .pagehead-index { padding-top: 10px; }
}

/* ============================================================================
   THE CONTINUOUS LINE — the signature structural device.
   One hairline runs the full height of the article column; every section
   marker sits on it. Echoes the single-stroke logo.
   ========================================================================= */
/* The section's vertical padding lives INSIDE the grid row, not on the
   section, so the rule spans the full height of every band and the rule of
   one section meets the rule of the next. That is what makes the line read
   as one unbroken stroke down the page instead of a stack of dashes. */
.thread { position: relative; padding-block: 0; }
.thread-in {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: stretch;
}
/* the line itself */
.thread-in::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  align-self: stretch;
  width: 1px;
  background: var(--line-firm);
  margin-left: 1px;
}

.thread-mark {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  position: relative;
  margin: 0;
  padding: calc(var(--band) * 0.5) 0 0 18px;
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  line-height: 1.4;
  white-space: nowrap;
}
/* the node where the folio meets the line */
.thread-mark::before {
  content: "";
  position: absolute; left: -3px; top: calc(var(--band) * 0.5 + 6px);
  width: 9px; height: 9px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 50%;
}
.thread-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding-block: calc(var(--band) * 0.5);
}

@media (max-width: 880px) {
  .thread-in { grid-template-columns: 1fr; gap: 0; }
  .thread-in::before { display: none; }
  .thread-mark::before { display: none; }
  /* the rail collapses, so the stroke becomes a short lead-in rule */
  .thread-mark {
    grid-column: 1; grid-row: auto;
    width: 56px;
    margin-top: calc(var(--band) * 0.5);
    padding: 10px 0 0;
    border-top: 1px solid var(--ink);
  }
  .thread-body {
    grid-column: 1; grid-row: auto;
    padding-block: var(--s-4) calc(var(--band) * 0.5);
  }
}

/* ---------- prose ---------- */
.prose > h2 { margin-top: var(--s-6); margin-bottom: var(--s-4); }
.prose > h3 { margin-top: var(--s-5); margin-bottom: var(--s-3); }
.prose > h4 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }

.prose p { color: var(--text-muted); }
.prose .lede {
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 34ch;
}

.prose blockquote {
  margin: var(--s-5) 0;
  padding-left: var(--s-4);
  border-left: 1px solid var(--ink);
  font-family: var(--display);
  font-size: var(--t-lg);
  line-height: 1.42;
  letter-spacing: -0.012em;
  color: var(--text);
  max-width: 42ch;
}
.prose blockquote p { color: inherit; max-width: none; margin-bottom: var(--s-2); }
.prose blockquote p:last-child { margin-bottom: 0; }

/* plain bullet runs */
.prose ul { margin: 0 0 var(--s-4); padding: 0; list-style: none; max-width: var(--measure); }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--text-muted);
}
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: 0.72em;
  width: 10px; height: 1px; background: var(--line-firm);
}

/* "Name – description" runs become a real definition list */
.deflist { margin: 0 0 var(--s-4); max-width: var(--measure); }
.deflist div {
  display: grid;
  grid-template-columns: minmax(150px, 0.36fr) minmax(0, 1fr);
  gap: var(--s-2) var(--s-4);
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.deflist div:last-child { border-bottom: 1px solid var(--line); }
.deflist dt { font-weight: 600; letter-spacing: -0.005em; }
.deflist dd { margin: 0; color: var(--text-muted); }
@media (max-width: 620px) {
  .deflist div { grid-template-columns: 1fr; gap: 2px; }
}

/* the label that introduces a list ("Key Solutions", "Guest of Honour") */
.prose > .keylabel {
  font-family: var(--body);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: var(--s-5) 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  max-width: var(--measure);
}
.prose > .keylabel + .keylist { margin-top: var(--s-3); }

/* trailing social captions: present, but clearly not body prose */
.prose .note {
  font-size: var(--t-sm);
  color: var(--text-dim);
  letter-spacing: 0.01em;
  word-spacing: 0.15em;
  line-height: 1.7;
  max-width: var(--measure);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

/* keyed solution lists: a spec sheet, not a bullet list. Two tight columns
   of hairline-separated rows, so a long service page scans in seconds. */
/* scoped under .prose so it outranks the generic `.prose ul li` bullet */
.prose ul.keylist {
  margin: 0 0 var(--s-5);
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-5);
}
.prose ul.keylist li {
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.prose ul.keylist li::before { content: none; }
@media (max-width: 620px) { .prose ul.keylist { grid-template-columns: 1fr; } }

/* a subtitle the export recorded as its own heading: kept as a heading,
   set in the display face a step down so the hierarchy stays legible */
.prose > h3.subhead {
  font-family: var(--display);
  font-size: var(--t-lg);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--text-muted);
  margin: 0 0 var(--s-4);
  max-width: 42ch;
}
.prose > h2 + h3.subhead { margin-top: calc(var(--s-2) * -1); }

/* ============================================================================
   PLATES — catalogue treatment for the archive.
   Consistent ratio, real margins, caption and plate number beneath.
   The numbers are a genuine index into the archive, not decoration.
   ========================================================================= */
.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 38px) clamp(16px, 2vw, 28px);
  margin: 0; padding: 0; list-style: none;
}
.plate { margin: 0; }
.plate-frame {
  display: block;
  background: var(--paper-sunk);
  border: 0; padding: 0; width: 100%;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: 2px;
}
.plate-frame img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 260ms var(--ease);
}
.plate-frame:hover img { transform: scale(1.028); }
/* grid, not flex: a flex caption cannot shrink below its min-content, and a
   long archive caption then forces the whole page wider than the phone. */
.plate figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  margin-top: 10px;
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--text-dim);
}
.plate-no {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--line-firm);
}
.plate-cap {
  letter-spacing: 0.02em;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* one lead plate per gallery gets width — stops the uniform-card-grid tell */
.plates .plate.lead { grid-column: span 2; }
.plates .plate.lead .plate-frame img { aspect-ratio: 16 / 9; }
@media (max-width: 620px) {
  .plates .plate.lead { grid-column: span 1; }
  .plates .plate.lead .plate-frame img { aspect-ratio: 4 / 3; }
}

/* a single inline plate set beside prose */
.figure-inline { margin: var(--s-5) 0; max-width: var(--measure); }
.figure-inline img { width: 100%; border-radius: 2px; }
.figure-inline figcaption {
  margin-top: 10px; font-size: var(--t-xs); color: var(--text-dim);
  letter-spacing: 0.02em;
}

/* the establishing plate: the first image on an interior page */
.establish { padding-top: clamp(28px, 4vw, 48px); }
.plate-establish { margin: 0; }
.plate-establish img {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  border-radius: 2px;
}
.plate-establish figcaption {
  margin-top: 10px;
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--text-dim);
}
@media (max-width: 880px) { .plate-establish img { aspect-ratio: 3 / 2; } }

/* full-bleed portrait break */
.plate-wide { margin: var(--band) 0; }
.plate-wide img {
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: 2px;
}
.plate-wide figcaption {
  margin-top: 10px; font-size: var(--t-xs); color: var(--text-dim);
  letter-spacing: 0.02em;
}
@media (max-width: 880px) { .plate-wide img { aspect-ratio: 3 / 2; } }

/* ============================================================================
   CARDS — used only for the brand ventures, which are genuinely a set
   ========================================================================= */
.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  list-style: none; margin: 0; padding: 0;
}
.venture {
  background: var(--paper);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  transition: background 180ms var(--ease);
  min-height: 116px;
}
a.venture:hover { background: var(--paper-warm); }
.venture-name {
  font-family: var(--display); font-size: var(--t-md); letter-spacing: -0.012em;
}
.venture-url {
  font-size: var(--t-xs); letter-spacing: 0.06em; color: var(--text-dim);
  word-break: break-word; margin-top: auto;
}
a.venture:hover .venture-url { color: var(--accent); }

/* ============================================================================
   ROUTES — the index of pages, used on home and in the footer
   ========================================================================= */
.routes { list-style: none; margin: 0; padding: 0; }
.route {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: var(--s-4);
  align-items: baseline;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  transition: padding-left 200ms var(--ease);
}
.routes .route:last-child { border-bottom: 1px solid var(--line); }
.route:hover { padding-left: 10px; }
.route-no {
  font-size: var(--t-xs); font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em; color: var(--line-firm);
}
.route-name {
  font-family: var(--display); font-size: var(--t-lg);
  letter-spacing: -0.018em; line-height: 1.2;
}
.route-note { font-size: var(--t-sm); color: var(--text-muted); margin-top: 4px; max-width: 52ch; }
.route-go { font-size: var(--t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.route:hover .route-go { color: var(--accent); }
@media (max-width: 620px) {
  .route { grid-template-columns: 32px minmax(0, 1fr); gap: var(--s-3); }
  .route-go { display: none; }
}

/* ============================================================================
   ACTIONS
   ========================================================================= */
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 24px;
  font-family: var(--body); font-size: var(--t-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  border: 1px solid var(--accent);
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn-primary { background: var(--accent); color: var(--paper); }
.btn-primary:hover { background: var(--accent-lift); border-color: var(--accent-lift); }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--line-firm); }
.btn-quiet:hover { border-color: var(--ink); }
.hero .btn-quiet { color: var(--on-dark); border-color: var(--on-dark-line); }
.hero .btn-quiet:hover { border-color: var(--on-dark-muted); }

/* ============================================================================
   CONTACT
   ========================================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--s-5);
}
.contact-block h4 {
  font-family: var(--body); font-size: var(--t-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500;
  padding-bottom: 10px; margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.contact-block ul { list-style: none; margin: 0; padding: 0; }
.contact-block li { margin-bottom: 8px; }
.contact-block a { text-decoration: none; border-bottom: 1px solid var(--line); }
.contact-block a:hover { border-bottom-color: var(--accent); color: var(--accent); }
.tel { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

.signoff {
  margin-top: var(--s-6);
  padding-top: var(--s-3);
  border-top: 1px solid var(--ink);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  max-width: none;
}

/* ============================================================================
   FOOTER
   ========================================================================= */
.foot {
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(48px, 6vw, 84px) var(--s-5);
  margin-top: var(--band);
}
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 72px);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--on-dark-line);
}
.foot-signature { width: min(300px, 74%); margin-bottom: var(--s-4); }
.foot-signature img { width: 100%; filter: invert(1) brightness(1.9); mix-blend-mode: screen; }
.foot-where { font-size: var(--t-sm); line-height: 1.7; color: var(--on-dark-muted); max-width: 34ch; }
.foot-nav {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-4) var(--s-5);
}
.foot-nav h4 {
  font-family: var(--body); font-size: var(--t-xs); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on-dark-muted); margin-bottom: var(--s-3);
}
.foot-nav ul { list-style: none; margin: 0; padding: 0; }
.foot-nav li { margin-bottom: 9px; }
.foot-nav a {
  text-decoration: none; font-size: var(--t-sm); color: var(--on-dark);
  border-bottom: 1px solid transparent;
  transition: border-color 180ms var(--ease);
}
.foot-nav a:hover { border-bottom-color: var(--on-dark-muted); }
.foot-base {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5);
  justify-content: space-between;
  padding-top: var(--s-4);
  font-size: var(--t-xs); letter-spacing: 0.06em;
  color: var(--on-dark-muted);
}
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr; } }

/* ============================================================================
   LIGHTBOX — progressive enhancement; the page is complete without it
   ========================================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(10, 11, 8, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: clamp(16px, 4vw, 56px);
}
.lightbox[open], .lightbox.open { display: flex; }
.lightbox img {
  max-width: 100%; max-height: 82vh; object-fit: contain;
  border-radius: 2px;
}
.lightbox figcaption {
  margin-top: var(--s-3); text-align: center;
  font-size: var(--t-sm); color: var(--on-dark-muted);
  letter-spacing: 0.03em;
}
.lightbox-close {
  position: absolute; top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px);
  min-width: 44px; min-height: 44px;
  background: none; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); cursor: pointer;
  font-family: var(--body); font-size: var(--t-sm);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 2px;
}
.lightbox-close:hover { border-color: var(--on-dark-muted); }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  min-width: 48px; min-height: 48px;
  background: none; border: 1px solid var(--on-dark-line);
  color: var(--on-dark); cursor: pointer; font-size: 1.2rem;
  border-radius: 2px;
}
.lightbox-nav:hover { border-color: var(--on-dark-muted); }
.lightbox-prev { left: clamp(8px, 2vw, 24px); }
.lightbox-next { right: clamp(8px, 2vw, 24px); }
body.lock { overflow: hidden; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  .masthead, .nav-toggle, .lightbox { display: none; }
  body { background: #fff; }
  .hero, .foot { background: #fff; color: #000; }
  .hero-signature img, .foot-signature img { filter: none; mix-blend-mode: normal; }
}