@font-face {
    font-family: 'Apfel Grotezk';
    src: url('/assets/ApfelGrotezk-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'BBH Hegarty';
    src: url('/assets/BBHHegarty-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: auto;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

:root {
    --color-archer-black: #2e2927;
    --color-cooper-cream: #fff9f2;
    --color-button-orange: #ff533c;
    --color-white: #ffffff;
    --color-subtitle-taupe: #c3bab0;
    --color-keyline-taupe: #e9e1d9;
    --color-work-peach: #edd9d1;
    --color-text: var(--color-archer-black);
    --color-text-light: #655c57;
    --color-text-hover: var(--color-button-orange);
    --color-border: var(--color-keyline-taupe);
    --color-border-strong: var(--color-archer-black);
    --color-bg: var(--color-cooper-cream);
    --color-bg-translucent: rgba(255, 249, 242, 0.94);
    --color-label-bg: var(--color-work-peach);
    --color-overlay: rgba(46, 41, 39, 0.55);
    --color-shadow: rgba(46, 41, 39, 0.1);
    --color-error: #a8321f;
    --color-button: var(--color-button-orange);
    --color-button-text: var(--color-white);
    color-scheme: light;
    --img-invert: none;
    --font-mono: ui-monospace, 'SFMono-Regular', monospace;
    --font-sans: 'Apfel Grotezk', Arial, sans-serif;
    --font-label: 'BBH Hegarty', Arial, sans-serif;
    --transition-base: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    --transition-opacity: opacity 0.2s;
    --transition-color: color 0.2s;
    --border-base: 1px solid var(--color-border);
    --border-strong: 1px solid var(--color-border-strong);
    --border-text: 1px solid var(--color-border-strong);
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --max-width: 1200px;
    /* Single gutter token so nav, content and footer share one edge. */
    --gutter: clamp(1rem, 4vw, 2rem);

    /* Site palette (Figma redesign); dark values live beside .site-page. */
    --ac-ink: #2e2927;
    --ac-paper: #fff9f2;
    --ac-paper-translucent: rgba(255, 249, 242, .94);
    --ac-line: #e9e1d9;
    --ac-line-strong: #c3bab0;
    --ac-panel: #e9e1d9;
    --ac-photo: #e9e1d9;
    --ac-footer: #e9e1d9;
    --ac-muted: #a29a92;
    --ac-subtle: #c3bab0;
    --ac-text-light: #655c57;
    --ac-accent: #ff533c;
    --ac-accent-hover: #d9432d;
    --ac-accent-text: #fff;
    --ac-wash: #fff3e8;
    --ac-glass: rgba(221, 212, 202, .65);
    --ac-overlay: rgba(46, 41, 39, .55);
    --ac-shadow: rgba(46, 41, 39, .1);
    --ac-error: #a8321f;
    --ac-badge-filter: none;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-text: var(--color-cooper-cream);
        --color-text-light: var(--color-subtitle-taupe);
        --color-text-hover: var(--color-button-orange);
        --color-border: rgba(195, 186, 176, 0.38);
        --color-border-strong: var(--color-cooper-cream);
        --color-bg: var(--color-archer-black);
        --color-bg-translucent: rgba(46, 41, 39, 0.94);
        --color-label-bg: #4a403b;
        --color-overlay: rgba(0, 0, 0, 0.65);
        --color-shadow: rgba(0, 0, 0, 0.35);
        --color-error: #ff8b7a;
        color-scheme: dark;
        --img-invert: invert(1);
    }
}

body {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.3;
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-text);
    color: var(--color-bg);
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
    font-family: var(--font-sans);
    font-size: 0.875rem;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Focus Styles */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

a:focus:not(.skip-link),
button:focus:not(.modal-close) {
    outline-offset: 4px;
}

/* Gutters scale with the viewport instead of the old `width: 90vw` hack,
   which fought the max-width and produced uneven margins mid-range. */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Navigation */
.nav {
    position: sticky;
    top: 0;
    background-color: var(--color-bg-translucent);
    backdrop-filter: blur(10px);
    border-bottom: var(--border-base);
    z-index: 100;
}

.nav-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-sm) var(--gutter);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.logo img {
    display: block;
    width: 60px;
    height: auto;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background-color: var(--color-text);
    /* Only transform and opacity animate here — both GPU-composited. */
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-links a {
    font-family: var(--font-label);
    font-size: 14px;
    font-weight: 400;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);
    transition: var(--transition-color);
    position: relative;
}

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

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.nav-links a:hover::after {
    transform: scaleX(1);
}

.nav-links a.is-current {
    color: var(--color-text);
}

.nav-links a.is-current::after {
    transform: scaleX(1);
}

.nav-links a.nav-cta {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
    opacity: 1;
    margin-left: var(--spacing-md);
    background-color: var(--color-button);
    border-color: var(--color-button);
    color: var(--color-button-text);
}

.nav-links a.nav-cta::after {
    display: none;
}

.nav-links a.nav-cta:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
    opacity: 1;
}

/* Intro Section */
.intro {
    min-height: 85dvh;
    display: flex;
    align-items: center;
    border-bottom: var(--border-base);
    padding: var(--spacing-xl) 0;
}

.intro-content {
    width: 100%;
}

