/* generated by mockup-kit/luxe/finish.js; edit the kit, not this file */
:root {
  --ink: #0e1114;
  --ink-2: #171b20;
  --slate: #54606c;
  --slate-d: #3d4650;
  --blue: #1f4f78;
  --blue-d: #173c5c;
  --blue-l: #a9c4dc;
  --paper: #ffffff;
  --paper-2: #f4f5f6;
  --paper-3: #e8eaed;
  --line: #e3e6e9;
  --line-2: #eef0f2;
  --body: #3b4148;
  --muted: #5b626a;
  --on-dark: #eef0f2;
  --on-dark-2: #bcc3ca;
  --on-dark-3: #949ca5;
  --focus: #1f4f78;
  --focus-dark: #a9c4dc;
  --star: #c9a34e;
  --copper: #c9a34e;
  --sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --display-w: 800;
  --display-ls: -0.035em;
  --hero-case: uppercase;
  --hero-ls: .02em;
  --hero-photo: .34;
}

/*
  LUXE layer: loaded after styles.css + premium.css. Calmer, more premium pass:
  one brand accent instead of several, no glows or gradient text, fewer boxes,
  more air, and a display face. Per-site colours and fonts live in the token
  block that finish.js prepends to this file.
*/

/* ---------- type ---------- */
body { font-family: var(--sans); letter-spacing: -0.003em; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: var(--display-w, 700); letter-spacing: var(--display-ls, -0.028em); }
::selection { background: color-mix(in srgb, var(--blue) 20%, transparent); }

/* ---------- rhythm ---------- */
:root { --sec: clamp(5rem, 3.6rem + 5vw, 8.5rem); }
.alt { background: var(--paper-2); box-shadow: none; }
.section-head { margin-bottom: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
.section-head h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); line-height: 1.08; }
.section-head p { font-size: var(--fs-lg); color: var(--muted); }
.section-head .eyebrow, .eyebrow {
  color: var(--blue); letter-spacing: .2em; font-weight: 700; font-size: 0.72rem;
}

