/* globals.css — Variant A · «Oscuro personal»: editorial dark, serif display, warm coral accent.
   Variables first (§12.1). Every color, family and measure of the site lives here. */

:root {
    /* Brand */
    --primary-color: #ff8552; /* Warm coral: the personal accent, distinct from WPilot's blue */
    --success-color: #4ade80;
    --error-color: #f87171;
    --focus-color: #ffb08e;
    /* Text */
    --title-color: #f5f3ee;
    --text-color: #e9e7e2;
    --muted-color: #a3a09a;
    /* Backgrounds */
    --background-color: #0c0c0e;
    --surface-color: #141417;
    --surface-alt-color: #111113;
    --figure-light-color: #ffffff; /* Behind transparent case images (type specimens, logos) in both themes */
    /* Case bands: light or dark behind the UX case images, the same in both themes.
       Their colors are the site's own: the light theme's surfaces and the dark theme's background */
    --paper-band-color: #efede6;
    --lavender-band-color: #f6f5f1;
    --ink-band-color: #0c0c0e;
    --ink-surface-color: #141417;
    --paper-title-color: #121210;
    --paper-text-color: #24231f;
    --paper-muted-color: #5f5d57;
    --paper-border-color: rgb(18 18 16 / 0.1);
    --paper-accent-color: #c2410c;
    --ink-title-color: #f5f3ee;
    --ink-text-color: #e9e7e2;
    --ink-muted-color: #a3a09a;
    --ink-border-color: rgb(255 255 255 / 0.1);
    /* Borders */
    --border-color: rgb(255 255 255 / 0.08);
    --border-strong-color: rgb(255 255 255 / 0.16);
    /* Fonts, named by role (§15.1) */
    --display-font: "Instrument Serif", Georgia, "Times New Roman", serif;
    --body-font: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono-font: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    /* Type scale */
    --heading-weight: 400;
    --heading-tracking: -0.015em;
    --hero-title-size: clamp(3rem, 1.9rem + 4.6vw, 5.75rem);
    --section-title-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    --page-title-size: clamp(2.75rem, 1.8rem + 3.8vw, 4.75rem);
    /* The accent phrase of a title */
    --accent-text-background: none;
    --accent-text-color: var(--primary-color);
    --accent-text-font: var(--display-font);
    --accent-text-style: italic;
    --accent-text-weight: 400;
    /* Shapes */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 999px;
    --radius-button: 999px;
    --shadow-lg: 0 24px 60px -24px rgb(0 0 0 / 0.7);
    /* Buttons */
    --button-primary-background: var(--primary-color);
    --button-primary-color: #1a0d07;
    --button-primary-shadow: 0 12px 30px -14px var(--primary-color);
    /* Header, footer and logo */
    --header-background: rgb(12 12 14 / 0.82);
    --footer-background: var(--background-color);
    /* Hero and contact atmosphere */
    --hero-glow: radial-gradient(45% 60% at 82% 18%, rgb(255 133 82 / 0.13), transparent 70%);
    --contact-glow: radial-gradient(50% 80% at 15% 100%, rgb(255 133 82 / 0.1), transparent 70%);
    --portrait-border: 1px solid var(--border-strong-color);
    --portrait-radius: 20px;
    --portrait-shadow: 0 40px 80px -40px rgb(0 0 0 / 0.9);
    --portrait-filter: grayscale(1) contrast(1.05);
    --badge-background: rgb(20 20 23 / 0.88);
    /* WPilot band: the brand keeps its own dark look */
    --band-background-color: #0e0f13;
    --band-title-color: #f3f4f6;
    --band-text-color: #f3f4f6;
    --band-muted-color: #9ca3af;
    --band-surface-color: #16181f;
    --band-border-color: rgb(255 255 255 / 0.08);
    --band-border-strong-color: rgb(255 255 255 / 0.16);
    --band-button-background: linear-gradient(120deg, #22d3ee, #80aef9 45%, #7c3aed);
    --band-button-color: #0b0c10;
    /* WPilot brand and products */
    --wpilot-blue: #80aef9;
    --wpilot-violet: #7c3aed;
    --wpilot-cyan: #22d3ee;
    --product-site-control: #22c55e;
    --product-justify: #80aef9;
    --product-web-kit: #ec4899;
    --product-commerce: #f59e0b;
    --product-h2w: #b495f9;
    /* Layout (§12.7), in px. Nothing in this design aligns content: Beaver's rows do */
    --container-width: 1280px;
    --section-padding-y: 120px;
    --section-padding-y-compact: calc(var(--section-padding-y) * 2 / 3);
    color-scheme: dark;
}

/******************** RESET AND BASE ***********************/
/***********************************************************/

@font-face {
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-serif-400.woff2") format("woff2");
}

@font-face {
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/geist-400.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/geist-500.woff2") format("woff2");
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/geist-600.woff2") format("woff2");
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/geist-mono-500.woff2") format("woff2");
}

/*------------ LIGHT THEME ------------*/

/* Chosen with the header switch (theme-toggle.js sets data-theme on <html>). Only colors change:
   fonts, scale, shapes and layout are the same in both themes. The WPilot band keeps its dark look.
   In WordPress the importer declares the :root variables again on every section, header and footer
   (so the theme cannot override them), and those copies hold the dark values: the light values are
   declared on the same elements too. (0,2,1) beats the importer's (0,1,0) and loses against any
   section that sets its own colors by #id, such as the WPilot band and the case-study bands. */
:root[data-theme="light"],
:root[data-theme="light"] section,
:root[data-theme="light"] header,
:root[data-theme="light"] footer {
    --primary-color: #c2410c;
    --success-color: #16a34a;
    --error-color: #b91c1c;
    --focus-color: #c2410c;
    --title-color: #121210;
    --text-color: #24231f;
    --muted-color: #5f5d57;
    --background-color: #f6f5f1;
    --surface-color: #ffffff;
    --surface-alt-color: #efede6;
    --border-color: rgb(18 18 16 / 0.1);
    --border-strong-color: rgb(18 18 16 / 0.2);
    --shadow-lg: 0 24px 50px -24px rgb(18 18 16 / 0.25);
    --button-primary-background: #121210;
    --button-primary-color: #f6f5f1;
    --button-primary-shadow: none;
    --header-background: rgb(246 245 241 / 0.85);
    --footer-background: var(--surface-alt-color);
    --hero-glow: radial-gradient(45% 60% at 85% 15%, rgb(194 65 12 / 0.08), transparent 70%);
    --contact-glow: none;
    --portrait-border: 1px solid var(--border-color);
    --portrait-shadow: 0 40px 70px -40px rgb(18 18 16 / 0.45);
    --badge-background: rgb(255 255 255 / 0.92);
    color-scheme: light;
}

/* In WordPress the Beaver theme paints .fl-page with the Customizer background (the dark one the
   importer writes from --background-color): follow the chosen theme instead */
body .fl-page {
    background-color: var(--background-color);
}

/******************** RESET AND BASE (CONTINUED) ***********/
/***********************************************************/

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

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important; /* Exception documented in §18: the visitor's setting must win */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 88px;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

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

p {
    margin: 0;
}

/* Links take the color of their text; each component sets its own link color */
#main_content a,
#site_header a,
#site_footer a {
    color: inherit;
}

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

