/* ============================================================
   Bright Valley Media - Services pages
   The services pages as lead funnels, built on the /pricing/,
   /start/ and /shoot/ design language. Approved as wireframes
   on 2026-10-16 (mockups/services-redesign/wireframes.html).
   Loads after shared.css, which holds the base tokens, the nav,
   the footer and the phone call bar. Phone first; the computer
   layout starts at 861px, the same break the landing pages use.
   ============================================================ */

:root {
    --sv-teal-soft: rgba(59,130,246,0.09);
    --sv-teal-ring: rgba(59,130,246,0.15);
    --sv-teal-glow: rgba(59,130,246,0.12);
    --sv-on-dark: rgba(255,255,255,0.62);
    --sv-on-dark-line: rgba(255,255,255,0.18);
    --sv-on-dark-ghost: rgba(255,255,255,0.28);
    --sv-star: #fbbc04;
    --sv-good: #166534;
    --sv-good-soft: #e7f6ec;
    --sv-error: #b91c1c;
    --sv-scrim: rgba(28,25,23,0.55);
    --sv-ink-line: rgba(28,25,23,0.35);
    /* the empty video slot, until each video is recorded */
    --sv-slot-a: #2b2724;
    --sv-slot-b: #34302c;
    --sv-todo: #c2410c;
    --sv-shadow-sm: 0 2px 10px rgba(17,24,28,0.06);
    --sv-shadow-md: 0 6px 18px rgba(28,25,23,0.06);
    --sv-shadow-lg: 0 18px 40px rgba(28,25,23,0.18);
    --sv-shadow-pop: 0 24px 60px rgba(0,0,0,0.3);
    --sv-shadow-play: 0 1px 5px rgba(0,0,0,0.3);

    /* Industry colors, the same ones /pricing/ uses for its industry pills. */
    --ind-realestate: #2563EB;
    --ind-home: #EA580C;
    --ind-restaurants: #DC2626;
    --ind-medical: #0D9488;
    --ind-churches: #7C3AED;
    --ind-pro: #4B5563;
}

body.sv { background: var(--off-white); color: var(--black); font-size: 14px; line-height: 1.55; }
/* The header phone button is white for dark heroes; these heroes are light,
   so it takes the scrolled (dark) look from the top of the page. */
.sv nav .nav-phone, .sv nav .nav-phone span { color: var(--black); }
.sv nav .nav-phone { border-color: var(--sv-ink-line); }
.sv nav .nav-phone:hover { background: var(--black); border-color: var(--black); }
.sv nav .nav-phone:hover, .sv nav .nav-phone:hover span { color: var(--white); }
.sv a:focus-visible, .sv button:focus-visible, .sv summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 4px; }
.sv h1, .sv h2, .sv h3 { font-family: var(--heading); color: var(--black); letter-spacing: -0.01em; text-wrap: balance; }
.sv em { font-style: italic; }
.sv-svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- hero: words left, his video or a production photo right ---------- */
.sv-hero { padding: 92px 20px 22px; }
.sv-hero-grid { max-width: 1120px; margin: 0 auto; }
.lp-crumbs { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; }
.lp-crumbs a { color: var(--gray-500); border-bottom: 1px solid var(--gray-300); }
.lp-crumbs a:hover { color: var(--black); }
.sv-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--label); margin-bottom: 10px; }
.sv-hero h1 { font-size: 30px; font-weight: 850; line-height: 1.07; margin-bottom: 10px; }
.sv-hero p.sub { font-size: 15px; color: var(--gray-500); line-height: 1.6; max-width: 520px; }
.sv-media { display: none; }
.sv-poster { position: relative; display: block; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: var(--dark); box-shadow: var(--sv-shadow-lg); }
.sv-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-slot { background: repeating-linear-gradient(135deg, var(--sv-slot-a) 0 14px, var(--sv-slot-b) 14px 28px); outline: 2px dashed var(--sv-todo); outline-offset: -2px; }
.sv-thumb.sv-slot { background: repeating-linear-gradient(135deg, var(--sv-slot-a) 0 8px, var(--sv-slot-b) 8px 16px); }
.sv-poster .lab { position: absolute; left: 16px; top: 14px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sv-on-dark); }
.sv-poster-cap { margin-top: 10px; font-size: 13px; color: var(--gray-500); line-height: 1.5; }
.sv-poster-cap b { color: var(--black); font-weight: 700; }
.sv-todo, .sv-vtxt .sv-todo { display: inline-block; margin-top: 4px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-todo); }

/* the video, once it is recorded: a card on a phone, a poster on a computer */
.sv-vsl { margin-top: 16px; }
.sv-vsl-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 14px 10px 10px; }
.sv-vsl-card:hover { border-color: var(--gray-300); box-shadow: var(--sv-shadow-sm); }
.sv-thumb { position: relative; flex: 0 0 104px; width: 104px; aspect-ratio: 16/9; border-radius: 7px; overflow: hidden; background: var(--dark); display: flex; align-items: center; justify-content: center; }
.sv-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-play { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--teal); display: flex; align-items: center; justify-content: center; box-shadow: var(--sv-shadow-play); }
.sv-play::after { content: ""; border-left: 10px solid var(--white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
/* A big white triangle in the middle, no circle, and the owner's note along the bottom. */
.sv-poster .sv-play { position: absolute; left: 50%; top: 50%; width: auto; height: auto; background: none; box-shadow: none; transform: translate(-50%, -50%); animation: svTriC 2s ease-in-out infinite; }
.sv-poster .sv-play::after { border-left: 46px solid var(--white); border-top: 27px solid transparent; border-bottom: 27px solid transparent; margin-left: 8px; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.5)); }
@keyframes svTriC { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.1); } }
.sv-note-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 34px 20px 14px; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0)); color: var(--white); font-family: var(--heading); font-size: 15px; font-weight: 700; text-align: left; }
.sv-after { margin-top: 14px; }
.sv-after video { display: block; width: 100%; aspect-ratio: 16/9; background: var(--black); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .sv-poster .sv-play { animation: none; } }

/* A soft blue pulse so the video reads as something to tap (Nathan, 2026-10-28).
   It stops for anyone who has reduced motion turned on. */
@keyframes svPulse { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.55); } 70% { box-shadow: 0 0 0 12px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }
@keyframes svPulseBig { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0.55); } 70% { box-shadow: 0 0 0 20px rgba(59,130,246,0); } 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); } }
.sv-play { animation: svPulse 2s ease-out infinite; }

@keyframes svCardGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(59,130,246,0); border-color: var(--gray-200); } 50% { box-shadow: 0 0 0 4px rgba(59,130,246,0.18), 0 6px 18px rgba(59,130,246,0.18); border-color: var(--teal); } }
.sv-vsl-card { animation: svCardGlow 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .sv-play, .sv-vsl-card { animation: none; } }
.sv-vtxt b { display: block; font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.35; }
.sv-vtxt span { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }
.sv-vplayer { position: relative; aspect-ratio: 16/9; background: var(--black); border-radius: 10px; overflow: hidden; }
.sv-vplayer video { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The phone video player: full width over a dark page, native controls. */
.sv-vmodal { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,0.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 0 24px; }
.sv-vmodal-frame { width: 100%; max-width: 1100px; aspect-ratio: 16/9; background: var(--black); }
.sv-vmodal-frame video { display: block; width: 100%; height: 100%; }
.sv-vmodal-cap { margin: 14px 16px 0; color: var(--white); font-family: var(--heading); font-size: 16px; font-weight: 700; text-align: center; }
.sv-vmodal-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.14); color: var(--white); font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; }

/* ---------- buttons ---------- */
.sv-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 14px 18px; border-radius: 4px; background: var(--teal); color: var(--white); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; transition: background 0.2s; }
.sv-btn:hover { background: var(--teal-light); color: var(--white); }
.sv-btn.dark { background: var(--black); }
.sv-btn.dark:hover { background: var(--dark); }
.sv-btn.ghost { background: transparent; border: 1px solid var(--sv-on-dark-ghost); margin-top: 8px; }
.sv-btn.ghost:hover { border-color: var(--white); background: transparent; }
.sv-btn.quiet { background: var(--white); color: var(--gray-700); border: 1px solid var(--gray-300); }
.sv-btn.quiet:hover { border-color: var(--gray-500); color: var(--black); background: var(--white); }
.sv-btn .sv-svg { width: 13px; height: 13px; }
.sv-cta { margin-top: 16px; }
/* Hero on a phone: one row, the video's thumbnail and then the call button
   across the rest, label on one line, the reply promise under both (Nathan,
   2026-10-28: "just the thumbnail on mobile, then the CTA can have more space"). */
.sv-hero-act { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; align-items: stretch; margin-top: 18px; }
.sv-hero-act .sv-vsl, .sv-hero-act .sv-cta { margin: 0; }
.sv-hero-act .sv-cta { display: contents; }
.sv-hero-act .sv-vsl-card { display: block; height: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; }
.sv-hero-act .sv-thumb { width: 112px; height: 100%; min-height: 63px; border-radius: 8px; }
/* A big white play triangle in the middle of a plain frame of Nathan, no
   circle behind it; it breathes a little so it reads as tappable. */
.sv-hero-act .sv-play { width: auto; height: auto; background: none; box-shadow: none; animation: svTri 2s ease-in-out infinite; }
.sv-hero-act .sv-play::after { border-left: 24px solid var(--white); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 4px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.55)); }
@keyframes svTri { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .sv-hero-act .sv-play { animation: none; } }
.sv-hero-act .sv-vtxt { display: none; }
.sv-hero-act .sv-cta .sv-btn { height: 100%; min-height: 63px; padding: 0 12px; white-space: nowrap; justify-content: center; }
.sv-hero-act .sv-micro { grid-column: 1 / -1; margin-top: 0; }
.sv-micro { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 8px; text-align: center; }
.sv-more { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; width: 100%; font-size: 13px; font-weight: 600; color: var(--teal); }
.sv-more:hover { color: var(--teal-light); }

/* ---------- trust strip, right under each main button ----------
   A light card with stars in Google's own color. The rating comes first:
   it is the one number a stranger trusts most. */
.sv-trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; background: var(--white); color: var(--black); border: 1px solid var(--gray-200); border-radius: 10px; overflow: hidden; box-shadow: var(--sv-shadow-md); }
.sv-trust > * { padding: 11px 9px; min-width: 0; }
.sv-trust > * + * { border-left: 1px solid var(--gray-200); }
.sv-trust .tr-rv { display: block; width: 100%; text-align: left; }
.sv-trust .tr-rv:hover { background: var(--gray-100); }
.sv-trust .tr-rv:hover .rv { color: var(--teal); text-decoration-color: var(--teal); }
.sv-stars { display: flex; gap: 2px; color: var(--sv-star); }
.sv-stars svg { width: 12px; height: 12px; }
.sv-trust .sv-stars { gap: 1px; }
.sv-trust .sv-stars svg { width: 9px; height: 9px; }
.sv-trust b { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; font-family: var(--heading); font-size: 18px; font-weight: 850; line-height: 1.1; letter-spacing: -0.01em; color: var(--black); }
.sv-trust .l { display: block; margin-top: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-500); line-height: 1.35; }
.sv-trust .rv { color: var(--gray-700); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--gray-300); }

/* ---------- sections ---------- */
.sv-sec { padding: 28px 16px; }
.sv-sec.alt { background: var(--white); border-top: 1px solid var(--gray-200); border-bottom: 1px solid var(--gray-200); }
.sv-wrap { max-width: 1040px; margin: 0 auto; }
.sv-wrap.narrow { max-width: 760px; }
.sv-head { text-align: center; margin-bottom: 16px; }
.sv-head h2 { font-size: 22px; font-weight: 800; line-height: 1.2; margin-bottom: 8px; }
.sv-head p { font-size: 14px; color: var(--gray-500); max-width: 560px; margin: 0 auto; line-height: 1.6; }
.sv-gap { height: 28px; }

