/* ============================================================
   NEW-LOOK PAGES (Nov 2026) — the homepage and the main pages built
   by hand from Tyler's "Dans Plumbing Home v3": /services, each
   service, each town, /about, /contact, /areas. Load with
   'css' => 'dp' and 'look' => 'dp' (homepage: 'v3'); the markup comes
   from inc/dp.php. Design system:
   https://claude.ai/artifact/MD5esDbdkZKjpm3M8cVEci. Tokens, buttons,
   header, footer and call bar are site-wide in global.css.
   ============================================================ */

body.dp { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.dp img { display: block; max-width: 100%; height: auto; }
/* links in running text; :where() keeps this at zero specificity so every component's own link style wins */
:where(.dp-page) a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-underline-offset: 3px; }
:where(.dp-page) a:hover { color: var(--blue-deep); }
.dp h1, .dp h2, .dp h3 { font-family: var(--font-sans); letter-spacing: normal; line-height: 1.2; text-wrap: balance; }

/* ---------- type styles (tokens.json type.groups) ---------- */
.dp .display-xl { font-size: clamp(48px, 7.4vw, 100px); line-height: .9; font-weight: 850; letter-spacing: -0.03em; font-stretch: 88%; }
.dp .display    { font-size: clamp(40px, 5.4vw, 72px); line-height: .94; font-weight: 850; letter-spacing: -0.025em; font-stretch: 88%; }
.dp .h2         { font-size: clamp(34px, 4.6vw, 58px); line-height: .98; font-weight: 800; letter-spacing: -0.02em; font-stretch: 90%; }
.dp .quote-xl   { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; font-stretch: 90%; }
.dp .numeral    { font-size: 48px; line-height: 1; font-weight: 850; font-stretch: 80%; }
.dp .stat       { font-size: 34px; line-height: 1; font-weight: 850; letter-spacing: -0.03em; font-stretch: 88%; }
.dp .h3-lg      { font-size: 24px; line-height: 1.2; font-weight: 800; }
.dp .h3         { font-size: 22px; line-height: 1.2; font-weight: 800; }
.dp .job-title  { font-size: 21px; line-height: 1.25; font-weight: 700; }
.dp .quote      { font-size: 21px; line-height: 1.4; font-weight: 500; }
.dp .lede       { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; }
.dp .body-lg    { font-size: 18px; line-height: 1.55; }
.dp .body       { font-size: 17px; line-height: 1.55; }
.dp .body-sm    { font-size: 15px; line-height: 1.5; }
.dp .eyebrow    { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; }
.dp .meta       { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- layout ---------- */
.dp-section { padding-top: var(--section); }
.dp-section--last { padding-bottom: var(--section); }
.dp-grid { display: grid; gap: var(--space-4); }
.dp-grid--svc { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.dp-grid--three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.dp-grid--jobs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-7) var(--space-5); }
.dp-grid--videos { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 18px; }
@media (max-width: 559px) { .dp-grid--videos { gap: var(--space-4) var(--space-3); } .dp .dp-video__title { font-size: 16px; } }
.dp-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.dp-links { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-6); font-weight: 700; font-size: 16px; }
.dp .dp-links a { color: var(--blue); }

/* eyebrow + section head */
.dp-eyebrow { color: var(--blue); }
.dp-eyebrow--deep { color: var(--blue-deep); }
.dp-ink .dp-eyebrow { color: var(--on-ink-blue); }
.dp-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-9); }
.dp-head__titles { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dp-head__aside { max-width: 38ch; color: var(--ink-3); }
.dp-head__rating { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 16px; color: var(--muted); }
.dp-head__rating .stat { font-size: 28px; color: var(--ink); }

/* ---------- hero ---------- */
.dp-hero { padding-top: clamp(28px, 5vw, 64px); }
.dp-hero__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(28px, 4vw, var(--space-14)); align-items: end; }
.dp-hero__copy { display: flex; flex-direction: column; gap: 26px; padding-bottom: var(--space-2); min-width: 0; }
.dp-accent { color: var(--blue); }
.dp-hero__p { color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.dp-hero__photo { position: relative; margin: 0; }
.dp .dp-hero__photo img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--radius-xl); background: var(--blue-wash); }
.dp-caption { position: absolute; left: var(--space-4); bottom: var(--space-4); background: var(--ink); color: var(--on-ink); padding: var(--space-2) 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; line-height: 1.3; }

