/* OMFC International | sections.css: one block per page section, in page order.
   Breakpoints (as in base.css): max-width 1023px = tablet and below, 767px = mobile. */


/* === 0. Shared: section heading and photo grain ========================= */

/* Section heading (Disciplines, Case studies): title in columns 4 to 9, text or count on the right */
.section-head {
  align-items: end;
  row-gap: var(--s-5);
  margin-bottom: var(--space-block);
}

.section-head__title {
  grid-column: 4 / span 6;
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-tight);
}

.section-head__text {
  grid-column: 10 / span 3;
  max-width: 34ch;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* Large, light project count ("13") */
.section-head__count {
  grid-column: 11 / span 2;
  justify-self: end;
  color: var(--muted);
  font-family: var(--font-narrow);
  font-size: clamp(4rem, 10vw, 11rem);
  font-weight: 200;
  font-stretch: 62%;
  line-height: 0.78;
}

@media (max-width: 1023px) {
  .section-head__title {
    grid-column: 1 / span 6;
  }

  .section-head__text {
    grid-column: 1 / span 5;
  }

  .section-head__count {
    grid-column: 7 / span 2;
  }
}

@media (max-width: 767px) {
  .section-head__title {
    grid-column: 1 / span 3;
  }

  .section-head__text {
    grid-column: 1 / -1;
  }

  .section-head__count {
    grid-column: 4 / span 1;
  }
}

/* Fine film grain over photos: an inline SVG noise filter, no image file needed */
.grain::after,
.hero__shade::after {
  content: "";
  position: absolute;
  inset: -50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}


/* === 1. Hero / Selected work ===============================================
   Layers: slides, shade, mullions, then titles and index; --index-h is the index height. */

.hero {
  position: relative;
  background: var(--graphite);
  color: var(--bone);
}

.hero__stage {
  --index-h: 7.25rem;
  position: relative;
  height: 100vh;
  height: 100svh;          /* small viewport height: ignores mobile browser bars */
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
}

.hero__slides,
.hero__slide {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Slides stack among themselves only, always beneath the grid, titles and index */
.hero__slides {
  z-index: 0;
}

.hero__slide {
  overflow: hidden;
  background: var(--graphite-2);
}

/* With JavaScript, every slide but the first starts fully clipped away */
.js .hero__slide:not(:first-child) {
  clip-path: inset(100% 0 0 0);
}

/* Without JavaScript only the first photograph is shown */
.no-js .hero__slide:not(:first-child) {
  display: none;
}

.hero__slide picture,
.hero__slide img {
  display: block;
  width: 100%;
  height: 100%;
}

/* --pos: focal point (inline in index.html); --zoom: slow scale driven by hero.js */
.hero__slide img {
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transform: scale(var(--zoom, 1.02));
  transform-origin: 50% 62%;
  will-change: transform;
}

/* Portrait screens use the portrait focal point, --pos-m */
@media (max-aspect-ratio: 4/5) {
  .hero__slide img {
    object-position: var(--pos-m, var(--pos, 50% 50%));
  }
}

/* Darkens the top (behind the header) and the bottom (behind the titles) */
.hero__shade {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12, 13, 14, 0.62) 0%, rgba(12, 13, 14, 0) 24%),
    linear-gradient(0deg, rgba(12, 13, 14, 0.86) 0%, rgba(12, 13, 14, 0.42) 26%, rgba(12, 13, 14, 0) 52%);
}

/* The curtain wall grid the hero is seen through: four bays */
.hero__mullions {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  pointer-events: none;
}

/* A mullion on the right edge of each bay (except the last) */
.hero__mullions span {
  box-shadow: inset -1px 0 0 rgba(245, 243, 238, 0.13);
}

.hero__mullions span:last-of-type {
  box-shadow: none;
}

/* The transom: a horizontal line along the top of the project index */
.hero__mullions i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--index-h, 7.25rem);
  height: 1px;
  background: rgba(245, 243, 238, 0.22);
}

/* Hi-vis set-out crosses where each mullion meets the transom */
.hero__mullions::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--index-h, 7.25rem) - 6px);
  height: 13px;
  background:
    linear-gradient(var(--hivis), var(--hivis)) calc(25% - 6px) 6px / 13px 1px no-repeat,
    linear-gradient(var(--hivis), var(--hivis)) 25% 0 / 1px 13px no-repeat,
    linear-gradient(var(--hivis), var(--hivis)) calc(50% - 6px) 6px / 13px 1px no-repeat,
    linear-gradient(var(--hivis), var(--hivis)) 50% 0 / 1px 13px no-repeat,
    linear-gradient(var(--hivis), var(--hivis)) calc(75% - 6px) 6px / 13px 1px no-repeat,
    linear-gradient(var(--hivis), var(--hivis)) 75% 0 / 1px 13px no-repeat;
  opacity: 0.9;
}

/* Large project titles, stacked; hero.js rolls the active one in and the old one out */
.hero__titles {
  position: absolute;
  left: var(--margin);
  right: 30%;
  bottom: calc(var(--index-h, 7.25rem) + clamp(1.25rem, 3.4vh, 2.5rem));
  height: 2.2em;
  font-size: clamp(2.75rem, 7.4vw, 9.5rem);
  pointer-events: none;
}

.hero__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: clip;              /* the mask the title rolls through */
  padding-bottom: 0.04em;
  font-family: var(--font-narrow);
  font-size: 1em;
  font-weight: 300;
  font-stretch: 64%;
  line-height: 0.86;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

.hero__title > span {
  display: block;
}

/* Hidden until hero.js has set their start positions (avoids a flash) */
.js .hero__title:not(:first-child) > span {
  visibility: hidden;
}

/* Project index: four buttons, one per bay */
.hero__index {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  min-height: var(--index-h, 7.25rem);
}

.hero__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  grid-template-rows: auto auto;
  align-content: start;
  row-gap: 0.4rem;
  width: 100%;
  height: 100%;
  padding: 1.3rem clamp(1rem, 2vw, 2rem) 1.5rem var(--margin);
  color: var(--bone);
  text-align: left;
  opacity: 0.46;
  transition: opacity var(--dur-3) var(--ease-out);
}

