/* ============================================================
   WILL & JOY — Design System
   Wireframe structure, dark plum & gold treatment.
   Brand textures carry the depth; imagery runs full bleed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Jost:wght@300;400;500&display=swap');

:root {
  /* Ground */
  --plum:        #231313;
  --plum-deep:   #170C0C;
  --burgundy:    #3F1512;
  --burgundy-lt: #55201B;

  /* Light surfaces, used sparingly for relief */
  --champagne:   #F3DDB4;
  --champagne-d: #E8CE9E;
  --linen:       #F7F1E4;

  /* Metal */
  --gold:        #E2BB3F;
  --gold-deep:   #B08D2E;
  --gold-light:  #EDD27A;

  /* Type on dark */
  --ink-light:   #F3DDB4;
  --ink-soft:    rgba(243, 221, 180, 0.78);
  --ink-muted:   rgba(243, 221, 180, 0.52);
  --rule:        rgba(227, 187, 63, 0.18);

  /* Type on light */
  --ink-dark:    #1A0D0D;
  --ink-dark-sf: #4A3030;
  --ink-dark-mt: #7A5F5F;
  --rule-dark:   rgba(35, 19, 19, 0.14);

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Avenir Next', system-ui, -apple-system, sans-serif;

  --header-height: 84px;
  --section-pad:   120px;
  --section-pad-sm:72px;
  --gutter:        40px;

  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1280px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  overflow-wrap: break-word;
  font-weight: 300;
  color: var(--ink-soft);
  background-color: var(--plum);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
ul  { list-style: none; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--plum);
  padding: 12px 20px; z-index: 3000;
  font-size: 1rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   TEXTURE SURFACES
   The six brand textures, each doing a specific job.
   ============================================================ */

/* Burgundy linen — chrome (header, footer). Flat enough to hold type. */
.tex-linen-burgundy {
  background-color: var(--burgundy);
  background-image: url('../images/web/texture-06.jpg');
  background-size: 620px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* Pleated plum drape — the signature dark ground. */
.tex-drape {
  background-color: var(--plum-deep);
  background-image: url('../images/web/texture-02.jpg');
  background-size: cover;
  background-position: center;
}

/* Red velvet — accent bands, calls to action. */
.tex-velvet {
  background-color: #5A0F0F;
  background-image: url('../images/web/texture-03.jpg');
  background-size: cover;
  background-position: center;
}

/* Damask — patterned relief. Sits under a wash so it never shouts. */
.tex-damask {
  background-color: var(--linen);
  background-image: url('../images/web/texture-04.jpg');
  background-size: 520px;
  background-repeat: repeat;
}

.tex-damask-fine {
  background-color: var(--linen);
  background-image: url('../images/web/texture-05.jpg');
  background-size: 460px;
  background-repeat: repeat;
}

/* Champagne linen — light relief sections. */
.tex-linen-light {
  background-color: var(--linen);
  background-image: url('../images/web/texture-01.jpg');
  background-size: 560px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}

/* Scrim: darkens a texture so type stays legible on top. */
.scrim { position: relative; isolation: isolate; }
.scrim > * { position: relative; z-index: 1; }
.scrim::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(23,12,12,0.82), rgba(23,12,12,0.92));
}
.scrim-soft::before { background: rgba(23, 12, 12, 0.62); }

/* The damask is the busiest ground on the site. This wash is deliberately
   heavy so body copy clears WCAG AA against the pattern's light passages
   as well as its dark ones — the pattern reads as texture, not competition. */
.scrim-light::before { background: rgba(249, 245, 236, 0.93); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.1;
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.6rem, 7vw, 6rem); font-weight: 300; }
h2 { font-size: clamp(2rem, 4.6vw, 3.9rem); }
h3 { font-size: clamp(1.4rem, 2.4vw, 2.1rem); }
h4 { font-size: clamp(1.25rem, 1.9vw, 1.75rem); }

p {
  font-size: clamp(1.1rem, 1.75vw, 1.5rem);
  line-height: 1.75;
  font-weight: 300;
}

