/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --container-xl: 36rem;
    --container-5xl: 64rem;
    --container-6xl: 72rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .static {
    position: static;
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline-flex {
    display: inline-flex;
  }
  .flex-shrink {
    flex-shrink: 1;
  }
  .grow {
    flex-grow: 1;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  font-size: 17px;
  font-family: 'Manrope', system-ui, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  --display-font: 'Playfair Display', serif;
  --bg: #F6F2EA;
  --bg-alt: #EEE6D8;
  --surface: #FFFFFF;
  --ink: #201C16;
  --ink-2: #4C4636;
  --ink-3: #6A6356;
  --ink-4: #B7AE9A;
  --line: #E2D8C4;
  --line-2: #D2C5A9;
  --accent: #35513F;
  --accent-dark: #223428;
  --accent-light: #5D7F67;
  --accent-bg: #EFF3EA;
  --grad-from: #5D7F67;
  --grad-via: #35513F;
  --grad-to: #223428;
  --bg-subtle: var(--bg-alt);
  --bg-card: var(--surface);
  --bg-card-hi: var(--bg-alt);
  --text-primary: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-3);
  --border: var(--line);
  --border-hi: var(--line-2);
}
body {
  background-color: var(--bg) !important;
  color: var(--ink);
}
::selection {
  background: var(--accent);
  color: var(--bg);
}
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 3px;
}
.section-white {
  background: var(--bg);
}
.section-subtle {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-dark {
  background: var(--accent-dark);
  color: var(--bg);
}
.section-tint {
  background: var(--accent-bg);
  border-top: 1px solid #D9E2D2;
  border-bottom: 1px solid #D9E2D2;
}
.section-subtle, .section-tint, .section-dark {
  padding-block: clamp(3.25rem, 6vw, 5rem);
}
/* min() keeps the desktop cap exactly as it was while guaranteeing a gutter
   at every narrower width. The old rule only padded below 768px, so from
   768px up to the cap the content ran hard against the screen edge. */
.box-reg {
  margin-inline: auto;
  max-width: min(var(--container-5xl), 100% - 2.5rem);
}
.box-wide {
  margin-inline: auto;
  max-width: min(var(--container-6xl), 100% - 2.5rem);
}
.box-sml {
  margin-inline: auto;
  max-width: min(var(--container-xl), 100% - 2.5rem);
}
.box-reg, .box-wide, .box-sml {
  width: 100%;
}
.layout {
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 6.5rem);
  padding-bottom: 6rem;
}
.header-text {
  text-align: center;
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.04;
  text-wrap: pretty;
  color: var(--ink);
}
.gradient-text {
  font-family: var(--display-font);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink);
}
.eyebrow {
  font-family: 'Manrope', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.serif-italic {
  font-family: var(--display-font);
  font-style: italic;
  font-weight: 400;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  transition: border-color 0.25s ease;
}
.card:hover {
  border-color: var(--line-2);
}
.card-hi {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.5em;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--ink-4);
  background: transparent;
  transition: all 0.2s ease;
}
.btn-outline:hover {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.accent-line {
  width: 2.5rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}
.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.stat-item {
  padding: 0 2rem;
  border-left: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.stat-item:first-child {
  border-left: none;
  padding-left: 0;
}
@media (max-width: 900px) {
  .stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
  .stat-item:nth-child(odd) {
    border-left: none;
    padding-left: 0;
  }
}
@media (max-width: 540px) {
  .stat-row {
    grid-template-columns: 1fr;
    row-gap: 0;
  }
  .stat-item {
    border-left: none;
    border-top: 1px solid var(--line-2);
    padding: 1.5rem 0;
  }
  .stat-item:first-child {
    border-top: none;
    padding-top: 0;
  }
}
.stat-num {
  font-family: var(--display-font);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--ink);
}
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero-photo-frame {
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
}
@media (max-width: 900px) {
  .hero-split {
    grid-template-columns: 1fr;
  }
  .hero-photo-frame {
    aspect-ratio: 16/10;
  }
}
.hero-photo {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
}
.hero-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(32,28,22,0.1) 0%, rgba(32,28,22,0.5) 60%, rgba(32,28,22,0.82) 100%);
}
.hero-photo-content {
  position: relative;
  z-index: 1;
  padding: 3rem;
  width: 100%;
}
.photo-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.photo-card-img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  background: var(--bg-alt);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-card:hover .photo-card-img {
  transform: scale(1.03);
}
.photo-card-body {
  padding-top: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}
