:root {

  --bg: #20211f;

  --surface: #292a27;

  --text: #f4f1e9;

  --muted: #bbbcb4;

  --accent: #d6b67b;

  --accent-contrast: #20211f;

  --line: #45463f;

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);

  --header-bg: rgba(32, 33, 31, 0.96);

  --max-width: 1240px;

  --gutter: clamp(1.25rem, 4vw, 4rem);

  --section-space: clamp(4rem, 7vw, 6.5rem);

  --display: Georgia, "Times New Roman", serif;

  --body: Aptos, "Helvetica Neue", Helvetica, Arial, sans-serif;

}



:root[data-theme="monochrome"] {

  --bg: #1c1c1a;

  --surface: #272623;

  --text: #f4f0e8;

  --muted: #c8c2b7;

  --accent: #ece2d2;

  --accent-contrast: #1c1c1a;

  --line: #4c4942;

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);

  --header-bg: rgba(28, 28, 26, 0.92);

}



:root[data-theme="navy"] {

  --bg: #18201d;

  --surface: #222d28;

  --text: #f1e6cf;

  --muted: #c8c2ad;

  --accent: #caa465;

  --accent-contrast: #18201d;

  --line: #485149;

  --shadow: 0 22px 60px rgba(0, 0, 0, 0.34);

  --header-bg: rgba(24, 32, 29, 0.92);

}



*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: auto;

}



html[data-page-motion="on"] {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  overflow-x: hidden;

  background: var(--bg);

  color: var(--text);

  font-family: var(--body);

  font-size: 1rem;

  line-height: 1.65;

  -webkit-font-smoothing: antialiased;

}



body.nav-open,

body.panel-open {

  overflow: hidden;

}



html[data-page-motion="on"] body::after {

  position: fixed;

  inset: 0;

  z-index: 999;

  background: var(--bg);

  content: "";

  opacity: 0;

  pointer-events: none;

  animation: page-reveal 420ms ease-out;

}



html[data-page-motion="on"] body.is-page-leaving::after {

  opacity: 1;

  animation: none;

  transition: opacity 260ms ease;

}



@keyframes page-reveal {

  from { opacity: 1; }

  to { opacity: 0; }

}



img {

  display: block;

  max-width: 100%;

}



a {

  color: inherit;

}



button,

input,

select,

textarea {

  color: inherit;

  font: inherit;

}



button,

a {

  -webkit-tap-highlight-color: transparent;

}



:focus-visible {

  outline: 3px solid var(--accent);

  outline-offset: 4px;

}



::selection {

  background: var(--accent);

  color: var(--accent-contrast);

}



.visually-hidden {

  position: absolute !important;

  width: 1px !important;

  height: 1px !important;

  padding: 0 !important;

  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0 0 0 0) !important;

  white-space: nowrap !important;

  border: 0 !important;

}



.skip-link {

  position: fixed;

  top: 0.75rem;

  left: 0.75rem;

  z-index: 200;

  padding: 0.7rem 1rem;

  transform: translateY(-150%);

  background: var(--text);

  color: var(--bg);

  text-decoration: none;

}



.skip-link:focus {

  transform: translateY(0);

}



.container {

  width: min(calc(100% - (var(--gutter) * 2)), var(--max-width));

  margin-inline: auto;

}



.section {

  padding-block: var(--section-space);

}



.section--surface {

  background: var(--surface);

}



.section--compact {

  padding-block: clamp(3.5rem, 7vw, 6rem);

}



.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  margin: 0 0 1.1rem;

  color: var(--accent);

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.16em;

  line-height: 1.3;

  text-transform: uppercase;

}



.eyebrow::before {

  width: 1.6rem;

  height: 1px;

  background: currentColor;

  content: "";

}



h1,

h2,

h3,

p {

  margin-top: 0;

}



h1,

h2,

h3 {

  font-family: var(--display);

  font-weight: 400;

  letter-spacing: -0.035em;

  line-height: 1.02;

}



h1 {

  max-width: 13ch;

  margin-bottom: 1.6rem;

  font-size: clamp(3.3rem, 8.4vw, 7.5rem);

}



h2 {

  margin-bottom: 1.25rem;

  font-size: clamp(2.4rem, 5vw, 4.7rem);

}



h3 {

  margin-bottom: 0.8rem;

  font-size: clamp(1.65rem, 2.5vw, 2.3rem);

}



.lead {

  max-width: 37rem;

  color: var(--muted);

  font-size: clamp(1.08rem, 1.5vw, 1.25rem);

  line-height: 1.65;

}



.small-copy {

  color: var(--muted);

  font-size: 0.9rem;

}



.text-link {

  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  color: var(--text);

  font-weight: 700;

  text-decoration-color: var(--accent);

  text-decoration-thickness: 1px;

  text-underline-offset: 0.35rem;

}



