/* ==========================================================================
   S.M. Drillers Limited -- "Engineering Heritage"

   Brand colours sampled from the company wordmark:
     #0099DD  blue  ("SM")
     #5DBC46  green ("Drillers")

   The archive photographs are ~700px, faded, and carry the white borders of
   physical prints. Everything below is built around that: they are mounted
   rather than stretched, never asked to go full-bleed at a size that would
   expose their resolution, and given a warm paper ground so the fade reads as
   age instead of as a defect.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */

:root {
  --blue: #0099dd;
  --blue-deep: #0076ac;
  --blue-ink: #04405c;
  --green: #5dbc46;
  --green-deep: #479a33;

  --ink: #10161d;
  --ink-2: #1c252f;
  --ink-3: #2b3742;
  --slate: #56636f;
  --muted: #76828e;

  --paper: #f4f0e8;
  --paper-2: #faf7f2;
  --paper-3: #ebe5d9;
  --white: #fff;

  --line: rgba(16, 22, 29, .13);
  --line-soft: rgba(16, 22, 29, .07);
  --line-dark: rgba(255, 255, 255, .14);

  --display: "Barlow Condensed", "Arial Narrow", Haettenschweiler, sans-serif;
  --body: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1200px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);

  --r-sm: 3px;
  --r: 5px;
  --r-lg: 8px;

  --sh-1: 0 1px 2px rgba(16, 22, 29, .06), 0 2px 8px rgba(16, 22, 29, .05);
  --sh-2: 0 2px 6px rgba(16, 22, 29, .08), 0 12px 28px rgba(16, 22, 29, .1);
  --sh-3: 0 6px 16px rgba(16, 22, 29, .13), 0 24px 60px rgba(16, 22, 29, .16);

  --head-h: 76px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue); }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.7rem, 1.6rem + 5.2vw, 5.4rem); }
h2 { font-size: clamp(2.05rem, 1.35rem + 3vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .85vw, 1.7rem); }

p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: .85rem 1.3rem;
  font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

/* -------------------------------------------------------------- helpers -- */

.wrap {
  width: min(var(--wrap), 100% - (var(--gut) * 2));
  margin-inline: auto;
}
.wrap-narrow { width: min(760px, 100% - (var(--gut) * 2)); margin-inline: auto; }

.ic { width: 1.25em; height: 1.25em; flex: none; }

.eyebrow {
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .21em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: var(--green);
  flex: none;
}
.eyebrow.on-dark { color: #7fd4ff; }
.eyebrow.centered { justify-content: center; }

.lead {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.32rem);
  line-height: 1.6;
  color: var(--slate);
}

.section { padding: clamp(4rem, 9vw, 7.5rem) 0; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.section-head.centered { margin-inline: auto; text-align: center; }

.ink-bg { background: var(--ink); color: #c7d0d9; }
.ink-bg h2, .ink-bg h3 { color: #fff; }
.ink-bg .lead { color: #aab6c2; }
.paper-2 { background: var(--paper-2); }

.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* Fine blueprint grid, used behind dark sections. */
.gridlines { position: relative; overflow: hidden; }
.gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
}
.gridlines > * { position: relative; }

/* --------------------------------------------------------------- button -- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: var(--blue);
  color: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .055em;
  text-transform: uppercase;
  padding: .92rem 1.7rem;
  border: 2px solid var(--blue);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease),
              color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
  color: #fff;
  transform: translateY(-2px);
}
.btn .ic { width: 1.1em; height: 1.1em; transition: transform .22s var(--ease); }
.btn:hover .ic { transform: translateX(3px); }

.btn-green { background: var(--green); border-color: var(--green); }
.btn-green:hover { background: var(--green-deep); border-color: var(--green-deep); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--ink); border-color: var(--ink); color: #fff; }

.btn-ghost-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .38); }
.btn-ghost-light:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn-sm { padding: .6rem 1.15rem; font-size: .96rem; }
.btn-block { display: flex; justify-content: center; width: 100%; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.textlink .ic { width: 1em; height: 1em; transition: transform .22s var(--ease); }
.textlink:hover .ic { transform: translateX(4px); }

/* --------------------------------------------------------------- header -- */

.site-head {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--head-h);
  display: flex;
  align-items: center;
  background: rgba(250, 247, 242, .94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              box-shadow .3s var(--ease);
}
/* Over the hero the header floats transparent, then solidifies on scroll. */
.site-head[data-overlay="true"]:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}
.site-head.is-stuck { box-shadow: var(--sh-1); }

.head-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  width: min(var(--wrap), 100% - (var(--gut) * 2));
}

.brand { display: flex; align-items: center; margin-right: auto; }
/* The wordmark is now transparent with its own brand blue and green, both of
   which hold up over the hero photograph and on the paper ground, so it needs
   no filtering in either state. */
.brand img { width: 168px; height: auto; }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
  position: relative;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: .5rem .95rem;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: .95rem;
  right: .95rem;
  bottom: .18rem;
  height: 2px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .26s var(--ease);
}
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.nav a.is-current { color: var(--blue-deep); }

