/* Commercial shares the brand's type and gold, with a sharper charcoal layout. */
.commercial-page { --commercial-ink: #151b1c; --commercial-line: rgba(246,243,238,.22); background: var(--commercial-ink); }
.commercial-page main { padding: 0; }
.commercial-page section[id] { scroll-margin-top: var(--nav-h); }
.commercial-page .nav { background: rgba(21,27,28,.96); border-bottom: 1px solid var(--commercial-line); }
.commercial-inner { max-width: 1240px; margin-inline: auto; }
.commercial-eyebrow { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.7; color: var(--gold); margin-bottom: 24px; }
.commercial-page h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.7rem,4.1vw,4rem); line-height: 1.05; }
.commercial-page h2 em { font-weight: 300; }
.commercial-page .btn { line-height: 1.5; letter-spacing: .12em; padding: 16px 24px; }
.commercial-link { display: inline-flex; align-items: center; gap: 18px; width: fit-content; padding: 12px 0; border-bottom: 1px solid var(--commercial-line); text-decoration: none; font-size: .875rem; line-height: 1.6; }
.commercial-link:hover { color: var(--gold-light); border-color: var(--gold); }
.commercial-hero { padding-top: calc(var(--nav-h) + 88px); padding-bottom: 0; }
.commercial-hero-inner { max-width: 1440px; margin-inline: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px,4vw,64px); align-items: center; }
.commercial-hero h1 { font-family: var(--sans); font-weight: 400; font-size: clamp(3rem,4.7vw,5rem); line-height: 1.03; letter-spacing: -.045em; }
.commercial-hero h1 em { display: inline-block; font-family: var(--serif); font-weight: 300; font-size: 1.2em; letter-spacing: -.03em; line-height: 1.1; color: var(--gold-light); }
.commercial-intro { max-width: 28rem; color: var(--on-ink-70); line-height: 1.8; margin: 28px 0; }
.commercial-hero-copy > .commercial-link { display: flex; margin-top: 14px; }
.commercial-hero-photo img { width: 100%; height: auto; }
.commercial-hero-photo figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: .625rem; letter-spacing: .06em; line-height: 1.6; color: var(--on-ink-70); padding: 14px 0; border-bottom: 1px solid var(--commercial-line); }
.commercial-hero-bottom { max-width: 1440px; margin: 64px auto 0; display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid var(--commercial-line); padding: 20px 0; font-size: .75rem; line-height: 1.6; }
.commercial-hero-bottom p { color: var(--on-ink-70); }
.commercial-hero-bottom nav { display: flex; flex-wrap: wrap; gap: 28px; }
.commercial-hero-bottom a { text-decoration: none; }
.commercial-hero-bottom a:hover { color: var(--gold-light); }
.commercial-services { border-top: 1px solid var(--commercial-line); }
.commercial-section-heading { display: grid; grid-template-columns: .45fr 1fr 1fr; align-items: start; gap: 40px; margin-bottom: 64px; }
.commercial-section-heading > p:last-child { color: var(--on-ink-70); line-height: 1.8; }
.commercial-service-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.commercial-service-list article { border-top: 1px solid var(--commercial-line); padding-top: 24px; display: flex; flex-direction: column; align-items: start; }
.service-index { color: var(--gold); font-size: .6875rem; margin-bottom: 24px; }
.commercial-service-list h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; margin-bottom: 16px; }
.commercial-service-list p { color: var(--on-ink-70); font-size: .9375rem; line-height: 1.8; }
.commercial-service-list .commercial-use { color: var(--gold-light); font-size: .75rem; margin: 20px 0; }
.commercial-service-list .commercial-link { margin-top: auto; }
.commercial-work { background: #202829; }
.commercial-work-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 64px; }
.commercial-work-heading > p { max-width: 20rem; line-height: 1.8; color: var(--on-ink-70); }
.commercial-work-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 72px 64px; align-items: start; }
.commercial-work-grid img { width: 100%; height: auto; }
.work-portrait { width: 88%; }
.work-editorial { padding-top: 100px; }
.work-space { padding-top: 32px; }
.commercial-work-grid figcaption { padding-top: 20px; }
.commercial-work-grid figcaption span { display: block; font-size: .625rem; color: var(--gold-light); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 10px; }
.commercial-work-grid h3 { font-family: var(--serif); font-size: 1.9rem; font-weight: 400; line-height: 1.2; }
.commercial-work-grid figcaption p { font-size: .75rem; color: var(--on-ink-70); margin-top: 8px; line-height: 1.6; }
.commercial-process { background: var(--paper); color: var(--ink); --commercial-line: rgba(10,10,10,.22); }
.commercial-process .commercial-eyebrow { color: var(--gold-dim); }
.commercial-process-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.commercial-process-heading > p { color: var(--on-paper-70); line-height: 1.8; }
.commercial-process-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; list-style: none; margin-top: 64px; }
.commercial-process-steps li { border-top: 1px solid var(--commercial-line); padding-top: 24px; }
.commercial-process-steps span { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dim); }
.commercial-process-steps h3 { font-weight: 400; font-size: 1.125rem; margin: 24px 0 12px; }
.commercial-process-steps p { line-height: 1.8; color: var(--on-paper-70); font-size: .9375rem; }
.commercial-pricing-note { display: flex; justify-content: space-between; gap: 40px; align-items: center; margin-top: 56px; border-top: 1px solid var(--commercial-line); padding-top: 24px; }
.commercial-pricing-note p { max-width: 32rem; color: var(--on-paper-70); font-size: .875rem; line-height: 1.8; }
.commercial-pricing-note .commercial-link { flex-shrink: 0; }
.commercial-process .commercial-link:hover { color: var(--gold-dim); }
.commercial-inquiry-inner { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(48px,8vw,120px); }
.commercial-inquiry-copy > p:not(.commercial-eyebrow) { color: var(--on-ink-70); margin: 24px 0; line-height: 1.8; max-width: 25rem; }
.commercial-inquiry-copy > a { font-size: .9375rem; text-underline-offset: 5px; overflow-wrap: anywhere; }
.commercial-inquiry-copy .commercial-location { font-size: .75rem; }
.commercial-form { display: flex; flex-direction: column; gap: 24px; }
.commercial-form[hidden], .commercial-confirmation[hidden] { display: none; }
.commercial-form-note { color: var(--on-ink-70); font-size: .75rem; }
.commercial-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.commercial-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.commercial-field label { font-size: .6875rem; line-height: 1.6; letter-spacing: .1em; text-transform: uppercase; }
.commercial-field input, .commercial-field select, .commercial-field textarea { min-height: 44px; width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(246,243,238,.5); border-radius: 0; color: var(--paper); background: transparent; font: inherit; font-size: 1rem; line-height: 1.6; }
.commercial-field input::placeholder, .commercial-field textarea::placeholder { color: var(--on-ink-70); opacity: 1; }
.commercial-field select { appearance: none; -webkit-appearance: none; padding-right: 24px; background-image: linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%); background-position: calc(100% - 10px) 50%,calc(100% - 5px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.commercial-field option { background: var(--commercial-ink); color: var(--paper); }
.commercial-field textarea { resize: vertical; min-height: 130px; }
.commercial-form .btn { align-self: start; }
.commercial-form .btn:disabled { opacity: .6; cursor: wait; }
.commercial-page .hp-field { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.commercial-confirmation { border-top: 1px solid var(--commercial-line); padding-top: 32px; }
.commercial-confirmation h3 { font: 400 2.5rem/1.1 var(--serif); }
.commercial-confirmation > p:not(.commercial-eyebrow) { line-height: 1.8; margin: 24px 0; }
@media (max-width: 1050px) { .commercial-section-heading { grid-template-columns: 1fr 1fr; } .commercial-section-heading .commercial-eyebrow { grid-column: 1 / -1; margin-bottom: 0; } .commercial-service-list, .commercial-process-steps { gap: 24px; } }
@media (max-width: 900px) {
  .commercial-hero { padding-top: calc(var(--nav-h) + 48px); }
  .commercial-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .commercial-hero-copy { max-width: 40rem; }
  .commercial-hero h1 { font-size: 3.5rem; }
  .commercial-hero-bottom { margin-top: 32px; flex-direction: column; gap: 16px; }
  .commercial-service-list { grid-template-columns: 1fr; gap: 40px; }
  .commercial-service-list article { max-width: 42rem; }
  .commercial-work-grid { gap: 48px 32px; }
  .commercial-process-heading, .commercial-inquiry-inner { grid-template-columns: 1fr; gap: 40px; }
  .commercial-process-heading > p { max-width: 36rem; }
  .commercial-pricing-note { flex-direction: column; align-items: start; gap: 12px; }
}
@media (max-width: 700px) {
  .commercial-section-heading, .commercial-work-grid, .commercial-process-steps { grid-template-columns: 1fr; }
  .commercial-section-heading { gap: 24px; margin-bottom: 40px; }
  .commercial-work-heading { flex-direction: column; align-items: start; gap: 24px; margin-bottom: 40px; }
  .commercial-work-heading > p { max-width: 28rem; }
  .work-portrait { width: 85%; }
  .work-editorial, .work-space { padding-top: 0; }
  .commercial-process-steps { gap: 32px; margin-top: 40px; }
  .commercial-hero-photo figcaption { flex-direction: column; gap: 4px; }
  .commercial-form-row { grid-template-columns: 1fr; }
  .commercial-page .footer-socials { flex-wrap: wrap; }
}
@media (max-width: 380px) { .commercial-hero h1 { font-size: 3rem; } .commercial-hero-bottom nav { gap: 20px; } }