.hero__index li + li .hero__item {
  padding-left: clamp(1rem, 1.6vw, 1.75rem);
}

/* aria-current="true" marks the active project (set by hero.js) */
.hero__item[aria-current="true"],
.hero__item:hover,
.hero__item:focus-visible {
  opacity: 1;
}

.hero__no {
  grid-row: 1 / span 2;
  padding-top: 0.28em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.hero__name {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.hero__meta {
  color: rgba(245, 243, 238, 0.7);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.03em;
}

/* Progress bar along the top of each index button (--progress 0 to 1, set by hero.js) */
.hero__bar {
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
}

.hero__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--hivis);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
}

/* Bottom right: counter and "View project" */
.hero__aside {
  position: absolute;
  right: var(--margin);
  bottom: calc(var(--index-h, 7.25rem) + clamp(1.25rem, 3.4vh, 2.5rem));
  display: flex;
  align-items: flex-end;
  gap: var(--s-5);
}

.hero__count {
  padding-bottom: 0.4rem;
  color: rgba(245, 243, 238, 0.6);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  font-variant-numeric: tabular-nums;
}

.hero__count span {
  color: var(--bone);
}

/* Mobile only (see the media query below): the active project's scope line */
.hero__submeta {
  display: none;
  max-width: 22ch;
  color: rgba(245, 243, 238, 0.78);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  line-height: 1.5;
  letter-spacing: 0.03em;
}

/* Vertical "Scroll" cue on the right edge */
.hero__scroll {
  position: absolute;
  top: 50%;
  right: var(--margin);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(245, 243, 238, 0.7);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transform: translate(50%, -50%) rotate(90deg) translate(50%, 0);
  transform-origin: 50% 50%;
}

.hero__scroll i {
  position: relative;
  width: 3rem;
  height: 1px;
  overflow: hidden;
  background: rgba(245, 243, 238, 0.25);
}

/* A hi-vis dash travels along the line, on repeat */
.hero__scroll i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hivis);
  animation: scroll-cue 2.4s var(--ease-in-out) infinite;
}

@keyframes scroll-cue {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

/* Tablet: two bays, titles above the aside row, no scroll cue */
@media (max-width: 1023px) {
  .hero__mullions {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero__mullions span:nth-child(n + 3) {
    display: none;
  }

  .hero__mullions span:nth-child(2) {
    box-shadow: none;
  }

  .hero__mullions::after {
    background:
      linear-gradient(var(--hivis), var(--hivis)) calc(50% - 6px) 6px / 13px 1px no-repeat,
      linear-gradient(var(--hivis), var(--hivis)) 50% 0 / 1px 13px no-repeat;
  }

  .hero__titles {
    right: var(--margin);
    bottom: calc(var(--index-h) + 5.5rem);
  }

  .hero__aside {
    left: var(--margin);
    right: var(--margin);
    bottom: calc(var(--index-h) + 1rem);
    justify-content: space-between;
  }

  .hero__scroll {
    display: none;
  }
}

/* Mobile: compact index (numbers only); the scope line moves into the aside */
@media (max-width: 767px) {
  .hero__stage {
    --index-h: 4.25rem;
  }

  .hero__titles {
    font-size: clamp(2.6rem, 13vw, 4.5rem);
  }

  .hero__item {
    grid-template-columns: 1fr;
    padding: 1rem 0.5rem 1rem var(--margin);
  }

  .hero__index li + li .hero__item {
    padding-left: 0.5rem;
  }

  .hero__name,
  .hero__meta,
  .hero__count {
    display: none;
  }

  .hero__submeta {
    display: block;
  }

  .hero__aside {
    align-items: center;
  }

  .hero__no {
    grid-row: auto;
  }
}


/* === 2. In focus (second hero) =============================================
   Layers: drafting grid, statement, 3D canvas, veil, then caption, panel, markers and card. */

.focus {
  position: relative;
  background: var(--stone);
  color: var(--ink);
}

.focus__stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 38rem;
  overflow: hidden;
  isolation: isolate;
}

/* Drafting grid: 12 columns and lines every eighth of the screen, faded at the edges */
.focus__drafting {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line-on-light) 1px, transparent 1px),
    linear-gradient(0deg, rgba(16, 17, 18, 0.07) 1px, transparent 1px);
  background-size:
    calc((100% - var(--margin) * 2) / 12) 100%,
    100% 12.5vh;
  background-position:
    var(--margin) 0,
    0 0;
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 30%, transparent 85%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 30%, transparent 85%);
}

.focus__statement {
  position: absolute;
  z-index: 1;
  top: calc(var(--header-top) + var(--header-h) + 4vh);
  left: var(--margin);
  right: var(--margin);
  font-family: var(--font-narrow);
  font-size: var(--fs-mega);
  font-weight: 250;
  font-stretch: 62%;
  line-height: var(--lh-mega);
  letter-spacing: -0.012em;
  text-transform: uppercase;
  pointer-events: none;
}

/* Each line is a mask the words rise through */
.focus__line {
  display: block;
  overflow: clip;
  padding-bottom: 0.03em;
}

.focus__line > span {
  display: block;
}

/* Second line ("installed.") is set to the right */
.focus__line:nth-child(2) {
  text-align: right;
}

/* The WebGL canvas fills the stage */
.focus__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.focus__canvas canvas {
  width: 100%;
  height: 100%;
}

