/* ============================================================
   ethanhawes.online — Full stylesheet
   Design tokens + site component styles
   ============================================================ */
/* ---------- Fonts ---------- */
@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-LightItalic.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Book.ttf") format("truetype");
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-SemiBoldItalic.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Display";
    src: url("../fonts/HalyardDisplay-BoldItalic.ttf") format("truetype");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-Book.ttf") format("truetype");
    font-weight: 350;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-Italic.ttf") format("truetype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Text";
    src: url("../fonts/HalyardText-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Micro";
    src: url("../fonts/HalyardMicro-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Micro";
    src: url("../fonts/HalyardMicro-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Micro";
    src: url("../fonts/HalyardMicro-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Halyard Micro";
    src: url("../fonts/HalyardMicro-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Design Tokens
   ============================================================ */
:root {
    /* Per-page arrow color — overridden by body.hero-* classes */
    --c-arrow: var(--c-brass);
    --c-ink: #14191b;
    --c-sage: #7a9ea1;
    --c-coral: #e1918f;
    --c-cream: #f5f1eb;
    --c-brass: #c9a96f;
    --c-ink-700: #1c2225;
    --c-ink-600: #242b2e;
    --c-ink-500: #2e373b;
    --c-ink-400: #475055;
    --c-sage-700: #5d8589;
    --c-sage-300: #a4c0c2;
    --c-coral-700: #c46f6d;
    --c-coral-300: #eeb2b1;
    --c-brass-700: #a78850;
    --c-brass-300: #dcc395;
    --c-cream-700: #cbc6bd;
    --c-cream-500: #8f8b83;
    --bg: var(--c-ink);
    --bg-raised: var(--c-ink-700);
    --bg-sunken: #0f1315;
    --surface: var(--c-ink-600);
    --hairline: var(--c-ink-500);
    --fg-1: var(--c-cream);
    --fg-2: var(--c-cream-700);
    --fg-3: var(--c-cream-500);
    --fg-muted: var(--c-ink-400);
    --accent: var(--c-coral);
    --accent-hover: var(--c-coral-700);
    --accent-soft: color-mix(in oklab, var(--c-coral) 18%, transparent);
    --accent-contrast: var(--c-ink);
    --accent-2: var(--c-sage);
    --accent-2-hover: var(--c-sage-700);
    --accent-2-soft: color-mix(in oklab, var(--c-sage) 16%, transparent);
    --accent-3: var(--c-brass);
    --accent-3-hover: var(--c-brass-700);
    --link: var(--c-sage-300);
    --link-hover: var(--c-cream);
    --focus-ring: color-mix(in oklab, var(--c-coral) 70%, white 10%);
    --s-0: 0;
    --s-1: 4px;
    --s-2: 8px;
    --s-3: 12px;
    --s-4: 16px;
    --s-5: 20px;
    --s-6: 24px;
    --s-8: 32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;
    --r-1: 2px;
    --r-2: 4px;
    --r-3: 8px;
    --r-4: 12px;
    --r-5: 20px;
    --r-pill: 999px;
    --border-hair: 1px solid var(--hairline);
    --border-soft: 1px solid color-mix(in oklab, var(--c-cream) 8%, transparent);
    --border-strong: 1px solid color-mix(in oklab, var(--c-cream) 20%, transparent);
    --shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --shadow-2: 0 4px 12px rgba(0,0,0,.4);
    --shadow-3: 0 12px 32px rgba(0,0,0,.5);
    --ease-out: cubic-bezier(.22, .61, .36, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --ease-soft: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: 120ms;
    --dur-base: 220ms;
    --dur-slow: 420ms;
    --font-display: "Halyard Display", "Inter", system-ui, sans-serif;
    --font-text: "Halyard Text", "Halyard Display", "Inter", system-ui, sans-serif;
    --font-micro: "Halyard Micro", "Halyard Text", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, Menlo, monospace;
    --fs-hero: clamp(45px, calc((100vw - (2 * var(--gutter))) * 0.125), 144px);
    --fs-h1: clamp(40px, 6vw, 80px);
    --fs-h2: clamp(28px, 3.4vw, 44px);
    --fs-h3: 24px;
    --fs-h4: 18px;
    --fs-body-lg: 19px;
    --fs-body: 15px;
    --fs-small: 13px;
    --fs-micro: 12px;
    --fs-eyebrow: 11px;
    --content-max: 1120px;
    --gutter: clamp(20px, 4vw, 48px);
}

/* ============================================================
   Per-page hero color (set via body.hero-* on case study pages)
   ============================================================ */
body.hero-coral { --c-arrow: var(--c-coral); }
body.hero-sage   { --c-arrow: var(--c-sage); }
body.hero-brass  { --c-arrow: var(--c-brass); }
body.hero-ink    { --c-arrow: var(--c-cream); }

/* ============================================================
   Shared circular gallery arrow (replaces inline-styled variants)
   ============================================================ */
.eh-gallery-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--c-arrow) 40%, transparent);
    background: transparent;
    color: color-mix(in oklab, var(--c-arrow) 70%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    line-height: 1;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
}
.eh-gallery-arrow:hover {
    border-color: var(--c-arrow);
    color: var(--c-arrow);
    background: color-mix(in oklab, var(--c-arrow) 10%, transparent);
}
.eh-gallery-arrow:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ============================================================
   Base reset & elements
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg);
    color: var(--fg-1);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--c-coral);
    color: var(--c-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    color: var(--fg-1);
    line-height: 1.05;
}

h1 {
    font-family: var(--font-micro);
    font-weight: 600;
    font-size: var(--fs-h1);
    text-transform: uppercase;
    letter-spacing: -0.07em;
    line-height: 1.05;
}

h2 {
    font-family: var(--font-display);
    font-weight: 600;
    font-style: normal;
    font-size: var(--fs-h2);
    letter-spacing: -0.02em;
    line-height: 1.08;
}

h3 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h3);
    letter-spacing: -0.01em;
}

h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h4);
    letter-spacing: -0.01em;
}

p {
    margin: 0;
    color: var(--fg-2);
    font-family: var(--font-text);
    font-weight: 350;
    font-size: var(--fs-body);
    line-height: 1.65;
    text-wrap: pretty;
}

a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in oklab, var(--link) 35%, transparent);
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

a:hover {
    color: var(--link-hover);
    border-bottom-color: var(--link-hover);
}

