/* Shared system: 4/8 spacing, intrinsic content sizing, one brand blue. */
:root {
  --blue: #164d9e;
  --blue-hover: #103b7c;
  --whatsapp: #147c46;
  --ink: #172a38;
  --muted: #52616c;
  --line: #ced9e0;
  --control-border: #7f909c;
  --canvas: #edf1f3;
  --surface: #e4ebef;
  --surface-hover: #e6eef5;
  --white: #fbfcfd;
  --navy: #172f42;
  --on-dark: #f2f6f8;
  --muted-on-dark: #c0d0dc;
  --panel-radius: 16px;
  --shadow: 0 8px 24px rgb(23 42 56 / 5%);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --section: 48px;
  --radius: 8px;
  --container: 1200px;
  --gutter: 20px;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--canvas);
}
html {
  scroll-padding-top: 24px;
  scroll-padding-bottom: 88px;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
p,
figure,
dl {
  margin: 0;
}
h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  max-width: 24ch;
}
h2 {
  font-size: clamp(1.65rem, 3vw, 2rem);
}
h3 {
  font-size: 1.2rem;
  line-height: 1.4;
}
p,
dd,
a,
button,
label,
figcaption,
summary {
  overflow-wrap: anywhere;
}
p {
  white-space: pre-line;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a,
button,
input,
textarea,
select,
summary {
  -webkit-tap-highlight-color: transparent;
}
a:hover {
  color: var(--blue);
}
:focus-visible {
  outline: 3px solid #145cca;
  outline-offset: 4px;
}
button,
input,
select,
textarea {
  max-width: 100%;
}
.container {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
}
.section {
  padding-block: var(--section);
}
/* Shared boundaries and surface tokens establish the page rhythm. */
main > .container + .container {
  border-top: 1px solid var(--line);
}
.surface {
  background: var(--surface);
}
.section-heading {
  display: grid;
  align-items: start;
  gap: var(--s4);
  margin-bottom: var(--s8);
}
.section-heading h2 {
  max-width: 26ch;
}
.section-intro {
  max-width: 65ch;
  color: var(--muted);
}
.icon {
  width: 20px;
  height: 20px;
  flex: none;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 11px var(--s6);
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.5;
  white-space: normal;
}
.primary {
  background: var(--blue);
  color: white;
}
.primary:hover {
  background: var(--blue-hover);
  color: white;
}
.secondary {
  border-color: var(--control-border);
  background: var(--white);
  color: var(--ink);
}
.secondary:hover {
  background: var(--surface-hover);
  color: var(--blue);
  border-color: var(--blue);
}
.button:active {
  box-shadow: inset 0 0 0 2px currentColor;
}
button:disabled {
  cursor: wait;
  opacity: 0.6;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
.actions > * {
  flex: 1 1 auto;
}
.contact-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.contact-pair.actions {
  align-items: stretch;
}
.contact-number {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  min-height: 48px;
  min-width: 0;
  font-weight: 600;
}
.contact-icon {
  padding: var(--s3);
  width: 48px;
  flex: 0 0 48px;
}
.contact-icon .icon {
  width: 22px;
  height: 22px;
}
.contact-pair-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  align-items: stretch;
  max-width: 100%;
}
.contact-pair-compact .button:not(.contact-icon) {
  padding-inline: var(--s4);
}
.privacy-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  transform: translateY(-200%);
  background: white;
  padding: 12px;
  z-index: 99;
}
.skip-link:focus {
  transform: none;
}
.header {
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s4);
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 1.3rem;
  letter-spacing: -0.035em;
  font-weight: 700;
  min-width: 0;
}
.brand-symbol {
  display: block;
  flex: none;
  width: 36px;
  height: auto;
  aspect-ratio: 100/104;
  mix-blend-mode: multiply;
}
.header-right {
  display: flex;
  gap: var(--s4);
  align-items: center;
  flex-wrap: wrap;
}
.languages {
  display: flex;
  gap: var(--s1);
  padding: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.languages a {
  padding: var(--s2);
  font-size: 0.875rem;
  border-radius: var(--radius);
  min-height: 40px;
  display: flex;
  align-items: center;
}
.languages a[aria-current] {
  background: var(--surface-hover);
  color: var(--blue);
  font-weight: 700;
}
.desktop-nav,
.header-contact {
  display: none;
}
.menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  padding: var(--s2);
  font-size: 0.875rem;
  min-height: 40px;
}
.mobile-nav {
  padding-bottom: var(--s4);
}
.mobile-nav:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s6);
}
.mobile-nav a {
  padding-block: var(--s2);
}
.hero {
  display: grid;
  gap: var(--s8);
  padding-block: var(--s8) var(--s10);
}
.hero-copy > * + * {
  margin-top: var(--s6);
}
.hero-details {
  display: grid;
  gap: var(--s6);
  align-content: start;
  min-width: 0;
}
.hero-details .actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.hero-copy .location {
  font-size: 0.875rem;
  color: var(--blue);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.location::before {
  content: '';
  width: 24px;
  height: 2px;
  background: var(--blue);
  flex: none;
}
.lead {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: 56ch;
}
.hero-trust {
  display: flex;
  align-items: center;
  gap: var(--s4);
  font-size: 0.9375rem;
  color: var(--muted);
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  grid-column: 1 / -1;
}
.hero-trust p {
  max-width: 100ch;
}
.trust-symbol {
  width: 32px;
  height: 32px;
  color: var(--blue);
  flex: none;
}
.equipment-row:not(:has(.equipment-gallery img)) {
  grid-template-columns: minmax(0, 1fr);
}
.equipment-gallery:not(:has(img)) {
  display: none;
}
figcaption {
  margin-top: var(--s3);
  font-size: 0.875rem;
  color: var(--muted);
}
.services-section {
  background: var(--surface);
  position: relative;
  isolation: isolate;
  border-block: 1px solid var(--line);
}
.services-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 40%;
  background: #eaf0f3;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 28% 100%, 0 80%);
  z-index: -1;
}
/* Services share one visual family; specialization is expressed through colour. */
.technical-icon {
  width: 32px;
  height: 32px;
  flex: none;
}
.service-list {
  display: grid;
  gap: var(--s4);
}
.specialty-heading {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-block: var(--s8) var(--s4);
  color: var(--muted);
}
.specialty-heading h3 {
  font-size: 0.9375rem;
}
.specialty-heading::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--line);
}
.service-row {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.service-copy > * + * {
  margin-top: var(--s4);
}
.service-copy p {
  color: var(--muted);
}
.service-symbol {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  color: var(--blue);
  background: var(--surface-hover);
  border: 1px solid #bdcdd9;
  border-radius: var(--panel-radius);
  flex: none;
}
.service-symbol .technical-icon {
  width: 40px;
  height: 40px;
}
.service-signature {
  background: var(--navy);
  color: var(--on-dark);
  border-color: var(--navy);
}
.service-signature p {
  color: var(--muted-on-dark);
}
.service-signature .service-symbol {
  background: #254355;
  border-color: #617e92;
  color: #c7e3f7;
}
.service-signature .service-link {
  color: var(--on-dark);
}
.service-signature .service-actions {
  border-color: #506775;
}
.service-signature :focus-visible {
  outline-color: #a4d6fb;
}
.service-overview {
  display: grid;
  min-width: 0;
  margin-bottom: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}
.service-overview-copy {
  min-width: 0;
  padding: var(--s6);
}
.service-heading {
  display: flex;
  align-items: center;
  gap: var(--s4);
}
.service-heading h3 {
  font-size: 1.25rem;
  min-width: 0;
}
.service-overview-copy > p {
  color: var(--muted);
  margin-top: var(--s4);
  max-width: 65ch;
}
.service-categories {
  display: grid;
  align-items: start;
  gap: var(--s2);
  padding-inline: var(--s6);
}
.service-category {
  min-width: 0;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.service-category > summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s4);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}
