:root{--green:#12320c;--green2:#1b4212;--white:#fff;--black:#11130f;--light:#f5f6f2;--muted:#60675e;--line:#dce1d7;--sans:Arial,Helvetica,sans-serif;--cond:"Arial Narrow",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--black);font-family:var(--sans);line-height:1.65;background:#fff}a{color:inherit}.header{height:92px;padding:10px 6%;display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:50;border-bottom:4px solid var(--green)}.logo-link{display:flex;align-items:center;max-width:370px}.logo{display:block;width:100%;max-width:330px;max-height:68px;object-fit:contain;object-position:left center}.nav{display:flex;gap:28px;align-items:center}.nav a{text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:800;letter-spacing:.5px}.nav a:hover{color:var(--green2)}.nav .nav-contact{background:var(--green);color:#fff;padding:13px 19px}.menu-toggle{display:none;background:none;border:0;font-size:27px;color:var(--green)}.hero{position:relative;overflow:hidden;background:var(--green);color:#fff;min-height:600px;display:flex;align-items:center}.hero:before{content:"";position:absolute;right:0;top:0;width:0;height:0;background:transparent}.hero:after{content:"";position:absolute;right:0;top:0;width:0;height:0;background:transparent}.hero-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at 16% 15%,rgba(255,255,255,.07),transparent 50%)}.hero-inner{position:relative;z-index:2;width:100%;padding:78px 8%;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:6%}.hero-copy{max-width:700px}.eyebrow,.section-label{font-size:11px;font-weight:800;letter-spacing:2.3px;text-transform:uppercase}.eyebrow{color:#d9e6d3;margin:0 0 18px}.hero h1{font-size:clamp(43px,5.3vw,70px);line-height:1.06;letter-spacing:-1.5px;margin:0 0 24px;text-transform:uppercase;font-weight:900}.hero h1 span{color:#dfe8da}.hero-lead{font-size:17px;line-height:1.75;max-width:570px;color:#f0f4ed}.values{font-size:12px;letter-spacing:2px;font-weight:800;margin:25px 0 30px}.values i,.panel-values i{font-style:normal;color:#a7c39b;padding:0 6px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;font-size:12px;font-weight:800;letter-spacing:.5px;text-decoration:none;text-transform:uppercase;transition:transform .2s,background .2s;border:2px solid transparent}.button:hover{transform:translateY(-2px)}.button-white{background:#fff;color:var(--green)}.button-outline{border-color:#dce7d7;color:#fff}.hero-card{position:relative;z-index:3;justify-self:center;background:#fff;color:var(--green);padding:28px 25px 25px;width:min(100%,280px);box-shadow:0 14px 45px #00150026;text-align:center;border-top:8px solid var(--green)}.house-icon{width:100px;margin:0 auto 16px}.house-icon svg{display:block;width:100%}.hero-card-rule{height:4px;background:var(--green);margin:0 0 14px}.hero-card p{font-size:21px;line-height:1.25;font-weight:900;text-transform:uppercase;margin:0 0 10px}.hero-card p strong{font-size:25px}.hero-card small{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:#66735f}.hero-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;background:#fff;color:var(--green);padding:13px 7%;font-size:10px;font-weight:900;letter-spacing:2px;text-align:center}.hero-bottom span{padding:0 10px;color:#83977b}.section{padding:95px 8%}.intro{background:#f4f6f1;border-bottom:1px solid #e3e8df}.section-label{color:var(--green2);margin-bottom:18px}.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:start}.intro h2,.section h2,.trade-copy h2,.contact h2{font-size:clamp(34px,4vw,49px);line-height:1.13;letter-spacing:-.8px;text-transform:uppercase;margin:0;font-weight:900}.intro h2 span,.contact h2 span,.trade-copy h2 span{color:var(--green2)}.intro-text{font-size:15px;color:#4f574d}.intro-text p:first-child{margin-top:0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px}.section-heading h2{margin-top:8px}.section-heading>p{max-width:365px;font-size:14px;color:var(--muted);margin:0 0 5px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--green);border-left:1px solid var(--line)}.service{padding:25px 22px 30px;min-height:260px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .2s}.service:hover{background:#f4f6f1}.service-top{display:flex;justify-content:space-between;align-items:center;color:var(--green);font-size:12px;font-weight:900}.service-symbol{font-size:31px}.service h3{font-size:20px;line-height:1.25;text-transform:uppercase;margin:20px 0 12px;font-weight:900}.service p{font-size:13px;color:var(--muted);margin:0}.service-promise{display:flex;align-items:center;gap:18px;background:var(--green);color:#fff;padding:19px 24px;margin-top:25px}.promise-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid #fff;border-radius:50%;font-size:19px;flex-shrink:0}.service-promise p{margin:0;font-size:14px}.service-promise p span{font-size:12px;color:#dbe6d5}.trade{display:grid;grid-template-columns:1fr 1fr;background:var(--green);color:#fff}.trade-art{padding:55px 9%;display:flex;align-items:center;justify-content:center;min-height:460px;background:linear-gradient(135deg,#0d2808,#1d4613)}.trade-art-inner{border:3px solid #fff;width:100%;padding:34px 28px;text-align:center;outline:1px solid #ffffff66;outline-offset:9px}.trade-small,.trade-bottom{font-size:10px;letter-spacing:2px;font-weight:900}.trade-line{height:3px;background:#fff;margin:22px auto;width:85%}.trade-line.short{width:45%}.trade-big{font-size:clamp(30px,3.4vw,47px);line-height:1.15;font-weight:900;letter-spacing:-1px}.trade-big em{font-style:normal;color:#d5e3ce}.trade-copy{padding:75px clamp(35px,7vw,95px);align-self:center}.trade-copy .section-label{color:#d5e3ce}.trade-copy h2{font-size:clamp(32px,3.4vw,44px)}.trade-copy h2 span{color:#d5e3ce}.trade-copy>p{font-size:14px;color:#e0e8dc;margin:22px 0}.trade-copy ul{list-style:none;padding:0;margin:0 0 25px}.trade-copy li{padding:9px 0;border-bottom:1px solid #ffffff30;font-size:13px}.trade-copy li:before{content:"✓";font-weight:bold;margin-right:12px;color:#d5e3ce}.button-green{background:#fff;color:var(--green)}.process{background:#f4f6f1}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:35px}.steps article{border-top:3px solid var(--green);padding:22px 22px 0 0}.steps article>span{font-size:32px;font-weight:900;color:var(--green);display:block;margin-bottom:18px}.steps h3{font-size:19px;text-transform:uppercase;margin:0 0 10px}.steps p{font-size:13px;color:var(--muted);margin:0}.promise{background:#fff;padding:72px 8%;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.promise h2{font-size:clamp(31px,4.2vw,50px);font-weight:900;text-transform:uppercase;line-height:1.2;margin:0}.promise h2 span{color:var(--green2)}.promise p{max-width:600px;margin:15px auto 0;color:var(--muted);font-size:14px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:10%;align-items:center}.contact-copy h2{margin-bottom:20px}.contact-copy>p{font-size:14px;color:var(--muted);max-width:450px}.contact-main-number,.contact-secondary-number,.contact-email{display:block;text-decoration:none;font-weight:900}.contact-main-number{font-size:clamp(24px,3vw,34px);color:var(--green);margin-top:27px}.contact-main-number span{font-size:18px}.contact-secondary-number{font-size:18px;margin-top:6px}.contact-email{font-size:15px;margin-top:10px;color:var(--green2)}.address{margin-top:25px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:#535a51}.contact-panel{background:var(--green);color:#fff;padding:38px 34px;box-shadow:12px 12px 0 #e6eadf}.panel-head{font-size:30px;font-weight:900;letter-spacing:1px;line-height:1.15}.panel-head small{display:block;font-size:12px;letter-spacing:1.4px;margin-top:5px}.panel-divider{height:3px;background:#fff;margin:25px 0}.panel-line{display:flex;gap:15px;align-items:center;font-weight:800;font-size:14px}.panel-line span{display:inline-grid;place-items:center;border:1px solid #ffffff8a;width:32px;height:32px;font-size:16px}.panel-values{border-top:1px solid #ffffff60;margin-top:26px;padding-top:18px;font-size:10px;letter-spacing:1.3px;font-weight:900}.footer{background:#0b2207;color:#fff;padding:30px 8% 20px}.footer-brand{display:flex;align-items:center;gap:15px;text-decoration:none;font-size:18px;font-weight:900;line-height:1.1}.footer-brand img{width:120px;height:55px;object-fit:contain;background:#fff}.footer-brand small{font-size:9px;letter-spacing:1px}.footer>p{font-size:11px;letter-spacing:1px;color:#d8e3d2}.footer-bottom{border-top:1px solid #ffffff40;margin-top:20px;padding-top:15px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:#c4d0be}.footer-bottom a{color:#fff;text-decoration:none;margin-left:18px}
@media(max-width:950px){.header{padding:10px 4%}.logo-link{max-width:300px}.nav{gap:15px}.nav a{font-size:10px}.hero-inner{padding:70px 6%;grid-template-columns:1fr .55fr}.hero-card{padding:22px 17px}.section{padding:75px 6%}.service-grid{grid-template-columns:repeat(2,1fr)}.trade-copy{padding:55px 6%}}
@media(max-width:650px){.header{height:76px;padding:8px 5%;border-bottom-width:3px}.logo-link{max-width:260px}.logo{max-height:57px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:73px;left:0;right:0;background:#fff;padding:15px 5% 20px;box-shadow:0 10px 20px #0001;flex-direction:column;align-items:stretch;gap:0}.nav.open{display:flex}.nav a{font-size:12px;padding:13px 0}.nav .nav-contact{text-align:center;padding:13px;margin-top:7px}.hero{min-height:620px}.hero:before{right:-85%;width:110%;opacity:.08}.hero-inner{grid-template-columns:1fr;padding:60px 6% 78px;gap:35px}.hero h1{font-size:clamp(38px,10vw,54px)}.hero-lead{font-size:15px}.hero-card{display:none}.hero-bottom{font-size:8px;letter-spacing:1px;padding:12px 5%}.section{padding:62px 6%}.intro-grid{grid-template-columns:1fr;gap:20px}.intro h2,.section h2,.contact h2{font-size:35px}.section-heading{display:block}.section-heading>p{margin-top:15px}.service-grid{grid-template-columns:1fr}.service{min-height:0;padding:23px}.service h3{margin-top:10px}.trade{grid-template-columns:1fr}.trade-art{min-height:300px;padding:38px 9%}.trade-copy{padding:48px 6%}.trade-copy h2{font-size:34px}.steps{grid-template-columns:1fr;gap:25px}.steps article{padding-top:16px}.steps article>span{margin-bottom:8px}.promise{padding:55px 6%}.promise h2{font-size:32px}.contact{grid-template-columns:1fr;gap:35px}.contact-panel{padding:30px 23px;box-shadow:7px 7px 0 #e6eadf}.panel-head{font-size:25px}.footer{padding:25px 6% 18px}.footer-bottom{flex-direction:column;gap:10px}.footer-bottom a{margin:0 18px 0 0}}

/* Mobile typography and brand refinements */
html,body{max-width:100%;overflow-x:hidden}body{overflow-wrap:normal;word-break:normal;hyphens:none}h1,h2,h3,p,a,li,span,strong,small{word-break:normal;overflow-wrap:break-word;hyphens:none}.hero h1,.intro h2,.section h2,.trade-copy h2,.contact h2,.promise h2{text-wrap:balance}.values,.panel-values,.hero-bottom{overflow-wrap:normal;word-break:keep-all}.promise .cities{font-size:14px;font-weight:800;line-height:2;letter-spacing:.5px}.promise-divider{height:3px;max-width:180px;margin:28px auto;background:var(--green)}.promise .promise-values{font-size:clamp(26px,3.5vw,42px);margin-top:0}.contact-main-number,.contact-secondary-number,.contact-email{overflow-wrap:anywhere}
@media(max-width:650px){.header{padding-left:4%;padding-right:4%}.logo-link{max-width:min(76vw,260px);min-width:0}.nav{max-width:100vw}.hero-inner{padding:48px 6% 72px}.hero h1{font-size:clamp(32px,8.8vw,48px);letter-spacing:-.5px;line-height:1.12}.hero-lead{font-size:15px;line-height:1.65}.values{font-size:10px;letter-spacing:1px;line-height:1.9}.hero-actions{gap:10px}.button{padding:13px 14px;font-size:11px}.section-heading h2,.intro h2,.section h2,.contact h2{font-size:clamp(28px,7.7vw,36px);line-height:1.18}.promise .cities{font-size:13px;line-height:2.1}.hero-bottom{font-size:8px;letter-spacing:.6px}.footer-bottom{overflow-wrap:anywhere}}

/* Version 3: improved readability and cleaner title section */
.hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 900px; }
.hero h1 .headline-one-line { white-space: nowrap; font-size: clamp(25px, 5.2vw, 70px); letter-spacing: -1.2px; }
.hero-card { display: none !important; }
.eyebrow, .section-label { font-size: 13px; letter-spacing: 1.7px; }
.hero-lead { font-size: 18px; }
.values { font-size: 14px; letter-spacing: 1.5px; }
.hero-bottom { font-size: 12px; letter-spacing: 1.5px; }
.nav a { font-size: 13px; }
.service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
.section-heading > p, .contact-copy > p, .address, .footer > p,
.footer-bottom, .panel-line, .panel-head small, .trade-small, .trade-bottom,
.promise p { font-size: 15px; }
.service-top { font-size: 14px; }
.service-promise p { font-size: 16px; }
.service-promise p span { font-size: 14px; }
.contact-email { font-size: 17px; }
.panel-values { font-size: 12px; letter-spacing: 1.1px; }
.footer-brand small { font-size: 11px; }
@media(max-width:650px) {
  .hero h1 .headline-one-line { font-size: clamp(21px, 7vw, 38px); letter-spacing: -.6px; }
  .hero h1 { font-size: clamp(31px, 8.5vw, 46px); }
  .hero-lead { font-size: 16px; }
  .eyebrow, .section-label { font-size: 12px; letter-spacing: 1.2px; }
  .values { font-size: 11px; letter-spacing: .7px; }
  .hero-bottom { font-size: 10px; letter-spacing: .4px; }
  .nav a { font-size: 13px; }
  .service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
  .section-heading > p, .contact-copy > p, .address, .footer > p,
  .footer-bottom, .panel-line, .promise p { font-size: 14px; }
  .trade-small, .trade-bottom { font-size: 11px; }
  .panel-head small { font-size: 11px; }
  .panel-values { font-size: 10px; }
  .footer-brand small { font-size: 10px; }
}

/* Version 4: use the exact supplied white logo artwork in the title area */
.hero-logo-wrap { width: min(100%, 900px); margin: 0 0 24px; }
.hero-title-logo { display:block; width:100%; height:auto; max-height:360px; object-fit:contain; object-position:left center; }
.eyebrow, .section-label { font-size: 14px; }
.nav a { font-size: 14px; }
.service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
.section-heading > p, .contact-copy > p, .address, .footer > p,
.footer-bottom, .panel-line, .promise p { font-size: 16px; }
.service-promise p { font-size: 17px; }
.service-promise p span { font-size: 15px; }
.contact-email { font-size: 18px; }
.panel-head small { font-size: 13px; }
.trade-small, .trade-bottom { font-size: 12px; }
.panel-values { font-size: 13px; }
.footer-brand small { font-size: 12px; }
.hero-bottom { font-size: 13px; }
@media(max-width:650px) {
  .hero-logo-wrap { width:100%; margin-bottom:20px; }
  .hero-title-logo { max-height:none; width:100%; }
  .eyebrow, .section-label { font-size: 13px; }
  .service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
  .section-heading > p, .contact-copy > p, .address, .footer > p,
  .footer-bottom, .panel-line, .promise p { font-size: 15px; }
  .hero-bottom { font-size: 10px; }
  .panel-head small { font-size: 12px; }
  .panel-values { font-size: 11px; }
}

/* Version 5: logo to the right of the hero copy; increase small print further */
.hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr); gap: 5%; align-items:center; }
.hero-copy { max-width: none; min-width:0; }
.hero-copy h1 { font-size: clamp(36px, 4.2vw, 58px); line-height:1.12; }
.hero-logo-side { min-width:0; display:flex; align-items:center; justify-content:center; padding:22px; }
.hero-logo-side img { display:block; width:100%; max-width:560px; height:auto; object-fit:contain; }
.eyebrow, .section-label { font-size: 15px; }
.hero-lead { font-size: 19px; line-height:1.75; }
.values { font-size: 15px; }
.nav a { font-size: 15px; }
.service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
.section-heading > p, .contact-copy > p, .address, .footer > p,
.footer-bottom, .panel-line, .promise p { font-size: 17px; line-height:1.75; }
.service-promise p { font-size: 18px; }
.service-promise p span { font-size: 16px; }
.contact-email { font-size: 19px; }
.panel-head small { font-size: 14px; }
.trade-small, .trade-bottom { font-size: 13px; }
.panel-values { font-size: 14px; }
.footer-brand small { font-size: 13px; }
.hero-bottom { font-size: 14px; }
@media(max-width:850px) {
  .hero-inner { grid-template-columns:minmax(0, 1fr) minmax(190px, .7fr); padding-left:6%; padding-right:6%; gap:3%; }
  .hero-copy h1 { font-size:clamp(31px, 4.5vw, 45px); }
  .hero-logo-side { padding:8px; }
}
@media(max-width:650px) {
  .hero-inner { grid-template-columns:1fr; padding:42px 6% 75px; gap:22px; }
  .hero-copy h1 { font-size:clamp(31px, 8.5vw, 44px); }
  .hero-logo-side { padding:0; justify-content:flex-start; max-width:100%; }
  .hero-logo-side img { width:100%; max-width:420px; max-height:220px; object-position:left center; }
  .eyebrow, .section-label { font-size: 13px; }
  .hero-lead { font-size:16px; }
  .values { font-size:12px; }
  .nav a { font-size:14px; }
  .service p, .steps p, .intro-text, .trade-copy > p, .trade-copy li,
  .section-heading > p, .contact-copy > p, .address, .footer > p,
  .footer-bottom, .panel-line, .promise p { font-size:15px; line-height:1.7; }
  .service-promise p { font-size:16px; }
  .service-promise p span { font-size:14px; }
  .contact-email { font-size:16px; }
  .panel-head small { font-size:12px; }
  .trade-small, .trade-bottom { font-size:11px; }
  .panel-values { font-size:11px; }
  .footer-brand small { font-size:10px; }
  .hero-bottom { font-size:10px; }
}

