/* =============================================================================
   PLACED - SHELL
   =============================================================================
   One page shell and one token set for every surface.

   This is not a new design. It is the system already sitting inside index.html,
   pulled out so more than one page can use it. The audit that prompted it found
   the app was effectively built twice: the briefs use Tailwind and carry 44 and
   34 responsive breakpoints, while Catalog, PressRelease, Orders and Concierge
   are built from 84, 92, 45 and 3 inline style objects and carry 1, 0, 0 and 0.
   React inline styles cannot express a media query, so every page built that way
   is desktop-only by construction. That is the whole reason mobile and desktop
   do not match.

   Alongside it: 35 hardcoded hex values across the source, #f62849 typed by hand
   94 times, two different near-blacks (#141414 102 times, #141011 71 times) used
   interchangeably, and eleven different page max-widths (1560, 1240, 1240, 1100,
   760, 620, 600, 600, 425, 420, 340). Every one of those is a decision taken
   again, slightly differently, on each page. Here they are taken once.

   Rules:
     - No raw hex in a page. Only var(--token).
     - No page sets its own container width. Only .wrap.
     - Breakpoints are 900px and 620px. Not 960, 980, 1000, 760.
   ========================================================================== */

/* Archivo, self-hosted. index.html inlines this same variable face as a base64
   data URI, which is right for the landing's critical path but wrong to repeat
   on every product page. Same file, extracted once, cached across all of them.
   Loading it from the Google Fonts CDN instead — as these pages used to — meant
   the product pages rendered in a different face to the landing whenever that
   request was slow or blocked. */
@font-face {
    font-family: "Archivo";
    src: url("/assets/archivo-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Neutrals warmed toward the pink so nothing reads cold grey. */
    --page: #FFFFFF;
    --soft: #FCF8F8;
    --tint: #FDF1F3;

    --ink: #141011;
    --body: #4A4245;
    --muted: #7C7175;
    --faint: #A79CA0;

    --line: #EDE5E6;
    --line-mid: #DCCFD1;

    --pink: #F62849;
    --pink-deep: #CE1637;
    --pink-soft: #FFE9ED;

    --ok: #136A3A;

    --f: "Archivo", system-ui, -apple-system, sans-serif;

    --wrap: 1200px;
    --s: 8px;

    /* One vertical rhythm. Sections used to set their own padding per page. */
    --section-y: clamp(64px, 8vw, 112px);
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-card: 0 1px 2px rgba(20, 16, 17, .04);
    --shadow-lift: 0 12px 32px rgba(20, 16, 17, .10);

    --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--page);
    color: var(--ink);
    font-family: var(--f);
    font-size: 17px;
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
p { margin: 0; }
img { display: block; max-width: 100%; }

/* ---------- Layout ------------------------------------------------------- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
@media (max-width: 620px) { .wrap { padding: 0 20px; } }

.section { padding: var(--section-y) 0; }
.section--soft { background: var(--soft); }
.section--tint { background: var(--tint); }
.section + .section { border-top: 1px solid var(--line); }
.section--soft + .section--soft { border-top: 0; }

/* ---------- Type --------------------------------------------------------- */

h1, h2, h3 { margin: 0; }
h1, h2 { font-weight: 900; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
h1 { font-size: clamp(40px, 5.2vw, 66px); }
h2 { font-size: clamp(28px, 3.9vw, 48px); }
h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }

.eyebrow {
    font-size: 12px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--pink);
}

.lede { font-size: 18px; line-height: 1.5; color: var(--body); max-width: 58ch; text-wrap: pretty; }
.small { font-size: 15px; color: var(--body); }
.tiny { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* One spacing contract for every section head, so the gap between eyebrow,
   heading and lede is identical on every page instead of 12/14/16px-and-none. */
.shead { max-width: 60ch; margin-bottom: 40px; }
.shead .eyebrow + h2 { margin-top: 10px; }
.shead h2 + .lede { margin-top: 14px; }

/* ---------- Buttons ------------------------------------------------------ */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: -.01em;
    padding: 15px 26px; border: 2px solid var(--ink); border-radius: 999px;
    background: transparent; color: var(--ink); cursor: pointer;
    transition: background .16s var(--ease), color .16s var(--ease),
                transform .16s var(--ease), border-color .16s var(--ease);
    white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }

.btn--primary { background: var(--pink); border-color: var(--pink); color: #fff; }
.btn--primary:hover { background: var(--pink-deep); border-color: var(--pink-deep); }

.btn--ink { background: var(--ink); border-color: var(--ink); color: var(--soft); }

.btn--ghost:hover { background: var(--ink); color: var(--soft); }

.btn--sm { font-size: 14px; padding: 10px 18px; border-width: 1.5px; }

/* A text link that still reads as an action. */
.link {
    font-weight: 700; border-bottom: 2px solid var(--pink);
    padding-bottom: 1px; transition: color .16s var(--ease);
}
.link:hover { color: var(--pink); }

@media (prefers-reduced-motion: reduce) {
    .btn, .link { transition: none; }
    .btn:hover { transform: none; }
}

/* ---------- Header ------------------------------------------------------- */

.hdr {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.hdr__in { display: flex; align-items: center; gap: 28px; height: 66px; }
.hdr__logo { display: flex; align-items: center; gap: 9px; font-weight: 900; letter-spacing: -.04em; font-size: 20px; }
/* One Placed mark. These values mirror the landing's inline SVG exactly
   (26px, rx 5, bars 14 and 8 at 2.6 tall) — they had drifted, so the same
   logo rendered differently depending on which page you were on. */
.hdr__mark { width: 26px; height: 26px; border-radius: 5px; background: var(--pink); position: relative; flex: none; }
.hdr__mark span { position: absolute; left: 6px; top: 8.4px; display: block; width: 14px; height: 2.6px; border-radius: 1.3px; background: #fff; }
.hdr__mark span::after { content: ""; position: absolute; left: 0; top: 6.6px; width: 8px; height: 2.6px; border-radius: 1.3px; background: #fff; }

.hdr__nav { display: flex; align-items: center; gap: 22px; margin-left: 8px; }
.hdr__nav a { font-size: 15px; font-weight: 600; color: var(--body); transition: color .16s var(--ease); }
.hdr__nav a:hover, .hdr__nav a[aria-current] { color: var(--ink); }
.hdr__nav a[aria-current] { color: var(--pink); }

.hdr__spacer { margin-left: auto; }
.hdr__actions { display: flex; align-items: center; gap: 10px; }

/* The bug this replaces: at 390px the live header hides every nav link with
   display:none and ships no menu button, so a phone visitor has a logo and a
   login link and no way to reach anything. The menu below is the minimum fix. */
.hdr__toggle {
    display: none; width: 42px; height: 42px; border: 1.5px solid var(--line-mid);
    border-radius: 999px; background: transparent; cursor: pointer;
    align-items: center; justify-content: center;
}
.hdr__toggle span { display: block; width: 16px; height: 1.5px; background: var(--ink); box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink); }

@media (max-width: 900px) {
    .hdr__nav {
        display: none; position: absolute; left: 0; right: 0; top: 66px;
        flex-direction: column; align-items: stretch; gap: 0; margin: 0;
        background: var(--page); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lift);
    }
    .hdr__nav[data-open="true"] { display: flex; }
    .hdr__nav a { padding: 15px 28px; font-size: 16px; border-top: 1px solid var(--line); }
    .hdr__toggle { display: inline-flex; }
    .hdr__actions .btn { padding: 11px 18px; font-size: 14px; }
    /* The header CTA has a long label ("Browse catalogue", "Submit media kit")
       and sat next to the logo, the menu button and a 28px wrap padding. At
       390px it ran past the right edge and was clipped — invisible to the
       horizontal-scroll check because body carries overflow-x:hidden.
       min-width:0 + ellipsis keeps it inside the bar at any label length. */
    .hdr__in { gap: 12px; }
    .hdr__actions { min-width: 0; }
    .hdr__actions .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    /* Hard ceiling so a long label can never push the button off-screen again,
       whatever a future page names its CTA. */
    .hdr__actions .btn { max-width: 46vw; }
}

/* ---------- Cards -------------------------------------------------------- */

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
/* Auto grids reflow without a breakpoint, which is why they are the default. */
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
    background: var(--page); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 24px; box-shadow: var(--shadow-card);
    transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card--link:hover { border-color: var(--line-mid); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card__num { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--pink); }
.card h3 { margin-top: 10px; }
.card p { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--body); }
.card__foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (prefers-reduced-motion: reduce) { .card--link:hover { transform: none; } }

/* ---------- Stats -------------------------------------------------------- */

/* Row gap belongs here, not on individual cells. Setting it per-cell assumes a
   column count, and the moment the grid reflows to two columns the rows go
   ragged. This is the same class of mistake as the eleven page widths. */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 28px; }
