/* =====================================================================
   A-COURSES DESIGN SYSTEM
   Loaded after Source's screen.css (default.hbs). Replaces the <style>
   blocks that used to live in each page's HTML card and in
   Settings → Code injection. Edit here, not in the pages.

   1. Tokens            5. Section frame and rhythm
   2. Theme overrides   6. Shared components
   3. Legal pages/posts 7. Page sections (home, services, about, contact)
   4. Base type scale   8. Mobile / reduced motion
   ===================================================================== */


/* 1. Tokens
   --------------------------------------------------------------------- */

:root {
    /* Palette */
    --ac-bg: #FBFAF7;
    --ac-bg-2: #F7F3EC;
    --ac-ink: #252B29;          /* headings */
    --ac-body: #454B49;         /* body text, captions */
    --ac-red: #B14F37;          /* terracotta accent: labels, markers */
    --ac-blue: #356C88;         /* interactive */
    --ac-blue-hover: #244E63;
    --ac-ochre: #E9BC60;
    --ac-line: #D9D6CE;         /* borders, hairlines */

    /* Type */
    --ac-font: Arial, Helvetica, sans-serif;
    --ac-h1: clamp(40px, 4.2vw, 52px);
    --ac-h2: clamp(32px, 3.4vw, 42px);
    --ac-h3: 28px;
    --ac-h4: 22px;
    --ac-h5: 17px;
    --ac-lead: 19px;
    --ac-text: 17px;
    --ac-small: 16px;

    /* Layout */
    --ac-frame: min(1100px, 100% - var(--container-gap) * 2);
    --ac-space: 65px;           /* between sections */
    --ac-rule-gap: 28px;        /* hairline → content below it */

    /* Source theme variables, mapped onto the palette */
    --font-sans: var(--ac-font);
    --color-darker-gray: var(--ac-ink);
    --color-primary-text: var(--ac-body);
    --color-secondary-text: var(--ac-body);
    --color-border: var(--ac-line);
    --container-width: 1100px;
    --content-width: 680px;
    --content-font-size: 1.7rem;
}

@media (max-width: 767px) {
    :root {
        --ac-h1: 36px;
        --ac-h2: 30px;
        --ac-h3: 24px;
        --ac-h4: 20px;
        --ac-lead: 17px;
        --ac-text: 16px;
        --ac-space: 40px;
        --ac-rule-gap: 24px;
    }
}


/* 2. Theme overrides
   --------------------------------------------------------------------- */

/* No members/subscriptions yet: hide every portal entry point.
   Remove this block if subscriptions are ever switched on. */
a[href^="#/portal"],
.gh-foot-cta,
.gh-head-btn,
.gh-cta,
.gh-subscribe { display: none !important; }

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

/* Header and footer: same type and colours as the pages */
.gh-navigation,
.gh-footer {
    font-family: var(--ac-font);
    font-weight: 400;
    color: var(--ac-ink);
}

.gh-navigation-logo {
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Header and footer use the same side gap as the content, so the logo
   lines up with the page frame at every width (Source: max(4vmin, 20px)) */
.gh-outer {
    padding-inline: var(--container-gap);
}

/* One gap above the footer on every page (Source: 120px, 0 on pages) */
.gh-viewport .gh-footer {
    margin-top: var(--ac-space);
}

/* Square corners everywhere (Swiss/Bauhaus) */
.gh-article-image img,
.gh-card-image img,
.gh-content .kg-image {
    border-radius: 0;
}


/* Language switch "EN / DE" (partials/i18n/). Text, not flags: flags stand for
   countries, not languages. The current language is marked with the
   terracotta bar used by the section labels; the other one is a link. */
.ac-lang {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
}

.ac-lang__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 4px;
    color: var(--ac-body);
    text-decoration: none;
}

a.ac-lang__item:hover {
    color: var(--ac-blue);
    opacity: 1;
}

.ac-lang__item.is-current {
    color: var(--ac-ink);
    box-shadow: inset 0 -3px 0 var(--ac-red);
}

.ac-lang__sep {
    color: var(--ac-line);
}

.ac-lang-wrap--mobile {
    display: none;
}

