/* Remediate Renovation — style.css
   Direction C "Clear Water": white, light water, deep water. Photo-first.
   One accent, bright water blue, used only for the call to action.      */

:root {
  --deep: #0f3a5c;      /* text, header buttons */
  --bright: #1577b8;    /* the call button */
  --light: #e4f1f9;     /* light water ground */
  --tint: #cfe6f5;      /* hero frame behind the photo */
  --ink: #0f3a5c;
  --ink-soft: #2a4d66;
  --quiet: #3f5f78;
  --paper: #ffffff;
  --radius: 16px;
  --measure: 38rem;
  --head: 7.4rem;       /* sticky header height on a phone: name + call, then the menu row */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; color: var(--ink); background: var(--paper); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }
[id] { scroll-margin-top: calc(var(--head) + .5rem); }   /* anchor targets land below the sticky header */

/* header */
.top { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .15rem; align-items: center; justify-content: space-between; column-gap: 1rem; padding: .8rem 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); }
.top .name { display: flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.05rem; text-decoration: none; letter-spacing: -.01em; }
.top .name { min-width: 0; line-height: 1.15; }  /* lets the name wrap on 320px screens instead of pushing the call button off the edge */
.top .name svg { width: 1.6rem; height: 1.6rem; stroke: var(--bright); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.top .name small { display: none; }
.call { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.2rem; background: var(--bright); color: #fff; border-radius: 999px; font-weight: 700; font-size: 1.05rem; text-decoration: none; white-space: nowrap; min-height: 44px; }
.call:hover { background: #126aa5; }
.call svg { width: 1.1em; height: 1.1em; fill: currentColor; }
@media (max-width: 22rem) { .top { gap: .6rem; padding-inline: .75rem; } .top .call { padding-inline: .9rem; font-size: .95rem; } }
@media (min-width: 40rem) { .top { padding: 1rem 1.5rem; } .top .name small { display: inline; font-weight: 500; color: var(--quiet); font-size: .9rem; margin-left: .5rem; } }

/* hero lives in hero.css */

/* the story: cards in a row on wide screens, stacked on a phone */
.story { padding: 4rem 1rem 1rem; max-width: 72rem; margin: 0 auto; }
.story > h2 { margin: 0 0 2rem; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; max-width: 20ch; }
.steps { display: grid; gap: 2rem; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.step { display: grid; gap: .6rem; align-content: start; }
.step h3 { margin: .25rem 0 0; font-size: 1.5rem; letter-spacing: -.01em; }
.step h3::before { content: counter(step) ". "; color: var(--quiet); font-weight: 500; }
.steps { counter-reset: step; }
.step { counter-increment: step; }
.step p { margin: 0; color: var(--ink-soft); }
.story .more { margin: 1.5rem 0 0; color: var(--quiet); font-size: .95rem; }

/* photo slot: a real job photo from projects.csv, or an honest empty frame */
.photo { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--light); position: relative; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo a { display: block; height: 100%; }
.photo figcaption { position: absolute; left: .6rem; bottom: .6rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(15,58,92,.82); color: #fff; font-size: .8rem; font-weight: 600; }
.story .more a { color: var(--bright); font-weight: 600; }

/* services and contact */
.services { margin: 3rem .75rem 1rem; padding: 2.5rem 1.25rem; border-radius: 1.5rem; background: var(--light); display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .services { margin: 3rem 1.5rem 1rem; padding: 3.5rem 2.5rem; grid-template-columns: 1fr 1fr; align-items: center; gap: 2.5rem; } }
.services h2 { margin: 0 0 .5rem; font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.services p { margin: 0; color: var(--ink-soft); max-width: 36ch; }
.services ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 40rem) { .services ul { grid-template-columns: 1fr 1fr; } }
.services li a { display: block; padding: .95rem 1.1rem; background: #fff; border-radius: 14px; text-decoration: none; font-weight: 500; min-height: 44px; }
.services li a:hover { color: var(--bright); }
.services li span { display: block; padding: .95rem 1.1rem; color: var(--quiet); }

footer { padding: 1.5rem 1rem 3rem; font-size: .9rem; color: var(--quiet); max-width: 72rem; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; }
footer p { margin: 0; }

/* service page */
.page { max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 3rem; }
.page h1 { font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; letter-spacing: -.03em; margin: 0 0 .75rem; max-width: 20ch; }
.lead { font-size: 1.2rem; max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1.5rem; }
.first { background: var(--deep); color: #fff; padding: 1.5rem; border-radius: var(--radius); max-width: var(--measure); margin: 0 0 2.5rem; }
.first h2 { margin: 0 0 .5rem; font-size: 1.3rem; }
.first ol { margin: 0; padding-left: 1.2rem; }
.first li { margin: .35rem 0; }
.first a { color: #fff; }
.qa { max-width: var(--measure); }
.qa h2 { font-size: 1.35rem; letter-spacing: -.02em; margin: 2rem 0 .5rem; }
.qa p { margin: 0 0 .75rem; color: var(--ink-soft); }
.form { max-width: var(--measure); margin: 3rem 0 0; padding: 1.5rem; background: var(--light); border-radius: 1.5rem; }
.form h2 { margin: 0 0 .25rem; font-size: 1.4rem; }
.form p { margin: 0 0 1rem; color: var(--ink-soft); }
.form label { display: block; font-weight: 600; margin: .9rem 0 .3rem; }
.form input, .form select, .form textarea { width: 100%; font: inherit; padding: .75rem .9rem; border: 1px solid #bcd6e8; border-radius: 12px; background: #fff; }
.form textarea { min-height: 6rem; }
.form button { margin-top: 1.1rem; font: inherit; font-weight: 700; padding: .9rem 1.4rem; border: 0; border-radius: 999px; background: var(--deep); color: #fff; cursor: pointer; min-height: 44px; }
.form .or { margin: 1rem 0 0; }

/* project page */
.kicker { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; color: var(--quiet); letter-spacing: .02em; }
.pair { margin: 0 0 3rem; display: grid; gap: .75rem; }
@media (min-width: 48rem) { .pair { grid-template-columns: 1fr 1fr; } }
.pair div { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--light); }
.pair img { width: 100%; height: 100%; object-fit: cover; }
.pair span { position: absolute; left: .75rem; bottom: .75rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(15,58,92,.85); color: #fff; font-size: .85rem; font-weight: 600; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; counter-reset: stage; }
.stages li { counter-increment: stage; display: grid; gap: .5rem; }
.stages h2 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.stages h2::before { content: counter(stage) ". "; color: var(--quiet); font-weight: 500; }
.stages .when { margin: 0; font-size: .9rem; color: var(--quiet); }
.stages p { margin: 0; max-width: var(--measure); color: var(--ink-soft); }
.shots { margin-top: .75rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .6rem; }
.shots img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 12px; background: var(--light); }
.next { margin: 4rem 0 0; padding: 2rem 1.5rem; border-radius: 1.5rem; background: var(--light); max-width: var(--measure); }
.next h2 { margin: 0 0 .5rem; font-size: 1.5rem; }
.next p { margin: 0 0 1.25rem; color: var(--ink-soft); }


/* scroll sequence (js/scroll-sequence.js, partials/sequence.html) */
.seq { height: 260vh; margin: 0 0 3rem; }
.seq-stage { position: sticky; top: var(--head); height: calc(100svh - var(--head) - 1rem); aspect-ratio: 4 / 5; max-width: 100%; margin: 0 auto; overflow: hidden; border-radius: var(--radius); background: var(--light); }
.seq-poster, .seq canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.seq canvas { opacity: 0; transition: opacity .3s; }
.seq.is-ready canvas { opacity: 1; }
.seq-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 3rem 1rem 1.25rem; color: #fff; background: linear-gradient(transparent, rgba(15,58,92,.85)); }
.seq-cap.in { animation: seq-in .45s ease-out; }
@keyframes seq-in { from { opacity: 0; transform: translateY(.6rem); } to { opacity: 1; transform: none; } }
.seq-label { display: block; font-size: 1.5rem; letter-spacing: -.01em; }
.seq-text { margin: .2rem 0 0; font-size: 1.05rem; }
.seq-meta { margin: .4rem 0 0; font-size: .85rem; opacity: .8; }
.seq-load { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: rgba(255,255,255,.4); transition: opacity .4s; }
.seq-load i { display: block; height: 100%; background: var(--bright); transform: scaleX(0); transform-origin: left; }
.seq.is-loaded .seq-load, .seq:not(.is-live) .seq-load { opacity: 0; }
.seq-tap { display: none; }
/* reduced motion / data saver / no JS: poster (+ tap-through gallery when JS runs) */
.seq:not(.is-live) { height: auto; }
.seq:not(.is-live) .seq-stage { position: relative; top: 0; height: auto; max-width: min(100%, calc((100svh - var(--head) - 1rem) * .8)); }   /* same size as the live stage: fits the screen on desktop */
.seq.is-gallery .seq-tap { display: block; position: absolute; right: .75rem; top: .75rem; font: inherit; font-weight: 600; padding: .6rem 1rem; min-height: 44px; border: 0; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--deep); cursor: pointer; }
.seq.is-gallery .seq-cap { animation: none; }
@media (prefers-reduced-motion: reduce) { .seq-cap.in { animation: none; } }
.seq:not(.is-live) .seq-poster { position: relative; height: auto; aspect-ratio: 4 / 5; }
.seq:not(.is-live):not(.is-gallery) .seq-cap { display: none; }

/* vertical job video (make_video.py), tap to play */
.clip { margin: 4rem auto 0; max-width: 22rem; }
.clip video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--deep); display: block; }
.clip figcaption { margin-top: .5rem; font-size: .9rem; color: var(--quiet); text-align: center; }

/* service page: link to a real job */
.job { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr); gap: 1rem; align-items: center; max-width: var(--measure); margin: 2.5rem 0 0; padding: .75rem; border-radius: var(--radius); background: var(--light); text-decoration: none; }
.job img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; }
.job span { color: var(--ink-soft); font-size: .95rem; }
.job b { display: block; color: var(--ink); font-size: 1.1rem; margin-bottom: .2rem; }
.job:hover b { color: var(--bright); }

/* where we work: city names only, no city pages (PLAN.md, Pages) */
.areas { max-width: 72rem; margin: 2rem auto 0; padding: 1rem 1rem 2rem; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .areas { grid-template-columns: 1fr 1fr; padding-inline: 1.5rem; } .areas h2, .areas-note { grid-column: 1 / -1; } }
.areas h2 { margin: 0; font-size: clamp(1.7rem, 4.5vw, 2.5rem); line-height: 1.05; letter-spacing: -.02em; }
.area h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.area p { margin: 0; color: var(--ink-soft); line-height: 1.7; }
.areas-note { margin: 0; color: var(--quiet); }
.areas-note a { color: var(--bright); font-weight: 600; }

/* portfolio: every job's video (scripts/build_portfolio.py) */
.pf-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.5rem; }
.pf-tools label { font-weight: 600; }
.pf-tools select { font: inherit; padding: .55rem .8rem; border: 1px solid #bcd6e8; border-radius: 12px; background: #fff; color: var(--ink); min-height: 44px; }
.pf-count { color: var(--quiet); font-size: .95rem; }
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
@media (min-width: 48rem) { .pf-grid { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1.25rem; } }
.pf-card { margin: 0; display: grid; gap: .45rem; align-content: start; }
.pf-card[hidden] { display: none; }
.pf-card video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--deep); display: block; }
.pf-card figcaption { display: grid; gap: .1rem; font-size: .9rem; }
.pf-card figcaption b { font-size: 1rem; }
.pf-card figcaption span { color: var(--quiet); }
.pf-page { color: var(--bright); font-weight: 600; text-decoration: none; }

/* service landing page, 14 sections (.claude/skills/service-page). Brand tokens only. */
.sl-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(78svh, 46rem); padding: 6rem 1rem 2.5rem; background: var(--deep); color: #fff; overflow: hidden; }
.sl-hero img { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; object-fit: cover; object-position: 50% 40%; }
.sl-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(15,58,92,.15) 0%, rgba(15,58,92,.55) 45%, rgba(15,58,92,.94) 100%); }
.sl-hero-in { width: 100%; max-width: 72rem; margin: 0 auto; }
.sl-hero h1 { margin: 0 0 .75rem; font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: 1; letter-spacing: -.035em; max-width: 14ch; }
.sl-hero p { margin: 0 0 1.5rem; font-size: clamp(1.1rem, 2.6vw, 1.3rem); max-width: 34ch; color: #f2f8fc; }
.sl-hero .slogan { margin: 0 0 .6rem; font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--tint); }
.sl-btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .8rem 1.35rem; border-radius: 999px; font-weight: 700; text-decoration: none; transition: background-color .2s, color .2s; }
.btn-main { background: var(--bright); color: #fff; }
.btn-main:hover { background: #126aa5; }
.btn-ghost { border: 2px solid #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--deep); }

.sl { max-width: 72rem; margin: 0 auto; padding: 4rem 1rem 0; }
@media (min-width: 48rem) { .sl { padding: 5.5rem 1.5rem 0; } }
.sl h2 { margin: 0 0 .75rem; font-size: clamp(1.75rem, 4.5vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; max-width: 22ch; }
.sl-intro { margin: 0 0 2rem; max-width: var(--measure); color: var(--ink-soft); font-size: 1.1rem; }
.eyebrow { margin: 0 0 .5rem; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--quiet); }

.sl-band { background: var(--light); }
.sl-trust { list-style: none; margin: 0 auto; padding: 1.25rem 1rem; display: grid; gap: .9rem; max-width: 72rem; }
@media (min-width: 48rem) { .sl-trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; padding: 1.75rem 1.5rem; } }
.sl-trust li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; line-height: 1.35; }
.sl-trust svg { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .05rem; stroke: var(--bright); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.sl-two { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .sl-two { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.sl-card { padding: 1.5rem; border-radius: var(--radius); background: var(--light); }
.sl-card h3 { margin: 0 0 .5rem; font-size: 1.25rem; letter-spacing: -.01em; }
.sl-card p { margin: 0 0 .6rem; color: var(--ink-soft); }
.sl-card p:last-child { margin: 0; }
.sl-card.is-deep { background: var(--deep); color: #fff; }
.sl-card.is-deep p { color: #e4f1f9; }

.sl-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #cfe0ec; }
@media (min-width: 48rem) { .sl-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } }
.sl-list li { padding: 1.1rem 0; border-bottom: 1px solid #cfe0ec; }
.sl-list h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.sl-list p { margin: 0; color: var(--ink-soft); }

.sl-show { margin-top: 4rem; padding: 4rem 0; background: var(--deep); color: #fff; }
@media (min-width: 48rem) { .sl-show { margin-top: 5.5rem; padding: 5.5rem 0; } }
.sl-show .sl { padding-top: 0; }
.sl-show .eyebrow { color: var(--tint); }
.sl-show .sl-intro { color: #e4f1f9; }
.sl-show a { color: #fff; }
.sl-reel { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .sl-reel { grid-template-columns: 1.3fr 1fr; gap: 1rem; } .sl-reel figure:first-child { grid-row: span 2; } }
.sl-reel figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: #1b4b70; }
.sl-reel img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 48rem) { .sl-reel figure:not(:first-child) img { aspect-ratio: 16 / 10; } }
.sl-reel figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.5rem 1rem .9rem; background: linear-gradient(transparent, rgba(15,58,92,.92)); font-size: .95rem; }
.sl-reel figcaption b { display: block; font-size: 1.05rem; }
.sl-more { margin: 1.5rem 0 0; font-weight: 700; }

.sl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; counter-reset: sl; }
@media (min-width: 48rem) { .sl-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sl-steps li { counter-increment: sl; padding: 1.5rem 1.25rem; border-radius: var(--radius); border: 1px solid #cfe0ec; }
.sl-steps li::before { content: counter(sl, decimal-leading-zero); display: block; margin-bottom: .75rem; font-size: .9rem; font-weight: 700; color: var(--bright); }
.sl-steps h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.sl-steps p { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.sl-mats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.sl-mats figure { margin: 0; }
.sl-mats img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius); background: var(--light); }
.sl-mats figcaption { margin-top: .6rem; color: var(--ink-soft); }
.sl-mats figcaption b { display: block; color: var(--ink); font-size: 1.1rem; }
.sl-note { margin: 1.25rem 0 0; font-size: .95rem; color: var(--quiet); }

/* before/after drag slider: a range input over two photos, works with keyboard and touch */
.ba { position: relative; max-width: 36rem; margin: 0 auto; aspect-ratio: 652 / 800; overflow: hidden; border-radius: var(--radius); background: var(--light); --pos: 50%; user-select: none; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba .ba-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.ba-line::after { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3a5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center / 24px no-repeat; box-shadow: 0 2px 10px rgba(15,58,92,.35); }
.ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba:focus-within { outline: 3px solid var(--bright); outline-offset: 3px; }
.ba-tag { position: absolute; top: .75rem; padding: .3rem .75rem; border-radius: 999px; background: rgba(15,58,92,.88); color: #fff; font-size: .85rem; font-weight: 700; pointer-events: none; }
.ba-tag.l { left: .75rem; }
.ba-tag.r { right: .75rem; }
.ba-cap { max-width: 36rem; margin: .75rem auto 0; color: var(--quiet); font-size: .95rem; text-align: center; }

.sl-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }

.sl-rel { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.sl-rel a { display: grid; grid-template-rows: auto 1fr; height: 100%; overflow: hidden; border-radius: var(--radius); background: var(--light); text-decoration: none; transition: box-shadow .2s; }
.sl-rel a:hover { box-shadow: 0 6px 20px rgba(15,58,92,.15); }
.sl-rel img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sl-rel span { padding: 1rem 1.15rem 1.25rem; color: var(--ink-soft); font-size: .98rem; }
.sl-rel b { display: block; color: var(--ink); font-size: 1.15rem; margin-bottom: .2rem; }
.sl-rel a:hover b { color: var(--bright); }

.sl-area { padding: 2rem 1.5rem; border-radius: 1.5rem; background: var(--light); display: grid; gap: .75rem; }
@media (min-width: 48rem) { .sl-area { grid-template-columns: 1fr 1fr; align-items: center; padding: 2.5rem; gap: 2rem; } }
.sl-area h2 { margin: 0; }
.sl-area p { margin: 0; color: var(--ink-soft); }
.sl-area a { color: var(--deep); font-weight: 700; }

.faq { max-width: 48rem; border-top: 1px solid #cfe0ec; }
.faq details { border-bottom: 1px solid #cfe0ec; }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 48px; padding: 1rem 0; font-size: 1.1rem; font-weight: 700; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: var(--light); color: var(--deep); font-size: 1.3rem; font-weight: 500; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 1.1rem; max-width: var(--measure); color: var(--ink-soft); }
.faq a { color: var(--deep); font-weight: 600; }

.sl-end { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .sl-end { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.sl-end .form { margin: 0; max-width: none; }

.foot { display: block; max-width: none; margin: 5rem 0 0; padding: 0; font-size: 1rem; background: var(--deep); color: #e4f1f9; }
.foot-in { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem 2rem; display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.foot h2 { margin: 0 0 .5rem; font-size: 1rem; color: #fff; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot a { display: inline-block; padding: .55rem 0; color: #fff; }
.foot .brand { margin: 0; color: #fff; font-weight: 800; font-size: 1.1rem; }
.foot .brand + p { margin: .4rem 0 0; }
.foot-base { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; border-top: 1px solid rgba(228,241,249,.25); font-size: .9rem; }
.foot-base p { margin: 0; }
@media (min-width: 48rem) { .foot-in, .foot-base { padding-inline: 1.5rem; } }
@media (prefers-reduced-motion: reduce) { .btn, .sl-rel a, .faq summary::after { transition: none; } }

/* main menu (scripts/site_chrome.py): its own row on a phone, inline from 60rem */
.menu { order: 3; grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 1.1rem; font-size: .95rem; font-weight: 600; }
.menu a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--ink-soft); }
.menu a:hover { color: var(--bright); }
@media (max-width: 22rem) { .menu { gap: 0 .8rem; font-size: .9rem; } }
@media (min-width: 60rem) {
  :root { --head: 5rem; }
  .top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .menu { order: 0; grid-column: auto; justify-self: end; margin-right: .75rem; gap: 0 1.5rem; }
  .top .name small { display: none; }
}
@media (min-width: 72rem) { .top .name small { display: inline; } }
.foot .foot-h { margin-top: 1.25rem; }

/* service hero without a public job photo yet: that service's Remi on deep water */
.sl-hero.is-remi { align-items: center; min-height: auto; padding: 3rem 1rem; background: radial-gradient(90% 80% at 75% 30%, #1b5a88 0%, var(--deep) 70%); }
.sl-hero.is-remi::after { display: none; }
.sl-hero.is-remi .sl-hero-in { display: grid; gap: 1.5rem; align-items: center; }
.sl-hero.is-remi img { position: static; z-index: auto; width: min(15rem, 62vw); height: auto; object-fit: contain; justify-self: center; filter: drop-shadow(0 18px 30px rgba(0,0,0,.35)); }
@media (min-width: 48rem) {
  .sl-hero.is-remi { padding: 5rem 1.5rem; }
  .sl-hero.is-remi .sl-hero-in { grid-template-columns: minmax(0, 1fr) auto; }
  .sl-hero.is-remi img { width: min(24rem, 34vw); order: 2; }
}

/* a marked spot for job photos that are not public yet (fills from projects.csv public: yes) */
.sl-slot { display: grid; gap: 1rem; align-items: center; padding: 1.5rem; border: 2px dashed #9cc3dd; border-radius: var(--radius); background: var(--light); }
.sl-slot img { width: 7rem; height: auto; }
.sl-slot b { display: block; font-size: 1.15rem; margin-bottom: .25rem; }
.sl-slot p { margin: 0; color: var(--ink-soft); max-width: var(--measure); }
@media (min-width: 40rem) { .sl-slot { grid-template-columns: auto minmax(0, 1fr); } }
.sl-show .sl-slot { background: rgba(255,255,255,.06); border-color: rgba(228,241,249,.45); }
.sl-show .sl-slot p { color: #e4f1f9; }
.sl-show .sl-slot b { color: #fff; }

/* hub: the pages under a service (construction & remodeling → kitchen) */
.sl-hub { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.sl-hub a { display: block; height: 100%; padding: 1.5rem; border-radius: var(--radius); border: 1px solid #cfe0ec; text-decoration: none; }
.sl-hub a:hover { border-color: var(--bright); }
.sl-hub b { display: block; font-size: 1.2rem; margin-bottom: .3rem; }
.sl-hub span { color: var(--ink-soft); }

/* home: the six-step story as chapters. Stacked by default (no JS, reduced motion);
   home.js adds .is-pinned and GSAP ScrollTrigger pins the stage and crossfades the steps. */
.chapters { max-width: 72rem; margin: 0 auto; padding: 4rem 1rem 0; }
.chapters > h2 { margin: 0 0 .75rem; font-size: clamp(1.8rem, 5vw, 2.75rem); line-height: 1.05; letter-spacing: -.02em; max-width: 20ch; }
.chapters > .sl-intro { margin-bottom: 2rem; }
.ch-rail { display: none; }
.ch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; counter-reset: ch; }
.ch { counter-increment: ch; display: grid; gap: 1rem; align-items: center; }
@media (min-width: 48rem) { .ch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; } }
.ch figure { margin: 0; position: relative; overflow: hidden; border-radius: var(--radius); background: var(--light); aspect-ratio: 3 / 4; max-height: 70svh; }
.ch img { width: 100%; height: 100%; object-fit: cover; }
.ch figcaption { position: absolute; left: .6rem; bottom: .6rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(15,58,92,.85); color: #fff; font-size: .8rem; font-weight: 600; }
.ch h3 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: -.02em; line-height: 1.05; }
.ch h3::before { content: counter(ch) ". "; color: var(--quiet); font-weight: 500; }
.ch p { margin: 0 0 .75rem; color: var(--ink-soft); max-width: 34ch; font-size: 1.1rem; }
.ch .ch-link { color: var(--deep); font-weight: 700; }
.chapters.is-pinned .ch-stage { position: relative; height: calc(100svh - var(--head)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: .75rem; padding: .75rem 0 1rem; background: var(--paper); }
.chapters.is-pinned .ch-rail { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.ch-rail li { flex: 1; font-size: .72rem; font-weight: 700; color: var(--quiet); text-transform: uppercase; letter-spacing: .04em; }
.ch-rail li::before { content: ""; display: block; height: 4px; margin-bottom: .35rem; border-radius: 4px; background: #cfe0ec; transition: background-color .3s; }
.ch-rail li.on { color: var(--deep); }
.ch-rail li.on::before { background: var(--bright); }
@media (max-width: 30rem) { .ch-rail li span { display: none; } }
.chapters.is-pinned .ch-list { position: relative; display: block; min-height: 0; }
.chapters.is-pinned .ch { position: absolute; inset: 0; align-content: center; }
.chapters.is-pinned .ch + .ch { opacity: 0; }
@media (max-width: 47.99rem) {
  .chapters.is-pinned .ch { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: .75rem; }
  .chapters.is-pinned .ch figure { aspect-ratio: auto; max-height: none; min-height: 0; }
  .chapters.is-pinned .ch p { font-size: 1rem; margin-bottom: .4rem; }
}

/* home: A–Z index of services and topics */
.az { list-style: none; margin: 0; padding: 0; columns: 2 12rem; column-gap: 2rem; }
.az li { break-inside: avoid; display: flex; gap: .75rem; align-items: baseline; }
.az li > span { flex: none; width: 1.4rem; font-weight: 800; color: var(--bright); }
.az a { display: inline-block; padding: .45rem 0; color: var(--ink); font-weight: 600; text-decoration-color: #9cc3dd; }
.az a:hover { color: var(--bright); }

/* home: portfolio teaser and the services grid */
.teaser { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 48rem) { .teaser { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 3rem; } }
.teaser video { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: var(--radius); background: var(--deep); display: block; }
.teaser p { color: var(--ink-soft); max-width: var(--measure); }
.services li a b { display: block; }
.services li a small { display: block; color: var(--quiet); font-size: .9rem; font-weight: 400; margin-top: .15rem; }
@media (prefers-reduced-motion: reduce) { .ch-rail li::before { transition: none; } }
.teaser-play { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--deep); }
.teaser-play img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; }
.teaser-play span { position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.2rem; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--deep); font-weight: 700; white-space: nowrap; }
.teaser-play span::before { content: ""; width: 0; height: 0; border-left: .7rem solid var(--bright); border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; }
.teaser-play:hover span { color: var(--bright); }

/* web-design-guidelines review, Oct 19 2026 */
html { scroll-padding-top: calc(var(--head) + .5rem); }   /* keyboard focus never lands under the sticky header */
h1, h2, h3 { text-wrap: balance; }
a, button, summary, input, select, textarea, label { touch-action: manipulation; }
.ba input { touch-action: pan-y; }
.skip { position: absolute; left: .75rem; top: -4rem; z-index: 20; padding: .7rem 1rem; border-radius: 12px; background: var(--deep); color: #fff; font-weight: 700; text-decoration: none; }
.skip:focus { top: .75rem; }

/* footer v2: call band, the four Remis, link columns, base line (scripts/site_chrome.py) */
.foot-cta { max-width: 72rem; margin: 0 auto; padding: 3rem 1rem 2.25rem; display: grid; gap: 1.5rem; align-items: center; border-bottom: 1px solid rgba(228,241,249,.18); }
@media (min-width: 48rem) { .foot-cta { grid-template-columns: 1.4fr 1fr; padding-inline: 1.5rem; } .foot-cta-act { justify-items: end; } }
.foot-slogan { margin: 0; color: #fff; font-weight: 800; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; text-wrap: balance; }
.foot-cta-copy p + p { margin: .5rem 0 0; color: #cfe6f5; }
.foot-cta-act { display: grid; gap: .6rem; justify-items: start; }
.foot .foot-phone { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; border-radius: 999px; background: var(--bright); color: #fff; font-weight: 800; font-size: 1.25rem; text-decoration: none; min-height: 52px; }
.foot .foot-phone:hover { background: #126aa5; }
.foot .foot-phone svg { width: 1.15em; height: 1.15em; fill: currentColor; }
.foot .foot-mail { padding: .3rem 0; color: #cfe6f5; }
.foot-remis { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; border-bottom: 1px solid rgba(228,241,249,.18); }
.foot .foot-remi { display: grid; justify-items: center; gap: .35rem; padding: .6rem .25rem; border-radius: 16px; text-decoration: none; color: #fff; font-weight: 700; font-size: .92rem; text-align: center; transition: background .2s, transform .2s; }
.foot .foot-remi img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
.foot .foot-remi:hover { background: rgba(228,241,249,.08); transform: translateY(-3px); }
.foot .fr-fire span { color: #ffb36b; } .foot .fr-mold span { color: #a9d37c; } .foot .fr-build span { color: #e0b27c; } .foot .fr-water span { color: #8ccaf5; }
@media (min-width: 48rem) { .foot-remis { padding-inline: 1.5rem; } .foot .foot-remi img { width: 96px; height: 96px; } }
@media (min-width: 64rem) { .foot-in { grid-template-columns: 1.5fr 1.2fr 1fr 1fr; } }
.foot-brand .brand { display: flex; align-items: center; gap: .5rem; }
.foot-brand .brand svg { width: 1.4rem; height: 1.4rem; stroke: #8ccaf5; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.foot-brand p:last-child { color: #cfe6f5; max-width: 34ch; }
.foot a[aria-current="page"] { color: #8ccaf5; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; color: #cfe6f5; }
.foot .foot-top { padding: .4rem 0; color: #fff; font-weight: 600; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .foot .foot-remi { transition: none; } .foot .foot-remi:hover { transform: none; } }
.foot-in a, .foot .foot-mail { text-decoration: none; }
.foot-in a:hover, .foot .foot-mail:hover, .foot .foot-top:hover { text-decoration: underline; text-underline-offset: 3px; }
.foot-in h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #8ccaf5; }

/* Liquid Remi hero (js/liquid-engine.js + js/remi-hero.js): Remi rebuilt from particles that
   turn to water, fire, mold or wood under the cursor or a finger. Static Remi without WebGL2. */
.lq { position: relative; height: calc(100svh - 4.5rem); min-height: 560px; max-height: 980px; overflow: hidden; color: #fff; background: #0f3a5c; touch-action: pan-y; }
.lq-fire { background: #3a1260; }
.lq-mold { background: #2a1b63; }
.lq-build { background: #4a1a5a; }
.lq-stage { position: absolute; inset: 0; }
.lq-img { position: absolute; left: 50%; top: 4%; width: min(92vw, 640px); height: auto; max-height: 56%; object-fit: contain; transform: translateX(-50%); transition: opacity .4s; }
.lq[data-gl] .lq-img { transform: none; max-height: none; }
@media (min-width: 900px) { .lq-img { left: 52%; top: 8%; width: 44vw; max-height: 84%; transform: none; } }
.lq-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.lq[data-gl="on"] .lq-canvas { opacity: 1; }
.lq[data-gl="on"] .lq-img { opacity: 0; }
.lq-copy { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: 7svh; display: grid; gap: .9rem; max-width: 36rem; pointer-events: none; }
.lq-copy > * { pointer-events: auto; }
@media (min-width: 900px) { .lq-copy { left: max(6vw, 1.5rem); bottom: auto; top: 50%; transform: translateY(-50%); } }
.lq-kicker { margin: 0; font-size: .85rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.lq-copy h1 { margin: 0; color: #fff; font-size: clamp(2.2rem, 7vw, 4.6rem); line-height: .98; letter-spacing: -.03em; text-wrap: balance; max-width: 14ch; }
.lq-copy p { margin: 0; font-size: 1.08rem; max-width: 34ch; color: rgba(255,255,255,.9); }
.lq-copy .lq-kicker { max-width: none; }
.lq-copy .call { justify-self: start; }
.lq-fire .btn-main, .lq-fire .call { background: #e2711d; } .lq-fire .btn-main:hover, .lq-fire .call:hover { background: #c95f12; }
.lq-mold .btn-main, .lq-mold .call { background: #5f8f34; } .lq-mold .btn-main:hover, .lq-mold .call:hover { background: #4f7a2b; }
.lq-build .btn-main, .lq-build .call { background: #a8743c; } .lq-build .btn-main:hover, .lq-build .call:hover { background: #8f6231; }
.lq-hint { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); top: 1.25rem; margin: 0; font-size: .8rem; opacity: .7; }
@media (max-width: 899px) { .lq-hint { display: none; } }
/* mold: neon green accent on the indigo-violet ground (a neon ground would hide the green Remi) */
.lq-mold .btn-main, .lq-mold .call { background: #3dff8a; color: #0b2a14; }
.lq-mold .btn-main:hover, .lq-mold .call:hover { background: #22e070; }
.lq-mold .lq-kicker { color: #3dff8a; opacity: 1; }
/* phones: Remi block on top, copy below it, nothing under the fold */
@media (max-width: 899px) {
  .lq { height: auto; min-height: 0; max-height: none; padding-bottom: 2.25rem; }
  .lq-stage { position: relative; inset: auto; height: min(36svh, 20rem); }
  .lq-copy { gap: .7rem; }
  .lq-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .lq-copy { position: relative; left: auto; right: auto; bottom: auto; padding: 0 max(16px, env(safe-area-inset-left, 0px)); max-width: none; pointer-events: auto; }
  .lq-copy h1 { max-width: none; }
  .lq-img { left: 50%; top: 0; width: auto; height: 100%; max-width: 94%; max-height: none; transform: translateX(-50%); }
}
/* hero image placed by CSS only (the particles fit to it: no layout shift) */
.lq-img { left: 50%; top: 4%; width: auto; height: 88%; max-width: 92%; transform: translateX(-50%); }
@media (min-width: 900px) { .lq-img { left: auto; right: 4vw; top: 9%; height: 82%; width: auto; max-width: 48vw; transform: none; } }
@media (max-width: 899px) { .lq-img { top: 0; height: 100%; } }
.lq[data-gl] .lq-img { transform: translateX(-50%); }
@media (min-width: 900px) { .lq[data-gl] .lq-img { transform: none; } }
/* contrast: white text on the fire and wood buttons */
.lq-fire .btn-main, .lq-fire .call { background: #c2410c; } .lq-fire .btn-main:hover, .lq-fire .call:hover { background: #9a3412; }
.lq-build .btn-main, .lq-build .call { background: #8a5a2b; } .lq-build .btn-main:hover, .lq-build .call:hover { background: #6f4822; }

/* Pastel theme (Mark, 2026-10-19: "green, purple, blue, light pastel colors").
   Light pastel grounds that take turns, dark ink on all of them; the call button stays call blue. */
:root { --light: #e3eefb; --sky: #dcebfa; --lav: #ece6fb; --mint: #e0f4e8; --tint: #e8e0fa; --violet: #5b3fb0; --leaf: #22603a; }
body { background: linear-gradient(180deg, #f7f5ff 0%, #ffffff 30%); }
.services { background: var(--mint); }
.form, .sl-band, .next { background: var(--lav); }
.sl-area, .job { background: var(--mint); }
.sl-two .sl-card:nth-child(2n) { background: var(--lav); }
.sl-rel li:nth-child(3n+2) a { background: var(--lav); } .sl-rel li:nth-child(3n) a { background: var(--mint); }
.eyebrow { color: var(--violet); }
.sl-trust svg { stroke: var(--leaf); }
.form input, .form select, .form textarea, .pf-tools select { border-color: #c9bdf0; }
.form button, .skip { background: var(--violet); }
.first, .sl-card.is-deep { background: var(--lav); color: var(--ink); }
.sl-card.is-deep p { color: var(--ink-soft); }

/* the project showcase band: mint, dark words */
.sl-show { background: var(--mint); color: var(--ink); }
.sl-show .eyebrow { color: var(--leaf); }
.sl-show .sl-intro { color: var(--ink-soft); }
.sl-show a { color: var(--ink); }
.sl-reel figure { background: #cdeadb; }
.sl-reel figcaption { color: #fff; }
.sl-show .sl-slot { background: rgba(255,255,255,.6); border-color: #9fd3b4; }
.sl-show .sl-slot p { color: var(--ink-soft); } .sl-show .sl-slot b { color: var(--ink); }

/* Remi heroes without a photo: pastel, dark words */
.sl-hero.is-remi { background: radial-gradient(90% 80% at 75% 30%, #f3efff 0%, var(--lav) 70%); color: var(--ink); }
.sl-hero.is-remi p { color: var(--ink-soft); } .sl-hero.is-remi .slogan { color: var(--violet); }
.sl-hero.is-remi .btn-ghost { border-color: var(--ink); color: var(--ink); }
.sl-hero.is-remi .btn-ghost:hover { background: var(--ink); color: #fff; }
.sl-hero.is-remi img { filter: drop-shadow(0 18px 30px rgba(91,63,176,.25)); }

/* liquid Remi heroes: lavender (water, mold), sky (fire), mint (wood); grounds = scripts/remi_flat.py */
.lq { background: #e8e0fa; color: var(--ink); }
.lq-fire { background: #dcebfa; } .lq-mold { background: #e8e0fa; } .lq-build { background: #dcf3e6; }
.lq-copy h1 { color: var(--ink); }
.lq-copy p { color: var(--ink-soft); }
.lq-kicker { color: var(--violet); opacity: 1; }
.lq-mold .lq-kicker { color: var(--leaf); }
.lq-build .lq-kicker { color: var(--leaf); }
.lq .btn-ghost { border-color: var(--ink); color: var(--ink); }
.lq .btn-ghost:hover { background: var(--ink); color: #fff; }
.lq-mold .btn-main, .lq-mold .call { background: var(--leaf); color: #fff; }
.lq-mold .btn-main:hover, .lq-mold .call:hover { background: #245f37; }

/* footer: a soft blue, purple and green wash, dark words */
.foot { background: linear-gradient(135deg, var(--sky) 0%, var(--lav) 50%, var(--mint) 100%); color: var(--ink-soft); }
.foot h2, .foot a, .foot .brand, .foot-slogan, .foot .foot-top { color: var(--ink); }
.foot-in h2 { color: var(--violet); }
.foot-cta-copy p + p, .foot .foot-mail, .foot-brand p:last-child, .foot-base { color: var(--ink-soft); }
.foot-cta, .foot-remis { border-color: rgba(91,63,176,.18); }
.foot-base { border-top-color: rgba(91,63,176,.18); }
.foot .foot-remi { color: var(--ink); }
.foot .foot-remi:hover { background: rgba(255,255,255,.55); }
.foot .foot-remi img { filter: drop-shadow(0 6px 12px rgba(91,63,176,.22)); }
.foot .fr-water span { color: #1566a3; } .foot .fr-fire span { color: #b13d0b; } .foot .fr-mold span { color: var(--leaf); } .foot .fr-build span { color: #7a4f22; }
.foot-brand .brand svg { stroke: var(--violet); }
.foot a[aria-current="page"] { color: var(--violet); }

/* Brand colours from the original remediaterenovation.com stylesheet (read 2026-10-19):
   indigo #4f51a1 (bold text, numbers), sky #58a1d2, navy #191b6e (headings), teal #39c5b7
   (teal-to-indigo heading accent), lavender #dcdcec / #f6f6fa. The pastels below are made
   from those hues; every text colour keeps 4.5:1 on its ground. */
:root {
  --deep: #191b6e; --ink: #191b6e; --ink-soft: #3a3c78; --quiet: #4f51a1;
  --bright: #4f51a1; --violet: #4f51a1; --leaf: #1b6a63; --teal: #39c5b7; --skyb: #58a1d2;
  --light: #e1eef8; --sky: #e1eef8; --lav: #ececf6; --mint: #dcf4f1; --tint: #e6e6f3;
}
body { background: linear-gradient(180deg, #f6f6fa 0%, #ffffff 30%); }
::selection { background: #c9e2f3; color: var(--ink); }
.call:hover, .btn-main:hover, .foot .foot-phone:hover { background: var(--deep); }
.sl h2::after { content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .7rem; border-radius: 4px; background: linear-gradient(90deg, var(--teal), var(--violet)); }
.sl-show .sl-slot { border-color: #9ad9d0; }
.sl-reel figure { background: #c9ece7; }
.form input, .form select, .form textarea, .pf-tools select { border-color: #c4c5e4; }
.lq { background: #e6e6f3; }
.lq-fire { background: #e1eef8; } .lq-mold { background: #e6e6f3; } .lq-build { background: #dcf4f1; }
.sl-hero.is-remi { background: radial-gradient(90% 80% at 75% 30%, #f6f6fa 0%, var(--lav) 70%); }
.foot .fr-water span { color: #2b6c99; }
.foot-cta, .foot-remis, .foot-base { border-color: rgba(79,81,161,.2); }
.sl-card.is-deep a { color: var(--violet); font-weight: 700; }

/* Home: demo A layout (Mark, 2026-10-19), after 21st.dev Services Stack, Growth Story Timeline and
   Portfolio Scroll Grid; js/home.js scales the panels and fills the timeline line. */
.a-stack { position: relative; padding: 4rem 1rem 2rem; max-width: 72rem; margin: 0 auto; }
.a-stack > header { margin-bottom: 2rem; }
.a-stack h2, .a-time h2, .a-work h2 { margin: 0 0 .5rem; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); }
.a-panel { position: sticky; top: calc(var(--head) + 1rem); display: grid; gap: 1.25rem; align-items: center; min-height: min(70svh, 34rem); margin-bottom: 1.5rem; padding: 2rem 1.5rem; border-radius: 28px; transform-origin: 50% 0; box-shadow: 0 -6px 30px rgba(25,27,110,.08); }
@media (min-width: 48rem) { .a-panel { grid-template-columns: 1.1fr 1fr; padding: 3rem; } }
.a-panel img { width: min(100%, 22rem); height: auto; justify-self: center; }
.a-panel h3 { margin: 0 0 .6rem; font-size: clamp(1.7rem, 4.5vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; color: var(--ink); }
.a-panel p { margin: 0 0 1.2rem; max-width: 34ch; color: var(--ink-soft); font-size: 1.1rem; }
.a-panel .chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.a-panel .chips li { padding: .35rem .8rem; border-radius: 999px; background: rgba(255,255,255,.7); font-size: .9rem; font-weight: 600; color: var(--ink); }
.p-water { background: #e6e6f3; } .p-fire { background: #e1eef8; } .p-mold { background: #e9e6f6; } .p-build { background: #dcf4f1; }
.a-num { display: block; margin-bottom: .4rem; font-weight: 800; color: var(--violet); letter-spacing: .08em; font-size: .85rem; }

.a-time { max-width: 72rem; margin: 0 auto; padding: 4rem 1rem; }
.a-rail { position: relative; list-style: none; margin: 2.5rem 0 0; padding: 0; }
.a-rail::before, .a-rail::after { content: ""; position: absolute; top: 0; bottom: 0; left: 1.1rem; width: 4px; border-radius: 4px; background: #dcdcec; }
.a-rail::after { bottom: auto; height: calc(var(--p, 0) * 100%); background: linear-gradient(var(--teal), var(--violet)); }
.a-rail li { position: relative; display: grid; gap: 1rem; margin: 0 0 2.5rem; padding-left: 3.25rem; }
.a-rail li::before { content: attr(data-n); position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; border: 3px solid var(--violet); font-weight: 800; color: var(--violet); }
.a-rail figure { margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 4 / 3; background: var(--lav); }
.a-rail img { width: 100%; height: 100%; object-fit: cover; }
.a-rail h3 { margin: 0 0 .3rem; font-size: 1.4rem; color: var(--ink); }
.a-rail p { margin: 0; color: var(--ink-soft); }
.a-rail .when { display: block; margin-bottom: .3rem; font-size: .85rem; font-weight: 700; color: var(--leaf); }
@media (min-width: 56rem) {
  .a-rail::before, .a-rail::after { left: calc(50% - 2px); }
  .a-rail li { grid-template-columns: 1fr 1fr; gap: 4rem; padding-left: 0; align-items: center; }
  .a-rail li::before { left: calc(50% - 1.25rem); top: 50%; transform: translateY(-50%); }
  .a-rail li:nth-child(even) figure { order: 2; }
}
.a-rail.anim li { opacity: 0; transform: translateY(24px); transition: opacity .6s, transform .6s; }
.a-rail.anim li.in { opacity: 1; transform: none; }

.a-work { position: relative; padding: 2rem 1rem 6rem; }
.a-work .big { position: sticky; top: 40svh; z-index: 0; margin: 0; text-align: center; font-size: clamp(3rem, 14vw, 10rem); font-weight: 900; line-height: .9; letter-spacing: -.05em; color: var(--ink); }
.a-work .big small { display: block; font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--violet); }
.a-grid { position: relative; z-index: 1; display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 72rem; margin: 30svh auto 0; }
@media (min-width: 48rem) { .a-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-grid figure { margin: 0; overflow: hidden; border-radius: 18px; box-shadow: 0 10px 30px rgba(25,27,110,.18); }
.a-grid figure:nth-child(4n+2) { margin-top: 5rem; } .a-grid figure:nth-child(4n+3) { margin-top: 2rem; } .a-grid figure:nth-child(4n) { margin-top: 7rem; }
.a-grid img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.a-work .more { position: relative; z-index: 1; margin: 2.5rem 0 0; text-align: center; }

.a-cta { margin: 0 1rem; padding: 3rem 1.5rem; border-radius: 28px; text-align: center; background: linear-gradient(135deg, var(--sky), var(--lav) 55%, var(--mint)); }
.a-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.9rem, 5vw, 3rem); color: var(--ink); }
.a-cta p { margin: 0 auto 1.5rem; max-width: 40ch; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .a-rail li { opacity: 1; transform: none; transition: none; } .a-panel { transform: none !important; } }
.a-stack > header .sl-intro { margin-bottom: 0; }
.a-more { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.a-more a { display: block; height: 100%; padding: 1.25rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid #dcdcec; text-decoration: none; color: var(--ink); transition: border-color .2s, transform .2s; }
.a-more a:hover { border-color: var(--violet); transform: translateY(-3px); }
.a-more b { display: block; font-size: 1.1rem; } .a-more small { color: var(--ink-soft); }
.a-rail .ch-link { display: inline-block; margin-top: .6rem; color: var(--violet); font-weight: 700; }
.a-work-note { position: relative; z-index: 1; max-width: var(--measure); margin: 2.5rem auto 0; padding: 1.5rem; border-radius: 22px; background: rgba(255,255,255,.92); text-align: center; color: var(--ink-soft); }
.a-work-note p { margin: 0 0 1rem; } .a-work-note p:last-child { margin: 0; }
@media (prefers-reduced-motion: reduce) { .a-more a { transition: none; } }

/* breadcrumbs (scripts/site_chrome.py): Home › Services › this page, arrows never bullets */
.crumbs { max-width: 72rem; margin: 0 auto; padding: .6rem 1rem; font-size: .88rem; }
@media (min-width: 48rem) { .crumbs { padding-inline: 1.5rem; } }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem; margin: 0; padding: 0; }
.crumbs li { display: inline-flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; }
.crumbs li + li::before { content: "›"; color: var(--violet); font-weight: 700; font-size: 1.05em; }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-soft); font-weight: 500; text-decoration: none; }
.crumbs a:hover { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* project hero: the job's photos curving past (js/tilted-grid.js, after 21st.dev Tilted Grid Hero) */
.tgh-hero { position: relative; height: clamp(30rem, 74svh, 40rem); margin: 0 0 2rem; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, var(--lav) 0%, #f6f6fa 100%); }
.tgh-copy { position: relative; z-index: 1; padding: 2.25rem 1.25rem 0; text-align: center; }
.tgh-copy h1 { margin: 0 auto .6rem; }
.tgh-copy .lead { margin: 0 auto; max-width: 46ch; }
.tgh-copy .kicker { margin-bottom: .5rem; }

/* Our work hero: the work as a wheel you turn (js/works-wheel.js, after 21st.dev Works Wheel) */
.ww { position: relative; height: clamp(30rem, 78svh, 46rem); margin: 0 0 1.5rem; overflow: hidden; border-radius: 28px; background: radial-gradient(70% 70% at 50% 45%, #fff 0%, var(--lav) 60%, var(--sky) 100%); user-select: none; -webkit-user-select: none; }
.ww-label { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; max-width: none; font-size: clamp(1.8rem, 5vw, 3rem); letter-spacing: -.03em; color: var(--ink); pointer-events: none; }
.ww:not(.is-live) .ww-label { position: static; padding: 3rem 1rem; }
.ww-stage { position: absolute; inset: 0; cursor: grab; touch-action: pan-x; outline: none; }
.ww-stage:active { cursor: grabbing; }
.ww-stage:focus-visible { box-shadow: inset 0 0 0 3px var(--violet); border-radius: 28px; }
.ww-wheel { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; }
.ww-card { position: absolute; backface-visibility: hidden; display: block; }
.ww-face { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 14px; background: var(--lav); box-shadow: 0 18px 40px -18px rgba(25,27,110,.45); }
.ww-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ww-go { position: absolute; right: .6rem; bottom: .6rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--ink); font-size: .8rem; font-weight: 700; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.ww-card:hover .ww-go, .ww-card:focus-visible .ww-go { opacity: 1; transform: none; }
.ww-title { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); max-width: 26%; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--ink); opacity: 0; pointer-events: none; }
.ww-index { position: absolute; top: 6%; right: 2.5%; margin: 0; padding: 0; list-style: none; text-align: right; line-height: 1.7; }
.ww-index button { appearance: none; border: 0; background: none; padding: .1rem 0; font: inherit; color: var(--ink-soft); cursor: pointer; }
.ww-index button.on { color: var(--violet); font-weight: 800; }
.ww-index button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.ww-hint { position: absolute; left: 0; right: 0; bottom: 1.25rem; margin: 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--violet); pointer-events: none; }
@media (max-width: 47.99rem) {
  .ww-title { left: 50%; top: auto; bottom: 1.25rem; transform: translateX(-50%); max-width: 90%; text-align: center; }
  .ww-index { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ww-go { transition: none; } }

/* prints on a string (js/polaroid-line.js, after 21st.dev Polaroid Line Carousel); brand colours */
.pl-head { margin: 3rem 0 .5rem; }
.pl { position: relative; width: 100%; height: clamp(30rem, 80svh, 42rem); margin: 0 0 2rem; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, var(--sky) 0%, var(--lav) 100%); color: var(--ink); user-select: none; -webkit-user-select: none; touch-action: pan-y; outline: none; cursor: grab; }
.pl[data-drag="1"] { cursor: grabbing; }
.pl:focus-visible { box-shadow: inset 0 0 0 3px var(--violet); }
.pl-string { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; stroke: #6b6aa8; }
.pl-card { position: absolute; left: 0; top: 0; width: var(--pl-cw, 300px); transform-origin: 50% 0; will-change: transform; }
.pl-print { margin-top: 10px; background: #fbfaf7; padding: 10px 10px 0; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 18px 30px -16px rgba(25,27,110,.45); transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .5s ease; }
.pl-card[data-on="0"] .pl-print { transform: scale(.9); filter: saturate(.7) brightness(.96); }
.pl-shot { position: relative; aspect-ratio: 1; overflow: hidden; background: #d9d5cc; }
.pl-shot img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; pointer-events: none; }
.pl-note { height: 46px; display: flex; align-items: center; justify-content: center; padding: 0 6px; font: italic 400 17px/1.1 ui-serif, Georgia, "Times New Roman", serif; color: #3b3833; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-peg { position: absolute; left: 50%; top: 0; width: 10px; height: 26px; margin-left: -5px; border-radius: 2px; background: linear-gradient(90deg, #c9a67a, #e3c9a1 45%, #b8915f); box-shadow: 0 2px 3px rgba(0,0,0,.25); }
.pl-bar { position: absolute; left: clamp(16px, 4vw, 40px); right: clamp(16px, 4vw, 40px); bottom: clamp(16px, 3vh, 28px); display: flex; align-items: center; gap: clamp(10px, 2vw, 20px); cursor: default; }
.pl-cap { flex: 1; min-width: 0; overflow: hidden; }
.pl-cap > * { display: block; animation: pl-in .55s cubic-bezier(.2,.8,.2,1) both; }
.pl-title { font-size: clamp(1.2rem, 2.2vw, 1.6rem); font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-sub { margin-top: 2px; font-size: .95rem; color: var(--ink-soft); }
.pl-count { font: 600 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: var(--ink-soft); }
.pl-count b { color: var(--violet); }
.pl-btn { appearance: none; width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid rgba(79,81,161,.35); background: rgba(255,255,255,.7); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .2s, color .2s; }
.pl-btn:hover { background: var(--violet); color: #fff; }
.pl-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.pl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes pl-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 30rem) { .pl-count { display: none; } }
@media (prefers-reduced-motion: reduce) { .pl-cap > * { animation: none; } .pl-print, .pl-btn { transition: none; } }
.ww .ww-label { max-width: none; width: 100%; text-align: center; }
@media (max-width: 47.99rem) { .tgh-hero { height: 46rem; } .tgh-copy .lead { font-size: 1rem; } }

/* home guides, laid out after 21st.dev Blog7: three cards, each a link to real advice on a service page */
.guides-head { text-align: center; max-width: 46rem; margin: 0 auto 2.5rem; }
.guides-head h2 { margin-inline: auto; }
.guides-head h2::after { margin-inline: auto; }
.guides-head .sl-intro { margin: 0 auto 1rem; }
.guides-badge { display: inline-block; margin-bottom: 1rem; padding: .3rem .85rem; border-radius: 999px; background: var(--lav); color: var(--violet); font-size: .8rem; font-weight: 800; letter-spacing: .04em; }
.guides-all, .guide-more { color: var(--violet); font-weight: 700; text-decoration: none; }
.guides-all:hover, .guide-more:hover, .guide h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.guides-grid { display: grid; gap: 1.5rem; }
@media (min-width: 48rem) { .guides-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .guides-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.guide { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid #dcdcec; box-shadow: 0 10px 30px -20px rgba(25,27,110,.35); }
.guide-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--lav); }
.guide-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s, transform .4s; }
.guide-img:hover img { opacity: .85; transform: scale(1.03); }
.guide-body { display: grid; grid-template-rows: auto auto 1fr auto; gap: .6rem; padding: 1.25rem 1.4rem 1.4rem; }
.guide-tag { justify-self: start; padding: .2rem .65rem; border-radius: 999px; background: var(--mint); color: var(--leaf); font-size: .78rem; font-weight: 800; }
.guide h3 { margin: 0; font-size: 1.2rem; line-height: 1.25; }
.guide h3 a { color: var(--ink); text-decoration: none; }
.guide p { margin: 0; color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .guide-img img { transition: none; } }
.ww-hint { top: 1.25rem; bottom: auto; left: 1.5rem; right: auto; text-align: left; }

/* ===== Locked brand colours (Mark, 2026-10-19) =====================================================
   Only these, for every text, button and background: navy #191b6e, indigo #4f51a1, sky #58a1d2,
   teal #39c5b7, lavender #dcdcec, near-white #f6f6fa, white. Text is navy or indigo; grounds are
   white, #f6f6fa or #dcdcec; sky and teal are accents only (lines, small tags). No other hues. */
:root {
  --deep: #191b6e; --ink: #191b6e; --ink-soft: #191b6e; --quiet: #4f51a1; --bright: #4f51a1; --violet: #4f51a1;
  --leaf: #191b6e; --teal: #39c5b7; --skyb: #58a1d2;
  --paper: #ffffff; --light: #f6f6fa; --sky: #f6f6fa; --lav: #dcdcec; --mint: #f6f6fa; --tint: #dcdcec;
}
body { background: #ffffff; color: #191b6e; }
::selection { background: #58a1d2; color: #ffffff; }
.sl-intro, .sl-card p, .sl-list p, .a-panel p, .a-rail p, .guide p, .faq p, .foot-base, .foot-brand p:last-child, .foot-cta-copy p + p, .foot .foot-mail, .lq-copy p { color: #191b6e; }
.eyebrow, .lq-kicker, .lq-mold .lq-kicker, .lq-build .lq-kicker, .sl-show .eyebrow, .foot-in h2, .a-num, .a-rail .when { color: #4f51a1; }
/* grounds */
.lq, .lq-fire, .lq-mold, .lq-build, .lq-water { background: #dcdcec; }
.p-water, .p-mold { background: #dcdcec; } .p-fire, .p-build { background: #f6f6fa; }
.services, .form, .sl-band, .next, .sl-area, .job, .sl-card, .first, .sl-card.is-deep, .sl-show, .sl-hero.is-remi { background: #f6f6fa; color: #191b6e; }
.sl-two .sl-card:nth-child(2n), .sl-rel li:nth-child(3n+2) a, .sl-rel li:nth-child(3n) a, .sl-rel a { background: #f6f6fa; }
.sl-show .sl-intro, .sl-card.is-deep p, .sl-show a { color: #191b6e; }
.ww { background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, #f6f6fa 55%, #dcdcec 100%); }
.foot { background: linear-gradient(180deg, #f6f6fa 0%, #dcdcec 100%); color: #191b6e; }
.foot .fr-water span, .foot .fr-fire span, .foot .fr-mold span, .foot .fr-build span { color: #191b6e; }
.a-cta, .c-end { background: #dcdcec; }
/* one button colour: indigo, navy on hover; white words */
.call, .btn-main, .foot .foot-phone, .form button, .skip,
.lq-fire .btn-main, .lq-fire .call, .lq-mold .btn-main, .lq-mold .call, .lq-build .btn-main, .lq-build .call { background: #4f51a1; color: #ffffff; }
.call:hover, .btn-main:hover, .foot .foot-phone:hover, .form button:hover,
.lq-fire .btn-main:hover, .lq-fire .call:hover, .lq-mold .btn-main:hover, .lq-mold .call:hover, .lq-build .btn-main:hover, .lq-build .call:hover { background: #191b6e; color: #ffffff; }
.btn-ghost, .lq .btn-ghost, .sl-hero.is-remi .btn-ghost { border-color: #191b6e; color: #191b6e; }
.btn-ghost:hover, .lq .btn-ghost:hover, .sl-hero.is-remi .btn-ghost:hover { background: #191b6e; color: #ffffff; }
/* accents: teal and sky only as lines and small tags */
.guide-tag { background: #39c5b7; color: #191b6e; }
.guides-badge { background: #dcdcec; color: #191b6e; }
.sl-trust svg { stroke: #4f51a1; }
.sl-list, .sl-list li, .sl-hub a, .faq details, .guide, .a-more a, .form input, .form select, .form textarea, .pf-tools select { border-color: #dcdcec; }
.ch-rail li::before { background: #dcdcec; } .ch-rail li.on::before { background: #4f51a1; }
.photo figcaption, .pair span, .ba-tag, .ch figcaption { background: rgba(25,27,110,.88); }
.seq-cap { background: linear-gradient(transparent, rgba(25,27,110,.88)); }
.sl-reel figcaption { background: linear-gradient(transparent, rgba(25,27,110,.9)); }
.ww-face, .guide-img, .seq-stage, .photo, .ba { background: #dcdcec; }
.note-card { padding: 1rem 1.2rem; border-radius: 16px; background: #f6f6fa; color: #191b6e; }
.note-card b { display: block; color: #4f51a1; }
.sl-mats { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.ww-inline { margin: 1.5rem 0 1rem; }
.ww-more { margin: 0; text-align: center; }
/* the story timeline without photos: steps take turns either side of the line on wide screens */
@media (min-width: 56rem) {
  .a-rail li > div { grid-column: 1; text-align: right; }
  .a-rail li:nth-child(even) > div { grid-column: 2; text-align: left; }
}

/* ===== Pastel layer (Mark, 2026-10-19: "that's the style, lock it… use the pastel colours more") ====
   Soft tints made only from the brand hues, layered on the locked palette above:
     lavender tint #ececf6 (indigo), sky tint #e3f0f9 (sky #58a1d2), teal tint #dff5f2 (teal #39c5b7),
     plus lavender #dcdcec and near-white #f6f6fa. Words stay navy/indigo, buttons indigo.
   Sections take turns as full-width pastel bands down each page; cards on a band go white. */
:root { --p-lav: #ececf6; --p-sky: #e3f0f9; --p-teal: #dff5f2; --p-lav2: #dcdcec; }
.band-lav, .band-sky, .band-teal { box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); margin-top: 4rem; padding-bottom: 4rem; }
.band-lav { --band: var(--p-lav); } .band-sky { --band: var(--p-sky); } .band-teal { --band: var(--p-teal); }
/* home: hero, then the bands alternate */
.home .a-time { --band: var(--p-sky); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.sl:has(> .az) { --band: var(--p-lav); }
.sl:has(> .ww) { --band: var(--p-teal); }
.areas { --band: var(--p-sky); }
.sl.guides { --band: var(--p-lav); }
.sl:has(> .faq) { --band: var(--p-teal); }
.sl:has(> .sl-end) { --band: var(--p-lav); }
/* service pages */
.sl:has(> .sl-two) { --band: var(--p-sky); }
.sl:has(> .sl-list) { --band: var(--p-lav); }
.sl:has(> .sl-steps) { --band: var(--p-teal); }
.sl:has(> .sl-mats) { --band: var(--p-sky); }
.sl:has(> .sl-rel) { --band: var(--p-lav); }
.sl:has(> .az), .sl:has(> .ww), .areas, .sl.guides, .sl:has(> .faq), .sl:has(> .sl-end),
.sl:has(> .sl-two), .sl:has(> .sl-list), .sl:has(> .sl-steps), .sl:has(> .sl-mats), .sl:has(> .sl-rel) {
  box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); margin-top: 0; padding-bottom: 4rem;
}
.areas { padding-top: 3rem; margin-top: 0; }
.sl-band { background: var(--p-sky); }
.sl-show { background: var(--p-teal); }
/* cards and panels: pastel, white when they sit on a band */
.sl-card, .note-card, .sl-rel a, .a-more a, .guide, .faq details, .form, .sl-area, .next, .job, .first, .sl-card.is-deep { background: #ffffff; }
.sl-two .sl-card:nth-child(4n+1) { background: #ffffff; } .sl-two .sl-card:nth-child(4n+2) { background: var(--p-lav); }
.sl-two .sl-card:nth-child(4n+3) { background: var(--p-teal); } .sl-two .sl-card:nth-child(4n) { background: #ffffff; }
.note-card:nth-child(3n+2) { background: var(--p-lav); } .note-card:nth-child(3n) { background: var(--p-teal); }
.p-water { background: var(--p-lav); } .p-fire { background: var(--p-sky); } .p-mold { background: var(--p-lav2); } .p-build { background: var(--p-teal); }
.guide-tag { background: var(--p-teal); color: #191b6e; border: 1px solid #39c5b7; }
.a-panel .chips li { background: #ffffff; }
.ww { background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, var(--p-lav) 55%, var(--p-sky) 100%); }
.sl:has(> .ww) .ww { background: radial-gradient(70% 70% at 50% 45%, #ffffff 0%, var(--p-sky) 60%, var(--p-lav) 100%); }
.foot { background: linear-gradient(135deg, var(--p-sky) 0%, var(--p-lav) 50%, var(--p-teal) 100%); }
/* each Remi on its own pastel (scripts/remi_flat.py GROUND) */
.lq, .lq-water { background: #ececf6; } .lq-fire { background: #e3f0f9; } .lq-mold { background: #ececf6; } .lq-build { background: #dff5f2; }
/* project and Our work pages: pastel steps and closing card */
.stages > li { padding: 1.5rem 1.5rem 1.25rem; margin-bottom: 1rem; border-radius: 22px; background: var(--p-sky); }
.stages > li:nth-child(3n+2) { background: var(--p-lav); } .stages > li:nth-child(3n) { background: var(--p-teal); }
.page .next { background: var(--p-lav); }
/* timeline steps always visible (the line still fills as you scroll) */
.a-rail.anim li, .a-rail.anim li.in { opacity: 1; transform: none; transition: none; }
.sl-rel a { grid-template-rows: 1fr; padding: 1.25rem 1.4rem; }

/* ===== Morph Gallery: the project photo gadget (js/morph-gallery.js, after 21st.dev Morph Gallery) =====
   One per page, all of that page's job photos. Navy frame (locked colours), white words over a navy
   fade, indigo-on-white arrows and the photo strip. */
.mg { position: relative; width: 100%; height: clamp(26rem, 72svh, 44rem); margin: 1.5rem 0 1rem; overflow: hidden; border-radius: 28px; background: #191b6e; outline: none; touch-action: pan-y; }
.mg:focus-visible { box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #4f51a1; }
.mg-canvas, .mg-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.mg-canvas { opacity: 0; transition: opacity .4s ease; }
.mg.is-ready .mg-canvas { opacity: 1; }
.mg-still { object-fit: cover; transition: opacity .7s; }
.mg-fade { position: absolute; inset: auto 0 0 0; z-index: 5; height: 15rem; background: linear-gradient(transparent, rgba(25,27,110,.8)); pointer-events: none; }
.mg-cap { position: absolute; left: clamp(1rem, 4vw, 2.5rem); right: clamp(1rem, 4vw, 2.5rem); bottom: 6.25rem; z-index: 10; display: grid; gap: .25rem; justify-items: start; color: #ffffff; pointer-events: none; }
.mg-count { font: 700 .8rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; color: #dcdcec; }
.mg-title { font-size: clamp(1.4rem, 3.4vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: #ffffff; }
.mg-link { pointer-events: auto; margin-top: .4rem; padding: .5rem 1rem; border-radius: 999px; background: #ffffff; color: #191b6e; font-weight: 700; text-decoration: none; }
.mg-link:hover { background: #dcdcec; }
.mg-arrow { position: absolute; top: 45%; z-index: 10; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: #191b6e; cursor: pointer; transform: translateY(-50%); transition: background .2s, color .2s; }
.mg-arrow:hover { background: #4f51a1; color: #ffffff; }
.mg-arrow:focus-visible, .mg-thumbs button:focus-visible, .mg-link:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }
.mg-prev { left: clamp(.75rem, 3vw, 2rem); } .mg-next { right: clamp(.75rem, 3vw, 2rem); }
.mg-thumbs { position: absolute; left: 0; right: 0; bottom: 1.25rem; z-index: 10; display: flex; gap: .5rem; width: max-content; max-width: calc(100% - 2rem); margin: 0 auto; padding: 0 0 .4rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.mg-thumbs li { flex: none; }
.mg-thumbs button { display: block; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .6; transition: opacity .2s, border-color .2s; }
.mg-thumbs button:hover { opacity: .9; }
.mg-thumbs button[aria-current="true"] { border-color: #ffffff; opacity: 1; }
.mg-thumbs img { display: block; width: 80px; height: 50px; max-width: none; object-fit: cover; }
.mg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 40rem) { .mg-thumbs { display: none; } .mg-cap { bottom: 1.5rem; } .mg-arrow { top: 40%; width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .mg-canvas, .mg-still, .mg-arrow, .mg-thumbs button { transition: none; } }
.sl:has(> .mg) { --band: var(--p-teal); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); margin-top: 0; padding-bottom: 4rem; }
.portfolio > .mg { height: clamp(28rem, 76svh, 46rem); }
.mg-linkslot { display: contents; }