/*
 * ALEA — theme stylesheet.
 *
 * Four stones and a sun. Crema Marfil and Rojo Alicante are quarried in the
 * province, and with black they are what the Explanada's floor is laid in, so
 * the palette is the floor's, not a guess at "warm and trustworthy":
 *
 *   --al-cream  the page, and the cream stone
 *   --al-ink    type, and the black stone
 *   --al-red    the accent, and the red stone
 *   --al-sea    the second accent, and the water
 *   --al-sun    highlights on dark bands, and the sun
 *
 * Hand-written, `al-` prefixed, logical properties throughout, no build step.
 * Nothing is hidden unless `.al-ready` is on <html>, which only theme.js adds,
 * so the page is complete if the script never arrives.
 */

:root {
    --al-cream: #f4eee1;
    --al-ink: #141720;
    --al-red: #8c2b20;
    --al-sea: #12506f;
    --al-sun: #e0a63c;
    --al-max: 1360px;

    --al-paper: color-mix(in oklab, var(--al-cream) 55%, white);
    --al-shade: color-mix(in oklab, var(--al-cream) 90%, var(--al-ink));
    --al-body: color-mix(in oklab, var(--al-ink) 80%, var(--al-cream));
    --al-mute: color-mix(in oklab, var(--al-ink) 66%, var(--al-cream));
    --al-line: color-mix(in oklab, var(--al-ink) 16%, transparent);
    --al-line-strong: color-mix(in oklab, var(--al-ink) 32%, transparent);

    --al-display: "Ibarra Real Nova", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --al-sans: "Schibsted Grotesk", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    --al-type: "Courier Prime", "Courier New", ui-monospace, monospace;

    --al-gutter: clamp(20px, 4vw, 56px);
    --al-section: clamp(88px, 12vw, 176px);
    --al-nav-h: 76px;

    --al-out: cubic-bezier(0.16, 0.84, 0.28, 1);
    --al-press: cubic-bezier(0.5, 0, 0.1, 1);
}

