/*
 * TRADEWORKS / SHARED STYLES
 * Edit brand tokens in :root first. Base styles come before responsive rules.
 * Later named sections contain the approved tile layout and component refinements.
 * Rule order is intentional: later refinements override earlier base declarations.
 */
/* 01 / Locally hosted fonts */
@font-face {
  font-family: Manrope;
  src: url('assets/fonts/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap
}

@font-face {
  font-family: Inter;
  src: url('assets/fonts/inter-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap
}

/* 02 / Brand colours and shared spacing */
:root {
  /* One source for all uppercase section labels. */
  --section-label-size: 15px;
  --ink: #171c1b;
  --lime: #d9f56b;
  --paper: #f3f2ec;
  --muted: #b9bfba;
  --line: rgba(23,28,27,.2);
  --gutter: clamp(24px,5.2vw,88px)
}

/* 03 / Base elements, typography and focus states */
* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 16px/1.65 Inter,Arial,sans-serif
}

h1,h2,h3,p {
  margin: 0
}

h1,h2,h3,.brand,.button {
  font-family: Manrope,Arial,sans-serif
}

h1,h2 {
  font-weight: 500;
  letter-spacing: -.055em;
  line-height: 1.08
}

h2 {
  font-size: clamp(36px,4.2vw,66px)
}

h3 {
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.25
}

a {
  color: inherit;
  text-decoration: none
}

a,button,input,textarea,select {
  -webkit-tap-highlight-color: transparent
}

button,input,textarea,select {
  font: inherit
}

button,a,input,textarea,select {
  touch-action: manipulation
}

button {
  cursor: pointer
}

button:disabled {
  cursor: wait
}

a:focus-visible,button:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 6px
}

.light a:focus-visible,.light button:focus-visible {
  outline-color: var(--ink)
}

input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px
}

.skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  padding: 12px 20px;
  background: var(--lime);
  color: var(--ink);
  z-index: 20
}

.skip-link:focus {
  top: 15px
}

/* 04 / Site header and mobile navigation */
.site-header {
  height: 112px;
  margin: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #3a403d;
  position: relative;
  z-index: 5
}

.brand {
  display: inline-flex;
  align-items: center
}

.brand img {
  width: 226px;
  height: auto
}

.site-header nav {
  display: flex;
  gap: 42px;
  align-items: center;
  font-size: 13px
}

.site-header nav>a:not(.nav-cta):hover {
  color: var(--lime)
}

.nav-cta {
  border: 1px solid #616860;
  border-radius: 3px;
  padding: 12px 20px;
  display: flex;
  gap: 34px;
  align-items: center
}

.nav-cta:hover {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--ink)
}

.menu-toggle {
  display: none
}

/* 05 / Homepage hero */
.hero {
  padding: 75px var(--gutter) 0;
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  overflow: hidden
}

.eyebrow,.section-label {
  font-size: var(--section-label-size);
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase
}

.hero .eyebrow {
  display: flex;
  gap: 11px;
  align-items: center;
  letter-spacing: .12em
}

.signal {
  width: 7px;
  height: 7px;
  display: inline-block;
  background: var(--lime);
  border-radius: 50%;
  flex-shrink: 0
}

.hero h1 {
  font-size: clamp(54px,6.2vw,96px);
  margin: 29px 0 25px;
  position: relative;
  z-index: 1
}

.hero h1 span {
  color: var(--lime)
}

.hero-intro {
  color: #c1c6c1;
  line-height: 1.65;
  font-size: 15px
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 18px 23px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: background .2s,transform .2s
}

.button:hover {
  transform: translateY(-2px)
}

.button span {
  font-size: 21px;
  line-height: 1
}

.lime {
  background: var(--lime);
  color: var(--ink)
}

.lime:hover {
  background: #e5ff8d
}

.hero .button {
  margin-top: 30px
}

.hero-art {
  position: relative;
  align-self: center;
  margin: -40px -20px 0 0
}

.hero-art>img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 580px;
  object-fit: contain
}

.art-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font: 9px Inter,sans-serif;
  letter-spacing: .1em;
  color: #939c94;
  position: absolute;
  bottom: 12%;
  left: 9%;
  right: 6%
}

.hero-bottom {
  grid-column: 1/-1;
  border-top: 1px solid #3a403d;
  margin-top: 65px;
  padding: 24px 0;
  display: flex;
  justify-content: space-between;
  color: #b9bfba;
  font-size: 11px
}

.hero-bottom a {
  display: flex;
  gap: 32px
}

.hero-bottom a:hover {
  color: var(--lime)
}

.light {
  background: var(--paper);
  color: var(--ink)
}

/* 06 / Homepage introduction */
.intro {
  padding: 110px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px
}

.section-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px
}

.small-cross {
  font-size: 53px;
  font-weight: 400;
  line-height: 1
}

.serif {
  font: italic 1.07em Georgia,serif;
  letter-spacing: -.06em
}

.intro-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;
  margin-top: 35px;
  color: #555e57;
  font-size: 14px
}

/* 07 / Homepage services */
.expertise {
  padding: 0 var(--gutter) 100px
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 75px;
  margin-bottom: 52px;
  gap: 40px
}

.section-heading h2 {
  margin-top: 24px
}

.section-heading>p {
  font-size: 13px;
  color: #555e57;
  padding-bottom: 6px
}

.service {
  padding: 34px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 2.15fr 40px;
  gap: 40px
}

.service:last-child {
  border-bottom: 1px solid var(--line)
}

.service-number {
  font: 13px Manrope,sans-serif;
  padding-top: 8px;
  color: #636b63
}

.service p {
  max-width: 570px;
  color: #555e57;
  font-size: 14px;
  margin-top: 15px
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  list-style: none;
  margin: 22px 0 2px;
  padding: 0
}

.tags li {
  border: 1px solid #c8cdc0;
  padding: 4px 11px;
  border-radius: 2px;
  font-size: 10px
}

.service-icon {
  font-size: 29px
}

/* 08 / Approach and process */
.approach {
  padding: 85px var(--gutter) 95px;
  background: var(--ink) url('assets/grid.svg') repeat
}

.approach-top {
  display: flex;
  justify-content: space-between;
  align-items: center
}

.outline-mark {
  color: var(--lime);
  font-size: 72px;
  line-height: 1
}

.approach-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 60px;
  align-items: end;
  margin-top: 20px
}

.approach-heading h2 {
  font-size: clamp(34px,4vw,60px)
}

.approach-heading h2 span {
  color: #a8b0a7
}

.approach-heading p {
  color: #b9bfba;
  font-size: 13px;
  max-width: 340px
}

