/* ==========================================================================
   BROWNE CONSTRUCTION LIMITED
   One typeface (Archivo), charcoal and brass, full-bleed photography.
   Photographs are the loudest thing on the page; everything else stays quiet.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  --ink:      #14171a;
  --steel:    #1e2329;
  --line-inv: #333a41;
  --concrete: #8a8f94;
  --mist:     #c9cccd;
  --bone:     #edebe7;
  --sand:     #ddd9d2;
  --paper:    #ffffff;
  --slate:    #5d6167;
  --brass:      #b5884e;   /* accent on dark: 5.6:1 on --ink */
  --brass-deep: #8f6828;   /* button fill: white on this is 5.0:1 */
  --brass-lt:   #d0aa6e;   /* hover */

  --sans: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --t-display: clamp(2.4rem, 7.6vw, 6.5rem);
  --t-h2:      clamp(2rem, 4.2vw, 3.4rem);
  --t-h3:      clamp(1.45rem, 2.5vw, 2.15rem);
  --t-h4:      clamp(1.2rem, 2.2vw, 1.5rem);
  --t-body:    1.0625rem;

  --shell: 1400px;
  --wide:  1720px;
  --pad:   clamp(20px, 4vw, 60px);
  --gap:   clamp(28px, 3.6vw, 60px);
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 136px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  font-variation-settings: 'wdth' 100, 'wght' 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, figure, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }

.band, .projects { scroll-margin-top: 128px; }
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }

.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: #fff; padding: 14px 20px; text-decoration: none; }
.skip:focus { left: 0; }
:where(a, button, input, select, textarea):focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
main:focus { outline: none; }

/* ---- 3. Links, buttons, placeholders ----------------------------------- */
/* max-width and overflow-wrap are load-bearing, not tidying. inline-block makes
   the link one unbreakable box, so jason@browneconstructionlimited.co.uk was a
   single 311px word: on a 320px phone it pushed the privacy page 11px wide and
   the whole page scrolled sideways. */
.link { position: relative; display: inline-block; max-width: 100%; overflow-wrap: anywhere; text-decoration: none; padding-bottom: 2px; background: none; border: 0; cursor: pointer; font-variation-settings: 'wdth' 100, 'wght' 500; }
.link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.link:hover::after, .link:focus-visible::after { transform: scaleX(1); }
.link--inv { color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 34px;
  font-size: 0.78rem; font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
  border: 1px solid currentColor; background: transparent; cursor: pointer;
  transition: background 0.26s var(--ease), color 0.26s var(--ease), border-color 0.26s var(--ease);
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--sm { min-height: 44px; padding: 0 22px; font-size: 0.72rem; }
.btn--amber { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }
.btn--amber:hover { background: var(--brass-lt); border-color: var(--brass-lt); color: var(--ink); }
/* Full width is right on a phone, but a 900px-wide submit button on a
   desktop reads as a banner rather than a button. */
.btn--wide { width: 100%; max-width: 340px; }

/* Anything still to be supplied by the company */
.ph {
  font-size: 0.76em; font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--concrete); border-bottom: 1px dotted currentColor; text-decoration: none;
}

/* Light bands need the deeper bronze and a darker grey to clear 4.5:1 */
.band--bone .ph, .doc .ph, .mobilenav .ph { color: var(--slate); }
.band--bone :focus-visible, .doc :focus-visible { outline-color: var(--brass-deep); }

/* ---- 4. Masthead -------------------------------------------------------- */
.masthead {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sand);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
/* Only a page whose markup declares a hero photo gets the transparent treatment,
   and only while JavaScript is there to switch it back on scroll. */