/* Version 6: logo on the left, introductory text on the right; remove headline */
@media(min-width:651px) {
  .hero-inner { grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr); }
  .hero-logo-side { grid-column: 1; grid-row: 1; justify-content:flex-start; }
  .hero-copy { grid-column: 2; grid-row: 1; }
}
@media(max-width:650px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-logo-side { order:1; }
  .hero-copy { order:2; }
}

/* Version 7: header uses only the original house symbol from the supplied logo */
.header .logo-link { width:auto; max-width:180px; min-width:0; }
.header .logo { width:auto; max-width:180px; max-height:68px; object-fit:contain; object-position:left center; }
@media(max-width:650px) {
  .header .logo-link { max-width:100px; }
  .header .logo { max-width:100px; max-height:56px; }
}

/* Version 8: remove the compressed, flattened appearance from bold/uppercase text */
h1, h2, h3, .eyebrow, .section-label, .values, .hero-bottom,
.service-top, .service h3, .trade-small, .trade-big, .trade-bottom,
.steps h3, .promise h2, .panel-head, .panel-head small, .panel-values,
.footer-brand, .footer-brand small, .nav a, .button, .service-promise p strong {
  font-family: Arial, Helvetica, sans-serif;
  font-stretch: normal;
  font-weight: 700;
  transform: none;
  letter-spacing: normal;
  font-kerning: normal;
  line-height: 1.25;
}
h1, h2, h3, .service h3, .trade-big, .steps h3, .promise h2, .panel-head {
  font-weight: 800;
  letter-spacing: -0.2px;
}
.eyebrow, .section-label, .values, .hero-bottom, .trade-small, .trade-bottom,
.panel-values, .footer-brand small, .nav a, .button {
  letter-spacing: .25px;
}
.trade-big { line-height: 1.2; }
.hero h1, .intro h2, .section h2, .trade-copy h2, .contact h2, .promise h2 {
  font-stretch: normal;
  transform: none;
}