.intro-title {
    font-size: clamp(2.25rem, 5.5vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    /* Tracking tightens as the type grows — optical correction, not a constant. */
    letter-spacing: -0.03em;
    margin-top: 0;
    max-width: 24ch;
    text-wrap: balance;
}

.intro-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    color: var(--color-text-light);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0;
    margin: 0;
    max-width: 40ch;
    /* `balance` evens the columns and splits this awkwardly at two lines;
       `pretty` just prevents the orphan. */
    text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
    @keyframes intro-reveal {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .intro-title {
        animation: intro-reveal 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .intro-subtitle {
        animation: intro-reveal 450ms 60ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .intro-cta {
        animation: intro-reveal 400ms 100ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .intro-credential {
        animation: intro-reveal 400ms 140ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

/* Shared Button/CTA Styles */
.btn {
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--color-archer-black);
    background: var(--color-work-peach);
    border: 1px solid var(--color-work-peach);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: var(--transition-base);
}

.btn:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

.btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

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

.btn-primary:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

.intro-cta {
    margin-top: var(--spacing-md);
    background-color: var(--color-button);
    color: var(--color-button-text);
    border-color: var(--color-button);
}

.intro-cta:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* The badge is a credential, not part of the pitch — it earns real separation
   below the CTA rather than floating in the middle of the hero. */
.intro-credential {
    margin-top: var(--spacing-xl);
}

.intro-badge {
    width: 160px;
    height: auto;
    display: block;
    filter: var(--img-invert);
}

/* Section Styles */
section {
    padding: var(--spacing-xl) 0;
    border-bottom: var(--border-base);
}

section:last-of-type {
    border-bottom: none;
}

.content-visibility-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-lg);
    letter-spacing: -0.025em;
    text-wrap: balance;
}

/* Services Section */
.services-layout {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Orbit is the flagship offer — a strong border is the only emphasis it needs. */
.service-card-primary {
    max-width: 800px;
    padding: var(--spacing-lg);
    border: var(--border-strong);
}

.service-card-primary .service-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.service-card-primary .service-description {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-md);
}

.services-secondary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.service-card {
    padding: var(--spacing-md);
}

.service-card-secondary {
    padding: var(--spacing-md);
    border: var(--border-base);
}

.service-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.service-card-secondary .service-title {
    font-size: 1.25rem;
}

.service-description {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    line-height: 1.7;
}

.service-features {
    list-style: none;
    padding-left: 0;
}

.service-features li {
    padding: var(--spacing-xs) 0;
    color: var(--color-text-light);
    position: relative;
    padding-left: var(--spacing-md);
}

.service-features li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--color-text);
}

.services-note {
    margin-top: var(--spacing-lg);
    color: var(--color-text-light);
    font-size: 0.9375rem;
    line-height: 1.6;
    max-width: 600px;
}

/* About Section */
.about-layout {
    display: grid;
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}

.about-content {
    max-width: 75ch;
}

.about-text {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.about-text:first-child {
    color: var(--color-text);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
}

.about-text:last-child {
    margin-bottom: 0;
}

/* The portrait is a studio shot on white, not a landscape environmental
   photo — it's framed and contained rather than bled full-width. The
   white background colour matches the source photo so the border reads
   as a deliberate mat, not a crop artifact, in light mode. */
.about-image-wrapper {
    border: var(--border-base);
    background-color: var(--color-white);
    aspect-ratio: 4 / 5;
    overflow: hidden;
}

.about-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 62% 25%;
}

.about-image-caption {
    font-family: var(--font-label);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--color-text-light);
    margin-top: var(--spacing-sm);
}

/* Projects Section */
.projects-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.project-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.project-content {
    width: 100%;
}