/* rating badge */
.dp .dp-rating { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 18px; align-self: flex-start; }
.dp-rating__side { display: flex; flex-direction: column; gap: 2px; }
.dp-rating__sub { font-size: 14px; line-height: 1.3; color: var(--muted); }
.dp-stars { color: var(--star); letter-spacing: 2px; line-height: 1.2; }
.dp-stars--deep { color: var(--star-deep); }

/* fact strip */
.dp-facts { margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--rule-thin); }
.dp-facts__cell { padding: var(--space-5) var(--space-5) var(--space-5) 0; display: flex; flex-direction: column; gap: 6px; }
.dp-facts__label { color: var(--muted); }
.dp-facts__value { margin: 0; font-weight: 700; font-size: 18px; line-height: 1.3; }

/* ---------- service cards ---------- */
.dp .dp-svc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; }
.dp .dp-svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--ink); }
.dp .dp-svc__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--blue-wash); }
.dp-svc__body { padding: 18px var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.dp-svc__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.dp-svc__top .h3 { font-stretch: 95%; }
.dp-svc__arrow { color: var(--blue); font-size: 20px; font-weight: 700; }
.dp-svc__desc { color: var(--ink-3); text-wrap: pretty; }
.dp-svc__meta { margin-top: auto; padding-top: var(--space-2); color: var(--faint); }
.dp-also { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.dp-also__label { color: var(--muted); }
.dp .dp-strong { font-weight: 700; }

/* ---------- the ink band ---------- */
.dp-band { margin-top: var(--section); background: var(--ink); color: var(--on-ink); }
.dp-band__in { padding-block: clamp(56px, 8vw, 104px); display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.dp-band__lead { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 4vw, var(--space-14)); align-items: center; }
.dp .dp-band__img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: var(--radius-lg); }
.dp-band__words { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dp-band__quote { margin: 0; color: var(--on-ink); text-wrap: balance; }
.dp-band__p { color: var(--on-ink-2); max-width: 44ch; }
.dp-band .dp-grid--three { gap: var(--space-7); }
.dp-promise { display: flex; flex-direction: column; gap: var(--space-4); }
.dp .dp-promise__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }
.dp-promise__n { color: var(--on-ink-blue); font-size: 12px; }
.dp .dp-promise h3 { color: var(--on-ink); }
.dp-promise__p { color: var(--on-ink-2); }

/* ---------- reviews ---------- */
.dp-review { margin: 0; border-radius: var(--radius-lg); padding: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); }
.dp-review--sun { background: var(--sun); }
.dp-review--blue { background: var(--blue-soft); }
.dp-review--plain { background: var(--surface); border: 1px solid var(--line); }
.dp-review__q { margin: 0; color: var(--ink); text-wrap: pretty; }
.dp-review__who { margin-top: auto; color: var(--muted); }
.dp-review__who strong { color: var(--ink); }

/* ---------- job cards ---------- */
.dp .dp-job { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: var(--ink); }
.dp .dp-job:hover { color: var(--blue-deep); }
.dp .dp-job__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); background: var(--blue-wash); }
.dp-job__meta { color: var(--muted); }

