/* product.css — the product sheet, and only the product sheet.
 *
 * Owner 2026-09-08: "Product page needs design rework … your product page should
 * be specific to the product not reintroducing the main page UX."
 *
 * So this page stops behaving like the homepage. No full-bleed photography, no
 * campaign headline, no manifesto. What is left is the document an engineer
 * actually wants for one part number: an identity block, the rated figures as a
 * ruled rail, the specification as a ruled table, the published battery hours as
 * a table, the photographs as numbered plates at a size you can read, the
 * applications, and one way to start a conversation.
 *
 * Same devices as solutions.css, deliberately — hairline rules, one accent where
 * a value needs weight, mono for anything that is a part number or a figure.
 *
 * Every colour below is one of site.css's :root tokens. Mobile first: one column is the base rule, wider screens add
 * columns.
 */

/* ── masthead: the identity of one part number ── */
.sheet-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px;
    font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#c4d2df}
.sheet-crumb a{color:#75b8ff;font-weight:700}
.sheet-crumb a:hover{text-decoration:underline}
.page-hero h1.sheet-pn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:clamp(1.9rem,7vw,3rem);letter-spacing:-.01em;line-height:1.05;
    overflow-wrap:anywhere}
.sheet-name{margin:10px 0 0;font-size:1.15rem;font-weight:600;color:var(--white)}
.sheet-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.sheet-hero-meta span{padding:5px 10px;border:1px solid var(--muted);color:#c4d2df;
    font-size:.64rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}

/* ── the sheet itself: one document, ruled ── */
.sheet{background:var(--white);border:1px solid var(--line);border-top:3px solid var(--navy)}
.sheet-block{padding:20px;border-top:1px solid var(--line);scroll-margin-top:88px}
.sheet-block:first-child{border-top:0}
.sheet-block>h2{margin:0 0 4px;font-size:1.15rem;line-height:1.2;letter-spacing:-.01em}
.sheet-block>h2+.sheet-note{margin-top:0}
.sheet-eyebrow{margin:0 0 6px;font-size:.66rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted)}
.sheet-note{margin:8px 0 0;max-width:78ch;color:var(--muted);font-size:.82rem;line-height:1.55}
.sheet-note b{color:var(--ink)}

/* ── 1. overview: the copy on the left, the key specifications on the right ──
   Owner 2026-09-10: "the right section will be the tech spec and the left will
   be the copy. the visual will be a reproduction of this UX card." One column
   on a phone — copy first, then the card — and two from the desktop width. */
.sheet-overview{display:grid;grid-template-columns:1fr;gap:28px}
.ov-copy{min-width:0}
.ov-copy>p:not(.sheet-eyebrow){margin:14px 0 0;max-width:64ch;color:var(--ink);
    font-size:.95rem;line-height:1.7}
.ov-copy>h2+p{margin-top:12px}
.ov-sub{margin:24px 0 0;font-size:.66rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--muted)}
.ov-copy .sheet-list{margin-top:8px}

/* THE KEY SPECIFICATIONS CARD — the Solar Hub Display's card, reproduced.
   A spreadsheet and nothing else (DOC-ISO-117 RULE 117-17): a group is a header
   row spanning both columns; under it the label in column one and the figure in
   column two, on one continuous set of gridlines. No third column, no accent
   rules, no rounded boxes around numbers. */
.keyspec{min-width:0;align-self:start;background:var(--white);border:1px solid var(--line);
    border-radius:8px;padding:14px 16px 16px;box-shadow:0 1px 2px rgba(6,29,59,.05)}
.keyspec-title{margin:0 0 10px;font-size:.72rem;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:var(--muted)}
.keyspec-title span{margin-left:8px;font-weight:400;letter-spacing:0;text-transform:none;
    color:#8da0b1}
.keyspec-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.84rem;line-height:1.4}
.keyspec-table th,.keyspec-table td{padding:6px 10px;border:1px solid var(--line);
    text-align:left;vertical-align:top;overflow-wrap:anywhere}
