/* Shared SR brand, 2026-09-05. Load after each template's own styles.
   The mark is the owner's untouched JPEG; its white canvas is framed in CSS.
   No image filter, recoloring, stretching, or replacement artwork is used. */
:root {
  --sr-burgundy: #7b2337;
  --sr-burgundy-dark: #5a1a29;
  --sr-cream: #faf8f5;
  --sr-ink: #1a1a1a;
  --sr-muted: #4a4a4a;
  --sr-line: #ded6d0;
  --sr-font-display: 'Fraunces', Georgia, serif;
  --sr-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body[data-sr-brand] { font-family: var(--sr-font-body); }
body[data-sr-brand] h1, body[data-sr-brand] h2 { font-family: var(--sr-font-display); }
.sr-home-brand { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.sr-brandmark {
  position: relative; display: block; flex: none; width: 108px; height: 72px;
  overflow: hidden; background: #fff; border-radius: 2px;
}
/* Full source is 1248 x 832, including a generous white border. The centered
   228% frame leaves a small white margin around every part of the real mark. */
.sr-brandmark img {
  position: absolute !important; display: block !important; visibility: visible !important;
  opacity: 1 !important; width: 228% !important; max-width: none !important;
  height: auto !important; max-height: none !important; left: 50%; top: 50%;
  transform: translate(-50%, -50%) !important; object-fit: contain; filter: none !important;
}
.sr-home-brand:focus-visible, .sr-portfolio-header a:focus-visible {
  outline: 3px solid var(--sr-burgundy); outline-offset: 4px;
}
/* Main-site bundles hide logo images and add a mobile text replacement.
   Scope the exception to anchors migrated to this real-artwork component. */
body[data-sr-brand] .nav__logo.sr-home-brand {
  display: inline-flex !important; flex: 0 0 auto !important; gap: 0 !important;
  min-width: 0 !important; max-width: none !important; width: auto !important;
  overflow: visible !important; font-size: 0 !important;
}
body[data-sr-brand] .nav__logo.sr-home-brand::before,
body[data-sr-brand] .nav__logo.sr-home-brand::after { content: none !important; display: none !important; }
body[data-sr-brand] .nav__logo .sr-brandmark { width: 72px; height: 48px; }
/* Header actions share the trade/portfolio burgundy. Existing form styling
   and submit behavior are outside this header-only rule. */
body[data-sr-brand] .nav .nav__cta,
body[data-sr-brand] .nav__mobile-ctas .btn {
  background: var(--sr-burgundy) !important; color: #fff !important;
  border-color: var(--sr-burgundy) !important; box-shadow: none !important;
}
body[data-sr-brand] .nav .nav__cta:hover,
body[data-sr-brand] .nav__mobile-ctas .btn:hover { background: var(--sr-burgundy-dark) !important; }

/* Portfolio retains its links, filters and project markup. Only presentation
   is normalized; image provenance and project claims belong to the media pass. */
.sr-portfolio-page { background: var(--sr-cream) !important; color: var(--sr-ink); }
.sr-portfolio-header {
  position: sticky; top: 0; z-index: 100; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 8px clamp(16px, 4vw, 48px);
  background: #fff; border-bottom: 1px solid var(--sr-line);
}
.sr-portfolio-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sr-portfolio-header nav a { color: var(--sr-muted); text-decoration: none; font-weight: 500; }
.sr-portfolio-header nav a[aria-current="page"] { color: var(--sr-burgundy); font-weight: 700; }
.sr-portfolio-header nav a:hover { color: var(--sr-burgundy); text-decoration: underline; }
.sr-portfolio-page .portfolio-hero { padding: 64px 24px; background: var(--sr-burgundy-dark); }
.sr-portfolio-page .portfolio-hero h1 { color: #fff; }
.sr-portfolio-page .portfolio-hero p { color: #f4e9e9; }
.sr-portfolio-page .project-card.dark { background: var(--sr-burgundy-dark); }
.sr-portfolio-page .project-card.dark .comparison-label,
.sr-portfolio-page .project-card.dark .project-meta,
.sr-portfolio-page .project-card.dark .project-info p { color: #f4e9e9; }
.sr-portfolio-page .cta-section { background: #fff; color: var(--sr-ink); }
.sr-portfolio-page .cta-button { background: var(--sr-burgundy); color: #fff; }
.sr-portfolio-page .cta-button:hover { background: var(--sr-burgundy-dark); box-shadow: 0 6px 20px #7b233726; }
.sr-portfolio-page .filter-btn { border-color: var(--sr-burgundy); color: var(--sr-burgundy); }
.sr-portfolio-page .filter-btn:hover, .sr-portfolio-page .filter-btn.active { background: var(--sr-burgundy); color: #fff; }
.sr-portfolio-page .filter-btn:focus-visible { outline-color: var(--sr-burgundy); }
.sr-portfolio-page .portfolio-empty a { color: var(--sr-burgundy); }

/* The first-visit sound has no visible control band or reserved gap. */
[data-jingle], .sr-jingle-band { display: none !important; }
@media (max-width: 640px) {
  .sr-portfolio-header { gap: 8px 16px; flex-wrap: wrap; padding: 6px 16px 10px; }
  .sr-portfolio-header .sr-brandmark { width: 90px; height: 60px; }
  .sr-portfolio-header nav { gap: 16px; width: 100%; font-size: 14px; }
  .sr-portfolio-header nav a { min-height: 36px; display: inline-flex; align-items: center; }
  .sr-portfolio-page .portfolio-hero { padding: 40px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sr-portfolio-page .cta-button, .sr-portfolio-page .filter-btn { transition: none; }
}

/* Approved media, 2026-09-05: original artwork and full-frame illustration assets. */
.sr-brandmark--secondary{width:150px;height:100px;max-width:100%;margin:0 0 14px}
.sr-brandmark img.sr-approved-logo{filter:none!important;opacity:1!important}
img.sr-official-badge{background:#fff!important;padding:6px;border-radius:4px;filter:none!important;object-fit:contain}
img.sr-approved-photo{object-fit:contain;background:var(--sr-cream,#faf8f5)}
.hero:has(> .hero__img.sr-approved-photo){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;min-height:0;background:#5a1a29}
.hero:has(> .hero__img.sr-approved-photo)::after{display:none}
.hero > .hero__img.sr-approved-photo{grid-area:1/2;position:static;width:100%;height:auto;max-height:none;align-self:center;background:#5a1a29}
.hero:has(> .hero__img.sr-approved-photo) > .hero__in{grid-area:1/1;width:100%;max-width:42rem;margin:0 0 0 auto;padding:clamp(24px,4vw,64px)}
@media(max-width:767px){.hero:has(> .hero__img.sr-approved-photo){grid-template-columns:minmax(0,1fr)}.hero > .hero__img.sr-approved-photo{grid-area:1/1}.hero:has(> .hero__img.sr-approved-photo) > .hero__in{grid-area:2/1;margin:0;padding:24px 20px 28px}}
.sr-media-note{max-width:1100px;margin:16px auto;padding:8px 20px;color:#4a4a4a;font:13px/1.5 var(--sr-font-body,Arial,sans-serif)}