/* Leander Decks. Calm and natural. Sage and stone on cream, humanist type, no web fonts. */
:root {
  --cream: #f6f3ea;
  --cream-rgb: 246 243 234;
  --linen: #ece7db;
  --stone: #d6cfbe;
  --stone-ink: #5c5444;
  --ink: #1e2620;
  --ink-soft: #3a4239;
  --sage: #87a588;
  --sage-rgb: 135 165 136;
  --sage-wash: #e2e9dd;
  --sage-ink: #3a5a40;
  --sage-deep: #2a4130;
  --white: #fffefb;
  --type-body: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
  --type-head: Optima, Candara, "Noto Sans", source-sans-pro, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --measure: 68ch;
  --r: 14px;
  interpolate-size: allow-keywords;
}

/* reset (R1 to R3, R10) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 1.09rem/1.65 var(--type-body); }
figure, blockquote, dl, dd { margin: 0; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--type-head); font-weight: 600; line-height: 1.18; letter-spacing: .005em; text-wrap: balance; color: var(--ink); }
h1 { font-size: clamp(2.05rem, 4.6vw, 3.35rem); margin: 0 0 .55em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin: 0 0 .6em; }
h3 { font-size: 1.24rem; margin: 1.6em 0 .4em; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
a { color: var(--sage-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--sage-deep); }
:focus-visible { outline: 3px solid var(--sage-ink); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--white); padding: 10px 14px; z-index: 50; }
.skip:focus { left: 12px; }
.tab { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.bound { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: var(--measure); }

/* masthead */
.mast { background: rgb(var(--cream-rgb) / .96); border-bottom: 1px solid var(--stone); position: sticky; top: 0; z-index: 20; }
.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 68px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex-shrink: 0; }
.mark svg { width: 34px; height: 34px; }
.mark span { font-family: var(--type-head); font-size: 1.28rem; font-weight: 600; letter-spacing: .01em; }
.links { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.links a { color: var(--ink-soft); text-decoration: none; font-size: 1rem; }
.links a:hover, .links a[aria-current] { color: var(--sage-ink); text-decoration: underline; }
.go { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 999px; background: var(--sage-ink); color: var(--white); text-decoration: none; font-weight: 600; font-size: 1rem; border: 2px solid var(--sage-ink); cursor: pointer; font-family: inherit; }
.go:hover { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--white); }
.links a.go, .links a.go:hover { color: var(--white); text-decoration: none; }
.go--line { background: transparent; color: var(--sage-ink); }
.go--line:hover { background: var(--sage-wash); color: var(--sage-deep); }
.menu-btn { display: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--stone-ink); background: transparent; color: var(--ink); font: 600 1rem var(--type-body); cursor: pointer; }
.drawer { margin: 68px 12px auto auto; inset: 0 0 auto auto; width: min(320px, calc(100vw - 24px)); padding: 18px; border: 1px solid var(--stone); border-radius: var(--r); background: var(--white); box-shadow: 0 18px 40px rgb(30 38 32 / .16); }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li a { display: block; padding: 11px 6px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--linen); font-size: 1.05rem; }
.drawer .go { margin-top: 14px; width: 100%; }
@media (max-width: 959px) { .links { display: none; } .menu-btn { display: inline-flex; align-items: center; } }

/* hero, split screen */
.split-hero { display: grid; grid-template-columns: 1fr; background: var(--cream); }
.split-hero .words { padding: clamp(36px, 7vw, 96px) var(--gutter) clamp(36px, 6vw, 72px); align-self: center; }
.split-hero .words p { font-size: 1.2rem; color: var(--ink-soft); max-width: 34ch; }
.split-hero .pic img { width: 100%; height: 100%; object-fit: cover; max-height: 640px; }
.duo-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
@media (min-width: 900px) {
  .split-hero { grid-template-columns: 1fr 1fr; min-height: min(80vh, 680px); }
  .split-hero .words { padding-left: max(var(--gutter), calc((100vw - 1180px) / 2 + var(--gutter))); }
  .split-hero .pic img { max-height: none; }
}

/* page head on inner pages */
.lead-in { padding: clamp(28px, 5vw, 60px) 0 clamp(20px, 3vw, 36px); border-bottom: 1px solid var(--stone); }
.trail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0; font-size: .95rem; color: var(--stone-ink); }
.trail li + li::before { content: "/"; margin-right: 6px; color: var(--stone-ink); }
.trail a { color: var(--stone-ink); }
.bite { font-size: 1.2rem; max-width: 62ch; color: var(--ink-soft); }

