/* style.css */
/* =============================================================================
   style.css - DCM Works Boilerplate Styles
   =============================================================================
   Responsive layout, forms, tables, dark mode, and utility classes.
   ============================================================================= */

/* =============================================================================
   1. DESIGN TOKENS / CUSTOM PROPERTIES
   =============================================================================
   Centralized color palette, font stacks, and RGB variants.
   The -rgb variants enable rgba() usage, e.g. rgba(var(--blue-rgb), .5).
   ============================================================================= */

:root {
    --headings-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Neutrals */
    --black:   #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:   #FAFAFA;   --white-rgb:   250, 250, 250;
    --gray:    #6B7280;   --gray-rgb:    107, 114, 128;
    --silver:  #E5E7EB;   --silver-rgb:  229, 231, 235;
    --dark:    #374151;   --dark-rgb:    55, 65, 81;
    --light:   #F3F4F6;   --light-rgb:   243, 244, 246;

    /* Reds & Pinks */
    --rose:    #F43F5E;   --rose-rgb:    244, 63, 94;
    --red:     #DC2626;   --red-rgb:     220, 38, 38;
    --maroon:  #9D174D;   --maroon-rgb:  157, 23, 77;
    --pink:    #EC4899;   --pink-rgb:    236, 72, 153;

    /* Oranges */
    --orange:  #F97316;   --orange-rgb:  249, 115, 22;
    --amber:   #D97706;   --amber-rgb:   217, 119, 6;

    /* Yellows & Limes */
    --yellow:  #EAB308;   --yellow-rgb:  234, 179, 8;
    --lime:    #65A30D;   --lime-rgb:    101, 163, 13;

    /* Greens */
    --green:   #16A34A;   --green-rgb:   22, 163, 74;
    --emerald: #059669;   --emerald-rgb: 5, 150, 105;
    --olive:   #4D7C0F;   --olive-rgb:   77, 124, 15;

    /* Teals & Cyans */
    --teal:    #0D9488;   --teal-rgb:    13, 148, 136;
    --cyan:    #06B6D4;   --cyan-rgb:    6, 182, 212;
    --aqua:    #22D3EE;   --aqua-rgb:    34, 211, 238;

    /* Blues */
    --sky:     #0EA5E9;   --sky-rgb:     14, 165, 233;
    --blue:    #2563EB;   --blue-rgb:    37, 99, 235;
    --indigo:  #4F46E5;   --indigo-rgb:  79, 70, 229;
    --navy:    #1E3A5F;   --navy-rgb:    30, 58, 95;

    /* Purples & Fuchsias */
    --violet:  #7C3AED;   --violet-rgb:  124, 58, 237;
    --purple:  #9333EA;   --purple-rgb:  147, 51, 234;
    --fuchsia: #D946EF;   --fuchsia-rgb: 217, 70, 239;
}

/* =============================================================================
   2. DARK MODE
   =============================================================================
   body.dark flips black and white for a dark UI, the @media query follows
   the operating system's preference, and body.light (the in-app toggle)
   brings the light values back over a dark preference.
   ============================================================================= */

body.dark {
    --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
    --white:  #0B1121;   --white-rgb:   11, 17, 33;
    --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
    --light:  #1A2332;   --light-rgb:   26, 35, 50;
    --silver: #334155;   --silver-rgb:  51, 65, 85;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #F1F5F9;   --black-rgb:   241, 245, 249;
        --white:  #0B1121;   --white-rgb:   11, 17, 33;
        --dark:   #E2E8F0;   --dark-rgb:    226, 232, 240;
        --light:  #1A2332;   --light-rgb:   26, 35, 50;
        --silver: #334155;   --silver-rgb:  51, 65, 85;
    }
}

body.light {
    --black:  #1A1A1A;   --black-rgb:   26, 26, 26;
    --white:  #FAFAFA;   --white-rgb:   250, 250, 250;
    --dark:   #374151;   --dark-rgb:    55, 65, 81;
    --light:  #F3F4F6;   --light-rgb:   243, 244, 246;
    --silver: #E5E7EB;   --silver-rgb:  229, 231, 235;
}

/* =============================================================================
   3. GLOBAL RESET & BASE LAYOUT
   =============================================================================
   Use border-box so padding doesn't add to element width.
   Full-height page with zero default margin and consistent font rendering.
   ============================================================================= */

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

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--body-font);
    background: var(--white);
    color: var(--black);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   4. MEDIA ELEMENTS
   =============================================================================
   Images, video, and SVG scale with their container by default.
   ============================================================================= */

img,
picture,
video,
canvas,
svg {
    display: block;
    height: auto;
    max-width: 100%;
}

/* =============================================================================
   5. FORM CONTROLS
   =============================================================================
   Reset browser defaults so inputs match the app's font and color scheme.
   Dropdown options use variables to prevent invisible text in dark mode.
   ============================================================================= */

input,
button,
textarea,
select {
    border-width: 1px;
    -webkit-tap-highlight-color: transparent;
    font: inherit;
    color: inherit;
    background: transparent;
}

select option,
select optgroup {
    background: var(--white);
    color: var(--black);
}

button,
input[type="submit"] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* =============================================================================
   6. TYPOGRAPHY
   =============================================================================
   Responsive heading scale, consistent margins, and body text sizing.
   ============================================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headings-font);
    font-weight: 700;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    color: inherit;
    margin-top: 8px;
    margin-bottom: 8px;
}

h1 {
    font-size: 2rem;
    line-height: 1.2;
}

h2 {
    font-size: 1.5rem;
    line-height: 1.4;
}

h3 {
    font-size: 1.25rem;
    line-height: 1.25;
}

h4 {
    font-size: 1rem;
    line-height: 1.25;
}

h5 {
    font-size: .875rem;
    line-height: 1.25;
}

h6 {
    font-size: .8125rem;
    line-height: 1.25;
}

p {
    font-size: .95rem;
}

span {
    font-size: inherit;
}

p,
span {
    line-height: 1.5;
}

@media (min-width: 768px) {
    h1 { font-size: 3rem; }
    h2 { font-size: 2.25rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.125rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: .875rem; }
    p  { font-size: 1rem; }
}

/* =============================================================================
   7. LINKS & UTILITY CLASSES
   ============================================================================= */

a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}

.hidden {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-for-mobile { display: none !important; }
}

@media (min-width: 768px) {
    .hidden-for-desktop { display: none !important; }
}

.text-center {
    text-align: center;
}

ul.styled-list {
    margin: 0;
    padding-left: 0;
}

ul.styled-list li {
    list-style-type: none;
}

/* =============================================================================
   8. SPACING UTILITIES
   ============================================================================= */

.vertical-spacer-1 {
    padding-top: 16px;
    padding-bottom: 16px;
}

.vertical-spacer-2 {
    padding-top: 32px;
    padding-bottom: 32px;
}

.vertical-spacer-3 {
    padding-top: 64px;
    padding-bottom: 64px;
}

/* =============================================================================
   9. LAYOUT CONTAINERS
   =============================================================================
   Centered container with max-width and mobile-first padding.
   Flex row/column grid for layout composition.
   ============================================================================= */

.custom-container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1200px;
    padding: 16px;
}

@media (min-width: 1440px) {
    .custom-container {
        max-width: 1440px;
    }
}

.custom-row {
    display: flex;
    flex-wrap: wrap;
}

.custom-column {
    flex-basis: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    .custom-column {
        flex-basis: auto;
        width: auto;
    }
}

.wrapper {
    padding: 16px;
}

/* =============================================================================
   10. MEDIA WRAPPER
   =============================================================================
   Maintains a 16:9 aspect ratio with object-fit cover.
   ============================================================================= */

.media-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.media-wrapper img,
.media-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* =============================================================================
   11. FORM STYLES
   =============================================================================
   Basic accessible form layout, full-width inputs, code blocks, and hr.
   ============================================================================= */

label {
    display: block;
    margin-bottom: 8px;
}

input[type="checkbox"] {
    margin: 0;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    display: inline-block;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    padding: 8px 16px;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    margin-bottom: 16px;
}

textarea {
    resize: none;
}

fieldset {
    margin: 0;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

hr {
    border: none;
    border-top: 1px solid var(--silver);
    margin: 16px 0;
}

pre {
    margin: 0;
    padding: 16px;
    white-space: pre-wrap;
    word-break: break-all;
    background: rgba(var(--silver-rgb), .25);
}

/* =============================================================================
   12. BUTTONS
   =============================================================================
   Primary button, inverted (alt) variant, hover dim effect, disabled state.
   ============================================================================= */

button,
.button {
    display: inline-block;
    background: var(--black);
    color: var(--white);
    border: solid 2px var(--black);
    padding: 8px 16px;
    font-size: .85rem;
    font-weight: 500;
    transition: opacity .25s ease;
}

button[disabled] {
    opacity: .25;
    cursor: not-allowed;
}

button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: .5;
}

button.button-alt,
.button.button-alt {
    background: var(--white);
    color: var(--black);
}

/* =============================================================================
   13. TABLES
   =============================================================================
   Responsive table wrapper, bordered cells, zebra striping, mobile sizing.
   ============================================================================= */

.table-wrapper {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
}

table caption {
    margin-bottom: 16px;
}

th,
td {
    border: 1px solid var(--silver);
    padding: 8px;
}

th {
    background: rgba(var(--silver-rgb), .5);
    font-weight: 700;
}

td {
    font-weight: 400;
}

td.actions-col {
    white-space: nowrap;
}

tr:nth-child(even) td {
    background: rgba(var(--silver-rgb), .15);
}

@media (max-width: 767px) {
    table { font-size: .85rem; }
}

/* =============================================================================
   14. HEADER
   =============================================================================
   Site-wide header - mobile nav collapse/expand, desktop dropdown menus.
   Language switcher, logo alignment, and responsive ordering.
   ============================================================================= */

.header {
    box-shadow: 0 1px 2px rgba(var(--black-rgb), .05);
}

.header a > p {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.25;
    margin: 0;
}

.header .custom-container {
    padding: 12px 16px;
}

.header .custom-container > .custom-row {
    align-items: center;
    justify-content: space-between;
}

.header img {
    max-width: 160px;
}

.header li {
    flex: 0 0 100%;
    list-style-type: none;
}

.header li a {
    display: inline-block;
    position: relative;
}

.header li:not(:last-child) {
    margin-bottom: 16px;
}

.header nav > ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    padding: 0;
    margin: 0;
}

.header li.active > a,
.header li a:hover {
    text-decoration: underline;
    text-decoration-color: rgba(var(--black-rgb), .5);
    text-decoration-thickness: 2px;
    text-underline-offset: 8px;
}

