/* =========================================================================
   New-location launch page.

   Art direction mirrors the LIVE HOME PAGE: light warm grounds, soft red
   radial washes, 20px rounded cards with faint borders and very soft shadows,
   oldSchool 800 display over Inter 300, red numerals and accents.
   Red is #E13845 (the site's own), NOT the franchise #C8102E.

   SPECIFICITY WARNING — read before editing:
   The Elementor kit styles `.elementor-kit-6 h1/h2/a` at (0,1,1). Any bare
   `.i1n-*` rule is (0,1,0) and LOSES to it silently — that has already eaten
   the display font and the button colours on this site once each. Every rule
   below that sets font-family, font-weight or color on a heading or a link is
   therefore prefixed with `.i1-scope`. Keep it that way.

   Fonts are not declared here. "oldSchool" and Inter already load site-wide
   via the Elementor kit, so this page downloads none.
   ========================================================================= */

/* ---- scoped reset (mirrors careers-page.css) ---- */
.i1-scope, .i1-scope *, .i1-scope *::before, .i1-scope *::after { box-sizing: border-box; }
.i1-scope { font-family: var(--i1-body); color: var(--i1-ink); font-weight: var(--i1-w-body); }
.i1-scope img { max-width: 100%; height: auto; }
.i1-scope button { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
  .i1-scope *, .i1-scope *::before, .i1-scope *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.i1n { overflow-x: hidden; background: var(--i1-white); }
.i1n-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.i1n-wrap--narrow { max-width: 720px; }

/* =========================== type =========================== */
.i1-scope .i1n-kicker {
  font-family: var(--i1-body); font-size: 13px; font-weight: var(--i1-w-med);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--i1-red); margin: 0 0 14px;
}
.i1-scope .i1n-kicker--light { color: #FF8A93; }

/* The site's device: heavy uppercase line, lighter lowercase tail */
.i1-scope .i1n-h1 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(32px, 5.6vw, 62px); line-height: 1.03;
  letter-spacing: var(--i1-track); text-transform: uppercase;
  color: var(--i1-ink); margin: 0 0 18px; text-wrap: balance;
}
.i1-scope .i1n-h1 em,
.i1-scope .i1n-h2 em {
  display: block; font-style: normal; text-transform: none;
  font-family: var(--i1-display); font-weight: var(--i1-w-body);
  font-size: 0.6em; letter-spacing: var(--i1-track-sm);
  color: var(--i1-slate); margin-top: 6px;
}
.i1-scope .i1n-h2 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(26px, 3.9vw, 44px); line-height: 1.06;
  letter-spacing: var(--i1-track); text-transform: uppercase;
  color: var(--i1-ink); margin: 0 0 18px; text-wrap: balance;
}
.i1-scope .i1n-h2--light { color: var(--i1-white); }
.i1-scope .i1n-h2--light em { color: rgba(255,255,255,0.66); }
.i1-scope .i1n-h3 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(19px, 2.2vw, 24px); text-transform: uppercase;
  letter-spacing: var(--i1-track-sm); color: var(--i1-ink); margin: 56px 0 20px;
}
.i1-scope .i1n-lede {
  font-size: clamp(16px, 1.8vw, 18px); line-height: 1.7;
  font-weight: var(--i1-w-body); color: var(--i1-slate);
  max-width: 62ch; margin: 0 0 32px;
}
.i1-scope .i1n-lede--light { color: rgba(255,255,255,0.74); }
.i1-scope .i1n-note {
  font-size: 15px; line-height: 1.7; color: var(--i1-slate);
  max-width: 66ch; margin: 28px 0 0;
}
.i1-scope .i1n-note--light { color: rgba(255,255,255,0.66); }
.i1-scope .i1n-note a, .i1-scope .i1n-lede a { color: var(--i1-red); text-decoration: underline; }