.keyspec-table th.keyspec-group{padding:7px 10px;background:var(--soft);color:var(--ink);
    font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.keyspec-table th[scope=row]{width:50%;font-weight:400;color:#3f5870}
.keyspec-table td{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}

/* What the Key Specifications card does not carry, said under it. */
.keyspec-absent{list-style:none;margin:10px 0 0;padding:0;font-size:.78rem;line-height:1.5;color:var(--muted)}
.keyspec-absent li{padding:2px 0}
.keyspec-absent b{font-weight:600;color:var(--ink)}
/* ── 2. performance across the load range: the Solar Hub Display's table ──
   Owner 2026-09-10: "use the hub display chart. this is one row." Its devices,
   in this site's tokens: small uppercase heads with the qualifier on a second
   line, figures right-aligned in tabular numerals, the break-even row green and
   a load the machine cannot sustain red. Wide on purpose — on a phone it scrolls
   inside its own frame rather than squeezing nine columns. */
.perf-wrap{overflow-x:auto;margin-top:14px;border-top:1px solid var(--line)}
.perf-table{width:100%;border-collapse:collapse;font-size:.84rem;font-variant-numeric:tabular-nums}
.perf-table th{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:bottom;
    font-size:.64rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
    white-space:nowrap}
.perf-table th span{display:block;margin-top:2px;font-weight:400;letter-spacing:0;text-transform:none;
    color:#8da0b1}
.perf-table th:first-child,.perf-table td:first-child{text-align:left}
.perf-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;
    color:var(--ink)}
.perf-table td:first-child{font-weight:700}
.perf-table .hint{color:var(--muted);font-size:.74rem;font-weight:400}
.perf-table td:first-child .hint{margin-left:6px}
.perf-table .np{color:var(--muted);font-weight:400}
.perf-table tr.is-breakeven td{background:#f0fdf4}
.perf-table tr.is-bad td{background:#fef2f2}
.perf-foot{max-width:none;margin-top:12px}

/* The one chart's style travels with it — includes/load-chart.php. */

/* ── the plates: numbered figures, framed, at a size you can read ── */
.sheet-plates{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}
.plate{margin:0;border:1px solid var(--line);background:var(--soft);padding:12px}
.plate img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    border:1px solid var(--line);background:var(--white)}
.plate figcaption{margin:9px 0 0;color:var(--muted);font-size:.76rem;line-height:1.45}
.plate figcaption b{color:var(--ink);font-weight:700}
/* A gallery video: the whole frame, any shape, on black (owner 2026-09-11). */
.plate.is-video video{display:block;width:100%;max-height:620px;aspect-ratio:auto;object-fit:contain;
    border:1px solid var(--line);background:#000}
/* Beside photographs it takes their 4:3 frame, so a tall video never stretches the row. */
@media(min-width:680px){.plate.is-video video{aspect-ratio:4/3;max-height:none}}

/* ── configuration points and applications: ruled lists, not cards ── */
.sheet-list{list-style:none;margin:12px 0 0;padding:0}
.sheet-list li{position:relative;padding:9px 0 9px 20px;border-top:1px solid var(--line);
    font-size:.88rem;line-height:1.5}
.sheet-list li:first-child{border-top:0;padding-top:2px}
.sheet-list li:before{content:"";position:absolute;left:0;top:18px;width:8px;height:1px;
    background:var(--blue)}
.sheet-list li:first-child:before{top:11px}

.sheet-apps{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.sheet-apps span{padding:9px 12px;border:1px solid var(--line);background:var(--soft);
    font-size:.78rem;font-weight:700;color:var(--ink)}

/* ── inquiry: the sheet ends here ── */
.sheet-inquiry{display:grid;gap:12px;padding:18px 20px;background:var(--soft);
    border-top:1px solid var(--line)}
.sheet-inquiry p{margin:0;max-width:70ch;color:var(--muted);font-size:.87rem;line-height:1.55}
.sheet-inquiry p b{color:var(--ink)}
.sheet-inquiry .button{justify-self:start}

/* ── not found ── */
.sheet-missing{margin:0;max-width:70ch;color:var(--muted);font-size:.95rem;line-height:1.6}
.sheet-missing b{color:var(--ink)}

/* ── tablet ── */
@media(min-width:680px){
  .sheet-block{padding:24px 26px}
  .sheet-plates{grid-template-columns:1fr 1fr}
  .sheet-inquiry{grid-template-columns:1fr auto;align-items:center;padding:20px 26px}
  .sheet-inquiry .button{justify-self:end}
}

/* ── desktop ── */
@media(min-width:1000px){
  .sheet-block{padding:26px 30px}
  /* Copy left, card right. The card takes the wider share because its longest
     figures — an emissions certification, an ambient range — are sentences. */
  .sheet-overview{grid-template-columns:minmax(0,46fr) minmax(0,54fr);column-gap:44px;align-items:start}
  .sheet-overview.no-card{grid-template-columns:1fr}
  /* Plates hold their size as the page widens; they gain columns, not scale. */
  .sheet-plates{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  .sheet-inquiry{padding:22px 30px}
}

/* ════════════════════════════════════════════════════════════════════════════
   THE HERO BAND — the first thing a buyer sees, and the thing he judged.

   Owner 2026-09-08: "published configuration hybrid solar generator seemed to be
   like made up words The picture is a square box not formatted Doesn't get me
   excited about looking more past this first section", then on the rendering:
   "Our logo needs to be in the design... We need to utilize more of the colors
   in the logo matching the blue and the orange... Colors should be complementary
   to the logo in the background and the header."

   THE PALETTE IS SAMPLED FROM THE LOGO FILE, NOT MATCHED BY EYE.
   assets/brand/logo-white.png and public/assets/img/logo-123esolar.png give the
   mark's blue #4588C3, its lighter #5998D2, its pale #8DB2DE and the sun's amber
   #F8A73C. The grounds are that same blue driven down in lightness, so the navy
   IS the logo rather than a generic navy sitting next to it.

   These tokens are declared under
   .product-sheet, a page class this page sets for itself, so nothing here can
   reach another page — including the header tint, which the owner asked for and
   which would otherwise mean touching the shared stylesheet.
   ═══════════════════════════════════════════════════════════════════════════ */
.product-sheet{
  --lg-blue:#4588C3; --lg-blue-lift:#5998D2; --lg-blue-pale:#8DB2DE;
  --lg-amber:#F8A73C; --lg-amber-lift:#FFBB5E;
  --lg-ground:#0C2A45; --lg-ground-deep:#061726; --lg-ground-lift:#164468;
  --lg-hair:rgba(137,178,222,.20);
}

/* The header, tinted to the logo's blue and closed with an amber hairline. */
.product-sheet .site-header{
  background:linear-gradient(180deg,var(--lg-ground-lift),var(--lg-ground));
  box-shadow:inset 0 -3px 0 -2px var(--lg-amber)}
.product-sheet .site-header .brand-lockup{color:var(--lg-blue-pale)}
.product-sheet .site-header .site-nav>a:not(.button):hover{color:var(--lg-amber)}
.product-sheet .site-header .button-primary{background:var(--lg-amber);color:#0A2035}
.product-sheet .site-header .button-primary:hover{background:var(--lg-amber-lift)}

/* ── the band ── */
.hero-band{position:relative;overflow:hidden;background:var(--lg-ground);color:#fff;
  display:grid;grid-template-columns:1fr}
.hero-band:before{content:"";position:absolute;inset:0;
  background:radial-gradient(118% 92% at 6% 38%,var(--lg-ground-lift) 0%,
             var(--lg-ground) 44%,var(--lg-ground-deep) 100%)}
.hero-band>*{position:relative;z-index:1;min-width:0}

.hero-band-copy{padding:38px 24px 42px;display:flex;flex-direction:column;justify-content:center}
.hero-band .sheet-crumb{color:var(--lg-blue-pale)}
.hero-band .sheet-crumb a{color:var(--lg-blue-lift)}

.hero-kicker{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lg-amber);margin-bottom:18px;line-height:1.5}
.hero-kicker em{font-style:normal;color:var(--lg-blue-pale)}

.hero-band h1.hero-h1{font-size:clamp(2.1rem,7.4vw,3.55rem);line-height:1.05;
  letter-spacing:-.035em;margin:0 0 18px;text-wrap:balance;max-width:15ch}
.hero-lede{font-size:1.02rem;line-height:1.55;color:#C6DCEE;margin:0 0 28px;max-width:46ch}
.hero-lede b{color:#fff;font-weight:600}
.hero-lede em{font-style:normal;color:var(--lg-amber);font-weight:600}

/* The figures are ONE specification read across, so they are a hairline rail —
   not five cards. A card says "separate object" five times over. */
.hero-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--lg-blue);margin:0 0 28px}
.hero-figs>div{padding:15px 12px 13px 0;border-right:1px solid var(--lg-hair);
  border-bottom:1px solid var(--lg-hair)}
.hero-figs dt{font-size:.6rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--lg-blue-pale);margin-bottom:6px;white-space:nowrap}
.hero-figs dd{margin:0;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.hero-figs dd i{font-style:normal;font-size:.55em;font-weight:700;
  color:var(--lg-blue-pale);margin-left:4px}

.hero-act{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.hero-act .button-primary{background:var(--lg-amber);color:#0A2035}
.hero-act .button-primary:hover{background:var(--lg-amber-lift)}
.hero-pn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem;
  letter-spacing:.05em;color:var(--lg-blue-pale)}
.hero-pn small{display:block;font-family:inherit;font-size:.55rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--lg-blue);margin-bottom:5px}

/* THE PHOTOGRAPH BLEEDS. Owner: "The picture is a square box not formatted."
   A framed plate reads as a catalogue thumbnail; this fills its half of the
   band, cropped rather than letterboxed, with the ground carried into it so the
   type has somewhere to sit. */
.hero-shot{position:relative;min-height:250px;order:-1}
.hero-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 58%}
.hero-shot:after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--lg-ground) 0%,rgba(12,42,69,.55) 30%,rgba(12,42,69,0) 72%)}
.hero-band.no-shot .hero-band-copy{padding-block:52px}

@media(min-width:620px){
  .hero-figs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:900px){
  .hero-band{grid-template-columns:minmax(0,48fr) minmax(0,52fr);align-items:stretch}
  .hero-band.no-shot{grid-template-columns:1fr}
  .hero-band-copy{padding:clamp(38px,4.4vw,62px) clamp(28px,3.6vw,54px)}
  .hero-shot{order:0;min-height:clamp(320px,40vw,520px)}
  .hero-shot:after{background:linear-gradient(94deg,var(--lg-ground) 0%,
      rgba(12,42,69,.72) 13%,rgba(12,42,69,0) 42%)}
  .hero-figs{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hero-figs>div{border-bottom:0}
  .hero-figs dd{font-size:clamp(1.05rem,1.7vw,1.5rem)}
}

/* ── the hero photograph, flipped by arrows ─────────────────────────────────
   Owner 2026-09-08: "having that button flip through it would be nice."
   The plates are stacked and cross-faded; nothing moves, so a long caption or a
   portrait photograph cannot shift the band's height. */
.hero-shot .hero-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:52% 58%;opacity:0;transition:opacity .32s ease;pointer-events:none}
.hero-shot .hero-plate.is-on{opacity:1}
@media(prefers-reduced-motion:reduce){.hero-shot .hero-plate{transition:none}}

.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.38);border-radius:50%;
  background:rgba(6,23,38,.46);color:#fff;font-size:1.5rem;line-height:1;
  backdrop-filter:blur(3px);transition:background .16s ease,border-color .16s ease}