.service-category > summary::-webkit-details-marker {
  display: none;
}
.service-category > summary > .technical-icon {
  color: var(--blue);
}
.service-category > summary > span:not(.disclosure-icon) {
  flex: 1;
  min-width: 0;
}
.service-category[open],
.service-category > summary:hover {
  background: var(--surface-hover);
}
.category-body {
  padding: 0 var(--s4) var(--s4);
}
.category-body p {
  color: var(--muted);
  font-size: 0.9375rem;
}
.category-body .text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s3);
  min-height: 44px;
}
.category-body .service-photo {
  margin-top: var(--s4);
}
/* Open cards share the intrinsic row height; closed ones stay compact.
   The content slot flexes, so actions align without measuring or clamping copy.
   Older browsers retain the readable native disclosure layout. */
@supports selector(::details-content) {
  .service-category {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .service-category[open] {
    align-self: stretch;
  }
  .service-category::details-content {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .category-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--s3);
  }
  .category-body .text-link {
    align-self: flex-start;
    margin-top: auto;
    flex-shrink: 0;
  }
}
.service-overview-actions {
  padding: var(--s6);
}

.service-actions {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.service-link {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  color: var(--blue);
  font-weight: 600;
  min-height: 44px;
  flex: 1 1 auto;
}
.service-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.service-photo img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: var(--radius);
}
.equipment-list {
  display: grid;
  gap: var(--s6);
}
#equipment {
  background: var(--canvas);
}
.equipment-row {
  display: grid;
  gap: var(--s6);
  min-width: 0;
  padding: var(--s4);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}
