/* ============================================================
   Plan Craft Solution — main stylesheet
   White / sky-blue / deep-navy / very light blue. Blueprint + corporate.
   Mirrors the approved web homepage; mobile reflows (never recolors).
   ============================================================ */
:root{
  --white:#ffffff; --navy:#082f5b; --navy-2:#0b3d70; --blue:#139ee9; --sky:#79cfff;
  --pale:#eef8ff; --bg:#ffffff; --surface:#ffffff; --surface-2:#eef8ff;
  --ink:#082f5b; --muted:#486987; --line:#cbe9fb;
  --shadow:0 22px 55px rgba(8,47,91,.11); --soft-shadow:0 10px 30px rgba(8,47,91,.08);
  --font-head:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:96px}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:16.5px; line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.wrap{width:min(1180px,calc(100% - 44px)); margin-inline:auto}
.center{text-align:center}
.section{padding:104px 0}
.section.tinted{background:var(--surface-2)}
.section-label{margin:0 0 14px; color:var(--blue); font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase}
.section-label--light{color:var(--sky)}
.section-head{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.7fr); gap:64px; align-items:end; margin-bottom:46px}
.section-head h2,.section-title{font-family:var(--font-head); font-size:clamp(2.25rem,4.4vw,4rem); line-height:1; letter-spacing:-.045em; margin:0; max-width:760px}
.section-head p{margin:0; color:var(--muted); font-size:1.02rem}
.btn{min-height:50px; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:13px 21px; border:2px solid var(--blue); background:var(--blue); color:#fff; font-size:.78rem; font-weight:800; letter-spacing:.055em; text-transform:uppercase; transition:background .2s,border-color .2s,color .2s}
.btn:hover,.btn:focus-visible{background:var(--navy); border-color:var(--navy)}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--navy)}
.btn-outline:hover,.btn-outline:focus-visible{background:var(--navy); color:#fff}
.btn-white{background:#fff; border-color:#fff; color:#082f5b}
.btn-white:hover,.btn-white:focus-visible{background:var(--sky); border-color:var(--sky)}
.actions{display:flex; flex-wrap:wrap; gap:12px}
.text-link{display:inline-flex; align-items:center; gap:9px; color:var(--blue); font-weight:800; font-size:.8rem; letter-spacing:.045em; text-transform:uppercase}
.text-link:after{content:"\2192"}
.entry-content img{height:auto}
.entry-content a{color:var(--blue); text-decoration:underline}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .65s ease, transform .65s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} html{scroll-behavior:auto} }

/* ---------- header ---------- */
.header{position:sticky; top:0; z-index:50; background:var(--surface); border-bottom:1px solid var(--line); transition:box-shadow .25s ease}
.header.scrolled{box-shadow:0 12px 30px -14px rgba(8,47,91,.25)}
.nav-shell{min-height:84px; display:flex; align-items:center; gap:24px}
.brand{width:160px; flex:0 0 160px; align-self:stretch; display:flex; align-items:center}
.brand img,.brand .custom-logo{width:160px; height:70px; object-fit:contain}
.nav{margin-left:auto}
.nav-list{list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:23px}
.nav-list a{font-size:.74rem; font-weight:700; letter-spacing:.02em; color:var(--ink); text-transform:uppercase}
.nav-list a:hover{color:var(--blue)}
.header-cta{margin-left:8px; white-space:nowrap}
.menu-btn{display:none; width:46px; height:46px; border:0; background:transparent; color:var(--ink); padding:0; position:relative}
.menu-btn span,.menu-btn:before,.menu-btn:after{content:""; position:absolute; left:10px; right:10px; height:2px; background:currentColor; transition:.2s}
.menu-btn:before{top:14px}.menu-btn span{top:22px}.menu-btn:after{top:30px}
.menu-btn.open:before{top:22px; transform:rotate(45deg)}
.menu-btn.open span{opacity:0}
.menu-btn.open:after{top:22px; transform:rotate(-45deg)}

