/* ============================================================
   Appraisal Valet | site stylesheet (redesign, 2026-11-02)
   Nav, login panel, why band and footer from home option 2; hero,
   logo strand and footer watermark from option 1. Light and dark
   sections alternate down every page.
   Sections: 1 Tokens/base  2 Buttons  3 Header  4 Menu panel
             5 Hero  6 Trusted by  7 Why  8 Tiles  9 Footer
             10 Motion  11 Responsive, then 12-23 shared additions
   CACHE RULE: any edit here needs a ?v= bump on every page
   (Build/build_site.py sets it from ASSET_VERSION).
   ============================================================ */

/* ---------- 1. Tokens and base ---------- */
:root {
  --navy: #123854;
  --navy-dark: #0e2c43;
  --navy-deep: #0a2133;
  --blue: #359ff4;
  --blue-hover: #1f8be0;
  --blue-light: #80d6fc;
  --text: #222222;
  --body: #3b4550;
  --muted: #5b656f;
  --line: #dde3ea;
  --pale: #f3f6f9;
  --white: #ffffff;
  --wrap: 1140px;
  --gutter: 40px;
  --header-h: 72px;
  --radius: 4px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --font-head: "Montserrat", sans-serif;
  --font-body: "Lato", sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: 18px; font-weight: 400;
  line-height: 1.65; color: var(--text); background: var(--white);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; transition: color .2s ease, box-shadow .25s ease; }
@media (hover: hover) { a:hover { color: var(--navy); } }
h1, h2, h3 { font-family: var(--font-head); color: var(--navy); margin: 0; line-height: 1.1; }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.kicker {
  display: block; font-family: var(--font-head); font-weight: 700; font-size: 12px; line-height: 1.2;
  letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px;
}
.kicker--light { color: var(--blue-light); }

/* ---------- 2. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; line-height: 1;
  padding: 13px 24px; min-height: 46px; border-radius: var(--radius);
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn svg { width: 15px; height: 15px; fill: currentColor; flex: 0 0 auto; }
.btn .arw { transition: transform .2s ease; }
.btn--solid { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; }
/* option 1's hero button: navy fill inside a white frame */
.btn--hero { background: var(--navy); border: 2px solid #fff; color: #fff; padding: 14px 24px; }
@media (hover: hover) {
  .btn--solid:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(53,159,244,.6); }
  .btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-1px); }
  .btn--hero:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(53,159,244,.6); }
  .btn:hover .arw { transform: translateX(4px); }
}

/* ---------- 3. Header (option 2: 72px navy sticky bar) ---------- */
.hdr {
  position: sticky; top: 0; z-index: 200; height: var(--header-h); background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.1);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.hdr.is-scrolled {
  background: rgba(18,56,84,.9); box-shadow: 0 8px 24px -12px rgba(0,0,0,.45);
  -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hdr.is-scrolled { background: rgba(18,56,84,.98); } }
