/* ==========================================================
   MAIN STYLESHEET  (list of all CSS files, in order)

   PURPOSE:
   This file only IMPORTS the other CSS files. The build
   combines them into one file: /dist/styles/main.css

   HOW TO FIND THE RIGHT FILE:
   base/        design tokens, fonts, reset, layout, motion
   components/  pieces used on many pages (buttons, cards, ...)
   sections/    big homepage / page sections (hero, CTA, ...)
   pages/       styles that belong to ONE page only

   ADDING A NEW CSS FILE:
   Create it in the right folder and add an @import line below.

   EDIT WITH CARE: the order matters (later files win).
========================================================== */

/* BASE */
/* --- from styles/base/variables.css --- */
/* ==========================================================
   DESIGN TOKENS  (the single source of truth for the look)

   PURPOSE:
   Every colour, font, size, spacing value and animation timing
   used on the website is defined here. Other CSS files only
   REFERENCE these variables, e.g. `color: var(--color-text);`.

   Change a value here and it changes everywhere.

   SOURCE:
   Values are taken from the Lukas Ude Corporate Identity Sheet
   (/source-assets/lukas-ude-corporate-identity-sheet.pdf).
   Colour ratio from the CI:
   55% black / 30% ivory / 10% natural tones / 5% brass.
   -> Brass is an ACCENT. Use it sparingly.
========================================================== */

:root {

    /* ------------------------------------------------------
       1. BRAND COLOURS  (exact CI values)
       SAFE TO EDIT: change the hex codes to adjust the palette.
    ------------------------------------------------------ */
    --color-obsidian: #090A09;       /* main dark background */
    --color-ivory: #EEEAE0;          /* main light background / light text */
    --color-british-green: #18251D;  /* deep natural green */
    --color-forest: #2D3B30;         /* lighter forest green */
    --color-tobacco: #71543C;        /* warm brown detail colour */
    --color-brass: #9A815C;          /* restrained accent (use rarely!) */
    --color-taupe: #6E6253;          /* top bar, warm neutral */
    --color-sand: #E2DACB;           /* warm light band (feature row, cards) */

    /* ------------------------------------------------------
       2. DERIVED COLOURS  (shades built from the brand colours)
       EDIT WITH CARE: these keep text readable (contrast).
    ------------------------------------------------------ */
    --color-obsidian-raised: #111311;   /* cards on dark backgrounds */
    --color-obsidian-line: #1E211E;     /* dividers on dark */
    --color-ivory-deep: #E2DDD0;        /* cards on light backgrounds */
    --color-ivory-line: #CFC8B8;        /* dividers on light */
    --color-brass-dark: #75603F;        /* brass for TEXT on ivory (readable) */
    --color-ink-muted: #4A463F;         /* secondary text on ivory */
    --color-ivory-muted: #B4AFA4;       /* secondary text on dark */
    --color-success: #5E7A5F;           /* positive form states */
    --color-error: #B5654A;             /* error form states */

    /* ------------------------------------------------------
       3. SEMANTIC COLOURS  (what the colours are USED for)
       Sections switch between dark and light by changing
       these variables (see .theme-dark / .theme-light below).
    ------------------------------------------------------ */
    --color-background: var(--color-obsidian);
    --color-surface: var(--color-obsidian-raised);
    --color-text: var(--color-ivory);
    --color-text-muted: var(--color-ivory-muted);
    --color-line: var(--color-obsidian-line);
    --color-accent: var(--color-brass);
    --color-green: var(--color-british-green);

    /* ------------------------------------------------------
       4. TYPOGRAPHY
       --font-display: editorial serif for big statements
       --font-body:    precise sans-serif for UI and text
       SAFE TO EDIT: font names (the files are loaded in
       /frontend/styles/base/typography.css).
    ------------------------------------------------------ */
    --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Font sizes scale smoothly between mobile and desktop
       using clamp(minimum, preferred, maximum). */
    --text-xs: 0.75rem;                                   /* 12px – labels */
    --text-sm: 0.875rem;                                  /* 14px – meta text */
    --text-base: 1rem;                                    /* 16px – body text */
    --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* lead text */
    --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --text-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
    --text-2xl: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
    --text-3xl: clamp(2.4rem, 1.5rem + 3.8vw, 5rem);
    --text-display: clamp(3.1rem, 1.6rem + 6.4vw, 8.25rem); /* hero headline */

    --line-height-tight: 1.02;
    --line-height-heading: 1.12;
    --line-height-body: 1.65;

    --letter-spacing-label: 0.22em;   /* small uppercase labels */
    --letter-spacing-wide: 0.08em;

    /* ------------------------------------------------------
       5. SPACING
       One spacing scale for margins, paddings and gaps.
    ------------------------------------------------------ */
    --spacing-3xs: 0.25rem;   /* 4px  */
    --spacing-2xs: 0.5rem;    /* 8px  */
    --spacing-xs: 0.75rem;    /* 12px */
    --spacing-small: 1rem;    /* 16px */
    --spacing-medium: 1.5rem; /* 24px */
    --spacing-large: 2.5rem;  /* 40px */
    --spacing-xl: clamp(3rem, 2rem + 4vw, 5rem);
    --spacing-2xl: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --spacing-section: clamp(5rem, 3.5rem + 7vw, 10rem); /* space between big sections */

    /* ------------------------------------------------------
       6. LAYOUT
       EDIT WITH CARE: affects the width of all content.
    ------------------------------------------------------ */
    --content-width: 1360px;      /* maximum width of page content */
    --content-width-text: 44rem;  /* comfortable reading width */
    --page-gutter: clamp(1.25rem, 0.6rem + 3vw, 3.5rem); /* left/right page padding */
    --topbar-height: 2.1rem;      /* thin bar above the menu (hidden on phones) */
    --header-bar-height: 4.6rem;  /* the menu bar itself */
    --header-height: var(--header-bar-height); /* total, grows on tablets (below) */

    /* ------------------------------------------------------
       7. SHAPES
       The CI is calm and precise -> small radii only.
    ------------------------------------------------------ */
    --border-radius: 2px;
    --border-radius-large: 6px;
    --border-radius-device: 28px;  /* phone frame in funnel previews */
    --border-width: 1px;

    /* ------------------------------------------------------
       8. MOTION
       Slow, controlled, cinematic. No bounce.
       SAFE TO EDIT: durations.
    ------------------------------------------------------ */
    --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 220ms;
    --duration-medium: 600ms;
    --duration-slow: 1100ms;
    --duration-reveal: 1400ms;
    --reveal-distance: 28px;

    /* ------------------------------------------------------
       9. LAYERS (z-index)
    ------------------------------------------------------ */
    --layer-base: 1;
    --layer-header: 50;
    --layer-menu: 60;
    --layer-lightbox: 80;
    --layer-skip-link: 100;
}

/* Tablets and larger: the thin top bar is shown above the menu */
@media (min-width: 760px) {
    :root {
        --header-height: calc(var(--topbar-height) + var(--header-bar-height));
    }
}


/* ==========================================================
   SECTION THEMES
   Add class="theme-dark", "theme-light" or "theme-green"
   to a <section> to switch its colours.
   This creates the dark / light rhythm of the website.
========================================================== */

.theme-dark {
    --color-background: var(--color-obsidian);
    --color-surface: var(--color-obsidian-raised);
    --color-text: var(--color-ivory);
    --color-text-muted: var(--color-ivory-muted);
    --color-line: var(--color-obsidian-line);
    --color-accent: var(--color-brass);
}

.theme-light {
    --color-background: var(--color-ivory);
    --color-surface: var(--color-ivory-deep);
    --color-text: var(--color-obsidian);
    --color-text-muted: var(--color-ink-muted);
    --color-line: var(--color-ivory-line);
    --color-accent: var(--color-brass-dark);
}

.theme-sand {
    --color-background: var(--color-sand);
    --color-surface: var(--color-ivory);
    --color-text: var(--color-obsidian);
    --color-text-muted: var(--color-ink-muted);
    --color-line: var(--color-ivory-line);
    --color-accent: var(--color-brass-dark);
}

.theme-green {
    --color-background: var(--color-british-green);
    --color-surface: var(--color-forest);
    --color-text: var(--color-ivory);
    --color-text-muted: #B9BCAF;
    --color-line: #2A3A2F;
    --color-accent: #B39A72;
}

.theme-dark,
.theme-light,
.theme-sand,
.theme-green {
    background-color: var(--color-background);
    color: var(--color-text);
}

/* ==========================================================
   END DESIGN TOKENS
========================================================== */

/* --- from styles/base/reset.css --- */
/* ==========================================================
   RESET
   Removes inconsistent browser default styles so the site
   looks the same in every browser.
   DO NOT EDIT WITHOUT TESTING: affects every element.
========================================================== */

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

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    min-height: 100vh;
    background-color: var(--color-obsidian);
    color: var(--color-ivory);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--line-height-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
}

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

/* :where() keeps this rule weak, so component styles can add padding */
:where(ul, ol)[role="list"] {
    list-style: none;
    padding: 0;
}

p,
h1,
h2,
h3,
h4 {
    overflow-wrap: break-word;
}

/* Visible keyboard focus for accessibility (never remove). */
:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 4px;
}

::selection {
    background-color: var(--color-brass);
    color: var(--color-obsidian);
}

[hidden] {
    display: none !important;
}

/* ==========================================================
   END RESET
========================================================== */

/* --- from styles/base/typography.css --- */
/* ==========================================================
   TYPOGRAPHY
   Loads the brand fonts (self-hosted, no Google requests)
   and defines headline, text and label styles.

   Fonts (from the CI):
   - Display: Cormorant Garamond  -> big editorial statements
   - UI/Text: Manrope             -> navigation, text, labels

   Font files live in /frontend/assets/fonts/
========================================================== */


/* FONT FILES
   EDIT WITH CARE: if you replace a font, update the file
   name here and the font name in variables.css. */

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/fonts/cormorant-garamond-variable-latin.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("/assets/fonts/cormorant-garamond-variable-latin-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Manrope";
    src: url("/assets/fonts/manrope-variable-latin.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}


/* HEADINGS
   Big headlines: bold, uppercase sans-serif (modern, confident).
   The serif display font is used for the large wordmark and for
   the italic accent lines (.heading-accent), which keeps the
   editorial character of the CI. */

h1,
h2,
h3,
.heading-display,
.heading-1,
.heading-2,
.heading-3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--line-height-heading);
    letter-spacing: -0.01em;
}

.heading-display {
    font-size: var(--text-display);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
}

.heading-1,
.heading-2 {
    overflow-wrap: break-word;   /* very long German words never overflow */
    hyphens: auto;
    font-family: var(--font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.heading-1 {
    font-size: var(--text-3xl);
    line-height: 0.98;
}

.heading-2 {
    font-size: var(--text-2xl);
    line-height: 1;
}

.heading-3 {
    font-size: var(--text-xl);
}

/* Italic accent line, e.g. "Built for growth." (as in the CI sheet) */
.heading-accent {
    font-style: italic;
    color: var(--color-accent);
}

/* Inside the bold sans headlines the accent switches to the serif:
   normal case, light and slightly larger, for an editorial contrast. */
.heading-1 .heading-accent,
.heading-2 .heading-accent {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.08em;
    text-transform: none;
    letter-spacing: -0.01em;
}


/* EYEBROW - small uppercase label above headlines,
   e.g. "MARKETING  KI  SYSTEME".
   Several <span> parts inside one eyebrow are separated by the
   gap below (no dashes or dots needed). */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.9em;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-accent);
}

/* Extra space between several parts, e.g. "AUTOMOTIVE   KONZEPTARBEIT" */
.eyebrow > span + span {
    margin-left: 0.6em;
}

/* Wider spacing between the parts, e.g. the hero descriptor */
.eyebrow--spaced {
    flex-wrap: wrap;
    gap: 0.5em clamp(1em, 2.5vw, 1.75em);
}

.eyebrow--spaced > span + span {
    margin-left: 0;
}

/* Year next to a label, e.g. on design cards */
.meta-year {
    margin-left: 1.25em;
    opacity: 0.75;
}


/* BODY TEXT */

.text-lead {
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--color-text-muted);
    max-width: var(--content-width-text);
}

.text-muted {
    color: var(--color-text-muted);
}

.text-small {
    font-size: var(--text-sm);
}

.label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}

/* Long-form text (case studies, legal pages) */
.prose {
    max-width: var(--content-width-text);
}

.prose > * + * {
    margin-top: 1.1em;
}

.prose h2 {
    font-size: var(--text-xl);
    margin-top: 2em;
}

.prose h3 {
    font-size: var(--text-lg);
    margin-top: 1.6em;
}

.prose ul {
    padding-left: 1.2em;
}

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

/* IMAGE CAPTION  (short line below content images, not below
   background images). Use: <figcaption class="figure-caption"> */
