/* Lumen demo template v2. Hand written CSS, no framework, no build step.
   Every colour, size and space comes from styles/tokens.css. Built after the Alvera Digital trade sites:
   full bleed job photo hero, logo forward header, condensed display type, quote card in the brand colour. */

@font-face { font-family: "Oswald"; src: url("../assets/fonts/oswald-var.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../assets/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--c-surface); color: var(--c-body); font-family: var(--font-body); font-size: var(--fs-3); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--c-ink); text-wrap: balance; }
:target { scroll-margin-top: var(--header-h); }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nw { white-space: nowrap; }
img.is-collage { object-fit: contain; }
.skip-link { position: absolute; left: var(--sp-4); top: calc(var(--sp-4) * -6); z-index: 100; background: var(--c-ink); color: var(--c-on-dark); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-2); font-weight: var(--fw-bold); text-decoration: none; }
.skip-link:focus { top: var(--sp-4); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px; padding: var(--sp-3) var(--sp-5); border: 2px solid transparent; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-3); font-weight: var(--fw-display); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.btn svg { width: 1.1rem; height: 1.1rem; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn--accent { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-sm); }
.btn--accent:hover { background: var(--c-accent-dk); border-color: var(--c-accent-dk); }
.btn--ghost { border-color: var(--c-on-dark-line); color: var(--c-on-dark); background: var(--c-glass); }
.btn--ghost:hover { border-color: var(--c-on-dark); }
.btn--ink { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.btn--light { background: var(--c-surface); border-color: var(--c-surface); color: var(--c-ink); }
.btn--block { width: 100%; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-ink); color: var(--c-on-dark); border-bottom: 1px solid var(--c-on-dark-line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: 44px; text-decoration: none; color: inherit; min-width: 0; }
.brand__logo { height: var(--logo-h); width: auto; max-width: 15rem; object-fit: contain; }
.brand__logo.is-boxed { border-radius: var(--radius-sm); }
.brand__badge { display: grid; place-items: center; flex: none; width: var(--badge); height: var(--badge); border-radius: var(--radius); background: var(--c-accent); color: var(--c-on-accent); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4); line-height: 1; }
.brand__mark { flex: none; height: var(--logo-h); width: auto; max-width: calc(var(--logo-h) * 1.4); object-fit: contain; }
@media (min-width: 64rem) { .brand__mark { height: var(--logo-h-lg); max-width: calc(var(--logo-h-lg) * 1.4); } }
.brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; }
/* the clamp hides overflow, so the line box must hold Oswald's descenders (g, y, p sit .2em below the baseline) */
.brand__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; padding-bottom: .08em; line-height: 1.3; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4); letter-spacing: var(--ls-display); text-wrap: balance; }
.brand__sub { font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; opacity: .78; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: none; align-items: center; gap: var(--sp-5); }
.nav a { font-size: var(--fs-2); font-weight: var(--fw-bold); text-decoration: none; color: inherit; opacity: .9; padding-block: var(--sp-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { opacity: 1; border-bottom-color: var(--c-accent-lt); }
.header-cta { display: flex; align-items: center; gap: var(--sp-3); }
.pill-phone { display: none; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); border: 1.5px solid var(--c-on-dark-line); border-radius: 999px; font-weight: var(--fw-bold); font-size: var(--fs-2); text-decoration: none; color: inherit; white-space: nowrap; }
.pill-phone svg { width: 1rem; height: 1rem; }
.header-cta .btn { display: none; }
.nav-toggle { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--c-on-dark-line); border-radius: var(--radius-sm); background: transparent; color: inherit; cursor: pointer; }
.nav-toggle svg { width: 1.25rem; height: 1.25rem; }
.mobile-nav { display: none; border-top: 1px solid var(--c-on-dark-line); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav nav { display: flex; flex-direction: column; padding-block: var(--sp-3); }
.mobile-nav a:not(.btn) { padding: var(--sp-3) var(--sp-2); font-weight: var(--fw-bold); text-decoration: none; color: inherit; }
.mobile-nav .btn { margin-top: var(--sp-3); }
.site-header--light { background: var(--c-surface); color: var(--c-ink); border-bottom-color: var(--c-line); }
.site-header--light .pill-phone, .site-header--light .nav-toggle { border-color: var(--c-line); }
.site-header--light .nav a:hover { border-bottom-color: var(--c-accent); }
.site-header--light .mobile-nav { border-top-color: var(--c-line); }
/* on phones the hero eyebrow right below says the same, and a long sub line would be cut off */
.site-header .brand__sub { display: none; }
@media (min-width: 40rem) { .pill-phone { display: inline-flex; } .site-header .brand__sub { display: block; } }
@media (min-width: 64rem) { .brand__logo { height: var(--logo-h-lg); max-width: 17rem; } }
@media (min-width: 64rem) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
  .header-cta .btn { display: inline-flex; }
}
/* from 64rem the menu takes the room: the phone pill and the line under the name come back at 80rem */
@media (min-width: 64rem) and (max-width: 79.99rem) { .pill-phone, .site-header .brand__sub { display: none; } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; background: var(--c-ink); color: var(--c-on-dark); }
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero-sm); }
.hero--plain { background: var(--hero-plain); }
.hero__grid { display: grid; gap: var(--sp-7); padding-block: var(--sp-8) var(--sp-9); align-items: center; }
.pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-5); padding: 0; list-style: none; }
.pills li { padding: var(--sp-2) var(--sp-3); border-radius: 999px; background: var(--c-glass-strong); border: 1px solid var(--c-on-dark-line); font-size: var(--fs-1); font-weight: var(--fw-bold); color: var(--c-on-dark); }
.eyebrow { display: inline-block; font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent-ink); }
.hero .eyebrow { color: var(--c-accent-lt); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hero h1 { margin-top: var(--sp-4); max-width: 18ch; font-size: var(--fs-6); color: var(--c-on-dark-strong); }
.hero h1 em { font-style: normal; color: var(--c-accent-lt); }
.hero__sub { margin-top: var(--sp-5); max-width: 52ch; font-size: var(--fs-3); color: var(--c-on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.proof { margin: var(--sp-6) 0 0; max-width: 46ch; padding: var(--sp-4) var(--sp-5); border-left: 3px solid var(--c-accent-lt); background: var(--c-glass); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.proof .stars { color: var(--c-star); letter-spacing: .12em; font-size: var(--fs-2); }
.proof p { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--c-on-dark-strong); }
.proof footer { margin-top: var(--sp-2); font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-on-dark); }
@media (min-width: 64rem) {
  .hero__scrim { background: var(--scrim-hero); }
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); padding-block: var(--sp-9) var(--sp-10); }
}