.project-image-wrapper {
    width: calc(100% + (var(--gutter) * 2));
    margin-left: calc(var(--gutter) * -1);
    margin-top: var(--spacing-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.project-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.project-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.project-result {
    font-size: 1.0625rem;
    font-weight: 400;
    color: var(--color-text);
    line-height: 1.5;
    margin-bottom: var(--spacing-sm);
}

.project-title {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.01em;
}

.project-type {
    font-family: var(--font-label);
    font-size: 0.75rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0;
    display: inline-block;
    padding: 0.25rem 0.625rem;
    background-color: var(--color-label-bg);
    border-radius: 2px;
    width: fit-content;
}

.project-description {
    color: var(--color-text-light);
    line-height: 1.7;
}


/* Notes Section */
.notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.note-item {
    display: block;
    padding: var(--spacing-md) 0;
    border-bottom: var(--border-base);
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

.note-item:hover {
    color: var(--color-text-hover);
}

.note-item:last-child {
    border-bottom: none;
}

.note-date {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-light);
    display: block;
    margin-bottom: var(--spacing-xs);
    font-variant-numeric: tabular-nums;
}

.note-title {
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.note-excerpt {
    color: var(--color-text-light);
    line-height: 1.7;
}

/* Note Detail Page */
.note-detail {
    padding: var(--spacing-xl) 0;
}

.note-header {
    margin-bottom: var(--spacing-xl);
    max-width: 800px;
}

.note-back {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
    transition: var(--transition-color);
}

.note-back:hover {
    color: var(--color-text-hover);
}

.note-detail-title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.note-intro {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin-top: var(--spacing-md);
}

.note-content {
    max-width: 800px;
    line-height: 1.8;
    color: var(--color-text);
}

.note-content p {
    margin-bottom: var(--spacing-md);
}

.note-content h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
}

.note-content h3 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.note-content ul {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.note-content li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.note-content a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: var(--transition-color);
}

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

.note-footer {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: var(--border-base);
}

.note-back-link {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-decoration: none;
    transition: var(--transition-color);
}

.note-back-link:hover {
    color: var(--color-text-hover);
}

@media (max-width: 768px) {
    .note-detail-title {
        font-size: 2rem;
    }

    .note-intro {
        font-size: 1.125rem;
    }
}

/* Landing Page Content */
.landing-page {
    padding: var(--spacing-xl) 0;
    border-bottom: var(--border-base);
}

.landing-content-wrapper {
    width: 100%;
    line-height: 1.8;
    max-width: 75ch;
}

.landing-content-wrapper p {
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.landing-content-wrapper h2 {
    font-size: 1.75rem;
    font-weight: 400;
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
}

.landing-content-wrapper h2:first-of-type {
    margin-top: 0;
}

.landing-content-wrapper h3 {
    font-family: var(--font-label);
    font-size: 1rem;
    font-weight: 400;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0;
}

.landing-content-wrapper ul {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.landing-content-wrapper li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
    color: var(--color-text-light);
}

.landing-content-wrapper a {
    color: var(--color-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: var(--transition-color);
}

.landing-content-wrapper a:hover {
    color: var(--color-text-hover);
}

/* Horizontal Rules - Subtle styling */
.landing-content-wrapper hr {
    border: none;
    border-top: var(--border-base);
    margin: var(--spacing-lg) 0;
}

/* Accordion/Details styling */
/* Hairline separators give the FAQ list structure — viable now that borders
   are quiet rather than full-strength text colour. */
.landing-content-wrapper details {
    margin: 0;
    border: none;
    border-bottom: var(--border-base);
    padding: 0;
}

.landing-content-wrapper details:first-of-type {
    border-top: var(--border-base);
}

.landing-content-wrapper details summary {
    font-size: 1.125rem;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
    padding: var(--spacing-sm) 0;
    color: var(--color-text);
    transition: var(--transition-color);
    position: relative;
    padding-right: 2rem;
}

.landing-content-wrapper details summary::-webkit-details-marker {
    display: none;
}

.landing-content-wrapper details summary::after {
    content: '+';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.landing-content-wrapper details[open] summary::after {
    content: '−';
    transform: translateY(-50%);
}

.landing-content-wrapper details summary:hover {
    color: var(--color-text-hover);
}

.landing-content-wrapper details > *:not(summary) {
    margin-left: 0;
    padding-top: 0;
    padding-bottom: var(--spacing-sm);
    max-width: 70ch;
    color: var(--color-text-light);
    line-height: 1.8;
}

.landing-content-wrapper details p {
    margin-bottom: var(--spacing-sm);
}

.landing-content-wrapper details p:last-child {
    margin-bottom: 0;
}

/* Style Get Started section like contact section */
.landing-content-wrapper h2 + p {
    max-width: 600px;
}

/* Child combinator keeps this off paragraphs nested in <details> — otherwise
   any FAQ answer ending in a link would silently render as a button. */
.landing-content-wrapper > h2 + p + p a,
.landing-content-wrapper > p:last-of-type a,
.landing-content-wrapper button.btn {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-archer-black);
    background: var(--color-work-peach);
    border: 1px solid var(--color-work-peach);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    margin-top: var(--spacing-md);
    transition: var(--transition-base);
    cursor: pointer;
}

.landing-content-wrapper > h2 + p + p a:hover,
.landing-content-wrapper > p:last-of-type a:hover,
.landing-content-wrapper button.btn:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
}

/* Matches the specificity of `.landing-content-wrapper button.btn` above,
   which would otherwise strip the fill back off the primary variant. */
.landing-content-wrapper button.btn-primary {
    background-color: var(--color-button);
    color: var(--color-button-text);
    border-color: var(--color-button);
}

.landing-content-wrapper button.btn-primary:hover {
    background-color: var(--color-text);
    color: var(--color-bg);
    border-color: var(--color-text);
}

/* Contact Section */
.contact-content {
    max-width: 600px;
}

.contact-text {
    color: var(--color-text);
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.contact-cta {
    font-size: 1.0625rem;
    padding: 1rem 2rem;
}

/* Previously a hover-only ::after. That hid a real promise from every touch
   user, keyboard user and screen reader — so it now lives in the markup. */
.contact-note {
    margin-top: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.5;
}

.contact-note a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

/* Success Page */
.success-page {
    padding: var(--spacing-xl) 0;
    min-height: 60dvh;
    display: flex;
    align-items: center;
}

.success-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.success-title {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.01em;
}

.success-message {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.success-cta {
    display: inline-block;
}

/* Contact Form Modal */
.modal-overlay {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-overlay);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 200ms ease,
                visibility 0s 200ms,
                backdrop-filter 200ms ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 300ms ease,
                visibility 0s,
                backdrop-filter 300ms ease;
}

.modal-content {
    background-color: var(--color-bg);
    border: var(--border-base);
    max-width: 600px;
    width: 100%;
    padding: var(--spacing-md);
    position: relative;
    max-height: 95dvh;
    overflow-y: auto;
    transform: translateY(24px);
    opacity: 0;
    transition: transform 200ms ease,
                opacity 150ms ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
    opacity: 1;
    transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-color);
}

.modal-close:hover {
    color: var(--color-text-hover);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 400;
    margin-bottom: var(--spacing-xs);
    letter-spacing: -0.01em;
}

.modal-description {
    color: var(--color-text-light);
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.form-group label {
    font-family: var(--font-label);
    font-size: 0.875rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0;
}

.form-group input,
.form-group textarea {
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.75rem;
    border: var(--border-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-border-strong);
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.cf-turnstile {
    margin: var(--spacing-xs) 0;
}

.radio-group {
    border: none;
    padding: 0;
    margin: 0;
}

.radio-group legend {
    font-family: var(--font-label);
    font-size: 0.875rem;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: var(--spacing-sm);
}

.radio-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Scoped under .form-group to outrank `.form-group label`, which was
   uppercasing these option labels despite the reset below. */
.form-group .radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: 0.75rem;
    border: var(--border-base);
    transition: var(--transition-base);
    font-family: var(--font-sans);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
}

.radio-option:hover {
    border-color: var(--color-border-strong);
    background-color: var(--color-label-bg);
}

.radio-option input[type="radio"] {
    margin: 0;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-text);
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked + span {
    font-weight: 400;
}

.radio-option:has(input[type="radio"]:checked) {
    border-color: var(--color-border-strong);
    background-color: var(--color-label-bg);
}

.form-submit {
    align-self: flex-start;
    margin-top: var(--spacing-sm);
}

.hidden {
    display: none;
}

/* Field hints, optional markers, error & submitting states, modal contact footer */
.field-hint {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.5;
    transition: opacity 0.4s ease;
}

.field-hint.is-switching {
    opacity: 0;
}

.optional {
    font-family: var(--font-sans);
    color: var(--color-text-light);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

.form-error {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-error);
    line-height: 1.5;
    margin: 0;
}

.form-group input:user-invalid,
.form-group textarea:user-invalid {
    border-color: var(--color-error);
}

.form-group input:user-invalid:focus,
.form-group textarea:user-invalid:focus {
    border-color: var(--color-error);
    outline-color: var(--color-error);
}

.form-submit.is-submitting,
.form-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* A disabled button must not react to hover — hold the filled primary state
   rather than inverting to the outlined one. */
.form-submit.btn-primary:disabled:hover,
.form-submit.btn-primary.is-submitting:hover {
    background-color: var(--color-button);
    color: var(--color-button-text);
}

.modal-reassurance {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-lg);
    line-height: 1.5;
}

.modal-direct {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: var(--border-base);
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.modal-direct a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

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

.modal-close svg {
    display: block;
}

/* Footer */
.footer {
    padding: var(--spacing-xl) 0;
    border-top: var(--border-base);
}

/* The flex gap already spaces these children; the per-child margins were
   stacking on top of it and inflating the footer to ~8rem of dead space. */
.footer-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.footer-company {
    margin-bottom: 0;
}

.footer-logo {
    height: auto;
    width: 96px;
    display: block;
}

.footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md) var(--spacing-lg);
    margin-bottom: 0;
}

.footer-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.footer-label {
    font-family: var(--font-label);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--color-text);
    margin-bottom: var(--spacing-xs);
}

/* Address, phone and postcode are data — tabular figures keep the digits
   on a consistent rhythm instead of the proportional default. */
.footer-value {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
    font-variant-numeric: tabular-nums;
}

.footer-value a {
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s;
}

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

.footer-credentials {
    margin: 0;
}

.footer-shopify-badge {
    height: 58px;
    width: auto;
    max-width: 100%;
    display: block;
    filter: var(--img-invert);
}

.footer-link {
    font-size: 0.875rem;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-link:hover {
    color: var(--color-text);
}

.footer-copyright {
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-light);
    margin-top: 0;
    padding-top: var(--spacing-md);
    border-top: var(--border-base);
    font-variant-numeric: tabular-nums;
}

/* Why Work With Me Section */
.why-work-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    max-width: 1000px;
}

