/* ===========================================================================
   DOSI — design system
   Rebuilt for selling. The only thing carried over from the previous site is
   the logo — and the palette is sampled straight off it, so the letterpress
   tile dissolves into the page instead of sitting on it. Warm oatmeal ground,
   letterpress ink for every action, no third colour.
   =========================================================================== */

:root {
  /* Sampled straight off the reference: a warm near-white ground carries the
     whole page, the only saturated thing is the button's warm black, and every
     level of grey between them is neutral. --muted is nudged two points darker
     than the reference so it still clears AA on the tint band. */
  --ink: #1c1917;
  --ink-soft: #241d1a;
  --body: #4a4746;
  --muted: #716f6f;
  --card: #ffffff;
  --paper: #faf9f8;
  --shell: #fefdfc;
  --tint: #f4f3f1;
  --tint-deep: #e8e7e5;
  --line: #ececea;
  --line-strong: #d6d4d1;
  --accent: #241d1a;
  --flag: #88492b;
  --danger: #9d2f22;

  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: clamp(20px, 5vw, 72px);
  --block: clamp(64px, 8vw, 116px);
  --radius: 4px;
  --shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 12px 32px rgba(28, 25, 23, .07);
  --shadow-lift: 0 2px 6px rgba(28, 25, 23, .07), 0 20px 48px rgba(28, 25, 23, .11);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* Display type. One sans for everything. A serif carries a headline at weight
   400; Inter does not — at display sizes it needs real weight and noticeably
   tighter tracking, and it reads larger than a serif at the same px, so the
   sizes come down a step too. */
.d1 { font: 300 clamp(38px, 5.6vw, 72px)/1.05 var(--display); letter-spacing: -.03em; }
.d2 { font: 300 clamp(27px, 3.6vw, 44px)/1.14 var(--display); letter-spacing: -.025em; }
.d3 { font: 400 clamp(19px, 1.9vw, 24px)/1.3 var(--display); letter-spacing: -.02em; }
/* <em> in a headline: no rule, no highlight. A grey word inside a 700 sans
   reads as a mistake, so the contrast is weight instead of colour. */
.d1 em, .d2 em, .d3 em { font-style: normal; font-weight: 500; color: inherit; }

.eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.7; color: var(--body); }
.note { font-size: 13px; line-height: 1.7; color: var(--muted); }