@media (max-width: 767px) {
    .ac-lang-wrap--mobile {
        display: flex;
    }

    .ac-lang-wrap--desktop {
        display: none;
    }

    /* Source's phone header: logo | search | menu → logo | EN/DE | search | menu */
    #gh-navigation .gh-navigation-brand {
        grid-template-columns: 1fr auto auto auto;
        column-gap: 8px;
    }

    .ac-lang__item {
        min-height: 44px;
    }
}


/* 3. Legal pages and blog posts (Ghost's own article layout)
   --------------------------------------------------------------------- */

/* Source widens articles to 1120px; keep them on the 1100px frame */
.gh-article {
    --container-width: 1100px;
}

/* Text column starts at the left edge of the 1100px frame, like the
   custom pages, instead of being centred. Feature images and wide/full
   cards keep Source's columns. */
.gh-canvas > :where(:not(.gh-article-image, .kg-width-wide, .kg-width-full)) {
    grid-column: wide-start / main-end;
    max-width: var(--content-width);
}

.gh-article-header,
.page-template .gh-article-header {
    margin-block: var(--ac-space) 32px;
}

.gh-article-title {
    font-family: var(--ac-font);
    font-size: var(--ac-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ac-ink);
}

/* Pages (Impressum, Datenschutz, Privacy): quieter title, still above h2 */
.page-template .gh-article-title {
    font-size: var(--ac-h2);
    line-height: 1.18;
    letter-spacing: -0.025em;
}

.gh-content {
    letter-spacing: 0;
}

.gh-content > :is(p, ul, ol, dl) {
    line-height: 1.7;
}

.gh-content > :is(h2, h3, h4) {
    font-family: var(--ac-font);
    font-weight: 700;
    color: var(--ac-ink);
    letter-spacing: -0.02em;
}

.gh-content > h2 { font-size: 2.6rem; line-height: 1.25; }
.gh-content > h3 { font-size: 2.1rem; line-height: 1.3; }

.gh-content a:hover {
    color: var(--ac-blue-hover);
    opacity: 1;
}

/* Page content ends where the footer gap begins */
.gh-viewport .gh-content > *:last-child:not(.kg-width-full) {
    margin-bottom: 0;
}


/* 4. Base type scale for the custom sections
   --------------------------------------------------------------------- */

.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
.ac-services-hero, .ac-services-offers, .ac-services-process,
.ac-services-delivery, .ac-services-contact,
.ac-about-page, .ac-contact-page, .ac-section {
    box-sizing: border-box;
    font-family: var(--ac-font);
    font-size: var(--ac-text);
    line-height: 1.7;
    color: var(--ac-body);
}

:is(.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
    .ac-services-hero, .ac-services-offers, .ac-services-process,
    .ac-services-delivery, .ac-services-contact,
    .ac-about-page, .ac-contact-page, .ac-section) *,
:is(.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
    .ac-services-hero, .ac-services-offers, .ac-services-process,
    .ac-services-delivery, .ac-services-contact,
    .ac-about-page, .ac-contact-page, .ac-section) *::before {
    box-sizing: border-box;
}

/* Paragraphs: weakest possible rule, so every component can adjust it */
:where(.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
       .ac-services-hero, .ac-services-offers, .ac-services-process,
       .ac-services-delivery, .ac-services-contact,
       .ac-about-page, .ac-contact-page, .ac-section) p {
    margin: 0;
    font-size: var(--ac-text);
    line-height: 1.7;
    color: var(--ac-body);
}

:where(.ac-hero__content, .ac-about-hero-copy, .ac-about-background-copy,
       .ac-working__content, .ac-sd-copy, .ac-section) p + p {
    margin-top: 18px;
}

/* H1: one per page */
.gh-content :is(.ac-hero__title, :where(.ac-about-hero) h1, .ac-sh-title, .ac-contact-title, .ac-h1) {
    margin: 0;
    font-family: var(--ac-font);
    font-size: var(--ac-h1);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--ac-ink);
}

/* H2: section headings */
.gh-content :is(.ac-formats__title, :where(.ac-working__content, .ac-contact-final) h2,
                .ac-so-heading, .ac-sp-heading, .ac-sd-heading, .ac-sc-heading,
                :where(.ac-about-background) h2, .ac-contact-guide-title, .ac-h2) {
    margin: 0;
    font-family: var(--ac-font);
    font-size: var(--ac-h2);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: var(--ac-ink);
}

