/* ==========================================================================
   Lava New Media, 2026 design: case study page type

   Sections in the order of design/case-study-template/TEMPLATE.md. Desktop
   values are the 1440 board, phone values the 390 board, measured with the
   site's own fonts; the widths between follow SPEC.md section 6. Tokens,
   fonts, masthead, buttons, links, eyebrows and the footer are lava.css.

   The staged-object, reveal and close-actions rules in "shared with the
   home page" below repeat home.css's values exactly: this page does not
   load home.css, and this run leaves the home page's sheet alone. When a
   third page type needs them they move to lava.css, once.
   ========================================================================== */

:root {
  --offwhite:    #F5F4F2;                  /* What we did, Next */
  --rule-warm:   #DDDAD4;                  /* hairlines in the numbered list */
  --edge-warm:   #E3E0DB;                  /* the Next object's edge */
  --edge-before: #202022;                  /* the before object's edge */

  /* The content column's left edge: the margin, or centred above 1440. Only
     ever used on elements as wide as the viewport (as in home.css). */
  --edge: max(var(--margin), (100% - var(--content)) / 2);

  /* The two-column sections: label column, gap, fluid body column. 440 of
     the 1272 column at 1440, the same share below it. */
  --split: min(440px, 34.6%);
}

/* --------------------------------------------- shared with the home page -- */
/* A screenshot: rounded rectangle, hairline edge. object-fit keeps each
   object's ratio whatever the file's height. On the dark grounds the object
   is its hairline and nothing else (SPEC.md section 1). */
.shot {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-object);
  border: 1px solid var(--edge-dark);
  background: var(--near-black);
}
.shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; object-position: top; }

