/* ═══════════════════════════════════════════════════════════════════════════
   THE KIT — how every brick looks.

   Uses ONLY the --c- roles and the --font- and --step- values from the
   customer's palette and typeset. Contains no hex value, no rgb(), no font family, and no font size
   that is not derived from the scale.

   THE ONE RULE THAT MAKES SCOPES WORK: nothing here declares a --c-* on an
   element. A custom property declared on an element beats one inherited from an
   ancestor regardless of specificity, so a single `--c-text: …` inside a
   section would silently defeat [data-surface="inverse"] for everything below
   it. Sections read roles; only palettes and scopes set them.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── space and measure ──────────────────────────────────────────────────── */
:root{
  --k-gut:clamp(20px,4vw,44px);
  --k-max:1280px;
  --k-prose:66ch;
  --k-rhythm-1:clamp(40px,5vw,72px);
  --k-rhythm-2:clamp(52px,7vw,104px);
  --k-rhythm-3:clamp(72px,10vw,150px);
}
body{background:var(--c-surface);color:var(--c-text)}
.k-in{max-width:var(--k-max);margin-inline:auto;padding-inline:var(--k-gut)}

/* A band is the unit of vertical rhythm. Three heights, used deliberately —
   uniform section height was the loudest "this is a template" tell in the
   layout research. */
.k-band{padding-block:var(--k-rhythm-2)}
.k-band--tall{padding-block:var(--k-rhythm-3)}
.k-band--short{padding-block:var(--k-rhythm-1)}

/* A surface is a scope. `tone` on any section puts it here, and the palette's
   [data-surface="inverse"] block supplies the role values. */
[data-surface="inverse"]{background:var(--c-surface);color:var(--c-text)}
[data-surface="raised"]{background:var(--c-surface-raised);
  border-block:1px solid var(--c-border)}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--c-text);line-height:var(--head-lead);
  font-weight:var(--head-weight);letter-spacing:var(--head-track);margin:0 0 .6em;
  text-wrap:balance}
p{margin:0 0 1.1em;max-width:var(--k-prose)}
a{color:var(--c-accent-text)}
:focus-visible{outline:2px solid var(--c-focus-ring);outline-offset:3px}

.k-label{font-family:var(--font-body);font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-text-muted);font-weight:600;margin-bottom:2em}
.eyebrow{font-size:.8125rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--c-accent-text);font-weight:600;margin:0 0 1em}
.k-sub{font-size:clamp(1.0625rem,1rem + .4vw,1.3rem);color:var(--c-text-muted);
  max-width:48ch;margin:0 0 1.6em}
.k-acts{display:flex;gap:12px;flex-wrap:wrap;max-width:none;margin:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:0 22px;border-radius:var(--btn-radius,4px);border:1px solid var(--c-accent);
  background:var(--c-accent);color:var(--c-on-accent);text-decoration:none;font-weight:600;
  font-family:var(--font-body);cursor:pointer}
.btn:hover{filter:brightness(.92)}
.btn--lg{min-height:52px;padding:0 26px}
.btn--ghost{background:transparent;color:var(--c-accent-text);border-color:var(--c-accent)}
.btn--ghost:hover{background:var(--c-accent);color:var(--c-on-accent);filter:none}
.btn--line{background:transparent;color:var(--c-text);border-color:var(--c-border)}
.btn--line:hover{background:var(--c-text);color:var(--c-surface);filter:none}

/* Every target a thumb aims at. Links inside running prose are exempt on
   purpose — a 44px line box inside a paragraph wrecks the leading. */
.k-head nav a,.k-brand,.k-call,.tap,.btn{display:inline-flex;align-items:center;min-height:44px}

/* ── header ─────────────────────────────────────────────────────────────── */
.k-head{border-bottom:1px solid var(--c-border);background:var(--c-surface)}
.k-head--sticky{position:sticky;top:0;z-index:40}
.k-head .k-in{display:flex;align-items:center;gap:26px;min-height:74px}
.k-brand{font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.2rem;
  letter-spacing:var(--head-track);color:var(--c-text);text-decoration:none;margin-inline-end:auto}
.k-head nav{display:flex;gap:24px}
.k-head nav a{color:var(--c-text-muted);text-decoration:none;font-size:.9375rem}
.k-head nav a:hover{color:var(--c-accent-text)}
.k-head nav a[aria-current]{color:var(--c-text);box-shadow:inset 0 -2px 0 var(--c-accent)}
.k-call{color:var(--c-text);text-decoration:none;font-size:.9375rem;font-weight:600;
  white-space:nowrap}