.why-work-item {
    padding: var(--spacing-md) 0;
    border-top: var(--border-base);
}

/* These are sentences, so keep them in the body face rather than the
   uppercase label face. */
.why-work-heading {
    font-family: var(--font-sans);
    font-size: 1.1875rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
    text-wrap: balance;
}

.why-work-text {
    color: var(--color-text-light);
    line-height: 1.8;
}

/* Responsive */
@media (max-width: 768px) {
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg);
        border-top: var(--border-base);
        flex-direction: column;
        padding: var(--spacing-sm) var(--gutter) var(--spacing-md);
        gap: 0;
    }

    .nav-links a {
        width: 100%;
        padding: var(--spacing-sm) 0;
    }

    .nav-links.active {
        display: flex;
        border-bottom: var(--border-base);
        box-shadow: 0 2px 8px var(--color-shadow);
    }

    .nav-links a.nav-cta {
        margin-left: 0;
        margin-top: var(--spacing-sm);
        padding: 0.75rem 1.5rem;
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: var(--border-base);
        padding-top: var(--spacing-md);
    }

    .nav-container {
        position: relative;
    }

    .intro {
        min-height: 70dvh;
        padding: var(--spacing-lg) 0;
    }

    .intro-title {
        margin-bottom: var(--spacing-md);
    }

    section {
        padding: var(--spacing-lg) 0;
    }

    .services-secondary {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .service-card-primary {
        padding: var(--spacing-md);
    }

    .service-card-primary .service-title {
        font-size: 2rem;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .about-image-wrapper {
        max-width: 260px;
        aspect-ratio: 4 / 5;
    }

    .projects-list {
        grid-template-columns: 1fr;
    }

    .project-header {
        gap: var(--spacing-xs);
    }

    .why-work-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .footer-info {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: 3rem;
        --spacing-xl: 4rem;
    }

    .intro-title {
        font-size: 2rem;
    }

    .intro-subtitle {
        font-size: 1.125rem;
    }
}

/* Landscape / short viewports: prevent intro from dominating the fold */
@media (max-height: 600px) {
    .intro {
        min-height: auto;
        padding: var(--spacing-lg) 0;
    }
}

/* Tablet: refine the gap between mobile and desktop */
@media (min-width: 769px) and (max-width: 1024px) {
    .intro {
        min-height: 55dvh;
    }

    .projects-list {
        gap: var(--spacing-lg);
    }
}

/* Figma homepage */
.home-page {
    background: var(--ac-paper);
    color: var(--ac-ink);
}

.site-page .site-frame {
    width: min(1440px, 95%);
    margin: clamp(10px, 2vw, 20px) auto;
    border: 2px solid var(--ac-line);
    border-radius: 15px;
    overflow: hidden;
}

.site-page .nav {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    border: 0;
    z-index: 10;
}

.site-page .nav-container {
    max-width: none;
    padding: 20px 20px 0;
    height: 124px;
    align-items: flex-start;
}

.site-page .logo picture { display: none; }
.site-page .logo .home-logo {
    display: block;
    width: 110px;
    height: 104px;
}
.site-page .logo .home-logo-mobile { display: none; }
.logo .home-logo { display: none; }
.site-page .nav-links {
    position: fixed;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40px;
    padding: 20px 50px;
    border-radius: 10px;
    background: var(--ac-glass);
    backdrop-filter: blur(7.5px);
    -webkit-backdrop-filter: blur(7.5px);
}
.site-page .nav-links a {
    color: var(--ac-ink);
    font-size: 16px;
    line-height: .8;
    letter-spacing: .01em;
    white-space: nowrap;
}
.site-page .nav-links a::after {
    height: 2px;
    background-color: var(--ac-ink);
}
.site-page .nav-toggle { display: none; }

.home-page section {
    border-bottom: 2px solid var(--ac-line);
    padding: 90px 20px;
}

.home-page .home-hero {
    padding: 130px 20px 90px;
}

.home-hero-title {
    max-width: 1100px;
    margin: 0 auto 130px;
    font-size: 74px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    text-align: center;
}

.home-hero-inner, .home-narrow {
    width: min(100%, 1040px);
    margin: 0 auto;
}

.home-hero-inner { padding-top: 30px; }

.home-portrait {
    height: 575px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: var(--ac-photo);
    border-radius: 10px;
    overflow: hidden;
}

.home-portrait img {
    display: block;
    flex: none;
    width: 687px;
    height: 687px;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.home-intro-grid {
    display: grid;
    grid-template-columns: 438px minmax(0, 1fr);
    gap: 112px;
    margin-top: 60px;
}

.home-intro-lead {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.home-intro-lead p {
    font-size: 28px;
    line-height: 1.3;
}

.home-intro-copy {
    font-size: 20px;
    line-height: 1.5;
}

.home-intro-copy p + p { margin-top: 30px; }

.home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 62px;
    padding: 20px 35px;
    border: 0;
    border-radius: 10px;
    background: var(--ac-accent);
    color: var(--ac-accent-text);
    font: 18px/1.2 var(--font-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.home-button:hover { background: var(--ac-accent-hover); }
.home-button:active { transform: scale(.98); }

.home-eyebrow {
    margin: 0;
    color: var(--ac-subtle);
    font: 16px/1.2 var(--font-label);
    letter-spacing: .01em;
    text-transform: uppercase;
}

.home-service {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 90px;
    padding: 70px 0;
}
.home-service + .home-service {
    border-top: 2px solid var(--ac-line);
}
.home-service:last-child { padding-bottom: 0; }
@media (min-width: 769px) {
    .home-page .home-services { padding-bottom: 122px; }
}
.home-service h3 {
    font-size: 64px;
    line-height: .8;
    letter-spacing: -.03em;
}
.home-service-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
    font-size: 20px;
    line-height: 1.5;
}
.home-service-lead {
    max-width: 600px;
    font-size: 28px;
    line-height: 1.3;
}
.home-feature-list {
    width: 100%;
    list-style: none;
    border-top: 2px solid var(--ac-line);
}
.home-feature-list li {
    display: grid;
    grid-template-columns: 35px 1fr;
    gap: 0;
    padding: 10px 0;
    border-bottom: 2px solid var(--ac-line);
}
.home-feature-list li::before {
    content: '→';
    color: var(--ac-accent);
    font-size: 28px;
    line-height: 1.1;
}
.home-service .home-button { margin-top: 20px; }

.home-work-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 60px;
    margin-top: 45px;
}
.home-work-card {
    min-width: 0;
}
.home-work-card > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1366 / 768;
    object-fit: cover;
    border: 2px solid var(--ac-line);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
}
.home-work-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    min-height: 296px;
    padding: 25px;
    border: 2px solid var(--ac-line);
    border-radius: 0 0 10px 10px;
}
.home-work-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.home-work-heading h3 {
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: .01em;
}
.home-work-tag {
    flex: none;
    padding: 5px 10px;
    border-radius: 100px;
    background: var(--ac-panel);
    font-size: 16px;
    line-height: 1.2;
}
.home-work-result,
.home-work-description {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: .01em;
}
.home-work-description { color: var(--ac-muted); }

