/* Northdown customer Project Hub: typography, navigation and touch-size upgrade.
   Respect established Northdown green branding. No form/API/booking changes. */
body{font-size:17px;line-height:1.65;background:#f6f8f5;color:#192d21}
.topbar{background:#ffffffed;border-bottom:1px solid #dce7dd;box-shadow:0 3px 15px #21462b0b}
.topbar .brand strong{font-size:18px;font-weight:850}
.topbar .brand small{font-size:14px;color:#41654f;font-weight:730;line-height:1.4}
.topbar .brand img{width:58px;height:58px}
.topbar-actions .pill{min-height:47px;font-size:15px;font-weight:850;display:inline-flex;align-items:center}
.eyebrow{font-size:13px;letter-spacing:.06em;font-weight:850}
.hero{gap:clamp(18px,3vw,50px);min-height:0;padding-block:48px}
.hero h1{font-size:clamp(48px,6vw,78px);font-weight:850;line-height:1.04;letter-spacing:-.045em}
.lead{font-size:clamp(18px,2vw,21px);font-weight:550;line-height:1.66;color:#385842}
.hero-card{padding:24px}
.hero-card>span{font-size:16px;font-weight:850}
.hero-card li{font-size:16px;line-height:1.4}
.hero-card b{font-size:16px}
.actions .btn,.portal-actions .btn,.form-panel .btn{min-height:51px;font-size:16px;font-weight:850}
.btn{border-radius:11px;font-size:16px;min-height:46px}
.pill{font-size:15px}
.feature-strip article{padding:20px}
.feature-strip b{font-size:16px;font-weight:850}
.feature-strip span{font-size:14px;line-height:1.5}
.panel{border-radius:18px;background:#fff}
.panel h2,.section-head h2{font:850 clamp(26px,3.1vw,38px)/1.19 Inter,system-ui,sans-serif;letter-spacing:-.035em}
.panel p:not(.eyebrow){font-size:16px;line-height:1.7}
.portal-panel,.form-panel{scroll-margin-top:92px}
label{font-size:16px;font-weight:790;line-height:1.5}
input,select,textarea{font-size:17px;min-height:48px;border:1.5px solid #b9cebc;color:#193a25}
input::placeholder,textarea::placeholder{font-size:15px;color:#607966}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #43a777;outline-offset:3px}
.check span,.remember-project,.portal-help{font-size:15px;line-height:1.6}
.portal-help{color:#4d6b56}
.project-top h2{font-size:28px;font-weight:850}
.quote-amount{font:850 clamp(27px,4vw,41px) Inter,system-ui,sans-serif}
.timeline-item,.activity-row,.inline-row,.task-card{font-size:15px;line-height:1.6}
.customer-module-card strong{font-size:17px}
.customer-module-card small,.file-link small{font-size:14px}
.customer-module-card details summary{font-size:16px}
.portal-section{padding:23px 0}
.portal-actions{gap:10px}
.contact-grid a{padding:20px}
.contact-grid strong{font-size:18px;font-weight:850}
.contact-grid span{font-size:15px}
.bottom{gap:6px;padding:9px max(9px,env(safe-area-inset-left))}
.bottom a,.bottom button{font-size:15px;font-weight:850;min-height:50px;border-radius:10px;
 display:flex;align-items:center;justify-content:center;line-height:1.2;padding:10px}
.bottom a:focus-visible,.bottom button:focus-visible{outline:3px solid #43a777}
footer p,footer a{font-size:15px}
@media(max-width:620px){
 body{padding-bottom:70px}
 main{width:calc(100% - 22px)}
 .hero{padding:30px 0 20px}
 .hero h1{font-size:clamp(43px,12vw,60px)}
 .lead{font-size:18px}
 .panel{padding:19px}
 .hero-card li{font-size:15px}
 .topbar .brand img{width:49px;height:49px}
 .topbar .brand strong{font-size:15px}
 .topbar .brand small{display:none}
 .bottom{grid-template-columns:repeat(3,minmax(0,1fr));padding-bottom:max(9px,env(safe-area-inset-bottom))}
 .bottom a,.bottom button{font-size:14px;min-width:0}
 .contact-grid{gap:9px}
}

/* Small-phone overflow fix found by the 320px Playwright release gate.
   Let long service labels, emails and footer links wrap within their cards. */
.services{grid-template-columns:repeat(2,minmax(0,1fr))}
.service{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:normal}
.accent.booking-panel{flex-wrap:wrap}
.accent.booking-panel>div{min-width:0;flex:1 1 230px}
.accent.booking-panel>.btn{flex:0 1 auto;max-width:100%;white-space:normal;text-align:center}
.contact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.contact-grid a,.contact-grid span,.contact-grid strong{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
footer{flex-wrap:wrap}
footer p{flex:1 1 170px;min-width:0}
footer a{min-width:0;overflow-wrap:anywhere;white-space:normal}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:620px){
 .services{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service{padding-inline:8px}
 .contact-grid{grid-template-columns:1fr}
 .contact-grid a{padding:16px;max-width:100%}
 .accent.booking-panel>div{flex:1 1 100%}
 .accent.booking-panel>.btn{width:100%;flex:1 1 100%}
 footer{gap:12px}
 footer a{font-size:14px}
}