/* Layout: a 12-column editorial grid in black and white. Hairline rules divide sections;
   case studies pair a sticky index on the left with the story on the right. One typeface throughout. */
:root {
  --bg: #FFFFFF;
  --fg: #0B0B0B;
  --muted: #6E6E6E;
  --line: #E3E3E3;
  --panel: #F2F2F2;
  --frame: #0B0B0B;
  --foot-bg: #0B0B0B;
  --foot-fg: #FFFFFF;
  --foot-muted: #A3A3A3;
  --foot-line: #2A2A2A;

  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --col-gap: 24px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B0B0B; --fg: #F2F2F2; --muted: #9B9B9B; --line: #262626; --panel: #161616; --frame: #3A3A3A;
    --foot-bg: #161616; --foot-fg: #F2F2F2; --foot-muted: #9B9B9B; --foot-line: #2E2E2E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B0B0B; --fg: #F2F2F2; --muted: #9B9B9B; --line: #262626; --panel: #161616; --frame: #3A3A3A;
  --foot-bg: #161616; --foot-fg: #F2F2F2; --foot-muted: #9B9B9B; --foot-line: #2E2E2E;
  color-scheme: dark;
}

*, *::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 { transition: none !important; } }
body {
  margin: 0;
  padding-inline: var(--gutter);
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.wrap { max-width: var(--max); margin-inline: auto; }

h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.display { font-size: clamp(2.6rem, 1rem + 6vw, 6.6rem); font-weight: 500; letter-spacing: -.045em; line-height: .98; }
.display--sm { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.8rem); }
h1 { font-size: clamp(2.6rem, 1.3rem + 5vw, 5.8rem); letter-spacing: -.04em; line-height: 1; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.9rem); letter-spacing: -.03em; }
h3 { font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
h4 { font-size: 1.05rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }

.label { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.muted { color: var(--muted); }
.lede { font-size: clamp(1.1rem, 1rem + .45vw, 1.3rem); line-height: 1.5; }
.link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.link:hover { text-decoration-thickness: 2px; }
.todo { display: inline-block; padding: 0 .4em; border: 1px dashed currentColor; border-radius: 4px; font-size: .85em; opacity: .7; font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Header */
.site-head { border-bottom: 1px solid var(--line); }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding-block: 20px; }
.brand { font-weight: 600; letter-spacing: -.01em; }
.nav { display: flex; gap: clamp(18px, 3vw, 36px); font-size: .95rem; }
.nav a { text-underline-offset: .3em; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; }

/* Home hero */
.hero { display: grid; gap: clamp(28px, 4vw, 48px); padding-block: clamp(56px, 10vw, 140px) clamp(48px, 7vw, 96px); }
.hero .display { max-width: 15ch; }
.hero-foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--col-gap); padding-top: 24px; border-top: 1px solid var(--fg); }
.hero-foot .lede { grid-column: 1 / span 6; max-width: 44ch; }
.hero-links { grid-column: 9 / span 4; display: grid; gap: 8px; align-content: start; justify-items: start; }
@media (max-width: 760px) { .hero-foot .lede, .hero-links { grid-column: 1 / -1; } }

/* Sections */
.section { padding-block: clamp(56px, 9vw, 120px); }
.section-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--fg); margin-bottom: clamp(32px, 5vw, 56px); }

/* Work index */
.cases { display: grid; gap: clamp(72px, 10vw, 128px); }
.case { position: relative; display: grid; gap: 20px; }
.case-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 6px 24px; }
.case-index { font-size: .9rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.case-title { font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.case-type { color: var(--muted); text-align: right; }
.case-link::after { content: ""; position: absolute; inset: 0; }
.case:hover .case-title, .case-link:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; outline: none; }
.case-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; padding: clamp(20px, 5vw, 64px); background: var(--panel); overflow: hidden; }
.case-meta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--col-gap); padding-top: 18px; border-top: 1px solid var(--line); }
.case-meta .summary { grid-column: span 6; max-width: 52ch; }
.case-meta > div { grid-column: span 2; display: grid; gap: 2px; align-content: start; }
.case-meta > div p:last-child { font-weight: 600; }
@media (max-width: 860px) {
  .case-meta .summary { grid-column: 1 / -1; }
  .case-meta > div { grid-column: span 4; }
  .case-media { aspect-ratio: 4 / 3; }
}
@media (max-width: 560px) {
  .case-head { grid-template-columns: auto minmax(0, 1fr); }
  .case-type { grid-column: 2; text-align: left; }
  .case-meta > div { grid-column: span 6; }
}