.steps {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 30px;
  list-style: none;
  margin: 65px 0 0;
  padding: 0
}

.steps li {
  border-top: 1px solid #626b52;
  padding-top: 20px
}

.steps li>span {
  font-size: var(--section-label-size);
  letter-spacing: .12em;
  color: var(--lime)
}

.steps h3 {
  font-size: 19px;
  margin: 24px 0 14px;
  max-width: 200px
}

.steps p {
  font-size: 12px;
  color: #b9bfba;
  max-width: 240px
}

/* 09 / Standards and icons */
.principles {
  padding: 100px var(--gutter);
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 32px;
  margin-top: 48px
}

.principle-grid article>span {
  font-size: 31px;
  display: block;
  margin-bottom: 22px
}

.principle-grid h3 {
  font-size: 18px
}

.principle-grid p {
  font-size: 12px;
  color: #555e57;
  margin-top: 13px
}

/* 10 / Contact form and confirmation */
.contact {
  padding: 0 var(--gutter) 110px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 100px
}

.contact-copy,form {
  border-top: 1px solid var(--line);
  padding-top: 55px
}

.contact h2 {
  font-size: clamp(50px,5.8vw,86px);
  margin-top: 28px
}

.contact-copy>p:not(.eyebrow) {
  max-width: 300px;
  color: #555e57;
  margin-top: 24px;
  font-size: var(--section-label-size)
}

.contact-note {
  font-size: 11px;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 10px
}

.contact-note .signal {
  background: #556c2e
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px
}

.field {
  margin-bottom: 25px
}

label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 9px
}

label span {
  font-size: 10px;
  color: #646d65;
  font-weight: 400
}

input,select,textarea {
  width: 100%;
  border: 1px solid #b6beb0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  padding: 12px;
  font-size: 13px;
  min-height: 46px
}

textarea {
  resize: vertical;
  display: block
}

::placeholder {
  color: #687266;
  opacity: 1
}

select {
  padding-right: 30px
}

.dark {
  color: var(--paper);
  background: var(--ink)
}

.dark:hover {
  background: #333e34
}

.privacy-note {
  font-size: 10px;
  color: #5d665d;
  margin-bottom: 20px;
  max-width: 390px
}

.form-notice {
  font-size: 11px;
  padding: 12px 14px;
  background: #e5e7dc;
  border-left: 2px solid #687c37;
  margin-bottom: 24px
}

.honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}

#form-status {
  font-size: 12px;
  margin-top: 16px
}

/* 11 / Footer */
footer {
  padding: 50px var(--gutter) 20px
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px
}

.footer-top p {
  font-size: 11px;
  color: #b9bfba
}

.footer-top>a:last-child {
  font-size: 11px
}

.footer-top>a:last-child:hover {
  color: var(--lime)
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid #3a403d;
  display: flex;
  justify-content: space-between;
  color: #a8b0a7;
  font-size: 10px
}

/* 12 / Base responsive layouts */
@media(min-width:1600px) {
  body {
    max-width: 1800px;
    margin: auto
  }

}

@media(max-width:1000px) {
  .hero {
    grid-template-columns: 1.2fr 1fr
  }

  .hero h1 {
    font-size: clamp(52px,6.7vw,74px)
  }

  .hero-art {
    margin-right: -60px
  }

  .hero .eyebrow {
    font-size: var(--section-label-size)
  }

  .intro,.principles {
    grid-template-columns: 1fr 2.5fr
  }

  .service {
    grid-template-columns: .4fr 2.5fr 30px;
    gap: 25px
  }

  .contact {
    gap: 50px
  }

  .approach-heading {
    gap: 35px
  }

  .steps {
    gap: 20px
  }

  .intro-body {
    gap: 25px
  }

  .principle-grid {
    gap: 20px
  }

  .brand img {
    width: 200px
  }

}

@media(max-width:700px) {
  html {
    scroll-padding-top: 24px
  }

  .site-header {
    height: 83px
  }

  .brand img {
    width: 185px
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 16px;
    background: transparent;
    border: 1px solid #616860;
    border-radius: 2px;
    color: var(--paper);
    padding: 9px 13px;
    font-size: 12px
  }

  .menu-toggle span {
    font-size: 19px;
    line-height: 1
  }

  .site-header nav {
    position: absolute;
    top: 82px;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    padding: 20px var(--gutter) 28px;
    background: var(--ink);
    border-bottom: 1px solid #616860;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0
  }

  .site-header nav[data-open] {
    display: flex
  }

  .site-header nav>a {
    padding: 15px 0
  }

  .nav-cta {
    margin-top: 10px;
    justify-content: space-between;
    padding: 14px 16px
  }

  html:not(.js) .site-header nav {
    position: static;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    border: 0;
    padding: 10px 0
  }

  html:not(.js) .site-header {
    height: auto;
    flex-wrap: wrap;
    padding: 24px 0
  }

  html:not(.js) .menu-toggle {
    display: none
  }

  .hero {
    padding-top: 45px;
    grid-template-columns: 1fr
  }

  .hero .eyebrow {
    font-size: var(--section-label-size)
  }

  .hero h1 {
    font-size: clamp(46px,10.7vw,72px);
    margin-top: 28px
  }

  .hero-intro {
    font-size: 14px
  }

  .hero-art {
    margin: 20px -10px -25px;
    max-width: 420px;
    justify-self: center;
    width: 100%
  }

  .hero-art>img {
    max-height: 370px
  }

  .art-caption {
    font-size: 7px;
    bottom: 15%
  }

  .hero-bottom {
    margin-top: 20px;
    font-size: 9px;
    align-items: center;
    gap: 20px
  }

  .hero-bottom>span {
    max-width: 160px
  }

  .hero-bottom a {
    gap: 12px;
    white-space: nowrap
  }

  .intro,.principles {
    display: block;
    padding: 65px var(--gutter)
  }

  .section-label {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px
  }

  .small-cross {
    font-size: 33px
  }

  .intro h2 {
    font-size: 35px
  }

  .intro-body {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-top: 25px
  }

  .section-heading {
    padding-top: 55px;
    display: block;
    margin-bottom: 35px
  }

  .section-heading h2 {
    margin-top: 20px
  }

  .section-heading>p {
    margin-top: 22px
  }

  .expertise {
    padding-bottom: 65px
  }

  .service {
    grid-template-columns: 24px 1fr 20px;
    gap: 14px;
    padding: 29px 0
  }

  .service h3 {
    font-size: 24px
  }

  .service p {
    font-size: 13px
  }

  .service-icon {
    font-size: 23px
  }

  .tags {
    gap: 6px
  }

  .tags li {
    padding: 3px 7px;
    font-size: 9px
  }

  .approach {
    padding-top: 50px;
    padding-bottom: 60px
  }

  .outline-mark {
    font-size: 54px
  }

  .approach-heading {
    display: block;
    margin-top: 25px
  }

  .approach-heading h2 {
    font-size: 34px
  }

  .approach-heading>p {
    margin-top: 25px
  }

  .steps {
    grid-template-columns: 1fr 1fr;
    gap: 35px 24px;
    margin-top: 40px
  }

  .steps h3 {
    font-size: 18px;
    margin: 17px 0 12px
  }

  .principles h2 {
    margin-top: 24px
  }

  .principle-grid {
    grid-template-columns: 1fr;
    gap: 25px;
    margin-top: 33px
  }

  .principle-grid article {
    display: grid;
    grid-template-columns: 35px 1fr;
    column-gap: 16px
  }

  .principle-grid article>span {
    grid-row: 1/3;
    margin: 0;
    line-height: 1
  }

  .principle-grid p {
    margin-top: 8px;
    max-width: 330px
  }

  .contact {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-bottom: 65px
  }

  .contact-copy {
    padding-top: 50px
  }

  .contact h2 {
    font-size: 59px
  }

  .contact-note {
    margin-top: 25px
  }

  form {
    padding-top: 30px
  }

  .form-row {
    grid-template-columns: 1fr;
    gap: 0
  }

  .field {
    margin-bottom: 22px
  }

  .footer-top {
    flex-wrap: wrap;
    gap: 22px
  }

  .footer-top p {
    order: 3;
    flex-basis: 100%
  }

  .footer-top>a:last-child {
    margin-left: auto
  }

  .footer-bottom {
    gap: 20px;
    font-size: 9px;
    margin-top: 28px
  }

  .button {
    max-width: 100%;
    gap: 25px
  }

  .eyebrow {
    font-size: var(--section-label-size)
  }

}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  *,*::before,*::after {
    transition: none!important
  }

}