/* short version box (the snack) */
.short { margin: 28px 0 8px; padding: 20px 22px; background: var(--sage-wash); border-radius: var(--r); max-width: 760px; }
.short h2 { font-size: 1.1rem; margin: 0 0 10px; letter-spacing: .02em; }
.short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px 22px; }
.short li { padding-left: 22px; position: relative; }
.short li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 10px; height: 2px; background: var(--sage-ink); }
@media (min-width: 720px) { .short ul { grid-template-columns: 1fr 1fr; } }

/* split screen sections */
.duo { display: grid; grid-template-columns: 1fr; align-items: stretch; background: var(--white); border-top: 1px solid var(--linen); }
.duo > .side-pic img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.duo > .side-text { padding: clamp(32px, 6vw, 80px) var(--gutter); align-self: center; }
.duo > .side-text > * { max-width: 560px; }
.duo--stone { background: var(--linen); }
.duo--flip > .side-pic { order: 0; }
@media (min-width: 900px) {
  .duo { grid-template-columns: 1fr 1fr; }
  .duo > .side-pic img { aspect-ratio: auto; min-height: 460px; }
  .duo--flip > .side-pic { order: 2; }
}
/* type only panel where a section has no photo */
.side-type { display: grid; place-items: center; padding: 40px var(--gutter); background: var(--sage-deep); color: var(--cream); min-height: 300px; }
.steps-art { width: min(100%, 420px); }
.steps-art div { height: 18px; margin-top: 16px; border-radius: 3px; background: rgb(var(--sage-rgb) / .8); }
.steps-art div:nth-child(1) { width: 100%; }
.steps-art div:nth-child(2) { width: 76%; margin-left: 24%; }
.steps-art div:nth-child(3) { width: 52%; margin-left: 48%; }
.steps-art p { margin: 18px 0 0; font-family: var(--type-head); font-size: 1.15rem; color: var(--cream); }

/* service rows */
.rows-wrap { padding: clamp(44px, 7vw, 88px) 0; }
.rows { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--stone); }
.rows li { border-bottom: 1px solid var(--stone); }
.rows a { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 18px 4px; text-decoration: none; color: var(--ink); }
.rows a:hover { background: var(--sage-wash); }
.rows .rt { font-family: var(--type-head); font-size: 1.2rem; font-weight: 600; }
.rows .rd { grid-column: 1; color: var(--stone-ink); font-size: 1rem; }
.rows a::after { content: "\2192"; grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--sage-ink); font-size: 1.3rem; }
@media (min-width: 820px) { .rows { grid-template-columns: 1fr 1fr; column-gap: 40px; } }

/* process path, the step by step timeline */
.path-band { background: var(--sage-wash); padding: clamp(64px, 9vw, 120px) 0 clamp(48px, 7vw, 90px); }
@supports (clip-path: shape(from 0 0, line to 100% 0)) {
  .path-band { clip-path: shape(from 0 48px, curve to 100% 0 with 55% 60px, line to 100% 100%, line to 0 100%, close); }
}
.path { list-style: none; margin: 34px 0 0; padding: 0; position: relative; max-width: 820px; }
.path::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--stone); }
.path::after { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--sage-ink); transform-origin: top; transform: scaleY(1); }
.path li { position: relative; padding: 0 0 30px 66px; }
.path li:last-child { padding-bottom: 0; }
.path .num { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--sage-ink); display: grid; place-items: center; font: 600 1.05rem var(--type-head); color: var(--sage-ink); z-index: 1; }
.path h3 { margin: 6px 0 6px; }
.path p { margin: 0; color: var(--ink-soft); max-width: 60ch; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .path::after { animation: path-fill linear both; animation-timeline: view(); animation-range: entry 20% cover 70%; }
    @keyframes path-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* Leander in numbers */
.figures { padding: clamp(48px, 7vw, 90px) 0; }
.tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--stone); border: 1px solid var(--stone); border-radius: var(--r); overflow: hidden; margin: 24px 0 12px; }
.tally div { background: var(--white); padding: 22px 18px; }
.tally b { display: block; font: 600 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--type-head); color: var(--sage-deep); }
.tally span { display: block; margin-top: 6px; color: var(--stone-ink); font-size: .98rem; }
.cite { font-size: .95rem; color: var(--stone-ink); }

/* permit triggers table */
.grid-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; background: var(--white); border-radius: var(--r); overflow: hidden; }
.grid-table th, .grid-table td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--linen); vertical-align: top; font-size: 1rem; }
.grid-table th { background: var(--linen); font-family: var(--type-head); font-weight: 600; }
.grid-table td:last-child { color: var(--sage-deep); font-weight: 600; white-space: nowrap; }