/* ---------- nav: quiet glass bar, fewer items ---------- */
.nav { padding: 14px var(--gutter) 0; }
.nav-inner {
  max-width: 1200px; outline: 0; border: 1px solid rgba(255,255,255,.6);
  background: rgba(255,255,255,.93);
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 30px rgba(0,0,0,.06);
}
.nav.scrolled .nav-inner { background: rgba(255,255,255,.92); box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 12px 40px rgba(0,0,0,.09); }
.nav-inner::after { display: none; }
.nav-links a:not(.nav-cta) { font-weight: 500; color: var(--body); background: none !important; }
.nav-links a:not(.nav-cta):hover, .nav-links a.active:not(.nav-cta) { color: var(--ink); }
.nav-links a.active:not(.nav-cta) { box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.nav-cta { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.nav-cta:hover { background: var(--blue) !important; }

/* ---------- buttons ---------- */
.btn { font-weight: 600; letter-spacing: 0; min-height: 52px; padding-inline: 1.75rem; }
.btn-primary { background: var(--blue); box-shadow: none; }
.btn-primary:hover { background: var(--blue-d); transform: translateY(-1px); box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 28%, transparent); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.4); backdrop-filter: none; -webkit-backdrop-filter: none; }
.btn-ghost:hover { background: #fff; color: var(--ink); border-color: #fff; transform: none; }
.btn-outline { box-shadow: none; }

/* ---------- hero: one calm dark stage, no colour haze ---------- */
.hero { background: var(--ink); min-height: min(100vh, 940px); }
.hero .glow, .scroll-cue { display: none; }
.hero .bg { opacity: var(--hero-photo, .38); }
.hero .shade {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--ink) 94%, transparent) 0%, color-mix(in srgb, var(--ink) 70%, transparent) 55%, color-mix(in srgb, var(--ink) 45%, transparent) 100%),
    linear-gradient(180deg, transparent 60%, var(--ink) 100%);
}
.hero .eyebrow { color: var(--on-dark-3); }
.hero h1 span {
  background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box;
  font-family: var(--display); font-weight: var(--display-w, 700);
  text-transform: var(--hero-case, uppercase); letter-spacing: var(--hero-ls, .02em);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) { .hero h1 span { color: #fff; } }
.hero p.sub { color: #fff; font-weight: 400; }
.hero p.sub em { color: var(--blue-l); font-style: normal; }
.hero p.lede { color: var(--on-dark-2); }
.hero-mark img { filter: drop-shadow(0 20px 50px rgba(0,0,0,.45)); }

/* credentials: a quiet inline row instead of glass tiles */
.chip-row { gap: 0; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); border-top: 1px solid rgba(255,255,255,.14); padding-top: var(--s-5); }
.chip {
  background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 0; padding: 0 clamp(1.25rem, 3vw, 2.5rem) 0 0; margin-right: clamp(1.25rem, 3vw, 2.5rem);
  border-right: 1px solid rgba(255,255,255,.14);
}
.chip:last-child { border-right: 0; margin-right: 0; }
.chip:hover { transform: none; }
.chip .n { color: #fff; font-family: var(--display); font-weight: var(--display-w, 700); font-size: var(--fs-2xl); }
.chip .n svg { fill: var(--star); }
.chip .l { color: var(--on-dark-3); letter-spacing: .14em; font-weight: 600; }
@media (max-width: 640px) {
  .chip { border-right: 0; margin-right: 0; padding: 0; width: 100%; padding-block: var(--s-2); border-bottom: 1px solid rgba(255,255,255,.1); }
  .chip:last-child { border-bottom: 0; }
}

/* the dark trust bar repeated the hero — gone */
.trust { display: none; }

/* ---------- cards: image-led, no box ---------- */
.cards { gap: clamp(2rem, 1.5rem + 1.5vw, 3rem) clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.card { background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.card:hover { transform: none; box-shadow: none; }
.card .ph { border-radius: var(--r-lg); aspect-ratio: 4 / 3; }
.card:hover .ph img { transform: scale(1.04); }
.card .body { padding: var(--s-5) 0 0; gap: var(--s-2); }
.card h3 { font-size: var(--fs-xl); }
.card .more { color: var(--ink); font-weight: 600; }
.card .more span { color: var(--blue); }

/* ---------- split / quote line ---------- */
.split img.shot { border-radius: var(--r-lg); box-shadow: 0 30px 60px -20px rgba(0,0,0,.25); }
.split h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); line-height: 1.1; }
.split .quoteline { border-left-color: var(--blue); font-family: var(--display); font-weight: 500; }

/* ---------- stats: numbers, not tiles ---------- */
.stats { gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { background: none; border: 0; border-radius: 0; box-shadow: none; padding: clamp(2rem, 1.5rem + 2vw, 3rem) var(--s-4); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat:hover { transform: none; box-shadow: none; }
.stat .n { color: var(--ink); font-family: var(--display); font-weight: var(--display-w, 700); }
@media (max-width: 760px) { .stat + .stat { border-left: 0; border-top: 1px solid var(--line); } }

/* ---------- gallery ---------- */
.gallery { gap: var(--s-4); }
.gallery figure { border-radius: var(--r-md); box-shadow: none; }

/* ---------- reviews ---------- */
.stars svg { fill: var(--star); }
.quote { border: 1px solid var(--line); box-shadow: none; background: #fff; border-radius: var(--r-lg); }
.quote:hover { transform: none; box-shadow: none; border-color: color-mix(in srgb, var(--blue) 35%, var(--line)); }
.quote p { font-family: var(--display); font-weight: 500; }
.carousel .slide p { font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.dots button.on::before { background: var(--ink); border-color: var(--ink); }

/* ---------- service areas: plain lists, no chip soup ---------- */
.county { box-shadow: none; background: #fff; }
.county .n { color: var(--blue); }
.county ul { gap: 4px 0; }
.county li { background: none; border: 0; padding: 0; color: var(--body); }
.county li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--muted); }

/* ---------- faq ---------- */
.faq summary { font-family: var(--display); font-weight: var(--display-w, 700); font-size: var(--fs-lg); }
.faq summary::after { border-color: var(--ink); width: 10px; height: 10px; border-width: 0 2px 2px 0; }

/* ---------- story / CTA / page heads: same calm dark ---------- */
.story, .cta-panel, .page-head, .footer { background: var(--ink); }
.story .shade { background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 86%, transparent), color-mix(in srgb, var(--ink) 96%, transparent)); }
.story .eyebrow, .page-head .crumb { color: var(--on-dark-3); }
.story h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); }
.cta-panel::before { display: none; }
.cta-panel h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; }
.cta-panel .btn-primary:hover { background: var(--blue-d); }
.page-head { padding-block: clamp(6rem, 5rem + 4vw, 9rem) clamp(4rem, 3rem + 3vw, 6rem); }
.page-head .shade { background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 94%, transparent), color-mix(in srgb, var(--ink) 62%, transparent)); }
.page-head h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4.25rem); line-height: 1.04; }

