:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.site-header {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 5;
      background-color: color-mix(in srgb, var(--black) 37%, transparent); /* acss-ok: live bar opacity */
      padding-block: var(--space-xs); padding-inline: var(--gutter);
      @media (width >= 768px) { padding-inline: 7vw; /* acss-ok: live header inset is 7% from tablet up */ }
      @media (width >= 1025px) { padding-inline: 7.5vw; /* acss-ok: live header scales with the window; its right edge lines up with the hero headline */ }
}
.site-header__inner {
  flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-m);
      @media (width >= 1025px) { --content-width: 100%; /* acss-ok: live header has no max width */ }
}
.site-header__nav {
  position: relative;
}
.site-header__toggle {
  display: grid; place-items: center; padding: var(--space-xs); border-radius: var(--radius); background-color: var(--white); color: var(--primary);
      @media (width >= 1025px) { display: none; }
}
.site-header__toggle-icon {
  inline-size: var(--text-xl); block-size: var(--text-xl);
}
.site-header__menu {
  display: none; position: absolute; inset-block-start: calc(100% + var(--space-xs)); inset-inline-start: 0; min-inline-size: max-content;
      flex-direction: column; background-color: var(--secondary); padding-block: var(--space-xs); box-shadow: var(--box-shadow-1);
      &[data-open="true"] { display: flex; }
      @media (width >= 1025px) { display: flex; position: static; flex-direction: row; flex-wrap: wrap; background-color: transparent; padding-block: 0; box-shadow: none;
        margin-inline-start: calc(var(--space-s) * -1); /* first link's text sits on the container edge */ }
}
.site-header__link {
  display: block; padding: calc(var(--space-xs) / 2) var(--space-s); font-family: var(--text-font-family); font-size: var(--text-l); font-weight: 700; line-height: 1.5;
      color: var(--white); text-decoration: none; transition: color 0.2s;
      &:hover, &:focus-visible, &[aria-current="page"] { color: var(--primary); }
}
.site-header__logo {
  display: block; line-height: 0; inline-size: 45vw; /* acss-ok: phone logo */
      @media (width >= 768px) { inline-size: 33.75vw; /* acss-ok: live tablet logo is about a third of the window */ }
      @media (width >= 1025px) { inline-size: min(21.5vw, calc(var(--width-10) * 1.85)); /* acss-ok: live logo is 55% of the half-width column, capped by the 1400px header */ }
}
.site-header__logo-img {
  inline-size: 100%; block-size: auto;
}
.site-footer {
  background-image: linear-gradient(90deg, var(--tertiary), var(--primary)); padding-block: var(--section-space-s); padding-inline: 1.25rem; /* acss-ok: live footer has 20px sides at every width */
}
.site-footer__inner {
  --content-width: 71.25rem; /* acss-ok: live footer is boxed at 1140px */
}
.site-footer__grid {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-l); padding-block-end: var(--section-space-s);
      @media (width >= 768px) { grid-template-columns: var(--grid-2); column-gap: 0; }
}
.site-footer__brand {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s); /* live centres the footer below 1025px */ @media (width >= 1025px) { align-items: flex-start; }
}
.site-footer__socials {
  display: flex; gap: var(--space-s);
}
.site-footer__social {
  display: grid; place-items: center; padding: var(--space-xs); color: var(--white); transition: opacity 0.2s;
      &:hover, &:focus-visible { opacity: 0.85; }
      &[data-variant="facebook"] { background-color: #3b5998; /* acss-ok: Facebook brand colour */ }
      &[data-variant="linkedin"] { background-color: #0077b5; /* acss-ok: LinkedIn brand colour */ }
}
.site-footer__social-icon {
  inline-size: var(--text-l); block-size: var(--text-l);
}
.site-footer__logo {
  inline-size: 42vw; /* acss-ok: live phone logo */ block-size: auto; @media (width >= 768px) { inline-size: 11.25rem; /* acss-ok: live tablet logo is 180px */ } @media (width >= 1025px) { inline-size: var(--width-10); }
}
.site-footer__badge {
  inline-size: 31vw; /* acss-ok: live phone badges */ block-size: auto; @media (width >= 768px) { inline-size: 19vw; /* acss-ok: live tablet badges are 19% of the window */ } @media (width >= 1025px) { inline-size: var(--width-10); }
}
.site-footer__heading {
  font-family: "Inter", var(--heading-font-family); font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; color: var(--secondary); margin-block-end: var(--space-s); @media (width >= 1025px) { font-size: var(--h3); }
}
.site-footer__links {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); @media (width >= 1025px) { align-items: flex-start; }
}
.site-footer__link {
  font-family: "Lora", serif; font-size: var(--text-m); line-height: 1.4; color: var(--secondary-semi-dark); text-decoration: none;
      &:hover, &:focus-visible { color: var(--neutral-dark); text-decoration: underline; }
}
.site-footer__copyright {
  text-align: center; font-size: var(--text-s); color: color-mix(in oklch, var(--neutral-semi-dark) 31%, var(--neutral-semi-light));
}
.site-footer__nav {
  text-align: center; @media (width >= 1025px) { text-align: start; }
}
.site-main {
  display: block;
}
.partners__logo {
  max-inline-size: 100%; max-block-size: 100%; object-fit: contain;
}
.home-card--purple .home-card__title {
  font-weight: 800; color: var(--white);
}
.home-card--purple .home-card__text {
  color: var(--white);
}
.home-project--pink .home-project__title {
  color: var(--secondary);
}
.home-project--purple .home-project__title {
  color: var(--white);
}
.services-list {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-xl) var(--space-l); align-self: stretch; @media (width >= 768px) { grid-template-columns: var(--grid-2); }
}
.contact-card {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-xl); padding: var(--space-xl) var(--space-m);
      border-radius: calc(var(--radius) * 6); /* acss-ok: built from --radius */ border-start-start-radius: 0; background-color: var(--primary);
      @media (width >= 768px) { grid-template-columns: var(--grid-2); padding: var(--section-space-s) calc(var(--section-space-s) * 2) var(--section-space-l);
        border-radius: calc(var(--radius) * 14); /* acss-ok: live 69px card radius, built from --radius */ border-start-start-radius: 0; }
      @media (width >= 1025px) { column-gap: 0; padding: 3.125rem 6.25rem 5.625rem; /* acss-ok: live card is 571px tall */ }
}
.contact-card__intro {
  display: flex; flex-direction: column; gap: var(--space-m); @media (width >= 1025px) { padding-inline-end: 7.5rem; /* acss-ok: live text column stops 120px short of the form */ }
}
.contact-card__title {
  font-family: "Inter", var(--heading-font-family); font-size: 2rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 500; line-height: 1.5; color: var(--secondary); @media (width >= 1025px) { font-size: var(--h1); }
}
.contact-card__text {
  font-size: var(--text-l); line-height: 1.5; color: var(--secondary);
}
.contact-details {
  display: flex; flex-direction: column; gap: var(--space-m); font-family: "Inter", var(--text-font-family); font-size: var(--text-m); line-height: 1.2; color: var(--secondary);
}
.contact-details__item {
  display: flex; align-items: flex-start; gap: var(--space-s);
}
.contact-details__icon {
  flex: none; inline-size: var(--text-l); block-size: var(--text-l);
}
.contact-details__link {
  color: inherit; text-decoration: none; &:hover, &:focus-visible { text-decoration: underline; }
}
.btn--primary {
  --btn-padding-block: 0.94em; --btn-padding-inline: 1.9em; /* acss-ok: live tablet buttons are 15px x 30px */
      --btn-font-size: 1rem; /* acss-ok: Elementor's fixed button text, 16px below 1025px */ --btn-font-weight: 600; --btn-line-height: 1.3;
      @media (width >= 1025px) { --btn-padding-block: 1.2em; --btn-padding-inline: 3.2em; /* acss-ok: live desktop buttons are 24px x 64px at 20px text */ --btn-font-size: 1.25rem; /* acss-ok: live desktop button text is 20px */ }
}
.etch-accordion--custom {
  --etch-accordion-gap: var(--space-s); --etch-accordion-background: transparent;
      --etch-accordion-button-background: transparent; --etch-accordion-button-background-hover: transparent; --etch-accordion-button-background-expanded: transparent;
      --etch-accordion-item-border-radius: var(--radius-none); --etch-accordion-item-border: none; --etch-accordion-item-text-color: var(--neutral-semi-dark);
      --etch-accordion-item-padding-inline: var(--space-l); --etch-accordion-item-padding-block: var(--space-s);
      --etch-accordion-button-outline: 2px solid var(--secondary); --etch-accordion-button-outline-offset: 2px; --etch-accordion-svg-rotate: 0deg;
      --etch-accordion-transition-duration: 0.35s; --etch-accordion-transition-timing-function: ease-in-out;
}
.etch-accordion {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--etch-accordion-gap);
  background: var(--etch-accordion-background);

  :where(.etch-accordion__item) {
    color: var(--etch-accordion-item-text-color);
    border: var(--etch-accordion-item-border);
    border-radius: var(--etch-accordion-item-border-radius);
  }

  :where(.etch-accordion__button) {
    --btn-text-align: left;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--etch-accordion-button-padding);
    color: var(--etch-accordion-item-text-color);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 0;
    font: inherit;
  }

  :where(.etch-accordion__button:focus-visible) {
    outline: var(--etch-accordion-button-outline);
    outline-offset: var(--etch-accordion-button-outline-offset);
    background: var(--etch-accordion-button-background-hover);
  }

  :where(.etch-accordion__button:hover) {
    background: var(--etch-accordion-button-background-hover);
  }

  :where(.etch-accordion__button svg) {
    transition: transform var(--etch-accordion-transition-duration) var(--etch-accordion-transition-timing-function);
    flex-shrink: 0;
  }

  :where(.etch-accordion__button[aria-expanded='true']) {
    border-bottom: var(--etch-accordion-item-border);
    background: var(--etch-accordion-button-background-expanded);
  }

  :where(.etch-accordion__button[aria-expanded='true'] svg) {
    transform: rotate(var(--etch-accordion-svg-rotate));
  }

  :where(.etch-accordion__panel) {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--etch-accordion-transition-duration) var(--etch-accordion-transition-timing-function);
  }

  :where(.etch-accordion__panel[aria-hidden='false']) {
    grid-template-rows: 1fr;
  }

  :where(.etch-accordion__content) {
    overflow: hidden;
    min-height: 0;
  }

  :where(.etch-accordion__content-inner) {
    padding-inline: var(--etch-accordion-item-padding-inline);
    padding-block: var(--etch-accordion-item-padding-block);
  }
}
.etch-accordion__item {
  background-color: color-mix(in srgb, var(--white) 82%, transparent); /* acss-ok: live 82% white tab */ transition: background-color 0.2s;
      &:hover { background-color: color-mix(in srgb, var(--neutral-ultra-light) 84%, transparent); /* acss-ok: live hover tint */ }
      &:has([aria-expanded='true']) { background-color: var(--secondary); --etch-accordion-item-text-color: var(--white); }
}
.etch-accordion__header {
  font-size: var(--text-m);
  text-align: left;
}
.etch-accordion__button {
  flex-direction: row-reverse; justify-content: flex-end; gap: var(--space-s);
      padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-l); font-family: "Inter", var(--text-font-family); font-size: var(--text-l); font-weight: 500; line-height: 1.4;
      & svg { rotate: -90deg; transition: rotate 0.35s ease-in-out; }
      &[aria-expanded='true'] { color: var(--white); }
      &[aria-expanded='true'] svg { rotate: 0deg; }
}
.etch-accordion__content-inner {
  padding-block-start: 0;
}
.logo-carousel-alpha {
  overflow: clip;
  opacity: var(--opacity, 1);
  &[data-fade*='both' i] {
    /* Begin Fade Inline */
    --fade-amount: 25%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount), black calc(100% - var(--fade-amount)), transparent 100%);
    /* End Fade Inline */
  }
  &[data-fade='left' i] {
    /* Begin Fade Left */
    --fade-amount: 25%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount));
    mask-image: linear-gradient(to right, transparent 0%, black var(--fade-amount));
    /* End Fade Left */
  }
  &[data-fade='right' i] {
    /* Begin Fade Right */
    --fade-amount: 25%;
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount));
    mask-image: linear-gradient(to left, transparent 0%, black var(--fade-amount));
    /* End Fade Right */
  }
}
.logo-carousel-alpha__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  animation: logoCarouselAlpha var(--speed, 2s) linear infinite;
  inline-size: fit-content;
  will-change: transform;

  [data-color*='grayscale' i] & {
    filter: grayscale(1);
  }

  > * {
    inline-size: var(--logo-width, 10rem);
    flex-shrink: 0;
    margin-inline-end: var(--gap, 2rem);
  }
  > *:last-child {
    margin-inline-end: var(--gap, 2rem);
  }
}
.dev-note {
  --accent-color: #fff8dc;
  display: var(--display, none);
  flex-direction: column;
  gap: calc(var(--content-gap, 1em) / 2);
  background-color: var(--accent-color);
  color: oklch(from var(--accent-color) 0.15 c h / 1);
  border-left: 4px solid oklch(from var(--accent-color) calc(l / 1.5) calc(c * 6) h / 1);
  padding: 15px 20px;
  border-radius: 4px;
  font-family: Arial, sans-serif;
  line-height: 1.6;
  inline-size: 100%;
  max-inline-size: var(--max-width);
  margin: var(--margin-block) var(--margin-inline);
  z-index: 999;
  h1,h2,h3,h4,h5,h6,p {
    color: oklch(from var(--accent-color) 0.15 c h / 1);
  }
  &[data-display='Etch Only' i].etch-builder-block {
    --display: flex;
  }
  &[data-display='Gutenberg Only' i].wp-block {
    --display: flex;
  }
  &[data-display='Etch and Gutenberg' i]:is(.wp-block, .etch-builder-block) {
    --display: flex;
  }
  &[data-style='danger' i] {
    --accent-color: #f8d7d9;
  }
  &[data-style='info' i] {
    --accent-color: #d1edf0;
  }
  &::before {
    content: attr(data-heading);
    font-weight: bold;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  pre {
    white-space: pre-wrap;
    font-size: 0.95rem;
    inline-size: 100%;
    max-inline-size: max-content;
    border-radius: 5px;
    padding: 1.5rem;
    background: oklch(from var(--black, black) l c h / 0.1);
    code {
      white-space: inherit;
      font-size: 0.9rem;
    }
  }
}
.partners {
  background-color: var(--white); padding-block: var(--space-xl); padding-inline: 1.25rem; /* acss-ok: live is 20px below 1025px */ @media (width >= 1025px) { padding-inline: var(--gutter); }
      &[data-variant="boxed"] { --content-width: 75rem; /* acss-ok: live Services brands section is boxed at 1200px */ }
}
.etch-accordion--custom .etch-accordion__button {
  padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-l); font-size: var(--text-l); line-height: 1.4;
}
.feature-card {
  --feature-card-bg: var(--white); --feature-card-title: var(--neutral-dark); --feature-card-text: color-mix(in oklch, var(--neutral-semi-dark) 31%, var(--neutral-semi-light)); --feature-card-weight: 400;
      display: flex; flex-direction: column; align-items: center; gap: var(--space-xl);
      &[data-variant="purple"] { --feature-card-bg: var(--accent); --feature-card-title: var(--white); --feature-card-text: var(--white); --feature-card-weight: 800; }
      &[data-variant="lilac"] { --feature-card-bg: var(--accent-ultra-light); }
      &[data-variant="pink"] { --feature-card-bg: var(--tertiary); }
      @media (width >= 1025px) {
        &[data-step="1"] { padding-block-start: calc(var(--space-xxl) * 3); }
        &[data-step="2"] { padding-block-start: calc(var(--space-xxl) * 2); }
        &[data-step="3"] { padding-block-start: var(--space-xxl); }
      }
}
.feature-card__box {
  align-self: stretch; padding: var(--space-xs) var(--space-l) var(--space-xl); background-color: var(--feature-card-bg); box-shadow: var(--box-shadow-1);
}
.feature-card__title {
  margin-block: var(--space-l) var(--space-xs); font-size: var(--text-l); font-weight: var(--feature-card-weight); line-height: 1.2; color: var(--feature-card-title);
}
.feature-card__text {
  font-size: var(--text-l); line-height: 1.5; color: var(--feature-card-text);
}
.feature-card__cta {
  &[class*="on-visible--"] { --visible-delay: 1.2s; /* live: the button follows 1.2s after it comes into view */ }
      --btn-font-family: "Inter", var(--heading-font-family); --btn-font-weight: 400; @media (width >= 1025px) { --btn-padding-block: 1.25em; --btn-padding-inline: 3.75em; /* acss-ok: live card button is 20px x 60px at 16px text */ --btn-font-size: 1rem; /* acss-ok: live card button stays 16px */ }
}
.project-card {
  --project-card-bg: color-mix(in srgb, var(--primary) 50%, transparent); /* acss-ok: live 50% yellow */ --project-card-title: var(--neutral-dark);
      display: flex; flex-direction: column; align-items: center; gap: var(--space-m); padding: var(--space-s); background-color: var(--project-card-bg);
      &[data-variant="pink"] { --project-card-bg: var(--tertiary); --project-card-title: var(--secondary); }
      &[data-variant="lavender"] { --project-card-bg: var(--accent-ultra-light); }
      &[data-variant="purple"] { --project-card-bg: var(--accent); --project-card-title: var(--white); }
      @media (width >= 1025px) { padding: var(--space-l); }
}
.project-card__image {
  inline-size: 100%; block-size: auto;
}
.project-card__title {
  font-family: "Inter", var(--heading-font-family); font-size: var(--text-l); font-weight: 600; line-height: 1.3; text-align: center; color: var(--project-card-title);
      @media (width >= 1025px) { font-size: var(--h3); }
}
.service-item {
  display: grid; grid-template-columns: var(--grid-1); align-items: start; gap: var(--space-s); @media (width >= 1025px) { grid-template-columns: var(--grid-2); }
}
.service-item__image {
  inline-size: 100%; block-size: auto;
}
.service-item__body {
  display: flex; flex-direction: column; gap: var(--space-s);
}
.service-item__title {
  font-size: calc(var(--h3) * 1.2); /* acss-ok: live titles are 30px, 1.2 x H3 */ font-weight: 600; line-height: 1.2; color: var(--secondary);
}
.service-item__text {
  font-size: var(--text-l); line-height: 1.5; color: color-mix(in oklch, var(--neutral-semi-dark) 21%, var(--neutral-semi-light));
}
.hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden;
      padding-inline: var(--gutter); /* a div, so ACSS's default section gutter doesn't reach it */
      padding-block: calc(var(--section-space-xl) * 3) var(--space-xs);
      @media (width >= 768px) { padding-inline: 0; min-block-size: calc(12.5rem + 23.4vw); /* acss-ok: fitted to the live hero, 500px at 1280 and 650px at 1920 */ padding-block-start: var(--section-space-l); }
}
.hero__bg {
  position: absolute; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: left center;
      @media (width >= 768px) { object-position: center; }
}
.hero__container {
  display: grid; grid-template-columns: var(--grid-1); @media (width >= 768px) { --content-width: 100%; /* acss-ok: live hero is full width, no container */ grid-template-columns: var(--grid-2); }
}
.hero__title {
  font-family: "Anton", var(--heading-font-family); font-size: 11vw; /* acss-ok: full-width headline on phones */ font-weight: 400; line-height: 1;
      text-align: end; color: var(--white);
      @media (width >= 768px) { grid-column: 2; font-size: 6.6vw; /* acss-ok: live headline is an image 85% of the half-width column, so its type scales with the window */ line-height: 0.95;
        white-space: nowrap; padding-inline-end: 7.5vw; /* acss-ok: live column has 15% right padding */ }
}
.brand-intro {
  --content-width: 90vw; /* acss-ok: live section is full width with 5% side padding */ background-image: linear-gradient(90deg, var(--primary-ultra-light), var(--primary)); padding-block: var(--section-space-s);
      @media (width >= 768px) { padding-block: 4vw; /* acss-ok: Elementor's 4% padding */ }
}
.brand-intro__container {
  display: grid; grid-template-columns: var(--grid-1); align-items: center; gap: var(--space-l); @media (width >= 768px) { grid-template-columns: var(--grid-2); }
}
.brand-intro__text {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center;
}
.brand-intro__title {
  font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1; color: var(--secondary); @media (width >= 1025px) { font-size: var(--h1); }
}
.brand-intro__logo {
  inline-size: min(var(--width-30), 100%); block-size: auto;
}
.brand-intro__services {
  font-size: var(--text-xl); font-weight: 500; line-height: 1.75; color: var(--secondary);
}
.brand-intro__image {
  inline-size: 100%; block-size: auto;
}
.service-overview {
  background-color: var(--white); padding-block: var(--section-space-s); padding-inline: 1.25rem; /* acss-ok: live is 20px below 1025px */ @media (width >= 768px) { padding-block: 4vw; /* acss-ok: Elementor's 4% padding */ }
      @media (width >= 1025px) { --content-width: 84vw; /* acss-ok: live section has 8% side padding, so 1612px at 1920 and 1076px at 1280 */ padding-inline: var(--gutter); }
}
.service-overview__container {
  gap: var(--space-xl);
}
.service-overview__split {
  display: grid; grid-template-columns: var(--grid-1); align-items: start; gap: var(--space-l);
      @media (width >= 768px) { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); /* acss-ok: live columns are 55/45 */ gap: 0; }
}
.service-overview__text {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m);
}
.service-overview__title {
  font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1; color: var(--secondary); @media (width >= 1025px) { font-size: var(--h1); }
}
.service-overview__lead {
  font-size: var(--text-l); line-height: 1.5; color: var(--secondary); max-inline-size: 29em; /* acss-ok: live paragraph caps at 638px */
}
.service-overview__media {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.service-overview__image {
  inline-size: 90%; /* acss-ok: matches the live 90% image */ block-size: auto;
}
.service-overview__caption {
  font-size: var(--text-l); line-height: 1.5; color: var(--secondary); margin-block-start: -15%; /* acss-ok: live caption is pulled up 15% into the mug image's transparent base */
}
.features-grid {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-m); align-items: start;
      @media (width >= 768px) { grid-template-columns: var(--grid-2); }
      @media (width >= 1025px) { grid-template-columns: var(--grid-4); gap: 0; }
}
.partners__container {
  gap: var(--space-l);
}
.partners__title {
  font-family: var(--heading-font-family); font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1; text-align: center; color: var(--secondary); @media (width >= 1025px) { font-size: var(--h1); }
}
.why-choose {
  overflow-x: clip; --content-width: 115rem; /* acss-ok: live gradient is full width but its inner box is capped at 1840px */ background-image: linear-gradient(90deg, var(--white), var(--primary)); padding-block: var(--space-m) 0; padding-inline: var(--space-s);
      @media (width >= 768px) { padding-block: var(--space-xs); }
}
.why-choose__container {
  display: grid; grid-template-columns: var(--grid-1); align-items: center; gap: var(--space-l); @media (width >= 768px) { grid-template-columns: var(--grid-2); gap: 0; }
}
.why-choose__image {
  inline-size: 100%; block-size: auto;
}
.why-choose__content {
  display: flex; flex-direction: column; gap: var(--space-m); @media (width >= 768px) { padding-inline-start: var(--space-xs); } max-inline-size: 37rem; /* acss-ok: live text column stops at about 590px, so the heading wraps */
}
.why-choose__title {
  font-family: "Inter", var(--heading-font-family); font-size: 2.3125rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1.2; color: var(--secondary);
      @media (width >= 1025px) { font-size: 3.75rem; /* acss-ok: live title is a fixed 60px from desktop up */ }
}
.why-choose__answer {
  font-family: "Lora", serif; font-size: var(--text-m); line-height: 1.6; color: var(--white);
}
.projects {
  overflow-x: clip; --content-width: 71.25rem; /* acss-ok: live section is boxed at 1140px */ background-color: var(--white); padding-block: var(--section-space-xs); padding-inline: 1.25rem; /* acss-ok: live is 20px below 1025px */ @media (width >= 1025px) { padding-inline: var(--gutter); }
}
.projects__container {
  gap: var(--section-space-s);
}
.projects__intro {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-s); text-align: center;
}
.projects__title {
  font-family: "Inter", var(--heading-font-family); font-size: 2.3125rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1.2; color: var(--secondary); @media (width >= 1025px) { font-size: var(--h1); }
}
.projects__lead {
  max-inline-size: var(--text-m-max-width); font-size: var(--text-l); line-height: 1.5; color: var(--secondary);
}
.projects__cta {
  display: flex; justify-content: center;
}
.projects-grid {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-m); @media (width >= 768px) { grid-template-columns: var(--grid-2); } @media (width >= 1025px) { gap: var(--space-xl); }
}
.page-intro {
  --content-width: 75rem; /* acss-ok: live Services intro is boxed at 1200px */ background-color: var(--white); padding-block: var(--section-space-xl) var(--section-space-s);
      &[data-variant="mist"] { --content-width: 71.25rem; /* acss-ok: live Contact intro is boxed at 1140px */ background-color: color-mix(in oklch, var(--accent-ultra-light) 50%, var(--white)); /* acss-ok: live #F5F5FE, a paler lilac grey */ padding-block: 0 var(--section-space-xl); @media (width >= 1025px) { padding-block-end: calc(var(--section-space-xl) + 2.8125rem); /* acss-ok: live intro band is 611px tall */ } }
}
.page-intro__container {
  display: grid; grid-template-columns: var(--grid-1); align-items: center; gap: var(--space-l); @media (width >= 768px) { grid-template-columns: var(--grid-2); }
}
.page-intro__text {
  display: flex; flex-direction: column; gap: var(--space-xs);
      @media (width >= 768px) { padding-inline: var(--space-xl); }
      &[data-variant="centred"] { text-align: center; padding-inline: 0; }
}
.page-intro__title {
  font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1; color: var(--secondary);
      @media (width >= 1025px) { font-size: var(--h1); }
      &[data-variant="lead"] { font-size: var(--text-l); font-weight: 400; line-height: 1.5; max-inline-size: none; text-wrap: wrap; /* live lines are not balanced */ }
}
.page-intro__lead {
  font-size: var(--text-l); line-height: 1.5; color: color-mix(in oklch, var(--neutral-semi-dark) 63%, var(--neutral-semi-light));
}
.page-intro__image {
  inline-size: 100%; block-size: auto;
}
.services {
  --content-width: 75rem; /* acss-ok: live services list is boxed at 1200px */ background-color: var(--white); padding-block: 0 var(--section-space-s);
}
.services__container {
  gap: var(--space-xl); align-items: center;
}
.photo-gallery {
  display: grid; grid-template-columns: var(--grid-1); gap: var(--space-l); align-items: start; justify-items: center; inline-size: 100%;
      @media (width >= 768px) { grid-template-columns: var(--grid-3); column-gap: 0; }
}
.photo-gallery__image {
  inline-size: min(100%, 18.75rem); /* acss-ok: live photos are 300px, centred in thirds */ block-size: auto;
}
.banner {
  position: relative; min-block-size: calc(var(--section-space-xl) * 1.2); overflow: hidden;
      @media (width >= 768px) { min-block-size: calc(var(--section-space-xl) * 1.9); }
}
.banner__bg {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.contact {
  --content-width: 71.25rem; /* acss-ok: live contact card is boxed at 1140px */ padding-block: 0 var(--section-space-m); margin-block-start: calc(var(--section-space-xl) * -1); @media (width >= 1025px) { margin-block-start: -10rem; /* acss-ok: live card overlaps the intro by 160px */ }
}
.contact-form {
  display: flex; flex-direction: column; gap: 0.625rem; /* acss-ok: live 10px field gap */ @media (width >= 1025px) { margin-block-start: 3.125rem; /* acss-ok: live form starts 50px below the heading */ }
}
.contact-form__label {
  position: absolute; inline-size: 1px; /* acss-ok: visually-hidden pattern */ block-size: 1px; /* acss-ok: visually-hidden pattern */ overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.contact-form__field {
  inline-size: 100%; padding: 0.5rem 1rem; /* acss-ok: live 40px fields */ line-height: 1.45; border: 1px solid var(--neutral-semi-light); border-radius: calc(var(--radius) * 0.6); /* acss-ok: live 3px */
      background-color: var(--white); font-family: var(--text-font-family); font-size: var(--text-s); color: var(--neutral-dark);
      &::placeholder { color: color-mix(in oklch, var(--neutral-semi-dark) 31%, var(--neutral-semi-light)); }
      &:focus-visible { outline: 2px solid var(--secondary); outline-offset: 1px; }
      &[data-variant="message"] { block-size: 6rem; /* acss-ok: live textarea is 96px */ resize: vertical; }
}
.contact-form__trap {
  position: absolute; inset-inline-start: -10000px; /* acss-ok: honeypot off-screen */ inline-size: 1px; /* acss-ok: honeypot off-screen */ block-size: 1px; /* acss-ok: honeypot off-screen */ overflow: hidden;
}
.contact-form__submit {
  padding-block: 0.75rem; /* acss-ok: live 40px button */ border-radius: calc(var(--radius) * 0.6); /* acss-ok: live 3px */ background-color: var(--secondary); color: var(--white);
      font-family: var(--text-font-family); font-size: var(--text-s); font-weight: 500;
      &:hover, &:focus-visible { background-color: var(--secondary-semi-dark); }
      &:disabled { opacity: 0.7; cursor: wait; }
}
.contact-form__status {
  font-size: var(--text-s); color: var(--neutral-dark); &:empty { display: none; }
}
.services__title {
  position: absolute; inline-size: 1px; /* acss-ok: visually-hidden pattern */ block-size: 1px; /* acss-ok: visually-hidden pattern */ overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.contact-form__turnstile {
  &:empty { display: none; }
}
.legal {
  padding-block: var(--section-space-m) var(--section-space-l);
}
.legal__container {
  align-items: flex-start; gap: var(--space-xs); max-inline-size: var(--width-60);
}
.legal__title {
  font-size: 1.5625rem; /* acss-ok: Elementor's fixed tablet size below 1025px */ font-weight: 600; line-height: 1.1; color: var(--secondary); margin-block-end: var(--space-s); @media (width >= 1025px) { font-size: var(--h1); }
}
.legal__heading {
  font-size: var(--h4); font-weight: 600; line-height: 1.2; color: var(--secondary); margin-block-start: var(--space-m);
}
.legal__text {
  font-size: var(--text-m); line-height: 1.6; color: color-mix(in oklch, var(--neutral-semi-dark) 63%, var(--neutral-semi-light)); max-inline-size: 70ch; /* acss-ok: readable line length */
}
.site-footer__legal-link {
  color: inherit; text-decoration: underline; &:hover { color: var(--secondary); }
}
.banner::after {
  content: ''; position: absolute; inset: 0; background-color: color-mix(in srgb, var(--secondary) 50%, transparent); /* acss-ok: live 50% slate overlay */
}
.logo-slider {
  --logo-slider-per-view: 3; --logo-slider-gap: 2.1875rem; /* acss-ok: live 35px slide gap */
      display: flex; flex-direction: column; gap: var(--space-s);
      @media (width >= 768px) { --logo-slider-per-view: 4; &[data-variant="inset"] { --logo-slider-per-view: 5; } }
      @media (width >= 1025px) { --logo-slider-per-view: 6; &[data-variant="inset"] { --logo-slider-per-view: 6; } }
}
.logo-slider__stage {
  position: relative; padding-inline: 1.875rem; /* acss-ok: live arrows sit 30px outside the row */
      .logo-slider[data-variant="inset"] & { padding-inline: 0; }
}
.logo-slider__arrow {
  position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 1; display: grid; place-items: center;
      padding: 0; border: 0; background: none; cursor: pointer; color: color-mix(in oklch, var(--neutral-semi-dark) 63%, var(--neutral-semi-light));
      &[data-direction="prev"] { inset-inline-start: 0; } &[data-direction="next"] { inset-inline-end: 0; }
      &:hover, &:focus-visible { color: var(--secondary); }
      .logo-slider[data-variant="inset"] & { color: color-mix(in srgb, var(--neutral-ultra-light) 90%, transparent); /* acss-ok: live light arrows */
        &[data-direction="prev"] { inset-inline-start: var(--space-xs); } &[data-direction="next"] { inset-inline-end: var(--space-xs); } }
}
.logo-slider__arrow-icon {
  inline-size: 1.5625rem; /* acss-ok: live 25px chevrons */ block-size: 1.5625rem; /* acss-ok: live 25px chevrons */
}
.logo-slider__viewport {
  overflow: hidden;
}
.logo-slider__track {
  display: flex; align-items: center; gap: var(--logo-slider-gap); will-change: transform;
}
.logo-slider__slide {
  flex: 0 0 calc((100% - (var(--logo-slider-per-view) - 1) * var(--logo-slider-gap)) / var(--logo-slider-per-view));
      display: grid; place-items: center;
}
.logo-slider__logo {
  max-inline-size: 100%; block-size: auto;
}
.logo-slider__dots {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; /* acss-ok: live 6px bullets, 12px apart */
}
.logo-slider__dot {
  inline-size: 0.375rem; /* acss-ok: live 6px bullets */ block-size: 0.375rem; /* acss-ok: live 6px bullets */ padding: 0; border: 0; border-radius: 50%;
      background-color: var(--black); opacity: 0.2; cursor: pointer; transition: opacity 0.2s;
      &[aria-current="true"] { opacity: 1; }
      &:focus-visible { outline: 2px solid var(--secondary); outline-offset: 2px; }
}
[class*="on-visible--"] {
  --visible-duration: 1.25s; --visible-timing: ease;
      --visible-float-distance: 100px; --visible-slide-distance: 150px;
}