/* AIK Renovations. Layout concept: a monochrome construction brand. Light, wide-set uppercase
   headlines, hard edges, black bands alternating with warm paper sections, one consistent grid. */
:root {
  --black: #0B0B0C;
  --black-2: #161618;
  --white: #FFFFFF;
  --paper: #F6F5F2;
  --paper-2: #ECEAE5;
  --ink: #0B0B0C;
  --ink-2: #3A3A3F;
  --muted: #626268;
  --muted-dk: #A3A3A9;
  --soft-dk: #8C8C93;          /* second tone in headlines on black */
  --line: rgba(11, 11, 12, .12);
  --line-strong: rgba(11, 11, 12, .85);
  --line-dk: rgba(255, 255, 255, .14);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.075rem;
  --fs-h3: clamp(1.02rem, .95rem + .3vw, 1.2rem);
  --fs-h2: clamp(1.7rem, 1.25rem + 1.7vw, 2.75rem);
  --fs-h1: clamp(2.4rem, 1.2rem + 4.8vw, 5.75rem);

  --gutter: clamp(20px, 4vw, 96px);
  --maxw: none;
  --sec: clamp(4rem, 2.75rem + 4.5vw, 7rem);
  --head-gap: clamp(2.25rem, 4vw, 3.5rem);
  --header-h: 76px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: var(--fs-base); font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--ink); color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 10px; z-index: 60; background: var(--white); color: var(--black); padding: .6rem .9rem; font-weight: 500; }
.skip:focus { left: 16px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75rem;
  font: 500 var(--fs-xs)/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }
.dark .eyebrow { color: var(--muted-dk); }
.h1 {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-h1); line-height: 1; letter-spacing: -.005em; text-wrap: balance; overflow-wrap: break-word;
}
.h2 {
  font-family: var(--f-display); font-stretch: 100%; font-weight: 400; text-transform: uppercase;
  font-size: var(--fs-h2); line-height: 1.06; letter-spacing: .005em; text-wrap: balance; overflow-wrap: break-word;
}
.h3 { font-family: var(--f-display); font-stretch: 100%; font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; text-transform: uppercase; letter-spacing: .06em; }
.soft { color: var(--soft-dk); }
.paper .soft, .paper-2 .soft { color: var(--muted); }
.lede { font-size: var(--fs-md); font-weight: 300; line-height: 1.7; color: var(--ink-2); max-width: 40em; }
.dark .lede { color: var(--muted-dk); }
.muted { color: var(--muted); }
.dark .muted { color: var(--muted-dk); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  font: 500 .82rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase;
  padding: 1.15em 1.7em; border: 1px solid transparent; border-radius: 0; cursor: pointer; text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.btn .arr { transition: transform .2s; }
.btn:hover .arr { transform: translateX(4px); }
.btn-white { background: var(--white); color: var(--black); border-color: var(--white); }
.btn-white:hover { background: transparent; color: var(--white); }
.btn-black { background: var(--black); color: var(--white); border-color: var(--black); }
.btn-black:hover { background: transparent; color: var(--black); }
.btn-line { border-color: rgba(255, 255, 255, .5); color: var(--white); background: transparent; }
.btn-line:hover { border-color: var(--white); background: var(--white); color: var(--black); }
.btn-line-ink { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-line-ink:hover { background: var(--ink); color: var(--white); }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.textlink {
  display: inline-flex; align-items: center; gap: .6em; text-decoration: none; white-space: nowrap;
  font: 500 .8rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase;
  padding-bottom: .5rem; border-bottom: 1px solid currentColor;
}
.textlink .arr { transition: transform .2s; }
.textlink:hover .arr { transform: translateX(4px); }

/* ---------- top bar + header ---------- */
.topbar { background: var(--black); color: var(--muted-dk); font-size: .82rem; font-weight: 300; letter-spacing: .02em; border-bottom: 1px solid var(--line-dk); }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 40px; }
.topbar-list { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.topbar a { text-decoration: none; }
.topbar a:hover { color: var(--white); }
.topbar-social { display: flex; gap: 1.5rem; }
@media (max-width: 900px) { .topbar-social, .topbar .hide-sm { display: none; } .topbar-inner { justify-content: center; } }

.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--black); color: var(--white); border-bottom: 1px solid var(--line-dk); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 1rem; text-decoration: none; color: var(--white); }
.brand-logo { height: 40px; width: auto; display: block; }
.brand-sub { font: 400 .7rem/1 var(--f-body); letter-spacing: .36em; text-transform: uppercase; color: #fff; padding-left: 1rem; border-left: 1px solid #fff; }
.site-nav { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }
.site-nav a:not(.btn) {
  position: relative; text-decoration: none; color: var(--white);
  font: 400 .8rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; padding-block: .7rem;
  transition: color .3s ease;
}
.site-nav a:not(.btn):hover { color: var(--muted-dk); }
.site-nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--muted-dk);
  transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