/* Version 10: slightly stronger headings, keeping the original proportions */
h1, h2, h3,
.service h3, .trade-big, .steps h3, .promise h2, .panel-head {
  font-weight: 800;
  text-shadow: 0 0 0 currentColor;
  letter-spacing: normal;
  font-stretch: normal;
  transform: none;
}

/* Highlight key location and brand labels with weight, not condensed styling */
.hero-bottom, .eyebrow, .footer-brand {
  font-weight: 800;
  letter-spacing: normal;
  font-stretch: normal;
  transform: none;
}

.hero-bottom {
  font-size: 1.06em;
}
.eyebrow, .footer-brand {
  font-size: 1.04em;
}

/* Version 11: contact QR code section */
.contact-qr-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
  align-items: center;
  gap: 2rem;
}
.contact-qr-image {
  justify-self: center;
  width: min(100%, 240px);
  padding: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 8px;
}
.contact-qr-image img {
  display: block;
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .contact-qr-inner {
    grid-template-columns: 1fr;
  }
  .contact-qr-image {
    width: min(72%, 240px);
  }
}

/* Version 12: QR code integrated into the green contact panel */
.contact-qr-inline {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.25);
}
.contact-qr-inline img {
  display: block;
  flex: 0 0 112px;
  width: 112px;
  max-width: 32%;
  height: auto;
  padding: 6px;
  background: #fff;
  border-radius: 5px;
}
.contact-qr-inline h3 {
  margin: 0 0 .45rem;
  color: inherit;
}
.contact-qr-inline p {
  margin: 0;
}
@media (max-width: 520px) {
  .contact-qr-inline {
    align-items: flex-start;
    gap: .85rem;
  }
  .contact-qr-inline img {
    flex-basis: 92px;
    width: 92px;
  }
}