.al-arabic {
    --al-display: "Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif;
    --al-sans: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --al-type: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

html:lang(zh) {
    --al-display: "Songti SC", "Noto Serif SC", "SimSun", serif;
    --al-sans: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --al-type: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* ----------------------------------------------------------------- base */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-block-start: calc(var(--al-nav-h) + 16px);
    background: var(--al-cream);
}

html.al-locked { overflow: hidden; }

body {
    margin: 0;
    color: var(--al-body);
    background: var(--al-cream);
    font-family: var(--al-sans);
    font-size: 1.0625rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul[role="list"], ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }

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

.al-split--ink :focus-visible,
.al-split--red :focus-visible,
.al-stats :focus-visible,
.al-cta :focus-visible,
.al-board--ink :focus-visible,
.al-footer :focus-visible,
.al-hero--night :focus-visible,
.al-hero--dusk :focus-visible { outline-color: var(--al-sun); }

.al-sr, .al-form__hp {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.al-sprite { position: absolute; }
.al-anchor { display: block; block-size: 0; }

.al-skip {
    position: fixed;
    inset-block-start: 8px;
    inset-inline-start: 8px;
    z-index: 100;
    padding: 12px 18px;
    background: var(--al-ink);
    color: var(--al-cream);
    transform: translateY(-200%);
}

.al-skip:focus { transform: none; }

.al-main { outline: none; }

/* Later sections paint over the sticky splits before them. */
.al-main > section { position: relative; z-index: 1; }

.al-container {
    inline-size: min(100% - 2 * var(--al-gutter), var(--al-max));
    margin-inline: auto;
}

.al-container--narrow { max-inline-size: 820px; }
.al-container--wide { --al-max: 1720px; }

.al-section { padding-block: var(--al-section); background: var(--al-cream); }
.al-section--tight { padding-block: clamp(40px, 6vw, 80px); }

/* -------------------------------------------------------------- headings */

.al-h2,
.al-page-head__title,
.al-empty__title,
.al-cta__title {
    color: var(--al-ink);
    font-family: var(--al-display);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.al-h2 { font-size: clamp(2.6rem, 5.6vw, 5.4rem); }

.al-h2 em,
.al-page-head__title em,
.al-empty__title em,
.al-cta__title em,
.al-hero__title em {
    font-style: italic;
    color: var(--al-red);
}

.al-arabic em { font-style: normal; }

.al-lede {
    max-inline-size: 38em;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.55;
}

.al-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4em 1.1em;
    color: var(--al-ink);
    font-family: var(--al-type);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.al-kicker span { color: var(--al-red); font-weight: 700; }

.al-head { display: grid; gap: clamp(18px, 2vw, 28px); margin-block-end: clamp(44px, 6vw, 88px); max-inline-size: 1000px; }
.al-head--center { justify-items: center; margin-inline: auto; text-align: center; }

/* Masked words, set by theme.js. */
.al-w {
    display: inline-block;
    overflow: clip;
    overflow-clip-margin: 0.14em;
    vertical-align: top;
}

.al-w > span {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 1s var(--al-out);
    transition-delay: calc(var(--al-i, 0) * 34ms);
}

.is-in .al-w > span,
.is-in.is-split .al-w > span { transform: none; }

.al-ready [data-al-reveal]:not(.is-in) { opacity: 0; transform: translateY(22px); }

[data-al-reveal] { transition: opacity 0.8s var(--al-out), transform 0.8s var(--al-out); }

/* -------------------------------------------------------------- controls */

.al-btn {
    --al-btn-bg: var(--al-red);
    --al-btn-fg: var(--al-cream);
    --al-btn-line: var(--al-btn-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    min-block-size: 52px;
    padding: 0.7em 1.5em;
    border: 1px solid var(--al-btn-line);
    background: var(--al-btn-bg);
    color: var(--al-btn-fg);
    font-family: var(--al-sans);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.2s var(--al-out);
}

.al-btn:active { transform: translateY(1px); }

.al-btn--solid:hover { --al-btn-bg: var(--al-ink); }
.al-btn--ink { --al-btn-bg: var(--al-ink); }
.al-btn--ink:hover { --al-btn-bg: var(--al-red); }
.al-btn--cream { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }
.al-btn--cream:hover { --al-btn-bg: var(--al-sun); }
.al-btn--sun { --al-btn-bg: var(--al-sun); --al-btn-fg: var(--al-ink); }
.al-btn--sun:hover { --al-btn-bg: var(--al-cream); }
.al-btn--quiet { --al-btn-bg: transparent; --al-btn-fg: var(--al-ink); --al-btn-line: var(--al-line-strong); }
.al-btn--quiet:hover { --al-btn-bg: var(--al-ink); --al-btn-fg: var(--al-cream); --al-btn-line: var(--al-ink); }
.al-btn--outline { --al-btn-bg: transparent; --al-btn-fg: var(--al-ink); --al-btn-line: var(--al-ink); }
.al-btn--outline:hover { --al-btn-bg: var(--al-ink); --al-btn-fg: var(--al-cream); }
.al-btn--on-dark { --al-btn-bg: transparent; --al-btn-fg: var(--al-cream); --al-btn-line: color-mix(in oklab, var(--al-cream) 44%, transparent); }
.al-btn--on-dark:hover { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }
.al-btn--sm { min-block-size: 44px; padding: 0.5em 1.15em; font-size: 0.9375rem; }
.al-btn--block { inline-size: 100%; }

.al-arrow { flex: none; inline-size: 1.2em; block-size: 1.2em; transition: transform 0.3s var(--al-out); }
[dir="rtl"] .al-arrow { transform: scaleX(-1); }

.al-btn:hover .al-arrow,
.al-link:hover .al-arrow { transform: translateX(4px); }

[dir="rtl"] .al-btn:hover .al-arrow,
[dir="rtl"] .al-link:hover .al-arrow { transform: scaleX(-1) translateX(4px); }

.al-link {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    min-block-size: 44px;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

/* ------------------------------------------------------------ navigation */

.al-nav {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.4vw, 40px);
    block-size: var(--al-nav-h);
    padding-inline: max(var(--al-gutter), (100vw - var(--al-max)) / 2);
    color: var(--al-ink);
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    border-block-end: 1px solid transparent;
}

.al-nav.is-scrolled {
    background: var(--al-cream);
    border-block-end-color: var(--al-line);
}

/* Over a dark sky at the very top of the page, the bar is light on dark. */
:root:has(.al-hero--night[data-al-hero], .al-hero--dusk[data-al-hero], .al-hero--video-top) .al-nav:not(.is-scrolled) { color: var(--al-cream); }
:root:has(.al-hero--night[data-al-hero], .al-hero--dusk[data-al-hero], .al-hero--video-top) .al-nav:not(.is-scrolled) .al-btn--ink { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }

.al-brand {
    --al-mark-b: var(--al-red);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    flex: none;
    color: inherit;
    text-decoration: none;
}

.al-brand__mark { inline-size: 34px; block-size: 34px; }
.al-brand__logo { block-size: 40px; inline-size: auto; }
.al-brand__word { display: grid; line-height: 1; }

.al-brand__word b {
    font-family: "Ibarra Real Nova", var(--al-display);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.al-brand__word small {
    margin-block-start: 3px;
    font-family: var(--al-sans);
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.135em;
    text-transform: uppercase;
}

.al-brand--on-ink { --al-mark-b: var(--al-sun); color: var(--al-cream); }

:root:has(.al-hero--night[data-al-hero], .al-hero--dusk[data-al-hero], .al-hero--video-top) .al-nav:not(.is-scrolled) .al-brand { --al-mark-b: var(--al-sun); }

.al-nav__links { flex: 1; min-inline-size: 0; }

.al-menu {
    display: flex;
    align-items: center;
    gap: clamp(2px, 0.6vw, 10px);
    padding: 0;
    margin: 0;
    list-style: none;
}

.al-menu__item { position: relative; }
.al-menu__item--mega { position: static; }

.al-menu__link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-block-size: 44px;
    padding-inline: 11px;
    color: inherit;
    font-size: 0.9688rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.al-menu__link > span {
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
    padding-block-end: 2px;
    transition: background-size 0.3s var(--al-out);
}

[dir="rtl"] .al-menu__link > span { background-position: 100% 100%; }

.al-menu__link:hover > span,
.al-menu__item.is-current > .al-menu__link > span,
.al-menu__item.is-trail > .al-menu__link > span { background-size: 100% 1px; }

.al-menu__chevron { transition: transform 0.25s var(--al-out); }
.al-menu__item--parent:hover .al-menu__chevron,
.al-menu__item--parent:focus-within .al-menu__chevron,
.al-menu__item--parent.is-open .al-menu__chevron { transform: rotate(180deg); }

.al-menu__sub {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: 260px;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--al-paper);
    border: 1px solid var(--al-line-strong);
    color: var(--al-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s, transform 0.2s var(--al-out), visibility 0.2s;
}

.al-menu__item--parent:hover > .al-menu__sub,
.al-menu__item--parent:focus-within > .al-menu__sub,
.al-menu__item--parent.is-open > .al-menu__sub { opacity: 1; visibility: visible; transform: none; }

.al-menu__sub .al-menu__link { display: flex; }

/* The services panel: the lines of work, side by side, at equal weight. */
.al-mega {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    padding: 0 var(--al-gutter) var(--al-gutter);
    background: var(--al-cream);
    border-block: 1px solid var(--al-line);
    color: var(--al-ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s, transform 0.25s var(--al-out), visibility 0.2s;
}

.al-menu__item--mega:hover > .al-mega,
.al-menu__item--mega:focus-within > .al-mega,
.al-menu__item--mega.is-open > .al-mega { opacity: 1; visibility: visible; transform: none; }

.al-mega__grid {
    display: grid;
    grid-template-columns: repeat(var(--al-mega-cols, 5), minmax(0, 1fr));
    inline-size: min(100%, var(--al-max));
    margin: 0 auto;
    padding: 0;
    border-inline-start: 1px solid var(--al-line);
}

.al-mega__entry {
    display: grid;
    align-content: start;
    gap: 8px;
    block-size: 100%;
    min-block-size: 220px;
    padding: 24px 20px 28px;
    border-inline-end: 1px solid var(--al-line);
    border-block-end: 1px solid var(--al-line);
    color: inherit;
    text-decoration: none;
    transition: background-color 0.25s, color 0.25s;
}

.al-mega__entry:hover,
.al-mega__entry:focus-visible { background: var(--al-ink); color: var(--al-cream); }

.al-mega__num { font-family: var(--al-type); font-size: 0.8125rem; opacity: 0.7; }
.al-mega__icon { inline-size: 26px; block-size: 26px; margin-block: 18px 12px; }
.al-mega__icon svg { inline-size: 100%; block-size: 100%; }
.al-mega__name { font-family: var(--al-display); font-size: 1.5rem; font-weight: 500; line-height: 1.05; }
.al-mega__desc { font-size: 0.875rem; line-height: 1.4; opacity: 0.82; }

.al-nav__end { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); margin-inline-start: auto; }

.al-nav__phone {
    display: none;
    color: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.al-nav__phone:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.al-lang { position: relative; }

.al-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 44px;
    padding-inline: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.al-lang__toggle::-webkit-details-marker { display: none; }

.al-lang__menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    min-inline-size: 190px;
    margin: 0;
    padding: 6px;
    background: var(--al-paper);
    border: 1px solid var(--al-line-strong);
    color: var(--al-ink);
}

.al-lang__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-block-size: 44px;
    padding-inline: 10px;
    color: inherit;
    text-decoration: none;
}

.al-lang__link b { font-family: var(--al-type); font-size: 0.8125rem; text-transform: uppercase; opacity: 0.7; }
.al-lang__link:hover, .al-lang__link.is-current { background: var(--al-shade); }

.al-burger {
    display: inline-grid;
    place-items: center;
    inline-size: 44px;
    block-size: 44px;
    color: inherit;
}

.al-burger__bars,
.al-burger__bars::before {
    display: block;
    inline-size: 24px;
    block-size: 2px;
    background: currentColor;
    transition: transform 0.25s var(--al-out);
}

.al-burger__bars { transform: translateY(-4px); }
.al-burger__bars::before { content: ""; transform: translateY(8px); }
.al-burger.is-open .al-burger__bars { transform: rotate(45deg); }
.al-burger.is-open .al-burger__bars::before { transform: rotate(-90deg); }

.al-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    overflow-y: auto;
    background: var(--al-cream);
    color: var(--al-ink);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.al-sheet.is-open, .al-sheet:target { opacity: 1; visibility: visible; }

.al-sheet__inner {
    display: grid;
    gap: 22px;
    min-block-size: 100%;
    align-content: start;
    padding: calc(var(--al-nav-h) + 16px) var(--al-gutter) 40px;
}

.al-sheet__close { justify-self: end; color: inherit; font-size: 0.875rem; }
.js .al-sheet__close { display: none; }

.al-sheet__menu { display: grid; margin: 0; padding: 0; list-style: none; }
.al-sheet__menu .al-menu__sub { position: static; min-inline-size: 0; padding: 0 0 8px; border: 0; background: none; opacity: 1; visibility: visible; transform: none; }
.al-sheet__menu > .al-menu__item { border-block-end: 1px solid var(--al-line); }
.al-sheet__menu > .al-menu__item > .al-menu__link { min-block-size: 58px; padding: 0; font-family: var(--al-display); font-size: 1.75rem; white-space: normal; }
.al-sheet__menu .al-menu__sub .al-menu__link { padding-inline: 0; font-size: 1rem; white-space: normal; }
.al-sheet__menu .al-menu__chevron { display: none; }

.al-sheet__phone { font-family: var(--al-display); font-size: 1.75rem; color: var(--al-red); text-decoration: none; }

.al-sheet__label { font-family: var(--al-type); font-size: 0.8125rem; }
.al-sheet__langs ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }

.al-sheet__lang {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 1px solid var(--al-line-strong);
    color: inherit;
    text-decoration: none;
}

.al-sheet__lang.is-current { background: var(--al-ink); color: var(--al-cream); }
.al-sheet__lang b { display: none; }

@media (min-width: 1000px) {
    .al-burger, .al-sheet { display: none; }
}

@media (max-width: 999px) {
    .al-nav__links, .al-nav__cta { display: none; }
}

@media (min-width: 1280px) {
    .al-nav__phone { display: inline; }
}

/* ------------------------------------------------------------------ hero */

.al-hero {
    --al-hero-fg: var(--al-ink);
    --al-hero-body: var(--al-body);
    --al-hero-sky: var(--al-cream);
    --al-hero-em: var(--al-red);
    position: relative;
    z-index: 1;
    background: var(--al-cream);
}

.al-hero--night {
    --al-hero-fg: var(--al-cream);
    --al-hero-body: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink));
    --al-hero-sky: var(--al-ink);
    --al-hero-em: var(--al-sun);
}

.al-hero--dusk {
    --al-hero-fg: var(--al-cream);
    --al-hero-body: color-mix(in oklab, var(--al-cream) 92%, var(--al-red));
    --al-hero-sky: var(--al-red);
    --al-hero-em: var(--al-sun);
}

.al-hero--video { --al-hero-fg: var(--al-cream); --al-hero-body: var(--al-cream); --al-hero-em: var(--al-sun); }

.al-hero__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: 100svh;
    min-block-size: 620px;
    overflow: hidden;
    background: var(--al-hero-sky);
    color: var(--al-hero-body);
}