/*------------ COLUMN GROUPS ------------*/

/* A list declared with data-bb-list is a <ul>/<ol> in the prototype and a column group in Beaver:
   in the prototype it must not draw bullets nor indent its columns */
#main_content .fl-col-group {
    margin: 0;
    padding: 0;
    list-style: none;
}

/******************** TEXTS AND TITLES *********************/
/***********************************************************/

/* Explicit color: the BB theme paints every heading with its own Customizer color, which would win over inheritance (§12.8) */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--title-color);
    font-family: var(--display-font);
    font-weight: var(--heading-weight);
    line-height: 1.08;
    letter-spacing: var(--heading-tracking);
}

h1 {
    font-size: var(--hero-title-size);
}

h2 {
    font-size: var(--section-title-size);
}

h3 {
    font-size: 1.375rem;
    line-height: 1.2;
}

/*------------ ACCENT TEXT ------------*/

#main_content .accent-text {
    background: var(--accent-text-background);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--accent-text-color);
    font-family: var(--accent-text-font);
    font-style: var(--accent-text-style);
    font-weight: var(--accent-text-weight);
}

/*------------ SECTION EYEBROW ------------*/

#main_content .section-eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#main_content .section-eyebrow::before {
    content: "";
    flex: 0 0 1.5rem;
    width: 1.5rem;
    height: 1px;
    background-color: currentColor;
}

/******************** BUTTONS ******************************/
/***********************************************************/

/* `a.action-button` is the <a> written in the design; `.action-button a` the <a> Beaver's button
   module prints inside the wrapper that receives the class (§5.6). A pair of buttons is an
   `.action-group`: Beaver's button group prints each one as `.fl-button-group-button > ... > a`
   with no class of the design, so in Beaver its buttons are styled by position (§5.7). */