/* ---------- quote card ---------- */
.quote-card { background: var(--c-accent); color: var(--c-on-accent); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-lg); }
.quote-card__logo { display: block; margin: 0 auto var(--sp-5); max-height: 6rem; width: auto; max-width: 80%; object-fit: contain; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); background: var(--c-ink); }
.quote-card__logo.is-boxed { padding: 0; }
.quote-card h2 { color: var(--c-on-accent); text-align: center; text-transform: uppercase; font-size: var(--fs-5); letter-spacing: var(--ls-caps); }
.quote-card .form { margin-top: var(--sp-5); }
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
.field-label { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-2); font-weight: var(--fw-bold); }
.field { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-ink); font: inherit; font-size: var(--fs-2); }
.field::placeholder { color: var(--c-muted); }
.field:focus { outline: none; border-color: var(--c-ink); box-shadow: 0 0 0 3px var(--c-focus); }
textarea.field { min-height: 6.5rem; resize: vertical; }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-1); line-height: 1.5; }
.consent input { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .1rem; accent-color: var(--c-ink); }
.form__note { font-size: var(--fs-1); text-align: center; }
.form__note a { font-weight: var(--fw-bold); }
.form__status { display: none; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); font-size: var(--fs-2); background: var(--c-surface); color: var(--c-ink); }
.form__status[data-state] { display: block; }
.form__status a { color: inherit; font-weight: var(--fw-bold); }
.quote-card .btn--light { font-size: var(--fs-4); min-height: 56px; }
.card-form { background: var(--c-surface); border: 1px solid var(--c-line); border-top: 4px solid var(--c-accent); border-radius: var(--radius-lg); padding: var(--sp-6); box-shadow: var(--shadow-md); }
.card-form h3 { font-size: var(--fs-4); text-transform: uppercase; letter-spacing: var(--ls-caps); }
.card-form > p { margin-top: var(--sp-2); font-size: var(--fs-2); }
.card-form .form { margin-top: var(--sp-5); }
.card-form .field-label, .card-form .consent { color: var(--c-ink); }
.card-form .form__status { background: var(--c-paper); border-left: 4px solid var(--c-accent); }

