/*
 * Intent page blocks (class-ws-intent-blocks.php). Loaded only on pages that use them.
 * Sizes follow the homepage blocks: rem scales with the viewport like the rest of the theme (1rem ≈ 8.8px at
 * 1440px), section titles = categories block title, text = theme paragraph, buttons = theme .button classes.
 * Every rule is scoped to .ws-intent (added to the block wrapper) so .entry-content defaults do not leak in.
 */

.ws-intent {
  --i-teal: var(--color-brand-primary, #1eabb5);
  --i-teal-600: #167f86;
  --i-teal-700: #137277;
  --i-accent: var(--color-brand-accent, #e6f7f8);
  --i-text: var(--color-brand-text, #5a5c69);
  --i-head: #444;
  --i-line: #e3e6f0;
  --i-gray: #f1f3f7;
  --i-red: #d32f2f;
  --i-yellow: var(--color-brand-secondary, #f6c23e);
  --i-radius: 1rem;
  --i-shadow: 0 0.4rem 2.4rem rgba(20, 40, 60, 0.08);

  color: var(--i-text);
}

/* The page's content grid item may shrink below its content (wide carousels must not widen the page). */
.page__content > .entry-content {
  min-width: 0;
}

/* The sticky header must not cover what has keyboard focus or an in-page link target (WCAG 2.4.11); the same
   16px below the header as the script's own scrolling. The header is 16.6rem (13.2rem on phones), written out
   with the theme's root font size (10px; 4.8px + 0.28vw up to 1919px; 4.8px + 1vw on phones) because WebKit
   resolves rem on the root element against 16px. */
html {
  scroll-padding-top: 182px;
}

@media screen and (max-width: 1919px) {
  html {
    scroll-padding-top: calc(95.68px + 4.648vw);
  }
}

/* The block wrapper is a flex container: the block's own element takes the full width. */
.ws-intent > div {
  width: 100%;
  min-width: 0;
}

/* --- resets against .entry-content (lists with bullets, paragraph margins, justified text on phones) --- */
/* (0,2,0): beats `.entry-content p` and h1-h6 (0,1,1); block rules below with the same weight still win (later). */
.ws-intent.block__wrapper :where(h1, h2, h3, h4, p, figure, dl, dd) {
  margin: 0;
  padding: 0;
  text-align: inherit;
}

.ws-intent.block__wrapper.block__wrapper blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

/* Lists: the theme gives ul/ol margins (0,2,1) and li padding + "•" (0,3,2). The resets below are 0,3,1 and 0,4,1;
   a list or list item that needs its own padding/margin says so with the same prefix (see "list boxes" below). */
.ws-intent.block__wrapper.block__wrapper :is(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ws-intent.block__wrapper.block__wrapper.block__wrapper li {
  margin: 0;
  padding: 0;
}

.ws-intent.block__wrapper.block__wrapper.block__wrapper li::before {
  display: none;
  content: none;
}

/* Lists typed into text fields (FAQ answers, section texts) keep normal bullets and numbers. */
.ws-intent.block__wrapper.block__wrapper.block__wrapper :is(.faq__answer, .intent-head__text) :is(ul, ol) {
  margin: 0.8rem 0;
  padding-left: 2rem;
  list-style: disc;
}

.ws-intent.block__wrapper.block__wrapper.block__wrapper :is(.faq__answer, .intent-head__text) ol {
  list-style: decimal;
}

.ws-intent.block__wrapper.block__wrapper.block__wrapper :is(.faq__answer, .intent-head__text) li {
  margin: 0.3rem 0;
  padding: 0;
}

/* list boxes: lists and list items with their own padding */
.ws-intent.block__wrapper.block__wrapper.block__wrapper .option-tabs__solution {
  padding: 2rem 2.2rem;
}

.ws-intent.block__wrapper.block__wrapper .quote-wizard__steps {
  padding: 3.2rem 2.4rem;
}

.ws-intent.block__wrapper.block__wrapper .quote-wizard__notes {
  gap: 0.6rem;
  margin-bottom: 0;
  padding: 1.6rem 2rem;
}

/* The theme sizes every span like body text (1.6rem/300); inside these blocks a span takes its parent's font
   unless a class rule says otherwise (:where keeps this rule weaker than any class). */
:where(.ws-intent) span {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.ws-intent.block__wrapper .splide__pagination li::before {
  display: none;
}

.ws-intent .feather {
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
}

.ws-intent .button {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

/* The theme resets button outlines; keyboard focus must stay visible (WCAG 2.4.7). */
.ws-intent .button:focus-visible,
.ws-intent .splide__arrow:focus-visible,
.ws-intent .splide__pagination__page:focus-visible,
.ws-intent .feature-tiles__tile-link:focus-visible {
  outline: 2px solid var(--i-teal-600);
  outline-offset: 3px;
}

.ws-intent :is(.feature-tiles__lead, .service-cards__card--teal) .button:focus-visible {
  outline-color: #fff;
}

/* the theme turns focused primary buttons and hovered outlined ones #1eabb5: white text then fails contrast */
.ws-intent .button--primary:focus {
  background-color: var(--i-teal-700);
  border-color: var(--i-teal-700);
}

.ws-intent .button--outlined-primary:hover {
  background-color: var(--i-teal-600);
  border-color: var(--i-teal-600);
}

.ws-intent .button .feather {
  width: 1.6rem;
  height: 1.6rem;
}

/* --- shared section head: title like the homepage categories title, text like a theme paragraph --- */
.ws-intent .intent-head {
  display: grid;
  gap: 1.2rem;
  max-width: 76rem;
  margin-bottom: 3.2rem;
}

.ws-intent .intent-head--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.ws-intent .intent-head__title,
.ws-intent .reasons-grid__title,
.ws-intent .feature-tiles__lead h2 {
  color: var(--i-head);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1.3;
}

.ws-intent .intent-head__text,
.ws-intent .intent-head__text p {
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
}

.ws-intent.block__wrapper .intent-head__text a {
  color: var(--i-teal-600);
  font-weight: 400;
  font-size: inherit;
}

.ws-intent .intent-head__text p + p {
  margin-top: 0.8rem;
}

.ws-intent .intent-tag {
  display: inline-block;
  padding: 0.3rem 1rem;
  color: var(--i-teal-700);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.4;
  white-space: nowrap;
  background: rgba(30, 171, 181, 0.14);
  border-radius: 3rem;
}

.ws-intent .intent-ticks {
  display: grid;
  gap: 0.8rem;
}

.ws-intent.block__wrapper .intent-ticks li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.45;
}

.ws-intent .intent-ticks .feather {
  width: 1.6rem;
  height: 1.6rem;
  margin-top: 0.2rem;
  color: var(--i-teal-600);
}

/* =========================== Hero =========================== */
div.intent-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 6rem;
  align-items: center;
}

.intent-hero__content {
  display: grid;
  gap: 2.4rem;
  align-content: center;
}

.ws-intent .intent-hero__title {
  display: grid;
  gap: 1.2rem;
  line-height: 1.1;
}

.intent-hero__title-main {
  color: var(--i-teal-600);
  font-weight: 900;
  font-size: 4.8rem;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.intent-hero__title-sub {
  color: var(--i-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.25;
}

.ws-intent .intent-hero__text {
  max-width: 54rem;
  font-weight: 300;
  font-size: 1.8rem;
  line-height: 1.5;
}

.intent-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.intent-hero__media {
  position: relative;
  padding-bottom: 8rem;
}

.ws-intent .intent-hero__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--i-radius);
}

.ws-intent .intent-hero__quote {
  position: absolute;
  right: -3rem;
  bottom: 0;
  display: grid;
  gap: 1rem;
  width: min(36rem, 70%);
  padding: 2rem 2.2rem;
  background: var(--i-accent);
  border-radius: var(--i-radius);
  box-shadow: var(--i-shadow);
}

.ws-intent .intent-hero__quote-product {
  font-weight: 300;
  font-size: 1.4rem;
}

.ws-intent.block__wrapper .intent-hero__quote-product a {
  color: var(--i-teal-700);
  font-weight: 400;
  font-size: inherit;
  text-decoration: none;
}

.ws-intent .intent-hero__quote blockquote p {
  color: var(--i-head);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.45;
}

.ws-intent .intent-hero__quote figcaption {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  margin: 0.4rem 0 0;
  font-size: 1.4rem;
}

.ws-intent .intent-hero__quote figcaption img {
  width: 4.4rem;
  min-width: 36px;
  height: 4.4rem;
  min-height: 36px;
  object-fit: cover;
  border-radius: 50%;
}

.intent-hero__quote figcaption > span {
  display: grid;
  gap: 0.2rem;
}

/* name and job title close together, as one unit */
.ws-intent .intent-hero__quote figcaption :is(strong, span span) {
  line-height: 1.25;
}

.intent-hero__quote figcaption strong {
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.4rem;
}

.intent-hero__quote figcaption span span {
  color: var(--i-teal-700);
  font-weight: 300;
  font-size: 1.4rem;
}

/* =========================== Package cards =========================== */
.package-cards__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.package-cards__item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
}

.package-cards__item--featured {
  box-shadow: 0 0.8rem 3.2rem rgba(20, 40, 60, 0.14);
}

.package-cards__badge {
  position: absolute;
  font-size: max(1.2rem, 12px);
  top: 1.2rem;
  left: 1.2rem;
  z-index: 1;
  padding: 0.4rem 1.2rem;
  color: #fff;
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
  background: var(--i-teal-600);
  border-radius: 3rem;
}

.ws-intent .package-cards__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 760 / 493;
  object-fit: cover;
  border-radius: 0;
}

.package-cards__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1.6rem;
  padding: 2.4rem;
}

.ws-intent .package-cards__name {
  color: var(--i-head);
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.3;
}

.ws-intent .package-cards__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  align-items: baseline;
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--i-line);
}