.equipment-gallery {
  display: grid;
  gap: var(--s3);
  min-width: 0;
  align-self: start;
}
.equipment-gallery figure {
  min-width: 0;
}
.equipment-gallery img {
  width: 100%;
  aspect-ratio: 5/4;
  object-fit: cover;
  border-radius: var(--radius);
}
.equipment-copy > p {
  color: var(--muted);
  margin-block: var(--s4) var(--s6);
  max-width: 65ch;
}
.equipment-copy {
  padding: var(--s2);
}
.spec-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  border-top: 1px solid var(--line);
  padding-block: var(--s3);
  font-size: 0.9375rem;
}
.spec-list dt {
  color: var(--muted);
  overflow-wrap: anywhere;
}
.spec-list dd {
  margin: 0;
  font-weight: 600;
}
.price-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  padding-inline: var(--s6);
  box-shadow: var(--shadow);
}
.price-row:last-child {
  border-bottom: 0;
}
.price-row {
  display: grid;
  gap: var(--s6);
  padding-block: var(--s6);
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.price {
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}
.price > span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--muted);
}
.price-note {
  color: var(--muted);
  max-width: 60ch;
  margin-top: var(--s2);
}
.price-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s8);
}
.price-action .price {
  flex: 1 1 auto;
}
.price-row .button {
  justify-self: start;
}
.terms {
  margin-top: var(--s6);
  font-size: 0.9375rem;
  color: var(--muted);
  max-width: 85ch;
}
.process-section {
  position: relative;
  isolation: isolate;
  background: var(--navy);
  color: var(--on-dark);
}
.process-section::before {
  content: '';
  position: absolute;
  inset: 0 0 auto auto;
  width: min(480px, 80%);
  height: 360px;
  background: url('/assets/flow-lines.svg') center / contain no-repeat;
  filter: grayscale(1) brightness(6);
  opacity: 0.12;
  z-index: -1;
  pointer-events: none;
}
.process-list {
  display: grid;
  gap: var(--s6);
  padding: 0;
  margin: 0;
  list-style: none;
}
.process-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  padding-top: var(--s6);
  border-top: 1px solid #3b5366;
  min-width: 0;
  align-content: start;
}
.step-symbol {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  align-self: start;
  width: 40px;
  height: 40px;
  border: 1px solid #536e83;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 600;
  color: #d7e7f3;
}
.process-list h3 {
  align-self: center;
}
.process-list p {
  grid-column: 2;
  color: var(--muted-on-dark);
}
.review-list {
  display: grid;
  gap: var(--s6);
}
.reviews-layout {
  display: grid;
  gap: var(--s6);
  align-items: start;
}
.reviews-content,
.equipment-copy,
.contact-info,
.price-description,
.price-action {
  min-width: 0;
}
.review-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--s6);
  min-width: 0;
}
.review-item:only-child {
  grid-column: 1 / -1;
}
.review-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}
.review-meta > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.review-meta time {
  font-size: 0.875rem;
  color: var(--muted);
  margin-left: auto;
}
.rating {
  color: #79581a;
  letter-spacing: 2px;
  white-space: nowrap;
}
.review-object {
  color: var(--muted);
  font-size: 0.875rem;
  margin-top: var(--s2);
}
.review-text {
  margin-top: var(--s4);
  max-width: 80ch;
}
.review-photo {
  margin-top: var(--s4);
  max-width: 320px;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: var(--surface);
  border-radius: var(--radius);
}
.text-link {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.empty-reviews {
  padding: var(--s6);
  border-left: 3px solid #a8bcd5;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.empty-reviews p {
  max-width: 60ch;
}
.empty-reviews .empty-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.empty-reviews p {
  color: var(--muted);
  margin-top: var(--s2);
}
.review-editor {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  min-width: 0;
  background: var(--white);
}
.review-editor > summary {
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  padding: var(--s4) var(--s6);
}
.review-editor .public-form {
  padding: var(--s6);
  border-top: 1px solid var(--line);
}
/* One intentional invitation, with no duplicate CTA or moving summary row. */
.reviews-layout.reviews-empty {
  gap: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
}
.reviews-empty .empty-reviews {
  background: transparent;
  border: 0;
  border-radius: 0;
}
.reviews-empty .review-editor {
  border: 0;
  background: transparent;
  border-radius: 0 0 var(--panel-radius) var(--panel-radius);
}
.reviews-empty .review-editor > summary {
  border-top: 1px solid var(--line);
  background: transparent;
}
.faq-layout {
  display: grid;
  gap: var(--s2);
}
.faq-list {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: var(--panel-radius);
  padding-inline: var(--s6);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list details:last-child {
  border-bottom: 0;
}
.faq-list summary {
  padding: var(--s4) 0;
  cursor: pointer;
  font-weight: 600;
}
.faq-list summary,
.review-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s6);
  list-style: none;
}
.faq-list summary::-webkit-details-marker,
.review-editor > summary::-webkit-details-marker {
  display: none;
}
.disclosure-icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--blue);
}
.disclosure-icon::before,
.disclosure-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  inset: 9px 3px;
}
.disclosure-icon::after {
  transform: rotate(90deg);
}
details[open] > summary .disclosure-icon::after {
  display: none;
}
.faq-list summary:hover,
.faq-list details[open] > summary {
  color: var(--blue);
}
.review-editor > summary:hover {
  background: var(--surface-hover);
  border-radius: var(--radius);
}
.faq-list p {
  margin: 0 var(--s8) var(--s6) 0;
  max-width: 75ch;
  color: var(--muted);
}
.contact-layout {
  display: grid;
  gap: var(--s4);
  grid-template-areas: 'info' 'form';
  align-items: stretch;
}
.contact-info {
  grid-area: info;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--on-dark);
  padding: var(--s6);
  border-radius: var(--panel-radius);
  --muted: var(--muted-on-dark);
  --line: #3b5366;
}
.contact-info a:not(.button):hover {
  color: #b9d9fa;
}
.contact-info :focus-visible {
  outline-color: #93c4ff;
}
.contact-info > p {
  color: var(--muted);
  max-width: 55ch;
  margin-top: var(--s4);
}
.contact-info > .contact-documents {
  margin-top: auto;
  padding-top: var(--s6);
}
.contact-direct {
  margin-top: var(--s6);
}
.contact-direct .contact-number {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.contact-hours {
  color: var(--muted);
  margin-top: var(--s2);
  font-size: 0.875rem;
}
/* Supplied brand object. The reserved stage contains
   its entire tilted footprint; neither pointer input nor loading affects layout. */
.business-card-stage {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(48px, 8vw, 80px) clamp(24px, 6vw, 80px);
  perspective: 1000px;
  background: var(--surface);
}
.business-card {
  position: relative;
  width: min(100%, 720px);
  aspect-ratio: 970 / 526;
  border-radius: 3px;
  overflow: hidden;
  transform: rotate(-6deg) rotateX(var(--card-x, 7deg)) rotateY(var(--card-y, -8deg));
  box-shadow:
    0 18px 28px -12px rgb(15 29 39 / 36%),
    0 3px 5px rgb(15 29 39 / 16%);
}
.business-card img {
  position: absolute;
  width: 115.67%;
  max-width: none;
  height: auto;
  left: -7.938%;
  top: -24.335%;
  pointer-events: none;
  user-select: none;
}
.whatsapp-link > .icon {
  color: var(--whatsapp);
}
.whatsapp-link:hover {
  border-color: var(--whatsapp);
  background: #edf7f0;
}
.equipment-heading {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
}
.equipment-heading > .technical-icon {
  color: var(--blue);
}
.spec-list dt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
}
.spec-list dt > .technical-icon {
  width: 24px;
  height: 24px;
  color: var(--blue);
}
.spec-list dt span {
  min-width: 0;
}
.step-symbol .technical-icon {
  width: 28px;
  height: 28px;
}
/* The ribbon repeats headings already available in the service list. */
.service-ribbon {
  position: relative;
  background: var(--navy);
  color: var(--on-dark);
  border-block: 1px solid #39566c;
}
.ribbon-viewport {
  overflow: hidden;
  padding-block: var(--s4);
  margin-right: 68px;
}
.ribbon-track {
  display: flex;
  width: max-content;
}
.ribbon-group {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--s8);
  padding-right: var(--s8);
}
.ribbon-item {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  flex: none;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 600;
}
.ribbon-item .technical-icon {
  color: #a8d2ef;
  width: 28px;
  height: 28px;
}
.ribbon-toggle {
  position: absolute;
  right: var(--s3);
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid #7893a7;
  border-radius: 50%;
  background: var(--navy);
  color: var(--on-dark);
}
.ribbon-toggle[hidden] {
  display: none;
}
.ribbon-toggle:hover {
  background: #25475f;
}
.ribbon-toggle:focus-visible {
  outline-color: #a4d6fb;
}
.ribbon-toggle[data-paused='true'] svg {
  fill: currentColor;
  stroke: none;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (min-width: 640px) {
  .service-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .service-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 960px) {
  .header {
    position: sticky;
    top: 0;
    z-index: 30;
  }
  html {
    scroll-padding-top: calc(var(--header-height, 83px) + 24px);
    scroll-padding-bottom: 24px;
  }
}
@media (max-width: 639px) {
  .business-card {
    width: min(100%, 310px);
  }
  .service-symbol {
    width: 48px;
    height: 48px;
  }
  .service-symbol .technical-icon {
    width: 34px;
    height: 34px;
  }
  .service-heading {
    gap: var(--s3);
  }
  .ribbon-item {
    font-size: 0.9375rem;
  }
  .ribbon-group {
    gap: var(--s6);
    padding-right: var(--s6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ribbon-viewport {
    margin-right: 0;
    padding-inline: var(--gutter);
  }
  .ribbon-track {
    width: auto;
    transform: none !important;
  }
  .ribbon-group {
    flex-wrap: wrap;
    padding-right: 0;
    row-gap: var(--s3);
  }
  .ribbon-item {
    white-space: normal;
    min-width: 0;
    flex: 0 1 auto;
  }
  .ribbon-item > span {
    min-width: 0;
  }
  .ribbon-toggle,
  .ribbon-group[data-copy] {
    display: none;
  }
}
.contact-details {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
}
.contact-details dt {
  font-weight: 600;
}
.contact-details dd {
  margin: var(--s2) 0 0;
  color: var(--muted);
}
.public-form {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.public-form > * {
  margin: 0;
}
.enquiry-form {
  grid-area: form;
  padding: var(--s6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  box-shadow: var(--shadow);
}
.public-form > h3 {
  margin-bottom: var(--s2);
}
.form-grid {
  display: grid;
  gap: var(--s4);
}
label {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  font-size: 0.9375rem;
  font-weight: 600;
  min-width: 0;
}
input,
textarea,
select {
  width: 100%;
  min-width: 0;
  padding: var(--s3);
  border: 1px solid var(--control-border);
  background: white;
  color: var(--ink);
  border-radius: var(--radius);
  font-size: 1rem;
  min-height: 48px;
}
textarea {
  resize: vertical;
  line-height: 1.5;
}
.public-form :is(input, select, textarea):hover {
  border-color: var(--ink);
}
.public-form :is(input, select, textarea):focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
input::placeholder {
  color: #677580;
}
input[type='file'] {
  font-size: 0.875rem;
  white-space: normal;
}
input[type='file']::file-selector-button {
  border: 1px solid var(--line);
  padding: 8px;
  border-radius: 4px;
  background: var(--surface);
  margin-right: 8px;
}
.check-label {
  display: flex;
  flex-direction: row;
  align-items: start;
  font-weight: 400;
  gap: var(--s3);
  font-size: 0.875rem;
  line-height: 1.5;
}
.check-label input {
  width: 20px;
  height: 20px;
  min-height: 20px;
  flex: none;
  margin: 0;
  accent-color: var(--blue);
}
.policy-link {
  display: inline-block;
  justify-self: start;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
}
.form-consent {
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}
.form-consent .policy-link {
  margin: var(--s2) 0 0 var(--s8);
}
.form-actions {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--s3);
}
.form-actions .field-hint {
  max-width: 60ch;
}
.upload-field {
  display: grid;
  gap: var(--s2);
}
.upload-control {
  border: 1px solid var(--control-border);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--s3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
}
.upload-picker {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--s2) var(--s3);
  min-height: 44px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  color: var(--blue);
  cursor: pointer;
}
.upload-picker:hover {
  background: var(--surface-hover);
  border-color: var(--blue);
}
.upload-picker:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}
.upload-picker input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.upload-name {
  min-width: 0;
  flex: 1 1 140px;
  font-size: 0.875rem;
  overflow-wrap: anywhere;
  color: var(--muted);
}
.upload-remove {
  border: 0;
  background: none;
  font-size: 0.875rem;
  padding: var(--s2) 0;
}
.upload-control:has([aria-invalid='true']),
.check-label:has([aria-invalid='true']) {
  outline: 2px solid #a51c24;
  outline-offset: 3px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.field-hint,
small,
.form-intro {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 400;
}
.form-status {
  font-size: 0.9375rem;
  white-space: pre-line;
}
.form-status:empty {
  display: none;
}
.form-status.error {
  color: #a51c24;
  border-left: 2px solid currentColor;
  padding-left: var(--s3);
}
.form-status.success {
  color: #1c633f;
  border-left: 2px solid currentColor;
  padding-left: var(--s3);
}
input[aria-invalid='true'],
textarea[aria-invalid='true'],
select[aria-invalid='true'] {
  border-color: #a51c24;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
}
.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s8);
  background: #e0e7ec;
  padding-bottom: calc(var(--s8) + 64px + env(safe-area-inset-bottom));
}
.footer-inner {
  display: grid;
  gap: var(--s6);
  font-size: 0.875rem;
}
.footer p {
  color: var(--muted);
  margin-top: var(--s2);
}
.footer-policy {
  align-self: start;
}
.footer-contact .contact-number {
  font-size: 1rem;
  font-weight: 600;
}
.privacy-page {
  max-width: 48rem;
}
.privacy-heading {
  display: grid;
  gap: var(--s6);
  margin-bottom: var(--s10);
}
.privacy-heading h1 {
  max-width: 30ch;
}
.privacy-document {
  min-width: 0;
  overflow-wrap: anywhere;
}
.privacy-document section {
  margin-bottom: var(--s8);
  scroll-margin-top: var(--s6);
}
.privacy-document h2 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin-bottom: var(--s3);
}
.privacy-document p,
.privacy-document ul {
  line-height: 1.65;
  color: var(--muted);
}
.privacy-document p + p,
.privacy-document ul + p {
  margin-top: var(--s3);
}
.privacy-document ul {
  padding-left: var(--s6);
  margin-block: var(--s3);
}
.privacy-document li + li {
  margin-top: var(--s2);
}
.mobile-actions {
  position: fixed;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--white);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s2);
  padding: var(--s2) var(--gutter) max(var(--s2), env(safe-area-inset-bottom));
}
.mobile-actions .button {
  min-height: 44px;
  padding: var(--s2);
  font-size: 0.9375rem;
}
body:has(.public-form input:focus, .public-form textarea:focus, .public-form select:focus)
  .mobile-actions {
  display: none;
}
[hidden] {
  display: none !important;
}
@media (min-width: 640px) {
  :root {
    --gutter: 32px;
    --section: 56px;
  }
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .header-inner {
    flex-wrap: nowrap;
  }
  .process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s8) var(--s12);
  }
  .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .price-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s4) var(--s8);
  }
  .price-row .button {
    justify-self: start;
  }
  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .footer-policy {
    grid-column: 1/-1;
  }
  .actions > * {
    flex: none;
  }
  .contact-info,
  .enquiry-form {
    padding: var(--s8);
  }
  .review-editor .public-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s8);
    align-items: start;
  }
  .review-editor .form-intro,
  .review-editor .form-status,
  .review-editor .form-actions {
    grid-column: 1 / -1;
  }
  .review-editor .form-grid {
    grid-column: 1;
    grid-row: 2;
  }
  .review-object-field {
    grid-column: 1;
    grid-row: 3;
  }
  .review-body-field {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: stretch;
  }
  .review-body-field textarea {
    flex: 1 1 auto;
  }
  .review-editor .upload-field {
    grid-column: 1;
    grid-row: 4;
  }
  .review-editor .form-consent {
    grid-column: 2;
    grid-row: 4;
    padding-top: 0;
    border-top: 0;
  }
}
@media (min-width: 960px) {
  :root {
    --section: 64px;
  }
  .hero {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s10) var(--s12);
    padding-block: var(--section) var(--s10);
    align-items: end;
  }
  .hero h1 {
    font-size: clamp(2.75rem, 4vw, 3.25rem);
  }
  .hero-trust {
    padding: var(--s4) var(--s6);
  }
  .section-heading.with-intro {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    column-gap: var(--s8);
    align-items: baseline;
  }
  .hero-copy > * + * {
    margin-top: var(--s6);
  }
  .desktop-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    font-size: 0.875rem;
  }
  .menu-toggle,
  .mobile-nav,
  .mobile-actions {
    display: none !important;
  }
  .header-inner {
    gap: var(--s6);
  }
  .header-right {
    gap: var(--s3);
  }
  .header-contact {
    display: flex;
    gap: var(--s2);
  }
  .header-contact .contact-number {
    justify-content: center;
    width: 48px;
    font-size: 0.875rem;
  }
  .header-contact .contact-number span {
    display: none;
  }
  .equipment-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--s8);
    align-items: center;
    padding: var(--s6);
  }
  .equipment-copy {
    padding: var(--s4);
  }
  .equipment-row:nth-child(even):has(.equipment-gallery img) .equipment-gallery {
    grid-column: 2;
    grid-row: 1;
  }
  .equipment-row:nth-child(even):has(.equipment-gallery img) .equipment-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .equipment-gallery img {
    aspect-ratio: 5/4;
  }
  .price-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--s12);
    padding-block: var(--s8);
  }
  .process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .faq-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: var(--s8);
    align-items: start;
  }
  .contact-layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.2fr);
    grid-template-areas: 'info form';
    gap: var(--s4) var(--s6);
  }
  .footer {
    padding-bottom: var(--s8);
  }
  .footer-inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s8);
  }
  .footer-policy {
    grid-column: auto;
  }
  .reviews-layout {
    /* Stable row placement: opening a disclosure must not move its summary. */
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s8);
  }
  .review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .header-contact .contact-number {
    width: auto;
  }
  .header-contact .contact-number span {
    display: inline;
  }
  .header-right {
    gap: var(--s4);
  }
  .brand {
    font-size: 1.4rem;
  }
  .desktop-nav {
    gap: var(--s6);
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}
@media (max-width: 639px) {
  .header-inner {
    gap: var(--s2);
  }
  .brand {
    font-size: 1.125rem;
  }
  .brand-symbol {
    width: 28px;
  }
  .header-right {
    gap: var(--s2);
  }
  .menu-toggle span {
    display: none;
  }
  .languages a {
    padding-inline: 6px;
  }
  .review-editor > summary {
    padding: var(--s4);
    background: var(--surface);
  }
  .review-editor .public-form {
    padding: var(--s4);
  }
  .hero-trust {
    align-items: start;
    padding: var(--s4);
  }
  .hero .actions {
    flex-direction: column;
  }
  .faq-list {
    padding-inline: var(--s4);
  }
  .form-actions .button {
    width: 100%;
  }
}