ul,
ol {
    margin: 0;
    padding: 0;
}

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

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

hr {
    border: 0;
    border-top: var(--border-hair);
    margin: var(--s-8) 0;
}

/* ============================================================
   Layout wrappers
   ============================================================ */
.eh-page {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.eh-section {
    padding: var(--s-20) 0;
    border-top: var(--border-hair);
}

.eh-section:first-child {
    border-top: 0;
}

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

.eh-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--s-10);
}

.eh-section__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    color: var(--fg-3);
}

/* ============================================================
   Typography utilities
   ============================================================ */
.eh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: var(--s-6);
}

.eh-rule {
    display: inline-block;
    width: 36px;
    height: 2px;
    background: var(--accent-3);
}

.eh-lead {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--fg-1);
    max-width: 60ch;
}

.eh-wordmark {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    color: var(--accent-2);
    letter-spacing: -0.01em;
}

.eh-mono-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--fg-3);
}

/* ============================================================
   Nav
   ============================================================ */
.eh-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--gutter);
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in oklab, var(--c-ink) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: var(--border-hair);
}

.eh-nav__brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    border: 0;
    min-height: 44px;
}

.eh-nav__logo {
    height: 36px;
    width: auto;
    max-width: 60vw;
    display: block;
    flex-shrink: 1;
    align-self: center;
    object-fit: contain;
    transition: opacity var(--dur-fast) var(--ease-soft);
}

.eh-nav__brand:hover .eh-nav__logo {
    opacity: 0.8;
}

.eh-nav__links {
    display: none;
    gap: 28px;
}

.eh-nav__link {
    font-family: var(--font-micro);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
    text-decoration: none;
    border: 0;
    padding-bottom: 4px;
    transition: color var(--dur-fast) var(--ease-soft);
}

.eh-nav__link:hover,
.eh-nav__link.is-active {
    color: var(--fg-1);
}

.eh-nav__link.is-active::after {
    content: "";
    display: block;
    height: 2px;
    background: var(--accent-3);
    margin-top: 6px;
}

.eh-nav__cta {
    display: none;
    margin-left: auto;
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid color-mix(in oklab, var(--c-cream) 22%, transparent);
    padding: 10px 16px;
    border-radius: var(--r-pill);
    color: var(--fg-1);
    text-decoration: none;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}

.eh-nav__cta:hover {
    background: var(--c-coral);
    border-color: var(--c-coral);
    color: var(--c-ink);
}

/* Nav toggle — mobile only */
.eh-nav__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    min-height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--fg-1);
}

.eh-nav__menu-label {
    font-family: var(--font-micro);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-1);
    display: none;
}

@media (min-width: 768px) {
    .eh-nav__menu-label {
        display: block;
    }
}

.eh-nav__lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.eh-nav__lines span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--fg-1);
    transition: all var(--dur-base) var(--ease-soft);
}

/* Dropdown open state */
.eh-nav.is-open .eh-nav__links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c-ink-700);
    padding: var(--s-6) var(--gutter);
    gap: var(--s-5);
    border-bottom: var(--border-hair);
}

/* At tablet/desktop, constrain menu to 25% width, right-aligned under toggle */
@media (min-width: 768px) {
    .eh-nav.is-open .eh-nav__links {
        left: auto;
        right: 0;
        width: 25%;
        min-width: 200px;
        border-bottom: 0;
        border-left: var(--border-hair);
    }
}

/* ============================================================
   Buttons
   ============================================================ */
.eh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-text);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--r-3);
    padding: 13px 22px;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-base);
}

.eh-btn--primary {
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.9vw, 13px);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    text-transform: uppercase;
    background: transparent;
    color: var(--c-brass);
    border-color: var(--c-brass);
}

.eh-btn--primary:hover,
.eh-btn--primary:focus-visible {
    color: var(--c-cream);
    border-color: var(--c-cream);
}

.eh-btn--ghost {
    background: transparent;
    color: var(--fg-1);
    padding-left: 6px;
    padding-right: 6px;
    border: 0;
}

.eh-btn--ghost::after {
    content: "→";
    margin-left: 6px;
    opacity: 0.6;
    transition: transform var(--dur-base), opacity var(--dur-fast);
}

.eh-btn--ghost:hover {
    color: var(--accent-2);
}

.eh-btn--ghost:hover::after {
    transform: translateX(4px);
    opacity: 1;
}

/* Back nav — case study pages */
.eh-back-nav {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-decoration: none;
    border-bottom: none;
    padding: var(--s-5) 0 0;
    color: var(--fg-1);
    transition: color var(--dur-base) var(--ease-out);
}

.eh-back-nav:hover {
    color: var(--c-arrow);
    border-bottom-color: transparent;
}

.eh-back-nav__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid currentColor;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    color: currentColor;
    transition: color var(--dur-base) var(--ease-out);
}

/* Chevron (replaces ← character in markup) */
.eh-back-nav__btn::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-left: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(1px, -1px);
    transition: border-color var(--dur-base) var(--ease-out);
}

.eh-back-nav__label {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ============================================================
   Hero — home page
   ============================================================ */
.eh-hero {
    padding: clamp(24px, 4.8vw, 48px) 0 var(--s-10);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(16px, 4.3vw, 48px) var(--s-16);
    align-items: end;
    position: relative;
}

.eh-hero__eyebrow {
    grid-column: 1 / -1;
    font-size: clamp(11px, 0.95vw, 14px);
    margin-bottom: clamp(-31px, -3.2vw, -10px);
}

.eh-hero__title-wrap {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.eh-hero__title {
    font-family: var(--font-micro);
    font-weight: 300;
    font-size: var(--fs-hero);
    text-transform: uppercase;
    letter-spacing: -0.07em;
    line-height: 1.02;
    color: var(--fg-1);
    margin: 0;
}

.eh-hero__title-em {
    display: inline-block;
    font-weight: 600;
    color: var(--accent-2);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .eh-hero__title-em {
        background: linear-gradient(90deg, var(--c-coral), var(--c-sage), var(--c-brass), var(--c-cream), var(--c-coral));
        background-size: 300% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: eh-impact-gradient 7s linear infinite;
    }
}

@keyframes eh-impact-gradient {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 300% 50%;
    }
}

.eh-hero__star {
    position: absolute;
    right: clamp(-28px, -3vw, -8px);
    top: clamp(-28px, -3vw, 8%);
    width: clamp(220px, 36vw, 520px);
    height: clamp(220px, 36vw, 520px);
    opacity: 0.1;
    pointer-events: none;
    z-index: 0;
    filter: none;
}

.eh-hero > :not(.eh-hero__star) {
    position: relative;
    z-index: 1;
}

.eh-hero__tagline {
    grid-column: 1 / -1;
    font-family: var(--font-micro);
    font-size: clamp(16px, 1.55vw, 22px);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-cream);
    line-height: 1.5;
    margin: 0 0 clamp(5px, 1vw, 10px);
}

