/* Precision Siteworks — site.css
   Palette = the logo (brandColors.palette): #ff9018 primary orange, #f09018 second orange, #603018 clay brown.
   Neutrals are warm near-blacks so the logo's black bed melts into the page.
   Type: Zalando Sans Expanded (display) · Michroma (the logo's wide tagline caps) · Schibsted Grotesk (body).
   Zero libraries, native scroll only. */

@font-face { font-family: "ZS Expanded"; src: url("/fonts/zalexp.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Michroma"; src: url("/fonts/michroma.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("/fonts/schibsted.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --brand: #ff9018;
  --brand-2: #f09018;
  --clay: #603018;
  --clay-deep: #2a160b;
  --clay-mid: #46230f;
  --ink: #0c0b0a;
  --ink-2: #121110;
  --ink-3: #1a1815;
  --ink-4: #24211d;
  --fg: #f4f0ea;
  --fg-2: #cdc5ba;
  --fg-3: #a1988d;
  --paper: #f1ebe2;
  --paper-2: #e6ddd0;
  --paper-ink: #1b1613;
  --paper-mute: #574b41;
  --line: rgba(244, 240, 234, .12);
  --line-2: rgba(244, 240, 234, .22);
  --display: "ZS Expanded", "Arial Black", Arial, sans-serif;
  --wide: "Michroma", "ZS Expanded", Arial, sans-serif;
  --body: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(18px, 5vw, 40px);
  --max: 1240px;
  --edge: max(var(--gut), calc((var(--vw, 100vw) - var(--max)) / 2));
  --hdr-h: 68px;
  --r: 10px;
  --r-lg: 18px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sec: clamp(76px, 11vw, 136px);
  color-scheme: dark;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; background: var(--ink); color: var(--fg); font-family: var(--body); font-size: 1.0625rem; line-height: 1.62; font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
a, button, summary { -webkit-tap-highlight-color: rgba(255, 144, 24, .18); }
option { background-color: var(--ink-2); color: var(--fg); }
@media (pointer: fine) { html { overscroll-behavior: none; } }
:where(a, button, span, p, li, summary, strong) > svg:where(:not([width])) { width: 1.15em; height: 1.15em; flex: none; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--brand); color: var(--ink); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--brand); color: var(--ink); padding: 10px 16px; border-radius: 6px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.tel { white-space: nowrap; }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }
.sec { position: relative; padding-block: var(--sec); }
.t-ink { background: var(--ink); }
.t-ink2 { background: var(--ink-2); }
.t-clay { background: radial-gradient(120% 90% at 85% 0%, #4a2412 0%, var(--clay-deep) 46%, #140b06 100%); }
.t-paper { background: var(--paper); color: var(--paper-ink); color-scheme: light; }
.t-paper .kicker { color: var(--clay); }
.t-paper .kicker::before { background: var(--clay); }
.t-paper .lede, .t-paper .muted { color: var(--paper-mute); }
.t-paper .hl { color: var(--clay); }

/* ---------- type ---------- */
.kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--wide); font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); line-height: 1.5; }
.kicker::before { content: ""; width: 28px; height: 2px; background: var(--brand); flex: none; }
.kicker.k-c::after { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.h2, .sec h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.62rem, 6.6vw, 3.25rem); line-height: 1.04; letter-spacing: -.012em; text-wrap: balance; }
.sec h3, .h3 { font-family: var(--display); font-weight: 700; font-size: clamp(1.06rem, 3.9vw, 1.32rem); line-height: 1.18; letter-spacing: -.005em; }
.hl { color: var(--brand); }
.lede { color: var(--fg-2); font-size: clamp(1.0625rem, 2.6vw, 1.2rem); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--fg-2); }
.sec-head { display: grid; gap: 16px; margin-bottom: clamp(32px, 6vw, 56px); max-width: 860px; }
.sec-head.c { margin-inline: auto; text-align: center; justify-items: center; }
.wedge { display: block; width: clamp(120px, 30vw, 220px); height: 10px; background: linear-gradient(90deg, rgba(255, 144, 24, 0) 0%, var(--brand) 100%); clip-path: polygon(0 80%, 100% 0, 100% 100%, 0 100%); }
.para { display: grid; gap: .8em; }
.para > p { color: inherit; }
@media (min-width: 900px) {
  .para { display: block; }
  .para > p { display: inline; }
  .para > p + p::before { content: " "; }
}
.prose { display: grid; gap: 1.05em; max-width: 68ch; color: var(--fg-2); }
.prose h2 { color: var(--fg); margin-top: .6em; }
.prose h3 { color: var(--fg); margin-top: .4em; }
.t-paper .prose { color: var(--paper-mute); }
.t-paper .prose h2, .t-paper .prose h3 { color: var(--paper-ink); }
.prose a:not(.btn) { color: var(--brand); }
.t-paper .prose a:not(.btn) { color: var(--clay); }

