:root {
  --bg: #f4f0e8;
  --bg-2: #ede7dd;
  --card: #f9f7f2;
  --text: #1b1814;
  --muted: #6c645d;
  --line: rgba(27, 24, 20, 0.12);
  --line-strong: rgba(27, 24, 20, 0.24);
  --white: #ffffff;
  --shadow: 0 18px 50px rgba(18, 15, 12, 0.12);
  --radius: 24px;
  --radius-sm: 16px;
  --shell: min(1240px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  background: var(--text);
  color: var(--white);
  padding: 12px 16px;
  z-index: 100;
  border-radius: 12px;
}
.skip-link:focus { top: 16px; }

.shell { width: var(--shell); margin: 0 auto; }
.section { padding: 112px 0; }
.section-kicker {
  margin: 0 0 20px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 28px;
  align-items: end;
  margin-bottom: 32px;
}
.section-head h2,
.studio-intro h2,
.showcase-copy h2,
.process-intro h2,
.contact-copy h2 {
  margin: 0;
  font-size: clamp(2.1rem, 4.4vw, 4.6rem);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.head-note,
.body-copy p,
.showcase-copy p,
.contact-copy p,
.service-card p,
.step p,
.section-footnote { color: var(--muted); }
.body-copy { max-width: 520px; }
.two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; }

.site-loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #171411;
  color: var(--white);
  z-index: 120;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.site-loader.is-hidden { opacity: 0; visibility: hidden; }
.loader-mark {
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.08em;
  font-weight: 800;
}
.loader-rule {
  width: min(260px, 48vw);
  height: 1px;
  background: rgba(255,255,255,0.14);
  position: relative;
  margin: 18px 0 12px;
  overflow: hidden;
}
.loader-rule span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: rgba(255,255,255,0.84);
  animation: loadline 1.5s ease infinite;
}
.loader-copy { font-size: 12px; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.75; }
@keyframes loadline {
  from { transform: translateX(-120%); }
  to { transform: translateX(300%); }
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1280px, calc(100vw - 28px));
  z-index: 80;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px);
  border-radius: 22px;
  color: var(--white);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.site-header.scrolled {
  background: rgba(248, 244, 238, 0.88);
  border-color: rgba(27, 24, 20, 0.08);
  color: var(--text);
  box-shadow: 0 8px 30px rgba(20,18,15,0.1);
}
.brand { display: inline-flex; align-items: baseline; gap: 10px; }
.brand-mark {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.08em;
}
.brand-sub,
.footer-brand span {
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.9;
}
.desktop-nav { display: flex; justify-content: center; gap: 22px; }
.desktop-nav a,
.header-cta,
.mobile-panel a { position: relative; }
.desktop-nav a::after,
.mobile-panel a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transition: right 0.25s ease;
}
.desktop-nav a:hover::after,
.mobile-panel a:hover::after { right: 0; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-cta {
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.18);
}
.site-header.scrolled .header-cta {
  background: rgba(27,24,20,0.05);
  border-color: rgba(27,24,20,0.08);
}
.menu-button {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.16);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.site-header.scrolled .menu-button {
  border-color: rgba(27,24,20,0.1);
  background: rgba(27,24,20,0.05);
}
.menu-button span {
  width: 18px;
  height: 1.5px;
  background: currentColor;
  display: block;
}
.mobile-panel {
  position: fixed;
  inset: 84px 14px auto 14px;
  z-index: 75;
  background: rgba(248, 244, 238, 0.98);
  border: 1px solid rgba(27,24,20,0.08);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.mobile-panel nav { display: grid; gap: 10px; }
.mobile-panel a {
  padding: 12px 0;
  border-bottom: 1px solid rgba(27,24,20,0.08);
  font-size: 1.05rem;
}
.mobile-panel p { color: var(--muted); margin: 16px 0 0; }

.hero {
  position: relative;
  min-height: 100svh;
  color: var(--white);
  overflow: hidden;
  background: #171411;
}
.hero-slides,
.hero-slide,
.hero-scrim { position: absolute; inset: 0; }
.hero-slide {
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1s ease, transform 5s ease;
}
.hero-slide.is-active { opacity: 1; transform: scale(1); }
.hero-scrim {
  background:
    linear-gradient(180deg, rgba(13,11,9,0.28) 0%, rgba(13,11,9,0.52) 58%, rgba(13,11,9,0.78) 100%),
    radial-gradient(circle at 70% 10%, rgba(255,255,255,0.08), transparent 40%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 360px);
  align-items: end;
  gap: 32px;
  padding: 160px 0 54px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.eyebrow span {
  display: inline-block;
  width: 44px;
  height: 1px;
  background: rgba(255,255,255,0.7);
}
.hero-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.06em;
  max-width: 10ch;
}
.hero-copy h1 em,
.process-intro h2 em { font-family: "Cormorant Garamond", Georgia, serif; font-style: italic; font-weight: 500; letter-spacing: -0.055em; }
.hero-text {
  max-width: 560px;
  font-size: clamp(1rem, 1.7vw, 1.2rem);
  color: rgba(255,255,255,0.82);
  margin: 24px 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.button:hover { transform: translateY(-2px); }
.button-solid {
  background: var(--white);
  color: var(--text);
}
.button-ghost {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
  color: var(--white);
}
.button-full { width: 100%; }
.hero-meta {
  align-self: end;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 20px;
}
.meta-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.62);
  margin-bottom: 10px;
}
.hero-meta strong { display: block; font-size: 1.12rem; }
.hero-meta p { color: rgba(255,255,255,0.75); margin: 8px 0 0; }
.hero-progress-wrap {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.progress-track {
  position: relative;
  height: 2px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 25%;
  background: var(--white);
}
.hero-next {
  background: transparent;
  border: 0;
  color: inherit;
  padding: 0;
}
.hero-side-note {
  position: absolute;
  right: -112px;
  top: 50%;
  transform: rotate(90deg) translateY(-50%);
  transform-origin: right top;
  z-index: 2;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.intro-strip { border-bottom: 1px solid var(--line); background: var(--bg); }
.ticker { overflow: hidden; white-space: nowrap; padding: 16px 0; }
.ticker-track {
  display: inline-block;
  min-width: 200%;
  animation: ticker 24s linear infinite;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.ticker-track span { margin: 0 14px; }
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.work-section { padding-top: 112px; padding-bottom: 112px; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.filter {
  border-radius: 999px;
  padding: 10px 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text);
}
.filter.is-active {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}
.project-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}
.project-card {
  grid-column: span 4;
  border: 0;
  background: var(--card);
  border-radius: var(--radius);
  overflow: hidden;
  text-align: left;
  box-shadow: 0 6px 24px rgba(20,18,15,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(20,18,15,0.12);
}
.project-card.is-featured { grid-column: span 8; }
.project-card[hidden] { display: none; }
.project-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.project-card.is-featured .project-media { aspect-ratio: 16 / 9; }
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.project-card:hover .project-media img { transform: scale(1.04); }
.project-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  color: var(--text);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.project-body { padding: 18px 18px 20px; }
.project-meta {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 0.94rem;
}
.project-body h3 {
  margin: 10px 0 10px;
  font-size: clamp(1.35rem, 2vw, 2rem);
  letter-spacing: -0.04em;
}
.project-body p { margin: 0 0 14px; color: var(--muted); }
.project-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.section-footnote { margin-top: 18px; font-size: 0.92rem; }

.showcase {
  padding: 0 0 110px;
}
.showcase-image-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
  align-items: start;
}
.showcase-copy { grid-column: span 4; padding-top: 12px; }
.tile {
  grid-column: span 4;
  border-radius: 24px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 8px 30px rgba(20,18,15,0.08);
}
.tile-large { grid-column: span 8; }
.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
}
.tile-large img { aspect-ratio: 16 / 10; }

.services-section { padding-top: 12px; }
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.service-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: rgba(255,255,255,0.46);
}
.service-card span {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.service-card h3 { margin: 0 0 10px; font-size: 1.22rem; letter-spacing: -0.03em; }
.service-card p { margin: 0; }

.process-band {
  background: #171411;
  color: var(--white);
  padding: 112px 0;
  margin-top: 112px;
}
.process-shell {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.process-intro .section-kicker,
.process-intro p,
.step p { color: rgba(255,255,255,0.68); }
.process-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.step {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 24px;
  background: rgba(255,255,255,0.04);
}
.step span {
  display: inline-block;
  margin-bottom: 24px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
}
.step h3 { margin: 0 0 10px; font-size: 1.3rem; }
.step p { margin: 0; }

.image-rail-section { padding-top: 112px; padding-bottom: 112px; }
.image-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
}
.image-rail img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(20,18,15,0.08);
}
.image-rail::-webkit-scrollbar { height: 8px; }
.image-rail::-webkit-scrollbar-thumb { background: rgba(27,24,20,0.25); border-radius: 999px; }

.contact-section {
  padding: 20px 0 120px;
}
.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 28px;
  align-items: start;
}
.contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  color: var(--muted);
}
.contact-links a { color: var(--text); }
.enquiry-card {
  border: 1px solid var(--line);
  border-radius: 28px;
  background: rgba(255,255,255,0.54);
  padding: 24px;
  box-shadow: 0 8px 30px rgba(20,18,15,0.05);
}
.field-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.enquiry-card label {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.96rem;
}
.enquiry-card input,
.enquiry-card select,
.enquiry-card textarea {
  width: 100%;
  border: 1px solid rgba(27,24,20,0.14);
  border-radius: 16px;
  background: rgba(255,255,255,0.9);
  min-height: 52px;
  padding: 14px 15px;
  color: var(--text);
}
.enquiry-card textarea {
  min-height: 148px;
  resize: vertical;
}
.form-response {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}
.form-response.is-success { color: #244b2a; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 44px;
}
.footer-shell {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
}
.footer-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.08em;
}
.footer-shell p { color: var(--muted); margin: 12px 0 0; max-width: 380px; }
.footer-meta { display: grid; gap: 8px; text-align: right; color: var(--muted); font-size: 0.94rem; }

