/* =====================================================================
   ELITE WEB AUTOMATIONS — v6 (2026-09-08). v5's grid, colour and type, with the
   chrome corrected: labels, nav, buttons and links are sentence-case Inter Tight; the
   mono face is reserved for the check sheet. The work sections are gone with the work.
   Bone ground, ink type, one vermilion accent that only marks the owner's
   next action. Instrument Serif for display at editorial scale, Inter Tight
   for reading, Space Mono for the fact lines. Twelve-column grid; asymmetry
   comes from spans, never from decoration. Every page renders in its final
   state without JS; v5.js only adds reveals and smooth scroll.
   ===================================================================== */
:root {
  --bone: #f2eee6;
  --bone-2: #e9e4da;
  --ink: #151412;
  --ink-2: #2a2825;
  --mute: rgba(21, 20, 18, .62);
  --mute-2: rgba(21, 20, 18, .42);
  --rule: rgba(21, 20, 18, .16);
  --rule-2: rgba(21, 20, 18, .08);
  --accent: #d8401a;
  --accent-hover: #bf3510; /* white on this passes 4.5:1; the lighter accent does not */
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, "Cascadia Mono", monospace;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pad: clamp(1.25rem, 4.5vw, 4.5rem);
  --gap: clamp(16px, 2vw, 28px);
  --max: 1520px;
}
* { box-sizing: border-box; }
html { background: var(--bone); color: var(--ink); }
body.v5 { margin: 0; font-family: var(--sans); font-size: 1.04rem; line-height: 1.55; background: var(--bone); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
::selection { background: var(--ink); color: var(--bone); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; left: var(--pad); top: -100px; background: var(--ink); color: var(--bone); padding: 8px 12px; z-index: 100; }
.skip-link:focus { top: 8px; }

/* ---- type ---- */
.display { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 0.98; }
.display em { font-style: italic; }
.h1 { font-size: clamp(2.7rem, 6.2vw, 6.6rem); }
.h2 { font-size: clamp(2.1rem, 4.2vw, 4.2rem); line-height: 1.0; }
.h3 { font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.08; }
.lede { font-size: clamp(1.1rem, 1.45vw, 1.35rem); line-height: 1.5; max-width: 34em; color: var(--ink-2); }
.body { max-width: 60ch; color: var(--ink-2); }
.body + .body { margin-top: 1em; }
.mono { font-family: var(--sans); font-size: 0.9rem; letter-spacing: 0; text-transform: none; line-height: 1.5; color: var(--mute); }
.mono--plain { font-size: 0.92rem; }
.mono a { text-decoration: none; border-bottom: 1px solid var(--rule); }
.mono a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.kicker { display: flex; align-items: center; gap: 12px; }
.kicker::before { content: none; }
.num { font-family: var(--serif); font-variant-numeric: tabular-nums lining-nums; }

/* ---- links & buttons ---- */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0; text-transform: none; font-weight: 500; text-decoration: none; background: var(--ink); color: var(--bone); padding: 16px 22px; border: 1px solid var(--ink); transition: background-color 240ms var(--ease), color 240ms var(--ease), transform 240ms var(--ease); cursor: pointer; font-weight: 400; }
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.on-ink .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.on-ink .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.on-ink .btn--ghost { background: transparent; color: var(--bone); }
.on-ink .btn--ghost:hover { background: var(--bone); color: var(--ink); }
.tlink { font-family: var(--sans); font-size: 0.95rem; font-weight: 500; letter-spacing: 0; text-transform: none; text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; transition: border-color 240ms var(--ease), color 240ms var(--ease); }
.tlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- layout ---- */
.wrap { padding-left: var(--pad); padding-right: var(--pad); }
.g { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.c1-5 { grid-column: 1 / 6; } .c1-6 { grid-column: 1 / 7; } .c1-7 { grid-column: 1 / 8; } .c1-8 { grid-column: 1 / 9; }
.c2-7 { grid-column: 2 / 8; } .c2-8 { grid-column: 2 / 9; } .c2-12 { grid-column: 2 / 13; }
.c7-13 { grid-column: 7 / 13; } .c8-13 { grid-column: 8 / 13; } .c9-13 { grid-column: 9 / 13; } .c6-13 { grid-column: 6 / 13; } .c5-13 { grid-column: 5 / 13; }
.c1-4 { grid-column: 1 / 5; } .c4-13 { grid-column: 4 / 13; } .c1-13 { grid-column: 1 / -1; }
.sec { padding-top: clamp(4rem, 9vw, 9rem); padding-bottom: clamp(4rem, 9vw, 9rem); }
.sec--tight { padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 5rem); }
.sec--flush { padding-top: 0; }
.rule { border-top: 1px solid var(--rule); }
.on-ink { background: var(--ink); color: var(--bone); }
.on-ink .mono { color: rgba(242, 238, 230, .6); }
.on-ink .body, .on-ink .lede { color: rgba(242, 238, 230, .78); }
.on-ink .rule, .on-ink .row { border-color: rgba(242, 238, 230, .16); }
.on-ink .kicker::before { background: var(--bone); }
.on-ink .mono a { border-bottom-color: rgba(242, 238, 230, .3); } .on-ink .mono a:hover { color: var(--bone); border-bottom-color: var(--bone); }
.on-ink ::selection { background: var(--bone); color: var(--ink); }
.figcap { margin-top: 10px; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 80; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 14px var(--pad); background: color-mix(in srgb, var(--bone) 84%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule-2); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .nav { background: rgba(242,238,230,.9); } }
.nav__mark { font-family: var(--serif); font-size: 1.25rem; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.nav__links { display: flex; gap: clamp(14px, 2.4vw, 36px); }
.nav__links a { font-family: var(--sans); font-size: 0.92rem; letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--mute); position: relative; padding: 6px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--ink); transition: right 320ms var(--ease); }
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; }
.nav__cta { display: none; }

/* ---- masthead (home) ---- */
.mast { padding: clamp(1.5rem, 3vw, 2.5rem) var(--pad) 0; }
.mast__name { font-family: var(--serif); font-size: clamp(2.35rem, 12.95vw, 13.4rem); line-height: 0.9; letter-spacing: -0.028em; white-space: nowrap; overflow: hidden; margin: 0; }
.mast__line { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); margin-top: clamp(0.75rem, 1.5vw, 1.25rem); }
.mast__line span { white-space: nowrap; }
/* v6.js wraps each word of the wordmarks in .w; a line may break between words, never inside one */
.mast__name .w, .foot6__name .w { white-space: nowrap; }

/* ---- hero ---- */
.hero { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); align-items: end; }
.hero__text { display: grid; gap: clamp(1.5rem, 2.6vw, 2.5rem); align-content: end; }
.hero__actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.hero__art { position: relative; }
.hero__desk { box-shadow: 0 30px 80px -30px rgba(21,20,18,.45); }
.hero__phone { position: absolute; left: 3%; bottom: -14%; width: 24%; box-shadow: 0 30px 60px -20px rgba(21,20,18,.5); border: 4px solid var(--ink); border-radius: 22px; overflow: hidden; background: var(--ink); }
.hero__phone img { aspect-ratio: 430 / 932; object-fit: cover; object-position: top; }
.hero__cap { margin-top: clamp(2.5rem, 4vw, 3.5rem); padding-left: 31%; } /* clears the phone that hangs below the desk */

