/* =============================================================
   pages/amg-fisio.css — AMG Fisio case study (/projects/amg-fisio)
   -------------------------------------------------------------
   Loaded AFTER styles.css + project-detail.css. Everything is
   page-local (`amg-` prefix) or scoped to `.project-detail--amg`,
   so no other case study is affected.

   Layout language ported (not imported) from the Veloque branding
   page: full-width rails instead of a narrow reading column,
   asymmetric 2/3 and 5/7 rows with a sticky heading, hairline
   bento grids (1px rules, no radius, no shadow), scroll-snap
   carousels and ruled stat strips.

   Colour: portfolio tokens only. The AMG brand hexes appear
   exclusively as swatch DATA inside the colorimetry section
   (.amg-swatch--*), never as page UI.
   ============================================================= */

/* ── Page shell: use the full width ───────────────────────────
   project-detail.css ships a 235px side rail (narrow editorial
   column). This case study is spread-based, so the rail shrinks
   to a viewport-relative gutter. --page-pad-x stays in sync so
   the full-bleed section hairlines still reach the page edges. */
.project-detail--amg {
  --page-pad-x: clamp(20px, 4.5vw, 88px);
  --amg-gap:      clamp(28px, 3.6vw, 72px);
  --amg-cell-pad: clamp(20px, 2.4vw, 36px);
  --amg-rule:     var(--section-border);
  --amg-sticky-top: 96px;
  padding-left:  var(--page-pad-x);
  padding-right: var(--page-pad-x);
  max-width: none;
}

/* Wider measure for body copy on a full-width page: cap the line
   length instead of the container. */
.project-detail--amg .project-section__body { max-width: 72ch; }

/* ── Hero ─────────────────────────────────────────────────────
   Full-bleed image with a bottom fade into the page background,
   then a text block on the same gutter as the body. */
.amg-hero {
  position: relative;
  width: 100%;
  background: var(--bg-main);
}

.amg-hero__media {
  position: relative;
  width: 100%;
  height: 62vh;
  min-height: 420px;
  overflow: hidden;
}

.amg-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
}

.amg-hero__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 12, 29, 0.10) 0%,
    rgba(8, 12, 29, 0.35) 55%,
    rgba(8, 12, 29, 0.80) 82%,
    var(--bg-main) 100%
  );
  pointer-events: none;
}

.amg-hero__text {
  background: var(--bg-main);
  padding: 40px clamp(20px, 4.5vw, 88px) 8px;
}

.amg-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.amg-hero__title {
  font-family: var(--font-headings);
  font-size: clamp(38px, 6vw, 76px);
  font-weight: var(--fw-display);
  letter-spacing: var(--ls-display);
  line-height: 1.04;
  color: var(--white);
  margin-bottom: 16px;
}

.amg-hero__lead {
  font-family: var(--font-text);
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: var(--fw-body);
  line-height: 1.5;
  color: var(--gray-900);
  max-width: 52ch;
  margin: 0;
}

/* ── Meta strip (Client / Role / Timeline / Live / Stack) ──────
   Ruled, not carded: hairline dividers between fields. */
.amg-meta {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--amg-rule);
  border-bottom: 1px solid var(--amg-rule);
  margin-bottom: 8px;
}

.amg-meta__cell {
  padding: 20px 24px 20px 0;
  border-right: 1px solid var(--amg-rule);
}
.amg-meta__cell:last-child { border-right: 0; padding-right: 0; }
.amg-meta__cell + .amg-meta__cell { padding-left: 24px; }

.amg-meta__label {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-900);
  margin-bottom: 8px;
}

.amg-meta__value {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--white);
  margin: 0;
}

.amg-meta__value a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--purple-900);
}
.amg-meta__value a:hover { color: var(--purple-900); }

/* ── Asymmetric rows ──────────────────────────────────────────
   Narrow column holds the eyebrow + h2 and sticks while the wide
   column scrolls past it. Single column under 1024px. */
.amg-row {
  display: grid;
  gap: var(--amg-gap);
  align-items: start;
}

@media (min-width: 1024px) {
  .amg-row--2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .amg-row--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .amg-row__head { position: sticky; top: var(--amg-sticky-top); }
}