.figure-caption {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* ==========================================================
   END TYPOGRAPHY
========================================================== */

/* --- from styles/base/layout.css --- */
/* ==========================================================
   LAYOUT HELPERS
   Containers, section spacing and simple grids that are
   reused on every page.
========================================================== */


/* CONTAINER - centres content and adds page padding */

.container {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--page-gutter));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container--narrow {
    max-width: calc(56rem + 2 * var(--page-gutter));
}


/* SECTION - vertical rhythm between big page sections */

.section {
    position: relative;
    padding-block: var(--spacing-section);
}

.section--compact {
    padding-block: var(--spacing-2xl);
}

.section--flush-top {
    padding-top: 0;
}


/* SECTION HEADER - eyebrow + heading + optional text */

.section-header {
    display: grid;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
    max-width: 52rem;
}

.section-header--split {
    max-width: none;
    grid-template-columns: 1fr;
    align-items: end;
}

@media (min-width: 900px) {
    .section-header--split {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--spacing-xl);
    }
}


/* DIVIDER LINE */

.rule {
    height: 1px;
    border: 0;
    background-color: var(--color-line);
}


/* ACCESSIBILITY HELPERS */

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

.skip-link {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: var(--layer-skip-link);
    padding: 0.75rem 1.25rem;
    background-color: var(--color-ivory);
    color: var(--color-obsidian);
    font-weight: 600;
    transform: translateY(-200%);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
}

/* ==========================================================
   END LAYOUT HELPERS
========================================================== */

/* --- from styles/base/motion.css --- */
/* ==========================================================
   MOTION
   Scroll-triggered reveals used across the whole site.

   HOW IT WORKS:
   1. Add  data-reveal  to any element in the HTML.
   2. /frontend/scripts/modules/reveal.js adds the class
      "is-revealed" when the element scrolls into view.
   3. The CSS below animates the change.

   Variants (value of data-reveal):
   - data-reveal          fade + move up (default)
   - data-reveal="fade"   fade only
   - data-reveal="mask"   image wipes in from bottom (image masks)
   - data-reveal="line"   horizontal line draws from left

   Optional delay:  data-reveal-delay="1" ... "5"

   Without JavaScript nothing is hidden (the .js class is set
   by a script, so content stays visible if JS fails).
========================================================== */


/* REVEAL - DEFAULT (fade + translate) */

.js [data-reveal] {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    transition:
        opacity var(--duration-reveal) var(--ease-cinematic),
        transform var(--duration-reveal) var(--ease-cinematic);
}

.js [data-reveal="fade"] {
    transform: none;
}

/* REVEAL - IMAGE MASK (slow wipe upwards)
   EDIT WITH CARE: the clip is applied to the CHILD (picture/img),
   because browsers do not report fully clipped elements as visible. */

.js [data-reveal="mask"] {
    opacity: 1;
    transform: none;
}

.js [data-reveal="mask"] > * {
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--duration-reveal) var(--ease-cinematic);
}

.js [data-reveal="mask"] img {
    transform: scale(1.08);
    transition: transform calc(var(--duration-reveal) * 1.4) var(--ease-cinematic);
}

/* REVEAL - LINE DRAW */

.js [data-reveal="line"] {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
}

/* REVEALED STATE (added by reveal.js) */

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
}

.js [data-reveal="mask"].is-revealed > * {
    clip-path: inset(0 0 0 0);
}

.js [data-reveal="mask"].is-revealed img {
    transform: scale(1);
}

/* STAGGER DELAYS */

[data-reveal-delay="1"],
[data-reveal-delay="1"][data-reveal="mask"] > * { transition-delay: 120ms !important; }
[data-reveal-delay="2"],
[data-reveal-delay="2"][data-reveal="mask"] > * { transition-delay: 240ms !important; }
[data-reveal-delay="3"],
[data-reveal-delay="3"][data-reveal="mask"] > * { transition-delay: 360ms !important; }
[data-reveal-delay="4"],
[data-reveal-delay="4"][data-reveal="mask"] > * { transition-delay: 480ms !important; }
[data-reveal-delay="5"],
[data-reveal-delay="5"][data-reveal="mask"] > * { transition-delay: 600ms !important; }


/* REDUCED MOTION
   Visitors who ask their system for less motion get no
   animations at all - everything is simply visible. */

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

    .js [data-reveal],
    .js [data-reveal="mask"] > *,
    .js [data-reveal] img {
        opacity: 1;
        transform: none !important;
        clip-path: none !important;
    }
}

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


/* COMPONENTS */
/* --- from styles/components/buttons.css --- */
/* ==========================================================
   BUTTONS & LINKS
   .button--primary  filled button (main action)
   .button--ghost    outlined button (secondary action)
   .text-link        small uppercase link with arrow
   .link-underline   text link with animated underline
   .badge            small label, e.g. "Live demo", "Concept"
========================================================== */


/* BUTTON - BASE */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.95rem 1.7rem;
    border: 1px solid transparent;
    border-radius: var(--border-radius);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    transition:
        background-color var(--duration-medium) var(--ease-cinematic),
        border-color var(--duration-medium) var(--ease-cinematic),
        color var(--duration-medium) var(--ease-cinematic);
}

.button__arrow {
    display: inline-block;
    transition: transform var(--duration-medium) var(--ease-cinematic);
}

.button:hover .button__arrow,
.button:focus-visible .button__arrow {
    transform: translateX(4px);
}


/* BUTTON - PRIMARY (ivory on dark sections, obsidian on light sections) */

.button--primary {
    background-color: var(--color-text);
    color: var(--color-background);
}

.button--primary:hover,
.button--primary:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-obsidian);
}

.theme-light .button--primary:hover,
.theme-light .button--primary:focus-visible {
    color: var(--color-ivory);
}


/* BUTTON - GHOST (outline) */

.button--ghost {
    border-color: color-mix(in srgb, var(--color-text) 35%, transparent);
    color: var(--color-text);
}

.button--ghost:hover,
.button--ghost:focus-visible {
    border-color: var(--color-text);
}

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
}


/* TEXT LINK (uppercase, with arrow) */

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.4rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    transition: border-color var(--duration-medium) var(--ease-cinematic);
}

.text-link:hover,
.text-link:focus-visible {
    border-color: currentColor;
}


/* LINK WITH ANIMATED UNDERLINE */

.link-underline {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size var(--duration-medium) var(--ease-cinematic);
}

.link-underline:hover,
.link-underline:focus-visible {
    background-size: 100% 1px;
}


/* BADGE */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* ==========================================================
   END BUTTONS & LINKS
========================================================== */

/* --- from styles/components/navigation.css --- */
/* ==========================================================
   NAVIGATION
   Site header with logo, desktop menu and mobile menu overlay.
   HTML:   /frontend/components/navigation.html
   SCRIPT: /frontend/scripts/modules/navigation.js
========================================================== */


/* NAVIGATION - HEADER BAR
   A solid, light bar on every page (inspired by editorial shop
   layouts): thin top bar + menu left, logo centred, menu right. */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--layer-header);
    color: var(--color-obsidian);
    background-color: var(--color-ivory);
    border-bottom: 1px solid var(--color-ivory-line);
    transition: transform var(--duration-medium) var(--ease-cinematic);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-medium);
    height: var(--header-bar-height);
}

/* Hidden while scrolling down, shown again when scrolling up */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* While the mobile menu is open, the bar matches the dark overlay */
.site-header.is-menu-open {
    color: var(--color-ivory);
    background-color: var(--color-obsidian);
    border-bottom-color: var(--color-obsidian-line);
}


/* NAVIGATION - TOP BAR (location, positioning, contact) */

.topbar {
    display: none;
    height: var(--topbar-height);
    background-color: var(--color-taupe);
    color: var(--color-ivory);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
}

.topbar__item--center {
    display: flex;
    gap: 1.6em;
}

.topbar__item--end {
    justify-self: end;
}

.topbar a:hover,
.topbar a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

@media (min-width: 760px) {
    .topbar {
        display: block;
    }
}


/* NAVIGATION - LOGO */

.brand-logo {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.brand-logo__mark {
    width: 2.35rem;
    height: 2.35rem;
}

/* dark logo on the light bar, light logo while the menu is open */
.brand-logo__mark--ivory,
.is-menu-open .brand-logo__mark--obsidian {
    display: none;
}

.is-menu-open .brand-logo__mark--ivory {
    display: block;
}

.brand-logo__divider {
    width: 1px;
    height: 1.75rem;
    background-color: currentColor;
    opacity: 0.45;
}

.brand-logo__wordmark {
    font-size: 0.95rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand-logo__first {
    font-weight: 300;
}

.brand-logo__last {
    font-weight: 800;
}


/* NAVIGATION - DESKTOP LINKS */

.site-nav {
    display: none;
}

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2.2vw, 2.4rem);
}

.site-nav--right .site-nav__list {
    justify-content: flex-end;
}

.site-nav__link {
    position: relative;
    display: inline-block;
    padding-block: 0.5rem;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.2rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform var(--duration-medium) var(--ease-cinematic);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after,
.site-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* "Kontakt" as a small dark button */
.site-nav__link--button {
    padding: 0.7rem 1.15rem;
    background-color: var(--color-obsidian);
    color: var(--color-ivory);
    transition: background-color var(--duration-fast) ease;
}

.site-nav__link--button::after {
    display: none;
}

.site-nav__link--button:hover,
.site-nav__link--button:focus-visible,
.site-nav__link--button[aria-current="page"] {
    background-color: var(--color-tobacco);
}


/* NAVIGATION - MOBILE MENU BUTTON */

.menu-toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;            /* touch-friendly size */
    padding-inline: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.menu-toggle__lines {
    display: grid;
    gap: 6px;
    width: 26px;
}

.menu-toggle__lines span {
    display: block;
    height: 1px;
    background-color: currentColor;
    transition: transform var(--duration-medium) var(--ease-cinematic);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__lines span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}


/* NAVIGATION - MOBILE MENU OVERLAY */

.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 2rem;
    overflow-y: auto;
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-standard);
}

.mobile-menu.is-open {
    opacity: 1;
}

.mobile-menu__list {
    display: grid;
    gap: 0.25rem;
}

.mobile-menu__link {
    display: flex;
    align-items: baseline;
    gap: 1.1rem;
    padding-block: 0.45rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 9vw, 3.4rem);
    font-weight: 300;
    line-height: 1.1;
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity var(--duration-slow) var(--ease-cinematic),
        transform var(--duration-slow) var(--ease-cinematic);
}

.mobile-menu.is-open .mobile-menu__link {
    opacity: 1;
    transform: none;
}

.mobile-menu__list li:nth-child(2) .mobile-menu__link { transition-delay: 40ms; }
.mobile-menu__list li:nth-child(3) .mobile-menu__link { transition-delay: 80ms; }
.mobile-menu__list li:nth-child(4) .mobile-menu__link { transition-delay: 120ms; }
.mobile-menu__list li:nth-child(5) .mobile-menu__link { transition-delay: 160ms; }
.mobile-menu__list li:nth-child(6) .mobile-menu__link { transition-delay: 200ms; }
.mobile-menu__list li:nth-child(7) .mobile-menu__link { transition-delay: 240ms; }

.mobile-menu__link[aria-current="page"] {
    font-style: italic;
    color: var(--color-brass);
}

.mobile-menu__number {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: 0.15em;
    color: var(--color-text-muted);
}

.mobile-menu__footer {
    margin-top: 2rem;
}

/* Prevent page scrolling behind the open menu */
.is-menu-locked {
    overflow: hidden;
}


/* NAVIGATION - DESKTOP BREAKPOINT
   EDIT WITH CARE: below this width the mobile menu is used. */

@media (min-width: 1080px) {
    .site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }

    .site-nav {
        display: block;
    }

    .menu-toggle,
    .mobile-menu {
        display: none;
    }
}

/* ==========================================================
   END NAVIGATION
========================================================== */

/* --- from styles/components/footer.css --- */
/* ==========================================================
   FOOTER
   HTML: /frontend/components/footer.html
========================================================== */


/* FOOTER - CONTAINER */

.site-footer {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-large);
    border-top: 1px solid var(--color-line);
}


/* FOOTER - STATEMENT (logo + tagline) */

.site-footer__statement {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-line);
}

.site-footer__mark {
    flex: none;
    width: clamp(3.5rem, 7vw, 5.5rem);
    height: auto;
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
    border-right: 1px solid rgba(238, 234, 224, 0.35);
    box-sizing: content-box;
}

.site-footer__tagline {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 300;
    line-height: 1.05;
}

.site-footer__tagline em {
    color: var(--color-accent);
}


/* FOOTER - LINK COLUMNS */

.site-footer__grid {
    display: grid;
    gap: var(--spacing-large);
    padding-block: var(--spacing-xl);
}

@media (min-width: 720px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr auto;
    }
}

