/* SK-M7.3 (D84): look "classic", a classic tradesman layout. Linked by src/layouts/Page.astro only when the build's
   look is "classic" (a preview variant with "look": "classic"); the asset hook in astro.config.mjs removes this file
   from every other dist/. Every rule hangs on html.look-classic, which only that build renders.
   Colours: only the palette's custom properties (README "Palettes"), so every palette works. The dark contact band
   uses the footer pair (--color-footer-bg / --color-footer-text), which check.sh holds at the text minimum (4.5:1) in
   every palette; a "colors" theme falls back to base and bg, like the footer.
   Phone first; md (768px) and lg (1024px) only add. Unlayered: these rules win over the kit's layered styles. */

/* Header (SK-M7.3b, Marco D38 and style bible): white (the palette's bg), 64 px high on phones and 76 px from md, the name over a trade line; a two-line accent call button
   ("Bel direct" over the number). No navigation on phones. */
.look-classic .site-header { background: var(--color-bg); border-bottom-color: color-mix(in srgb, var(--color-muted) 18%, var(--color-bg)); }
.look-classic .site-header-inner { min-height: 4rem; padding-block: 0.5rem; }
/* The name block: the optional business.logo (img.site-mark, SK-M7.3b) left of the name over the trade line. */
.look-classic .site-name-classic { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; min-width: 0; }
.look-classic .site-name-classic:has(> .site-mark) { display: inline-grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.4375rem;
  align-items: center; }
.look-classic .site-name-classic > .site-name-main, .look-classic .site-name-classic > .site-name-sub { grid-column: 2; }
.look-classic .site-mark { grid-column: 1; grid-row: 1 / span 2; display: block; width: auto; height: 2.375rem; }
/* SK-M7.3l: a light-only classic build (data-scheme="light" on <html>, src/layouts/Page.astro, with the meta
   color-scheme "only light") opts out of a browser's automatic dark mode for web pages (Chromium on phones). */
.look-classic[data-scheme="light"] { color-scheme: only light; }
/* Review 7c4cbf9 finding 3: in a dark scheme (the system's, unless <html data-scheme="light">, or data-scheme="dark" from a
   dark variant palette or the preview chooser) the header shows business.logoOnDark (img.site-mark-dark) instead of
   business.logo; without logoOnDark it hides the light-background logo and keeps the name. */
.look-classic .site-header .site-mark-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .look-classic:not([data-scheme="light"]) .site-header .site-mark { display: none; }
  .look-classic:not([data-scheme="light"]) .site-header .site-mark-dark { display: block; }
}
.look-classic[data-scheme="dark"] .site-header .site-mark { display: none; }
.look-classic[data-scheme="dark"] .site-header .site-mark-dark { display: block; }
.look-classic .site-name-main { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
/* SK-M7.3g: 0.08em on phones (was 0.16em): a longer trade word (business.trade "Sanitair service") stays beside the
   two-line call button at 390 px; from md it widens to 0.22em as before. */
.look-classic .site-name-sub { margin-top: 0.125rem; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.08em; white-space: nowrap;
  text-transform: uppercase; color: var(--color-muted); }
.look-classic .call-now { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 0.5rem;
  min-height: 2.75rem; padding: 0.375rem 0.75rem; text-align: left; line-height: 1.2; font-size: 0.8125rem; white-space: nowrap;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.look-classic .call-now svg { grid-column: 1; grid-row: 1 / span 2; flex: none; min-width: 1.25rem; }
.look-classic .call-now-label, .look-classic .call-now .cta-label { grid-column: 2; grid-row: 1; font-weight: 800; }
.look-classic .call-now .cta-line { grid-column: 2; grid-row: 2; font-size: 0.8125rem; font-weight: 500; }

/* Sections: the sticky classic header is about 4.6rem high, so an anchor target keeps 6rem (review SK-M7.3 finding 6). */
.look-classic .section { scroll-margin-top: 6rem; }
/* SK-M7.3c: 48 px between blocks on phones, 56 px from md, 80 px from lg (half above, half below each section). Placed
   before the hero and trust rules, which set their own padding. */
.look-classic .section { padding-block: 1.5rem; }
@media (min-width: 768px) { .look-classic .section { padding-block: 1.75rem; } }
@media (min-width: 1024px) { .look-classic .section { padding-block: 2.5rem; } }

/* Hero (SK-M7.3b, Marco D38 and style bible): the whole photo is the background from edge to edge (cover, focal point on
   the basin and tap at the right), under a fade in the palette's bg. Phones: the fade runs top to bottom, at least 85 %
   bg behind the text, and leaves the photo clear under the buttons. From lg it runs left to right (97 % / 87 % at 40 % /
   clear at 82 %) and the text column ends near half the width (about 66 % bg). The worst photo pixel (black) under
   those minimums still gives AA in Marine: the numbers are in the README ("Look classic"). The title's accent part
   (hero titleAccent) has its own line. */
.look-classic .section-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 3rem 9.5rem;
  background: var(--color-bg); }
.look-classic .section-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
    var(--color-bg) 0, var(--color-bg) 14%, color-mix(in srgb, var(--color-bg) 88%, transparent) 22%,
    color-mix(in srgb, var(--color-bg) 85%, transparent) calc(100% - 15rem),
    color-mix(in srgb, var(--color-bg) 40%, transparent) calc(100% - 9rem),
    transparent calc(100% - 5rem)); }
