/* 34 Plain & Clear — one centred column, system fonts, no art needed: the name, the promise, WhatsApp and a call,
   then packages with every price up front. For any trade with few photos. Follows the visitor's light or dark
   setting. Scoped to .vsite. */
.vsite {
  --bg: #faf8f4; --surface: #ffffff; --surface-2: #f3efe7; --ink: #1b1a17; --muted: #5d5a53; --line: #e4dfd5; --line-strong: #d2ccbf;
  --accent: #1b1a17; --accent-hover: #000000; --accent-ink: #ffffff; --accent-text: #c2410c; --soft: #f3efe7; --acc: #c2410c; --wa: #157347; --wa-ink: #ffffff;
  --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400; --display-tracking: -.035em; --display-lh: .95;
  --radius: 14px; --radius-sm: 10px; --btn-radius: 999px; --img-radius: 10px;
  --btn-case: none; --btn-tracking: 0;
  --h1: clamp(3.2rem, 13vw, 6rem); --h2: clamp(1.6rem, 4vw, 2rem); --max: 720px; --sec: clamp(48px, 7vw, 72px);
  --head-bg: #faf8f4; --foot-bg: #faf8f4; --foot-ink: #1b1a17; --foot-muted: #5d5a53; --foot-line: #e4dfd5;
  --shadow: none; --star: #c2410c;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  .vsite {
    --bg: #151412; --surface: #1d1c19; --surface-2: #22201c; --ink: #f2efe8; --muted: #b0aa9e; --line: #2e2c28; --line-strong: #403d37;
    --accent: #f2efe8; --accent-hover: #ffffff; --accent-ink: #151412; --accent-text: #fb8a5a; --acc: #fb8a5a; --wa: #25a35f; --wa-ink: #06180d; --soft: #22201c;
    --head-bg: #151412; --foot-bg: #151412; --foot-ink: #f2efe8; --foot-muted: #b0aa9e; --foot-line: #2e2c28;
    color-scheme: dark;
  }
}
.vsite { font-size: 1.06rem }
.btn { font-weight: 600; font-size: .94rem; min-height: 50px }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--surface) }
.btn-ghost:hover { border-color: var(--ink) }
.btn svg { flex: none }
.eyebrow { font-weight: 400; letter-spacing: .08em; font-size: .78rem; color: var(--muted) }
h1 em, h2 em, .display em { font-style: italic; color: inherit }
.link-arrow { color: var(--acc); font-weight: 400; border-bottom: 0; text-decoration: underline; text-underline-offset: 3px; font-size: .88rem }
.logo { display: inline-flex; align-items: center; gap: 10px; font: 600 1rem/1 var(--font-body); letter-spacing: -.01em }
.logo small { display: none }

/* header: name and a call */
.site-head { position: static; border-bottom: 1px solid var(--line) }
.head-in { min-height: 72px }
.head-in::after { content: attr(data-note); order: 5; margin-inline-start: 20px; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap }
.nav a { font-size: .88rem; color: var(--muted) }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink) }
.head-in > .head-cta { display: none }
@media (max-width: 1140px) { .head-in::after { display: none } }

/* hero */
.hero--plain { padding: 72px 0 56px; border-bottom: 1px solid var(--line) }
.pl-col .display { margin: 14px 0 22px }
.pl-promise { max-width: 30ch; margin: 0; font: 400 clamp(1.25rem, 4.4vw, 1.5rem)/1.4 var(--font-display) }
.pl-avail { display: flex; align-items: center; gap: 8px; margin: 22px 0 0; font-size: .94rem; color: var(--muted) }
.pl-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 20%, transparent) }
.pl-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px }
.pl-wa { background: var(--wa); border-color: var(--wa); color: var(--wa-ink) }
.pl-wa:hover { background: var(--wa); filter: brightness(1.08) }
.pl-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line) }
.pl-facts li { padding: 14px 12px 0 0; font-size: .8rem; line-height: 1.35; color: var(--muted) }
.pl-facts strong { display: block; margin-bottom: 4px; font: 400 1.6rem/1.1 var(--font-display); color: var(--ink) }

/* sections: one column, a hairline between each */
.sec { border-bottom: 1px solid var(--line) }
.sec-head { flex-direction: row; align-items: baseline; margin-bottom: 24px }
.sec-head h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em }
.sec-head .eyebrow { display: none }
.sec-head p { font-size: .94rem }
.trust { border-color: var(--line); background: transparent }
.trust ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px }
.trust li { font-size: .88rem; color: var(--muted) }
.trust svg { color: var(--acc); width: 18px; height: 18px }

