/* --- fonts: Archivo and Libre Franklin, self-hosted ---
   Copied from Google Fonts' own CSS with the file URLs pointed at /fonts.
   unicode-range means a browser downloads only the subsets a page uses.
   Self-hosted so the browser never makes a cross-origin font request. */
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-89b8e14e.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-594978ed.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-2d6953d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-89b8e14e.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-594978ed.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-2d6953d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-89b8e14e.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-594978ed.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-2d6953d7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/librefranklin-93097926.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/librefranklin-83745769.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/librefranklin-488b883a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/librefranklin-63f1d688.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/librefranklin-b843e8bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/librefranklin-93097926.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/librefranklin-83745769.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/librefranklin-488b883a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/librefranklin-63f1d688.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/librefranklin-b843e8bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/librefranklin-93097926.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/librefranklin-83745769.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/librefranklin-488b883a.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/librefranklin-63f1d688.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/librefranklin-b843e8bc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Built by Vir — one stylesheet for every page.
   Tokens first, then layout, then components. Buttons restate their colour
   inside .band: .band a is more specific than .btn, and letting the band win
   once produced an invisible call to action. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  color-scheme: light;
  --paper: #fbfaf8;
  --card: #fffdfa;
  --ink: #14110f;
  --muted: #5c534c;
  --line: #e6e1da;
  --accent: #a8451f;
  --accent-ink: #ffffff;
  --accent-soft: #fdf1ec;
  --band: #1b1512;
  --band-strip: #241b16;
  --band-ink: #f7f1ec;
  --band-dim: #b6a89e;
  --band-accent: #e8a882;
  /* Where the pointer is, and how wide the pool of light is. */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 96px;
  --cap: 12px; --sm: 15px; --body: 17px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14120f; --card: #1c1916; --ink: #f5f1ec; --muted: #a89e94;
    --line: #2e2925; --accent: #e8845c; --accent-ink: #1a0d06;
    --accent-soft: #241a14;
    --band: #0d0b09; --band-strip: #17130f;
    --band-ink: #f5f1ec; --band-dim: #a89e94;
    --band-accent: #e8a882;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14120f; --card: #1c1916; --ink: #f5f1ec; --muted: #a89e94;
  --line: #2e2925; --accent: #e8845c; --accent-ink: #1a0d06;
  --accent-soft: #241a14;
  --band: #0d0b09; --band-strip: #17130f;
    --band-ink: #f5f1ec; --band-dim: #a89e94;
  --band-accent: #e8a882;
}

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 var(--body)/1.65 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 28px; }
.narrow { max-width: 760px; }
a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
#content:focus { outline: none; }
img { max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.03em; margin: 0; font-weight: 700;
}
.kicker {
  font-size: var(--cap); font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s2);
}
/* Section folios, the way a printed page numbers its parts. The counter lives
   on main, so the mastheads and page heads inside .band are not numbered. */
main { counter-reset: sec; }
main .kicker { counter-increment: sec; }
main .kicker::before {
  content: counter(sec, decimal-leading-zero);
  color: var(--muted); margin-right: .85em;
}
section { padding-block: var(--s6); border-top: 1px solid var(--line); }
section h2 { font-size: clamp(28px, 3.2vw, 38px); margin-bottom: var(--s2); }
.sub { color: var(--muted); max-width: 58ch; margin: 0 0 var(--s5); }
.lede { font-size: 19px; color: var(--muted); max-width: 62ch; }