/* ---------- buttons ---------- */
.btn { --b: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: .85em 1.45em; border-radius: 8px; border: 2px solid var(--b); background-color: var(--b); color: var(--ink); font-family: var(--body); font-weight: 800; font-size: 1rem; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), background-color .25s, border-color .25s, color .25s, box-shadow .25s; white-space: nowrap; touch-action: manipulation; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(255, 144, 24, .55); background-color: #ffa23f; border-color: #ffa23f; }
.btn:active { transform: translateY(0); }
.btn-g { background-color: rgba(12, 11, 10, .25); color: var(--fg); border-color: var(--line-2); }
.btn-g:hover { background-color: rgba(244, 240, 234, .08); border-color: var(--fg); color: var(--fg); box-shadow: none; }
.t-paper .btn-g { color: var(--paper-ink); border-color: rgba(27, 22, 19, .3); background-color: transparent; }
.t-paper .btn-g:hover { border-color: var(--paper-ink); background-color: rgba(27, 22, 19, .05); color: var(--paper-ink); }
.prose a.btn { color: var(--ink); }
.prose a.btn-g { color: var(--fg); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.lnk { display: inline-flex; align-items: center; gap: .5em; color: var(--brand); font-weight: 700; text-decoration: none; }
.lnk svg { transition: transform .25s var(--ease); }
.lnk:hover svg { transform: translateX(4px); }
.t-paper .lnk { color: var(--clay); }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; z-index: 60; height: calc(var(--hdr-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); transition: transform .4s var(--ease), background-color .3s, box-shadow .3s; }
.hdr::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 11, 10, .72), rgba(12, 11, 10, 0)); pointer-events: none; transition: opacity .3s; }
.hdr.solid { background-color: rgba(12, 11, 10, .92); box-shadow: 0 1px 0 var(--line); -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); }
.hdr.solid::before { opacity: 0; }
.hdr.hide { transform: translateY(-100%); }
.hdr-in { position: relative; height: var(--hdr-h); display: flex; align-items: center; gap: 12px; max-width: calc(var(--max) + var(--gut) * 2); margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); }
.brand { display: block; flex: none; margin-right: auto; border-radius: 4px; }
.brand img { height: 40px; width: auto; }
.nav { display: none; }
.hdr-call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; min-width: 46px; padding-inline: 12px; border-radius: 8px; background-color: var(--brand); color: var(--ink); font-weight: 800; text-decoration: none; flex: none; transition: background-color .2s; }
.hdr-call:hover { background-color: #ffa23f; }
.hdr-call span { display: none; }
.burger { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(12, 11, 10, .35); cursor: pointer; flex: none; padding: 0; }
.burger i, .burger i::before, .burger i::after { display: block; width: 20px; height: 2px; background: var(--fg); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.burger i { position: relative; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; }
.burger i::before { top: -6px; }
.burger i::after { top: 6px; }
.menu-open .burger i { background: transparent; }
.menu-open .burger i::before { transform: translateY(6px) rotate(45deg); }
.menu-open .burger i::after { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 379px) {
  .hdr-in { gap: 8px; }
  .brand img { height: 31px; }
  .hdr-call, .burger { width: 42px; min-width: 42px; height: 42px; padding-inline: 0; }
}
@media (min-width: 560px) { .hdr-call span { display: inline; } .hdr-call { padding-inline: 16px; } }
@media (min-width: 1120px) {
  .nav { display: flex; align-items: center; gap: 4px; margin-right: 8px; }
  .nav a { padding: 10px 14px; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--fg); transition: background-color .2s, color .2s; }
  .nav a:hover, .nav a[aria-current="page"] { background-color: rgba(244, 240, 234, .08); color: var(--brand); }
  .burger { display: none; }
  .brand img { height: 44px; }
}

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 55; background: rgba(12, 11, 10, .98); padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 18px) max(var(--gut), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gut), env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 22px; overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .3s, transform .35s var(--ease), visibility 0s .35s; }
.menu-open .drawer { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .35s var(--ease), visibility 0s; }
.menu-open { overflow: hidden; }
.drawer nav { display: grid; }
.drawer nav a { font-family: var(--display); font-weight: 800; font-size: 1.45rem; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--line); }
.drawer-sub { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 16px; }
.drawer-sub a { padding: 9px 0; color: var(--fg-2); text-decoration: none; font-size: .98rem; }
.drawer-sub a:hover { color: var(--brand); }
.drawer-k { font-family: var(--wide); font-size: .66rem; letter-spacing: .2em; color: var(--brand); text-transform: uppercase; }
.drawer .btn { width: 100%; }
.drawer-btns { display: grid; gap: 10px; margin-top: auto; }

/* ---------- home hero ---------- */
.hero { position: relative; isolation: isolate; min-height: max(660px, 100svh); display: grid; align-items: center; padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 28px) 0 clamp(64px, 10vh, 110px); overflow: hidden; background: #140c07; }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media .poster { position: absolute; inset: 0; }
.hero-scrim { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(70% 55% at 50% 42%, rgba(12, 11, 10, .62) 0%, rgba(12, 11, 10, .2) 100%),
  linear-gradient(180deg, rgba(12, 11, 10, .78) 0%, rgba(12, 11, 10, .38) 30%, rgba(12, 11, 10, .5) 62%, rgba(12, 11, 10, .96) 100%); }
.hero-in { width: 100%; max-width: 940px; margin-inline: auto; padding-inline: max(var(--gut), env(safe-area-inset-left)) max(var(--gut), env(safe-area-inset-right)); text-align: center; display: grid; justify-items: center; }
.hero-logo { width: clamp(196px, 50vw, 330px); height: auto; margin-bottom: clamp(20px, 3.4vh, 30px); filter: drop-shadow(0 6px 30px rgba(0, 0, 0, .55)); }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border: 1px solid rgba(255, 144, 24, .55); border-radius: 999px; background: rgba(12, 11, 10, .5); font-family: var(--wide); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg); margin-bottom: 20px; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px rgba(255, 144, 24, .2); }
.hero h1 { display: grid; gap: 14px; }
.h1-k { display: block; font-family: var(--body); font-weight: 700; font-size: clamp(.98rem, 3.6vw, 1.2rem); letter-spacing: .01em; color: var(--fg); text-wrap: balance; }
.h1-b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.35rem, 10.4vw, 5.5rem); line-height: .98; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 4px 36px rgba(0, 0, 0, .45); }
.h1-b .hl { display: inline-block; }
.hero-sub { margin-top: 18px; max-width: 34em; color: var(--fg); opacity: .92; font-size: clamp(1.0625rem, 2.6vw, 1.22rem); line-height: 1.55; text-wrap: pretty; }
.hero-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 26px; font-size: .92rem; color: var(--fg); }
.trust li { display: inline-flex; align-items: center; gap: 8px; }
.trust svg { color: var(--brand); }
.motion-btn { position: absolute; z-index: 3; right: max(14px, env(safe-area-inset-right)); bottom: 16px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); background: rgba(12, 11, 10, .55); color: var(--fg); cursor: pointer; padding: 0; }
.motion-btn:hover { border-color: var(--brand); color: var(--brand); }
.motion-btn > svg { width: 16px; height: 16px; }
.motion-btn .i-play { display: none; }
.motion-off .motion-btn .i-play { display: block; }
.motion-off .motion-btn .i-pause { display: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 2px; height: 46px; background: linear-gradient(180deg, var(--brand), rgba(255, 144, 24, 0)); opacity: .8; }
@media (min-width: 700px) {
  .hero-scrim { background:
    radial-gradient(60% 60% at 50% 46%, rgba(12, 11, 10, .55) 0%, rgba(12, 11, 10, .12) 100%),
    linear-gradient(180deg, rgba(12, 11, 10, .7) 0%, rgba(12, 11, 10, .25) 34%, rgba(12, 11, 10, .4) 66%, rgba(12, 11, 10, .95) 100%); }
}
@media (min-width: 1000px) { .h1-b { font-size: clamp(3.6rem, 6.2vw, 5.4rem); } .hero-in { max-width: 1120px; } }

