/**
 * PROPRIETARY SOFTWARE NOTICE
 *
 * Copyright (c) Pro Star CMS Development. All rights reserved.
 *
 * This website, its source code, database structure, administrative system,
 * content management system, visual editor, assistant, and all related
 * components, documentation, and methods (the "Software") were designed and
 * developed by Pro Star CMS Development and are its exclusive proprietary and
 * confidential property. The Software is protected by United States copyright
 * law, trade secret law, and other applicable intellectual property laws.
 *
 * No license or other right is granted by access to, possession of, or display
 * of this source code, whether express or implied, by estoppel or otherwise.
 * Except as permitted in a written agreement signed by Pro Star CMS Development,
 * no person may copy, modify, adapt, translate, distribute, publish, sublicense,
 * disclose, decompile, reverse engineer, extract, reuse, or reproduce any portion
 * of the Software, or create derivative works from it, in whole or in part.
 *
 * Review of this code is limited to personnel authorized in writing, and only as
 * necessary to perform approved hosting, maintenance, security, or support
 * services. Any unauthorized use or disclosure may result in civil liability and
 * criminal prosecution to the fullest extent permitted by law.
 *
 * This notice must not be removed, altered, or obscured.
 *
 * For questions, requests for authorization, or technical information, contact
 * Chad Sanders directly:
 *
 * Pro Star Web Design
 * Chad Sanders
 * Phone: 256-550-1988
 */

/*
 * South Eastern Campers: site-only styles (the engine's site.css is not edited per site).
 * Mobile first.  Design pass 2026-11-12: photo-driven, glossy.  Brand maroon #660000, amber #d97706.
 * Rules this file keeps: pictures fill their box and never resize it (07 #39); photo bands stay still (07 #40);
 * reduced motion gets fades only, nothing hidden (07 #17/#42); text over a photo sits on a glass panel or a gradient
 * proven dark enough (07 #124/#150).  Every text colour is at least 4.5:1 on its surface (contrast_audit.js, BUILD_NOTES).
 */

/* ======================================================================
   Tokens: warm surfaces instead of the engine's pale blue greys
   ====================================================================== */
