/* ============================================================
   ZINIE  ::  white, black and red

   Loaded AFTER site/css/vendor/base.css and site/css/vendor/proof.css, which are copied
   byte-identical from Web-Dev-Auto/web-templates. Never edit the vendored files: a fix
   goes upstream, or it goes here as an override.

   Palette (owner direction 2026-10-09): white content grounds, black header, hero and footer,
   red as the one accent. Named by ROLE, so a rebrand is a handful of values.

   Proof prints dark ink on its accent because every stock palette is bright. Red is not, so
   white prints on the red fill instead (--on-accent), and the rules below that hard-code
   ink-on-accent are overridden.

   Contrast, computed (WCAG 2.x relative luminance); scripts/check-contrast.mjs recomputes all:
     white on --accent (#D32027)        5.24
     --accent-on-night on black         6.45
     --accent-on-bone on white          6.94
     --ink-2 on --bone-2                7.96
   ============================================================ */

:root {
  --night:      #0B0B0C;   /* black: header, hero, footer, dark bands */
  --night-2:    #161617;   /* raised surface on black */
  --bone:       #FFFFFF;   /* white content ground */
  --bone-2:     #F3F3F3;   /* raised surface on white (cards, callouts) */
  --ink:        #0B0B0C;
  --ink-2:      #4A4A4D;
  --on-night:   #FFFFFF;
  --on-night-2: #B8B8BC;
  --line:       #DDDDDD;
  --line-night: #2A2A2C;
  --plate:      #3A3A3C;
  --on-accent:  #FFFFFF;   /* text printed on the red fill */
}

[data-theme="zinie"] {
  --accent: #D32027;          /* the red fill. White is printed on it */
  --accent-on-night: #FF5A5F; /* red as text on black */
  --accent-on-bone: #B3131A;  /* red as text on white */
}

/* The wordmark. Plain type, no logo image. */
.brand { text-decoration: none; }
.brand b { color: var(--accent); }

/* ---- sticky call bar (mobile) ----
   Call is the most prominent control. Both targets are 56px tall. Text is present only
   because the owner confirmed the number receives texts (2026-10-09). The bar sits at the
   bottom of the viewport on phones and is hidden once there is room for the header button. */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: grid; grid-template-columns: 2fr 1fr; gap: 1px;
  background: var(--line-night);
  border-top: 1px solid var(--line-night);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.callbar a {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 56px; padding: .5rem 1rem;
  font: 700 1.05rem/1.1 var(--body); text-decoration: none; text-transform: uppercase; letter-spacing: .02em;
}
.callbar__call { background: var(--accent); color: var(--on-accent); }
.callbar__text { background: var(--night-2); color: var(--on-night); }
.callbar a:focus-visible { outline-offset: -4px; }
body { padding-bottom: 56px; }
html { scroll-padding-bottom: 72px; } /* focus is never hidden under the bar (WCAG 2.4.11) */
@media (min-width: 820px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
  html { scroll-padding-bottom: 0; }
}

/* ---- phone header: one call control is enough above the fold ----
   The sticky bar and the hero button already carry Call, so the top phone line and the
   header button are hidden under 820px. The nav stays (it is the only way to browse) but
   is set smaller so it takes two short rows, not a third of the screen. */
@media (max-width: 819px) {
  .meta, .bar .btn { display: none; }
  .bar .wrap { flex-wrap: wrap; row-gap: .25rem; padding-block: .6rem; }
  .nav { display: flex; flex-wrap: wrap; gap: .1rem 1rem; width: 100%; }
  .nav a { font-size: .78rem; padding-block: .55rem; min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---- the money strip: three plain numbers, the thing competitors hide ---- */
.pricestrip {
  display: grid; gap: 1px; grid-template-columns: 1fr;
  background: var(--line-night); border: 1px solid var(--line-night); margin-block: 1.5rem;
}
.pricestrip > div { background: var(--night-2); padding: 1rem 1.25rem; }
.pricestrip dt { font: 600 .8rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--on-night-2); }
.pricestrip dd { margin: .25rem 0 0; font: 700 1.9rem/1.1 var(--display); color: var(--accent-on-night); }
.pricestrip small { display: block; margin-top: .35rem; font: 400 .9rem/1.4 var(--body); color: var(--on-night-2); }
@media (min-width: 720px) { .pricestrip { grid-template-columns: repeat(3, 1fr); } }

/* ---- draft chrome: exists only in non-production builds ---- */
.draftbar {
  background: #FFE9A8; color: #2B2100; border-bottom: 2px solid #8A6A00;
  font: 600 .85rem/1.4 var(--body); padding: .5rem 1rem; text-align: center;
}
.stub {
  border: 2px dashed var(--line-night); padding: 1.1rem 1.25rem; margin-block: 1rem;
  background: var(--night-2); color: var(--on-night);
}
.section:not(.section--night) .stub { background: var(--bone-2); color: var(--ink); border-color: var(--line); }
.stub h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.stub p { margin: 0; color: inherit; font-size: .95rem; }
.stub__tag { display: inline-block; margin-bottom: .4rem; font: 700 .7rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-on-night); }
.section:not(.section--night) .stub__tag { color: var(--accent-on-bone); }
.blockers { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .9rem; }

