/* YJ Electric Group: shared styles for the static site.
   Generated pages link this file; scripts/site/ writes the markup.
   Mobile first. Breakpoints: 720px (tablet), 1080px (desktop). */

:root {
  --ivory: #F7F3EC;
  --limestone: #EFE8DC;
  --navy: #1F2A4A;
  --midnight: #141B2E;
  --brass: #B8914F;
  --brass-text: #7E6130;
  --gold: #E9AA46;
  --gold-soft: #E9C27E;
  --ink: #1A2236;
  --body: #3E4250;
  --muted: #5F5A52;
  --faint: #6B665C;
  --line: rgba(31, 42, 74, .12);
  --line-strong: rgba(31, 42, 74, .2);
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --gutter: clamp(20px, 5.6vw, 80px);
  --sec: clamp(72px, 9.5vw, 140px);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --r: 14px;
  --r-sm: 10px;
  --r-xs: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--brass-text); }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 500; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--ivory); padding: 10px 16px; }
.skip:focus { top: 12px; color: var(--ivory); }

/* ── Type ─────────────────────────────────────────────── */
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.eyebrow { font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass-text); margin: 0 0 14px; }
.on-dark .eyebrow, .eyebrow.on-dark { color: var(--gold-soft); }
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-size: clamp(46px, 7.2vw, 104px); line-height: .98; }
.h1 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-size: clamp(44px, 6.6vw, 96px); line-height: 1; }
.h2 { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.03; }
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; }
.h4 { font-family: var(--serif); font-weight: 500; font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }
.lede { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.16; }
.sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.65; color: var(--body); }
.body { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.72; color: var(--body); }
.body p + p { margin-top: 1em; }
.small { font-size: 14px; line-height: 1.55; color: var(--muted); }
.muted { color: var(--muted); }
em.accent { color: var(--brass-text); font-style: italic; }
.on-dark em.accent { color: var(--gold-soft); }

/* ── Layout ───────────────────────────────────────────── */
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
.sec { padding-block: var(--sec); }
.sec-top { padding-top: var(--sec); }
.sec-bottom { padding-bottom: var(--sec); }
.sec-tight { padding-block: clamp(56px, 7vw, 96px); }
/* Service pages: tighter sections, and no icon tile above the checklist once the layout stacks. */
.tight { --sec: clamp(56px, 7vw, 96px); }
@media (max-width: 1079px) { .svc-incl > .ph { display: none !important; } }
.bg-limestone { background: var(--limestone); }
.bg-navy { background: var(--navy); color: var(--ivory); }
.bg-midnight { background: var(--midnight); color: var(--ivory); }
.rule-top { border-top: 1px solid var(--line); }
.stack > * + * { margin-top: var(--gap, 16px); }
.grid { display: grid; gap: var(--gap, 24px); grid-template-columns: minmax(0, 1fr); }
.split { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.head-row { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(28px, 3.6vw, 52px); }
.head-row > a { align-self: flex-start; }
@media (min-width: 720px) { .head-row > a { align-self: auto; flex-shrink: 0; } }
@media (min-width: 720px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; }
}
@media (min-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 6.6vw, 96px); }
  .split.align-end { align-items: end; }
  .split.align-center { align-items: center; }
  .split-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .split-narrow { grid-template-columns: 380px minmax(0, 1fr); }
}