/* ---------- the offer card (the /pricing/ shoot card) ---------- */
.sv-offer { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--white); border: 1px solid var(--teal); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 36px var(--sv-teal-glow); }
.sv-offer-body { padding: 18px 18px 12px; min-width: 0; }
.sv-kick { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin-bottom: 6px; }
.sv-offer-body h2 { font-size: 24px; font-weight: 850; line-height: 1.1; margin-bottom: 6px; }
.sv-sub { font-size: 14px; color: var(--gray-500); line-height: 1.55; margin-bottom: 12px; }
.sv-facts { list-style: none; display: grid; gap: 7px; }
.sv-facts li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--gray-700); line-height: 1.45; }
.sv-facts li .sv-svg { margin-top: 2px; color: var(--teal); }
.sv-facts strong { color: var(--black); font-weight: 700; }
.sv-det { margin-top: 12px; border-top: 1px solid var(--gray-200); padding-top: 2px; }
.sv-det summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-500); display: flex; justify-content: space-between; align-items: center; min-height: 44px; }
.sv-det summary::-webkit-details-marker { display: none; }
.sv-det summary span { font-size: 16px; transition: transform 0.2s; }
.sv-det[open] summary span { transform: rotate(45deg); }
.sv-det p { font-size: 13.5px; color: var(--gray-500); line-height: 1.65; margin: 4px 0 8px; }
.sv-side { order: -1; background: var(--black); color: var(--white); padding: 18px; display: flex; flex-direction: column; justify-content: center; }
.sv-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.sv-price .pre { font-size: 12px; color: var(--sv-on-dark); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.sv-price .amt { font-family: var(--heading); font-size: 40px; font-weight: 850; letter-spacing: -0.03em; line-height: 1; }
.sv-price .unit { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sv-on-dark); }
.sv-note { font-size: 12.5px; color: var(--sv-on-dark); line-height: 1.55; margin-top: 12px; }
.sv-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--sv-on-dark-line); }
.sv-strip strong { display: block; font-family: var(--heading); font-size: 17px; font-weight: 850; }
.sv-strip span { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sv-on-dark); }

/* price rows: the label left, the price in a green chip right */
.sv-rows { border-top: 1px solid var(--gray-200); margin-top: 2px; }
.sv-rows > div { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--gray-200); font-size: 14px; }
.sv-rows > div > span:first-child { color: var(--gray-700); min-width: 0; }
.sv-rows a { color: var(--gray-700); border-bottom: 1px solid var(--gray-300); }
.sv-rows a:hover { color: var(--teal); border-color: var(--teal); }
.sv-pr { display: inline-block; font-weight: 700; font-size: 13px; color: var(--sv-good); background: var(--sv-good-soft); padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.45; }

/* ---------- package cards (the /pricing/ tier cards) ---------- */
.sv-group-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray-500); margin: 18px 0 8px; }
.sv-tiers { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.sv-tier { position: relative; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px 16px 12px; min-width: 0; }
.sv-tier.feat { border-color: var(--teal); box-shadow: 0 10px 28px var(--sv-teal-glow); }
.sv-badge { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); background: var(--teal); color: var(--white); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 14px; border-radius: 0 0 8px 8px; white-space: nowrap; }
.sv-tier-kick { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin-bottom: 4px; }
.sv-tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sv-tier-name { font-family: var(--heading); font-size: 19px; font-weight: 850; color: var(--black); }
.sv-tier-price { font-family: var(--heading); color: var(--black); white-space: nowrap; }
.sv-tier-price .pre { font-size: 12px; color: var(--gray-500); font-weight: 500; margin-right: 3px; }
.sv-tier-price .amt { font-size: 27px; font-weight: 850; letter-spacing: -0.02em; }
.sv-tier-price .per { font-size: 12px; color: var(--gray-500); font-weight: 500; white-space: normal; }
.sv-tier-tag { font-size: 13px; color: var(--gray-500); margin-top: 2px; line-height: 1.45; }
.sv-brief { font-size: 13px; color: var(--gray-700); line-height: 1.5; margin-top: 9px; }
.sv-tog { display: flex; width: 100%; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 0 2px; border-top: 1px solid var(--gray-200); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); min-height: 44px; }
.sv-tog span { font-size: 18px; transition: transform 0.2s; }
.sv-tier.open .sv-tog span { transform: rotate(45deg); }
.sv-tier-body { display: none; }
.sv-tier.open .sv-tier-body { display: block; }
.sv-tier.open .sv-brief { display: none; }
.sv-tier .sv-facts { margin-top: 8px; }
.sv-tier .sv-facts li { font-size: 14.5px; }
.sv-tier .sv-btn { margin-top: 12px; }
.sv-terms { margin: 14px auto 0; text-align: center; font-size: 13.5px; color: var(--gray-500); line-height: 1.6; max-width: 760px; }
.sv-terms strong { color: var(--black); }
.sv-terms a, .sv-terms button { color: var(--teal); font-weight: 600; font-size: 13.5px; }
.sv-terms button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; vertical-align: middle; }
.sv-terms a:hover, .sv-terms button:hover { color: var(--teal-light); }

/* ---------- one time vs. monthly (the $999 shoot beside the three plans) ----------
   The shoot column is quiet on purpose; the plans share one dark band and
   Growth carries the highlight, so the eye lands on monthly. */
    /* On a phone the row labels run full width, so a per-cell tint would break
       the Growth column into blocks. One stripe behind the whole chart keeps it
       whole: Growth is the third of four equal columns, 50% to 75%. The
       one-time shoot, 0 to 25%, is light grey so the monthly columns stand out. */
    background: linear-gradient(90deg, var(--gray-100) 0, var(--gray-100) 25%, transparent 25%, transparent 50%, var(--sv-teal-soft) 50%, var(--sv-teal-soft) 75%, transparent 75%), var(--white); }
/* On a phone the row title runs across the colored columns, so it sits on its
   own white tag in dark text, centered on the row's top line so it adds no
   height; the column stripes stay unbroken around it. */

/* ---------- other offer pieces ---------- */
.sv-starts { margin-top: 14px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; }
.sv-starts h3 { font-size: 15px; font-weight: 800; margin-bottom: 6px; }
.sv-starts small { display: block; font-size: 12px; color: var(--gray-500); margin-top: 8px; line-height: 1.5; }
.sv-starts small a { color: var(--teal); font-weight: 600; }
.sv-plans { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 6px 16px 16px; }
.sv-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--gray-200); align-items: baseline; }
.sv-plan b { font-family: var(--heading); font-size: 17px; font-weight: 850; color: var(--black); }
.sv-plan .rec { display: inline-block; margin-left: 8px; font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-light); background: var(--sv-teal-soft); padding: 3px 8px; border-radius: 999px; vertical-align: 2px; }
.sv-plan .pr { font-family: var(--heading); font-weight: 850; font-size: 20px; color: var(--black); white-space: nowrap; }
.sv-plan .pr small { font-size: 12px; font-weight: 500; color: var(--gray-500); }
.sv-plan .br { grid-column: 1 / -1; font-size: 13px; color: var(--gray-500); }
.sv-plans .sv-btn { margin-top: 14px; }
.sv-plans .sv-terms.left { margin: 14px 0 0; text-align: left; }

