/* ==========================================================================
   Work section: shared by /work/ and every /work/<project>/ case study.
   Each section or page sets --bg / --fg / --accent; body follows the one in view.
   ========================================================================== */

:root {
    --site-bg: #0a0a0c;
    --site-fg: #fafafa;
    --site-accent: #FFBD5F;

    --bg: var(--site-bg);
    --fg: var(--site-fg);
    --accent: var(--site-accent);
    --on-accent: var(--site-bg);
    --muted: color-mix(in srgb, var(--fg) 80%, var(--bg)); /* ≥ 4.5:1 on every project color but P:G red, which overrides */
    --line: color-mix(in srgb, var(--fg) 16%, transparent);

    /* Montserrat throughout: bold geometric headlines, light body, letterspaced caps for labels. */
    --font-display: 'Montserrat', system-ui, sans-serif;
    --font-label: 'Montserrat', system-ui, sans-serif;

    --gutter: clamp(1rem, 4vw, 3rem);
    --max: 1320px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fade: 0.7s;

    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-display);
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    transition: background-color var(--fade) var(--ease), color var(--fade) var(--ease);
    overflow-x: clip;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

.skip-link {
    position: absolute; left: 1rem; top: -100px; z-index: 200;
    background: var(--site-accent); color: var(--site-bg);
    padding: 0.6rem 1rem; font: 600 0.85rem var(--font-label); text-decoration: none;
}
.skip-link:focus { top: 1rem; }

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

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

.eyebrow {
    font: 600 0.72rem/1.4 var(--font-label);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ---------- Header ---------- */

.site-header {
    position: fixed; inset: 0 0 auto; z-index: 100;
    padding-block: 1rem;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 88%, transparent), transparent);
    transition: background var(--fade) var(--ease);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.logo { display: inline-flex; color: var(--logo, var(--fg)); transition: color var(--fade) var(--ease); }
.logo svg { width: 56px; height: auto; fill: currentColor; transition: transform 0.4s var(--ease); }
.logo:hover svg { transform: translateX(-3px); }

.site-nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2rem); }
.site-nav a {
    font: 600 0.8rem var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
    text-decoration: none; opacity: 0.75; transition: opacity 0.2s;
    padding-block: 0.75rem; /* 44px tap target */
}
.site-nav a:hover, .site-nav a[aria-current="page"] { opacity: 1; }
.site-nav .nav-cta {
    opacity: 1; padding: 0.6rem 1rem; border: 1px solid currentColor; border-radius: 999px;
    transition: background-color 0.2s, color 0.2s;
}
.site-nav .nav-cta:hover { background: var(--fg); color: var(--bg); }

/* ---------- Buttons ---------- */