/* The lead form is not wired to the CRM yet. This is the honest state. */
.formstub { border: 2px dashed var(--accent); padding: 1.25rem; }

/* ---- authored page parts ---- */
.prose { max-width: 68ch; margin: 0 0 1.1rem; }
.ticks--flush { margin-top: 1rem; }
.section:not(.section--night) .ticks li::before { color: var(--accent-on-bone); }
.steps { list-style: none; counter-reset: step; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.steps li { counter-increment: step; position: relative; padding: 1rem 1.25rem 1rem 4rem; border: 1px solid var(--line-night); background: var(--night-2); }
.steps li::before { content: counter(step); position: absolute; left: 1.1rem; top: 1rem; font: 700 1.6rem/1 var(--display); color: var(--accent-on-night); }
.steps h3 { margin: 0 0 .25rem; font-size: 1.15rem; }
.steps p { margin: 0; color: var(--on-night-2); }
.section:not(.section--night) .steps li { background: var(--bone-2); border-color: var(--line); }
.section:not(.section--night) .steps li::before { color: var(--accent-on-bone); }
.section:not(.section--night) .steps p { color: var(--ink-2); }
.callout { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-left: 6px solid var(--accent); background: var(--bone-2); color: var(--ink); max-width: 68ch; }
.section--night .callout { background: var(--night-2); color: var(--on-night); }
.callout p { margin: 0; }
.callout--safety { border-left-color: var(--accent-on-bone); }
.links { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .25rem; }
.links a { display: inline-block; padding-block: .5rem; min-height: 44px; color: var(--accent-on-bone); font-weight: 600; }
.section--night .links a { color: var(--accent-on-night); }

/* Proof draws an en dash glyph for an open FAQ row. House rule: no en or em dashes in
   visible output, so the vendored rule is overridden here with a minus sign (U+2212). */
.qa details[open] summary::after { content: "\2212"; }

/* Proof sets .ticks for the dark hero only (small mono caps, muted on-night colour). Inside a
   content section the list is body copy, so it takes the body face and the colour of the
   ground it sits on. Found by rendering the page: the token gate cannot see this. */
.ticks--flush li { font-family: var(--body); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink-2); line-height: 1.55; }
.ticks--flush li strong { color: var(--ink); }
.section--night .ticks--flush li { color: var(--on-night-2); }
.section--night .ticks--flush li strong { color: var(--on-night); }

/* The hero card title is a call to action, not a document section, so it is a paragraph, not an
   h2 (the heading audit flagged it restating the H1 on eight pages). Styled to match Proof's h2. */
.quote-card__title { margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .005em; line-height: .95; text-wrap: balance; font-size: clamp(1.6rem, 3.4vw, 2.1rem); }

/* ---- red fill carries white text (vendored proof.css prints ink on the accent) ---- */
.skip, .btn--fill, .chip--after, .band, .band h2, .band p { color: var(--on-accent); }
.band p { opacity: 1; }
.band .btn--ghost { color: var(--on-accent); }
.btn--fill:hover { background: #B3131A; border-color: #B3131A; }
.band .btn--ink:hover { background: #000; }

/* ---- calmer type: Proof shouts, this site should explain ---- */
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.7rem); line-height: 1.02; text-wrap: balance; }
.section h2, .band h2 { font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.05; }
.section h2 { margin-bottom: .35rem; }
.lead { font-size: clamp(1.02rem, 1.6vw, 1.15rem); }
.nav a { font-family: var(--body); font-size: .92rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.hero .ticks { gap: .55rem 1.6rem; margin-top: 1.6rem; }
.hero .ticks li { font-family: var(--body); font-size: .95rem; letter-spacing: 0; text-transform: none; color: var(--on-night); }
.hero .ticks li::before { color: var(--accent-on-night); }
.eyebrow { font-size: .72rem; }
.quote-card { background: var(--night-2); }
.card { border-radius: 8px; }
.card h3 { font-size: 1.2rem; }
.section { padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.callout--safety { border-left-color: var(--accent); }
@media (max-width: 819px) {
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.5rem); }
}

