/* LFT - site styles
   One stylesheet for every page of the main site (the demo sites have their own).
   Mobile-first: base rules are for phones; media queries add space and columns on
   bigger screens. All colours are tokens (custom properties) in the THEME block(s)
   below. For the launch there are three complete colour themes (A, B, C), picked by
   <html data-theme="...">, with A as the default. Contrast ratios are in BRAND.md.
   To keep one theme and delete the others, see README.md ("Choosing the colour theme"). */

/* ==== THEME: colour theme A (chosen with tools/choose_theme.py) ==== */
:root {
  --brand: #0f3d3e;          /* deep teal: hero, footer, dark sections, headings */
  --brand-2: #1a5556;        /* lighter teal: hovers and panels on dark */
  --on-brand: #ffffff;       /* text on brand */
  --on-brand-muted: #bcd7d4; /* secondary text on brand */
  --accent: #ff7f66;         /* coral: main buttons, highlights */
  --accent-hover: #ff9781;
  --on-accent: #102827;      /* text on accent buttons */
  --accent-strong: #e8573f;  /* coral graphics on light backgrounds (logo, icons) - never body text */
  --accent-soft: #fff0ec;    /* notice and badge backgrounds */
  --accent-ink: #b13b25;     /* coral-family text on light backgrounds */
  --bg: #f6faf9;             /* page background */
  --surface: #ffffff;        /* cards, header */
  --surface-2: #e8f3f1;      /* alternate sections */
  --border: #cfe0dd;
  --text: #132423;           /* body text */
  --muted: #4b5e5c;          /* secondary text */
  --heading: #0f3d3e;
  --link: #0d6b66;
  --focus: #0d6b66;          /* focus ring on light backgrounds */
  --success: #1d7048;        /* ticks */
  --field-border: #6c7f7c;   /* form field borders */
  --shadow-rgb: 15, 61, 62;
}

/* Sizes and type (shared by every theme) */
:root {
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --step-3: clamp(1.625rem, 1.4rem + 1.2vw, 2.25rem);
  --step-4: clamp(2.125rem, 1.6rem + 2.8vw, 3.5rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.08), 0 8px 24px rgba(var(--shadow-rgb), 0.08);
  --gutter: 16px;
  --max: 72rem;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  color: var(--heading);
  line-height: 1.15;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.015em;
}
h1 { font-size: var(--step-4); font-weight: 800; letter-spacing: -0.025em; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3, .h3 { font-size: var(--step-1); font-weight: 700; }
p, ul, ol, dl { margin: 0 0 var(--space-2); }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: 0.35rem; }
strong { font-weight: 700; }
small, .small { font-size: var(--step--1); }
.muted { color: var(--muted); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--heading); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--accent); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

/* Skip link: hidden until focused */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.75rem 1rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
}
.skip-link:focus { top: 0; color: var(--on-brand); outline-color: var(--accent); }

.container {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* Narrow text columns stay left-aligned with the rest of the page. */
.narrow > *, .prose > * { max-width: 46rem; }

/* ---------- Logo ---------- */
.logo { display: block; width: auto; height: 1.9rem; }
.logo-lift { fill: var(--accent-strong); }
.on-dark .logo-lift,
.site-footer .logo-lift { fill: var(--accent); }

/* ---------- Header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 0.75rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--heading);
  text-decoration: none;
  min-height: 44px;
}
.brand:hover { color: var(--heading); }

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.site-nav li + li { margin-top: 0; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.65rem;
  border-radius: 8px;
  color: var(--heading);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.975rem;
}
.site-nav a:hover { background: var(--surface-2); }
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--accent-strong);
  text-underline-offset: 0.45em;
}
.site-nav .nav-cta {
  background: var(--accent);
  color: var(--on-accent);
  padding-inline: 1rem;
}
.site-nav .nav-cta:hover { background: var(--accent-hover); color: var(--on-accent); }
.site-nav .nav-cta[aria-current="page"] { text-decoration-color: var(--on-accent); }

/* Menu button: site.js shows it on small screens (without JavaScript the menu simply stays open). */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--heading);
  border-radius: 10px;
  background: var(--surface);
  color: var(--heading);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-open .nav-toggle-bars { background: transparent; }