.k-head--mid .k-in{flex-direction:column;gap:14px;padding-block:18px;min-height:0}
.k-head--mid .k-brand{margin:0;font-size:1.5rem}
@media (max-width:900px){.k-head nav{display:none}}

/* ── hero ───────────────────────────────────────────────────────────────── */
.k-plate{position:relative;min-height:clamp(440px,70vh,700px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--c-text)}
.k-plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* THE ONE EXCEPTION, and it is confined to .k-plate.
   Text sits over a photograph nobody has seen — a client's phone picture, which
   may be blown out exactly where the words go. No palette role can be correct
   against an unknown image, so the scrim is a fixed neutral and the text over it
   is fixed white. Every literal colour in this file is inside this block and
   exists for that reason. The scrim is sized for a BAD photograph rather than a
   good one. */
.k-plate::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(
  180deg,rgba(8,10,12,.44) 0%,rgba(8,10,12,.26) 42%,rgba(8,10,12,.84) 100%)}
.k-plate .k-in{position:relative;z-index:2;width:100%;padding-block:0 clamp(36px,6vh,72px)}
.k-plate h1,.k-plate .eyebrow{color:#fff}
.k-plate .k-sub{color:rgba(255,255,255,.92)}
.k-plate h1{font-size:var(--step-6);max-width:16ch}
.k-plate .btn{background:#fff;color:#111;border-color:#fff}
.k-plate .btn--line{background:transparent;color:#fff;border-color:#fff}

.k-state h1{font-size:var(--step-6);max-width:17ch;margin-bottom:.5em}
.k-split{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){.k-split{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}}
.k-split h1{font-size:var(--step-6);max-width:15ch}
.k-shot img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--c-surface-raised)}

/* ── prose ──────────────────────────────────────────────────────────────── */
.k-say h2{font-size:clamp(1.6rem,1.2rem + 1.9vw,2.5rem);max-width:20ch}
.k-col{max-width:62ch;color:var(--c-text-muted)}
.k-col p:last-child{margin-bottom:0}

/* ── figures ────────────────────────────────────────────────────────────── */
.k-pair{display:grid;gap:32px}
@media (min-width:780px){.k-pair{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px}}
.k-pair dl{margin:0;border-top:2px solid var(--c-text);padding-top:16px}
.k-pair dt{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-text-muted);margin-bottom:10px;max-width:30ch}
.k-fig{display:block;font-family:var(--font-head);font-weight:var(--head-weight);
  letter-spacing:var(--head-track);line-height:.95;color:var(--c-accent-text);
  font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);margin-bottom:10px}
.k-pair dd{margin:0;color:var(--c-text-muted);max-width:36ch}

.k-ledger{border-top:2px solid var(--c-text)}
.k-line{display:grid;gap:4px 28px;padding:20px 0;border-bottom:1px solid var(--c-border);
  align-items:baseline}
@media (min-width:720px){.k-line{grid-template-columns:9rem minmax(0,1fr)}}
.k-line .k-fig{font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem);margin:0}
.k-lab{font-weight:600;color:var(--c-text);margin:0 0 .3em}
.k-line p{margin:0;color:var(--c-text-muted);max-width:58ch;font-size:.9375rem}

/* ── lists ──────────────────────────────────────────────────────────────── */
.k-rows{list-style:none;margin:0;padding:0}
.k-rows li{border-top:1px solid var(--c-border)}
.k-rows li:last-child{border-bottom:1px solid var(--c-border)}
.k-rows a,.k-item{display:grid;gap:8px 32px;padding:24px 0;text-decoration:none;color:inherit;
  align-items:baseline}
@media (min-width:780px){.k-rows a,.k-item{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto}}
.k-rows h3{font-size:clamp(1.15rem,1.05rem + .7vw,1.5rem);margin:0}
.k-rows p{margin:0;color:var(--c-text-muted);max-width:58ch}
.k-go{font-size:.8125rem;font-weight:600;color:var(--c-accent-text);white-space:nowrap}
.k-rows a:hover{background:var(--c-surface-raised)}

