/*===================================================================================*/
/*	BRAND COLORS (social icon hover colors; change them here only)
/*===================================================================================*/

:root {
    --brand-facebook: #0866FF;
    --brand-x: #000000;
    --brand-linkedin: #0A66C2; /* https://brand.linkedin.com/visual-identity/color-palettes */
    --brand-github: #CCCCCC; /* https://brandcolors.net/ */
    --brand-instagram: #E13063; /* https://brandcolors.net/ */
    --brand-navbar-top: #283645;
    --brand-navbar: #2F4052;
    --brand-navbar-rgb: 47, 64, 82; /* --brand-navbar as R, G, B, for rgba() with alpha */

    /* Site palette. Light mode is the default; dark mode values follow below. Every text pair meets 4.5:1. */
    --color-page: #ffffff;
    --color-surface: #f4f8f9;
    --color-text: #0b1420;
    --color-muted: #2F4052;
    --color-accent: #357883;
    --color-accent-hover: #2a6670;
    --color-on-accent: #ffffff;
    --color-border: rgba(47, 64, 82, 0.18);
    --color-border-strong: rgba(47, 64, 82, 0.55);

    /* Gradient text: both ends pass 4.5:1 on the page colour. The accent sits between them. */
    --grad-start: #2F4052;
    --grad-end: #357883;

    /* Navbar: a light frosted panel in light mode */
    --nav-bg: rgba(255, 255, 255, 0.55);
    --nav-text: #2F4052;
    --nav-border: rgba(47, 64, 82, 0.14);
    --nav-button-bg: #2F4052;
    --nav-button-text: #ffffff;
    --nav-button-hover: #1f2b38;
    --nav-control-border: rgba(47, 64, 82, 0.35);

    /* Background grid and ambient blobs */
    --grid-minor: rgba(47, 64, 82, 0.05);
    --grid-major: rgba(47, 64, 82, 0.10);
    --grid-minor-size: 24px;
    --grid-major-size: 120px;
    --blob-a: rgba(53, 120, 131, 0.16);
    --blob-b: rgba(47, 64, 82, 0.10);
    --blob-c: rgba(53, 120, 131, 0.10);

    --font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius: 6px;
    /* Half the gap between two sections. The sections, hero, ticker and footer all use it, so every gap matches. */
    --section-space: clamp(2rem, 3.5vw, 3rem);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-page: #0b1420;
        --color-surface: #14263a;
        --color-text: #eef5f7;
        --color-muted: #bccdd5;
        --color-accent: #71cdde;
        --color-accent-hover: #9ddde9;
        --color-on-accent: #0b1420;
        --color-border: rgba(180, 225, 225, 0.16);
        --color-border-strong: rgba(188, 205, 213, 0.6);
        --grad-start: #bccdd5;
        --grad-end: #71cdde;
        --nav-bg: rgba(var(--brand-navbar-rgb), 0.6);
        --nav-text: #eef5f7;
        --nav-border: rgba(255, 255, 255, 0.08);
        --nav-button-bg: #eef5f7;
        --nav-button-text: #2F4052;
        --nav-button-hover: #ffffff;
        --nav-control-border: rgba(255, 255, 255, 0.3);
        --grid-minor: rgba(180, 225, 225, 0.06);
        --grid-major: rgba(180, 225, 225, 0.12);
        --blob-a: rgba(113, 205, 222, 0.22);
        --blob-b: rgba(71, 160, 175, 0.18);
        --blob-c: rgba(47, 64, 82, 0.35);
    }
}

:root[data-theme="dark"] {
    --color-page: #0b1420;
    --grad-start: #bccdd5;
    --grad-end: #71cdde;
    --color-surface: #14263a;
    --color-text: #eef5f7;
    --color-muted: #bccdd5;
    --color-accent: #71cdde;
    --color-accent-hover: #9ddde9;
    --color-on-accent: #0b1420;
    --color-border: rgba(180, 225, 225, 0.16);
    --color-border-strong: rgba(188, 205, 213, 0.6);
    --nav-bg: rgba(var(--brand-navbar-rgb), 0.6);
    --nav-text: #eef5f7;
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-button-bg: #eef5f7;
    --nav-button-text: #2F4052;
    --nav-button-hover: #ffffff;
    --nav-control-border: rgba(255, 255, 255, 0.3);
    --grid-minor: rgba(180, 225, 225, 0.06);
    --grid-major: rgba(180, 225, 225, 0.12);
    --blob-a: rgba(113, 205, 222, 0.22);
    --blob-b: rgba(71, 160, 175, 0.18);
    --blob-c: rgba(47, 64, 82, 0.35);
}