/*
 * The pin. Only with a live floor, so a browser without WebGL gets an ordinary
 * first screen. The next section is pulled up one screen behind the stage, so
 * it is already rising underneath while the tiles lift off it: what shows
 * through the gaps is the real page, not a colour.
 */
.al-hero--pinned.has-floor:not(.is-still) { z-index: 2; block-size: 340svh; margin-block-end: -100svh; background: none; }
.al-hero--pinned.has-floor:not(.is-still) .al-hero__stage { position: sticky; inset-block-start: 0; }
.al-hero.is-lifting .al-hero__stage { background: transparent; pointer-events: none; }
.al-hero--portico.has-floor .al-hero__stage { background: transparent; }

.al-hero--portico .al-hero__stage { block-size: min(92svh, 860px); min-block-size: 600px; }
.al-hero--portico:not(.al-hero--floor) .al-hero__stage { block-size: auto; min-block-size: 0; padding-block-end: clamp(60px, 8vw, 110px); }

.al-hero__still,
.al-hero__floor {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    object-fit: cover;
    object-position: 50% 100%;
}

.al-hero__floor { opacity: 0; transition: opacity 0.5s; }
.al-hero.has-floor .al-hero__floor { opacity: 1; }
.al-hero.has-floor .al-hero__still { visibility: hidden; transition: visibility 0s 0.5s; }
.al-hero__floor.is-away { visibility: hidden; }

.al-hero__body {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: clamp(32px, 5vw, 80px);
    padding-block-start: calc(var(--al-nav-h) + clamp(16px, 4svh, 56px));
    will-change: transform, opacity;
}

.al-hero__copy { display: grid; gap: clamp(14px, 2.2svh, 26px); min-inline-size: 0; flex: 1; }

.al-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.9em;
    color: var(--al-hero-fg);
    font-family: var(--al-type);
    font-size: 0.875rem;
}

.al-hero__eyebrow i { inline-size: 2.4em; block-size: 1px; background: currentColor; }

.al-hero__title {
    max-inline-size: 13em;
    text-wrap: balance;
    color: var(--al-hero-fg);
    font-family: var(--al-display);
    font-size: clamp(3rem, min(9.2vw, 15.5svh), 11.5rem);
    font-weight: 500;
    line-height: 0.92;
    letter-spacing: -0.028em;
}

.al-hero__title em { color: var(--al-hero-em); }

.al-hero--portico .al-hero__title {
    max-inline-size: 15em;
    font-size: clamp(2.7rem, min(6.6vw, 11svh), 7.4rem);
    line-height: 0.96;
}

.al-hero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 18px clamp(24px, 4vw, 56px);
}

.al-hero__lede { max-inline-size: 31em; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); line-height: 1.5; }
.al-hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }

.al-hero--night .al-btn--quiet,
.al-hero--dusk .al-btn--quiet,
.al-hero--video .al-btn--quiet { --al-btn-fg: var(--al-cream); --al-btn-line: color-mix(in oklab, var(--al-cream) 44%, transparent); }

.al-hero--night .al-btn--quiet:hover,
.al-hero--dusk .al-btn--quiet:hover,
.al-hero--video .al-btn--quiet:hover { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }

.al-hero--night .al-btn--solid:hover,
.al-hero--dusk .al-btn--solid:hover { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }

.al-hero--dusk .al-btn--solid { --al-btn-bg: var(--al-ink); }

.al-hero__media {
    flex: 0 0 44%;
    overflow: hidden;
    border: 1px solid var(--al-line-strong);
}

.al-hero__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* The hero's entrance. It is CSS, so it runs even if theme.js does not. */
.al-hero [data-al-rise] { animation: al-rise 1.1s var(--al-out) 0.35s backwards; }

@keyframes al-rise {
    from { opacity: 0; transform: translateY(18px); }
}

/* The plaque: the office's lines of work, screwed to the floor. */
.al-plaque {
    position: absolute;
    z-index: 3;
    inset-block-end: clamp(16px, 3svh, 32px);
    inset-inline: max(var(--al-gutter), (100vw - var(--al-max)) / 2);
    animation: al-rise 1.1s var(--al-out) 1s backwards;
}

.al-plaque ul {
    display: grid;
    grid-template-columns: repeat(var(--al-doors, 5), minmax(0, 1fr));
    inline-size: min(100%, var(--al-max));
    margin: 0 auto;
    padding: 0;
    background: var(--al-cream);
    border: 1px solid var(--al-ink);
    color: var(--al-ink);
}

.al-plaque li + li { border-inline-start: 1px solid var(--al-ink); }

.al-plaque a,
.al-plaque p {
    display: flex;
    align-items: center;
    gap: 0.8em;
    block-size: 100%;
    min-block-size: 58px;
    padding: 10px 16px;
    color: inherit;
    font-size: 0.9688rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.al-plaque a:hover { background: var(--al-ink); color: var(--al-cream); }
.al-plaque span { font-family: var(--al-type); font-size: 0.8125rem; font-weight: 400; color: var(--al-red); transition: color 0.2s; }
.al-plaque a:hover span { color: var(--al-sun); }

@media (max-width: 1099px) {
    .al-plaque { display: none; }
}

@media (max-width: 760px) {
    .al-hero__body { flex-direction: column; }
    .al-hero__media { flex: none; inline-size: 100%; }
    .al-hero__title { font-size: clamp(2.9rem, 13.2vw, 5rem); }
    .al-hero--portico .al-hero__title { font-size: clamp(2.5rem, 10.6vw, 4.2rem); }
    .al-hero__meta { align-items: stretch; flex-direction: column; }
    .al-hero__ctas .al-btn { flex: 1 1 100%; }
    .al-hero__ctas .al-btn--quiet { --al-btn-bg: var(--al-cream); --al-btn-fg: var(--al-ink); }
}

/* A short phone cannot hold it all above the horizon: the floor keeps its say. */
@media (max-width: 760px) and (max-height: 740px) {
    .al-hero--pinned .al-hero__eyebrow,
    .al-hero--pinned .al-btn--quiet { display: none; }
    .al-hero__lede { font-size: 1rem; line-height: 1.4; }
}

/* -------------------------------------------------------------- statement */

.al-statement { padding-block: clamp(100px, 16vw, 220px); }

.al-statement .al-prose { max-inline-size: none; }

.al-statement .al-prose p:first-child {
    max-inline-size: 22em;
    color: var(--al-ink);
    font-family: var(--al-display);
    font-size: clamp(2.05rem, 4.4vw, 4.3rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.016em;
}

.al-statement .al-prose p:first-child em { font-style: italic; color: var(--al-red); }
.al-statement .al-prose p:first-child strong { font-weight: 500; color: var(--al-red); }
.al-statement .al-prose p + p { max-inline-size: 36em; margin-block-start: 2em; margin-inline-start: auto; font-size: 1.1875rem; }

.al-inkword { color: color-mix(in oklab, var(--al-ink) 18%, var(--al-cream)); transition: color 0.45s; }
.al-inkword.is-lit { color: inherit; }
em .al-inkword.is-lit, strong .al-inkword.is-lit { color: var(--al-red); }

/* -------------------------------------------------------------- directory */

.al-board--directory { padding-block-start: 0; }

.al-directory { padding: 0; margin: 0; border-block-end: 1px solid var(--al-ink); }
.al-directory > li { border-block-start: 1px solid var(--al-ink); }

.al-directory__row {
    position: relative;
    display: grid;
    grid-template-columns: clamp(44px, 6vw, 90px) minmax(0, 1.3fr) minmax(0, 1fr) 40px;
    align-items: center;
    gap: 8px clamp(12px, 2vw, 32px);
    padding-block: clamp(20px, 2.8vw, 40px);
    color: var(--al-ink);
    text-decoration: none;
    isolation: isolate;
    transition: color 0.3s, padding-inline 0.45s var(--al-out);
}

/* The row fills with floor from the start edge, one strip of tiles. */
.al-directory__row::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--al-ink) var(--al-tiles) 0 50% / 448px auto;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.55s var(--al-press);
}