/* one underline at a time: it marks the page you're on, and moves to whichever section you point at */
.site-nav a[aria-current="page"]:not(.btn)::after, .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
.site-nav:has(a:not(.btn):not([aria-current="page"]):hover) a[aria-current="page"]:not(.btn)::after { transform: scaleX(0); transform-origin: right; }
.site-nav .btn { padding: 1em 1.4em; font-size: .78rem; }
.nav-toggle {
  display: none; width: 44px; height: 44px; margin-right: -12px; background: transparent; border: 0; color: var(--white);
  cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px;
}
.nav-toggle span:not(.sr-only) { display: block; width: 20px; height: 1px; background: currentColor; transition: transform .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .brand-logo { height: 34px; }
  .nav-toggle { display: inline-flex; }
  /* full-screen menu: a sheet of dark glass over the page (.menu-backdrop), large type, details at the foot */
  .menu-backdrop {
    display: block; position: fixed; inset: -80px -40px; z-index: 39;
    background: rgba(11, 11, 12, .84);
    -webkit-backdrop-filter: blur(14px) saturate(115%); backdrop-filter: blur(14px) saturate(115%);
    opacity: 0; visibility: hidden; transition: opacity .45s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .45s;
  }
  .menu-open .menu-backdrop { opacity: 1; visibility: visible; transition: opacity .45s cubic-bezier(.4, 0, .2, 1), visibility 0s; }
  /* the header turns to glass with the rest of the screen; the strip it sits on goes black so it reads as one sheet */
  body.menu-open { background-color: var(--black); }
  .menu-open .site-header { background: transparent; border-bottom-color: transparent; }
  .site-nav {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + clamp(2.5rem, 9vh, 5rem)) var(--gutter) calc(2.25rem + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; pointer-events: none; transition: visibility 0s linear .45s;
  }
  .menu-open .site-nav { visibility: visible; pointer-events: auto; transition: visibility 0s; }
  .site-header .site-nav > a, .site-header .nav-row > a {
    display: block; margin: 0; padding: 1rem 0; background: none; border: 0; border-bottom: 1px solid var(--line-dk);
    font: 300 clamp(1.05rem, 4.2vw, 1.3rem)/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; text-align: left; color: var(--white);
    transition: color .2s ease;
  }
  .site-header .site-nav > * { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .site-header .site-nav > :first-child { border-top: 1px solid var(--line-dk); }
  .site-nav a:not(.btn)::after { display: none; }
  .site-header .site-nav a[aria-current="page"], .site-header .site-nav a:active { color: var(--muted-dk); }
  .menu-open .site-header .site-nav > * { opacity: 1; transform: none; }
  .menu-open .site-header .site-nav > :nth-child(1) { transition-delay: .08s; }
  .menu-open .site-header .site-nav > :nth-child(2) { transition-delay: .12s; }
  .menu-open .site-header .site-nav > :nth-child(3) { transition-delay: .16s; }
  .menu-open .site-header .site-nav > :nth-child(4) { transition-delay: .2s; }
  .menu-open .site-header .site-nav > :nth-child(5) { transition-delay: .24s; }
  /* Portfolio row with its category list */
  .nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line-dk); }
  .site-header .nav-row > a { flex: 1; border-bottom: 0; }
  .nav-sub-toggle { position: relative; flex: none; width: 44px; height: 44px; margin-right: -12px; padding: 0; background: none; border: 0; color: var(--white); cursor: pointer; }
  .nav-sub-toggle::before, .nav-sub-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; margin: 0 0 0 -7px; background: currentColor; transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
  .nav-sub-toggle::after { transform: rotate(90deg); }
  .nav-sub-toggle[aria-expanded="true"]::after { transform: rotate(0deg); }
  .nav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1), opacity .45s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
  .nav-sub.open { grid-template-rows: 1fr; }
  .nav-sub > div { overflow: hidden; display: grid; }
  .nav-sub.open > div { border-bottom: 1px solid var(--line-dk); padding-block: .35rem .7rem; }
  .site-header .nav-sub a { position: relative; display: block; padding: .55rem 0 .55rem 1.1rem; font: 300 .82rem/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--white);
    opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1), color .2s ease; }
  /* categories fade and rise in one after another, the same way the menu items do */
  .nav-sub.open a { opacity: 1; transform: none; }
  .nav-sub a:nth-child(2) { --k: 1; } .nav-sub a:nth-child(3) { --k: 2; } .nav-sub a:nth-child(4) { --k: 3; }
  .nav-sub a:nth-child(5) { --k: 4; } .nav-sub a:nth-child(6) { --k: 5; } .nav-sub a:nth-child(7) { --k: 6; }
  .nav-sub.open a { transition-delay: calc(var(--late, 0s) + .06s + var(--k, 0) * .045s); }
  .nav-sub.late { --late: .2s; }            /* opening together with the menu: start after Portfolio has appeared */
  .nav-sub.instant { transition: none; }    /* height snaps, links still fade */
  .nav-sub.reset a { transition: none !important; }
  /* the category you're in turns grey, like the current page above it, with a short marker */
  .site-header .nav-sub a[aria-current="page"] { color: var(--muted-dk); }
  .site-header .nav-sub a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; }
  .nav-extra {
    display: grid; justify-items: start; gap: .5rem; margin-top: auto; padding-top: 2.5rem;
    opacity: 0; transition: opacity .4s ease;
  }
  .menu-open .nav-extra { opacity: 1; transition: opacity .5s ease .38s; }
  .site-header .nav-extra a { font: 300 .95rem/1.5 var(--f-body); letter-spacing: .01em; text-transform: none; color: var(--muted-dk); padding: 0; }
  .nav-social { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; margin-top: .9rem; }
  .site-header .nav-social a { font: 400 .72rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; padding-block: .35rem; }
  .nav-toggle span:not(.sr-only) { transition: transform .35s cubic-bezier(.4, 0, .2, 1); }
}
@media (min-width: 901px) { .nav-extra, .menu-backdrop, .nav-sub-toggle, .nav-sub { display: none; } .nav-row { display: contents; } }
@media (max-width: 900px) and (max-height: 560px) { .site-nav { padding-top: calc(var(--header-h) + 1.5rem); } .site-header .site-nav > a { font-size: 1.6rem; padding-block: .8rem; } }
@media (max-width: 420px) { .brand-sub { display: none; } }

/* ---------- sections ---------- */
.dark { background: var(--black); color: var(--white); }
.paper { background: var(--paper); color: var(--ink); }
.paper-2 { background: var(--paper-2); color: var(--ink); }
.sec { padding-block: var(--sec); }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.25rem 3rem; margin-bottom: var(--head-gap); }
.sec-head > div { display: grid; gap: 1.1rem; min-width: 0; max-width: 46rem; }

/* ---------- home hero ---------- */
.hero { padding-top: clamp(3rem, 7vw, 6rem); }
.hero-inner { display: grid; gap: 1.5rem; }
.hero-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end;
  margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-bottom: clamp(2.75rem, 5vw, 4rem);
}
.hero-row .lede { max-width: 36em; }
@media (max-width: 820px) { .hero-row { grid-template-columns: minmax(0, 1fr); } }
.pano { position: relative; background: var(--black-2); }
.pano img { width: 100%; height: clamp(280px, 34vw, 560px); object-fit: cover; object-position: 45% 60%; }
.facts { border-top: 1px solid var(--line-dk); }
.facts-grid { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); }
.fact { padding: clamp(1.75rem, 3vw, 2.5rem) 1.75rem clamp(2rem, 3vw, 2.75rem); display: grid; gap: .55rem; align-content: start; }
.fact:first-child { padding-left: 0; }
.fact + .fact { border-left: 1px solid var(--line-dk); }
.fact-v { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.7rem, 1.35rem + 1.1vw, 2.35rem); line-height: 1; text-transform: uppercase; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.fact-l { color: var(--muted-dk); font-size: var(--fs-sm); font-weight: 300; max-width: 34ch; }
@media (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(3) { padding-left: 0; border-left: 0; }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line-dk); }
}
@media (max-width: 420px) { .fact { padding-inline: 1rem 0; } .fact:first-child, .fact:nth-child(3) { padding-left: 0; } .fact:nth-child(odd) { padding-right: 1rem; } }

/* ---------- statement (eyebrow row, then heading | text on one top line) ---------- */
.statement { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: start; margin-top: 1.5rem; }
.statement > * { min-width: 0; }
.statement-body { display: grid; gap: 1.4rem; }
.statement-body .big { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem); line-height: 1.45; letter-spacing: 0; text-wrap: pretty; }
.statement-body p:not(.big) { color: var(--ink-2); font-weight: 300; max-width: 62ch; }
@media (max-width: 860px) { .statement { grid-template-columns: minmax(0, 1fr); } }

/* ---------- service cards ---------- */
.cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.card {
  position: relative; display: grid; gap: .9rem; align-content: start; padding-top: 1.6rem; border-top: 1px solid var(--line-strong);
  text-decoration: none; color: inherit;
}
.card::before { content: ""; position: absolute; top: -1px; left: 0; width: 0; height: 2px; background: currentColor; transition: width .35s ease; }
a.card:hover::before, .card:focus-visible::before { width: 100%; }
.card p { color: var(--ink-2); font-weight: 300; }
.card .kicker { font: 500 var(--fs-xs)/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .cards3 { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; } }

.trades { list-style: none; margin: clamp(3rem, 6vw, 4.5rem) 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .4rem 0; }
.trades li { font-family: var(--f-display); font-weight: 300; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(.95rem, .88rem + .35vw, 1.2rem); line-height: 1.4; color: var(--ink-2); }
.trades li:not(:last-child)::after { content: "/"; color: var(--muted); margin-inline: .7em; }

/* ---------- sector index ---------- */
.sectors { border-top: 1px solid var(--line-dk); }
.sector {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 1.5rem; gap: 1rem 2rem; align-items: center;
  padding-block: clamp(1.3rem, 2.4vw, 1.8rem); border-bottom: 1px solid var(--line-dk); text-decoration: none; color: var(--white);
}
.sector-name { font-family: var(--f-display); font-weight: 300; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2.1rem); line-height: 1.05; transition: color .2s; overflow-wrap: break-word; min-width: 0; }
.sector-list { color: var(--muted-dk); font-size: var(--fs-sm); font-weight: 300; }
.sector-n { font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dk); text-align: right; font-variant-numeric: tabular-nums; }
.sector-arr { color: var(--white); font-size: 1.15rem; transition: transform .2s; justify-self: end; }
.sector:hover .sector-name { color: var(--muted-dk); }
.sector:hover .sector-arr { transform: translateX(5px); }
@media (max-width: 860px) {
  .sector { grid-template-columns: minmax(0, 1fr) auto; gap: .55rem 1rem; }
  .sector-list { grid-column: 1 / -1; grid-row: 2; }
  .sector-arr { grid-column: 2; grid-row: 1; }
}