.k-cards{display:grid;gap:2px;background:var(--c-border);border:1px solid var(--c-border)}
@media (min-width:760px){.k-cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.k-card{background:var(--c-surface);padding:clamp(24px,3vw,36px);display:flex;
  flex-direction:column;gap:10px;text-decoration:none;color:inherit}
a.k-card:hover{background:var(--c-surface-raised)}
.k-card h3{font-size:clamp(1.15rem,1.05rem + .7vw,1.45rem);margin:0}
.k-card p{margin:0;color:var(--c-text-muted);flex:1}

/* ── work ───────────────────────────────────────────────────────────────── */
/* A fixed frame, so a client's mismatched photographs still line up. */
.k-works{display:grid;gap:clamp(18px,2.5vw,28px)}
@media (min-width:820px){.k-works{grid-template-columns:repeat(3,1fr)}}
.k-work{display:flex;flex-direction:column;background:var(--c-surface-raised);
  border:1px solid var(--c-border)}
.k-work img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.k-cap{padding:18px 20px 22px;display:flex;flex-direction:column;gap:5px;flex:1}
.k-work h3{font-size:1.1rem;margin:0}
.k-meta{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-muted)}
.k-work p{margin:.4em 0 0;color:var(--c-text-muted);font-size:.9375rem}

/* ── quote ──────────────────────────────────────────────────────────────── */
.k-pull{max-width:900px;margin-inline:auto;text-align:center}
.k-pull blockquote{margin:0;font-family:var(--font-head);font-weight:var(--head-weight);
  letter-spacing:var(--head-track);line-height:1.24;color:var(--c-text);
  font-size:clamp(1.35rem,1.05rem + 1.5vw,2.1rem)}
.k-pull cite{display:block;margin-top:1.2em;font-style:normal;font-size:.75rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--c-text-muted)}

/* Testimonials as a collection. Base rules first, then the modifier — an
   equal-specificity modifier written above its base silently loses. */
.k-quotes{display:grid;gap:clamp(16px,2.2vw,24px);margin-top:26px}
@media (min-width:760px){.k-quotes{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.k-quote{margin:0;min-width:0;display:flex;flex-direction:column;gap:14px;
  background:var(--c-surface-raised);border:1px solid var(--c-border);padding:24px 26px}
.k-quote blockquote{margin:0;font-size:1.05rem;line-height:var(--lead);color:var(--c-text)}
.k-quote blockquote::before{content:'\201C';display:block;font-family:var(--font-head);
  font-size:2.4rem;line-height:.6;color:var(--c-accent);margin-bottom:.18em}
.k-quote figcaption{margin-top:auto;display:flex;flex-direction:column;gap:3px}
.k-quote cite{font-style:normal;font-weight:600;font-size:.9rem;color:var(--c-text)}
.k-quotes--stack{grid-template-columns:1fr;max-width:760px}

/* ── writing direction ─────────────────────────────────────────────────────
   Every inline-axis rule in this file is LOGICAL — margin-inline-end, not
   margin-right; border-inline-start, not border-left. `dir="rtl"` on <html>
   then mirrors the whole page with no other change, which is what makes Arabic
   and Hebrew four declarations of work rather than a rewrite.
   Block-axis rules (margin-bottom, padding-top) are direction-agnostic and stay
   as they are. A new physical inline rule is a bug; use the logical one. */

/* ── SHELLS — where a recipe stops being an order and becomes a layout ──────
   A recipe's section order gives a different SEQUENCE. It does not give a
   different page. `shell` is what does: it changes the measure, the vertical
   rhythm, and — for two of them — the arrangement of a band's own contents, so
   the same sections read as a different piece of design rather than the same
   design reshuffled.

   Ely's rule, and the reason this exists: "variation must be structural — five
   designs means five layouts; a palette swap is one design shown five times."

   Every rule below is written in logical properties, so dir="rtl" mirrors a
   shell the same way it mirrors everything else. No shell declares a --c-*. */

/* band — the default. Full-width bands, one centred measure, generous rhythm. */

/* column — hairlines and paper. Narrower, quieter, rules instead of fills. */
[data-shell="column"]{--k-max:1120px}
[data-shell="column"] .k-band{border-block-start:1px solid var(--c-border)}
[data-shell="column"] .k-band:first-of-type{border-block-start:0}

/* brief — one narrow measure and nothing beside it. Built for a practice whose
   credibility is its words: no grid to hide behind, so the writing has to work.
   Headings sit on the same axis as the text rather than above a layout. */
[data-shell="brief"]{--k-max:760px;--k-prose:64ch}
[data-shell="brief"] .k-band{padding-block:var(--k-rhythm-1)}
[data-shell="brief"] .k-band--tall{padding-block:var(--k-rhythm-2)}
[data-shell="brief"] h2{font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem)}
[data-shell="brief"] .k-label{margin-bottom:1.1em}
[data-shell="brief"] :is(.k-works,.k-quotes,.k-creds,.k-locs,.k-cards){
  grid-template-columns:1fr}

/* schedule — the heading moves into a side gutter and the content runs beside
   it, the way a statement or a filing is set. It is the strongest structural
   move available without new sections, and it collapses to one column below
   900px rather than shrinking into an unreadable pair. */
[data-shell="schedule"]{--k-max:1140px}
[data-shell="schedule"] .k-band{padding-block:var(--k-rhythm-1)}
@media (min-width:900px){
  [data-shell="schedule"] .k-band > .k-in{display:grid;
    grid-template-columns:190px minmax(0,1fr);column-gap:clamp(28px,4vw,64px);align-items:start}
  [data-shell="schedule"] .k-band > .k-in > .k-label{grid-column:1;grid-row:1;margin:0;
    position:sticky;top:calc(var(--k-head-h,64px) + 20px)}
  [data-shell="schedule"] .k-band > .k-in > :not(.k-label){grid-column:2}
  [data-shell="schedule"] .k-band > .k-in > :not(.k-label):first-child{grid-column:1 / -1}
}

/* mosaic — a wide field where the work leads and the first piece is bigger than
   the rest. For a trade whose photographs ARE the argument. */
[data-shell="mosaic"]{--k-max:1420px;--k-gut:clamp(16px,3vw,52px)}
[data-shell="mosaic"] .k-band{padding-block:var(--k-rhythm-1)}
@media (min-width:900px){
  [data-shell="mosaic"] .k-works{grid-template-columns:repeat(6,1fr)}
  [data-shell="mosaic"] .k-work{grid-column:span 2}
  [data-shell="mosaic"] .k-work:first-child{grid-column:span 4}
  [data-shell="mosaic"] .k-work:first-child img{aspect-ratio:16/9}
  [data-shell="mosaic"] .k-work:nth-child(4){grid-column:span 3}
  [data-shell="mosaic"] .k-work:nth-child(5){grid-column:span 3}
}

/* studio — the loudest of the five. A large display scale, headings allowed to
   run wider than the text they introduce, and a lot of air. For a business
   whose product is the look of the thing. */
[data-shell="studio"]{--k-max:1240px}
[data-shell="studio"] .k-band{padding-block:var(--k-rhythm-3)}
[data-shell="studio"] h2{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.4rem);max-width:18ch;
  margin-block-end:.5em}
