/* ==========================================================================
   Design tokens
   Colour, spacing and typography custom properties, plus the dark theme overrides.
   ========================================================================== */
:root {
  --primary: #1f1f1f;
  --primary-soft: #2b2b2b;
  --secondary: #c8b79c;
  --accent: #b89b72;
  --accent-ink: #79603f;
  --background: #f7f4ef;
  --surface: #fff;
  --surface-soft: #eeeae3;
  --text: #222222;
  --text-secondary: #6f6a63;
  --text-secondary-readable: #67635c;
  --border: #e3ded5;
  --success: #326348;
  --danger: #a53939;
  --overlay: rgba(13, 17, 13, 0.65);
  --serif: "Poppins", sans-serif;
  --sans: "Poppins", sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --radius: 4px;
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.06);
  --ease: 300ms ease;
}
[data-theme="dark"] {
  --primary: #eeeee5;
  --primary-soft: #deded3;
  --background: #191b18;
  --surface: #232620;
  --surface-soft: #252821;
  --text: #eeeee5;
  --text-secondary: #b4b3a7;
  --text-secondary-readable: #b4b3a7;
  --border: #3c4035;
  --accent: #b89b72;
  --accent-ink: #c8ad88;
  --success: #91c3a4;
  --danger: #efa4a0;
  --shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* ==========================================================================
   Base and reset
   Element defaults that everything else builds on.
   ========================================================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
}
body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  transition:
    background-color var(--ease),
    color var(--ease);
  -webkit-font-smoothing: antialiased;
}
body.modal-open {
  overflow: hidden;
}
/* ==========================================================================
   Element defaults
   Bare tag styling before any component takes over.
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea,
select {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button {
  border: 0;
  background: none;
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--surface-soft);
}
img.image-error {
  object-fit: contain;
  padding: 24px;
  color: var(--text-secondary-readable);
  font-size: 13px;
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1,
h2,
h3 {
  font-weight: 400;
}
h1,
h2 {
  font-family: var(--serif);
  
  
}

h2 {
  
  margin-bottom: 25px;
}

p {
  margin-bottom: 20px;
}
p:last-child {
  margin-bottom: 0;
}
em {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
}
h2 em,
h1 em {
  color: var(--accent-ink);
}
/* ==========================================================================
   Layout primitives
   The page container, vertical section rhythm and the small label style.
   ========================================================================== */
.wrap {
  width: calc(100% - 128px);
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.section {
  padding-top: 104px;
  padding-bottom: 104px;
}
.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.1px;
  line-height: 1.7;
  text-transform: uppercase;
  margin-bottom: 25px;
}
/* ==========================================================================
   Buttons, links and icons
   Shared action styling. The inline-link underline is finalised in layout-fixes.css.
   ========================================================================== */
.icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  transition:
    background var(--ease),
    transform var(--ease);
}
.icon-button:hover {
  background: var(--surface-soft);
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: var(--primary);
  color: var(--background);
  padding: 17px 25px;
  min-height: 54px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  border: 1px solid var(--primary);
  transition:
    background-color var(--ease),
    color var(--ease),
    border-color var(--ease);
  border-radius: 1px;
}
.button .icon {
  width: 18px;
  height: 18px;
  transition: transform var(--ease);
}
.button:hover {
  background: var(--accent-ink);
  border-color: var(--accent-ink);
  color: var(--background);
}
.button:hover .icon {
  transform: translate(3px, -3px);
}
.button:active {
  transform: translateY(1px);
}
.button.light {
  background: #f7f4ef;
  color: #242720;
  border-color: #f7f4ef;
}
.button.light:hover {
  background: #d9c9b0;
  border-color: #d9c9b0;
}
.button.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.button.secondary:hover {
  background: var(--surface-soft);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  font-weight: 500;
  min-height: 44px;
  position: relative;
  line-height: 1.6;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  background: currentColor;
  height: 1px;
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform var(--ease);
  opacity: 0.4;
}
.text-link:hover::after {
  transform: scaleX(1);
}
.text-link .icon {
  width: 18px;
  transition: transform var(--ease);
}
.text-link:hover .icon:last-child {
  transform: translateX(4px);
}
:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 5px;
}
/* ==========================================================================
   Accessibility helpers
   Screen-reader-only text and the skip link.
   ========================================================================== */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 300;
  background: var(--surface);
  padding: 12px 20px;
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: translateY(0);
}
[hidden] {
  display: none !important;
}
/* ==========================================================================
   Header and navigation
   Site header, brand lockup, desktop links and the mobile drawer.
   ========================================================================== */