/*===================================================================================*/
/*	FONTS (IBM Plex, self-hosted, SIL Open Font License; see vendor/fonts/)
/*===================================================================================*/

@font-face {
    font-family: 'IBM Plex Sans';
    src: url("../vendor/fonts/IBMPlexSans-Regular.5aaadb685d3c.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url("../vendor/fonts/IBMPlexSans-SemiBold.51d76d33ef85.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Sans';
    src: url("../vendor/fonts/IBMPlexSans-Italic.2cf7d9cd7a9e.woff2") format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'IBM Plex Mono';
    src: url("../vendor/fonts/IBMPlexMono-Regular.b51685c998a0.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/*===================================================================================*/
/*	BASE
/*===================================================================================*/

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-page);
    background-image:
        linear-gradient(to right, var(--grid-major) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-major) 1px, transparent 1px),
        linear-gradient(to right, var(--grid-minor) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-minor) 1px, transparent 1px);
    background-size:
        var(--grid-major-size) var(--grid-major-size),
        var(--grid-major-size) var(--grid-major-size),
        var(--grid-minor-size) var(--grid-minor-size),
        var(--grid-minor-size) var(--grid-minor-size);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Ambient light: three large blurred blobs, fixed behind the page on every page (design 16's ambient field).
   They are soft radial gradients, so no CSS blur filter is needed. They drift slowly with transform only. */
.ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
}

.blob-a {
    width: 52vmax;
    height: 52vmax;
    left: -14vmax;
    top: -18vmax;
    background: radial-gradient(circle, var(--blob-a), transparent 65%);
}

.blob-b {
    width: 46vmax;
    height: 46vmax;
    right: -16vmax;
    top: 18vh;
    background: radial-gradient(circle, var(--blob-b), transparent 65%);
}

.blob-c {
    width: 40vmax;
    height: 40vmax;
    left: 20vw;
    bottom: -20vmax;
    background: radial-gradient(circle, var(--blob-c), transparent 70%);
}

@media (prefers-reduced-motion: no-preference) {
    .blob {
        animation: blob-drift 26s ease-in-out infinite alternate;
    }

    .blob-b {
        animation-duration: 32s;
    }

    .blob-c {
        animation-duration: 38s;
    }
}

@keyframes blob-drift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        transform: translate3d(4vw, 3vh, 0) scale(1.08);
    }
}

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

h1,
h2,
h3 {
    margin: 0 0 0.5em;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);
}

h2 {
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
}

h3 {
    font-size: 1.25rem;
}

p {
    margin: 0 0 1em;
}

main p {
    max-width: 68ch;
}

a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
}

a:hover {
    color: var(--color-text);
}

:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
}

/* Stops the page scrolling behind the open phone menu. */
html.menu-open {
    overflow: hidden;
}

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 300;
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: var(--color-on-accent);
    border-radius: var(--radius);
    text-decoration: none;
}

.skip-link:focus {
    top: 1rem;
}

.container {
    width: min(1200px, calc(100% - 2rem));
    margin-inline: auto;
}

main {
    display: block;
    padding-top: 4.5rem;
}


/*===================================================================================*/
/*	ICONS (inline SVG partials in templates/website/icons/)
/*===================================================================================*/

.icon {
    display: block;
    width: 1.25em;
    height: 1.25em;
    flex: none;
}

/*===================================================================================*/
/*	BUTTONS
/*===================================================================================*/

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1.25rem;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font: 600 1rem/1.2 var(--font-sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
}

.button--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.button--ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-text);
    color: var(--color-text);
}

/*===================================================================================*/
/*	NAVBAR (fixed, translucent, shorter once the page scrolls)
/*===================================================================================*/

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--nav-bg);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    border-bottom: 1px solid var(--nav-border);
    color: var(--nav-text);
}