/* Photograph used instead of the model when WebGL or JavaScript is missing */
.focus__fallback {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  display: none;
  width: min(62vw, 64rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transform: translateX(-50%);
}

.focus__fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-js .focus__fallback,
.is-model-fallback .focus__fallback {
  display: block;
}

/* Without WebGL or JavaScript the panel becomes a plain caption card beside the photo */
.no-js .focus__panel,
.is-model-fallback .focus__panel {
  top: auto;
  left: auto;
  right: var(--margin);
  bottom: var(--margin);
  padding: 1.5rem;
  background: var(--stone);
  box-shadow: var(--shadow-float);
}

.no-js .focus__hold,
.is-model-fallback .focus__hold {
  display: none;
}

/* Light wash behind the panel: from the left on desktop, from the bottom on tablet and mobile */
.focus__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(90deg, rgba(230, 226, 218, 0.94) 0%, rgba(230, 226, 218, 0.82) 22%, rgba(230, 226, 218, 0) 44%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-4) var(--ease-out);
}

.focus__stage.has-panel .focus__veil {
  opacity: 1;
}

@media (max-width: 1023px) {
  .focus__veil {
    background: linear-gradient(0deg, rgba(230, 226, 218, 0.95) 0%, rgba(230, 226, 218, 0.85) 30%, rgba(230, 226, 218, 0) 55%);
  }
}

/* Opening caption, bottom left ("What we do") */
.focus__caption {
  position: absolute;
  z-index: 3;
  left: var(--margin);
  bottom: var(--margin);
  display: grid;
  gap: 0.75rem;
  max-width: 23rem;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.focus__caption .label {
  color: var(--muted-on-light);
}

/* Project panel, top left. Hidden until focus.js shows it. */
.focus__panel {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-top) + var(--header-h) + clamp(2rem, 6vh, 4.5rem));
  left: var(--margin);
  display: grid;
  gap: 1rem;
  width: min(25rem, calc(100% - var(--margin) * 2));
}

.js .focus__panel {
  visibility: hidden;
}

.focus__project {
  font-family: var(--font-narrow);
  font-size: clamp(2.4rem, 4.4vw, 4.75rem);
  font-weight: 350;
  font-stretch: 66%;
  line-height: 0.9;
  text-transform: uppercase;
}

.focus__text {
  max-width: 34ch;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.focus__hold {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.75rem;
}

.focus__link {
  justify-self: start;
  margin-top: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Hotspot markers: focus.js projects each 3D anchor to the screen every frame (--hx / --hy) */
.focus__hotspots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.hotspot {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 0;
  opacity: 0;
  pointer-events: auto;
  transform: translate3d(var(--hx, -999px), var(--hy, -999px), 0);
  transition: opacity var(--dur-3) var(--ease-out);
}

.hotspot.is-visible {
  opacity: 1;
}

/* The square "+" mark */
.hotspot__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.875rem 0 0 -0.875rem;   /* centre the mark on the anchor point */
  background: var(--ink);
  color: var(--hivis);
  transition:
    transform var(--dur-3) var(--ease-roll),
    background-color var(--dur-2);
}

.hotspot__mark::before,
.hotspot__mark::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.5px;
  background: currentColor;
}

/* The vertical stroke of the "+" turns flat (a "-") when active */
.hotspot__mark::after {
  transform: rotate(90deg);
  transition: transform var(--dur-3) var(--ease-roll);
}

/* Pulsing outline */
.hotspot__mark span {
  position: absolute;
  inset: -7px;
  box-shadow: inset 0 0 0 1px rgba(16, 17, 18, 0.45);
  animation: hotspot-pulse 2.6s var(--ease-out) infinite;
}