/* Version 15: new original solo photo with diagonal transition */
.hero-team-photo {
  position: relative;
  width: 100%;
  margin: clamp(1.5rem, 4vw, 3.25rem) auto 0;
  overflow: hidden;
  border-radius: 18px 18px 6px 6px;
  isolation: isolate;
  max-height: 760px;
  background: #e8ece8;
}
.hero-team-photo img {
  display: block;
  width: 100%;
  height: clamp(380px, 64vw, 760px);
  object-fit: cover;
  object-position: center 22%;
}
/* The diagonal overlay blends into the page without covering the face or van logo. */
.hero-photo-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg,
    var(--page-bg, #f6f7f4) 0%,
    rgba(246,247,244,.94) 7%,
    rgba(246,247,244,.52) 15%,
    rgba(246,247,244,0) 29%);
  clip-path: polygon(0 0, 44% 0, 0 100%);
  opacity: .95;
}
@media (max-width: 640px) {
  .hero-team-photo {
    margin-top: 1.25rem;
    border-radius: 12px 12px 4px 4px;
  }
  .hero-team-photo img {
    height: min(125vw, 610px);
    object-position: center 22%;
  }
  .hero-photo-fade {
    background: linear-gradient(112deg,
      var(--page-bg, #f6f7f4) 0%,
      rgba(246,247,244,.72) 8%,
      rgba(246,247,244,0) 25%);
    clip-path: polygon(0 0, 35% 0, 0 100%);
  }
}

/* Version 16: slightly smaller hero photo, larger brand logo, clear diagonal transition */
.hero-team-photo {
  width: min(100%, 1120px);
  margin: clamp(1.25rem, 3vw, 2.5rem) auto 0;
  max-height: 640px;
  border-radius: 0;
  overflow: hidden;
}
.hero-team-photo img {
  height: clamp(420px, 58vw, 720px);
  object-fit: cover;
  object-position: center 12%;
}
/* Stronger diagonal blend between the title area and the photo */
.hero-photo-fade {
  background: linear-gradient(112deg,
    var(--page-bg, #f6f7f4) 0%,
    rgba(246,247,244,.96) 8%,
    rgba(246,247,244,.66) 14%,
    rgba(246,247,244,0) 27%);
  clip-path: polygon(0 0, 46% 0, 0 100%);
  opacity: 1;
}
/* Make the logo in the title area more prominent without squeezing letterforms */
.hero-logo-side img,
.hero-logo img,
.hero-brand img {
  width: 112%;
  max-width: 620px;
  height: auto;
  transform: none;
  transform-origin: left center;
}
@media (max-width: 640px) {
  .hero-team-photo {
    width: 100%;
    margin-top: 1rem;
  }
  .hero-team-photo img {
    height: min(135vw, 650px);
    object-position: center 12%;
  }
  .hero-photo-fade {
    background: linear-gradient(112deg,
      var(--page-bg, #f6f7f4) 0%,
      rgba(246,247,244,.8) 8%,
      rgba(246,247,244,0) 25%);
    clip-path: polygon(0 0, 34% 0, 0 100%);
  }
  .hero-logo-side img,
  .hero-logo img,
  .hero-brand img {
    width: 100%;
    max-width: 100%;
  }
}

/* Version 38: neues Originalfoto rechts, mit umgekehrter diagonaler Kante */
.hero { position: relative; isolation: isolate; }
.hero-team-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 42%;
  width: 58%;
  height: 100%;
  max-height: none;
  margin: 0;
  border-radius: 0;
  z-index: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%);
  background: transparent;
}
.hero-team-photo img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  object-fit: cover;
  object-position: center center;
}
.hero-photo-fade { display: none; }
.hero-inner { position: relative; z-index: 2; }
.hero-bottom { z-index: 4; }
@media (max-width: 900px) {
  .hero-team-photo { left: 46%; width: 54%; clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%); opacity: .55; }
}
@media (max-width: 640px) {
  .hero-team-photo {
    position: relative;
    inset: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 1rem;
    clip-path: none;
    opacity: 1;
  }
  .hero-team-photo img { height: min(105vw, 500px); min-height: 0; }
}