.amg-row__head .project-section__title { margin-bottom: 0; max-width: 18ch; }
.amg-row__body > :last-child { margin-bottom: 0; }

/* ── Hairline bento ───────────────────────────────────────────
   1px rules between cells, one around the block. No radius, no
   shadow, no separate cell fill at rest. */
.amg-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
  margin-top: clamp(32px, 4vw, 56px);
}

.amg-bento > * {
  background: var(--bg-main);
  padding: var(--amg-cell-pad);
  margin: 0;
}

@media (min-width: 760px) {
  .amg-bento--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .amg-bento--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .amg-bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .amg-bento--3,
  .amg-bento--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.amg-bento__num {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.18em;
  color: var(--purple-900);
  margin-bottom: 12px;
}

.amg-bento__title {
  font-family: var(--font-headings);
  font-size: var(--fs-20);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  margin-bottom: 8px;
}

.amg-bento__desc {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--gray-900);
  margin: 0;
}

.amg-bento__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.amg-bento__list li {
  position: relative;
  padding-left: 16px;
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--gray-900);
}
.amg-bento__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--blue-800);
}

/* ── Ruled stat strip ─────────────────────────────────────────
   Numbers on rules, no cards. */
.amg-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--amg-rule);
  margin-top: clamp(32px, 4vw, 56px);
}

@media (min-width: 900px) {
  .amg-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .amg-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .amg-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amg-stat {
  padding: 24px 24px 24px 0;
  border-bottom: 1px solid var(--amg-rule);
  border-right: 1px solid var(--amg-rule);
}
.amg-stat + .amg-stat { padding-left: 24px; }

.amg-stat__value {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: var(--mono-fw-gt20);
  letter-spacing: var(--mono-ls-gt20);
  line-height: 1;
  color: var(--white);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.amg-stat__label {
  font-family: var(--font-text);
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--gray-900);
  margin: 0;
}

/* ── Horizontal scroll-snap carousel ──────────────────────────
   Keyboard reachable: the track itself is focusable and scrolls
   with the arrow keys (tabindex="0" + role="group" in markup). */
.amg-scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  margin-top: clamp(28px, 3.5vw, 48px);
  scrollbar-width: thin;
  scrollbar-color: var(--purple-card-border) transparent;
}

.amg-scroller:focus-visible {
  /* purple-500 (#8F00D8) measured 2.93:1 on --bg-main, below the 3:1
     WCAG 1.4.11 non-text-contrast floor for a focus indicator.
     purple-900 (#E8C6FD) is the token the rest of the site already
     uses for :focus-visible and measures 12.89:1 here. */
  outline: 2px solid var(--purple-900);
  outline-offset: 3px;
}

.amg-scroller__item {
  scroll-snap-align: start;
  background: var(--bg-main);
  padding: 0 0 16px;
  min-width: 0;
}

.amg-scroller__item img {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 12px;
}

.amg-scroller__cap {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-900);
  padding: 0 16px;
  margin: 0;
}

@media (min-width: 1024px) {
  .amg-scroller--5 { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
}

/* ── Ranked bars (decision factors) ───────────────────────────
   Rank is data, so the bar width is set per item with a local
   --amg-bar custom property in the markup (a value, not a style
   decision). */
.amg-bars {
  list-style: none;
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
}

.amg-bar {
  position: relative;
  background: var(--bg-main);
  padding: 16px 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  isolation: isolate;
}

.amg-bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--amg-bar, 50%);
  background: rgba(170, 172, 241, 0.10);
  z-index: -1;
}

.amg-bar__rank {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-variant-numeric: tabular-nums;
  color: var(--blue-800);
  flex: none;
}

.amg-bar__label {
  font-family: var(--font-text);
  font-size: var(--fs-15);
  color: var(--white);
}

.amg-bar--zero .amg-bar__label { color: var(--gray-900); }
.amg-bar__note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-900);
}

/* ── Proportional palette bar (60-30-10 style split) ──────────
   The five AMG brand colours appear here as DATA. Widths come
   from the brand book's stated proportions. */
.amg-props {
  display: flex;
  width: 100%;
  height: 76px;
  margin-top: clamp(28px, 3.5vw, 48px);
  border: 1px solid var(--amg-rule);
}