.i1-scope .i1n-prose { font-size: 16px; line-height: 1.75; color: var(--i1-slate); }
.i1-scope .i1n-prose p { margin: 0 0 14px; }
.i1-scope .i1n-prose--sm { font-size: 15px; }

.i1-scope .i1n-date {
  font-size: 13px; font-weight: var(--i1-w-med); letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--i1-slate); margin: 0 0 10px;
}

/* The opening line: the single most important fact on the page */
.i1-scope .i1n-opening {
  display: inline-block; font-family: var(--i1-body);
  font-size: clamp(15px, 1.7vw, 17px); font-weight: var(--i1-w-med);
  letter-spacing: 0.02em; color: var(--i1-red);
  background: var(--i1-red-soft); border-radius: 999px;
  padding: 9px 20px; margin: 0 0 22px;
}

/* =========================== sections =========================== */
.i1n-sec { padding: clamp(58px, 7.5vw, 104px) 0; }
.i1n-sec--off { background: var(--i1-off); }
.i1n-sec--wash {
  background:
    radial-gradient(58% 62% at 78% 18%, rgba(225,56,69,0.07), rgba(225,56,69,0) 62%),
    var(--i1-white);
}
.i1n-sec--dark { background: var(--i1-ink); }

/* =========================== hero =========================== */
.i1n-hero {
  padding: clamp(52px, 8vw, 104px) 0 clamp(40px, 5vw, 64px);
  text-align: center;
  background:
    radial-gradient(64% 70% at 50% 0%, rgba(225,56,69,0.10), rgba(225,56,69,0) 66%),
    var(--i1-white);
}
.i1n-hero .i1n-lede { margin-left: auto; margin-right: auto; }

.i1n-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; }

/* =========================== buttons =========================== */
/* .i1-scope prefix is load-bearing: `.elementor-kit-6 a { color }` beats a
   bare .i1n-btn and renders the label invisible. This already happened once. */
.i1-scope .i1n-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 14px 30px;
  font-family: var(--i1-body); font-size: 16px; font-weight: var(--i1-w-med);
  letter-spacing: 0.01em; text-decoration: none; text-align: center;
  border-radius: var(--i1-radius-btn); border: 2px solid transparent;
  cursor: pointer; transition: background var(--i1-dur) var(--i1-ease), color var(--i1-dur) var(--i1-ease), border-color var(--i1-dur) var(--i1-ease);
}
.i1-scope .i1n-btn--red { background: var(--i1-red); color: var(--i1-white); border-color: var(--i1-red); }
.i1-scope .i1n-btn--red:hover,
.i1-scope .i1n-btn--red:focus-visible { background: var(--i1-red-deep); border-color: var(--i1-red-deep); color: var(--i1-white); }
.i1-scope .i1n-btn--line { background: transparent; color: var(--i1-ink); border-color: var(--i1-line); }
.i1-scope .i1n-btn--line:hover,
.i1-scope .i1n-btn--line:focus-visible { border-color: var(--i1-ink); color: var(--i1-ink); }
.i1-scope .i1n-btn--wide { width: 100%; }
.i1-scope .i1n-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.i1-scope .i1n-btn:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 3px; }
.i1n-sec--dark .i1-scope .i1n-btn--line,
.i1-scope .i1n-sec--dark .i1n-btn--line { color: var(--i1-white); border-color: rgba(255,255,255,0.3); }

/* =========================== latest update =========================== */
.i1n-latest { padding: clamp(28px, 4vw, 44px) 0 clamp(58px, 7vw, 92px); }
.i1n-latest .i1n-wrap { display: grid; gap: clamp(24px, 4vw, 48px); align-items: center; }
@media (min-width: 900px) { .i1n-latest .i1n-wrap { grid-template-columns: 1.15fr 1fr; } }
.i1n-latest__shot { margin: 0; border-radius: var(--i1-radius); overflow: hidden; box-shadow: var(--i1-shadow-lg); background: var(--i1-bone); }
.i1n-latest__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }

/* =========================== timeline =========================== */
.i1n-timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.i1n-ms {
  position: relative; display: grid; grid-template-columns: 22px 1fr auto;
  align-items: baseline; gap: 4px 14px;
  padding: 16px 0 16px 0; border-bottom: 1px solid var(--i1-line);
}
.i1n-ms:last-child { border-bottom: 0; }
.i1n-ms__dot {
  grid-row: 1 / span 2; align-self: center;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--i1-line); background: var(--i1-white);
}
.i1n-ms.is-done .i1n-ms__dot { background: var(--i1-red); border-color: var(--i1-red); }
.i1n-ms.is-current .i1n-ms__dot { box-shadow: 0 0 0 5px var(--i1-red-soft); }
.i1-scope .i1n-ms__label {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(16px, 2vw, 19px); text-transform: uppercase;
  letter-spacing: var(--i1-track-sm); color: var(--i1-grey);
}
.i1-scope .i1n-ms.is-done .i1n-ms__label { color: var(--i1-ink); }
.i1n-ms__note { grid-column: 2; font-size: 14px; color: var(--i1-slate); }
.i1n-ms__state {
  grid-row: 1; grid-column: 3; font-size: 12px; font-weight: var(--i1-w-med);
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--i1-grey);
  white-space: nowrap;
}
.i1-scope .i1n-ms.is-done .i1n-ms__state { color: var(--i1-red); }

/* =========================== cards =========================== */
.i1n-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 620px) { .i1n-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .i1n-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.i1n-card {
  background: var(--i1-white); border: 1px solid var(--i1-line);
  border-radius: var(--i1-radius); overflow: hidden; box-shadow: var(--i1-shadow);
}
.i1n-card--plain { padding: 26px 24px 28px; }
.i1n-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--i1-bone); }
.i1n-card__body { padding: 20px 22px 24px; }
.i1-scope .i1n-card h3,
.i1-scope .i1n-card h4 {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 18px; text-transform: uppercase; letter-spacing: var(--i1-track-sm);
  color: var(--i1-ink); margin: 0 0 10px; line-height: 1.2;
}
.i1-scope .i1n-card p { font-size: 15px; line-height: 1.7; color: var(--i1-slate); margin: 0; }
.i1-scope .i1n-card em { font-style: italic; color: var(--i1-ink); }

.i1n-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; }
.i1n-pills li {
  font-size: 14px; font-weight: var(--i1-w-med); color: var(--i1-ink);
  background: var(--i1-white); border: 1px solid var(--i1-line);
  border-radius: 999px; padding: 9px 18px;
}

.i1n-address { font-style: normal; font-size: 18px; line-height: 1.6; color: var(--i1-ink); margin: 0 0 22px; }

/* =========================== giveaway =========================== */
.i1n-give { display: grid; gap: clamp(32px, 5vw, 56px); align-items: center; }
@media (min-width: 900px) { .i1n-give { grid-template-columns: 1fr 0.85fr; } }

