@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-montserrat: 'Montserrat', Arial, sans-serif;
  --paper: #f7f4f0;
  --blush: #eee6e1;
  --sage: #dfe4dc;
  --ink: #30312d;
  --muted: #696860;
  --line: #d7d1ca;
  --white: #fffdfa;
  --surface-hero: #8d8f85;
  --surface-image-intro: #d5cec6;
  --surface-image-grid: #c8c5bd;
  --surface-image-hero: #c9c6bf;
  --surface-image-story: #cbc8c2;
  --surface-image-gallery: #cbc7c0;
  --border-on-sage: #b9beb5;
  --text-sage-meta: #5c6059;
  --text-sage: #53574f;
  --border-sage-dark: #6d7169;
  --text-warm: #615d58;
  --text-label: #716c66;
  --border-field: #9d9690;
  --text-footer: #c8c8c1;
  --text-footer-link: #d7d6cf;
  --text-footer-label: #989a93;
  --text-footer-muted: #999b94;
  --text-detail-label: #645f5b;
  --text-unavailable: #9d8178;
  --accent-warm: #a0877f;
  --accent-sage-soft: #adb6ab;
  --white-a08: rgba(255,255,255,.08);
  --white-a18: rgba(255,255,255,.18);
  --white-a30: rgba(255,255,255,.3);
  --white-a35: rgba(255,255,255,.35);
  --white-a45: rgba(255,255,255,.45);
  --white-a70: rgba(255,255,255,.7);
  --white-a72: rgba(255,255,255,.72);
  --white-a78: rgba(255,255,255,.78);
  --white-a84: rgba(255,255,255,.84);
  --white-a90: rgba(255,255,255,.9);
  --white-a97: rgba(255,253,250,.97);
  --hero-ink-a07: rgba(26,27,24,.07);
  --hero-ink-a08: rgba(26,27,24,.08);
  --hero-ink-a18: rgba(26,27,24,.18);
  --hero-ink-a35: rgba(26,27,24,.35);
  --hero-ink-a50: rgba(26,27,24,.5);
  --hero-ink-a55: rgba(26,27,24,.55);
  --shade-ink-a25: rgba(28,28,25,.25);
  --shade-ink-a28: rgba(28,28,25,.28);
  --modal-ink-a88: rgba(28,29,26,.88);
  --modal-ink-a98: rgba(28,29,26,.98);
  --surface-ink-a18: rgba(29,30,27,.18);
  --surface-ink-a20: rgba(29,30,27,.2);
  --caption-ink-a54: rgba(32,32,29,.54);
  --shadow-ink-a12: rgba(38,37,33,.12);
  --shadow-warm-a07: rgba(45,43,39,.07);
  --container: 1180px;
  --edge-padding: max(28px, calc((100vw - var(--container)) / 2));
  /* Spacing scale: component sm/md/lg, section compact/carousel/regular, and large. */
  --space-sm: 24px;
  --space-md: 48px;
  --space-lg: 74px;
  --space-xl: 110px;
  --space-section-compact: 90px;
  --space-section-regular: 96px;
  --space-section-mobile: 70px;
  --space-section-mobile-error: 72px;
  --type-display-xl: clamp(58px, 8vw, 112px);
  --type-display-lg: clamp(48px, 6.4vw, 94px);
  --type-heading: clamp(38px, 4vw, 62px);
  --shadow-floating: 0 20px 36px var(--shadow-ink-a12);
  --motion-fast: .22s ease;
  --radius: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-montserrat), Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 14px;
  left: 14px;
  padding: 12px 16px;
  transform: translateY(calc(-100% - 16px));
  border: 1px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform var(--motion-fast);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  min-height: 88px;
  padding: 14px var(--edge-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
}

.hero-header { position: absolute; z-index: 20; top: 0; left: 0; right: 0; background: transparent; border-bottom: 1px solid var(--white-a30); transition: min-height .3s ease, padding .3s ease, color .3s ease, background-color .3s ease, box-shadow .3s ease; }
.hero-header.is-scrolled { position: fixed; min-height: 84px; padding-block: 12px; color: var(--ink); background: var(--white-a97); border-bottom-color: var(--line); box-shadow: 0 8px 30px var(--shadow-warm-a07); }
.inner-header { position: sticky; z-index: 20; top: 0; color: var(--ink); background: var(--white-a97); border-bottom: 1px solid var(--line); }