.package-cards__price del {
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.4rem;
}

.package-cards__price ins {
  color: var(--i-red);
  font-weight: 700;
  font-size: 2rem;
  text-decoration: none;
}

.package-cards__price :is(del, ins) .woocommerce-Price-amount,
.package-cards__price :is(del, ins) bdi,
.package-cards__price :is(del, ins) span {
  font: inherit;
  color: inherit;
}

.package-cards__discount {
  padding: 0.2rem 0.8rem;
  color: #3d3000;
  font-weight: 700;
  font-size: 1.2rem;
  background: var(--i-yellow);
  border-radius: 3rem;
}

.ws-intent .package-cards__vat {
  flex-basis: 100%;
  font-weight: 400;
  font-size: max(1.3rem, 12px);
}

.package-cards__body .button {
  align-self: flex-start;
  margin-top: auto;
}

/* =========================== Option tabs =========================== */
.option-tabs__tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 2rem;
  padding: 0.6rem;
  background: var(--i-gray);
  border-radius: 1.4rem;
}

.ws-intent .option-tabs__tab {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  min-height: 44px;
  padding: 1.2rem 1.4rem;
  color: var(--i-head);
  font-size: 1.5rem;
  line-height: 1.3;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: var(--i-radius);
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
}

.option-tabs__tab:hover {
  background: rgba(255, 255, 255, 0.6);
}

.option-tabs__tab[aria-selected='true'] {
  background: #fff;
  box-shadow: 0 0.2rem 1rem rgba(20, 40, 60, 0.08);
}

.option-tabs__tab:focus-visible {
  outline: 2px solid var(--i-teal-600);
  outline-offset: 2px;
}

.option-tabs__tab > span {
  display: grid;
}

.option-tabs__tab strong {
  font-weight: 500;
}

.option-tabs__tab span span {
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.4rem;
}

.ws-intent .plan {
  flex: none;
  width: 4rem;
  min-width: 32px;
  height: 4rem;
  min-height: 32px;
}

.plan .plan-floor {
  fill: var(--i-accent);
}

.plan .plan-wall {
  stroke: var(--i-teal-600);
  stroke-width: 3.6;
  stroke-linecap: round;
}

.plan .plan-open {
  stroke: #9aa3ad;
  stroke-width: 1.6;
  stroke-dasharray: 3 3;
}

.option-tabs__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
}

.option-tabs__panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--i-radius);
}

.option-tabs__panel[hidden] {
  display: none;
}