.hdr__in {
  height: 100%; max-width: calc(1280px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 32px;
}
.hdr__logo { flex: 0 0 auto; display: flex; align-items: center; min-height: 44px; }
.hdr__logo img { width: 196px; transition: opacity .2s ease; }
@media (hover: hover) { .hdr__logo:hover img { opacity: .85; } }
.nav { flex: 1 1 auto; display: flex; align-items: stretch; height: 100%; }
.nav__list { display: flex; align-items: stretch; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav__item { position: relative; display: flex; align-items: center; }
.nav__link {
  position: relative; display: inline-flex; align-items: center; height: 100%; padding: 0;
  font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: #fff; white-space: nowrap;
}
.nav__link::before {
  content: ""; position: absolute; left: 0; bottom: 18px; width: 0; height: 2px;
  background: var(--blue); transition: width .4s ease;
}
@media (hover: hover) {
  .nav__link:hover { color: #fff; }
  .nav__link:hover::before { width: 100%; }
}
.has-dropdown:focus-within > .nav__link::before { width: 100%; }
.caret {
  display: inline-block; width: 6px; height: 6px; margin-left: 9px; position: relative; top: -2px;
  border-right: 1.5px solid rgba(255,255,255,.85); border-bottom: 1.5px solid rgba(255,255,255,.85);
  transform: rotate(45deg); transition: transform .2s ease;
}
.has-dropdown:focus-within .caret, .has-dropdown.open .caret { transform: rotate(225deg); top: 1px; }
.dropdown {
  position: absolute; top: 100%; left: -20px; min-width: 230px; padding: 6px 0; z-index: 40;
  background: rgba(14,44,67,.98); border: 1px solid rgba(255,255,255,.12); border-top: 2px solid var(--blue);
  box-shadow: 0 14px 30px rgba(0,0,0,.3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-dropdown:focus-within .dropdown, .has-dropdown.open .dropdown { opacity: 1; visibility: visible; transform: none; }
.dropdown a {
  display: block; padding: 11px 20px; font-family: var(--font-head); font-weight: 600; font-size: 14px;
  color: #e6edf3; white-space: nowrap; transition: background-color .18s ease, color .18s ease;
}
@media (hover: hover) {
  .has-dropdown:hover .dropdown { opacity: 1; visibility: visible; transform: none; }
  .has-dropdown:hover .caret { transform: rotate(225deg); top: 1px; }
  .has-dropdown:hover > .nav__link::before { width: 100%; }
  .dropdown a:hover { background: rgba(255,255,255,.07); color: var(--blue-light); }
}
.util { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: 14px; }
.util__phone {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 6px;
  font-family: var(--font-head); font-weight: 600; font-size: 14px; letter-spacing: .03em; color: #fff; white-space: nowrap;
}
.util__phone svg { width: 14px; height: 14px; fill: var(--blue-light); }
@media (hover: hover) { .util__phone:hover { color: var(--blue-light); } }
.util .btn { padding: 10px 18px; min-height: 40px; font-size: 14px; }
.util__call { display: none; }
.util__call svg { width: 13px; height: 13px; fill: currentColor; margin-right: -2px; }
.burger {
  display: none; width: 44px; height: 44px; margin-right: -8px; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: none; border: 0; cursor: pointer;
}
.burger i { display: block; width: 22px; height: 2px; background: #fff; border-radius: 1px; transition: background .2s ease; }
@media (hover: hover) { .burger:hover i { background: var(--blue-light); } }

/* ---------- 4. Slide-in menu panel (T&P v2 + stacked-panel drill-down) ---------- */
.menu-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.menu-overlay.open { opacity: 1; visibility: visible; }
.menu-panel {
  position: fixed; top: 0; right: 0; z-index: 310; height: 100%; width: min(380px, 88vw);
  display: flex; flex-direction: column; background: var(--navy-dark); color: #fff;
  box-shadow: -10px 0 34px rgba(0,0,0,.45); transform: translateX(100%); visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.menu-panel.open { transform: none; visibility: visible; transition: transform .4s var(--ease), visibility 0s; }
.menu-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: var(--header-h); padding: 0 12px 0 24px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.menu-brand img { width: 160px; }
.menu-close {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; border-radius: 50%; color: #fff; font-size: 30px; line-height: 1; cursor: pointer;
  transition: color .2s ease, background-color .2s ease, transform .3s ease;
}
@media (hover: hover) { .menu-close:hover { color: var(--blue-light); background: rgba(255,255,255,.1); transform: rotate(90deg); } }
.menu-nav { position: relative; flex: 1 1 auto; display: grid; overflow: hidden; }
.menu-nav .m-root, .menu-nav .m-panel {
  grid-area: 1 / 1; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s linear .32s;
}
.menu-nav .m-panel { transform: translateX(100%); opacity: 0; visibility: hidden; }
.menu-nav.sub-open .m-root { transform: translateX(-30%); opacity: 0; visibility: hidden; }
/* coming back: the root list is visible at once so Back can return focus to its button */
.menu-nav:not(.sub-open) .m-root { transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s; }
.menu-nav.sub-open .m-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform .32s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s; }
.m-item {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px;
  padding: 14px 24px; border: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: none;
  font-family: var(--font-head); font-weight: 600; font-size: 17px; color: #fff; text-align: left; cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.m-all { color: var(--blue-light); font-size: 15px; }
.m-chev {
  flex: 0 0 auto; display: inline-block; width: 8px; height: 8px; margin-left: 12px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg);
}
.m-chev--back { transform: rotate(135deg); margin: 0 12px 0 0; }
.m-back {
  flex: 0 0 auto; display: flex; align-items: center; min-height: 48px; padding: 14px 24px; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; text-align: left;
}
.m-sub { display: flex; flex-direction: column; padding: 6px 0 16px; }
.m-sub a {
  display: flex; align-items: center; min-height: 44px; padding: 10px 24px 10px 36px;
  font-family: var(--font-head); font-weight: 600; font-size: 15px; color: #e6edf3;
}
.m-util { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 20px 24px 28px; border-top: 1px solid rgba(255,255,255,.14); }
.m-util a:not(.btn) {
  display: flex; align-items: center; min-height: 44px; font-family: var(--font-head);
  font-weight: 600; font-size: 14px; letter-spacing: .04em; color: rgba(255,255,255,.82);
}
.m-util .btn { margin-top: 12px; align-self: flex-start; }
@media (hover: hover) {
  .m-item:hover, .m-back:hover, .m-sub a:hover { background: rgba(255,255,255,.07); color: var(--blue-light); }
  .m-util a:not(.btn):hover { color: var(--blue-light); }
}
body.menu-open { overflow: hidden; }

/* ---------- 5. Hero (option 1: full-bleed video, poster first) ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff; background: var(--navy-deep);
  min-height: min(calc(88vh - var(--header-h)), 760px); display: flex; align-items: center;
}
.hero__media, .hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { visibility: hidden; }
.hero__video.is-ready { visibility: visible; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,33,51,.82) 0%, rgba(10,33,51,.6) 48%, rgba(10,33,51,.3) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto; padding: 88px var(--gutter);
}
.hero__content { max-width: 680px; }
.hero h1 {
  color: #fff; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -.02em;
  max-width: 15ch; margin: 0 0 26px;
}
.hero h1 .h1-light { display: block; font-weight: 300; }
.hero h1 strong { display: block; font-weight: 800; }
.hero p {
  font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,.9);
  max-width: 54ch; margin: 0 0 34px;
}
.hero p .accent {
  color: #fff; font-weight: 700; box-shadow: inset 0 -.14em 0 0 var(--blue);
  transition: box-shadow .25s ease, color .2s ease;
}
@media (hover: hover) { .hero p .accent:hover { color: #fff; box-shadow: inset 0 -1.2em 0 0 var(--blue); } }

/* ---------- 6. Trusted by (option 1: C9L logo strand) ---------- */
.trusted { padding: 48px 0 56px; background: var(--white); }
.strand-label {
  text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; line-height: 1.2;
  letter-spacing: .28em; text-transform: uppercase; color: var(--navy); margin: 0 0 28px;
}
.strand-label::after { content: ""; display: block; width: 36px; height: 2px; background: var(--blue); margin: 14px auto 0; }
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; width: max-content; will-change: transform;
  backface-visibility: hidden; animation: marquee var(--mq-dur, 110s) linear infinite;
}
.mq-set { display: flex; align-items: center; flex: 0 0 auto; }
.mq-set img { flex: 0 0 auto; height: 76px; width: auto; margin-right: 44px; object-fit: contain; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- 7. Why Appraisal Valet (option 2: navy band) ---------- */
.why { background: var(--navy); color: #d3dee8; padding: clamp(32px, 4vw, 52px) 0; }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.why__lead {
  font-family: var(--font-head); font-size: clamp(28px, 3.2vw, 42px); line-height: 1.12; letter-spacing: -.01em;
  color: #fff; max-width: 18ch; margin: 0 0 28px;
}
.why__simple { display: block; font-weight: 300; }
.why__lead strong { font-weight: 800; }
.why__copy p:not(.why__lead) { font-size: 17.5px; max-width: 58ch; }
.why__copy p:last-child { margin-bottom: 0; }
.why__media img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }

/* ---------- 8. (home closing section is now the shared Q&A accordion, section 18) ---------- */

/* ---------- 9. Footer (option 2 columns, option 1 watermark, contact column) ---------- */
.site-footer {
  position: relative; overflow: hidden; background: var(--navy-dark); color: #b9c7d4;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 68px;
}
.footer__watermark {
  position: absolute; right: -2%; bottom: 58px; width: min(62%, 760px); height: auto;
  opacity: .06; pointer-events: none; user-select: none;
}
.site-footer .wrap { position: relative; z-index: 1; }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; align-items: start; padding-bottom: 56px; }
.footer__logo { display: inline-flex; align-items: center; min-height: 44px; }
.footer__logo img { width: 220px; transition: opacity .2s ease; }
.footer__col { list-style: none; margin: 0; padding: 0; }
.footer__col a:not(.btn) {
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-family: var(--font-head);
  font-weight: 500; font-size: 15px; letter-spacing: .02em; color: #dbe4ec;
}
.footer__col svg { width: 14px; height: 14px; fill: var(--blue-light); flex: 0 0 auto; }
.footer__col .btn { margin-top: 12px; padding: 11px 20px; min-height: 42px; font-size: 14px; }
.footer__bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 4px 24px;
  padding: 14px 0 22px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; letter-spacing: .03em; color: #8fa3b5;
}
.footer__bar a { display: inline-flex; align-items: center; min-height: 44px; color: #dbe4ec; }
.footer__legal { display: inline-flex; flex-wrap: wrap; gap: 4px 28px; }
@media (hover: hover) {
  .footer__col a:not(.btn):hover, .footer__bar a:hover { color: var(--blue-light); }
  .footer__logo:hover img { opacity: .85; }
}

/* ---------- 10. Motion ---------- */
/* Locked scroll-reveal spec: fade + 16px rise, .7s ease-out, ~80ms stagger. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero__content > * { opacity: 0; animation: rv-failsafe 0s 2.5s forwards; }
  .r-in--rise { opacity: 0; animation: none; }
  .r-in--rise.is-in { animation: fadeInRise .7s cubic-bezier(.33,1,.68,1) both; }
  html.rv-all .r-in--rise, html.rv-all .hero__content > * { opacity: 1; animation: none; }
}
@keyframes fadeInRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rv-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .mq-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px 28px; width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 20px; }
  .mq-set[aria-hidden="true"] { display: none; }
  .mq-set img { width: 100%; height: 56px; margin: 0; }
  .hdr, .menu-panel, .menu-overlay, .menu-nav .m-root, .menu-nav .m-panel, .dropdown { transition: none; }
}

/* ---------- 11. Responsive ---------- */
@media (max-width: 1279.98px) {
  .nav__list { gap: 20px; }
  .nav__link { font-size: 14px; }
  .hdr__in { gap: 24px; }
  .hdr__logo img { width: 176px; }
  .util__num { display: none; }
  .util__phone { width: 44px; justify-content: center; margin-right: 0; }
  .util__phone svg { width: 16px; height: 16px; }
}
/* the nav needs ~1200px beside the phone, Login and Free Quote, so it folds earlier than 1024 */
@media (max-width: 1199.98px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .util { gap: 10px; }
}
@media (max-width: 1023.98px) {
  :root { --gutter: 24px; }
  .hero { min-height: 0; }
  .hero__inner { padding-top: 72px; padding-bottom: 80px; }
  .why__grid { grid-template-columns: 1fr; }
  .why__media { max-width: 640px; }
  .why__media img { aspect-ratio: 16 / 10; }
  .footer__cols { grid-template-columns: 1fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer__contact { grid-column: 1 / -1; }
  .footer__watermark { width: 120%; right: -30%; bottom: 120px; }
}
@media (max-width: 599.98px) and (prefers-reduced-motion: no-preference) {
  .mq-set img { height: 60px; margin-right: 32px; }
}
@media (max-width: 599.98px) {
  :root { --gutter: 20px; --header-h: 64px; }
  body { font-size: 17px; }
  .hdr__logo img { width: 148px; }
  /* phones: Call replaces Free Quote, Login stays as a compact ghost button */
  .util__phone, .util__quote { display: none; }
  .util { gap: 8px; }
  .util__call { display: inline-flex; align-items: center; }
  .util .util__call, .util .util__login { padding: 9px 13px; font-size: 13.5px; min-height: 40px; }
  .hero__inner { padding-top: 56px; padding-bottom: 64px; }
  .hero h1 { font-size: clamp(32px, 9vw, 38px); }
  .hero .btn { white-space: normal; text-align: left; }
  .trusted { padding: 40px 0 44px; }
  .footer__cols { gap: 4px 20px; padding-bottom: 36px; }
  .footer__logo { margin-bottom: 16px; }
  .footer__logo img { width: 190px; }
  .footer__contact { margin-top: 16px; }
  .site-footer { padding-top: 48px; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}
/* Login + Call + menu beside the logo: tighten in steps so 360 to 414 phones keep all three */
@media (max-width: 413.98px) {
  .hdr__logo img { width: 132px; }
  .hdr__in { gap: 12px; }
  .util { gap: 6px; }
  .util .util__call, .util .util__login { padding: 9px 11px; }
}
@media (max-width: 374.98px) {
  .util__call svg { display: none; }
}
@media (max-width: 339.98px) {
  .util__login { display: none; }
}

/* ============================================================
   Shared site additions (2026-11-02 rollout)
   12 Current page  13 Login panel (option E)  14 Inner page hero
   15 Section bands  16 Splits and lists  17 Service cards
   18 Accordion  19 UAD hub pieces  20 Office and forms
   21 Prose  22 Motion  23 Responsive
   ============================================================ */

.btn--navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn--lg { font-size: 16px; padding: 16px 28px; min-height: 52px; }
.phero .accent { color: #fff; font-weight: 700; box-shadow: inset 0 -.14em 0 0 var(--blue); transition: box-shadow .25s ease, color .2s ease; }
@media (hover: hover) { .phero .accent:hover { color: #fff; box-shadow: inset 0 -1.2em 0 0 var(--blue); } }
@media (hover: hover) {
  .btn--navy:hover { background: var(--blue); border-color: var(--blue); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 22px -8px rgba(53,159,244,.6); }
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 3000; padding: 10px 16px; border-radius: var(--radius);
  background: #fff; color: var(--navy); font: 700 14px/1 var(--font-head); transition: top .2s ease;
}
.skip:focus { top: 12px; }

/* ---------- 12. Current page ---------- */
.nav__link[aria-current="page"]::before, .nav__item.is-current > .nav__link::before { width: 100%; }
.dropdown a[aria-current="page"] { color: var(--blue-light); }
.m-item[aria-current="page"], .m-sub a[aria-current="page"], .m-item.is-current { color: var(--blue-light); }

/* ---------- 13. Login side panel (option E) ----------
   Logins on navy; the prospective client / appraiser notes sit straight under
   them on a white lower half. The phone menu's Login screen uses the same block. */
html.login-lock { overflow: hidden; }
.lg { position: fixed; inset: 0; z-index: 2500; visibility: hidden; transition: visibility 0s linear .45s; }
.lg.open { visibility: visible; transition-delay: 0s; }
.lg__overlay { position: absolute; inset: 0; background: rgba(9,24,38,.55); opacity: 0; transition: opacity .4s ease; }
.lg.open .lg__overlay { opacity: 1; }
.lg__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(640px, 94vw);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 24px 40px 0; background: var(--navy-dark); color: #fff;
  transform: translateX(100%); transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.lg.open .lg__panel { transform: none; }
.lg__head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 24px; margin-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.lg__head img { width: 168px; height: auto; }
.lg__close {
  width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px;
  background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.lg a:focus-visible, .lg button:focus-visible, .lgc a:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }
.lgc__notes a:focus-visible { outline-color: var(--blue); }
@media (hover: hover) { .lg__close:hover { border-color: var(--blue); background: var(--blue); } }

.lgc { flex: 1 0 auto; display: flex; flex-direction: column; }
.lgc--menu { padding: 24px 24px 0; }
.lgc__title { font: 800 28px/1.15 var(--font-head); color: #fff; margin: 0 0 22px; }
.lgc--menu .lgc__title { font-size: 22px; margin-bottom: 16px; }
.lgc__row {
  display: flex; align-items: center; justify-content: space-between; min-height: 60px;
  border-top: 1px solid rgba(255,255,255,.12); color: #fff; font: 700 17px/1.2 var(--font-head);
}
.lgc__row:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
.lgc__arw { width: 16px; height: 16px; fill: var(--blue); flex: 0 0 auto; transition: transform .25s ease; }
@media (hover: hover) {
  .lgc__row:hover { color: var(--blue-light); }
  .lgc__row:hover .lgc__arw { transform: translateX(5px); }
}
.lgc__notes {
  flex: 1 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 28px;
  margin: 32px -40px 0; padding: 32px 40px 40px; background: #fff;
}
.lgc--menu .lgc__notes { grid-template-columns: 1fr; gap: 24px; margin: 28px -24px 0; padding: 28px 24px 32px; }
.lgc__label {
  font: 700 12px/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase;
  color: var(--navy); margin: 0 0 10px;
}
.lgc__notes p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0; }
.lgc__notes p a { color: var(--blue-hover); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .lgc__notes p a:hover { color: var(--navy); } }
.lgc__ico {
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px;
  border-radius: 50%; background: rgba(53,159,244,.12);
}
.lgc__ico svg { width: 18px; height: 18px; fill: var(--blue); }
.lgc--menu .lgc__col { display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; }
.lgc--menu .lgc__ico { grid-row: span 2; margin: 0; }
.lgc--menu .lgc__label { align-self: center; margin: 0 0 8px; }
.m-panel--login { background: var(--navy-dark); }

/* ---------- 14. Inner page hero (same type, height and buttons as the home hero; photo or plain navy) ---------- */
.phero {
  position: relative; overflow: hidden; color: #fff; background: var(--navy-deep);
  min-height: min(calc(64vh - var(--header-h)), 560px); display: flex; align-items: center;
}
.phero__media, .phero__media img, .phero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero__media video { visibility: hidden; }
.phero__media video.is-ready { visibility: visible; }
.phero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(10,33,51,.82) 0%, rgba(10,33,51,.6) 48%, rgba(10,33,51,.3) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 30%);
}
/* no photo: navy with the faint grid and a blue glow, like the header's world */
.phero--plain { background: radial-gradient(120% 160% at 85% -20%, #18486b, var(--navy) 55%, var(--navy-deep)); }
.phero--plain::after { content: none; }
.phero--plain::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%);
}
.phero__inner {
  position: relative; z-index: 2; width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto; padding: 88px var(--gutter);
}
.phero__content { max-width: 680px; }
.phero h1 {
  color: #fff; font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -.02em;
  max-width: 15ch; margin: 0 0 26px;
}
.phero h1:last-child { margin-bottom: 0; }
.phero h1 .h1-light { display: block; font-weight: 300; }
.phero h1 strong { display: block; font-weight: 800; }
.phero__lead { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; color: rgba(255,255,255,.9); max-width: 54ch; margin: 0 0 34px; }
.phero__lead:last-child { margin-bottom: 0; }
.phero__lead--strong { font-weight: 700; color: #fff; margin-bottom: 20px; }
.phero__split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.phero__split h1 { max-width: none; font-size: clamp(32px, 3.4vw, 44px); }
/* title-only hero (FAQ): no min-height, ~104px of space above and below the letters on desktop */
@media (min-width: 1024px) {
  .phero--compact { min-height: 0; }
  .phero--compact .phero__inner { padding-top: 93px; padding-bottom: 104px; }
}
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px;
  border: 1px solid rgba(128,214,252,.4); border-radius: 999px; background: rgba(53,159,244,.12);
  font: 700 12.5px/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-light);
}
.badge svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }

/* ---------- 15. Section bands: light and dark alternate down every page ---------- */
.band { padding: clamp(32px, 4vw, 52px) 0; background: var(--white); }
.band--pale { background: var(--pale); }
.band--navy { background: var(--navy); color: #d3dee8; }
.band--navy h2, .band--navy h3 { color: #fff; }
.band--navy a:not(.btn) { color: var(--blue-light); }
@media (hover: hover) { .band--navy a:not(.btn):hover { color: #fff; } }
.sec-head { max-width: 780px; margin: 0 0 44px; }
.h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 18px; }
.h2--sm { font-size: clamp(24px, 2.4vw, 30px); }
.sec-head p { color: var(--body); margin: 0; }
.band--navy .sec-head p { color: #d3dee8; }

/* ---------- 16. Splits and lists ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.split--top { align-items: start; }
.split--wide-copy { grid-template-columns: 56fr 44fr; }
.split__copy > :last-child { margin-bottom: 0; }
.split__copy p { color: var(--body); }
.band--navy .split__copy p { color: #d3dee8; }
.split__copy h2 + h2, .split__copy p + h2 { margin-top: 36px; }
.split__media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(11,31,51,.45);
}
.band--navy .split__media img { box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); }
.split__media--frame { position: relative; }
.split__media--frame::before {
  content: ""; position: absolute; inset: 24px -16px -16px 24px; background: var(--blue); opacity: .16; border-radius: 8px;
}
.split__media--frame img { position: relative; }
.copy-lead {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45;
  color: var(--navy); margin: 0 0 22px;
}
.band--navy .copy-lead { color: #fff; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.checks li { position: relative; padding-left: 34px; color: var(--body); line-height: 1.55; }
.band--navy .checks li { color: #d3dee8; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(53,159,244,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23359ff4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ---------- 17. Service cards (Services page): photo, text over a dark fade ---------- */
.svc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc__card {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 440px; padding: 32px;
  border-radius: 6px; overflow: hidden; color: #fff; background: var(--navy-deep);
}
.svc__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.svc__card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,33,51,.1) 0%, rgba(10,33,51,.55) 40%, rgba(10,33,51,.94) 100%);
}
/* hover tint: brand blue washes in over the fade */
.svc__card::before {
  content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0; transition: opacity .35s var(--ease);
  background: linear-gradient(180deg, rgba(53,159,244,.28) 0%, rgba(31,139,224,.62) 45%, rgba(18,56,84,.95) 100%);
}
.svc__body { position: relative; z-index: 3; display: flex; flex-direction: column; }
.svc__card h2 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 12px; }
.svc__card p { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); margin: 0 0 22px; }
.svc__link {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 10px 0;
  font: 600 15px/1 var(--font-head); color: #fff; border-bottom: 2px solid transparent;
  transition: transform .35s var(--ease), color .25s ease, border-color .25s ease;
}
.svc__link svg { width: 15px; height: 15px; fill: currentColor; transition: transform .35s var(--ease); }
@media (hover: hover) {
  .svc__card:hover::before { opacity: 1; }
  .svc__card:hover img { transform: scale(1.05); }
  .svc__card:hover .svc__link { transform: translateX(6px); color: #fff; border-color: var(--blue-light); }
  .svc__card:hover .svc__link svg { transform: translateX(5px); }
}
.svc__card:focus-visible::before { opacity: 1; }
.svc__card:focus-visible .svc__link { border-color: var(--blue-light); }

/* ---------- 18. Accordion ---------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__h { margin: 0; font: inherit; color: inherit; }
.acc__q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 0; background: none; border: 0; text-align: left; cursor: pointer;
  font: 600 17px/1.4 var(--font-head); color: var(--navy); transition: color .2s ease;
}
.acc__icon {
  position: relative; flex: 0 0 auto; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%;
  border: 1.5px solid var(--line); transition: background-color .25s ease, border-color .25s ease;
}
.acc__icon::before, .acc__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px;
  background: var(--blue); transition: transform .3s var(--ease), background-color .25s ease;
}
.acc__icon::after { transform: rotate(90deg); }
.acc__item.open .acc__q { color: var(--blue-hover); }
.acc__item.open .acc__icon { background: var(--blue); border-color: var(--blue); }
.acc__item.open .acc__icon::before, .acc__item.open .acc__icon::after { background: #fff; }
.acc__item.open .acc__icon::after { transform: rotate(0deg); }
@media (hover: hover) {
  .acc__q:hover { color: var(--blue-hover); }
  .acc__q:hover .acc__icon { border-color: var(--blue); }
}
/* height animates through grid rows, so no measuring in JS */
.acc__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); }
.acc__item.open .acc__a { grid-template-rows: 1fr; }
.acc__a > div { overflow: hidden; visibility: hidden; transition: visibility 0s linear .35s; }
.acc__item.open .acc__a > div { visibility: visible; transition-delay: 0s; }
.acc__body { padding: 0 48px 24px 0; color: var(--body); font-size: 17px; line-height: 1.65; }
.acc__body p { margin: 0 0 1em; }
.acc__body > :last-child { margin-bottom: 0; }
.acc__body a { text-decoration: underline; text-underline-offset: 3px; }
.acc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; align-items: start; }
.acc-narrow { max-width: 860px; }

/* ---------- 19. UAD hub pieces ---------- */
.icon3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.icon3__item { padding: 36px 32px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.icon3__ico {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 0 22px;
  border-radius: 50%; background: var(--pale);
}
.icon3__ico img { width: 34px; height: 34px; object-fit: contain; }
.icon3__item h3 { font-size: 21px; font-weight: 700; margin: 0 0 12px; }
.icon3__item p { color: var(--body); font-size: 16.5px; margin: 0; }
.thumbs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.thumbs3__img {
  width: min(200px, 100%); aspect-ratio: 1; margin: 0 0 24px; border-radius: 50%; overflow: hidden;
  border: 4px solid rgba(255,255,255,.14); box-shadow: 0 24px 48px -24px rgba(0,0,0,.6); background: #fff;
}
.thumbs3__img img { width: 100%; height: 100%; object-fit: cover; }
.res-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.res-groups__col { min-width: 0; }
.res-groups h2 { margin-bottom: 24px; }
.res-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.res-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.res-card__img { aspect-ratio: 16 / 10; background: var(--navy); overflow: hidden; }
.res-card__img img { width: 100%; height: 100%; object-fit: cover; }
.res-card__body { flex: 1; display: flex; flex-direction: column; padding: 22px 22px 24px; }
.res-card h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.res-card p { flex: 1; color: var(--body); font-size: 15.5px; line-height: 1.6; margin: 0 0 18px; }
.res-card .btn { align-self: flex-start; }

/* ---------- 20. Office and forms ---------- */
.office__label { font: 700 12px/1.2 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--blue); margin: 0 0 14px; }
.office__addr { font: 600 clamp(22px, 2.4vw, 28px)/1.3 var(--font-head); color: var(--navy); margin: 0 0 28px; }
.office__lines { list-style: none; margin: 0 0 28px; padding: 0; border-top: 1px solid var(--line); }
.office__lines li { display: flex; align-items: center; gap: 14px; min-height: 60px; border-bottom: 1px solid var(--line); color: var(--body); }
.office__lines svg { width: 16px; height: 16px; fill: var(--blue); flex: 0 0 auto; }
.office__lines a { color: var(--navy); font-weight: 700; }
@media (hover: hover) { .office__lines a:hover { color: var(--blue-hover); } }
.office__cta { font-weight: 700; color: var(--navy); margin: 0; }

.fcard {
  max-width: 880px; margin: 0 auto; padding: clamp(28px, 5vw, 56px); background: #fff;
  border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 30px 60px -36px rgba(11,31,51,.35);
}
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; }
.f--full { grid-column: 1 / -1; }
.f label, .f legend {
  display: block; margin: 0 0 8px; padding: 0; font: 600 14px/1.35 var(--font-head); color: var(--navy);
}
.f .req { color: var(--blue); }
.f input[type="text"], .f input[type="email"], .f input[type="tel"], .f input[type="date"], .f select, .f textarea {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid #c3cfda; border-radius: var(--radius);
  background: #fff; color: var(--text); font: 400 17px/1.4 var(--font-body);
  transition: border-color .2s ease, box-shadow .2s ease; -webkit-appearance: none; appearance: none;
}
.f textarea { min-height: 130px; resize: vertical; }
.f select {
  padding-right: 40px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23123854' stroke-width='1.6'/%3E%3C/svg%3E") right 16px center / 12px no-repeat;
}
.f input::placeholder, .f textarea::placeholder { color: #8a96a3; }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(53,159,244,.2); }
.f [aria-invalid="true"] { border-color: #c62828; }
fieldset.f { margin: 0; padding: 0; border: 0; min-width: 0; }
.opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 16px; }
.opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.f label.opt { display: flex; margin: 0; padding: 10px 14px; font: 400 16px/1.35 var(--font-body); color: var(--text); }
.opt { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font-size: 16px; color: var(--text); transition: border-color .2s ease, background-color .2s ease; }
.opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: 0 0 auto; }
.opt:has(input:checked) { border-color: var(--blue); background: rgba(53,159,244,.07); }
@media (hover: hover) { .opt:hover { border-color: var(--blue); } }
.f-note { margin: 0; padding: 14px 16px; border-left: 3px solid var(--blue); background: var(--pale); color: var(--body); font-size: 15.5px; line-height: 1.55; }
.f-consent { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--pale); }
.f-consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--blue); flex: 0 0 auto; }
.f-consent label { margin: 0; font: 400 14.5px/1.55 var(--font-body); color: var(--body); }
.f-consent strong { display: block; font: 600 14px/1.35 var(--font-head); color: var(--navy); margin-bottom: 4px; }
.ferr { display: none; margin-top: 6px; font-size: 14px; color: #c62828; }
.ferr.show { display: block; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px; margin-top: 8px; }
.f-submit .btn { min-width: 180px; }
.f-submit .btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.fstatus { display: none; margin: 20px 0 0; padding: 14px 16px; border-radius: var(--radius); font-size: 16px; }
.fstatus.show { display: block; }
.fstatus.ok { background: #e8f6ee; color: #1b5e20; border: 1px solid #b7dfc4; }
.fstatus.err { background: #fdecea; color: #b71c1c; border: 1px solid #f5c2bd; }

/* ---------- 21. Prose (Terms) ---------- */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 20px; font-weight: 700; letter-spacing: .04em; margin: 2.2em 0 .8em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 17px; font-weight: 700; margin: 1.6em 0 .6em; }
.prose p, .prose li { color: var(--body); font-size: 17px; line-height: 1.7; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 22. Motion (inner heroes stage like the home hero) ---------- */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .phero__content > *, .phero__aside > * { opacity: 0; animation: rv-failsafe 0s 2.5s forwards; }
  html.rv-all .phero__content > *, html.rv-all .phero__aside > * { opacity: 1; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .acc__a, .acc__a > div { transition: none; }
  .svc__card img, .svc__link, .svc__link svg { transition: none; }
}

/* ---------- 23. Responsive ---------- */
@media (max-width: 1099.98px) {
  .res-groups { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 1023.98px) {
  .phero { min-height: 0; }
  .phero__inner { padding-top: 72px; padding-bottom: 80px; }
  .split, .split--wide-copy, .phero__split { grid-template-columns: 1fr; }
  .split__media { max-width: 640px; }
  .split--media-first .split__media { order: -1; }
  .svc { grid-template-columns: 1fr; }
  .svc__card { min-height: 380px; }
  .svc__card::after { background: linear-gradient(180deg, rgba(10,33,51,.35) 0%, rgba(10,33,51,.82) 40%, rgba(10,33,51,.95) 100%); }
  .icon3, .thumbs3 { grid-template-columns: 1fr; }
  .icon3 { max-width: 640px; }
  .thumbs3 { gap: 44px; }
  .acc-cols { grid-template-columns: 1fr; }
  .acc-cols .acc + .acc { border-top: 0; }
}
@media (max-width: 767.98px) {
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) { .lgc__notes { grid-template-columns: 1fr; } }
@media (max-width: 599.98px) {
  .lg__panel { padding: 20px 20px 0; }
  .lgc__title { font-size: 24px; }
  .lg__panel .lgc__notes { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
  .fgrid { grid-template-columns: 1fr; }
  .opts, .opts--2 { grid-template-columns: 1fr; }
  .res-pair { grid-template-columns: 1fr; }
  .acc__body { padding-right: 0; }
  .f-submit .btn { width: 100%; }
  .phero__inner { padding-top: 56px; padding-bottom: 64px; }
  .phero h1 { font-size: clamp(32px, 9vw, 38px); }
  .phero .btn { white-space: normal; text-align: left; }
}