.stat__n { font-size: clamp(26px, 3vw, 34px); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.stat__l { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
@media (max-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ---------- Rate table --------------------------------------------------- */

/* A table with min-width:720px is the reason PressRelease overflows a phone by
   330px. Below 620 the same rows become stacked cards instead of scrolling. */
.rates { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rates th {
    text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); padding: 0 14px 10px 0;
    border-bottom: 1px solid var(--line);
}
.rates td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rates tr:last-child td { border-bottom: 0; }
.rates__outlet { font-weight: 800; letter-spacing: -.02em; }
.rates__price { font-weight: 800; white-space: nowrap; }
.rates td:last-child, .rates th:last-child { text-align: right; padding-right: 0; }

.tag {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
    background: var(--soft); border: 1px solid var(--line); color: var(--body);
}
.tag--paid { background: var(--pink-soft); border-color: var(--pink-soft); color: var(--pink-deep); }
.tag--editorial { background: var(--soft); }
.tag--dofollow { background: #EAF6EF; border-color: #D6EDE0; color: var(--ok); }

@media (max-width: 620px) {
    .rates, .rates tbody, .rates tr, .rates td { display: block; width: 100%; }
    .rates thead { display: none; }
    .rates tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 10px; }
    .rates td { border: 0; padding: 3px 0; text-align: left !important; }
    .rates td[data-l]::before {
        content: attr(data-l) " "; font-size: 11px; font-weight: 800; letter-spacing: .1em;
        text-transform: uppercase; color: var(--muted);
    }
}

/* ---------- Logo wall ---------------------------------------------------- */

.logos { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.logos div {
    background: var(--page); display: grid; place-items: center; padding: 22px 12px;
    font-weight: 800; font-size: 14.5px; letter-spacing: -.02em; color: var(--body); text-align: center;
}
@media (max-width: 900px) { .logos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px) { .logos { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Process strip ------------------------------------------------ */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.step { position: relative; padding-top: 26px; border-top: 2px solid var(--ink); }
.step::before {
    counter-increment: step; content: "0" counter(step);
    position: absolute; top: 12px; left: 0;
    font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--pink);
}
.step h3 { font-size: 16px; }
.step p { margin-top: 8px; font-size: 14.5px; color: var(--body); line-height: 1.5; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 620px) { .steps { grid-template-columns: 1fr; } }

/* ---------- Split (copy + image) ----------------------------------------- */

.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--form { grid-template-columns: 1.15fr .85fr; align-items: start; }
@media (max-width: 900px) { .split, .split--form { grid-template-columns: 1fr; } }

.figure { border-radius: var(--radius-lg); overflow: hidden; background: var(--soft); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure--tall { aspect-ratio: 3 / 4; }
.figure--wide { aspect-ratio: 3 / 2; }
.figure__cap { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* The photograph is the only image on these pages. It is a real photograph, not
   a generated one, which is the point: the live site pairs premium typography
   with a cocktail on a tray for "native formats" and an AI-rendered faceless
   humanoid for the AI agent, and that mismatch is the loudest cheap signal on
   an otherwise credible page. */

/* ---------- Forms -------------------------------------------------------- */

.field { display: block; margin-bottom: 26px; }
.field__l { display: block; font-size: 14px; font-weight: 700; color: var(--body); margin-bottom: 8px; }
.field__i, .field__t {
    width: 100%; font: inherit; font-size: 16px; color: var(--ink);
    background: transparent; border: 0; border-bottom: 1.5px solid var(--line-mid);
    padding: 10px 0; transition: border-color .16s var(--ease);
}
.field__i::placeholder, .field__t::placeholder { color: var(--faint); }
.field__i:focus, .field__t:focus { outline: 0; border-bottom-color: var(--pink); }
.field__t { resize: vertical; min-height: 130px; line-height: 1.55; }
.field__h { margin-top: 7px; font-size: 12.5px; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
    font: inherit; font-size: 14.5px; font-weight: 600; padding: 9px 16px;
    border: 1.5px solid var(--line-mid); border-radius: 999px; background: transparent;
    color: var(--body); cursor: pointer; transition: all .16s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--soft); }
.chip:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }

/* ---------- Trust rail --------------------------------------------------- */

.rail { display: grid; gap: 14px; }
.rail li { list-style: none; display: flex; gap: 11px; font-size: 15px; line-height: 1.5; color: var(--body); }
.rail li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 50%; background: var(--pink); }
.rail ul { margin: 0; padding: 0; display: grid; gap: 14px; }

/* ---------- Footer ------------------------------------------------------- */

.ftr { background: var(--ink); color: var(--soft); padding: 60px 0 40px; }
.ftr a { color: var(--soft); opacity: .78; font-size: 14.5px; transition: opacity .16s var(--ease); }
.ftr a:hover { opacity: 1; }
.ftr__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; }
.ftr__h { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .5; margin-bottom: 14px; }
.ftr__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ftr__btm {
    margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(252, 248, 248, .16);
    display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: space-between;
    font-size: 13px; opacity: .62;
}
@media (max-width: 900px) { .ftr__cols { grid-template-columns: 1fr 1fr; gap: 32px 24px; } }
@media (max-width: 620px) { .ftr__cols { grid-template-columns: 1fr; } }

/* ---------- Utilities ---------------------------------------------------- */

.mt-s { margin-top: 12px; } .mt-m { margin-top: 24px; } .mt-l { margin-top: 40px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.note { background: var(--soft); border: 1px solid var(--line); border-left: 3px solid var(--pink); border-radius: 0 var(--radius) var(--radius) 0; padding: 16px 18px; font-size: 14.5px; line-height: 1.55; color: var(--body); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Results ------------------------------------------------------
   Replaces prose. Every figure here comes from the archive at
   ~/Desktop/ICL.agency archive/case-studies/ or from campaign numbers already
   published on the live landing page. Nothing is invented.
   ------------------------------------------------------------------------ */

.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.result { background: var(--page); padding: 30px 26px; }
.result__n { font-size: clamp(30px, 3.6vw, 42px); font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.result__l { margin-top: 8px; font-size: 14px; color: var(--body); line-height: 1.45; }
.result__src { margin-top: 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
@media (max-width: 900px) { .results { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .results { grid-template-columns: 1fr; } }

/* Full-bleed image band. Breaks the split-layout rhythm so no page runs three
   image-beside-text sections in a row. */
.band { position: relative; height: clamp(280px, 42vw, 460px); overflow: hidden; background: var(--ink); }
.band img { width: 100%; height: 100%; object-fit: cover; }

/* Two-up pair, used once per page maximum. */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pair > * { background: var(--page); padding: 30px; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } }

/* ---------- Outlet wall --------------------------------------------------
   Logos come from media_inventory.logo_url, which is what the catalogue
   already renders, so this wall cannot drift from the shelf it advertises.

   The source is uneven on purpose: 348 of 751 outlets have a logo, and those
   range from a 32px favicon to a wide wordmark PNG. Sizing by width would make
   a favicon huge and a wordmark tiny. Instead every mark is boxed at a fixed
   28px square with object-fit:contain, and the outlet NAME carries the
   recognition. That is why this reads as one wall instead of fifty pasted
   images, and it degrades gracefully when a logo 404s.
   ------------------------------------------------------------------------ */

.wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.wall__i { background: var(--page); display: flex; align-items: center; gap: 11px; padding: 15px 16px; min-width: 0; transition: background .16s var(--ease); }
.wall__i:hover { background: var(--soft); }
.wall__logo { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.wall__logo img { max-width: 28px; max-height: 28px; width: auto; height: auto; object-fit: contain; transition: filter .18s var(--ease), opacity .18s var(--ease); }
.wall__t { min-width: 0; }
.wall__n { font-size: 13.5px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wall__p { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 620px)  { .wall { grid-template-columns: repeat(2, 1fr); } .wall__i { padding: 13px 12px; gap: 9px; } }
@media (prefers-reduced-motion: reduce) { .wall__i, .wall__logo img { transition: none; } }

/* Not-yet-live formats. Muted rather than hidden: they signal roadmap without
   competing with what can actually be bought today. */
.card--soon { background: var(--soft); border-style: dashed; }
.card--soon h3, .card--soon p { color: var(--muted); }
.card__tag { float: right; margin-left: 10px; }

/* Persistent action for a long page. Hidden until the hero CTA scrolls away and
   hidden again once the closing CTA arrives, so there is never a floating button
   duplicating one already on screen. */
.jump {
    position: fixed; right: 22px; bottom: 22px; z-index: 70;
    display: inline-flex; align-items: center; padding: 14px 24px;
    border-radius: 999px; background: var(--pink); color: #fff;
    font-size: 15px; font-weight: 800; letter-spacing: -.01em;
    box-shadow: var(--shadow-lift);
    opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.jump.is-on { opacity: 1; transform: none; pointer-events: auto; }
.jump:hover { background: var(--pink-deep); }
@media (max-width: 620px) { .jump { left: 20px; right: 20px; justify-content: center; bottom: 16px; } }
@media (prefers-reduced-motion: reduce) { .jump { transition: none; } }

/* Six steps needs its own track: repeat(4) would leave a 2-wide orphan row. */
.steps--6 { grid-template-columns: repeat(6, 1fr); gap: 18px; }
@media (max-width: 1100px) { .steps--6 { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
@media (max-width: 620px)  { .steps--6 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Touch targets ------------------------------------------------
   Measured at 390px before this block: 14 of 21 interactive elements were
   under the 44x44 minimum (Apple HIG, WCAG 2.5.5). Footer links were 16px
   tall, inline .link actions 22px, and the menu button 42px, which is the one
   control a phone user needs most and sits in the hardest thumb zone.

   Targets are enlarged with padding and negative margin so the hit area grows
   without the layout moving.
   ------------------------------------------------------------------------ */

.hdr__toggle { width: 48px; height: 48px; }

.ftr__col ul a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding-block: 2px;
}
.ftr__col ul { gap: 0; }

/* Inline text actions get a 44px hit area without changing where the text sits. */
.link {
    display: inline-block; padding-block: 11px; margin-block: -11px;
}

/* An outlet tile looked tappable and was not: it was a div. It is a link now,
   with the whole tile as the target rather than the 13px name inside it. */
a.wall__i { color: inherit; text-decoration: none; min-height: 58px; }
a.wall__i:focus-visible { outline: 2px solid var(--pink); outline-offset: -2px; }

.wall__p { font-size: 12.5px; }

@media (max-width: 620px) {
    .hdr__logo { min-height: 44px; align-items: center; }
    .wall__i { padding: 15px 12px; }
}
.hdr__logo { min-height: 44px; }
.ftr__col ul a { min-width: 44px; }