.wrap { max-width: 1280px; margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: var(--block); }
.section-tint { background: var(--tint); }
.section-paper { background: var(--paper); }
.section-ink { background: var(--ink-soft); color: #fff; }
.section-ink .eyebrow { color: rgba(255,255,255,.55); }
.section-ink .lede, .section-ink .note { color: rgba(255,255,255,.7); }
/* Panels keep their own light background everywhere else, which on a dark
   section left white text on a white card. On ink they become translucent. */
.section-ink .card,
.section-ink .chips li,
.section-ink .split article,
.section-ink .price,
.section-ink .steps li,
.section-ink .faq details,
.section-ink .table-scroll { background: rgba(255,255,255,.055); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.78); }
.section-ink .card h3,
.section-ink .split h3,
.section-ink .price h3,
.section-ink .steps h3,
.section-ink .faq summary { color: #fff; }
.section-ink .card p,
.section-ink .steps p,
.section-ink .faq-body p { color: rgba(255,255,255,.72); }
.section-ink .card-num { color: rgba(255,255,255,.5); }
.section-ink .split ul li { background: rgba(255,255,255,.08); }
.section-ink .step-time { background: rgba(255,255,255,.12); color: #fff !important; }
.section-ink .faq summary::after, .section-ink .faq summary::before { background: #fff; }
.section-ink .tbd { color: #f0b48d; border-bottom-color: #f0b48d; }
/* The primary button is now the same warm black as an ink section, so on one it
   would be an invisible rectangle with floating text. Invert the pair there. */
.section-ink .btn-primary { background: #fff; color: var(--ink); }
.section-ink .btn-primary:hover { background: #f1efec; box-shadow: none; }
.section-ink .btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.section-ink .btn-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.section-ink .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.section-ink .btn-ghost:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.section-ink .tlink { border-bottom-color: #fff; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; font-size: 13px; transition: top .2s; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 26px; border: 1px solid transparent; border-radius: var(--radius);
  font: 600 14px/1 var(--sans); letter-spacing: .01em; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary { background: var(--ink-soft); color: #fff; box-shadow: none; }
.btn-primary:hover { background: #3a302c; transform: translateY(-2px); box-shadow: 0 6px 18px rgba(28,25,23,.18); }
.btn-ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); background: var(--card); transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #3a302c; transform: translateY(-2px); }
.btn-light { background: var(--card); color: var(--ink); }
.btn-light:hover { transform: translateY(-2px); }
.btn-sm { padding: 11px 18px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.tlink { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; border-bottom: 2px solid var(--ink); padding-bottom: 3px; transition: gap .18s ease; }
.tlink:hover { gap: 14px; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  height: 74px; padding-inline: var(--gutter);
  background: rgba(254, 253, 252, .94); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .brand { margin-right: auto; display: flex; align-items: center; }
.site-header .brand img { width: 58px; height: auto; }
.site-nav { display: flex; gap: clamp(14px, 2vw, 30px); font-size: 14.5px; font-weight: 500; }
.site-nav a { padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .18s, color .18s; }
.site-nav a:hover { border-color: var(--line-strong); }
.site-nav a[aria-current] { border-color: var(--ink); }
.nav-dropdown { position: relative; }
.nav-dropdown summary { list-style: none; padding: 6px 18px 6px 0; border-bottom: 2px solid transparent; cursor: pointer; position: relative; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: ""; position: absolute; right: 1px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .18s; }
.nav-dropdown[open] summary::after { transform: translateY(-25%) rotate(225deg); }
.nav-dropdown summary:hover { border-color: var(--line-strong); }
.nav-dropdown summary[aria-current] { border-color: var(--ink); }
.nav-dropdown-panel { position: absolute; top: calc(100% + 14px); left: -24px; width: 286px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lift); }
.nav-dropdown-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.site-nav .nav-dropdown-panel a { display: block; padding: 9px 10px; border: 0; border-radius: 3px; font-size: 14px; }
.site-nav .nav-dropdown-panel a:hover { background: var(--tint); }
.site-nav .nav-dropdown-panel a[aria-current] { background: var(--tint); box-shadow: inset 3px 0 0 var(--ink); }
.site-nav .nav-dropdown-panel .nav-all { display: flex; justify-content: space-between; margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-weight: 700; }
.nav-dropdown-panel p { margin: 12px 10px 3px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
@media (hover: hover) and (min-width: 861px) {
  .nav-dropdown:not([open]) .nav-dropdown-panel { display: none; }
  .nav-dropdown:hover .nav-dropdown-panel, .nav-dropdown:focus-within .nav-dropdown-panel { display: block; }
}
.menu-toggle { display: none; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--line); border-radius: var(--radius); position: relative; cursor: pointer; }
.menu-toggle span { position: absolute; left: 11px; width: 18px; height: 1.5px; background: var(--ink); transition: transform .2s, opacity .2s; }
.menu-toggle span:nth-child(1) { top: 15px; }
.menu-toggle span:nth-child(2) { top: 20px; }
.menu-toggle span:nth-child(3) { top: 25px; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Hero ----------------------------------------------------------------- */
/* Headline and aside share one row; the photograph runs full width beneath
   them rather than fighting the text for the fold. */
.hero .wrap { padding-block: clamp(34px, 4.4vw, 64px) 0; }
.hero-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(26px, 4vw, 72px); align-items: start; }
.hero h1 { margin: 0; }
.hero-aside { padding-left: clamp(22px, 3vw, 48px); border-left: 1px solid var(--line); }
.hero-lead { margin: 0 0 12px; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; letter-spacing: -.01em; }
.hero-sub { margin: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--muted); }

.hero-figure { margin: clamp(30px, 4vw, 54px) 0 0; }
.hero-figure .frame { aspect-ratio: 2.4 / 1; border-radius: 6px; overflow: hidden; background: var(--tint-deep); }
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }
.hero-figure figcaption { margin-top: 14px; font-size: 13px; color: var(--muted); }

/* --- Four ways ------------------------------------------------------------- */
.ways { padding-block: clamp(30px, 3.4vw, 46px) clamp(52px, 6vw, 84px); }
.ways-grid { display: grid; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
.ways-grid li { padding: 4px clamp(14px, 1.8vw, 30px); border-left: 1px solid var(--line); }
.ways-grid li:first-child { padding-left: 0; border-left: 0; }
.ways-num { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; color: var(--muted); }
.ways-grid h2 { margin: 0 0 6px; font: 400 clamp(20px, 1.9vw, 25px)/1.2 var(--display); letter-spacing: -.02em; }
.ways-grid h2 a { border-bottom: 1px solid transparent; transition: border-color .18s; }
.ways-grid li:hover h2 a { border-color: var(--ink); }
.ways-grid p { margin: 0; font-size: 15px; color: var(--muted); }

/* --- Section heads -------------------------------------------------------- */
.head { max-width: 780px; margin-bottom: clamp(32px, 4vw, 54px); }
.head .lede { margin: 18px 0 0; }
.head-split { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; max-width: none; }

/* --- The four options ----------------------------------------------------- */
.ladder { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rung {
  display: flex; flex-direction: column; gap: 12px;
  padding: 26px 22px 24px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rung:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.rung-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rung-num { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.rung-cost { font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--ink); }
.rung h3 a { display: inline-block; border-bottom: 2px solid var(--ink); padding-bottom: 2px; }
.rung-do { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--body); }
.rung-price { margin: 0; padding: 12px 0; border-block: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.rung-price small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.rung dl { margin: auto 0 0; display: grid; gap: 14px; padding-top: 4px; }

/* The four cards only work as a comparison if their rows line up, so each card
   hands its rows back to the parent grid. Without subgrid the auto margin below
   still bottom-aligns the criteria, which degrades tidily. */
@supports (grid-template-rows: subgrid) {
  .rung { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 12px; }
  .rung dl { grid-row: span 2; grid-template-rows: subgrid; margin: 0; row-gap: 0; padding-top: 0; }
}
.rung dt { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 4px; }
.rung dt.yes { color: #46603a; }
.rung dt.no { color: var(--muted); }
.rung dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--body); }

/* --- Tables --------------------------------------------------------------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.tbl { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 14px; text-align: left; }
.tbl th, .tbl td { padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.6; }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { background: var(--tint); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tbl tbody th { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tbl td { color: var(--body); }
.tbl a { border-bottom: 1px solid var(--line-strong); }
.tbl a:hover { border-color: var(--ink); }

/* --- Cards / features ----------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 16px; }
.card { padding: 28px 24px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); }
.card-num { font-size: 11px; font-weight: 600; letter-spacing: .16em; color: var(--muted); }
.card h3 { margin: 14px 0 10px; }
.card p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--body); }
.card-link { display: block; transition: transform .2s ease, box-shadow .2s ease; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-link .tlink { margin-top: 16px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li { padding: 9px 15px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; font-size: 13.5px; }
.chips-yes li { border-color: #cbd9c2; background: #f4f8f1; }

.deflist { list-style: none; margin: 0; padding: 0; }
.deflist li { padding: 20px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.7; color: var(--body); }
.deflist li:first-child { border-top: 1px solid var(--line); }
.deflist b { color: var(--ink); }

/* --- Steps ---------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.steps li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 26px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.step-num { font: 700 19px/1.35 var(--display); letter-spacing: -.01em; color: var(--muted); }
.steps h3 { margin: 0 0 8px; }
.steps p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--body); max-width: 620px; }
.step-time { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px !important; padding: 5px 12px; background: var(--tint); border-radius: 999px; font-size: 12.5px !important; font-weight: 600; color: var(--ink) !important; }

/* --- Pricing -------------------------------------------------------------- */
.prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 16px; }
.price { display: flex; flex-direction: column; padding: 30px 26px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.price h3 { margin: 0 0 16px; }
.price-num { margin: 0; font: 700 clamp(28px, 2.8vw, 36px)/1 var(--display); letter-spacing: -.03em; }
.price-num small { font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.price-meta { margin: 10px 0 20px; font-size: 12.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.price ul { list-style: none; margin: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 14px; line-height: 1.6; color: var(--body); }
.price li { display: flex; gap: 10px; }
.price li::before { content: "\2014"; color: var(--line-strong); flex: none; }

/* --- Before / after ------------------------------------------------------- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ba figure { margin: 0; }
.ba .frame { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; background: var(--tint-deep); }
.ba .frame img { width: 100%; height: 100%; object-fit: cover; }
.ba-tag { position: absolute; top: 14px; left: 14px; z-index: 2; padding: 7px 13px; border-radius: 999px; background: rgba(255,255,255,.95); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; }
.ba-tag.after { background: var(--ink); color: var(--card); }
.ba figcaption { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--body); }
.ph { display: grid; place-items: center; background: repeating-linear-gradient(45deg, var(--tint-deep) 0 12px, #dedcd9 12px 24px); }
.ph small { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; color: #8a8785; }

/* --- Film catalog --------------------------------------------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.catalog-tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.catalog-search { flex: 1; max-width: 360px; }
.catalog-search input { width: 100%; padding: 12px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); font: 400 14px var(--sans); }
.catalog-search input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,25,23,.14); }
.catalog-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.catalog-filters button { padding: 9px 14px; background: transparent; color: var(--body); border: 1px solid var(--line-strong); border-radius: 999px; font: 600 12px var(--sans); cursor: pointer; }
.catalog-filters button:hover, .catalog-filters button.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalog-count { margin: 0 0 18px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
/* A material library is for scanning, so the tiles are small and the column
   count comes from the available width rather than a fixed number. */
.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
.catalog-item { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.catalog-item[hidden] { display: none; }
.catalog-item > div:last-child { padding: 11px 12px 13px; }
.catalog-item span { color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.catalog-item h3 { margin: 3px 0 2px; font: 500 14.5px/1.3 var(--display); letter-spacing: -.01em; }
.catalog-item p { margin: 0; color: var(--muted); font-size: 11px; }
/* Swatches are photographs now, not gradients: portrait, cropped, and lazy. */
/* height:auto matters — the img carries width/height attributes for the lazy
   placeholder, and with both dimensions definite the browser ignores
   aspect-ratio entirely and renders the swatch at its full 622px. */
.catalog-swatch { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-bottom: 1px solid var(--line); background-color: var(--tint-deep); }
.catalog-empty { padding: 48px 24px; background: var(--paper); border: 1px dashed var(--line-strong); text-align: center; }
.catalog-empty p { margin: 8px 0 0; color: var(--body); }
.catalog-note { max-width: 760px; margin: 24px 0 0; }
/* 492 cards would be a heavy first paint, so the grid reveals in batches. */
.catalog-more { display: flex; justify-content: center; margin-top: 26px; }
@media (max-width: 560px) { .catalog-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.catalog-more[hidden] { display: none; }
.catalog-grid { grid-auto-rows: max-content; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 820px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 52px 20px 22px; position: relative; font-size: 16.5px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after, .faq summary::before { content: ""; position: absolute; right: 22px; background: var(--ink); transition: opacity .2s, transform .2s; }
.faq summary::after { top: 50%; width: 13px; height: 2px; margin-top: -1px; }
.faq summary::before { top: 50%; right: 27px; width: 2px; height: 13px; margin-top: -6px; }
.faq details[open] summary::before { opacity: 0; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq-body { padding: 18px 22px 22px; }
.faq-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--body); }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body a { border-bottom: 1px solid var(--line-strong); font-weight: 500; }
.faq-body a:hover { border-color: var(--ink); }

/* --- Split (homes / businesses) ------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.split article { display: flex; flex-direction: column; padding: 32px 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.split h3 { margin: 12px 0 14px; }
.split ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.split ul li { padding: 7px 13px; background: var(--tint); border-radius: 999px; font-size: 13px; }
.split .btn { margin-top: auto; align-self: start; }

/* --- CTA ------------------------------------------------------------------ */
.cta { text-align: center; }
.cta .d2 { margin-bottom: 18px; }
.cta .lede { max-width: 560px; margin: 0 auto 30px; }
.cta .btn-row { justify-content: center; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { display: flex; gap: 10px; padding-top: 22px; font-size: 13px; color: var(--muted); }
.crumbs a { border-bottom: 1px solid var(--line-strong); }
.crumbs a:hover { border-color: var(--ink); }

/* --- Page hero (inner pages) ---------------------------------------------- */
.page-hero { border-bottom: 1px solid var(--line); }
.page-hero .wrap { padding-block: clamp(44px, 5.5vw, 80px); }
.page-hero h1 { margin-bottom: 20px; }
.page-hero .lede { max-width: 700px; }

/* --- Forms ---------------------------------------------------------------- */
.form { display: grid; gap: 20px; max-width: 560px; }
.form label { display: grid; gap: 7px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.form input, .form select, .form textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--card); font: 400 15px var(--sans); color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,25,23,.14); }
.form textarea { min-height: 120px; resize: vertical; }
.form [aria-invalid="true"] { border-color: var(--danger); }
.form-status { margin: 0; font-size: 14px; font-weight: 500; }
.form-status.is-error { color: var(--danger); }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink-soft); color: rgba(255,255,255,.7); }
.site-footer .wrap { padding-block: clamp(44px, 5vw, 68px); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.14); }
.site-footer .brand img { width: 64px; filter: brightness(0) invert(1); opacity: .92; }
.site-footer p { margin: 16px 0 0; font-size: 14.5px; line-height: 1.7; max-width: 330px; }
.footer-col h4 { margin-bottom: 14px; color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.footer-col a { display: block; padding: 5px 0; font-size: 14.5px; }
.footer-col a:hover { color: #fff; }
.footer-bot { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between; padding-top: 24px; font-size: 13px; }

/* --- Sticky mobile CTA ---------------------------------------------------- */
.sticky-cta { display: none; }

/* --- Reveal --------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }
.js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); }
.reveal { transition: opacity .6s ease, transform .6s ease; }

/* Unconfirmed figures are flagged so they cannot ship by accident.
   DELETE THIS RULE once every value on the site is real. */
.tbd { color: var(--flag); border-bottom: 1px dashed var(--flag); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1040px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .menu-toggle { display: block; order: 3; }
  .site-nav {
    position: fixed; inset: 74px 0 auto; display: none; flex-direction: column; gap: 0;
    padding: 8px var(--gutter) 24px; background: var(--shell); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); font-size: 17px;
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-dropdown { border-bottom: 1px solid var(--line); }
  .nav-dropdown summary { padding: 14px 24px 14px 0; border: 0; }
  .nav-dropdown summary[aria-current] { box-shadow: inset 3px 0 0 var(--ink); padding-left: 12px; }
  .nav-dropdown-panel { position: static; width: auto; margin: 0 0 10px; padding: 4px 0 8px 14px; background: transparent; border: 0; border-left: 1px solid var(--line-strong); border-radius: 0; box-shadow: none; }
  .nav-dropdown-panel::before { display: none; }
  .site-nav .nav-dropdown-panel a { padding: 10px 12px; border: 0; font-size: 15px; }
  .site-nav .nav-dropdown-panel .nav-all { padding-bottom: 11px; }
  .nav-dropdown-panel p { margin-left: 12px; }
  .header-cta { display: none; }
  .hero-top { grid-template-columns: 1fr; gap: 22px; }
  .hero-aside { padding-left: 0; padding-top: 22px; border-left: 0; border-top: 1px solid var(--line); }
  .hero-figure .frame { aspect-ratio: 16 / 10; }
  .split, .ba { grid-template-columns: 1fr; }
  .steps li { grid-template-columns: 44px 1fr; gap: 14px; padding: 22px 18px; }
  .footer-top { grid-template-columns: 1fr; gap: 28px; }
  .catalog-tools { align-items: stretch; flex-direction: column; }
  .catalog-search { max-width: none; }
  /* One thumb-reachable action, on every page, without covering the content. */
  .sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    display: flex; gap: 10px; padding: 10px var(--gutter);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(254, 253, 252, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .sticky-cta .btn { flex: 1; }
  body { padding-bottom: 76px; }
}

@media (max-width: 520px) {
  .ladder { grid-template-columns: 1fr; }
  .ways-grid { grid-template-columns: 1fr; gap: 0; }
  .ways-grid li { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .ways-grid li:first-child { border-top: 0; padding-top: 0; }
  .btn-row .btn { width: 100%; }
}

/* Contact: the two-column layout collapses with everything else. */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}