:root {
  --bg: #F2F2F2; --ink: #2A2A2A; --body: #555555; --line: rgb(0 0 0 / .16);
  --accent: #C6F8F0; --accent-ink: #2A2A2A; --focus: #2A2A2A; --hover: rgb(0 0 0 / .07); --button-ink: #FFFFFF;
  --gutter: 48px; --ambient-strength: .08; color-scheme: light;
}
:root[data-theme="dark"] { --bg: #202020; --ink: #E6E6E6; --body: #B8B8B8; --line: rgb(255 255 255 / .18); --accent: rgb(198 248 240 / .12); --accent-ink: #C6F8F0; --focus: #E6E6E6; --hover: rgb(255 255 255 / .1); --button-ink: #202020; --ambient-strength: .05; color-scheme: dark; }
@media (prefers-color-scheme: dark) and (scripting: none) {
  :root:not([data-theme]) { --bg: #202020; --ink: #E6E6E6; --body: #B8B8B8; --line: rgb(255 255 255 / .18); --accent: rgb(198 248 240 / .12); --accent-ink: #C6F8F0; --focus: #E6E6E6; --hover: rgb(255 255 255 / .1); --button-ink: #202020; --ambient-strength: .05; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { font: 100% 'Lexend Deca', sans-serif; scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 1.125rem; line-height: 1.6; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; overflow-wrap: anywhere; }
p { color: var(--body); }
a { color: inherit; text-underline-offset: .25em; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a:focus-visible, button:focus-visible, .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.container { width: min(1320px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 10; left: 24px; top: 12px; padding: 12px 18px; background: var(--ink); color: var(--button-ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.site-header { position: relative; z-index: 5; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 24px; }
.brand { display: flex; align-items: center; min-height: 44px; flex-shrink: 0; }
.brand img { width: 220px; }
.logo-dark { display: none; }
[data-theme="dark"] .logo-dark { display: block; }
[data-theme="dark"] .logo-light { display: none; }
@media (prefers-color-scheme: dark) and (scripting: none) {
  :root:not([data-theme]) .logo-dark { display: block; }
  :root:not([data-theme]) .logo-light { display: none; }
}
.header-navigation, .header-actions { display: flex; align-items: center; }
.header-navigation { margin-left: auto; gap: 28px; }
.header-actions { gap: 8px; }
#site-nav { display: flex; flex-wrap: wrap; gap: 0 28px; }
#site-nav a { display: flex; align-items: center; min-width: 44px; min-height: 44px; font-size: .9375rem; text-decoration: none; }
#site-nav a:hover { text-decoration: underline; }
.icon-button { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
.icon-button svg { width: 21px; height: 21px; }
.icon-button:hover { background: var(--hover); }
.icon-button:active, .menu-toggle[aria-expanded="true"] { box-shadow: inset 0 2px 5px rgb(0 0 0 / .2); }
.menu-toggle, .sun-icon { display: none; }
[data-theme="dark"] .sun-icon { display: block; }
[data-theme="dark"] .moon-icon { display: none; }
.hero { position: relative; isolation: isolate; padding-block: 48px; }
.hero-ambient { position: absolute; z-index: -1; inset: 0; overflow: clip; pointer-events: none; mask-image: linear-gradient(90deg, transparent, rgb(0 0 0) 15%, rgb(0 0 0) 75%, transparent); }
.ambient-light { position: absolute; inset: -12%; background: radial-gradient(ellipse at 72% 48%, rgb(55 244 216 / var(--ambient-strength)), transparent 64%); }
.hero-title { font-size: 10.5rem; letter-spacing: -.055em; line-height: 1.06; font-weight: 400; }
.headline-line { display: block; padding-bottom: .09em; }
.headline-line + .headline-line { text-align: right; }
.headline-word { display: inline-block; max-width: 100%; vertical-align: top; }

.hero-meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; margin-top: 24px; }
.hero-copy { max-width: 44rem; }
.hero-description { color: var(--body); font-size: 1.375rem; line-height: 1.55; text-wrap: pretty; }
.hero-actions { justify-self: end; }
.primary-link { display: inline-flex; align-items: center; gap: 20px; min-height: 56px; max-width: 100%; padding-block: 4px; font-size: 1rem; font-weight: 500; line-height: 1.4; text-decoration: none; }
.cta-label { overflow-wrap: anywhere; }
.cta-arrow { display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; }
.cta-arrow { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 2px 4px rgb(0 0 0 / .08); }
.cta-arrow svg { width: 24px; height: 24px; }
.primary-link:hover .cta-arrow { box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 4px 12px rgb(0 0 0 / .16); }
.primary-link:hover .cta-label { text-decoration: underline; }
.primary-link:active .cta-arrow { box-shadow: inset 0 3px 5px rgb(0 0 0 / .28); }
.project-story { border-top: 1px solid var(--line); }
.project-heading { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px; padding-block: 32px; }
.section-label { font-size: 1rem; font-weight: 400; margin-bottom: 12px; color: var(--body); }
.project-heading h2, .enquiry-title { font-size: 5.5rem; line-height: 1.05; letter-spacing: -.05em; }
/* The enquiry title shares the form's third-width column, so it sets below the homepage headings and steps down earlier. */
.enquiry-title { font-size: 5rem; }
.project-description { justify-self: end; width: min(100%, 30ch); font-size: 1.125rem; color: var(--ink); }
.case-media img { width: 100%; }
.project-notes { display: grid; grid-template-columns: 1fr 2fr; margin-top: 40px; margin-bottom: 72px; }
.project-context { padding-right: 40px; font-size: 1rem; color: var(--body); }
.project-contribution { border-left: 1px solid var(--line); padding-left: 40px; }
.project-contribution p { max-width: 54ch; }
.contact { border-top: 1px solid var(--line); }
.contact-inner { padding-block: 56px 48px; }
.contact-heading { font-size: 9rem; letter-spacing: -.055em; line-height: 1.15; }
.contact-heading .primary-link { display: flex; justify-content: space-between; font: inherit; }
.contact-cta .cta-arrow { width: clamp(56px, 8vw, 112px); height: clamp(56px, 8vw, 112px); }
.contact-cta .cta-arrow svg { width: 50%; height: 50%; }
.enquiry { padding-block: 56px 64px; }
.contact-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); font-size: 1rem; }
.contact-intro { min-width: 0; padding-right: 40px; }
.contact-topics { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.topic-list { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; }
.topic-list li { position: relative; }
.topic-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.topic-pill { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px 22px; border: 1px solid var(--body); border-radius: 999px; cursor: pointer; }
.topic-pill:hover { background: var(--hover); }
.topic-input:checked + .topic-pill { background: var(--ink); border-color: var(--ink); color: var(--button-ink); }
.topic-input:focus-visible + .topic-pill { outline: 3px solid var(--focus); outline-offset: 5px; }
@media (forced-colors: active) {
  .topic-input:checked + .topic-pill { forced-color-adjust: none; background: Highlight; border-color: Highlight; color: HighlightText; }
  .topic-input:focus-visible + .topic-pill { outline-color: Highlight; }
}
.contact-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 24px 40px; min-width: 0; padding-left: 40px; border-left: 1px solid var(--line); }
.field { display: grid; gap: 0; min-width: 0; }
.field label { color: var(--body); }
.field input, .field textarea { width: 100%; min-width: 0; min-height: 44px; padding: 6px 0; border: 0; border-bottom: 1px solid var(--body); border-radius: 0; background: transparent; color: var(--ink); font: inherit; }
.field input::placeholder { color: var(--body); opacity: 1; }
.field textarea { resize: vertical; }
.field-wide, .contact-group, .field-message, .contact-notice, .contact-required, .contact-submit { grid-column: 1 / -1; }
.contact-group { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.contact-group legend { margin-bottom: 16px; padding: 0; color: var(--body); }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.contact-notice { max-width: 62ch; overflow-wrap: anywhere; }
.contact-submit { appearance: none; justify-self: end; padding-inline: 0; border: 0; background: transparent; cursor: pointer; }
.privacy { padding-block: 56px 64px; }
.privacy-intro { margin-top: 24px; }
.privacy-sections { margin-top: 48px; }
.privacy-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); padding-block: 24px; border-top: 1px solid var(--line); }
.privacy-section h2 { padding-right: 40px; font-size: 1.125rem; }
.privacy-section > div { padding-left: 40px; }
.privacy-section p { max-width: 62ch; }
.privacy-section p + p { margin-top: 16px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 24px; font-size: 1rem; line-height: 1.6; }
.footer-inner { display: grid; gap: 8px; }
.footer-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.site-footer p { max-width: none; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="off"]) .cta-arrow svg { transition: transform .2s; }
  :root:not([data-motion="off"]) .cta-arrow, :root:not([data-motion="off"]) .icon-button { transition: background-color .2s, color .2s, box-shadow .2s; }
  :root:not([data-motion="off"]) .primary-link:hover .cta-arrow svg { transform: translate(2px, -2px); }
}
@media (max-width: 1250px) { .hero-title { font-size: 8rem; } .contact-heading { font-size: 7rem; } .enquiry-title { font-size: 4.25rem; } }
@media (max-width: 1050px) { .hero-title { font-size: 6.5rem; } .contact-heading { font-size: 6rem; } .enquiry-title { font-size: 3.5rem; } }
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .header-inner { gap: 14px; flex-wrap: wrap; padding-block: 20px; }
  .header-navigation { display: contents; }
  .brand img { width: 172px; }
  .header-actions { margin-left: auto; }
  .nav-ready .menu-toggle { display: grid; }
  #site-nav { width: 100%; order: 3; gap: 4px 24px; }
  .nav-ready #site-nav { display: none; position: absolute; left: 24px; right: 24px; top: 100%; width: auto; padding: 14px 20px; border: 1px solid var(--line); background: var(--bg); }
  .nav-ready #site-nav.open { display: flex; flex-direction: column; }
  #site-nav a { font-size: 1rem; }
  .hero { padding-block: 40px 48px; }
  .hero-title { font-size: 5.25rem; }
  .hero-description { font-size: 1.125rem; }
  .project-heading h2, .enquiry-title { font-size: 3.5rem; }
  .project-notes { grid-template-columns: 1fr 2fr; margin-block: 32px 48px; }
  .project-context { padding-right: 24px; }
  .project-contribution { padding-left: 24px; }
  .contact-heading { font-size: 4.5rem; }
  .contact-form { grid-template-columns: 1fr; gap: 40px; }
  .contact-intro { padding-right: 0; }
  .enquiry-title br { display: none; }
  .topic-list { flex-direction: row; flex-wrap: wrap; margin-top: 24px; }
  .contact-fields { padding-left: 0; border-left: 0; }
}
@media (max-width: 700px) {
  .hero-title { font-size: 3.375rem; letter-spacing: -.055em; line-height: 1.13; }

  .hero-meta { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .hero-actions { justify-self: end; }
  .project-heading { grid-template-columns: 1fr; gap: 16px; padding-block: 24px; }
  .project-heading h2, .enquiry-title { font-size: 2.75rem; }
  .project-description { justify-self: start; width: auto; max-width: 32ch; }
  .project-notes { grid-template-columns: 1fr; gap: 24px; }
  .project-context { padding: 0; }
  .project-contribution { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .contact-inner { padding-block: 32px; }
  .contact-heading { font-size: 3rem; }
  .enquiry, .privacy { padding-block: 32px; }
  .contact-fields, .field-pair { grid-template-columns: 1fr; gap: 24px; }
  .privacy-sections { margin-top: 32px; }
  .privacy-section { grid-template-columns: 1fr; gap: 16px; }
  .privacy-section h2 { padding-right: 0; }
  .privacy-section > div { padding-left: 0; }
}
@media (max-width: 359px) { .brand img { width: 146px; } .header-inner { gap: 8px; } .hero-title { font-size: 2.875rem; } .contact-heading { font-size: 2.5rem; } .project-heading h2, .enquiry-title { font-size: 2.25rem; } }
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
@media print {
  :root, :root[data-theme], :root:not([data-theme]) { --bg: #FFFFFF; --ink: #2A2A2A; --body: #2A2A2A; --line: rgb(0 0 0 / .16); color-scheme: light; }
  html { scroll-behavior: auto; }
  .brand .logo-light { display: block; }
  .brand .logo-dark, .header-actions, .header-navigation #site-nav, .hero-ambient, .cta-arrow, .contact-topics, .contact-title-about, .enquiry-title br { display: none; }
  .contact-form { display: block; }
  .enquiry-title::after { content: "."; }
  .contact-fields { display: contents; }
  .contact-fields > :not(.contact-notice) { display: none; }
  .contact-notice { margin-top: 24px; }
  figure, .project-notes, .contact, .site-footer { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}