/* ---------- inner page hero ---------- */
.phero { position: relative; isolation: isolate; min-height: clamp(500px, 74svh, 680px); display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hdr-h) + env(safe-area-inset-top) + 40px) 0 clamp(44px, 7vw, 76px); overflow: hidden; background: #140c07; }
.phero-media { position: absolute; inset: 0; z-index: -2; }
.phero-media picture, .phero-media img { width: 100%; height: 100%; object-fit: cover; }
.phero-media img { animation: settle 1.8s var(--ease) both; }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
.phero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 11, 10, .76) 0%, rgba(12, 11, 10, .56) 22%, rgba(12, 11, 10, .8) 46%, rgba(12, 11, 10, .97) 100%); }
.phero .kicker { width: fit-content; padding: 7px 12px; border-radius: 4px; background: rgba(12, 11, 10, .8); }
.phero .wrap { display: grid; gap: 16px; }
.phero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(1.9rem, 8.1vw, 4.1rem); line-height: 1.02; letter-spacing: -.018em; max-width: 17em; text-wrap: balance; text-shadow: 0 3px 30px rgba(0, 0, 0, .45); }
.phero p.sub { max-width: 40em; font-size: clamp(1.0625rem, 2.5vw, 1.2rem); line-height: 1.55; color: var(--fg); }
.phero .btn-row { margin-top: 6px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: fit-content; padding: 5px 10px; border-radius: 4px; background: rgba(12, 11, 10, .62); font-size: .86rem; color: var(--fg); }
.crumbs a { color: var(--fg); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--fg-3); }
@media (min-width: 700px) { .phero::after { background: linear-gradient(90deg, rgba(12, 11, 10, .92) 0%, rgba(12, 11, 10, .64) 52%, rgba(12, 11, 10, .24) 100%), linear-gradient(180deg, rgba(12, 11, 10, .6) 0%, rgba(12, 11, 10, 0) 30%, rgba(12, 11, 10, 0) 64%, rgba(12, 11, 10, .9) 100%); } }

/* ---------- credential strip ---------- */
.cred { border-block: 1px solid var(--line); background: var(--ink-2); }
.cred ul { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cred li { display: flex; align-items: center; gap: 12px; padding: 20px 6px; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.cred li svg { width: 26px; height: 26px; color: var(--brand); flex: none; }
.cred li:nth-child(odd) { padding-right: 12px; }
.cred li:nth-child(n+3) { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .cred ul { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cred li { padding: 26px 22px; justify-content: center; }
  .cred li:nth-child(n+3) { border-top: 0; }
  .cred li + li { border-left: 1px solid var(--line); }
}

/* ---------- services grid ---------- */
ul.svc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
ul.svc-grid > li { display: grid; }
ul.svc-grid > li:nth-child(-n+2) { grid-column: 1 / -1; }
.svc-card { position: relative; display: grid; align-content: end; isolation: isolate; overflow: hidden; min-height: 210px; height: 100%; border-radius: var(--r); background: var(--ink-3); text-decoration: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); }
ul.svc-grid > li:nth-child(-n+2) .svc-card { min-height: clamp(300px, 78vw, 440px); }
.svc-ph { position: absolute; inset: 0; z-index: -2; }
.svc-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.svc-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 11, 10, .1) 0%, rgba(12, 11, 10, .35) 40%, rgba(12, 11, 10, .93) 100%); }
.svc-card:hover .svc-ph img { transform: scale(1.06); }
.svc-num { position: absolute; top: 12px; left: 14px; font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 11vw, 4.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(244, 240, 234, .7); }
.svc-txt { display: grid; gap: 6px; padding: 16px 14px; }
.svc-txt h3 { font-family: var(--display); font-weight: 800; font-size: clamp(.98rem, 3.9vw, 1.5rem); line-height: 1.12; letter-spacing: -.01em; }
.svc-txt p { display: none; color: var(--fg-2); font-size: .98rem; line-height: 1.5; }
ul.svc-grid > li:nth-child(-n+2) .svc-txt { padding: 22px 20px; }
ul.svc-grid > li:nth-child(-n+2) .svc-txt p { display: block; }
.svc-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--wide); font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); }
.svc-go svg { transition: transform .3s var(--ease); }
.svc-card:hover .svc-go svg { transform: translateX(5px); }
@media (min-width: 760px) {
  ul.svc-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
  ul.svc-grid > li { grid-column: span 4; }
  ul.svc-grid > li:nth-child(-n+2) { grid-column: span 6; }
  .svc-card { min-height: 300px; }
  .svc-txt { padding: 20px; }
  .svc-txt p { display: block; }
  .svc-num { top: 16px; left: 18px; }
}
@media (min-width: 760px) and (max-width: 1099px) { ul.svc-grid > li:nth-child(n+3) .svc-txt p { font-size: .88rem; } }
@media (min-width: 1100px) { ul.svc-grid > li:nth-child(-n+2) .svc-card { min-height: 460px; } }