@keyframes hotspot-pulse {
  0% {
    opacity: 1;
    transform: scale(0.6);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

/* Text label beside the mark */
.hotspot__label {
  position: absolute;
  top: 0;
  left: 1.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(245, 243, 238, 0.94);
  box-shadow: inset 0 0 0 1px var(--line-on-light);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--dur-2) var(--ease-out);
}

/* Labels show once the camera settles (.has-labels); overlapping ones are held back
   (.is-label-hidden). Hover, focus and the active marker always show their own label. */
.focus__hotspots.has-labels .hotspot:not(.is-label-hidden) .hotspot__label,
.hotspot:hover .hotspot__label,
.hotspot:focus-visible .hotspot__label,
.hotspot.is-active .hotspot__label {
  opacity: 1;
}

.hotspot:hover,
.hotspot:focus-visible,
.hotspot.is-active {
  z-index: 1;
}

/* Near the right edge the label flips to the left of the mark (set by focus.js) */
.hotspot.is-flipped .hotspot__label {
  left: auto;
  right: 1.4rem;
}

.hotspot:hover .hotspot__mark,
.hotspot:focus-visible .hotspot__mark,
.hotspot.is-active .hotspot__mark {
  background: var(--hivis);
  color: var(--ink);
}

.hotspot.is-active .hotspot__mark::after {
  transform: rotate(0deg);
}

/* Photograph card for the active hotspot, bottom right */
.focus__card {
  position: absolute;
  z-index: 4;
  right: var(--margin);
  bottom: var(--margin);
  width: min(21rem, calc(100% - var(--margin) * 2));
  background: var(--bone);
  box-shadow: var(--shadow-float);
}

.focus__card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.focus__card figcaption {
  display: grid;
  gap: 0.4rem;
  padding: 0.9rem 1rem 1.1rem;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.focus__card .label {
  color: var(--muted-on-light);
}

/* Tablet: panel at the bottom, caption and card at the top, hotspot labels hidden */
@media (max-width: 1023px) {
  .focus__statement {
    top: 30%;
  }

  .focus__caption {
    top: calc(var(--header-top) + var(--header-h) + 1.5rem);
    bottom: auto;
  }

  .focus__panel {
    top: auto;
    bottom: var(--margin);
  }

  .hotspot__label {
    display: none;
  }

  .focus__card {
    top: calc(var(--header-top) + var(--header-h) + 1rem);
    bottom: auto;
    width: min(18rem, calc(100% - var(--margin) * 2));
  }
}

/* Mobile: shorter panel (no description) and a smaller hold button */
@media (max-width: 767px) {
  .focus__stage {
    min-height: 40rem;
  }

  .focus__panel {
    gap: 0.6rem;
  }

  .focus__project {
    font-size: 2.1rem;
  }

  .focus__text {
    display: none;
  }

  .hold {
    width: 5.75rem;
    height: 5.75rem;
  }
}


/* === 3. About =========================================================== */

.about {
  position: relative;
  padding-block: var(--space-section);
  background: var(--stone);
  border-top: 1px solid var(--line-on-light);
}

.about__head {
  row-gap: var(--s-5);
}

/* Large company statement, set from column 3 */
.about__statement {
  grid-column: 3 / span 9;
  font-size: clamp(1.55rem, 3.05vw, 3.35rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.022em;
}

/* Photograph on the left, summary table on the right */
.about__body {
  align-items: start;
  row-gap: var(--s-7);
  margin-top: var(--space-block);
}

.about__figure {
  grid-column: 1 / span 4;
  margin-top: clamp(2rem, 9vw, 9rem);
}

.about__figure img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 60% 50%;
}

.about__sheet {
  grid-column: 6 / span 7;
}

/* Summary table, styled like the title block of a drawing */
.titleblock {
  border-top: 1px solid var(--ink);
}

.titleblock__row {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) 1fr;
  gap: var(--gutter);
  padding: 1.05rem 0 1.15rem;
  border-bottom: 1px solid var(--line);
}

.titleblock dt {
  padding-top: 0.35em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.titleblock dd {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
}

.about__sheet .btn--scramble {
  margin-top: var(--s-7);
}

@media (max-width: 1023px) {
  .about__statement {
    grid-column: 1 / -1;
  }

  .about__figure {
    grid-column: 1 / span 3;
    margin-top: 0;
  }

  .about__sheet {
    grid-column: 4 / span 5;
  }
}

@media (max-width: 767px) {
  .about__figure {
    grid-column: 1 / span 3;
  }

  .about__sheet {
    grid-column: 1 / -1;
  }

  /* Label above value instead of side by side */
  .titleblock__row {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
}


/* === 4. Disciplines (accordion) ============================================
   sections.js toggles .is-open; the panel opens by animating grid-template-rows from 0fr to 1fr. */

.disciplines {
  position: relative;
  padding-block: var(--space-section);
  background: var(--graphite);
}

.discipline-list {
  max-width: var(--max);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}

.discipline {
  position: relative;
  border-bottom: 1px solid var(--line);
}

/* The <h3> only provides document structure; the button inside is styled */
.discipline__heading {
  font: inherit;
}

/* The whole row is one button: [no.] [name] [one-liner] [+ / -] */
.discipline__row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: center;
  column-gap: var(--gutter);
  width: 100%;
  padding: clamp(1.25rem, 2.6vw, 2.5rem) var(--margin);
  text-align: left;
}

.discipline__no {
  grid-column: 1 / span 1;
  align-self: start;
  padding-top: 0.9em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.discipline__name {
  grid-column: 2 / span 7;
  font-family: var(--font-narrow);
  font-size: clamp(2.5rem, 6.4vw, 7.75rem);
  font-weight: 300;
  font-stretch: 64%;
  line-height: 0.88;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  transition:
    transform 0.8s var(--ease-roll),
    color var(--dur-3);
}

.discipline__line {
  grid-column: 9 / span 3;
  max-width: 30ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Square "+" toggle: the vertical stroke rotates flat into a "-" when open */
.discipline__toggle {
  position: relative;
  grid-column: 12;
  justify-self: end;
  width: 2.75rem;
  height: 2.75rem;
  box-shadow: inset 0 0 0 1px var(--line);
  transition:
    background-color var(--dur-2),
    color var(--dur-2);
}

.discipline__toggle::before,
.discipline__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.5px;
  margin: -0.75px 0 0 -7px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-roll);
}

.discipline__toggle::after {
  transform: rotate(90deg);
}

.discipline.is-open .discipline__toggle::after {
  transform: rotate(0deg);
}

.discipline.is-open .discipline__toggle {
  background: var(--hivis);
  color: var(--ink);
  box-shadow: none;
}

/* Hover preview: follows the pointer and tilts with its speed (--peek-y / --peek-r from sections.js) */
.discipline__peek {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 62%;
  width: clamp(9rem, 13vw, 14rem);
  aspect-ratio: 3 / 4;
  margin-top: calc(clamp(9rem, 13vw, 14rem) * -0.666);
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(100% 0 0 0);
  transform: translate3d(0, var(--peek-y, 0px), 0) rotate(var(--peek-r, 0deg));
  transition: clip-path 0.7s var(--ease-in-out);
}

.discipline__peek img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.18);
  transition: transform 1s var(--ease-out);
}

/* Desktop mouse hover: show the preview, nudge the name, dim the other rows */
@media (hover: hover) and (min-width: 1024px) {
  .discipline:not(.is-open):hover .discipline__peek {
    clip-path: inset(0 0 0 0);
  }

  .discipline:not(.is-open):hover .discipline__peek img {
    transform: scale(1);
  }

  .discipline:not(.is-open):hover .discipline__name {
    transform: translateX(clamp(0.75rem, 2vw, 2rem));
  }

  .discipline-list:hover .discipline:not(:hover):not(.is-open) .discipline__name {
    color: rgba(245, 243, 238, 0.4);
  }

  .discipline__row:hover .discipline__toggle {
    background: var(--bone);
    color: var(--ink);
  }
}

/* Detail panel, closed by default; visibility is delayed on close so the content stays while it collapses */
.discipline__detail {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 0.8s var(--ease-in-out),
    visibility 0s linear 0.8s;
}

.discipline.is-open .discipline__detail,
.no-js .discipline__detail {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows 0.8s var(--ease-in-out),
    visibility 0s linear 0s;
}

/* Inside the panel: [scope list] [seen on] [three photographs] */
.discipline__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-6);
  min-height: 0;
  overflow: hidden;
  padding-inline: var(--margin);
}

/* Numbered scope list (01, 02, ...) using a CSS counter */
.discipline__scope {
  grid-column: 2 / span 4;
  padding-bottom: var(--s-7);
  counter-reset: scope;
}