[data-shell="studio"] .k-label{font-size:.7rem;letter-spacing:.18em;margin-bottom:3em}
[data-shell="studio"] .k-sub{font-size:clamp(1.1rem,1rem + .7vw,1.5rem);max-width:40ch}
@media (min-width:1000px){
  [data-shell="studio"] .k-band > .k-in > :is(p,.k-prose){margin-inline-start:auto;
    max-width:62ch}
}

/* parcel — dense and card-led, tighter rhythm, four across where the others do
   three. For a business whose page is a list of things to look at. */
[data-shell="parcel"]{--k-max:1340px}
[data-shell="parcel"] .k-band{padding-block:var(--k-rhythm-1)}
@media (min-width:1080px){
  [data-shell="parcel"] .k-works{grid-template-columns:repeat(4,1fr)}
  [data-shell="parcel"] .k-cards{grid-template-columns:repeat(4,1fr)}
}
/* A compact opening: the visitor came to scan listings, not to read a manifesto,
   so the hero gives up the height the other shells spend on it. */
[data-shell="parcel"] .k-state h1{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.9rem);max-width:20ch}
[data-shell="parcel"] .k-band--tall{padding-block:var(--k-rhythm-1)}
[data-shell="parcel"] .k-work h3{font-size:1rem}
[data-shell="parcel"] .k-cap{padding:14px 16px 18px}

/* ── the brand mark ───────────────────────────────────────────────────────── */
/* Two files when a logo exists, because a mark drawn for white paper vanishes
   on black. Only one is ever displayed; the other is display:none, so neither
   is decorative and both carry the business name as alt.
   Base first, then the mode rules — an equal-specificity rule written above its
   base silently loses. */