/* ---------- forms / info ---------- */
.info-card, .form-card { box-shadow: none; }
.checks svg { stroke: var(--blue); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid rgba(255,255,255,.06); }
.footer h4 { color: var(--on-dark); letter-spacing: .16em; }

/* ---------- nav floats over the first dark section instead of sitting on a white strip ---------- */
.nav { position: fixed; left: 0; right: 0; top: 0; }
.nav-logo, .nav-logo:hover { text-decoration: none; }
.hero-inner { padding-top: calc(var(--s-9) + 72px); }
main > .page-head:first-child, main > header.page-head { padding-top: clamp(8.5rem, 7rem + 4vw, 11rem); }
main > :first-child:not(.hero):not(.page-head) { padding-top: calc(var(--sec) + 72px); }

/* ---------- more photo, less empty paper ---------- */
:root { --sec: clamp(3.75rem, 2.75rem + 3.5vw, 6.25rem); }
.section-head { margin-bottom: clamp(2.25rem, 1.75rem + 2vw, 3.5rem); }
.page-head .bg { opacity: .55; }
.page-head .shade { background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 55%, transparent) 60%, color-mix(in srgb, var(--ink) 30%, transparent) 100%); }
.page-head { min-height: clamp(22rem, 18rem + 12vw, 30rem); display: flex; align-items: flex-end; }
.page-head .wrap { width: 100%; }
.story .bg { opacity: .45; }
.split img.shot { aspect-ratio: 4 / 3.4; object-fit: cover; }

/* full-bleed photo strip above the closing CTA */
.photo-strip { position: relative; display: grid; grid-template-columns: repeat(var(--ps-n, 6), 1fr); gap: 3px; background: var(--ink); }
.photo-strip figure { margin: 0; aspect-ratio: 1 / 1; max-height: 300px; width: 100%; overflow: hidden; }
.photo-strip img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease), filter .4s var(--ease); filter: saturate(.92); }
.photo-strip figure:hover img { transform: scale(1.06); filter: none; }
.ps-label {
  position: absolute; left: var(--gutter); bottom: var(--s-4); z-index: 2; color: #fff; pointer-events: none;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700;
  background: color-mix(in srgb, var(--ink) 78%, transparent); padding: 8px 14px; border-radius: 999px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
@media (max-width: 760px) { .photo-strip { grid-template-columns: repeat(3, 1fr); } .photo-strip[style*="--ps-n:5"] figure:nth-of-type(n+4) { display: none; } }

/* closing CTA sits on a photo instead of flat dark */
.cta-panel { isolation: isolate; padding-block: clamp(5rem, 4rem + 4vw, 8rem); }
.cta-panel .cta-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .5; }
.cta-panel .cta-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 94%, transparent) 0%, color-mix(in srgb, var(--ink) 70%, transparent) 60%, color-mix(in srgb, var(--ink) 45%, transparent) 100%); }