[dir="rtl"] .al-directory__row::before { clip-path: inset(0 0 0 100%); }

.al-directory__row::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--al-ink) 86%, transparent);
    opacity: 0;
    transition: opacity 0.35s 0.1s;
}

a.al-directory__row:hover, a.al-directory__row:focus-visible { color: var(--al-cream); padding-inline: clamp(12px, 2vw, 28px); }
a.al-directory__row:hover::before, a.al-directory__row:focus-visible::before { clip-path: inset(0); }
a.al-directory__row:hover::after, a.al-directory__row:focus-visible::after { opacity: 1; }

.al-directory__num { font-family: var(--al-type); font-size: 0.9375rem; color: var(--al-red); transition: color 0.3s; }
a.al-directory__row:hover .al-directory__num { color: var(--al-sun); }

.al-directory__title {
    font-family: var(--al-display);
    font-size: clamp(2.3rem, 5.4vw, 5.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.022em;
}

a.al-directory__row:hover .al-directory__title { font-style: italic; }
.al-arabic a.al-directory__row:hover .al-directory__title { font-style: normal; }

.al-directory__text { font-size: 1rem; line-height: 1.45; }
.al-directory__row .al-arrow { inline-size: 32px; block-size: 32px; }

a.al-directory__row:hover .al-arrow { transform: translateX(6px); }
[dir="rtl"] a.al-directory__row:hover .al-arrow { transform: scaleX(-1) translateX(6px); }

@media (max-width: 760px) {
    .al-directory__row { grid-template-columns: 34px minmax(0, 1fr) 26px; }
    .al-directory__text { grid-column: 2 / -1; grid-row: 2; }
    .al-directory__row .al-arrow { grid-column: 3; grid-row: 1; inline-size: 24px; block-size: 24px; }
}

/* ----------------------------------------------------------------- splits */

.al-split { --al-split-fg: var(--al-ink); --al-split-em: var(--al-red); --al-split-tag: var(--al-red); padding-block: clamp(96px, 11vw, 150px); color: var(--al-body); }

.al-split--ink {
    --al-split-fg: var(--al-cream);
    --al-split-em: var(--al-sun);
    --al-split-tag: var(--al-sun);
    background: var(--al-ink);
    color: color-mix(in oklab, var(--al-cream) 84%, var(--al-ink));
}

.al-split--red {
    --al-split-fg: var(--al-cream);
    --al-split-em: var(--al-sun);
    --al-split-tag: var(--al-cream);
    background: var(--al-red);
    color: color-mix(in oklab, var(--al-cream) 92%, var(--al-red));
}

.al-split .al-h2, .al-split .al-kicker { color: var(--al-split-fg); }
.al-split .al-h2 em { color: var(--al-split-em); }
.al-split .al-kicker span { color: var(--al-split-tag); }

.al-split__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: clamp(40px, 7vw, 110px);
}

.al-split--flip .al-split__copy { order: 2; }

.al-split__copy { display: grid; gap: clamp(18px, 2.2vw, 28px); justify-items: start; }

.al-ticks { display: grid; gap: 10px; padding: 0; margin: 0; }
.al-ticks li { position: relative; padding-inline-start: 26px; }

.al-ticks li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.5em;
    inset-inline-start: 2px;
    inline-size: 10px;
    block-size: 10px;
    background: var(--al-split-em);
}

.al-split__figure { overflow: hidden; }
.al-split__figure img { inline-size: 100%; block-size: 100%; object-fit: cover; }

.al-split__plate {
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    background: var(--al-tiles) center / 700px auto;
    color: var(--al-cream);
}

.al-split__plate svg { inline-size: 26%; block-size: auto; aspect-ratio: 1; padding: 6%; background: var(--al-ink); --al-mark-b: var(--al-sun); box-sizing: content-box; }

/* A run of splits holds still and stacks, on screens tall enough to read one. */
@media (min-width: 1100px) and (min-height: 700px) {
    .al-split { display: flex; align-items: center; min-block-size: 100svh; padding-block: calc(var(--al-nav-h) + 24px) 48px; }
    .al-main > .al-split { position: sticky; inset-block-start: var(--al-stick, 0); }
}

@media (max-width: 900px) {
    .al-split__grid { grid-template-columns: minmax(0, 1fr); }
    .al-split--flip .al-split__copy { order: 0; }
}

/* The dossier: the bullets, typed on a sheet, ticked off and stamped. */
.al-dossier { perspective: 1400px; }

.al-folio {
    position: relative;
    max-inline-size: 560px;
    margin-inline: auto;
    padding: clamp(24px, 3vw, 40px);
    padding-inline-start: clamp(40px, 4.4vw, 60px);
    background: var(--al-paper);
    color: var(--al-ink);
    box-shadow: 0 1px 0 color-mix(in oklab, var(--al-ink) 12%, transparent), 0 30px 60px -28px color-mix(in oklab, var(--al-ink) 55%, transparent);
    transform: rotate(-1.4deg);
}

.al-split--flip .al-folio { transform: rotate(1.2deg); }

/* The punched holes down the binding edge. */
.al-folio::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 14px;
    inline-size: 12px;
    background: radial-gradient(circle at 50% 50%, var(--al-folio-hole, var(--al-ink)) 0 5px, transparent 5.5px) center / 12px 96px repeat-y;
    opacity: 0.9;
}

.al-split--cream .al-folio { --al-folio-hole: var(--al-cream); }
.al-split--red .al-folio { --al-folio-hole: var(--al-red); }
.al-split--ink .al-folio { --al-folio-hole: var(--al-ink); }

.al-folio__head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding-block-end: 10px;
    border-block-end: 2px solid var(--al-ink);
    font-family: var(--al-type);
    font-size: 0.8125rem;
}

.al-folio__title {
    margin-block: 16px 8px;
    font-family: var(--al-display);
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    font-weight: 500;
    line-height: 1.08;
}

.al-folio__list { margin: 0; padding: 0; }

.al-folio__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-block: 9px;
    border-block-end: 1px dashed var(--al-line-strong);
    font-family: var(--al-type);
    font-size: 0.9688rem;
    line-height: 1.32;
}

.al-folio__list i {
    position: relative;
    flex: none;
    inline-size: 15px;
    block-size: 15px;
    margin-block-start: 2px;
    border: 1.5px solid var(--al-ink);
}

.al-folio__list i::after {
    content: "";
    position: absolute;
    inset: 1px;
    background: var(--al-red);
    transition: transform 0.28s var(--al-press);
    transition-delay: calc(0.35s + var(--al-i, 0) * 0.09s);
}

.al-ready [data-al-dossier]:not(.is-in) .al-folio__list i::after { transform: scale(0); }

.al-ready [data-al-dossier] .al-folio { transition: transform 1.1s var(--al-out), opacity 0.7s; }
.al-ready [data-al-dossier]:not(.is-in) .al-folio { opacity: 0; transform: translateY(56px) rotate(3deg); }

