/* ===========================================================================
   CALLUM WALSH CONSTRUCTION LTD
   ---------------------------------------------------------------------------
     1.  Tokens
     2.  Base
     3.  Intro animation
     4.  Header and navigation
     5.  Hero
     6.  Credentials strip
     7.  About
     8.  Services
     9.  Work in motion
     10. Selected work: backdrop, frame, caption, rail
     11. Lightbox
     12. Approach
     13. Contact and enquiry form
     14. Footer
     15. Responsive
   =========================================================================== */


/* 1. TOKENS ============================================================== */

:root {
  /* Brand colours from the logo pack. Changing these means changing the
     logo pack to match. */
  --orange: #ff5a00;
  --orange-deep: #d94c00;
  --ink: #0b0d10;
  --paper: #f3f1ec;
  --white: #ffffff;

  --ink-raised: #15181c;
  --steel: #6e7378;
  --steel-light: #9b9ea3;
  --body-grey: #55585c;
  --rule-dark: #2a2d32;
  --rule-light: #d9d6cf;

  /* Archivo carries the headings, IBM Plex Mono carries anything that
     behaves like site paperwork: labels, specs, measurements. */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --pad-x: 6vw;
}


/* 2. BASE ================================================================ */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img { display: block; width: 100%; }

h1, h2 {
  margin: 20px 0 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.045em;
  line-height: 0.88;
}

h1 { font-size: clamp(52px, 8.5vw, 124px); }
h2 { font-size: clamp(40px, 6vw, 88px); }

h1 em, h2 em { color: var(--orange); font-style: italic; }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 14px 20px;
  background: var(--orange);
  color: var(--white);
  font-family: var(--mono);
  font-size: 13px;
}

.skip-link:focus { left: 0; }

.section-pad { padding: 110px var(--pad-x); }