/* ---------- highlights band ---------- */
.band { background: var(--c-ink); color: var(--c-on-dark); }
.band .wrap { display: grid; gap: var(--sp-5); padding-block: var(--sp-7); }
.hl { display: flex; gap: var(--sp-4); align-items: flex-start; }
.hl__icon { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); }
.hl__icon svg { width: 1.35rem; height: 1.35rem; }
.hl h3 { color: var(--c-on-dark-strong); font-size: var(--fs-4); }
.hl p { margin-top: var(--sp-1); font-size: var(--fs-2); color: var(--c-on-dark); }
@media (min-width: 40rem) { .band .wrap { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .band .wrap.band--3 { grid-template-columns: repeat(3, 1fr); } .band .wrap.band--4 { grid-template-columns: repeat(4, 1fr); } .hl { flex-direction: column; gap: var(--sp-3); } }

/* ---------- strip of services ---------- */
.strip { border-bottom: 1px solid var(--c-line); background: var(--c-surface); }
.strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3) var(--sp-5); padding-block: var(--sp-5); }
.strip p { font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }
.strip ul { display: contents; }
.strip li { list-style: none; display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-3); color: var(--c-ink); }
.strip li::before { content: ""; width: .5rem; height: .5rem; border-radius: 999px; background: var(--c-accent); }

/* ---------- sections ---------- */
.section { padding-block: var(--sp-9); }
.section--paper { background: var(--c-paper); }
.section--ink { background: var(--c-ink); color: var(--c-on-dark); }
.section--ink h2, .section--ink h3 { color: var(--c-on-dark-strong); }
.section--ink .eyebrow { color: var(--c-accent-lt); }
.head { max-width: 46rem; }
.head--center { margin-inline: auto; text-align: center; }
.head h2 { margin-top: var(--sp-2); font-size: var(--fs-5); }
.head p:not(.eyebrow) { margin-top: var(--sp-4); }
.head-row { display: grid; gap: var(--sp-5); align-items: end; }
.head-row .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (min-width: 64rem) { .head-row { grid-template-columns: 1fr auto; } .section { padding-block: var(--sp-10); } }

/* ---------- services ---------- */
.rows { display: grid; gap: var(--sp-8); margin-top: var(--sp-8); }
.row { display: grid; gap: var(--sp-5); align-items: center; }
.row__media { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 16 / 10; background: var(--c-line); }
.row__media img { width: 100%; height: 100%; object-fit: cover; }
.row h3 { font-size: var(--fs-5); }
.row p { margin-top: var(--sp-3); }
.ticks { margin: var(--sp-4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.ticks li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-2); }
.ticks li::before { content: ""; flex: none; width: .55rem; height: .55rem; margin-top: .5rem; border-radius: 2px; background: var(--c-accent); }
.more { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-family: var(--font-display); font-weight: var(--fw-display); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent-ink); text-decoration: none; }
.more svg { width: 1rem; height: 1rem; }
@media (min-width: 56rem) {
  .row { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .row:nth-child(even) .row__media { order: 2; }
}
.cards { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
.card { display: flex; flex-direction: column; padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.card__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius); background: var(--c-accent-tint); color: var(--c-accent-ink); }
.card__icon svg { width: 1.4rem; height: 1.4rem; }
.card h3 { margin-top: var(--sp-4); font-size: var(--fs-4); }
.card p { margin-top: var(--sp-2); font-size: var(--fs-2); }
.card .more { margin-top: auto; padding-top: var(--sp-4); }
.card--dark { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-dark); }
.card--dark h3 { color: var(--c-on-dark-strong); }
.card--dark .card__icon { background: var(--c-accent); color: var(--c-on-accent); }
.card--dark .btn { margin-top: auto; align-self: flex-start; }
.card--dark p { margin-bottom: var(--sp-5); }
.callrow { display: grid; gap: var(--sp-4); align-items: center; margin-top: var(--sp-8); padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--c-ink); color: var(--c-on-dark); }
.callrow h3 { color: var(--c-on-dark-strong); font-size: var(--fs-4); }
.callrow p { margin-top: var(--sp-1); }
@media (min-width: 64rem) { .callrow { grid-template-columns: 1fr auto; } }

