/* ---------------------------------------------------------------
   GoByte Software — design tokens
   Colours are the brand palette verbatim (assets/media-kit/palette.txt).
   Terracotta is used as a surface and a display colour; terracotta-deep
   is the one that carries small text, because plain terracotta on cream
   only reaches 3:1.
----------------------------------------------------------------- */
:root {
    --cream: #f5ead8;
    --cream-deep: #efe1c8;
    --ink: #2e2b25;
    --text: #201e1d;
    --terracotta: #c67139;
    --terracotta-deep: #8c491a;
    --sage: #7a8a5e;
    --sage-light: #ccdbb2;

    --rule: rgba(32, 30, 29, .18);
    --rule-strong: rgba(32, 30, 29, .42);
    --rule-dark: rgba(245, 234, 216, .18);

    /* Caprasimo and Figtree ship Latin only. Browsers fall back per glyph,
       so the Greek faces here render Greek characters while Latin words
       stay in the brand fonts. Loaded only on the /el/ pages. */
    --display: 'Caprasimo', 'Literata', Georgia, 'Times New Roman', serif;
    --body: 'Figtree', 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

    --gutter: clamp(1.25rem, 5vw, 4.5rem);
    --max: 1220px;
    --section-y: clamp(4.5rem, 9vw, 8rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--cream);
    color: var(--text);
    font-family: var(--body);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--terracotta-deep); }

:focus-visible {
    outline: 3px solid var(--terracotta-deep);
    outline-offset: 3px;
}

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

.skip {
    position: absolute;
    left: -9999px;
}
.skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
    background: var(--ink);
    color: var(--cream);
    padding: .75rem 1.25rem;
    border-radius: 2px;
    font-weight: 700;
}

/* --- type ---------------------------------------------------- */
.display {
    font-family: var(--display);
    font-weight: 400;
    /* only affects the Greek fallback; Caprasimo has a single weight */
    font-variation-settings: 'wght' 900;
    letter-spacing: -.015em;
    line-height: .98;
    margin: 0;
}
.d1 { font-size: clamp(2.85rem, 8.4vw, 6.75rem); }
.d2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); line-height: 1.02; }
.d3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; }

.label {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    margin: 0;
}

.lede { font-size: clamp(1.1rem, 1.8vw, 1.375rem); line-height: 1.5; font-weight: 500; }
.muted { color: rgba(32, 30, 29, .68); }

.accent { color: var(--terracotta); }
.accent-text { color: var(--terracotta-deep); }

/* --- buttons ------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-family: var(--body);
    font-size: .95rem;
    font-weight: 700;
    padding: .85rem 1.6rem;
    border: 2px solid transparent;
    border-radius: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); }

/* terracotta-deep + cream = 5.7:1 */
.btn-primary { background: var(--terracotta-deep); color: var(--cream); }
.btn-primary:hover { background: var(--ink); }

.btn-outline { background: transparent; color: var(--text); border-color: var(--rule-strong); }
.btn-outline:hover { border-color: var(--text); background: rgba(32, 30, 29, .05); }

/* on ink, terracotta carries ink text at 4.6:1 */
.btn-on-dark { background: var(--terracotta); color: var(--ink); }
.btn-on-dark:hover { background: var(--sage-light); }

.btn-ghost-dark { background: transparent; color: var(--cream); border-color: var(--rule-dark); }
.btn-ghost-dark:hover { border-color: var(--cream); background: rgba(245, 234, 216, .08); }

.btn-on-terracotta { background: var(--ink); color: var(--cream); }
.btn-on-terracotta:hover { background: var(--cream); color: var(--ink); }

/* --- wordmark ------------------------------------------------ */
.wordmark {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -.02em;
    text-decoration: none;
    color: var(--text);
    white-space: nowrap;
}
.wordmark span { color: var(--terracotta-deep); font-size: .74em; }
.wordmark-dark { color: var(--cream); }
.wordmark-dark span { color: var(--sage-light); }

