/* ==========================================================================
   Park & Dell Carpentry
   Design tokens and page styles, ported from the Claude Design canvas
   (Park and Dell *.dc.html). The canvas used inline styles plus `style-hover`
   attributes; those are real CSS rules here.
   ========================================================================== */

:root {
  --paper:        #F4F1EA;  /* page background */
  --paper-warm:   #EBE6DA;  /* alternating band */
  --paper-tint:   #DDD6C6;  /* image placeholder */
  --ink:          #161815;  /* body text / dark sections */
  --ink-deep:     #0F110E;  /* footer */
  --ink-panel:    #1E211D;  /* form panel on dark */
  --body:         #3D3F3A;  /* long-form copy */
  --muted:        #5E5C54;
  --muted-dim:    #7A786F;
  --cream:        #FBF8F2;  /* text on dark */
  --cream-soft:   #EDE8DE;
  --stone:        #8C8A80;
  --tan:          #A76B3B;  /* brand accent */
  --tan-bright:   #C08048;  /* accent hover */
  --tan-light:    #D9A66E;  /* accent on dark */

  --serif:  'Newsreader', Georgia, 'Times New Roman', serif;
  --sans:   'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --shell:  1440px;
  --gutter: 40px;
  --header-h: 96px;

  --ease: cubic-bezier(.22, .7, .2, 1);
}

@media (max-width: 900px) {
  :root { --gutter: 22px; --header-h: 68px; }
}

/* --- reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* stop the sticky header covering anchored sections */
  scroll-padding-top: var(--header-h);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
/* A class-level `display` would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
input, textarea, select, button { font: inherit; color: inherit; }
::selection { background: var(--tan); color: #fff; }

h1, h2, h3 { font-family: var(--serif); font-weight: 300; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 14px 20px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.skip-link:focus { left: 12px; top: 12px; }

/* --- layout ------------------------------------------------------------- */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section       { padding-block: clamp(64px, 8vw, 110px); }
.section--tight{ padding-block: clamp(48px, 6vw, 88px); }
.section--warm { background: var(--paper-warm); }
.section--dark { background: var(--ink); color: var(--cream-soft); }