/* --- dark band: masthead, hero, closing call --- */
.band {
  background: var(--band); color: var(--band-ink);
  position: relative;
}
.band a { color: var(--band-accent); }
.band .kicker { color: var(--band-accent); }
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding-block: 18px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.mark {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px;
  letter-spacing: -.03em; text-decoration: none; color: var(--band-ink);
  white-space: nowrap;
}
.mark span { color: var(--band-accent); }
nav.main { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
nav.main a {
  color: var(--band-dim); text-decoration: none; font-size: var(--sm);
  padding-block: 12px;
}
nav.main a:hover { color: var(--band-ink); }
nav.main a[aria-current="page"] { color: var(--band-ink); font-weight: 600; }
nav.main a.tel { color: var(--band-accent); font-weight: 600; white-space: nowrap; }
.theme {
  background: transparent; color: var(--band-dim); font: inherit; font-size: 14px;
  border: 1px solid rgba(255,255,255,.22); border-radius: 100px;
  padding: 0 16px; min-height: 44px; cursor: pointer;
}

.hero { padding-block: var(--s6); }
/* Text and a real screenshot, not text and a lot of nothing. The shot is
   slightly the smaller column so the headline still leads. */
.hero .wrap {
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: var(--s5); align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 4.2vw, 56px); line-height: 1.04;
  font-weight: 800; margin-bottom: var(--s3);
}
.hero p {
  color: var(--band-dim); font-size: clamp(17px, 1.5vw, 19px);
  max-width: 46ch; margin: 0 0 var(--s4);
}
.heroshot { margin: 0; perspective: 1400px; }
.heroshot img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(255,255,255,.16);
}
.heroshot figcaption {
  color: var(--band-dim); font-size: 14px; padding-top: 12px;
}

/* The fact strip, lifted from the client template's hours/address/phone band.
   Four numbers behind hairlines does more for a page than any texture, and
   every one of them is answerable before the visitor has scrolled. */
.facts { background: var(--band-strip); border-block: 1px solid rgba(255,255,255,.12); }
.facts .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-block: 0;
}
.facts .wrap > div {
  padding: var(--s3) var(--s3) var(--s3) 0;
  border-left: 1px solid rgba(255,255,255,.12);
  padding-left: var(--s3);
}
.facts .wrap > div:first-child { border-left: 0; padding-left: 0; }
.facts .wrap > div span {
  display: block; font-size: 12.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--band-accent); margin-bottom: 8px;
}
.facts .wrap > div strong {
  font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: clamp(17px, 1.5vw, 21px); color: var(--band-ink);
  line-height: 1.15; display: block;
}
.pagehead { padding-block: var(--s5); }
.pagehead h1 {
  font-size: clamp(32px, 4.4vw, 52px); font-weight: 800;
  line-height: 1.06; max-width: 20ch; margin-bottom: var(--s2);
}
.pagehead p { color: var(--band-dim); max-width: 56ch; margin: 0; }
.pagehead .cta { margin-top: var(--s3); }

/* --- buttons --- */
.cta { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn {
  display: inline-block; background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); text-decoration: none; font: inherit;
  font-weight: 600; padding: 14px 26px; border-radius: 3px; cursor: pointer;
  min-height: 48px;
}
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.band a.btn { color: var(--accent-ink); }
.band a.btn.ghost { color: var(--band-ink); border-color: rgba(255,255,255,.3); }
.btn:disabled { opacity: .55; cursor: default; }

