@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/portfolio/groot/a/assets/fonts/schibsted-grotesk-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/portfolio/groot/a/assets/fonts/schibsted-grotesk-latin-italic.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

:root {
  font-synthesis-weight: none;
  font-synthesis-style: none;
  --measure: 58.9ch;
  color-scheme: light;
  --primary: #8e2f2f;
  --primary-hover: #7b2c2b;
  --on-primary: #ffffff;
  --accent: #fee0dd;
  --canvas: #ffffff;
  --ink: #221716;
  --ink-secondary: #221716a6;
  --band-muted: #f9edec;
  --band-accent: #fdd7d4;
  --line: #22171682;
  --line-soft: #22171633;
  --field: #ffffff;
  --error: #a8201a;
  --on-ink: #ffffff;
  --on-ink-secondary: #ffffffc2;
  --on-ink-line: #ffffff3d;

  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-label: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --weight-display: 620;
  --tracking-display: -0.035em;
  --band-quiet: var(--band-muted);
  --band-feature: var(--ink);
  --band-feature-ink: var(--on-ink);
  --radius-media: 3px;
  --radius-control: 3px;
  --rule: 1px solid var(--line);
  --shadow-plate: none;
  --section: 96px;
  --head-gap: 48px;
  --hero-exit: calc(var(--section) / 2);

  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --icon-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M6 13.5l6 6 6-6'/%3E%3C/svg%3E");
  --icon-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12h-15M10.5 6l-6 6 6 6'/%3E%3C/svg%3E");
  --icon-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.9l1.6 4.1-2.1 1.6a11.5 11.5 0 0 0 5.8 5.8l1.6-2.1 4.1 1.6v2.9a2 2 0 0 1-2.1 2A16.5 16.5 0 0 1 4.6 5.6a2 2 0 0 1 2-2.1z'/%3E%3C/svg%3E");
  --icon-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a8 8 0 0 0-6.9 12.1L4 20l4-1.1A8 8 0 1 0 12 4z'/%3E%3Cpath d='M8.8 10.2h6.4M8.8 13.4h4.2'/%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='1.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.5 5 5 10-11'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h16M4 16h16'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5v5.5M12 16.3v.2'/%3E%3C/svg%3E");
  --icon-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 19 6v5.5c0 4.4-3 7.7-7 9-4-1.3-7-4.6-7-9V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.5 10'/%3E%3C/svg%3E");
  --icon-report: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h7.5l4 4v13H6.5z'/%3E%3Cpath d='M14 3.5v4h4M9.5 12h5M9.5 15.5h5'/%3E%3C/svg%3E");

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
  font-kerning: normal;
  scroll-behavior: smooth;
  caret-color: var(--primary);
  accent-color: var(--primary);
  scrollbar-color: var(--line) var(--canvas);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
}

body:has(dialog[open]) {
  overflow: hidden;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 160ms, background-color 160ms, text-decoration-color 160ms;
}

a:hover {
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 4px;
  box-shadow: 0 0 0 9px var(--accent);
}

main:focus {
  outline: none;
}

::selection {
  background: var(--accent);
  color: var(--ink);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
p,
figure,
blockquote,
dl,
dd,
ol,
ul {
  margin: 0;
}

ol,
ul {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: 1.06;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: manual;
}

h1 {
  font-size: clamp(2.3rem, 1.3rem + 3vw, 3.5rem);
}

h2 {
  font-size: clamp(1.85rem, 1.3rem + 1.8vw, 2.7rem);
  line-height: 1.08;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

p,
li,
dd,
dt {
  overflow-wrap: break-word;
}

main p {
  max-width: calc(var(--measure) * 0.9338);
  text-wrap: pretty;
}

.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  max-width: calc(var(--measure) * 0.7641);
}

.fine {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-secondary);
}

.muted {
  color: var(--ink-secondary);
}

.email {
  display: inline-block;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.email-part {
  display: inline-block;
  vertical-align: top;
  text-decoration: inherit;
}

.wrap {
  width: min(1200px, 100% - 96px);
  margin-inline: auto;
}

.section,
.contact-grid,
.service-entries,
main > .wrap:has(> .local-note) {
  padding-block: var(--section);
}

:is(.page-intro, .area-page-intro):has(+ :is(.section, .contact-grid, .service-entries):not(.band-quiet), + .wrap > .local-note) {
  padding-bottom: 0;
}

:is(.section, .contact-grid, .service-entries, main > .wrap:has(> .local-note)):not(.band-quiet) + .section:not(.band-quiet),
.band-quiet + .band-quiet {
  padding-top: 0;
}

:is(.section, .contact-grid, .service-entries, main > .wrap:has(> .local-note)):not(.band-quiet) + .section:not(.band-quiet, :has(> .section-head:first-child)) {
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 100% 1px;
  background-position: top center;
  background-repeat: no-repeat;
  padding-top: var(--hero-exit);
}

:is(.section, .contact-grid, .service-entries, main > .wrap:has(> .local-note)):not(.band-quiet) + .section:not(.band-quiet) > .section-head:first-child,
.band-quiet + .band-quiet > .section-head:first-child {
  padding-top: var(--hero-exit);
}

.band-quiet {
  background: var(--band-quiet);
}

.stack > * + * {
  margin-top: 16px;
}

.skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 20;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--on-ink);
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.icon {
  display: inline-block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  background: currentColor;
  mask: var(--icon-arrow) center / contain no-repeat;
}

.icon-down {
  mask-image: var(--icon-down);
}

.icon-chat {
  mask-image: var(--icon-chat);
}

.icon-back {
  mask-image: var(--icon-back);
}

.icon-phone {
  mask-image: var(--icon-phone);
}

.icon-mail {
  mask-image: var(--icon-mail);
}

.icon-check {
  mask-image: var(--icon-check);
}

.icon-alert {
  mask-image: var(--icon-alert);
}

.icon-shield {
  mask-image: var(--icon-shield);
}