.nav-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 61.99rem) {
  .has-js-nav .nav-toggle { display: inline-flex; }
  .has-js-nav .site-nav { display: none; width: 100%; }
  .has-js-nav.nav-open .site-nav { display: block; }
  .has-js-nav .site-nav ul { flex-direction: column; gap: 0.15rem; padding-bottom: 0.5rem; }
  .has-js-nav .site-nav a { display: flex; width: 100%; padding-inline: 0.75rem; }
  .has-js-nav .site-nav .nav-cta { justify-content: center; margin-top: 0.4rem; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  border-radius: 10px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn-secondary { background: transparent; color: var(--heading); border-color: var(--heading); }
.btn-secondary:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn-ghost { background: transparent; color: var(--on-brand); border-color: var(--on-brand-muted); }
.btn-ghost:hover { background: var(--brand-2); color: var(--on-brand); border-color: var(--on-brand); }
.btn-lg { min-height: 56px; padding-inline: 1.75rem; font-size: var(--step-1); }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-3);
}

/* ---------- Sections ---------- */
.section { padding-block: var(--space-4); }
.section--tight { padding-block: var(--space-3); }
.section--alt { background: var(--surface-2); }
.section-intro { color: var(--muted); max-width: 46rem; }
.page-head { padding-bottom: var(--space-2); }
.page-head .lead { color: var(--muted); }
.jump-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding: 0; list-style: none; }
.jump-links li + li { margin-top: 0; }
.jump-links a { display: inline-block; padding-block: 0.4rem; font-weight: 600; }

.lead { font-size: var(--step-1); line-height: 1.5; max-width: 42rem; }

.eyebrow {
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 0.5rem;
}
.on-dark .eyebrow { color: var(--accent); }

.on-dark { background: var(--brand); color: var(--on-brand); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--on-brand); }
.on-dark a:not(.btn) { color: var(--on-brand); }
.on-dark .lead, .on-dark p { color: var(--on-brand); }
.on-dark .muted { color: var(--on-brand-muted); }

/* Hero */
.hero { padding-block: var(--space-4) var(--space-5); overflow: hidden; }
.hero-inner { display: grid; gap: var(--space-4); align-items: center; }
.hero h1 { max-width: 15em; }
.hero-note { font-size: var(--step--1); font-weight: 600; }
.hero-art { width: 100%; max-width: 22rem; height: auto; margin-inline: auto; display: block; }
.art-soft { fill: var(--brand-2); }
.art-surface { fill: var(--surface); }
.art-surface-2 { fill: var(--surface-2); }
.art-border { fill: var(--border); }
.art-brand { fill: var(--brand); }
.art-heading { fill: var(--heading); }
.art-muted { fill: var(--muted); }
.art-accent { fill: var(--accent); }
.art-accent-strong { fill: var(--accent-strong); }
.art-accent-soft { fill: var(--accent-soft); }
.art-on-brand-muted { fill: var(--on-brand-muted); }
.art-on-brand { fill: var(--on-brand); }
.art-phone { fill: var(--brand); stroke: var(--on-brand-muted); stroke-width: 3; }
.art-chevron { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }

/* Grids and cards */
.grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.grid + p { margin-top: var(--space-3); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }

.service-card { display: flex; flex-direction: column; }
.service-card h3 { margin-bottom: 0.25rem; }
.service-card .price { margin-bottom: 0.75rem; }
.service-card .more { margin-top: auto; font-weight: 700; }

.icon {
  width: 44px; height: 44px;
  display: block;
  margin-bottom: 0.85rem;
}
.i-bg { fill: var(--accent-soft); }
.i-fg { fill: none; stroke: var(--heading); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.i-acc { fill: var(--accent-strong); }
.i-acc-line { fill: none; stroke: var(--accent-strong); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* "Who it's for" tags */
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tags li { margin: 0; }
.tags li span {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-weight: 600;
  color: var(--heading);
}

/* Steps (numbered) */
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
  counter-reset: step;
}
.steps > li {
  counter-increment: step;
  position: relative;
  padding: var(--space-3);
  padding-top: calc(var(--space-3) + 2.9rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 0;
}
.steps > li::before {
  content: counter(step);
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 800;
  display: grid;
  place-items: center;
}
.steps > li > :last-child { margin-bottom: 0; }

/* Ticks list */
.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.75rem; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.45em;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 3px solid var(--success);
  border-bottom: 3px solid var(--success);
  transform: rotate(-45deg);
}

/* Prices */
.price {
  margin: 0.25rem 0;
  color: var(--heading);
  font-weight: 700;
}
.price .amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; }
.price .per { color: var(--muted); font-weight: 600; }
.price-sub { color: var(--muted); font-size: var(--step--1); }
.vat-line { font-weight: 700; color: var(--heading); }