.discipline__scope li {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  counter-increment: scope;
}

.discipline__scope li::before {
  content: counter(scope, decimal-leading-zero);
  padding-top: 0.3em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.discipline__seen {
  grid-column: 6 / span 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9375rem;
}

.discipline__seen .label {
  margin-bottom: 0.25rem;
  color: var(--muted);
}

.discipline__strip {
  grid-column: 8 / span 5;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: var(--gutter);
  padding-bottom: var(--s-7);
}

.discipline__strip img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* The middle photograph sits lower, for rhythm */
.discipline__strip img:nth-child(2) {
  margin-top: 2.5rem;
}

/* Tablet: compact row layout and a single-column detail panel */
@media (max-width: 1023px) {
  .discipline__row {
    grid-template-columns: 2.5rem 1fr auto;
    row-gap: 0.75rem;
  }

  .discipline__no {
    grid-column: 1;
  }

  .discipline__name {
    grid-column: 2;
  }

  .discipline__toggle {
    grid-column: 3;
    grid-row: 1;
  }

  .discipline__line {
    grid-column: 2 / span 2;
  }

  .discipline__peek {
    display: none;
  }

  .discipline__inner {
    grid-template-columns: 1fr;
    padding-left: calc(var(--margin) + 2.5rem + var(--gutter));
  }

  .discipline__scope,
  .discipline__seen,
  .discipline__strip {
    grid-column: 1;
    padding-bottom: 0;
  }

  .discipline__strip {
    padding-bottom: var(--s-6);
  }
}

@media (max-width: 767px) {
  .discipline__row {
    grid-template-columns: 1.75rem 1fr auto;
  }

  .discipline__inner {
    padding-left: var(--margin);
  }

  .discipline__name {
    font-size: clamp(2.1rem, 10.5vw, 3.2rem);
  }
}


/* === 5. Sequence ===========================================================
   Desktop: pinned while the track moves left (ScrollTrigger); below 1024px: native sideways scroll. */

.sequence {
  position: relative;
  background: var(--stone);
}

.sequence__pin {
  position: relative;
  display: grid;
  grid-template-columns: minmax(18rem, 30%) 1fr;
  height: 100vh;
  height: 100svh;
  min-height: 40rem;
  overflow: hidden;
}

/* Intro column: title, text and the scroll hint at the bottom */
.sequence__intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding: calc(var(--header-top) + var(--header-h) + clamp(2.5rem, 7vh, 5rem)) var(--gutter) var(--s-7) var(--margin);
  background: var(--stone);
  box-shadow: 1px 0 0 var(--line-on-light);
}

.sequence__title {
  font-size: clamp(2.1rem, 3.7vw, 4.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-tight);
}