.site-head[data-overlay="true"]:not(.is-stuck) .nav a { color: rgba(255, 255, 255, .92); }
.site-head[data-overlay="true"]:not(.is-stuck) .nav a.is-current { color: #fff; }
.site-head[data-overlay="true"]:not(.is-stuck) .btn-sm {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
}
.site-head[data-overlay="true"]:not(.is-stuck) .btn-sm:hover {
  background: #fff; border-color: #fff; color: var(--ink);
}

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.burger span {
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .26s var(--ease), opacity .2s var(--ease);
}
.site-head[data-overlay="true"]:not(.is-stuck) .burger span { background: #fff; }
.burger[aria-expanded="true"] span { background: var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed;
  inset: var(--head-h) 0 auto;
  z-index: 99;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-2);
  animation: drawer-in .26s var(--ease);
}
@keyframes drawer-in { from { opacity: 0; transform: translateY(-10px); } }

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem var(--gut) 1.6rem;
}
.drawer-nav a:not(.btn) {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.3rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .78rem .2rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer-nav a.is-current { color: var(--blue-deep); }
.drawer-nav .btn { margin-top: 1rem; }

/* ----------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92vh, 860px);
  padding: calc(var(--head-h) + clamp(3rem, 9vw, 6rem)) 0 clamp(2.5rem, 6vw, 4.5rem);
  background: var(--ink);
  overflow: hidden;
}

/* The hero photograph is a 686px scan. It is deliberately blurred a touch,
   desaturated toward the brand blue and heavily overlaid, so it reads as
   atmosphere rather than as a low-resolution image asked to fill a screen. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.55) contrast(1.06) brightness(.72) blur(1px);
  transform: scale(1.06);
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(16, 22, 29, .74) 0%, rgba(16, 22, 29, .42) 38%, rgba(16, 22, 29, .93) 100%),
    linear-gradient(90deg, rgba(4, 64, 92, .5) 0%, rgba(16, 22, 29, .12) 62%);
}

/* No width here: this element also carries .wrap, and a `width` declaration
   would override the gutter that .wrap sets (equal specificity, later rule). */
.hero-inner { position: relative; z-index: 1; }

.hero h1 {
  color: #fff;
  max-width: 17ch;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .35);
}
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
.hero .lead {
  color: rgba(255, 255, 255, .88);
  max-width: 56ch;
  margin-bottom: 2.4rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* Stat strip along the bottom of the hero. Every figure here is either stated
   on the original site or arithmetic from it -- nothing is invented. */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  border-top: 1px solid var(--line-dark);
}
/* Centred in each column. The previous rule ended in `.2rem 0` -- no left
   padding at all -- which pushed "1975" hard against the container edge.
   Dividers are real borders now: the old `gap: 1px` over a tinted parent did
   not draw lines, because the transparent cells let that same tint through
   and the whole strip just came out washed. */
.hero-stat {
  padding: 1.5rem 1rem .4rem;
  text-align: center;
  border-left: 1px solid var(--line-dark);
}
.hero-stat:first-child { border-left: 0; }
.hero-stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
}
.hero-stat span {
  display: block;
  margin-top: .45rem;
  font-size: .87rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

/* Small scroll hint. */
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  z-index: 2;
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55));
  overflow: hidden;
}
.scroll-hint::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  animation: scroll-run 2.3s var(--ease) infinite;
}
@keyframes scroll-run {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(100%); }
}

/* -------------------------------------------------------------- page top -- */

.page-head {
  position: relative;
  padding: calc(var(--head-h) + clamp(3.2rem, 7vw, 5.5rem)) 0 clamp(2.6rem, 5vw, 4rem);
  background: var(--ink);
  color: #fff;
}
.page-head h1 { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); }
.page-head .lead { color: rgba(255, 255, 255, .82); max-width: 58ch; }

/* --------------------------------------------------------- archive print -- */

/* The scans already carry their own white photo borders. A thin mount plus a
   real shadow is enough to read as a print without doubling the frame. */
