:root {
  color-scheme: light;
  --ink: #17264e;
  --ink-deep: #111a38;
  --blue: #294493;
  --blue-soft: #e8ecf8;
  --volt: #e3ef70;
  --paper: #f4f3ee;
  --white: #fff;
  --body: #29314b;
  --muted: #596178;
  --line: #d8d9d3;
  --dark-muted: #c2c9dc;
  --font-display: "Barlow Condensed", Impact, sans-serif;
  --font-body: "Cabin", Arial, sans-serif;
  --wrap: 1200px;
  --header-height: 82px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 18px); }
body { margin: 0; background: var(--paper); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.62; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
::selection { background: var(--volt); color: var(--ink-deep); }
.wrap { width: min(calc(100% - 56px), var(--wrap)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 300; top: 10px; left: 10px; transform: translateY(-150%); padding: 10px 16px; background: var(--volt); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
[hidden] { display: none !important; }
section[id] { scroll-margin-top: calc(var(--header-height) + 16px); }

/* The navy medallion and its routed line are drawn from the MJC avatar. */
.site-header { position: sticky; z-index: 50; top: 0; height: var(--header-height); background: rgba(244, 243, 238, .97); border-bottom: 1px solid rgba(23, 38, 78, .12); }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; gap: 9px; color: var(--ink); line-height: 1.05; }
.brand img { width: 54px; height: 54px; flex: none; }
.brand-name { display: flex; flex-direction: column; font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .025em; white-space: nowrap; }
.brand-name b { font: inherit; font-size: 16px; letter-spacing: .035em; }
.brand-name small { margin-top: 5px; color: var(--muted); font: 600 10px/1 var(--font-body); letter-spacing: .105em; text-transform: uppercase; }
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(17px, 2.25vw, 34px); white-space: nowrap; }
.main-nav > a:not(.nav-cta) { min-height: 44px; display: inline-flex; align-items: center; color: var(--ink); font-size: 14px; font-weight: 600; transition: color .2s ease; }
.main-nav > a:not(.nav-cta):hover { color: var(--blue); }
.nav-cta { min-height: 46px; display: inline-flex; align-items: center; gap: 13px; padding: 0 17px; background: var(--ink); color: var(--white); font-size: 13px; font-weight: 700; transition: background .2s ease, color .2s ease; }
.nav-cta:hover { background: var(--volt); color: var(--ink); }
.nav-cta span, .button span, .footer-links span, .text-link span { font-size: 17px; line-height: 1; }
.menu-toggle { display: none; }

.hero { position: relative; overflow: hidden; isolation: isolate; min-height: 660px; padding: 78px 0 0; background: var(--ink); color: var(--white); }
.hero-circuit { position: absolute; z-index: -1; inset: 0 0 34px auto; width: min(58vw, 790px); color: rgba(227, 239, 112, .16); pointer-events: none; }
.hero-circuit svg { width: 100%; height: 100%; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 6%; min-height: 495px; }
.hero-copy { position: relative; z-index: 2; max-width: 570px; padding-bottom: 45px; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 20px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .14em; line-height: 1.3; text-transform: uppercase; }
.eyebrow-light { color: var(--dark-muted); }
.eyebrow-mark { width: 24px; height: 2px; background: var(--volt); flex: none; }
.hero h1, .section h2, .method-intro h2, .contact-main h2 { margin: 0; font-family: var(--font-display); font-size: clamp(68px, 7.6vw, 106px); font-weight: 700; letter-spacing: -.025em; line-height: .86; text-transform: uppercase; }
.hero h1 span { color: var(--volt); }
.hero-lede { max-width: 485px; margin: 25px 0 27px; color: #e1e5ef; font-size: 18px; line-height: 1.55; }
.hero-actions, .contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 21px; padding: 0 20px; font-size: 14px; font-weight: 700; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.button-lime { background: var(--volt); color: var(--ink-deep); }
.button-lime:hover { background: var(--white); }
.button-outline { border: 1px solid rgba(255,255,255,.5); color: var(--white); }
.button-outline:hover { border-color: var(--volt); background: rgba(227,239,112,.08); color: var(--volt); }
.rating-link { width: max-content; max-width: 100%; display: flex; align-items: center; gap: 11px; margin-top: 27px; color: #dbe0ed; font-size: 13px; }
.rating-link strong { color: var(--white); }
.stars { color: #e8d26f; font-size: 15px; letter-spacing: .11em; line-height: 1; white-space: nowrap; }
.rating-arrow { color: var(--volt); }
.hero-visual { position: relative; width: min(100%, 510px); justify-self: end; aspect-ratio: 1 / .93; display: grid; place-items: center; margin-bottom: 34px; border: 1px solid rgba(227,239,112,.4); background: #202f60; }
.hero-visual::before, .hero-visual::after { position: absolute; content: ""; pointer-events: none; }
.hero-visual::before { inset: 13px; border: 1px solid rgba(255,255,255,.12); }
.hero-visual::after { width: 38px; height: 38px; right: -1px; bottom: -1px; background: var(--volt); clip-path: polygon(100% 0,100% 100%,0 100%); }
.hero-visual-label { position: absolute; top: 26px; left: 28px; z-index: 1; display: flex; gap: 8px; color: #e3e9f5; font: 700 10px/1 var(--font-body); letter-spacing: .15em; }
.hero-visual-label span + span { color: var(--volt); }
.breaker-art { width: min(84%, 420px); overflow: visible; }
.panel-shell { fill: #f4f3ee; }
.panel-inner { fill: #dce1e7; }
.panel-row { fill: #fff; stroke: #c4cbd5; stroke-width: 1; }
.breakers rect { fill: #e9edf1; stroke: #929baa; stroke-width: 1; }
.breakers rect:nth-child(6n + 1) { fill: #e3ef70; }
.wire { stroke-width: 2; }
.wire-lime, .node-lime { stroke: var(--volt); fill: var(--volt); }
.wire-paper, .node-paper { stroke: #f4f3ee; fill: #f4f3ee; }
.hero-visual-note { position: absolute; left: 26px; bottom: 22px; display: flex; align-items: center; gap: 8px; color: #edf0f8; font-size: 12px; }
.note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--volt); }
.hero-index { position: absolute; right: 23px; bottom: 17px; color: #cad0df; font: 600 12px/1 var(--font-display); letter-spacing: .1em; }
.hero-index span { color: var(--volt); }
.hero-bottom { min-height: 75px; display: flex; align-items: center; gap: 22px; border-top: 1px solid rgba(255,255,255,.2); color: #c4cbe0; font: 600 12px/1 var(--font-body); letter-spacing: .13em; }
.hero-bottom i { width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }

.trust-strip { background: var(--volt); color: var(--ink); }
.trust-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.trust-inner p { margin: 0; font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: .025em; text-transform: uppercase; }
.trust-inner a { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.trust-inner .stars { color: var(--ink); }
.trust-inner a > span:last-child { font-size: 17px; }

.section { padding: 106px 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 44px; margin-bottom: 47px; }
.section h2, .method-intro h2, .contact-main h2 { color: var(--ink); font-size: clamp(54px, 6vw, 78px); line-height: .91; }
.heading-aside { width: min(370px, 39%); margin: 0 0 4px; color: var(--muted); font-size: 16px; line-height: 1.65; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-card { position: relative; min-height: 312px; padding: 24px 22px 23px; border-right: 1px solid var(--line); }
.service-card:first-child { border-left: 1px solid var(--line); }
.service-card-featured { background: var(--blue-soft); }
.service-number { position: absolute; top: 22px; right: 21px; color: #8790a2; font: 600 15px/1 var(--font-display); }
.service-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 7px 0 25px; border: 1px solid rgba(41,68,147,.3); border-radius: 50%; color: var(--blue); }
.service-icon svg { width: 27px; height: 27px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.service-card h3 { max-width: 210px; margin: 0 0 10px; color: var(--ink); font-family: var(--font-display); font-size: 27px; font-weight: 600; line-height: 1.05; text-transform: uppercase; }
.service-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.service-foot { position: absolute; bottom: 22px; left: 22px; color: var(--blue); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.services-note { display: flex; align-items: center; gap: 11px; margin: 21px 0 0; color: var(--muted); font-size: 14px; }
.services-note span { color: var(--blue); font-size: 20px; }

.section-dark { background: var(--ink); color: var(--white); }
.method-section { position: relative; overflow: hidden; padding: 95px 0 100px; }
.method-section::after { position: absolute; right: -110px; bottom: -250px; width: 510px; height: 510px; border: 1px solid rgba(227,239,112,.13); border-radius: 50%; box-shadow: 0 0 0 45px rgba(227,239,112,.03), 0 0 0 90px rgba(227,239,112,.025); content: ""; pointer-events: none; }
.method-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 12%; }
.method-intro { max-width: 430px; }
.method-intro h2 { color: var(--white); font-size: clamp(58px, 6.5vw, 82px); }
.method-intro h2 em { color: var(--volt); font-style: normal; }
.method-intro > p:last-child { max-width: 360px; margin: 23px 0 0; color: var(--dark-muted); }
.method-list { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.24); }
.method-item { min-height: 108px; display: grid; grid-template-columns: 38px 1fr 28px; align-items: center; gap: 18px; border-bottom: 1px solid rgba(255,255,255,.24); }
.method-item > span { align-self: start; padding-top: 29px; color: var(--volt); font: 600 17px/1 var(--font-display); }
.method-item h3 { margin: 0 0 4px; color: var(--white); font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.1; text-transform: uppercase; }
.method-item p { margin: 0; color: var(--dark-muted); font-size: 13px; line-height: 1.5; }
.method-item svg { width: 24px; height: 24px; fill: none; stroke: var(--volt); stroke-width: 1.5; }

.work-section { padding-bottom: 115px; }
.work-heading { margin-bottom: 35px; }
.gallery-tools { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.filter-list { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip { min-height: 44px; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; border: 1px solid #c9ccd2; border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter-chip span { color: var(--muted); font-size: 11px; }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.is-active { border-color: var(--ink); background: var(--ink); color: var(--white); }
.filter-chip.is-active span { color: var(--volt); }
.gallery-caption { color: var(--muted); font-size: 12px; }
.gallery-grid { columns: 3; column-gap: 17px; }
.photo-card { position: relative; width: 100%; display: block; overflow: hidden; margin: 0 0 17px; padding: 0; break-inside: avoid; border: 0; background: #e5e5e1; color: var(--white); cursor: zoom-in; text-align: left; }
.photo-card img { width: 100%; height: auto; transition: transform .35s ease; }
.photo-card::after { position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent 0%, rgba(15,23,53,.76) 100%); content: ""; pointer-events: none; }
.photo-card:hover img { transform: scale(1.035); }
.photo-caption { position: absolute; z-index: 1; right: 50px; bottom: 17px; left: 18px; display: flex; flex-direction: column; line-height: 1.2; }
.photo-caption b { font: 600 21px/1.05 var(--font-display); letter-spacing: .025em; text-transform: uppercase; }
.photo-caption small { margin-top: 4px; color: #e0e4ef; font-size: 11px; }
.photo-plus { position: absolute; z-index: 1; right: 15px; bottom: 17px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; font-size: 14px; }

.reviews-section { padding: 101px 0 84px; }
.review-heading { align-items: flex-end; margin-bottom: 41px; }
.review-heading h2 { color: var(--white); }
.review-score { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 11px; row-gap: 2px; margin-bottom: 3px; }
.review-score .stars { grid-column: 1 / -1; margin-bottom: 5px; }
.review-score strong { color: var(--volt); font: 700 39px/.9 var(--font-display); }
.review-score > span:not(.stars) { color: var(--dark-muted); font-size: 12px; }
.review-score a { grid-column: 1 / -1; margin-top: 8px; color: var(--volt); font-size: 12px; font-weight: 700; }
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.review-card { min-height: 270px; display: flex; flex-direction: column; padding: 23px 22px 19px; border: 1px solid rgba(255,255,255,.23); background: rgba(255,255,255,.035); }
.review-card-top { display: flex; align-items: center; justify-content: space-between; }
.google-mark { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: var(--white); color: #4285f4; font: 700 16px/1 Arial, sans-serif; }
.review-card blockquote { flex: 1; margin: 20px 0 24px; color: #f4f5f8; font-size: 14px; line-height: 1.58; }
.review-card footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12px; }
.review-card footer strong { color: var(--white); font-weight: 600; }
.review-card footer span { color: var(--dark-muted); white-space: nowrap; }
.review-source { margin: 19px 0 0; color: var(--dark-muted); font-size: 11px; }

.area-section { overflow: hidden; }
.area-grid { display: grid; grid-template-columns: .83fr 1.17fr; align-items: center; gap: 8%; }
.area-copy { max-width: 440px; }
.area-copy h2 { margin-bottom: 21px; }
.area-copy > p:not(.eyebrow) { margin: 0 0 22px; color: var(--muted); }
.text-link { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 14px; font-weight: 700; }
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.area-map { position: relative; min-height: 343px; display: grid; place-items: center; overflow: hidden; border: 1px solid #d2d7e5; background-color: #e9edf5; background-image: linear-gradient(rgba(41,68,147,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(41,68,147,.06) 1px, transparent 1px); background-size: 34px 34px; }
.route-map { width: 100%; height: auto; max-height: 335px; }
.map-road { stroke: #d1d7e5; stroke-width: 18; stroke-linecap: round; }
.map-road-alt { stroke: #d1d7e5; stroke-width: 11; stroke-linecap: round; }
.map-route { stroke: var(--blue); stroke-width: 3; stroke-dasharray: 2 9; stroke-linecap: round; }
.map-road, .map-road-alt, .map-route { fill: none; }
.map-ring { fill: rgba(227,239,112,.25); stroke: var(--blue); stroke-width: 1.5; }
.map-ring-blue { fill: rgba(41,68,147,.11); }
.map-dot { fill: var(--blue); }
.map-dot-blue { fill: var(--ink); }
.route-map text { fill: var(--ink); font: 700 15px var(--font-body); letter-spacing: .15em; }
.route-map .map-label { font: 700 10px var(--font-body); letter-spacing: .1em; }
.map-circuit { fill: none; stroke: var(--blue); stroke-width: 2; }
.map-caption { position: absolute; bottom: 17px; left: 19px; display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.map-caption span { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

.contact-section { position: relative; overflow: hidden; padding: 93px 0 91px; background: var(--blue); color: var(--white); }
.contact-section::before { position: absolute; top: -200px; right: -87px; width: 420px; height: 420px; border: 1px solid rgba(227,239,112,.25); border-radius: 50%; box-shadow: 0 0 0 42px rgba(227,239,112,.045), 0 0 0 84px rgba(227,239,112,.04); content: ""; }
.contact-wrap { position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 12%; }
.contact-main h2 { color: var(--white); font-size: clamp(58px, 6.6vw, 86px); }
.contact-main > p:not(.eyebrow) { max-width: 470px; margin: 20px 0 25px; color: #e0e5f1; }
.contact-details { display: grid; align-content: start; grid-template-columns: 1fr 1fr; gap: 25px 22px; padding-top: 15px; }
.detail-block { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.35); }
.detail-label { display: block; margin-bottom: 9px; color: var(--volt); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.detail-block address, .detail-block p { margin: 0; color: var(--white); font-size: 14px; font-style: normal; line-height: 1.65; }
.detail-block p strong { font-weight: 700; }
.detail-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; color: #e3ef70; font-size: 12px; font-weight: 700; }
.detail-phone { display: inline-block; color: var(--white); font: 600 24px/1.1 var(--font-display); white-space: nowrap; }

.site-footer { background: var(--paper); color: var(--ink); }
.footer-main { min-height: 127px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer-brand .brand-name { font-size: 21px; }
.footer-main > p { max-width: 260px; margin: 0; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 23px; }
.footer-links a { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; }
.footer-links a:hover { color: var(--blue); }
.footer-bottom { border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.footer-bottom .wrap { min-height: 48px; display: flex; align-items: center; justify-content: space-between; }
.footer-bottom a:hover { color: var(--ink); }
.whatsapp-float { position: fixed; z-index: 40; right: 21px; bottom: 21px; min-height: 52px; display: flex; align-items: center; gap: 9px; padding: 0 17px 0 13px; border: 1px solid var(--ink); background: var(--volt); color: var(--ink); font-size: 13px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
.whatsapp-float:hover { transform: translateY(-2px); background: var(--white); }
.whatsapp-float svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

.lightbox { position: fixed; width: min(94vw, 1000px); max-width: none; max-height: 92vh; margin: auto; padding: 42px 20px 20px; overflow: visible; border: 1px solid rgba(255,255,255,.3); background: var(--ink-deep); color: var(--white); }
.lightbox::backdrop { background: rgba(8,12,28,.84); }
.lightbox figure { max-height: calc(92vh - 62px); display: grid; grid-template-rows: minmax(0,1fr) auto; justify-items: center; gap: 12px; margin: 0; }
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: calc(92vh - 112px); object-fit: contain; }
.lightbox figcaption { color: #e6eaf2; font-size: 13px; text-align: center; }
.lightbox-close { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: var(--white); cursor: pointer; font-size: 25px; line-height: 1; }
.lightbox-close:hover { background: var(--volt); color: var(--ink); }

.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1040px) {
  :root { --header-height: 76px; }
  .wrap { width: min(calc(100% - 42px), var(--wrap)); }
  .main-nav { gap: 17px; }
  .main-nav > a:not(.nav-cta) { font-size: 13px; }
  .nav-cta { padding-inline: 13px; gap: 8px; font-size: 12px; }
  .hero { min-height: 620px; padding-top: 57px; }
  .hero-grid { gap: 4%; }
  .hero h1 { font-size: clamp(67px, 8vw, 90px); }
  .service-card { padding-inline: 16px; }
  .service-foot { left: 16px; letter-spacing: .08em; }
  .method-grid { gap: 7%; }
  .contact-wrap { gap: 7%; }
}

@media (max-width: 820px) {
  .main-nav { gap: 13px; }
  .brand-name { font-size: 20px; }
  .brand-name b { font-size: 14px; }
  .brand img { width: 48px; height: 48px; }
  .main-nav > a:not(.nav-cta) { font-size: 12px; }
  .nav-cta { min-height: 43px; padding-inline: 10px; font-size: 11px; }
  .hero { padding-top: 60px; }
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 3%; }
  .hero-visual { width: 100%; }
  .hero-visual-label { left: 19px; font-size: 8px; }
  .hero-visual-note { left: 19px; bottom: 18px; max-width: 72%; font-size: 10px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 275px; border-bottom: 1px solid var(--line); }
  .service-card:nth-child(3) { border-left: 1px solid var(--line); }
  .service-card:nth-child(n + 3) { border-bottom: 0; }
  .method-grid { grid-template-columns: 1fr; gap: 34px; }
  .method-intro { max-width: 540px; }
  .method-intro > p:last-child { max-width: 470px; }
  .review-card { padding-inline: 17px; }
  .review-card blockquote { font-size: 13px; }
  .area-grid { gap: 5%; grid-template-columns: .9fr 1.1fr; }
  .contact-wrap { grid-template-columns: 1fr .85fr; gap: 5%; }
  .contact-details { grid-template-columns: 1fr; gap: 17px; }
  .footer-main { flex-wrap: wrap; padding-block: 23px; }
  .footer-main > p { max-width: none; flex: 1 1 180px; }
}

@media (max-width: 680px) {
  :root { --header-height: 70px; }
  .wrap { width: min(calc(100% - 36px), var(--wrap)); }
  .site-header { z-index: 80; }
  .header-inner { gap: 12px; }
  .brand { gap: 6px; }
  .brand img { width: 46px; height: 46px; }
  .brand-name { font-size: 19px; }
  .brand-name b { font-size: 13px; }
  .brand-name small { margin-top: 4px; font-size: 9px; }
  .menu-toggle { width: 46px; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--ink); background: transparent; cursor: pointer; }
  .menu-toggle span { width: 19px; height: 2px; background: var(--ink); transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .main-nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 8px 18px 18px; border-bottom: 1px solid rgba(23,38,78,.16); background: var(--paper); white-space: normal; }
  .main-nav.is-open { display: flex; }
  .main-nav > a:not(.nav-cta) { min-height: 49px; border-bottom: 1px solid var(--line); font-size: 15px; }
  .main-nav .nav-cta { justify-content: space-between; min-height: 48px; margin-top: 13px; padding-inline: 16px; font-size: 14px; }
  .hero { min-height: 0; padding: 51px 0 0; }
  .hero-circuit { inset: auto -40% 15% auto; width: 120%; height: 70%; opacity: .8; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 26px; }
  .hero-copy { padding-bottom: 0; }
  .eyebrow { gap: 9px; margin-bottom: 16px; font-size: 10px; letter-spacing: .12em; }
  .hero h1 { font-size: clamp(62px, 15.5vw, 86px); line-height: .86; }
  .hero-lede { max-width: 510px; margin: 20px 0 21px; font-size: 16px; line-height: 1.52; }
  .hero-actions { gap: 9px; }
  .button { min-height: 50px; gap: 12px; padding-inline: 14px; font-size: 13px; }
  .rating-link { gap: 8px; margin-top: 21px; font-size: 12px; }
  .rating-link .stars { font-size: 13px; }
  .hero-visual { width: 100%; max-width: 480px; align-self: center; aspect-ratio: 1.14 / 1; margin: 0 0 14px; }
  .breaker-art { width: min(80%, 330px); }
  .hero-visual-label { top: 20px; left: 20px; font-size: 9px; }
  .hero-visual-note { bottom: 14px; left: 20px; }
  .hero-index { right: 15px; bottom: 14px; }
  .hero-bottom { min-height: 58px; justify-content: space-between; gap: 7px; font-size: 9px; letter-spacing: .07em; }
  .hero-bottom i { width: 4px; height: 4px; }
  .trust-inner { min-height: 88px; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; }
  .trust-inner p { font-size: 22px; }
  .trust-inner a { gap: 9px; font-size: 12px; }
  .section { padding: 76px 0; }
  .section-heading { display: block; margin-bottom: 30px; }
  .section h2, .method-intro h2 { font-size: clamp(53px, 13vw, 70px); }
  .heading-aside { width: auto; max-width: 430px; margin: 18px 0 0; font-size: 15px; }
  .service-grid { grid-template-columns: 1fr 1fr; }
  .service-card { min-height: 294px; padding: 20px 13px 20px; }
  .service-card:nth-child(n) { border-bottom: 1px solid var(--line); }
  .service-card:nth-child(odd) { border-left: 1px solid var(--line); }
  .service-card:nth-child(even) { border-right: 1px solid var(--line); }
  .service-card:nth-child(n + 3) { border-bottom: 0; }
  .service-icon { width: 42px; height: 42px; margin: 9px 0 21px; }
  .service-icon svg { width: 24px; height: 24px; }
  .service-number { top: 21px; right: 13px; }
  .service-card h3 { font-size: 23px; }
  .service-card p { font-size: 13px; }
  .service-foot { bottom: 17px; left: 13px; right: 8px; font-size: 8px; letter-spacing: .045em; }
  .services-note { align-items: flex-start; font-size: 13px; }
  .method-section { padding: 74px 0 78px; }
  .method-intro h2 { font-size: 64px; }
  .method-item { min-height: 112px; grid-template-columns: 26px 1fr 21px; gap: 12px; }
  .method-item h3 { font-size: 22px; }
  .method-item p { font-size: 12px; }
  .work-section { padding-bottom: 78px; }
  .gallery-tools { display: block; }
  .filter-list { gap: 6px; }
  .filter-chip { min-height: 44px; gap: 6px; padding-inline: 10px; font-size: 12px; }
  .gallery-caption { display: block; margin-top: 15px; }
  .gallery-grid { columns: 2; column-gap: 10px; }
  .photo-card { margin-bottom: 10px; }
  .photo-caption { right: 31px; bottom: 11px; left: 10px; }
  .photo-caption b { font-size: 17px; }
  .photo-caption small { font-size: 9px; }
  .photo-plus { right: 7px; bottom: 9px; width: 22px; height: 22px; font-size: 12px; }
  .reviews-section { padding: 75px 0 65px; }
  .review-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
  .review-score { flex: none; column-gap: 7px; }
  .review-score strong { font-size: 32px; }
  .review-score > span:not(.stars) { max-width: 80px; font-size: 10px; line-height: 1.25; }
  .review-score .stars { font-size: 12px; }
  .review-grid { grid-template-columns: 1fr; gap: 10px; }
  .review-card { min-height: 0; padding: 20px; }
  .review-card blockquote { margin: 17px 0 20px; font-size: 14px; }
  .area-grid { grid-template-columns: 1fr; gap: 32px; }
  .area-copy h2 { margin-bottom: 17px; }
  .area-map { min-height: 260px; }
  .contact-section { padding: 74px 0 71px; }
  .contact-wrap { grid-template-columns: 1fr; gap: 43px; }
  .contact-main h2 { font-size: clamp(58px, 13.5vw, 75px); }
  .contact-main > p:not(.eyebrow) { margin: 19px 0 22px; font-size: 15px; }
  .contact-details { grid-template-columns: 1fr 1fr; gap: 20px 14px; }
  .detail-phone { font-size: 21px; }
  .footer-main { display: grid; grid-template-columns: 1fr; align-items: start; gap: 15px; padding-block: 23px; }
  .footer-main > p { margin: 0; }
  .footer-links { gap: 14px 21px; }
  .footer-bottom .wrap { min-height: 49px; }
  .whatsapp-float { right: 12px; bottom: 12px; min-height: 48px; padding-inline: 12px; font-size: 12px; }
  .whatsapp-float svg { width: 21px; height: 21px; }
}

@media (max-width: 390px) {
  .wrap { width: calc(100% - 30px); }
  .hero-actions .button { gap: 8px; padding-inline: 11px; font-size: 12px; }
  .rating-link { gap: 6px; font-size: 11px; }
  .rating-link .stars { font-size: 12px; letter-spacing: .07em; }
  .service-card { min-height: 306px; padding-inline: 11px; }
  .service-card h3 { font-size: 21px; }
  .service-card p { font-size: 12px; }
  .service-foot { left: 11px; font-size: 7px; }
  .filter-chip { padding-inline: 8px; font-size: 11px; }
  .contact-actions .button { font-size: 12px; }
  .detail-phone { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}