@media(max-width:700px) {
  .menu-toggle {
    min-height: 44px
  }

  input,select,textarea {
    font-size: 16px
  }

}

/* Content-led homepage additions */
.hero-intro {
  max-width: 480px
}

.service h3 {
  max-width: 620px
}

.service p+p {
  margin-top: 12px
}

.questions {
  padding: 0 var(--gutter) 95px;
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px
}

.questions>div {
  border-top: 1px solid var(--line);
  padding-top: 45px
}

.questions h2 {
  font-size: clamp(35px,3.5vw,54px);
  margin-top: 24px
}

.question-list details {
  border-bottom: 1px solid var(--line)
}

.question-list summary {
  padding: 21px 35px 21px 0;
  cursor: pointer;
  position: relative;
  list-style: none;
  font: 500 17px/1.5 Manrope,Arial,sans-serif;
  letter-spacing: -.02em
}

.question-list summary::-webkit-details-marker {
  display: none
}

.question-list summary::after {
  content: '+';
  position: absolute;
  right: 3px;
  top: 18px;
  font-size: 24px
}

.question-list details[open] summary::after {
  content: '−'
}

.question-list details p {
  font-size: 14px;
  color: #555e57;
  padding: 0 28px 24px 0;
  max-width: 680px
}

.question-list summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px
}

@media(max-width:1000px) {
  .questions {
    grid-template-columns: 1fr 2.5fr
  }

}

@media(max-width:700px) {
  .hero-intro {
    max-width: 360px
  }

  .questions {
    display: block;
    padding-bottom: 65px
  }

  .questions>div {
    padding-top: 30px
  }

  .questions>div:first-child {
    padding-bottom: 30px
  }

  .question-list summary {
    font-size: 16px
  }

  .question-list details p {
    font-size: 14px
  }

  .service h3 {
    font-size: 23px
  }

}

/* Shared service-page layouts */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 25px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid #78836b;
  padding: 10px 0 5px;
  margin-top: 15px
}

.text-link:hover {
  border-color: var(--ink)
}

.service-hero {
  padding: 28px var(--gutter) 80px
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 11px;
  color: #b9bfba;
  margin-bottom: 55px
}

.breadcrumb a:hover {
  color: var(--lime)
}

.service-hero>.eyebrow {
  color: var(--lime);
  margin-bottom: 25px
}

.service-hero h1 {
  font-size: clamp(46px,6.2vw,90px);
  max-width: 1100px
}

.service-hero h1 span {
  color: var(--lime)
}

.page-intro {
  font-size: 18px;
  color: #c1c6c1;
  max-width: 660px;
  margin-top: 30px
}

.service-hero .button {
  margin-top: 30px
}

.service-overview {
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px;
  padding: 85px var(--gutter)
}

.service-overview h2 {
  font-size: clamp(34px,3.5vw,52px);
  max-width: 800px
}

.service-overview div>p {
  font-size: 16px;
  color: #555e57;
  max-width: 700px;
  margin-top: 28px
}

.service-detail {
  padding: 0 var(--gutter) 90px
}

.service-detail>.eyebrow {
  padding-top: 55px;
  border-top: 1px solid var(--line)
}

.service-detail>h2 {
  font-size: clamp(34px,3.5vw,52px);
  margin-top: 20px
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px 65px;
  margin-top: 50px
}

.detail-grid article {
  border-top: 1px solid var(--line);
  padding-top: 22px
}

.detail-grid h3 {
  margin: 20px 0 16px;
  font-size: 25px
}

.detail-grid p {
  font-size: 15px;
  color: #555e57;
  max-width: 560px
}

.scope-section {
  padding: 85px var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px
}

.scope-section h2 {
  margin: 25px 0;
  font-size: clamp(34px,3.7vw,54px)
}

.scope-section h2 span {
  color: #b9bfba
}

.scope-section p {
  font-size: 14px;
  color: #b9bfba;
  max-width: 560px
}

.scope-section h3 {
  font-size: 23px;
  margin-bottom: 24px
}

.scope-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.scope-section li {
  border-top: 1px solid #485044;
  padding: 15px 0;
  font-size: 14px
}

.scope-section .scope-note {
  font-size: 12px
}

.service-questions {
  padding-top: 75px
}

.related {
  padding: 0 var(--gutter) 80px
}

.related h2 {
  font-size: 36px;
  padding-top: 40px;
  border-top: 1px solid var(--line)
}

.related>div {
  display: flex;
  flex-wrap: wrap;
  gap: 35px;
  margin-top: 28px
}

