:root {
    --page-bg: #f7f7f5;
    --ink: #0b0b0a;
    --muted: #656561;
    --line: #d6d6d1;
    --soft-line: #eaeae6;
    --header-bg: rgba(247, 247, 245, .92);
    --section-pad-x: clamp(24px, 6vw, 112px);
}

html[data-theme="dark"] {
    --page-bg: #0b0b0a;
    --ink: #f5f5f2;
    --muted: #a8a8a2;
    --line: #353532;
    --soft-line: #1b1b19;
    --header-bg: rgba(11, 11, 10, .92);
}

.site-refresh {
    font-family: 'Manrope', sans-serif;
}

.site-refresh h1,
.site-refresh h2,
.site-refresh h3,
.site-menu-nav a {
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    letter-spacing: -.065em;
}

.site-refresh h1,
.site-refresh h2,
.site-refresh h3 { font-weight: 600; }
.site-refresh h2 { line-height: .98; }
.site-refresh em { font-weight: 400; }
.site-refresh .section-content { min-width: 0; }
.site-refresh .section-kicker,
.site-refresh .eyebrow {
    gap: 12px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .13em;
    line-height: 1.25;
    white-space: normal;
}
.site-refresh .section-kicker::before,
.site-refresh .eyebrow::before { width: 22px; }

.header-caption { letter-spacing: .12em; }
.theme-toggle {
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
}
.site-menu-nav a { font-weight: 500; }
.site-menu-footer { line-height: 1.5; }

.editorial-link {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: fit-content;
    min-width: 210px;
    padding: 15px 0;
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: gap 220ms ease, opacity 220ms ease;
}
.editorial-link:hover,
.editorial-link:focus-visible { gap: 38px; opacity: .68; }
.editorial-link > svg { flex: 0 0 auto; }

/* Home */
.home-hero-section .section-grid { min-height: calc(100svh - var(--header-height)); }
.home-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 48px;
    min-height: calc(100svh - var(--header-height));
    padding-block: clamp(30px, 4vw, 62px);
}
.home-hero-top,
.home-hero-bottom,
.section-heading-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 32px;
}
.home-hero-top > span,
.section-heading-row > span {
    color: var(--muted);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.3;
    text-align: right;
    text-transform: uppercase;
}
.home-hero-content .hero-copy { max-width: none; }
.home-hero-content h1 {
    max-width: none;
    font-size: clamp(5.3rem, 12vw, 13rem);
    font-weight: 600;
    letter-spacing: -.09em;
    line-height: .82;
}
.home-hero-content h1 span { display: block; }
.home-hero-content .hero-outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ink);
    padding-bottom: .12em;
}
.home-hero-bottom {
    align-items: end;
    margin-top: clamp(42px, 6vw, 86px);
}
.home-hero-bottom p {
    max-width: 560px;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.5vw, 1.4rem);
    font-weight: 500;
    line-height: 1.55;
}
.flow-line {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    border-top: 1px solid var(--line);
}
.flow-line span {
    position: relative;
    padding-top: 18px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.flow-line span::before {
    position: absolute;
    top: -4px;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
    content: "";
}

.home-intro-section {
    background: var(--ink);
    color: var(--page-bg);
}
.home-intro-section .rail { border-color: color-mix(in srgb, var(--page-bg) 25%, transparent); }
.home-intro-content,
.home-statement-content {
    grid-template-columns: minmax(135px, .24fr) minmax(0, 1fr);
    align-content: center;
    gap: clamp(36px, 6vw, 100px);
}
.home-intro-content .section-kicker,
.home-statement-content .section-kicker { color: inherit; }
.home-intro-content h2,
.home-statement-content h2 {
    max-width: 1100px;
    font-size: clamp(3.4rem, 7.6vw, 9rem);
}
.home-intro-content em,
.home-statement-content em,
.home-contact-content em { font-style: normal; opacity: .55; }
.home-intro-content p:not(.section-kicker) {
    max-width: 630px;
    margin-top: clamp(34px, 5vw, 72px);
    color: color-mix(in srgb, var(--page-bg) 70%, transparent);
    font-size: clamp(1rem, 1.35vw, 1.25rem);
    line-height: 1.65;
}

.home-capabilities-content { align-content: center; }
.home-capabilities-content h2 {
    max-width: 1000px;
    margin: clamp(46px, 5vw, 70px) 0 clamp(54px, 6vw, 88px);
    font-size: clamp(3.4rem, 7vw, 8rem);
}
.capability-list { margin-bottom: clamp(34px, 5vw, 70px); }
.capability-list article {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) 160px;
    gap: clamp(18px, 3vw, 44px);
    align-items: start;
    padding: clamp(30px, 3.5vw, 54px) 0;
    border-top: 1px solid var(--line);
}
.capability-list article:last-child { border-bottom: 1px solid var(--line); }
.capability-list article > span,
.capability-list small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.capability-list small { text-align: right; }
.capability-list h3 {
    font-size: clamp(2rem, 3.8vw, 4.6rem);
    line-height: 1;
}
.capability-list p {
    max-width: 580px;
    margin-top: 16px;
    color: var(--muted);
    font-size: clamp(.95rem, 1.1vw, 1.12rem);
    line-height: 1.55;
}