.eh-hero__tagline .t-brass  { color: var(--c-brass); }
.eh-hero__tagline .t-sage   { color: var(--c-sage); }
.eh-hero__tagline .t-for    { text-transform: lowercase; }
.eh-hero__tagline-line { white-space: nowrap; }

@media (max-width: 960px) and (orientation: landscape) {
    .tagline-br { display: none; }
}

.eh-hero__lede {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: clamp(-22px, -1.8vw, -8px);
}

.eh-hero__lede p {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(16px, 1.35vw, var(--fs-body-lg));
    letter-spacing: 0;
    line-height: 1.45;
    color: var(--fg-1);
    margin-bottom: var(--s-6);
}

.eh-hero__lede-name {
    font-weight: 600;
    text-transform: uppercase;
    color: var(--c-sage);
}

.eh-hero__cta-row {
    display: flex;
    gap: var(--s-3);
    align-items: center;
    flex-wrap: wrap;
}

.eh-hero__cta-row .eh-btn {
    font-family: var(--font-mono);
    font-size: clamp(12px, 0.9vw, 13px);
    text-transform: uppercase;
    color: var(--c-brass);
    border-color: var(--c-brass);
}

.eh-hero__cta-row .eh-btn:hover,
.eh-hero__cta-row .eh-btn:focus-visible {
    color: var(--c-cream);
    border-color: var(--c-cream);
}

/* ============================================================
   Carousel Slider — home page hero
   ============================================================ */
.eh-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-5);
    margin-top: var(--s-10);
    grid-column: 1 / -1;
}

.eh-carousel__track {
    display: flex;
    transition: transform 0.55s var(--ease-in-out);
    will-change: transform;
}

.eh-carousel__slide {
    flex: 0 0 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: 460px;
}

/* Image card — left half */
.eh-carousel__img-panel {
    overflow: hidden;
    position: relative;
    background: var(--c-ink-700);
}

.eh-carousel__img-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s var(--ease-soft);
}

.eh-carousel__slide:hover .eh-carousel__img-panel img {
    transform: scale(1.03);
}

/* Color/text card variant — right half */
.eh-carousel__text-panel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--s-10) var(--s-10) var(--s-8);
    position: relative;
    overflow: hidden;
}

.eh-carousel__text-panel--coral {
    background: var(--c-coral);
}

.eh-carousel__text-panel--sage {
    background: var(--c-sage);
}

.eh-carousel__text-panel--brass {
    background: var(--c-brass);
}

.eh-carousel__text-panel--ink {
    background: var(--c-ink-600);
}

.eh-carousel__text-panel--cream {
    background: var(--c-cream);
    color: var(--c-ink);
}

/* Pure text slide (no image) */
.eh-carousel__slide--text-only .eh-carousel__text-panel {
    grid-column: 1 / -1;
}

.eh-carousel__tag {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink);
    opacity: 0.65;
    margin-bottom: var(--s-3);
}

.eh-carousel__text-panel--ink .eh-carousel__tag {
    color: var(--fg-3);
    opacity: 1;
}

.eh-carousel__slide-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-style: normal;
    font-size: clamp(26px, 2.8vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--c-ink);
    margin: 0 0 var(--s-3);
}

.eh-carousel__text-panel--ink .eh-carousel__slide-title {
    color: var(--fg-1);
}

.eh-carousel__slide-body {
    font-family: var(--font-text);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.55;
    color: var(--c-ink);
    opacity: 0.75;
    margin: 0 0 var(--s-5);
    max-width: 38ch;
}

.eh-carousel__text-panel--ink .eh-carousel__slide-body {
    color: var(--fg-2);
    opacity: 1;
}

.eh-carousel__slide-link {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-ink);
    text-decoration: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 0;
    transition: gap var(--dur-base) var(--ease-out);
}

.eh-carousel__text-panel--ink .eh-carousel__slide-link {
    color: var(--c-brass-300);
}

.eh-carousel__slide-link:hover {
    gap: 14px;
}

.eh-carousel__slide-link .arrow {
    transition: transform var(--dur-base) var(--ease-out);
}

.eh-carousel__slide-link:hover .arrow {
    transform: translateX(4px);
}

/* Controls */
.eh-carousel__controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s-5);
}

.eh-carousel__dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.eh-carousel__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--c-cream) 22%, transparent);
    border: 0;
    padding: 0;
    transition: background var(--dur-base), width var(--dur-base) var(--ease-out);
    cursor: pointer;
}

.eh-carousel__dot.is-active {
    background: var(--c-brass);
    width: 24px;
    border-radius: var(--r-pill);
}

/* Expanded tap area for dots */
.eh-carousel__dot::before {
    content: '';
    position: absolute;
    inset: -18px -12px;
}

.eh-carousel__arrows {
    display: flex;
    gap: var(--s-3);
}

.eh-carousel__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid color-mix(in oklab, var(--c-cream) 35%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in oklab, var(--c-cream) 55%, transparent);
    font-size: 18px;
    transition: border-color var(--dur-fast), color var(--dur-fast), background var(--dur-fast);
    cursor: pointer;
    background: transparent;
}

.eh-carousel__arrow:hover {
    border-color: var(--c-cream);
    color: var(--c-cream);
    background: var(--bg-raised);
}

/* ============================================================
   Services / Capabilities
   ============================================================ */
.eh-caps__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
}

.eh-caps__item {
    padding: var(--s-6) 0;
    border-top: var(--border-hair);
}

.eh-caps__num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--c-brass);
    margin-bottom: var(--s-4);
    letter-spacing: 0.06em;
}

.eh-caps__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.01em;
    color: var(--fg-1);
    margin: 0 0 var(--s-3);
}

.eh-caps__body {
    font-family: var(--font-text);
    font-weight: 350;
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-2);
    margin: 0;
}

/* ============================================================
   About teaser (home)
   ============================================================ */