/* ---------- work ---------- */
.gallery { margin-top: var(--sp-8); }
.shot { display: flex; flex-direction: column; margin: 0; }
.shot__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: var(--c-ink); box-shadow: var(--shadow-md); }
.shot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); }
.shot:hover img { transform: scale(1.04); }
/* the caption sits under the photo, never on it: owner photos often carry their own BEFORE and AFTER labels */
.shot figcaption { padding: var(--sp-3) var(--sp-1) 0; font-size: var(--fs-1); color: var(--c-muted); }
.shot figcaption strong { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-3); line-height: 1.2; color: var(--c-ink); }
.tag { display: inline-block; margin-bottom: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
@media (min-width: 40rem) { .shot figcaption { font-size: var(--fs-2); } .shot figcaption strong { font-size: var(--fs-4); } }

/* ---------- steps ---------- */
.steps { display: grid; gap: var(--sp-6); margin: var(--sp-8) 0 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--c-glass); border: 1px solid var(--c-on-dark-line); }
.step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-6); line-height: 1; color: var(--c-accent-lt); }
.step h3 { margin-top: var(--sp-3); font-size: var(--fs-4); }
.step p { margin-top: var(--sp-2); font-size: var(--fs-2); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- about ---------- */
.about { display: grid; gap: var(--sp-8); align-items: center; }
.collage { position: relative; padding: 0 var(--sp-6) var(--sp-7) 0; }
.collage__main { margin: 0; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); aspect-ratio: 4 / 3; }
.collage__main img { width: 100%; height: 100%; object-fit: cover; }
.collage__side { position: absolute; right: 0; bottom: 0; width: 46%; margin: 0; overflow: hidden; border: 6px solid var(--c-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); aspect-ratio: 1; }
.collage__side img { width: 100%; height: 100%; object-fit: cover; }
.collage--one { padding: 0; }
.about h2 { margin-top: var(--sp-2); font-size: var(--fs-5); }
.lead { margin-top: var(--sp-5); padding-left: var(--sp-4); border-left: 3px solid var(--c-accent); font-size: var(--fs-4); line-height: 1.45; color: var(--c-ink); }
.about p + p { margin-top: var(--sp-3); }
.about .lead + p { margin-top: var(--sp-5); }
.features { display: grid; gap: var(--sp-4); margin-top: var(--sp-6); }
.feature strong { display: block; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4); color: var(--c-ink); }
.feature p { margin-top: var(--sp-1); font-size: var(--fs-2); }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .about { grid-template-columns: 1fr 1fr; gap: var(--sp-9); } }

/* ---------- reviews ---------- */
.topics { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-6) 0 0; padding: 0; list-style: none; }
.topics li { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); font-size: var(--fs-1); font-weight: var(--fw-bold); color: var(--c-ink); }
.topics li b { color: var(--c-accent-ink); }
.quotes { margin-top: var(--sp-7); }
.review { margin: 0; padding: var(--sp-6); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.review .stars { color: var(--c-star); letter-spacing: .12em; }
.review p { margin-top: var(--sp-3); color: var(--c-ink); }
.review footer { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-4); font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }
.review__who { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-family: var(--font-display); font-size: var(--fs-2); }
.reviews-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

