:root{--o:#E8792B;--k:#141414;--cream:#FBF6F0}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Georgia,'Times New Roman',serif;color:var(--k);background:#fff}
.kick{font:700 13px Helvetica,Arial,sans-serif;letter-spacing:3px;color:var(--o);text-transform:uppercase}
.btn{display:inline-block;background:var(--o);color:#fff;font:700 17px Helvetica,Arial,sans-serif;padding:16px 32px;border-radius:40px;text-decoration:none;border:0}
.logo-img{height:auto;display:block}
.hero{position:relative;color:#fff;display:flex;align-items:center;background:#1a1a1a center/cover no-repeat;overflow:hidden}
.hero.desk{background-image:url(hero_bg_desktop.jpg);min-height:720px;padding:72px 5vw;gap:3vw;justify-content:flex-start}
.hero.mob{background:#141414;background-image:none;min-height:0;padding:0;flex-direction:column;justify-content:flex-start;align-items:stretch}
.hero:before{content:'';position:absolute;inset:0;pointer-events:none}
.hero.desk:before{background:linear-gradient(90deg,rgba(20,20,20,.78) 0%,rgba(20,20,20,.35) 42%,rgba(20,20,20,.05) 62%,transparent 100%)}
.hero.mob:before{display:none}
.hero>*{position:relative;z-index:1}
.hero-copy{max-width:480px;flex:0 1 480px}
.hero h1{font-size:clamp(32px,4.2vw,54px);line-height:1.08;margin:14px 0 16px;font-weight:700}
.hero p{font:400 17px/1.5 Helvetica,Arial,sans-serif;opacity:.92;max-width:440px;margin-bottom:26px}
.vid{border:3px dashed var(--o);border-radius:16px;background:rgba(0,0,0,.42);display:flex;align-items:center;justify-content:center;flex-direction:column;font:700 13px Helvetica,Arial,sans-serif;letter-spacing:2px;color:#fff;flex-shrink:0}
.play{width:64px;height:64px;border-radius:50%;background:var(--o);display:flex;align-items:center;justify-content:center;margin-bottom:10px;font-size:24px}
section{padding:80px 6vw}
h2{font-size:clamp(28px,3.4vw,40px);margin:10px 0 32px;font-weight:700}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{background:var(--cream);border-top:5px solid var(--o);border-radius:14px;padding:28px}
.num{width:46px;height:46px;border-radius:50%;background:var(--k);color:#fff;font:700 20px Helvetica,Arial,sans-serif;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.step h3,.svc h3{font-size:21px;margin-bottom:8px}.step p,.svc p{font:15px/1.5 Helvetica,Arial,sans-serif;color:#444}
.svcs{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.svc{text-align:center;padding:24px 12px;border:1px solid #eee;border-radius:14px;background:#fff}
.svc svg{width:52px;height:52px;margin-bottom:10px}
.office{background:#f8f3ec;padding:56px 4vw;text-align:center}
.office picture{display:block;width:100%;max-width:1200px;margin:0 auto}
.office img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.12);object-fit:contain}
.faq{background:var(--cream);padding:80px 6vw;text-align:center}
.faq-list{max-width:820px;margin:0 auto;text-align:left}
.faq-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:22px 26px;margin-bottom:14px;border-left:4px solid var(--o)}
.faq-item h3{font:700 18px Georgia,serif;margin:0 0 8px;color:var(--k)}
.faq-item p{font:15px/1.55 Helvetica,Arial,sans-serif;color:#444;margin:0}
/* CTA: photo then dark content band with clear separation */
.cta{position:relative;color:#fff;text-align:center;padding:0;overflow:hidden;background:#111;margin-top:0;border-top:32px solid var(--cream)}
.cta-bg{width:100%;height:auto;display:block;object-fit:contain;object-position:center bottom}
.cta-inner{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 6vw 88px;background:#141414;gap:0}
.logo-banner{background:transparent;padding:24px 24px 40px;margin:0 0 28px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.55))}
.logo-banner img{width:min(280px,64vw);height:auto}
.cta h2{color:#fff;margin:0 0 16px}
.cta .sub{font:17px/1.5 Helvetica,Arial,sans-serif;opacity:.95;margin:0 auto 12px;max-width:640px}
.cta .sub.local{margin-bottom:8px;opacity:.9}
.addr{font:600 16px Helvetica,Arial,sans-serif;letter-spacing:.3px;margin:8px 0 32px;opacity:.95}
footer{background:#0e0e0e;color:rgba(255,255,255,.72);text-align:center;padding:22px 6vw;font:13px/1.5 Helvetica,Arial,sans-serif;letter-spacing:.2px}
@media(max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .hero-copy{max-width:520px;flex-basis:520px}
  .hero h1{font-size:clamp(34px,4.6vw,52px)}
}
@media(max-width:780px){
  .hero.desk{display:none}.hero.mob{display:flex}
  section{padding:56px 5vw}
  .steps{grid-template-columns:1fr}
  .svcs{grid-template-columns:1fr 1fr}
  .faq{padding:56px 5vw}
  .faq-item{padding:18px 18px}
  .cta{border-top-width:24px}
  .cta-bg{width:100%;height:auto}
  .cta-inner{padding:64px 5vw 76px}
  .logo-banner{padding:20px 12px 36px;margin-bottom:24px}
  .cta .sub{font-size:16px}
  footer{padding:20px 5vw;font-size:12px}
}
@media(min-width:781px){.hero.mob{display:none}}
.hero-card{width:320px;flex:0 0 320px;margin-left:1vw;margin-right:22vw;background:rgba(20,20,20,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:22px 24px;font-family:Helvetica,Arial,sans-serif}
.hc-t{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#f08a2c;font-weight:700;margin-bottom:14px}
.hero-card ul{list-style:none;margin:0;padding:0}
.hero-card li{position:relative;padding:9px 0 9px 24px;border-top:1px solid rgba(255,255,255,.12)}
.hero-card li:first-child{border-top:0}
.hero-card li:before{content:'✓';position:absolute;left:0;top:9px;color:#f08a2c;font-weight:700}
.hero-card b{display:block;font-size:15px;color:#fff}
.hero-card span{font-size:13px;opacity:.85}
.hero-logo{width:170px;height:auto;display:block;margin:0 0 10px -6px;filter:drop-shadow(0 2px 8px rgba(0,0,0,.35))}
.hero.mob .hero-logo{width:140px}
.hero.desk:after{content:"";position:absolute;left:0;top:0;width:520px;height:340px;background:radial-gradient(ellipse at 22% 32%,rgba(12,12,12,.62) 0%,rgba(12,12,12,.35) 38%,transparent 72%);pointer-events:none;z-index:0}
.hero.mob:after{display:none}
.office{position:relative}
.office .office-overlay{max-width:1200px;margin:22px auto 0;text-align:center;padding:0 6px}
.office-overlay h2{font:700 28px Georgia,serif;color:#2b2118;margin:0 0 10px}
.office-overlay p{font:17px/1.5 Helvetica,Arial,sans-serif;color:#4a3d31;margin:0 auto 18px;max-width:440px}
@media(min-width:768px){
.office picture{position:relative}
.office{display:grid;justify-items:center}
.office picture,.office .office-overlay{grid-area:1/1}
.office .office-overlay{align-self:start;justify-self:end;margin:0;width:min(25%,300px);margin-top:calc(min(92vw,1200px)*.06);margin-right:calc((100% - min(100%,1200px))/2 + min(92vw,1200px)*.015);text-align:left;background:rgba(30,20,12,.55);backdrop-filter:blur(3px);border-radius:12px;padding:clamp(12px,1.6vw,22px)}
.office-overlay h2{color:#fff;font-size:clamp(17px,2.1vw,28px);line-height:1.15}
.office-overlay p{color:#f3e9dc;font-size:clamp(12px,1.15vw,16px);margin-bottom:clamp(8px,1.2vw,16px)}
.office-overlay .btn{font-size:clamp(12px,1.2vw,16px);padding:clamp(8px,.9vw,14px) clamp(14px,1.6vw,26px)}
}
@media(min-width:1280px) and (max-width:1439px){
  .hero.desk{padding:64px 4vw;gap:2.5vw}
  .hero-copy{max-width:440px;flex-basis:440px}
  .hero h1{font-size:clamp(30px,3.6vw,46px)}
  .hero p{font-size:16px;max-width:400px}
  .hero-card{width:300px;flex-basis:300px;margin-right:18vw;padding:20px 22px}
}

/* Mobile split hero: photo band + dark copy block */
.hero-photo{display:none}
.hero.mob .hero-photo{display:block;position:relative;width:100%;aspect-ratio:4/5;max-height:48vh;overflow:hidden;background:#1a1a1a}
.hero.mob .hero-photo-img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block}
.hero.mob .hero-logo{position:absolute;top:14px;left:16px;width:118px;margin:0;z-index:2;filter:drop-shadow(0 2px 10px rgba(0,0,0,.55))}
.hero.mob .hero-copy{max-width:none;flex:none;width:100%;padding:22px 22px 28px;background:#141414;color:#fff}
.hero.mob h1{font-size:clamp(26px,7.2vw,32px);line-height:1.12;margin:0 0 12px;font-weight:700;letter-spacing:-.01em}
.hero.mob p{font:400 15px/1.45 Helvetica,Arial,sans-serif;opacity:.92;max-width:none;margin:0 0 18px}
.hero.mob .btn{padding:13px 26px;font-size:16px}
@media(max-width:430px){
  .hero.mob .hero-photo{aspect-ratio:1/1;max-height:42vh}
  .hero.mob .hero-photo-img{object-position:center 10%}
  .hero.mob .hero-copy{padding:18px 18px 26px}
  .hero.mob h1{font-size:clamp(24px,6.6vw,28px);line-height:1.12;margin:0 0 10px}
  .hero.mob p{font-size:14px;line-height:1.42;margin-bottom:14px}
  .hero.mob .btn{padding:12px 24px;font-size:15px}
  .steps{gap:16px}
  .step{padding:22px 18px}
  .step h3,.svc h3{font-size:18px}
  .svcs{gap:12px}
  .svc{padding:18px 10px}
  .faq-item{padding:16px 14px}
  .faq-item h3{font-size:16px}
  .cta-inner{padding:52px 18px 64px}
  .cta .sub{font-size:15px}
  .addr{font-size:14px;margin-bottom:24px}
  footer{font-size:11.5px;padding:18px 16px;line-height:1.55}
  .office-overlay h2{font-size:22px}
  .office-overlay p{font-size:15px}
}

/* 2026-11-11: keep services card visible at all widths */
@media(max-width:1100px){
  .hero.desk{flex-wrap:wrap;align-content:center;background-position:82% center}
  .hero.desk .hero-card{flex:0 0 100%;width:auto;max-width:400px;margin:24px 0 0;padding:16px 20px}
  .hero.desk .hero-card li{padding:6px 0 6px 24px}
  .hero.desk .hero-card li:before{top:6px}
}