.home-slim {
    width: min(100%, 670px);
    margin: 0 auto;
}
.home-accordion {
    display: grid;
    gap: 20px;
    margin-top: 45px;
}
.home-accordion details {
    border: 2px solid var(--ac-line);
    border-radius: 10px;
    padding: 25px;
}
.home-accordion summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    list-style: none;
    cursor: pointer;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: .01em;
}
.home-accordion summary::-webkit-details-marker { display: none; }
.home-accordion summary span::after {
    content: '+';
    display: block;
    width: 35px;
    color: var(--ac-accent);
    font-size: 40px;
    line-height: 32px;
    text-align: right;
}
.home-accordion details[open] summary span::after { content: '−'; }
.home-accordion details p {
    margin-top: 15px;
    color: var(--ac-muted);
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: .01em;
}
.home-contact p {
    margin: 45px 0 50px;
    font-size: 28px;
    line-height: 1.3;
}
.home-contact small {
    display: block;
    margin-top: 15px;
    color: var(--ac-muted);
    font-size: 20px;
}

.site-page .home-footer {
    padding: 120px 20px 90px;
    border: 0;
    border-radius: 0 0 10px 10px;
    background: var(--ac-footer);
}
.home-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 60px;
    row-gap: 60px;
    width: min(100%, 1040px);
    margin: 0 auto;
}
.home-footer-logo {
    grid-row: span 4;
    display: block;
    width: 110px;
    height: 104px;
}
.home-footer-column h2 {
    margin-bottom: 25px;
    color: var(--ac-subtle);
    font: 16px/1.2 var(--font-label);
    text-transform: uppercase;
    letter-spacing: .01em;
}
.home-footer-column p,
.home-footer-column a {
    color: var(--ac-ink);
    font-size: 20px;
    line-height: 1.9;
    letter-spacing: .01em;
}
.home-footer-address p { line-height: 1.5; }
.home-footer-contact a,
.home-footer-pages a { text-decoration: underline; }
.home-footer-pages { grid-column: 2 / 4; }
.home-footer-badge {
    grid-column: 2 / 4;
    grid-row: 3;
    width: 154px;
    height: 54px;
    object-fit: cover;
    object-position: center;
    filter: var(--ac-badge-filter);
}
.home-footer-legal {
    grid-column: 2 / 4;
    grid-row: 4;
    padding: 35px 0;
    border-top: 2px solid var(--ac-line-strong);
    color: var(--ac-muted);
    font-size: 16px;
}

@media (max-width: 1100px) {
    .home-intro-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 60px;
    }
    .home-service { grid-template-columns: 28% minmax(0, 1fr); gap: 7%; }
}

@media (max-width: 768px) {
    .site-page .site-frame { border-radius: 10px; }
    .site-page .nav-container {
        height: 80px;
        padding: 15px 15px 0;
        align-items: flex-start;
    }
    .site-page .logo .home-logo-desktop { display: none; }
    .site-page .logo .home-logo-mobile { display: block; width: 68.7143px; height: 65px; }
    .site-page .nav-toggle {
        display: flex;
        width: 68.7143px;
        height: 65px;
        gap: 6px;
        background: url('/assets/figma-home/mobile-menu-bg.svg') center / contain no-repeat;
    }
    .site-page .nav-toggle span {
        width: 29px;
        height: 2px;
        background: var(--ac-ink);
    }
    .site-page .nav-links {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1;
        transform: none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(14px, 3vh, 24px);
        padding: 24px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }
    .site-page .nav-links::before {
        content: '';
        position: absolute;
        inset: 16px;
        z-index: 0;
        border-radius: 10px;
        background: var(--ac-glass);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        pointer-events: none;
    }
    .site-page .nav-links.active { display: flex; }
    .site-page .nav-links a {
        display: block;
        width: auto;
        min-height: 0;
        padding: 0;
        color: var(--ac-ink);
        font-size: clamp(2.25rem, 10vw, 3rem);
        line-height: 1.08;
        letter-spacing: -.025em;
        text-align: center;
        z-index: 1;
    }
    .site-page .nav-links a::after { display: none; }
    .site-page .nav-toggle[aria-expanded="true"] {
        position: fixed;
        top: 28px;
        right: 28px;
        z-index: 2;
        width: 44px;
        height: 44px;
        background: transparent;
        border-radius: 0;
    }
    .home-page section { padding: 90px 15px; }
    .home-page .home-hero { padding: 90px 15px; }
    .home-hero-title {
        margin-bottom: 90px;
        font-size: clamp(38px, 11.5vw, 48px);
        line-height: 1;
        text-align: left;
    }
    .home-hero-inner { padding: 0; }
    .home-portrait { height: 250px; }
    .home-portrait img { width: 266px; height: 266px; }
    .home-intro-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
        margin-top: 30px;
    }
    .home-intro-lead { display: contents; }
    .home-intro-lead p { font-size: 24px; line-height: 1.3; }
    .home-intro-copy { font-size: 18px; line-height: 1.5; }
    .home-intro-copy p + p { margin-top: 30px; }
    .home-intro-lead .home-button { order: 3; align-self: flex-start; }
    .home-button { min-height: 59px; font-size: 16px; }
    .home-service {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 25px 0;
    }
    .home-service h3 { font-size: 48px; }
    .home-service-content { font-size: 18px; }
    .home-service-lead { font-size: 24px; }
    .home-work-grid { grid-template-columns: 1fr; gap: 40px; }
    .home-work-body { min-height: 0; }
    .home-work-heading h3 { font-size: 28px; }
    .home-work-result, .home-work-description { font-size: 18px; }
    .home-accordion summary { font-size: 22px; }
    .home-accordion summary span::after { font-size: 32px; }
    .home-accordion details p { font-size: 18px; }
    .home-contact p { font-size: 24px; }
    .home-contact small { font-size: 18px; }
    .site-page .home-footer { padding: 120px 15px 90px; }
    .home-footer-grid { display: flex; flex-direction: column; gap: 60px; }
    .home-footer-legal { width: 100%; }
}