.print {
  position: relative;
  display: block;
  background: var(--white);
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  box-shadow: var(--sh-1);
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.print img {
  width: 100%;
  border-radius: 1px;
  background: var(--paper-3);
}

/* ------------------------------------------------------------ intro copy -- */

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.intro-copy p { color: var(--slate); font-size: 1.08rem; }
.intro-copy p:first-of-type {
  font-size: clamp(1.14rem, 1rem + .6vw, 1.4rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Two prints, offset, reading as photographs laid on a desk. */
.intro-prints { position: relative; }
.intro-prints .print:first-child { width: 78%; }
.intro-prints .print:last-child {
  width: 56%;
  position: absolute;
  right: 0;
  bottom: -14%;
  box-shadow: var(--sh-3);
}
.intro-prints .print:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }

.stamp {
  position: absolute;
  top: -18px;
  left: -14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 2px solid var(--green);
  background: var(--paper-2);
  font-family: var(--display);
  font-weight: 700;
  line-height: 1;
  color: var(--green-deep);
  text-align: center;
  box-shadow: var(--sh-1);
  transform: rotate(-9deg);
}
.stamp b { display: block; font-size: 1.85rem; }
.stamp span { display: block; font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---------------------------------------------------------- capabilities -- */

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.cap {
  position: relative;
  background: var(--paper-2);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transition: background .28s var(--ease), transform .28s var(--ease);
}
.cap::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .34s var(--ease);
}
.cap:hover { background: var(--white); }
.cap:hover::before { transform: scaleX(1); }
.cap .ic { width: 2.2rem; height: 2.2rem; color: var(--blue); margin-bottom: 1.1rem; }
.cap h3 { margin-bottom: .55rem; }
.cap p { font-size: .99rem; color: var(--slate); margin-bottom: 1.1rem; }
.cap .textlink { font-size: .93rem; }
.cap-num {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--line);
}

/* ------------------------------------------------------------- promises -- */

.promise-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.promise {
  padding: clamp(1.7rem, 3vw, 2.3rem);
  background: rgba(255, 255, 255, .038);
  border: 1px solid var(--line-dark);
  border-radius: var(--r);
  transition: background .28s var(--ease), border-color .28s var(--ease);
}
.promise:hover { background: rgba(255, 255, 255, .07); border-color: rgba(125, 212, 255, .4); }
.promise .ic { width: 2.1rem; height: 2.1rem; color: var(--green); margin-bottom: 1rem; }
.promise h3 { font-size: 1.42rem; margin-bottom: .4rem; }
.promise p { font-size: .97rem; color: #9fabb7; margin: 0; }

/* -------------------------------------------------------------- archive -- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filter {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--slate);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: .52rem 1.2rem;
  cursor: pointer;
  transition: all .22s var(--ease);
}
.filter:hover { border-color: var(--blue); color: var(--blue-deep); }
.filter[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filter span { opacity: .55; margin-left: .4rem; font-size: .88em; }

/* Masonry via CSS columns -- the archive mixes portrait and landscape scans,
   and columns handle that without cropping anything. */
.archive {
  columns: 3;
  column-gap: clamp(1rem, 2.2vw, 1.75rem);
}
.archive-item {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2.2vw, 1.75rem);
  animation: fade-up .45s var(--ease) both;
}
.archive-item[hidden] { display: none; }

.shot {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--white);
  padding: 9px 9px 0;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  box-shadow: var(--sh-1);
  cursor: zoom-in;
  transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.shot:hover { transform: translateY(-6px); box-shadow: var(--sh-3); }
.shot-media { position: relative; overflow: hidden; background: var(--paper-3); }
.shot-media img { width: 100%; transition: transform .6s var(--ease); }
.shot:hover .shot-media img { transform: scale(1.035); }

.shot-zoom {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(16, 22, 29, .62);
  color: #fff;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .26s var(--ease), transform .26s var(--ease);
}
.shot-zoom .ic { width: 1rem; height: 1rem; }
.shot:hover .shot-zoom { opacity: 1; transform: scale(1); }

.shot-cap {
  padding: .85rem .25rem .95rem;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--slate);
}
.shot-tag {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .77rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: .2rem;
}

/* Note explaining what the archive is and is not. */
.archive-note {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2.2rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r);
  font-size: .98rem;
  color: var(--slate);
}
.archive-note strong { color: var(--ink); }

/* Horizontal filmstrip used on the home page. */
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 1fr);
  gap: clamp(.9rem, 2vw, 1.5rem);
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.strip > * { scroll-snap-align: start; }
.strip::-webkit-scrollbar { height: 6px; }
.strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }

/* ------------------------------------------------------------- lightbox -- */

/* `display` here would otherwise beat the UA stylesheet's [hidden] rule, so
   the dialog must be explicitly re-hidden. Same for the mobile drawer. */
.lightbox[hidden], .drawer[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(10, 14, 19, .93);
  backdrop-filter: blur(6px);
  animation: fade .24s var(--ease);
}
@keyframes fade { from { opacity: 0; } }