.site-footer__heading {
    margin-bottom: 1.1rem;
    font-family: var(--font-body);
    color: var(--color-accent);
}

.site-footer__list {
    display: grid;
    gap: 0.45rem;
    color: var(--color-text-muted);
}

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


/* FOOTER - BOTTOM BAR */

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-xs);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.site-footer__legal {
    display: flex;
    gap: 1.5rem;
}

/* ==========================================================
   END FOOTER
========================================================== */

/* --- from styles/components/cards.css --- */
/* ==========================================================
   WORK CARDS
   Project cards used in FEATURED WORK (home) and on /work/.
   HTML is generated by /frontend/build/renderers/work.js
========================================================== */


/* WORK CARD - CONTAINER */

.work-card__link {
    display: block;
    color: inherit;
}


/* WORK CARD - IMAGE */

.work-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
}

.work-card--large .work-card__media {
    aspect-ratio: 16 / 11;
}

.work-card__media picture,
.work-card__media img {
    width: 100%;
    height: 100%;
}

.work-card__media img {
    object-fit: cover;
    transition: transform 1600ms var(--ease-cinematic), filter var(--duration-slow) var(--ease-standard);
    filter: saturate(0.92);
}

.work-card__link:hover .work-card__media img,
.work-card__link:focus-visible .work-card__media img {
    transform: scale(1.035);
    filter: saturate(1);
}

/* Subtle cinematic vignette over every card image */
.work-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(9, 10, 9, 0.35));
    pointer-events: none;
}


/* WORK CARD - NODE DIAGRAM (projects without image, e.g. AI workflows) */

.work-card__diagram {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12% 9%;
    background:
        linear-gradient(var(--color-line), var(--color-line)) center / 82% 1px no-repeat,
        var(--color-british-green);
    color: var(--color-ivory);
}

.work-card__node {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border: 1px solid rgba(238, 234, 224, 0.45);
    border-radius: 50%;
    background-color: var(--color-british-green);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.work-card__node small {
    position: absolute;
    top: calc(100% + 0.75rem);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ivory-muted);
    white-space: nowrap;
}


/* WORK CARD - TEXT */

.work-card__body {
    display: grid;
    gap: 0.55rem;
    padding-top: 1.35rem;
}

.work-card__meta {
    color: var(--color-text-muted);
}

.work-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.12;
}

.work-card__text {
    color: var(--color-text-muted);
    max-width: 38rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.work-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.work-card__more {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--duration-medium) var(--ease-cinematic), transform var(--duration-medium) var(--ease-cinematic);
}

.work-card__link:hover .work-card__more,
.work-card__link:focus-visible .work-card__more {
    opacity: 1;
    transform: none;
}

@media (hover: none) {
    .work-card__more {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   END WORK CARDS
========================================================== */

/* --- from styles/components/content-blocks.css --- */
/* ==========================================================
   CONTENT BLOCKS
   Small reusable text elements used on many pages:
   bullet lists, fact lists, project facts, notices,
   breadcrumbs and textures.
========================================================== */


/* BULLET LIST - short line instead of a dot */

.bullet-list {
    display: grid;
    gap: 0.75rem;
}

.bullet-list li {
    position: relative;
}


/* FACT LIST - label + value pairs */

.fact-list {
    display: grid;
    gap: 1rem;
}

.fact-list > div {
    display: grid;
    gap: 0.25rem;
}

.fact-list dt {
    color: var(--color-text-muted);
}


/* PROJECT FACTS - row of key facts under project headlines */

.project-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--spacing-medium);
    padding-block: var(--spacing-medium);
    border-block: 1px solid var(--color-line);
}

.project-facts > div {
    display: grid;
    gap: 0.35rem;
    align-content: start;
}

.project-facts dt {
    color: var(--color-text-muted);
}


/* NOTICE - e.g. "This is a portfolio demonstration" */

.notice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.85rem;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--color-accent);
    background-color: var(--color-surface);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.notice .label {
    color: var(--color-accent);
}


/* BREADCRUMBS */

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: var(--text-xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.breadcrumbs li + li::before {
    content: "/";
    margin-right: 0.5rem;
    opacity: 0.5;
}

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


/* TEXTURES - subtle film grain + topographic lines (nature × precision) */

.texture-grain::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/grain.svg");
    background-size: 240px 240px;
    opacity: 0.07;
    pointer-events: none;
    mix-blend-mode: overlay;
}

.texture-contours {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/contours.svg");
    background-size: cover;
    background-position: center;
    opacity: 0.5;
    pointer-events: none;
}

/* ==========================================================
   END CONTENT BLOCKS
========================================================== */

/* --- from styles/components/filters.css --- */
/* ==========================================================
   FILTERS & VIEW SWITCH
   .filter-bar   category buttons (Work, Creatives, Design)
   .view-switch  CREATIVE / COPY / COMBINED (Creatives page)
   SCRIPTS: /frontend/scripts/modules/filters.js
            /frontend/scripts/modules/creative-views.js
========================================================== */


/* FILTER BAR */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter-bar__button,
.view-switch__button {
    min-height: 44px;              /* touch-friendly */
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.filter-bar__button:hover,
.view-switch__button:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.filter-bar__button[aria-pressed="true"] {
    color: var(--color-background);
    background-color: var(--color-text);
    border-color: var(--color-text);
}


/* VIEW SWITCH (segmented control) */

.view-switch {
    display: inline-flex;
    padding: 4px;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

.view-switch__button {
    border-color: transparent;
}

.view-switch__button[aria-pressed="true"] {
    color: var(--color-text);
    border-color: var(--color-accent);
}


/* FILTERED-OUT ITEMS */

[data-filter-item].is-filtered-out {
    display: none;
}

[data-filter-item].is-filter-entering {
    animation: filter-enter var(--duration-slow) var(--ease-cinematic);
}

@keyframes filter-enter {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

.filter-empty {
    padding-block: var(--spacing-xl);
}

/* ==========================================================
   END FILTERS & VIEW SWITCH
========================================================== */

/* --- from styles/components/forms.css --- */
/* ==========================================================
   FORMS
   Contact form fields, error and success states.
   HTML:   /frontend/components/contact-form.html
   SCRIPT: /frontend/scripts/modules/contact-form.js
========================================================== */


/* CONTACT FORM - LAYOUT */

.contact-form {
    display: grid;
    gap: var(--spacing-medium);
}

.contact-form__grid {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 720px) {
    .contact-form__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* FORM FIELD - LABEL + INPUT */

.form-field {
    display: grid;
    gap: 0.5rem;
}

.form-field__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.form-field__optional {
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-text-muted);
}

.form-field__input {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;                 /* 16px prevents zoom on iOS */
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.form-field__input:hover {
    border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
}

.form-field__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.form-field__input:focus-visible {
    outline: 1px solid var(--color-accent);
    outline-offset: 2px;
}

.form-field__textarea {
    min-height: 10rem;
    resize: vertical;
}

.form-field__select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.3rem) 55%, calc(100% - 0.95rem) 55%;
    background-size: 0.35rem 0.35rem;
    background-repeat: no-repeat;
    padding-right: 2.5rem;
}

.form-field__hint {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* FORM FIELD - ERROR STATE (set by contact-form.js) */

.form-field__error {
    min-height: 0;
    font-size: var(--text-sm);
    color: var(--color-error);
}

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

.form-field__input[aria-invalid="true"] {
    border-color: var(--color-error);
}


/* FORM FIELD - CHECKBOX (privacy consent) */

.form-field--checkbox {
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: 0.85rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.form-field--checkbox .form-field__error {
    grid-column: 1 / -1;
}

.form-field--checkbox a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.form-field__checkbox {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
    accent-color: var(--color-brass);
}


/* SPAM PROTECTION - HONEYPOT (hidden from people, DO NOT REMOVE) */

.contact-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* FORM FOOTER + STATUS MESSAGES */

.contact-form__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-medium);
}

.contact-form__status:empty {
    display: none;
}

.contact-form__status {
    padding: 1.1rem 1.25rem;
    border-left: 2px solid var(--color-line);
    background-color: var(--color-surface);
}

.contact-form__status.is-success {
    border-left-color: var(--color-success);
}

.contact-form__status.is-error {
    border-left-color: var(--color-error);
}

.contact-form__status strong {
    display: block;
    margin-bottom: 0.25rem;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
}

.contact-form__noscript {
    padding: 1rem;
    border: 1px solid var(--color-line);
}

/* ==========================================================
   END FORMS
========================================================== */

/* --- from styles/components/ad-mockup.css --- */
/* ==========================================================
   AD MOCKUP
   Social-ad style frame for creatives: brand, "Sponsored",
   primary text, creative, headline, CTA.

   It shows the STRUCTURE of a social ad in the website's own
   style – it does not copy any platform's interface and is
   labelled "Portfolio mockup – not a live ad".

   HTML: /frontend/build/renderers/creatives.js -> adMockup()
========================================================== */


/* AD MOCKUP - FRAME */

.ad-mockup {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 30rem;
    border: 1px solid rgba(9, 10, 9, 0.08);
    border-radius: var(--border-radius-large);
    background-color: #FBFAF6;
    color: #16130F;
    font-size: 0.875rem;
    line-height: 1.45;
    overflow: hidden;
    box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55);
}


/* AD MOCKUP - HEADER (brand + sponsored) */

.ad-mockup__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 0.95rem 0.6rem;
}

.ad-mockup__avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--color-british-green);
    color: var(--color-ivory);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ad-mockup__identity {
    flex: 1;
    min-width: 0;
}

.ad-mockup__brand {
    font-weight: 700;
    line-height: 1.2;
}

.ad-mockup__sponsored {
    font-size: 0.75rem;
    color: #6A655B;
}

.ad-mockup__dots {
    color: #6A655B;
    letter-spacing: 0.1em;
}


/* AD MOCKUP - PRIMARY TEXT */

.ad-mockup__primary-text {
    display: grid;
    gap: 0.5em;
    padding: 0 0.95rem 0.75rem;
}

/* In grids the text is shortened to 3 lines */
.ad-mockup__primary-text--clamped {
    /* margin instead of padding, so no half 4th line shows */
    padding-bottom: 0;
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-mockup__primary-text--clamped p {
    display: inline;
}

.ad-mockup__primary-text--clamped p + p::before {
    content: " ";
}


/* AD MOCKUP - CREATIVE (image) */

.ad-mockup__creative {
    background-color: #E7E2D6;
}

.ad-mockup__creative picture,
.ad-mockup__creative img {
    width: 100%;
    height: 100%;
}

.ad-mockup__creative img {
    object-fit: cover;
}

.ad-mockup--square .ad-mockup__creative { aspect-ratio: 1 / 1; }
.ad-mockup--portrait .ad-mockup__creative { aspect-ratio: 4 / 5; }
.ad-mockup--story .ad-mockup__creative { aspect-ratio: 9 / 16; }


/* AD MOCKUP - FOOTER (headline + CTA) */

.ad-mockup__footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.95rem;
    background-color: #F1EEE6;
}

.ad-mockup__link {
    flex: 1;
    min-width: 0;
}

.ad-mockup__domain {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6A655B;
}

.ad-mockup__headline {
    font-weight: 700;
    line-height: 1.25;
}

.ad-mockup__description {
    font-size: 0.8rem;
    color: #6A655B;
}

.ad-mockup__cta {
    flex: none;
    padding: 0.55rem 0.85rem;
    border-radius: var(--border-radius);
    background-color: #E2DDD0;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}


/* AD MOCKUP - LABEL ("not a live ad") */

.ad-mockup__label {
    padding: 0.45rem 0.95rem;
    border-top: 1px solid rgba(9, 10, 9, 0.06);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6A655B;
}

/* ==========================================================
   END AD MOCKUP
========================================================== */

/* --- from styles/components/device-preview.css --- */
/* ==========================================================
   DEVICE PREVIEW
   Desktop browser frame + phone frame showing a LIVE funnel
   demo (iframes). Used on /funnels/ and funnel case pages.

   HTML:   /frontend/build/renderers/funnels.js -> devicePreview()
   SCRIPT: /frontend/scripts/modules/device-preview.js
           (scales the iframes to fit the frames)

   EDIT WITH CARE: the scaling depends on the frame widths.
========================================================== */


/* DEVICE PREVIEW - LAYOUT (desktop frame with phone in front) */

.device-preview {
    position: relative;
    padding-bottom: 12%;
    padding-right: 10%;
}


/* DEVICE PREVIEW - DESKTOP FRAME */

.device-preview__desktop {
    border: 1px solid rgba(238, 234, 224, 0.14);
    border-radius: var(--border-radius-large);
    background-color: #050605;
    overflow: hidden;
    box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8);
}

.device-preview__bar {
    display: flex;
    gap: 6px;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid rgba(238, 234, 224, 0.08);
}

.device-preview__bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(238, 234, 224, 0.18);
}