/* --- nav ----------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--cream);
    border-bottom: 1px solid var(--rule);
}
.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .9rem;
}
.nav-links {
    display: none;
    align-items: center;
    gap: 1.75rem;
}
/* Applies to plain nav links only. This rule outranks a single-class component
   selector, so anything with its own box -- the CTA button, the language
   switcher -- has to be excluded or this transparent underline overwrites its
   bottom border and its padding. */
.nav-links a:not(.btn):not(.nav-lang) {
    color: var(--text);
    text-decoration: none;
    font-size: .92rem;
    font-weight: 600;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
}
.nav-links a:not(.btn):not(.nav-lang):hover { border-bottom-color: var(--terracotta); }

.nav-toggle {
    display: inline-flex;
    background: none;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: .5rem;
    color: var(--text);
    cursor: pointer;
}
.nav-panel { border-top: 1px solid var(--rule); }
.nav-panel-inner { display: grid; gap: .25rem; padding-block: 1rem 1.5rem; }
.nav-panel a:not(.btn):not(.nav-lang) {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    padding: .55rem 0;
}
.nav-panel .btn { margin-top: .75rem; justify-content: center; }

.hidden { display: none; }

@media (min-width: 900px) {
    .nav-links { display: flex; }
    .nav-toggle, .nav-panel { display: none; }
}

/* --- sections ------------------------------------------------ */
.section { padding-block: var(--section-y); }
section[id], main[id] { scroll-margin-top: 5.5rem; }
.section-cream-deep { background: var(--cream-deep); }
.section-ink { background: var(--ink); color: var(--cream); }
.section-ink .muted { color: rgba(245, 234, 216, .66); }
.section-terracotta { background: var(--terracotta); color: var(--ink); }

.section-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head .label { color: var(--terracotta-deep); margin-bottom: .9rem; }
.section-ink .section-head .label { color: var(--sage-light); }
/* :not(.label) so the eyebrow keeps its own spacing rather than picking up
   the body paragraph's top margin from this more specific selector. */
.section-head p:not(.label) { max-width: 54ch; margin: 1.1rem 0 0; }

/* --- hero ---------------------------------------------------- */
.hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem); }
.hero .label { color: var(--terracotta-deep); margin-bottom: 1.5rem; }
.hero h1 { max-width: 15ch; margin-bottom: 1.75rem; }
.hero-lede { max-width: 46ch; margin: 0 0 1rem; }
.hero-sub { max-width: 50ch; margin: 0 0 2.25rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- marquee (signature) ------------------------------------- */
.marquee {
    background: var(--ink);
    color: var(--cream);
    padding-block: clamp(1.1rem, 2.4vw, 1.75rem);
    overflow: hidden;
    border-block: 1px solid var(--ink);
}
.marquee-track {
    display: flex;
    width: max-content;
    animation: marquee 46s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-family: var(--display);
    font-size: clamp(1.9rem, 4.4vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.marquee-group > * { padding-inline: clamp(1rem, 2vw, 2rem); }
.marquee-dot { color: var(--terracotta); }
.marquee-group :nth-child(4n + 3) { color: var(--sage-light); }

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; width: 100%; flex-wrap: wrap; }
    .marquee-group { flex-wrap: wrap; white-space: normal; }
    .marquee-group:last-child { display: none; }
}

/* --- ruled entries (services) -------------------------------- */
.entry {
    display: grid;
    gap: 1.5rem 3rem;
    padding-block: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
}
.entry:last-child { border-bottom: 1px solid var(--rule); }
.entry-title { margin-bottom: .9rem; }
.spec {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: .55rem;
}
.spec li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: baseline;
    gap: .5rem;
    font-size: .98rem;
}
.spec li::before {
    content: "—";
    color: var(--sage);
    font-weight: 700;
}
@media (min-width: 820px) {
    .entry { grid-template-columns: 15rem 1fr; }
}