.wordmark { text-align: center; letter-spacing: .18em; text-transform: uppercase; }
.wordmark span { display: block; font-size: 10px; font-weight: 400; letter-spacing: .34em; margin-bottom: 2px; }
.wordmark strong { display: block; font-size: 23px; font-weight: 500; }
.menu-button { position: absolute; right: var(--edge-padding); display: block; padding: 0 0 7px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.site-navigation { position: absolute; z-index: 50; top: 100%; left: 0; right: 0; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; background: var(--white); color: var(--ink); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-floating); transition: opacity var(--motion-fast), transform var(--motion-fast), visibility var(--motion-fast); }
.site-navigation.is-open { visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto; }
.site-navigation-inner { width: min(100%, var(--container)); margin-inline: auto; padding: 38px 28px 44px; display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(64px, 10vw, 150px); }
.site-navigation-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 28px; align-items: start; }
.site-navigation-column p { grid-column: 1 / -1; margin: 0 0 8px; color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.site-navigation-column a { padding: 13px 0; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.45; }
.site-navigation-column a:hover, .site-navigation-column a:focus-visible { border-top-color: var(--ink); }

.hero-slider { position: relative; min-height: max(760px, 100svh); overflow: hidden; background: var(--surface-hero); color: var(--white); }
.hero-slides, .hero-slide, .hero-shade { position: absolute; inset: 0; }
.hero-slide { opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide:nth-child(1) .hero-image { object-position: center 60%; }
.hero-slide:nth-child(2) .hero-image { object-position: center 48%; }
.hero-slide:nth-child(3) .hero-image { object-position: center 50%; }
.hero-image { object-fit: cover; }
.hero-shade { z-index: 2; background: linear-gradient(90deg, var(--hero-ink-a50) 0%, var(--hero-ink-a18) 52%, var(--hero-ink-a07) 100%), linear-gradient(180deg, var(--shade-ink-a28), transparent 38%, var(--shade-ink-a25)); pointer-events: none; }
.hero-content { position: absolute; z-index: 4; left: var(--edge-padding); bottom: 105px; width: min(700px, calc(100% - 56px)); }
.eyebrow { margin: 0; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.hero-content .eyebrow { color: var(--white-a84); }
.hero-content__title { max-width: 700px; margin: 20px 0 30px; font-size: var(--type-display-lg); line-height: .98; font-weight: 400; letter-spacing: -.058em; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 24px; border: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.button-dark { background: var(--ink); color: var(--white); }
.button-light { border-color: var(--white-a90); color: var(--white); background: var(--white-a08); backdrop-filter: blur(5px); }
.hero-controls { position: absolute; z-index: 4; left: var(--edge-padding); right: var(--edge-padding); bottom: 28px; display: grid; grid-template-columns: auto minmax(80px, 250px) auto 48px; align-items: center; gap: 14px; color: var(--white); font-size: 10px; letter-spacing: .14em; }
.hero-controls button { width: 48px; height: 48px; margin-left: 8px; border: 1px solid var(--white-a78); background: var(--white-a08); color: white; cursor: pointer; }
.counter-line { height: 1px; background: var(--white-a45); position: relative; }
.counter-line i { display: block; height: 1px; background: var(--white); transition: width .5s ease; }

.section-shell { width: min(100%, var(--container)); margin-inline: auto; padding-inline: 28px; }
.section-image { object-fit: cover; }
.intro { padding-block: var(--space-xl); display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: clamp(54px, 8vw, 120px); align-items: center; }
.intro-image-wrap { position: relative; min-height: 560px; background: var(--surface-image-intro); overflow: hidden; }
.intro-copy { max-width: 590px; }
.intro-copy__title, .section-heading__title, .contact-copy__title { margin: 16px 0 var(--space-sm); font-size: var(--type-heading); line-height: 1.08; font-weight: 400; letter-spacing: -.045em; }
.intro-copy__body, .contact-copy__body { color: var(--muted); font-size: 15px; line-height: 1.85; }
.intro-copy__body p, .contact-copy__body p { margin: 0; }
.text-link { display: inline-flex; gap: 24px; margin-top: 18px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }

.services { padding-block: var(--space-section-regular); background: var(--sage); }
.services .eyebrow { color: #56554e; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 44px; }
.section-heading__title { margin-bottom: 0; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border-on-sage); }
.service-item { min-height: 310px; padding: 28px 30px 22px 0; border-right: 1px solid var(--border-on-sage); display: flex; flex-direction: column; align-items: flex-start; }
.service-item + .service-item { padding-left: 30px; }
.service-item:last-child { border-right: 0; }
.service-item > span { color: var(--text-sage-meta); font-size: 11px; letter-spacing: .15em; }
.service-item__title { margin: auto 0 14px; font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -.03em; }
.service-item p { max-width: 300px; margin: 0 0 30px; color: var(--text-sage); font-size: 13px; line-height: 1.7; }
.service-item a { padding-bottom: 6px; border-bottom: 1px solid var(--border-sage-dark); font-size: 9px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }

.portfolio { padding-block: var(--space-xl); }
.portfolio-heading { align-items: flex-end; }
.portfolio-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; }
.portfolio-tabs a { padding-bottom: 7px; color: var(--text-warm); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-tabs .is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.portfolio-grid { display: grid; grid-template-columns: 1.55fr .75fr; gap: 18px; }
.portfolio-main, .portfolio-side a { position: relative; overflow: hidden; background: var(--surface-image-grid); }
.portfolio-main { min-height: 620px; }
.portfolio-side { display: grid; grid-template-rows: 1fr 1fr; gap: 18px; }
.portfolio-side a { min-height: 0; }
.portfolio-grid a::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, var(--caption-ink-a54)); pointer-events: none; }
.portfolio-grid a > span { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; color: white; font-size: 11px; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.portfolio-grid a > span i { font-style: normal; font-size: 20px; font-weight: 400; }

.contact { display: grid; grid-template-columns: .9fr 1.1fr; }
.contact-copy { padding: 90px 68px 90px var(--edge-padding); background: var(--blush); }
.contact-copy > p:not(.eyebrow) { max-width: 480px; }
.contact-copy > a { display: inline-block; margin-top: 20px; padding-bottom: 5px; border-bottom: 1px solid var(--ink); font-size: 13px; }
/* Padding lives on .contact-form-wrap only — it wraps both the demo form (.contact-form)
   and the real WPForms output, and stacking padding on both narrowed the column badly. */
.contact-form { background: var(--white); display: grid; gap: 28px; align-content: center; }
.contact-form-wrap { min-width: 0; background: var(--white); padding: 88px var(--edge-padding) 88px 68px; }
.contact-form label { display: grid; gap: 8px; color: var(--text-label); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.contact-form input, .contact-form textarea { width: 100%; border: 0; border-bottom: 1px solid var(--border-field); border-radius: var(--radius); padding: 8px 0 11px; background: transparent; color: var(--ink); font: inherit; outline-offset: 5px; resize: vertical; }
.contact-form .button { justify-self: start; margin-top: 6px; }

/* WPForms: reuse the demo-form visual language instead of the plugin default theme. */
.contact-form-wrap .wpforms-container { margin: 0; }
.contact-form-wrap .wpforms-field-container { display: grid; gap: 28px; }
.contact-form-wrap .wpforms-field { padding: 0 !important; margin: 0 !important; }
.contact-form-wrap .wpforms-field-label { display: block; margin: 0 0 8px; color: var(--text-label); font-size: 10px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.contact-form-wrap .wpforms-required-label { color: var(--text-label); }
.contact-form-wrap .wpforms-field input[type="text"],
.contact-form-wrap .wpforms-field input[type="email"],
.contact-form-wrap .wpforms-field textarea { width: 100%; height: auto; border: 0; border-bottom: 1px solid var(--border-field); border-radius: var(--radius); padding: 8px 0 11px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; outline-offset: 5px; resize: vertical; box-shadow: none; }
.contact-form-wrap .wpforms-field textarea { min-height: 90px; }
.contact-form-wrap .wpforms-submit-container { margin: 28px 0 0; padding: 0; }
/* Higher-specificity selector (container id-attribute + class) needed: WPForms styles its
   submit button via its own !important CSS-variable rule, which otherwise wins the tie. */
.contact-form-wrap [id^="wpforms-"] .wpforms-submit { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 24px; border: 1px solid var(--ink) !important; border-radius: var(--radius) !important; background: var(--ink) !important; color: var(--white) !important; font: inherit; font-size: 10px !important; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; box-shadow: none !important; }
.contact-form-wrap [id^="wpforms-"] .wpforms-submit:hover,
.contact-form-wrap [id^="wpforms-"] .wpforms-submit:focus-visible { background: var(--ink) !important; opacity: .92; }
.contact-form-wrap .wpforms-error-container,
.contact-form-wrap label.wpforms-error { margin-top: 6px; color: #b3261e; font-size: 12px; text-transform: none; letter-spacing: normal; }
.contact-form-wrap .wpforms-field input.wpforms-error,
.contact-form-wrap .wpforms-field textarea.wpforms-error { border-color: #b3261e; }

@media (max-width: 780px) {
  .contact-form-wrap { padding: 68px 22px; }
}

.site-footer { padding: 76px var(--edge-padding) 26px; background: var(--ink); color: var(--white); }
.footer-main { display: grid; grid-template-columns: minmax(300px, 1.4fr) minmax(180px, .7fr) minmax(180px, .7fr); gap: clamp(54px, 8vw, 120px); padding-bottom: 68px; }
.footer-identity { display: flex; flex-direction: column; align-items: flex-start; }
.footer-wordmark { margin: 0 0 32px; text-align: left; }
.footer-wordmark strong { font-size: 31px; }
.footer-details { display: grid; gap: 8px; color: var(--text-footer); font-size: 11px; line-height: 1.6; }
.footer-details p { margin: 0; }
.footer-details a { border-bottom: 1px solid var(--white-a35); padding-bottom: 2px; }
.footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.footer-column a { color: var(--text-footer-link); font-size: 11px; line-height: 1.5; }
.footer-column a:hover, .footer-column a:focus-visible { color: var(--white); }
.footer-label { margin: 0 0 9px; color: var(--text-footer-label); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.footer-bottom { min-height: 58px; padding-top: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; border-top: 1px solid var(--white-a18); color: var(--text-footer-muted); font-size: 8px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.footer-bottom > div { display: flex; flex-wrap: wrap; gap: 24px; }

@media (max-width: 960px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 48px 28px; }
  .footer-identity { grid-column: 1 / -1; }
}

.portfolio-overview { background: var(--paper); }
.page-heading {
  padding-top: var(--page-heading-padding-top, 88px);
  padding-bottom: var(--page-heading-padding-bottom, 58px);
}
.page-heading-grid { display: grid; grid-template-columns: var(--page-heading-columns, minmax(0, 1.15fr) minmax(280px, .65fr)); gap: 80px; align-items: end; }
.page-heading__title { max-width: var(--page-heading-title-width, 720px); margin: 18px 0 0; font-size: var(--type-display-xl); line-height: var(--page-heading-title-line-height, .92); font-weight: 400; letter-spacing: var(--page-heading-title-letter-spacing, -.065em); }
.page-heading__lead { max-width: 430px; margin: 0 0 var(--page-heading-copy-margin-bottom, 9px); color: var(--muted); font-size: 14px; line-height: var(--page-heading-copy-line-height, 1.8); }
.page-heading__lead p { margin: 0; }
.page-heading--detail {
  --page-heading-padding-top: 76px;
  --page-heading-padding-bottom: 54px;
  --page-heading-columns: minmax(0, 1.2fr) minmax(280px, .6fr);
  --page-heading-title-width: none;
  --page-heading-title-line-height: .88;
  --page-heading-title-letter-spacing: -.068em;
  --page-heading-copy-margin-bottom: 6px;
  --page-heading-copy-line-height: 1.85;
}
.portfolio-filters { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.page-heading + .portfolio-filters { margin-top: 0; }
.portfolio-filters a, .portfolio-filters button { padding: 0 0 7px; border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.portfolio-filters .is-active { color: var(--ink); border-bottom: 1px solid var(--ink); }
.portfolio-projects { padding-bottom: 110px; display: grid; gap: 72px; }
.project { display: block; scroll-margin-top: 140px; }
.project-image { position: relative; min-height: 430px; overflow: hidden; background: var(--surface-image-grid); }
.project-image img { object-fit: cover; transition: transform .6s ease; }
.project:hover .project-image img { transform: scale(1.015); }
.project.is-unavailable:hover .project-image img { transform: none; }
.project-featured .project-image { min-height: 650px; }
.project-wide .project-image { min-height: 520px; }
.project-wide .project-image img { object-position: center 56%; }
.project-caption { min-height: 82px; padding-top: 17px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; border-top: 1px solid var(--ink); }
.project-caption > div { display: grid; grid-template-columns: 145px 1fr; gap: 20px; align-items: baseline; }
.project__title { margin: 0; font-size: clamp(20px, 2.2vw, 32px); line-height: 1.1; font-weight: 400; letter-spacing: -.035em; }
.project-type, .project-count, .project-caption > span { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.project-status { white-space: nowrap; }
.project-count { color: var(--ink); }
.project-caption > span[aria-hidden] { color: var(--ink); font-size: 20px; font-weight: 400; }
.project-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.project-pair .project-caption > div { grid-template-columns: 1fr; gap: 8px; }
.portfolio-cta { padding-block: var(--space-section-compact); background: var(--accent-warm); color: var(--white); }
.portfolio-cta .eyebrow { color: var(--white-a70); }
.portfolio-cta__title { max-width: 780px; margin: 18px 0 34px; font-size: clamp(44px, 5.5vw, 76px); line-height: 1.02; font-weight: 400; letter-spacing: -.055em; }

.page-heading--detail .eyebrow a { color: inherit; }
.detail-context { padding-top: 48px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr); gap: 90px; border-top: 1px solid var(--line); }
.detail-context > p { max-width: 720px; margin: 0; font-size: clamp(20px, 2.4vw, 32px); line-height: 1.45; font-weight: 400; letter-spacing: -.025em; }
.detail-context dl { margin: 0; padding-left: 26px; border-left: 1px solid var(--ink); display: grid; gap: 15px; align-content: start; }
.detail-context dl div { display: grid; grid-template-columns: 90px 1fr; gap: 16px; }
.detail-context dt { color: var(--text-detail-label); font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.detail-context dd { margin: 0; color: var(--ink); font-size: 11px; }
.detail-gallery-section { padding-bottom: 86px; }
.detail-gallery-section > .eyebrow { margin-bottom: 22px; }
.detail-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.gallery-item { position: relative; min-height: 420px; padding: 0; overflow: hidden; border: 0; background: var(--surface-image-gallery); cursor: zoom-in; }
.gallery-item img { object-fit: cover; transition: transform .5s ease; }
.gallery-item:hover img { transform: scale(1.015); }
.gallery-wide { grid-column: 1 / -1; min-height: 650px; }
.gallery-tall { min-height: 620px; }
.gallery-small { min-height: 390px; }
.gallery-finale { min-height: 530px; }
.gallery-crop-left img { object-position: 58% center; }
.gallery-crop-bottom img { object-position: center 72%; }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: var(--modal-ink-a98); color: white; }
.lightbox[open] { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 18px; }
.lightbox::backdrop { background: var(--modal-ink-a88); }
.lightbox-image { position: relative; width: 100%; height: 100%; min-height: 0; }
.lightbox-image img { object-fit: contain; }
.lightbox button { width: 48px; height: 48px; border: 1px solid var(--white-a70); background: transparent; color: white; cursor: pointer; }
.lightbox-close { position: absolute; z-index: 2; top: 20px; right: 20px; font-size: 24px; }
.lightbox-prev { grid-column: 1; grid-row: 1; }
.lightbox-image { grid-column: 2; grid-row: 1; }
.lightbox-next { grid-column: 3; grid-row: 1; }
.lightbox p { grid-column: 2; grid-row: 2; margin: 0; text-align: center; font-size: 10px; letter-spacing: .14em; }
.detail-project-nav { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-top: 1px solid var(--line); }
.detail-project-nav a, .detail-project-nav span { font-size: 9px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.detail-project-nav span { color: var(--text-unavailable); }

.page-hero {
  min-height: var(--page-hero-min-height, 620px);
  display: grid;
  grid-template-columns: var(--page-hero-columns, 1fr 1fr);
  border-bottom: 1px solid var(--ink);
}
.page-hero-copy { padding: var(--page-hero-copy-padding, 84px 70px 84px var(--edge-padding)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background: var(--blush); }
.page-hero-copy__title { max-width: var(--page-hero-title-width, 660px); margin: var(--page-hero-title-margin, 19px 0 26px); font-size: var(--type-display-lg); line-height: var(--page-hero-title-line-height, .98); font-weight: 400; letter-spacing: var(--page-hero-title-letter-spacing, -.06em); }
.page-hero-copy__lead { max-width: var(--page-hero-copy-width, 520px); margin: var(--page-hero-copy-margin, 0 0 32px); color: var(--muted); font-size: 14px; line-height: var(--page-hero-copy-line-height, 1.8); }
.page-hero-copy__lead p { margin: 0; }
.page-hero-image { position: relative; min-height: var(--page-hero-image-height, var(--page-hero-min-height, 620px)); overflow: hidden; background: var(--surface-image-hero); }
.page-hero-image img { object-fit: cover; object-position: var(--page-hero-image-position, 50% 50%); }
.page-hero--about {
  --page-hero-min-height: 680px;
  --page-hero-columns: .82fr 1.18fr;
  --page-hero-copy-padding: 90px clamp(48px, 7vw, 112px) 90px var(--edge-padding);
  --page-hero-title-width: 620px;
  --page-hero-title-margin: 20px 0 30px;
  --page-hero-title-line-height: .94;
  --page-hero-title-letter-spacing: -.065em;
  --page-hero-copy-width: 500px;
  --page-hero-copy-margin: 0;
  --page-hero-copy-line-height: 1.85;
  --page-hero-image-position: center 34%;
}
.split-introduction {
  padding-top: var(--split-introduction-padding-top, 100px);
  padding-bottom: var(--split-introduction-padding-bottom, 96px);
}
.split-introduction-grid { display: grid; grid-template-columns: var(--split-introduction-columns, minmax(320px, .9fr) minmax(0, 1fr)); gap: var(--split-introduction-gap, 90px); align-items: start; margin-top: var(--split-introduction-margin-top, 18px); }
.split-introduction__title { max-width: var(--split-introduction-title-width, 560px); margin: 0; font-size: var(--split-introduction-title-size, clamp(40px, 4.5vw, 66px)); line-height: 1.02; font-weight: 400; letter-spacing: var(--split-introduction-title-spacing, -.052em); }
.split-introduction-copy { display: grid; gap: 18px; }
.split-introduction-copy p { margin: 0; color: var(--muted); font-size: 14px; line-height: var(--split-introduction-copy-line-height, 1.85); }
.split-introduction--about {
  --split-introduction-padding-top: 108px;
  --split-introduction-padding-bottom: 100px;
  --split-introduction-columns: minmax(360px, .9fr) minmax(0, 1fr);
  --split-introduction-gap: clamp(56px, 8vw, 116px);
  --split-introduction-margin-top: 20px;
  --split-introduction-title-width: 590px;
  --split-introduction-title-size: clamp(40px, 4.6vw, 68px);
  --split-introduction-title-spacing: -.055em;
  --split-introduction-copy-line-height: 1.9;
}
.service-examples { padding-bottom: 110px; }
.example-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 260px; gap: 14px; }
.example-image { position: relative; min-width: 0; overflow: hidden; border: 0; padding: 0; background: var(--surface-image-story); }
.example-image img { object-fit: cover; }
.example-video { color: white; cursor: pointer; }
.example-video-wide { grid-column: span 2; grid-row: span 2; }
.example-video::after, .service-video-still::after { content: ''; position: absolute; inset: 0; background: var(--surface-ink-a18); }
.play-button { position: absolute; z-index: 2; left: 50%; top: 50%; width: 62px; height: 62px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 1px solid var(--white-a90); color: white; font-size: 12px; }
.example-video em { position: absolute; z-index: 2; left: 20px; bottom: 18px; font-size: 9px; font-style: normal; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }
.story-list { padding-bottom: var(--space-xl); display: grid; gap: 0; }
.story-row { min-height: var(--story-row-height, 510px); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.story-row:last-child { border-bottom: 1px solid var(--line); }
.story-image { position: relative; min-height: var(--story-image-height, 510px); overflow: hidden; background: var(--surface-image-story); }
.story-image img { object-fit: cover; }
.story-copy { padding: var(--story-copy-padding, 64px clamp(38px, 6vw, 88px)); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.story-row__title { max-width: var(--story-title-width, none); margin: var(--story-title-margin, 17px 0 22px); font-size: var(--story-title-size, clamp(36px, 4vw, 58px)); line-height: 1.02; font-weight: 400; letter-spacing: var(--story-title-spacing, -.05em); }
.story-row__body { max-width: var(--story-copy-width, 460px); margin: 0; color: var(--muted); font-size: 14px; line-height: var(--story-copy-line-height, 1.85); }
.story-row__body p { margin: 0; }
.story-row.is-reversed .story-image { grid-column: 2; grid-row: 1; }
.story-row.is-reversed .story-copy { grid-column: 1; grid-row: 1; }
.story-list--about {
  --story-row-height: 560px;
  --story-image-height: 560px;
  --story-copy-padding: 70px clamp(40px, 6vw, 90px);
  --story-title-width: 500px;
  --story-title-margin: 18px 0 24px;
  --story-title-size: clamp(38px, 4.2vw, 62px);
  --story-title-spacing: -.052em;
  --story-copy-width: 470px;
  --story-copy-line-height: 1.9;
}
.service-video-still::after { background: var(--surface-ink-a20); }
.about-note { padding-block: var(--space-section-regular); background: var(--accent-warm); color: var(--white); }
.about-note .eyebrow { color: var(--white-a72); }
.about-note__text { max-width: 930px; margin: 18px 0 0; font-size: clamp(44px, 6vw, 86px); line-height: 1.02; font-weight: 400; letter-spacing: -.055em; }

.not-found-page { min-height: 100svh; display: flex; flex-direction: column; }
.not-found-block { flex: 1; padding-block: var(--space-section-regular); display: flex; align-items: center; background: var(--sage); }
.not-found-inner { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(60px, 10vw, 150px); align-items: center; }
.not-found-number { font-size: clamp(120px, 18vw, 250px); line-height: .8; font-weight: 300; letter-spacing: -.09em; color: var(--accent-sage-soft); }
.not-found__title { max-width: 650px; margin: 18px 0 26px; font-size: clamp(50px, 6vw, 86px); line-height: .96; font-weight: 400; letter-spacing: -.06em; }
.not-found-copy > p:not(.eyebrow) { max-width: 560px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }
.not-found-actions { margin-top: 34px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; }
.not-found-actions .text-link { margin-top: 0; }

.legal-intro { border-bottom: 1px solid var(--line); }
.legal-content { max-width: 820px; padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.legal-open { margin: 0 0 var(--space-md); padding: var(--space-sm); border: 1px solid var(--border-on-sage); background: var(--sage); color: var(--ink); font-size: 12px; line-height: 1.7; }
.legal-content article { padding: var(--space-md) 0; border-top: 1px solid var(--line); }
.legal-content article:last-child { border-bottom: 1px solid var(--line); }
.legal__body > * { max-width: 100%; }
.legal__body > :is(h2, h3, h4) { margin: 0 0 18px; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; font-weight: 400; letter-spacing: -.04em; }
.legal-content article p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.85; }

@media (max-width: 780px) {
  .site-header { min-height: 84px; padding: 14px 22px; flex-direction: row; }
  .hero-header.is-scrolled { min-height: 76px; padding-block: 10px; }
  .site-header > .wordmark { margin-inline: auto; }
  .menu-button { right: 22px; }
  .site-navigation-inner { padding: 20px 22px 28px; grid-template-columns: 1fr; gap: 28px; }
  .site-navigation-column { grid-template-columns: 1fr; gap: 0; }
  .site-navigation-column p { margin: 10px 0 4px; }
  .site-navigation-column a { padding: 12px 0; border-top: 0; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
  .hero-slider { min-height: max(680px, 100svh); }
  .hero-shade { background: linear-gradient(180deg, var(--hero-ink-a35), var(--hero-ink-a08) 42%, var(--hero-ink-a55)); }
  .hero-content { left: 22px; bottom: 116px; width: calc(100% - 44px); }
  .hero-content__title { font-size: clamp(44px, 13.5vw, 66px); }
  .hero-controls { left: 22px; right: 22px; grid-template-columns: auto 1fr auto 48px; }
  .section-shell { padding-inline: 22px; }
  .intro { padding-block: var(--space-lg); grid-template-columns: 1fr; gap: 44px; }
  .intro-image-wrap { min-height: 540px; }
  .services, .portfolio { padding-block: var(--space-lg); }
  .section-heading { align-items: flex-start; }
  .service-grid { grid-template-columns: 1fr; }
  .service-item, .service-item + .service-item { min-height: 240px; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--border-on-sage); }
  .service-item__title { margin-top: 54px; }
  .portfolio-heading { display: grid; }
  .portfolio-tabs { justify-content: flex-start; gap: 18px; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .portfolio-main { min-height: 520px; }
  .portfolio-side { grid-template-columns: 1fr 1fr; grid-template-rows: 280px; }
  .contact { grid-template-columns: 1fr; }
  .contact-copy { padding: 68px 22px; }
  .site-footer { padding: 60px 22px 24px; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 48px 28px; padding-bottom: 50px; }
  .footer-identity { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .page-heading { --page-heading-padding-top: 64px; --page-heading-padding-bottom: 46px; }
  .page-heading-grid { grid-template-columns: 1fr; gap: 28px; }
  .page-heading__title { font-size: clamp(56px, 18vw, 82px); }
  .portfolio-filters { gap: 18px; margin-top: 38px; }
  .portfolio-projects { gap: 52px; padding-bottom: 74px; }
  .project-featured .project-image, .project-image, .project-wide .project-image { min-height: 430px; }
  .project-pair { grid-template-columns: 1fr; gap: 52px; }
  .project-caption > div { grid-template-columns: 1fr; gap: 8px; }
  .portfolio-cta { padding-block: var(--space-section-mobile); }
  .page-heading--detail { --page-heading-padding-top: 58px; --page-heading-padding-bottom: 42px; }
  .page-heading--detail .page-heading__title { font-size: clamp(56px, 18vw, 80px); }
  .detail-context { padding-top: 38px; padding-bottom: 52px; grid-template-columns: 1fr; gap: 40px; }
  .detail-context dl { padding-left: 20px; }
  .detail-gallery-section { padding-bottom: 62px; }
  .detail-gallery { grid-template-columns: 1fr; gap: 12px; }
  .gallery-wide, .gallery-tall, .gallery-small, .gallery-finale { grid-column: auto; min-height: 520px; }
  .lightbox { padding: 14px; }
  .lightbox[open] { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
  .lightbox button { width: 42px; height: 42px; }
  .detail-project-nav { min-height: 96px; }
  .page-hero { --page-hero-columns: 1fr; }
  .page-hero-copy { padding: 66px 22px; }
  .page-hero-copy__title { font-size: clamp(46px, 13.5vw, 68px); }
  .page-hero-image { min-height: 520px; }
  .page-hero--about .page-hero-copy { padding: 68px 22px; }
  .page-hero--about .page-hero-copy__title { font-size: clamp(50px, 15vw, 76px); }
  .page-hero--about .page-hero-image { min-height: 560px; }
  .split-introduction { --split-introduction-padding-top: 72px; --split-introduction-padding-bottom: 68px; }
  .split-introduction--about { --split-introduction-padding-top: 74px; }
  .split-introduction-grid { grid-template-columns: 1fr; gap: 34px; }
  .service-examples { padding-bottom: 74px; }
  .example-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
  .example-video-wide { grid-column: 1 / -1; }
  .story-list { padding-bottom: var(--space-lg); }
  .story-row { grid-template-columns: 1fr; }
  .story-image { min-height: 460px; }
  .story-list--about .story-image { min-height: 500px; }
  .story-copy { padding: 54px 0; }
  .story-row.is-reversed .story-image, .story-row.is-reversed .story-copy { grid-column: 1; grid-row: auto; }
  .about-note { padding-block: var(--space-section-mobile); }
  .not-found-block { padding-block: var(--space-section-mobile-error); }
  .not-found-inner { grid-template-columns: 1fr; gap: 48px; }
  .not-found-number { font-size: clamp(110px, 40vw, 180px); }
}

@media (max-width: 480px) {
  .portfolio-side { grid-template-columns: 1fr; grid-template-rows: 300px 300px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-identity { grid-column: auto; }
  .example-grid { grid-template-columns: 1fr; }
  .example-video-wide { grid-column: auto; grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Accessibility override: this is the only intentional use of !important. */
  *, *::before, *::after { transition-duration: .01ms !important; }
}


/* Native media replacement for the former framework image component. */
.media-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[hidden] {
  display: none;
}

.project-pair.is-filtered-single {
  grid-template-columns: 1fr;
}

.project-pair.is-filtered-single .project-caption > div {
  grid-template-columns: 145px 1fr;
  gap: 20px;
}