.look-classic .section-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
.look-classic .section-hero .hero-grid > :nth-child(2) { position: absolute; inset: 16% 0 auto; z-index: -2; width: 100%; height: 120%;
  margin: 0; border-radius: 0; }
.look-classic .section-hero .hero-grid > :nth-child(2) img,
.look-classic .section-hero .hero-grid > img:nth-child(2) { width: 100%; height: 100%; object-fit: cover; object-position: 73% 60%; }
.look-classic .section-hero .img-placeholder { display: none; }
.look-classic .section-hero h1 { margin: 0 0 0.75rem; font-size: 2.25rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.025em;
  color: var(--color-base); }
.look-classic .hero-title-accent { display: block; color: var(--color-accent); }
.look-classic .section-hero .lead { color: var(--color-text); max-width: 36.25rem; font-size: 1.0625rem; line-height: 1.55; }
.look-classic .cta-row .btn { padding: 0.75rem 1.25rem; font-size: 1.0625rem; }
/* The two hero buttons: side by side at 390 px (each half the row), two lines beside a large icon. */
.look-classic .cta-row-classic { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.625rem;
  max-width: 26rem; margin-top: 1.25rem; }
.look-classic .cta-row-classic .btn.call-now { justify-content: start; column-gap: 0.625rem; min-height: 3.25rem; padding: 0.5rem 0.875rem;
  font-size: 0.9375rem; border-radius: 0.75rem; }
.look-classic .cta-row-classic .call-now-label, .look-classic .cta-row-classic .cta-label { font-size: 1.0625rem; }
.look-classic .btn-whatsapp { background: var(--color-whatsapp, var(--color-accent)); color: var(--color-whatsapp-text, var(--color-accent-text));
  border: 0; box-shadow: 0 4px 14px color-mix(in srgb, var(--color-whatsapp, var(--color-accent)) 30%, transparent); }
/* Review 7c4cbf9 finding 4: hover and active keep the fill and text pair that check.sh holds at AA (whatsapp/whatsappText,
   else accent/accentText) and only lift the shadow, so no hover colour can drop below the checked contrast. */
.look-classic .btn-whatsapp:hover, .look-classic .btn-whatsapp:active {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-whatsapp, var(--color-accent)) 45%, transparent); }

/* Trust bar (SK-M7.3b): a light rounded panel that overlaps the hero's lower edge; outline accent circles beside a bold
   title and one muted line. Phones 2 x 2, from md four in a row with thin dividers. */
.look-classic .section-trust { position: relative; z-index: 1; margin-top: -2.5rem; padding-block: 0 1.5rem; }
.look-classic .section-trust .card-list { margin: 0; padding: 1rem 0.75rem; gap: 0.875rem 0.5rem; border-radius: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--color-surface, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-muted) 18%, var(--color-bg));
  box-shadow: 0 6px 20px color-mix(in srgb, var(--color-text) 10%, transparent); }
/* Marco's mock-up: the panel is slightly see-through where it overlaps the photo. 94 % surface over a 12 px blur; even a
   black (light palette) or white (dark palette) photo pixel behind it keeps the title and the muted line at AA in every
   kit and Marco palette (lowest: muted of Steen 4.61; README "Look classic"). Without backdrop-filter it stays solid. */