/* --- work index ---------------------------------------------- */
.work-row {
    display: grid;
    gap: 1.25rem 2.5rem;
    padding-block: clamp(1.75rem, 3.5vw, 2.5rem);
    border-top: 1px solid var(--rule);
    text-decoration: none;
    color: inherit;
}
.work-list .work-row:last-child { border-bottom: 1px solid var(--rule); }
.work-tags { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.work-tag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: .3rem .6rem;
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    white-space: nowrap;
}
.work-tag-live { background: var(--sage-light); color: var(--ink); border-color: var(--sage); }
.work-title { margin-bottom: .6rem; }
.work-row p { margin: 0; max-width: 54ch; }
.work-go {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--terracotta-deep);
}
.work-go svg { transition: transform .2s ease; }
.work-row:hover .work-go svg { transform: translateX(5px); }

/* the preview sits in a cream mat with a keyline, like a mounted print */
.work-mat {
    background: var(--cream);
    border: 1px solid var(--rule-strong);
    padding: .5rem;
    transition: transform .22s ease, border-color .22s ease;
}
.work-mat img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.work-row:hover .work-mat { transform: translate(-4px, -4px); border-color: var(--terracotta); }
.work-row:focus-visible .work-mat { border-color: var(--terracotta); }

@media (min-width: 900px) {
    .work-row { grid-template-columns: 9rem 1fr 17rem; align-items: start; }
    .work-tags { flex-direction: column; }
}

/* --- process (a real sequence, so it gets numbers) ------------ */
.steps { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; }
.step-n {
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: .9;
    color: var(--terracotta);
}
.step h3 { margin: 0 0 .3rem; font-size: 1.05rem; font-weight: 700; }
.step p { margin: 0; font-size: .95rem; }
.step-when {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sage-light);
    margin-bottom: .35rem;
}

.promises { display: grid; gap: 1.25rem; margin: 2rem 0; padding: 0; list-style: none; }
.promises h3 { margin: 0 0 .2rem; font-size: 1rem; font-weight: 700; }
.promises p { margin: 0; font-size: .9rem; }
.promises li { border-left: 2px solid var(--terracotta); padding-left: 1rem; }
@media (min-width: 640px) { .promises { grid-template-columns: 1fr 1fr; } }

.panel {
    border: 1px solid var(--rule-dark);
    padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* --- about --------------------------------------------------- */
.statement {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.1vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0 0 2rem;
    max-width: 22ch;
}
.about-cols { display: grid; gap: 1.75rem; }
@media (min-width: 820px) { .about-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* --- contact ------------------------------------------------- */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.1fr; gap: 4rem; } }

.field { display: grid; gap: .45rem; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.field input, .field textarea {
    font-family: var(--body);
    font-size: 1rem;
    color: var(--text);
    background: var(--cream-deep);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: .8rem .9rem;
    width: 100%;
}
.field textarea { resize: vertical; min-height: 9rem; }
.field input:focus, .field textarea:focus {
    outline: 3px solid var(--terracotta-deep);
    outline-offset: 1px;
    border-color: var(--terracotta-deep);
}
.form-rows { display: grid; gap: 1.1rem; }
@media (min-width: 640px) { .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } }

.form-status {
    padding: .9rem 1.1rem;
    border-radius: 2px;
    border: 1px solid;
    font-weight: 600;
    font-size: .95rem;
}
.form-status ul { margin: .5rem 0 0; padding-left: 1.15rem; font-weight: 500; }
.form-status-pending { background: var(--cream-deep); border-color: var(--rule-strong); color: var(--text); }
.form-status-ok { background: #e9efdd; border-color: var(--sage); color: #3d4a26; }
.form-status-error { background: #f6e3d5; border-color: var(--terracotta-deep); color: var(--terracotta-deep); }

/* --- footer -------------------------------------------------- */
.footer { background: var(--ink); color: rgba(245, 234, 216, .72); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-grid { display: grid; gap: 2.5rem; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.4fr 1fr; gap: 4rem; } }
.footer h4 { font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--sage-light); margin: 0 0 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: rgba(245, 234, 216, .72); text-decoration: none; }
.footer a:hover { color: var(--cream); text-decoration: underline; }
.footer-legal { font-size: .85rem; line-height: 1.7; margin-top: 1.25rem; }
.footer-legal strong { color: var(--cream); display: block; letter-spacing: .04em; }
.footer-base {
    margin-top: 2.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule-dark);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    justify-content: space-between;
    font-size: .85rem;
}
.footer-base nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.cc-show-prefs {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}
.cc-show-prefs:hover { color: var(--cream); text-decoration: underline; }