.ws-intent .option-tabs__panel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1300 / 720;
  object-fit: cover;
  border-radius: var(--i-radius);
}

.option-tabs__caption {
  position: absolute;
  inset: 0 0 auto;
  display: grid;
  gap: 0.6rem;
  padding: 2.8rem 2.8rem 8rem;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 60%, rgba(0, 0, 0, 0) 100%);
}

.ws-intent .option-tabs__caption h3 {
  color: #fff;
  font-weight: 700;
  font-size: 2.6rem;
}

.ws-intent .option-tabs__caption p {
  max-width: 44rem;
  color: #fff;
  font-weight: 400;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  font-size: 1.5rem;
  line-height: 1.45;
}

.option-tabs__solutions {
  display: grid;
  gap: 1.2rem;
}

.ws-intent .option-tabs__solutions-title {
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.5rem;
}

.option-tabs__solution-list {
  display: grid;
  gap: 1.2rem;
}

.option-tabs__solution {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'head price' 'text button';
  gap: 0.8rem 2.4rem;
  align-items: start;
  background: var(--i-accent);
  border-radius: var(--i-radius);
}

.option-tabs__solution-head {
  display: flex;
  flex-wrap: wrap;
  grid-area: head;
  gap: 0.6rem 1rem;
  align-items: center;
}

.ws-intent .option-tabs__solution-head h3 {
  color: var(--i-head);
  font-weight: 700;
  font-size: 1.7rem;
}

.ws-intent .option-tabs__solution-price {
  grid-area: price;
  font-weight: 300;
  font-size: 1.4rem;
  white-space: nowrap;
  text-align: right;
}

.ws-intent .option-tabs__solution-price[hidden] {
  display: none;
}

.option-tabs__solution-price strong,
.option-tabs__solution-price strong * {
  color: var(--i-head);
  font-weight: 700;
  font-size: 1.5rem;
}

.ws-intent .option-tabs__solution-text {
  grid-area: text;
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ws-intent .option-tabs__solution .button--outlined-primary {
  color: var(--i-teal-700);
  background-color: #fff;
}

.option-tabs__solution .button {
  grid-area: button;
  align-self: start;
  justify-self: end;
  min-width: 9rem;
}

.option-tabs__help {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.6rem 2.2rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
}

.ws-intent .option-tabs__help p {
  color: var(--i-head);
  font-weight: 400;
  font-size: 1.5rem;
}

.ws-intent .button--link {
  color: var(--i-teal-600);
  font-weight: 500;
  font-size: 1.5rem;
}

/* =========================== Feature tiles =========================== */
div.feature-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.6rem;
}

.feature-tiles__lead {
  position: relative;
  display: flex;
  grid-row: span 2;
  min-height: 42rem;
  overflow: hidden;
  background: var(--i-teal-600);
  border-radius: var(--i-radius);
}

.ws-intent .feature-tiles__lead-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.feature-tiles__lead::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(19, 114, 119, 0.95) 0%, rgba(19, 114, 119, 0.9) 60%, rgba(19, 114, 119, 0.35) 100%);
  content: '';
}

.feature-tiles__lead-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.6rem;
  align-content: start;
  justify-items: start;
  padding: 3.2rem;
}

.ws-intent .feature-tiles__lead h2,
.ws-intent .feature-tiles__lead p {
  color: #fff;
}

.ws-intent .feature-tiles__lead p {
  max-width: 40rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
}

.feature-tiles__tiles {
  display: contents;
}

.ws-intent.block__wrapper .feature-tiles__tile-link {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 1.2rem;
  align-items: stretch;
  height: 100%;
  min-height: 23rem;
  padding: 2rem 2.2rem;
  color: var(--i-head);
  text-decoration: none;
  background: var(--i-accent);
  border-radius: var(--i-radius);
  transition: box-shadow 0.2s, transform 0.2s;
}

.ws-intent.block__wrapper .feature-tiles__tile-link:hover {
  text-decoration: none;
  box-shadow: var(--i-shadow);
}

.feature-tiles__tile-text {
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.feature-tiles__tile-title {
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.8rem;
}

.feature-tiles__tile-desc {
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.4;
}

.ws-intent .feature-tiles__tile-link img {
  align-self: center;
  justify-self: end;
  width: 100%;
  max-height: 15rem;
  object-fit: contain;
  border-radius: 0;
}

.feature-tiles__tile-go {
  position: absolute;
  bottom: 1.8rem;
  left: 2.2rem;
  display: grid;
  place-items: center;
  width: 3.6rem;
  min-width: 28px;
  height: 3.6rem;
  min-height: 28px;
  color: var(--i-teal-600);
  background: #fff;
  border-radius: 50%;
}

/* =========================== Logos and photo gallery =========================== */
.logo-gallery__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 4.8rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}

.logo-gallery__head .intent-head__title {
  max-width: 40rem;
}

/* The logos move slowly to the left and stop under the mouse; the track holds the logos twice, so -50% loops
   seamlessly (spacing is padding on each logo, not gap, to keep the two halves exactly equal). */
.logo-gallery__marquee {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.ws-intent .logo-gallery__logos {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: logo-gallery-marquee 50s linear infinite;
}

/* (the selector outweighs the block reset of list items, .ws-intent.block__wrapper x3 li) */
.ws-intent.block__wrapper.block__wrapper.block__wrapper .logo-gallery__logos li {
  flex: none;
  margin: 0;
  padding: 0 5.6rem 0 0;
}

.logo-gallery__marquee:hover .logo-gallery__logos {
  animation-play-state: paused;
}

@keyframes logo-gallery-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-gallery__marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .ws-intent .logo-gallery__logos {
    flex-wrap: wrap;
    gap: 2rem 4rem;
    width: auto;
    animation: none;
  }

  .ws-intent.block__wrapper.block__wrapper.block__wrapper .logo-gallery__marquee .logo-gallery__logos li {
    padding: 0;
  }

  .ws-intent .logo-gallery__logos .logo-gallery__copy {
    display: none;
  }
}

.ws-intent .logo-gallery__logos img {
  display: block;
  width: auto;
  max-width: 14rem;
  height: 4rem;
  object-fit: contain;
  border-radius: 0;
  opacity: 0.9;
  filter: grayscale(1);
}