/* ---------- quotes ---------- */
.quote-feature { display: grid; gap: 1.25rem; max-width: 60rem; }
.quote-mark { font-family: var(--f-display); font-weight: 200; font-size: clamp(3.5rem, 3rem + 2vw, 5rem); line-height: .6; color: var(--muted); height: .45em; }
.quote-feature blockquote { margin: 0; }
.quote-feature blockquote p { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.3rem, 1.05rem + .95vw, 1.95rem); line-height: 1.3; letter-spacing: -.005em; text-wrap: balance; }
.cite { display: grid; gap: .25rem; font-size: var(--fs-sm); }
.cite strong { font-weight: 500; letter-spacing: .02em; }
.cite span { color: var(--muted); font-weight: 300; }
.dark .cite span { color: var(--muted-dk); }
.quotes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line-dk); border: 1px solid var(--line-dk); }
.quotes-grid figure { margin: 0; background: var(--black); padding: clamp(1.5rem, 3vw, 2.25rem); display: grid; gap: 1.5rem; align-content: space-between; }
.quotes-grid blockquote { margin: 0; font-size: 1rem; font-weight: 300; line-height: 1.6; }
.quotes-grid blockquote::before { content: "\201C"; display: block; font-family: var(--f-display); font-weight: 200; font-size: 2.75rem; line-height: .7; color: var(--soft-dk); margin-bottom: .6rem; }
@media (max-width: 960px) { .quotes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .quotes-grid { grid-template-columns: minmax(0, 1fr); } }
.quote-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(2rem, 6vw, 6rem); margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.quote-row figure { margin: 0; display: grid; gap: 1rem; align-content: start; }
.quote-row blockquote { margin: 0; font-size: 1rem; font-weight: 300; line-height: 1.6; color: var(--ink-2); }
@media (max-width: 700px) { .quote-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- clients ---------- */
.clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2rem; border-top: 1px solid var(--line); }
.clients li { padding-block: 1.2rem; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 400; font-size: .92rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
@media (max-width: 900px) { .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.client-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem); }
.client-cols section { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.client-cols h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line-strong); }
.client-cols h3 span { font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .14em; color: var(--muted); }
.client-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: var(--fs-sm); font-weight: 300; color: var(--ink-2); }
.client-cols .wide { grid-column: span 2; }
.client-cols .wide ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 3.5rem); }
@media (max-width: 960px) { .client-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .client-cols { grid-template-columns: minmax(0, 1fr); } .client-cols .wide { grid-column: auto; } }

/* ---------- CTA ---------- */
.cta { background: var(--white); color: var(--ink); border-top: 1px solid var(--line); }
.cta-inner { padding-block: clamp(3.5rem, 7vw, 5.5rem); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 6vw, 6rem); align-items: end; }
.cta-inner > div { display: grid; gap: 1.2rem; min-width: 0; }
.cta-side { justify-items: start; }
.cta-side p { font-weight: 300; color: var(--ink-2); max-width: 36ch; }
.cta-phone { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.35rem, 1.15rem + .7vw, 1.8rem); letter-spacing: .02em; line-height: 1; }
@media (max-width: 820px) { .cta-inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- footer ---------- */
.site-footer { background: var(--black); color: var(--muted-dk); font-size: var(--fs-sm); font-weight: 300; padding-block: clamp(2.75rem, 5vw, 3.75rem) 1.5rem; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: 2.5rem; align-items: start; }
.footer-grid > * { min-width: 0; }
.footer-brand { display: grid; gap: 1.25rem; align-content: start; justify-items: start; }
.footer-brand .brand-logo { height: 40px; }
.footer-brand p { max-width: 36ch; }
.flabel { font: 500 var(--fs-xs)/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--white); margin-bottom: 1.1rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer address { font-style: normal; display: grid; gap: .6rem; overflow-wrap: anywhere; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; margin-top: clamp(2rem, 4vw, 2.75rem); padding-top: 1.25rem; border-top: 1px solid var(--line-dk); font-size: var(--fs-xs); letter-spacing: .08em; }
@media (max-width: 860px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) {
  .footer-grid > :nth-child(2) { order: 1; } .footer-grid > :nth-child(4) { order: 2; }
  .footer-grid > :nth-child(3) { order: 3; grid-column: 1 / -1; }
  .footer-base { flex-direction: column; gap: .5rem; }
}

/* ---------- inner page hero ---------- */
.page-hero { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(3rem, 5.5vw, 4.5rem); }
.page-hero .wrap { display: grid; gap: 1.5rem; }
.page-hero .h1 { font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.5rem); max-width: 26ch; }
.split-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; }
.split-hero > div { display: grid; gap: 1.5rem; min-width: 0; }
.split-hero figure { margin: 0; position: relative; max-width: 100%; }
.split-hero img { width: 100%; aspect-ratio: 6 / 5; object-fit: cover; }
.split-hero figcaption { position: absolute; left: 0; bottom: 0; background: var(--black); color: var(--white); font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; padding: .85rem 1.1rem; }
@media (max-width: 880px) { .split-hero { grid-template-columns: minmax(0, 1fr); } }

/* ---------- about ---------- */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.principles > div { display: grid; gap: .9rem; align-content: start; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.principles p { color: var(--ink-2); font-weight: 300; }
@media (max-width: 860px) { .principles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- expertise ---------- */
.core { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.core > article { background: var(--white); padding: clamp(1.75rem, 3.5vw, 2.5rem); display: grid; gap: 1rem; align-content: start; }
.core .step { font: 500 var(--fs-xs)/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.core p { color: var(--ink-2); font-weight: 300; }
@media (max-width: 860px) { .core { grid-template-columns: minmax(0, 1fr); } }
.trade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 4vw, 3.5rem); }
.trade-grid > div { display: grid; gap: .55rem; align-content: start; padding-block: 1.6rem; border-top: 1px solid var(--line); }
.trade-grid p { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 300; line-height: 1.65; }
@media (max-width: 900px) { .trade-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .trade-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- portfolio ---------- */
/* sector tabs: quiet labels on a hairline, with a thin bar that glides to the active one */
.filters {
  position: relative; display: flex; gap: clamp(1.4rem, 3.2vw, 2.75rem); margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
  box-shadow: inset 0 -1px 0 var(--line); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.filters::-webkit-scrollbar { display: none; }
.filters button {
  flex: none; position: relative; padding: 0 0 1.05rem; margin: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  font: 400 .76rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted);
  transition: color .35s ease;
}
.filters button:hover, .filters button:focus-visible { color: var(--ink); }
.filters button[aria-pressed="true"] { color: var(--ink); }
.filters button:focus-visible { outline: none; }
.filters-bar {
  position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--ink); pointer-events: none;
  transition: transform .55s cubic-bezier(.65, 0, .35, 1), width .55s cubic-bezier(.65, 0, .35, 1);
}
.filters-bar.no-anim { transition: none; }
html:not(.js) .filters button[aria-pressed="true"] { box-shadow: inset 0 -1px 0 var(--ink); }
.pgrid { transition: opacity .32s ease; }
.pgrid.switching { opacity: 0; }
@keyframes tile-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
.pgrid .swap-in { animation: tile-in .85s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--si, 0) * 55ms); }
@media (prefers-reduced-motion: reduce) { .pgrid .swap-in { animation: none; } }
/* inside one sector the tiles show just the location */
.pgrid-sq:not([data-active="all"]) :is(.tile-sector, .tile-sep), .pgrid-sq:not([data-active="all"]) .tile-meta.no-loc { display: none; }
/* tiles never show the location (that's on the project page); "All" and the home page show the category, a chosen category shows just the name */
.tile :is(.tile-sep, .tile-loc) { display: none; }
.pgrid-sq:not([data-active="all"]) .tile-meta { display: none !important; }

