/* Header and hero layout. Existing services, pricing and forms are unchanged. */
header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  height: auto;
  min-height: 76px;
  padding: 14px 5%;
}
header .brand { gap: 9px; font-size: 17px; letter-spacing: .7px; min-width: 0; }
header .brand-icon { width: 38px; height: 38px; font-size: 30px; flex: 0 0 38px; }
header .brand small, html:not([lang="en"]) header .brand small { font-size: 11px; letter-spacing: .7px; }
header nav {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.3vw, 22px);
  min-width: 0;
  padding: 0;
  box-shadow: none;
}
header nav > a { font-size: 15px; line-height: 1.35; white-space: nowrap; }
header .header-call { display: block; font-size: 15px; padding: 9px 12px; white-space: nowrap; }
header .menu { display: none; }
header .language-menu { padding: 0; border: 0; font-size: 15px; }
header .language-menu summary { min-height: 38px; padding: 7px 10px; gap: 7px; width: auto; }
header .language-options {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  width: 320px;
  min-width: 0;
  max-height: none;
  overflow: visible;
  margin: 0;
  padding: 6px;
  box-shadow: 0 5px 14px #15271a0c;
}
header .language-menu:not([open]) .language-options { display: none; }
header .language-options button { min-height: 40px; padding: 7px 8px; font-size: 15px; gap: 8px; }
/* Reserve space for the language panel rather than covering the hero. */
header:has(.language-menu[open]) { padding-bottom: 156px; }
.hero { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); min-height: 540px; padding-top: 12px; }
.hero-copy { min-width: 0; padding: 32px 34px 30px 0; }
.hero h1 { font-size: clamp(46px, 5.7vw, 80px); line-height: 1.08; letter-spacing: -3px; margin-bottom: 24px; }
html:not([lang="en"]) .hero h1 { font-size: clamp(38px, 4.5vw, 64px); line-height: 1.12; letter-spacing: -2px; overflow-wrap: normal; }
.hero h1, .hero h2 { max-width: 100%; word-break: normal; }
.hero .eyebrow { margin-bottom: 20px; }
.hero .intro { max-width: 410px; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; }
.hero .button { max-width: 100%; white-space: normal; gap: 20px; }
.hero .button span { flex-shrink: 0; }
.hero-note { margin-top: 30px; }
.hero-photo { min-width: 0; min-height: 500px; }
.photo-label { left: 24px; right: 24px; bottom: 54px; }
.photo-label strong { display: block; font-size: 20px; line-height: 1.35; }
.image-caption { left: 24px; right: 24px; line-height: 1.4; }
.section > *, .process article > * { min-width: 0; }
.section h2, .section h3 { overflow-wrap: break-word; }
@media (min-width: 1025px) and (max-width: 1320px) {
  header { grid-template-columns: auto minmax(0, 1fr); gap: 20px; }
  header .header-call { display: none; }
}
@media (max-width: 1024px) {
  header, header:has(.language-menu[open]) { grid-template-columns: minmax(0, 1fr) auto; min-height: 70px; padding: 12px 5%; gap: 0 16px; }
  header .brand { grid-column: 1; grid-row: 1; justify-self: start; }
  header .menu { display: flex; align-items: center; justify-content: center; grid-column: 2; grid-row: 1; min-height: 42px; padding: 8px 12px; border: 1px solid #cbd1c7; background: transparent; font-size: 15px; }
  header .header-call { display: none; }
  header nav { grid-column: 1 / -1; grid-row: 2; display: none; position: static; gap: 6px 16px; padding: 14px 0 0; margin: 0; width: 100%; background: var(--cream); }
  header nav.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  header nav > a { display: flex; align-items: center; min-height: 42px; padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: normal; font-size: 15px; overflow-wrap: break-word; }
  header .language-menu { grid-column: 1 / -1; margin-top: 6px; }
  header .language-menu summary { width: 100%; min-height: 42px; padding: 8px 10px; font-size: 15px; }
  header .language-menu summary > span:last-child { margin-left: auto; }
  header .language-options { position: static; width: 100%; margin-top: 6px; box-shadow: none; }
  header .language-options button { min-height: 44px; font-size: 15px; }
  .hero-copy { padding: 24px 24px 26px 0; }
  .hero h1 { font-size: clamp(40px, 6.3vw, 64px); letter-spacing: -2px; }
  html:not([lang="en"]) .hero h1 { font-size: clamp(34px, 4.8vw, 48px); letter-spacing: -1.5px; }
  .hero-photo { min-height: 460px; }
}
@media (max-width: 650px) {
  .topbar { padding: 6px 5%; font-size: 14px; line-height: 1.4; }
  header .brand { font-size: 17px; gap: 8px; }
  header .brand-icon { width: 34px; height: 34px; flex-basis: 34px; font-size: 28px; }
  header .brand small, html:not([lang="en"]) header .brand small { font-size: 10px; letter-spacing: .4px; }
  .hero { display: flex; flex-direction: column; min-height: 0; padding: 0 5%; }
  .hero-copy { padding: 22px 0 26px; }
  .hero h1 { font-size: clamp(38px, 10vw, 58px); letter-spacing: -1.8px; line-height: 1.12; }
  html:not([lang="en"]) .hero h1 { font-size: clamp(32px, 8.8vw, 48px); line-height: 1.16; letter-spacing: -1px; }
  .hero .eyebrow { font-size: 14px; letter-spacing: 1.5px; margin-bottom: 17px; }
  .hero .intro { max-width: 100%; font-size: 17px; }
  .hero .actions, html:not([lang="en"]) .hero .actions { gap: 16px 20px; margin-top: 23px; align-items: center; }
  .hero .button { padding: 14px 17px; font-size: 15px; }
  .hero-note { margin-top: 25px; }
  .hero-photo { height: 330px; min-height: 330px; }
  .photo-label { left: 18px; right: 18px; bottom: 52px; }
  .photo-label span { letter-spacing: 1.3px; }
  .photo-label strong { font-size: 18px; }
  .image-caption { left: 18px; right: 18px; }
}
@media (max-width: 359px) {
  header { gap: 0 8px; }
  header .brand { font-size: 15px; }
  header .brand small, html:not([lang="en"]) header .brand small { font-size: 6px; }
  header .menu { padding: 8px; }
  header nav > a, header .language-options button { font-size: 15px; }
  .hero .actions { align-items: flex-start; flex-direction: column; }
}

/* Four distinct service categories. Calculators expand within their own card. */
.four-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;align-items:start}.four-categories>article{display:block;min-width:0;padding:0 0 24px;background:#f8f8f2;border:1px solid #d7ddce;overflow:hidden}.four-categories .card-photo{height:270px;margin:0 0 24px}.four-categories>article>h3{margin:0 24px;min-height:66px;font-size:24px;line-height:1.35;letter-spacing:-.5px}.four-categories>article>p{margin:10px 24px 0;min-height:48px;font-size:16px;line-height:1.65}.four-categories>article>ul{margin:20px 24px 24px;min-height:180px;font-size:15px;line-height:2}.four-categories .category-estimate{margin:0 24px;width:calc(100% - 48px);text-align:left;white-space:normal;justify-content:space-between}.four-categories .service-calculator{margin:25px 24px 0;grid-column:auto;grid-row:auto}.four-categories #flooring .card-photo img{object-position:center 74%}.four-categories #fences .card-photo img{object-position:center}.four-categories #cabinets .card-photo img{object-position:center 58%}.four-categories #painting .card-photo img{object-position:center 35%}.supplementary-repairs{margin-top:30px;border:1px solid #d7ddce;padding:22px;background:var(--cream)}.supplementary-repairs>summary{cursor:pointer;font-family:Manrope,Arial,sans-serif;font-size:19px;font-weight:600}.supplementary-repairs>p{margin-top:15px;font-size:15px}.supplementary-repairs .service-calculator{margin-top:24px;max-width:680px}.supplementary-repairs>summary:focus-visible{outline:3px solid #bb8a32;outline-offset:5px}@media(min-width:651px) and (max-width:1000px){.four-categories{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.four-categories>article{display:block}.four-categories .card-photo{height:210px}.four-categories>article>h3{font-size:20px;min-height:80px;margin-inline:18px}.four-categories>article>p,.four-categories>article>ul{margin-inline:18px}.four-categories>article>p{min-height:72px}.four-categories>article>ul{min-height:220px}.four-categories .category-estimate{margin-inline:18px;width:calc(100% - 36px)}.four-categories .service-calculator{margin-inline:18px}}@media(max-width:650px){.four-categories{grid-template-columns:minmax(0,1fr);gap:28px}.four-categories .card-photo{height:220px;margin-bottom:20px}.four-categories>article>h3{font-size:22px;min-height:0;margin-inline:20px}.four-categories>article>p{font-size:15px;min-height:0;margin-inline:20px}.four-categories>article>ul{font-size:15px;min-height:0;margin:18px 20px 22px}.four-categories .category-estimate{margin-inline:20px;width:calc(100% - 40px)}.four-categories .service-calculator{margin-inline:20px}.supplementary-repairs{padding:20px}.supplementary-repairs>summary{font-size:17px}}

/* Keep the selected fence photograph fully visible at every screen width. */
.four-categories #fences .card-photo{height:auto;aspect-ratio:1024/681}.four-categories #fences .card-photo img{width:100%;height:100%;object-fit:contain}

.attachment-demo{min-width:0;margin:22px 0;padding:18px;border:1px solid #becab9;background:#eef1e9;border-radius:8px}.attachment-demo legend{padding:0 6px;font-size:16px;font-weight:700;line-height:1.5}.attachment-demo .attachment-help,.attachment-status,.attachment-mail-notice{font-size:15px;line-height:1.65;overflow-wrap:anywhere}.attachment-demo .attachment-help{margin:0 0 12px}.attachment-demo .attachment-label{display:block;margin:14px 0 8px;font-size:15px;font-weight:600}.attachment-demo input[type=file]{display:block;width:100%;max-width:100%;margin-top:8px;font-size:15px;padding:8px;background:#fff}.attachment-actions{display:flex;flex-wrap:wrap;gap:8px}.attachment-control{padding:9px 12px;border:1px solid #8d9f89;border-radius:4px;background:#fff;color:#234f40;cursor:pointer;font:inherit;font-size:15px;white-space:normal}.attachment-control:hover{background:#e0e8db}.attachment-control:disabled{opacity:.6;cursor:not-allowed}.attachment-control:focus-visible{outline:3px solid #bb8a32;outline-offset:3px}.attachment-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.attachment-photo{min-width:0;padding:8px;background:#fff;border:1px solid #d7ddce}.attachment-photo img{width:100%;height:110px;object-fit:contain}.attachment-filename{display:block;margin:6px 0;font-size:14px;overflow-wrap:anywhere}.attachment-demo audio{display:block;width:100%;max-width:100%;margin:12px 0}.attachment-demo [hidden]{display:none!important}.attachment-status{margin:10px 0 0;color:#234f40}.attachment-mail-notice{padding:12px;border:1px solid #bfa66b;background:#fff8e8;margin:16px 0}.attachment-demo input::file-selector-button{max-width:100%;white-space:normal}@media(max-width:400px){.attachment-demo{padding:12px}.attachment-gallery{grid-template-columns:minmax(0,1fr)}}

.attachment-camera{display:none}.attachment-camera input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}.attachment-label:focus-within,.attachment-camera:focus-within{outline:3px solid #bb8a32;outline-offset:3px}@media(pointer:coarse),(max-width:650px){.attachment-camera{display:block;margin:12px 0;text-align:center;font-weight:600}.attachment-demo .attachment-label:has(input[type=file][accept^="image/"]){padding:10px 12px;border:1px solid #8d9f89;border-radius:4px;background:#fff;text-align:center;cursor:pointer}.attachment-demo .attachment-label:has(input[type=file][accept^="image/"]) input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;padding:0;margin:0}}
.attachment-demo .attachment-camera input[type=file]{position:absolute;width:1px;max-width:1px;height:1px;opacity:0;padding:0;margin:0;border:0;overflow:hidden}

.measurement-cta{display:inline-block;margin-top:20px;max-width:100%;white-space:normal}.measurement-section{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;background:#eef1e9;scroll-margin-top:110px}.measurement-section>div{min-width:0}.measurement-section h2{font-size:clamp(30px,4vw,50px);line-height:1.15;overflow-wrap:anywhere;margin:16px 0 22px}.measurement-section p{font-size:16px;line-height:1.8}.measurement-section .measurement-privacy{margin-top:20px;color:#526b58}.measurement-section form{min-width:0;padding:30px;background:var(--cream);border:1px solid #cbd5c6;border-radius:8px}.measurement-section label{display:block;font-size:15px;font-weight:600;margin:16px 0 7px}.measurement-section input:not(.honeypot),.measurement-section select,.measurement-section textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0;background:white;padding:12px;border:1px solid #aebfa8;border-radius:4px;font:inherit;font-size:16px;color:#234f40}.measurement-section textarea{resize:vertical}.measurement-section .form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}.measurement-section .form-row>div{min-width:0}.measurement-section .measurement-time-note{font-size:15px;margin:10px 0;color:#526b58}.measurement-section .button{width:100%;margin-top:22px;white-space:normal;text-align:left;line-height:1.5}.measurement-section [role=status]{margin-top:15px;overflow-wrap:anywhere}.measurement-section [data-state=success]{color:#235e37;font-weight:600}.measurement-section [data-state=error]{color:#922e2e}.measurement-section :is(input,select,textarea):focus-visible{outline:3px solid #bb8a32;outline-offset:3px}@media(max-width:900px){.measurement-section{grid-template-columns:minmax(0,1fr);gap:25px}}@media(max-width:480px){.measurement-section form{padding:20px 16px}.measurement-section .form-row{grid-template-columns:minmax(0,1fr);gap:0}}

.attachment-required{font-size:15px!important;font-weight:600;line-height:1.6;margin:10px 0 16px;color:#234f40}.measurement-section .attachment-demo input[type=file]{font-size:15px}.measurement-section .attachment-demo input[capture]{width:1px;max-width:1px;height:1px;padding:0;border:0}.measurement-section .button:disabled{opacity:.55;cursor:not-allowed}
.measurement-section .attachment-camera{display:none}@media(pointer:coarse),(max-width:650px){.measurement-section .attachment-camera{display:block}}

.voice-recorder-panel{margin:16px 0 12px;padding:18px 14px;border:2px solid #b8c9b3;border-radius:12px;background:#fff;min-width:0}.voice-recording-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px;line-height:1.5}.voice-recording-dot{width:22px;height:22px;border-radius:50%;background:#a7b5a3;flex:none}.voice-recorder-panel[data-mode=recording]{border-color:#bd3535;background:#fff6f5}.voice-recorder-panel[data-mode=recording] .voice-recording-dot{background:#d32929;animation:voice-pulse 1.15s ease-in-out infinite}.voice-recorder-panel[data-mode=recording] strong{color:#aa2020}.voice-timer{margin-left:auto;font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;color:#234f40}.voice-wave{display:block;width:100%;height:140px;margin-top:10px}.measurement-section .voice-recorder-hint{font-size:15px;margin:8px 0 0;line-height:1.6}.measurement-section .voice-stop,.measurement-section .voice-start{width:100%;min-height:56px;font-size:17px;font-weight:700;border-radius:7px;text-align:center}.measurement-section .voice-stop{background:#b72e2e;color:#fff;border:2px solid #972323}.measurement-section .voice-stop:hover{background:#972323}.measurement-section .voice-start{background:#234f40;color:white}.measurement-section .attachment-actions{display:block}.voice-playback{margin:8px 0 18px}.voice-playback progress{display:block;width:100%;height:12px;accent-color:#234f40}.voice-playback-time{display:block;text-align:right;font-variant-numeric:tabular-nums;font-size:16px;margin-top:6px}.voice-playback[hidden]{display:none}@keyframes voice-pulse{0%,100%{box-shadow:0 0 0 0 #d3292955}50%{box-shadow:0 0 0 10px #d3292900}}@media(prefers-reduced-motion:reduce){.voice-recorder-panel[data-mode=recording] .voice-recording-dot{animation:none}}

.measurement-section audio{display:none}.voice-play-toggle{display:block;width:100%;min-height:52px;padding:12px;margin-bottom:14px;border:2px solid #234f40;border-radius:7px;background:#234f40;color:#fff;font:inherit;font-size:16px;font-weight:700;cursor:pointer}.voice-play-toggle:focus-visible{outline:3px solid #bb8a32;outline-offset:3px}.voice-playback-time{font-size:18px;font-weight:600;text-align:left;line-height:1.6}

.voice-link-demo{margin-top:20px;padding:20px;border:1px dashed #657a68;border-radius:8px;background:#fff}.voice-link-demo a{display:block;margin-top:16px;color:#234f40;font-weight:700}.voice-link-demo p{font-size:16px;line-height:1.6}

/* Keep the recording state unmistakable across desktop and narrow phone screens. */
.measurement-section .voice-recording-dot{width:28px;height:28px}
.measurement-section .voice-timer{font-size:40px;line-height:1.2}
.measurement-section .voice-wave{height:190px}
.measurement-section .voice-recording-heading strong{flex:1;min-width:140px}
.measurement-section .voice-stop{min-height:64px;font-size:19px}
.measurement-section .voice-stop:focus-visible,.measurement-section .voice-start:focus-visible{outline:3px solid #bb8a32;outline-offset:3px}
@media(max-width:420px){.measurement-section .voice-timer{font-size:34px}.measurement-section .voice-wave{height:170px}.measurement-section .voice-recording-heading strong{min-width:110px}}