.header.expanded .hidden-for-mobile {
    display: block !important;
}

.header .custom-column {
    width: auto;
}

.header select {
    margin: 0;
}

/* -------------------------------------------------------------------------
   Header - Mobile (< 768px)
   ------------------------------------------------------------------------- */

@media screen and (max-width: 767px) {
    .header .custom-column:first-child {
        flex: 0 0 70%;
        width: 70%;
        order: 0;
        overflow: hidden;
    }

    .header .hidden-for-desktop {
        flex: 0 0 30%;
        width: 30%;
        order: 1;
        text-align: end;
        overflow: hidden;
    }

    .header .hidden-for-mobile {
        order: 2;
        display: block !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height .25s ease;
    }

    .header.expanded .custom-column.hidden-for-mobile {
        max-height: 512px;
    }

    .header .custom-column.hidden-for-mobile nav {
        padding: 16px 0;
    }

    .header li > ul {
        background: transparent;
        box-shadow: none;
        display: block !important;
        margin-top: 16px;
        min-width: auto;
        position: static;
    }
}

/* -------------------------------------------------------------------------
   Header - Desktop (>= 768px)
   ------------------------------------------------------------------------- */

@media screen and (min-width: 768px) {
    .header a > p {
        font-size: 2.5rem;
    }

    .header img {
        max-width: 200px;
    }

    .header li {
        position: relative;
        flex: 0 0 auto;
    }

    .header li:not(:last-child) {
        margin: 0;
        margin-inline-end: 16px;
    }

    .header li > ul {
        display: none;
        padding: 8px 16px;
        position: absolute;
        inset-inline-end: 0;
        min-width: 192px;
        z-index: 10;
        text-align: end;
        box-shadow:
            0 4px 0 0 rgba(var(--shadow-rgb, 0, 0, 0), .05),
            0 8px 16px 0 rgba(var(--shadow-rgb, 0, 0, 0), .1);
    }

    .header li > ul::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white);
    }

    .header li:hover > ul {
        display: block;
    }

    .header li:focus-within > ul {
        display: block;
    }

    .header li > ul > li {
        flex: 0 0 100%;
        padding: 8px 0;
        margin: 0 !important;
    }
}

/* =============================================================================
   15. FOOTER
   =============================================================================
   Responsive footer with column reordering on mobile.
   ============================================================================= */

.footer p {
    margin: 0;
}

.footer .styled-list {
    display: flex;
    flex-flow: row wrap;
}

.footer li {
    flex: 0 0 100%;
    list-style-type: none;
}

.footer li a {
    display: inline-block;
    position: relative;
}

.footer li:not(:last-child) {
    margin-bottom: 16px;
}

@media screen and (max-width: 767px) {
    .footer .custom-column:first-child { order: 2; }
    .footer .custom-column:last-child  { order: 1; margin-bottom: 32px; }
}

@media screen and (min-width: 768px) {
    .footer .custom-row { justify-content: space-between; align-items: center; }
    .footer li          { flex: 0 0 auto; }
    .footer li:not(:last-child) { margin: 0; margin-inline-end: 16px; }
}
/* theme.css */
/* =============================================================================
   theme.css - proposal pages (sites/), on top of style.css (never edit that file)
   =============================================================================
   Everything that is not the style.css base, in cascade order: 1-4 the
   look (tokens for both modes, typography, buttons, forms), 5 the page
   layout (sections, headings, cards, hero, footer), 6 the site itself.
   css.php serves style.css + this file + ../header.css (the studio header,
   shared with the home page) as one gzipped request.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CONFIG - fonts, brand, shape and the neutrals of both modes
   -------------------------------------------------------------------------- */

:root {
    /* Fallback font stacks; the site section below sets its own faces */
    --headings-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;
    --body-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif;

    /* Brand - ink by default: buttons and accents follow the text color and
       invert automatically in dark mode */
    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);

    /* Shape */
    --radius:    8px;    /* controls: inputs, buttons, pills */
    --radius-lg: 12px;   /* surfaces: cards */

    /* Larger surfaces get a softer corner than the controls */
    --radius-xl: 20px;

    /* The booking modal (ui.js): the shared modal's width, with a much
       rounder corner than the plain default, a deep ink shadow and a
       well blurred ink backdrop. The shadow and the backdrop follow
       --ink-rgb, so the mode blocks below repeat them. */
    --modal-width:    480px;
    --modal-radius:   28px;
    --modal-shadow:   0 48px 96px -32px rgba(var(--ink-rgb), .6);
    --modal-backdrop: rgba(var(--ink-rgb), .6);
    --modal-blur:     8px;

    /* Hairline used for every border; flips with the mode */
    --border: rgba(var(--black-rgb), .12);

    /* The prospect's colours. index.php writes --brand, --brand-deep (a
       darker shade for gradients), --on-brand (text on a brand fill),
       --accent, --on-accent, --brand-text (the brand as a text colour,
       lighter in dark mode), their -rgb twins and the two font stacks in
       a <style> on body.light and body.dark; the values here stand in
       until then. The ones that follow --brand are derived tokens, so the
       mode blocks below repeat them. */
    --accent:          var(--brand);
    --accent-rgb:      var(--brand-rgb);
    --brand-deep:      var(--brand);
    --brand-deep-rgb:  var(--brand-rgb);
    --brand-text:      var(--brand);
    --brand-text-rgb:  var(--brand-rgb);
    --on-brand:        #FFFFFF;
    --on-brand-rgb:    255, 255, 255;
    --on-accent-rgb:   255, 255, 255;

    /* Ink: the one dark surface that is not the brand (score panel,
       featured plan, phone frame). It stays dark in both modes, a step
       darker in dark mode, so its text colour is fixed too. */
    --ink:        #16161A;
    --ink-rgb:    22, 22, 26;
    --on-ink:     #FFFFFF;
    --on-ink-rgb: 255, 255, 255;

    /* Tokens that never flip: text on a coloured button (white in both
       modes), the ink of every shadow, and the darker green of the
       modal's success check */
    --on-accent:    #FFFFFF;
    --shadow-rgb:   0, 0, 0;
    --green-strong: #15803D;

    /* Error messages and the edge of an invalid control; flips with the
       mode */
    --error-text: #B91C1C;

    /* Plate behind the prospect's logo: logos are dark artwork on a
       transparent background, so they read straight off the surface in
       light mode and sit on a white plate in dark mode */
    --logo-plate: transparent;

    /* The top bar and the form fields: one step off the canvas and the
       cards, lighter in light mode and darker in dark mode */
    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    /* Neutrals replacing the style.css defaults: soft #3B3B3B ink, an
       #F8F8F8 canvas, pure white cards, #E5E5E5 dividers */
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;
}

/* Dark mode - layered grays: #181818 chrome, a #1F1F1F canvas, #252526
   cards, #313131 fields, #2B2B2B dividers and #CCCCCC text. Keep the three
   blocks in sync: body.dark is the mode switch, the media query is the OS
   preference, body.light overrides a dark OS preference. The derived
   tokens (--brand, --border and the brand's followers) are repeated on
   body because var() inside a custom property resolves where the property
   is declared. */
body.dark {
    --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
    --white:  #252526;   --white-rgb:  37, 37, 38;
    --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
    --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
    --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
    --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .10);

    --accent:         var(--brand);
    --accent-rgb:     var(--brand-rgb);
    --brand-deep:     var(--brand);
    --brand-deep-rgb: var(--brand-rgb);
    --brand-text:     var(--brand);
    --brand-text-rgb: var(--brand-rgb);

    --ink:     #0C0C0F;
    --ink-rgb: 12, 12, 15;
    --modal-shadow:   0 48px 96px -32px rgba(var(--ink-rgb), .6);
    --modal-backdrop: rgba(var(--ink-rgb), .6);

    --chrome: #181818;
    --field:  #313131;

    --logo-plate: #FFFFFF;

    --error-text: #F87171;
}

@media (prefers-color-scheme: dark) {
    :root {
        --black:  #CCCCCC;   --black-rgb:  204, 204, 204;
        --white:  #252526;   --white-rgb:  37, 37, 38;
        --dark:   #B4B4B4;   --dark-rgb:   180, 180, 180;
        --gray:   #9D9D9D;   --gray-rgb:   157, 157, 157;
        --silver: #2B2B2B;   --silver-rgb: 43, 43, 43;
        --light:  #1F1F1F;   --light-rgb:  31, 31, 31;

        --brand:     var(--black);
        --brand-rgb: var(--black-rgb);
        --border:    rgba(var(--black-rgb), .10);

        --accent:         var(--brand);
        --accent-rgb:     var(--brand-rgb);
        --brand-deep:     var(--brand);
        --brand-deep-rgb: var(--brand-rgb);
        --brand-text:     var(--brand);
        --brand-text-rgb: var(--brand-rgb);

        --ink:     #0C0C0F;
        --ink-rgb: 12, 12, 15;
        --modal-shadow:   0 48px 96px -32px rgba(var(--ink-rgb), .6);
        --modal-backdrop: rgba(var(--ink-rgb), .6);

        --chrome: #181818;
        --field:  #313131;

        --logo-plate: #FFFFFF;

        --error-text: #F87171;
    }
}

/* Explicit light mode: the page opens with body.light (index.php), so it
   is light until the visitor picks dark; the values mirror :root */
body.light {
    --black:  #3B3B3B;   --black-rgb:  59, 59, 59;
    --white:  #FFFFFF;   --white-rgb:  255, 255, 255;
    --dark:   #505050;   --dark-rgb:   80, 80, 80;
    --gray:   #616161;   --gray-rgb:   97, 97, 97;
    --silver: #E5E5E5;   --silver-rgb: 229, 229, 229;
    --light:  #F8F8F8;   --light-rgb:  248, 248, 248;

    --brand:     var(--black);
    --brand-rgb: var(--black-rgb);
    --border:    rgba(var(--black-rgb), .12);

    --accent:         var(--brand);
    --accent-rgb:     var(--brand-rgb);
    --brand-deep:     var(--brand);
    --brand-deep-rgb: var(--brand-rgb);
    --brand-text:     var(--brand);
    --brand-text-rgb: var(--brand-rgb);

    --ink:     #16161A;
    --ink-rgb: 22, 22, 26;
    --modal-shadow:   0 48px 96px -32px rgba(var(--ink-rgb), .6);
    --modal-backdrop: rgba(var(--ink-rgb), .6);

    --chrome: #F3F3F3;
    --field:  #FFFFFF;

    --logo-plate: transparent;

    --error-text: #B91C1C;
}

/* -----------------------------------------------------------------------------
   2. TYPOGRAPHY
   -------------------------------------------------------------------------- */