/* H3: service titles */
.gh-content :is(.ac-so-feature-title, .ac-so-secondary-title, .ac-h3) {
    margin: 0;
    font-family: var(--ac-font);
    font-size: var(--ac-h3);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--ac-ink);
}

/* H4: item titles */
.gh-content :is(.ac-formats__item-title, .ac-sp-step-title, .ac-h4) {
    margin: 0;
    font-family: var(--ac-font);
    font-size: var(--ac-h4);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
    color: var(--ac-ink);
}

/* H5: small headings inside lists and tables */
.gh-content :is(.ac-so-includes-title, .ac-contact-question-title, .ac-h5) {
    margin: 0;
    font-family: var(--ac-font);
    font-size: var(--ac-h5);
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.01em;
    color: var(--ac-ink);
}

/* Lead paragraphs */
.gh-content :is(.ac-sh-lead, .ac-about-end p, .ac-lead) {
    font-size: var(--ac-lead);
    line-height: 1.55;
}

/* Small text */
.gh-content :is(.ac-formats__item p, .ac-sp-task, .ac-so-footer p,
                .ac-contact-question-text, .ac-contact-guide-description,
                .ac-contact-reply, .ac-contact-location-note, .ac-small) {
    font-size: var(--ac-small);
    line-height: 1.65;
}

/* Spacing after headings */
.gh-content :is(.ac-hero__title, .ac-about-hero h1, .ac-contact-title, .ac-h1) + p {
    margin-top: 28px;
}

.gh-content :is(.ac-formats__title, .ac-working__content h2, .ac-contact-final h2,
                .ac-sp-heading, .ac-sc-heading, .ac-contact-guide-title, .ac-h2) + p {
    margin-top: 20px;
}


/* 5. Section frame and rhythm
   --------------------------------------------------------------------- */

/* Every custom section spans the same 1100px frame as the header and
   footer, and sits one --ac-space below the previous one. */
.gh-content.gh-canvas > :is(.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
                            .ac-services-hero, .ac-services-offers, .ac-services-process,
                            .ac-services-delivery, .ac-services-contact,
                            .ac-about-page, .ac-contact-page, .ac-section) {
    grid-column: full;
    width: var(--ac-frame);
    max-width: none;
    margin: var(--ac-space) auto 0;
}

/* Source gives the first block of a title-less page 64px; use the token */
.gh-viewport .gh-content.gh-canvas:only-child > :is(.ac-hero, .ac-services-hero,
                            .ac-about-page, .ac-contact-page, .ac-section):first-child {
    margin-top: var(--ac-space);
}

.gh-content.gh-canvas > :is(.ac-hero, .ac-formats, .ac-working, .ac-contact-final,
                            .ac-services-hero, .ac-services-offers, .ac-services-process,
                            .ac-services-delivery, .ac-services-contact,
                            .ac-about-page, .ac-contact-page, .ac-section):last-child {
    margin-bottom: 0;
}


/* 6. Shared components
   --------------------------------------------------------------------- */

/* Section label: red caps with a short bar in front */
.gh-content :is(.ac-hero__eyebrow, .ac-about-eyebrow, .ac-formats__label,
                .ac-working__label, .ac-contact-final__label, .ac-so-section-label,
                .ac-sp-label, .ac-sd-label, .ac-sc-label,
                .ac-contact-label, .ac-contact-guide-label, .ac-label) {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    font-family: var(--ac-font);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ac-red);
}

.gh-content :is(.ac-hero__eyebrow, .ac-about-eyebrow, .ac-formats__label,
                .ac-working__label, .ac-contact-final__label, .ac-so-section-label,
                .ac-sp-label, .ac-sd-label, .ac-sc-label,
                .ac-contact-label, .ac-contact-guide-label, .ac-label)::before {
    content: "";
    flex: 0 0 26px;
    width: 26px;
    height: 3px;
    background: currentColor;
}

/* Caption: small grey caps, no bar (e.g. "Email me", "Based in") */
.gh-content :is(.ac-contact-final__caption, .ac-sc-email-label, .ac-contact-location-label, .ac-caption) {
    display: block;
    margin: 0 0 10px;
    font-family: var(--ac-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ac-body);
}

/* Primary button */
.gh-content :is(.ac-hero__button, .ac-btn) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
    padding: 15px 25px;
    background: var(--ac-blue);
    color: #FFFFFF;
    font-family: var(--ac-font);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 150ms ease;
}