.hero__text > .mono { padding-top: 1.25rem; border-top: 1px solid var(--rule); max-width: 46ch; }

/* ---- ledger strip ---- */
.ledger { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); }
.ledger > div { padding: clamp(1.25rem, 2.2vw, 2rem) var(--gap) clamp(1.25rem, 2.2vw, 2rem) 0; border-left: 1px solid var(--rule); padding-left: var(--gap); display: grid; gap: 8px; align-content: start; }
.ledger > div:first-child { border-left: 0; padding-left: 0; }
.ledger .num { font-size: clamp(2.2rem, 4vw, 4rem); line-height: 1; }

/* ---- index rows (what we do, pricing) ---- */
.row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2fr); gap: var(--gap); padding: clamp(1.75rem, 3vw, 2.75rem) 0; border-top: 1px solid var(--rule); align-items: start; }
.row:last-child { border-bottom: 1px solid var(--rule); }
.row__title { display: grid; gap: 10px; }
.row__price { text-align: right; font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.4rem); line-height: 1; display: grid; gap: 6px; justify-items: end; }
.row__price .mono { text-align: right; }
.facts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; }
.facts li { font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; padding: 9px 0; border-top: 1px solid var(--rule-2); color: var(--ink-2); }

/* ---- split spread (AI + person) ---- */
.spread { align-items: start; }
.spread__pin { position: sticky; top: 92px; display: grid; gap: 1.5rem; }
.ledger2 { display: grid; }
.ledger2__head, .ledger2__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); padding: 18px 0; border-top: 1px solid var(--rule); }
.ledger2__head { padding-top: 0; border-top: 0; }
.ledger2__row:last-child { border-bottom: 1px solid var(--rule); }
.ledger2__row p { color: var(--ink-2); }
.ledger2__row p b { font-weight: 500; color: var(--ink); }

/* ---- work ---- */
.feature { position: relative; overflow: hidden; }
.feature img { width: 100%; height: auto; }
.feature__over { position: absolute; left: var(--pad); right: var(--pad); bottom: clamp(1.5rem, 4vw, 3.5rem); display: grid; gap: 10px; color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.5); pointer-events: none; }
.feature__over .mono { color: rgba(255,255,255,.78); }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(21,20,18,0) 45%, rgba(21,20,18,.7) 100%); pointer-events: none; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; }
.pair figure { margin: 0; }
.pair img { border: 1px solid rgba(242,238,230,.12); }
.strip { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--pad) 1.5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip figure { flex: 0 0 auto; width: clamp(180px, 17vw, 240px); scroll-snap-align: start; margin: 0; display: grid; gap: 10px; }
.strip img { border-radius: 18px; border: 3px solid var(--ink-2); background: var(--ink); }
.piece { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: clamp(3rem, 6vw, 6rem) 0; border-top: 1px solid var(--rule); align-items: center; }
.piece__art { position: relative; }
.piece__art .phone { position: absolute; width: 24%; bottom: -8%; right: -4%; border: 4px solid var(--ink); border-radius: 20px; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(21,20,18,.5); background: var(--ink); }
.piece__art .phone img { aspect-ratio: 430 / 932; object-fit: cover; object-position: top; }
.piece__art .desk { box-shadow: 0 30px 80px -30px rgba(21,20,18,.4); }
.piece__text { display: grid; gap: 1.1rem; align-content: center; }
.piece:nth-child(odd) .piece__art { grid-column: 1 / 8; } .piece:nth-child(odd) .piece__text { grid-column: 9 / 13; }
.piece:nth-child(even) .piece__art { grid-column: 6 / 13; grid-row: 1; } .piece:nth-child(even) .piece__text { grid-column: 1 / 5; grid-row: 1; }
.piece:nth-child(even) .piece__art .phone { right: auto; left: -4%; }

/* ---- colour from the work: --tone is each build's own colour ---- */
.piece { --tone: var(--ink); }
.piece__art { padding: clamp(1.25rem, 3vw, 2.5rem); background: color-mix(in srgb, var(--tone) 10%, var(--bone)); }
.piece__text .mono:first-child, .piece__text .tlink { color: var(--tone); border-bottom-color: color-mix(in srgb, var(--tone) 40%, transparent); }
.piece__text .tlink:hover { color: var(--tone); border-bottom-color: var(--tone); }
.piece .display::first-letter { color: inherit; }
.strip figure { --tone: var(--bone); padding: 14px 14px 12px; background: color-mix(in srgb, var(--tone) 22%, var(--ink)); }
.strip figure img { border-color: color-mix(in srgb, var(--tone) 35%, var(--ink)); }
.strip figcaption { color: color-mix(in srgb, var(--tone) 55%, var(--bone)); }
@supports not (color: color-mix(in srgb, red 50%, blue)) { .piece__art { background: var(--bone-2); } .strip figure { background: var(--ink-2); } }
/* before / after gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) var(--gap); }
.pair--tone { --tone: var(--ink); display: grid; gap: 12px; }
.pair--tone .pair { gap: 12px; }
.pair--tone figure { margin: 0; display: grid; gap: 8px; }
.pair--tone img { border: 1px solid rgba(242,238,230,.12); }
.gallery .pair--tone:nth-child(3) { grid-column: 1 / -1; }
.gallery .pair--tone:nth-child(3) .pair { grid-template-columns: 1fr 1fr; }
.pair--tone .pair__name { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--tone) 60%, var(--bone)); }
.pair--tone .pair__name .display { font-size: clamp(1.3rem, 1.9vw, 1.8rem); }
.pair--tone .pair__name .mono { color: color-mix(in srgb, var(--tone) 70%, var(--bone)); }
@media (max-width: 900px) { .gallery { grid-template-columns: 1fr; } }

/* ---- work grid: photo-led, staggered, two loose columns ---- */
.wgrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) var(--gap); align-items: start; padding-top: 1rem; }
.wg { --tone: var(--bone); position: relative; display: grid; gap: 14px; text-decoration: none; color: inherit; }
.wg__photo { width: 100%; height: auto; display: block; }
.wg__chips { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 2; }
.wg__chips span { background: rgba(21,20,18,.72); color: var(--bone); padding: 5px 9px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(6px); }
.wg__phone { position: absolute; right: 4%; bottom: 14%; width: 21%; border: 3px solid var(--ink); border-radius: 16px; overflow: hidden; background: var(--ink); box-shadow: 0 24px 50px -18px rgba(0,0,0,.7); transform: translateY(6px); transition: transform 500ms var(--ease); }
.wg__phone img { aspect-ratio: 430 / 932; object-fit: cover; object-position: top; display: block; width: 100%; }
.wg:hover .wg__phone { transform: translateY(0); }
.wg__cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--gap); align-items: baseline; }
.wg__name { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.7rem); line-height: 1.1; }
.wg__arrow { opacity: 0; transition: opacity 300ms var(--ease); color: color-mix(in srgb, var(--tone) 60%, var(--bone)); }
.wg:hover .wg__arrow { opacity: 1; }
.wg-a { grid-column: 1 / 8; }
.wg-b { grid-column: 9 / 13; margin-top: clamp(4rem, 12vw, 12rem); }
.wg-c { grid-column: 2 / 7; margin-top: clamp(-2rem, -3vw, -1rem); }
.wg-d { grid-column: 8 / 13; margin-top: clamp(2rem, 6vw, 6rem); }
.wg-e { grid-column: 4 / 10; }
.on-ink .wg__cap .mono { color: rgba(242,238,230,.6); }
/* grain on the dark section: faint, like film */
.on-ink { position: relative; }
.on-ink::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.on-ink > * { position: relative; }
@media (max-width: 900px) {
  .wgrid { grid-template-columns: 1fr; gap: 2.5rem; }
  .wg-a, .wg-b, .wg-c, .wg-d, .wg-e { grid-column: 1 / -1; margin-top: 0; }
  .wg__cap { grid-template-columns: 1fr; gap: 4px; }
  .wg__phone { width: 26%; }
}