/* Approach */
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px var(--col-gap); list-style: none; padding: 0; counter-reset: p; }
.principles li { display: grid; gap: 10px; align-content: start; padding-top: 16px; border-top: 1px solid var(--line); counter-increment: p; }
.principles li::before { content: counter(p, decimal-leading-zero); font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.principles p { color: var(--muted); }
@media (max-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .principles { grid-template-columns: 1fr; } }

.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--col-gap); }
.story h2 { grid-column: 1 / span 5; }
.story__text { grid-column: 7 / span 6; display: grid; gap: 18px; max-width: 58ch; }
@media (max-width: 860px) { .story h2, .story__text { grid-column: 1 / -1; } }

/* Footer */
.site-foot {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  padding-block: clamp(64px, 10vw, 128px) 32px;
  margin-top: clamp(64px, 10vw, 128px);
  background: var(--foot-bg);
  color: var(--foot-fg);
}
.site-foot .label { color: var(--foot-muted); }
.foot-title { margin-top: 16px; font-size: clamp(3rem, 1.4rem + 7vw, 8rem); font-weight: 500; letter-spacing: -.05em; line-height: .95; }
.foot-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--col-gap); margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--foot-line); }
.foot-row p { grid-column: 1 / span 5; color: var(--foot-muted); max-width: 44ch; }
.foot-links { grid-column: 7 / span 6; display: flex; flex-wrap: wrap; gap: 12px 32px; align-content: start; }
.copyright { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 72px; font-size: .85rem; color: var(--foot-muted); }
@media (max-width: 760px) { .foot-row p, .foot-links { grid-column: 1 / -1; } }

/* Image slots: a real PNG covers the placeholder as soon as it exists in /images */
.shot { display: grid; gap: 10px; min-width: 0; }
.shot figcaption { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.shot__frame { position: relative; overflow: hidden; background: var(--bg); }
.shot__frame img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.shot.is-missing img { display: none; }
.shot__ph {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; padding: 12px;
  text-align: center; font-size: .8rem; line-height: 1.35; color: var(--muted);
  background: repeating-linear-gradient(-45deg, transparent 0 11px, var(--line) 11px 12px);
}
.shot__ph b { color: var(--fg); font-weight: 600; }
.shot__ph code { justify-self: center; font-family: var(--mono); font-size: .72rem; background: var(--panel); padding: .15em .45em; border-radius: 4px; word-break: break-all; }

.shot--plain, .shot--paper { width: 100%; }
.shot--plain .shot__frame, .shot--paper .shot__frame { aspect-ratio: 16 / 10; background: var(--panel); }
.shot--plain.is-loaded .shot__frame, .shot--paper.is-loaded .shot__frame { aspect-ratio: auto; background: transparent; }
.shot--plain.is-loaded img, .shot--paper.is-loaded img { height: auto; object-fit: contain; }

.duo { display: flex; align-items: flex-end; justify-content: center; gap: 3%; width: 100%; max-width: 980px; }
.pair { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 40px); width: 100%; }
.pair .shot--phone { width: min(30%, 220px); }
.cover .pair .shot--phone { width: min(40%, 240px); }

/* Case study pages */
.cs-hero { display: grid; gap: 20px; padding-block: clamp(32px, 6vw, 80px) clamp(32px, 5vw, 56px); }
.back { color: var(--muted); font-size: .95rem; }
.back:hover { color: var(--fg); }
.cs-hero h1 { max-width: 14ch; }
.cs-lede { max-width: 40ch; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); line-height: 1.45; }
.cover { display: flex; justify-content: center; padding: clamp(24px, 6vw, 88px); background: var(--panel); }