.hero-arrow:hover{background:var(--lg-amber);border-color:var(--lg-amber);color:#0A2035}
.hero-arrow.prev{left:14px}
.hero-arrow.next{right:14px}

.hero-dots{position:absolute;left:0;right:0;bottom:16px;z-index:3;
  display:flex;justify-content:center;gap:7px}
.hero-dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.42)}
.hero-dots i.is-on{background:var(--lg-amber);transform:scale(1.25)}

/* The caption is HUB's own alt text — a description of the subject, never of
   how the record was made (RULE 120-09). */
.hero-caption{position:absolute;left:0;right:0;bottom:34px;z-index:3;margin:0;
  padding:0 62px;text-align:center;color:#D9E8F4;font-size:.74rem;letter-spacing:.02em;
  text-shadow:0 1px 10px rgba(6,23,38,.85)}

@media(max-width:899px){
  .hero-arrow{width:38px;height:38px;font-size:1.2rem}
  .hero-caption{display:none}
  .hero-dots{bottom:10px}
}

/* ── the company table ───────────────────────────────────────────────────────
   Carried across with company.php when the package replaced the old site
   (2026-09-10). Two columns, ruled, with the awaiting-release rows visibly
   lighter — a gap should look like a gap without shouting. */
.company-table{border-collapse:collapse;width:100%;max-width:960px;font-size:.95rem}
.company-table th{text-align:left;padding:18px 14px 8px;font-size:.7rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.company-table td{padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.company-table td.lab{width:34%;color:var(--muted)}
.company-table td.is-absent{color:#8da0b1;font-style:italic}
@media(max-width:640px){
  .company-table td.lab{width:auto;display:block;border-bottom:0;padding-bottom:0}
  .company-table td:not(.lab){display:block;padding-top:2px}
}

/* ── size it for your site (DOC-ISO-119) ── the engineer's own load, read off the
   published table. Owner 2026-09-10. */
.sz-in{display:grid;gap:12px;grid-template-columns:1fr;margin:16px 0 0;max-width:960px}
.sz-in label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:700;color:var(--ink)}
.sz-in label span{font-weight:400;color:var(--muted)}
.sz-in input{padding:9px 10px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:.95rem;
    font-variant-numeric:tabular-nums;background:var(--white)}
.sz-in input:focus{outline:2px solid var(--lg-blue,#4588C3);outline-offset:1px}
.sz-verdict{margin:14px 0 0;padding:9px 12px;border-radius:6px;font-size:.86rem;font-weight:700}
.sz-verdict.sz-ok{background:#f0fdf4;color:#166534}
.sz-verdict.sz-bad{background:#fef2f2;color:#b42318}
.sz-table th[scope=row]{text-align:left;font-weight:400;color:var(--muted);font-size:.82rem;text-transform:none;letter-spacing:0}
.sz-table td{font-weight:700}
.sz-foot{max-width:none}
@media(min-width:760px){.sz-in{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* The site address (owner 2026-09-11: "add the address function here"): a full row
   under the loads, and the sun that site gets beneath it. */
.sz-in .sz-addr{grid-column:1/-1}
.sz-sun{margin:12px 0 0;padding:9px 12px;border-radius:6px;background:var(--soft,#f4f7fa);color:var(--ink);font-size:.86rem;max-width:960px}
.sz-sun-m{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;font-weight:700}
.sz-sun-m select{padding:6px 8px;border:1px solid var(--line);border-radius:6px;font:inherit;font-weight:400;background:var(--white);max-width:100%}

/* The engineering sheet, beside the sizing button. */
.product-sheet .hero-pdf{display:inline-block;padding:10px 0;color:var(--lg-blue-pale,#8DB2DE);font-size:.78rem;font-weight:700;
    letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor}
.product-sheet .hero-pdf:hover{color:#fff}

/* ── features and benefits (owner 2026-09-11: "add bullet to web") ── the bullet
   card the engineering sheet carries, under the overview text. */
.fb-card{margin:24px 0 0;padding:16px 20px 8px;border:1px solid var(--line);border-radius:14px;background:var(--soft,#f4f7fa)}
.fb-card .ov-sub{margin:0 0 10px}
.fb-card ul{margin:0;padding-left:18px}
.fb-card li{margin:0 0 9px;line-height:1.5;color:var(--muted,#5d7186)}
.fb-card li b{color:var(--ink,#102846);font-weight:700}

/* ── the sized engineering sheet (owner 2026-09-11): a PDF icon button beside
   the verdict, once a load is entered ── */
.sz-pdf{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:12px 0 0}
.sz-pdf[hidden]{display:none}
.sz-pdf-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--lg-ground,#0C2A45);
    border-radius:8px;background:#fff;color:var(--lg-ground,#0C2A45);font-size:.78rem;font-weight:800;letter-spacing:.1em;
    text-transform:uppercase;text-decoration:none}
.sz-pdf-btn:hover,.sz-pdf-btn:focus-visible{background:var(--lg-ground,#0C2A45);color:#fff}
.sz-pdf-btn svg{width:18px;height:18px;flex:none}
.sz-pdf-note{color:var(--muted,#5d7186);font-size:.84rem}

/* ── the case study: against the same generator alone (owner 2026-09-11) ── */
.case-lead{max-width:72ch;margin:6px 0 16px;font-size:1.02rem;line-height:1.6;color:var(--ink,#102846)}
.case-lead b{font-weight:800}
.case-table tr.is-head td{font-weight:700;background:var(--soft,#f4f7fa)}
.case-table td.is-more{color:var(--muted,#5d7186)}
.case-pdf{margin:0 0 16px}
/* the two machines side by side (owner 2026-09-11: "the photo of the modular
   system vs the photo of the stand alone system") */
.case-shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:4px 0 18px;max-width:960px}
.case-shot{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--white,#fff);display:flex;flex-direction:column}
.case-shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--soft,#f4f7fa)}
.case-shot figcaption{display:grid;gap:3px;padding:10px 14px 12px;font-size:.86rem;line-height:1.45;color:var(--muted,#5d7186)}
.case-shot figcaption b{color:var(--ink,#102846);font-size:.95rem;font-weight:800}
.case-shot.is-ours{border-color:var(--lg-ground,#0C2A45)}
@media (max-width:640px){.case-shots{grid-template-columns:1fr}}