.home-statement-section .section-grid { min-height: clamp(550px, 78vh, 950px); }
.home-statement-content .editorial-link { margin-top: clamp(38px, 5vw, 70px); }
.home-contact-section { background: var(--ink); color: var(--page-bg); }
.home-contact-section .rail { border-color: color-mix(in srgb, var(--page-bg) 25%, transparent); }
.home-contact-content {
    align-content: center;
    gap: clamp(36px, 5vw, 72px);
}
.home-contact-content .section-kicker { color: inherit; }
.home-contact-content h2 {
    max-width: 1200px;
    font-size: clamp(4.6rem, 10vw, 11rem);
}
.home-contact-content > div {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 32px;
}
.home-contact-content p:not(.section-kicker) {
    max-width: 380px;
    color: color-mix(in srgb, var(--page-bg) 70%, transparent);
    font-size: 1.1rem;
    line-height: 1.6;
}

/* Shared inside pages */
.site-refresh:not(.home-page) .section-grid { min-height: auto; }
.site-refresh:not(.home-page) .section-content { padding-block: clamp(100px, 12vw, 190px); }
.site-refresh .service-hero-content,
.site-refresh .product-hero-content,
.site-refresh .contact-page-hero {
    align-content: center;
    min-height: min(800px, calc(100svh - var(--header-height)));
}
.site-refresh .service-hero-content h1,
.site-refresh .product-hero-content h1,
.site-refresh .contact-page-hero h1 {
    max-width: 1080px;
    font-size: clamp(4rem, 8.5vw, 10rem);
    line-height: .88;
}
.site-refresh .service-hero-content em,
.site-refresh .contact-page-hero em { font-style: normal; color: var(--muted); }
.site-refresh .service-hero-content p:not(.section-kicker),
.site-refresh .contact-page-hero p:not(.section-kicker),
.site-refresh .product-hero-content p:not(.section-kicker) {
    max-width: 630px;
    margin-top: clamp(34px, 5vw, 64px);
    line-height: 1.6;
}

.site-refresh .services-page-layout { align-content: start; }
.site-refresh .service-detail-list > h2 {
    max-width: 800px;
    font-size: clamp(3.3rem, 6.2vw, 7rem);
}
.site-refresh .service-detail-item { grid-template-columns: 48px minmax(0, 1fr); }
.site-refresh .service-detail-item h3 { font-size: clamp(2.2rem, 4vw, 4.7rem); }
.site-refresh .service-detail-item:first-of-type {
    margin-inline: -24px;
    padding-inline: 24px;
    background: var(--ink);
    color: var(--page-bg);
}
.site-refresh .service-detail-item:first-of-type h3 { color: var(--page-bg); }
.site-refresh .service-detail-item:first-of-type p,
.site-refresh .service-detail-item:first-of-type > span { color: color-mix(in srgb, var(--page-bg) 70%, transparent); }
.site-refresh .service-detail-item:first-of-type li { color: var(--page-bg); border-color: color-mix(in srgb, var(--page-bg) 35%, transparent); }
.site-refresh .service-detail-item li {
    justify-content: start;
    min-height: 48px;
    padding: 10px 14px;
    font-size: .83rem;
    font-weight: 700;
    text-align: left;
}
.site-refresh .service-process-layout h2 { max-width: 860px; font-size: clamp(3.3rem, 6.2vw, 7rem); }
.site-refresh .service-process-grid { gap: 12px; border: 0; }
.site-refresh .service-process-grid article {
    min-height: 275px;
    padding: clamp(26px, 3vw, 44px);
    border: 1px solid var(--line);
    background: var(--soft-line);
}
.site-refresh .service-process-grid span { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.8rem, 2.6vw, 3.1rem); letter-spacing: -.05em; }
.site-refresh .contact-layout h2 { font-size: clamp(3.2rem, 6vw, 7rem); }
.site-refresh .contact-layout a { padding-bottom: 8px; font-weight: 800; }
.service-page .contact-section,
.contact-page .contact-section { background: var(--soft-line); }