.text-link::after {

  content: "→";

  transition: transform 180ms ease;

}



.text-link:hover::after {

  transform: translateX(0.25rem);

}



.button-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.85rem;

  margin-top: 2rem;

}



.button {

  display: inline-flex;

  min-height: 3.35rem;

  align-items: center;

  justify-content: center;

  gap: 0.65rem;

  padding: 0.85rem 1.35rem;

  border: 1px solid var(--accent);

  background: var(--accent);

  color: var(--accent-contrast);

  cursor: pointer;

  font-size: 0.86rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-decoration: none;

  text-transform: uppercase;

  transition: transform 180ms ease, box-shadow 180ms ease;

}



.button:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 25px color-mix(in srgb, var(--accent), transparent 72%);

}



.button--ghost {

  border-color: var(--line);

  background: transparent;

  color: var(--text);

}



.button--ghost:hover {

  border-color: var(--text);

  box-shadow: none;

}



.site-header {

  position: sticky;

  top: 0;

  z-index: 50;

  border-bottom: 1px solid color-mix(in srgb, var(--line), transparent 20%);

  background: var(--header-bg);

  backdrop-filter: blur(16px);

}



.header-inner {

  display: flex;

  min-height: 5.2rem;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

}



.wordmark {

  display: inline-flex;

  align-items: center;

  gap: 0.9rem;

  text-decoration: none;

}



.wordmark-mark {

  display: block;

  width: 2.5rem;

  height: auto;

  background: transparent;

  filter: brightness(0) saturate(100%) invert(74%) sepia(30%) saturate(885%) hue-rotate(357deg) brightness(89%) contrast(89%);

  object-fit: contain;

}



.wordmark-text {

  display: grid;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.12em;

  line-height: 1.35;

  text-transform: uppercase;

}



.wordmark-text span:last-child {

  color: var(--muted);

  font-size: 0.62rem;

  letter-spacing: 0.19em;

}



.site-nav {

  display: flex;

  align-items: center;

  gap: clamp(1.15rem, 2.5vw, 2.35rem);

}



.site-nav a {

  position: relative;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-decoration: none;

  text-transform: uppercase;

}



.site-nav a:not(.nav-cta)::after {

  position: absolute;

  right: 0;

  bottom: -0.55rem;

  left: 0;

  height: 1px;

  transform: scaleX(0);

  background: var(--accent);

  content: "";

  transition: transform 180ms ease;

}



.site-nav a:hover::after,

.site-nav a[aria-current="page"]::after {

  transform: scaleX(1);

}



.site-nav a[aria-current="page"] {

  color: var(--accent);

}



.nav-cta {

  padding: 0.68rem 0.9rem;

  border: 1px solid var(--accent);

  color: var(--accent);

}



.nav-toggle {

  display: none;

  width: 2.8rem;

  height: 2.8rem;

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

}



.nav-toggle-lines,

.nav-toggle-lines::before,

.nav-toggle-lines::after {

  display: block;

  width: 1.6rem;

  height: 1px;

  margin: auto;

  background: var(--text);

  content: "";

  transition: transform 180ms ease, opacity 180ms ease;

}



.nav-toggle-lines::before {

  transform: translateY(-0.45rem);

}



.nav-toggle-lines::after {

  transform: translateY(0.4rem);

}



.nav-toggle[aria-expanded="true"] .nav-toggle-lines {

  background: transparent;

}



.nav-toggle[aria-expanded="true"] .nav-toggle-lines::before {

  transform: translateY(0) rotate(45deg);

}



.nav-toggle[aria-expanded="true"] .nav-toggle-lines::after {

  transform: translateY(-1px) rotate(-45deg);

}



.hero {

  min-height: calc(100vh - 5.2rem);

  min-height: calc(100svh - 5.2rem);

  display: grid;

  align-items: center;

  padding-block: clamp(3rem, 7vw, 7rem);

}



.hero-grid {

  display: grid;

  align-items: center;

  gap: clamp(2.5rem, 6vw, 6.5rem);

  grid-template-columns: minmax(0, 1.03fr) minmax(22rem, 0.74fr);

}



.hero-copy {

  position: relative;

  z-index: 1;

}



.hero .lead {

  max-width: 34rem;

}



.hero-visual {

  position: relative;

  min-height: clamp(30rem, 62vw, 43rem);

}



.hero-visual::before {

  position: absolute;

  top: -1.5rem;

  right: -1.5rem;

  width: 54%;

  height: 42%;

  border-top: 1px solid var(--accent);

  border-right: 1px solid var(--accent);

  content: "";

}



.hero-visual img {

  width: 100%;

  height: 100%;

  min-height: inherit;

  object-fit: cover;

}



.image-note {

  position: absolute;

  right: -0.75rem;

  bottom: 1.5rem;

  max-width: 14rem;

  padding: 0.8rem 1rem;

  background: var(--surface);

  box-shadow: var(--shadow);

  color: var(--muted);

  font-size: 0.71rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  line-height: 1.4;

  text-transform: uppercase;

}