.cs-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); padding-top: clamp(40px, 6vw, 72px); }
.cs-aside { grid-column: 1 / span 3; align-self: start; position: sticky; top: 24px; display: grid; gap: 28px; }
.cs-main { grid-column: 5 / span 8; min-width: 0; }
.meta { display: grid; gap: 14px; }
.meta dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.meta dd { margin-top: 2px; font-weight: 600; line-height: 1.4; }
.toc { display: grid; gap: 6px; padding-top: 20px; border-top: 1px solid var(--line); font-size: .95rem; }
.toc a { color: var(--muted); transition: color .15s ease; }
.toc a:hover, .toc a.is-active { color: var(--fg); }
.toc a.is-active::before { content: "— "; }
@media (max-width: 960px) {
  .cs-aside { grid-column: 1 / -1; position: static; }
  .cs-main { grid-column: 1 / -1; }
  .meta { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--col-gap); }
  .toc { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .toc a.is-active::before { content: none; }
}
@media (max-width: 600px) { .meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--col-gap); }
.glance > div { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid var(--fg); }
@media (max-width: 760px) { .glance { grid-template-columns: 1fr; } }

.chapter { display: grid; gap: clamp(28px, 4vw, 44px); padding-top: clamp(56px, 8vw, 104px); scroll-margin-top: 24px; }
.chapter__head { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--fg); }
.sub, .split { display: grid; gap: 20px; }
.split > .prose { order: -1; }
.prose { display: grid; gap: 1em; max-width: 64ch; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: .4em; }
.prose strong { font-weight: 600; }
.flowline { font-weight: 600; letter-spacing: .02em; }

.insights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px var(--col-gap); list-style: none; padding: 0; }
.insights li { display: grid; gap: 8px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line); }
.insights p { color: var(--muted); }
@media (max-width: 760px) { .insights { grid-template-columns: 1fr; } }

.fixes { display: grid; gap: clamp(44px, 6vw, 72px); }
.fix { display: grid; gap: 20px; }
.fix__shots { display: flex; align-items: flex-start; justify-content: center; gap: clamp(16px, 5vw, 56px); padding: clamp(20px, 4vw, 48px); background: var(--panel); }
.fix__shots .shot--phone { width: min(42%, 220px); }
.fix__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px var(--col-gap); }
.fix__text > div { display: grid; gap: 6px; align-content: start; }
@media (max-width: 640px) { .fix__text { grid-template-columns: 1fr; } }

.pull { display: grid; gap: 16px; padding-block: 8px; }
.pull blockquote p { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.2; text-wrap: balance; }

.outcome { display: grid; gap: 40px; }

.next { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-top: clamp(72px, 10vw, 128px); padding-block: 28px; border-block: 1px solid var(--fg); }
.next h2 { margin-top: 8px; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); letter-spacing: -.04em; line-height: 1; }
.next .arrow { font-size: clamp(2rem, 1.2rem + 3vw, 3.6rem); line-height: 1; transition: transform .2s ease; }
.next:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.next:hover .arrow { transform: translateX(8px); }

/* About */
.about-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--col-gap); padding-top: 24px; border-top: 1px solid var(--fg); }
.portrait { grid-column: 1 / span 4; }
.portrait .shot .shot__frame, .portrait .shot.is-loaded .shot__frame { aspect-ratio: 4 / 5; }
.portrait .shot.is-loaded img { height: 100%; object-fit: cover; }
.about-text { grid-column: 6 / span 7; align-content: start; }
@media (max-width: 860px) { .portrait { grid-column: 1 / span 8; } .about-text { grid-column: 1 / -1; } }
@media (max-width: 480px) { .portrait { grid-column: 1 / -1; } }

.timeline { list-style: none; padding: 0; display: grid; }
.timeline li { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px var(--col-gap); padding-block: 24px; border-top: 1px solid var(--line); }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .when { grid-column: 1 / span 3; color: var(--muted); font-variant-numeric: tabular-nums; }
.timeline .what { grid-column: 5 / span 8; display: grid; gap: 6px; }
@media (max-width: 760px) { .timeline .when, .timeline .what { grid-column: 1 / -1; } }

.toolbox { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--col-gap); }
.toolbox > div { display: grid; gap: 14px; align-content: start; padding-top: 14px; border-top: 1px solid var(--line); }
.plain-list { list-style: none; padding: 0; display: grid; gap: 6px; }
@media (max-width: 760px) { .toolbox { grid-template-columns: 1fr; } }

