/* ═══════════════════════════════════════════
   SILVER STATE PLASTICS — MAIN STYLESHEET
   ═══════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --ssp-blue: #2B3990;
  --ssp-red: #ED1C24;
  --ssp-blue-dk: #1E2B6E;
  --ssp-blue-lt: #EEF0F9;
  --bg: #F8F8F8;
  --ink: #111827;
  --ink-2: #1a2050;
  --mid: #374151;
  --mid-lt: #6B7280;
  --rule: #D1D5DB;
  --rule-lt: #E5E7EB;
  --stone: #ED1C24;
  --stone-lt: #F9A8AB;
  --white: #FFFFFF;
  --serif: 'Playfair Display', Georgia, serif;
  --sans: 'Barlow', system-ui, sans-serif;
  --cond: 'Barlow Condensed', system-ui, sans-serif;
  --w: 1280px;
  --gutter: 80px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font-family: var(--sans); }
img { max-width: 100%; height: auto; display: block; }

/* ── LAYOUT ── */
.W { max-width: var(--w); margin: 0 auto; padding: 0 var(--gutter); }

/* ── TYPOGRAPHY ── */
.t-label { font-family: var(--cond); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ssp-red); }
.t-serif-xl { font-family: var(--serif); font-size: clamp(56px, 7.5vw, 110px); font-weight: 400; line-height: .92; letter-spacing: -.02em; color: var(--ink); }
.t-serif-xl em { font-style: italic; font-weight: 400; color: var(--stone); }
.t-serif-lg { font-family: var(--cond); font-size: clamp(34px, 4.5vw, 56px); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; color: var(--ssp-blue); text-transform: none; }
.t-serif-lg em { font-style: normal; color: var(--ssp-red); }
.t-serif-md { font-family: var(--cond); font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.15; color: var(--ssp-blue); }
.t-serif-sm { font-family: var(--cond); font-size: 22px; font-weight: 700; line-height: 1.25; color: var(--ink); }
.t-body-lg { font-size: 18px; color: var(--mid); line-height: 1.8; font-weight: 400; max-width: 860px; }
.t-body { font-size: 15px; color: var(--mid); line-height: 1.75; font-weight: 400; max-width: 860px; }
.t-small { font-size: 13px; color: var(--mid-lt); letter-spacing: .04em; }
.sec-num { font-family: var(--serif); font-size: 120px; font-weight: 400; line-height: 1; color: var(--ssp-blue-lt); letter-spacing: -.04em; user-select: none; pointer-events: none; opacity: .5; }

/* ── BUTTONS ── */
.btn { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; padding: 14px 28px; transition: all .2s; }
.btn-dark { background: var(--ssp-blue); color: var(--white); border: 1px solid var(--ssp-blue); }
.btn-dark:hover { background: var(--ssp-blue-dk); }
.btn-dark .a { transition: transform .2s; }
.btn-dark:hover .a { transform: translateX(5px); }
.btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn-outline:hover { border-color: var(--ink); background: var(--ssp-blue-lt); }
.btn-stone { background: var(--ssp-red); color: var(--white); border: 1px solid var(--ssp-red); width: 100%; justify-content: center; font-size: 11px; }
.btn-stone:hover { background: #c9151c; border-color: #c9151c; }

/* ── FORMS ── */
.fg { margin-bottom: 16px; }
.fg label { display: block; font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-bottom: 7px; }
.fg input, .fg textarea, .fg select { width: 100%; padding: 11px 0; border: none; border-bottom: 1px solid var(--rule); background: transparent; font-family: var(--sans); font-size: 14px; color: var(--ink); outline: none; border-radius: 0; transition: border-color .2s; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-bottom-color: var(--ink); }
.fg textarea { height: 72px; resize: none; line-height: 1.55; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.f-note { font-family: var(--cond); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mid); text-align: center; margin-top: 16px; }

/* ── ANNOUNCEMENT STRIP ── */
.strip { background: var(--ink); padding: 9px 0; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.strip-tag { font-family: var(--cond); font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.5); padding: 2px 8px; }
.strip-text { font-family: var(--cond); font-size: 12px; font-weight: 400; letter-spacing: .06em; color: rgba(255,255,255,.8); }
.strip-link { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 3px; }
.strip-link:hover { color: #fff; }

/* ── HEADER / NAV ── */
.site-header { position: sticky; top: 0; z-index: 200; background: var(--white); border-bottom: 1px solid var(--rule); border-top: 3px solid var(--ssp-red); }
.nav { display: flex; align-items: stretch; justify-content: space-between; height: 60px; }
.nav-brand { display: flex; align-items: center; gap: 8px; padding-right: 32px; border-right: 1px solid var(--rule); text-decoration: none; }
.nav-brand img { height: 44px; width: auto; }
.nav-brand-text { font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--ssp-blue); line-height: 1.1; }
.nav-brand-year { font-family: var(--cond); font-size: 9px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--mid); }
.nav-links { display: flex; align-items: stretch; flex: 1; }
.ni { position: relative; display: flex; align-items: stretch; }
.nl { display: flex; align-items: center; gap: 5px; padding: 0 20px; font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-lt); border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; white-space: nowrap; }
.nl:hover, .nl.on { color: var(--ink); border-bottom-color: var(--ssp-red); }
.nl svg { width: 9px; height: 9px; flex-shrink: 0; transition: transform .18s; }
.ni:hover .nl svg { transform: rotate(180deg); }
.ndrop { position: absolute; top: 100%; left: 0; background: var(--bg); border: 1px solid var(--rule); min-width: 240px; padding: 0; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .18s; z-index: 300; }
.ni:hover .ndrop { opacity: 1; visibility: visible; transform: translateY(0); }
.ndi { display: block; padding: 12px 20px; font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-lt); border-bottom: 1px solid var(--rule-lt); transition: color .12s, background .12s; }
.ndi:last-child { border-bottom: none; }
.ndi:hover { color: var(--ink); background: var(--ssp-blue-lt); }
.ndi-all { color: var(--ssp-blue) !important; font-weight: 700 !important; }
.ndi-all:hover { color: var(--ssp-blue-dk) !important; }
/* Wide two-column dropdown */
.ndrop-wide { display: grid; grid-template-columns: 1fr 1fr; min-width: 440px; padding: 0; }
.ndrop-group { padding: 0; }
.ndrop-group:first-child { border-right: 1px solid var(--rule-lt); }
.ndrop-label { font-family: var(--cond); font-size: 9px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ssp-red); padding: 14px 20px 8px; }
.ndrop-wide .ndi { padding: 9px 20px; font-size: 11px; }
.nav-right { display: flex; align-items: center; padding-left: 32px; border-left: 1px solid var(--rule); }
.nav-tel { font-family: var(--cond); font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--mid-lt); padding-right: 20px; border-right: 1px solid var(--rule); display: flex; align-items: center; height: 100%; }
.nav-tel:hover { color: var(--ink); }
.nav-cta { display: flex; align-items: center; height: 100%; font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); background: var(--ssp-blue); padding: 0 28px; margin-left: 20px; transition: background .15s; }
.nav-cta:hover { background: var(--ssp-blue-dk); }

/* Mobile toggle */
.mobile-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; }
.mobile-toggle span { display: block; width: 22px; height: 2px; background: var(--mid); margin: 5px 0; transition: all .2s; }
.mobile-nav { display: none; background: var(--white); border-bottom: 1px solid var(--rule); padding: 20px var(--gutter); max-height: calc(100vh - 130px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-nav.open { display: block; }
.mobile-nav a { display: block; padding: 10px 0; font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); border-bottom: 1px solid var(--rule-lt); }
.mobile-nav-label { font-family: var(--cond); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ssp-red); padding: 16px 0 6px; margin-top: 8px; }
.mobile-nav-label:first-child { margin-top: 0; padding-top: 0; }
.mobile-nav a:hover { color: var(--ink); }