.intro-grid,

.split-grid {

  display: grid;

  gap: clamp(2.5rem, 7vw, 7rem);

  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);

}



.intro-grid > :last-child {

  padding-top: 0.75rem;

}



.section-heading {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 2rem;

  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);

}



.section-heading > div {

  max-width: 48rem;

}



.section-heading h2 {

  max-width: 12ch;

  margin-bottom: 0;

}



.service-grid {

  display: grid;

  gap: 1px;

  border: 1px solid var(--line);

  background: var(--line);

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.service-card {

  display: flex;

  min-height: 26rem;

  flex-direction: column;

  padding: clamp(1.6rem, 3vw, 2.5rem);

  background: var(--surface);

}



.service-card-number {

  margin-bottom: auto;

  color: var(--accent);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.15em;

}



.service-card p {

  color: var(--muted);

}



.service-card .text-link {

  margin-top: 1rem;

}



.process-grid {

  display: grid;

  gap: 0;

  grid-template-columns: repeat(4, minmax(0, 1fr));

}



.process-step {

  padding: 2rem 2rem 2rem 0;

  border-top: 1px solid var(--line);

}



.process-step + .process-step {

  padding-left: 2rem;

  border-left: 1px solid var(--line);

}



.process-step span {

  display: block;

  margin-bottom: 3.5rem;

  color: var(--accent);

  font-size: 0.74rem;

  font-weight: 700;

  letter-spacing: 0.15em;

}



.process-step h3 {

  font-size: 1.55rem;

}



.process-step p {

  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.94rem;

}



.project-grid {

  display: grid;

  gap: clamp(1.5rem, 3vw, 2.5rem);

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.project-card {

  position: relative;

}



.project-card-media {

  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 5;

  margin-bottom: 1.3rem;

  background: var(--line);

}



.project-card-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: saturate(0.82);

  transition: transform 500ms ease, filter 500ms ease;

}



.project-card:hover img {

  transform: scale(1.025);

  filter: saturate(1);

}



.stock-badge {

  position: absolute;

  top: 0.8rem;

  left: 0.8rem;

  padding: 0.48rem 0.65rem;

  background: color-mix(in srgb, var(--surface), transparent 8%);

  color: var(--text);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  line-height: 1.3;

  text-transform: uppercase;

}



.project-card-meta {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 1rem;

}



.project-card h3 {

  margin-bottom: 0.35rem;

  font-size: 1.65rem;

}



.project-card p {

  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.86rem;

}



.project-card-meta span {

  color: var(--accent);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  text-transform: uppercase;

}



.statement {

  position: relative;

  overflow: hidden;

  padding-block: clamp(5rem, 10vw, 9rem);

  background: var(--text);

  color: var(--bg);

}



.statement::after {

  position: absolute;

  top: -28%;

  right: -5%;

  width: 34vw;

  height: 34vw;

  min-width: 20rem;

  min-height: 20rem;

  border: 1px solid color-mix(in srgb, var(--bg), transparent 75%);

  border-radius: 50%;

  content: "";

}



.statement-inner {

  position: relative;

  z-index: 1;

  display: grid;

  align-items: end;

  gap: 3rem;

  grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.55fr);

}



.statement h2 {

  max-width: 13ch;

  margin-bottom: 0;

}



.statement p {

  color: color-mix(in srgb, var(--bg), transparent 24%);

}



.statement .button {

  border-color: var(--bg);

  background: var(--bg);

  color: var(--text);

}



.page-hero {

  padding-block: clamp(5rem, 10vw, 9rem) clamp(4rem, 8vw, 7rem);

  border-bottom: 1px solid var(--line);

}



.page-hero-grid {

  display: grid;

  align-items: end;

  gap: 3rem;

  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.55fr);

}



.page-hero h1 {

  max-width: 11ch;

  margin-bottom: 0;

}



.page-hero .lead {

  margin-bottom: 0.4rem;

}



.service-detail {

  display: grid;

  align-items: center;

  gap: clamp(2.5rem, 7vw, 7rem);

  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

}



.service-detail + .service-detail {

  margin-top: var(--section-space);

  padding-top: var(--section-space);

  border-top: 1px solid var(--line);

}



.service-detail:nth-child(even) .service-detail-media {

  order: 2;

}



.service-detail-media {

  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 3;

  background: var(--line);

}



.service-detail-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.service-detail-copy h2 {

  font-size: clamp(2.3rem, 4.2vw, 4rem);

}



.service-detail-copy p {

  color: var(--muted);

}