/* DEVICE PREVIEW - SCREEN (iframe is scaled by JS via --preview-scale) */

.device-preview__screen {
    position: relative;
    overflow: hidden;
    --preview-scale: 0.4;
}

.device-preview__desktop .device-preview__screen {
    aspect-ratio: 1440 / 900;
}

.device-preview__mobile .device-preview__screen {
    aspect-ratio: 390 / 844;
}

.device-preview__screen iframe {
    /* EDIT WITH CARE: the iframe keeps its real device size
       (width/height attributes) and is only scaled down. */
    max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    background-color: #fff;
    transform: scale(var(--preview-scale));
    transform-origin: 0 0;
}


/* DEVICE PREVIEW - PHONE FRAME */

.device-preview__mobile {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 27%;
    min-width: 150px;
    padding: 7px;
    border: 1px solid rgba(238, 234, 224, 0.2);
    border-radius: var(--border-radius-device);
    background-color: #050605;
    box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85);
}

.device-preview__mobile .device-preview__screen {
    border-radius: calc(var(--border-radius-device) - 7px);
}

/* ==========================================================
   END DEVICE PREVIEW
========================================================== */

/* --- from styles/components/timeline.css --- */
/* ==========================================================
   TIMELINE
   MY JOURNEY on the About page (CV as a vertical timeline).
   HTML:    /frontend/build/renderers/career.js -> timeline
   CONTENT: /content/career/timeline.json
========================================================== */


/* TIMELINE - LIST + VERTICAL LINE */

.timeline {
    position: relative;
    display: grid;
    gap: 0;
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    bottom: 0.6rem;
    left: 0.45rem;
    width: 1px;
    background-color: var(--color-line);
}


/* TIMELINE - ONE ENTRY */

.timeline__entry {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 0 0 var(--spacing-large) 2.25rem;
}

.timeline__node {
    position: absolute;
    top: 0.45rem;
    left: 0;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-background);
}

.timeline__node::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.timeline__date {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
}

.timeline__type {
    color: var(--color-text-muted);
}

.timeline__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.timeline__organisation {
    font-weight: 600;
}

.timeline__text {
    max-width: 40rem;
    color: var(--color-text-muted);
}

.timeline__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}


/* TIMELINE - DESKTOP (date left, content right, line in the middle) */

@media (min-width: 900px) {
    .timeline::before {
        left: calc(14rem + 1.95rem);
    }

    .timeline__entry {
        grid-template-columns: 14rem 1fr;
        gap: 4rem;
        padding-left: 0;
    }

    .timeline__period {
        text-align: right;
    }

    .timeline__node {
        left: calc(14rem + 1.5rem);
    }
}


/* PLACEHOLDER HIGHLIGHT  e.g. [ADD DATE]
   Visible on purpose so missing info is noticed before launch. */

.placeholder {
    padding: 0.05em 0.35em;
    border: 1px dashed var(--color-accent);
    border-radius: var(--border-radius);
    background: transparent;
    color: var(--color-accent);
    font-family: var(--font-body);
    font-size: 0.8em;
    font-style: normal;
    letter-spacing: 0.06em;
}

/* ==========================================================
   END TIMELINE
========================================================== */

/* --- from styles/components/lightbox.css --- */
/* ==========================================================
   LIGHTBOX
   Full-screen image preview (Design page + project galleries).
   SCRIPT: /frontend/scripts/modules/lightbox.js
   (the HTML is created by the script)
========================================================== */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--layer-lightbox);
    display: grid;
    grid-template-rows: auto 1fr auto;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: rgba(9, 10, 9, 0.97);
    color: var(--color-ivory);
    opacity: 0;
    transition: opacity var(--duration-medium) var(--ease-standard);
}

.lightbox:not([open]) {
    display: none;
}

.lightbox.is-visible {
    opacity: 1;
}

.lightbox::backdrop {
    background: transparent;
}

.lightbox__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem var(--page-gutter);
}

.lightbox__counter {
    font-size: var(--text-xs);
    letter-spacing: var(--letter-spacing-label);
    color: var(--color-ivory-muted);
}

.lightbox__stage {
    display: grid;
    place-items: center;
    min-height: 0;
    padding: 0 var(--page-gutter);
}

.lightbox__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(0.985);
    transition: opacity var(--duration-medium) var(--ease-cinematic), transform var(--duration-slow) var(--ease-cinematic);
}

.lightbox__image.is-loaded {
    opacity: 1;
    transform: none;
}

.lightbox__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem var(--page-gutter) 1.5rem;
}

.lightbox__caption {
    max-width: 50rem;
    font-size: var(--text-sm);
    color: var(--color-ivory-muted);
}

.lightbox__controls {
    display: flex;
    gap: 0.5rem;
}

.lightbox__button {
    display: grid;
    place-items: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 0.9rem;
    border: 1px solid rgba(238, 234, 224, 0.25);
    border-radius: var(--border-radius);
    font-size: var(--text-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: border-color var(--duration-fast) var(--ease-standard);
}

.lightbox__button:hover {
    border-color: var(--color-ivory);
}

.is-lightbox-open {
    overflow: hidden;
}

/* ==========================================================
   END LIGHTBOX
========================================================== */

/* --- from styles/components/qr-share.css --- */
/* ==========================================================
   QR SHARE CARD
   Small, quiet QR code (footer + contact page).
   HTML: /frontend/components/qr-share.html

   EDIT WITH CARE:
   Keep the code at least ~96px wide and keep the light
   background, otherwise phones may fail to scan it.
========================================================== */

.qr-share {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.qr-share__code {
    flex: none;
    width: 7rem;
    height: 7rem;
    border-radius: var(--border-radius);
    background-color: var(--color-ivory); /* fallback while loading */
}

.qr-share__caption {
    display: grid;
    gap: 0.35rem;
    max-width: 12rem;
}

.qr-share__caption .label {
    color: var(--color-accent);
}

.qr-share__url {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
}

/* ==========================================================
   END QR SHARE CARD
========================================================== */

/* --- from styles/components/cursor-label.css --- */
/* ==========================================================
   CURSOR LABEL
   A small round "View" label that follows the mouse over
   project images (desktop with mouse only, never on touch).
   SCRIPT: /frontend/scripts/modules/cursor-label.js
   Activate on an element with:  data-cursor-label="View"
========================================================== */

.cursor-label {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--layer-header);
    display: grid;
    place-items: center;
    width: 5.25rem;
    height: 5.25rem;
    margin: -2.625rem 0 0 -2.625rem;
    border-radius: 50%;
    background-color: var(--color-ivory);
    color: var(--color-obsidian);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    pointer-events: none;
    opacity: 0;
    scale: 0.6;
    transition: opacity var(--duration-medium) var(--ease-cinematic), scale var(--duration-medium) var(--ease-cinematic);
}

.cursor-label.is-active {
    opacity: 1;
    scale: 1;
}

/* ==========================================================
   END CURSOR LABEL
========================================================== */

/* --- from styles/components/portfolio-subnav.css --- */
/* ==========================================================
   PORTFOLIO SUB-NAVIGATION
   Links between the portfolio areas (Ausgewählte Arbeiten,
   Funnels, Creatives, Design, KI & Systeme).
   HTML: /frontend/components/portfolio-subnav.html
========================================================== */

.portfolio-subnav {
    border-block: 1px solid var(--color-line);
    background-color: var(--color-background);
}

.portfolio-subnav__list {
    display: flex;
    gap: var(--spacing-large);
    overflow-x: auto;
    scrollbar-width: none;
}

.portfolio-subnav__list::-webkit-scrollbar {
    display: none;
}

.portfolio-subnav__link {
    display: inline-block;
    padding-block: 1.15rem;
    border-bottom: 1px solid transparent;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-muted);
    transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}

.portfolio-subnav__link:hover,
.portfolio-subnav__link:focus-visible {
    color: var(--color-text);
}

.portfolio-subnav__link[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* Space between the sub-navigation and a section that has no top padding */
.portfolio-subnav + .section--flush-top {
    padding-top: var(--spacing-xl);
}

/* ==========================================================
   END PORTFOLIO SUB-NAVIGATION
========================================================== */


/* SECTIONS */
/* --- from styles/sections/hero.css --- */
/* ==========================================================
   HERO SECTION
   Light editorial hero: a very large LUKAS UDE wordmark with the
   cut-out portrait standing in front of it. A short claim sits on
   the left, the positioning on the right.
   HTML: /frontend/pages/index.html -> HERO SECTION
========================================================== */


/* HERO - MAIN CONTAINER */

.hero {
    position: relative;
    padding-top: var(--header-height);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 55% 60% at 50% 70%, rgba(255, 255, 255, 0.55), transparent 70%),
        var(--color-background);
}

.hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
}


/* HERO - CLAIM  ("Aus Klicks werden Kunden.")
   Phones: centred block above the portrait.
   Desktop: the words are placed AROUND the portrait (see below). */

.hero__wordmark {
    position: relative;
    z-index: 0;
    margin-top: var(--spacing-medium);
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 13vw, 9rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.02em;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-obsidian);
}

.hero__word {
    display: inline-block;
}

/* "Kunden." is the hero of the claim: much larger, italic, brand colour */
.hero__word--accent {
    display: block;
    font-size: 1.7em;
    font-style: italic;
    font-weight: 400;
    line-height: 0.95;
    text-transform: none;
    color: var(--color-tobacco);
}


/* HERO - PORTRAIT  (cut-out photo in front of the wordmark) */

/* Phones: as wide as the screen allows, height follows the photo */
.hero__figure {
    position: relative;
    z-index: 1;
    align-self: center;
    width: min(100%, 460px);
    margin-top: var(--spacing-small);
    pointer-events: none;
}

.hero__figure picture,
.hero__figure img {
    width: 100%;
    height: auto;
}

.hero__figure img {
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 30px 40px rgba(9, 10, 9, 0.18));
}


/* HERO - SIDE TEXTS */