/* ── HERO ── */
.hero { min-height: 600px; display: flex; align-items: center; }
.hero-bg { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; }
.hero-bg::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(17,24,39,.92) 0%, rgba(17,24,39,.8) 60%, rgba(17,24,39,.5) 100%); z-index: 1; pointer-events: none; }
.hero-full { position: relative; z-index: 2; max-width: var(--w); margin: 0 auto; padding: 80px var(--gutter); width: 100%; }
.hero-bg .t-serif-xl { color: var(--white); }
.hero-bg .t-serif-xl em { color: var(--ssp-red); }
.hero-bg .hero-kicker { color: rgba(255,255,255,.6); }
.hero-bg .hero-kicker::before { background: rgba(255,255,255,.4); }
.hero-bg .hero-sub { color: rgba(255,255,255,.65); }
.hero-btn-light { background: transparent; color: var(--white); border: 1px solid rgba(255,255,255,.35); }
.hero-btn-light:hover { border-color: var(--white); background: rgba(255,255,255,.08); color: var(--white); }
.btn-cta-hero { background: var(--ssp-red); color: var(--white); border: 1px solid var(--ssp-red); font-size: 13px; padding: 18px 36px; }
.btn-cta-hero:hover { background: #c9151c; border-color: #c9151c; }
.btn-cta-hero .a { transition: transform .2s; }
.btn-cta-hero:hover .a { transform: translateX(5px); }
.hero-kicker { font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; display: flex; align-items: center; gap: 16px; margin-bottom: 44px; }
.hero-kicker::before { content: ''; display: block; width: 36px; height: 1px; }
.hero-sub { max-width: 540px; margin-top: 32px; }
.hero-btns { display: flex; align-items: center; gap: 14px; margin-top: 48px; flex-wrap: wrap; }

/* ── TRUST STRIP ── */
.trust-strip { background: var(--ssp-blue); display: flex; align-items: center; justify-content: flex-start; gap: 0; flex-wrap: wrap; border-bottom: 1px solid rgba(255,255,255,.08); max-width: var(--w); margin: 0 auto; padding: 0 var(--gutter); }
.trust-strip-wrap { background: var(--ssp-blue); }
.trust-item { display: flex; align-items: center; gap: 8px; padding: 16px 32px; font-family: var(--cond); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.7); border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; }
.trust-item:last-child { border-right: none; }
.trust-item strong { color: var(--white); font-weight: 700; }
.trust-icon { color: #FACC15; font-size: 16px; }

/* ── MOBILE STICKY CTA ── */
.mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--white); border-top: 1px solid var(--rule); box-shadow: 0 -2px 12px rgba(0,0,0,.08); padding: 8px; gap: 8px; }
.msc-call { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 14px 16px; background: var(--ssp-blue); color: var(--white); font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }
.msc-quote { display: flex; align-items: center; justify-content: center; flex: 1; padding: 14px 16px; background: var(--ssp-red); color: var(--white); font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-decoration: none; }