/* ---------- videos: the poster plays in place on a tap ---------- */
.dp-video { display: flex; flex-direction: column; gap: var(--space-3); }
.dp-video__frame { position: relative; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--ink); }
.dp-video__frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dp-video__frame.is-playing video { object-fit: contain; }
.dp-video__play { position: absolute; inset: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.dp-video__disc { position: absolute; left: 14px; bottom: 14px; width: 50px; height: 50px; border-radius: 50%; background: var(--blue); color: var(--on-blue); display: flex; align-items: center; justify-content: center; font-size: 17px; padding-left: 3px; }
.dp-video__play:hover .dp-video__disc { background: var(--blue-deep); }
.dp-video__len { position: absolute; right: var(--space-3); top: var(--space-3); background: var(--ink); color: var(--on-ink); padding: var(--space-1) var(--space-2); border-radius: var(--radius-xs); font-size: 12px; }
.dp-video__frame.is-playing .dp-video__play, .dp-video__frame.is-playing .dp-video__len { display: none; }
.dp-video { margin: 0; }
.dp-video__cap { display: flex; flex-direction: column; gap: 6px; }
.dp .dp-video__title { font-size: 18px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.dp-video__place { color: var(--muted); }

/* ---------- how a job goes ---------- */
.dp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 1.5px solid var(--ink); }
.dp-step { padding: var(--space-6) var(--space-6) var(--space-2) 0; display: flex; flex-direction: column; gap: 10px; }
.dp-step__n { color: var(--blue); }
.dp-step__p { color: var(--ink-3); }

/* ---------- where we work ---------- */
.dp-areas { background: var(--blue-wash); border-radius: var(--radius-2xl); overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.dp-areas__words { padding: clamp(28px, 4vw, var(--space-14)); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.dp-areas .h2 { font-size: clamp(32px, 4vw, 50px); }
.dp-areas__p { color: var(--ink-2); max-width: 44ch; }
.dp-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp .dp-chip { background: var(--page); padding: 9px 14px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-size: 15px; }
.dp .dp-chip:hover { background: var(--ink); color: var(--on-ink); }
.dp-areas__zips { color: var(--muted); line-height: 1.7; }
.dp .dp-areas__img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }

/* ---------- questions ---------- */
.dp-faq-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(24px, 4vw, var(--space-14)); align-items: start; }
.dp-faq-layout .dp-faq { grid-column: span 2; }
@media (max-width: 760px) { .dp-faq-layout .dp-faq { grid-column: auto; } }
.dp-faq { min-width: 0; border-top: 1.5px solid var(--ink); }
.dp-faq__row { border-bottom: 1px solid var(--rule-thin); }
.dp-faq__q { cursor: pointer; list-style: none; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); font-size: 20px; font-weight: 700; line-height: 1.3; }
.dp-faq__q::-webkit-details-marker { display: none; }
.dp-faq__icon { flex: none; position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--ink); }
.dp-faq__icon::before, .dp-faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); transform: translate(-50%, -50%); transition: transform .2s; }
.dp-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.dp-faq__row[open] .dp-faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.dp-faq__a { padding: 0 48px var(--space-6) 0; color: var(--ink-2); max-width: 62ch; }

/* ---------- closing call ---------- */
.dp-cta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: clamp(24px, 4vw, var(--space-14)); align-items: center; }
.dp .dp-cta__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-2xl); }
.dp-cta__words { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.dp-cta__p { font-size: 19px; color: var(--ink-2); max-width: 40ch; }
.dp-cta__alt { font-size: 16px; color: var(--muted); }


/* ============================================================
   Blocks for the main pages
   ============================================================ */

/* breadcrumb */
.dp-crumb { padding-top: var(--space-5); }
.dp-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.dp-crumb li { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.dp-crumb li + li::before { content: "/"; color: var(--rule-mid); }
.dp .dp-crumb a { color: var(--muted); text-decoration: none; }
.dp .dp-crumb a:hover { color: var(--blue); }
.dp-crumb [aria-current] { color: var(--ink); }

/* page hero: the homepage hero, a size down */
.dp-hero--page .dp-hero__grid { align-items: center; }
.dp-hero--page .dp-hero__copy { gap: 22px; }
.dp .dp-hero--page .dp-hero__photo img { aspect-ratio: 5 / 4.6; }
.dp-hero--text .dp-hero__grid { grid-template-columns: minmax(0, 1fr); }
.dp-hero--text .dp-hero__copy { max-width: 52rem; }
.dp .display-l { font-size: clamp(42px, 6vw, 80px); line-height: .92; font-weight: 850; letter-spacing: -0.03em; font-stretch: 88%; }
.dp .serif { color: var(--blue); font-weight: inherit; letter-spacing: inherit; }
.dp-trustline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 15px; color: var(--muted); }
.dp .dp-trustline a { color: var(--ink); font-weight: 700; text-decoration: none; }
.dp-trustline__sep { color: var(--rule-mid); }
.dp-hero__note { max-width: 44ch; color: var(--muted); font-size: 15px; line-height: 1.5; }

/* a row of short Google quotes, under the hero */
.dp-quotes { margin-top: var(--space-7); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.dp-quotes::-webkit-scrollbar { display: none; }
.dp-quote { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-2); padding: 18px 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.dp-quote:nth-child(3n + 1) { background: var(--sun); border-color: var(--sun); }
.dp-quote:nth-child(3n + 2) { background: var(--blue-soft); border-color: var(--blue-soft); }
.dp-quote__t { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; color: var(--ink); }
.dp-quote__who { margin-top: auto; font-size: 14px; color: var(--muted); }
@media (max-width: 759px) { .dp-quotes { grid-auto-columns: 78%; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); } }

/* a wall of reviews: cards of their natural height in columns */
.dp-wall { columns: 3 300px; column-gap: var(--space-4); }
.dp-wall .dp-review { break-inside: avoid; margin-bottom: var(--space-4); }
.dp-wall .dp-review:nth-child(3n + 1) { background: var(--sun); border: 0; }
.dp-wall .dp-review:nth-child(3n + 2) { background: var(--blue-soft); border: 0; }
.dp-wall .dp-review:nth-child(3n) { background: var(--surface); border: 1px solid var(--line); }
.dp-review__when { color: var(--faint); }

/* one review set into the page */
.dp-pull { margin: 0; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--sun); display: flex; flex-direction: column; gap: var(--space-3); }
.dp-pull__q { margin: 0; font-size: 19px; line-height: 1.45; font-weight: 600; }
.dp-pull__who { font-size: 15px; color: var(--muted); }
.dp-pull__who strong { color: var(--ink); }

