/* ==========================================================================
   Brand (Delmade logo kit) + full-viewport hero. Loaded last.
   ========================================================================== */

/* ------------------------------------------------------------- Logo */
.logo { gap: 0.9rem; }
.logo-word {
    display: block;
    flex: none;
    height: 37px;          /* ≈183px wide: the kit's 180px minimum */
    width: auto;
    color: var(--ink);
    transition: opacity 0.25s;
}
.logo:hover .logo-word { opacity: 0.82; }
.logo-sub { align-self: center; }
.site-footer .logo-word { color: #fff; height: 42px; }
.footer-brand .logo { display: inline-flex; }

/* giant footer wordmark */
.footer-word { font-size: 0; line-height: 0; padding-inline: clamp(1rem, 3vw, 2.5rem); }
.footer-word-svg { display: block; width: 100%; height: auto; color: #1b1b1e; transform: translateY(12%); }

/* ------------------------------------------------- Full-viewport hero */
.hero--studio {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: clamp(1rem, 3vh, 2.4rem) clamp(1.4rem, 4vh, 3rem);
}
.hero--studio > .hero-inner { flex: 1; display: flex; flex-direction: column; }
.hero--studio .hero-top { margin-bottom: clamp(1rem, 3.2vh, 2.4rem); }
.hero--studio .hero-body { margin-top: clamp(1.2rem, 3.5vh, 2.6rem); }
.hero--studio .terminal-body { min-height: clamp(9rem, 26vh, 17.5rem); }

/* facts strip now sits right under the hero */
.hero-facts-strip { padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.hero-facts-strip .hero-facts { margin-top: 0; }

/* Desktop: headline + copy on the left, artwork on the right, all in one screen */
@media (min-width: 900px) {
    .hero--studio > .hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr) auto auto minmax(0, 1fr);
        grid-template-areas: "top top" ". ." "title art" "copy art" ". .";
        column-gap: clamp(2.5rem, 5vw, 5.5rem);
    }
    .hero--studio .hero-top { grid-area: top; }
    .hero--studio h1.hero-title {
        grid-area: title;
        align-self: end;
        max-width: none;
        font-size: clamp(2.8rem, min(5.5vw, 10.6vh), 6.6rem);
    }
    .hero--studio .hero-body { display: contents; }
    .hero--studio .hero-copy { grid-area: copy; margin-top: clamp(2.6rem, 6vh, 3.6rem); }
    .hero--studio .hero-art { grid-area: art; align-self: center; padding-block: 2.4rem 2.8rem; }
    .hero--studio .lead { font-size: clamp(1.05rem, min(1.35vw, 2.3vh), 1.3rem); }
    .hero--studio .hero-cta { margin-top: clamp(1.1rem, 3vh, 2rem); }
    .hero--studio .chips { margin-top: clamp(1rem, 2.6vh, 1.8rem); }
}
@media (min-width: 900px) and (max-height: 780px) {
    .hero--studio .chips, .hero--studio .art-type { display: none; }
}
@media (min-width: 900px) and (max-height: 640px) {
    .hero--studio .art-swatches { display: none; }
}

/* Tablet & phone: stacked, CTAs anchored to the bottom of the screen */
@media (max-width: 899px) {
    .hero--studio .hero-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.4rem, 4vh, 2.4rem); }
    .hero--studio h1.hero-title { font-size: clamp(2.5rem, min(11.5vw, 8.4vh), 5.6rem); }
}
/* the decorative artwork only shows where it fits inside the screen */
@media (max-width: 899px) and (max-height: 1099px), (max-width: 599px) {
    .hero--studio .hero-art { display: none; }
}
@media (max-width: 899px) and (max-height: 700px) {
    .hero--studio .chips { display: none; }
}
/* very short landscape phones: let it grow rather than squash */
@media (max-height: 500px) and (orientation: landscape) {
    .hero--studio { min-height: 0; }
}
.t-arrow { color: var(--code-ok); }