.lb-figure { margin: 0; max-width: min(880px, 100%); animation: fade-up .3s var(--ease); }
.lb-print { background: #fff; padding: 12px; border-radius: 2px; box-shadow: var(--sh-3); }
.lb-print img { width: 100%; max-height: 74vh; object-fit: contain; }
.lb-figure figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  margin-top: 1rem;
  color: rgba(255, 255, 255, .82);
  font-size: .97rem;
}
.lb-count {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .5);
  flex: none;
}

.lb-close, .lb-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.lb-close:hover, .lb-nav:hover { background: rgba(255, 255, 255, .22); }
.lb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lb-prev { left: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(.5rem, 2.5vw, 2rem); top: 50%; transform: translateY(-50%); }
.lb-prev:hover { transform: translateY(-50%) scale(1.06); }
.lb-next:hover { transform: translateY(-50%) scale(1.06); }

body.lb-open { overflow: hidden; }

/* ------------------------------------------------------------------ cta -- */

.cta {
  position: relative;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
  background: linear-gradient(115deg, var(--blue-ink) 0%, var(--ink) 58%);
  color: #fff;
  overflow: hidden;
}
.cta-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta h2 { color: #fff; margin-bottom: .35rem; max-width: 20ch; }
.cta p { color: rgba(255, 255, 255, .78); margin: 0; max-width: 46ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* -------------------------------------------------------------- contact -- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.field { margin-bottom: 1.15rem; }
.field label {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: .4rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink-2);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: .82rem 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 152px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 153, 221, .16);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
.form-note { font-size: .88rem; color: var(--muted); margin-top: .9rem; }

.office {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-bottom: 1.15rem;
}
.office h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.office-line {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  color: var(--slate);
  margin-bottom: .55rem;
  font-size: 1rem;
}
.office-line:last-child { margin-bottom: 0; }
.office-line .ic { color: var(--blue); margin-top: .22rem; }

/* --------------------------------------------------------------- footer -- */

.site-foot {
  background: var(--ink);
  color: #94a1ad;
  padding: clamp(3rem, 6vw, 4.5rem) 0 1.6rem;
  font-size: .96rem;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.4fr 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
.foot-brand img {
  width: 178px;
  height: auto;
  margin-bottom: 1rem;
}
.foot-tag {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: .04em;
  color: #fff;
  margin-bottom: .6rem;
}
.foot-note { color: #7d8a96; font-size: .93rem; }

.foot-col h3 {
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 1rem;
}
.foot-col h3.mt { margin-top: 1.5rem; }
.foot-col a { display: block; color: #94a1ad; padding: .2rem 0; transition: color .2s var(--ease); }
.foot-col a:hover { color: var(--green); }
.foot-col p { color: #94a1ad; margin-bottom: .5rem; line-height: 1.6; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-dark);
  font-size: .89rem;
  color: #6d7a86;
}
.foot-bar p { margin: 0; }

/* --------------------------------------------------------------- motion -- */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* Reveals are opt-in, gated on the `js` class that the inline snippet in
   <head> sets. Without JavaScript the rule never applies and every section is
   simply visible -- content is never hidden behind a script that might not
   run. */
.js .reveal { opacity: 0; transform: translateY(22px); }
.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.d1.in { transition-delay: .08s; }
.js .reveal.d2.in { transition-delay: .16s; }
.js .reveal.d3.in { transition-delay: .24s; }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 1040px) {
  .archive { columns: 2; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .nav, .head-cta { display: none; }
  .burger { display: flex; }
  .intro-grid, .contact-grid { grid-template-columns: 1fr; }
  .intro-prints { max-width: 460px; margin-inline: auto; padding-bottom: 12%; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 620px) {
  :root { --head-h: 66px; }
  .archive { columns: 1; }
  .hero { min-height: auto; }
  /* Three short columns still fit at 375px, and keeping them side by side
     reads better than three centred rows stacked under a left-aligned
     headline. */
  .hero-stats { border-top: 0; }
  .hero-stat { padding: 1.1rem .4rem .3rem; }
  /* "ESTABLISHED" is one word and cannot wrap; at the default tracking it
     overruns a 113px column. */
  .hero-stat span { font-size: .76rem; letter-spacing: .07em; }
  .field-row { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .lb-prev { left: .4rem; }
  .lb-next { right: .4rem; }
  .lb-close { width: 42px; height: 42px; }
  .scroll-hint { display: none; }
}

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

@media print {
  .site-head, .drawer, .cta, .lightbox, .scroll-hint, .head-cta { display: none !important; }
  body { background: #fff; }
  .hero { min-height: auto; background: #fff; color: #000; }
  .hero-media { display: none; }
  .hero h1, .hero .lead { color: #000; text-shadow: none; }
}