/* Jiffy Services LLC — one pager (loads after pbj-home.css + pbj-contact.css)
   Skin: jiffy-services — brick red leads the dark grounds, navy demoted to support.
   Same bones, same type system as Pools by Jiffy. */

[data-skin="jiffy-services"] {
  /* full PBJ base token sheet (pbj-home.css scopes it to pools-by-jiffy only) */
  --ink: #003049;
  --body-muted: #4a4f54;
  --fineprint: #7d8790;
  --surface: #ffffff;
  --surface-cream: #FDF0D5;
  --surface-antique: #FBF5E7;
  --hairline: #e6e3da;
  --hairline-cream: #eadfc6;
  --card-border: #e4e0d5;
  --accent-2: #669BBC;
  --accent-on-dark: #FDF0D5;
  --star-gold: #e8a33d;
  --state-error: #dd6420;
  --display-face: 'Roboto Serif', Georgia, serif;
  --body-face: 'Open Sans', Helvetica, Arial, sans-serif;
  --heading-weight: 400;
  --heading-tracking: -0.01em;
  --heading-line: 1.1;
  --h1-size: clamp(60px, 6.6vw, 96px);
  --h2-size: clamp(38px, 3.8vw, 56px);
  --body-size: 17px;
  --body-line: 1.6;
  --eyebrow-weight: 700;
  --eyebrow-tracking: 0.18em;
  --eyebrow-size: 18px;
  --btn-fill: var(--accent);
  --btn-label: #FDF0D5;
  --radius-button: 6px;
  --btn-pad-y: 13px;
  --btn-pad-x: 26px;
  --btn-hover-fill: #003049;
  --btn-hover-label: #ffffff;
  --btn-hover-lift: -2px;
  --focus-ring: 2px solid var(--accent-2);
  --radius-card: 10px;
  --radius-media: 12px;
  --radius-chip: 100px;
  --card-hover-lift: -6px;
  --reveal-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --marquee-duration-a: 32s;
  --marquee-duration-b: 44s;
  /* skin overrides: navy grounds, logo-gold CTAs, steel-blue headings */
  --dark-base: #102F47;
  --dark-deep: #0A2032;
  --dark-elevated: #1A3D58;
  --accent: #F8C818;
  --accent-deep: #C89B08;
  --heading-accent: #4696C8;
  --surface-sky: #EAF2F8;
  --accent-tint: #E3EEF6;
  --accent-soft: #FCF0C0;
  --scrim-rgb: 7, 23, 36;
  --btn-label: #102F47;
  --btn-hover-fill: #102F47;
  --shadow-card: 0 16px 34px rgba(16, 47, 71, 0.13), 0 4px 9px rgba(16, 47, 71, 0.07);
}
[data-skin="jiffy-services"] .vcard-ic, [data-skin="jiffy-services"] .crow-ic { color: #102F47; }
[data-skin="jiffy-services"] .nudge-card p { color: rgba(253, 240, 213, 0.92); }
[data-skin="jiffy-services"] .cform-done i { color: var(--heading-accent); }
[data-skin="jiffy-services"] .wordmark img { height: 64px; }
[data-skin="jiffy-services"] #jsv-footer-logo { display: block; margin-bottom: 22px; }
[data-skin="jiffy-services"] #jsv-footer-logo::part(frame) { background: transparent; }
[data-skin="jiffy-services"] #jsv-footer-logo::part(ring) { border-color: rgba(253, 240, 213, 0.25); }
[data-skin="jiffy-services"] #jsv-footer-logo::part(empty) { color: rgba(253, 240, 213, 0.6); }

/* hero (hero-quote bones, interior height) */
.jsv-hero { height: 680px; }
.jsv-hero--solid { background: linear-gradient(180deg, var(--dark-elevated), var(--dark-base) 55%, var(--dark-deep)); overflow: visible; z-index: 2; }
/* hero photo card (as before) — cutout composited on a studio steel-blue backdrop */
.jsv-hero-photo { position: absolute; top: 96px; right: max(40px, calc((100% - 1320px) / 2)); width: min(560px, 40vw); height: 740px; z-index: 3; }
.jsv-card { position: absolute; inset: 0; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card); background: #1E5B82; }
.jsv-flat { width: 100%; height: 100%; object-fit: cover; display: block; }
.jsv-hero-photo .trust-tag { left: -34px; bottom: 44px; z-index: 3; }
.jsv-hero .hero-inner > * { position: relative; z-index: 1; }
.jsv-hero h1, .jsv-hero .hero-sub { max-width: min(640px, calc(100% - min(560px, 40vw) - 60px)); }
.svc { position: relative; z-index: 1; }
@media (max-width: 1100px) { .jsv-hero-photo { display: none; } .jsv-hero h1, .jsv-hero .hero-sub { max-width: 900px; } }
.jsv-hero h1 { }
.jsv-since { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(253, 240, 213, 0.9); }
.jsv-since i { color: var(--star-gold); }

/* section head lockup */
.shead { max-width: 760px; }
.shead h2 { font-size: var(--h2-size); color: #102F47; margin: 14px 0 18px; }
.shead p { font-size: 18px; line-height: 1.65; }

/* services — service-card-grid bones, photo-top cards */
.svc { padding: 104px 0 110px; background: var(--surface); }
.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 54px; }
.svc-card { background: #ffffff; border: 1px solid var(--card-border); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); transition: transform .35s var(--reveal-ease), box-shadow .35s ease; }
.svc-card:hover { transform: translateY(var(--card-hover-lift)); box-shadow: 0 24px 48px rgba(16, 47, 71, 0.18); }
.svc-media { position: relative; height: 220px; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--reveal-ease); }
.svc-card:hover .svc-media img { transform: scale(1.05); }
.svc-media::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--heading-accent); }
.svc-body { padding: 28px 30px 32px; }
.svc-body h3 { font-size: 24px; font-variation-settings: 'opsz' 72; font-optical-sizing: unset; margin-bottom: 16px; }
.svc-list { list-style: none; display: flex; flex-direction: column; }
.svc-list li { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); font-size: 15.5px; color: var(--body-muted); }
.svc-list li:last-child { border-bottom: 0; }
.svc-list i { color: var(--heading-accent); font-size: 12px; flex: none; }