h1, h2, h3 {
    letter-spacing: -0.01em;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-optical-sizing: auto;
}

/* Vertical rhythm (style.css only gives text blocks 8px) */
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 16px;
}

p {
    margin-bottom: 12px;
}

/* -----------------------------------------------------------------------------
   3. BUTTONS - solid ink, hairline border, layered hover instead of the
   style.css opacity fade
   -------------------------------------------------------------------------- */

button,
.button {
    background: var(--brand);
    border: 1px solid var(--brand);
    color: var(--white); /* inverts with --brand, so it works in both modes */
    padding: 8px 16px;
    border-radius: var(--radius);
    letter-spacing: .01em;
    transition: background-color .15s ease, border-color .15s ease;
}

/* A translucent --white veil lightens the ink button in light mode and
   dims the inverted button in dark mode - one rule for both */
button:not([disabled]):hover,
.button:not([disabled]):hover {
    opacity: 1;
    background-image: linear-gradient(rgba(var(--white-rgb), .14), rgba(var(--white-rgb), .14));
}

button:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Secondary: quiet surface button with a hairline edge */
button.button-alt,
.button.button-alt {
    background: var(--white);
    border-color: rgba(var(--black-rgb), .15);
    color: var(--black);
}

button.button-alt:not([disabled]):hover,
.button.button-alt:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--black-rgb), .04), rgba(var(--black-rgb), .04));
    border-color: rgba(var(--black-rgb), .3);
}

/* -----------------------------------------------------------------------------
   4. SURFACES AND FORMS
   -------------------------------------------------------------------------- */

/* Soft canvas behind the content; cards sit on --white, the top bar on
   --chrome. All three flip in dark mode. */
body {
    background: var(--light);
}

.header {
    background: var(--chrome);
}

.footer p {
    color: var(--gray);
    font-size: .85rem;
}

.custom-container > h1 {
    font-size: 1.75rem;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.custom-container > h3 {
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--dark);
}

/* site.js sets .input-invalid on a field that fails validation */
/* The input selector repeats the :not() list of the input rule below, so
   the red edge outweighs its hairline border */
input.input-invalid:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select.input-invalid,
textarea.input-invalid {
    border-color: var(--error-text);
}

form + p,
button + p,
.button + p {
    margin-top: 16px;
}

.wrapper > :last-child {
    margin-bottom: 0;
}

/* Inputs: hairline border, rounded, ink focus ring */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
    border: 1px solid rgba(var(--black-rgb), .14);
    border-radius: var(--radius);
    background: var(--field);
    transition: border-color .15s ease, box-shadow .15s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}

pre {
    border-radius: var(--radius);
}

/* Button rows: a wrapping flex row where each action spaces itself with
   sibling margins, 8px apart in both directions */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 16px;
}

.form-actions > * {
    margin-inline-end: 8px;
    margin-top: 8px;
}

/* -----------------------------------------------------------------------------
   5. PAGE - smooth anchor scrolling, sections clear the sticky header
   -------------------------------------------------------------------------- */

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

main > section {
    padding-top: 64px;
    padding-bottom: 64px;
    scroll-margin-top: 72px;
}

main > section + section {
    border-top: 1px solid var(--border);
}

/* Small uppercase label above a heading */
.eyebrow {
    margin: 0 0 12px;
    color: var(--brand);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Muted intro paragraph under a heading */
.lead {
    color: var(--gray);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Section intro block: eyebrow, h2, lead - kept narrow for reading */
.section-heading {
    max-width: 640px;
    margin-bottom: 40px;
}

.section-heading h2 {
    margin-top: 0;
    margin-bottom: 12px;
    line-height: 1.2;
}

.section-heading .lead {
    margin-bottom: 0;
}

/* Card grid - no gap. Row > .custom-column > .inner-column > content:
   the column only takes its exact share of the row (style.css stacks it
   at 100% on mobile, the media queries below take it to 50% and
   33.333%) and carries no padding; the .inner-column pads by 8px, half
   of the 16px gutter on every side, and the row's -8px margin takes the
   outer half back so the content sits flush with the container. Inside
   goes a .wrapper card or plain content. Column and inner column are
   flex boxes, so every card in a row fills the same height. */
.card-grid {
    margin: -8px;
}

.card-grid > .custom-column {
    display: flex;
}

.card-grid > .custom-column > .inner-column {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px;
}

.card-grid > .custom-column > .inner-column > .wrapper {
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
}

.card-grid h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.1rem;
}

.card-grid p {
    margin: 0;
    color: var(--gray);
    font-size: .95rem;
}

@media (min-width: 768px) {
    .card-grid > .custom-column {
        flex: 1 1 50%;
    }
}

@media (min-width: 1024px) {
    .card-grid > .custom-column {
        flex-basis: 33.333%;
    }
}

/* Small category pill */
.tag {
    display: inline-block;
    margin-bottom: 12px;
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--gray);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
}

/* Header: the style.css top bar, made sticky with a hairline */
.header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--border);
}

.header nav li a {
    color: var(--dark);
    font-size: .9rem;
    font-weight: 500;
}

/* #hero: copy beside a visual, stacked on mobile */
#hero {
    padding-top: 80px;
}

#hero .custom-row {
    align-items: center;
}

#hero h1 {
    margin-top: 0;
    font-size: 2.1rem;
    line-height: 1.1;
    letter-spacing: -.02em;
}

@media (min-width: 768px) {
    #hero h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    #hero h1 {
        font-size: 3.25rem;
    }
}

#hero .lead {
    max-width: 560px;
    margin-bottom: 24px;
}

#hero .form-actions {
    margin-top: 0;
}

/* Call-to-action band, painted with --brand and --white so it stays
   high-contrast in both modes */
.cta-band {
    padding: 56px 24px;
    border-radius: var(--radius-lg);
    background: var(--brand);
    color: var(--white);
}

.cta-band h2 {
    margin-top: 0;
    margin-bottom: 12px;
}

.cta-band p {
    max-width: 560px;
    margin: 0 auto 8px;
    font-size: 1.05rem;
    opacity: .8;
}

.cta-band .form-actions {
    justify-content: center;
}

.cta-band .form-actions > * {
    margin-inline: 4px;
}

.cta-link {
    padding: 8px 16px;
    color: var(--white);
    font-size: .85rem;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(var(--white-rgb), .5);
}

.cta-link:hover {
    text-decoration-color: var(--white);
}

/* Footer: the style.css two-column footer, quiet links */
.footer {
    padding: 32px 0;
    border-top: 1px solid var(--border);
}

.footer .styled-list a {
    color: var(--gray);
    font-size: .85rem;
    transition: color .15s ease;
}

.footer .styled-list a:hover {
    color: var(--black);
}

/* Prospect logos: dark artwork on a transparent background, so in dark
   mode they sit on a white plate (--logo-plate) to stay legible. Sized off
   a shared height so they align whatever their proportions. */
.brand-lockup {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: var(--radius);
    background: var(--logo-plate);
    vertical-align: middle;
}

.brand-lockup img {
    display: block;
    width: auto;
    height: 40px;
}

.brand-lockup img + img {
    margin-inline-start: 12px;
}

@media (min-width: 768px) {
    .brand-lockup img {
        height: 48px;
    }
}

/* =============================================================================
   6. SITE
   =============================================================================
   Every colour comes from the tokens of section 1: the neutrals, which
   flip with the mode switch in the header, and the prospect's --brand,
   --accent and their followers, which index.php writes for each page.

   Motion: sections and cards carry .reveal and fade in when pitch.js sees
   them enter the viewport; the hero mockup floats; numbers count up. All of
   it is switched off under prefers-reduced-motion at the end of the file.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared pieces
   -------------------------------------------------------------------------- */

/* Logos are dark artwork: .brand-lockup above gives them a white plate in dark
   mode, which needs its padding back wherever the page zeroed it */
body.dark .brand-lockup {
    padding: 4px 8px;
}

/* Section 3 assumes an ink brand with --white text; a coloured brand
   needs its computed text colour instead */
button,
.button,
.header .button {
    color: var(--on-brand);
    font-weight: 600;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.button:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 24px -12px rgba(var(--brand-rgb), .6);
}

.button.button-alt {
    color: var(--black);
}

/* Accent button: the loud one, used on brand-filled surfaces */
.button.button-accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 16px 32px -12px rgba(var(--accent-rgb), .7);
}

.button.button-accent:not([disabled]):hover {
    background-image: linear-gradient(rgba(var(--on-accent-rgb), .1), rgba(var(--on-accent-rgb), .1));
    box-shadow: 0 20px 40px -12px rgba(var(--accent-rgb), .8);
}

/* Ghost button: translucent, sits next to the accent one on brand fills */
.button.button-ghost {
    background: rgba(var(--on-brand-rgb), .1);
    border-color: rgba(var(--on-brand-rgb), .35);
    color: var(--on-brand);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.button.button-ghost:not([disabled]):hover {
    background: rgba(var(--on-brand-rgb), .18);
    border-color: rgba(var(--on-brand-rgb), .6);
    box-shadow: none;
}

.button-lg {
    padding: 14px 24px;
    font-size: 1rem;
}

.cta-band,
.cta-link {
    color: var(--on-brand);
}

/* Sections: generous rhythm, backgrounds instead of hairlines */
main > section {
    padding-top: 56px;
    padding-bottom: 56px;
}

@media (min-width: 768px) {
    main > section {
        padding-top: 96px;
        padding-bottom: 96px;
    }
}

main > section + section {
    border-top: 0;
}

#note,
#concept,
#plan,
#contact {
    background: var(--white);
}

#audit,
#services,
#investment {
    background: var(--light);
}

/* Headings: bigger, tighter */
.section-heading {
    max-width: 720px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .section-heading {
        margin-bottom: 56px;
    }
}

.section-heading h2 {
    font-size: 2rem;
    line-height: 1.08;
    letter-spacing: -.025em;
}

@media (min-width: 768px) {
    .section-heading h2 {
        font-size: 2.15rem;
    }
}

@media (min-width: 1024px) {
    .section-heading h2 {
        font-size: 2.75rem;
    }
}

@media (min-width: 1280px) {
    .section-heading h2 {
        font-size: 3rem;
    }
}

.section-heading .lead,
.lead {
    font-size: 1.15rem;
    line-height: 1.6;
}

/* Eyebrow: a pill with a brand dot. The line box is the font size so the
   caps sit centred between the paddings, and the end padding gives back
   the letter-spacing that trails the last letter. */
.eyebrow {
    display: inline-flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 9px 14px 7px;
    padding-inline-end: calc(14px - .1em);
    border-radius: 999px;
    background: rgba(var(--brand-text-rgb), .1);
    color: var(--brand-text);
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .1em;
}