.photo-card-title {
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.photo-card-link {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: gap 0.2s ease, color 0.2s ease;
}
.photo-card:hover .photo-card-link {
  gap: 0.65em;
  color: var(--accent);
}
.gallery-photo {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery-photo:hover {
  transform: scale(1.015);
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.form-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.form-field input, .form-field textarea, .form-field select {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0.65em 1em;
  font-size: 0.85rem;
  color: var(--ink);
  transition: border-color 0.2s ease;
  outline: none;
  width: 100%;
  font-family: inherit;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.form-field textarea {
  resize: vertical;
  min-height: 120px;
}
.form-field select option {
  background: var(--surface);
  color: var(--ink);
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  position: relative;
}
.faq-item input[type=checkbox] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.faq-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  pointer-events: none;
}
.faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.7;
}
.faq-item input:checked ~ .faq-body {
  max-height: 16rem;
  padding-top: 0.85rem;
}
.faq-icon {
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.3s ease;
  pointer-events: none;
}
.faq-item input:checked ~ .faq-label .faq-icon {
  transform: rotate(45deg);
}
.tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.85em;
  border-radius: 9999px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-2);
  background: var(--bg-alt);
}
.nav-link {
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: color 0.15s ease;
}
.nav-link:hover {
  color: var(--ink);
}
.wow {
  visibility: hidden;
  opacity: 0;
  transform: translateY(16px);
}
.wow.animated {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.prose-kfh {
  color: var(--ink-2);
  line-height: 1.8;
  font-size: 0.95rem;
  max-width: 68ch;
}
.prose-kfh h2 {
  font-family: var(--display-font);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 2.5rem;
  margin-bottom: 0.8rem;
  line-height: 1.3;
}
.prose-kfh p {
  margin-bottom: 1.25rem;
}
.prose-kfh strong {
  color: var(--ink);
  font-weight: 700;
}
.prose-kfh h3 {
  font-family: var(--display-font);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 1.9rem;
  margin-bottom: 0.6rem;
  line-height: 1.35;
}
.prose-kfh a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line-2);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
.prose-kfh a:hover {
  text-decoration-color: var(--accent);
}
.prose-kfh ul, .prose-kfh ol {
  margin: 0 0 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.prose-kfh ul {
  list-style: disc;
}
.prose-kfh ol {
  list-style: decimal;
}
.prose-kfh li::marker {
  color: var(--accent);
}
.prose-kfh blockquote {
  border-left: 2px solid var(--accent);
  padding: 0.35rem 0 0.35rem 1.4rem;
  margin: 1.75rem 0;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--ink);
  line-height: 1.6;
}
.prose-kfh blockquote p:last-child {
  margin-bottom: 0;
}
.prose-kfh table {
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.84rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
}
.prose-kfh th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg-alt);
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.prose-kfh td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.prose-kfh tr:last-child td {
  border-bottom: none;
}
.prose-kfh hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 2.25rem 0;
}
/* images inside post text: never wider than the column */
.prose-kfh img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.75rem auto;
  border-radius: 16px;
}
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
}
@media (max-width: 900px) {
  .card-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 620px) {
  .card-grid-3, .card-grid-2 {
    grid-template-columns: 1fr;
  }
}
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 860px) {
  .split-2 {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.divider-grid-2 {
  --dg-pad: 2rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
.divider-grid-2 > * {
  border-top: 1px solid var(--line);
  padding: var(--dg-pad) var(--dg-pad) var(--dg-pad) 0;
}
.divider-grid-2 > :nth-child(even) {
  padding-right: 0;
}
@media (max-width: 720px) {
  .divider-grid-2 {
    grid-template-columns: 1fr;
  }
  .divider-grid-2 > * {
    padding-right: 0;
  }
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.footer-links a, .footer-links p {
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.25rem;
  }
}
@media (max-width: 620px) {
  .footer-links {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}
.contact-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 3rem;
  align-items: start;
}
/* the contact heading and form read as one block, so they sit closer together
   than the site's section rhythm would put them */
.contact-top {
  display: flex;
  flex-direction: column;
  gap: 2.75rem;
}
@media (max-width: 860px) {
  .contact-split {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}
.blog-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease;
}
.blog-featured:hover {
  border-color: var(--line-2);
}
.blog-featured-img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  max-height: 440px;
  object-fit: cover;
  display: block;
}
.blog-featured-body {
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.blog-featured-body .photo-card-link {
  margin-top: 0.35rem;
  padding-top: 0;
  border-top: none;
  align-self: flex-start;
}
@media (max-width: 820px) {
  .blog-featured {
    grid-template-columns: 1fr;
  }
  .blog-featured-img {
    min-height: 0;
    aspect-ratio: 16/9;
  }
}
.blog-card-img {
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  background: var(--bg-alt);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.photo-card:hover .blog-card-img {
  transform: scale(1.03);
}
.blog-meta-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ink-3);
}
.article-col {
  max-width: 660px;
}
.article-col .prose-kfh {
  max-width: none;
}
.blog-meta-row .dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--ink-4);
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-border-style: solid;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
    }
  }
}
.stat-figure { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.stars { position: relative; display: inline-block; font-size: 0.78rem; line-height: 1; letter-spacing: 0.08em; color: var(--line-2); }
.stars-on { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--accent); }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; }
.form-check input { width: 16px; height: 16px; margin-top: 0.2rem; accent-color: var(--accent); flex-shrink: 0; }
.form-check label { font-size: 0.82rem; color: var(--ink-2); line-height: 1.6; }
.field-error {
  font-size: 0.72rem;
  color: #A33A3A;
  min-height: 0;
  line-height: 1.5;
}
.field-error:empty {
  display: none;
}
.form-field input.has-error, .form-field textarea.has-error {
  border-color: #C86A6A;
}
.form-field input.has-error:focus, .form-field textarea.has-error:focus {
  border-color: #A33A3A;
  box-shadow: 0 0 0 3px #F6E4E4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SIZE CALIBRATION — hero photos and welcome copy pulled back
───────────────────────────────────────────────────────────────────────────── */
.header-text { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.gradient-text { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.hero-photo-frame { aspect-ratio: 5/4; max-height: 400px; }
.hero-photo { min-height: 320px; }
.hero-photo-content { padding: 2.25rem; }
@media (max-width: 900px) {
  .hero-photo-frame { aspect-ratio: 16/10; max-height: 300px; }
}
.photo-card.compact .photo-card-img { aspect-ratio: 4/3; }
.photo-card.compact .photo-card-title { font-size: 1rem; }

.hero-notes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  margin: 0.25rem 0 0;
}
.hero-notes li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.78rem;
  color: var(--ink-2);
}
.hero-notes li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.quiet-link {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}
.quiet-link:hover { border-bottom-color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────────
   NAV DROPDOWN
───────────────────────────────────────────────────────────────────────────── */
.nav-group { position: relative; }
.nav-parent { display: inline-flex; align-items: center; cursor: pointer; }
.nav-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 186px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  box-shadow: 0 8px 24px rgba(32, 28, 22, 0.09);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s ease;
  z-index: 60;
}
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu { opacity: 1; visibility: visible; }
.nav-menu a {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  white-space: nowrap;
}
.nav-menu a:hover { background: var(--bg-alt); color: var(--ink); }
/* "All services" heads the list, so it reads as the parent not a sibling */
.nav-menu a:first-child {
  font-weight: 700;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  margin-bottom: 0.15rem;
}

.mobile-link {
  font-family: var(--display-font);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
}
.mobile-link.mobile-sub {
  font-family: 'Manrope', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink-2);
  padding-left: 1rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HOME — text-led service index
───────────────────────────────────────────────────────────────────────────── */
.service-index { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.service-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(150px, 200px) 1fr auto;
  align-items: baseline;
  gap: 1.25rem;
  padding: 1.15rem 0.25rem 1.15rem 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.18s ease, padding-left 0.18s ease;
}
.service-row:hover { background: var(--bg-alt); padding-left: 0.75rem; }
.service-num  { font-family: var(--display-font); font-style: italic; font-size: 0.85rem; color: var(--accent); }
.service-name { font-family: var(--display-font); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
.service-line { font-size: 0.84rem; color: var(--ink-2); line-height: 1.55; }
.service-go   { font-size: 0.9rem; color: var(--ink-3); transition: transform 0.18s ease, color 0.18s ease; }
.service-row:hover .service-go { color: var(--accent); transform: translateX(3px); }
@media (max-width: 760px) {
  .service-row { grid-template-columns: 2rem 1fr auto; row-gap: 0.3rem; }
  .service-line { grid-column: 2 / -1; }
}

/* Approach: prose and points share a baseline instead of drifting apart */
.approach-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.approach-prose { display: flex; flex-direction: column; gap: 1rem; }
.approach-prose p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.85; margin: 0; }
.approach-points { list-style: none; margin: 0; padding: 0; border-top: 1px solid #D9E2D2; }
.approach-points li {
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.6;
  padding: 0.85rem 0;
  border-bottom: 1px solid #D9E2D2;
}
@media (max-width: 860px) {
  .approach-split { grid-template-columns: 1fr; gap: 2rem; }
}

/* Facts panel — visually separate from the section heading above it */
.fact-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 2rem 2.25rem;
}
@media (max-width: 620px) { .fact-panel { padding: 1.5rem 1.35rem; } }

/* ─────────────────────────────────────────────────────────────────────────────
   SERVICE PAGE BLOCKS
───────────────────────────────────────────────────────────────────────────── */
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.1rem 2rem;
}
.tick-list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.5rem;
  font-size: 0.86rem;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 7px; height: 4px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 860px) { .tick-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tick-list { grid-template-columns: 1fr; } }

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.feature-card {
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.feature-title { font-size: 0.92rem; font-weight: 700; color: var(--ink); }
.feature-body  { font-size: 0.82rem; color: var(--ink-2); line-height: 1.65; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns: 1fr; } }