/* ── CAP BAR ── */
.cap-bar { background: var(--ssp-blue); border-bottom: 1px solid #222; }
.caps { display: flex; align-items: stretch; max-width: var(--w); margin: 0 auto; }
.cap { flex: 1; display: flex; align-items: center; gap: 20px; padding: 24px 32px; border-right: 1px solid rgba(255,255,255,.07); transition: background .15s; }
.cap:last-child { border-right: none; }
.cap:hover { background: rgba(255,255,255,.03); }
.cap-idx { font-family: var(--serif); font-size: 14px; color: rgba(255,255,255,.3); font-style: italic; }
.cap-t { font-family: var(--cond); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.cap-s { font-size: 11px; color: rgba(255,255,255,.3); margin-top: 2px; font-weight: 300; }

/* ── SECTIONS ── */
.S { padding: 64px 0; }
.S.warm { background: var(--ssp-blue-lt); }
.S.dark { background: var(--ssp-blue); }
.S.border-b { border-bottom: 1px solid var(--rule); }
.S.border-t { border-top: 1px solid var(--rule); }
.sh { display: block; margin-bottom: 32px; }
.sh-aside { margin-bottom: 12px; }
.sh-aside .sec-num { display: none; }
.sh-body { max-width: 860px; }

/* ── GRID CELLS ── */
.grid-cells { display: grid; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.grid-cells.col-2 { grid-template-columns: repeat(2,1fr); }
.grid-cells.col-3 { grid-template-columns: repeat(3,1fr); }
.grid-cells.col-4 { grid-template-columns: repeat(4,1fr); }
.cell { padding: 40px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); transition: background .2s; cursor: pointer; display: block; }
.cell:hover { background: var(--ssp-blue-lt); }
.cell.no-hover { cursor: default; }
.cell.no-hover:hover { background: inherit; }
.cell-idx { font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ssp-red); opacity: .5; margin-bottom: 24px; display: block; }
.cell-title { font-family: var(--cond); font-size: 22px; font-weight: 700; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.cell-body { font-size: 14px; color: var(--mid); line-height: 1.8; }
.cell-link { display: flex; align-items: center; gap: 8px; font-family: var(--cond); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ssp-blue); margin-top: 28px; transition: gap .2s; }
.cell:hover .cell-link { gap: 14px; }
.cell-dark { background: var(--ssp-blue); border-color: #333; }
.cell-dark:hover { background: var(--ssp-blue-dk); }
.cell-dark .cell-idx { color: rgba(255,255,255,.18); }
.cell-dark .cell-title { color: var(--white); font-size: 24px; line-height: 1.15; }
.cell-dark .cell-body { color: rgba(255,255,255,.42); font-size: 14px; }
.cell-dark .cell-link { color: rgba(255,255,255,.8); }

/* ── SERVICE LIST ── */
.svc-list { border-top: 1px solid var(--rule); }
.svc-row { display: grid; grid-template-columns: 64px 1fr 220px 32px; gap: 48px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--rule-lt); cursor: pointer; transition: all .15s; text-decoration: none; color: inherit; }
.svc-row:hover { background: var(--ssp-blue-lt); margin: 0 -20px; padding: 40px 20px; }
.svc-n { font-family: var(--serif); font-size: 36px; font-weight: 400; color: var(--rule); line-height: 1; align-self: start; padding-top: 4px; transition: color .15s; }
.svc-row:hover .svc-n { color: #9BA8D0; }
.svc-name { font-family: var(--cond); font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.svc-body { font-size: 14px; color: var(--mid); line-height: 1.8; max-width: 520px; }
.svc-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.svc-tag { font-family: var(--cond); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); color: var(--mid-lt); padding: 3px 9px; }
.svc-arr { font-size: 20px; color: var(--rule); transition: color .15s, transform .2s; justify-self: end; }
.svc-row:hover .svc-arr { color: var(--ssp-blue); transform: translateX(4px); }

/* ── MATERIAL TABLE ── */
.mat-table { border-top: 1px solid var(--rule); }
.mat-row { display: grid; grid-template-columns: 220px 1fr 220px 32px; gap: 40px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--rule-lt); cursor: pointer; transition: all .15s; color: inherit; }
.mat-row:hover { background: var(--ssp-blue-lt); margin: 0 -20px; padding: 26px 20px; }
.mat-name { font-family: var(--cond); font-size: 20px; font-weight: 700; color: var(--ink); }
.mat-desc { font-size: 14px; color: var(--mid); line-height: 1.7; }
.mat-props { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.mat-prop { font-family: var(--cond); font-size: 9px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--rule); color: var(--mid-lt); padding: 3px 9px; }
.mat-arr { font-size: 18px; color: var(--rule); transition: color .15s, transform .2s; justify-self: end; }
.mat-row:hover .mat-arr { color: var(--ssp-blue); transform: translateX(4px); }

/* ── STEPS ── */
.steps { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.step { padding: 44px 36px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.step:last-child { border-right: 1px solid var(--rule); }
.step-n { font-family: var(--serif); font-size: 56px; font-weight: 400; color: #C7CBD4; line-height: 1; margin-bottom: 24px; transition: color .2s; }
.step:hover .step-n { color: var(--ssp-red); }
.step-t { font-family: var(--cond); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.step-b { font-size: 14px; color: var(--mid); line-height: 1.8; }

/* ── PULL QUOTE ── */
.pquote-section { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 80px 0; background: var(--ssp-blue-lt); }
.pquote-inner { display: grid; grid-template-columns: 1fr 320px; gap: 80px; align-items: end; }
.pquote-glyph { font-family: var(--serif); font-size: 200px; line-height: .7; color: #9BA8D0; opacity: .4; margin-bottom: 8px; display: block; user-select: none; }
.pquote-text { font-family: var(--serif); font-size: clamp(21px, 2.5vw, 30px); font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.55; max-width: 740px; }
.pquote-attr { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule-lt); }
.pquote-name { font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.pquote-role { font-size: 12px; color: var(--mid); margin-top: 3px; }
.pquote-stars { color: var(--ssp-red); font-size: 12px; letter-spacing: 3px; }
.rating-block { text-align: center; }
.rating-n { font-family: var(--serif); font-size: 80px; font-weight: 400; color: var(--ink); line-height: 1; }
.rating-stars { color: var(--ssp-red); font-size: 15px; letter-spacing: 5px; margin-top: 4px; }
.rating-l { font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mid); margin-top: 10px; }

/* ── REVIEWS ── */
.rv-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.rv { padding: 36px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rv-stars { color: var(--ssp-red); font-size: 11px; letter-spacing: 4px; margin-bottom: 20px; }
.rv-q { font-family: var(--serif); font-size: 17px; font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.7; margin-bottom: 24px; }
.rv-rule { height: 1px; background: var(--rule-lt); margin-bottom: 16px; }
.rv-name { font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.rv-src { font-size: 11px; color: var(--mid); margin-top: 3px; }
.rv-score { background: var(--ssp-blue-lt); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 36px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); cursor: pointer; transition: background .15s; }
.rv-score:hover { background: var(--ssp-blue); }
.rv-score:hover .rv-score-n { color: var(--white); }
.rv-score:hover .rv-score-l { color: rgba(255,255,255,.5); }
.rv-score-n { font-family: var(--serif); font-size: 72px; font-weight: 400; color: var(--ink); line-height: 1; transition: color .2s; }
.rv-score-stars { color: var(--ssp-red); font-size: 14px; letter-spacing: 4px; }
.rv-score-l { font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-top: 8px; transition: color .2s; }

/* ── SEO CONTENT ── */
.seo-content { padding: 56px 0; border-top: 1px solid var(--rule); background: var(--white); }
.seo-content h2 { font-family: var(--cond); font-size: 28px; font-weight: 700; color: var(--ink); margin-bottom: 20px; line-height: 1.2; }
.seo-content p { font-size: 16px; color: var(--mid); line-height: 1.9; margin-bottom: 24px; max-width: 720px; }
.seo-content a { color: var(--ssp-blue); text-decoration: underline; text-underline-offset: 3px; }
.seo-content a:hover { color: var(--ssp-blue-dk); }
.seo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; }

/* ── FAQ ── */
.faq-section { padding: 56px 0; border-top: 1px solid var(--rule); background: var(--bg); }
.faq-item { border-bottom: 1px solid var(--rule-lt); padding: 28px 0; }
.faq-item:first-child { border-top: 1px solid var(--rule); }
.faq-q { font-family: var(--cond); font-size: 20px; font-weight: 700; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.faq-q::after { content: '+'; font-family: var(--sans); font-size: 24px; color: var(--ssp-blue); transition: transform .2s; flex-shrink: 0; }
.faq-item.open .faq-q::after { transform: rotate(45deg); color: var(--ssp-red); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s; padding-top: 0; }
.faq-item.open .faq-a { max-height: 300px; padding-top: 16px; }
.faq-a p { font-size: 15px; color: var(--mid); line-height: 1.85; max-width: 680px; }

/* ── CTA SECTION ── */
.cta-sec { padding: 64px 0; border-top: 1px solid var(--rule); }
.cta-inner { display: grid; grid-template-columns: 1fr 280px; gap: 80px; align-items: end; }
.cta-actions { display: flex; align-items: center; gap: 14px; margin-top: 44px; }
.cta-address { font-family: var(--cond); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); line-height: 2.2; margin-top: 36px; }
.score-block { border: 1px solid var(--rule); padding: 40px; text-align: center; }
.score-n { font-family: var(--serif); font-size: 80px; font-weight: 400; color: var(--ink); line-height: 1; }
.score-stars { color: var(--ssp-red); font-size: 14px; letter-spacing: 5px; margin-top: 6px; }
.score-l { font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mid); margin-top: 10px; }

/* ── BREADCRUMB ── */
.bc { display: flex; align-items: center; gap: 10px; padding: 24px 0 0; }
.bc span, .bc a { font-family: var(--cond); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mid-lt); transition: color .12s; }
.bc a:hover { color: var(--ink); }
.bc .bc-current { color: var(--stone); cursor: default; }
.bc-s { font-size: 9px; color: var(--rule); }

/* ── PAGE HEADER ── */
.ph { border-bottom: 1px solid var(--rule); padding-bottom: 40px; padding-top: 12px; }
.ph-inner { padding-top: 32px; max-width: 800px; }
.ph .t-label { margin-bottom: 18px; }

/* ── FOOTER ── */
.site-footer { background: var(--ink); padding: 72px 0 40px; color: rgba(255,255,255,.5); }
.ft-grid { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.07); }
.ft-brand { font-family: var(--cond); font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--white); margin-bottom: 12px; }
.ft-tag { font-size: 13px; color: rgba(255,255,255,.35); line-height: 1.7; margin-bottom: 20px; }
.ft-addr { font-size: 12px; color: rgba(255,255,255,.4); line-height: 1.8; margin-bottom: 10px; }
.ft-tel { font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.ft-tel:hover { color: rgba(255,255,255,.9); }
.ft-soc { display: flex; gap: 1px; margin-top: 16px; }
.ft-sb { padding: 6px 12px; border: 1px solid rgba(255,255,255,.1); font-family: var(--cond); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); transition: all .15s; }
.ft-sb:hover { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7); }
.ft-col-h { font-family: var(--cond); font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 20px; }
.ft-l { display: block; font-size: 13px; color: rgba(255,255,255,.4); padding: 5px 0; transition: color .12s; }
.ft-l:hover { color: rgba(255,255,255,.8); }
.ft-copy { font-size: 11px; color: rgba(255,255,255,.2); padding-top: 28px; text-align: center; }

/* ── REVIEW SNIPPET ── */
.ssp-quick-cta { display: flex; align-items: center; gap: 14px; margin-bottom: 32px; flex-wrap: wrap; }

/* Review snippet */
.review-snippet { max-width: 680px; margin: 0 auto; text-align: center; }
.rs-stars { color: #FACC15; font-size: 18px; letter-spacing: 4px; margin-bottom: 20px; }
.rs-quote { font-family: var(--serif); font-size: 22px; font-weight: 400; font-style: italic; color: var(--ink); line-height: 1.6; margin-bottom: 20px; }
.rs-attr { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-lt); }
.rs-attr span { color: var(--ssp-red); }