/* The dot sits on the caps' centre, one pixel above the padded box's
   centre, since the padding above is the larger one (accented capitals
   read better with that extra room on top) */
.eyebrow::before {
    position: relative;
    top: -1px;
}

.eyebrow::before {
    content: '';
    width: 8px;
    height: 8px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: var(--brand-text);
}

.micro-label {
    display: block;
    margin-bottom: 8px;
    color: var(--gray);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius);
    background: var(--brand);
    color: var(--on-brand);
    font-family: var(--headings-font);
    font-weight: 700;
}

.brand-name {
    margin-inline-start: 8px;
    font-family: var(--headings-font);
    font-weight: 700;
}

.not-found {
    max-width: 640px;
    padding-top: 64px;
}

/* Card grids: softer corners, hover lift */
.card-grid > .custom-column > .inner-column > .wrapper {
    position: relative;
    padding: 24px;
    border-radius: var(--radius-xl);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

@media (min-width: 768px) {
    .card-grid > .custom-column > .inner-column > .wrapper {
        padding: 32px;
    }
}

.card-grid > .custom-column > .inner-column > .wrapper:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--brand-rgb), .35);
    box-shadow: 0 32px 48px -32px rgba(var(--brand-rgb), .45);
}

.card-grid h3 {
    font-size: 1.25rem;
    letter-spacing: -.01em;
}

/* Four cards read better as 2 x 2 than as three plus one stretched orphan */
@media (min-width: 1024px) {
    .card-grid > .custom-column:first-child:nth-last-child(4),
    .card-grid > .custom-column:first-child:nth-last-child(4) ~ .custom-column {
        flex-basis: 50%;
    }
}

/* Scroll reveal: hidden until pitch.js marks the element visible, with a
   small stagger between siblings */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

.reveal:nth-child(2) { transition-delay: .1s; }
.reveal:nth-child(3) { transition-delay: .2s; }
.reveal:nth-child(4) { transition-delay: .3s; }
.reveal:nth-child(5) { transition-delay: .4s; }
.reveal:nth-child(6) { transition-delay: .5s; }
.reveal:nth-child(7) { transition-delay: .6s; }

/* Keyframes shared by the hero, the mockup and the quote total */
@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

@keyframes drift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-60px, 40px) scale(1.15);
    }
    100% {
        transform: translate(40px, -30px) scale(.95);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(var(--accent-rgb), 0);
    }
}

@keyframes bump {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

/* -----------------------------------------------------------------------------
   Header of a company proposal: the client's logo with "Proposta de DCM
   Works" beside it. The list and the industry pages use the studio
   header (../header.css, which also gives this bar its frosted look,
   mode switch and button sizes).
   -------------------------------------------------------------------------- */

.pitch-brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
}

.pitch-brand .brand-lockup {
    padding: 0;
}

/* On phones the client's logo stays short and narrow so the row keeps one
   line */
.pitch-brand .brand-lockup img {
    height: 28px;
    max-width: 120px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .pitch-brand .brand-lockup img {
        height: 32px;
        max-width: 100%;
        object-fit: fill;
    }
}

/* "Proposta de DCM Works" beside the client's logo, set apart by a
   hairline, from 768px */
.pitch-by {
    display: none;
    margin-inline-start: 16px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid var(--border);
    color: var(--gray);
    font-size: .8rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .pitch-by {
        display: inline;
    }
}

/* -----------------------------------------------------------------------------
   Hero: brand-coloured stage with drifting glows, copy and the mockups
   -------------------------------------------------------------------------- */

#hero.pitch-hero {
    position: relative;
    overflow: hidden;
    padding-top: 56px;
    padding-bottom: 64px;
    background:
        radial-gradient(rgba(var(--on-brand-rgb), .12) 1px, transparent 1.5px) 0 0 / 28px 28px,
        radial-gradient(900px 600px at 100% 0%, rgba(var(--accent-rgb), .35), transparent 65%),
        linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
    color: var(--on-brand);
}

@media (min-width: 768px) {
    #hero.pitch-hero {
        padding-top: 96px;
        padding-bottom: 112px;
    }
}

/* Two soft glows that wander slowly behind the content */
.pitch-hero::before,
.pitch-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    animation: drift 18s ease-in-out infinite alternate;
}

.pitch-hero::before {
    top: -240px;
    inset-inline-end: -160px;
    width: 640px;
    height: 640px;
    background: rgba(var(--accent-rgb), .55);
}

.pitch-hero::after {
    bottom: -280px;
    inset-inline-start: -200px;
    width: 560px;
    height: 560px;
    background: rgba(var(--on-brand-rgb), .22);
    animation-delay: -9s;
}

.pitch-hero .custom-container {
    position: relative;
    z-index: 1;
}

#hero.pitch-hero .eyebrow {
    background: rgba(var(--on-brand-rgb), .12);
    color: var(--on-brand);
    border: 1px solid rgba(var(--on-brand-rgb), .18);
}

#hero.pitch-hero .eyebrow::before {
    background: var(--accent);
    animation: pulse 2s ease-out infinite;
}

#hero.pitch-hero h1 {
    margin-bottom: 24px;
    font-size: 2.5rem;
    line-height: 1.02;
    letter-spacing: -.035em;
}

@media (min-width: 768px) {
    #hero.pitch-hero h1 {
        font-size: 3.15rem;
    }
}

@media (min-width: 1024px) {
    #hero.pitch-hero h1 {
        font-size: 4.05rem;
    }
}

@media (min-width: 1280px) {
    #hero.pitch-hero h1 {
        font-size: 4.5rem;
    }
}

#hero.pitch-hero .lead {
    max-width: 560px;
    margin-bottom: 32px;
    color: rgba(var(--on-brand-rgb), .82);
    font-size: 1.2rem;
}

/* Copy rises in line by line */
.hero-copy > * {
    animation: rise .9s cubic-bezier(.2, .7, .2, 1) both;
}

.hero-copy > :nth-child(2) { animation-delay: .1s; }
.hero-copy > :nth-child(3) { animation-delay: .2s; }
.hero-copy > :nth-child(4) { animation-delay: .3s; }
.hero-copy > :nth-child(5) { animation-delay: .4s; }

/* The three promises under the buttons */
.hero-promises {
    display: flex;
    flex-wrap: wrap;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.hero-promises li {
    display: inline-flex;
    align-items: center;
    margin: 0 24px 8px 0;
    color: rgba(var(--on-brand-rgb), .85);
    font-size: .9rem;
    font-weight: 500;
}

.hero-promises li::before {
    content: '\2713';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-inline-end: 8px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .25);
    color: var(--accent);
    font-size: .7rem;
    font-weight: 700;
}

.hero-mockup {
    margin-top: 64px;
}

/* The copy and the mockup stay stacked on tablets (the mockup needs the
   room) and sit side by side from 1024px */
@media (min-width: 768px) {
    .pitch-hero .hero-copy,
    .hero-mockup {
        flex: 1 1 100%;
    }

    .pitch-hero .hero-copy {
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    .pitch-hero .hero-copy {
        flex: 1 1 0;
        padding-inline-end: 64px;
    }

    .hero-mockup {
        flex: 1.35 1 0;
        min-width: 0;
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------------
   Mockups: the proposed homepage on a laptop-style browser and on a phone
   -------------------------------------------------------------------------- */

/* The stage holds both frames, rises in after the copy and then floats */
.mockup-stage {
    position: relative;
    padding-bottom: 56px;
    animation: rise 1s .35s cubic-bezier(.2, .7, .2, 1) both, float 8s 1.4s ease-in-out infinite;
}

@media (min-width: 768px) {
    .mockup-stage {
        padding-bottom: 88px;
        padding-inline-start: 168px;
    }
}

/* Tilted in perspective from 768px, flat on phones */
.mockup {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--on-brand-rgb), .25);
    border-radius: 16px;
    background: var(--white);
    color: var(--black);
    box-shadow:
        0 0 0 1px rgba(var(--ink-rgb), .06),
        0 48px 96px -32px rgba(var(--ink-rgb), .6);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
    .mockup {
        transform: perspective(1800px) rotateY(-7deg) rotateX(2deg);
    }
}

.mockup-stage:hover .mockup {
    transform: perspective(1800px) rotateY(0) rotateX(0);
}

.mockup-bar {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--light);
}

.mockup-dots span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-inline-end: 6px;
    border-radius: 50%;
    background: var(--rose);
}

.mockup-dots span:nth-child(2) {
    background: var(--amber);
}

.mockup-dots span:nth-child(3) {
    background: var(--green);
}

.mockup-url {
    flex: 1 1 auto;
    margin-inline-start: 12px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--white);
    color: var(--gray);
    font-size: .75rem;
}

.mockup-url::before {
    content: '\1F512';
    margin-inline-end: 6px;
    font-size: .65rem;
}

.mockup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
}

.mockup-logo .brand-lockup {
    padding: 0;
}

.mockup-logo .brand-lockup img {
    height: 24px;
}

.mockup-logo .monogram {
    width: 24px;
    height: 24px;
    font-size: .8rem;
}

.mockup-logo .brand-name {
    font-size: .85rem;
}

.mockup-links {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mockup-links li {
    margin-inline-start: 16px;
    color: var(--dark);
    font-size: .7rem;
    font-weight: 500;
}

/* The last nav item doubles as the site's call to action */
.mockup-links li:last-child {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--brand);
    color: var(--on-brand);
}

.mockup-hero {
    position: relative;
    overflow: hidden;
    margin: 0 12px;
    padding: 36px 28px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
    font-family: var(--body-font);
}

/* Decorative accent shapes standing in for the hero photograph */
.mockup-hero::after {
    content: '';
    position: absolute;
    top: -56px;
    inset-inline-end: -56px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--accent), rgba(var(--accent-rgb), .6));
    box-shadow: 0 24px 48px -16px rgba(var(--ink-rgb), .4);
}

.mockup-hero::before {
    content: '';
    position: absolute;
    bottom: -40px;
    inset-inline-end: 96px;
    width: 120px;
    height: 120px;
    border: 2px solid rgba(var(--on-brand-rgb), .25);
    border-radius: 50%;
}

.mockup-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 58%;
}

/* Photo placeholders: a tinted panel with a picture icon, standing in for
   the photographs the real site would carry */
.photo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 10px;
    background:
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--white-rgb), .25) 10px 12px),
        linear-gradient(135deg, rgba(var(--brand-rgb), .22), rgba(var(--accent-rgb), .45));
    color: rgba(var(--brand-rgb), .6);
}

