/* ==========================================================================
   BookedFolio v2 — site.css
   Cinematic editorial. Five acts, one interaction.
   Palette locked to Brand Kit v2; distribution and scale are not.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand primitives — locked */
  --ivory:        #E9E0CF;
  --ivory-lift:   #F1EADC;
  --ivory-deep:   #DCD1BB;
  --forest:       #132B23;
  --forest-lift:  #1C3A30;
  --forest-deep:  #0B1712;
  --sage:         #5E775E;   /* hairlines, icons, borders only — 3.75:1 fails AA for text */
  --sage-text:    #4F664F;   /* v1's measured fix: 4.79:1 on ivory, 5.24:1 on raised */
  --gold:         #BA9B5F;
  --gold-deep:    #A6874C;
  --gold-light:   #D4B87A;   /* gold on forest only, for large display accents */

  /* Semantic */
  --bg:          var(--ivory);
  --text:        var(--forest);
  --muted:       var(--sage-text);
  --muted-dark:  #AFB9AD;    /* muted text inside forest bands */
  --line:        rgba(19, 43, 35, .15);
  --line-strong: rgba(19, 43, 35, .30);
  --line-dark:   rgba(233, 224, 207, .20);

  /* Type */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* v2 opens the top end — the single biggest perceived-value lever at zero bytes */
  --t-cinema:  clamp(2.9rem, 8.4vw, 7rem);
  --t-act:     clamp(2.2rem, 5.4vw, 4.4rem);
  --t-h1:      clamp(2rem, 4.4vw, 3.2rem);
  --t-h2:      clamp(1.5rem, 3vw, 2.15rem);
  --t-h3:      1.125rem;
  --t-lede:    clamp(1.08rem, 1.7vw, 1.3rem);
  --t-body:    1.0625rem;
  --t-small:   0.9rem;
  --t-label:   0.75rem;

  --measure:      66ch;
  --measure-lede: 52ch;

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  --gutter: clamp(20px, 5vw, 48px);
  --container: 1240px;
  --container-narrow: 760px;
  --act-y: clamp(72px, 10vw, 148px);

  --radius: 2px;
  --radius-lg: 6px;

  /* Motion — state only, plus the one authored interaction */
  --t-state: 160ms;
  --t-slow: 420ms;
  --ease: cubic-bezier(.22, .61, .30, 1);
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video, iframe, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 {
  font-size: var(--t-h3); font-family: var(--font-body);
  font-weight: 600; letter-spacing: 0; line-height: 1.35;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 var(--s-4); padding-left: var(--s-5); }
li { margin-bottom: var(--s-2); max-width: var(--measure); }
strong { font-weight: 600; }
a { color: inherit; }

::selection { background: var(--forest); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: var(--radius);
}
.act--dark :focus-visible,
.cinema :focus-visible,
.devices :focus-visible { outline-color: var(--gold); }

.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 300;
  background: var(--gold); color: var(--forest);
  padding: var(--s-3) var(--s-5); font-weight: 600; text-decoration: none;
  transition: top var(--t-state) var(--ease);
}
.skip:focus { top: var(--s-4); }

.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--gutter);
}
.wrap--narrow { max-width: var(--container-narrow); }
.wrap--wide { max-width: 1440px; }

.act { padding-block: var(--act-y); position: relative; }
.act--tight { padding-block: clamp(52px, 7vw, 92px); }

.act--lift { background: var(--ivory-lift); }
.act--dark { background: var(--forest); color: var(--ivory); }
.act--deep { background: var(--forest-deep); color: var(--ivory); }
.act--dark h1, .act--dark h2, .act--dark h3,
.act--deep h1, .act--deep h2, .act--deep h3 { color: var(--ivory); }
.act--dark .label, .act--deep .label { color: var(--gold); }
.act--dark .lede, .act--deep .lede { color: rgba(233, 224, 207, .85); }
.act--dark .muted, .act--deep .muted { color: var(--muted-dark); }

.stack > * + * { margin-top: var(--s-4); }
.stack-lg > * + * { margin-top: var(--s-6); }

/* Both columns of a split sit on one shared centre line, the way two cells
   set to middle align do. Stacked below 900px each row sizes to its own
   content, so the base stays start and only the two column layout centres. */
.split { display: grid; gap: clamp(var(--s-6), 5vw, var(--s-9)); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: center; }
  .split--wide-left { grid-template-columns: 1.15fr 1fr; }
  .split--wide-right { grid-template-columns: 1fr 1.3fr; }
  .split--center { align-items: center; }
}
.split > * { min-width: 0; }

.cols {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.cols > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. TYPE COMPONENTS
   -------------------------------------------------------------------------- */

.label {
  display: block; font-family: var(--font-body);
  font-size: var(--t-label); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-text); margin-bottom: var(--s-4);
}