.hero__side {
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

/* Phones: big claim first, then name + button, then the portrait */
.hero__wordmark {
    order: -2;
}

.hero__side--left {
    order: -1;
    justify-items: center;
    margin-top: var(--spacing-large);
    text-align: center;
}

.hero__side--right {
    display: none;           /* phones: the band below shows the services */
}

.hero__claim {
    font-size: clamp(1rem, 0.85rem + 0.55vw, 1.35rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.hero__claim--stacked {
    display: grid;
}

.hero__place {
    color: var(--color-text-muted);
}


/* HERO - DESKTOP  (wordmark in one line, texts left and right) */

@media (min-width: 900px) {
    .hero__stage {
        display: block;
        height: clamp(620px, calc(100svh - var(--header-height)), 940px);
        min-height: 0;
    }

    /* The claim frames the portrait: two words left, two words right */
    .hero__wordmark {
        position: absolute;
        inset: 0;
        margin: 0;
        font-size: clamp(4.5rem, 8.4vw, 10rem);
        text-align: left;
    }

    .hero__word {
        position: absolute;
    }

    .hero__word--1 { top: 7%; left: var(--page-gutter); }
    .hero__word--2 { top: calc(7% + 0.9em); left: var(--page-gutter); }
    .hero__word--3 { top: 7%; right: var(--page-gutter); }

    .hero__word--accent {
        top: calc(7% + 0.62em);
        right: var(--page-gutter);
        font-size: 1.5em;
    }

    /* centred with margins (not transform: the reveal animation uses transform) */
    .hero__figure picture,
    .hero__figure img {
        width: auto;
        height: 100%;
        max-width: none;
    }

    .hero__figure {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        width: fit-content;
        height: 88%;
        margin: 0 auto;
    }

    .hero__side {
        position: absolute;
        bottom: clamp(3rem, 12%, 7rem);
        z-index: 2;
        max-width: 17rem;
        margin-top: 0;
    }

    .hero__side--left {
        left: var(--page-gutter);
    }

    .hero__side--right {
        display: grid;
        right: var(--page-gutter);
    }
}

/* Smaller laptops: "Kunden." a little smaller so it clears the head */
@media (min-width: 900px) and (max-width: 1199px) {
    .hero__word--accent {
        font-size: 1.32em;
    }
}

/* ==========================================================
   END HERO SECTION
========================================================== */

/* --- from styles/sections/home.css --- */
/* ==========================================================
   HOMEPAGE SECTIONS
   - SERVICES BAND   dark band with four service tiles
   - STORY BANNER    full-width image with big headline
   - PROMISES ROW    four promises with line icons
   - SELECTED WORK   four calm project cards
   HTML: /frontend/pages/index.html
========================================================== */


/* SERVICES BAND */

.services-band {
    background-color: var(--color-background);
    color: var(--color-text);
    padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

.services-band__list {
    display: grid;
    gap: var(--spacing-medium);
}

.services-band__link {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.services-band__image {
    flex: none;
    width: clamp(5.5rem, 8vw, 7.5rem);
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--color-surface);
}

.services-band__image picture,
.services-band__image img {
    width: 100%;
    height: 100%;
}

.services-band__image img {
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.services-band__link:hover .services-band__image img {
    transform: scale(1.06);
}

.services-band__body {
    display: grid;
    gap: 0.35rem;
}

.services-band__title {
    font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.35rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.services-band__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.services-band__more {
    margin-top: 0.4rem;
    justify-self: start;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid currentColor;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

@media (min-width: 700px) {
    .services-band__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .services-band__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* STORY BANNER */

.story-banner {
    position: relative;
    display: flex;
    align-items: center;
    min-height: clamp(460px, 70svh, 720px);
    overflow: hidden;
    isolation: isolate;
}

.story-banner__media {
    position: absolute;
    inset: -8% 0;
    z-index: -1;
}

.story-banner__media picture,
.story-banner__media img {
    width: 100%;
    height: 100%;
}

.story-banner__media img {
    object-fit: cover;
    object-position: 50% 62%;   /* keeps the forest road in view */
}

/* darkens the left side so the headline stays readable */
.story-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 9, 0.82) 0%, rgba(9, 10, 9, 0.45) 55%, rgba(9, 10, 9, 0.15) 100%);
}

.story-banner__inner {
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
    padding-block: var(--spacing-2xl);
}

.story-banner__title {
    font-size: clamp(2.8rem, 1.6rem + 5vw, 6rem);
    line-height: 0.92;
}

.story-banner__text {
    max-width: 34rem;
    color: var(--color-ivory);
}


/* PROMISES ROW */

.promises {
    background-color: var(--color-background);
    color: var(--color-text);
    padding-block: clamp(2rem, 4vw, 3.25rem);
}

.promises__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-large) var(--spacing-medium);
}

.promises__item {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
}

.promises__icon {
    flex: none;
    width: 2rem;
    height: 2rem;
}

.promises__title {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.promises__text {
    display: block;
    margin-top: 0.2rem;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (min-width: 1000px) {
    .promises__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* SELECTED WORK  (four calm project cards) */

.selected-work__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
}

.selected-work__intro {
    max-width: 36rem;
    margin-top: var(--spacing-small);
}

.work-tiles {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 700px) {
    .work-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .work-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.work-tile__link {
    display: grid;
    gap: 0.5rem;
}

/* The graphic is shown completely (never cropped) on a sand card */
.work-tile__media {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 5;
    margin-bottom: 0.6rem;
    padding: clamp(1rem, 2vw, 1.75rem);
    background-color: var(--color-sand);
    overflow: hidden;
}

.work-tile__media picture {
    display: contents;
}

.work-tile__media img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 18px 30px rgba(9, 10, 9, 0.16);
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.work-tile__link:hover .work-tile__media img,
.work-tile__link:focus-visible .work-tile__media img {
    transform: translateY(-6px);
}

.work-tile__meta {
    color: var(--color-accent);
}

.work-tile__title {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.work-tile__category {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* STEPS COMPACT  (six steps with icons, one line each) */

.steps-compact {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-large) var(--spacing-medium);
}

.steps-compact__line {
    display: none;
}

.steps-compact__item {
    display: grid;
    gap: 0.4rem;
    align-content: start;
}

.steps-compact__icon {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: 0.4rem;
    padding: 0.45rem;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    background-color: var(--color-background);
    color: var(--color-accent);
}

.steps-compact__number {
    color: var(--color-text-muted);
}

.steps-compact__title {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.steps-compact__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Desktop: six columns on one line, connected by a line that draws in */
@media (min-width: 1000px) {
    .steps-compact {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .steps-compact__line {
        display: block;
        position: absolute;
        top: 1.2rem;
        left: 1.2rem;
        right: 1.2rem;
        height: 1px;
        background-color: var(--color-line);
        transform-origin: left center;
    }

    .js .steps-compact__line[data-reveal="line"] {
        transform: scaleX(0);
        transition: transform 1800ms var(--ease-cinematic);
    }

    .js .steps-compact__line[data-reveal="line"].is-revealed {
        transform: none;
    }

    .steps-compact__icon {
        position: relative;
    }
}

/* ==========================================================
   END HOMEPAGE SECTIONS
========================================================== */

/* --- from styles/sections/page-hero.css --- */
/* ==========================================================
   PAGE HERO
   The opening section of every sub page (Work, Funnels,
   Creatives, Design, AI, About, Contact, project pages).
   HTML: top section of each file in /frontend/pages/
========================================================== */


/* PAGE HERO - CONTAINER */

.page-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-xl);
}

.page-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.page-hero__title {
    max-width: 16ch;
}

.page-hero__title em {
    display: block;
}

.page-hero__intro {
    max-width: 38rem;
}


/* PAGE HERO - SPLIT VARIANT (title left, text right) */

@media (min-width: 900px) {
    .page-hero--split .page-hero__inner {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
        align-items: end;
        column-gap: var(--spacing-2xl);
    }

    .page-hero--split .page-hero__eyebrow {
        grid-column: 1 / -1;
    }
}


/* PAGE HERO - TOOLBAR (filters under the hero) */

.page-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-small);
    padding-block: var(--spacing-medium);
    border-block: 1px solid var(--color-line);
    margin-bottom: var(--spacing-xl);
}

/* PAGE HERO - WITH BACKGROUND IMAGE  (class "page-hero--image")
   The photo fills the hero, a dark gradient keeps the text readable.
   Change the photo in the page file (EDIT: BACKGROUND IMAGE). */

.page-hero--image {
    isolation: isolate;
    padding-bottom: var(--spacing-2xl);
}

.page-hero__media {
    position: absolute;
    inset: -6% 0;
    z-index: -2;
}

.page-hero__media picture,
.page-hero__media img {
    width: 100%;
    height: 100%;
}

.page-hero__media img {
    object-fit: cover;
    object-position: 50% 50%;
}

/* image focus: "low" shows the lower part, "road" the forest road */
.page-hero--pos-low .page-hero__media img { object-position: 50% 70%; }
.page-hero--pos-road .page-hero__media img { object-position: 50% 62%; }
.page-hero--pos-moose .page-hero__media img { object-position: 50% 55%; }

/* Moose photo on desktop: the image is shown larger and moved to the
   right, so the moose stands next to the headline instead of behind it.
   (The photo itself is not changed, only how much of it is visible.) */
@media (min-width: 900px) {
    .page-hero--pos-moose .page-hero__media img {
        position: absolute;
        top: 50%;
        left: -4%;
        width: 135%;
        max-width: none;
        height: auto;
        transform: translateY(-50%);
    }
}

.page-hero--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 9, 0.85) 0%, rgba(9, 10, 9, 0.5) 45%, rgba(9, 10, 9, 0.15) 100%);
}

.page-hero--image .page-hero__intro {
    color: var(--color-ivory);
}

/* ==========================================================
   END PAGE HERO
========================================================== */

/* --- from styles/sections/brand-core.css --- */
/* ==========================================================
   BRAND CORE SECTION
   Light editorial statement + three working principles (stacked).
   HTML: /frontend/pages/index.html -> BRAND CORE SECTION
========================================================== */


/* BRAND CORE - LAYOUT */

.brand-core__inner {
    display: grid;
    gap: var(--spacing-large);
}

.brand-core__statement {
    max-width: 18ch;
}

.brand-core__statement em {
    display: block;
}

.brand-core__columns {
    display: grid;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-large);
}

.brand-core__text {
    display: grid;
    gap: var(--spacing-medium);
    align-content: start;
}


/* BRAND CORE - VALUES */

.brand-core__values {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-large) var(--spacing-medium);
}

.brand-core__value {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--color-line);
}

.brand-core__value-number {
    color: var(--color-accent);
}

.brand-core__value-title {
    font-size: var(--text-xl);
    font-weight: 400;
}


/* BRAND CORE - DESKTOP */

@media (min-width: 900px) {
    .brand-core__columns {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--spacing-2xl);
        padding-left: 12%;
    }
}

/* ==========================================================
   END BRAND CORE SECTION
========================================================== */

/* --- from styles/sections/services.css --- */
/* ==========================================================
   SERVICES SECTION
   Editorial list of disciplines with hover image (desktop).
   HTML:   /frontend/pages/index.html -> SERVICES SECTION
   SCRIPT: /frontend/scripts/modules/services-preview.js
========================================================== */


/* SERVICES - LAYOUT */

.services__layout {
    display: grid;
    gap: var(--spacing-xl);
}

.services__list {
    border-top: 1px solid var(--color-line);
}


/* SERVICES - ONE ROW */

.services__item {
    border-bottom: 1px solid var(--color-line);
}

.services__link {
    display: grid;
    grid-template-columns: 2.5rem 1fr auto;
    grid-template-areas:
        "number title arrow"
        ".      text  .";
    column-gap: var(--spacing-small);
    row-gap: 0.4rem;
    padding-block: clamp(1.4rem, 2.5vw, 2.1rem);
    transition: padding var(--duration-slow) var(--ease-cinematic);
}

.services__number {
    grid-area: number;
    padding-top: 0.7em;
    color: var(--color-accent);
}

.services__title {
    grid-area: title;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 300;
    line-height: 1.15;
    transition: transform var(--duration-slow) var(--ease-cinematic), color var(--duration-medium) var(--ease-standard);
}

.services__text {
    grid-area: text;
    max-width: 32rem;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.services__arrow {
    grid-area: arrow;
    align-self: center;
    font-size: 1.3rem;
    color: var(--color-text-muted);
    transition: transform var(--duration-slow) var(--ease-cinematic), color var(--duration-medium) var(--ease-standard);
}

.services__link:hover .services__title,
.services__link:focus-visible .services__title {
    transform: translateX(0.6rem);
}

.services__link:hover .services__arrow,
.services__link:focus-visible .services__arrow {
    transform: translateX(0.4rem);
    color: var(--color-accent);
}

/* When one row is hovered, the others step back */
.services__list:hover .services__item:not(:hover) .services__title {
    color: var(--color-text-muted);
}


/* SERVICES - HOVER PREVIEW IMAGES (desktop only) */

.services__preview {
    display: none;
}


/* SERVICES - DESKTOP */

@media (min-width: 1000px) {
    .services__layout {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
        align-items: start;
    }

    .services__title {
        font-size: var(--text-2xl);
    }

    .services__number {
        padding-top: 1.2em;
    }

    .services__preview {
        position: sticky;
        top: calc(var(--header-height) + 2rem);
        display: block;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: var(--border-radius);
        background-color: var(--color-surface);
    }

    .services__preview-image {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: scale(1.06);
        transition: opacity var(--duration-slow) var(--ease-standard), transform 1800ms var(--ease-cinematic);
    }

    .services__preview-image.is-active {
        opacity: 1;
        transform: scale(1);
    }

    .services__preview-image picture,
    .services__preview-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .services__preview::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, transparent 55%, rgba(9, 10, 9, 0.55));
    }
}

/* ==========================================================
   END SERVICES SECTION
========================================================== */

/* --- from styles/sections/featured-work.css --- */
/* ==========================================================
   FEATURED WORK SECTION
   Asymmetric editorial grid of selected projects (home).
   HTML: /frontend/build/renderers/work.js -> "featured-work"
========================================================== */


/* FEATURED WORK - HEADER */

.featured-work__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
    padding-top: var(--spacing-section);
    border-top: 1px solid var(--color-line);
}

.featured-work__intro {
    margin-top: var(--spacing-medium);
}


/* FEATURED WORK - GRID */

.featured-work__grid {
    display: grid;
    gap: var(--spacing-xl);
}


/* FEATURED WORK - DESKTOP (staggered 12-column layout) */

@media (min-width: 900px) {
    .featured-work__grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--spacing-large);
        row-gap: var(--spacing-2xl);
    }

    .featured-work__grid > :nth-child(4n + 1) { grid-column: 1 / span 7; }
    .featured-work__grid > :nth-child(4n + 2) { grid-column: 9 / span 4; margin-top: var(--spacing-2xl); }
    .featured-work__grid > :nth-child(4n + 3) { grid-column: 2 / span 5; }
    .featured-work__grid > :nth-child(4n + 4) { grid-column: 7 / span 6; margin-top: calc(var(--spacing-2xl) * -1); }
}

/* ==========================================================
   END FEATURED WORK SECTION
========================================================== */

/* --- from styles/sections/process.css --- */
/* ==========================================================
   PROCESS SECTION
   The steps of a project with a connecting line that draws
   in on scroll. The homepage uses the "--detailed" version
   (six steps with tags, two columns on desktop).
   HTML: /frontend/pages/index.html -> PROCESS SECTION
   (the same classes are reused on /ai/ and /funnels/)
========================================================== */


/* PROCESS - STEPS */

.process__steps {
    position: relative;
    display: grid;
    gap: var(--spacing-large);
    padding-left: 2.25rem;
}

