/* Contact-only layouts: preserve the shared site styles on other pages. */
.contact-page {
 --contact-gutter: clamp(24px,3.4vw,64px);
 --contact-top: max(104px,14svh);
}
.contact-page .contact-hero { min-height:100svh; overflow:clip; }
.contact-page .contact-layout { width:100%; max-width:1920px; margin-inline:auto; min-width:0; container-type:inline-size; }
.contact-page .contact-hero:not(.is-started) .contact-layout {
 display:grid; grid-template-columns:minmax(0,2.6fr) minmax(280px,1fr);
 align-items:end; gap:clamp(40px,5vw,96px);
 min-height:100svh; padding:var(--contact-top) var(--contact-gutter) clamp(48px,8svh,100px);
}
.contact-page .contact-hero:not(.is-started) .contact-title {
 position:static; inset:auto; width:100%; min-width:0; margin:0; align-self:end;
 font-size:clamp(104px,min(20cqw,33.5svh),360px);
 line-height:.82; letter-spacing:0; transform:none;
}
.contact-page .contact-hero:not(.is-started) .contact-aside {
 position:static; inset:auto; width:100%; min-width:0; max-width:400px; align-self:center;
}
.contact-page .contact-open .onform-footer__aside > p { font-size:clamp(22px,1.75vw,30px); line-height:1.25; }
.contact-page .contact-choice-list { margin-top:24px; }
.contact-page .contact-choice-list .onform-footer__contact {
 min-height:clamp(56px,8svh,84px); padding:10px 0;
 font-size:clamp(24px,2vw,34px); line-height:1.25; gap:16px;
 touch-action:manipulation;
}
.contact-page .contact-open .onform-footer__contact > .onform-text-arrow { font-size:clamp(25px,2vw,34px); }
.contact-page .contact-open .contact-helper { font-size:13px; line-height:1.6; margin-top:16px; }
.contact-page .contact-booking { margin-top:clamp(32px,5svh,72px); }
.contact-page .contact-booking .onform-footer__contact { font-size:clamp(17px,1.55vw,24px); min-height:44px; gap:12px; padding:8px 0; }
.contact-page .contact-booking .contact-helper { margin-top:2px; }
/* The form stays comfortable to read even on a very wide monitor. */
.contact-page .contact-hero.is-started .contact-layout {
 display:block; max-width:1560px; min-height:100svh;
 padding:var(--contact-top) var(--contact-gutter) max(48px,env(safe-area-inset-bottom));
}
.contact-page .contact-questionnaire { min-width:0; scroll-margin-top:104px; }
.contact-page .contact-questionnaire .onform-footer__grid {
 display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
 gap:clamp(40px,6vw,110px); align-items:start;
}
.contact-page .contact-questionnaire .onform-footer__grid > div { min-width:0; }
.contact-page .contact-questionnaire h2 { font-size:clamp(60px,6.8vw,120px); line-height:1.02; max-width:11ch; overflow-wrap:normal; }
.contact-page .contact-questionnaire :is(form,.contact-review,fieldset) { min-width:0; max-width:100%; }
.contact-page .contact-field :is(input,textarea,select) {
 min-width:0; max-width:100%; min-height:52px; font-size:clamp(18px,1.4vw,24px);
 scroll-margin-block:104px 32px;
}
.contact-page .contact-field textarea { min-height:140px; max-height:55svh; }
.contact-page .contact-progress { align-items:center; gap:16px; font-size:13px; }
.contact-page .contact-progress nav { gap:clamp(16px,2vw,32px); }
.contact-page .contact-controls.more-work { gap:16px; flex-wrap:wrap; }
.contact-page .contact-controls .onform-button { min-height:48px; max-width:100%; padding:14px 20px; gap:16px; }
.contact-page .contact-controls .contact-back { min-height:44px; }
.contact-page .contact-review dd { font-size:clamp(18px,1.4vw,24px); }
/* Portrait tablets and phones use flow layout, so nothing can overlap. */
@media(max-width:900px) {
 .contact-page { --contact-gutter:clamp(24px,5vw,44px); --contact-top:112px; }
 .contact-page .contact-hero:not(.is-started) .contact-layout {
  grid-template-columns:minmax(0,1fr); align-content:start;
  gap:clamp(32px,4.5vw,48px); padding-bottom:max(40px,env(safe-area-inset-bottom));
 }
 .contact-page .contact-hero:not(.is-started) .contact-title { font-size:clamp(90px,27cqw,212px); }
 .contact-page .contact-hero:not(.is-started) .contact-aside { max-width:560px; align-self:start; }
 .contact-page .contact-open .onform-footer__aside > p { font-size:clamp(22px,3.6vw,28px); }
 .contact-page .contact-choice-list .onform-footer__contact { font-size:clamp(25px,3.5vw,30px); min-height:60px; }
 .contact-page .contact-booking { margin-top:32px; }
 .contact-page .contact-questionnaire .onform-footer__grid { grid-template-columns:minmax(0,1fr); gap:32px; min-height:0; }
 .contact-page .contact-questionnaire h2 { font-size:clamp(46px,8.5vw,76px); max-width:14ch; }
 .contact-page .contact-questionnaire .onform-footer__grid > div:last-child { max-width:620px; width:100%; }
 .contact-page .contact-progress { margin-bottom:32px; }
}
@media(max-width:480px) {
 .contact-page { --contact-gutter:20px; --contact-top:104px; }
 .contact-page .contact-hero:not(.is-started) .contact-title { font-size:clamp(80px,28cqw,120px); }
 .contact-page .contact-open .onform-footer__aside > p { font-size:22px; }
 .contact-page .contact-booking .onform-footer__contact { font-size:17px; }
 .contact-page .contact-questionnaire h2 { font-size:clamp(42px,11vw,54px); }
 .contact-page .contact-progress { flex-wrap:nowrap; }
 .contact-page .contact-progress nav { gap:16px; }
 .contact-page .contact-questionnaire .contact-helper { font-size:14px; }
 .contact-page .contact-questionnaire .contact-controls { margin-top:28px; }
}
/* Short landscape screens scroll naturally; controls keep their touch size. */
@media(max-height:600px) and (min-width:901px) {
 .contact-page { --contact-top:104px; }
 .contact-page .contact-hero:not(.is-started) .contact-title { font-size:clamp(100px,18cqw,200px); }
 .contact-page .contact-hero:not(.is-started) .contact-layout { padding-bottom:36px; }
 .contact-page .contact-choice-list .onform-footer__contact { min-height:52px; }
 .contact-page .contact-booking { margin-top:24px; }
}
@media(max-width:900px) and (max-height:600px) and (orientation:landscape) {
 .contact-page .contact-hero:not(.is-started) .contact-layout { grid-template-columns:minmax(0,1fr) minmax(250px,1fr); gap:28px; }
 .contact-page .contact-hero:not(.is-started) .contact-title { font-size:clamp(76px,12cqw,110px); }
 .contact-page .contact-open .onform-footer__aside > p { font-size:20px; }
 .contact-page .contact-choice-list { margin-top:16px; }
 .contact-page .contact-choice-list .onform-footer__contact { min-height:48px; font-size:23px; }
 .contact-page .contact-booking { margin-top:24px; }
}
@media(min-width:1921px) {
 .contact-page .site-header { left:max(64px,calc((100vw - 1920px)/2 + 64px)); }
 html[data-menu-button] .contact-page .menu-toggle.architecture-menu[data-menu-option] { right:max(64px,calc((100vw - 1920px)/2 + 64px)); }
 .contact-page .hero-studio-backdrop { object-position:50% 48%; }
}
@supports(padding:max(0px)) {
 .contact-page .contact-layout { padding-left:max(var(--contact-gutter),env(safe-area-inset-left)); padding-right:max(var(--contact-gutter),env(safe-area-inset-right)); }
}
/* Fit both the menu links and photograph into the actual available height. */
@media(max-width:600px), (max-height:600px) {
 .contact-page .navigation.architectural-nav .menu-split {
  top:max(88px,10dvh); bottom:max(20px,env(safe-area-inset-bottom)); height:auto;
  width:calc(100% - var(--contact-gutter) * 2); gap:12px;
  grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,.58fr);
 }
 .contact-page .navigation.architectural-nav nav.architectural-nav__panels { inset:auto; height:100%; gap:8px; }
 .contact-page .navigation.architectural-nav .menu-gallery { height:100%; aspect-ratio:auto; }
 .contact-page .navigation.architectural-nav .menu-panel__title { font-size:clamp(32px,min(16vw,11dvh),100px); }
 .contact-page .navigation.architectural-nav .menu-panel__arrow { width:clamp(28px,min(9vw,9dvh),60px); }
}
@media(max-width:600px) and (max-height:640px) {
 .contact-page .navigation.architectural-nav .menu-split { grid-template-rows:minmax(0,1fr); }
 .contact-page .navigation.architectural-nav .menu-gallery { display:none; }
}
@media(min-width:601px) and (max-height:600px) {
 .contact-page .navigation.architectural-nav .menu-split { grid-template-columns:1.06fr 1fr; grid-template-rows:minmax(0,1fr); }
}

.contact-page .site-header { top:max(24px,env(safe-area-inset-top)); }
html[data-menu-button] .contact-page .menu-toggle.architecture-menu[data-menu-option] { top:max(18px,env(safe-area-inset-top)); }
@media(max-width:480px) { .contact-page { --contact-top:max(104px,calc(env(safe-area-inset-top) + 84px)); } }