/* Act numbering — the film-chapter device */
.act-mark {
  display: flex; align-items: center; gap: var(--s-4);
  margin-bottom: var(--s-6);
  font-family: var(--font-body); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sage-text);
}
.act-mark::after {
  content: ""; flex: 1; height: 1px; background: var(--line); max-width: 180px;
}
.act--dark .act-mark, .act--deep .act-mark { color: var(--gold); }
.act--dark .act-mark::after, .act--deep .act-mark::after { background: var(--line-dark); }
/* Only the run of three demonstrations is numbered, so this states a real
   position rather than decorating one. It reads at the label's own colour: at
   the .55 alpha it used to carry, it measured 2.1:1 on ivory. The middot
   that follows it is in the markup, where the rest of the site keeps it. */
.act-mark__n { font-variant-numeric: tabular-nums; }

.cinema-type {
  font-family: var(--font-display); font-size: var(--t-cinema);
  line-height: .98; font-weight: 500; letter-spacing: -0.028em;
  margin: 0; text-wrap: balance;
}
.act-type {
  font-family: var(--font-display); font-size: var(--t-act);
  line-height: 1.05; font-weight: 500; letter-spacing: -0.022em;
  margin: 0; text-wrap: balance;
}

.lede { font-size: var(--t-lede); line-height: 1.55; max-width: var(--measure-lede); }
.small { font-size: var(--t-small); }
.muted { color: var(--muted); }

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  line-height: 1.22; font-weight: 500; max-width: 24ch; margin: 0;
  text-wrap: balance;
}

.textlink {
  color: var(--sage-text); text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 1px;
  transition: color var(--t-state) var(--ease);
}
.textlink:hover { color: var(--forest); }
.act--dark .textlink, .act--deep .textlink, .cinema .textlink { color: var(--gold); }
.act--dark .textlink:hover, .act--deep .textlink:hover { color: var(--ivory); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 50px; padding: 15px 30px;
  font-family: var(--font-body); font-size: .975rem; font-weight: 600; line-height: 1.2;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radius); cursor: pointer;
  transition: background var(--t-state) var(--ease), color var(--t-state) var(--ease),
              border-color var(--t-state) var(--ease), transform var(--t-state) var(--ease);
}
.btn--primary { background: var(--gold); color: var(--forest); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); transform: translateY(-1px); }
.btn--primary:active { transform: none; }

.btn--outline { background: transparent; color: var(--forest); border-color: var(--line-strong); }
.btn--outline:hover { background: var(--forest); color: var(--ivory); border-color: var(--forest); }

.act--dark .btn--outline, .act--deep .btn--outline, .cinema .btn--outline {
  color: var(--ivory); border-color: rgba(233, 224, 207, .45);
}
.act--dark .btn--outline:hover, .act--deep .btn--outline:hover, .cinema .btn--outline:hover {
  background: var(--ivory); color: var(--forest); border-color: var(--ivory);
}

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; }

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */

.header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--ivory) 90%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--line);
  transition: background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}
@supports not (backdrop-filter: blur(12px)) { .header { background: var(--ivory); } }

/* Over the cinematic hero the header goes transparent and inverts */
.header[data-over-cinema="true"] {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
.header[data-over-cinema="true"] .brand__word,
.header[data-over-cinema="true"] .nav__link,
.header[data-over-cinema="true"] .nav__toggle { color: var(--ivory); }
.header[data-over-cinema="true"] .nav__toggle { border-color: rgba(233, 224, 207, .45); }
.header[data-over-cinema="true"] .brand__mark--dark { display: none; }
.header[data-over-cinema="true"] .brand__mark--light { display: block; }

.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 74px; padding-block: var(--s-3);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; flex-shrink: 0; }
.brand__mark { width: 34px; height: 34px; }
.brand__mark--light { display: none; }
.brand__word {
  font-family: var(--font-display); font-size: 1.26rem; font-weight: 600;
  letter-spacing: -0.012em; color: var(--forest);
  transition: color var(--t-slow) var(--ease);
}

.nav { display: flex; align-items: center; gap: var(--s-5); }
.nav__list { display: flex; align-items: center; gap: var(--s-5); list-style: none; margin: 0; padding: 0; }
.nav__list li { margin: 0; }
.nav__link {
  display: inline-block; padding: 7px 0; font-size: .94rem; font-weight: 500;
  text-decoration: none; color: var(--forest);
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-state) var(--ease), color var(--t-slow) var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { border-bottom-color: var(--gold); }
.nav__cta { padding: 12px 22px; min-height: 46px; font-size: .92rem; }

.nav__toggle {
  display: none; align-items: center; gap: var(--s-2);
  min-height: 46px; padding: 9px 15px;
  background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius);
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--forest); cursor: pointer;
  transition: color var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease);
}