/* Work and products */
.site-refresh .work-index-content,
.site-refresh .product-index-content { padding-top: clamp(70px, 9vw, 130px); }
.index-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 48px;
    margin-top: clamp(44px, 6vw, 90px);
}
.index-hero h1 {
    max-width: 900px;
    font-size: clamp(4.6rem, 9vw, 10rem);
    line-height: .88;
}
.index-hero em { font-style: normal; color: var(--muted); }
.index-hero p {
    max-width: 300px;
    padding-bottom: 8px;
    color: var(--muted);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    line-height: 1.55;
}
.site-refresh .work-list,
.site-refresh .product-list { gap: 0; margin-top: clamp(70px, 9vw, 130px); }
.site-refresh .work-list-item,
.site-refresh .product-list-item {
    display: grid;
    width: 100%;
    max-width: none;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    padding: clamp(28px, 3vw, 48px) 0;
    border-top: 1px solid var(--line);
}
.site-refresh .work-list-item:last-child { border-bottom: 1px solid var(--line); }
.site-refresh .work-list-number,
.site-refresh .product-list-number,
.site-refresh .work-list-year {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
}
.site-refresh .work-list-year { position: static; }
.site-refresh .work-list-title,
.site-refresh .product-list-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.1rem, 4.5vw, 5.4rem);
    font-weight: 500;
    letter-spacing: -.065em;
    line-height: 1;
}
.site-refresh .product-list-item {
    grid-template-columns: 50px minmax(0, .9fr) minmax(200px, .5fr);
}
.site-refresh .product-list-description { max-width: 370px; }
.site-refresh .product-hero-content { align-content: center; }
.site-refresh .product-link-item { border-radius: 0; }
.site-refresh .product-gallery-item img,
.site-refresh .product-gallery-item video { border: 0; }

/* Contact */
.site-refresh .contact-form-intro h2 { font-size: clamp(3.2rem, 6vw, 7rem); }
.site-refresh .enquiry-form { border-top: 1px solid var(--line); }
.site-refresh .form-block legend {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.8rem, 2.5vw, 2.8rem);
    font-weight: 500;
    letter-spacing: -.04em;
}
.site-refresh .form-block { padding-block: clamp(38px, 5vw, 68px); }
.site-refresh .enquiry-form input,
.site-refresh .enquiry-form textarea,
.site-refresh .choice-grid span { background: var(--page-bg); }
.site-refresh .choice-grid input:checked + span { background: var(--ink); }
.site-refresh .form-actions button {
    min-width: 190px;
    border-radius: 999px;
    font-size: .78rem;
    letter-spacing: .1em;
}
.site-refresh .contact-note-grid { gap: 12px; border: 0; }
.site-refresh .contact-note-grid article {
    min-height: 240px;
    border: 1px solid var(--line);
    background: var(--page-bg);
}
.site-refresh .contact-notes-layout h2 { max-width: 740px; font-size: clamp(3rem, 5.4vw, 6rem); }
.site-refresh .contact-note-grid p { font-family: 'Space Grotesk', sans-serif; font-weight: 500; letter-spacing: -.04em; }

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--page-bg);
    color: var(--ink);
}
.site-footer-inner {
    width: min(100%, var(--content-max));
    margin-inline: auto;
    padding: clamp(34px, 5vw, 80px) clamp(24px, 11vw, 180px) 24px;
}
.site-footer-top,
.site-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 1.5;
    text-transform: uppercase;
}
.site-footer-main {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 36px;
    padding-block: clamp(70px, 8vw, 140px);
}
.site-footer-main p {
    max-width: 800px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(3.5rem, 7.8vw, 9rem);
    font-weight: 600;
    letter-spacing: -.07em;
    line-height: .9;
}
.site-footer-main em { color: var(--muted); font-style: normal; font-weight: 400; }
.site-footer-main nav { display: grid; gap: 12px; min-width: 130px; }
.site-footer-main nav a {
    width: fit-content;
    border-bottom: 1px solid transparent;
    font-size: .92rem;
    font-weight: 700;
}
.site-footer-main nav a:hover,
.site-footer-main nav a:focus-visible { border-color: currentColor; }
.site-footer-bottom { padding-top: 20px; border-top: 1px solid var(--line); }