.js .has-hero .masthead:not(.is-stuck) {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.masthead__in { display: flex; align-items: center; gap: 26px; min-height: 120px; }
.masthead.is-stuck { box-shadow: 0 12px 34px -28px rgba(0, 0, 0, 0.5); }

/* Dark ink is the default; white is only for the transparent-over-hero state. */
.nav a, .brand__word, .masthead .btn, .burger, .tel { color: var(--ink); }
.burger span { background: var(--ink); }
.brand__mark--light { opacity: 0; }
.brand__mark--dark  { opacity: 1; }

.js .has-hero .masthead:not(.is-stuck) :where(.nav a, .brand__word, .btn, .burger, .tel) { color: #fff; }
.js .has-hero .masthead:not(.is-stuck) .burger span { background: #fff; }
.js .has-hero .masthead:not(.is-stuck) .brand__mark--light { opacity: 1; }
.js .has-hero .masthead:not(.is-stuck) .brand__mark--dark  { opacity: 0; }

.brand { position: relative; display: flex; align-items: center; gap: 14px; text-decoration: none; margin-right: auto; }
.brand__mark { width: auto; height: 84px; transition: opacity 0.35s var(--ease); }
.brand__mark--dark { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
.brand__word {
  font-size: 0.72rem; font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: 0.3em; text-transform: uppercase; padding-top: 2px;
  transition: color 0.35s var(--ease);
}

.nav { display: flex; gap: 34px; }
.nav a {
  position: relative; text-decoration: none; padding: 6px 0;
  font-size: 0.98rem; font-variation-settings: 'wdth' 100, 'wght' 500;
  transition: color 0.35s var(--ease);
}
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:hover::after, .nav a.is-active::after,
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* A call action, not a stray nav item: the icon marks it as something you do.
   Deliberately quieter than "Enquire now" so the header has one clear button. */
.tel {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; white-space: nowrap;
  font-size: 0.96rem; font-variation-settings: 'wdth' 100, 'wght' 500;
  letter-spacing: -0.01em; transition: color 0.35s var(--ease);
}
.tel svg { flex: none; opacity: 0.75; }
.tel:hover, .tel:focus-visible { color: var(--brass-deep); }
.tel:hover svg { opacity: 1; }
.js .has-hero .masthead:not(.is-stuck) .tel:hover { color: var(--brass-lt); }

.masthead .btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: #fff; }

.burger { display: none; width: 46px; height: 46px; border: 1px solid currentColor; background: none; cursor: pointer; padding: 0; }
.burger span { display: block; width: 18px; height: 1px; margin: 4px auto; transition: transform 0.28s var(--ease), background 0.35s var(--ease); }
.burger[aria-expanded="true"] span:first-child { transform: translateY(2.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-2.5px) rotate(-45deg); }

.mobilenav { display: none; }
.mobilenav a { display: block; padding: 18px var(--pad); border-bottom: 1px solid var(--sand); text-decoration: none; font-size: 1rem; font-variation-settings: 'wdth' 100, 'wght' 500; }

/* ---- 5. Hero ------------------------------------------------------------
   92svh, so the next section visibly crops in at the fold. That does the job
   a bouncing arrow would, without the arrow.                                */
.hero {
  position: relative; min-height: 92vh; min-height: 92svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ink); overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; animation: heroIn 1.6s var(--ease) both; }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,14,0.70) 0%, rgba(10,12,14,0.22) 34%, rgba(10,12,14,0.60) 76%, rgba(10,12,14,0.90) 100%),
    linear-gradient(90deg, rgba(10,12,14,0.64) 0%, rgba(10,12,14,0.08) 62%);
}
@keyframes heroIn { from { transform: scale(1.07); opacity: 0; } to { transform: none; opacity: 1; } }

.hero__in { position: relative; padding-top: 182px; padding-bottom: clamp(56px, 7vw, 104px); color: #fff; }
.eyebrow {
  font-size: 0.76rem; font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--mist);
}
.hero__h1 {
  font-size: var(--t-display); font-variation-settings: 'wdth' 112, 'wght' 600;
  line-height: 0.92; letter-spacing: -0.03em; text-transform: uppercase;
  margin: 22px 0; max-width: 15ch;
}
.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.35rem); color: var(--mist);
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.24); max-width: 30ch;
}
.hero__acts { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 36px; }