.nav__cta-short { display: none; }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .header__inner { position: relative; }
  .nav__list {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--ivory); border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--gutter) var(--s-5);
  }
  .nav__list[data-open="true"] { display: flex; }
  .nav__link {
    padding: 15px 0; font-size: 1.05rem; color: var(--forest) !important;
    border-bottom: 1px solid var(--line); border-left: 2px solid transparent;
  }
  .nav__link[aria-current="page"] { border-bottom-color: var(--line); border-left-color: var(--gold); padding-left: var(--s-3); }
}
@media (max-width: 580px) {
  .header__inner { gap: var(--s-3); min-height: 66px; }
  .nav { gap: var(--s-3); }
  .brand { gap: var(--s-2); }
  .brand__mark { width: 30px; height: 30px; }
  .brand__word { font-size: 1.04rem; }
  .nav__toggle { padding: 9px 12px; }
  .nav__cta { padding: 12px 15px; font-size: .85rem; }
  .nav__cta-full { display: none; }
  .nav__cta-short { display: inline; }
}
@media (max-width: 380px) {
  .brand__word { font-size: .95rem; }
  .nav__cta { padding: 12px 12px; font-size: .82rem; }
}

/* --------------------------------------------------------------------------
   7. ACT I — THE CINEMATIC OPENER
   -------------------------------------------------------------------------- */

.cinema {
  position: relative;
  min-height: min(96svh, 900px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--ivory);
  margin-top: -75px;            /* slide under the transparent header */
  padding-top: 75px;
}
@media (max-width: 940px) { .cinema { margin-top: -66px; padding-top: 66px; } }

.cinema__media { position: absolute; inset: 0; z-index: 0; }
.cinema__media img,
.cinema__media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
}
/* The video sits above the poster and fades in only once it can actually play */
.cinema__video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.cinema[data-video="playing"] .cinema__video { opacity: 1; }

/* Two-axis scrim. The print-room wall is bright, and the type is left-aligned,
   so a bottom-weighted gradient alone measured 1.6:1 on the headline. A second
   left-weighted gradient buys the contrast where the words actually are and
   leaves the right-hand side of the photograph legible. Verified by sampling
   the composited pixels, not by eye. */
.cinema__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(11, 23, 18, .74) 0%,
      rgba(11, 23, 18, .55) 38%,
      rgba(11, 23, 18, .10) 78%,
      rgba(11, 23, 18, 0) 100%),
    linear-gradient(to top,
      rgba(11, 23, 18, .90) 0%,
      rgba(11, 23, 18, .74) 30%,
      rgba(11, 23, 18, .56) 62%,
      rgba(11, 23, 18, .50) 100%);
}

.cinema__inner {
  position: relative; z-index: 2; width: 100%;
  padding-block: clamp(40px, 7vw, 84px);
}
.cinema__label {
  /* Gold measured 3.72:1 here. The top of the frame is deliberately the least
     scrimmed part of the image, so the label goes ivory and the gold accent
     lives on the call to action instead. */
  color: rgba(233, 224, 207, .84);
}
.cinema__title { max-width: 17ch; }
.cinema__lede {
  margin-top: var(--s-6); max-width: 46ch;
  color: rgba(233, 224, 207, .88); font-size: var(--t-lede); line-height: 1.55;
}
.cinema__actions { margin-top: var(--s-7); }
.cinema__note {
  margin-top: var(--s-5); font-size: var(--t-small);
  color: rgba(233, 224, 207, .68); max-width: 44ch;
}

/* Quiet scroll hint — a rule that breathes, not a bouncing arrow */
.cinema__hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 2; width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(233,224,207,0), var(--gold));
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  .cinema__hint { animation: hint 3.4s var(--ease) infinite; transform-origin: bottom; }
  @keyframes hint {
    0%, 100% { transform: translateX(-50%) scaleY(.45); opacity: .35; }
    50%      { transform: translateX(-50%) scaleY(1);   opacity: .85; }
  }
}
@media (max-width: 700px) { .cinema__hint { display: none; } }

/* --------------------------------------------------------------------------
   8. ACT II — THE GAP (the signature interaction)
   -------------------------------------------------------------------------- */

.gap { --split: 50%; }

.gap__stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--forest);
  border-radius: var(--radius-lg);
  isolation: isolate;
  box-shadow: 0 1px 0 rgba(19,43,35,.06);
}
@media (max-width: 760px) { .gap__stage { aspect-ratio: 3 / 4; } }

.gap__layer { position: absolute; inset: 0; overflow: hidden; }
/* "After" sits on top, clipped to the right of the handle */
.gap__layer--after { clip-path: inset(0 0 0 var(--split)); z-index: 2; }

.gap__tag {
  position: absolute; top: 3cqw; z-index: 4;
  font-family: var(--font-body); font-size: max(10px, 1.25cqw);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .7em 1.1em; border-radius: 2px; pointer-events: none;
  transition: opacity var(--t-state) var(--ease);
}
.gap__tag--before { left: 3cqw; background: rgba(19,43,35,.82); color: var(--ivory); }
.gap__tag--after  { right: 3cqw; background: var(--gold); color: var(--forest); }

/* The handle */
.gap__handle {
  position: absolute; top: 0; bottom: 0; left: var(--split);
  width: 2px; background: var(--gold); z-index: 3;
  transform: translateX(-1px); pointer-events: none;
}
.gap__grip {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--forest);
  display: grid; place-items: center;
  box-shadow: 0 2px 14px rgba(11,23,18,.34);
}
.gap__grip svg { width: 22px; height: 22px; }

