/* The Curb Guy, in his own brand: Poppins + Merriweather italic, deep red uppercase headings with a
   dashed rule, navy, blue pill buttons, the red quote bar, photo heroes that end in a white wave, and
   red-gradient photo bands. New on top of it: Trimlight, carried by navy night bands and the
   interactive roofline. (v1's dusk design is kept in notes/v1/.) */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-300.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700.woff2) format('woff2'); }
@font-face { font-family: 'Merriweather'; font-style: italic; font-weight: 700; font-display: swap; src: url(../fonts/merriweather-700i.woff2) format('woff2'); }

:root, [data-theme="brand"] {
  --red: #850914;
  --red-2: #a8101f;
  --navy: #1c1c75;
  --blue: #4650a1;
  --blue-2: #384192;
  --rose: #9e5858;
  --night: #11114a;
  --night-2: #1c1c75;
  --night-3: #2e2e8f;
  --on-night: #ffffff;
  --on-night-2: #cdd0f0;
  --paper: #ffffff;
  --paper-2: #f3f3f3;
  --ink: #2b2b2b;
  --ink-2: #575757;
  --line: #dddddd;
  --curb-l: #c9c6bf;
  --warm: #ffd08a;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --wrap: 1180px;
  --gut: clamp(16px, 4vw, 32px);
  --sec: clamp(56px, 8vw, 104px);
  --hdr: 124px;
  --shadow: 0 8px 24px rgba(17, 17, 74, .14);
}
@media (max-width: 1020px) { :root { --hdr: 84px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: .18em; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.night :focus-visible, .phero :focus-visible, .top :focus-visible, .foot :focus-visible { outline-color: var(--warm); }
h1, h2, h3 { margin: 0; line-height: 1.12; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--warm); color: var(--ink); padding: 8px 14px; z-index: 50; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gut); }
.center { text-align: center; }
.center .h2::after { margin-inline: auto; }