/* ---------- rate us (review funnel) ---------- */
.rate { max-width: 38rem; margin: var(--sp-7) auto 0; text-align: center; }
.rate__stars { display: flex; justify-content: center; gap: var(--sp-2); }
.rate__star { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; padding: 0; border: 2px solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); color: var(--c-star-off); cursor: pointer; transition: transform var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.rate__star svg { width: 2rem; height: 2rem; fill: currentColor; }
.rate__star.is-lit { color: var(--c-star); border-color: var(--c-star); }
.rate__star:hover { transform: translateY(-2px); }
.rate__hint { margin-top: var(--sp-3); font-size: var(--fs-2); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-muted); }
.rate__panel { margin-top: var(--sp-6); padding: var(--sp-6); text-align: left; background: var(--c-surface); border: 1px solid var(--c-line); border-top: 4px solid var(--c-accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.rate__panel[hidden] { display: none; }
.rate__go { margin-top: var(--sp-6); }
.rate__panel h2, .rate__panel h3 { font-size: var(--fs-4); }
.rate__panel > p { margin-top: var(--sp-2); }
.rate__panel > .field, .rate__panel > .btn, .rate__panel .form { margin-top: var(--sp-4); }
.rate__issues { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
.rate__issues legend { width: 100%; margin-bottom: var(--sp-2); font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-ink); }
.rate__chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: 0 var(--sp-4); border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-paper); font-size: var(--fs-2); color: var(--c-ink); cursor: pointer; }
.rate__chip input { accent-color: var(--c-accent); }
.rate__chip:has(input:checked) { border-color: var(--c-accent); background: var(--c-accent-tint); color: var(--c-ink); }
.rate__note { margin-top: var(--sp-3); font-size: var(--fs-2); color: var(--c-muted); }
@media (max-width: 23.9375rem) { .rate__star { width: 3rem; height: 3rem; } }
.review-page { padding-block: var(--sp-8); }
.review-note { margin-top: var(--sp-8); text-align: center; font-size: var(--fs-2); color: var(--c-muted); }
.review-note a { color: var(--c-accent-ink); font-weight: var(--fw-bold); }

/* ---------- FAQ ---------- */
.faq-layout { display: grid; gap: var(--sp-7); align-items: start; }
.faq-list { border-top: 1px solid var(--c-line); }
.faq { border-bottom: 1px solid var(--c-line); }
.faq summary { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) 0; list-style: none; cursor: pointer; font-weight: var(--fw-bold); color: var(--c-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-family: var(--font-display); font-size: var(--fs-4); line-height: 1; color: var(--c-accent-ink); }
.faq[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: var(--sp-5); font-size: var(--fs-2); max-width: 68ch; }
@media (min-width: 64rem) { .faq-layout { grid-template-columns: 4fr 7fr; gap: var(--sp-9); } .faq-layout > :first-child { position: sticky; top: calc(var(--header-h) + var(--sp-5)); } }

/* ---------- contact ---------- */
.contact { display: grid; gap: var(--sp-7); align-items: start; }
.rows-info { display: grid; gap: 0; margin: var(--sp-6) 0 0; border-top: 1px solid var(--c-line); }
.info { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--sp-4); padding-block: var(--sp-4); border-bottom: 1px solid var(--c-line); }
.info dt { font-size: var(--fs-1); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--c-accent-ink); padding-top: var(--sp-1); }
.info dd { margin: 0; font-size: var(--fs-2); color: var(--c-ink); }
.info .phone { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4); text-decoration: none; }
.map { margin-top: var(--sp-6); overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); aspect-ratio: 16 / 10; background: var(--c-paper); }
.map iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 64rem) { .contact { grid-template-columns: 7fr 5fr; gap: var(--sp-9); } }

/* ---------- closing band ---------- */
.closer { background: var(--c-accent); color: var(--c-on-accent); }
.closer .wrap { display: grid; gap: var(--sp-5); align-items: center; padding-block: var(--sp-8); }
.closer h2 { color: var(--c-on-accent); font-size: var(--fs-5); }
.closer p { margin-top: var(--sp-2); }
.closer .actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.closer .btn--ghost { border-color: var(--c-on-accent); color: var(--c-on-accent); background: transparent; }
@media (min-width: 64rem) { .closer .wrap { grid-template-columns: 1fr auto; } }