.gh-content :is(.ac-hero__button, .ac-btn):hover,
.gh-content :is(.ac-hero__button, .ac-btn):focus-visible {
    background: var(--ac-blue-hover);
    color: #FFFFFF;
    opacity: 1;
}

/* Text link with arrow */
.gh-content :is(.ac-formats__link, .ac-about-end a, .ac-link) {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ac-font);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ac-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
    transition: color 150ms ease;
}

.gh-content :is(.ac-formats__link, .ac-about-end a, .ac-link):hover {
    color: var(--ac-blue-hover);
    opacity: 1;
}

/* Arrow icon: one diagonal arrow (svg.ac-arrow) on every link and button */
.ac-arrow {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ac-contact-email .ac-arrow {
    width: 19px;
    height: 19px;
}

:is(.ac-contact-final__arrow, .ac-sc-arrow, .ac-arrow-btn) .ac-arrow {
    width: 22px;
    height: 22px;
}

/* Email address shown as a large link */
.gh-content :is(.ac-contact-final__email, .ac-sc-email, .ac-contact-email, .ac-email) {
    display: inline-block;
    max-width: 100%;
    font-family: var(--ac-font);
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.025em;
    color: var(--ac-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ac-line);
    text-underline-offset: 6px;
    overflow-wrap: anywhere;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}

.gh-content :is(.ac-contact-final__email, .ac-sc-email, .ac-contact-email, .ac-email):hover {
    color: var(--ac-blue);
    text-decoration-color: currentColor;
    opacity: 1;
}

/* Square arrow button */
.gh-content :is(.ac-contact-final__arrow, .ac-sc-arrow, .ac-arrow-btn) {
    display: inline-flex;
    flex: 0 0 52px;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    background: var(--ac-blue);
    color: #FFFFFF;
    font-family: var(--ac-font);
    font-size: 26px;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    border-radius: 2px;
    transition: background-color 150ms ease;
}

.gh-content :is(.ac-contact-final__arrow, .ac-sc-arrow, .ac-arrow-btn):hover {
    background: var(--ac-blue-hover);
    color: #FFFFFF;
    opacity: 1;
}

/* "Get in touch" panel (Home and Services) */
.ac-contact-final,
.ac-sc-panel,
.ac-panel {
    padding: 65px;
    background: var(--ac-bg-2);
}

.ac-contact-final__top {
    display: block;
    margin: 0;
}

.gh-content :is(.ac-contact-final__description, .ac-sc-description) {
    max-width: 650px;
}

.ac-contact-final__bottom,
.ac-sc-footer,
.ac-panel-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.ac-contact-final__details,
.ac-sc-email-group,
.ac-panel-footer > div {
    min-width: 0;
}


/* Generic building blocks for new pages — usage: theme/BUILDING-BLOCKS.md.
   The type, label, button, link, email and panel classes above (.ac-h2,
   .ac-label, .ac-btn, …) share their rules with the existing pages. */

.gh-content :is(.ac-h1, .ac-h2) + :not(p) {
    margin-top: 36px;
}

.gh-content :is(.ac-h3, .ac-h4, .ac-h5) + p {
    margin-top: 12px;
}

.ac-measure {
    max-width: 760px;
}

.ac-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
}

.ac-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 45px;
}

:is(.ac-grid-2, .ac-grid-3) > * {
    min-width: 0;
    margin-top: 0;
}

/* An intro (.ac-measure) followed by more content */
.ac-section > .ac-measure + :not(.ac-panel-footer) {
    margin-top: 40px;
}

/* Sub-block inside a section, separated by a hairline */
.ac-divided {
    margin-top: var(--ac-space);
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.gh-content .ac-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 32px 0;
    border: 0;
    background: var(--ac-line);
}

.ac-image {
    margin: 0;
}

.ac-image img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0;
}


/* FAQ: heading column left, questions right (same layout as the Contact
   page's "Where to begin"). Markup: theme/BUILDING-BLOCKS.md */
.ac-faq {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(45px, 6vw, 80px);
    align-items: start;
}

.ac-faq__item {
    padding: 22px 0;
    border-bottom: 1px solid var(--ac-line);
}

.ac-faq__item:first-child {
    padding-top: 4px;
}

.gh-content .ac-faq__item p {
    margin-top: 8px;
    max-width: 680px;
}