.photo svg {
    width: 28px;
    height: 28px;
}

.photo-caption {
    position: absolute;
    bottom: 6px;
    inset-inline-start: 6px;
    max-width: calc(100% - 12px);
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(var(--white-rgb), .88);
    color: var(--dark);
    font-size: .58rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The hero photograph: a tilted card on the brand fill */
.photo-hero {
    position: absolute;
    top: 24px;
    inset-inline-end: 24px;
    z-index: 1;
    width: 34%;
    height: calc(100% - 48px);
    border: 1px solid rgba(var(--on-brand-rgb), .3);
    background:
        repeating-linear-gradient(135deg, transparent 0 10px, rgba(var(--on-brand-rgb), .08) 10px 12px),
        linear-gradient(135deg, rgba(var(--on-brand-rgb), .22), rgba(var(--accent-rgb), .5));
    color: rgba(var(--on-brand-rgb), .8);
    box-shadow: 0 24px 48px -16px rgba(var(--ink-rgb), .5);
    transform: rotate(3deg);
}

/* A strip of photographs under the hero */
.mockup-gallery {
    display: flex;
    padding: 12px 12px 0;
}

.photo-tile {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 4 / 3;
}

.photo-tile + .photo-tile {
    margin-inline-start: 8px;
}

/* Small thumbnail at the top of a card */
.photo-thumb {
    display: flex;
    height: 44px;
    margin-bottom: 10px;
    border-radius: 6px;
}

.photo-thumb svg {
    width: 18px;
    height: 18px;
}

/* The hero photograph on the phone sits under the title */
.photo-phone {
    aspect-ratio: 16 / 9;
    margin-bottom: 10px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(135deg, transparent 0 8px, rgba(var(--on-brand-rgb), .08) 8px 10px),
        linear-gradient(135deg, rgba(var(--on-brand-rgb), .22), rgba(var(--accent-rgb), .5));
    color: rgba(var(--on-brand-rgb), .8);
}

.photo-phone svg {
    width: 18px;
    height: 18px;
}

.photo-phone .photo-caption {
    font-size: .5rem;
}

.mockup-title {
    margin: 0 0 8px;
    font-family: var(--headings-font);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.02em;
}

.mockup-text {
    margin: 0 0 16px;
    font-size: .8rem;
    line-height: 1.5;
    opacity: .85;
}

.mockup-button {
    display: inline-block;
    padding: 9px 16px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .75rem;
    font-weight: 700;
    box-shadow: 0 8px 16px -8px rgba(var(--ink-rgb), .5);
}

.mockup-cards {
    display: flex;
    padding: 12px;
}

.mockup-card {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--white);
    color: var(--gray);
    font-size: .7rem;
}

.mockup-card + .mockup-card {
    margin-inline-start: 8px;
}

.mockup-card strong {
    display: block;
    margin-bottom: 4px;
    color: var(--black);
    font-family: var(--headings-font);
    font-size: .8rem;
}

/* Phone: the same homepage as a visitor sees it on a mobile, overlapping
   the bottom start corner of the browser frame. The screen keeps a real
   phone's proportions and cuts the page off at the bottom, as a phone
   would. On phones it is smaller and overlaps the bottom end corner
   instead. */
.mockup-phone {
    position: absolute;
    bottom: 0;
    inset-inline-end: -8px;
    z-index: 2;
    width: 148px;
    margin: 0;
    padding: 7px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--ink);
    color: var(--black);
    box-shadow:
        0 0 0 2px rgba(var(--on-brand-rgb), .2),
        0 32px 64px -24px rgba(var(--ink-rgb), .7);
    animation: rise 1s .6s cubic-bezier(.2, .7, .2, 1) both;
}

@media (min-width: 768px) {
    .mockup-phone {
        inset-inline-start: 0;
        inset-inline-end: auto;
        width: 208px;
        padding: 10px;
        border-radius: 32px;
    }
}

.phone-screen {
    aspect-ratio: 9 / 18.5;
    overflow: hidden;
    border-radius: 18px;
    background: var(--white);
}

@media (min-width: 768px) {
    .phone-screen {
        border-radius: 24px;
    }
}

.phone-status {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
}

.phone-status::before {
    content: '';
    width: 48px;
    height: 6px;
    border-radius: 3px;
    background: var(--ink);
}

.phone-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px 8px;
}

.phone-nav .brand-lockup {
    padding: 0;
}

.phone-nav .brand-lockup img {
    height: 14px;
}

.phone-nav .monogram {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: .55rem;
}

.phone-nav .brand-name {
    margin-inline-start: 4px;
    font-size: .55rem;
}

.phone-menu {
    width: 14px;
}

.phone-menu span {
    display: block;
    height: 2px;
    margin: 2px 0;
    border-radius: 1px;
    background: var(--dark);
}

.phone-hero {
    margin: 0 6px;
    padding: 16px 12px;
    border-radius: 10px;
    background: linear-gradient(150deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
}

.phone-title {
    margin: 0 0 8px;
    font-family: var(--headings-font);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.15;
}

.phone-button {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .55rem;
    font-weight: 700;
}

.phone-cards {
    padding: 6px 6px 8px;
}

.phone-card {
    padding: 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--gray);
    font-size: .55rem;
    line-height: 1.3;
}

.phone-card + .phone-card {
    margin-top: 6px;
}

.phone-card strong {
    display: block;
    color: var(--black);
    font-family: var(--headings-font);
    font-size: .6rem;
}

/* Small phones (under 480px) keep the sample site to its essentials */
@media (max-width: 479px) {
    .mockup-links {
        display: none;
    }

    .mockup-hero-copy {
        max-width: 100%;
    }

    .mockup-hero::after,
    .photo-hero {
        display: none;
    }

    .photo-tile:nth-child(n+3) {
        display: none;
    }

    .mockup-cards {
        display: block;
    }

    .mockup-card + .mockup-card {
        margin-inline-start: 0;
        margin-top: 8px;
    }

    .mockup-card:last-child {
        display: none;
    }
}

/* -----------------------------------------------------------------------------
   Note: a personal letter with the sender's signature
   -------------------------------------------------------------------------- */

.note-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 72px 24px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 40px 80px -48px rgba(var(--brand-rgb), .4);
}

@media (min-width: 768px) {
    .note-card {
        padding: 96px 48px 48px;
    }
}

/* A large quotation mark in the brand tint, in the top padding above the
   greeting so it never covers the text */
.note-card::before {
    content: '\201C';
    position: absolute;
    top: 8px;
    inset-inline-start: 20px;
    color: rgba(var(--brand-rgb), .12);
    font-family: var(--headings-font);
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

@media (min-width: 768px) {
    .note-card::before {
        top: 16px;
        inset-inline-start: 40px;
        font-size: 8rem;
    }
}

.note-card p {
    position: relative;
    font-size: 1.15rem;
    line-height: 1.7;
}

.note-greeting {
    font-family: var(--headings-font);
    font-size: 1.4rem;
    font-weight: 700;
}

.note-signature {
    display: flex;
    align-items: center;
    margin: 32px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}

.note-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin-inline-end: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
    font-family: var(--headings-font);
    font-size: 1.2rem;
    font-weight: 700;
}

.note-card .note-signature p {
    margin: 0;
    color: var(--gray);
    font-size: .95rem;
    line-height: 1.4;
}

.note-signature strong {
    display: block;
    color: var(--black);
    font-size: 1.05rem;
}

/* -----------------------------------------------------------------------------
   Audit: score rings on an ink panel, then findings as today -> tomorrow
   -------------------------------------------------------------------------- */

.audit-scores {
    margin-bottom: 32px;
    padding: 24px 16px;
    border: 1px solid rgba(var(--on-ink-rgb), .08);
    border-radius: var(--radius-xl);
    background: var(--ink);
    color: var(--on-ink);
    box-shadow: 0 40px 80px -48px rgba(var(--ink-rgb), .8);
}

@media (min-width: 768px) {
    .audit-scores {
        padding: 40px;
    }
}

.audit-scores .micro-label {
    margin-bottom: 24px;
    color: rgba(var(--on-ink-rgb), .6);
}

.score-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px;
    padding: 0;
    list-style: none;
}

/* Two by two on phones, all in one row from 768px */
.score {
    flex: 0 0 50%;
    min-width: 0;
    text-align: center;
}

@media (min-width: 768px) {
    .score {
        flex: 1 1 0;
    }
}

.score > .inner-column {
    padding: 0 8px 16px;
}

@media (min-width: 768px) {
    .score > .inner-column {
        padding-bottom: 0;
    }
}

/* A block box: the span only takes its size (and centres the number on
   the ring) once it is no longer inline */
.ring {
    position: relative;
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
}

@media (min-width: 768px) {
    .ring {
        width: 112px;
        height: 112px;
    }
}

.ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring circle {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.ring-track {
    stroke: rgba(var(--on-ink-rgb), .12);
}

/* The value arc draws itself once the panel is revealed: while hidden,
   this rule keeps the whole circumference offset (2 x pi x 40) */
.ring-value {
    transition: stroke-dashoffset 1.6s cubic-bezier(.2, .7, .2, 1);
}

.reveal:not(.is-visible) .ring-value {
    stroke-dashoffset: 251.3;
}

.ring-value.score-poor { stroke: var(--rose); }
.ring-value.score-fair { stroke: var(--amber); }
.ring-value.score-good { stroke: var(--green); }

.ring-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--headings-font);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    .ring-number {
        font-size: 1.9rem;
    }
}

.score-label {
    display: block;
    color: rgba(var(--on-ink-rgb), .75);
    font-size: .85rem;
    font-weight: 500;
}

.finding-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.finding {
    padding: 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04);
    transition: transform .3s ease, box-shadow .3s ease;
}

@media (min-width: 768px) {
    .finding {
        padding: 28px 32px;
    }
}

.finding:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 48px -32px rgba(var(--brand-rgb), .4);
}

.finding + .finding {
    margin-top: 16px;
}

.finding-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}

/* On phones the title takes its own line under the impact pill */
.finding-head h3 {
    flex: 1 1 100%;
    margin: 12px 0 0;
    font-size: 1.3rem;
    letter-spacing: -.01em;
}

@media (min-width: 768px) {
    .finding-head h3 {
        flex-basis: auto;
        margin: 0;
    }
}

