:root {
  --steel: #e5e7e4;
  --steel-2: #d2d6d3;
  --white: #f9faf7;
  --graphite: #202624;
  --graphite-2: #39403d;
  --line: #8e9792;
  --yellow: #f2c230;
  --yellow-soft: #f8df85;
  --green: #087653;
  --green-dark: #045c40;
  --danger: #a73b31;
  --max: 1240px;
  --body: Arial, Helvetica, sans-serif;
  --signal: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--steel); color: var(--graphite); font: 16px/1.5 var(--body); }
a { color: inherit; }
button { font: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(242, 194, 48, .35); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
[id] { scroll-margin-top: 90px; }
:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
.skip-link { position: fixed; z-index: 100; left: 10px; top: 8px; padding: 10px 14px; background: var(--graphite); color: white; transform: translateY(-160%); }
.skip-link:focus { transform: none; }

.service-strip { background: var(--yellow); border-bottom: 1px solid var(--graphite); }
.service-strip > div { max-width: var(--max); min-height: 34px; margin: auto; padding: 7px 20px; display: flex; justify-content: space-between; gap: 30px; font: 700 12px var(--signal); letter-spacing: .015em; }
.header { max-width: var(--max); height: 78px; margin: auto; padding: 0 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 46px; align-items: center; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--graphite); text-decoration: none; font-size: 19px; font-weight: 700; letter-spacing: -.045em; }
.brand strong { color: var(--green); }
.brand-tool { width: 30px; height: 30px; display: inline-block; position: relative; border: 3px solid currentColor; }
.brand-tool::before, .brand-tool::after { content: ""; position: absolute; background: var(--steel); border: 2px solid currentColor; }
.brand-tool::before { width: 6px; height: 14px; left: 9px; top: -8px; }
.brand-tool::after { width: 14px; height: 6px; left: -8px; top: 9px; }
.header nav { justify-self: end; display: flex; gap: 25px; font-size: 13px; }
.header nav a:hover { text-decoration-thickness: 2px; }
.whatsapp { display: inline-flex; justify-content: space-between; align-items: center; gap: 26px; min-height: 48px; padding: 12px 16px; background: var(--green); color: white; text-decoration: none; font-weight: 700; border: 2px solid var(--green); }
.whatsapp:hover { background: var(--green-dark); border-color: var(--green-dark); }
.header-whatsapp { min-height: 42px; padding-block: 8px; font-size: 13px; }