/* Coarse pointer (touch): ensure comfortable tap sizing */
@media (pointer: coarse) {
    .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .footer-value a,
    .footer-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}


/* ===== Tools (/tools) ===== */
.tool-detail {
    padding: var(--spacing-xl) 0;
}

.tool-header {
    margin-bottom: var(--spacing-lg);
    max-width: 800px;
}

.tool-back {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-decoration: none;
    margin-bottom: var(--spacing-md);
    transition: var(--transition-color);
}

.tool-back:hover {
    color: var(--color-text-hover);
}

.tool-title {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.tool-intro {
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--color-text-light);
}

/* Tool panel: the interactive surface sits above the explainer */
.tool-panel {
    max-width: 800px;
    border: var(--border-base);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.tool-drop {
    width: 100%;
    border: 2px dashed var(--color-border);
    background: transparent;
    padding: 56px 24px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition-base);
}

.tool-drop:hover,
.tool-drop.is-over {
    border-color: var(--color-text);
}

.tool-drop.is-over {
    background: var(--color-label-bg);
}

.tool-drop:focus-visible {
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

.tool-drop svg {
    display: block;
    margin: 0 auto 14px;
    color: var(--color-text-light);
}

.tool-drop.is-over svg {
    color: var(--color-text);
}

.tool-drop-label {
    font-family: var(--font-label);
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
}

.tool-drop-hint {
    font-size: 13px;
    color: var(--color-text-light);
    margin-top: 6px;
}

.tool-status {
    margin-top: 20px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
    min-height: 22px;
    white-space: pre-line;
}

.tool-status.error {
    color: var(--color-error);
}

.tool-status strong {
    color: var(--color-text);
    font-weight: 600;
}

.tool-file-input {
    display: none;
}

.btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Square Cropper */
.tool-toolbar {
    display: none;
    align-items: center;
    gap: 12px;
    margin: var(--spacing-md) 0;
}

.tool-toolbar.visible {
    display: flex;
}

.tool-toolbar .count {
    font-size: 0.875rem;
    color: var(--color-text-light);
    flex: 1;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--spacing-sm);
}

.tool-grid .tile {
    position: relative;
    border: var(--border-base);
    padding: 12px;
    text-align: center;
}

.tool-grid .tile .remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 26px;
    height: 26px;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--color-text-light);
    background: var(--color-bg);
    border: var(--border-base);
    cursor: pointer;
    transition: var(--transition-base);
}

.tool-grid .tile .remove:hover {
    border-color: var(--color-error);
    color: var(--color-error);
}

.tool-grid .frame {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    line-height: 0;
}

.tool-grid .frame img {
    display: block;
    max-width: 100%;
    max-height: 260px;
}

.tool-grid .crop-box {
    position: absolute;
    z-index: 2;
    cursor: grab;
    touch-action: none;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 9999px rgba(0, 0, 0, 0.45);
    background:
        linear-gradient(to right, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.4) 33.33%, transparent calc(33.33% + 0.5px)),
        linear-gradient(to right, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.4) 66.66%, transparent calc(66.66% + 0.5px)),
        linear-gradient(to bottom, transparent calc(33.33% - 0.5px), rgba(255,255,255,0.4) 33.33%, transparent calc(33.33% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.66% - 0.5px), rgba(255,255,255,0.4) 66.66%, transparent calc(66.66% + 0.5px));
}

.tool-grid .crop-box:active {
    cursor: grabbing;
}

.tool-grid .meta {
    margin-top: 10px;
    font-size: 12px;
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Tools index */
.tools-list .service-title a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition-color);
}

.tools-list .service-title a:hover {
    color: var(--color-text-hover);
}

.tools-open {
    display: inline-block;
    font-family: var(--font-label);
    font-size: 0.875rem;
    text-transform: uppercase;
    color: var(--color-text-light);
    text-decoration: none;
    transition: var(--transition-color);
}

.tools-open:hover {
    color: var(--color-text-hover);
}

/* ICS Event Maker */
.tool-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.tool-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.tool-field-row .is-muted {
    opacity: 0.45;
}

.tool-form select {
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.75rem;
    border: var(--border-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: border-color 0.2s;
}

.tool-form select:focus {
    border-color: var(--color-border-strong);
    outline: 2px solid var(--color-border-strong);
    outline-offset: 2px;
}

.tool-form .tool-check {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-xs);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 1rem;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-text);
}

.tool-form .tool-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    accent-color: var(--color-text);
    cursor: pointer;
    flex-shrink: 0;
}

.tool-form-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Explainer beneath the tool */
.tool-explainer {
    max-width: 800px;
    line-height: 1.8;
}

.tool-explainer p {
    margin-bottom: var(--spacing-md);
}