.impact {
    display: inline-block;
    flex: 0 0 auto;
    margin: 0 12px 0 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The pill text stays dark for contrast; the colour is a dot in front */
.impact::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: 6px;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.impact-high {
    background: rgba(var(--rose-rgb), .14);
    color: var(--black);
}

.impact-medium {
    background: rgba(var(--amber-rgb), .16);
    color: var(--black);
}

.impact-low {
    background: rgba(var(--green-rgb), .14);
    color: var(--black);
}

.impact-high::before {
    background: var(--rose);
}

.impact-medium::before {
    background: var(--amber);
}

.impact-low::before {
    background: var(--green);
}

/* What was found above the fix on phones, side by side from 768px */
.finding-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

@media (min-width: 768px) {
    .finding-body {
        flex-direction: row;
    }
}

.finding-found,
.finding-fix {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 20px;
    border-radius: 12px;
}

.finding-found {
    border-inline-start: 3px solid var(--rose);
    background: rgba(var(--rose-rgb), .06);
}

.finding-found .micro-label {
    color: var(--black);
}

.finding-fix {
    border-inline-start: 3px solid var(--brand);
    background: rgba(var(--brand-rgb), .07);
}

.finding-fix .micro-label {
    color: var(--brand-text);
}

.finding p {
    margin: 0;
    font-size: .98rem;
    line-height: 1.55;
}

/* The arrow that carries the eye from the problem to the fix */
.finding-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
    width: 36px;
    height: 36px;
    margin: 8px 0;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: 1rem;
    font-weight: 700;
    transform: rotate(90deg);
}

@media (min-width: 768px) {
    .finding-arrow {
        margin: 0 12px;
        transform: none;
    }
}

/* -----------------------------------------------------------------------------
   Concept: the site map as page thumbnails, then the features
   -------------------------------------------------------------------------- */

.concept-label {
    margin-bottom: 20px;
}

.page-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -8px 56px;
    padding: 0;
    list-style: none;
}

.page-card {
    display: flex;
    flex: 0 0 50%;
    width: 50%;
}

.page-card > .inner-column {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px 16px;
}

.page-card-inner {
    height: 100%;
    padding: 12px 12px 20px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--white);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.page-card:hover .page-card-inner {
    transform: translateY(-6px);
    border-color: rgba(var(--brand-rgb), .4);
    box-shadow: 0 32px 48px -32px rgba(var(--brand-rgb), .5);
}

/* A wireframe of the page drawn in CSS */
.page-thumb {
    position: relative;
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
    padding: 10px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--light);
    border: 1px solid var(--border);
}

.thumb-bar {
    display: flex;
    align-items: center;
    height: 8px;
    margin-bottom: 8px;
}

.thumb-bar::before {
    content: '';
    width: 12px;
    height: 6px;
    border-radius: 2px;
    background: var(--brand);
}

.thumb-bar::after {
    content: '';
    width: 30%;
    height: 3px;
    margin-inline-start: auto;
    border-radius: 2px;
    background: rgba(var(--black-rgb), .18);
}

.thumb-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    height: 38%;
    margin-bottom: 8px;
    padding: 6px;
    overflow: hidden;
    border-radius: 6px;
    background: linear-gradient(135deg, rgba(var(--brand-rgb), .9), rgba(var(--brand-deep-rgb), .95));
}

.thumb-hero::before {
    content: '';
    width: 36%;
    height: 6px;
    border-radius: 3px;
    background: var(--accent);
}

/* The photograph on the page's hero, in the thumbnail */
.thumb-hero .photo {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    bottom: 6px;
    width: 40%;
    border-radius: 4px;
    background:
        repeating-linear-gradient(135deg, transparent 0 6px, rgba(var(--on-brand-rgb), .08) 6px 8px),
        linear-gradient(135deg, rgba(var(--on-brand-rgb), .25), rgba(var(--accent-rgb), .55));
    color: rgba(var(--on-brand-rgb), .85);
}

.thumb-hero .photo svg {
    width: 12px;
    height: 12px;
}

/* The first page is the homepage and gets the taller hero */
.page-card:first-child .thumb-hero {
    height: 50%;
}

.thumb-line {
    display: block;
    height: 4px;
    margin-bottom: 5px;
    border-radius: 2px;
    background: rgba(var(--black-rgb), .16);
}

.thumb-line.short {
    width: 60%;
}

.thumb-cards {
    display: flex;
    margin-top: 6px;
}

/* Content tiles, each with a small photograph on top */
.thumb-cards span {
    flex: 1 1 0;
    height: 20px;
    border-radius: 3px;
    background:
        linear-gradient(var(--white), var(--white)) 0 100% / 100% 8px no-repeat,
        linear-gradient(135deg, rgba(var(--brand-rgb), .25), rgba(var(--accent-rgb), .5));
    border: 1px solid var(--border);
}

.thumb-cards span + span {
    margin-inline-start: 4px;
}

.page-index {
    display: inline-block;
    margin: 0 0 6px 4px;
    color: var(--brand-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
}

.page-card strong {
    display: block;
    margin: 0 4px 4px;
    font-family: var(--headings-font);
    font-size: 1.05rem;
    letter-spacing: -.01em;
}

.page-card p {
    margin: 0 4px;
    color: var(--gray);
    font-size: .88rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .page-card {
        flex-basis: 33.333%;
        width: 33.333%;
    }
}

@media (min-width: 1024px) {
    .page-card {
        flex-basis: 20%;
        width: 20%;
    }

    /* Six pages: two rows of three keep the thumbnails legible */
    .page-card:first-child:nth-last-child(6),
    .page-card:first-child:nth-last-child(6) ~ .page-card {
        flex-basis: 33.333%;
        width: 33.333%;
    }
}

/* Features: a large faded index number in the corner */
.feature-card {
    overflow: hidden;
}

.feature-index {
    position: absolute;
    top: 8px;
    inset-inline-end: 20px;
    color: rgba(var(--brand-rgb), .12);
    font-family: var(--headings-font);
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.04em;
    pointer-events: none;
}

.feature-card h3 {
    position: relative;
    padding-top: 8px;
}

.feature-card h3::before {
    content: '';
    display: block;
    width: 32px;
    height: 4px;
    margin-bottom: 16px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

/* -----------------------------------------------------------------------------
   Services: cards with a brand-to-accent edge and the "why" block
   -------------------------------------------------------------------------- */

.service-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--brand), var(--accent));
}

.service-why {
    margin-top: auto;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(var(--brand-rgb), .07);
}

.service-card > p + .service-why {
    margin-top: 20px;
}

.card-grid .service-why p {
    color: var(--dark);
}

.service-why .micro-label {
    color: var(--brand-text);
}

/* -----------------------------------------------------------------------------
   Plan: a timeline with numbered stops
   -------------------------------------------------------------------------- */

/* On phones the stops run down the page, each dot beside its text, with
   the rail going down from one dot to the next; from 768px they sit in a
   row and the rail runs across */
.timeline {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .timeline {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;
    }
}

.timeline-step {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.timeline-step > .inner-column {
    display: flex;
    padding: 0 0 32px;
}

@media (min-width: 768px) {
    .timeline-step > .inner-column {
        display: block;
        padding: 0 12px;
    }
}

.step-dot {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    margin: 0 20px 0 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
    font-family: var(--headings-font);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 0 0 8px rgba(var(--brand-rgb), .12), 0 16px 32px -16px rgba(var(--brand-rgb), .7);
}

@media (min-width: 768px) {
    .step-dot {
        margin: 0 0 20px;
    }
}

/* The rail that joins the stops */
.timeline-step::before {
    content: '';
    position: absolute;
    top: 48px;
    inset-inline-start: 23px;
    width: 2px;
    height: calc(100% - 48px);
    background: linear-gradient(180deg, rgba(var(--brand-rgb), .35), rgba(var(--brand-rgb), .1));
}

@media (min-width: 768px) {
    .timeline-step::before {
        top: 23px;
        inset-inline-start: 60px;
        width: calc(100% - 48px);
        height: 2px;
        background: linear-gradient(90deg, rgba(var(--brand-rgb), .35), rgba(var(--brand-rgb), .1));
    }
}

.timeline-step:last-child::before {
    display: none;
}

.step-when {
    display: inline-block;
    margin-bottom: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(var(--brand-text-rgb), .1);
    color: var(--brand-text);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.timeline-step h3 {
    margin: 0 0 8px;
    font-size: 1.3rem;
    letter-spacing: -.01em;
}

.timeline-step p {
    margin: 0;
    color: var(--gray);
    line-height: 1.6;
}

@media (min-width: 768px) {
    .timeline-step p {
        padding-inline-end: 16px;
    }
}

/* -----------------------------------------------------------------------------
   Quote builder: switches on the left, live total on a brand panel
   -------------------------------------------------------------------------- */

.quote-builder {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--white);
    box-shadow: 0 48px 96px -48px rgba(var(--brand-rgb), .5);
}

.quote-builder > .custom-row {
    align-items: stretch;
}

.quote-options {
    padding: 24px 20px;
}

@media (min-width: 768px) {
    .quote-options {
        padding: 40px;
    }
}

.quote-options h3 {
    margin: 0 0 8px;
    font-size: 1.6rem;
    letter-spacing: -.02em;
}

.quote-lead {
    color: var(--gray);
}

.quote-list {
    margin-top: 24px;
}

/* On phones the price drops to its own line under the label */
.quote-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 14px 12px;
    margin: 0 -12px;
    border-top: 1px solid var(--border);
    border-radius: 10px;
    transition: background-color .2s ease;
}

@media (min-width: 768px) {
    .quote-row {
        flex-wrap: nowrap;
    }
}

.quote-row:has(input:checked) {
    background: rgba(var(--brand-rgb), .05);
}

/* A zero flex basis on phones keeps long labels on the switch's line and
   lets them wrap inside it */
.quote-row label {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    margin-inline-start: 16px;
    font-weight: 500;
    cursor: pointer;
}

@media (min-width: 768px) {
    .quote-row label {
        flex-basis: auto;
        min-width: auto;
    }
}

/* Fixed lines (base and included) carry a green check instead of a switch,
   then the label, then "Included" */
.quote-row .quote-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-inline-end: 20px;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .12);
    color: var(--green);
    font-size: .75rem;
    font-weight: 700;
}

.quote-row .quote-check + span {
    flex: 1 1 0;
    min-width: 0;
    color: var(--dark);
}

@media (min-width: 768px) {
    .quote-row .quote-check + span {
        flex-basis: auto;
        min-width: auto;
    }
}

/* The checkbox drawn as a switch */
.quote-row input[type="checkbox"] {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    margin: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(var(--black-rgb), .18);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background-color .25s ease;
}

.quote-row input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--on-ink);
    box-shadow: 0 2px 4px rgba(var(--ink-rgb), .3);
    transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

.quote-row input[type="checkbox"]:checked {
    background: var(--brand);
}

.quote-row input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.quote-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* On phones the price takes the full line and indents under the label
   with padding, so the box stays inside the row */