/* ---------- signature: the grade line ---------- */
.gradeline { overflow: hidden; }
.gl-grid { display: grid; gap: clamp(28px, 5vw, 56px); }
.gl-fig { position: relative; border-radius: var(--r-lg); background: linear-gradient(180deg, rgba(12, 11, 10, .55), rgba(12, 11, 10, .2)); box-shadow: inset 0 0 0 1px rgba(255, 144, 24, .2); padding: clamp(10px, 2.4vw, 22px); overflow: hidden; }
.gl-m > svg, .gl-d > svg { width: 100%; height: auto; overflow: visible; }
.gl-fig .motion-btn { top: 10px; right: 10px; bottom: auto; width: 40px; height: 40px; }
.gl-fig figcaption { margin-top: 10px; font-size: .9rem; color: var(--fg-2); }
.gl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-family: var(--wide); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-2); }
.gl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.gl-legend i { width: 18px; height: 10px; border-radius: 2px; }
.gl-legend .lg-cut { background: repeating-linear-gradient(135deg, #8a4a24 0 3px, #2a160b 3px 6px); }
.gl-legend .lg-fill { background: rgba(255, 144, 24, .5); }
.gl-legend .lg-laser { height: 2px; background: #ff3b1f; }
.gl-legend .lg-grade { height: 3px; background: var(--brand); }
.gl-legend .lg-exist { height: 0; border-top: 2px dashed #e9dfd2; border-radius: 0; }
/* svg parts */
.g-beam { stroke: #ff3b1f; stroke-width: 1.6; stroke-dasharray: 6 7; opacity: .9; }
.g-sweep { fill: url(#beamGlow); opacity: 0; }
.g-design { fill: none; stroke: var(--brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.g-exist { fill: none; stroke: #e9dfd2; stroke-width: 2; stroke-dasharray: 5 6; opacity: .85; }
.g-cut { fill: url(#hatch); opacity: 0; }
.g-fill { fill: rgba(255, 144, 24, .38); opacity: 0; }
.g-stake { opacity: 0; transform: translateY(-14px); transform-box: fill-box; }
.g-lbl { font-family: var(--wide); font-size: 13px; letter-spacing: .12em; fill: var(--fg); }
.g-lbl.o { fill: var(--brand); }
.g-small { font-family: var(--body); font-size: 13px; fill: var(--fg-2); }
.gl-fig.in .g-design { transition: stroke-dashoffset 2.2s var(--ease) .5s; stroke-dashoffset: 0; }
.gl-fig.in .g-cut, .gl-fig.in .g-fill { transition: opacity 1s ease 1.6s; opacity: 1; }
.gl-fig.in .g-stake { transition: opacity .5s ease, transform .6s var(--ease); opacity: 1; transform: none; }
.gl-fig.in .g-stake:nth-of-type(1) { transition-delay: 2.1s; }
.gl-fig.in .g-stake:nth-of-type(2) { transition-delay: 2.3s; }
.gl-fig.in .g-stake:nth-of-type(3) { transition-delay: 2.5s; }
.gl-fig.in .g-sweep { animation: sweep 4.5s ease-in-out 1s infinite; }
@keyframes sweep { 0% { opacity: 0; transform: translateX(-60px); } 20% { opacity: .9; } 70% { opacity: .5; } 100% { opacity: 0; transform: translateX(980px); } }
.motion-off .gl-fig .g-sweep { animation: none; opacity: 0; }
.gl-d { display: none; }
@media (min-width: 760px) { .gl-m { display: none; } .gl-d { display: block; } }
ol.gl-steps { display: grid; gap: 0; counter-reset: s; }
ol.gl-steps > li { position: relative; display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--line); }
ol.gl-steps > li::before { counter-increment: s; content: "0" counter(s); grid-row: span 2; font-family: var(--wide); font-size: .82rem; letter-spacing: .1em; color: var(--brand); padding-top: 4px; }
ol.gl-steps h3 { font-size: 1.08rem; }
ol.gl-steps p { color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
.gl-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 4 / 3; }
.gl-photo img { width: 100%; height: 100%; object-fit: cover; }
.gl-photo figcaption, .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: .86rem; line-height: 1.4; color: var(--fg); background: linear-gradient(180deg, rgba(12, 11, 10, 0), rgba(12, 11, 10, .88)); }
@media (min-width: 960px) {
  .gl-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
  .gl-fig { grid-column: 1 / -1; }
}

/* ---------- owner / story ---------- */
.owner-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.owner-ph { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.owner-main { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 5; }
.owner-main img { width: 100%; height: 100%; object-fit: cover; }
.owner-inset { position: absolute; right: -6px; bottom: -22px; width: 54%; border-radius: var(--r); overflow: hidden; aspect-ratio: 1080 / 565; box-shadow: 0 0 0 5px var(--ink), 0 22px 40px -12px rgba(0, 0, 0, .7); }
.owner-inset img { width: 100%; height: 100%; object-fit: cover; }
.owner-txt { display: grid; gap: 18px; }
.pullq { position: relative; padding: 20px 0 4px 22px; border-left: 3px solid var(--brand); font-family: var(--display); font-weight: 600; font-size: clamp(1.02rem, 3.6vw, 1.3rem); line-height: 1.35; color: var(--fg); }
.pullq cite { display: block; margin-top: 10px; font-family: var(--wide); font-style: normal; font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3); }
ul.ticks { display: grid; gap: 10px; }
ul.ticks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--fg-2); }
ul.ticks svg { color: var(--brand); margin-top: 4px; width: 18px; height: 18px; }
.t-paper ul.ticks li { color: var(--paper-mute); }
.t-paper ul.ticks svg { color: var(--clay); }
@media (min-width: 900px) {
  .owner-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .owner-inset { right: -30px; bottom: -30px; }
}

/* ---------- before / after ---------- */
.ba-grid { display: grid; gap: 18px; }
.ba-pair { display: grid; align-content: start; gap: 10px; padding: 12px; border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.ba-shots { display: grid; gap: 8px; }
.ba-tall .ba-shots { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ba-shot { position: relative; border-radius: 8px; overflow: hidden; background: var(--ink-4); }
.ba-shot img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: var(--ar, 4 / 3); }
.ba-tag { position: absolute; top: 10px; left: 10px; padding: 5px 10px; border-radius: 4px; font-family: var(--wide); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; background: rgba(12, 11, 10, .78); color: var(--fg); }
.ba-shot.after .ba-tag { background: var(--brand); color: var(--ink); }
.ba-meta { display: grid; gap: 4px; padding: 4px 4px 2px; }
.ba-meta h3 { font-size: 1.02rem; }
.ba-meta p { color: var(--fg-2); font-size: .96rem; line-height: 1.5; }
@media (min-width: 760px) {
  .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-tall { grid-row: span 2; }
}
@media (min-width: 1100px) { .ba-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); } .ba-tall { grid-row: span 2; } }

/* ---------- project spotlight (pass 2) ----------
   Their own Facebook project posts, told the way they tell them: the problem, the fix, the before & after,
   with a link back to each post. One lead post, then a scroll-snap rail of the rest. */
.spot-head { display: grid; gap: 22px; margin-bottom: clamp(30px, 5vw, 52px); }
.spot-head .sec-head { margin-bottom: 0; }
.spot-by { display: flex; align-items: center; gap: 11px; font-size: .86rem; line-height: 1.3; color: var(--fg-2); }
.spot-by img { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--brand); flex: none; }
.spot-by > span { display: grid; }
.spot-by b { color: var(--fg); font-weight: 800; font-size: .93rem; }
.fb-card { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.fb-card > p:not(.spot-by) { color: var(--fg-2); font-size: .98rem; line-height: 1.55; }
.fb-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.fb-btns .btn { flex: 1 1 auto; }
.btn-sm { min-height: 46px; padding: .6em 1.05em; font-size: .94rem; }
.spot-t { font-family: var(--display); font-weight: 800; font-size: clamp(1.32rem, 4.8vw, 1.8rem); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.spot-t .arw, .spot-t .to { color: var(--brand); }
.spot-fb { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-height: 44px; color: var(--fg); font-weight: 700; font-size: .96rem; text-decoration: none; }
.spot-fb svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: rgba(255, 144, 24, .14); color: var(--brand); transition: background-color .2s, color .2s; }
.spot-fb:hover svg { background: var(--brand); color: var(--ink); }
.spot-fb:hover > span:first-of-type { text-decoration: underline; text-underline-offset: 3px; }

.spot-lead { display: grid; gap: 26px; }
.sl-media { display: grid; gap: 4px; margin-inline: calc(var(--gut) * -1); }
.sl-media figure { position: relative; overflow: hidden; aspect-ratio: 2 / 1; background: var(--ink-4); }
.sl-media img { width: 100%; height: 100%; object-fit: cover; }
.sl-media .ba-tag { top: 12px; left: var(--gut); }
.sl-media .after .ba-tag, .spot-media .after > .ba-tag { background: var(--brand); color: var(--ink); }
.sl-media.ba-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sl-media.ba-pair > figure:first-child { grid-column: 1 / -1; }
.sl-media.ba-pair > .after { aspect-ratio: 4 / 3; }
.sl-media.ba-pair > .after + .after .ba-tag { left: 12px; }
.sl-body { display: grid; gap: 16px; align-content: start; }
.sl-body .spot-t { font-size: clamp(1.5rem, 5.6vw, 2.2rem); line-height: 1.08; }
.sl-body > p:not(.spot-by), .sl-body .para { color: var(--fg-2); }
.sl-body p.sl-find { color: var(--fg); font-weight: 600; padding-left: 14px; border-left: 2px solid var(--clay); }
.sl-body .pullq { margin-top: 4px; }
@media (min-width: 900px) {
  .spot-head { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); align-items: end; gap: 48px; }
  .spot-lead { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); align-items: center; }
  .sl-media { margin-inline: 0; gap: 8px; }
  .sl-media figure { border-radius: var(--r); }
  .sl-media .ba-tag { left: 12px; }
}

.spot-railhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: clamp(52px, 8vw, 88px); margin-bottom: 18px; }
.spot-more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--wide); font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.spot-more::before { content: ""; width: 28px; height: 2px; background: var(--brand); flex: none; }
.spot .rail-ctl button { border-color: var(--line-2); color: var(--fg); }
.spot .rail-ctl button:hover { background-color: var(--fg); color: var(--ink); border-color: var(--fg); }
ul.spot-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 84%); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 4px var(--edge) 22px; scrollbar-width: thin; scrollbar-color: rgba(244, 240, 234, .25) transparent; overscroll-behavior-x: contain; }
.spot-card { position: relative; scroll-snap-align: start; display: grid; }
.spot-card article { display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.spot-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-4); }
.spot-media figure { position: relative; overflow: hidden; }
.spot-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot-media.sm-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px; }
.spot-media.sm-inset > .after { position: absolute; inset: 0; }
.sm-pip { position: absolute !important; left: 10px; bottom: 10px; width: 42%; aspect-ratio: 4 / 3; border-radius: 6px; box-shadow: 0 0 0 3px var(--ink-3), 0 14px 26px -10px rgba(0, 0, 0, .7); }
.sm-pip .ba-tag { top: 6px; left: 6px; padding: 3px 7px; font-size: .5rem; }
.spot-body { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 14px; padding: 18px 18px 16px; }
.spot-body:has(> .spot-type) { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.spot-type { justify-self: start; padding: 6px 10px; border-radius: 4px; background: rgba(255, 144, 24, .14); color: var(--brand); font-family: var(--wide); font-size: .62rem; line-height: 1.3; letter-spacing: .16em; text-transform: uppercase; }
.sl-body .spot-type { font-size: .66rem; }
.spot-body .spot-t { font-size: clamp(1.1rem, 4vw, 1.24rem); line-height: 1.18; }
.spot-body ul.ticks { gap: 8px; align-content: start; }
.spot-body ul.ticks li { font-size: .95rem; line-height: 1.5; }
@media (min-width: 760px) { ul.spot-rail { grid-auto-columns: minmax(320px, 44%); } }
@media (min-width: 1200px) { ul.spot-rail { grid-auto-columns: calc((var(--max) - 28px) / 3); } }

/* ---------- photo moment ---------- */
.pmoment { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(420px, 70vw, 720px); display: flex; align-items: flex-end; background: #140c07; }
.pm-media { position: absolute; inset: 0; z-index: -2; }
.pm-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.kb .pm-media img { animation: kb 28s ease-in-out infinite alternate; transform-origin: 40% 60%; }
@keyframes kb { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.14) translate3d(-2.5%, -1.5%, 0); } }
.motion-off .kb .pm-media img { animation-play-state: paused; }
.pmoment::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12, 11, 10, .55) 0%, rgba(12, 11, 10, 0) 26%, rgba(12, 11, 10, .2) 52%, rgba(12, 11, 10, .9) 100%); }
.pm-cap { padding-block: clamp(36px, 7vw, 70px); display: grid; gap: 12px; }
.pm-cap p.big { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 6.8vw, 3.6rem); line-height: 1.04; letter-spacing: -.015em; max-width: 15em; text-wrap: balance; }
.pm-cap p.small { color: var(--fg-2); max-width: 36em; }