.tool-explainer h2 {
    font-size: 1.5rem;
    font-weight: 400;
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.tool-explainer ul {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.tool-explainer li {
    margin-bottom: var(--spacing-xs);
    line-height: 1.7;
}

.tool-explainer strong {
    font-weight: 600;
}

.tool-explainer code {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    background: var(--color-label-bg);
    border: var(--border-base);
    padding: 1px 5px;
}

@media (max-width: 768px) {
    .tool-title {
        font-size: 2rem;
    }

    .tool-intro {
        font-size: 1.125rem;
    }

    .tool-panel {
        padding: var(--spacing-sm);
    }

    .tool-field-row {
        grid-template-columns: 1fr;
    }
}

@media (pointer: coarse) {
    .tool-grid .tile .remove {
        width: 32px;
        height: 32px;
    }
}

/* Inner pages use the homepage's frame, type scale and warm surfaces. */
.site-page {
    --color-text: var(--ac-ink);
    --color-text-light: var(--ac-text-light);
    --color-text-hover: var(--ac-accent-hover);
    --color-border: var(--ac-line);
    --color-border-strong: var(--ac-ink);
    --color-bg: var(--ac-paper);
    --color-bg-translucent: var(--ac-paper-translucent);
    --color-label-bg: var(--ac-line);
    --color-overlay: var(--ac-overlay);
    --color-shadow: var(--ac-shadow);
    --color-error: var(--ac-error);
    --color-button: var(--ac-accent);
    --color-button-text: var(--ac-accent-text);
    color-scheme: light dark;
    background: var(--ac-paper);
    color: var(--ac-ink);
}

/* Dark: warm charcoal, not black. The page sits a step below the logo tile
   (#2e2927) so the mark still reads as an object; the footer drops lower
   still to ground the page. Cream text and the orange accent carry over. */
@media (prefers-color-scheme: dark) {
    :root {
        --ac-ink: #fff9f2;
        --ac-paper: #211d1b;
        --ac-paper-translucent: rgba(33, 29, 27, .94);
        --ac-line: #3d3532;
        --ac-line-strong: #4f4642;
        --ac-panel: #342d2a;
        --ac-photo: #e9e1d9;
        --ac-footer: #171412;
        --ac-muted: #b0a79e;
        --ac-subtle: #a0968c;
        --ac-text-light: #c3bab0;
        --ac-accent: #ff6a54;
        --ac-accent-hover: #ff8a77;
        --ac-accent-text: #211d1b;
        --ac-wash: #3a2a26;
        --ac-glass: rgba(52, 45, 42, .72);
        --ac-overlay: rgba(0, 0, 0, .65);
        --ac-shadow: rgba(0, 0, 0, .4);
        --ac-error: #ff8b7a;
        --ac-badge-filter: invert(1);
        --ac-scheme: dark;
    }
    .site-page .nav-toggle {
        background: var(--ac-panel);
        border-radius: 5px;
    }
}

@media (max-width: 768px) {
    .site-page .nav-toggle[aria-expanded="true"] { background: transparent; }
}

.site-page .site-frame { background: var(--ac-paper); }
.site-page .nav-links a:focus-visible,
.site-page .home-footer a:focus-visible,
.interior-page a:focus-visible,
.interior-page button:focus-visible,
.interior-page summary:focus-visible {
    outline: 2px solid var(--ac-accent);
    outline-offset: 4px;
}

.interior-page main > section,
.interior-page main > article {
    padding: 90px 20px 110px;
    border-bottom: 2px solid var(--ac-line);
}

.interior-page main > section > .container,
.interior-page main > article > .container {
    width: min(100%, 1040px);
    max-width: none;
    padding: 0;
}

.interior-page .interior-hero {
    min-height: 0;
    padding-top: 130px;
    padding-bottom: 105px;
    align-items: flex-start;
}

.interior-page .home-eyebrow { margin-bottom: 28px; }

.interior-page .intro-title,
.interior-page .section-title,
.interior-page .note-detail-title,
.interior-page .tool-title,
.interior-page .success-title {
    max-width: 14ch;
    margin: 0 0 32px;
    font-size: clamp(48px, 6vw, 74px);
    line-height: 1.04;
    letter-spacing: -.035em;
    text-wrap: balance;
}

.interior-page .intro-subtitle,
.interior-page .interior-lead,
.interior-page .note-intro,
.interior-page .tool-intro,
.interior-page .success-message {
    max-width: 700px;
    color: var(--ac-ink);
    font-size: clamp(23px, 2.5vw, 28px);
    line-height: 1.35;
    letter-spacing: 0;
    text-wrap: pretty;
}

.interior-page .interior-heading,
.interior-page .project-header,
.interior-page .note-header,
.interior-page .tool-header { margin-bottom: 65px; }

.interior-page .interior-back {
    display: inline-block;
    margin-bottom: 65px;
    color: #655c57;
    font: 16px/1.2 var(--font-label);
    text-decoration: none;
    text-transform: uppercase;
    transition: color .2s ease;
}
.interior-page .interior-back:hover { color: var(--ac-accent-hover); }

.interior-page .landing-page { padding-top: 100px; }
.interior-page .landing-content-wrapper {
    max-width: 770px;
    margin-left: auto;
    font-size: 20px;
    line-height: 1.55;
}
.interior-page .landing-content-wrapper p,
.interior-page .note-content p,
.interior-page .tool-explainer p { line-height: 1.55; }
.interior-page .landing-content-wrapper > p:first-child {
    font-size: 28px;
    line-height: 1.35;
    color: var(--ac-ink);
}
.interior-page .landing-content-wrapper h2,
.interior-page .note-content h2,
.interior-page .tool-explainer h2 {
    margin: 75px 0 25px;
    padding-top: 28px;
    border-top: 2px solid var(--ac-line);
    font-size: clamp(32px, 3.5vw, 42px);
    line-height: 1.12;
    letter-spacing: -.025em;
}
.interior-page .landing-content-wrapper h2:first-of-type { margin-top: 0; }
.interior-page .landing-content-wrapper h3,
.interior-page .note-content h3 {
    margin: 48px 0 16px;
    font: 28px/1.2 var(--font-sans);
    letter-spacing: -.02em;
    text-transform: none;
}
.interior-page .landing-content-wrapper ul,
.interior-page .note-content ul,
.interior-page .tool-explainer ul {
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ac-line);
}
.interior-page .landing-content-wrapper li,
.interior-page .note-content li,
.interior-page .tool-explainer li {
    position: relative;
    display: block;
    margin: 0;
    padding: 12px 0 12px 45px;
    border-bottom: 2px solid var(--ac-line);
    color: var(--ac-ink);
    line-height: 1.5;
}
.interior-page .landing-content-wrapper li::before,
.interior-page .note-content li::before,
.interior-page .tool-explainer li::before {
    content: '→';
    position: absolute;
    top: 12px;
    left: 0;
    color: var(--ac-accent);
    font-size: 28px;
    line-height: 1;
}
.interior-page .landing-content-wrapper details {
    margin: 18px 0;
    padding: 24px;
    border: 2px solid var(--ac-line);
    border-radius: 10px;
}
.interior-page .landing-content-wrapper details:first-of-type { border-top: 2px solid var(--ac-line); }
.interior-page .landing-content-wrapper details summary {
    padding: 0 40px 0 0;
    font-size: 24px;
    line-height: 1.25;
}
.interior-page .landing-content-wrapper details summary::after {
    color: var(--ac-accent);
    font-size: 32px;
}
.interior-page .landing-content-wrapper details > *:not(summary) { padding-top: 20px; }

.interior-page .btn,
.interior-page .landing-content-wrapper button.btn,
.interior-page .landing-content-wrapper > h2 + p + p a,
.interior-page .landing-content-wrapper > p:last-of-type a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 59px;
    margin-top: 0;
    padding: 18px 28px;
    border: 0;
    border-radius: 10px;
    background: var(--ac-accent);
    color: var(--ac-accent-text);
    font: 16px/1.2 var(--font-label);
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, transform .2s ease;
}
.interior-page .btn:hover,
.interior-page .landing-content-wrapper button.btn:hover,
.interior-page .landing-content-wrapper > h2 + p + p a:hover,
.interior-page .landing-content-wrapper > p:last-of-type a:hover {
    background: var(--ac-accent-hover);
    color: var(--ac-accent-text);
}
.interior-page .btn:active { transform: scale(.98); }