/* The rubber stamp, and the thump of it landing. */
.al-stamp {
    position: absolute;
    inset-block-end: 14px;
    inset-inline-end: 14px;
    inline-size: clamp(116px, 11vw, 150px);
    color: var(--al-red);
    transform: rotate(-13deg);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.al-stamp svg { overflow: visible; }
.al-stamp__ink { filter: url(#al-rough); }

.al-stamp__ring {
    fill: currentColor;
    font-family: var(--al-type);
    font-size: 19px;
    font-weight: 700;
}

.al-stamp__word {
    fill: currentColor;
    font-family: var(--al-type);
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
}

.al-ready [data-al-dossier]:not(.is-in) .al-stamp { opacity: 0; }

[data-al-dossier].is-in .al-stamp,
.al-received.is-in .al-stamp { animation: al-stamp 0.42s var(--al-press) 1.15s backwards; }

@keyframes al-stamp {
    0% { opacity: 0; transform: rotate(-4deg) scale(1.7); }
    70% { opacity: 1; transform: rotate(-13deg) scale(0.96); }
    100% { transform: rotate(-13deg) scale(1); }
}

/* --------------------------------------------------------------- features */

.al-register {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 5vw, 80px);
    margin: 0;
    padding: 0;
    border-block-end: 1px solid var(--al-line-strong);
}

.al-register li {
    display: flex;
    gap: 16px;
    padding-block: 18px;
    border-block-start: 1px solid var(--al-line-strong);
}

.al-register__num { flex: none; inline-size: 2.2em; padding-block-start: 0.28em; font-family: var(--al-type); font-size: 0.875rem; color: var(--al-red); }
.al-register h3 { color: var(--al-ink); font-family: var(--al-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.al-register p { margin-block-start: 4px; font-size: 1rem; }

@media (max-width: 760px) {
    .al-register { grid-template-columns: minmax(0, 1fr); }
}

.al-cells {
    display: grid;
    gap: 1px;
    margin: 0;
    padding: 1px;
}

.al-cells--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-cells--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.al-cell {
    position: relative;
    display: grid;
    align-content: start;
    gap: 12px;
    min-block-size: clamp(220px, 22vw, 300px);
    padding: clamp(20px, 2.4vw, 32px);
    background: var(--al-cream);
    color: var(--al-body);
    outline: 1px solid var(--al-line-strong);
    overflow: hidden;
    isolation: isolate;
    transition: color 0.35s, opacity 0.8s var(--al-out), transform 0.8s var(--al-out);
}

/* One stone spreads from the corner. */
.al-cell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--al-ink);
    transform: scale(0);
    transform-origin: 0 0;
    transition: transform 0.5s var(--al-press);
}

[dir="rtl"] .al-cell::before { transform-origin: 100% 0; }

.al-cell:hover { color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-cell:hover::before { transform: scale(1); }

.al-cell__icon { inline-size: 34px; block-size: 34px; margin-block-end: clamp(20px, 3vw, 44px); color: var(--al-red); transition: color 0.3s; }
.al-cell__icon svg { inline-size: 100%; block-size: 100%; }
.al-cell:hover .al-cell__icon { color: var(--al-sun); }

.al-cell h3 { color: var(--al-ink); font-family: var(--al-display); font-size: clamp(1.5rem, 1.9vw, 1.75rem); font-weight: 500; line-height: 1.1; transition: color 0.3s; }
.al-cell h3 em { font-style: italic; }
.al-cell:hover h3 { color: var(--al-cream); }
.al-cell p { font-size: 1rem; line-height: 1.5; }

@media (max-width: 1000px) {
    .al-cells--3, .al-cells--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .al-cells--3, .al-cells--4 { grid-template-columns: minmax(0, 1fr); }
    .al-cell { min-block-size: 0; }
    .al-cell__icon { margin-block-end: 6px; }
}

/* ------------------------------------------------------------------ steps */

.al-steps__way { position: relative; }

.al-steps__wave {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    inline-size: 100%;
    block-size: 80px;
    overflow: visible;
}

[dir="rtl"] .al-steps__wave { transform: scaleX(-1); }

.al-steps__wave path {
    fill: none;
    stroke: var(--al-red);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: calc(1 - var(--al-way, 0));
}

.no-js .al-steps__wave path, .al-still .al-steps__wave path { stroke-dashoffset: 0; }

.al-steps__list {
    display: grid;
    grid-template-columns: repeat(var(--al-steps, 4), minmax(0, 1fr));
    gap: clamp(24px, 3vw, 48px);
    margin: 0;
    padding-block-start: 104px;
}

.al-steps__item { position: relative; display: grid; gap: 10px; align-content: start; }

.al-steps__num {
    display: block;
    color: var(--al-red);
    font-family: var(--al-display);
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: lining-nums;
}

.al-steps__item h3 { color: var(--al-ink); font-family: var(--al-display); font-size: clamp(1.5rem, 2vw, 1.875rem); font-weight: 500; line-height: 1.1; }
.al-steps__item h3 em { font-style: italic; }
.al-steps__item p { font-size: 1rem; line-height: 1.5; }

@media (max-width: 900px) {
    .al-steps__wave { display: none; }
    .al-steps__list { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-start: 0; border-inline-start: 2px solid var(--al-red); }
    .al-steps__item { padding: 20px 0 20px 24px; padding-inline: 24px 0; }
}

/* ------------------------------------------------------------------ stats */

.al-stats { background: var(--al-ink); color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-stats .al-h2 { color: var(--al-cream); }
.al-stats .al-h2 em { color: var(--al-sun); }

.al-stats__row {
    display: grid;
    grid-template-columns: repeat(var(--al-stats, 4), minmax(0, 1fr));
    gap: clamp(24px, 4vw, 64px);
    margin: 0;
    padding: 0;
}

.al-stats__row li { padding-block-start: 16px; border-block-start: 1px solid color-mix(in oklab, var(--al-cream) 30%, transparent); }

.al-stat__value {
    display: flex;
    align-items: baseline;
    gap: 0.08em;
    color: var(--al-cream);
    font-family: var(--al-display);
    font-size: clamp(4rem, 9.6vw, 9.5rem);
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: lining-nums tabular-nums;
}

.al-stat__value b { font-weight: inherit; }
.al-stat__value i { color: var(--al-sun); font-size: 0.5em; font-style: normal; }
.al-stat__label { margin-block-start: 8px; font-size: 1.0625rem; }

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

/* -------------------------------------------------------------------- faq */

.al-faq__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.al-faq__head { position: sticky; inset-block-start: calc(var(--al-nav-h) + 24px); }
.al-faq__head .al-head { margin-block-end: 0; }
.al-faq .al-h2 { font-size: clamp(2.4rem, 4.2vw, 4rem); }

.al-acc { border-block-end: 1px solid var(--al-line-strong); }
.al-acc__item { border-block-start: 1px solid var(--al-line-strong); }

.al-acc__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-block-size: 64px;
    padding-block: 16px;
    color: var(--al-ink);
    font-family: var(--al-display);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-weight: 500;
    line-height: 1.15;
    list-style: none;
    cursor: pointer;
}

.al-acc__q::-webkit-details-marker { display: none; }

.al-acc__mark {
    position: relative;
    flex: none;
    inline-size: 20px;
    block-size: 20px;
    background: var(--al-ink);
    transition: transform 0.35s var(--al-out), background-color 0.25s;
}

.al-acc__mark::before,
.al-acc__mark::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    inline-size: 10px;
    block-size: 2px;
    margin: -1px -5px;
    background: var(--al-cream);
}

.al-acc__mark::after { transform: rotate(90deg); transition: transform 0.35s var(--al-out); }
.al-acc__item[open] .al-acc__mark { transform: rotate(90deg); background: var(--al-red); }
.al-acc__item[open] .al-acc__mark::after { transform: rotate(0); }
.al-acc__a { max-inline-size: 38em; padding-block-end: 24px; }

@media (max-width: 900px) {
    .al-faq__grid { grid-template-columns: minmax(0, 1fr); }
    .al-faq__head { position: static; }
}

/* -------------------------------------------------------------------- cta */

.al-cta {
    position: relative;
    padding-block: 0 var(--al-section);
    color: color-mix(in oklab, var(--al-cream) 90%, var(--al-red));
    background: var(--al-red);
    overflow: hidden;
}

.al-cta--dark { background: var(--al-ink); color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-cta--soft { background: var(--al-shade); color: var(--al-body); }
.al-cta--grad-primary { background: linear-gradient(120deg, var(--al-red), var(--al-ink)); }
.al-cta--grad-sunset { background: linear-gradient(120deg, color-mix(in oklab, var(--al-sun) 72%, var(--al-red)), var(--al-red)); }
.al-cta--grad-ocean { background: linear-gradient(120deg, var(--al-sea), var(--al-ink)); }

.al-cta__bg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: 0.2; mix-blend-mode: luminosity; }

.al-band {
    block-size: clamp(42px, 5vw, 70px);
    background: var(--al-tiles) 0 42% / 672px auto repeat-x;
}

.al-band--edge { position: relative; margin-block-end: clamp(64px, 9vw, 130px); }

.al-cta__inner {
    position: relative;
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.al-cta--side .al-cta__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-cta--flip .al-cta__copy { order: 2; }

.al-cta__copy { display: grid; gap: clamp(20px, 2.6vw, 34px); justify-items: start; }

.al-cta__title {
    max-inline-size: 15em;
    color: var(--al-cream);
    font-size: clamp(3rem, 7.8vw, 8rem);
    line-height: 0.94;
}

.al-cta__title em { color: var(--al-sun); }
.al-cta--soft .al-cta__title { color: var(--al-ink); }
.al-cta--soft .al-cta__title em { color: var(--al-red); }

.al-cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.al-cta__side { overflow: hidden; }
.al-cta__side img { inline-size: 100%; }

@media (max-width: 900px) {
    .al-cta--side .al-cta__inner { grid-template-columns: minmax(0, 1fr); }
    .al-cta--flip .al-cta__copy { order: 0; }
}

/* ---------------------------------------------------------------- contact */

.al-contact { background: var(--al-cream); }

.al-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 7vw, 110px);
    align-items: start;
}

.al-contact .al-head { margin-block-end: clamp(24px, 3vw, 40px); }

.al-details { display: grid; margin: 0; padding: 0; border-block-end: 1px solid var(--al-line-strong); }

.al-details li {
    display: flex;
    gap: 14px;
    padding-block: 14px;
    border-block-start: 1px solid var(--al-line-strong);
}

.al-details__icon { flex: none; inline-size: 24px; block-size: 24px; margin-block-start: 2px; color: var(--al-red); }
.al-details__icon svg { inline-size: 100%; block-size: 100%; }
.al-details small { display: block; font-family: var(--al-type); font-size: 0.8125rem; color: var(--al-mute); }
.al-details a, .al-details span span { color: var(--al-ink); font-weight: 600; text-decoration: none; white-space: pre-line; }
.al-details a:hover { text-decoration: underline; text-underline-offset: 0.25em; }

.al-form {
    display: grid;
    gap: 22px;
    padding: clamp(24px, 4vw, 52px);
    background: var(--al-paper);
    box-shadow: 0 30px 60px -36px color-mix(in oklab, var(--al-ink) 40%, transparent);
}

.al-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.al-field { display: grid; gap: 4px; }

.al-field label,
.al-field legend {
    color: var(--al-ink);
    font-family: var(--al-type);
    font-size: 0.875rem;
}

.al-field__req { color: var(--al-red); }

.al-field input,
.al-field textarea,
.al-field select {
    inline-size: 100%;
    min-block-size: 46px;
    padding: 8px 2px;
    border: 0;
    border-block-end: 1.5px solid var(--al-ink);
    border-radius: 0;
    background: transparent;
    color: var(--al-ink);
    font-family: var(--al-sans);
    font-size: 1.0625rem;
    transition: border-color 0.2s, background-color 0.2s;
}

.al-field textarea { resize: vertical; }

.al-field input:focus,
.al-field textarea:focus,
.al-field select:focus {
    outline: none;
    border-block-end-color: var(--al-red);
    background: color-mix(in oklab, var(--al-sun) 10%, transparent);
}

.al-field.is-invalid input,
.al-field.is-invalid textarea,
.al-field.is-invalid select { border-block-end-color: var(--al-red); }

.al-field__error { color: var(--al-red); font-size: 0.9375rem; font-weight: 600; }

.al-alert { padding: 14px 16px; margin-block-end: 16px; border-inline-start: 3px solid var(--al-red); background: var(--al-shade); color: var(--al-ink); font-weight: 600; }

.al-received {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    margin-block-end: 20px;
    background: var(--al-paper);
    color: var(--al-ink);
    font-weight: 600;
}

.al-received .al-stamp { position: static; flex: none; inline-size: 92px; }

@media (max-width: 900px) {
    .al-contact__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
    .al-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ logos */

.al-logos { padding-block: clamp(40px, 6vw, 72px); background: var(--al-cream); border-block: 1px solid var(--al-line); }
.al-logos .al-kicker { justify-content: center; margin-block-end: 24px; }

.al-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

.al-marquee__track { display: flex; inline-size: max-content; animation: al-marquee 36s linear infinite; }
[dir="rtl"] .al-marquee__track { animation-direction: reverse; }
.al-marquee:hover .al-marquee__track { animation-play-state: paused; }

.al-marquee__row { display: flex; align-items: center; gap: clamp(36px, 6vw, 88px); margin: 0; padding: 0; padding-inline-end: clamp(36px, 6vw, 88px); }

.al-marquee__item img { block-size: 36px; inline-size: auto; max-inline-size: 160px; object-fit: contain; }
.al-marquee__word { color: var(--al-ink); font-family: var(--al-display); font-size: 1.75rem; white-space: nowrap; }

@keyframes al-marquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- pricing */

.al-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; margin: 0; padding: 1px; }

.al-plan { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 40px); background: var(--al-cream); outline: 1px solid var(--al-line-strong); }
.al-plan--featured { background: var(--al-ink); color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-plan__badge { justify-self: start; padding: 2px 10px; background: var(--al-sun); color: var(--al-ink); font-family: var(--al-type); font-size: 0.8125rem; }
.al-plan__name { color: var(--al-ink); font-family: var(--al-display); font-size: 1.875rem; font-weight: 500; line-height: 1.1; }
.al-plan--featured .al-plan__name { color: var(--al-cream); }
.al-plan__price { display: flex; align-items: baseline; gap: 6px; color: var(--al-ink); font-family: var(--al-display); }
.al-plan--featured .al-plan__price { color: var(--al-cream); }
.al-plan__price b { font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 500; line-height: 1; font-variant-numeric: lining-nums; }
.al-plan__price i { font-size: 1.5rem; font-style: normal; }
.al-plan__price span { font-family: var(--al-sans); font-size: 0.9375rem; }
.al-plan__features { display: grid; gap: 8px; margin: 0; padding: 0; }
.al-plan__features li { position: relative; padding-inline-start: 22px; font-size: 1rem; }
.al-plan__features li::before { content: ""; position: absolute; inset-block-start: 0.55em; inset-inline-start: 0; inline-size: 9px; block-size: 9px; background: var(--al-red); }
.al-plan--featured .al-plan__features li::before { background: var(--al-sun); }

/* ------------------------------------------------------------- testimonies */

.al-voices__list { columns: 2; column-gap: clamp(32px, 6vw, 96px); margin: 0; padding: 0; }
.al-voice { break-inside: avoid; display: grid; gap: 14px; padding-block: 26px; border-block-start: 1px solid var(--al-line-strong); }
.al-voice__stars { display: flex; gap: 4px; }
.al-voice__stars i { inline-size: 10px; block-size: 10px; background: var(--al-line-strong); }
.al-voice__stars i.is-on { background: var(--al-red); }
.al-voice__quote p { color: var(--al-ink); font-family: var(--al-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.2; }
.al-voice__by { display: flex; align-items: center; gap: 12px; }
.al-voice__avatar, .al-voice__mono { flex: none; inline-size: 44px; block-size: 44px; object-fit: cover; }
.al-voice__mono { display: grid; place-items: center; background: var(--al-ink); color: var(--al-cream); font-family: var(--al-type); font-size: 0.8125rem; }
.al-voice__by b { display: block; color: var(--al-ink); }
.al-voice__by small { font-size: 0.9375rem; }

@media (max-width: 760px) {
    .al-voices__list { columns: 1; }
}

/* ------------------------------------------------------------- comparison */

.al-compare__scroll { overflow-x: auto; }

.al-compare__table { inline-size: 100%; min-inline-size: 620px; border-collapse: collapse; }
.al-compare__table th, .al-compare__table td { padding: 16px 14px; border-block-end: 1px solid var(--al-line-strong); text-align: start; }
.al-compare__table thead th { color: var(--al-ink); font-family: var(--al-display); font-size: 1.375rem; font-weight: 500; }
.al-compare__table tbody th { color: var(--al-ink); font-weight: 600; }
.al-compare__table .is-highlight { background: var(--al-shade); }
.al-compare__table thead .is-highlight { border-block-start: 3px solid var(--al-red); }
.al-tick { display: inline-block; inline-size: 22px; block-size: 22px; color: var(--al-red); }
.al-dash { display: inline-block; inline-size: 14px; block-size: 1px; background: var(--al-line-strong); vertical-align: middle; }

/* ---------------------------------------------------------------- gallery */

.al-shots { display: grid; gap: clamp(10px, 1.4vw, 20px); margin: 0; padding: 0; }
.al-shots--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.al-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.al-shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-shots li:nth-child(3n + 2) { margin-block-start: clamp(20px, 4vw, 60px); }
.al-shot { position: relative; display: block; overflow: hidden; color: inherit; text-decoration: none; }
.al-shot img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform 0.9s var(--al-out); }
.al-shot:hover img { transform: scale(1.04); }
.al-shot figcaption { padding-block-start: 8px; font-family: var(--al-type); font-size: 0.875rem; }

@media (max-width: 760px) {
    .al-shots--3, .al-shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .al-shots li:nth-child(n) { margin-block-start: 0; }
}

.al-lightbox { max-inline-size: min(92vw, 1100px); padding: 0; border: 0; background: var(--al-ink); color: var(--al-cream); }
.al-lightbox::backdrop { background: color-mix(in oklab, var(--al-ink) 88%, transparent); }
.al-lightbox img { max-block-size: 82svh; margin-inline: auto; }
.al-lightbox__caption { padding: 10px 16px; font-family: var(--al-type); font-size: 0.875rem; }
.al-lightbox__close { display: block; min-block-size: 44px; margin-inline-start: auto; padding-inline: 16px; border: 0; background: none; cursor: pointer; }

/* ------------------------------------------------------------------ video */

.al-film__box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--al-ink); }
.al-film__box iframe, .al-film__box video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; }
.al-film__poster { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

.al-film__play {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: grid;
    place-items: center;
    inline-size: 84px;
    block-size: 84px;
    margin: -42px;
    padding: 0;
    border: 0;
    background: var(--al-cream);
    color: var(--al-ink);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.3s var(--al-out);
}

.al-film__play:hover { background: var(--al-sun); transform: scale(1.06); }
.al-film__play svg { inline-size: 34px; block-size: 34px; }
.al-film__play-ring { display: none; }

/* ------------------------------------------------------------------- team */

.al-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(24px, 3vw, 44px); margin: 0; padding: 0; }
.al-person { display: grid; gap: 12px; align-content: start; }
.al-person__frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--al-shade); }
.al-person__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.al-person__mono { display: grid; place-items: center; block-size: 100%; color: var(--al-ink); font-family: var(--al-display); font-size: 3.4rem; }
.al-person h3 { color: var(--al-ink); font-family: var(--al-display); font-size: 1.625rem; font-weight: 500; line-height: 1.1; }
.al-person__role { font-family: var(--al-type); font-size: 0.875rem; }
.al-person__bio { font-size: 1rem; }