@supports (backdrop-filter: blur(1px)) {
  .look-classic .section-trust .card-list { background: color-mix(in srgb, var(--color-surface, var(--color-bg)) 94%, transparent);
    backdrop-filter: blur(12px); }
}
/* Review 7c4cbf9 finding 6: below 360 px one item per row, so no title breaks inside a word ("Zoetermeer"). */
@media (max-width: 359.98px) {
  .look-classic .section-trust .card-list { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; }
}
.look-classic .section-trust .card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; align-items: center;
  padding: 0.25rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.look-classic .section-trust .card-icon { grid-row: 1 / span 2; box-sizing: content-box; width: 1.25rem; height: 1.25rem; padding: 0.5rem;
  border: 1.5px solid var(--color-accent); border-radius: 999px; color: var(--color-accent); }
.look-classic .section-trust h3,
.look-classic .section-trust .card .card-title { margin: 0; font-size: 0.875rem; font-weight: 700; line-height: 1.25; color: var(--color-text); }
.look-classic .section-trust .card p { margin: 0; font-size: 0.8125rem; line-height: 1.3; color: var(--color-muted); }
/* SK-M7.3g: an item without its muted line (li.card-single) has one row: the icon spans only that row, so the title
   sits centred beside it. */
.look-classic .section-trust .card-single .card-icon { grid-row: 1; }

/* SK-M7.3c (Marco D40 and style bible): the rest of the page like the mock-up. Eyebrow 12 px capitals at 0.12em in the
   accent colour, H2 28 px (34 px from lg) weight 800, cards 16 px and panels 20 px round. */
.look-classic .eyebrow { margin: 0 0 0.375rem; font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--color-accent); }
.look-classic main h2 { font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.025em; }

/* Header navigation: from lg only (phones keep the call button alone); "Home" underlined in the accent colour. */
.look-classic .site-nav { display: none; }
.look-classic .site-nav ul { display: flex; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.look-classic .site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-size: 0.9375rem;
  font-weight: 500; color: var(--color-text); text-decoration: none; }
.look-classic .site-nav a:hover { color: var(--color-accent); }
.look-classic .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.375rem; height: 2px;
  border-radius: 1px; background: var(--color-accent); }

/* Services and steps: eyebrow, heading and intro centred, as in the example. */
.look-classic .section-cards-photo > .container-kit > .eyebrow, .look-classic .section-cards-photo > .container-kit > h2,
.look-classic .section-steps > .container-kit > .eyebrow, .look-classic .section-steps > .container-kit > h2 { text-align: center; }
.look-classic .section-cards-photo > .container-kit > h2, .look-classic .section-steps > .container-kit > h2 { margin: 0; }
.look-classic .section-cards-photo > .container-kit > h2 + p,
.look-classic .section-steps > .container-kit > h2 + p { max-width: 65ch; margin: 0.5rem auto 0; text-align: center; color: var(--color-muted); }

/* Services: photo on top (16:9 on phones, 4:3 from md), a round navy icon badge on the photo's lower edge, the title and
   two lines centred; 1 column, 3 from md for five cards (2 otherwise), 5 from lg for five. */
.look-classic .cards-photo { gap: 1rem; margin-top: 1.5rem; }
.look-classic .cards-photo .card { padding: 0 0 1.25rem; overflow: hidden; text-align: center; border-radius: 1rem; background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-muted) 18%, var(--color-bg)); box-shadow: 0 8px 24px color-mix(in srgb, var(--color-text) 8%, transparent); }
.look-classic .cards-photo .card > h3, .look-classic .cards-photo .card > p { padding-inline: 1rem; }
.look-classic .cards-photo .card > h3 { margin: 0.25rem 0 0.25rem; font-size: 1.1875rem; font-weight: 700; line-height: 1.3; color: var(--color-base); }
.look-classic .cards-photo .card > p { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--color-muted); }
.look-classic .card-media { position: relative; margin-bottom: 1.75rem; }
/* A card without a photo shows its icon with room above it (review SK-M7.3 finding 4). */
.look-classic .cards-photo .card > .card-icon { display: block; margin: 1.25rem auto 0; }
.look-classic .card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.look-classic .card-media .img-placeholder { border-radius: 0; aspect-ratio: 16 / 9; }
.look-classic .card-badge { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: inline-flex;
  align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 999px;
  background: var(--color-base); color: var(--color-bg); border: 3px solid var(--color-bg); }