/* ── PRICING TABLE ── */
.ssp-price-table { max-width: 680px; border: 1px solid var(--rule); }
.ssp-price-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule-lt); }
.ssp-price-row:last-child { border-bottom: none; }
.ssp-price-header { background: var(--ssp-blue); }
.ssp-price-header .ssp-price-qty,
.ssp-price-header .ssp-price-disc { font-family: var(--cond); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--white); padding: 16px 28px; }
.ssp-price-qty { font-family: var(--cond); font-size: 16px; font-weight: 600; color: var(--ink); padding: 18px 28px; border-right: 1px solid var(--rule-lt); }
.ssp-price-disc { font-size: 15px; color: var(--mid); padding: 18px 28px; }
.ssp-price-disc strong { color: var(--ssp-blue); font-weight: 700; }
.ssp-price-highlight { background: var(--ssp-blue-lt); }
.ssp-price-highlight .ssp-price-qty { color: var(--ssp-blue); font-size: 18px; }
.ssp-price-highlight .ssp-price-disc strong { color: var(--ssp-red); font-size: 17px; }

/* ── CAROUSEL ── */
.ssp-carousel-wrap { overflow: hidden; margin: 0 -8px; }
.ssp-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 0 8px 16px; scrollbar-width: none; }
.ssp-carousel::-webkit-scrollbar { display: none; }
.ssp-carousel-card { flex: 0 0 280px; scroll-snap-align: start; border: 1px solid var(--rule); background: var(--white); text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; display: flex; flex-direction: column; overflow: hidden; }
.ssp-carousel-card:hover { border-color: var(--ssp-blue); box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.ssp-carousel-img { height: 180px; overflow: hidden; background: var(--ssp-blue-lt); }
.ssp-carousel-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.ssp-carousel-card:hover .ssp-carousel-img img { transform: scale(1.04); }
.ssp-carousel-placeholder { width: 100%; height: 100%; background: var(--ssp-blue-lt); display: flex; align-items: center; justify-content: center; }
.ssp-carousel-content { padding: 24px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.ssp-carousel-content .cell-title { font-size: 18px; margin-bottom: 16px; }
.ssp-carousel-nav { display: flex; gap: 8px; }
.ssp-carousel-btn { width: 44px; height: 44px; border: 1px solid var(--rule); background: var(--white); font-size: 24px; color: var(--mid); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .15s; line-height: 1; }
.ssp-carousel-btn:hover { border-color: var(--ink); color: var(--ink); background: var(--ssp-blue-lt); }

/* ── IMAGE GALLERY ── */
.ssp-gallery-grid { display: grid; gap: 4px; border-radius: 4px; overflow: hidden; }
.ssp-gallery-1 { grid-template-columns: 1fr; }
.ssp-gallery-2 { grid-template-columns: 1fr 1fr; }
.ssp-gallery-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ssp-gallery-3 .ssp-gallery-hero { grid-row: span 2; }
.ssp-gallery-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.ssp-gallery-4 .ssp-gallery-hero { grid-row: span 2; }
.ssp-gallery-4 .ssp-gallery-wide { grid-column: span 2; }

.ssp-gallery-item { overflow: hidden; cursor: pointer; position: relative; background: var(--ssp-blue-lt); }
.ssp-gallery-item::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .2s; }
.ssp-gallery-item:hover::after { background: rgba(0,0,0,.08); }
.ssp-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 140px; max-height: 220px; transition: transform .3s; }
.ssp-gallery-1 .ssp-gallery-item img { min-height: 180px; max-height: 280px; }
.ssp-gallery-hero img { min-height: 220px; max-height: 280px; }
.ssp-gallery-item:hover img { transform: scale(1.02); }
.ssp-gallery-more { position: absolute; inset: 0; background: rgba(17,24,39,.55); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--white); cursor: pointer; transition: background .2s; }
.ssp-gallery-more:hover { background: rgba(17,24,39,.7); }