/* Version 31: single photo across the complete diagonal area; no gray/blurred placeholder. */
.hero-team-photo { clip-path: polygon(68% 0, 100% 0, 100% 100%, 55% 100%); background: transparent; }
.hero-team-photo img { object-fit: cover; object-position: center center; }
.hero-photo-fade { display: none !important; }
@media (max-width: 900px) { .hero-team-photo { clip-path: polygon(78% 0, 100% 0, 100% 100%, 68% 100%); opacity: 1; } }
@media (max-width: 640px) { .hero-team-photo { clip-path: none; } }

/* Version 31: one untouched original photo fills the complete diagonal photo area. */
.hero-team-photo {
  position:absolute; top:0; right:0; bottom:0; left:auto;
  width:48%; height:100%; max-height:none; margin:0;
  z-index:1; overflow:hidden; border-radius:0; background:transparent;
  clip-path:polygon(25% 0,100% 0,100% 100%,0 100%);
}
.hero-team-photo img {
  display:block; width:100%; height:100%; min-height:0;
  object-fit:cover; object-position:center 27%;
}
.hero-photo-fade { display:none !important; }
.hero-inner { position:relative; z-index:2; }
@media (max-width:900px) {
  .hero-team-photo { width:48%; opacity:1; clip-path:polygon(30% 0,100% 0,100% 100%,0 100%); }
}
@media (max-width:640px) {
  .hero-team-photo { position:relative; top:auto; right:auto; bottom:auto; left:auto; width:100%; height:auto; margin-top:1rem; clip-path:none; }
  .hero-team-photo img { height:min(105vw,500px); object-position:center 25%; }
}

/* Version 33: position the original photo higher so Marc's entire face stays in frame. */
.hero-team-photo img {
  object-position: center 8% !important;
}
@media (max-width: 640px) {
  .hero-team-photo img {
    object-position: center 8% !important;
  }
}

/* Version 35: zoom out slightly while keeping the original face and van photo untouched. */
.hero-team-photo {
  background-image: url('assets/beckmanns-titel-marc-transporter.png');
  background-size: cover;
  background-position: center 35%;
}
.hero-team-photo::before {
  content: "";
  position: absolute;
  inset: -18px;
  background-image: url('assets/beckmanns-titel-marc-transporter.png');
  background-size: cover;
  background-position: center 35%;
  filter: blur(14px);
  transform: scale(1.04);
  z-index: 0;
}
.hero-team-photo img {
  position: relative;
  z-index: 1;
  object-fit: contain !important;
  object-position: center 35% !important;
  width: 100%;
  height: 100%;
}
@media (max-width: 640px) {
  .hero-team-photo { background-position: center 35%; }
  .hero-team-photo::before { display: none; }
  .hero-team-photo img { object-fit: contain !important; object-position: center 35% !important; }
}

/* Version 39: diagonal edge reversed as requested, keeping the rest of v38 unchanged. */
@media (min-width: 641px) {
  .hero-team-photo {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%) !important;
  }
}
@media (max-width: 640px) {
  .hero-team-photo { clip-path: none !important; }
}


/* Version 44: move the diagonal green/photo boundary further to the right. */
@media (min-width: 901px) {
  .hero-team-photo {
    width: 39% !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%) !important;
  }
}


/* Version 45: zoom in on Marc while keeping the top of the original photo visible. */
@media (min-width: 641px) {
  .hero-team-photo img {
    transform: scale(1.14) !important;
    transform-origin: center top !important;
  }
}
@media (max-width: 640px) {
  .hero-team-photo img {
    transform: scale(1.08) !important;
    transform-origin: center top !important;
  }
}


/* Version 46: move the diagonal boundary significantly farther right. */
@media (min-width: 901px) {
  .hero-team-photo {
    width: 31% !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 42% 100%) !important;
  }
}


/* Version 47: zoom in a little more and position the hair close to the top edge. */
@media (min-width: 641px) {
  .hero-team-photo img {
    transform: scale(1.22) !important;
    transform-origin: center 0% !important;
    object-position: center top !important;
  }
}
@media (max-width: 640px) {
  .hero-team-photo img {
    transform: scale(1.12) !important;
    transform-origin: center 0% !important;
    object-position: center top !important;
  }
}


/* Version 48: zoom in further and shift the photo upward to show more arms and less sky. */
@media (min-width: 641px) {
  .hero-team-photo img {
    transform: translateY(-3%) scale(1.32) !important;
    transform-origin: center top !important;
    object-position: center top !important;
  }
}
@media (max-width: 640px) {
  .hero-team-photo img {
    transform: translateY(-2%) scale(1.20) !important;
    transform-origin: center top !important;
    object-position: center top !important;
  }
}


/* Version 49: make the logo on the left side noticeably smaller. */
.site-header .logo img,
.site-header .brand img,
header .logo img,
header .brand img,
.logo img,
.brand img {
  max-width: 115px !important;
  max-height: 58px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}


/* Version 50: target the actual large logo in the left hero area. */
.hero .hero-logo-side {
  justify-content: flex-start !important;
}
.hero .hero-logo-side img {
  display: block !important;
  width: 65% !important;
  max-width: 390px !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain !important;
}
@media (max-width: 640px) {
  .hero .hero-logo-side img {
    width: 80% !important;
    max-width: 320px !important;
  }
}