/* ---------- contact ---------- */
.contact-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-dk); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.contact-facts > div { padding: 1.5rem 1.5rem 0; display: grid; gap: .6rem; align-content: start; min-width: 0; }
.contact-facts > div:first-child { padding-left: 0; }
.contact-facts > div + div { border-left: 1px solid var(--line-dk); }
.cf-label { font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dk); }
.cf-value { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); letter-spacing: .01em; line-height: 1.3; overflow-wrap: anywhere; }
.copy {
  justify-self: start; font: 400 .74rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer;
  background: transparent; color: var(--white); border: 0; padding: .35rem 0; border-bottom: 1px solid currentColor;
}
@media (max-width: 820px) {
  .contact-facts { grid-template-columns: minmax(0, 1fr); }
  .contact-facts > div { padding: 1.25rem 0; }
  .contact-facts > div + div { border-left: 0; border-top: 1px solid var(--line-dk); }
}
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contact-grid > * { min-width: 0; }
@media (max-width: 920px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }
.form, .done { background: var(--white); border: 1px solid var(--line); padding: clamp(1.5rem, 3.5vw, 2.5rem); display: grid; gap: 1.4rem; }
.done { scroll-margin-top: calc(var(--header-h) + 1.25rem); }
.done:focus { outline: none; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 580px) { .row2 { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: .5rem; min-width: 0; }
.field label { font: 500 .74rem/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.field .opt { color: var(--muted); font-weight: 400; letter-spacing: .08em; }
.form input, .form select, .form textarea {
  font: inherit; font-size: 1rem; font-weight: 300; color: var(--ink); background: var(--paper); width: 100%; min-width: 0;
  border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; padding: .85rem .9rem; transition: background .2s, border-color .2s;
}
.form input::placeholder, .form textarea::placeholder { color: var(--muted); }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; background: var(--white); box-shadow: inset 0 -1px 0 var(--ink); }
.form textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 7px; height: 7px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.form select { -webkit-appearance: none; appearance: none; padding-right: 2.75rem; cursor: pointer; }
.form-foot { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; justify-content: space-between; }
.form-note { font-size: var(--fs-xs); color: var(--muted); max-width: 40ch; }
.summary { margin: 0; border-top: 1px solid var(--line); }
.summary > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: .25rem 1rem; padding-block: .8rem; border-bottom: 1px solid var(--line); }
.summary dt { font: 500 .74rem/1.9 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.summary dd { margin: 0; font-weight: 300; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 500px) { .summary > div { grid-template-columns: minmax(0, 1fr); } }
.note { display: flex; gap: .9rem; align-items: flex-start; font-size: var(--fs-sm); font-weight: 300; color: var(--ink-2); background: var(--paper); padding: 1rem 1.1rem; }
.note b { flex: none; background: var(--black); color: var(--white); font: 500 .7rem/1 var(--f-body); letter-spacing: .18em; padding: .45rem .55rem; margin-top: .15rem; }
.aside { display: grid; gap: 2.5rem; position: sticky; top: calc(var(--header-h) + 2rem); }
.aside section { display: grid; gap: .9rem; padding-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.aside p { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 300; }
.aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.aside ul a { text-decoration: none; font-weight: 400; font-size: var(--fs-sm); letter-spacing: .04em; display: inline-flex; gap: .5rem; }
.aside ul a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 920px) { .aside { position: static; } }

/* ---------- project cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 3.5vw, 2.75rem) clamp(1rem, 2vw, 1.5rem); }
@media (max-width: 960px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .pgrid { grid-template-columns: minmax(0, 1fr); } }
.pcard { display: grid; grid-template-rows: auto 1fr; gap: 1rem; text-decoration: none; color: inherit; min-width: 0; }
.pcard-img { position: relative; overflow: hidden; background: var(--paper-2); aspect-ratio: 4 / 3; max-width: 100%; }
.dark .pcard-img { background: var(--black-2); }
/* slow, soft zoom on hover (declared with the photo fade so neither transition cancels the other) */
.pcard-img img, html.js .pcard-img img.fade {
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); backface-visibility: hidden;
  transition: opacity 1s ease, transform 1.6s cubic-bezier(.22, .61, .36, 1);
}
.pcard:hover .pcard-img img, .pcard:focus-visible .pcard-img img { transform: scale(1.06); }