/* Small caps labels were the least legible type on the site — the floor here
   is deliberately well above the old 0.68rem. */
.label {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2.15rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

.gold-rule {
  width: 56px; height: 1px;
  background: var(--gold);
  margin: 26px 0;
  opacity: 0.7;
}
.gold-rule.centred { margin-left: auto; margin-right: auto; }

/* Type inversion for light sections */
.on-light { color: var(--ink-dark); }
/* Gold headings on light grounds use the deepened gold that already clears
   contrast on the damask's worst case (see .on-light .label). */
.on-light h1, .on-light h2, .on-light h3, .on-light h4 { color: #705615; }
.on-light .standfirst { color: var(--ink-dark); }
.on-light p { color: var(--ink-dark); }
/* Deepened until the label clears 4.5:1 even where it lands on the darkest
   line of the damask pattern (measured worst case: 5.7:1). */
.on-light .label { color: #705615; }

/* ============================================================
   BUTTONS & LINKS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.2vw, 1.08rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 17px 42px;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  cursor: pointer;
  text-align: center;
  transition: background var(--transition), color var(--transition);
}
.btn:hover { background: var(--gold); color: var(--plum); }

.btn-solid { background: var(--gold); color: var(--plum); }
.btn-solid:hover { background: var(--gold-light); border-color: var(--gold-light); }

.btn-dark {
  border-color: var(--plum);
  color: var(--plum);
}
.btn-dark:hover { background: var(--plum); color: var(--champagne); }

.link-arrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.2vw, 1.1rem);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  transition: color var(--transition), border-color var(--transition);
}
.link-arrow:hover { color: var(--gold-light); border-color: var(--gold); }
.link-arrow span { display: inline-block; transition: transform var(--transition); }
.link-arrow:hover span { transform: translateX(5px); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide { max-width: 1680px; }

.section    { padding: var(--section-pad) 0; }
.section-sm { padding: var(--section-pad-sm) 0; }

/* Full-bleed: escapes any container to the full viewport width. */
.bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.page-head { padding: 84px 0 56px; }
.page-head h1 { margin-bottom: 20px; }

/* Image well */
.media { position: relative; overflow: hidden; background: var(--plum-deep); }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.2,0,0.2,1); }

/* Gradient that lifts captions off the bottom of an image */
.media-veil::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(23,12,12,0.85) 0%, rgba(23,12,12,0.15) 45%, transparent 70%);
  pointer-events: none;
}

/* ============================================================
   HEADER — burgundy linen texture, per brand
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

/* The linen needs a wash so the gold type stays crisp against it. */
.site-header::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(23,12,12,0.55), rgba(23,12,12,0.72));
  pointer-events: none;
}

.header-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.header-logo img { height: 24px; width: auto; filter: brightness(1.05) sepia(0.35) hue-rotate(-15deg) saturate(1.8); }

.header-nav ul { display: flex; align-items: center; }

.header-nav li { display: flex; align-items: center; }

.header-nav li + li::before {
  content: '·';
  color: var(--gold);
  opacity: 0.5;
  margin: 0 16px;
}

.header-nav a {
  font-size: 1.05rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.header-nav a:hover { color: var(--gold); }
.header-nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

.nav-toggle {
  display: none;
  position: relative;
  z-index: 1;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span {
  display: block; width: 26px; height: 1px;
  background: var(--champagne);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-drawer {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0;
  z-index: 999;
  padding: 8px var(--gutter) 32px;
  border-bottom: 1px solid var(--rule);
}
.nav-drawer::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: rgba(23, 12, 12, 0.86);
}
.nav-drawer.open { display: block; }
.nav-drawer ul { position: relative; z-index: 1; }
.nav-drawer li { border-bottom: 1px solid var(--rule); }
.nav-drawer li:last-child { border-bottom: 0; }
.nav-drawer a {
  display: block;
  padding: 20px 0;
  font-size: 1.05rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--champagne);
}
.nav-drawer a:hover { color: var(--gold); }

/* ============================================================
   HERO — full bleed, drape texture behind the photograph
   ============================================================ */
.hero {
  position: relative;
  height: clamp(520px, 88vh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top,
      rgba(23,12,12,0.96) 0%,
      rgba(23,12,12,0.88) 22%,
      rgba(23,12,12,0.52) 48%,
      rgba(23,12,12,0.34) 72%,
      rgba(23,12,12,0.52) 100%);
}

.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(48px, 7vh, 88px);
}