/* ---------- hero ---------- */
.hero{padding:78px 0 70px; position:relative; overflow:hidden; background:var(--bg)}
.hero:before{content:""; position:absolute; right:-160px; top:-210px; width:660px; height:660px; border:1px solid var(--line); border-radius:50%}
.hero-grid{display:grid; grid-template-columns:minmax(0,.92fr) minmax(520px,1.08fr); gap:64px; align-items:center; position:relative}
.hero-copy{position:relative; z-index:2}
.hero-kicker{display:flex; align-items:center; gap:12px; margin:0 0 24px; color:var(--blue); font-weight:800; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase}
.hero-kicker:before{content:""; width:36px; height:2px; background:var(--blue)}
.hero h1{font-family:var(--font-head); font-size:clamp(3.25rem,5.8vw,6rem); line-height:.92; letter-spacing:-.062em; margin:0 0 25px; max-width:700px}
.hero h1 span{color:var(--blue)}
.hero .lead{font-family:var(--font-head); font-weight:600; font-size:clamp(1.06rem,1.7vw,1.3rem); line-height:1.45; margin:0 0 16px; max-width:690px}
.hero .support{color:var(--muted); font-size:.96rem; max-width:660px; margin:0 0 27px}
.hero-meta{margin-top:24px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:.78rem; font-weight:700}
.hero-visual{position:relative; z-index:1; padding:0 0 38px 34px}
.hero-visual:before{content:""; position:absolute; inset:34px 32px 0 0; background:var(--pale); border:1px solid var(--line)}
.hero-visual img{position:relative; width:100%; height:550px; object-fit:cover; object-position:center; border:1px solid var(--line); box-shadow:var(--shadow)}
.visual-note{position:absolute; left:0; bottom:0; z-index:2; width:260px; background:#fff; color:#082f5b; padding:20px 22px; border-top:4px solid var(--blue); box-shadow:var(--soft-shadow)}
.visual-note small{display:block; color:#139ee9; font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase}
.visual-note strong{display:block; font-family:var(--font-head); font-size:1.08rem; line-height:1.25; margin-top:7px}

/* ---------- trust bar ---------- */
.trust-bar{background:var(--navy); color:#fff}
.trust-items{display:grid; grid-template-columns:repeat(4,1fr)}
.trust-item{padding:29px 27px; border-right:1px solid rgba(121,207,255,.24)}
.trust-item:last-child{border-right:0}
.trust-item strong{display:block; font-family:var(--font-head); font-size:1rem; line-height:1.25}
.trust-item span{display:block; color:var(--sky); font-size:.76rem; line-height:1.45; margin-top:7px}

/* ---------- problem solver ---------- */
.problem-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.problem-card{padding:30px; background:var(--surface); border:1px solid var(--line); min-height:220px; position:relative}
.problem-card:nth-child(2),.problem-card:nth-child(5){border-top:4px solid var(--blue)}
.problem-num{font-family:var(--font-head); color:var(--blue); font-weight:800; font-size:.82rem}
.problem-card h3{font-family:var(--font-head); font-size:1.18rem; line-height:1.2; margin:34px 0 10px}
.problem-card p{margin:0; color:var(--muted); font-size:.9rem}
.problem-action{display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:30px; padding:24px 28px; background:var(--navy); color:#fff}
.problem-action p{margin:0; color:var(--sky)}

/* ---------- services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.service{min-height:170px; padding:24px; background:var(--surface); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between}
.service:hover{background:var(--surface-2)}
.service span{font-family:var(--font-head); color:var(--blue); font-weight:800; font-size:.8rem}
.service h3{font-family:var(--font-head); font-size:.96rem; line-height:1.25; margin:22px 0 0}

/* ---------- outsource ---------- */
.outsource{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:610px; background:var(--navy)}
.outsource-image{min-height:610px}
.outsource-image img{width:100%; height:100%; object-fit:cover}
.outsource-copy{color:#fff; padding:72px 44px; display:flex; flex-direction:column; justify-content:center}
.outsource-copy h2{font-family:var(--font-head); font-size:clamp(2.5rem,4.6vw,4.2rem); line-height:1; letter-spacing:-.05em; margin:0 0 14px}
.outsource-copy h3{font-family:var(--font-head); color:var(--sky); font-size:1.17rem; line-height:1.4; margin:0 0 17px}
.outsource-copy p{margin:0 0 22px}
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; margin:0 0 28px; padding:0; list-style:none}
.check-grid li{position:relative; padding-left:19px; font-size:.85rem}
.check-grid li:before{content:""; position:absolute; left:0; top:.62em; width:7px; height:7px; background:var(--sky)}
.monthly{font-size:.8rem; color:var(--sky); margin:18px 0 0 !important}

/* ---------- trades ---------- */
.trade-groups{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.trade{padding:30px 28px; background:var(--surface-2); border-top:3px solid var(--blue)}
.trade h3{font-family:var(--font-head); font-size:1.25rem; margin:0 0 13px}
.trade p{color:var(--muted); font-size:.89rem; margin:0}
.trade-footer{margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:22px; border-top:1px solid var(--line)}
.trade-footer p{margin:0; color:var(--muted)}

/* ---------- samples carousel ---------- */
.sample-shell{border:1px solid var(--line); background:var(--surface); padding:28px}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px}
.filter{border:1px solid var(--line); background:var(--surface); color:var(--ink); padding:9px 14px; font-size:.72rem; font-weight:800}
.filter.active{background:var(--blue); border-color:var(--blue); color:#fff}
.sample-viewport{overflow:hidden}
.sample-track{display:flex; transition:transform .4s ease}
.sample-slide{min-width:100%; min-height:335px; background:var(--surface-2); display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line)}
.sample-copy{padding:48px; display:flex; flex-direction:column; justify-content:center}
.sample-copy small{color:var(--blue); font-weight:800; letter-spacing:.1em; text-transform:uppercase}
.sample-copy h3{font-family:var(--font-head); font-size:clamp(1.8rem,3vw,2.7rem); line-height:1.05; margin:13px 0}
.sample-copy p{margin:0; color:var(--muted)}
.sample-drawing{min-height:310px; position:relative; overflow:hidden; background:var(--navy)}
.sample-drawing:before{content:""; position:absolute; inset:30px; background-image:linear-gradient(rgba(121,207,255,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(121,207,255,.22) 1px,transparent 1px); background-size:32px 32px}
.sample-drawing:after{content:"SAMPLE PREVIEW"; position:absolute; inset:74px 48px; border:2px solid var(--sky); display:grid; place-items:center; color:var(--sky); font-family:var(--font-head); font-weight:800; letter-spacing:.11em; text-align:center; padding:10px}
.carousel-foot{display:flex; justify-content:space-between; align-items:center; margin-top:18px; gap:20px}
.carousel-foot p{margin:0; color:var(--muted); font-size:.8rem}
.carousel-controls{display:flex; gap:8px}
.car-btn{width:44px; height:44px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:1.1rem}
.car-btn:hover{background:var(--blue); color:#fff; border-color:var(--blue)}

/* ---------- process / pricing ---------- */
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 22px; counter-reset:step}
.step{position:relative; padding:26px 24px 24px 73px; border-top:1px solid var(--line)}
.step:before{counter-increment:step; content:"0" counter(step); position:absolute; left:0; top:19px; font-family:var(--font-head); font-size:1.65rem; font-weight:800; color:var(--blue)}
.step h3{font-family:var(--font-head); font-size:.96rem; margin:0 0 8px}
.step p{margin:0; color:var(--muted); font-size:.86rem}
.pricing-note{margin-top:40px; padding:26px 28px; background:var(--surface-2); border-left:4px solid var(--blue); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline}
.pricing-note strong{font-family:var(--font-head)}
.pricing-note span{color:var(--muted); font-size:.9rem}

/* ---------- bid CTA ---------- */
.bid-cta{padding:68px 0; background:var(--blue); color:#fff}
.bid-inner{display:grid; grid-template-columns:.72fr 1fr auto; gap:40px; align-items:center}
.bid-inner h2{font-family:var(--font-head); font-size:clamp(2.5rem,4vw,3.8rem); line-height:.95; letter-spacing:-.045em; margin:0}
.bid-inner p{margin:0}
.bid-meta{font-size:.8rem; opacity:.92}

/* ---------- renovation ---------- */
.renovation{display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center}
.renovation h2{font-family:var(--font-head); font-size:clamp(2.35rem,4.3vw,3.8rem); line-height:1; letter-spacing:-.045em; margin:0 0 20px}
.renovation p{color:var(--muted)}
.reno-list{display:flex; flex-wrap:wrap; gap:8px; margin:24px 0}
.reno-list span{padding:9px 12px; background:var(--surface-2); font-size:.8rem; font-weight:700}
.reno-steps{display:grid; grid-template-columns:1fr 1fr; background:var(--line); gap:1px; border:1px solid var(--line)}
.reno-step{padding:25px; background:var(--surface); min-height:130px}
.reno-step strong{font-family:var(--font-head); color:var(--blue); font-size:.9rem}
.reno-step p{font-size:.84rem; margin:12px 0 0; color:var(--ink)}

/* ---------- testimonials ---------- */
.review-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.review-placeholder{padding:34px 30px; background:var(--surface); border:1px solid var(--line); min-height:235px}
.review-mark{width:44px; height:3px; background:var(--blue); margin-bottom:34px}
.review-placeholder h3{font-family:var(--font-head); font-size:1.15rem; margin:0 0 11px}
.review-placeholder p{color:var(--muted); margin:0; font-size:.9rem}
.review-note{margin-top:24px; color:var(--muted); font-size:.8rem}

/* ---------- locations ---------- */
.locations{display:grid; grid-template-columns:1.1fr .9fr; gap:70px; align-items:start}
.locations h2{font-family:var(--font-head); font-size:clamp(2.35rem,4.3vw,3.8rem); line-height:1; letter-spacing:-.045em; margin:0 0 18px}
.locations p{color:var(--muted)}
.coverage-main{padding:36px; background:var(--navy); color:#fff}
.coverage-main strong{font-family:var(--font-head); font-size:clamp(2.6rem,5vw,4.5rem); line-height:1}
.coverage-main span{display:block; color:var(--sky); margin-top:8px}
.country-list{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line)}
.country{padding:24px; background:var(--surface)}
.country strong{font-family:var(--font-head)}
.country span{display:block; color:var(--muted); font-size:.8rem; margin-top:4px}

/* ---------- final CTA + form ---------- */
.final{padding:96px 0; background:var(--navy); color:#fff}
.final-head{display:grid; grid-template-columns:1fr .7fr; gap:60px; align-items:end; margin-bottom:48px}
.final h2{font-family:var(--font-head); font-size:clamp(2.8rem,5.5vw,5.2rem); line-height:.93; letter-spacing:-.055em; margin:0}
.final-head p{margin:0; color:var(--sky)}
.final-layout{display:grid; grid-template-columns:.72fr 1.28fr; gap:52px; align-items:start}
.final-contact{padding-top:12px}
.final-contact p{color:var(--sky)}
.contact-links{margin:28px 0}
.contact-links a{display:block; font-family:var(--font-head); font-size:clamp(1.05rem,2vw,1.35rem); font-weight:700; margin:12px 0; overflow-wrap:anywhere}
.contact-address{font-size:.9rem; color:#fff !important}
.verified-line{margin-top:30px; padding-top:22px; border-top:1px solid rgba(121,207,255,.25); font-size:.8rem !important}
.prefer-email{font-size:.85rem}
.prefer-email a{color:var(--sky); text-decoration:underline}
.project-form{display:grid; grid-template-columns:1fr 1fr; gap:15px; background:#fff; color:#082f5b; padding:34px; margin-top:0}
.field{display:flex; flex-direction:column; gap:6px}
.field.full{grid-column:1/-1}
.field label{font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.field input,.field textarea{width:100%; border:1px solid #cbe9fb; background:#fff; color:#082f5b; min-height:49px; padding:12px 13px}
.field textarea{min-height:100px; resize:vertical}
.field input[type=file]{padding:10px; min-height:0}
.form-note{grid-column:1/-1; color:#486987; font-size:.72rem; margin:0}
.form-note a{color:#139ee9; font-weight:800}
.form-status{padding:14px 18px; margin-bottom:16px; font-size:.85rem; font-weight:700; background:#eef8ff; color:#082f5b; border-left:4px solid var(--blue)}
.form-status--err{background:#fdecec; border-left-color:#c0392b; color:#7b1d12}
.project-form .btn{width:100%}

/* ---------- footer ---------- */
.footer{background:var(--navy); color:#fff; border-top:1px solid rgba(121,207,255,.25); padding:52px 0 32px}
.footer-grid{display:grid; grid-template-columns:1.2fr .8fr .8fr 1fr; gap:42px}
.footer-brand img{width:160px; height:105px; object-fit:contain; background:#fff; padding:7px}
.footer p{color:var(--sky); font-size:.8rem}
.footer h3{color:var(--sky); font-size:.7rem; letter-spacing:.11em; text-transform:uppercase; margin:0 0 15px}
.footer a{display:block; font-size:.79rem; margin:8px 0; overflow-wrap:anywhere}
.footer a:hover{color:var(--sky)}
.footer-bar{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:40px; padding-top:22px; border-top:1px solid rgba(121,207,255,.25); color:rgba(255,255,255,.75); font-size:.75rem}

/* ---------- sticky mobile bar (hidden on desktop) ---------- */
.mobile-bar{display:none}

/* ============ responsive ============ */
@media(max-width:1080px){
  .nav{display:none; position:fixed; top:84px; left:0; right:0; bottom:0; background:var(--surface); padding:28px 24px 120px; overflow-y:auto; z-index:49}
  .nav.open{display:block}
  .nav-list{flex-direction:column; align-items:flex-start; gap:0}
  .nav-list a{display:block; width:100%; font-family:var(--font-head); font-size:1.1rem; text-transform:none; padding:15px 4px; border-bottom:1px solid var(--line)}
  .header-cta{margin-left:auto}
  .menu-btn{display:block}
  .hero-grid{grid-template-columns:1fr 1fr; gap:38px}
  .hero-visual img{height:500px}
  .services-grid{grid-template-columns:repeat(3,1fr)}
  .outsource-copy{padding:60px 42px}
  .footer-grid{grid-template-columns:1.2fr repeat(3,1fr); gap:28px}
}
@media(max-width:780px){
  html{scroll-padding-top:74px}
  body{padding-bottom:64px}
  .wrap{width:min(100% - 36px,1180px)}
  .section{padding:68px 0}
  .section-head{grid-template-columns:1fr; gap:16px; margin-bottom:30px}
  .section-head h2,.section-title{font-size:clamp(2.05rem,9.5vw,3rem); line-height:1.02}
  .section-head p{font-size:.96rem}
  .nav-shell{min-height:74px}
  .brand{width:142px; flex-basis:142px}
  .brand img,.brand .custom-logo{width:142px; height:62px}
  .nav{top:74px}
  .header-cta{display:none}
  .menu-btn{margin-left:auto}
  /* Same light story as desktop: white / pale panels, blue only as accent */
  body,.header,.hero{background:var(--bg)}
  .section.tinted{background:var(--surface-2)}
  .hero{padding:46px 0 58px}
  .hero:before{display:none}
  .hero-grid{grid-template-columns:1fr; gap:38px}
  .hero h1{font-size:clamp(2.65rem,11.8vw,4.6rem); line-height:.96; letter-spacing:-.052em}
  .hero .lead{font-size:clamp(1.02rem,4.2vw,1.22rem); line-height:1.48}
  .hero .support{font-size:.94rem; line-height:1.65}
  .hero-visual{width:100%; padding:0 0 32px 24px}
  .hero-visual:before{inset:24px 22px 0 0}
  .hero-visual img{height:clamp(330px,78vw,500px)}
  .visual-note{width:min(270px,calc(100% - 24px))}
  .trust-items{grid-template-columns:1fr}
  .trust-item{padding:24px 22px; border-right:0; border-bottom:1px solid rgba(121,207,255,.24)}
  .trust-item:last-child{border-bottom:0}
  .problem-grid,.services-grid,.trade-groups,.process,.reno-steps,.country-list,.project-form{grid-template-columns:1fr}
  .problem-card{min-height:0; padding:26px}
  .problem-card h3{margin-top:24px}
  .problem-action{align-items:flex-start; flex-direction:column; padding:24px}
  .service{min-height:124px; padding:22px}
  .outsource{grid-template-columns:1fr; background:var(--bg)}
  .outsource-image{min-height:clamp(300px,78vw,460px)}
  .outsource-copy{padding:54px 24px 60px; background:var(--surface-2); color:var(--ink)}
  .outsource-copy h2{font-size:clamp(2.35rem,10vw,3.5rem)}
  .outsource-copy h3{color:var(--blue)}
  .outsource-copy .section-label--light{color:var(--blue)}
  .outsource-copy .monthly{color:var(--muted)}
  .outsource-copy .btn-white{background:var(--blue); border-color:var(--blue); color:#fff}
  .outsource-copy .btn-white:hover,.outsource-copy .btn-white:focus-visible{background:var(--navy); border-color:var(--navy)}
  .check-grid{grid-template-columns:1fr 1fr}
  .trade{padding:26px 24px}
  .trade-footer{align-items:flex-start; flex-direction:column}
  .sample-shell{padding:18px}
  .sample-slide{grid-template-columns:1fr; min-height:0}
  .sample-copy{padding:34px 26px}
  .sample-drawing{min-height:270px}
  .process{gap:18px}
  .step{padding:24px 20px 22px 68px}
  .bid-cta{padding:58px 0}
  .bid-inner{grid-template-columns:1fr; gap:18px}
  .renovation,.locations,.final-layout,.final-head{grid-template-columns:1fr; gap:34px}
  .review-grid{grid-template-columns:1fr}
  .review-placeholder{min-height:0}
  .final{padding:74px 0}
  .final h2{font-size:clamp(2.6rem,11vw,4.2rem)}
  .project-form{padding:28px 22px}
  .field.full{grid-column:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer{padding-bottom:44px}
  .mobile-bar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -10px 28px rgba(8,47,91,.12); padding:8px 10px calc(8px + env(safe-area-inset-bottom)); gap:8px}
  .mobile-bar__btn{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-height:50px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:.68rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase}
  .mobile-bar__btn svg{width:20px; height:20px; fill:currentColor}
  .mobile-bar__btn--primary{background:var(--blue); border-color:var(--blue); color:#fff}
  .mobile-bar__btn--primary span{font-size:.72rem}
}
@media(max-width:500px){
  .wrap{width:min(100% - 28px,1180px)}
  .section{padding:58px 0}
  .section-label{font-size:.69rem; letter-spacing:.12em}
  .section-head h2,.section-title{font-size:clamp(2rem,10vw,2.65rem)}
  .hero{padding-top:38px}
  .hero h1{font-size:clamp(2.35rem,11.2vw,2.95rem)}
  .hero .actions{display:grid; grid-template-columns:1fr; gap:10px}
  .hero .actions .btn{width:100%}
  .hero-visual{padding-left:16px}
  .hero-visual img{height:clamp(280px,82vw,340px)}
  .visual-note{position:relative; width:calc(100% - 16px); margin-top:-50px; padding:16px 18px}
  .check-grid{grid-template-columns:1fr}
  .outsource-image{min-height:300px}
  .outsource-copy{padding-inline:20px}
  .sample-shell{padding:14px}
  .filters{gap:6px}
  .filter{padding:8px 10px; font-size:.67rem}
  .sample-copy{padding:28px 20px}
  .sample-drawing{min-height:230px}
  .sample-drawing:after{inset:52px 24px; font-size:.73rem}
  .bid-inner .btn,.renovation .btn,.problem-action .btn{width:100%}
  .coverage-main{padding:30px 26px}
  .project-form{padding:24px 18px}
  .footer-grid{grid-template-columns:1fr}
  .footer-grid>div:first-child{grid-column:auto}
}