@media (max-width: 767px) {
    .ac-faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ac-faq__item {
        padding: 19px 0;
    }
}


/* 7. Page sections
   --------------------------------------------------------------------- */

/* ---- Home and About: hero (one layout for both) ---- */

.ac-hero,
.ac-about-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;    /* text starts at the same height on every page */
    gap: clamp(40px, 6vw, 90px);
}

.ac-hero__content,
.ac-about-hero-copy {
    min-width: 0;
}

.ac-hero__photo,
.ac-about-photo {
    width: 100%;
    margin: 0;
}

.ac-hero__photo img,
.ac-about-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    object-position: center 28%;
    border-radius: 0;
}

/* ---- Home: learning formats ---- */

.ac-formats__intro {
    max-width: 760px;
    margin-bottom: 40px;
}

.ac-formats__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 45px;
}

.ac-formats__item {
    min-width: 0;
}

.ac-formats__visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 125px;
    margin-bottom: 20px;
}

.ac-formats__visual svg {
    display: block;
    width: auto;
    height: 110px;
    max-width: 100%;
}

.gh-content .ac-formats__item-title {
    margin-bottom: 12px;
}

.ac-formats__footer {
    margin-top: 40px;
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

/* ---- Home: working together ---- */

.ac-working__content {
    max-width: 760px;
    margin-bottom: 40px;
}

.ac-working__diagram {
    width: 100%;
    margin: 0;
    padding: 28px 0 18px;
    border-top: 1px solid var(--ac-line);
    border-bottom: 1px solid var(--ac-line);
}

.ac-working__diagram svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---- Services: hero ---- */

.gh-content .ac-sh-title {
    max-width: 850px;
    margin-bottom: 32px;
}

.gh-content .ac-sh-rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: 0 0 30px;
    border: 0;
    background: var(--ac-line);
}

.ac-sh-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: clamp(32px, 5vw, 76px);
    align-items: start;
}

.gh-content .ac-sh-lead {
    max-width: 520px;
    font-weight: 700;
    color: var(--ac-ink);
}

.gh-content .ac-sh-description {
    max-width: 470px;
}

/* ---- Services: learning formats ---- */

.gh-content .ac-so-heading {
    margin-bottom: 36px;
}

.ac-so-feature {
    padding-bottom: 35px;
    border-bottom: 1px solid var(--ac-line);
}

.ac-so-feature-header {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
    margin-bottom: 26px;
}

.ac-so-feature-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.ac-so-visual {
    display: block;
    flex-shrink: 0;
    width: 150px;
    height: 120px;
    max-width: 100%;
}

.ac-so-feature-rule {
    width: 100%;
    height: 1px;
    margin-bottom: 27px;
    background: var(--ac-line);
}

.ac-so-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(32px, 4.5vw, 60px);
    align-items: start;
}

.ac-so-feature-copy,
.ac-so-includes {
    min-width: 0;
}

.gh-content .ac-so-feature-copy p {
    max-width: 500px;
}

.gh-content .ac-so-includes-title {
    margin-bottom: 14px;
}

.gh-content .ac-so-includes-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gh-content .ac-so-includes-list li {
    position: relative;
    margin: 0;
    padding: 10px 0 10px 25px;
    border-top: 1px solid var(--ac-line);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ac-body);
    list-style: none;
}

.gh-content .ac-so-includes-list li::marker {
    content: "";
}

.gh-content .ac-so-includes-list li::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    width: 14px;
    height: 1px;
    background: var(--ac-red);
}

.ac-so-secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(30px, 5vw, 70px);
    margin-top: 32px;
}

.ac-so-secondary-item {
    min-width: 0;
}

.ac-so-secondary-visual {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 115px;
    margin-bottom: 16px;
}

.gh-content .ac-so-secondary-title {
    margin-bottom: 12px;
}

.gh-content .ac-so-secondary-item p {
    max-width: 475px;
}

.ac-so-footer {
    margin-top: 35px;
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.gh-content .ac-so-footer p {
    max-width: 900px;
}

/* ---- Services: process ---- */

.gh-content .ac-sp-heading {
    max-width: 850px;
}

.gh-content .ac-sp-intro {
    max-width: 790px;
    margin-bottom: 40px;
}

.ac-sp-column-headings,
.ac-sp-step {
    display: grid;
    grid-template-columns: 54px 230px minmax(0, 1fr) minmax(0, 1fr);
    gap: 22px;
}

.ac-sp-column-headings {
    padding-bottom: 14px;
}

.ac-sp-column-label {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ac-red);
}

