/* JGS Plumbing
   The look comes from the badge: a hexagon drawn in double pipe lines, the pointed "PLUMBING" banner,
   condensed capitals. Rule of thumb: controls (buttons, fields, pills) are rounded; content (photos,
   cards) has the badge's cut corners. */

:root {
  --ink: #0F1419; --ink-2: #3A4550; --muted: #5B6672; --line: #DCE3EA;
  --paper: #F3F6F9; --sky: #E8F1FC; --blue: #1665D8; --blue-ink: #0B4DAF; --blue-soft: #D6E6FB;
  --star: #F5A524; --green: #16A34A;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px; --gut: 20px; --r: 8px; --hdr-h: 76px; --cbar-h: 0px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 959px) { :root { --hdr-h: 64px; --cbar-h: 68px; } }
@media (max-width: 420px) { :root { --gut: 16px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); }
body { margin: 0; background: #fff; color: var(--ink-2); font: 400 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: .18em; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: 800; line-height: 1; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: var(--r); background: var(--ink); color: #fff; font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }

/* Cut corners (content) and hexagon tiles (icons), from the badge */
.chamfer, .prob, .svc, .rev, .form, .trio__i, .mini, .map__frame, .cocsteps li, .about__team5 {
  --cut: 14px;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 calc(100% - var(--cut)), 0 var(--cut));
}
.i--why, .i--trio, .steps li::before { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); }

/* Type */
.h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: .93; }
.h1--page { font-size: clamp(2.4rem, 5vw, 4.2rem); }
.h1__blue { display: block; color: var(--blue); }
.h2 { font-size: clamp(2rem, 4vw, 3.25rem); }
.h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.h4 { font-size: 1.4rem; }
.lede { max-width: 56ch; color: var(--ink-2); font-size: clamp(1.0625rem, 1.4vw, 1.2rem); line-height: 1.55; }
.kicker { display: flex; align-items: center; gap: .55em; margin: 0 0 14px; color: var(--blue); font: 700 .8rem/1.2 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.kicker--light { color: #fff; }
.i--kick { width: 1.25em; height: 1.25em; flex: none; }
.muted { color: var(--muted); }
.i { width: 1.15em; height: 1.15em; flex: none; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 48px; padding: 0 20px; border: 2px solid transparent; border-radius: var(--r); font: 700 1rem/1 var(--body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn svg:last-child:not(:first-child) { transition: transform .2s var(--ease); }
.btn:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
.btn--lg { min-height: 56px; padding: 0 26px; font-size: 1.0625rem; }
.btn--wide { width: 100%; }
.btn--blue { background: var(--blue); color: #fff; }
.btn--blue:hover { background: var(--blue-ink); }
.btn--blue:focus-visible { outline-color: var(--ink); }
.btn--line { border-color: var(--ink); background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #25303A; }

.open { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px; background: #E3F5E9; color: #11622F; font: 700 .8rem/1 var(--body); letter-spacing: .02em; white-space: nowrap; }
.open__dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); } 70% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }

.rating { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--ink); font-size: .95rem; text-decoration: none; }
.rating b { font-weight: 800; }
.rating:hover > span:last-child { text-decoration: underline; }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars .i { width: 18px; height: 18px; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s; }
.hdr.is-scrolled { border-color: var(--line); box-shadow: 0 6px 24px rgba(15, 20, 25, .06); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--hdr-h); }
.hdr__logo { flex: none; }
.hdr__logo img { width: auto; height: 56px; }
.nav { margin-right: auto; }
.nav__list { display: flex; align-items: center; gap: 2px; }
.nav__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r); background: none; color: var(--ink); font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer; }
.nav__link:hover, .nav__link[aria-current] { background: var(--paper); }
.i--chev { width: 14px; height: 14px; transition: transform .2s; }
.nav__drop { position: relative; }
.nav__menu { position: absolute; left: -8px; top: calc(100% + 10px); width: 330px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 18px 40px rgba(15, 20, 25, .12); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
.nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav__drop [aria-expanded="true"] + .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nav__drop [aria-expanded="true"] .i--chev { transform: rotate(180deg); }
@media (hover: hover) {
  .nav__drop:hover .nav__menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__drop:hover .i--chev { transform: rotate(180deg); }
}
.nav__menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r); color: var(--ink); font-weight: 600; text-decoration: none; }
.nav__menu a:hover, .nav__menu a[aria-current] { background: var(--sky); }
.i--svc { width: 28px; height: 28px; color: var(--blue); }
.hdr__cta { display: flex; align-items: center; gap: 14px; }
.hdr__menu { display: none; }