/* ---- type ---------------------------------------------------------------------------------- */
.display {
  font-weight: 700; text-transform: uppercase; color: #fff; line-height: 1.04; letter-spacing: .01em;
  font-size: clamp(2.1rem, 5vw, 4rem);
  text-shadow: 0 0 2px rgba(133, 9, 20, .9), 0 3px 0 var(--red), 0 8px 26px rgba(0, 0, 0, .45);
  text-wrap: balance;
}
.display__big { display: block; font-size: clamp(3.1rem, 10vw, 6.4rem); line-height: .98; }
.display__pre { display: block; font-size: clamp(1.25rem, 2.6vw, 2rem); text-transform: none; line-height: 1.2; margin-bottom: .1em; }
.h2 {
  font-weight: 700; text-transform: uppercase; color: var(--red);
  font-size: clamp(1.7rem, 3.4vw, 2.75rem); line-height: 1.1; text-wrap: balance;
}
.h2::after { content: ""; display: block; width: 74px; margin-top: 16px; border-top: 3px dashed var(--blue); }
.h2--plain::after { display: none; }
.night .h2, .band .h2 { color: #fff; }
.night .h2::after, .band .h2::after { border-top-color: var(--warm); }
.h3 { font-weight: 700; color: var(--navy); font-size: 1.3rem; line-height: 1.25; }
.night .h3, .band .h3 { color: #fff; }
.sub { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--rose); font-size: clamp(1.1rem, 1.8vw, 1.45rem); line-height: 1.4; margin: .9rem 0 0; }
.phero .sub, .night .sub, .band .sub { color: #fff; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; max-width: 42em; }
.measure { max-width: 42em; }
.center .lede, .center .measure { margin-inline: auto; }
.small { font-size: .9rem; }

/* ---- buttons: his blue pills with a white ring ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .72em 1.6em; border-radius: 999px; border: 2px solid #fff;
  font-weight: 600; font-size: 1rem; line-height: 1.1; text-decoration: none; cursor: pointer;
}
.btn--sm { min-height: 40px; padding: .5em 1.15em; font-size: .92rem; }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 0 0 1px rgba(70, 80, 161, .55), 0 6px 16px rgba(17, 17, 74, .3); }
.btn--primary:hover { background: var(--blue-2); color: #fff; }
.btn--line { background: transparent; color: #fff; border-color: #fff; }
.btn--line:hover { background: #fff; color: var(--navy); }
.paper .btn--line, .grey .btn--line { color: var(--blue); border-color: var(--blue); }
.paper .btn--line:hover, .grey .btn--line:hover { background: var(--blue); color: #fff; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.center .btns { justify-content: center; }

/* ---- mock bar ------------------------------------------------------------------------------ */
.mockbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding: 8px var(--gut); background: #000; color: #fff; font-size: .85rem; }
.mockbar p { margin: 0; flex: 1 1 auto; }
.mockbar a { color: #fff; font-weight: 700; }
.mockbar__notes { background: none; border: 1px solid #777; color: #fff; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.mockbar__notes[aria-pressed="true"] { background: #ffd400; color: #000; border-color: #ffd400; }
.note { display: none; }
.show-notes .note {
  display: inline-flex; gap: 6px; align-items: baseline; margin: 4px 6px; padding: 2px 8px;
  background: #ffd400; color: #000; font: 600 .78rem/1.4 var(--sans); text-transform: none; text-shadow: none;
  border-radius: 4px; vertical-align: middle; font-style: normal; letter-spacing: 0;
}
.note__n { color: #000; font-weight: 800; }

/* ---- the red quote bar and the header ------------------------------------------------------- */
.quotebar { background: var(--red); color: #fff; text-align: center; font-weight: 600; font-size: .88rem; letter-spacing: .02em; text-transform: uppercase; padding: 7px var(--gut); position: relative; z-index: 21; }
.quotebar a { color: #fff; text-decoration: none; }
.quotebar .nowrap { white-space: nowrap; }
.quotebar .dot { display: inline-block; vertical-align: middle; margin-right: 8px; }
@media (max-width: 640px) { .quotebar__more { display: none; } }

.top { position: relative; z-index: 20; height: var(--hdr); color: #fff; }
.top__in { height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.top__nav { display: flex; gap: 26px; list-style: none; align-items: center; }
.top__nav--l { justify-content: flex-end; grid-column: 1; grid-row: 1; }
.top__nav--r { grid-column: 3; grid-row: 1; }
.brand { grid-column: 2; grid-row: 1; }
.top__nav a { color: #fff; text-decoration: none; text-transform: uppercase; font-weight: 600; font-size: .9rem; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0, 0, 0, .55); padding: 6px 0; }
.top__nav a:hover, .top__nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.brand { display: block; text-decoration: none; }
.brand__logo { width: 104px; height: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .4)); }
.top__dealer { display: none; }
.menu-btn { display: none; background: rgba(17, 17, 74, .35); color: #fff; border: 2px solid #fff; border-radius: 999px; padding: 8px 18px; font-weight: 600; cursor: pointer; }
.menu { display: contents; }
@media (max-width: 1020px) {
  .top__in { grid-template-columns: auto 1fr auto; gap: 14px; }
  .brand { grid-column: 1; }
  .top__dealer { grid-column: 2; grid-row: 1; }
  .menu-btn { grid-column: 3; grid-row: 1; }
  .brand__logo { width: 64px; }
  .top__dealer { display: flex; order: 2; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--warm); text-shadow: 0 1px 6px rgba(0, 0, 0, .7); line-height: 1.2; }
  .menu-btn { display: block; order: 3; }
  .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--night); padding: 6px var(--gut) 20px; box-shadow: 0 16px 30px rgba(0, 0, 0, .35); }
  .menu.is-open { display: block; }
  .top__nav { flex-direction: column; align-items: stretch; gap: 0; }
  .top__nav a { display: block; padding: 13px 0; font-size: 1rem; border-bottom: 1px solid var(--night-3); text-shadow: none; }
  .top__nav a:hover, .top__nav a[aria-current="page"] { box-shadow: none; color: var(--warm); }
}

.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--warm); flex: none;
  box-shadow: 0 0 0 3px rgba(255, 208, 138, .2), 0 0 10px 2px rgba(255, 208, 138, .6);
}

/* ---- heroes: a photo (or the night sky) with his white wave at the bottom --------------------- */
.phero { position: relative; margin-top: calc(var(--hdr) * -1); padding: calc(var(--hdr) + clamp(24px, 4vw, 56px)) 0 clamp(90px, 11vw, 150px); color: #fff; overflow: hidden; isolation: isolate; }
.phero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.phero__shade { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at 100% 100%, rgba(133, 9, 20, .85), rgba(133, 9, 20, 0) 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .38) 45%, rgba(40, 6, 14, .55) 100%); }
.phero--night { background: radial-gradient(ellipse at 50% 115%, #2b2b8f 0%, #15155a 45%, #0b0b33 100%); }
.phero--night .phero__shade { background: radial-gradient(ellipse at 100% 100%, rgba(133, 9, 20, .5), rgba(133, 9, 20, 0) 55%); }
.phero__in { position: relative; }
.phero .lede { color: rgba(255, 255, 255, .92); }
.phero__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.phero__aside .btns { margin-top: 1.2rem; }
@media (max-width: 900px) { .phero__head { grid-template-columns: 1fr; } }
.phero .rl { margin-top: clamp(14px, 2.5vw, 30px); }
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(50px, 8vw, 120px); display: block; }
.crumbs { font-size: .88rem; margin-bottom: 1rem; color: rgba(255, 255, 255, .85); }
.crumbs a { color: inherit; }
.badge {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 1.1rem;
  padding: 7px 16px 7px 13px; border-radius: 999px; background: rgba(17, 17, 74, .55); border: 1px solid rgba(255, 208, 138, .6);
  font-weight: 600; font-size: .92rem; color: var(--warm);
}

/* ---- sections ------------------------------------------------------------------------------ */
.section { padding-block: var(--sec); }
.section--tight { padding-block: calc(var(--sec) * .55); }
.paper { background: var(--paper); }
.grey { background: var(--paper-2); }
.night { background: linear-gradient(100deg, #0e0e40 0%, var(--night-2) 60%, #3b0b37 100%); color: #fff; }
.night a:not(.btn) { color: var(--warm); }
.head { max-width: 50rem; margin-bottom: clamp(28px, 4vw, 48px); }
.head.center { margin-inline: auto; }
.head > p:not(.sub) { color: var(--ink-2); margin-top: .9rem; }
.night .head > p:not(.sub) { color: var(--on-night-2); }

/* photo band with his red gradient */
.band { position: relative; color: #fff; isolation: isolate; overflow: hidden; }
.band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .45) 45%, rgba(133, 9, 20, .9) 100%); }

/* ---- the roofline demo ----------------------------------------------------------------------- */
.rl { margin: 0; }
.rl__svg { width: 100%; height: auto; display: block; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; }
.rl__svg .b__core { fill: var(--c, #ffd08a); }
.rl__svg .b__halo { fill: var(--c, #ffd08a); opacity: .3; }
.rl__svg .b.is-dim .b__core { opacity: .35; }
.rl__svg .b.is-dim .b__halo { opacity: .06; }
.rl__svg .b.is-hot .b__halo { opacity: .55; }
.rl__caption { color: var(--on-night-2); font-size: .85rem; margin: 10px 0 0; text-align: center; }
.rl__controls { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 36px; align-items: start; }
@media (max-width: 900px) { .rl__controls { grid-template-columns: 1fr; } }
.rl__label { font-size: .9rem; font-weight: 600; color: var(--on-night-2); margin: 0 0 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 15px 6px 11px;
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px;
  font-weight: 600; font-size: .9rem; cursor: pointer;
}
.chip:hover { border-color: #fff; }
.chip[aria-pressed="true"] { background: #fff; color: var(--navy); border-color: #fff; }
.chip__dots { display: inline-flex; gap: 3px; }
.chip__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c); }
.brush { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); background: var(--c); cursor: pointer; box-shadow: 0 0 10px -2px var(--c); }
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--night), 0 0 0 5px #fff, 0 0 14px var(--c); }
.brush__count { font-size: .86rem; color: var(--on-night-2); margin-left: 6px; }
@media (max-width: 600px) {
  .phero .rl__svg { width: 118%; margin-left: -9%; max-width: none; }
  .swatch { width: 30px; height: 30px; }
  .brush { gap: 7px; }
}
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.month {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 10px 12px 12px;
  background: rgba(255, 255, 255, .07); color: #fff; border: 1px solid rgba(255, 255, 255, .22); border-radius: 10px; cursor: pointer;
}
.month:hover { border-color: #fff; }
.month[aria-pressed="true"] { border-color: var(--warm); box-shadow: 0 0 0 1px var(--warm) inset; }
.month b { font-weight: 700; font-size: .95rem; }
.month span { font-size: .8rem; color: var(--on-night-2); line-height: 1.25; }
.month__bulbs { display: flex; justify-content: space-between; width: 100%; padding-top: 6px; margin-top: 6px; border-top: 3px solid #4a4a9a; }
.month__bulbs i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 7px 1px var(--c); margin-top: -8px; }
@media (max-width: 760px) { .months { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 380px) { .months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- his cards (Transform your yard), here for Trimlight ------------------------------------- */
.cards { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { background: #fff; border-radius: 6px; box-shadow: var(--shadow); padding: 0 0 22px; text-align: center; overflow: hidden; }
.card__strip { height: 74px; background: linear-gradient(180deg, #0e0e40, var(--night-2)); position: relative; margin-bottom: 18px; }
.card__strip::before { content: ""; position: absolute; left: 14px; right: 14px; top: 30px; height: 5px; border-radius: 3px; background: #4a4a9a; }
.card__strip span { position: absolute; left: 14px; right: 14px; top: 26px; display: flex; justify-content: space-between; }
.card__strip i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 12px 3px var(--c); }
.card .h3 { padding: 0 16px; margin-bottom: .45rem; }
.card p { padding: 0 18px; margin: 0; color: var(--ink-2); font-size: .98rem; }
.card figure { margin: 0 0 16px; }
.card figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 960px) { .cards, .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cards, .cards--3 { grid-template-columns: 1fr; } }

/* reasons on a night band */
.rows { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.rows li { border-top: 3px dashed rgba(255, 208, 138, .6); padding-top: 18px; }
.rows h3 { margin-bottom: .5rem; }
.rows p { margin: 0; color: var(--on-night-2); }
.paper .rows li, .grey .rows li { border-top-color: var(--blue); }
.paper .rows p, .grey .rows p { color: var(--ink-2); }
@media (max-width: 860px) { .rows { grid-template-columns: 1fr; } }

.videoslot { margin-top: clamp(28px, 4vw, 48px); border: 2px dashed #ffd400; border-radius: 12px; padding: 20px; color: #ffd400; font-weight: 600; font-size: .95rem; }
.paper .videoslot, .grey .videoslot { color: #8a6d00; border-color: #d4a800; }

/* ---- alternating photo rows (his Ground Preparation layout) ----------------------------------- */
.alt { display: grid; gap: clamp(36px, 6vw, 72px); }
.alt__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.alt__row:nth-child(even) .alt__fig { order: 2; }
.alt__fig { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); }
.alt__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.alt__row .h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); text-transform: none; }
@media (max-width: 760px) { .alt__row { grid-template-columns: 1fr; } .alt__row:nth-child(even) .alt__fig { order: 0; } }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--wide { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) { .split, .split--wide { grid-template-columns: 1fr; } }
.mosaic { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }
.mosaic figure { margin: 0; overflow: hidden; border-radius: 12px; box-shadow: var(--shadow); }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic figure:first-child { grid-row: span 2; }
.mosaic figure:not(:first-child) img { aspect-ratio: 4 / 3; }

/* ---- what makes landscape curbing great + the Schedule Now card ------------------------------ */
.great__band { padding: clamp(56px, 7vw, 96px) 0 clamp(120px, 14vw, 180px); }
.great__band .h2 { max-width: 14em; font-size: clamp(1.8rem, 3.8vw, 3rem); }
.great__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 64px); align-items: start; }
.great__list { list-style: none; display: grid; gap: 12px; padding-top: clamp(28px, 4vw, 48px); }
.great__list li { position: relative; padding-left: 38px; font-weight: 700; font-size: 1.08rem; color: var(--ink); }
.great__list li::before { content: ""; position: absolute; left: 0; top: .1em; width: 24px; height: 24px; border-radius: 50%; background: var(--red); }
.great__list li::after { content: ""; position: absolute; left: 7px; top: .48em; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.schedule { position: relative; margin-top: calc(clamp(120px, 14vw, 180px) * -1 + 20px); background: #fff; border-top: 5px solid var(--navy); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); padding: clamp(24px, 4vw, 40px); text-align: center; overflow: hidden; isolation: isolate; }
.schedule__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.schedule::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .88); }
.schedule .h2::after { margin-inline: auto; }
.schedule p { color: var(--ink); margin-top: 1rem; }
@media (max-width: 860px) { .great__body { grid-template-columns: 1fr; } .schedule { margin-top: 0; } .great__band { padding-bottom: clamp(56px, 7vw, 96px); } }

/* ---- Google reviews: his carousel over a darkened photo -------------------------------------- */
.reviews { position: relative; isolation: isolate; overflow: hidden; border-radius: 6px; box-shadow: var(--shadow); }
.reviews__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.reviews::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .62); }
.reviews__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.reviews__track::-webkit-scrollbar { display: none; }
.reviews blockquote { flex: 0 0 100%; scroll-snap-align: center; margin: 0; padding: clamp(36px, 5vw, 60px) clamp(52px, 9vw, 120px) clamp(48px, 6vw, 64px); color: #fff; text-align: center; }
.reviews blockquote p { margin: 0 auto 1rem; max-width: 46rem; font-size: clamp(.98rem, 1.4vw, 1.08rem); }
.reviews footer { font-weight: 700; }
.reviews .stars { color: #ffcf4a; letter-spacing: 3px; display: block; margin-bottom: 10px; }
.reviews__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .15); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.reviews__nav:hover { background: rgba(255, 255, 255, .3); }
.reviews__nav { z-index: 1; }
.reviews__nav--prev { left: 10px; }
.reviews__nav--next { right: 10px; }
.reviews__count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, .8); font-size: .85rem; margin: 0; pointer-events: none; }
@media (max-width: 560px) { .reviews blockquote { padding-inline: 22px; } .reviews__nav { top: auto; bottom: 6px; transform: none; } }
.pull { margin: 0; text-align: center; }
.pull p { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--navy); font-size: clamp(1.3rem, 2.6vw, 1.9rem); line-height: 1.4; max-width: 34em; margin: 0 auto .6rem; }
.pull footer { color: var(--ink-2); font-weight: 600; }

/* ---- The Curb Guy, AKA Marcus Reimer --------------------------------------------------------- */
.marcus { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.marcus__aka { font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--navy); font-size: 1.3rem; margin: .5rem 0 1.2rem; }
.marcus__aka::after { content: ""; display: block; width: 74px; margin-top: 14px; border-top: 3px dashed var(--blue); }
.marcus__ring { margin: 0 auto; text-align: center; }
.marcus__ring img { width: min(380px, 100%); margin: 0 auto 18px; border-radius: 50%; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25)); }
.callbadge { display: inline-block; margin-top: 10px; }
.callbadge img { width: min(330px, 100%); }
@media (max-width: 860px) { .marcus { grid-template-columns: 1fr; } }

/* ---- View county: his red-bordered panel of pills -------------------------------------------- */
.counties { position: relative; border: 4px solid var(--red); box-shadow: 0 16px 36px rgba(0, 0, 0, .18); padding: clamp(24px, 4vw, 44px); text-align: center; isolation: isolate; overflow: hidden; }
.counties__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.counties::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, .86); }
.counties .h2 { color: #111; }
.counties .h2::after { margin-inline: auto; }
.counties__pin { width: 30px; height: 30px; margin: 0 auto 8px; color: var(--navy); }
.counties__list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.counties__list a {
  display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 999px;
  background: var(--blue); color: #fff; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(70, 80, 161, .5), 0 4px 12px rgba(17, 17, 74, .25);
  text-decoration: none; font-weight: 600; font-size: .9rem;
}
.counties__list a:hover { background: var(--blue-2); color: #fff; }
.counties__list a[aria-current="page"] { background: #fff; color: var(--red); box-shadow: 0 0 0 2px var(--red); }
.counties__note { margin: 22px auto 0; max-width: 40rem; font-size: .95rem; color: var(--ink); }
@media (max-width: 860px) { .counties__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* checks (his red check circles) */
.checks { list-style: none; display: grid; gap: 12px; margin: 1.4rem 0; }
.checks li { position: relative; padding-left: 38px; font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 0; top: .05em; width: 24px; height: 24px; border-radius: 50%; background: var(--red); }
.checks li::after { content: ""; position: absolute; left: 7px; top: .43em; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .checks--2 { grid-template-columns: 1fr; } }
.framed { margin: 0; border: 5px solid var(--navy); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.framed img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* ---- Trimlight details ----------------------------------------------------------------------- */
.panel-night { background: linear-gradient(160deg, #0e0e40, var(--night-2)); border-radius: 16px; padding: clamp(16px, 3vw, 28px); box-shadow: var(--shadow); }
.section-draw { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.section-draw svg { width: 100%; height: auto; display: block; }
.key { list-style: none; display: grid; gap: 18px; }
.key li { display: grid; grid-template-columns: 38px 1fr; gap: 12px; }
.key b.k { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: var(--warm); font-weight: 700; }
.key h3 { font-size: 1.1rem; color: var(--navy); margin: 3px 0 4px; }
.key p { margin: 0; color: var(--ink-2); font-size: .98rem; }
@media (max-width: 900px) { .section-draw { grid-template-columns: 1fr; } }
.warranty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.warranty > div { background: #fff; border-top: 5px solid var(--red); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px); text-align: center; }
.warranty b { display: block; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; text-transform: uppercase; color: var(--red); line-height: 1; margin-bottom: .6rem; }
.warranty p { margin: 0; color: var(--ink-2); }
@media (max-width: 640px) { .warranty { grid-template-columns: 1fr; } }
.steps { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.steps li { counter-increment: s; text-align: center; }
.steps li::before { content: counter(s); display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%; background: var(--blue); color: #fff; font-weight: 700; font-size: 1.15rem; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--blue), 0 6px 14px rgba(17, 17, 74, .25); }
.steps h3 { margin-bottom: .4rem; }
.steps p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }
.faq { max-width: 50rem; margin-inline: auto; }
.faq details { border-bottom: 2px dashed #c8c8c8; }
.faq summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; color: var(--navy); font-size: 1.06rem; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 12px; font-size: 1.6rem; font-weight: 400; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); margin: 0 0 18px; }

/* curb styles */
.styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.styles > div { background: #fff; box-shadow: var(--shadow); border-radius: 6px; padding: clamp(20px, 3vw, 30px); }
.styles h3 { margin-bottom: .4rem; }
.stamps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.stamps li { padding: 5px 12px; border: 1px solid var(--blue); border-radius: 999px; color: var(--blue); font-weight: 600; font-size: .88rem; }
@media (max-width: 760px) { .styles { grid-template-columns: 1fr; } }

/* photo strips + gallery */
.strip { list-style: none; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.strip a, .gal a { display: block; overflow: hidden; border-radius: 10px; background: var(--paper-2); box-shadow: 0 4px 14px rgba(17, 17, 74, .12); }
.strip img, .gal img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .3s; }
.strip a:hover img, .gal a:hover img { transform: scale(1.03); }
@media (max-width: 760px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gal { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 220px), 1fr)); gap: 12px; }
.gal-group + .gal-group { margin-top: clamp(40px, 6vw, 72px); }
.gal-group__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.gal-group__count { color: var(--ink-2); font-size: .95rem; }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 36px; }
.jump a { display: inline-block; padding: 8px 16px; border: 2px solid var(--blue); border-radius: 999px; text-decoration: none; color: var(--blue); font-weight: 600; }
.jump a:hover { background: var(--blue); color: #fff; }
.lb { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; }
.lb::backdrop { background: rgba(8, 8, 30, .92); }
.lb img { max-height: 84vh; width: auto; margin: 0 auto; border-radius: 4px; }
.lb p { color: #fff; text-align: center; margin: 10px 0 0; }
.lb__close { position: fixed; top: 14px; right: 14px; background: #fff; color: var(--ink); border: 0; border-radius: 999px; padding: 8px 16px; font-weight: 700; cursor: pointer; }

.prose { max-width: 44em; }
.prose h2 { margin: 2rem 0 .7rem; }
.prose ul { padding-left: 1.2em; margin-bottom: 1em; }

/* ---- quote form ---------------------------------------------------------------------------- */
.quote { background: var(--paper-2); padding-block: var(--sec); }
.quote__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.quote__direct { list-style: none; margin-top: 1.6rem; display: grid; gap: 4px; }
.quote__direct a { display: flex; gap: 14px; padding: 11px 0; color: var(--navy); text-decoration: none; font-weight: 700; font-size: 1.1rem; border-bottom: 2px dashed #c8c8c8; }
.quote__direct a:hover { color: var(--red); }
.quote__direct span { width: 4.2em; color: var(--ink-2); font-weight: 400; }
@media (max-width: 900px) { .quote__in { grid-template-columns: 1fr; } }
.form { display: grid; gap: 16px; background: #fff; border-top: 5px solid var(--navy); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 34px); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.form__want { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.form__want legend { font-weight: 700; color: var(--navy); margin-bottom: 10px; padding: 0; }
.pick input { position: absolute; opacity: 0; }
.pick span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--blue); color: var(--blue); cursor: pointer; font-weight: 600; }
.pick input:checked + span { background: var(--blue); color: #fff; }
.pick input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.field { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; color: var(--navy); }
.field em { font-weight: 400; color: var(--ink-2); font-style: normal; }
.field input, .field textarea { font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid #c4c4c4; border-radius: 8px; padding: 11px 12px; min-height: 48px; width: 100%; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(70, 80, 161, .25); }
.field input[aria-invalid="true"] { border-color: var(--red); }
.form__error { margin: 0; color: var(--red); font-weight: 600; }
.form__sent { margin: 0; color: var(--navy); font-weight: 600; }
.form__fine { margin: 0; font-size: .86rem; color: var(--ink-2); }
.form .btn { justify-self: start; }

/* review page */
.confirm { list-style: none; display: grid; gap: 14px; max-width: 54rem; }
.confirm li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.confirm__n { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 700; align-self: start; }
.confirm p { margin: 0; }
.confirm__body { min-width: 0; }
.confirm li.has-answer .confirm__n { background: var(--red); }
.confirm .is-done { color: var(--ink-2); }
.confirm__done { color: #1d6b2f; }
/* answers go to HQ (assets/js/review.js); mock only */
.answer-who { display: flex; flex-wrap: wrap; align-items: end; gap: 4px 28px; max-width: 54rem; margin: 0 0 22px; padding: 18px 20px 4px; background: #fff; border-top: 5px solid var(--navy); box-shadow: var(--shadow); }
.answer-who .field { flex: 1 1 260px; margin-bottom: 18px; }
.answer-who .field input { font: inherit; font-weight: 400; color: var(--ink); border: 1px solid #c4c4c4; border-radius: 8px; padding: 11px 12px; min-height: 48px; width: 100%; }
.answer-who .field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(70, 80, 161, .25); }
.answer-who .field input[aria-invalid="true"] { border-color: var(--red); }
.answer-who__status { flex: 1 1 260px; margin: 0 0 18px !important; font-weight: 600; color: var(--navy); }
.answer { margin-top: 12px; }
.answer textarea { width: 100%; font: 400 1rem/1.5 var(--sans); color: var(--ink); border: 1px solid #c4c4c4; border-radius: 8px; padding: 10px 12px; background: #fff; resize: vertical; }
.answer textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(70, 80, 161, .25); }
.answer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 8px; }
.answer__msg { font-size: .92rem; color: var(--ink-2); }
.reply { margin-top: 12px; padding: 10px 14px; background: var(--paper-2); border-left: 4px solid var(--blue); border-radius: 0 6px 6px 0; }
.reply p { margin: 0; }
.reply__head { font-size: .88rem; color: var(--ink-2); }
.reply__head strong { color: var(--navy); }
.reply__status { display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 999px; font-size: .76rem; font-weight: 600; color: #fff; background: var(--blue); }
.reply__status--done, .reply__status--answered { background: #1d6b2f; }
.reply__text { margin-top: 4px !important; white-space: pre-wrap; }
.reply__ours { margin-top: 8px !important; padding-top: 8px; border-top: 1px dashed #c8c8c8; }
@media (max-width: 560px) { .confirm li { grid-template-columns: 1fr; gap: 8px; } }

/* ---- footer: wave, photo, red gradient, his centred mascot ----------------------------------- */
.foot { position: relative; color: #fff; isolation: isolate; overflow: hidden; padding-top: clamp(90px, 11vw, 150px); }
.foot__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.foot::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .55) 50%, rgba(133, 9, 20, .85) 100%); }
.foot__wave { position: absolute; top: -1px; left: 0; width: 100%; height: clamp(50px, 8vw, 110px); }
.foot a { color: #fff; text-decoration: none; }
.foot a:hover { color: var(--warm); }
.foot__in { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr 1fr; gap: 32px; align-items: start; }
.foot__brand { text-align: center; }
.foot__brand img { width: 150px; margin: 0 auto; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.foot__brand .sub { font-size: 1.15rem; margin-top: .6rem; color: #fff; }
.foot__dealer { display: inline-flex; align-items: center; gap: 9px; color: var(--warm); font-weight: 600; font-size: .92rem; margin-top: .6rem; }
.foot__h { font-weight: 700; text-transform: uppercase; font-size: 1.2rem; margin-bottom: 12px; padding: 6px 0; border-top: 2px dashed rgba(255, 255, 255, .6); border-bottom: 2px dashed rgba(255, 255, 255, .6); display: inline-block; }
.foot__list { list-style: none; display: grid; gap: 7px; font-weight: 600; }
.foot__list--cols { grid-template-columns: 1fr 1fr; gap: 7px 18px; font-weight: 400; }
.foot__cta { display: grid; gap: 12px; justify-items: center; }
.foot__cta .btn { min-width: 190px; }
.foot__social { display: flex; gap: 14px; margin-top: 6px; }
.foot__social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--navy); }
.foot__social a:hover { background: var(--warm); color: var(--navy); }
.foot__social svg { width: 22px; height: 22px; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 26px 30px; margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .25); font-size: .86rem; }
.foot__base p { margin: 0; }
.foot__base a { margin-right: 16px; }
@media (max-width: 900px) { .foot__in { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .foot__in { grid-template-columns: 1fr; text-align: center; } .foot__list--cols { justify-items: center; } .foot__h { margin-inline: auto; } }

.actionbar { display: none; }
@media (max-width: 760px) {
  body { padding-bottom: 66px; }
  .actionbar { display: grid; grid-template-columns: 1fr 1fr 1.4fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--red); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 8px; box-shadow: 0 -6px 18px rgba(0, 0, 0, .2); }
  .actionbar a { display: grid; place-items: center; min-height: 46px; border-radius: 999px; text-decoration: none; color: #fff; border: 2px solid rgba(255, 255, 255, .8); font-weight: 600; }
  .actionbar .actionbar__quote { background: var(--blue); border-color: #fff; }
  /* preview copy only: leave the right end of the bar for HQ's Feedback button (fixed, bottom right) */
  .is-mock .actionbar { padding-right: 122px; gap: 6px; }
  .is-mock .actionbar a { white-space: nowrap; font-size: .92rem; }
}

/* home hero: title, tagline + buttons, then the lit house; on phones the house moves up under the title */
.phero__stack { display: flex; flex-direction: column; }
.phero__stack .phero__title { order: 1; }
.phero__stack .phero__aside { order: 2; }
.phero__stack .rl { order: 3; }
.phero__stack .rl__controls, .phero__stack .rl__caption { text-align: left; }
.phero__stack .rl__caption { text-align: center; }
@media (max-width: 760px) {
  .phero__stack .rl { order: 2; margin-top: 8px; }
  .phero__stack .phero__aside { order: 3; margin-top: 10px; }
  .phero__stack .phero__aside .btns { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .strip img, .gal img { transition: none; }
}