/* ---- process ---- */
.steps { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); row-gap: clamp(2rem, 4vw, 3.5rem); }
.step { display: grid; gap: 14px; padding-top: 16px; border-top: 1px solid var(--rule); align-content: start; }
.step:nth-child(1) { grid-column: 1 / 5; } .step:nth-child(2) { grid-column: 6 / 10; } .step:nth-child(3) { grid-column: 3 / 7; } .step:nth-child(4) { grid-column: 8 / 12; }
.step--you { border-top: 2px solid var(--accent); }
.step--you .mono { color: var(--accent); }
.step .h3 { max-width: 16ch; }

/* ---- trust trio ---- */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.trio > div { padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 14px; align-content: start; }

/* ---- forms ---- */
.form { display: grid; gap: 22px; }
.form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px var(--gap); }
/* minmax(0,1fr), not 1fr: inputs and textareas carry an intrinsic min-content width, and a
   bare 1fr track cannot shrink below it - two fields plus the gap overflowed the page by
   26px between 901px and 1100px. Every other grid in this file already does this. */
.f { min-width: 0; }
.f input, .f textarea { min-width: 0; max-width: 100%; }
.f { display: grid; gap: 8px; }
.f input, .f textarea { font: inherit; color: inherit; background: transparent; border: 0; border-bottom: 1px solid rgba(242,238,230,.35); padding: 10px 0; border-radius: 0; }
.f input:focus-visible, .f textarea:focus-visible { outline: none; border-bottom-color: var(--bone); }
.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.choice legend { padding: 0; margin-bottom: 10px; }
.choice label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.choice input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: .84rem; line-height: 1.5; color: rgba(242,238,230,.7); }
.consent input { margin-top: 4px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.consent a { color: var(--bone); }
.form__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hp { position: absolute; left: -9999px; }
.contact-lines { display: grid; gap: 8px; justify-items: start; }
.contact-lines a { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.4rem); line-height: 1.15; text-decoration: none; border-bottom: 1px solid rgba(242,238,230,.25); }
.contact-lines a:hover { border-bottom-color: var(--bone); }
.bone .contact-lines a { border-bottom-color: var(--rule); } .bone .contact-lines a:hover { border-bottom-color: var(--ink); }

/* ---- page heads (inner pages) ---- */
.phead { padding-top: clamp(3rem, 7vw, 7rem); padding-bottom: clamp(2.5rem, 5vw, 5rem); align-items: end; }
.phead .h1 { font-size: clamp(2.6rem, 5.6vw, 5.8rem); }

/* ---- faq / legal ---- */
.faq { margin: 0; }
.faq > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); padding: clamp(1.25rem, 2.4vw, 2rem) 0; border-top: 1px solid var(--rule); }
.faq > div:last-child { border-bottom: 1px solid var(--rule); }
.faq dt { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.1; }
.faq dd { margin: 0; color: var(--ink-2); max-width: 58ch; }
.legal { display: grid; gap: 1rem; max-width: 70ch; }
.legal h2 { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.1; margin-top: 1.5rem; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .6rem; }
.legal strong { font-weight: 600; color: var(--ink); }

/* ---- footer ---- */
.foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding: clamp(2rem, 4vw, 3rem) var(--pad) clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); align-items: start; }
.foot__name { grid-column: 1 / 5; font-family: var(--serif); font-size: 1.5rem; line-height: 1.1; }
.foot__nav { grid-column: 5 / 9; display: grid; gap: 6px; justify-items: start; }
.foot__nav a { text-decoration: none; }
.foot__meta { grid-column: 9 / 13; display: grid; gap: 6px; justify-items: start; }
.foot__meta a { text-decoration: none; }

