/* Copywerse. One page, static, no build step.
 *
 * DESIGN READ
 * A conversion page for a US agency owner who arrived from a cold email and is looking for a
 * reason to disqualify us. They sell design for a living, so the page is the sample of work.
 *
 * Direction: a job ticket. Warm paper, ink, ruled lines, a spec sheet for the packages, and
 * documentary photography of production. Not software. Every offshore vendor emailing this
 * list ships soft SaaS, and the two closest real competitors sit at opposite poles:
 * conduitdigital.us is white with Poppins tracked -1.4px at 56px, e2msolutions.com is dark
 * with one grotesk and a 4px radius. Both measured in a browser on 2026-09-07 before any of
 * this was chosen. Paper with a hard dark hero sits between them and belongs to neither.
 *
 * Ground is warm paper, never #fff and never #000. Both are floors, and a page with a floor
 * has nowhere left to recede. Every neutral below carries hue.
 *
 * One accent, a deep forest green, on interactive things and the recommended package only.
 * Green because the two tells this audience already recognises are the indigo to violet
 * gradient and the orange startup accent, and because this value holds WCAG AA against the
 * paper and against white in the same token.
 *
 * One radius: 3px. One motion language: 140ms for state, 500ms for the single reveal.
 */

/* ============================================================================================
   FONTS. Self-hosted, latin subset, variable. 46KB for both families.
   Familjen Grotesk carries display, Public Sans carries text. Deliberately not Inter as the
   display face, and deliberately not the editorial serifs that have become a template choice.
   ============================================================================================ */