.site-header :focus-visible {
    outline-color: var(--nav-text);
}

.site-header__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.5rem;
    transition: min-height 0.25s ease;
}

.site-header.is-scrolled .site-header__bar {
    min-height: 3.5rem;
}

.site-header__logo {
    display: block;
    line-height: 0;
}

.site-header__logo img {
    display: block;
    height: 2.97rem;
    width: auto;
    transition: height 0.25s ease;
}

.site-header.is-scrolled .site-header__logo img {
    height: 2.31rem;
}

/* Two logo files: white for the dark navbar, navy for the light navbar. Only one is shown. */
.site-header__logo .logo-light {
    display: none;
}

:root[data-theme="light"] .site-header__logo .logo-dark-bg {
    display: none;
}

:root[data-theme="light"] .site-header__logo .logo-light {
    display: block;
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .site-header__logo .logo-dark-bg {
        display: none;
    }

    :root:not([data-theme="dark"]) .site-header__logo .logo-light {
        display: block;
    }
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-nav ul {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    color: var(--nav-text);
    text-decoration: none;
    padding: 0.5rem 0;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.2s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--nav-text);
    background-size: 100% 1px;
}

.site-header .button--book {
    min-height: 40px;
    padding: 0.5rem 1rem;
    background: var(--nav-button-bg);
    border-color: var(--nav-button-bg);
    color: var(--nav-button-text);
}

.site-header .button--book:hover {
    background: var(--nav-button-hover);
    border-color: var(--nav-button-hover);
    color: var(--nav-button-text);
}

/* Theme toggle: a text-free icon button with a visually hidden name. aria-pressed carries the state. */
.theme-toggle,
.menu-button,
.menu-panel__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--nav-control-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--nav-text);
    cursor: pointer;
}

.theme-toggle[hidden] {
    display: none;
}

/* aria-pressed="true" means dark mode is on, so the button shows the sun, which switches to light. */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle[aria-pressed="true"] .icon-sun {
    display: block;
}

.theme-toggle[aria-pressed="true"] .icon-moon {
    display: none;
}

.menu-button {
    display: none;
}

/* Full-screen phone menu. It is a sibling of the header, not a child, because the header's backdrop filter
   would otherwise become the containing block for the fixed panel. */
.menu-panel[hidden] {
    display: none;
}

.menu-panel {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding: 1rem 1rem 2rem;
    overflow-y: auto;
    background: var(--color-page);
    color: var(--color-text);
}

.menu-panel__top {
    display: flex;
    justify-content: flex-end;
}

.menu-panel__close {
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.menu-panel__links {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}

.menu-panel__links li {
    border-bottom: 1px solid var(--color-border);
}

.menu-panel__links a {
    display: block;
    padding: 1rem 0;
    color: var(--color-text);
    font-size: 1.5rem;
    font-weight: 600;
    text-decoration: none;
}

.menu-panel .button {
    width: 100%;
}

@media (max-width: 767px) {
    .site-nav {
        display: none;
    }

    .site-header .button--book {
        display: none;
    }

    .menu-button {
        display: inline-flex;
    }
}

@media (min-width: 768px) {
    .menu-panel {
        display: none !important;
    }
}

/*===================================================================================*/
/*	FOOTER (one row on desktop, stacked on phones)
/*===================================================================================*/

.site-footer {
    margin-top: var(--section-space);
    /* Sized so the chat launcher (16px up from the bottom, about 81px tall) is vertically centred in the footer
       when the page is scrolled to the bottom. Desktop row: 1px border + 20px top + 44px row + 56px bottom = 121px. */
    padding: 1.25rem 0 56px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.95rem;
}

.site-footer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-footer__left {
    margin: 0;
}

/* Privacy and the back-to-top button, flush right. */
.site-footer__right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-left: auto;
}

.site-footer a {
    color: var(--color-muted);
}

.site-footer a:hover {
    color: var(--color-text);
}

.back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    cursor: pointer;
}

.back-to-top:hover {
    background: var(--color-page);
}

@media (max-width: 767px) {
    .site-footer__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .back-to-top {
        align-self: flex-end;
    }
}