.interior-page .service-content { max-width: 770px; margin-left: auto; }
.interior-page .service-content .home-feature-list { margin-bottom: 50px; }
.interior-page .service-content .home-feature-list li { font-size: 20px; line-height: 1.5; }
.interior-page .project-header { display: block; }
.interior-page .project-image-wrapper {
    width: 100%;
    margin: 0 0 55px;
    aspect-ratio: 1366 / 768;
    border: 2px solid var(--ac-line);
    border-radius: 10px;
}
.interior-page .project-image { width: 100%; height: 100%; object-fit: cover; }
.interior-page .project-content {
    max-width: 770px;
    margin: 0 0 55px auto;
    font-size: 20px;
    line-height: 1.55;
}
.interior-page .project-description { color: var(--ac-ink); line-height: 1.55; }

.interior-page .notes-list { max-width: 770px; margin-left: auto; gap: 0; }
.interior-page .note-item { padding: 30px 0; border-top: 2px solid var(--ac-line); border-bottom: 0; }
.interior-page .note-item:last-child { border-bottom: 2px solid var(--ac-line); }
.interior-page .note-date { margin-bottom: 16px; color: var(--ac-muted); font: 16px/1.2 var(--font-label); text-transform: uppercase; }
.interior-page .note-title { font-size: 32px; line-height: 1.15; }
.interior-page .note-excerpt { max-width: 620px; font-size: 20px; line-height: 1.5; }
.interior-page .note-content { max-width: 770px; margin-left: auto; font-size: 20px; line-height: 1.55; }
.interior-page .note-footer { max-width: 770px; margin-left: auto; border-top: 2px solid var(--ac-line); }

.interior-page .tools-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
.interior-page .tools-list .service-card-secondary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    border: 2px solid var(--ac-line);
    border-radius: 10px;
}
.interior-page .tools-list .service-title { font-size: 28px; line-height: 1.15; }
.interior-page .tools-list .service-description { font-size: 18px; line-height: 1.5; }
.interior-page .tools-open { margin-top: auto; color: var(--ac-ink); font-size: 16px; }
.interior-page .tool-panel {
    max-width: 770px;
    margin: 0 0 75px auto;
    padding: 30px;
    border: 2px solid var(--ac-line);
    border-radius: 10px;
}
.interior-page .tool-drop { border: 2px dashed var(--ac-line-strong); border-radius: 7px; }
.interior-page .tool-drop:hover,
.interior-page .tool-drop.is-over { border-color: var(--ac-accent); background: var(--ac-wash); }
.interior-page .tool-drop-label { font-size: 18px; }
.interior-page .tool-explainer { max-width: 770px; margin-left: auto; font-size: 20px; }
.interior-page .tool-explainer h2:first-child { margin-top: 0; }
.interior-page .tool-grid .tile { border: 2px solid var(--ac-line); border-radius: 7px; }
.interior-page .tool-form select,
.interior-page .tool-form input,
.interior-page .tool-form textarea { border-radius: 6px; }

.interior-page .success-page { min-height: 55dvh; }
.interior-page .success-content { text-align: left; margin: 0; }
.interior-page .success-message { margin-bottom: 45px; }
.interior-page .intro-cta { margin-top: 45px; }
.interior-page .contact-note { margin-top: 30px; }

@media (max-width: 768px) {
    .interior-page main > section,
    .interior-page main > article { padding: 90px 15px; }
    .interior-page .interior-hero { padding-top: 90px; }
    .interior-page .intro-title,
    .interior-page .section-title,
    .interior-page .note-detail-title,
    .interior-page .tool-title,
    .interior-page .success-title { font-size: clamp(38px, 11.5vw, 48px); }
    .interior-page .intro-subtitle,
    .interior-page .interior-lead,
    .interior-page .note-intro,
    .interior-page .tool-intro,
    .interior-page .success-message { font-size: 24px; }
    .interior-page .landing-content-wrapper,
    .interior-page .note-content,
    .interior-page .project-content,
    .interior-page .tool-explainer { font-size: 18px; }
    .interior-page .landing-content-wrapper > p:first-child { font-size: 24px; }
    .interior-page .interior-heading,
    .interior-page .project-header,
    .interior-page .note-header,
    .interior-page .tool-header { margin-bottom: 45px; }
    .interior-page .interior-back { margin-bottom: 45px; }
    .interior-page .tools-list { grid-template-columns: 1fr; }
    .interior-page .tool-panel { padding: 16px; }
    .interior-page .service-content .home-feature-list li { font-size: 18px; }
    .interior-page .project-image-wrapper { margin-bottom: 35px; }
}