/* SK-M7.3e (Marco D45): experience and brands, one light panel like the rates. Left the eyebrow, heading, paragraphs and
   a stressed line in the base colour; right (below on phones) a small label, the brand names as calm outline chips in
   the text colour (names only, no logos, no accent: nothing reads as an official badge) and a small muted note. */
.look-classic .experience-classic { display: grid; gap: 1.5rem; padding: 1.5rem 1.25rem; border-radius: 1.25rem;
  background: var(--color-surface, var(--color-bg)); border: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-bg)); }
.look-classic .experience-main h2 { margin: 0 0 0.75rem; }
.look-classic .experience-main p:not(.eyebrow) { margin: 0 0 0.625rem; max-width: 60ch; font-size: 1rem; line-height: 1.6; color: var(--color-text); }
.look-classic .experience-main .experience-note { margin: 0.875rem 0 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: var(--color-base); }
.look-classic .experience-brands-title { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 700; color: var(--color-text); }
.look-classic .brand-chips { gap: 0.5rem; margin: 0; font-weight: 500; }
.look-classic .brand-chips li { padding: 0.3125rem 0.75rem; font-size: 0.875rem; line-height: 1.4; border-radius: 999px; background: var(--color-bg);
  color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-muted) 28%, var(--color-bg)); }
.look-classic .experience-brands-note { margin: 0.875rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-muted); }

/* Rates: one light panel (20 px round). Left the coins icon in an accent outline circle beside the title and intro; right
   (below on phones) the summary line with the price in the accent colour, then the small note. No estimate here. */
.look-classic .pricing-classic { display: grid; gap: 1.25rem; padding: 1.25rem; border-radius: 1.25rem; background: var(--color-surface, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-bg)); }
.look-classic .pricing-head { display: flex; align-items: center; gap: 1rem; }
.look-classic .pricing-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem;
  border: 1.5px solid var(--color-accent); border-radius: 999px; background: var(--color-bg); color: var(--color-accent); }
.look-classic .pricing-head h2 { margin: 0; font-size: 1.5rem; }
.look-classic .pricing-intro { margin: 0.125rem 0 0; color: var(--color-muted); }
.look-classic .pricing-summary { margin: 0 0 0.5rem; font-size: 1.125rem; line-height: 1.4; color: var(--color-text); }
.look-classic .pricing-summary-label { font-weight: 700; }
.look-classic .pricing-dot { margin-inline: 0.125rem; color: var(--color-muted); }
.look-classic .pricing-price { font-weight: 800; white-space: nowrap; color: var(--color-accent); }
.look-classic .pricing-classic .price-table { display: grid; gap: 0.25rem; margin: 0 0 0.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--color-muted); }
.look-classic .pricing-classic .price-row { display: flex; flex-wrap: wrap; column-gap: 0.375rem; }
.look-classic .pricing-classic .price-row dt { font-weight: 700; color: var(--color-text); }
.look-classic .pricing-classic .price-row dt::after { content: ":"; }
.look-classic .pricing-classic .price-row dd { margin: 0; }
/* The note is the stressed line under the rows (for example "Geen voorrijkosten in Zoetermeer"). SK-M7.3g (call Ed
   2026-10-30, "mag nog vetter"): larger, extra bold, with an accent bar at its left, in the base colour on the panel
   (the base/bg pair check.sh holds). */
.look-classic .pricing-note { margin: 0.25rem 0 0; padding-left: 0.75rem; border-left: 4px solid var(--color-accent); font-size: 1.125rem;
  font-weight: 800; line-height: 1.4; color: var(--color-base); }

/* SK-M7.3g (review 37bac09: tight headings, no list bullets): the text pages (privacy statement, content.pages such as
   the "Algemene voorwaarden") read as a document: lines of at most about 70 characters, space above each heading,
   paragraphs apart, lists with bullets in the accent colour. */