.feature-list {

  display: grid;

  margin: 1.75rem 0 0;

  padding: 0;

  list-style: none;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.feature-list li {

  padding: 0.65rem 1rem 0.65rem 0;

  border-top: 1px solid var(--line);

  font-size: 0.9rem;

}



.feature-list li:nth-child(even) {

  padding-left: 1rem;

}



.notice {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  padding: 1rem 1.15rem;

  border-left: 3px solid var(--accent);

  background: var(--surface);

  color: var(--muted);

  font-size: 0.88rem;

}



.notice strong {

  color: var(--text);

}



.projects-intro {

  display: grid;

  gap: 2rem;

  grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.45fr);

  margin-bottom: clamp(3rem, 6vw, 5rem);

}



.projects-intro h2 {

  max-width: 13ch;

  margin-bottom: 0;

}



.projects-intro .notice {

  align-self: end;

}



.project-grid--wide {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.project-grid--wide .project-card-media {

  aspect-ratio: 16 / 10;

}



.project-grid--wide .project-card:nth-child(3n) {

  grid-column: 1 / -1;

}



.project-grid--wide .project-card:nth-child(3n) .project-card-media {

  aspect-ratio: 2 / 1;

}



.about-image {

  position: relative;

  overflow: hidden;

  min-height: 35rem;

}



.about-image img {

  width: 100%;

  height: 100%;

  min-height: inherit;

  object-fit: cover;

}



.about-copy {

  align-self: center;

}



.about-copy h2 {

  max-width: 12ch;

}



.about-copy p {

  color: var(--muted);

}



.placeholder-list {

  display: grid;

  margin: 2rem 0 0;

  padding: 0;

  border-top: 1px solid var(--line);

  list-style: none;

}



.placeholder-list li {

  display: flex;

  align-items: baseline;

  justify-content: space-between;

  gap: 1rem;

  padding-block: 0.8rem;

  border-bottom: 1px solid var(--line);

}



.placeholder-list span {

  color: var(--muted);

  font-size: 0.85rem;

}



.principles-grid {

  display: grid;

  gap: 1px;

  border: 1px solid var(--line);

  background: var(--line);

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.principle {

  min-height: 18rem;

  padding: 2rem;

  background: var(--bg);

}



.principle span {

  display: block;

  margin-bottom: 4rem;

  color: var(--accent);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.14em;

}



.principle h3 {

  font-size: 1.65rem;

}



.principle p {

  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.92rem;

}



.contact-layout {

  display: grid;

  gap: clamp(3rem, 8vw, 8rem);

  grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.2fr);

}



.contact-details {

  display: grid;

  gap: 0;

  margin-top: 2rem;

  border-top: 1px solid var(--line);

}



.contact-detail {

  padding-block: 1rem;

  border-bottom: 1px solid var(--line);

}



.contact-detail dt {

  margin-bottom: 0.2rem;

  color: var(--accent);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.13em;

  text-transform: uppercase;

}



.contact-detail dd {

  margin: 0;

  color: var(--muted);

}



.contact-detail a {

  color: var(--text);

  font-weight: 700;

  text-decoration-color: var(--accent);

  text-underline-offset: 0.25rem;

}



.enquiry-form {

  padding: clamp(1.5rem, 4vw, 3.5rem);

  border: 1px solid var(--line);

  background: var(--surface);

}



.form-heading {

  margin-bottom: 2.3rem;

}



.form-heading h2 {

  margin-bottom: 0.7rem;

  font-size: clamp(2rem, 3.5vw, 3rem);

}



.form-heading p {

  margin-bottom: 0;

  color: var(--muted);

}



.field-grid {

  display: grid;

  gap: 1.4rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.field {

  display: grid;

  gap: 0.45rem;

}



.field--wide {

  grid-column: 1 / -1;

}



.field label {

  font-size: 0.76rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.field label .small-copy {

  font-size: 0.68rem;

  font-weight: 400;

  letter-spacing: 0;

  text-transform: none;

}



.field input,

.field select,

.field textarea {

  width: 100%;

  min-height: 3.25rem;

  padding: 0.75rem 0;

  border: 0;

  border-bottom: 1px solid var(--line);

  border-radius: 0;

  outline: 0;

  background: transparent;

}



.field textarea {

  min-height: 8rem;

  resize: vertical;

}



.field input:focus,

.field select:focus,

.field textarea:focus {

  border-bottom-color: var(--accent);

  box-shadow: 0 1px 0 var(--accent);

}



.field input::placeholder,

.field textarea::placeholder {

  color: color-mix(in srgb, var(--muted), transparent 20%);

}



.form-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.5rem;

  margin-top: 2rem;

}



.form-footer p {

  max-width: 24rem;

  margin: 0;

  color: var(--muted);

  font-size: 0.78rem;

}



.form-status {

  min-height: 1.6rem;

  margin: 1.25rem 0 0;

  color: var(--accent);

  font-weight: 700;

}



.site-footer {

  padding-block: clamp(3.5rem, 7vw, 6rem) 1.8rem;

  border-top: 1px solid var(--line);

}



.footer-grid {

  display: grid;

  gap: 3rem;

  grid-template-columns: minmax(16rem, 1.3fr) repeat(2, minmax(10rem, 0.45fr));

}



.footer-brand p {

  max-width: 28rem;

  margin-top: 1.4rem;

  color: var(--muted);

}



.footer-logo-link {

  display: inline-block;

  text-decoration: none;

}



.footer-logo {

  display: block;

  width: min(100%, 15.5rem);

  height: auto;

  border: 1px solid color-mix(in srgb, var(--accent), transparent 58%);

  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);

}



.footer-heading {

  margin-bottom: 1rem;

  color: var(--accent);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}



.footer-links {

  display: grid;

  gap: 0.55rem;

  margin: 0;

  padding: 0;

  list-style: none;

}



.footer-links a {

  color: var(--muted);

  text-decoration: none;

}



.footer-links a:hover {

  color: var(--text);

}



.footer-bottom {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 4rem;

  padding-top: 1.3rem;

  border-top: 1px solid var(--line);

  color: var(--muted);

  font-size: 0.78rem;

}



.theme-toggle {

  position: fixed;

  right: 1.25rem;

  bottom: 1.25rem;

  z-index: 80;

  display: grid;

  width: 3.25rem;

  height: 3.25rem;

  place-items: center;

  padding: 0;

  border: 1px solid color-mix(in srgb, var(--bg), transparent 70%);

  border-radius: 50%;

  background: var(--text);

  box-shadow: 0 10px 30px color-mix(in srgb, var(--text), transparent 70%);

  color: var(--bg);

  cursor: pointer;

}



.theme-toggle svg {

  width: 1.25rem;

  height: 1.25rem;

}



.theme-panel {

  position: fixed;

  right: 1rem;

  bottom: 5.2rem;

  z-index: 90;

  width: min(calc(100vw - 2rem), 23rem);

  max-height: calc(100vh - 7rem);

  max-height: calc(100svh - 7rem);

  overflow-y: auto;

  padding: 1.35rem;

  border: 1px solid var(--line);

  background: var(--surface);

  box-shadow: var(--shadow);

}



.theme-panel[hidden] {

  display: none;

}



.theme-panel-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1rem;

}