.site-header {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 0 48px;
  background: var(--background);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition:
    background var(--ease),
    box-shadow var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 3px 18px #00000009;
  border-bottom-color: var(--border);
}
.brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.2;
  flex-shrink: 0;
}
.brand > span {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -0.5px;
}
.brand small {
  font-size: 7px;
  letter-spacing: 2.4px;
  font-weight: 500;
  margin-top: 9px;
}
.desktop-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  margin-left: auto;
  margin-right: 25px;
}
.desktop-nav a {
  font-size: 12px;
  position: relative;
  padding: 10px 0;
}
.desktop-nav a::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent-ink);
  transform: scaleX(0);
  transition: transform var(--ease);
}
.desktop-nav a:hover::after,
.desktop-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}
.desktop-nav a[aria-current="page"] {
  color: var(--accent-ink);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.header-cta {
  padding: 13px 19px;
  font-size: 11px;
  min-height: 46px;
  gap: 24px;
}
.theme-toggle {
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding-right: 20px;
  width: 45px;
}
.theme-toggle .icon {
  width: 18px;
}
.menu-button {
  display: none;
}
/* A browser that knows <dialog> hides it until it is opened, so the drawer
   normally needs no rule of its own. A browser that does NOT know <dialog>
   treats it as an ordinary unknown element and shows it, which drops the
   logo, the six navigation links, the Enquire button and the tagline into
   the middle of every page. Safari before 15.4 is the one that still turns
   up on older iPhones. This says out loud what the built-in behaviour would
   otherwise be, and changes nothing where <dialog> is supported. */
.mobile-menu:not([open]) { display: none; }
/* Those same browsers give the opened drawer no top layer either, so it would
   land in the normal flow and push the page down. This places and raises it.
   Anything that supports modal dialogs never matches, and is untouched. */
@supports not selector(dialog:modal) {
  .mobile-menu[open] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: 1600;
    box-shadow: -18px 0 48px rgba(10, 29, 47, .28);
  }
}
.mobile-menu {
  margin: 0 0 0 auto;
  padding: 30px;
  width: min(400px, 90vw);
  max-width: none;
  /* vh first, then dvh for browsers that have it. Safari before 15.4 and
     Chrome before 108 drop the dvh lines and keep these, which is a little
     tall next to a phone's address bar but still a full-height drawer. With
     no fallback at all those browsers sized the menu to its own content. */
  height: 100vh;
  max-height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  border: 0;
  background: var(--background);
  color: var(--text);
  overflow-y: auto;
}
.mobile-menu::backdrop,
/* ==========================================================================
   Gallery and lightbox
   Photo and video grids, filters and the full-screen viewer.
   ========================================================================== */
.lightbox::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(4px);
}
.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.menu-top .eyebrow {
  margin: 0;
}
/* ==========================================================================
   Header and navigation
   Site header, brand lockup, desktop links and the mobile drawer.
   ========================================================================== */
.mobile-menu nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu nav a[aria-current="page"] {
  color: var(--accent-ink);
}
.mobile-menu .button {
  width: 100%;
}
.menu-note {
  margin-top: 40px;
  font-family: var(--serif);
  font-size: 23px;
  color: var(--text-secondary-readable);
}
/* ==========================================================================
   Hero
   Home and page hero blocks.
   ========================================================================== */
.hero {
  position: relative;
  min-height: 640px;
  height: calc(100svh - 92px);
  max-height: 960px;
  overflow: hidden;
  color: #f8f5ef;
  background: #35372d;
}
.hero-image {
  position: absolute;
  inset: 0;
  object-position: center 56%;
}
.hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(20, 25, 19, 0.64),
      rgba(20, 25, 19, 0.23) 58%,
      rgba(20, 25, 19, 0.04)
    ),
    linear-gradient(0deg, rgba(15, 20, 15, 0.48), transparent 25%);
}
.hero-content {
  position: relative;
  z-index: 1;
  padding: 96px 64px 130px;
  width: 100%;
  max-width: 1570px;
  margin: auto;
  top: 50%;
  transform: translateY(-50%);
}
.hero-content .eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 10px;
  margin-bottom: 30px;
}
.short-line {
  display: inline-block;
  width: 34px;
  height: 1px;
  background: #c8b79c;
}
.hero h1 {
  
  
  
  margin-bottom: 28px;
}
.hero h1 em {
  color: #f0e7d8;
}
.hero-content > p:not(.eyebrow) {
  font-size: 14px;
  color: #e5e5dd;
  line-height: 1.9;
  margin-bottom: 32px;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 32px;
}
.hero-actions .text-link {
  font-size: 11px;
  color: #f7f4ef;
}
.hero-actions .button {
  min-width: 192px;
}
.hero-bottom {
  position: absolute;
  z-index: 2;
  left: 64px;
  right: 64px;
  bottom: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 23px;
  border-top: 1px solid #ffffff38;
}
.scroll-cue {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 8px;
  letter-spacing: 1.8px;
}
.scroll-icon {
  height: 34px;
  width: 22px;
  border: 1px solid #ffffff70;
  border-radius: 20px;
  text-align: center;
  font-size: 17px;
  line-height: 30px;
}
.hero-caption {
  margin-left: auto;
  margin-right: 48px;
  text-align: right;
}
.hero-caption > span {
  font-size: 8px;
  letter-spacing: 1.6px;
  display: block;
}
.hero-caption small {
  font-size: 9px;
  color: #d7d8cd;
  display: block;
  margin-top: 3px;
}
.hero-index {
  margin-right: 45px;
  font-size: 18px;
  letter-spacing: 1px;
}
.hero-index span {
  font-size: 10px;
  color: #d4d4c6;
}
/* ==========================================================================
   Introduction and values
   Studio positioning, the highlights strip and the values statements.
   ========================================================================== */