/* portfolio: square tiles, three across, tight gutters; name opens out from the centre on hover */
.pgrid.pgrid-sq { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1vw, .9rem); }
/* phones: one project per row, photos running edge to edge with a thin gap (like the project pages) */
@media (max-width: 640px) { .pgrid.pgrid-sq { grid-template-columns: minmax(0, 1fr); gap: 6px; margin-inline: calc(var(--gutter) * -1); } }
.tile { display: block; }
.tile .pcard-img { aspect-ratio: 1 / 1; }
.tile-over {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem;
  padding: 1.25rem; text-align: center; color: var(--white); pointer-events: none;
  background: rgba(11, 11, 12, 0); transition: background-color .9s cubic-bezier(.4, 0, .2, 1);
}
.tile-name, .tile-meta {
  display: block; max-width: 100%;
  -webkit-clip-path: inset(0 50% 0 50%); clip-path: inset(0 50% 0 50%); opacity: 0;
  transition: clip-path .85s cubic-bezier(.65, 0, .35, 1), -webkit-clip-path .85s cubic-bezier(.65, 0, .35, 1), opacity .5s ease;
}
.tile-name { font: 300 clamp(1.05rem, .9rem + .5vw, 1.4rem)/1.2 var(--f-display); text-transform: uppercase; letter-spacing: .06em; }
.tile-meta { font: 400 .68rem/1.4 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .78); transition-delay: .12s; }
.tile:hover .tile-over, .tile:focus-visible .tile-over { background: rgba(11, 11, 12, .48); }
.tile:hover :is(.tile-name, .tile-meta), .tile:focus-visible :is(.tile-name, .tile-meta) { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); opacity: 1; }
/* phones and tablets have no hover: keep the name on the photo, bottom left, over a soft shade */
@media (hover: none) {
  .tile-over { place-content: end start; justify-items: start; text-align: left; gap: .35rem; padding: .85rem; background: linear-gradient(to top, rgba(11, 11, 12, .72), rgba(11, 11, 12, 0) 58%); }
  .tile-name, .tile-meta { -webkit-clip-path: none; clip-path: none; opacity: 1; }
  .tile-name { font-size: .85rem; letter-spacing: .05em; }
  .tile-meta { display: none; }
}
.pcard-body { display: grid; gap: .4rem; align-content: start; }
.pcard-sector { font: 400 .72rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.dark .pcard-sector { color: var(--muted-dk); }
.pcard-name { font-family: var(--f-display); font-weight: 400; font-size: 1.02rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .05em; }
.pcard-loc { font-size: var(--fs-sm); font-weight: 300; color: var(--muted); }
.dark .pcard-loc { color: var(--muted-dk); }
.pcard-empty { position: absolute; inset: 0; display: grid; place-items: center; background: var(--black-2); color: var(--muted-dk); font: 400 .72rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; }

/* ---------- project page ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: .6rem; font: 400 .76rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted-dk); }
.crumbs a { text-decoration: none; color: var(--white); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.crumbs span[aria-hidden] { color: var(--soft-dk); }
.proj-hero { padding-block: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.proj-hero .wrap { display: grid; gap: 1.1rem; }
.proj-hero .h1 { font-size: clamp(2rem, 1.2rem + 3vw, 4rem); max-width: 22ch; }
.proj-hero .loc { color: var(--muted-dk); font-size: var(--fs-md); font-weight: 300; }
.cover { background: var(--black); padding-bottom: clamp(2.75rem, 5vw, 4rem); }
.cover button { display: block; width: 100%; padding: 0; border: 0; background: var(--black-2); cursor: zoom-in; }
.cover img { width: 100%; max-height: 74vh; aspect-ratio: 16 / 9; object-fit: cover; }
.proj-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 2rem clamp(2rem, 6vw, 5rem); align-items: start; }
.proj-body > * { min-width: 0; display: grid; gap: 1.4rem; align-content: start; }
.proj-desc .big { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); line-height: 1.5; }
.scope-wrap { display: grid; gap: .8rem; margin-top: .6rem; }
.scope { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.5rem; }
.scope li { position: relative; padding-left: 1.2rem; font-size: var(--fs-sm); font-weight: 300; line-height: 1.45; color: var(--ink-2); }
.scope li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--ink); }
.facts-dl { margin: 0; border-top: 1px solid var(--line-strong); }
.facts-dl > div { display: grid; gap: .35rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }
.facts-dl dt { font: 400 .72rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.facts-dl dd { margin: 0; font-weight: 400; }
@media (max-width: 860px) { .proj-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .scope { grid-template-columns: minmax(0, 1fr); } }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); }
.gallery button { padding: 0; border: 0; background: var(--paper); cursor: zoom-in; aspect-ratio: 4 / 3; overflow: hidden; display: block; width: 100%; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery button:hover img { transform: scale(1.035); }
.gallery.n1 { grid-template-columns: minmax(0, 1fr); }
.gallery.n1 button { aspect-ratio: 16 / 9; }
.gallery.n2, .gallery.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .gallery, .gallery.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pnav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pnav a { display: grid; gap: .6rem; padding-block: clamp(1.75rem, 3.5vw, 2.5rem); text-decoration: none; color: var(--white); min-width: 0; }
.pnav a:first-child { padding-right: 1.5rem; }
.pnav a + a { text-align: right; padding-left: 1.5rem; border-left: 1px solid var(--line-dk); }
.pnav small { font: 400 .74rem/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--muted-dk); }
.pnav strong { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; transition: color .2s; }
.pnav a:hover strong { color: var(--muted-dk); }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(8, 8, 9, .96); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; color: var(--white); }
.lb-top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: calc(env(safe-area-inset-top, 0px) + 1rem) var(--gutter) 1rem; font: 400 .78rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; }
.lb-stage { display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-bar { display: flex; justify-content: center; gap: .75rem; padding: 1rem var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 1.25rem); }
.lb-btn { font: 400 .78rem/1 var(--f-body); letter-spacing: .2em; text-transform: uppercase; background: transparent; color: var(--white); border: 1px solid var(--line-dk); padding: .9rem 1.2rem; cursor: pointer; }
.lb-btn:hover { border-color: var(--white); }
body.lb-open { overflow: hidden; }

/* ---------- home slideshow ---------- */
.slides { position: relative; height: clamp(300px, 42vw, 660px); overflow: hidden; background: var(--black-2); }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.6s ease; }
.slide.is-active { opacity: 1; z-index: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 8s linear; }
.slide.is-active img { transform: scale(1); }
.slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8, 8, 9, .6), rgba(8, 8, 9, 0) 45%); pointer-events: none; }
.slide figcaption { position: absolute; z-index: 2; left: var(--gutter); bottom: clamp(1.25rem, 3vw, 2.25rem); }
.slide figcaption a { display: grid; gap: .45rem; text-decoration: none; color: var(--white); }
.slide-sector { font: 400 .72rem/1 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.slide-name { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.05rem, .95rem + .5vw, 1.4rem); letter-spacing: .06em; text-transform: uppercase; }
.slide-name .arr { transition: transform .2s; display: inline-block; }
.slide figcaption a:hover .arr { transform: translateX(4px); }
.slides-ui { position: absolute; z-index: 3; right: var(--gutter); bottom: clamp(1.4rem, 3vw, 2.4rem); display: flex; align-items: center; gap: 1rem; color: rgba(255, 255, 255, .72); font: 300 .78rem/1 var(--f-body); letter-spacing: .18em; font-variant-numeric: tabular-nums; }
.slides-count b { font-weight: 400; color: var(--white); }
.slides-bar { width: clamp(60px, 10vw, 140px); height: 1px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.slides-bar i { display: block; height: 100%; width: 100%; background: var(--white); transform-origin: left; transform: scaleX(0); }
.slides.playing .slides-bar i { animation: slidebar var(--slide-ms, 6000ms) linear forwards; }
@keyframes slidebar { to { transform: scaleX(1); } }

/* ---------- project page ---------- */
.proj-title { display: grid; gap: 1.1rem; align-content: end; }
.cover-wrap { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.cover { margin: 0; }
.cover-img { width: 100%; max-height: 82vh; object-fit: cover; }
.cover-img.native { width: auto; max-width: 100%; margin-inline: auto; }
.proj-hero.split { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.proj-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: end; }
.cover.portrait img { width: 100%; max-height: 78vh; object-fit: cover; }
@media (max-width: 860px) { .proj-split { grid-template-columns: minmax(0, 1fr); } }
.proj-info { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.photo-seq { padding-bottom: var(--sec); }
.seq { display: grid; gap: clamp(.6rem, 1.2vw, 1rem); }
.ph { margin: 0; min-width: 0; flex-basis: 0; }
.ph img { display: block; width: 100%; height: auto; background: var(--paper-2); }
/* photos in a row share one height and together fill the page width */
.ph-row { display: flex; gap: clamp(.6rem, 1.2vw, 1rem); align-items: flex-start; }
.ph-row.tall img { max-height: 92vh; object-fit: cover; }
@media (max-width: 640px) {
  .photo-seq .seq { padding-inline: 0; gap: 6px; }
  .ph-row { flex-direction: column; gap: 6px; }
  .ph-row .ph { flex: none !important; width: 100%; }
  .ph-row.tall img { max-height: none; }
}
.pnav a { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.pnav a.next { grid-template-columns: minmax(0, 1fr) 96px; }
.pnav a.next .pnav-img { order: 2; }
.pnav-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--black-2); }
.pnav-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pnav a:hover .pnav-img img { transform: scale(1.06); }
.pnav-text { display: grid; gap: .55rem; min-width: 0; }
@media (max-width: 560px) { .pnav a, .pnav a.next { grid-template-columns: minmax(0, 1fr); } .pnav-img { display: none; } }

/* ---------- motion: whole-page fade, scroll reveal, image fade ---------- */
html { background: var(--black); }
html.js body { opacity: 0; }
html.js body.ready { opacity: 1; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
html.js body.leaving { opacity: 0; transition: opacity .35s ease; }
html.js main { transition: opacity .6s cubic-bezier(.4, 0, .2, 1); }
html.js body.swapping main { opacity: 0; transition-duration: .32s; }
html.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1); transition-delay: var(--d, 0s); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.now { transition: none; }
html.js img.fade { opacity: 0; transition: opacity 1s ease; }
html.js img.fade.loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js body.ready, html.js body.leaving { transition: none; }
  html.js .rv, html.js img.fade { opacity: 1; transform: none; }
  .slide img { transform: none !important; }
}

/* ---------- opening animation (home page, first load) ----------
   slow fade-in of the logo on black, a hold, then a line draws to the header and the logo glides along it */
#intro { display: none; }
html.js.intro body { opacity: 1; }
html.js.intro #intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 200; pointer-events: auto; }
html.js.intro .site-header .brand-logo { opacity: 0; }
#intro.fly { pointer-events: none; }
.intro-bg { position: absolute; inset: 0; background: var(--black); }
#intro.fly .intro-bg { opacity: 0; transition: opacity 1.4s cubic-bezier(.45, 0, .25, 1) .15s; }
.intro-mark { position: relative; display: grid; justify-items: center; gap: 1.35rem; }
.intro-logo {
  width: clamp(150px, 17vw, 230px); height: auto; display: block;
  opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); filter: blur(10px);
  transition: opacity 2.6s cubic-bezier(.33, 0, .2, 1), transform 3.2s cubic-bezier(.2, .65, .15, 1), filter 2.4s cubic-bezier(.33, 0, .2, 1);
  will-change: transform, opacity; backface-visibility: hidden;
}
#intro.show .intro-logo { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: blur(0); }
#intro.fly .intro-logo { transition: transform 1.7s cubic-bezier(.65, 0, .3, 1); }
.intro-rule { width: 56px; height: 1px; background: rgba(255, 255, 255, .35); transform: scaleX(0); transition: transform 1.9s cubic-bezier(.2, .65, .15, 1) 1.1s, opacity .6s ease; }
#intro.show .intro-rule { transform: scaleX(1); }
.intro-sub {
  font: 300 .72rem/1 var(--f-body); text-transform: uppercase; color: var(--muted-dk);
  letter-spacing: .85em; margin-right: -.85em; opacity: 0;
  transition: opacity 1.6s ease 1.3s, letter-spacing 2.2s cubic-bezier(.2, .65, .15, 1) 1.1s, margin-right 2.2s cubic-bezier(.2, .65, .15, 1) 1.1s;
}
#intro.show .intro-sub { opacity: 1; letter-spacing: .5em; margin-right: -.5em; }
#intro.cable .intro-rule, #intro.cable .intro-sub { opacity: 0; transition: opacity .45s ease; }
.intro-cable { position: fixed; left: 0; top: 0; width: 0; height: 1px; transform-origin: 0 50%; pointer-events: none; }
.intro-cable i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .28)); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.5, 0, .2, 1); }
#intro.cable .intro-cable i { transform: scaleX(1); }
#intro.fly .intro-cable i { transform-origin: 100% 50%; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.65, 0, .3, 1); }
@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }

/* ---------- phones and tablets: lead photos run edge to edge and meet the next section directly ---------- */
@media (max-width: 860px) {
  .proj-hero, .proj-hero.split { padding-bottom: 0; }
  .proj-hero .cover-wrap { padding: clamp(1.5rem, 5vw, 2.25rem) 0 0; max-width: none; }
  .proj-hero .cover { padding-bottom: 0; }
  .proj-split > .cover { margin-inline: calc(var(--gutter) * -1); }
  .proj-hero .cover-img, .proj-hero .cover-img.native, .proj-hero .cover.portrait img {
    display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0;
  }
  .proj-hero .cover img { aspect-ratio: 3 / 2; object-fit: cover; }
  .proj-hero .cover.portrait img { aspect-ratio: 4 / 5; max-height: 80vh; object-fit: cover; }
  .page-hero.has-figure { padding-bottom: 0; }
  .page-hero.has-figure .split-hero figure { margin-inline: calc(var(--gutter) * -1); max-width: none; }
  .page-hero.has-figure .split-hero img { display: block; }
}

/* ---------- project pages: the lead photo and every photo row run the full width of the screen ---------- */
.proj-hero:not(.split) { padding-bottom: 0; }
.proj-hero .cover-wrap { max-width: none; padding: clamp(1.75rem, 3vw, 2.75rem) 0 0; }
.proj-hero .cover-img, .proj-hero .cover-img.native { display: block; width: 100%; max-width: none; margin: 0; }
.photo-seq .seq { max-width: none; padding-inline: 0; gap: clamp(6px, .8vw, 12px); }
.photo-seq .ph-row { gap: clamp(6px, .8vw, 12px); }
.photo-seq .ph-row img { max-height: 92vh; object-fit: cover; }
@media (max-width: 640px) { .photo-seq .ph-row img { max-height: none; } }
/* the logo glides to the header on its own; no guide line */
.intro-cable { display: none; }
.cover.pair { display: flex; gap: clamp(6px, .8vw, 12px); }
.cover.pair .cover-half { flex: 1 1 0; min-width: 0; }
.proj-hero .cover.pair img { aspect-ratio: 4 / 5; max-height: 86vh; object-fit: cover; }

/* project pages: the lead photo meets the white section directly, no black band beneath it */
.proj-hero .cover { padding-bottom: 0; background: none; }