.theme-panel h2 {

  margin-bottom: 0.25rem;

  font-family: var(--body);

  font-size: 1rem;

  font-weight: 700;

  letter-spacing: 0;

}



.theme-panel-header p {

  margin-bottom: 0;

  color: var(--muted);

  font-size: 0.76rem;

}



.panel-close {

  display: grid;

  width: 2rem;

  height: 2rem;

  flex: 0 0 auto;

  place-items: center;

  padding: 0;

  border: 1px solid var(--line);

  background: transparent;

  cursor: pointer;

}



.palette-options {

  display: grid;

  gap: 0.55rem;

  margin-block: 1.25rem;

}



.palette-option {

  display: grid;

  align-items: center;

  gap: 0.8rem;

  padding: 0.7rem;

  border: 1px solid var(--line);

  background: transparent;

  cursor: pointer;

  grid-template-columns: auto 1fr auto;

  text-align: left;

}



.palette-option:hover,

.palette-option.is-active {

  border-color: var(--accent);

}



.palette-option.is-active::after {

  color: var(--accent);

  content: "✓";

  font-weight: 700;

}



.palette-swatches {

  display: flex;

}



.palette-swatches i {

  width: 0.8rem;

  height: 1.8rem;

}



.palette-option strong {

  display: block;

  font-size: 0.79rem;

}



.palette-option small {

  display: block;

  color: var(--muted);

  font-size: 0.67rem;

}



.custom-colours {

  padding-top: 1rem;

  border-top: 1px solid var(--line);

}



.custom-colours h3 {

  margin-bottom: 0.3rem;

  font-family: var(--body);

  font-size: 0.79rem;

  font-weight: 700;

  letter-spacing: 0;

}



.custom-colours > p {

  margin-bottom: 1rem;

  color: var(--muted);

  font-size: 0.7rem;

}



.colour-field {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding-block: 0.5rem;

}



.colour-field label {

  font-size: 0.75rem;

  font-weight: 700;

}



.colour-field input[type="color"] {

  width: 2.4rem;

  height: 1.8rem;

  padding: 0;

  border: 1px solid var(--line);

  background: transparent;

  cursor: pointer;

}



.contrast-status {

  margin: 0.8rem 0;

  padding: 0.65rem;

  border-left: 2px solid var(--accent);

  background: var(--bg);

  color: var(--muted);

  font-size: 0.7rem;

}



.contrast-status.is-warning {

  border-left-color: #b23b2f;

  color: var(--text);

}



.motion-setting {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-top: 1rem;

  padding-block: 1rem;

  border-top: 1px solid var(--line);

}