/* --- scroll reveal ------------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .btn:hover, .work-row:hover .work-mat { transform: none; }
}

/* =================================================================
   Interior pages
   ================================================================= */

/* --- page header (interior hero) ------------------------------ */
.page-head {
    padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
    border-bottom: 1px solid var(--rule);
}
.page-head .label { color: var(--terracotta-deep); margin-bottom: 1.1rem; }
.page-head h1 { max-width: 18ch; margin-bottom: 1.5rem; }
.page-head .lede { max-width: 52ch; margin: 0; }
.page-head-ink { background: var(--ink); color: var(--cream); border-bottom-color: var(--ink); }
.page-head-ink .label { color: var(--sage-light); }

.crumbs {
    font-size: .82rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
    color: rgba(32, 30, 29, .6);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--terracotta-deep); text-decoration: underline; }
.crumbs span { padding-inline: .5rem; }

/* --- grids ----------------------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* --- card ------------------------------------------------------ */
.card {
    background: var(--cream);
    border: 1px solid var(--rule-strong);
    padding: clamp(1.4rem, 2.5vw, 2rem);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    text-decoration: none;
    color: inherit;
    transition: transform .2s ease, border-color .2s ease;
}
.card h3 { margin: 0; }
.card p { margin: 0; }
a.card:hover { transform: translateY(-3px); border-color: var(--terracotta); }
.section-cream-deep .card { background: var(--cream); }
.section-ink .card { background: transparent; border-color: var(--rule-dark); }
.card-go {
    margin-top: auto;
    padding-top: .5rem;
    font-weight: 700;
    font-size: .92rem;
    color: var(--terracotta-deep);
}
.section-ink .card-go { color: var(--sage-light); }

/* --- pain points ----------------------------------------------- */
.pains { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pains li {
    border-top: 1px solid var(--rule);
    padding-block: 1.4rem;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0 1rem;
    align-items: baseline;
}
/* Each item is marker + heading + copy, so the copy is a third grid child and
   would otherwise wrap back under the marker. Keep it in the content column. */
.pains li > p { grid-column: 2; }
.pains li:last-child { border-bottom: 1px solid var(--rule); }
.pains li::before {
    content: "✕";
    font-weight: 800;
    color: var(--terracotta-deep);
}
.pains h3 { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.45; }

/* --- pricing tiers --------------------------------------------- */
.tiers { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
    border: 1px solid var(--rule-strong);
    background: var(--cream);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    display: flex;
    flex-direction: column;
    height: 100%;
}
.tier-featured { border: 2px solid var(--terracotta); }
.tier-flag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--terracotta-deep);
    margin: 0 0 .75rem;
}
.tier h3 { margin: 0 0 .4rem; }
.tier-price {
    font-family: var(--display);
    font-size: 1.6rem;
    line-height: 1.1;
    margin: 0 0 1rem;
}
.tier > p { margin: 0 0 1.25rem; }
.tier .spec { margin-bottom: 1.75rem; }
.tier .btn { margin-top: auto; justify-content: center; }

/* --- FAQ -------------------------------------------------------- */
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
    cursor: pointer;
    padding-block: 1.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: "+";
    font-family: var(--display);
    color: var(--terracotta-deep);
    flex-shrink: 0;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { margin: 0 0 1.4rem; max-width: 66ch; }