.intro {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  column-gap: 80px;
  padding-bottom: 45px;
}

.intro-copy {
  padding-top: 34px;
  max-width: 475px;
}
.intro-copy p {
  font-size: 14px;
  color: var(--text-secondary-readable);
  line-height: 1.95;
}
.intro-copy p:first-child {
  color: var(--text);
}
.intro-foot {
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--border);
  margin-top: 70px;
  padding-top: 27px;
}
.intro-foot span {
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--text-secondary-readable);
}
/* ==========================================================================
   Layout primitives
   The page container, vertical section rhythm and the small label style.
   ========================================================================== */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 45px;
}
.section-heading h2 {
  margin-bottom: 0;
}
.section-heading .eyebrow {
  margin-bottom: 18px;
}
.section-heading > p {
  font-size: 13px;
  color: var(--text-secondary-readable);
  margin-bottom: 5px;
}
.section-heading > .text-link {
  margin-bottom: 5px;
}
/* ==========================================================================
   Projects
   Project cards, the collection grid and the project story pages.
   ========================================================================== */
.selected {
  padding-top: 62px;
}
.collection-note {
  font-size: 10px;
  color: var(--text-secondary-readable);
  margin-top: -22px;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
}
.featured-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}
.featured-secondary {
  margin-top: 90px;
}
.project-open {
  padding: 0;
  width: 100%;
  text-align: left;
  display: block;
}
.project-image {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 1.43;
  background: var(--surface-soft);
}
/* Project photographs are shown still. No hover zoom: the crop the studio
   chose is the crop the visitor sees. */
.featured-secondary .project-image {
  aspect-ratio: 1.09;
}
.project-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 19px;
}
.project-category {
  font-size: 8px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-secondary-readable);
  display: block;
}
.project-category > span {
  padding: 0 8px;
  color: var(--accent-ink);
}
.project-title {
  font-family: var(--serif);
  display: block;
  margin-top: 7px;
}
.round-arrow {
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background var(--ease),
    color var(--ease);
}
.round-arrow .icon {
  width: 17px;
}
.project-open:hover .round-arrow {
  background: var(--primary);
  color: var(--background);
}
.project-hover {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 12px 16px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  background: #21261eab;
  transform: translateY(12px);
  opacity: 0;
  transition:
    transform var(--ease),
    opacity var(--ease);
}
.project-open:hover .project-hover,
.project-open:focus-visible .project-hover {
  opacity: 1;
  transform: translateY(0);
}
.image-badge {
  position: absolute;
  left: 16px;
  top: 16px;
  color: #fff;
  font-size: 7px;
  letter-spacing: 1.6px;
  padding: 5px 8px;
  background: #25292070;
}
.featured-story {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-top: 34px;
  margin-top: 38px;
  border-top: 1px solid var(--border);
}
.featured-story > .eyebrow {
  font-size: 8px;
  margin: 0;
}
.featured-story > p {
  margin: 0 auto 0 0;
  font-size: 12px;
  color: var(--text-secondary-readable);
}
.home-services {
  background: var(--background);
}
/* ==========================================================================
   Services
   Service cards, the service index and the detail sections.
   ========================================================================== */
