/* Self-hosted Latin subsets of Anton, Inter and JetBrains Mono (all SIL Open Font Licence). Downloaded from Google Fonts on 2 November 2026. */
@font-face { font-family: 'Anton'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400-latin.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; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-400-700-latin.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; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 700; font-display: swap; src: url('../fonts/jetbrains-mono-500-700-latin.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; }

/* More Than Normal: poster-type design language.
   Condensed display type, mono labels, hard edges, red on near-black.

   How this file is organised, so nothing gets restyled twice:
   1. Tokens       every colour, size and spacing value lives here
   2. Base         resets, links, focus, text defaults
   3. Type         headings, then ONE label style and ONE small-text style shared by every component that needs them
   4. Layout       the shared two-column and card grids, sections, backgrounds
   5. Components   buttons, header, cards, forms, footer
   6. Effects      motion, grain, reduced-motion
   No inline styles and no <style> blocks on the page. */


/* ---------- 1. tokens ---------- */
:root {
  /* colour */
  --bg: #111110;
  --surface: #131315;
  --surface-2: #1b1b1e;
  --card: #131315;            /* pricing cards and the web apps callout */
  --ink: #f3efe8;             /* headings, key facts */
  --text: #cdc8bf;            /* body copy */
  --muted: #9a9aa2;           /* small print, meta labels */
  --line: #2a2a2f;
  --line-strong: #3a3a40;
  --accent: #bf1e2e;          /* fills, buttons, big headline */
  --accent-text: #e8404f;     /* lighter red for small text on black (passes AA) */
  --accent-dark: #9f1727;
  --warn: #ffb454;
  --ok: #6fcf97;
  --field-line: #6b6b74;      /* form control edges: 3:1 against the dark panel */
  --field-line-hover: #8a8a92;

  /* type */
  --display: Anton, "Arial Narrow", Impact, sans-serif;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --fs-body: 1.0625rem;       /* 17px */
  --fs-lead: 1.2rem;
  --fs-lead-lg: 1.3rem;       /* hero only */
  --fs-small: .9rem;          /* notes, scope lines, form hints, footer links */
  --fs-label: .75rem;         /* mono labels: eyebrows, tags, meta */
  --fs-ui: .78rem;            /* mono interface text: buttons, nav, summaries */
  --ls-label: .08em;
  --ls-ui: .1em;

  /* layout */
  --maxw: 1180px;
  --split: 980px;             /* where two-column layouts begin */
  --section-y: 96px;
  --gap-split: 40px 64px;
}


/* ---------- 2. base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--accent-text); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
p { margin: 0 0 1em; }
strong { color: var(--ink); }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 8px 12px; z-index: 60; }
.skip:focus { left: 8px; top: 8px; }
.accent { color: var(--accent); }


/* ---------- 3. type ---------- */
h1, h2, h3, h4 { color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .98; letter-spacing: .01em; margin: 0 0 .5em; }
h2, .contact h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
h3 { font-size: 1.7rem; }

.lead, .lead-in { font-size: var(--fs-lead); max-width: 36em; }
.lead-in { max-width: 46em; margin: 0 0 40px; }

/* ONE label style. Section labels are red, meta labels are muted, both share size, tracking and case. */
.eyebrow, .kicker, .foot-h, .kind, .n, .work h4,
.tags li, .quote footer, .legal, .price small, .mock-bar span, .crumbs {
  font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase;
}
.eyebrow, .foot-h, .kind, .n, .work h4 { color: var(--accent-text); }
.eyebrow, .foot-h, .kind, .n { display: block; margin: 0 0 16px; }
.kicker { color: var(--ink); margin: 0 0 28px; }
.tags li, .quote footer, .legal, .price small, .crumbs { color: var(--muted); }
.work h4 { margin: 1.4em 0 .4em; }

/* ONE interface-text style: buttons, nav, summaries, text links, the strip */
.btn, .site-nav a, .nav-btn, .textlink a, .strip li {
  font-family: var(--mono); font-size: var(--fs-ui); letter-spacing: var(--ls-ui); text-transform: uppercase;
}

/* ONE small-text style */
.fine, .scope, .disclosure, .form-status, .field .err { font-size: var(--fs-small); line-height: 1.5; }
.fine, .scope, .disclosure { color: var(--muted); }

/* headings break into even lines; body copy avoids a one-word last line */
h1, h2, h3, h4, .faq summary { text-wrap: balance; }
p, li, .lead { text-wrap: pretty; }


/* ---------- 4. layout ---------- */
.section { padding: var(--section-y) 0; }
.section.tint { background: var(--surface); border-block: 1px solid var(--line); }
.section-head { max-width: 760px; margin-bottom: 48px; }

/* every two-column section: one grid, each sets its own column ratio */
.intro, .foundations, .hosting, .work, .contact, .two-faq { display: grid; gap: var(--gap-split); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .intro, .foundations, .hosting, .work, .contact, .two-faq { grid-template-columns: var(--cols, 1fr 1fr); } }
.foundations { --cols: .9fr 1.1fr; }
.work { --cols: 1.1fr .9fr; }
.contact { --cols: .8fr 1.2fr; }
.two-faq { --cols: .8fr 1.2fr; }
.intro .section-head, .two-faq .section-head { margin-bottom: 0; }

/* every card row and step row: one grid, three up */
.packages, .steps { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .packages, .steps { grid-template-columns: repeat(3, 1fr); } }
.steps { list-style: none; margin: 0; padding: 0; gap: 32px; }

/* a hairline between neighbouring plain sections, so white sections stay distinct */
.section:not(.tint):not(.px) + .section:not(.tint):not(.px) { border-top: 1px solid var(--line); }

/* lists */
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { padding-left: 26px; position: relative; margin-bottom: .6em; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .6em; width: 14px; height: 3px; background: var(--accent); }

/* photo sections: the photo is --bgimg on ::before, the dark overlay is --ov on ::after, with grain on top.
   main.js drifts the photo with --py. A missing image just leaves the flat dark base. */
.px { position: relative; isolation: isolate; overflow: hidden; }
.px::before { content: ""; position: absolute; left: 0; right: 0; top: -70px; bottom: -70px; z-index: -2; background: var(--bgimg, none) center / cover no-repeat; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.px::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* grain only on photographic layers, never on type or interface */
  background: var(--ov, none), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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)' opacity='.07'/%3E%3C/svg%3E");
}
.bg-hero { --bgimg: url("../img/hero-architecture.webp"); background-color: var(--bg); --ov: linear-gradient(90deg, rgba(17, 17, 16, .85) 0%, rgba(17, 17, 16, .5) 50%, rgba(17, 17, 16, .15) 100%), linear-gradient(180deg, rgba(17, 17, 16, 0) 75%, var(--bg) 100%); }
.bg-hero::before { background-position: 68% center; }   /* keeps the cathedral and lit shopfront in frame on narrow screens */
.bg-office {
  background-color: var(--bg); padding: 112px 0;
  --ov: linear-gradient(90deg, rgba(17, 17, 16, .92) 0%, rgba(17, 17, 16, .78) 100%), linear-gradient(180deg, var(--bg) 0%, rgba(17, 17, 16, 0) 18%, rgba(17, 17, 16, 0) 85%, var(--bg) 100%);
  overflow: clip;   /* not hidden: hidden would stop the sticky heading from sticking */
}
.bg-office::before { filter: saturate(.8) contrast(1.05); }
@media (max-width: 700px) {
  .bg-hero { --bgimg: url("../img/hero-architecture-sm.webp"); --ov: linear-gradient(180deg, rgba(17, 17, 16, .55), rgba(17, 17, 16, .8)); }
}


/* ---------- 5. components ---------- */

/* buttons: hard edges, offset shadow on hover */
.btn {
  display: inline-block; border: 2px solid var(--accent); background: var(--accent); color: #fff;
  padding: 14px 24px; border-radius: 0; font-weight: 700; line-height: 1.3; text-align: center;
  text-decoration: none; cursor: pointer; transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); color: #fff; background: var(--accent-dark); border-color: var(--accent-dark); }
.btn.sm { padding: 10px 16px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { box-shadow: 5px 5px 0 var(--accent); color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.cta-row + .cta-row { margin-top: 12px; }
.textlink { margin: 16px 0 0; }
.textlink a { font-weight: 500; }

/* header and navigation. The Services item is a button that opens a list: it works by click, tap and keyboard, never hover alone. */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(17, 17, 16, .88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; gap: 24px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand { display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none; font-family: var(--display); font-size: 1.5rem; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.brand .dot { color: var(--accent); }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.site-nav a, .nav-btn { color: var(--muted); text-decoration: none; font-weight: 500; padding: 8px 12px; border-bottom: 2px solid transparent; }
.site-nav a:hover, .nav-btn:hover { color: var(--ink); }
.site-nav a[aria-current="page"], .nav-btn.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.nav-btn { background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.nav-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.nav-btn[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }
.has-sub { position: relative; }
.subnav { display: none; list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; min-width: 340px; background: #131315; border: 1px solid var(--line-strong); box-shadow: 0 20px 40px rgba(0, 0, 0, .5); }
.has-sub.open .subnav { display: block; }
.subnav a { display: block; padding: 12px 14px; border-bottom: 0; }
.subnav a:hover { background: rgba(255, 255, 255, .05); }
.nav-contact { display: none; }
.menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; padding: 0; position: relative; background: none; border: 1px solid var(--line-strong); cursor: pointer; }
.menu-btn span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--ink); transition: transform .25s, opacity .2s, top .25s; }
.menu-btn span:nth-child(1) { top: 14px; }
.menu-btn span:nth-child(2) { top: 21px; }
.menu-btn span:nth-child(3) { top: 28px; }
.menu-open .menu-btn span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.no-scroll { overflow: hidden; }
@media (max-width: 1040px) {
  .menu-btn { display: block; }
  .bar > .btn.sm { display: none; }
  /* absolute (not fixed): the header's backdrop-filter would otherwise trap a fixed child inside the 64px bar */
  .site-nav {
    position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - 65px); height: calc(100dvh - 65px);
    margin: 0; padding: 12px 20px 40px; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; overflow-y: auto;
    background: var(--bg); visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .2s, transform .2s, visibility 0s .2s;
  }
  .menu-open .site-nav { visibility: visible; opacity: 1; transform: none; transition: opacity .25s, transform .25s; }
  .site-nav a, .nav-btn { font: 400 2.3rem/1 var(--display); letter-spacing: .01em; color: var(--ink); padding: 18px 0; border-bottom: 1px solid var(--line); }
  .site-nav a:hover, .nav-btn:hover { color: var(--accent-text); }
  .nav-btn { width: 100%; justify-content: space-between; border-top: 0; border-left: 0; border-right: 0; }
  .subnav { position: static; min-width: 0; padding: 0 0 0 16px; border: 0; box-shadow: none; background: none; }
  .subnav a { font-size: 1.6rem; padding: 14px 0; }
  .site-nav a.nav-contact { display: block; margin-top: 28px; text-align: center; border: 2px solid var(--accent); background: var(--accent); color: #fff; font: 700 .9rem/1 var(--mono); letter-spacing: var(--ls-ui); padding: 18px; }
}
@media (max-width: 480px) { .brand { font-size: 1.25rem; } }

/* hero */
.hero { padding: 120px 0 88px; }
.hero-title { margin: 0; }
.hero-title .kicker, .hero-title .mega { display: block; }
.mega { font-size: clamp(2.2rem, 7.4vw, 6.4rem); line-height: .9; margin-bottom: 28px; letter-spacing: 0; }
.ln, .ln > span { display: block; }
.hero .lead { font-size: var(--fs-lead-lg); max-width: 34em; }
.hero-price { font-size: var(--fs-lead); font-weight: 700; color: var(--ink); margin: 24px 0 0; }
.hero .cta-row { margin-top: 28px; }

/* reassurance strip */
.strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border-block: 1px solid var(--line); background: var(--surface); }
@media (min-width: 860px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip li { padding: 22px 20px; font-weight: 500; border-left: 1px solid var(--line); }
.strip li:first-child { border-left: 0; }
@media (max-width: 859px) { .strip li:nth-child(odd) { border-left: 0; } .strip li:nth-child(n+3) { border-top: 1px solid var(--line); } }
.strip li::before { content: ""; display: inline-block; width: 10px; height: 3px; background: var(--accent); margin-right: 10px; vertical-align: middle; }

/* cards: packages and the web apps callout share one look */
.pkg, .callout { border: 1px solid var(--line-strong); background: var(--card); }
.pkg { display: flex; flex-direction: column; padding: 32px 28px; container-type: inline-size; }
.pkg.feature { border: 2px solid var(--accent); background: linear-gradient(180deg, rgba(191, 30, 46, .12), var(--card) 40%); }
.pkg h3 { margin-bottom: .2em; white-space: nowrap; font-size: clamp(1.5rem, 9.2cqw, 2.2rem); }   /* names stay on one line: scale with the card */
.price { font: 400 3.2rem/1 var(--display); color: var(--ink); margin: 0 0 4px; }
.price small { margin-left: 6px; }
.hosting .price { font-size: 4rem; }
.pkg .kind { margin-bottom: 20px; }
.pkg .for { font-weight: 600; color: var(--ink); margin-bottom: .4em; }
.pkg .ticks { flex: 1; margin: 8px 0 20px; }
.pkg .btn { align-self: flex-start; letter-spacing: .06em; font-size: .72rem; padding: 14px 16px; }
.pricing-note { max-width: 46em; margin: 32px 0 0; }
.callout { padding: 48px; display: flex; flex-wrap: wrap; gap: 24px 40px; align-items: center; justify-content: space-between; }
.callout > div { flex: 1 1 420px; max-width: 640px; }
.callout h2 { font-size: clamp(2rem, 4vw, 3rem); }
.callout p { margin: 0; }
@media (max-width: 600px) { .callout { padding: 32px 24px; } }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; position: relative; padding: 20px 44px 20px 0; font: 600 1.1rem/1.35 var(--sans); color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 500 1.5rem var(--mono); color: var(--accent-text); }
.faq[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 20px; max-width: 34em; }

/* foundations list, process steps */
.foundations .ticks { margin: 0; }
.foundations .ticks li { padding-bottom: .6em; border-bottom: 1px solid var(--line); margin-bottom: .6em; }
.steps li { border-top: 2px solid var(--ink); padding-top: 16px; }
.steps h3 { font-size: 1.5rem; }
.steps p { color: var(--muted); margin: 0; }

/* showcase */
.work-left .section-head { margin-bottom: 24px; }
.work-lead { margin-bottom: 24px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 20px 0; }
.tags li { border: 1px solid var(--line-strong); padding: 6px 10px; }
.disclosure { border-left: 3px solid var(--accent); padding-left: 14px; }
.quote { margin: 0 0 8px; padding: 0 0 0 16px; border-left: 3px solid var(--accent); }
.quote p { color: var(--ink); margin: 0 0 .5em; }
.shots { position: relative; padding-bottom: 56px; }
.shot { margin: 0; border: 1px solid var(--line-strong); background: #1b1b1a; box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.shot img { display: block; width: 100%; height: auto; }
.shot.desk { width: 88%; }
.shot.phone { position: absolute; right: 0; bottom: 0; width: 30%; border: 6px solid #0a0a0a; border-radius: 26px; background: #0a0a0a; overflow: hidden; }   /* black bezel, in any theme */
.mock-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid #333; }
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; background: #444; }
.mock-bar span { margin-left: 10px; color: #9a9aa2; }   /* browser chrome stays dark in any theme */

/* the sticky panels: the heading travels with its content, never the other way round */
@media (min-width: 980px) {
  .work-left { position: sticky; top: 88px; }
}
@media (min-width: 980px) and (min-height: 600px) {
  .contact > .section-head { position: sticky; top: 104px; }
}

/* inner pages: dark title band, breadcrumb, comparison table, optional form prompts */
.page-hero { padding: 64px 0 72px; border-bottom: 1px solid var(--line); }
/* inner-page title band: a faceted mountain ridge in tonal steps (MTN is short for mountain), with one red line on the highest summit. Decorative. */
.page-hero { background: url("../img/hero-peaks.svg") center bottom / 100% 50% no-repeat, var(--bg); }
@media (max-width: 700px) { .page-hero { background-size: 100% 24%; } }
.page-hero h1 { font-size: clamp(2.5rem, 6vw, 4.8rem); line-height: .95; max-width: 14em; margin-bottom: 24px; }
.page-hero .lead { font-size: var(--fs-lead-lg); max-width: 36em; }
.crumbs { margin: 0 0 32px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs [aria-current] { color: var(--ink); }



.extra { grid-column: 1 / -1; display: grid; gap: 14px; }
.extra[hidden] { display: none; }
.extra .fine { margin: 0; }

/* decide-and-order page: the choice rows, the package detail layout, the term list */
.choices { border-bottom: 1px solid var(--line); }
.choice { display: grid; gap: 12px 40px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
@media (min-width: 980px) { .choice { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 300px; } }
.choice h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; }
.choice-pkg { margin: 0; }
.choice-pkg a { font-weight: 700; color: var(--ink); }
.choice-pkg strong { margin-left: 8px; color: var(--accent-text); }
.choice-pkg span { display: block; color: var(--muted); font-size: var(--fs-small); }
.choice .cta-row { margin: 0; }
.intro .section-head .price { margin-bottom: 8px; }
.intro .section-head .includes { margin-top: 24px; }
.terms { margin: 0; }
.terms > div { padding: 20px 0; border-top: 1px solid var(--line); }
.terms > div:last-child { border-bottom: 1px solid var(--line); }
.terms dt { font: 600 1.05rem var(--sans); color: var(--ink); margin: 0 0 6px; }
.terms dd { margin: 0; max-width: 44em; }
@media (min-width: 980px) { .steps.four { grid-template-columns: repeat(4, 1fr); } }

/* prototype markers, removed at launch */

/* forms: floating labels, chips, inline validation, real submit states */
.panel { background: rgba(19, 19, 21, .94); border: 1px solid #2c2c31; border-radius: 14px; padding: 32px; box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.form .grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 18px; }
.field { position: relative; grid-column: 1 / -1; margin: 0; }
@media (min-width: 480px) { .form .grid { grid-template-columns: 1fr 1fr; } .field.half { grid-column: auto; } }
.field > input, .field > textarea {
  display: block; width: 100%; min-height: 56px; padding: 25px 40px 8px 14px; font: inherit; line-height: 1.4; color: var(--ink);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--field-line); border-radius: 10px; transition: border-color .15s, background .15s, box-shadow .15s;
}
.field > textarea { min-height: 112px; resize: vertical; padding-top: 28px; }
.field > input:hover, .field > textarea:hover { border-color: var(--field-line-hover); }
.field > input:focus, .field > textarea:focus { outline: none; background: rgba(255, 255, 255, .06); border-color: var(--accent-text); box-shadow: 0 0 0 4px rgba(191, 30, 46, .25); }
.field > label {
  position: absolute; left: 15px; top: 18px; margin: 0; max-width: calc(100% - 50px); font: 400 1rem/1.2 var(--sans);
  color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; transform-origin: 0 0; transition: transform .16s ease, color .16s ease;
}
.field > input:focus + label, .field > input:not(:placeholder-shown) + label,
.field > textarea:focus + label, .field > textarea:not(:placeholder-shown) + label { transform: translateY(-11px) scale(.76); }
.field > input:focus + label, .field > textarea:focus + label { color: var(--accent-text); }
.field .opt { margin-left: 8px; font-size: .86em; color: var(--muted); }
.field .err { display: none; margin: 6px 4px 0; color: var(--warn); }
.field.invalid .err { display: block; }
.field.invalid > input, .field.invalid > textarea { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(255, 180, 84, .14); }
.field .tick { position: absolute; right: 14px; top: 19px; width: 18px; height: 18px; fill: none; stroke: var(--ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .2s; pointer-events: none; }
.field.valid .tick { opacity: 1; }
.chipset { border: 0; padding: 0; margin: 0 0 4px; min-width: 0; }
.chipset legend { padding: 0; margin-bottom: 10px; font-size: var(--fs-small); color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 18px; font-size: var(--fs-small); color: var(--ink); background: rgba(255, 255, 255, .04); border: 1px solid var(--field-line); border-radius: 999px; transition: background .15s, border-color .15s, color .15s; }
.chip:hover span { border-color: var(--field-line-hover); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--accent-text); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .send { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 18px 24px; border-radius: 10px; }
.form .send:hover { transform: none; box-shadow: 0 10px 28px rgba(191, 30, 46, .4); }
.form .send .arrow { transition: transform .15s; }
.form .send:hover .arrow { transform: translateX(4px); }
.form .send .spin { display: none; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.form .send.loading .spin { display: block; }
.form .send.loading .arrow { display: none; }
.form .send:disabled { opacity: .7; cursor: progress; }
.fine { margin: 14px 0 0; }
.form-status { margin: 10px 0 0; min-height: 1.2em; font-weight: 500; color: var(--warn); }
.form-done { text-align: center; padding: 20px 4px 8px; outline: none; }
.form-done .check { width: 68px; height: 68px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 50%; background: rgba(111, 207, 151, .14); }
.form-done .check svg { width: 32px; height: 32px; fill: none; stroke: var(--ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.form-done .check path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .5s .15s ease forwards; }
.form-done h3 { font-size: 2.2rem; margin-bottom: .3em; }
.form-done p { max-width: 26em; margin: 0 auto; }

/* footer */
.site-footer { padding: 72px 0 0; overflow: hidden; background: url("../img/hero-peaks.svg") center bottom / 100% 55% no-repeat, var(--bg); }
.foot { display: grid; gap: 40px 32px; grid-template-columns: 1fr 1fr; align-items: start; }
.foot-brand { grid-column: 1 / -1; }
.foot-brand .brand { font-size: 2.6rem; }
.foot-tag { margin: 10px 0 0; color: var(--muted); font-size: var(--fs-small); }
@media (min-width: 900px) { .foot { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; } .foot-brand { grid-column: auto; } }
.foot a { display: block; color: var(--ink); text-decoration: none; margin-bottom: 10px; font-size: var(--fs-small); }
.foot a:hover { color: var(--accent-text); }
.foot a.social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 2px 0 0 -9px; }
.foot a.social svg { display: block; }
/* the wordmark fills the width of the page, solid, with the red full stop */
.mark-wrap { container-type: inline-size; margin-top: 56px; }
.bigmark { font-family: var(--display); font-size: calc(100vw / 7.9); font-size: calc(100cqw / 7.8); line-height: .86; white-space: nowrap; color: var(--surface-2); text-transform: uppercase; user-select: none; }   /* deliberately low contrast: decorative, the studio name is in the page text and the copyright line */
.legal { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 32px; padding-bottom: 32px; }
.legal a { color: var(--muted); text-decoration: none; }
.legal a:hover { color: var(--ink); }
.legal-links { display: flex; gap: 24px; }


/* ---------- 6. effects ---------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; z-index: 70; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .px::before { transform: none; }
  .form-done .check path { animation: none; stroke-dashoffset: 0; }
  .form .send .spin { animation-duration: 2s; }
}


/* ---------- 7. experiments: switches on <body>, delete the class to switch one off ----------

   theme-light
     Every content section takes light tokens. The header, hero, reassurance strip, contact photo and footer stay dark.
     It works by overriding the colour tokens, so no component needs its own light rules.

   no-eyebrows
     Hides the small red section labels. The hero's own label (.kicker) stays.
*/
.theme-light .section:not(.px) {
  --bg: #fff;                  /* main background */
  --surface: #f5f5f5;          /* alternate sections */
  --card: #fafafa;             /* pricing cards, callout */
  --ink: #171717;              /* headings and primary copy */
  --text: #494949;             /* supporting paragraphs */
  --muted: #6b6b6b;            /* small print and meta labels */
  --line: #ddd;                /* rules */
  --line-strong: #ddd;         /* card boundaries */
  --accent-text: #bf1e2e;      /* the brand red is readable on white, no lighter red needed */
  background: var(--bg);
  color: var(--text);
}
.theme-light .section.tint:not(.px) { background: var(--surface); }
.theme-light .section:not(.px) .shot { box-shadow: 0 24px 50px rgba(23, 23, 23, .16); }
.theme-light .section:not(.px) .pkg.feature { background: linear-gradient(180deg, rgba(191, 30, 46, .06), var(--card) 45%); }

.no-eyebrows .eyebrow, .no-eyebrows .hosting .foot-h { display: none; }


/* ---------- 8. experiment: gfx-flecks, switch on <body>. Delete the class to switch it off ----------
   Three small devices to break up long runs of text, none of them decoration for its own sake:
   a red end mark on headings (echoes the logo's red full stop), large outlined step numerals, and key sentences set in display type. */
.stop { color: var(--accent); }
.gfx-flecks .steps .n { font: 400 5rem/.8 var(--display); letter-spacing: 0; text-transform: none; color: transparent; -webkit-text-stroke: 1.5px var(--muted); margin-bottom: 12px; }
.gfx-flecks .fact, .gfx-flecks .lead-in {
  font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink);
  border-left: 4px solid var(--accent); padding-left: 18px; max-width: 22em; text-wrap: balance;
}
.gfx-flecks .lead-in { max-width: 30em; }

/* gfx-flecks, continued: structure for the text-only two-column sections.
   Labelled points get a small red marker, and one thin spine (with a red tick) separates the columns. */
.gfx-flecks .terms dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; background: var(--accent); vertical-align: .08em; }
@media (min-width: 980px) {
  .gfx-flecks .intro.spine { column-gap: 0; }
  .gfx-flecks .intro.spine > :first-child { padding-right: 56px; }
  .gfx-flecks .intro.spine > :last-child { position: relative; padding-left: 56px; border-left: 1px solid var(--line-strong); }
}

/* package sections: "have ready" is a checklist card with empty boxes, and boundaries are boxed notes */
.checklist { background: var(--card); border: 1px solid var(--line-strong); padding: 28px; }
.checklist .includes { margin: 0 0 16px; }
.checks { list-style: none; margin: 0 0 24px; padding: 0; }
.checks li { border-top: 1px solid var(--line); }
.checks li:first-child { border-top: 0; }
.checks label { position: relative; display: block; padding: 14px 0 14px 34px; cursor: pointer; }
.checks li:first-child label { padding-top: 0; }
.checks input { position: absolute; opacity: 0; left: 0; top: 14px; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.checks li:first-child input { top: 0; }
.checks .box { position: absolute; left: 0; top: 18px; width: 18px; height: 18px; border: 2px solid var(--ink); background: transparent; transition: background .12s, border-color .12s; }
.checks li:first-child .box { top: 4px; }
.checks .box::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .12s; }
.checks label:hover .box { border-color: var(--accent); }
.checks input:checked ~ .box { background: var(--accent); border-color: var(--accent); }
.checks input:checked ~ .box::after { transform: rotate(45deg) scale(1); }
.checks input:checked ~ strong { color: var(--muted); }
.checks input:focus-visible ~ .box { outline: 3px solid var(--accent); outline-offset: 3px; }
.checks strong { display: block; }
.checks span { display: block; color: var(--muted); font-size: var(--fs-small); line-height: 1.5; }
.count { margin-left: 8px; font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }
.count.done { color: var(--accent-text); }
.intro .scope { border: 1px solid var(--line-strong); background: var(--card); padding: 14px 16px; margin-top: 20px; }
.intro .scope strong { color: var(--ink); }
.terms .ticks { margin: 0; }
.terms .ticks li { padding-bottom: 0; border-bottom: 0; margin-bottom: .4em; }
.includes { font-weight: 600; color: var(--ink); margin: 8px 0 8px; }
.checklist .includes { margin: 0 0 16px; }
.gfx-flecks .terms.groups dt::before { content: none; }
.terms.groups dt { margin-bottom: 10px; }

/* "what is included" style sections: the heading stays in view while the longer right-hand list scrolls */
@media (min-width: 980px) and (min-height: 600px) { .foundations > .section-head { position: sticky; top: 104px; } }

.choice-pkg strong:first-child { margin-left: 0; color: var(--ink); display: block; }
.steps .n + h3 { margin-top: 0; }

/* without JavaScript the Services button can't open anything, so show its links in the bar instead */
html:not(.js) .nav-btn { display: none; }
html:not(.js) .subnav { display: flex; position: static; min-width: 0; padding: 0; border: 0; background: none; box-shadow: none; }


/* ---------- case study pages: figures ----------
   One frame for every content image: a hairline and slightly rounded corners. */
.fig { margin: 40px 0 0; }
.fig-frame img { display: block; width: 100%; height: auto; }
.fig-frame, .phone { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.fig .zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.fig figcaption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; padding-top: 8px; border-top: 1px solid var(--line-strong); font-size: var(--fs-small); color: var(--muted); }
.fig figcaption b { flex: none; font: 700 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-text); }
.fig-diagram .fig-frame { background: var(--card); }
.fig-phones .fig-frame { display: flex; gap: 14px; justify-content: center; align-items: flex-start; padding: 16px; border: 0; border-radius: 0; overflow: visible; }
.phone { flex: 0 1 30%; max-width: 210px; }
.fig-row { display: grid; gap: 8px 40px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .fig-row { grid-template-columns: 1fr 1fr; } }
.intro + .fig-row, .foundations + .fig-row { margin-top: 8px; }
.facts { display: grid; gap: 28px 40px; grid-template-columns: 1fr; margin: 48px 0 24px; padding-top: 28px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.facts p:last-child { margin-bottom: 0; }
.code { margin: 32px 0 0; padding: 20px 24px; background: var(--surface); border: 1px solid var(--line-strong); overflow-x: auto; font: 500 .85rem/1.7 var(--mono); color: var(--ink); }
.work-quote { max-width: 46em; margin-bottom: 56px; }
.work-quote .quote p { font-size: 1.2rem; }
dialog.lightbox { border: 0; padding: 20px; background: #fff; color: #494949; max-width: 96vw; max-height: 94vh; }
dialog.lightbox::backdrop { background: rgba(17, 17, 16, .82); }
dialog.lightbox img { display: block; max-width: 100%; max-height: 74vh; width: auto; height: auto; margin: 0 auto; border: 1px solid var(--line-strong); border-radius: 8px; }
dialog.lightbox p { margin: 14px 0 0; font-size: var(--fs-small); }


/* about page: portrait beside the bio */
.who { display: grid; gap: 40px 64px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .who { grid-template-columns: 340px 1fr; } }
.portrait { margin: 0; max-width: 340px; }
.portrait .fig-frame { border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; }
.portrait img { display: block; width: 100%; height: auto; }
.portrait figcaption { margin-top: 10px; font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); }

/* legal pages: a readable column, numbered sections, and small print for lawful bases */
.legal-doc { max-width: 46em; }
.legal-doc .updated { font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--muted); margin-bottom: 40px; }
.legal-doc section { padding: 32px 0; border-top: 1px solid var(--line); }
.legal-doc h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.legal-doc h3 { font: 700 1.05rem/1.4 var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); margin: 1.6em 0 .4em; }
.legal-doc ul { padding-left: 1.2em; margin: 0 0 1em; }
.legal-doc li { margin-bottom: .5em; }
.legal-doc address { font-style: normal; margin: 0 0 1em; padding-left: 14px; border-left: 3px solid var(--accent); }
.legal-doc .basis { font-size: var(--fs-small); color: var(--muted); }
.legal-doc .todo { margin-left: 6px; }

.bigmark .stop { color: inherit; }
@media (max-width: 700px) { .site-footer { background-size: 100% 26%, auto; } }

/* the contact photo loads only when the section is near the screen. Without JavaScript it loads straight away. */
.bg-office.near, html:not(.js) .bg-office { --bgimg: url("../img/office.webp"); }

/* SEO audit page: the numbered list of areas, in the display type with outlined numerals */
.areas { list-style: none; margin: 0; padding: 0; counter-reset: area; display: grid; gap: 0 64px; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .areas { grid-template-columns: 1fr 1fr; } }
.areas li { counter-increment: area; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.areas li::before { content: counter(area, decimal-leading-zero); font: 400 1.9rem/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--muted); }