.hero h1 {
  font-style: italic;
  max-width: 16ch;
  margin-bottom: 24px;
  text-shadow: 0 2px 30px rgba(0,0,0,0.5);
}

.hero p {
  color: var(--ink-soft);
  max-width: 40ch;
  font-size: clamp(1.15rem, 1.8vw, 1.6rem);
}

/* A wordless gold hairline that pulses to draw the eye down the page. */
.hero-scroll {
  position: absolute;
  bottom: 34px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: block;
  width: 1px; height: 58px;
  background: linear-gradient(to bottom, transparent, var(--gold) 22%, transparent);
  animation: scrollPulse 2.6s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { opacity: 0.22; } 50% { opacity: 1; } }

/* ============================================================
   STATEMENT BAND — velvet
   ============================================================ */
.statement {
  text-align: center;
  padding: clamp(80px, 11vh, 140px) var(--gutter);
}

.statement blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 4vw, 3.4rem);
  line-height: 1.32;
  color: var(--champagne);
  max-width: 26ch;
  margin: 0 auto;
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

.statement .label { margin-top: 28px; }

/* ============================================================
   FEATURE PAIR (home) — full-bleed two-up
   ============================================================ */
.feature-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.feature-item { position: relative; display: block; overflow: hidden; }
.feature-item .media { aspect-ratio: 4 / 5; }
.feature-item:hover .media img { transform: scale(1.05); }

.feature-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 36px 40px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.feature-caption h3 {
  color: var(--champagne);
  font-size: clamp(1.4rem, 2.3vw, 2.1rem);
}

.feature-caption .label { white-space: nowrap; }

/* ============================================================
   WORK GRID — shared by /work and the home fold-out
   ============================================================ */
.work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.work-item { position: relative; display: block; overflow: hidden; }
.work-item .media { aspect-ratio: 4 / 5; }
.work-item:hover .media img { transform: scale(1.05); }

.work-item .caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.work-item .caption .title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  color: var(--champagne);
  line-height: 1.2;
}

.work-item .caption .meta {
  font-size: clamp(0.88rem, 1.2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
}

/* --- Home fold-out ---------------------------------------- */
.foldout-action { text-align: center; padding: 64px var(--gutter); }

.fold-caret {
  display: inline-block;
  margin-left: 10px;
  transition: transform var(--transition);
}
[aria-expanded="true"] .fold-caret { transform: rotate(180deg); }

.foldout-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.foldout-panel > .foldout-inner { overflow: hidden; min-height: 0; }
.foldout-panel.open { grid-template-rows: 1fr; }

/* Items lift in once the panel is open. */
.foldout-panel .work-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.foldout-panel.open .work-item { opacity: 1; transform: none; }
.foldout-panel.open .work-item:nth-child(1) { transition-delay: 0.10s; }
.foldout-panel.open .work-item:nth-child(2) { transition-delay: 0.16s; }
.foldout-panel.open .work-item:nth-child(3) { transition-delay: 0.22s; }
.foldout-panel.open .work-item:nth-child(4) { transition-delay: 0.28s; }
.foldout-panel.open .work-item:nth-child(5) { transition-delay: 0.34s; }
.foldout-panel.open .work-item:nth-child(6) { transition-delay: 0.40s; }

.foldout-tail {
  text-align: center;
  padding: 64px var(--gutter) 0;
}

/* No-JS / reduced-motion: the panel is simply always open. */
html:not(.js) .foldout-panel { grid-template-rows: 1fr; }
html:not(.js) .foldout-panel .work-item { opacity: 1; transform: none; }
html:not(.js) .foldout-action { display: none; }

/* ============================================================
   SERVICES — alternating full-bleed bands
   ============================================================ */
.service-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  min-height: clamp(440px, 62vh, 680px);
}