/* Accents: each project carries its own color (D6 warm orange, Second Thought violet);
   the site's signature gradient blends the two and appears only at edges and key words. */
:root {
  --grad: linear-gradient(90deg, #FF8A3D 0%, #F2547D 50%, #7B61FF 100%);
  --accent: #D43F7E;
  --tint: linear-gradient(135deg, #F4F4F4 0%, #ECECEC 100%);
  --tint-soft: #F2F2F2;
}
.theme-cafe, .case--cafe { --accent: #D2601E; --tint: linear-gradient(135deg, #FFE8D3 0%, #FBD5C6 100%); --tint-soft: #FFF3E8; }
.theme-calm, .case--calm { --accent: #6A52D6; --tint: linear-gradient(135deg, #EDE7FF 0%, #DCE6FF 100%); --tint-soft: #F4F1FF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --accent: #F47DB2; --tint: linear-gradient(135deg, #1B1B1B, #141414); --tint-soft: #161616; }
  :root:not([data-theme="light"]) .theme-cafe, :root:not([data-theme="light"]) .case--cafe { --accent: #FF9A5C; --tint: linear-gradient(135deg, #3B2416 0%, #2F1C1F 100%); --tint-soft: #20160F; }
  :root:not([data-theme="light"]) .theme-calm, :root:not([data-theme="light"]) .case--calm { --accent: #A996FF; --tint: linear-gradient(135deg, #261F47 0%, #1B2442 100%); --tint-soft: #16132A; }
}
:root[data-theme="dark"] { --accent: #F47DB2; --tint: linear-gradient(135deg, #1B1B1B, #141414); --tint-soft: #161616; }
:root[data-theme="dark"] .theme-cafe, :root[data-theme="dark"] .case--cafe { --accent: #FF9A5C; --tint: linear-gradient(135deg, #3B2416 0%, #2F1C1F 100%); --tint-soft: #20160F; }
:root[data-theme="dark"] .theme-calm, :root[data-theme="dark"] .case--calm { --accent: #A996FF; --tint: linear-gradient(135deg, #261F47 0%, #1B2442 100%); --tint-soft: #16132A; }

::selection { background: var(--accent); color: #FFFFFF; }
.strip { height: 6px; margin-inline: calc(-1 * var(--gutter)); background: var(--grad); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.link:hover { text-decoration-color: var(--accent); }
.nav a:hover, .nav a[aria-current="page"] { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.hero-foot { border-top: 2px solid transparent; border-image: var(--grad) 1; }
.principles li::before { color: var(--accent); font-weight: 600; }

.case-index { color: var(--accent); font-weight: 600; }
.case-media { background: var(--tint); }
.case:hover .case-title, .case-link:focus-visible { text-decoration-color: var(--accent); }
.case-meta { border-top: 2px solid var(--accent); }

.site-foot { position: relative; }
.site-foot::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--grad); }

.cover { background: var(--tint); }
.cs-hero .label, .chapter__head .label { color: var(--accent); }
.toc a.is-active { color: var(--accent); }
.glance > div { border-top: 2px solid var(--accent); }
.chapter__head { border-top: 2px solid var(--accent); }
.insights li { border-top-color: var(--accent); }
.fix__shots { background: var(--tint-soft); }
.fix__text .label { color: var(--accent); }
.pull blockquote p::before { content: ""; display: block; width: 56px; height: 4px; margin-bottom: 20px; background: var(--grad); }
.next { border-top: 3px solid transparent; border-bottom: 0; border-image: var(--grad) 1; }
.next:hover h2 { text-decoration-color: var(--accent); }

/* Device frames, drawn in CSS and scaled with container units:
   a modern 6.3-inch phone (iPhone 17 proportions) and a desktop display on a stand. */
.shot--phone, .shot--desktop { container-type: inline-size; }

.shot--phone { width: min(100%, 240px); }
.shot--phone .shot__frame { aspect-ratio: 1350 / 2760; overflow: visible; background: transparent; }
/* Screen opening of Apple's official iPhone 17 bezel (1206 x 2622 inside a 1350 x 2760 frame) */
.shot--phone .shot__frame img, .shot--phone .shot__scroll { position: absolute; left: 4.815%; top: 2.246%; width: 90.370%; height: 95.507%; }
.shot--phone .shot__ph { inset: 2.246% 4.815%; }
.shot--phone .shot__frame img, .shot--phone .shot__ph, .shot--phone .shot__scroll {
  -webkit-mask: url("data:image/png;base64,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AMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECxAsBwCQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwXIIAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAECxAsgDMTrJXDAJwBq4VgAWdphPXRqV4OB7CJI6vx7UeX1R2CBZyBYN2xrLYdD+AM2LboDpyZkZZtDcCZIViAYAEIFiBYAIIFIFiAYAEIFsClB8tOd+AsWC2rd04fOB7ABtteVl9yHIAz4M5lteU4AJs8FRzfvmtZ3eN4AGfA1y2rW8YPnDEENtFifPuZZbXjeABnIFjvXlYfqO4aP+lMIbCJdqvdZfWF6pzjAWyg1TiYuqu6dVnd3d4r5+w6PsAG+nL11eks4WccD2BDp4KNg6rPT2cG/302/ALYpClh1W3NXoTivx0XYIPdXnt7r949lsxeLGCTTFsa3j8P1n9Un8/dG4DNmg5O6+y3TsHaqj5XvW98kDOFwKYEa1H9V/WxarGcjbLePHsQwGmbBk9vatgrujWfAv7L2pwR4DRNLXrD9InlrGLvadj1vmWUBWzAdHBZfbW9bVe7U7C2qk/OpoUuiAZOezq4qP6p+tA0uFrfxvAq00Jgg/z+vEmL2Qer6v4NW+Af094KPcDlng5OFzxf03Dp4KLZTvdVtV39b/XnpoXAKU8Ha1hs/0yzdfX5CGprjNR3VO8dv2aEBZxGsHaqZzacDJzadK9LcXbGL9xa3WyUBZyCnfYW298zNuprHVpfdJ9GVK80ugJOyaL6zfHtcr9AtTY1rHpd9QOzkRfASY+uthpuxvCMsU/3ulRweZ6/+IrZxzaSApfDqvrVDtilsDxP5f61+qNmC14AJzy6+suGs4P7duegdaopZA9q2Bb/uNwvCzi5UdWq4TKca9u7oejuUUZY0wOnjVsv228uCXBMdscW/Vz1ifP1ZuuQ6m03XMfzTdX1DTfSsgAPHJdzY2f+uvql8f0Dl6AO27ownVZ8QPXG6oacNQSOx87Yl9urp44zus43mztsTWqaW95dvbj6lOkhcAyms4CL6icabtF+aFuOsoi+Ow7TPlz96Ozv2OoAXGyspnWrl1S3dMTdCEed2k3R+njD3RxumgXLjnjgQmK1GtvzkurVHbJudTHBmkfrfWvRchsa4EJitWzYmP7K6qqGhfcjudDF893xB0zRmqaIO9mjBZy/Hc2mgVOs7rmQb3KxI6PtsYrPrV5TPaq905MAc1MbVtVPz6aB5y70Gy0v8Rd4a/W86p2zX8BiPDBNAXfGNvxn9T2XEquLmRKuD/G2q09Xf1F9W/WkcdR2zhQR7tOmZaJl9VfVC6vbusRrky81KufGX+DuhvWsnxnf3x6DZr8W3PdCtTPrwsvGNtzRMdxI4Th2rE9nCZcNL8b6Zw0vYvGU8fM7uXAarnTTAGVrNqr6keofZs/9Sx7AHPd2hHlBn99wX5vn7zNMtA0Czr5pA+j8zqDvqH6reu0+TbhkJxGO5Wxk1Tgc/NmGBbfFLFyJF5zZSK3P0NZDdWyjqpMOVgeU9cbq56vvra5eG3WtZvESMNisQM1HUvNI3VH9ffXH1d/NmrLshG76eTnisLVW5UdVL2rYKf+c6n5rj58CtlgrtZDByYZpPiJa7ROoGm6y9/aGO4O+pmGXQCcx/TutYB00Vax6YvXk6gVjvL61g08ErGZ/jvr7G7FxXx0RHSVORxkQ7FQfbNhr+bZx6vfBtUjVZbqN+mk8mRezEq8fuGur6xpuFvjEhhsHXjOOwh7s3yKcmK9UX6w+0nCTgw+Nf97VcKeW3SM8h6/IYK2PuqbCH7Tz9REN95a/bjxIz264Bumq6lmdf2vGE6qH5QJt7hsjq0V1Z/Wx8zxuZxwl3TP+uWX83O3VJ6vPHvD3tmdTxlPbX/l//Q9bVjFfSjwAAAAASUVORK5CYII=") center / 100% 100% no-repeat;
  mask: url("data:image/png;base64,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AMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECxAsBwCQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwXIIAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAECxAsgDMTrJXDAJwBq4VgAWdphPXRqV4OB7CJI6vx7UeX1R2CBZyBYN2xrLYdD+AM2LboDpyZkZZtDcCZIViAYAEIFiBYAIIFIFiAYAEIFsClB8tOd+AsWC2rd04fOB7ABtteVl9yHIAz4M5lteU4AJs8FRzfvmtZ3eN4AGfA1y2rW8YPnDEENtFifPuZZbXjeABnIFjvXlYfqO4aP+lMIbCJdqvdZfWF6pzjAWyg1TiYuqu6dVnd3d4r5+w6PsAG+nL11eks4WccD2BDp4KNg6rPT2cG/302/ALYpClh1W3NXoTivx0XYIPdXnt7r949lsxeLGCTTFsa3j8P1n9Un8/dG4DNmg5O6+y3TsHaqj5XvW98kDOFwKYEa1H9V/WxarGcjbLePHsQwGmbBk9vatgrujWfAv7L2pwR4DRNLXrD9InlrGLvadj1vmWUBWzAdHBZfbW9bVe7U7C2qk/OpoUuiAZOezq4qP6p+tA0uFrfxvAq00Jgg/z+vEmL2Qer6v4NW+Af094KPcDlng5OFzxf03Dp4KLZTvdVtV39b/XnpoXAKU8Ha1hs/0yzdfX5CGprjNR3VO8dv2aEBZxGsHaqZzacDJzadK9LcXbGL9xa3WyUBZyCnfYW298zNuprHVpfdJ9GVK80ugJOyaL6zfHtcr9AtTY1rHpd9QOzkRfASY+uthpuxvCMsU/3ulRweZ6/+IrZxzaSApfDqvrVDtilsDxP5f61+qNmC14AJzy6+suGs4P7duegdaopZA9q2Bb/uNwvCzi5UdWq4TKca9u7oejuUUZY0wOnjVsv228uCXBMdscW/Vz1ifP1ZuuQ6m03XMfzTdX1DTfSsgAPHJdzY2f+uvql8f0Dl6AO27ownVZ8QPXG6oacNQSOx87Yl9urp44zus43mztsTWqaW95dvbj6lOkhcAyms4CL6icabtF+aFuOsoi+Ow7TPlz96Ozv2OoAXGyspnWrl1S3dMTdCEed2k3R+njD3RxumgXLjnjgQmK1GtvzkurVHbJudTHBmkfrfWvRchsa4EJitWzYmP7K6qqGhfcjudDF893xB0zRmqaIO9mjBZy/Hc2mgVOs7rmQb3KxI6PtsYrPrV5TPaq905MAc1MbVtVPz6aB5y70Gy0v8Rd4a/W86p2zX8BiPDBNAXfGNvxn9T2XEquLmRKuD/G2q09Xf1F9W/WkcdR2zhQR7tOmZaJl9VfVC6vbusRrky81KufGX+DuhvWsnxnf3x6DZr8W3PdCtTPrwsvGNtzRMdxI4Th2rE9nCZcNL8b6Zw0vYvGU8fM7uXAarnTTAGVrNqr6keofZs/9Sx7AHPd2hHlBn99wX5vn7zNMtA0Czr5pA+j8zqDvqH6reu0+TbhkJxGO5Wxk1Tgc/NmGBbfFLFyJF5zZSK3P0NZDdWyjqpMOVgeU9cbq56vvra5eG3WtZvESMNisQM1HUvNI3VH9ffXH1d/NmrLshG76eTnisLVW5UdVL2rYKf+c6n5rj58CtlgrtZDByYZpPiJa7ROoGm6y9/aGO4O+pmGXQCcx/TutYB00Vax6YvXk6gVjvL61g08ErGZ/jvr7G7FxXx0RHSVORxkQ7FQfbNhr+bZx6vfBtUjVZbqN+mk8mRezEq8fuGur6xpuFvjEhhsHXjOOwh7s3yKcmK9UX6w+0nCTgw+Nf97VcKeW3SM8h6/IYK2PuqbCH7Tz9REN95a/bjxIz264Bumq6lmdf2vGE6qH5QJt7hsjq0V1Z/Wx8zxuZxwl3TP+uWX83O3VJ6vPHvD3tmdTxlPbX/l//Q9bVjFfSjwAAAAASUVORK5CYII=") center / 100% 100% no-repeat;
}
.shot--phone .shot__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url("images/device-iphone-17.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 22px rgba(10, 10, 12, .28));
}

.shot--desktop { width: 100%; }
.shot--desktop .shot__frame { aspect-ratio: 3805 / 2297; overflow: visible; background: transparent; }
/* Screen opening of Apple's official MacBook Pro 14-inch (M5) bezel; the top strip sits under the camera notch like a menu bar */
.shot--desktop .shot__frame img, .shot--desktop .shot__ph, .shot--desktop .shot__scroll {
  position: absolute; left: 10.066%; top: 2.090%; width: 79.895%; height: 86.199%;
  box-sizing: border-box; border-top: 1.892cqw solid #0B0B0B;
  -webkit-mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEFCAYAAADNFLE8AAADe0lEQVR42u3aIU5DQRRA0Tu/QeCqWAamQULYCqoJ+2ALJCi2QrDsBIUCRUHwf6ghobrn6FHP3LyZGdVU7arr6qa6qNbVWbUKgGP2Wb1Wb9VL9Vg9VdOYD2yr+zkmAPCXXXVbPYzqsnreK80SkWFOAFRfe/FYbqauVtVddT7HYzWHQzwAaG+hGPOCsSwaJ1O1sXEAcEBMqjZTPw/mAgLAIQFZj+q9OjUTAA7wMfp9HAGAf/NtFwABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQECMAQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEgCP2Dc01FoJ00I/KAAAAAElFTkSuQmCC") center / 100% 100% no-repeat;
  mask: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEFCAYAAADNFLE8AAADe0lEQVR42u3aIU5DQRRA0Tu/QeCqWAamQULYCqoJ+2ALJCi2QrDsBIUCRUHwf6ghobrn6FHP3LyZGdVU7arr6qa6qNbVWbUKgGP2Wb1Wb9VL9Vg9VdOYD2yr+zkmAPCXXXVbPYzqsnreK80SkWFOAFRfe/FYbqauVtVddT7HYzWHQzwAaG+hGPOCsSwaJ1O1sXEAcEBMqjZTPw/mAgLAIQFZj+q9OjUTAA7wMfp9HAGAf/NtFwABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQECMAQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAABAQABAQAAQFAQAAQEAAEBAAEBAABAUBAABAQAAQEAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQAAQEAAQEAAEBAABAUBAABAQABAQAAQEAAEBQEAAEBAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEAAEBAAEBQEAAEBAABAQAAQEAAQFAQAAQEAAEBAABAQABAUBAABAQAAQEgCP2Dc01FoJ00I/KAAAAAElFTkSuQmCC") center / 100% 100% no-repeat;
}
.shot--desktop .shot__frame::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: url("images/device-macbook-pro-14.png") center / 100% 100% no-repeat;
  filter: drop-shadow(0 18px 24px rgba(10, 10, 12, .25));
}

.duo .shot--desktop { width: 76%; flex: none; }
.duo .shot--phone { width: 19%; flex: none; }
.shot--phone .shot__ph, .shot--desktop .shot__ph { background-color: var(--bg); }
.shot--phone .shot__ph { padding-inline: 14%; }

/* Scrollable screens: the full-length page scrolls inside the device */
.shot--scroll .shot__scroll { z-index: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background: #0B0B0B; }
.shot--scroll .shot__scroll::-webkit-scrollbar { display: none; }
.shot.shot--scroll .shot__scroll img { position: static; width: 100%; height: auto; border: 0; object-fit: initial; -webkit-mask: none; mask: none; }
.shot--scroll.is-missing .shot__scroll { display: none; }
.scroll-hint { font-size: .8rem; color: var(--muted); text-align: center; }
.cover + .wrap .scroll-hint { margin-top: 12px; }

/* Re-test results */
.retest { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px var(--col-gap); align-items: start; padding-top: 28px; border-top: 2px solid var(--accent); }
.scores { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scores > div { display: grid; gap: 2px; padding: 18px; background: var(--tint-soft); }
.scores dt { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.scores dd { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 500; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scores > div:last-child dd { color: var(--accent); }
.scores p { font-size: .85rem; color: var(--muted); }
@media (max-width: 760px) { .retest { grid-template-columns: 1fr; } }
.pull figcaption { font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.compare { display: grid; gap: 12px; }

/* Research boards: preview at page size, open full size in a new tab */
.boards { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px var(--col-gap); align-items: start; }
.board { display: block; border-radius: 4px; }
.board .shot__frame { border: 1px solid var(--line); transition: border-color .15s ease; }
.board:hover .shot__frame { border-color: var(--accent); }
@media (max-width: 640px) { .boards { grid-template-columns: 1fr; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .4em; justify-self: start; padding: .75em 1.3em; border: 1.5px solid var(--fg); border-radius: 999px; background: var(--fg); color: var(--bg); font-weight: 600; line-height: 1.2; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn--small { padding: .55em 1em; font-size: .9rem; }

/* Three-phone comparisons: one before, two views of the after */
.fix__shots--three { gap: clamp(10px, 3vw, 40px); }
.fix__shots--three .shot--phone { width: min(31%, 210px); }
.fix__shots--three .shot:first-child { margin-right: clamp(4px, 2vw, 28px); }
@media (max-width: 560px) { .fix__shots--three .shot figcaption { font-size: .62rem; letter-spacing: .06em; } }

/* Bigger phones in comparisons */
.fix__shots { padding: clamp(18px, 3vw, 40px); }
.fix__shots .shot--phone { width: min(44%, 300px); }
.fix__shots--three .shot--phone { width: min(32%, 280px); }
.cover .pair .shot--phone { width: min(42%, 300px); }
.case-media .pair .shot--phone { width: min(32%, 250px); }

/* Click to enlarge */
.shot.is-zoomable { cursor: zoom-in; }
.shot.is-zoomable .shot__frame { transition: transform .2s ease; }
.shot.is-zoomable:hover .shot__frame { transform: translateY(-3px); }
.shot.is-zoomable:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.lightbox { width: min(440px, 92vw); max-height: 92vh; padding: 0; border: 0; border-radius: 18px; background: var(--bg); color: var(--fg); overflow: auto; overscroll-behavior: contain; }
.lightbox--wide { width: min(1200px, 94vw); }
.lightbox::backdrop { background: rgba(10, 10, 12, .78); }
.lightbox figure { display: grid; gap: 10px; padding: 14px 14px 16px; }
.lightbox img { width: 100%; height: auto; border-radius: 10px; }
.lightbox figcaption { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.lightbox__close { position: sticky; top: 10px; float: right; z-index: 2; width: 38px; height: 38px; margin: 10px 10px -48px 0; border: 0; border-radius: 50%; background: var(--fg); color: var(--bg); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.lightbox--fit { width: fit-content; max-width: 94vw; }
.lightbox--fit img { width: auto; max-width: 100%; max-height: calc(92vh - 72px); margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .shot.is-zoomable:hover .shot__frame { transform: none; } }
.fix__shots--three { gap: 16px; }
.fix__shots--three .shot--phone { width: min(calc((100% - 32px) / 3), 280px); }
.fix__shots--three .shot:first-child { margin-right: 0; }
@media (min-width: 961px) {
  /* Comparison panels break out into the empty gutter column beside the sticky index */
  .cs-main .fix__shots { margin-left: calc(-1 * (100% + var(--col-gap)) / 8); }
}
.about-intro--text .about-text { grid-column: 1 / span 8; }
@media (max-width: 860px) { .about-intro--text .about-text { grid-column: 1 / -1; } }