.icon-report {
  mask-image: var(--icon-report);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--primary);
  border-radius: var(--radius-control);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 160ms, border-color 160ms;
}

.button:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.button-quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.button-quiet:hover {
  background: var(--band-muted);
  border-color: var(--ink);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--line);
}

.text-link:hover {
  text-decoration-color: var(--primary);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.demo-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 16px;
  padding: 7px 20px;
  background: var(--ink);
  color: var(--on-ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.demo-bar a {
  color: var(--on-ink);
}

.site-header {
  border-bottom: var(--rule);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 28px;
  min-height: 84px;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  text-decoration: none;
  margin-right: auto;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 680;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.brand-mark {
  color: var(--primary);
}

.brand-tag {
  margin-top: 3px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--ink-secondary);
}

.brand:has(.brand-logo) {
  flex-direction: row;
  align-items: center;
  gap: 0.35em;
}

.brand:has(.brand-logo) .brand-tag,
.brand:has(.brand-logo) .brand-mark,
.brand:has(.brand-logo)::before,
.brand:has(.brand-logo)::after {
  display: none;
}

.brand-logo {
  --logo-area: 6400;
  --logo-max-h: 64;
  --logo-max-w: 240;
  display: block;
  width: auto;
  height: calc(
    min(
        var(--logo-max-h),
        sqrt(var(--logo-area) / var(--logo-ratio)),
        var(--logo-max-w) / var(--logo-ratio)
      ) * 1px
  );
}

.site-footer .brand-logo {
  --logo-area: 4000;
  --logo-max-h: 48;
  --logo-max-w: 200;
}

.brand-symbol {
  height: min(1.5em, var(--logo-max-h) * 1px);
}

.brand:has(.brand-symbol) {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
}

@media (min-width: 901px) and (max-width: 1080px) {
  .brand-logo {
    --logo-max-w: 120;
  }
}

@media (max-width: 760px) {
  .brand-logo {
    --logo-max-h: 56;
    --logo-max-w: 120;
  }
}

@media (max-width: 480px) {
  .brand-logo {
    --logo-area: 3600;
    --logo-max-h: 52;
  }

  .site-footer .brand-logo {
    --logo-area: 2500;
    --logo-max-h: 36;
    --logo-max-w: 140;
  }
}

.lang-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lang-switch a:hover {
  text-decoration: underline;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a:not(.button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav a:not(.button):hover,
.site-nav a[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.5em;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 600;
}

.menu-toggle::before {
  content: '';
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  mask: var(--icon-menu) center / contain no-repeat;
}

.menu-toggle[aria-expanded='true']::before {
  mask-image: var(--icon-close);
}

.breadcrumbs {
  padding-top: 24px;
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.breadcrumbs li + li::before {
  content: '/';
  margin-inline: 10px;
  color: var(--line);
}

.section-head {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px 32px;
  padding-top: 22px;
  margin-bottom: var(--head-gap);
  border-top: var(--rule);
}

.section-head::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  width: 64px;
  height: 3px;
  background: var(--primary);
}

.section-head h2 {
  grid-column: 1 / span 6;
}

.section-head > p,
.section-head > div {
  grid-column: 8 / -1;
  align-self: end;
}

.section-head .lead {
  max-width: calc(var(--measure) * 0.781);
  font-weight: 600;
}

.frame {
  padding: 8px;
  border: var(--rule);
  border-radius: var(--radius-media);
  background: var(--canvas);
}

.band-quiet .frame {
  background: var(--band-quiet);
}

.frame img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 1px;
}

.frame-portrait img {
  aspect-ratio: 4 / 5;
  object-position: 50% 22%;
}

.frame figcaption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-secondary);
}

.frame figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.gallery-link {
  display: block;
  position: relative;
  cursor: zoom-in;
}

.gallery-link .image-open {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--line);
}

.image-open svg {
  width: 16px;
  height: 16px;
}

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: center;
  padding-block: 64px var(--hero-exit);
}

.hero-copy {
  grid-column: 1 / span 6;
}

.hero-copy h1 span {
  display: block;
  color: var(--ink-secondary);
}

.hero-copy .lead {
  margin-top: 28px;
}

.hero-copy .actions {
  margin-top: 32px;
}

.hero-figure {
  grid-column: 7 / -1;
}

.sheet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: var(--rule);
}

.sheet > div {
  padding: 20px 24px 22px;
  min-width: 0;
}

.sheet > div + div {
  border-left: var(--rule);
}

.sheet > div:first-child {
  padding-left: 0;
}

.sheet dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-secondary);
}

.sheet dd {
  margin-top: 6px;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.hero-sheet {
  margin-bottom: 8px;
}

.service-rows {
  border-top: var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px 32px;
  padding-block: 28px;
  border-bottom: var(--rule);
}

.service-row h3 {
  grid-column: 1 / span 4;
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}

.service-row p {
  grid-column: 5 / -1;
  color: var(--ink-secondary);
}

.service-row .text-link {
  grid-column: 5 / -1;
  justify-self: start;
}

@media (min-width: 1081px) {
  .service-rows[data-full-measure] > .service-row > p {
    max-width: none;
  }
}

.price-rows .price {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}

@media (min-width: 761px) {
  .price-rows > .service-row {
    align-items: baseline;
  }

  .price-rows > .service-row > h3 {
    grid-column: 1 / span 4;
  }

  .price-rows > .service-row > .price {
    grid-column: 5 / span 4;
    justify-self: center;
  }

  .price-rows > .service-row > p:not(.price) {
    grid-column: 9 / -1;
    justify-self: end;
    text-align: end;
  }
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  counter-reset: step;
  border-top: var(--rule);
}

.steps li {
  position: relative;
  padding: 24px 28px 8px 0;
  min-width: 0;
}

.steps li + li {
  padding-left: 28px;
  border-left: var(--rule);
}

.step-number {
  display: block;
  margin-bottom: 18px;
  font-size: 2.5rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--primary);
}