/* text beside a card */
.dp-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 899px) { .dp-split { grid-template-columns: minmax(0, 1fr); } }
.dp-split__side { display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 96px; }
@media (max-width: 899px) { .dp-split__side { position: static; } }
.dp-prose { display: flex; flex-direction: column; gap: 18px; max-width: 64ch; }
.dp-prose p { font-size: 18px; line-height: 1.65; color: var(--ink-2); }
.dp-prose .dp-prose__drop { font-size: clamp(21px, 2vw, 24px); line-height: 1.45; font-weight: 600; color: var(--ink); }
.dp-prose__aside { border-top: 1px solid var(--rule-thin); padding-top: var(--space-4); font-size: 16px !important; }

/* cards */
.dp-card { border-radius: var(--radius-lg); padding: var(--space-7); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.dp-card--wash { background: var(--blue-wash); border-color: var(--blue-wash); }
.dp-card--sun { background: var(--sun); border-color: var(--sun); }
.dp-card__k { color: var(--blue); }
.dp-card__big { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.02; font-weight: 800; font-stretch: 90%; letter-spacing: -0.02em; }
.dp-card__p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.dp-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.dp-grid--two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-4); }
.dp-sign__n { color: var(--blue); }
.dp-sign__t { font-size: 20px; line-height: 1.25; font-weight: 800; }
.dp .dp-sign__job { color: var(--muted); text-decoration: none; }
.dp a.dp-sign__job:hover { color: var(--blue); }
.dp-sign__p { color: var(--ink-3); font-size: 16px; line-height: 1.55; }
.dp-line { max-width: 52ch; font-size: clamp(19px, 1.8vw, 23px); line-height: 1.4; font-weight: 600; margin-top: var(--space-7); }

/* tinted section */
.dp-wash { margin-top: var(--section); background: var(--blue-wash); }
.dp-wash > .dp-wrap { padding-block: clamp(56px, 8vw, 104px); }
.dp-wash + .dp-section, .dp-band + .dp-section { padding-top: var(--section); }
.dp-wash .dp-card:not(.dp-card--sun) { background: var(--surface); border-color: var(--surface); }

/* link cards: related work, nearby towns, neighborhoods */
.dp .dp-link { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; min-width: 0; }
.dp .dp-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); color: var(--ink); }
.dp-link__t { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 20px; line-height: 1.25; font-weight: 800; }
.dp-link__t::after { content: "\2192"; color: var(--blue); flex: none; }
.dp-link__b { color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.dp-link__m { color: var(--muted); }

/* notes: a ruled list of label and answer */
.dp-notes { margin: 0; border-top: 1.5px solid var(--ink); }
.dp-notes > div { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); gap: 6px 24px; padding-block: 18px; border-bottom: 1px solid var(--rule-thin); }
.dp-notes dt { color: var(--muted); padding-top: 3px; }
.dp-notes dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 639px) { .dp-notes > div { grid-template-columns: minmax(0, 1fr); } }