.eyebrow {
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.lede {
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.62;
  color: var(--body);
}

/* --- buttons and links -------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 34px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.btn--primary { background: var(--tan); color: #fff; }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--tan-bright); color: #fff; }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover, .btn--dark:focus-visible { background: var(--tan); color: #fff; }
.btn--ghost { color: var(--cream); border-color: rgba(251, 248, 242, .5); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgba(251, 248, 242, .14); }
.btn--outline { color: var(--ink); border-color: rgba(22, 24, 21, .3); }
.btn--outline:hover, .btn--outline:focus-visible { border-color: var(--tan); color: var(--tan); }

.link-rule {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--tan);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.link-rule:hover, .link-rule:focus-visible { color: var(--tan); }

/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(18, 20, 17, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 232, 222, .14);
}

/* The home page lays the header over the full-bleed hero. */
.site-header--overlay {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: linear-gradient(180deg, rgba(8,10,7,.66) 0%, rgba(8,10,7,.34) 60%, rgba(8,10,7,0) 100%);
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* …until you scroll, when it becomes the solid sticky bar. */
.site-header--overlay.is-stuck {
  position: fixed;
  background: rgba(18, 20, 17, .94);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(237, 232, 222, .14);
  animation: dropIn .35s var(--ease) both;
}
@keyframes dropIn { from { transform: translateY(-100%); } to { transform: none; } }

.header-bar {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* The logo is an inline SVG so it takes its colour from here. The header and
   footer are both dark, so one white lockup serves everywhere. */
.brand { display: flex; align-items: center; flex: none; color: var(--paper); }
.brand svg {
  height: 42px;
  width: auto;
  display: block;
  transition: height .25s var(--ease);
}
.site-header--overlay:not(.is-stuck) .brand svg { height: 56px; }
@media (max-width: 900px) {
  .brand svg { height: 34px; }
  .site-header--overlay:not(.is-stuck) .brand svg { height: 40px; }
}

/* On desktop the drawer is invisible plumbing: its children lay out as if
   they were direct flex items of the header bar. */
.header-drawer { display: contents; }

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav a {
  color: rgba(237, 232, 222, .8);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.nav a:hover, .nav a:focus-visible { color: var(--cream); border-bottom-color: var(--tan); }
.nav a[aria-current="page"] { color: var(--cream); border-bottom-color: var(--tan); }

.header-actions { display: flex; align-items: center; gap: 18px; flex: none; }
.header-phone {
  font-size: 14px;
  color: rgba(237, 232, 222, .8);
  white-space: nowrap;
  transition: color .2s var(--ease);
}
.header-phone:hover { color: var(--tan-light); }
.header-cta {
  display: inline-block;
  background: var(--tan);
  color: #fff;
  padding: 13px 22px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .25s var(--ease);
}
.header-cta:hover, .header-cta:focus-visible { background: var(--tan-bright); }

/* burger */
.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(237, 232, 222, .3);
  border-radius: 2px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 4px auto;
  background: var(--cream);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .burger { display: block; }

  /* The drawer becomes a real block: one panel below the bar holding the nav
     and the call/quote actions in normal flow, so nothing can overlap. */
  .header-drawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px var(--gutter) calc(24px + env(safe-area-inset-bottom));
    background: rgba(18, 20, 17, .985);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(237, 232, 222, .14);
  }
  .site-header.is-open .header-drawer {
    display: block;
    animation: drawerIn .28s var(--ease) both;
  }

  .nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
  }
  .nav a {
    padding: 17px 0;
    border-bottom: 1px solid rgba(237, 232, 222, .1);
    font-size: 15px;
  }

  .header-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 22px;
  }
  .header-phone { font-family: var(--serif); font-size: 24px; color: var(--cream); }
  .header-cta { text-align: center; padding: 17px 22px; }

  /* an open drawer needs solid ground under the overlay header too */
  .site-header--overlay.is-open { background: rgba(18, 20, 17, .985); }
}

@keyframes drawerIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 640px;
  height: 100svh;
  max-height: 980px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #12140F;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 60%;
  animation: heroZoom 2.6s var(--ease) both;
}
@keyframes heroZoom { from { transform: scale(1.08); } to { transform: none; } }

/* Two gradients: a side wash that keeps the headline legible over the bright
   half of the photo, and a top wash so the header sits on something. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(96deg, rgba(8,10,7,.86) 0%, rgba(8,10,7,.74) 24%, rgba(8,10,7,.46) 48%, rgba(8,10,7,.1) 64%, rgba(8,10,7,0) 76%),
    linear-gradient(180deg, rgba(8,10,7,.36) 0%, rgba(8,10,7,0) 28%);
}

/* Narrow screens have no "empty side" to put text on, so the wash has to come
   up from the bottom instead of in from the left. */