.services-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.service-picture {
  aspect-ratio: 1.45;
  overflow: hidden;
  margin-bottom: 25px;
}
/* Service photographs are shown still — see the note on .project-image img. */
.service-title {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 15px;
}
.service-title h3 {
  font-family: var(--serif);
  
  flex: 1;
  margin: 0;
}
.service-title > .icon {
  width: 17px;
}
.service-icon {
  display: flex;
  color: var(--accent-ink);
}
.service-icon .icon {
  width: 19px;
}
.service-preview p {
  font-size: 12px;
  color: var(--text-secondary-readable);
  line-height: 1.9;
  max-width: 95%;
}
.service-preview .text-link {
  font-size: 10px;
}
/* ==========================================================================
   Introduction and values
   Studio positioning, the highlights strip and the values statements.
   ========================================================================== */
.philosophy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 650px;
}
.philosophy-image {
  min-height: 100%;
  overflow: hidden;
}
.philosophy-image img {
  max-height: 800px;
}
.philosophy-copy {
  padding: 94px 13%;
  background: #2c3027;
  color: #eeeee2;
}
.philosophy-copy .eyebrow {
  color: #cfcdbd;
  font-size: 9px;
}
.fine-line {
  display: block;
  width: 45px;
  height: 1px;
  background: var(--accent-ink);
  margin: 25px 0;
}
.philosophy h2 {
  
  margin-bottom: 30px;
}
.philosophy h2 em {
  color: #c4af8f;
}
.philosophy-copy > p:not(.eyebrow) {
  color: #c7c9ba;
  font-size: 13px;
  max-width: 340px;
  line-height: 1.95;
}
.philosophy-copy > .text-link {
  font-size: 10px;
  margin-top: 10px;
}
.collection-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 30px;
}
.collection-grid .project-image {
  aspect-ratio: 0.88;
}
.collection-grid .project-card:nth-child(2) {
  margin-top: 70px;
}
.collection-grid .project-card:nth-child(2) .project-image {
  aspect-ratio: 1.1;
}

.collection-grid .project-category {
  font-size: 7px;
  letter-spacing: 0.8px;
}
.values-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-top: 65px;
  padding-bottom: 65px;
}
.values-strip > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.values-strip h2 {
  
  margin: 0;
}
.values-strip .eyebrow {
  margin: 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
  margin-top: 45px;
}
.values-grid article {
  border-left: 1px solid var(--border);
  padding-left: 20px;
}
.values-grid article > span {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--accent-ink);
}
.values-grid h3 {
  
  margin: 15px 0 10px;
}
.values-grid p {
  font-size: 11px;
  line-height: 1.9;
  color: var(--text-secondary-readable);
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 25px;
  margin-top: 60px;
}
.process-grid article {
  position: relative;
  border-top: 1px solid var(--border);
  padding-top: 23px;
}
.process-grid article::before {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 0;
  top: -3px;
  background: var(--accent-ink);
  border-radius: 50%;
}
.step-number {
  font-family: var(--serif);
  font-size: 35px;
  color: var(--accent-ink);
  display: block;
  margin-bottom: 22px;
}
.process-grid h3 {
  
  font-weight: 500;
}
.process-grid p {
  font-size: 11px;
  color: var(--text-secondary-readable);
  line-height: 1.85;
}
/* ==========================================================================
   Reviews
   The review card and its controls.
   ========================================================================== */
.testimonials {
  background: var(--background);
}
.testimonial-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 110px;
}
.small-note {
  font-size: 11px;
  color: var(--text-secondary-readable);
  line-height: 1.85;
}
.testimonial-layout .small-note {
  margin-top: 32px;
}
.testimonial-slider {
  position: relative;
  padding-top: 10px;
}
.quote-mark {
  position: absolute;
  right: 0;
  top: -45px;
  font-family: var(--serif);
  font-size: 170px;
  line-height: 1;
  color: var(--border);
}
.rating {
  color: var(--accent-ink);
  font-size: 12px;
  letter-spacing: 3px;
  margin-bottom: 25px;
  position: relative;
}
.rating span {
  font-size: 7px;
  color: var(--text-secondary-readable);
  letter-spacing: 1px;
  margin-left: 15px;
}
/* ==========================================================================
   Element defaults
   Bare tag styling before any component takes over.
   ========================================================================== */
blockquote {
  font-family: var(--sans);
  font-style: normal;
  font-size: var(--font-body, 16px);
  line-height: 1.75;
  letter-spacing: normal;
  margin: 0 0 16px;
  position: relative;
  min-height: 0;
}
.testimonial-person {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
}
/* ==========================================================================
   Reviews
   The review card and its controls.
   ========================================================================== */