@media (max-width: 900px) {
    .home-hero-content h1 { font-size: clamp(5rem, 13vw, 8rem); }
    .home-hero-bottom { align-items: start; flex-direction: column; }
    .home-intro-content,
    .home-statement-content { grid-template-columns: 1fr; }
    .capability-list article { grid-template-columns: 42px minmax(0, 1fr); }
    .capability-list small { display: none; }
    .index-hero { align-items: start; flex-direction: column; }
    .site-refresh .product-list-item { grid-template-columns: 40px minmax(0, 1fr); }
    .site-refresh .product-list-description { grid-column: 2; }
    .site-footer-main { align-items: start; flex-direction: column; }
}

@media (max-width: 760px) {
    :root { --section-pad-x: clamp(18px, 5vw, 26px); }
    .header-caption { display: none; }
    .theme-toggle { width: 38px; height: 38px; }
    .site-refresh .section-content { padding-block: clamp(90px, 20vw, 140px); }
    .home-hero-section .section-grid,
    .home-hero-content { min-height: calc(100svh - var(--header-height)); }
    .home-hero-content { gap: 34px; padding-block: 30px !important; }
    .home-hero-top > span { display: none; }
    .home-hero-top .eyebrow { max-width: 260px; }
    .home-hero-content h1 { font-size: clamp(4.2rem, 16vw, 7rem); line-height: .86; }
    .home-hero-bottom { margin-top: 34px; gap: 20px; }
    .home-hero-bottom p { font-size: 1rem; }
    .flow-line { gap: 10px; }
    .flow-line span { font-size: .54rem; line-height: 1.3; }
    .home-intro-content h2,
    .home-statement-content h2,
    .home-capabilities-content h2 { font-size: clamp(3.1rem, 10.5vw, 5.5rem); line-height: .98; }
    .home-intro-content p:not(.section-kicker) { margin-top: 32px; }
    .section-heading-row > span { display: none; }
    .home-capabilities-content h2 { margin: 46px 0 56px; }
    .capability-list article { gap: 12px; padding-block: 26px; }
    .capability-list h3 { font-size: clamp(1.9rem, 7.4vw, 3.2rem); }
    .capability-list p { font-size: .95rem; }
    .home-contact-content h2 { font-size: clamp(4rem, 14vw, 7rem); }
    .home-contact-content > div { align-items: start; flex-direction: column; }
    .site-refresh .service-hero-content,
    .site-refresh .product-hero-content,
    .site-refresh .contact-page-hero { min-height: 68svh; }
    .site-refresh .service-hero-content h1,
    .site-refresh .product-hero-content h1,
    .site-refresh .contact-page-hero h1,
    .index-hero h1 { font-size: clamp(3.8rem, 13vw, 6rem); line-height: .92; }
    .site-refresh .service-detail-list > h2,
    .site-refresh .service-process-layout h2,
    .site-refresh .contact-form-intro h2,
    .site-refresh .contact-notes-layout h2 { font-size: clamp(3rem, 10vw, 5rem); line-height: 1; }
    .site-refresh .service-detail-item { grid-template-columns: 1fr; gap: 18px; }
    .site-refresh .service-detail-item ul { grid-template-columns: 1fr; }
    .site-refresh .service-process-grid,
    .site-refresh .contact-note-grid { grid-template-columns: 1fr; }
    .site-refresh .service-process-grid article,
    .site-refresh .contact-note-grid article { min-height: 0; }
    .site-refresh .work-list-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; }
    .site-refresh .work-list-title,
    .site-refresh .product-list-title { font-size: clamp(2rem, 8vw, 3.5rem); }
    .site-refresh .product-list-item { gap: 10px; }
    .site-refresh .form-grid-two,
    .site-refresh .choice-grid { grid-template-columns: 1fr; }
    .site-footer-inner { padding-inline: var(--section-pad-x); }
    .site-footer-top,
    .site-footer-bottom { align-items: start; flex-direction: column; gap: 8px; }
    .site-footer-main { gap: 50px; padding-block: 70px; }
    .site-footer-main p { font-size: clamp(3.1rem, 12vw, 4rem); }
    .site-footer-main nav { grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 16px 28px; }
}

@media (max-width: 430px) {
    .home-hero-content h1 { font-size: clamp(3.15rem, 16.5vw, 4.8rem); }
    .flow-line span { font-size: .49rem; }
}

@media (prefers-reduced-motion: reduce) {
    .editorial-link { transition: none; }
}