.hero__in { animation: riseIn 1s var(--ease) 0.2s both; }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---- 6. Bands and section heads ---------------------------------------- */
.band { padding-block: clamp(72px, 8.5vw, 128px); }
.band--bone { background: var(--bone); }
.band--dark { background: var(--steel); color: #fff; }
.band--ink  { background: var(--ink); color: #fff; }

.shead { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 26px; margin-bottom: clamp(22px, 2.6vw, 36px); }
.shead__t { font-size: var(--t-h2); font-variation-settings: 'wdth' 112, 'wght' 600; line-height: 1; letter-spacing: -0.025em; text-transform: uppercase; }
.shead__rule { height: 1px; background: var(--sand); transform-origin: left; transition: transform 0.9s var(--ease); }
.js .shead__rule { transform: scaleX(0); }
.js .shead.is-in .shead__rule { transform: scaleX(1); }
.shead--inv .shead__rule { background: var(--line-inv); }

.tmpl-note { font-size: 0.94rem; color: var(--slate); max-width: 66ch; }

/* ---- 7. Projects --------------------------------------------------------
   The image container has a fixed shape and the photograph is centred and
   cropped into it, so ANY photograph dropped in fits without editing.       */
.projects { margin-top: clamp(44px, 5vw, 84px); }
.projects .shell { max-width: var(--wide); }
.project { padding-block: clamp(30px, 4vw, 60px); }
.project__in { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.project--flip .project__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr); }
.project--flip .project__fig { order: 2; }

/* <picture> is inline by default, which would leave a baseline gap under every
   photograph now that the images are wrapped in one. */
.project__fig picture, .gal__fig picture { display: block; }

.project__fig { position: relative; overflow: hidden; background: var(--sand); }
.project__fig img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: center; }
.js .project__fig img { transform: scale(1.06); clip-path: inset(0 0 100% 0); transition: transform 1.2s var(--ease), clip-path 1.2s var(--ease); }
.js .project.is-in .project__fig img { transform: none; clip-path: inset(0 0 0 0); }
.js .project__fig::after {
  content: ""; position: absolute; inset: 0; background: var(--brass); pointer-events: none;
  transform: scaleY(1); transform-origin: bottom; transition: transform 0.95s var(--ease);
}
.js .project.is-in .project__fig::after { transform: scaleY(0); }

/* Copy sits at full opacity from the start. Text that withholds itself until
   scrolled is the most-cited tell of a generated page, and it earns nothing. */

.project__kind {
  font-size: 0.72rem; font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8a6524; margin-bottom: 13px;
}
.project__t { font-size: var(--t-h3); font-variation-settings: 'wdth' 106, 'wght' 600; line-height: 1.08; letter-spacing: -0.02em; margin-bottom: 18px; }
.project__d { color: var(--slate); max-width: 50ch; }
.project__meta { display: flex; gap: 36px; flex-wrap: wrap; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--sand); }
.project__meta dt { font-size: 0.78rem; color: var(--slate); margin-bottom: 4px; }
.project__meta dd { font-size: 0.95rem; font-variation-settings: 'wdth' 100, 'wght' 500; }
/* Credit to a third party whose photograph, film or design appears in a project */
.project__credit { margin-top: 16px; font-size: 0.82rem; color: var(--slate); }
/* Credit for third-party films shown in the gallery */
.galcredit { margin-top: clamp(34px, 4vw, 56px); max-width: 62ch; font-size: 0.9rem; color: var(--slate); }

.workcta { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: clamp(40px, 5vw, 76px); padding-top: clamp(28px, 3vw, 46px); border-top: 1px solid var(--sand); }

.band--tight { padding-top: clamp(46px, 5vw, 84px); }

