/* ─── tokens ────────────────────────────────────────────────────── */
  :root {
    --paper: #ffffff;
    --paper-2: #f2f0ea;
    --paper-3: #e9e6de;
    --ink: #14140f;
    --ink-2: #3a3a34;
    --dim: #66655f;             /* 4.5:1 or more on every light ground, for small text */
    --rule: #e2ded4;
    --rule-2: #cdc8bb;
    --accent: #7a9d7e;          /* moss green from palette */
    --accent-soft: #7a9d7e;
    --accent-text: #536b56;     /* the moss green dark enough for small text (4.5:1) */
    --sand: #b8a888;
    --warning: #c46a1f;

    /* Legacy aliases for the CMS built-in block rules further down, which were
       written against the old palette. Mapped onto the closest new tokens so
       .content-section__button / __eyebrow and .theme--* keep rendering. */
    --forest: var(--ink);
    --cream: var(--paper-2);
    --muted: var(--ink-2);
    --orange: var(--accent);

    --display: "Cinzel", "EB Garamond", Georgia, serif;
    --serif: "Instrument Serif", Georgia, serif;
    --body: "Manrope", -apple-system, system-ui, sans-serif;
    --mono: "Manrope", -apple-system, system-ui, sans-serif;
    --code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --maxw: 1320px;
    --nav-h: 121px;
    --pad-x: clamp(20px, 5vw, 80px);

    --t-hero: clamp(56px, 9.5vw, 156px);
    --t-h2: clamp(36px, 5.4vw, 76px);
    --t-h3: clamp(22px, 2.2vw, 30px);
    --t-body: clamp(16px, 1.15vw, 19px);
    --t-mono: 11px;
    --t-mono-sm: 10.5px;

    --r-card: 2px;
    --t-fast: 160ms cubic-bezier(.2,.7,.2,1);
    --t-base: 280ms cubic-bezier(.2,.7,.2,1);
  }

  /* ─── reset/base ────────────────────────────────────────────────── */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); }
  body {
    font-family: var(--body);
    font-size: var(--t-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
  }
  ::selection { background: var(--accent); color: var(--paper); }

  a { color: inherit; text-decoration: none; }
  button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
  /* height: auto keeps an image's proportions when it is narrower than its width attribute. */
  img { display: block; max-width: 100%; height: auto; }
  h1:focus { outline: none; }
  /* The skip link's target: it takes focus so the next Tab starts inside the content. */
  main:focus { outline: none; }

  /* Every control shows where the keyboard is, in the site's ink. Spelled out element by
     element: MudBlazor's stylesheet, loaded for the admin, removes the ring with
     a:focus-visible, and a rule this specific, coming later, wins it back. An element with
     tabindex -1 is focused by code, never by Tab (the page's heading after each navigation,
     which FocusOnNavigate makes focusable that way, and the skip link's target), so it
     gets no ring. */
  a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
  textarea:focus-visible, select:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
  }

  /* Read by screen readers, not shown. */
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Hidden until a keyboard user tabs to it, then the first thing on the page. */
  .skip-link {
    position: fixed; top: 12px; left: 12px; z-index: 1001;
    padding: 12px 18px;
    background: var(--ink); color: var(--paper);
    font-size: 14px; letter-spacing: .04em;
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }

  /* paper grain */
  body::before { content: none; }

  /* helpers */
  .mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0.18em; }
  .small { font-size: var(--t-mono); text-transform: uppercase; letter-spacing: 0.24em; }
  .small-sm { font-size: var(--t-mono-sm); }
  .dim { color: var(--dim); }

  .container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); position: relative; z-index: 1; }
  .section { padding: clamp(48px, 6vw, 88px) 0; position: relative; z-index: 1; }
  .section + .section { border-top: 1px solid var(--rule); }
  .services.section { padding-top: clamp(24px, 3vw, 48px); }

  /* ─── buttons ───────────────────────────────────────────────────── */
  .btn {
    --pad-y: 10px;
    --pad-x: 18px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: var(--pad-y) var(--pad-x);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--ink);
    border-radius: 999px;
    transition: all var(--t-fast);
    white-space: nowrap;
  }
  .btn--primary { background: var(--ink); color: var(--paper); }
  .btn--primary:hover { background: var(--accent); border-color: var(--accent); }
  .btn--ghost { background: transparent; color: var(--ink); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
  .btn--paper:hover { background: var(--accent); color: var(--paper); border-color: var(--accent); }
  .btn--lg { --pad-y: 16px; --pad-x: 26px; font-size: 13px; }
  .btn__arrow { display: inline-block; transition: transform var(--t-fast); }
  .btn:hover .btn__arrow { transform: translateX(4px); }

  /* ─── nav ───────────────────────────────────────────────────────── */
  .nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 100;
    backdrop-filter: blur(0);
    transition: backdrop-filter var(--t-base), background var(--t-base), border-color var(--t-base);
    border-bottom: 1px solid transparent;
  }
  .nav--scrolled {
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom-color: var(--rule);
  }
  .nav__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px var(--pad-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: clamp(20px, 4vw, 60px);
    border-bottom: 1px solid var(--rule);
  }
  .nav__brand { display: flex; align-items: center; gap: 20px; }
  /* Sized by width like the pack's own wide logos, but capped by height and letterboxed
     (object-fit: contain) so a tall or square upload fits inside the fixed nav bar instead of
     growing it — .nav is position: fixed and page content is padded by the constant --nav-h,
     so a taller nav would silently overlap the page below it. The cap scales with the same vw
     factor as the width clamp above (divided by the default logo's ~3.865:1 ratio), so a wide
     upload's box stays close to the default's own rendered height at any viewport, not just at
     the clamp's own extremes. */
  .nav__logotype { width: clamp(221px, 23.4vw, 351px); height: auto; max-height: clamp(58px, 6.05vw, 91px); object-fit: contain; flex: 0 0 auto; }
  /* The _2 logo exports carry more empty space above the artwork than below it, which leaves
     the artwork 11.5% of the image height low. The shift re-centres it on the menu without
     changing the layout box. Scoped to the pack's own default logos: an upload has no such
     built-in offset to correct for. */
  .nav__logotype--default { transform: translateY(-11.5%); }
  .nav__mark {
    width: 52px; height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
  }
  .nav__mark img, .nav__mark svg { width: 100%; height: 100%; object-fit: contain; }
  .nav__brandtext { display: flex; flex-direction: column; line-height: 1; gap: 4px; }
  .nav__brandname {
    font-family: var(--display);
    font-weight: 500;
    font-size: clamp(17px, 1.5vw, 24px);
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.32em;
    line-height: 1;
  }
  .nav__brandname-dot {
    width: 0.16em; height: 0.16em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    display: inline-block;
  }
  .nav__brandsub {
    color: var(--dim);
    font-family: "Manrope", -apple-system, system-ui, sans-serif;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
  }
  .nav__center {
    display: flex;
    justify-content: flex-end;
    gap: clamp(24px, 3.4vw, 54px);
    font-family: var(--body);
    font-weight: 500;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
  }
  .nav__center a {
    display: inline-flex;
    align-items: baseline;
    padding: 6px 0;
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .nav__center a:hover { border-bottom-color: var(--ink); }
  .nav__center a.is-muted { color: var(--dim); }
  .nav__center a.is-muted:hover { color: var(--ink); }
  /* A parent's sub-menu: opened by hover, by keyboard focus, or by its chevron on a touch screen; no script. */
  .nav__item--parent { position: relative; display: flex; align-items: center; gap: 2px; }
  .nav__item--active > a { border-bottom-color: var(--ink); }
  .nav__sub-toggle > summary { list-style: none; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; }
  .nav__sub-toggle > summary::-webkit-details-marker { display: none; }
  .nav__chevron { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .nav__sub-toggle[open] .nav__chevron { transform: translateY(2px) rotate(-135deg); }
  .nav__sub { display: none; position: absolute; top: 100%; left: 0; z-index: 110; min-width: 220px; margin: 0; padding: 8px 0; list-style: none; background: var(--paper); border: 1px solid var(--rule); }
  .nav__item--parent:hover > .nav__sub, .nav__item--parent:focus-within > .nav__sub, .nav__sub-toggle[open] + .nav__sub { display: block; }
  /* The last item sits nearest the right edge: its sub-menu opens leftwards, so it is never clipped. */
  .nav__item--parent:last-child > .nav__sub { left: auto; right: 0; }
  /* Brödsmulor (the CMS's standard block, placed under Sidhuvud): the header area renders before <main> and the nav is
     fixed, so the trail sits in a band of its own right under the nav, and a page that has one moves down by the band. */
  /* z-index 2: above the page's sections (positioned at 1, after the band in the markup), which would otherwise cover
     the trail and take its clicks; under the nav (100) and its sub-menus. */
  .cms-breadcrumbs { position: absolute; top: var(--nav-h); left: 0; right: 0; z-index: 2; padding-top: 8px; font-size: 13px; color: var(--dim); }
  .cms-breadcrumbs a { color: var(--ink); text-decoration: none; }
  .cms-breadcrumbs a:hover { text-decoration: underline; }
  body:has(.cms-breadcrumbs) main { padding-top: 32px; }
  .nav__center .nav__sub a { display: block; padding: 8px 16px; border-bottom: 0; }
  .nav__sub a[aria-current="page"] { text-decoration: underline; }
  .nav__sub .nav__sub-deep a { padding-left: 32px; }
  .nav__mobile-parent { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .nav__mobile-sub { display: none; grid-column: 1 / -1; list-style: none; margin: 0; padding: 0 0 0 16px; }
  .nav__mobile-parent > .nav__sub-toggle[open] + .nav__mobile-sub { display: block; }
  .nav__mobile-sub .nav__sub-deep a { padding-left: 16px; }
  .nav__right { display: flex; align-items: center; gap: 18px; }
  /* The Sidhuvud block's buttons, right of the menu (Fylld is .btn--primary, Kontur .btn--ghost).
     Where the menu folds into the disclosure they go with it, as .nav__mobile-buttons. */
  .nav__buttons { display: flex; align-items: center; gap: 12px; }

  /* The menu where the links do not fit: a disclosure under a 44px button. */
  .nav__mobile { display: none; }
  .nav__toggle {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    list-style: none;
    cursor: pointer;
    color: var(--ink);
  }
  .nav__toggle::-webkit-details-marker { display: none; }
  .nav__toggle-icon, .nav__toggle-icon::before, .nav__toggle-icon::after {
    display: block; width: 22px; height: 1.5px;
    background: currentColor;
    transition: transform var(--t-fast), background var(--t-fast);
  }
  .nav__toggle-icon { position: relative; }
  .nav__toggle-icon::before, .nav__toggle-icon::after { content: ""; position: absolute; left: 0; }
  .nav__toggle-icon::before { top: -7px; }
  .nav__toggle-icon::after { top: 7px; }
  .nav__mobile[open] .nav__toggle-icon { background: transparent; }
  .nav__mobile[open] .nav__toggle-icon::before { top: 0; transform: rotate(45deg); }
  .nav__mobile[open] .nav__toggle-icon::after { top: 0; transform: rotate(-45deg); }
  .nav__mobile-list {
    position: absolute; top: 100%; left: 0; right: 0;
    list-style: none;
    margin: 0;
    padding: 6px var(--pad-x) 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 18px 30px rgba(20, 20, 15, .08);
  }
  .nav__mobile-list a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .nav__center a[aria-current="page"], .nav__mobile-list a[aria-current="page"] { border-bottom-color: var(--ink); }
  .nav__mobile-buttons { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 18px; }
  /* .nav__mobile-list a would turn the buttons into menu links; these keep them buttons. */
  .nav__mobile-list a.btn {
    display: inline-flex;
    padding: var(--pad-y) var(--pad-x);
    border: 1px solid var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.1em;
  }
  .nav__mobile-list a.btn--primary { color: var(--paper); }

  /* Between the phone breakpoint and 1100px the menu needs the room, so the logo keeps its
     smaller size there rather than pushing the links past the edge. */
  @media (max-width: 1100px) {
    :root { --nav-h: 102px; }
    .nav__logotype { width: clamp(170px, 18vw, 198px); max-height: clamp(44px, 4.66vw, 52px); }
  }

  @media (max-width: 900px) {
    :root { --nav-h: 104px; }
    .nav__logotype { width: 286px; max-width: calc(100vw - 2 * var(--pad-x) - 60px); max-height: 75px; }
    .nav__center { display: none; }
    .nav__buttons { display: none; }
    .nav__mobile { display: block; }
    .nav__inner { grid-template-columns: 1fr auto; gap: 16px; }
    .nav__brandsub { display: none; }
  }

  /* ─── hero ──────────────────────────────────────────────────────── */
  .hero {
    padding-top: calc(var(--nav-h) + clamp(20px, 5vh, 52px));
    padding-bottom: clamp(30px, 5vh, 60px);
    text-align: center;
    max-width: var(--maxw);
    margin: 0 auto;
    padding-left: var(--pad-x);
    padding-right: var(--pad-x);
    position: relative;
    z-index: 1;
  }
  .hero__topmeta {
    display: flex; justify-content: center;
    margin-bottom: clamp(26px, 3.5vh, 40px);
  }
  .hero__topmeta .hero__clock { display: none; }
  .hero__topmeta .mono.small { color: var(--dim); font-size: 12px; letter-spacing: 0.3em; }
  .hero__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(32px, 5vh, 56px);
  }
  .hero__text { max-width: 1080px; }
  .hero__status {
    display: none;
  }
  .hero__dot {
    width: 8px; height: 8px; border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
    animation: pulse 2.4s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
    50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
  }

  .hero__title {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(38px, 6.6vw, 104px);
    /* A word longer than the narrowest screens breaks instead of widening the page. */
    overflow-wrap: break-word;
    line-height: 1.08;
    letter-spacing: 0.005em;
    margin: 0 0 clamp(28px, 4vh, 46px);
    text-wrap: balance;
    color: var(--ink);
  }
  .hero__title-b, .hero__title-c { color: inherit; font-style: normal; }

  .hero__sub {
    font-family: var(--body);
    font-weight: 400;
    font-size: clamp(16px, 1.25vw, 20px);
    line-height: 1.6;
    max-width: 46ch;
    margin: 0 auto clamp(30px, 4vh, 44px);
    color: var(--ink-2);
    text-wrap: pretty;
  }

  .hero__ctas {
    display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  }
  .hero__image {
    margin: 0;
    margin-top: -60px;
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    line-height: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 74%, transparent 100%);
  }
  .hero__image img {
    width: 100%;
    height: clamp(200px, 34vh, 420px);
    object-fit: cover;
    object-position: center 55%;
  }

  @media (max-width: 880px) {
    .hero__main { grid-template-columns: 1fr; }
  }

  /* ─── section head ──────────────────────────────────────────────── */
  .section-head {
    max-width: var(--maxw);
    margin: 0 auto clamp(50px, 7vw, 90px);
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 60px);
    align-items: end;
  }
  .section-head__meta {
    grid-column: 1 / -1;
    display: flex; gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 18px;
  }
  .section-head__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 0.96;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .section-head__sub {
    font-size: clamp(16px, 1.2vw, 19px);
    line-height: 1.5;
    color: var(--ink-2);
    margin: 0;
    max-width: 46ch;
  }
  @media (max-width: 820px) {
    .section-head { grid-template-columns: 1fr; }
  }

  /* ─── text block ────────────────────────────────────────────────── */
  .text-block__head { grid-template-columns: 1fr; margin-bottom: clamp(28px, 4vw, 48px); }
  .text-block__body {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    font-family: var(--body);
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .text-block__body > * { max-width: 68ch; }
  .text-block__body p { margin: 0 0 1.1em; }
  .text-block__body h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    line-height: 1.2;
    color: var(--ink);
    margin: 1.6em 0 .55em;
  }
  .text-block__body ul, .text-block__body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
  .text-block__body li { margin: .3em 0; }
  .text-block__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .text-block__body a:hover { color: var(--accent); }
  .text-block__body strong { font-weight: 600; color: var(--ink); }
  .text-block__cta { margin-top: 1.6em; }

  /* ─── standard blocks ───────────────────────────────────────────── */
  /* The CMS's Text och bild, Text, Bild and Bildgalleri. The CMS gives them their layout only, so here they
     get marsjon.se's look, the same as its own blocks: the section heading's serif, the Text block's body
     text, the black pill button, and a rule between sections. Their width and spacing follow the tokens. */
  :root {
    --cms-std-max-width: var(--maxw);
    --cms-std-pad-x: var(--pad-x);
    --cms-std-space: clamp(48px, 6vw, 88px);
    --cms-std-gap: clamp(28px, 4vw, 56px);
  }
  .cms-std { position: relative; z-index: 1; }
  /* First on a page, a standard block starts below the fixed nav, as the hero and an article's head do. */
  main > .cms-std:first-child { padding-top: calc(var(--nav-h) + var(--cms-std-space)); }
  .section + .cms-std, .cms-std + .section, .cms-std + .cms-std { border-top: 1px solid var(--rule); }
  .cms-std__heading {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 0.96;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin: 0 0 clamp(20px, 3vw, 36px);
    text-wrap: balance;
  }
  .cms-std__body {
    font-family: var(--body);
    font-size: clamp(16px, 1.15vw, 18px);
    line-height: 1.7;
    color: var(--ink-2);
  }
  .cms-std__body p { margin: 0 0 1.1em; }
  /* Nyheter & evenemang's cards: cream cards, the serif title, an ink date badge; the CMS lays them out. */
  .cms-posts-block__all { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  .cms-post-card { color: inherit; text-decoration: none; }
  .cms-post-card__media { overflow: hidden; border-radius: 6px; background: var(--paper-2); aspect-ratio: 3 / 2; }
  .cms-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .cms-post-card__badge { margin: 12px; padding: 6px 10px; border-radius: 4px; background: var(--ink); color: var(--paper); font-family: var(--display); line-height: 1.1; text-align: center; }
  .cms-post-card__day { font-size: 18px; }
  .cms-post-card__month { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
  .cms-post-card__title { margin: 14px 0 4px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
  .cms-post-card__meta, .cms-post-card__ingress, .cms-post-card__category { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .cms-post-card__note { margin: 6px 0 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
  .cms-posts-block__more { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
  /* Undersidor (the CMS's standard block): a collection page's sub-pages, in the post cards' look, each ending in Läs mer. */
  .cms-subpage-card { color: inherit; text-decoration: none; }
  .cms-subpage-card__media { overflow: hidden; border-radius: 6px; background: var(--paper-2); aspect-ratio: 3 / 2; }
  .cms-subpage-card__media img { width: 100%; height: 100%; object-fit: cover; }
  .cms-subpage-card__title { margin: 14px 0 4px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.15; color: var(--ink); }
  .cms-subpage-card__body:first-child .cms-subpage-card__title, .cms-subpages__items--list .cms-subpage-card__title { margin-top: 0; }
  .cms-subpage-card__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
  .cms-subpage-card__more { display: inline-block; margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
  .cms-subpage-card:hover .cms-subpage-card__more { text-decoration-thickness: 2px; }
  .cms-subpages__empty { color: var(--dim); }
  .cms-std__body h3 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    line-height: 1.2;
    color: var(--ink);
    margin: 1.6em 0 .55em;
  }
  .cms-std__body ul, .cms-std__body ol { margin: 0 0 1.1em; padding-left: 1.3em; }
  .cms-std__body li { margin: .3em 0; }
  .cms-std__body > :last-child { margin-bottom: 0; }
  .cms-std__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
  .cms-std__body a:hover { color: var(--accent); }
  .cms-std__body strong { font-weight: 600; color: var(--ink); }
  .cms-std__actions { margin: 1.6em 0 0; }
  .cms-std__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    text-decoration: none;
    transition: all var(--t-fast);
  }
  .cms-std__button:hover { background: var(--accent); border-color: var(--accent); }
  .cms-std__caption { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--dim); }

  /* ─── news list ─────────────────────────────────────────────────── */
  .news__head { margin-bottom: clamp(28px, 4vw, 48px); }
  .news__grid {
    list-style: none;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(24px, 3vw, 40px);
  }
  .news__card { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
  .news__card:hover .news__title { text-decoration: underline; text-underline-offset: 4px; }
  .news__card:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
  .news__image { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--rule); }
  .news__date { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
  .news__title { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.15; margin: 0; color: var(--ink); }
  .news__excerpt { margin: 0; color: var(--ink-2); line-height: 1.6; }
  .news__empty, .news__more { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); color: var(--ink-2); }
  .news__more { margin-top: clamp(28px, 4vw, 48px); }

  /* ─── article ───────────────────────────────────────────────────── */
  .article__head {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: calc(var(--nav-h) + clamp(32px, 6vh, 64px)) var(--pad-x) clamp(24px, 4vw, 40px);
    display: grid;
    gap: 14px;
  }
  .article__head > * { max-width: 68ch; }
  .article__back { color: var(--dim); text-decoration: none; letter-spacing: .12em; text-transform: uppercase; }
  .article__back:hover { color: var(--ink); }
  .article__date { color: var(--dim); letter-spacing: .12em; text-transform: uppercase; }
  .article__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 1;
    letter-spacing: -0.015em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }
  .article__lead { margin: 0; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; color: var(--ink-2); }
  .article__image { max-width: var(--maxw); margin: 0 auto clamp(24px, 4vw, 40px); padding: 0 var(--pad-x); }
  .article__image img { width: 100%; max-height: 560px; object-fit: cover; }
  /* A text block right after the header (or its image) continues it: no gap or rule above it.
     Blocks are the article's own children, and the preview's comment markers are not elements. */
  .article__head + .text-block, .article__image + .text-block { padding-top: 0; border-top: 0; }

  /* ─── services ──────────────────────────────────────────────────── */
  .services__grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--rule);
    border-left: 1px solid var(--rule);
  }
  .svc {
    position: relative;
    padding: 36px 32px 40px;
    border-right: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    background: transparent;
    transition: background var(--t-base), color var(--t-base);
    overflow: hidden;
    min-height: 280px;
    display: flex; flex-direction: column;
  }
  .svc::before {
    content: "";
    position: absolute; inset: 0;
    background: var(--ink);
    transform: translateY(101%);
    transition: transform 420ms cubic-bezier(.2,.7,.2,1);
    z-index: 0;
  }
  .svc--hover::before { transform: translateY(0); }
  .svc--hover { color: var(--paper); }
  .svc:hover::before { transform: translateY(0); }
  .svc:hover { color: var(--paper); }
  .svc > * { position: relative; z-index: 1; }
  .svc__head { display: flex; justify-content: space-between; align-items: center; }
  .svc__num {
    font-size: clamp(28px, 2.4vw, 36px);
    font-family: var(--serif);
    letter-spacing: -0.01em;
  }
  .svc__indicator { color: inherit; opacity: .55; }
  .svc__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    line-height: 1.08;
    margin: 36px 0 14px;
    text-wrap: balance;
  }
  .svc__desc {
    font-size: 17px;
    line-height: 1.5;
    margin: 0 0 24px;
    flex: 1;
  }
  .svc__tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .tag {
    padding: 4px 9px;
    border: 1px solid currentColor;
    border-radius: 999px;
    opacity: .75;
  }
  .svc__corner {
    position: absolute;
    right: 16px; bottom: 16px;
    width: 16px; height: 16px;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    opacity: .35;
    z-index: 1;
  }
  @media (max-width: 720px) {
    .services__grid { grid-template-columns: 1fr; }
  }

  /* ─── process ───────────────────────────────────────────────────── */
  .process__grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex;
    flex-direction: column;
  }
  .step {
    display: grid;
    grid-template-columns: 90px 1px 1fr;
    gap: 30px;
    padding: 36px 0;
    border-top: 1px solid var(--rule);
    align-items: start;
  }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step__num {
    font-family: var(--serif);
    font-size: clamp(36px, 4vw, 56px);
    line-height: 1;
    color: var(--accent);
  }
  .step__line {
    width: 1px;
    background: var(--rule);
    height: 100%;
    min-height: 60px;
    align-self: stretch;
  }
  .step__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 24px;
    margin-bottom: 10px;
  }
  .step__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h3);
    margin: 0;
    line-height: 1.12;
  }
  .step__dur { color: var(--dim); white-space: nowrap; }
  .step__desc {
    font-size: 17px;
    line-height: 1.55;
    max-width: 60ch;
    margin: 0;
    color: var(--ink-2);
  }
  @media (max-width: 720px) {
    .step { grid-template-columns: 60px 1fr; }
    .step__line { display: none; }
  }

  /* ─── why now (AI cost advantage) ──────────────────────────────── */
  .whynow {
    background: var(--ink);
    color: var(--paper);
    padding: clamp(52px, 6.5vw, 92px) 0;
    position: relative;
    z-index: 1;
  }
  .whynow::before {
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--paper) 12%, transparent) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none;
    z-index: 0;
  }
  .whynow__inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    position: relative;
    z-index: 1;
  }
  .whynow__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(30px, 4vw, 60px);
    align-items: end;
    padding-bottom: clamp(32px, 4vw, 54px);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  }
  .whynow__meta {
    grid-column: 1 / -1;
    display: flex; gap: 16px;
    padding-bottom: 22px;
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    margin-bottom: 18px;
  }
  .whynow__meta .dim { color: color-mix(in srgb, var(--paper) 50%, var(--ink) 50%); }
  .whynow__pre {
    grid-column: 1 / -1;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin: 0 0 12px;
  }
  .whynow__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: var(--t-h2);
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0;
    text-wrap: balance;
  }
  .whynow__body {
    font-size: clamp(17px, 1.25vw, 21px);
    line-height: 1.55;
    color: color-mix(in srgb, var(--paper) 78%, var(--ink) 22%);
    margin: 0;
    max-width: 48ch;
  }
  .whynow__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin-top: clamp(32px, 3.6vw, 50px);
    border-top: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  }
  .wnstat {
    padding: 36px 28px 32px;
    border-right: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
    position: relative;
  }
  .wnstat:last-child { border-right: 0; }
  .wnstat__n {
    font-family: var(--serif);
    font-size: clamp(48px, 5.5vw, 84px);
    line-height: 0.95;
    color: var(--paper);
    margin-bottom: 14px;
    letter-spacing: -0.02em;
  }
  .wnstat__l {
    color: var(--accent);
    letter-spacing: 0.08em;
    margin-bottom: 14px;
  }
  .wnstat__d {
    font-size: 16px;
    line-height: 1.5;
    color: color-mix(in srgb, var(--paper) 65%, var(--ink) 35%);
    margin: 0;
    max-width: 32ch;
  }
  .whynow__closing {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) auto;
    gap: clamp(30px, 4vw, 60px);
    align-items: end;
    margin-top: clamp(32px, 4vw, 50px);
    padding-top: 40px;
  }
  .whynow__closingtext {
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.25;
    color: var(--paper);
    margin: 0;
    text-wrap: balance;
    max-width: 32ch;
  }
  @media (max-width: 920px) {
    .whynow__head { grid-template-columns: 1fr; }
    .whynow__stats { grid-template-columns: 1fr; }
    .wnstat { border-right: 0; }
    .whynow__closing { grid-template-columns: 1fr; align-items: start; }
  }

  /* ─── values ────────────────────────────────────────────────────── */
  .values {
    background: var(--paper-2);
    padding: clamp(48px, 6vw, 84px) 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .values__intro {
    max-width: var(--maxw);
    margin: 0 auto 44px;
    padding: 0 var(--pad-x);
  }
  .values__grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }
  .value {
    border-top: 1px solid var(--ink);
    padding-top: 16px;
  }
  .value__n {
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--accent-text);
    margin-bottom: 18px;
    display: block;
  }
  .value__t {
    font-family: var(--serif);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.15;
    margin: 0 0 10px;
  }
  .value__d {
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    color: var(--ink-2);
  }
  @media (max-width: 920px) { .values__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .values__grid { grid-template-columns: 1fr; } }

  /* ─── work / cases ──────────────────────────────────────────────── */
  .work__list {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
  }
  .case {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 30px;
    align-items: center;
    padding: 26px 0;
    border-top: 1px solid var(--rule);
    cursor: pointer;
    transition: padding var(--t-base);
    position: relative;
  }
  .case:last-child { border-bottom: 1px solid var(--rule); }
  .case--hover { padding-left: 16px; padding-right: 16px; background: var(--paper-2); }
  .case__num {
    font-family: var(--serif);
    font-size: 28px;
    color: var(--accent);
  }
  .case__media { width: 100%; }
  .case__client { margin-bottom: 6px; }
  .case__title {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(22px, 1.9vw, 28px);
    margin: 0 0 8px;
    line-height: 1.1;
  }
  .case__result {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 52ch;
  }
  .case__stack { color: var(--dim); }
  .case__cta {
    display: flex; align-items: center; gap: 10px;
    justify-content: flex-end;
    color: var(--dim);
    transition: color var(--t-fast), transform var(--t-fast);
  }
  .case--hover .case__cta { color: var(--ink); }
  .case__arrow { transition: transform var(--t-fast); display: inline-block; }
  .case--hover .case__arrow { transform: translateX(6px); }

  @media (max-width: 980px) {
    .case { grid-template-columns: 50px 1fr; }
  }
  @media (max-width: 680px) {
    .case { grid-template-columns: 40px 1fr; }
  }

  .placeholder {
    position: relative;
    background: var(--paper);
    border: 1px solid var(--rule);
    width: 100%;
    color: var(--rule-2);
    overflow: hidden;
  }
  .placeholder__label {
    position: absolute;
    bottom: 8px; left: 10px;
    color: var(--dim);
  }
  .placeholder--sm { font-size: 10px; }

  /* ─── contact ───────────────────────────────────────────────────── */
  .contact__grid {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
  }
  .contact__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
    border-top: 1px solid var(--rule);
    padding-top: 30px;
  }
  .field { display: flex; flex-direction: column; gap: 8px; }
  .field--full { grid-column: 1 / -1; }
  .field label { letter-spacing: 0.08em; }
  .field input, .field textarea {
    font: inherit;
    font-family: var(--body);
    font-size: 18px;
    border: 0;
    border-bottom: 1px solid var(--ink);
    padding: 8px 0 10px;
    background: transparent;
    outline: none;
    color: var(--ink);
    transition: border-color var(--t-fast);
    resize: vertical;
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--dim); }
  /* The fields draw no outline, so focus is a thicker line in a green dark enough to see. */
  .field input:focus, .field textarea:focus { border-bottom-color: var(--accent-text); box-shadow: 0 1px 0 0 var(--accent-text); }

  .contact__submit {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 22px;
    margin-top: 6px;
  }
  .contact__sent {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--accent-text);
    /* Clear of the fixed menu when the page opens scrolled to the note. */
    scroll-margin-top: calc(var(--nav-h) + 24px);
  }
  .contact__sent:focus { outline: none; }
  .contact__dot {
    width: 8px; height: 8px; border-radius: 999px; background: var(--accent);
  }

  .contact__direct {
    border-top: 1px solid var(--ink);
    padding-top: 30px;
    display: flex; flex-direction: column; gap: 12px;
    position: relative;
  }
  .contact__email {
    font-family: var(--serif);
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1;
    border-bottom: 1px solid transparent;
    align-self: flex-start;
    transition: border-color var(--t-fast);
  }
  .contact__email:hover { border-bottom-color: var(--ink); }
  .contact__hours { margin-top: 12px; }
  .contact__sigil {
    margin-top: auto;
    width: 180px; height: 180px;
    align-self: flex-end;
    opacity: .45;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .footer__mark { flex: 0 0 auto; }
  .nav__mark { flex: 0 0 auto; }
  .contact__sigil { flex: 0 0 auto; }
  .contact__sigil img { width: 100%; height: 100%; object-fit: contain; }
  @media (max-width: 820px) {
    .contact__grid { grid-template-columns: 1fr; }
    .contact__form { grid-template-columns: 1fr; }
  }

  /* ─── footer ────────────────────────────────────────────────────── */
  .footer {
    background: #16161a;
    color: #f0eadb;
    position: relative;
    z-index: 1;
  }
  /* The light grounds' dim grey is too dark here; this one keeps 4.5:1 on the footer. */
  .footer .dim { color: #8f8977; }
  /* The footer area's blocks, laid out as the footer has always looked: the logo block on the
     left, the columns beside it, the bottom line across the whole width underneath. The logo's
     track is its old 0.9 : 2 share of the room after the 60px gap, plus its 30px margin; every
     column is a track of its own, 30px apart, so each keeps exactly its old width. The blocks may
     come in any order: order puts the logo first and the bottom line last. */
  .footer__top {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(40px, 5vw, 64px) var(--pad-x) 0;
    display: grid;
    grid-template-columns: minmax(max-content, calc((100% - 60px) * 9 / 29 + 30px)) repeat(3, minmax(0, 1fr));
    gap: 30px;
  }
  .footer__brand { display: flex; align-items: center; gap: 22px; order: -1; grid-column: 1; margin-right: 30px; }
  /* A fourth column and more take a second row, still beside the logo. */
  .footer__top:has(> .footer__col ~ .footer__col ~ .footer__col ~ .footer__col) > .footer__brand { grid-row: span 2; }
  /* Without a bottom line the top keeps its old space below it. */
  .footer__top:not(:has(> .footer__bottom)) { padding-bottom: 32px; }
  /* Capped and letterboxed like .nav__logotype, so a tall or square upload doesn't dwarf the
     rest of the footer. */
  .footer__logo { display: block; width: clamp(220px, 22vw, 320px); height: auto; max-height: 90px; object-fit: contain; }
  .footer__logo--default { transform: translateY(-11.5%); /* see .nav__logotype */ }
  .footer__mark {
    width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f0eadb;
  }
  .footer__mark img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) brightness(1.6); }
  .footer__mark svg { width: 100%; height: 100%; }
  .footer__name {
    font-family: "Manrope", -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: clamp(17px, 1.9vw, 26px);
    letter-spacing: 0.1em;
    margin-bottom: 0;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 0.3em;
    line-height: 1.1;
  }
  .footer__name-dot {
    width: 0.16em; height: 0.16em;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.85;
    display: inline-block;
  }
  .footer__sub {
    font-family: "Manrope", -apple-system, system-ui, sans-serif;
    font-weight: 300;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #8f8977;
    max-width: 30ch;
    line-height: 1.7;
  }
  .footer__col ul { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
  .footer__col li { font-family: "Manrope", -apple-system, system-ui, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.01em; }
  /* The whole footer's width as before, and 32px under the columns with the grid's 30px gap. */
  .footer__bottom {
    order: 1;
    grid-column: 1 / -1;
    margin: 2px calc(-1 * var(--pad-x)) 0;
    padding: 22px var(--pad-x);
    border-top: 1px solid #2a2826;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 18px; align-items: center;
    color: #8f8977;
  }
  /* The layout's own last row, for the cookie link: under the bottom line, in its type. With no
     Google Analytics ID it is empty and takes no room; without a bottom line it draws the line. */
  .footer__legal {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--pad-x) 22px;
    color: #8f8977;
  }
  .footer__legal:not(:has(*)) { display: none; }
  .footer__top:not(:has(> .footer__bottom)) + .footer__legal { padding-top: 22px; border-top: 1px solid #2a2826; }
  /* flex-wrap so up to 8 icons move onto a second row on a narrow phone instead of shrinking
     out of round or overflowing the page (.footer__bottom wrapping alone only gives the list
     its own line; that line can still be narrower than 8 icons need). */
  .footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .footer__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: 1px solid #2a2826; border-radius: 999px;
    color: #f0eadb;
    font-family: var(--body); font-weight: 600; letter-spacing: 0; text-transform: none;
  }
  .footer__social a:hover { border-color: #f0eadb; }
  .footer__social svg { width: 16px; height: 16px; fill: currentColor; }
  @media (max-width: 820px) {
    /* The logo above two columns a row, 60px from them as before. */
    .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / -1; margin: 0 0 30px; }
    .footer__top:has(> .footer__col ~ .footer__col ~ .footer__col ~ .footer__col) > .footer__brand { grid-row: auto; }
  }

  /* ─── meta row helper ───────────────────────────────────────────── */
  .meta-row {
    display: flex; align-items: center; gap: 12px;
    font-family: var(--mono);
    font-size: var(--t-mono);
    color: var(--dim);
  }
  .meta-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
  .meta-line { flex: 1; height: 1px; background: var(--rule); }

  /* ─── CMS built-in blocks (existing app.css, carried over unchanged) ── */
  .site-nav__cta,
  .content-section__button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .75rem 1.1rem;
      border-radius: 999px;
      background: var(--orange);
      color: #21140c;
      font-weight: 700;
      text-decoration: none;
      transition: transform .2s ease, box-shadow .2s ease;
  }

  .site-nav__cta:hover,
  .content-section__button:hover {
      box-shadow: 0 .7rem 1.8rem rgba(116, 65, 32, .16);
      transform: translateY(-2px);
  }

  .content-section {
      padding: clamp(4.5rem, 9vw, 8rem) 1.25rem;
  }

  .content-section__inner {
      width: min(100%, 68rem);
      margin: 0 auto;
  }

  .content-section--hero {
      position: relative;
      min-height: min(42rem, calc(100vh - 5rem));
      display: grid;
      align-items: center;
      overflow: hidden;
  }

  .content-section--hero::after {
      position: absolute;
      top: 10%;
      right: -8rem;
      width: 30rem;
      height: 30rem;
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 50%;
      box-shadow: 0 0 0 5rem rgba(255, 255, 255, .025), 0 0 0 10rem rgba(255, 255, 255, .02);
      content: "";
  }

  .content-section--hero .content-section__inner {
      position: relative;
      z-index: 1;
  }

  .content-section__eyebrow {
      margin: 0 0 1rem;
      color: var(--accent-text);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
  }

  .content-section h1 {
      max-width: 13ch;
      font-size: clamp(2.8rem, 7vw, 5.8rem);
  }

  .content-section h2 {
      max-width: 17ch;
      font-size: clamp(2rem, 4vw, 3.5rem);
  }

  .content-section p:not(.content-section__eyebrow) {
      max-width: 42rem;
      margin: 1.6rem 0 0;
      color: var(--muted);
      font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  }

  .content-section__button {
      margin-top: 2rem;
  }

  .content-section__image {
      width: 100%;
      max-height: 40rem;
      margin-top: 2.25rem;
      border-radius: 1.25rem;
      object-fit: cover;
  }

  .theme--brand {
      background: var(--forest);
      color: var(--cream);
  }

  .theme--brand p:not(.content-section__eyebrow) {
      color: #c4d2cc;
  }

  .theme--muted {
      background: var(--cream);
  }

  .content-section--text + .content-section--text {
      padding-top: 0;
  }

  .content-section--text:nth-child(odd) .content-section__inner {
      padding-left: min(8vw, 7rem);
  }

  .content-section--cta .content-section__inner {
      padding: clamp(2rem, 6vw, 5rem);
      border-radius: 1.5rem;
      background: var(--forest);
      color: var(--cream);
  }

  .page-missing {
      width: min(100% - 2.5rem, 68rem);
      min-height: 60vh;
      margin: 0 auto;
      padding: 8rem 0;
  }

  .page-missing h1 {
      font-size: clamp(2.5rem, 7vw, 5rem);
  }

  @media (max-width: 760px) {
      .content-section--hero {
          min-height: 36rem;
      }

      .content-section--text:nth-child(odd) .content-section__inner {
          padding-left: 0;
      }
  }

  /* The start page's longest word, "Specialanpassad", fits a 320px screen at this size. */
  @media (max-width: 360px) {
    .hero__title { font-size: 34px; }
  }

  /* Visitors who ask their system for less motion get none: no pulsing, sliding or smooth scrolling. */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }