/* ==========================================================================
   Roof Leak Detection Company, Inc. — site stylesheet
   Design system: "instrument readout" — navy ink + instrument blue,
   a diagnostic teal(dry)->amber(wet) moisture scale as the signature accent,
   and a monospace utility face for technical labels/data.
   Vanilla CSS. No frameworks, no external fonts. Mobile-first.
   ========================================================================== */

/* ---- Design tokens ---- */
:root {
  /* Color */
  --ink:        #0A2540;   /* deepest navy — headings on light, dark sections */
  --navy:       #0F3057;   /* dark section background */
  --navy-2:     #0B2545;   /* darker gradient stop */
  --brand:      #1B5E96;   /* primary instrument blue */
  --brand-700:  #164B79;   /* pressed / hover */
  --steel:      #5B7A99;   /* muted secondary */
  --teal:       #0E8FA6;   /* accent — "signal / dry" */
  --teal-bright:#17A8C0;
  --amber:      #D98A2B;   /* reserved: "wet / problem area" only */
  --amber-soft: #F1D3A6;
  --red:        #C0392B;   /* urgency accent — phone CTAs, "call now", nods to the original site's red call-out text */
  --red-700:    #A5301F;
  --paper:      #F5F8FB;   /* page background */
  --line:       #DCE6EF;   /* hairlines / borders */
  --white:      #FFFFFF;
  --text:       #26384A;   /* body text */
  --muted:      #5C6F80;   /* secondary text */
  --ok:         #1E9E6A;
  --err:        #C0392B;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Code", "Roboto Mono", Consolas, Menlo, monospace;

  /* Fluid type scale */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.25rem + 1.0vw, 2.00rem);
  --step-3:  clamp(1.85rem, 1.45rem + 1.9vw, 2.85rem);
  --step-4:  clamp(2.25rem, 1.6rem + 3.1vw, 3.75rem);

  /* Space + shape */
  --gutter: clamp(1.1rem, 0.7rem + 2vw, 2rem);
  --maxw: 1180px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(10,37,64,.06), 0 2px 8px rgba(10,37,64,.05);
  --shadow-md: 0 10px 30px rgba(10,37,64,.10);
  --shadow-lg: 0 24px 60px rgba(10,37,64,.16);
  --ring: 0 0 0 3px rgba(23,168,192,.45);
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--brand-700); }
h1,h2,h3,h4 { color: var(--ink); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.15em; }
strong { color: var(--ink); }