.package-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.package {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.package-featured { border-color: var(--accent); background: var(--accent-bg); }
.package-flag {
  position: absolute;
  top: -0.6rem; left: 1.5rem;
  background: var(--accent);
  color: var(--bg);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 999px;
}
.package-name  { font-family: var(--display-font); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
.package-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.package-price span { display: block; font-size: 0.72rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.package-body  { font-size: 0.82rem; color: var(--ink-2); line-height: 1.65; }
.package-note  { font-size: 0.72rem; color: var(--ink-3); }
.package-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.package-features li {
  position: relative;
  padding-left: 0.9rem;
  font-size: 0.78rem;
  color: var(--ink-2);
  line-height: 1.5;
}
.package-features li::before {
  content: "";
  position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--line-2);
}
.package-cta {
  margin-top: auto;
  padding-top: 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.package-cta-quiet { color: var(--ink-2); }
.package-cta:hover { text-decoration: underline; }
@media (max-width: 860px) { .package-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .package-grid { grid-template-columns: 1fr; } }

.person-card {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--bg-alt);
  border-radius: 18px;
  padding: 1.5rem;
}
.person-initial {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--display-font);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-name { font-size: 0.95rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.person-bio  { font-size: 0.82rem; color: var(--ink-2); line-height: 1.7; }

.notice {
  background: var(--bg-alt);
  border-left: 2px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 1.1rem 1.35rem;
  font-size: 0.84rem;
  color: var(--ink-2);
  line-height: 1.7;
  max-width: 76ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
   AVAILABILITY
───────────────────────────────────────────────────────────────────────────── */
.availability { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.office {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.35rem 1.4rem;
}
.office-name {
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.office-spec { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.office-spec > div { display: flex; justify-content: space-between; gap: 0.75rem; }
.office-spec dt {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.office-spec dd { margin: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink); text-align: right; }
@media (max-width: 900px) { .availability { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .availability { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   BUTTONS ON DARK PANELS
───────────────────────────────────────────────────────────────────────────── */
.btn-on-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  background: #F6F2EA;
  color: #223428;
  border: 1px solid #F6F2EA;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-on-dark:hover { background: #FFFFFF; }
.btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.75em 1.6em;
  border-radius: 9999px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #F6F2EA;
  border: 1px solid rgba(246, 242, 234, 0.35);
  background: transparent;
  text-decoration: none;
  transition: background 0.2s ease;
}
.btn-ghost-dark:hover { background: rgba(246, 242, 234, 0.12); }

.faq-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
  text-decoration: none;
}
.faq-link:hover { text-decoration: underline; }
.faq-item input:checked ~ .faq-body { max-height: 26rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER RESPONSIVE SWITCH
   Lives here rather than inline in the template so the rule can't be lost
   when the header markup is edited.
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  .desktop-nav   { display: flex !important; }
  .desktop-cta   { display: inline-flex !important; }
  .hamburger-btn { display: none !important; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PAIRED PANELS (challenge / how we help)
   Equal height regardless of how much text each side carries — grid's default
   stretch does the work, so no min-height guessing.
───────────────────────────────────────────────────────────────────────────── */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.duo > * {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: 24px;
  padding: 2.25rem 2.5rem;
}
@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .duo > * { padding: 1.85rem 1.75rem; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CLIENT QUOTES — short two-line pulls used on home and serviced offices
───────────────────────────────────────────────────────────────────────────── */
.quote-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.quote {
  margin: 0;
  background: var(--bg-alt);
  border-radius: 18px;
  padding: 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote blockquote {
  margin: 0;
  font-family: var(--display-font);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}
.quote figcaption {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.quote-name { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.quote-role { font-size: 0.74rem; color: var(--ink-3); }
@media (max-width: 900px) { .quote-row { grid-template-columns: 1fr; } }

/* Service page sections: a rule opens each one so the divisions are obvious */
.section-rule {
  border-top: 1px solid var(--line-2);
  padding-top: 2.5rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BENEFIT CARDS — what you get, stated positively
───────────────────────────────────────────────────────────────────────────── */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: var(--accent-bg);
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
}
.benefit p {
  font-size: 0.88rem;
  color: var(--accent-dark);
  line-height: 1.65;
  font-weight: 500;
}
.benefit-mark {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--accent);
  position: relative;
}
.benefit-mark::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4.5px;
  width: 6px;
  height: 3px;
  border-left: 1.5px solid var(--accent-bg);
  border-bottom: 1.5px solid var(--accent-bg);
  transform: rotate(-45deg);
}
@media (max-width: 680px) { .benefit-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   GROUPED INCLUSIONS — labelled columns rather than one long run
───────────────────────────────────────────────────────────────────────────── */
.group-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem;
}
.group-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 0.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--line-2);
}
.group ul { list-style: none; margin: 0; padding: 0; }
.group li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.1rem;
  font-size: 0.83rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 6px;
  height: 3.5px;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
@media (max-width: 900px) { .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .group-grid { grid-template-columns: 1fr; } }

/* ─────────────────────────────────────────────────────────────────────────────
   COMPACT FIGURES — same composition as the home page panel, scaled down.
   Service pages pass the numbers on the way to the argument, so the panel
   tightens and the type steps down; the home page keeps full size.
───────────────────────────────────────────────────────────────────────────── */
.fact-panel-sm { padding: 1.3rem 1.6rem; border-radius: 16px; }
.fact-panel-sm .stat-row     { gap: 1.25rem; }
.fact-panel-sm .stat-item    { gap: 0.35rem; }
.fact-panel-sm .eyebrow      { font-size: 0.64rem; letter-spacing: 0.12em; }
.fact-panel-sm .stat-num     { font-size: clamp(1.5rem, 2.6vw, 1.85rem); }
.fact-panel-sm .stat-note    { font-size: 0.7rem; line-height: 1.5; }
@media (max-width: 620px) { .fact-panel-sm { padding: 1.1rem 1.15rem; } }

.stat-note { font-size: 0.78rem; color: var(--ink-2); line-height: 1.6; }

/* ─────────────────────────────────────────────────────────────────────────────
   BLOG ARTICLE + RELATED SIDEBAR
   The article keeps its 660px reading measure; related posts sit beside it in
   a sticky column that follows the reader down the page. Under 1000px the
   sidebar drops below the article and lays the cards out side by side.
───────────────────────────────────────────────────────────────────────────── */
.article-layout {
  max-width: 1020px;
  display: grid;
  grid-template-columns: minmax(0, 660px) 300px;
  gap: 3.5rem;
  align-items: start;
}
.article-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 9vw, 6.5rem);
}
.article-aside {
  position: sticky;
  top: 7rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.aside-list {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
  margin-top: 0.6rem;
}
.aside-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  text-decoration: none;
  color: inherit;
  padding-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.aside-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.aside-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: var(--bg-alt);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.aside-card:hover .aside-card-img {
  transform: scale(1.04);
}
.aside-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.aside-card-body .tag {
  align-self: flex-start;
}
.aside-card-title {
  font-family: var(--display-font);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 0.2s ease;
}
.aside-card:hover .aside-card-title {
  color: var(--accent);
}
.aside-all {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  transition: color 0.2s ease;
}
.aside-all:hover {
  color: var(--accent);
}
@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 660px);
    justify-content: center;
    gap: clamp(3.5rem, 8vw, 5rem);
  }
  .article-aside {
    position: static;
  }
  .aside-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 2rem;
  }
  .aside-card:last-child {
    border-bottom: 1px solid var(--line);
    padding-bottom: 1.35rem;
  }
}
@media (max-width: 620px) {
  .aside-list {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   GALLERY GRID
   An explicit grid rather than CSS columns, so rows land square instead of
   trailing off with a half-empty column. The closing block drops to two across
   and finishes the page on the larger frames.
───────────────────────────────────────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
.gallery-grid + .gallery-grid {
  margin-top: 1.5rem;
}
.gallery-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  .gallery-grid {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADDITIONAL SECTION DESIGNS
   New block types for content/services.json, plus width variants on the
   existing ones. Everything reuses the established vocabulary — tinted panels,
   hairline rules, the quote card — so a page can mix them freely.
───────────────────────────────────────────────────────────────────────────── */

/* split — prose beside a photograph */
.split-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.split-block.split-image-left .split-prose { order: 2; }
.split-block.split-image-left .split-media { order: 1; }
.split-prose { display: flex; flex-direction: column; gap: 0.9rem; }
.split-prose p {
  font-size: 0.95rem;
  color: var(--ink-2);
  line-height: 1.85;
  margin: 0;
}
.split-points {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.split-points li {
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.6;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--line);
}
.split-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  background: var(--bg-alt);
}
@media (max-width: 900px) {
  .split-block { grid-template-columns: 1fr; gap: 2rem; }
  .split-block.split-image-left .split-prose,
  .split-block.split-image-left .split-media { order: 0; }
}

/* callout — one statement that needs to carry */
.callout {
  background: var(--accent-bg);
  border: 1px solid #D9E2D2;
  border-radius: 20px;
  padding: 1.9rem 2.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.callout-body {
  font-family: var(--display-font);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  max-width: 54ch;
  margin: 0;
}
.callout-link {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--accent);
  transition: opacity 0.2s ease;
}
.callout-link:hover { opacity: 0.7; }

/* comparison — a table where the differences are the content */
.compare-wrap { overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  min-width: 520px;
}
.compare-table th,
.compare-table td {
  text-align: left;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.compare-table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.compare-table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 30%;
}
.compare-table td { color: var(--ink-2); line-height: 1.6; }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: none; }

/* width variants on the existing designs */
.feature-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tick-list-1 { grid-template-columns: 1fr; }
.tick-list-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prose-block-lead p:first-child {
  font-size: 1.08rem !important;
  color: var(--ink) !important;
  line-height: 1.7 !important;
}
@media (max-width: 900px) {
  .feature-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tick-list-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .feature-grid-2, .feature-grid-4 { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   SECTION BANDS — how one section separates from the next
   Unset leaves the original hairline rule. A band paints the full width, so
   the eye reads a change of ground rather than a line. Alternate sparingly:
   two or three bands on a page, not every section.
───────────────────────────────────────────────────────────────────────────── */

/* panel — the content sits in a card, page colour unchanged */
.band-panel > .box-wide {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 2.25rem 2.5rem;
}
@media (max-width: 620px) {
  .band-panel > .box-wide { padding: 1.6rem 1.4rem; border-radius: 18px; }
}

/* dark — high contrast, and the one to use once rather than twice */
.section-dark .gradient-text,
.section-dark .feature-title,
.section-dark .office-name,
.section-dark .callout-body { color: #F6F2EA; }
/* !important because the macro sets these colours inline on the element */
.section-dark p,
.section-dark .feature-body,
.section-dark .split-prose p,
.section-dark .compare-table td { color: #C9D3C6 !important; }
.section-dark .prose-block-lead p:first-child { color: #F6F2EA !important; }
.section-dark .eyebrow,
.section-dark .group-label,
.section-dark .compare-table thead th { color: #9FB39C; }
.section-dark .tick-list li,
.section-dark .split-points li,
.section-dark .compare-table tbody th { color: #E4E9E1; }
.section-dark .tick-list li,
.section-dark .split-points li,
.section-dark .split-points,
.section-dark .compare-table th,
.section-dark .compare-table td { border-color: rgba(246, 242, 234, 0.16); }
.section-dark .feature-card,
.section-dark .quote { background: rgba(246, 242, 234, 0.07); }
.section-dark .office,
.section-dark .package,
.section-dark .callout {
  background: rgba(246, 242, 234, 0.07);
  border-color: rgba(246, 242, 234, 0.18);
}
.section-dark .quote blockquote,
.section-dark .quote-name { color: #F6F2EA; }
.section-dark .quote-role { color: #9FB39C; }
.section-dark .quote figcaption { border-top-color: rgba(246, 242, 234, 0.18); }

/* ─────────────────────────────────────────────────────────────────────────────
   PAGE COMPONENTS (wk-)
   Serif headings with an italic phrase, bordered box rows, the overlapping
   amenities card, product and package cards, alternating feature rows.
   Promoted from the alternate layouts once the design was signed off.
───────────────────────────────────────────────────────────────────────────── */
  .wk-serif { font-family: var(--display-font); font-weight: 500; letter-spacing: -0.015em; line-height: 1.08; color: var(--ink); }
  .wk-serif em { font-style: italic; font-weight: 400; }
  .wk-h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
  .wk-h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); }
  .wk-lede { font-size: 0.95rem; color: var(--ink-2); line-height: 1.8; }
  .wk-link { font-size: 0.85rem; font-weight: 600; color: var(--accent-light); text-decoration: underline; text-underline-offset: 4px; }
  .wk-link:hover { color: var(--ink); }
  .wk-band { background: var(--bg-alt); padding-block: clamp(3.5rem, 7vw, 5.5rem); }
  /* two bands in a row would otherwise show a thin strip of page colour
     between them — the .layout flex gap. Pull the second one up over it. */
  .wk-band + .wk-band { margin-top: calc(-1 * clamp(4rem, 9vw, 6.5rem)); }

  /* hero */
  .wk-hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
  .wk-hero .wk-lede { max-width: 56ch; }
  .wk-meta { font-size: 0.82rem; color: var(--ink-3); }
  .wk-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; }
  /* the same buttons as the header and footer: .btn-primary and .btn-outline */
  .wk-btn {
    display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.6em; border-radius: 9999px;
    font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none;
    background: var(--ink); color: var(--bg); border: 1px solid var(--ink);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .wk-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
  .wk-btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink-4); padding-inline: 1.5em; }
  .wk-btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }

  /* why choose */
  .wk-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
  .wk-why-cell { padding: 2.1rem 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
  .wk-why-cell + .wk-why-cell { border-left: 1px solid var(--line); }
  .wk-why-cell svg { width: 26px; height: 26px; color: var(--accent); }
  .wk-why-title { font-family: var(--display-font); font-size: 1.15rem; font-weight: 500; color: var(--ink); }
  .wk-why-body { font-size: 0.85rem; color: var(--ink-2); line-height: 1.7; }

  /* amenities */
  .wk-amen { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
  .wk-amen-photo { grid-column: 1 / 8; grid-row: 1 / 4; align-self: stretch; }
  .wk-amen-photo img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; border-radius: 4px; background: var(--bg-alt); }
  .wk-amen-head { grid-column: 8 / 13; grid-row: 1; padding: 0 0 2.5rem 3rem; text-align: right; }
  .wk-amen-card {
    grid-column: 5 / 10; grid-row: 2; z-index: 2;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 1.9rem 2.1rem;
    box-shadow: 0 18px 40px -28px rgba(32, 28, 22, 0.35);
  }
  /* dropped by the card's top border and padding so the two column headings
     sit on the same line as each other */
  .wk-amen-side { grid-column: 10 / 13; grid-row: 2; padding-left: 2.5rem; padding-top: calc(1.9rem + 1px); }
  .wk-amen-foot { grid-column: 10 / 13; grid-row: 3; padding: 1.75rem 0 0 2.5rem; }
  .wk-amen-title { font-family: var(--display-font); font-size: 1.3rem; font-weight: 500; color: var(--ink); margin-bottom: 1.2rem; }
  .wk-amen-caption { font-size: 0.86rem; color: var(--ink-2); line-height: 1.7; max-width: 52ch; margin-left: auto; margin-top: 1rem; }
  .wk-amen-caption strong { color: var(--ink); font-weight: 600; }
  .wk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }
  .wk-list li { display: flex; align-items: center; gap: 0.85rem; font-size: 0.88rem; color: var(--ink); }
  .wk-list svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--accent); }

  /* flat variant: photograph beside one unbroken list, no column headings */
  .wk-amen-flat { align-items: center; column-gap: 3.5rem; }
  .wk-amen-flat .wk-amen-photo { grid-column: 1 / 7; grid-row: 1; }
  .wk-amen-flat .wk-amen-photo img { min-height: 480px; }
  .wk-amen-photo-whole { align-self: center; }
  .wk-amen .wk-amen-photo-whole img { height: auto; min-height: 0; object-fit: contain; }
  .wk-amen-flat .wk-amen-body { grid-column: 7 / 13; grid-row: 1; display: flex; flex-direction: column; gap: 1.6rem; }
  .wk-amen-flat .wk-amen-caption { margin: 0; max-width: none; }
  .wk-amen-flat .wk-amen-foot { grid-column: auto; grid-row: auto; padding: 0; }
  .wk-list-2 {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows, 5), auto); grid-auto-flow: column;
    gap: 1.15rem 1.75rem;
  }
  .wk-list-2 li { align-items: flex-start; }
  .wk-list-2 svg { margin-top: 1px; }

  /* service cards */
  .wk-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .wk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.2s ease; }
  .wk-card:hover { border-color: var(--line-2); }
  .wk-card-media { position: relative; }
  .wk-card-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
  .wk-tag { position: absolute; top: 0.9rem; left: 0.9rem; background: var(--bg); color: var(--ink); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.42em 0.9em; border-radius: 9999px; }
  .wk-card-body { padding: 1.6rem 1.7rem 1.8rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; }
  .wk-card-title { font-family: var(--display-font); font-size: 1.45rem; font-weight: 500; color: var(--ink); }
  .wk-card-body p { font-size: 0.85rem; color: var(--ink-2); line-height: 1.65; }
  .wk-card .wk-link { margin-top: auto; align-self: flex-start; }

  /* packages */
  /* price cards: a tinted head carrying the offer, a white foot carrying the
     action, laid out as a swipeable rail rather than a grid */
  .wk-pkgs {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 0;
    padding-bottom: 0.25rem;
    margin-right: min(0px, calc((var(--container-6xl) - 100vw) / 2));
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .wk-pkgs::-webkit-scrollbar { display: none; }
  /* a short set of packages shares the row evenly instead of running off the
     right edge: no bleed, and the cards grow to fill the container */
  .wk-pkgs-fit { margin-right: 0; }
  .wk-pkgs-fit .wk-pkg { flex: 1 1 0; min-width: 255px; }
  /* a longer set laid out in rows of three, so nothing is cut off at the edge */
  .wk-pkgs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin-right: 0; }
  .wk-pkgs-grid .wk-pkg { flex: none; }
  /* a note promoted above the cards, flagged like a featured package */
  .wk-pkg-lead { background: var(--surface); border: 1px solid var(--accent); border-radius: 6px; padding: 1.6rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .wk-pkg-lead p { font-size: 0.86rem; color: var(--ink-2); line-height: 1.7; max-width: 78ch; }
  .wk-pkg-lead strong { color: var(--accent); font-weight: 800; }
  .wk-pkg {
    position: relative;
    flex: 0 0 clamp(255px, 31%, 340px);
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
  .wk-pkg-head {
    background: var(--surface);
    padding: 1.6rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;          /* pushes the button bar to the foot of every card, so
                         the divider lines up however long the copy runs */
  }
  .wk-pkg-foot {
    padding: 1.2rem 1.5rem 1.3rem;
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .wk-pkg-cta {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 0.6em 1.4em;
    border-radius: 9999px;
    border: 1px solid var(--line-2);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .wk-pkg-cta:hover { border-color: var(--accent); color: var(--accent); }
  .wk-rail-nav { display: flex; gap: 0.6rem; }
  .wk-rail-btn {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--line-2);
    background: transparent;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s ease, color 0.2s ease;
  }
  .wk-rail-btn:hover { border-color: var(--ink); }
  .wk-rail-btn[disabled] { opacity: 0.35; cursor: default; border-color: var(--line); }
  .wk-pkg-featured { border-color: var(--accent); }
  .wk-pkg-flag { align-self: flex-start; background: var(--accent-dark); color: #F6F2EA; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4em 0.85em; border-radius: 9999px; }
  .wk-pkg-name { font-family: var(--display-font); font-size: 1.25rem; font-weight: 500; color: var(--ink); }
  /* Manrope, not Playfair — the serif £ and lining figures read badly at this
     size, and the live package cards already set prices in the sans face. */
  .wk-pkg-price { font-family: 'Manrope', system-ui, sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--accent); letter-spacing: -0.01em; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .wk-pkg-period { display: block; font-family: 'Manrope', sans-serif; font-size: 0.74rem; font-weight: 500; color: var(--ink-3); margin-top: 0.35rem; line-height: 1.5; }
  .wk-pkg-body { font-size: 0.84rem; color: var(--ink-2); line-height: 1.65; }
  .wk-pkg-note { font-size: 0.8rem; color: var(--ink-3); line-height: 1.7; max-width: 78ch; margin-top: 1.25rem; }
  .wk-pkg-note strong { color: var(--ink); font-weight: 700; }
  /* the same tick list, sized to sit inside a price card */
  .wk-pkg-ticks { gap: 0.55rem; }
  .wk-pkg-ticks li { font-size: 0.8rem; line-height: 1.5; gap: 0.6rem; }
  .wk-pkg-ticks span { width: 15px; height: 15px; margin-top: 0.12rem; }
  .wk-pkg-ticks span::after { left: 4px; top: 4px; width: 5px; height: 2.5px; }
  .wk-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
  .wk-ticks li { display: flex; gap: 0.7rem; font-size: 0.83rem; color: var(--ink-2); line-height: 1.55; }
  .wk-ticks span { flex-shrink: 0; width: 17px; height: 17px; margin-top: 0.15rem; border-radius: 50%; background: var(--accent-dark); position: relative; }
  .wk-ticks span::after { content: ""; position: absolute; left: 5px; top: 5px; width: 6px; height: 3px; border-left: 1.5px solid #F6F2EA; border-bottom: 1.5px solid #F6F2EA; transform: rotate(-45deg); }
  .wk-pkg .wk-link { margin-top: auto; padding-top: 0.4rem; align-self: flex-start; }

  /* people */
  .wk-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .wk-person { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.7rem 1.8rem; display: flex; gap: 1.2rem; align-items: flex-start; }
  .wk-person-photo { flex-shrink: 0; width: 92px; height: 118px; border-radius: 6px; object-fit: cover; object-position: 50% 18%; background: var(--accent-bg); }
  .wk-initial { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-family: var(--display-font); font-size: 1.3rem; display: flex; align-items: center; justify-content: center; }
  .wk-person-name { font-family: var(--display-font); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: 0.35rem; }
  .wk-person-bio { font-size: 0.84rem; color: var(--ink-2); line-height: 1.7; }

  /* prose */
  .wk-prose { display: flex; flex-direction: column; gap: 0.9rem; max-width: 68ch; }
  .wk-prose p { font-size: 0.95rem; color: var(--ink-2); line-height: 1.85; }

  /* grouped list */
  .wk-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
  .wk-group-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 0.8rem; border-bottom: 1px solid var(--line-2); margin-bottom: 0.9rem; }
  .wk-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
  .wk-group li { font-size: 0.84rem; color: var(--ink-2); line-height: 1.6; }
  /* a lone group spans the grid and splits into columns rather than sitting in
     a single narrow strip with the rest of the row empty */
  .wk-group-wide { grid-column: 1 / -1; }
  /* `columns` has no effect on a flex container, so this list goes back to
     block flow and spaces its items with a margin instead of a gap */
  .wk-group-wide ul { display: block; columns: 3; column-gap: 2rem; }
  .wk-group-wide li { break-inside: avoid; margin-bottom: 0.65rem; }

  /* feature cards */
  .wk-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .wk-feat { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: 0.55rem; }
  .wk-feat-title { font-family: var(--display-font); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
  .wk-feat-body { font-size: 0.84rem; color: var(--ink-2); line-height: 1.7; }

  /* notice */
  .wk-notice { background: var(--accent-bg); border: 1px solid #D9E2D2; border-left: 4px solid var(--accent); border-radius: 6px; padding: 1.3rem 1.6rem; font-size: 0.92rem; color: var(--ink); line-height: 1.7; }
  .wk-notice-label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }

  /* proof note (services with no published review) */

  /* units */
  .wk-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .wk-unit { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 1.4rem 1.5rem; }
  .wk-unit-name { font-family: var(--display-font); font-size: 1.2rem; font-weight: 500; color: var(--ink); margin-bottom: 0.9rem; }
  .wk-unit dl { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
  .wk-unit div { display: flex; justify-content: space-between; gap: 1rem; }
  .wk-unit dt { color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; }
  .wk-unit dd { margin: 0; color: var(--ink); font-weight: 600; font-size: 0.8rem; }

  /* quotes */
  .wk-quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .wk-quotes-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* a tinted quote panel over a white foot, the initial sitting across the join */
  .wk-quote { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
  .wk-quote blockquote { margin: 0; flex: 1; background: var(--accent-bg); border-bottom: 1px solid #D9E2D2; padding: 2rem 2.1rem 3.4rem; font-family: var(--display-font); font-style: normal; font-size: 1.12rem; line-height: 1.5; color: var(--ink); }
  .wk-quote figcaption { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 2.1rem 1.8rem; }
  .wk-q-avatar { width: 60px; height: 60px; margin: -30px 0 1rem; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-2); color: var(--accent); font-family: var(--display-font); font-size: 1.45rem; display: flex; align-items: center; justify-content: center; }
  .wk-qn { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
  .wk-qr { font-size: 0.74rem; color: var(--ink-3); }

  /* cookie notice: small, bottom left, out of the way of the content */
  .cookie-bar {
    position: fixed; left: 1rem; bottom: 1rem; z-index: 60;
    max-width: 320px; display: flex; flex-direction: column; gap: 0.6rem;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: 6px;
    padding: 0.85rem 1rem; box-shadow: 0 8px 24px rgba(32, 28, 22, 0.12);
  }
  .cookie-bar p { font-size: 0.76rem; color: var(--ink-2); line-height: 1.55; }
  .cookie-bar a { color: var(--accent); }
  .cookie-bar-actions { display: flex; gap: 0.5rem; }
  .cookie-bar button {
    font: inherit; font-size: 0.74rem; font-weight: 600; cursor: pointer;
    padding: 0.45em 1.1em; border-radius: 9999px; border: 1px solid var(--ink);
    background: var(--ink); color: var(--bg);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }
  .cookie-bar button:hover { background: var(--accent); border-color: var(--accent); }
  .cookie-bar .cookie-no { background: transparent; color: var(--ink); border-color: var(--ink-4); }
  .cookie-bar .cookie-no:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  @media (max-width: 520px) {
    .cookie-bar { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; max-width: none; }
  }

  /* the map's stand-in, shown until cookies are accepted */
  .wk-map-ask {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 0.7rem; text-align: center;
    padding: 1.25rem; background: var(--bg-alt);
  }
  .wk-map-ask .wk-btn-ghost { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .wk-map-ask p { font-size: 0.8rem; color: var(--ink-3); line-height: 1.6; max-width: 26ch; }

  /* map */
  .wk-map-frame { margin: 0; width: 100%; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: var(--bg-alt); }
  .wk-map { width: 100%; height: 100%; border: 0; display: block; filter: saturate(0.9); }

  /* closing */
  .wk-close { background: var(--accent-dark); border-radius: 6px; padding: clamp(2.5rem, 5vw, 3.5rem); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; }
  .wk-close h2 { font-family: var(--display-font); font-size: clamp(1.7rem, 4vw, 2.5rem); font-weight: 500; color: #F6F2EA; line-height: 1.15; }
  .wk-close h2 em { font-style: italic; font-weight: 400; }
  .wk-close p { font-size: 0.88rem; color: #C9D3C6; line-height: 1.75; max-width: 52ch; }
  .wk-close .wk-btn { background: #F6F2EA; color: #223428; border-color: #F6F2EA; }
  .wk-close .wk-btn-ghost { background: transparent; color: #F6F2EA; border-color: rgba(246,242,234,0.45); }
  /* on the dark closing panel, hover as .btn-on-dark and .btn-ghost-dark do */
  .wk-close .wk-btn:hover { background: #FFFFFF; border-color: #FFFFFF; color: #223428; }
  .wk-close .wk-btn-ghost:hover { background: rgba(246,242,234,0.12); color: #F6F2EA; border-color: rgba(246,242,234,0.45); }

  @media (max-width: 1000px) {
    .wk-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-group-wide ul { columns: 2; }
    .wk-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-amen { grid-template-columns: 1fr; gap: 1.75rem; }
    /* the head/side/foot columns lose their layout padding; the card keeps its
       own — zeroing it here is what pushed the icons against the border. */
    .wk-amen-photo, .wk-amen-head, .wk-amen-side, .wk-amen-foot { grid-column: 1; grid-row: auto; padding: 0; text-align: left; }
    .wk-amen-card { grid-column: 1; grid-row: auto; text-align: left; }
    .wk-amen-photo img { min-height: 300px; }
    .wk-amen-flat .wk-amen-photo, .wk-amen-flat .wk-amen-body { grid-column: 1; grid-row: auto; }
    .wk-amen-flat .wk-amen-photo img { min-height: 300px; }
    .wk-why { grid-template-columns: 1fr; }
    .wk-why-cell + .wk-why-cell { border-left: none; border-top: 1px solid var(--line); }
    .wk-cards, .wk-pkgs-grid, .wk-quotes-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 700px) {
    .wk-cards, .wk-units, .wk-quotes, .wk-people, .wk-feats, .wk-groups, .wk-pkgs-grid { grid-template-columns: 1fr; }
    .wk-group-wide ul { columns: 1; }
    .wk-amen-card { padding: 1.5rem 1.4rem; }
    .wk-why-cell { padding: 1.6rem 1.5rem; }
    .wk-feat, .wk-person { padding: 1.4rem 1.4rem; }
    .wk-quote blockquote { padding: 1.5rem 1.4rem 3rem; font-size: 1.02rem; }
    .wk-quote figcaption { padding: 0 1.4rem 1.4rem; }
    .wk-pkg { flex-basis: 80%; }
    .wk-pkg-head { padding: 1.4rem 1.35rem 1.3rem; }
    .wk-pkg-foot { padding: 1.1rem 1.35rem 1.2rem; }
    .wk-card-body { padding: 1.4rem 1.4rem 1.5rem; }
    .wk-list li { font-size: 0.86rem; }
    .wk-list-2 { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 1rem; }
  }

  /* ── shared page pieces (home, about, contact, faqs, gallery, blog) ─────── */
  .wk-hero-left { text-align: left; align-items: flex-start; }
  .wk-hero-left .wk-actions { justify-content: flex-start; }
  .wk-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
  .wk-hero-left .wk-chips { justify-content: flex-start; }
  .wk-chip { font-size: 0.74rem; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 9999px; padding: 0.4em 0.9em; }

  .wk-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: clamp(1.6rem, 3vw, 2.2rem); }

  .wk-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .wk-split img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; background: var(--bg-alt); }

  .wk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
  .wk-step { padding: 1.9rem 1.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
  .wk-step + .wk-step { border-left: 1px solid var(--line); }
  .wk-step-mark { font-family: var(--display-font); font-style: italic; font-size: 1rem; color: var(--accent); }
  .wk-step-title { font-family: var(--display-font); font-size: 1.1rem; font-weight: 500; color: var(--ink); }
  .wk-step-body { font-size: 0.84rem; color: var(--ink-2); line-height: 1.7; }

  .wk-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
  .wk-stat { padding: 1.8rem 1.7rem; display: flex; flex-direction: column; gap: 0.45rem; }
  .wk-stat + .wk-stat { border-left: 1px solid var(--line); }
  .wk-stat-label { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .wk-stat-value { font-family: var(--display-font); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; color: var(--ink); line-height: 1; }
  .wk-stat-note { font-size: 0.78rem; color: var(--ink-2); line-height: 1.6; }

  .wk-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .wk-post { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: border-color 0.2s ease; }
  .wk-post:hover { border-color: var(--line-2); }
  .wk-post img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
  .wk-post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
  .wk-post-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.7rem; color: var(--ink-3); font-weight: 600; }
  .wk-post-title { font-family: var(--display-font); font-size: 1.2rem; font-weight: 500; color: var(--ink); line-height: 1.25; }
  .wk-post-excerpt { font-size: 0.82rem; color: var(--ink-2); line-height: 1.65; }
  .wk-post .wk-link { margin-top: auto; padding-top: 0.4rem; }
  .wk-post-lead { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; align-items: stretch; }
  .wk-post-lead img { height: 100%; aspect-ratio: auto; min-height: 300px; }
  .wk-post-lead .wk-post-body { padding: clamp(1.6rem, 3vw, 2.4rem); justify-content: center; }
  .wk-post-lead .wk-post-title { font-size: clamp(1.5rem, 2.6vw, 2rem); }

  .wk-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .wk-gal-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wk-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 6px; background: var(--bg-alt); }
  .wk-gal-whole { object-fit: contain !important; }

  .wk-contact { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
  .wk-side-block { display: flex; flex-direction: column; gap: 0.7rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--line); margin-bottom: 1.6rem; }
  .wk-side-block:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .wk-side-strong { font-size: 0.9rem; font-weight: 700; color: var(--ink); text-decoration: none; }
  .wk-side-strong:hover { color: var(--accent); }
  .wk-side-note { font-size: 0.78rem; color: var(--ink-3); line-height: 1.6; }

  @media (max-width: 1000px) {
    .wk-steps, .wk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-step:nth-child(odd), .wk-stat:nth-child(odd) { border-left: none; }
    .wk-step:nth-child(n+3), .wk-stat:nth-child(n+3) { border-top: 1px solid var(--line); }
    .wk-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wk-post-lead { grid-column: span 2; grid-template-columns: 1fr; }
    .wk-post-lead img { min-height: 220px; }
    .wk-contact, .wk-split { grid-template-columns: 1fr; }
  }
  @media (max-width: 700px) {
    .wk-steps, .wk-stats, .wk-posts, .wk-gal, .wk-gal-2 { grid-template-columns: 1fr; }
    .wk-step + .wk-step, .wk-stat + .wk-stat { border-left: none; border-top: 1px solid var(--line); }
    .wk-post-lead { grid-column: span 1; }
  }

  /* ── alternating feature rows: text one side, photograph the other ─────── */
  .wk-feature-stack { display: flex; flex-direction: column; gap: clamp(3rem, 6vw, 5rem); }
  .wk-feature { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
  .wk-feature-text { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
  .wk-feature-text p { font-size: 0.92rem; color: var(--ink-2); line-height: 1.85; }
  .wk-feature-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border-radius: 4px; background: var(--bg-alt); }
  .wk-feature-rev .wk-feature-text { order: 2; }
  .wk-feature-rev .wk-feature-media { order: 1; }
  .wk-feature .wk-ticks { gap: 0.85rem; }
  @media (max-width: 900px) {
    .wk-feature { grid-template-columns: 1fr; gap: 1.75rem; }
    .wk-feature-rev .wk-feature-text, .wk-feature-rev .wk-feature-media { order: 0; }
  }

/* ─────────────────────────────────────────────────────────────────────────────
   AMENITIES DIALOG
   Checkbox-driven like the FAQ accordion, so the full list opens without any
   JavaScript. The toggle sits early in the page; the panel is a later sibling.
───────────────────────────────────────────────────────────────────────────── */
.wk-dialog-toggle { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.wk-dialog-open { cursor: pointer; }
.wk-dialog {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.wk-dialog-toggle:checked ~ .wk-dialog { display: flex; }
.wk-dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(32, 28, 22, 0.45);
  backdrop-filter: blur(2px);
  cursor: pointer;
}
.wk-dialog-card {
  position: relative;
  z-index: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  width: min(64rem, 100%);
  max-height: min(85vh, 100%);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 30px 70px -30px rgba(32, 28, 22, 0.5);
}
.wk-dialog-card .wk-groups { margin-top: 0.9rem; }
.wk-dialog-close {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.wk-dialog-close:hover { color: var(--ink); background: var(--bg-alt); }
@media (max-width: 700px) {
  .wk-dialog { padding: 0.9rem; }
  .wk-dialog-card { padding: 1.5rem 1.35rem; }
}

/* neutral mark for amenity items that come from content rather than a written
   list — an icon chosen by position would mislabel them */
.wk-list .wk-tick {
  flex-shrink: 0;
  width: 17px; height: 17px; margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--accent-dark);
  position: relative;
}
.wk-list .wk-tick::after {
  content: "";
  position: absolute; left: 5px; top: 5px;
  width: 6px; height: 3px;
  border-left: 1.5px solid #F6F2EA; border-bottom: 1.5px solid #F6F2EA;
  transform: rotate(-45deg);
}
.wk-list li:has(.wk-tick) { align-items: flex-start; }

/* the why row's heading sits centred over the three boxes, matching the hero
   above it; the boxes themselves stay left-aligned so the body copy reads */
.wk-why-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-align: center;
}
.wk-why-head .wk-h2 { max-width: 22ch; }

/* the client-type line under a review name */
.wk-qc { color: var(--ink-3); font-size: 0.7rem; }

.wk-dialog-sub {
  font-family: var(--display-font);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  margin-top: 1.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
}