.price-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.price-card h3 { font-size: var(--step-2); margin-bottom: 0.25rem; }
.price-card .btn { margin-top: auto; align-self: flex-start; }
.price-card ul { margin-bottom: var(--space-3); }
.price-card--featured { border: 3px solid var(--accent-strong); }

.badge {
  display: inline-block;
  align-self: flex-start;
  background: var(--accent-soft);
  color: var(--accent-ink);
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: var(--step--1);
  font-weight: 700;
  margin-bottom: 0.75rem;
}

/* Price list rows (design items, extras) */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.price-list > li {
  margin: 0;
  padding: 0.9rem 1.1rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.15rem 1rem;
  align-items: baseline;
}
.price-list > li + li { border-top: 1px solid var(--border); }
.price-list .pl-name { font-weight: 700; color: var(--heading); }
.price-list .pl-price { font-weight: 800; color: var(--heading); white-space: nowrap; text-align: right; }
.price-list .pl-desc { grid-column: 1 / -1; color: var(--muted); font-size: 0.95rem; }

/* Brand Starter Pack panel */
.pack {
  max-width: 46rem;
  background: var(--surface);
  border: 3px solid var(--accent-strong);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow);
}
.pack > :last-child { margin-bottom: 0; }
.pack .save {
  display: inline-block;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  border-radius: 999px;
  padding: 0.15rem 0.75rem;
  margin-left: 0.25rem;
  font-size: var(--step--1);
  vertical-align: middle;
}

/* Notices */
.notice {
  background: var(--accent-soft);
  border-left: 6px solid var(--accent-strong);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.notice > :last-child { margin-bottom: 0; }
.notice--plain {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand);
}

/* Call-to-action band */
.cta-band { padding-block: var(--space-4); }
.cta-band p { max-width: 42rem; }

/* Two-column text + aside */
.split { display: grid; gap: var(--space-4); }
.mt-3 { margin-top: var(--space-3); }
.split > * { min-width: 0; }

/* Avatar on About */
.avatar { width: 7rem; height: 7rem; display: block; margin-bottom: var(--space-2); }

/* FAQ */
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.faq summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-weight: 700;
  color: var(--heading);
  min-height: 44px;
}
.faq details[open] summary { border-bottom: 1px solid var(--border); }
.faq details > div { padding: 1rem 1.25rem 0.25rem; }

