.commercial-page {
  --com-ink: #202722;
  --com-green: #25352e;
  --com-muted: #69716b;
  --com-paper: #f3f2ed;
  --com-coral: #d48668;
  --com-line: rgba(32, 39, 34, .19);
  overflow-x: clip;
  background: var(--com-paper);
  color: var(--com-ink);
}

.commercial-page *,
.commercial-page *::before,
.commercial-page *::after { box-sizing: border-box; }

.commercial-page h1,
.commercial-page h2,
.commercial-page h3,
.commercial-page p,
.commercial-page figure { margin-top: 0; }

.commercial-page h1,
.commercial-page h2,
.commercial-page h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; }

.commercial-page em { color: var(--com-coral); font-weight: 400; }
.commercial-page img { display: block; width: 100%; height: 100%; object-fit: cover; }

.com-hero { position: relative; overflow: hidden; padding: 0 6vw 26px; background: var(--com-green); color: #f3f2ed; }
.com-hero-topline,.com-hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: .58rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.com-hero-topline { min-height: 67px; border-bottom: 1px solid rgba(243,242,237,.24); }
.com-hero-grid { position: relative; display: grid; min-height: 655px; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: 4vw; padding: 46px 2vw 54px; }
.com-hero-copy { position: relative; z-index: 2; padding: 25px 0; }
.com-eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 24px; color: #d8b5a0; font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.com-eyebrow span { width: 25px; height: 1px; background: currentColor; }
.com-hero h1 { margin: 0; font-size: clamp(4rem,8vw,8rem); letter-spacing: -.065em; line-height: .85; }
.com-hero h1 em { color: #d48668; }
.com-hero-summary { max-width: 380px; margin: 30px 0 0; color: rgba(243,242,237,.73); font-family: Georgia,"Times New Roman",serif; font-size: 1.08rem; line-height: 1.72; }
.com-button { display: inline-flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 35px; margin-top: 29px; padding: 14px 17px; background: #d48668; color: #202722; font-size: .72rem; font-weight: 700; text-decoration: none; transition: background .2s ease,transform .2s ease; }
.com-button:hover { transform: translateY(-2px); background: #e0a088; color: #202722; }
.com-button span { font-size: 1rem; }
.com-hero-location { margin: 47px 0 0; color: rgba(243,242,237,.58); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.com-hero-image { position: relative; height: min(560px,52vw); min-height: 410px; margin: 0; }
.com-hero-image::before { position: absolute; z-index: 1; inset: 14px -14px -14px 14px; border: 1px solid rgba(212,134,104,.7); content: ""; pointer-events: none; }
.com-hero-image img { position: relative; z-index: 1; }
.com-hero-image figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; gap: 15px; padding: 18px; background: linear-gradient(transparent,rgba(0,0,0,.62)); color: #fff; font-size: .59rem; letter-spacing: .13em; text-transform: uppercase; }
.com-hero-side-note { position: absolute; top: 25%; right: -2.1vw; color: rgba(243,242,237,.52); font-size: .52rem; font-weight: 700; letter-spacing: .16em; writing-mode: vertical-rl; }
.com-hero-bottom { min-height: 46px; border-top: 1px solid rgba(243,242,237,.24); color: rgba(243,242,237,.68); font-size: .54rem; }

.com-intro { padding: 115px 10vw 128px; }
.com-intro-number { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; color: var(--com-coral); font-size: .63rem; font-weight: 700; letter-spacing: .15em; }
.com-intro-number span { color: var(--com-muted); font-weight: 500; text-transform: uppercase; }
.com-intro-content { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(280px,.72fr); align-items: end; gap: clamp(48px,9vw,138px); }
.com-intro h2,.com-spaces h2,.com-approach h2,.com-process h2,.com-locations h2,.com-consultation h2,.com-faq h2 { margin: 0; font-size: clamp(3rem,5.6vw,6rem); letter-spacing: -.055em; line-height: .98; }
.com-intro h2 em,.com-spaces h2 em,.com-approach h2 em,.com-process h2 em,.com-locations h2 em,.com-faq h2 em { color: var(--com-coral); }
.com-intro-copy p { color: var(--com-muted); font-size: .91rem; line-height: 1.85; }
.com-intro-copy p:first-child { color: var(--com-ink); font-family: Georgia,"Times New Roman",serif; font-size: 1.06rem; }
.com-inline-link { display: inline-flex; align-items: center; gap: 23px; margin-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--com-ink); color: var(--com-ink); font-size: .71rem; font-weight: 700; text-decoration: none; }
.com-inline-link:hover { color: #a7563a; }

.com-spaces { padding: 106px 7vw 118px; background: #e7e8e2; }
.com-section-label { margin-bottom: 22px; color: #a75f46; font-size: .59rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.com-spaces-head { display: flex; align-items: end; justify-content: space-between; gap: 35px; margin-bottom: 43px; }
.com-spaces h2 { font-size: clamp(2.9rem,5.6vw,5.8rem); }
.com-spaces h2 em { color: #a75f46; }
.com-spaces-head > p { max-width: 310px; margin: 0 0 5px; color: var(--com-muted); font-size: .86rem; line-height: 1.8; }
.com-space-mosaic { display: grid; min-height: 660px; grid-template-columns: 1.12fr .88fr; grid-template-rows: 1fr 1fr; gap: 14px; }
.com-space-card { position: relative; min-height: 270px; overflow: hidden; background: #555b54; }
.com-space-card::after { position: absolute; inset: 25% 0 0; background: linear-gradient(transparent,rgba(14,20,17,.78)); content: ""; }
.com-space-card img { position: absolute; inset: 0; transition: transform .7s ease; }
.com-space-card:hover img { transform: scale(1.035); }
.com-space-main { grid-row: 1 / span 2; }
.com-space-caption { position: absolute; z-index: 1; right: 24px; bottom: 22px; left: 24px; color: #fff; }
.com-space-caption span { color: #e8b9a3; font-size: .56rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.com-space-caption h3 { max-width: 480px; margin: 9px 0 0; color: #fff; font-size: clamp(1.5rem,2.8vw,2.55rem); letter-spacing: -.025em; }

.com-approach { display: grid; grid-template-columns: .68fr 1.32fr; gap: clamp(45px,9vw,135px); padding: 120px 10vw 130px; background: #292e2a; color: #f3f2ed; }
.com-approach .com-section-label { color: #d8a18c; }
.com-approach-aside { display: flex; min-height: 100%; flex-direction: column; align-items: flex-start; }
.com-approach-aside p { max-width: 220px; color: rgba(243,242,237,.68); font-family: Georgia,"Times New Roman",serif; font-size: 1.05rem; line-height: 1.75; }
.com-approach-mark { margin-top: auto; color: rgba(243,242,237,.83); font-family: Georgia,"Times New Roman",serif; font-size: 3.4rem; letter-spacing: -.08em; }
.com-approach-mark span { color: var(--com-coral); font-size: 2.3rem; }
.com-approach h2 { max-width: 760px; margin-bottom: 44px; font-size: clamp(2.9rem,5vw,5.4rem); }
.com-principles { border-top: 1px solid rgba(243,242,237,.24); }
.com-principles article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 20px 0; border-bottom: 1px solid rgba(243,242,237,.24); }
.com-principles article > span { padding-top: 4px; color: #d8a18c; font-size: .59rem; font-weight: 700; letter-spacing: .12em; }
.com-principles h3 { margin: 0 0 7px; color: #fff; font-size: 1.28rem; }
.com-principles p { max-width: 520px; margin: 0; color: rgba(243,242,237,.67); font-size: .8rem; line-height: 1.7; }

.com-process { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.com-process-image { position: relative; min-height: 680px; background: #555b54; }
.com-process-image img { position: absolute; inset: 0; }
.com-image-index { position: absolute; right: 18px; bottom: 18px; left: 18px; color: #fff; font-size: .55rem; font-weight: 700; letter-spacing: .15em; }
.com-process-copy { padding: clamp(52px,7vw,104px) clamp(36px,7vw,100px); }
.com-process h2 { margin-bottom: 38px; font-size: clamp(2.8rem,4.7vw,5rem); }
.com-process h2 em { color: #a75f46; }
.com-process ol { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--com-line); }
.com-process li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--com-line); }
.com-process li > span { color: #a75f46; font-size: .59rem; font-weight: 700; }
.com-process li h3 { margin: 0 0 5px; font-size: 1.13rem; }
.com-process li p { max-width: 450px; margin: 0; color: var(--com-muted); font-size: .77rem; line-height: 1.7; }

.com-locations { display: grid; grid-template-columns: .55fr 1.45fr; gap: clamp(45px,9vw,135px); padding: 112px 10vw; background: #e7e8e2; }
.com-locations-label { display: flex; flex-direction: column; justify-content: space-between; color: #a75f46; font-size: .57rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.com-locations-label span:last-child { color: var(--com-muted); }
.com-locations h2 { margin-bottom: 25px; font-size: clamp(2.9rem,5vw,5.4rem); }
.com-locations-copy p { max-width: 720px; color: var(--com-muted); font-size: .88rem; line-height: 1.85; }
.com-locations-copy strong { color: var(--com-ink); font-weight: 700; }

.com-consultation { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: clamp(42px,8vw,115px); padding: 95px 9vw 100px; background: #d8d6cb; }
.com-consultation-copy h2 { max-width: 590px; font-size: clamp(3rem,5vw,5.6rem); }
.com-consultation-copy h2::first-line { color: var(--com-ink); }
.com-consultation-copy > p { max-width: 400px; margin: 22px 0 20px; color: var(--com-muted); font-size: .87rem; line-height: 1.8; }
.com-consultation-copy > a { color: var(--com-ink); font-size: .72rem; font-weight: 700; text-decoration: none; }
.com-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; gap: 17px 14px; }
.com-form-field { display: grid; gap: 7px; }
.com-form-field label { color: #575d55; font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.com-form-field input,.com-form-field select { width: 100%; min-height: 47px; padding: 11px 12px; border: 1px solid rgba(32,39,34,.29); border-radius: 0; background: rgba(255,255,255,.45); color: var(--com-ink); font: inherit; font-size: .76rem; }
.com-form-field input:focus,.com-form-field select:focus { border-color: #a75f46; outline: 2px solid rgba(167,95,70,.2); }
.com-form-full,.com-submit,.com-form-note { grid-column: 1 / -1; }
.com-submit { display: flex; min-height: 49px; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 17px; border: 0; background: var(--com-green); color: #fff; font: inherit; font-size: .71rem; font-weight: 700; cursor: pointer; transition: background .2s ease; }
.com-submit:hover { background: #3c5548; }
.com-submit span { font-size: 1rem; }
.com-form-note { margin: -8px 0 0; color: var(--com-muted); font-size: .63rem; }

.com-faq { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(42px,9vw,135px); padding: 105px 10vw 120px; }
.com-faq h2 { font-size: clamp(2.8rem,4.8vw,4.9rem); }
.com-faq-list { border-top: 1px solid var(--com-line); }
.com-faq-list details { padding: 20px 0; border-bottom: 1px solid var(--com-line); }
.com-faq-list summary { position: relative; padding-right: 38px; color: var(--com-ink); cursor: pointer; font-family: Georgia,"Times New Roman",serif; font-size: 1.05rem; list-style: none; }
.com-faq-list summary::-webkit-details-marker { display: none; }
.com-faq-list summary::after { position: absolute; top: -3px; right: 3px; color: #a75f46; content: "+"; font-family: Arial,sans-serif; font-size: 1.35rem; }
.com-faq-list details[open] summary::after { content: "−"; }
.com-faq-list details p { max-width: 640px; margin: 12px 35px 0 0; color: var(--com-muted); font-size: .79rem; line-height: 1.8; }

.com-footer-note { display: flex; min-height: 105px; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 7vw; background: var(--com-green); color: #f3f2ed; }
.com-footer-note > a:first-child { color: #fff; font-family: Georgia,"Times New Roman",serif; font-size: 1.16rem; letter-spacing: .09em; text-decoration: none; }
.com-footer-note > a:first-child span { display: block; color: #d8a18c; font-family: Arial,sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .27em; }
.com-footer-note p { margin: 0; color: rgba(243,242,237,.68); font-family: Georgia,"Times New Roman",serif; font-size: .87rem; font-style: italic; }
.com-footer-note > a:last-child { color: #fff; font-size: .7rem; font-weight: 700; text-decoration: none; }

@media (max-width: 900px) {
  .com-hero-grid { min-height: 570px; gap: 3vw; }
  .com-hero h1 { font-size: clamp(3.7rem,8.5vw,6rem); }
  .com-intro,.com-approach,.com-locations,.com-faq { padding-inline: 7vw; }
  .com-spaces { padding-inline: 5vw; }
  .com-process-copy { padding-inline: 5vw; }
  .com-consultation { padding-inline: 6vw; }
}

@media (max-width: 700px) {
  .com-hero { padding-inline: 22px; }
  .com-hero-topline { min-height: 54px; font-size: .52rem; }
  .com-hero-grid { min-height: 0; grid-template-columns: 1fr; gap: 35px; padding: 48px 0 39px; }
  .com-hero h1 { font-size: clamp(4rem,16vw,6.2rem); }
  .com-hero-summary { margin-top: 24px; font-size: 1rem; }
  .com-hero-location { margin-top: 31px; }
  .com-hero-image { height: 76vw; min-height: 310px; margin-right: 9px; }
  .com-hero-side-note { top: auto; right: 1px; bottom: 175px; font-size: .48rem; }
  .com-hero-bottom { min-height: 52px; gap: 10px; font-size: .45rem; letter-spacing: .1em; }
  .com-intro { padding: 75px 25px 82px; }
  .com-intro-content,.com-approach,.com-process,.com-locations,.com-consultation,.com-faq { grid-template-columns: 1fr; }
  .com-intro-content { gap: 26px; }
  .com-intro h2 { font-size: clamp(3rem,12vw,4.8rem); }
  .com-spaces { padding: 78px 22px 85px; }
  .com-spaces-head { align-items: flex-start; flex-direction: column; gap: 18px; margin-bottom: 29px; }
  .com-spaces h2 { font-size: clamp(2.9rem,11vw,4.6rem); }
  .com-space-mosaic { min-height: 0; grid-template-columns: 1fr; grid-template-rows: 380px 290px 290px; gap: 11px; }
  .com-space-main { grid-row: auto; }
  .com-space-caption { right: 18px; bottom: 17px; left: 18px; }
  .com-approach { gap: 39px; padding: 78px 25px 85px; }
  .com-approach-aside { min-height: 130px; }
  .com-approach-mark { display: none; }
  .com-approach h2 { margin-bottom: 30px; font-size: clamp(2.9rem,11vw,4.5rem); }
  .com-process-image { min-height: 390px; }
  .com-process-copy { padding: 75px 25px 84px; }
  .com-process h2 { font-size: clamp(2.8rem,10.8vw,4.4rem); }
  .com-locations { gap: 27px; padding: 76px 25px 83px; }
  .com-locations-label { flex-direction: row; gap: 12px; }
  .com-locations h2 { font-size: clamp(2.8rem,10.8vw,4.5rem); }
  .com-consultation { gap: 36px; padding: 75px 25px 82px; }
  .com-consultation-copy h2 { font-size: clamp(3rem,11vw,4.6rem); }
  .com-faq { gap: 30px; padding: 76px 25px 84px; }
  .com-faq h2 { font-size: clamp(2.8rem,10vw,4.4rem); }
}

@media (max-width: 460px) {
  .com-hero { padding-inline: 18px; }
  .com-hero h1 { font-size: clamp(3.7rem,16vw,4.6rem); }
  .com-hero-bottom span:last-child { display: none; }
  .com-space-mosaic { grid-template-rows: 320px 270px 270px; }
  .com-form { grid-template-columns: 1fr; }
  .com-form-full,.com-submit,.com-form-note { grid-column: auto; }
  .com-footer-note { align-items: flex-start; flex-direction: column; padding: 27px 25px; }
}

@media (prefers-reduced-motion: reduce) {
  .commercial-page *, .commercial-page *::before, .commercial-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