#site_header a.action-button,
#site_header .action-button a,
#main_content a.action-button,
#main_content .action-button a,
#main_content .action-group .action-group__button,
#main_content .action-group .fl-button-group-button a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3.125rem;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-button);
    font: 600 1rem/1 var(--body-font);
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

/* Beaver's theme colors the text inside its button: let it follow the design */
#main_content .action-button a *,
#main_content .action-group .fl-button-group-button a * {
    color: inherit;
}

/*------------ BUTTON GROUP ------------*/

#main_content .action-group,
#main_content .action-group .fl-button-group-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/*------------ PRIMARY BUTTON ------------*/

#site_header a.action-button--primary,
#site_header .action-button--primary a,
#main_content a.action-button--primary,
#main_content .action-button--primary a,
#main_content .action-group .action-group__button--primary,
#main_content .action-group .fl-button-group-button:first-child a {
    background: var(--button-primary-background);
    color: var(--button-primary-color);
    box-shadow: var(--button-primary-shadow);
}

#site_header a.action-button--primary:hover,
#site_header .action-button--primary a:hover,
#main_content a.action-button--primary:hover,
#main_content .action-button--primary a:hover,
#main_content .action-group .action-group__button--primary:hover,
#main_content .action-group .fl-button-group-button:first-child a:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
}

/*------------ SECONDARY BUTTON ------------*/

#main_content a.action-button--secondary,
#main_content .action-button--secondary a,
#main_content .action-group .action-group__button--secondary,
#main_content .action-group .fl-button-group-button:nth-child(2) a {
    border-color: var(--border-strong-color);
    background-color: transparent;
    color: var(--title-color);
}

#main_content a.action-button--secondary:hover,
#main_content .action-button--secondary a:hover,
#main_content .action-group .action-group__button--secondary:hover,
#main_content .action-group .fl-button-group-button:nth-child(2) a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/******************** PAGE SECTION ************************/
/***********************************************************/

/*------------ LIGHT THEME IN WORDPRESS ------------*/

/* The page background follows the theme. In WordPress the theme's content box (#fl-main-content)
   gets the dark color as a fixed setting at import; the main area covers it with the variable. */
#main_content {
    background-color: var(--background-color);
}

/* The importer also copies each section's background into its Beaver row settings as a fixed,
   dark value. The section paints the same color with variables, so in light mode Beaver's
   copy steps aside and the section's own color (light, or the fixed dark of a band) shows. */
:root[data-theme="light"] #main_content .fl-row-content-wrap {
    background-color: transparent;
}

/* The standard band of an interior page. The section only breathes; its column groups lay out
   (§5.2). Every group of a .page-section wraps, so a heading group and a list group share it. */
#main_content .page-section {
    padding-block: var(--section-padding-y);
}

@media (max-width: 767px) {
    #main_content .page-section {
        padding-block: var(--section-padding-y-compact);
    }
}

#main_content .page-section--tight-top {
    padding-top: 0;
}

#main_content .page-section--alt {
    background-color: var(--surface-alt-color);
}

#main_content .page-section .fl-col-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/*------------ WPILOT BAND ------------*/

/* A section that keeps WPilot's own dark look in both themes */
#main_content .page-section--wpilot {
    --title-color: var(--band-title-color);
    --text-color: var(--band-text-color);
    --muted-color: var(--band-muted-color);
    --surface-color: var(--band-surface-color);
    --border-color: var(--band-border-color);
    --border-strong-color: var(--band-border-strong-color);
    --primary-color: var(--wpilot-blue);
    --button-primary-background: var(--band-button-background);
    --button-primary-color: var(--band-button-color);
    --button-primary-shadow: 0 12px 34px -14px var(--wpilot-violet);
    position: relative;
    isolation: isolate;
    background-color: var(--band-background-color);
    color: var(--text-color);
}

#main_content .page-section--wpilot::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(40% 60% at 90% 0%, color-mix(in srgb, var(--wpilot-violet) 22%, transparent), transparent 70%),
        radial-gradient(35% 55% at 0% 100%, color-mix(in srgb, var(--wpilot-cyan) 14%, transparent), transparent 70%);
}

/*------------ CASE BANDS ------------*/

/* The UX case studies show flows, type and components on the background they were designed on */
#main_content .page-section--paper,
#main_content .page-section--lavender {
    --title-color: var(--paper-title-color);
    --text-color: var(--paper-text-color);
    --muted-color: var(--paper-muted-color);
    --border-color: var(--paper-border-color);
    --primary-color: var(--paper-accent-color);
    background-color: var(--paper-band-color);
    color: var(--text-color);
}

#main_content .page-section--lavender {
    background-color: var(--lavender-band-color);
}

#main_content .page-section--ink {
    --title-color: var(--ink-title-color);
    --text-color: var(--ink-text-color);
    --muted-color: var(--ink-muted-color);
    --border-color: var(--ink-border-color);
    background-color: var(--ink-band-color);
    color: var(--text-color);
}

/******************** LAYOUT COLUMNS ***********************/
/***********************************************************/

/* A column keeps its classes in Beaver (§5.4): these say how much it takes. What a column paints
   goes on its .fl-col-content (§5.5). The gap of the group is 1.5rem. */
#main_content .layout-col {
    display: flex;
    min-width: 0;
}

#main_content .layout-col .fl-col-content {
    flex: 1 1 auto;
    min-width: 0;
}

#main_content .layout-col--full {
    flex: 0 0 100%;
}

#main_content .layout-col--fill {
    flex: 1 1 0;
}

#main_content .layout-col--auto {
    flex: 0 0 auto;
}

#main_content .layout-col--half {
    flex: 0 0 calc((100% - 1.5rem) / 2);
}

#main_content .layout-col--third {
    flex: 0 0 calc((100% - 3rem) / 3);
}

#main_content .layout-col--quarter {
    flex: 0 0 calc((100% - 4.5rem) / 4);
}

#main_content .layout-col--sidebar {
    flex: 0 0 22rem;
}

@media (max-width: 1024px) {
    #main_content .layout-col--third,
    #main_content .layout-col--quarter {
        flex-basis: calc((100% - 1.5rem) / 2);
    }

    #main_content .layout-col--sidebar,
    #main_content .layout-col--fill {
        flex: 0 0 100%;
    }
}

@media (max-width: 767px) {
    #main_content .layout-col--half,
    #main_content .layout-col--third,
    #main_content .layout-col--quarter,
    #main_content .layout-col--auto {
        flex: 0 0 100%;
    }
}

/******************** SECTION HEADING **********************/
/***********************************************************/

#main_content .section-heading .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 2.5rem;
}

#main_content .section-heading--aside .fl-col-content {
    justify-content: flex-end;
}

@media (max-width: 767px) {
    #main_content .section-heading .fl-col-content {
        padding-bottom: 1rem;
    }
}

#main_content .section-heading__title {
    max-width: 22ch;
}

#main_content .section-heading__text {
    max-width: 62ch;
    color: var(--muted-color);
}

/******************** PAGE HERO ****************************/
/***********************************************************/

#main_content .page-hero {
    position: relative;
    isolation: isolate;
    padding-block: calc(var(--section-padding-y) - 2.5rem) 4rem;
}

@media (max-width: 767px) {
    #main_content .page-hero {
        padding-block: 2.5rem 2.5rem;
    }
}

#main_content .page-hero::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--hero-glow);
}

#main_content .page-hero .fl-col-group {
    display: flex;
    align-items: center;
    gap: 4rem;
}

@media (max-width: 1024px) {
    #main_content .page-hero .fl-col-group {
        flex-direction: column;
        align-items: stretch;
        gap: 2.5rem;
    }
}

#main_content .page-hero__content {
    flex: 1 1 0;
    min-width: 0;
}

#main_content .page-hero__media {
    flex: 0 1 30rem;
    min-width: 0;
}

@media (max-width: 1024px) {
    #main_content .page-hero__content,
    #main_content .page-hero__media {
        flex: none;
    }
}

#main_content .page-hero__content .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

#main_content .page-hero__back {
    width: fit-content;
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
    text-decoration: none;
}

#main_content .page-hero__back:hover {
    color: var(--primary-color);
}

#main_content .page-hero__title {
    max-width: 20ch;
    font-size: var(--page-title-size);
}

#main_content .page-hero__text {
    max-width: 60ch;
    color: var(--muted-color);
    font-size: 1.1875rem;
    line-height: 1.65;
}

@media (max-width: 767px) {
    #main_content .page-hero__text {
        font-size: 1.0625rem;
    }
}

/* The class lands on the <img> here and on Beaver's <figure> (§5.6): both clip */
#main_content .page-hero__image {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--portrait-shadow);
}

#main_content .page-hero__image--portrait {
    border: var(--portrait-border);
    filter: var(--portrait-filter);
}

/******************** INFO CARD ****************************/
/***********************************************************/

#main_content .info-card .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding: 1.75rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
    transition: border-color 0.25s;
}

#main_content .info-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
    color: var(--primary-color);
}

#main_content .info-card__icon svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
}

#main_content .info-card__title {
    font-size: 1.3125rem;
}

#main_content .info-card__title a {
    text-decoration: none;
}

#main_content .info-card__text {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