/* Button plus text link, side by side; stacked and full width on the phone. */
.actions { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
@media (max-width: 767px) {
  .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
  .actions .link { text-align: center; padding: 8px; }
}

/* Reveals: armed only once lava.js adds .js-anim, so a blocked script never
   hides anything. Each block fades from 0.001 and rises 16px when it enters
   the viewport, once. */
.js-anim .reveal {
  opacity: 0.001; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Only an object that is a link moves: it lifts 4px, and on white its
   shadow deepens by about a fifth. */
a.shot { transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); }
a.shot:hover, a.shot:focus-visible { transform: translateY(-4px); }

/* The section labels: lava.css's eyebrow (short rule, spaced caps) in the
   colours of each ground. Red on white, gray under gold on dark, white on
   the red band. */
.eyebrow--red::before { background: var(--red); }
.eyebrow--red .eyebrow__label { color: var(--red); }
.cs-ba .eyebrow__label { color: var(--gray-3); }
.eyebrow--on-red::before { background: rgba(255, 255, 255, 0.6); }
/* 88%, not the board's 80%: 80% white over the gradient where the label
   sits is 4.4:1, under SPEC's 4.5:1 floor for 12px text; 88% is 5.2:1. The
   rule above it is decoration and keeps its 60%. */
.eyebrow--on-red .eyebrow__label { color: rgba(255, 255, 255, 0.88); }

/* Held words. The last two words of a heading or caption (.nw, lava.css)
   and a {phrase} in a headline's copy (.cs-keep, helpers.php cs_text()) are
   inline-blocks here rather than nowrap: each stays whole on one line when
   it fits, and wraps inside itself when it cannot (large text, a reader's
   text-spacing overrides), so held words can never run over the hero object
   or off the screen. A {phrase} holds from 768 up, where every one fits
   (the red band's is wider than a phone), and in the hero H1 from 375. */
.case-study .nw { display: inline-block; white-space: normal; }
@media (min-width: 768px) { .cs-keep { display: inline-block; } }
@media (min-width: 375px) { .cs-hero h1 .cs-keep { display: inline-block; } }

/* The section heading, Raleway 500. */
.cs-h2 { font: 500 34px/1.25 var(--display); letter-spacing: -0.5px; color: var(--ink); }
@media (max-width: 767px) { .cs-h2 { font-size: 28px; line-height: 1.22; } }

/* ----------------------------------------------------------------- hero -- */
/* Dark. Text on the margin, the object to the right leaving the page by the
   home page hero's depth (70% on screen at 1440 and 1920, never less than
   611px in from the left, anchored to the column above 1920: SPEC.md
   section 5, one edge and one depth on every page). The facts strip under
   both, on a hairline. */
.cs-hero {
  position: relative;
  background: var(--near-black); color: var(--white);
  overflow-x: clip;
  padding-bottom: 52px;
  --obj-w: min(1000px, 69.44%);
  --obj-left: max(100% - var(--obj-w) * 0.7, 611px);
}
@media (min-width: 1921px) {
  .cs-hero { --obj-left: calc(50% + 260px); --obj-w: calc((50% - 260px) / 0.7); }
}

/* Text and object share one cell; the object starts 124px under the
   masthead (200 from the page top at 1440) and the text 36px below that. */
.cs-hero__stage { display: grid; grid-template-columns: 100%; padding-top: 124px; }
.cs-hero__text {
  grid-area: 1 / 1; align-self: start; justify-self: start;
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 26px;
  margin-top: 36px; padding-left: var(--edge);
  /* never reaches within 40px of the object */
  max-width: calc(var(--obj-left) - 40px);
}
.cs-hero__eyebrow { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.cs-hero h1 { max-width: 8.4em; font: 700 60px/1.06 var(--display); letter-spacing: -1.5px; }
.cs-hero__red { color: var(--red); }
.cs-hero__sub { max-width: 22em; font: 400 19px/1.6 var(--body); color: var(--gray-4); }
/* One "Visit" link, or an app's two store links side by side. */
.cs-hero__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 6px; }
.cs-hero__link { font-size: 16px; }

.cs-hero__object {
  grid-area: 1 / 1; position: relative; z-index: 1;
  width: var(--obj-w); margin-left: var(--obj-left);
}
/* 998 x 620 inside its hairline at 1440 (the board), from the home page's
   own Cronimet crop; 1440/906 on the phone, as on the home page. */
.shot--hero { --ar: 998 / 620; }

/* Facts: four tracks on the hero's full width. The first two share the
   space from the column's edge to the object's left edge, the last two the
   space from the object to the column's right edge, so the third column
   starts exactly on the object's left edge (740 at 1440) at every desktop
   width, never "almost" on it. The hairline spans the column. */
.cs-facts {
  margin: 78px 0 0;
  display: grid; column-gap: 40px;
  grid-template-columns:
    calc(var(--edge) - 40px)
    repeat(2, calc((var(--obj-left) - var(--edge) - 80px) / 2))
    repeat(2, calc((100% - var(--edge) - var(--obj-left) - 40px) / 2))
    calc(var(--edge) - 40px);
}
/* Rows: the hairline, the labels, the values. Each fact is a subgrid of the
   last two, so every value starts on one line even when a label wraps. */
.cs-facts { grid-template-rows: auto auto auto; row-gap: 10px; }
.cs-facts::before { content: ""; grid-column: 2 / 6; grid-row: 1; height: 1px; margin-bottom: 24px; background: var(--hairline-dark); }
.cs-facts__item { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; }
.cs-facts__item:nth-of-type(1) { grid-column: 2; }
.cs-facts__item:nth-of-type(2) { grid-column: 3; }
.cs-facts__item:nth-of-type(3) { grid-column: 4; }
.cs-facts__item:nth-of-type(4) { grid-column: 5; }
.cs-facts dt { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-3); container-type: inline-size; }
/* "Working together since" reads "Since" wherever its column is too narrow
   for the whole label (a narrow desktop column, and every phone). */
@container (max-width: 240px) { .cs-facts__long { display: none; } }
.cs-facts dd { margin: 0; font: 400 16px/1.5 var(--body); color: var(--white); }
.cs-facts__line { display: block; }