/* ---------- lists, steps, proof ---------- */
.sv-list { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 4px 16px; }
.sv-list > * { display: block; width: 100%; text-align: left; padding: 12px 0; border-top: 1px solid var(--gray-200); min-width: 0; min-height: 48px; }
.sv-list > :first-child { border-top: 0; }
.sv-list > a b::after { content: " \203A"; color: var(--teal); }
.sv-list > a:hover b { color: var(--teal-light); }
.sv-list b { display: block; font-size: 14.5px; font-weight: 700; color: var(--black); }
.sv-list span { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
.sv-list .sv-pr { float: right; margin-left: 10px; font-size: 13px; color: var(--sv-good); }
.sv-list-pre { text-align: center; margin: 18px 0 8px; }
.sv-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.sv-chips > * { font-size: 13px; font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-200); padding: 8px 13px; border-radius: 999px; }
.sv-chips.ind > * { display: inline-flex; align-items: center; gap: 8px; color: var(--black); background: color-mix(in srgb, var(--pill) 9%, var(--white)); border-color: color-mix(in srgb, var(--pill) 38%, var(--white)); min-height: 40px; }
.sv-chips.ind > *::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--pill); flex-shrink: 0; }
.sv-chips.ind a:hover { border-color: var(--pill); }

.sv-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.sv-panel h2 { font-size: 20px; font-weight: 800; line-height: 1.2; margin-bottom: 10px; }
.sv-panel.solo > h2 { text-align: center; }
.sv-pts { background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 2px 16px; }
.sv-sec.alt .sv-pts { background: var(--off-white); }
.sv-pt { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 13px 0; }
.sv-pts.nonum .sv-pt { grid-template-columns: minmax(0, 1fr); }
.sv-pt + .sv-pt { border-top: 1px solid var(--gray-200); }
.sv-pt .n { width: 24px; height: 24px; border-radius: 50%; background: var(--sv-teal-soft); color: var(--teal-light); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.sv-pt b { display: block; font-size: 15px; font-weight: 800; color: var(--black); line-height: 1.3; font-family: var(--heading); }
.sv-pt p { margin-top: 3px; font-size: 13.5px; color: var(--gray-500); line-height: 1.55; }
.sv-proof { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sv-proof > * { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; color: var(--gray-500); line-height: 1.45; }
.sv-sec.alt .sv-proof > * { background: var(--off-white); }
.sv-proof a:hover, .sv-proof button:hover { border-color: var(--teal); }
.sv-proof strong { font-family: var(--heading); font-size: 15px; font-weight: 850; color: var(--black); white-space: nowrap; }
.sv-proof span { flex: 1 1 200px; min-width: 0; }
.sv-proof em { flex-basis: 100%; font-style: normal; font-size: 12px; font-weight: 600; color: var(--teal-light); }
.sv-quote { margin: 14px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--teal); }
.sv-quote q { display: block; font-size: 16px; font-weight: 700; color: var(--black); line-height: 1.4; quotes: none; font-family: var(--heading); }
.sv-quote cite { display: block; font-style: normal; font-size: 12.5px; color: var(--gray-500); margin-top: 4px; }

.sv-prose { max-width: 720px; margin: 0 auto; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px; }
.sv-sec.alt .sv-prose { background: var(--off-white); }
.sv-prose h2 { font-size: 20px; font-weight: 850; margin-bottom: 8px; }
.sv-prose p { font-size: 14px; color: var(--gray-700); margin-bottom: 10px; line-height: 1.65; }
.sv-prose p:last-child { margin-bottom: 0; }
.sv-prose a { color: var(--teal); font-weight: 600; }

/* ---------- FAQ (same markup as the landing pages, so FAQPage stays matched) ---------- */
.faq-wrap { max-width: 760px; margin: 0 auto; }
.faq-col:first-child details:last-of-type { border-bottom: 0; }
.faq-wrap details { border-top: 1px solid var(--gray-200); padding: 4px 0; }
.faq-wrap details:last-of-type { border-bottom: 1px solid var(--gray-200); }
.faq-wrap summary { font-family: var(--heading); font-size: 16px; font-weight: 800; color: var(--black); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary span { color: var(--gray-500); font-size: 20px; font-weight: 300; transition: transform 0.2s; }
.faq-wrap details[open] summary span { transform: rotate(45deg); }
.faq-wrap details p { font-size: 14.5px; color: var(--gray-500); line-height: 1.7; margin: 2px 0 10px; }
.faq-wrap details p a { color: var(--teal); font-weight: 600; }

/* ---------- closing card ---------- */
.sv-close { max-width: 640px; margin: 0 auto; background: var(--black); color: var(--white); border-radius: 12px; padding: 24px 14px; }
.sv-close-ph { display: none; }
.sv-close-hi { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sv-close-hi img { width: 48px; height: 48px; border-radius: 50%; flex: none; object-fit: cover; }
.sv-close h2 { font-size: 22px; font-weight: 850; color: var(--white); line-height: 1.15; }
.sv-close p { font-size: 14px; color: var(--sv-on-dark); line-height: 1.6; margin-bottom: 16px; }
.sv-close .sv-micro { color: var(--sv-on-dark); }
.sv-close .sv-trust { box-shadow: none; }
.sv-close .alt { text-align: center; font-size: 13px; margin: 12px 0 0; color: var(--sv-on-dark); }
.sv-close .alt a { color: var(--white); font-weight: 700; }
.sv-related { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; margin-top: 20px; font-size: 12px; color: var(--gray-500); }
.sv-related > * { padding: 6px 0; }
.sv-related a { color: var(--gray-500); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gray-300); }
.sv-related a:hover { color: var(--teal); }
.sv-related.sv-ind { margin-top: 4px; }
.sv-ind a { display: inline-flex; align-items: center; gap: 6px; }
.sv-ind a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pill); flex-shrink: 0; }
.rvm-fail { padding: 8px 2px; font-size: 14px; color: var(--gray-700); }
.rvm-fail a { color: var(--teal); font-weight: 600; }
.lp-foot-links { max-width: 1040px; margin: 0 auto; padding: 22px 16px 4px; display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font-size: 12px; }
.lp-foot-links a { color: var(--gray-500); }
.lp-foot-links a:hover { color: var(--black); }

