/*
Theme Name: Brooks Built Homes
Theme URI: https://brooksbuilthomes.com/
Author: Brooks Built Homes
Description: Custom luxury portfolio theme for Brooks Built Homes.
Version: 2.0.2
Text Domain: brooks-built-homes
*/

:root {
  --black: #0a0a0a;
  --charcoal: #292929;
  --copper: #b8896a;
  --copper-light: #b8896a;
  --ivory: #f4f1ea;
  --limestone: #b8b3ab;
  --paper: #e7e2d9;
  --ink: #171717;
  --muted: #69645e;
  --line-dark: rgba(184, 137, 106, 0.45);
  --line-light: rgba(80, 72, 65, 0.25);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --type-display-xl: clamp(52px, 5.6vw, 78px);
  --type-display: clamp(46px, 5vw, 68px);
  --type-section: clamp(38px, 4vw, 52px);
  --type-heading: 32px;
  --type-subheading: 22px;
  --type-lead: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
img { display: block; max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 1rem;
  top: -5rem;
  padding: 0.75rem 1rem;
  background: var(--ivory);
  color: var(--black);
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  min-height: 108px;
  padding: 18px clamp(24px, 5vw, 76px);
  align-items: center;
  justify-content: space-between;
  gap: 36px;
  background: var(--black);
  border-bottom: 1px solid rgba(184,137,106,.28);
}
.brand { display: inline-flex; align-items: center; gap: 16px; }
.brand-mark {
  display: block;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  object-fit: contain;
}
.brand,.footer-brand,.finance-finish,.about-brand-anchor,.about-mark-panel,.about-centered-hero { perspective:900px; }
.brand-mark,.finance-brand-mark,.about-anchor-mark,.about-large-mark,.about-small-mark,.brand-intro-logo { background-color:transparent; background-image:none; transform-origin:center; backface-visibility:hidden; }
.logo-motion-shell { position:relative; display:inline-block; flex:0 0 auto; overflow:visible; line-height:0; }
.logo-motion-shell > img { position:relative; z-index:1; }
.logo-trace-dot { position:absolute; z-index:3; top:-4px; left:-4px; display:block; width:8px; height:8px; border:1px solid var(--ivory); background:var(--copper-light); box-shadow:0 0 0 4px rgba(184,137,106,.12),0 0 14px rgba(203,154,113,.9); opacity:0; pointer-events:none; transform:rotate(45deg); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .logo-motion-shell:hover > .logo-trace-dot { animation:fastLogoTrace .62s cubic-bezier(.45,0,.3,1) both; }
  .logo-motion-shell:hover > img { animation:logoGlassSwipe 2s cubic-bezier(.3,.72,.2,1) .34s both; }
}
@keyframes logoGlassSwipe {
  0%,10% { background-position:150% 0; }
  78% { background-position:-48% 0; }
  100% { background-position:-68% 0; }
}
@keyframes fastLogoTrace {
  0% { opacity:0; transform:translate(0,0) rotate(45deg); }
  3% { opacity:1; }
  25% { transform:translate(var(--trace-x),0) rotate(135deg); }
  50% { transform:translate(var(--trace-x),var(--trace-y)) rotate(225deg); }
  75% { transform:translate(0,var(--trace-y)) rotate(315deg); }
  94% { opacity:1; }
  100% { opacity:0; transform:translate(0,0) rotate(405deg); }
}
.brand-bb {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -1.2px;
}
.brand-divider {
  width: 32px;
  height: 1px;
  flex: 0 0 1px;
  background: var(--copper);
}
.brand-homes {
  width: 32px;
  color: var(--ink);
  font-size: 7px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1.1px;
  text-align: center;
}
.brand-name > span {
  display: block;
  color: #B8896A;
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: .6px;
}
.brand-name small {
  display: block;
  margin-top: 6px;
  padding-left: 3px;
  color: var(--limestone);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 2.6px;
  text-transform: uppercase;
}
.primary-nav { display: flex; align-items: center; gap: clamp(17px, 2vw, 32px); }
.primary-nav a,
.nav-parent {
  position: relative;
  color: #d7d2ca;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.nav-parent { display:flex; min-height:44px; padding:0; align-items:center; gap:7px; border:0; background:transparent; cursor:pointer; }
.nav-parent span { color:var(--copper-light); font-size:14px; transition:transform .2s ease; }
.nav-parent[aria-expanded="true"] span { transform:rotate(180deg); }
.nav-group { position:relative; display:flex; align-items:center; }
.nav-dropdown {
  position:absolute;
  top:calc(100% + 20px);
  left:-24px;
  display:none;
  width:280px;
  padding:14px 24px 18px;
  background:#151515;
  border:1px solid var(--line-dark);
  box-shadow:0 22px 55px rgba(0,0,0,.38);
}
.nav-dropdown-right { right:-24px; left:auto; }
.nav-parent[aria-expanded="true"] + .nav-dropdown,
.nav-group:focus-within .nav-dropdown { display:block; }
.nav-dropdown a { display:block; min-height:0; padding:11px 0; border-bottom:1px solid #302b27; font-size:12px; }
.nav-dropdown a:last-child { border-bottom:0; }
.nav-dropdown a::after { position:absolute; right:0; bottom:-1px; left:0; height:1px; background:var(--copper-light); content:""; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.nav-dropdown a:hover::after,.nav-dropdown a:focus-visible::after { transform:scaleX(1); transform-origin:left; }
.nav-dropdown strong { display:block; color:var(--ivory); font-weight:500; }
.nav-dropdown small { display:block; margin-top:3px; color:#8f8982; font-size:11px; letter-spacing:.35px; text-transform:none; }
.primary-nav > a:not(.nav-inquiry)::after,
.nav-group > .nav-parent::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -8px;
  left: 0;
  height: 1px;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .25s ease;
}
.primary-nav > a:not(.nav-inquiry):hover::after,
.primary-nav > a:not(.nav-inquiry):focus-visible::after,
.nav-group:hover > .nav-parent::after,
.nav-group > .nav-parent:focus-visible::after,
.nav-group > .nav-parent[aria-expanded="true"]::after { transform: scaleX(1); transform-origin: left; }
.nav-inquiry {
  padding: 12px 17px;
  border: 1px solid var(--copper);
  transition: background .25s ease, color .25s ease;
}
.nav-inquiry:hover, .nav-inquiry[aria-current="page"] { background: var(--copper); color: var(--ivory); }
.menu-toggle { display: none; }

.hero {
  display: grid;
  min-height: 710px;
  grid-template-columns: minmax(430px, 42%) 1fr;
  background: var(--black);
}
.hero-copy {
  display: flex;
  padding: 90px clamp(36px, 5vw, 78px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.eyebrow {
  margin: 0 0 22px;
  color: var(--copper-light);
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; }
.hero h1 {
  max-width: 590px;
  margin-bottom: 30px;
  font-size: var(--type-display-xl);
  line-height: .94;
  letter-spacing: -2px;
}
.hero h1 em { display: block; margin-top: 12px; color: var(--copper-light); font-size: .68em; font-weight: 400; line-height: 1.08; }
.hero-copy > p:not(.eyebrow) {
  max-width: 540px;
  margin-bottom: 34px;
  color: #c9c3bb;
  font-family: var(--serif);
  font-size: var(--type-lead);
  line-height: 1.55;
}
.text-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--copper);
  font-size: 13px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(5px); }
.hero-image { position: relative; min-height: 710px; overflow: hidden; border-left: 1px solid var(--copper); }
.hero-image picture { display:block; width:100%; height:100%; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: 52% center; filter: saturate(.68) contrast(1.03) brightness(.74); }
.hero-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,.35), transparent 40%), linear-gradient(0deg, rgba(10,10,10,.45), transparent 36%);
}
.image-caption {
  position: absolute;
  z-index: 1;
  right: 34px;
  bottom: 30px;
  color: var(--ivory);
  font-size: 12px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}
.proof-bar {
  display: grid;
  min-height: 92px;
  padding: 0 clamp(24px,5vw,76px);
  grid-template-columns: repeat(3,1fr);
  align-items: center;
  background: #121212;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.proof-bar span {
  color: #c8c1b8;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-align: center;
  text-transform: uppercase;
}
.proof-bar span + span { border-left: 1px solid var(--line-dark); }

.light-section { background: var(--ivory); color: var(--ink); }
.dark-section { background: var(--black); color: var(--ivory); }
.section-wrap { padding: clamp(82px, 10vw, 150px) clamp(24px, 7vw, 108px); }
.section-heading {
  display: flex;
  margin-bottom: 58px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}
.section-heading h2,
.editorial-copy h2 {
  margin-bottom: 0;
  font-size: var(--type-section);
  line-height: 1.02;
  letter-spacing: -1px;
}
.page-intro h1,
.inquiry-intro h1 {
  margin-bottom:0;
  font-size:var(--type-display);
  line-height:.98;
  letter-spacing:-1.5px;
}
.section-heading .text-link, .light-section .text-link { color: var(--ink); }
.project-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
.project-card { margin: 0; }
.project-card.secondary { padding-top: 110px; }
.project-image { position: relative; overflow: hidden; background: var(--charcoal); }
.project-image img { width: 100%; height: 560px; object-fit: cover; transition: transform .6s ease; }
.project-card.secondary .project-image img { height: 390px; }
.project-card:hover img { transform: scale(1.02); }
.project-card figcaption { display: flex; padding-top: 20px; justify-content: space-between; gap: 20px; }
.project-card h3 { margin-bottom: 5px; font-size: 28px; line-height: 1.1; }
.project-card p { margin: 0; color: var(--muted); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.project-number { color: var(--copper); font-family: var(--serif); font-size: 24px; }
.project-grid.expanded { grid-template-columns:repeat(12,1fr); gap:72px 34px; align-items:start; }
.project-grid.expanded .project-card { grid-column:span 7; }
.project-grid.expanded .project-card:nth-child(even) { grid-column:span 5; padding-top:92px; }
.project-grid.expanded .project-card:nth-child(3n) { grid-column:span 5; }
.project-grid.expanded .project-card:nth-child(4n) { grid-column:span 7; padding-top:0; }
.project-grid.expanded .project-image img { height:500px; }
.project-grid.expanded .project-card:nth-child(even) .project-image img { height:390px; }
.full-portfolio { margin-top:60px; }
.portfolio-index { padding-top:0; }
.portfolio-index-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(48px,6vw,82px) clamp(24px,4vw,54px); }
.portfolio-index-grid .project-card { color:var(--ink); }
.portfolio-index-grid .project-image { aspect-ratio:4 / 3; }
.portfolio-index-grid .project-image { cursor:none; }
.portfolio-index-grid .project-image img { width:calc(100% + 18px); max-width:none; height:calc(100% + 18px); margin:-9px; object-fit:cover; transform:translate3d(var(--photo-x,0),var(--photo-y,0),0) scale(1.01); transition:transform .55s cubic-bezier(.22,.65,.25,1),filter .35s ease; will-change:transform; }
.portfolio-index-grid .project-card:hover .project-image img { transform:translate3d(var(--photo-x,0),var(--photo-y,0),0) scale(1.045); filter:brightness(.76); }
.portfolio-index-grid .project-card figcaption { padding-top:17px; }
.portfolio-index-grid .project-card h3 { font-size:clamp(25px,2.5vw,34px); }
.homes-showcase { padding-bottom:clamp(70px,9vw,120px); background:var(--black); }
.home-showcase { scroll-margin-top:24px; background:var(--black); }
.home-showcase + .home-showcase { border-top:1px solid var(--line-dark); }
.home-anchor { position:relative; width:min(100%,1320px); min-height:clamp(300px,38vh,400px); margin:0 auto; overflow:hidden; background:var(--charcoal); }
.home-anchor > img { width:100%; height:clamp(300px,38vh,400px); object-fit:cover; object-position:center; }
.home-anchor-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,7,7,.76) 0%,rgba(7,7,7,.22) 48%,rgba(7,7,7,.08) 100%),linear-gradient(0deg,rgba(7,7,7,.7),transparent 48%); }
.home-anchor-copy { position:absolute; z-index:1; left:clamp(28px,6vw,84px); bottom:clamp(48px,5vw,72px); max-width:760px; color:var(--ivory); }
.home-anchor-copy > span { display:block; margin-bottom:14px; color:var(--copper-light); font-family:var(--serif); font-size:22px; }
.home-anchor-copy h2 { margin-bottom:10px; font-size:clamp(44px,5vw,64px); line-height:.92; letter-spacing:-1.5px; }
.home-anchor-copy p { margin:0; color:#d3cec7; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.home-scroll-cue { position:absolute; z-index:1; right:clamp(28px,5vw,76px); bottom:clamp(54px,6vw,82px); display:flex; align-items:center; gap:13px; color:var(--ivory); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.home-scroll-cue b { color:var(--copper-light); font-size:18px; font-weight:400; }
.home-showcase .gallery-roll { border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); }
.home-selector { width:min(calc(100% - 48px),920px); margin:0 auto; padding-top:28px; }
.home-selector-stage { position:relative; height:auto; overflow:hidden; background:var(--charcoal); }
.home-selector-stage > img { display:block; width:100%; height:auto; object-fit:contain; opacity:1; transition:opacity .3s ease; }
.home-selector-stage > img.is-changing { opacity:.25; }
.home-selector-arrow { position:absolute; z-index:3; top:50%; display:grid; width:58px; height:58px; padding:0; place-items:center; transform:translateY(-50%); border:1px solid rgba(244,241,234,.6); border-radius:50%; background:rgba(10,10,10,.66); color:var(--ivory); font-size:24px; cursor:pointer; backdrop-filter:blur(8px); transition:background .2s ease,border-color .2s ease; }
.home-selector-arrow:hover,.home-selector-arrow:focus-visible { border-color:var(--copper-light); background:var(--copper); }
.home-selector-previous { left:24px; }
.home-selector-next { right:24px; }
.home-selector-status { position:absolute; z-index:2; right:24px; bottom:22px; display:flex; min-width:92px; padding:9px 13px; align-items:center; justify-content:center; gap:10px; background:rgba(10,10,10,.72); color:var(--ivory); font-size:12px; letter-spacing:1.4px; }
.home-selector-status i { display:block; width:22px; height:1px; background:var(--copper-light); }
.hybrid-projects { width:min(calc(100% - 48px),1200px); margin:0 auto; }
.hybrid-project[hidden] { display:none; }
.hybrid-project { display:grid; padding:clamp(44px,6vw,76px) 0 0; grid-template-columns:minmax(220px,.34fr) minmax(0,1fr); gap:clamp(34px,5vw,72px); align-items:start; }
.hybrid-project-copy { padding-top:18px; color:var(--ivory); }
.hybrid-project-copy h2 { margin:0 0 12px; font-size:clamp(38px,4vw,54px); line-height:.95; }
.hybrid-project-copy > p:not(.eyebrow):not(.hybrid-project-meta) { color:#bdb6ae; font-family:var(--serif); font-size:18px; line-height:1.55; }
.hybrid-project-meta { margin:0 0 28px; color:var(--copper-light); font-size:10px; letter-spacing:1.8px; text-transform:uppercase; }
.hybrid-project .gallery-roll { width:100%; padding:0; }
.home-detail-collection > .eyebrow { margin-bottom:16px; }
.home-detail-scroll { position:relative; padding:0 58px; margin:0 -58px; }
.home-detail-grid { display:flex; width:100%; padding:0 0 14px; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:var(--copper) #171717; }
.home-detail-image { margin:0; flex:0 0 auto; overflow:hidden; background:#171717; scroll-snap-align:start; }
.home-detail-image button { display:block; padding:0; border:0; background:transparent; cursor:zoom-in; }
.home-detail-image img { display:block; width:auto; height:clamp(150px,15vw,205px); object-fit:contain; transition:transform .35s ease; }
.home-detail-image:hover img { transform:scale(1.015); }
.detail-scroll-arrow { position:absolute; z-index:3; top:50%; display:grid; width:44px; height:44px; padding:0; place-items:center; transform:translateY(-60%); border:1px solid var(--line-dark); border-radius:50%; background:transparent; color:var(--copper-light); font-size:19px; cursor:pointer; transition:background .2s ease,border-color .2s ease,color .2s ease; }
.detail-scroll-arrow:hover,.detail-scroll-arrow:focus-visible { border-color:var(--copper-light); background:var(--copper); }
.detail-scroll-previous { left:2px; }
.detail-scroll-next { right:2px; }
.lightbox-open { overflow:hidden; }
.detail-lightbox[hidden] { display:none; }
.detail-lightbox { position:fixed; z-index:1000; inset:0; display:grid; width:100vw; height:100vh; padding:56px 92px; place-items:center; background:rgba(4,4,4,.97); }
.detail-lightbox:not([hidden]) { animation:lightboxReveal .28s ease both; }
.detail-lightbox figure { display:flex; width:100%; height:100%; margin:0; flex-direction:column; align-items:center; justify-content:center; }
.detail-lightbox figure > img { display:block; max-width:100%; max-height:calc(100vh - 150px); object-fit:contain; }
.detail-lightbox figcaption { display:flex; margin-top:18px; align-items:center; gap:10px; color:var(--ivory); font-size:11px; letter-spacing:1.5px; }
.detail-lightbox figcaption i { display:block; width:24px; height:1px; background:var(--copper-light); }
.detail-lightbox-close { position:absolute; top:24px; right:30px; width:46px; height:46px; border:1px solid var(--line-dark); border-radius:50%; background:transparent; color:var(--ivory); cursor:pointer; font-size:30px; font-weight:200; line-height:1; }
.detail-lightbox-arrow { position:absolute; top:50%; display:grid; width:52px; height:52px; padding:0; place-items:center; transform:translateY(-50%); border:1px solid var(--line-dark); border-radius:50%; background:transparent; color:var(--ivory); cursor:pointer; font-size:22px; }
.detail-lightbox-close:hover,.detail-lightbox-arrow:hover { border-color:var(--copper-light); background:var(--copper); }
.detail-lightbox-previous { left:28px; }
.detail-lightbox-next { right:28px; }
.home-detail-empty { margin:0; padding:42px 0; border-top:1px solid var(--line-dark); border-bottom:1px solid var(--line-dark); color:#8f8982; font-family:var(--serif); font-size:18px; }
.portfolio-filter { display:flex; padding:18px 0; gap:34px; border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light); color:var(--muted); font-size:12px; letter-spacing:1.6px; text-transform:uppercase; }
.portfolio-filter span:first-child { color:var(--copper); }

.principal-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(44px, 8vw, 120px); align-items: center; }
.principal-image { min-height:590px; background-color:#181818; background-image:url("assets/shady-lane-kitchen.jpg"); background-position:center center; background-size:cover; position:relative; overflow:hidden; }
.editorial-copy > p:not(.eyebrow) { max-width: 660px; color: #c9c3bb; font-family: var(--serif); font-size: var(--type-lead); line-height: 1.55; }
.signature { margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line-dark); color: var(--copper-light); font-size: 12px; letter-spacing: 2.1px; text-transform: uppercase; }

.page-intro { padding: 100px clamp(24px,7vw,108px) 70px; }
.page-intro p:not(.eyebrow) { max-width: 720px; margin: 26px 0 0; color: #c9c3bb; font-family: var(--serif); font-size: var(--type-lead); line-height:1.55; }
.page-intro.light p:not(.eyebrow) { color: var(--muted); }
.page-intro:has(+ .process-wrap) { padding-bottom:36px; }
.page-intro:has(+ .process-wrap) h1 { font-size:var(--type-display); }
.page-intro:has(+ .process-wrap) p:not(.eyebrow) { font-size:var(--type-lead); }
.page-intro + .process-wrap { padding-top:24px; }
.residence-feature { display:grid; grid-template-columns: 1.2fr .8fr; min-height: 620px; }
.residence-feature-image img { width:100%; height:100%; min-height:620px; object-fit:cover; }
.residence-feature-copy { display:flex; padding:70px clamp(34px,6vw,90px); flex-direction:column; justify-content:center; background:var(--ivory); color:var(--ink); }
.residence-feature-copy h1 { margin-bottom:20px; font-size:var(--type-display); line-height:.98; letter-spacing:-1.5px; }
.residence-meta { margin-bottom:34px; color:var(--copper); font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.residence-feature-copy p { color:var(--muted); }
.preview-note { padding-top:18px; border-top:1px solid var(--line-light); font-size:14px; }
.project-detail-page { background:var(--black); }
.project-detail-page .residence-feature { min-height:480px; grid-template-columns:1.05fr .95fr; }
.project-detail-page .residence-feature-image img { height:480px; min-height:480px; }
.project-breadcrumb { display:flex; padding:24px clamp(24px,7vw,108px); align-items:center; gap:10px; border-bottom:1px solid var(--line-dark); color:#918b84; font-size:10px; letter-spacing:1.8px; text-transform:uppercase; }
.project-breadcrumb a { color:var(--copper-light); }
.project-breadcrumb a:hover { color:var(--ivory); }
.project-gallery-section { padding:clamp(70px,8vw,110px) clamp(24px,6vw,92px); }
.project-gallery-heading { position:relative; width:min(calc(100% - 48px),1120px); margin:0 auto 34px; }
.project-gallery-heading h2 { margin:0; color:var(--ivory); font-size:clamp(38px,4vw,54px); line-height:1; }
.project-gallery-heading > span { position:absolute; right:0; bottom:4px; color:#817a73; font-size:9px; letter-spacing:1.7px; text-transform:uppercase; }
.project-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; width:min(calc(100% - 48px),1120px); margin:0 auto; background:#050505; }
.project-photo-card { aspect-ratio:4 / 3; min-width:0; margin:0; overflow:hidden; background:#050505; }
.project-photo-card.is-deferred { background:linear-gradient(110deg,#090909 20%,#15120f 38%,#090909 56%); background-size:220% 100%; animation:galleryPlaceholder 1.4s linear infinite; }
.project-photo-card button { display:block; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:transparent; cursor:none; line-height:0; }
.project-photo-card img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; transform:translate3d(var(--photo-x,0),var(--photo-y,0),0) scale(1.06); transition:transform .55s cubic-bezier(.22,.65,.25,1),filter .35s ease; will-change:transform; }
.project-photo-card button:hover img { transform:translate3d(var(--photo-x,0),var(--photo-y,0),0) scale(1.045); filter:brightness(.76); }
@keyframes galleryPlaceholder { to { background-position:-220% 0; } }
.portfolio-cursor { position:fixed; z-index:1100; top:0; left:0; display:grid; width:26px; height:26px; place-items:center; border:1px solid rgba(184,137,106,.92); border-radius:50%; background:rgba(8,8,8,.32); pointer-events:none; opacity:0; transform:translate3d(-100px,-100px,0) translate(-50%,-50%); transition:width .2s ease,height .2s ease,opacity .16s ease,border-color .16s ease,background .16s ease; backdrop-filter:blur(3px); box-shadow:0 0 0 1px rgba(0,0,0,.14); }
.portfolio-cursor > span { display:block; width:4px; height:4px; border-radius:50%; background:var(--copper-light); box-shadow:0 0 0 2px rgba(184,137,106,.11); transition:transform .2s ease,box-shadow .2s ease; }
.portfolio-cursor.is-visible { opacity:.96; border-color:var(--copper-light); background:rgba(8,8,8,.52); }
.portfolio-cursor.is-visible > span { transform:scale(1.12); box-shadow:0 0 0 5px rgba(184,137,106,.12); }
.portfolio-cursor.is-interactive { width:34px; height:34px; border-color:var(--ivory); background:rgba(184,137,106,.22); }
.portfolio-cursor.is-interactive > span { transform:scale(1.25); box-shadow:0 0 0 5px rgba(184,137,106,.1); }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  html.custom-cursor-active body,
  html.custom-cursor-active a,
  html.custom-cursor-active button,
  html.custom-cursor-active summary { cursor:none !important; }
  html.custom-cursor-active input,
  html.custom-cursor-active textarea { cursor:text !important; }
  html.custom-cursor-active select,
  html.custom-cursor-active option { cursor:default !important; }
}
.gallery-row { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--black); }
.gallery-row { align-items:start; }
.gallery-row img { width:100%; height:auto; object-fit:contain; }
.portfolio-gallery img:nth-child(3n) { grid-column:1 / -1; width:100%; }
.gallery-roll { width:min(calc(100% - 48px),1200px); padding:24px 0; margin:0 auto; background:var(--black); outline:none; }
.gallery-stage-shell { position:relative; padding:0 68px; }
.gallery-stage { position:relative; display:flex; min-height:clamp(300px,36vw,440px); align-items:center; justify-content:center; overflow:hidden; background:#070707; }
.gallery-stage > img { width:100%; height:clamp(300px,36vw,440px); object-fit:contain; opacity:1; cursor:zoom-in; transition:opacity .3s ease; }
.gallery-stage > img.is-changing { opacity:.22; }
.gallery-arrow { position:absolute; z-index:2; top:50%; display:grid; width:58px; height:58px; padding:0; place-items:center; transform:translateY(-50%); border:1px solid rgba(244,241,234,.45); border-radius:50%; background:rgba(10,10,10,.62); color:var(--ivory); font-size:24px; cursor:pointer; backdrop-filter:blur(8px); transition:background .2s ease,border-color .2s ease; }
.gallery-arrow:hover,.gallery-arrow:focus-visible { border-color:var(--copper-light); background:var(--copper); }
.gallery-previous { left:4px; }
.gallery-next { right:4px; }
.gallery-status { position:absolute; right:24px; bottom:22px; display:flex; min-width:92px; padding:9px 13px; align-items:center; justify-content:center; gap:10px; background:rgba(10,10,10,.72); color:var(--ivory); font-size:12px; letter-spacing:1.4px; }
.gallery-status i { display:block; width:22px; height:1px; background:var(--copper-light); }
.gallery-caption { display:flex; margin:0 68px; padding-top:18px; align-items:center; justify-content:space-between; gap:20px; color:var(--limestone); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.gallery-caption p { margin:0; color:var(--ivory); }
.gallery-caption span { color:#8f8982; }
.gallery-thumbnails { display:flex; margin:12px 68px 0; padding:0 0 8px; gap:9px; overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--copper) #171717; }
.gallery-thumbnail { width:104px; height:68px; padding:0; flex:0 0 104px; overflow:hidden; border:2px solid transparent; background:#171717; cursor:pointer; opacity:.62; transition:opacity .2s ease,border-color .2s ease; }
.gallery-thumbnail:hover,.gallery-thumbnail:focus-visible,.gallery-thumbnail.is-active { border-color:var(--copper-light); opacity:1; }
.gallery-thumbnail img { width:100%; height:100%; object-fit:cover; }

.approach-list { border-top:1px solid var(--line-light); }
.approach-step { display:grid; padding:48px 0; grid-template-columns:56px 170px minmax(0,720px); column-gap:20px; border-bottom:1px solid var(--line-light); }
.approach-step > span { color:var(--copper); font-family:var(--serif); font-size:24px; }
.approach-step h2 { margin:0; font-size:40px; }
.approach-step p { margin:4px 0 0; max-width:620px; color:var(--muted); }
.process-note { display:grid; margin-top:80px; padding:56px; grid-template-columns:.8fr 1.2fr; gap:60px; background:var(--charcoal); color:var(--ivory); }
.process-note h2 { margin:0; font-size:42px; }
.process-note p { margin:0; color:#c9c3bb; }
.copper-note { margin-top:2px; background:var(--copper); }
.copper-note p { color:var(--ivory); }
.process-support { padding-top:2px; }
.lifecycle-bridge { display:grid; margin:90px calc(-1 * clamp(24px, 7vw, 108px)) calc(-1 * clamp(82px, 10vw, 150px)); padding:76px clamp(24px, 7vw, 108px); grid-template-columns:1fr auto; gap:28px 60px; background:var(--paper); align-items:end; }
.lifecycle-bridge .eyebrow { grid-column:1/-1; margin-bottom:0; }
.lifecycle-bridge h2 { margin:0; max-width:900px; font-size:clamp(36px,4vw,50px); line-height:1.12; }
.lifecycle-bridge .text-link { white-space:nowrap; }

.finance-process { padding:clamp(82px,10vw,145px) clamp(24px,7vw,108px); background:var(--black); color:var(--ivory); scroll-margin-top:30px; }
.finance-heading { display:grid; margin-bottom:72px; grid-template-columns:1.15fr .85fr; gap:clamp(40px,8vw,120px); align-items:end; }
.finance-heading h2 { max-width:720px; margin:0; font-size:clamp(44px,5vw,64px); line-height:.98; letter-spacing:-1.5px; }
.finance-heading > p { max-width:570px; margin:0 0 6px; color:#bdb6ad; font-family:var(--serif); font-size:18px; line-height:1.55; }
.finance-phases { position:relative; display:grid; padding-top:30px; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; gap:18px; align-items:stretch; perspective:1400px; }
.finance-phases::before { position:absolute; z-index:3; top:-4px; left:0; width:9px; height:9px; border:1px solid var(--copper-light); background:var(--black); box-shadow:0 0 0 5px rgba(184,137,106,.08),0 0 24px rgba(184,137,106,.42); content:""; opacity:0; transform:translateX(-50%) rotate(45deg); }
.finance-phases::after { position:absolute; top:0; right:0; left:0; height:1px; background:linear-gradient(90deg,transparent 2%,var(--copper) 18%,var(--copper-light) 50%,var(--copper) 82%,transparent 98%); content:""; transform-origin:left; transition:transform 3.2s cubic-bezier(.22,.65,.25,1); }
.finance-phases.motion-pending::after { transform:scaleX(0); }
.finance-phases.motion-pending.is-active::after { transform:scaleX(1); }
.finance-phases.motion-pending.is-active::before { animation:journeyTrace 3.4s cubic-bezier(.4,0,.2,1) .12s both; }
.finance-phase { --glow-x:50%; --glow-y:36%; --tilt-x:0deg; --tilt-y:0deg; position:relative; display:flex; width:100%; height:100%; min-height:620px; overflow:hidden; flex-direction:column; border:1px solid var(--line-dark); background:#101010; transform-style:preserve-3d; will-change:transform; transition:transform .52s cubic-bezier(.22,.65,.25,1),border-color .38s ease,box-shadow .48s ease,background-color .38s ease,filter .7s ease,opacity .7s ease; }
.finance-phase::before { position:absolute; z-index:2; top:0; right:0; left:0; height:2px; background:linear-gradient(90deg,transparent,var(--copper-light),transparent); content:""; transform:scaleX(0); transform-origin:center; transition:transform .48s ease; }
.finance-phase::after { position:absolute; z-index:0; inset:0; background:radial-gradient(circle at var(--glow-x) var(--glow-y),rgba(184,137,106,.17),rgba(184,137,106,.045) 22%,transparent 48%); content:""; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.phase-sweep { position:absolute; z-index:1; inset:-30%; background:linear-gradient(105deg,transparent 40%,rgba(184,137,106,.02) 46%,rgba(215,192,172,.13) 50%,rgba(184,137,106,.02) 54%,transparent 60%); opacity:0; pointer-events:none; transform:translateX(-72%); }
.phase-ghost { position:absolute; z-index:0; right:14px; bottom:-28px; color:rgba(184,137,106,.045); font-family:var(--serif); font-size:clamp(120px,12vw,178px); font-style:italic; line-height:1; opacity:0; pointer-events:none; transform:translateY(24px) scale(.8); transform-origin:right bottom; }
.finance-phase.featured { margin:0; background:#171411; border-color:var(--copper); }
.finance-phase:nth-child(1) { --phase-delay:180ms; }
.finance-phase:nth-child(2) { --phase-delay:820ms; }
.finance-phase:nth-child(3) { --phase-delay:1460ms; }
.finance-phases.motion-pending .finance-phase { opacity:0; clip-path:inset(0 0 18% 0); filter:blur(3px); transform:translateY(54px) rotateX(7deg) scale(.985); transform-origin:center bottom; transition:opacity .9s ease var(--phase-delay),clip-path 1.2s cubic-bezier(.22,.65,.25,1) var(--phase-delay),transform 1.25s cubic-bezier(.16,.8,.24,1) var(--phase-delay),filter 1.1s ease var(--phase-delay),border-color .38s ease,box-shadow .48s ease,background-color .38s ease; }
.finance-phases.motion-pending.is-active .finance-phase { opacity:1; clip-path:inset(0); filter:none; transform:translateY(0) rotateX(0) scale(1); }
.finance-phases.motion-pending.is-active .finance-phase { animation:phaseIgnite 2.2s ease calc(var(--phase-delay) + 120ms) both; }
.finance-phases.motion-pending.is-active .phase-sweep { animation:phaseSweep 1.9s cubic-bezier(.22,.65,.25,1) calc(var(--phase-delay) + 220ms) both; }
.finance-phases.motion-pending.is-active .phase-ghost { animation:ghostRise 1.45s cubic-bezier(.22,.65,.25,1) calc(var(--phase-delay) + 440ms) forwards; }
.finance-phase header { position:relative; z-index:2; display:grid; min-height:190px; padding:34px 28px 28px; grid-template-columns:62px 1fr; gap:18px; border-bottom:1px solid var(--line-dark); align-items:start; }
.finance-phase header > span { color:var(--copper-light); font-family:var(--serif); font-size:56px; font-style:italic; line-height:.8; }
.finance-phase header p { margin:0 0 12px; color:var(--copper-light); font-size:11px; letter-spacing:2px; text-transform:uppercase; }
.finance-phase header h3 { margin:0; color:var(--ivory); font-size:31px; line-height:1.05; }
.finance-phase .milestone-list { position:relative; z-index:2; margin:0; padding:10px 30px 28px; list-style:none; }
.finance-phase li { display:grid; padding:28px 0; grid-template-columns:18px 1fr; gap:18px; border-bottom:1px solid #2e2925; }
.finance-phase li:last-child { border-bottom:0; }
.milestone-frame { width:12px; height:12px; margin-top:6px; border:1px solid var(--copper-light); transition:background-color .3s ease,box-shadow .3s ease,transform .3s ease; }
.finance-phase li:nth-child(1) { --milestone-delay:560ms; }
.finance-phase li:nth-child(2) { --milestone-delay:860ms; }
.finance-phase li:nth-child(3) { --milestone-delay:1160ms; }
.finance-phases.motion-pending .milestone-frame { opacity:.32; }
.finance-phases.motion-pending.is-active .milestone-frame { animation:milestoneWake .7s ease calc(var(--phase-delay) + var(--milestone-delay)) forwards; }
.finance-phases.motion-pending .finance-phase header > *,.finance-phases.motion-pending .finance-phase li > div { opacity:0; transform:translateY(16px); }
.finance-phases.motion-pending.is-active .finance-phase header > * { animation:phaseContentRise .9s cubic-bezier(.22,.65,.25,1) calc(var(--phase-delay) + 320ms) forwards; }
.finance-phases.motion-pending.is-active .finance-phase li > div { animation:phaseContentRise .82s cubic-bezier(.22,.65,.25,1) calc(var(--phase-delay) + var(--milestone-delay)) forwards; }
.finance-phase h4 { margin:0 0 8px; color:var(--ivory); font-family:var(--serif); font-size:22px; font-weight:400; line-height:1.12; }
.finance-phase li p { margin:0; color:#aaa39b; font-size:15px; line-height:1.55; }
.standards-throughline { position:relative; margin-top:84px; padding:84px 0 88px; border-top:1px solid var(--line-dark); }
.standards-throughline::before { position:absolute; top:-36px; left:50%; width:1px; height:72px; background:var(--copper); content:""; }
.standards-heading { max-width:940px; margin:0 auto; text-align:center; }
.standards-heading h3 { max-width:760px; margin:0 auto 24px; font-size:clamp(38px,4vw,52px); line-height:1.05; }
.standards-heading > p:last-child { max-width:680px; margin:0 auto; color:#aaa39b; font-size:17px; line-height:1.65; }
.standards-grid { display:grid; max-width:1080px; margin:64px auto 0; grid-template-columns:1fr 88px 1fr; align-items:center; }
.standards-grid article { min-height:220px; padding:18px clamp(20px,3vw,42px); }
.standards-grid article:first-child { text-align:right; }
.standards-grid .eyebrow { color:var(--copper-light); }
.standards-grid h4 { margin:0 0 18px; color:var(--ivory); font-family:var(--serif); font-size:30px; font-weight:400; line-height:1.08; }
.standards-grid article > p:last-child { margin:0; color:#aaa39b; font-size:16px; line-height:1.65; }
.standards-mark { position:relative; width:28px; height:28px; justify-self:center; border:1px solid var(--copper-light); }
.standards-mark::before,.standards-mark::after { position:absolute; top:50%; width:30px; height:1px; background:var(--line-dark); content:""; }
.standards-mark::before { right:100%; }
.standards-mark::after { left:100%; }
.finance-finish { display:flex; min-height:145px; padding:30px 42px; align-items:center; justify-content:center; gap:24px; background:var(--copper); color:var(--ivory); text-align:left; }
.finance-finish .finance-brand-mark { width:62px; height:62px; flex:0 0 62px; }
.finance-finish .eyebrow { margin-bottom:5px; color:#e5d9cf; }
.finance-finish h3 { margin:0; font-size:34px; line-height:1.05; }
.finance-disclaimer { max-width:960px; margin:24px auto 0; color:#817a73; font-size:12px; line-height:1.6; text-align:center; }

@media (hover:hover) {
  .finance-phase:hover,.finance-phases.is-active .finance-phase:hover { z-index:1; border-color:var(--copper-light); background-color:#16130f; box-shadow:0 32px 70px rgba(0,0,0,.5),0 0 0 1px rgba(184,137,106,.08); transform:translateY(-9px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
  .finance-phase:hover::before { transform:scaleX(1); }
  .finance-phase:hover::after { opacity:1; }
  .finance-phase:hover .milestone-frame { background:var(--copper); box-shadow:0 0 0 4px rgba(184,137,106,.08); transform:scale(1.08); }
  .finance-phase:hover li:nth-child(2) .milestone-frame { transition-delay:.05s; }
  .finance-phase:hover li:nth-child(3) .milestone-frame { transition-delay:.1s; }
}

@keyframes milestoneWake {
  0% { opacity:.32; background:transparent; box-shadow:none; }
  55% { opacity:1; background:var(--copper-light); box-shadow:0 0 0 5px rgba(184,137,106,.12); }
  100% { opacity:1; background:rgba(184,137,106,.24); box-shadow:none; }
}
@keyframes journeyTrace {
  0% { left:0; opacity:0; }
  12% { opacity:1; }
  82% { opacity:1; }
  100% { left:100%; opacity:0; }
}
@keyframes phaseContentRise {
  to { opacity:1; transform:translateY(0); }
}
@keyframes phaseSweep {
  0% { opacity:0; transform:translateX(-72%); }
  18% { opacity:1; }
  78% { opacity:.85; }
  100% { opacity:0; transform:translateX(72%); }
}
@keyframes ghostRise {
  0% { opacity:0; transform:translateY(24px) scale(.8); }
  58% { opacity:1; }
  100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes phaseIgnite {
  0%,100% { box-shadow:none; }
  48% { box-shadow:0 26px 70px rgba(0,0,0,.48),0 0 42px rgba(184,137,106,.11); }
}

.studio-hero { display:grid; grid-template-columns:1.08fr .92fr; min-height:610px; }
.studio-portrait { min-height:610px; background-image:url("assets/shady-lane-exterior.jpg"); background-position:center center; background-size:cover; position:relative; }
.studio-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.02) 45%,rgba(10,10,10,.34) 100%); pointer-events:none; }
.studio-copy { display:flex; padding:72px clamp(38px,5.25vw,80px); flex-direction:column; justify-content:center; }
.studio-copy h1 { max-width:560px; margin-bottom:26px; font-size:clamp(44px,4vw,58px); line-height:1; letter-spacing:-1.25px; }
.studio-copy > p:not(.eyebrow) { color:#c9c3bb; font-family:var(--serif); font-size:18px; line-height:1.65; }
.values-breakpoint { display:grid; padding:clamp(36px,4vw,50px) clamp(28px,7vw,108px); grid-template-columns:minmax(150px,.38fr) minmax(0,1.62fr); gap:clamp(32px,5vw,76px); align-items:start; background:linear-gradient(115deg,#5e4939 0%,var(--copper) 58%,#715846 100%); color:var(--ivory); }
.values-breakpoint .eyebrow { margin-top:7px; color:#e4d8ce; }
.values-breakpoint h2 { margin:0; font-size:clamp(34px,3vw,42px); line-height:1.04; letter-spacing:-.65px; }
.values-breakpoint h2 span { display:block; }
.values-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); }
.value { min-height:218px; padding:36px 38px 38px; background:var(--ivory); }
.value span { color:var(--copper); font-family:var(--serif); font-size:18px; }
.value h2 { margin:14px 0 10px; font-size:30px; line-height:1.1; }
.value p { color:var(--muted); font-size:16px; line-height:1.65; }

.about-concept-nav { display:flex; min-height:72px; padding:0 clamp(24px,7vw,108px); align-items:center; justify-content:space-between; gap:28px; background:#141414; border-bottom:1px solid var(--line-dark); }
.about-concept-nav > span { color:#928b83; font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.about-concept-nav > div { display:flex; height:72px; align-items:stretch; }
.about-concept-nav a { display:flex; min-width:132px; padding:0 22px; align-items:center; justify-content:center; gap:9px; border-left:1px solid #302a26; color:#aaa39b; font-size:12px; letter-spacing:1.35px; text-transform:uppercase; transition:background .25s ease,color .25s ease; }
.about-concept-nav a:last-child { border-right:1px solid #302a26; }
.about-concept-nav a b { color:var(--copper-light); font-family:var(--serif); font-size:17px; font-weight:400; letter-spacing:0; }
.about-concept-nav a:hover,.about-concept-nav a[aria-current="page"] { background:var(--copper); color:var(--ivory); }
.about-concept-nav a[aria-current="page"] b { color:var(--ivory); }
.about-scenario-nav { display:flex; min-height:64px; padding:0 clamp(24px,7vw,108px); align-items:center; justify-content:space-between; gap:28px; background:var(--ivory); color:var(--ink); border-bottom:1px solid var(--line-light); }
.about-scenario-nav > span { color:var(--muted); font-size:11px; letter-spacing:1.8px; text-transform:uppercase; }
.about-scenario-nav > div { display:flex; height:64px; align-items:stretch; }
.about-scenario-nav a { display:flex; min-width:148px; padding:0 20px; align-items:center; justify-content:center; gap:9px; border-left:1px solid var(--line-light); color:var(--muted); font-size:11px; letter-spacing:1.25px; text-transform:uppercase; }
.about-scenario-nav a:last-child { border-right:1px solid var(--line-light); }
.about-scenario-nav a b { color:var(--copper); font-family:var(--serif); font-size:18px; font-weight:400; }
.about-scenario-nav a:hover,.about-scenario-nav a[aria-current="page"] { background:var(--paper); color:var(--ink); }

.about-editorial-hero { display:grid; min-height:610px; grid-template-columns:minmax(320px,.76fr) minmax(0,1.24fr); }
.about-mark-panel { position:relative; display:flex; padding:70px clamp(36px,5vw,76px); flex-direction:column; align-items:flex-start; justify-content:space-between; overflow:hidden; background:#101010; border-right:1px solid var(--line-dark); }
.about-mark-panel::after { position:absolute; right:-28%; bottom:-48%; width:520px; height:520px; border:1px solid rgba(184,137,106,.08); content:""; transform:rotate(45deg); }
.about-mark-panel > p { position:relative; z-index:1; margin:0; color:#948c84; font-size:11px; letter-spacing:2.3px; text-transform:uppercase; }
.about-large-mark,.about-small-mark { display:block; object-fit:contain; }
.about-large-mark { position:relative; z-index:1; width:150px; height:150px; }
.about-large-mark span { font-family:var(--serif); font-size:61px; line-height:.9; letter-spacing:-3px; }
.about-large-mark small,.about-small-mark small { width:72px; margin-top:13px; padding-top:7px; border-top:1px solid var(--copper); color:var(--limestone); font-size:10px; line-height:1; letter-spacing:3.6px; text-align:center; text-transform:uppercase; }
.about-concept-copy { display:flex; padding:74px clamp(46px,7vw,108px); flex-direction:column; justify-content:center; background:var(--black); }
.about-concept-copy h1,.about-centered-hero h1,.about-detail-copy h1 { margin:0; font-size:clamp(48px,4.8vw,68px); line-height:.97; letter-spacing:-1.6px; }
.about-story { display:grid; max-width:860px; margin-top:48px; padding-top:32px; grid-template-columns:1.25fr .75fr; gap:clamp(36px,5vw,70px); border-top:1px solid var(--line-dark); }
.about-story p,.about-centered-story p,.about-detail-copy > p:not(.eyebrow) { margin:0; color:#c9c3bb; font-family:var(--serif); font-size:18px; line-height:1.62; }

.about-centered-hero { display:flex; min-height:650px; padding:70px 24px 78px; flex-direction:column; align-items:center; justify-content:center; background:var(--black); text-align:center; }
.about-small-mark { width:82px; height:82px; margin-bottom:34px; }
.about-small-mark span { font-family:var(--serif); font-size:33px; line-height:.86; letter-spacing:-1.5px; }
.about-small-mark small { width:44px; margin-top:7px; padding-top:4px; font-size:6px; letter-spacing:2.3px; }
.about-centered-hero .eyebrow { margin-bottom:18px; }
.about-centered-hero h1 { max-width:800px; }
.about-centered-story { display:grid; max-width:900px; margin-top:44px; padding-top:30px; grid-template-columns:1.2fr .8fr; gap:52px; border-top:1px solid var(--line-dark); text-align:left; }

.about-detail-hero { display:grid; min-height:610px; grid-template-columns:1.15fr .85fr; background:var(--black); }
.about-detail-copy { display:flex; padding:72px clamp(42px,6vw,92px); flex-direction:column; justify-content:center; }
.about-detail-copy h1 { max-width:700px; margin-bottom:38px; }
.about-detail-copy > p:not(.eyebrow) { max-width:690px; margin-bottom:17px; }
.about-principles { position:relative; display:flex; min-height:610px; padding:66px clamp(34px,4.6vw,70px); flex-direction:column; justify-content:center; overflow:hidden; background:linear-gradient(145deg,#171411,#0e0d0c); border-left:1px solid var(--line-dark); }
.about-panel-monogram { position:absolute; top:-48px; right:-22px; color:rgba(184,137,106,.055); font-family:var(--serif); font-size:220px; line-height:1; letter-spacing:-13px; }
.about-principles > .eyebrow,.about-principles > h2,.about-principle-list { position:relative; z-index:1; }
.about-principles > h2 { max-width:420px; margin:0 0 28px; font-size:clamp(34px,3.25vw,46px); line-height:1.02; letter-spacing:-.8px; }
.about-principle-list { border-top:1px solid var(--line-dark); }
.about-principle-list article { display:grid; min-height:108px; padding:20px 0; grid-template-columns:52px 1fr; gap:22px; align-items:center; border-bottom:1px solid var(--line-dark); }
.about-principle-list article > span { display:flex; width:46px; height:46px; align-items:center; justify-content:center; border:1px solid var(--copper); color:var(--copper-light); font-family:var(--serif); font-size:17px; }
.about-principle-list h3 { margin:0 0 3px; font-size:25px; line-height:1.08; }
.about-principle-list p { margin:0; color:#aaa29a; font-size:14px; line-height:1.5; }
.about-brand-anchor { position:relative; display:flex; min-height:610px; padding:60px 36px; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; background:linear-gradient(145deg,#161310,#0d0c0b); border-left:1px solid var(--line-dark); text-align:center; }
.anchor-guide { position:absolute; display:block; background:linear-gradient(90deg,transparent,rgba(184,137,106,.18),transparent); }
.anchor-guide-h { top:50%; right:8%; left:8%; height:1px; }
.anchor-guide-v { top:8%; bottom:8%; left:50%; width:1px; background:linear-gradient(180deg,transparent,rgba(184,137,106,.18),transparent); }
.about-anchor-mark { position:relative; z-index:1; display:block; width:166px; height:166px; object-fit:contain; background-color:#11100f; box-shadow:0 0 0 16px rgba(184,137,106,.035); }
.about-anchor-mark span { font-family:var(--serif); font-size:67px; line-height:.88; letter-spacing:-3px; }
.about-anchor-mark small { width:80px; margin-top:14px; padding-top:8px; border-top:1px solid var(--copper); color:var(--limestone); font-size:10px; line-height:1; letter-spacing:4px; text-transform:uppercase; }
.about-brand-anchor > p { position:relative; z-index:1; margin:42px 0 0; color:#c9c3bb; font-family:var(--serif); font-size:28px; line-height:1.16; }
.about-brand-promise { position:relative; display:flex; min-height:610px; padding:72px clamp(38px,5vw,76px); flex-direction:column; justify-content:center; overflow:hidden; background:linear-gradient(145deg,#1b1612,#0d0c0b); border-left:1px solid var(--line-dark); }
.about-promise-corner { position:absolute; top:36px; right:36px; width:92px; height:92px; border-top:1px solid var(--copper); border-right:1px solid var(--copper); }
.about-brand-promise h2 { position:relative; max-width:560px; margin:0; font-size:clamp(38px,3.7vw,54px); line-height:1.03; letter-spacing:-1px; }
.about-promise-signature { display:flex; margin-top:52px; padding-top:26px; align-items:center; gap:18px; border-top:1px solid var(--line-dark); }
.about-promise-signature > span { display:flex; width:52px; height:52px; align-items:center; justify-content:center; border:1px solid var(--copper); font-family:var(--serif); font-size:23px; }
.about-promise-signature p { margin:0; color:#a9a199; font-size:11px; letter-spacing:2px; text-transform:uppercase; }

.leadership-intro { padding:110px clamp(24px,7vw,108px); background:var(--black); }
.leadership-intro h1 { margin-bottom:32px; font-size:var(--type-display); line-height:.98; letter-spacing:-1.5px; }
.leadership-intro > p:not(.eyebrow) { max-width:730px; color:#c9c3bb; font-family:var(--serif); font-size:var(--type-lead); line-height:1.55; }
.leadership-profile { display:grid; padding:clamp(76px,9vw,130px) clamp(24px,8vw,120px); grid-template-columns:.85fr 1.15fr; gap:clamp(50px,8vw,120px); align-items:center; }
.leadership-portrait { min-height:620px; background-image:url("assets/bakari-brooks-architectural-concept.png"); background-position:center 18%; background-size:cover; position:relative; }
.leadership-portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(184,137,106,.04),rgba(10,10,10,.18)); pointer-events:none; }
.leadership-profile h2 { margin-bottom:26px; font-size:var(--type-section); line-height:1.02; letter-spacing:-1px; }
.leadership-profile p:not(.eyebrow) { max-width:620px; color:var(--muted); font-family:var(--serif); font-size:var(--type-lead); line-height:1.55; }

.faq-list { max-width:1050px; margin:0 auto; padding-top:20px; }
.faq-list details { border-top:1px solid var(--line-light); }
.faq-list details:last-child { border-bottom:1px solid var(--line-light); }
.faq-list summary { display:flex; min-height:88px; padding:22px 54px 22px 0; align-items:center; position:relative; cursor:pointer; list-style:none; font-family:var(--serif); font-size:26px; line-height:1.2; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:"+"; position:absolute; right:4px; color:var(--copper); font-family:var(--sans); font-size:24px; font-weight:300; }
.faq-list details[open] summary::after { content:"−"; }
.faq-list details p { max-width:760px; padding:0 0 32px; color:var(--muted); }
.faq-list .inline-link { color:var(--ink); border-bottom:1px solid var(--copper); }
.faq-inquiry-link { margin:0 0 36px; }

.project-next h2 { margin-bottom:42px; font-size:var(--type-section); line-height:1.02; letter-spacing:-1px; }
.compact-projects { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.compact-projects .project-card { padding:0 !important; }
.compact-projects .project-image img { height:300px; }
.compact-projects .project-card h3 { font-size:25px; }

.inquiry-layout { display:grid; grid-template-columns:.8fr 1.2fr; min-height:760px; }
.inquiry-intro { display:flex; padding:90px clamp(34px,6vw,84px); flex-direction:column; justify-content:center; background:var(--black); }
.inquiry-intro p:not(.eyebrow) { max-width:520px; color:#c9c3bb; font-family:var(--serif); font-size:var(--type-lead); line-height:1.55; }
.inquiry-form-wrap { padding:80px clamp(32px,7vw,100px); background:var(--ivory); color:var(--ink); }
.inquiry-form-wrap h2 { margin-bottom:36px; font-size:40px; line-height:1.05; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:26px 28px; }
.field { display:flex; flex-direction:column; gap:8px; }
.field.full { grid-column:1/-1; }
.field label { color:var(--muted); font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
.field input,.field select,.field textarea { width:100%; min-height:50px; padding:10px 0; border:0; border-bottom:1px solid #b9b1a7; border-radius:0; outline:none; background:transparent; color:var(--ink); }
.field textarea { min-height:100px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus { border-bottom-color:var(--copper); }
.submit-button { min-height:52px; margin-top:34px; padding:14px 24px; border:1px solid var(--copper); background:var(--copper); color:var(--ivory); cursor:pointer; font-size:12px; letter-spacing:1.8px; text-transform:uppercase; }
.form-note { margin-top:18px; color:var(--muted); font-size:13px; }
.form-success { margin-top:28px; padding:22px; border-left:3px solid var(--copper); background:#e0dbd2; }

.site-footer { display:grid; padding:62px clamp(24px,6vw,92px) 34px; grid-template-columns:1.1fr .8fr .7fr; gap:50px; background:#111; border-top:1px solid var(--line-dark); }
.footer-brand { display:flex; align-items:center; gap:18px; }
.brand-mark-small { width:52px; height:52px; flex-basis:52px; }
.footer-brand strong { display:block; font-family:var(--serif); font-size:20px; font-weight:400; }
.footer-brand div > span { display:block; color:var(--limestone); font-size:13px; }
.footer-contact { display:flex; flex-direction:column; align-items:flex-end; color:#c9c3bb; font-size:14px; }
.footer-navigation { display:flex; flex-direction:column; gap:8px; color:#c9c3bb; font-size:13px; }
.footer-navigation a:hover { color:var(--copper-light); }
.footer-legal { display:flex; grid-column:1/-1; padding-top:28px; border-top:1px solid #2d2925; color:#817b74; font-size:12px; justify-content:space-between; gap:30px; }

.brand-intro { position:fixed; z-index:100; inset:0; display:grid; place-items:center; background:var(--black); pointer-events:none; opacity:1; visibility:visible; transition:opacity .45s ease,visibility .45s ease; }
.brand-intro.is-complete { opacity:0; visibility:hidden; }
.brand-intro-frame { position:relative; display:flex; width:116px; height:116px; flex-direction:column; align-items:center; justify-content:center; }
.brand-guide { position:absolute; z-index:-1; display:block; opacity:0; }
.brand-guide.guide-h { top:50%; left:50%; width:270px; height:1px; background:linear-gradient(90deg,transparent,rgba(184,137,106,.52),transparent); transform:translate(-50%,-50%) scaleX(1.35); }
.brand-guide.guide-v { top:50%; left:50%; width:1px; height:270px; background:linear-gradient(180deg,transparent,rgba(184,137,106,.52),transparent); transform:translate(-50%,-50%) scaleY(1.35); }
.brand-intro.is-playing .guide-h { animation:alignGuideX .72s cubic-bezier(.22,.65,.25,1) .02s both; }
.brand-intro.is-playing .guide-v { animation:alignGuideY .72s cubic-bezier(.22,.65,.25,1) .08s both; }
.brand-intro .edge { position:absolute; display:block; background:var(--copper-light); }
.brand-intro .edge-top,.brand-intro .edge-bottom { right:0; left:0; height:1px; transform:scaleX(0); }
.brand-intro .edge-left,.brand-intro .edge-right { top:0; bottom:0; width:1px; transform:scaleY(0); }
.brand-intro .edge-top { top:0; transform-origin:left; }
.brand-intro .edge-right { right:0; transform-origin:top; }
.brand-intro .edge-bottom { bottom:0; transform-origin:right; }
.brand-intro .edge-left { left:0; transform-origin:bottom; }
.brand-intro.is-playing .edge-top { animation:drawEdgeX .25s ease .28s forwards; }
.brand-intro.is-playing .edge-right { animation:drawEdgeY .25s ease .48s forwards; }
.brand-intro.is-playing .edge-bottom { animation:drawEdgeX .25s ease .68s forwards; }
.brand-intro.is-playing .edge-left { animation:drawEdgeY .25s ease .88s forwards; }
.brand-intro-logo { width:116px; height:116px; opacity:0; }
.brand-intro.is-playing .brand-intro-logo { animation:introType .38s ease .88s forwards,logoGlassSwipe .85s cubic-bezier(.3,.72,.2,1) 1.04s both; }
.brand-intro.is-playing .logo-trace-dot { animation:fastLogoTrace .4s cubic-bezier(.45,0,.3,1) .94s both; }
.motion-reveal { opacity:0; transform:translateY(22px); transition:opacity .72s ease var(--motion-delay,0ms),transform .82s cubic-bezier(.22,.65,.25,1) var(--motion-delay,0ms); }
.motion-reveal.is-visible { opacity:1; transform:none; }
.hero-image img,.residence-feature-image img { animation:imageSettle 1.8s cubic-bezier(.22,.65,.25,1) both; }
.fade-in { animation:fadeUp .55s ease both; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes drawEdgeX { to { transform:scaleX(1); } }
@keyframes drawEdgeY { to { transform:scaleY(1); } }
@keyframes introType { to { opacity:1; transform:translateY(0); } }
@keyframes alignGuideX {
  0% { opacity:0; transform:translate(-50%,-50%) scaleX(1.35); }
  32% { opacity:.7; }
  72% { opacity:.45; transform:translate(-50%,-50%) scaleX(.46); }
  100% { opacity:0; transform:translate(-50%,-50%) scaleX(.43); }
}
@keyframes alignGuideY {
  0% { opacity:0; transform:translate(-50%,-50%) scaleY(1.35); }
  32% { opacity:.7; }
  72% { opacity:.45; transform:translate(-50%,-50%) scaleY(.46); }
  100% { opacity:0; transform:translate(-50%,-50%) scaleY(.43); }
}
@keyframes imageSettle { from { transform:scale(1.035); } to { transform:scale(1); } }
@keyframes lightboxReveal { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }

@media (max-width: 900px) {
  .hero-image img { animation:none; }
  .site-header { min-height:88px; padding:14px 22px; }
  .brand-mark { width:54px; height:54px; flex-basis:54px; }
  .brand-name { display:none; }
  .menu-toggle { display:flex; min-height:44px; padding:8px 0; align-items:center; gap:12px; border:0; background:transparent; color:var(--ivory); cursor:pointer; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; }
  .menu-toggle i,.menu-toggle i::before { display:block; width:24px; height:1px; background:var(--copper-light); content:""; transition:transform .25s ease; }
  .menu-toggle i::before { transform:translateY(-7px); }
  .menu-toggle[aria-expanded="true"] i { transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] i::before { transform:rotate(-90deg); }
  .primary-nav { position:absolute; top:88px; right:0; left:0; display:none; padding:30px 24px 42px; flex-direction:column; align-items:stretch; gap:0; background:var(--black); border-top:1px solid var(--line-dark); }
  .primary-nav.open { display:flex; }
  .primary-nav > a,.nav-parent { width:100%; min-height:54px; padding:15px 0; border-bottom:1px solid #2d2925; text-align:left; justify-content:space-between; }
  .nav-group { display:block; }
  .nav-dropdown,.nav-dropdown-right { position:static; width:100%; padding:2px 0 12px 18px; background:#101010; border:0; box-shadow:none; }
  .nav-dropdown a { padding:11px 0; }
  .primary-nav .nav-inquiry { margin-top:18px; padding:15px 18px; text-align:center; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:600px; padding:76px 24px; }
  .hero-image { min-height:520px; border-top:1px solid var(--copper); border-left:0; }
  .hero h1 { font-size:clamp(50px,10vw,64px); }
  .proof-bar { padding:22px; grid-template-columns:1fr; gap:16px; }
  .proof-bar span + span { border-left:0; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .project-grid,.principal-section,.residence-feature,.studio-hero,.inquiry-layout,.leadership-profile,.about-editorial-hero,.about-detail-hero { grid-template-columns:1fr; }
  .portfolio-index-grid { grid-template-columns:1fr; gap:52px; }
  .project-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-grid.expanded { grid-template-columns:1fr; gap:48px; }
  .project-grid.expanded .project-card,.project-grid.expanded .project-card:nth-child(even),.project-grid.expanded .project-card:nth-child(3n),.project-grid.expanded .project-card:nth-child(4n) { grid-column:auto; padding-top:0; }
  .project-grid.expanded .project-image img,.project-grid.expanded .project-card:nth-child(even) .project-image img { height:420px; }
  .project-card.secondary { padding-top:0; }
  .project-image img,.project-card.secondary .project-image img { height:420px; }
  .principal-image { min-height:500px; }
  .residence-feature-image img { min-height:430px; height:430px; }
  .project-detail-page .residence-feature-image img { min-height:380px; height:380px; }
  .gallery-row { grid-template-columns:1fr; }
  .gallery-row img { height:auto; }
  .approach-step { grid-template-columns:55px 1fr; }
  .approach-step p { grid-column:2; }
  .process-note { grid-template-columns:1fr; gap:24px; padding:38px 26px; }
  .finance-heading { grid-template-columns:1fr; gap:28px; }
  .lifecycle-bridge { grid-template-columns:1fr; }
  .lifecycle-bridge .eyebrow { grid-column:auto; }
  .finance-phases { padding-top:0; grid-template-columns:1fr; gap:18px; }
  .finance-phases::after { display:none; }
  .finance-phase,.finance-phase.featured { height:auto; min-height:0; margin:0; }
  .finance-phase header { min-height:0; }
  .standards-throughline { margin-top:72px; padding:72px 0; }
  .standards-grid { grid-template-columns:1fr; gap:22px; }
  .standards-grid article,.standards-grid article:first-child { min-height:0; padding:18px 0; text-align:left; }
  .standards-mark { margin:2px 0; justify-self:start; }
  .standards-mark::before,.standards-mark::after { display:none; }
  .values-breakpoint { grid-template-columns:1fr; gap:12px; }
  .studio-portrait { min-height:500px; }
  .values-grid { grid-template-columns:1fr; }
  .about-concept-nav { padding:0 22px; align-items:flex-start; flex-direction:column; gap:8px; }
  .about-concept-nav > span { padding-top:18px; }
  .about-concept-nav > div { width:100%; height:58px; }
  .about-concept-nav a { min-width:0; padding:0 10px; flex:1; }
  .about-scenario-nav { padding:0 22px; align-items:flex-start; flex-direction:column; gap:8px; }
  .about-scenario-nav > span { padding-top:16px; }
  .about-scenario-nav > div { width:100%; height:56px; }
  .about-scenario-nav a { min-width:0; padding:0 8px; flex:1; }
  .about-mark-panel { min-height:290px; padding:42px 24px; border-right:0; border-bottom:1px solid var(--line-dark); }
  .about-large-mark { width:118px; height:118px; }
  .about-large-mark span { font-size:49px; }
  .about-concept-copy,.about-detail-copy { padding:64px 24px 68px; }
  .about-story,.about-centered-story { grid-template-columns:1fr; gap:20px; }
  .about-centered-hero { min-height:0; padding:64px 24px 70px; }
  .about-principles { min-height:0; padding:58px 24px 64px; border-top:1px solid var(--line-dark); border-left:0; }
  .about-brand-anchor,.about-brand-promise { min-height:500px; border-top:1px solid var(--line-dark); border-left:0; }
  .compact-projects { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
  .site-footer { grid-template-columns:1fr; }
  .footer-contact { align-items:flex-start; }
  .footer-legal { grid-column:auto; flex-direction:column; }
}

@media (max-width: 520px) {
  .hero-copy { min-height:540px; }
  .hero-image { min-height:390px; }
  .section-wrap,.page-intro { padding-left:22px; padding-right:22px; }
  .section-heading h2,.editorial-copy h2,.project-next h2,.leadership-profile h2 { font-size:40px; }
  .page-intro h1,.inquiry-intro h1,.studio-copy h1,.leadership-intro h1,.residence-feature-copy h1 { font-size:46px; }
  .project-detail-page .residence-feature-image img { min-height:310px; height:310px; }
  .project-gallery-heading > span { position:static; display:block; margin-top:13px; }
  .project-photo-grid { width:100%; grid-template-columns:1fr; }
  .project-photo-card button { cursor:zoom-in; }
  .project-image img,.project-card.secondary .project-image img { height:300px; }
  .gallery-row img { height:auto; }
  .gallery-roll { width:calc(100% - 28px); padding:14px 0; }
  .gallery-stage-shell { padding:0 50px; }
  .gallery-stage { min-height:280px; }
  .gallery-stage > img { height:280px; }
  .gallery-arrow { width:46px; height:46px; font-size:20px; }
  .gallery-previous { left:0; }
  .gallery-next { right:0; }
  .gallery-status { right:12px; bottom:12px; }
  .gallery-thumbnails { margin-right:50px; margin-left:50px; }
  .gallery-caption { margin-right:50px; margin-left:50px; align-items:flex-start; flex-direction:column; gap:4px; }
  .home-selector { width:100%; padding-top:0; }
  .home-selector-stage { height:auto; }
  .home-selector-arrow { width:46px; height:46px; font-size:20px; }
  .home-selector-previous { left:12px; }
  .home-selector-next { right:12px; }
  .home-selector-status { right:12px; bottom:12px; }
  .hybrid-projects { width:calc(100% - 28px); }
  .hybrid-project { grid-template-columns:1fr; gap:20px; padding-top:44px; }
  .hybrid-project-copy { padding-top:0; }
  .gallery-thumbnail { width:82px; height:56px; flex-basis:82px; }
  .home-detail-scroll { padding:0 46px; margin:0 -14px; }
  .home-detail-grid { gap:7px; }
  .home-detail-image img { height:145px; }
  .detail-scroll-arrow { width:42px; height:42px; font-size:18px; }
  .detail-scroll-previous { left:0; }
  .detail-scroll-next { right:0; }
  .detail-lightbox { padding:70px 16px 44px; }
  .detail-lightbox-arrow { top:auto; bottom:18px; width:44px; height:44px; }
  .detail-lightbox-previous { left:calc(50% - 58px); }
  .detail-lightbox-next { right:calc(50% - 58px); }
  .detail-lightbox-close { top:14px; right:14px; }
  .home-anchor,.home-anchor > img { min-height:300px; height:300px; }
  .home-anchor-copy { right:22px; bottom:68px; left:22px; }
  .home-anchor-copy h2 { font-size:54px; }
  .home-scroll-cue { right:auto; bottom:22px; left:22px; }
  .principal-image { min-height:390px; }
  .studio-portrait { min-height:420px; }
  .leadership-portrait { min-height:420px; }
  .approach-step { padding:34px 0; grid-template-columns:42px 1fr; gap:18px; }
  .approach-step h2 { font-size:36px; }
  .finance-process { padding-right:22px; padding-left:22px; }
  .finance-heading h2,.standards-heading h3 { font-size:42px; letter-spacing:-1px; }
  .finance-phase header { padding:32px 22px 26px; grid-template-columns:56px 1fr; }
  .finance-phase .milestone-list { padding:8px 22px 24px; }
  .finance-finish { padding:28px 22px; }
  .inquiry-intro,.inquiry-form-wrap,.residence-feature-copy { padding:64px 22px; }
  .studio-copy { padding:58px 22px 62px; }
  .values-breakpoint { padding-top:34px; padding-bottom:36px; }
  .value { min-height:0; padding:32px 22px 34px; }
  .about-concept-nav a { font-size:10px; letter-spacing:.8px; }
  .about-concept-nav a b { display:none; }
  .about-scenario-nav a { font-size:9px; letter-spacing:.55px; }
  .about-scenario-nav a b { display:none; }
  .about-concept-copy h1,.about-centered-hero h1,.about-detail-copy h1 { font-size:44px; }
  .about-story { margin-top:36px; padding-top:26px; }
  .about-principle-list article { min-height:98px; }
  .about-brand-anchor { min-height:430px; }
  .about-brand-promise { min-height:0; padding:64px 22px 68px; }
  .about-brand-promise h2 { font-size:40px; }
}