.motion-setting label {

  display: block;

  font-size: 0.75rem;

  font-weight: 700;

}



.motion-setting p {

  max-width: 14rem;

  margin: 0.15rem 0 0;

  color: var(--muted);

  font-size: 0.67rem;

  line-height: 1.45;

}



.motion-switch {

  position: relative;

  width: 3rem;

  height: 1.7rem;

  flex: 0 0 auto;

  margin: 0;

  border: 1px solid var(--line);

  border-radius: 2rem;

  appearance: none;

  background: var(--bg);

  cursor: pointer;

  transition: border-color 180ms ease, background-color 180ms ease;

}



.motion-switch::after {

  position: absolute;

  top: 0.22rem;

  left: 0.24rem;

  width: 1.1rem;

  height: 1.1rem;

  border-radius: 50%;

  background: var(--muted);

  content: "";

  transition: transform 180ms ease, background-color 180ms ease;

}



.motion-switch:checked {

  border-color: var(--accent);

  background: color-mix(in srgb, var(--accent), transparent 78%);

}



.motion-switch:checked::after {

  background: var(--accent);

  transform: translateX(1.28rem);

}



.panel-actions {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}



.panel-reset {

  padding: 0;

  border: 0;

  border-bottom: 1px solid var(--accent);

  background: transparent;

  color: var(--text);

  cursor: pointer;

  font-size: 0.72rem;

  font-weight: 700;

}



.panel-note {

  margin: 0;

  color: var(--muted);

  font-size: 0.65rem;

  text-align: right;

}



@media (max-width: 980px) {

  .nav-toggle {

    display: block;

  }



  .site-nav {

    position: fixed;

    inset: 5.2rem 0 0;

    z-index: 49;

    display: none;

    align-items: stretch;

    justify-content: center;

    flex-direction: column;

    gap: 0;

    padding: 2rem var(--gutter);

    background: var(--bg);

  }



  .site-nav.is-open {

    display: flex;

  }



  .site-nav a {

    padding-block: 1rem;

    border-bottom: 1px solid var(--line);

    font-family: var(--display);

    font-size: clamp(1.8rem, 6vw, 3rem);

    font-weight: 400;

    letter-spacing: -0.02em;

    text-transform: none;

  }



  .site-nav a::after {

    display: none;

  }



  .nav-cta {

    margin-top: 1rem;

    border: 0;

    color: var(--accent);

  }



  .hero-grid {

    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.7fr);

  }



  .process-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .process-step:nth-child(3) {

    border-left: 0;

  }



  .project-grid,

  .principles-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .project-grid > :last-child,

  .principles-grid > :last-child {

    grid-column: 1 / -1;

  }

}



@media (max-width: 760px) {

  .hero {

    min-height: auto;

  }



  .hero-grid,

  .intro-grid,

  .split-grid,

  .statement-inner,

  .page-hero-grid,

  .service-detail,

  .projects-intro,

  .contact-layout {

    grid-template-columns: 1fr;

  }



  .hero-visual {

    min-height: 32rem;

  }



  .hero-visual::before {

    right: -0.7rem;

  }



  .image-note {

    right: -0.4rem;

  }



  .section-heading {

    align-items: flex-start;

    flex-direction: column;

  }



  .service-grid,

  .project-grid,

  .project-grid--wide,

  .principles-grid {

    grid-template-columns: 1fr;

  }



  .project-grid > :last-child,

  .project-grid--wide .project-card:nth-child(3n),

  .principles-grid > :last-child {

    grid-column: auto;

  }



  .project-grid--wide .project-card:nth-child(3n) .project-card-media {

    aspect-ratio: 16 / 10;

  }



  .service-card {

    min-height: 20rem;

  }



  .page-hero h1 {

    max-width: 12ch;

  }



  .service-detail:nth-child(even) .service-detail-media {

    order: initial;

  }



  .about-image {

    min-height: 28rem;

  }



  .footer-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .footer-brand {

    grid-column: 1 / -1;

  }

}



@media (max-width: 540px) {

  :root {

    --gutter: 1.15rem;

  }



  h1 {

    font-size: clamp(3.15rem, 16vw, 5rem);

  }



  .wordmark-text {

    display: none;

  }



  .hero-visual {

    min-height: 27rem;

  }



  .process-grid,

  .footer-grid,

  .field-grid {

    grid-template-columns: 1fr;

  }



  .process-step,

  .process-step + .process-step {

    padding: 1.5rem 0;

    border-top: 1px solid var(--line);

    border-left: 0;

  }



  .process-step span {

    margin-bottom: 1.8rem;

  }



  .feature-list {

    grid-template-columns: 1fr;

  }



  .feature-list li:nth-child(even) {

    padding-left: 0;

  }



  .placeholder-list li,

  .form-footer,

  .footer-bottom {

    align-items: flex-start;

    flex-direction: column;

  }



  .theme-panel {

    right: 0.6rem;

    bottom: 4.8rem;

    width: calc(100vw - 1.2rem);

  }



  .theme-toggle {

    right: 0.9rem;

    bottom: 0.9rem;

  }

}