.i1n-wheel {
  position: relative; width: min(88vw, 380px); aspect-ratio: 1; margin: 0 auto;
  border-radius: 50%; background: #1B1B1B;
  border: 8px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.i1n-wheel__disc {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  /* Rotation is driven by JS after the server returns the prize. */
  transform: rotate(0deg);
  transition: transform 4.2s cubic-bezier(0.15, 0.9, 0.2, 1);
}
.i1n-wheel__slice {
  position: absolute; inset: 0;
  /* One slice per prize, rotated into place; the wedge shape comes from the
     conic clip so no images or a canvas are needed. */
  transform: rotate(calc(var(--i1) * (360deg / var(--n))));
  clip-path: polygon(50% 50%, 50% 0%, calc(50% + 50% * tan(180deg / var(--n))) 0%);
  display: flex; justify-content: center;
}
@supports not (clip-path: polygon(50% 50%, 50% 0%, calc(50% + 10%) 0%)) {
  /* Older engines: fall back to alternating rings rather than broken wedges. */
  .i1n-wheel__slice { clip-path: none; opacity: 0.001; }
}
.i1n-wheel__slice--0 { background: var(--i1-red); }
.i1n-wheel__slice--1 { background: #2A2A2A; }
.i1n-wheel__text {
  display: block; max-width: 8ch; margin-top: 16px;
  font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center;
  color: #fff; text-transform: uppercase; letter-spacing: 0.02em;
  transform: rotate(calc(180deg / var(--n)));
}
.i1n-wheel__pin {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 22px solid var(--i1-white);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.i1n-wheel__hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 22%; height: 22%; border-radius: 50%; z-index: 2;
  background: var(--i1-white); box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}

.i1n-result {
  margin: 26px auto 0; max-width: 380px; text-align: center;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--i1-radius); padding: 22px 20px;
}
.i1-scope .i1n-result__label {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 20px; text-transform: uppercase; letter-spacing: var(--i1-track-sm);
  color: var(--i1-white); margin: 0;
}
.i1-scope .i1n-result__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; letter-spacing: 0.12em; color: #FF8A93; margin: 10px 0 0;
}

/* =========================== forms =========================== */
.i1n-form { display: grid; gap: 16px; max-width: 560px; }
.i1n-field { display: grid; gap: 6px; }
.i1n-field2 { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .i1n-field2 { grid-template-columns: 1.3fr 1fr; } }

.i1-scope .i1n-field label {
  font-size: 14px; font-weight: var(--i1-w-med); color: var(--i1-ink);
}
.i1n-opt { font-weight: var(--i1-w-body); color: var(--i1-slate); text-transform: none; }

.i1n-field input {
  /* 16px minimum: anything smaller makes iOS Safari zoom on focus, which on a
     page built for social traffic is a real drop-off. */
  width: 100%; min-height: 52px; padding: 13px 16px; font-size: 16px;
  font-family: var(--i1-body); color: var(--i1-ink); background: var(--i1-white);
  border: 1px solid var(--i1-line); border-radius: 12px;
}
.i1n-field input:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 1px; border-color: var(--i1-red); }
.i1n-field input[aria-invalid="true"] { border-color: var(--i1-red); background: var(--i1-red-soft); }

.i1-scope .i1n-err { font-size: 13.5px; color: #A5111D; margin: 0; min-height: 0; }
.i1n-err:empty { display: none; }

.i1n-consent { display: grid; gap: 12px; margin-top: 2px; }
.i1n-check { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.i1n-check input {
  width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--i1-red); cursor: pointer;
}
.i1-scope .i1n-check span { font-size: 13.5px; line-height: 1.55; color: var(--i1-slate); }
.i1n-check input:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 2px; }

.i1-scope .i1n-formnote { font-size: 13px; line-height: 1.6; color: var(--i1-slate); margin: 0; }
.i1-scope .i1n-formnote a { color: var(--i1-red); text-decoration: underline; }
.i1-scope .i1n-formnote--light { color: rgba(255,255,255,0.6); }