/* trusted & reliable — split-feature bones on cream */
.trust { padding: 104px 0 110px; background: var(--surface-cream); border-top: 1px solid var(--hairline-cream); }
.trust-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; }
.trust-copy p { font-size: 18px; line-height: 1.7; margin-top: 18px; }
.trust-copy p b { color: var(--ink); }
.trust-media { position: relative; }
.trust-media-main { aspect-ratio: 1 / 1; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card); }
.trust-media-main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.trust-tag { position: absolute; left: -26px; bottom: 34px; background: var(--dark-base); color: var(--surface-cream); border-radius: var(--radius-card); padding: 16px 24px; box-shadow: 0 14px 32px rgba(16, 47, 71, 0.35); }
.trust-tag b { display: block; font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-size: 30px; font-weight: 500; line-height: 1.1; }
.trust-tag span { font-size: 12.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(253, 240, 213, 0.75); }

/* video divider — midpage-image-band bones, motion instead of a still */
.vband { position: relative; background: var(--dark-deep); line-height: 0; }
.vband video { width: 100%; height: 620px; object-fit: cover; display: block; }
.vband-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 0 42px; line-height: 1.5; text-align: center; background: linear-gradient(180deg, transparent, rgba(7, 23, 36, 0.72)); }
.vband-cap .eyebrow--dark { text-shadow: 0 1px 10px rgba(7, 23, 36, 0.6); }

/* best services in town — divider-list bones */
.best { padding: 104px 0 116px; background: var(--surface); }
.best-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 80px; align-items: start; }
.best-media { position: sticky; top: 140px; aspect-ratio: 4 / 5; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--shadow-card); }
.best-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.best-rows { margin-top: 44px; border-top: 1px solid var(--hairline); }
.best-row { display: flex; align-items: center; gap: 22px; padding: 22px 4px; border-bottom: 1px solid var(--hairline); }
.best-ic { flex: none; width: 50px; height: 50px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: #102F47; font-size: 17px; }
.best-row b { display: block; font-size: 17px; color: var(--ink); }
.best-row span { font-size: 14.5px; color: var(--body-muted); }

/* work gallery — mosaic grid on cream, echoes the mockup: one anchor tile, mixed smalls */
.gal { padding: 104px 0 116px; background: var(--surface-cream); border-top: 1px solid var(--hairline-cream); }
.gal-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; gap: 18px; margin-top: 50px; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--radius-media); box-shadow: var(--shadow-card); transition: transform .35s var(--reveal-ease); }
.gal-grid img:hover { transform: scale(1.02); }
.gal-grid image-slot { display: block; width: 100%; height: 100%; }
.gal-big { grid-column: span 2; grid-row: span 2; }
@media (max-width: 900px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; } }

/* testimonial — brick band, single editorial quote */
.quote { background: var(--dark-base); padding: 110px 0 118px; text-align: center; position: relative; overflow: hidden; }
.quote::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 180% at 50% 120%, rgba(253, 240, 213, 0.08), transparent 60%); }
.quote-inner { position: relative; max-width: 880px; margin-inline: auto; }
.quote .stars { color: var(--star-gold); font-size: 15px; letter-spacing: 6px; }
.quote blockquote { font-family: var(--display-face); font-variation-settings: 'opsz' 72; font-style: italic; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.45; color: var(--surface-cream); margin: 26px 0 30px; }
.quote figcaption { font-size: 15px; font-weight: 600; color: rgba(253, 240, 213, 0.85); }
.quote figcaption span { display: block; font-weight: 400; font-size: 13.5px; color: rgba(253, 240, 213, 0.6); margin-top: 3px; }
.quote-head { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(253, 240, 213, 0.65); margin-bottom: 18px; }

/* contact rail: license trust strip */
.lic-strip { background: #ffffff; border: 1px solid var(--card-border); border-radius: var(--radius-card); padding: 20px 24px; margin-top: 26px; }
.lic-strip .hours-k { color: var(--dark-base); }
.lic-strip .lic-row b { color: var(--ink); }
.lic-strip .lic-row { border-bottom-color: var(--hairline-cream); font-size: 14.5px; color: var(--body-muted); }
.lic-strip .lic-row:last-of-type { border-bottom: 0; }
.lic-strip .lic-sh { display: flex; align-items: center; gap: 10px; }
.lic-strip .lic-sh i { color: var(--heading-accent); }
[data-skin="jiffy-services"] .csplit-rail h2, [data-skin="jiffy-services"] .cform-head h3 { color: #102F47; }
[data-skin="jiffy-services"] .eyebrow { color: var(--heading-accent); }
[data-skin="jiffy-services"] .hero .eyebrow, [data-skin="jiffy-services"] .eyebrow--dark { color: var(--accent-on-dark); }
[data-skin="jiffy-services"] .nav-links a:hover, [data-skin="jiffy-services"] .nav-links a.active, [data-skin="jiffy-services"] a:hover { color: var(--heading-accent); }
[data-skin="jiffy-services"] .nav-links a::after { background: var(--heading-accent); }

@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr; } .trust-grid, .best-grid { grid-template-columns: 1fr; gap: 48px; } .best-media { position: static; } }