.steps h3 {
  margin-bottom: 10px;
}

.steps p {
  color: var(--ink-secondary);
}

.process-note {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-weight: 500;
}

.process-note .icon {
  color: var(--primary);
}

.finding-feature {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.finding-feature .comparison,
.finding-feature .finding-figure {
  grid-column: 1 / span 7;
}

.finding-feature .finding-body {
  grid-column: 8 / -1;
  padding: 30px 30px 12px;
  border: var(--rule);
  background: var(--field);
}

.finding-feature .finding-rows > div:last-child {
  border-bottom: 0;
}

.finding-body h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}

.finding-rows {
  border-top: var(--rule);
}

.finding-rows > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.finding-rows dt {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--ink-secondary);
}

.finding-rows dd {
  min-width: 0;
  max-width: calc(var(--measure) * 0.9338);
}

.findings {
  display: grid;
  gap: 64px;
}

.finding-feature + .findings {
  margin-top: 72px;
}

.finding {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  gap: 20px 32px;
  align-items: start;
  min-width: 0;
}

.finding > .frame {
  grid-column: 1 / span 7;
  grid-row: 1 / span 2;
}

.finding > h3,
.finding > .finding-rows {
  grid-column: 8 / -1;
}

.finding:not(:has(> .frame)) > h3 {
  grid-column: 1 / span 5;
}

.finding:not(:has(> .frame)) > .finding-rows {
  grid-column: 6 / -1;
}

.finding h3 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.comparison-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.comparison-stage img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.comparison-stage .close-up picture {
  overflow: hidden;
}

.comparison-stage .close-up img {
  scale: 1.6;
  transform-origin: 30% 75%;
}

.comparison-stage figcaption {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.comparison-handle {
  display: none;
}

.comparison > .fine {
  margin-top: 10px;
}

.comparison.is-interactive .comparison-stage {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 1px;
  cursor: ew-resize;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.comparison.is-interactive .comparison-stage figure {
  position: absolute;
  inset: 0;
}

.comparison.is-interactive .comparison-stage picture,
.comparison.is-interactive .comparison-stage img {
  height: 100%;
  aspect-ratio: auto;
}

.comparison.is-interactive .comparison-stage figure:first-of-type {
  z-index: 1;
  clip-path: inset(0 calc(100% - var(--reveal, 50%)) 0 0);
}

.comparison.is-interactive .comparison-handle {
  display: block;
  position: absolute;
  inset-block: 0;
  left: var(--reveal, 50%);
  z-index: 2;
  width: 4px;
  translate: -50% 0;
  background: var(--canvas);
  border-inline: 1px solid var(--line);
  pointer-events: none;
}

.comparison-handle svg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 38px;
  height: 38px;
  padding: 10px;
  translate: -50% -50%;
  border-radius: 50%;
  background: var(--canvas);
  color: var(--ink);
  border: 1px solid var(--line);
}

.comparison-stage:has(:focus-visible) .comparison-handle svg {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

.comparison.is-interactive figcaption {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 2px 9px;
  border-radius: 2px;
  background: var(--canvas);
  color: var(--ink);
}

.comparison.is-interactive figure:last-of-type figcaption {
  left: auto;
  right: 12px;
}

.story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.story-figure {
  grid-column: 1 / span 5;
}

.story-body {
  grid-column: 7 / -1;
}

.story-body h2 {
  margin-bottom: 28px;
}

.story-body p + p {
  margin-top: 16px;
}

.ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.ledger h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: var(--rule);
  font-size: 1rem;
  letter-spacing: -0.01em;
}

.ledger h3 .icon {
  color: var(--primary);
}

.ledger li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line-soft);
}

.ledger li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background: var(--primary);
  mask: var(--icon-check) center / contain no-repeat;
}

.reviews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 32px;
}

.reviews > li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.review {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: var(--rule);
}

.review blockquote p {
  max-width: calc(var(--measure) * 0.7641);
  font-style: italic;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.55;
}

.review figcaption {
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.review figcaption strong {
  color: var(--ink);
  font-weight: 600;
}

.team {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: start;
  gap: 40px 32px;
  list-style: none;
}

@media (min-width: 761px) {
  .team > li {
    grid-column: span 2;
    flex-basis: calc((100% - 64px) / 3);
    min-width: 0;
  }

  .team > li:is(:nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)), :nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)) ~ li):has(picture),
  .team > :nth-last-child(2 of :has(picture)):nth-child(3n + 4 of :has(picture)):has(picture),
  .team > :nth-last-child(1 of :has(picture)):nth-child(3n + 5 of :has(picture)):has(picture) {
    grid-column: span 3;
    flex-basis: calc((100% - 32px) / 2);
  }
}

@media (min-width: 1081px) {
  :is(
      .team > li:is(:nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)), :nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)) ~ li),
      .team > :nth-last-child(2 of :has(picture)):nth-child(3n + 4 of :has(picture)),
      .team > :nth-last-child(1 of :has(picture)):nth-child(3n + 5 of :has(picture))
    )
    > .member:has(> picture) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    column-gap: 32px;
  }

  :is(
      .team > li:is(:nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)), :nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)) ~ li),
      .team > :nth-last-child(2 of :has(picture)):nth-child(3n + 4 of :has(picture)),
      .team > :nth-last-child(1 of :has(picture)):nth-child(3n + 5 of :has(picture))
    )
    > .member
    > picture {
    grid-row: 1 / -1;
    margin-bottom: 0;
  }

  :is(
      .team > li:is(:nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)), :nth-last-child(4 of :has(picture)):nth-child(3n + 1 of :has(picture)) ~ li),
      .team > :nth-last-child(2 of :has(picture)):nth-child(3n + 4 of :has(picture)),
      .team > :nth-last-child(1 of :has(picture)):nth-child(3n + 5 of :has(picture))
    )
    > .member
    > picture
    + h3 {
    padding-top: 18px;
    border-top: var(--rule);
  }
}