.eh-about-teaser {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
    align-items: center;
}

.eh-about-teaser__portrait {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-5);
    background: var(--c-sage-700);
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eh-about-teaser__portrait img.portrait-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eh-about-teaser__portrait .portrait-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.eh-about-teaser__portrait .portrait-placeholder img {
    width: 22%;
    opacity: 0.5;
}

.eh-about-teaser__portrait-label {
    position: absolute;
    bottom: 16px;
    left: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--c-ink);
    opacity: 0.5;
}

.eh-about-teaser__content h2 {
    margin-bottom: var(--s-6);
}

.eh-about-teaser__content p {
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-2);
    margin-bottom: var(--s-5);
}

/* ============================================================
   Contact form
   ============================================================ */
.eh-contact-section {
    padding: var(--s-24) 0 var(--s-20);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-16);
    align-items: start;
}

.eh-contact-section .eh-eyebrow {
    grid-column: 1 / -1;
}

.eh-contact__title {
    font-family: var(--font-micro);
    font-style: normal;
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.04;
    letter-spacing: -0.07em;
    color: var(--fg-1);
    margin: 0;
}

.eh-contact__title-em {
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--accent-2);
    letter-spacing: -0.07em;
    text-transform: uppercase;
}

.eh-contact__title-accent {
    color: var(--accent-2);
}

.eh-contact__text-links {
    display: grid;
    gap: var(--s-3);
    margin-top: var(--s-6);
}

.eh-contact__text-links a {
    width: fit-content;
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--fg-1);
    border: 0;
    text-decoration: none;
    transition: color var(--dur-fast);
}

.eh-contact__text-links a:hover,
.eh-contact__text-links a:focus-visible {
    color: var(--accent);
}

.eh-contact__text-links b {
    font-weight: 400;
}

.eh-contact__text-links span {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: var(--fs-eyebrow);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.eh-contact__body {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    letter-spacing: -0.02em;
    color: var(--fg-1);
    max-width: 44ch;
    line-height: 1.45;
    margin: var(--s-5) 0 var(--s-8);
}

.eh-contact__channels {
    display: flex;
    gap: var(--s-6);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--s-5);
}

.eh-contact__channel {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-2);
    text-decoration: none;
    border: 0;
    padding: 12px 0;
    display: inline-block;
    transition: color var(--dur-fast);
}

.eh-contact__channel:hover {
    color: var(--fg-1);
}

/* Form */
.eh-form {
    position: relative;
    display: grid;
    gap: var(--s-5);
}

.eh-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.eh-form__group {
    display: grid;
    gap: var(--s-2);
}

.eh-form__label {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.eh-form__input,
.eh-form__textarea,
.eh-form__select {
    width: 100%;
    background: var(--bg-raised);
    border: var(--border-hair);
    border-radius: var(--r-3);
    padding: 12px 16px;
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--fg-1);
    outline: none;
    transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
    appearance: none;
}

.eh-form__input:focus,
.eh-form__textarea:focus,
.eh-form__select:focus {
    border-color: var(--c-sage);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-sage) 20%, transparent);
}

.eh-form__input::placeholder,
.eh-form__textarea::placeholder {
    color: var(--fg-3);
}

.eh-form__textarea {
    resize: vertical;
    min-height: 140px;
}

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

.eh-form__submit {
    margin-top: var(--s-3);
}

/* ============================================================
   Work gallery / card grid
   ============================================================ */
.eh-work-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-8);
}

.eh-work-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Filter bar */
.eh-filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: var(--s-10);
}

.eh-filter-btn {
    font-family: var(--font-micro);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 13px 16px;
    border-radius: var(--r-pill);
    cursor: pointer;
    background: transparent;
    color: var(--fg-2);
    border: 1px solid color-mix(in oklab, var(--c-cream) 22%, transparent);
    transition: all var(--dur-fast) var(--ease-soft);
}

.eh-filter-btn.is-active,
.eh-filter-btn:hover {
    background: var(--c-cream);
    color: var(--c-ink);
    border-color: var(--c-cream);
}

.eh-filter-btn.is-active {
    font-weight: 700;
}

/* Card — base */
.eh-card {
    text-decoration: none;
    border: 0;
    display: grid;
    gap: var(--s-3);
    transition: opacity var(--dur-base) var(--ease-soft), transform var(--dur-base) var(--ease-soft);
}

.eh-card.is-hidden {
    display: none;
}

/* Image card */
.eh-card__img {
    border-radius: var(--r-4);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    position: relative;
    background: var(--c-ink-700);
}

.eh-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-soft);
}

.eh-card:hover .eh-card__img img {
    transform: scale(1.04);
}

/* Text/color card (no image) */
.eh-card__color-panel {
    border-radius: var(--r-4);
    aspect-ratio: 4 / 3;
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    transition: transform var(--dur-base) var(--ease-out);
}

.eh-card:hover .eh-card__color-panel {
    transform: translateY(-3px);
}

.eh-card__color-panel--coral {
    background: var(--c-coral);
}

.eh-card__color-panel--sage {
    background: var(--c-sage);
}

.eh-card__color-panel--brass {
    background: var(--c-brass);
}

.eh-card__color-panel--ink {
    background: var(--c-ink-600);
    border: var(--border-hair);
}

.eh-card__color-panel--cream {
    background: var(--c-cream);
}

.eh-card__panel-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}

.eh-card__color-panel--ink .eh-card__panel-title {
    color: var(--fg-1);
}

.eh-card__panel-deco {
    position: absolute;
    top: var(--s-5);
    right: var(--s-5);
    opacity: 0.2;
    width: 40px;
}

/* Project name (below image card) */
.eh-card__name {
    font-family: var(--font-micro);
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    color: var(--fg-1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.2;
    margin: 0;
    transition: color var(--dur-fast);
}

/* Default name hover */
.eh-card:hover .eh-card__name { color: var(--fg-2); }

/* Per-color variant name hover */
.eh-card--sage:hover  .eh-card__name { color: var(--c-sage); }
.eh-card--coral:hover .eh-card__name { color: var(--c-coral); }
.eh-card--brass:hover .eh-card__name { color: var(--c-brass); }
.eh-card--ink:hover   .eh-card__name { color: var(--fg-2); }

/* Card meta row */
.eh-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
}

.eh-card__dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--c-brass);
    flex-shrink: 0;
}

