/* Editorial finish: limestone, forest ink and aged brass.
   Layout stays in main.css; this layer owns the visual treatment and motion. */
:root {
  --ink: #263128;
  --muted: #62665c;
  --paper: #f8f6f0;
  --sand: #eeebe1;
  --gold: #d0b17e;
  --line: #d9d9cd;
  --dark: #1c2822;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}
::selection { background: #d0b17e; color: #1c2822; }
body { -webkit-font-smoothing: antialiased; }
h2 { font-size: clamp(40px, 4.7vw, 70px); line-height: 1.08; }
em { color: #8c6e45; }
.section { padding-block: clamp(80px, 9vw, 140px); }
.eyebrow { display: flex; align-items: center; gap: 13px; color: #776342; }
.eyebrow::before { content: ''; width: 23px; height: 1px; background: currentColor; flex-shrink: 0; }
.hero .eyebrow::before { display: none; }
.section-heading { margin-bottom: 58px; }
.section-heading > p { padding-left: 24px; border-left: 1px solid #b6ae99; line-height: 1.85; }

/* A compact floating navigation separates from the page as the visitor scrolls. */
.header { position: fixed; top: 16px; left: 24px; width: calc(100% - 48px); padding: 18px 28px; border: 1px solid #ffffff30; border-radius: 14px; background: #18221918; transition: background .35s, box-shadow .35s, top .35s; }
.header.is-scrolled { top: 10px; background: #1c2822f5; box-shadow: 0 9px 35px #10201620; backdrop-filter: blur(18px); }
.wordmark { font-size: 23px; letter-spacing: .13em; }
.header nav a:not(.nav-cta) { position: relative; }
.header nav a:not(.nav-cta)::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease-out); }
.header nav a:hover::after,.header nav a[aria-current='location']::after { transform: scaleX(1); }
.nav-cta { border-radius: 7px; background: #ffffff0b; }
.button { border-radius: 8px; padding: 13px 17px 13px 23px; min-height: 58px; transition: background .25s, transform .3s var(--ease-out), box-shadow .3s; }
.button > span { display: inline-grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; border: 1px solid currentColor; font-size: 17px; transition: transform .3s var(--ease-out); }
.button:hover > span { transform: rotate(45deg); }
.button-gold:hover { box-shadow: 0 8px 25px #0a180f25; }
.text-link { gap: 45px; transition: gap .3s var(--ease-out), color .2s; }
.text-link:hover { gap: 57px; }
.hero { min-height: 790px; max-height: 1080px; border-radius: 0 0 44px 44px; overflow: hidden; }
.hero-content { padding-top: clamp(205px, 25vh, 285px); }
.hero h1 { font-size: clamp(58px, 7.1vw, 109px); max-width: 1100px; }
.hero-shade { background: linear-gradient(90deg,#102017a6,#16271a12 95%),linear-gradient(180deg,#0a191c50,transparent 45%,#1220179e); }
.hero-description { max-width: 490px; border-left: 1px solid #d4bc8f90; padding-left: 19px; }
.hero-bottom { bottom: 31px; }
.hero-bottom > span:not(.hero-index) { border: 1px solid #ffffff38; border-radius: 30px; padding: 8px 16px; background: #17251e30; }
.hero-index { font-family: var(--serif); font-style: italic; }
.services-strip { background: var(--paper); color: #59604f; border-bottom: 1px solid var(--line); padding-block: 31px; }
.services-strip i { color: #967344; }

/* Curves follow architectural openings, rather than rounding every surface. */
.about { align-items: center; gap: 9%; }
.about-visual { height: 670px; min-height: 0; overflow: hidden; border-radius: 180px 180px 10px 10px; box-shadow: 18px 20px 0 #eae5d8; }
.about-visual::after { content: ''; position: absolute; inset: 60% 0 0; background: linear-gradient(transparent,#101c14a8); pointer-events: none; }
.about-visual .concept-tag { top: auto; bottom: 95px; left: 27px; background: #203026ae; border: 1px solid #ffffff30; }
.about-visual .image-label { z-index: 1; }
.about-copy h2 { margin-bottom: 30px; }
.about-copy .lead { font-family: var(--serif); font-size: 26px; line-height: 1.45; }
.about-signature { padding-left: 20px; border-top: 0; border-left: 2px solid #b29970; padding-top: 0; }
.design-section { border-radius: 40px 40px 0 0; background: #ebe9dd; }
.design-image { border-radius: 12px 90px 12px 12px; overflow: hidden; }
.concept-tag { border-radius: 5px; }
.design-details article { padding-block: 31px; }
.design-details article > span { font-family: var(--serif); font-size: 24px; line-height: 1.3; }
.design-details h3 { font-size: 21px; }
.design-details p { line-height: 1.8; }
.inspiration .section-heading h2 { max-width: 720px; }
.gallery-toolbar { padding-bottom: 18px; }
.filters { gap: 5px; padding: 5px; background: #eae8de; border-radius: 50px; }
.filter { padding: 10px 22px; border: 0; border-radius: 30px; transition: background .25s, color .25s, box-shadow .25s; }
.filter.active { background: var(--dark); color: #fff9eb; box-shadow: 0 3px 9px #19281a18; }
.gallery-grid { gap: 40px 28px; }
.gallery-photo { border-radius: 12px; height: 360px; }
.gallery-card.gallery-wide .gallery-photo { border-radius: 12px 65px 12px 12px; }
.gallery-card:nth-child(4) .gallery-photo { border-radius: 65px 12px 12px 12px; }
.gallery-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 65%,#17201a35); pointer-events: none; }
.gallery-expand { z-index: 1; width: 44px; height: 44px; border-radius: 50%; right: 20px; bottom: 20px; background: #f8f6f0ed; transition: background .25s, transform .35s var(--ease-out); }
.gallery-card:hover .gallery-expand { background: var(--gold); transform: rotate(45deg); }
.gallery-card:hover img { transform: scale(1.055); }
.gallery-caption { font-size: 28px; padding-top: 22px; }
.gallery-caption small { letter-spacing: .03em; }
.gallery-caption > span:last-child { border-top: 1px solid #bba582; width: 28px; text-align: right; }

.system-section { border-radius: 40px 40px 0 0; background: #1c2822; }
.system-tabs { gap: 7px; padding-bottom: 12px; }
.system-tabs button { padding: 10px 19px; border: 1px solid transparent; border-radius: 5px; transition: color .2s, background .2s; }
.system-tabs button[aria-selected=true] { border: 1px solid #b4a07765; background: #d0b17e16; color: #e3c391; }
.system-copy h3 { font-size: 35px; }
.system-copy li { padding-block: 14px; }
.system-visual { border-radius: 15px; overflow: hidden; transform: rotate(1deg); transition: transform .4s var(--ease-out); }
.system-visual:hover { transform: rotate(0); }
.system-visual > span { padding: 16px 22px; }
.system-benefits { margin-top: 60px; padding-top: 32px; color: #d8d2bd; }
.process-grid { column-gap: 45px; row-gap: 45px; counter-reset: process; }
.process-grid li { position: relative; padding-top: 27px; transition: border-color .3s; }
.process-grid li::before { content: ''; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: #947346; transition: width .6s var(--ease-out); }
.process-grid li:hover::before { width: 100%; }
.process-grid li > span { font-size: 60px; font-style: italic; color: #a38c68; }
.process-grid h3 { margin-top: 23px; font-size: 22px; }
.process-grid p { line-height: 1.85; }
.turnkey { margin-inline: 24px; border-radius: 16px 100px 16px 16px; overflow: hidden; background: #303e32; }
.turnkey-copy { padding-block: 85px; }
.turnkey-copy h2 { font-size: clamp(40px,4.2vw,64px); }
.special .lead { font-family: var(--serif); font-size: 29px; }
.faq-section { background: #ebe9df; }
.faq-list summary { padding: 25px 0; }
.faq-list summary span { border: 1px solid #b5b6a6; border-radius: 50%; width: 33px; height: 33px; display: grid; place-items: center; flex-shrink: 0; font-size: 22px; }
.faq-list details[open] summary { color: #735629; }
.faq-list details[open] summary span { background: #d8c6a5; border-color: transparent; }
.faq-list details p { line-height: 1.85; }
.contact-section { background: #1c2822; border-radius: 40px 40px 0 0; }
.contact-copy h2 { font-size: clamp(43px,4.7vw,72px); }
.project-form { padding: 32px; border: 1px solid #ffffff1c; border-radius: 16px; background: #ffffff04; }
.form-grid input,.form-grid select,.form-grid textarea { border-radius: 6px; border-color: #73796b; background: #ffffff04; transition: border-color .2s, background .2s; }
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { background: #ffffff09; }
.form-submit { border-radius: 7px; }
.footer { background: #131e18; }
.back-top > span { border: 1px solid #727b65; border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; }
.back-top { align-items: center; }
.image-dialog,.text-dialog { border-radius: 16px; box-shadow: 0 30px 120px #0005; }
.dialog-close,.dialog-arrows button { border-radius: 50%; }
.text-dialog > textarea { border-radius: 7px; }
.button:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width:1100px) {
  .header { padding: 16px 20px; }
  .header nav { gap: 16px; }
  .header .wordmark { font-size: 20px; }
  .about-visual { height: 620px; border-radius: 130px 130px 10px 10px; }
  .gallery-photo { height: 290px; }
  .project-form { padding: 25px; }
}
@media (max-width:850px) {
  .header { left: 16px; width: calc(100% - 32px); top: 12px; }
  .header nav { top: calc(100% + 8px); border: 1px solid #ffffff20; border-radius: 14px; background: #1c2822fa; box-shadow: 0 20px 40px #0002; }
  .header nav a:not(.nav-cta)::after { bottom: 8px; right: 70%; }
  .hero { min-height: 780px; }
  .hero h1 { font-size: clamp(50px,8vw,74px); }
  .about { gap: 35px; }
  .about-visual { height: 560px; border-radius: 100px 100px 10px 10px; box-shadow: 10px 12px 0 #eae5d8; }
  .about-copy .lead { font-size: 22px; }
  .design-details article { padding-top: 0; }
  .gallery-photo { height: 240px; }
  .gallery-caption { font-size: 23px; }
  .turnkey { border-radius: 14px 70px 14px 14px; }
  .turnkey-copy { padding-block: 55px; }
  .contact-copy h2 { font-size: 56px; }
  .contact-layout { gap: 40px; }
}
@media (max-width:560px) {
  h2 { font-size: 40px; }
  .section { padding-block: 75px; }
  .header { left: 12px; width: calc(100% - 24px); padding: 13px 16px; border-radius: 11px; }
  .header .wordmark { font-size: 19px; }
  .hero { height: 94svh; min-height: 740px; border-radius: 0 0 28px 28px; }
  .hero-content { padding-top: 194px; }
  .hero h1 { font-size: clamp(40px,10.3vw,54px); line-height: 1.12; }
  .hero-description { font-size: 15px; padding-left: 14px; }
  .hero-bottom { bottom: 28px; }
  .hero-index { font-size: 16px; }
  .hero-index > span { font-size: 11px; }
  .services-strip { padding-block: 25px; }
  .about-visual { height: 470px; border-radius: 145px 145px 9px 9px; margin-right: 10px; }
  .about-copy h2 { font-size: 40px; }
  .section-heading { margin-bottom: 35px; }
  .section-heading > p { padding-left: 18px; font-size: 15px; }
  .design-section,.system-section,.contact-section { border-radius: 28px 28px 0 0; }
  .design-image { border-radius: 8px 65px 8px 8px; }
  .design-details article { padding-block: 24px; }
  .gallery-toolbar { gap: 14px; }
  .filter { padding: 9px 17px; }
  .gallery-grid { gap: 33px; }
  .gallery-photo { height: auto; aspect-ratio: 1.2; }
  .gallery-caption { font-size: 26px; }
  .gallery-card.gallery-wide .gallery-photo { border-radius: 10px 45px 10px 10px; }
  .gallery-card:nth-child(4) .gallery-photo { border-radius: 45px 10px 10px 10px; }
  .system-copy h3 { font-size: 30px; }
  .system-visual { transform: none; }
  .system-benefits { margin-top: 37px; }
  .process-grid { gap: 35px 23px; }
  .process-grid li > span { font-size: 49px; }
  .process-grid h3 { font-size: 18px; }
  .turnkey { margin-inline: 12px; border-radius: 10px 65px 10px 10px; }
  .turnkey-copy { padding-inline: 24px; }
  .turnkey-copy h2 { font-size: 40px; }
  .turnkey-copy .button { gap: 12px; }
  .button > span { width: 28px; height: 28px; flex-shrink: 0; }
  .contact-copy h2 { font-size: 43px; }
  .project-form { padding: 22px 18px; margin-inline: -5px; }
  .form-grid { gap: 20px; }
  .faq-list summary { font-size: 15px; gap: 15px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation: none!important; transition: none!important; }
  .system-visual { transform: none; }
}