.ac-sp-column-label-client {
    color: var(--ac-blue);
}

.ac-sp-step {
    align-items: start;
    padding: 25px 0 30px;
    border-top: 1px solid var(--ac-line);
}

.ac-sp-step:last-child {
    border-bottom: 1px solid var(--ac-line);
}

.ac-sp-number {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--ac-red);
}

.gh-content .ac-sp-step-title {
    max-width: 220px;
}

.gh-content .ac-sp-task {
    max-width: 330px;
}

/* ---- Services: delivery ---- */

.ac-sd-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(35px, 6vw, 90px);
    align-items: start;
}

.gh-content .ac-sd-copy p {
    max-width: 560px;
}

/* ---- About ---- */

.ac-about-background {
    display: grid;
    grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr);
    column-gap: clamp(48px, 7vw, 98px);
    align-items: start;
    margin-top: var(--ac-space);
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.ac-about-background-copy {
    max-width: 640px;
}

.ac-about-end {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px 28px;
    margin-top: var(--ac-space);
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.gh-content .ac-about-end p {
    color: var(--ac-ink);
}

.gh-content .ac-about-end a {
    flex: 0 0 auto;
}

/* ---- Contact ---- */

.ac-contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(45px, 6vw, 80px);
    align-items: start;
}

.gh-content .ac-contact-title {
    max-width: 640px;
}

.gh-content .ac-contact-intro {
    max-width: 530px;
}

.ac-contact-direct {
    min-width: 0;
    padding: 36px;
    background: var(--ac-bg-2);
}

.gh-content .ac-contact-email {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    font-size: clamp(22px, 2.35vw, 28px);
}

.gh-content .ac-contact-reply {
    margin-top: 20px;
}

.ac-contact-location {
    margin-top: 32px;
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.gh-content .ac-contact-location-place {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--ac-ink);
}

.gh-content .ac-contact-location-note {
    margin-top: 6px;
}

.ac-contact-guide {
    display: grid;
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: clamp(45px, 6vw, 80px);
    margin-top: var(--ac-space);
    padding-top: var(--ac-rule-gap);
    border-top: 1px solid var(--ac-line);
}

.gh-content .ac-contact-guide-description {
    max-width: 280px;
}

.ac-contact-question {
    display: grid;
    grid-template-columns: 35px minmax(140px, 165px) minmax(0, 1fr);
    column-gap: 20px;
    align-items: baseline;
    padding: 22px 0;
    border-bottom: 1px solid var(--ac-line);
}

.ac-contact-question:first-child {
    padding-top: 4px;
}

.ac-contact-number {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ac-red);
}


/* 8. Tablet, mobile, reduced motion
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
    .ac-hero,
    .ac-about-hero {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: 32px;
    }
}

@media (max-width: 767px) {

    /* Shared */
    .gh-content :is(.ac-hero__eyebrow, .ac-about-eyebrow, .ac-formats__label,
                    .ac-working__label, .ac-contact-final__label, .ac-so-section-label,
                    .ac-sp-label, .ac-sd-label, .ac-sc-label,
                    .ac-contact-label, .ac-contact-guide-label, .ac-label) {
        margin-bottom: 20px;
        font-size: 11px;
    }

    .gh-content :is(.ac-hero__title, .ac-about-hero h1, .ac-contact-title, .ac-h1) + p {
        margin-top: 22px;
    }

    .gh-content :is(.ac-formats__title, .ac-working__content h2, .ac-contact-final h2,
                    .ac-sp-heading, .ac-sc-heading, .ac-contact-guide-title, .ac-h2) + p {
        margin-top: 16px;
    }

    :where(.ac-hero__content, .ac-about-hero-copy, .ac-about-background-copy,
           .ac-working__content, .ac-sd-copy, .ac-section) p + p {
        margin-top: 14px;
    }

    .gh-content :is(.ac-hero__button, .ac-btn) {
        margin-top: 12px;
    }

    .gh-content :is(.ac-contact-final__email, .ac-sc-email, .ac-email) {
        font-size: clamp(19px, 5.4vw, 25px);
    }

    .gh-content :is(.ac-contact-final__arrow, .ac-sc-arrow, .ac-arrow-btn) {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 23px;
    }

    .ac-contact-final,
    .ac-sc-panel,
    .ac-panel {
        padding: 36px 24px 40px;
    }

    .ac-contact-final__bottom,
    .ac-sc-footer,
    .ac-panel-footer {
        gap: 14px;
        margin-top: 32px;
    }

    /* Generic blocks */
    .ac-grid-2,
    .ac-grid-3 {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .gh-content :is(.ac-h1, .ac-h2) + :not(p) {
        margin-top: 28px;
    }

    .ac-section > .ac-measure + :not(.ac-panel-footer) {
        margin-top: 32px;
    }

    /* Home and About hero */
    .ac-hero,
    .ac-about-hero {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .ac-hero__photo,
    .ac-about-photo {
        max-width: 480px;
    }

    /* Home */

    .ac-formats__intro {
        margin-bottom: 32px;
    }

    .ac-formats__grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .ac-formats__visual {
        height: 105px;
        margin-bottom: 16px;
    }

    .ac-formats__visual svg {
        height: 95px;
    }

    .ac-formats__footer {
        margin-top: 32px;
    }

    .ac-working__content {
        margin-bottom: 28px;
    }

    .ac-working__diagram {
        padding: 20px 0 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .ac-working__diagram svg {
        width: 640px;
        max-width: none;
    }

    /* Services */
    .gh-content .ac-sh-title {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .gh-content .ac-sh-rule {
        margin-bottom: 24px;
    }

    .ac-sh-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gh-content :is(.ac-sh-lead, .ac-sh-description) {
        max-width: 100%;
    }

    .gh-content .ac-so-heading {
        margin-bottom: 28px;
    }

    .ac-so-feature {
        padding-bottom: 28px;
    }

    .ac-so-feature-header {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 23px;
    }

    .ac-so-visual {
        width: 130px;
        height: 105px;
    }

    .ac-so-feature-rule {
        margin-bottom: 23px;
    }

    .ac-so-feature-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .ac-so-secondary {
        grid-template-columns: 1fr;
        gap: 35px;
        margin-top: 30px;
    }

    .ac-so-secondary-visual {
        height: 105px;
        margin-bottom: 12px;
    }

    .ac-so-footer {
        margin-top: 30px;
    }

    .gh-content .ac-sp-heading {
        max-width: 100%;
    }

    .gh-content .ac-sp-intro {
        margin-bottom: 28px;
    }

    .ac-sp-column-headings {
        display: none;
    }

    .ac-sp-step {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 12px;
        padding: 23px 0 27px;
    }

    .ac-sp-number {
        font-size: 19px;
    }

    .gh-content .ac-sp-step-title {
        max-width: none;
        margin-bottom: 5px;
    }

    .gh-content .ac-sp-task {
        max-width: none;
    }

    .ac-sp-my-task,
    .ac-sp-client-task {
        grid-column: 2;
    }

    .ac-sp-my-task::before,
    .ac-sp-client-task::before {
        display: block;
        margin-bottom: 5px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.11em;
        text-transform: uppercase;
    }

    .ac-sp-my-task::before {
        content: "My role";
        color: var(--ac-red);
    }

    .ac-sp-client-task::before {
        content: "Your team";
        color: var(--ac-blue);
    }

    :lang(de) .ac-sp-my-task::before {
        content: "Meine Rolle";
    }

    :lang(de) .ac-sp-client-task::before {
        content: "Ihr Team";
    }

    .ac-sd-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* About */
    .ac-about-background {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .ac-about-end {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Contact */
    .ac-contact-hero {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .ac-contact-direct {
        padding: 28px 24px 30px;
    }

    .ac-contact-location {
        margin-top: 28px;
    }

    .ac-contact-guide {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .gh-content .ac-contact-guide-description {
        max-width: 470px;
    }

    .ac-contact-question {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 6px 12px;
        padding: 19px 0;
    }

    .ac-contact-number {
        grid-column: 1;
        grid-row: 1;
    }

    .ac-contact-question-title {
        grid-column: 2;
        grid-row: 1;
    }

    .gh-content .ac-contact-question-text {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .gh-content [class^="ac-"],
    .gh-content [class*=" ac-"] {
        transition: none;
    }
}