/* phones: lead under the headline, CTAs anchored to the bottom of the screen */
@media (max-width: 599px) {
    .hero--studio .hero-copy { flex: 1; display: flex; flex-direction: column; }
    .hero--studio .hero-cta { margin-top: auto; padding-top: clamp(1.2rem, 3vh, 2rem); }
}
/* tablets: content block centred in the screen, bigger headline */
@media (min-width: 600px) and (max-width: 899px) {
    .hero--studio .hero-body { justify-content: flex-start; }
    .hero--studio > .hero-inner { justify-content: center; }
    .hero--studio .hero-top { margin-bottom: auto; }
    .hero--studio .hero-body { flex: 0 0 auto; margin-bottom: auto; }
    .hero--studio h1.hero-title { font-size: clamp(3rem, min(12.4vw, 9vh), 6.4rem); }
    .hero--studio .lead { font-size: 1.25rem; max-width: 40ch; }
}
/* short phones (e.g. 320×568): tighten so everything still fits one screen */
@media (max-width: 599px) and (max-height: 700px) {
    .hero--studio { padding-block: 0.9rem 1.1rem; }
    .hero--studio .status-pill { display: none; }
    .hero--studio .hero-top { padding-bottom: 0.7rem; margin-bottom: 1rem; }
    .hero--studio h1.hero-title { font-size: clamp(2.05rem, min(10.4vw, 7.2vh), 2.6rem); }
    .hero--studio .hero-body { margin-top: 1rem; }
    .hero--studio .lead { font-size: 0.98rem; line-height: 1.55; }
    .hero--studio .hero-cta { gap: 0.6rem; padding-top: 1rem; }
    .hero--studio .hero-cta .btn { min-height: 48px; padding-block: 0.7rem; }
}

/* ------------------------------------------- Timeline: dots on the line
   The line and the dots share one position (--tl-x), so every numbered
   dot is centred on the line at every breakpoint. */
.timeline { --tl-pad: 4rem; --tl-x: 1.25rem; padding-inline-start: var(--tl-pad); }
.timeline::before, .timeline::after { inset-inline-start: calc(var(--tl-x) - 1px); width: 2px; }
.timeline .tl-dot { inset-inline-start: calc(var(--tl-x) - var(--tl-pad)); translate: -50% 0; }
@media (max-width: 480px) {
    .timeline { --tl-pad: 3.2rem; --tl-x: 1.1rem; }
    .timeline .tl-dot { width: 2.1rem; height: 2.1rem; }
}