/* The connecting line (vertical on mobile, horizontal on desktop) */
.process__line {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 0.45rem;
    width: 1px;
    background-color: var(--color-accent);
    opacity: 0.6;
}

.js .process__line[data-reveal="line"] {
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 2200ms var(--ease-cinematic);
}

.js .process__line[data-reveal="line"].is-revealed {
    transform: none;
}

.process__step {
    position: relative;
    display: grid;
    gap: 0.4rem;
}

.process__node {
    position: absolute;
    top: 0.35rem;
    left: -2.25rem;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    background-color: var(--color-background);
}

.process__number {
    color: var(--color-accent);
}

.process__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.process__text {
    color: var(--color-text-muted);
    max-width: 22rem;
}


/* PROCESS - DESKTOP (horizontal) */

@media (min-width: 900px) {
    .process__steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--spacing-medium);
        padding-left: 0;
        padding-top: 2.5rem;
    }

    .process__line {
        top: 0.45rem;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
    }

    .js .process__line[data-reveal="line"] {
        transform: scaleX(0);
        transform-origin: left center;
    }

    .process__node {
        top: -2.5rem;
        left: 0;
    }
}

/* PROCESS - THREE OR FOUR STEPS (e.g. /leistungen/) */

@media (min-width: 900px) {
    .process__steps--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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


/* PROCESS - DETAILED VERSION (homepage)
   Each step has its own top line instead of one long line,
   so the steps can wrap into two rows on desktop. */

.process__steps--detailed {
    gap: var(--spacing-xl);
}

.process__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.process__steps--detailed .process__step {
    gap: 0.75rem;
}

.process__steps--detailed .process__text {
    max-width: 36rem;
}

@media (min-width: 900px) {
    .process__steps--detailed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
        row-gap: var(--spacing-xl);
        padding-top: 0;
    }

    .process__steps--detailed .process__step {
        align-content: start;
        padding-top: 2.5rem;
        border-top: 1px solid var(--color-line);
    }

    .process__steps--detailed .process__node {
        top: -0.5rem;
    }

    /* one line per step on desktop, so the long line is hidden */
    .process__steps--detailed .process__line {
        display: none;
    }
}


/* PROCESS - COLLABORATION BLOCK (below the steps) */

.process__collaboration {
    display: grid;
    gap: var(--spacing-large);
    margin-top: var(--spacing-section);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.process__collaboration-title {
    margin-top: var(--spacing-small, 1rem);
}

.process__collaboration-text {
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

@media (min-width: 900px) {
    .process__collaboration {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-xl);
    }
}

/* ==========================================================
   END PROCESS SECTION
========================================================== */

/* --- from styles/sections/about-teaser.css --- */
/* ==========================================================
   ABOUT SECTION (homepage teaser)
   Two overlapping images + short introduction.
   HTML: /frontend/pages/index.html -> ABOUT SECTION
========================================================== */


/* ABOUT - LAYOUT */

.about-teaser__inner {
    display: grid;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-section);
    border-top: 1px solid var(--color-line);
}

.about-teaser__content {
    display: grid;
    gap: var(--spacing-medium);
    align-content: center;
    justify-items: start;
}


/* ABOUT - IMAGES */

.about-teaser__images {
    position: relative;
    padding-bottom: 18%;
}

.about-teaser__image {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.about-teaser__image picture,
.about-teaser__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-teaser__image--large {
    width: 78%;
    aspect-ratio: 4 / 5;
}

.about-teaser__image--small {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 46%;
    aspect-ratio: 1;
    outline: 10px solid var(--color-background);
}


/* ABOUT - DESKTOP */

@media (min-width: 900px) {
    .about-teaser__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
    }
}

/* ==========================================================
   END ABOUT SECTION
========================================================== */

/* --- from styles/sections/cta.css --- */
/* ==========================================================
   CTA SECTION
   Green "Let's build something that works." band.
   HTML: /frontend/components/cta-band.html
========================================================== */

.cta {
    position: relative;
    overflow: hidden;
    padding-block: var(--spacing-section);
}

/* Faint topographic lines in the background */
.cta__lines {
    position: absolute;
    inset: 0;
    background-image: url("/assets/images/textures/contours.svg");
    background-size: cover;
    background-position: 30% 50%;
    opacity: 0.8;
    pointer-events: none;
}

.cta__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

.cta__heading em {
    display: inline-block;
}

.cta__text {
    max-width: 36rem;
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-small);
    margin-top: var(--spacing-small);
}

/* ==========================================================
   END CTA SECTION
========================================================== */


/* PAGES */
/* --- from styles/pages/work.css --- */
/* ==========================================================
   WORK PAGE
   Grid of all projects on /work/.
   HTML: /frontend/pages/work.html
         /frontend/build/renderers/work.js -> "work-grid"
========================================================== */

/* WORK GRID - two staggered columns on desktop */

.work-grid {
    display: grid;
    gap: var(--spacing-xl);
}

@media (min-width: 800px) {
    .work-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--spacing-large);
        row-gap: var(--spacing-2xl);
    }

    /* Every second card starts lower -> editorial rhythm */
    .work-grid > :nth-child(even):not(.is-filtered-out) {
        margin-top: var(--spacing-xl);
    }
}

/* ==========================================================
   END WORK PAGE
========================================================== */

/* --- from styles/pages/services.css --- */
/* ==========================================================
   LEISTUNGEN PAGE  (service packages)
   HTML:     /frontend/pages/leistungen.html
   CONTENT:  /content/leistungen/pakete.json
   CARDS:    /frontend/build/renderers/services.js
========================================================== */


/* PACKAGES - GRID */

.packages {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 760px) {
    .packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .packages {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* PACKAGES - CARD */

.package {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.package--highlight {
    border-color: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.package__number {
    color: var(--color-accent);
}

.package__name {
    font-size: var(--text-xl);
    font-weight: 400;
}

.package__price {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.package__summary {
    color: var(--color-text-muted);
}

.package__list {
    display: grid;
    gap: 0.55rem;
    padding-block: 1rem;
    border-block: 1px solid var(--color-line);
    font-size: var(--text-sm);
}

.package__list li {
    position: relative;
    padding-left: 1.5rem;
}

/* small check mark in front of every list item */
.package__list li::before {
    content: "";
    position: absolute;
    left: 0.1rem;
    top: 0.35em;
    width: 0.7rem;
    height: 0.4rem;
    border-left: 1.5px solid var(--color-accent);
    border-bottom: 1.5px solid var(--color-accent);
    transform: rotate(-45deg);
}

.package__ideal {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.package__ideal .label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-text);
}

.package__button {
    align-self: flex-start;
    margin-top: 0.5rem;
}

/* PACKAGE CARD - BUTTONS */

.package__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: auto;
}


/* PACKAGE PAGES  (/leistungen/<slug>/) */

/* Two columns: heading or points left, text or card right */
.service-split {
    display: grid;
    gap: var(--spacing-xl);
}

@media (min-width: 900px) {
    .service-split {
        grid-template-columns: 5fr 6fr;
        column-gap: var(--spacing-2xl);
        align-items: start;
    }
}

.service-split__text {
    display: grid;
    gap: 1.25rem;
    font-size: var(--text-md);
    color: var(--color-text-muted);
}

.service-benefits {
    margin-top: var(--spacing-medium);
}

.package--detail {
    background-color: var(--color-ivory);
}

.service-related {
    margin-top: var(--spacing-large);
}


/* FAQ  (native <details> elements) */

.faq {
    border-top: 1px solid var(--color-line);
}

.faq__item {
    border-bottom: 1px solid var(--color-line);
}

.faq__question {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.25rem;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question::after {
    content: "+";
    flex: none;
    font-weight: 400;
    color: var(--color-accent);
    transition: transform var(--duration-fast) ease;
}

.faq__item[open] .faq__question::after {
    transform: rotate(45deg);
}

.faq__answer {
    padding-bottom: 1.4rem;
    color: var(--color-text-muted);
    max-width: 40rem;
}


/* OTHER PACKAGES (links at the end of a package page) */

.service-others__label {
    margin-top: var(--spacing-xl);
    margin-bottom: 0.5rem;
    color: var(--color-text-muted);
}

.service-others {
    border-top: 1px solid var(--color-line);
}

.service-others__link {
    display: flex;
    justify-content: space-between;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--text-sm);
}

.service-others__link:hover {
    color: var(--color-accent);
}

/* ==========================================================
   END LEISTUNGEN PAGE
========================================================== */

/* --- from styles/pages/news.css --- */
/* ==========================================================
   NEWS  (article list, homepage teaser, article page)
   HTML:     /frontend/pages/news.html
             /frontend/templates/news-article.html
   CONTENT:  /content/news/<article>/article.md
   CARDS:    /frontend/build/renderers/news.js
========================================================== */


/* NEWS - GRID OF ARTICLE CARDS */

.news-grid {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 760px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .news-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* NEWS - CARD */

.news-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
    transition: border-color var(--duration-fast) ease;
}

.news-card__link:hover,
.news-card__link:focus-visible {
    border-color: var(--color-accent);
}

.news-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    color: var(--color-accent);
}

.news-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: var(--line-height-heading);
}

.news-card__text {
    color: var(--color-text-muted);
}

.news-card__more {
    margin-top: auto;
    padding-top: 0.5rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
}


/* NEWS - ARTICLE PAGE */

.news-article__hero {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.news-article__header {
    display: grid;
    gap: var(--spacing-medium);
    max-width: calc(var(--content-width-text) + 2 * var(--page-gutter));
}

.news-article__header .eyebrow {
    flex-wrap: wrap;
}

.news-article__title {
    max-width: 20ch;
}

.news-article__author {
    color: var(--color-text-muted);
}

.news-article__cover {
    margin-bottom: var(--spacing-xl);
}

.news-article__cover img {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius);
}

/* Header, text and "more" links share one centred reading column */
.news-article__text,
.news-more {
    max-width: var(--content-width-text);
    margin-inline: auto;
}

.news-article__text {
    font-size: var(--text-md);
}

.news-article__text ol {
    padding-left: 1.4em;
    list-style: decimal;
}

.news-article__text ul {
    list-style: disc;
}

.news-article__text li + li {
    margin-top: 0.4em;
}

.news-article__text blockquote {
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-style: italic;
}


/* NEWS - NEWER / OLDER ARTICLE */

.news-more {
    display: grid;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-large);
    border-top: 1px solid var(--color-line);
}

.news-more__link {
    display: grid;
    gap: 0.4rem;
}

.news-more__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.news-more__link:hover .news-more__title {
    color: var(--color-accent);
}

@media (min-width: 760px) {
    .news-more {
        grid-template-columns: 1fr 1fr;
    }

    .news-more__link--next {
        text-align: right;
    }
}

/* ==========================================================
   END NEWS
========================================================== */

/* --- from styles/pages/portfolio.css --- */
/* ==========================================================
   PORTFOLIO (Selected Work)
   Overview page /portfolio/ and the portfolio project pages.
   HTML: /frontend/pages/portfolio.html
         /frontend/templates/portfolio-project.html
         /frontend/build/renderers/portfolio.js

   IMAGE RULE:
   The graphics contain finished typography. They are shown at
   their own aspect ratio (no cropping, no filters, no frames).
========================================================== */


/* PORTFOLIO - HERO */

.portfolio-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-xl);
}

.portfolio-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-hero__title {
    font-weight: 300;
}

.portfolio-hero__intro {
    max-width: 36rem;
}

.portfolio-hero__line {
    color: var(--color-accent);
}

/* Small vertical chapter label at the left edge (desktop only) */
.portfolio-hero__chapter {
    display: none;
}

@media (min-width: 1200px) {
    .portfolio-hero__chapter {
        position: absolute;
        left: 1.25rem;
        bottom: var(--spacing-xl);
        display: block;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        color: var(--color-text-muted);
    }
}


/* PORTFOLIO - GRID
   Mobile: one column. Desktop: asymmetric 12-column layout,
   card positions come from "layout" in project.json. */

.portfolio-grid {
    display: grid;
    gap: var(--spacing-2xl);
}

@media (min-width: 1000px) {
    .portfolio-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        column-gap: var(--spacing-large);
        row-gap: var(--spacing-section);
        align-items: end;
    }

    .portfolio-card--feature { grid-column: 1 / span 7; }
    .portfolio-card--side    { grid-column: 9 / span 4; }
    .portfolio-card--tall    { grid-column: 1 / span 5; }
    .portfolio-card--wide    { grid-column: 7 / span 6; }
    .portfolio-card--closing { grid-column: 1 / -1; }
}


/* PORTFOLIO CARD */

.portfolio-card__link {
    display: grid;
    gap: var(--spacing-medium);
    color: inherit;
}

/* Images: natural aspect ratio, bottoms aligned when there are several */
.portfolio-card__media {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-small);
}