/* text links in a list */
.dp-plain-list { list-style: none; margin: 0; padding: 0; columns: 2 300px; column-gap: var(--space-9); }
.dp-plain-list li { break-inside: avoid; padding: 10px 0; border-bottom: 1px solid var(--rule-thin); font-size: 17px; line-height: 1.4; }
.dp-plain-list span { color: var(--muted); font-size: 14px; }

/* the ink band's card grid (about: what that means day to day) */
.dp-vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: var(--space-4); }
.dp-val { padding: 22px 24px; border-radius: var(--radius-lg); border: 1px solid rgba(246, 248, 251, .14); background: rgba(246, 248, 251, .04); display: flex; flex-direction: column; gap: 8px; }
.dp .dp-val h3 { color: var(--on-ink); font-size: 20px; font-weight: 800; }
.dp-val p { color: var(--on-ink-2); font-size: 16px; line-height: 1.55; }
.dp-band__head { display: flex; flex-direction: column; gap: var(--space-3); }
.dp .dp-band__head .h2 { color: var(--on-ink); }

/* photos in a row with captions */
.dp-pics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-4); }
.dp-pics figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dp .dp-pics img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); }
.dp-pics figcaption { color: var(--muted); }

/* spec list beside a photo (about) */
.dp-spec { margin: 0; }
.dp-spec > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 12px; border-bottom: 1px solid var(--rule-thin); }
.dp-spec dt { color: var(--muted); }
.dp-spec dd { margin: 0; font-weight: 700; text-align: right; }
.dp .dp-side-photo img { width: 100%; aspect-ratio: 4 / 4.2; object-fit: cover; border-radius: var(--radius-lg); }
.dp-side-photo { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.dp-side-photo figcaption { color: var(--muted); }

/* contact */
.dp .dp-phone { display: inline-block; font-size: clamp(44px, 7vw, 88px); line-height: 1; font-weight: 850; font-stretch: 88%; letter-spacing: -0.03em; color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.dp .dp-phone:hover { color: var(--blue); }
.dp-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-4); }
.dp-info .dp-card { gap: 6px; padding: 22px 24px; }
.dp-info__v { font-size: 19px; line-height: 1.3; font-weight: 800; }
.dp-info address { font-style: normal; }
.dp-book { border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); padding: var(--space-6); }
.dp-book .bks { border: 0; padding: 0; }

/* areas: one card per town */
.dp-towns { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--space-4); }
.dp-town { padding: 24px 26px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.dp .dp-town__t { font-size: 26px; line-height: 1.05; font-weight: 850; font-stretch: 90%; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); display: flex; justify-content: space-between; gap: var(--space-3); }
.dp .dp-town__t::after { content: "\2192"; color: var(--blue); font-weight: 700; }
.dp .dp-town__t:hover { color: var(--blue-deep); }
.dp-town__b { color: var(--ink-3); font-size: 16px; line-height: 1.55; }
.dp-town__m { color: var(--muted); }
.dp-town .dp-chips { margin-top: 4px; }
.dp-town .dp-chip { background: var(--blue-wash); font-size: 14px; padding: 7px 12px; }

@media (prefers-reduced-motion: reduce) { .dp-page * { transition: none !important; } }

/* the jobs a service covers, as quiet chips on its card */
.dp-svc__items { margin-top: 2px; gap: 6px; }
.dp .dp-chip--quiet, .dp .dp-chip--quiet:hover { background: var(--blue-wash); color: var(--ink); padding: 5px 11px; font-size: 13px; font-weight: 600; }