.related a {
  font-size: 17px;
  border-bottom: 1px solid #7c886a;
  padding: 10px 0
}

.related a span {
  margin-left: 25px
}

.page-cta {
  padding: 75px var(--gutter) 85px
}

.page-cta h2 {
  margin-top: 23px
}

.page-cta>p:not(.eyebrow) {
  color: #b9bfba;
  margin-top: 25px;
  max-width: 560px
}

.page-cta .button {
  margin-top: 35px
}

.service-directory {
  padding: 70px var(--gutter)
}

.service-directory article {
  display: grid;
  grid-template-columns: 60px 1.1fr 1fr;
  gap: 30px;
  padding: 35px 0;
  border-top: 1px solid var(--line)
}

.service-directory h2 {
  font-size: 34px
}

.service-directory h2 a {
  display: flex;
  justify-content: space-between;
  gap: 30px
}

.service-directory h2 a:hover {
  text-decoration: underline;
  text-underline-offset: 5px
}

.service-directory article>p {
  font-size: 15px;
  color: #555e57
}

@media(max-width:700px) {
  .service-hero {
    padding-bottom: 55px
  }

  .breadcrumb {
    margin-bottom: 40px;
    font-size: 10px;
    gap: 9px
  }

  .page-intro {
    font-size: 16px
  }

  .service-overview {
    display: block;
    padding: 55px var(--gutter)
  }

  .service-overview h2 {
    margin-top: 25px
  }

  .detail-grid {
    grid-template-columns: 1fr;
    gap: 30px
  }

  .detail-grid h3 {
    font-size: 23px
  }

  .service-detail {
    padding-bottom: 55px
  }

  .scope-section {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 55px var(--gutter)
  }

  .service-questions {
    padding-top: 35px
  }

  .related {
    padding-bottom: 50px
  }

  .related>div {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start
  }

  .page-cta {
    padding: 55px var(--gutter)
  }

  .service-directory {
    padding: 30px var(--gutter)
  }

  .service-directory article {
    grid-template-columns: 1fr;
    gap: 15px
  }

  .service-directory h2 {
    font-size: 30px
  }

}

/* People and experience */
.experience-intro {
  margin-top: 30px;
  padding-top: 25px;
  border-top: 1px solid var(--line)
}

.experience-intro>p {
  font-size: 14px;
  color: #555e57;
  max-width: 760px
}

.team-profile {
  padding: 0 var(--gutter) 85px;
  display: grid;
  grid-template-columns: 1fr 2.15fr;
  gap: 40px
}

.team-profile>div {
  border-top: 1px solid var(--line);
  padding-top: 45px
}

.team-profile h2 {
  margin-top: 25px;
  font-size: clamp(36px,4vw,60px)
}

.artist-name {
  font-size: 13px;
  color: #555e57;
  margin-top: 15px
}

.team-profile h3 {
  font-size: 32px;
  margin-bottom: 25px
}

.team-profile>div>p:not(.artist-name) {
  font-size: 15px;
  color: #555e57;
  margin-top: 20px;
  max-width: 700px
}

.team-profile>div>p.portfolio-context {
  font-size: 12px;
  max-width: 650px
}

.scope-section p+p {
  margin-top: 20px
}

.team-profile .text-link {
  max-width: 100%;
  overflow-wrap: anywhere
}

@media(max-width:700px) {
  .experience-intro {
    margin-top: 25px
  }

  .team-profile {
    display: block;
    padding-bottom: 55px
  }

  .team-profile>div {
    padding-top: 30px
  }

  .team-profile>div:first-child {
    padding-bottom: 30px
  }

  .team-profile h3 {
    font-size: 28px
  }

}

@keyframes scroll-enter {
  from {
    transform: translateY(26px);
    opacity: .8
  }

  to {
    transform: translateY(0);
    opacity: 1
  }

}

@media(prefers-reduced-motion:no-preference) {
  .scroll-enter {
    animation: scroll-enter .7s cubic-bezier(.2,.7,.2,1)
  }

}

@media(prefers-reduced-motion:reduce) {
  .scroll-enter {
    animation: none!important;
    transform: none!important
  }

}

/* Approved service tile layout */
.expertise .service-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px
}

.expertise .service {
  position: relative;
  grid-template-columns: 1fr;
  gap: 0;
  padding: 32px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  min-width: 0;
  align-content: start;
  background: #eceee3
}

.expertise .service:first-child {
  grid-column: 1/-1;
  background: var(--ink);
  color: var(--paper);
  padding: 42px;
  grid-template-columns: 1fr 2fr;
  column-gap: 45px
}

.expertise .service-number {
  font: 500 clamp(56px,6vw,86px)/1 Manrope,Arial,sans-serif;
  letter-spacing: -.07em;
  padding: 0 0 25px;
  color: #586748
}

.expertise .service:first-child .service-number {
  color: var(--lime);
  font-size: 110px;
  padding: 0
}

.expertise .service h3 {
  font-size: clamp(25px,2.4vw,35px);
  max-width: 600px;
  padding-right: 22px
}

.expertise .service p {
  max-width: 580px;
  font-size: 14px;
  margin-top: 20px
}

.expertise .service:first-child p {
  color: #c1c6c1;
  max-width: 690px
}

.expertise .service:first-child .tags li {
  border-color: #657354;
  color: #d2dacb
}

.expertise .service:first-child .text-link {
  border-color: #8fa169;
  color: var(--lime)
}

.expertise .service:first-child a:focus-visible {
  outline-color: var(--lime)
}

.expertise .service-icon {
  position: absolute;
  right: 29px;
  top: 29px;
  font-size: 27px
}

.expertise .service .tags {
  margin-top: 23px
}

.expertise .service .text-link {
  margin-right: 18px;
  min-height: 44px
}

/* Full-width hosting tile closes the service grid with a pale lime accent. */
.expertise .service--hosting {
  grid-column: 1/-1;
  grid-template-columns: 1fr 2fr;
  column-gap: 45px;
  padding: 42px;
  background: #e5edc9;
  border-color: #c3cfa2;
}

.expertise .service--hosting .service-number {
  font-size: 110px;
  padding: 0;
}

.expertise .service--hosting p {
  max-width: 690px;
}