/* Version 51: title-page layout, smaller left logo and copy shifted toward the center. */
@media (min-width: 851px) {
  .hero .hero-inner {
    grid-template-columns: minmax(0, 0.58fr) minmax(0, 1.42fr) !important;
    column-gap: 4% !important;
  }
  .hero .hero-logo-side {
    padding: 10px 0 !important;
    justify-content: center !important;
    min-width: 0 !important;
  }
  .hero .hero-logo-side img {
    width: 100% !important;
    max-width: 285px !important;
    max-height: none !important;
    height: auto !important;
  }
  .hero .hero-copy {
    max-width: 760px !important;
    min-width: 0 !important;
  }
}
@media (min-width: 651px) and (max-width: 850px) {
  .hero .hero-inner {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) !important;
    column-gap: 3% !important;
  }
  .hero .hero-logo-side img {
    width: 100% !important;
    max-width: 220px !important;
    height: auto !important;
  }
}
@media (max-width: 650px) {
  .hero .hero-logo-side img {
    width: 72% !important;
    max-width: 260px !important;
    max-height: none !important;
    height: auto !important;
  }
}


/* Version 53: updated hero copy and larger call-to-action buttons. */
.hero .hero-actions .button {
  font-size: 18px !important;
  padding: 16px 24px !important;
  min-height: 56px !important;
}
@media (max-width: 650px) {
  .hero .hero-actions .button {
    font-size: 17px !important;
    padding: 14px 20px !important;
    min-height: 52px !important;
  }
}


/* Version 54: bring the intro heading and text closer toward the center. */
.intro .intro-grid {
  column-gap: clamp(24px, 4vw, 58px) !important;
}
.intro .intro-grid > h2 {
  margin-right: 0 !important;
  justify-self: end !important;
}
.intro .intro-grid > .intro-text {
  margin-left: 0 !important;
  justify-self: start !important;
}
@media (max-width: 760px) {
  .intro .intro-grid {
    column-gap: 0 !important;
  }
  .intro .intro-grid > h2,
  .intro .intro-grid > .intro-text {
    justify-self: stretch !important;
  }
}


/* Legal pages: readable long-form layout. */
.legal-page { max-width: 900px; margin: 0 auto; }
.legal-page h1 { margin-bottom: 28px; }
.legal-page h2 { margin: 30px 0 10px; font-size: clamp(20px, 2vw, 26px); line-height: 1.25; }
.legal-page p { max-width: 78ch; margin: 0 0 16px; }
.legal-page a { text-decoration: underline; text-underline-offset: 3px; }


/* Version 64: mobile-only refinement. Desktop rules intentionally untouched. */
@media (max-width: 650px) {
  html { scroll-padding-top: 78px; }
  body { overflow-wrap: break-word; }

  /* Compact header, keeping the same logo, colors and navigation labels. */
  .header {
    height: 76px;
    min-height: 76px;
    padding: 8px 5%;
    gap: 12px;
  }
  .header .logo-link { flex: 0 1 auto; width: auto; max-width: 100px; }
  .header .logo { display: block; width: auto; max-width: 100px; max-height: 54px; }
  .menu-toggle {
    display: block;
    flex: 0 0 auto;
    padding: 8px 4px 8px 12px;
    line-height: 1;
    cursor: pointer;
  }
  .nav {
    top: 73px;
    max-height: calc(100vh - 76px);
    overflow-y: auto;
    padding: 12px 5% 18px;
  }
  .nav a { display: block; padding: 13px 0; }
  .nav .nav-contact { padding: 13px; }

  /* Preserve the desktop hero's branding and copy, stacked for narrow screens. */
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .hero-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 34px 6% 28px;
  }
  .hero-logo-side {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .hero .hero-logo-side img {
    display: block;
    width: min(100%, 360px) !important;
    max-width: 100% !important;
    max-height: 190px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
  }
  .hero-copy { order: 2; width: 100%; max-width: none; }
  .hero h1 { font-size: clamp(30px, 8.5vw, 42px); line-height: 1.12; }
  .hero-lead { max-width: none; font-size: 16px; line-height: 1.65; margin: 0; }
  .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero .hero-actions .button {
    width: 100%;
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: 15px !important;
  }
  .values { margin: 18px 0 22px; line-height: 1.5; }
  .hero-bottom {
    position: relative;
    inset: auto;
    display: block;
    padding: 12px 5%;
    font-size: 10px;
    line-height: 1.45;
    letter-spacing: .2px;
  }

  /* The supplied portrait remains prominent without cropping on phones. */
  .hero-team-photo {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    margin: 0;
    overflow: hidden;
    clip-path: none !important;
    background: var(--green);
  }
  .hero-team-photo img {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: 68vh;
    object-fit: contain !important;
    object-position: center center !important;
  }

  /* Same section order and visual language, with comfortable phone spacing. */
  .section { padding: 54px 6%; }
  .intro .intro-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
  .intro .intro-grid > h2 { justify-self: stretch !important; }
  .intro h2, .section h2, .trade-copy h2, .contact h2 {
    font-size: clamp(27px, 7.5vw, 36px);
    line-height: 1.15;
  }
  .intro-text { font-size: 15px; line-height: 1.7; }
  .section-heading { display: block; margin-bottom: 25px; }
  .section-heading > p { margin-top: 12px; }
  .service-grid { grid-template-columns: 1fr; }
  .service { min-height: 0; padding: 22px 20px 24px; }
  .service h3 { font-size: 19px; }
  .service p, .steps p, .trade-copy > p, .trade-copy li,
  .contact-copy > p, .address, .promise p { font-size: 15px; line-height: 1.65; }
  .service-promise { align-items: flex-start; gap: 12px; padding: 17px; }
  .service-promise p { font-size: 15px; line-height: 1.5; }
  .service-promise p span { font-size: 13px; }

  .trade { grid-template-columns: 1fr; }
  .trade-art { min-height: 260px; padding: 38px 8%; }
  .trade-art-inner { padding: 26px 18px; }
  .trade-big { font-size: clamp(27px, 7.5vw, 38px); }
  .trade-copy { padding: 42px 6%; }
  .trade-copy ul { margin-bottom: 24px; }
  .trade-copy .button { width: 100%; }

  .steps { grid-template-columns: 1fr; gap: 25px; }
  .steps article { padding: 18px 0 0; }
  .steps article > span { margin-bottom: 10px; }
  .promise { padding: 48px 6%; }
  .promise h2 { font-size: clamp(27px, 7.2vw, 36px); }
  .promise-values { line-height: 1.25 !important; }
  .cities { line-height: 1.8; }

  .contact { grid-template-columns: 1fr; gap: 30px; }
  .contact-main-number { font-size: clamp(24px, 6.5vw, 30px); overflow-wrap: anywhere; }
  .contact-email { font-size: 16px; overflow-wrap: anywhere; }
  .contact-panel { min-width: 0; padding: 28px 22px; box-shadow: 7px 7px 0 #e6eadf; }
  .panel-head { font-size: 27px; }
  .panel-head small { font-size: 11px; line-height: 1.5; }
  .panel-line { gap: 10px; font-size: 14px; overflow-wrap: anywhere; }
  .contact-qr-inline { align-items: flex-start; gap: 14px; }
  .contact-qr-inline img { width: min(34%, 110px); height: auto; flex: 0 0 auto; }
  .contact-qr-inline h3 { font-size: 16px; line-height: 1.3; margin-top: 0; }
  .contact-qr-inline p { font-size: 13px; line-height: 1.5; }

  .footer { padding: 28px 6% 20px; }
  .footer-brand { gap: 10px; font-size: 16px; }
  .footer-brand img { width: 86px; height: 48px; }
  .footer-brand small { font-size: 9px; }
  .footer-bottom { flex-direction: column; gap: 10px; line-height: 1.7; }
  .footer-bottom a { margin: 0 16px 0 0; }
  .legal-page { padding-left: 6%; padding-right: 6%; }
  .legal-page h1 { font-size: clamp(28px, 8vw, 36px); }
  .legal-page h2 { font-size: 21px; }
}


/* Version 65: mobile hero aligns the brand logo left and the portrait to its right,
   using the same diagonal photo treatment as the desktop hero. */
@media (max-width: 650px) {
  .hero {
    display: block;
    min-height: 0;
    overflow: hidden;
  }
  .hero .hero-inner {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr) !important;
    grid-template-rows: auto auto;
    align-items: start;
    column-gap: 0;
    row-gap: 22px;
    padding: 28px 5% 34px !important;
    min-height: 0;
  }
  .hero .hero-logo-side {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    min-width: 0;
    align-self: start;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 5px 0 0 !important;
  }
  .hero .hero-logo-side img {
    display: block;
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left top !important;
  }
  .hero .hero-team-photo {
    position: relative !important;
    grid-column: 2;
    grid-row: 1;
    inset: auto !important;
    width: calc(100% + 5vw) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 -5vw 0 0 !important;
    overflow: hidden;
    clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%) !important;
    opacity: 1 !important;
    background: transparent !important;
    z-index: 1;
  }
  .hero .hero-team-photo img {
    display: block;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 260px !important;
    aspect-ratio: 3 / 4;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  .hero .hero-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: none;
    order: initial;
  }
  .hero .hero-copy .eyebrow { margin-top: 0; }
  .hero .hero h1 { max-width: 100%; }
  .hero .hero-lead { max-width: 100%; }
  .hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .hero .hero-actions .button { width: 100%; }
  .hero .hero-bottom {
    position: relative;
    inset: auto;
    padding: 12px 5%;
    z-index: 4;
  }
}