.eh-card__title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 16px;
    color: var(--fg-1);
    letter-spacing: -0.01em;
    transition: color var(--dur-fast);
}

.eh-card:hover .eh-card__title {
    color: var(--fg-1);
}

/* ============================================================
   Project header (visual portfolio)
   ============================================================ */
.eh-proj-header {
    padding: var(--s-20) 0 var(--s-12);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-8);
}

.eh-proj-header__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1;
    letter-spacing: -0.025em;
    color: var(--fg-1);
    margin: 0;
    max-width: 22ch;
}

.eh-proj-header__subhead {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--fg-2);
    max-width: 56ch;
    margin: 0;
}

.eh-proj-header__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-4);
    padding-top: var(--s-6);
    border-top: var(--border-hair);
}

.eh-proj-header__meta-item dt {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 6px;
}

.eh-proj-header__meta-item dd {
    margin: 0;
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--fg-1);
}

/* Project body section */
.eh-proj-section {
    padding: var(--s-16) 0;
    border-top: var(--border-hair);
}

.eh-proj-section__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(24px, 2.8vw, 38px);
    letter-spacing: -0.02em;
    color: var(--fg-1);
    margin: var(--s-3) 0 var(--s-8);
    max-width: 24ch;
}

.eh-proj-section__body {
    max-width: 64ch;
}

.eh-proj-section__body p {
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-2);
    margin: 0 0 var(--s-5);
}

.eh-proj-section__body p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   Case study header — color-block hero
   ============================================================ */
.eh-cs-hero {
    margin: var(--s-12) 0 0;
    border-radius: var(--r-5);
    padding: var(--s-16) var(--s-12) var(--s-12);
    position: relative;
    overflow: hidden;
}

.eh-cs-hero--coral {
    background: var(--c-coral);
}

.eh-cs-hero--sage {
    background: var(--c-sage);
}

.eh-cs-hero--brass {
    background: var(--c-brass);
}

.eh-cs-hero--ink {
    background: var(--c-ink-600);
    border: var(--border-hair);
}

.eh-cs-hero__tag {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-ink);
    opacity: 0.55;
    margin-bottom: var(--s-5);
}

.eh-cs-hero--ink .eh-cs-hero__tag {
    color: var(--fg-3);
    opacity: 1;
}

.eh-cs-hero__title {
    font-family: var(--font-micro);
    font-weight: 600;
    text-transform: uppercase;
    font-size: clamp(40px, 6vw, 84px);
    letter-spacing: -0.07em;
    line-height: 1.02;
    color: var(--c-ink);
    margin: 0;
    max-width: 20ch;
}

.eh-cs-hero--ink .eh-cs-hero__title {
    color: var(--fg-1);
}

.eh-cs-hero__subhead {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-body-lg);
    letter-spacing: -0.02em;
    line-height: 1.45;
    color: var(--c-ink);
    opacity: 0.72;
    max-width: 56ch;
    margin: var(--s-5) 0 0;
}

.eh-cs-hero--ink .eh-cs-hero__subhead {
    color: var(--fg-2);
    opacity: 1;
}

.eh-cs-hero__meta {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-8);
    padding-top: var(--s-6);
    border-top: 1px solid color-mix(in oklab, var(--c-ink) 20%, transparent);
}

.eh-cs-hero--ink .eh-cs-hero__meta {
    border-top: var(--border-hair);
}

.eh-cs-hero__meta dt {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-ink);
    opacity: 0.5;
    margin-bottom: 6px;
}

.eh-cs-hero--ink .eh-cs-hero__meta dt {
    color: var(--fg-3);
    opacity: 1;
}

.eh-cs-hero__meta dd {
    margin: 0;
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--c-ink);
}

.eh-cs-hero--ink .eh-cs-hero__meta dd {
    color: var(--fg-1);
}

.eh-cs-hero__deco {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 260px;
    opacity: 0.12;
    pointer-events: none;
}

.eh-cs-hero--ink .eh-cs-hero__deco {
    opacity: 0.06;
}

/* Case study body section */
.eh-cs-section {
    padding: var(--s-16) 0;
    border-top: var(--border-hair);
}

.eh-cs-section__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: -0.02em;
    color: var(--fg-1);
    margin: var(--s-3) 0 var(--s-8);
    max-width: 24ch;
}

.eh-cs-section__body {
    max-width: 64ch;
}

.eh-cs-section__body p {
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-2);
    margin: 0 0 var(--s-5);
}

.eh-cs-section__body p:last-child {
    margin-bottom: 0;
}

.eh-cs-section--full .eh-cs-section__body {
    max-width: none;
}

/* Image placeholder slot */
.eh-img-slot {
    border-radius: var(--r-4);
    overflow: hidden;
    background: var(--c-ink-700);
    position: relative;
}

.eh-img-slot--sage {
    background: color-mix(in oklab, var(--c-sage) 25%, var(--c-ink-700));
}

.eh-img-slot--coral {
    background: color-mix(in oklab, var(--c-coral) 20%, var(--c-ink-700));
}

.eh-img-slot--brass {
    background: color-mix(in oklab, var(--c-brass) 20%, var(--c-ink-700));
}

.eh-img-slot:has(.eh-img-slot__label) {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eh-img-slot__label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    text-align: center;
    padding: var(--s-3);
}

.eh-img-slot img {
    width: 100%;
    height: auto;
    display: block;
}

/* 2-up grid */
.eh-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-5);
}

.eh-grid-2 .eh-img-slot {
    aspect-ratio: 4 / 5;
}

/* Frame hugs each image’s natural aspect ratio (mixed formats in one row) */
.eh-grid-2--fit {
    align-items: start;
}

.eh-grid-2--fit .eh-img-slot {
    aspect-ratio: auto;
}

.eh-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
}

/* Case study infographics */
.eh-infographic-section {
    border-top: 0;
    padding-top: 0;
}

.eh-infographic {
    background: var(--bg-raised);
    border: var(--border-hair);
    border-radius: var(--r-4);
    padding: var(--s-8);
}

.eh-infographic__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 38px);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--fg-1);
    margin: 0 0 var(--s-7);
    max-width: 22ch;
}

.eh-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}

.eh-stat {
    border-top: 2px solid var(--c-brass);
    padding-top: var(--s-4);
    min-width: 0;
}

.eh-stat__number {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: clamp(34px, 4.4vw, 58px);
    letter-spacing: -0.06em;
    line-height: 0.95;
    color: var(--c-brass);
    margin: 0 0 var(--s-3);
}