.amg-props__seg { height: 100%; }
.amg-props__seg--green    { flex: 40; background: #6a994d; }
.amg-props__seg--cream    { flex: 35; background: #f2e8d0; }
.amg-props__seg--purple   { flex: 15; background: #8a79b6; }
.amg-props__seg--deep     { flex: 7;  background: #8a79b6; filter: brightness(0.62); }
.amg-props__seg--lavender { flex: 3;  background: #d0bddd; }

.amg-props-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 14px;
  list-style: none;
  padding: 0;
}

.amg-props-key li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.08em;
  color: var(--gray-900);
}

.amg-props-key__chip {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.amg-props-key__chip--green    { background: #6a994d; }
.amg-props-key__chip--lime     { background: #a6c958; }
.amg-props-key__chip--cream    { background: #f2e8d0; }
.amg-props-key__chip--purple   { background: #8a79b6; }
.amg-props-key__chip--lavender { background: #d0bddd; }

/* ── Pull quotes ──────────────────────────────────────────────
   Survey verbatims. Spanish stays in the quote, translation in
   the attribution line. */
.amg-quotes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
  margin-top: clamp(28px, 3.5vw, 48px);
}
@media (min-width: 900px) {
  .amg-quotes--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amg-quote {
  background: var(--bg-main);
  padding: var(--amg-cell-pad);
  margin: 0;
}

.amg-quote blockquote {
  font-family: var(--font-headings);
  font-size: var(--fs-20);
  font-weight: var(--fw-heading);
  line-height: 1.4;
  color: var(--white);
  margin: 0 0 14px;
}

.amg-quote figcaption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-900);
}

/* ── Figures, captions, image grids ───────────────────────────*/
.amg-figure {
  margin: clamp(28px, 3.5vw, 48px) 0 0;
}

.amg-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--amg-rule);
}

.amg-figure figcaption,
.amg-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-900);
  margin-top: 10px;
}

.amg-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(28px, 3.5vw, 48px);
}
@media (min-width: 700px)  { .amg-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .amg-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .amg-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.amg-grid .amg-figure { margin-top: 0; }

/* Screenshot crop: the live-site captures are 1440x3200 headless
   shots with the cookie banner pinned to the bottom. A fixed
   aspect window anchored near the top crops the banner out and
   keeps the shots a readable height. */
.amg-shot {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--amg-rule);
  background: var(--card-surface);
}
.amg-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  border: 0;
}
.amg-shot--hero img { object-position: 50% 48%; }
.amg-shot--tall { aspect-ratio: 4 / 3; }

/* ── Brand-book stack ─────────────────────────────────────────
   31 A4-landscape pages, zero gap, so the section reads as one
   continuous scroll of the PDF. */
.amg-book {
  margin-top: clamp(32px, 4vw, 64px);
  /* Full width of the content column; the pages carry their own
     cream/dark artboard backgrounds, so no frame is added. */
  background: var(--bg-main);
  font-size: 0;          /* kills inline-block whitespace gaps */
  line-height: 0;
}

.amg-book img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 0;
  vertical-align: top;
}

/* ── Numbered process steps (proxy fix, before/after) ─────────*/
.amg-steps {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
  margin: clamp(28px, 3.5vw, 48px) 0 0;
  padding: 0;
  counter-reset: amg-step;
}
@media (min-width: 900px) {
  .amg-steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amg-step {
  counter-increment: amg-step;
  background: var(--bg-main);
  padding: var(--amg-cell-pad);
}

.amg-step::before {
  content: counter(amg-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: var(--fw-display);
  line-height: 1;
  color: rgba(170, 172, 241, 0.28);
  margin-bottom: 14px;
}

.amg-step__title {
  font-family: var(--font-headings);
  font-size: var(--fs-body);
  font-weight: var(--fw-heading);
  color: var(--white);
  margin: 0 0 8px;
}

.amg-step__desc {
  font-family: var(--font-text);
  font-size: var(--fs-14);
  line-height: 1.55;
  color: var(--gray-900);
  margin: 0;
}

/* ── IA diagram (hubs → spokes → booking) ─────────────────────
   Built in HTML/CSS, no image. Semantically a nested list. */
.amg-ia {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--amg-rule);
  border: 1px solid var(--amg-rule);
  margin-top: clamp(28px, 3.5vw, 48px);
  list-style: none;
  padding: 0;
}
@media (min-width: 900px) {
  .amg-ia { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.amg-ia__hub {
  background: var(--bg-main);
  padding: var(--amg-cell-pad);
}

.amg-ia__hub-name {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--mono-fw-lte20);
  color: var(--white);
  word-break: break-word;
  margin: 0 0 4px;
}

.amg-ia__hub-note {
  font-family: var(--font-text);
  font-size: var(--fs-12);
  color: var(--gray-900);
  margin: 0 0 16px;
}

.amg-ia__spokes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--amg-rule);
  padding-left: 16px;
}