/* The real control: a range input laid over the stage, invisible but operable */
.gap__range {
  position: absolute; inset: 0; z-index: 5;
  width: 100%; height: 100%; margin: 0;
  appearance: none; background: transparent; cursor: ew-resize;
  /* The control covers the whole comparison, which on a phone is half the
     screen. Without this, a vertical swipe that starts on it would be eaten
     by the slider instead of scrolling the page. pan-y hands vertical
     gestures back to the browser and keeps horizontal ones for dragging. */
  touch-action: pan-y;
}
.gap__range::-webkit-slider-thumb {
  appearance: none; width: 54px; height: 100%; background: transparent; cursor: ew-resize;
}
.gap__range::-moz-range-thumb {
  width: 54px; height: 100%; background: transparent; border: 0; cursor: ew-resize;
}
.gap__range:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.gap__caption {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: baseline;
  margin-top: var(--s-4); font-size: var(--t-small); color: var(--sage-text);
}
.gap__caption p { margin: 0; max-width: 54ch; }

/* ---- The two mini-sites. Everything sized in cqw so they scale as one unit. */

.mini {
  position: absolute; inset: 0;
  font-family: var(--font-body);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* -- BEFORE: cramped, dated, no hierarchy, contact buried -- */
.mini--before { background: #fff; color: #333; }
.mini--before .mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.6cqw 2.4cqw; border-bottom: 1px solid #ddd; background: #f4f4f4;
  flex-shrink: 0;
}
.mini--before .mini__logo {
  font-family: "Times New Roman", Times, serif; font-size: 2.5cqw;
  letter-spacing: .04em; color: #444;
}
.mini--before .mini__nav { display: flex; gap: 1.6cqw; font-size: max(9px, 1.35cqw); color: #6A6A6A; }
.mini--before .mini__body { padding: 2.4cqw; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mini--before .mini__welcome {
  text-align: center; font-size: max(9px, 1.5cqw); color: #666; line-height: 1.5;
  margin-bottom: 2cqw; max-width: none;
}
.mini--before .mini__welcome b { display: block; font-size: 2.1cqw; color: #444; margin-bottom: .6cqw; }
.mini--before .mini__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .8cqw; flex: 1; min-height: 0;
}
.mini--before .mini__grid > * { aspect-ratio: 4/3; overflow: hidden; border: 1px solid #e2e2e2; }
.mini--before .mini__foot {
  margin-top: 2cqw; text-align: center; font-size: max(9px, 1.2cqw); color: #6A6A6A;
  border-top: 1px solid #eee; padding-top: 1.4cqw;
}

/* -- AFTER: the same photographs, given room and a job -- */
.mini--after { background: var(--ivory); color: var(--forest); }
.mini--after .mini__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2cqw 3cqw; flex-shrink: 0;
}
.mini--after .mini__logo {
  font-family: var(--font-display); font-size: 2.2cqw;
  letter-spacing: .2em; text-transform: uppercase; color: var(--forest);
}
.mini--after .mini__nav { display: flex; gap: 2.2cqw; font-size: max(9px, 1.25cqw); color: var(--sage-text); align-items: center; }
.mini--after .mini__cta {
  background: var(--gold); color: var(--forest); padding: .9cqw 1.8cqw;
  font-weight: 600; font-size: max(9px, 1.2cqw); border-radius: 1px;
}
.mini--after .mini__hero { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.mini--after .mini__hero::after {
  content: ""; position: absolute; inset: 0;
  /* Two stops left the headline at 2.58:1 and the meta line at 3.89:1 against
     the real photograph at 1280px, where the hero is short and wide and the
     text reaches into the thin part of the ramp. Weighted to the bottom, where
     the words are, so the top of the frame stays open. */
  background: linear-gradient(to top,
    rgba(11,23,18,.88) 0%, rgba(11,23,18,.74) 22%,
    rgba(11,23,18,.42) 48%, rgba(11,23,18,.06) 78%, rgba(11,23,18,0) 100%);
}
.mini--after .mini__over {
  position: absolute; left: 3cqw; right: 3cqw; bottom: 2.6cqw; z-index: 2; color: #fff;
}
.mini--after .mini__head {
  font-family: var(--font-display); font-size: 3.4cqw; line-height: 1.08;
  font-weight: 500; margin: 0 0 1cqw; color: #fff; letter-spacing: -.02em;
}
.mini--after .mini__meta { display: flex; flex-wrap: wrap; gap: 1.8cqw; font-size: max(9px, 1.3cqw); color: rgba(255,255,255,.9); }
.mini--after .mini__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7cqw; padding: .7cqw 3cqw 2.4cqw; flex-shrink: 0; }
.mini--after .mini__strip > * { aspect-ratio: 3/2; overflow: hidden; }

/* --------------------------------------------------------------------------
   9. ACT III — THE DEVICE WALL
   -------------------------------------------------------------------------- */

.devices { position: relative; }

.devices__tabs {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  border-bottom: 1px solid var(--line); margin-bottom: var(--s-7);
}
.act--dark .devices__tabs { border-bottom-color: var(--line-dark); }

.devices__tab {
  appearance: none; background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  padding: 12px var(--s-5) 14px; min-height: 46px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600;
  color: var(--sage-text); cursor: pointer;
  transition: color var(--t-state) var(--ease), border-color var(--t-state) var(--ease);
}
.devices__tab:hover { color: var(--forest); }
.devices__tab[aria-selected="true"] { color: var(--forest); border-bottom-color: var(--gold); }
.act--dark .devices__tab { color: var(--muted-dark); }
.act--dark .devices__tab:hover,
.act--dark .devices__tab[aria-selected="true"] { color: var(--ivory); }

.devices__stage {
  display: grid; gap: var(--s-6);
  grid-template-columns: 1fr;
  align-items: end;
}
@media (min-width: 1000px) {
  .devices__stage { grid-template-columns: 1fr 268px; gap: var(--s-7); }
}

/* Laptop */
.laptop { position: relative; }
.laptop__screen {
  position: relative;
  background: var(--forest-deep);
  border: 1px solid rgba(19,43,35,.5);
  border-radius: 8px 8px 2px 2px;
  padding: 12px 12px 0;
}
.act--dark .laptop__screen { border-color: rgba(233,224,207,.22); }
.laptop__glass {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: 2px; background: var(--ivory-lift);
}
.laptop__base {
  height: 12px; border-radius: 0 0 10px 10px;
  background: linear-gradient(to bottom, #2A3F36, #16241E);
  margin-inline: -14px;
  border: 1px solid rgba(19,43,35,.5); border-top: 0;
}
.act--dark .laptop__base { border-color: rgba(233,224,207,.22); }

/* Phone */
.phone { justify-self: center; width: 100%; max-width: 268px; }
.phone__shell {
  position: relative; padding: 10px;
  background: var(--forest-deep);
  border: 1px solid rgba(19,43,35,.5);
  border-radius: 30px;
}
.act--dark .phone__shell { border-color: rgba(233,224,207,.22); }
.phone__glass {
  position: relative; aspect-ratio: 9 / 17; overflow: hidden;
  border-radius: 20px; background: var(--ivory-lift);
}
.phone__notch {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 78px; height: 5px; border-radius: 3px;
  background: rgba(233,224,207,.28); z-index: 3;
}

/* Shared frame internals */
.frame-load {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: var(--s-5); text-align: center;
  font-size: var(--t-small); color: var(--sage-text);
  background: var(--ivory-lift);
  transition: opacity var(--t-slow) var(--ease);
}
[data-live="true"] .frame-load { opacity: 0; }

.frame-live {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; opacity: 0; transition: opacity var(--t-slow) var(--ease);
}
[data-live="true"] .frame-live { opacity: 1; }

/* Touch devices get a tap-to-open overlay instead of a nested scroll trap */
.frame-tap {
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: flex-end; justify-content: center; padding: var(--s-4);
  text-decoration: none;
}
.frame-tap span {
  background: var(--gold); color: var(--forest);
  font-size: .8rem; font-weight: 600; padding: 9px 16px; border-radius: var(--radius);
}
@media (hover: none) { .frame-tap { display: flex; } }

.devices__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  justify-content: space-between; align-items: baseline;
  margin-top: var(--s-5); font-size: var(--t-small); color: var(--sage-text);
}
.act--dark .devices__meta { color: var(--muted-dark); }
.devices__meta p { margin: 0; max-width: 52ch; }
.devices__meta a { display: inline-block; padding-block: 4px; }

.disclosure {
  font-size: var(--t-small); color: var(--sage-text);
  margin-top: var(--s-4); max-width: 66ch;
}
.act--dark .disclosure { color: var(--muted-dark); }

/* --------------------------------------------------------------------------
   10. EDITORIAL FIGURES
   -------------------------------------------------------------------------- */

.figure { margin: 0; position: relative; }
.figure img { width: 100%; object-fit: cover; border-radius: var(--radius); }
.figure figcaption {
  font-size: var(--t-small); color: var(--sage-text); padding-top: var(--s-3);
}
.act--dark .figure figcaption { color: var(--muted-dark); }

/* A full-bleed plate that breaks the container */
.plate {
  position: relative; margin: 0;
  height: clamp(320px, 52vw, 620px); overflow: hidden;
}
.plate img, .plate video { width: 100%; height: 100%; object-fit: cover; }
.plate__over {
  position: absolute; inset: 0; display: flex; align-items: center;
  background: linear-gradient(to right, rgba(11,23,18,.86) 0%, rgba(11,23,18,.62) 42%, rgba(11,23,18,.18) 100%);
  color: var(--ivory);
}
.plate__over--right {
  background: linear-gradient(to left, rgba(11,23,18,.88) 0%, rgba(11,23,18,.60) 44%, rgba(11,23,18,.14) 100%);
  justify-content: flex-end;
}
.plate__box { max-width: 44ch; }

/* --------------------------------------------------------------------------
   11. LISTS, CARDS, RULES
   -------------------------------------------------------------------------- */

.rule-list { list-style: none; margin: 0; padding: 0; }
.rule-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-4);
  align-items: start; padding: var(--s-4) 0;
  border-top: 1px solid var(--line); margin: 0; max-width: none;
}
.rule-list li:last-child { border-bottom: 1px solid var(--line); }
.act--dark .rule-list li, .act--deep .rule-list li { border-color: var(--line-dark); }

.aperture {
  width: 13px; height: 13px; margin-top: 7px; flex-shrink: 0;
  border: 1px solid var(--gold); border-radius: 50%; position: relative;
}
.aperture::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--gold); border-radius: 50%;
}

