/* ==========================================================================
   pages.css — service and detail page sections.

   Purely additive: every selector here is a new class introduced for the
   service pages, so this file cannot alter the approved home page. Uses the
   existing tokens from tokens.css only — no new colours.
   ========================================================================== */

/* --- Shared pill -----------------------------------------------------------
   The home page styles its pill via `.price-card__top span`, which is more
   specific than this rule, so the home page is unaffected. */
.pill {
    display: inline-flex;
    align-items: center;
    padding: .35rem .55rem;
    border-radius: 999px;
    background: var(--color-orange);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* --- Compact page hero ------------------------------------------------------ */

.page-hero {
    position: relative;
    overflow: clip;
    padding-block: clamp(3rem, 6vw, 5rem) clamp(3.5rem, 7vw, 6rem);
    background: var(--color-black);
}
.page-hero__glow {
    position: absolute;
    z-index: 0;
    top: -18rem;
    right: -10rem;
    width: 46rem;
    height: 38rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 101, 0, .3), rgba(255, 101, 0, 0) 62%);
    pointer-events: none;
}
.page-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--space-4); justify-items: start; }
.page-hero__inner h1 {
    max-width: 18ch;
    color: var(--color-white);
    font-size: clamp(2.25rem, 4.4vw, 4rem);
    line-height: 1;
    letter-spacing: -.035em;
}
.page-hero .text-large { max-width: 56ch; color: var(--color-text-on-dark); font-size: clamp(1.05rem, 1.25vw, 1.2rem); }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.page-hero__meta { margin-top: var(--space-3); color: var(--color-text-muted-dark); font-size: var(--text-small); }
.page-hero__meta strong { color: var(--color-white); }

/* Split hero (copy + device) used on the Web Design page */
.page-hero__split {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
}
.page-hero__visual { position: relative; }

/* --- Breadcrumb -------------------------------------------------------------- */

.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.breadcrumb li { display: flex; align-items: center; gap: .5rem; color: var(--color-text-muted-dark); font-size: var(--text-small); }
.breadcrumb li + li::before { content: "/"; color: var(--color-border-dark); }
.breadcrumb a { color: var(--color-text-on-dark); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb [aria-current="page"] { color: var(--color-white); }

/* --- Section intro (single column) -------------------------------------------- */

.section-intro { display: grid; gap: var(--space-4); justify-items: start; max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-intro h2 { max-width: 18ch; }

/* --- Tick / cross lists -------------------------------------------------------- */

.tick-list { display: grid; gap: .55rem; }
.tick-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--text-small); line-height: 1.5; color: var(--color-text-secondary); }
.tick-list .icon { width: .95rem; height: .95rem; margin-top: .22rem; color: var(--color-accent); }
.tick-list--light li { color: var(--color-text-on-dark); }

.cross-list { display: grid; gap: .5rem; }
.cross-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--color-text-muted); }
.cross-list__mark { position: relative; width: .95rem; height: .95rem; margin-top: .22rem; flex: none; }
.cross-list__mark::before,
.cross-list__mark::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 1.5px;
    background: var(--color-text-muted);
}
.cross-list__mark::before { transform: rotate(45deg); }
.cross-list__mark::after { transform: rotate(-45deg); }

/* --- Services hub: editorial service blocks ------------------------------------ */

.service-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    align-items: center;
    padding-block: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--color-border);
}
.service-block:first-of-type { border-top: 0; padding-top: 0; }
.service-block:nth-child(odd) .service-block__media { order: 2; }
.service-block__media { overflow: hidden; aspect-ratio: 16 / 10; background: var(--color-black); }
.service-block__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.service-block:hover .service-block__media img { transform: scale(1.03); }
.service-block__body { display: grid; gap: var(--space-3); justify-items: start; }
.service-block__index { color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; letter-spacing: .12em; }
.service-block__body h3 { font-size: clamp(1.75rem, 2.6vw, 2.5rem); letter-spacing: -.035em; }
.service-block__lead { max-width: 46ch; color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.6; }
.service-block .tick-list { margin-block: var(--space-2); }
.service-block .button { margin-top: var(--space-2); }

/* --- Services hub: tier summary -------------------------------------------------- */