@media (max-width: 860px) {
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,10,7,.62) 0%, rgba(8,10,7,.22) 26%, rgba(8,10,7,.55) 58%, rgba(8,10,7,.86) 100%);
  }
}
.hero__inner {
  position: relative;
  width: 100%;
  padding-bottom: clamp(52px, 7vw, 84px);
  padding-top: 120px;
}
.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(44px, 8.4vw, 132px);
  line-height: .95;
  letter-spacing: -.025em;
  color: var(--cream);
  max-width: 14ch;
  text-wrap: balance;
}
.hero__sub {
  margin: 0 0 36px;
  font-size: clamp(16px, 1.5vw, 22px);
  line-height: 1.5;
  color: rgba(251, 248, 242, .9);
  max-width: 44ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
@media (max-width: 640px) {
  .hero { min-height: 560px; }
  .hero__img { object-position: 60% 55%; }
  .hero__actions .btn { flex: 1 1 100%; justify-content: center; }
  .hero__phone { margin-left: 0; flex: 1 1 100%; }
}

/* entrance animation, skipped for reduced-motion users */
.rise { animation: rise 1s var(--ease) both; }
.rise-2 { animation: rise 1s var(--ease) .16s both; }
.rise-3 { animation: rise 1s var(--ease) .3s both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* --- split rows (heading left, copy right) ------------------------------ */

.split {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}
.split__title {
  flex: 0 1 300px;
  font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.06;
}
.split__body {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.62;
  color: var(--body);
  max-width: 62ch;
}
.split + .split { border-top: 1px solid rgba(22, 24, 21, .14); margin-top: clamp(48px, 6vw, 88px); padding-top: clamp(48px, 6vw, 88px); }

/* --- two-up service cards (home) ---------------------------------------- */

.cardpair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px;
  background: rgba(22, 24, 21, .16);
}
.cardpair > div {
  background: var(--paper);
  padding: 44px 36px 48px;
}
.cardpair h3 {
  font-weight: 400;
  font-size: clamp(24px, 2.2vw, 28px);
  margin: 0 0 14px;
}
.cardpair p {
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

/* --- section heading row ------------------------------------------------ */

/* The single-photo scrim washed in from the left only, which was right when
   one image sat behind the headline. Across three panels the far one can be
   far brighter than the near one, so the triptych adds an even base wash and
   a top wash, and keeps the left one for the headline. */
.hero--triptych .hero__scrim {
  background:
    linear-gradient(96deg, rgba(8,10,7,.80) 0%, rgba(8,10,7,.56) 18%, rgba(8,10,7,.16) 38%, rgba(8,10,7,0) 54%),
    linear-gradient(180deg, rgba(8,10,7,.48) 0%, rgba(8,10,7,.06) 18%, rgba(8,10,7,0) 36%),
    rgba(8, 10, 7, .08);
}

@media (max-width: 860px) {
  .hero--triptych .hero__scrim {
    background:
      linear-gradient(180deg, rgba(8,10,7,.52) 0%, rgba(8,10,7,.06) 22%, rgba(8,10,7,.1) 60%, rgba(8,10,7,.3) 100%),
      rgba(8, 10, 7, .04);
  }
}

.hero--triptych h1 {
  font-size: clamp(38px, 5vw, 78px);
  line-height: 1.0;
  max-width: 9ch;
}
.hero--triptych .hero__sub { max-width: 34ch; }

/* --- hero triptych -----------------------------------------------------
   The original hero frame with three vertical images instead of one. The
   panels sit behind the same scrim, so the overlaid headline keeps its
   contrast exactly as it had over a single photo. */
.hero__panels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: #12140F;
}

.hero__panel {
  position: relative;
  overflow: hidden;
  display: block;
}

.hero__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: heroZoom 2.6s var(--ease) both;
}

.hero--triptych {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

/* Service names sit above the scrim, in flow, so the headline can never run
   into them however short the window gets. */
.hero__labels {
  position: relative;
  z-index: 1;
  padding: calc(var(--header-h) + 4px) var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  pointer-events: none;
}

/* Whatever is above it, the copy block still sits on the floor of the hero. */
.hero--triptych .hero__inner {
  margin-top: auto;
  padding-top: 24px;
}

.hero__label {
  pointer-events: auto;
  justify-self: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cream);
  padding: 8px 2px;
  border-bottom: 1px solid rgba(251, 248, 242, .45);
  transition: color .2s var(--ease), border-color .2s var(--ease);
  text-align: center;
  text-shadow: 0 1px 14px rgba(8, 10, 7, .9), 0 1px 3px rgba(8, 10, 7, .75);
}
.hero__label:hover,
.hero__label:focus-visible { color: var(--tan-light); border-color: var(--tan-light); }

/* On a phone three columns would be unreadable slivers, so they collapse into
   three stacked bands and the hero stays one screen tall. */