/* ---------- quote popup (the /pricing/ form) ---------- */
.qm-backdrop { position: fixed; inset: 0; z-index: 1000; background: var(--sv-scrim); display: flex; align-items: flex-end; justify-content: center; padding: 0; overflow-y: auto; }
.qm-backdrop[hidden] { display: none; }
.qm-panel { position: relative; width: 100%; max-width: none; max-height: 100vh; overflow-y: auto; border-radius: 14px 14px 0 0; box-shadow: var(--sv-shadow-pop); }
.qm-close { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font-size: 22px; line-height: 1; z-index: 2; }
.qm-close:hover { background: var(--gray-200); }
body.qm-open { overflow: hidden; }
.quote-form { background: var(--white); padding: 22px 20px 90px; }
.quote-form h3 { font-family: var(--heading); font-size: 21px; font-weight: 850; color: var(--black); margin-bottom: 4px; padding-right: 40px; }
.quote-form .sub { font-size: 13px; color: var(--gray-500); line-height: 1.5; margin-bottom: 6px; }
.quote-form label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin: 12px 0 5px; }
.quote-form label small { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--gray-500); }
.quote-form input, .quote-form textarea { width: 100%; font-family: var(--body); font-size: 16px; color: var(--black); background: var(--off-white); border: 1px solid var(--gray-200); border-radius: 6px; padding: 10px 12px; outline: none; }
.quote-form input:focus, .quote-form textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--sv-teal-ring); background: var(--white); }
.quote-form textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
.quote-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.quote-form button[type="submit"] { width: 100%; margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 14px 16px; background: var(--teal); color: var(--white); border-radius: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.quote-form button[type="submit"]:hover { background: var(--teal-light); }
.quote-form button[type="submit"]:disabled { opacity: 0.6; cursor: default; }
.quote-form button svg { width: 13px; height: 13px; }
.quote-form .status { font-size: 12.5px; margin-top: 8px; min-height: 16px; color: var(--gray-500); }
.quote-form .status.error { color: var(--sv-error); }
.quote-form .tiny { font-size: 10.5px; color: var(--gray-500); line-height: 1.5; margin-top: 10px; }
.quote-form .alt { text-align: center; font-size: 12.5px; color: var(--gray-500); margin-top: 12px; }
.quote-form .alt a, .quote-done a { color: var(--teal); font-weight: 600; }
.quote-done h3 { font-family: var(--heading); font-size: 22px; font-weight: 850; color: var(--black); margin-bottom: 8px; padding-right: 40px; }
.quote-done p { font-size: 14px; color: var(--gray-700); line-height: 1.6; }

/* ---------- review collage: every Google review, newest first ----------
   Masonry by CSS columns, so long and short reviews pack together. */
.rvm { position: fixed; inset: 0; z-index: 1001; background: var(--sv-scrim); display: flex; align-items: center; justify-content: center; padding: 14px; }
.rvm[hidden] { display: none; }
.rvm-panel { position: relative; width: 100%; max-width: 720px; max-height: min(76vh, 600px); overflow-y: auto; background: var(--off-white); color: var(--black); border-radius: 14px; box-shadow: var(--sv-shadow-pop); }
.rvm-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 52px 10px 14px; background: var(--white); border-bottom: 1px solid var(--gray-200); }
.rvm-score { display: flex; align-items: center; gap: 10px; }
.rvm-score .big { font-family: var(--heading); font-size: 24px; font-weight: 850; letter-spacing: -0.02em; line-height: 1; }
.rvm-score .sv-stars svg { width: 12px; height: 12px; }
.rvm-score h2 { font-size: 13px; font-weight: 800; margin-top: 2px; }
.rvm-head a { display: inline-flex; align-items: center; min-height: 36px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); border: 1px solid var(--gray-300); border-radius: 4px; padding: 8px 10px; white-space: nowrap; }
.rvm-head a:hover { border-color: var(--black); }
.rvm-x { position: absolute; top: 50%; transform: translateY(-50%); right: 10px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; background: var(--gray-100); color: var(--gray-700); font-size: 22px; line-height: 1; }
.rvm-x:hover { background: var(--gray-200); }
/* the collage: small tiles packed in columns, so the whole wall shows at a glance */
.rvm-grid { columns: 2; column-gap: 8px; padding: 10px; }
.rvc { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 8px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 9px; padding: 10px 11px 9px; }
.rvc .sv-stars { margin-bottom: 5px; }
.rvc .sv-stars svg { width: 10px; height: 10px; }
.rvc p { font-size: 12.5px; line-height: 1.45; color: var(--gray-700); white-space: pre-line; }
.rvc p.clip { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvc.open p.clip { display: block; -webkit-line-clamp: unset; }
.rvc .more { margin-top: 3px; padding: 4px 0; font-size: 11px; font-weight: 700; color: var(--teal-light); }
.rvc p.tr { margin-top: 4px; font-size: 11.5px; color: var(--gray-500); font-style: italic; }
.rvc .who { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--gray-200); }
.rvc .who b { font-size: 11px; font-weight: 700; color: var(--black); }
.rvc .who span { font-size: 10px; color: var(--gray-500); white-space: nowrap; }
.rvc.only { padding-top: 9px; }
.rvc.only .who { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- the smallest phones ---------- */
@media (max-width: 359px) {
    .sv-btn { letter-spacing: 0.05em; padding-left: 12px; padding-right: 12px; }
    .sv-trust b { flex-wrap: wrap; }
}

/* ---------- small popups at 481px and up ---------- */
@media (min-width: 481px) {
    .qm-backdrop { align-items: center; padding: 20px; }
    .qm-panel { max-width: 460px; max-height: calc(100vh - 40px); border-radius: 14px; }
    .quote-form { padding: 22px 20px; }
}
@media (min-width: 641px) {
    .rvm { padding: 24px; }
    .rvm-grid { columns: 4 160px; padding: 12px; }
    .rvc p { font-size: 12px; }
}

/* ---------- computer ---------- */
@media (min-width: 861px) {
    body.sv { font-size: 15px; }
    .sv-hero { padding: 116px 40px 40px; }
    .sv-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 52px; align-items: center; }
    .sv-hero h1 { font-size: 44px; line-height: 1.05; }
    .sv-hero p.sub { font-size: 15.5px; }
    .sv-hero .sv-vsl { display: none; }
    .sv-hero-act { display: block; margin-top: 0; }
    .sv-hero-act .sv-cta { display: flex; margin-top: 22px; }
    .sv-hero-act .sv-cta .sv-btn { height: auto; min-height: 0; padding: 15px 24px; white-space: nowrap; }
    .sv-media { display: block; }
    .sv-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 22px; }
    .sv-cta .sv-btn { width: auto; min-height: 0; padding: 15px 24px; white-space: nowrap; }
    .sv-cta .sv-micro { margin: 0; text-align: left; }
    .sv-trust { max-width: 480px; }
    .sv-trust > * { padding: 11px 12px; }
    .sv-trust b { font-size: 19px; gap: 5px; }
    .sv-trust .sv-stars { gap: 2px; }
    .sv-trust .sv-stars svg { width: 12px; height: 12px; }
    .sv-sec { padding: 40px 40px; }
    .sv-head h2 { font-size: 28px; }
    .sv-panel h2 { font-size: 23px; }
    .sv-offer { grid-template-columns: 1.5fr 1fr; }
    .sv-offer-body { padding: 24px 24px 16px; }
    .sv-offer-body h2 { font-size: 30px; }
    .sv-side { order: 0; padding: 24px 22px; }
    .sv-price { flex-direction: column; align-items: flex-start; gap: 4px; }
    .sv-price .amt { font-size: 52px; }
    .sv-btn { min-height: 0; padding: 13px 16px; font-size: 11px; }
    .sv-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .sv-tiers.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-tier { padding: 22px 20px 18px; }
    .sv-tier-body { display: block; }
    .sv-brief, .sv-tog { display: none; }
    .sv-tier .sv-btn { min-height: 44px; }
    .sv-plans { padding: 8px 24px 22px; }
    .sv-plans-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; }
    .sv-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; padding: 6px 22px; }
    .sv-list > :nth-child(2) { border-top: 0; }
    .sv-duo { grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: start; }
    .sv-prose { padding: 22px 24px; }
    .faq-wrap summary { min-height: 56px; }
    .faq-wrap { max-width: none; }
    .faq-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-items: start; }
    .faq-col:first-child details:last-of-type { border-bottom: 1px solid var(--gray-200); }
    .sv-close { padding: 28px 30px; max-width: 900px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: stretch; }
    .sv-close-ph { display: block; border-radius: 10px; overflow: hidden; }
    .sv-close-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }
    .sv-close-hi img { display: none; }
    .sv-close .sv-cta { margin-top: 0; }
    .sv-close .alt { text-align: left; }
    .lp-foot-links { padding: 26px 40px 6px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv *, .sv *::before, .sv *::after { transition: none !important; }
}