@media(max-width:700px) {
  .expertise .service-list {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .expertise .service,.expertise .service:first-child,.expertise .service--hosting {
    grid-template-columns: 1fr;
    padding: 26px;
    gap: 0
  }

  .expertise .service:first-child .service-number, .expertise .service--hosting .service-number {
    font-size: 74px;
    padding-bottom: 25px
  }

  .expertise .service-number {
    font-size: 65px
  }

  .expertise .service h3 {
    font-size: 27px
  }

  .expertise .service-icon {
    top: 25px;
    right: 25px
  }

}

/* Shared visual language across the service directory, details and people. */
body {
  border-top: 4px solid var(--lime)
}

h1 {
  letter-spacing: -.035em;
  line-height: 1.13
}

h2 {
  letter-spacing: -.025em;
  line-height: 1.14
}

h3 {
  letter-spacing: -.015em;
  line-height: 1.3
}

.steps li>span {
  font-size: var(--section-label-size);
  font-weight: 600;
  letter-spacing: .12em
}

.principle-grid article>span {
  font-size: 58px;
  line-height: 1;
  margin-bottom: 26px
}

.service-directory {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px
}

.service-directory article {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 32px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: #eceee3;
  min-width: 0
}

.service-directory article>.display-number,.detail-grid article>.display-number {
  font: 500 64px/1 Manrope,Arial,sans-serif;
  letter-spacing: -.04em;
  color: #586748
}

.service-directory h2 {
  font-size: 30px
}

.service-directory h2 a {
  min-height: 44px
}

.service-directory article>p {
  margin-top: auto
}

.detail-grid {
  gap: 22px
}

.detail-grid article {
  padding: 30px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: #eceee3
}

.detail-grid h3 {
  margin-top: 25px
}

.team-profile {
  margin: 0 var(--gutter) 30px;
  padding: 36px;
  gap: 40px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: #eceee3
}

.team-profile>div {
  border-top: 0;
  padding-top: 0
}

.scope-section li {
  font-size: 15px
}

@media(max-width:700px) {
  body {
    border-top-width: 3px
  }

  h1 {
    letter-spacing: -.025em
  }

  h2 {
    letter-spacing: -.02em
  }

  .steps li>span {
    font-size: var(--section-label-size)
  }

  .principle-grid article {
    grid-template-columns: 45px 1fr
  }

  .principle-grid article>span {
    font-size: 40px;
    margin: 0
  }

  .service-directory {
    grid-template-columns: 1fr;
    gap: 16px
  }

  .service-directory article,.detail-grid article {
    padding: 26px
  }

  .service-directory article>.display-number,.detail-grid article>.display-number {
    font-size: 52px
  }

  .team-profile {
    padding: 26px;
    margin-bottom: 20px
  }

  .team-profile>div {
    padding-top: 0
  }

  .team-profile>div:first-child {
    padding-bottom: 25px
  }

}

/* Hidden state is applied only after the observer is available and observing. */
@media(prefers-reduced-motion:no-preference) {
  .reveal-pending {
    opacity: 0;
    transform: translateY(12px)
  }

  .reveal-pending.reveal-visible {
    opacity: 1;
    transform: none;
    transition: opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)
  }

}

@media(prefers-reduced-motion:reduce) {
  .reveal-pending {
    opacity: 1!important;
    transform: none!important;
    transition: none!important
  }

}

@media print {
  .reveal-pending {
    opacity: 1!important;
    transform: none!important
  }

}

.serif {
  letter-spacing: -.03em
}

/* About introduction aligned with the people cards. */
.about-intro {
  margin: 0 var(--gutter) 30px;
  padding: 36px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: #eceee3;
  grid-template-columns: 1fr 2.15fr
}

.footer-legal {
  display: flex;
  position: static;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 18px 28px;
  background: none;
  border: 0;
  padding: 22px 0 0;
  margin: 0;
  align-items: center;
  font-size: 11px;
  color: #c1c6c1
}

.footer-legal a:hover,.footer-legal button:hover {
  color: var(--lime)
}

.footer-legal button {
  color: inherit;
  background: none;
  border: 0;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  font-size: inherit;
  min-height: 44px
}

.footer-legal a {
  padding: 8px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center
}

.policy-content {
  padding: 60px var(--gutter) 80px
}

.policy-content>section {
  max-width: 840px;
  margin: 36px auto 0
}

.policy-content h2 {
  font-size: 28px;
  letter-spacing: -.02em
}

.policy-content section p {
  margin-top: 16px;
  font-size: 15px;
  color: #555e57
}

.policy-draft {
  max-width: 840px;
  margin: auto;
  padding: 16px 20px;
  border-left: 3px solid #66783a;
  background: #e6eadb;
  font-size: 13px
}

.cookie-panel {
  position: fixed;
  bottom: 24px;
  left: var(--gutter);
  right: var(--gutter);
  max-width: 1060px;
  margin: auto;
  padding: 24px 28px;
  border: 1px solid #6b785b;
  border-top: 3px solid var(--lime);
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 12px 50px #0005;
  z-index: 30
}

.cookie-panel h2 {
  font-size: 24px;
  letter-spacing: -.02em
}

.cookie-panel p {
  font-size: 13px;
  color: #c1c6c1;
  max-width: 830px;
  margin-top: 12px
}

.cookie-panel a {
  color: var(--lime);
  text-decoration: underline
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px
}

.cookie-actions button {
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid #a4b195;
  border-radius: 3px;
  background: transparent;
  color: var(--paper);
  font-weight: 600;
  font-size: 12px
}

.cookie-actions button:hover {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime)
}

.cookie-dialog {
  color: var(--ink);
  background: var(--paper);
  border: 0;
  border-top: 4px solid var(--lime);
  border-radius: 6px;
  padding: 30px;
  max-width: 560px;
  width: calc(100% - 40px);
  max-height: 85vh;
  overflow: auto
}

.cookie-dialog::backdrop {
  background: #0009
}

.cookie-dialog h2 {
  font-size: 29px
}

.cookie-dialog p {
  font-size: 13px;
  margin: 16px 0;
  color: #555e57
}

.cookie-dialog label {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 14px;
  padding: 17px 0;
  border-top: 1px solid var(--line)
}

.cookie-dialog input {
  width: 20px;
  min-height: 20px;
  height: 20px;
  margin: 3px 0 0;
  accent-color: #4d6320;
  flex-shrink: 0
}

.cookie-dialog label span {
  font-size: 13px;
  color: var(--ink)
}

.cookie-dialog .cookie-actions button {
  color: var(--ink);
  border-color: #6a765d
}

.cookie-dialog .cookie-actions button:hover {
  background: var(--ink);
  color: var(--paper)
}

.cookie-dialog a {
  color: var(--ink);
  text-decoration: underline
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap
}

[hidden] {
  display: none!important
}