@media (max-width: 860px) {
  .hero__panels {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
  }
  /* One label per band collides with the headline block, which sits over the
     lower bands. The headline already names all three services, so on a phone
     the pictures carry them and the labels stand down. */
  .hero__labels { display: none; }
  .hero--triptych .hero__inner {
    padding-top: 40px;
    background: linear-gradient(180deg,
      rgba(8, 10, 7, 0) 0%,
      rgba(8, 10, 7, .62) 22%,
      rgba(8, 10, 7, .88) 62%,
      rgba(8, 10, 7, .94) 100%);
  }
}

/* --- service trio ------------------------------------------------------- */
/* The three services as equal vertical panels. White ground on purpose: it
   breaks the warm paper so the split reads as the spine of the page. */
.trio-band { background: #FFFFFF; }

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 30px);
  margin-top: clamp(28px, 3.4vw, 44px);
}

.trio__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: inherit;
  text-decoration: none;
}

.trio__media {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-tint);
}

.trio__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease);
}

.trio__panel:hover .trio__media img,
.trio__panel:focus-visible .trio__media img { transform: scale(1.04); }

.trio__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.1;
  color: var(--ink);
}

.trio__blurb {
  color: var(--body);
  font-size: 16px;
  line-height: 1.55;
  max-width: 34ch;
}

.trio__more {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--tan);
  margin-top: auto;
  padding-top: 4px;
}

.trio__panel:hover .trio__more,
.trio__panel:focus-visible .trio__more { color: var(--tan-bright); }

.trio__lede { color: var(--body); max-width: 52ch; margin: 10px 0 0; }

.headrow--stack { display: block; }
.headrow--rule {
  border-bottom: 1px solid rgba(22, 24, 21, .14);
  padding-bottom: 14px;
  margin-bottom: clamp(22px, 2.6vw, 34px);
}
.headrow--rule h2 { font-size: clamp(24px, 2.6vw, 36px); }

/* Groups need air between them, not a divider each. */
.projgroup + .projgroup { margin-top: clamp(56px, 6.5vw, 92px); }

@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; gap: clamp(28px, 5vw, 40px); }
  .trio__media { aspect-ratio: 4 / 3; }
  .trio__blurb { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .trio__media img { transition: none; }
  .trio__panel:hover .trio__media img { transform: none; }
}

.headrow {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 34px;
}
.headrow h2 { font-size: clamp(30px, 3.4vw, 50px); line-height: 1.06; }

/* --- image tiles -------------------------------------------------------- */

.tilegrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
/* At narrower widths the five tiles stop dividing evenly. Rather than leave a
   hole in the last row, the odd tile out stretches across it, which reads as a
   deliberate wide shot instead of a gap. */
@media (max-width: 1080px) {
  .tilegrid { grid-template-columns: repeat(3, 1fr); }
  .tilegrid > :last-child:nth-child(3n + 2) { grid-column: span 2; aspect-ratio: 16 / 10; }
}
@media (max-width: 620px) {
  .tilegrid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .tilegrid > :last-child:nth-child(3n + 2) { grid-column: auto; aspect-ratio: 3 / 4; }
  .tilegrid > :last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

.tile {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--paper-tint);
  overflow: hidden;
}
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease);
}
.tile:hover img, .tile:focus-visible img { transform: scale(1.045); }

/* --- project cards ------------------------------------------------------ */

.projectgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px 26px;
}
.pcard { display: flex; flex-direction: column; }
.pcard__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--paper-tint);
  overflow: hidden;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.04); }
.pcard__count {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: rgba(15, 17, 14, .78);
  color: var(--cream);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 7px 11px;
}
.pcard__head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 14px;
}
.pcard__head h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; letter-spacing: 0; }
.pcard__suburb {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tan);
  white-space: nowrap;
}
.pcard__summary { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--muted); }

/* index list for projects without photography yet */
.worklist { border-top: 1px solid rgba(22, 24, 21, .16); }
.worklist li { list-style: none; }
.worklist__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 20px 2px;
  border-bottom: 1px solid rgba(22, 24, 21, .12);
}
.worklist__name { font-size: 17px; font-weight: 500; }
.worklist__meta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-dim); }
.worklist__meta b { color: var(--tan); font-weight: 500; }