/* Version 66: compact logo + portrait row above the mobile hero eyebrow. */
@media (max-width: 650px) {
  .hero .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr) !important;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 18px;
    padding: 22px 5% 30px !important;
  }
  .hero .hero-logo-side {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 0 !important;
    margin: 0;
  }
  .hero .hero-logo-side img {
    width: 100% !important;
    max-width: none !important;
    max-height: 150px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .hero .hero-team-photo {
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: none;
    margin: 0 !important;
    align-self: center;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%) !important;
    overflow: hidden;
  }
  .hero .hero-team-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 155px !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  .hero .hero-copy {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    max-width: none;
  }
  .hero .hero-copy .eyebrow {
    margin-top: 0;
  }
}


/* Version 67: force the portrait into the first mobile hero row and prevent head cropping. */
@media (max-width: 650px) {
  .hero {
    position: relative;
    overflow: hidden;
  }
  .hero .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr) !important;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 16px;
    padding: 20px 5% 28px !important;
  }
  .hero .hero-logo-side {
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center;
    justify-self: stretch;
    padding: 0 !important;
    margin: 0 !important;
    order: 0 !important;
  }
  .hero .hero-logo-side img {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 140px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .hero .hero-team-photo {
    position: relative !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    inset: auto !important;
    align-self: center !important;
    justify-self: stretch;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    background: transparent !important;
    order: 0 !important;
  }
  .hero .hero-team-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 3 / 4;
    object-fit: contain !important;
    object-position: center top !important;
  }
  .hero .hero-copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    order: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative;
    z-index: 3;
  }
  .hero .hero-copy .eyebrow {
    margin-top: 0 !important;
  }
}


/* Version 70: portrait is the first thing seen on mobile, beside the logo. */
@media (max-width: 650px) {
  .hero .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr) !important;
    grid-template-rows: auto auto;
    align-items: center !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
    padding: 18px 5% 28px !important;
    min-height: 0 !important;
  }

  /* Photo on the left so it is the first visual when the mobile page opens. */
  .hero .hero-team-photo {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%) !important;
    opacity: 1 !important;
    background: transparent !important;
    z-index: 1 !important;
    order: 0 !important;
  }
  .hero .hero-team-photo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 155px !important;
    aspect-ratio: 4 / 5;
    object-fit: cover !important;
    object-position: center 8% !important;
  }

  .hero .hero-logo-side {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: center !important;
    justify-self: stretch !important;
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    order: 0 !important;
  }
  .hero .hero-logo-side img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 155px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .hero .hero-copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    order: 0 !important;
  }
  .hero .hero-copy .eyebrow { margin-top: 0 !important; }
}


/* Version 71: the portrait is a sibling of .hero-inner in the HTML,
   so position it directly in the first mobile row instead of treating it as a grid item. */
@media (max-width: 650px) {
  .hero {
    position: relative !important;
    overflow: hidden !important;
  }
  .hero .hero-inner {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) !important;
    grid-template-rows: auto auto;
    column-gap: 12px !important;
    row-gap: 18px !important;
    align-items: center !important;
    padding: 18px 5% 28px !important;
    min-height: 0 !important;
  }

  /* Logo is the first child in the first row. */
  .hero .hero-logo-side {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: flex !important;
    align-self: center !important;
    justify-content: flex-start !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    visibility: visible !important;
  }
  .hero .hero-logo-side img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 135px !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Portrait is outside .hero-inner, so anchor it at the same top row. */
  .hero > .hero-team-photo {
    position: absolute !important;
    display: block !important;
    top: 18px !important;
    right: 5% !important;
    bottom: auto !important;
    left: auto !important;
    width: 33% !important;
    height: 135px !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%) !important;
    opacity: 1 !important;
    background: transparent !important;
    z-index: 5 !important;
  }
  .hero > .hero-team-photo img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 8% !important;
  }

  /* Keep copy beneath the logo/photo row, spanning the full width. */
  .hero .hero-copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 0 !important;
    order: 0 !important;
  }
  .hero .hero-copy .eyebrow { margin-top: 0 !important; }
}