@media(max-width:700px) {
  .about-intro {
    padding: 26px;
    margin-bottom: 20px
  }

  .cookie-panel {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 20px;
    max-height: 65vh;
    overflow: auto
  }

  .cookie-panel h2 {
    font-size: 22px
  }

  .cookie-actions {
    gap: 10px
  }

  .cookie-actions button {
    flex: 1 1 140px
  }

  .cookie-dialog {
    padding: 24px
  }

  .footer-legal {
    gap: 8px 22px
  }

  .policy-content {
    padding-top: 40px
  }

}

.callback-request {
  margin-bottom: 25px
}

.callback-toggle {
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  min-height: 44px
}

.callback-toggle input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  accent-color: #4d6320;
  flex-shrink: 0;
  margin: 0
}

.callback-toggle span {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink)
}

.callback-request>p {
  font-size: 11px;
  color: #555e57;
  margin: 0 0 18px;
  max-width: 500px
}

.callback-request .field {
  margin-bottom: 0
}

.enquiry-success {
  padding: 35px;
  border: 1px solid #acb998;
  border-top: 4px solid #6a8035;
  background: #e6eadb;
  align-self: start;
  margin-top: 55px
}

.enquiry-success>span {
  font-size: 38px;
  color: #4d6320
}

.enquiry-success h3 {
  font-size: 29px;
  margin: 12px 0 18px
}

.enquiry-success p {
  font-size: 14px;
  color: #414d3b;
  margin-top: 16px
}

.enquiry-success button {
  background: none;
  color: var(--ink);
  border-top: 0;
  border-left: 0;
  border-right: 0;
  cursor: pointer;
  padding: 12px 0
}

.enquiry-success:focus {
  outline: 2px solid var(--ink);
  outline-offset: 5px
}

/* About: consistent labels and a light collaboration panel before the dark CTA. */
.about-intro>.eyebrow,.team-profile>div>.eyebrow {
  font-size: var(--section-label-size);
  font-weight: 500;
  line-height: 1.65;
  letter-spacing: .12em;
  color: #555e57;
  margin: 0
}

.about-collaboration {
  margin: 0 var(--gutter) 30px;
  padding: 36px;
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  grid-template-columns: 1fr 2.15fr;
  gap: 40px
}

.about-collaboration h2 {
  font-size: clamp(36px,4vw,60px)
}

.about-collaboration h2 span,.about-collaboration p {
  color: #555e57
}

.about-collaboration .text-link {
  color: var(--ink)
}

.about-collaboration a:focus-visible {
  outline-color: var(--ink)
}

.about-collaboration+.page-cta {
  border-top: 1px solid #53613e
}

@media(max-width:700px) {
  .about-collaboration {
    grid-template-columns: 1fr;
    padding: 26px;
    margin-bottom: 20px;
    gap: 28px
  }

  .about-intro>.eyebrow,.team-profile>div>.eyebrow {
    font-size: var(--section-label-size)
  }

}

/* Form preview: reCAPTCHA is not loaded until the live form is configured. */
.recaptcha-placeholder {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px dashed #9aa88a;
  background: #e8ebdf;
  margin: 0 0 20px
}

.recaptcha-placeholder .signal {
  margin-top: 6px;
  background: #687e3e
}

.recaptcha-placeholder p {
  font-size: 12px;
  line-height: 1.6
}

.recaptcha-placeholder p span {
  color: #555e57;
  font-size: 11px
}

/* Projects: real client identity presented typographically, not as a site mockup. */
.projects-grid {
  padding: 65px var(--gutter) 80px;
}

.project-card {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  overflow: hidden;
}