.service-band .media { height: 100%; min-height: 340px; }
.service-band:hover .media img { transform: scale(1.04); }

.service-band .band-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 88px);
}

.service-band .band-copy h2 { margin-bottom: 8px; }
.service-band .band-copy p { max-width: 46ch; }

/* Reversed bands put the image on the right. */
.service-band.reverse .media { order: 2; }

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.service-tags li {
  font-size: clamp(0.88rem, 1.1vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--rule);
  padding: 10px 18px;
}

/* On light grounds the gold loses contrast at this size — use ink with a gold edge. */
.on-light .service-tags li {
  color: var(--ink-dark-sf);
  border-color: rgba(176, 141, 46, 0.5);
  background: rgba(255, 255, 255, 0.35);
}

/* ============================================================
   PROCESS
   ============================================================ */
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.process-step { position: relative; overflow: hidden; }
.process-step .media { aspect-ratio: 3 / 4; }
.process-step:hover .media img { transform: scale(1.05); }

.process-step .step-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 60px 28px 32px;
  background: linear-gradient(to top,
    rgba(16, 8, 8, 0.96) 0%,
    rgba(16, 8, 8, 0.88) 55%,
    rgba(16, 8, 8, 0) 100%);
}

.process-step .step-number {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 3.2vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0.75;
  margin-bottom: 12px;
}

.process-step h3 { color: var(--gold); margin-bottom: 10px; }

.process-step p {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  align-items: stretch;
  /* Capped so tall desktop viewports don't stretch these into dead space. */
  min-height: min(80vh, 880px);
}

.about-portrait { position: relative; overflow: hidden; }

.about-portrait .media { height: 100%; min-height: 460px; }

/* Keep Claire's face in frame however the column reflows. */
.about-portrait .media img { object-position: center 28%; }

.about-portrait figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 28px 32px;
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

.about-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
}

.about-copy p + p { margin-top: 20px; }

.about-copy .closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.3vw, 2.05rem);
  line-height: 1.45;
  color: var(--champagne);
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

.credential {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}

.credential img { width: 120px; height: auto; flex-shrink: 0; }

.credential p {
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: 44ch;
}


/* ============================================================
   CONTACT
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  /* Capped so tall desktop viewports don't stretch these into dead space. */
  min-height: min(80vh, 880px);
}

.contact-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 6vw, 96px);
}

.contact-media { position: relative; overflow: hidden; }
.contact-media .media { height: 100%; min-height: 420px; }

.contact-details {
  margin: 30px 0 42px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.contact-details a, .contact-details span {
  font-size: clamp(1.15rem, 1.7vw, 1.5rem);
  color: var(--ink-soft);
  transition: color var(--transition);
}
.contact-details a:hover { color: var(--gold); }

.enquiry-form { border-top: 1px solid var(--rule); padding-top: 32px; }
.enquiry-form > .label { margin-bottom: 24px; }

.form-field { margin-bottom: 26px; }

.form-field label {
  display: block;
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 9px;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  font-weight: 300;
  color: var(--champagne);
  outline: none;
  border-radius: 0;
  transition: border-color var(--transition);
}

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%),
                    linear-gradient(135deg, var(--gold) 50%, transparent 50%);
  background-position: right 6px center, right 1px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.form-field select option { background: var(--plum); color: var(--champagne); }

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

.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--ink-muted); }

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-bottom-color: var(--gold); }

.form-status {
  margin-top: 20px;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: var(--champagne);
  min-height: 1.4em;
}
.form-status.error { color: #E89A8A; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { text-align: center; padding: clamp(72px, 10vh, 120px) var(--gutter); }
.cta-band h2 { font-style: italic; margin-bottom: 18px; }
.cta-band p { max-width: 46ch; margin: 0 auto 36px; }

/* ============================================================
   MONOGRAM DIVIDER
   ============================================================ */
.monogram-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 76px var(--gutter);
}
.monogram-divider::before,
.monogram-divider::after {
  content: '';
  flex: 1;
  max-width: 180px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule), transparent);
}
.monogram-divider img { height: 52px; width: auto; opacity: 0.8; }