.testimonial-person span {
  display: block;
  font-size: 9px;
  color: var(--text-secondary-readable);
  margin-top: 3px;
  font-weight: 400;
  letter-spacing: 0;
}
.slider-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
}
.slider-controls > div:last-child {
  display: flex;
  gap: 8px;
}
.slider-controls .icon-button {
  border: 1px solid var(--border);
}
.testimonial-prev .icon {
  transform: none;
}
.slider-dots {
  display: flex;
  gap: 0;
}
.slider-dot {
  width: 28px;
  height: 44px;
  position: relative;
  padding: 0;
}
.slider-dot::after {
  content: "";
  width: 5px;
  height: 5px;
  position: absolute;
  left: 11px;
  top: 19px;
  border-radius: 50%;
  background: var(--text-secondary-readable);
  opacity: 0.4;
}
.slider-dot.active::after {
  background: var(--accent-ink);
  opacity: 1;
  box-shadow:
    0 0 0 4px var(--surface-soft),
    0 0 0 5px var(--accent-ink);
}
/* ==========================================================================
   Calls to action
   Closing CTA blocks and the floating WhatsApp button.
   ========================================================================== */
.final-cta {
  background: var(--background);
  color: var(--text);
  padding: 85px max(64px, calc((100vw - 1440px) / 2));
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 85px;
  align-items: center;
}
.final-cta .eyebrow {
  color: #bcbcaa;
  font-size: 9px;
}
.final-cta h2 {
  
  margin-bottom: 0;
}
.final-cta h2 em {
  color: #c9b494;
}
.cta-actions {
  max-width: 360px;
}
.cta-actions > p {
  font-size: 12px;
  color: #c7c9bc;
  margin-bottom: 25px;
}
.cta-actions .text-link {
  font-size: 10px;
  color: #dfdfd2;
  gap: 10px;
  margin-top: 14px;
}
.cta-actions .text-link::after {
  display: none;
}
/* ==========================================================================
   Footer
   Footer grid, link columns and the bottom row.
   ========================================================================== */