/* ---------------------------------------------------------------- masonry */

.al-board--ink { background: var(--al-ink); color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-board--ink .al-h2 { color: var(--al-cream); }
.al-board--ink .al-h2 em { color: var(--al-sun); }

.al-board__grid { display: grid; grid-template-columns: repeat(var(--al-board-cols, 3), minmax(0, 1fr)); gap: var(--al-board-gap, 16px); }

.al-tile { display: grid; align-content: start; gap: 12px; min-inline-size: 0; padding: clamp(20px, 2.4vw, 30px); border: 1px solid var(--al-line-strong); }
.al-board--ink .al-tile { border-color: color-mix(in oklab, var(--al-cream) 24%, transparent); }
.al-tile--solid { background: var(--al-shade); color: var(--al-body); }
.al-tile--align-center { justify-items: center; text-align: center; }
.al-tile--align-end { justify-items: end; text-align: end; }
.al-tile__media { overflow: hidden; margin: calc(-1 * clamp(20px, 2.4vw, 30px)); margin-block-end: 8px; }
.al-tile--image .al-tile__media { margin-block-end: calc(-1 * clamp(20px, 2.4vw, 30px)); }
.al-tile__media img { inline-size: 100%; block-size: 100%; }
.al-tile__icon { inline-size: 30px; block-size: 30px; color: var(--al-red); }
.al-tile__icon svg { inline-size: 100%; block-size: 100%; }
.al-tile__title { font-family: var(--al-display); font-size: 1.625rem; font-weight: 500; line-height: 1.1; }
.al-tile__text { font-size: 1rem; }

@media (max-width: 760px) {
    .al-board__grid { grid-template-columns: minmax(0, 1fr); }
    .al-tile { grid-column: auto !important; grid-row: auto !important; }
}

/* ------------------------------------------------------------------ bento */

.al-stall--primary { background: var(--al-stall-bg, var(--al-red)); color: var(--al-cream); }
.al-stall--secondary { background: var(--al-stall-bg, var(--al-ink)); color: var(--al-cream); }
.al-stall--solid { background: var(--al-stall-bg, var(--al-shade)); }
.al-stall--gradient { background: var(--al-stall-bg, linear-gradient(120deg, var(--al-red), var(--al-ink))); color: var(--al-cream); }
.al-stall--primary .al-h2, .al-stall--secondary .al-h2, .al-stall--gradient .al-h2 { color: var(--al-cream); }

.al-stall__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--al-stall-gap, 16px); }
.al-stall__col { display: grid; gap: var(--al-stall-gap, 16px); min-inline-size: 0; }
.al-stall__col--left { grid-template-rows: 2fr 1fr; }
.al-stall__col--right { grid-template-rows: 1fr 2fr; }
.al-stall__zone { min-inline-size: 0; min-block-size: 200px; overflow: hidden; border: 1px solid var(--al-line); }
.al-stall__zone--a, .al-stall__zone--d { min-block-size: 400px; }
.al-stall__media, .al-stall__media img { inline-size: 100%; block-size: 100%; }
.al-stall__media--fill img { object-fit: cover; }
.al-stall__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); block-size: 100%; }
.al-stall__item--media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.al-stall__item--cta { display: grid; place-items: center; padding: 20px; }
.al-stall__feature { display: grid; gap: 10px; justify-items: var(--al-stall-align, center); padding: clamp(20px, 3vw, 36px); text-align: var(--al-stall-align, center); }
.al-stall__icon { inline-size: 34px; block-size: 34px; color: var(--al-red); }
.al-stall__icon svg { inline-size: 100%; block-size: 100%; }
.al-stall__title { font-family: var(--al-display); font-weight: 500; line-height: 1.1; }
.al-stall__title--sm { font-size: 1.375rem; }
.al-stall__title--md { font-size: 1.75rem; }
.al-stall__title--lg { font-size: 2.25rem; }
.al-stall__title--xl { font-size: 3rem; }