#main_content .info-card__meta {
    padding-top: 0.875rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    line-height: 1.7;
    opacity: 0.85;
}

#main_content .info-card:hover .fl-col-content {
    border-color: var(--border-strong-color);
}

#main_content .info-card__title a:hover {
    color: var(--primary-color);
}

/******************** PROJECT CARD *************************/
/***********************************************************/

/* Shared by the home, the projects page and the "related projects" of every case study.
   Each section says how much a card takes; the card paints itself here. */
#main_content .project-card .fl-col-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.875rem;
    padding: 0.75rem 0.75rem 1.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--surface-color);
    transition: border-color 0.25s, transform 0.25s;
}

#main_content .project-card__image {
    width: 100%;
    margin-bottom: 0.625rem;
    overflow: hidden;
    border-radius: calc(var(--radius-lg) - 0.5rem);
    background-color: var(--surface-alt-color);
}

#main_content .project-card__type,
#main_content .project-card__title,
#main_content .project-card__text,
#main_content .project-card__stack {
    padding-inline: 1rem;
}

#main_content .project-card__type {
    color: var(--primary-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

#main_content .project-card__title {
    font-size: 1.625rem;
}

#main_content .project-card__title a {
    text-decoration: none;
}

/* The whole card opens the project: the title link stretches over it */
#main_content .project-card .fl-col-content {
    position: relative;
}

#main_content .project-card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

#main_content .project-card__text {
    color: var(--muted-color);
}

#main_content .project-card__stack {
    color: var(--text-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
    opacity: 0.85;
}

#main_content .project-card:hover .fl-col-content {
    border-color: var(--border-strong-color);
    transform: translateY(-3px);
}

#main_content .project-card__title a:hover {
    color: var(--primary-color);
}

/******************** FACT ITEM ****************************/
/***********************************************************/

/* The key facts of a case study: role, period, type, stack */
#main_content .fact-item .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-strong-color);
}

#main_content .fact-item__label {
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#main_content .fact-item__value {
    color: var(--title-color);
    font-size: 1rem;
    line-height: 1.5;
}

/******************** CONTENT PROSE ************************/
/***********************************************************/

/* The narrative of a case study or a page: one rich-text field the client edits as a document.
   It is styled by tag, because a text editor drops classes. */
#main_content .content-prose {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
    max-width: 68ch;
    color: var(--text-color);
    font-size: 1.0625rem;
    line-height: 1.75;
}

#main_content .content-prose p,
#main_content .content-prose li {
    color: var(--text-color);
}

#main_content .content-prose ul,
#main_content .content-prose ol {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin: 0;
    padding-left: 1.25rem;
}

#main_content .content-prose li::marker {
    color: var(--primary-color);
}

#main_content .content-prose strong {
    color: var(--title-color);
    font-weight: 600;
}

#main_content .content-prose a {
    color: var(--primary-color);
}

#main_content .content-prose code {
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background-color: var(--surface-color);
    color: var(--title-color);
    font-family: var(--mono-font);
    font-size: 0.875em;
}

#main_content .content-prose h3 {
    margin-top: 0.75rem;
    font-size: 1.375rem;
}

/*------------ CASE BLOCK ------------*/

/* A titled block of a case study: heading on the left, prose on the right */
#main_content .case-block__heading .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

#main_content .case-block__title {
    font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.625rem);
}

/******************** RESULT CARD **************************/
/***********************************************************/

#main_content .result-card .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
}

#main_content .result-card__value {
    color: var(--primary-color);
    font-family: var(--display-font);
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem);
    font-weight: var(--heading-weight);
    line-height: 1;
    letter-spacing: var(--heading-tracking);
}

#main_content .result-card__label {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

/******************** QUOTE CARD ***************************/
/***********************************************************/

#main_content .quote-card .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem 1.5rem 1.5rem 1.75rem;
    border-left: 2px solid var(--primary-color);
    background-color: var(--surface-color);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

#main_content .quote-card__text {
    color: var(--title-color);
    font-family: var(--display-font);
    font-size: 1.375rem;
    font-style: var(--accent-text-style);
    line-height: 1.35;
}

#main_content .quote-card__author {
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
}

/******************** STEP ITEM ****************************/
/***********************************************************/

#main_content .step-item .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-strong-color);
}

#main_content .step-item__number {
    color: var(--primary-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
}

#main_content .step-item__title {
    font-size: 1.25rem;
}

#main_content .step-item__text {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

/******************** CASE FIGURE **************************/
/***********************************************************/

/* A screenshot of a case study: lands on the <img> here and on Beaver's <figure> (§5.6) */
#main_content .case-figure {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--surface-alt-color);
}