/* 768 to 1023: stacked. Text, then the object at content width, whole. */
@media (max-width: 1023px) {
  .cs-hero__stage { padding-top: 72px; }
  .cs-hero__text { margin-top: 0; padding-inline: var(--margin); max-width: none; }
  .cs-hero__object { grid-area: 2 / 1; width: auto; margin: 46px var(--margin) 0; }
  .cs-hero__text { min-width: 0; max-width: 100%; }
  .cs-facts {
    margin: 36px var(--margin) 0;
    grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; column-gap: 20px; row-gap: 22px;
  }
  .cs-facts::before { grid-column: 1 / -1; margin-bottom: 2px; }
  .cs-facts__item:nth-of-type(n) { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; gap: 10px; }
}
/* Phone, the 390 board. The masthead is 62 tall; the eyebrow starts at 108. */
@media (max-width: 767px) {
  .cs-hero__stage { padding-top: 46px; }
  .cs-hero__text { gap: 18px; }
  .cs-hero__eyebrow { font-size: 11px; }
  .cs-hero h1 { max-width: none; font-size: 40px; line-height: 1.08; letter-spacing: -1px; }
  .cs-hero__sub { max-width: none; font-size: 16px; }
  .cs-hero__links { margin-top: 0; }
  .cs-hero__link { font-size: 15px; }
  .shot--hero { --ar: var(--ar-hero-phone, 1440 / 906); }
  .cs-facts__item { gap: 6px; }
  .cs-facts dt { font-size: 11px; }
  .cs-facts dd { font-size: 14px; line-height: 1.45; }
}

/* 430 and below: the first facts column is as wide as its longest line (up
   to 60%), so a client line like "Aliquippa, Pennsylvania" never leaves one
   word on a line of its own; the second column takes the rest. */
@media (max-width: 430px) {
  .cs-facts { grid-template-columns: fit-content(60%) minmax(0, 1fr); }
}

/* ------------------------------------------------- two-column sections -- */
/* The problem, what we did, what made it hard: label column (rule,
   eyebrow, heading), 64px, then the fluid body column. One column below
   1024. */
.cs-split {
  display: grid; grid-template-columns: var(--split) minmax(0, 1fr);
  column-gap: 64px; align-items: start;
}
.cs-split__head { display: flex; flex-direction: column; gap: 18px; }
.cs-body { display: flex; flex-direction: column; gap: 22px; padding-top: 6px; font: 400 19px/1.65 var(--body); color: var(--gray-1); }
@media (max-width: 1023px) {
  .cs-split { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .cs-body { padding-top: 0; }
}
@media (max-width: 767px) {
  .cs-split__head { gap: 16px; }
  .cs-body { gap: 16px; font-size: 16px; line-height: 1.6; }
}

/* 1024 to 1279: a wider label column, so no heading breaks inside a
   phrase ("Built on their standards," is 363px at 34px). */
@media (min-width: 1024px) and (max-width: 1279px) { :root { --split: max(372px, 34.6%); } }

/* 2. The problem, white. */
.cs-problem { padding: 140px 0 48px; }
@media (max-width: 1023px) { .cs-problem { padding: 104px 0 48px; } }
@media (max-width: 767px)  { .cs-problem { padding: 72px 0 40px; } }

/* 3. What we did, warm off-white. The label column as in the problem; the
   right column holds the intro line, then the list between warm hairlines
   with red Raleway numerals (TEMPLATE.md section 3). */
.cs-did { background: var(--offwhite); padding: 130px 0 64px; }
.cs-did__body { padding-top: 6px; }
.cs-did__intro { font: 400 17px/1.6 var(--body); color: var(--gray-2); }
.cs-list { margin: 30px 0 0; padding: 0; list-style: none; }
.cs-list li { display: flex; align-items: flex-start; gap: 28px; padding: 24px 0; border-top: 1px solid var(--rule-warm); }
.cs-list li:last-child { border-bottom: 1px solid var(--rule-warm); }
.cs-list__num { flex: none; min-width: 1.364em; font: 600 44px/1 var(--display); letter-spacing: -1px; color: var(--red); }   /* 60px */
.cs-list__text { padding-top: 11px; font: 400 17px/1.55 var(--body); color: var(--ink); }
@media (max-width: 1023px) {
  .cs-did { padding: 96px 0 64px; }
  .cs-did__body { padding-top: 0; }
  .cs-list { margin-top: 28px; }
}
@media (max-width: 767px) {
  .cs-did { padding: 64px 0 64px; }
  .cs-did__intro { font-size: 16px; }
  .cs-list li { gap: 18px; padding: 18px 0; }
  .cs-list__num { min-width: 1.375em; font-size: 32px; }   /* 44px */
  .cs-list__text { padding-top: 5px; font-size: 15px; line-height: 1.5; }
}

/* ------------------------------------------------------ before and after -- */
/* Dark. Desktop: one grid on the content column. Lines at 26.415% and
   44.025% of it (336 and 560 of 1272): the before spans the first two
   tracks, the after the last two, so they overlap by 224px at 1440 with the
   after in front. Row 1 is the before's label and caption, row 2 starts on
   the before image's top edge, and the after's own label starts there too:
   the one shared horizontal edge in the section, exact by construction. The
   phone sits in the after's box, 170px left of it and 260 wide at 1440
   (-18.162% and 27.778% of the after), its bottom 120px below the after's
   bottom edge; the after keeps 120px under it so the stage holds the phone. */
.cs-ba { position: relative; background: var(--near-black); color: var(--white); padding: 130px 0 108px; }
.cs-ba__head { display: flex; flex-direction: column; gap: 18px; }
.cs-ba .cs-h2 { color: var(--white); }

.cs-ba__stage {
  margin-top: 104px;
  display: grid; grid-template-columns: 26.415% 17.61% minmax(0, 1fr); grid-template-rows: auto auto;
  row-gap: 14px;
}
.cs-ba__before { grid-column: 1 / 3; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; row-gap: 14px; position: relative; z-index: 1; }
.cs-ba__after  { grid-column: 2 / 4; grid-row: 2; display: flex; flex-direction: column; gap: 14px; margin-bottom: 120px; position: relative; z-index: 2; }
.cs-ba__before .shot { align-self: start; }

.cs-ba__cap { display: flex; flex-direction: column; gap: 6px; }
.cs-ba__after .cs-ba__cap { align-items: flex-end; text-align: right; }
.cs-ba__label { font: 600 22px/1.18 var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--white); }
.cs-ba__label--after { color: var(--gold); }
.cs-ba__caption { font: 400 15px/1.5 var(--body); color: var(--gray-3); }