/* ── Buttons and links ────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--r-sm); font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: .04em; line-height: 1.2; text-align: center; cursor: pointer; transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-navy { background: var(--navy); color: var(--ivory); }
.btn-navy:hover { background: var(--midnight); color: var(--ivory); }
.btn-ivory { background: var(--ivory); color: var(--navy); }
.btn-ivory:hover { background: #fff; color: var(--navy); }
.btn-line { border-color: rgba(247, 243, 236, .55); color: var(--ivory); background: transparent; }
.btn-line:hover { background: rgba(247, 243, 236, .1); color: var(--ivory); }
.btn-outline { border-color: rgba(31, 42, 74, .35); color: var(--navy); background: transparent; }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }
.btn-block { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btns.stack-sm > .btn { flex: 1 1 100%; }
@media (min-width: 720px) { .btns.stack-sm > .btn { flex: 0 0 auto; } }
.link { display: inline-block; font-weight: 600; font-size: 15px; letter-spacing: .03em; color: var(--navy); padding-bottom: 5px; background-image: linear-gradient(var(--navy), var(--navy)), linear-gradient(var(--brass), var(--brass)); background-size: 0 1px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat; transition: background-size .5s var(--ease), color .3s ease; }
.link:hover { background-size: 100% 1px, 100% 1px; color: var(--navy); }
.on-dark .link, .link.on-dark { color: var(--ivory); background-image: linear-gradient(var(--ivory), var(--ivory)), linear-gradient(var(--gold), var(--gold)); }
.arrow-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--ink); }
.arrow-row:hover { color: var(--ink); }
.arrow-row > div { flex: 1 1 auto; min-width: 0; }
.arrow-row svg { flex-shrink: 0; transition: transform .4s var(--ease); }
.arrow-row:hover svg { transform: translateX(4px); }
.rows { border-bottom: 1px solid var(--line); }

/* ── Photo placeholders ───────────────────────────────── */
.ph { position: relative; overflow: hidden; background: #DCD1BF; display: flex; align-items: flex-end; aspect-ratio: var(--ar, 4 / 5); }
.ph::after { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(31, 42, 74, .14); pointer-events: none; }
.ph.dark { background: #2B3244; }
.ph.dark::after { border-color: rgba(247, 243, 236, .16); }
.ph-tag { position: relative; z-index: 2; margin: 14px; padding: 6px 9px; background: rgba(247, 243, 236, .94); color: var(--navy); font-family: var(--label); font-weight: 600; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.ph.tag-top { align-items: flex-start; justify-content: flex-end; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.has-photo::after { display: none; }
.hero .has-photo + .shade { background: linear-gradient(180deg, rgba(20, 27, 46, .18) 0%, rgba(20, 27, 46, .5) 34%, rgba(20, 27, 46, .86) 62%, rgba(20, 27, 46, .92) 100%); }
@media (min-width: 720px) {
  .hero .has-photo + .shade { background: linear-gradient(90deg, rgba(20, 27, 46, .84) 0%, rgba(20, 27, 46, .7) 45%, rgba(20, 27, 46, .5) 72%, rgba(20, 27, 46, .22) 100%), linear-gradient(180deg, rgba(20, 27, 46, 0) 55%, rgba(20, 27, 46, .45) 100%); }
}
.t1 { background: #DCD1BF; } .t2 { background: #D3C7B3; } .t3 { background: #CFC3AE; } .t4 { background: #D6CBB8; } .t5 { background: #CDC0AA; } .t6 { background: #D9CEBC; }
.lift .ph > * { transition: transform .9s var(--ease); }
.lift { display: flex; flex-direction: column; gap: 14px; color: var(--ink); transition: transform .5s var(--ease); }
.lift:hover { color: var(--ink); transform: translateY(-6px); }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-meta .eyebrow { margin: 0; }

/* ── Header ───────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(247, 243, 236, .96); backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--navy); }
.brand:hover { color: var(--navy); }
.brand img { width: 44px; height: 44px; border-radius: 50%; }
.brand span { font-family: var(--label); font-weight: 600; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.brand .full { display: none; }
.main-nav { display: none; gap: clamp(20px, 2.2vw, 32px); }
.main-nav a { font-size: 15px; font-weight: 500; letter-spacing: .02em; color: var(--ink); padding: 6px 0 5px; border-bottom: 1px solid transparent; transition: border-color .3s ease; }
.main-nav a:hover, .main-nav a[aria-current] { border-bottom-color: var(--brass); color: var(--ink); }
.header-cta { display: none; align-items: center; gap: 12px; }
.header-cta .tel { font-weight: 600; font-size: 15px; letter-spacing: .04em; margin-right: 12px; white-space: nowrap; }
.header-cta .btn { min-height: 46px; padding: 0 20px; }
.menu-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--navy); }
@media (min-width: 1080px) {
  .site-header .wrap { height: 92px; }
  .brand img { width: 56px; height: 56px; }
  .brand span { font-size: 16px; }
  .brand .short { display: none; }
  .brand .full { display: inline; }
  .main-nav, .header-cta { display: flex; }
  .menu-btn { display: none; }
}
/* Six nav links need the room: no wordmark below 1440px, no phone number below 1280px. */
@media (min-width: 1080px) and (max-width: 1439px) {
  .brand .full { display: none; }
}
@media (min-width: 1080px) and (max-width: 1279px) {
  .header-cta .tel { display: none; }
}

/* ── Mobile menu ──────────────────────────────────────── */
.menu { position: fixed; inset: 0; z-index: 60; background: var(--ivory); display: flex; flex-direction: column; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .35s var(--ease), visibility 0s linear .35s; }
.menu.open { visibility: visible; opacity: 1; transform: none; transition: opacity .3s ease, transform .35s var(--ease); }
.menu-top { height: 68px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.menu nav { padding: 8px 20px 0; display: flex; flex-direction: column; }
.menu-head { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 64px; padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--ink); text-align: left; cursor: pointer; }
.menu-head .chev { flex-shrink: 0; color: var(--navy); transition: transform .3s var(--ease); }
.menu-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.menu-sub-in { overflow: hidden; display: flex; flex-direction: column; }
.menu-group.open .menu-sub { grid-template-rows: 1fr; }
.menu-group.open .menu-sub-in { padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.menu-sub a { font-size: 17px; color: var(--body); padding: 9px 0 9px 2px; }
.menu-sub a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.menu-actions { margin-top: auto; padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); }
.menu-actions .tel { text-align: center; font-weight: 600; font-size: 16px; padding: 12px 0 2px; }
.menu-actions .small { text-align: center; }
body.menu-open { overflow: hidden; }

/* ── Hero ─────────────────────────────────────────────── */
.hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; min-height: min(700px, 88svh); color: var(--ivory); background: #2E3346; }
.hero .ph { position: absolute; inset: 0; aspect-ratio: auto; background: #2E3346; align-items: flex-start; justify-content: flex-end; }
.hero .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 27, 46, .12) 20%, rgba(20, 27, 46, .82) 100%); }
.hero .wrap { position: relative; z-index: 2; padding-bottom: clamp(44px, 6vw, 88px); padding-top: 120px; }
.hero .inner { max-width: 1040px; }
.hero .sub { color: rgba(247, 243, 236, .88); margin-top: clamp(18px, 1.8vw, 26px); max-width: 640px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.hero .btns { margin-top: clamp(28px, 2.6vw, 38px); }
.hero .crumbs { font-size: 14px; color: rgba(247, 243, 236, .78); margin-bottom: 22px; }
.hero .crumbs a { color: rgba(247, 243, 236, .9); }
.hero-home { min-height: min(820px, 92svh); }
.hero-home .inner { max-width: 1240px; }
.hero-home .h1 { font-size: clamp(40px, 6vw, 84px); }
.hero .btns .btn { flex: 1 1 100%; }
@media (min-width: 720px) {
  .hero { min-height: 760px; }
  .hero .btns .btn { flex: 0 0 auto; }
}
.page-head { padding-top: clamp(56px, 7.6vw, 110px); padding-bottom: clamp(28px, 4vw, 64px); }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.crumbs a { border-bottom: 1px solid var(--brass); }

/* ── Sections and components ──────────────────────────── */
.trust-strip { border-bottom: 1px solid var(--line); }
.trust-strip .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; padding-block: 22px; font-size: 14px; font-weight: 500; color: var(--body); }
.trust-strip .item { display: flex; align-items: center; gap: 10px; }
@media (min-width: 1080px) { .trust-strip .wrap { display: flex; justify-content: space-between; font-size: 15px; } }

.num-item { display: flex; gap: 20px; padding: 18px 0; }
/* A short brass line in place of a number: these lists have no order (layout.MARK). */
.num-item .mark { width: 28px; height: 1px; flex-shrink: 0; margin: 17px 12px 0 0; background: var(--brass); }
.num-item .t { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 30px); line-height: 1.1; margin-bottom: 6px; }
.num-item p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.num-cols { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
.num-cols .col { padding: 20px 0; }
.num-cols .mark { width: 28px; height: 1px; margin-bottom: 18px; background: var(--brass); }
.num-cols .t { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; margin-bottom: 10px; }
.num-cols p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.bg-navy .num-cols p { color: rgba(247, 243, 236, .78); }
@media (min-width: 720px) {
  .num-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 40px; }
}
@media (min-width: 1080px) {
  .num-cols.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .num-cols.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.checks { border-bottom: 1px solid var(--line); }
.check { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); font-size: clamp(16px, 1.2vw, 17px); line-height: 1.5; }
.check svg { flex-shrink: 0; margin-top: 3px; }

.review { text-align: center; }
.review .wrap { display: flex; flex-direction: column; align-items: center; }
.review blockquote { margin: 26px 0 0; max-width: 1080px; font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.36; color: var(--ivory); }
.review .who { margin-top: 28px; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-soft); }
.review .link { margin-top: 32px; }
.stars { display: inline-flex; gap: 3px; }

.trust-faces { display: flex; flex-shrink: 0; }
.trust-faces img { width: clamp(64px, 9vw, 132px); height: clamp(64px, 9vw, 132px); border-radius: 50%; border: 3px solid var(--ivory); object-fit: cover; }
.trust-faces img + img { margin-left: clamp(-28px, -2vw, -14px); }
.trust-block { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 1080px) { .trust-block { flex-direction: row; align-items: center; gap: 80px; } }

.faq { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { list-style: none; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; font-size: 17px; font-weight: 500; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .sign { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(31, 42, 74, .3); display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; color: var(--navy); transition: transform .3s var(--ease); }
.faq details[open] summary .sign { transform: rotate(45deg); }
.faq details p { padding: 0 40px 22px 0; font-size: 15px; line-height: 1.65; color: var(--muted); }
.faq details[open] p { animation: open .35s ease both; }

.cta { position: relative; overflow: hidden; color: var(--ivory); background: #1F2639; }
.cta .wrap { position: relative; z-index: 2; padding-block: clamp(80px, 9vw, 130px) clamp(72px, 7.6vw, 110px); }
.cta .center { display: flex; flex-direction: column; }
.cta h2 { color: var(--ivory); font-size: clamp(46px, 5.6vw, 80px); line-height: 1; }
.cta .sub { color: rgba(247, 243, 236, .88); margin-top: 16px; }
.cta .cards { margin-top: clamp(28px, 3.6vw, 52px); display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); text-align: left; }
.cta .card { background: var(--ivory); color: var(--ink); padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.cta .card .h3 { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.05; }
.cta .card p { color: var(--muted); margin-bottom: 10px; font-size: 15px; }
.cta .card .btn { width: 100%; }
.cta .call { margin-top: 28px; font-size: 15px; color: rgba(247, 243, 236, .86); }
.cta .call a { color: var(--ivory); font-weight: 600; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
@media (min-width: 720px) {
  .cta .center { align-items: center; text-align: center; }
  .cta .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 1040px; }
  .cta .cards.one { grid-template-columns: minmax(0, 1fr); max-width: 620px; }
  .cta .card .btn { width: auto; }
}

.panel { background: var(--limestone); padding: clamp(28px, 4vw, 56px) clamp(24px, 4.4vw, 64px); display: flex; flex-direction: column; gap: 18px; }
@media (min-width: 1080px) { .panel.row { flex-direction: row; justify-content: space-between; align-items: center; gap: 48px; } .panel.row .btn { flex-shrink: 0; } }
.box { background: #fff; border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }

.logo-tile { position: relative; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid rgba(31, 42, 74, .1); font-family: var(--sans); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #4A5063; min-height: 72px; font-size: 13px; transition: border-color .3s ease; }
.logo-tile:hover { border-color: var(--brass); color: #4A5063; }
.logo-tile img { display: block; width: auto; height: auto; max-width: 68%; max-height: 38px; filter: grayscale(1); opacity: .72; transition: filter .3s ease, opacity .3s ease; }
.logo-tile img[src*="chargepoint"] { filter: grayscale(1) brightness(.55); }
.logo-tile:hover img { filter: none; opacity: 1; }
.logo-tile .tag { position: absolute; top: 6px; right: 8px; font-family: var(--label); font-size: 9px; letter-spacing: .14em; color: #8A8578; }
.logos { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 1080px) { .logo-tile { min-height: 110px; font-size: 16px; } .logos { gap: 16px; } .logos.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
@media (min-width: 720px) { .rail { grid-auto-columns: 44%; } }
@media (min-width: 1080px) {
  .rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; overflow: visible; margin: 0; padding: 0; }
  .rail.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}

.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
@media (min-width: 1080px) { .chips { flex-wrap: wrap; margin: 0; padding-inline: 0; } }
.chip { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; background: #fff; border: 1px solid rgba(31, 42, 74, .16); border-radius: var(--r-sm); font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.chip:hover { border-color: var(--navy); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--ivory); }

/* Forms */
.label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.label .opt { font-weight: 400; color: var(--faint); }
.input { width: 100%; min-height: 52px; padding: 0 16px; background: #fff; border: 1px solid rgba(31, 42, 74, .22); border-radius: var(--r-sm); font-size: 16px; color: var(--ink); outline: none; transition: border-color .2s ease, box-shadow .2s ease; }
textarea.input { padding: 14px 16px; min-height: 120px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231F2A4A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.input:focus { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.input::placeholder { color: #8E897E; }
.form { display: flex; flex-direction: column; gap: 16px; }
.form .row { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .form .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form > .btn { align-self: flex-start; } }
.form-note { font-size: 13px; color: var(--faint); }
.form-status { font-size: 15px; line-height: 1.55; padding: 14px 16px; background: #fff; border: 1px solid var(--brass); display: none; }
.form-status.show { display: block; }
.form-status.err { border-color: #c48a8a; color: #7a2b2b; }
.zipbox { display: flex; gap: 8px; }
.zipbox .input { flex: 1 1 auto; }
.zip-result { margin-top: 12px; font-size: 14px; color: var(--body); min-height: 22px; }
.zip-result a { white-space: nowrap; }

/* Footer */
.site-footer { background: var(--midnight); color: var(--ivory); }
.site-footer .wrap { padding-block: clamp(56px, 6.6vw, 96px) clamp(40px, 4vw, 48px); }
.site-footer .top { display: flex; flex-direction: column; gap: 36px; }
.site-footer .logo { width: clamp(72px, 7vw, 96px); height: auto; }
.site-footer .sign { font-family: var(--serif); font-weight: 500; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; margin-top: 22px; }
.site-footer .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.site-footer .col { display: flex; flex-direction: column; gap: 12px; }
.site-footer .col .eyebrow { color: var(--gold-soft); margin-bottom: 6px; }
.site-footer .col a, .site-footer .col span { color: rgba(247, 243, 236, .72); font-size: 15px; }
.site-footer .col a:hover { color: #fff; }
.site-footer .col a.strong { color: var(--ivory); font-weight: 600; }
.site-footer .col a.tel { color: var(--ivory); font-weight: 600; font-size: 18px; }
.site-footer .social { display: flex; gap: 10px; margin-top: 6px; }
.site-footer .social a { width: 40px; height: 40px; border: 1px solid rgba(247, 243, 236, .2); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.site-footer .social a:hover { border-color: var(--gold); }
.site-footer .bottom { margin-top: clamp(48px, 5.6vw, 80px); padding-top: 24px; border-top: 1px solid rgba(247, 243, 236, .12); display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: rgba(247, 243, 236, .6); }
.site-footer .bottom a { color: inherit; }
.site-footer .bottom a:hover { color: #fff; }
@media (min-width: 720px) { .site-footer .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .site-footer .top { flex-direction: row; justify-content: space-between; gap: 64px; }
  .site-footer .brandcol { max-width: 360px; }
  .site-footer .cols { display: flex; gap: clamp(48px, 6vw, 88px); }
  .site-footer .bottom { flex-direction: row; justify-content: space-between; }
}

/* Sticky action bar (phones) */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(247, 243, 236, .97); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .5s var(--ease); }
.action-bar.show { transform: none; }
.action-bar .btn { flex: 1 1 0; min-height: 50px; padding: 0 10px; }
.action-bar .call { flex: 0 0 50px; width: 50px; padding: 0; }
@media (min-width: 1080px) { .action-bar { display: none; } }
@media (max-width: 1079px) { body.has-bar .site-footer .wrap { padding-bottom: 110px; } }

/* Rating (filled from window.YJE_REVIEWS; removed when missing) */
.yj-rating { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.yj-rating .score { font-weight: 600; }
.yj-rating:empty { display: none; }

/* Marquee (neighborhoods) */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding-block: 22px; margin-bottom: clamp(56px, 7vw, 104px); }
.marquee .track { display: flex; gap: clamp(20px, 1.9vw, 44px); width: max-content; animation: marquee 56s linear infinite; font-family: var(--label); font-weight: 600; font-size: clamp(16px, 1.25vw, 32px); letter-spacing: .2em; text-transform: uppercase; line-height: 1.2; white-space: nowrap; }
.marquee .track a { color: var(--body); }
.marquee .track a:hover { color: var(--brass-text); }
.marquee .dot { color: var(--brass); }
.marquee:hover .track { animation-play-state: paused; }

/* Prose (guides, privacy policy) */
.prose h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 3vw, 40px); line-height: 1.08; margin: clamp(40px, 4vw, 56px) 0 14px; }
.prose p { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.75; color: #2E3342; margin-bottom: 18px; }
.prose ul { margin: 0 0 18px; padding-left: 22px; }
.prose li { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.7; color: #2E3342; margin-bottom: 8px; }
.prose li::marker { color: var(--brass); }
.prose strong { font-weight: 600; color: var(--ink); }
.prose a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Three-column table; on phones each row stacks into a labeled card. */
.data-table { width: 100%; border-collapse: collapse; margin: 6px 0 24px; font-size: 16px; line-height: 1.5; color: #2E3342; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-top: 1px solid var(--line); }
.data-table thead th { font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); border-top: 0; padding-top: 0; }
.data-table tbody th { font-weight: 600; color: var(--ink); }
@media (max-width: 719px) {
  .data-table thead { display: none; }
  .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table tr { border-top: 1px solid var(--line); padding: 14px 0; }
  .data-table th, .data-table td { border-top: 0; padding: 3px 0; }
  .data-table td::before { content: attr(data-label) ': '; font-weight: 600; color: var(--ink); }
}
.toc { display: none; }
@media (min-width: 1080px) {
  .article { display: grid; grid-template-columns: 240px minmax(0, 760px); column-gap: 80px; justify-content: center; }
  .toc { display: flex; flex-direction: column; position: sticky; top: 120px; align-self: start; border-bottom: 1px solid var(--line); }
  .toc a { font-size: 15px; line-height: 1.4; color: var(--body); padding: 8px 0; border-top: 1px solid var(--line); }
}

/* ── Motion ───────────────────────────────────────────── */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes ruleGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rise { animation: rise .95s var(--ease) both; }
.d1 { animation-delay: .14s; } .d2 { animation-delay: .28s; } .d3 { animation-delay: .42s; }
.drift { animation: drift 22s ease-out infinite alternate; }
.eyebrow.rule::before { content: ''; display: inline-block; width: 28px; height: 1px; background: currentColor; vertical-align: middle; margin: 0 12px 2px 0; transform-origin: left; animation: ruleGrow 1.1s .25s var(--ease) both; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: revealUp linear both; animation-timeline: view(); animation-range: entry 0% entry 32%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .rise, .drift, .eyebrow.rule::before, .faq details[open] p, .marquee .track { animation: none; }
  .btn:hover, .lift:hover { transform: none; }
  .action-bar { transition: none; }
}

/* Alternating media rows: photo first on phones, swapped on desktop. */
@media (min-width: 1080px) { .split.reverse > :first-child { order: 2; } }

/* Review cards */
.review-cols { columns: 1; column-gap: 28px; }
@media (min-width: 1080px) { .review-cols { columns: 2; } }
.review-card { margin: 0 0 clamp(16px, 2vw, 28px); padding: clamp(28px, 3vw, 40px); background: #fff; border: 1px solid rgba(31, 42, 74, .1); break-inside: avoid; }
.review-card blockquote { margin: 18px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 1.9vw, 26px); line-height: 1.38; }
.review-card figcaption { margin-top: 20px; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); }

/* ── Agents: the sample report ─────────────────────────
   The hero and the report are one section: a navy band on top, ivory below,
   and a Safari window holding one still of the report across the seam (the
   band's bottom padding and the window's negative top margin are the same
   --ag-overlap). */
.ag-top { --ag-overlap: clamp(150px, 22vw, 300px); padding-bottom: clamp(56px, 7vw, 104px); }
.ag-band { background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(233, 170, 70, .13), transparent 70%), #2B3244; }
.ag-intro { padding-top: clamp(40px, 5.5vw, 76px); padding-bottom: calc(var(--ag-overlap) + clamp(36px, 4.5vw, 60px)); text-align: center; }
/* Two lines on a laptop, so the report starts on the first screen. */
.ag-intro .h1 { max-width: 1120px; margin-inline: auto; font-size: clamp(40px, 5.2vw, 76px); }
.ag-intro .sub { color: rgba(247, 243, 236, .88); margin: clamp(18px, 1.8vw, 26px) auto 0; max-width: 640px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; }
.ag-intro .btns { justify-content: center; margin-top: clamp(28px, 2.6vw, 38px); }
.ag-show { position: relative; max-width: 1120px; margin: calc(var(--ag-overlap) * -1) auto 0; }
.ag-window { overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(20, 27, 46, .14), 0 32px 80px rgba(20, 27, 46, .3); }
.ag-chrome { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 16px; height: 46px; padding: 0 16px; color: #8B8B91; background: linear-gradient(#F0F0F2, #E5E5E8); border-bottom: 1px solid #D3D3D7; }
.ag-dots { display: flex; gap: 8px; }
.ag-dots i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .14); }
.ag-dots i:nth-child(2) { background: #FEBC2E; }
.ag-dots i:nth-child(3) { background: #28C840; }
.ag-nav { display: flex; gap: 6px; }
.ag-url { justify-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: min(100%, 440px); padding: 6px 14px; overflow: hidden; border-radius: 8px; background: rgba(255, 255, 255, .88); color: #47474D; font: 500 13px/1.2 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif; white-space: nowrap; }
.ag-url span { overflow: hidden; text-overflow: ellipsis; }
.ag-screen { display: block; width: 100%; height: auto; background: #F9F5EE; }
.ag-foot { display: flex; justify-content: center; margin-top: 18px; }
.ag-sample { font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 719px) {
  .ag-chrome { grid-template-columns: auto 1fr; gap: 10px; height: 30px; padding: 0 10px; }
  .ag-nav, .ag-chrome > span:last-child { display: none; }
  .ag-dots { gap: 5px; }
  .ag-dots i { width: 8px; height: 8px; }
  .ag-url { padding: 3px 8px; font-size: 10.5px; border-radius: 6px; }
  .ag-window { border-radius: 8px; }
}

/* Offer cards (agents) */
.offer { background: #fff; border: 1px solid rgba(31, 42, 74, .1); padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 44px); display: flex; flex-direction: column; }
.offer .eyebrow { margin-bottom: 12px; }
.offer-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.offer-price { font-size: clamp(36px, 3.4vw, 48px); color: var(--navy); line-height: 1; }
.offer.bg-navy .offer-price { color: var(--gold-soft); }
.offer-who { font-size: 14px; font-weight: 600; color: var(--muted); margin: 10px 0 14px; }
.offer-body { font-size: 16px; line-height: 1.6; color: var(--muted); margin-bottom: 18px; }
.offer-note { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 22px; }
.offer .btn { margin-top: auto; }
.offer.bg-navy .offer-who, .offer.bg-navy .offer-body, .offer.bg-navy .offer-note { color: rgba(247, 243, 236, .8); }
.offer.bg-navy .check { border-color: rgba(247, 243, 236, .16); color: var(--ivory); }
.offer.bg-navy .checks { border-color: rgba(247, 243, 236, .16); }
.offer.bg-limestone { border-color: transparent; }
@media (min-width: 720px) and (max-width: 1079px) { .offer .btn { align-self: flex-start; } }

/* Property managers: real portal screenshots (assets/portal/) in a plain phone frame. */
.phone { position: relative; padding: 9px; border-radius: 42px; background: #10172A; box-shadow: inset 0 0 0 1px rgba(247, 243, 236, .12), 0 28px 60px rgba(20, 27, 46, .28); }
.phone img { width: 100%; height: auto; border-radius: 33px; background: #F6F3EC; }
.pm-hero { min-height: 0; align-items: center; background: radial-gradient(ellipse 50% 45% at 78% 45%, rgba(233, 170, 70, .13), transparent 70%), #2B3244; }
.pm-hero .wrap { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 96px); }
.pm-hero-grid { display: grid; gap: 44px; align-items: center; }
.pm-hero-shot { margin: 0; justify-self: center; width: min(76vw, 300px); }
.pm-sample { margin-top: 14px; text-align: center; font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(247, 243, 236, .66); }
.pm-rail { grid-auto-columns: 74%; }
.pm-step { margin: 0; display: flex; flex-direction: column; gap: 24px; }
.pm-step .phone { width: 100%; max-width: 280px; margin-top: auto; box-shadow: inset 0 0 0 1px rgba(247, 243, 236, .12), 0 20px 44px rgba(20, 27, 46, .18); }
.pm-step .lbl { font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); line-height: 1.2; margin-bottom: 10px; }
.pm-step .t { font-family: var(--serif); font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1; margin-bottom: 8px; }
.pm-step p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.pm-sample-note { margin-top: clamp(24px, 3vw, 40px); font-size: 13px; color: var(--faint); }
.pm-promise { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-soft); }
.pm-promise svg { flex-shrink: 0; }
@media (min-width: 720px) {
  .pm-hero { min-height: 0; }
  .pm-rail { grid-auto-columns: 42%; }
}
@media (min-width: 1080px) {
  .pm-hero-grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(48px, 6vw, 112px); }
  .pm-hero-shot { width: clamp(270px, 23vw, 330px); margin-right: clamp(0px, 3vw, 48px); }
  .pm-step .phone { max-width: none; }
}

/* Homeowners: the hero phone loops every screen of a visit. The frames are stacked on the
   first one, and site.js fades the next in over the last. Without JS, or with reduced
   motion, the frame marked .on (the time picker) holds still. */
.hw-loop img { display: block; width: 100%; height: auto; border-radius: 33px; background: #F6F3EC; }
.hw-loop img + img { position: absolute; top: 9px; left: 9px; width: calc(100% - 18px); opacity: 0; transition: opacity .32s ease; }
.hw-loop img.on { opacity: 1; }
@media (min-width: 1080px) {
  .rail.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
}

/* ── Booking and quote pages ──────────────────────────── */
.flow-page { min-height: 100vh; display: flex; flex-direction: column; }
.flow-header { border-bottom: 1px solid var(--line); background: var(--ivory); }
.flow-header .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; }
.flow-header .brand span.full { display: none; }
.flow-help { font-size: 15px; white-space: nowrap; }
.flow-help a { font-weight: 600; }
.flow-main { flex: 1 0 auto; }
.flow-main #flow-root { width: 100%; max-width: 800px; margin: 0 auto; padding-inline: 20px; }
.flow-footer { padding: 28px 0 36px; }
.flow-footer .wrap { max-width: 800px; text-align: center; }
@media (min-width: 720px) { .flow-header .brand span.full { display: inline; } .flow-help .small { display: inline; } }
@media (max-width: 719px) { .flow-help .small { display: none; } }
@media (prefers-reduced-motion: no-preference) { .flow-step { animation: rise .6s var(--ease) both; } }

/* ── Corners ─────────────────────────────────────────── */
.ph, .box, .panel, .cta .card, .review-card, .offer { border-radius: var(--r); }
.ph { isolation: isolate; }
.ph::after { border-radius: calc(var(--r) - 6px); }
.hero .ph, .hero .ph::after { border-radius: 0; }
.portrait { border-radius: var(--r); }
.logo-tile, .form-status { border-radius: var(--r-sm); }

/* Offer cards set their own white background, so the navy and limestone variants restate theirs. */
.offer.bg-navy { background: var(--navy); }
.offer.bg-limestone { background: var(--limestone); }

/* ── Instagram row ───────────────────────────────────── */
.ig-nav { display: none; }
@media (min-width: 1080px) {
  .rail.ig-rail { grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 24px) / 4.3); grid-template-columns: none; gap: 24px; overflow-x: auto; }
  .ig-nav.on { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
  .ig-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
  .ig-btn:hover { background: var(--navy); border-color: var(--navy); color: var(--ivory); }
}

/* Card icon animations. Add to assets/site.css. */
/* The draw-in ends as a plain continuous stroke: a leftover dash leaves a notch where a closed shape starts and ends. */
@keyframes yjDraw{99%{stroke-dashoffset:0;stroke-dasharray:1}to{stroke-dashoffset:0;stroke-dasharray:none}}
@keyframes yjIn{to{opacity:1}}
@keyframes yjGlow{0%,100%{opacity:.18}50%{opacity:.55}}
@keyframes yjSeq{0%,10%{fill-opacity:0}20%,70%{fill-opacity:1}85%,100%{fill-opacity:0}}
@keyframes yjCharge{0%{transform:scaleX(0);opacity:1}70%,86%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes yjFlow{to{stroke-dashoffset:-10}}
@keyframes yjFlicker{0%{opacity:0}5%{opacity:1}8%{opacity:.15}11%{opacity:1}14%{opacity:.35}17%,84%{opacity:1}100%{opacity:0}}
@keyframes yjScan{0%,100%{transform:translate(0,0)}25%{transform:translate(-13px,9px)}50%{transform:translate(0,18px)}75%{transform:translate(-13px,27px)}}
@keyframes yjSlide{0%,100%{transform:translateY(10px)}50%{transform:translateY(-10px)}}
/* Without JavaScript nothing starts the icons, so show their lines instead of leaving the tile blank. */
@media (scripting: none) { [data-yj-ico] * { stroke-dashoffset: 0 !important; } [data-yj-ico] [pathLength] { stroke-dasharray: none !important; } }

/* ── Service icons: extra keyframes, page banners, plain call-to-action band ─────── */
@keyframes yjSpin{to{transform:rotate(360deg)}}
@keyframes yjWave{0%,100%{opacity:.12}50%{opacity:.85}}

/* On a page banner the icon is drawn in ivory on the dark ground, with a faint warm glow behind it.
   Wide screens put it at the right of the text; narrower ones centre it above the text. */
.hero .hero-art { align-items: flex-start; justify-content: center; padding-top: 84px; background: radial-gradient(ellipse 70% 40% at 50% 26%, rgba(233, 170, 70, .13), transparent 70%), #2B3244; }
.hero .hero-art::after { display: none; }
.hero .hero-art + .shade { background: linear-gradient(180deg, rgba(20, 27, 46, 0) 50%, rgba(20, 27, 46, .55) 100%); }
.hero-art [data-yj-ico] { width: clamp(132px, 38vw, 220px); height: auto; stroke: #F7F3EC; stroke-width: .95; }
@media (max-width: 1079px) {
  /* Leave room above the text for the icon, whatever the length of the headline. */
  .hero.has-art .wrap { padding-top: calc(84px + clamp(132px, 38vw, 220px) + 36px); }
}
@media (min-width: 1080px) {
  .hero .hero-art { align-items: center; justify-content: flex-end; padding-top: 0; padding-inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter))); background: radial-gradient(ellipse 34% 60% at 76% 46%, rgba(233, 170, 70, .13), transparent 70%), #2B3244; }
  .hero-art [data-yj-ico] { width: clamp(260px, 27vw, 400px); margin-right: clamp(0px, 3vw, 56px); }
  .hero.has-art .inner { max-width: min(1040px, calc(100% - clamp(300px, 34vw, 500px))); }
}



/* ── Instagram grid (Our Work) ───────────────────────── */
.ig-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ig-grid > .ig-fallback { grid-column: 1 / -1; }
@media (min-width: 900px) { .ig-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

/* ── Reviews page: line breaks as posted ── */
.review-card blockquote { white-space: pre-line; }

/* Icon tiles have no inner frame. */
.ph.icon-tile::after { display: none; }


/* ── Steps on a line: the YJ van drives it as the page scrolls ─────────────────
   layout.steps_line() writes the markup and site.js lays out the line and moves the van.
   A row on desktop, a line down the left below 1080px. Without the script the steps are a
   plain list with a ring at each one, and the van stays hidden. */
.drive { position: relative; }
.drive-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.drive-steps > li { position: relative; padding: 0 0 36px 40px; }
.drive-steps > li:last-child { padding-bottom: 0; }
.drive .dot { position: absolute; left: 0; top: 2px; width: 15px; height: 15px; border-radius: 50%; background: var(--ivory); border: 2px solid var(--brass); z-index: 2; transition: background .3s ease; }
.bg-limestone .drive .dot { background: var(--limestone); }
.drive .key .dot { border-color: var(--gold); box-shadow: 0 0 0 5px rgba(233, 170, 70, .2); }
.drive .lbl { font-family: var(--label); font-weight: 600; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); line-height: 1.2; margin-bottom: 10px; }
.drive .t { font-family: var(--serif); font-size: clamp(26px, 2.3vw, 32px); line-height: 1.1; margin-bottom: 10px; }
.drive p { font-size: 16px; line-height: 1.65; color: var(--muted); }
.drive-track { position: absolute; z-index: 1; background: var(--line-strong); }
.drive-trail { position: absolute; left: 0; top: 0; background: var(--brass); }
.drive .van { position: absolute; left: 0; top: 0; width: 58px; height: auto; z-index: 3; pointer-events: none; display: none; will-change: transform; filter: drop-shadow(0 3px 4px rgba(15, 31, 61, .16)); }
.drive.on .van { display: block; }
.drive.on .drive-steps > li { opacity: .5; transition: opacity .35s ease; }
.drive.on .drive-steps > li.reached { opacity: 1; }
.drive.on .reached .dot { background: var(--brass); }
.drive.on .key.reached .dot { background: var(--gold); }
@media (min-width: 1080px) {
  .drive-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
  .drive.c4 .drive-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .drive-steps > li, .drive-steps > li:last-child { padding: 46px 0 0; }
  .drive .dot { top: 0; }
}
@media (prefers-reduced-motion: reduce) { .drive.on .drive-steps > li, .drive .dot { transition: none; } }

/* A wide icon banner goes back to a roomier shape on phones. */
@media (max-width: 719px) {
  .ph.icon-wide { aspect-ratio: 4 / 3 !important; }
  .ph.icon-wide svg { width: 46% !important; }
}

/* Wide wordmarks (Visual Comfort) get more room than the square-ish logos, and a lone last tile spans the row. */
.logo-tile img[src*="visual-comfort"] { max-width: 92%; max-height: 22px; }
.logos .logo-tile.wide { grid-column: 1 / -1; }
@media (min-width: 1080px) { .logos .logo-tile.wide { min-height: 84px; } }
.logo-tile img[src*="brands/ring"] { max-height: 46px; max-width: 54%; }

/* Who we work with: five audiences, three on the first row and two on the second. */
.aud-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) and (max-width: 1079px) { .aud-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aud-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1080px) {
  .aud-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .aud-grid > * { grid-column: span 2; }
  .aud-grid > :nth-child(n+4) { grid-column: span 3; }
}

/* A phone screenshot that has not been taken yet (homeowners page). Drop assets/portal/<name>.webp in to replace it. */
.phone-slot { aspect-ratio: 390 / 844; border-radius: 33px; background: linear-gradient(180deg, #ECE6DA, #E2DACB); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 26px; text-align: center; }
.phone-slot .tag { font-family: var(--label); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass-text); }
.phone-slot .what { font-size: 15px; line-height: 1.5; color: var(--muted); }

/* Home: the YJ standard list, the audience line, and the compact service cards. */
.std-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; margin-top: 18px; }
.std-item { padding: 10px 0; }
.std-item .t { font-family: var(--serif); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.15; margin-bottom: 2px; }
.std-item p { font-size: 14px; line-height: 1.5; color: var(--muted); }
@media (min-width: 720px) { .std-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.aud-line { margin-top: clamp(28px, 3.4vw, 48px); }
.aud-line .t a { color: inherit; }
.aud-line .t a:hover, .aud-line .t a:focus-visible { color: var(--brass-text); }
.aud-line p { font-size: 15px; line-height: 1.5; }
@media (min-width: 1080px) {
  .drive.c5 .drive-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; }
  .drive.c5 .t { font-size: clamp(22px, 1.9vw, 27px); }
}

.svc-mini-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: clamp(24px, 3vw, 40px); }
.svc-mini { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; }
.svc-mini .ph { width: 84px; border-radius: var(--r-sm); }
.svc-mini .h4 { font-size: 21px; line-height: 1.15; }
.svc-mini p { margin-top: 4px; font-size: 14px; line-height: 1.5; }
@media (min-width: 720px) { .svc-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; } }
@media (min-width: 1080px) { .svc-mini-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The home page review banner sits directly above the closing band; a hairline keeps the two navies apart. */
.review + .cta { border-top: 1px solid rgba(247, 243, 236, .14); }


/* A short banner on a plain navy ground, for a page that is waiting on its photo (hero(solid=True)). */
.hero-solid { min-height: 0; background: linear-gradient(180deg, #2B3244 0%, #1F2639 100%); }
.hero-solid .wrap { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(44px, 5vw, 72px); }
@media (min-width: 720px) { .hero.hero-solid { min-height: 0; } }

/* About: the six values, kept short. */
.values { padding-block: clamp(44px, 5vw, 72px); }
.values .h2 { margin-bottom: clamp(22px, 2.6vw, 38px); }
.values .num-cols { row-gap: clamp(22px, 2.4vw, 32px); }
.values .num-cols .col { padding: 0; }
.values .num-cols .t { margin-bottom: 6px; }

/* A banner whose photo has people on the left: the words move to the right and the dark fade follows them (hero(flip=True)). */
@media (min-width: 720px) {
  .hero-flip .inner { margin-left: auto; max-width: min(560px, 46%); }
  .hero-flip .has-photo + .shade { background: linear-gradient(270deg, rgba(20, 27, 46, .88) 0%, rgba(20, 27, 46, .74) 40%, rgba(20, 27, 46, .35) 72%, rgba(20, 27, 46, .05) 100%), linear-gradient(180deg, rgba(20, 27, 46, 0) 55%, rgba(20, 27, 46, .4) 100%); }
}
.hero-flip .has-photo img { object-position: 24% 55%; }
@media (min-width: 720px) { .hero-flip .has-photo img { object-position: 50% 60%; } }
@media (max-width: 719px) {
  /* Phones: the words sit on the navy ground at the top and the crew fills a band along the bottom. */
  .hero.hero-flip { min-height: 760px; align-items: flex-start; background: #1F2639; }
  .hero-flip .wrap { padding-top: 40px; }
  .hero.hero-flip .ph { top: auto; bottom: 0; height: 54%; }
  .hero-flip .has-photo img { object-position: 22% 60%; }
  .hero-flip .has-photo + .shade { background: linear-gradient(180deg, #1F2639 0%, #1F2639 46%, rgba(31, 38, 57, 0) 72%); }
}