.portfolio-card__image {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.portfolio-card__image img {
    width: 100%;
    height: auto;
    transition: transform 1600ms var(--ease-cinematic);
}

.portfolio-card__link:hover .portfolio-card__image img,
.portfolio-card__link:focus-visible .portfolio-card__image img {
    transform: scale(1.015);
}

/* Three motifs on small screens: one large, two below */
@media (max-width: 699px) {
    .portfolio-card__media--count-3 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .portfolio-card__media--count-3 .portfolio-card__image:first-child {
        grid-column: 1 / -1;
    }
}

/* Card text */
.portfolio-card__body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem var(--spacing-medium);
    align-items: baseline;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.portfolio-card__index {
    color: var(--color-accent);
}

.portfolio-card__text {
    display: grid;
    gap: 0.3rem;
}

.portfolio-card__title {
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.12;
}

.portfolio-card__category {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.portfolio-card__meta {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.portfolio-card__action {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    padding-bottom: 0.2rem;
    transition: background-size var(--duration-medium) var(--ease-cinematic);
}

.portfolio-card__link:hover .portfolio-card__action,
.portfolio-card__link:focus-visible .portfolio-card__action {
    background-size: 100% 1px;
}

/* Closing card: the first motif (main image) is shown large */
@media (min-width: 700px) {
    .portfolio-card--closing .portfolio-card__image:first-child {
        flex-grow: 2;
    }
}

.portfolio-card--closing .portfolio-card__title {
    font-size: var(--text-2xl);
}


/* PORTFOLIO CARDS IN OTHER GRIDS (/work/, homepage)
   Graphics keep their full image – no 4:3 crop. */

.work-card--poster .work-card__media {
    aspect-ratio: auto;
}

.work-card--poster .work-card__media picture,
.work-card--poster .work-card__media img {
    height: auto;
}

.work-card--poster .work-card__media::after {
    display: none;
}


/* PORTFOLIO PROJECT - A. HEADER */

.portfolio-project-hero {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.portfolio-project-hero__inner {
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-project-hero__title {
    max-width: 20ch;
}

.portfolio-project-hero__intro {
    max-width: 44rem;
}

.portfolio-project-hero .notice {
    margin-top: var(--spacing-medium);
}


/* PORTFOLIO PROJECT - B. MAIN MOTIF + D. FURTHER MOTIFS
   Complete graphic, centred, never taller than the screen. */

.portfolio-stage {
    padding-bottom: var(--spacing-section);
}

.portfolio-motif {
    display: grid;
    justify-items: center;
    gap: 0.75rem;
}

.portfolio-motif__link {
    display: block;
    max-width: 100%;
}

.portfolio-motif img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 88vh;
    border-radius: var(--border-radius);
}

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

.portfolio-more__grid {
    display: grid;
    gap: var(--spacing-xl) var(--spacing-large);
    align-items: end;
}

@media (min-width: 900px) {
    .portfolio-more__grid--2 {
        grid-template-columns: 1fr 1fr;
    }
}


/* PORTFOLIO PROJECT - C. DESCRIPTION */

.portfolio-brief {
    display: grid;
    gap: var(--spacing-xl);
}

.portfolio-brief__item {
    display: grid;
    gap: var(--spacing-small);
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.portfolio-brief__label {
    color: var(--color-accent);
}

.portfolio-brief__item p {
    font-size: var(--text-md);
    line-height: 1.7;
}

@media (min-width: 900px) {
    .portfolio-brief {
        grid-template-columns: 1fr 1.3fr 0.8fr;
        gap: var(--spacing-xl);
    }
}


/* PORTFOLIO PROJECT - E. NEXT PROJECT */

.portfolio-next {
    padding-block: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.portfolio-next .container {
    display: grid;
    gap: var(--spacing-medium);
}

.portfolio-next__link {
    display: grid;
    grid-template-columns: 5rem 1fr auto;
    align-items: center;
    gap: var(--spacing-medium);
}

.portfolio-next__thumb {
    overflow: hidden;
    border-radius: var(--border-radius);
}

.portfolio-next__thumb img {
    width: 100%;
    height: auto;
}

.portfolio-next__text {
    display: grid;
    gap: 0.35rem;
}

.portfolio-next__title {
    transition: color var(--duration-medium) var(--ease-standard);
}

.portfolio-next__arrow {
    font-size: var(--text-2xl);
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.portfolio-next__link:hover .portfolio-next__title {
    color: var(--color-accent);
}

.portfolio-next__link:hover .portfolio-next__arrow {
    transform: translateX(0.75rem);
}

@media (min-width: 700px) {
    .portfolio-next__link {
        grid-template-columns: 8rem 1fr auto;
    }
}


/* PORTFOLIO - F. CONTACT CTA */

.portfolio-cta {
    padding-block: var(--spacing-2xl);
}

.portfolio-cta__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-large);
}

.portfolio-cta__inner .text-lead {
    margin-top: var(--spacing-xs);
}

/* ==========================================================
   END PORTFOLIO
========================================================== */

/* --- from styles/pages/project.css --- */
/* ==========================================================
   PROJECT PAGES
   Shared layout of funnel, creative and design case pages.
   HTML: /frontend/templates/*-project.html
========================================================== */


/* PROJECT - HERO */

.project-hero {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-xl);
}

.project-hero__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.project-hero__title {
    max-width: 20ch;
}

.project-hero__intro {
    max-width: 44rem;
}

.project-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-medium);
}

.project-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-hero .project-facts {
    margin-top: var(--spacing-small);
}

.project-hero .notice {
    margin-top: var(--spacing-medium);
}


/* PROJECT - PREVIEW */

.project-preview__hint {
    margin-top: var(--spacing-medium);
    text-align: right;
}


/* PROJECT - TEXT COLUMNS */

.project-columns {
    display: grid;
    gap: var(--spacing-xl);
}

.project-columns > div {
    display: grid;
    gap: var(--spacing-small);
    align-content: start;
}

.project-columns--spaced {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

@media (min-width: 900px) {
    .project-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-2xl);
    }

    .project-columns--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--spacing-xl);
    }
}

@media (min-width: 700px) {
    .project-columns--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-xl);
    }
}

@media (min-width: 1100px) {
    .project-columns--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.project-section__subheader {
    margin-top: var(--spacing-2xl);
}

.project-story {
    display: grid;
    gap: var(--spacing-medium);
}

.project-story__text {
    font-size: var(--text-md);
}


/* PROJECT - "TRY THE DEMO" BAND */

.project-demo-cta__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-medium);
}


/* PROJECT - NEXT PROJECT */

.project-next {
    border-top: 1px solid var(--color-line);
}

.project-next__inner {
    display: grid;
    gap: var(--spacing-medium);
    padding-block: var(--spacing-xl);
}

.project-next__link {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 0.5rem var(--spacing-medium);
}

.project-next__link .eyebrow {
    grid-column: 1 / -1;
}

.project-next__title {
    transition: color var(--duration-medium) var(--ease-standard);
}

.project-next__arrow {
    font-size: var(--text-2xl);
    transition: transform var(--duration-slow) var(--ease-cinematic);
}

.project-next__link:hover .project-next__title {
    color: var(--color-accent);
}

.project-next__link:hover .project-next__arrow {
    transform: translateX(0.75rem);
}

/* ==========================================================
   END PROJECT PAGES
========================================================== */

/* --- from styles/pages/funnels.css --- */
/* ==========================================================
   FUNNELS PAGE + FUNNEL CASE PARTS
   HTML: /frontend/pages/funnels.html
         /frontend/build/renderers/funnels.js
========================================================== */


/* FUNNELS - LIST (one row per funnel) */

.funnel-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.funnel-item {
    display: grid;
    gap: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.funnel-item__content {
    display: grid;
    gap: var(--spacing-medium);
    align-content: center;
}

.funnel-item__content .fact-list {
    padding-block: var(--spacing-small);
}

.funnel-item__badges {
    display: flex;
    gap: 0.5rem;
}

@media (min-width: 1000px) {
    .funnel-item {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
        align-items: center;
    }

    /* Alternate sides for rhythm */
    .funnel-item:nth-child(even) .funnel-item__preview {
        order: 2;
    }
}


/* FUNNEL CASE - STEP DIAGRAM (funnel structure) */

.step-diagram {
    display: grid;
    gap: var(--spacing-medium);
    counter-reset: step;
}

@media (min-width: 800px) {
    .step-diagram {
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    }
}

.step-diagram__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

/* Connector arrow between steps (desktop) */
@media (min-width: 800px) {
    .step-diagram__step:not(:last-child)::after {
        content: "→";
        position: absolute;
        top: 1.4rem;
        right: -1.15rem;
        z-index: 1;
        color: var(--color-accent);
    }
}

.step-diagram__number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-accent);
}

.step-diagram__label {
    color: var(--color-text-muted);
}

.step-diagram__title {
    font-size: var(--text-lg);
    font-weight: 500;
}

.step-diagram__text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}


/* FUNNEL CASE - COPY CONCEPT */

.copy-concept {
    display: grid;
    gap: var(--spacing-xl);
}

.copy-concept__headline {
    display: grid;
    gap: var(--spacing-small);
    padding: var(--spacing-xl) 0;
    border-block: 1px solid var(--color-line);
}

.copy-concept__headline blockquote {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 300;
    line-height: 1.1;
}

.copy-concept__headline figcaption {
    color: var(--color-accent);
}

.copy-concept__columns {
    display: grid;
    gap: var(--spacing-xl);
}

.copy-concept__columns h3 {
    margin-bottom: var(--spacing-small);
    color: var(--color-accent);
}

@media (min-width: 900px) {
    .copy-concept__columns {
        grid-template-columns: 1fr 1fr;
    }
}


/* FUNNEL CASE - VISUAL CONCEPT (swatches) */

.visual-concept {
    display: grid;
    gap: var(--spacing-xl);
}

.swatch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--spacing-small);
}

.swatch {
    display: grid;
    gap: 0.25rem;
}

.swatch__colour {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

.swatch__name {
    font-weight: 600;
}

.swatch__hex {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .visual-concept {
        grid-template-columns: 1.2fr 1fr;
    }
}


/* FUNNEL CASE - CTA STRUCTURE */

.cta-structure {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 800px) {
    .cta-structure {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

.cta-structure__item {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-accent);
}

.cta-structure__item .label {
    color: var(--color-accent);
}

.cta-structure__text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}


/* FUNNEL CASE - USER JOURNEY */

.journey {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--color-line);
}

.journey__step {
    display: grid;
    grid-template-columns: 3.5rem 1fr;
    gap: var(--spacing-small);
    padding-block: var(--spacing-medium);
    border-bottom: 1px solid var(--color-line);
}

.journey__number {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    color: var(--color-accent);
    line-height: 1;
}

.journey__title {
    font-size: var(--text-lg);
    font-weight: 500;
}


/* FUNNEL CASE - SCREENSHOTS */

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: var(--spacing-medium);
    margin-top: var(--spacing-xl);
}

/* ==========================================================
   END FUNNELS PAGE
========================================================== */

/* --- from styles/pages/creatives.css --- */
/* ==========================================================
   CREATIVES PAGE + CREATIVE CASE PARTS
   HTML:   /frontend/pages/creatives.html
           /frontend/build/renderers/creatives.js
   SCRIPT: /frontend/scripts/modules/creative-views.js
========================================================== */


/* CREATIVES - GRID */

.creatives-grid {
    display: grid;
    gap: var(--spacing-xl) var(--spacing-large);
    align-items: start;
}

@media (min-width: 700px) {
    .creatives-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .creatives-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* CREATIVE CARD - shows ONE of the three views
   (data-view on the grid: creative | copy | combined) */

.creative-card {
    display: grid;
    gap: var(--spacing-medium);
}

.creative-card__view {
    display: none;
}

[data-view="creative"] .creative-card__view--creative,
[data-view="copy"] .creative-card__view--copy,
[data-view="combined"] .creative-card__view--combined {
    display: block;
    animation: filter-enter var(--duration-slow) var(--ease-cinematic);
}

.creative-card__image {
    overflow: hidden;
    border-radius: var(--border-radius-large);
    background-color: var(--color-surface);
}

.creative-card__image picture,
.creative-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ad-format--square { aspect-ratio: 1 / 1; }
.ad-format--portrait { aspect-ratio: 4 / 5; }
.ad-format--story { aspect-ratio: 9 / 16; }

.creative-card .ad-mockup {
    max-width: none;
}

.creative-card__info {
    display: grid;
    gap: 0.35rem;
    justify-items: start;
}

.creative-card__info .label {
    color: var(--color-accent);
}

.creative-card__title {
    font-size: var(--text-lg);
    font-weight: 500;
}

.creative-card__title a:hover {
    color: var(--color-accent);
}


/* COPY CARD (copy view + case pages) */

.copy-card {
    display: grid;
    gap: 0;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius-large);
    background-color: var(--color-surface);
}

