:root{
    color-scheme: light;
    --ink:#14263F;
    --ink-2:#1C324F;
    --ink-soft:#3A4C5A;
    --paper:#FFFFFF;
    --mist:#EEF2F6;
    --mist-2:#E3EAF1;
    --line:#D7DFE8;
    --accent:#1E56A0;
    --accent-deep:#164784;
    --accent-bright:#3E82D6;
    --gold:#F4A521;
    --text:#213040;
    --text-dim:#5A6875;
    --on-ink:#EAF1F8;
    --on-ink-dim:#9CB1C6;
    box-sizing:border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth; scroll-padding-top:76px}
  body{
    margin:0;
    background:var(--paper);
    color:var(--text);
    font-family:"Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size:17px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:"Barlow Condensed", "Barlow", system-ui, sans-serif; font-weight:700; line-height:1.02; letter-spacing:.01em; margin:0}
  p{margin:0 0 1rem}
  a{color:inherit}
  img{max-width:100%; display:block}
  .wrap{width:100%; max-width:1120px; margin:0 auto; padding:0 22px}

  .btn{display:inline-flex; align-items:center; gap:.5rem; font-family:"Barlow",sans-serif; font-weight:600; font-size:1rem; text-decoration:none; padding:.8rem 1.35rem; border-radius:3px; border:2px solid transparent; cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease}
  .btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
  .btn-primary:hover{background:var(--accent-deep); border-color:var(--accent-deep)}
  .btn-ghost{background:transparent; color:var(--on-ink); border-color:rgba(234,241,248,.35)}
  .btn-ghost:hover{border-color:var(--accent-bright); color:var(--accent-bright)}
  .btn svg{width:18px;height:18px;flex:none}

  /* header (light, real logo) */
  header{position:sticky; top:0; z-index:50; background:#fafafa; border-bottom:1px solid var(--line)}
  .bar{display:flex; align-items:center; justify-content:space-between; height:66px}
  .brand{display:flex; align-items:center; text-decoration:none}
  .brand img{height:40px; width:auto}
  nav.main{display:flex; align-items:center; gap:1.6rem}
  nav.main a{color:var(--text-dim); text-decoration:none; font-weight:500; font-size:.98rem}
  nav.main a:hover{color:var(--accent)}
  .header-cta{display:flex; align-items:center; gap:.9rem}
  .callnum{display:inline-flex; align-items:center; gap:.45rem; color:var(--ink); text-decoration:none; font-weight:600}
  .callnum svg{width:17px;height:17px; color:var(--accent)}
  .menu-btn{display:none; background:none; border:0; color:var(--ink); cursor:pointer; padding:6px}
  .menu-btn svg{width:26px;height:26px}

  /* hero */
  .hero{position:relative; background:var(--ink); color:var(--on-ink); overflow:hidden}
  .hero .circuit{position:absolute; inset:0; opacity:.6; pointer-events:none}
  .hero .wrap{position:relative; padding:74px 22px 78px}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
  .eyebrow{display:inline-flex; align-items:center; gap:.5rem; color:var(--accent-bright); font-weight:600; letter-spacing:.02em; margin-bottom:1.1rem; font-size:.98rem}
  .eyebrow::before{display:none}
  .hero h1{font-size:clamp(2.9rem, 6vw, 4.6rem); color:#fff}
  .hero h1 em{font-style:normal; color:var(--accent-bright)}
  .hero .lede{font-size:1.18rem; color:var(--on-ink-dim); max-width:34ch; margin:1.2rem 0 1.8rem}
  .hero-actions{display:flex; flex-wrap:wrap; gap:.8rem}
  .badges{display:flex; flex-wrap:wrap; gap:.5rem .55rem; margin-top:2.2rem}
  .badge{display:inline-flex; align-items:center; gap:.45rem; background:rgba(234,241,248,.06); border:1px solid rgba(234,241,248,.14); padding:.5rem .8rem; border-radius:3px; font-size:.9rem; font-weight:500; color:var(--on-ink)}
  .badge svg{width:16px;height:16px;color:var(--accent-bright)}

  .hero-card{background:var(--ink-2); border:1px solid rgba(234,241,248,.12); border-radius:6px; padding:26px}
  .hero-card h3{font-size:1.5rem; color:#fff; margin-bottom:.2rem}
  .hero-card .sub{color:var(--on-ink-dim); font-size:.96rem; margin-bottom:1.1rem}
  .qf{display:grid; gap:.6rem}
  .qf input,.qf select,.qf textarea{width:100%; font-family:inherit; font-size:.98rem; padding:.7rem .8rem; border-radius:3px; border:1px solid rgba(234,241,248,.18); background:rgba(255,255,255,.04); color:#fff}
  .qf textarea{resize:vertical; min-height:74px}
  .qf input::placeholder,.qf textarea::placeholder{color:#8299ad}
  .qf select{color:#cdd9e6}
  .qf input:focus,.qf select:focus,.qf textarea:focus{outline:2px solid var(--accent-bright); outline-offset:1px; border-color:transparent}
  .qf .btn{width:100%; justify-content:center; margin-top:.2rem}
  .qf .tiny{font-size:.8rem; color:var(--on-ink-dim); text-align:center; margin:.2rem 0 0}

  section{padding:76px 0}
  .sec-head{max-width:660px; margin-bottom:40px}
  .sec-head .eyebrow{color:var(--accent)}
  .sec-head .eyebrow::before{background:var(--accent)}
  h2{font-size:clamp(2.1rem,4vw,2.9rem); color:var(--ink)}
  .sec-head p{color:var(--text-dim); font-size:1.1rem; margin-top:.7rem}

  .strip{background:var(--ink); color:var(--on-ink)}
  .strip .wrap{display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; padding-top:22px; padding-bottom:22px}
  .stat{display:flex; align-items:center; gap:.7rem}
  .stat svg{width:26px;height:26px;color:var(--accent-bright);flex:none}
  .stat b{font-family:"Barlow Condensed",sans-serif; font-size:1.5rem; line-height:1; color:#fff; display:block}
  .stat small{color:var(--on-ink-dim); font-size:.86rem}

  .services{background:var(--paper)}
  .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .svc{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:24px; position:relative; transition:border-color .15s ease, transform .15s ease}
  .svc::before{content:""; position:absolute; left:0; top:22px; width:3px; height:26px; background:var(--accent); border-radius:0 2px 2px 0}
  .svc:hover{border-color:var(--accent); transform:translateY(-2px)}
  .svc .ic{width:40px;height:40px; color:var(--ink); margin-bottom:14px}
  .svc h3{font-size:1.4rem; color:var(--ink); margin-bottom:.35rem; letter-spacing:.015em}
  .svc p{font-size:.98rem; color:var(--text-dim); margin:0}

  .why{background:var(--mist)}
  .why-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
  .why ul{list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:1rem}
  .why li{display:flex; gap:.85rem; align-items:flex-start}
  .why li svg{width:24px;height:24px;color:var(--accent);flex:none;margin-top:2px}
  .why li b{color:var(--ink); font-weight:600}
  .why li span{color:var(--text-dim); font-size:.97rem; display:block}
  .why-panel{background:var(--ink); color:var(--on-ink); border-radius:8px; padding:34px}
  .why-panel h3{color:#fff; font-size:1.9rem; margin-bottom:.6rem}
  .why-panel p{color:var(--on-ink-dim)}
  .why-panel .btn{margin-top:.6rem}

  .gal-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:28px}
  .ig-link{display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); text-decoration:none; font-weight:600; font-size:.98rem}
  .ig-link svg{width:20px;height:20px}
  .ig-link:hover{color:var(--accent-deep)}
  .gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
  .shot{position:relative; aspect-ratio:4/3; border-radius:6px; overflow:hidden; background:linear-gradient(135deg,var(--mist-2),var(--mist)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center}
  .shot svg{width:44px;height:44px;color:#AEBECE}
  .shot span{position:absolute; bottom:8px; left:8px; font-size:.72rem; color:var(--text-dim); background:rgba(255,255,255,.85); padding:.15rem .5rem; border-radius:3px; font-weight:500}

  .reviews{background:var(--mist)}
  .rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
  .rev{background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:24px}
  .stars{display:flex; gap:2px; margin-bottom:.8rem}
  .stars svg{width:18px;height:18px;color:var(--gold)}
  .rev p{font-size:1rem; color:var(--text); margin-bottom:1rem}
  .rev .who{display:flex; align-items:center; gap:.7rem}
  .rev .av{width:38px;height:38px;border-radius:50%; background:var(--ink); color:var(--accent-bright); display:flex; align-items:center; justify-content:center; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.1rem;flex:none}
  .rev .who b{display:block; color:var(--ink); font-size:.98rem}
  .rev .who small{color:var(--text-dim); font-size:.85rem}

  .areas .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:44px; align-items:center}
  .area-list{display:flex; flex-wrap:wrap; gap:.5rem}
  .chip{border:1px solid var(--line); background:var(--paper); padding:.45rem .85rem; border-radius:40px; font-size:.94rem; color:var(--ink); font-weight:500}
  .chip.more{background:var(--accent); color:#fff; border-color:var(--accent)}

  .contact{background:var(--ink); color:var(--on-ink)}
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start}
  .contact h2{color:#fff}
  .contact .lede{color:var(--on-ink-dim); font-size:1.1rem; margin:.7rem 0 1.6rem}
  .contact-rows{display:grid; gap:1rem; margin-top:1.4rem}
  .crow{display:flex; align-items:center; gap:.9rem}
  .crow svg{width:22px;height:22px;color:var(--accent-bright);flex:none}
  .crow b{color:#fff; display:block; font-size:1.05rem}
  .crow small{color:var(--on-ink-dim)}
  .crow a{text-decoration:none}
  .form-card{background:var(--paper); border-radius:8px; padding:28px}
  .form-card h3{color:var(--ink); font-size:1.6rem; margin-bottom:.3rem}
  .form-card .sub{color:var(--text-dim); font-size:.96rem; margin-bottom:1.2rem}
  .form{display:grid; gap:.7rem}
  .form .row2{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
  .form input,.form select,.form textarea{width:100%; font-family:inherit; font-size:1rem; padding:.75rem .85rem; border:1px solid var(--line); border-radius:3px; background:var(--paper); color:var(--text)}
  .form textarea{resize:vertical; min-height:96px}
  .form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
  .form label{font-size:.82rem; color:var(--text-dim); font-weight:600; margin-bottom:-.35rem}
  .form .btn{justify-content:center; margin-top:.3rem}
  .form .tiny{font-size:.8rem; color:var(--text-dim); text-align:center; margin:.1rem 0 0}

  footer{background:#0E1B2C; color:var(--on-ink-dim); padding:48px 0 30px}
  .foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:32px}
  .foot-brand b{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.6rem; letter-spacing:.02em; color:#fff}
  .foot-brand b span{color:var(--accent-bright)}
  footer p{font-size:.94rem; margin:.8rem 0 0; max-width:34ch}
  footer h4{font-family:"Barlow Condensed",sans-serif; color:#fff; font-size:1.15rem; letter-spacing:.03em; margin:0 0 .8rem; font-weight:600}
  footer ul{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
  footer ul a{color:var(--on-ink-dim); text-decoration:none; font-size:.94rem}
  footer ul a:hover{color:var(--accent-bright)}
  .foot-bot{border-top:1px solid rgba(234,241,248,.10); padding-top:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; font-size:.85rem; color:#6C7E8B}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr; gap:34px}
    .svc-grid,.rev-grid{grid-template-columns:1fr 1fr}
    .why-grid,.contact-grid,.areas .wrap{grid-template-columns:1fr; gap:32px}
    nav.main{display:none}
    .callnum span{display:none}
    .menu-btn{display:inline-flex}
  }
  @media (max-width:620px){
    body{font-size:16px}
    .svc-grid,.rev-grid{grid-template-columns:1fr}
    .gal-grid{grid-template-columns:1fr 1fr}
    .form .row2{grid-template-columns:1fr}
    .strip .wrap{gap:18px}
    .stat{width:44%}
    section{padding:56px 0}
  }
  .drawer{display:none}
  @media (max-width:900px){
    .drawer{display:block; background:#fff; border-bottom:1px solid var(--line)}
    .drawer nav{display:flex; flex-direction:column; padding:8px 22px 16px}
    .drawer nav a{padding:.7rem 0; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); font-weight:500}
    .drawer[hidden]{display:none}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto!important}}

/* Prominent navigation */
html{scroll-padding-top:84px}
header{box-shadow:0 2px 12px rgba(20,38,63,.08)}
.bar{height:74px}
.brand{cursor:pointer}
.brand img{height:46px}
nav.main{gap:.35rem}
nav.main a{color:var(--ink); font-weight:600; font-size:1.02rem; padding:.55rem .85rem; border-radius:4px; transition:background .15s ease, color .15s ease}
nav.main a:hover{background:var(--mist); color:var(--accent)}
nav.main a.active{background:var(--accent); color:#fff}
.menu-btn{align-items:center; gap:.45rem; border:1px solid var(--line); border-radius:4px; padding:.45rem .75rem; font-family:inherit; font-weight:600; font-size:.95rem}
.menu-btn svg{width:22px; height:22px}
.drawer nav a.active{color:var(--accent)}

/* Form fields and dropdowns match the site */
.qf .row2{display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.qf select{appearance:none; -webkit-appearance:none; -moz-appearance:none; font-family:inherit; cursor:pointer; padding-right:2.4rem; background-color:rgba(255,255,255,.04); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CB1C6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; background-size:14px}
.qf select option{color:var(--text); background:#fff; font-family:"Barlow", sans-serif}
.form-card .btn{margin-top:.4rem}
@media (max-width:420px){ .qf .row2{grid-template-columns:1fr} }

/* Privacy page */
.legal{padding:64px 0 80px}
.legal .wrap{max-width:780px}
.legal .eyebrow{color:var(--accent)}
.legal h1{font-size:clamp(2.4rem,5vw,3.4rem); color:var(--ink); margin-bottom:.4rem}
.legal .updated{color:var(--text-dim); font-size:.95rem; margin-bottom:2rem}
.legal h2{font-size:1.7rem; margin:2.2rem 0 .7rem}
.legal ul{padding-left:1.2rem; margin:0 0 1rem}
.legal li{margin-bottom:.35rem}
.legal a{color:var(--accent); font-weight:600}
.foot-bot a{color:inherit; text-decoration:underline; margin-left:.5rem}
.qf .tiny a{color:var(--on-ink); text-decoration:underline}

/* ===== Layout v2: Paolo's own layout ===== */
.hero-v2 .wrap{padding:84px 22px 150px}
.hero-main{max-width:780px}
.hero-v2 h1{font-size:clamp(3rem,6.4vw,5.2rem)}
.hero-v2 .lede{max-width:46ch}
.hero-stats{display:grid; grid-template-columns:repeat(4,1fr); margin-top:56px; border-top:1px solid rgba(234,241,248,.14)}
.hero-stats .stat{width:auto; padding:22px 20px 0 0}
.hero-stats .stat + .stat{padding-left:22px; border-left:1px solid rgba(234,241,248,.14)}

.quote-wrap{position:relative; z-index:2; margin-top:-96px}
.quote-strip{background:#fff; border-radius:8px; box-shadow:0 18px 50px rgba(20,38,63,.18); padding:28px; display:grid; grid-template-columns:230px 1fr; gap:28px; align-items:start}
.quote-head h3{font-size:1.7rem; color:var(--ink); margin-bottom:.3rem}
.quote-head .sub{color:var(--text-dim); font-size:.95rem; margin:0}
.quote-strip .qf{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem}
.quote-strip .qf .row2{display:contents}
.quote-strip .qf input,.quote-strip .qf select,.quote-strip .qf textarea{background-color:#fff; color:var(--text); border:1px solid var(--line); min-height:50px}
.quote-strip .qf input::placeholder,.quote-strip .qf textarea::placeholder{color:#8593a1}
.quote-strip .qf select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A6875' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.quote-strip .qf input:focus,.quote-strip .qf select:focus,.quote-strip .qf textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.quote-strip .qf textarea{grid-column:span 2; height:50px; resize:vertical}
.quote-strip .qf .btn{margin:0; min-height:50px}
.quote-strip .qf .tiny{grid-column:1/-1; text-align:left; color:var(--text-dim); margin:0}
.quote-strip .qf .tiny a{color:var(--accent)}

.svc-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start}
.svc-intro{position:sticky; top:110px}
.svc-intro p{color:var(--text-dim); font-size:1.08rem; margin-top:.7rem}
.svc-intro .btn{margin-top:.4rem}
.svc-list{border-top:1px solid var(--line)}
.svc-row{display:grid; grid-template-columns:52px 1fr; gap:18px; padding:24px 0; border-bottom:1px solid var(--line)}
.svc-row .ic{width:40px; height:40px; color:var(--accent)}
.svc-row h3{font-size:1.45rem; color:var(--ink); margin-bottom:.25rem}
.svc-row p{margin:0; color:var(--text-dim)}

.gal-grid.mosaic{grid-template-columns:repeat(3,1fr); grid-auto-rows:210px}
.gal-grid.mosaic .shot{aspect-ratio:auto; height:100%}
.gal-grid.mosaic .shot:first-child{grid-column:span 2; grid-row:span 2}
.gal-grid.mosaic .shot img{width:100%; height:100%; object-fit:cover}

.reviews-v2{background:var(--ink); color:var(--on-ink)}
.reviews-v2 .sec-head .eyebrow{color:var(--accent-bright)}
.reviews-v2 h2{color:#fff}
.reviews-v2 .sec-head p{color:var(--on-ink-dim)}
.reviews-v2 .sec-head p a{color:var(--accent-bright) !important}
.rev-feature{margin:0 0 40px; padding:0 0 40px; border-bottom:1px solid rgba(234,241,248,.14); max-width:900px}
.rev-feature .stars{display:flex; gap:3px}
.rev-feature .stars svg{width:22px; height:22px; color:var(--gold)}
.rev-feature blockquote{margin:.8rem 0 1.4rem; font-family:"Barlow Condensed",sans-serif; font-weight:600; font-size:clamp(1.7rem,3.2vw,2.5rem); line-height:1.2; color:#fff}
.rev-feature .who{display:flex; align-items:center; gap:.7rem}
.rev-feature .av,.reviews-v2 .rev .av{width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.15rem; flex:none}
.rev-feature .who b{display:block; color:#fff}
.rev-feature .who small{color:var(--on-ink-dim)}
.rev-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:28px}
.reviews-v2 .rev{background:transparent; border:0; border-left:2px solid var(--accent-bright); border-radius:0; padding:4px 0 4px 20px}
.reviews-v2 .rev p{color:var(--on-ink)}
.reviews-v2 .rev .who b{color:#fff}
.reviews-v2 .rev .who small{color:var(--on-ink-dim)}

.why-v2{background:var(--mist)}
.why-cols{display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.why-item{border-top:3px solid var(--accent); padding-top:20px}
.why-item svg{width:30px; height:30px; color:var(--accent); margin-bottom:12px; display:block}
.why-item b{display:block; font-family:"Barlow Condensed",sans-serif; font-size:1.35rem; color:var(--ink); margin-bottom:.35rem; font-weight:700}
.why-item span{color:var(--text-dim); font-size:.98rem; display:block}

.cta-band{background:var(--accent); color:#fff}
.cta-band .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-top:40px; padding-bottom:40px}
.cta-band h3{font-size:2rem; color:#fff; margin-bottom:.3rem}
.cta-band p{margin:0; color:rgba(255,255,255,.85); max-width:56ch}
.btn-light{background:#fff; color:var(--accent); border-color:#fff}
.btn-light:hover{background:var(--mist); border-color:var(--mist)}

.contact-v2 .contact-grid{grid-template-columns:1fr 1fr; gap:64px; align-items:start}
.areas-panel{background:var(--ink-2); border:1px solid rgba(234,241,248,.12); border-radius:8px; padding:30px}
.areas-panel h3{color:#fff; font-size:1.9rem; margin-bottom:.4rem}
.areas-panel p{color:var(--on-ink-dim)}
.areas-panel .chip{background:transparent; border-color:rgba(234,241,248,.22); color:var(--on-ink)}
.areas-panel .chip.more{background:var(--accent); border-color:var(--accent); color:#fff}

@media (max-width:1000px){
  .quote-strip{grid-template-columns:1fr; gap:18px}
}
@media (max-width:900px){
  .svc-split{grid-template-columns:1fr; gap:28px}
  .svc-intro{position:static}
  .why-cols{grid-template-columns:1fr 1fr}
  .contact-v2 .contact-grid{grid-template-columns:1fr; gap:36px}
}
@media (max-width:760px){
  .hero-v2 .wrap{padding:56px 22px 120px}
  .hero-stats{grid-template-columns:1fr 1fr; row-gap:18px}
  .hero-stats .stat,.hero-stats .stat + .stat{padding:18px 0 0; border-left:0}
  .quote-strip{padding:22px}
  .quote-strip .qf{grid-template-columns:1fr 1fr}
  .quote-strip .qf input[type=tel],.quote-strip .qf input[type=email],.quote-strip .qf select,.quote-strip .qf textarea,.quote-strip .qf .btn{grid-column:1/-1}
  .quote-strip .qf textarea{height:auto; min-height:96px}
  .gal-grid.mosaic{grid-template-columns:1fr 1fr; grid-auto-rows:150px}
  .gal-grid.mosaic .shot:first-child{grid-column:span 2; grid-row:span 1}
}
@media (max-width:520px){
  .why-cols{grid-template-columns:1fr}
  .quote-strip .qf input{grid-column:1/-1}
}
footer ul a,.crow b,.crow a{overflow-wrap:anywhere}
@media (max-width:760px){
  .foot-grid{grid-template-columns:1fr 1fr; gap:28px}
  .foot-grid > div:first-child{grid-column:1/-1}
  .foot-bot{flex-direction:column; align-items:flex-start}
}
@media (max-width:420px){
  .foot-grid{grid-template-columns:1fr}
}

/* ===== Reviews: Google-style summary ===== */
.rev-layout{display:grid; grid-template-columns:300px 1fr; gap:32px; align-items:start}
.rev-summary{position:sticky; top:110px; background:var(--ink-2); border:1px solid rgba(234,241,248,.12); border-radius:8px; padding:32px 28px; text-align:center}
.rev-src{display:block; color:var(--on-ink-dim); font-weight:600; font-size:.95rem}
.rev-score{font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:5.2rem; line-height:1; color:#fff; margin:.4rem 0 .5rem}
.rev-summary .stars{display:flex; justify-content:center; gap:4px}
.rev-summary .stars svg{width:26px; height:26px; color:var(--gold)}
.rev-count{color:var(--on-ink-dim); margin:.8rem 0 1.4rem}
.rev-summary .btn{width:100%; justify-content:center}
.rev-list{display:grid; gap:16px}
.g-rev{background:#fff; border-radius:8px; padding:24px 26px; color:var(--text)}
.g-rev-top{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:.8rem}
.g-rev .who{display:flex; align-items:center; gap:.75rem}
.g-rev .av{width:42px; height:42px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:1.15rem; flex:none}
.g-rev .who b{display:block; color:var(--ink); font-size:1rem}
.g-rev .who small{color:var(--text-dim); font-size:.86rem}
.g-rev .stars{display:flex; gap:2px; flex:none}
.g-rev .stars svg{width:17px; height:17px; color:var(--gold)}
.g-rev p{margin:0; color:var(--text); font-size:1.02rem}
@media (max-width:900px){
  .rev-layout{grid-template-columns:1fr}
  .rev-summary{position:static}
}
@media (max-width:480px){
  .g-rev-top{flex-direction:column; align-items:flex-start; gap:8px}
}

/* ===== Motion: gentle reveals and hover touches ===== */
.rev-summary .stars{margin-bottom:.2rem}
.svc-row .ic{transition:transform .25s ease}
.svc-row:hover .ic{transform:translateX(4px)}
.g-rev{transition:transform .25s ease, box-shadow .25s ease}
.g-rev:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.28)}
.shot img{transition:transform .5s ease}
.shot:hover img{transform:scale(1.04)}
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important}
}

/* ===== Reviews: heading on the left, no rating score ===== */
.rev-layout{grid-template-columns:.85fr 1.15fr; gap:64px}
.rev-intro{position:sticky; top:110px}
.rev-intro .eyebrow{color:var(--accent-bright)}
.rev-intro h2{color:#fff}
.rev-intro p{color:var(--on-ink-dim); font-size:1.08rem; margin-top:.7rem}
@media (max-width:900px){
  .rev-layout{grid-template-columns:1fr; gap:28px}
  .rev-intro{position:static}
}

/* ===== Quote form: sending states ===== */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn:disabled{opacity:.7; cursor:wait}
.quote-strip .qf .sent-note{grid-column:1/-1; margin:0; padding:.8rem 1rem; border-radius:4px; font-size:.97rem; line-height:1.5}
.sent-note.is-ok{background:#E7F4EC; color:#1D5A35}
.sent-note.is-error{background:#FCEBEB; color:#8A1F1F}
.sent-note a{color:inherit; font-weight:600; text-decoration:underline; overflow-wrap:anywhere}

/* Required service dropdown: grey until chosen */
.quote-strip .qf select:invalid{color:#8593a1}
.quote-strip .qf select option{color:var(--text)}

/* Design pass */
.steps{list-style:none; margin:0; padding:0}
.how .why-item{display:block}
.header-cta .btn{white-space:nowrap}
@media (max-width:480px){ .header-cta .opt-word{display:none} }
.how .why-item .num{display:block; font-family:"Barlow Condensed",sans-serif; font-weight:700; font-size:2.6rem; line-height:1; color:var(--accent); margin-bottom:14px}
@media (min-width:1001px){
  .quote-strip .qf{grid-template-areas:"fn sn ph em" "msg msg msg svc" "msg msg msg btn"}
  .quote-strip .qf [name=firstname]{grid-area:fn}
  .quote-strip .qf [name=surname]{grid-area:sn}
  .quote-strip .qf [name=phone]{grid-area:ph}
  .quote-strip .qf [name=email]{grid-area:em}
  .quote-strip .qf select{grid-area:svc}
  .quote-strip .qf textarea{grid-area:msg; height:auto; min-height:0; resize:none}
  .quote-strip .qf button[type=submit]{grid-area:btn}
}

/* Nav landing fit: sections sized to fit a laptop screen when you jump to them */
@media (min-width:901px){
  .gal-grid.mosaic{grid-auto-rows:clamp(130px, calc((100vh - 300px) / 3), 210px)}
  .rev-layout{grid-template-columns:.7fr 1.3fr; gap:56px}
  .rev-list{gap:12px}
  .g-rev{padding:20px 24px}
  .g-rev-top{margin-bottom:.6rem}
  .g-rev p{line-height:1.55}
}

/* Quote focus: amber is kept for the quote action only, and the form card leads */
:root{--quote:#F4A521; --quote-deep:#E2930F}
.qf button[type=submit]{background:var(--quote); border-color:var(--quote); color:var(--ink)}
.qf button[type=submit]:hover{background:var(--quote-deep); border-color:var(--quote-deep); color:var(--ink)}
.qf button[type=submit]:focus-visible{outline:3px solid #fff; outline-offset:2px; box-shadow:0 0 0 6px var(--ink)}
.qf button[type=submit]{font-weight:700}
.quote-strip{padding:0; gap:0; overflow:hidden; align-items:stretch; box-shadow:0 24px 60px rgba(20,38,63,.28)}
.quote-head{background:var(--accent); padding:30px 28px; display:flex; flex-direction:column}
.quote-head h3{color:#fff; font-size:2rem; line-height:1.05; margin-bottom:.5rem}
.quote-head .sub{color:#D6E4F5; font-size:1rem}
.quote-call{margin-top:auto; padding-top:22px; color:#D6E4F5; text-decoration:none; font-size:.95rem}
.quote-call b{display:block; color:#fff; font-family:"Barlow Condensed",sans-serif; font-size:1.45rem; font-weight:700; letter-spacing:.01em}
.quote-call:hover b{text-decoration:underline}
.quote-strip .qf{padding:28px}
.contact-quote{margin:0 0 1.8rem}
@media (max-width:1000px){
  .quote-head{padding:24px 22px}
  .quote-call{margin-top:0; padding-top:14px}
}
@media (max-width:760px){
  .quote-strip{padding:0}
  .quote-strip .qf{padding:22px}
}

/* Areas section */
.areas-v2{background:var(--mist)}
.areas-split{display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center}
.areas-intro p{color:var(--text-dim); font-size:1.08rem; margin-top:.7rem; max-width:40ch}
.areas-v2 .area-list{gap:.6rem}
.areas-v2 .chip{background:var(--paper); border-color:var(--line); color:var(--ink); font-size:1rem; padding:.55rem 1rem}
.areas-v2 .chip.more{background:var(--ink); border-color:var(--ink); color:#fff}
.contact-v2 .contact-rows{margin-top:.4rem}
@media (max-width:900px){
  .areas-split{grid-template-columns:1fr; gap:24px}
}

/* Logo file is now cropped tight */
.brand img{height:50px}
@media (max-width:480px){ .brand img{height:42px} }

/* Form checks: each field sits in a .field wrapper with its own error line */
.qf .field{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.qf .field-error{font-size:.82rem; color:#B3261E; line-height:1.35; text-align:left}
.qf .field-error:empty{display:none}
.quote-strip .qf .is-invalid{border-color:#D93025 !important; background-color:#FDF3F2 !important}
.quote-strip .qf .is-invalid:focus{outline-color:#D93025}
.quote-strip .qf .field textarea{resize:vertical}
@media (min-width:1001px){
  .quote-strip .qf{grid-template-areas:"fn sn ph em" "msg msg msg pc" "msg msg msg svc" "msg msg msg btn"; align-items:start}
  .quote-strip .qf .f-fn{grid-area:fn}
  .quote-strip .qf .f-sn{grid-area:sn}
  .quote-strip .qf .f-ph{grid-area:ph}
  .quote-strip .qf .f-em{grid-area:em}
  .quote-strip .qf .f-pc{grid-area:pc}
  .quote-strip .qf .f-svc{grid-area:svc}
  .quote-strip .qf .f-msg{grid-area:msg; align-self:stretch}
  .quote-strip .qf .f-msg textarea{flex:1; height:auto; min-height:150px; resize:none}
  .quote-strip .qf button[type=submit]{grid-area:btn; align-self:start}
}
@media (max-width:1000px){
  .quote-strip .qf{grid-template-columns:1fr 1fr; grid-template-areas:none}
  .quote-strip .qf .field, .quote-strip .qf .btn{grid-column:1/-1}
  .quote-strip .qf .f-fn, .quote-strip .qf .f-sn, .quote-strip .qf .f-pc, .quote-strip .qf .f-svc{grid-column:auto}
  .quote-strip .qf .f-msg textarea{min-height:110px}
}
@media (max-width:420px){
  .quote-strip .qf .f-fn, .quote-strip .qf .f-sn, .quote-strip .qf .f-pc, .quote-strip .qf .f-svc{grid-column:1/-1}
}

/* Gallery on phones: one swipeable row instead of a tall stack */
@media (max-width:760px){
  .gal-grid.mosaic{display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin:0 -22px; padding:0 22px 6px; scroll-padding-left:22px; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .gal-grid.mosaic::-webkit-scrollbar{display:none}
  .gal-grid.mosaic .shot, .gal-grid.mosaic .shot:first-child{flex:0 0 80%; height:auto; aspect-ratio:4/3; scroll-snap-align:start; grid-column:auto; grid-row:auto}
}