.btn {
    display: inline-flex; align-items: center; gap: 0.5em;
    min-height: 44px; padding: 0.7rem 1.25rem;
    font: 600 0.8rem var(--font-label); letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; border-radius: 999px; border: 1px solid currentColor;
    transition: background-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.btn-solid:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-ghost:hover { background: var(--fg); color: var(--bg); }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Device frames ---------- */

.devices { position: relative; width: 100%; }
.devices .laptop { width: 100%; }
.devices .phone {
    position: absolute; right: -2%; bottom: -8%;
    width: 26%; min-width: 92px;
}
.devices.is-phone-left .phone { right: auto; left: -2%; }

.laptop { position: relative; padding-bottom: 3.2%; }
.laptop-screen {
    position: relative;
    padding: 2.4% 2.4% 3%;
    background: #0c0c0e;
    border-radius: 1.6% / 2.6%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
.laptop-screen::before { /* camera */
    content: ''; position: absolute; top: 1%; left: 50%; width: 0.6%; aspect-ratio: 1;
    border-radius: 50%; background: #2a2a2e; transform: translateX(-50%);
}
.laptop-base {
    position: absolute; left: -6%; right: -6%; bottom: 0; height: 3.4%;
    background: linear-gradient(#d4d6da, #8d9096);
    border-radius: 0 0 40% 40% / 0 0 100% 100%;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, 0.5);
}
.laptop-base::before { /* finger notch */
    content: ''; position: absolute; top: 0; left: 50%; width: 14%; height: 45%;
    transform: translateX(-50%); background: #a5a8ad; border-radius: 0 0 8px 8px;
}

.phone-body {
    position: relative;
    padding: 4.5%;
    background: #0c0c0e;
    border-radius: 17% / 8%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 0 2px #2b2b30, 0 30px 60px -16px rgba(0, 0, 0, 0.6);
}
.phone-body::before { /* dynamic island */
    content: ''; position: absolute; z-index: 2; top: 3.4%; left: 50%; width: 30%; height: 2.6%;
    background: #000; border-radius: 999px; transform: translateX(-50%);
}

.tablet-body {
    position: relative; padding: 3.5%;
    background: #0c0c0e; border-radius: 6% / 4.5%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 0 2px #2b2b30, 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

.screen {
    position: relative; width: 100%; height: 100%; overflow: hidden;
    background: #000; border-radius: 3px;
}
.phone-body .screen { border-radius: 13% / 6%; }
.tablet-body .screen { border-radius: 3% / 2.2%; }
.screen video, .screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* Screens match the capture viewports exactly (1440×900 and 390×844), so clips show edge to edge, uncropped.
   The frames size themselves around the screen. */
.laptop .screen { height: auto; aspect-ratio: 1440 / 900; }
/* Phones add an iPhone-style safe area (47pt status bar, 34pt home indicator) around the 390×844 clip,
   so the island and rounded corners never sit on top of the app's own menu bar. */
/* iPad Pro 11" portrait capture (834×1194): no notch, so the clip fills the screen. */
.tablet .screen { height: auto; aspect-ratio: 834 / 1194; }
.phone .screen { height: auto; aspect-ratio: 390 / 925; padding: 12.05% 0 8.72%; }
.phone .screen video, .phone .screen img { height: auto; aspect-ratio: 390 / 844; display: block; }

/* ---------- Reveal on scroll ---------- */

/* Only hidden once JS is confirmed (html.js is set inline in <head>), so content never gets stuck invisible. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.reveal-delay { transition-delay: 0.12s; }

/* ---------- Footer ---------- */

.site-footer { padding-block: clamp(4rem, 10vw, 8rem) 2rem; }
.footer-cta { display: grid; gap: 1.5rem; max-width: 46rem; }
.footer-cta h2 { font-size: clamp(2.25rem, 6vw, 4.5rem); }
.footer-cta p { color: var(--muted); font-size: 1.1rem; }

/* Contact form (on /work/ only; case studies link to /work/#contact) */
#contact { scroll-margin-top: 6rem; }
.contact-form {
    display: grid; grid-template-columns: 1fr; gap: 1.25rem 1.5rem;
    max-width: 46rem; margin-top: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 640px) {
    .contact-form { grid-template-columns: 1fr 1fr; }
    .contact-form .field-wide { grid-column: 1 / -1; }
}
.contact-form .field { display: grid; gap: 0.45rem; }
.contact-form label { font: 600 0.8rem var(--font-label); letter-spacing: 0.06em; text-transform: uppercase; }
.contact-form .optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
    width: 100%; min-height: 48px; padding: 0.75rem 1rem;
    font: inherit; font-size: 1rem; color: var(--fg);
    background: color-mix(in srgb, var(--fg) 6%, transparent);
    border: 1px solid var(--line); border-radius: 10px;
    transition: border-color 0.2s, background-color 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 9rem; }
.contact-form select { appearance: none; padding-right: 2.5rem; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right 1.25rem center, right calc(1.25rem - 5px) center;
    background-size: 5px 5px; background-repeat: no-repeat;
}
.contact-form select option { background: var(--site-bg); color: var(--site-fg); }
.contact-form ::placeholder { color: color-mix(in srgb, var(--fg) 45%, transparent); }
.contact-form input:hover, .contact-form select:hover, .contact-form textarea:hover { border-color: color-mix(in srgb, var(--fg) 35%, transparent); }
.contact-form input:focus-visible, .contact-form select:focus-visible, .contact-form textarea:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent;
}
.contact-form .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 0.5rem; }
.contact-form button { cursor: pointer; }
.contact-form button:disabled { opacity: 0.6; cursor: progress; transform: none; }
.form-alt { color: var(--muted); font-size: 0.95rem; }
.form-alt a { text-underline-offset: 4px; text-decoration-color: var(--line); }
.form-alt a:hover { color: var(--fg); text-decoration-color: currentColor; }
.form-status:empty { display: none; }
.form-status { font-weight: 500; }
.form-status.is-ok { color: var(--accent); }
.form-status.is-error { color: #ff8a80; }
.botcheck { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.footer-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
    margin-top: clamp(4rem, 8vw, 6rem); padding-top: 1.5rem; border-top: 1px solid var(--line);
    font: 0.8rem var(--font-label); color: var(--muted);
}
.footer-bottom a { text-decoration-color: var(--line); text-underline-offset: 4px; }
.footer-bottom a:hover { color: var(--fg); }

/* ==========================================================================
   Index: /work/
   ========================================================================== */

.intro {
    min-height: 92svh; display: grid; align-content: end;
    padding-block: 8rem clamp(3rem, 8vw, 6rem);
}
/* Desk-and-posters photo behind the intro: a full-width wrapper, fading into the page at the bottom. */
.intro-bleed { position: relative; isolation: isolate; overflow: hidden; }
.intro-bleed::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background:
        linear-gradient(180deg, rgb(10 10 12 / 0.05) 0%, rgb(10 10 12 / 0.25) 40%, rgb(10 10 12 / 0.8) 75%, #0a0a0c 100%),
        url("/images/work/work-hero.webp") center 30% / cover no-repeat;
    animation: intro-photo 1.8s var(--ease) both;
}
@media (max-width: 700px) {
    .intro-bleed::before { background-image:
        linear-gradient(180deg, rgb(10 10 12 / 0) 0%, rgb(10 10 12 / 0.15) 32%, rgb(10 10 12 / 0.85) 58%, #0a0a0c 78%),
        url("/images/work/work-hero-sm.webp"); background-position: center, 52% 0; }
}
@keyframes intro-photo { from { opacity: 0; transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .intro-bleed::before { animation: none; } }
.intro h1 { font-size: clamp(2.4rem, 6.2vw, 5.75rem); max-width: 14ch; }
.intro h1 em { font-style: normal; color: var(--accent); }
.intro-sub {
    display: grid; grid-template-columns: minmax(0, 36rem) auto; justify-content: space-between; align-items: end;
    gap: 2rem; margin-top: clamp(2rem, 5vw, 3.5rem);
}
.intro-sub p { color: var(--muted); font-weight: 300; font-size: clamp(1.05rem, 1rem + 0.4vw, 1.3rem); }
.scroll-hint { font: 600 0.75rem var(--font-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.scroll-hint span { display: inline-block; animation: nudge 2s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(5px); } }

.project {
    min-height: 100svh; display: grid; align-items: center;
    padding-block: clamp(5rem, 10vw, 8rem);
}
.project-grid {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.project:nth-of-type(even) .project-copy { order: 2; }
.project:nth-of-type(even) .project-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } /* devices keep the wide column */

.project-num { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.5rem; }
.project-num::after { content: ''; flex: 0 0 3rem; height: 1px; background: currentColor; opacity: 0.5; }
.project h2 { font-size: clamp(2.3rem, 4.3vw, 4.25rem); } /* Montserrat runs wide: long single words must fit the 5fr column */
.project-hook { margin-top: 1rem; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.3; font-weight: 500; }
.project-hook s { text-decoration-thickness: 0.12em; text-decoration-color: var(--accent); }
.project-excerpt { margin-top: 1.25rem; color: var(--muted); max-width: 34rem; }
.tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.tags li {
    font: 600 0.7rem var(--font-label); letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px;
}
.project-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.project-visual { padding-bottom: 8%; }

.more-work { padding-block: clamp(4rem, 8vw, 6rem); border-top: 1px solid var(--line); }
.more-work h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.more-list { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.more-list a {
    display: grid; gap: 0.35rem; padding: 1.5rem; height: 100%; background: var(--bg); text-decoration: none;
    transition: background-color 0.25s;
}
.more-list a:hover { background: color-mix(in srgb, var(--fg) 6%, var(--bg)); }
.more-list strong { font-size: 1.15rem; font-weight: 600; }
.more-list span { color: var(--muted); font-size: 0.95rem; }

/* Print & brand: a short strip of off-screen work under the case studies. */
.print-work { padding-block: clamp(5rem, 10vw, 8rem); border-top: 1px solid var(--line); }
.print-work .cs-section-head p:not(.eyebrow) { color: var(--muted); font-size: 1.1rem; }
.print-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.print-item.is-lead { grid-column: span 2; grid-row: span 2; }
.print-item figure { margin: 0; height: 100%; }
.print-item img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.print-item.is-lead img { aspect-ratio: auto; }
.print-more { margin-top: clamp(2rem, 4vw, 3rem); }
@media (max-width: 860px) {
    .print-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .print-item.is-lead { grid-column: 1 / -1; grid-row: auto; }
    .print-item.is-lead img { aspect-ratio: 1 / 1; }
}
@media (max-width: 520px) { .print-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Case study: /work/<project>/
   ========================================================================== */

.cs-hero { min-height: 100svh; display: grid; align-items: center; padding-block: 8rem 4rem; }
.cs-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.cs-hero h1 { font-size: clamp(3rem, 6.2vw, 6rem); line-height: 0.92; letter-spacing: -0.04em; margin-top: 1rem; }
.cs-hero h1.is-long { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 1; } /* names over ~10 characters */
.cs-hook { margin-top: 1.5rem; font-size: clamp(1.3rem, 1.1rem + 0.9vw, 2rem); line-height: 1.25; font-weight: 500; max-width: 22ch; }
.cs-meta {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem;
    margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.cs-meta dt { font: 600 0.7rem var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cs-meta dd { margin: 0.3rem 0 0; font-size: 0.98rem; overflow-wrap: anywhere; } /* long domains on phones */
.cs-meta a { text-underline-offset: 4px; text-decoration-color: var(--accent); }

.cs-section { padding-block: clamp(5rem, 11vw, 9rem); }
.cs-section + .cs-section { border-top: 1px solid var(--line); }
.cs-section-head { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); max-width: 48rem; }
.cs-section-head h2 { font-size: clamp(2.1rem, 5vw, 4rem); }

.ask-fix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.ask-fix h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0.75rem 0 1rem; }
.ask-fix p { color: var(--muted); font-size: 1.1rem; }

.feature {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 6vw, 6rem); align-items: center;
}
.feature + .feature { margin-top: clamp(6rem, 14vw, 11rem); }
.feature:nth-child(even) .feature-copy { order: 2; }
.feature:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature-num { font: 600 0.8rem var(--font-label); color: var(--accent); letter-spacing: 0.1em; }
.feature h3 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); margin: 0.75rem 0 1.25rem; }
.feature p { color: var(--muted); font-size: 1.1rem; max-width: 30rem; }
.feature-visual.is-phone { display: flex; justify-content: center; }
.feature-visual.is-phone .phone { width: min(300px, 70%, 36svh); } /* keeps the whole phone on screen */
.feature-visual.is-tablet { display: flex; justify-content: center; }
.feature-visual.is-tablet .tablet { width: min(460px, 85%, 52svh); } /* keeps the whole iPad on screen */

.brand-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.brand-card { border: 1px solid var(--line); border-radius: 4px; padding: clamp(1.25rem, 3vw, 2rem); }
.brand-logo { grid-column: span 5; display: grid; place-items: center; min-height: 18rem; }
.brand-type { grid-column: span 7; display: grid; align-content: space-between; gap: 2rem; }
.brand-swatches { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1rem; padding: 0; border: 0; }
.brand-note { grid-column: 1 / -1; color: var(--muted); max-width: 46rem; font-size: 1.1rem; margin-top: 1rem; }

.swatch {
    display: grid; align-content: end; gap: 0.15rem; min-height: 9rem; padding: 1rem;
    border: 1px solid color-mix(in srgb, var(--fg) 40%, transparent); /* visible even when the swatch matches the section */
    border-radius: 4px; cursor: pointer;
    font: 600 0.8rem var(--font-label); text-align: left;
    transition: transform 0.25s var(--ease);
}
.swatch:hover { transform: translateY(-3px); }
.swatch small { font-size: 0.7rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.1em; }
.swatch .copied { opacity: 0; transition: opacity 0.2s; }
.swatch.is-copied .copied { opacity: 1; }

.type-sample { font-size: clamp(4rem, 10vw, 8rem); line-height: 0.9; letter-spacing: -0.03em; }
.type-row { display: flex; justify-content: space-between; align-items: end; gap: 1rem; flex-wrap: wrap; }
.type-name { font: 600 0.8rem var(--font-label); color: var(--muted); letter-spacing: 0.08em; }

.todo {
    border: 1px dashed var(--accent); border-radius: 4px; padding: 1.5rem;
    font: 0.9rem/1.6 var(--font-label); color: var(--muted);
}
.todo strong { color: var(--accent); font-weight: 600; }

.next-project {
    display: block; text-decoration: none;
    background: var(--next-bg); color: var(--next-fg);
    padding-block: clamp(5rem, 12vw, 9rem);
}
.next-project .eyebrow { color: inherit; opacity: 0.7; }
.next-project h2 { font-size: clamp(2.2rem, 8vw, 7.5rem); margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.3em; }
.next-project h2 .arrow { transition: transform 0.35s var(--ease); }
.next-project:hover h2 .arrow { transform: translateX(0.15em); }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
    .project-grid, .cs-hero-grid, .feature, .ask-fix,
    .project:nth-of-type(even) .project-grid, .feature:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
    .project:nth-of-type(even) .project-copy, .feature:nth-child(even) .feature-copy { order: 0; }
    .project-visual, .feature-visual { order: -1; }
    .project { min-height: 0; }
    .intro-sub { grid-template-columns: minmax(0, 1fr); }
    .brand-logo, .brand-type { grid-column: 1 / -1; }
    .devices .phone { width: 30%; right: 0; }
    .laptop-base { left: -3%; right: -3%; } /* stays inside the 16px gutter */
    .devices.is-phone-left .phone { left: 0; }
    .site-nav .nav-hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --fade: 0s; }
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .scroll-hint span { animation: none; }
    .btn, .btn .arrow, .swatch, .next-project h2 .arrow { transition: none; }
}

/* Phones drift against the laptop as you scroll (progressive enhancement). */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .devices .phone {
            animation: drift linear both;
            animation-timeline: view();
            animation-range: cover;
        }
        @keyframes drift { from { translate: 0 14%; } to { translate: 0 -14%; } }
    }
}

/* Two phones side by side, for app-first projects. */
.devices.is-phones { display: flex; justify-content: center; gap: 6%; padding-bottom: 6%; }
.devices.is-phones .phone { position: static; width: 34%; animation: none; }
.devices.is-phones .phone + .phone { margin-top: 12%; }

.project-hook s { text-decoration-color: var(--strike, var(--accent)); }

.cs-hook s { text-decoration-thickness: 0.1em; text-decoration-color: var(--strike, var(--accent)); }

/* A finished ad, not a screen capture: shown on its own, no device frame. */
.feature-visual.is-ad { display: flex; justify-content: center; }
.feature-visual.is-ad video { display: block; width: min(420px, 100%); height: auto; max-height: 80svh; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; background: #000; }