.eyebrow,
.section-label {
  font-family: var(--mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 11px;
}

.eyebrow { display: flex; align-items: center; gap: 12px; color: #dcdcdc; }
.eyebrow span { width: 30px; height: 2px; background: var(--orange); flex: none; }

.section-label { display: flex; align-items: center; gap: 10px; color: var(--steel); }
.section-label::before { content: ""; width: 22px; height: 2px; background: var(--orange); flex: none; }
.section-label.light { color: var(--steel-light); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 38px;
  padding: 19px 24px;
  border: 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.button span { font-size: 17px; }

.orange { background: var(--orange); color: var(--white); transition: background 0.2s ease; }
.orange:hover, .orange:focus-visible { background: var(--orange-deep); }

.text-link,
.inline-link {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--steel);
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.text-link span { margin-left: 12px; }


/* 3. INTRO ANIMATION =====================================================
   The mark is two structural panels lapping over each other, which is how
   cladding actually goes on. The animation assembles it in that order, then
   the wordmark runs in behind. Total run: 1.7s, once per session.

   The overlay is cleared by the CSS animation itself, not by JavaScript, so
   a script failure can never leave someone stuck on a blank screen.
   ======================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: var(--ink);
  animation: intro-clear 0.45s ease 1.25s forwards;
}

.intro-logo {
  width: min(62vw, 640px);
  height: auto;
  overflow: visible;
}

.intro-logo .mk-panel-a,
.intro-logo .mk-panel-b,
.intro-logo .mk-notch,
.intro-logo .mk-wordmark,
.intro-logo .mk-subtitle {
  transform-box: fill-box;
  transform-origin: center;
}

/* Orange panel lands first. */
.mk-panel-a { animation: panel-a 0.42s cubic-bezier(0.16, 0.84, 0.28, 1) 0.05s both; }

/* White panel laps over it from the bottom right. */
.mk-panel-b { animation: panel-b 0.42s cubic-bezier(0.16, 0.84, 0.28, 1) 0.26s both; }

/* The notch detail settles last on the mark. */
.mk-notch { animation: notch-in 0.3s ease 0.5s both; }

/* Wordmark runs in from behind the mark, wiped left to right. */
.mk-wordmark { animation: wordmark-in 0.5s cubic-bezier(0.16, 0.84, 0.28, 1) 0.55s both; }

.mk-subtitle { animation: subtitle-in 0.35s ease 0.85s both; }

.intro-skip {
  position: absolute;
  right: 24px;
  bottom: 24px;
  padding: 10px 16px;
  border: 1px solid var(--rule-dark);
  background: transparent;
  color: var(--steel-light);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  opacity: 0;
  animation: skip-in 0.3s ease 0.5s forwards;
}

.intro-skip:hover,
.intro-skip:focus-visible { border-color: var(--orange); color: var(--orange); }

@keyframes panel-a {
  from { opacity: 0; transform: translateX(-56px); }
  to   { opacity: 1; transform: none; }
}

@keyframes panel-b {
  from { opacity: 0; transform: translate(46px, 46px); }
  to   { opacity: 1; transform: none; }
}

@keyframes notch-in {
  from { opacity: 0; }
  to   { opacity: 0.94; }
}

@keyframes wordmark-in {
  from { opacity: 0; transform: translateX(-38px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}

@keyframes subtitle-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

@keyframes skip-in {
  to { opacity: 1; }
}

@keyframes intro-clear {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* Already seen this session, or dismissed. */
.intro-done .intro,
.intro.is-dismissed { display: none; }


/* 4. HEADER AND NAVIGATION =============================================== */

.site-header {
  position: relative;
  z-index: 10;
  height: 86px;
  padding: 0 4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #080a0d;
  color: var(--white);
}

.brand img { width: auto; height: 44px; object-fit: contain; }

.main-navigation {
  display: flex;
  gap: 34px;
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.main-navigation a { color: #c7c7c7; transition: color 0.2s ease; }
.main-navigation a:hover, .main-navigation a:focus-visible { color: var(--orange); }

.header-contact {
  height: 86px;
  padding-left: 34px;
  border-left: 1px solid var(--rule-dark);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

.header-call { display: flex; flex-direction: column; gap: 2px; }

.header-call-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel-light);
}

.header-call-number { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; }

.header-call:hover .header-call-number,
.header-call:focus-visible .header-call-number { color: var(--orange); }

.header-email {
  color: #9ea1a6;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 0.035em;
}

.header-email:hover,
.header-email:focus-visible { color: var(--orange); }

.menu-button { display: none; border: 0; background: transparent; color: var(--white); font-family: var(--mono); }


/* 5. HERO ================================================================ */

.hero {
  min-height: calc(100vh - 86px);
  position: relative;
  overflow: hidden;
  color: var(--white);
  display: flex;
  align-items: flex-end;
}

.hero picture { position: absolute; inset: 0; }

.hero-image, .hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero-image { object-fit: cover; transition: opacity 0.45s ease; }
.hero-image.is-changing { opacity: 0.15; }

.hero-shade {
  background:
    linear-gradient(90deg, rgba(4, 5, 7, 0.9) 0%, rgba(4, 5, 7, 0.45) 58%, rgba(4, 5, 7, 0.18)),
    linear-gradient(0deg, rgba(4, 5, 7, 0.7), transparent 55%);
}

.hero-content { position: relative; z-index: 2; max-width: 920px; padding: 10vh var(--pad-x) 9vh; }
.hero-copy { max-width: 560px; color: #d4d5d6; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 35px; margin-top: 38px; }

.hero-index {
  position: absolute;
  right: 4vw;
  bottom: 8vh;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12px;
}

.hero-index strong { color: var(--orange); }
.hero-index span { width: 80px; height: 1px; background: #77797d; }
.hero-index small { color: #a5a7aa; }


/* 6. CREDENTIALS STRIP =================================================== */

.credentials { padding: 0 var(--pad-x); background: var(--ink); color: var(--white); }

.credentials dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule-dark);
}

.credentials dl > div { padding: 34px 30px 34px 0; border-right: 1px solid var(--rule-dark); }
.credentials dl > div:last-child { border-right: 0; padding-right: 0; }
.credentials dl > div + div { padding-left: 30px; }

.credentials dt {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--steel-light);
}

.credentials dd { margin: 10px 0 0; font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; }


/* 7. ABOUT =============================================================== */

.about { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; }
.about h2 { margin-top: 0; }
.about-body p { max-width: 620px; color: var(--body-grey); line-height: 1.75; }

.about-mark {
  width: min(18vw, 220px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-self: start;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--rule-dark);
}

.about-mark img { width: 54%; height: auto; }

.about-note {
  padding-left: 18px;
  border-left: 2px solid var(--orange);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}

.inline-link { display: inline-block; margin-top: 25px; border-color: var(--rule-light); }


/* 8. SERVICES ============================================================ */

.services { background: var(--ink); color: var(--white); }

.section-heading { display: grid; grid-template-columns: 1fr 3fr; gap: 5vw; }
.section-heading h2 { margin-top: 0; }

.service-list { margin-top: 35px; border-top: 1px solid var(--rule-dark); }

.service {
  min-height: 150px;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.9fr;
  align-items: center;
  gap: 40px;
  border-bottom: 1px solid var(--rule-dark);
  transition: background 0.25s ease, padding 0.25s ease;
}

.service:hover { padding-left: 20px; padding-right: 20px; background: var(--ink-raised); }

.service h3 { margin: 0; font-size: 30px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; }
.service p { margin: 0; color: #9ea1a6; font-size: 15px; line-height: 1.7; }

.service-meta {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  text-align: right;
}

/* 9. WORK IN MOTION ===================================================== */

.site-film {
  overflow: hidden;
  border-top: 1px solid var(--rule-dark);
  background: var(--ink);
  color: var(--white);
}

.site-film-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10vw;
  align-items: end;
}

.site-film-heading h2 { margin-bottom: 0; }

.site-film-heading > p {
  max-width: 440px;
  margin: 0 0 10px;
  color: #a9acb0;
  line-height: 1.75;
}

.site-film-grid {
  margin-top: 60px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 28px);
}

.site-film-tile {
  min-width: 0;
  border: 1px solid #34373c;
  background: var(--ink-raised);
}

.site-film-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 9 / 14;
  isolation: isolate;
  background: #111419;
}

.site-film-media::before,
.site-film-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.site-film-media::before {
  background: linear-gradient(180deg, rgba(5, 7, 9, 0.45) 0%, transparent 34%, rgba(5, 7, 9, 0.86) 100%);
}

.site-film-media::after {
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--orange);
  transform: scaleY(0.16);
  transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.site-film-media video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(0.64) contrast(1.08) brightness(0.82);
  transform: scale(1.012);
  transition: filter 0.45s ease, transform 0.75s cubic-bezier(0.16, 0.84, 0.28, 1);
}

.site-film-index {
  position: absolute;
  z-index: 2;
  top: 20px;
  right: 20px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}

.site-film-caption {
  position: absolute;
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 24px;
}

.site-film-caption p {
  margin: 0 0 7px;
  color: var(--orange);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.site-film-caption h3 {
  margin: 0;
  color: var(--white);
  font-size: clamp(22px, 2.3vw, 34px);
  font-weight: 800;
  line-height: 0.96;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.site-film-note {
  margin: 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  color: #767a80;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.site-film-note span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
}

@media (hover: hover) {
  .site-film-tile:hover .site-film-media::after { transform: scaleY(1); }
  .site-film-tile:hover video {
    filter: saturate(0.88) contrast(1.06) brightness(0.94);
    transform: scale(1.045);
  }
}


/* 10. SELECTED WORK ======================================================
   A single large frame that advances on its own, with every project also
   reachable from the rail underneath. The rail matters: a rotating frame on
   its own only ever shows one job, and the volume of work is part of the
   argument.
   ======================================================================== */

.work { position: relative; overflow: hidden; }

.work-backdrop {
  position: absolute;
  inset: 0;
  background-image: url("assets/backdrop-roofworks-1600.jpg");
  background-size: cover;
  background-position: center 30%;
  opacity: 0.09;
  filter: grayscale(0.45) contrast(1.05);
}

/* Fixed attachment gives the drift on scroll. Left off touch devices, where
   it is unreliable and causes repaint jank. */
@media (min-width: 900px) and (pointer: fine) {
  .work-backdrop { background-attachment: fixed; }
}

.work-inner { position: relative; z-index: 1; }

.work-heading { display: grid; grid-template-columns: 2fr 1fr; gap: 10vw; align-items: end; }
.work-heading h2 { margin-bottom: 0; }
.work-heading > p { margin-bottom: 10px; color: var(--body-grey); line-height: 1.75; }

.frame {
  position: relative;
  margin-top: 60px;
  background: var(--ink);
  overflow: hidden;
}

.frame-viewport { overflow: hidden; }

.frame-track {
  display: flex;
  transition: transform 1.05s cubic-bezier(0.62, 0.02, 0.16, 1);
  will-change: transform;
}

.frame-slide {
  flex: 0 0 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
}

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

.frame-step {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(11, 13, 16, 0.55);
  color: var(--white);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s ease, border-color 0.2s ease, color 0.2s ease;
}

.frame:hover .frame-step,
.frame-step:focus-visible { opacity: 1; }

.frame-step:hover { border-color: var(--orange); color: var(--orange); }

.frame-prev { left: 20px; }
.frame-next { right: 20px; }

.frame-pause {
  position: absolute;
  right: 20px;
  bottom: 24px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(11, 13, 16, 0.55);
  color: var(--white);
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.frame-pause:hover,
.frame-pause:focus-visible { border-color: var(--orange); color: var(--orange); }

.frame-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.14);
}

.frame-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--orange);
}

.frame-fallback {
  padding: 40px;
  color: var(--steel-light);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
}

/* Caption sits under the frame rather than over the photograph, so the
   photograph is never obscured and the text is never fighting the image. */
.frame-caption {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 40px;
  align-items: start;
  min-height: 118px;
}

.frame-caption h3 {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.caption-sector {
  display: block;
  margin-bottom: 9px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
}

.caption-spec {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
  font-family: var(--mono);
  font-size: 12px;
}

.caption-spec > div { padding: 9px 12px; background: var(--paper); display: flex; gap: 10px; }

.caption-spec dt {
  flex: none;
  width: 60px;
  padding-top: 1px;
  color: var(--steel);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.caption-spec dd { margin: 0; color: var(--ink); line-height: 1.45; }
.caption-spec .is-tbc { color: #b4b1aa; }

/* Thumbnail rail: every project visible at once. */
.frame-rail {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
}

.rail-item {
  flex: 0 0 128px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.25s ease;
}

.rail-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 2px solid transparent;
  transition: border-color 0.25s ease;
}

.rail-item:hover { opacity: 0.8; }

.rail-item[aria-selected="true"] { opacity: 1; }
.rail-item[aria-selected="true"] img { border-color: var(--orange); }


/* Full project case studies -------------------------------------------- */

.case-list {
  margin-top: 74px;
  border-top: 1px solid var(--ink);
}

.case-study {
  padding: 92px 0;
  border-bottom: 1px solid var(--rule-light);
}

.case-head {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 5vw;
  align-items: start;
}

.case-head > p {
  margin: 6px 0 0;
  color: var(--steel);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.case-head > p span { margin-right: 10px; color: var(--orange); }

.case-head h3 {
  max-width: 860px;
  margin: 0;
  font-size: clamp(36px, 4.2vw, 66px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.case-head h3 em {
  display: block;
  margin-top: 8px;
  color: var(--orange);
  font-style: italic;
}

.case-layout {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(270px, 0.78fr) minmax(0, 1.32fr);
  gap: clamp(42px, 6vw, 94px);
  align-items: start;
}

.case-copy { color: var(--body-grey); }
.case-copy p { margin: 0; line-height: 1.78; }
.case-copy p + p { margin-top: 22px; }
.case-copy .case-result {
  padding: 18px 0 18px 20px;
  border-left: 2px solid var(--orange);
  color: var(--ink);
  font-weight: 600;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.case-photo {
  position: relative;
  min-width: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--white);
  cursor: zoom-in;
  overflow: hidden;
  text-align: left;
}

.case-photo-wide { grid-column: 1 / -1; }
.case-gallery-one .case-photo { grid-column: 1 / -1; }
.case-photo picture,
.case-photo img { display: block; width: 100%; height: 100%; }
.case-photo img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.65s cubic-bezier(0.16, 0.84, 0.28, 1), filter 0.4s ease;
}
.case-photo:not(.case-photo-wide) img { aspect-ratio: 4 / 3; }

.case-photo::after {
  content: "";
  position: absolute;
  inset: 45% 0 0;
  background: linear-gradient(transparent, rgba(4, 5, 7, 0.86));
  pointer-events: none;
}

.case-photo span {
  position: absolute;
  z-index: 1;
  left: 18px;
  right: 18px;
  bottom: 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.case-photo:hover img,
.case-photo:focus-visible img { transform: scale(1.035); filter: saturate(1.08); }


/* 11. LIGHTBOX =========================================================== */

.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 64px;
  align-items: center;
  gap: 20px;
  padding: 76px 4vw 40px;
  background: rgba(5, 6, 8, 0.97);
  color: var(--white);
}

.lightbox-open { overflow: hidden; }

.lightbox-content { min-width: 0; margin: 0; display: grid; justify-items: center; }

.lightbox-content img { width: auto; max-width: 100%; max-height: calc(100vh - 165px); object-fit: contain; }

.lightbox-content figcaption {
  width: 100%;
  max-width: 1100px;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c5c7ca;
}

.lightbox-close,
.lightbox-step {
  border: 1px solid #44474c;
  background: #0b0d10;
  color: var(--white);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.lightbox-close:hover, .lightbox-close:focus-visible,
.lightbox-step:hover, .lightbox-step:focus-visible { border-color: var(--orange); color: var(--orange); }

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 4vw;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.lightbox-close span { margin-left: 8px; font-size: 16px; }

.lightbox-step { width: 54px; height: 54px; border-radius: 50%; font-size: 30px; line-height: 1; }


/* 12. APPROACH =========================================================== */

.proof { min-height: 700px; display: grid; grid-template-columns: 1.1fr 0.9fr; }

.proof picture { display: block; height: 100%; }
.proof img { height: 100%; object-fit: cover; }

.proof-panel { padding: 100px 7vw; background: var(--ink); color: var(--white); }
.proof-panel h2 { font-size: clamp(42px, 4.6vw, 70px); }
.proof-panel > p:not(.section-label) { color: #a9acb0; line-height: 1.75; }

.proof-panel ul {
  list-style: none;
  padding: 30px 0 0;
  margin: 30px 0 0;
  border-top: 1px solid #32353a;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.proof-panel li::before { content: "\2713"; margin-right: 10px; color: var(--orange); }


/* 13. CONTACT AND ENQUIRY FORM =========================================== */

.contact-title { margin-top: 20px; }

.contact-main { margin-top: 50px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 7vw; align-items: start; }

.contact-lead { margin-top: 0; color: var(--body-grey); line-height: 1.75; max-width: 440px; }
.contact-call { margin: 28px 0 40px; }

.contact-list { margin: 0; border-top: 1px solid var(--rule-light); }

.contact-list > div {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule-light);
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  align-items: start;
}

.contact-list dt {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--steel);
  padding-top: 4px;
}

.contact-list dd { margin: 0; line-height: 1.6; }
.contact-list address { font-style: normal; }
.contact-list a { border-bottom: 1px solid var(--rule-light); }
.contact-list a:hover, .contact-list a:focus-visible { border-color: var(--orange); color: var(--orange); }

.enquiry { padding: 40px; background: var(--white); border: 1px solid var(--rule-light); }

.enquiry-hidden { position: absolute; left: -9999px; }

.field { margin-bottom: 22px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.field label {
  display: block;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
}

.optional { color: var(--steel); letter-spacing: 0.08em; text-transform: none; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 15px;
  border: 1px solid var(--rule-light);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 16px;   /* 16px stops iOS zooming in on focus */
  line-height: 1.5;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.field textarea { resize: vertical; min-height: 120px; }

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--orange);
  background: var(--white);
  outline: none;
}

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 1px;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: #c22f14; }

.field-error { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; color: #c22f14; }

.enquiry-submit { width: 100%; margin-top: 6px; justify-content: center; gap: 16px; }
.enquiry-submit[disabled] { opacity: 0.6; cursor: progress; }

.enquiry-status { margin: 18px 0 0; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.enquiry-status:empty { margin: 0; }
.enquiry-status.is-ok { color: #1a7a3c; }
.enquiry-status.is-bad { color: #c22f14; }

.enquiry-small { margin: 18px 0 0; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--steel); }


/* 14. FOOTER ============================================================= */

footer { padding: 55px var(--pad-x) 30px; background: #080a0d; color: var(--white); }

.footer-top { display: grid; grid-template-columns: auto 1fr auto; gap: 30px; align-items: center; }

.footer-brand img { width: auto; height: 52px; object-fit: contain; }

.footer-name {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #8b8e92;
}

.footer-nav {
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #a8abaf;
}

.footer-nav a:hover, .footer-nav a:focus-visible { color: var(--orange); }

.footer-legal {
  margin-top: 40px;
  padding-top: 25px;
  border-top: 1px solid #25272a;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.7;
  color: #6d7074;
}

.footer-legal p { margin: 0; max-width: 640px; }


/* 15. RESPONSIVE ========================================================= */

@media (max-width: 1000px) {
  .credentials dl { grid-template-columns: repeat(2, 1fr); }
  .credentials dl > div:nth-child(2) { border-right: 0; padding-right: 0; }
  .credentials dl > div:nth-child(3) { padding-left: 0; border-top: 1px solid var(--rule-dark); }
  .credentials dl > div:nth-child(4) { border-top: 1px solid var(--rule-dark); }

  .contact-main { grid-template-columns: 1fr; gap: 50px; }
  .service { grid-template-columns: 1fr 1.4fr; }
  .service-meta { grid-column: 1 / -1; text-align: left; }

  .frame-caption { grid-template-columns: 1fr; gap: 22px; min-height: 0; }
  .case-head { grid-template-columns: 0.7fr 2.3fr; }
  .case-layout { grid-template-columns: 1fr; }
  .case-copy { max-width: 760px; }
}

@media (max-width: 800px) {
  :root { --pad-x: 24px; }

  .intro-logo { width: 78vw; }

  .site-header { height: 72px; padding: 0 20px; }
  .brand img { height: 34px; }

  .menu-button {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    cursor: pointer;
  }

  .menu-icon, .menu-icon::before, .menu-icon::after {
    width: 18px;
    height: 2px;
    display: block;
    background: var(--orange);
    transition: transform 0.2s ease;
  }

  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }

  .menu-button[aria-expanded="true"] .menu-icon { background: transparent; }
  .menu-button[aria-expanded="true"] .menu-icon::before { top: 0; transform: rotate(45deg); }
  .menu-button[aria-expanded="true"] .menu-icon::after { top: 0; transform: rotate(-45deg); }

  .main-navigation {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 25px 24px;
    flex-direction: column;
    gap: 22px;
    background: #080a0d;
    border-top: 1px solid var(--rule-dark);
  }

  .main-navigation.is-open { display: flex; }

  .header-contact { height: auto; padding-left: 0; border-left: 0; }
  .header-call { height: auto; }
  .header-call-label { display: none; }
  .header-call-number { font-size: 15px; }
  .header-email { display: none; }

  .hero { min-height: 700px; }
  .hero-content { padding: 90px var(--pad-x) 70px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hero-index { display: none; }

  .section-pad { padding: 75px var(--pad-x); }

  .about, .section-heading, .work-heading, .site-film-heading { grid-template-columns: 1fr; gap: 0; }
  .about-mark { width: 126px; margin-bottom: 34px; }
  .work-heading > p { margin-top: 20px; }

  .site-film-heading > p { margin-top: 24px; }

  .site-film-grid {
    width: calc(100% + var(--pad-x));
    margin-top: 42px;
    padding-right: var(--pad-x);
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 390px);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--orange) var(--rule-dark);
  }

  .site-film-tile { scroll-snap-align: start; }
  .site-film-note { justify-content: flex-start; }

  .service { grid-template-columns: 1fr; gap: 14px; min-height: 0; padding: 26px 0; }
  .service:hover { padding-left: 10px; padding-right: 10px; }
  .frame { margin-top: 40px; }

  /* Touch devices get permanent arrows: there is no hover to reveal them. */
  .frame-step { opacity: 1; width: 44px; height: 44px; font-size: 22px; }
  .frame-prev { left: 10px; }
  .frame-next { right: 10px; }
  .frame-pause { right: 10px; bottom: 16px; }

  .rail-item { flex: 0 0 96px; }

  .case-list { margin-top: 52px; }
  .case-study { padding: 66px 0; }
  .case-head { grid-template-columns: 1fr; gap: 18px; }
  .case-head h3 { font-size: clamp(34px, 10vw, 52px); }
  .case-layout { margin-top: 34px; gap: 34px; }
  .case-gallery { grid-template-columns: 1fr; }
  .case-photo,
  .case-photo-wide,
  .case-gallery-one .case-photo { grid-column: 1; }
  .case-photo:not(.case-photo-wide) img,
  .case-photo img { aspect-ratio: 16 / 10; }

  .proof { grid-template-columns: 1fr; min-height: 0; }
  .proof img { height: 420px; }
  .proof-panel { padding: 70px var(--pad-x); }

  .enquiry { padding: 28px 22px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .contact-list > div { grid-template-columns: 1fr; gap: 6px; }

  .lightbox { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 8px; padding: 68px 12px 24px; }
  .lightbox-step { width: 42px; height: 42px; font-size: 24px; }
  .lightbox-content img { max-height: calc(100vh - 150px); }

  .footer-top { grid-template-columns: 1fr; gap: 22px; }
  .footer-nav { justify-content: flex-start; }
}

@media (max-width: 480px) {
  .credentials dl { grid-template-columns: 1fr; }
  .credentials dl > div { padding: 26px 0; border-right: 0; border-top: 1px solid var(--rule-dark); }
  .credentials dl > div:first-child { border-top: 0; }
  .credentials dl > div + div { padding-left: 0; }

  .caption-spec { grid-template-columns: 1fr; }
  .proof-panel ul { grid-template-columns: 1fr; }
  .proof img { height: 320px; }
}


/* Motion preferences =====================================================
   Someone who has asked for reduced motion gets no intro at all, and the
   frame holds still until they move it themselves.
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .intro { display: none; }

  .frame-track { transition: none; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}