.logo-gallery__slider {
  contain: inline-size;
}

.logo-gallery__slider .splide__track {
  padding-bottom: 1rem;
}

.logo-gallery__slide {
  height: 52rem;
}

.ws-intent .logo-gallery__slide figure {
  position: relative;
  width: calc(52rem * var(--ratio, 1.333));
  max-width: 82vw;
  height: 100%;
}

.ws-intent .logo-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--i-radius);
}

.ws-intent .logo-gallery__slide figcaption {
  position: absolute;
  bottom: 1.4rem;
  left: 1.4rem;
  margin: 0;
  padding: 0.6rem 1.4rem;
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.4rem;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 3rem;
}

.logo-gallery__slider .splide__pagination {
  position: static;
  margin-top: 2.4rem;
}

/* =========================== Quote wizard =========================== */
section.ws-intent.quote-wizard {
  background: var(--i-gray);
  box-shadow: 0 0 0 100vmax var(--i-gray);
  clip-path: inset(0 -100vmax);
}

.quote-wizard__box {
  display: grid;
  grid-template-columns: 34rem minmax(0, 1fr);
  min-height: 52rem;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
  box-shadow: var(--i-shadow);
}

.quote-wizard__steps {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: 3.2rem 2.4rem;
  background: var(--i-accent);
}

.ws-intent .quote-wizard__step {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.4rem;
  align-items: center;
  width: 100%;
  min-height: 44px;
  padding: 1.4rem 1.2rem;
  color: var(--i-head);
  text-align: left;
  background: none;
  border: 0;
  border-radius: var(--i-radius);
  cursor: default;
  transition: background 0.2s, box-shadow 0.2s;
}

.ws-intent .quote-wizard__step:disabled {
  opacity: 1;
}

.quote-wizard__step-number {
  color: var(--i-teal-700);
  font-weight: 700;
  font-size: 2.4rem;
  font-variant-numeric: tabular-nums;
}

.quote-wizard__step > span:last-child {
  display: grid;
  gap: 0.2rem;
}

.quote-wizard__step strong {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.3;
}

.quote-wizard__step span span {
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.35;
}

.quote-wizard__step.is-current {
  background: #fff;
  box-shadow: 0 0.2rem 1rem rgba(20, 40, 60, 0.08);
}

.quote-wizard__step.is-done:not(:disabled) {
  cursor: pointer;
}

.quote-wizard__step.is-done:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.65);
}

.quote-wizard__step:focus-visible,
.quote-wizard__chip:focus-visible {
  outline: 2px solid var(--i-teal-600);
  outline-offset: 2px;
}

.quote-wizard__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 4.8rem;
}

.quote-wizard__main:focus {
  outline: none;
}

.quote-wizard__stage {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.quote-wizard__actions[hidden] {
  display: none;
}

.quote-wizard__intro {
  display: grid;
  gap: 2rem;
  justify-items: center;
  margin: auto;
  text-align: center;
}

.ws-intent .quote-wizard__intro img {
  width: min(44rem, 100%);
  height: auto;
  border-radius: 0;
}

.ws-intent .quote-wizard__intro p {
  max-width: 50ch;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
}

.quote-wizard__bar {
  height: 0.4rem;
  min-height: 3px;
  margin-bottom: 2.8rem;
  overflow: hidden;
  background: var(--i-line);
  border-radius: 3.2rem;
}

.quote-wizard__bar i {
  display: block;
  height: 100%;
  background: var(--i-teal);
  border-radius: 3.2rem;
  transition: width 0.4s ease;
}

.quote-wizard__heading {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.8rem;
}

.ws-intent .quote-wizard__heading .button {
  flex: none;
}

.ws-intent .quote-wizard__heading h3 {
  color: var(--i-head);
  font-weight: 700;
  font-size: 2.4rem;
}

.quote-wizard__heading h3:focus {
  outline: none;
}

.quote-wizard__heading span {
  font-weight: 300;
  font-size: 1.4rem;
}

.ws-intent .quote-wizard__question {
  min-width: 0;
  margin: 0 0 2.8rem;
  padding: 0;
  border: 0;
}

.ws-intent .quote-wizard__question legend {
  margin-bottom: 0.8rem;
  padding: 0;
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.6rem;
}

.ws-intent .quote-wizard__help {
  max-width: 64ch;
  margin: -0.2rem 0 1.2rem;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.45;
}

.quote-wizard__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.ws-intent .quote-wizard__chip {
  display: inline-flex;
  gap: 0.8rem;
  align-items: center;
  min-height: 44px;
  padding: 0.9rem 1.8rem;
  color: var(--i-head);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  background: #fff;
  border: 1px solid var(--i-line);
  border-radius: 3rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.quote-wizard__chip:hover {
  border-color: var(--i-teal);
}

.quote-wizard__chip[aria-pressed='true'] {
  color: #fff;
  background: var(--i-teal-600);
  border-color: var(--i-teal-600);
}

.quote-wizard__chip[aria-pressed='true'] .plan-floor {
  fill: #fff;
}

.ws-intent .quote-wizard__chip .plan {
  width: 2.8rem;
  min-width: 24px;
  height: 2.8rem;
  min-height: 24px;
  margin: -0.4rem 0;
}

.quote-wizard__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem;
  margin-bottom: 2.8rem;
}

.quote-wizard__field {
  display: grid;
  gap: 0.6rem;
}

.quote-wizard__field > span {
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.5rem;
}

.quote-wizard__field small {
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.4rem;
}

/* follow-up question under the options (e.g. how many shelves), shown while its option is chosen */
.quote-wizard__follow {
  max-width: 56rem;
  margin-top: 1.6rem;
}

.quote-wizard__follow[hidden] {
  display: none;
}

.ws-intent .quote-wizard__field input {
  width: 100%;
  min-height: 44px;
  padding: 1.2rem 1.4rem;
  color: var(--i-head);
  font-weight: 400;
  font-size: max(1.6rem, 16px);
  background: #fff;
  border: 2px solid #858796;
  border-radius: var(--i-radius);
}

.ws-intent .quote-wizard__field input:focus {
  border-color: var(--i-teal-600);
  outline: 2px solid rgba(22, 127, 134, 0.25);
}

.ws-intent .quote-wizard__field input[aria-invalid="true"] {
  border-color: var(--i-red);
}

.ws-intent .quote-wizard__field .quote-wizard__error {
  color: var(--i-red);
  font-weight: 400;
}

.quote-wizard__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 2.4rem;
  border-top: 1px solid var(--i-line);
}