.look-classic .prose-kit > * { max-width: 70ch; }
.look-classic .prose-kit h1 { margin: 0 0 1.25rem; font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.look-classic .prose-kit h2 { margin: 2rem 0 0.625rem; font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
.look-classic .prose-kit h3 { margin: 1.5rem 0 0.5rem; font-size: 1.0625rem; font-weight: 700; line-height: 1.35; color: var(--color-base); }
.look-classic .prose-kit p { margin: 0 0 0.875rem; line-height: 1.65; }
.look-classic .prose-kit ul { margin: 0 0 1rem; padding-left: 1.375rem; list-style: disc; }
.look-classic .prose-kit li { margin: 0 0 0.375rem; padding-left: 0.25rem; line-height: 1.6; }
.look-classic .prose-kit li::marker { color: var(--color-accent); }
.look-classic .prose-kit a { color: var(--color-base); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
.look-classic .prose-kit .lead { margin-bottom: 1.25rem; }
.look-classic .prose-kit address { font-style: normal; line-height: 1.65; }

/* Steps: an accent number circle (32 px), a light icon circle (44 px) and the text in a row; stacked steps on phones,
   three in a row with a chevron between them from lg. */
.look-classic .steps-list { gap: 1.25rem; margin-top: 1.5rem; }
.look-classic .steps-item { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto 1fr;
  column-gap: 0.75rem; align-items: start; padding: 0; background: transparent; border: 0; box-shadow: none; }
.look-classic .steps-item::before { grid-column: 1; grid-row: 1 / span 2; width: 2rem; height: 2rem; margin: 0.375rem 0 0; font-size: 0.9375rem; }
.look-classic .steps-icon { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--color-surface, var(--color-bg)); color: var(--color-base);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-text) 10%, transparent); }
.look-classic .steps-item h3 { grid-column: 3; margin: 0.125rem 0 0.25rem; font-size: 1rem; font-weight: 700; color: var(--color-text); }
.look-classic .steps-item p { grid-column: 3; margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--color-muted); }

/* Reviews: a light panel (20 px round), the quote card left with an accent quote mark and stars, the photo right from lg
   (under the quote on phones), fading into the panel. */
.look-classic .reviews-panel { display: grid; overflow: hidden; border-radius: 1.25rem; background: var(--color-surface, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-muted) 15%, var(--color-bg)); }
.look-classic .reviews-body { padding: 1.5rem 1.25rem; }
.look-classic .reviews-body h2 { margin: 0 0 1rem; }
.look-classic .reviews-list { margin: 0; }
.look-classic .review { position: relative; padding: 1.25rem 1.25rem 1.25rem 3.25rem; border-radius: 0.75rem; background: var(--color-bg);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-text) 7%, transparent); }
.look-classic .review::before { content: "\201C"; position: absolute; left: 1rem; top: 0.625rem; font-family: Georgia, serif; font-size: 3rem;
  font-weight: 700; line-height: 1; color: var(--color-accent); }
.look-classic .review blockquote { margin: 0; }
.look-classic .review blockquote p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--color-text); }
.look-classic .review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.875rem;
  color: var(--color-muted); }
.look-classic .review-stars { font-size: 1.375rem; line-height: 1; letter-spacing: 0.06em; color: var(--color-accent); }
.look-classic .review-name { font-weight: 700; color: var(--color-text); }
.look-classic .reviews-media { position: relative; }
.look-classic .reviews-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

/* Contact: a dark rounded panel (20 px) in the footer pair, which check.sh holds at the text minimum in every palette; the
   eyebrow mixes the accent with the panel's text colour to stay readable on it. The two-line hero buttons, the mail
   link as quiet text, and the facts (icon, title, line) under a divider (beside it from lg). */
/* Review bfb9c15 finding 1: one column of minmax(0, 1fr) below lg (an auto track grew to the buttons' min-content width
   and overflowed the panel at 320 and 360 px); the button row wraps to one button per line when two do not fit. */
.look-classic .contact-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; border-radius: 1.25rem;
  background: var(--color-footer-bg, var(--color-base)); color: var(--color-footer-text, var(--color-bg)); }