.k-logo{display:block;height:clamp(26px,2.4vw,34px);width:auto}
.k-logo--dark{display:none}
[data-mode="dark"] .k-logo{display:none}
[data-mode="dark"] .k-logo--dark{display:block}
@media (prefers-color-scheme:dark){
  [data-mode="auto"] .k-logo{display:none}
  [data-mode="auto"] .k-logo--dark{display:block}
}

/* ── notice, news, documents, credentials, locations, plain pages ─────────── */
/* Base rules first, then modifiers. Every list here uses min-width:0 on its
   items so a long unbroken string cannot push the page sideways — the fault
   that cost a day at 375px. */
.k-notice{background:var(--c-accent);color:var(--c-on-accent);font-size:.925rem}
.k-notice .k-in{padding-block:10px}
.k-notice p{margin:0}
.k-notice a{color:inherit;text-underline-offset:3px}

.k-news{display:grid;gap:0;margin-top:24px}
/* .k-post, NOT .k-item — `.k-rows a,.k-item` above is a three-column grid at
   780px and up, so calling a news entry .k-item silently gave it the services
   row layout. Found 2026-09-05 while adding shells. */
.k-post{min-width:0;padding:20px 0;border-top:1px solid var(--c-border)}
.k-post h3{margin:.15em 0 .3em;font-size:1.15rem}
.k-post p{margin:0;color:var(--c-text-muted)}
.k-news--cards{gap:clamp(16px,2.2vw,24px)}
@media (min-width:760px){.k-news--cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.k-news--cards .k-post{border-top:0;background:var(--c-surface-raised);
  border:1px solid var(--c-border);padding:22px 24px}

.k-docs{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.k-docs li{min-width:0;border-top:1px solid var(--c-border);padding:16px 0}
.k-docs a{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  text-decoration:none;color:var(--c-text)}
.k-docs a:hover .k-doc-name{text-decoration:underline}
.k-doc-name{font-weight:600}
.k-docs p{margin:.35em 0 0;color:var(--c-text-muted);font-size:.925rem}

.k-creds{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:clamp(16px,2.4vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.k-creds li{min-width:0;display:flex;flex-direction:column;gap:5px;
  border-top:2px solid var(--c-accent);padding-top:14px}
.k-creds img{width:auto;height:56px;object-fit:contain;object-position:inline-start;margin-bottom:6px}

.k-locs{display:grid;gap:clamp(18px,2.5vw,30px);margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.k-loc{min-width:0}
.k-loc h3{margin:0 0 .4em;font-size:1.15rem}
.k-loc p{margin:0 0 .45em}
.k-addr{font-style:normal;color:var(--c-text-muted)}

.k-legal{margin:18px 0 0;font-size:.8rem;opacity:.75}
.k-legal a{color:inherit}

/* ── process ────────────────────────────────────────────────────────────── */
/* Numbers in flow, never absolute — an absolutely positioned counter hides its
   own height from the layout, and the padding reserved for it is then a guess. */
.k-steps{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  counter-reset:s}
.k-steps > div{border-top:2px solid var(--c-accent);padding-top:16px}
.k-steps > div::before{counter-increment:s;content:counter(s);display:block;line-height:1;
  font-family:var(--font-head);font-weight:var(--head-weight);font-size:1.6rem;
  color:var(--c-accent-text);margin-bottom:12px}
.k-steps h3{font-size:1.0625rem;margin:0 0 .4em;font-family:var(--font-body);font-weight:600}
.k-steps p{margin:0;color:var(--c-text-muted);font-size:.9375rem}

/* ── people ─────────────────────────────────────────────────────────────── */
.k-roster{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.k-who h3{font-size:1.15rem;margin:0 0 .2em}
.k-role{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-accent-text);margin:0 0 1em;font-weight:600}
.k-who ul{list-style:none;margin:0;padding:0;font-size:.9375rem;color:var(--c-text-muted)}
.k-who li{padding:6px 0;border-top:1px solid var(--c-border)}

/* ── price ──────────────────────────────────────────────────────────────── */
.k-cost{display:grid;gap:28px;align-items:start}
@media (min-width:820px){.k-cost{grid-template-columns:minmax(0,1fr) auto;gap:64px}}
.k-cost h2{font-size:clamp(1.5rem,1.2rem + 1.5vw,2.2rem);margin:0 0 .5em;max-width:22ch}
.k-cost p{margin:0;color:var(--c-text-muted);max-width:56ch}
.k-tag{font-family:var(--font-head);font-weight:var(--head-weight);letter-spacing:var(--head-track);
  line-height:1;font-size:clamp(2.2rem,1.7rem + 2.2vw,3.2rem);color:var(--c-accent-text);
  white-space:nowrap}
.k-tag small{display:block;font-family:var(--font-body);font-weight:400;font-size:.75rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-muted);margin-bottom:.7em}

/* ── areas ──────────────────────────────────────────────────────────────── */
.k-tree{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.k-tree h3{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--c-text-muted);font-family:var(--font-body);font-weight:600;margin-bottom:.8em}
.k-tree ul{list-style:none;margin:0;padding:0}
.k-tree li{padding:5px 0;font-size:.9375rem;color:var(--c-text)}

/* ── faq — <details>, no JavaScript, and content in text form ───────────── */
.k-faq details{border-top:1px solid var(--c-border)}
.k-faq details:last-of-type{border-bottom:1px solid var(--c-border)}
.k-faq summary{cursor:pointer;list-style:none;padding:20px 44px 20px 0;position:relative;
  font-size:1.0625rem;color:var(--c-text);font-weight:500;min-height:44px;
  display:flex;align-items:center}
.k-faq summary::-webkit-details-marker{display:none}
.k-faq summary::after{content:'';position:absolute;right:12px;top:50%;width:10px;height:10px;
  margin-top:-7px;border-inline-end:2px solid var(--c-accent-text);
  border-bottom:2px solid var(--c-accent-text);transform:rotate(45deg)}
.k-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.k-faq details p{margin:0 0 1.2em;color:var(--c-text-muted);max-width:64ch}

/* ── notes — required disclaimers, at body size, never shrunk ───────────── */
.k-note{border-inline-start:3px solid var(--c-accent);padding-block:16px;
  padding-inline:22px 0;margin-bottom:20px;
  max-width:68ch}
.k-note p{margin:0;color:var(--c-text);font-size:var(--step-0)}
.k-note strong{color:var(--c-text)}

/* ── contact ────────────────────────────────────────────────────────────── */
.k-contact{display:grid;gap:clamp(32px,5vw,64px)}
@media (min-width:900px){.k-contact{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}}
.k-field{margin:0 0 20px;max-width:none}
.k-field label,.k-field .k-lbl{display:block;font-size:.875rem;color:var(--c-text);
  margin-bottom:.5em;font-weight:500}
.k-field input,.k-field textarea{width:100%;font:inherit;font-size:1rem;padding:13px 15px;
  border:1px solid var(--c-border);background:var(--c-surface-raised);color:var(--c-text);
  border-radius:var(--radius,0);min-height:48px}
.k-field textarea{min-height:auto;resize:vertical}
.k-fine{font-size:.875rem;color:var(--c-text-muted);max-width:48ch}
.k-aside{border-top:2px solid var(--c-text);padding-top:22px}
.k-aside h2{font-size:1.4rem;margin-bottom:.3em}
.k-aside h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--c-text-muted);font-family:var(--font-body);font-weight:600;margin:1.6em 0 .4em}
.k-aside p{margin:0;color:var(--c-text-muted)}
.k-big{font-family:var(--font-head);font-size:clamp(1.6rem,1.3rem + 1.4vw,2.2rem);
  color:var(--c-text);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.k-next{margin:0;padding-inline-start:1.15em;color:var(--c-text-muted)}
.k-next li{padding:5px 0}

/* ── footer ─────────────────────────────────────────────────────────────── */
.k-foot .k-in{padding-block:var(--k-rhythm-2)}
.k-foot h2{font-size:clamp(1.6rem,1.2rem + 2vw,2.5rem);max-width:17ch;margin-bottom:.7em}
.k-foot .k-acts{margin-bottom:3em}
.k-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding-top:2.2em;border-top:1px solid var(--c-border)}
.k-cols h3{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  font-family:var(--font-body);font-weight:600;margin-bottom:.9em;color:var(--c-text)}
.k-cols ul{list-style:none;margin:0;padding:0}
.k-cols li{padding:4px 0;font-size:.9375rem;color:var(--c-text-muted)}
.k-cols a{color:var(--c-text-muted);text-decoration:none}
.k-cols a:hover{color:var(--c-text)}
.k-foot--slim .k-in{padding-block:var(--k-rhythm-1)}
.k-fine-print{margin-top:2.6em;font-size:.875rem;color:var(--c-text-muted);max-width:74ch;
  line-height:1.6}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}