.quote-wizard__nav-hint {
  font-weight: 300;
  font-size: 1.4rem;
}

.ws-intent .quote-wizard__summary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.8rem 2.4rem;
  margin-bottom: 2rem;
  padding: 2.4rem;
  font-size: 1.5rem;
  line-height: 1.5;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
}

.quote-wizard__summary dt {
  color: var(--i-head);
  font-weight: 500;
}

.quote-wizard__summary dd {
  font-weight: 300;
  overflow-wrap: anywhere;
}

.quote-wizard__notes {
  display: grid;
  background: var(--i-gray);
  border-radius: var(--i-radius);
}

.ws-intent.block__wrapper .quote-wizard__notes li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ws-intent.block__wrapper .quote-wizard__notes li.is-urgent {
  color: var(--i-head);
  font-weight: 500;
}

.ws-intent .quote-wizard a:is([href^="tel:"], [href^="mailto:"]) {
  color: var(--i-teal-600);
  font-weight: 500;
  font-size: inherit;
  white-space: nowrap;
}

.quote-wizard__form[hidden] {
  display: none;
}

.quote-wizard__stage[hidden],
.quote-wizard__form > [hidden] {
  display: none;
}

.ws-intent .quote-wizard__main .quote-wizard__form {
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--i-line);
}

.ws-intent .quote-wizard.is-sent .quote-wizard__main .quote-wizard__form {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.ws-intent .quote-wizard__form-title {
  margin-bottom: 0.8rem;
  color: var(--i-head);
  font-weight: 700;
  font-size: 2.4rem;
}

.ws-intent .quote-wizard__form-lead {
  margin-bottom: 1.6rem;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
}

.ws-intent .quote-wizard__form textarea.wpforms-field-large {
  height: 12rem;
  min-height: 12rem;
}

/* only when there is no quote form: the link that hands the answers to the contact form */
.quote-wizard__back {
  margin-top: 1.6rem;
}

/* ---- after sending: the WPForms confirmation as the panel header, then what happens next ---- */
.ws-intent .quote-wizard__form .wpforms-confirmation-container {
  position: relative;
  min-height: 4.8rem;
  padding: 0 0 0 6.4rem;
  color: var(--i-text);
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
  background: none;
  border: 0;
  border-radius: 0;
}

.ws-intent .quote-wizard__form .wpforms-confirmation-container::before {
  top: 0;
  left: 0;
  width: 4.8rem;
  height: 4.8rem;
  background-size: 2.4rem;
}

.ws-intent .quote-wizard__form .wpforms-confirmation-container strong {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--i-head);
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.3;
}

.ws-intent .quote-wizard__form .wpforms-confirmation-container p + p {
  margin-top: 0.4rem;
}

.quote-wizard__done {
  display: grid;
  gap: 2.4rem;
  margin-top: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid var(--i-line);
}

.ws-intent .quote-wizard__done h3 {
  margin-bottom: 1.6rem;
  color: var(--i-head);
  font-weight: 700;
  font-size: 2rem;
}

.ws-intent.block__wrapper.block__wrapper .quote-wizard__next {
  display: grid;
  gap: 1.6rem;
}

.ws-intent.block__wrapper .quote-wizard__next li {
  display: grid;
  grid-template-columns: 4rem 1fr;
  font-weight: 300;
  font-size: 1.6rem;
  line-height: 1.5;
}

.quote-wizard__next-n {
  color: var(--i-teal-700);
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}

.ws-intent .quote-wizard__next strong {
  display: block;
  color: var(--i-head);
  font-weight: 500;
}

.ws-intent .quote-wizard__urgent {
  padding: 1.4rem 1.8rem;
  color: var(--i-head);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.5;
  background: #fff8e6;
  border-left: 0.4rem solid var(--i-yellow);
  border-radius: 0.6rem;
}

.ws-intent .quote-wizard__contact {
  margin-top: 1.6rem;
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.5;
}

.quote-wizard__recap {
  padding: 1.6rem 2rem;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
}

.ws-intent .quote-wizard__answers summary {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  min-height: 44px;
  margin-top: 0.8rem;
  color: var(--i-teal-600);
  font-weight: 500;
  font-size: 1.5rem;
  list-style: none;
  cursor: pointer;
}

.quote-wizard__answers summary::-webkit-details-marker {
  display: none;
}

.quote-wizard__answers summary:focus-visible {
  outline: 2px solid var(--i-teal-600);
  outline-offset: 2px;
}

.quote-wizard__answers summary svg {
  width: 1.6rem;
  height: 1.6rem;
  transition: transform 0.2s;
}

.quote-wizard__answers[open] summary svg {
  transform: rotate(180deg);
}

.ws-intent .quote-wizard__answers dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1.6rem;
  padding-top: 0.4rem;
  font-size: 1.4rem;
}

.quote-wizard__answers dt {
  font-weight: 500;
}

.quote-wizard__answers dd {
  font-weight: 300;
}

/* =========================== Service cards =========================== */
section.ws-intent.service-cards {
  background: #fafafa;
  box-shadow: 0 0 0 100vmax #fafafa;
  clip-path: inset(0 -100vmax);
}

div.service-cards {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 3fr);
  gap: 3.2rem;
  align-items: stretch;
}

.service-cards .intent-head {
  align-content: start;
  margin: 0;
}

.service-cards__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6rem;
}

.service-cards__card {
  display: flex;
  flex-direction: column;
  min-height: 30rem;
  overflow: hidden;
  border-radius: var(--i-radius);
}

.service-cards__card--teal {
  color: #fff;
  background: var(--i-teal-600);
}

.service-cards__card--light {
  background: var(--i-accent);
}

.service-cards__content {
  display: grid;
  gap: 1.4rem;
  align-content: start;
  justify-items: start;
  padding: 2.6rem 2.6rem 2rem;
}