.member > picture {
  margin-bottom: 18px;
  padding: 8px;
  border: var(--rule);
  border-radius: var(--radius-media);
}

.member img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: 1px;
}

.member:not(:has(> picture)) {
  padding-top: 18px;
  border-top: var(--rule);
}

.team:has(picture) > li:not(:has(picture)) {
  order: 1;
}

@media (min-width: 761px) {
  .team:has(picture):has(> li > .member > h3:first-child),
  .team:has(picture):has(> li:nth-child(2):last-child) {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .team:has(picture) > li:not(:has(picture)) {
    flex-basis: 100%;
  }

  .team:has(picture) > li:not(:has(picture)) > .member {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 32px;
  }

  .team:has(picture) > li:not(:has(picture)) > .member > h3 {
    grid-row: 1;
    grid-column: span 2;
  }

  .team:has(picture) > li:not(:has(picture)) > .member > .member-role {
    grid-row: 2;
    grid-column: span 2;
  }

  .team:has(picture) > li:not(:has(picture)) > .member > .member-role + p {
    grid-row: 1 / span 2;
    grid-column: 3 / -1;
    margin-top: 0;
  }
}

.member h3 {
  font-size: 1.25rem;
  line-height: 1.25;
}

.member-role {
  margin-top: 4px;
  color: var(--ink-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

.member-role + p {
  max-width: calc(var(--measure) * 0.7641);
  margin-top: 10px;
  color: var(--ink-secondary);
}

@media (max-width: 760px) {
  .team > li {
    grid-column: 1 / -1;
  }

  .team:has(> :nth-child(2)) {
    --inset: 20px;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 21rem);
    gap: 20px;
    margin-inline: calc(-1 * var(--inset));
    padding-inline: var(--inset);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--inset);
    scroll-snap-type: inline mandatory;
  }

  .team:has(> :nth-child(2)) > li {
    grid-column: auto;
    scroll-snap-align: start;
  }

  .team > :only-child .member > picture {
    max-width: min(82vw, 21rem);
  }
}

@media (max-width: 420px) {
  .team:has(> :nth-child(2)) {
    --inset: 16px;
  }
}

.areas-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
}

.areas-figure {
  grid-column: 1 / span 5;
}

.areas-layout .areas {
  grid-column: 7 / -1;
  grid-template-columns: 1fr;
  gap: 36px;
}

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

.area {
  display: grid;
  align-content: start;
  gap: 12px;
  padding-top: 20px;
  border-top: var(--rule);
}

.area h3 {
  font-size: 1.5rem;
  letter-spacing: -0.025em;
}

.area p {
  color: var(--ink-secondary);
}

.area .fine {
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

.closing {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 32px;
  align-items: end;
}

.closing-copy {
  grid-column: 1 / span 7;
}

.closing-copy h2 {
  margin-bottom: 18px;
}

.closing .actions {
  grid-column: 9 / -1;
  justify-content: flex-end;
}

.page-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
  padding-block: 40px var(--hero-exit);
}

.page-intro-copy {
  grid-column: 1 / span 6;
}

.page-intro-copy .lead {
  margin-top: 24px;
}

.page-intro-copy .actions {
  margin-top: 28px;
}

.page-intro .frame {
  grid-column: 7 / -1;
}

@media (min-width: 1081px) {
  .page-intro:not(:has(.frame, .emergency)) {
    grid-template-rows: auto auto 1fr;
    row-gap: 0;
  }

  .page-intro:not(:has(.frame, .emergency)) .page-intro-copy {
    display: contents;
  }

  .page-intro:not(:has(.frame, .emergency)) .page-intro-copy > h1 {
    grid-column: 1 / span 6;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .page-intro:not(:has(.frame, .emergency)) .page-intro-copy > :not(h1) {
    grid-column: 8 / -1;
  }

  .page-intro:not(:has(.frame, .emergency)) .page-intro-copy > .lead {
    margin-top: 0;
  }
}

.service-entry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: start;
  padding-block: 56px;
  border-top: var(--rule);
}

.service-entry:last-child {
  border-bottom: var(--rule);
}

.service-entry-body {
  grid-column: 1 / span 6;
}

.service-entry-body h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.4rem);
  margin-bottom: 20px;
}

.service-entry-body .lead + p {
  margin-top: 14px;
}

.service-entry-body .text-link {
  margin-top: 16px;
}

.service-entry .frame {
  grid-column: 8 / -1;
}

.service-entry:nth-child(even) .service-entry-body {
  grid-column: 7 / -1;
  grid-row: 1;
}

.service-entry:nth-child(even) .frame {
  grid-column: 1 / span 5;
  grid-row: 1;
}

@media (min-width: 1081px) {
  .service-entry:nth-child(even):has(> .frame :is(img, video)) > .service-entry-body {
    display: grid;
    justify-self: end;
    justify-items: end;
    text-align: end;
  }
}

@media (min-width: 1081px) {
  .service-entry:not(:has(> .frame :is(img, video))) .service-entry-body {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: 32px;
    align-items: start;
  }

  .service-entry:not(:has(> .frame :is(img, video))) .service-entry-body > h2 {
    grid-row: 1 / span 4;
    margin-bottom: 0;
  }

  .service-entry:not(:has(> .frame :is(img, video))) .service-entry-body > :not(h2) {
    grid-column: 2;
  }
}

.package {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px 32px;
  padding: 40px;
  border: var(--rule);
  border-radius: var(--radius-media);
  background: var(--canvas);
}

.package + .package {
  margin-top: 24px;
}

.package-head {
  grid-column: 1 / span 5;
}

.package-head h3 {
  font-size: 1.75rem;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.package-head p {
  color: var(--ink-secondary);
}

.package-head .button {
  margin-top: 24px;
}

.package-list {
  grid-column: 7 / -1;
  border-top: var(--rule);
}

.package-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  padding-block: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}