/* ---- motion hooks (v5.js) ---- */
.r { opacity: 1; transform: none; }
.js .r { opacity: 0; transform: translateY(22px); }
.js .r.is-in { opacity: 1; transform: none; transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
.js .r[data-d="1"].is-in { transition-delay: 90ms; } .js .r[data-d="2"].is-in { transition-delay: 180ms; } .js .r[data-d="3"].is-in { transition-delay: 270ms; }
.veil { position: fixed; inset: 0; background: var(--bone); z-index: 90; pointer-events: none; opacity: 0; }
.js .veil { opacity: 1; animation: veil-out 0.7s var(--ease) 0.15s forwards; }
.veil.is-active { animation: none !important; }
@keyframes veil-out { to { opacity: 0; visibility: hidden; } }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .piece:nth-child(odd) .piece__art, .piece:nth-child(even) .piece__art { grid-column: 1 / 9; }
  .piece:nth-child(odd) .piece__text, .piece:nth-child(even) .piece__text { grid-column: 9 / 13; }
}
@media (max-width: 900px) {
  .c1-5, .c1-6, .c1-7, .c1-8, .c2-7, .c2-8, .c2-12, .c7-13, .c8-13, .c9-13, .c6-13, .c5-13, .c1-4, .c4-13 { grid-column: 1 / -1; }
  .hero { row-gap: 3rem; }
  .hero__phone { width: 30%; left: 3%; }
  .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger > div:nth-child(odd) { border-left: 0; padding-left: 0; } .ledger > div:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .row { grid-template-columns: 1fr; gap: 12px; } .row__price { text-align: left; justify-items: start; }
  .row__price .mono { text-align: left; }
  .spread__pin { position: static; }
  .ledger2__head, .ledger2__row { grid-template-columns: 1fr; gap: 10px; }
  .ledger2__head span:last-child { display: none; }
  .ledger2__row p:last-child::before { content: none; }
  .pair { grid-template-columns: 1fr; }
  .piece { grid-template-columns: 1fr; gap: 2rem; }
  .piece:nth-child(odd) .piece__art, .piece:nth-child(even) .piece__art, .piece:nth-child(odd) .piece__text, .piece:nth-child(even) .piece__text { grid-column: 1 / -1; grid-row: auto; }
  .piece__art { padding-bottom: 8%; padding-right: 6%; }
  .steps { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .step:nth-child(n) { grid-column: 1 / -1; }
  .trio { grid-template-columns: 1fr; }
  .form__grid { grid-template-columns: 1fr; }
  .faq > div { grid-template-columns: 1fr; gap: 10px; }
  .foot { grid-template-columns: 1fr; gap: 1.5rem; }
  .foot__name, .foot__nav, .foot__meta { grid-column: 1 / -1; }
  .mast__line { gap: 8px 20px; }
}
@media (max-width: 640px) {
  .nav__mark { display: none; }
  .nav__links { gap: 14px; width: 100%; justify-content: space-between; } .nav__links a { font-size: 0.88rem; }
  .nav__mark { font-size: 1.1rem; }
  .mast__name { font-size: clamp(2.35rem, 15.5vw, 4.5rem); white-space: normal; line-height: 0.92; }
  .hero__actions { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero__phone { width: 34%; left: 2%; bottom: -10%; }
  .hero__cap { padding-left: 40%; }
  .hero__art { padding-bottom: 10%; }
  .ledger .num { font-size: 2.2rem; }
}

/* phone: the proof has to arrive before the argument. Flatten the hero into the page grid and
   reorder so it reads name -> headline -> a real site -> the sentence -> call. */
@media (max-width: 900px) {
  .hero { row-gap: 1.5rem; }
  .hero__text { display: contents; }
  /* contents drops the parent's column span, so restate it on every child */
  .hero__text > *, .hero__art { grid-column: 1 / -1; }
  .hero__text > .display { order: 1; }
  .hero__art { order: 2; margin-top: .5rem; }
  .hero__text > .lede { order: 3; }
  .hero__actions { order: 4; }
  .hero__text > .mono { order: 5; margin-top: .25rem; }
  .hero__cap { margin-top: 1rem; }
  .btn { width: 100%; justify-content: center; }
  .hero__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .r { opacity: 1; transform: none; transition: none; }
  .js .veil { animation: none; opacity: 0; }
  .nav__links a::after { transition: none; }
}


/* =====================================================================
   v6 additions. The check sheet is the page's one device; the rest is
   quiet rows on the twelve-column grid.
   ===================================================================== */
.small { font-size: 0.92rem; color: var(--mute); max-width: 46ch; }
.nav__links .nav__cta { display: inline-flex; padding: 10px 16px; font-size: 0.88rem; color: var(--bone); }
.nav__links .nav__cta::after { content: none; }
.nav__links .nav__cta:hover { color: #fff; }
/* text links are tap targets on phones: give them a real hit box without changing the look */
.tlink { display: inline-block; padding-top: 8px; padding-bottom: 6px; margin: -8px 0 -6px; border-bottom-width: 1px; line-height: 1.6; }
@media (max-width: 640px) { .tlink { min-height: 44px; display: inline-flex; align-items: center; margin: 0; padding: 0; border-bottom: 0; text-decoration: underline; text-underline-offset: 4px; } }
.mast__line { font-family: var(--sans); font-size: 0.92rem; color: var(--mute); }
.mast__line a { text-decoration: none; color: var(--ink); }

/* ---- hero ---- */
.hero6 { padding-top: clamp(3rem, 6vw, 6rem); padding-bottom: clamp(3rem, 6vw, 6rem); align-items: center; }
.hero6__text { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); align-content: center; }
.hero6__text .small { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.hero6__text .hero__actions { order: 0; } /* v5's phone reorder rule would push the buttons below the small print */

/* ---- the check sheet ---- */
.sheet { --paper: var(--bone-2); background: var(--paper); padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem); box-shadow: 0 40px 80px -50px rgba(21,20,18,.45), 0 1px 0 rgba(21,20,18,.06); display: grid; gap: 0; }
.sheet__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.sheet__title { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.1; }
.sheet__note { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--mute); white-space: nowrap; }
.sheet__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 28px; gap: 14px; align-items: start; padding: 13px 0; border-bottom: 1px solid var(--rule); }
.sheet__row:last-child { border-bottom: 0; }
.sheet__item { font-weight: 500; line-height: 1.35; }
.sheet__src { font-family: var(--mono); font-size: 0.8rem; line-height: 1.45; color: var(--mute); }
.sheet__row--off .sheet__item { color: var(--ink-2); }
.sheet__row--off .sheet__src { color: var(--accent); }
.tick { width: 24px; height: 24px; margin-top: 1px; }
.tick circle { fill: none; stroke: var(--rule); stroke-width: 1; }
.tick path { fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; }
.sheet.is-on .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 420ms var(--ease); transition-delay: calc(var(--i) * 140ms + 320ms); }
.js .sheet .sheet__row { opacity: .55; transition: opacity 420ms var(--ease); transition-delay: calc(var(--i) * 140ms + 200ms); }
.js .sheet.is-on .sheet__row { opacity: 1; }
.sheet__row--off .off { font-family: var(--mono); font-size: 0.8rem; color: var(--accent); text-align: right; white-space: nowrap; line-height: 24px; }

/* ---- next steps (a real sequence) ---- */
.steps6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid var(--ink); }
.step6 { display: grid; gap: 12px; padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--gap) clamp(1.5rem, 2.6vw, 2.25rem) 0; border-left: 1px solid var(--rule); padding-left: var(--gap); align-content: start; }
.step6:first-child { border-left: 0; padding-left: 0; }
.step6__n { font-family: var(--serif); font-size: clamp(2.6rem, 4.2vw, 4rem); line-height: 1; }
.step6__who { font-size: 0.88rem; color: var(--mute); }
.step6 h3 { font-family: var(--serif); font-size: clamp(1.45rem, 2.1vw, 2rem); line-height: 1.08; max-width: 16ch; }
.step6--you .step6__n { color: var(--accent); }

/* ---- price: two columns of plain rows, then one row each for premium and add-ons ---- */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tier { display: grid; gap: 0; align-content: start; border-top: 1px solid var(--ink); }
.tier__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0 14px; }
.tier__name { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1.05; }
.tier__price { font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2.2rem); line-height: 1; white-space: nowrap; }
.tier__price small { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--mute); text-align: right; margin-top: 4px; }
.tier ul { list-style: none; margin: 0; padding: 0; }
.tier li { padding: 10px 0; border-top: 1px solid var(--rule-2); color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; }
.addons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); border-top: 1px solid var(--rule); margin-top: clamp(2rem, 3vw, 3rem); }
.addon { padding: 18px var(--gap) 0 0; display: grid; gap: 6px; align-content: start; }
.addon b { font-weight: 500; }
.addon span { color: var(--mute); font-size: 0.92rem; }
.premium { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); border-top: 1px solid var(--ink); margin-top: clamp(2rem, 3vw, 3rem); padding-top: 18px; }
.premium .tier__name { display: block; }
.premium .tier__price { margin-top: 8px; display: block; }