/* --- gallery / lightbox ------------------------------------------------- */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
@media (max-width: 560px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

.gallery button {
  padding: 0;
  border: 0;
  background: var(--paper-tint);
  cursor: zoom-in;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
}
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), opacity .3s; }
.gallery button:hover img { transform: scale(1.05); }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 12, 9, .95);
  padding: max(16px, env(safe-area-inset-top)) 16px 16px;
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox img {
  max-width: min(1400px, 96vw);
  max-height: 82vh;
  object-fit: contain;
  animation: lbIn .3s var(--ease) both;
}
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }

.lb-btn {
  position: absolute;
  background: rgba(251, 248, 242, .1);
  border: 1px solid rgba(251, 248, 242, .28);
  color: var(--cream);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .2s var(--ease);
}
.lb-btn:hover { background: rgba(251, 248, 242, .22); }
.lb-close { top: 18px; right: 18px; }
.lb-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lb-next  { right: 18px; top: 50%; transform: translateY(-50%); }
.lb-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(251, 248, 242, .74);
  font-size: 12px;
  letter-spacing: .16em;
}
@media (max-width: 640px) {
  .lb-btn { width: 44px; height: 44px; font-size: 18px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lightbox img { max-height: 74vh; }
}

/* --- quote / contact form ----------------------------------------------- */

.quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.quote h2 {
  font-size: clamp(30px, 3.8vw, 54px);
  line-height: 1.04;
  margin: 0 0 20px;
  color: var(--cream);
}
.quote__copy {
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.6;
  color: rgba(237, 232, 222, .78);
  max-width: 42ch;
  margin: 0 0 34px;
}
.quote__details {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid rgba(237, 232, 222, .18);
  padding-top: 28px;
}
.quote__phone {
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 34px);
  line-height: 1.1;
  transition: color .2s var(--ease);
}
.quote__phone:hover { color: var(--tan-light); }
.quote__mail { color: rgba(237, 232, 222, .78); font-size: 16px; word-break: break-word; }
.quote__mail:hover { color: var(--tan-light); }
.quote__fine { font-size: 14px; color: var(--stone); }

.panel--ink { background: var(--ink); border-color: rgba(237, 232, 222, .1); }

.panel {
  background: var(--ink-panel);
  border: 1px solid rgba(237, 232, 222, .14);
  padding: clamp(26px, 3vw, 36px) clamp(22px, 3vw, 34px) 36px;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field > span { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #9C998E; }
.field input, .field textarea, .field select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(237, 232, 222, .28);
  padding: 11px 2px;
  font-size: 16px;   /* 16px stops iOS zooming on focus */
  color: var(--cream);
  outline: none;
  border-radius: 0;
  transition: border-color .2s var(--ease);
}
.field select { background: var(--ink-panel); }
.field select option { background: var(--ink-panel); color: var(--cream); }
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--tan-light); }
.field input::placeholder, .field textarea::placeholder { color: rgba(237, 232, 222, .35); }
.field--error input, .field--error textarea, .field--error select { border-bottom-color: #E08A6B; }
.field__error { font-size: 12px; color: #E8A183; min-height: 0; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; }
form.quoteform { display: flex; flex-direction: column; gap: 20px; }

/* Honeypot. Parked off-screen rather than display:none, because the crawlers
   worth catching skip anything hidden outright. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-error {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #E8A183;
}
.form-error[hidden] { display: none; }

form.quoteform button[disabled] { opacity: .6; cursor: progress; }

.form-done {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.form-done__title { font-family: var(--serif); font-size: 34px; color: var(--cream); }
.form-done p { color: rgba(237, 232, 222, .74); font-size: 16px; line-height: 1.6; }

/* --- contact page ------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
.contact-list { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid rgba(22, 24, 21, .14); padding-top: 30px; }
.contact-list div { display: flex; flex-direction: column; gap: 4px; }
.contact-list .big { font-family: var(--serif); font-size: clamp(26px, 3vw, 32px); line-height: 1.1; }
.contact-list a:hover { color: var(--tan); }
.contact-list span:not(.eyebrow) { font-size: 17px; color: var(--body); }

/* --- page head ---------------------------------------------------------- */

.pagehead { padding-block: clamp(56px, 7vw, 90px) clamp(32px, 4vw, 48px); }
.pagehead h1 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; margin: 0 0 20px; }
.pagehead p { max-width: 620px; }

.pagehead--image {
  position: relative;
  min-height: 46vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #1A1D19;
  padding-block: 0;
}
.pagehead--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pagehead--image .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,14,11,.45) 0%, rgba(12,14,11,.25) 40%, rgba(12,14,11,.82) 100%);
}
.pagehead--image .shell { position: relative; padding-top: 110px; padding-bottom: 48px; width: 100%; }
.pagehead--image h1 { color: var(--cream); font-size: clamp(38px, 5vw, 72px); line-height: 1; margin: 0; }