.package-list li::before {
  content: '';
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background: var(--primary);
  mask: var(--icon-check) center / contain no-repeat;
}

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

.pricing article {
  padding-top: 20px;
  border-top: var(--rule);
}

.pricing h3 {
  margin-bottom: 12px;
}

.pricing p {
  color: var(--ink-secondary);
  max-width: calc(var(--measure) * 0.8829);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 32px;
}

.contact-lines {
  grid-column: 1 / span 6;
  border-top: var(--rule);
}

.contact-lines > div {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  padding-block: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.contact-lines dt {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 2;
  color: var(--ink-secondary);
}

.contact-lines dd a {
  font-size: 1.125rem;
  font-weight: 600;
}

.contact-lines dd .fine {
  margin-top: 4px;
}

.contact-side {
  grid-column: 8 / -1;
  display: grid;
  align-content: start;
  gap: 40px;
}

.map-block {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding-top: 18px;
  border-top: var(--rule);
}

.service-rows + .process-note,
.contact-side > :has(> .hours) + .map-block {
  border-top: 0;
}

@media (min-width: 1081px) {
  .contact-grid:has(> .contact-side > div:first-child > .hours):has(> .contact-side > .map-block:nth-child(2):last-child) {
    grid-template-rows: auto 1fr;
  }

  .contact-side:has(> div:first-child > .hours):has(> .map-block:nth-child(2):last-child) {
    display: contents;
  }

  .contact-side > :has(> .hours):has(+ .map-block) {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
  }

  .contact-side > :has(> .hours) + .map-block {
    grid-column: 1 / span 6;
    grid-row: 2;
    align-self: start;
    padding-top: 0;
  }
}

.map-load {
  min-height: 48px;
  padding: 0 20px;
  border: var(--rule);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--ink);
  font: 600 1rem/1.2 var(--font-body);
  cursor: pointer;
}

.map-load:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.map-frame {
  justify-self: stretch;
  width: 100%;
  height: 320px;
  border: var(--rule);
  border-radius: var(--radius-media);
  background: var(--field);
}

.hours {
  border-top: var(--rule);
}

.hours > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line-soft);
}

.hours dt {
  font-weight: 500;
}

.hours-title,
.side-title {
  margin-bottom: 14px;
  font-size: 1.25rem;
}

.page-intro .emergency {
  grid-column: 8 / -1;
  align-self: end;
}

.emergency {
  padding-block: 22px;
  border-block: var(--rule);
}

.emergency h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.emergency h2 .icon {
  color: var(--primary);
}

.emergency .text-link {
  margin-top: 8px;
}

.emergency .text-link .icon {
  color: var(--primary);
}

.enquiry {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 32px;
  align-items: start;
}

.enquiry-copy {
  grid-column: 1 / span 4;
}

.enquiry-copy h2 {
  margin-bottom: 20px;
}

.enquiry-copy p + p {
  margin-top: 14px;
}

.quote-form {
  grid-column: 6 / -1;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.quote-form fieldset {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.quote-form fieldset:disabled .field {
  opacity: 0.6;
}

.field {
  min-width: 0;
}

.field-full,
.form-actions {
  grid-column: 1 / -1;
}

.field label {
  display: block;
  margin-bottom: 7px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.field label span {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ink-secondary);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--field);
  color: var(--ink);
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
}

.field input:hover,
.field textarea:hover,
.field select:hover {
  border-color: var(--ink);
}

.field input[type='file'] {
  padding: 12px;
  border-style: dashed;
  font-size: 0.875rem;
}

input::file-selector-button {
  margin-right: 12px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--canvas);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.field-help {
  margin-top: 6px;
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.field-error {
  display: block;
  margin-top: 5px;
  font-size: 0.875rem;
  color: var(--error);
}

.field-error:empty {
  display: none;
}

[aria-invalid='true'] {
  border-color: var(--error) !important;
  box-shadow: inset 0 0 0 1px var(--error);
}

.photo-list {
  margin-top: 10px;
}

.photo-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 6px 6px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-control);
  background: var(--field);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.photo-list li + li {
  margin-top: 6px;
}

.photo-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
}

.photo-remove:hover {
  background: var(--band-muted);
}

.form-error-summary {
  margin-bottom: 24px;
  padding: 18px 20px;
  border: 1px solid var(--error);
  border-radius: var(--radius-control);
  background: var(--field);
}

.form-error-summary h3 {
  font-size: 1rem;
  color: var(--error);
}

.form-error-summary ul {
  margin-top: 8px;
  padding-left: 1.2em;
  list-style: disc;
  font-size: 0.9375rem;
}

.form-error-summary a {
  color: var(--error);
}

.form-actions {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 14px;
}

.form-privacy {
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

.form-status {
  font-size: 0.9375rem;
  font-weight: 600;
}

.form-status:empty {
  display: none;
}

.form-recovery {
  padding-block: 14px;
  border-block: var(--rule);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.quote-form a[href^='tel:'] {
  white-space: nowrap;
}

.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.turnstile-widget {
  grid-column: 1 / -1;
}

.turnstile-widget:empty {
  display: none;
}

.contact-after {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 48px 32px;
}

.contact-after > div:first-child {
  grid-column: 1 / span 5;
}

.contact-after > div:last-child {
  grid-column: 7 / -1;
}

.contact-after h2 {
  margin-bottom: 24px;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}

.area-links li {
  border-bottom: 1px solid var(--line-soft);
}

.area-links li:first-child {
  border-top: var(--rule);
}

.area-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  font-weight: 600;
  text-decoration: none;
}

.area-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
}

.area-links .icon {
  color: var(--primary);
}

.area-links + .fine {
  margin-top: 16px;
}

details {
  border-bottom: var(--rule);
}

details:first-of-type {
  border-top: var(--rule);
}

summary {
  position: relative;
  padding: 18px 44px 18px 0;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '';
  position: absolute;
  top: 20px;
  right: 4px;
  width: 20px;
  height: 20px;
  background: var(--primary);
  mask: var(--icon-plus) center / contain no-repeat;
}