/* ---------- job stories (blog) ---------- */
.dp-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-7) var(--space-5); }
.dp-story { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dp-story__img { position: relative; display: block; border-radius: var(--radius-md); overflow: hidden; background: var(--blue-wash); }
.dp .dp-story__img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .45s ease; }
.dp-story:hover .dp-story__img img { transform: scale(1.03); }
.dp-story__tag { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); }
.dp-story__words { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.dp-story__meta { color: var(--muted); }
.dp .dp-story__t { color: var(--ink); text-decoration: none; }
.dp .dp-story__t:hover { color: var(--blue-deep); }
.dp-story__d { color: var(--ink-3); font-size: 15px; line-height: 1.5; }
.dp-story__foot { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.dp-story__price { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; }
.dp-story__price small { font-weight: 500; font-size: 13px; color: var(--muted); }
.dp .dp-story .dp-arrow { padding: 0; font-size: 16px; }
.dp-stories--list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1.5px solid var(--ink); }
.dp-story--wide { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: var(--space-6); padding-block: var(--space-6); border-bottom: 1px solid var(--rule-thin); }
@media (max-width: 639px) { .dp-story--wide { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.dp-browse { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dp .dp-browse a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 600; font-size: 15px; color: var(--ink); }
.dp .dp-browse a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.dp-browse span { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.dp .dp-browse a:hover span { color: var(--on-ink-2); }
.dp-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); border-radius: var(--radius-2xl); overflow: hidden; background: var(--blue-wash); }
@media (max-width: 859px) { .dp-featured { grid-template-columns: minmax(0, 1fr); } }
.dp .dp-featured__img img { width: 100%; height: 100%; min-height: 320px; aspect-ratio: 5 / 4; object-fit: cover; }
.dp-featured__words { padding: clamp(24px, 4vw, var(--space-14)); display: flex; flex-direction: column; gap: 16px; justify-content: center; min-width: 0; }
.dp .dp-featured__words h2 a { color: var(--ink); text-decoration: none; }
.dp-featured__p { color: var(--ink-2); font-size: 17px; line-height: 1.55; }

/* ---------- one job story ---------- */
.dp-post { padding-top: clamp(24px, 4vw, 48px); }
.dp-post__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, var(--space-14)); align-items: start; }
@media (max-width: 959px) { .dp-post__top { grid-template-columns: minmax(0, 1fr); } }
.dp-post__head { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dp-post__price { align-self: flex-start; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--sun); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.dp-post__price span { font-weight: 500; font-size: 14px; color: var(--muted); }
.dp .dp-post__h { font-size: clamp(36px, 4.6vw, 60px); }
.dp-post__deck { color: var(--ink-2); max-width: 46ch; }
.dp-post__by { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.dp-post__avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); font-weight: 800; }
.dp-post__count { margin-left: auto; }
.dp-post__facts { margin-top: 4px; }
.dp-post__note { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 56ch; }
.dp-post__gallery { min-width: 0; }
.dp-post__photos { margin-top: var(--space-9); }
.dp-post__body h2 { margin-top: 8px; }
.dp .dp-post .job-slideshow__slide img, .dp .dp-post .story-video video { border-radius: var(--radius-lg); }
.dp .dp-post .job-slideshow__slide figcaption { color: var(--muted); font-size: 14px; }
.dp .dp-post .video-page-link { color: var(--blue); font-weight: 700; }

/* ============================================================
   The ad and offer pages (fe-*, of-*: page-estimate.css,
   page-ad-offer.css, page-lander.css, page-offer.css), the booking
   confirmations, the video pages and the policy pages, brought into
   the new look. Their own stylesheets load first; these only apply
   on a dp-page.
   ============================================================ */
.dp-page .fe-hero, .dp-page .of-hero { padding-block: clamp(24px, 4vw, 56px) clamp(40px, 6vw, 72px); }
.dp-page .fe-hero__top h1, .dp-page .of-hero__copy h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: .94; font-weight: 850; font-stretch: 88%; letter-spacing: -0.03em; }
.dp-page .fe-hero__copy .lede, .dp-page .of-hero__copy .lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-2); }
.dp-page .fe-team__img, .dp-page .of-hero__photo img { border-radius: var(--radius-xl); }
.dp-page .fe-team__cap { color: var(--muted); font-size: 15px; }
.dp-page .fe-badge { background: var(--sun); color: var(--ink); border-color: var(--surface); font-family: var(--font-sans); font-weight: 850; letter-spacing: 0.02em; }
.dp-page .fe-ask__note, .dp-page .ask__note { color: var(--muted); font-size: 15px; line-height: 1.5; }
.dp-page .lp-trust { color: var(--muted); font-size: 15px; }
.dp-page .lp-trust strong { color: var(--ink); }
.dp-page .lp-trust__stars { color: var(--star); }
.dp-page .lp-offer { border-left: 0; border-radius: var(--radius-md); background: var(--sun); padding: 14px 18px; }