@font-face {
  font-family: "Familjen Grotesk";
  src: url("assets/fonts/familjen-grotesk-var-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("assets/fonts/public-sans-var-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================================
   TOKENS
   ============================================================================================ */
:root {
  /* Paper. Warm. Low chroma but never zero, because a greyscale stack is not a colour decision. */
  --paper:      #eee9de;
  --paper-2:    #e5dfd1;
  --paper-3:    #dcd5c4;

  /* Ink. Warm near-black. */
  --ink:        #16150f;
  --ink-2:      #201e16;
  --ink-3:      #2c2a20;

  --line:       #c5bda9;
  --line-soft:  #d7d0bf;
  --line-dark:  #3b382c;   /* rules on ink */
  --edge-dark:  #7c745f;   /* control edges on ink, 3.1:1 against the field */
  --edge:       #877c63;   /* control edges on paper, 3.0:1 against the packages band */

  --muted:      #55503e;
  --muted-dark: #aca595;

  --accent:      #1e4b39;
  --accent-2:    #2b6b51;
  --accent-ink:  #f4f1e9;
  --accent-wash: #dde5dc;

  --r: 3px;

  /* Two elevation steps, warm. A neutral black shadow on warm paper reads as a sticker laid on
     the page rather than the page itself lifting. */
  --lift:   0 1px 2px rgba(22, 21, 15, .10), 0 10px 22px -12px rgba(22, 21, 15, .24);
  --lift-2: 0 2px 4px rgba(22, 21, 15, .12), 0 34px 60px -26px rgba(22, 21, 15, .40);

  --gut: clamp(1.25rem, 5vw, 5rem);
  --wide: 82rem;
  --measure: 72rem;

  --t-state: 140ms cubic-bezier(.2, 0, .2, 1);
  --t-reveal: 500ms cubic-bezier(.16, 1, .3, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Public Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 {
  font-family: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  /* Large type needs tracking removed, not added. conduitdigital.us runs -1.4px at 56px and
     -0.4px at 77px. Nothing on this page is ever tracked positive above body size. */
  letter-spacing: -0.028em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h1 { line-height: 0.98; }

p { margin: 0; }
a { color: inherit; }

:where(a, button, summary, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r);
}

.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: var(--gut); }

/* Sections carry their own layout rather than hiding it inside a wrapper div. The gutter is a
   flexible track, the measure is the middle one, and a section that wants to bleed to the edge
   simply paints its own background. Fewer elements, and the structure of a section is legible
   from the section itself. */
.bleed3 {
  display: grid;
  grid-template-columns: minmax(var(--gut), 1fr) minmax(0, var(--measure)) minmax(var(--gut), 1fr);
}
.bleed3 > * { grid-column: 2; }

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

.skip {
  position: absolute; left: var(--gut); top: -100px; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .75rem 1.1rem; border-radius: var(--r); font-weight: 600; text-decoration: none;
}
.skip:focus { top: .75rem; }

/* Band rhythm is deliberately uneven. A page where every section is the same height is the
   thing that reads as generated. */
.band { padding-block: clamp(4rem, 9vw, 7.5rem); }
.band--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.eyebrow {
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 1.25rem;
}

/* ============================================================================================
   BUTTONS. One shape, three weights.
   ============================================================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: inherit; font-size: .975rem; font-weight: 600;
  padding: .85rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--r);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-state), border-color var(--t-state),
              color var(--t-state), transform var(--t-state);
}
.btn svg { width: 1em; height: 1em; flex: none; }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--lift); }
.btn--primary:hover { background: var(--accent-2); transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--edge); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }

.btn--onDark { background: var(--paper); color: var(--ink); }
.btn--onDark:hover { background: #fffdf8; transform: translateY(-1px); }

.btn--sm { padding: .6rem 1rem; font-size: .875rem; }

.link-under {
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: opacity var(--t-state);
}
.link-under:hover { opacity: .68; }

/* ============================================================================================
   NAV. Sticky, one line, 64px. The CTA never leaves, at any width.
   ============================================================================================ */
.nav {
  position: sticky; top: 0; z-index: 50; height: 64px;
  /* Solid, not a frosted panel. A translucent blurred bar is decoration the brief rules out,
     and it leaves hero copy faintly readable through the nav as it scrolls under. */
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.nav__in { display: flex; align-items: center; gap: 2rem; height: 100%; }
.nav__links { display: flex; gap: 1.75rem; margin-left: auto; }
.nav__links a {
  font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color var(--t-state);
}
.nav__links a:hover { color: var(--ink); }
.nav__cta { margin-left: 1.5rem; }
.nav__links:not(:last-child) ~ .nav__cta { margin-left: 1.5rem; }

/* Wordmark. No logo exists, so this is a proposal: the word set tight in the display face
   beside a crop mark, which is the thing a production house actually leaves on a file. */
.mark { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.mark svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.mark__w {
  font-family: "Familjen Grotesk", sans-serif;
  font-weight: 700; font-size: 1.28rem; letter-spacing: -0.038em; color: var(--ink);
}

/* ============================================================================================
   HERO. Full bleed photograph, planned scrim, copy on the floor of the frame.
   Layout family 1: full-bleed overlay.
   ============================================================================================ */
.hero { position: relative; isolation: isolate; background: var(--ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* The scrim is planned rather than hoped for: a ramp for the copy at the bottom and a floor
   across the whole frame, so text stays above AA at every breakpoint and every crop. */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top,
    rgba(14, 13, 9, .95) 0%, rgba(14, 13, 9, .86) 32%,
    rgba(14, 13, 9, .58) 68%, rgba(14, 13, 9, .48) 100%);
}
.hero__in {
  position: relative; z-index: 2;
  min-height: min(88svh, 760px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-block: clamp(5rem, 12vw, 8rem);
  color: var(--paper);
}
.hero h1 { font-size: clamp(3rem, 8.6vw, 7rem); max-width: 15ch; color: #fcf9f2; }
.hero__sub {
  margin-top: 1.5rem; max-width: 58ch;
  font-size: clamp(1.02rem, 1.5vw, 1.185rem); line-height: 1.55; color: #e2dbcc;
}
.hero__acts { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }

/* ============================================================================================
   TRUST STRIP. The section doing the most conversion work after the packages, so it is dark,
   full width, and sits immediately under the hero where it cannot be missed.
   Layout family 2: four-up rule-divided band on ink.
   ============================================================================================ */
.trust { background: var(--ink-2); color: var(--paper); }
.trust__grid { grid-column: 2; }
.trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust__item {
  padding: 2.25rem 1.75rem 2.5rem;
  border-left: 1px solid var(--line-dark);
}
.trust__item:first-child { border-left: 0; padding-left: 0; }
.trust__item:last-child { padding-right: 0; }
.trust__item h3 {
  font-size: 1.22rem; letter-spacing: -0.02em; line-height: 1.15;
  display: flex; align-items: baseline; gap: .6rem;
}
.trust__item h3::before {
  content: ""; flex: none; width: 9px; height: 9px; border-radius: var(--r);
  background: var(--accent-2); transform: translateY(-1px);
}
.trust__item p { margin-top: .8rem; color: var(--muted-dark); font-size: .95rem; line-height: 1.5; }

/* ============================================================================================
   SERVICES. Seven, not equal, so not seven identical cards. The first three carry a photograph
   and the weight; the remaining four run as a ruled list.
   Layout family 3: asymmetric editorial grid.
   ============================================================================================ */
.svc__head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
.svc__head h2 { font-size: clamp(2.1rem, 4.6vw, 3.65rem); max-width: 18ch; }
.svc__head p { color: var(--muted); font-size: 1.06rem; max-width: 46ch; }

.svc__lead {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid; gap: 2rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Brand and identity carries the most weight of the seven, so it is the wide one. */
.svc__card:first-child { grid-column: span 2; flex-direction: row; }
.svc__card:first-child figure { flex: 0 0 46%; }
.svc__card {
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--line-soft); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--lift);
}
.svc__card figure { margin: 0; background: var(--paper-3); }
.svc__card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc__card:first-child img { aspect-ratio: auto; height: 100%; min-height: 17rem; }
.svc__card:first-child .svc__body { align-self: center; }
.svc__body { padding: 1.5rem 1.5rem 1.75rem; }
.svc__body h3 { font-size: 1.4rem; }
.svc__body p { margin-top: .7rem; color: var(--muted); font-size: .95rem; line-height: 1.55; }

.svc__rest { margin-top: 2rem; border-top: 1px solid var(--line); }
.svc__row {
  display: grid; grid-template-columns: 3rem minmax(0, 11.5rem) minmax(0, 1fr);
  gap: 1.25rem; align-items: baseline;
  padding-block: 1.6rem; border-bottom: 1px solid var(--line-soft);
}
.svc__no { font-size: .8rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.svc__row h3 { font-size: 1.25rem; }
.svc__row p { color: var(--muted); font-size: .975rem; }

/* ============================================================================================
   PACKAGES. A spec sheet, not three cards. All fourteen line items are on screen for all three
   packages at once, with the row carrying the thing and the cell carrying the amount, which is
   the only layout where the difference between packages is actually legible. Nothing collapses,
   nothing toggles, nothing is behind a tab.
   Layout family 4: matrix.
   ============================================================================================ */
.pk {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* The footnote already carries a margin and the next band opens with its own padding, so the
     full band padding here stacked into a gap twice the size of every other section break. */
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pk__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: end; }
.pk__head h2 { font-size: clamp(2.1rem, 4.6vw, 3.65rem); }
.pk__head p { color: var(--muted); font-size: 1.06rem; max-width: 46ch; }

.pk__scroll { margin-top: clamp(2.25rem, 4vw, 3.25rem); }

table.pk__t {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: .95rem; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r);
}
.pk__t th, .pk__t td { text-align: left; vertical-align: top; padding: 1rem 1.15rem; }
.pk__t thead th { border-bottom: 1px solid var(--line); vertical-align: bottom; }
.pk__t thead th:first-child { width: 38%; }

.pk__corner { font-weight: 600; color: var(--muted); font-size: .9rem; }

.pk__plan { min-width: 11rem; }
.pk__name {
  font-family: "Familjen Grotesk", sans-serif; font-size: 1.6rem; font-weight: 700;
  letter-spacing: -0.03em; display: block; line-height: 1.05;
}
.pk__for { display: block; margin-top: .5rem; color: var(--muted); font-weight: 400; font-size: .875rem; line-height: 1.45; }
.pk__plan .btn { margin-top: 1.15rem; width: 100%; }

/* Fourteen bare rows is a list, not an argument. The five groups say what kind of thing each
   run of rows is, and the line under each label says what the deliverable actually is, so a
   number like "10" means something to somebody who has not bought this before. */
.pk__grouprow th {
  background: var(--paper-3);
  border-block: 1px solid var(--line);
  padding-block: .7rem;
}
.pk__gname {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink);
}
.pk__gnote { margin-left: .85rem; color: var(--muted); font-weight: 400; font-size: .85rem; }
.pk__g:first-of-type .pk__grouprow th { border-top: 0; }

.pk__rowhead { font-weight: 400; }
.pk__what { display: block; font-weight: 600; color: var(--ink); font-size: 1rem; }
.pk__desc { display: block; margin-top: .3rem; color: var(--muted); font-size: .855rem; line-height: 1.5; max-width: 46ch; }

.pk__g tr + tr th, .pk__g tr + tr td { border-top: 1px solid var(--line-soft); }
.pk__g tr + tr .pk__grouprow th { border-top: 1px solid var(--line); }

.pk__t tbody td { font-weight: 500; }

/* The recommended package is a column, edge to edge, not a badge stuck on a card. The side
   rules run the whole height so the eye can follow one package down fourteen rows without
   losing its place, which is the entire reason for laying this out as a matrix. */
.pk__t td.is-rec, .pk__t thead th.is-rec {
  background: var(--accent-wash);
  border-inline: 1px solid var(--accent);
}
.pk__t thead th.is-rec {
  background: var(--accent); color: var(--accent-ink);
  border-top: 1px solid var(--accent);
  box-shadow: var(--lift-2);
}
.pk__t thead th.is-rec .pk__for { color: #cfdccf; }
.pk__flag {
  display: inline-block; margin-bottom: .7rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  background: var(--accent-ink); color: var(--accent);
  padding: .3rem .55rem; border-radius: var(--r);
}
.pk__t thead th.is-rec .btn--primary {
  background: var(--accent-ink); color: var(--accent); box-shadow: none;
}
.pk__t thead th.is-rec .btn--primary:hover { background: #fff; }

/* The ask again at the bottom, because a reader who has worked down fourteen rows is a long
   way from the buttons at the top. */
.pk__t tfoot th, .pk__t tfoot td {
  border-top: 1px solid var(--line);
  padding-block: 1.35rem;
  vertical-align: middle;
}
.pk__t tfoot .pk__corner { color: var(--muted); }
.pk__t tfoot .btn { width: 100%; }
.pk__t tfoot td.is-rec { border-bottom: 1px solid var(--accent); }

.pk__note { margin-top: 1.5rem; color: var(--muted); font-size: .9rem; max-width: 70ch; }
.pk__label { display: none; }

/* ============================================================================================
   FAQ. The heading holds a rail on the left, the questions run down the right. Native
   details and summary, so it works with JavaScript switched off.
   Layout family 5: sticky rail plus list.
   ============================================================================================ */
/* Four tracks: gutter, rail, list, gutter. The rail and the list are the section's own columns,
   which is why this section's structure differs from every other one on the page. */
.faq {
  display: grid;
  grid-template-columns:
    minmax(var(--gut), 1fr) minmax(0, 24rem) minmax(0, 44rem) minmax(var(--gut), 1fr);
  column-gap: clamp(2rem, 6vw, 5rem);
}
.faq__rail { grid-column: 2; }
.faq__list { grid-column: 3; }
.faq__rail { position: sticky; top: 96px; align-self: start; }
.faq__rail h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.faq__rail p { margin-top: 1.1rem; color: var(--muted); max-width: 32ch; }

.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line-soft); }
.qa > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.4rem; cursor: pointer; list-style: none;
  font-family: "Familjen Grotesk", sans-serif;
  font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25;
  transition: color var(--t-state);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--accent); }
.qa__sign { flex: none; width: 14px; height: 14px; position: relative; transform: translateY(3px); }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; background: currentColor;
  transition: transform var(--t-state), opacity var(--t-state);
}
.qa__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.qa__sign::after  { top: 0; left: 6px; width: 2px; height: 14px; }
.qa[open] .qa__sign::after { transform: rotate(90deg); opacity: 0; }
.qa__a { padding-bottom: 1.5rem; max-width: 62ch; color: var(--muted); line-height: 1.62; }

/* ============================================================================================
   CONTACT. Form on the left, the same address in plain text on the right, so nothing depends
   on a third party staying up.
   Layout family 6: split form.
   ============================================================================================ */
.ct { background: var(--ink-2); color: var(--paper); }
.ct { column-gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.ct > div { grid-column: 2; }
.ct > .form { grid-column: 3; }
.ct { grid-template-columns: minmax(var(--gut), 1fr) minmax(0, calc(var(--measure) / 2 - 2.5rem)) minmax(0, calc(var(--measure) / 2 - 2.5rem)) minmax(var(--gut), 1fr); }
.ct h2 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 16ch; }
.ct__sub { margin-top: 1.25rem; color: var(--muted-dark); max-width: 44ch; line-height: 1.6; }
.ct__direct { margin-top: 2.25rem; border-top: 1px solid var(--line-dark); padding-top: 1.5rem; }
.ct__direct dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-dark); }
.ct__direct dd {
  margin: .5rem 0 0;
  font-family: "Familjen Grotesk", sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em;
}
.ct__direct dd a { text-decoration: none; border-bottom: 1px solid var(--line-dark); }
.ct__direct dd a:hover { border-bottom-color: currentColor; }