.ws-intent .service-cards__card h3 {
  font-weight: 700;
  font-size: 2rem;
}

.ws-intent .service-cards__card p {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ws-intent .service-cards__card--teal :is(h3, p) {
  color: #fff;
}

.ws-intent .service-cards__card--light h3 {
  color: var(--i-head);
}

.ws-intent .service-cards__note {
  margin: auto 2.6rem 2.6rem;
  padding-top: 1.6rem;
  font-size: 1.4rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.service-cards__image {
  margin-top: auto;
}

.ws-intent .service-cards__image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 18rem;
  object-fit: cover;
  object-position: top;
  border-radius: 0;
}

/* Buttons on one line across the cards: title, text, button and the bottom part (note or image) share the
   list's rows. Browsers without subgrid keep the plain cards. */
@supports (grid-template-rows: subgrid) {
  @media screen and (min-width: 701px) {
    .service-cards__list {
      row-gap: 0;
    }

    .service-cards__card {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
    }

    .service-cards__content {
      grid-row: 1 / span 3;
      grid-template-rows: subgrid;
    }

    .service-cards__content > h3 {
      grid-row: 1;
    }

    .service-cards__content > p {
      grid-row: 2;
    }

    .service-cards__content > .button {
      grid-row: 3;
    }

    .service-cards__card > :is(.service-cards__note, .service-cards__image) {
      grid-row: 4;
    }
  }
}

/* =========================== Story cards =========================== */
/* Dark cards: photo on top fading into the card, the client's quote, name and job title (the Figma "Kliendid"
   section). The cards do not link anywhere; the section button leads to all client stories. */
.story-cards__head {
  display: flex;
  flex-wrap: wrap;
  gap: 2.4rem 4.8rem;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}

.story-cards__head .intent-head {
  margin: 0;
}

.ws-intent .story-cards__head .block__button {
  margin: 0;
}

.story-cards__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.story-cards__card figure {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  color: #fff;
  background: var(--i-head);
  border-radius: var(--i-radius);
}

.story-cards__image {
  position: relative;
}

.story-cards__image::after {
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(rgba(68, 68, 68, 0), var(--i-head));
  content: '';
}

.ws-intent .story-cards__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 680 / 486;
  object-fit: cover;
  border-radius: 0;
}

.ws-intent.block__wrapper.block__wrapper .story-cards__card blockquote {
  flex: 1;
  padding: 0.4rem 2.4rem 0;
}

.ws-intent.block__wrapper .story-cards__card blockquote p {
  color: #fff;
  font-weight: 300;
  font-size: 1.8rem;
  font-style: italic;
  line-height: 1.45;
}

.story-cards__card figcaption {
  display: grid;
  gap: 0.2rem;
  padding: 2rem 2.4rem 2.4rem;
}

.ws-intent .story-cards__name {
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.3;
}

.ws-intent .story-cards__role {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 300;
  font-size: 1.4rem;
  line-height: 1.3;
}

/* =========================== Reasons grid =========================== */
div.reasons-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 6rem;
  align-items: start;
}

div.reasons-grid--no-image {
  grid-template-columns: 1fr;
}

.reasons-grid__content {
  display: grid;
  gap: 3.2rem;
}

.ws-intent .reasons-grid__title {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.reasons-grid__number {
  flex: none;
  color: var(--i-teal-600);
  font-weight: 900;
  font-size: 10rem;
  line-height: 0.9;
}

.reasons-grid__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4rem 3.2rem;
}

.reasons-grid__item {
  display: flex;
  gap: 1.4rem;
  align-items: flex-start;
}

.reasons-grid__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 4rem;
  min-width: 32px;
  height: 4rem;
  min-height: 32px;
  color: var(--i-teal-600);
  background: var(--i-accent);
  border-radius: 1rem;
}

.ws-intent .reasons-grid__item h3 {
  margin-bottom: 0.4rem;
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.8rem;
}

.ws-intent .reasons-grid__item p {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.5;
}

.ws-intent .reasons-grid__image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--i-radius);
}

/* =========================== FAQ =========================== */
.faq__list {
  display: grid;
  gap: 1rem;
  max-width: 100rem;
}

.faq__item {
  background: #fff;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
  transition: background 0.2s;
}

.faq__item[open] {
  background: var(--i-accent);
  border-color: transparent;
}

.faq__item summary {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 1.6rem 2.2rem;
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.faq__item summary:focus-visible {
  outline: 2px solid var(--i-teal-600);
  outline-offset: 2px;
  border-radius: var(--i-radius);
}

.faq__item summary .feather {
  color: var(--i-teal-600);
  transition: transform 0.2s;
}

.faq__item[open] summary .feather {
  transform: rotate(180deg);
}

.faq__answer {
  padding: 0 2.2rem 2rem;
}

.ws-intent .faq__answer p,
.ws-intent.block__wrapper .faq__answer li {
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.55;
}

.ws-intent .faq__answer p + p {
  margin-top: 1rem;
}

/* =========================== Contact form section =========================== */
div.contact-form-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6rem;
  align-items: start;
}

.contact-form-section__info {
  display: grid;
  gap: 2rem;
}

.contact-form-section__persons {
  display: grid;
  gap: 1.6rem;
}

.ws-intent.block__wrapper.block__wrapper .contact-form-section__persons {
  margin-top: 0.8rem;
}

.contact-form-section__persons li {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}

.ws-intent .contact-form-section__persons img {
  width: 5.6rem;
  min-width: 44px;
  height: 5.6rem;
  min-height: 44px;
  object-fit: cover;
  border-radius: 50%;
}

.contact-form-section__persons li > div {
  display: grid;
  gap: 0.2rem;
  font-size: 1.4rem;
}

.contact-form-section__persons strong {
  color: var(--i-head);
  font-weight: 500;
  font-size: 1.6rem;
}

.contact-form-section__persons span {
  font-weight: 300;
}

.ws-intent.block__wrapper .contact-form-section__info a {
  color: var(--i-teal-600);
  font-weight: 400;
  font-size: 1.5rem;
  text-decoration: none;
}

.ws-intent.block__wrapper .contact-form-section__info a:hover {
  text-decoration: underline;
}