/* ---- the person ---- */
.person { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.person__text { display: grid; gap: 1.1rem; }
.person__name { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.1; }

/* ---- questions: native details, one open at a time ---- */
.faq6 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.faq6__list { border-top: 1px solid var(--ink); }
.faq6 details { border-bottom: 1px solid var(--rule); }
.faq6 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; font-family: var(--serif); font-size: clamp(1.2rem, 1.7vw, 1.55rem); line-height: 1.15; }
.faq6 summary::-webkit-details-marker { display: none; }
.faq6 summary::after { content: "+"; font-family: var(--sans); font-size: 1.3rem; line-height: 1; color: var(--mute); transition: transform 240ms var(--ease); flex: none; }
.faq6 details[open] summary::after { transform: rotate(45deg); }
.faq6 details p { padding: 0 0 20px; color: var(--ink-2); max-width: 58ch; }
.faq6 summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .hero6 { row-gap: 2.5rem; }
  .steps6 { grid-template-columns: 1fr; }
  .step6 { border-left: 0; padding-left: 0; padding-right: 0; border-top: 1px solid var(--rule); }
  .step6:first-child { border-top: 0; }
  .tiers, .addons, .premium, .person, .faq6 { grid-template-columns: 1fr; }
  .addon { padding-right: 0; border-top: 1px solid var(--rule-2); padding-top: 14px; }
  .addon:first-child { border-top: 0; }
  .sheet__row { grid-template-columns: minmax(0, 1fr) 28px; }
  .sheet__src { grid-column: 1; }
  .sheet__row .tick, .sheet__row .off { grid-column: 2; grid-row: 1; }
  .sheet__head { flex-direction: column; gap: 6px; }
  .sheet__note { white-space: normal; }
}
@media (max-width: 640px) {
  .nav__links { align-items: center; }
  .nav__links .nav__cta { padding: 9px 12px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tick path { stroke-dashoffset: 0; transition: none; }
  .js .sheet .sheet__row { opacity: 1; transition: none; }
  .faq6 summary::after { transition: none; }
}

/* =====================================================================
   v6.1 feel: interactions that answer the cursor. Every rule here is gated to
   fine pointers, and prefers-reduced-motion turns all of it off.
   ===================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* the sheet: a document on the desk. It tilts a few degrees toward the cursor and a
     soft lamp follows the pointer across the paper; --mx/--my/--rx/--ry come from v6.js */
  .sheet { position: relative; transform-style: preserve-3d; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 320ms var(--ease), box-shadow 320ms var(--ease); will-change: transform; }
  .sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.34), transparent 60%); opacity: 0; transition: opacity 320ms var(--ease); }
  .sheet:hover::after { opacity: 1; }
  .sheet:hover { box-shadow: 0 50px 90px -50px rgba(21,20,18,.55), 0 1px 0 rgba(21,20,18,.06); }
  .sheet__row { transition: background-color 200ms var(--ease), transform 200ms var(--ease); }
  .sheet__row:hover { background: rgba(255,255,255,.28); transform: translateX(6px); }
  .sheet__row:hover .sheet__src { color: var(--ink-2); }
  .sheet__row:hover .tick path { animation: tick-again 520ms var(--ease); }
  @keyframes tick-again { from { stroke-dashoffset: 22; } to { stroke-dashoffset: 0; } }
  .sheet__row--off:hover .off { transform: translateX(-2px); }
  .sheet__row--off .off { display: inline-block; transition: transform 200ms var(--ease); }

  /* the wordmark: letters near the cursor lift; v6.js splits the name into spans */
  .mast__name .ch { display: inline-block; transition: transform 260ms var(--ease); will-change: transform; }

  /* buttons and text links: a small nudge toward the cursor, then the colour change */
  .btn { transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), transform 200ms var(--ease); }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); transition-duration: 80ms; }
  .tlink { position: relative; }
  .tlink::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease); }
  .tlink:hover::after { transform: scaleX(1); }
  .tlink:hover { color: var(--accent-hover); }

  /* steps: the numeral steps forward and the column's rule brightens */
  .step6 { transition: border-color 240ms var(--ease); }
  .step6__n { display: inline-block; transition: transform 320ms var(--ease), color 240ms var(--ease); }
  .step6:hover .step6__n { transform: translateY(-6px); }
  .step6:not(.step6--you):hover .step6__n { color: var(--accent); }
  .step6:hover { border-color: var(--ink); }

  /* tier rows, add-ons: an ink bar draws in from the left and the line comes forward */
  .tier li, .addon { position: relative; transition: color 200ms var(--ease), transform 240ms var(--ease); }
  .tier li::before, .addon::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease); }
  .tier li:hover, .addon:hover { color: var(--ink); transform: translateX(6px); }
  .tier li:hover::before, .addon:hover::before { transform: scaleX(1); }
  .addon:hover span { color: var(--ink-2); }
  .tier__head { transition: transform 300ms var(--ease); }
  .tier:hover .tier__head { transform: translateX(4px); }

  /* the person block: the italic half of the heading warms on hover */
  .person:hover .display em { color: var(--accent); transition: color 300ms var(--ease); }

  /* questions: the summary slides a little and the answer settles in */
  .faq6 summary { transition: transform 220ms var(--ease), color 200ms var(--ease); }
  .faq6 summary:hover { transform: translateX(6px); }
  .faq6 summary:hover::after { color: var(--accent-hover); }
  .faq6 details[open] p { animation: answer-in 360ms var(--ease) both; }
  @keyframes answer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

  /* form fields: the underline draws in vermilion on focus and the label comes forward */
  .f { position: relative; }
  .f::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 360ms var(--ease); pointer-events: none; }
  .f:focus-within::after { transform: scaleX(1); }
  .f:focus-within .mono { color: var(--bone); transition: color 200ms var(--ease); }
  .contact-lines a { transition: letter-spacing 300ms var(--ease), border-color 240ms var(--ease); }
  .contact-lines a:hover { letter-spacing: 0.01em; }
}
@media (prefers-reduced-motion: reduce) {
  .sheet { transform: none !important; transition: none; }
  .sheet::after { display: none; }
  .mast__name .ch { transform: none !important; transition: none; }
  .btn, .btn:hover, .step6__n, .step6:hover .step6__n, .tier__head, .tier:hover .tier__head { transform: none; transition: none; }
  .sheet__row:hover .tick path, .faq6 details[open] p { animation: none; }
}


/* =====================================================================
   v6.2: the inner pages get devices of their own. Paper grain on the bone ground,
   the demo-assembly stage on About, a comparison ledger, an ink band with the line
   set large, a two-by-two of the four principles, a slow trade marquee.
   ===================================================================== */

/* paper: the same noise the ink band already uses, faint, so the ground has tooth */
body.v5 { position: relative; }
body.v5::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
/* :where() zeroes this rule's specificity. As `body.v5 > *` (0-1-1) it outranked every single-class
   rule on body's direct children: .nav lost position:sticky and z-index:80, so the header and its
   'Call or text' button scrolled away on every page; .skip-link lost position:absolute, so it sat
   in the flow and pushed the nav 26px down. At 0-0-0 anything with its own position rule wins,
   and main/footer still get relative + z-index:1 to sit above the grain overlay. */
:where(body.v5) > * { position: relative; z-index: 1; }

/* ---- page heads: the display line and the lede, no label above ---- */
.phead6 { padding-top: clamp(3rem, 7vw, 7rem); padding-bottom: clamp(2rem, 4vw, 4rem); align-items: end; }

