/* ==========================================================================
   Standard Sales Company - 2026 refresh
   New header, footer and homepage. Loaded on every page after the old
   screen.css, so every rule here is scoped to .ssc-* classes.
   Served by ExpressionEngine at /includes/ssc-2026/
   ========================================================================== */

:root {
  --ssc-navy: #173a63;
  --ssc-navy-deep: #0e2641;
  --ssc-navy-700: #11304f;
  --ssc-navy-300: #5e7b9c;
  --ssc-navy-100: #c9d5e4;
  --ssc-gold: #c9a24c;
  --ssc-gold-deep: #a8842f;
  --ssc-gold-light: #e0c580;
  --ssc-gold-100: #f2e6c9;
  --ssc-red: #c0202f;
  --ssc-red-deep: #97101d;
  --ssc-cream: #f6f1e4;
  --ssc-cream-2: #fbf8f0;
  --ssc-cream-edge: #e8dfc8;
  --ssc-text: #343d49;
  --ssc-muted: #66707e;
  --ssc-serif: 'Bitter', Georgia, serif;
  --ssc-sans: 'Cabin', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ssc-shadow-sm: 0 1px 3px rgba(14,38,65,.08), 0 1px 2px rgba(14,38,65,.06);
  --ssc-shadow-lg: 0 12px 28px rgba(14,38,65,.14), 0 4px 10px rgba(14,38,65,.08);
  --ssc-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Layout fixes for the old pages ---------- */
#wrapper { margin-bottom: 0 !important; }
#push { display: none !important; }

.ssc-container { max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.ssc-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.ssc-skip { position: absolute; left: -9999px; top: 8px; z-index: 10001; background: #fff; color: var(--ssc-navy); padding: 10px 16px; font: 600 15px var(--ssc-sans); }
.ssc-skip:focus { left: 8px; }

/* Shared text resets inside new components (old CSS sets h1-h4/p/a globally) */
.ssc-header *, .ssc-footer *, .ssc-home * { box-sizing: border-box; }
.ssc-header a, .ssc-footer a, .ssc-home a { font-family: var(--ssc-sans); text-decoration: none; }
.ssc-home p, .ssc-footer p { font-family: var(--ssc-sans); letter-spacing: 0; }
.ssc-home h1, .ssc-home h2, .ssc-home h3, .ssc-footer h2 { font-family: var(--ssc-serif); letter-spacing: 0; text-transform: none; margin: 0; padding: 0; }
.ssc-header a:focus-visible, .ssc-footer a:focus-visible, .ssc-home a:focus-visible, .ssc-header button:focus-visible { outline: 3px solid rgba(201,162,76,.8); outline-offset: 2px; }

/* ---------- Utility bar ---------- */
.ssc-utility { background: var(--ssc-navy-deep); color: var(--ssc-navy-100); font: 400 14px/1.4 var(--ssc-sans); }
.ssc-utility .ssc-container { display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; align-items: center; padding-top: 8px; padding-bottom: 8px; }
.ssc-utility nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ssc-utility a { color: var(--ssc-cream) !important; font-size: 14px; letter-spacing: .02em; }
.ssc-utility a:hover { color: var(--ssc-gold-light) !important; }
.ssc-utility a.ssc-phone { color: var(--ssc-gold-light) !important; }

/* ---------- Main header ---------- */
.ssc-header { position: sticky; top: 0; z-index: 10000; background: var(--ssc-navy); border-bottom: 3px solid var(--ssc-gold); box-shadow: 0 2px 12px rgba(14,38,65,.25); }
.ssc-header .ssc-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 10px; padding-bottom: 10px; }
.ssc-brand { display: flex; align-items: center; gap: 14px; }
.ssc-brand img { width: 60px; height: 60px; display: block; }
/* The seal artwork sits on a white square; crop it to its circle on dark backgrounds */
.ssc-brand img, .ssc-footer-seal, img.ssc-story-seal { border-radius: 50%; }
.ssc-brand-name { display: flex; flex-direction: column; line-height: 1.2; }
.ssc-brand-name strong { font: 700 19px/1.2 var(--ssc-serif); letter-spacing: .065em; color: var(--ssc-cream); text-transform: uppercase; }
.ssc-brand-name em { font: italic 400 14px/1.3 var(--ssc-serif); color: var(--ssc-gold-light); }
.ssc-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.ssc-nav a { color: var(--ssc-cream) !important; font: 600 15px/1 var(--ssc-sans); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0; display: inline-block; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; }
.ssc-nav a:hover, .ssc-nav a.is-active { color: var(--ssc-gold-light) !important; border-bottom-color: var(--ssc-gold); }
.ssc-nav a.ssc-nav-cta { background: var(--ssc-red); color: #fff !important; padding: 12px 18px; border-radius: 5px; border: 0; }
.ssc-nav a.ssc-nav-cta:hover { background: var(--ssc-red-deep); color: #fff !important; }
.ssc-menu-btn { display: none; width: 48px; height: 48px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--ssc-navy-300); border-radius: 5px; color: var(--ssc-cream); cursor: pointer; }

@media (max-width: 900px) {
  .ssc-utility-tagline { display: none; }
  .ssc-menu-btn { display: inline-flex; }
  .ssc-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--ssc-navy); border-bottom: 3px solid var(--ssc-gold); padding: 8px 24px 20px; }
  .ssc-header.is-open .ssc-nav { display: block; }
  .ssc-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .ssc-nav li { border-bottom: 1px solid var(--ssc-navy-700); }
  .ssc-nav a { display: block; padding: 16px 0; font-size: 16px; }
  .ssc-nav a.ssc-nav-cta { margin-top: 16px; text-align: center; }
  .ssc-brand img { width: 52px; height: 52px; }
  .ssc-brand-name strong { font-size: 16px; }
}

/* Search (kept from the old header) */
.ssc-search { display: none; background: var(--ssc-navy-700); padding: 12px 0; }
.ssc-header.is-searching .ssc-search { display: block; }
.ssc-search form { display: flex; gap: 8px; max-width: 520px; }
.ssc-search input[type="search"] { flex: 1; min-width: 0; font: 400 16px var(--ssc-sans); padding: 10px 12px; border: 0; border-radius: 5px; background: #fff; color: var(--ssc-text); }
.ssc-search input[type="submit"] { font: 600 15px var(--ssc-sans) !important; padding: 10px 18px; border: 0; border-radius: 5px; background: var(--ssc-gold); color: var(--ssc-navy-deep); letter-spacing: .06em; text-transform: uppercase; }
.ssc-search-btn { background: transparent; border: 0; color: var(--ssc-cream); cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 6px; font: 400 14px var(--ssc-sans); }

/* ---------- Buttons ---------- */
.ssc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 26px; border-radius: 5px; font: 700 15px/1 var(--ssc-sans) !important; letter-spacing: .1em !important; text-transform: uppercase; transition: filter .2s, transform .12s; cursor: pointer; }
.ssc-btn:hover { filter: brightness(.92); }
.ssc-btn:active { transform: translateY(1px); }
.ssc-btn-cta { background: var(--ssc-red); color: #fff !important; }
.ssc-btn-gold { background: var(--ssc-gold); color: var(--ssc-navy-deep) !important; }
.ssc-btn-navy { background: var(--ssc-navy); color: #fff !important; }
.ssc-btn-outline { border: 2px solid var(--ssc-gold); color: var(--ssc-cream) !important; }
.ssc-btn-outline:hover { background: rgba(201,162,76,.15); filter: none; }

/* ---------- Homepage ---------- */
body.ssc-home-body { background: var(--ssc-cream); min-width: 0; margin: 0; font: 400 16px/1.5 var(--ssc-sans); color: var(--ssc-text); height: auto; }
.ssc-home { color: var(--ssc-text); font: 400 16px/1.5 var(--ssc-sans); }
.ssc-eyebrow { display: inline-block; font: 700 14px/1.4 var(--ssc-sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ssc-gold-deep); }
.ssc-rule { width: 64px; height: 3px; background: var(--ssc-gold); border: 0; margin: 0; }
.ssc-section { padding-top: 96px; padding-bottom: 96px; }
.ssc-heading { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 44px; }
.ssc-heading h2 { font: 700 clamp(30px, 3.6vw, 42px)/1.15 var(--ssc-serif) !important; color: var(--ssc-navy-deep) !important; }
.ssc-heading p { max-width: 640px; font-size: 18px !important; line-height: 1.6 !important; color: var(--ssc-muted) !important; margin: 0; }

/* Hero */
.ssc-hero { background: var(--ssc-navy); color: var(--ssc-cream); overflow: hidden; }
.ssc-hero .ssc-container { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 96px; }
.ssc-hero-copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.ssc-hero .ssc-eyebrow { color: var(--ssc-gold-light); }
.ssc-hero h1 { font: 700 clamp(34px, 4.4vw, 54px)/1.12 var(--ssc-serif) !important; color: #fff !important; }
.ssc-hero-lede { font: italic 400 20px/1.6 var(--ssc-serif) !important; color: var(--ssc-navy-100) !important; max-width: 560px; margin: 0; }
.ssc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.ssc-hero-media { flex: 1 1 440px; min-width: 0; height: 460px; border-radius: 8px; overflow: hidden; background: var(--ssc-navy-700); box-shadow: 0 30px 60px rgba(0,0,0,.35); }
.ssc-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Stats */
.ssc-stats { background: #fff; border-bottom: 1px solid var(--ssc-cream-edge); }
.ssc-stats .ssc-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; text-align: center; padding-top: 48px; padding-bottom: 48px; }
.ssc-stat { display: flex; flex-direction: column; gap: 4px; }
.ssc-stat-num { font: 700 54px/1.1 var(--ssc-serif); color: var(--ssc-navy); }

/* Cards */
.ssc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.ssc-card { background: #fff; border: 1px solid var(--ssc-cream-edge); border-top: 3px solid var(--ssc-gold); border-radius: 8px; box-shadow: var(--ssc-shadow-sm); padding: 32px; display: flex; flex-direction: column; gap: 12px; height: 100%; transition: transform .25s var(--ssc-ease), box-shadow .25s var(--ssc-ease); }
.ssc-card:hover { transform: translateY(-3px); box-shadow: var(--ssc-shadow-lg); }
.ssc-card h3 { font: 700 26px/1.2 var(--ssc-serif) !important; color: var(--ssc-navy-deep) !important; }
.ssc-card p { font-size: 16px !important; line-height: 1.6 !important; color: var(--ssc-text) !important; margin: 0; }
.ssc-card-link { margin-top: auto; color: var(--ssc-navy) !important; font: 700 14px/1.4 var(--ssc-sans) !important; letter-spacing: .08em !important; text-transform: uppercase; }
.ssc-card-link:hover { color: var(--ssc-red) !important; }
.ssc-card svg { color: var(--ssc-navy); }

/* Featured products */
.ssc-featured { background: #fff; border-top: 1px solid var(--ssc-cream-edge); border-bottom: 1px solid var(--ssc-cream-edge); overflow: hidden; }
.ssc-feature { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ssc-feature + .ssc-feature { margin-top: 96px; }
.ssc-feature:nth-child(even) { flex-direction: row-reverse; }
.ssc-feature-media { flex: 1 1 380px; min-width: 0; height: 420px; border-radius: 8px; overflow: hidden; background: var(--ssc-cream-2); display: flex; align-items: center; justify-content: center; }
.ssc-feature-media img { max-width: 80%; max-height: 360px; object-fit: contain; display: block; }
.ssc-feature-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.ssc-feature-copy h3 { font: 700 clamp(32px, 4vw, 48px)/1.1 var(--ssc-serif) !important; color: var(--ssc-navy-deep) !important; }
.ssc-feature-copy p { font: 400 18px/1.6 var(--ssc-serif) !important; color: var(--ssc-text) !important; margin: 0; }

/* Brand logo marquee */
.ssc-logos { padding-top: 64px; padding-bottom: 72px; overflow: hidden; }
.ssc-marquee { display: flex; width: max-content; gap: 24px; animation: ssc-marquee 60s linear infinite; }
.ssc-marquee:hover { animation-play-state: paused; }
.ssc-logo-tile { width: 180px; height: 110px; flex: none; background: #fff; border: 1px solid var(--ssc-cream-edge); border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ssc-logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.ssc-logo-tile:hover img { filter: none; opacity: 1; }
@keyframes ssc-marquee { to { transform: translateX(-50%); } }

/* Our Story (pinned) */
.ssc-story { background: var(--ssc-navy-deep); color: var(--ssc-cream); }
.ssc-story-inner { max-width: 880px; margin: 0 auto; padding: 96px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.ssc-story .ssc-eyebrow { color: var(--ssc-gold-light); }
.ssc-story img.ssc-story-seal { width: 160px; height: 160px; }
.ssc-story h2 { font: 700 clamp(34px, 4.5vw, 52px)/1.1 var(--ssc-serif) !important; color: #fff !important; }
.ssc-story .ssc-rule { width: 160px; }
.ssc-story p { font: italic 400 21px/1.6 var(--ssc-serif) !important; color: var(--ssc-navy-100) !important; margin: 0; }

/* Locations */
.ssc-state h3 { font: 700 20px/1.2 var(--ssc-serif) !important; letter-spacing: .1em !important; text-transform: uppercase !important; color: var(--ssc-gold-deep) !important; }
.ssc-state ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ssc-state a { color: var(--ssc-navy) !important; font-size: 18px !important; font-weight: 600; }
.ssc-state a:hover { color: var(--ssc-red) !important; }

/* News */
.ssc-news { padding: 0; overflow: hidden; border-top-width: 1px; gap: 0; }
.ssc-news-img { height: 200px; overflow: hidden; background: var(--ssc-cream-edge); }
.ssc-news-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ssc-ease); }
.ssc-news:hover .ssc-news-img img { transform: scale(1.06); }
.ssc-news-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ssc-news-meta { font-size: 14px; color: var(--ssc-muted); }
.ssc-news h3 { font-size: 21px !important; }

/* ==========================================================================
   Cinematic homepage (inspired by Apple product pages): dark navy,
   huge short headlines, label + headline + highlighted paragraph, big
   media that grows in, a highlights carousel, and big numbers.
   ========================================================================== */
.ssc-cinema { background: var(--ssc-navy-deep); color: var(--ssc-navy-100); }
.ssc-c-center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.ssc-c-section { padding-top: 140px; padding-bottom: 140px; }
.ssc-c-section + .ssc-c-section { padding-top: 40px; }
.ssc-cinema .ssc-c-kicker { font: 600 clamp(16px, 1.6vw, 21px)/1.3 var(--ssc-sans) !important; color: var(--ssc-gold-light) !important; letter-spacing: .02em; max-width: 720px; }
.ssc-cinema .ssc-c-display, .ssc-cinema h2.ssc-c-display { font: 700 clamp(44px, 8vw, 104px)/1.02 var(--ssc-serif) !important; letter-spacing: -.02em !important; color: #fff !important; margin: 14px 0 0 !important; }
.ssc-cinema .ssc-c-title { font: 700 clamp(34px, 5vw, 64px)/1.05 var(--ssc-serif) !important; letter-spacing: -.015em !important; color: #fff !important; margin-bottom: 48px !important; }
.ssc-cinema .ssc-c-title-dark { color: var(--ssc-navy-deep) !important; }
.ssc-c-label { font: 700 clamp(17px, 1.6vw, 22px)/1.2 var(--ssc-sans); color: var(--ssc-gold-light); }
.ssc-cinema .ssc-c-copy { max-width: 760px; margin: 32px auto 0 !important; font: 600 clamp(19px, 1.8vw, 24px)/1.5 var(--ssc-sans) !important; color: #8ea5bf !important; }
.ssc-cinema .ssc-c-copy strong { color: #fff; font-weight: 600; }
.ssc-c-actions { justify-content: center; align-items: center; gap: 28px !important; margin-top: 36px !important; }
.ssc-pill { border-radius: 999px !important; padding-left: 30px !important; padding-right: 30px !important; letter-spacing: .04em !important; text-transform: none !important; font-size: 17px !important; }
.ssc-cinema a.ssc-c-link { color: var(--ssc-gold-light); font: 600 18px/1.3 var(--ssc-sans); }
.ssc-cinema a.ssc-c-link:hover { text-decoration: underline; color: #fff; }

/* Original-draft hero on the cinematic homepage: all-caps Bitter headline, red + gold buttons */
.ssc-cinema .ssc-hero-classic { background: var(--ssc-navy); }
/* Text column and photo are the same height: the eyebrow lines up with the top of the
   photo and the buttons with its bottom. Everything fits on one laptop screen (1280x720 and up). */
.ssc-hero-classic .ssc-container { align-items: stretch !important; padding-top: clamp(32px, 6vh, 72px) !important; padding-bottom: clamp(48px, 8vh, 96px) !important; }
.ssc-hero-classic .ssc-hero-copy { justify-content: space-between; gap: 18px; }
.ssc-cinema .ssc-hero-classic h1 { text-transform: uppercase !important; letter-spacing: .01em !important; font-size: clamp(32px, min(4.1vw, 6.3vh), 62px) !important; line-height: 1.08 !important; }
.ssc-hero-classic .ssc-eyebrow { font-size: clamp(14px, 1.15vw, 17px); letter-spacing: .2em; line-height: 1; }
.ssc-hero-classic .ssc-rule { width: 96px; height: 4px; }
.ssc-cinema .ssc-hero-classic .ssc-hero-lede { font-size: clamp(18px, min(1.55vw, 2.6vh), 23px) !important; line-height: 1.5 !important; }
.ssc-hero-classic .ssc-actions { margin-top: 0; }
.ssc-hero-classic .ssc-btn { font-family: var(--ssc-serif) !important; font-weight: 600 !important; font-size: clamp(16px, 1.3vw, 19px) !important; letter-spacing: .05em !important; min-height: 56px; padding: 16px 30px; }
.ssc-hero-classic .ssc-hero-media { height: auto; min-height: min(520px, 64vh); align-self: stretch; }
/* At rest the photo is exactly its box (so the edges line up); it grows a little as you scroll */
@keyframes ssc-hero-media-classic { from { transform: none; } to { transform: scale(1.04); } }
@media (max-width: 900px) { .ssc-hero-classic .ssc-hero-media { min-height: 320px; } .ssc-hero-classic .ssc-hero-copy { justify-content: flex-start; } }

/* Text-only hero (no photo): centered headline, lede and buttons; the highlights carousel follows right after */
.ssc-hero-text .ssc-container { justify-content: center; padding-top: clamp(56px, 10vh, 120px) !important; padding-bottom: clamp(48px, 8vh, 96px) !important; }
.ssc-hero-text .ssc-hero-copy { flex: 0 1 1040px; align-items: center; text-align: center; justify-content: center; gap: 24px; }
.ssc-cinema .ssc-hero-text h1 { font-size: clamp(32px, min(5vw, 8vh), 72px) !important; }
.ssc-hero-text .ssc-hero-lede { max-width: 680px; }
.ssc-hero-text .ssc-actions { justify-content: center; }
.ssc-cinema .ssc-c-highlights { padding-top: clamp(28px, 4vh, 48px); }

/* Hero */
.ssc-c-hero { padding-top: 88px; overflow: hidden; }
.ssc-c-hero-media { max-width: 1320px; margin: 64px auto 0; padding: 0 24px; }
.ssc-c-hero-media img { width: 100%; height: min(72vh, 760px); object-fit: cover; display: block; border-radius: 28px; box-shadow: 0 40px 120px rgba(0,0,0,.5); }

/* Highlights carousel */
.ssc-c-highlights { padding-bottom: 100px; overflow: hidden; }
.ssc-c-highlights .ssc-c-title { text-align: left; }
.ssc-hl-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px)); scroll-padding: 0 max(24px, calc((100vw - 1240px) / 2 + 24px));
}
.ssc-hl-track::-webkit-scrollbar { display: none; }
.ssc-hl-track:focus-visible { outline: 3px solid rgba(201,162,76,.8); outline-offset: 4px; }
.ssc-hl-card {
  position: relative; flex: 0 0 min(1000px, 84vw); height: min(620px, 72vh); scroll-snap-align: start; border-radius: 28px; overflow: hidden;
  background: var(--ssc-navy-700); transition: opacity .5s, transform .5s var(--ssc-ease);
}
.ssc-hl-card:not(.is-current) { opacity: .45; }
.ssc-hl-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 6s linear; }
.ssc-hl-card.is-current img { transform: scale(1); }
.ssc-hl-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,38,65,.92) 0%, rgba(14,38,65,.55) 45%, rgba(14,38,65,0) 75%); }
.ssc-hl-copy { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: min(440px, 80%); padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ssc-cinema .ssc-hl-copy h3 { font: 700 clamp(26px, 3vw, 38px)/1.12 var(--ssc-serif) !important; color: #fff !important; }
.ssc-cinema .ssc-hl-copy p { font: 600 18px/1.5 var(--ssc-sans) !important; color: var(--ssc-navy-100) !important; margin: 0; }
.ssc-hl-copy a.ssc-c-link { text-transform: capitalize; }
.ssc-hl-controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 32px; }
.ssc-hl-dots { display: flex; gap: 10px; align-items: center; background: rgba(255,255,255,.1); padding: 14px 18px; border-radius: 999px; }
.ssc-hl-dot { width: 10px; height: 10px; border-radius: 999px; border: 0; padding: 0; background: rgba(255,255,255,.4); cursor: pointer; position: relative; overflow: hidden; transition: width .4s var(--ssc-ease), background .3s; }
.ssc-hl-dot[aria-selected="true"] { width: 48px; background: rgba(255,255,255,.25); }
.ssc-hl-dot[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; background: var(--ssc-gold-light); transform-origin: left; transform: scaleX(0); animation: ssc-hl-progress var(--ssc-hl-time, 6s) linear forwards; }
.ssc-hl-paused .ssc-hl-dot[aria-selected="true"]::after { animation: none; transform: scaleX(1); }
@keyframes ssc-hl-progress { to { transform: scaleX(1); } }
.ssc-hl-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ssc-hl-play:hover { background: rgba(255,255,255,.2); }
.ssc-hl-play .ssc-icon-play { display: none; }
.ssc-hl-paused .ssc-hl-play .ssc-icon-play { display: block; }
.ssc-hl-paused .ssc-hl-play .ssc-icon-pause { display: none; }

/* Featured products on dark */
.ssc-c-products { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 72px; }
.ssc-c-product { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 40px 24px 36px; border-radius: 28px; background: var(--ssc-navy); transition: transform .35s var(--ssc-ease), background .35s; }
.ssc-c-product:hover { transform: translateY(-6px); background: var(--ssc-navy-700); }
.ssc-c-product-img { height: 300px; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.ssc-c-product-img img { max-height: 100%; max-width: 80%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(0,0,0,.45)); transition: transform .5s var(--ssc-ease); }
.ssc-c-product:hover .ssc-c-product-img img { transform: scale(1.06) rotate(-2deg); }
.ssc-c-product-brand { font: 700 13px/1 var(--ssc-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ssc-gold-light); }
.ssc-cinema .ssc-c-product h3 { font: 700 24px/1.2 var(--ssc-serif) !important; color: #fff !important; }
.ssc-cinema .ssc-logos { padding-top: 80px; padding-bottom: 48px; }
.ssc-cinema .ssc-logo-tile { background: #fff; border-color: transparent; border-radius: 18px; }

/* Numbers */
.ssc-c-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 48px 24px; width: 100%; }
.ssc-c-numbers > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ssc-c-num-top { font: 600 15px/1 var(--ssc-sans); color: #8ea5bf; min-height: 15px; }
.ssc-c-num { font: 700 clamp(56px, 6vw, 84px)/1.05 var(--ssc-serif); color: #fff; letter-spacing: -.02em; }
.ssc-c-num-label { font: 600 16px/1.3 var(--ssc-sans); color: #8ea5bf; }

/* Map with pins */
.ssc-c-map { position: relative; width: min(1000px, calc(100% - 48px)); margin: 72px auto 0; }
.ssc-c-map > img { width: 100%; height: auto; display: block; filter: invert(1) hue-rotate(180deg) brightness(.85) saturate(.6); opacity: .9; }
.ssc-pin {
  position: absolute; display: inline-flex; align-items: center; gap: 8px; transform: translate(-6px, -50%);
  font: 700 12px/1 var(--ssc-sans) !important; letter-spacing: .06em; text-transform: uppercase; color: #fff !important; white-space: nowrap;
  padding: 6px 10px 6px 0; border-radius: 999px; transition: font-size .35s var(--ssc-ease), background .25s, padding .25s, color .25s; z-index: 1;
}
.ssc-pin span { width: 12px; height: 12px; border-radius: 50%; background: var(--ssc-red); box-shadow: 0 0 0 3px rgba(255,255,255,.9); flex: none; }
.ssc-pin:hover, .ssc-pin:focus-visible, .ssc-pin.is-hot { font-size: 18px !important; background: #fff; color: var(--ssc-navy-deep) !important; padding: 8px 14px 8px 8px; z-index: 5; box-shadow: var(--ssc-shadow-lg); }
.ssc-c-map:hover .ssc-pin:not(:hover):not(.is-hot) { opacity: .5; }
#pin-louisville-ky { left: 73.2%; top: 7%; }
#pin-owensboro-ky { left: 68.7%; top: 12%; }
#pin-byhalia-ms { left: 59.6%; top: 34.1%; }
#pin-lubbock-tx { left: 17.9%; top: 44.1%; }
#pin-wichita-falls { left: 33.2%; top: 44.1%; }
#pin-odessa-tx-corporate-office { left: 16.1%; top: 51.5%; flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); padding: 6px 0 6px 10px; }
#pin-odessa-tx { left: 16.5%; top: 57%; }
#pin-san-angelo-tx { left: 24%; top: 62.5%; }
.ssc-c-states { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 56px; }
.ssc-c-state { background: var(--ssc-navy); border-radius: 24px; padding: 28px 32px; }
.ssc-cinema .ssc-c-state h3 { font: 700 14px/1.3 var(--ssc-sans) !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--ssc-gold-light) !important; margin-bottom: 12px !important; }
.ssc-c-state ul { list-style: none; margin: 0; padding: 0; }
.ssc-c-state li { margin: 8px 0; }
.ssc-cinema .ssc-c-state a { color: #fff; font: 600 19px/1.3 var(--ssc-sans); display: inline-block; transition: font-size .35s var(--ssc-ease), color .25s, transform .35s var(--ssc-ease); }
.ssc-cinema .ssc-c-state a:hover, .ssc-cinema .ssc-c-state a.is-hot { font-size: 25px; color: var(--ssc-gold-light); transform: translateX(4px); }
@media (max-width: 700px) {
  .ssc-pin { font-size: 0 !important; gap: 0; padding: 6px !important; }
  .ssc-pin:hover, .ssc-pin.is-hot { font-size: 13px !important; gap: 6px; }
}

/* Light closing section */
.ssc-cinema .ssc-c-light { background: var(--ssc-cream); color: var(--ssc-text); padding-top: 120px !important; }
.ssc-cinema .ssc-story { background: #08192d; }

/* Cinematic motion */
@keyframes ssc-c-grow { from { transform: scale(.82); border-radius: 48px; opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes ssc-c-pin { 0% { opacity: 0; translate: 0 -30px; } 70% { opacity: 1; translate: 0 3px; } 100% { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ssc-c-hero-media img { animation: ssc-c-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .ssc-c-grow { animation: ssc-c-grow linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .ssc-pin { animation: ssc-c-pin linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    /* Our Story seal: starts the moment the location tiles above scroll off the top
       (the Locations section ends 140px below them) and reaches full size in about
       half the scrolling it used to take (24vh instead of 48vh). */
    .ssc-cinema .ssc-story-seal { animation-timeline: --ssc-story; animation-range: cover calc(100vh - 140px) cover calc(124vh - 140px); }
  }
}

/* ---------- Footer ---------- */
.ssc-footer { background: var(--ssc-navy-deep); color: var(--ssc-navy-100); border-top: 3px solid var(--ssc-gold); font: 400 15px/1.6 var(--ssc-sans); clear: both; }
.ssc-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 32px; padding-top: 56px; padding-bottom: 32px; }
.ssc-footer-col { display: flex; flex-direction: column; gap: 10px; }
.ssc-footer h2 { font: 700 14px/1.4 var(--ssc-serif) !important; letter-spacing: .15em !important; text-transform: uppercase !important; color: var(--ssc-gold-light) !important; margin: 0 0 4px !important; }
.ssc-footer p, .ssc-footer span { color: var(--ssc-navy-100) !important; font-size: 15px !important; line-height: 1.6 !important; margin: 0; }
.ssc-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ssc-footer a { color: var(--ssc-cream) !important; font-size: 15px; letter-spacing: 0; }
.ssc-footer a:hover { color: var(--ssc-gold-light) !important; }
.ssc-footer-seal { width: 80px; height: 80px; }
.ssc-social { display: flex; gap: 12px; }
.ssc-social a { width: 44px; height: 44px; border: 1px solid var(--ssc-navy-300); border-radius: 5px; display: flex; align-items: center; justify-content: center; }
.ssc-footer-bottom { border-top: 1px solid var(--ssc-navy-700); }
.ssc-footer-bottom .ssc-container { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; padding-top: 20px; padding-bottom: 20px; font-size: 14px; }

/* ==========================================================================
   Motion. Pure CSS: browsers without scroll-driven animations, and visitors
   with "reduce motion" turned on, see the finished page.
   ========================================================================== */
@property --ssc-num { syntax: '<integer>'; initial-value: 0; inherits: false; }
@keyframes ssc-load-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes ssc-rise { from { opacity: 0; transform: translateY(60px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ssc-from-side { from { opacity: 0; transform: translateX(var(--ssc-side, 80px)); } to { opacity: 1; transform: none; } }
@keyframes ssc-hero-media { from { transform: scale(.9); border-radius: 24px; } to { transform: scale(1.04); border-radius: 8px; } }
@keyframes ssc-hero-copy { from { opacity: 1; transform: none; } to { opacity: .25; transform: translateY(-70px); } }
@keyframes ssc-unveil { from { clip-path: inset(12% 12% round 24px); transform: scale(1.12); } to { clip-path: inset(0 0 round 8px); transform: none; } }
@keyframes ssc-count { from { --ssc-num: 0; } to { --ssc-num: var(--target); } }
@keyframes ssc-seal { from { transform: scale(.45) rotate(-25deg); opacity: .3; } to { transform: none; opacity: 1; } }
@keyframes ssc-rule-grow { from { width: 0; } to { width: 160px; } }
@keyframes ssc-fade-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes ssc-track-in { from { letter-spacing: .5em; opacity: 0; } to { letter-spacing: .18em; opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  .ssc-load { animation: ssc-load-up .9s var(--ssc-ease) both; }
  .ssc-load-2 { animation-delay: .15s; } .ssc-load-3 { animation-delay: .3s; } .ssc-load-4 { animation-delay: .45s; }

  @supports (animation-timeline: view()) {
    .ssc-hero-media { animation: ssc-hero-media linear both; animation-timeline: scroll(); animation-range: 0 600px; }
    .ssc-hero-classic .ssc-hero-media { animation-name: ssc-hero-media-classic; }
    .ssc-hero-copy { animation: ssc-hero-copy linear both; animation-timeline: scroll(); animation-range: 100px 650px; }
    .ssc-rise { animation: ssc-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .ssc-rise-2 { animation-range: entry 15% cover 34%; }
    .ssc-rise-3 { animation-range: entry 30% cover 40%; }
    .ssc-from-side { animation: ssc-from-side linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
    .ssc-feature:nth-child(even) .ssc-from-side { --ssc-side: -80px; }
    .ssc-unveil > img, .ssc-unveil > .ssc-unveil-inner { animation: ssc-unveil linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    .ssc-track { animation: ssc-track-in linear both; animation-timeline: view(); animation-range: entry 20% cover 35%; }

    .ssc-count { animation: ssc-count linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; counter-reset: ssc-n var(--ssc-num); }
    .ssc-count::after { content: counter(ssc-n); }
    .ssc-count .ssc-count-static { display: none; }

    /* Pinned "Our Story": stays on screen while its pieces build in */
    .ssc-story { height: 260vh; view-timeline-name: --ssc-story; }
    .ssc-story-pin { position: sticky; top: 0; min-height: 100vh; display: flex; align-items: center; }
    .ssc-story-seal { animation: ssc-seal linear both; animation-timeline: --ssc-story; animation-range: contain 0% contain 30%; }
    .ssc-story-eyebrow { animation: ssc-track-in linear both; animation-timeline: --ssc-story; animation-range: contain 15% contain 35%; }
    .ssc-story-title { animation: ssc-fade-in linear both; animation-timeline: --ssc-story; animation-range: contain 25% contain 45%; }
    .ssc-story-rule { animation: ssc-rule-grow linear both; animation-timeline: --ssc-story; animation-range: contain 35% contain 55%; }
    .ssc-story-text { animation: ssc-fade-in linear both; animation-timeline: --ssc-story; animation-range: contain 45% contain 65%; }
    .ssc-story-cta { animation: ssc-fade-in linear both; animation-timeline: --ssc-story; animation-range: contain 60% contain 78%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ssc-marquee { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
  .ssc-marquee [aria-hidden="true"] { display: none; }
}