.ws-intent .contact-form-section__email {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--i-teal-600);
}

.contact-form-section__form {
  padding: 3.2rem;
  background: #fff;
  border: 1px solid var(--i-line);
  border-radius: var(--i-radius);
  box-shadow: var(--i-shadow);
}

.ws-intent .contact-form-section__form > h3 {
  margin-bottom: 2rem;
  color: var(--i-head);
  font-weight: 700;
  font-size: 2rem;
}

/* Forms in these blocks: short fields side by side (WPForms markup, classes from the form settings). */
.ws-intent .wpforms-field-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.6rem;
}

.ws-intent .wpforms-field-container > .wpforms-field {
  grid-column: 1 / -1;
}

.ws-intent .wpforms-field-container > :is(.cd-first-name, .cd-last-name, .cd-email, .cd-phone) {
  grid-column: auto;
}

.ws-intent .cd-message textarea {
  height: 12rem;
  min-height: 0;
}

/* The homepage simple-content block used as a section title (block class "intent-title"). */
.block__wrapper.intent-title .simple-content__content h2 {
  font-size: 3.2rem;
  line-height: 1.3;
}

/* =========================== Tablet =========================== */
@media screen and (max-width: 1200px) {
  .package-cards__list,
  .story-cards__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  div.service-cards {
    grid-template-columns: 1fr;
  }

  .ws-intent .intent-hero__quote {
    right: 0;
  }
}

