/* Locally served Noto fonts. License: assets/fonts/OFL-Noto.txt */
@font-face {
  font-family:"Noto Sans Arabic";
  src:url("../fonts/NotoSansArabic-Regular.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:"Noto Sans Arabic";
  src:url("../fonts/NotoSansArabic-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700 900;
  font-display:swap
}
@font-face {
  font-family:"Noto Kufi Arabic";
  src:url("../fonts/NotoKufiArabic-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700 900;
  font-display:swap
}
@font-face {
  font-family:"Noto Naskh Arabic";
  src:url("../fonts/NotoNaskhArabic-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700 900;
  font-display:swap
}
:root {
  color-scheme:light;
  --navy:#072b47;
  --deep:#031d32;
  --darker:#021526;
  --ink:#122d43;
  --sky:#117dbc;
  --sea:#0ca3b1;
  --aqua:#65e3e3;
  --gold:#ffd47e;
  --ice:#eff8fb;
  --pale:#f7fbfc;
  --line:#d8e7ed;
  --muted:#526f83;
  --white:#fff;
  --soft-shadow:0 16px 45px #082c4714;
  --deep-shadow:0 28px 80px #041f3f30;
  --r-sm:15px;
  --r-lg:26px;
  --r-xl:36px;
  --body:"Noto Sans Arabic",Tahoma,Arial,sans-serif;
  --display:"Noto Kufi Arabic","Noto Sans Arabic",Tahoma,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:102px
}
body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:var(--body);
  font-size:14px;
  line-height:2;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip
}
a {
  text-decoration:none;
  color:inherit
}
p,h1,h2,h3,figure {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  letter-spacing:-.035em;
  line-height:1.52;
  font-weight:800
}
h2 {
  font-size:clamp(1.56rem,2.35vw,2.12rem)
}
h3 {
  font-size:1rem
}
p {
  color:var(--muted)
}
strong {
  font-weight:700
}
img {
  display:block;
  width:auto;
  max-width:100%;
  height:auto
}
svg.icon {
  width:21px;
  height:21px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linejoin:round;
  stroke-linecap:round;
  flex:0 0 auto
}
.svg-sprite {
  position:absolute;
  overflow:hidden;
  pointer-events:none
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #f5ad3a;
  outline-offset:3px;
  border-radius:8px
}
.skip-link {
  position:fixed;
  inset-block-start:-100px;
  inset-inline-start:15px;
  z-index:300;
  background:#fff;
  padding:8px 18px;
  color:var(--deep)
}
.skip-link:focus {
  inset-block-start:12px
}
.container {
  width:min(1200px,calc(100% - 48px));
  margin-inline:auto
}
.section {
  padding:96px 0;
  position:relative;
  isolation:isolate
}
.section-heading {
  margin-bottom:34px
}
.section-heading h2 {
  max-inline-size:21ch
}
.section-heading p {
  font-size:14px;
  max-inline-size:75ch;
  margin-top:12px;
  line-height:2.2
}
.section-heading.center {
  text-align:center
}
.section-heading.center h2,.section-heading.center p {
  margin-inline:auto
}
.section-heading.center h2 {
  max-inline-size:min(100%, 38ch)
}
.section-heading.inline {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px
}
.section-heading.inline h2 {
  max-inline-size:24ch
}
.section-heading.inline>div {
  max-width:760px
}
.kicker {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  color:#0c8197;
  font-size:12px;
  font-weight:850;
  line-height:1.65
}
.kicker>span {
  display:block;
  width:21px;
  height:6px;
  background:var(--sea);
  border-radius:20px
}
.kicker.light {
  color:#93f1e7
}
.kicker.light>span {
  background:var(--gold)
}
.mini-line {
  font-size:12px;
  font-weight:800;
  letter-spacing:.035em;
  color:#9bf0e9
}
/* HEADER */
.microbar {
  background:linear-gradient(110deg,#031a2f,#084a66);
  color:#e7f8fd;
  font-size:12px;
  height:34px
}
.microbar-inner {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  height:100%
}
.microbar span,.microbar a {
  display:flex;
  align-items:center;
  gap:8px
}
.microbar a {
  font-weight:800;
  direction:ltr
}
.microbar .icon {
  height:14px;
  width:14px
}
.site-header {
  position:sticky;
  top:0;
  z-index:110;
  background:#fffffff2;
  border-bottom:1px solid #e6eff3;
  backdrop-filter:blur(16px)
}
.header-body {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.brand img {
  width:58px;
  height:58px;
  object-fit:contain
}
.brand-label {
  display:flex;
  flex-direction:column;
  gap:0;
  line-height:1.5
}
.brand-label strong {
  font-family:var(--display);
  color:var(--navy);
  font-size:18px;
  white-space:nowrap
}
.brand-label strong em {
  font-style:normal;
  color:var(--sea)
}
.brand-label small {
  color:#526f83;
  font-size:10px;
  white-space:nowrap
}
.desktop-nav {
  display:flex;
  gap:23px;
  align-items:center;
  font-size:12px;
  font-weight:800;
  color:#375770
}
.desktop-nav a {
  white-space:nowrap;
  transition:color .2s
}
.desktop-nav a:hover {
  color:var(--sea)
}
.header-actions {
  display:flex;
  gap:10px;
  align-items:center;
  flex-shrink:0
}
.header-phone {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  border-radius:14px;
  padding:10px 18px;
  font-family:var(--display);
  font-size:12px;
  color:#fff;
  min-height:47px;
  transition:transform .2s,background .2s
}
.header-phone:hover {
  background:#0a5172;
  transform:translateY(-2px)
}
.header-phone .icon {
  height:19px;
  width:19px;
  color:var(--gold)
}
.mobile-menu {
  display:none
}
.mobile-menu>summary {
  cursor:pointer;
  list-style:none;
  display:grid;
  place-items:center;
  background:var(--pale);
  border:1px solid var(--line);
  height:44px;
  width:44px;
  border-radius:13px
}
.mobile-menu>summary::-webkit-details-marker {
  display:none
}
.mobile-menu nav {
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  z-index:140;
  min-width:0;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:var(--deep-shadow);
  overflow:hidden;
  width:min(300px,calc(100vw - 30px));
  max-height:calc(100dvh - 140px);
  overflow-y:auto;
  overscroll-behavior:contain
}
.mobile-menu nav a {
  display:block;
  padding:9px 17px;
  font-size:14px;
  font-weight:800;
  border-bottom:1px solid #eff4f6;
  min-height:44px
}
.mobile-menu nav a:hover {
  background:#eefbfc
}
.menu-close,.mobile-menu[open] .menu-open {
  display:none!important
}
.mobile-menu[open] .menu-close {
  display:block!important
}
/* HERO — navy, totally different from washing-machine landing */
.hero {
  background:radial-gradient(circle at 4% 75%,#0d6d7c6b 0%,transparent 37%),radial-gradient(circle at 85% 4%,#12608377 0%,transparent 36%),linear-gradient(125deg,#042237 2%,#052c4a 57%,#031a2c 100%);
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:86px 0 0;
  isolation:isolate
}
.hero::before {
  content:"";
  position:absolute;
  left:-100px;
  top:0;
  width:460px;
  height:460px;
  background:repeating-radial-gradient(circle,#6de6ea22 0 2px,transparent 3px 29px);
  border-radius:50%;
  pointer-events:none;
  opacity:.6
}
.hero::after {
  content:"";
  position:absolute;
  right:-110px;
  bottom:-230px;
  width:500px;
  height:500px;
  border-radius:50%;
  background:radial-gradient(circle,#0f8c9b70,transparent 65%);
  z-index:-1
}
.hero-grid {
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.92fr);
  gap:5vw;
  align-items:center;
  position:relative;
  z-index:1;
  min-height:0
}
.hero-content {
  max-width:660px;
  padding:0 0 44px
}
.eyebrow {
  display:inline-flex;
  gap:9px;
  align-items:center;
  font-size:12px;
  font-weight:700;
  color:#baf7f5;
  background:#0a617566;
  border:1px solid #57d4dd4d;
  border-radius:100px;
  padding:6px 15px;
  margin-bottom:23px
}
.eyebrow .icon {
  width:17px;
  height:17px;
  color:var(--gold)
}
.hero h1 {
  font-size:clamp(1.9rem,3vw,3rem);
  line-height:1.54;
  max-width:615px;
  color:#fff;
  text-wrap:balance
}
.hero h1 span {
  display:block;
  color:var(--gold);
  line-height:1.42
}
.hero-statement {
  font-family:var(--display);
  font-size:clamp(.96rem,1.6vw,1.24rem);
  font-weight:700;
  color:#d9feff;
  margin-top:13px
}
.hero-description {
  font-size:14px;
  color:#c6dfec;
  line-height:2.22;
  margin-top:21px;
  max-width:56ch
}
.hero-description strong {
  color:white
}
.hero-buttons {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:30px;
  flex-wrap:wrap
}
.action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 21px;
  min-height:52px;
  border-radius:15px;
  font:800 12px var(--display);
  transition:transform .22s,box-shadow .22s,background .22s;
  white-space:normal;
  text-align:center;
  line-height:1.9;
  max-width:100%
}
.action:hover {
  transform:translateY(-3px)
}
.action-gold {
  background:linear-gradient(115deg,#f7b956,#ffe19a);
  color:#07304e;
  box-shadow:0 13px 26px #020d1927
}
.action-gold:hover {
  box-shadow:0 15px 34px #020d1945
}
.action .icon {
  width:19px;
  height:19px
}
.action .arrow-icon {
  width:17px;
  height:17px;
  margin-inline-start:8px
}
.ghost-action {
  background:#ffffff0e;
  color:#dbf5fb;
  border:1px solid #c5f5f63a
}
.ghost-action .icon {
  width:15px;
  height:15px
}
.action-dark {
  background:linear-gradient(120deg,#052b48,#0a6680);
  color:white;
  box-shadow:0 12px 25px #03264433
}
.hero-substats {
  border-top:1px solid #8fdfed2f;
  display:flex;
  flex-wrap:wrap;
  gap:12px 20px;
  margin-top:29px;
  padding-top:19px
}
.hero-substats span {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:#b6d5e0;
  font-weight:700
}
.hero-substats .icon {
  background:#0d896a7c;
  color:#aff4d5;
  width:17px;
  height:17px;
  border-radius:50%;
  padding:2px
}
.hero-scene {
  height:auto;
  min-width:0;
  position:relative;
  isolation:isolate;
  align-self:end;
  aspect-ratio:860 / 1174;
  width:100%;
  max-width:500px;
  justify-self:center
}
.hero-photo {
  position:absolute;
  inset:0 16px 0 15px;
  border:7px solid #ffffff16;
  border-radius:32px 32px 0 0;
  overflow:hidden;
  background:#207e91;
  box-shadow:var(--deep-shadow)
}
.hero-photo::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,#031b2e99,transparent 45%);
  pointer-events:none
}
.hero-photo picture,.hero-photo img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 28%
}
.orbital {
  border-radius:50%;
  position:absolute;
  pointer-events:none
}
.orbital-a {
  width:140px;
  height:140px;
  border:1px dashed #8de9eb86;
  top:22px;
  left:-28px
}
.orbital-b {
  width:86px;
  height:86px;
  background:#42c8c833;
  bottom:37px;
  right:-30px
}
.hero-scene-chip {
  position:absolute;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  font-family:var(--display);
  font-size:12px;
  border-radius:15px;
  box-shadow:0 17px 35px #0003;
  backdrop-filter:blur(12px)
}
.hero-scene-chip .icon {
  width:22px;
  height:22px
}
.chip-top {
  top:19%;
  left:-18px;
  background:#fffffff2;
  color:#103c55
}
.chip-top .icon {
  color:var(--sea)
}
.chip-bottom {
  bottom:32px;
  right:-16px;
  background:#074a61e8;
  color:#eaf9fb;
  border:1px solid #a1f8ef65
}
.chip-bottom .icon {
  color:var(--gold)
}
.hero-bottom-line {
  display:flex;
  justify-content:center;
  gap:20px;
  color:#c4e3e7;
  background:#011a2e75;
  border-top:1px solid #75ddeb26;
  padding:11px;
  font-size:12px;
  position:relative;
  z-index:3;
  flex-wrap:wrap;
  text-align:center
}
.dot-separator {
  color:var(--gold)
}
/* TRUST */
.trust-row {
  background:#fff;
  border-bottom:1px solid #e8f0f2
}
.trust-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0
}
.trust-unit {
  display:flex;
  align-items:center;
  gap:15px;
  padding:26px 18px
}
.trust-unit:not(:last-child) {
  border-left:1px solid #edf2f6
}
.trust-icon {
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  background:linear-gradient(150deg,#dcf6f5,#ebf3fb);
  color:#0e718c;
  flex:0 0 auto
}
.trust-icon .icon {
  width:25px;
  height:25px
}
.trust-unit strong {
  display:block;
  font:800 12px var(--display);
  color:#143b53
}
.trust-unit p {
  font-size:12px;
  line-height:1.8;
  margin-top:3px
}
/* FAULTS */
.fault-section {
  background:linear-gradient(180deg,#fff 0%,#f7fbfd 100%)
}
.fault-layout {
  display:grid;
  grid-template-columns:minmax(0,1.66fr) minmax(250px,.76fr);
  gap:22px
}
.fault-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px
}
.fault-card {
  padding:23px 22px 19px;
  background:#fff;
  border:1px solid #dce9ee;
  border-radius:22px;
  position:relative;
  overflow:hidden;
  transition:transform .23s,border-color .23s,box-shadow .23s;
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.fault-card:hover {
  transform:translateY(-4px);
  border-color:#acd9dc;
  box-shadow:var(--soft-shadow)
}
.fault-card::after {
  content:"";
  position:absolute;
  left:-31px;
  bottom:-44px;
  width:100px;
  height:100px;
  border:1px solid #c3eef0;
  border-radius:50%;
  box-shadow:0 0 0 18px #ddf6f844;
  pointer-events:none
}
.fault-icon {
  display:grid;
  place-items:center;
  border-radius:16px;
  width:52px;
  height:52px;
  margin-bottom:16px
}
.fault-icon .icon {
  width:25px;
  height:25px
}
.fault-icon.blue {
  background:#e7efff;
  color:#2a66bf
}
.fault-icon.cyan {
  background:#e3f9fb;
  color:#078d9a
}
.fault-icon.amber {
  background:#fff1d8;
  color:#b77a1d
}
.fault-icon.teal {
  background:#e5f8ed;
  color:#177e70
}
.fault-card h3 {
  font-size:14px;
  color:#123954
}
.fault-card p {
  margin-top:8px;
  min-height:0;
  font-size:13px;
  line-height:2.05;
  position:relative;
  z-index:1
}
.fault-card a {
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:auto;
  min-height:44px;
  font-weight:800;
  color:#0a718f;
  font-size:12px;
  position:relative;
  z-index:2;
  padding-top:12px
}
.fault-card a .icon {
  width:14px;
  height:14px
}
.fault-aside {
  background:#062d47;
  overflow:hidden;
  border-radius:27px;
  display:flex;
  flex-direction:column;
  position:relative;
  box-shadow:var(--soft-shadow);
  align-self:start
}
.fault-aside-image {
  height:auto;
  min-height:0;
  overflow:hidden;
  aspect-ratio:700 / 960
}
.fault-aside-image img {
  height:100%;
  width:100%;
  object-fit:contain;
  object-position:center
}
.fault-aside-panel {
  padding:23px 22px 28px;
  background:linear-gradient(145deg,#093f5b,#032039);
  flex:1
}
.fault-aside-panel h3 {
  font-size:17px;
  color:#fff;
  line-height:1.75;
  margin-top:11px
}
.fault-aside-panel p {
  font-size:13px;
  color:#b6d3df;
  margin-top:13px;
  line-height:2.1
}
/* SERVICES BENTO */
.services-section {
  background:#f1f9fa
}
.services-section::before {
  content:"";
  position:absolute;
  top:25px;
  left:7%;
  width:210px;
  height:210px;
  background:radial-gradient(circle,#6fcbd51c 0 15%,transparent 16%);
  background-size:18px 18px;
  opacity:.65
}
.outline-link {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #afdce3;
  padding:11px 14px;
  color:#08738b;
  font-size:12px;
  font-weight:800;
  white-space:normal;
  border-radius:13px;
  min-height:47px;
  line-height:1.9;
  max-width:100%
}
.outline-link .icon {
  width:18px;
  height:18px
}
.service-bento {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:auto;
  gap:18px;
  align-items:stretch
}
.service-large {
  grid-row:span 3;
  grid-column:span 2;
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:32px;
  background:radial-gradient(circle at 4% 2%,#128fa466,transparent 50%),linear-gradient(135deg,#05283e,#0a5270);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:0;
  isolation:isolate
}
.service-index {
  font-size:12px;
  color:#b3e6e5;
  letter-spacing:normal;
  position:static;
  margin-bottom:18px
}
.large-service-icon {
  width:64px;
  height:64px;
  border-radius:22px;
  background:#ffffff16;
  border:1px solid #ffffff45;
  display:grid;
  place-items:center;
  margin-bottom:20px;
  flex-shrink:0
}
.large-service-icon .icon {
  width:41px;
  height:41px;
  color:#ffdf9d
}
.service-large h3 {
  font-size:23px;
  line-height:1.5;
  max-width:24ch
}
.service-large p {
  color:#c2e0e8;
  font-size:14px;
  margin-top:13px;
  max-width:56ch;
  line-height:2.1
}
.service-large a {
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  font-weight:800;
  color:var(--gold);
  min-height:43px
}
.service-large a .icon {
  width:18px;
  height:18px
}
.bento-orbits {
  position:absolute;
  pointer-events:none;
  top:-145px;
  left:-135px;
  width:330px;
  height:330px;
  border:1px dashed #a8f9ed5c;
  border-radius:50%;
  box-shadow:0 0 0 50px #a8f9ed08;
  z-index:-1
}
.service-tile {
  background:#fff;
  border:1px solid #d6e9ec;
  border-radius:23px;
  padding:22px;
  min-width:0;
  box-shadow:0 6px 24px #074d5a06;
  transition:transform .2s,box-shadow .2s;
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
.service-tile:hover {
  transform:translateY(-4px);
  box-shadow:var(--soft-shadow)
}
.service-tile>span {
  display:grid;
  place-items:center;
  width:45px;
  height:45px;
  border-radius:14px;
  background:#e8f7f8;
  color:#087e91;
  margin-bottom:14px
}
.service-tile>span .icon {
  width:24px;
  height:24px
}
.service-tile h3 {
  font-size:14px;
  color:#103a54;
  line-height:1.8
}
.service-tile p {
  font-size:13px;
  line-height:2;
  margin-top:8px
}
/* IMAGE STORY */
.compare-section {
  background:#fff
}
.compare-grid {
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  gap:62px;
  align-items:center
}
.compare-photo {
  position:relative;
  border-radius:32px;
  overflow:hidden;
  min-height:0;
  background:#ebf4f7;
  box-shadow:var(--soft-shadow);
  aspect-ratio:1040 / 558
}
.compare-photo>img {
  width:100%;
  height:100%;
  min-height:0;
  object-fit:contain
}
.compare-photo::after {
  content:"";
  position:absolute;
  inset:60% 0 0;
  background:linear-gradient(0deg,#061c318d,transparent);
  display:none
}
.image-caption {
  position:static;
  z-index:2;
  bottom:18px;
  right:18px;
  background:#fff;
  border-radius:0;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--display);
  font-size:12px;
  color:#093b57
}
.image-caption .icon {
  width:20px;
  height:20px;
  color:#0c90a0
}
.compare-copy h2 {
  max-width:21ch
}
.compare-copy>p {
  margin-top:18px;
  font-size:14px;
  line-height:2.25
}
.check-stack {
  margin:22px 0;
  display:grid;
  gap:12px
}
.check-stack>div {
  display:flex;
  align-items:flex-start;
  gap:10px
}
.check-stack>div>span {
  display:grid;
  place-items:center;
  width:24px;
  height:24px;
  background:#def7ee;
  border-radius:50%;
  flex:0 0 auto;
  margin-top:8px;
  color:#078970
}
.check-stack .icon {
  width:14px;
  height:14px
}
.check-stack p {
  font-size:12px;
  line-height:2.05
}
/* PRICE SECTION */
.cost-section {
  background:radial-gradient(circle at 5% 82%,#0f697a85,transparent 36%),linear-gradient(120deg,#042638,#062f49 65%,#031d32);
  color:white;
  overflow:hidden
}
.cost-section::before {
  content:"";
  position:absolute;
  left:-100px;
  top:-150px;
  width:440px;
  height:440px;
  border-radius:50%;
  border:1px solid #70dfe54a;
  box-shadow:0 0 0 80px #67d7dc07,0 0 0 160px #67d7dc06
}
.cost-layout {
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.18fr);
  align-items:center;
  gap:65px
}
.cost-intro h2 {
  max-width:17ch
}
.cost-intro>p {
  margin-top:19px;
  font-size:14px;
  color:#c3dfe7;
  line-height:2.25
}
.cost-callout {
  padding:15px;
  border-radius:17px;
  background:#0f577333;
  display:flex;
  gap:11px;
  align-items:flex-start;
  border:1px solid #69cbd339;
  margin:23px 0
}
.cost-callout .icon {
  color:var(--gold);
  margin-top:3px
}
.cost-callout p {
  font-size:12px;
  color:#c8e6e9;
  line-height:2
}
.cost-table-shell {
  background:#fff;
  border-radius:26px;
  padding:9px 23px 17px;
  box-shadow:var(--deep-shadow);
  color:var(--ink);
  overflow:hidden
}
.cost-table {
  width:100%;
  border-collapse:collapse;
  text-align:right;
  table-layout:fixed;
  overflow-wrap:anywhere
}
.cost-table caption {
  font-family:var(--display);
  font-size:14px;
  font-weight:800;
  text-align:right;
  padding:15px 8px;
  color:#123b53
}
.cost-table th,.cost-table td {
  padding:12px 10px;
  border-bottom:1px solid #e7f0f4;
  text-align:right;
  line-height:1.9
}
.cost-table th {
  font-weight:750;
  color:#123e57
}
.cost-table thead th {
  font-size:12px;
  background:#edf7fa
}
.cost-table tbody th {
  font-size:12px;
  width:44%;
  font-weight:800
}
.cost-table td {
  font-size:12px;
  color:#5e788a
}
.table-footnote {
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:12px 0 0;
  color:#526f83;
  font-size:12px;
  line-height:1.9
}
.table-footnote .icon {
  color:#0a8d94;
  width:17px;
  height:17px;
  flex:0 0 auto
}
/* STEPS */
.process-section {
  background:#fff
}
.process-list {
  list-style:none;
  margin:0;
  padding:8px 0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  position:relative
}
.process-list::before {
  content:"";
  position:absolute;
  right:10%;
  left:10%;
  top:83px;
  border-top:2px dashed #bedee4;
  pointer-events:none
}
.process-list>li {
  position:relative;
  text-align:center;
  padding:0 8px
}
.process-number {
  display:block;
  font:800 13px var(--display);
  color:#079caf;
  margin-bottom:15px
}
.process-icon {
  margin:0 auto 15px;
  display:grid;
  place-items:center;
  height:80px;
  width:80px;
  border:6px solid #fff;
  background:#eaf8f8;
  border-radius:24px;
  color:#097e91;
  box-shadow:0 12px 29px #063a5b15;
  position:relative
}
.process-icon .icon {
  height:34px;
  width:34px
}
.process-list h3 {
  font-size:13px;
  color:#124359
}
.process-list p {
  font-size:12px;
  margin-top:8px;
  line-height:1.95
}
/* BRANDS */
.brands-section {
  background:#f7fbfd
}
.brand-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.84fr);
  gap:62px;
  align-items:center
}
.brand-layout h2 {
  max-width:20ch
}
.brand-layout p {
  font-size:14px;
  line-height:2.2;
  margin-top:16px
}
.brands-pills {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px
}
.brands-pills span {
  background:white;
  border:1px solid #d6e8ed;
  padding:8px 14px;
  border-radius:11px;
  color:#1c5870;
  font-size:12px;
  font-weight:800
}
.inline-note {
  display:flex;
  gap:8px;
  align-items:flex-start;
  color:#526f83;
  font-size:12px!important;
  margin:16px 0 22px!important
}
.inline-note .icon {
  flex:0 0 auto;
  margin-top:4px;
  color:#088fa1;
  width:18px;
  height:18px
}
.model-image {
  position:relative;
  overflow:hidden;
  border-radius:31px;
  box-shadow:var(--soft-shadow);
  height:auto
}
.model-image>img {
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:center
}
.model-stamp {
  position:static;
  left:12px;
  right:12px;
  bottom:15px;
  display:flex;
  align-items:center;
  gap:9px;
  background:#04334ce8;
  color:white;
  border:1px solid #ffffff4d;
  border-radius:0;
  padding:12px 16px;
  font:700 11px var(--display)
}
.model-stamp .icon {
  color:var(--gold)
}
/* AREA */
.area-section {
  background:#fff
}
.area-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
  align-items:center;
  gap:55px
}
.area-copy>p {
  font-size:14px;
  line-height:2.15;
  margin-top:17px
}
.area-copy h2 {
  max-width:20ch
}
.district-tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px 9px;
  margin-top:20px
}
.district-tags span {
  display:inline-flex;
  align-items:center;
  background:#eff8fa;
  border:1px solid #d2e7ec;
  color:#17647a;
  border-radius:40px;
  padding:5px 11px;
  font-weight:800;
  font-size:12px
}
.district-map {
  background:linear-gradient(160deg,#effafa,#fff);
  border-radius:28px;
  padding:16px;
  border:1px solid #d3e9e9;
  box-shadow:var(--soft-shadow);
  overflow:hidden
}
.district-map-top {
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 10px 5px
}
.map-pulse {
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:15px;
  color:#fff;
  background:#0c7c8b;
  box-shadow:0 0 0 5px #c7edee80
}
.district-map-top strong {
  display:block;
  font:800 13px var(--display);
  color:#0e4c65
}
.district-map-top small {
  color:#526f83;
  font-size:12px
}
.district-map>img {
  width:100%;
  height:auto;
  max-height:460px;
  object-fit:contain;
  mix-blend-mode:multiply
}
.district-map figcaption {
  font-size:12px;
  color:#526f83;
  text-align:center;
  line-height:1.9;
  padding:10px 5px
}
/* PREVENTION */
.prevent-section {
  background:linear-gradient(180deg,#f4fbfd,#fff)
}
.prevent-grid {
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.12fr);
  gap:64px;
  align-items:center
}
.prevent-picture {
  height:auto;
  overflow:hidden;
  border-radius:28px;
  background:#eef8fa;
  box-shadow:var(--soft-shadow)
}
.prevent-picture img {
  width:100%;
  height:auto;
  object-fit:contain;
  object-position:50% 42%
}
.prevent-content h2 {
  max-width:20ch
}
.prevent-content>p {
  font-size:14px;
  margin-top:17px;
  line-height:2.15
}
.prevent-points {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px
}
.prevent-points>div {
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:14px;
  border:1px solid #dcebef;
  border-radius:18px;
  background:white;
  box-shadow:0 6px 22px #083c4609
}
.prevent-points>div>span {
  display:grid;
  place-items:center;
  width:29px;
  height:29px;
  flex:0 0 auto;
  border-radius:50%;
  background:#dcf7f5;
  color:#087b85;
  font-weight:900;
  font-size:13px
}
.prevent-points h3 {
  font-size:12px
}
.prevent-points p {
  font-size:12px;
  line-height:1.95;
  margin-top:7px
}
/* PHONE GUIDE */
.phone-guide {
  padding:0 0 95px;
  background:#fff
}
.guide-panel {
  background:radial-gradient(circle at 15% 50%,#0f768f70,transparent 42%),linear-gradient(120deg,#042b46,#0a4762);
  border-radius:30px;
  color:white;
  display:grid;
  grid-template-columns:80px minmax(0,1fr) auto;
  gap:20px;
  align-items:center;
  padding:30px 36px;
  box-shadow:var(--soft-shadow)
}
.guide-icon {
  display:grid;
  place-items:center;
  width:70px;
  height:70px;
  border-radius:24px;
  background:#ffffff18;
  border:1px solid #ffffff36;
  color:#ffdf9d
}
.guide-icon .icon {
  width:38px;
  height:38px
}
.guide-panel h2 {
  font-size:20px
}
.guide-panel p {
  color:#c3dfe7;
  margin-top:7px;
  font-size:12px;
  line-height:2.1;
  max-width:70ch
}
/* FAQ */
.faq-section {
  background:#f4f9fb
}
.faq-layout {
  display:grid;
  grid-template-columns:minmax(0,.65fr) minmax(0,1fr);
  gap:75px
}
.faq-sidebar {
  position:sticky;
  top:120px;
  align-self:start
}
.faq-sidebar h2 {
  max-width:16ch
}
.faq-sidebar p {
  margin-top:13px;
  font-size:14px;
  line-height:2.15
}
.faq-support {
  display:flex;
  gap:13px;
  align-items:center;
  padding:19px;
  border:1px solid #cfe6eb;
  border-radius:20px;
  background:#fff;
  margin-top:22px;
  font-size:12px;
  font-weight:700
}
.faq-support>span {
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  background:#e3f7f8;
  border-radius:13px;
  color:#078597
}
.faq-support a {
  display:block;
  direction:ltr;
  text-align:right;
  color:#07678e;
  font-weight:900
}
.faq-accordions {
  display:grid;
  gap:11px
}
.faq-accordions details {
  background:#fff;
  border:1px solid #d9e8ec;
  border-radius:16px;
  overflow:visible;
  transition:border-color .2s,box-shadow .2s
}
.faq-accordions details[open] {
  border-color:#a1d3df;
  box-shadow:0 10px 23px #06365110
}
.faq-accordions summary {
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  font:800 12px/2 var(--display);
  padding:17px 19px;
  color:#193d57;
  min-height:59px
}
.faq-accordions summary::-webkit-details-marker {
  display:none
}
.faq-accordions summary .icon {
  width:19px;
  height:19px;
  color:#188498;
  transition:transform .2s
}
.faq-accordions details[open] summary .icon {
  transform:rotate(180deg)
}
.faq-accordions details p {
  font-size:12px;
  line-height:2.2;
  padding:2px 19px 19px;
  margin:0;
  color:#587387
}
/* CONTACT */
.contact-section {
  padding:96px 0;
  background:linear-gradient(180deg,#fff 0%,#f8fcfe 100%)
}
.contact-panel {
  background:radial-gradient(circle at 2% 15%,#17799388,transparent 35%),linear-gradient(125deg,#062b45,#09263f);
  border-radius:32px;
  color:white;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  gap:45px;
  padding:52px 55px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--deep-shadow)
}
.contact-panel::before {
  content:"";
  position:absolute;
  left:-180px;
  bottom:-260px;
  width:500px;
  height:500px;
  border-radius:50%;
  border:1px dashed #6fdee25c;
  pointer-events:none
}
.contact-intro,.phone-cards {
  position:relative;
  z-index:1
}
.contact-intro h2 {
  max-width:19ch;
  font-size:clamp(1.55rem,2.45vw,2.4rem)
}
.contact-intro p {
  font-size:14px;
  color:#c2dce7;
  line-height:2.25;
  margin-top:17px
}
.contact-note {
  display:flex;
  gap:9px;
  align-items:center;
  color:#96e9e5;
  font-weight:800;
  font-size:12px;
  margin-top:22px
}
.contact-note .icon {
  color:var(--gold)
}
.phone-cards {
  display:grid;
  gap:11px
}
.phone-primary {
  background:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  border-radius:17px;
  padding:15px;
  color:var(--navy);
  box-shadow:0 14px 30px #0002;
  min-height:79px;
  min-width:0
}
.call-icon {
  display:grid;
  place-items:center;
  width:50px;
  height:50px;
  background:#dff7f5;
  border-radius:15px;
  color:#0b8894;
  flex-shrink:0
}
.phone-primary span:nth-child(2) {
  display:grid;
  gap:1px
}
.phone-primary small {
  font-size:12px;
  color:#638192
}
.phone-primary strong {
  font:850 22px var(--display);
  white-space:nowrap
}
.phone-arrow {
  margin-right:auto;
  transform:rotate(180deg);
  color:#1284a3
}
.phone-secondary {
  display:flex;
  align-items:center;
  gap:13px;
  padding:12px 18px;
  min-height:58px;
  border:1px solid #9bdde350;
  border-radius:14px;
  background:#ffffff0c;
  color:#d2edf3;
  font-size:12px;
  flex-wrap:wrap
}
.phone-secondary span {
  min-width:0
}
.phone-secondary strong {
  font-size:17px;
  color:#fff;
  white-space:nowrap
}
.phone-secondary .icon {
  margin-right:auto;
  width:18px;
  height:18px;
  color:#a2e7e7
}
/* FOOTER */
.footer {
  background:#031b2d;
  color:#d6e7ee;
  border-top:1px solid #0c4660
}
.footer-top {
  display:grid;
  grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.72fr));
  gap:42px;
  padding:61px 0 37px
}
.footer-about img {
  width:158px;
  height:158px;
  border-radius:15px;
  object-fit:contain;
  background:#fff
}
.footer-about p {
  font-size:12px;
  color:#abc1ce;
  line-height:2.2;
  margin-top:15px;
  max-width:37ch
}
.footer-links,.footer-contacts {
  display:flex;
  flex-direction:column;
  gap:4px
}
.footer-links strong,.footer-contacts strong {
  font:800 12px var(--display);
  color:white;
  margin-bottom:8px
}
.footer-links a,.footer-contacts a {
  font-size:12px;
  color:#afc5d1;
  transition:color .2s;
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.footer-links a:hover,.footer-contacts a:hover {
  color:var(--gold)
}
.footer-contacts a {
  direction:ltr;
  text-align:right;
  font-weight:800
}
.footer-contacts small {
  font-size:12px;
  color:#9bb2bf;
  margin-top:6px
}
.footer-bottom {
  border-top:1px solid #20445a;
  display:flex;
  gap:15px;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#8facba;
  padding:20px 0
}
.footer-bottom a {
  font-weight:700;
  color:#c7e7e8
}
/* TABLETS */
@media(max-width:1080px) {
  .desktop-nav {
    display:none
  }
  .mobile-menu {
    display:block;
    position:relative
  }
  .header-body {
    height:72px
  }
  .hero-grid {
    gap:24px
  }
  .hero h1 {
    font-size:clamp(1.83rem,3vw,2.55rem)
  }
  .hero-scene {
    height:auto
  }
  .fault-layout {
    grid-template-columns:minmax(0,1fr)
  }
  .fault-aside {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }
  .fault-aside-image {
    height:auto;
    min-height:0
  }
  .fault-aside-panel {
    display:flex;
    flex-direction:column;
    justify-content:center
  }
  .guide-panel {
    grid-template-columns:65px minmax(0,1fr)
  }
  .guide-panel>.action {
    grid-column:2;
    justify-self:start
  }
  .faq-layout {
    gap:32px
  }
  .contact-panel {
    padding:40px
  }
}
@media(max-width:900px) {
  .section {
    padding:76px 0
  }
  .hero {
    padding-top:54px
  }
  .hero-grid {
    grid-template-columns:1fr
  }
  .hero-content {
    max-width:none;
    padding-bottom:5px
  }
  .hero h1 {
    font-size:clamp(2rem,4.3vw,2.8rem)
  }
  .hero-description {
    max-width:75ch
  }
  .hero-scene {
    width:min(500px,100%);
    margin:0 auto;
    height:auto;
    align-self:center
  }
  .hero-photo {
    inset:0 22px;
    border-radius:32px 32px 0 0
  }
  .hero-scene-chip.chip-top {
    left:7px
  }
  .hero-scene-chip.chip-bottom {
    right:7px
  }
  .compare-grid,.cost-layout,.brand-layout,.area-layout,.prevent-grid,.faq-layout {
    grid-template-columns:1fr;
    gap:34px
  }
  .compare-photo {
    min-height:0
  }
  .compare-photo img {
    min-height:0
  }
  .cost-intro h2 {
    max-width:28ch
  }
  .service-bento {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .service-large {
    grid-column:span 2;
    grid-row:auto;
    min-height:0
  }
  .process-list {
    gap:7px
  }
  .process-list h3 {
    font-size:12px
  }
  .process-list p {
    font-size:12px
  }
  .brand-layout .model-image,.prevent-picture {
    height:auto
  }
  .faq-sidebar {
    position:static
  }
  .faq-sidebar h2 {
    max-width:30ch
  }
  .footer-top {
    grid-template-columns:1.3fr 1fr 1fr;
    gap:35px
  }
  .footer-about {
    grid-row:span 2
  }
  .contact-intro h2 {
    max-width:25ch
  }
}
@media(max-width:650px) {
  .container {
    width:min(100% - 30px,1200px)
  }
  .microbar {
    display:none
  }
  .header-body {
    height:65px;
    gap:10px
  }
  .brand {
    gap:5px
  }
  .brand img {
    width:44px;
    height:44px
  }
  .brand-label strong {
    font-size:13px
  }
  .brand-label small {
    font-size:8px
  }
  .header-actions {
    gap:7px
  }
  .header-phone {
    width:43px;
    height:43px;
    padding:0;
    justify-content:center;
    min-height:43px
  }
  .header-phone span {
    display:none
  }
  .header-phone .icon {
    width:20px;
    height:20px
  }
  .mobile-menu summary {
    height:43px;
    width:43px
  }
  .hero {
    padding-top:37px
  }
  .eyebrow {
    font-size:12px;
    padding:6px 10px;
    margin-bottom:17px
  }
  .hero-grid {
    gap:22px
  }
  .hero-content {
    text-align:center
  }
  .hero h1 {
    font-size:clamp(1.43rem,5.4vw,1.94rem);
    line-height:1.4;
    max-width:none;
    margin-inline:auto
  }
  .hero h1 span {
    line-height:1.45
  }
  .hero-statement {
    font-size:12px;
    margin-top:9px
  }
  .hero-description {
    font-size:14px;
    line-height:2.08;
    margin-top:14px;
    text-align:right
  }
  .hero-buttons {
    flex-direction:column;
    gap:8px;
    margin-top:19px
  }
  .hero-buttons .action {
    width:100%;
    min-height:50px
  }
  .hero-substats {
    margin-top:15px;
    padding-top:12px;
    justify-content:center;
    gap:5px 14px
  }
  .hero-substats span {
    font-size:12px
  }
  .hero-scene {
    height:auto;
    width:100%
  }
  .hero-photo {
    inset:0 22px;
    border-width:5px;
    border-radius:28px 28px 0 0
  }
  .hero-scene-chip {
    font-size:12px;
    padding:8px 9px
  }
  .hero-scene-chip .icon {
    width:15px;
    height:15px
  }
  .chip-top {
    left:0!important;
    top:9%!important
  }
  .chip-bottom {
    right:0!important;
    bottom:11px!important
  }
  .hero-bottom-line {
    font-size:12px;
    gap:9px;
    padding:10px 8px
  }
  .trust-grid {
    grid-template-columns:1fr;
    gap:0
  }
  .trust-unit {
    padding:13px 3px;
    gap:12px
  }
  .trust-unit:not(:last-child) {
    border-left:none;
    border-bottom:1px solid #edf3f5
  }
  .trust-icon {
    width:42px;
    height:42px;
    border-radius:12px
  }
  .trust-unit strong {
    font-size:12px
  }
  .trust-unit p {
    font-size:12px
  }
  .section {
    padding:58px 0
  }
  .section-heading {
    margin-bottom:24px
  }
  .section-heading.inline {
    flex-direction:column;
    align-items:flex-start
  }
  .section-heading h2,h2 {
    font-size:clamp(1.23rem,4.6vw,1.64rem);
    line-height:1.42;
    max-width:100%;
    text-wrap:balance
  }
  .section-heading.center h2 {
    text-align:center
  }
  .section-heading p {
    font-size:14px;
    line-height:2.05
  }
  .kicker {
    font-size:12px
  }
  .fault-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px
  }
  .fault-card {
    padding:15px 11px 10px;
    border-radius:16px
  }
  .fault-icon {
    height:41px;
    width:41px;
    border-radius:11px;
    margin-bottom:12px
  }
  .fault-icon .icon {
    width:21px;
    height:21px
  }
  .fault-card h3 {
    font-size:12px;
    line-height:1.6
  }
  .fault-card p {
    min-height:0;
    font-size:12px;
    line-height:1.95
  }
  .fault-card a {
    font-size:12px;
    min-height:40px
  }
  .fault-aside {
    grid-template-columns:1fr
  }
  .fault-aside-image {
    height:auto;
    max-height:none
  }
  .fault-aside-image img {
    object-position:center
  }
  .fault-aside-panel {
    padding:19px
  }
  .fault-aside-panel h3 {
    font-size:15px
  }
  .fault-aside-panel p {
    font-size:13px
  }
  .service-bento {
    gap:9px
  }
  .service-large {
    padding:24px;
    min-height:0
  }
  .service-large h3 {
    font-size:18px
  }
  .service-large p {
    font-size:14px
  }
  .service-tile {
    padding:18px;
    border-radius:18px
  }
  .service-tile h3 {
    font-size:14px
  }
  .service-tile p {
    font-size:13px
  }
  .service-tile>span {
    width:40px;
    height:40px
  }
  .service-tile>span .icon {
    width:21px;
    height:21px
  }
  .compare-grid {
    gap:24px
  }
  .compare-photo,.compare-photo img {
    min-height:0;
    max-height:none
  }
  .compare-copy>p,.brand-layout p,.prevent-content>p,.area-copy>p {
    font-size:14px;
    line-height:2.1
  }
  .check-stack p {
    font-size:12px
  }
  .cost-layout {
    gap:26px
  }
  .cost-intro h2 {
    max-width:100%
  }
  .cost-intro>p {
    font-size:14px
  }
  .cost-callout p {
    font-size:12px
  }
  .cost-table-shell {
    padding:9px 9px 11px;
    border-radius:20px
  }
  .cost-table th,.cost-table td {
    padding:10px 7px
  }
  .cost-table tbody th,.cost-table td {
    font-size:12px
  }
  .process-list {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:22px 11px
  }
  .process-list::before {
    display:none
  }
  .process-icon {
    height:61px;
    width:61px;
    border-radius:19px;
    margin-bottom:10px
  }
  .process-icon .icon {
    height:29px;
    width:29px
  }
  .process-number {
    margin-bottom:8px;
    font-size:12px
  }
  .process-list h3 {
    font-size:12px
  }
  .process-list p {
    font-size:12px
  }
  .brand-layout .model-image,.prevent-picture {
    height:auto
  }
  .brands-pills {
    gap:8px
  }
  .brands-pills span {
    font-size:12px;
    padding:7px 10px
  }
  .district-tags {
    gap:7px
  }
  .district-tags span {
    font-size:12px;
    padding:4px 10px
  }
  .district-map {
    padding:9px;
    border-radius:19px
  }
  .district-map-top {
    padding:8px
  }
  .district-map figcaption {
    font-size:12px
  }
  .prevent-grid {
    gap:25px
  }
  .prevent-points {
    grid-template-columns:1fr;
    gap:9px
  }
  .prevent-points p {
    font-size:12px
  }
  .phone-guide {
    padding:0 0 60px
  }
  .guide-panel {
    grid-template-columns:1fr;
    gap:15px;
    padding:26px 20px;
    border-radius:23px
  }
  .guide-icon {
    height:49px;
    width:49px;
    border-radius:13px
  }
  .guide-icon .icon {
    width:27px;
    height:27px
  }
  .guide-panel h2 {
    font-size:17px
  }
  .guide-panel p {
    font-size:12px
  }
  .guide-panel>.action {
    grid-column:1;
    width:100%;
    white-space:normal;
    text-align:center
  }
  .faq-layout {
    gap:20px
  }
  .faq-sidebar p {
    font-size:14px
  }
  .faq-accordions summary {
    font-size:12px;
    line-height:1.85;
    padding:13px 12px;
    min-height:55px
  }
  .faq-accordions details p {
    font-size:12px;
    padding:2px 13px 14px
  }
  .contact-section {
    padding:60px 0
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:22px;
    padding:27px 17px;
    border-radius:23px
  }
  .contact-intro h2 {
    font-size:clamp(1.28rem,4.8vw,1.65rem)
  }
  .contact-intro p {
    font-size:14px
  }
  .phone-primary {
    padding:12px;
    min-height:70px
  }
  .call-icon {
    height:42px;
    width:42px
  }
  .phone-primary strong {
    font-size:17px
  }
  .phone-secondary {
    padding:10px 12px
  }
  .phone-secondary strong {
    font-size:14px
  }
  .footer-top {
    grid-template-columns:1fr 1fr;
    gap:28px 18px;
    padding:37px 0
  }
  .footer-about {
    grid-row:auto;
    grid-column:1/-1
  }
  .footer-about img {
    height:110px;
    width:110px
  }
  .footer-about p {
    font-size:12px;
    max-width:55ch
  }
  .footer-contacts {
    grid-column:1/-1
  }
  .footer-links strong,.footer-contacts strong {
    font-size:12px
  }
  .footer-links a,.footer-contacts a {
    font-size:12px
  }
  .footer-bottom {
    flex-direction:column;
    align-items:flex-start;
    font-size:12px;
    gap:4px;
    padding:16px 0
  }
}
@media(max-width:360px) {
  .container {
    width:min(100% - 24px,1200px)
  }
  .brand-label strong {
    font-size:12px
  }
  .brand-label small {
    font-size:7px
  }
  .hero h1 {
    font-size:1.37rem
  }
  .hero-description {
    font-size:14px
  }
  .eyebrow {
    font-size:12px
  }
  .hero-scene {
    height:auto
  }
  .hero-substats span {
    font-size:12px
  }
  .hero-bottom-line {
    font-size:12px
  }
  .fault-card h3 {
    font-size:12px
  }
  .fault-card p {
    font-size:12px
  }
  .service-tile h3 {
    font-size:14px
  }
  .phone-primary strong {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
@media print {
  .microbar,.site-header,.hero-buttons,.action,.header-actions,.skip-link {
    display:none!important
  }
  .section {
    padding:25px 0;
    break-inside:avoid
  }
  .hero {
    print-color-adjust:exact;
    -webkit-print-color-adjust:exact
  }
  .hero-grid,.fault-layout,.compare-grid,.cost-layout,.brand-layout,.area-layout,.prevent-grid,.faq-layout,.contact-panel {
    grid-template-columns:1fr
  }
  .hero-scene {
    height:240px
  }
  .faq-accordions details>p {
    display:block!important
  }
  .footer-top {
    grid-template-columns:1fr 1fr
  }
}
/* Constrain long pricing heading by content column width, not a narrow character limit. */
.cost-intro h2 {
  max-width:none;
  font-size:clamp(1.5rem,2vw,1.86rem);
  line-height:1.5
}
/* Third local Persian family is deliberately reserved for small editorial accents. */
.hero-bottom-line,.mini-line {
  font-family:"Noto Naskh Arabic",var(--body);
  font-weight:700
}
/* Real navigation between complementary services; keyboard-accessible, no JavaScript. */
.related-services {
  padding:38px 16px;
  background:#eff8fb;
  border-block:1px solid #dcecf2;
  color:#123b55;
  direction:rtl
}
.related-services__inner {
  max-width:1120px;
  margin-inline:auto
}
.related-services h2 {
  color:#0b3857;
  font-size:clamp(1.23rem,2.4vw,1.65rem);
  line-height:1.65;
  margin:0 0 7px
}
.related-services p {
  margin:0 0 17px;
  color:#3d596d;
  font-size:14px;
  line-height:1.95
}
.related-services nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}
.related-services nav a {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid #bad7e3;
  background:#fff;
  padding:11px 17px;
  min-height:45px;
  color:#07537c;
  font-weight:700;
  font-size:13px;
  text-decoration:none;
  line-height:1.6
}
.related-services nav a:hover {
  background:#d9f1f8
}
.related-services nav a:focus-visible {
  outline:3px solid #0a87b4;
  outline-offset:3px
}
/* Layout safeguards and readable small-screen cards. */
:root {
  --header-offset:102px
}
html {
  scroll-padding-top:var(--header-offset)
}
main:focus,section[tabindex="-1"]:focus {
  outline:none
}
.container>* {
  min-width:0
}
.hero-content,.compare-copy,.cost-intro,.area-copy,.prevent-content,.contact-intro {
  min-width:0
}
.hero-description,.section-heading p,.service-large p {
  overflow-wrap:break-word
}
.hero-photo picture {
  display:block
}
.service-large>*:not(.bento-orbits) {
  position:relative;
  z-index:1
}
.fault-card h3 {
  line-height:1.8
}
.fault-card p {
  margin-bottom:8px
}
.fault-aside-panel .mini-line {
  font-family:var(--body)
}
.compare-photo>img {
  height:auto
}
.compare-photo {
  aspect-ratio:auto
}
.model-stamp span,.district-map-top>div,.prevent-points>div>div {
  min-width:0
}
.map-pulse,.faq-support>span {
  flex-shrink:0
}
.footer-contacts a {
  align-self:flex-start;
  unicode-bidi:isolate
}
.footer .footer-logo-card figcaption {
  font-size:12px
}
@media(max-width:1080px) {
  :root {
    --header-offset:88px
  }
  .fault-aside {
    align-items:stretch
  }
  .fault-aside-image {
    align-self:start
  }
}
@media(max-width:900px) {
  .section-heading.inline {
    align-items:flex-start;
    flex-direction:column
  }
  .contact-panel {
    grid-template-columns:1fr;
    gap:28px
  }
  .phone-cards {
    width:100%;
    max-width:560px
  }
  .service-large h3 {
    max-width:none
  }
  .service-bento {
    gap:16px
  }
  .brand-layout .model-image,.prevent-picture {
    width:min(100%,560px);
    margin-inline:auto
  }
}
@media(max-width:650px) {
  :root {
    --header-offset:81px
  }
  .hero-statement {
    font-size:14px;
    line-height:1.9
  }
  .hero-substats span {
    font-size:12px
  }
  .hero-bottom-line {
    gap:4px 10px
  }
  .hero-bottom-line .dot-separator {
    display:none
  }
  .hero-bottom-line>span {
    flex-basis:100%
  }
  .service-bento {
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    grid-auto-rows:auto
  }
  .service-large {
    grid-column:auto;
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    gap:16px;
    align-items:center;
    padding:24px 20px
  }
  .service-index {
    grid-column:1/-1;
    margin:0
  }
  .large-service-icon {
    width:48px;
    height:48px;
    margin:0;
    border-radius:16px
  }
  .large-service-icon .icon {
    width:28px;
    height:28px
  }
  .service-large h3 {
    font-size:18px;
    line-height:1.8
  }
  .service-large p,.service-large a {
    grid-column:1/-1;
    margin:0
  }
  .service-large a {
    justify-self:start;
    font-size:13px
  }
  .service-tile {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:5px 14px;
    align-content:start;
    align-items:start
  }
  .service-tile>span {
    grid-row:1/3;
    width:44px;
    height:44px;
    margin:0
  }
  .service-tile h3 {
    font-size:14px;
    line-height:1.9
  }
  .service-tile p {
    grid-column:2;
    font-size:13px;
    margin:0;
    line-height:2
  }
  .fault-card h3 {
    font-size:14px
  }
  .fault-card p {
    font-size:13px
  }
  .cost-table tbody th,.cost-table td {
    font-size:12px
  }
  .process-list h3,.prevent-points h3 {
    font-size:14px;
    line-height:1.9
  }
  .process-list p,.prevent-points p,.faq-accordions details p,.guide-panel p {
    font-size:13px;
    line-height:2.1
  }
  .faq-accordions summary {
    font-size:13px;
    line-height:2
  }
  .contact-note {
    align-items:flex-start;
    line-height:2
  }
  .contact-note .icon {
    margin-top:3px
  }
  .related-services nav {
    display:grid;
    grid-template-columns:1fr
  }
  .related-services nav a {
    white-space:normal;
    text-align:center
  }
  .footer .footer-pages-row a {
    font-size:13px
  }
}
@media(max-width:480px) {
  .fault-grid {
    grid-template-columns:minmax(0,1fr);
    gap:12px
  }
  .fault-card {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:6px 12px;
    padding:18px
  }
  .fault-icon {
    grid-row:1/3;
    margin:0
  }
  .fault-card p {
    grid-column:2;
    margin:0
  }
  .fault-card a {
    grid-column:2;
    justify-self:start;
    padding-top:0;
    margin-top:0
  }
  .fault-aside-panel {
    padding:22px
  }
  .image-caption {
    font-size:12px;
    align-items:flex-start
  }
  .brand-label strong {
    font-size:12px
  }
  .phone-primary strong {
    font-size:18px
  }
}
@media(max-width:360px) {
  .header-body {
    gap:6px
  }
  .brand img {
    width:36px;
    height:36px
  }
  .brand-label strong {
    font-size:11px
  }
  .header-actions {
    gap:5px
  }
  .phone-primary {
    gap:10px
  }
  .phone-primary strong {
    font-size:16px
  }
  .phone-arrow {
    display:none
  }
  .service-large {
    padding:22px 16px
  }
  .service-large h3 {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
}