/* Signature identity: quiet charcoal, natural stone and restrained gold. */

.header-inner { min-height: 6.25rem; }

.wordmark { gap: 0.85rem; flex-shrink: 0; }

.brand-symbol { position: relative; display: block; width: 3.75rem; height: 3.6rem; overflow: hidden; }

.brand-symbol img { position: absolute; width: 8.25rem; max-width: none; height: auto; left: -2.35rem; top: -1.35rem; }

.wordmark-text { font-family: var(--display); font-size: 1.04rem; font-weight: 400; letter-spacing: 0.14em; line-height: 1.65; }

.wordmark-text span:last-child { color: #e0cfad; font-family: var(--body); font-size: 0.58rem; letter-spacing: 0.27em; }

.site-nav a { font-size: 0.73rem; letter-spacing: 0.06em; }

.nav-cta { padding: 0.9rem 1.2rem; }

.hero { min-height: auto; padding-block: 4.25rem 4.5rem; }

.hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }

.hero h1 { max-width: none; font-size: clamp(3.2rem, 5.3vw, 5rem); line-height: 1.08; letter-spacing: -0.045em; }

.hero h1 em { color: var(--accent); font-weight: 400; }

.hero .eyebrow { font-size: 0.65rem; letter-spacing: 0.15em; }

.hero .lead { max-width: 29rem; font-size: 1rem; line-height: 1.8; }

.hero-visual { min-height: 0; height: clamp(29rem, 40vw, 36rem); }

.hero-visual img { min-height: 0; object-position: 54% center; }

.hero-visual::before { top: -0.8rem; right: -0.8rem; width: 35%; height: 30%; opacity: 0.65; }

.hero-visual::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(0deg, rgba(20,22,19,.48), transparent 36%); }

.image-note { z-index: 1; right: 1.1rem; bottom: 1.1rem; padding: 0; background: transparent; color: #fff; box-shadow: none; font-size: 0.57rem; font-weight: 400; letter-spacing: 0.09em; }

.button { min-height: 3.2rem; font-size: 0.7rem; letter-spacing: 0.065em; padding-inline: 1.15rem; }

.button--ghost { border-color: transparent; border-bottom-color: var(--line); padding-inline: 0.2rem; margin-left: 0.65rem; }

.hero-signoff { display: flex; gap: 1rem; margin: 2.8rem 0 0; color: var(--muted); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; }

.hero-signoff span { color: var(--accent); }

.location-strip { border-block: 1px solid var(--line); padding-block: 1.15rem; }

.location-strip .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.71rem; }

.location-strip b { color: var(--accent); padding-inline: 0.5rem; }

.location-strip a { text-decoration: none; color: var(--text); }

.location-strip a span { margin-left: 0.7rem; color: var(--accent); }

:root[data-theme="warm"] .section--surface {

  --bg: #f0eee7; --surface: #e6e3d9; --text: #292c27; --muted: #5b6057; --accent: #806334; --accent-contrast: #ffffff; --line: #c9cabe;

  background: var(--bg); color: var(--text);

}

h2 { font-size: clamp(2.4rem, 4vw, 3.8rem); line-height: 1.12; }

.section-heading h2 { max-width: 18ch; }

.intro-grid h2 { max-width: 16ch; }

.intro-grid .lead { font-size: 1.12rem; }

.intro-grid > :last-child > p:not(.lead) { color: var(--muted); }

.service-grid { gap: 1.5rem; border: 0; background: transparent; }

.service-card { min-height: 22rem; border-top: 1px solid var(--accent); background: var(--surface); transition: background 180ms ease; }

.service-card:hover { background: color-mix(in srgb, var(--surface), var(--accent) 7%); }

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

.service-card p { font-size: 0.94rem; }

.service-card .text-link { margin-top: auto; font-size: 0.8rem; }

.service-card-number { margin-bottom: 2.8rem; }

.project-card-media { aspect-ratio: 4 / 3; }

.project-card h3 { font-size: 1.45rem; }

.stock-badge { font-size: 0.53rem; font-weight: 400; }

.process-step span { font-family: var(--display); font-size: 2rem; font-weight: 400; letter-spacing: 0; margin-bottom: 2rem; }

.statement { background: var(--surface); color: var(--text); border-top: 1px solid var(--line); }

.statement h2 { max-width: 18ch; }

.statement p { color: var(--muted); }

.statement .button { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }

.statement::after { border-radius: 0; top: 2rem; right: -4rem; transform: rotate(-12deg); border-color: var(--line); }

.page-hero { padding-block: clamp(3.5rem, 7vw, 6rem); }