.i1-scope .i1n-status { font-size: 15px; line-height: 1.6; margin: 0; color: var(--i1-ink); }
.i1n-status:empty { display: none; }
.i1-scope .i1n-status.is-err { color: #A5111D; }
.i1-scope .i1n-status.is-ok { color: #0B7A3B; font-weight: var(--i1-w-med); }

/* Dark variant used inside the giveaway section */
.i1-scope .i1n-form--dark .i1n-field label { color: var(--i1-white); }
.i1n-form--dark .i1n-field input { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); color: var(--i1-white); }
.i1n-form--dark .i1n-field input::placeholder { color: rgba(255,255,255,0.4); }
.i1-scope .i1n-form--dark .i1n-check span { color: rgba(255,255,255,0.7); }
.i1-scope .i1n-form--dark .i1n-status { color: var(--i1-white); }
.i1-scope .i1n-form--dark .i1n-status.is-ok { color: #6FE39B; }
.i1-scope .i1n-form--dark .i1n-status.is-err { color: #FF9AA2; }
.i1-scope .i1n-form--dark .i1n-err { color: #FF9AA2; }

/* Honeypot: removed from view and from the accessibility tree, but NOT with
   display:none — some bots skip those. Kept focusable-out via tabindex=-1. */
.i1n-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* =========================== sticky mobile CTA =========================== */
.i1n-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--i1-line);
}
.i1n-sticky[hidden] { display: none; }
@media (min-width: 780px) { .i1n-sticky { display: none !important; } }

/* Screen-reader-only helper */
.i1n-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* =========================== renderings =========================== */
/* A rendering is presented as a rendering: framed, captioned, and visually
   distinct from the construction photography above it, so nobody mistakes an
   illustration for a photograph of what is standing today. */
.i1n-render { margin: 0; }
.i1n-render__img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--i1-radius); background: var(--i1-bone);
  box-shadow: var(--i1-shadow-lg);
}
.i1-scope .i1n-render__cap {
  margin: 14px 0 0; font-size: 13px; line-height: 1.6;
  color: var(--i1-slate); font-style: italic;
}
.i1n-render__more { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 700px) { .i1n-render__more { grid-template-columns: repeat(2, 1fr); } }
.i1n-render--sm .i1n-render__img { box-shadow: var(--i1-shadow); }

/* =========================== hero secondary link =========================== */
/* Secondary action is a text link, not a second button — the page has one
   conversion and competing buttons were splitting it. */
.i1-scope .i1n-herolink { margin: 16px 0 0; font-size: 15px; }
.i1-scope .i1n-herolink a { color: var(--i1-slate); text-decoration: underline; text-underline-offset: 3px; }
.i1-scope .i1n-herolink a:hover { color: var(--i1-red); }

/* =========================== SMS disclosure =========================== */
/* Required disclosures sit directly under the control they qualify — visible
   and adjacent, never behind a tooltip. */
.i1n-sms { border-left: 2px solid var(--i1-line); padding-left: 14px; }
.i1-scope .i1n-disclosure {
  margin: 6px 0 0 30px; font-size: 12px; line-height: 1.5; color: var(--i1-slate);
}
.i1-scope .i1n-form--dark .i1n-disclosure { color: rgba(255,255,255,0.55); }
.i1n-phonewrap { margin-top: 14px; }
.i1n-phonewrap[hidden] { display: none; }

/* =========================== confirmation =========================== */
.i1n-done {
  background: var(--i1-white); border: 1px solid var(--i1-line);
  border-left: 4px solid var(--i1-red);
  border-radius: var(--i1-radius); padding: 26px 26px 28px; max-width: 560px;
}
.i1n-done:focus { outline: 3px solid var(--i1-red); outline-offset: 3px; }
.i1-scope .i1n-done__h {
  font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: clamp(19px, 2.4vw, 24px); text-transform: uppercase;
  letter-spacing: var(--i1-track-sm); color: var(--i1-ink); margin: 0;
}
.i1-scope .i1n-done__n {
  font-size: 15px; font-weight: var(--i1-w-med); color: var(--i1-red);
  margin: 12px 0 0; letter-spacing: 0.02em;
}
.i1-scope .i1n-done__m { font-size: 15px; line-height: 1.65; color: var(--i1-slate); margin: 10px 0 0; }

/* =========================== proof quote =========================== */
.i1n-quote {
  margin: 40px 0 0; padding: 26px 28px; background: var(--i1-off);
  border-radius: var(--i1-radius); border: 1px solid var(--i1-line);
}
.i1n-quote blockquote { margin: 0; }
.i1-scope .i1n-quote p { font-size: 17px; line-height: 1.7; color: var(--i1-ink); margin: 0; }
.i1-scope .i1n-quote figcaption { margin-top: 12px; font-size: 13.5px; font-weight: var(--i1-w-med); color: var(--i1-ink); }
.i1-scope .i1n-quote figcaption span { display: block; font-weight: var(--i1-w-body); color: var(--i1-slate); margin-top: 2px; }