.look-classic .contact-panel h2, .look-classic .contact-panel h3, .look-classic .contact-panel p,
.look-classic .contact-panel a:not(.btn) { color: var(--color-footer-text, var(--color-bg)); }
.look-classic .contact-panel .eyebrow { color: color-mix(in srgb, var(--color-accent) 70%, var(--color-footer-text, var(--color-bg))); }
.look-classic .contact-panel h2 { margin: 0 0 0.5rem; }
.look-classic .contact-main { min-width: 0; }
.look-classic .contact-main > p { margin: 0; }
.look-classic .contact-panel .cta-row-classic { max-width: 30rem; margin-top: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); }
.look-classic .contact-mail { margin-top: 0.75rem !important; font-size: 0.875rem; }
.look-classic .contact-mail a { display: inline-flex; align-items: center; gap: 0.375rem; min-height: 44px; }
.look-classic .contact-panel :focus-visible { outline-color: var(--color-footer-text, var(--color-bg)); box-shadow: none; }
.look-classic .contact-facts { display: grid; gap: 1rem; margin: 0; padding: 1.25rem 0 0; list-style: none;
  border-top: 1px solid color-mix(in srgb, var(--color-footer-text, var(--color-bg)) 22%, transparent); }
.look-classic .contact-facts li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.875rem; align-items: start; }
.look-classic .contact-facts h3 { margin: 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.35; }
.look-classic .contact-facts p { margin: 0.125rem 0 0; font-size: 0.875rem; line-height: 1.45; }

/* Footer: the footer pair, the logo for a dark background beside the name, the links, and the year and trade line. */
.look-classic .site-footer-classic { margin-top: 0; padding-block: 1.75rem; }
.look-classic .footer-grid { display: grid; gap: 1rem; justify-items: start; }
.look-classic .site-footer-classic .site-name-sub { color: color-mix(in srgb, var(--color-footer-text, var(--color-bg)) 80%, var(--color-footer-bg, var(--color-base))); }
.look-classic .footer-nav ul { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.look-classic .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; text-decoration: none; }
.look-classic .footer-nav a:hover { text-decoration: underline; }
.look-classic .footer-meta p { margin: 0; font-size: 0.8125rem; line-height: 1.6; }
.look-classic .footer-credit { margin-top: 0.375rem !important; }
.look-classic .footer-credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* Review 7c4cbf9 finding 1 / bfb9c15 finding 4: below 390 px (at 360 px the two-line button still covered 13 px of the
   name, check.sh element check) the header call button is a 44 px round phone icon (its aria-label keeps
   "Bel direct: <number>"; the hero's call button right below shows the number) and the trade line tightens, so the
   name and the trade line are never covered. */
@media (max-width: 389.98px) {
  .look-classic .site-header .call-now { grid-template-columns: auto; justify-content: center; width: 2.75rem; padding: 0;
    border-radius: 999px; font-size: 0; }
  .look-classic .site-header .call-now-label { display: none; }
  .look-classic .site-header .call-now svg { grid-row: 1; }
  .look-classic .site-name-sub { letter-spacing: 0.08em; }
}

@media (min-width: 768px) {
  .look-classic .site-name-main { font-size: 1.375rem; }
  .look-classic .site-name-sub { font-size: 0.6875rem; letter-spacing: 0.22em; }
  .look-classic .site-mark { height: 3.5rem; }
  .look-classic .site-name-classic:has(> .site-mark) { column-gap: 0.75rem; }
  .look-classic .call-now { font-size: 1rem; padding: 0.625rem 1.125rem; }
  .look-classic .section-trust .card-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 1.5rem 0.5rem; }
  .look-classic .section-trust .card { padding: 0.25rem 1rem; column-gap: 0.75rem; }
  .look-classic .section-trust .card + .card { border-left: 1px solid color-mix(in srgb, var(--color-muted) 25%, transparent); }
  .look-classic .section-trust .card-icon { width: 1.375rem; height: 1.375rem; padding: 0.5625rem; }
  .look-classic .site-header-inner { min-height: 4.75rem; }
  .look-classic .section-trust h3,
  .look-classic .section-trust .card .card-title { font-size: 0.9375rem; }
  .look-classic .section-hero h1 { font-size: 2.75rem; }
  .look-classic .cards-photo.cards-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .look-classic .card-media img, .look-classic .card-media .img-placeholder { aspect-ratio: 4 / 3; }
  .look-classic .pricing-classic { padding: 1.5rem 2rem; }
  .look-classic .experience-classic { padding: 2rem; }
  /* SK-M7.3e: from md a long rate value wraps beside its label, right-aligned, instead of dropping below it. */
  .look-classic .pricing-classic .price-row { flex-wrap: nowrap; column-gap: 1.5rem; }
  .look-classic .pricing-classic .price-row dt { flex: none; }
  .look-classic .pricing-classic .price-row dd { text-align: right; }
  .look-classic .contact-panel { padding: 2rem; }
  .look-classic .prose-kit h1 { font-size: 2.5rem; }
  .look-classic .prose-kit h2 { margin-top: 2.5rem; font-size: 1.375rem; }
}