/* ============================================================
   FOOTER — burgundy linen, matching the header
   ============================================================ */
.site-footer {
  position: relative;
  border-top: 1px solid var(--rule);
  padding: 84px 0 36px;
}
.site-footer::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(23,12,12,0.72), rgba(23,12,12,0.84));
}
.site-footer > * { position: relative; z-index: 1; }

.footer-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
}

.footer-brand img { height: 30px; width: auto; margin-bottom: 24px; filter: brightness(1.05) sepia(0.35) hue-rotate(-15deg) saturate(1.8); }

.footer-brand p {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.75;
  color: var(--ink-muted);
  max-width: 34ch;
}

.footer-col .footer-heading {
  font-family: var(--font-body);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.footer-col ul { display: flex; flex-direction: column; gap: 12px; }

.footer-col a, .footer-col p {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  color: var(--ink-soft);
  transition: color var(--transition);
}
.footer-col a:hover { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.footer-bottom p {
  font-size: clamp(0.9rem, 1.2vw, 1.05rem);
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 5, 5, 0.96);
  z-index: 2000;
  align-items: center;
  justify-content: center;
  padding: 48px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; }

.lightbox-close {
  position: absolute;
  top: 22px; right: 30px;
  background: none;
  border: none;
  color: var(--champagne);
  font-size: 1.9rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  font-family: var(--font-body);
}
.lightbox-close:hover { color: var(--gold); }

/* ============================================================
   MOTION
   ============================================================ */
.js .fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.js .fade-in.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .fade-in { opacity: 1; transform: none; }
  .foldout-panel .work-item { opacity: 1; transform: none; }

  /* Killing the animation would freeze the hairline on its 22% keyframe.
     Hold it at a visible opacity instead, so it still marks the way down. */
  .hero-scroll { opacity: 0.75; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  :root { --section-pad: 84px; --gutter: 32px; }

  .work-grid    { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }

  .service-band,
  .about-layout,
  .contact-layout { grid-template-columns: 1fr; }

  .service-band.reverse .media { order: 0; }
  /* min-height must be cleared here: combined with aspect-ratio it drives the
     computed WIDTH (380 x 1.6 = 608px), which overflowed narrow screens. */
  .service-band .media { min-height: 0; aspect-ratio: 16 / 10; }

  .about-portrait .media { min-height: 0; aspect-ratio: 4 / 5; }
  .contact-media .media  { min-height: 0; aspect-ratio: 16 / 10; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 768px) {
  :root { --section-pad: 64px; --header-height: 68px; --gutter: 22px; }

  .header-nav { display: none; }
  .nav-toggle { display: flex; }
  .header-logo img { height: 19px; }

  .hero { height: clamp(440px, 76vh, 620px); }
  .hero h1 { max-width: 100%; }
  .hero-scroll { display: none; }

  .statement blockquote { max-width: 100%; }

  .feature-pair { grid-template-columns: 1fr; }
  .work-grid    { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }

  .feature-caption { padding: 26px 24px; }
  .work-item .caption { padding: 24px 22px; }

  .credential { flex-direction: column; align-items: flex-start; gap: 18px; }

  .footer-inner { grid-template-columns: 1fr; gap: 40px; }
  .footer-brand { grid-column: span 1; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .monogram-divider { padding: 52px var(--gutter); }
  .monogram-divider::before, .monogram-divider::after { max-width: 64px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 44px 56px;
  margin-top: 48px;
}

.faq-item h3 { margin-bottom: 12px; }

.faq-item p { max-width: 46ch; }

@media (max-width: 768px) {
  .faq-grid { grid-template-columns: 1fr; gap: 34px; margin-top: 34px; }
}