/* Alternate desktop panels while preserving identity-first reading order on mobile. */
@media(min-width: 701px) {
  .project-card:nth-child(even) {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .project-card:nth-child(even) .project-identity {
    grid-column: 2;
    grid-row: 1;
  }

  .project-card:nth-child(even) .project-card-copy {
    grid-column: 1;
    grid-row: 1;
  }

}

.project-identity {
  padding: 45px;
  background: var(--ink);
  color: var(--paper);
  border-top: 4px solid var(--lime);
}

.project-identity>.eyebrow {
  color: var(--lime);
}

.project-identity h2 {
  font-size: clamp(35px,4vw,60px);
  margin: 55px 0 24px;
}

.project-identity>p {
  font-size: 13px;
  color: #b9bfba;
}

.project-domain {
  display: block;
  margin-top: 30px;
  color: var(--lime);
  font-size: 12px;
  letter-spacing: .06em;
}

.project-card-copy {
  padding: 45px;
  background: #eceee3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.project-card-copy h3 {
  font-size: 32px;
  margin: 25px 0 20px;
}

.project-card-copy>p:not(.eyebrow) {
  font-size: var(--section-label-size);
  color: #555e57;
  max-width: 540px;
}

.project-card-copy .text-link {
  margin-top: 30px;
}

.project-facts {
  padding: 45px var(--gutter);
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 30px;
  border-bottom: 1px solid #c5cbbd;
}

.project-facts p {
  font: 500 16px/1.5 Manrope,Arial,sans-serif;
  margin-top: 15px;
}

.external-note {
  font-size: 11px;
  color: #b9bfba;
  margin-top: 12px;
}

@media(max-width: 700px) {
  .projects-grid {
    padding: 40px var(--gutter) 55px;
  }

  .project-card {
    grid-template-columns: 1fr;
  }

  .project-identity,.project-card-copy {
    padding: 28px;
  }

  .project-identity h2 {
    margin-top: 35px;
  }

  .project-card-copy h3 {
    font-size: 28px;
  }

  .project-facts {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding: 30px var(--gutter);
  }

  .project-facts .eyebrow {
    font-size: var(--section-label-size);
  }

  .project-facts p {
    font-size: 14px;
  }

}

/* Consistent section-label sizing across every page, including narrow screens. */
@media(max-width: 700px) {
  :root {
    --section-label-size: 13px;
  }

}

/* Medicrest: a text-only map of the confirmed group / four-home structure. */
.project-card+.project-card {
  margin-top: 48px;
}

.project-structure {
  padding: 0 var(--gutter) 80px;
}

.project-structure>h2 {
  font-size: clamp(32px,3.5vw,50px);
  margin: 24px 0 35px;
}

.structure-group {
  padding: 30px;
  border: 1px solid #c5cbbd;
  border-top: 3px solid #829451;
  background: #eceee3;
}

.structure-group h3 {
  margin-top: 18px;
  font-size: 34px;
}

.structure-group p {
  margin-top: 12px;
  color: #555e57;
  font-size: 14px;
}

.structure-homes {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
  padding: 0;
  margin: 20px 0 0;
}

.structure-homes li {
  border: 1px solid #c5cbbd;
  border-radius: 3px;
  background: #eceee3;
  padding: 24px;
  font: 500 19px/1.4 Manrope,Arial,sans-serif;
}

@media(max-width: 700px) {
  .project-card+.project-card {
    margin-top: 24px;
  }

  .project-structure {
    padding-bottom: 55px;
  }

  .structure-homes {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .structure-homes li {
    padding: 18px;
    font-size: 17px;
  }

}

/* Project credits and browsing: simple routes between the selected case studies. */
.project-back {
  margin-bottom: 32px;
}

.project-invitation, .project-credits, .project-browse {
  padding: 48px var(--gutter);
}

.project-invitation h2, .project-credits h2 {
  font-size: clamp(28px,3vw,42px);
  margin-bottom: 24px;
}

.project-invitation p {
  max-width: 680px;
  margin-bottom: 24px;
}

.project-credits h2 {
  margin-top: 24px;
}

.project-credits dl {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 28px;
}

.project-credits dt {
  color: #555e57;
  font-size: 14px;
  margin-bottom: 12px;
}

.project-credits dd {
  margin: 0;
  font-size: 18px;
}

.project-browse {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  border-top: 1px solid #c5cbbd;
}

.project-browse a {
  padding: 16px 0;
  font-size: 18px;
  text-underline-offset: 6px;
}

.project-browse a:last-child {
  text-align: right;
}

.project-browse span {
  display: block;
  font-size: 13px;
  color: #555e57;
  margin-bottom: 12px;
}

@media(max-width:700px) {
  .project-credits dl, .project-browse {
    grid-template-columns: 1fr;
  }

  .project-browse a:last-child {
    text-align: left;
  }

  .project-invitation, .project-credits, .project-browse {
    padding-top: 32px;
    padding-bottom: 32px;
  }

}

/* Approved motion: hero, introduction and process; reduced-motion rules included. */
/* Approved homepage and shared process animations. */
.thinking-map {
  width: clamp(140px,20vw,240px);
  height: auto;
  overflow: visible;
  color: #d9f56b;
}

.thinking-paths, .thinking-arrow {
  stroke: currentColor;
  stroke-width: 1.5;
}

.thinking-points {
  fill: currentColor;
}

.thinking-core {
  fill: #171c1b;
  stroke: currentColor;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.thinking-animation .steps li {
  position: relative;
}

.thinking-animation .steps li::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #d9f56b;
  transform: scaleX(1);
  transform-origin: left;
}

@media(prefers-reduced-motion: no-preference) {
  .thinking-animation.is-thinking .thinking-paths path {
    stroke-dasharray: 250;
    animation: thinking-connect 1.5s ease both;
  }

  .thinking-animation.is-thinking .thinking-paths path:nth-child(2) {
    animation-delay: .15s;
  }

  .thinking-animation.is-thinking .thinking-paths path:nth-child(3) {
    animation-delay: .3s;
  }

  .thinking-animation.is-thinking .thinking-core {
    animation: thinking-resolve 1s .8s ease both;
  }

  .thinking-animation.is-thinking .thinking-arrow {
    stroke-dasharray: 100;
    animation: thinking-connect 1s 1.1s ease both;
  }

  .thinking-animation .steps li.thinking-stage {
    animation: thinking-reveal .9s ease both;
  }

  .thinking-animation .steps li.thinking-stage::before {
    animation: thinking-line 1.1s ease both;
  }

}

@keyframes thinking-connect {
  from {
    stroke-dashoffset: 250;
    opacity: .2;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }

}

@keyframes thinking-resolve {
  from {
    transform: rotate(-45deg) scale(.7);
  }

  to {
    transform: rotate(0) scale(1);
  }

}

@keyframes thinking-reveal {
  from {
    opacity: .25;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }

}

@keyframes thinking-line {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}

@media(max-width:700px) {
  .thinking-map {
    width: 130px;
  }

}

@media print {
  .thinking-animation * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

}

.thinking-animation .reveal-pending {
  opacity: 1;
  transform: none;
}

/* Hero concept: the existing bespoke structure assembles gently, then rests. */
.hero-structure {
  display: block;
  width: 100%;
  height: auto;
}

@media(prefers-reduced-motion: no-preference) {
  .hero-structure .structure-upper {
    animation: structure-settle-top 1.8s cubic-bezier(.2,.7,.2,1) both;
  }

  .hero-structure .structure-lower {
    animation: structure-settle-bottom 1.8s .15s cubic-bezier(.2,.7,.2,1) both;
  }

  .hero-copy {
    animation: intro-arrive 1s .15s ease both;
  }

  .intro.intro-animated .small-cross {
    display: inline-block;
    animation: thinking-turn 1.6s cubic-bezier(.2,.7,.2,1) both;
  }

  .intro.intro-animated h2 {
    animation: intro-arrive .9s ease both;
  }

  .intro.intro-animated .intro-body {
    animation: intro-arrive 1s .18s ease both;
  }

}

@keyframes structure-settle-top {
  from {
    transform: translateY(-24px);
    opacity: .3;
  }

  to {
    transform: none;
    opacity: 1;
  }

}

@keyframes structure-settle-bottom {
  from {
    transform: translateY(24px);
    opacity: .3;
  }

  to {
    transform: none;
    opacity: 1;
  }

}

@keyframes thinking-turn {
  from {
    transform: rotate(-90deg) scale(.75);
  }

  to {
    transform: rotate(0) scale(1);
  }

}

@keyframes intro-arrive {
  from {
    opacity: .35;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: none;
  }

}

/* Text stays readable even if the shared reveal script is unavailable. */
.intro .reveal-pending {
  opacity: 1;
  transform: none;
}

/* Hero lighting sequence: markers, foundation, direction, then the captions.
   Each plays once; the final state is calm and all labels remain readable. */
@media(prefers-reduced-motion: no-preference) {
  .hero-structure .structure-markers {
    animation: marker-illuminate 1.3s .5s ease both;
  }

  .hero-structure .structure-foundation {
    animation: label-glow-loop 4s 1.1s ease-in-out infinite;
  }

  .hero-structure .structure-direction {
    animation: label-glow-loop 4s 2.3s ease-in-out infinite;
  }

  .hero-art .art-caption span:first-child {
    animation: caption-glow-loop 4s 3.5s ease-in-out infinite;
  }

  .hero-art .art-caption span:last-child {
    animation: caption-illuminate 1.4s 2.65s ease both;
  }

}

@keyframes marker-illuminate {
  0% {
    opacity: .6;
    filter: none;
  }

  45% {
    opacity: 1;
    filter: drop-shadow(0 0 4px #d9f56b);
  }

  100% {
    opacity: .75;
    filter: none;
  }

}

@keyframes label-illuminate {
  0% {
    fill: #96a389;
    filter: none;
  }

  45% {
    fill: #d9f56b;
    filter: drop-shadow(0 0 3px #a6bf58);
  }

  100% {
    fill: #b8c5a8;
    filter: none;
  }

}

@keyframes caption-illuminate {
  0% {
    color: #96a389;
    text-shadow: none;
  }

  45% {
    color: #d9f56b;
    text-shadow: 0 0 7px #a6bf58;
  }

  100% {
    color: #b8c5a8;
    text-shadow: none;
  }

}

/* Only the numbered labels repeat; a long quiet interval keeps the hero calm. */
@keyframes label-glow-loop {
  0%, 45%, 100% {
    fill: #96a389;
    filter: none;
  }

  18% {
    fill: #e7ff96;
    filter: drop-shadow(0 0 3px #a6bf58);
  }

  30% {
    fill: #b8c5a8;
    filter: none;
  }

}

/* Third key point joins the numbered labels at the same repeating pace. */
@keyframes caption-glow-loop {
  0%, 45%, 100% {
    color: #96a389;
    text-shadow: none;
  }

  18% {
    color: #e7ff96;
    text-shadow: 0 0 7px #a6bf58;
  }

  30% {
    color: #b8c5a8;
    text-shadow: none;
  }

}

/* Bespoke service illustrations: text remains semantic HTML; SVG is decorative. */
.service-hero-layout {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,1fr);
  gap: 35px;
  align-items: center;
}

.service-hero--illustrated h1 {
  font-size: clamp(38px,4.8vw,74px);
}

.service-graphic svg {
  display: block;
  width: 100%;
  height: auto;
}

.service-hero--illustrated .page-intro {
  max-width: 640px;
}

@media(prefers-reduced-motion:no-preference) {
  .service-graphic .concept-main {
    animation: service-art-settle 1.8s ease both;
  }

  .service-graphic .concept-secondary {
    animation: service-art-breathe 6s ease-in-out infinite;
  }

  .service-graphic .concept-flow {
    animation: service-art-travel 6s linear infinite;
  }

}

@keyframes service-art-settle {
  from {
    transform: translateY(16px);
  }

  to {
    transform: none;
  }

}

@keyframes service-art-breathe {
  0%,100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }

}

@keyframes service-art-travel {
  to {
    stroke-dashoffset: -44;
  }

}

.service-art-paused .service-graphic * {
  animation-play-state: paused!important;
}

.service-motion-toggle {
  margin-top: 14px;
  padding: 10px 15px;
  color: var(--lime);
  background: transparent;
  border: 1px solid #657354;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
}

@media(max-width:700px) {
  .service-hero-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .service-graphic {
    max-width: 520px;
    width: 100%;
    margin-inline: auto;
  }

}

@media print {
  .service-graphic * {
    animation: none!important;
  }

  .service-motion-toggle {
    display: none;
  }

}

/* Repeating illustration label lighting: staggered, gentle and decorative only. */
@media(prefers-reduced-motion:no-preference) {
  .service-graphic svg text {
    animation: service-label-glow 4s ease-in-out infinite;
  }

  .service-graphic svg text:nth-of-type(2) {
    animation-delay: 1.2s;
  }

  .service-graphic svg text:nth-of-type(3) {
    animation-delay: 2.4s;
  }

}

@keyframes service-label-glow {
  0%,45%,100% {
    fill: #96a389;
    filter: none;
  }

  18% {
    fill: #e7ff96;
    filter: drop-shadow(0 0 3px #a6bf58);
  }

  30% {
    fill: #b8c5a8;
    filter: none;
  }

}

/* Enquiry form: welcoming heading, readable labels and quiet information below submit. */
#enquiry-form .form-heading {
  margin-bottom: 32px;
}

#enquiry-form .form-heading h3 {
  font-size: clamp(27px,2.5vw,36px);
  line-height: 1.2;
  margin: 0 0 16px;
}

#enquiry-form .form-heading p {
  font-size: 16px;
  line-height: 1.65;
  color: #555e57;
  max-width: 620px;
}

#enquiry-form .field>label {
  font-size: 17px;
  line-height: 1.5;
}