/* ---- the stage: sources checked, then set into a page. Abstract on purpose: every card
   says "your", none of it is a real business. Plays once when scrolled into view. ---- */
.stage { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: center; padding: clamp(2rem, 4vw, 3.5rem) 0; }
.sources { display: grid; gap: 14px; }
.src { --d: 0ms; display: grid; grid-template-columns: 1fr 24px; gap: 12px; align-items: start; background: var(--bone-2); padding: 16px 18px; box-shadow: 0 24px 50px -36px rgba(21,20,18,.5); transform: translateX(-24px) rotate(-1.2deg); opacity: 0; transition: transform 700ms var(--ease) var(--d), opacity 700ms var(--ease) var(--d); }
.src:nth-child(2) { --d: 160ms; transform: translateX(-24px) rotate(0.8deg); }
.src:nth-child(3) { --d: 320ms; transform: translateX(-24px) rotate(-0.6deg); }
.src__label { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.02em; color: var(--mute); }
.src__name { font-weight: 500; line-height: 1.3; margin-top: 4px; }
.src__lines { display: grid; gap: 6px; margin-top: 10px; }
.src__lines i { display: block; height: 6px; background: rgba(21,20,18,.12); border-radius: 2px; }
.src__lines i:nth-child(2) { width: 72%; } .src__lines i:nth-child(3) { width: 48%; }
.src .tick { grid-column: 2; grid-row: 1; } /* a definite row alone would auto-place the tick into column 1 */
.src .tick path { stroke-dashoffset: 22; }
.stage.is-in .src { transform: none; opacity: 1; }
.stage.is-in .src .tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 480ms var(--ease) calc(var(--d) + 700ms); }
/* the page they become */
.page { --d: 450ms; position: relative; background: var(--bone-2); padding: 18px; box-shadow: 0 40px 80px -50px rgba(21,20,18,.5); display: grid; gap: 12px; opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease) var(--d), transform 700ms var(--ease) var(--d); }
.page__bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--ink); }
.page__bar b { font-family: var(--serif); font-size: 1.1rem; font-weight: 400; }
.page__bar i { display: block; width: 84px; height: 22px; background: var(--ink); }
.page__hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: end; padding: 12px 0; }
.page__hero b { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1; font-weight: 400; }
.page__hero i { display: block; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, rgba(21,20,18,.10) 0 2px, transparent 2px 10px); border: 1px solid var(--rule); }
.page__rows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.page__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); font-size: 0.85rem; color: var(--ink-2); }
.page__rows div span:last-child { font-family: var(--mono); font-size: 0.8rem; color: var(--mute); }
.page__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; }
.page__foot b { display: inline-block; background: var(--ink); color: var(--bone); font-size: 0.8rem; font-weight: 500; padding: 8px 12px; }
.page__foot span { font-family: var(--mono); font-size: 0.8rem; color: var(--mute); }
.page__stamp { position: absolute; right: -10px; top: -14px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent); padding: 5px 8px; background: var(--bone); transform: rotate(4deg) scale(.6); opacity: 0; transition: transform 500ms var(--ease) calc(var(--d) + 420ms), opacity 400ms var(--ease) calc(var(--d) + 420ms); }
.stage.is-in .page { opacity: 1; transform: none; }
.stage.is-in .page__stamp { opacity: 1; transform: rotate(4deg) scale(1); }
.page > * { opacity: 0; transform: translateY(8px); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.stage.is-in .page > * { opacity: 1; transform: none; }
.stage.is-in .page > :nth-child(1) { transition-delay: calc(var(--d) + 60ms); }
.stage.is-in .page > :nth-child(2) { transition-delay: calc(var(--d) + 140ms); }
.stage.is-in .page > :nth-child(3) { transition-delay: calc(var(--d) + 220ms); }
.stage.is-in .page > :nth-child(4) { transition-delay: calc(var(--d) + 300ms); }
.stage.is-in .page > .page__stamp { transition-delay: calc(var(--d) + 420ms); }
.stage__cap { grid-column: 1 / -1; font-size: 0.92rem; color: var(--mute); max-width: 60ch; }

/* ---- comparison ledger: the usual project versus this one ---- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); border-top: 1px solid var(--ink); }
.compare > div { padding-top: 16px; }
.compare h3 { font-family: var(--serif); font-size: clamp(1.3rem, 1.9vw, 1.7rem); line-height: 1.1; margin-bottom: 10px; }
.compare ul { list-style: none; margin: 0; padding: 0; }
.compare li { padding: 10px 0; border-top: 1px solid var(--rule-2); color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; }
.compare li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; border: 1px solid var(--rule); }
.compare--usual li { color: var(--mute); }
.compare--usual li::before { background: repeating-linear-gradient(135deg, rgba(21,20,18,.25) 0 1px, transparent 1px 4px); }
.compare--ours li::before { background: var(--ink); border-color: var(--ink); }
.compare--ours li:last-child { color: var(--ink); font-weight: 500; }

/* ---- ink band with the line set large ---- */
.pull { font-family: var(--serif); font-size: clamp(2rem, 4.6vw, 4.6rem); line-height: 1.0; letter-spacing: -0.012em; max-width: 14ch; }
.pull em { font-style: italic; color: rgba(242,238,230,.55); }

/* ---- the four principles: two by two, numerals set large ---- */
.four { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--ink); }
.four > div { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: clamp(1.5rem, 2.6vw, 2.25rem) var(--gap) clamp(1.5rem, 2.6vw, 2.25rem) 0; border-bottom: 1px solid var(--rule); align-items: start; }
.four > div:nth-child(odd) { padding-right: var(--gap); border-right: 1px solid var(--rule); }
.four > div:nth-child(even) { padding-left: var(--gap); }
.four .n { font-family: var(--serif); font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 0.9; color: var(--mute); transition: color 300ms var(--ease), transform 300ms var(--ease); }
.four h3 { font-family: var(--serif); font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; margin-bottom: 8px; }
.four p { color: var(--ink-2); max-width: 44ch; }

/* ---- the trade list, moving slowly ---- */
.trades { overflow: hidden; overflow-x: clip; contain: paint; max-width: 100%; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 16px 0; }
.trades__track { display: flex; gap: 0; width: max-content; animation: trades 60s linear infinite; }
.trades__track span { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.2; white-space: nowrap; padding: 0 18px; }
.trades__track span::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-left: 36px; vertical-align: middle; }
@keyframes trades { to { transform: translate3d(-50%, 0, 0); } }
.trades:hover .trades__track { animation-play-state: paused; }

/* ---- four steps on the pricing page: you / us ---- */
.steps6--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (hover: hover) and (pointer: fine) {
  .src { transition: transform 700ms var(--ease) var(--d), opacity 700ms var(--ease) var(--d), box-shadow 300ms var(--ease); }
  .stage.is-in .src:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(21,20,18,.55); }
  .four > div:hover .n { color: var(--accent); transform: translateY(-4px); }
  .compare li { transition: transform 220ms var(--ease), color 200ms var(--ease); }
  .compare li:hover { transform: translateX(6px); color: var(--ink); }
}
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .compare, .four { grid-template-columns: 1fr; }
  .four > div:nth-child(odd) { padding-right: 0; border-right: 0; }
  .four > div:nth-child(even) { padding-left: 0; }
  .steps6--four { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .src, .page, .page > *, .page__stamp { opacity: 1 !important; transform: none !important; transition: none !important; }
  .src .tick path { stroke-dashoffset: 0; }
  .page__stamp { transform: rotate(4deg) !important; }
  .trades__track { animation: none; flex-wrap: wrap; width: auto; }
  .four > div:hover .n { transform: none; }
}