/* --- content blocks --- */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.four { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.four h3, .two h3 { font-size: 19px; margin-bottom: 8px; }
.four p, .two p { color: var(--muted); margin: 0; font-size: 16px; }

.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.tier { border: 1px solid var(--line); background: var(--card); padding: var(--s3); border-radius: 3px; }
.tier.pick { border-color: var(--accent); background: var(--accent-soft); }
.price { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; color: var(--accent); margin: 0 0 4px; }
.tier h3 { font-size: 20px; margin-bottom: 8px; }
.tier p { color: var(--muted); font-size: 15.5px; margin: 0; }
/* Back to top. Hidden until a full screen has been scrolled, so it never
   covers anything on a short page. Square-ish and quiet: it is a utility, not
   a call to action, and it must not compete with "Get a free front page". */
.totop {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 11px 15px; min-height: 44px;   /* a real tap target */
  color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 3px;
  cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { border-color: var(--accent); }
.totop:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .totop { transition: none; } }

/* The fast path through a long page. Hairlines rather than bullets, because
   a bulleted list of selling points reads as a brochure; a ruled list reads
   as a summary somebody wrote. */
.quick { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.quick li {
  padding-block: 14px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 17px; line-height: 1.5;
}
.quick li:first-child { border-top: 1px solid var(--line); }
.quick b { color: var(--ink); font-weight: 600; }

.fine { color: var(--muted); font-size: 15.5px; margin-top: var(--s3); max-width: 70ch; }
.fine strong { color: var(--ink); }

/* Example web addresses set in prose. Monospace so the reader's eye catches
   where yourshop.com stops and somebody else's company name begins. The size
   step down is because monospace faces run visually larger than Libre Franklin at the
   same px. */
.addr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em; color: var(--ink); white-space: nowrap;
}

/* Signposts on the 404: links that read as a list rather than as navigation. */
.plainlinks { list-style: none; margin: var(--s2) 0 0; padding: 0; }
.plainlinks li { padding-block: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 16px; }
.plainlinks a { font-weight: 600; }

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s; padding-block: var(--s3);
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 62px 1fr;
}
.steps li::before {
  content: counter(s, decimal-leading-zero); font-family: 'Archivo', sans-serif;
  font-weight: 700; font-size: 30px; line-height: 1; color: var(--accent);
}
.steps h3 { font-size: 19px; margin-bottom: 4px; }
.steps p { color: var(--muted); margin: 0; font-size: 16px; }

.rows { border-top: 1px solid var(--line); }
.rows > div { padding-block: var(--s3); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--s3); }
.rows h3 { font-size: 18px; }
.rows p { color: var(--muted); margin: 0; font-size: 16px; }

/* A face before the argument. The photo is the smaller column: it is there to
   show there is a person, not to be the point of the page. */
.meintro { display: grid; grid-template-columns: 1.35fr .65fr; gap: var(--s5); align-items: start; }
.meshot { margin: 0; }
.meshot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.meshot figcaption { color: var(--muted); font-size: 14.5px; padding-top: 10px; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.shot { margin: 0; }
.shot img { width: 100%; display: block; border: 1px solid var(--line); }
.shot figcaption { color: var(--muted); font-size: 14.5px; padding-top: 10px; }

/* --- form --- */
.formwrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
form { display: grid; gap: var(--s2); }
.field { display: grid; gap: 6px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
label { font-size: 14.5px; font-weight: 600; }
label .opt { font-weight: 400; color: var(--muted); }
input, select, textarea {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--card);
  border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px;
  width: 100%; min-height: 48px;
}
textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.askform textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px 14px; resize: vertical; min-height: 120px;
}
.askform textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.formnote.bad { color: var(--accent); }
.askform .btn { margin-top: var(--s2); }
/* The note explains the two fields above it, so it sits close to them and
   well clear of the next label. */
.askform .formnote { margin: 6px 0 var(--s3); }

.formnote { color: var(--muted); font-size: 14.5px; margin: 4px 0 0; }
.status { font-size: 15.5px; margin: 0; padding: 12px 14px; border-radius: 3px; display: none; }
.status.on { display: block; }
.status.ok { background: var(--accent-soft); color: var(--ink); border: 1px solid var(--accent); }
.status.bad { background: var(--card); border: 1px solid var(--line); }
.aside h3 { font-size: 19px; margin-bottom: 8px; }
.aside p { color: var(--muted); font-size: 16px; }
.aside .sig { color: var(--ink); font-weight: 600; }

/* --- the three-step form --- */
.steplabel {
  font-size: var(--cap); letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 var(--s4); text-align: center;
}
.stepbar {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: var(--s4);
}
.stepnum {
  font-size: var(--cap); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.dots { display: flex; gap: 8px; }
.dots i {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line);
  transition: background .25s ease;
}
.dots i.now { background: var(--accent); }
.dots i.done { background: var(--ink); }