@media (max-width: 760px) {
    .al-stall__grid { grid-template-columns: minmax(0, 1fr); }
    .al-stall__zone--a, .al-stall__zone--d { min-block-size: 280px; }
}

/* -------------------------------------------------------------- downloads */

.al-files--ink { background: var(--al-ink); color: color-mix(in oklab, var(--al-cream) 86%, var(--al-ink)); }
.al-files--red { background: var(--al-red); color: var(--al-cream); }
.al-files--ink .al-h2, .al-files--red .al-h2 { color: var(--al-cream); }

.al-files__scroll { overflow-x: auto; }
.al-files__table { inline-size: 100%; min-inline-size: 560px; border-collapse: collapse; }
.al-files__table th { padding: 10px 12px; font-family: var(--al-type); font-size: 0.8125rem; font-weight: 400; text-align: start; }
.al-files__table td { padding: 14px 12px; border-block-start: 1px solid var(--al-line-strong); vertical-align: middle; }
.al-files__name { display: block; color: inherit; font-weight: 600; }
.al-files__desc { display: block; font-size: 0.9375rem; }
.al-files__meta { font-family: var(--al-type); font-size: 0.875rem; white-space: nowrap; }
.al-files__action { text-align: end; }
.al-files__action svg { inline-size: 18px; block-size: 18px; }
.al-files--striped tbody tr:nth-child(odd) { background: var(--al-shade); }