.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .45rem; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-dark); }
.field input, .field textarea {
  font: inherit; font-size: 1rem;
  background: var(--ink-3); color: var(--paper);
  border: 1px solid var(--edge-dark); border-radius: var(--r);
  padding: .8rem .95rem;
  transition: border-color var(--t-state);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #a49d8a; }
.field input:hover, .field textarea:hover { border-color: #9a927b; }
.form .btn { margin-top: .4rem; }
.form__fine { color: var(--muted-dark); font-size: .85rem; }

/* ============================================================================================
   FOOTER
   ============================================================================================ */
.ft { background: var(--ink); color: var(--muted-dark); padding-block: 2.5rem; font-size: .875rem; }
.ft__in { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; align-items: center; }
.ft .mark__w { color: var(--paper); font-size: 1.1rem; }
.ft .mark svg { color: var(--accent-2); }
.ft p { margin-left: auto; }

/* ============================================================================================
   REVEAL. One reveal, 8px, once, and nothing else moves on scroll.
   ============================================================================================ */
.rv { opacity: 0; transform: translateY(8px); }
.rv-on { opacity: 1; transform: none; transition: opacity var(--t-reveal), transform var(--t-reveal); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-on { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================================================
   BREAKPOINTS. Checked at 375, 768, 1024, 1440 and 1920.
   ============================================================================================ */
@media (max-width: 1080px) {
  .svc__lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc__card:first-child img { min-height: 15rem; }
  .faq { grid-template-columns: minmax(var(--gut), 1fr) minmax(0, var(--measure)) minmax(var(--gut), 1fr); row-gap: 2.5rem; }
  .faq__rail, .faq__list { grid-column: 2; }
  .faq__rail { position: static; }
}

@media (max-width: 900px) {
  .trust__grid { grid-template-columns: repeat(2, 1fr); }
  .trust__item { border-bottom: 1px solid var(--line-dark); }
  .trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .trust__item:nth-child(even) { padding-right: 0; }
  .trust__item:nth-last-child(-n+2) { border-bottom: 0; }
  .svc__head, .pk__head { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
  .ct { grid-template-columns: minmax(var(--gut), 1fr) minmax(0, var(--measure)) minmax(var(--gut), 1fr); row-gap: 2.75rem; }
  .ct > div, .ct > .form { grid-column: 2; }
}

@media (max-width: 820px) {
  .nav__links { display: none; }
  .nav__cta { margin-left: auto; }

  /* The matrix reflows into fourteen labelled groups, each carrying all three packages.
     Nothing is hidden and nothing scrolls sideways. Three stacked 14-item cards would be a
     42-item scroll, which is worse for the reader than the comparison the brief asks for. */
  .pk__t, .pk__t thead, .pk__t tbody, .pk__t tfoot, .pk__t tr, .pk__t th, .pk__t td { display: block; width: auto; }
  table.pk__t { border: 0; border-radius: 0; background: transparent; }
  .pk__t thead tr { display: block; }
  .pk__t thead th { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); padding: 1.15rem; margin-bottom: .75rem; width: auto; }
  .pk__t thead th:first-child { display: none; }
  .pk__t thead th.is-rec { box-shadow: var(--lift); border-color: var(--accent); }

  .pk__grouprow th {
    border-radius: var(--r); margin: 2rem 0 .25rem; padding: .8rem 1rem;
    border-block: 0;
  }
  .pk__gnote { display: block; margin-left: 0; margin-top: .2rem; }
  .pk__g:first-of-type .pk__grouprow th { margin-top: 1.75rem; }

  .pk__g tr { padding-block: 1.15rem; border-bottom: 1px solid var(--line-soft); }
  .pk__g tr.pk__grouprow { padding-block: 0; border-bottom: 0; }
  .pk__g tr + tr th, .pk__g tr + tr td { border-top: 0; }
  .pk__rowhead { padding: 0 0 .75rem; }
  .pk__what { font-size: 1.05rem; }
  .pk__desc { max-width: none; }

  .pk__t tbody td, .pk__t tbody td.is-rec {
    padding: .3rem 0; background: transparent; border-inline: 0;
    display: grid; grid-template-columns: 7.5rem 1fr; gap: .75rem;
  }
  .pk__label {
    display: block; font-size: .78rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); padding-top: .12rem;
  }
  .pk__t tbody td.is-rec .pk__label { color: var(--accent); }

  .pk__t tfoot { margin-top: 2rem; display: grid; gap: .75rem; }
  .pk__t tfoot tr { display: grid; gap: .75rem; }
  .pk__t tfoot th, .pk__t tfoot td { border: 0; padding: 0; }
  .pk__t tfoot td.is-rec { border-bottom: 0; }
  .pk__t tfoot .pk__corner { padding-bottom: .5rem; }
}

@media (max-width: 640px) {
  .svc__lead { grid-template-columns: 1fr; }
  .svc__card:first-child { grid-column: span 1; flex-direction: column; }
  .svc__card:first-child figure { flex: none; }
  .svc__card:first-child img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
  .svc__card:first-child .svc__body { align-self: stretch; }
  .trust__grid { grid-template-columns: 1fr; }
  .trust__item, .trust__item:nth-child(odd), .trust__item:nth-child(even) {
    border-left: 0; padding-inline: 0; border-bottom: 1px solid var(--line-dark);
  }
  .trust__item:last-child { border-bottom: 0; }
  .svc__row { grid-template-columns: 2.5rem 1fr; gap: .5rem 1rem; }
  .svc__row p { grid-column: 2; }
  .hero__acts { gap: 1.1rem; }
  .hero__acts .btn { width: 100%; }
}