.site-footer {
  padding: 70px max(64px, calc((100vw - 1440px) / 2)) 25px;
  background: var(--footer-bg, #f6f1e8);
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 0.8fr 1fr 1.3fr;
  gap: 50px;
}
/* The tagline sits under the wordmark, so it reads one step quieter than it:
   wordmark 14px > tagline 13px > footer details 12px. It was 21px here and
   22px on phones, which made it the loudest thing in the footer and the only
   text that grew as the screen got smaller. The negative tracking went with
   it - that was tuned for display sizes and closes the letters up too much
   at this scale. */
/* The tagline is pegged to the column headings (Explore / Our services /
   Policies), which use --font-eyebrow, and sits exactly 10% above them.
   Deriving it with calc rather than hard-coding a value means the 10% gap
   holds at every width on its own, including inside the fluid clamp range. */
/* The tagline is the studio's brand statement, so it has to read as the
   largest line in the footer. A strict 10% over the column links worked out
   at roughly one pixel (13.20 against 12.00), which is below what the eye
   can pick up, so the line looked unchanged. Using the body token puts it
   about a third above the links, details and copyright at every width -
   visibly the bigger line, without returning to the old shouty 21px. */
.footer-brand > p {
  font-family: var(--serif);
  font-size: var(--font-body);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  margin-top: 25px;
  color: var(--text-secondary-readable);
}
.socials {
  display: flex;
  gap: 7px;
  margin-left: -8px;
}
.socials a {
  width: 36px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.socials a:hover {
  color: var(--accent-ink);
}
.socials .icon {
  width: 16px;
  height: 16px;
}
.footer-grid h3 {
  font-family: var(--sans);
  
  
  text-transform: uppercase;
  font-weight: 600;
  margin: 5px 0 25px;
}
.footer-grid > div:not(:first-child) > a:not(.text-link),
.footer-grid > div > span {
  display: block;
  font-size: 11px;
  color: var(--text-secondary-readable);
  padding: 5px 0;
  min-height: 31px;
  overflow-wrap: anywhere;
}
.footer-grid a:hover {
  color: var(--accent-ink);
}
.footer-bottom {
  margin-top: 60px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 30px;
  align-items: center;
}
.footer-bottom p {
  margin: 0;
  font-size: 9px;
  color: var(--text-secondary-readable);
}
.footer-bottom > div {
  display: flex;
  gap: 22px;
}
.footer-bottom a {
  font-size: 9px;
  min-height: 40px;
  display: flex;
  align-items: center;
}
.ownership {
  font-size: 8px;
  color: var(--text-secondary-readable);
  max-width: 930px;
  margin-top: 15px;
  line-height: 1.8;
}
.demo-note {
  font-size: 8px;
  color: var(--text-secondary-readable);
  padding-top: 15px;
  border-top: 1px solid var(--border);
  margin-top: 20px;
}
.demo-note > span {
  font-size: 7px;
  letter-spacing: 1px;
  font-weight: 600;
  margin-right: 10px;
}
.demo-note > a {
  text-decoration: underline;
}
.demo-note .icon {
  width: 11px;
  height: 11px;
}
/* ==========================================================================
   Calls to action
   Closing CTA blocks and the floating WhatsApp button.
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3d4c36;
  color: #fff;
  width: 50px;
  height: 50px;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  z-index: 45;
  box-shadow: 0 3px 15px #0002;
  transition:
    transform var(--ease),
    background var(--ease);
}
.whatsapp-float > .icon {
  width: 25px;
  height: 25px;
}
.whatsapp-float > span {
  position: absolute;
  right: 60px;
  white-space: nowrap;
  background: var(--primary);
  color: var(--background);
  padding: 5px 15px;
  font-size: 11px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease);
}
.whatsapp-float:hover {
  transform: translateY(-3px);
  background: #273821;
}
.whatsapp-float:hover > span,
.whatsapp-float:focus-visible > span {
  opacity: 1;
}
/* ==========================================================================
   Base and reset
   Element defaults that everything else builds on.
   ========================================================================== */
body.modal-open .whatsapp-float {
  visibility: hidden;
}
.toast {
  position: fixed;
  bottom: 85px;
  right: 24px;
  background: var(--primary);
  color: var(--background);
  padding: 16px 23px;
  max-width: min(390px, calc(100vw - 48px));
  box-shadow: var(--shadow);
  z-index: 120;
  font-size: 12px;
  border: 1px solid var(--border);
}
/* ==========================================================================
   Legal pages
   Policy layout, document index and policy body text.
   ========================================================================== */
.page-heading {
  padding-top: 72px;
  padding-bottom: 60px;
}
.page-heading-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.section-number {
  font-size: 8px;
  letter-spacing: 1.5px;
  color: var(--text-secondary-readable);
}
.page-heading h1 {
  margin-bottom: 25px;
  max-width: 1000px;
}
.page-intro {
  max-width: 510px;
  color: var(--text-secondary-readable);
  font-size: 14px;
  line-height: 1.9;
}
.wide-editorial {
  height: 570px;
  position: relative;
}
.wide-editorial img {
  object-position: center 62%;
}
.wide-editorial > span {
  position: absolute;
  bottom: 24px;
  left: 28px;
  font-size: 9px;
  letter-spacing: 2px;
  color: #fff;
  background: #252b2380;
  padding: 8px 12px;
}
.editorial-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
}
.editorial-split > div > p:not(.eyebrow) {
  font-size: 14px;
  color: var(--text-secondary-readable);
  line-height: 1.9;
}
.editorial-split .lead,
.lead {
  font-family: var(--serif);
  font-size: var(--font-lead, 17px);
  line-height: 1.6;
  color: var(--text);
  letter-spacing: -0.3px;
}
.founder-section {
  background: var(--background);
}
.founder-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 100px;
  align-items: center;
}
.portrait-placeholder {
  min-height: 530px;
  background: var(--background);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--accent-ink);
}
.portrait-placeholder svg {
  height: 340px;
  width: 80%;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.8;
  opacity: 0.5;
}
.portrait-placeholder > span {
  text-align: center;
  font-size: 8px;
  letter-spacing: 1.5px;
  line-height: 2;
}

.founder-role {
  font-size: 10px;
  color: var(--text-secondary-readable);
  letter-spacing: 1.4px;
}
.founder-copy > p:not(.eyebrow):not(.lead):not(.founder-role) {
  font-size: 12px;
  color: var(--text-secondary-readable);
}
.founder-copy .socials {
  margin: 20px 0 18px -8px;
}
/* ==========================================================================
   Introduction and values
   Studio positioning, the highlights strip and the values statements.
   ========================================================================== */
.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 55px 60px;
}
.philosophy-grid article {
  border-top: 1px solid var(--border);
  padding-top: 25px;
}
.philosophy-grid h3 {
  font-family: var(--serif);
  
  margin-top: 20px;
}
.philosophy-grid p {
  font-size: 13px;
  color: var(--text-secondary-readable);
}
.values-banner {
  text-align: center;
  border-top: 1px solid var(--border);
  padding: 65px 0 90px;
}
.values-banner > p:last-child {
  font-family: var(--serif);
}
.values-banner em {
  color: var(--accent-ink);
}
/* ==========================================================================
   Services
   Service cards, the service index and the detail sections.
   ========================================================================== */
.service-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--border);
}
.service-jump > a {
  font-size: 11px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary-readable);
}
.service-jump > a:hover {
  color: var(--accent-ink);
}
.service-jump .icon {
  width: 13px;
  height: 13px;
}
.service-detail {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
  padding: 70px 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 95px;
}
.service-detail:nth-child(even) .service-detail-image {
  order: 2;
}
.service-detail:nth-child(even) .service-detail-copy {
  order: 1;
  padding-left: 35px;
}
.service-detail-image {
  height: 480px;
}
.service-detail-copy {
  padding-right: 25px;
}