/* ---------- home: the best photos fill the whole first screen; the menu floats over them ---------- */
:root { --chrome-h: 117px; }
.hero.hero-full { position: relative; isolation: isolate; padding: 0; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: var(--black); }
.hero-full .slides { position: absolute; inset: 0; height: auto; z-index: 0; }
.hero-full::before, .hero-full::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
.hero-full::before { top: 0; height: 34%; background: linear-gradient(to bottom, rgba(11, 11, 12, .7), rgba(11, 11, 12, 0)); }
.hero-full::after { bottom: 0; height: 72%; background: linear-gradient(to top, rgba(11, 11, 12, .88), rgba(11, 11, 12, .45) 50%, rgba(11, 11, 12, 0)); }
.hero-over { position: absolute; left: 0; right: 0; bottom: clamp(4.25rem, 10vh, 7.5rem); z-index: 2; display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); pointer-events: none; }
.hero-over a { pointer-events: auto; }
.hero-full .hero-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 1.5rem; }
.hero-full .lede { color: rgba(255, 255, 255, .84); max-width: 34em; }
.hero-full .h1 { text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
.hero-full .slides-ui { z-index: 3; bottom: clamp(1.75rem, 4.5vh, 2.75rem); }
.hero-over > .wrap { width: 100%; margin-inline: 0; }
.hero-full .soft { color: rgba(255, 255, 255, .6); }
.hero-full .slide figcaption { display: none; }
.slide-caps { position: absolute; z-index: 3; right: var(--gutter); bottom: calc(clamp(1.75rem, 4.5vh, 2.75rem) + 1.4rem); display: grid; justify-items: end; }
.slide-cap { grid-area: 1 / 1; display: grid; justify-items: end; gap: .45rem; text-align: right; text-decoration: none; color: var(--white);
  opacity: 0; transform: translate3d(0, 8px, 0); pointer-events: none; transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.slide-cap.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .35s; }
.slide-cap .slide-sector { color: rgba(255, 255, 255, .7); }
.slide-cap:hover .arr { transform: translateX(4px); }
@media (max-width: 640px) {
  .slide-caps { display: none; }
  .hero-over { bottom: 3.5rem; }
  .hero-full .actions { width: 100%; }
}
.facts-band .facts { border-top: 0; }

/* header and top bar sit on the photo, then turn solid black once the page scrolls */
body:has(main .hero-full) main { margin-top: calc(var(--chrome-h) * -1); }
body:has(main .hero-full) .topbar { position: relative; z-index: 41; background: transparent; border-bottom-color: rgba(255, 255, 255, .14); }
body:has(main .hero-full) .site-header { background: transparent; border-bottom-color: rgba(255, 255, 255, .14); transition: background-color .45s ease, border-color .45s ease; }
body.scrolled:has(main .hero-full) .site-header { background: var(--black); border-bottom-color: var(--line-dk); }
.hero-full .eyebrow { color: rgba(255, 255, 255, .78); }
.hero-full .eyebrow::before { background: rgba(255, 255, 255, .6); }
@media (max-width: 640px) { .hero-full::after { height: 88%; background: linear-gradient(to top, rgba(11, 11, 12, .9), rgba(11, 11, 12, .55) 55%, rgba(11, 11, 12, 0)); } }

/* ---------- project pages on desktop: the lead photo fills the first screen, title on the photo, menu floating ---------- */
@media (min-width: 861px) {
  .proj-hero.full { position: relative; isolation: isolate; height: 100vh; height: 100svh; min-height: 560px; padding: 0; overflow: hidden; }
  .proj-hero.full .cover-wrap { position: absolute; inset: 0; padding: 0; z-index: 0; display: block; }
  .proj-hero.full .cover, .proj-hero.full .cover .cover-half { height: 100%; margin: 0; }
  .proj-hero.full .cover img, .proj-hero.full .cover.pair img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
  .proj-hero.full::before, .proj-hero.full::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
  .proj-hero.full::before { top: 0; height: 30%; background: linear-gradient(to bottom, rgba(11, 11, 12, .68), rgba(11, 11, 12, 0)); }
  .proj-hero.full::after { bottom: 0; height: 58%; background: linear-gradient(to top, rgba(11, 11, 12, .85), rgba(11, 11, 12, .35) 55%, rgba(11, 11, 12, 0)); }
  .proj-hero.full .proj-title { position: absolute; left: 0; right: 0; bottom: clamp(3rem, 9vh, 6rem); z-index: 2; width: 100%; margin: 0; }
  .proj-hero.full .crumbs { color: rgba(255, 255, 255, .7); }
  .proj-hero.full .loc { color: rgba(255, 255, 255, .82); }
  .proj-hero.full .h1 { text-shadow: 0 1px 24px rgba(0, 0, 0, .25); }
  body:has(main .proj-hero.full) main { margin-top: calc(var(--chrome-h) * -1); }
  body:has(main .proj-hero.full) .topbar { position: relative; z-index: 41; background: transparent; border-bottom-color: rgba(255, 255, 255, .14); }
  body:has(main .proj-hero.full) .site-header { background: transparent; border-bottom-color: rgba(255, 255, 255, .14); transition: background-color .45s ease, border-color .45s ease; }
  body.scrolled:has(main .proj-hero.full) .site-header { background: var(--black); border-bottom-color: var(--line-dk); }
  /* a lead photo too small to fill the screen keeps its own shape under the title, sized to fit in view */
  .proj-hero:not(.full) .cover img { aspect-ratio: auto; height: auto; max-height: calc(100svh - var(--chrome-h) - 300px); object-fit: cover; }
}

/* ---------- portfolio: a compact title band so the first row of projects is fully in view on arrival ---------- */
.page-hero.compact { padding-block: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem); }
.page-hero.compact .compact-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30em); gap: 1rem 3rem; align-items: end; }
.compact-title { display: grid; gap: .9rem; min-width: 0; }
.page-hero.compact .h1 { font-size: clamp(1.9rem, 1rem + 2.4vw, 3.2rem); max-width: none; }
.page-hero.compact .lede { margin: 0; font-size: var(--fs-base); }
.sec.pf-sec { padding-top: clamp(1.25rem, 2.5vw, 2rem); }
.pf-sec .filters { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.pf-sec .filters button { padding-top: .25rem; }
@media (max-width: 860px) { .page-hero.compact .compact-row { grid-template-columns: minmax(0, 1fr); } .page-hero.compact .lede { display: none; } }
/* shorter laptop screens: tighten the band further so the first row still fits */
@media (min-width: 861px) and (max-height: 820px) {
  .page-hero.compact { padding-block: 1.25rem 1.1rem; }
  .page-hero.compact .compact-row { grid-template-columns: minmax(0, 1fr); }
  .page-hero.compact .lede { display: none; }
  .page-hero.compact .h1 { font-size: clamp(1.7rem, 1rem + 1.8vw, 2.4rem); }
  .compact-title { gap: .6rem; }
  .sec.pf-sec { padding-top: 1rem; }
  .pf-sec .filters { margin-bottom: .9rem; }
  .pf-sec .filters button { padding-bottom: .8rem; }
}

/* phones: one project per row, with room for the name and its details on the photo */
@media (max-width: 640px) and (hover: none) {
  .tile-over { padding: 1.1rem 1.15rem; gap: .45rem; }
  .tile-name { font-size: 1.05rem; }
  .tile-meta { display: block; }
}
@media (max-width: 640px) {
  .tile .tile-name { font-size: 1.05rem; }
}
/* the "Renovations" label beside the logo fades in once the opening logo has landed */
.site-header .brand-sub { transition: opacity .6s ease .1s; }
html.js.intro .site-header .brand-sub { opacity: 0; }

/* contact form: hidden spam trap, sending state, sent / fallback messages */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form.sending { opacity: .55; pointer-events: none; transition: opacity .3s ease; }
.done-sent { font-size: var(--fs-md); font-weight: 300; color: var(--ink-2); max-width: 42ch; }
.done-fallback { display: grid; gap: 1.25rem; }

/* ---------- portfolio categories on phones: one quiet line that opens into an editorial list ---------- */
.filters-toggle { display: none; }
@media (min-width: 701px) { .filters-panel { display: block; } }
@media (max-width: 700px) {
  .filter-wrap { margin-bottom: 1.25rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
  .filters-toggle {
    display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.05rem 0; margin: 0;
    background: none; border: 0; color: var(--ink); cursor: pointer; text-align: left;
  }
  .ft-label { font: 400 .68rem/1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
  .ft-current { flex: 1; font: 300 1.1rem/1 var(--f-display); letter-spacing: .1em; text-transform: uppercase; transition: opacity .3s ease; }
  .ft-icon { position: relative; flex: none; width: 14px; height: 14px; }
  .ft-icon::before, .ft-icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 1px; background: var(--ink); transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
  .ft-icon::after { transform: rotate(90deg); }
  .filters-toggle[aria-expanded="true"] .ft-icon::after { transform: rotate(0deg); }
  .filters-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.4, 0, .2, 1); }
  .filters-panel.open { grid-template-rows: 1fr; }
  .pf-sec .filters-panel > .filters {
    display: block; overflow: hidden; min-height: 0; margin: 0; padding: 0; box-shadow: none; border: 0;
    -webkit-mask-image: none; mask-image: none;
  }
  .pf-sec .filters-panel .filters button {
    position: relative; display: block; width: 100%; margin: 0; padding: .8rem 0 .8rem 1.2rem; text-align: left;
    border-top: 1px solid var(--line); background: none;
    font: 300 1rem/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-decoration: none;
    opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity .4s ease, transform .55s cubic-bezier(.2, .7, .2, 1), color .25s ease;
  }
  .pf-sec .filters-panel .filters button:last-of-type { margin-bottom: .4rem; }
  .pf-sec .filters-panel .filters button[aria-pressed="true"] { color: var(--ink); }
  .pf-sec .filters-panel .filters button[aria-pressed="true"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: currentColor; }
  .filters-panel.open .filters button { opacity: 1 !important; transform: none !important; transition-delay: calc(.06s + var(--k, 0) * .045s); }
  .filters button:nth-of-type(2) { --k: 1; } .filters button:nth-of-type(3) { --k: 2; } .filters button:nth-of-type(4) { --k: 3; }
  .filters button:nth-of-type(5) { --k: 4; } .filters button:nth-of-type(6) { --k: 5; } .filters button:nth-of-type(7) { --k: 6; }
  .filters-bar { display: none; }
}

/* ---------- portfolio: three equal squares across, running to both edges of the page, thin gaps ---------- */
.pgrid.pgrid-sq.pgrid-edge { gap: 6px; margin-inline: calc(var(--gutter) * -1); }

/* projects without a write-up: the scope sits level with the Details column */
.proj-desc > .scope-wrap:first-child { margin-top: 0; }

/* ---------- office address, licence line, privacy link ---------- */
.site-footer address a { color: inherit; text-decoration: none; transition: color .2s; }
.site-footer address a:hover { color: var(--white); }
.footer-base a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-dk); transition: color .2s, border-color .2s; }
.footer-base a:hover { color: var(--white); border-color: var(--muted-dk); }
@media (min-width: 1101px) { .contact-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) and (min-width: 821px) {
  .contact-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .contact-facts > div:nth-child(n+3) { padding-top: 1.5rem; }
}
a.cf-value { color: inherit; text-decoration: none; transition: color .2s; }
a.cf-value:hover { color: var(--muted-dk); }
.form-note a { color: inherit; }