#main_content .case-figure__caption {
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
}

#main_content .gallery-item .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* A transparent image (type specimen, logo) sits on white so it reads in both themes */
#main_content .case-figure--light {
    padding: 1.25rem;
    background-color: var(--figure-light-color);
}

/* No frame: a flow diagram or a design-system image that brings its own background */
#main_content .case-figure--bare {
    border: 0;
    border-radius: 0;
    background-color: transparent;
}

/* At its own size (the 2x file is shown at half its pixels), never wider than its column */
#main_content .case-figure--natural {
    width: auto;
    max-width: 100%;
}

/*------------ SPECIMEN GALLERY ITEM ------------*/

/* A type specimen: as wide as the image, side by side with the next one */
#main_content .gallery-item--specimen {
    flex: 0 1 auto;
    min-width: 0;
}

#main_content .gallery-item--specimen .fl-col-content {
    padding-bottom: 2.5rem;
}

/*------------ TILE GALLERY ITEM ------------*/

/* A design-system component: its name centered on top, the image centered below */
#main_content .gallery-item--tile .fl-col-content {
    align-items: center;
    gap: 1.5rem;
    height: 100%;
    padding: 2rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

#main_content .page-section--ink .gallery-item--tile .fl-col-content {
    background-color: var(--ink-surface-color);
}

#main_content .gallery-item--tile .gallery-item__title {
    font-size: 1.375rem;
    text-align: center;
}

/*------------ SIXTH GALLERY ITEM ------------*/

/* Phone screens and small logos: six per row, three on tablet, two on mobile */
#main_content .gallery-item--sixth {
    flex: 0 0 calc((100% - 7.5rem) / 6);
    min-width: 0;
}

@media (max-width: 1024px) {
    #main_content .gallery-item--sixth {
        flex-basis: calc((100% - 3rem) / 3);
    }
}

@media (max-width: 767px) {
    #main_content .gallery-item--sixth {
        flex-basis: calc((100% - 1.5rem) / 2);
    }
}

/*------------ ICON GALLERY ITEM ------------*/

/* A technology logo with its name, in a small card */
#main_content .gallery-item--icon .fl-col-content {
    align-items: center;
    padding: 1.25rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
}

#main_content .gallery-item--icon .gallery-item__icon {
    width: 48px;
    height: 48px;
}

/*------------ INFO CARD IMAGE ------------*/

/* An image icon on top of an info card (the case studies' illustrated icons) */
#main_content .info-card .info-card__image {
    width: 48px;
    height: 48px;
}

/******************** VIDEO CARD ***************************/
/***********************************************************/

/* A vertical product trailer, with its name, a line and a link below. The <video> keeps its
   classes inside Beaver's video module (§5.6), so the player is reached by its own class */
#main_content .video-card .fl-col-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
    text-align: center;
}

#main_content .video-card .video-card__player {
    display: block;
    width: 100%;
    max-width: 20rem;
    height: auto;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--band-background-color);
}

#main_content .video-card .video-card__name {
    margin-top: 0.5rem;
    font-size: 1.5rem;
}

#main_content .video-card .video-card__text {
    max-width: 34ch;
    color: var(--muted-color);
}

#main_content .video-card .video-card__link {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none;
}

/******************** EXPERIENCE ITEM **********************/
/***********************************************************/

#main_content .experience-item .fl-col-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.25rem 0 0.25rem 1.5rem;
    border-left: 2px solid var(--primary-color);
}

#main_content .experience-item__period {
    color: var(--title-color);
    font-family: var(--display-font);
    font-size: 2rem;
    font-weight: var(--heading-weight);
    line-height: 1;
    letter-spacing: var(--heading-tracking);
}

#main_content .experience-item__place {
    color: var(--muted-color);
    font-family: var(--mono-font);
    font-size: 0.8125rem;
}

#main_content .experience-item__role {
    font-size: 1.375rem;
}

#main_content .experience-item__company {
    color: var(--primary-color);
    font-weight: 600;
}

#main_content .experience-item__summary {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

/******************** PRODUCT ITEM *************************/
/***********************************************************/

/* A WPilot product: its color comes from the modifier of its column */
#main_content .product-item {
    --product-color: var(--wpilot-blue);
}

#main_content .product-item--site-control {
    --product-color: var(--product-site-control);
}

#main_content .product-item--justify {
    --product-color: var(--product-justify);
}

#main_content .product-item--web-kit {
    --product-color: var(--product-web-kit);
}

#main_content .product-item--commerce {
    --product-color: var(--product-commerce);
}