details[open] summary::after {
  mask-image: var(--icon-minus);
}

details p {
  padding-bottom: 22px;
  color: var(--ink-secondary);
}

.area-page-intro {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
  align-items: end;
  padding-block: 40px var(--hero-exit);
}

.area-page-copy {
  grid-column: 1 / span 7;
}

@media (min-width: 1081px) {
  .area-page-intro:not(:has(> .frame)) {
    grid-template-rows: auto auto 1fr;
    row-gap: 0;
  }

  .area-page-intro:not(:has(> .frame)) .area-page-copy {
    display: contents;
  }

  .area-page-intro:not(:has(> .frame)) .area-page-copy > h1 {
    grid-column: 1 / span 6;
    grid-row: 1 / span 3;
    align-self: start;
  }

  .area-page-intro:not(:has(> .frame)) .area-page-copy > :not(h1) {
    grid-column: 8 / -1;
  }

  .area-page-intro:not(:has(> .frame)) .area-page-copy > .lead {
    margin-top: 0;
  }
}

.area-page-intro > .frame {
  grid-column: 8 / -1;
}

.area-page-intro h1 {
  max-width: calc(var(--measure) * 0.2717);
}

.area-page-intro .lead {
  margin-top: 24px;
  max-width: calc(var(--measure) * 0.8829);
}

.area-page-intro .actions {
  margin-top: 28px;
}

.local-note {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px 32px;
  padding-top: 20px;
  border-top: var(--rule);
}

.local-note h2 {
  grid-column: 1 / span 4;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

.local-note p {
  grid-column: 5 / -1;
  font-size: 1.125rem;
  line-height: 1.6;
}

.service-links {
  border-top: var(--rule);
}

.service-links li {
  border-bottom: 1px solid var(--line-soft);
}

.service-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration: none;
}

.service-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--primary);
}

.service-links .icon {
  color: var(--primary);
}

.document {
  max-width: 760px;
  padding-block: 8px var(--section);
}

.document h1 {
  margin-block: 28px 24px;
  font-size: clamp(2.1rem, 1.5rem + 2vw, 3rem);
}

.document h2 {
  margin-block: 40px 12px;
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.document p {
  color: var(--ink-secondary);
}

.document p + p {
  margin-top: 14px;
}

.document .lead {
  color: var(--ink);
}

.document .actions {
  margin-top: 36px;
}

.document-english {
  margin-top: 48px;
  padding-top: 8px;
  border-top: var(--rule);
}

.status-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-top: 36px;
  border: 1px solid var(--primary);
  border-radius: 50%;
  color: var(--primary);
  font-size: 1.5rem;
}

.site-footer {
  --on-ink-secondary: color-mix(in oklab, var(--band-feature-ink) 78%, var(--band-feature));
  --on-ink-line: color-mix(in oklab, var(--band-feature-ink) 24%, var(--band-feature));
  padding-block: 64px 28px;
  background: var(--band-feature);
  color: var(--band-feature-ink);
}

.site-footer :focus-visible {
  outline-color: var(--accent);
  box-shadow: none;
}

.site-footer ::selection {
  background: var(--accent);
  color: var(--ink);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 0.9fr 1.3fr 1fr;
  gap: 40px 32px;
}

.site-footer .brand-tag {
  color: var(--on-ink-secondary);
}

.site-footer .brand-mark {
  color: var(--accent);
}

.footer-grid > div > p {
  max-width: calc(var(--measure) * 0.5094);
  margin-top: 16px;
  font-size: 0.9375rem;
  color: var(--on-ink-secondary);
}

.footer-grid h2 {
  margin-bottom: 12px;
  font-family: var(--font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--on-ink-secondary);
}

.footer-links {
  display: flex;
  flex-direction: column;
  align-items: start;
  font-style: normal;
}

.footer-links a,
.footer-links > span,
.footer-list li {
  padding-block: 5px;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.footer-links a {
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.certifications {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 44px;
  padding-block: 20px;
  border-block: 1px solid var(--on-ink-line);
  font-size: 0.875rem;
  color: var(--on-ink-secondary);
}

.certifications li::before {
  content: '';
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 10px;
  vertical-align: -0.2em;
  background: var(--accent);
  mask: var(--icon-check) center / contain no-repeat;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 28px;
  margin-top: 22px;
  font-size: 0.8125rem;
  color: var(--on-ink-secondary);
}

.footer-bottom nav {
  display: flex;
  gap: 22px;
}

.footer-bottom nav a {
  display: inline-block;
  padding-block: 10px;
}

.vb-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
  color: var(--on-ink-secondary);
  text-decoration: none;
}

.vb-mark svg {
  width: 36px;
  height: 24px;
}

.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: var(--on-ink);
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y pinch-zoom;
}

.lightbox[open] {
  display: grid;
  grid-template: auto minmax(0, 1fr) / auto minmax(0, 1fr) auto;
  grid-template-areas:
    'bar bar bar'
    'previous view next';
  animation: lightbox-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lightbox::backdrop {
  background: transparent;
}

.lightbox :focus-visible {
  outline-color: var(--on-ink);
  outline-offset: 3px;
  box-shadow: none;
}

.lightbox-bar {
  grid-area: bar;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px 8px 32px;
}

.lightbox-count {
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--on-ink-secondary);
}

.lightbox-view {
  grid-area: view;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-height: 0;
  padding-bottom: 32px;
}

.lightbox-view img {
  width: auto;
  min-height: 0;
  max-height: 100%;
  border-radius: 1px;
  -webkit-user-drag: none;
}

.lightbox-view figcaption {
  max-width: calc(var(--measure) * 1.0526);
  text-align: center;
  font-size: 0.875rem;
  color: var(--on-ink-secondary);
}

.lightbox-button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff14;
  color: inherit;
  transition: background-color 160ms;
}