/* --- article prose ---------------------------------------------- */
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1.25rem; }
.prose h2 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.8vw, 2.05rem);
    line-height: 1.1;
    letter-spacing: -.01em;
    margin-top: 3rem;
    margin-bottom: 0;
}
.prose h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 0;
}
.prose p { margin-bottom: 0; color: rgba(32, 30, 29, .82); }
.prose ul, .prose ol { padding-left: 1.3rem; color: rgba(32, 30, 29, .82); }
.prose li + li { margin-top: .5rem; }
.prose a { font-weight: 600; }
.prose strong { color: var(--text); }
.prose blockquote {
    margin-inline: 0;
    border-left: 3px solid var(--terracotta);
    padding: .25rem 0 .25rem 1.5rem;
    font-family: var(--display);
    font-size: clamp(1.15rem, 2vw, 1.45rem);
    line-height: 1.3;
}
.prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .9em;
    background: var(--cream-deep);
    border: 1px solid var(--rule);
    padding: .1em .35em;
    border-radius: 2px;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin-block: 2.5rem; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    font-size: .85rem;
    font-weight: 600;
    color: rgba(32, 30, 29, .6);
    margin: 0 0 1.5rem;
}

/* --- callout ---------------------------------------------------- */
.callout {
    border: 1px solid var(--rule-strong);
    border-left: 3px solid var(--sage);
    background: var(--cream-deep);
    padding: 1.25rem 1.4rem;
}
.callout p:last-child { margin-bottom: 0; }

/* --- comparison table -------------------------------------------- */
.table-wrap { overflow-x: auto; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 32rem; font-size: .95rem; }
.table-wrap th, .table-wrap td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--rule); }
.table-wrap th { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

/* --- effort rows (used in the cost article) ---------------------- */
.cost-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    align-items: baseline;
    border: 1px solid var(--rule-strong);
    background: var(--cream-deep);
    padding: .85rem 1.1rem;
    margin-top: .5rem;
}
.cost-row > span:first-child { font-weight: 600; }
.cost-effort {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--terracotta-deep);
    white-space: nowrap;
}

/* --- phone mockups (mobile app case study) ---------------------- */
.phones { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 3vw, 2.5rem); justify-content: center; }
.phone {
    width: 15rem;
    max-width: 100%;
    border: 2px solid var(--ink);
    border-radius: 1.75rem;
    background: var(--cream);
    padding: .6rem;
    flex: 0 0 auto;
}
.section-ink .phone { background: var(--cream); }
.phone-screen {
    border: 1px solid var(--rule);
    border-radius: 1.25rem;
    padding: 1rem .9rem;
    min-height: 20rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    color: var(--text);
}
.phone-cap { font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--terracotta-deep); }
.phone-h { font-family: var(--display); font-size: 1.15rem; line-height: 1.15; margin: 0; }
.phone-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
    border-top: 1px solid var(--rule);
    padding-top: .5rem;
    font-size: .82rem;
}
.phone-row strong { font-weight: 700; }
.phone-row em { font-style: normal; font-weight: 700; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sage); }
.phone-row em.is-full { color: var(--terracotta-deep); }
.phone-label { text-align: center; font-size: .8rem; font-weight: 700; margin-top: .75rem; }

/* --- stat row ---------------------------------------------------- */
.stats-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
@media (min-width: 820px) { .stats-row { grid-template-columns: repeat(4, 1fr); } }
.stats-row .n { font-family: var(--display); font-size: clamp(1.9rem, 3.5vw, 2.75rem); line-height: 1; color: var(--terracotta); }
.stats-row p { margin: .5rem 0 0; font-size: .88rem; }

/* --- pull quote --------------------------------------------------- */
.quote { border-top: 1px solid var(--rule-dark); border-bottom: 1px solid var(--rule-dark); padding-block: clamp(2rem, 4vw, 3rem); }
.quote blockquote {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.6vw, 1.9rem);
    line-height: 1.25;
    max-width: 30ch;
}
.quote figcaption { margin-top: 1.5rem; font-size: .9rem; }
.quote figcaption strong { display: block; font-weight: 700; }

/* --- language switcher ------------------------------------------- */
.nav-lang {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-decoration: none;
    color: var(--text);
    border: 1px solid var(--rule-strong);
    border-radius: 2px;
    padding: .35rem .55rem;
    line-height: 1;
    white-space: nowrap;
}
.nav-lang:hover { border-color: var(--terracotta); color: var(--terracotta-deep); }
.nav-panel .nav-lang { justify-self: start; margin-top: .5rem; }