.eh-stat__label {
    font-family: var(--font-text);
    font-size: 15px;
    line-height: 1.45;
    color: var(--fg-2);
    margin: 0;
}

.eh-funded-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3) var(--s-6);
    list-style: none;
    margin: 0;
    padding: 0;
}

.eh-funded-list li {
    position: relative;
    border-top: var(--border-hair);
    padding: var(--s-3) 0 0 var(--s-5);
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.45;
    color: var(--fg-2);
}

.eh-funded-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--s-3) + 0.55em);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-coral);
}

.eh-compare {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
}

.eh-compare__col {
    border: var(--border-hair);
    border-radius: var(--r-4);
    padding: var(--s-6);
    background: color-mix(in oklab, var(--c-ink-700) 45%, transparent);
}

.eh-compare__heading {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-1);
    margin: 0 0 var(--s-4);
}

.eh-compare__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eh-compare__list li {
    border-top: var(--border-hair);
    padding: var(--s-3) 0;
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.4;
    color: var(--fg-2);
}

.eh-compare__list li:last-child {
    padding-bottom: 0;
}

/* ============================================================
   Related work strip
   ============================================================ */
.eh-related {
    padding: var(--s-16) 0;
    border-top: var(--border-hair);
}

.eh-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin-top: var(--s-8);
}

/* ============================================================
   About / Resume page
   ============================================================ */
.eh-about-bio {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: var(--s-12);
    padding: var(--s-20) 0 var(--s-16);
    align-items: start;
}

.eh-about-bio__portrait-col {
    display: grid;
    gap: var(--s-4);
}

.eh-about-bio__caption {
    margin: 0;
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    text-align: center;
}

.eh-about-bio__portrait {
    aspect-ratio: 4 / 5;
    border-radius: var(--r-5);
    background: var(--c-sage-700);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.eh-about-bio__portrait img.portrait-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eh-about-bio__portrait .placeholder {
    width: 22%;
    opacity: 0.4;
}

.eh-about-bio__text h1 {
    margin-bottom: var(--s-3);
}

.eh-about-bio__tagline {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: var(--fs-body-lg);
    letter-spacing: -0.02em;
    color: var(--accent-2);
    margin-bottom: var(--s-8);
}

.eh-about-bio__text p {
    font-family: var(--font-text);
    font-size: 17px;
    line-height: 1.65;
    color: var(--fg-2);
    margin-bottom: var(--s-5);
    max-width: 56ch;
}

.eh-about-bio__links {
    display: flex;
    gap: var(--s-5);
    flex-wrap: wrap;
    margin-top: var(--s-6);
}

/* Resume section */
.eh-resume {
    padding: var(--s-20) 0;
    border-top: var(--border-hair);
}

.eh-resume__grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--s-12);
}

.eh-resume__col-label {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    padding-top: 6px;
}

.eh-resume__entries {
    display: grid;
    gap: var(--s-10);
}

.eh-resume__entry {
    padding-bottom: var(--s-10);
    border-bottom: var(--border-hair);
}

.eh-resume__entry:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.eh-resume__entry-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--s-2);
    flex-wrap: wrap;
    gap: var(--s-2);
}

.eh-resume__role {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 18px;
    color: var(--fg-1);
    letter-spacing: -0.01em;
}

.eh-resume__dates {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-3);
    white-space: nowrap;
}

.eh-resume__org {
    font-family: var(--font-text);
    font-size: 15px;
    color: var(--c-brass-300);
    margin-bottom: var(--s-4);
}

.eh-resume__body p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--fg-2);
    margin-bottom: var(--s-3);
}

.eh-resume__body p:last-child {
    margin-bottom: 0;
}

.eh-resume__skills {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    margin-top: var(--s-4);
}

.eh-resume__skill-tag {
    font-family: var(--font-micro);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-raised);
    color: var(--fg-3);
    border: var(--border-hair);
}

.eh-resume__section {
    margin-bottom: var(--s-16);
}

.eh-resume__section:last-child {
    margin-bottom: 0;
}

.eh-resume__section-title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.02em;
    color: var(--fg-1);
    margin-bottom: var(--s-8);
}

/* ============================================================
   Clients list
   ============================================================ */
.eh-clients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 var(--s-8);
    margin-top: var(--s-5);
}

.eh-clients-grid li {
    list-style: none;
    font-family: var(--font-text);
    font-size: 17px;
    color: var(--fg-1);
    padding: var(--s-3) 0;
    border-top: var(--border-hair);
}

/* ============================================================
   Quote
   ============================================================ */
.eh-quote {
    padding: var(--s-20) 0;
}

.eh-quote__text {
    margin: 0;
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--fg-1);
    padding-left: var(--s-5);
    border-left: 2px solid var(--c-brass);
    max-width: 22ch;
    text-wrap: balance;
}

.eh-quote__attr {
    margin-top: var(--s-5);
    padding-left: calc(var(--s-5) + 2px);
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-3);
}

.eh-quote__name {
    color: var(--fg-1);
}

.eh-quote__sep {
    margin: 0 6px;
}

/* ============================================================
   Work list (table variant)
   ============================================================ */
.eh-worklist {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: var(--border-hair);
}

.eh-worklist__row {
    display: grid;
    grid-template-columns: 80px 1fr auto 24px;
    gap: var(--s-6);
    align-items: baseline;
    padding: var(--s-5) 0;
    border-bottom: var(--border-hair);
    text-decoration: none;
    border-bottom: var(--border-hair);
    transition: padding-left var(--dur-base) var(--ease-out);
}

.eh-worklist__row:hover {
    padding-left: 8px;
}

.eh-worklist__row:hover .eh-worklist__title {
    color: var(--accent);
}

.eh-worklist__row:hover .eh-worklist__arrow {
    transform: translateX(4px);
    color: var(--c-brass);
}

.eh-worklist__year {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--fg-3);
}

.eh-worklist__title {
    font-family: var(--font-display);
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    color: var(--fg-1);
    letter-spacing: -0.02em;
    transition: color var(--dur-base);
}