#main_content .product-item--h2w {
    --product-color: var(--product-h2w);
}

#main_content .product-item .fl-col-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background-color: var(--surface-color);
    transition: border-color 0.25s;
}

#main_content .product-item__name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--title-color);
    font-family: var(--display-font);
    font-size: 1.1875rem;
    font-weight: var(--heading-weight);
}

#main_content .product-item__name::before {
    content: "";
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background-color: var(--product-color);
    box-shadow: 0 0 14px var(--product-color);
}

#main_content .product-item__text {
    color: var(--muted-color);
    font-size: 0.9375rem;
}

#main_content .product-item__type {
    color: var(--product-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
}

#main_content .product-item__link {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--title-color);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
}

#main_content .product-item__link:hover {
    color: var(--product-color);
}

#main_content .product-item:hover .fl-col-content {
    border-color: color-mix(in srgb, var(--product-color) 55%, transparent);
}

/******************** CONTACT LINKS ************************/
/***********************************************************/

#main_content .contact-card .fl-col-content {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--surface-color);
}

/* The <ul> of the design and the .fl-list Beaver prints for the list module (§5.7) */
#main_content .contact-links,
#main_content .contact-links .fl-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

#main_content .contact-links a {
    display: flex;
    align-items: center;
    min-height: 3.5rem;
    padding: 0 1.25rem;
    border-radius: calc(var(--radius-lg) - 0.375rem);
    color: var(--text-color);
    font-family: var(--mono-font);
    font-size: 0.9375rem;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

#main_content .contact-links a:hover {
    background-color: var(--surface-alt-color);
    color: var(--primary-color);
}

/******************** CTA BAND *****************************/
/***********************************************************/

/* The closing call to action of every interior page */
#main_content .cta-band {
    position: relative;
    isolation: isolate;
    padding-block: var(--section-padding-y);
    border-top: 1px solid var(--border-color);
}

@media (max-width: 767px) {
    #main_content .cta-band {
        padding-block: var(--section-padding-y-compact);
    }
}

#main_content .cta-band::before {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--contact-glow);
}

#main_content .cta-band .fl-col-group {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem 4rem;
}

@media (max-width: 1024px) {
    #main_content .cta-band .fl-col-group {
        flex-direction: column;
        align-items: stretch;
    }
}

#main_content .cta-band__copy {
    flex: 1 1 0;
    min-width: 0;
}

#main_content .cta-band__actions {
    flex: 0 0 auto;
}

@media (max-width: 1024px) {
    #main_content .cta-band__copy,
    #main_content .cta-band__actions {
        flex: none;
    }
}

#main_content .cta-band__copy .fl-col-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#main_content .cta-band__title {
    max-width: 20ch;
}

#main_content .cta-band__title a {
    text-decoration: none;
    transition: color 0.2s;
}

#main_content .cta-band__title a:hover {
    color: var(--primary-color);
}

#main_content .cta-band__text {
    max-width: 52ch;
    color: var(--muted-color);
    font-size: 1.125rem;
}

/******************** SITE HEADER **************************/
/***********************************************************/

/* Three columns —logo, menu, actions— and each piece is a Beaver module (§5.9):
   the logo a photo, the menu Beaver's Menu module, the button a button module. */
#site_header {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--header-background);
    backdrop-filter: blur(14px);
}

#site_header .fl-col-group {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-height: 4.5rem;
}

#site_header .site-header__brand {
    flex: 1 1 auto;
}

#site_header .site-header__menu,
#site_header .site-header__tools {
    flex: 0 0 auto;
}

#site_header .site-header__tools .fl-col-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}

/*------------ LOGO ------------*/

/* The class lands on Beaver's <figure>; the <img> is reached as a descendant (§5.6) */
#site_header .site-header__logo img,
#site_header img.site-header__logo {
    display: block;
    width: 3rem;
    height: auto;
}

/*------------ MENU ------------*/

/* Beaver prints .fl-menu > nav > ul.menu > li.menu-item > a; the prototype writes the same */
#site_header .site-header__nav .menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#site_header .site-header__nav .menu-item {
    float: none;
}

#site_header .site-header__nav .menu-item > a {
    display: block;
    padding: 0;
    line-height: 1.6;
    color: var(--muted-color);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

#site_header .site-header__nav .menu-item > a:hover,
#site_header .site-header__nav .current-menu-item > a {
    color: var(--title-color);
}

/* Beaver's mobile button: hidden on wide screens, as Beaver does from its breakpoint */
#site_header .site-header__nav .fl-menu-mobile-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--border-strong-color);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--title-color);
    cursor: pointer;
}