.tier-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.25vw, 1.25rem); }
.tier {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: clamp(1.25rem, 2vw, 1.75rem);
    border: 1px solid var(--color-border-dark);
    background: var(--color-surface-dark);
    transition: border-color var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.tier:hover { border-color: #5a5a5a; transform: translateY(-.25rem); }
.tier--featured { border-color: var(--color-orange); box-shadow: inset 0 .22rem 0 var(--color-orange); }
.tier__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.tier__head h3 { font-size: 1.15rem; color: var(--color-white); }
.tier__price { font-family: var(--font-sans); font-size: clamp(1.6rem, 2.2vw, 2.25rem); line-height: 1; letter-spacing: -.03em; color: var(--color-white); }
.tier p { color: var(--color-text-on-dark); font-size: var(--text-small); line-height: 1.55; }

/* --- Card grids: why / value ------------------------------------------------------ */

.why-grid, .value-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}
.why-card, .value-card {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: clamp(1.5rem, 2.4vw, 2rem);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}
.why-card:hover, .value-card:hover { border-color: var(--color-accent); transform: translateY(-.25rem); }
.why-card h3, .value-card h3 { font-size: 1.15rem; letter-spacing: -.02em; }
.why-card p, .value-card p { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* --- What's included ---------------------------------------------------------------- */

.included-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.included-group { display: grid; gap: var(--space-4); align-content: start; }
.included-group h3 {
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border-dark);
    color: var(--color-white);
    font-size: 1.05rem;
    letter-spacing: -.01em;
}
.included-section .heading-aside a { color: var(--color-accent); }

/* --- Web Design: full packages -------------------------------------------------------- */

.package-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.8rem, 1.25vw, 1.25rem); align-items: stretch; }
.package {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.4rem, 2vw, 1.9rem);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);
}
.package:hover, .package:focus-within { border-color: var(--color-text); transform: translateY(-.3rem); box-shadow: var(--shadow-card); }
.package--featured { border-color: var(--color-orange); box-shadow: inset 0 .22rem 0 var(--color-orange); }
.package--featured:hover, .package--featured:focus-within { border-color: var(--color-orange); box-shadow: inset 0 .22rem 0 var(--color-orange), var(--shadow-card); }
.package__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.package__head h3 { font-size: 1.25rem; }
.package__price { display: block; font-family: var(--font-sans); font-size: clamp(1.75rem, 2.3vw, 2.35rem); line-height: 1; letter-spacing: -.035em; }
.package__for { min-height: 4rem; margin-block: var(--space-3) var(--space-4); color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.55; }
.package__label {
    margin-bottom: var(--space-3);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.package__label--excl { margin-top: var(--space-5); }
/* Pushed to the card foot so every package CTA aligns, even though the One
   Page card carries an extra "Not included" block. */
.package__cta { margin-top: auto; }
.package .tick-list, .package .cross-list { margin-bottom: var(--space-6); }
.package .tick-list + .package__label { border-top: 1px solid var(--color-border); padding-top: var(--space-5); margin-top: var(--space-5); }
.packages-note { max-width: 62ch; margin-top: clamp(1.75rem, 3vw, 2.5rem); color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* --- Web Design: six-stage process ------------------------------------------------------ */

.process-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.process-step { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-5); border-top: 2px solid var(--color-border-dark); }
.process-step__num { color: var(--color-accent); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; letter-spacing: .12em; }
.process-step h3 { color: var(--color-white); font-size: 1.3rem; }
.process-step p { color: var(--color-text-on-dark); font-size: var(--text-small); line-height: 1.6; }

/* --- Neutral interface mock + device frames ----------------------------------------------- */

.device-frame {
    position: relative;
    overflow: hidden;
    background: #0d0d0d;
    box-shadow: var(--shadow-deep);
}
.device-frame--desktop { aspect-ratio: 16 / 10; border: .45rem solid #2b2d31; border-radius: .6rem; }
.device-frame--tablet { aspect-ratio: 3 / 4; border: .45rem solid #2b2d31; border-radius: .7rem; }
.device-frame--phone { aspect-ratio: 9 / 18; border: .35rem solid #2b2d31; border-radius: 1rem; }

.mock { position: absolute; inset: 0; display: flex; flex-direction: column; background: #111; font-size: 13px; }
.device-frame--tablet .mock { font-size: 8px; }
.device-frame--phone .mock { font-size: 6px; }

.mock__bar { display: flex; align-items: center; gap: .4em; padding: .55em .8em; border-bottom: 1px solid #262626; }
.device-frame--phone .mock__bar { display: none; }
.mock__dot { width: .45em; height: .45em; border-radius: 50%; background: #3d3d3d; }
.mock__body { flex: 1; display: flex; flex-direction: column; padding: .9em 1em; gap: .9em; }
.mock__nav { display: flex; align-items: center; justify-content: space-between; }
.mock__logo { width: 3.4em; height: .8em; border-radius: .1em; background: var(--color-orange); }
.mock__links { display: flex; gap: .5em; }
.mock__links i { display: block; width: 1.6em; height: .35em; border-radius: .1em; background: #3a3a3a; }
.device-frame--phone .mock__links i:nth-child(n+2) { display: none; }
.mock__main { flex: 1 1 auto; display: flex; gap: .9em; align-items: center; margin-top: .5em; }
.mock__hero { flex: 1 1 55%; display: flex; flex-direction: column; gap: .4em; }
.mock__eyebrow { width: 4.2em; height: .3em; border-radius: .1em; background: var(--color-orange); }
.mock__h1 { width: 100%; height: 1em; border-radius: .1em; background: #e8e6e3; }
.mock__h1--short { width: 62%; }
.mock__line { width: 84%; height: .3em; border-radius: .1em; margin-top: .2em; background: #5c5c5c; }
.mock__cta { width: 3.8em; height: .95em; border-radius: .1em; background: var(--color-orange); margin-top: .45em; }
.mock__media { flex: 1 1 45%; align-self: stretch; min-height: 4.2em; border-radius: .1em; background: linear-gradient(150deg, #34302c, #171717); }
.device-frame--phone .mock__main { flex-direction: column; align-items: stretch; }
.device-frame--phone .mock__media { min-height: 3em; }
.mock__cards { display: flex; gap: .5em; margin-top: auto; }
.mock__cards span { flex: 1; height: 2em; border-radius: .1em; background: linear-gradient(160deg, #2a2a2a, #161616); }
.device-frame--phone .mock__cards { flex-direction: column; }
.device-frame--phone .mock__cards span { height: 1.2em; }

.device-showcase { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.device-figure { display: grid; gap: var(--space-3); justify-items: center; margin: 0; }
.device-figure figcaption { color: var(--color-text-muted); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; }
.device-figure:nth-child(1) { flex: 1 1 30rem; max-width: 38rem; }
.device-figure:nth-child(2) { flex: 0 1 14rem; }
.device-figure:nth-child(3) { flex: 0 1 8.5rem; }
.device-figure .device-frame { width: 100%; }
.device-showcase__note { max-width: 60ch; margin: clamp(1.5rem, 3vw, 2.25rem) auto 0; color: var(--color-text-muted); font-size: var(--text-small); text-align: center; }

/* --- SEO foundations --------------------------------------------------------------------- */

.seo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.seo-copy { display: grid; gap: var(--space-4); justify-items: start; }
.seo-copy h2 { max-width: 16ch; }
.seo-caveat { max-width: 52ch; padding-left: var(--space-4); border-left: 2px solid var(--color-orange); color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.6; }
/* On a dark section the caveat needs the on-dark muted tone instead. */
.section--dark .seo-caveat { color: var(--color-text-muted-dark); }
.seo-list { gap: var(--space-3); }
.seo-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-dark); font-size: .9375rem; }
.seo-list li:last-child { border-bottom: 0; padding-bottom: 0; }

/* --- Hosting cross-sell -------------------------------------------------------------------- */

.cross-sell { background: var(--color-bg-alt); }
.cross-sell__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.cross-sell h2 { max-width: 16ch; font-size: clamp(1.9rem, 3vw, 2.75rem); }
.cross-sell .text-large { max-width: 52ch; margin-top: var(--space-3); }
.cross-sell__aside { display: grid; gap: var(--space-4); justify-items: start; }
.cross-sell__price { color: var(--color-orange); font-family: var(--font-sans); font-size: clamp(1.9rem, 3vw, 2.75rem); line-height: 1; letter-spacing: -.03em; }
.cross-sell__price small { color: var(--color-text-muted); font-size: .875rem; font-weight: 500; letter-spacing: 0; }

/* --- Work placeholders ---------------------------------------------------------------------- */

.work-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.75rem); }
.work-slot { display: grid; gap: var(--space-3); padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px dashed var(--color-border-dark); background: var(--color-surface-dark); }
.work-slot__frame { display: block; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #202020, #101010); border: 1px solid var(--color-border-dark); }
.work-slot__label { color: var(--color-white); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.work-slot__note { color: var(--color-text-muted-dark); font-size: var(--text-small); }

/* --- FAQ ------------------------------------------------------------------------------------- */

.faq-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-intro { display: grid; gap: var(--space-4); justify-items: start; position: sticky; top: calc(var(--header-height) + 2rem); }
.faq-intro h2 { max-width: 12ch; }
.faq-intro p { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

.faq-list { display: grid; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 3.5rem;
    padding-block: var(--space-4);
    cursor: pointer;
    list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item__q { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 700; letter-spacing: -.015em; }
.faq-item summary:hover .faq-item__q { color: var(--color-accent-hover); }
.faq-item__icon { position: relative; width: 1.1rem; height: 1.1rem; flex: none; }
.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-accent);
    transition: transform var(--duration-standard) var(--ease-standard);
}
.faq-item__icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-item__icon::after { transform: rotate(0deg); }
.faq-item__a { padding-bottom: var(--space-5); }
.faq-item__a p { max-width: 68ch; color: var(--color-text-secondary); font-size: var(--text-small); line-height: 1.7; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 64rem) {
    .page-hero__split { grid-template-columns: 1fr; gap: var(--space-7); }
    .page-hero__visual { max-width: 34rem; }
    .tier-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package__for { min-height: 0; }
    .why-grid, .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .included-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
    .seo-grid { grid-template-columns: 1fr; gap: var(--space-7); }
    .faq-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .faq-intro { position: static; }
}

@media (max-width: 50rem) {
    .service-block { grid-template-columns: 1fr; gap: var(--space-6); }
    .service-block:nth-child(odd) .service-block__media { order: 0; }
    .included-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .work-slots { grid-template-columns: 1fr; }
    .cross-sell__inner { grid-template-columns: 1fr; gap: var(--space-6); }
    .device-figure:nth-child(1) { flex: 1 1 100%; max-width: none; }
    .device-figure:nth-child(2) { flex: 0 1 11rem; }
    .device-figure:nth-child(3) { flex: 0 1 7rem; }
}

@media (max-width: 42rem) {
    .page-hero { padding-block: var(--space-7) var(--space-8); }
    .page-hero__inner h1 { max-width: none; }
    .page-hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .page-hero__actions .button { width: 100%; }
    .tier-summary { grid-template-columns: 1fr; }
    .package-grid { grid-template-columns: 1fr; }
    .why-grid, .value-grid { grid-template-columns: 1fr; }
    .process-steps { grid-template-columns: 1fr; gap: var(--space-5); }
    .service-block .button, .cross-sell__aside .button, .faq-intro .button { width: 100%; }
    .device-showcase { gap: var(--space-5); }
    .device-figure:nth-child(2) { flex: 0 1 9rem; }
    .device-figure:nth-child(3) { flex: 0 1 6rem; }
    .faq-item__q { font-size: 1rem; }
}

@media (max-width: 22.5rem) {
    /* 320px — keep headings and cards from overflowing */
    .page-hero__inner h1 { font-size: 1.9rem; }
    .section-intro h2 { font-size: 1.75rem; }
    .package, .why-card, .value-card, .tier { padding: 1.1rem; }
}

/* ==========================================================================
   Website Redesign page
   ========================================================================== */

/* --- "Before" variant of the neutral mock: cramped, greyed, no hierarchy --- */

.mock--before { background: #cfccc6; }
.mock--before .mock__bar { border-bottom-color: #b3afa8; }
.mock--before .mock__dot { background: #a6a29b; }
.mock--before .mock__body { padding: .55em .7em; gap: .45em; }
.mock--before .mock__logo { width: 2.6em; height: .6em; background: #7d7973; }
.mock--before .mock__links i { width: 1.1em; height: .28em; background: #9a968f; }
.mock--before .mock__main { gap: .5em; margin-top: .25em; align-items: flex-start; }
.mock--before .mock__hero { gap: .26em; }
.mock--before .mock__h1 { width: 68%; height: .5em; background: #6f6b65; }
.mock--before .mock__line { width: 100%; height: .24em; margin-top: 0; background: #8e8a84; }
.mock--before .mock__line--short { width: 52%; }
.mock--before .mock__cta { width: 2.6em; height: .58em; margin-top: .3em; background: #7d7973; }
.mock--before .mock__media { min-height: 3em; background: linear-gradient(150deg, #b8b4ae, #9a968f); }
.mock--before .mock__cards { gap: .3em; }
.mock--before .mock__cards span { height: 1.15em; background: #bdb9b3; }

/* --- Hero before/after stack ---------------------------------------------- */

.hero-stack { position: relative; }
.hero-stack__item { position: relative; }
.hero-stack__item--before { width: 74%; filter: saturate(.55); opacity: .85; }
.hero-stack__item--after { z-index: 2; width: 80%; margin-top: -16%; margin-left: 20%; }
.hero-stack__tag {
    position: absolute;
    z-index: 3;
    bottom: .6rem;
    left: .6rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: rgba(17, 17, 17, .88);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.hero-stack__tag--accent { background: var(--color-orange); color: var(--color-black); }

/* --- Warning signs (editorial two-column list) ----------------------------- */

.signs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 4vw, 4rem); }
.sign { display: flex; gap: var(--space-4); padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.sign__num { flex: none; padding-top: .15rem; color: var(--color-text-muted); font-family: var(--font-sans); font-size: .8125rem; font-weight: 700; letter-spacing: .12em; }
.sign__title { margin-bottom: .35rem; font-size: 1.0625rem; letter-spacing: -.015em; }
.sign__text { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }
.signs__note {
    max-width: 64ch;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-orange);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: 1.6;
}

/* --- Before / after comparison --------------------------------------------
   The reveal is driven by a native range input, so touch, keyboard and
   screen-reader support come for free and no library is needed. Below 50rem
   the slider is removed and both states stack, which is both better on a
   small screen and a non-interactive alternative. */

.compare-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.compare { --pos: 50%; display: grid; gap: var(--space-5); }
.compare__viewport { position: relative; }
.compare__side { position: relative; }
.compare__side .device-frame { width: 100%; }
.compare__side--after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.compare__tag {
    position: absolute;
    z-index: 3;
    bottom: .75rem;
    left: .75rem;
    padding: .3rem .6rem;
    border-radius: 999px;
    background: rgba(17, 17, 17, .88);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.compare__tag--right { right: .75rem; left: auto; background: var(--color-orange); color: var(--color-black); }
.compare__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: var(--color-orange); transform: translateX(-1px); pointer-events: none; }
.compare__divider::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--color-orange);
    border-radius: 50%;
    background: rgba(17, 17, 17, .9);
    transform: translate(-50%, -50%);
}
.compare__control { display: flex; flex-direction: column; gap: .4rem; }
.compare__hint { color: var(--color-text-muted-dark); font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.compare__range { width: 100%; min-height: 2.75rem; accent-color: var(--color-orange); cursor: ew-resize; }

.compare-points { display: grid; gap: var(--space-4); align-content: start; }
.compare-points h3 { color: var(--color-white); font-size: 1.2rem; }
.compare-points__note {
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-orange);
    color: var(--color-text-muted-dark);
    font-size: var(--text-small);
    line-height: 1.6;
}

/* --- Keep what works -------------------------------------------------------- */

.keep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
.keep-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.keep-item > .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--color-accent); }
.keep-item h3 { margin-bottom: .3rem; font-size: 1.05rem; letter-spacing: -.015em; }
.keep-item p { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* --- Redesign pricing --------------------------------------------------------- */

.pricing-alt__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.factors { display: grid; gap: var(--space-4); justify-items: start; padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--color-border); background: var(--color-surface); }
.factors h3 { font-size: 1.15rem; }
.tier-refs { display: grid; gap: var(--space-4); }
.tier-refs__intro { color: var(--color-text-secondary); font-size: var(--text-small); }
.tier-refs__note { max-width: 60ch; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* Light-section variant of the tier summary: three cards on a warm ground. */
.tier-summary--light { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier-summary--light .tier { border-color: var(--color-border); background: var(--color-surface); }
.tier-summary--light .tier:hover { border-color: var(--color-text); }
.tier-summary--light .tier--featured { border-color: var(--color-orange); }
.tier-summary--light .tier__head h3, .tier-summary--light .tier__price { color: var(--color-text); }
.tier-summary--light .tier p { color: var(--color-text-muted); }

/* --- Redesign work placeholders ------------------------------------------------ */

.redesign-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.8vw, 1.75rem); }
.redesign-slot { display: grid; gap: var(--space-3); padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px dashed var(--color-border-dark); background: var(--color-surface-dark); }
.redesign-slot__pair { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.redesign-slot__half { position: relative; display: block; aspect-ratio: 4 / 3; border: 1px solid var(--color-border-dark); background: linear-gradient(150deg, #202020, #101010); }
.redesign-slot__half--after { border-color: #3d3128; background: linear-gradient(150deg, #2c241e, #141414); }
.redesign-slot__tag { position: absolute; bottom: .4rem; left: .45rem; color: var(--color-text-muted-dark); font-family: var(--font-sans); font-size: .5625rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.redesign-slot__label { color: var(--color-white); font-family: var(--font-sans); font-size: 1rem; font-weight: 700; }
.redesign-slot__note { color: var(--color-text-muted-dark); font-size: var(--text-small); }

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

@media (max-width: 64rem) {
    .compare-grid { grid-template-columns: 1fr; }
    .pricing-alt__grid { grid-template-columns: 1fr; }
    .keep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hero-stack__item--before { width: 68%; }
    .hero-stack__item--after { width: 76%; margin-left: 24%; }
}

@media (max-width: 50rem) {
    .signs { grid-template-columns: 1fr; }
    .keep-grid { grid-template-columns: 1fr; }
    .redesign-slots { grid-template-columns: 1fr; }
    .tier-summary--light { grid-template-columns: 1fr; }

    /* Stack before and after instead of overlaying them, and drop the slider. */
    .compare__viewport { display: grid; gap: var(--space-4); }
    .compare__side--after { position: static; clip-path: none; }
    .compare__divider, .compare__control { display: none; }
    .compare__tag--right { right: auto; left: .75rem; }
}

@media (max-width: 42rem) {
    .hero-stack__item--before { width: 82%; }
    .hero-stack__item--after { width: 88%; margin-left: 12%; margin-top: -14%; }
    .factors .button, .pricing-alt .button--accent { width: 100%; }
    .sign { padding-block: var(--space-4); }
}

/* ==========================================================================
   Hosting & Care page
   ========================================================================== */

/* --- Illustrative site-health panel ----------------------------------------
   Every status uses an icon AND a word, so nothing is conveyed by colour
   alone. No numbers or live data are shown anywhere in this component. */

.care-panel {
    overflow: hidden;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, #1c1c1c, #111);
    box-shadow: var(--shadow-deep);
}
.care-panel__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--color-border-dark);
}
.care-panel__title { color: var(--color-white); font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.care-panel__chip {
    padding: .25rem .5rem;
    border: 1px solid var(--color-border-dark);
    border-radius: 999px;
    color: var(--color-text-muted-dark);
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.care-panel__rows { display: grid; }
.care-panel__rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: .8rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.care-panel__label { color: var(--color-text-on-dark); font-size: .875rem; }
.care-panel__state { display: inline-flex; align-items: center; gap: .4rem; color: var(--color-white); font-family: var(--font-sans); font-size: .8125rem; font-weight: 700; }
.care-panel__state .icon { width: .9rem; height: .9rem; color: var(--color-orange); }
.care-panel__graph { display: flex; align-items: flex-end; gap: .3rem; height: 5rem; padding: 1rem 1.1rem; }
.care-panel__graph i { flex: 1; height: 62%; border-radius: 1px; background: linear-gradient(180deg, rgba(255, 101, 0, .85), rgba(255, 101, 0, .22)); }
.care-panel__graph i:nth-child(odd) { height: 52%; }
.care-panel__graph i:nth-child(3n) { height: 78%; }
.care-panel__graph i:nth-child(4n) { height: 40%; }
.care-panel__graph i:nth-child(5n) { height: 92%; }
.care-panel__note { margin-top: .75rem; color: var(--color-text-muted-dark); font-size: .75rem; text-align: center; }

/* --- Care plans -------------------------------------------------------------- */

.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: stretch; }
.plan {
    display: flex;
    flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.5rem);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    transition: border-color var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard);
}
.plan:hover, .plan:focus-within { border-color: var(--color-text); transform: translateY(-.3rem); box-shadow: var(--shadow-card); }
.plan__head h3 { font-size: clamp(1.35rem, 1.9vw, 1.6rem); }
.plan__price { display: flex; align-items: baseline; gap: .5rem; margin-block: var(--space-3) var(--space-4); }
.plan__price strong { font-family: var(--font-sans); font-size: clamp(2.4rem, 4vw, 3.25rem); line-height: 1; letter-spacing: -.04em; }
.plan__period { color: var(--color-text-muted); font-size: .9375rem; }
.plan__for { min-height: 3.5rem; margin-bottom: var(--space-5); color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }
.plan__label {
    margin-bottom: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.plan .tick-list { margin-bottom: var(--space-6); }
.plan__cta { margin-top: auto; }

/* --- Scope: what a plan does not cover ----------------------------------------- */

.exclusions {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: clamp(1.5rem, 2.5vw, 2rem);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}
.exclusions__intro h3 { margin-bottom: .5rem; font-size: 1.15rem; }
.exclusions__intro p { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }
.exclusions__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem clamp(1rem, 2vw, 2rem); }
.plans-note { max-width: 62ch; margin-top: clamp(1.5rem, 3vw, 2rem); color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* --- Support continuity (keep-item on a dark ground) ---------------------------- */

.keep-item--light h3 { color: var(--color-white); }
.keep-item--light p { color: var(--color-text-on-dark); }

/* --- Tick list inside a seo-grid on a LIGHT section ------------------------------ */

.seo-list--on-light li { border-bottom-color: var(--color-border); }

/* --- Content updates: minor vs larger --------------------------------------------- */

.updates-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
.updates-col { padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--color-border); background: var(--color-surface); }
.updates-col h3 { margin-bottom: .4rem; font-size: 1.25rem; }
.updates-col__note {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: var(--text-small);
    line-height: 1.55;
}

/* --- Who it's for ------------------------------------------------------------------ */

.audience-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.audience-copy { display: grid; gap: var(--space-4); justify-items: start; }
.audience-copy h2 { max-width: 18ch; }
.audience-note {
    max-width: 54ch;
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-orange);
    color: var(--color-text-secondary);
    font-size: var(--text-small);
    line-height: 1.6;
}
.audience-list { gap: var(--space-3); }
.audience-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.audience-list li:last-child { padding-bottom: 0; border-bottom: 0; }

/* --- Taking over an existing site ---------------------------------------------------- */

.takeover-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.takeover-copy h3 { margin-bottom: var(--space-3); color: var(--color-white); font-size: 1.25rem; }
.takeover-copy p { margin-bottom: var(--space-4); color: var(--color-text-on-dark); font-size: var(--text-small); line-height: 1.7; }
.takeover-note { padding-left: var(--space-4); border-left: 2px solid var(--color-orange); color: var(--color-text-muted-dark); }
.takeover-list { gap: var(--space-3); }
.takeover-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-dark); }
.takeover-list li:last-child { padding-bottom: 0; border-bottom: 0; }

/* --- Cross-sell with two service links ------------------------------------------------- */

.cross-sell__aside--links { gap: var(--space-3); }
.cross-sell__aside--links .button { width: 100%; justify-content: space-between; }

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

@media (max-width: 64rem) {
    .exclusions { grid-template-columns: 1fr; }
    .audience-grid { grid-template-columns: 1fr; gap: var(--space-7); }
    .takeover-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (max-width: 50rem) {
    .plan-grid { grid-template-columns: 1fr; }
    .plan__for { min-height: 0; }
    .updates-grid { grid-template-columns: 1fr; }
    .exclusions__list { grid-template-columns: 1fr; }
    .care-panel__graph { height: 4rem; }
}

@media (max-width: 42rem) {
    .care-panel__rows li { padding: .7rem .85rem; }
    .care-panel__bar { padding: .8rem .85rem; }
    .care-panel__label { font-size: .8125rem; }
    .cross-sell__aside--links { width: 100%; }
}

/* ==========================================================================
   Shared section heading
   --------------------------------------------------------------------------
   Used by every service page as the two-column heading block (title on the
   left, supporting copy / link / controls on the right). Mirrors the existing
   .pricing-heading / .process-heading pattern in layout.css.
   ========================================================================== */

.section-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, .5fr);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    margin-bottom: clamp(2.25rem, 4vw, 3.5rem);
}
.section-head > div:first-child h2 { margin-top: var(--space-4); }

@media (max-width: 56rem) {
    .section-head { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
}

/* ==========================================================================
   About page
   ========================================================================== */

/* --- Placeholder markers ---------------------------------------------------
   .to-supply / .to-supply-block flag content awaiting supplied copy or
   photography. Search "to-supply" in about/index.php to find every one. */

.to-supply { position: relative; }
.to-supply-block {
    width: 100%;
    margin-top: var(--space-2);
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .55);
}
.to-supply-block__label {
    margin-bottom: .5rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.to-supply-block p:last-child { color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }

/* --- Portrait placeholder ----------------------------------------------------
   Abstract silhouette, clearly labelled. Never fake lifestyle photography. */

.portrait-frame {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 1px dashed var(--color-border-dark);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, #1f1f1f, #121212);
}
.portrait-frame::before {
    content: "";
    position: absolute;
    top: 20%;
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}
.portrait-frame::after {
    content: "";
    position: absolute;
    bottom: -2%;
    width: 62%;
    height: 34%;
    border-radius: 46% 46% 0 0;
    background: rgba(255, 255, 255, .06);
}
.portrait-frame__label {
    position: relative;
    z-index: 2;
    padding: .35rem .7rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #cfcbc4;
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.portrait-frame--light { border-color: #bdb6aa; background: linear-gradient(160deg, #e7e2da, #d4cec4); }
.portrait-frame--light::before, .portrait-frame--light::after { background: rgba(17, 17, 17, .10); }
.portrait-frame--light .portrait-frame__label { background: rgba(255, 255, 255, .82); color: var(--color-text-muted); }

/* --- Hero composition ---------------------------------------------------------- */

.about-visual { position: relative; padding-bottom: 3.25rem; }
.about-visual__geo { position: absolute; z-index: 0; inset: 10% -4% 14% 46%; pointer-events: none; }
.about-visual__geo::before, .about-visual__geo::after { content: ""; position: absolute; top: 0; bottom: 0; width: 38%; transform: skewX(-18deg); }
.about-visual__geo::before { left: 4%; background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)); }
.about-visual__geo::after { left: 50%; background: linear-gradient(180deg, rgba(255, 101, 0, .5), rgba(255, 101, 0, .03)); }
.about-visual .portrait-frame { position: relative; z-index: 2; width: min(100%, 21rem); }
.about-visual__card {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    display: grid;
    gap: .2rem;
    padding: .9rem 1.1rem;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    background: rgba(20, 20, 20, .95);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .5);
}
.about-visual__card-title { color: var(--color-white); font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; }
.about-visual__card-meta { color: var(--color-text-muted-dark); font-size: .75rem; letter-spacing: .05em; }

/* --- Studio introduction --------------------------------------------------------- */

.intro-copy { display: grid; gap: var(--space-4); max-width: 64rem; }
.intro-copy p { max-width: 70ch; }
.intro-copy p:last-child { color: var(--color-text-secondary); line-height: 1.75; }

/* --- Credibility stats ------------------------------------------------------------- */

.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { display: grid; gap: var(--space-3); align-content: start; padding-top: var(--space-5); border-top: 2px solid var(--color-orange); }
.stat__value { color: var(--color-white); font-family: var(--font-sans); font-size: clamp(2.75rem, 5.5vw, 4.5rem); font-weight: 700; line-height: 1; letter-spacing: -.045em; }
.stat__label { max-width: 26ch; color: var(--color-text-on-dark); font-size: var(--text-small); line-height: 1.5; }

/* --- Founder ------------------------------------------------------------------------- */

.founder-grid { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.founder-copy { display: grid; gap: var(--space-4); justify-items: start; }
.founder-copy h2 { max-width: 14ch; }
.founder-copy p { max-width: 62ch; }
.founder-copy > p:last-of-type { color: var(--color-text-secondary); line-height: 1.75; }
.founder-detail { display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-2); }
.founder-detail > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.founder-detail dt { padding-top: .15rem; color: var(--color-text-muted); font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.founder-detail dd { margin: 0; color: var(--color-text-secondary); font-size: .9375rem; }

/* --- Design philosophy ------------------------------------------------------------------ */

.philosophy { display: grid; gap: var(--space-4); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.philosophy__statement { max-width: 22ch; font-size: clamp(2.1rem, 5vw, 4.25rem); line-height: 1; letter-spacing: -.04em; }
.philosophy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.philosophy__lead { max-width: 52ch; color: var(--color-text-secondary); font-size: clamp(1.05rem, 1.25vw, 1.2rem); line-height: 1.7; }
.philosophy-list { gap: var(--space-3); }
.philosophy-list li { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: .9375rem; }
.philosophy-list li:last-child { padding-bottom: 0; border-bottom: 0; }

/* --- Working with clients ------------------------------------------------------------------ */

.clients-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Services cross-link (About only: the left column carries a text link) ------------------- */

.page-about .cross-sell__inner > div .button { margin-top: var(--space-4); }

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

@media (max-width: 64rem) {
    .founder-grid { grid-template-columns: 1fr; gap: var(--space-7); }
    .founder-media { max-width: 22rem; }
    .philosophy-grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .clients-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 50rem) {
    .about-visual { padding-bottom: 0; }
    .about-visual .portrait-frame { width: min(100%, 18rem); }
    .about-visual__card { position: static; margin-top: var(--space-4); width: max-content; }
    .about-visual__geo { inset: 8% 0 20% 52%; }
}

@media (max-width: 42rem) {
    .stats-row { grid-template-columns: 1fr; gap: var(--space-5); }
    .stat { padding-top: var(--space-4); }
    .clients-grid { grid-template-columns: 1fr; }
    .founder-detail > div { grid-template-columns: 1fr; gap: .35rem; }
    .about-visual__card { width: 100%; }
}

/* ==========================================================================
   Contact / Start a project
   ========================================================================== */

.page-hero--compact { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 5vw, 4.5rem); }
.page-hero--compact .page-hero__inner h1 { max-width: 16ch; }

/* --- Two-column enquiry layout: the form dominates -------------------------- */

.enquiry-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .55fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.enquiry-heading { font-size: clamp(1.6rem, 2.4vw, 2.15rem); }
.enquiry-intro { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-small); }
.req { color: var(--color-accent-on-light); font-weight: 700; }

/* --- Fields ------------------------------------------------------------------ */

.enquiry-form { display: grid; gap: clamp(1.25rem, 2vw, 1.6rem); margin-top: clamp(1.5rem, 3vw, 2rem); }
.field { display: grid; gap: .4rem; align-content: start; }
.field label {
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.01em;
}
.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3rem;
    padding: .75rem .9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.field textarea { min-height: 10rem; resize: vertical; }
.field select {
    appearance: none;
    padding-right: 2.5rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 1.35rem, calc(100% - .8rem) 1.35rem;
    background-size: .35rem .35rem, .35rem .35rem;
    background-repeat: no-repeat;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--color-border-strong, #b9b2a6); }
.field input:focus, .field select:focus, .field textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(255, 101, 0, .18);
    outline: none;
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}
.field__hint { color: var(--color-text-muted); font-size: .8125rem; line-height: 1.5; }
.field__error { display: flex; gap: .4rem; color: var(--color-error); font-size: .8125rem; font-weight: 600; line-height: 1.5; }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--color-error); color: #fff; font-size: .6875rem; font-weight: 700; }
.field--error input, .field--error select, .field--error textarea { border-color: var(--color-error); }
.field__error--form { padding: .85rem 1rem; border: 1px solid var(--color-error); border-radius: var(--radius-sm); background: rgba(180, 35, 24, .06); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }

/* Honeypot: hidden from sight, from assistive tech and from tab order. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Error summary ------------------------------------------------------------ */

.form-errors {
    margin-top: var(--space-5);
    padding: clamp(1rem, 2vw, 1.35rem);
    border: 1px solid var(--color-error);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: rgba(180, 35, 24, .05);
}
.form-errors__title { color: var(--color-error); font-family: var(--font-sans); font-size: .9375rem; font-weight: 700; }
.form-errors ul { display: grid; gap: .35rem; margin-top: .6rem; list-style: disc; padding-left: 1.1rem; }
.form-errors li { color: var(--color-text-secondary); font-size: var(--text-small); }
.form-errors a { color: var(--color-text); }

/* --- Submit -------------------------------------------------------------------- */

.button--lg { min-height: 3.5rem; padding-inline: 1.75rem; font-size: .9375rem; }
.enquiry-submit { width: max-content; }
.enquiry-submit[aria-disabled="true"] { opacity: .6; pointer-events: none; }
.form-privacy { color: var(--color-text-muted); font-size: .8125rem; line-height: 1.6; }
.form-privacy a { color: var(--color-text); }

/* --- Success / error states ------------------------------------------------------ */

.form-state {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
    padding: clamp(1.75rem, 4vw, 3rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}
.form-state:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.form-state h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.form-state p { color: var(--color-text-secondary); line-height: 1.7; }
.form-state__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.form-state--success { border-top: 3px solid var(--color-accent); }
.form-state--error { border-top: 3px solid var(--color-error); }
.form-state__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--color-accent); color: #fff; }
.form-state__icon .icon { width: 1.5rem; height: 1.5rem; }

/* --- Aside ------------------------------------------------------------------------ */

.enquiry-aside { display: grid; gap: clamp(1rem, 2vw, 1.5rem); position: sticky; top: calc(var(--header-height) + 1.5rem); }
.aside-block { padding: clamp(1.25rem, 2vw, 1.6rem); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.aside-block h2 { font-size: 1.0625rem; letter-spacing: -.015em; }
.aside-block > p { margin-top: .6rem; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.65; }
.aside-block--accent { border-left: 3px solid var(--color-accent); background: var(--color-bg-alt); }

.next-steps { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.next-steps li { display: flex; gap: .75rem; }
.next-steps__num { flex: none; color: var(--color-accent-on-light); font-family: var(--font-sans); font-size: .75rem; font-weight: 700; letter-spacing: .1em; padding-top: .15rem; }
.next-steps h3 { font-size: .9375rem; letter-spacing: -.01em; }
.next-steps p { margin-top: .2rem; color: var(--color-text-muted); font-size: .8125rem; line-height: 1.55; }

.aside-email { font-family: var(--font-sans); font-weight: 700; }
.aside-links { display: grid; gap: .1rem; margin-top: var(--space-3); }
.aside-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding-block: .5rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard);
}
.aside-links li:last-child a { border-bottom: 0; }
.aside-links a:hover { color: var(--color-accent-hover); }
.aside-links .icon { width: .95rem; height: .95rem; }

/* --- Trust close -------------------------------------------------------------------- */

.trust-close__inner { display: grid; gap: var(--space-4); justify-items: start; max-width: 60rem; }
.trust-close h2 { max-width: 22ch; font-size: clamp(1.9rem, 3.4vw, 3rem); }

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

@media (max-width: 64rem) {
    .enquiry-grid { grid-template-columns: 1fr; }
    .enquiry-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .enquiry-aside .aside-block:first-child { grid-column: 1 / -1; }
    .next-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 50rem) {
    .enquiry-aside { grid-template-columns: 1fr; }
    .next-steps { grid-template-columns: 1fr; }
}

@media (max-width: 42rem) {
    /* Full-width controls, prominent submit, nothing side by side. */
    .field-row { grid-template-columns: 1fr; }
    .enquiry-submit { width: 100%; }
    .form-state__actions { flex-direction: column; align-items: stretch; width: 100%; }
    .form-state__actions .button { width: 100%; }
    .field input, .field select, .field textarea { font-size: 16px; } /* stops iOS zooming on focus */
}

/* ==========================================================================
   Work / Portfolio
   ========================================================================== */

/* --- Shared project frame ---------------------------------------------------
   Always 16:10 and always dimension-reserved, so nothing shifts as imagery
   loads. Holds either a real screenshot or the neutral interface mock. */

.work-frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-black);
}
.work-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform var(--duration-slow) var(--ease-standard); }
.work-frame__mock { position: absolute; inset: 0; display: block; }
.work-frame__mock .mock { font-size: 11px; }
.work-frame__tag {
    position: absolute;
    z-index: 3;
    bottom: .75rem;
    left: .75rem;
    padding: .28rem .6rem;
    border-radius: 999px;
    background: rgba(17, 17, 17, .9);
    color: #cfcbc4;
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --- Featured project ---------------------------------------------------------- */

.work-featured-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.work-featured { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.work-frame--featured { border-color: var(--color-border-strong, #c4bdb1); box-shadow: var(--shadow-card); }
.work-featured:hover .work-frame--featured img { transform: scale(1.02); }
.work-featured__body { display: grid; gap: var(--space-4); justify-items: start; }
.work-featured__body h2 { max-width: 16ch; font-size: clamp(1.9rem, 3.2vw, 2.9rem); }
.work-featured__summary { max-width: 46ch; color: var(--color-text-secondary); font-size: 1.0625rem; line-height: 1.7; }

/* --- Grid ------------------------------------------------------------------------
   Two columns with an editorial stagger on wide screens, so it reads as a
   portfolio rather than a uniform card wall. */

.work-grid-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3.5rem); }
.work-item { min-width: 0; }
.work-item__link { display: grid; gap: var(--space-5); text-decoration: none; color: inherit; }
.work-item__link--static { cursor: default; }
.work-item .work-frame { border-color: var(--color-border-dark); }
.work-item__link:hover .work-frame { border-color: #5a5a5a; }
.work-item__link:hover .work-frame img { transform: scale(1.03); }
.work-item__body { display: grid; gap: var(--space-3); justify-items: start; }
.work-item__title { font-family: var(--font-sans); font-size: clamp(1.25rem, 1.8vw, 1.6rem); font-weight: 700; letter-spacing: -.025em; color: var(--color-white); }
.work-item__summary { max-width: 46ch; color: var(--color-text-on-dark); font-size: var(--text-small); line-height: 1.7; }
.work-item__more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--color-border-dark);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.work-item__more .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease-standard); }
.work-item__link:hover .work-item__more { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.work-item__link:hover .work-item__more .icon { transform: translateX(.18rem); }
.work-item__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-sm); }

/* --- Metadata ----------------------------------------------------------------------- */

.work-meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.work-meta li {
    padding: .25rem .6rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.section--dark .work-meta li { border-color: var(--color-border-dark); color: var(--color-text-muted-dark); }

/* --- Reserved slots -------------------------------------------------------------------- */

.work-pending {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
}
.work-pending .icon { width: .95rem; height: .95rem; }
.section--dark .work-pending { color: var(--color-text-muted-dark); }
.work-item--reserved .work-frame, .work-featured--reserved .work-frame { border-style: dashed; }
.work-item--reserved .work-frame__mock, .work-featured--reserved .work-frame__mock { opacity: .55; }

/* --- Trust close -------------------------------------------------------------------------- */

.trust-work__inner { display: grid; gap: var(--space-4); justify-items: start; max-width: 62rem; }
.trust-work h2 { max-width: 20ch; font-size: clamp(1.9rem, 3.4vw, 3rem); }

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

@media (min-width: 64.0625rem) {
    /* Editorial stagger: every second card drops, breaking the uniform rows. */
    .work-grid > .work-item:nth-child(even) { margin-top: clamp(2.5rem, 5vw, 5rem); }
}

@media (max-width: 64rem) {
    .work-featured { grid-template-columns: 1fr; gap: var(--space-6); }
    .work-featured__body h2 { max-width: 22ch; }
    .work-grid { gap: clamp(1.75rem, 4vw, 2.5rem); }
}

@media (max-width: 50rem) {
    .work-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .work-frame__mock .mock { font-size: 10px; }
}

@media (max-width: 42rem) {
    .work-featured__body .button, .work-item__more { width: 100%; }
    .work-featured__body .button { justify-content: center; }
    .work-frame__mock .mock { font-size: 8px; }
}

/* ==========================================================================
   Insights — hub, article cards and the long-form article template
   ========================================================================== */

/* --- Editorial figure + branded placeholder ---------------------------------
   Every article visual reserves its ratio before anything loads, so neither
   the grid nor the article body can shift. When no image is supplied a
   branded placeholder is drawn from the two offset bars of the logo, rather
   than falling back to generic stock photography. */

.article-figure {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin: 0;
    background: var(--color-surface-dark);
}
.article-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-standard); }
.article-figure--hero { aspect-ratio: 16 / 9; margin-top: calc(-1 * clamp(2rem, 5vw, 4rem)); box-shadow: var(--shadow-card); }
.article-figure--inline { aspect-ratio: 16 / 9; margin-block: clamp(2rem, 4vw, 2.75rem); }

.article-figure__placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 120% at 78% 8%, rgba(255, 101, 0, .22), rgba(255, 101, 0, 0) 58%), var(--color-surface-dark);
}
.article-figure__marks { display: flex; gap: .5rem; opacity: .9; }
.article-figure__marks i {
    display: block;
    width: clamp(1.1rem, 2.6vw, 1.9rem);
    height: clamp(3rem, 7vw, 5.25rem);
    transform: skewX(-26deg);
}
.article-figure__marks i:first-child { background: var(--color-white); }
.article-figure__marks i:last-child { background: var(--color-orange); }
.article-figure__label {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .7rem .9rem;
    color: var(--color-text-muted-dark);
    font-family: var(--font-sans);
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-align: center;
    text-transform: uppercase;
}
.article-figure__tag {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 2;
    padding: .3rem .5rem;
    background: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-sans);
    font-size: .5625rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Featured article --------------------------------------------------------- */

.article-featured { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
.article-featured__media { display: block; text-decoration: none; }
.article-featured__body { display: grid; gap: var(--space-3); justify-items: start; }
.article-featured__body h2 { max-width: 16ch; font-size: clamp(1.75rem, 3.2vw, 2.9rem); }
.article-featured__body h2 a { color: inherit; text-decoration: none; }
.article-featured__body h2 a:hover { color: var(--color-accent-hover); }
.article-featured__excerpt { max-width: 46ch; color: var(--color-text-secondary); font-size: var(--text-body-lg); line-height: 1.55; }
.article-featured__body .button { margin-top: var(--space-2); }
.article-featured__media:hover .article-figure img { transform: scale(1.04); }
.article-featured--planned .article-figure { border: 1px dashed var(--color-border); }
.article-featured--planned .article-figure__placeholder { opacity: .62; }

/* --- Article grid: 3 / 2 / 1 columns -------------------------------------------- */

.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 3.5vw, 3.25rem) clamp(1.25rem, 2vw, 2rem); list-style: none; margin: 0; padding: 0; }
.article-card__link { display: grid; gap: var(--space-4); color: inherit; text-decoration: none; }
.article-card__link--static { cursor: default; }
.article-card__body { display: grid; gap: var(--space-2); justify-items: start; }
.article-card__category {
    color: var(--color-accent-on-light);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.section--dark .article-card__category { color: var(--color-orange); }
.article-card__title { font-family: var(--font-sans); font-size: clamp(1.15rem, 1.5vw, 1.45rem); font-weight: 700; line-height: 1.18; letter-spacing: -.025em; }
.article-card__excerpt { max-width: 44ch; color: var(--color-text-muted); font-size: var(--text-small); line-height: 1.6; }
.section--dark .article-card__excerpt { color: var(--color-text-on-dark); }
.article-card__meta, .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--color-text-muted); font-size: .75rem; }
.section--dark .article-card__meta { color: var(--color-text-muted-dark); }
.article-card__meta li, .article-meta li { display: flex; align-items: center; gap: .5rem; }
.article-card__meta li + li::before, .article-meta li + li::before { content: ""; width: .1875rem; height: .1875rem; border-radius: 50%; background: currentColor; opacity: .7; }
.article-card__more {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-sans);
    font-size: var(--text-small);
    font-weight: 700;
    transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.article-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease-standard); }
.section--dark .article-card__more { border-bottom-color: var(--color-border-dark); }
.article-card__link:hover .article-card__more { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.article-card__link:hover .article-card__more .icon { transform: translateX(.18rem); }
.article-card__link:hover .article-figure img { transform: scale(1.04); }
.article-card--planned .article-figure { border: 1px dashed var(--color-border-dark); }
.article-card--planned .article-figure__placeholder { opacity: .55; }

/* --- Article page: header ---------------------------------------------------------- */

.article-hero .page-hero__inner h1 { max-width: 22ch; font-size: clamp(1.95rem, 3.6vw, 3.25rem); line-height: 1.04; }
.article-hero .breadcrumb li:last-child { max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.article-meta { margin-top: var(--space-3); color: var(--color-text-muted-dark); }
.article-meta time { color: inherit; }
.article-draft-note { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--space-3); color: var(--color-text-muted-dark); font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; }
.article-draft-note .icon { width: .95rem; height: .95rem; }

/* --- Article page: layout + table of contents ---------------------------------------- */

.article-section { padding-block: clamp(2.5rem, 5vw, 4rem) var(--section-standard); }
.article-layout { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 38rem); gap: clamp(2rem, 5vw, 5rem); justify-content: center; align-items: start; }
.article-layout--solo { grid-template-columns: minmax(0, 38rem); }

.article-toc { position: sticky; top: calc(var(--header-height) + 1.5rem); }
.article-toc__wrap { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
.article-toc summary {
    color: var(--color-text-muted);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    list-style: none;
    text-transform: uppercase;
}
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc ol { display: grid; gap: .6rem; margin-top: var(--space-4); padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { counter-increment: toc; }
.article-toc a { display: flex; gap: .6rem; color: var(--color-text-secondary); font-size: .8125rem; line-height: 1.45; text-decoration: none; }
.article-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--color-text-muted); font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; }
.article-toc a:hover { color: var(--color-accent-hover); }

/* --- Article page: long-form prose ------------------------------------------------------
   The children inherit this font size, so the whole column shares one measure.

   CALIBRATION: 1ch is the width of the "0" glyph, which in Inter is narrower
   than the average character, so a ch value overstates the real measure --
   68ch measured 79 characters per line. 58ch lands at ~67, inside the 60-72
   band. Re-measure before changing it; do not "round it up" to 68ch. */

.article-prose {
    max-width: 58ch;
    color: var(--color-text);
    font-size: clamp(1.0625rem, .98rem + .3vw, 1.1875rem);
    line-height: 1.75;
}
.article-prose > * { max-width: none; }
.article-prose > * + * { margin-top: 1.35em; }
.article-prose .article-lead { color: var(--color-text-secondary); font-size: 1.15em; line-height: 1.6; }

.article-prose h2 {
    margin-top: 2.2em;
    font-size: clamp(1.6rem, 2.6vw, 2.15rem);
    line-height: 1.1;
    scroll-margin-top: calc(var(--header-height) + 1.5rem);
}
.article-prose h3 { margin-top: 1.9em; font-size: clamp(1.2rem, 1.7vw, 1.4rem); line-height: 1.2; scroll-margin-top: calc(var(--header-height) + 1.5rem); }
.article-prose h2 + *, .article-prose h3 + * { margin-top: .7em; }

.article-prose a { color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-border); transition: color var(--duration-fast) var(--ease-standard), text-decoration-color var(--duration-fast) var(--ease-standard); }
.article-prose a:hover { color: var(--color-accent-hover); text-decoration-color: currentColor; }
.article-prose strong { font-weight: 700; }

.article-prose ul, .article-prose ol { display: grid; gap: .55em; padding-left: 1.35em; }
.article-prose li { line-height: 1.7; }
.article-prose li::marker { color: var(--color-accent-on-light); font-weight: 700; }
.article-prose ul > li::marker { font-size: 1.1em; }

.article-prose blockquote {
    margin-inline: 0;
    padding: .25em 0 .25em 1.35em;
    border-left: .1875rem solid var(--color-accent);
    color: var(--color-text-secondary);
    font-size: 1.08em;
    line-height: 1.6;
}
.article-prose blockquote p { margin: 0; }
.article-prose blockquote > * + * { margin-top: .8em; }

.article-prose code {
    padding: .12em .35em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
}
.article-prose pre { overflow-x: auto; padding: 1.1em 1.25em; border-radius: var(--radius-sm); background: var(--color-surface-dark); color: var(--color-text-inverse); font-size: .85em; line-height: 1.6; }
.article-prose pre code { padding: 0; background: none; color: inherit; }

.callout { padding: clamp(1.1rem, 2.4vw, 1.5rem); border-left: .1875rem solid var(--color-accent); background: var(--color-bg-alt); font-size: .95em; line-height: 1.65; }
.callout > * + * { margin-top: .7em; }
.callout p { margin: 0; }

/* Tables scroll inside their own container: the page body never scrolls sideways. */
.article-table { overflow-x: auto; }
.article-table table { width: 100%; border-collapse: collapse; font-size: .92em; }
.article-table caption { margin-bottom: .7em; color: var(--color-text-muted); font-size: .85em; text-align: left; }
.article-table th, .article-table td { padding: .7em .85em; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.article-table thead th { border-bottom-color: var(--color-text); font-family: var(--font-sans); font-size: .82em; letter-spacing: .04em; text-transform: uppercase; }
.article-table tbody th { font-weight: 700; }
.article-table tbody tr:last-child th, .article-table tbody tr:last-child td { border-bottom: 0; }

.article-prose figcaption { margin-top: .75em; color: var(--color-text-muted); font-size: .82em; line-height: 1.55; }

/* --- Article page: contextual CTA, author ------------------------------------------------ */

.article-cta {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    margin-block: clamp(2.25rem, 5vw, 3.25rem);
    padding: clamp(1.4rem, 3vw, 1.9rem);
    border: 1px solid var(--color-border);
    border-left: .1875rem solid var(--color-accent);
    background: var(--color-surface);
}
.article-cta__question { font-family: var(--font-sans); font-size: 1.12em; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
.article-cta__body { color: var(--color-text-muted); font-size: .88em; line-height: 1.6; }
.article-cta .button { margin-top: var(--space-1); font-size: .875rem; }

.article-author { display: grid; gap: .15rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.article-author__label { color: var(--color-text-muted); font-family: var(--font-sans); font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.article-author__name { font-family: var(--font-sans); font-size: 1.05em; font-weight: 700; letter-spacing: -.02em; }
.article-author__org { color: var(--color-text-muted); font-size: .875rem; }

/* --- Related articles ---------------------------------------------------------------------- */

.related-section .article-grid { grid-template-columns: repeat(3, 1fr); }
.related-section .article-card__title { font-size: clamp(1.05rem, 1.3vw, 1.25rem); }

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

@media (max-width: 64rem) {
    .article-featured { grid-template-columns: 1fr; gap: var(--space-6); }
    .article-featured__body h2 { max-width: 22ch; }
    .article-grid, .related-section .article-grid { grid-template-columns: repeat(2, 1fr); }

    /* The rail becomes a collapsible block above the prose — no sticky, no JS. */
    .article-layout, .article-layout--solo { grid-template-columns: minmax(0, 38rem); }
    .article-toc { position: static; }
    .article-toc__wrap { border: 1px solid var(--color-border); padding: var(--space-4); }
    .article-toc summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
    .article-toc summary::after { content: ""; width: .5rem; height: .5rem; border-right: .125rem solid currentColor; border-bottom: .125rem solid currentColor; transform: rotate(45deg) translate(-.1rem, -.1rem); transition: transform var(--duration-fast) var(--ease-standard); }
    .article-toc__wrap[open] summary::after { transform: rotate(-135deg) translate(-.15rem, -.15rem); }
    .article-figure--hero { margin-top: calc(-1 * clamp(1.5rem, 4vw, 2.5rem)); }
}

@media (max-width: 50rem) {
    .article-figure--hero { aspect-ratio: 3 / 2; }
}

@media (max-width: 42rem) {
    /* Single column only below tablet — 768px keeps two. */
    .article-grid, .related-section .article-grid { grid-template-columns: 1fr; gap: clamp(2.25rem, 6vw, 3rem); }
    .article-featured__body .button, .article-card__more { width: 100%; }
    .article-featured__body .button { justify-content: center; }
    .article-card__more { justify-content: space-between; }
    .article-hero .breadcrumb li:last-child { max-width: 16ch; }
    .article-prose { font-size: 1.0625rem; line-height: 1.7; }
    .article-cta { padding: var(--space-5) var(--space-4); }
}

/* ==========================================================================
   Insights — editorial components
   ==========================================================================
   Additive: new class names, plus a small number of overrides scoped to
   .article-prose or .article-hero, so nothing here reaches the home page or
   the service pages.

   Two rules held throughout:

   1. Colour never carries meaning alone. Every callout also has an icon and a
      written label, so the type is legible in greyscale and to a screen
      reader. The semantic colours live in tokens.css and are AA on the ground
      they sit on.
   2. Anything driven by JavaScript degrades to invisible, not to broken. The
      progress bar sits at zero width and the copy-link button stays hidden
      until a script takes over.

   SPECIFICITY NOTE: .article-prose > * + * and .article-prose ul are more
   specific than a bare component class, so every outer margin and list reset
   below is scoped through .article-prose deliberately. Do not shorten those
   selectors — the component loses its spacing if you do.
   ========================================================================== */

/* --- Reading progress ----------------------------------------------------- */

.article-progress {
    position: fixed;
    z-index: 98; /* under the header (100) and the mobile panel (99) */
    top: var(--header-height);
    right: 0;
    left: 0;
    height: .1875rem;
    pointer-events: none;
}
.article-progress__bar {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-orange);
    transform: scaleX(var(--progress, 0));
    transform-origin: 0 50%;
}
@media (prefers-reduced-motion: no-preference) {
    .article-progress__bar { transition: transform 90ms linear; }
}

/* --- Article meta row: icons replace the bullet separators ---------------- */

.article-hero .article-meta { gap: .4rem 1.35rem; }
.article-hero .article-meta li { gap: .45rem; }
.article-hero .article-meta li + li::before { display: none; }
.article-hero .article-meta .icon { width: .9rem; height: .9rem; flex: none; color: var(--color-orange); }

/* --- Table of contents: current section ----------------------------------- */

.article-toc a.is-active { color: var(--color-text); font-weight: 600; }
.article-toc a.is-active::before { color: var(--color-accent-on-light); }

/* --- Quick answer ---------------------------------------------------------
   The direct answer, before the reader has to scroll. Dark, so it reads as a
   panel rather than as more prose. */

.article-prose .quick-answer { margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.quick-answer {
    padding: clamp(1.4rem, 3vw, 2rem);
    border-radius: var(--radius-md);
    background: var(--color-surface-dark);
    color: var(--color-text-inverse);
}
.quick-answer__label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: var(--space-3);
    color: var(--color-orange);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.quick-answer__label .icon { width: 1rem; height: 1rem; }
.quick-answer__body { font-size: .98em; line-height: 1.65; }
.quick-answer__body > * + * { margin-top: .8em; }
.quick-answer__body strong { color: var(--color-white); }
.article-prose .quick-answer__body a { color: var(--color-white); text-decoration-color: rgba(255, 255, 255, .45); }
.article-prose .quick-answer__body a:hover { color: var(--color-orange); text-decoration-color: currentColor; }
/* .article-prose code is a dark glyph on a light chip, which disappears on
   this panel. Invert it rather than leaving invisible text. */
.article-prose .quick-answer code { background: rgba(255, 255, 255, .14); color: var(--color-white); }

/* --- Key takeaways -------------------------------------------------------- */

.article-prose .key-takeaways { margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.key-takeaways {
    padding: clamp(1.4rem, 3vw, 1.9rem);
    border: 1px solid var(--color-border);
    border-top: .1875rem solid var(--color-accent);
    background: var(--color-surface);
}
.key-takeaways__title {
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.key-takeaways__list { display: grid; gap: .85em; }
.key-takeaways__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .7rem;
    align-items: start;
    font-size: .95em;
    line-height: 1.6;
}
.key-takeaways__mark {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .18em;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-white);
}
.key-takeaways__mark .icon { width: .7rem; height: .7rem; stroke-width: 3; }

/* --- Callouts: tip, watch out, common mistake, note ------------------------ */

.article-prose .callout { margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.callout--tip { border-left-color: var(--color-tip); }
.callout--warning { border-left-color: var(--color-warning); }
.callout--mistake { border-left-color: var(--color-mistake); }
.callout--info { border-left-color: var(--color-info); }

.callout__head { display: flex; align-items: center; gap: .5rem; }
.callout--tip .callout__head { color: var(--color-tip); }
.callout--warning .callout__head { color: var(--color-warning); }
.callout--mistake .callout__head { color: var(--color-mistake); }
.callout--info .callout__head { color: var(--color-info); }

.callout__icon { display: inline-flex; }
.callout__icon .icon { width: 1.05rem; height: 1.05rem; }
.callout__label {
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.callout__title {
    margin-top: .5em;
    font-family: var(--font-sans);
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}
/* .callout p sets margin 0 and is more specific than a lone class, hence the
   type selectors here. */
.callout__body p + p, .callout__body ul, .callout__body ol { margin-top: .7em; }

/* --- Pull quote -----------------------------------------------------------
   Breaks out of the measure slightly at wide viewports and clamps back to
   flush on small ones, so it never pushes the page into a sideways scroll. */

.article-prose .pull-quote {
    margin-block: clamp(2.25rem, 5vw, 3.25rem);
    margin-inline: calc(-1 * clamp(0rem, 2vw, 2.5rem));
}
.pull-quote {
    padding-block: clamp(1.5rem, 3vw, 2rem);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.pull-quote__mark { display: block; color: var(--color-accent); }
.pull-quote__mark .icon { width: 1.6rem; height: 1.6rem; }
.article-prose .pull-quote blockquote {
    margin: .55rem 0 0;
    padding: 0;
    border: 0;
    color: var(--color-text);
}
.article-prose .pull-quote blockquote p {
    font-family: var(--font-sans);
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.03em;
    text-wrap: balance;
}
.article-prose .pull-quote figcaption {
    margin-top: .9rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Checklist ------------------------------------------------------------ */

.article-prose .checklist { margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.checklist {
    padding: clamp(1.4rem, 3vw, 1.9rem);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}
.checklist__title {
    margin-bottom: var(--space-4);
    font-family: var(--font-sans);
    font-size: 1.02em;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
}
.checklist__list { display: grid; gap: .7em; }
.checklist__list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    font-size: .95em;
    line-height: 1.55;
}
.checklist__tick { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; margin-top: .22em; color: var(--color-accent-on-light); }
.checklist__tick .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }

/* Component lists are not prose lists. .article-prose ul sets display, gap and
   padding at a higher specificity than a lone class, so the reset and every
   layout property a component list needs has to be restated here — including
   the ones that look like they are already set on the component itself. */
.article-prose .key-takeaways__list,
.article-prose .checklist__list,
.article-prose .article-share__list {
    padding-left: 0;
    list-style: none;
}
.article-prose .key-takeaways__list { display: grid; gap: .85em; }
.article-prose .checklist__list { display: grid; gap: .7em; }
.article-prose .article-share__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- Captioned inline figure ----------------------------------------------
   .article-figure combines aspect-ratio, overflow:hidden and absolutely
   positioned media. That is right for the hero and the cards, but it means a
   <figcaption> placed inside one is laid out underneath the media and clipped
   away — the caption renders and is then invisible.

   A captioned figure therefore keeps the ratio on an inner frame and puts the
   caption outside it. .article-figure--inline is still fine for an inline
   image with no caption. */

.article-prose .article-illustration { margin-block: clamp(2rem, 4vw, 2.75rem); }
.article-illustration__frame {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-dark);
}
.article-illustration__frame img { width: 100%; height: 100%; object-fit: cover; }

/* A graphic that has not been drawn yet, which says so on screen: a
   placeholder and finished artwork must never look alike. */
.article-illustration--planned .article-illustration__frame { border: 1px dashed var(--color-border); }
.article-illustration--planned .article-figure__placeholder { padding: 1.5rem 1.5rem 2.75rem; }
.article-figure__brief {
    max-width: 28ch;
    margin-top: .5rem;
    color: var(--color-text-muted-dark);
    font-size: .75rem;
    line-height: 1.45;
    text-align: center;
}
.article-figure__note {
    display: block;
    margin-top: .35em;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .95em;
    font-weight: 700;
}

/* --- FAQ inside an article ------------------------------------------------ */

.article-prose .article-faqs { margin-block: clamp(1.75rem, 4vw, 2.5rem); }
.article-faqs .faq-item__q { font-size: 1em; }
.article-faqs .faq-item__a p { max-width: none; font-size: .95em; }

/* --- Share ---------------------------------------------------------------- */

.article-share {
    display: grid;
    gap: var(--space-3);
    justify-items: start;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
}
.article-share__label {
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.article-share__list { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.article-prose .article-share__link {
    display: grid;
    place-items: center;
    width: 2.75rem; /* 44px, the minimum comfortable touch target */
    height: 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard),
                border-color var(--duration-fast) var(--ease-standard);
}
.article-prose .article-share__link:hover { color: var(--color-accent-hover); border-color: var(--color-accent); }
.article-share__link .icon { width: 1.15rem; height: 1.15rem; }
.article-share__status { min-height: 1.2rem; color: var(--color-accent-on-light); font-size: .8125rem; }

/* --- Previous / next ------------------------------------------------------ */

.article-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
    width: min(100% - (var(--gutter) * 2), 58rem);
    padding-top: clamp(2rem, 4vw, 3rem);
}
.article-nav__link {
    display: grid;
    gap: var(--space-2);
    padding: clamp(1.1rem, 2.4vw, 1.5rem);
    border: 1px solid var(--color-border);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-standard);
}
.article-nav__link:hover { border-color: var(--color-accent); }
/* A lone next link holds the right-hand column, so the pair never reflows. */
.article-nav__link--next { grid-column: 2; text-align: right; }
.article-nav__dir {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.article-nav__link--next .article-nav__dir { justify-content: flex-end; }
.article-nav__dir .icon { width: .9rem; height: .9rem; }
.article-nav__title {
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.article-nav__link:hover .article-nav__title { color: var(--color-accent-hover); }

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

@media (max-width: 42rem) {
    .article-nav { grid-template-columns: 1fr; }
    .article-nav__link--next { grid-column: 1; text-align: left; }
    .article-nav__link--next .article-nav__dir { justify-content: flex-start; }
    .article-prose .pull-quote blockquote p { font-size: 1.3rem; }
    .quick-answer { padding: var(--space-5) var(--space-4); }
}