#enquiry-form .field>label span {
  font-size: 15px;
}

#enquiry-form .form-disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: #555e57;
  margin-top: 20px;
  max-width: 660px;
}

#enquiry-form .form-disclaimer a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media(max-width:700px) {
  #enquiry-form .field>label {
    font-size: 16px;
  }

  #enquiry-form .field>label span {
    font-size: 14px;
  }

}

/* Approved warm-porcelain page canvas; retain intentional charcoal sections. */
body {
  background: var(--paper);
  color: var(--ink);
}

.site-header {
  margin-inline: 0;
  padding-inline: var(--gutter);
  background: var(--ink);
  color: var(--paper);
}

main>section:not(.light), footer {
  background-color: var(--ink);
  color: var(--paper);
}

/* Porcelain copy panels align with the surrounding project canvas. */
.project-card-copy {
  background: var(--paper);
}

.project-identity {
  background: var(--ink);
  color: var(--paper);
}

/* Separate the About introduction from the hero by the same gap as its cards. */
.about-intro {
  margin-top: 30px;
}

@media(max-width:700px) {
  .about-intro {
    margin-top: 20px;
  }

}

/* Fixed middle-content containers, shared by the original dist pages. */
.content-band {
  width: 100%;
}

.content-band--light {
  background: var(--paper);
  color: var(--ink);
}

.content-band--dark {
  background: var(--ink);
  color: var(--paper);
}

.content-container {
  box-sizing: border-box;
  min-width: 0;
}

.content-container>section, .content-container>article, .content-container>div {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

.content-container>section:not(.light) {
  background-color: var(--ink);
  color: var(--paper);
}

.content-container>.about-intro, .content-container>.team-profile, .content-container>.about-collaboration {
  padding-left: 36px;
  padding-right: 36px;
}

@media(max-width:700px) {
  .content-container>.about-intro, .content-container>.team-profile, .content-container>.about-collaboration {
    padding-left: 26px;
    padding-right: 26px;
  }

}

/* Mobile dropdown is relative to the now full-width header: no negative offsets. */
@media(max-width:700px) {
  .site-header nav {
    left: 0;
    right: 0;
    padding: 20px max(24px, env(safe-area-inset-right)) 28px max(24px, env(safe-area-inset-left));
  }
  .site-header nav>a.nav-cta {
    padding: 14px 16px;
  }
}