.quote-price {
    flex: 0 0 100%;
    margin: 4px 0 0;
    padding-inline-start: 60px;
    font-size: .9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.quote-row.quote-fixed .quote-price {
    padding-inline-start: 44px;
}

@media (min-width: 768px) {
    .quote-price {
        flex-basis: auto;
        margin: 0;
        margin-inline-start: 16px;
        padding-inline-start: 0;
        font-size: inherit;
    }

    .quote-row.quote-fixed .quote-price {
        padding-inline-start: 0;
    }
}

.quote-row input:checked ~ .quote-price {
    color: var(--brand-text);
}

.quote-row input:not(:checked) ~ label,
.quote-row input:not(:checked) ~ .quote-price {
    color: var(--gray);
    font-weight: 400;
}

.quote-fixed .quote-price {
    color: var(--gray);
    font-size: .85rem;
}

.quote-summary {
    position: relative;
    overflow: hidden;
    padding: 24px 20px;
    background: linear-gradient(160deg, var(--brand), var(--brand-deep));
    color: var(--on-brand);
}

@media (min-width: 768px) {
    .quote-summary {
        padding: 40px;
    }
}

.quote-summary::after {
    content: '';
    position: absolute;
    top: -80px;
    inset-inline-end: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), .35);
    filter: blur(40px);
    pointer-events: none;
}

.quote-summary > * {
    position: relative;
    z-index: 1;
}

.quote-summary .micro-label {
    color: rgba(var(--on-brand-rgb), .7);
}

.quote-summary .quote-total {
    margin: 0 0 12px;
    font-family: var(--headings-font);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    transform-origin: 0 50%;
}

@media (min-width: 768px) {
    .quote-summary .quote-total {
        font-size: 2.8rem;
    }
}

@media (min-width: 1024px) {
    .quote-summary .quote-total {
        font-size: 3.6rem;
    }
}

@media (min-width: 1280px) {
    .quote-summary .quote-total {
        font-size: 3.75rem;
    }
}

.quote-total.is-bumped {
    animation: bump .45s cubic-bezier(.2, .7, .2, 1);
}

.quote-summary .quote-note {
    margin-bottom: 24px;
    color: rgba(var(--on-brand-rgb), .8);
    font-size: .9rem;
    line-height: 1.5;
}

.quote-summary .quote-deposit {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--on-brand-rgb), .2);
    color: rgba(var(--on-brand-rgb), .8);
    font-size: .85rem;
}

.quote-summary .quote-deposit strong {
    color: var(--on-brand);
}

@media (min-width: 1024px) {
    .quote-options {
        flex: 1 1 0;
        min-width: 0;
    }

    .quote-summary {
        flex: 0 0 380px;
    }
}

/* Standard plans under the builder; the label leaves room for the
   "recommended" badge that hangs above the featured card */
.plans-label {
    margin-top: 56px;
    margin-bottom: 28px;
}

.package {
    position: relative;
}

.card-grid > .custom-column > .inner-column > .package.is-featured {
    border-color: rgba(var(--on-ink-rgb), .08);
    background: var(--ink);
    color: var(--on-ink);
}

.card-grid > .custom-column > .inner-column > .package.is-featured p,
.package.is-featured .package-items li {
    color: rgba(var(--on-ink-rgb), .78);
}

.package.is-featured .package-items li {
    border-top-color: rgba(var(--on-ink-rgb), .12);
}

.package.is-featured .package-price strong,
.package.is-featured .package-items li::before {
    color: var(--accent);
}

.package-badge {
    position: absolute;
    top: -14px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 8px 16px -8px rgba(var(--accent-rgb), .8);
}

.card-grid .package-price {
    margin: 4px 0 20px;
}

.package-price strong {
    color: var(--black);
    font-family: var(--headings-font);
    margin-inline-end: 8px;
    font-size: 2.5rem;
    letter-spacing: -.03em;
}

.package-items li {
    padding: 10px 0;
    border-top: 1px solid var(--border);
    color: var(--dark);
    font-size: .92rem;
}

.package-items li::before {
    content: '\2713';
    margin-inline-end: 10px;
    color: var(--brand-text);
    font-weight: 700;
}

/* Ownership promise under the plans: a brand-tinted panel, the title on
   the left and the four points on the right from 1024px, stacked below */
.ownership {
    display: block;
    margin-top: 32px;
    padding: 24px 20px;
    border: 1px solid rgba(var(--brand-rgb), .2);
    border-radius: var(--radius-xl);
    background: rgba(var(--brand-rgb), .06);
}

@media (min-width: 768px) {
    .ownership {
        padding: 40px;
    }
}

@media (min-width: 1024px) {
    .ownership {
        display: flex;
        flex-wrap: wrap;
    }
}

.ownership-head {
    flex: 0 0 280px;
    margin-bottom: 24px;
}

@media (min-width: 1024px) {
    .ownership-head {
        margin-bottom: 0;
        padding-inline-end: 40px;
    }
}

.ownership-head h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    letter-spacing: -.02em;
}

.ownership-head p {
    margin: 0;
    color: var(--gray);
}

/* One point under the other on phones, two rows of two from 768px */
.ownership-list {
    display: block;
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
}

@media (min-width: 768px) {
    .ownership-list {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -12px;
    }
}

.ownership-list li {
    flex: 0 0 50%;
    min-width: 0;
}

.ownership-list > li > .inner-column {
    position: relative;
    padding: 0;
    padding-inline-start: 40px;
}

.ownership-list > li + li > .inner-column {
    margin-top: 20px;
}

@media (min-width: 768px) {
    .ownership-list > li > .inner-column {
        padding: 0 12px;
        padding-inline-start: 48px;
    }

    .ownership-list > li + li > .inner-column {
        margin-top: 0;
    }
}

.ownership-list > li:nth-child(n+3) > .inner-column {
    margin-top: 24px;
}

.ownership-check {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--brand);
    color: var(--on-brand);
    font-size: .8rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .ownership-check {
        inset-inline-start: 12px;
    }
}

.ownership-list strong {
    display: block;
    margin-bottom: 4px;
    font-family: var(--headings-font);
    font-size: 1.05rem;
}

.ownership-list p {
    margin: 0;
    color: var(--gray);
    font-size: .92rem;
    line-height: 1.5;
}
/* -----------------------------------------------------------------------------
   Industry list: the page without a parameter
   -------------------------------------------------------------------------- */

.industry-hero {
    padding-bottom: 64px;
}

.industry-hero .section-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

#hero.industry-hero h1 {
    font-size: 2.5rem;
    line-height: 1.02;
    letter-spacing: -.035em;
}

@media (min-width: 768px) {
    #hero.industry-hero h1 {
        font-size: 3.15rem;
    }
}

@media (min-width: 1024px) {
    #hero.industry-hero h1 {
        font-size: 4.05rem;
    }
}

@media (min-width: 1280px) {
    #hero.industry-hero h1 {
        font-size: 4.25rem;
    }
}

#hero.industry-hero .lead {
    color: rgba(var(--on-brand-rgb), .82);
}

/* Section 5 centres the rows inside #hero (an id selector, so this rule
   needs the id too); cards must stretch to one height */
#hero.industry-hero .card-grid {
    align-items: stretch;
}

.industry-card {
    display: flex;
    flex-direction: column;
    color: var(--black);
}

.card-grid .industry-card .micro-label {
    color: var(--brand-text);
    font-size: .7rem;
}

/* The card title is an h2 (the list has no other second-level heading)
   drawn at the card grid's h3 size */
.card-grid .industry-card .card-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.industry-link {
    margin-top: auto;
    padding-top: 20px;
    color: var(--brand-text);
    font-weight: 700;
    font-size: .9rem;
}

/* -----------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */

.cta-band {
    position: relative;
    overflow: hidden;
    padding: 56px 20px;
    border-radius: var(--radius-xl);
    background:
        radial-gradient(rgba(var(--on-brand-rgb), .1) 1px, transparent 1.5px) 0 0 / 28px 28px,
        linear-gradient(135deg, var(--brand), var(--brand-deep));
    box-shadow: 0 48px 96px -48px rgba(var(--brand-rgb), .7);
}

@media (min-width: 768px) {
    .cta-band {
        padding: 96px 32px;
    }
}

.cta-band::before,
.cta-band::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    pointer-events: none;
    animation: drift 16s ease-in-out infinite alternate;
}

.cta-band::before {
    top: -160px;
    inset-inline-start: -80px;
    width: 400px;
    height: 400px;
    background: rgba(var(--accent-rgb), .5);
}

.cta-band::after {
    bottom: -200px;
    inset-inline-end: -80px;
    width: 420px;
    height: 420px;
    background: rgba(var(--on-brand-rgb), .2);
    animation-delay: -8s;
}

.cta-band > * {
    position: relative;
    z-index: 1;
}

.cta-band h2 {
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -.03em;
}

@media (min-width: 768px) {
    .cta-band h2 {
        font-size: 2.35rem;
    }
}

@media (min-width: 1024px) {
    .cta-band h2 {
        font-size: 3rem;
    }
}

@media (min-width: 1280px) {
    .cta-band h2 {
        font-size: 3.25rem;
    }
}

.cta-band p {
    max-width: 600px;
    font-size: 1.15rem;
    opacity: .85;
}

.cta-band .form-actions {
    margin-top: 32px;
}

.cta-band .cta-contact {
    margin-top: 32px;
    font-size: .9rem;
    opacity: .7;
}

/* Footer: the copyright line under the credit */
.footer .footer-copyright {
    margin-top: 4px;
    font-size: .8rem;
}

/* -----------------------------------------------------------------------------
   The modal and the form status line of ui.js, as in the app-boilerplate
   theme.css (same class names and markup), then the booking modal's own
   look
   -------------------------------------------------------------------------- */
/* The modal (ui.js): a native <dialog> over a dimmed page, centred, full
   width with a 16px gutter on phones and 480px wide at most. Plain by
   default, a surface like the menus' panels: it fades in as it opens (at
   once with reduced motion), the close button sits at the top end and the
   actions line up at the end. A project dresses it up through the modal
   tokens and its own .modal rules. */
.modal {
    width: calc(100% - 32px);
    max-width: var(--modal-width);
    margin: auto;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--modal-radius);
    background: var(--white);
    color: var(--black);
    box-shadow: var(--modal-shadow);
}

.modal[open] {
    animation: modal-fade .2s ease-out;
}

.modal::backdrop {
    /* Browsers from before 2024 hand ::backdrop no custom properties, so
       each value carries the default as its fallback */
    background: var(--modal-backdrop, rgba(0, 0, 0, .5));
    -webkit-backdrop-filter: blur(var(--modal-blur, 0px));
    backdrop-filter: blur(var(--modal-blur, 0px));
}