.sequence__text {
  max-width: 32ch;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* "Scroll to see the stages", pushed to the bottom of the column */
.sequence__hint {
  margin-top: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.sequence__viewport {
  position: relative;
  overflow: hidden;
  outline-offset: -3px;
}

/* The track is as wide as its content; sections.js moves it with a transform */
.sequence__track {
  display: flex;
  align-items: flex-start;
  gap: clamp(2rem, 4.2vw, 5.5rem);
  width: max-content;
  height: 100%;
  padding: calc(var(--header-top) + var(--header-h) + clamp(2rem, 6vh, 4rem)) 12vw 0 clamp(2rem, 4vw, 4.5rem);
  will-change: transform;
}

/* One stage card. --y (set inline) staggers the cards vertically. */
.stage {
  flex: none;
  width: clamp(14rem, 19vw, 21rem);
  margin-top: calc(var(--y, 0) * 6.5vh);
}

/* Stages with a landscape photograph are wider */
.stage:has(.stage__media--wide) {
  width: clamp(20rem, 28vw, 30rem);
}

.stage__media {
  aspect-ratio: 3 / 4;
  margin-bottom: 1rem;
  overflow: hidden;
  background: var(--stone-2);
}

.stage__media--wide {
  aspect-ratio: 4 / 3;
}

/* Parallax: sections.js animates the image scale and xPercent */
.stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage__no {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.stage__title {
  margin-top: 0.25rem;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.stage__text {
  max-width: 30ch;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* Tape-measure ruler along the bottom of the track */
.sequence__ruler {
  position: absolute;
  left: max(18rem, 30%);
  right: 0;
  bottom: 0;
  height: 3.75rem;
  box-shadow: inset 0 1px 0 var(--line-on-light);
  pointer-events: none;
}

/* Long ticks every 10%, short ticks every 2% */
.sequence__ticks {
  position: absolute;
  inset: 0 0 auto;
  height: 14px;
  background:
    repeating-linear-gradient(90deg, rgba(16, 17, 18, 0.5) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(90deg, rgba(16, 17, 18, 0.25) 0 1px, transparent 1px 2%);
  background-size:
    100% 14px,
    100% 7px;
  background-repeat: no-repeat;
}

/* Progress marker. --p (0 to 1) is set by sections.js. */
.sequence__marker {
  --p: 0;
  position: absolute;
  top: 0;
  left: calc(var(--p) * (100% - 3px));
  width: 3px;
  height: 1.75rem;
  background: var(--ink);
}

/* Tablet and mobile: no pinning, native horizontal scrolling with snap points */
@media (max-width: 1023px) {
  .sequence__pin {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-bottom: var(--space-block);
  }

  .sequence__intro {
    padding: var(--space-section) var(--margin) var(--s-7);
    box-shadow: none;
  }

  .sequence__hint {
    display: none;
  }

  .sequence__viewport {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .sequence__viewport::-webkit-scrollbar {
    display: none;
  }

  .sequence__track {
    gap: var(--gutter);
    padding: 0 var(--margin) 5rem;
  }

  .stage {
    width: min(68vw, 20rem);
    margin-top: 0;
    scroll-snap-align: start;
    scroll-margin-left: var(--margin);
  }

  .stage:has(.stage__media--wide) {
    width: min(84vw, 26rem);
  }

  .sequence__ruler {
    left: var(--margin);
    right: var(--margin);
    bottom: var(--space-block);
    height: 3rem;
  }
}


/* === 6. Case studies list =============================================== */

.projects {
  position: relative;
  padding-block: var(--space-section) calc(var(--space-section) * 0.8);
  background: var(--graphite);
}

/* Column headings: No. | Project | Client | Scope | Location */
.project-list__head {
  padding-bottom: 0.9rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.project-list__head span:nth-child(1) {
  grid-column: 1 / span 1;
}

.project-list__head span:nth-child(2) {
  grid-column: 2 / span 5;
}

.project-list__head span:nth-child(3) {
  grid-column: 7 / span 2;
}

.project-list__head span:nth-child(4) {
  grid-column: 9 / span 3;
}

.project-list__head span:nth-child(5) {
  grid-column: 12 / span 1;
  justify-self: end;
}

.project-list {
  max-width: calc(var(--max) + var(--margin) * 2);
  margin-inline: auto;
}

.project-list li {
  position: relative;
}

/* Each row is a link laid out on the page grid (it also has class .grid) */
.project-row {
  position: relative;
  align-items: baseline;
  padding-block: clamp(1.1rem, 2.1vw, 1.9rem);
  transition: opacity var(--dur-3) var(--ease-out);
}

/* ::before is the hairline above the row; ::after the hi-vis line drawn over it on hover */
.project-row::before,
.project-row::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--margin);
  right: var(--margin);
  height: 1px;
  background: var(--line);
}

.project-row::after {
  background: var(--hivis);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.7s var(--ease-roll);
}

/* Closing hairline under the last row */
.project-list li:last-child .project-row {
  box-shadow: inset 0 -1px 0 transparent;
}

.project-list li:last-child::after {
  content: "";
  position: absolute;
  left: var(--margin);
  right: var(--margin);
  bottom: 0;
  height: 1px;
  background: var(--line);
}

.project-row__no {
  grid-column: 1 / span 1;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
}

.project-row__name {
  grid-column: 2 / span 5;
  font-size: clamp(1.55rem, 3vw, 3.15rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.024em;
  transition: transform 0.7s var(--ease-roll);
}

.project-row__client,
.project-row__scope,
.project-row__loc {
  color: rgba(245, 243, 238, 0.75);
  font-size: 0.9375rem;
}

.project-row__client {
  grid-column: 7 / span 2;
}

.project-row__scope {
  grid-column: 9 / span 3;
}

.project-row__loc {
  grid-column: 12 / span 1;
  justify-self: end;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Thumbnails are only used on tablet and mobile */
.project-row__thumb {
  display: none;
}

@media (hover: hover) {
  /* Dim the other rows while one is hovered */
  .project-list:hover .project-row {
    opacity: 0.38;
  }

  .project-list .project-row:hover,
  .project-list .project-row:focus-visible {
    opacity: 1;
  }

  .project-row:hover::after,
  .project-row:focus-visible::after {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }

  .project-row:hover .project-row__name,
  .project-row:focus-visible .project-row__name {
    transform: translateX(clamp(0.5rem, 1.2vw, 1.25rem));
  }
}

/* Pointer-following preview: position (--px, --py) and tilt (--pr) set every frame by sections.js */
.project-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-overlay);
  width: clamp(13rem, 17vw, 19rem);
  aspect-ratio: 3 / 4;
  pointer-events: none;
  transform: translate3d(var(--px, -999px), var(--py, -999px), 0) rotate(var(--pr, 0deg));
  will-change: transform;
}

.project-preview__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.6s var(--ease-in-out);
}

.project-preview.is-visible .project-preview__frame {
  clip-path: inset(0 0 0 0);
}

.project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Tablet and mobile: stacked rows [no.] [name / client / scope] [thumbnail] */
@media (max-width: 1023px) {
  .project-list__head {
    display: none;
  }

  .project-row {
    grid-template-columns: 2rem 1fr 4.5rem;
    align-items: start;
    row-gap: 0.3rem;
  }

  .project-row__no {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.5rem;
  }

  .project-row__name {
    grid-column: 2;
    grid-row: 1;
  }

  .project-row__client {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.875rem;
  }

  .project-row__scope {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.875rem;
  }

  /* No confirmed client: remove the empty line so the scope moves up */
  .project-row__client:empty {
    display: none;
  }

  .project-row:has(.project-row__client:empty) .project-row__scope {
    grid-row: 2;
  }

  .project-row__loc {
    display: none;
  }

  .project-row__thumb {
    display: block;
    grid-column: 3;
    grid-row: 1 / span 3;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
  }

  .project-preview {
    display: none;
  }
}


/* === 7. Lift (photo moment) ================================================
   A 230vh section with a sticky frame; sections.js opens and raises the photo as the lines drift. */

.lift {
  position: relative;
  height: 230vh;
  background: var(--graphite);
  color: var(--bone);
}

.lift__sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

/* No CSS transform here: sections.js animates yPercent and clip-path */
.lift__unit {
  position: relative;
  z-index: 1;
  height: min(88vh, 70rem);
  aspect-ratio: 3 / 4;
  overflow: hidden;
  clip-path: inset(34% 30% 34% 30%);
}

.lift__unit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lift__line {
  position: absolute;
  font-family: var(--font-narrow);
  font-size: clamp(3.5rem, 11.5vw, 14rem);
  font-weight: 250;
  font-stretch: 62%;
  line-height: 0.84;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
}

.lift__line--a {
  top: 12vh;
  left: var(--margin);
}

.lift__line--b {
  z-index: 2;
  top: 43vh;
  right: var(--margin);
  mix-blend-mode: difference;
}

.lift__line--c {
  left: 14vw;
  bottom: 10vh;
}

.lift__caption {
  position: absolute;
  z-index: 2;
  right: var(--margin);
  bottom: var(--margin);
  max-width: 30ch;
  color: rgba(245, 243, 238, 0.7);
}

@media (max-width: 767px) {
  .lift {
    height: 200vh;
  }

  .lift__unit {
    height: 70vh;
  }

  .lift__line--b {
    top: 46vh;
  }

  .lift__line--c {
    left: var(--margin);
    bottom: 16vh;
  }

  .lift__caption {
    left: var(--margin);
  }
}


/* === 8. Enquire (the paper sheet) ==========================================
   Desktop: the headline sticks while the sheet scrolls over it; enquiry.js sets .is-filled, .is-invalid, .is-sent. */

.enquire {
  position: relative;
  padding-block: var(--space-section);
  background: var(--stone);
}

.enquire__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  max-width: calc(var(--max) + var(--margin) * 2);
  margin-inline: auto;
  padding-inline: var(--margin);
}

/* Intro and sheet share grid row 1, so the sheet overlaps the headline */
.enquire__intro {
  position: sticky;
  top: calc(var(--header-top) + var(--header-h) + 2.5rem);
  grid-column: 1 / span 8;
  grid-row: 1;
  align-self: start;
}

.enquire__title {
  font-size: clamp(3rem, 8.3vw, 10.25rem);
  font-weight: 450;
  line-height: 0.9;
  letter-spacing: -0.042em;
  text-wrap: balance;
}

.enquire__text {
  max-width: 32ch;
  margin-top: var(--s-6);
  color: var(--muted);
}

/* Contact details: columns 9 to 12 beside the headline on desktop; they scroll away normally */
.enquire__contact {
  grid-column: 9 / span 4;
  grid-row: 1;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
}

.enquire__contact div {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.enquire__contact dt {
  color: var(--muted);
}

.enquire__contact dd {
  margin-top: var(--s-2);
  font-size: 0.9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;   /* a long address never pushes the grid wider */
}

/* The sheet of paper. The paper texture is an inline SVG noise filter. */
.sheet {
  --sheet-pad: clamp(1.25rem, 4.6vw, 5.5rem);
  --line: rgba(16, 17, 18, 0.3);
  --muted: rgba(16, 17, 18, 0.55);
  position: relative;
  z-index: 1;
  grid-column: 5 / span 8;
  grid-row: 1;
  margin-top: clamp(16rem, 44vh, 30rem);
  padding: clamp(1.75rem, 4vw, 4rem) var(--sheet-pad) 0;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .39 0 0 0 0 .33 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.55), transparent 55%);
  box-shadow: var(--shadow-sheet);
}

/* Paper clip over the top edge */
.sheet__clip {
  position: absolute;
  top: -2.6rem;
  left: 11%;
  width: 1.9rem;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.18));
}

/* Sheet header: [no.] [title and meta] [brand] */
.sheet__head {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: start;
  gap: 0 var(--gutter);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--ink);
}