/* ---------- footer ---------- */
.site-footer { background: var(--c-ink); color: var(--c-on-dark); padding-block: var(--sp-8) var(--sp-10); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-7); }
.site-footer .brand { color: var(--c-on-dark-strong); }
.site-footer .brand__sub { white-space: normal; }
.site-footer p { font-size: var(--fs-2); }
.footer-h { margin-bottom: var(--sp-3); font-size: var(--fs-4); color: var(--c-on-dark-strong); }
.footer-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-2); }
.footer-list a { text-decoration: none; }
.footer-list a:hover { color: var(--c-on-dark-strong); text-decoration: underline; }
.footer-phone { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-4); color: var(--c-on-dark-strong); text-decoration: none; }
.footer-bottom { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--c-on-dark-line); font-size: var(--fs-1); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .footer-bottom { flex-direction: row; justify-content: space-between; } .site-footer { padding-bottom: var(--sp-8); } }

/* ---------- mobile call bar ---------- */
.mobile-bar { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--shadow-lg); }
.mobile-bar a { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 56px; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-3); letter-spacing: var(--ls-caps); text-transform: uppercase; text-decoration: none; }
.mobile-bar svg { width: 1.1rem; height: 1.1rem; }
.mobile-bar .call { background: var(--c-accent); color: var(--c-on-accent); }
.mobile-bar .msg { background: var(--c-ink); color: var(--c-on-dark-strong); }
@media (min-width: 64rem) { .mobile-bar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .btn:hover, .rate__star:hover, .shot:hover img { transform: none; }
}

/* grid children may shrink below their content, so nothing pushes a 390px page sideways */
.hero__grid > *, .about > *, .contact > *, .faq-layout > *, .row > *, .head-row > *, .closer .wrap > * { min-width: 0; }

/* ---------- service cards with a picture (every service has one, real or AI drawn) ---------- */
.card--media { padding: 0; overflow: hidden; }
.card__media { position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 10; background: var(--c-ink); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; flex: 1; padding: var(--sp-6); }
.card--media h3 { margin-top: 0; }

/* ---------- service area card (no map tiles, no third party load) ---------- */
.area { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-6); min-height: 12rem; padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--hero-plain); color: var(--c-on-dark); }
.area strong { font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-5); line-height: var(--lh-tight); color: var(--c-on-dark-strong); }
.area a { align-self: flex-start; }

/* ---------- one grade on every photo, so mixed phone shots read as one shoot ---------- */
.shot__media::after, .row__media::after, .card__media::after, .collage__main::after, .collage__side::after { content: ""; position: absolute; inset: 0; background: var(--c-photo-wash); pointer-events: none; }
.row__media, .collage__main { position: relative; }
.shot img, .row__media img, .card__media img, .collage img { filter: saturate(1.06) contrast(1.04); }

/* ---------- about with no photo, footer ---------- */
@media (min-width: 64rem) {
  .about--text { grid-template-columns: minmax(0, 1fr); }
  .about--text > div { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--sp-9); align-items: start; }
  .about--text > div > * { grid-column: 1; }
  .about--text .features { grid-column: 2; grid-row: 1 / span 9; margin-top: 0; align-self: center; grid-template-columns: minmax(0, 1fr); padding: var(--sp-6); border-radius: var(--radius-lg); background: var(--c-surface); border: 1px solid var(--c-line); box-shadow: var(--shadow-sm); }
}
.footer-blurb { margin-top: var(--sp-5); max-width: 34ch; }
.footer-mark-wrap { container-type: inline-size; }
.site-footer .footer-mark { margin-top: var(--sp-8); font-family: var(--font-display); font-weight: var(--fw-display); font-size: min(var(--fs-6), calc(100cqi / (var(--chars) * .62))); line-height: .9; color: var(--c-glass-strong); white-space: nowrap; text-transform: uppercase; }

/* ---------- grids that always fill their rows ----------
   fill.mjs gives every cell its span of a 12 column grid (s3, s4, s6, s12), rows of at most 3 or 4 with the fuller rows
   first. Phones: one column (photo grids keep two). Tablets: two columns, an odd last cell takes the whole row. */