.mnav { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100dvh - var(--hdr-h) - var(--ams-bar-h, 0px)); overflow: auto; border-top: 1px solid var(--line); background: #fff; box-shadow: 0 24px 40px rgba(15, 20, 25, .16); }
.mnav__in { padding-top: 18px; padding-bottom: 22px; }
.mnav__h { margin: 0 0 4px; color: var(--muted); font: 700 .75rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.mnav__svc a { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1.0625rem; font-weight: 600; text-decoration: none; }
.mnav__more { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 18px; }
.mnav__more a { color: var(--ink); font-weight: 600; text-decoration: none; }
.mnav__note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; color: var(--muted); font-size: .9rem; }

@media (max-width: 959px) {
  .nav, .hdr__call { display: none; }
  .hdr__in { gap: 12px; }
  .hdr__logo img { height: 46px; }
  .hdr__cta { margin-left: auto; gap: 10px; }
  .hdr__menu { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; }
  .hdr__menu .i { width: 24px; height: 24px; }
  html.menu-open, html.menu-open body { overflow: hidden; }
}
@media (min-width: 960px) { .mnav { display: none !important; } }

/* Home hero */
.hero { background: var(--sky); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px 64px; align-items: end; padding-top: clamp(32px, 6vw, 80px); padding-bottom: clamp(40px, 5vw, 64px); }
.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--blue); font: 700 .85rem/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.hero__eyebrow .i { width: 1.2em; height: 1.2em; }
.hero__side .lede { margin-bottom: 24px; }
.hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 20px; }
.hero__band { background: linear-gradient(var(--sky) 50%, #fff 50%); }
.hero__base { padding: 34px 0 0; background: #fff; }
@media (max-width: 899px) { .hero__top { grid-template-columns: 1fr; gap: 18px; } }
@media (max-width: 520px) { .hero__btns .btn { width: 100%; } }

/* The banner: team photo in the badge's pointed ribbon, framed by a double pipe line (drawn by site.js) */
.banner { --ar: 3; --tipk: .34; --pad: 20; --pipe: 3; position: relative; aspect-ratio: var(--ar); }
.banner__clip { position: absolute; inset: 0; overflow: hidden; background: #C9D6E4; clip-path: polygon(calc(var(--tipk) / var(--ar) * 100%) 0, calc(100% - var(--tipk) / var(--ar) * 100%) 0, 100% 50%, calc(100% - var(--tipk) / var(--ar) * 100%) 100%, calc(var(--tipk) / var(--ar) * 100%) 100%, 0 50%); }
.banner__img { width: 100%; height: 100%; object-fit: cover; }
.banner__frame { position: absolute; left: calc(var(--pad) * -1px); top: calc(var(--pad) * -1px); width: calc(100% + var(--pad) * 2px); height: calc(100% + var(--pad) * 2px); overflow: visible; pointer-events: none; }
.banner__pipe { fill: none; stroke: var(--ink); stroke-width: var(--pipe); stroke-linejoin: round; }
.banner__pipe--i { stroke: var(--blue); }
.banner.is-drawing .banner__pipe { transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .25, 1); }
.banner.is-drawing .banner__pipe--i { transition-delay: .2s; }
.banner__drop { position: absolute; left: 50%; top: calc(var(--pad) * -.42px); width: 24px; height: 32px; margin-left: -12px; fill: var(--blue); transform-origin: 50% 0; filter: drop-shadow(0 2px 2px rgba(15, 20, 25, .25)); }
.banner__drop-in { fill: #fff; opacity: .45; }
.js .banner__drop { transform: scale(0); }
.js .banner.is-drawn .banner__drop { animation: drip .8s 1.3s var(--ease) forwards; }
@keyframes drip { 0% { transform: scale(0); } 55% { transform: scale(1.06, 1.22); } 100% { transform: scale(1); } }
@media (max-width: 760px) { .banner { --ar: 1.55; --tipk: .2; --pad: 12; --pipe: 2.25; } .banner__drop { width: 18px; height: 24px; margin-left: -9px; } }

.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof li { display: flex; align-items: center; gap: 12px; padding: 6px 20px; border-left: 1px solid var(--line); font-size: 1rem; line-height: 1.3; }
.proof li:first-child { padding-left: 0; border-left: 0; }
.proof .i { width: 30px; height: 30px; color: var(--blue); }
.proof b { display: block; color: var(--ink); font: 800 1.4rem/1.05 var(--display); text-transform: uppercase; }
@media (max-width: 899px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .proof li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 420px) { .proof li { gap: 10px; padding: 4px 0 4px 14px; font-size: .95rem; } .proof li:nth-child(odd) { padding-left: 0; } .proof .i { width: 26px; height: 26px; } }

/* Sections */
.sec { padding: clamp(56px, 8vw, 104px) 0; }
.sec--sky { background: var(--sky); }
.sec--paper { background: var(--paper); }
.sec--blue { background: var(--blue); color: #EEF4FD; }
.sec:not([class*="sec--"]) + .sec:not([class*="sec--"]) { padding-top: 0; }
.hero + .sec { padding-top: clamp(56px, 7vw, 88px); }
.sec__head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.sec__head .lede { margin-top: 16px; }
.sec__head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; max-width: none; }

/* "What's going on?" */
.probs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.prob { display: grid; grid-template-columns: auto 1fr auto; column-gap: 16px; align-items: center; padding: 22px; background: var(--paper); color: var(--ink); text-decoration: none; transition: background-color .2s, color .2s; }
.i--prob { grid-row: 1 / 3; width: 40px; height: 40px; color: var(--blue); transition: color .2s; }
.prob b { font: 800 1.4rem/1.1 var(--display); text-transform: uppercase; }
.prob span { grid-column: 2; color: var(--muted); font-size: .95rem; line-height: 1.35; transition: color .2s; }
.i--go { width: 20px; height: 20px; color: var(--blue); transition: transform .2s var(--ease), color .2s; }
.prob .i--go { grid-row: 1 / 3; grid-column: 3; }
.prob:hover { background: var(--blue); color: #fff; }
.prob:hover .i, .prob:hover span { color: #fff; }
.prob:hover .i--go { transform: translateX(4px); }
@media (max-width: 899px) { .probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .probs { gap: 10px; }
  .prob { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 16px; }
  .i--prob { width: 34px; height: 34px; margin-bottom: 4px; }
  .prob b { font-size: 1.2rem; }
  .prob span { font-size: .9rem; }
  .prob .i--go { display: none; }
}

/* Service cards */
.svcs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 18px; }
.svc { display: flex; flex-direction: column; grid-column: span 2; background: #fff; color: var(--ink-2); text-decoration: none; }
.svc:nth-child(-n+2) { grid-column: span 3; }
.svc__img { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--line); }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.svc:hover .svc__img img { transform: scale(1.04); }
.svc__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px 24px; font-size: 1rem; line-height: 1.5; }
.svc__body b { color: var(--ink); font: 800 1.6rem/1.05 var(--display); text-transform: uppercase; }
.svc__go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; color: var(--blue); font-weight: 700; }
.svc__go .i { transition: transform .2s var(--ease); }
.svc:hover .svc__go .i { transform: translateX(4px); }
@media (max-width: 899px) {
  .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc, .svc:nth-child(-n+2) { grid-column: auto; }
  .svc:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .svcs { grid-template-columns: 1fr; gap: 12px; }
  .svc { flex-direction: row; }
  .svc__img { flex: 0 0 36%; aspect-ratio: auto; }
  .svc__body { padding: 16px 16px 16px 18px; font-size: .95rem; gap: 6px; }
  .svc__body .i--svc, .svc__go { display: none; }
  .svc__body b { font-size: 1.3rem; }
}

/* Why us */
.why { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.why__list { display: grid; gap: 22px; margin-top: 30px; }
.why__list li { display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.i--why { width: 52px; height: 48px; padding: 11px; background: var(--sky); color: var(--blue); }
.why__list b { display: block; margin: 2px 0 4px; color: var(--ink); font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; }
.why__img img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 899px) { .why { grid-template-columns: 1fr; } .why__img img { aspect-ratio: 4 / 3; } }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.steps li { position: relative; padding-top: 26px; border-top: 3px solid rgba(255, 255, 255, .4); }
.steps li::before { content: ""; position: absolute; left: 0; top: -10px; width: 20px; height: 17px; background: #fff; }
.steps__n { display: block; margin-bottom: 10px; color: rgba(255, 255, 255, .6); font: 800 2.6rem/1 var(--display); }
.steps b { display: block; margin-bottom: 6px; color: #fff; font: 800 1.5rem/1.05 var(--display); text-transform: uppercase; }
.sec--blue .h2 { color: #fff; }
@media (max-width: 899px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; gap: 30px; } }

/* About */
.about { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__img { position: relative; padding: 0 56px 72px 0; }
.about__img > img { --cut: 22px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__team5 { position: absolute; right: 0; bottom: 0; width: 46%; padding: 8px; background: #fff; }
.about__team5 img { --cut: 10px; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about__team5 figcaption { padding: 8px 4px 2px; color: var(--ink); font-size: .85rem; font-weight: 600; line-height: 1.3; }
.about__copy .h2 { margin-bottom: 18px; }
.vals { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; margin: 28px 0 0; }
.vals div { padding-top: 14px; border-top: 3px solid var(--blue); }
.vals dt { margin-bottom: 6px; color: var(--ink); font: 800 1.3rem/1.1 var(--display); text-transform: uppercase; }
.vals dd { margin: 0; font-size: .98rem; line-height: 1.5; }
@media (max-width: 899px) { .about { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .vals { grid-template-columns: 1fr; } .about__img { padding: 0 28px 56px 0; } .about__team5 { width: 54%; padding: 6px; } }

/* Reviews */
.revs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rev { display: flex; flex-direction: column; gap: 14px; padding: 28px; background: #fff; }
.rev blockquote { margin: 0; color: var(--ink); font-size: 1.05rem; line-height: 1.55; }
.rev figcaption { display: flex; flex-direction: column; margin-top: auto; color: var(--muted); font-size: .9rem; }
.rev figcaption b { color: var(--ink); font-size: 1rem; }
.rev--side { margin-top: 28px; background: var(--paper); }
@media (max-width: 899px) { .revs { grid-template-columns: 1fr; } }

/* Work gallery */
.gal { display: flex; gap: 16px; overflow-x: auto; padding: 4px max(var(--gut), calc((100% - var(--wrap)) / 2)) 14px; scroll-padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2)); scroll-snap-type: x mandatory; scrollbar-width: thin; overscroll-behavior-x: contain; }
.gal:focus-visible { outline-offset: -3px; }
.gal__i { flex: 0 0 clamp(240px, 27vw, 330px); scroll-snap-align: start; }
.gal__i img { --cut: 12px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gal__i figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; line-height: 1.4; }
.gal__nav { display: flex; gap: 8px; }
.gal__btn { display: grid; place-items: center; width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: var(--r); background: #fff; color: var(--ink); cursor: pointer; transition: background-color .2s, color .2s, opacity .2s; }
.gal__btn:first-child .i { transform: rotate(180deg); }
.gal__btn:hover:not(:disabled) { background: var(--ink); color: #fff; }
.gal__btn:disabled { opacity: .3; cursor: default; }
@media (max-width: 600px) { .gal__i { flex-basis: 74vw; } .gal__nav { display: none; } }

/* Quote */
.quote__in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.quote .lede { margin: 16px 0 26px; }
.clist { display: grid; gap: 14px; }
.clist li { display: flex; align-items: flex-start; gap: 12px; color: var(--ink); font-weight: 500; line-height: 1.45; }
.clist .i { width: 22px; height: 22px; margin-top: 1px; color: var(--blue); }
.clist a { color: var(--ink); text-decoration: none; }
.clist a:hover { color: var(--blue); text-decoration: underline; }
.form { --cut: 18px; padding: clamp(22px, 3.5vw, 36px); background: #fff; }
.form__f { display: grid; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fld { display: grid; gap: 6px; }
.fld > span { color: var(--ink); font-size: .95rem; font-weight: 600; }
.fld i { color: var(--muted); font-style: normal; font-weight: 400; }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r); background-color: var(--paper); color: var(--ink); font-size: 1rem; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.fld textarea { min-height: 96px; resize: vertical; }
.fld select { padding-right: 42px; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231665D8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--blue); background-color: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.fld.is-bad input { border-color: #C5281C; background-color: #FDF1F0; }
.form__consent { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.form__msg { margin: 0; color: var(--ink); font-weight: 600; }
.form__msg:empty { display: none; }
.form iframe { display: block; width: 100%; min-height: 640px; border: 0; }
@media (max-width: 899px) { .quote__in { grid-template-columns: 1fr; } }
.quote__img { margin-top: 30px; }
.quote__img img { --cut: 16px; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 899px) { .quote__img { display: none; } }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }

/* Footer */
.ftr { background: var(--ink); color: #B7C1CB; font-size: .98rem; }
.ftr a { color: #E9EEF3; text-decoration: none; }
.ftr a:hover { color: #fff; text-decoration: underline; }
.ftr__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 64px; padding-bottom: 48px; }
.ftr__brand img { width: auto; height: 76px; margin-bottom: 18px; }
.ftr__brand p { max-width: 34ch; }
.ftr__social { display: flex; gap: 10px; margin-top: 18px; }
.ftr__social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r); background: rgba(255, 255, 255, .08); }
.ftr__social a:hover { background: var(--blue); }
.ftr__social .i { width: 22px; height: 22px; }
.ftr__h { margin: 0 0 14px; color: #fff; font: 800 1.15rem/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.ftr__col ul { display: grid; gap: 10px; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-top: 22px; padding-bottom: calc(22px + var(--cbar-h)); border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem; }
@media (max-width: 899px) { .ftr__in { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ftr__in { grid-template-columns: 1fr; gap: 30px; padding-top: 48px; } }

/* Mobile call bar */
.cbar { display: none; }
@media (max-width: 959px) {
  .cbar { position: fixed; left: 0; right: 0; bottom: var(--ams-bar-h, 0px); z-index: 40; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px var(--gut) max(10px, calc(env(safe-area-inset-bottom) - var(--ams-bar-h, 0px))); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .97); box-shadow: 0 -10px 30px rgba(15, 20, 25, .08); }
  .cbar .btn { min-height: 48px; padding: 0 12px; }
  html.menu-open .cbar { display: none; }
}

/* Inner page hero */
.phero { background: var(--sky); }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 22px; color: var(--muted); font-size: .9rem; }
.crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.phero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(32px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 4vw, 44px); padding-bottom: clamp(48px, 6vw, 80px); }
.phero__in--one { grid-template-columns: minmax(0, 1fr); }
.phero .lede { margin: 18px 0 22px; }
.phero__img img { --cut: 22px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.ticks { display: flex; flex-wrap: wrap; gap: 10px 20px; margin: 0 0 26px; }
.ticks li { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; }
.ticks .i { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue); color: #fff; }
@media (max-width: 899px) { .phero__img img { aspect-ratio: 4 / 3; } .phero__in { grid-template-columns: 1fr; } }

/* Service page body */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.split .h2 { margin-bottom: 18px; }
.does li { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; line-height: 1.45; }
.does li:first-child { border-top: 1px solid var(--line); }
.does .i { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--sky); color: var(--blue); }
@media (max-width: 899px) { .split { grid-template-columns: 1fr; } }

.pgal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: clamp(44px, 6vw, 72px); }
.pgal img { --cut: 12px; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pgal figcaption { margin-top: 10px; color: var(--muted); font-size: .9rem; line-height: 1.4; }
@media (max-width: 700px) {
  .pgal { display: flex; gap: 14px; margin-left: calc(var(--gut) * -1); margin-right: calc(var(--gut) * -1); padding: 0 var(--gut) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); scrollbar-width: thin; }
  .pgal figure { flex: 0 0 70vw; scroll-snap-align: start; }
}

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.trio__i { padding: 28px; background: #fff; }
.i--trio { width: 58px; height: 52px; padding: 12px; margin-bottom: 18px; background: var(--sky); color: var(--blue); }
.trio__i .h4 { margin-bottom: 8px; }
@media (max-width: 899px) { .trio { grid-template-columns: 1fr; } }

.cocbox { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.cocbox .h2 { margin-bottom: 16px; }
.cocsteps { display: grid; gap: 12px; counter-reset: c; }
.cocsteps li { --cut: 10px; display: grid; grid-template-columns: 48px 1fr; gap: 2px 16px; align-items: center; padding: 16px 20px; background: #fff; counter-increment: c; }
.cocsteps li::before { content: counter(c, decimal-leading-zero); grid-row: 1 / 3; color: var(--blue); font: 800 2rem/1 var(--display); }
.cocsteps b { color: var(--ink); font: 800 1.3rem/1.05 var(--display); text-transform: uppercase; }
.cocsteps span { font-size: .95rem; line-height: 1.4; }
@media (max-width: 899px) { .cocbox { grid-template-columns: 1fr; } }

.split--faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 899px) { .split--faq { grid-template-columns: 1fr; } }
.faq { border-top: 1px solid var(--line); }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; color: var(--ink); font-size: 1.1rem; font-weight: 700; line-height: 1.35; list-style: none; cursor: pointer; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary .i--chev { width: 20px; height: 20px; color: var(--blue); }
.faq__i[open] summary .i--chev { transform: rotate(180deg); }
.faq__a { max-width: 62ch; padding: 0 0 22px; }

.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.mini { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 20px 22px; background: var(--paper); color: var(--ink-2); text-decoration: none; transition: background-color .2s; }
.mini b { display: block; margin-bottom: 2px; color: var(--ink); font: 800 1.3rem/1.1 var(--display); text-transform: uppercase; }
.mini > span > span { display: block; font-size: .95rem; line-height: 1.4; }
.mini:hover { background: var(--sky); }
.mini:hover .i--go { transform: translateX(4px); }
@media (max-width: 700px) { .minis { grid-template-columns: 1fr; } .mini { padding: 16px 18px; } }

/* Contact */
.bigphone { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 24px; color: var(--blue); font: 800 clamp(2.4rem, 5vw, 3.4rem)/1 var(--display); text-decoration: none; }
.bigphone .i { width: .75em; height: .75em; }
.bigphone:hover { color: var(--blue-ink); }
.phero--contact .clist { margin-bottom: 24px; }
.map { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.map__frame { --cut: 22px; position: relative; aspect-ratio: 16 / 10; background-color: #E6EEF7; background-image: linear-gradient(rgba(22, 101, 216, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(22, 101, 216, .09) 1px, transparent 1px), linear-gradient(32deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%); background-size: 36px 36px, 36px 36px, 100% 100%; }
.map__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__load { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); text-decoration: none; }
.map__load > span { display: flex; align-items: center; gap: 12px; padding: 14px 20px 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px rgba(15, 20, 25, .14); line-height: 1.3; transition: transform .2s var(--ease); }
.map__load:hover > span { transform: translateY(-2px); }
.map__load .i { width: 34px; height: 34px; color: var(--blue); }
.map__load b { display: block; font-size: 1.05rem; }
.map__load b + span { color: var(--muted); font-size: .9rem; }
.map__copy .h3 { margin-bottom: 12px; }
.map__copy .btn { margin-top: 20px; }
@media (max-width: 899px) { .map { grid-template-columns: 1fr; } }

/* Privacy, 404 */
.prose > * { max-width: 760px; }
.prose h2 { margin: 36px 0 10px; font-size: 1.6rem; }
.prose h2:first-child { margin-top: 0; }
.nf__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf__drop { width: 60px; height: 80px; margin-bottom: 22px; fill: var(--blue); animation: bob 2.8s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(8px); } }
.nf .lede { margin: 16px auto 28px; }
.nf .hero__btns { justify-content: center; }