.copy-card__row {
    display: grid;
    gap: 0.35rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid var(--color-line);
}

.copy-card__row:last-child {
    border-bottom: 0;
}

.copy-card__row .label {
    color: var(--color-text-muted);
}

.copy-card__hook {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: 1.2;
}

.copy-card__primary {
    display: grid;
    gap: 0.5em;
}

.copy-card__cta {
    font-weight: 700;
    color: var(--color-accent);
}


/* CREATIVE CASE - VARIATIONS */

.variation-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.variation {
    display: grid;
    gap: var(--spacing-xl);
    align-items: start;
}

.variation__copy {
    display: grid;
    gap: var(--spacing-small);
}

@media (min-width: 900px) {
    .variation {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
        gap: var(--spacing-2xl);
    }

    .variation:nth-child(even) .variation__mockup { order: 2; }
}


/* CREATIVE CASE - HOOK LIBRARY */

.hook-library {
    display: grid;
    gap: var(--spacing-xl);
}

.hook-library h3 {
    margin-bottom: var(--spacing-small);
    color: var(--color-accent);
}

.hook-library__list {
    counter-reset: hook;
    border-top: 1px solid var(--color-line);
}

.hook-library__list li {
    counter-increment: hook;
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    padding-block: 0.9rem;
    border-bottom: 1px solid var(--color-line);
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.hook-library__list li::before {
    content: counter(hook, decimal-leading-zero);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    padding-top: 0.5em;
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .hook-library { grid-template-columns: 1fr 1fr; gap: var(--spacing-2xl); }
}


/* PRINCIPLES LIST (Creatives + AI pages) */

.principles-list {
    display: grid;
    gap: var(--spacing-large);
}

.principles-list li {
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding-top: var(--spacing-small);
    border-top: 1px solid var(--color-line);
}

.principles-list .label {
    color: var(--color-accent);
}

.principles-list h3 {
    font-size: var(--text-xl);
    font-weight: 400;
}

@media (min-width: 800px) {
    .principles-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}

/* ==========================================================
   END CREATIVES PAGE
========================================================== */

/* --- from styles/pages/ai.css --- */
/* ==========================================================
   AI & SYSTEMS PAGE
   HTML: /frontend/pages/ai.html
         /frontend/build/renderers/ai.js -> "ai-workflows"
========================================================== */


/* AI FLOW - IDEA → STRATEGY → CREATION → SYSTEM → EXECUTION */

.ai-flow__chain {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.ai-flow__step {
    position: relative;
    display: grid;
    gap: 0.5rem;
    align-content: start;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-background);
}

.ai-flow__node {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--color-accent);
    border-radius: 50%;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--color-accent);
}

.ai-flow__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.ai-flow__text {
    font-weight: 600;
}

.ai-flow__support {
    margin-top: auto;
    padding-top: var(--spacing-small);
    border-top: 1px dashed var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.ai-flow__support .label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--color-accent);
}

@media (min-width: 1000px) {
    .ai-flow__chain {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    /* Connection line through the nodes */
    .ai-flow__chain::before {
        content: "";
        position: absolute;
        top: calc(var(--spacing-medium) + 1.5rem);
        left: 2rem;
        right: 2rem;
        height: 1px;
        background-color: var(--color-accent);
        opacity: 0.5;
    }

    .ai-flow__step {
        background-color: transparent;
        border-color: transparent;
        padding-inline: 0;
    }

    .ai-flow__node {
        position: relative;
        background-color: var(--color-background);
    }
}


/* AI AREAS - modular grid */

.ai-areas__grid {
    display: grid;
    border-top: 1px solid var(--color-line);
    border-left: 1px solid var(--color-line);
}

.ai-area {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: var(--spacing-large) var(--spacing-medium);
    border-right: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
    transition: background-color var(--duration-medium) var(--ease-standard);
}

.ai-area:hover {
    background-color: var(--color-surface);
}

.ai-area__index {
    color: var(--color-accent);
}

.ai-area__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

@media (min-width: 700px) {
    .ai-areas__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
    .ai-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* AI WORKFLOWS - legend + blueprints */

.workflow-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-medium);
    margin-bottom: var(--spacing-xl);
    font-size: var(--text-sm);
}

.workflow-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.workflow-legend__item::before {
    content: "";
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    border: 1px solid var(--color-text);
}

.workflow-legend__item--human::before { background-color: var(--color-text); }
.workflow-legend__item--ai::before { background-color: var(--color-accent); border-color: var(--color-accent); }
.workflow-legend__item--system::before { background-color: transparent; }

.workflow-list {
    display: grid;
    gap: var(--spacing-2xl);
}

.workflow {
    display: grid;
    gap: var(--spacing-large);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.workflow__header {
    display: grid;
    gap: 0.6rem;
    max-width: 44rem;
}

.workflow__steps {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
}

.workflow__step {
    position: relative;
    display: grid;
    gap: 0.35rem;
    align-content: start;
    padding-left: 2rem;
}

.workflow__node {
    position: absolute;
    top: 0.15rem;
    left: 0;
    width: 0.95rem;
    height: 0.95rem;
    border: 1px solid var(--color-text);
    border-radius: 50%;
    background-color: var(--color-background);
}

.workflow__step--human .workflow__node { background-color: var(--color-text); }
.workflow__step--ai .workflow__node { background-color: var(--color-accent); border-color: var(--color-accent); }

.workflow__role {
    color: var(--color-text-muted);
}

.workflow__step-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 500;
}

.workflow__step-text {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.workflow__facts {
    display: grid;
    gap: var(--spacing-small);
    padding: var(--spacing-medium);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
}

.workflow__facts > div {
    display: grid;
    gap: 0.2rem;
}

.workflow__facts dt {
    color: var(--color-accent);
}

@media (min-width: 900px) {
    .workflow__steps {
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
        padding-top: 2rem;
    }

    .workflow__steps::before {
        content: "";
        position: absolute;
        top: 0.45rem;
        left: 0;
        right: 0;
        height: 1px;
        background-color: var(--color-line);
    }

    .workflow__step {
        padding-left: 0;
    }

    .workflow__node {
        top: -2rem;
    }

    .workflow__facts {
        grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    }
}

/* ==========================================================
   END AI & SYSTEMS PAGE
========================================================== */

/* --- from styles/pages/about.css --- */
/* ==========================================================
   ABOUT PAGE
   HTML: /frontend/pages/about.html
========================================================== */


/* ABOUT - HERO (light, with real portrait) */

.about-hero {
    padding-top: calc(var(--header-height) + var(--spacing-xl));
    padding-bottom: var(--spacing-section);
}

.about-hero__inner {
    display: grid;
    gap: var(--spacing-xl);
    align-items: center;
}

.about-hero__content {
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

.about-hero__content h1 em {
    display: block;
}

.about-hero__text {
    display: grid;
    gap: var(--spacing-small);
    max-width: 38rem;
}

.about-hero__portrait {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.about-hero__portrait picture,
.about-hero__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 10%;
}

/* Soft vignette – the photo itself is not changed */
.about-hero__portrait::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 35%, transparent 50%, rgba(9, 10, 9, 0.35));
    pointer-events: none;
}

@media (min-width: 900px) {
    .about-hero__inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        gap: var(--spacing-2xl);
    }
}


/* ABOUT - VALUES */

.about-values__layout {
    display: grid;
    gap: var(--spacing-xl);
}

.about-values__list {
    display: grid;
    gap: 0;
    border-top: 1px solid var(--color-line);
}

.about-values__list li {
    display: grid;
    gap: 0.35rem;
    padding-block: var(--spacing-medium);
    border-bottom: 1px solid var(--color-line);
}

.about-values__list h3 {
    font-size: var(--text-xl);
    font-weight: 400;
}

.about-values__images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-small);
    align-items: start;
}

.about-values__frame {
    overflow: hidden;
    border-radius: var(--border-radius);
    aspect-ratio: 3 / 4;
}

.about-values__images figure:last-child:not(:only-child) {
    margin-top: var(--spacing-xl);
}

/* A single image uses the full width of the image column */
.about-values__images figure:only-child {
    grid-column: 1 / -1;
}

.about-values__images figure:only-child .about-values__frame {
    aspect-ratio: 4 / 5;
}

.about-values__images picture,
.about-values__images img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 900px) {
    .about-values__layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-2xl);
    }
}


/* ABOUT - CERTIFICATES */

.about-certificates {
    display: grid;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-line);
}

.about-certificates > .label {
    color: var(--color-accent);
}

.certificate-list {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 700px) {
    .certificate-list { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}

.certificate {
    display: grid;
    gap: 0.3rem;
    padding: var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
}

.certificate__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}


/* ABOUT - SKILLS GRID */

.skills-grid {
    display: grid;
    gap: var(--spacing-medium);
}

@media (min-width: 700px) {
    .skills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .skills-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.skill-group {
    display: grid;
    gap: 0.6rem;
    align-content: start;
    padding: var(--spacing-large) var(--spacing-medium);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    background-color: var(--color-surface);
}

.skill-group__number {
    color: var(--color-accent);
}

.skill-group__title {
    font-size: var(--text-xl);
    font-weight: 400;
}

.skill-group__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.skill-group__list li {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius);
    font-size: var(--text-sm);
}

.skill-group__tools {
    margin-top: 0.4rem;
    color: var(--color-text-muted);
}

/* ABOUT SKILLS - running text next to the heading */

.about-skills__inner {
    display: grid;
    gap: var(--spacing-large);
}

.about-skills__text {
    display: grid;
    gap: 1.25rem;
    max-width: 42rem;
}

.about-skills__text p:not(.text-lead) {
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .about-skills__inner {
        grid-template-columns: 5fr 7fr;
        column-gap: var(--spacing-xl);
    }
}


/* ABOUT STORY - why I work directly with clients */

.about-story__inner {
    display: grid;
    gap: var(--spacing-large);
}

.about-story__text {
    display: grid;
    gap: 1.25rem;
    max-width: 40rem;
}

.about-story__text p:not(.text-lead) {
    color: var(--color-text-muted);
}

@media (min-width: 900px) {
    .about-story__inner {
        grid-template-columns: 5fr 7fr;
        column-gap: var(--spacing-xl);
    }
}


/* ==========================================================
   END ABOUT PAGE
========================================================== */

/* --- from styles/pages/contact.css --- */
/* ==========================================================
   CONTACT PAGE
   HTML: /frontend/pages/contact.html
========================================================== */

.contact {
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-section);
}

/* Background photo with a strong dark veil, so the form stays calm */
.contact--image {
    isolation: isolate;
}

.contact__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.contact__media picture,
.contact__media img {
    width: 100%;
    height: 100%;
}

.contact__media img {
    object-fit: cover;
    object-position: 50% 65%;
}

.contact--image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(9, 10, 9, 0.9) 0%, rgba(9, 10, 9, 0.75) 50%, rgba(9, 10, 9, 0.6) 100%);
}

.contact__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-2xl);
}

.contact__intro {
    display: grid;
    gap: var(--spacing-medium);
    align-content: start;
}

.contact__intro h1 em {
    display: block;
}

.contact__details {
    margin-top: var(--spacing-small);
}

.contact-details {
    display: grid;
    gap: var(--spacing-small);
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-line);
}

.contact-details__item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--spacing-small);
    align-items: baseline;
}

.contact-details__item dt {
    color: var(--color-accent);
}

.contact__qr {
    margin-top: var(--spacing-small);
    padding-top: var(--spacing-medium);
    border-top: 1px solid var(--color-line);
}

.contact__form {
    padding: clamp(1.25rem, 3vw, 2.5rem);
    border: 1px solid var(--color-line);
    border-radius: var(--border-radius-large);
    background-color: rgba(17, 19, 17, 0.85);
}

@media (min-width: 1000px) {
    .contact__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }
}

/* ==========================================================
   END CONTACT PAGE
========================================================== */

/* --- from styles/pages/legal.css --- */
/* ==========================================================
   LEGAL PAGES (Impressum, Datenschutz) + 404 PAGE
   HTML: /frontend/pages/impressum.html, datenschutz.html, 404.html
========================================================== */

.legal {
    min-height: 70vh;
    padding-top: calc(var(--header-height) + var(--spacing-2xl));
    padding-bottom: var(--spacing-section);
}

.legal .heading-1 {
    margin-block: var(--spacing-small) var(--spacing-large);
}

.legal__notice {
    margin-bottom: var(--spacing-xl);
}

.legal__content h2 {
    font-size: var(--text-lg);
    font-weight: 500;
}


/* 404 PAGE */

.not-found {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 90vh;
    overflow: hidden;
    padding-top: var(--header-height);
}

.not-found__inner {
    position: relative;
    display: grid;
    gap: var(--spacing-medium);
    justify-items: start;
}

.not-found h1 em {
    display: block;
}

/* ==========================================================
   END LEGAL PAGES
========================================================== */