/* ---------- Expertise: detail photos under the opening, edge to edge ---------- */
.craft-sec { background: var(--black); padding-bottom: 6px; }
.pgrid.pgrid-sq.craft { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.craft .tile .pcard-img { aspect-ratio: 4 / 5; }
@media (max-width: 640px) {
  .pgrid.pgrid-sq.craft { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft .tile-name { font-size: .95rem; }
  .craft .tile-meta { display: none !important; }
}

/* ---------- About: long client lists fold away on phones ---------- */
.client-more { display: none; }
@media (max-width: 620px) {
  .client-cols li.more { display: none; }
  .client-cols section.open li.more { display: list-item; animation: tile-in .5s ease both; }
  .client-more { display: inline-block; justify-self: start; background: none; border: 0; border-bottom: 1px solid var(--line-strong);
    padding: .2rem 0; font: 400 var(--fs-xs)/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); cursor: pointer; }
}

/* ---------- Privacy page ---------- */
.legal { max-width: 72ch; display: grid; gap: .9rem; }
.legal h2 { margin-top: 1.4rem; }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-2); font-weight: 300; line-height: 1.7; }
.legal a { color: inherit; }
.wrap.legal { max-width: none; }
.legal > * { max-width: 72ch; }
/* the strip under the home photo holds words, not numbers: keep each on one line */
.facts-band .fact-v { font-size: clamp(1.15rem, .8rem + 1.15vw, 1.9rem); white-space: nowrap; }
@media (min-width: 1101px) { .contact-facts .cf-value { font-size: clamp(1rem, .85rem + .45vw, 1.25rem); } }

.slide picture { display: block; width: 100%; height: 100%; }
/* scope of work: two columns sized to their words, sitting close together rather than spread across the page */
.scope { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: start; column-gap: clamp(1.75rem, 3vw, 2.75rem); }
@media (max-width: 520px) { .scope { grid-template-columns: minmax(0, 1fr); } }
/* page changes fade through black (like the first load), not through the light page colour */
html.js body.swap-bg { background-color: var(--black); }

/* home opening: both lines of the headline in white */
.hero-full .h1 .soft { color: var(--white); }
/* phone and email are links everywhere: quiet, no browser blue */
a.cta-phone { text-decoration: none; transition: opacity .2s; }
a.cta-phone:hover { opacity: .6; }
.aside p a, .done-sent a, .done-fallback a, .legal a[href^="tel:"], .legal a[href^="mailto:"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.aside p a:hover, .done-sent a:hover, .done-fallback a:hover { opacity: .6; }
a[href^="tel:"] { white-space: nowrap; }
/* on touch screens the contact details read as tappable */
@media (hover: none) {
  .contact-facts a.cf-value { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: rgba(255, 255, 255, .4); }
}
/* portfolio categories (computer screens): the hairline runs the full width of the page; the short black underline marks
   the category you're in and glides to whichever one the pointer is over, turning that label black too */
@media (min-width: 701px) {
  .pf-sec .filter-wrap { position: relative; margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
  .pf-sec .filter-wrap::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
    box-shadow: 0 0 0 100vmax var(--line); clip-path: inset(0 -100vmax); pointer-events: none;
  }
  .pf-sec .filters { margin-bottom: 0; box-shadow: none; }
  .filters-bar { transition: transform .45s cubic-bezier(.65, 0, .35, 1), width .45s cubic-bezier(.65, 0, .35, 1); }
}
@media (min-width: 861px) and (max-height: 820px) { .pf-sec .filter-wrap { margin-bottom: .9rem; } }
/* Expertise: the headline and the four detail photos fill exactly the first screen (below the menu bar);
   the photos take whatever height is left, so they are seen whole before the page moves on */
.exp-first { display: flex; flex-direction: column; min-height: calc(100vh - 118px); min-height: calc(100svh - 118px); }
.exp-first > .page-hero { flex: none; padding-block: clamp(2.25rem, 6vh, 4.25rem) clamp(1.75rem, 4.5vh, 3.25rem); }
.exp-first > .craft-sec { flex: 1 0 auto; display: flex; flex-direction: column; }
.exp-first > .craft-sec > .wrap { flex: 1 0 auto; display: flex; flex-direction: column; }
.exp-first .pgrid.craft { flex: 1 0 auto; grid-auto-rows: minmax(clamp(220px, 26vw, 340px), 1fr); }
.exp-first .craft .tile { display: block; height: 100%; }
.exp-first .craft .tile .pcard-img { aspect-ratio: auto; height: 100%; }
.exp-first .craft .tile .pcard-img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-height: 760px) and (min-width: 701px) { .exp-first > .page-hero .lede { display: none; } }
@media (max-width: 900px) { .exp-first { min-height: calc(100vh - 110px); min-height: calc(100svh - 110px); } }
@media (max-width: 640px) {
  .exp-first .pgrid.craft { grid-auto-rows: minmax(44vw, 1fr); }
  .exp-first > .page-hero { padding-block: 1.75rem 1.5rem; }
}
.exp-first .craft .tile .pcard-img { position: relative; min-height: 0; }
.exp-first .craft .tile .pcard-img img { position: absolute; inset: 0; }
.exp-first .craft .tile { min-height: 0; }
.exp-first > .craft-sec > .wrap { width: 100%; }
@media (max-width: 700px) and (max-height: 700px) { .exp-first > .page-hero .lede { display: none; } }
/* Expertise trades: each one shows a photo of that work from an AIK project (links to the project) */
.trade-grid > div { gap: .7rem; }
.trade-img { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; margin-bottom: .55rem; background: var(--paper-2, #ecebe6); }
.trade-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.trade-img:hover img { transform: scale(1.04); }
.trade-proj {
  position: absolute; left: 0; bottom: 0; padding: .55rem .8rem; background: rgba(11, 11, 12, .72); color: #fff;
  font: 400 .7rem/1 var(--f-body); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transform: translateY(4px);
  transition: opacity .35s ease, transform .35s ease;
}
.trade-img:hover .trade-proj, .trade-img:focus-visible .trade-proj { opacity: 1; transform: none; }
@media (hover: none) { .trade-proj { opacity: 1; transform: none; } }
/* phones: each trade photo runs the full width of the screen; the project label lines up with the text */
@media (max-width: 580px) {
  .trade-img { margin-inline: calc(var(--gutter) * -1); }
  .trade-proj { left: var(--gutter); }
}
/* social links as small icons in the top bar and the phone menu (icons: Font Awesome Free, CC BY 4.0) */
.topbar-social { align-items: center; gap: 1.15rem; }
.topbar-social a, .nav-social a { display: inline-flex; align-items: center; justify-content: center; color: var(--muted-dk); transition: color .25s ease; }
.topbar-social a:hover, .topbar-social a:focus-visible, .nav-social a:hover, .nav-social a:focus-visible { color: var(--white); }
.topbar-social svg { width: auto; height: 14px; display: block; }
.nav-social { display: flex; align-items: center; gap: 1.6rem; }
.site-header .nav-social a { padding-block: .35rem; }
.nav-social svg { width: auto; height: 18px; display: block; }
/* subcontractors page */
.sub-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.sub-main { display: grid; gap: 1.4rem; min-width: 0; }
.sub-steps { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.sub-steps li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 1rem; align-items: baseline; padding-block: 1.15rem; border-bottom: 1px solid var(--line); }
.sub-steps span { font: 400 var(--fs-xs)/1 var(--f-body); letter-spacing: .2em; color: var(--muted); }
.sub-steps p { margin: 0; color: var(--ink-2); font-weight: 300; }
.sub-steps a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sub-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .8rem; }
.sub-aside { display: grid; gap: 1.1rem; padding-top: 1.5rem; border-top: 1px solid var(--ink); }
.sub-trades { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font: 300 clamp(1rem, .95rem + .3vw, 1.2rem)/1.3 var(--f-display); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.text-link { font: 400 var(--fs-xs)/1.4 var(--f-body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: .25rem; justify-self: start; }
.text-link:hover { opacity: .6; }
.aside .text-link { display: inline-block; margin-top: .2rem; }
@media (max-width: 860px) { .sub-grid { grid-template-columns: minmax(0, 1fr); } }