/* ---------- mosaic ---------- */
.mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tile { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 1; background: var(--ink-3); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.tile:hover img { transform: scale(1.05); }
.tile.tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.tile.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; font-size: .8rem; line-height: 1.35; background: linear-gradient(180deg, rgba(12, 11, 10, 0), rgba(12, 11, 10, .85)); }
@media (min-width: 820px) {
  .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .tile figcaption { font-size: .86rem; padding: 26px 14px 12px; }
}

/* ---------- reviews ---------- */
.rev-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: clamp(28px, 5vw, 44px); }
.rev-head .sec-head { margin-bottom: 0; }
.rail-ctl { display: flex; gap: 10px; }
.rail-ctl button { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(27, 22, 19, .25); background: transparent; color: var(--paper-ink); cursor: pointer; padding: 0; transition: background-color .2s, border-color .2s, color .2s; }
.rail-ctl button:hover { background-color: var(--paper-ink); color: var(--paper); border-color: var(--paper-ink); }
.rail-ctl svg { width: 18px; height: 18px; }
ul.quotes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 84%); align-items: start; gap: 14px;overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 4px var(--edge) 22px; scrollbar-width: thin; scrollbar-color: rgba(27, 22, 19, .3) transparent; overscroll-behavior-x: contain; }
.quote-card { position: relative; scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 26px 22px 22px; border-radius: var(--r-lg); background: #fffaf3; box-shadow: 0 1px 0 rgba(27, 22, 19, .08), 0 18px 40px -26px rgba(27, 22, 19, .5); }
.quote-card::after { content: ""; position: absolute; left: 22px; top: 0; width: 56px; height: 4px; background: var(--brand); border-radius: 0 0 4px 4px; }
.stars { display: flex; gap: 3px; color: var(--brand-2); }
.stars svg { width: 18px; height: 18px; }
.quote-card blockquote { font-size: 1.02rem; line-height: 1.6; color: var(--paper-ink); }
/* long reviews: an 8-line excerpt + read more, so every card sits at the same height */
ul.quotes:has(.quote-card) { align-items: stretch; }
ul.quotes:has(.quote-card.open) { align-items: start; }
.q-txt { display: grid; gap: 4px; align-content: start; }
.js .quote-card:not(.open) .q-txt blockquote { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; }
.q-more { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--clay); font: inherit; font-size: .95rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; touch-action: manipulation; }
.q-more[hidden] { display: none; }
.quote-card figcaption { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(27, 22, 19, .1); }
.quote-card .who { font-weight: 800; }
.quote-card .src { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--paper-mute); }
.quote-card .src svg { width: 15px; height: 15px; }
@media (min-width: 760px) { ul.quotes { grid-auto-columns: minmax(320px, 44%); } }
@media (min-width: 1200px) { ul.quotes { grid-auto-columns: calc((var(--max) - 28px) / 3); } }