.g12 { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.g12--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) var(--sp-4); }
@media (max-width: 63.99rem) {
  .g12--pairs > :last-child:nth-child(odd) { grid-column: span 2; }
  .g12--pairs > :last-child:nth-child(odd) .shot__media { aspect-ratio: 16 / 9; }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  .g12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g12 > :last-child:nth-child(odd) { grid-column: span 2; }
}
@media (min-width: 64rem) {
  .g12, .g12--pairs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--sp-5); }
  .g12 > .s3 { grid-column: span 3; } .g12 > .s4 { grid-column: span 4; } .g12 > .s6 { grid-column: span 6; } .g12 > .s12 { grid-column: span 12; }
  .g12 > .s6 .shot__media { aspect-ratio: 16 / 10; } .g12 > .s12 .shot__media { aspect-ratio: 21 / 9; }
}
/* small laptops: a row of four is too tight for card text, so it becomes two rows of two (still no gaps) */
@media (min-width: 64rem) and (max-width: 79.99rem) { .g12 > .s3 { grid-column: span 6; } }

/* ---------- Rehner Construction LLC, client site ---------- */
/* Services opens a list of the seven service pages (build recipe: each service page has a link in the main menu) */
.nav-drop { position: relative; }
.nav-drop__btn { display: inline-flex; align-items: center; gap: var(--sp-1); padding: var(--sp-2) 0; border: 0; border-bottom: 2px solid transparent; background: none; color: inherit; font: inherit; font-size: var(--fs-2); font-weight: var(--fw-bold); opacity: .9; cursor: pointer; white-space: nowrap; }
.nav-drop__btn:hover { opacity: 1; border-bottom-color: var(--c-accent); }
.nav-drop__btn svg { width: var(--sp-4); height: var(--sp-4); transition: transform var(--t-fast); }
.nav-drop__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-drop__btn[aria-current="true"] { opacity: 1; border-bottom-color: var(--c-accent); }
.nav-drop__menu { position: absolute; top: calc(100% + var(--sp-2)); left: calc(var(--sp-4) * -1); z-index: 60; min-width: 15rem; padding: var(--sp-2) 0; background: var(--c-surface); color: var(--c-ink); border: 1px solid var(--c-line); border-top: 3px solid var(--c-accent); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.nav-drop__menu[hidden] { display: none; }
.nav .nav-drop__menu a { display: block; padding: var(--sp-3) var(--sp-4); border-bottom: 0; opacity: 1; }
.nav .nav-drop__menu a:hover, .nav .nav-drop__menu a:focus-visible { background: var(--c-paper); }
.nav .nav-drop__menu a[aria-current="page"] { color: var(--c-accent-ink); box-shadow: inset 3px 0 0 var(--c-accent); }
@media (prefers-reduced-motion: reduce) { .nav-drop__btn svg { transition: none; } }
/* on phones the service pages sit under Services in the menu, which scrolls when it is taller than the screen */
.mobile-sub { display: flex; flex-direction: column; align-items: center; margin-top: calc(var(--sp-3) * -1); }
.mobile-nav .mobile-sub a:not(.btn) { padding-block: var(--sp-2); font-size: var(--fs-2); font-weight: var(--fw-bold); opacity: .85; }
.mobile-nav a[aria-current="page"] { color: var(--c-accent-ink); opacity: 1; }
.mobile-nav[data-open="true"] { max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 63.9375rem) { .mobile-nav nav { padding-bottom: var(--sp-10); } }
/* other services on a service page: the strip's items are links */
.strip--links a { color: inherit; text-decoration: none; display: inline-block; padding-block: var(--sp-2); }
.strip--links a:hover, .strip--links a:focus-visible { color: var(--c-accent-ink); }
/* his email is one long word; on a 360px phone it wraps instead of pushing the page sideways */
.info dd, .footer-email { overflow-wrap: anywhere; }
.footer-email { margin-top: var(--sp-2); font-size: var(--fs-2); }
.footer-email a { color: inherit; }
/* the chat bubble sits above the call bar on phones, and steps aside while the menu is open */
@media (max-width: 63.9375rem) { .lmc-root, .lmc-bubble { bottom: 72px !important; } }
body:has(.mobile-nav[data-open="true"]) .lmc-root { display: none; }