.lightbox-button:hover {
  background: #ffffff2e;
}

.lightbox-button svg {
  width: 22px;
  height: 22px;
}

.lightbox-previous,
.lightbox-next {
  align-self: center;
  margin-inline: 24px;
}

.lightbox-previous {
  grid-area: previous;
}

.lightbox-next {
  grid-area: next;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
  }
}

@media (max-width: 1080px) {
  .wrap {
    width: min(1200px, 100% - 64px);
  }

  :root {
    --section: 80px;
  }

  .hero {
    padding-top: 48px;
  }

  .hero-copy,
  .hero-figure {
    grid-column: 1 / -1;
  }

  .hero-copy {
    max-width: 720px;
  }

  .sheet {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sheet > div:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .sheet > div:nth-child(n + 3) {
    border-top: var(--rule);
  }

  .section-head h2,
  .section-head > p,
  .section-head > div {
    grid-column: 1 / -1;
  }

  .service-row h3 {
    grid-column: 1 / -1;
  }

  .service-row p {
    grid-column: 1 / span 9;
  }

  .service-row .text-link {
    grid-column: 1 / -1;
  }

  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .steps li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .steps li:nth-child(n + 3) {
    border-top: var(--rule);
    margin-top: 16px;
  }

  .finding-feature .comparison,
  .finding-feature .finding-figure,
  .finding-feature .finding-body,
  .finding > *,
  .finding > .frame,
  .finding > h3,
  .finding > .finding-rows,
  .finding:not(:has(> .frame)) > h3,
  .finding:not(:has(> .frame)) > .finding-rows,
  .area-page-copy,
  .area-page-intro > .frame {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .story-figure {
    grid-column: 1 / span 5;
  }

  .story-body {
    grid-column: 6 / -1;
  }

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

  .closing-copy,
  .closing .actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .areas-figure {
    grid-column: 1 / span 5;
  }

  .areas-layout .areas {
    grid-column: 6 / -1;
  }

  .page-intro-copy,
  .page-intro .frame,
  .page-intro .emergency {
    grid-column: 1 / -1;
  }

  .service-entry-body,
  .service-entry .frame,
  .service-entry:nth-child(even) .service-entry-body,
  .service-entry:nth-child(even) .frame {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .package-head,
  .package-list {
    grid-column: 1 / -1;
  }

  .contact-lines,
  .contact-side {
    grid-column: 1 / -1;
  }

  .enquiry-copy,
  .quote-form {
    grid-column: 1 / -1;
  }

  .enquiry-copy {
    max-width: 640px;
  }

  .contact-after > div:first-child,
  .contact-after > div:last-child {
    grid-column: 1 / -1;
  }

  .local-note h2,
  .local-note p {
    grid-column: 1 / -1;
  }

  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1080px) {
  .site-header.nav-ready .site-nav {
    display: none;
  }

  .site-header.nav-ready.menu-open .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    padding-bottom: 16px;
  }

  .site-header.nav-ready.menu-open .site-nav a:not(.button) {
    padding: 10px 2px;
    border-top: 1px solid var(--line-soft);
    text-underline-offset: 0.3em;
  }

  .site-header.nav-ready.menu-open .site-nav .button {
    margin-top: 12px;
  }

  .site-nav {
    flex-wrap: wrap;
    gap: 4px 22px;
  }

  .site-header:not(:has(.menu-toggle)) .header-inner {
    flex-wrap: nowrap;
  }
}

@media (max-width: 760px) {
  .wrap {
    width: min(1200px, 100% - 40px);
  }

  .reviews {
    grid-template-columns: minmax(0, 1fr);
  }

  :root {
    --section: 56px;
    --head-gap: 32px;
  }

  .section-head,
  .hero,
  .service-row,
  .finding-feature,
  .finding,
  .area-page-intro,
  .story,
  .areas-layout,
  .closing,
  .page-intro,
  .service-entry,
  .package,
  .contact-grid,
  .enquiry,
  .contact-after,
  .local-note {
    column-gap: 0;
  }

  .header-inner {
    min-height: 72px;
    padding-block: 12px;
  }

  .site-header:not(:has(.menu-toggle)) .header-inner {
    column-gap: 12px;
  }

  .breadcrumbs {
    padding-top: 16px;
  }

  .brand-name {
    font-size: 1.35rem;
  }

  .brand-tag {
    display: none;
  }

  .hero {
    padding-top: 32px;
  }

  .hero-copy .lead {
    margin-top: 20px;
  }

  .hero-copy .actions {
    margin-top: 24px;
  }

  .actions .button {
    width: 100%;
  }

  .sheet > div {
    padding: 16px 12px 18px 16px;
  }

  .sheet > div:nth-child(odd) {
    padding-left: 0;
  }

  .sheet dd {
    font-size: 1.125rem;
  }

  .service-row {
    padding-block: 22px;
  }

  .service-row p {
    grid-column: 1 / -1;
  }

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

  .steps li,
  .steps li + li {
    padding: 20px 0 8px;
    border-left: 0;
  }

  .steps li + li {
    border-top: var(--rule);
    margin-top: 12px;
  }

  .step-number {
    margin-bottom: 12px;
    font-size: 2rem;
  }

  .finding-rows > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

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

  .finding-feature + .findings {
    margin-top: 48px;
  }

  .story-figure,
  .story-body {
    grid-column: 1 / -1;
  }

  .story-figure {
    max-width: 420px;
  }

  .areas {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .areas-figure,
  .areas-layout .areas {
    grid-column: 1 / -1;
  }

  .page-intro {
    padding-top: 24px;
  }

  .page-intro-copy .lead {
    margin-top: 20px;
  }

  .page-intro-copy .actions {
    margin-top: 24px;
  }

  .service-entry {
    row-gap: 20px;
    padding-block: 24px;
  }

  .service-entry .frame img {
    aspect-ratio: 16 / 9;
  }

  .service-entry-body h2 {
    margin-bottom: 14px;
  }

  .page-intro > .frame {
    display: none;
  }

  .package {
    padding: 24px 20px;
  }

  .package-list li {
    padding-block: 12px;
  }

  .pricing {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .contact-lines > div {
    grid-template-columns: 1fr;
    gap: 2px;
    padding-block: 14px;
  }

  .quote-form fieldset {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }

  .form-actions .button {
    width: 100%;
  }

  .area-page-intro {
    padding-top: 24px;
  }

  .site-footer {
    padding-top: 56px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 20px;
  }

  .certifications {
    margin-top: 32px;
    padding-block: 16px;
  }

  .footer-bottom {
    column-gap: 16px;
  }

  .footer-bottom nav {
    gap: 18px;
  }

  .footer-bottom p {
    flex-basis: 100%;
  }

  .lightbox-bar {
    padding-left: 20px;
  }

  .lightbox-previous,
  .lightbox-next {
    position: fixed;
    bottom: 20px;
    margin: 0;
  }

  .lightbox-previous {
    left: 20px;
  }

  .lightbox-next {
    right: 20px;
  }

  .lightbox[open] {
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
    grid-template-areas:
      'bar'
      'view';
  }

  .lightbox-view {
    padding: 0 12px 96px;
  }
}

@media (max-width: 420px) {
  .wrap {
    width: min(1200px, 100% - 32px);
  }

  .header-inner {
    column-gap: 12px;
  }

  h1 {
    font-size: 2rem;
  }

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

  .sheet > div,
  .sheet > div:nth-child(odd) {
    padding: 14px 0;
    border-left: 0;
  }

  .sheet > div + div {
    border-left: 0;
    border-top: 1px solid var(--line-soft);
  }

  .sheet > div:nth-child(3) {
    border-top: 1px solid var(--line-soft);
  }

  .footer-grid {
    row-gap: 20px;
  }

  .footer-grid > div:has(address),
  .footer-grid > div:has(.footer-list) {
    grid-column: 1 / -1;
  }

  .package {
    padding: 20px 16px;
  }
}

.header-action {
  display: none;
}

@media (max-width: 1080px) {
  .site-header.nav-ready .header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    border-radius: var(--radius-control);
    background: var(--primary);
    color: var(--on-primary);
  }

  .site-header.nav-ready .header-action:hover {
    background: var(--primary-hover);
    color: var(--on-primary);
  }
}

@media (max-width: 480px) {
  body {
    line-height: 1.6;
  }

  .demo-bar {
    font-size: 0.75rem;
  }

  .header-inner {
    column-gap: 8px;
  }

  .site-header:not(:has(.menu-toggle)) .site-nav {
    display: none;
  }

  .site-header:not(:has(.menu-toggle)) .header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    min-height: 46px;
    border-radius: var(--radius-control);
    background: var(--primary);
    color: var(--on-primary);
  }

  .site-header:not(:has(.menu-toggle)) .header-action:hover {
    background: var(--primary-hover);
    color: var(--on-primary);
  }

  .menu-toggle {
    position: relative;
    justify-content: center;
    min-width: 46px;
    padding-inline: 13px;
  }

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

  .lang-switch a {
    justify-content: center;
    min-width: 44px;
    font-size: 0;
  }

  .lang-switch a::after {
    content: attr(hreflang) / '';
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .site-footer {
    padding-top: 48px;
  }

  .footer-grid {
    row-gap: 20px;
  }

  .footer-grid > div:first-child > p {
    display: none;
  }

  .footer-links a,
  .footer-links > span,
  .footer-list li {
    padding-block: 3px;
  }

  .certifications {
    gap: 2px 16px;
    margin-top: 24px;
    padding-block: 10px;
    font-size: 0.8125rem;
  }

  .certifications li {
    padding-block: 2px;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    gap: 0 16px;
    margin-top: 16px;
  }

  .footer-bottom p {
    flex-basis: 100%;
  }
}

.form-open {
  display: none;
}

@media (max-width: 760px) {
  section:not(:target) > .enquiry .form-open {
    display: inline-flex;
    width: 100%;
    margin-top: 20px;
  }

  section:not(:target) > .enquiry > .quote-form > fieldset {
    display: none;
  }

  .finding-feature .finding-body {
    padding: 22px 18px 4px;
  }

  .service-entries,
  .findings:has(> :nth-child(2)) {
    --inset: 20px;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 21rem);
    gap: 20px;
    padding-inline: var(--inset);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--inset);
    scroll-snap-type: inline mandatory;
  }

  .service-entries {
    display: grid;
    width: auto;
    border-bottom: var(--rule);
  }

  .findings:has(> :nth-child(2)) {
    grid-template-columns: none;
    margin-inline: calc(-1 * var(--inset));
  }

  .service-entries > .service-entry {
    align-content: start;
    border-bottom: 0;
  }

  .service-entries > *,
  .findings > *,
  .price-rows > * {
    scroll-snap-align: start;
  }

  .price-rows:has(> :nth-child(2)) {
    --inset: 20px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(82vw, 21rem);
    gap: 20px;
    margin-inline: calc(-1 * var(--inset));
    padding-inline: var(--inset);
    border-top: 0;
    border-bottom: var(--rule);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: var(--inset);
    scroll-snap-type: inline mandatory;
  }

  .price-rows:has(> :nth-child(2)) > .service-row {
    align-content: start;
    border-top: var(--rule);
    border-bottom: 0;
  }
}

@media (max-width: 420px) {
  .service-entries,
  .findings:has(> :nth-child(2)),
  .price-rows:has(> :nth-child(2)) {
    --inset: 16px;
  }
}

@media (max-width: 1080px) {
  .site-header[data-long-name] .brand {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .site-header[data-long-name] .header-action {
    display: none;
  }
}

@media (max-width: 420px) {
  .site-header[data-long-name] .brand-name {
    font-size: 1.25rem;
  }
}