@media (min-width: 1024px) {
  /* Style bible: 80 px padding, at least 480 px high, the overlay 97 % / 87 % at 40 % / clear at 82 %. The text column is
     at most 580 px and 46vw, so it ends near half the width, where the overlay is still about 66 % bg (README). */
  .look-classic .section-hero { display: flex; align-items: center; min-height: 30rem; padding-block: 5rem 6.5rem; }
  .look-classic .section-hero > .container-kit { width: 100%; }
  .look-classic .section-hero::before { background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-bg) 97%, transparent) 0,
    color-mix(in srgb, var(--color-bg) 87%, transparent) 40%,
    transparent 82%); }
  .look-classic .section-hero .hero-grid { grid-template-columns: minmax(0, min(36.25rem, 46vw)); }
  .look-classic .section-hero .hero-grid > :nth-child(2) { inset: 0; height: 100%; }
  .look-classic .section-hero .hero-grid > :nth-child(2) img,
  .look-classic .section-hero .hero-grid > img:nth-child(2) { object-position: 70% 62%; }
  .look-classic .section-hero h1 { font-size: 3.25rem; }
  .look-classic .section-hero .lead { font-size: 1.125rem; }
  .look-classic .cta-row-classic { max-width: 25rem; margin-top: 1.5rem; }
  .look-classic .cards-photo.cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .look-classic main h2 { font-size: 2.125rem; }
  .look-classic .site-header-inner { gap: 1.5rem; }
  .look-classic .site-nav { display: block; margin-inline: auto; }
  .look-classic .cards-photo { gap: 1.25rem; margin-top: 2rem; }
  .look-classic .pricing-classic { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2.5rem; padding: 1.75rem 2.5rem; }
  .look-classic .pricing-icon { width: 4.5rem; height: 4.5rem; }
  .look-classic .experience-classic { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; padding: 2.25rem 2.5rem; }
  .look-classic .experience-brands { padding-left: 2.5rem; border-left: 1px solid color-mix(in srgb, var(--color-muted) 22%, transparent); }
  .look-classic .pricing-head h2 { font-size: 1.75rem; }
  .look-classic .pricing-body { padding-left: 2.5rem; border-left: 1px solid color-mix(in srgb, var(--color-muted) 22%, transparent); }
  .look-classic .pricing-summary { font-size: 1.375rem; }
  .look-classic .pricing-price { font-size: 1.5rem; }
  .look-classic .pricing-note { font-size: 1.25rem; }
  .look-classic .steps-list { gap: 2.5rem; margin-top: 2rem; }
  .look-classic .steps-item:not(:last-child)::after { content: ""; position: absolute; top: 1.25rem; right: -1.5rem; width: 0.5rem; height: 0.5rem;
    border-top: 2px solid var(--color-muted); border-right: 2px solid var(--color-muted); transform: rotate(45deg); }
  .look-classic .reviews-panel { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .look-classic .reviews-body { padding: 2rem 2.5rem; }
  .look-classic .reviews-media img { height: 100%; aspect-ratio: auto; }
  .look-classic .reviews-media::before { content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg, var(--color-surface, var(--color-bg)) 0, transparent 35%); }
  .look-classic .contact-panel { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 3rem; padding: 2.5rem 3rem; }
  .look-classic .contact-facts { align-content: center; padding: 0 0 0 3rem; border-top: 0;
    border-left: 1px solid color-mix(in srgb, var(--color-footer-text, var(--color-bg)) 22%, transparent); }
  .look-classic .footer-grid { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
  .look-classic .footer-nav { justify-self: center; }
  .look-classic .footer-meta { text-align: right; }
}