@keyframes modal-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-body {
    position: relative;
    padding: 24px 20px;
}

.modal-title {
    margin: 0 0 8px 0;
    padding-inline-end: 40px;
    font-size: 1.25rem;
}

/* The message of a confirm or alert box keeps its line breaks */
.modal-text {
    margin: 0 0 24px 0;
    color: var(--gray);
    white-space: pre-line;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    font-size: 1.3rem;
    line-height: 1;
}

[dir="rtl"] .modal-close {
    right: auto;
    left: 16px;
}

.modal-close:not([disabled]):hover {
    background: rgba(var(--black-rgb), .1);
    background-image: none;
}

/* The cross sits on the button's own line height (style.css gives every
   span 1.5, which would push it off centre) */
.modal-close span {
    line-height: 1;
}

.modal .modal-actions {
    justify-content: flex-end;
    margin-top: 8px;
}

.modal .modal-actions > *:last-child {
    margin-inline-end: 0;
}

/* A status line under a form in a modal: muted, red for an error, gone
   while empty */
.modal-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .9rem;
}

.modal-status.is-error {
    color: var(--error-text);
}

.modal-status:empty {
    display: none;
}

/* A modal's done state: centred, under a round check */
.modal-success {
    text-align: center;
}

.modal-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: rgba(var(--green-rgb), .12);
    color: var(--green-strong);
    font-size: 1.75rem;
}

/* The done state's title is centred, so it keeps no room for the close
   button */
.modal-success .modal-title {
    padding-inline-end: 0;
}

@media (min-width: 768px) {
    .modal-body {
        padding: 32px;
    }
}

/* The status line of a form (setFormStatus()): right after its buttons,
   the error color for an error, the ink for success, gone while empty */
.form-status {
    margin: 12px 0 0 0;
    color: var(--gray);
    font-size: .95rem;
}

.form-status.is-error {
    color: var(--error-text);
}

.form-status.is-success {
    color: var(--black);
}

.form-status.is-info {
    color: var(--gray);
}

.form-status:empty {
    display: none;
}

/* The booking modal's own look on top of the plain shared one (the modal
   tokens in section 1 give it the round corner, the ink shadow and the
   blurred ink backdrop): a curved wash of the brand colour sweeps down
   from its top edge over a faint brand ring, it rises into place, the
   title is larger and tighter, the close button is round, the done
   state's check is the site's green, and the form's labels and message
   box match the page's forms. The done state's button sits centred under
   the message. */
.modal {
    border-color: rgba(var(--brand-rgb), .18);
    background-color: var(--white);
    background-image:
        radial-gradient(140% 72px at 50% 0, rgba(var(--brand-rgb), .16), transparent 100%),
        radial-gradient(90% 160px at 100% 0, rgba(var(--accent-rgb), .1), transparent 100%);
    background-repeat: no-repeat;
}

.modal[open] {
    animation: rise .35s cubic-bezier(.2, .7, .2, 1);
}

.modal-title {
    font-size: 1.5rem;
    line-height: 1.25;
    letter-spacing: -.02em;
}

.modal-close {
    border-radius: 50%;
}

.modal-success-icon {
    color: var(--green);
    font-weight: 700;
}

.modal.booking-done .modal-actions {
    justify-content: center;
}

.modal.booking label {
    margin-bottom: 6px;
    font-size: .85rem;
    font-weight: 600;
}

.modal.booking textarea {
    min-height: 88px;
}

.modal.booking button[disabled] {
    opacity: .6;
}

/* -----------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .ring-value {
        transition: none;
    }

    .hero-copy > *,
    .mockup-stage,
    .mockup-phone,
    .pitch-hero::before,
    .pitch-hero::after,
    .cta-band::before,
    .cta-band::after,
    #hero.pitch-hero .eyebrow::before,
    .quote-total.is-bumped,
    .modal[open] {
        animation: none;
    }

    .mockup {
        transform: none;
        transition: none;
    }

    .card-grid > .custom-column > .inner-column > .wrapper:hover,
    .finding:hover,
    .page-card:hover .page-card-inner,
    .button:not([disabled]):hover {
        transform: none;
    }
}

/* ../header.css */
/* =============================================================================
   header.css - the header shared by the home page and sites/
   =============================================================================
   Frosted bar, wordmark, section links, language and mode switches and
   the booking button, rendered by header.php. css.php and sites/css.php
   both serve it after style.css and theme.css.

   .studio-header pins the studio's own tokens and font, so the header
   looks the same on the home page and on a proposal page that repaints
   everything else in a client's colours and fonts. The .header rules
   without it are shared with the company proposals' header.
   ============================================================================= */

/* The studio's colours, written like the theme's tokens: the light values
   here, then three override blocks kept in sync (body.dark, the
   prefers-color-scheme query, body.light) */
.studio-header {
    --brand:         var(--black);
    --brand-rgb:     var(--black-rgb);
    --on-brand:      var(--white);
    --on-brand-rgb:  var(--white-rgb);
    --accent:        #4F46E5;
    --accent-rgb:    79, 70, 229;
    --ink:           #111114;
    --ink-rgb:       17, 17, 20;
    --headings-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --body-font:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-family: var(--body-font);
}

body.dark .studio-header {
    --ink:     #0B0B0E;
    --ink-rgb: 11, 11, 14;
}

@media (prefers-color-scheme: dark) {
    .studio-header {
        --ink:     #0B0B0E;
        --ink-rgb: 11, 11, 14;
    }
}

body.light .studio-header {
    --ink:     #111114;
    --ink-rgb: 17, 17, 20;
}

.header {
    background: rgba(var(--white-rgb), .82);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
    transition: box-shadow .3s ease;
}

.header.is-scrolled {
    box-shadow: 0 8px 32px -16px rgba(var(--ink-rgb), .25);
}

/* The row never wraps, and the brand column is itself a flex box so the
   brand sits on the row's centre line instead of on a text baseline. On
   phones the brand column takes whatever the buttons leave. */
.header .custom-container > .custom-row {
    flex-wrap: nowrap;
}

.header .custom-container > .custom-row > .custom-column:first-child {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    width: auto;
    min-width: 0;
}

@media (min-width: 768px) {
    .header .custom-container > .custom-row > .custom-column:first-child {
        flex: 0 1 auto;
    }
}

.site-brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    transition: opacity .2s ease;
}

a.site-brand:hover {
    opacity: .75;
}

/* The header button carries a full and a short label; small phones show
   the short one so the row fits on one line */
.header .label-short {
    display: none;
}

.wordmark {
    display: inline-flex;
    align-items: center;
}

.wordmark-mark {
    position: relative;
    width: 24px;
    height: 24px;
    margin-inline-end: 8px;
    border-radius: 7px;
    background: var(--ink);
}

@media (min-width: 768px) {
    .wordmark-mark {
        width: 28px;
        height: 28px;
        margin-inline-end: 10px;
        border-radius: 8px;
    }
}

/* The dot, centred on the mark: (24px - 8px) / 2 from the top and the
   start on phones, (28px - 10px) / 2 from 768px */
.wordmark-mark::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
}

@media (min-width: 768px) {
    .wordmark-mark::after {
        top: 9px;
        left: 9px;
        width: 10px;
        height: 10px;
    }
}

/* Flex centres the name's line box, which sits the capitals 0.7px above
   the 28px mark from 768px; the name moves half a pixel down there as an
   optical correction (the smaller wordmark on phones is already level) */
.wordmark-name {
    position: relative;
    font-family: var(--headings-font);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

@media (min-width: 768px) {
    .wordmark-name {
        top: .5px;
        font-size: 1.15rem;
    }
}

/* The section links: gone on phones (style.css would fold them into a
   collapsible block), centred in the bar from 768px */
.header .custom-column.header-nav {
    display: none !important;
}

@media (min-width: 768px) {
    .header .custom-column.header-nav {
        display: block !important;
    }
}

.header .header-nav {
    flex: 1 1 auto;
    text-align: center;
}

.header .header-nav nav > ul {
    justify-content: center;
}

.header .header-nav li a {
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--dark);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .2s ease, color .2s ease;
}

.header .header-nav li a:hover {
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    text-decoration: none;
}

.header .header-nav li:not(:last-child) {
    margin-inline-end: 4px;
}

/* The switches and the button keep their one line on phones */
.header .header-cta {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin-inline-start: 12px;
}

@media (min-width: 768px) {
    .header .header-cta {
        flex: 0 1 auto;
        margin-inline-start: 0;
    }
}

.header .header-cta .button {
    padding: 8px 12px;
    font-size: .75rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .header .header-cta .button {
        padding: 8px 16px;
        font-size: .85rem;
        white-space: normal;
    }
}

/* Language switch: a small pill with the other language's code */
.header .lang-switch {
    display: inline-flex;
    align-items: center;
    height: 36px;
    margin-inline-end: 8px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    transition: background-color .2s ease, border-color .2s ease;
}

@media (min-width: 768px) {
    .header .lang-switch {
        height: 40px;
        margin-inline-end: 12px;
        padding: 0 14px;
    }
}

.header .lang-switch:hover {
    background: rgba(var(--black-rgb), .1);
    border-color: rgba(var(--black-rgb), .3);
    text-decoration: none;
}

/* Light / dark switch: a round icon button showing the mode it leads to */
.header .mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin-inline-end: 8px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(var(--black-rgb), .05);
    color: var(--black);
    transition: background-color .2s ease, border-color .2s ease;
}

@media (min-width: 768px) {
    .header .mode-toggle {
        width: 40px;
        height: 40px;
        margin-inline-end: 12px;
    }
}

.header .mode-toggle:not([disabled]):hover {
    background: rgba(var(--black-rgb), .1);
    background-image: none;
    border-color: rgba(var(--black-rgb), .3);
}

.mode-toggle svg {
    width: 18px;
    height: 18px;
}

body.light .mode-toggle .icon-sun,
body.dark .mode-toggle .icon-moon {
    display: none;
}

/* Small phones (under 480px): the short button label and smaller
   switches */
@media (max-width: 479px) {
    .header .label-full {
        display: none;
    }

    .header .label-short {
        display: inline;
    }

    .header .mode-toggle {
        width: 32px;
        height: 32px;
        margin-inline-end: 6px;
    }

    .header .mode-toggle svg {
        width: 16px;
        height: 16px;
    }

    .header .lang-switch {
        height: 32px;
        margin-inline-end: 6px;
        padding: 0 9px;
        font-size: .75rem;
    }

    .header .header-cta .button {
        padding: 8px 10px;
    }
}