/* Section labels sit flush left with the headings they introduce (Proof centres them). */
.section .eyebrow, .hero .eyebrow, .section > .wrap > .eyebrow { justify-content: flex-start; }
.section .lead { margin-top: .6rem; }

/* ---- layout fixes found by looking at the rendered pages ---- */
/* Proof caps the display measure, which stacked long symptom titles into five short lines. */
.hero h1 { max-width: none; font-size: clamp(2rem, 4.4vw, 3.2rem); }
/* Body check-lists are one item per row, not Proof's inline-wrapping hero chips. */
.ticks--flush { display: grid; gap: .6rem; }
.ticks--flush li { max-width: 72ch; }
.hero__grid { align-items: start; }


/* ================= clean-up pass after the ChatGPT design review (2026-10-09) ================= */

/* 1. The hero has one job: say what this is and make Call obvious. No second call card. */
.hero--solo .hero__grid { grid-template-columns: 1fr; }
.hero--solo .hero__copy { max-width: 820px; }
.hero__photo { margin: 0; border-radius: 12px; overflow: hidden; background: var(--plate); }
.hero__photo img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .hero:not(.hero--solo) .hero__grid { grid-template-columns: 1.15fr .85fr; align-items: center; } }
.hero { padding-block: clamp(2.4rem, 5vw, 4rem); }

/* 2. Headings: sentence-style bold sans, not a wall of condensed capitals. Condensed caps stay
      on buttons, the wordmark and small labels only. */
.hero h1, .section h2, .band h2, h3 { font-family: var(--body); text-transform: none; }
.hero h1 { font-weight: 800; letter-spacing: -.02em; line-height: 1.08; font-size: clamp(2rem, 4.2vw, 3.1rem); }
.section h2, .band h2 { font-weight: 800; letter-spacing: -.015em; line-height: 1.12; font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
h3 { font-weight: 700; letter-spacing: 0; line-height: 1.25; }
.card h3, .steps h3 { font-size: 1.15rem; }
@media (max-width: 819px) { .hero h1 { font-size: clamp(1.85rem, 7.4vw, 2.4rem); } }
.eyebrow { letter-spacing: .14em; }

/* 3. Phone header: wordmark, Menu, one tap to the nav. No wrapped row of links. */
.mnav { display: none; }
.bar { position: relative; }
@media (max-width: 819px) {
  .nav { display: none; }
  .bar .wrap { flex-wrap: nowrap; padding-block: .55rem; }
  .mnav { display: block; margin-left: auto; }
  .mnav summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; padding: 0 .9rem;
    border: 2px solid var(--on-night); border-radius: 4px; font: 700 .85rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--on-night); }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--night-2);
    border-bottom: 1px solid var(--line-night); padding: .4rem clamp(1.1rem, 4vw, 2rem) .8rem; display: grid; }
  .mnav nav a { color: var(--on-night); text-decoration: none; font-weight: 600; padding: .85rem 0; min-height: 44px; border-bottom: 1px solid var(--line-night); }
}

/* 4. Service cards are one big link, with a label that reads like a link. */
.card { position: relative; background: var(--bone-2); border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem; }
.card:hover { transform: none; border-color: var(--accent-on-bone); }
.card__more { display: inline-block; margin-top: 1rem; font-family: var(--body); font-size: .95rem; font-weight: 700;
  letter-spacing: 0; text-transform: none; text-decoration: none; color: var(--accent-on-bone); border: 0; }