.cs-ba__objects { position: relative; }

/* The before, full colour under a near-black veil, behind. */
.shot--before { --ar: var(--ar-case, 558 / 360); border-radius: 16px; border-color: var(--edge-before); }
.shot--before::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, 0.62); }
/* The after: the tall home capture. Cronimet's is cut at 1596 of its
   1440-wide rows, between the first two items of the capabilities list (the
   board's 1000 tall would cut through a paragraph); a case study whose crop
   is another height sets --ar-wide from its data (before-after.php). */
.shot--after { --ar: var(--ar-wide, 1440 / 1596); }
/* The phone capture: the phone's own home page to the bottom of its hero,
   as a device (lava.css .device, includes/device.php): its own height, the
   ink bezel round it. */
.cs-ba__phone { position: absolute; left: -18.162%; bottom: -120px; width: 27.778%; z-index: 3; }

/* Below 1024: stacked, the 390 board. Before, then the after as a landscape
   object, then the phone centred on the page, its top 80px above the
   after's bottom edge. The phone is 220 of 342 at 390, never over 260. */
@media (max-width: 1023px) {
  .cs-ba { padding: 96px 0 88px; }
  .cs-ba__stage { display: flex; flex-direction: column; gap: 34px; margin-top: 36px; }
  .cs-ba__before, .cs-ba__after { display: flex; flex-direction: column; gap: 10px; margin: 0; }
  .cs-ba__after .cs-ba__cap { align-items: flex-start; text-align: left; }
  .cs-ba__objects { display: flex; flex-direction: column; align-items: center; }
  .cs-ba__objects .shot--after { align-self: stretch; }
  .shot--before { --ar: var(--ar-case, 340 / 200); }
  /* The landscape crop of the same capture, served by its own <source>; its
     shape is the data file's images.after.narrow.ratio, set inline by
     before-after.php. Without a narrow crop the desktop object stays. */
  .shot--after { --ar: var(--ar-narrow, var(--ar-wide, 1440 / 1596)); }
  .cs-ba__phone { position: relative; left: auto; bottom: auto; width: min(64.33%, 260px); margin-top: -80px; }
}
@media (max-width: 767px) {
  .cs-ba { padding: 72px 0 72px; }
  .cs-ba__head { gap: 16px; }
  .cs-ba__label { font-size: 18px; }
  .cs-ba__caption { font-size: 14px; }
}