/* ---------- Parts added with the other nine pages (2026-10-28), ported from
   the approved wireframes: the one-time vs. monthly chart and its phone
   version with the plan picker, the month of posts, is-this-for-you,
   related articles, the closing review quote, the website gallery and
   the area map. ---------- */
:root { --sv-quote-bg: rgba(255,255,255,0.06); }
.sv-addons { margin-top: 14px; }
.sv-addons h3 { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.sv-cmp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
.sv-cmp .cl { grid-column: 1 / -1; position: relative; height: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); padding: 0; border-top: 1px solid var(--gray-200); }
.sv-cmp .cl.lab-empty { display: none; }
/* On a phone the row title runs across the colored columns, so it sits on its own
   white tag in dark text, centered on the row's top line so it adds no height;
   the column stripes stay unbroken around it. */
.sv-cmp .cl span { position: absolute; left: 8px; top: 0; transform: translateY(-50%); white-space: nowrap; display: inline-block; padding: 2px 7px; border-radius: 999px; background: var(--white); border: 1px solid var(--gray-200); color: var(--black); font-size: 8.5px; font-weight: 800; letter-spacing: 0.08em; }
.sv-cmp .cc { padding: 16px 6px 13px; text-align: center; font-size: 12.5px; line-height: 1.35; font-weight: 700; color: var(--black); min-width: 0; overflow-wrap: anywhere; }
.sv-cmp .cc.one { color: var(--gray-500); font-weight: 500; }
/* On a phone the row labels run full width, so per-cell tint would break the
   Growth column into blocks. One stripe behind the whole chart keeps it whole:
   Growth is the third of four equal columns, 50% to 75%; the one-time shoot
   is the first, 0 to 25%, in light grey so the monthly columns stand out. */
.sv-cmp { background: linear-gradient(90deg, var(--gray-100) 0, var(--gray-100) 25%, transparent 25%, transparent 50%, var(--sv-teal-soft) 50%, var(--sv-teal-soft) 75%, transparent 75%), var(--white); }
.sv-cmp .cband { padding: 7px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.sv-cmp .cband.one { background: var(--gray-100); color: var(--gray-500); }
.sv-cmp .cband.mo { grid-column: span 3; background: var(--black); color: var(--white); }
.sv-cmp .cc.ch { padding: 14px 4px 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; }
.sv-cmp .cc.ch.g { box-shadow: inset 0 3px 0 var(--teal); }
.sv-cmp .cn { font-family: var(--heading); font-size: 13px; font-weight: 800; color: var(--black); line-height: 1.2; }
.sv-cmp .one .cn { color: var(--gray-500); }
.sv-cmp .cp { font-family: var(--heading); font-size: 18px; font-weight: 850; letter-spacing: -0.02em; color: var(--black); margin-top: 2px; }
.sv-cmp .one .cp { color: var(--gray-500); font-size: 16px; }
.sv-cmp .cper { font-size: 10.5px; font-weight: 500; color: var(--gray-500); }
.sv-cmp .lv { display: none; }
.sv-cmp .sv { display: inline; }
.sv-cmp .crec { white-space: nowrap; font-size: 7.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--white); background: var(--teal); padding: 2px 6px; border-radius: 999px; margin-bottom: 4px; }
.sv-cmp .cu { font-size: 0.78em; font-weight: 500; color: var(--gray-500); margin-left: 1px; white-space: nowrap; }
.sv-cmp .cy, .sv-cmp .cx { display: inline-flex; width: 20px; height: 20px; }
.sv-cmp .cy { color: var(--teal); }
.sv-cmp .cx { color: var(--gray-300); }
.sv-cmp .cy svg, .sv-cmp .cx svg { width: 100%; height: 100%; }
.sv-cmp .cf { display: none; }
/* Phone chart: three columns, what you get / one time / every month. Each cell
   carries its own tint, and rows have no spanning labels, so the columns run whole. */