/* =====================================================================
   v6.3 footer, after 21st's Footer Section 5 (solaceui, 19358), rebuilt for a page whose
   last section is already ink: one continuous ink block. The columns sit on top, the
   oversized wordmark closes the page along the bottom edge as the bookend to the
   masthead, drawn in a bone outline so it reads as a mark, not a headline.
   ===================================================================== */
.foot6 { position: relative; background: var(--ink); color: var(--bone); overflow-x: clip; border-top: 1px solid rgba(242,238,230,.16); }
.foot6::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.foot6 > * { position: relative; }
.foot6__panel { padding: clamp(2.5rem, 5vw, 4.5rem) var(--pad) clamp(1.5rem, 3vw, 2.5rem); display: grid; grid-template-columns: minmax(0, 6fr) repeat(3, minmax(0, 2fr)); gap: var(--gap); }
.foot6__brand { display: grid; gap: 14px; align-content: start; }
.foot6__tag { font-family: var(--serif); font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.1; max-width: 18ch; }
.foot6__tag em { font-style: italic; color: rgba(242,238,230,.6); }
.foot6__lines { display: grid; gap: 6px; justify-items: start; margin-top: 6px; }
.foot6__lines a { font-family: var(--serif); font-size: clamp(1.3rem, 2vw, 1.8rem); line-height: 1.15; text-decoration: none; border-bottom: 1px solid rgba(242,238,230,.25); transition: border-color 240ms var(--ease), color 240ms var(--ease); }
.foot6__lines a:hover { border-bottom-color: var(--bone); }
.foot6__col { display: grid; gap: 10px; align-content: start; }
.foot6__col h3 { font-family: var(--sans); font-size: 0.88rem; font-weight: 500; color: rgba(242,238,230,.6); margin-bottom: 4px; }
.foot6__col a { position: relative; text-decoration: none; color: var(--bone); font-size: 0.97rem; width: max-content; padding: 2px 0; }
.foot6__col a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right 300ms var(--ease); }
.foot6__col a:hover::after { right: 0; }
/* the meta line: one row, rule above, between the columns and the mark */
.foot6__meta { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin: 0 var(--pad); padding: 14px 0 0; border-top: 1px solid rgba(242,238,230,.16); font-size: 0.88rem; color: rgba(242,238,230,.6); }
.foot6__meta span { white-space: nowrap; }
.foot6__top { text-decoration: none; color: rgba(242,238,230,.6); border-bottom: 1px solid rgba(242,238,230,.25); transition: color 240ms var(--ease), border-color 240ms var(--ease); }
.foot6__top:hover { color: var(--bone); border-bottom-color: var(--bone); }
/* the mark: fitted to the page width by script, cut by the bottom edge */
.foot6__name { display: block; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0 var(--pad) clamp(1.5rem, 3vw, 2.5rem); font-family: var(--serif); font-weight: 400; font-size: 160px; line-height: 0.95; letter-spacing: -0.028em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(242,238,230,.55); text-stroke: 1px rgba(242,238,230,.55); }
.foot6__name .ch { display: inline-block; transition: transform 260ms var(--ease), -webkit-text-stroke-color 260ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .foot6__name:hover .ch { -webkit-text-stroke-color: rgba(242,238,230,.8); } }
@media (max-width: 900px) {
  .foot6__panel { grid-template-columns: 1fr 1fr; }
  .foot6__brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .foot6__panel { grid-template-columns: 1fr; }
  .foot6__meta { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .foot6__name .ch { transition: none; transform: none !important; } }


/* =====================================================================
   v6.4: who it is for, the comparison, the guarantee. Same grid, same rules.
   ===================================================================== */
.who { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); align-items: start; }
.trades6 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); }
.trades6 li { font-family: var(--serif); font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.15; padding: 12px 0; border-bottom: 1px solid var(--rule); transition: transform 220ms var(--ease), color 200ms var(--ease); }
.trades6 li:nth-child(odd) { padding-right: var(--gap); }
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.fit__col { border-top: 1px solid var(--ink); padding-top: 14px; }
.fit__col h3 { font-family: var(--sans); font-weight: 500; font-size: 0.95rem; margin-bottom: 8px; }
.fit__col ul { list-style: none; margin: 0; padding: 0; }
.fit__col li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--rule-2); color: var(--ink-2); line-height: 1.45; font-size: 0.97rem; }
.fit__col li::before { content: ""; width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; }
.fit__col--yes li::before { background: var(--ink); }
.fit__col--no li::before { border: 1px solid var(--rule); background: repeating-linear-gradient(135deg, rgba(21,20,18,.25) 0 1px, transparent 1px 4px); }
.fit__col--no h3, .fit__col--no li { color: var(--mute); }

/* the comparison: plain rows; our column carries the ink rule */
.versus { display: grid; margin-top: clamp(2rem, 3vw, 3rem); border-top: 1px solid var(--ink); }
.versus__row { display: grid; grid-template-columns: minmax(0, 3fr) repeat(3, minmax(0, 3fr)); gap: var(--gap); padding: 14px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.versus__row--head { padding: 14px 0 12px; font-size: 0.88rem; color: var(--mute); }
.versus__row [role="rowheader"] { font-weight: 500; }
.versus__row [role="cell"] { color: var(--ink-2); font-size: 0.97rem; line-height: 1.45; }
.versus__us { position: relative; padding-left: 14px; color: var(--ink) !important; }
.versus__us::before { content: ""; position: absolute; left: 0; top: -14px; bottom: -15px; width: 2px; background: var(--ink); }
.versus__row--head .versus__us { font-weight: 500; }
.versus__row:last-child .versus__us::before { bottom: -14px; }

/* the guarantee */
.promise { margin-top: clamp(2.5rem, 4vw, 4rem); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem); background: var(--bone-2); box-shadow: 0 40px 80px -50px rgba(21,20,18,.4), 0 1px 0 rgba(21,20,18,.06); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap); align-items: start; }
.promise ul { list-style: none; margin: 0; padding: 0; }
.promise li { padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ink-2); line-height: 1.5; }
.promise li:first-child { border-top: 0; padding-top: 0; }
.promise li b { font-weight: 500; color: var(--ink); }

/* booking: in the markup, shown by v6.js once a calendar URL is set */
.contact-lines a[data-booking] { font-family: var(--sans); font-size: 0.97rem; font-weight: 500; border-bottom: 1px solid rgba(242,238,230,.4); }