.card__more::after { content: " \2192"; }
.card__more::before { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.card:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.card__more:focus-visible { outline: none; }

/* 5. The generic roadside notice is a quiet note; the specific "do not drive" callouts stay loud. */
.callout--road { padding: .65rem 1rem; font-size: .92rem; border-left-width: 3px; background: transparent;
  border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--night .callout--road { border-color: var(--line-night); background: transparent; border-left-color: var(--accent); }

/* 6. Price strip: separate cards with a visible edge instead of one dark block. */
.pricestrip { gap: .75rem; background: transparent; border: 0; }
.pricestrip > div { border: 1px solid var(--line-night); border-radius: 10px; padding: 1.25rem 1.4rem; }
.pricestrip dt { font-family: var(--body); letter-spacing: .02em; font-size: .85rem; font-weight: 700; text-transform: uppercase; }
.pricestrip dd { font-family: var(--body); font-weight: 800; letter-spacing: -.01em; font-size: clamp(1.6rem, 3vw, 2rem); }
.section:not(.section--night) .pricestrip > div { background: var(--bone-2); border-color: var(--line); }
.section:not(.section--night) .pricestrip dt { color: var(--ink-2); }
.section:not(.section--night) .pricestrip dd { color: var(--accent-on-bone); }
.section:not(.section--night) .pricestrip small { color: var(--ink-2); }

/* Link lists use the width: several short links sit in columns instead of one long stack. */
.links { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .15rem 2rem; }

/* ================= hero lead form ================= */
.leadcard { background: var(--bone); color: var(--ink); border-radius: 12px; overflow: hidden; border-top: 4px solid var(--accent); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.leadcard__photo { margin: 0; aspect-ratio: 21 / 9; background: var(--plate); }
.leadcard__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 30% 55%; }
.leadform { padding: 1.25rem 1.4rem 1.4rem; }
.leadform__title { margin: 0; font: 800 1.35rem/1.15 var(--body); letter-spacing: -.01em; color: var(--ink); }
.leadform__lead { margin: .25rem 0 1rem; color: var(--ink-2); font-size: .95rem; }
.leadform .field { margin: 0 0 .85rem; display: block; }
.leadform label { display: block; font: 600 .9rem/1.3 var(--body); color: var(--ink); margin-bottom: .3rem; }
.leadform .field__opt { font-weight: 400; color: var(--ink-2); }
.leadform input[type="text"], .leadform input[type="tel"], .leadform textarea {
  width: 100%; min-height: 48px; padding: .65rem .8rem; font: 400 1rem/1.4 var(--body); color: var(--ink); background: #fff;
  border: 1.5px solid #8a8a8e; border-radius: 6px; }
.leadform textarea { min-height: 72px; resize: vertical; }
.leadform input:focus-visible, .leadform textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--ink); }
.leadform [aria-invalid="true"] { border-color: var(--accent-on-bone); border-width: 2px; }
.field__err { display: block; min-height: 0; color: var(--accent-on-bone); font: 600 .85rem/1.3 var(--body); margin-top: .25rem; }
.leadform .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.leadform .check { display: flex; gap: .6rem; align-items: flex-start; margin: .2rem 0 1rem; }
.leadform .check input { width: 22px; height: 22px; flex: none; margin-top: .15rem; accent-color: var(--accent); }
.leadform .check label { font-weight: 400; font-size: .85rem; color: var(--ink-2); margin: 0; }
.leadform .btn--fill { color: var(--on-accent); }
.leadform .fineprint { margin: .8rem 0 0; font-size: .8rem; color: var(--ink-2); }
.leadform .fineprint a { color: var(--accent-on-bone); }
.lf-status { margin: .8rem 0 0; padding: .6rem .8rem; border-radius: 6px; font: 600 .92rem/1.35 var(--body); }
.lf-status--ok { background: #E7F4EA; color: #14532D; }
.lf-status--error { background: #FBE9EA; color: #7A0E14; }
.leadcard__draft { margin-top: .9rem; padding: .6rem .8rem; border: 2px dashed #8A6A00; background: #FFF6D6; color: #2B2100; font-size: .82rem; border-radius: 6px; }
@media (min-width: 900px) { .hero:not(.hero--solo) .hero__grid { grid-template-columns: 1fr 440px; align-items: start; } }

.leadform .field-row { display: grid; gap: 0 .8rem; grid-template-columns: 1fr; }
@media (min-width: 380px) { .leadform .field-row { grid-template-columns: 1fr 1fr; } }
.leadform { padding-block: 1rem 1.2rem; }
.leadform .field { margin-bottom: .7rem; }
.leadform__lead { margin-bottom: .8rem; }
.leadcard__photo img { object-position: 30% 62%; }


/* ================= hero with the photo behind it ================= */
.hero--photo { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(2.6rem, 6vw, 4.6rem); }
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--night); }
.hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
/* Darker on the text side. White text is used (not the muted grey) because it has to hold on the brightest part of
   the photo; scripts/browser/hero-contrast.js measures it against the real pixels. */
.hero--photo::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(11,11,12,.74) 0%, rgba(11,11,12,.60) 50%, rgba(11,11,12,.30) 100%); }
.hero--photo .eyebrow, .hero--photo .lead, .hero--photo .ticks li { color: #fff; }
.hero--photo .lead { text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.hero--photo h1 { text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero--photo .btn:not(.btn--fill) { background: rgba(11,11,12,.55); }
@media (max-width: 819px) {
  .hero__bg img { object-position: 22% 60%; }
  .hero--photo::after { background: linear-gradient(180deg, rgba(11,11,12,.78) 0%, rgba(11,11,12,.70) 100%); }
}

/* ================= hero fit and rhythm (Porter, 2026-10-09: "everything fits nice and clean") ================= */
.hero { padding-block: clamp(2rem, 4.5vw, 3.4rem); }
.hero--photo { padding-block: clamp(2.2rem, 5vw, 3.8rem); }
.hero__grid { align-items: center; }                       /* copy sits level with the form, not stuck to the top */
.hero .eyebrow { margin: 0 0 .7rem; }
.hero h1 { font-size: clamp(1.9rem, 3.3vw, 2.65rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .85rem; max-width: 20em; }
.hero .lead { font-size: clamp(1rem, 1.2vw, 1.08rem); line-height: 1.55; max-width: 60ch; margin: 0; }
.hero .btn-row { margin-top: 1.3rem; gap: .6rem; }
.hero .btn--lg { font-size: 1rem; padding: .8rem 1.35rem; }
.hero .btn { min-height: 48px; }
/* One trust point per row, so the list reads as a list instead of wrapping two to a line. */
.hero .ticks { display: grid; gap: .4rem; margin-top: 1.3rem; }
.hero .ticks li { font-size: .92rem; line-height: 1.4; }
/* The form card a little tighter so it is the same visual weight as the copy beside it. */
.leadform { padding: .95rem 1.2rem 1.1rem; }
.leadform__title { font-size: 1.25rem; }
.leadform__lead { margin: .2rem 0 .8rem; font-size: .9rem; }
.leadform .field { margin-bottom: .6rem; }
.leadform label { font-size: .85rem; margin-bottom: .22rem; }
.leadform input[type="text"], .leadform input[type="tel"], .leadform textarea { min-height: 44px; padding: .5rem .75rem; }
.leadform textarea { min-height: 64px; }
.leadform .check { margin: .1rem 0 .8rem; }
.leadform .fineprint { margin-top: .6rem; }
@media (max-width: 819px) {
  .hero, .hero--photo { padding-block: 1.6rem 2rem; }
  .hero h1 { font-size: clamp(1.75rem, 7vw, 2.15rem); }
  .hero .lead { font-size: 1rem; }
  .hero__grid { gap: 1.5rem; }
  .hero .btn-row { margin-top: 1.1rem; }
}
/* An earlier rule pins the grid to the top; the copy should sit level with the form instead. */
@media (min-width: 900px) { .hero:not(.hero--solo) .hero__grid { align-items: center; } }
@media (max-width: 819px) {
  .hero .btn-row { flex-direction: column; }
  .hero .btn-row .btn { width: 100%; }
}

/* ---- Call/text launcher: desktop only (phones have the call bar). Native <details>; see site/js/launcher.js ---- */
.launcher { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 40; display: none; }
@media (min-width: 820px) { .launcher { display: block; } }
.launcher.is-aside { visibility: hidden; }
.launcher__btn {
  display: inline-flex; align-items: center; gap: .55rem; list-style: none; cursor: pointer;
  min-height: 48px; padding: .6rem 1.1rem; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font: 700 .95rem/1 var(--body); box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
}
.launcher__btn::-webkit-details-marker { display: none; }
.launcher__btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--bone); }
.launcher__panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem); width: 18.5rem;
  background: var(--bone); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.1rem 1.1rem 1rem; box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.launcher__title { margin: 0 0 .25rem; font: 800 1.05rem/1.25 var(--body); color: var(--ink); }
.launcher__note { margin: 0 0 .85rem; font: 400 .9rem/1.4 var(--body); color: var(--ink-2); }
.launcher__call, .launcher__text {
  display: flex; align-items: center; justify-content: center; min-height: 48px; margin-bottom: .5rem;
  border-radius: 8px; text-decoration: none; font: 700 1rem/1.1 var(--body);
}
.launcher__call { background: var(--accent); color: var(--on-accent); }
.launcher__text { background: var(--bone); color: var(--ink); border: 2px solid var(--ink); }
.launcher__link { display: inline-block; margin-top: .25rem; color: var(--accent-on-bone); font: 700 .95rem/1.4 var(--body); }
.launcher a:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .launcher__panel { animation: launcher-in .14s ease-out; } }
@keyframes launcher-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Photo strip (block type "photos"): owner job photos, native lazy loading, sizes from the width/height attributes ---- */
.photos { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: start; }
@media (min-width: 720px) { .photos { grid-template-columns: 1fr 1fr; } }
.photos figure { margin: 0; }
.photos img { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--night-2); }
.photos figcaption { margin-top: .4rem; font: 400 .9rem/1.4 var(--body); color: var(--ink-2); }
.section--night .photos figcaption { color: var(--on-night-2); }