/* No before (images.before null): the after, its caption and the phone in
   the same composition, the after on the column's right edge, taking the
   before's row as well so its caption starts where the before's would. */
.cs-ba--solo .cs-ba__after { grid-row: 1 / -1; }

/* An app (no website objects): two phone screens side by side, centred on
   the page under a centred caption; one above the other at 767 and below.
   Each is a device at its screen's own height. */
.cs-ba__app { margin-top: 104px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.cs-ba__app .cs-ba__cap { align-items: center; text-align: center; }
.cs-ba__phones { display: flex; justify-content: center; align-items: flex-start; gap: 64px; }
.cs-ba__app-phone { width: 260px; }
@media (max-width: 1023px) {
  .cs-ba__app { margin-top: 36px; gap: 20px; }
  .cs-ba__phones { gap: 40px; }
}
@media (max-width: 767px) {
  .cs-ba__phones { flex-direction: column; align-items: center; gap: 32px; width: 100%; }
  .cs-ba__app-phone { width: min(64.33%, 260px); }
}

/* -------------------------------------------------------- what changed -- */
/* The red band, --lava-red-band (lava.css). */
.cs-changed { background: var(--lava-red-band); color: var(--white); padding: 120px 0 148px; }
.cs-changed__inner { display: flex; flex-direction: column; align-items: flex-start; }
.cs-changed__line { margin-top: 22px; max-width: 10em; font: 700 64px/1.08 var(--display); letter-spacing: -1.8px; }
.cs-changed__body { margin-top: 30px; max-width: 900px; font: 400 19px/1.65 var(--body); }
@media (max-width: 1023px) {
  .cs-changed { padding: 96px 0 112px; }
  .cs-changed__line { font-size: 52px; letter-spacing: -1.4px; }
}
@media (max-width: 767px) {
  .cs-changed { padding: 72px 0 88px; }
  .cs-changed__line { margin-top: 16px; max-width: none; font-size: 40px; letter-spacing: -1px; }
  .cs-changed__body { margin-top: 20px; font-size: 16px; line-height: 1.6; }
}

/* --------------------------------------------------- what made it hard -- */
.cs-hard { padding: 130px 0 48px; }
.cs-hard.has-quote { padding-bottom: 140px; }
@media (max-width: 1023px) { .cs-hard { padding: 96px 0 48px; } .cs-hard.has-quote { padding-bottom: 100px; } }
@media (max-width: 767px)  { .cs-hard { padding: 72px 0 40px; } .cs-hard.has-quote { padding-bottom: 72px; } }

/* 7. Quote, 110px under the two columns: the home page's pull quote at a
   smaller size. The mark's box is pulled left by Raleway 700's side bearing
   (0.046875em) so its ink sits on the margin, as on the home page. */
.cs-quote { margin-top: 100px; display: flex; flex-direction: column; align-items: flex-start; }
.cs-quote__mark {
  margin: 0 0 -74px -0.046875em;
  font: 700 180px/1 var(--display); color: var(--red);
  user-select: none; pointer-events: none;
}
.cs-quote__text { max-width: 16em; font: 500 40px/1.18 var(--display); letter-spacing: -0.8px; color: var(--ink); }
.cs-quote__text p { text-wrap: balance; }
.cs-quote__who { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.cs-quote__who img { flex-shrink: 0; }
.cs-quote__rule { flex: none; width: 1px; height: 40px; background: var(--hairline-light); }
.cs-quote__name { display: block; font: 600 16px/1.3 var(--body); color: var(--ink); }
.cs-quote__title { display: block; margin-top: 4px; font: 400 15px/1.3 var(--body); color: var(--gray-2); }
@media (max-width: 767px) {
  .cs-quote { margin-top: 48px; }
  .cs-quote__mark { margin-bottom: -48px; font-size: 120px; }
  .cs-quote__text { font-size: 24px; line-height: 1.25; letter-spacing: -0.5px; }
  .cs-quote__who { gap: 18px; margin-top: 24px; }
  .cs-quote__who img { width: 120px; height: auto; }
  .cs-quote__rule { height: 36px; }
  .cs-quote__name { font-size: 15px; }
  .cs-quote__title { margin-top: 2px; font-size: 14px; line-height: 1.5; }
}

/* ----------------------------------------------------------------- next -- */
/* Warm off-white, no hairline above it. Text left, the next case study's
   screenshot right as a light object with the home page's light-ground
   shadow (the Ward object's values in home.css). */
.cs-next { background: var(--offwhite); padding: 64px 0; }
.cs-next__inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.cs-next__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cs-next__eyebrow { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--red); }
.cs-next__title { font: 500 40px/1.15 var(--display); letter-spacing: -0.8px; color: var(--ink); }
.cs-next__line { font: 400 17px/1.55 var(--body); color: var(--gray-2); }
.cs-next__link { margin-top: 8px; font-size: 15px; }
.cs-next__object { flex: none; width: min(520px, 40.88%); }
.shot--next {
  --ar: 1440 / 752;
  border-radius: 16px; border-color: var(--edge-warm);
  --shadow: 0 40px 80px rgba(15,15,15,0.16), 0 10px 24px rgba(15,15,15,0.08);
  --shadow-hover: 0 40px 80px rgba(15,15,15,0.19), 0 10px 24px rgba(15,15,15,0.10);
  box-shadow: var(--shadow);
}
.shot--next:hover, .shot--next:focus-visible { box-shadow: var(--shadow-hover); }
@media (max-width: 1023px) {
  .cs-next { padding: 56px 0 72px; }
  .cs-next__inner { flex-direction: column; align-items: stretch; gap: 24px; }
  .cs-next__object { order: -1; width: auto; }
}
@media (max-width: 767px) {
  .cs-next { padding: 48px 0 72px; }
  .cs-next__inner { gap: 16px; }
  .cs-next__text { gap: 8px; }
  .cs-next__eyebrow { font-size: 11px; }
  .cs-next__title { font-size: 28px; line-height: 1.2; letter-spacing: -0.5px; }
  .cs-next__line { font-size: 15px; line-height: 1.5; }
  .cs-next__link { margin-top: 4px; }
  .shot--next {
    --shadow: 0 24px 48px rgba(15,15,15,0.16), 0 6px 14px rgba(15,15,15,0.08);
    --shadow-hover: 0 24px 48px rgba(15,15,15,0.19), 0 6px 14px rgba(15,15,15,0.10);
  }
}
@media (max-width: 430px) {
  .shot--next {
    --shadow: 0 10px 20px rgba(15,15,15,0.12), 0 2px 6px rgba(15,15,15,0.06);
    --shadow-hover: 0 10px 20px rgba(15,15,15,0.14), 0 2px 6px rgba(15,15,15,0.07);
  }
}

/* ---------------------------------------------------------------- close -- */
/* Near-black, continuous with the footer; the footer's hairline is the only
   seam. Identical on every case study. */
.cs-close { background: var(--near-black); color: var(--white); }
.cs-close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 120px; padding-bottom: 100px; }
.cs-close h2 { font: 700 56px/1.08 var(--display); letter-spacing: -1.5px; }
.cs-close__sub { font: 400 19px/1.6 var(--body); color: var(--gray-4); }
.cs-close .actions { align-self: stretch; }
@media (max-width: 1023px) {
  .cs-close__inner { padding-top: 100px; padding-bottom: 88px; }
  .cs-close h2 { font-size: 48px; }
}
@media (max-width: 767px) {
  .cs-close__inner { gap: 18px; padding-top: 64px; padding-bottom: 80px; }
  .cs-close h2 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
  .cs-close__sub { font-size: 16px; }
  .cs-close .actions { margin-top: 6px; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  a.shot { transition: none; }
  a.shot:hover, a.shot:focus-visible { transform: none; }
}