html:root {
  --cream: #fbf4ea;
  --line: #e6d9c8;
  --ink: #241a16;
  --muted: #5d524b;
  --sh-sm: 0 1px 2px rgba(48, 8, 0, .08), 0 6px 14px -6px rgba(48, 8, 0, .18);
  --sh-md: 0 2px 4px rgba(48, 8, 0, .07), 0 14px 30px -10px rgba(48, 8, 0, .28), 0 30px 60px -34px rgba(48, 8, 0, .35);
  --sh-lg: 0 4px 8px rgba(48, 8, 0, .08), 0 26px 52px -16px rgba(48, 8, 0, .38), 0 50px 90px -40px rgba(48, 8, 0, .45);
  --r: 18px;
  --r-lg: 24px;
  --gold: linear-gradient(180deg, #f8b232 0%, #e38a0c 55%, #d97706 100%);
  --maroon: linear-gradient(180deg, #8c1212 0%, #660000 55%, #4d0000 100%);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .2  0 0 0 0 .1  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* one accent colour per group of content */
.sec-c-blue  { --c: #1d4f91; --c-soft: #e9f0fb; }
.sec-c-teal  { --c: #0b6a63; --c-soft: #e1f2ef; }
.sec-c-amber { --c: #8a4b00; --c-soft: #fdeed6; }
.sec-c-green { --c: #25682c; --c-soft: #e5f2e3; }
.sec-c-purple{ --c: #5a3a8f; --c-soft: #eee8f8; }
.sec-c-rose  { --c: #a3203f; --c-soft: #fbe8ed; }

/* warm paper with a little grain */
.section--cream {
  background-color: var(--cream);
  background-image: var(--noise), linear-gradient(180deg, #fdf8f1 0%, #f8eee1 100%);
}
.section:where(:not(.section--cream):not(.sec-brands):not(.px-band):not(.sec-claims):not(.jingle)) { background-image: var(--noise); }

/* ======================================================================
   Glossy buttons: gradient, inner highlight, soft coloured glow, press state
   ====================================================================== */
.btn, .btn-call, .btn-portal {
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease, background-color .15s ease, color .15s ease;
}
.btn::after, .btn-call::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .5) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .75s ease;
  pointer-events: none;
}
.btn:hover::after, .btn-call:hover::after { transform: translateX(130%); }
.btn-primary, .btn-call {
  background: var(--gold);
  border-color: #b86505;
  color: #1a1206;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 0 rgba(120, 50, 0, .25), 0 10px 22px -6px rgba(217, 119, 6, .55);
}
.btn-primary:hover, .btn-call:hover {
  background: linear-gradient(180deg, #fbbd4a 0%, #eb9514 55%, #de7d08 100%);
  border-color: #b86505;
  color: #1a1206;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 50, 0, .25), 0 16px 30px -6px rgba(217, 119, 6, .65);
}
.btn-primary:active, .btn-call:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(120, 50, 0, .35), 0 4px 10px -4px rgba(217, 119, 6, .5); }
.btn-brand, .btn-portal {
  background: var(--maroon);
  border-color: #3a0000;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 10px 22px -8px rgba(102, 0, 0, .6);
}
.btn-brand:hover, .btn-portal:hover {
  background: linear-gradient(180deg, #a01616 0%, #7a0505 55%, #5a0000 100%);
  border-color: #3a0000;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 0 rgba(0, 0, 0, .3), 0 16px 28px -8px rgba(102, 0, 0, .7);
}
.btn-brand:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .45); }
.btn-ghost {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(102, 0, 0, .55);
  color: var(--brand);
  box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(48, 8, 0, .35);
}
.btn-ghost:hover { background: var(--maroon); color: #fff; border-color: #3a0000; transform: translateY(-2px); }
.btn-on-dark {
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 18px -8px rgba(0, 0, 0, .5);
}
.btn-on-dark:hover { background: #fff; color: var(--brand-deep); transform: translateY(-2px); }
.btn-call-label { color: #2b1a00; }
.btn-call .ic { opacity: 1; }
.nav-cta.btn-primary, .nav-mobile .btn-primary { text-shadow: none; }

/* ======================================================================
   Home hero: photo, vignette, glass panel, glare, rolling pictures
   ====================================================================== */
.hero--glass { background: #2c0000; min-height: 0; }
.hero--glass .hero-media { background: #2c0000; }
.hero--glass .landing-fader { position: absolute; inset: 0; overflow: hidden; }
.hero--glass .landing-slide {
  object-position: var(--fx, 50%) var(--lp-y, 25%);
  opacity: 0;
  z-index: 0;
  transition: opacity 1s ease;
  transform-origin: 50% 55%;
}
.hero--glass .landing-slide.is-on { opacity: 1; z-index: 2; }
.hero--glass .landing-slide.is-prev { opacity: 1; z-index: 1; transition: none; }
.js .hero--glass .landing-slide.is-on, .js .hero--glass .landing-slide.is-prev { animation: psPush 16s ease-out both; }
@keyframes psPush { from { transform: scale(1.02); } to { transform: scale(1.12) translate3d(-1%, -.6%, 0); } }

/* each picture arrives with a different roll (site.js sets data-roll): iris, wipe, wipe up, slant */
.hero--glass .landing-slide[data-roll] { transition: clip-path 1.7s cubic-bezier(.7, 0, .2, 1); }
.hero--glass .landing-slide[data-roll="iris"]  { clip-path: circle(0% at 50% 55%); }
.hero--glass .landing-slide[data-roll="right"] { clip-path: inset(0 100% 0 0); }
.hero--glass .landing-slide[data-roll="up"]    { clip-path: inset(100% 0 0 0); }
.hero--glass .landing-slide[data-roll="slant"] { clip-path: polygon(0 0, 0 0, -25% 100%, -25% 100%); }
.hero--glass .landing-slide[data-roll="iris"].is-on,  .hero--glass .landing-slide[data-roll="iris"].is-prev  { clip-path: circle(150% at 50% 55%); }
.hero--glass .landing-slide[data-roll="right"].is-on, .hero--glass .landing-slide[data-roll="right"].is-prev { clip-path: inset(0 0 0 0); }
.hero--glass .landing-slide[data-roll="up"].is-on,    .hero--glass .landing-slide[data-roll="up"].is-prev    { clip-path: inset(0 0 0 0); }
.hero--glass .landing-slide[data-roll="slant"].is-on, .hero--glass .landing-slide[data-roll="slant"].is-prev { clip-path: polygon(0 0, 125% 0, 100% 100%, -25% 100%); }
.hero--glass .landing-slide[data-roll].is-prev { transition: none; }
.hero--glass .landing-slide[data-roll].is-on { opacity: 1; }

/* vignette in the brand maroon: sliders in Admin > Landing Panel Gallery > Picture shading (--hv-*) */
.hero--glass .hero-scrim {
  background:
    radial-gradient(60% 55% at 0% 100%, rgba(var(--accent-rgb), .34) 0%, transparent 70%),
    radial-gradient(ellipse 48% 78% at 72% 50%, rgba(var(--shade-rgb), var(--hv-text)) 0%, rgba(var(--shade-rgb), calc(var(--hv-text) * .5)) 55%, rgba(var(--shade-rgb), 0) 90%),
    radial-gradient(ellipse 95% 95% at 50% 50%, rgba(var(--shade-rgb), var(--hv-center)) 0%, rgba(var(--shade-rgb), var(--hv-center)) 40%, rgba(var(--shade-rgb), var(--hv-edge)) 100%),
    linear-gradient(180deg, rgba(var(--shade-rgb), .5) 0%, rgba(var(--shade-rgb), 0) 22%, rgba(var(--shade-rgb), 0) 70%, rgba(var(--shade-rgb), .6) 100%);
}
.hero--glass .hero-scrim::after { display: none; }

/* a diagonal glare crosses the picture, first soon after the curtain, then every 9 seconds */
.hero-glare {
  position: absolute;
  inset: -10% -30%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 42%, rgba(255, 255, 255, .13) 49%, rgba(255, 220, 160, .22) 50.5%, rgba(255, 255, 255, .1) 52%, transparent 58%);
  transform: translateX(-70%);
}
.js .hero-glare { animation: psGlare 9s ease-in-out 2.6s infinite; }
@keyframes psGlare { 0% { transform: translateX(-70%); } 22% { transform: translateX(70%); } 100% { transform: translateX(70%); } }

.hero--glass .hero-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: clamp(34rem, calc(100svh - 124px), 50rem);
  padding: clamp(3.4rem, 6vw, 5.4rem) 0 clamp(5.6rem, 8vw, 7.6rem);
  position: relative;
  z-index: 3;
}
.hero-glass {
  position: relative;
  width: min(100%, 35rem);
  max-width: 35rem;
  padding: 2.1rem 2.3rem 1.9rem;
  border-radius: var(--r-lg);
  text-align: left;
  background: linear-gradient(158deg, rgba(var(--glass-rgb, 42, 0, 0), calc(var(--glass-a, .66) * .75 + .25)), rgba(var(--glass-rgb, 42, 0, 0), calc(var(--glass-a, .66) * .75 + .17)));
  -webkit-backdrop-filter: blur(var(--glass-blur, 12px)) saturate(1.25);
  backdrop-filter: blur(var(--glass-blur, 12px)) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .24);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 34px 70px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-glass { background: rgba(var(--glass-rgb, 42, 0, 0), .9); }
}
/* thin gradient rim */
.hero-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 38%, rgba(var(--accent-rgb), .7) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.hero--glass .hero-copy { max-width: none; }
.hero--glass .hero-copy::before { display: none; }
.hero-glass .tag { margin-bottom: 1rem; }
.hero--glass .hero-logo {
  display: block;
  position: absolute;
  top: -2.6rem;
  right: 1.7rem;
  width: 6.4rem;
  height: auto;
  margin: 0;
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .5), 0 0 0 3px rgba(255, 255, 255, .55);
}
.hero--glass h1 { color: #fff; font-size: clamp(2.5rem, 4.4vw, 3.7rem); text-shadow: 0 2px 20px rgba(0, 0, 0, .45); margin-bottom: .3em; }
.hero--glass h1 .accent { color: #f6ad2a; }
.hero--glass .hero-lede { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); margin-bottom: 1.4rem; text-indent: 0; max-width: none; }
.hero-glass .hero-actions { gap: .8rem; }
.hero-facts { list-style: none; margin: 1.3rem 0 0; padding: 1rem 0 0; border-top: 1px solid rgba(255, 255, 255, .25); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.hero-facts li { margin: 0; display: flex; align-items: center; gap: .45rem; color: #fff; font-size: .95rem; font-weight: 600; }
.hero-facts .sec-ic { color: #f6ad2a; }
.hero--glass .hero-cue { left: 50%; bottom: 3.2rem; z-index: 4; }
.hero--glass .hero-cue-line { background: rgba(255, 255, 255, .8); }

/* staggered text reveal (engine heroRise keyed on .js; the logo plate drops in last) */
.js .hero--glass .hero-logo { animation: psDrop .9s cubic-bezier(.16, .9, .3, 1) 1.5s both; }
.js.splash-skipped .hero--glass .hero-logo { animation-delay: .5s; }
.js .hero--glass .hero-facts { animation: heroRise .85s cubic-bezier(.16, .9, .3, 1) 1.7s both; }
.js.splash-skipped .hero--glass .hero-facts { animation-delay: .7s; }
.js .hero--glass .hero-glass { animation: psPanel 1.1s cubic-bezier(.16, .9, .3, 1) .9s both; }
.js.splash-skipped .hero--glass .hero-glass { animation-delay: .02s; }
@keyframes psDrop { from { opacity: 0; transform: translate3d(0, -26px, 0) rotate(-4deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes psPanel { from { opacity: 0; transform: translate3d(34px, 0, 0); } to { opacity: 1; transform: none; } }

/* curved edge into the next section */
.sec-curve {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -1px;
  height: clamp(26px, 4.2vw, 62px);
  background: var(--curve-fill, #fff);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
  z-index: 4;
}
.sec-curve--paper { --curve-fill: var(--paper); }
.sec-curve--cream { --curve-fill: var(--cream); }

/* phones and tablets: the picture is a band across the top, the glass panel overlaps its lower edge, logo centred (07 #113, #115) */
@media (max-width: 959.98px) {
  .hero--glass { --hl: clamp(11rem, 64vw, 17rem); }
  .hero--glass .hero-media { bottom: auto; height: calc(var(--hl) + 8rem); }
  .hero--glass .hero-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(180deg, transparent, #2c0000); }
  .hero--glass .landing-slide { object-position: var(--fx, 50%) var(--lp-y, 25%); }
  .hero--glass .hero-scrim { bottom: auto; height: calc(var(--hl) + 8rem); }
  .hero--glass .hero-inner { display: block; min-height: 0; padding: calc(var(--hl) + 2.8rem) 0 2.2rem; }
  .hero-glass { margin-inline: auto; text-align: center; padding: 1.4rem 1.2rem 1.4rem; }
  .hero-glass .tag { margin-inline: auto; }
  /* logo: big, centred in the empty picture area above the card (Chad, 2026-11-12) */
  .hero--glass .hero-logo { position: absolute; top: auto; bottom: calc(100% + 1.4rem); left: 0; right: 0; width: var(--hl); margin: 0 auto; border-radius: 26px; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 4px rgba(255, 255, 255, .6); }
  .hero--glass h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .hero--glass .hero-lede { font-size: 1.02rem; margin-inline: auto; }
  .hero-glass .hero-actions { justify-content: center; }
  .hero-facts { justify-content: center; }
  .hero--glass .sec-curve { display: none; }
}
@media (max-width: 599.98px) {
  .hero-facts { display: none; }
  .hero-glass .hero-actions { flex-direction: column; }
  .hero--glass .hero-inner { padding-bottom: 1.6rem; }
}
@media (max-width: 599.98px) { .hero--glass { padding-bottom: 0; } }

/* ======================================================================
   Statement band with raised figure cards
   ====================================================================== */
.sec-statement {
  background: var(--paper) var(--noise);
  padding: clamp(2.4rem, 5vw, 4rem) 0 clamp(2.8rem, 5vw, 4.4rem);
  position: relative;
}
.sec-statement-grid { display: grid; gap: 1.6rem 3rem; align-items: center; }
.sec-statement-big { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.06; color: var(--brand-deep); margin: 0; text-wrap: balance; text-indent: 0; }
.sec-figures { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sec-figures li {
  margin: 0;
  padding: 1rem .9rem 1rem;
  border: 2px solid transparent;
  border-radius: var(--r);
  background: linear-gradient(180deg, #fff, #fbf4ea) padding-box, linear-gradient(135deg, #f6ad2a, #660000) border-box;
  box-shadow: var(--sh-md);
  text-align: center;
}
.sec-figures b { display: block; font-family: var(--font-display); font-size: clamp(2.3rem, 6.6vw, 4rem); line-height: .95; color: var(--brand); }
.sec-figures .sec-fig-word { font-size: clamp(1.5rem, 4.4vw, 2.5rem); padding-top: .5rem; }
.sec-figures span { display: block; font-size: .9rem; color: var(--muted); margin-top: .35rem; line-height: 1.25; }
@media (min-width: 960px) { .sec-statement-grid { grid-template-columns: 1.05fr 1fr; } }

/* ======================================================================
   Photo cards (services, related, gallery link cards)
   ====================================================================== */
.sec-tiles { display: grid; gap: 1rem; margin-top: 2.2rem; grid-template-columns: 1fr; }
.sec-tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .sec-tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec-tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px) { .sec-tiles--4 { gap: 1.15rem; } }
@media (min-width: 1000px) { .sec-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.pc {
  position: relative;
  isolation: isolate;
  min-width: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: #2c0000;
  box-shadow: var(--sh-md);
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s ease;
}
.pc-link { display: block; position: relative; height: 100%; color: #fff; text-decoration: none; }
.pc-photo { position: relative; overflow: hidden; background: linear-gradient(145deg, #7a1a12, #330000); }
.pc-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.pc:hover .pc-img, .pc:focus-within .pc-img { transform: scale(1.08); }
.pc-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(40, 0, 0, .28) 0%, rgba(40, 0, 0, 0) 24%, rgba(34, 0, 0, .66) 46%, rgba(30, 0, 0, .9) 62%, rgba(30, 0, 0, .97) 100%); }
.pc-badge {
  position: absolute;
  top: .75rem;
  left: .75rem;
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 50%;
  background: var(--gold);
  color: #1a1206;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 8px 16px -4px rgba(0, 0, 0, .55);
  z-index: 2;
}
.pc-badge .sec-ic { width: 1.45rem; height: 1.45rem; }
.pc-sheen, .sec-pair figure .pc-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, rgba(255, 255, 255, .38) 50%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .95s ease;
}
.pc:hover .pc-sheen, .pc:focus-within .pc-sheen, .sec-strip li:hover .pc-sheen, .sec-overlap-pic:hover .pc-sheen, .sec-pair figure:hover .pc-sheen { transform: translateX(130%); }
.pc:hover, .pc:focus-within { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.pc-link:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--r); }
.pc h3 { margin: 0; font-size: clamp(1.1rem, 2.5vw, 1.4rem); line-height: 1.08; text-wrap: balance; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.pc p { margin: .35rem 0 0; text-indent: 0; font-size: .96rem; }
.sec-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .45rem; font-weight: 700; font-size: .93rem; color: #ffd58a; }
.pc .sec-more .sec-ic { transition: transform .25s ease; }
.pc:hover .sec-more .sec-ic { transform: translateX(4px); }

/* full-bleed variant: fixed aspect ratio, the photo fills it, title over the dark gradient */
.pc--full { aspect-ratio: 1 / 1; }
.pc--full .pc-photo { position: absolute; inset: 0; }
.pc--full .pc-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem .95rem 1rem; z-index: 2; }
@media (max-width: 420px) { .pc--full .pc-text { padding: .8rem .75rem .85rem; } .pc--full h3 { font-size: 1.02rem; } .pc-badge { width: 2.3rem; height: 2.3rem; } }

/* split variant: photo above (fixed ratio), text on a white plate below */
.pc--split { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.pc--split .pc-link { display: flex; flex-direction: column; color: var(--ink); }
.pc--split .pc-photo { aspect-ratio: 16 / 10; flex: none; }
.pc--split .pc-shade { background: linear-gradient(180deg, rgba(40, 0, 0, .25), rgba(40, 0, 0, 0) 40%, rgba(40, 0, 0, .35)); }
.pc--split .pc-text { padding: 1.05rem 1.15rem 1.2rem; display: flex; flex-direction: column; flex: 1; border-top: 4px solid var(--c, var(--accent)); background: linear-gradient(180deg, #fff, #fdf8f1); }
.pc--split h3 { color: var(--brand-deep); text-shadow: none; }
.pc--split p { color: var(--muted); }
.pc--split .sec-more { color: var(--c, var(--accent-ink)); margin-top: auto; padding-top: .55rem; }

/* closing card in the home grid (14 cards + this one, two wide, fill four rows) */
.pc--cta { grid-column: span 2; background: radial-gradient(90% 120% at 100% 0, rgba(var(--accent-rgb), .45), transparent 60%), linear-gradient(160deg, #7a0b0b, #3d0000); border: 1px solid rgba(255, 255, 255, .15); }
.pc--cta:hover { transform: none; }
.pc-cta-in { height: 100%; display: flex; flex-direction: column; gap: .6rem; justify-content: center; padding: 1.4rem 1.3rem; color: #fff; }
.pc-cta-in h3 { text-shadow: none; }
.pc-cta-in p { color: #fff; margin: 0; }
.pc-cta-in .btn { align-self: flex-start; margin-top: .3rem; }
.pc-badge--lg { position: static; width: 3.4rem; height: 3.4rem; }
.pc--cta .pc-badge--lg { margin-bottom: .2rem; }
.sec-svc { position: relative; }
.sec-svc::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: clamp(24px, 3.6vw, 52px); background: var(--paper); clip-path: polygon(0 0, 100% 0, 0 100%); }

/* ======================================================================
   Inner page banner: photo, maroon gradient, curved edge, glare
   ====================================================================== */
.sec-hero { background: #2c0000; min-height: clamp(17rem, 30vw, 24rem); display: flex; align-items: center; }
.sec-hero .page-hero-media img { object-position: 50% 45%; }
.js .sec-hero .page-hero-media img { animation: psBanner 26s ease-in-out infinite alternate; }
@keyframes psBanner { from { transform: scale(1.03); } to { transform: scale(1.13) translate3d(-1.2%, -.8%, 0); } }
.sec-hero::after {
  background:
    radial-gradient(70% 90% at 100% 0%, rgba(var(--accent-rgb), .3), transparent 62%),
    linear-gradient(100deg, rgba(36, 0, 0, .95) 0%, rgba(54, 0, 0, .84) 46%, rgba(54, 0, 0, .4) 100%);
}
.sec-hero-glare { position: absolute; inset: -20% -40%; z-index: -1; pointer-events: none; background: linear-gradient(108deg, transparent 44%, rgba(255, 255, 255, .1) 50%, transparent 56%); transform: translateX(-60%); }
.js .sec-hero-glare { animation: psGlare 11s ease-in-out 1.2s infinite; }
.sec-hero .page-hero-inner { padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(3.6rem, 6vw, 5rem); width: min(100% - 2rem, 1220px); }
.sec-hero h1 { text-shadow: 0 2px 18px rgba(0, 0, 0, .45); }
.sec-hero .lede { color: #f4e8e8; max-width: 52ch; text-indent: 0; }
.sec-hero .eyebrow { color: #f6ad2a; }
.sec-hero .btn-row { margin-top: 1.2rem; }
.sec-hero .sec-curve { --curve-fill: var(--paper); }
@media (max-width: 700px) { .sec-hero::after { background: linear-gradient(180deg, rgba(36, 0, 0, .9), rgba(54, 0, 0, .86)); } }

.sec-figs { list-style: none; display: flex; flex-wrap: wrap; gap: .7rem 1rem; margin: 1.6rem 0 0; padding: 0; }
.sec-figs li { margin: 0; display: flex; flex-direction: column; padding: .55rem 1.1rem .6rem .9rem; border-left: 4px solid var(--accent); border-radius: 0 14px 14px 0; background: rgba(255, 255, 255, .1); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.sec-figs b { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1; color: #fff; }
.sec-figs span { color: #f1dede; font-size: .92rem; }

/* ======================================================================
   Wide picture with an overlapping card (home intro)
   ====================================================================== */
.sec-overlap { background: var(--paper) var(--noise); overflow: hidden; }
.sec-overlap-grid { display: grid; gap: 1.2rem; align-items: center; }
.sec-overlap-pic { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); transform: rotate(-1.2deg); }
.sec-overlap-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec-float-badge { position: absolute; left: 1rem; bottom: 1rem; z-index: 4; display: inline-flex; align-items: center; gap: .55rem; padding: .55rem 1rem .55rem .75rem; border-radius: 999px; background: var(--gold); color: #1a1206; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 10px 22px -6px rgba(0, 0, 0, .5); }
.sec-overlap-card { position: relative; z-index: 2; background: linear-gradient(180deg, #fff, #fdf8f1) padding-box, linear-gradient(135deg, #f6ad2a, #660000) border-box; border: 2px solid transparent; border-radius: var(--r-lg); padding: 1.5rem 1.4rem 1.6rem; box-shadow: var(--sh-lg); }
.sec-overlap-card h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
@media (min-width: 900px) {
  .sec-overlap-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; }
  .sec-overlap-card { margin-left: -4.5rem; padding: 2.3rem 2.5rem 2.4rem; }
}

/* ======================================================================
   Still-parallax photo bands (07 #40): a fixed layer clipped to the section, so phones work too
   ====================================================================== */
.px-band { position: relative; isolation: isolate; clip-path: inset(0); color: #fff; padding: clamp(3.2rem, 7vw, 6rem) 0; background: #1d0000; }
.px-bg { position: fixed; inset: 0; z-index: -2; }
.px-bg img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.px-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(34, 0, 0, .86), rgba(34, 0, 0, .52) 50%, rgba(34, 0, 0, .78)), radial-gradient(60% 60% at 15% 0, rgba(var(--accent-rgb), .22), transparent 70%); }
.px-inner { position: relative; }
.sec-head--onDark h2 { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.sec-head--onDark .blade-rule .hr-stripe { color: #fff; }

.glass-card {
  position: relative;
  background: linear-gradient(160deg, rgba(48, 6, 4, .74), rgba(30, 0, 0, .66));
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: var(--r-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 24px 50px -22px rgba(0, 0, 0, .75);
  color: #fff;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass-card { background: rgba(40, 0, 0, .9); } }

.sec-steps-list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.sec-steps-list li { margin: 0; padding: 1.1rem 1.4rem 1.5rem; overflow: hidden; }
.sec-step-n { display: block; font-family: var(--font-display); font-weight: 800; font-size: clamp(4.4rem, 12vw, 6.6rem); line-height: .85; color: #f6ad2a; text-shadow: 0 6px 22px rgba(246, 173, 42, .35); margin-bottom: .3rem; }
.sec-steps-list h3 { margin: 0 0 .35rem; font-size: 1.5rem; color: #fff; }
.sec-steps-list p { margin: 0; text-indent: 0; color: #fff; }
@media (min-width: 800px) {
  .sec-steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; }
  .sec-steps-list li:nth-child(2) { margin-top: 1.8rem; }
  .sec-steps-list li:nth-child(3) { margin-top: 3.6rem; }
}

/* ======================================================================
   Our work: text with a drop cap beside two overlapping photographs
   ====================================================================== */
.sec-work { background: var(--paper) var(--noise); overflow: hidden; }
.sec-work-grid { display: grid; gap: 2rem; align-items: center; }
.sec-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; padding: .6rem .3rem 1.4rem; }
.sec-pair figure { margin: 0; position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; border: 6px solid #fff; box-shadow: var(--sh-lg); }
.sec-pair figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 40%; transition: transform .9s ease; }
.sec-pair figure:hover img { transform: scale(1.06); }
.sec-pair-a { transform: rotate(-2.6deg) translateY(1.4rem); }
.sec-pair-b { transform: rotate(2.2deg); }
.sec-pair figcaption { position: absolute; left: .6rem; bottom: .6rem; z-index: 4; padding: .25rem .8rem; border-radius: 999px; background: var(--maroon); color: #fff; font-weight: 700; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 900px) {
  .sec-work-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .sec-pair { gap: 1.3rem; }
}

/* ======================================================================
   Brands: dark band with a moving name strip, glass columns and a call-out
   ====================================================================== */
.sec-brands { background: radial-gradient(70% 90% at 100% 0, rgba(var(--accent-rgb), .25), transparent 60%), linear-gradient(165deg, #5a0707 0%, #330000 70%, #260000 100%); color: #fff; padding-top: 0; --accent-ink: #f6ad2a; position: relative; overflow: hidden; }
.sec-brands::before { content: ""; position: absolute; inset: 0; background: var(--noise); opacity: .6; pointer-events: none; }
.sec-brands .wrap { position: relative; }
.sec-brands h2 { color: #fff; }
.sec-brands .blade-rule .hr-stripe { color: #fff; }
.sec-ribbon { position: relative; overflow: hidden; background: rgba(0, 0, 0, .32); border-bottom: 1px solid rgba(255, 255, 255, .14); padding: .85rem 0; margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }
.sec-ribbon-track { display: flex; gap: 2.2rem; width: max-content; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.sec-ribbon-track span { display: inline-flex; align-items: center; gap: 2.2rem; }
.sec-ribbon-track span::after { content: ""; width: .55rem; height: .55rem; background: #f6ad2a; transform: rotate(45deg); }
.js .sec-ribbon-track { animation: psRibbon 46s linear infinite; }
@keyframes psRibbon { to { transform: translateX(-50%); } }
.sec-brands-grid { display: grid; gap: 1.4rem; margin-top: 1.6rem; align-items: start; }
.sec-brand-cols { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
.sec-brand-col { padding: 1.1rem 1.2rem 1.25rem; border-top: 4px solid var(--c); background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); }
.sec-brand-col h3 { color: #fff; font-size: 1.3rem; margin: 0 0 .6rem; text-transform: uppercase; }
.sec-brand-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.sec-brand-col li { margin: 0; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); color: #fff; border-radius: 999px; padding: .22rem .8rem; font-weight: 700; font-size: .95rem; }
.sec-callout { border-radius: var(--r-lg); padding: 1.6rem 1.5rem; background: linear-gradient(165deg, #fbbf4a 0%, #e38a0c 100%); color: #1a1206; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--sh-lg); }
.sec-callout h3 { color: #1a1206; margin: 0 0 .5rem; font-size: 1.7rem; }
.sec-callout p { color: #1a1206; text-indent: 0; }
.sec-callout .btn-primary { background: var(--maroon); color: #fff; border-color: #3a0000; text-shadow: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 20px -8px rgba(0, 0, 0, .6); }
.sec-callout .btn-primary:hover { background: linear-gradient(180deg, #a01616, #5a0000); color: #fff; }
.sec-brand-note { margin: 1.2rem 0 0; font-size: .9rem; color: #f1dede; text-indent: 0; }
@media (min-width: 700px) { .sec-brand-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sec-brands-grid { grid-template-columns: 1fr 20rem; gap: 2.4rem; } .sec-brand-cols { grid-template-columns: 1fr; } }

/* ======================================================================
   Claims: diagonal split with a photo (home) and the plain dark band (about)
   ====================================================================== */
.sec-claims { background: radial-gradient(60% 90% at 0 0, rgba(var(--accent-rgb), .22), transparent 60%), linear-gradient(160deg, #4d0000, #2e0000); color: #fff; position: relative; overflow: hidden; --accent-ink: #f6ad2a; }
.sec-claims h2 { color: #fff; }
.sec-claims .lede { color: #f4e8e8; text-indent: 0; }
.sec-claims-grid { display: grid; gap: 1.2rem; align-items: center; }
.sec-claims-ic { display: inline-grid; place-items: center; width: 5.4rem; height: 5.4rem; border-radius: 50%; border: 3px solid var(--accent); color: #f6ad2a; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.sec-claims .btn-row { margin-top: .4rem; }
@media (min-width: 900px) { .sec-claims-grid { grid-template-columns: auto 1fr auto; gap: 2.2rem; } .sec-claims .btn-row { margin-top: 0; } }
.sec-claims--photo { padding: 0; }
.sec-claims-pic { position: relative; height: clamp(12rem, 46vw, 20rem); clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
.sec-claims-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec-claims--photo .sec-claims-grid { display: block; padding: 1.6rem 0 3rem; margin-top: -2.4rem; position: relative; }
.sec-claims-body .sec-claims-ic { display: grid; margin-bottom: 1rem; }
.sec-claims-body .btn-row { margin-top: 1.3rem; }
@media (min-width: 900px) {
  .sec-claims--photo { min-height: 30rem; }
  .sec-claims-pic { position: absolute; inset: 0 auto 0 0; width: 55%; height: auto; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); }
  .sec-claims--photo .sec-claims-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; padding: 4.2rem 0 4.4rem; }
  .sec-claims-body { grid-column: 2; padding-left: 2rem; }
}

/* ======================================================================
   Region panels (counties and town tiles)
   ====================================================================== */
.sec-areas { background: var(--cream) var(--noise); }
.sec-regions { display: grid; gap: 1.1rem; margin-top: 2.2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sec-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .sec-regions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sec-region { background: linear-gradient(170deg, #fff 0%, var(--c-soft) 100%); border-radius: var(--r); padding: 1.05rem 1.15rem 1.25rem; box-shadow: var(--sh-md); position: relative; overflow: hidden; }
.sec-region::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--c), #f6ad2a); }
.sec-region header { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .3rem 0 .8rem; }
.sec-region h3 { margin: 0; color: var(--c); font-size: 1.45rem; text-transform: uppercase; }
.sec-region ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sec-region li { margin: 0; min-width: 0; }
.sec-town { display: flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 12px; padding: .5rem .6rem; font-weight: 700; font-size: .95rem; color: #1b1b1b; text-decoration: none; min-height: 2.6rem; line-height: 1.15; box-shadow: 0 2px 5px -2px rgba(0, 0, 0, .15); }
.sec-town .sec-ic { color: var(--c); }
a.sec-town:hover, a.sec-town:focus-visible { background: var(--c); color: #fff; }
a.sec-town:hover .sec-ic, a.sec-town:focus-visible .sec-ic { color: #fff; }
@media (min-width: 640px) { .sec-region--wide { grid-column: span 2; } .sec-region--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* icons and discs */
.sec-ic { width: 1.35em; height: 1.35em; flex: none; }
.sec-ic--sm { width: 1.05rem; height: 1.05rem; }
.sec-ic--xl { width: 3.2rem; height: 3.2rem; }
.sec-disc { display: inline-grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--c, #1d4f91) 70%, #fff), var(--c, #1d4f91)); color: #fff; flex: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 16px -6px rgba(0, 0, 0, .4); }
@supports not (background: color-mix(in srgb, red 50%, white)) { .sec-disc { background: var(--c, #1d4f91); } }
.sec-disc .sec-ic { width: 1.7rem; height: 1.7rem; }
.sec-disc--xl { width: 5.2rem; height: 5.2rem; }
.sec-disc--xl .sec-ic { width: 2.7rem; height: 2.7rem; }
.sec-count { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: 999px; background: var(--c); color: #fff; font-weight: 800; font-size: .95rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ======================================================================
   Services page groups
   ====================================================================== */
.sec-group { background: linear-gradient(170deg, #fff 0%, var(--c-soft) 100%); border-radius: var(--r-lg); padding: 1.3rem 1.1rem 1.5rem; margin-top: 2.2rem; box-shadow: var(--sh-md); position: relative; overflow: hidden; border: 1px solid rgba(0, 0, 0, .05); }
.sec-group::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--c), #f6ad2a); }
.sec-group-head { display: flex; align-items: center; gap: .8rem; padding-top: .3rem; }
.sec-group-head h3 { margin: 0; color: var(--c); font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; }
.sec-group .sec-tiles { margin-top: 1.1rem; }
@media (min-width: 700px) { .sec-group { padding: 1.6rem 1.7rem 1.8rem; } }

/* ======================================================================
   Related photo strip on service pages: staggered boxes of one fixed shape
   ====================================================================== */
.sec-strip-sec { padding: clamp(1.4rem, 3vw, 2.2rem) 0 clamp(2.2rem, 4vw, 3.4rem); background: var(--paper) var(--noise); }
.sec-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
.sec-strip li { margin: 0; min-width: 0; }
.sec-strip-ph { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-md); border: 5px solid #fff; }
.sec-strip-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s ease; }
.sec-strip li:hover .sec-strip-img { transform: scale(1.07); }
@media (min-width: 700px) {
  .sec-strip--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .sec-strip--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
  .sec-strip li:nth-child(2) { margin-top: 1.6rem; }
  .sec-strip li:nth-child(4) { margin-top: 1.6rem; }
  .sec-strip--3 .sec-strip-ph, .sec-strip--4 .sec-strip-ph { aspect-ratio: 4 / 3; }
}

/* ======================================================================
   Service page: intro split (picture on the right, text first), long-form blocks
   ====================================================================== */
.split-media.framed { position: relative; }
.split-media .frame-shot { border-radius: var(--r-lg); box-shadow: var(--sh-lg); aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.sec-block { display: grid; gap: 1rem 3rem; align-items: start; }
.sec-block .sec-head { max-width: none; }
.sec-block .guide-body { max-width: 62ch; }
@media (min-width: 900px) { .sec-block { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); } .sec-block .sec-head { position: sticky; top: calc(var(--nav-off) + 1.5rem); } }
.svc-guide.section--cream .sec-block .guide-body { padding: 1.4rem 1.5rem; background: #fff; border-radius: var(--r); box-shadow: var(--sh-sm); }
.checklist li { background: linear-gradient(90deg, rgba(var(--accent-rgb), .09), transparent); border-radius: 10px; padding: .35rem .6rem; }

.sec-panel { background: linear-gradient(170deg, #fff, var(--c-soft)); border-radius: var(--r-lg); border-top: 8px solid var(--c); padding: 2rem 1.6rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .3rem; box-shadow: var(--sh-md); }
.sec-panel-k { margin: .8rem 0 0; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--c); text-indent: 0; }
.sec-panel-h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.2rem); line-height: 1.1; color: #1b1b1b; text-indent: 0; }
.sec-panel-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .5rem; text-align: left; }
.sec-panel-list li { margin: 0; display: flex; gap: .55rem; align-items: center; color: #1b1b1b; font-weight: 600; }
.sec-panel-list a { color: #1b1b1b; }
.sec-panel-list .sec-ic { color: var(--c); }

/* ======================================================================
   About
   ====================================================================== */
.sec-about-grid { display: grid; gap: 1.8rem; align-items: start; }
.sec-about-side { display: grid; gap: 1.2rem; }
.sec-about-pic { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-lg); border: 6px solid #fff; transform: rotate(1.4deg); }
.sec-about-pic img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sec-glance { background: linear-gradient(180deg, #fff, #fbf4ea) padding-box, linear-gradient(135deg, #f6ad2a, #660000) border-box; border: 2px solid transparent; border-radius: var(--r-lg); padding: 1.2rem 1.3rem; box-shadow: var(--sh-md); }
.sec-glance h3 { margin: 0 0 .6rem; }
.sec-glance dl { margin: 0; }
.sec-glance dl > div { padding: .6rem 0; border-top: 1px solid var(--line); }
.sec-glance dt { font-weight: 800; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.sec-glance dd { margin: .1rem 0 0; font-size: 1rem; }
@media (min-width: 900px) { .sec-about-grid { grid-template-columns: 1.4fr .85fr; gap: 3rem; } .sec-about-side { position: sticky; top: calc(var(--nav-off) + 1.5rem); } }
.sec-principles { display: grid; gap: 1.1rem; margin-top: 2rem; }
.sec-principle { background: linear-gradient(180deg, #fff, #fdf8f1); border-radius: var(--r-lg); padding: 1.4rem 1.4rem 1.5rem; box-shadow: var(--sh-md); position: relative; overflow: hidden; }
.sec-principle::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: linear-gradient(90deg, var(--c), #f6ad2a); }
.sec-principle h3 { margin: .8rem 0 .4rem; }
.sec-principle p { margin: 0; text-indent: 0; }
@media (min-width: 800px) { .sec-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec-principle:nth-child(2) { margin-top: 1.6rem; } }
.sec-pull { text-align: center; padding: clamp(3.2rem, 8vw, 6rem) 0; }
.sec-pull-text { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 4.8vw, 3.2rem); line-height: 1.08; max-width: 22ch; margin: 0 auto; text-wrap: balance; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); text-indent: 0; }
.sec-pull-text::before { content: ""; display: block; width: 4rem; height: 5px; background: var(--gold); margin: 0 auto 1.1rem; border-radius: 3px; }
.sec-pull-note { color: #fff; margin: 1rem 0 0; font-size: 1.02rem; text-indent: 0; }
.sec-next { display: grid; gap: 1.1rem; }
.sec-next .pc--full { aspect-ratio: 16 / 10; }
@media (min-width: 760px) { .sec-next { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec-next .pc--full { aspect-ratio: 4 / 5; } }
.pc-sub { display: block; margin: .3rem 0 0; font-size: .96rem; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* help band (services, service areas): glass card over a still photo */
.sec-help { display: grid; gap: 1.2rem; align-items: center; padding: 1.5rem 1.4rem; }
.sec-help h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-bottom: .3em; color: #fff; }
.sec-help .eyebrow { color: #f6ad2a; }
.sec-help .lede { margin: 0; color: #fff; text-indent: 0; }
.sec-help .lede a { color: #ffd58a; }
.sec-help .btn-row { margin-top: 0; }
@media (min-width: 900px) { .sec-help { grid-template-columns: auto 1fr auto; gap: 2rem; padding: 1.9rem 2.2rem; } }
.sec-help .btn-ghost { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); border-color: rgba(255, 255, 255, .7); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); }
.sec-help .btn-ghost:hover { background: #fff; color: var(--brand-deep); }
.sec-help .btn-brand { background: var(--gold); color: #1a1206; border-color: #b86505; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.sec-help .btn-brand:hover { background: linear-gradient(180deg, #fbbd4a, #de7d08); color: #1a1206; }

/* ======================================================================
   Gallery
   ====================================================================== */
.sec-gallery { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; margin-inline: 0; }
@media (min-width: 900px) { .sec-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; } }
.sec-gallery figure { margin: 0; position: relative; aspect-ratio: 3 / 4; border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-md); border: 5px solid #fff; background: #2c0000; }
.sec-gallery figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; aspect-ratio: auto; transition: transform .9s ease; }
.sec-gallery figure:hover img { transform: scale(1.07); }
.sec-gallery figcaption { position: absolute; inset: auto 0 0 0; padding: 3rem .8rem .75rem; background: linear-gradient(180deg, rgba(30, 0, 0, 0) 0%, rgba(30, 0, 0, .9) 50%, rgba(30, 0, 0, .96) 100%); color: #fff; font-weight: 600; font-size: .95rem; margin: 0; text-align: left; }
.sec-gallery figure:nth-child(4n + 2), .sec-gallery figure:nth-child(4n + 4) { transform: translateY(1rem); }
.sec-gallery-note { text-align: center; max-width: 40rem; margin: 2.4rem auto 0; color: var(--muted); text-indent: 0; }
.sec-gallery-flag { display: inline-block; font-size: .85rem; color: var(--muted); }

/* ======================================================================
   Contact and forms
   ====================================================================== */
.sec-howto { margin-top: 1.5rem; background: linear-gradient(180deg, #fff, #fdf8f1); border: 1px solid var(--line); border-left: 6px solid var(--accent); border-radius: var(--r); padding: 1.1rem 1.3rem; box-shadow: var(--sh-sm); }
.sec-howto h3 { margin: 0 0 .5rem; }
.sec-howto ol { margin: 0; padding-left: 1.3rem; }
.sec-howto li { margin: 0 0 .3rem; }
.info-card, .contact-form { border-radius: var(--r-lg); box-shadow: var(--sh-md); }
.field input, .field select, .field textarea { border-radius: 12px; }

/* ======================================================================
   Jingle panel (engine component), made a showpiece
   ====================================================================== */
.jingle { background: radial-gradient(70% 100% at 0 0, rgba(var(--accent-rgb), .25), transparent 60%), linear-gradient(160deg, #4d0000, #2a0000) !important; color: #fff; }
.jingle .jingle-card { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); border: 1px solid rgba(255, 255, 255, .28); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 28px 60px -26px rgba(0, 0, 0, .8); border-radius: var(--r-lg); color: #fff; }
.jingle .jingle-body h2, .jingle .jingle-body p { color: #fff; }
.jingle .tag { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); color: #fff; }
.jingle .jingle-icon { background: var(--gold); color: #1a1206; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 8px rgba(246, 173, 42, .18), 0 0 0 18px rgba(246, 173, 42, .08); }
.js .jingle .jingle-icon { animation: psPulse 3.2s ease-in-out infinite; }
@keyframes psPulse { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 12px rgba(246, 173, 42, .2), 0 0 0 26px rgba(246, 173, 42, .05); } }

/* ======================================================================
   Photo-backed call to action (engine ps_cta_band markup)
   ====================================================================== */
.cta-band.folded {
  background: #1d0000;
  clip-path: inset(0);
  border-top: 0;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.cta-band.folded::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #1d0000 url("/assets/images/scenic-night-stars-1200.webp") center / cover no-repeat;
}
.cta-band.folded::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(34, 0, 0, .92) 0%, rgba(60, 4, 0, .8) 55%, rgba(var(--accent-rgb), .45) 130%); }
.cta-band.folded, .cta-band.folded h2, .cta-band.folded p, .cta-band.folded .eyebrow { color: #fff; }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.2rem); text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.cta-band .tag--onAccent { color: #fff; border-color: rgba(255, 255, 255, .4); background: rgba(255, 255, 255, .12); }
.cta-band .tag--onAccent::before { background: #f6ad2a; }
.cta-band .btn-on-dark { color: #fff; border-color: rgba(255, 255, 255, .75); background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); }
.cta-band .btn-on-dark:hover { background: #fff; color: var(--brand-deep); }
.cta-band .btn-primary { background: var(--gold); color: #1a1206; border-color: #b86505; }
.cta-band .btn-primary:hover { background: linear-gradient(180deg, #fbbd4a, #de7d08); color: #1a1206; border-color: #b86505; }

/* ======================================================================
   Footer: deeper gradient, amber rule across the top
   ====================================================================== */
.site-footer { background: radial-gradient(60% 80% at 100% 0, rgba(var(--accent-rgb), .16), transparent 60%), linear-gradient(180deg, #3a0000 0%, #260000 100%); position: relative; }
.site-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #660000, #f6ad2a 30%, #d97706 70%, #660000); }

/* ======================================================================
   Reduced motion: the calm version (fades only, nothing hidden) (07 #17, #42)
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .rm-respect .pc, .rm-respect .btn, .rm-respect .btn-call { transition: none; }
  .rm-respect .pc:hover, .rm-respect .pc:focus-within, .rm-respect .btn:hover, .rm-respect .btn-call:hover { transform: none; }
  .rm-respect .pc-sheen, .rm-respect .btn::after, .rm-respect .btn-call::after, .rm-respect .hero-glare, .rm-respect .sec-hero-glare { display: none; }
  .rm-respect .landing-slide, .rm-respect .sec-hero .page-hero-media img, .rm-respect .sec-ribbon-track, .rm-respect .jingle-icon { animation: none !important; }
  .rm-respect .hero--glass .landing-slide[data-roll] { clip-path: none !important; transition: opacity 1.4s ease !important; }
  .rm-respect .hero--glass .landing-slide[data-roll].is-prev { opacity: 1; }
  .rm-respect .hero--glass .hero-logo, .rm-respect .hero--glass .hero-glass, .rm-respect .hero--glass .hero-facts { animation: none; }
  .rm-respect .pc:hover .pc-img, .rm-respect .sec-strip li:hover .sec-strip-img, .rm-respect .sec-pair figure:hover img, .rm-respect .sec-gallery figure:hover img { transform: none; }
  .rm-respect .sec-overlap-pic, .rm-respect .sec-pair-a, .rm-respect .sec-pair-b, .rm-respect .sec-about-pic { transform: none; }
}

/* 404 number: large decorative text still has to reach 3:1 (axe) */
.notfound-code { color: #7a746a; }

/* the Billing Center button in the open mobile menu: engine link colour out-ranks the button's own white (dark maroon on maroon) */
.nav-mobile .btn-portal, .nav-mobile .btn-portal:hover, .nav-mobile-foot .btn-portal, .nav-mobile-foot .btn-portal:hover { color: #fff; }

/* cards that are links (About next steps) and the title line inside a photo card */
a.pc { display: block; color: #fff; text-decoration: none; }
.pc-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.5vw, 1.65rem); line-height: 1.08; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
a.pc:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pc-text .sec-more { display: inline-flex; }

/* drop caps (07 #126): a tighter gap between the big letter and the line */
.prose--cap > p.lede::first-letter, .prose--cap > .blade-rule + p::first-letter, .prose--cap > h2 + p::first-letter { margin-right: .06em; }

/* small screens: the link line under a photo card stays on one line */
@media (max-width: 560px) {
  .pc--full .sec-more { font-size: .82rem; margin-top: .25rem; }
  .pc--full .sec-more .sec-ic { display: none; }
}

/* ======================================================================
   City pages (/rv-repair-<town>-al): photo banner (sec_page_hero), then the engine's four layouts in the town's own pastel
   accent.  --cp-accent is a pastel; --cp-ink is the same hue darkened until it is at least 5:1 on the accent and on white.
   ====================================================================== */
.cp { --cp-card: #fff; }
.cp .cp-h { font-size: clamp(1.5rem, 3.2vw, 2.05rem); margin: 0 0 1rem; color: var(--ink); }
.cp .cp-h::after, .cp .prose h2::after { content: ""; display: block; width: 3.6rem; height: 5px; border-radius: 5px; background: linear-gradient(90deg, var(--cp-ink), #f6ad2a); margin-top: .5rem; }
.cp .prose > h2 { margin-top: 0; }
.cp .sec-hero .sec-figs li:first-child b { white-space: nowrap; }

/* opening, with a framed picture beside it */
.cp-opening-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .cp-opening--photo .cp-opening-grid { grid-template-columns: 1.3fr .9fr; } .cp--questions .cp-opening-grid { grid-template-columns: .9fr 1.3fr; } .cp--questions .cp-opening-grid .cp-photo { order: -1; } }
.sec-cp-pic { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-lg); box-shadow: var(--sh-lg); border: 1px solid rgba(255, 255, 255, .6); }
.sec-cp-pic img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.cp-photo--wide img { aspect-ratio: 21 / 8; }
.cp-photos .wrap { max-width: 1100px; }

/* route layout: the drive card */
.cp-route-grid { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .cp-route-grid { grid-template-columns: 1.4fr .8fr; } }
.cp-drive { background: linear-gradient(165deg, #fff 0%, var(--cp-accent) 100%); border-radius: var(--r-lg); padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--sh-md); border: 1px solid rgba(0, 0, 0, .06); border-top: 6px solid var(--cp-ink); color: #241a16; }
.cp-drive p { text-indent: 0; margin: 0 0 .7rem; }
.cp-drive-kicker { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .78rem; color: var(--cp-ink); }
.cp-drive-big { font-size: 1.3rem; font-weight: 700; line-height: 1.3; font-family: var(--font-display); }
.cp-drive-phones a { font-weight: 800; font-size: 1.2rem; color: #241a16; }
.cp-drive-note { font-size: .92rem; color: #3b302b; }
.cp-drive .src-ref a { color: #3b302b; }

/* facts */
.cp-facts { background: var(--cp-accent); }
.cp-facts .cp-h { color: #241a16; }
.cp-facts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.cp-facts--strip .cp-facts-list { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.cp-facts--strip li { background: #fff; border-left: 6px solid var(--cp-ink); padding: .95rem 1.1rem; border-radius: 4px 16px 16px 4px; box-shadow: var(--sh-sm); }
.cp-facts--cards .cp-facts-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cp-facts--cards li { background: #fff; border-radius: 18px; padding: 1.15rem 1.25rem; display: flex; gap: .9rem; align-items: flex-start; box-shadow: var(--sh-md); border: 1px solid rgba(0, 0, 0, .05); }
.cp-num { flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--cp-accent); color: var(--cp-ink); border: 2px solid var(--cp-ink); }
.cp-facts-list p { margin: 0; text-indent: 0; color: #241a16; }

/* questions */
.cp-qa-note { color: var(--muted); font-size: .92rem; margin: -.3rem 0 1.2rem; text-indent: 0; }
.cp-qa-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.cp-q { background: linear-gradient(170deg, #fff, #fff 55%, var(--cp-accent) 190%); border: 1px solid var(--line); border-top: 6px solid var(--cp-ink); border-radius: var(--r); padding: 1.25rem 1.35rem; box-shadow: var(--sh-sm); }
.cp-q h3 { font-size: 1.12rem; margin: 0 0 .55rem; color: var(--ink); }
.cp-q p { text-indent: 0; margin: 0 0 .6rem; }
.cp-qa-details { display: grid; gap: .75rem; max-width: 920px; }
.cp-qa-details details { background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--cp-ink); border-radius: 12px; box-shadow: var(--sh-sm); }
.cp-qa-details details[open] { background: linear-gradient(170deg, #fff, var(--cp-accent) 260%); }
.cp-qa-details summary { cursor: pointer; padding: 1rem 1.2rem; font-weight: 700; font-size: 1.06rem; list-style-position: inside; color: var(--ink); }
.cp-qa-details summary:focus-visible { outline: 3px solid var(--cp-ink); outline-offset: 2px; }
.cp-qa-a { padding: 0 1.2rem 1.1rem; }
.cp-qa-a p { text-indent: 0; margin: 0 0 .55rem; }
.cp-more { font-weight: 700; color: var(--accent-ink); text-underline-offset: 3px; }

/* what we can help with: link cards to the service pages */
.cp-help { background: var(--cream) var(--noise); }
.cp-help-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cp-help-card { display: flex; flex-direction: column; gap: .4rem; background: #fff; border-radius: var(--r); padding: 1.2rem 1.3rem 1.1rem; text-decoration: none; color: var(--ink); box-shadow: var(--sh-md); border: 1px solid rgba(0, 0, 0, .05); border-bottom: 6px solid var(--cp-ink); transition: transform .25s ease, box-shadow .25s ease; }
.cp-help-card strong { font-size: 1.1rem; color: var(--ink); }
.cp-help-card span { color: var(--muted); font-size: .96rem; }
.cp-help-card .cp-help-more { margin-top: auto; padding-top: .4rem; font-weight: 800; color: var(--accent-ink); }
.cp-help-card .cp-help-more::after { content: " \2192"; }
.cp-help-card:hover, .cp-help-card:focus-visible { transform: translateY(-4px); box-shadow: var(--sh-lg); color: var(--ink); }
.cp-help-card:focus-visible { outline: 3px solid var(--cp-ink); outline-offset: 3px; }

/* nearby towns */
.cp-near-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cp-near-list li > a, .cp-near-list li > span { display: block; height: 100%; background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--cp-ink); border-radius: 4px 14px 14px 4px; padding: .7rem .95rem; text-decoration: none; color: var(--ink); box-shadow: var(--sh-sm); }
.cp-near-list strong { display: block; font-size: 1.05rem; }
.cp-near-list em { font-style: normal; font-size: .9rem; color: var(--muted); }
.cp-near-list a strong { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cp-near-list a:hover, .cp-near-list a:focus-visible { background: var(--cp-accent); }
.cp-near-list a:focus-visible { outline: 3px solid var(--cp-ink); outline-offset: 2px; }

/* closing band */
.cp-cta { background: linear-gradient(160deg, #fff 0%, var(--cp-accent) 100%); border-top: 6px solid var(--cp-ink); }
.cp-cta-inner { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: center; justify-content: space-between; }
.cp-cta h2 { margin: 0 0 .3rem; color: #241a16; }
.cp-cta p { margin: 0; text-indent: 0; color: #241a16; max-width: 56ch; }
.cp-btn-ghost { background: #fff; color: #241a16; border: 2px solid var(--cp-ink); }
.cp-btn-ghost:hover, .cp-btn-ghost:focus-visible { background: var(--cp-ink); color: #fff; }
.cp .src-ref a { text-decoration: underline; }
.rm-respect .cp-help-card { transition: none; }
.rm-respect .cp-help-card:hover { transform: none; }

/* Towns that have their own page are links in the county panels (home page and Service Areas): coloured text with an arrow, a hover fill and a focus ring.
   Towns without a page stay plain chips. */
a.sec-town { border-color: var(--c); color: var(--c); font-weight: 800; position: relative; padding-right: 1.9rem; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease; }
a.sec-town::after { content: ""; position: absolute; right: .75rem; top: 50%; width: .5rem; height: .5rem; border: solid currentColor; border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
a.sec-town span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a.sec-town:hover, a.sec-town:focus-visible { background: var(--c); color: #fff; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .45); transform: translateY(-2px); }
a.sec-town:focus-visible { outline: 3px solid #1b1b1b; outline-offset: 2px; }
span.sec-town { color: #4a403a; background: rgba(255, 255, 255, .6); font-weight: 600; }
span.sec-town .sec-ic { color: #4a403a; opacity: .75; }
.rm-respect a.sec-town { transition: none; }
.rm-respect a.sec-town:hover { transform: none; }

/* Town tiles: road miles in the directory, shorter tiles on the home page (65 towns stay visible, every linked town one click away) */
.sec-town .sec-mi { margin-left: auto; padding-left: .4rem; font-size: .78rem; font-weight: 600; white-space: nowrap; color: #4a403a; }
a.sec-town .sec-mi { color: #4a403a; padding-right: .5rem; }
a.sec-town:hover .sec-mi, a.sec-town:focus-visible .sec-mi { color: #fff; }
.sec-regions--compact { gap: .9rem; }
.sec-regions--compact .sec-region { padding: .8rem .9rem 1rem; }
.sec-regions--compact .sec-region h3 { font-size: 1.15rem; }
.sec-regions--compact .sec-count { min-width: 1.7rem; height: 1.7rem; font-size: .85rem; }
.sec-regions--compact .sec-region ul { gap: .35rem; }
.sec-regions--compact .sec-town { min-height: 2.2rem; padding: .3rem .5rem; font-size: .88rem; border-radius: 10px; }
.sec-regions--compact a.sec-town { padding-right: 1.5rem; }
.sec-regions--compact a.sec-town::after { right: .55rem; width: .42rem; height: .42rem; }
@media (min-width: 1000px) { .sec-regions--compact .sec-region--wide ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ======================================================================
   Jingle player: live equalizer, bass-pulsing icon, glowing card (Chad, 2026-11-13); drawn by assets/js/jingle.js
   ====================================================================== */
.jingle .jingle-card { position: relative; transition: box-shadow .4s ease; }
.jingle-eq { grid-column: 1 / -1; display: block; width: 100%; height: 150px; margin-top: .4rem; border-radius: 14px; background: radial-gradient(80% 120% at 50% 100%, rgba(246, 173, 42, .10), transparent 70%), rgba(20, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 30px rgba(0, 0, 0, .4); }
.jingle .jingle-card.is-playing { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 28px 60px -26px rgba(0, 0, 0, .8), 0 0 calc(24px + var(--energy, 0) * 110px) rgba(246, 173, 42, calc(.10 + var(--energy, 0) * .5)); }
.js .jingle .jingle-card.is-playing .jingle-icon { animation: none; transform: scale(calc(1 + var(--bass, 0) * .30)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 calc(8px + var(--bass, 0) * 22px) rgba(246, 173, 42, calc(.28 - var(--bass, 0) * .12)), 0 0 0 calc(18px + var(--bass, 0) * 46px) rgba(224, 58, 30, calc(.12 + var(--bass, 0) * .12)); }
.jingle .jingle-card.is-playing .tag::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: #ff4d2e; box-shadow: 0 0 0 0 rgba(255, 77, 46, .7); animation: psLive 1.2s ease-out infinite; vertical-align: middle; }
@keyframes psLive { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 46, .7); } 100% { box-shadow: 0 0 0 .55rem rgba(255, 77, 46, 0); } }
@media (max-width: 560px) { .jingle-eq { height: 120px; } }

/* ======================================================================
   Magazine banners (Chad, 2026-11-13): every inner page gets its own colour pair, angle and layout, like the cover of a glossy
   magazine.  Colours come from config banner_themes (or the town's own hash for city pages) and can be changed per page in the
   Visual Editor (Banner colours: first colour, second colour, strength, direction).  Five looks: wash, duo, split, spot, band.
   --bn-c1 dark side colour, --bn-c2 bright accent, --bn-o strength 0..1, --bn-a direction in degrees.
   ====================================================================== */
.sec-hero { --bn-c1: #660000; --bn-c2: #d97706; --bn-o: .8; --bn-a: 115deg; position: relative; isolation: isolate; min-height: clamp(20rem, 36vw, 29rem); background: #120505; }
.sec-hero .page-hero-media { z-index: -2; }
.sec-hero .page-hero-media img { object-position: 50% 42%; filter: saturate(1.15) contrast(1.06) brightness(.92); }
/* colour wash over the picture: the page's first and second colour, blended into the photo */
.sec-hero .page-hero-media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(var(--bn-a), var(--bn-c1) 0%, var(--bn-c1) 28%, var(--bn-c2) 100%); opacity: var(--bn-o); mix-blend-mode: multiply; }
/* a bright pool of the second colour in the upper right, like stage light */
.sec-hero .page-hero-media::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(55% 85% at 92% 6%, var(--bn-c2), transparent 68%); opacity: calc(var(--bn-o) * .62); mix-blend-mode: screen; }
/* gloss highlight, reading scrim and floor shadow */
.sec-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background:
    linear-gradient(172deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .06) 22%, rgba(255, 255, 255, 0) 38%),
    linear-gradient(96deg, rgba(8, 0, 0, .88) 0%, rgba(8, 0, 0, .7) 46%, rgba(8, 0, 0, .14) 84%),
    linear-gradient(180deg, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0) 30%),
    linear-gradient(0deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 42%); }
.sec-hero .page-hero-inner { position: relative; z-index: 1; padding: clamp(2.6rem, 6vw, 4.6rem) 0 clamp(4rem, 7vw, 5.6rem); }
.sec-hero .eyebrow { display: inline-block; margin: 0 0 1rem; padding: .34rem .85rem; border-radius: 999px; background: var(--bn-c2); color: #12100c; font-weight: 800; letter-spacing: .12em; font-size: .78rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .55); }
.sec-hero h1 { color: #fff; font-size: clamp(2.7rem, 6.6vw, 5.2rem); line-height: .95; letter-spacing: -.012em; text-transform: uppercase; max-width: 15ch; text-shadow: 0 3px 22px rgba(0, 0, 0, .55); }
.sec-hero h1::after { content: ""; display: block; width: clamp(5rem, 11vw, 8rem); height: .42rem; margin-top: 1rem; border-radius: 4px; background: linear-gradient(90deg, var(--bn-c2), rgba(255, 255, 255, .0)); box-shadow: 0 0 22px var(--bn-c2); }
.sec-hero .lede { color: #fff; max-width: 50ch; font-size: clamp(1.04rem, 1.5vw, 1.22rem); text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
/* huge outlined name of the page, half hidden at the lower right, the way a cover prints the issue */
.sec-hero .page-hero-inner::before { content: attr(data-mark); position: absolute; right: -.5rem; bottom: -.28em; z-index: -1; max-width: 100%; overflow: hidden; font-family: var(--font-display); font-weight: 800; font-size: clamp(5.5rem, 15vw, 12.5rem); line-height: .8; letter-spacing: -.02em; text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, .26); pointer-events: none; }
@media (max-width: 760px) { .sec-hero .page-hero-inner::before { display: none; } .sec-hero h1 { max-width: none; } }

/* ---- look 1: wash is the default above ---- */

/* ---- look 2: duo, a two-colour print of a black-and-white photograph ---- */
.sec-hero[data-bn-style="duo"] .page-hero-media img { filter: grayscale(1) contrast(1.25) brightness(1.08); }
.sec-hero[data-bn-style="duo"] .page-hero-media::before { opacity: max(var(--bn-o), .9); background: linear-gradient(var(--bn-a), var(--bn-c1) 0%, color-mix(in srgb, var(--bn-c1) 35%, var(--bn-c2)) 55%, var(--bn-c2) 100%); }
.sec-hero[data-bn-style="duo"] .page-hero-media::after { opacity: calc(var(--bn-o) * .42); }

/* ---- look 3: split, a solid colour panel with a slanted edge, the picture running on the right ---- */
.sec-hero[data-bn-style="split"] .page-hero-media::before { opacity: calc(var(--bn-o) * .3); }
.sec-hero[data-bn-style="split"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; clip-path: polygon(0 0, 66% 0, 50% 100%, 0 100%);
  background: linear-gradient(var(--bn-a), var(--bn-c1) 0%, color-mix(in srgb, var(--bn-c1) 78%, var(--bn-c2)) 100%); opacity: calc(.7 + var(--bn-o) * .3); box-shadow: 0 0 40px rgba(0, 0, 0, .5); }
.sec-hero[data-bn-style="split"]::after { background:
    linear-gradient(172deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 34%),
    linear-gradient(0deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0) 40%); }
.sec-hero[data-bn-style="split"] .page-hero-media img { object-position: 78% 42%; }

/* ---- look 4: spot, a dim moody picture with two coloured spotlights ---- */
.sec-hero[data-bn-style="spot"] .page-hero-media img { filter: brightness(.58) saturate(.9) contrast(1.1); }
.sec-hero[data-bn-style="spot"] .page-hero-media::before { opacity: calc(var(--bn-o) * .55); background: linear-gradient(var(--bn-a), var(--bn-c1), var(--bn-c1)); }
.sec-hero[data-bn-style="spot"] .page-hero-media::after { opacity: calc(var(--bn-o) * .95); background: radial-gradient(45% 80% at 86% 14%, var(--bn-c2), transparent 70%), radial-gradient(60% 90% at 4% 105%, var(--bn-c1), transparent 70%); }

/* ---- look 5: band, the picture in full colour with the headline on a colour floor along the bottom ---- */
.sec-hero[data-bn-style="band"] { align-items: flex-end; }
.sec-hero[data-bn-style="band"] .page-hero-media::before { opacity: calc(var(--bn-o) * .3); mix-blend-mode: soft-light; }
.sec-hero[data-bn-style="band"] .page-hero-media::after { opacity: calc(var(--bn-o) * .3); }
.sec-hero[data-bn-style="band"]::after { background:
    linear-gradient(172deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 30%),
    linear-gradient(96deg, rgba(8, 0, 0, .72) 0%, rgba(8, 0, 0, .46) 55%, rgba(8, 0, 0, 0) 90%),
    linear-gradient(0deg, var(--bn-c1) 0%, color-mix(in srgb, var(--bn-c1) 88%, transparent) 34%, color-mix(in srgb, var(--bn-c1) 46%, transparent) 66%, transparent 94%); }
.sec-hero[data-bn-style="band"] .page-hero-inner { padding-top: clamp(5rem, 11vw, 9rem); }

/* the kicker pill and the cut-off edge follow the page colour */
.sec-hero .sec-curve { --curve-fill: var(--paper); }
@media (max-width: 760px) {
  .sec-hero::after { background: linear-gradient(172deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 30%), linear-gradient(180deg, rgba(8, 0, 0, .74), rgba(8, 0, 0, .7)); }
  .sec-hero[data-bn-style="split"]::before { clip-path: none; opacity: .66; }
  .sec-hero[data-bn-style="band"]::after { background: linear-gradient(0deg, var(--bn-c1) 0%, color-mix(in srgb, var(--bn-c1) 70%, transparent) 55%, rgba(0, 0, 0, .35) 100%); }
}