@media (hover: hover) and (pointer: fine) {
  .trades6 li:hover { transform: translateX(6px); color: var(--accent-hover); }
}
@media (max-width: 900px) {
  .who, .fit, .promise { grid-template-columns: 1fr; }
  .versus__row { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }
  .versus__row--head { display: none; }
  .versus__row [role="cell"]::before { content: attr(data-col) ": "; color: var(--mute); }
  .versus__us { padding-left: 0; font-weight: 500; }
  .versus__us::before { position: static; width: auto; height: auto; background: none; content: attr(data-col) ": "; color: var(--mute); font-weight: 400; }
}


/* Lenis: the library's own recommended rules, so its scroll and the browser's do not fight */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }


/* Home hero headline: each line rises from behind its own baseline once fonts are in (option C,
   2026-09-09). Runs only with html.js, which v6.js sets when motion is allowed; otherwise static. */
.rise .line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.rise .line .w { display: block; }
html.js .rise .line .w { transform: translateY(110%); }
html.js .rise.is-in .line .w { animation: rise .8s cubic-bezier(.2,.7,.1,1) both; animation-delay: calc(var(--i) * 120ms); }
@keyframes rise { from { transform: translateY(110%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { html.js .rise .line .w { transform: none; animation: none; } }


/* who it is for, simplified 2026-09-10: headline left, the fit in one sentence right, trades full width */
.for6 { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); align-items: end; }
.for6 .lede { max-width: none; }
.trades6--wide { grid-template-columns: repeat(4, 1fr); column-gap: var(--gap); }
.trades6--wide li { padding-right: 0; }
@media (max-width: 640px) { .trades6--wide { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 641px) and (max-width: 900px) { .trades6--wide { grid-template-columns: repeat(3, 1fr); } }

/* Touch targets (2026-09-12). Phone and email links were 25px tall on a phone; Apple's
   minimum is 44. The tel: link is the most valuable element on this site.
   inline-BLOCK not inline-flex: inline-flex stops the text wrapping, and
   elitewebautomations@gmail.com is long enough to blow the page out by 95px at 360px.
   Padding grows the hit area without touching the visual size.
   NOT applied to .nav a: inline-block there stopped the nav links collapsing and
   pushed the nav bar past the viewport by up to 80px. The nav has its own mobile
   treatment; leave it alone. */
@media (max-width: 900px) {
  a[href^="tel:"]:not(.btn),
  a[href^="mailto:"]:not(.btn) {
    display: inline-block; padding-block: 12px; overflow-wrap: anywhere;
  }
  .foot6__top { display: inline-block; padding-block: 11px; }
}


/* Closing card (2026-09-12). Four pages end with the dark .on-ink demo section directly above
   the dark footer. Same ink, but the footer carries a noise texture, so it read as two
   mismatched blacks butted together. Rejected so far: a charcoal footer ("grey looks bad")
   and a full-width bone stripe ("the white box doesn't do it").
   This insets the demo section as a rounded card on the bone page, so it reads as a panel
   sitting ON the page and the full-bleed footer reads as the page's base. Radius matches the
   16-22px already used on the site. No overflow:hidden - it would clip form focus outlines. */
main > .on-ink:last-child {
  margin: 0 var(--pad) clamp(3rem, 6vw, 5.5rem);
  border-radius: 20px;
}
@media (max-width: 600px) {
  main > .on-ink:last-child { border-radius: 14px; }
}

/* ---- what a bad website costs you (2026-09-14). Inputs on bone, result on bone-2 like .promise. ---- */
.cost { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap); border-top: 1px solid var(--ink); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.cost__inputs { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); align-content: start; }
.cost__f { display: grid; gap: 8px; min-width: 0; }
.cost__f > span { font-size: 0.97rem; color: var(--ink); }
.cost__f > span b { font-weight: 500; font-family: var(--serif); font-size: 1.35rem; }
.cost__f input[type=number] { font: inherit; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.2rem); color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--ink); padding: 6px 0; border-radius: 0; min-width: 0; max-width: 100%; }
.cost__f input[type=number]:focus-visible { outline: none; border-bottom-color: var(--accent); }
.cost__f input[type=range] { width: 100%; accent-color: var(--accent); margin: 6px 0 0; }
.cost__f small { color: var(--mute); font-size: 0.88rem; line-height: 1.45; }
.cost__result { background: var(--bone-2); padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.75rem); box-shadow: 0 40px 80px -50px rgba(21,20,18,.4), 0 1px 0 rgba(21,20,18,.06); display: grid; gap: 0; align-content: start; }
.cost__big { margin: 0; font-family: var(--serif); font-size: clamp(3rem, 7vw, 6.5rem); line-height: 0.95; letter-spacing: -0.02em; color: var(--accent); }
.cost__lab { margin: 6px 0 0; color: var(--mute); font-size: 0.92rem; }
.cost__rows { list-style: none; margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; padding: 0; }
.cost__rows li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: 0.97rem; }
.cost__rows li b { font-weight: 400; font-family: var(--serif); font-size: 1.2rem; white-space: nowrap; }
.cost__pay { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; padding-top: 14px; border-top: 1px solid var(--ink); color: var(--ink-2); }
.cost__pay b { font-weight: 500; color: var(--ink); }
.cost__actions { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.cost__src { margin-top: 1.5rem; max-width: none; color: var(--mute); }
.cost__src a { color: inherit; }
/* restaurant / contractor switch: same math, different survey figure, plus a close-rate step for trades */
.cost__mode { display: inline-flex; border: 1px solid var(--ink); margin-bottom: clamp(1rem, 2vw, 1.5rem); }
.cost__mode button { font: inherit; font-size: 0.97rem; min-height: 44px; padding: 0 1.25rem; background: transparent; color: var(--ink); border: 0; border-radius: 0; cursor: pointer; }
.cost__mode button + button { border-left: 1px solid var(--ink); }
.cost__mode button[aria-pressed="true"] { background: var(--ink); color: var(--bone); }
.cost__mode button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) { .cost { grid-template-columns: 1fr; } }

/* ---- about: the demo diagram shows what is checked, in words, not grey bars (2026-09-14) ---- */
.src__facts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.4; color: var(--mute); }
.src__facts li::before { content: "– "; }
.page__hero i { display: grid; place-items: center; }
.page__hero i span { font-family: var(--mono); font-size: 0.72rem; color: var(--mute); background: var(--bone-2); padding: 2px 6px; }
.page__bar .page__btn { display: inline-block; background: var(--ink); color: var(--bone); font-size: 0.78rem; font-weight: 500; padding: 5px 10px; }

/* ---- phone tap targets, 2026-09-14 ----
   Same bar as the .tlink rule above: standalone links get a 44px row. Links inside running
   sentences can't grow without reflowing the text, so they get vertical padding instead, which
   widens the tappable box to ~32px without moving a single line. */
@media (max-width: 640px) {
  .foot6__col { gap: 0; }
  .foot6__col h3 { margin-bottom: 6px; }
  .foot6__col a { min-height: 44px; display: flex; align-items: center; padding: 0; }
  .foot6__col a::after { bottom: 10px; }
  .consent { line-height: 1.85; }
  .consent input { width: 24px; height: 24px; margin-top: 1px; }
  .consent a, .cost__src a, .legal a { padding-block: 8px; }
}