#site_header .site-header__nav .fl-menu-mobile-toggle svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 1024px) {
    #site_header .site-header__nav .fl-menu-mobile-toggle {
        display: inline-flex;
    }

    /* Closed until the button opens it: Beaver hides the list itself and opens it with its script */
    #site_header .site-header__nav .menu {
        display: none;
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.5rem 1rem 1rem;
        border-bottom: 1px solid var(--border-color);
        background-color: var(--background-color);
    }

    #site_header .site-header__nav .fl-menu-mobile-toggle.fl-active + .menu,
    #site_header .site-header__nav .fl-menu-mobile-toggle.fl-active ~ nav .menu {
        display: flex;
    }

    #site_header .site-header__nav .menu-item > a {
        padding: 0.75rem 0;
        color: var(--title-color);
        font-size: 1.0625rem;
    }
}

/*------------ ACTIONS ------------*/

#site_header .site-header__theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--muted-color);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

#site_header .site-header__theme-toggle:hover {
    border-color: var(--border-strong-color);
    color: var(--title-color);
}

#site_header .site-header__theme-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

/* Dark theme shows the sun (switch to light); light theme shows the moon */
#site_header .site-header__theme-icon--moon,
#site_header .site-header__theme-toggle[aria-pressed="true"] .site-header__theme-icon--sun {
    display: none;
}

#site_header .site-header__theme-toggle[aria-pressed="true"] .site-header__theme-icon--moon {
    display: block;
}

/* The button module puts the class on its wrapper: the <a> is a descendant (§5.6) */
#site_header a.site-header__cta,
#site_header .site-header__cta a {
    min-height: 2.75rem;
    padding: 0 1.25rem;
    font-size: 0.9375rem;
}

@media (max-width: 600px) {
    #site_header a.site-header__cta,
    #site_header .site-header__cta {
        display: none;
    }
}

/******************** SITE FOOTER **************************/
/***********************************************************/

#site_footer {
    width: 100%;
    padding-block: 4rem 2rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--footer-background);
}

/* Three columns —brand, menu and contact—: the menu and the contact take their quarter
   (data-bb-col="25") and the brand the rest, in Beaver's editor and on the site (§5.4, §5.9) */
#site_footer .fl-col-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 4rem;
}

#site_footer .site-footer__brand {
    flex: 1 1 20rem;
    min-width: 0;
}

#site_footer .site-footer__nav,
#site_footer .site-footer__contact {
    flex: 0 0 25%;
    min-width: 0;
}

/* Below a tablet the brand takes its own line and the two lists share the next one */
@media (max-width: 768px) {
    #site_footer .site-footer__nav,
    #site_footer .site-footer__contact {
        flex: 1 1 0;
    }
}

#site_footer .site-footer__brand .fl-col-content,
#site_footer .site-footer__nav .fl-col-content,
#site_footer .site-footer__contact .fl-col-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

#site_footer .site-footer__logo img,
#site_footer img.site-footer__logo {
    display: block;
    width: 3rem;
    height: auto;
}

#site_footer .site-footer__text {
    max-width: 26rem;
    color: var(--muted-color);
    font-size: 0.9375rem;
}

#site_footer .site-footer__text a {
    color: var(--title-color);
}

#site_footer .site-footer__title {
    color: var(--primary-color);
    font-family: var(--mono-font);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The footer menu is Beaver's Menu module in vertical; the contact list, a list module (§5.7) */
#site_footer .site-footer__menu .menu,
#site_footer .site-footer__social,
#site_footer .site-footer__social .fl-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

#site_footer .site-footer__menu .menu-item {
    float: none;
}

#site_footer .site-footer__menu .menu-item > a,
#site_footer .site-footer__social a {
    display: block;
    padding: 0;
    color: var(--muted-color);
    font-size: 0.9375rem;
    /* Beaver's Menu module sets line-height equal to the font size: both columns at the same rhythm */
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s;
}

#site_footer .site-footer__menu .menu-item > a:hover,
#site_footer .site-footer__menu .current-menu-item > a,
#site_footer .site-footer__social a:hover {
    color: var(--title-color);
}

/* The footer menu never folds: no mobile button */
#site_footer .site-footer__menu .fl-menu-mobile-toggle {
    display: none;
}

#site_footer .site-footer__copyright {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
    color: var(--muted-color);
    font-size: 0.8125rem;
}

#site_footer .site-footer__copyright a {
    color: var(--title-color);
}

/******************** ACCESSIBILITY ************************/
/***********************************************************/

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 1rem;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    background-color: var(--title-color);
    color: var(--background-color);
    font-weight: 600;
    text-decoration: none;
}

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

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