/* packages: stacked cards, prices up front, no pictures needed */
.sec-packages .pkgs { grid-template-columns: 1fr; gap: 14px }
.pkg { position: relative; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: none }
.pkg > .art { display: none }
.pkg .pkg-body { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 0 }
.pkg h3 { grid-column: 1; margin: 0; font: 600 1.1rem/1.3 var(--font-body) }
.pkg .pkg-body > p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--ink) }
.pkg .price { grid-column: 2; grid-row: 1; justify-content: flex-end; margin: 0 }
.pkg .price small { display: none }
.pkg .price strong { font: 400 1.9rem/1 var(--font-display); letter-spacing: -.02em }
.pkg .p-stars { grid-column: 1 / -1 }
.pkg .inc { grid-column: 1 / -1; margin: 12px 0 16px; padding: 0 0 16px; border-bottom: 1px dashed var(--line-strong) }
.pkg .inc li { font-size: .9rem }
.pkg .inc li::before { content: "✓"; color: var(--acc); border: 0; width: auto; height: auto; background: none }
.pkg .btn { grid-column: 1 / -1; justify-self: start; min-height: 40px; padding-inline: 18px; font-size: .88rem }
.pkg:not(.featured) .btn-primary { background: var(--surface); color: var(--ink); border-color: var(--line-strong) }
.pkg.featured { border: 2px solid var(--ink) }
.pkg.featured .btn-primary { background: var(--wa); border-color: var(--wa); color: var(--wa-ink) }
.pkg .tag { position: absolute; top: -11px; left: 14px; padding: 4px 10px; border-radius: 999px; background: var(--acc); color: #fff; font: 600 .72rem/1 var(--font-body); text-transform: none; letter-spacing: 0 }
.menu > li > .art { display: none }

/* collections: a list of links */
.sec-collections .tiles, .rows, .catgrid { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line) }
.sec-collections .tile, .rows .row, .catcard { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; text-decoration: none }
.sec-collections .tile .art, .rows .row .art, .catcard .art { display: none }
.sec-collections .tile h3, .rows .row h3 { margin: 0; font: 600 1rem/1.3 var(--font-body) }
.sec-collections .tile p { margin: 0; font-size: .88rem; color: var(--muted) }
.rows .row > div { display: contents }
.rows .row .eyebrow, .rows .row .link-arrow { display: none }

/* how: numbered circles */
.steps { grid-template-columns: 1fr; gap: 18px }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 2px 14px; border: 0; padding: 0 }
.step::before { content: counter(s); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; margin: 0; border: 1px solid var(--ink); border-radius: 50%; font: 400 .94rem/1 var(--font-display); color: var(--ink) }
.step h3 { margin: 4px 0 0; font: 600 1rem/1.3 var(--font-body) }
.step p { font-size: .94rem }
.how-note { font-size: .9rem }

/* gallery and albums: small and tidy */
.masonry, .mosaic, .gal-strip { columns: unset; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.sec-gallery .art { aspect-ratio: 1; border-radius: 8px }
.pf-grid { grid-template-columns: 1fr 1fr; gap: 18px }
.pf-cap b { font: 600 1rem/1.3 var(--font-body) }

/* reviews: a plain list */
.reviews, .rv-grid, .rv-side { display: grid; grid-template-columns: 1fr; gap: 0 }
.review, .hero-q { padding: 22px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none }
.review blockquote, .hero-q blockquote { font: 400 1.15rem/1.45 var(--font-display) }
.review figcaption { font-size: .82rem; color: var(--muted) }
.review figcaption strong { color: var(--ink); margin-inline-end: 6px }

/* about */
.sec-about .about-grid { grid-template-columns: 1fr }
.sec-about .about-art { max-width: 160px }
.sec-about .about-art .art { border-radius: 50%; aspect-ratio: 1 }

/* faq */
.faq-wrap { grid-template-columns: 1fr }
.faq-wrap > div:first-child p, .faq-wrap > div:first-child .eyebrow { display: none }
.faq summary { font-size: 1rem; font-weight: 600 }

/* sign-off */
.cta-band { text-align: start }
.cta-band .display { font-size: clamp(1.8rem, 5vw, 2.2rem) }
.cta-band .ctas { justify-content: flex-start }
.cta-band .eyebrow { display: none }
.cta-band p { margin-inline: 0; text-align: start }
.site-foot { font-size: .88rem }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg) }

@media (max-width: 560px) {
  .pl-ctas { grid-template-columns: 1fr }
  .pf-grid { grid-template-columns: 1fr }
}
.cta-band .lede { margin-inline: 0; text-align: start }