/* ------------------------------------------------------- About page */
.about-story-grid { display: grid; gap: 2.5rem; align-items: center; }
.about-mark { display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; border-radius: 50%; background: var(--accent); color: #fff; }
.about-icon { width: 46%; height: auto; }
.about-story-text { display: grid; gap: 1.2rem; }
.about-story-text .lead { margin-top: 0; max-width: 60ch; }
.teams { display: grid; gap: 1.2rem; }
.team-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.team-card:hover { border-color: var(--ink); box-shadow: var(--shadow); }
.team-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.team-icon svg { width: 22px; height: auto; }
.team-card h3 { font-size: 1.4rem; }
.team-card p { color: var(--muted); }
.team-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: auto; padding-top: 0.6rem; }
.team-skills li { font-family: var(--font-mono); font-size: 0.75rem; padding: 0.25rem 0.65rem; border: 1px solid var(--line); border-radius: 999px; }
.values { display: grid; gap: 0; border-top: 1.5px solid var(--ink); }
.values li { padding: 1.3rem 0; border-bottom: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
@media (min-width: 640px) { .teams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) {
    .about-story-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 5rem; }
    .teams { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ----------------------------------- Real screenshots (case studies) */
.cover-frame { display: block; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); box-shadow: 0 18px 30px -20px rgba(11, 11, 12, 0.45); transition: transform 0.6s var(--ease); }
.project-card:hover .cover-frame { transform: translateY(-4px) scale(1.02); }
.cover-bar { display: flex; gap: 5px; padding: 0.45rem 0.6rem; background: #f0ede6; border-bottom: 1px solid var(--line); }
.cover-bar i { width: 7px; height: 7px; border-radius: 50%; background: #cfc9bd; }
.cover-bar i:first-child { background: var(--accent); }
.project-cover { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }

.gallery-block .case-stage-head { margin-bottom: 1.4rem; }
.gshot { margin: 0; display: grid; gap: 0.8rem; }
.gshot figcaption { font-size: 0.92rem; color: var(--muted); }
.gshot-link { display: block; text-decoration: none; }
.gbrowser { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #d9d3c6; box-shadow: 0 30px 60px -36px rgba(11, 11, 12, 0.55); transition: transform 0.5s var(--ease), box-shadow 0.5s; }
.gbrowser-bar { display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: #f0ede6; border-bottom: 1px solid #e2ddd2; }
.gbrowser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #cfc9bd; }
.gbrowser-bar i:first-child { background: var(--accent); }
.gbrowser img, .gphone img { display: block; width: 100%; height: auto; }
.gshot-link:hover .gbrowser { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(11, 11, 12, 0.6); }
.gallery-grid { display: grid; gap: 1.6rem; margin-top: 1.8rem; }
.gallery-phones { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 240px)); justify-content: center; gap: 1.6rem; margin-top: 2.4rem; }
.gallery-phones .gshot { justify-items: center; text-align: center; }
.gphone { display: block; padding: 8px; border-radius: 34px; background: #0b0b0c; box-shadow: 0 30px 50px -28px rgba(11, 11, 12, 0.7); transition: transform 0.5s var(--ease); }
.gphone img { border-radius: 27px; }
.gshot-link:hover .gphone { transform: translateY(-8px) rotate(-1deg); }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gallery-grid .gshot:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ------------------------------------------------- Before & after */
.redesign-block { margin-bottom: clamp(3rem, 6vw, 5rem); }
.compare { margin: 0; display: grid; gap: 0.8rem; }
.compare figcaption { font-size: 0.92rem; color: var(--muted); }
.compare-stage { position: relative; display: block; overflow: hidden; user-select: none; }
.compare-after { display: block; width: 100%; height: auto; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare-before img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 11, 12, 0.15), 0 0 24px rgba(11, 11, 12, 0.35); pointer-events: none; }
.compare-knob { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 10px 24px -8px rgba(11, 11, 12, 0.6); }
.compare-tag { position: absolute; top: 14px; padding: 0.3rem 0.75rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; pointer-events: none; }
.compare-tag--before { left: 14px; background: rgba(11, 11, 12, 0.82); color: #fff; }
.compare-tag--after { right: 14px; background: var(--accent); color: #fff; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare-range:focus-visible + * , .compare:focus-within .compare-knob { outline: 3px solid #fff; outline-offset: 2px; }

.ba-pair { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.ba-title { font-size: 1.3rem; margin-bottom: 1rem; }
.ba-grid { display: grid; gap: 1.4rem; }
.ba-shot { position: relative; margin: 0; display: grid; gap: 0.6rem; }
.ba-label { justify-self: start; padding: 0.25rem 0.7rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--ink); color: #fff; }
.ba-shot--after .ba-label { background: var(--accent); }
.ba-shot--before .gbrowser, .ba-shot--before .gphone { filter: saturate(0.85); }
.ba-note { margin-top: 0.9rem; color: var(--muted); max-width: 70ch; }
.ba-pair--mobile .ba-grid { grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; }
.ba-pair--mobile .ba-shot { justify-items: center; }
.ba-pair--mobile .ba-label { justify-self: center; }
@media (min-width: 900px) { .ba-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------ Home "Recent projects": one screen tall */
@media (min-width: 900px) and (min-height: 620px) {
    .section-work { --wpad: clamp(1.4rem, 4vh, 2.8rem); padding-block: var(--wpad); }
    .section-work > .wrap {
        display: flex;
        flex-direction: column;
        height: calc(100vh - var(--header-h) - 2 * var(--wpad));
        height: calc(100svh - var(--header-h) - 2 * var(--wpad));
    }
    .section-work .section-row { flex: none; align-items: end; }
    .section-work .section-row .section-head, .section-work .section-row > .btn { margin-bottom: clamp(1rem, 3vh, 1.8rem); }
    .section-work .section-head h2 { font-size: clamp(2rem, min(4vw, 6vh), 3.4rem); }
    .section-work .section-head .lead { margin-top: 0.6rem; font-size: 1.05rem; }
    .section-work .projects--featured {
        flex: 1;
        min-height: 0;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: clamp(0.8rem, 2vh, 1.4rem);
    }
    .section-work .project-item { min-height: 0; }
    .section-work .project-card { height: 100%; min-height: 0; }
    .section-work .project-thumb { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; padding: clamp(0.8rem, 2.4vh, 1.6rem) !important; }
    .section-work .project-thumb .mock, .section-work .project-thumb .cover-frame { width: auto; max-width: 100%; height: 100%; max-height: 100%; aspect-ratio: 16 / 10; }
    .section-work .cover-frame { display: flex; flex-direction: column; }
    .section-work .cover-frame .project-cover { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; }
    .section-work .project-meta { flex: none; padding: clamp(0.8rem, 2vh, 1.3rem) 1.4rem; gap: 0.35rem; }
    .section-work .project-item:not(:first-child) .project-summary,
    .section-work .project-item:not(:first-child) .project-scope { display: none; }
    .section-work .project-item:first-child .project-title { font-size: clamp(1.6rem, 3.4vh, 2.3rem) !important; }
    .section-work .project-item:not(:first-child) .project-title { font-size: 1.25rem; }
}

/* full-page screenshots: show the top, scroll through the page on hover */
.is-tall .gscroll { display: block; height: clamp(320px, 42vw, 640px); overflow: hidden; }
.gphone.is-tall .gscroll { height: auto; aspect-ratio: 390 / 844; border-radius: 27px; }
.is-tall .gscroll img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 7s cubic-bezier(0.45, 0, 0.55, 1); }
.gshot-link:hover .is-tall .gscroll img, .gshot-link:focus-visible .is-tall .gscroll img { transform: translateY(calc(-100% + clamp(320px, 42vw, 640px))); }
.gshot-link:hover .gphone.is-tall .gscroll img { transform: translateY(-65%); }
.project-cover { object-position: top; }
@media (prefers-reduced-motion: reduce) { .is-tall .gscroll img { transition: none; } }

/* hero top bar now holds only the "Now booking" pill */
.hero--studio .hero-top { justify-content: flex-start; }
@media (max-width: 599px) and (max-height: 700px) {
    .hero--studio .status-pill { display: inline-flex; }
}
.hero--studio .hero-top { align-self: stretch; width: 100%; }

/* ------------------------------------------------- Copy protection */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
img, svg, canvas { -webkit-user-drag: none; user-select: none; }
canvas.pimg { display: block; width: 100%; height: auto; max-width: 100%; }
.compare-before canvas.pimg { height: 100%; object-fit: cover; object-position: top; }
.gphone canvas.pimg { border-radius: 27px; }
.is-tall .gscroll canvas.pimg { transform: translateY(0); transition: transform 7s cubic-bezier(0.45, 0, 0.55, 1); }
.gshot-link:hover .is-tall .gscroll canvas.pimg { transform: translateY(calc(-100% + clamp(320px, 42vw, 640px))); }
.gshot-link:hover .gphone.is-tall .gscroll canvas.pimg { transform: translateY(-65%); }
/* reserve space before the image is drawn */
img.pimg[width][height] { display: block; width: 100%; height: auto; }
img.pimg:not([src]) { min-height: 1px; }
@media print { body { display: none !important; } }

/* Hero headline: "Interfaces people" always fits on the first line, so the
   rotating word (love / want / choose) always starts the second line. */
.hero--studio > .hero-inner { container-type: inline-size; }
.hero--studio h1.hero-title { font-size: min(clamp(2.5rem, min(11.5vw, 8.4vh), 5.6rem), 10.8cqi); }
@media (min-width: 900px) {
    .hero--studio h1.hero-title { font-size: min(clamp(2.8rem, min(5.5vw, 10.6vh), 6.6rem), 5.6cqi); }
}
@media (max-width: 599px) and (max-height: 700px) {
    .hero--studio h1.hero-title { font-size: min(clamp(2.05rem, min(10.4vw, 7.2vh), 2.6rem), 10.8cqi); }
}

/* Contact: the form comes first (left on desktop, top on phones) and the
   page header is compact so the form is visible straight away. */
@media (min-width: 900px) {
    .page-contact .contact-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: start; }
}
.page-contact .page-head { padding-block: clamp(1.6rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2.2rem); }
.page-contact .page-head h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.page-contact .page-head .ph-bottom { margin-top: 1rem; }
.page-contact .page-head + .section { padding-top: clamp(1.6rem, 4vw, 2.6rem); }
.page-contact .ph-top { margin-bottom: clamp(1rem, 2.5vw, 1.6rem); }
.page-contact .page-head .eyebrow { margin-bottom: 0.6rem; }
.page-contact .ph-meta { display: none; }
.page-contact .ph-bottom { margin-top: 0.8rem; }
.page-contact .ph-bottom .lead { max-width: 62ch; font-size: 1.05rem; }

/* rotating hero word: keep its mask inside its own line so the next word
   never shows over the line below (love / want / choose have no descenders) */
.hero .mx-rot { padding: 0.1em 0.04em 0.04em; margin: -0.1em -0.04em -0.04em; }
.hero .mx-rot-in.is-next { top: 0.1em; }

/* Mobile hero: one tidy group, centred in the screen (no empty gap between
   the intro text and the buttons) */
@media (max-width: 599px) {
    .hero--studio > .hero-inner { justify-content: center; }
    .hero--studio .hero-body { flex: 0 0 auto; justify-content: flex-start; gap: 1.6rem; margin-top: 1.4rem; }
    .hero--studio .hero-copy { flex: 0 0 auto; }
    .hero--studio .hero-cta { margin-top: 1.8rem; padding-top: 0; }
    .hero--studio .lead { font-size: 1.06rem; line-height: 1.6; }
    .hero--studio .chips { margin-top: 1.4rem; }
}

/* four services: 2 × 2 on tablets/small laptops, 4 across on wide screens */
@media (min-width: 900px) { .cards3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cards3 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ------------------------------------------------ UX/UI case chapters */
.ux-chapters { margin-top: clamp(3rem, 7vw, 5.5rem); display: grid; gap: clamp(3.5rem, 8vw, 6.5rem); }
.ux-chapter { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; padding-top: clamp(2rem, 5vw, 3rem); border-top: 1px solid var(--line); }
.ux-chapter-label { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 1rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.ux-chapter-label span { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.6rem; padding-inline: 0.4rem; border-radius: 999px; background: var(--accent); color: #fff; letter-spacing: 0; }
.ux-chapter-title { font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.05; max-width: 20ch; margin-bottom: 1.1rem; }
.ux-chapter-text { color: var(--muted); font-size: 1.08rem; line-height: 1.7; max-width: 58ch; margin: 0 0 0.9rem; }
.ux-questions { display: grid; gap: 0.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.ux-questions li { position: relative; padding: 0.9rem 1.1rem 0.9rem 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; font-weight: 500; }
.ux-questions li::before { content: "?"; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent); font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; }
.ux-points { margin-top: 1.2rem; }
.ux-insight { margin: 1.6rem 0 0; padding: 1.2rem 1.4rem; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-radius: 0 14px 14px 0; }
.ux-insight p { margin: 0; font-family: var(--font-display); font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.35; color: var(--ink); }
.ux-chapter-media { margin: 0; display: grid; gap: 0.7rem; }
.ux-chapter-media figcaption { font-size: 0.92rem; color: var(--muted); }
.ux-chapter.is-mobile .ux-chapter-media { justify-items: center; }
.ux-chapter.is-mobile .gphone { width: min(300px, 80%); }
.ux-reflection { margin-top: clamp(3.5rem, 8vw, 6rem); padding: clamp(1.8rem, 4vw, 3rem); background: var(--ink); color: #fff; border-radius: 24px; }
.ux-reflection .eyebrow { color: #c7d3f3; }
.ux-reflection-text { font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.75rem); line-height: 1.35; max-width: 46ch; margin: 0.8rem 0 0; }
@media (min-width: 900px) {
    .ux-chapter.has-media { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; }
    .ux-chapter.has-media.is-mobile { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
    .ux-chapter.has-media:nth-child(even) .ux-chapter-copy { order: 2; }
    .ux-chapter:not(.has-media) .ux-chapter-copy { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 4rem; }
    .ux-chapter:not(.has-media) .ux-chapter-label, .ux-chapter:not(.has-media) .ux-chapter-title { grid-column: 1; }
    .ux-chapter:not(.has-media) .ux-chapter-copy > :not(.ux-chapter-label):not(.ux-chapter-title) { grid-column: 2; }
    .ux-chapter:not(.has-media) .ux-chapter-title { grid-row: 2 / span 6; align-self: start; }
}
.case-links { display: grid; gap: 0.6rem; }
.case-links .btn { width: 100%; justify-content: space-between; }

/* four pricing packages: 2 × 2 on tablets/small laptops, 4 across on wide screens */
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .tiers { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1240px) {
    .tiers .tier { padding: 1.8rem 1.6rem; }
    .tiers .tier-price { font-size: clamp(1.5rem, 1.9vw, 1.9rem); line-height: 1.15; white-space: nowrap; }
    .tiers .tier .btn { white-space: nowrap; font-size: 0.95rem; padding-inline: 1.1rem; }
    .tiers .tier .ticks li { font-size: 0.98rem; }
}