.eh-worklist__kind {
    font-family: var(--font-micro);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.eh-worklist__arrow {
    color: color-mix(in oklab, var(--c-brass) 55%, transparent);
    font-size: 18px;
    transition: transform var(--dur-base), color var(--dur-base);
}

/* ============================================================
   Footer
   ============================================================ */
.eh-footer {
    margin-top: var(--s-16);
    background: linear-gradient(to bottom, color-mix(in oklab, var(--c-ink) 75%, transparent), var(--c-ink) 60%), url("../assets/logo-doodle.png") center / cover no-repeat;
    border-top: var(--border-hair);
}

.eh-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-16) var(--gutter) var(--s-10);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--s-12);
    align-items: start;
}

.eh-footer__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border-bottom: none;
    min-height: 44px;
}

.eh-footer__brand:hover {
    border-bottom: none;
}

.eh-footer__tagline {
    margin-top: 10px;
    font-family: var(--font-micro);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--c-cream);
    max-width: 30ch;
    line-height: 1.5;
}

.eh-footer__tagline .t-brass {
    color: var(--c-brass);
}

.eh-footer__tagline .t-sage {
    color: var(--c-sage);
}

.eh-footer__tagline .t-for {
    text-transform: lowercase;
}

.eh-footer__location {
    margin-top: var(--s-3);
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--c-cream);
    max-width: 26ch;
    line-height: 1.55;
}

.eh-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-8);
}

.eh-footer__cols > div {
    display: grid;
    align-content: start;
    gap: 8px;
}

.eh-footer__cols a {
    font-family: var(--font-text);
    font-size: 14px;
    color: var(--fg-1);
    text-decoration: none;
    border: 0;
    padding: 4px 0;
    display: inline-block;
    transition: color var(--dur-fast);
}

.eh-footer__cols a:hover {
    color: var(--accent);
}

.eh-footer__lbl {
    font-family: var(--font-micro);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-3);
    margin-bottom: 4px;
}

.eh-footer__muted {
    color: var(--fg-3);
    font-family: var(--font-text);
    font-size: 14px;
}

.eh-footer__bottom {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--s-5) var(--gutter) var(--s-8);
    border-top: var(--border-hair);
    display: flex;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
}

.eh-phone-choice {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    place-items: center;
    padding: var(--s-5);
    background: rgba(15, 19, 21, 0.72);
}

.eh-phone-choice.is-open {
    display: grid;
}

.eh-phone-choice__panel {
    width: min(100%, 320px);
    padding: var(--s-5);
    background: var(--c-ink);
    border: var(--border-strong);
    border-radius: var(--r-3);
    box-shadow: var(--shadow-3);
}

.eh-phone-choice__label {
    margin: 0 0 var(--s-4);
    font-family: var(--font-micro);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.eh-phone-choice__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-3);
}

.eh-phone-choice__action,
.eh-phone-choice__close {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-micro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--r-2);
}

.eh-phone-choice__action {
    color: var(--c-ink);
    background: var(--accent-2);
}

.eh-phone-choice__close {
    width: 100%;
    margin-top: var(--s-3);
    color: var(--fg-2);
    background: transparent;
    border: var(--border-soft);
    cursor: pointer;
}

/* ============================================================
   Page header (work page, contact page)
   ============================================================ */
.eh-page-header {
    padding: var(--s-20) 0 var(--s-12);
    border-top: 0;
}

.eh-page-header h1 {
    margin-top: var(--s-5);
}

.eh-page-header p {
    margin-top: var(--s-6);
    max-width: 52ch;
}

/* ============================================================
   Tags
   ============================================================ */
.eh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-4);
}

.eh-tag {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-3);
    background: var(--bg-raised);
    border: var(--border-hair);
    padding: 4px 10px;
    border-radius: var(--r-pill);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
    .eh-hero-section {
        padding-top: clamp(20px, 4vw, 40px) !important;
        padding-bottom: var(--s-6) !important;
        position: relative;
    }

    .eh-hero__tagline {
        margin-bottom: clamp(5px, 1vw, 10px);
    }

    .eh-hero {
        grid-template-columns: 1fr;
        padding-top: clamp(24px, 4.8vw, 48px);
        gap: clamp(16px, 4.3vw, 48px);
    }

    .eh-carousel__slide {
        grid-template-columns: 1fr;
        height: auto;
    }

    .eh-carousel__img-panel {
        aspect-ratio: 16 / 9;
    }

    .eh-carousel__slide--text-only .eh-carousel__text-panel {
        min-height: 300px;
    }

    .eh-caps__grid {
        grid-template-columns: 1fr 1fr;
    }

    .eh-about-teaser {
        grid-template-columns: 1fr;
    }

    .eh-about-teaser__portrait {
        max-width: 320px;
    }

    .eh-contact-section {
        grid-template-columns: 1fr;
    }

    .eh-work-grid,
    .eh-work-grid--4 {
        grid-template-columns: 1fr 1fr;
    }

    .eh-proj-header__meta {
        grid-template-columns: 1fr 1fr;
    }

    .eh-cs-hero__meta {
        grid-template-columns: 1fr 1fr;
    }

    .eh-cs-hero {
        padding: var(--s-10) var(--s-6) var(--s-8);
    }

    .eh-stat-grid,
    .eh-funded-list,
    .eh-compare {
        grid-template-columns: 1fr 1fr;
    }

    .eh-about-bio {
        grid-template-columns: 1fr;
    }

    .eh-about-bio__portrait {
        max-width: 320px;
    }

    .eh-resume__grid {
        grid-template-columns: 1fr;
        gap: var(--s-5);
    }

    .eh-resume__col-label {
        padding-bottom: var(--s-3);
        border-bottom: var(--border-hair);
    }

    .eh-grid-2,
    .eh-grid-3 {
        grid-template-columns: 1fr;
    }

    .eh-related__grid {
        grid-template-columns: 1fr 1fr;
    }

    .eh-footer__inner {
        grid-template-columns: 1fr;
    }

    .eh-footer__cols {
        grid-template-columns: 1fr 1fr;
    }

    .eh-worklist__row {
        grid-template-columns: 60px 1fr auto;
    }

    .eh-worklist__arrow {
        display: none;
    }

}

@media (max-width: 560px) {
    .eh-hero__title {
        width: 100%;
    }

    .eh-form__row {
        grid-template-columns: 1fr;
    }

    .eh-work-grid,
    .eh-work-grid--4 {
        grid-template-columns: 1fr;
    }

    .eh-clients-grid {
        grid-template-columns: 1fr;
    }

    .eh-related__grid {
        grid-template-columns: 1fr;
    }

    .eh-stat-grid,
    .eh-funded-list,
    .eh-compare {
        grid-template-columns: 1fr;
    }
}