.amg-ia__spokes li {
  font-family: var(--font-text);
  font-size: var(--fs-13);
  color: var(--gray-900);
}

.amg-ia-depth {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  font-weight: var(--mono-fw-lte20);
  color: var(--white);
}

.amg-ia-depth__node {
  border: 1px solid var(--purple-card-border);
  background: var(--card-surface);
  padding: 8px 14px;
}

.amg-ia-depth__arrow {
  color: var(--blue-800);
  font-size: var(--fs-15);
}

/* ── Data table (SEO plan vs shipped) ─────────────────────────*/
.amg-table-wrap {
  margin-top: clamp(28px, 3.5vw, 48px);
  overflow-x: auto;
  border: 1px solid var(--amg-rule);
}

.amg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-text);
  font-size: var(--fs-13);
  color: var(--gray-900);
}

.amg-table th,
.amg-table td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--amg-rule);
  vertical-align: top;
}

.amg-table thead th {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple-900);
  white-space: nowrap;
}

.amg-table tbody tr:last-child td { border-bottom: 0; }
.amg-table td:first-child { color: var(--white); }
.amg-table code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--white);
  word-break: break-word;
}

/* ── Tag rows ─────────────────────────────────────────────────*/
.amg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: clamp(20px, 2.5vw, 32px);
}

/* ── Inline link style inside body copy ───────────────────────*/
.project-detail--amg .project-section__body a {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--purple-900);
}
.project-detail--amg .project-section__body a:hover { color: var(--purple-900); }

/* ── Responsive ───────────────────────────────────────────────*/
@media (max-width: 1023px) {
  .amg-row__head .project-section__title { max-width: 24ch; margin-bottom: 8px; }
}

@media (max-width: 900px) {
  .amg-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amg-meta__cell { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--amg-rule); }
  .amg-meta__cell + .amg-meta__cell { padding-left: 16px; }
  .amg-meta__cell:nth-child(2n) { border-right: 0; padding-right: 0; }
  .amg-meta__cell:nth-child(2n + 1) { padding-left: 0; }
  .amg-hero__media { height: 46vh; min-height: 340px; }
  .amg-shot { aspect-ratio: 4 / 3; }
}

@media (max-width: 640px) {
  .project-detail--amg { padding-top: 24px; padding-bottom: 40px; }
  .amg-hero__media { height: 40vh; min-height: 280px; }
  .amg-hero__text { padding-top: 28px; }
  .amg-meta { grid-template-columns: 1fr; }
  .amg-meta__cell,
  .amg-meta__cell + .amg-meta__cell { padding: 14px 0; border-right: 0; padding-left: 0; }
  .amg-props { height: 56px; }
  .amg-scroller { grid-auto-columns: 78%; }
  .amg-stat,
  .amg-stat + .amg-stat { padding: 18px 0; border-right: 0; padding-left: 0; }
  .amg-stats { grid-template-columns: 1fr; }
  .amg-bar { flex-wrap: wrap; gap: 8px; }
  .amg-bar__note { margin-left: 0; width: 100%; }
}

/* ── Motion ───────────────────────────────────────────────────
   No page-local animation is defined; the shared reveal in
   modules/animations.js already honours reduced motion. This
   block kills smooth scrolling inside the carousels too. */
@media (prefers-reduced-motion: reduce) {
  .amg-scroller { scroll-behavior: auto; }
  .amg-row__head { position: static; }
}

/* ── Small utilities ──────────────────────────────────────────*/
/* Sub-heading inside a section (h3 above a grid, table or strip). */
.amg-subhead {
  font-family: var(--font-headings);
  font-size: var(--fs-20);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  margin: clamp(40px, 5vw, 64px) 0 0;
}