.sheet__no {
  padding-top: 0.5em;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
}

.sheet__title {
  font-family: var(--font-mono);
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sheet__brand {
  display: grid;
  justify-items: end;
  font-family: var(--font-sans);
  font-size: 1.25rem;
  font-weight: 780;
  font-stretch: 122%;
  line-height: 1;
  letter-spacing: 0.02em;
}

.sheet__brand span {
  margin-top: 0.3rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  font-weight: 500;
  font-stretch: 100%;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* "Sheet 01 / 01" and "Date ..." */
.sheet__meta {
  grid-column: 2 / -1;
  display: flex;
  gap: var(--s-6);
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.sheet__meta div {
  display: flex;
  gap: 0.6em;
}

.sheet__meta dt {
  color: var(--muted);
}

/* Form fields: two columns on desktop and tablet (.field--half takes one) */
.sheet__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}

/* One field: [number] [label / control / error] */
.field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--gutter);
  row-gap: 0.35rem;
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.field--half {
  grid-column: span 1;
}

.field__no {
  grid-row: 1 / span 3;
  padding-top: 0.2em;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  transition: color var(--dur-2);
}

.field.is-filled .field__no,
.field:focus-within .field__no {
  color: var(--ink);
}

.field__label,
.field__set legend {
  grid-column: 2;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.field__req {
  color: var(--muted);
}

.field__set {
  grid-column: 2;
}

.field__set legend {
  margin-bottom: 0.9rem;
}

/* Inputs are drawn as a single underline, like writing on a form */
.field__input {
  grid-column: 2;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.35rem 0 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: inset 0 -1px 0 var(--line);
  font-size: 1.0625rem;
  line-height: 1.4;
  appearance: none;
  -webkit-appearance: none;
  transition: box-shadow var(--dur-2) var(--ease-out);
}

.field__input::placeholder {
  color: rgba(16, 17, 18, 0.35);
}

@media (hover: hover) {
  .field__input:hover {
    box-shadow: inset 0 -1px 0 rgba(16, 17, 18, 0.6);
  }
}

/* Focus: the underline thickens to 2px ink */
.field__input:focus,
.field__input:focus-visible {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--ink);
}

/* Message box: ruled lines every 2rem, which scroll with the text */
.field__input--area {
  min-height: 8rem;
  padding-top: 0.2rem;
  resize: vertical;
  line-height: 2rem;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), var(--line) calc(2rem - 1px) 2rem);
  background-attachment: local;
  box-shadow: none;
}

.field__input--area:focus {
  box-shadow: none;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(2rem - 1px), rgba(16, 17, 18, 0.55) calc(2rem - 1px) 2rem);
}

/* Select with a drawn chevron */
.field__select {
  position: relative;
  grid-column: 2;
}

.field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  pointer-events: none;
}

.field__select select {
  padding-right: 2rem;
}

/* Validation message (empty when the field is valid) */
.field__error {
  grid-column: 2;
  min-height: 0;
  color: var(--error);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}

.field__error:empty {
  display: none;
}

.field.is-invalid .field__input {
  box-shadow: inset 0 -2px 0 var(--error);
}

.field.is-invalid .field__no {
  color: var(--error);
}