/* Lightbox */
.ssp-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.ssp-lightbox.open { opacity: 1; visibility: visible; }
.ssp-lb-img-wrap { max-width: 90vw; max-height: 85vh; display: flex; align-items: center; justify-content: center; }
.ssp-lb-img-wrap img { max-width: 100%; max-height: 85vh; object-fit: contain; border-radius: 2px; }
.ssp-lb-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: rgba(255,255,255,.7); font-size: 36px; cursor: pointer; z-index: 10; transition: color .15s; line-height: 1; }
.ssp-lb-close:hover { color: #fff; }
.ssp-lb-prev, .ssp-lb-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255,255,255,.5); font-size: 56px; cursor: pointer; z-index: 10; transition: color .15s; padding: 20px; line-height: 1; }
.ssp-lb-prev { left: 10px; }
.ssp-lb-next { right: 10px; }
.ssp-lb-prev:hover, .ssp-lb-next:hover { color: #fff; }
.ssp-lb-counter { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* ── ANIMATIONS ── */
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
.r { animation: rise .7s cubic-bezier(.22,.68,0,1) both; }
.r1 { animation-delay: .08s; }
.r2 { animation-delay: .18s; }
.r3 { animation-delay: .28s; }
.r4 { animation-delay: .4s; }

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  :root { --gutter: 32px; }
  .hero-full { padding: 60px var(--gutter); }
  .trust-strip { display: flex; flex-wrap: wrap; padding: 0 var(--gutter); }
  .trust-item { justify-content: flex-start; padding: 14px 24px 14px 0; font-size: 12px; border-right: none; border-bottom: none; }
  .trust-item:nth-child(2n) { border-right: none; }
  .trust-item:nth-child(n+3) { border-bottom: none; }
  .sh { display: block; }
  .sh-aside { display: flex; align-items: center; gap: 20px; }
  .sh-aside .sec-num { font-size: 60px; margin-top: 0; }
  .grid-cells.col-2, .grid-cells.col-3 { grid-template-columns: 1fr; }
  .grid-cells.col-4 { grid-template-columns: repeat(2,1fr); }
  .svc-row { grid-template-columns: 1fr; gap: 16px; }
  .svc-n { font-size: 24px; }
  .svc-tags { justify-content: flex-start; }
  .svc-arr { display: none; }
  .steps { grid-template-columns: repeat(2,1fr); }
  .mat-row { grid-template-columns: 1fr; gap: 12px; }
  .mat-props { justify-content: flex-start; }
  .mat-arr { display: none; }
  .pquote-inner { grid-template-columns: 1fr; gap: 40px; }
  .rv-grid { grid-template-columns: 1fr; }
  .cta-inner { grid-template-columns: 1fr; gap: 40px; }
  .ft-grid { grid-template-columns: repeat(3, 1fr); }
  .caps { flex-wrap: wrap; }
  .cap { flex: 0 0 50%; }
  .seo-grid { grid-template-columns: 1fr; gap: 40px; }
  .nav-links { display: none; }
  .nav-right .nav-tel { display: none; }
  .mobile-toggle { display: block; }
  .nav-brand { border-right: none; padding-right: 0; }
  .nav-right { border-left: none; padding-left: 0; }
  .nav { gap: 0; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 380px"] { grid-template-columns: 1fr !important; }
  .ssp-gallery [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .ssp-gallery [style*="grid-row"] { grid-row: auto !important; }
  .ssp-gallery-2, .ssp-gallery-3, .ssp-gallery-4 { grid-template-columns: 1fr !important; }
  .ssp-gallery-3 .ssp-gallery-hero, .ssp-gallery-4 .ssp-gallery-hero { grid-row: auto; }
  .ssp-gallery-4 .ssp-gallery-wide { grid-column: auto; }
  .ssp-gallery-hero img { min-height: 250px !important; }
  .ssp-lb-prev, .ssp-lb-next { font-size: 36px; }
}

@media (max-width: 640px) {
  :root { --gutter: 20px; }
  .steps { grid-template-columns: 1fr; }
  .f2 { grid-template-columns: 1fr; }
  .ft-grid { grid-template-columns: 1fr; }
  .cap { flex: 0 0 100%; }
  .hero-metrics { grid-template-columns: 1fr; gap: 24px; }
  .hm { border-right: none; padding: 0; border-bottom: 1px solid var(--rule-lt); padding-bottom: 16px; }
  .hm:not(:first-child) { padding-left: 0; padding-top: 16px; }
  .mobile-sticky-cta { display: flex; }
  body { padding-bottom: 72px; }
  .trust-item { font-size: 11px; padding: 10px 16px; }
  .btn-cta-hero { font-size: 11px; padding: 16px 24px; }
}

/* ── GRAVITY FORMS OVERRIDES ── */
.gform_wrapper { font-family: var(--sans) !important; }
.gform_wrapper .gform_body { padding: 0 !important; }
.gform_wrapper .gform_fields { padding: 0 !important; gap: 0 !important; }
.gform_wrapper .gfield { margin-bottom: 14px !important; padding: 0 !important; }
.gform_wrapper .gfield_label { font-family: var(--cond) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--ink) !important; margin-bottom: 6px !important; padding: 0 !important; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea { width: 100% !important; padding: 12px 14px !important; border: 1px solid var(--rule) !important; background: var(--white) !important; font-family: var(--sans) !important; font-size: 14px !important; color: var(--ink) !important; outline: none !important; border-radius: 3px !important; transition: border-color .2s, box-shadow .2s !important; box-shadow: none !important; margin: 0 !important; }
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus { border-color: var(--ssp-blue) !important; box-shadow: 0 0 0 3px rgba(43,57,144,.1) !important; }
.gform_wrapper textarea { height: 80px !important; resize: none !important; line-height: 1.5 !important; }
.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; font-family: var(--cond) !important; font-weight: 700 !important; font-size: 14px !important; letter-spacing: .1em !important; text-transform: uppercase !important; padding: 18px 36px !important; background: var(--ssp-red) !important; color: var(--white) !important; border: 1px solid var(--ssp-red) !important; width: 100% !important; cursor: pointer !important; transition: all .2s !important; border-radius: 3px !important; margin-top: 8px !important; }
.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover { background: #c9151c !important; border-color: #c9151c !important; }
.gform_wrapper .gfield_required { color: var(--ssp-red) !important; font-size: 9px !important; }
.gform_wrapper .ginput_container_name { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; }
.gform_wrapper .name_first, .gform_wrapper .name_last { padding: 0 !important; }
.gform_wrapper .gfield_description { font-size: 10px !important; color: var(--mid) !important; margin-top: 2px !important; }
.gform_wrapper .validation_message { font-family: var(--cond) !important; font-size: 10px !important; color: var(--ssp-red) !important; letter-spacing: .06em !important; }
.gform_wrapper .gform_confirmation_message { font-family: var(--serif) !important; font-size: 22px !important; color: var(--ink) !important; line-height: 1.4 !important; padding: 40px 0 !important; }
.gform_wrapper .ginput_container_fileupload { padding: 4px 0 !important; }
.gform_wrapper .gform_drop_area { border: 1px dashed var(--rule) !important; padding: 12px !important; text-align: center !important; background: transparent !important; border-radius: 0 !important; }
.gform_wrapper .gform_footer { padding: 0 !important; margin: 4px 0 0 !important; }
/* Hide Gravity Forms default field sub-labels */
.gform_wrapper .hidden_sub_label,
.gform_wrapper .ginput_container_name label { font-family: var(--cond) !important; font-size: 8px !important; color: var(--mid) !important; letter-spacing: .1em !important; text-transform: uppercase !important; margin-top: 2px !important; }
/* Hero form — extra compact */
.hero-r .gform_wrapper .gfield { margin-bottom: 6px !important; }
.hero-r .gform_wrapper .gfield_label { font-size: 9px !important; margin-bottom: 2px !important; }
.hero-r .gform_wrapper input[type="text"],
.hero-r .gform_wrapper input[type="email"],
.hero-r .gform_wrapper input[type="tel"],
.hero-r .gform_wrapper input[type="date"],
.hero-r .gform_wrapper textarea { padding: 6px 0 !important; font-size: 12px !important; }
.hero-r .gform_wrapper textarea { height: 48px !important; }
.hero-r .gform_wrapper .ginput_container_name { gap: 12px !important; }
.hero-r .gform_wrapper .gfield_description { font-size: 9px !important; }
.hero-r .gform_wrapper .ginput_container_fileupload { padding: 2px 0 !important; }
.hero-r .gform_wrapper .gform_drop_area { padding: 8px !important; }
.hero-r .gform_wrapper .gform_footer { margin: 2px 0 0 !important; }
/* Embedded form on product/service pages.
   5.83.0 — DO NOT re-add a display:none rule here.
   This block used to hide the date and fileupload fields on all 15 embedded
   placements, so Project Deadline and Upload File only ever appeared on
   /request-quote/. The fields were still in the DOM and still submitted, but a
   customer on a product page could not attach a drawing — which is why not one
   entry in the archive has a file on it. Every quote form now shows the same
   seven fields. Keep them compact here instead of hiding them. */
.ssp-short-form .gform_wrapper .gfield--type-date input { max-width: 220px !important; }

/* ─── Upload field callout (5.84.0) ───
   The counter plaque in the shop ranks file types: PDF technical drawings and
   2D DXF in inches get quoted fast; anything else may need conversion. This
   gives the upload field the same job on the website. It RANKS formats, it does
   not restrict them — a homeowner photographing a broken part is a real lead, so
   jpg and png stay accepted. Do not narrow allowedExtensions to CAD only. */
.gform_wrapper .gfield--type-fileupload {
  background: rgba(43,57,144,.035) !important;
  border: 1px dashed rgba(43,57,144,.35) !important;
  border-radius: 4px !important;
  padding: 14px 16px !important;
  /* 5.85.0 — Gravity Forms renders the description AFTER the input, which put
     the "PDF or 2D DXF, in inches" instruction below the Choose File button
     where it is read too late to change what someone attaches. Flex order pulls
     it up under the label so it is read BEFORE the file picker. */
  display: flex !important;
  flex-direction: column !important;
}
.gform_wrapper .gfield--type-fileupload .gfield_label { order: 1 !important; margin-bottom: 4px !important; }
.gform_wrapper .gfield--type-fileupload .gfield_description { order: 2 !important; }
.gform_wrapper .gfield--type-fileupload .ginput_container { order: 3 !important; }
.gform_wrapper .gfield--type-fileupload .gfield_description {
  font-family: var(--sans) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.gform_wrapper .gfield--type-fileupload .gfield_description strong { color: var(--ssp-red) !important; font-weight: 700 !important; font-size: 13px !important; }
.gform_wrapper .gfield--type-fileupload .gfield_description em {
  display: block; font-style: normal !important; color: var(--mid) !important; font-size: 11px !important; margin-top: 3px !important;
}
.gform_wrapper .gfield--type-fileupload input[type="file"] { background: var(--white) !important; font-size: 13px !important; }
.gform_wrapper .gfield--type-fileupload .gform_fileupload_rules { font-size: 10px !important; color: var(--mid) !important; margin-top: 6px !important; display: block !important; opacity: .75 !important; }

/* Compact variant inside the embedded card */
.ssp-short-form .gform_wrapper .gfield--type-fileupload { padding: 11px 13px !important; }
.ssp-short-form .gform_wrapper .gfield--type-fileupload .gfield_description { font-size: 11px !important; margin-bottom: 8px !important; }
.ssp-short-form .gform_wrapper .gfield--type-fileupload input[type="file"] { font-size: 12px !important; padding: 8px 10px !important; }

/* Form card container */
.ssp-form-card { max-width: 680px; margin: 0 auto; background: var(--white); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.ssp-form-card-header { background: var(--ssp-blue); padding: 16px 32px; display: flex; align-items: center; gap: 16px; }
.ssp-form-badge { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--white); }
.ssp-form-badge-sub { font-family: var(--sans); font-size: 13px; color: rgba(255,255,255,.6); }
.ssp-form-card .ssp-short-form { padding: 28px 32px; }

/* ─── SSP tile icons ─── */
.ssp-tile-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.ssp-tile-plate { width: 76px; height: 76px; background: var(--ssp-blue-lt); display: inline-flex; align-items: center; justify-content: center; color: var(--ssp-blue); flex-shrink: 0; }
.ssp-tile-plate svg { width: 46px; height: 46px; display: block; }
@media (max-width: 700px) { .ssp-tile-plate { width: 60px; height: 60px; } .ssp-tile-plate svg { width: 38px; height: 38px; } }
.warm .ssp-tile-plate { background: #fff; }
.cell:hover .ssp-tile-plate { background: #fff; }

.svc-ico { display: flex; flex-direction: column; align-items: center; gap: 7px; align-self: start; }
.svc-ico .ssp-tile-plate { width: 56px; height: 56px; }
.svc-ico .ssp-tile-plate svg { width: 34px; height: 34px; }
.svc-n-sm { font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .12em; color: #E98A8D; }
@media (max-width: 700px) { .svc-ico { flex-direction: row; } }

/* ─── PAGE HEADER w/ MACHINE ILLUSTRATION ─── */
.ph-grid { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: 72px; align-items: center; }
.ph-grid .ph-inner { max-width: none; }
.ph-machine { background: var(--ssp-blue-lt); color: var(--ssp-blue); padding: 40px 36px; }
.ph-machine svg { width: 100%; height: auto; display: block; }
.ph-machine-cap { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(43,57,144,.14); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-machine-name { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ssp-blue); }
.ph-machine-sub { font-size: 12.5px; color: var(--mid); }
@media (max-width: 980px) { .ph-grid { grid-template-columns: 1fr; gap: 36px; } .ph-machine { max-width: 420px; } }

/* ─── ADA sign-type rows + visuals ─── */
.ada-rows .mat-row { grid-template-columns: 104px 190px 1fr 180px 32px; gap: 32px; }
.ada-chip { width: 104px; }
.ada-chip svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 10px 12px rgba(19,25,38,.32)); }
.ada-palette { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 26px; max-width: 560px; }
.ada-palette span { width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(19,25,38,.14); }
.ada-palette-note { font-family: var(--cond); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-lt); margin-top: 12px; }
@media (max-width: 700px) {
  .ada-rows .mat-row { grid-template-columns: 1fr; }
  .ada-chip { width: 96px; }
}

/* ─── ADA detail pages ─── */
.ada-hero-signs { display: flex; gap: 20px; align-items: center; justify-content: center; }
.ada-hero-signs > div { flex: 1; }
.ada-hero-signs > div:first-child { flex: 1.3; }
.ada-hero-signs svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 16px rgba(19,25,38,.36)); }
.ada-ex-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ada-ex { background: #fff; border: 1px solid var(--rule); padding: 28px 24px 22px; text-align: center; }
.ada-ex-sign { display: flex; justify-content: center; align-items: center; min-height: 150px; }
.ada-ex-sign svg { width: 72%; max-width: 190px; height: auto; filter: drop-shadow(0 10px 13px rgba(19,25,38,.32)); }
.ada-ex-sign.wide svg { width: 100%; max-width: 270px; }
.ada-ex-name { font-family: var(--cond); font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin-top: 18px; }
.ada-ex-size { font-size: 12.5px; color: var(--mid-lt); margin-top: 4px; }
@media (max-width: 900px) { .ada-ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ada-ex-grid { grid-template-columns: 1fr; } }

/* ─── Hero photo override (ACF Hero Image replaces the illustration when set) ─── */
.ph-machine .ph-photo { display: block; width: calc(100% + 72px); max-width: none; height: auto; margin: -40px -36px; }


/* ─── Recent-work photo grid ─── */
.ssp-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.ssp-photo-grid.one { grid-template-columns: minmax(0, 720px); }
.ssp-photo { margin: 0; }
.ssp-photo img { width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 16px 32px -18px rgba(19,25,38,.4); }
/* Uniform 3:2 tiles ONLY inside the recent-work grid, where matching crops are the point. */
.ssp-photo-grid .ssp-photo img { aspect-ratio: 3 / 2; object-fit: cover; }
.ssp-photo figcaption { font-family: var(--cond); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mid-lt); margin-top: 12px; }
@media (max-width: 700px) { .ssp-photo-grid { grid-template-columns: 1fr; } }
.ssp-photo-grid.cols3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .ssp-photo-grid.cols3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ssp-photo-grid.cols3 { grid-template-columns: 1fr; } }


/* ─── SPEC CHARTS (ssp_chart) ─── */
.ssp-chart { max-width: 760px; margin: 0 0 32px; border: 1px solid var(--rule); padding: 24px 26px 20px; background: #fff; }
.ssp-chart-hd { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ssp-blue); margin-bottom: 4px; }
.ssp-chart-sub { font-size: 13px; color: var(--mid-lt); margin-bottom: 20px; line-height: 1.5; }
.ssp-chart-rows { display: block; }
.ssp-chart-row { display: grid; grid-template-columns: 172px 1fr 104px; align-items: center; gap: 14px; margin-bottom: 11px; }
.ssp-chart-row:last-child { margin-bottom: 0; }
.ssp-chart-lab { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.ssp-chart-lab span { display: block; font-weight: 400; font-size: 12px; color: var(--mid-lt); margin-top: 1px; }
.ssp-chart-track { background: var(--rule-lt); height: 24px; position: relative; }
.ssp-chart-fill { background: var(--ssp-blue); height: 24px; min-width: 4px; }
.ssp-chart-fill.hi { background: var(--ssp-red); }
.ssp-chart-fill.mute { background: var(--mid-lt); }
.ssp-chart-val { font-size: 13.5px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; line-height: 1.3; }
.ssp-chart-note { font-size: 12.5px; color: var(--mid); margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-lt); line-height: 1.55; }
.ssp-chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin-bottom: 32px; }
.ssp-chart-pair .ssp-chart { margin-bottom: 0; max-width: none; padding: 22px 22px 18px; }
.ssp-chart-pair .ssp-chart-row { grid-template-columns: 1fr; gap: 5px; margin-bottom: 14px; }
.ssp-chart-pair .ssp-chart-val { text-align: left; }
@media (max-width: 860px) { .ssp-chart-pair { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ssp-chart { padding: 20px 18px 16px; }
  .ssp-chart-row { grid-template-columns: 1fr; gap: 5px; margin-bottom: 14px; }
  .ssp-chart-val { text-align: left; }
}


/* ─── CONTENT PHOTOS (ssp_photo) ───
   Editorial photos inside a page render at their real shape — never cropped.
   Portrait shots are capped by height so a tall photo does not run off the screen;
   the figure shrinks to the image so the caption stays tucked under its left edge.
   Specificity (figure.class img) deliberately beats the per-template .ssp-photo img
   rules that live in body <style> blocks. */
figure.ssp-photo-free { width: -moz-fit-content; width: fit-content; max-width: 100%; }
figure.ssp-photo-free img {
  aspect-ratio: auto;
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 620px;
  border-radius: 4px;
  box-shadow: 0 16px 32px -18px rgba(19,25,38,.4);
  border: 0;
}
figure.ssp-photo-free figcaption { max-width: 560px; }
.ssp-photo-pair figure.ssp-photo-free img { max-height: 460px; }
@media (max-width: 700px) { figure.ssp-photo-free img { max-height: 480px; } }
/* In a two-up pair, pin captions to the bottom of the row so they line up even when
   one photo is portrait and the other landscape. */
.ssp-photo-pair { align-items: stretch; }
.ssp-photo-pair figure.ssp-photo-free { display: flex; flex-direction: column; height: 100%; }
.ssp-photo-pair figure.ssp-photo-free figcaption { margin-top: auto; padding-top: 8px; }

/* ─── DOCUMENT CARDS: base layout (5.90.0) ───
   These rules used to live ONLY inside the <style> blocks of three product
   templates — polycarbonate-sheets, acrylic and abs. ssp_download() is a global
   helper in functions.php, so calling it from any other template produced an
   unstyled card: the inner spans stayed inline and the whole thing rendered as
   one run-on line of text. That is exactly what happened when the helper was
   first used on the polypropylene page.
   The base layout belongs with the helper, not with three pages that happened to
   use it first. The identical blocks still sitting in those three templates are
   harmless duplicates of these rules and can be deleted whenever those files are
   next touched. Do not put dl-card layout back into a page template. */
.dl-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--rule); padding: 16px 18px; text-decoration: none; background: #fff; transition: border-color .15s, box-shadow .15s; }
.dl-card:hover { border-color: var(--ssp-blue); box-shadow: 0 2px 10px rgba(43,57,144,.08); }
.dl-card + .dl-card { margin-top: 12px; }
.dl-ico { flex: 0 0 auto; background: var(--ssp-blue); color: #fff; font-family: var(--cond, sans-serif); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 5px 8px; margin-top: 2px; }
.dl-txt { display: block; }
.dl-title { display: block; font-weight: 600; color: var(--ink); font-size: 14.5px; line-height: 1.35; }
.dl-pending { font-weight: 400; color: var(--mid-lt); font-size: 13px; }
.dl-meta { display: block; font-size: 12px; color: var(--ssp-blue); margin-top: 4px; letter-spacing: .03em; }
.dl-desc { display: block; font-size: 13px; color: var(--mid); margin-top: 6px; line-height: 1.5; }

/* ─── DOCUMENT CARDS: "on request" state ───
   Deliberately does NOT look like a download. Grey badge, muted border, and it
   dials the shop rather than dropping the visitor on a contact form they did not
   ask for. */
.dl-card.dl-ask { background: var(--bg, #F8F8F8); border-style: dashed; }
.dl-card.dl-ask:hover { border-color: var(--mid-lt); border-style: solid; box-shadow: none; }
.dl-card.dl-ask .dl-ico { background: var(--mid-lt); }
.dl-card.dl-ask .dl-title { color: var(--mid); }
.dl-card.dl-ask .dl-meta { color: var(--mid-lt); }

/* ─── TWIN WALL CROSS-SECTION DIAGRAMS ─── */
.tw-diagram { margin: 0 0 28px; max-width: 520px; border: 1px solid var(--rule); background: #fff; padding: 18px 20px 14px; }
.tw-diagram figcaption { font-size: 13px; color: var(--mid); margin-top: 10px; line-height: 1.55; }
.tw-diagram-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin-bottom: 32px; align-items: start; }
.tw-diagram-row .tw-diagram { margin-bottom: 0; max-width: none; }
@media (max-width: 760px) { .tw-diagram-row { grid-template-columns: 1fr; } }

/* ─── ROWMARK MANUFACTURER DOCUMENTATION BLOCK ─── */
.rmd { max-width: 760px; margin: 8px 0 48px; }
.rmd-lead { font-size: 14px; color: var(--mid); line-height: 1.6; margin-bottom: 18px; max-width: 700px; }
.rmd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 700px) { .rmd-grid { grid-template-columns: 1fr; } }
.rmd-item { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); background: #fff; padding: 13px 16px; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.rmd-item:hover { border-color: var(--ssp-blue); box-shadow: 0 2px 10px rgba(43,57,144,.08); }
.rmd-ico { flex: 0 0 auto; background: var(--ssp-blue); color: #fff; font-family: var(--cond); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 4px 7px; }
.rmd-item .rmd-label { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.rmd-note { font-size: 12.5px; color: var(--mid-lt); line-height: 1.6; margin: 0 0 6px; }
.rmd-note a { color: var(--ssp-blue); }

/* ─── ROWMARK SPECIFICATIONS BLOCK ─── */
.rms { max-width: 760px; margin: 40px 0 8px; }
.rms-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.rms-table th, .rms-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--rule-lt); font-size: 14px; vertical-align: top; }
.rms-table > tbody > tr > th, .rms-table > tr > th { color: var(--ssp-blue); font-weight: 600; width: 34%; }
.rms-table thead th { border-bottom: 2px solid var(--rule); color: var(--ssp-blue); font-weight: 600; width: auto; }
.rms-props th { width: 46%; }
.rms-astm { color: var(--mid-lt); font-size: 13px; white-space: nowrap; }
.rms-sub { color: var(--mid-lt); font-size: 12.5px; }
.rms-h3 { font-family: var(--serif); font-size: 19px; color: var(--ink); margin: 30px 0 14px; }
.rms-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.rms-chip { font-family: var(--cond); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mid); background: var(--bg, #F8F8F8); border: 1px solid var(--rule); padding: 5px 10px; }
.rms-chip-hi { color: #fff; background: var(--ssp-blue); border-color: var(--ssp-blue); }
.rms-note { font-size: 14px; color: var(--mid); line-height: 1.65; margin: 0 0 14px; }
.rms-caveat { font-size: 13.5px; color: var(--mid); line-height: 1.65; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--rule); border-left: 3px solid var(--ssp-blue); background: #fff; }
.rms-src { font-size: 12.5px; color: var(--mid-lt); line-height: 1.6; margin: 12px 0 0; }

/* ── Delivery promise ────────────────────────────────────────────────────
   Ladder band, card and strip. One icon, three placements. Colours come
   from the brand vars so nothing here hardcodes blue or red. */

.dlv-ico { display:block; flex:0 0 auto; }
.dlv-ico .ssp-tile-plate { margin:0; }
/* Inverted plate for the blue ladder band, so the van reads on a dark ground. */
.dlv-ico-inv .ssp-tile-plate { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); color:#fff; }
.dlv-ico-inv .ssp-tile-plate svg { color:#fff; }

/* Ladder (homepage / hubs) */
.dlv-band { background:var(--ssp-blue); color:#fff; padding:52px 0; }
.dlv-band-in { max-width:1100px; }
.dlv-head { display:flex; gap:18px; align-items:flex-start; margin-bottom:24px; }
.dlv-h { font-family:var(--cond); text-transform:uppercase; letter-spacing:.02em;
         font-size:clamp(24px,3.4vw,32px); line-height:1.08; margin:0 0 6px; color:#fff; }
.dlv-kick { margin:0; font-size:15px; opacity:.92; max-width:640px; }
.dlv-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
             background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.22);
             border-radius:4px; overflow:hidden; }
.dlv-step { background:var(--ssp-blue); padding:20px 18px; }
.dlv-n { font-family:var(--cond); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
         color:#ffb3b6; font-weight:700; margin-bottom:7px; }
.dlv-t { font-family:var(--cond); text-transform:uppercase; font-size:21px; line-height:1.12; margin-bottom:7px; }
.dlv-d { font-size:13.5px; opacity:.9; line-height:1.55; }
.dlv-area { margin-top:20px; font-size:12.5px; opacity:.82;
            border-top:1px solid rgba(255,255,255,.25); padding-top:12px; }
@media (max-width:820px){ .dlv-steps { grid-template-columns:1fr; } }

/* Card (material / service pages) */
.dlv-card { background:#fff; border:1px solid var(--rule, #e2e5ee); border-radius:6px;
            padding:26px; margin:44px 0; max-width:760px; }
.dlv-card-top { display:flex; gap:14px; align-items:center; margin-bottom:12px; }
.dlv-card-h { font-family:var(--cond); text-transform:uppercase; font-size:23px; margin:0;
              letter-spacing:.02em; line-height:1.15; }
.dlv-rule { height:3px; width:46px; background:var(--ssp-red); margin:0 0 15px; }
.dlv-card-p { margin:0 0 14px; font-size:15px; line-height:1.7; }
.dlv-list { margin:0; padding:0; list-style:none; font-size:14.5px; }
.dlv-list li { padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--rule-lt, #eef0f5);
               line-height:1.6; }
.dlv-list li:first-child { border-top:0; }
.dlv-list li:before { content:""; position:absolute; left:0; top:16px; width:9px; height:9px;
                      border-left:2px solid var(--ssp-red); border-bottom:2px solid var(--ssp-red);
                      transform:rotate(-45deg); }
.dlv-fine { font-size:13px; color:var(--mid, #5c6270); border-top:1px solid var(--rule-lt, #eef0f5);
            padding-top:13px; margin:16px 0 0; line-height:1.6; }

/* Strip (under spec tables) */
.dlv-strip { display:flex; align-items:center; gap:18px; padding:17px 22px; margin:36px 0;
             border:1px solid var(--rule, #e2e5ee); border-radius:6px; background:#fff; }
.dlv-strip-tx { min-width:0; }
.dlv-strip-h { font-family:var(--cond); text-transform:uppercase; font-size:19px;
               margin:0 0 3px; letter-spacing:.02em; line-height:1.2; }
.dlv-strip-tx p { margin:0; font-size:13.5px; color:var(--mid, #5c6270); line-height:1.55; }
.dlv-strip-cta { margin-left:auto; font-family:var(--cond); text-transform:uppercase; font-size:13px;
                 letter-spacing:.05em; background:var(--ssp-red); color:#fff; padding:11px 19px;
                 border-radius:3px; white-space:nowrap; font-weight:600; text-decoration:none; }
.dlv-strip-cta:hover { background:#c9161d; color:#fff; }
@media (max-width:700px){
  .dlv-strip { flex-wrap:wrap; }
  .dlv-strip-cta { margin-left:0; width:100%; text-align:center; }
}
.dlv-area .dlv-more { color:#fff; text-decoration:underline; text-underline-offset:2px; white-space:nowrap; }
.dlv-area .dlv-more:hover { color:#ffb3b6; }
.dlv-fine a { color:var(--ssp-blue); text-decoration:underline; }
.dlv-strip-h a { color:inherit; text-decoration:none; }
.dlv-strip-h a:hover { color:var(--ssp-blue); }

/* Delivery promise in the page header (beside the title, per the sketch) */
.dlv-head-box { background: var(--ssp-blue-lt); padding: 24px 26px; }
.dlv-hb-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
              padding-bottom: 14px; border-bottom: 1px solid rgba(43,57,144,.14); }
.dlv-hb-top .ssp-tile-plate { width: 46px; height: 46px; background: #fff; }
.dlv-hb-top .ssp-tile-plate svg { width: 28px; height: 28px; }
.dlv-hb-label { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: .09em;
                text-transform: uppercase; color: var(--ssp-blue); }
.dlv-hb-rows { display: grid; gap: 11px; }
.dlv-hb-row { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; }
.dlv-hb-k { font-family: var(--cond); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
            color: var(--mid); font-weight: 700; }
.dlv-hb-v { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.3; }
.dlv-hb-v em { display: block; font-style: normal; font-size: 12.5px; color: var(--mid);
               font-weight: 400; margin-top: 2px; }
.dlv-hb-link { display: block; margin-top: 16px; padding-top: 13px;
               border-top: 1px solid rgba(43,57,144,.14); font-size: 12.5px;
               color: var(--ssp-blue); text-decoration: none; line-height: 1.45; }
.dlv-hb-link:hover { text-decoration: underline; }
@media (max-width: 980px) { .dlv-head-box { max-width: 420px; } }
.dlv-van-box .dlv-van { width: 100%; height: auto; display: block; }

/* Bounded on both sides: an unbounded max-width rule here overrode the 640px
   stacking rule further up the file and left the footer in three ~125px columns
   on a phone. Found on a 414px viewport, not by any check. */
@media (max-width: 1180px) and (min-width: 641px) { .ft-grid { grid-template-columns: repeat(3, 1fr); } }
/* Products mega-menu grew a third column for the guides. */
.ndrop-3 { grid-template-columns: repeat(3, 1fr); min-width: 660px; }
@media (max-width: 1200px) { .ndrop-3 { grid-template-columns: repeat(2, 1fr); min-width: 440px; } }

/* Thickness swatch: one stocked gauge drawn edge-on, inside a stock-table row.
   Fixed pixel size on purpose -- if this scaled with its column the gauges would no
   longer be comparable between pages, which is the only reason the graphic exists. */
/* Not scoped to .mat-spec: twin wall uses .tw-spec and needs the same cell. */
td.swc { width: 136px; padding-top: 4px; padding-bottom: 4px; line-height: 0; }
.thk-sw { display: block; }
/* On a phone four columns overflow. The fraction is what people actually read, so the
   decimal column is what gives way -- not the swatch, which is the point of the row. */
@media (max-width: 620px) {
  .mat-spec td.dec, .mat-spec th.dec { display: none; }
  td.swc { width: 120px; }
}

/* FAQ accordion, native <details>. Used by material, comparison and service pages.
   Lived as three rules copy-pasted into four page files until Aug 2026 -- and three
   files that used the class never got the copy, so acetal, acrylic mirrors and
   cut-to-size rendered raw unstyled toggles. One copy, here. */
.cmp-faq { border-bottom: 1px solid var(--rule-lt); padding: 14px 0; }
.cmp-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 15px; }
.cmp-faq p { margin: 10px 0 0; font-size: 14px; color: var(--mid); max-width: 700px; }

/* ── GALLERY LIGHTBOX (5.80.0) ───────────────────────────────────────────────
   The grid crops to 3:2 so every gallery on the site stays tidy. That is right
   for the grid and wrong for detail: on a sign photo the Braille dots and the
   character relief are the whole point and a thumbnail cannot carry them. So the
   thumbnail opens a full-size view, and the large file is only fetched on click. */
.ssp-photo .lb-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 4px; }
.ssp-photo .lb-open:focus-visible { outline: 3px solid var(--ssp-blue); outline-offset: 3px; }
.ssp-photo .lb-zoom { position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(19,25,38,.72); color: #fff; font: 600 19px/29px var(--cond, sans-serif); text-align: center; opacity: 0; transition: opacity .18s ease; pointer-events: none; }
.ssp-photo .lb-open:hover .lb-zoom, .ssp-photo .lb-open:focus-visible .lb-zoom { opacity: 1; }
.lb-hint { color: var(--mid-lt); }

body.lb-lock { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 9999; background: rgba(12,16,24,.94); display: flex; align-items: center; justify-content: center; padding: 3vmin; }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-fig img { max-width: 100%; max-height: 84vh; width: auto; height: auto; display: block; border-radius: 4px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); }
.lb-fig figcaption { font-family: var(--cond); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.82); text-align: center; max-width: 60ch; }
.lb-x, .lb-nav { position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer; border-radius: 50%; line-height: 1; }
.lb-x { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 30px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 34px; }
.lb-prev { left: 18px; }
.lb-next { right: 18px; }
.lb-x:hover, .lb-nav:hover { background: rgba(255,255,255,.22); }
.lb-x:focus-visible, .lb-nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 600px) { .lb-nav { width: 42px; height: 42px; font-size: 27px; } .lb-prev { left: 6px; } .lb-next { right: 6px; } }
@media (prefers-reduced-motion: reduce) { .ssp-photo .lb-zoom { transition: none; } }