/* Body copy that follows a data block rather than opening one. */
.amg-after { margin-top: clamp(16px, 2vw, 24px); }

/* Visually hidden, still announced (used for the table caption).
   No .sr-only utility exists in styles.css, so this is page-local. */
.amg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Identity-direction carousel: the five source boards have wildly
   different aspect ratios (a 4:3 board next to a tall naming
   sheet). A fixed window per slide keeps the captions on one
   baseline instead of stepping down the row. */
.amg-scroller--5 .amg-scroller__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
}

/* Phone capture: the mobile screenshot is 430x2400, so the 16/10
   window used for desktop shots would crop it to a sliver. Frame
   it phone-shaped and centred inside its grid cell instead. */
.amg-shot--phone {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  margin-inline: auto;
}
/* The phone capture's hero copy and booking card live in the top
   half of the image; pin the window there, not to the very top. */
.amg-shot--phone img { object-position: center 35%; }

/* Boxed pair: spec sheet (portrait, white) next to the card render
   (landscape photo). A shared 4:3 window with object-fit: contain
   keeps the row on one height without cropping the measurements. */
.amg-figure--boxed img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: contain;
  background: #f6f4ef;
  border: 1px solid var(--amg-rule);
}

/* ── Live site frames (real iframes of amgfisio.com) ─────────
   Desktop window + phone viewport, side by side. The iframes are
   lazy and load the production site; captions carry a fallback. */
.amg-live {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
  gap: clamp(20px, 2.5vw, 40px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 40px);
}
.amg-device {
  border: 1px solid var(--amg-rule);
  background: var(--card-surface);
  overflow: hidden;
}
.amg-device--desktop { aspect-ratio: 16 / 10; }
.amg-device--desktop iframe { width: 100%; height: 100%; border: 0; display: block; }
.amg-device--phone {
  width: min(390px, 100%);
  height: 740px;
  margin-inline: auto;
  border-radius: 22px;
}
.amg-device--phone iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) {
  .amg-live { grid-template-columns: 1fr; }
}

/* ── English notes interleaved in the brand-book stack ───────
   The book is Spanish; these short translations sit right under
   the three text-heavy pages so English readers can follow. */
.amg-book__note {
  background: var(--bg-main);
  padding: clamp(40px, 5vw, 72px) clamp(20px, 3vw, 48px);
  border-bottom: 1px solid var(--amg-rule);
}
.amg-book__note-title {
  font-family: var(--font-headings);
  font-size: var(--fs-20);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  color: var(--white);
  margin: 0 0 22px;
}
.amg-book__note p + p { margin-top: 20px; }
.amg-book__note-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--mono-fw-lte20);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--purple-900);
  margin: 0 0 18px;
  line-height: 1.4;
}
.amg-book__note p:not(.amg-book__note-eyebrow) {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--gray-900);
  max-width: 68ch;
  margin: 0;
}

/* Full, uncropped image (natural aspect) inside a figure. */
.amg-img-full {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--amg-rule);
}

/* ── Image lightbox overlay (modules/lightbox.js) ────────────
   Near-fullscreen preview for every gridded figure. */
body.uber-modal-open { overflow: hidden; }
.uber-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  background: rgba(2, 4, 14, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.uber-lightbox[data-open='true'] { display: flex; }
.uber-lightbox__img {
  max-width: 94vw;
  max-height: 86vh;
  width: auto;
  height: auto;
  border: 1px solid var(--amg-rule);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  cursor: default;
}
.uber-lightbox__caption {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: 0.08em;
  color: var(--gray-900);
  text-align: center;
  max-width: 70ch;
}
.uber-lightbox__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  background: rgba(250, 250, 250, 0.06);
  border: 1px solid rgba(250, 250, 250, 0.25);
  border-radius: 50%;
  color: var(--white);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.uber-lightbox__close:hover { background: rgba(250, 250, 250, 0.14); }
[data-lightbox] { cursor: zoom-in; }

/* Facade grid: uniform cell aspect so the rejected first proposal
   (a taller source) sits flush with the six option mockups. */
.amg-grid--3 .amg-figure > img {
  aspect-ratio: 2000 / 1162;
  object-fit: cover;
  width: 100%;
  height: auto;
}