/* Tables */
.table-wrap {
  position: relative; /* keeps visually-hidden text inside the scroll area */
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  margin-bottom: var(--space-2);
}
.compare {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
}
.compare caption {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-size: var(--step--1);
}
.compare th, .compare td {
  padding: 0.65rem 0.75rem;
  border-top: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.compare thead th { background: var(--brand); color: var(--on-brand); border-top: 0; }
.compare tbody th { font-weight: 600; color: var(--heading); }
.compare .yes { color: var(--success); font-weight: 700; }

/* Prose pages (privacy, terms) */
.prose h2 { font-size: var(--step-2); margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-3); }
.updated { color: var(--muted); font-size: var(--step--1); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 0.35rem; margin: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; color: var(--heading); }
.field .hint { color: var(--muted); font-size: var(--step--1); margin: 0; }
.optional { font-weight: 400; color: var(--muted); }
fieldset.field { border: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: 0.35rem; }
input[type="text"],
input[type="email"],
select,
textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--field-border);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  min-height: 48px;
}
textarea { min-height: 9rem; resize: vertical; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible { border-color: var(--focus); }
.choice-grid { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.choice {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 0.8rem;
  border: 2px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.choice:has(input:checked) { border-color: var(--focus); background: var(--surface-2); }
input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--brand); }
.honeypot { display: none; }
.consent { color: var(--muted); font-size: var(--step--1); margin: 0; }

.contact-grid { display: grid; gap: var(--space-4); }
.contact-grid > * { min-width: 0; }
.contact-aside .card + .card { margin-top: var(--space-3); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--brand);
  color: var(--on-brand);
  padding-block: var(--space-4) var(--space-3);
}
.site-footer a { color: var(--on-brand); }
.site-footer .brand { color: var(--on-brand); }
.site-footer p { color: var(--on-brand); }
.site-footer .muted { color: var(--on-brand-muted); }
.footer-grid { display: grid; gap: var(--space-3); }
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.footer-nav li + li { margin-top: 0; }
.footer-nav a { display: inline-block; padding-block: 0.3rem; }
.footer-line { font-weight: 600; max-width: 26rem; margin-top: 0.75rem; }
.footer-legal {
  border-top: 1px solid var(--brand-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  font-size: var(--step--1);
}
.footer-legal p { color: var(--on-brand-muted); margin-bottom: 0.25rem; }
.footer-heading { font-size: var(--step-0); color: var(--on-brand); margin-bottom: 0.5rem; }

/* ---------- Concept websites (work.html) ---------- */
.work-card { display: flex; flex-direction: column; }
.work-card .btn { align-self: flex-start; margin-top: auto; }
.demo-label {
  display: inline-block;
  align-self: flex-start;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--step--1);
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.work-preview {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
  margin-bottom: var(--space-2);
  background: #f7f7f5;
}
.wp-bar { height: 22px; background: #e4e4e0; display: flex; gap: 5px; align-items: center; padding-left: 8px; }
.wp-bar span { width: 8px; height: 8px; border-radius: 50%; background: #b5b5ad; }
.wp-hero { padding: 18px 16px; }
.wp-line { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.85); margin-bottom: 7px; }
.wp-line.short { width: 55%; }
.wp-line.mid { width: 75%; }
.wp-btn { width: 38%; height: 18px; border-radius: 6px; margin-top: 10px; }
.wp-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.wp-tile { height: 44px; border-radius: 6px; background: #ffffff; border: 1px solid #deded8; }
.wp--electric .wp-hero { background: #1f3b73; }
.wp--electric .wp-btn { background: #ffcc33; }
.wp--roof .wp-hero { background: #23272d; }
.wp--roof .wp-btn { background: #e8963c; }
.wp--cafe .wp-hero { background: #3f5e3a; }
.wp--cafe .wp-btn { background: #f2c48d; }
.wp--salon .wp-hero { background: #5b2a4a; }
.wp--salon .wp-btn { background: #f4c7d8; }

/* ---------- Concept designs (design.html) ----------
   The mock-ups use their own fixed colours (they belong to the made-up businesses,
   not to LFT), so they look the same in every LFT theme. Text sizes scale with the
   width of each mock-up (container query units), with fixed sizes as a fallback. */
.concepts { display: grid; gap: var(--space-4); }
.concept {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow);
  min-width: 0;
}
.concept-label {
  display: inline-block;
  background: var(--brand);
  color: var(--on-brand);
  font-size: var(--step--1);
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 6px;
  margin-bottom: var(--space-2);
}
.concept h3 { margin-bottom: 0.25rem; }
.concept figcaption { color: var(--muted); font-size: 0.95rem; margin-top: var(--space-2); }
.concept figcaption strong { color: var(--heading); }
.mk-stage {
  background: #ecebe6;
  border-radius: 12px;
  padding: clamp(12px, 4vw, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  justify-items: center;
}
.mk-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; width: 100%; justify-items: center; }

/* Business card (85 x 55 mm) */
.mk-card {
  container-type: inline-size;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 85 / 55;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 10px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.mk-florist { font-family: Georgia, "Times New Roman", serif; }
/* The mock-up box is the size "container"; .mk-in inside it holds the padding and layout,
   so that sizes in cqw are measured against the full width of the mock-up. */
.mk-in { height: 100%; }
.mk-card--front { background: #1f4d3a; color: #fffaf3; }
.mk-card--front .mk-in {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 2cqw;
}
.mk-card--front .mk-mark { width: 16cqw; height: 16cqw; }
.mk-wordmark { margin: 0; font-size: 22px; font-size: 10cqw; line-height: 1; letter-spacing: 0.01em; }
.mk-sub { margin: 0; font-family: var(--font); font-size: 10px; font-size: 3.3cqw; letter-spacing: 0.32em; text-transform: uppercase; color: #f6d6d0; }
.mk-card--back { background: #fffaf3; color: #1f4d3a; }
.mk-card--back .mk-in {
  padding: 8cqw;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4cqw;
}
.mk-card--back .mk-mark { width: 13cqw; height: 13cqw; align-self: start; }
.mk-name { margin: 0; font-size: 18px; font-size: 6.4cqw; font-weight: 700; line-height: 1.1; }
.mk-role { margin: 0 0 4cqw; font-family: var(--font); font-size: 10px; font-size: 3.4cqw; color: #5a6b62; }
.mk-lines { margin: 0; padding: 0; list-style: none; font-family: var(--font); font-size: 10px; font-size: 3.5cqw; line-height: 1.45; color: #23392f; }
.mk-lines li + li { margin-top: 0; }

/* Letterhead (A4) and compliments slip (DL) */
.mk-sheet {
  container-type: inline-size;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 210 / 297;
  background: #fffdf9;
  color: #23392f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.12);
}
.mk-sheet .mk-in {
  padding: 8cqw 9cqw 6cqw;
  display: flex;
  flex-direction: column;
  border-top: 2.4cqw solid #1f4d3a;
}
.mk-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 4cqw; margin-bottom: 9cqw; }
.mk-lockup { display: flex; align-items: center; gap: 2.5cqw; color: #1f4d3a; }
.mk-lockup .mk-mark { width: 9cqw; height: 9cqw; flex: none; }
.mk-lockup p { margin: 0; font-size: 14px; font-size: 5.4cqw; line-height: 1; }
.mk-lockup span { display: block; font-family: var(--font); font-size: 8px; font-size: 2.3cqw; letter-spacing: 0.3em; text-transform: uppercase; color: #7a4f48; margin-top: 1cqw; }
.mk-contact { margin: 0; padding: 0; list-style: none; text-align: right; font-family: var(--font); font-size: 8px; font-size: 2.5cqw; line-height: 1.5; color: #3d5248; }
.mk-contact li + li { margin-top: 0; }
.mk-letter { font-family: var(--font); font-size: 9px; font-size: 2.8cqw; color: #23392f; }
.mk-letter p { margin: 0 0 3cqw; }
.mk-bar { height: 1.6cqw; border-radius: 1cqw; background: #dcd8cf; margin-bottom: 2.4cqw; }
.mk-bar.w90 { width: 90%; } .mk-bar.w80 { width: 80%; } .mk-bar.w60 { width: 60%; } .mk-bar.w40 { width: 40%; }
.mk-sheet-foot { margin-top: auto; border-top: 0.4cqw solid #f0b8ad; padding-top: 2.5cqw; font-family: var(--font); font-size: 7px; font-size: 2.3cqw; color: #3d5248; text-align: center; }
.mk-slip {
  container-type: inline-size;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 210 / 99;
  background: #fffdf9;
  color: #1f4d3a;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 10px 22px rgba(0, 0, 0, 0.1);
}
.mk-slip .mk-in {
  padding: 6cqw 7cqw;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4cqw;
  border-left: 2.4cqw solid #1f4d3a;
}
.mk-slip-title { margin: 0; font-size: 18px; font-size: 7.2cqw; font-style: italic; line-height: 1.1; }
.mk-slip .mk-contact { text-align: left; margin-top: 2cqw; font-size: 2.9cqw; }
.mk-slip .mk-mark { width: 16cqw; height: 16cqw; }

/* Email signature */
.mk-mail {
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  background: #ffffff;
  color: #222222;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 10px 24px rgba(0, 0, 0, 0.1);
  font-family: var(--font);
}
.mk-mail-bar { background: #e9e9e6; padding: 8px 12px; display: flex; gap: 6px; }
.mk-mail-bar span { width: 10px; height: 10px; border-radius: 50%; background: #b9b9b2; }
.mk-mail-head { padding: 10px 16px; border-bottom: 1px solid #e5e5e0; font-size: 0.85rem; color: #555555; }
.mk-mail-head p { margin: 0; }
.mk-mail-body { padding: 16px; font-size: 0.95rem; }
.mk-mail-body > p { margin: 0 0 12px; }
.mk-sig { display: flex; gap: 14px; align-items: center; border-top: 2px solid #f0b8ad; padding-top: 12px; margin-top: 16px; }
.mk-sig .mk-mark-disc { width: 56px; height: 56px; flex: none; }
.mk-sig > div { min-width: 0; } /* lets the long web address wrap instead of being cut off on very narrow screens */
.mk-sig p { margin: 0; line-height: 1.4; font-size: 0.9rem; color: #3d5248; overflow-wrap: anywhere; }
.mk-sig .mk-sig-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 700; color: #1f4d3a; }
.mk-sig .mk-sig-biz { color: #1f4d3a; font-weight: 700; }

/* Social media banner (Facebook cover proportions) */
.mk-social { width: 100%; max-width: 640px; }
.mk-banner {
  container-type: inline-size;
  width: 100%;
  aspect-ratio: 820 / 312;
  background: #f2c230;
  color: #1c2321;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  font-family: var(--font);
}
.mk-banner-text { padding-left: 6cqw; }
.mk-banner-title { margin: 0; font-size: 18px; font-size: 5.6cqw; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.mk-banner-sub { margin: 1.6cqw 0 0; font-size: 10px; font-size: 2.8cqw; font-weight: 600; line-height: 1.25; }
.mk-banner-tag { display: inline-block; margin: 2.4cqw 0 0; background: #1c2321; color: #f2c230; font-size: 9px; font-size: 2.3cqw; font-weight: 800; padding: 0.8cqw 1.8cqw; border-radius: 99px; letter-spacing: 0.04em; }
.mk-banner svg { width: 100%; height: auto; }
.mk-profile-row { display: flex; align-items: center; gap: 12px; background: #ffffff; border-radius: 0 0 8px 8px; padding: 0 14px 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.1); font-family: var(--font); }
.mk-profile {
  position: relative;
  width: 72px; height: 72px;
  border-radius: 50%;
  margin-top: -28px;
  border: 4px solid #ffffff;
  background: #1c2321;
  flex: none;
  display: grid;
  place-items: center;
}
.mk-profile svg { width: 70%; height: 70%; }
.mk-profile-row p { margin: 8px 0 0; font-weight: 800; color: #1c2321; line-height: 1.2; font-size: 0.95rem; }
.mk-profile-row p span { display: block; font-weight: 400; color: #555555; font-size: 0.8rem; }

/* Menu / price list */
.mk-menu {
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  background: #fbf5ea;
  color: #2f3a2a;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 12px 28px rgba(0, 0, 0, 0.12);
  padding: 22px 20px;
  font-family: var(--font);
}
.mk-menu-head { text-align: center; margin-bottom: 14px; }
.mk-menu-head svg { width: 44px; height: 44px; display: block; margin: 0 auto 6px; }
.mk-menu-name { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; color: #2f3a2a; letter-spacing: 0.02em; line-height: 1.1; }
.mk-menu-tag { margin: 4px 0 0; font-size: 0.75rem; letter-spacing: 0.28em; text-transform: uppercase; color: #9a3f22; font-weight: 700; }
.mk-menu-cols { display: grid; gap: 4px 28px; grid-template-columns: 1fr; }
.mk-menu-sec { margin: 0; }
.mk-menu-sec .mk-menu-h {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #9a3f22;
  margin: 10px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e3d5bd;
  letter-spacing: 0.02em;
}
.mk-menu-sec ul { list-style: none; padding: 0; margin: 0; }
.mk-menu-sec li { display: flex; align-items: baseline; gap: 6px; margin: 0 0 4px; font-size: 0.92rem; }
.mk-menu-sec .dots { flex: 1; border-bottom: 1px dotted #b9a98c; transform: translateY(-4px); min-width: 12px; }
.mk-menu-sec .p { font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-menu-foot { margin: 14px 0 0; text-align: center; font-size: 0.78rem; color: #4f5a48; border-top: 1px solid #e3d5bd; padding-top: 8px; }
@container (min-width: 460px) {
  .mk-menu-cols { grid-template-columns: 1fr 1fr; }
}

/* Respect reduced-motion settings */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Larger screens ---------- */
@media (min-width: 30rem) {
  .choice-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 40rem) {
  :root { --gutter: 24px; }
  .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .mk-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  .concept { padding: var(--space-3); }
}

@media (min-width: 56rem) {
  .section { padding-block: var(--space-5); }
  .section--tight { padding-block: var(--space-3); }
  .page-head { padding-bottom: var(--space-2); }
  .hero { padding-block: var(--space-5); }
  .hero-inner { grid-template-columns: 7fr 5fr; }
  .hero-art { max-width: 26rem; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 2fr 1fr; align-items: start; }
  .contact-grid { grid-template-columns: 3fr 2fr; align-items: start; }
  .footer-grid { grid-template-columns: 2fr 1fr 1.5fr; }
  .logo { height: 2.2rem; }
}

/* Print: keep it readable and drop navigation */
@media print {
  .site-header nav, .nav-toggle, .skip-link, .actions, .cta-band, .theme-switcher { display: none !important; }
  .on-dark, .site-footer { background: #fff !important; color: #000 !important; }
  .on-dark *, .site-footer * { color: #000 !important; }
  a { color: #000; }
}