.service-detail-copy > p:not(.eyebrow) {
  color: var(--text-secondary-readable);
  font-size: 14px;
}
.benefits {
  list-style: none;
  padding: 0;
  margin: 25px 0;
}
.benefits li {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.benefits .icon {
  width: 16px;
  height: 16px;
  color: var(--accent-ink);
}
.scope-note {
  padding: 35px 0;
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 40px;
}
.scope-note .eyebrow {
  margin: 0;
}
.scope-note > p:last-child {
  font-size: 12px;
  color: var(--text-secondary-readable);
}
/* ==========================================================================
   Gallery and lightbox
   Photo and video grids, filters and the full-screen viewer.
   ========================================================================== */
.gallery-section {
  padding-bottom: 60px;
}
.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 15px 0;
  margin-bottom: 35px;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter-button {
  padding: 9px 18px;
  min-height: 42px;
  border: 1px solid transparent;
  color: var(--text-secondary-readable);
  font-size: 11px;
  transition:
    background var(--ease),
    color var(--ease);
}
.filter-button:hover {
  border-color: var(--border);
}
.filter-button.active {
  background: var(--primary);
  color: var(--background);
}
#gallery-count {
  font-size: 10px;
  white-space: nowrap;
  color: var(--text-secondary-readable);
}
.gallery-section .collection-note {
  margin: 0 0 32px;
  font-size: 9px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 55px 40px;
  align-items: start;
}
.gallery-grid .project-card:nth-child(even) {
  padding-top: 80px;
}
.gallery-grid .project-card:nth-child(3n) .project-image {
  aspect-ratio: 1.08;
}
.gallery-grid .project-card:nth-child(4n) .project-image {
  aspect-ratio: 0.96;
}
.gallery-grid.filtered .project-card {
  padding-top: 0;
}
.gallery-grid.filtered .project-image {
  aspect-ratio: 1.3;
}
.gallery-end {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: center;
  margin-top: 65px;
}
.gallery-end p {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--text-secondary-readable);
  margin: 0;
}
.lightbox {
  max-width: calc(100vw - 50px);
  width: 1350px;
  max-height: calc(100dvh - 50px);
  padding: 0;
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--text);
  overflow: auto;
}
.lightbox-shell {
  padding: 20px 28px 28px;
}
.lightbox-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lightbox-top .eyebrow {
  margin: 0;
  font-size: 9px;
}
.lightbox-body {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 35px;
}
.lightbox-visual {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-soft);
}
#lightbox-image {
  object-fit: contain;
  height: min(64vh, 650px);
  width: 100%;
}
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--background);
  border: 1px solid var(--border);
}
.lightbox-prev {
  left: 12px;
}
.lightbox-prev .icon {
  transform: rotate(180deg);
}
.lightbox-next {
  right: 12px;
}
.lightbox-details {
  padding: 20px 0 0;
}