.card {
  background: var(--ivory-lift); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-6);
}
.act--dark .card, .act--deep .card { background: var(--forest-lift); border-color: var(--line-dark); }
.card--feature { border-top: 3px solid var(--gold); }

/* The timeline — the process as a measured sequence */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; margin: 0; max-width: none;
  padding: 0 0 var(--s-7) var(--s-7);
  border-left: 1px solid var(--line);
}
.timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.act--dark .timeline li { border-left-color: var(--line-dark); }
.timeline li::before {
  content: ""; position: absolute; left: -5px; top: 5px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold);
}
.timeline__when {
  display: block; font-family: var(--font-body); font-size: var(--t-label);
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-text); margin-bottom: var(--s-2);
}
.act--dark .timeline__when { color: var(--gold); }
.timeline__what { font-family: var(--font-display); font-size: 1.32rem; line-height: 1.2; margin-bottom: var(--s-2); }

/* Facts */
.facts { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }
.facts > * { min-width: 0; }
.fact { border-top: 2px solid currentColor; padding-top: var(--s-4); }
.fact__n {
  font-family: var(--font-display); font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1; margin-bottom: var(--s-3); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   12. PRICING
   -------------------------------------------------------------------------- */

.price {
  font-family: var(--font-display); font-size: clamp(2.3rem, 4.6vw, 3.2rem);
  line-height: 1; font-variant-numeric: tabular-nums; display: inline-block;
  padding-bottom: var(--s-3); border-bottom: 2px solid var(--gold);
}
.price__note {
  display: block; margin-top: var(--s-3); font-family: var(--font-body);
  font-size: var(--t-small); color: var(--sage-text);
}
.act--dark .price__note, .act--deep .price__note { color: var(--muted-dark); }
/* .52em is right inside the big display price. Used inline in body copy it
   collapsed to 7.5px, so the size is now scoped to that context only. */
.price-was { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .75; margin-right: .3em; }
.price .price-was { font-size: .52em; }

/* --------------------------------------------------------------------------
   13. ACCORDION
   -------------------------------------------------------------------------- */

.qa { border-top: 1px solid var(--line); }
.qa:last-of-type { border-bottom: 1px solid var(--line); }
.act--dark .qa { border-color: var(--line-dark); }
.qa > summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  padding: var(--s-5) 0; min-height: 46px;
  font-family: var(--font-body); font-size: 1.06rem; font-weight: 600;
  cursor: pointer; list-style: none;
  transition: color var(--t-state) var(--ease);
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary:hover { color: var(--sage-text); }
.qa > summary::after {
  content: "+"; font-family: var(--font-body); font-weight: 400;
  font-size: 1.45rem; line-height: 1; color: var(--gold); flex-shrink: 0;
}
.qa[open] > summary::after { content: "\2212"; }
.qa__body { padding: 0 0 var(--s-5); max-width: var(--measure); }

/* --------------------------------------------------------------------------
   14. FORMS
   -------------------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
.form__row { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--s-2); }
.field > label { font-size: var(--t-small); font-weight: 600; }
.field__hint { font-size: var(--t-small); color: var(--sage-text); margin: 0; }
.act--dark .field__hint { color: var(--muted-dark); }
.act--dark .field > label { color: var(--ivory); }

.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: 13px 15px;
  font-family: var(--font-body); font-size: 1rem; line-height: 1.4;
  color: var(--forest); background: var(--ivory-lift);
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  transition: border-color var(--t-state) var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--forest); }

.act--dark .field input, .act--dark .field select, .act--dark .field textarea,
.act--deep .field input, .act--deep .field select, .act--deep .field textarea {
  background: var(--forest-lift); color: var(--ivory); border-color: var(--line-dark);
}
.act--dark .field input:hover, .act--dark .field select:hover, .act--dark .field textarea:hover { border-color: var(--gold); }

.field [aria-invalid="true"] { border-color: #8C2F2F; border-width: 2px; }
.act--dark .field [aria-invalid="true"] { border-color: #E8A5A5; }
.field__error { font-size: var(--t-small); font-weight: 600; color: #8C2F2F; margin: 0; }
.act--dark .field__error, .act--deep .field__error { color: #E8A5A5; }
.field__error:empty { display: none; }

.form__status { margin: 0; font-size: var(--t-small); font-weight: 600; min-height: 1.2em; }
.form__status[data-state="error"] { color: #8C2F2F; }
.act--dark .form__status[data-state="error"] { color: #E8A5A5; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   15. TABLES
   -------------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-small); min-width: 520px; }
th, td { text-align: left; padding: var(--s-4) var(--s-4) var(--s-4) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--sage-text); }
.act--dark th, .act--dark td { border-color: var(--line-dark); }
.act--dark th { color: var(--gold); }

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.footer {
  background: var(--forest-deep); color: var(--ivory);
  padding-block: clamp(56px, 7vw, 92px) var(--s-7);
  border-top: 3px solid var(--gold);
}
.footer a { color: rgba(233,224,207,.82); text-decoration: none; }
.footer a:hover { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; }
.footer__grid { display: grid; gap: var(--s-7); grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); margin-bottom: var(--s-7); }
.footer__grid > * { min-width: 0; }
.footer__title { font-size: var(--t-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--s-4); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer li a { display: inline-block; padding-block: 6px; min-height: 24px; }
.footer__foot {
  border-top: 1px solid var(--line-dark); padding-top: var(--s-5);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  justify-content: space-between; align-items: baseline;
  font-size: var(--t-small); color: rgba(233,224,207,.68);
}
.footer__foot a { display: inline-block; padding-block: 4px; min-height: 24px; }
.footer__slogan { font-family: var(--font-display); font-size: 1.08rem; color: var(--ivory); }

/* --------------------------------------------------------------------------
   17. UTILITIES
   -------------------------------------------------------------------------- */

.center { text-align: center; margin-inline: auto; }
.center p, .center .lede, .center .pull { margin-inline: auto; }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
/* The guarantee block asked for .mt-9, which did not exist, so it rendered
   hard against the offer card above it. */
.mt-9 { margin-top: var(--s-9); }
.mb-6 { margin-bottom: var(--s-6); }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------------------------------
   18. PHONE FRAME — render a real mobile viewport, then scale it down
   A 250px-wide iframe would trigger an ultra-narrow edge case no real phone
   has. Instead the iframe is laid out at 390px (a real iPhone width) and
   scaled to fit, so the frame shows the actual mobile design.
   390 x 0.641 = 250   ·   736 x 0.641 = 472
   -------------------------------------------------------------------------- */

.phone { width: 270px; max-width: 270px; }
.phone__glass { width: 250px; height: 472px; aspect-ratio: auto; margin-inline: auto; }
.phone__glass .frame-live {
  /* max-width:100% from the base reset clamps this to the 250px frame and the
     iframe then renders a 250px viewport - an ultra-narrow width no real phone
     has. Explicitly opt out so it lays out at 390px and is scaled down. */
  width: 390px; height: 736px; max-width: none;
  transform: scale(0.641); transform-origin: top left;
}
@media (max-width: 999px) {
  .devices__stage { justify-items: center; }
  .phone { display: none; }   /* on a phone, the visitor already has the phone view */
}

/* --------------------------------------------------------------------------
   19. DEEP BAND INHERITS EVERY DARK TREATMENT
   `.act--deep` is the darkest band and is used for the closing form. Several
   dark-context rules above were written only for `.act--dark`, which left form
   hints at 2.92:1 on the home page. Everything dark applies to both.
   -------------------------------------------------------------------------- */

.act--deep .field__hint,
.act--deep .devices__meta,
.act--deep .disclosure,
.act--deep .figure figcaption { color: var(--muted-dark); }

.act--deep .field > label { color: var(--ivory); }

.act--deep .field input,
.act--deep .field select,
.act--deep .field textarea { background: var(--forest-lift); color: var(--ivory); border-color: var(--line-dark); }
.act--deep .field input:hover,
.act--deep .field select:hover,
.act--deep .field textarea:hover { border-color: var(--gold); }

.act--deep .card { background: var(--forest-lift); border-color: var(--line-dark); }
.act--deep .qa { border-color: var(--line-dark); }
.act--deep .timeline li { border-left-color: var(--line-dark); }
.act--deep .timeline__when { color: var(--gold); }
.act--deep th, .act--deep td { border-color: var(--line-dark); }
.act--deep th { color: var(--gold); }

/* ==========================================================================
   20. MOBILE REPAIRS
   Two failures found by measuring the phone build rather than trusting that
   "no overflow" meant "works". Cold traffic arrives on a phone, so these are
   not edge cases, they are the main case.
   ========================================================================== */

/* --- 20a. The device wall collapsed to 26px on mobile ---------------------
   `justify-items: center` on the grid made every item size to its content.
   The laptop has no intrinsic width, so it shrank to its own padding and the
   whole proof section rendered empty. Items stretch again; the phone is
   centred with a margin instead. */

@media (max-width: 999px) {
  .devices__stage { justify-items: stretch; }

  /* A laptop lid around a mobile layout is incoherent on a phone. The chrome
     comes off and the frame goes full width, so the demo gets all the room
     there is and shows the build the visitor would actually get. */
  .laptop__screen { padding: 8px; border-radius: 6px; }
  .laptop__base { display: none; }
  .laptop__glass { aspect-ratio: 4 / 5; }
}

/* --- 20b. The Gap was illegible on a phone --------------------------------
   The two mini-sites are sized in container-query units, which scale with the
   frame. At 350px of container the body text landed at 4.2px. Below 520cqw the
   type steps up and the density comes down, so the comparison still reads.
   Measured target: nothing under 9px. */

@container (max-width: 520px) {
  .mini--before .mini__bar { padding: 2.6cqw 3cqw; }
  .mini--before .mini__logo { font-size: 4.4cqw; }
  .mini--before .mini__nav { display: none; }
  .mini--before .mini__body { padding: 3cqw; }
  .mini--before .mini__welcome { font-size: max(9.5px, 3cqw); margin-bottom: 3cqw; }
  .mini--before .mini__welcome b { font-size: 3.9cqw; margin-bottom: 1.2cqw; }
  .mini--before .mini__grid { grid-template-columns: repeat(3, 1fr); gap: 1.4cqw; }
  .mini--before .mini__foot { font-size: max(9px, 2.7cqw); margin-top: 3cqw; padding-top: 2.4cqw; }

  .mini--after .mini__bar { padding: 3cqw 3.4cqw; }
  .mini--after .mini__logo { font-size: 4cqw; }
  .mini--after .mini__nav { gap: 2.6cqw; font-size: max(9px, 2.8cqw); }
  .mini--after .mini__cta { font-size: max(9px, 2.7cqw); padding: 1.4cqw 2.4cqw; }
  .mini--after .mini__over { left: 3.4cqw; right: 3.4cqw; bottom: 3cqw; }
  .mini--after .mini__head { font-size: 6.2cqw; margin-bottom: 1.6cqw; }
  .mini--after .mini__meta { font-size: max(9.5px, 2.9cqw); gap: 2.4cqw; }
  .mini--after .mini__strip { padding: 1cqw 3.4cqw 3cqw; gap: 1.2cqw; }
}

/* The "welcome" paragraph is the cramped-site tell. It only needs to read as
   a wall of text, so it is clamped rather than allowed to push the grid out. */
@container (max-width: 520px) {
  .mini--before .mini__welcome {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ---------- 21. Section eyebrows on narrow screens ---------------------- */
/* The eyebrow's trailing rule is flex: 1, so a long label on a phone leaves it
   nothing to fill: measured 0px on six eyebrows at 320px and a 4.8px stub on
   another. A stub reads as a rendering fault, and eyebrows on the same page
   disagreed with each other depending on label length. Below 640px the label
   stands on its own and is allowed to wrap. */
@media (max-width: 639px) {
  .act-mark { flex-wrap: wrap; }
  .act-mark::after { display: none; }
}

/* --------------------------------------------------------------------------
   22. THE OFFER AND THE GUARANTEE
   Both were built out of the wrong components and rendered badly. The founding
   offer was two columns of small grey text with the price set inline, so the
   most valuable thing on the page had the least weight. The guarantee used
   `.rule-list`, whose `li` is a 20px + 1fr grid expecting an aperture marker
   first; a bare `<strong>` landed in the 20px column and wrapped one word per
   line.
   -------------------------------------------------------------------------- */

.offer {
  display: grid; gap: var(--s-6);
  padding: var(--s-7);
  background: var(--ivory-lift);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
}
@media (min-width: 760px) {
  .offer { grid-template-columns: minmax(0, 15rem) 1fr; gap: var(--s-8); align-items: start; }
}
.offer__price .price { margin-top: var(--s-3); }
.offer__title {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 500; margin: 0 0 var(--s-4);
}
.offer__body p + p { margin-top: var(--s-4); }
.act--dark .offer, .act--deep .offer { background: rgba(233,224,207,.05); border-color: var(--line-dark); }

/* The struck price needs air around it; inline it was reading as "$149$75". */
.offer__price .price-was { margin-right: .22em; }

.pledge { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
@media (min-width: 720px) { .pledge { grid-template-columns: 1fr 1fr; gap: var(--s-7) var(--s-8); } }
.pledge li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--s-4);
  align-items: start; margin: 0; padding: 0; max-width: none; border: 0;
}
.pledge__t { display: block; font-weight: 600; margin-bottom: 4px; }

/* The before and after badges sat at the top of the stage, directly over the
   mini-site logo. Measured overlap at every width. They belong at the foot,
   where both halves carry photograph rather than chrome. */
.gap__tag { top: auto; bottom: 11%; }

@media (max-width: 999px) {
  /* Both examples stack vertically on a phone. The frame is already capped at
     270px, so no extra width is claimed, and both iframes were being loaded
     regardless of whether this one was shown. */
  .phone { display: block; }
}

/* The "after" hero is a 900x1342 portrait whose top half is empty sky. Cropped
   by object-fit: cover into a wide, short box it centred on that sky, so at the
   default 50% split the improved site read as an empty grey rectangle beside a
   busy one. Biased down to the couple and the field, which is the frame the
   photograph is actually about. */
.mini--after .mini__hero img { object-position: center 78%; }