.page-hero h1 { font-size: clamp(3.3rem, 6vw, 5.5rem); max-width: 15ch; }

.footer-grid { grid-template-columns: minmax(0, 1fr) minmax(7rem, .45fr) minmax(0, 1fr); }

.footer-logo { width: 11rem; border: 0; box-shadow: none; }

.footer-brand p { max-width: 21rem; font-size: .87rem; }

.footer-links { font-size: .86rem; overflow-wrap: anywhere; }

.contact-detail dd { overflow-wrap: anywhere; }

.field select {

  color-scheme: dark;

  background-color: var(--surface);

  color: var(--text);

  cursor: pointer;

}



/* Native option popups need explicit colours on Windows browsers. */

.field select option {

  background-color: var(--surface);

  color: var(--text);

}

.theme-toggle { width: 2.6rem; height: 2.6rem; box-shadow: 0 3px 15px #0002; }

@media (max-width: 980px) {

  .site-nav { inset: 6.25rem 0 auto; height: calc(100vh - 6.25rem); height: calc(100dvh - 6.25rem); overflow-y: auto; }

  .site-nav a { font-size: 2rem; }

  .location-strip .container { flex-wrap: wrap; }

  .location-strip a { display: none; }

}

@media (max-width: 760px) {

  .hero { padding-block: 3rem; }

  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }

  .hero h1 { font-size: clamp(3rem, 8.5vw, 4.5rem); }

  .hero .lead { max-width: 34rem; }

  .hero-visual { height: 27rem; }

  .hero-signoff { margin-top: 2rem; }

  .footer-grid { grid-template-columns: 1fr 1fr; }

  .service-card { min-height: 19rem; }

  .service-card-number { margin-bottom: 2rem; }

}

@media (max-width: 540px) {

  .header-inner { min-height: 5.2rem; gap: 1rem; }

  .site-nav { inset-block-start: 5.2rem; height: calc(100vh - 5.2rem); height: calc(100dvh - 5.2rem); }

  .wordmark-text { display: grid; font-size: .83rem; }

  .wordmark-text span:last-child { font-size: .5rem; }

  .wordmark { gap: .6rem; }

  .brand-symbol { width: 3.3rem; height: 3.2rem; }

  .brand-symbol img { width: 7.3rem; left: -2.1rem; top: -1.2rem; }

  .hero h1 { font-size: clamp(2.7rem, 10.7vw, 3.8rem); }

  .hero .eyebrow { font-size: .58rem; }

  .hero-visual { height: 23rem; }

  .location-strip .container { justify-content: center; font-size: .65rem; gap: .4rem; text-align: center; }

  .location-strip .container > span { width: 100%; }

  .footer-grid { grid-template-columns: 1fr; }

  .footer-bottom { padding-right: 3rem; }

}



@media (prefers-reduced-motion: reduce) {

  html {

    scroll-behavior: auto;

  }



  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

  }



  html[data-page-motion="on"] body::after {

    display: none;

  }

}



.form-honeypot { display: none; }

.enquiry-form .button:disabled { opacity: .65; cursor: wait; transform: none; box-shadow: none; }

.form-status[data-state="error"] { color: var(--text); border-left: 2px solid var(--accent); padding-left: .8rem; }


/* Privacy notice uses a narrow reading column and simple contents links. */
.privacy-layout { display: grid; grid-template-columns: minmax(12rem, .45fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); }
.privacy-index { align-self: start; display: grid; gap: .7rem; }
.privacy-index a { font-size: .9rem; text-underline-offset: .25rem; text-decoration-color: var(--line); }
.privacy-copy { max-width: 46rem; overflow-wrap: anywhere; }
.privacy-copy section { scroll-margin-top: 8rem; }
.privacy-copy section + section { margin-top: 2.75rem; padding-top: 2.75rem; border-top: 1px solid var(--line); }
.privacy-copy h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
.privacy-copy p { color: var(--muted); }
.privacy-copy a { color: var(--text); text-underline-offset: .2rem; text-decoration-color: var(--accent); }
.footer-bottom > a { text-underline-offset: .25rem; }
@media (max-width: 760px) { .privacy-layout { grid-template-columns: 1fr; } }

/* Project photography gallery */
.photo-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.photo-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.photo-grid--portraits { margin-top: clamp(1.25rem, 2.5vw, 2rem); }
.photo-grid figure { margin: 0; min-width: 0; }
.photo-grid a { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--line); }
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.photo-grid--portraits a { aspect-ratio: 3 / 4; }
.photo-grid a:hover img { transform: scale(1.025); }
.photo-grid a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.photo-grid figcaption { padding-top: .75rem; color: var(--muted); font-size: .85rem; }

@media (max-width: 900px) {
  .photo-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .photo-grid, .photo-grid--three { grid-template-columns: 1fr; }
}