.project-dialog {
  width: min(1100px, calc(100vw - 24px));
  max-width: 1100px;
  border: 0;
  border-radius: 30px;
  padding: 0;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 28px 80px rgba(13,11,9,0.3);
}
.project-dialog::backdrop { background: rgba(11, 10, 8, 0.65); backdrop-filter: blur(4px); }
.dialog-close {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 5;
  border: 1px solid rgba(27,24,20,0.1);
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  min-height: 42px;
  padding: 0 14px;
}
.dialog-content {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  min-height: min(780px, 86vh);
}
.dialog-gallery {
  background: #111;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
.dialog-hero-media {
  min-height: 0;
}
.dialog-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.dialog-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(255,255,255,0.06);
}
.dialog-thumb {
  border: 0;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0.65;
}
.dialog-thumb.is-active { opacity: 1; outline: 2px solid rgba(255,255,255,0.75); }
.dialog-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.dialog-panel {
  padding: 34px 28px 28px;
  overflow: auto;
}
.dialog-panel .badge {
  display: inline-flex;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(27,24,20,0.06);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--muted);
}
.dialog-panel h3 {
  margin: 16px 0 10px;
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 0.94;
  letter-spacing: -0.05em;
}
.dialog-panel p { color: var(--muted); }
.dialog-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 24px 0;
}
.dialog-meta div {
  padding: 12px;
  border-radius: 18px;
  background: rgba(27,24,20,0.04);
}
.dialog-meta span {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.dialog-list {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}
.dialog-list li + li { margin-top: 8px; }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1080px) {
  .project-card, .project-card.is-featured { grid-column: span 6; }
  .showcase-copy, .tile, .tile-large { grid-column: span 6; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-shell, .process-shell, .two-col, .section-head, .dialog-content { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 82px 0; }
  .site-header {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
  .desktop-nav, .header-cta { display: none; }
  .menu-button { display: inline-flex; }
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 132px;
  }
  .hero-side-note { display: none; }
  .hero-copy h1 { max-width: 12ch; }
  .project-card, .project-card.is-featured,
  .showcase-copy, .tile, .tile-large { grid-column: span 12; }
  .service-grid, .process-steps, .field-row { grid-template-columns: 1fr; }
  .footer-shell { flex-direction: column; align-items: start; }
  .footer-meta { text-align: left; }
  .dialog-content { min-height: auto; }
  .dialog-panel { padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* Editorial contrast for project and section headings using commercially usable open fonts. */
.section-head h2, .studio-intro h2, .showcase-copy h2, .process-intro h2, .contact-copy h2 { text-wrap: balance; }
.hero-copy h1 { text-wrap: balance; }
.brand-mark, .footer-brand, .loader-mark { font-weight: 800; letter-spacing: -0.085em; }

/* VERSION 3 — EDGE-TO-EDGE EDITORIAL SYSTEM */
:root { --shell: min(1300px, calc(100vw - 72px)); }
body { background: #f5f2eb; }
.section { padding-top: clamp(100px, 11vw, 170px); padding-bottom: clamp(100px, 11vw, 170px); }
.section-kicker { font-weight: 600; letter-spacing: .25em; }
.section-head { margin-bottom: 48px; }
.section-head h2 { letter-spacing: -.052em; }
.section-head .head-note { max-width: 380px; margin-bottom: 2px; line-height: 1.7; }

/* A true full-width image break, with text restrained inside the site grid. */
.feature-panorama { position: relative; min-height: min(900px, 92svh); background: #352f2c; color: #fff; isolation: isolate; overflow: hidden; }
.feature-panorama-image { position: absolute; inset: 0; background: url('assets/pink-garden-view.webp') 50% 50% / cover no-repeat; transform: scale(1.03); transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.feature-panorama:hover .feature-panorama-image { transform: scale(1); }
.feature-panorama-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(12,10,10,.22) 0%, rgba(12,10,10,.12) 35%, rgba(12,10,10,.68) 100%); }
.feature-panorama-content { min-height: inherit; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; padding-top:60px; padding-bottom:75px; }
.feature-kicker { font-size:12px; letter-spacing:.22em; font-weight:600; }
.feature-kicker span { opacity:.55; margin:0 9px; }
.feature-panorama-bottom { display:flex; align-items:end; justify-content:space-between; gap:40px; }
.feature-panorama-bottom h2 { font-size:clamp(4rem,8.5vw,9rem); line-height:.82; letter-spacing:-.068em; font-weight:600; margin:0; }
.feature-panorama-bottom h2 em { font-family:'Cormorant Garamond',Georgia,serif; font-weight:400; letter-spacing:-.065em; }
.feature-panorama-bottom p { font-size:clamp(1rem,1.4vw,1.2rem); max-width:410px; line-height:1.7; color:rgba(255,255,255,.86); margin:26px 0 0; }
.feature-open { display:flex; align-items:center; justify-content:space-between; gap:60px; flex-shrink:0; color:#fff; background:transparent; border:1px solid rgba(255,255,255,.65); border-radius:999px; padding:20px 26px; transition:background .25s,color .25s; }
.feature-open:hover { background:#fff; color:#171411; }
.feature-side-label { position:absolute; right:28px; top:50%; writing-mode:vertical-rl; font-size:10px; letter-spacing:.25em; opacity:.75; z-index:3; }

/* Let the work read like an editorial image index instead of conventional cards. */
.work-section { width:min(1560px,calc(100vw - 72px)); }
.project-grid { gap:clamp(18px,2.6vw,42px) clamp(16px,2vw,32px); }
.project-card, .project-card.is-featured { background:transparent; border-radius:0; box-shadow:none; }
.project-card:hover { box-shadow:none; transform:none; }
.project-media, .project-card.is-featured .project-media { border-radius:2px; }
.project-card.is-featured .project-media { aspect-ratio: 16/10; }
.project-card:not(.is-featured) .project-media { aspect-ratio:4/5; }
.project-body { padding:19px 0 12px; }
.project-body h3 { font-size:clamp(1.4rem,2.2vw,2.3rem); }
.project-body p { line-height:1.65; max-width:540px; }
.project-badge { top:15px; left:15px; font-weight:600; background:rgba(245,242,235,.9); backdrop-filter:blur(8px); }
.project-footer { font-weight:600; }

/* Full-bleed material collage; maintain a predictable internal rhythm. */
.showcase { background:#e9e5dc; padding:clamp(92px,10vw,150px) 0; }
.showcase-image-grid { width:min(1760px,calc(100vw - 32px)); gap:clamp(12px,1.6vw,26px); }
.showcase-copy { padding:28px clamp(15px,3vw,50px) 0; }
.showcase-copy h2 { font-size:clamp(2.4rem,3.8vw,4.5rem); }
.tile { border-radius:2px; box-shadow:none; }
.tile img { transition:transform .65s ease; }
.tile:hover img { transform:scale(1.025); }

/* Make the closing gallery genuinely edge-to-edge. */
.image-rail-section { width:100%; padding-top:0; padding-bottom:clamp(90px,10vw,150px); overflow:hidden; }
.image-rail { grid-auto-columns:minmax(270px, 28vw); padding-left:max(36px,calc((100vw - 1300px)/2)); padding-right:max(36px,calc((100vw - 1300px)/2)); gap:clamp(12px,1.5vw,24px); scrollbar-width:thin; }
.image-rail img { border-radius:2px; box-shadow:none; }

/* Less visual chrome: the navigation floats, while copy stays aligned. */
.site-header { width:min(1360px,calc(100vw - 40px)); border-radius:999px; padding:10px 15px 10px 23px; }
.hero-inner { grid-template-columns:minmax(0,1.2fr) minmax(265px,325px); }
.hero-copy h1 { font-size:clamp(3.7rem,7.9vw,8.9rem); }
.hero-meta { border-radius:15px; }

@media(max-width:1080px) {
 .feature-panorama-bottom { align-items:start; flex-direction:column; }
 .feature-panorama-content { padding-bottom:55px; }
 .showcase-copy { padding:20px; }
}
@media(max-width:760px) {
 :root { --shell:calc(100vw - 36px); }
 .section { padding-top:82px; padding-bottom:82px; }
 .site-header { width:calc(100vw - 24px); padding:8px 10px 8px 17px; }
 .feature-panorama { min-height:min(780px,88svh); }
 .feature-panorama-image { background-position:58% center; }
 .feature-panorama-content { padding-top:100px; padding-bottom:40px; }
 .feature-panorama-bottom h2 { font-size:clamp(3.9rem,14vw,6rem); }
 .feature-open { min-width:230px; padding:17px 21px; }
 .feature-side-label { display:none; }
 .work-section { width:calc(100vw - 36px); }
 .project-card:not(.is-featured) .project-media { aspect-ratio:4/4.3; }
 .showcase { padding:80px 0; }
 .showcase-image-grid { width:calc(100vw - 24px); }
 .showcase-copy { padding:10px 8px 32px; }
 .image-rail { grid-auto-columns:minmax(250px,72vw); padding-left:18px; padding-right:18px; }
 .hero-copy h1 { font-size:clamp(3.5rem,12vw,5.8rem); }
}
@media(prefers-reduced-motion:reduce) { .feature-panorama-image, .tile img { transition:none; transform:none!important; } }

/* V4 — warm timber identity, restrained hero and mobile-first refinements */
:root { --bg:#f1e9dc; --bg-2:#e9ddca; --card:#f7f1e7; --text:#292016; --muted:#6e5944; --line:rgba(83,60,36,.15); --line-strong:rgba(83,60,36,.26); }
body { background:#f1e9dc; }
.site-header.scrolled, .mobile-panel { background:rgba(245,237,224,.96); }
.intro-strip { background:#e9ddca; }
.showcase { background:#e5d8c5; }
.process-band { background:#33261b; }
.feature-panorama { background:#4e3928; }
.hero { background:#3c2d20; }
.hero-scrim { background:linear-gradient(90deg,rgba(39,27,17,.68) 0%,rgba(39,27,17,.28) 64%,rgba(39,27,17,.34) 100%),linear-gradient(0deg,rgba(39,27,17,.55),transparent 36%); }
.hero-inner { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:clamp(55px,11vh,115px); padding-top:clamp(150px,22vh,230px); padding-bottom:clamp(38px,7vh,72px); }
.hero-copy { max-width:850px; }
.hero-copy h1 { max-width:12ch; font-size:clamp(4.4rem,9vw,10rem); line-height:.88; letter-spacing:-.075em; }
.hero-copy h1 em { color:#ead2af; }
.hero-copy .eyebrow { font-weight:600; }
.hero-text { margin-top:26px; font-size:clamp(1rem,1.35vw,1.22rem); }
.hero-actions { margin-top:28px; }
.hero-progress-minimal { width:min(360px,100%); align-self:flex-end; padding:0; margin:0; color:rgba(255,255,255,.84); }
.hero-progress-minimal .progress-track { min-width:60px; }
.hero-progress-minimal button { white-space:nowrap; }
.hero-slides .hero-slide:first-child { background-position:50% 42%; }
.hero-slides .hero-slide:nth-child(2) { background-position:center 52%; }
.hero-slides .hero-slide:nth-child(3) { background-position:center 55%; }
.feature-panorama-image { background-image:linear-gradient(rgba(84,50,20,.13),rgba(84,50,20,.13)),url('assets/pink-garden-view.webp'); }
.filter.is-active { background:#3b2b1e; border-color:#3b2b1e; }
.button-solid { background:#ead5b7; color:#291e15; }
.button-solid:hover { background:#f6e8d0; }
.service-card { background:rgba(255,250,240,.38); }
.contact-section { background:#f1e9dc; }
.enquiry-card { background:rgba(255,250,241,.68); }

/* Phone sizes: no clipped headings, compact hero, predictable touch targets. */
@media(max-width:760px) {
 html, body { max-width:100%; overflow-x:clip; }
 .site-header { top:12px; height:66px; padding:8px 10px 8px 16px; }
 .brand-mark { font-size:1.48rem; }
 .brand-sub { font-size:9px; letter-spacing:.22em; }
 .menu-button { width:45px; height:45px; }
 .mobile-panel { inset:88px 12px auto; max-height:calc(100dvh - 104px); overflow-y:auto; }
 .hero, .hero-inner { min-height:100svh; }
 .hero-inner { padding:128px 0 34px; gap:46px; justify-content:flex-end; }
 .hero-copy { max-width:100%; }
 .hero-copy .eyebrow { font-size:10px; margin-bottom:19px; letter-spacing:.2em; }
 .eyebrow span { width:26px; }
 .hero-copy h1 { font-size:clamp(3.6rem,14vw,6.1rem); max-width:9ch; line-height:.89; }
 .hero-text { font-size:1rem; line-height:1.5; max-width:270px; margin-top:18px; }
 .hero-actions { margin-top:22px; }
 .hero-actions .button { min-height:52px; padding:0 21px; }
 .hero-progress-minimal { width:100%; align-self:stretch; gap:12px; font-size:10px; }
 .hero-scrim { background:linear-gradient(180deg,rgba(35,25,18,.30) 0%,rgba(35,25,18,.16) 28%,rgba(35,25,18,.84) 95%); }
 .hero-slides .hero-slide { background-position:52% center; }
 .hero-side-note { display:none; }
 .studio-intro .two-col { gap:17px; }
 .studio-intro h2, .section-head h2, .showcase-copy h2, .process-intro h2, .contact-copy h2 { font-size:clamp(2.2rem,9vw,3.6rem); line-height:1.04; overflow-wrap:break-word; }
 .section-head { gap:20px; margin-bottom:29px; }
 .section-head .head-note { font-size:14px; line-height:1.65; }
 .filters { gap:8px; margin-bottom:22px; }
 .filter { padding:10px 13px; font-size:12px; min-height:42px; }
 .project-grid { gap:36px; }
 .project-card, .project-card.is-featured { width:100%; }
 .project-media { overflow:hidden; }
 .project-card.is-featured .project-media { aspect-ratio:4/4.2; }
 .project-body h3 { font-size:1.7rem; }
 .project-body p { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; }
 .project-meta { font-size:12px; }
 .feature-panorama { min-height:700px; }
 .feature-panorama-content { padding-top:48px; padding-bottom:38px; }
 .feature-panorama-bottom { gap:25px; }
 .feature-panorama-bottom h2 { font-size:clamp(3.35rem,13vw,5.5rem); }
 .feature-panorama-bottom p { font-size:14px; line-height:1.65; }
 .showcase-copy { padding:0 4px 22px; }
 .tile img, .tile-large img { aspect-ratio:4/4.4; }
 .service-card { padding:22px; }
 .process-band { margin-top:0; padding:78px 0; }
 .contact-shell { gap:38px; }
 .enquiry-card { padding:18px; border-radius:19px; }
 .dialog-panel { padding:28px 20px 30px; }
 .dialog-content { display:flex; flex-direction:column; max-height:85dvh; overflow:auto; }
 .dialog-gallery { grid-template-rows:auto auto; }
 .dialog-hero-media img { height:auto; aspect-ratio:4/3; }
 .dialog-thumbs { grid-auto-columns:minmax(56px,1fr); }
 .dialog-meta { gap:8px; }
 .dialog-meta div { padding:10px; }
 .dialog-close { top:9px; right:9px; }
}
@media(max-width:390px) {
 .hero-copy h1 { font-size:clamp(3.35rem,13.5vw,4.5rem); }
 .brand { gap:7px; }
 .hero-inner { padding-bottom:24px; gap:29px; }
 .hero-progress-minimal { width:100%; }
 .feature-panorama-bottom h2 { font-size:3.2rem; }
}
@media(max-height:700px) and (max-width:760px) {
 .hero-inner { padding-top:105px; padding-bottom:22px; gap:22px; }
 .hero-copy h1 { font-size:clamp(3.1rem,11vw,4.6rem); }
 .hero-text { margin-top:12px; }
 .hero-actions { margin-top:15px; }
}

/* V4: intentionally quiet, mobile-first hero and warm timber interaction palette. */
:root { --wood:#936e4b; --wood-dark:#644729; --wood-light:#d7c2a5; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid var(--wood); outline-offset:3px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: rgba(147,110,75,.17); }
::selection { background:var(--wood-light); color:var(--text); }
.hero-inner { grid-template-columns:1fr; align-items:end; padding-bottom:clamp(74px,8vw,105px); }
.hero-copy { align-self:end; width:min(800px,100%); }
.hero-copy h1 { max-width:none; font-size:clamp(5rem,10vw,10.8rem); line-height:.8; letter-spacing:-.075em; }
.hero-copy .eyebrow { margin-bottom:25px; }
.hero-copy h1 em { color:#f3e3cc; }
.hero-text { max-width:380px; margin-top:28px; line-height:1.7; }
.hero-primary { margin-top:28px; background:var(--wood-light); min-width:188px; color:#201a15; justify-content:space-between; font-weight:600; }
.hero-primary:hover { background:#ecd9bd; }
.hero-mobile-progress { position:absolute; bottom:38px; right:0; width:200px; display:flex; align-items:center; gap:12px; font-size:11px; letter-spacing:.14em; }
.hero-mobile-progress .progress-track { flex:1; }
.hero-next-floating { position:absolute; bottom:28px; right:220px; background:transparent; border:1px solid rgba(255,255,255,.55); padding:9px 14px; border-radius:999px; font-size:11px; letter-spacing:.08em; }
.hero-next-floating:hover { background:rgba(255,255,255,.15); }
.filter.is-active, .enquiry-card .button-solid { background:var(--wood-dark); border-color:var(--wood-dark); color:#fff; }
.filter:hover:not(.is-active), .project-card:hover .project-footer, .contact-links a:hover { color:var(--wood-dark); }
.service-card:hover { border-color:var(--wood-light); }
.project-badge { color:var(--wood-dark); }
.menu-button { touch-action:manipulation; }
.site-header.scrolled .menu-button { color:var(--wood-dark); }
.hero-slide { background-position:center; }
@media(max-width:760px) {
 html, body { overflow-x:clip; }
 .hero { min-height:100svh; }
 .hero-inner { min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch; padding-top:128px; padding-bottom:111px; gap:0; }
 .hero-copy { width:100%; }
 .hero-copy h1 { font-size:clamp(4.4rem,17vw,7.4rem); line-height:.82; letter-spacing:-.068em; }
 .hero-copy .eyebrow { font-size:10px; margin-bottom:18px; }
 .hero-text { max-width:285px; margin-top:20px; font-size:15px; line-height:1.55; }
 .hero-primary { margin-top:23px; min-height:48px; padding:0 20px; }
 .hero-mobile-progress { bottom:34px; left:0; right:auto; width:165px; font-size:10px; }
 .hero-next-floating { bottom:25px; right:0; padding:11px 13px; }
 .site-header { top:10px; border-radius:18px; min-height:58px; }
 .brand-mark { font-size:1.46rem; }
 .brand-sub { font-size:9px; }
 .menu-button { height:42px; width:42px; }
 .mobile-panel { inset:78px 12px auto; max-height:calc(100svh - 95px); overflow:auto; }
 .mobile-panel a { font-size:1.15rem; padding:14px 0; }
 .section-head { gap:14px; margin-bottom:26px; }
 .section-head h2 { font-size:clamp(2.4rem,10.8vw,4.4rem); }
 .section-head .head-note { font-size:14px; line-height:1.6; }
 .studio-intro h2 { font-size:clamp(2.6rem,11vw,4rem); line-height:1.02; }
 .studio-intro .two-col { gap:18px; }
 .body-copy p { line-height:1.75; }
 .filters { flex-wrap:nowrap; overflow-x:auto; max-width:100%; padding:0 0 10px; margin-bottom:18px; scrollbar-width:none; }
 .filters::-webkit-scrollbar { display:none; }
 .filter { flex:0 0 auto; white-space:nowrap; min-height:44px; }
 .project-grid { display:grid; grid-template-columns:1fr; gap:32px; }
 .project-card,.project-card.is-featured { grid-column:1 / -1; }
 .project-card.is-featured .project-media { aspect-ratio: 4 / 4.5; }
 .project-card:not(.is-featured) .project-media { aspect-ratio:4/4; }
 .project-body { padding:14px 2px 0; }
 .project-body h3 { font-size:1.65rem; }
 .project-body p { font-size:14px; }
 .project-meta { font-size:12px; }
 .project-footer { min-height:48px; font-size:11px; }
 .feature-panorama { min-height:82svh; }
 .feature-panorama-content { padding-top:96px; padding-bottom:38px; }
 .feature-panorama-bottom { gap:27px; }
 .feature-panorama-bottom h2 { font-size:clamp(3.7rem,14vw,5.8rem); }
 .feature-panorama-bottom p { max-width:290px; margin-top:16px; font-size:14px; }
 .feature-open { min-height:50px; }
 .showcase-image-grid { grid-template-columns:1fr 1fr; gap:10px; }
 .showcase-copy { grid-column:1/-1; padding:0 5px 20px; }
 .showcase-copy h2 { font-size:clamp(2.4rem,10.5vw,4rem); }
 .showcase-copy p { font-size:14px; line-height:1.7; }
 .tile, .tile-large { grid-column:span 1; }
 .tile-large { grid-column:1/-1; }
 .tile img { aspect-ratio:3/4; }
 .tile-large img { aspect-ratio:4/3; }
 .service-grid { gap:12px; }
 .service-card { padding:22px; border-radius:18px; }
 .service-card span { margin-bottom:14px; }
 .process-band { margin-top:70px; padding:80px 0; }
 .process-shell { gap:28px; }
 .process-steps { gap:12px; }
 .step { padding:21px; border-radius:18px; }
 .step span { margin-bottom:12px; }
 .contact-section { padding:20px 0 85px; }
 .contact-shell { gap:25px; }
 .contact-copy h2 { font-size:clamp(2.8rem,12vw,4.5rem); }
 .enquiry-card { padding:18px; border-radius:19px; }
 .enquiry-card input,.enquiry-card select,.enquiry-card textarea { font-size:16px; }
 .footer-shell { gap:18px; }
 .footer-meta { font-size:12px; }
 .dialog-content { display:block; max-height:86svh; overflow-y:auto; }
 .dialog-gallery { display:block; }
 .dialog-hero-media img { width:100%; max-height:42svh; aspect-ratio:4/3; object-fit:cover; }
 .dialog-thumbs { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; padding:6px; overflow-x:auto; }
 .dialog-thumb { border-radius:5px; }
 .dialog-panel { padding:26px 19px 30px; overflow:visible; }
 .dialog-panel h3 { font-size:clamp(2rem,9.5vw,3rem); }
 .dialog-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .dialog-meta strong { overflow-wrap:anywhere; }
 .dialog-close { right:10px; top:10px; }
}
@media(max-width:370px) {
 .hero-copy h1 { font-size:clamp(3.9rem,16.8vw,5rem); }
 .brand-sub { letter-spacing:.18em; }
 .hero-next-floating { font-size:10px; }
 .hero-mobile-progress { width:138px; }
 .project-meta { gap:6px; }
}

/* V5 — Boutique editorial scale. Keep imagery large while copy becomes restrained. */
:root { --shell:min(1180px,calc(100vw - 80px)); }
body { font-size:14px; line-height:1.65; }
.section { padding-top:clamp(76px,8vw,112px); padding-bottom:clamp(76px,8vw,112px); }
.section-kicker { font-size:10px; margin-bottom:14px; letter-spacing:.22em; }
.section-head { margin-bottom:30px; gap:34px; }
.section-head h2, .studio-intro h2, .showcase-copy h2, .process-intro h2, .contact-copy h2 { font-size:clamp(2rem,3.3vw,3.6rem); line-height:1.04; letter-spacing:-.045em; }
.head-note,.body-copy p,.showcase-copy p,.contact-copy p,.service-card p,.step p { font-size:13px; line-height:1.8; }
.body-copy p { margin:0 0 13px; }
.two-col { gap:clamp(30px,5vw,70px); }
.site-header { width:min(1190px,calc(100vw - 64px)); top:14px; padding:7px 11px 7px 19px; }
.brand-mark { font-size:1.35rem; }
.brand-sub { font-size:9px; letter-spacing:.18em; }
.desktop-nav { gap:20px; }
.desktop-nav a, .header-cta { font-size:12px; }
.header-cta { padding:9px 15px; }
.hero-inner { padding-bottom:100px; }
.hero-copy { max-width:720px; }
.hero-copy h1 { font-size:clamp(4.1rem,7.1vw,7.3rem); }
.hero-copy .eyebrow { font-size:10px; margin-bottom:18px; }
.hero-text { font-size:14px; max-width:310px; margin-top:19px; }
.hero-primary { min-height:44px; padding:0 17px; margin-top:19px; min-width:170px; font-size:12px; }
.hero-mobile-progress { bottom:28px; }
.hero-next-floating { bottom:21px; }
.ticker { padding:11px 0; }
.ticker-track { font-size:10px; }
.work-section { width:min(1390px,calc(100vw - 80px)); padding-top:95px; padding-bottom:98px; }
.filters { gap:8px; margin-bottom:24px; }
.filter { padding:8px 13px; font-size:11px; }
.project-grid { gap:32px 22px; }
.project-body { padding:13px 0 5px; }
.project-body h3 { font-size:clamp(1.25rem,1.75vw,1.85rem); margin:8px 0; }
.project-meta,.project-body p { font-size:12px; line-height:1.65; }
.project-body p { margin-bottom:11px; }
.project-footer { padding-top:10px; font-size:10px; letter-spacing:.1em; }
.project-badge { font-size:9px; padding:7px 10px; }
.section-footnote { font-size:11px; margin-top:15px; }
.feature-panorama { min-height:min(760px,84svh); }
.feature-panorama-content { padding-top:43px; padding-bottom:57px; }
.feature-panorama-bottom h2 { font-size:clamp(3.8rem,7vw,7rem); }
.feature-panorama-bottom p { font-size:13px; max-width:320px; margin-top:19px; }
.feature-kicker { font-size:10px; }
.feature-open { padding:14px 20px; gap:33px; font-size:12px; }
.showcase { padding:95px 0; }
.showcase-copy h2 { font-size:clamp(2rem,3vw,3.3rem); }
.service-grid { gap:13px; }
.service-card { padding:22px; border-radius:16px; }
.service-card span { font-size:10px; margin-bottom:17px; }
.service-card h3 { font-size:1.05rem; margin-bottom:7px; }
.process-band { margin-top:72px; padding:90px 0; }
.process-shell { grid-template-columns:minmax(0,275px) minmax(0,1fr); gap:48px; }
.step { padding:20px; border-radius:17px; }
.step span { font-size:10px; margin-bottom:14px; }
.step h3 { font-size:1.08rem; }
.image-rail-section { padding-bottom:100px; }
.image-rail { grid-auto-columns:minmax(240px,25vw); }
.contact-section { padding-bottom:95px; }
.enquiry-card { padding:21px; border-radius:20px; }
.enquiry-card label { font-size:12px; }
.enquiry-card input,.enquiry-card select,.enquiry-card textarea { min-height:46px; padding:11px 13px; border-radius:10px; }
.enquiry-card textarea { min-height:120px; }
.form-response { font-size:11px; }
.footer-brand { font-size:1.65rem; }
.footer-shell p,.footer-meta { font-size:11px; }
.dialog-panel h3 { font-size:clamp(1.8rem,2.7vw,2.7rem); }
@media(max-width:1080px){ .process-shell { grid-template-columns:1fr; } }
@media(max-width:760px) {
 :root { --shell:calc(100vw - 40px); }
 body { font-size:13px; }
 .section { padding-top:65px; padding-bottom:65px; }
 .section-kicker { font-size:9px; margin-bottom:12px; }
 .site-header { top:10px; width:calc(100vw - 24px); min-height:52px; padding:6px 8px 6px 14px; border-radius:15px; }
 .brand-mark { font-size:1.26rem; }
 .brand-sub { font-size:8px; }
 .menu-button { width:39px; height:39px; }
 .mobile-panel { inset:70px 12px auto; }
 .mobile-panel a { font-size:1rem; padding:11px 0; }
 .hero-inner { padding-top:105px; padding-bottom:100px; }
 .hero-copy h1 { font-size:clamp(3.6rem,14vw,5.3rem); line-height:.9; letter-spacing:-.065em; }
 .hero-copy .eyebrow { font-size:9px; margin-bottom:14px; }
 .hero-text { font-size:12px; max-width:250px; margin-top:15px; line-height:1.55; }
 .hero-primary { min-height:43px; min-width:154px; padding:0 16px; margin-top:18px; font-size:11px; }
 .hero-mobile-progress { bottom:27px; font-size:9px; width:145px; }
 .hero-next-floating { bottom:18px; font-size:10px; padding:9px 12px; }
 .ticker { padding:10px 0; }
 .ticker-track { font-size:9px; }
 .section-head { gap:11px; margin-bottom:20px; }
 .section-head h2 { font-size:clamp(2rem,8.4vw,3rem); }
 .section-head .head-note { font-size:12px; line-height:1.6; }
 .studio-intro h2 { font-size:clamp(2.1rem,8.8vw,3.25rem); }
 .studio-intro .two-col { gap:13px; }
 .body-copy p { font-size:12px; line-height:1.7; }
 .work-section { width:calc(100vw - 40px); padding-top:69px; padding-bottom:72px; }
 .filters { margin-bottom:14px; gap:6px; }
 .filter { padding:7px 12px; min-height:38px; font-size:10px; }
 .project-grid { gap:24px; }
 .project-card.is-featured .project-media { aspect-ratio:4/4.15; }
 .project-body { padding:10px 1px 0; }
 .project-body h3 { font-size:1.42rem; margin:5px 0 7px; }
 .project-meta,.project-body p { font-size:11px; }
 .project-footer { min-height:39px; font-size:9px; }
 .section-footnote { font-size:10px; }
 .feature-panorama { min-height:74svh; }
 .feature-panorama-content { padding-top:85px; padding-bottom:33px; }
 .feature-panorama-bottom { gap:22px; }
 .feature-panorama-bottom h2 { font-size:clamp(3.15rem,11.2vw,4.6rem); }
 .feature-panorama-bottom p { font-size:12px; max-width:250px; margin-top:12px; }
 .feature-kicker { font-size:9px; }
 .feature-open { min-width:180px; min-height:43px; padding:12px 16px; font-size:11px; }
 .showcase { padding:66px 0; }
 .showcase-copy { padding-bottom:15px; }
 .showcase-copy h2 { font-size:clamp(2rem,8vw,3rem); }
 .showcase-copy p { font-size:12px; }
 .service-grid { gap:10px; }
 .service-card { padding:19px; }
 .service-card span { margin-bottom:10px; }
 .service-card h3 { font-size:1.02rem; }
 .service-card p { font-size:12px; }
 .process-band { margin-top:54px; padding:68px 0; }
 .process-shell { gap:21px; }
 .process-intro h2 { font-size:clamp(2.2rem,9vw,3.3rem); }
 .process-steps { gap:10px; }
 .step { padding:19px; }
 .step h3 { font-size:1.05rem; }
 .step p { font-size:12px; }
 .image-rail-section { padding-bottom:70px; }
 .image-rail { grid-auto-columns:minmax(210px,66vw); }
 .contact-section { padding-bottom:70px; }
 .contact-copy h2 { font-size:clamp(2.4rem,9.5vw,3.5rem); }
 .contact-copy p { font-size:12px; }
 .enquiry-card { padding:15px; }
 .enquiry-card label { font-size:11px; }
 .enquiry-card input,.enquiry-card select,.enquiry-card textarea { font-size:16px; }
 .footer-brand { font-size:1.5rem; }
 .dialog-panel h3 { font-size:clamp(1.9rem,8vw,2.8rem); }
}
@media(max-width:370px){ .hero-copy h1 { font-size:clamp(3.25rem,13.5vw,4.6rem); } }

/* V6 mobile photographic storytelling — single-image, full-bleed swipe sequences. */
.mobile-photo-section,.mobile-work-gallery { display:none; }
@media(max-width:760px) {
  .hero { touch-action:pan-y; }
  .hero-scrim { transition:background .25s ease; }
  .hero.is-engaged .hero-scrim { background:linear-gradient(180deg,rgba(10,8,6,.36),rgba(10,8,6,.78) 95%); }
  .hero.is-engaged .hero-copy { transform:translateY(-5px); }
  .hero-copy { transition:transform .2s ease; }
  .mobile-photo-section { display:block; width:100%; padding:0; margin:0; }
  .mobile-section-intro { padding:52px 20px 32px; background:#f5f2eb; }
  .mobile-section-intro span { color:#8d6b4b; font-size:9px; font-weight:600; letter-spacing:.23em; }
  .mobile-section-intro h2 { margin:12px 0 9px; font-size:clamp(1.85rem,8vw,2.7rem); font-weight:600; letter-spacing:-.05em; line-height:1.05; }
  .mobile-section-intro p { color:#766e66; margin:0; font-size:12px; }
  .mobile-swipe-gallery { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none; width:100vw; max-width:none; margin-left:calc(50% - 50vw); touch-action:auto; -webkit-overflow-scrolling:touch; }
  .mobile-swipe-gallery::-webkit-scrollbar { display:none; }
  .swipe-slide { position:relative; flex:0 0 100vw; width:100vw; height: min(820px, 88svh); scroll-snap-align:start; scroll-snap-stop:always; isolation:isolate; overflow:hidden; color:#fff; background:#211b16; outline-offset:-4px; }
  .swipe-slide img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; user-select:none; -webkit-user-drag:none; }
  .mobile-pink .swipe-slide img { object-position:50% 50%; }
  .swipe-vignette { position:absolute; inset:0; background:linear-gradient(180deg,rgba(15,11,8,.05) 15%,rgba(15,11,8,.09) 35%,rgba(15,11,8,.6) 100%); transition:background .22s ease; }
  .swipe-caption { position:absolute; left:22px; right:22px; bottom:calc(37px + env(safe-area-inset-bottom)); z-index:1; transition:transform .22s ease; }
  .swipe-count { font-size:9px; font-weight:600; letter-spacing:.18em; opacity:.78; margin-bottom:14px; }
  .swipe-count span { margin-left:13px; }
  .swipe-caption h3 { margin:0; max-width:340px; font-size:clamp(1.85rem,8vw,2.8rem); font-weight:600; letter-spacing:-.055em; line-height:1.05; }
  .swipe-caption p { max-width:330px; margin:11px 0 0; font-size:12px; line-height:1.55; opacity:.68; transform:translateY(5px); transition:opacity .22s ease,transform .22s ease; }
  .swipe-slide.is-engaged .swipe-vignette,.swipe-slide:focus-visible .swipe-vignette { background:linear-gradient(180deg,rgba(11,9,7,.2),rgba(11,9,7,.28) 40%,rgba(11,9,7,.88) 100%); }
  .swipe-slide.is-engaged .swipe-caption,.swipe-slide:focus-visible .swipe-caption { transform:translateY(-8px); }
  .swipe-slide.is-engaged .swipe-caption p,.swipe-slide:focus-visible .swipe-caption p { opacity:1; transform:translateY(0); }
  .feature-panorama { display:none; }
  .work-section { padding:52px 0 0; }
  .work-section .section-head { margin-bottom:19px; }
  .work-section .section-head h2 { font-size:clamp(1.95rem,8vw,2.8rem); }
  .work-section .head-note { max-width:340px; }
  .work-section .filters,.work-section .project-grid,.work-section .section-footnote { display:none; }
  .work-section .mobile-work-gallery { display:flex; }
  .showcase { display:none; }
  .image-rail-section { display:none; }
  .mobile-materials { margin-top:0; }
  .services-section { padding-top:67px; }
  .process-band { margin-top:55px; }
}
@media(max-width:390px) { .swipe-slide { height:84svh; } .swipe-caption { left:18px; right:18px; } }
@media(prefers-reduced-motion:reduce) { .mobile-swipe-gallery { scroll-behavior:auto; } .swipe-caption,.swipe-vignette,.swipe-caption p { transition:none; } }

@media(max-width:760px){.swipe-slide.is-scrolling .swipe-vignette {background:linear-gradient(180deg,rgba(11,9,7,.2),rgba(11,9,7,.28) 40%,rgba(11,9,7,.88) 100%)} .swipe-slide.is-scrolling .swipe-caption p {opacity:1;transform:translateY(0)} .swipe-slide.is-scrolling .swipe-caption {transform:translateY(-8px)}}

/* Final polish: ensure mobile hamburger never inherits browser blue accents. */
.menu-button,
.menu-button:hover,
.menu-button:active,
.menu-button:focus,
.menu-button[aria-expanded="true"] {
  appearance:none;
  -webkit-appearance:none;
  color:var(--wood-dark);
  accent-color:var(--wood-dark);
  border-color:rgba(100,71,41,.3);
  background:rgba(215,194,165,.26);
  -webkit-tap-highlight-color:rgba(147,110,75,.16);
}
.menu-button span { background-color:currentColor; }
.menu-button:focus-visible { outline:2px solid var(--wood); outline-offset:3px; }
.site-header:not(.scrolled) .menu-button { color:#d7c2a5; border-color:rgba(215,194,165,.45); background:rgba(34,24,17,.25); }
.site-header:not(.scrolled) .menu-button[aria-expanded="true"] { color:#d7c2a5; background:rgba(100,71,41,.65); }
.site-header.scrolled .menu-button[aria-expanded="true"] { background:rgba(215,194,165,.55); }

/* Home screen installation: safe areas are treated as part of the image canvas. */
@media(max-width:760px){
 .site-header{top:calc(10px + env(safe-area-inset-top,0px));}
 .mobile-panel{top:calc(70px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 85px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));}
 .hero-inner{padding-top:calc(105px + env(safe-area-inset-top,0px));padding-bottom:calc(100px + env(safe-area-inset-bottom,0px));}
 .hero-mobile-progress{bottom:calc(27px + env(safe-area-inset-bottom,0px));}
 .hero-next-floating{bottom:calc(18px + env(safe-area-inset-bottom,0px));}
 .swipe-slide{height:100svh;max-height:none;}
 .swipe-caption{bottom:calc(35px + env(safe-area-inset-bottom,0px));}
 .mobile-section-intro{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));}
 .contact-section{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));}
}
@media(max-width:390px){.swipe-slide{height:100svh;}}

/* V8: crisp opaque navigation — no frosted glass, blur or transparency. */
.site-header,
.site-header:not(.scrolled) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #292017;
  border: 1px solid #493728;
  box-shadow: none;
  color: #f5f0e8;
}
.site-header.scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #f5ede0;
  border-color: #c8b79f;
  box-shadow: none;
  color: #251b14;
}
.mobile-panel {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #f5ede0;
  border: 1px solid #c8b79f;
}
.site-header:not(.scrolled) .header-cta { background:#443326; border-color:#6a503a; }
.site-header.scrolled .header-cta { background:#e6d8c5; border-color:#c8b79f; }
.site-header:not(.scrolled) .menu-button { background:#443326; border-color:#6a503a; color:#f0dcc3; }
.site-header.scrolled .menu-button { background:#e6d8c5; border-color:#c8b79f; color:#644729; }

/* V9: mobile photographic canvas first; copy responds to a real gesture. */
@media(max-width:760px) {
  .hero .hero-copy {
    opacity:0;
    visibility:hidden;
    transform:translateY(12px);
    pointer-events:none;
    transition:opacity .28s ease,transform .28s ease,visibility .28s;
  }
  .hero.is-engaged .hero-copy,
  .hero.is-scrolling .hero-copy,
  .hero:focus-within .hero-copy {
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  .hero.is-scrolling .hero-scrim { background:linear-gradient(180deg,rgba(10,8,6,.18),rgba(10,8,6,.72)); }
  .hero .hero-scrim { background:linear-gradient(180deg,rgba(10,8,6,.05),rgba(10,8,6,.16)); }
  .hero-mobile-progress { opacity:.8; }
  .mobile-swipe-gallery .swipe-caption { opacity:0; visibility:hidden; transform:translateY(16px); pointer-events:none; transition:opacity .25s ease,transform .25s ease,visibility .25s; }
  .mobile-swipe-gallery .swipe-vignette { background:linear-gradient(180deg,rgba(11,9,7,.02),rgba(11,9,7,.09)); }
  .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-caption,
  .mobile-swipe-gallery .swipe-slide.is-scrolling .swipe-caption,
  .mobile-swipe-gallery .swipe-slide:focus-visible .swipe-caption {
    opacity:1; visibility:visible; transform:translateY(0);
  }
  .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-vignette,
  .mobile-swipe-gallery .swipe-slide.is-scrolling .swipe-vignette,
  .mobile-swipe-gallery .swipe-slide:focus-visible .swipe-vignette {
    background:linear-gradient(180deg,rgba(11,9,7,.08) 0%,rgba(11,9,7,.18) 35%,rgba(11,9,7,.86) 100%);
  }
  .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-caption p,
  .mobile-swipe-gallery .swipe-slide.is-scrolling .swipe-caption p,
  .mobile-swipe-gallery .swipe-slide:focus-visible .swipe-caption p {opacity:1;transform:none;}
}
@media(prefers-reduced-motion:reduce) {
 .hero .hero-copy,.mobile-swipe-gallery .swipe-caption { transition:none; }
}

/* V10: true mobile edge-to-edge photographic panels with no vertical letterboxing. */
@media (max-width:760px) {
  html,body,main { width:100%; max-width:100%; margin:0; }
  .hero,.hero-inner,.hero-slides,.hero-slide { height:100svh; min-height:100svh; }
  .hero { width:100%; padding:0; margin:0; overflow:hidden; }
  .hero-inner { box-sizing:border-box; }
  .hero-slide { background-size:cover; background-position:center center; }
  .mobile-photo-section { width:100%; margin:0; padding:0; }
  .mobile-swipe-gallery { height:100svh; min-height:100svh; margin-top:0; margin-bottom:0; }
  .swipe-slide { height:100svh !important; min-height:100svh !important; max-height:none !important; }
  .swipe-slide img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
  .mobile-pink .swipe-slide img { object-position:50% 50%; }
  .mobile-work-gallery { padding:0; }
  .mobile-section-intro { margin:0; }
}
@supports(height:100dvh) {
 @media(max-width:760px) {
  .hero,.hero-inner,.hero-slides,.hero-slide,
  .mobile-swipe-gallery,.swipe-slide { height:100dvh !important; min-height:100dvh !important; }
 }
}

/* V11: ivory by default, perfectly clear ONLY when floating over imagery. */
.site-header,
.site-header.scrolled,
.site-header:not(.scrolled) {
  background:#f5ede0;
  border:1px solid #c8b79f;
  color:#251b14;
  box-shadow:none;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.site-header.on-photo,
.site-header.on-photo:not(.scrolled) {
  background:transparent;
  border-color:transparent;
  color:#fff;
  box-shadow:none;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.site-header .header-cta,
.site-header:not(.scrolled) .header-cta,
.site-header.scrolled .header-cta { background:#e6d8c5; border-color:#c8b79f; color:#251b14; }
.site-header.on-photo .header-cta,
.site-header.on-photo:not(.scrolled) .header-cta { background:transparent; border-color:rgba(255,255,255,.8); color:#fff; }
.site-header .menu-button,
.site-header:not(.scrolled) .menu-button,
.site-header.scrolled .menu-button { background:#e6d8c5; border-color:#c8b79f; color:#644729; }
.site-header.on-photo .menu-button,
.site-header.on-photo:not(.scrolled) .menu-button { background:transparent; border-color:rgba(255,255,255,.8); color:#fff; }
.site-header.on-photo .menu-button span { background-color:#fff; }

/* V12: hero retains its normal visible headline. Other panels are tap/hold only. */
@media(max-width:760px){
 .hero .hero-copy,.hero.is-engaged .hero-copy,.hero.is-scrolling .hero-copy {
  opacity:1; visibility:visible; transform:none; pointer-events:auto;
 }
 .hero .hero-scrim,.hero.is-engaged .hero-scrim,.hero.is-scrolling .hero-scrim {
  background:linear-gradient(180deg,rgba(10,8,6,.10) 0%,rgba(10,8,6,.14) 35%,rgba(10,8,6,.67) 100%);
 }
 .mobile-swipe-gallery .swipe-slide.is-pinned .swipe-caption,
 .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-caption,
 .mobile-swipe-gallery .swipe-slide:focus-visible .swipe-caption { opacity:1;visibility:visible;transform:translateY(0); }
 .mobile-swipe-gallery .swipe-slide.is-pinned .swipe-vignette,
 .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-vignette,
 .mobile-swipe-gallery .swipe-slide:focus-visible .swipe-vignette {
  background:linear-gradient(180deg,rgba(11,9,7,.08),rgba(11,9,7,.18) 35%,rgba(11,9,7,.86) 100%);
 }
 .mobile-swipe-gallery .swipe-slide.is-pinned .swipe-caption p,
 .mobile-swipe-gallery .swipe-slide.is-engaged .swipe-caption p {opacity:1;transform:none;}
}

/* V13 — coordinated, buttery-smooth header colour transitions. */
.site-header {
  transition: background-color 650ms cubic-bezier(.22,1,.36,1),
              border-color 650ms cubic-bezier(.22,1,.36,1),
              color 550ms cubic-bezier(.22,1,.36,1) !important;
  will-change: background-color, border-color;
}
.site-header .brand,
.site-header .brand-mark,
.site-header .brand-sub,
.site-header .desktop-nav a,
.site-header .header-cta,
.site-header .menu-button,
.site-header .menu-button span {
  transition: color 550ms cubic-bezier(.22,1,.36,1),
              background-color 650ms cubic-bezier(.22,1,.36,1),
              border-color 650ms cubic-bezier(.22,1,.36,1),
              opacity 550ms cubic-bezier(.22,1,.36,1) !important;
}
@media(prefers-reduced-motion:reduce) {
 .site-header,.site-header .brand,.site-header .brand-mark,.site-header .brand-sub,.site-header .desktop-nav a,.site-header .header-cta,.site-header .menu-button,.site-header .menu-button span { transition-duration:0.01ms !important; }
}

/* V14: continuous header blend eliminates binary class changes at photo edges. */
.site-header,
.site-header.scrolled,
.site-header.on-photo,
.site-header:not(.scrolled),
.site-header.on-photo:not(.scrolled) {
 --header-photo: 0%;
 background:color-mix(in srgb,#f5ede0, transparent var(--header-photo)) !important;
 border-color:color-mix(in srgb,#c8b79f,transparent var(--header-photo)) !important;
 color:color-mix(in srgb,#251b14,white var(--header-photo)) !important;
 -webkit-backdrop-filter:none !important;
 backdrop-filter:none !important;
 box-shadow:none !important;
 transition:none !important;
}
.site-header .header-cta,
.site-header.scrolled .header-cta,
.site-header.on-photo .header-cta,
.site-header:not(.scrolled) .header-cta {
 background:color-mix(in srgb,#e6d8c5,transparent var(--header-photo)) !important;
 border-color:color-mix(in srgb,#c8b79f,rgba(255,255,255,.8) var(--header-photo)) !important;
 color:color-mix(in srgb,#251b14,white var(--header-photo)) !important;
 transition:none !important;
}
.site-header .menu-button,
.site-header.scrolled .menu-button,
.site-header.on-photo .menu-button,
.site-header:not(.scrolled) .menu-button {
 background:color-mix(in srgb,#e6d8c5,transparent var(--header-photo)) !important;
 border-color:color-mix(in srgb,#c8b79f,rgba(255,255,255,.8) var(--header-photo)) !important;
 color:color-mix(in srgb,#644729,white var(--header-photo)) !important;
 transition:none !important;
}
.site-header .menu-button span,
.site-header.on-photo .menu-button span { background-color:currentColor !important; transition:none !important; }
.site-header .brand,.site-header .brand-mark,.site-header .brand-sub,
.site-header .desktop-nav a { color:inherit; transition:none !important; }

/* No artificial status-bar canvas. iOS may reserve its own system-only status region. */
html { background:var(--bg); }
@media(max-width:760px){
 .site-header::before,.site-header::after { content:none !important; background:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
 .site-header { filter:none !important; -webkit-filter:none !important; }
}

/* V15 — Original P&D scroll-directed opening: concept → craft → finish. */
.scroll-story.hero {
  position:relative;
  height:340svh;
  min-height:0;
  background:#eee8dc;
  color:#25201b;
  overflow:clip;
}
.scroll-story .story-stage {
  --story-craft:0;
  --story-finished:0;
  --story-drawing:1;
  --story-progress:0;
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  width:100%;
  isolation:isolate;
  overflow:hidden;
  background:#eee8dc;
}
.scroll-story .story-paper,
.scroll-story .story-photo,
.scroll-story .story-image-shade,
.scroll-story .story-grid {position:absolute;inset:0;pointer-events:none;}
.scroll-story .story-paper {background:#eee8dc;}
.scroll-story .story-photo {
 background-repeat:no-repeat;
 background-size:cover;
 background-position:50% 50%;
 will-change:opacity,transform;
 transform:scale(calc(1.06 - var(--story-progress)*.06));
}
.scroll-story .story-photo-process {
 background-image:url('assets/kitchen-walnut-install.webp');
 opacity:var(--story-craft);
}
.scroll-story .story-photo-finished {
 background-image:url('assets/kitchen-timber-tall-cabinetry.webp');
 opacity:var(--story-finished);
}
.scroll-story .story-image-shade {
 background:linear-gradient(90deg,rgba(10,9,8,.67),rgba(10,9,8,.12) 70%),linear-gradient(0deg,rgba(10,9,8,.46),transparent 44%);
 opacity:var(--story-craft);
}
.scroll-story .story-grid {
 opacity:calc(.16 * var(--story-drawing));
 background-image:linear-gradient(#6f5e4b 1px,transparent 1px),linear-gradient(90deg,#6f5e4b 1px,transparent 1px);
 background-size:90px 90px;
}
.scroll-story .story-drawing {
 position:absolute;
 top:50%;right:5%;
 height:min(76svh,850px);
 width:min(58vw,830px);
 transform:translate3d(0,-50%,0) scale(calc(1 + var(--story-progress)*.11));
 color:#927e66;
 opacity:var(--story-drawing);
 will-change:opacity,transform;
 pointer-events:none;
}
.scroll-story .story-content {position:absolute;inset:0;z-index:2;pointer-events:none;}
.scroll-story .story-chapter {
 position:absolute;
 top:50%;left:0;
 max-width:100%;
 transform:translateY(-50%);
 width:min(820px,100%);
 opacity:0;
 will-change:opacity,transform;
}
.scroll-story .story-chapter-one {opacity:1;}
.scroll-story .story-chapter-two,.scroll-story .story-chapter-three {color:#fff;}
.scroll-story .story-kicker {
 font-size:10px;letter-spacing:.23em;
 font-weight:700;
 margin:0 0 24px;
 text-transform:uppercase;
}
.scroll-story .story-kicker span {color:#927e66;}
.scroll-story h1,.scroll-story h2 {
 font-size:clamp(4.3rem,9.7vw,10.2rem);
 letter-spacing:-.075em;
 font-weight:600;
 line-height:.87;
 margin:18px 0 28px;
 text-wrap:balance;
}
.scroll-story h1 em,.scroll-story h2 em {
 font-family:'Cormorant Garamond',Georgia,serif;
 font-weight:400;
 letter-spacing:-.07em;
}
.scroll-story .story-description {
 max-width:335px;
 margin:0;
 font-size:clamp(13px,1.15vw,16px);
 line-height:1.7;
}
.scroll-story .story-work-link {
 display:inline-flex;
 align-items:center;
 gap:50px;
 padding:14px 0;
 border-bottom:1px solid currentColor;
 font-size:12px;
 font-weight:600;
 letter-spacing:.025em;
 margin-top:21px;
 pointer-events:auto;
}
.scroll-story .story-work-link:hover {opacity:.65;}
.scroll-story .story-bottom {
 position:absolute;
 z-index:5;
 left:50%;bottom:38px;
 transform:translateX(-50%);
 display:flex;
 align-items:center;
 gap:20px;
 color:color-mix(in srgb,#42382e,white calc(var(--story-craft)*100%));
 pointer-events:none;
}
.scroll-story .story-progress-label,.scroll-story .story-scroll-cue {font-size:10px;letter-spacing:.16em;font-weight:600;white-space:nowrap;}
.scroll-story .story-progress-track {display:block;width:150px;height:1px;background:currentColor;opacity:.6;}
.scroll-story .story-progress-track span {height:2px;display:block;max-width:100%;width:0;background:currentColor;transform:translateY(-.5px);}
.scroll-story .story-scroll-cue {margin-left:auto;}
.scroll-story .story-scroll-cue span {display:inline-block;padding-left:10px;animation:story-cue 1.6s ease-in-out infinite alternate;}
@keyframes story-cue {to {transform:translateY(7px);}}
@media(max-width:760px) {
 .scroll-story.hero {height:320svh!important;min-height:0!important;overflow:clip;}
 .scroll-story .story-stage {position:sticky;top:0;height:100svh!important;min-height:100svh!important;}
 .scroll-story .story-content {padding:0;inset:0 21px; width:auto;}
 .scroll-story .story-chapter {top:auto;bottom:17%;left:0;transform:translateY(0);width:100%;}
 .scroll-story h1,.scroll-story h2 {font-size:clamp(3.6rem,13vw,6.4rem);line-height:.91;margin:14px 0 17px;}
 .scroll-story .story-kicker {font-size:9px;letter-spacing:.19em;margin-bottom:11px;}
 .scroll-story .story-description {font-size:12px;max-width:265px;line-height:1.6;}
 .scroll-story .story-work-link {font-size:11px;gap:28px;margin-top:12px;}
 .scroll-story .story-photo-process {background-position:49% 50%;}
 .scroll-story .story-photo-finished {background-position:43% 50%;}
 .scroll-story .story-image-shade {background:linear-gradient(180deg,rgba(12,9,7,.03) 10%,rgba(12,9,7,.07) 30%,rgba(12,9,7,.79) 100%);}
 .scroll-story .story-drawing {height:56svh;width:115vw;right:-23vw;top:41%;opacity:calc(.85 * var(--story-drawing));}
 .scroll-story .story-grid {background-size:55px 55px;}
 .scroll-story .story-bottom {left:21px;right:21px;bottom:calc(34px + env(safe-area-inset-bottom,0px));transform:none;width:auto;gap:13px;}
 .scroll-story .story-progress-track {width:56px;}
 .scroll-story .story-progress-label,.scroll-story .story-scroll-cue {font-size:9px;}
 .scroll-story .story-scroll-cue span {padding-left:4px;}
 .scroll-story .story-content .story-chapter {opacity:1;visibility:visible;}
}
@supports(height:100dvh) {
 .scroll-story .story-stage {height:100dvh!important;min-height:100dvh!important;}
 @media(max-width:760px) {.scroll-story.hero {height:320dvh!important;min-height:0!important;}}
}
@media(prefers-reduced-motion:reduce) {
 .scroll-story .story-scroll-cue span {animation:none;}
 .scroll-story .story-photo,.scroll-story .story-chapter {will-change:auto;}
}

@media(max-width:760px){.hero.scroll-story,.hero.scroll-story.hero {height:320svh!important;min-height:0!important}.scroll-story .story-chapter {top:auto!important;bottom:17%!important}}
/* Position the captions consistently in the lower architectural grid. */
@media(min-width:761px){.scroll-story .story-chapter {top:auto;bottom:21%;}}
.scroll-story .story-photo {transform:scale(1.035);}

/* V16: Safari/iOS-friendly sticky storytelling. Avoid ancestor clipping the sticky viewport. */
@media(max-width:760px) {
  html,body { overflow-x:clip; }
  .hero.scroll-story,.scroll-story.hero {
    overflow:visible !important;
    position:relative;
    height:320svh !important;
    min-height:0 !important;
    contain:none !important;
  }
  .scroll-story .story-stage {
    position:-webkit-sticky;
    position:sticky;
    top:0;
    left:0;
    width:100%;
    height:100svh !important;
    min-height:100svh !important;
    overflow:hidden;
    -webkit-transform:translateZ(0);
    transform:translateZ(0);
  }
}
@supports(height:100dvh){
  @media(max-width:760px){
    .hero.scroll-story,.scroll-story.hero{height:320dvh !important;min-height:0 !important;}
    .scroll-story .story-stage{height:100dvh !important;min-height:100dvh !important;}
  }
}

/* V17 — Projects menu order, full-screen project selection and immersive galleries */
.projects-collection{display:flow-root;scroll-margin-top:90px}
.project-transition{position:fixed;inset:0;z-index:180;pointer-events:none;background:#050403;opacity:0;visibility:hidden;transition:opacity 250ms ease,visibility 250ms ease;overflow:hidden}
.project-transition .transition-image{position:absolute;inset:0;background-image:var(--transition-image);background-size:cover;background-position:center;opacity:1;transform:scale(1);transition:transform 300ms cubic-bezier(.2,.7,.3,1),opacity 175ms ease}
.project-transition.is-entering,.project-transition.is-exiting{opacity:1;visibility:visible}
.project-transition.is-entering .transition-image{transform:scale(1.16)}
.project-transition.is-black .transition-image,.project-transition.is-exiting .transition-image{opacity:0}
.project-transition.is-clearing{opacity:0}
.project-open{overflow:hidden}
.project-dialog.immersive-project{
 --project-ambient:#241a14;
 position:fixed;inset:0;max-width:none;max-height:none;
 width:100vw;height:100dvh;margin:0;padding:0;border:0;border-radius:0;
 background:var(--project-ambient);color:#fff;
 overflow-y:auto;overscroll-behavior:contain;
 box-shadow:none;
 transition:background-color 650ms cubic-bezier(.2,.7,.25,1);
}
.project-dialog.immersive-project::backdrop{background:rgba(0,0,0,.94);backdrop-filter:none}
.project-dialog.immersive-project .dialog-close{position:fixed;top:calc(16px + env(safe-area-inset-top,0px));right:clamp(16px,3vw,50px);z-index:210;background:rgba(16,14,12,.66);color:#fff;border:1px solid rgba(255,255,255,.42);font-size:12px;min-height:44px;padding:0 19px;backdrop-filter:none}
.project-dialog.immersive-project .dialog-content{display:block;min-height:100%;height:auto;max-height:none;overflow:visible}
.immersive-gallery{width:100%;min-height:100dvh;display:flex;flex-direction:column;padding:calc(26px + env(safe-area-inset-top,0px)) max(24px,calc((100vw - 1350px)/2)) calc(20px + env(safe-area-inset-bottom,0px));gap:14px}
.immersive-topline{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 150px 7px 0;font-size:10px;letter-spacing:.17em;color:rgba(255,255,255,.78);font-weight:600;text-transform:uppercase}
.immersive-image-wrap{position:relative;flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:0;height:min(55dvh,730px);overflow:hidden;background:rgba(0,0,0,.18)}
.immersive-image-wrap img{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 300ms ease;touch-action:pan-y}
.immersive-image-wrap img.is-ready{opacity:1}
.gallery-arrow{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,18,15,.58);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:19px;display:grid;place-items:center}
.gallery-arrow:hover{background:#fff;color:#241a14}
.gallery-prev{left:15px}.gallery-next{right:15px}
.immersive-description{display:flex;justify-content:space-between;align-items:end;gap:30px;padding:6px 0}
.immersive-description h3{font-size:clamp(1.9rem,3.4vw,4rem);letter-spacing:-.058em;font-weight:600;line-height:1.03;margin:7px 0}
.immersive-description p{font-size:13px;line-height:1.65;max-width:590px;color:rgba(255,255,255,.82);margin:8px 0 0}
.immersive-description .immersive-eyebrow{font-size:10px;letter-spacing:.17em;color:#eee1ce;text-transform:uppercase;font-weight:600}
.immersive-count{min-width:120px;display:grid;gap:10px;text-align:right;font-size:10px;letter-spacing:.17em;white-space:nowrap}
.immersive-count span:last-child{color:rgba(255,255,255,.62)}
.project-dialog.immersive-project .immersive-thumbs{display:flex;overflow-x:auto;gap:7px;padding:10px 0 3px;background:transparent;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.project-dialog.immersive-project .dialog-thumb{flex:0 0 83px;max-width:83px;border-radius:2px;background:transparent;opacity:.55}
.project-dialog.immersive-project .dialog-thumb.is-active{opacity:1;outline:1px solid #fff;outline-offset:-1px}
.project-dialog.immersive-project .dialog-thumb img{width:83px;height:65px;aspect-ratio:auto;object-fit:cover}
@media(max-width:760px){
 .mobile-pink{display:none!important}
 .work-section{padding-top:35px}
 .work-section .section-head{padding-left:0;padding-right:0;margin-bottom:22px}
 .work-section .mobile-work-gallery{display:flex}
 .project-selector-slide{cursor:pointer;outline-offset:-5px}
 .project-selector-slide .swipe-caption{opacity:1;visibility:visible;transform:none;bottom:calc(83px + env(safe-area-inset-bottom,0px))}
 .project-selector-slide .swipe-caption h3{font-size:clamp(1.8rem,7.5vw,2.8rem)}
 .project-selector-slide .swipe-caption p{display:none}
 .project-selector-slide .swipe-count{opacity:.82}
 .project-selector-slide .swipe-vignette{background:linear-gradient(180deg,rgba(10,8,6,.02) 45%,rgba(10,8,6,.60) 100%)}
 .project-selector-slide.is-engaged .swipe-caption p{display:block}
 .project-selector-hint{position:absolute;bottom:calc(31px + env(safe-area-inset-bottom,0px));left:22px;z-index:4;color:#fff;font-size:10px;letter-spacing:.17em;font-weight:600}
 .project-selector-hint span{font-size:14px;margin-left:10px}
 .project-dialog.immersive-project{height:100dvh;width:100vw;overflow-y:auto}
 .immersive-gallery{gap:10px;min-height:100dvh;padding:calc(82px + env(safe-area-inset-top,0px)) 16px calc(19px + env(safe-area-inset-bottom,0px))}
 .immersive-topline{font-size:9px;letter-spacing:.12em;padding:0;gap:14px}
 .immersive-topline span:first-child{white-space:nowrap}
 .immersive-topline span:last-child{text-align:right}
 .immersive-image-wrap{height:49dvh;min-height:38dvh;flex:0 0 49dvh}
 .gallery-arrow{width:39px;height:39px;font-size:17px}
 .gallery-prev{left:8px}.gallery-next{right:8px}
 .immersive-description{align-items:start;gap:13px;flex-direction:column}
 .immersive-description h3{font-size:clamp(1.7rem,8vw,2.75rem);margin:5px 0}
 .immersive-description p{font-size:11px;line-height:1.55;max-width:335px}
 .immersive-description .immersive-eyebrow{font-size:9px}
 .immersive-count{min-width:0;display:flex;gap:18px;font-size:9px}
 .project-dialog.immersive-project .dialog-thumb{flex-basis:64px;max-width:64px}
 .project-dialog.immersive-project .dialog-thumb img{width:64px;height:52px}
 .project-dialog.immersive-project .dialog-close{top:calc(24px + env(safe-area-inset-top,0px));right:16px}
}
@media(prefers-reduced-motion:reduce){.project-transition,.project-transition .transition-image,.project-dialog.immersive-project,.immersive-image-wrap img{transition:none!important}}

/* V18 — one project/one colour; image-led fullscreen detail, lower integrated info shelf. */
.project-dialog.immersive-project {
  overflow:hidden;
  transition:none;
}
.project-dialog.immersive-project .dialog-content,
.project-dialog.immersive-project .immersive-gallery {
  width:100%;height:100%;min-height:100%;max-height:100%;overflow:hidden;
}
.project-dialog.immersive-project .immersive-gallery {
  padding:0;gap:0;display:flex;flex-direction:column;
}
.project-dialog.immersive-project .immersive-topline {
  display:none;
}
.project-dialog.immersive-project .immersive-image-wrap {
  position:relative;
  flex:1 1 auto;
  width:100%;height:100%;min-height:100%;max-height:100%;
  background:var(--project-ambient);
  border-radius:0;
  overflow:hidden;
}
.project-dialog.immersive-project .immersive-image-wrap > img#dialogHero {
  width:100%;height:100%;max-height:none;
  object-fit:cover;object-position:50% 48%;
  opacity:0;filter:none;transform:scale(1.014);
  transition:opacity 380ms cubic-bezier(.22,1,.36,1),transform 650ms cubic-bezier(.22,1,.36,1);
}
.project-dialog.immersive-project .immersive-image-wrap > img#dialogHero.is-ready {
  opacity:1;transform:scale(1);
}
.project-dialog.immersive-project .immersive-description {
  position:absolute;z-index:4;bottom:0;left:0;right:0;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:16px 28px;
  min-height:0;margin:0;
  padding:70px max(26px,calc((100vw - 1300px)/2)) calc(22px + env(safe-area-inset-bottom,0px));
  color:#fff;
  background:linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--project-ambient) 77%,transparent) 33%,var(--project-ambient) 82%);
  isolation:isolate;
}
/* A restrained localized soft-focus shelf, not a blur over the main photograph. */
.project-dialog.immersive-project .immersive-description::before {
  content:"";position:absolute;inset:28% 0 0;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  mask-image:linear-gradient(to bottom,transparent,black 48%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 48%);
  z-index:-1;pointer-events:none;
}
.project-dialog.immersive-project .immersive-project-information {align-self:end;max-width:750px;}
.project-dialog.immersive-project .immersive-project-information h3 {
  margin:8px 0;font-size:clamp(2rem,3.6vw,4rem);font-weight:600;line-height:1.02;letter-spacing:-.05em;
}
.project-dialog.immersive-project .immersive-project-summary {
  color:rgba(255,255,255,.87);font-size:12px;line-height:1.6;
  max-width:600px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.project-dialog.immersive-project .immersive-count {align-self:end;}
.project-dialog.immersive-project .immersive-thumbs {
  grid-column:1/-1;grid-row:auto;
  padding:7px 0 0;min-height:0;gap:7px;
  display:flex;overflow-x:auto;scrollbar-width:none;
}
.project-dialog.immersive-project .immersive-thumbs::-webkit-scrollbar {display:none;}
.project-dialog.immersive-project .dialog-thumb {opacity:.58;transition:opacity .22s ease;}
.project-dialog.immersive-project .dialog-thumb.is-active {opacity:1;}
.project-dialog.immersive-project .gallery-arrow {top:46%;}
.project-dialog.immersive-project .dialog-close {z-index:10;}
@media(max-width:760px) {
  .project-dialog.immersive-project .immersive-image-wrap {height:100dvh;min-height:100dvh;flex:1 0 100dvh;}
  .project-dialog.immersive-project .immersive-image-wrap > img#dialogHero {height:100%;object-fit:cover;object-position:center;}
  .project-dialog.immersive-project .immersive-description {
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:7px 8px;align-items:end;
    padding:52px 19px calc(18px + env(safe-area-inset-bottom,0px));
    bottom:0;
  }
  .project-dialog.immersive-project .immersive-description::before {inset:22% 0 0;backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);}
  .project-dialog.immersive-project .immersive-project-information h3 {font-size:clamp(1.65rem,7.1vw,2.65rem);margin:5px 0;}
  .project-dialog.immersive-project .immersive-project-summary {font-size:11px;line-height:1.5;-webkit-line-clamp:2;max-width:300px;}
  .project-dialog.immersive-project .immersive-eyebrow {font-size:9px;margin:0;}
  .project-dialog.immersive-project .immersive-count {display:flex;flex-direction:column;gap:6px;font-size:9px;white-space:nowrap;}
  .project-dialog.immersive-project .immersive-count span:last-child {font-size:8px;}
  .project-dialog.immersive-project .immersive-thumbs {gap:6px;margin-top:5px;padding-top:5px;}
  .project-dialog.immersive-project .dialog-thumb {flex:0 0 49px;max-width:49px;border-radius:2px;}
  .project-dialog.immersive-project .dialog-thumb img {width:49px;height:37px;}
  .project-dialog.immersive-project .gallery-arrow {top:43%;}
}
@media(prefers-reduced-motion:reduce){.project-dialog.immersive-project .immersive-image-wrap > img#dialogHero {transition:none;transform:none;}}

/* V19 polish: six compact progress markers, not thumbnails, on phone galleries. */
@media(max-width:760px){
 .project-dialog.immersive-project .immersive-thumbs{gap:6px;margin-top:1px;padding-top:1px;align-items:center;height:18px;overflow-x:auto;}
 .project-dialog.immersive-project .dialog-thumb,
 .project-dialog.immersive-project .dialog-thumb.is-active{
   flex:0 0 34px;width:34px;max-width:34px;height:18px;
   min-height:18px;border:0;border-radius:0;background:transparent;
   outline:none;opacity:1;position:relative;overflow:visible;
 }
 .project-dialog.immersive-project .dialog-thumb::after {
   content:"";position:absolute;top:8px;left:0;right:0;height:2px;
   background:rgba(255,255,255,.37);transition:background-color .18s,height .18s;
 }
 .project-dialog.immersive-project .dialog-thumb.is-active::after{background:#fff;height:3px;}
 .project-dialog.immersive-project .dialog-thumb:focus-visible{outline:2px solid #fff;outline-offset:1px;}
 .project-dialog.immersive-project .dialog-thumb img{display:none;}
}


/* V20 reliability: lightweight, accessible gallery photo-position markers. */
.project-dialog.immersive-project .gallery-thumb-mark{display:block;width:100%;height:100%;background:rgba(255,255,255,.26);border-radius:3px}
.project-dialog.immersive-project .dialog-thumb.is-active .gallery-thumb-mark{background:#fff}
.project-dialog.immersive-project .dialog-thumb{min-height:26px;min-width:36px;padding:4px}
@media(max-width:760px){.project-dialog.immersive-project .gallery-thumb-mark{height:2px;margin-top:8px}.project-dialog.immersive-project .dialog-thumb.is-active .gallery-thumb-mark{height:3px}}

/* V23: no top overlay, black vignette, frosted glass or status-bar pseudo-element. */
@media(max-width:760px){
 body::before{content:none!important;display:none!important;background:none!important;}
 .site-header,.site-header::before,.site-header::after{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  filter:none!important;-webkit-filter:none!important;
 }
}

/* V26 — scroll-snap temporarily relaxes only during the gentle discovery drift. */
@media(max-width:760px){.mobile-work-gallery.is-auto-drifting{scroll-snap-type:none!important;scroll-behavior:auto!important}}

/* V27: minimal lower-edge carousel position feedback; never touches the header. */
.project-carousel-position{display:none}
@media(max-width:760px){
 .project-carousel-position{
  display:block;position:relative;width:max-content;margin:-42px 20px 17px auto;
  padding:7px 10px;border:1px solid rgba(255,255,255,.43);
  border-radius:100px;color:#fff;background:rgba(21,19,17,.39);
  font-size:10px;letter-spacing:.15em;font-variant-numeric:tabular-nums;
  pointer-events:none;z-index:4;
 }
}