/* --- services ----------------------------------------------------------- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(40px, 5vw, 56px);
}
.service__media { position: relative; aspect-ratio: 4 / 3; background: var(--paper-tint); margin-bottom: 26px; overflow: hidden; }
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service h2 { font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; margin: 0 0 16px; }
.service p { margin: 0 0 24px; font-size: 17px; line-height: 1.65; color: var(--body); }
.taglist { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.taglist li {
  font-size: 13px;
  letter-spacing: .06em;
  padding: 9px 15px;
  border: 1px solid rgba(22, 24, 21, .2);
  color: var(--body);
}

/* --- CTA band ----------------------------------------------------------- */

.ctaband {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(56px, 7vw, 80px);
}
.ctaband h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.1; color: var(--cream); max-width: 620px; }

/* --- footer ------------------------------------------------------------- */

.site-footer { background: var(--ink-deep); color: var(--stone); }
.footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  align-items: center;
  justify-content: space-between;
  padding-block: 44px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; color: var(--paper); }
.footer-brand svg { height: 38px; width: auto; align-self: flex-start; display: block; }
.footer-brand span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }

.footer-social { display: flex; gap: 12px; }
.footer-social__link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(237, 232, 222, .22);
  border-radius: 50%;
  color: var(--stone);
  transition: color .2s var(--ease), border-color .2s var(--ease), background-color .2s var(--ease);
}
.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--ink-deep);
  background: var(--paper);
  border-color: var(--paper);
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer-nav a { color: var(--stone); transition: color .2s var(--ease); }
.footer-nav a:hover { color: var(--tan-light); }
.footer-fine { font-size: 12px; }

@media (max-width: 700px) {
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* --- project film ------------------------------------------------------- */

/* The films are vertical social cuts, so the player is framed 9:16 and sits
   beside a text column rather than stretched across the page. The aspect ratio
   is written inline per video so a landscape clip would still frame correctly. */
.film__inner {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.film__meta { flex: 1 1 320px; max-width: 46ch; }
.film__meta h2 {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.08;
  margin: 14px 0 16px;
}
.film__meta p { font-size: 17px; line-height: 1.62; color: var(--body); }
.film__runtime {
  display: inline-block;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-dim);
}

.film__stack {
  flex: 1 1 360px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.film__player {
  flex: 0 1 360px;
  width: 100%;
  max-width: 360px;
  margin: 0;
}
/* A landscape clip gets the full column instead of a phone-width frame. */
.film__player--wide { flex-basis: 100%; max-width: 720px; }

.film__player video {
  width: 100%;
  height: auto;
  display: block;
  background: #0F110E;
  border-radius: 3px;
  box-shadow: 0 18px 48px rgba(15, 17, 14, .24);
}

/* The films encode to 608px wide. Holding the frame at 360px keeps that
   comfortably above 1.5x on every screen, phone included. A portrait clip
   stretched edge-to-edge on mobile would be showing more pixels than it has. */
@media (max-width: 720px) {
  .film__stack { justify-content: center; }
}

/* --- reveal on scroll --------------------------------------------------- */

/* Scoped to .js so that if the script never runs, every .reveal block is
   simply visible rather than permanently transparent. */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}