/* body copy on inner pages */
.prose-wrap { padding: clamp(28px, 5vw, 56px) 0; }
.prose { max-width: var(--measure); }
.prose h2 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .45em; }
.prose figure { margin: 28px 0; }
.prose figure img { border-radius: var(--r); }
.prose figcaption { margin-top: 8px; font-size: .96rem; color: var(--stone-ink); }
.with-side { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) { .with-side { grid-template-columns: minmax(0, 1fr) 300px; } }
.side-note { align-self: start; position: sticky; top: 90px; padding: 20px; border: 1px solid var(--stone); border-radius: var(--r); background: var(--white); }
.side-note h2 { font-size: 1.1rem; margin: 0 0 10px; }
.side-note ul { margin: 0; padding: 0; list-style: none; }
.side-note li { padding: 7px 0; border-bottom: 1px solid var(--linen); }
.side-note li:last-child { border: 0; }
@media (max-width: 999px) { .side-note { position: static; } }
.sources { font-size: 1rem; }
.sources li { margin-bottom: .6em; }

/* questions */
.qa-wrap { padding: clamp(40px, 6vw, 80px) 0; }
.qa { max-width: 820px; border-top: 1px solid var(--stone); margin-top: 18px; }
.qa details { border-bottom: 1px solid var(--stone); }
.qa summary { cursor: pointer; list-style: none; padding: 18px 40px 18px 2px; position: relative; font: 600 1.12rem/1.4 var(--type-head); color: var(--ink); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 8px; top: 14px; font-size: 1.5rem; color: var(--sage-ink); }
.qa details[open] summary::after { content: "\2212"; }
.qa .ans { padding: 0 2px 18px; color: var(--ink-soft); max-width: 70ch; }
.qa .ans p:last-child { margin-bottom: 0; }
.qa details::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
.qa details[open]::details-content { block-size: auto; }

/* free estimate box */
.est-wrap { padding: clamp(44px, 7vw, 90px) 0; background: var(--linen); border-top: 1px solid var(--stone); }
.est { display: grid; grid-template-columns: 1fr; gap: 28px; background: var(--white); border-radius: calc(var(--r) + 4px); padding: clamp(22px, 4vw, 44px); box-shadow: 0 1px 0 var(--stone); }
@media (min-width: 900px) { .est { grid-template-columns: 5fr 7fr; gap: 48px; } }
.est-intro p { color: var(--ink-soft); }
.est-intro ol { padding-left: 1.2em; color: var(--ink-soft); }
.fields { display: grid; grid-template-columns: 1fr; gap: 14px 16px; }
@media (min-width: 620px) { .fields { grid-template-columns: 1fr 1fr; } .fields .wide { grid-column: 1 / -1; } }
.fields label.f { display: grid; gap: 6px; font-weight: 600; font-size: 1rem; color: var(--ink); }
.fields .opt { font-weight: 400; color: var(--stone-ink); }
.fields input[type="text"], .fields input[type="tel"], .fields input[type="email"], .fields select, .fields textarea {
  width: 100%; min-height: 48px; padding: 11px 13px; border: 1.5px solid #8f8774; border-radius: 10px; background: var(--white); color: var(--ink); font: 400 1.05rem var(--type-body);
}
.fields textarea { field-sizing: content; min-block-size: 4lh; max-block-size: 12lh; resize: vertical; }
.fields input:focus, .fields select:focus, .fields textarea:focus { border-color: var(--sage-ink); outline: 3px solid rgb(var(--sage-rgb) / .45); outline-offset: 0; }
.consent { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: .95rem; line-height: 1.5; color: var(--ink-soft); }
.consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--sage-ink); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { min-height: 1.4em; margin: 0; font-weight: 600; color: #8a2d1f; }
.fields .go { min-height: 52px; font-size: 1.06rem; }

/* sticky call button, only rendered when a phone is set */
.ring { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 30; display: flex; justify-content: center; align-items: center; min-height: 52px; border-radius: 999px; background: var(--sage-deep); color: var(--white); font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px rgb(30 38 32 / .25); }
.ring:hover { color: var(--white); }
@media (min-width: 960px) { .ring { display: none; } }
@media (max-width: 959px) { body.has-ring { padding-bottom: 76px; } }
.mast-call { color: var(--ink); font-weight: 600; text-decoration: none; }

/* footer */
.foot { background: var(--sage-deep); color: #e7ece3; padding: 56px 0 28px; }
.foot a { color: #f1f4ee; }
.foot-cols { display: grid; grid-template-columns: 1fr; gap: 30px; }
@media (min-width: 820px) { .foot-cols { grid-template-columns: 2fr 1fr 1fr; } }
.foot .mark { color: var(--cream); }
.foot h2 { font-size: 1.05rem; color: var(--cream); margin: 0 0 12px; letter-spacing: .03em; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { padding: 4px 0; }
.foot-base { margin-top: 36px; padding-top: 18px; border-top: 1px solid rgb(255 255 255 / .18); display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; font-size: .96rem; }
.foot-base p { margin: 0; }

/* small pages */
.plain { padding: clamp(40px, 7vw, 90px) 0; }