/* About page skills grid — responsive */
.eh-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-8);
}

@media (max-width: 560px) {
    .eh-skills-grid {
        grid-template-columns: 1fr;
    }
}

/* --- TEXT SLIDER COMPONENT --- */
/* Container for the sliding words */
.slider-container {
    display: inline-block;
    height: 1.25em;
    overflow: hidden;
    vertical-align: bottom;
}

/* The vertical track containing all list items */
.slider-track {
    display: flex;
    flex-direction: column;

    /* 85s duration (~2.4s per word) for readability */
    animation: professional-ticks 85s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}

/* Individual list items */
.slide-item {
    height: 1.25em;
    line-height: 1.25em;
    white-space: nowrap;
    display: block;
    padding-right: 4px;
    color: #e1918f;
}

/* Ensure the suffix stays on one line if possible */
.eh-hero__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: clamp(8px, 1vw, 12px);
    line-height: 1.25;
    overflow: hidden;
    max-width: 100%;
}

/* Keyframes for 35 items + 1 loop duplicate
   Step size: 1.25em (matches .slider-container and .slide-item height) */
@keyframes professional-ticks {
    0%,    2%    { transform: translateY(0); }
    2.85%, 4.85% { transform: translateY(-1.25em); }
    5.7%,  7.7%  { transform: translateY(-2.5em); }
    8.55%, 10.55%{ transform: translateY(-3.75em); }
    11.4%, 13.4% { transform: translateY(-5em); }
    14.25%,16.25%{ transform: translateY(-6.25em); }
    17.1%, 19.1% { transform: translateY(-7.5em); }
    19.95%,21.95%{ transform: translateY(-8.75em); }
    22.8%, 24.8% { transform: translateY(-10em); }
    25.65%,27.65%{ transform: translateY(-11.25em); }
    28.5%, 30.5% { transform: translateY(-12.5em); }
    31.35%,33.35%{ transform: translateY(-13.75em); }
    34.2%, 36.2% { transform: translateY(-15em); }
    37.05%,39.05%{ transform: translateY(-16.25em); }
    39.9%, 41.9% { transform: translateY(-17.5em); }
    42.75%,44.75%{ transform: translateY(-18.75em); }
    45.6%, 47.6% { transform: translateY(-20em); }
    48.45%,50.45%{ transform: translateY(-21.25em); }
    51.3%, 53.3% { transform: translateY(-22.5em); }
    54.15%,56.15%{ transform: translateY(-23.75em); }
    57%,   59%   { transform: translateY(-25em); }
    59.85%,61.85%{ transform: translateY(-26.25em); }
    62.7%, 64.7% { transform: translateY(-27.5em); }
    65.55%,67.55%{ transform: translateY(-28.75em); }
    68.4%, 70.4% { transform: translateY(-30em); }
    71.25%,73.25%{ transform: translateY(-31.25em); }
    74.1%, 76.1% { transform: translateY(-32.5em); }
    76.95%,78.95%{ transform: translateY(-33.75em); }
    79.8%, 81.8% { transform: translateY(-35em); }
    82.65%,84.65%{ transform: translateY(-36.25em); }
    85.5%, 87.5% { transform: translateY(-37.5em); }
    88.35%,90.35%{ transform: translateY(-38.75em); }
    91.2%, 93.2% { transform: translateY(-40em); }
    94.05%,96.05%{ transform: translateY(-41.25em); }
    96.9%, 98.9% { transform: translateY(-42.5em); }
    100%         { transform: translateY(-43.75em); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .eh-hero__eyebrow {
        row-gap: 6px;
        line-height: 1.1;
    }

}

/* ============================================================
   Lightbox
   ============================================================ */
#eh-lb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

#eh-lb.is-open {
    display: flex;
}

body.eh-lb-open {
    overflow: hidden;
}

.eh-lb__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.90);
}

.eh-lb__stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    max-width: 90vw;
}

.eh-lb__media {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eh-lb__img {
    display: block;
    width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--r-4);
}

.eh-lb__iframe {
    width: 90vw;
    height: 85vh;
    border: none;
    border-radius: var(--r-4);
    display: block;
    background: #1a1d1f;
}

.eh-lb__close {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 10002;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}

.eh-lb__close:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
}

.eh-lb__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10001;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease, border-color 120ms ease;
}

.eh-lb__nav:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.5);
}

.eh-lb__nav--prev { left: 20px; }
.eh-lb__nav--next { right: 20px; }

.eh-lb__footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.eh-lb__caption {
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.55); /* overridden per-page via JS accent color */
    text-align: center;
    max-width: 680px;
    letter-spacing: 0.03em;
}

.eh-lb__counter {
    font-family: var(--font-mono, "IBM Plex Mono", ui-monospace, monospace);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.06em;
}

/* Expand / zoom-in trigger — injected on galleries, slideshows, iframes */
.eh-lb__expand-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-3);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
}

.eh-lb__expand-btn:hover {
    background: rgba(0, 0, 0, 0.70);
    border-color: rgba(255, 255, 255, 0.45);
}

/* Absolute-positioned expand button (on iframes and track galleries) */
.eh-lb__expand-btn--abs {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

/* Cursor signal on clickable slots */
.eh-img-slot.eh-lb-trigger {
    cursor: zoom-in;
}

.eh-img-slot.eh-lb-trigger img {
    cursor: zoom-in;
}
/* ============================================================
   ACCESSIBILITY
   ============================================================ */

/* Skip navigation link */
.eh-skip-link {
    position: absolute;
    top: -100%;
    left: var(--s-4);
    z-index: 9999;
    padding: var(--s-2) var(--s-5);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    background: var(--c-ink);
    color: var(--c-cream);
    font-family: var(--font-micro);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: var(--r-2);
    transition: top 0.1s;
}
.eh-skip-link:focus {
    top: var(--s-4);
}

/* Focus-visible ring for interactive elements */
a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
    border-radius: var(--r-2);
}

/* Reduced motion — pause slider and carousel animations */
@media (prefers-reduced-motion: reduce) {
    .slider-track {
        animation: none !important;
    }
    .eh-carousel__track {
        transition: none !important;
    }
    .eh-hero__title-em {
        animation: none !important;
        background: none;
        -webkit-text-fill-color: currentColor;
        color: var(--accent-2);
    }
}