/* Shared screen-size adjustments for the design, booking and intake pages. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
input::placeholder,textarea::placeholder,#intake textarea::placeholder{color:var(--accent);font-family:'Foyer Display','Foyer Text','Times New Roman',serif;font-weight:400;opacity:1}
.hero>*,.package>*,.booking-grid>*,.next-step-card>*,.section-head>*,.faq>*{min-width:0}
.wrap>header nav a{display:flex;align-items:center;justify-content:center;min-height:44px}
.btn{min-height:48px;max-width:100%;text-align:center;white-space:normal}
.cta-arrow{display:block;width:14px;height:14px;flex:0 0 14px}
.brand-logo{aspect-ratio:816 / 420}
.brand-logo::before{height:365.714286%;top:-102.857143%}
.hero-note{flex-wrap:wrap;row-gap:8px}
.offer-top{flex-wrap:wrap;gap:12px}.badge{white-space:nowrap}
.faq summary{min-height:44px;align-items:center}.faq summary::after{flex-shrink:0}
.sample-modal-close{min-width:44px;min-height:44px;flex-shrink:0}
input,select,textarea{min-width:0;max-width:100%}
.booking-agreement,.scope-acceptance{cursor:pointer;min-height:44px}
.booking-agreement input,.scope-acceptance input{width:20px;height:20px;flex-basis:20px}
.photo-previews img{max-width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.order-detail{min-width:0}.order-detail img{max-width:100%;height:auto}
@media(max-width:1000px){
 .wrap>header{flex-direction:column;gap:12px;padding:18px 0}
 .wrap>header nav{display:flex;justify-content:center;flex-wrap:wrap;gap:4px 26px;width:100%}
 .wrap>header .brand-logo{width:185px;max-width:100%}
 .package{gap:40px}
 .booking-grid{grid-template-columns:minmax(0,1fr);gap:36px;max-width:720px;margin-inline:auto}
 .booking-price{display:flex;gap:20px}.booking-price>div{margin:0}
 .booking-price small{display:block;margin:10px 0 0}
}
@media(max-width:900px){
 .package,.faq{grid-template-columns:minmax(0,1fr);gap:32px}
 .package>div>p,.package .how-it-works .fine{max-width:none}
 .section-head{display:block}.section-head>p{max-width:540px;margin-top:22px}
 .next-step-card{grid-template-columns:minmax(0,1fr);gap:24px}
 .next-step-card>div+div{border-top:1px solid var(--line);padding-top:24px}
 #sample-deliverable .sample-journey{grid-template-columns:120px 44px minmax(0,440px);gap:20px}
 #sample-deliverable .sample-input{width:120px}
}
@media(max-width:760px){
 .wrap{width:calc(100% - 40px)}
 .draft{font-size:10px;letter-spacing:.7px;line-height:1.6;padding:7px 20px}
 .wrap>header{padding:16px 0;gap:12px}
 .wrap>header .brand-logo{width:165px}
 .wrap>header nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
 .wrap>header nav a{font-size:15px;line-height:1.2;letter-spacing:.4px;padding:8px 4px}
 .hero{gap:24px;padding:24px 0 36px;grid-template-columns:minmax(0,1fr)}
 .hero-copy{padding:0;max-width:none}
 h1{font-size:clamp(42px,10.5vw,60px);line-height:1.08;margin:18px 0 22px}
 .hero p{font-size:18px;line-height:1.65}
 .hero-copy>.btn{width:100%;justify-content:center;padding:16px 20px}
 .hero-note{font-size:13px;margin-top:18px;gap:12px}
 .hero-note span+span{padding-left:12px}
 .hero-image{height:auto;min-height:0;max-height:none;aspect-ratio:4/5}
 .hero-image img{display:block;object-position:center 52%}
 .image-tag{bottom:12px;left:12px;font-size:10px}
 .section{padding:44px 0}.section.package{padding-top:8px;padding-bottom:44px}
 .package h2{font-size:clamp(36px,9vw,46px);letter-spacing:-.7px}
 .package .how-it-works .step{grid-template-columns:30px minmax(0,1fr);column-gap:12px}
 .package .how-it-works .step h3{font-size:25px}
 .offer{padding:28px 24px}.offer h3{font-size:29px;line-height:1.2}
 .offer li{line-height:1.6}.offer-delivery{line-height:1.6}
 .tape{font-size:17px;gap:8px 18px;padding:18px 0}
 .portfolio,.sample-deliverable{padding:44px 0}
 .section-head h2{font-size:clamp(34px,9vw,44px);letter-spacing:-.6px}
 .section-head>p{font-size:17px;line-height:1.6}
 #inspiration .details-gallery{gap:12px}
 .faq{gap:12px}.faq h2{font-size:38px}.faq details{padding:12px 0}
 .faq details p{margin:12px 0 8px;font-size:16px;line-height:1.65}
 #sample-deliverable .sample-journey{grid-template-columns:minmax(0,440px);gap:14px}
 #sample-deliverable .sample-input{width:112px;justify-self:center}
 #sample-deliverable .sample-output{max-width:440px;justify-self:center}
 .sample-flow-arrow{width:44px;margin:12px 0;transform:rotate(90deg)}
 #sample-deliverable .sample-board-expand{font-size:13px;min-height:44px;display:flex;align-items:center;justify-content:space-between}
 .sample-disclosure{font-size:12px;line-height:1.7}
 #sample-board{width:calc(100% - 20px);max-width:680px;max-height:92dvh}
 .sample-modal-toolbar{gap:8px;padding:8px 10px}.sample-modal-toolbar h2{font-size:13px;line-height:1.4}
 .guest-board-heading h4{font-size:max(22px,5.1cqw)}
 .booking-main{padding-top:20px}.booking-copy h1{font-size:clamp(38px,9.5vw,52px)}
 .booking-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;justify-content:stretch;font-size:12px;line-height:1.5;margin-bottom:28px;padding:8px 0 20px}
 .booking-progress li{max-width:none;overflow-wrap:normal}
 .booking-photo{height:auto;aspect-ratio:4/3}.booking-summary{padding:28px 24px}
 .booking-price h2{font-size:27px}.booking-price>div{font-size:36px;flex-shrink:0}
 .booking-summary .eyebrow{letter-spacing:1.2px}
 .booking-agreement,.scope-acceptance{font-size:15px;line-height:1.6}
 .turnaround{padding:16px}.turnaround .eyebrow{letter-spacing:1px}
 .after-booking>h1,.submission-preview h1,#submission-result h1{font-size:clamp(36px,9vw,48px)}
 #intake{padding:26px 20px}#intake h1{font-size:clamp(30px,8vw,40px);overflow-wrap:anywhere}
 .question-label{align-items:start;font-size:18px;gap:10px}.question-number{font-size:13px;padding-top:3px}
 #intake textarea,input:not([type=checkbox]),select{font-size:16px}
 #intake textarea{line-height:1.6;padding:12px;min-height:128px}
 .photo-upload{padding:14px}#intake .photo-upload input{font-size:13px;line-height:1.6}
 .photo-upload input::file-selector-button{min-height:44px;font-size:15px;padding:10px;margin-right:8px}
 #intake .field-help{font-size:13px}.questionnaire-submit .btn{width:100%;padding:16px 12px;line-height:1.5}
 .email-preview{width:calc(100% - 40px)}.email-sheet{padding:24px 20px}
 .email-sheet>h1{font-size:34px}.email-sheet .btn{width:100%}
 .end{padding:40px 0}.end h2{font-size:clamp(28px,8vw,38px)}
 .end a{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
 footer{font-size:12px;line-height:1.6;overflow-wrap:anywhere}
}
/* Keep the compact sample legible, including when enlarged on a phone. */
@container(max-width:400px){
 .guest-palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .guest-color-name{font-size:12px}.guest-palette small{font-size:11px}
 .guest-paints{grid-template-columns:minmax(0,1fr);gap:16px}
 .guest-paint{grid-template-columns:58px minmax(0,1fr);gap:14px}
 .guest-board h6{font-size:14px}.guest-board .guest-paint p{font-size:14px}
 .guest-board .guest-paint small{font-size:12px}
 .guest-board .guest-section-title{margin:18px 0 12px;font-size:14px}
 .guest-board .guest-board-note{font-size:12px;padding-top:12px;margin-top:18px}
}
@media(max-width:360px){
 .wrap{width:calc(100% - 32px)}
 .offer,.booking-summary{padding:26px 20px}
 .hero-note{font-size:12px;gap:9px}.hero-note span+span{padding-left:9px}
 .booking-price{display:block}.booking-price>div{margin-top:18px}
 #intake{padding:24px 16px}.question-label{flex-direction:column;gap:5px}
}