/* ---------- towns ---------- */
ul.town-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.town-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px; padding: 20px 20px; border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .25s, transform .25s var(--ease), background-color .25s; }
.town-card:hover { box-shadow: inset 0 0 0 1px var(--brand); transform: translateY(-2px); background-color: var(--ink-4); }
.town-name { font-family: var(--display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; }
.town-meta { grid-column: 1; font-size: .9rem; color: var(--fg-2); }
.town-card svg { grid-row: 1 / span 2; grid-column: 2; color: var(--brand); width: 22px; height: 22px; transition: transform .3s var(--ease); }
.town-card:hover svg { transform: translateX(4px); }
.town-card.base { background: linear-gradient(135deg, rgba(255, 144, 24, .16), rgba(96, 48, 24, .35)); box-shadow: inset 0 0 0 1px rgba(255, 144, 24, .45); }
.town-badge { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 4px; font-family: var(--wide); font-size: .54rem; letter-spacing: .16em; text-transform: uppercase; background: var(--brand); color: var(--ink); vertical-align: middle; }
.also { margin-top: 18px; color: var(--fg-2); font-size: .98rem; }
@media (min-width: 700px) { ul.town-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (min-width: 1040px) { ul.town-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
ul.town-list.regions { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { ul.town-list.regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } ul.town-list.regions li:first-child { grid-column: 1 / -1; } }
div.town-card:hover { transform: none; background-color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.drawer-area { padding: 9px 0; color: var(--fg-2); font-size: .98rem; }
.ftr-area { display: grid; gap: 4px; color: var(--fg-2); }
.area-grid { display: grid; gap: clamp(28px, 5vw, 56px); }
@media (min-width: 980px) { .area-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; max-width: 900px; }
details.qa { border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
details.qa[open] { box-shadow: inset 0 0 0 1px rgba(255, 144, 24, .45); }
.qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 14px; align-items: center; padding: 18px 18px; font-weight: 700; font-size: 1.04rem; line-height: 1.4; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); }
.qa summary i::before, .qa summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--brand); transform: translate(-50%, -50%); transition: transform .25s var(--ease); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.qa .ans { padding: 0 18px 18px; color: var(--fg-2); }
.qa .ans .para { gap: .6em; }
.t-paper details.qa { background: #fffaf3; box-shadow: inset 0 0 0 1px rgba(27, 22, 19, .1); }
.t-paper .qa .ans { color: var(--paper-mute); }
.t-paper .qa summary i { border-color: rgba(27, 22, 19, .2); }
.t-paper .qa summary i::before, .t-paper .qa summary i::after { background: var(--clay); }

/* ---------- quote / contact ---------- */
.q-grid { display: grid; gap: clamp(30px, 5vw, 60px); }
.q-info { display: grid; gap: 20px; align-content: start; }
ul.reach { display: grid; gap: 10px; }
.reach a, .reach div { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 2px 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s; }
.reach a:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.reach svg { grid-row: span 2; width: 46px; height: 46px; padding: 12px; border-radius: 50%; background: rgba(255, 144, 24, .14); color: var(--brand); }
.reach b { font-weight: 800; font-size: 1.05rem; overflow-wrap: anywhere; }
.reach small { color: var(--fg-2); font-size: .88rem; }
table.hours { width: 100%; border-collapse: collapse; font-size: .97rem; }
.hours th, .hours td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.hours td { text-align: right; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.hours tr.today th, .hours tr.today td { color: var(--brand); font-weight: 700; }
.form-card { --pad: clamp(20px, 4vw, 34px); padding: var(--pad); border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, .8); }
.form-card h2, .form-card h3 { margin-bottom: 6px; }
.form-card > p { color: var(--fg-2); margin-bottom: 18px; }
.leadForm { display: grid; gap: 14px; }
.fld-row { display: grid; gap: 14px; }
.fld { display: grid; gap: 6px; }
.fld label { font-weight: 700; font-size: .92rem; }
.fld label small { font-weight: 500; color: var(--fg-3); }
.fld input, .fld select, .fld textarea { width: 100%; min-height: 52px; padding: 13px 14px; border-radius: 8px; border: 1px solid var(--line-2); background-color: var(--ink-2); color: var(--fg); font-size: 1rem; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.fld textarea { min-height: 120px; resize: vertical; }
.fld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 42px; }
.fld input:focus, .fld select:focus, .fld textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 144, 24, .25); background-color: var(--ink); }
.fld input::placeholder, .fld textarea::placeholder { color: var(--fg-3); }
.hp-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.leadForm .btn { width: 100%; }
.form-note { font-size: .86rem; color: var(--fg-3); }
.form-msg { font-size: .96rem; color: var(--fg-2); }
.form-msg:empty { display: none; }
.form-msg.ok { color: #9be39b; }
.form-msg a { display: inline-block; margin: 8px 14px 0 0; color: var(--brand); font-weight: 700; }
@media (min-width: 640px) { .fld-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* their Jobber request form: Jobber's iframe, framed. Space is held while it loads so nothing jumps. */
.jb { display: grid; gap: 14px; }
.jb-frame { position: relative; min-height: 960px; border-radius: 12px; background-color: rgba(244, 240, 234, .035); box-shadow: inset 0 0 0 1px var(--line); }
.jb-frame::before { content: "Loading the request form…"; position: absolute; left: 0; right: 0; top: 200px; margin-top: 36px; text-align: center; color: var(--fg-3); font-size: .9rem; }
.jb-ready .jb-frame { min-height: 0; background-color: transparent; box-shadow: none; }
.jb-ready .jb-frame::before { content: none; }
.jb .jobber-inline-work-request { max-width: none; }
.jb iframe.jobber-work-request { display: block; max-width: none; border-radius: 12px; }
.jb .jobber-spinner { opacity: 1; height: auto; bottom: auto; top: 200px; }
.jb .jobber-spinner::after { top: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 3px solid rgba(255, 144, 24, .22); border-top-color: var(--brand); background: none; box-shadow: none; }
.jb-alt { display: none; gap: 14px; }
.jb-failed .jb { display: none; }
.jb-failed .jb-alt { display: grid; }
.jb-fail { padding: 12px 14px; border-radius: 8px; background-color: rgba(255, 144, 24, .1); box-shadow: inset 0 0 0 1px rgba(255, 144, 24, .35); font-size: .95rem; }
.jb-fail a { color: var(--brand); font-weight: 700; text-underline-offset: 3px; transition: color .2s; }
.jb-fail a:hover { color: var(--fg); }
@media (max-width: 639px) { .jb-frame { margin-inline: calc(var(--pad) * -1 + 6px); } }
@media (min-width: 640px) { .jb-frame { min-height: 872px; } }
@media (prefers-reduced-motion: reduce) { .jb .jobber-spinner::after { animation-duration: 2.4s; } }
@media (min-width: 980px) { .q-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; } }
.map { border-radius: var(--r-lg); overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: var(--ink-3); aspect-ratio: 4 / 3; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(1.05); }
@media (min-width: 900px) { .map { aspect-ratio: 16 / 9; } }

/* ---------- CTA band ---------- */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 10vw, 110px); background: var(--clay); }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 120% at 100% 0%, rgba(255, 144, 24, .35), rgba(255, 144, 24, 0) 60%), linear-gradient(160deg, #603018 0%, #3a1c0d 100%); }
.cta-band::after { content: ""; position: absolute; right: -6%; bottom: -1px; z-index: -1; width: 70%; height: 46%; background: rgba(12, 11, 10, .3); clip-path: polygon(0 100%, 100% 8%, 100% 100%); }
.cta-in { display: grid; gap: 20px; justify-items: start; }
.cta-in .h2 { max-width: 15em; }
.cta-in p { max-width: 36em; color: #f1e3d6; }
.cta-band .btn-g { border-color: rgba(244, 240, 234, .5); background-color: rgba(12, 11, 10, .2); }

/* ---------- inner page blocks ---------- */
.intro-grid { display: grid; gap: clamp(28px, 5vw, 60px); }
.incl { align-self: start; padding: clamp(20px, 4vw, 30px); border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 16px; }
.incl h2 { font-size: clamp(1.1rem, 4.2vw, 1.4rem); }
@media (min-width: 960px) { .intro-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); } .incl { position: sticky; top: calc(var(--hdr-h) + 24px); } }
.photo-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.photo-row figure { position: relative; border-radius: var(--r); overflow: hidden; background: var(--ink-3); }
.photo-row img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.photo-row .port img { aspect-ratio: 3 / 4; }
@media (min-width: 700px) {
  .photo-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .photo-row.n3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .photo-row.n3 figure:first-child { grid-row: span 2; }
  .photo-row.n3 figure:first-child img { aspect-ratio: auto; height: 100%; }
}
ol.howto { display: grid; gap: 12px; counter-reset: h; }
ol.howto > li { position: relative; padding: 22px 20px 20px; border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
ol.howto > li::before { counter-increment: h; content: "0" counter(h); font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--brand); }
ol.howto p { color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
@media (min-width: 760px) { ol.howto { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { ol.howto.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } ol.howto.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.duo { display: grid; gap: clamp(28px, 5vw, 60px); align-items: center; }
.duo-ph { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.duo-ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.duo-ph.port img { aspect-ratio: 4 / 5; }
@media (min-width: 900px) { .duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .duo.swap .duo-ph { order: 2; } }
ul.chips { display: flex; flex-wrap: wrap; gap: 8px; }
ul.chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; font-weight: 600; font-size: .95rem; transition: border-color .2s, color .2s, background-color .2s; }
ul.chips a:hover { border-color: var(--brand); color: var(--brand); }
ul.chips a[aria-current="page"] { background-color: var(--brand); color: var(--ink); border-color: var(--brand); }
.t-paper ul.chips a { border-color: rgba(27, 22, 19, .25); }
.t-paper ul.chips a:hover { border-color: var(--clay); color: var(--clay); }
ul.svc-local { display: grid; gap: 10px; }
ul.svc-local a { display: grid; grid-template-columns: 76px minmax(0, 1fr) 22px; gap: 4px 14px; align-items: center; padding: 10px 14px 10px 10px; border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s; }
ul.svc-local a:hover { box-shadow: inset 0 0 0 1px var(--brand); }
ul.svc-local .thumb { grid-row: span 2; width: 76px; height: 76px; border-radius: 8px; overflow: hidden; }
ul.svc-local .thumb img { width: 100%; height: 100%; object-fit: cover; }
ul.svc-local b { font-family: var(--display); font-weight: 800; font-size: .98rem; line-height: 1.25; }
ul.svc-local span.d { grid-column: 2; color: var(--fg-2); font-size: .92rem; line-height: 1.4; }
ul.svc-local svg { grid-row: 1 / span 2; grid-column: 3; color: var(--brand); width: 20px; height: 20px; }
@media (max-width: 419px) {
  ul.svc-local a { grid-template-columns: 58px minmax(0, 1fr); gap: 2px 12px; padding: 8px 12px 8px 8px; }
  ul.svc-local .thumb { width: 58px; height: 58px; }
  ul.svc-local a > svg { display: none; }
  ul.svc-local span.d { font-size: .88rem; }
}
@media (min-width: 900px) { ul.svc-local { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.drive { display: grid; gap: 4px; padding: 20px; border-radius: var(--r-lg); background: linear-gradient(135deg, rgba(255, 144, 24, .14), rgba(96, 48, 24, .4)); box-shadow: inset 0 0 0 1px rgba(255, 144, 24, .35); }
.drive .kicker { margin-bottom: 4px; }
.drive b { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 6vw, 2.2rem); line-height: 1.05; }
.drive p { color: var(--fg-2); font-size: .98rem; }
.route { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.route span { padding: 4px 9px; border-radius: 4px; border: 1px solid var(--line-2); font-family: var(--wide); font-size: .56rem; letter-spacing: .14em; color: var(--fg); }
.side-stack { display: grid; gap: 16px; align-content: start; }
.note-card { padding: 20px; border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; }
.note-card p { color: var(--fg-2); }
.mini-quote { padding: 22px; border-radius: var(--r-lg); background: #fffaf3; color: var(--paper-ink); display: grid; gap: 12px; }
.mini-quote blockquote { font-size: 1rem; line-height: 1.6; }
.mini-quote figcaption { font-weight: 800; font-size: .92rem; }
.mini-quote figcaption span { font-weight: 500; color: var(--paper-mute); }
.mini-quote .stars { color: var(--brand-2); }
.eq-list { display: grid; gap: 12px; }
@media (min-width: 760px) { .eq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.eq { display: grid; gap: 6px; padding: 20px; border-radius: var(--r); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.eq p { color: var(--fg-2); font-size: 1rem; line-height: 1.55; }
.svc-list-page { display: grid; gap: 14px; }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border-radius: var(--r-lg); background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .25s; }
.svc-row:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.svc-row .ph { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.svc-row .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.svc-row:hover .ph img { transform: scale(1.04); }
.svc-row .bd { display: grid; gap: 10px; align-content: center; padding: clamp(20px, 3.4vw, 34px); }
.svc-row .bd p { color: var(--fg-2); }
.svc-row .num { font-family: var(--wide); font-size: .7rem; letter-spacing: .2em; color: var(--brand); }
@media (min-width: 820px) {
  .svc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .svc-row .ph { aspect-ratio: auto; min-height: 320px; }
  .svc-list-page > li:nth-child(even) .svc-row .ph { order: 2; }
}

/* ---------- footer ---------- */
.ftr { background: #080706; border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 90px) 0 calc(96px + env(safe-area-inset-bottom)); font-size: .97rem; }
.ftr-top { display: grid; gap: 34px; }
.ftr-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.ftr-brand img { width: 200px; height: auto; }
.ftr-brand p { color: var(--fg-2); max-width: 30em; }
.nap { font-style: normal; display: grid; gap: 4px; color: var(--fg-2); }
.nap a { color: var(--fg); text-decoration: none; font-weight: 700; }
.nap a:hover { color: var(--brand); }
.ftr h2 { font-family: var(--wide); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; font-weight: 400; }
.ftr ul { display: grid; gap: 2px; }
.ftr ul a { display: inline-block; padding: 6px 0; color: var(--fg-2); text-decoration: none; }
.ftr ul a:hover { color: var(--fg); }
.ftr-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 20px; }
.ftr-hours { display: grid; gap: 4px; color: var(--fg-2); }
.social { display: flex; gap: 10px; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); transition: border-color .2s, color .2s; }
.social a:hover { border-color: var(--brand); color: var(--brand); }
.social svg { width: 18px; height: 18px; }
.ftr-base { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; color: var(--fg-3); font-size: .88rem; }
.ftr-base a { color: var(--fg-3); }
@media (min-width: 900px) {
  .ftr-top { grid-template-columns: minmax(0, 1.05fr) minmax(0, 2fr); }
  .ftr-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ftr { padding-bottom: 40px; }
}

/* ---------- sticky call bar (phones) ---------- */
.callbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); background: rgba(12, 11, 10, .94); box-shadow: 0 -1px 0 var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateY(110%); transition: transform .35s var(--ease); }
.callbar.show { transform: none; }
.callbar .btn { min-height: 50px; padding-inline: 10px; font-size: .96rem; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- reveal ---------- */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .rv.d1 { transition-delay: .08s; }
.js .rv.d2 { transition-delay: .16s; }
.js .rv.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
  .hero-media video { display: none; }
  .kb .pm-media img { animation: none; }
  .g-design { stroke-dashoffset: 0; }
  .g-cut, .g-fill, .g-stake { opacity: 1; transform: none; }
}
@media (hover: none) { .svc-card:hover .svc-ph img, .tile:hover img, .svc-row:hover .ph img { transform: none; } }
/* Equipment cards carry a photo; before/after pairs get more room */
.eq-p { align-content: start; overflow: hidden; }
.eq-ph { margin: -20px -20px 10px; background: var(--ink-4); }
.eq-ph img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; }
.eq-p .para { gap: 0; }
.intro-grid > .prose { align-content: start; }
.ba-grid.ba-n1, .ba-grid.ba-n2 { grid-template-columns: minmax(0, 1fr); }
.ba-n2 .ba-shots, .ba-n3 .ba-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 760px) {
  .ba-n1 .ba-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-grid.ba-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-n2 .ba-shots, .ba-n3 .ba-shots { grid-template-columns: minmax(0, 1fr); }
  .ba-grid.ba-row .ba-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .ba-grid.ba-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { ol.howto.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Job clips. Cards are deliberately narrower than the footage so nothing upscales. */
.clips { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 8px; }
.clips-pov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 8px auto 0; }
.clip { position: relative; overflow: hidden; border-radius: 8px; background: var(--ink-3); }
.clip.land { aspect-ratio: 16 / 9; }
.clip.port { aspect-ratio: 3 / 4; }
.clip video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Clips 1 and 2 are upright phone footage stored squeezed into a 16:9 frame. A 9:16 card with fill gives them back their true shape, uncropped. */
.clip.tall { aspect-ratio: 9 / 16; }
.clip.tall video { object-fit: fill; }
.clips.mix { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 620px; margin-inline: auto; }
.clips.mix .land { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .clips.mix { grid-template-columns: 1fr 1fr 1.552fr; max-width: 900px; }
  .clips.mix .tall { grid-row: span 2; }
  .clips.mix .land { grid-column: 3; }
}
.clip figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 9px; font-size: .8rem; line-height: 1.35; background: linear-gradient(180deg, rgba(12,11,10,0), rgba(12,11,10,.85)); }
@media (min-width: 720px) { .clip figcaption { font-size: .86rem; padding: 26px 14px 12px; } }
@media (prefers-reduced-motion: reduce) { .clip video { display: block; } }