.hero { max-width: var(--max); margin: auto; padding: 68px 20px 55px; }
.hero-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); column-gap: 70px; align-items: end; }
.hero h1 { max-width: 780px; margin-bottom: 0; font: 800 clamp(3rem, 5.2vw, 4.8rem)/.95 var(--signal); letter-spacing: -.05em; }
.hero-main > p { max-width: 600px; margin: 0 0 4px; color: var(--graphite-2); font-size: 18px; }
.hero-whatsapp { margin-top: 30px; grid-column: 2; width: 100%; }
.quick-facts { margin-top: 65px; display: grid; grid-template-columns: .7fr .8fr 1.5fr; border: 1px solid var(--line); background: var(--white); }
.quick-facts div { min-height: 78px; padding: 15px 18px; border-right: 1px solid var(--line); }
.quick-facts div:last-child { border-right: 0; }
.quick-facts span, .quick-facts strong { display: block; }
.quick-facts span { margin-bottom: 5px; color: #5e6863; font-size: 12px; }
.quick-facts strong { font-size: 15px; }

.symptom-station { background: var(--graphite); color: white; border-block: 8px solid var(--yellow); }
.station-heading, .symptom-controls, .station-result { max-width: var(--max); margin-inline: auto; }
.station-heading { padding: 38px 20px 30px; display: flex; align-items: center; gap: 18px; }
.station-light { width: 18px; height: 18px; flex: 0 0 auto; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 0 5px #695d2b; }
.station-heading h2 { margin: 0 0 3px; font: 800 clamp(2rem, 3vw, 2.8rem)/1 var(--signal); letter-spacing: -.035em; }
.station-heading p { margin: 0; color: #bfc6c2; }
.symptom-controls { padding: 0 20px; display: grid; grid-template-columns: repeat(6, 1fr); }
.symptom-controls button { min-height: 118px; padding: 15px 12px; border: 1px solid #69716d; border-right: 0; background: #303633; color: white; cursor: pointer; text-align: left; font: 700 17px/1.18 var(--signal); }
.symptom-controls button:last-child { border-right: 1px solid #69716d; }
.symptom-controls button span { color: #aeb8b3; font-size: 13px; font-weight: 400; }
.symptom-controls button:hover { background: #3d4541; }
.symptom-controls button.is-active { background: var(--yellow); border-color: var(--yellow); color: var(--graphite); }
.symptom-controls button.is-active span { color: #52491e; }
.station-result { min-height: 125px; padding: 25px 20px 35px; display: grid; grid-template-columns: 1fr auto; gap: 55px; align-items: center; }
.result-label { display: block; margin-bottom: 7px; color: var(--yellow-soft); font-size: 12px; font-weight: 700; }
.station-result p { max-width: 750px; margin: 0; color: #e4e8e5; font-size: 16px; }
.is-disabled { opacity: .45; pointer-events: none; }

.safety-alert { max-width: var(--max); margin: 48px auto 0; padding: 24px 20px; display: grid; grid-template-columns: 58px 1fr auto; gap: 24px; align-items: center; border: 3px solid var(--danger); background: #f5e8e4; }
.warning-mark { width: 52px; height: 52px; display: grid; place-items: center; border: 3px solid var(--danger); border-radius: 50%; color: var(--danger); font: 800 30px var(--signal); }
.safety-alert h2 { margin-bottom: 4px; font: 800 22px var(--signal); }
.safety-alert p { margin: 0; color: #59433f; }
.safety-alert a { padding: 12px 0; font-weight: 700; text-underline-offset: 5px; white-space: nowrap; }

.operations { max-width: var(--max); margin: auto; padding: 105px 20px; }
.operations-head { display: grid; grid-template-columns: 1fr .8fr; gap: 80px; margin-bottom: 45px; align-items: end; }
.operations-head h2, .flow-heading h2 { margin: 0; font: 800 clamp(2.5rem, 4.8vw, 4.6rem)/.95 var(--signal); letter-spacing: -.05em; }
.operations-head p { max-width: 450px; margin: 0; color: var(--graphite-2); font-size: 18px; }
.operations-grid { display: grid; grid-template-columns: 1.1fr .9fr; border: 1px solid var(--line); background: var(--white); }
.coverage-board, .bring-list { padding: 36px; }
.coverage-board { border-right: 1px solid var(--line); }
.operations-grid h3 { margin-bottom: 25px; font: 800 22px var(--signal); }
.place { padding-bottom: 18px; border-bottom: 4px solid var(--yellow); font-size: 27px; font-weight: 700; }
.coverage-board dl { margin: 0; }
.coverage-board dl div { padding: 12px 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #d5d9d6; }
.coverage-board dt { color: #5e6763; }
.coverage-board dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.coverage-note { margin: 18px 0 0; color: #5e6763; font-size: 13px; }
.bring-list ul { margin: 0 0 30px; padding: 0; list-style: none; }
.bring-list li { padding: 13px 0 13px 28px; position: relative; border-bottom: 1px solid #d5d9d6; }
.bring-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 10px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.plain-contact { font-weight: 700; text-underline-offset: 5px; }

.service-flow { padding: 85px max(20px, calc((100vw - var(--max)) / 2)); background: var(--steel-2); border-block: 1px solid var(--line); }
.flow-heading { display: flex; justify-content: space-between; gap: 50px; align-items: end; }
.flow-heading p { max-width: 400px; margin: 0; color: var(--graphite-2); }
.service-flow ol { margin: 55px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 4px solid var(--graphite); }
.service-flow li { padding: 28px 25px 0 0; position: relative; }
.flow-dot { position: absolute; width: 16px; height: 16px; left: 0; top: -10px; background: var(--yellow); border: 3px solid var(--graphite); border-radius: 50%; }
.service-flow strong { font: 800 19px var(--signal); }
.service-flow li p { max-width: 250px; margin: 8px 0 0; color: var(--graphite-2); font-size: 14px; }

.closing-contact { max-width: var(--max); margin: auto; padding: 70px 20px; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.closing-contact p { margin: 0; font: 800 clamp(2rem, 4vw, 3.8rem)/1 var(--signal); letter-spacing: -.04em; }
.closing-contact .whatsapp { min-width: 270px; }
footer { padding: 35px max(20px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 35px; align-items: center; background: var(--graphite); color: #cbd1ce; font-size: 13px; }
footer p { margin: 0; }
.footer-brand { color: white; }
.footer-brand .brand-tool::before, .footer-brand .brand-tool::after { background: var(--graphite); }

@media (max-width: 930px) {
  .header { grid-template-columns: auto 1fr; }
  .header nav { display: none; }
  .header-whatsapp { justify-self: end; }
  .hero-main { grid-template-columns: 1fr; }
  .hero-main > p { margin-top: 28px; }
  .hero-whatsapp { grid-column: auto; width: fit-content; }
  .symptom-controls { grid-template-columns: repeat(3, 1fr); }
  .symptom-controls button { border-bottom: 0; }
  .symptom-controls button:nth-child(3) { border-right: 1px solid #69716d; }
  .symptom-controls button:nth-child(n+4) { border-bottom: 1px solid #69716d; }
  .safety-alert { margin-inline: 20px; grid-template-columns: 58px 1fr; }
  .safety-alert a { grid-column: 2; }
  .operations-head { grid-template-columns: 1fr; gap: 25px; }
  .service-flow ol { grid-template-columns: repeat(2, 1fr); row-gap: 45px; }
  footer { grid-template-columns: 1fr 1fr; }
  footer p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .service-strip > div { display: block; }
  .service-strip span { display: block; }
  .service-strip span:last-child { font-weight: 400; }
  .header { height: 68px; padding-inline: 15px; gap: 12px; }
  .brand { font-size: 17px; }
  .brand-tool { width: 25px; height: 25px; }
  .header-whatsapp { min-height: 38px; padding: 7px 10px; gap: 10px; }
  .hero { padding: 45px 15px 36px; }
  .hero h1 { font-size: clamp(2.45rem, 11.5vw, 3rem); }
  .hero-main > p { font-size: 17px; }
  .hero-whatsapp { width: 100%; }
  .quick-facts { grid-template-columns: .8fr .9fr 1.3fr; margin-top: 36px; }
  .quick-facts div { min-height: 104px; padding: 12px 9px; border-right: 1px solid var(--line); border-bottom: 0; }
  .quick-facts div:last-child { border-right: 0; }
  .quick-facts span { font-size: 10px; }
  .quick-facts strong { font-size: 12px; line-height: 1.3; }
  .station-heading { padding: 28px 15px 24px; }
  .symptom-controls { grid-template-columns: 1fr 1fr; padding-inline: 15px; }
  .symptom-controls button { min-height: 96px; }
  .symptom-controls button:nth-child(2n) { border-right: 1px solid #69716d; }
  .symptom-controls button:nth-child(n+3) { border-bottom: 0; }
  .symptom-controls button:nth-child(n+5) { border-bottom: 1px solid #69716d; }
  .station-result { padding: 24px 15px 30px; grid-template-columns: 1fr; gap: 20px; }
  .station-result .whatsapp { width: 100%; }
  .safety-alert { margin: 30px 15px 0; padding: 20px 16px; grid-template-columns: 42px 1fr; gap: 14px; }
  .warning-mark { width: 40px; height: 40px; font-size: 23px; }
  .safety-alert a { grid-column: 1 / -1; }
  .operations { padding: 75px 15px; }
  .operations-grid { grid-template-columns: 1fr; }
  .coverage-board, .bring-list { padding: 26px 20px; }
  .coverage-board { border-right: 0; border-bottom: 1px solid var(--line); }
  .service-flow { padding: 65px 15px; }
  .flow-heading { display: block; }
  .flow-heading p { margin-top: 18px; }
  .service-flow ol { grid-template-columns: 1fr; border-top: 0; border-left: 4px solid var(--graphite); margin-left: 7px; padding-left: 25px; row-gap: 0; }
  .service-flow li { padding: 0 0 30px; }
  .flow-dot { left: -35px; top: 3px; }
  .closing-contact { padding: 60px 15px; align-items: stretch; flex-direction: column; }
  .closing-contact .whatsapp { width: 100%; min-width: 0; }
  footer { padding-inline: 15px; grid-template-columns: 1fr; gap: 16px; }
  footer p:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}