/*===================================================================================*/
/*	PRIVACY PAGE
/*===================================================================================*/

.privacy {
    padding: var(--section-space) 0;
    max-width: min(68ch, calc(100% - 2rem));
}

.privacy__back {
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.privacy__date {
    margin-bottom: 2rem;
    color: var(--color-muted);
}

.privacy h2 {
    margin-top: 2.5rem;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

.privacy ul {
    padding-left: 1.25rem;
}

.privacy li {
    margin-bottom: 0.5rem;
}

/*===================================================================================*/
/*	MOTION
/*===================================================================================*/

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/*===================================================================================*/
/*	HOME PAGE SECTIONS
/*===================================================================================*/

/* Shared section pieces. Eyebrows are sentence case, in the accent colour. */
.section {
    padding: var(--section-space) 0;
}

.section-head {
    max-width: 46rem;
    margin-bottom: 2.5rem;
}

.section-head > p:last-child {
    margin-bottom: 0;
}

.eyebrow {
    margin: 0 0 0.75rem;
    color: var(--color-accent);
    font-weight: 600;
    font-size: 1rem;
}

.mono {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-muted);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 1.5rem;
}

.card h3,
.card h4 {
    margin-bottom: 0.5rem;
}

.plain-list {
    margin: 0;
    padding-left: 1.25rem;
}

.cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Hero */
.hero {
    padding: clamp(3rem, 6vw, 5rem) 0 var(--section-space);
}

.hero__grid {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

.hero__copy h1 {
    max-width: 16ch;
}

/* The gradient phrase in the hero always starts its own line. */
.hero__copy h1 .text-gradient {
    display: block;
}

/* Gradient text, as on design 16's "same three jobs." The text is filled with a gradient instead of a colour. */
.text-gradient {
    background: linear-gradient(95deg, var(--grad-start) 0%, var(--grad-end) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .text-gradient {
        color: var(--color-accent);
    }
}

.lede {
    max-width: 36rem;
    font-size: 1.2rem;
    color: var(--color-muted);
}

@media (min-width: 768px) {
    .hero__grid {
        grid-template-columns: 1.1fr 1fr;
    }
}

/* Ticker: the list is written twice, so the loop has no gap. Hover pauses it. */
.ticker {
    margin: var(--section-space) 0;
    overflow: hidden;
    border-block: 1px solid var(--color-border);
    background: var(--color-surface);
    padding: 1rem 0;
}

.ticker .visually-hidden {
    position: absolute;
}

.ticker__track {
    display: flex;
    width: max-content;
    /* The duration is set by site.js from the list's width, so the speed stays the same whatever the number of names. */
    animation: ticker-scroll var(--ticker-duration, 120s) linear infinite;
}

.ticker:hover .ticker__track {
    animation-play-state: paused;
}

.ticker__list {
    display: flex;
    flex: none;
    gap: 2.5rem;
    margin: 0;
    padding: 0 1.25rem 0 0;
    list-style: none;
    font-weight: 600;
    color: var(--color-muted);
    white-space: nowrap;
}

@keyframes ticker-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* Three stages: tabs and stage panels */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tab {
    min-height: 44px;
    padding: 0.6rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    font: 600 1rem/1.2 var(--font-sans);
    cursor: pointer;
}

.tab[aria-selected="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
}

/* Hover lift and tilt for buttons and the contact card. Keeps each element's own background. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .lift {
        transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    }

    .lift:hover {
        transform: translateY(-2px) rotate(-1deg);
    }
}

/* Hover lift and tilt, as on the pills. Off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
    .side-lift {
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .side-lift:hover {
        transform: translateY(-2px) rotate(-1deg);
        background: var(--color-page);
    }

    .tab {
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .tab:hover {
        transform: translateY(-2px) rotate(-1deg);
        background: var(--color-surface);
    }

    .tab[aria-selected="true"]:hover {
        background: var(--color-accent-hover);
    }
}

.stage {
    display: grid;
    gap: 1.5rem;
}

/* The three stage panels share one grid cell, so the section is as tall as the tallest panel. Only the open panel
   is visible, but the others keep their space, so the page below doesn't move when the stage changes. */
.stages {
    display: grid;
}

.stages > .stage {
    grid-area: 1 / 1;
    visibility: hidden;
}

.stages > .stage.stage--active {
    visibility: visible;
}

.stage h3 {
    font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
}

.ai-note {
    padding-left: 1rem;
    border-left: 3px solid var(--color-accent);
}

@media (min-width: 768px) {
    .stage {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;
    }
}

/* Services */
.service-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 3.5rem;
    padding: 0;
    list-style: none;
    grid-template-columns: 1fr;
}

.service-grid h3 {
    font-size: 1.125rem;
}

.service-grid p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
}

.facts {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.75rem;
}

.facts li {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
}

@media (min-width: 768px) {
    .service-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (min-width: 1024px) {
    .service-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Selected work */
.work-grid {
    display: grid;
    gap: 1rem;
    margin: 0 0 3rem;
    padding: 0;
    list-style: none;
    grid-template-columns: 1fr;
}

.work-card p {
    margin-bottom: 0.75rem;
}

.work-card h3 {
    margin-top: 0.5rem;
}

.work-card p:last-child {
    margin-bottom: 0;
}

.clients h3 {
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Pills (prototype 10): lift and tilt on hover, and change background */
.pill {
    padding: 0.45rem 0.95rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: var(--color-page);
    color: var(--color-text);
    font-size: 0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
    .pill {
        transition: transform 0.2s ease, background-color 0.2s ease;
    }

    .pill:hover {
        transform: translateY(-2px) rotate(-1deg);
        background: var(--color-surface);
    }
}

@media (min-width: 768px) {
    .work-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* About us: wordmark on the left, bios on the right */
.about {
    display: grid;
    gap: 2.5rem;
    /* The statement lines up on its last baseline with the last line of the heading beside it. */
    align-items: last baseline;
}

/* The heading shares its row with the wordmark on desktop. */
.about > .section-head {
    margin-bottom: 0;
}

/* Same type as the About us heading beside it. */
.about__statement {
    margin: 0;
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--color-text);
}

.about__name {
    align-self: last baseline;
}

/* The two bios sit side by side from 1024px, and stack below that. Each bio has its photo above its text. */
.bios {
    display: grid;
    gap: 1rem;
}

.bio {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.bio img {
    flex: none;
    width: 110px;
    height: 110px;
    border-radius: 10px;
    object-fit: cover;
}

.bio {
    position: relative;
}

.bio h3 {
    margin-bottom: 0.25rem;
}

/* The name link covers the whole card, so the card works as one link. */
.bio__link {
    color: var(--color-text);
    text-decoration: none;
}

.bio__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.bio__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.bio:has(.bio__link:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

.bio__link:focus-visible {
    outline: none;
}

.bio__role {
    margin-bottom: 0.5rem;
    color: var(--color-accent);
    font-weight: 600;
}

.bio p:last-child {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .about {
        grid-template-columns: 1fr 1fr;
    }

    .about__name {
        grid-column: 2;
    }
}

/* Design 2's team layout: two equal cards, each with the photo on the left of its text, stacking below 1024px. */
@media (min-width: 1024px) {
    .bios {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
        margin-top: 3rem;
    }

    .bio {
        flex-direction: row;
        gap: 26px;
        padding: 28px;
    }

    .bio img {
        width: 150px;
        height: 150px;
    }
}

/* Contact */
.contact {
    display: grid;
    gap: 2rem;
}

/* The contact details box is narrower and sits flush right in its column. */
.contact > .card {
    justify-self: end;
    width: max-content;
    max-width: 100%;
}

.contact-details,
.social-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-details li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.contact-details .icon {
    color: var(--color-accent);
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    color: var(--color-text);
}

.social-links a:hover {
    background: var(--color-page);
    color: var(--color-accent);
}

@media (min-width: 768px) {
    .contact {
        grid-template-columns: 1.2fr 1fr;
        align-items: start;
    }
}

/* Reduced motion: the ticker stops and shows its list once, wrapping to fit the width */
@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        flex-wrap: wrap;
        width: auto;
        animation: none;
    }

    .ticker__list {
        flex-wrap: wrap;
        padding-right: 0;
    }

    .ticker__list[aria-hidden="true"] {
        display: none;
    }
}