.sv-cmp { display: none; }
.sv-cmp2 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); background: var(--white); border: 1px solid var(--gray-200); border-radius: 14px; overflow: hidden; }
.sv-cmp2 .one { background: var(--gray-100); }
.sv-cmp2 .mo { background: var(--sv-teal-soft); }
.sv-cmp2 .b2 { padding: 7px 6px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.sv-cmp2 .b2.one { color: var(--gray-500); }
.sv-cmp2 .b2.mo { background: var(--black); color: var(--white); }
.sv-cmp2 .h2c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; padding: 12px 6px; }
.sv-cmp2 .h2c b { font-family: var(--heading); font-size: 13.5px; font-weight: 800; color: var(--black); line-height: 1.2; }
.sv-cmp2 .h2c.one b, .sv-cmp2 .h2c.one .pr { color: var(--gray-500); }
.sv-cmp2 .h2c .pr { font-family: var(--heading); font-size: 22px; font-weight: 850; letter-spacing: -0.02em; color: var(--black); margin-top: 2px; }
.sv-cmp2 .h2c .pr small { font-size: 11px; font-weight: 600; color: var(--gray-500); letter-spacing: 0; }
.sv-cmp2 .h2c .per { font-size: 10.5px; color: var(--gray-500); line-height: 1.3; }
.sv-cmp2 .l2 { display: flex; align-items: center; padding: 11px 8px 11px 12px; border-top: 1px solid var(--gray-200); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--black); line-height: 1.3; }
.sv-cmp2 .l2.top { border-top: 0; padding: 0; }
.sv-cmp2 .l2.cap { align-items: flex-end; padding: 0 8px 12px 12px; font-size: 9.5px; color: var(--gray-500); }
.sv-cmp2 .vv { display: block; }
.sv-cmp2 .off { display: none !important; }
.sv-cmp2 .v2 { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px; border-top: 1px solid var(--gray-200); text-align: center; font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.3; }
.sv-cmp2 .v2.one { color: var(--gray-500); font-weight: 500; }
.sv-cmp2 .v2 small { display: block; font-size: 10px; font-weight: 500; color: var(--gray-500); margin-top: 1px; }
.sv-cmp2 .cu { font-size: 0.78em; font-weight: 500; color: var(--gray-500); }
.sv-cmp2 .cy, .sv-cmp2 .cx { display: inline-flex; width: 20px; height: 20px; }
.sv-cmp2 .cy { color: var(--teal); }
.sv-cmp2 .cx { color: var(--gray-300); }
.sv-cmp2 .cy svg, .sv-cmp2 .cx svg { width: 100%; height: 100%; }
.sv-pstrip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sv-pick { margin: 14px 0 0; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); }
.sv-pstrip > button { position: relative; display: flex !important; flex-direction: column; align-items: center; gap: 1px; min-height: 60px; padding: 12px 6px 9px !important; background: var(--white) !important; border: 1px solid var(--gray-200) !important; border-radius: 10px; text-align: center !important; cursor: pointer; }
.sv-pstrip > button[aria-pressed="true"] { background: var(--sv-teal-soft) !important; border: 2px solid var(--teal) !important; box-shadow: 0 6px 16px var(--sv-teal-glow); }
.sv-pstrip i { position: absolute; top: -8px; font-style: normal; font-size: 8px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--white); background: var(--teal); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.sv-pstrip b { font-family: var(--heading); font-size: 13px; font-weight: 800; color: var(--black); }
.sv-pstrip span { font-family: var(--heading); font-size: 16px; font-weight: 850; color: var(--black); }
.sv-pstrip span small { font-size: 10.5px; font-weight: 500; color: var(--gray-500); }
.sv-cmp-cta { margin-top: 14px; }
.sv-cmp-cta .sv-more { display: flex !important; align-items: center; justify-content: center; min-height: 44px; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--teal) !important; width: 100%; }
.sv-month { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sv-month > div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px; min-width: 0; }
.sv-month .ph { display: block; aspect-ratio: 9/16; width: 52px; border-radius: 6px; background: repeating-linear-gradient(135deg, var(--gray-200) 0 8px, var(--gray-300) 8px 16px); }
.sv-month b { display: block; font-size: 14px; font-weight: 800; font-family: var(--heading); color: var(--black); line-height: 1.3; }
.sv-month .ln { display: block; font-size: 12.5px; color: var(--gray-500); margin-top: 3px; line-height: 1.45; }
.sv-month .wk { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); margin: 0; }
.sv-fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sv-fit > div { background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; }
.sv-sec.alt .sv-fit > div { background: var(--off-white); }
.sv-fit .yes { border-color: var(--teal); }
.sv-fit h3 { font-size: 14px; font-weight: 800; margin: 0 0 8px; }
.sv-fit ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sv-fit li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; color: var(--gray-700); line-height: 1.45; }
.sv-fit li .sv-svg { margin-top: 2px; color: var(--teal); }
.sv-fit .x { flex: none; width: 15px; text-align: center; font-size: 17px; line-height: 1; color: var(--gray-400); }
.sv-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.sv-rcard { display: flex; flex-direction: column; gap: 4px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.sv-sec.alt .sv-rcard { background: var(--off-white); }
.sv-rcard:hover { border-color: var(--teal); }
.sv-rcard .k { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray-500); }
.sv-rcard .k.cs { color: var(--sv-good); }
.sv-rcard b { font-family: var(--heading); font-size: 16px; font-weight: 800; color: var(--black); line-height: 1.3; }
.sv-rcard .d { font-size: 13.5px; color: var(--gray-500); line-height: 1.5; }
.sv-rcard .go { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 700; color: var(--teal-light); }
.sv-new { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--sv-good-soft); color: var(--sv-good); font-family: var(--body); font-size: 9.5px; font-weight: 700; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 2px; }
.sv-empty { text-align: center; font-size: 12.5px; color: var(--sv-todo); font-weight: 600; margin-top: 10px; }
.sv-cq { margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--sv-star); background: var(--sv-quote-bg); border-radius: 0 8px 8px 0; }
.sv-cq .stars { display: flex; gap: 2px; color: var(--sv-star); margin-bottom: 6px; }
.sv-cq .stars svg { width: 11px; height: 11px; }
.sv-cq p { font-size: 12px !important; color: var(--sv-on-dark) !important; margin: 0 0 4px !important; line-height: 1.5 !important; }
.sv-cq q { display: block; quotes: none; font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.5; }
.sv-cq q::before { content: "\201C"; }
.sv-cq q::after { content: "\201D"; }
.sv-gal-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.sv-gal-tools .search { flex: 1 1 220px; border: 1px solid var(--gray-200); background: var(--white); border-radius: 8px; padding: 11px 12px; font-size: 13px; color: var(--gray-400); }
.sv-gal-tools span.f { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--gray-200); border-radius: 4px; padding: 9px 12px; background: var(--white); }
.sv-gal-tools span.f.cur { background: var(--black); color: var(--white); border-color: var(--black); }
.sv-gal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sv-gal .ph { aspect-ratio: 16/10; }
.sv-local { max-width: 900px; }
.sv-areas { gap: 6px; }
.sv-areas a, .sv-areas > span { font-size: 12px !important; font-weight: 600; color: var(--gray-700); background: var(--white); border: 1px solid var(--gray-200); padding: 6px 11px !important; border-radius: 999px; text-decoration: none; }
.sv-areas a:hover { border-color: var(--teal); color: var(--teal-light); }
.sv-areas.collapsed > :nth-child(n+9):not(.sv-areas-more) { display: none; }
.sv-areas-more { font-size: 13px !important; font-weight: 700; color: var(--teal-light) !important; padding: 8px 4px !important; min-height: 40px; }
.sv-areas:not(.collapsed) .sv-areas-more { display: none; }
.sv-map { margin-top: 14px; }
.sv-map .mp { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.mp-ol { fill: none; stroke: var(--gray-300); stroke-width: 0.5; opacity: 0.6; }
.mp-coast { fill: none; stroke: var(--gray-400); stroke-width: 0.8; stroke-dasharray: 2 2; opacity: 0.4; }
.mp-i4 { fill: none; stroke: var(--gray-300); stroke-width: 1; opacity: 0.5; }
.mp-i4t { font-size: 3px; fill: var(--gray-400); font-family: var(--body); }
.mp-radius { fill: none; stroke: var(--teal); stroke-width: 0.5; stroke-dasharray: 3 3; opacity: 0.3; }
.mp-dot { fill: var(--teal); opacity: 0.8; }
.mp-lbl { font-size: 3.6px; fill: var(--gray-500); font-family: var(--body); font-weight: 600; }
.mp-home { fill: var(--teal); }
.mp-home-lbl { font-size: 4.6px; fill: var(--black); font-family: var(--heading); font-weight: 800; }
.mp-ring { fill: none; stroke: var(--teal); stroke-width: 1.2; opacity: 0; animation: mpRing 1.6s ease-out infinite; }
@keyframes mpRing { 0% { opacity: 0.6; r: 3; } 100% { opacity: 0; r: 9; } }
@media (prefers-reduced-motion: reduce) { .mp-ring { animation: none; } }
@media (min-width: 861px) {
    .sv-cmp { grid-template-columns: minmax(0, 1.25fr) repeat(4, minmax(0, 1fr)); background: var(--white); }
    .sv-cmp .cc.g { background: var(--sv-teal-soft); }
    .sv-cmp .cc.one { background: var(--gray-100); }
    .sv-cmp .sv { display: none !important; }
    .sv-cmp .lv { display: inline !important; }
    .sv-cmp .cl { grid-column: auto; display: flex; align-items: center; position: static; height: auto; font-size: 11px; padding: 14px 18px; }
    .sv-cmp .cl span { position: static; transform: none; white-space: normal; display: inline; padding: 0; border: 0; border-radius: 0; background: none; color: var(--gray-500); font-size: inherit; font-weight: 700; letter-spacing: inherit; }
    .sv-cmp .cl.lab-empty { display: block; border-top: 0; padding: 0; }
    .sv-cmp .cl.lab-empty.cf { display: block; border-top: 1px solid var(--gray-200); }
    .sv-cmp .cc { display: flex; align-items: center; justify-content: center; padding: 14px 12px; font-size: 14px; border-top: 1px solid var(--gray-200); }
    .sv-cmp .cc.ch { border-top: 0; padding: 18px 10px 16px; }
    .sv-cmp .cband { font-size: 10px; padding: 9px; }
    .sv-cmp .cn { font-size: 16px; }
    .sv-cmp .cp { font-size: 30px; }
    .sv-cmp .one .cp { font-size: 24px; }
    .sv-cmp .cper { font-size: 12px; }
    .sv-cmp .crec { font-size: 9.5px; padding: 3px 9px; margin-bottom: 6px; }
    .sv-cmp .cy, .sv-cmp .cx { width: 22px; height: 22px; }
    .sv-cmp .cf { display: flex; padding: 14px 12px 18px; }
    .sv-cmp .cf .sv-btn { min-height: 44px; padding: 12px 10px !important; font-size: 10.5px !important; letter-spacing: 0.08em; }
    .sv-cmp .crec { letter-spacing: 0.08em; }
    .sv-cmp-cta { display: none; }
    .sv-cmp { display: grid; }
    .sv-cmp2, .sv-pstrip, .sv-pick { display: none; }
    .sv-month { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    .sv-month > div { display: block; padding: 12px; }
    .sv-month .ph { width: 100%; max-height: 220px; margin-bottom: 10px; border-radius: 8px; }
    .sv-month .wk { margin-bottom: 4px; }
    .sv-read { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
    .sv-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .sv-rcard { padding: 18px 18px 16px; }
    .sv-gal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sv-local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
    .sv-local .sv-map { margin-top: 0; }
    .sv-areas.collapsed > :nth-child(n+9):not(.sv-areas-more) { display: inline-flex; }
    .sv-areas-more { display: none !important; }
}

/* ---------- Recent work: a patchwork of portfolio pieces, big, medium and
   small tiles packed together, each looping a short silent preview while on
   screen (js/work-collage.js). Tiles crop to fill; the full video opens on tap.
   Phone: 4 columns. Computer: 6. ---------- */
.sv-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 74px; gap: 6px; }
.sv-ct { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--black); cursor: pointer; }
.sv-ct img, .sv-ct video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-ct video { opacity: 0; transition: opacity 0.4s; }
.sv-ct video.on { opacity: 1; }
.sv-ct-t { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 9px 7px; background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0)); color: var(--white); font-size: 11px; line-height: 1.3; text-align: left; }
.sv-ct-t b { display: block; font-family: var(--heading); font-size: 12.5px; font-weight: 800; }
.sv-ct.sm .sv-ct-t { display: none; }
@media (max-width: 860px) { .sv-ct.nar .sv-ct-t { display: none; } }
.sv-collage-more { margin-top: 14px; text-align: center; }
.sv-collage-more .sv-btn { display: inline-flex; width: auto; }
@media (min-width: 861px) {
    .sv-collage { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 104px; gap: 8px; }
    .sv-ct-t { font-size: 12px; padding: 26px 12px 10px; }
    .sv-ct-t b { font-size: 14px; }
}