form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
form legend {
  font-family: 'Archivo', sans-serif; font-weight: 700; letter-spacing: -.03em;
  font-size: clamp(26px, 3.4vw, 34px); text-align: center;
  padding: 0; margin: 0 auto var(--s4); max-width: 18ch;
}
.opts { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
/* The whole tile is the control; the radio itself is only there for
   keyboard and for browsers with no script. */
.opts label { position: relative; display: block; cursor: pointer; }
.opts input {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.opts span {
  display: block; text-align: center; font-weight: 600; font-size: 17px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); transition: border-color .15s, background .15s;
}
.opts label:hover span { border-color: var(--accent); }
.opts input:focus-visible + span {
  outline: 3px solid var(--accent); outline-offset: 3px;
}
.opts input:checked + span {
  border-color: var(--accent); background: var(--accent-soft);
}
.wizard .field, .wizard button[type=submit] { max-width: 460px; margin-inline: auto; }
.wizard .field { margin-bottom: var(--s2); }
.wizard button[type=submit] { display: block; width: 100%; }
.wizard .formnote, .wizard .status { max-width: 460px; margin-inline: auto; }
.back {
  display: block; margin: var(--s4) auto 0; background: none; border: 0;
  color: var(--muted); font: inherit; font-size: var(--sm); cursor: pointer;
  min-height: 44px; padding-inline: 16px;
}
.back:hover { color: var(--ink); }
/* Named .sent, not .done: a filled progress dot is already .done, and one
   class meaning two things is how a selector quietly matches the wrong node. */
.sent {
  text-align: center; font-family: 'Archivo', sans-serif; font-weight: 700;
  font-size: 22px; letter-spacing: -.02em; margin: 0;
}
.orcall {
  text-align: center; color: var(--muted); font-size: var(--sm);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
}

/* --- motion ---------------------------------------------------------
   Everything here is inside a no-preference query, so a visitor who has
   asked their system to reduce motion gets the form with no animation at
   all rather than a toned-down version of one. Nothing here moves layout:
   transforms and opacity only, so none of it costs a reflow. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes stepIn {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes stepInBack {
    from { opacity: 0; transform: translate3d(0, -14px, 0); }
    to   { opacity: 1; transform: none; }
  }
  .step[data-enter="fwd"]  { animation: stepIn .34s cubic-bezier(.2,.7,.3,1) both; }
  .step[data-enter="back"] { animation: stepInBack .34s cubic-bezier(.2,.7,.3,1) both; }

  /* The options arrive just after their question, one after another, so the
     eye lands on the heading first. */
  .step[data-enter] .opts label {
    animation: stepIn .32s cubic-bezier(.2,.7,.3,1) both;
    animation-delay: calc(var(--i) * 45ms + 90ms);
  }
  .step[data-enter] .field { animation: stepIn .32s cubic-bezier(.2,.7,.3,1) both; }
  .step[data-enter] .field:nth-of-type(2) { animation-delay: 60ms; }

  .opts span { transition: border-color .15s, background .15s, transform .12s; }
  .opts label:active span { transform: scale(.985); }

  .dots i { transition: background .25s ease, transform .25s ease; }
  .dots i.now { transform: scale(1.25); }

  @keyframes sentIn {
    from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  .sent { animation: sentIn .4s cubic-bezier(.2,.7,.3,1) both; }

  .btn { transition: filter .15s, transform .12s; }
  .btn:active { transform: translateY(1px); }

  /* No scroll reveals and no entry animation, deliberately.
     ----------------------------------------------------------------------
     Both were built and both were removed. The visitor is a shop owner
     checking whether I can be trusted with her website,
     and she is scrolling to find a price. Content that fades in at her
     delays the thing she came for and answers no question she has. A page
     that paints instantly is itself the argument.

     What stays is motion that ANSWERS her: hover states, the screenshot
     leaning toward her pointer, a reading-position hairline. Nothing here
     moves unless she moves first, and nothing loops.

     The reference site that prompted this has no scroll animation either.
     What it has is perpetual ambient motion, a 60s aurora rotation and a
     30s marquee, which suits a games community and would read as a hobby
     project to somebody about to hand over nine hundred dollars. */

  /* A row is a thing you can point at. The marker grows from the rule rather
     than the row lifting or shadowing, which is the generic hover. */
  .rows > div { transition: background .3s ease; }
  .rows > div h3 { transition: transform .3s cubic-bezier(.16,1,.3,1); }
  .rows > div::before {
    content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0;
    background: var(--accent); transition: width .45s cubic-bezier(.16,1,.3,1);
  }
  .rows > div:hover::before { width: 100%; }
  .rows > div:hover h3 { transform: translateX(5px); }

  .shot img { transition: transform .8s cubic-bezier(.16,1,.3,1); }
  .shot:hover img { transform: scale(1.02); }

  /* Real depth, at the cost of two custom properties and no library. The
     screenshot sits on a plane that leans a few degrees toward the pointer,
     which is what makes it read as an object on a desk rather than a picture
     pasted on. Capped at 5 degrees: past about 7 it stops looking like
     perspective and starts looking like a gimmick.

     Deliberately not on touch. The @media (hover: hover) guard on the script
     means a phone never runs a pointer handler, never composites a tilt, and
     never spends battery on decoration, which is the failure mode that makes
     most 3D on the web a bad trade for a local business. */
  .heroshot img {
    transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .55s cubic-bezier(.16,1,.3,1);
  }
  .heroshot.tracking img { transition: transform .12s linear; }

  /* Reading position, not a loading bar. Hairline, accent, top of the page. */
  .progress {
    position: fixed; inset: 0 auto auto 0; height: 2px; width: 100%;
    transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
    background: var(--accent); z-index: 50; pointer-events: none;
  }
}

/* Outside the motion query on purpose: a visitor who asked for reduced motion
   still gets a considered selection colour and scrollbar. */
::selection { background: var(--accent); color: var(--accent-ink); }
.rows > div { position: relative; }
* { scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line); border: 3px solid var(--paper); }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* --- prose for legal pages --- */
.prose h2 { font-size: 19px; margin: var(--s4) 0 var(--s1); }
.prose p, .prose li { color: var(--muted); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose strong { color: var(--ink); }
.updated { color: var(--muted); font-size: var(--sm); margin: 0 0 var(--s4); }

/* --- closing + footer --- */
.final { text-align: center; border-top: 0; padding-block: var(--s6); }
.final h2 { font-size: clamp(26px, 3.4vw, 40px); margin-bottom: var(--s3); }
.final .cta { justify-content: center; }
footer { border-top: 1px solid var(--line); padding-block: var(--s3); }
.foot { display: flex; flex-wrap: wrap; gap: 8px var(--s3); justify-content: space-between; color: var(--muted); font-size: 14.5px; }
.foot a { color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s3); }

@media (max-width: 860px) {
  .wrap { padding-inline: 20px; }
  section, .hero { padding-block: var(--s5); }
  .top { flex-wrap: wrap; }
  nav.main { gap: var(--s2); order: 3; width: 100%; border-top: 1px solid rgba(255,255,255,.1); }
  .two, .four, .tiers, .shots, .formwrap, .row2, .meintro { grid-template-columns: 1fr; }
  /* The hero screenshot beside the text is a thumbnail at phone width, so it
     stacks under the buttons instead. */
  .hero .wrap { grid-template-columns: 1fr; gap: var(--s4); }
  .hero p { max-width: none; }
  /* Four facts across a phone gives four one-word columns. Two by two. */
  .facts .wrap { grid-template-columns: 1fr 1fr; }
  .facts .wrap > div { padding: var(--s2) var(--s2) var(--s2) var(--s2); }
  .facts .wrap > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facts .wrap > div:nth-child(n+3) { border-top: 1px solid rgba(255,255,255,.12); }
  .four, .two { gap: var(--s4); }
  .rows > div { grid-template-columns: 1fr; gap: 6px; }
}