/* tinted bands become the soft blue wash; boxes become rounded cards */
.dp-page .tint { background: var(--blue-wash); }
.dp-page .fe-card, .dp-page .fe-terms, .dp-page .fe-deal__side, .dp-page .of-card { border-radius: var(--radius-lg); border-color: var(--line); background: var(--surface); }
.dp-page .of-card--plain { background: transparent; border-color: var(--rule-mid); }
.dp-page .fe-terms li::before, .dp-page .of-list li::before { border-color: var(--blue); opacity: 1; }
.dp-page .fe-terms li.fe-terms__no::before { color: var(--muted); }
.dp-page .fe-deal__k, .dp-page .of-card__tag { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.07em; color: var(--blue); opacity: 1; }
.dp-page .fe-why__head h2, .dp-page .fe-form__head h2, .dp-page .fe-deal__main h2, .dp-page .fe-crew__copy h2, .dp-page .fe-last__in h2, .dp-page .of-who__copy h2 { font-size: clamp(32px, 4.2vw, 52px); line-height: .98; font-weight: 800; font-stretch: 90%; letter-spacing: -0.02em; }
.dp-page .fe-card__big { font-weight: 850; font-stretch: 88%; color: var(--blue); }
.dp-page .fe-steps span, .dp-page .bkf-next__list span { border: 0; background: var(--blue); color: var(--on-blue); }
.dp-page .fe-crew__facts li::before { background: var(--blue); }
.dp-page .fe-crew__pic img, .dp-page .of-who__pics img { border-radius: var(--radius-lg); }
.dp-page .fe-last__in { padding: clamp(24px, 4vw, 44px); border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--line); }
.dp-page .tint .fe-last__in { background: var(--surface); }
.dp-page .fe-last__pic { border-radius: var(--radius-md); }
.dp-page .of-terms__list li { border-color: var(--rule-thin); }

/* the booking confirmations (/booking-received, /book-confirmed) */
.dp-page .bkd { padding-block: clamp(24px, 4vw, 56px) var(--section); }
.dp-page .bkd h1 { font-size: clamp(38px, 5vw, 68px); line-height: .95; font-weight: 850; font-stretch: 88%; letter-spacing: -0.03em; }
.dp-page .bkd__img { border-radius: var(--radius-xl); }
.dp-page .bkd__team figcaption { color: var(--muted); }
.dp-page .bkd__sum { border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); padding: 6px 20px; }
.dp-page .bkd__urgent { border-radius: var(--radius-md); background: var(--sun); padding: 14px 18px; border: 0; }

/* the video pages (/watch/<id>) */
.dp-watch { padding-top: clamp(20px, 3vw, 36px); display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); gap: clamp(28px, 4vw, var(--space-14)); align-items: start; }
@media (max-width: 899px) { .dp-watch { grid-template-columns: minmax(0, 1fr); } }
.dp-watch__head { display: flex; flex-direction: column; gap: 14px; }
.dp .dp-watch__head h1 { font-size: clamp(34px, 4.4vw, 56px); }
.dp-watch .watch__player { margin: 0; }
.dp .dp-watch .watch__player video { border-radius: var(--radius-lg); background: var(--ink); margin-inline: 0; }
.dp-watch .watch__player figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.dp-watch__more { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.dp .dp-watch__more a { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; font-size: 15px; }
.dp .dp-watch__more img { width: 54px; height: 72px; object-fit: cover; border-radius: 10px; }

/* the policy pages (/privacy, /sms-alerts) */
.dp-policy { max-width: 70ch; display: flex; flex-direction: column; gap: 14px; }
.dp .dp-policy h2 { margin-top: var(--space-6); font-size: 24px; font-weight: 800; line-height: 1.2; }
.dp-policy p, .dp-policy li { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.dp-policy ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.dp-policy blockquote { margin: 0; padding: 18px 22px; border-radius: var(--radius-md); background: var(--sun); }
.dp-policy blockquote p { color: var(--ink); font-weight: 600; }

/* careers */
.dp-perks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.dp-perks li { padding: 16px 18px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); font-weight: 700; font-size: 16px; line-height: 1.35; }
.dp-pay { font-size: clamp(48px, 7vw, 92px); line-height: .9; font-weight: 850; font-stretch: 88%; letter-spacing: -0.03em; color: var(--blue); }
.dp-pay em { font-style: normal; font-size: .4em; color: var(--ink); }