/* =========================== FAQ =========================== */
.i1n-faq { margin-top: 36px; border-top: 1px solid var(--i1-line); }
.i1n-faq__item { border-bottom: 1px solid var(--i1-line); }
.i1-scope .i1n-faq__item summary {
  list-style: none; cursor: pointer; padding: 18px 34px 18px 0; position: relative;
  font-family: var(--i1-body); font-size: 16px; font-weight: var(--i1-w-med);
  color: var(--i1-ink); line-height: 1.45;
}
.i1n-faq__item summary::-webkit-details-marker { display: none; }
.i1n-faq__item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--i1-red); border-bottom: 2px solid var(--i1-red);
  transform: rotate(45deg); transition: transform var(--i1-dur) var(--i1-ease);
}
.i1n-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.i1n-faq__item summary:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 2px; }
.i1-scope .i1n-faq__a p { font-size: 15.5px; line-height: 1.7; color: var(--i1-slate); margin: 0 0 18px; max-width: 70ch; }
.i1-scope .i1n-faq__a a { color: var(--i1-red); text-decoration: underline; }

.i1n-closing .i1n-cta { justify-content: center; }

/* =========================== update gallery =========================== */
.i1n-shots { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); margin-top: 20px; }
@media (min-width: 700px) { .i1n-shots { grid-template-columns: repeat(4, 1fr); } }

/* Five shots in a four-column grid strand the fifth alone on its own row, which
   reads as a mistake rather than a layout. Three columns puts it 3 + 2, and the
   thumbnails get bigger, which matters more in this narrow column than filling
   the last row exactly. Five columns was the other option and makes each
   thumbnail too small to read anything in. Scoped with :has() to galleries of
   exactly five, so the three- and four-shot updates are untouched. */
@media (min-width: 700px) {
  .i1n-shots:has(> .i1n-shots__item:nth-child(5):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.i1n-shots__item { margin: 0; }
.i1n-shots__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; background: var(--i1-bone);
}

/* The motion rendering shares the still's box exactly, so a blocked autoplay
   leaves the poster sitting in the same frame with no layout shift. */
.i1n-render__video { display: block; width: 100%; object-fit: cover; }

/* =========================== update video =========================== */
/* A clip occupies exactly the same box as the photograph it replaces, so a card
   with video and a card without sit on the same grid line with no jump. The
   poster is the update's own featured image, so nothing moves when it loads. */
.i1n-vid { display: block; width: 100%; background: var(--i1-ink); }
.i1n-latest__img.i1n-vid { aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--i1-radius); }
.i1n-card__img.i1n-vid { aspect-ratio: 4 / 3; object-fit: cover; }
.i1n-vid:focus-visible { outline: 3px solid var(--i1-red); outline-offset: 2px; }

/* =========================== then and now =========================== */
/* Two equal columns that become two stacked rows on a phone. Both images are
   forced to the same aspect so the pair reads as a comparison rather than two
   unrelated photographs, and the date sits under each one as real text. */
.i1n-tn { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 8px; }
@media (min-width: 760px) { .i1n-tn { grid-template-columns: 1fr 1fr; gap: 24px; } }
.i1n-tn__item { margin: 0; }
.i1n-tn__img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--i1-radius); background: var(--i1-bone); box-shadow: var(--i1-shadow);
}
.i1n-tn__item figcaption { margin-top: 12px; }
.i1-scope .i1n-tn__when {
  display: block; font-family: var(--i1-display); font-weight: var(--i1-w-display);
  font-size: 15px; text-transform: uppercase; letter-spacing: var(--i1-track-sm);
  color: var(--i1-red);
}
.i1-scope .i1n-tn__what {
  display: block; font-size: 14.5px; line-height: 1.55; color: var(--i1-slate); margin-top: 2px;
}