/* Version 72: move mobile hero copy below the logo/photo row to prevent overlap. */
@media (max-width: 650px) {
  .hero .hero-inner {
    padding-top: 170px !important;
  }
  .hero .hero-copy {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* Version 74: keep logo and portrait pinned at the top; bring the mobile copy upward. */
@media (max-width: 650px) {
  .hero .hero-inner {
    padding-top: 18px !important;
  }
  .hero .hero-logo-side {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    z-index: 6 !important;
    align-self: center !important;
  }
  .hero > .hero-team-photo {
    top: 18px !important;
    right: 5% !important;
    z-index: 5 !important;
  }
  .hero .hero-copy {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin-top: 35px !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 3 !important;
  }
}

/* Version 75: make the portrait/van photo a little smaller on mobile only. */
@media (max-width: 650px) {
  .hero > .hero-team-photo {
    width: 29% !important;
    height: 118px !important;
  }
}

/* Version 76: slightly enlarge the logo beside the portrait on mobile only. */
@media (max-width: 650px) {
  .hero .hero-logo-side img {
    max-height: 150px !important;
    transform: scale(1.10) !important;
    transform-origin: left center !important;
  }
}

/* Version 78: mobile portrait diagonal remains on the left, with the photo wider at the top than at the bottom. */
@media (max-width: 650px) {
  .hero > .hero-team-photo {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 24% 100%) !important;
  }
}


/* Version 79: make the mobile portrait a little smaller, preserving the left diagonal. */
@media (max-width: 650px) {
  .hero > .hero-team-photo {
    width: 26% !important;
    height: 108px !important;
  }
}

/* Version 80: move the mobile hero copy, including “Solingen und Umgebung”, slightly upward. */
@media (max-width: 650px) {
  .hero .hero-copy {
    margin-top: 20px !important;
  }
}


/* Version 81: noticeably slimmer mobile header; desktop stays unchanged. */
@media (max-width: 650px) {
  html { scroll-padding-top: 60px; }
  .header { height: 58px !important; min-height: 58px !important; padding: 4px 5% !important; }
  .header .logo-link { max-width: 92px !important; }
  .header .logo { max-width: 92px !important; max-height: 43px !important; }
  .menu-toggle { padding-top: 4px !important; padding-bottom: 4px !important; }
  .nav { top: 55px !important; max-height: calc(100vh - 58px) !important; }
}


/* Version 82: further reduce the mobile header height only. */
@media (max-width: 650px) {
  html { scroll-padding-top: 48px !important; }
  .header { height: 46px !important; min-height: 46px !important; padding: 2px 5% !important; gap: 8px !important; }
  .header .logo-link { max-width: 76px !important; }
  .header .logo { max-width: 76px !important; max-height: 34px !important; }
  .menu-toggle { padding-top: 2px !important; padding-bottom: 2px !important; }
  .nav { top: 43px !important; max-height: calc(100vh - 46px) !important; }
}

/* Version 84: visibly move “Gut organisiert. Klar abgesprochen.” upward on mobile only. */
@media (max-width: 650px) {
  .intro.section {
    padding-top: 34px !important;
  }
  .intro > .section-label {
    margin-top: -12px !important;
    margin-bottom: 10px !important;
    position: relative !important;
    top: -8px !important;
  }
}


/* Version 85: keep all service cards and their borders fully inside the viewport on phones. */
@media (max-width: 650px) {
  #leistungen, .services, .service-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .service-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .service-grid > .service {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Version 86: make every service card use the same fully closed border on mobile. */
@media (max-width: 650px) {
  .service-grid {
    border: 0 !important;
  }
  .service-grid > .service {
    border: 1px solid var(--line) !important;
    border-radius: 8px !important;
    overflow: visible !important;
  }
}


/* Version 87: hide the green contact card with QR code on mobile only. */
@media (max-width: 650px) {
  .contact .contact-panel {
    display: none !important;
  }
}

/* Version 89: improve the trade CTA on mobile only. */
@media (max-width: 650px) {
  .trade-copy > a.button.button-green {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    letter-spacing: .25px !important;
    padding: 14px 12px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* Version 90: use only the supplied business-card logo in the footer on desktop and mobile. */
.footer-brand { display: inline-flex; align-items: center; gap: 0; max-width: min(100%, 420px); }
.footer-brand img { display: block; width: min(100%, 360px); height: auto; max-height: none; object-fit: contain; background: transparent; }
.footer > p { display: none; }
@media (max-width: 650px) {
  .footer-brand { max-width: min(100%, 300px); }
  .footer-brand img { width: 100%; height: auto; }
}

/* Version 92: correct footer diagonal direction and give the roof peak breathing room. */
.footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: min(100%, 260px) !important;
  padding: 5px 18px 5px 8px !important;
  background: #fff !important;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%) !important;
  box-sizing: border-box !important;
}
.footer-brand img {
  display: block !important;
  width: 190px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}
@media (max-width: 650px) {
  .footer-brand {
    max-width: 220px !important;
    padding: 4px 15px 4px 7px !important;
  }
  .footer-brand img {
    width: 165px !important;
  }
}


/* Version 98: use the same footer logo in the contact panel. */
.contact-panel .panel-logo {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto 18px;
  overflow: hidden;
}
.contact-panel .panel-logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Version 99: align contact logo left and match the footer's white diagonal panel. */
.contact-panel .panel-logo {
  display: block !important;
  width: fit-content !important;
  max-width: min(100%, 260px) !important;
  margin: 0 0 18px 0 !important;
  padding: 5px 18px 5px 8px !important;
  background: #fff !important;
  clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.contact-panel .panel-logo img {
  display: block !important;
  width: 190px !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}
@media (max-width: 650px) {
  .contact-panel .panel-logo {
    max-width: 220px !important;
    padding: 4px 15px 4px 7px !important;
  }
  .contact-panel .panel-logo img { width: 165px !important; }
}