/* Motion is an enhancement: no hidden resting state, no layout changes. */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-micro: 180ms;
  --motion-reveal: 420ms;
  --motion-shift: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .button,
  .upload-picker,
  .menu-toggle,
  .languages a,
  .service-category > summary,
  .faq-list summary,
  .review-editor > summary,
  .price-row {
    transition:
      color var(--motion-micro) var(--motion-ease),
      background-color var(--motion-micro) var(--motion-ease),
      border-color var(--motion-micro) var(--motion-ease),
      outline-color var(--motion-micro) var(--motion-ease);
  }
  .service-row {
    transition:
      border-color var(--motion-micro) var(--motion-ease),
      box-shadow var(--motion-micro) var(--motion-ease);
  }
  .service-link .icon {
    transition: transform var(--motion-micro) var(--motion-ease);
  }
  .public-form :is(input, select, textarea),
  .upload-control {
    transition:
      border-color var(--motion-micro) var(--motion-ease),
      outline-color var(--motion-micro) var(--motion-ease),
      background-color var(--motion-micro) var(--motion-ease);
  }
  .text-link,
  .policy-link,
  .desktop-nav a,
  .mobile-nav a {
    transition:
      color var(--motion-micro) var(--motion-ease),
      text-decoration-color var(--motion-micro) var(--motion-ease);
  }
  .desktop-nav a,
  .mobile-nav a {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 5px;
  }
  .desktop-nav a:hover,
  .mobile-nav a:hover {
    text-decoration-color: currentColor;
  }
  .text-link:hover,
  .policy-link:hover {
    text-decoration-color: var(--blue);
  }
  .service-category .disclosure-icon::after,
  .faq-list .disclosure-icon::after,
  .review-editor .disclosure-icon::after {
    display: block;
    transition:
      transform 200ms var(--motion-ease),
      opacity 200ms var(--motion-ease);
  }
  details[open]:not([data-motion-closing]) > summary .disclosure-icon::after {
    transform: rotate(90deg) scaleX(0);
    opacity: 0;
  }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .service-row:hover {
    border-color: #99b2c8;
    box-shadow: 0 12px 28px rgb(23 42 56 / 9%);
  }
  .service-link:hover .icon {
    transform: translateX(3px);
  }
  .primary > .icon {
    transition: transform 200ms var(--motion-ease);
  }
  .primary:hover > .icon {
    transform: translateX(2px);
  }
  .primary:active > .icon {
    transform: none;
  }
  .price-row:hover {
    background-color: #f8fafc;
    border-bottom-color: #a8bcd5;
  }
}
@media (min-width: 960px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .business-card {
    transition: transform 180ms var(--motion-ease);
  }
  .business-card-stage:not(:hover) .business-card {
    transition-duration: 360ms;
  }
}
@media (max-width: 639px), (pointer: coarse) {
  :root {
    --motion-shift: 0px;
    --motion-reveal: 320ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}