/* Accessibility */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }
.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: .6rem 1rem; border-radius: 8px;
  transition: top .18s ease;
}
.skip-link:focus { top: 8px; color:#fff; }
.visually-hidden {
  position:absolute!important; width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ---- Layout helpers ---- */
.wrap { width: min(100% - 2*var(--gutter), var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(2.4rem, 1.7rem + 3.6vw, 4.75rem); }
.section--tight { padding-block: clamp(1.7rem, 1.2rem + 2.2vw, 2.75rem); }
.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin: 0 0 .8rem;
  display: inline-flex; align-items: center; gap: .5rem;
}
.eyebrow::before {
  content:""; width: 26px; height: 2px; background: var(--teal); display:inline-block;
}
.lede { font-size: var(--step-1); color: var(--muted); max-width: 60ch; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .lede { margin-inline: auto; }

/* ---- Buttons ---- */
.btn {
  --pad-y: .85rem;
  display: inline-flex; align-items: center; justify-content:center; gap:.55rem;
  font-family: var(--sans); font-weight: 700; font-size: var(--step-0);
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: var(--pad-y) 1.35rem; border-radius: 10px; border: 2px solid transparent;
  min-height: 48px; transition: transform .12s ease, background .18s ease, box-shadow .18s ease, color .18s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--brand-700); color:#fff; box-shadow: var(--shadow-md); }
.btn--call { background: var(--teal); color: #042e36; }
.btn--call:hover { background: var(--teal-bright); color:#042e36; }
.btn--red { background: var(--red); color: #fff; box-shadow: var(--shadow-sm); }
.btn--red:hover { background: var(--red-700); color:#fff; box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--onDark { background: #fff; color: var(--ink); }
.btn--onDark:hover { background: #eaf2f8; color: var(--ink); }
.btn--ghostDark { background: transparent; color:#fff; border-color: rgba(255,255,255,.35); }
.btn--ghostDark:hover { border-color:#fff; background: rgba(255,255,255,.08); color:#fff; }
.btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   Header + navigation
   ========================================================================== */
.topbar {
  background: var(--ink); color: #cfe0ee; font-family: var(--mono);
  font-size: .78rem; letter-spacing: .04em;
}
.topbar .wrap { display:flex; align-items:center; justify-content: space-between; min-height: 40px; gap: 1rem; }
.topbar a { color:#eaf3fb; text-decoration: none; }
.topbar a:hover { color:#fff; text-decoration: underline; }
.topbar__meta { display:flex; gap: 1.2rem; align-items:center; }
.topbar__meta span { display:inline-flex; align-items:center; gap:.4rem; }
.topbar svg { width:15px; height:15px; flex:0 0 auto; color:#7fa7c6; }
.topbar__phones { display:flex; gap: 1.1rem; }
@media (max-width: 720px){ .topbar__meta{ display:none; } .topbar .wrap{ justify-content:center; } }

.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--line); }
.nav { display:flex; align-items:center; justify-content: space-between; min-height: 68px; gap: 1rem; }
.brand { display:flex; align-items:center; gap:.7rem; text-decoration: none; color: var(--ink); }
.brand__mark { flex: 0 0 auto; }
.brand__text { display:flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-weight: 800; font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.brand__tag { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }

.nav__menu { display:flex; align-items:center; gap:1.4rem; }
.nav__links { display:flex; align-items:center; gap: .25rem; list-style:none; margin:0; padding:0; }
.nav__links a {
  display:inline-block; padding:.55rem .8rem; border-radius: 8px; text-decoration:none;
  color: var(--ink); font-weight: 600; font-size: .96rem;
}
.nav__links a:hover { background: #eef4f9; color: var(--brand); }
.nav__links a[aria-current="page"] { color: var(--brand); }
.nav__links a[aria-current="page"]::after {
  content:""; display:block; height:2px; background: var(--teal); margin-top: 4px; border-radius: 2px;
}
.nav__cta { display:flex; align-items:center; gap:.6rem; }
.nav__toggle {
  display:none; width:48px; height:48px; border:1px solid var(--line); background:#fff;
  border-radius:10px; cursor:pointer; align-items:center; justify-content:center;
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after{
  content:""; display:block; width:22px; height:2px; background: var(--ink); position: relative; transition: .2s;
}
.nav__toggle span::before{ position:absolute; top:-7px; }
.nav__toggle span::after{ position:absolute; top:7px; }
.nav__toggle[aria-expanded="true"] span{ background: transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform: rotate(-45deg); }

@media (max-width: 900px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu {
    position: fixed; inset: 108px 0 auto 0; background:#fff; border-bottom:1px solid var(--line);
    box-shadow: var(--shadow-md); padding: 1rem var(--gutter) 1.4rem;
    display: none; flex-direction: column; gap: 1rem;
  }
  .nav__menu.open { display:flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .1rem; }
  .nav__links a { padding: .85rem .6rem; font-size: 1.05rem; border-bottom:1px solid var(--line); border-radius: 0; }
  .nav__links a[aria-current="page"]::after{ display:none; }
  .nav__cta { flex-direction: column; align-items: stretch; }
  .nav__cta .btn { width: 100%; }
}

/* ==========================================================================
   Hero + moisture-map readout (the signature)
   ========================================================================== */
.hero { position: relative; background:
    radial-gradient(1200px 600px at 85% -10%, rgba(27,94,150,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--paper) 100%);
  overflow: hidden; }
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: center; padding-block: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); }
.hero__claim { font-weight: 700; color: var(--ink); margin: .5rem 0 0; font-size: var(--step-0); }
.hero__claim sup { color: var(--red); }
.hero__slogan {
  font-family: var(--mono); font-size: var(--step-0); color: var(--teal);
  border-left: 3px solid var(--teal); padding-left: .8rem; margin: 1.2rem 0 1.5rem; font-weight: 600;
}
.hero h1 span.k { color: var(--brand); }
.hero__cta { display:flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }
.hero__cta .phone-note { flex-basis: 100%; font-family: var(--mono); font-size:.8rem; color: var(--muted); margin-top:.2rem; }
@media (max-width: 860px){ .hero__grid{ grid-template-columns: 1fr; } .hero__visual{ order:-1; } }

/* photo + readout: real field photo with the moisture readout overlaid, echoing the
   original site's photo slider while keeping the diagnostic-readout signature */
.hero__visual { position: relative; }
.hero__photo { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 5 / 4; }
.hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__visual .readout { position: absolute; right: -1rem; bottom: -1.6rem; width: min(280px, 62%); }
@media (max-width: 860px){
  .hero__photo { aspect-ratio: 16 / 9; }
  .hero__visual .readout { position: static; width: 100%; margin-top: 1rem; right:auto; bottom:auto; }
}

/* readout card */
.readout {
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  border-radius: 16px; padding: 1.1rem; color: #dbe8f3; box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,.06); position: relative;
}
.readout__bar { display:flex; align-items:center; justify-content: space-between; font-family: var(--mono);
  font-size:.72rem; letter-spacing:.08em; color:#9db8d0; margin-bottom:.7rem; text-transform: uppercase; }
.readout__dot { width:9px;height:9px;border-radius:50%; background: var(--teal-bright);
  box-shadow: 0 0 0 4px rgba(23,168,192,.18); display:inline-block; margin-right:.45rem; vertical-align:middle;}
.readout__plot { position: relative; border-radius: 10px; overflow: hidden;
  background: #0a1f39; border: 1px solid rgba(255,255,255,.07); }
.moisture-grid {
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 2px; padding: 8px;
}
.moisture-grid i { display:block; aspect-ratio: 1 / 1; border-radius: 2px; }
/* moisture scale: cool(dry) -> warm(wet) — encodes meaning */
.m0 { background:#123a5c; }               /* dry */
.m1 { background:#0e6f86; }
.m2 { background:#17a8c0; }
.m3 { background:#e0a94a; }               /* elevated */
.m4 { background:#d98a2b; }               /* wet / problem */
.readout__scan {
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(23,168,192,.28), transparent);
  width: 34%; transform: translateX(-40%);
  animation: scan 4.6s ease-in-out infinite;
}
.readout__cross {
  position:absolute; width:26px; height:26px; border:2px solid #fff; border-radius:50%;
  box-shadow: 0 0 0 4px rgba(217,138,43,.35); left: 62%; top: 40%; pointer-events:none;
}
.readout__cross::before, .readout__cross::after{ content:""; position:absolute; background:#fff; }
.readout__cross::before{ left:50%; top:-8px; width:2px; height:42px; transform: translateX(-50%); }
.readout__cross::after{ top:50%; left:-8px; height:2px; width:42px; transform: translateY(-50%); }
.readout__legend { display:flex; align-items:center; gap:.6rem; margin-top:.75rem; font-family:var(--mono);
  font-size:.68rem; letter-spacing:.06em; color:#9db8d0; text-transform:uppercase; }
.legend-scale { display:flex; height:8px; border-radius:5px; overflow:hidden; flex:1; }
.legend-scale i{ flex:1; }
.readout__foot { display:flex; justify-content:space-between; font-family:var(--mono); font-size:.7rem;
  color:#7f9bb6; margin-top:.6rem; }
@keyframes scan { 0%{transform:translateX(-40%);} 50%{transform:translateX(330%);} 100%{transform:translateX(-40%);} }
@media (prefers-reduced-motion: reduce){ .readout__scan{ animation: none; opacity:.25; } }

/* ==========================================================================
   Stat strip
   ========================================================================== */
.stats { background: var(--ink); color:#dfeaf4; }
.stats__grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: rgba(255,255,255,.08); border-radius: 14px; overflow:hidden; }
.stat { background: var(--ink); padding: 1.3rem 1.2rem; }
.stat__num { font-family: var(--mono); font-size: clamp(1.4rem, 1rem + 2vw, 2rem); font-weight: 700; color:#fff; letter-spacing:-.02em; }
.stat__num .u { color: var(--teal-bright); }
.stat__label { font-size:.82rem; color:#9db8d0; letter-spacing:.04em; margin-top:.2rem; }
@media (max-width: 720px){ .stats__grid{ grid-template-columns: repeat(2,1fr); } }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 1.4rem;
  box-shadow: var(--shadow-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s;
  position: relative;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfe0ee; }
.card__idx { font-family: var(--mono); font-size:.72rem; color: var(--steel); letter-spacing:.1em; }
.card__icon { width: 44px; height:44px; border-radius: 10px; display:grid; place-items:center;
  background: linear-gradient(180deg, #eaf5f8, #dcecf3); color: var(--brand); margin: .3rem 0 .9rem; }
.card__icon svg{ width:24px; height:24px; }
.card h3 { margin-bottom: .35rem; font-size: 1.12rem; }
.card p { margin: 0; color: var(--muted); font-size: .96rem; }
.card__tag { font-family: var(--mono); font-size:.7rem; color: var(--teal); letter-spacing:.06em; margin-top:.7rem; display:block; }

/* Split feature (science / methodology) */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); align-items:center; }
@media (max-width: 860px){ .split{ grid-template-columns:1fr; } }
.checklist { list-style:none; padding:0; margin: 1.2rem 0 0; display:grid; gap:.7rem; }
.checklist li { display:flex; gap:.7rem; align-items:flex-start; }
.checklist svg{ flex:0 0 auto; width:22px; height:22px; color: var(--teal); margin-top:.15rem; }
.panel-dark { background: linear-gradient(180deg,var(--navy),var(--navy-2)); color:#dbe8f3; border-radius:16px;
  padding: 2rem clamp(1.4rem, 1rem + 2vw, 2.2rem); box-shadow: var(--shadow-lg); }
.panel-dark h3{ color:#fff; margin-top:.6rem; }
.panel-dark .eyebrow{ color: var(--teal-bright); }
.panel-dark p{ margin-top:.8rem; }

/* Quote */
.quote { background:
   radial-gradient(900px 400px at 100% 0%, rgba(23,168,192,.12), transparent 55%), var(--ink);
   color:#eaf3fb; }
.quote blockquote { margin:0; font-size: var(--step-2); line-height:1.4; font-weight: 600; color:#fff; max-width: 60ch; }
.quote .mark { font-family: var(--mono); color: var(--teal-bright); font-size: 2.4rem; line-height:1; }
.quote cite { display:block; margin-top:1.1rem; font-style: normal; font-family:var(--mono); font-size:.82rem;
  letter-spacing:.05em; color:#9db8d0; }

/* Process steps */
.steps { display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1rem; counter-reset: step; }
.step { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding:1.3rem; box-shadow: var(--shadow-sm); }
.step__n { font-family:var(--mono); font-weight:700; color: var(--teal); font-size:.8rem; letter-spacing:.1em; }
.step h3{ font-size:1.05rem; margin:.4rem 0 .3rem; }
.step p{ margin:0; color:var(--muted); font-size:.94rem; }

/* CTA band */
.cta-band { background: linear-gradient(120deg, var(--brand) 0%, var(--navy) 100%); color:#fff; }
.cta-band .wrap{ display:flex; align-items:center; justify-content: space-between; gap:1.5rem; flex-wrap: wrap; }
.cta-band h2{ color:#fff; margin:0 0 .3rem; }
.cta-band p{ margin:0; color:#d7e6f3; }
.cta-band__actions{ display:flex; gap:.8rem; flex-wrap:wrap; }

/* Red call-out ribbon — direct nod to the original site's bold red
   "CALL US TOLL FREE" banner */
.ribbon-red { background: var(--red); color: #fff; text-align: center; }
.ribbon-red .wrap { padding-block: 1.1rem; }
.ribbon-red a { color: #fff; font-weight: 800; font-size: var(--step-1); letter-spacing: -.01em; text-decoration: none; display:inline-flex; align-items:center; gap:.4rem; vertical-align:middle; }
.ribbon-red a:hover { text-decoration: underline; }
.ribbon-red a svg { width:20px; height:20px; flex:0 0 auto; }
.ribbon-red .label { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #f9d9d3; margin-right: .6rem; }

/* Field / equipment photo grid — real archive photography */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.photo-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm); }
.photo-grid img { width: 100%; height: 200px; object-fit: cover; display: block; }
.photo-grid figcaption { padding: .65rem .9rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em;
  color: var(--muted); }

/* Small inline field photo, floated beside prose (echoes the original's inline shots) */
.figure--float { float: left; width: 150px; margin: .25rem 1.2rem 1rem 0; border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow-sm); }
.figure--float img { display: block; width: 100%; height: auto; }
@media (max-width: 560px){ .figure--float { float: none; width: 100%; max-width: 220px; margin: 0 auto 1.2rem; } }

/* ==========================================================================
   Content pages (about / testing / generic prose)
   ========================================================================== */
.page-hero { background: linear-gradient(180deg, var(--ink), var(--navy)); color:#eaf3fb; }
.page-hero .eyebrow{ color: var(--teal-bright); }
.page-hero h1{ color:#fff; max-width: 20ch; }
.page-hero p{ color:#cdddec; max-width: 60ch; }
.breadcrumb{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:#8fb0cc; margin-bottom:1rem; }
.breadcrumb a{ color:#bcd4e8; text-decoration:none; } .breadcrumb a:hover{ color:#fff; }

.prose { max-width: 72ch; }
.prose h2{ margin-top: 2rem; }
.prose h3{ margin-top: 1.6rem; color: var(--brand); }
.prose img{ border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 1.2rem 0; }
.fignote { font-family:var(--mono); font-size:.72rem; color: var(--steel); letter-spacing:.04em; }

/* Placeholder image slots (client to replace with real photos) */
.imgslot {
  border: 2px dashed #b9cbdd; border-radius: var(--radius); background:
    repeating-linear-gradient(45deg, #eef4f9 0 12px, #e7eef5 12px 24px);
  display:grid; place-items:center; text-align:center; color: var(--steel);
  min-height: 220px; padding: 1rem; font-family: var(--mono); font-size:.8rem; letter-spacing:.03em;
}
.imgslot span{ display:block; max-width: 42ch; }
.imgslot b{ color: var(--brand); display:block; margin-bottom:.3rem; letter-spacing:.06em; }

/* Definition rows for methods */
.deflist{ display:grid; gap:0; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background:#fff; }
.deflist > div{ display:grid; grid-template-columns: 220px 1fr; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom:1px solid var(--line); }
.deflist > div:last-child{ border-bottom:0; }
.deflist dt{ font-weight:700; color: var(--ink); }
.deflist dd{ margin:0; color: var(--muted); }
.deflist .std{ font-family:var(--mono); font-size:.72rem; color: var(--teal); letter-spacing:.05em; display:block; margin-top:.2rem; }
@media (max-width:640px){ .deflist > div{ grid-template-columns:1fr; gap:.2rem; } }

/* ==========================================================================
   Contact + form
   ========================================================================== */
.contact-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 1rem + 3vw, 3rem); align-items:start; }
@media (max-width: 900px){ .contact-grid{ grid-template-columns:1fr; } }
.form { background:#fff; border:1px solid var(--line); border-radius:16px; padding: clamp(1.3rem, 1rem + 2vw, 2rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1rem; }
.field label{ display:block; font-weight:700; color: var(--ink); font-size:.92rem; margin-bottom:.35rem; }
.field .req{ color: var(--amber); }
.field input, .field select, .field textarea{
  width:100%; font: inherit; color: var(--text); background:#fff;
  border:1.5px solid var(--line); border-radius:10px; padding:.8rem .9rem; min-height:48px;
  transition: border-color .15s, box-shadow .15s;
}
.field textarea{ min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--brand); box-shadow: var(--ring); outline:none; }
.field__hint{ font-size:.8rem; color: var(--muted); margin-top:.3rem; }
.hp { position:absolute!important; left:-9999px!important; width:1px;height:1px; overflow:hidden; }
.form__actions{ display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-top:.3rem; }
.form__status{ margin-top:1rem; padding:.9rem 1rem; border-radius:10px; font-size:.95rem; display:none; }
.form__status.is-visible{ display:block; }
.form__status.ok{ background:#e7f6ef; color:#0d6b45; border:1px solid #b7e3cd; }
.form__status.err{ background:#fdeceb; color:#a02a20; border:1px solid #f3c4bf; }
.form__status.info{ background:#eaf2f9; color:#164b79; border:1px solid #c6dcee; }
.btn[disabled]{ opacity:.6; cursor: progress; }

.contact-aside .infocard{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem;
  box-shadow: var(--shadow-sm); margin-bottom:1rem; }
.contact-aside h3{ font-size:1rem; margin:0 0 .6rem; }
.infoline{ display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.7rem; }
.infoline:last-child{ margin-bottom:0; }
.infoline svg{ flex:0 0 auto; width:20px;height:20px; color: var(--teal); margin-top:.15rem; }
.infoline a{ text-decoration:none; font-weight:600; }
.infoline .sub{ display:block; color:var(--muted); font-size:.85rem; font-weight:400; }
.mapslot{ border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--navy-2); color:#c6d7e6; padding-block: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; }
@media (max-width: 780px){ .footer-grid{ grid-template-columns:1fr; gap:1.6rem; } }
.site-footer h4{ color:#fff; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; font-family:var(--mono); margin:0 0 .9rem; font-weight:600; }
.site-footer a{ color:#c6d7e6; text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-nav{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.footer-brand__name{ color:#fff; font-weight:800; font-size:1.05rem; }
.footer-brand p{ color:#9fb7cc; font-size:.92rem; max-width: 40ch; }
.footer-phones a{ font-family:var(--mono); font-weight:600; color:#eaf3fb; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.1); margin-top:2rem; padding-top:1.3rem;
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.82rem; color:#8ba6bf; }
.footer-bottom .mono{ font-family:var(--mono); letter-spacing:.03em; }

/* ==========================================================================
   Sticky mobile call bar
   ========================================================================== */
.callbar{ position: fixed; left:0; right:0; bottom:0; z-index: 90; display:none;
  background: var(--ink); border-top:1px solid rgba(255,255,255,.12); padding:.5rem;
  gap:.5rem; box-shadow: 0 -6px 20px rgba(10,37,64,.25); }
.callbar a{ flex:1; text-decoration:none; }
.callbar .btn{ width:100%; min-height:52px; }
@media (max-width: 900px){ .callbar{ display:flex; } body{ padding-bottom: 72px; } }

/* ---- Reveal on scroll (progressive — visible by default without JS) ---- */
.js .reveal{ opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

/* utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}