/* Package checkboxes: the real input is hidden but focusable; .choice__box draws the square */
.choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem var(--gutter);
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.35rem 0;
  font-size: 0.9375rem;
  cursor: pointer;
}

.choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice__box {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
  box-shadow: inset 0 0 0 1px var(--ink);
  transition:
    background-color var(--dur-1),
    box-shadow var(--dur-1);
}

.choice:hover .choice__box {
  background: rgba(16, 17, 18, 0.12);
}

/* Ticked: a solid ink square inside a thin paper-coloured ring */
.choice input:checked + .choice__box {
  background: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--ink),
    inset 0 0 0 3.5px var(--paper);
}

.choice input:focus-visible + .choice__box {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Sheet footer: note and the send button */
.sheet__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-5);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}

.sheet__note {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
}

/* Result or error message */
.sheet__status {
  margin-bottom: var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
}

.sheet__status:empty {
  display: none;
}

/* Strip along the bottom edge of the sheet, full bleed */
.sheet__edge {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  margin-inline: calc(var(--sheet-pad) * -1);
  padding: 1.25rem var(--sheet-pad);
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

/* Rubber stamp: hidden until .is-sent, then stamped on; multiply blending sinks the ink into the paper */
.sheet__stamp {
  position: absolute;
  z-index: 2;
  top: 30%;
  right: 9%;
  display: grid;
  justify-items: center;
  gap: 0.2rem;
  padding: 0.7rem 1.4rem 0.6rem;
  border: 3px solid #b8321f;
  color: #b8321f;
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2.6vw, 2.3rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-9deg) scale(1.6);
}

.sheet__stamp small {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.sheet.is-sent .sheet__stamp {
  animation: stamp 0.55s var(--ease-out) forwards;
}

.sheet.is-sent .sheet__fields {
  opacity: 0.55;
  transition: opacity var(--dur-4);
}

@keyframes stamp {
  0% {
    opacity: 0;
    transform: rotate(-4deg) scale(1.8);
  }

  60% {
    opacity: 0.92;
    transform: rotate(-9deg) scale(0.96);
  }

  100% {
    opacity: 0.86;
    transform: rotate(-9deg) scale(1);
  }
}

/* Tablet: headline, then the contact details in one row, then the sheet */
@media (max-width: 1023px) {
  .enquire__intro {
    position: relative;
    top: 0;
    grid-column: 1 / -1;
  }

  .enquire__contact {
    grid-column: 1 / -1;
    grid-row: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: var(--space-block);
  }

  .sheet {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-block);
  }
}

/* Mobile: contact details two by two, single-column fields, button full width */
@media (max-width: 767px) {
  .enquire__contact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet__fields {
    grid-template-columns: 1fr;
  }

  .field--half {
    grid-column: 1 / -1;
  }

  .field {
    grid-template-columns: 2.25rem 1fr;
  }

  .sheet__head {
    grid-template-columns: 2.25rem 1fr;
  }

  .sheet__brand {
    display: none;
  }

  .choices {
    grid-template-columns: 1fr 1fr;
  }

  .sheet__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
}


/* === 9. Site footer ========================================================
   Four columns on desktop, two by two on tablet; Contact and Accreditations full width on mobile. */

.site-footer {
  position: relative;
  overflow: hidden;
  padding-top: var(--space-block);
  background: var(--graphite);
  color: var(--bone);
}

/* Hi-vis level line across the top, drawn in by sections.js */
.site-footer__level {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hivis);
  box-shadow: 0 0 14px rgba(220, 245, 60, 0.55);
  transform-origin: 0 50%;
}

.js .site-footer__level {
  transform: scaleX(0);
}

.site-footer__cols {
  row-gap: var(--s-7);
  padding-bottom: var(--space-block);
}

/* Each column takes a quarter of the grid on desktop (3 of 12) */
.site-footer__col {
  grid-column: span 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
  font-size: 0.9375rem;
  line-height: 1.75;
}

.site-footer__col .label {
  color: var(--muted);
}

/* Contact column: address, telephone and email, one per line */
.site-footer__address {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-style: normal;
}

/* Second label in a column ("Opening hours"): a little more space above */
.site-footer__sublabel {
  margin-top: var(--s-3);
}

/* Accreditation badges on white tiles (the images have white backgrounds) */
.site-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.site-footer__badges img {
  display: block;
  width: 5.5rem;
  height: 5.5rem;
  padding: 0.45rem;
  background: var(--white);
  object-fit: contain;
}

/* Giant wordmark: letters rise in (sections.js) and lift under the pointer via --lift */
.site-footer__word {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  padding: 0.06em var(--margin) 0;
  font-family: var(--font-sans);
  font-size: 26.2vw;              /* starting size; sections.js fits it exactly */
  font-weight: 800;
  font-stretch: 125%;
  line-height: 0.74;
  letter-spacing: -0.02em;
}

.site-footer__word span {
  display: block;
  transform: translate3d(0, var(--lift, 0%), 0);
  will-change: transform;
}

/* Bottom line: copyright (left) and "Back to top" (right) */
.site-footer__base {
  align-items: center;
  row-gap: var(--s-3);
  padding-block: 1.1rem;
  border-top: 1px solid var(--line-on-dark);
  color: var(--muted-on-dark);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.site-footer__base p:first-child {
  grid-column: 1 / span 6;
}

.site-footer__top {
  grid-column: 7 / span 6;
  justify-self: end;
  color: var(--bone);
}

@media (max-width: 1023px) {
  .site-footer__col {
    grid-column: span 4;
  }

  .site-footer__base p:first-child {
    grid-column: 1 / span 4;
  }

  .site-footer__top {
    grid-column: 5 / span 4;
  }
}

@media (max-width: 767px) {
  .site-footer__col {
    grid-column: span 2;
  }

  .site-footer__col--contact,
  .site-footer__col--badges {
    grid-column: 1 / -1;
  }

  .site-footer__base p:first-child {
    grid-column: 1 / span 2;
  }

  .site-footer__top {
    grid-column: 3 / span 2;
  }
}