.lightbox-details .eyebrow {
  margin-bottom: 15px;
}
.lightbox-details > p:not(.eyebrow) {
  font-size: 12px;
  color: var(--text-secondary-readable);
}
.lightbox-details dl {
  margin: 22px 0;
}
.lightbox-details dl > div {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  font-size: 10px;
}
.lightbox-details dt {
  color: var(--text-secondary-readable);
}
.lightbox-details dd {
  margin: 0;
  text-align: right;
}
.lightbox-details .button {
  font-size: 10px;
  gap: 16px;
  padding: 13px 16px;
}
.share-row {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 15px;
}
.share-row > span {
  font-size: 10px;
  color: var(--text-secondary-readable);
  margin-right: 12px;
}
.share-row .icon {
  height: 16px;
  width: 16px;
}
/* ==========================================================================
   Forms and contact
   Enquiry form fields, validation states and the contact page blocks.
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.3fr;
  gap: 110px;
  padding: 20px 0 80px;
}
.contact-layout aside > p:not(.eyebrow) {
  font-size: 13px;
  color: var(--text-secondary-readable);
  max-width: 340px;
}
.contact-methods {
  margin: 35px 0 20px;
}
.contact-methods > div {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 26px;
}
.contact-methods > div > .icon {
  width: 19px;
  height: 19px;
  color: var(--accent-ink);
  margin-top: 4px;
}
.contact-methods h3 {
  font-family: var(--sans);
  
  font-weight: 500;
  margin-bottom: 5px;
}
.contact-methods a,
.contact-methods span {
  font-size: 12px;
  color: var(--text-secondary-readable);
  overflow-wrap: anywhere;
}
.contact-methods small {
  display: block;
  font-size: 10px;
  color: var(--text-secondary-readable);
  margin-top: 4px;
}
.contact-layout aside > .small-note {
  font-size: 10px !important;
  margin-top: 25px;
}
.contact-photo {
  height: 255px;
  margin-top: 35px;
  max-width: 350px;
}
.contact-photo img {
  object-position: center 60%;
}
.form-panel {
  background: var(--surface);
  padding: 45px;
  border: 1px solid var(--border);
}
.form-heading h2 {
  
  
  margin-bottom: 12px;
}
.form-heading p {
  font-size: 12px;
  color: var(--text-secondary-readable);
}
.form-notice {
  padding: 15px 18px;
  background: var(--surface-soft);
  margin: 25px 0;
  border-left: 2px solid var(--accent-ink);
}
.form-notice .eyebrow {
  font-size: 8px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 6px;
}
.form-notice p {
  font-size: 10px;
  line-height: 1.8;
  color: var(--text-secondary-readable);
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 23px;
}
.form-field {
  min-width: 0;
}
.form-field.full {
  grid-column: 1/-1;
}
.form-field label {
  font-size: 10px;
  display: block;
  margin-bottom: 7px;
  font-weight: 500;
}
.form-field label span {
  color: var(--text-secondary-readable);
  font-weight: 400;
}
.form-field input,
.form-field select,
.form-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 1px;
  padding: 12px 13px;
  background: var(--background);
  color: var(--text);
  font-size: 12px;
  min-height: 46px;
  outline-offset: 2px;
  transition: border-color var(--ease);
}
.form-field select {
  padding-right: 25px;
}
.form-field textarea {
  resize: vertical;
  min-height: 135px;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--text-secondary-readable);
  opacity: 0.75;
}
.form-field [aria-invalid="true"] {
  border-color: var(--danger);
}
.field-error {
  display: block;
  min-height: 15px;
  font-size: 10px;
  color: var(--danger);
  margin-top: 4px;
}
.form-privacy {
  font-size: 10px;
  color: var(--text-secondary-readable);
  margin: 5px 0 22px;
}
.form-privacy a {
  text-decoration: underline;
}
.form-submit {
  width: 100%;
  justify-content: space-between;
}
.form-status {
  font-size: 12px;
  color: var(--success);
  margin-top: 20px;
}
.form-status.error {
  color: var(--danger);
}
#enquiry-ready {
  border-top: 1px solid var(--border);
  padding-top: 20px;
}
#enquiry-ready .button {
  font-size: 10px;
  padding: 12px 16px;
  gap: 14px;
}
#enquiry-ready .text-link {
  font-size: 10px;
  margin: 10px 0;
}
#enquiry-ready .small-note {
  margin-top: 10px;
}
.faq-section {
  border-top: 1px solid var(--border);
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 90px;
}
.faq-list details {
  border-bottom: 1px solid var(--border);
}
.faq-list details:first-child {
  border-top: 1px solid var(--border);
}
.faq-list summary {
  padding: 23px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13px;
  cursor: pointer;
  list-style: none;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary > span {
  font-size: 21px;
  font-weight: 300;
  color: var(--accent-ink);
  transition: transform var(--ease);
}
.faq-list details[open] summary > span {
  transform: rotate(45deg);
}
.faq-list details > p {
  font-size: 12px;
  color: var(--text-secondary-readable);
  padding-bottom: 25px;
}
/* ==========================================================================
   Legal pages
   Policy layout, document index and policy body text.
   ========================================================================== */
.legal-layout {
  display: grid;
  grid-template-columns: 1fr 2.5fr;
  gap: 90px;
  padding-bottom: 100px;
}
.legal-nav {
  align-self: start;
  position: sticky;
  top: 130px;
  border-top: 1px solid var(--border);
  padding-top: 25px;
}
.legal-nav > a {
  display: block;
  font-size: 11px;
  color: var(--text-secondary-readable);
  padding: 8px 0;
}
.legal-nav > a:hover {
  color: var(--accent-ink);
}
.legal-alert {
  padding: 15px 20px;
  background: var(--surface-soft);
  font-size: 10px;
  border-left: 2px solid var(--accent-ink);
}
.legal-content section {
  margin-top: 40px;
  scroll-margin-top: 130px;
}
.legal-content h2 {
  
  
  margin-bottom: 15px;
}
.legal-content section > p {
  font-size: 13px;
  color: var(--text-secondary-readable);
  line-height: 2;
  overflow-wrap: anywhere;
}