.gal {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(30px, 3.4vw, 52px);
}
.gal__fig { position: relative; overflow: hidden; background: var(--sand); }
.gal__fig img, .gal__fig video {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.gal__fig:hover img, .gal__fig:hover video { transform: scale(1.04); }

/* A video tile carries a play badge and opens with sound and controls */
.gal__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 62px; height: 62px; border-radius: 50%; pointer-events: none;
  background: rgba(10, 12, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.5);
  display: grid; place-items: center; transition: background 0.3s var(--ease);
}
.gal__play::after {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 15px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.gal__fig:hover .gal__play,
.project__fig:hover .gal__play { background: var(--brass-deep); }

/* ---- 8. Simple labelled list (privacy notice contents) ------------------ */
.scope {
  border-top: 1px solid var(--line-inv); margin-top: 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(30px, 4vw, 72px);
}
.scope__i {
  display: block;
  padding: clamp(14px, 1.5vw, 20px) 4px; border-bottom: 1px solid var(--line-inv);
  transition: padding-left 0.35s var(--ease), color 0.35s var(--ease);
}
.scope__i:hover { padding-left: 16px; color: var(--brass-lt); }
.scope__d { display: block; margin-top: 5px; font-size: 0.88rem; line-height: 1.45; color: var(--concrete); }
.scope__l { font-size: clamp(1.15rem, 1.7vw, 1.5rem); font-variation-settings: 'wdth' 104, 'wght' 500; letter-spacing: -0.015em; }

/* ---- 8b. Full-screen photo viewer -------------------------------------- */
.project__zoom, .gal__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative;
}
.project__zoom::after, .gal__zoom::after {
  content: "View"; position: absolute; right: 16px; bottom: 16px;
  padding: 9px 16px; background: rgba(20,23,26,0.82); color: #fff;
  font-size: 0.7rem; font-variation-settings: 'wdth' 100, 'wght' 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.project__zoom:hover::after, .project__zoom:focus-visible::after,
.gal__zoom:hover::after, .gal__zoom:focus-visible::after { opacity: 1; transform: none; }

.viewer {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: #0a0c0e;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
.viewer[hidden] { display: none; }   /* [hidden] alone keeps it out of the a11y tree */
.viewer.is-open { opacity: 1; }
.viewer__bar { display: flex; align-items: center; gap: 20px; padding: 18px clamp(16px, 3vw, 34px); color: #fff; }
.viewer__count { font-size: 0.78rem; font-variation-settings: 'wdth' 100, 'wght' 600; letter-spacing: 0.14em; color: var(--brass); }
.viewer__title { font-size: 0.98rem; color: var(--mist); margin-right: auto; }
.viewer__x {
  width: 46px; height: 46px; border: 1px solid var(--line-inv); background: none;
  color: #fff; cursor: pointer; font-size: 1.3rem; line-height: 1;
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease);
}
.viewer__x:hover { background: var(--brass-deep); border-color: var(--brass-deep); }

.viewer__stage { position: relative; padding: 0 clamp(16px, 3vw, 34px); min-height: 0; overflow: hidden; }
/* Centred and fitted, never enlarged past the file's own size. Absolute
   positioning rather than grid because a percentage max-height only resolves
   against a containing block with a definite height: inside the grid row it
   silently did nothing, so a 1280px-tall phone film overflowed a 666px stage
   and you saw a magnified strip of the middle. That was the blur. */
.viewer__img, .viewer__vid {
  position: absolute; inset: 0; margin: auto;
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; user-select: none; -webkit-user-drag: none;
}
.viewer__img[hidden], .viewer__vid[hidden] { display: none; }
.viewer__vid { background: #000; }
.viewer__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 54px; height: 54px; border: 1px solid var(--line-inv);
  background: rgba(20,23,26,0.7); color: #fff; cursor: pointer; font-size: 1.2rem;
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease);
}
.viewer__nav:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.viewer__nav--prev { left: clamp(8px, 2vw, 26px); }
.viewer__nav--next { right: clamp(8px, 2vw, 26px); }
.viewer__cap { padding: 16px clamp(16px, 3vw, 34px) 26px; color: var(--concrete); font-size: 0.9rem; text-align: center; }
body.is-locked { overflow: hidden; }

@media (max-width: 620px) {
  .viewer__nav { display: none; }   /* swipe instead */
  .viewer__title { display: none; }
}

.scope__note { margin-top: 28px; font-size: 0.98rem; color: var(--mist); }

/* ---- About us ----------------------------------------------------------- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 88px); align-items: start; }
.about__lead { grid-column: 1; }
.about__body { grid-column: 2; }
/* One size for the whole block. A larger lead beside smaller body copy read as
   two different typefaces rather than one voice. */
.about__lead {
  font-size: 1.0625rem; line-height: 1.7; color: #fff;
  font-variation-settings: 'wdth' 100, 'wght' 500;
}
.about__p { color: var(--mist); line-height: 1.7; }
.about__p + .about__p { margin-top: 20px; }
.about__acts { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.about__note {
  grid-column: 1 / -1; margin-top: 8px; padding-top: 20px;
  border-top: 1px solid var(--line-inv);
  font-size: 0.86rem; color: var(--concrete); max-width: 62ch;
}
.about .ph { color: var(--mist); }

/* ---- Footer social ------------------------------------------------------ */
.foot__social { display: flex; gap: 26px; flex-wrap: wrap; margin: 22px 0 26px; list-style: none; }
.foot__social a {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--concrete); text-decoration: none; font-size: 0.9rem;
  transition: color 0.24s var(--ease);
}
.foot__social a:hover, .foot__social a:focus-visible { color: var(--brass-lt); }
.foot__social svg { flex: none; }

/* ---- 9. Enquire --------------------------------------------------------- */
.enq { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.enq__lead { color: var(--mist); max-width: 38ch; margin-bottom: 34px; }

.direct { border-top: 1px solid var(--line-inv); }
.direct > div { padding: 17px 0; border-bottom: 1px solid var(--line-inv); }
.direct dt { font-size: 0.78rem; color: var(--concrete); margin-bottom: 6px; }
.direct dd { font-size: 0.99rem; line-height: 1.5; }
.direct .ph { color: var(--mist); }
.calllink { font-size: 1.15rem; font-variation-settings: 'wdth' 102, 'wght' 500; letter-spacing: -0.01em; text-decoration: none; display: inline-block; min-height: 44px; line-height: 44px; }
.calllink:hover { color: var(--brass-lt); }

.assure { margin-top: 34px; }
.assure li { position: relative; padding: 0 0 13px 24px; font-size: 0.95rem; color: var(--mist); }
.assure li::before { content: ""; position: absolute; left: 0; top: 12px; width: 11px; height: 1px; background: var(--brass); }

.noscript { padding: 18px 20px; margin-bottom: 26px; border: 1px solid var(--brass); color: var(--mist); font-size: 0.95rem; }
.money { position: relative; }
.money__sym {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  color: var(--concrete); font-size: 1.05rem; pointer-events: none;
}


.form__row { margin-bottom: 22px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form label { display: block; margin-bottom: 9px; font-size: 0.9rem; font-variation-settings: 'wdth' 100, 'wght' 500; color: #fff; }
.form .req, .form .opt { color: var(--concrete); font-variation-settings: 'wdth' 100, 'wght' 400; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 54px; padding: 13px 15px;
  font-family: var(--sans); font-size: 1rem; color: #fff;
  background: rgba(255,255,255,0.04); border: 1px solid var(--line-inv); border-radius: 0;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.form textarea { min-height: 126px; resize: vertical; line-height: 1.5; }
.form ::placeholder { color: #71767c; }
.form .money input { padding-left: 34px; }
.form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--concrete) 50%), linear-gradient(135deg, var(--concrete) 50%, transparent 50%); background-position: right 19px center, right 13px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.form select option { background: var(--steel); color: #fff; }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--concrete); }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--brass); background: rgba(255,255,255,0.07); }
.form input[aria-invalid="true"], .form select[aria-invalid="true"] { border-color: #e0674f; }

.err { margin-top: 8px; font-size: 0.85rem; color: #f0917c; }
.consent { margin: 8px 0 24px; font-size: 0.88rem; color: var(--concrete); }
.form__status { margin-top: 15px; font-size: 0.9rem; color: var(--mist); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.receipt { border: 1px solid var(--line-inv); padding: clamp(26px, 3vw, 42px); background: rgba(255,255,255,0.04); }
.receipt__k { font-size: 0.78rem; font-variation-settings: 'wdth' 100, 'wght' 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--brass); margin-bottom: 15px; }
.receipt__b { color: var(--mist); max-width: 48ch; }
.receipt__d { margin: 26px 0; border-top: 1px solid var(--line-inv); }
.receipt__d > div { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line-inv); }
.receipt__d dt { font-size: 0.8rem; color: var(--concrete); }
.receipt__d dd { font-size: 0.96rem; }

/* ---- 9b. Document and gallery pages -------------------------------------
   Promoted out of privacy.html's local <style> so any later legal page
   inherits it. The padding clears the fixed masthead exactly.             */
.band--page { padding-top: calc(121px + clamp(48px, 6vw, 90px)); }

.doc { max-width: 68ch; }
.doc p, .doc li { color: var(--ink); }
.doc p + p { margin-top: 14px; }
.doc__lead { font-size: 1.15rem; line-height: 1.55; color: var(--slate); max-width: 68ch; }
.doc__meta { margin-top: 12px; font-size: 0.86rem; color: var(--slate); }
.doc h2 {
  font-size: var(--t-h4); font-variation-settings: 'wdth' 106, 'wght' 600;
  letter-spacing: -0.015em; line-height: 1.15; margin: 44px 0 12px;
}
.doc ul { margin: 12px 0 0; }
.doc ul li { position: relative; padding: 0 0 11px 24px; }
.doc ul li::before {
  content: ""; position: absolute; left: 0; top: 13px;
  width: 11px; height: 1px; background: var(--brass-deep);
}

/* A document page holds one column, so the rule beside the title stops where
   the prose stops. Without this the title spans the full 1400px shell while the
   text below sits in a 68ch measure, and the page reads as though it failed to
   load. Only the notice uses it; the gallery still wants the whole width.      */
.band--doc .shell { max-width: min(var(--shell), calc(68ch + var(--pad) * 2)); }

.galback { margin-top: clamp(34px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--sand); }

/* ---- 10. Footer --------------------------------------------------------- */
.foot { background: #0f1214; color: #fff; padding-block: clamp(48px, 6vw, 84px); }
.foot__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--gap); align-items: start; }
.foot__brand img { width: auto; height: 108px; }
.foot__nav { display: flex; gap: 30px; flex-wrap: wrap; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line-inv); }
.foot__nav a { font-size: 0.95rem; font-variation-settings: 'wdth' 100, 'wght' 500; text-decoration: none; }
.foot__nav a:hover { color: var(--brass); }
.foot__legal { font-size: 0.86rem; line-height: 1.6; color: var(--concrete); max-width: 74ch; }

/* ---- 11. Generic reveal ------------------------------------------------- */

/* ---- 12. Responsive ----------------------------------------------------- */
@media (max-width: 1080px) {
  .project__in, .project--flip .project__in { grid-template-columns: 1fr; }
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .project--flip .project__fig { order: 0; }
  .enq { grid-template-columns: 1fr; }
  /* the explicit grid-column on the children would otherwise keep forcing
     an implicit second column once the template collapses */
  .about { grid-template-columns: 1fr; gap: 26px; }
  .about__lead, .about__body { grid-column: auto; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .brand__word { display: none; }
  .brand__mark { height: 64px; }
  .masthead__in { min-height: 96px; gap: 12px; }
  .masthead .btn--sm { display: none; }
  /* Icon-only call button. "+44 7771 578814" alongside a burger and a logo is
     too much for a 390px screen, and the tap target matters more than the digits. */
  .tel { width: 44px; height: 44px; justify-content: center; gap: 0; border: 1px solid currentColor; }
  .tel__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tel svg { width: 19px; height: 19px; opacity: 1; }
  .burger { display: block; width: 44px; height: 44px; flex: 0 0 auto; }
  .mobilenav { display: block; position: fixed; top: 96px; left: 0; right: 0; z-index: 99; background: var(--paper); border-bottom: 1px solid var(--sand); }
  .mobilenav[hidden] { display: none; }

  .hero__h1 { font-variation-settings: 'wdth' 100, 'wght' 600; max-width: none; }
  .hero__sub { font-size: 1.02rem; }

  .band--page { padding-top: calc(97px + clamp(40px, 6vw, 90px)); }
  .shead { grid-template-columns: 1fr; row-gap: 14px; }
  .shead__rule { display: none; }

  .project__fig img { aspect-ratio: 4 / 3; }
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .scope { grid-template-columns: 1fr; }
  .project__meta { gap: 26px; }
  .form__grid { grid-template-columns: 1fr; gap: 0; }
  .btn--wide { max-width: none; }
  .receipt__d > div { grid-template-columns: 1fr; gap: 4px; }
  .foot__in { grid-template-columns: 1fr; }
}

/* ---- 13. Motion preference ---------------------------------------------- */
@media (max-width: 560px) {
  /* Full width, one at a time. Two-up put the photographs at 171px across,
     which is too small for the one thing this site exists to show. */
  .gal { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; transition-duration: 0.001ms !important; }
  .js .project__fig img { clip-path: none; transform: none; }
  .js .project__fig::after { transform: scaleY(0); }
  .js .project__body, .js .scope__i, .js [data-reveal] { opacity: 1; transform: none; }
  .js .shead__rule { transform: scaleX(1); }
  .project__zoom::after, .gal__zoom::after { opacity: 1; transform: none; }
}

/* ---- 14. Print ---------------------------------------------------------- */
@media print {
  .masthead, .mobilenav, .form, .btn { display: none; }
  .band--dark, .band--ink, .foot { background: #fff; color: #000; }
  .band--dark *, .band--ink *, .foot * { color: #000 !important; }
}