.al-void { padding: 28px; border: 1px dashed var(--al-line-strong); color: var(--al-mute); }
.al-void h2, .al-void .al-h3 { color: var(--al-ink); font-family: var(--al-display); font-size: 1.75rem; font-weight: 500; }

/* --------------------------------------------------- pages, posts, prose */

.al-page-head { padding-block-start: calc(var(--al-nav-h) + clamp(48px, 8vw, 110px)); background: var(--al-cream); }
.al-page-head > .al-container { display: grid; gap: 18px; padding-block-end: clamp(36px, 5vw, 64px); }
.al-page-head__title { font-size: clamp(2.8rem, 7vw, 7rem); }

.al-empty { padding-block-start: calc(var(--al-nav-h) + clamp(56px, 10vw, 140px)); background: var(--al-cream); }
.al-empty__inner { display: grid; gap: 18px; padding-block-end: clamp(48px, 6vw, 80px); }
.al-empty__title { font-size: clamp(3rem, 8vw, 8rem); }

.al-prose { max-inline-size: 42em; }
.al-prose > * + * { margin-block-start: 1em; }
.al-prose h2 { margin-block-start: 1.7em; color: var(--al-ink); font-family: var(--al-display); font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.1; }
.al-prose h3 { margin-block-start: 1.5em; color: var(--al-ink); font-family: var(--al-display); font-size: 1.5rem; font-weight: 500; line-height: 1.15; }
.al-prose ul, .al-prose ol { padding-inline-start: 1.3em; list-style: revert; }
.al-prose li + li { margin-block-start: 0.4em; }
.al-prose a { color: var(--al-red); }
.al-prose blockquote { padding-inline-start: 1.2em; border-inline-start: 3px solid var(--al-red); font-family: var(--al-display); font-size: 1.5rem; line-height: 1.25; }
.al-prose img { margin-block: 1.4em; }
.al-prose--empty { color: var(--al-mute); }

.al-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.al-chips--nav { padding-block-start: clamp(24px, 4vw, 40px); }

.al-chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: 14px;
    border: 1px solid var(--al-line-strong);
    color: var(--al-ink);
    font-size: 0.9375rem;
    text-decoration: none;
}

.al-chip--static { min-block-size: 0; padding: 1px 8px; font-size: 0.8125rem; }
.al-chip:hover, .al-chip.is-active { background: var(--al-ink); color: var(--al-cream); }
.al-chip--static:hover { background: none; color: var(--al-ink); }

.al-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(28px, 4vw, 52px) clamp(20px, 3vw, 36px); }
.al-posts--featured { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }

.al-post__link { display: grid; gap: 14px; color: inherit; text-decoration: none; }
.al-post__frame { aspect-ratio: 4 / 3; overflow: hidden; background: var(--al-shade); }
.al-post__frame img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform 0.9s var(--al-out); }
.al-post__link:hover img { transform: scale(1.04); }
.al-post__void { display: grid; place-items: center; block-size: 100%; background: var(--al-tiles) center / 700px auto; }
.al-post__void svg { inline-size: 60px; block-size: 60px; padding: 12px; background: var(--al-ink); color: var(--al-cream); box-sizing: content-box; --al-mark-b: var(--al-sun); }
.al-post__body { display: grid; gap: 8px; justify-items: start; }
.al-post__meta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--al-type); font-size: 0.8125rem; color: var(--al-mute); }
.al-post__title { color: var(--al-ink); font-family: var(--al-display); font-size: 1.75rem; font-weight: 500; line-height: 1.1; }
.al-post--featured .al-post__title { font-size: clamp(2rem, 3.2vw, 2.875rem); }
.al-post__excerpt { font-size: 1rem; }
.al-post__more { display: inline-flex; align-items: center; gap: 8px; color: var(--al-red); font-weight: 600; }
.al-post__more svg { inline-size: 18px; block-size: 18px; }
[dir="rtl"] .al-post__more svg { transform: scaleX(-1); }

.al-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 48px; }
.al-pages__link { display: inline-flex; align-items: center; min-block-size: 44px; min-inline-size: 44px; justify-content: center; padding-inline: 12px; border: 1px solid var(--al-line); color: var(--al-ink); font-family: var(--al-type); font-size: 0.875rem; text-decoration: none; }
.al-pages__link:hover, .al-pages__link.is-current { background: var(--al-ink); color: var(--al-cream); }

.al-article__head { padding-block-end: 8px; }
.al-article__title { font-size: clamp(2.6rem, 5.6vw, 5.2rem); }
.al-article__meta { font-family: var(--al-type); font-size: 0.875rem; color: var(--al-mute); }
.al-article__meta span { margin-inline: 4px; }
.al-article__cover { overflow: hidden; }
.al-article__cover img { inline-size: 100%; }

.al-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--al-type); font-size: 0.875rem; }
.al-crumbs a { color: var(--al-red); }

.al-spacer--sm { block-size: 32px; }
.al-spacer--md { block-size: 64px; }
.al-spacer--lg { block-size: 112px; }
.al-spacer--xl { block-size: 180px; }

/* ----------------------------------------------------------------- footer */

.al-footer {
    position: relative;
    z-index: 2;
    background: var(--al-ink);
    color: color-mix(in oklab, var(--al-cream) 80%, var(--al-ink));
}

.al-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(36px, 6vw, 96px);
    padding-block: clamp(64px, 8vw, 110px) clamp(40px, 5vw, 72px);
}

.al-footer__office { display: grid; gap: 18px; justify-items: start; align-content: start; }
.al-footer__about { max-inline-size: 28em; }

.al-footer__address {
    color: var(--al-cream);
    font-family: var(--al-display);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    font-style: normal;
    line-height: 1.2;
}

.al-footer__direct { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }

.al-footer__direct a {
    color: var(--al-sun);
    font-family: var(--al-display);
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    line-height: 1.2;
    font-variant-numeric: lining-nums;
    text-decoration: none;
}

.al-footer__direct a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }

.al-footer__nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 32px clamp(20px, 3vw, 40px); align-content: start; }

.al-footer__nav h2 { margin-block-end: 10px; color: var(--al-cream); font-family: var(--al-type); font-size: 0.875rem; font-weight: 400; }

.al-footer__list { display: grid; margin: 0; padding: 0; list-style: none; }

.al-footer__list .al-menu__link,
.al-footer__list li > a {
    min-block-size: 36px;
    padding-inline: 0;
    color: inherit;
    font-size: 0.9688rem;
    font-weight: 400;
    white-space: normal;
}

.al-footer__list .al-menu__link:hover { color: var(--al-cream); }
.al-footer__list .al-menu__sub { position: static; padding: 0; border: 0; background: none; color: inherit; opacity: 1; visibility: visible; transform: none; }
.al-footer__list .al-menu__chevron { display: none; }

.al-socials { display: flex; gap: 4px; margin: 10px 0 0; padding: 0; list-style: none; }
.al-socials a { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; color: inherit; }
.al-socials a:hover { color: var(--al-sun); }

/* The wordmark, cut out of the floor. */
.al-footer__word {
    overflow: hidden;
    padding-inline: var(--al-gutter);
    color: var(--al-cream);
    background: var(--al-tiles-word) 0 58% / 1120px auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: "Ibarra Real Nova", var(--al-display);
    font-size: clamp(7rem, 33vw, 40rem);
    font-weight: 700;
    line-height: 0.74;
    letter-spacing: 0.015em;
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

.al-footer__bottom { margin-block-start: clamp(20px, 3vw, 40px); border-block-start: 1px solid color-mix(in oklab, var(--al-cream) 18%, transparent); }

.al-footer__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 28px;
    padding-block: 18px;
    font-size: 0.875rem;
}

.al-footer__bar span[dir="ltr"] { font-family: var(--al-type); }
.al-footer__bar a { color: inherit; }

@media (max-width: 900px) {
    .al-footer__top { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------ video */

.hv__toggle { --hv-toggle-block: calc(var(--al-nav-h) + 16px); }

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

.al-still *,
.al-still *::before,
.al-still *::after {
    animation: none !important;
    transition: none !important;
}

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

    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }

    .al-marquee__track { animation: none; }
    .al-marquee { overflow-x: auto; mask-image: none; }
}