@media screen and (max-width: 1000px) {
  div.intent-hero,
  .option-tabs__layout,
  div.reasons-grid,
  div.contact-form-section {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }

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

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

  .feature-tiles__lead {
    grid-row: auto;
    grid-column: 1 / -1;
    min-height: 32rem;
  }

  .quote-wizard__box {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .quote-wizard__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .ws-intent.block__wrapper.block__wrapper .quote-wizard__steps {
    padding: 1rem;
  }

  .ws-intent .quote-wizard__step {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    justify-items: center;
    padding: 1rem 0.4rem;
    text-align: center;
  }

  .quote-wizard__step span span {
    display: none;
  }

  .quote-wizard__step strong {
    font-size: 1.4rem;
  }

  .quote-wizard__step-number {
    font-size: 1.8rem;
  }
}

/* =========================== Phone =========================== */
@media screen and (max-width: 700px) {
  html {
    scroll-padding-top: calc(79.36px + 13.2vw);
  }

  .feature-tiles__lead::after {
    background: rgba(19, 114, 119, 0.9);
  }

  .ws-intent .intent-head__title,
  .ws-intent .reasons-grid__title,
  .ws-intent .feature-tiles__lead h2 {
    font-size: 2.2rem;
  }

  .ws-intent .intent-head {
    margin-bottom: 2rem;
  }

  .intent-hero__title-main {
    font-size: 3.2rem;
  }

  .intent-hero__title-sub {
    font-size: 2rem;
  }

  .ws-intent .intent-hero__text {
    font-size: 1.6rem;
  }

  .intent-hero__media {
    padding-bottom: 0;
  }

  .ws-intent .intent-hero__quote {
    position: relative;
    right: auto;
    width: auto;
    margin: -4rem 1.6rem 0;
  }

  .service-cards__list,
  .reasons-grid__list,
  .quote-wizard__fields {
    grid-template-columns: 1fr;
  }

  /* phones: each answer under its question */
  .ws-intent .quote-wizard__summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 1.6rem;
  }

  .quote-wizard__summary dd + dt {
    margin-top: 1rem;
  }

  .ws-intent .quote-wizard__form .wpforms-confirmation-container {
    padding-left: 5.6rem;
  }

  .ws-intent .quote-wizard__form .wpforms-confirmation-container::before {
    width: 4rem;
    height: 4rem;
  }

  /* packages and client stories: a swipeable row like the homepage carousels, the next card peeks in */
  .package-cards__list,
  .story-cards__list {
    grid-template-columns: none;
    grid-auto-columns: 84%;
    grid-auto-flow: column;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .ws-intent.block__wrapper.block__wrapper :is(.package-cards__list, .story-cards__list) {
    margin-right: -2rem;
    padding: 0.4rem 2rem 1.6rem 0;
  }

  :is(.package-cards__list, .story-cards__list)::-webkit-scrollbar {
    display: none;
  }

  .package-cards__item,
  .story-cards__card {
    scroll-snap-align: start;
  }

  .story-cards__head {
    row-gap: 1.6rem;
    margin-bottom: 2.4rem;
  }

  div.feature-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .ws-intent.block__wrapper .feature-tiles__tile-link {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 1.6rem 1.6rem 5.6rem;
  }

  .ws-intent .feature-tiles__tile-link img {
    justify-self: center;
    max-height: 11rem;
  }

  .feature-tiles__tile-desc {
    display: none;
  }

  .feature-tiles__tile-go {
    bottom: 1.4rem;
    left: 1.6rem;
  }

  .feature-tiles__lead-content {
    padding: 2.4rem;
  }

  .option-tabs__tabs {
    display: flex;
    gap: 0.4rem;
    margin-right: -2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .option-tabs__tabs::-webkit-scrollbar {
    display: none;
  }

  .ws-intent .option-tabs__tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .ws-intent .option-tabs__caption h3 {
    font-size: 2rem;
  }

  .option-tabs__solution {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'head head' 'text text' 'price button';
    align-items: center;
  }

  .ws-intent.block__wrapper.block__wrapper.block__wrapper .option-tabs__solution {
    padding: 1.6rem;
  }

  .option-tabs__caption {
    position: static;
    padding: 1.4rem 0 0;
    background: none;
  }

  .ws-intent .option-tabs__caption h3 {
    color: var(--i-head);
  }

  .ws-intent .option-tabs__caption p {
    color: var(--i-text);
    text-shadow: none;
  }

  .ws-intent .wpforms-field-container {
    grid-template-columns: 1fr;
  }

  .ws-intent .option-tabs__solution-price {
    text-align: left;
  }

  .feature-tiles__lead {
    min-height: 0;
  }


  .ws-intent.block__wrapper.block__wrapper.block__wrapper .logo-gallery__logos li {
    padding-right: 3.2rem;
  }

  .ws-intent .logo-gallery__logos img {
    height: 3rem;
  }

  .logo-gallery__slide {
    height: 26rem;
  }

  .ws-intent .logo-gallery__slide figure {
    width: calc(26rem * var(--ratio, 1.333));
  }

  .quote-wizard__main {
    padding: 2.4rem 1.8rem;
  }

  .quote-wizard__nav-hint {
    display: none;
  }

  .quote-wizard__nav [data-next] {
    flex: 1 1 auto;
  }

  .reasons-grid__number {
    font-size: 6.4rem;
  }

  .service-cards__card {
    min-height: 0;
  }

  .contact-form-section__form {
    padding: 2.2rem 1.6rem;
  }
}

@media screen and (max-width: 700px) {
  .block__wrapper.intent-title .simple-content__content h2 {
    font-size: 2.2rem;
  }
}

/* =========================== Detail pass (design review 2026-10-30) =========================== */
/* Headings without a lonely last word; paragraphs without a one-word last line. */
.ws-intent :is(h1, h2, h3, h4, summary, .intent-hero__title-sub, .quote-wizard__step strong) {
  text-wrap: balance;
}

.ws-intent :is(p, li) {
  text-wrap: pretty;
}

/* Service cards: images of the same height; the band at the top of the images is the card's own dark teal. */
.ws-intent .service-cards__image img {
  height: 14rem;
  max-height: none;
  object-fit: cover;
  object-position: center bottom;
}

.service-cards__card--teal {
  background: var(--i-teal-600);
}

/* "Vaata" in the solutions list fills on hover like every other outlined button. */
.ws-intent .option-tabs__solution .button--outlined-primary:hover {
  color: #fff;
  background-color: var(--i-teal-600);
  border-color: var(--i-teal-600);
}

/* Photo-gallery arrows in the gutter beside the photos, as in the homepage carousels. */
.logo-gallery__slider .splide__arrows {
  left: -2rem;
  width: calc(100% + 4rem);
}

/* WPForms (contact and quote form): the submit button and labels as the theme's buttons and the wizard labels. */
.ws-intent.block__wrapper .cd-contact-form button[type="submit"].button--primary {
  min-height: 0;
  padding: 1.5rem 3rem;
  font-size: 1.6rem;
  line-height: 1;
  background: var(--i-teal-600);
  border: 1px solid var(--i-teal-600);
  border-radius: 3rem;
}

.ws-intent.block__wrapper .cd-contact-form button[type="submit"].button--primary:hover {
  background: var(--i-teal-700);
  border-color: var(--i-teal-700);
}

.ws-intent.block__wrapper .cd-contact-form .wpforms-field-label {
  color: var(--i-head);
  font-weight: 500;
}

.ws-intent .wpforms-recaptcha-container {
  margin-bottom: 1.6rem;
}

/* WPForms measures the Turnstile box when the widget renders; in the wizard the form is still hidden then, so it
   measures 0, marks the box "invisible" (height 0) and the visible widget later lies under the submit button.
   The box takes the widget's own height instead (still 0 when the widget really is invisible). */
.ws-intent .wpforms-container .wpforms-recaptcha-container.wpforms-is-turnstile.wpforms-is-turnstile-invisible {
  height: auto;
}

.ws-intent .contact-form-section__info .intent-head__text {
  margin-top: -0.8rem;
}

@media screen and (min-width: 1001px) {
  /* The tab photo and the reasons photo as tall as the text column next to them: the photo is taken out of the
     flow (absolute), so the text column alone sets the row height. */
  .option-tabs__layout,
  div.reasons-grid {
    align-items: stretch;
  }

  .option-tabs__panel:not([hidden]) {
    height: 100%;
    min-height: 30rem;
  }

  .reasons-grid__image {
    position: relative;
    min-height: 30rem;
  }

  .ws-intent :is(.option-tabs__panel, .reasons-grid__image) img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

@media screen and (min-width: 701px) {
  /* hero text centred on the photo, not on the photo plus the quote card's overhang */
  .intent-hero__content {
    padding-bottom: 8rem;
  }
}

@media screen and (min-width: 701px) and (max-width: 1200px) {
  .package-cards__list {
    grid-auto-rows: 1fr;
  }
}

@media screen and (max-width: 1000px) {
  .ws-intent .reasons-grid__image img {
    aspect-ratio: 3 / 2;
  }

  /* the moving logo row under the title, full width */
  .logo-gallery__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .logo-gallery__marquee {
    flex: none;
    width: 100%;
  }

  .ws-intent .quote-wizard__step {
    height: 100%;
    align-content: start;
  }

  .quote-wizard.is-sent .quote-wizard__steps {
    display: none;
  }
}

@media screen and (max-width: 700px) {
  /* More air between the sections on phones: at least 3.2rem above and below (the theme default is 2rem);
     the hero stays close to the header. */
  .ws-intent.block__wrapper.block__padded:not(.intent-hero) {
    padding-top: max(var(--p-top-mobile, 0px), 3.2rem);
  }

  .ws-intent.block__wrapper.block__padded {
    padding-bottom: max(var(--p-bottom-mobile, 0px), 3.2rem);
  }

  .ws-intent :is(.package-cards__name, .quote-wizard__heading h3,
    .quote-wizard__form-title, .quote-wizard__form .wpforms-confirmation-container strong) {
    font-size: 2rem;
  }

  .ws-intent.block__wrapper .cd-contact-form button[type="submit"].button--primary {
    min-height: 32px;
    padding: 0.8rem 2rem;
    font-size: 1.4rem;
  }

  .logo-gallery__slider {
    margin-right: -2rem;
  }

  .ws-intent .option-tabs__caption p {
    min-height: 2.9em;
  }

  .ws-intent .feature-tiles__tile-link img {
    align-self: end;
  }

  /* "Veel ideid järgmiseks messiks": title left, button right, as the other section titles */
  .block__wrapper.intent-title .simple-content__wrapper {
    flex-flow: row nowrap;
    gap: 2rem;
    align-items: center;
    justify-content: space-between;
  }

  .block__wrapper.intent-title .simple-content__content {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ws-intent *,
  .ws-intent *::before,
  .ws-intent *::after {
    transition: none !important;
  }
}