/* AUTO-GENERATED 2026-07-10T14:46:40+00:00 — ara muuda kasitsi.
   Allikas: site.css @importid (inc/css-bundle.php). Regenereerub automaatselt,
   kui moni komponent-CSS on sellest failist uuem. */

/* == 00-settings/variables.css == */
/**
 * Design Tokens - Generated from Sharks Settings
 * Last updated: 2026-06-15 08:49:02
 * DO NOT EDIT THIS FILE MANUALLY - Use Sharks Settings in WordPress Admin
 */

:root {
  /* Colors */
  --color-primary: #0066CC;
  --color-secondary: #00A3E0;
  --color-accent: #FF6B35;
  --color-success: #00C853;
  --color-text: #1A1A1A;
  --color-text-light: #666666;
  --color-bg: #FFFFFF;
  --color-bg-light: #F8F9FA;
  --color-bg-dark: #1A1A1A;

  /* Typography */
  --font-sans: "Inter", system-ui, sans-serif;
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 2.5vw, 1.75rem);
  --fs-body: 1rem;
  --lh-normal: 1.6;
  --lh-tight: 1.2;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --container-max: 1200px;
  --container-padding: 1rem;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-m: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
}


/* == 20-elements/typography.css == */
/* Headings */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-tight);
  color: var(--color-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* Paragraphs */
p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
}

/* Lists */
ul, ol {
  margin: 0 0 var(--space-2);
  padding-left: var(--space-3);
}

li {
  margin-bottom: var(--space-1);
}

/* Other elements */
strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

small {
  font-size: var(--fs-small);
}



/* == 30-components/1vs2.css == */
/* ====================================
   1vs2 Block (Comparison Block)
   ==================================== */

.block-1vs2 {
  width: 100%;
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
}

.block-1vs2__container {
  width: 100%;
  max-width: 1440px; /* fixed width, centered — not full-bleed */
  margin-inline: auto;
  height: 100%;
}

.block-1vs2__content {
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 120px 58px;
  height: 100%;
  align-items: flex-start;
}

/* Header Section */
.block-1vs2__header {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-end;
  width: 100%;
}

.block-1vs2__title {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  font-style: normal;
  width: 100%;
  min-width: 100%;
  margin: 0;
}

.block-1vs2__title .highlight {
  color: #757472;
}

.block-1vs2__subtitle {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  font-style: normal;
  width: 428px;
  margin: 0;
}

/* Cards Section */
.block-1vs2__cards {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
}

.block-1vs2__card {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 428px;
  background-color: transparent;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

.block-1vs2__card:hover {
  background-color: #ffffff;
}

.block-1vs2__card-border {
  position: absolute;
  inset: 0;
  border: 1px solid white;
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.block-1vs2__card:hover .block-1vs2__card-border {
  border-color: #ffffff;
}

.block-1vs2__card-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  height: 100%;
}

.block-1vs2__card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  color: #ffffff;
  transition: color 0.3s ease;
}

.block-1vs2__card:hover .block-1vs2__card-icon {
  color: #000000;
}

.block-1vs2__card-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.block-1vs2__card-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
}

.block-1vs2__card-label {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  font-style: normal;
  width: 100%;
  margin: 0;
  color: #ffffff;
  transition: color 0.3s ease;
}

.block-1vs2__card:hover .block-1vs2__card-label {
  color: #000000;
}

.block-1vs2__card-description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  font-style: normal;
  width: 100%;
  margin: 0;
  color: #ffffff;
  transition: color 0.3s ease;
}

.block-1vs2__card:hover .block-1vs2__card-description {
  color: #000000;
}

/* Links Section */
.block-1vs2__links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
  gap: 16px;
}

.block-1vs2__link {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.2s ease;
}

.block-1vs2__link:link,
.block-1vs2__link:visited {
  color: #ffffff;
}

.block-1vs2__link:hover,
.block-1vs2__link:focus,
.block-1vs2__link:active {
  color: rgb(187, 186, 182);
  opacity: 1;
}

.block-1vs2__link span {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: normal;
  letter-spacing: -0.6px;
  font-style: normal;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.block-1vs2__arrow-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.block-1vs2__arrow-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .block-1vs2__content {
    padding: 80px 40px;
  }
  
  .block-1vs2__title {
    font-size: 60px;
    letter-spacing: -3px;
  }
  
  .block-1vs2__subtitle {
    font-size: 28px;
    letter-spacing: -1.4px;
    width: 100%;
    max-width: 428px;
  }
  
  .block-1vs2__card {
    height: 360px;
  }
}

@media (max-width: 768px) {
  .block-1vs2__content {
    padding: 60px 24px;
    gap: 32px;
  }
  
  .block-1vs2__header {
    gap: 20px;
  }
  
  .block-1vs2__title {
    font-size: 48px;
    letter-spacing: -2.4px;
  }
  
  .block-1vs2__subtitle {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-1vs2__cards {
    flex-direction: column;
    gap: 16px;
  }
  
  .block-1vs2__card {
    width: 100%;
    height: 300px;
  }
  
  .block-1vs2__card-description {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-1vs2__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .block-1vs2__link span {
    font-size: 18px;
    letter-spacing: -0.54px;
  }
}

@media (max-width: 480px) {
  .block-1vs2__content {
    padding: 40px 20px;
  }
  
  .block-1vs2__title {
    font-size: 36px;
    letter-spacing: -1.8px;
  }
  
  .block-1vs2__subtitle {
    font-size: 20px;
    letter-spacing: -1px;
  }
  
  .block-1vs2__card {
    height: 260px;
  }
  
  .block-1vs2__card-icon {
    width: 32px;
    height: 32px;
  }
  
  .block-1vs2__card-label {
    font-size: 16px;
  }
  
  .block-1vs2__card-description {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
}



/* == 30-components/tech-platforms.css == */
/* ====================================
   Technology & Platforms Block
   ==================================== */

.block-tech-platforms {
  width: 100%;
  background-color: #EEEBE5;
  padding: 80px 20px;
  min-height: 100vh;
}

/* Background color variants (selected from admin) */
.block-tech-platforms.is-bg-white {
  background-color: #ffffff;
}

.block-tech-platforms.is-bg-gray {
  background-color: #F7F7F5;
}

.block-tech-platforms__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 58px;
}

/* Header */
.block-tech-platforms__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 40px;
}

.block-tech-platforms__icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  /* Shift icons down to align with the visible centre of the title text. */
  transform: translateY(10px);
}

.block-tech-platforms__icon svg {
  width: 100%;
  height: 100%;
}

.block-tech-platforms__title {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #000000;
  margin: 0;
  text-transform: uppercase;
}

/* Subtitle */
.block-tech-platforms__subtitle {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
  text-align: center;
  margin: 0 auto 40px;
  max-width: 600px;
}

/* Filters */
.block-tech-platforms__filters {
  display: flex;
  gap: 16px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.block-tech-platforms__filter-btn {
  padding: 14px 32px;
  border: 2px solid #000000;
  background-color: transparent;
  border-radius: 50px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #000000;
}

.block-tech-platforms__filter-btn:hover {
  background-color: #000000;
  color: #EEEBE5;
}

.block-tech-platforms__filter-btn.active {
  background-color: #000000;
  color: #EEEBE5;
}

/* Table Container */
.block-tech-platforms__table-container {
  background-color: #000000;
  border-radius: 0;
  padding: 48px 60px;
  overflow-x: auto;
}

/* Table */
.block-tech-platforms__table {
  width: 100%;
  border-collapse: collapse;
  color: #FFFFFF;
  table-layout: fixed;
}

.block-tech-platforms__table thead th {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  padding: 0 24px 24px 0;
  border-bottom: 1px solid #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  width: 25%;
}

.block-tech-platforms__table thead th:last-child {
  padding-right: 0;
}

.block-tech-platforms__table tbody td {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  padding: 32px 24px 32px 0;
  border-bottom: 1px solid #333333;
  vertical-align: top;
}

.block-tech-platforms__table tbody td:last-child {
  padding-right: 0;
}

.block-tech-platforms__table tbody tr:last-child td {
  border-bottom: none;
}

.block-tech-platforms__platform-name {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
}

/* Lists */
.block-tech-platforms__table ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.block-tech-platforms__table ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: 12px;
  line-height: 1.6;
}

.block-tech-platforms__table ul li:last-child {
  margin-bottom: 0;
}

/* Row visibility for filtering */
.block-tech-platforms__row {
  transition: opacity 0.3s ease;
}

.block-tech-platforms__row.hidden {
  display: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .block-tech-platforms__container {
    padding: 0 40px;
  }

  .block-tech-platforms__title {
    font-size: 48px;
  }

  .block-tech-platforms__table-container {
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .block-tech-platforms {
    padding: 60px 20px;
  }

  .block-tech-platforms__container {
    padding: 0 24px;
  }

  .block-tech-platforms__title {
    font-size: 36px;
    text-align: center;
  }

  .block-tech-platforms__subtitle {
    font-size: 16px;
  }

  .block-tech-platforms__header {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
  }

  /* Smaller, proportionate icons (the 48px icons dwarfed the 36/28px title) and
     drop the desktop translateY shift, which only made sense in the row layout. */
  .block-tech-platforms__icon {
    width: 32px;
    height: 32px;
    transform: none;
  }

  .block-tech-platforms__filter-btn {
    font-size: 16px;
    padding: 12px 24px;
  }

  /* Full-bleed the black box edge-to-edge on mobile — it was inset by the
     block + container side padding (~44px), leaving beige edges. Break out of
     that padding so it spans the full viewport width. */
  .block-tech-platforms__table-container {
    padding: 32px 24px;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .block-tech-platforms__table thead th {
    font-size: 16px;
    padding: 0 16px 16px 0;
  }

  .block-tech-platforms__table tbody td {
    font-size: 14px;
    padding: 24px 16px 24px 0;
  }
}

@media (max-width: 640px) {
  .block-tech-platforms__title {
    font-size: 28px;
  }

  .block-tech-platforms__icon {
    width: 26px;
    height: 26px;
  }

  .block-tech-platforms__subtitle {
    font-size: 14px;
  }

  .block-tech-platforms__filter-btn {
    font-size: 14px;
    padding: 10px 20px;
  }

  .block-tech-platforms__table-container {
    padding: 24px 16px;
  }

  .block-tech-platforms__table thead th {
    font-size: 14px;
    padding: 0 12px 12px 0;
  }

  .block-tech-platforms__table tbody td {
    font-size: 13px;
    padding: 20px 12px 20px 0;
  }
}

/* ===== Mobile: convert the 4-column comparison table into stacked,
   labelled cards so each platform's text is fully readable instead of
   being squeezed into four overlapping narrow columns. ===== */
@media (max-width: 768px) {
  .block-tech-platforms__table-container {
    padding: 16px;
  }

  /* Collapse the table semantics to simple blocks */
  .block-tech-platforms__table,
  .block-tech-platforms__table tbody,
  .block-tech-platforms__table tr,
  .block-tech-platforms__table td {
    display: block;
    width: 100%;
  }

  /* The header row is replaced by per-cell labels */
  .block-tech-platforms__table thead {
    display: none;
  }

  /* Each table row becomes its own card */
  .block-tech-platforms__table tbody tr {
    border: 1px solid #333333;
    padding: 24px 20px;
    margin-bottom: 16px;
  }

  .block-tech-platforms__table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* Reset desktop cell borders/padding inside the card */
  .block-tech-platforms__table tbody td {
    border-bottom: none !important;
    padding: 0 0 18px 0 !important;
    font-size: 15px;
  }

  .block-tech-platforms__table tbody td:last-child {
    padding-bottom: 0 !important;
  }

  /* Platform name acts as the card title */
  .block-tech-platforms__platform-name {
    font-size: 22px;
    font-weight: 600;
    padding-bottom: 16px !important;
    margin-bottom: 6px;
    border-bottom: 1px solid #333333 !important;
  }

  .block-tech-platforms__platform-name::before {
    display: none !important;
  }

  /* Show each column's name as a small label above its content */
  .block-tech-platforms__table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #BBBAB6;
    margin-bottom: 8px;
  }

  .block-tech-platforms__table tbody td ul li {
    margin-bottom: 8px;
  }
}



/* == 30-components/button.css == */
/* Button Component */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.875rem 1.75rem;
  min-height: 44px;
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  box-sizing: border-box;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn:active {
  transform: translateY(0);
}

/* Button variants */
.btn--primary {
  background: var(--color-primary);
  color: #fff;
}

.btn--primary:hover {
  background: var(--color-secondary);
  color: #fff;
}

.btn--secondary {
  background: var(--color-secondary);
  color: #fff;
}

.btn--secondary:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn--outline {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline:hover {
  background: var(--color-primary);
  color: #fff;
}

.btn--accent {
  background: var(--color-accent);
  color: #fff;
}

.btn--accent:hover {
  background: #E55A2B;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--color-text);
}

.btn--ghost:hover {
  background: var(--color-bg-light);
  color: var(--color-text);
}

/* Button sizes */
.btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: var(--fs-small);
}

.btn--lg {
  padding: 1.125rem 2.25rem;
  font-size: 1.125rem;
}

/* Button block */
.btn--block {
  display: flex;
  width: 100%;
}



/* == 30-components/hero.css == */
/* Hero Block */
.block-hero {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
  margin-top: -80px;
  padding-top: calc(clamp(3rem, 8vw, 6rem) + 80px);
}

/* Hero with background image */
.block-hero--has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.block-hero--has-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.block-hero--has-image .container,
.block-hero--has-image .block-hero__ripples {
  position: relative;
  z-index: 2;
}

.block-hero__label {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  letter-spacing: 0.05em;
}

.block-hero__inner {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
}

.block-hero__content {
  max-width: 100%;
}

.block-hero__title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.block-hero__text {
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-3);
  color: var(--color-text-light);
  max-width: 600px;
}

.block-hero__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.block-hero__media {
  position: relative;
  margin: 0;
}

.block-hero__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

/* Alignment variations */
.block-hero.alignfull {
  padding-left: 0;
  padding-right: 0;
}

.block-hero.alignfull .block-hero__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Style variations */
.block-hero--centered {
  text-align: center;
}

.block-hero--centered .block-hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
}

.block-hero--centered .block-hero__content {
  max-width: 800px;
  margin: 0 auto;
}

.block-hero--centered .block-hero__buttons {
  justify-content: center;
}

.block-hero--dark {
  background: var(--color-bg-dark);
}

.block-hero--dark .block-hero__title,
.block-hero--dark .block-hero__text {
  color: #fff;
}

/* Dark Wave Variant (Default Marketing Sharks Style) */
.block-hero--dark-wave {
  min-height: 100vh;
  min-height: 890px;
  background: #000000;
  padding: 0;
  margin-top: 0;
  position: relative;
  display: block;
}

.block-hero--dark-wave.block-hero--has-image {
  background-blend-mode: overlay;
}

.block-hero--dark-wave .container {
  position: relative;
  z-index: 3;
  max-width: 1440px !important;
  width: 100% !important;
  padding: 0 !important;
  padding-inline: 0 !important;
  margin: 0 auto !important;
}

.block-hero--dark-wave .block-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 890px;
  padding-top: 170px;
  padding-right: 58px;
  padding-left: 58px;
  position: relative;
  width: 100%;
  max-width: 1440px;
}

/* Ensure content stays left-aligned on all screen sizes */
@media (min-width: 1px) {
  .block-hero--dark-wave .block-hero__inner {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .block-hero--dark-wave .block-hero__left,
  .block-hero--dark-wave .block-hero__center,
  .block-hero--dark-wave .block-hero__right {
    margin-left: 0 !important;
  }
}

.block-hero--dark-wave .block-hero__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 1324px;
  height: 235px;
}

.block-hero--dark-wave .block-hero__label {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-align: left;
  text-transform: uppercase;
  color: #FFFFFF;
  width: auto;
  height: auto;
  margin: 0;
  order: 0;
}

.block-hero--dark-wave .block-hero__center {
  width: 100%;
  order: 1;
}

.block-hero--dark-wave .block-hero__title {
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 180px;
  line-height: 100%;
  text-align: right;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 180px;
}

@media (max-width: 1440px) {
  .block-hero--dark-wave .block-hero__title {
    font-size: clamp(3rem, 12.5vw, 180px);
    height: auto;
  }
}

.block-hero--dark-wave .block-hero__right {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  gap: 80px;
  width: 100%;
  max-width: 1324px;
  min-height: 120px;
  margin-top: auto;
  padding-bottom: 80px;
}

.block-hero--dark-wave .block-hero__tagline {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 130%;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  text-align: left;
  margin: 0;
  width: 450px;
  max-width: 100%;
  height: auto;
  min-height: 120px;
  flex: none;
  order: 0;
}

@media (max-width: 1440px) {
  .block-hero--dark-wave .block-hero__tagline {
    font-size: clamp(1.125rem, 2.5vw, 36px);
  }
}

.block-hero--dark-wave .block-hero__cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  padding: 10px 0px;
  gap: 8px;
  width: 293px;
  height: 46px;
  flex: none;
  order: 1;
  flex-grow: 0;
  background: transparent;
  color: #FFFFFF;
  transition: all var(--transition-base);
}

.block-hero--dark-wave .block-hero__cta:hover {
  opacity: 0.8;
  color: #FFFFFF;
}

.block-hero--dark-wave .block-hero__cta:visited {
  color: #FFFFFF;
}

.block-hero--dark-wave .block-hero__cta:active {
  color: #FFFFFF;
}

.block-hero--dark-wave .block-hero__cta-text {
  width: 259px;
  font-family: 'Switzer';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #FFFFFF;
  flex: none;
  order: 0;
  flex-grow: 0;
  display: flex;
  align-items: center;
}

.block-hero--dark-wave .block-hero__cta-icon {
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  flex: none;
  order: 1;
  flex-grow: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.block-hero--dark-wave .block-hero__cta:hover .block-hero__cta-icon {
  transform: scale(1.08);
}

.block-hero--dark-wave .block-hero__cta-icon path {
  stroke: #1a1a1a;
}

/* Ripple Effects */
.block-hero__ripples {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.block-hero__ripple {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  left: -10%;
  bottom: -20%;
  transform-origin: center;
}

.block-hero__ripple--1 {
  width: 600px;
  height: 240px;
  border-radius: 50% / 40%;
  transform: rotate(-5deg);
  animation: ripple-pulse 10s ease-in-out infinite;
}

.block-hero__ripple--2 {
  width: 900px;
  height: 360px;
  border-radius: 50% / 40%;
  transform: rotate(-8deg);
  animation: ripple-pulse 12s ease-in-out infinite 1.5s;
  opacity: 0.7;
}

.block-hero__ripple--3 {
  width: 1200px;
  height: 480px;
  border-radius: 50% / 40%;
  transform: rotate(-10deg);
  animation: ripple-pulse 14s ease-in-out infinite 3s;
  opacity: 0.5;
}

.block-hero__ripple--4 {
  width: 1500px;
  height: 600px;
  border-radius: 50% / 40%;
  transform: rotate(-12deg);
  animation: ripple-pulse 16s ease-in-out infinite 4.5s;
  opacity: 0.3;
}

@keyframes ripple-pulse {

  0%,
  100% {
    transform: scale(1) rotate(-5deg);
    opacity: 0.08;
  }

  50% {
    transform: scale(1.05) rotate(-7deg);
    opacity: 0.12;
  }
}

/* Beige/Clay Wave Variant */
.block-hero--beige-wave {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e4dc;
  padding: 0;
  position: relative;
}

.block-hero--beige-wave.block-hero--has-image::before {
  background: rgba(232, 228, 220, 0.7);
}

.block-hero--beige-wave .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block-hero--beige-wave .block-hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
  gap: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-hero--beige-wave .block-hero__content {
  max-width: 1440px;
  text-align: center;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-hero--beige-wave .block-hero__label {
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: rgba(26, 26, 26, 0.5);
  margin-bottom: 1rem;
  display: block;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.block-hero--beige-wave .block-hero__title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  line-height: 1.1;
  text-transform: uppercase;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  width: 100%;
  text-align: center;
}

.block-hero--beige-wave .block-hero__buttons {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.block-hero--beige-wave .block-hero__buttons .btn {
  background: #ffffff;
  color: #1a1a1a;
  border: none;
  padding: 0.75rem 1.5rem 0.75rem 2rem;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  transition: all var(--transition-base);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.block-hero--beige-wave .block-hero__buttons .btn:hover {
  background: rgba(255, 255, 255, 0.95);
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2);
}

.block-hero--beige-wave .block-hero__buttons .btn::after {
  content: '→';
  font-size: 1.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  color: #ffffff;
  border-radius: 50%;
  transition: all var(--transition-base);
  flex-shrink: 0;
}

.block-hero--beige-wave .block-hero__buttons .btn:hover::after {
  transform: scale(1.08);
}

.block-hero--beige-wave .block-hero__ripple {
  border: 1px solid rgba(26, 26, 26, 0.08);
}

/* White Wave Variant */
.block-hero--white-wave {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  padding: 120px 58px;
  position: relative;
}

.block-hero--white-wave.block-hero--has-image::before {
  background: rgba(255, 255, 255, 0.7);
}

.block-hero--white-wave .container {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0 auto;
}

.block-hero--white-wave .block-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
}

.block-hero--white-wave .block-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.block-hero--white-wave .block-hero__label {
  font-family: var(--font-sans);
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #bbbab6;
  text-align: center;
  margin: 0 0 0;
}

.block-hero--white-wave .block-hero__title {
  font-family: var(--font-sans);
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
  text-align: center;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.block-hero--white-wave .block-hero__title-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

.block-hero--white-wave .block-hero__subtitle {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000000;
  text-align: center;
  margin: 0;
  width: 100%;
  max-width: 428px;
}

.block-hero--white-wave .block-hero__text {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  text-align: center;
  margin: 0;
  max-width: 428px;
}

.block-hero--white-wave .block-hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 0;
}

.block-hero--white-wave .block-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  transition: opacity var(--transition-base);
  background: transparent;
  border: none;
}

.block-hero--white-wave .block-hero__cta:hover {
  opacity: 0.7;
}

.block-hero--white-wave .block-hero__cta-text {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.block-hero--white-wave .block-hero__cta-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transform: rotate(90deg);
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-hero--white-wave .block-hero__ripple {
  border: 1px solid rgba(26, 26, 26, 0.05);
}

/* Responsive */
@media (max-width: 900px) {
  .block-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .block-hero__media {
    order: -1;
  }

  .block-hero--dark-wave .block-hero__inner {
    min-height: auto;
    padding-top: 56px;
    padding-left: 30px;
    padding-right: 30px;
  }

  /* Remove the forced 890px height + black bottom padding so the pink label
     bar sits flush against the next block (no black strip below it). */
  .block-hero.block-hero--dark-wave {
    min-height: auto;
    padding-bottom: 0;
  }

  .block-hero--dark-wave .block-hero__left {
    margin-bottom: 60px;
    gap: 100px; /* space between the small label and the big title */
    height: auto; /* clear the 235px desktop fixed height on tablet too */
  }

  .block-hero--dark-wave .block-hero__label {
    font-size: 16px;
    line-height: 22px;
  }

  .block-hero--dark-wave .block-hero__center {
    margin-bottom: 20px;
  }

  .block-hero--dark-wave .block-hero__title {
    font-size: clamp(3rem, 12vw, 5rem);
    text-align: center;
  }

  .block-hero--dark-wave .block-hero__right {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    min-height: auto;
    height: auto;
    margin-top: 20px;
    padding-bottom: 32px;
  }

  .block-hero--dark-wave .block-hero__tagline {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: auto;
  }

  .block-hero--dark-wave .block-hero__cta {
    font-size: 18px;
    line-height: 24px;
    width: auto;
    height: auto;
  }

  .block-hero--beige-wave,
  .block-hero--white-wave {
    min-height: 600px;
    padding: 60px 24px;
  }

  .block-hero--beige-wave .block-hero__title {
    font-size: clamp(3rem, 15vw, 6rem);
  }

  .block-hero--white-wave .block-hero__label,
  .block-hero--white-wave .block-hero__title {
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .block-hero--white-wave .block-hero__title {
    gap: 16px;
  }

  .block-hero--white-wave .block-hero__title-icon {
    width: 40px;
    height: 40px;
  }

  .block-hero--white-wave .block-hero__subtitle {
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .block-hero--white-wave .block-hero__text {
    font-size: 16px;
  }

  .block-hero--white-wave .block-hero__cta-text {
    font-size: 18px;
  }
}

@media (max-width: 480px) {

  /* Prevent oversized single-word hero titles from being clipped on mobile */
  .block-hero__title {
    overflow-wrap: anywhere;
  }

  .block-hero.block-hero--dark-wave .block-hero__title {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .block-hero--white-wave .block-hero__label,
  .block-hero--white-wave .block-hero__title {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .block-hero--white-wave .block-hero__title {
    gap: 12px;
  }

  .block-hero--white-wave .block-hero__title-icon {
    width: 32px;
    height: 32px;
  }

  .block-hero--white-wave .block-hero__subtitle {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .block-hero--white-wave .block-hero__text {
    font-size: 15px;
  }

  .block-hero--white-wave .block-hero__cta-text {
    font-size: 16px;
  }
}

@media (max-width: 375px) {

  .block-hero.block-hero--dark-wave .block-hero__title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-hero--white-wave .block-hero__label,
  .block-hero--white-wave .block-hero__title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-hero--white-wave .block-hero__title-icon {
    width: 28px;
    height: 28px;
  }

  .block-hero--white-wave .block-hero__subtitle {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
}

@media (max-width: 900px) {
  .block-hero {
    margin-top: -60px;
    padding-top: calc(clamp(3rem, 8vw, 6rem) + 60px);
  }
}

@media (max-width: 640px) {
  .block-hero {
    padding: var(--space-4) 0;
    margin-top: -50px;
    padding-top: calc(var(--space-4) + 50px);
  }

  .block-hero__buttons {
    flex-direction: column;
    width: 100%;
  }

  .block-hero__buttons .btn {
    width: 100%;
  }

  .block-hero--dark-wave .block-hero__inner {
    min-height: auto;
    padding-top: 28px;
    padding-left: 20px;
    padding-right: 20px;
    position: static;
  }

  /* Remove the forced 890px height + black bottom padding so the pink label
     bar sits flush against the next block (no black strip below it). */
  .block-hero.block-hero--dark-wave {
    min-height: auto;
    padding-bottom: 0;
  }

  .block-hero--dark-wave .block-hero__left {
    margin-bottom: 40px;
    gap: 80px; /* space between the small label and the big title */
    height: auto; /* clear the 235px desktop fixed height */
  }

  .block-hero--dark-wave .block-hero__label {
    font-size: 14px;
    line-height: 20px;
    width: auto;
    height: auto;
  }

  .block-hero--dark-wave .block-hero__center {
    margin-bottom: 16px;
  }

  .block-hero--dark-wave .block-hero__title {
    font-size: clamp(2.5rem, 14vw, 3.5rem);
    text-align: center;
    height: auto;
    width: 100%;
  }

  .block-hero--dark-wave .block-hero__right {
    gap: 16px;
    margin-top: 16px;
    padding-bottom: 24px;
  }

  .block-hero--dark-wave .block-hero__tagline {
    font-size: clamp(1rem, 4vw, 1.25rem);
    height: auto;
    min-height: auto;
  }

  .block-hero--dark-wave .block-hero__cta {
    font-size: 16px;
    line-height: 22px;
    width: 100%;
    height: auto;
    justify-content: space-between;
  }

  .block-hero--dark-wave .block-hero__cta-icon {
    width: 44px;
    height: 44px;
    padding: 10px;
  }

  .block-hero--beige-wave,
  .block-hero--white-wave {
    min-height: 500px;
  }

  .block-hero--beige-wave .block-hero__title {
    font-size: clamp(2.5rem, 18vw, 4rem);
  }

  .block-hero--white-wave .block-hero__inner {
    gap: 30px;
  }

  .block-hero__ripple--1 {
    width: 300px;
    height: 120px;
  }

  .block-hero__ripple--2 {
    width: 450px;
    height: 180px;
  }

  .block-hero__ripple--3 {
    width: 600px;
    height: 240px;
  }

  .block-hero__ripple--4 {
    width: 750px;
    height: 300px;
  }
}

/* Hero Labels Section */
.block-hero__labels-wrapper {
  padding: 20px 0;
  width: 100%;
  background-color: transparent;
}

.block-hero__labels-wrapper .container {
  max-width: 1440px !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

.block-hero__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: center;
  justify-content: space-between;
  padding: 0 58px;
  max-width: 1440px;
  width: 100%;
}

.block-hero__label-item {
  font-family: 'Helvetica';
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  text-align: center;
  color: #000000;
  white-space: nowrap;
  text-decoration: none;
  flex: none;
  flex-grow: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.block-hero__label-item:hover {
  opacity: 0.8;
  transform: translateY(-1px);
}

a.block-hero__label-item {
  cursor: pointer;
}

.block-hero__label-separator {
  font-size: 20px;
  line-height: 1;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-hero__label-separator svg {
  width: 16px;
  height: 16px;
  display: block;
}

.block-hero__label-separator--mobile-only {
  display: none !important;
}

@media (max-width: 900px) {
  .block-hero__labels {
    padding: 0 30px;
    gap: 20px;
  }

  .block-hero__label-item {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .block-hero__labels {
    padding: 0 20px;
    gap: 15px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
  }

  .block-hero__label-item {
    font-size: 14px;
    text-align: left;
    width: 100%;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 0;
  }

  .block-hero__label-separator {
    font-size: 16px;
    justify-content: flex-end;
  }

  .block-hero__label-separator--mobile-only {
    display: flex !important;
  }
}

/* == 30-components/frontpage-hero-banner.css == */
/* ====================================
   Frontpage Hero Banner Block
   ==================================== */

.block-frontpage-hero-banner {
  position: relative;
  width: 100%;
  height: 900px;
  margin: 0;
  overflow: hidden;
}

/* Background */
.block-frontpage-hero-banner__background {
  position: absolute;
  background: #000000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

/* Union Shape - behind and around portfolio image */
.block-frontpage-hero-banner__union-shape {
  position: absolute;
  width: 860.29px;
  height: 860.29px;
  left: calc(50% - 1440px/2 + 794px);
  top: 247px;
  z-index: 1;
  pointer-events: none;
}

.block-frontpage-hero-banner__union-shape svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Container */
.block-frontpage-hero-banner__container {
  position: relative;
  width: 100%;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding: 0 58px;
  z-index: 2;
  box-sizing: border-box;
}

/* Main Title */
.block-frontpage-hero-banner__title {
  position: absolute;
  width: 1324px;
  height: 360px;
  left: 58px;
  top: 142px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 170px;
  line-height: 100%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  z-index: 3;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: none;
}

/* Title word animation */
.block-frontpage-hero-banner__title .word {
  display: inline-block;
  transition: color 0.6s ease, text-shadow 0.6s ease;
  will-change: color, text-shadow;
}

/* Bottom Section */
.block-frontpage-hero-banner__bottom {
  position: absolute;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 573px;
  width: 1324px;
  height: 266px;
  left: 58px;
  top: 544px;
  z-index: 3;
}

/* Left Section */
.block-frontpage-hero-banner__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  gap: 88px;
  width: 435px;
  height: 266px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.block-frontpage-hero-banner__description {
  width: 435px;
  height: 120px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  line-height: 110%;
  letter-spacing: -0.05em;
  color: #FFFFFF;
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* CTA Button */
.block-frontpage-hero-banner__cta {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0px;
  gap: 8px;
  width: auto; /* adapt to text length so the arrow never overlaps the text */
  height: auto;
  text-decoration: none;
  transition: opacity 0.3s ease;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-frontpage-hero-banner__cta:hover {
  opacity: 0.8;
}

.block-frontpage-hero-banner__cta-text {
  width: auto;
  height: auto;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #FFFFFF;
  white-space: nowrap;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-frontpage-hero-banner__cta-icon {
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  flex-shrink: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-frontpage-hero-banner__cta-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Portfolio Card */
.block-frontpage-hero-banner__portfolio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 316px;
  height: 266px;
  position: relative;
  z-index: 2;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-frontpage-hero-banner__portfolio-image {
  width: 316px;
  height: 200px;
  position: relative;
  overflow: hidden;
  z-index: 2;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-frontpage-hero-banner__portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  position: relative;
  z-index: 2;
}

/* Portfolio Button */
.block-frontpage-hero-banner__portfolio-button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  gap: 8px;
  width: 316px;
  height: 66px;
  background: #FFFFFF;
  text-decoration: none;
  transition: background 0.3s ease, transform 0.3s ease;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.block-frontpage-hero-banner__portfolio-button:hover {
  background: #F5F5F5;
  transform: translateY(-2px);
}

.block-frontpage-hero-banner__portfolio-text {
  width: 103px;
  height: 26px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #000000;
  white-space: nowrap;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-frontpage-hero-banner__portfolio-icon {
  width: 26px;
  height: 26px;
  background: #000000;
  flex-shrink: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-frontpage-hero-banner__portfolio-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 1440px) {
  .block-frontpage-hero-banner__union-shape {
    right: -80px;
    width: 550px;
    height: 550px;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 40px;
  }
  
  .block-frontpage-hero-banner__title {
    left: 40px;
    width: calc(100% - 80px);
    font-size: 140px;
    letter-spacing: -7px;
  }
  
  .block-frontpage-hero-banner__bottom {
    left: 40px;
    width: calc(100% - 80px);
  }
}

@media (max-width: 1200px) {
  .block-frontpage-hero-banner {
    height: auto;
    min-height: 800px;
  }
  
  .block-frontpage-hero-banner__union-shape {
    right: -60px;
    top: auto;
    bottom: 200px;
    transform: none;
    width: 450px;
    height: 450px;
  }
  
  .block-frontpage-hero-banner__title {
    font-size: 120px;
    letter-spacing: -6px;
    top: 100px;
  }
  
  .block-frontpage-hero-banner__bottom {
    top: 480px;
    flex-direction: column;
    gap: 40px;
  }
  
  .block-frontpage-hero-banner__left {
    width: 100%;
    max-width: 500px;
  }
  
  .block-frontpage-hero-banner__description {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
}

@media (max-width: 900px) {
  .block-frontpage-hero-banner {
    height: auto;
    min-height: 700px;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 30px;
  }
  
  .block-frontpage-hero-banner__union-shape {
    right: -40px;
    bottom: 180px;
    width: 350px;
    height: 350px;
  }
  
  .block-frontpage-hero-banner__title {
    left: 30px;
    top: 80px;
    width: calc(100% - 60px);
    height: auto;
    font-size: 64px;
    line-height: 1.1;
    letter-spacing: -0.04em;
  }
  
  .block-frontpage-hero-banner__bottom {
    left: 30px;
    top: auto;
    bottom: 60px;
    width: calc(100% - 60px);
    height: auto;
    flex-direction: column;
    gap: 30px;
  }
  
  .block-frontpage-hero-banner__left {
    width: 100%;
    height: auto;
    gap: 24px;
  }
  
  .block-frontpage-hero-banner__description {
    width: 100%;
    height: auto;
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }
  
  .block-frontpage-hero-banner__cta {
    width: auto;
    height: auto;
  }
  
  .block-frontpage-hero-banner__cta-text {
    width: auto;
    height: auto;
    font-size: 18px;
  }
  
  .block-frontpage-hero-banner__portfolio {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  .block-frontpage-hero-banner__portfolio-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  
  .block-frontpage-hero-banner__portfolio-button {
    width: 100%;
  }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
  .block-frontpage-hero-banner {
    height: auto;
    min-height: auto;
    padding: 120px 0 50px 0;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 24px;
  }
  
  .block-frontpage-hero-banner__union-shape {
    display: none;
  }
  
  .block-frontpage-hero-banner__title {
    position: static;
    width: 100%;
    height: auto;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 40px;
    margin-top: 0;
  }
  
  .block-frontpage-hero-banner__bottom {
    position: static;
    width: 100%;
    height: auto;
    flex-direction: column;
    gap: 32px;
  }
  
  .block-frontpage-hero-banner__left {
    width: 100%;
    height: auto;
    gap: 24px;
  }
  
  .block-frontpage-hero-banner__description {
    width: 100%;
    height: auto;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.02em;
  }
  
  .block-frontpage-hero-banner__cta {
    width: auto;
    height: auto;
  }
  
  .block-frontpage-hero-banner__cta-text {
    width: auto;
    height: auto;
    font-size: 18px;
    line-height: 1.4;
  }
  
  /* Portfolio section on mobile - show image, hide button */
  .block-frontpage-hero-banner__portfolio {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  
  .block-frontpage-hero-banner__portfolio-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }
  
  .block-frontpage-hero-banner__portfolio-button {
    display: none !important;
  }
}

/* Tablets — iPad 11"/13" portrait & landscape (821–1200px).
   The desktop hero is a fixed-height, absolutely-positioned layout; at these
   tablet widths the portfolio "tehtud töö" image was pushed below the fold /
   clipped. Use the same in-flow vertical stack as phones so the hero grows to
   fit and the portfolio image is always fully visible. Placed after the ≤900 /
   ≤1200 blocks so it overrides their absolute positioning. */
@media (min-width: 821px) and (max-width: 1200px) {
  .block-frontpage-hero-banner {
    height: auto;
    min-height: auto;
    padding: 150px 0 64px 0;
  }

  .block-frontpage-hero-banner__container {
    padding: 0 40px;
  }

  .block-frontpage-hero-banner__union-shape {
    display: none;
  }

  .block-frontpage-hero-banner__title {
    position: static;
    width: 100%;
    height: auto;
    font-size: 88px;
    line-height: 1.05;
    letter-spacing: -0.04em;
    margin: 0 0 48px 0;
  }

  .block-frontpage-hero-banner__bottom {
    position: static;
    top: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .block-frontpage-hero-banner__left {
    width: 100%;
    max-width: 560px;
    height: auto;
    gap: 24px;
  }

  .block-frontpage-hero-banner__description {
    width: 100%;
    height: auto;
    font-size: 28px;
    line-height: 1.3;
    letter-spacing: -0.02em;
  }

  .block-frontpage-hero-banner__cta {
    width: auto;
    height: auto;
  }

  .block-frontpage-hero-banner__portfolio {
    width: 100%;
    max-width: 520px;
    height: auto;
  }

  .block-frontpage-hero-banner__portfolio-image {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
  }

  .block-frontpage-hero-banner__portfolio-button {
    width: auto;
  }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
  .block-frontpage-hero-banner {
    padding: 100px 0 40px 0;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 20px;
  }
  
  .block-frontpage-hero-banner__title {
    font-size: 40px;
    margin-bottom: 30px;
    margin-top: 0;
  }
  
  .block-frontpage-hero-banner__bottom {
    gap: 28px;
  }
  
  .block-frontpage-hero-banner__left {
    gap: 20px;
  }
  
  .block-frontpage-hero-banner__description {
    font-size: 18px;
  }
  
  .block-frontpage-hero-banner__cta-text {
    font-size: 16px;
  }
  
  .block-frontpage-hero-banner__cta-icon {
    width: 20px;
    height: 20px;
  }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
  .block-frontpage-hero-banner {
    padding: 100px 0 40px 0;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 18px;
  }
  
  .block-frontpage-hero-banner__title {
    font-size: 36px;
    margin-bottom: 28px;
    margin-top: 0;
  }
  
  .block-frontpage-hero-banner__bottom {
    gap: 26px;
  }
  
  .block-frontpage-hero-banner__description {
    font-size: 17px;
  }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
  .block-frontpage-hero-banner {
    padding: 100px 0 40px 0;
  }
  
  .block-frontpage-hero-banner__container {
    padding: 0 16px;
  }
  
  .block-frontpage-hero-banner__title {
    font-size: 32px;
    margin-bottom: 24px;
    margin-top: 0;
  }
  
  .block-frontpage-hero-banner__bottom {
    gap: 24px;
  }
  
  .block-frontpage-hero-banner__left {
    gap: 18px;
  }
  
  .block-frontpage-hero-banner__description {
    font-size: 16px;
  }
  
  .block-frontpage-hero-banner__cta-text {
    font-size: 15px;
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .block-frontpage-hero-banner {
    padding: 100px 0 40px 0;
  }
  
  .block-frontpage-hero-banner__title {
    font-size: 28px;
    margin-bottom: 20px;
    margin-top: 0;
  }
  
  .block-frontpage-hero-banner__description {
    font-size: 15px;
  }
  
  .block-frontpage-hero-banner__cta-text {
    font-size: 14px;
  }
}


/* Per-block toggle (ACF "Peida portfoolio mobiilis"): hide just the portfolio
   card — image + 'Tehtud tööd' CTA — on mobile, independent of hiding the whole
   banner. */
@media (max-width: 900px) {
  .block-frontpage-hero-banner--hide-portfolio-mobile .block-frontpage-hero-banner__portfolio {
    display: none !important;
  }
}


/* == 30-components/card.css == */
/* Card Component */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.card__icon {
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card__icon svg {
  width: 100%;
  height: 100%;
  fill: var(--color-primary);
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.card__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text-light);
  margin: 0 0 var(--space-2);
  flex-grow: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
  margin-top: auto;
}

.card__link:hover {
  color: var(--color-secondary);
}

/* Card variations */
.card--featured {
  border: 2px solid var(--color-primary);
  position: relative;
}

.card--featured::before {
  content: 'Featured';
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--color-accent);
  color: #fff;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 600;
}

.card--horizontal {
  flex-direction: row;
  gap: var(--space-3);
  align-items: center;
}

.card--horizontal .card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}



/* == 30-components/services.css == */
/* Services Block */
.block-services {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: var(--color-bg);
}

.block-services__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-5);
}

.block-services__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.block-services__text {
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text-light);
  margin: 0;
}

/* Alternating layout option */
.block-services--alternate .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block-services--alternate .card__icon {
  margin: 0 auto var(--space-2);
}



/* == 30-components/pricing.css == */
/* Pricing Block */
.block-pricing {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: var(--color-bg-light);
}

.block-pricing__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-5);
}

.block-pricing__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.block-pricing__text {
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text-light);
  margin: 0;
}

.block-pricing__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: stretch;
}

/* Pricing Card */
.pricing-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 2px solid transparent;
}

.pricing-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

.pricing-card--featured {
  border-color: var(--color-primary);
  transform: scale(1.05);
}

.pricing-card--featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: #fff;
  padding: 0.5rem 1.5rem;
  border-radius: var(--radius-full);
  font-size: var(--fs-small);
  font-weight: 700;
  white-space: nowrap;
}

.pricing-card__name {
  font-size: var(--fs-h4);
  font-weight: 700;
  margin: 0 0 var(--space-1);
  color: var(--color-text);
}

.pricing-card__description {
  font-size: var(--fs-body);
  color: var(--color-text-light);
  margin: 0 0 var(--space-3);
}

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}

.pricing-card__amount {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}

.pricing-card__currency {
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--color-text-light);
}

.pricing-card__period {
  font-size: var(--fs-body);
  color: var(--color-text-light);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  flex-grow: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--fs-body);
  color: var(--color-text);
}

.pricing-card__feature:last-child {
  margin-bottom: 0;
}

.pricing-card__feature::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--color-success);
  color: #fff;
  border-radius: 50%;
  font-weight: 700;
  flex-shrink: 0;
  font-size: var(--fs-small);
}

.pricing-card__feature--disabled {
  color: var(--color-text-light);
  opacity: 0.5;
}

.pricing-card__feature--disabled::before {
  content: '✕';
  background: var(--color-border);
  color: var(--color-text-light);
}

.pricing-card__button {
  width: 100%;
  margin-top: auto;
}

/* Responsive */
@media (min-width: 768px) {
  .block-pricing__grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

@media (max-width: 767px) {
  .pricing-card--featured {
    transform: scale(1);
  }

  .pricing-card--featured::before {
    top: var(--space-2);
  }
}



/* == 30-components/roll-process.css == */
/* Roll Process Component */
/* Process/timeline section with hover effects that transform text to uppercase */

/* CRITICAL: Block level styles */
.block-roll-process,
section.block-roll-process,
.entry-content > .block-roll-process {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 876px;
  background-color: #ffffff !important;
}

.roll-process__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 58px 120px 58px !important;
  width: 100%;
  min-height: 876px;
  max-width: 1440px;
  margin: 0 auto !important;
}

/* Main Title */
.roll-process__main-title {
  font-family: 'Inter', 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
  max-width: 1192px;
  white-space: pre-wrap;
  margin: 0 !important;
  padding: 0 !important;
}

/* Content Area - 70px spacing from title */
.roll-process__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 20px;
  isolation: isolate;
  width: 1324px;
  max-width: 100%;
  position: relative;
  margin-top: 70px !important;
  margin-bottom: 0 !important;
}

/* Remove default margins so flex gap controls spacing exactly */
.block-roll-process .roll-process__content > .roll-process__divider,
.block-roll-process .roll-process__content > .roll-process__text {
  margin: 0 !important;
  padding: 0 !important;
}

/* Divider Lines */
.roll-process__divider {
  width: 1324px;
  max-width: 100%;
  height: 0;
  border-top: 1px solid #BBBAB6;
  position: relative;
}

/* Text Styles */
.roll-process__text {
  width: 1324px;
  max-width: 100%;
  line-height: 40%;
  text-align: center;
  white-space: pre-wrap;
  cursor: default;
  position: relative;
  transition: color 0.2s ease, text-transform 0.2s ease;
  align-self: stretch;
}

.roll-process__text--gray {
  font-family: Helvetica, Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.05em;
  color: #BBBAB6;
  min-height: 40px;
}

.roll-process__text--black {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 42px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  min-height: 46px;
}

/* Hover Effects */
.roll-process__text:hover {
  color: #000000;
}

.roll-process__text--gray:hover {
  text-transform: uppercase;
}

.roll-process__text--black:hover {}

/* Cursor Icon */
.roll-process__cursor-icon {
  position: absolute;
  left: 1127px;
  top: 100px;
  width: 23px;
  height: 35px;
  pointer-events: none;
}

/* Responsive Design */
@media (max-width: 1400px) {
  .roll-process__main-title {
    font-size: 62px;
    letter-spacing: -3.1px;
  }
  
  .roll-process__text--black {
    font-size: 32px;
    letter-spacing: -1.6px;
    min-height: 35px;
  }
  
  .roll-process__text--black:hover {
    letter-spacing: -1.6px;
  }
  
  .roll-process__text--gray {
    font-size: 28px;
    letter-spacing: -1.4px;
    min-height: 31px;
  }
  
  .roll-process__text--gray:hover {
    letter-spacing: -1.4px;
  }
  
  .roll-process__cursor-icon {
    right: 100px;
  }
}

@media (max-width: 768px) {
  /* The desktop layout reserves a fixed 876px tall stage for the roll effect.
     On mobile the content is much shorter, leaving ~280px of empty white space
     below it — let the block size to its content instead. */
  .block-roll-process,
  section.block-roll-process,
  .entry-content > .block-roll-process {
    min-height: 0;
  }

  .roll-process__container {
    padding: 60px 24px !important;
    min-height: 0;
  }

  .roll-process__content {
    margin-top: 40px !important;
    gap: 18px;
  }

  .roll-process__main-title {
    font-size: 42px;
    letter-spacing: -2.1px;
  }

  /* The desktop design uses an ultra-tight line-height (40%) for single-line
     rows; on mobile the text wraps to several lines and that tight leading
     makes the wrapped lines overlap. Restore a normal line-height.
     Also collapse the source whitespace (the ACF content has leading/trailing
     spaces for the desktop roll effect) so the wrapped lines centre cleanly. */
  .roll-process__text {
    line-height: 1.2;
    white-space: normal;
  }

  .roll-process__text--black {
    font-size: 24px;
    letter-spacing: -1.2px;
    min-height: 0;
    line-height: 1.2;
  }

  .roll-process__text--black:hover {
    letter-spacing: -1.2px;
  }

  .roll-process__text--gray {
    font-size: 20px;
    letter-spacing: -1px;
    min-height: 0;
    line-height: 1.2;
  }
  
  .roll-process__text--gray:hover {
    letter-spacing: -1px;
  }
  
  .roll-process__cursor-icon {
    left: auto;
    right: 24px;
    top: 60px;
    width: 18px;
    height: 28px;
  }
}


/* == 30-components/cta.css == */
/* CTA Block */
.block-cta {
    padding: clamp(3rem, 8vw, 6rem) 0;
    background: var(--color-primary);
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
  }

  /* Remove WordPress default block-gap below the CTA wrapper so the next
     block sits flush against it (no white strip). */
  .wp-block-acf-cta {
    margin-bottom: 0 !important;
  }
  
  .block-cta__inner {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
  }
  
  .block-cta__subheadline {
    font-size: clamp(1rem, 2vw, 1.25rem);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }
  
  .block-cta__title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: var(--lh-tight);
    margin: 0 0 40px;
    color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
  }
  
  .block-cta__title-break {
    display: block;
    width: 100%;
    height: 0;
    line-height: 0;
  }
  
  .block-cta__text {
    font-size: 1.125rem;
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-4);
    color: rgba(255, 255, 255, 0.9);
  }
  
  .block-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
  }
  
  .block-cta__buttons:empty {
    display: none;
  }
  
  .block-cta__buttons .btn:empty {
    display: none;
  }
  
  /* CTA variants */
  .block-cta--accent {
    background: var(--color-accent);
  }
  
  .block-cta--gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  }
  
  .block-cta--dark {
    background: #000000;
    padding: clamp(5rem, 12vw, 10rem) 0;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  
  .block-cta--dark .block-cta__inner {
    max-width: 800px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
  }
  
  .block-cta--dark .block-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 3rem;
    color: #FFFFFF;
    width: 40px;
    height: 40px;
  }
  
  .block-cta--dark .block-cta__title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.1;
    letter-spacing: -0.05em;
    text-align: center;
    color: #FFFFFF;
    margin: 0 0 40px;
    text-transform: none;
  }
  
  .block-cta--dark .block-cta__title--parts {
    text-align: center;
    line-height: 1.1;
  }
  
  .block-cta--dark .block-cta__title-part {
    display: inline;
    white-space: nowrap;
  }
  
  .block-cta--dark .block-cta__title-part--white {
    color: #FFFFFF;
  }
  
  .block-cta--dark .block-cta__title-part--gray {
    color: rgba(255, 255, 255, 0.5);
  }
  
  .block-cta--dark .block-cta__title-break {
    display: block;
    width: 100%;
    height: 0;
    line-height: 0;
  }
  
  .block-cta--dark .block-cta__text {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 110%;
    letter-spacing: -0.05em;
    text-align: center;
    color: #757472;
    margin: 0;
    max-width: 618px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .block-cta--dark .block-cta__buttons {
    display: none;
  }
  
  /* Corner decorations for dark variant */
  .block-cta__corners {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
  }
  
  .block-cta__corner {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
  
  .block-cta__corner--tl {
    top: 10%;
    left: 10%;
    border-right: none;
    border-bottom: none;
  }
  
  .block-cta__corner--tr {
    top: 10%;
    right: 10%;
    border-left: none;
    border-bottom: none;
  }
  
  .block-cta__corner--bl {
    bottom: 10%;
    left: 10%;
    border-right: none;
    border-top: none;
  }
  
  .block-cta__corner--br {
    bottom: 10%;
    right: 10%;
    border-left: none;
    border-top: none;
  }
  
  /* Dark Pattern Variant (Star grid background) */
  .block-cta--dark-pattern {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    padding: 0;
  }
  
  .block-cta--dark-pattern > .container {
    background: #000000;
    width: 100%;
    max-width: 100%;
    padding: 120px 58px;
    position: relative;
    overflow: hidden;
    margin: 0;
  }
  
  .block-cta--dark-pattern .block-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 100%;
    padding: 0;
    position: relative;
    z-index: 2;
  }
  
  .block-cta--dark-pattern .block-cta__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    color: #FFFFFF;
    width: 62px;
    height: 62px;
    flex-shrink: 0;
  }
  
  .block-cta--dark-pattern .block-cta__title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 36px;
    font-weight: 400;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.05em;
    text-align: center;
    text-transform: none;
    color: #757472;
    margin: 0;
    width: 618px;
    max-width: 100%;
    transform: translateY(-6px);
  }
  
  .block-cta--dark-pattern .block-cta__title--parts {
    text-align: center;
    line-height: 1.1;
  }
  
  .block-cta--dark-pattern .block-cta__title-part {
    display: inline;
    white-space: nowrap;
  }
  
  .block-cta--dark-pattern .block-cta__title-part--white {
    color: #FFFFFF;
  }
  
  .block-cta--dark-pattern .block-cta__title-part--gray {
    color: #757472;
  }
  
  .block-cta--dark-pattern .block-cta__title-break {
    display: block;
    width: 100%;
    height: 0;
    line-height: 0;
  }
  
  .block-cta--dark-pattern .block-cta__text {
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 140% !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    width: 428px !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .block-cta--dark-pattern .block-cta__buttons {
    display: flex;
    justify-content: center;
  }
  
  /* White button for dark-pattern */
  .btn--cta-white {
    background: #FFFFFF !important;
    color: #000000 !important;
    border: none !important;
    padding: 12px 12px 12px 26px !important;
    font-family: 'Switzer', sans-serif !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: -0.6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 15px !important;
    transition: transform 0.2s ease !important;
    cursor: pointer !important;
  }
  
  .btn--cta-white:hover {
    transform: scale(1.02) !important;
  }
  
  .btn--cta-white svg {
    width: 32px;
    height: 32px;
    color: #000000;
  }
  
  /* Pattern decorations (Star grid) */
  .block-cta__pattern {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 747.706px;
    height: 747.706px;
    pointer-events: none;
    z-index: 1;
  }
  
  .block-cta__pattern-svg {
    width: 100%;
    height: 100%;
    opacity: 1;
  }
  
  /* Marquee Bar */
  .block-cta__marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  
  .block-cta__marquee-track {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 20px 58px;
    animation: marquee 20s linear infinite;
    white-space: nowrap;
  }
  
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
  .block-cta__marquee-item {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-shrink: 0;
  }
  
  .block-cta__marquee-text {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #FFFFFF;
    white-space: nowrap;
  }
  
  .block-cta__marquee-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
  
  .block-cta--light {
    background: var(--color-bg-light);
    color: var(--color-text);
  }
  
  .block-cta--light .block-cta__title {
    color: var(--color-text);
  }
  
  .block-cta--light .block-cta__text {
    color: var(--color-text-light);
  }
  
  /* Centered Dark (Marketing Sharks Style) */
  .block-cta--centered-dark {
    background: #1a1a1a;
    padding: clamp(5rem, 12vw, 10rem) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .block-cta--centered-dark .block-cta__inner {
    max-width: 1000px;
    padding: 0 20px;
  }
  
  .block-cta--centered-dark .block-cta__subheadline {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 2rem;
    letter-spacing: 0.15em;
  }
  
  .block-cta--centered-dark .block-cta__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 40px;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }
  
  .block-cta--centered-dark .block-cta__text {
    display: none;
  }
  
  .block-cta--centered-dark .block-cta__buttons .btn {
    background: #ffffff;
    color: #1a1a1a;
    border: none;
    padding: 0.75rem 1.5rem 0.75rem 2rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 1.5rem;
    transition: all var(--transition-base);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }
  
  .block-cta--centered-dark .block-cta__buttons .btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.25);
  }
  
  .block-cta--centered-dark .block-cta__buttons .btn::after {
    content: '→';
    font-size: 1.5rem;
    color: #1a1a1a;
    transition: all var(--transition-base);
    flex-shrink: 0;
  }
  
  .block-cta--centered-dark .block-cta__buttons .btn:hover::after {
    transform: scale(1.08);
  }
  
  .block-cta--centered-dark .block-cta__buttons .btn + .btn {
    display: none;
  }
  
  /* Circle decorations for centered-dark */
  .block-cta__circles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  
  .block-cta__circle {
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .block-cta__circle--1 {
    width: 400px;
    height: 400px;
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
  
  .block-cta__circle--2 {
    width: 600px;
    height: 600px;
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
  
  .block-cta__circle--3 {
    width: 850px;
    height: 850px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  
  /* Background pattern (optional decoration) */
  .block-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  
  /* Responsive */
  @media (max-width: 900px) {
    .block-cta--dark {
      padding: clamp(4rem, 10vw, 6rem) 0;
      min-height: 60vh;
    }

    .block-cta--dark .block-cta__icon {
      margin-bottom: 2rem;
    }

    .block-cta--dark .block-cta__title {
      font-size: 28px;
      margin-bottom: 40px;
    }

    .block-cta--dark .block-cta__text {
      font-size: 28px;
    }

    .block-cta__corner {
      width: 120px;
      height: 120px;
    }

    .block-cta--dark-pattern > .container {
      padding: 80px 24px;
    }

    .block-cta--dark-pattern .block-cta__inner {
      gap: 30px;
    }

    .block-cta--dark-pattern .block-cta__title {
      font-size: 28px;
      letter-spacing: -0.05em;
    }

    .block-cta--dark-pattern .block-cta__text {
      font-size: 16px;
      width: 100%;
    }

    .block-cta__pattern {
      display: none !important;
    }
    
    .block-cta--centered-dark {
      padding: clamp(4rem, 10vw, 6rem) 0;
      min-height: 50vh;
    }
    
    .block-cta--centered-dark .block-cta__title {
      font-size: clamp(2rem, 8vw, 3rem);
    }
    
    .block-cta__circle--1 {
      width: 250px;
      height: 250px;
    }
    
    .block-cta__circle--2 {
      width: 400px;
      height: 400px;
    }
    
    .block-cta__circle--3 {
      width: 580px;
      height: 580px;
    }
  }
  
  @media (max-width: 640px) {
    .block-cta__inner {
      padding: 0 24px;
    }
    
    .block-cta__title {
      font-size: clamp(1.5rem, 6vw, 2rem);
      line-height: 1.2;
    }
    
    .block-cta__buttons {
      flex-direction: column;
      width: 100%;
    }
  
    .block-cta__buttons .btn {
      width: 100%;
    }
    
    .block-cta--centered-dark {
      padding: 4rem 0;
    }
    
    .block-cta--centered-dark .block-cta__inner {
      padding: 0 24px;
    }
    
    .block-cta--centered-dark .block-cta__subheadline {
      font-size: 0.875rem;
      margin-bottom: 1rem;
    }
    
    .block-cta--centered-dark .block-cta__title {
      font-size: clamp(1.5rem, 6vw, 2rem);
      margin-bottom: 40px;
      line-height: 1.2;
    }
    
    .block-cta--dark {
      padding: 4rem 0;
      min-height: 50vh;
    }
    
    .block-cta--dark .block-cta__inner {
      padding: 0 24px;
    }
    
    .block-cta--dark .block-cta__icon {
      width: 30px;
      height: 30px;
      margin-bottom: 1.5rem;
    }
    
    .block-cta--dark .block-cta__icon svg {
      width: 30px;
      height: 30px;
    }
    
    .block-cta--dark .block-cta__title {
      font-size: 24px;
      margin-bottom: 40px;
    }
    
    .block-cta--dark .block-cta__text {
      font-size: 24px;
    }
    
    .block-cta__corner {
      width: 80px;
      height: 80px;
    }
    
    .block-cta--dark-pattern > .container {
      padding: 60px 20px;
    }
    
    .block-cta--dark-pattern .block-cta__inner {
      gap: 24px;
    }
    
    .block-cta--dark-pattern .block-cta__icon {
      width: 48px;
      height: 48px;
    }
    
    .block-cta--dark-pattern .block-cta__icon svg {
      width: 48px;
      height: 48px;
    }
    
    .block-cta--dark-pattern .block-cta__title {
      font-size: 24px;
      letter-spacing: -0.05em;
    }
    
    .block-cta--dark-pattern .block-cta__text {
      font-size: 14px;
    }

    .block-cta__pattern {
      display: none !important;
    }

    .btn--cta-white {
      padding: 12px 20px !important;
      font-size: 14px !important;
      gap: 8px !important;
    }
    
    .btn--cta-white svg {
      width: 16px;
      height: 16px;
    }
    
    .block-cta--centered-dark .block-cta__buttons .btn {
      padding: 0;
      font-size: 0.875rem;
      width: 100%;
      justify-content: center;
      gap: 1rem;
    }
    
    .block-cta--centered-dark .block-cta__buttons .btn::after {
      font-size: 1.25rem;
    }
  }
  
  @media (max-width: 480px) {
    .block-cta__inner {
      padding: 0 20px;
    }
    
    .block-cta--dark .block-cta__inner,
    .block-cta--dark-pattern .block-cta__inner,
    .block-cta--centered-dark .block-cta__inner {
      padding: 0 20px;
    }
    
    .block-cta__title {
      font-size: clamp(1.25rem, 5vw, 1.75rem);
      line-height: 1.3;
    }
    
    .block-cta--dark .block-cta__title,
    .block-cta--dark-pattern .block-cta__title {
      font-size: 18px;
      line-height: 1.3;
      letter-spacing: -0.05em;
    }

    .block-cta__pattern {
      display: none !important;
    }

    .block-cta--centered-dark .block-cta__title {
      font-size: clamp(1.25rem, 5vw, 1.75rem);
      line-height: 1.3;
    }
  }
  
  @media (max-width: 375px) {
    .block-cta__title {
      font-size: clamp(1.125rem, 5vw, 1.5rem);
      line-height: 1.3;
    }
    
    .block-cta--dark .block-cta__title,
    .block-cta--dark-pattern .block-cta__title {
      font-size: 16px;
      line-height: 1.3;
      letter-spacing: -0.05em;
    }
    
  }
  
  /* Marquee responsive */
  @media (max-width: 768px) {
    .block-cta__marquee-track {
      padding: 20px 24px;
      gap: 30px;
    }
    
    .block-cta__marquee-item {
      gap: 30px;
    }
    
    .block-cta__marquee-text {
      font-size: 16px;
    }
  }
  

/* == 30-components/contact-form.css == */
/* Contact Form Block */
.block-contact {
  padding: clamp(3rem, 8vw, 6rem) 0;
  background: var(--color-bg);
}

.block-contact__inner {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .block-contact__inner--two-column {
    grid-template-columns: 0.9fr 1.1fr;
    align-items: start;
  }
}

.block-contact__content {
  max-width: 100%;
}

.block-contact__title {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: 0 0 var(--space-2);
  color: var(--color-text);
}

.block-contact__text {
  font-size: 1.125rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text-light);
  margin: 0 0 var(--space-3);
}

.block-contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.contact-info-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.contact-info-item__content {
  flex: 1;
}

.contact-info-item__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-text-light);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.contact-info-item__value {
  font-size: var(--fs-body);
  color: var(--color-text);
  margin: 0;
}

.contact-info-item__value a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.contact-info-item__value a:hover {
  color: var(--color-primary);
}

.block-contact__form {
  background: var(--color-bg-light);
  padding: var(--space-4);
  border-radius: var(--radius-xl);
}

/* Contact Form 7 Styling */
.wpcf7 {
  max-width: 100%;
}

.wpcf7 .wpcf7-form p {
  margin: 0 0 var(--space-3);
}

.wpcf7 .wpcf7-form label {
  display: block;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.wpcf7 .wpcf7-form input[type="text"],
.wpcf7 .wpcf7-form input[type="email"],
.wpcf7 .wpcf7-form input[type="url"],
.wpcf7 .wpcf7-form input[type="tel"],
.wpcf7 .wpcf7-form input[type="number"],
.wpcf7 .wpcf7-form input[type="date"],
.wpcf7 .wpcf7-form textarea,
.wpcf7 .wpcf7-form select {
  width: 100%;
  padding: 0.875rem 1rem;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast);
}

.wpcf7 .wpcf7-form input[type="text"]:focus,
.wpcf7 .wpcf7-form input[type="email"]:focus,
.wpcf7 .wpcf7-form input[type="url"]:focus,
.wpcf7 .wpcf7-form input[type="tel"]:focus,
.wpcf7 .wpcf7-form input[type="number"]:focus,
.wpcf7 .wpcf7-form input[type="date"]:focus,
.wpcf7 .wpcf7-form textarea:focus,
.wpcf7 .wpcf7-form select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.wpcf7 .wpcf7-form textarea {
  min-height: 150px;
  resize: vertical;
}

.wpcf7 .wpcf7-form input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.875rem 1.75rem;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-base);
  width: auto;
  min-width: 180px;
  max-width: 280px;
}

.wpcf7 .wpcf7-form input[type="submit"]:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.wpcf7 .wpcf7-form input[type="submit"]:active {
  transform: translateY(0);
}

/* Validation messages */
.wpcf7 .wpcf7-not-valid-tip {
  color: #F237A6;
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 0.375rem;
  display: block;
  font-family: var(--font-sans);
}

.wpcf7 .wpcf7-response-output {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--fs-body);
  font-weight: 500;
  font-family: var(--font-sans);
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors {
  background: var(--color-error-light);
  border: 1px solid var(--color-error-border);
  color: #F237A6;
}

.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
  background: var(--color-success-light);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}

/* Invalid input styling */
.wpcf7 .wpcf7-form input.wpcf7-not-valid,
.wpcf7 .wpcf7-form textarea.wpcf7-not-valid,
.wpcf7 .wpcf7-form select.wpcf7-not-valid {
  border-color: #F237A6 !important;
}

/* Spinner */
.wpcf7 .wpcf7-spinner {
  margin-left: var(--space-1);
}

/* ===== ACCESSIBILITY: TAP TARGET & FORM IMPROVEMENTS (WCAG 2.1 AA) ===== */

/* Ensure all form inputs have minimum 44x44px tap target */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 select,
.wpcf7 textarea,
.block-contact__form input[type="text"],
.block-contact__form input[type="email"],
.block-contact__form input[type="tel"],
.block-contact__form textarea {
  min-height: 44px;
  padding: 12px 16px;
}

.wpcf7 textarea,
.block-contact__form textarea {
  min-height: 120px;
  padding: 12px 16px;
}

/* Form submit buttons */
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.block-contact__form input[type="submit"],
.block-contact__form button[type="submit"] {
  min-height: 48px;
  padding: 14px 32px;
}

@media (max-width: 768px) {
  .wpcf7 input[type="text"],
  .wpcf7 input[type="email"],
  .wpcf7 input[type="tel"],
  .wpcf7 input[type="url"],
  .wpcf7 input[type="number"],
  .wpcf7 select,
  .block-contact__form input[type="text"],
  .block-contact__form input[type="email"],
  .block-contact__form input[type="tel"] {
    min-height: 48px;
    padding: 14px 18px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  .wpcf7 input[type="submit"],
  .wpcf7 button[type="submit"],
  .block-contact__form input[type="submit"],
  .block-contact__form button[type="submit"] {
    min-height: 52px;
    padding: 16px 36px;
  }
}



/* == 30-components/case-study.css == */
/* Case Study Components */

/* Case Studies Grid Block */
.case-studies-grid {
  padding: var(--space-6, 4rem) 0;
}

.case-studies-grid__header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-5, 3rem);
}

.case-studies-grid__title {
  font-size: var(--fs-h1, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-2, 1rem);
  color: var(--color-text, #000);
}

.case-studies-grid__subtitle {
  font-size: var(--fs-lg, 1.125rem);
  color: var(--color-text-light, #666);
  line-height: var(--lh-relaxed, 1.7);
}

.case-studies-grid__grid {
  display: grid;
  gap: var(--space-4, 2rem);
  margin-bottom: var(--space-5, 3rem);
}

.case-studies-grid__grid--2-col {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 500px), 1fr));
}

.case-studies-grid__grid--3-col {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}

.case-studies-grid__grid--4-col {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.case-studies-grid__cta {
  text-align: center;
}

/* Case Study Card */
.case-study-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  transition: all var(--transition-normal, 0.3s ease);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-study-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.case-study-card__image {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg-light, #f5f5f5);
  display: block;
}

.case-study-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal, 0.3s ease);
}

.case-study-card:hover .case-study-card__image img {
  transform: scale(1.05);
}

.case-study-card__image--placeholder {
  background: linear-gradient(135deg, var(--color-primary, #007bff) 0%, var(--color-secondary, #6c63ff) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-study-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition-normal, 0.3s ease);
}

.case-study-card:hover .case-study-card__overlay {
  opacity: 1;
}

.case-study-card__view {
  color: white;
  font-weight: 600;
  font-size: 1.125rem;
}

.case-study-card__content {
  padding: var(--space-3, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 1rem);
  flex: 1;
}

.case-study-card__meta {
  display: flex;
  gap: var(--space-2, 1rem);
  align-items: center;
  font-size: 0.875rem;
  color: var(--color-text-light, #666);
}

.case-study-card__client {
  font-weight: 600;
  color: var(--color-primary, #007bff);
}

.case-study-card__year {
  opacity: 0.8;
}

.case-study-card__title {
  font-size: var(--fs-h3, 1.5rem);
  font-weight: 600;
  margin: 0;
  line-height: var(--lh-tight, 1.25);
}

.case-study-card__title a {
  color: var(--color-text, #000);
  text-decoration: none;
  transition: color var(--transition-fast, 0.2s ease);
}

.case-study-card__title a:hover {
  color: var(--color-primary, #007bff);
}

.case-study-card__excerpt {
  color: var(--color-text-light, #666);
  line-height: var(--lh-normal, 1.6);
  margin: 0;
  flex: 1;
}

.case-study-card__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.case-study-card__category {
  font-size: 0.875rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-bg-light, #f5f5f5);
  color: var(--color-text, #000);
  text-decoration: none;
  border-radius: var(--radius-sm, 4px);
  transition: all var(--transition-fast, 0.2s ease);
}

.case-study-card__category:hover {
  background: var(--color-primary, #007bff);
  color: white;
}

.case-study-card__link {
  color: var(--color-primary, #007bff);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--transition-fast, 0.2s ease);
}

.case-study-card__link:hover {
  gap: 0.75rem;
}

/* Case Study Detail */
.case-study-detail__hero {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary, #007bff) 0%, var(--color-secondary, #6c63ff) 100%);
  margin-bottom: var(--space-5, 3rem);
}

.case-study-detail__hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-detail__hero-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  font-weight: 600;
}

.case-study-detail__overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4, 2rem);
  margin-bottom: var(--space-6, 4rem);
  padding-bottom: var(--space-6, 4rem);
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

@media (min-width: 768px) {
  .case-study-detail__overview {
    grid-template-columns: 1.5fr 1fr;
  }
}

.case-study-detail__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin-bottom: var(--space-2, 1rem);
  line-height: var(--lh-tight, 1.25);
}

.case-study-detail__lead {
  font-size: var(--fs-lg, 1.125rem);
  color: var(--color-text-light, #666);
  line-height: var(--lh-relaxed, 1.7);
}

.case-study-detail__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 1.5rem);
  background: var(--color-bg-light, #f5f5f5);
  padding: var(--space-4, 2rem);
  border-radius: var(--radius-lg, 12px);
  align-self: start;
}

.case-study-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.case-study-detail__meta-label {
  font-size: 0.875rem;
  color: var(--color-text-light, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

.case-study-detail__meta-value {
  font-size: 1.125rem;
  color: var(--color-text, #000);
  font-weight: 600;
}

.case-study-detail__section {
  margin-bottom: var(--space-6, 4rem);
  max-width: 800px;
}

.case-study-detail__section-title {
  font-size: var(--fs-h2, 2rem);
  font-weight: 700;
  margin-bottom: var(--space-3, 1.5rem);
  color: var(--color-text, #000);
}

.case-study-detail__section-content {
  font-size: var(--fs-base, 1rem);
  line-height: var(--lh-relaxed, 1.7);
  color: var(--color-text-light, #666);
}

.case-study-detail__section-content p {
  margin-bottom: var(--space-2, 1rem);
}

.case-study-detail__features {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-2, 1rem);
}

.case-study-detail__feature {
  display: flex;
  align-items: start;
  gap: 0.75rem;
  padding: var(--space-2, 1rem);
  background: var(--color-bg-light, #f5f5f5);
  border-radius: var(--radius-m, 8px);
  font-size: 1rem;
  color: var(--color-text, #000);
}

.case-study-detail__metrics {
  margin: var(--space-6, 4rem) 0;
  padding: var(--space-5, 3rem);
  background: linear-gradient(135deg, var(--color-primary, #007bff) 0%, var(--color-secondary, #6c63ff) 100%);
  border-radius: var(--radius-lg, 12px);
  color: white;
}

.case-study-detail__metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4, 2rem);
}

.case-study-detail__metric {
  text-align: center;
}

.case-study-detail__metric-value {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: var(--space-1, 0.5rem);
}

.case-study-detail__metric-label {
  font-size: 1rem;
  opacity: 0.9;
}

.case-study-detail__technologies {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 1rem);
}

.case-study-detail__tech-badge {
  padding: 0.5rem 1rem;
  background: var(--color-bg-light, #f5f5f5);
  color: var(--color-text, #000);
  border-radius: var(--radius-sm, 4px);
  font-weight: 600;
  font-size: 0.875rem;
}

.case-study-detail__testimonial {
  margin: var(--space-6, 4rem) 0;
  padding: var(--space-5, 3rem);
  background: var(--color-bg-light, #f5f5f5);
  border-radius: var(--radius-lg, 12px);
  border-left: 4px solid var(--color-primary, #007bff);
}

.case-study-detail__quote {
  margin: 0;
}

.case-study-detail__quote p {
  font-size: var(--fs-lg, 1.125rem);
  line-height: var(--lh-relaxed, 1.7);
  font-style: italic;
  margin-bottom: var(--space-3, 1.5rem);
  color: var(--color-text, #000);
}

.case-study-detail__quote-author {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 1rem;
}

.case-study-detail__quote-author strong {
  color: var(--color-text, #000);
}

.case-study-detail__quote-author span {
  color: var(--color-text-light, #666);
  font-size: 0.875rem;
}

.case-study-detail__gallery {
  margin: var(--space-6, 4rem) 0;
}

.case-study-detail__gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3, 1.5rem);
}

.case-study-detail__gallery-item {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-m, 8px);
  transition: transform var(--transition-normal, 0.3s ease);
}

.case-study-detail__gallery-item:hover {
  transform: scale(1.02);
}

.case-study-detail__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-study-detail__navigation {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 1.5rem);
  margin-top: var(--space-6, 4rem);
  padding-top: var(--space-6, 4rem);
  border-top: 1px solid var(--color-border, #e0e0e0);
}

.case-study-detail__nav-link {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--space-3, 1.5rem);
  background: var(--color-bg-light, #f5f5f5);
  border-radius: var(--radius-m, 8px);
  text-decoration: none;
  transition: all var(--transition-fast, 0.2s ease);
}

.case-study-detail__nav-link:hover {
  background: var(--color-primary, #007bff);
}

.case-study-detail__nav-link--next {
  text-align: right;
}

.case-study-detail__nav-label {
  font-size: 0.875rem;
  color: var(--color-text-light, #666);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.case-study-detail__nav-link:hover .case-study-detail__nav-label {
  color: rgba(255, 255, 255, 0.8);
}

.case-study-detail__nav-title {
  font-size: 1.125rem;
  color: var(--color-text, #000);
  font-weight: 600;
}

.case-study-detail__nav-link:hover .case-study-detail__nav-title {
  color: white;
}

/* Archive Page Styles */
.archive-header {
  text-align: center;
  margin-bottom: var(--space-5, 3rem);
  max-width: 800px;
  margin-inline: auto;
}

.archive-title {
  font-size: var(--fs-h1, 2.5rem);
  font-weight: 700;
  margin-bottom: var(--space-2, 1rem);
}

.archive-description {
  font-size: var(--fs-lg, 1.125rem);
  color: var(--color-text-light, #666);
  line-height: var(--lh-relaxed, 1.7);
}

.no-results {
  text-align: center;
  padding: var(--space-6, 4rem) 0;
}

.no-results h2 {
  font-size: var(--fs-h2, 2rem);
  margin-bottom: var(--space-2, 1rem);
}

/* Responsive */
@media (max-width: 768px) {
  .case-studies-grid__grid--2-col,
  .case-studies-grid__grid--3-col,
  .case-studies-grid__grid--4-col {
    grid-template-columns: 1fr;
  }
  
  .case-study-detail__hero {
    aspect-ratio: 16 / 9;
  }
  
  .case-study-detail__metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  
  .case-study-detail__navigation {
    grid-template-columns: 1fr;
  }
  
  .case-study-detail__nav-link--next {
    text-align: left;
  }
}



/* == 30-components/case-story.css == */
/* Case Story Block */

.block-case-story {
    background: #F7F7F5;
    color: #000;
    display: flex;
    justify-content: center;
    margin: 0 !important;
    padding: 0 !important;
}

.block-case-story__container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 120px 58px;
    gap: 70px;
    width: 1440px;
    max-width: 100%;
    background: #F7F7F5;
}

/* Style variant: white background + gray cards (inverted from default) */
.block-case-story--white-bg {
    background: #ffffff;
}

.block-case-story--white-bg .block-case-story__container {
    background: #ffffff;
}

.block-case-story--white-bg .block-case-story__card {
    background: #F7F7F5;
}

/* Header Section */
.block-case-story__header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 30px;
    width: 1324px;
    max-width: 100%;
    height: 90px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.block-case-story__title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 500;
    font-size: 82px;
    letter-spacing: -4.1px;
    line-height: 1.1;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.block-case-story__icon-circle {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

/* Content Section */
.block-case-story__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}

/* Subtitle */
.block-case-story__subtitle {
    width: 652px;
    max-width: 100%;
    height: 80px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 36px;
    line-height: 110%;
    letter-spacing: -0.05em;
    color: #000000;
    margin: 0;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Cards Grid */
.block-case-story__cards-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

.block-case-story__card {
    background: white;
    padding: 32px;
    width: 428px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.block-case-story__card--full {
    flex: 1;
    width: auto;
    min-width: 428px;
}

.block-case-story__card-number {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

.block-case-story__card-title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 32px;
    letter-spacing: -1.6px;
    line-height: 1.1;
    text-transform: uppercase;
    margin: 0 0 10px 0;
    font-weight: 500;
}

.block-case-story__card-content {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
}

/* Stats Table */
.block-case-story__stats-container {
    background: black;
    color: white;
    padding: 32px;
    margin-top: 32px;
}

.block-case-story__stats-table {
    width: 100%;
}

.block-case-story__stats-header {
    display: flex;
    border-bottom: 1px solid #bbbab6;
}

.block-case-story__stats-row {
    display: flex;
    border-bottom: 1px solid #bbbab6;
}

.block-case-story__stats-row:last-child {
    border-bottom: none;
}

.block-case-story__stats-cell {
    flex: 1;
    padding: 20px 10px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.block-case-story__stats-header .block-case-story__stats-cell {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 26px;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    font-weight: 500;
    padding-bottom: 20px;
    padding-top: 0;
}

.block-case-story__legend-box {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: white;
}

.block-case-story__stats-label {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

/* Card Images (inside card 7) */
.block-case-story__card-images {
    display: flex;
    gap: 20px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.block-case-story__card-image {
    flex: 1;
    min-width: 200px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.block-case-story__card-image img {
    width: 100%;
    height: auto;
    display: block;
}

.block-case-story__card-image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.block-case-story__card-image:hover .block-case-story__card-image-overlay {
    opacity: 1;
}

/* Images Section (bottom) */
.block-case-story__images-section {
    display: flex;
    gap: 20px;
    height: 404px;
    position: relative;
    width: 100%;
}

.block-case-story__image-container {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: block;
    cursor: pointer;
    text-decoration: none;
}

.block-case-story__image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.block-case-story__image-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-case-story__cta-circle {
    width: 206px;
    height: 206px;
    border: 2px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.block-case-story__cta-circle:hover {
    transform: scale(1.05);
}

.block-case-story__cta-text {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 32px;
    letter-spacing: -1.6px;
    line-height: 1.1;
    text-transform: uppercase;
    color: white;
    text-align: center;
    font-weight: 500;
    max-width: 155px;
    margin: 0;
}

.block-case-story__arrow-icon {
    position: absolute;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 35px;
    color: white;
}

/* Responsive */
@media (max-width: 1440px) {
    .block-case-story__container {
        width: 100%;
    }

    .block-case-story__cards-grid {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .block-case-story__container {
        padding: 60px 24px;
        gap: 40px;
    }

    .block-case-story__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .block-case-story__icon-circle {
        display: none;
    }

    .block-case-story__title {
        font-size: 48px;
        letter-spacing: -2.4px;
        white-space: normal;
    }

    .block-case-story__content {
        gap: 30px;
    }

    .block-case-story__subtitle {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .block-case-story__card {
        width: 100%;
    }

    .block-case-story__card--full {
        min-width: 100%;
    }

    .block-case-story__images-section {
        flex-direction: column;
        height: auto;
    }

    .block-case-story__image-container {
        height: 300px;
    }

    /* Keep the 3 metric columns side-by-side on mobile so each header stays
       directly above its own values. Previously the header and rows switched to
       flex-direction: column, which collapsed the whole table into one
       incoherent vertical list (USERS / BOUNCE RATE / REVENUE / labels / values
       all stacked) with no relationship between a heading and its numbers. */
    .block-case-story__stats-cell {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 8px;
        padding: 14px 8px;
        font-size: 14px;
        min-width: 0;
    }

    .block-case-story__stats-header .block-case-story__stats-cell {
        font-size: 15px;
        letter-spacing: -0.5px;
        padding-top: 0;
        padding-bottom: 14px;
    }

    .block-case-story__stats-label {
        font-size: 14px;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    .block-case-story__cta-circle {
        width: 150px;
        height: 150px;
    }

    .block-case-story__cta-text {
        font-size: 24px;
        max-width: 120px;
    }

    .block-case-story__arrow-icon {
        right: -60px;
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .block-case-story__container {
        padding: 40px 20px;
        gap: 30px;
    }

    .block-case-story__content {
        gap: 24px;
    }

    .block-case-story__title {
        font-size: 36px;
        letter-spacing: -1.8px;
    }

    .block-case-story__subtitle {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .block-case-story__card {
        padding: 24px;
        gap: 24px;
    }

    .block-case-story__card-title {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .block-case-story__stats-container {
        padding: 20px;
    }
}

/* == 30-components/accordion.css == */
/* Accordion Component */
.block-accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px 58px 120px;
  gap: 70px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  isolation: isolate;
}

.accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 30px;
  width: 100%;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Accordion Item */
.accordion__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  border-bottom: 1px solid #BBBAB6;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Accordion Header (Button) */
.accordion__header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  gap: 20px;
  width: 100%;
  height: 95px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  flex: none;
  align-self: stretch;
}

.accordion__header--transparent:hover {
  opacity: 0.8;
}

/* Title Wrapper */
.accordion__title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 50px;
  flex: 1;
}

/* Number */
.accordion__number {
  width: 60px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #BBBAB6;
  flex: none;
  flex-grow: 0;
  transition: color 0.3s ease;
}

/* Number color when open */
.accordion__item.is-open .accordion__number {
  color: #000000;
}

/* Title */
.accordion__title {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  flex: none;
  flex-grow: 0;
}

/* Icon */
.accordion__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 9.52px;
  width: 32px;
  height: 32px;
  flex: none;
  flex-grow: 0;
}

.accordion__icon svg {
  width: 22.63px;
  height: 22.63px;
  color: #000000;
  transition: transform 0.3s ease;
}

/* Rotate icon when open */
.accordion__item.is-open .accordion__icon svg {
  transform: rotate(45deg);
}

/* Content */
.accordion__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 20px 30px;
  gap: 20px;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  flex: none;
  align-self: stretch;
}

.accordion__content-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px 110px;
  gap: 40px;
  width: 100%;
  align-self: stretch;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: #000000;
  flex: none;
  flex-grow: 0;
}

.accordion__content-inner p {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.accordion__content-inner p:last-child {
  margin-bottom: 0;
}

/* Color Variants - Applied on Hover Only */

/* Black Background on Hover */
.accordion__header--black:hover {
  background-color: #000000;
}

.accordion__header--black:hover .accordion__number {
  color: #BBBAB6;
}

.accordion__header--black:hover .accordion__title {
  color: #FFFFFF;
}

.accordion__header--black:hover .accordion__icon svg {
  color: #FFFFFF;
}

/* Yellow/Neon Background on Hover */
.accordion__header--yellow:hover {
  background-color: #E1FF04;
}

.accordion__header--yellow:hover .accordion__number {
  color: #000000;
}

.accordion__header--yellow:hover .accordion__title {
  color: #000000;
}

.accordion__header--yellow:hover .accordion__icon svg {
  color: #000000;
}

/* Yellow when item is open (not hover) */
.accordion__item.is-open .accordion__header--yellow {
  background-color: #E1FF04;
}

.accordion__item.is-open .accordion__header--yellow .accordion__number {
  color: #000000;
}

.accordion__item.is-open .accordion__header--yellow .accordion__title {
  color: #000000;
}

.accordion__item.is-open .accordion__header--yellow .accordion__icon svg {
  color: #000000;
}

/* Pink/Neon Background on Hover */
.accordion__header--pink:hover {
  background-color: #f237a6;
}

.accordion__header--pink:hover .accordion__number {
  color: #FFFFFF;
}

.accordion__header--pink:hover .accordion__title {
  color: #FFFFFF;
}

.accordion__header--pink:hover .accordion__icon svg {
  color: #FFFFFF;
}

/* Pink when item is open (not hover) */
.accordion__item.is-open .accordion__header--pink {
  background-color: #f237a6;
}

.accordion__item.is-open .accordion__header--pink .accordion__number {
  color: #FFFFFF;
}

.accordion__item.is-open .accordion__header--pink .accordion__title {
  color: #FFFFFF;
}

.accordion__item.is-open .accordion__header--pink .accordion__icon svg {
  color: #FFFFFF;
}

/* Hide number when show_numbers is false */
.accordion__title-wrapper:not(:has(.accordion__number)) {
  gap: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-accordion {
    padding: 0px 40px 80px;
  }
  
  .accordion__content-inner {
    padding: 0px 60px;
  }
}

@media (max-width: 900px) {
  .block-accordion {
    padding: 0px 30px 60px;
  }
  
  .accordion {
    gap: 20px;
  }
  
  .accordion__header {
    padding: 20px 15px;
    height: auto;
    min-height: 70px;
  }
  
  .accordion__content {
    padding: 15px 15px 20px;
  }
  
  .accordion__content-inner {
    padding: 0px 40px;
  }
  
  .accordion__title-wrapper {
    gap: 20px;
  }
  
  .accordion__number {
    width: 45px;
    font-size: 20px;
  }
  
  .accordion__title {
    font-size: 20px;
  }
  
  .accordion__icon {
    width: 28px;
    height: 28px;
  }
  
  .accordion__icon svg {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 600px) {
  .block-accordion {
    padding: 0px 20px 40px;
  }
  
  .accordion {
    gap: 15px;
  }
  
  .accordion__header {
    padding: 15px 10px;
    gap: 10px;
    height: auto;
    min-height: 60px;
  }
  
  .accordion__content {
    padding: 10px 10px 15px;
  }
  
  .accordion__content-inner {
    padding: 0px 20px;
    font-size: 15px;
  }
  
  .accordion__title-wrapper {
    gap: 12px;
  }
  
  .accordion__number {
    width: 35px;
    font-size: 16px;
  }
  
  .accordion__title {
    font-size: 16px;
    line-height: 1.2;
  }
  
  .accordion__icon {
    width: 24px;
    height: 24px;
  }
  
  .accordion__icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .block-accordion {
    padding: 0px 16px 30px;
  }
  
  .accordion__header {
    padding: 12px 8px;
    gap: 8px;
  }
  
  .accordion__title-wrapper {
    gap: 10px;
  }
  
  .accordion__number {
    width: 30px;
    font-size: 14px;
  }
  
  .accordion__title {
    font-size: 14px;
    line-height: 1.3;
  }
  
  .accordion__content-inner {
    padding: 0px 15px;
    font-size: 14px;
  }
  
  .accordion__icon {
    width: 20px;
    height: 20px;
  }
  
  .accordion__icon svg {
    width: 16px;
    height: 16px;
  }
}



/* == 30-components/closed-accordion.css == */
/* Closed Accordion Component */
/* A non-clickable list that looks like an accordion without expandable content */

.block-closed-accordion {
  margin: 0 !important;
  padding: 120px 0;
  width: 100%;
  background-color: #f7f7f5;
}

/* When following Who We Are block, collapse top padding to keep Figma 62px gap */
.block-who-we-are + .block-closed-accordion {
  padding-top: 0;
}

.block-closed-accordion .container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 58px;
  width: 100%;
}

.closed-accordion-main-content {
  display: flex;
  justify-content: space-between;
  max-width: 1324px;
  width: 100%;
  gap: 86px;
}

/* Left Section */
.closed-accordion-left-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 586px;
  flex-shrink: 0;
}

/* Title Block */
.closed-accordion__title-block {
  flex: 0 0 auto;
}

.closed-accordion__heading {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -4.1px;
  margin: 0;
}

.closed-accordion__heading-part {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: -4.1px;
}

.closed-accordion__heading-part--dark {
  color: #000000;
}

.closed-accordion__heading-part--light {
  color: #BBBAB6;
}

/* Icons */
.closed-accordion__icons {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: auto;
  padding-top: 60px;
}

.closed-accordion__icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.closed-accordion__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Services List (Right Section) */
.closed-accordion-services-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 652px;
  flex-shrink: 0;
}

.closed-accordion__service-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.closed-accordion__service-item--centered {
  align-items: center;
}

.closed-accordion__service-number {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: bold;
  font-size: 22px;
  line-height: 1.4;
  color: #BBBAB6;
  width: 60px;
  flex-shrink: 0;
  margin: 0;
}

.closed-accordion__service-text {
  flex: 1;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 36px;
  line-height: 1.1;
  color: #000000;
  letter-spacing: -1.8px;
  margin: 0;
}

a.closed-accordion__service-link {
  text-decoration: none;
  color: #000000;
  transition: color 0.2s ease;
}

a.closed-accordion__service-link:hover {
  color: var(--link-hover-color, #BBBAB6);
}

/* Responsive */
@media (max-width: 1400px) {
  .closed-accordion-main-content {
    flex-direction: column;
    gap: 60px;
  }
  
  .closed-accordion-left-section,
  .closed-accordion-services-list {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .block-closed-accordion {
    padding: 60px 0;
  }
  
  .block-closed-accordion .container {
    padding: 0 24px;
  }
  
  .closed-accordion__heading,
  .closed-accordion__heading-part {
    font-size: 44px;
    letter-spacing: -2.2px;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
  }

  .closed-accordion__service-text {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .closed-accordion__service-number {
    font-size: 18px;
    width: 50px;
  }

  .closed-accordion__icons {
    gap: 20px;
  }

  .closed-accordion__icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 420px) {
  .closed-accordion__heading,
  .closed-accordion__heading-part {
    font-size: 36px;
    letter-spacing: -1.6px;
  }
}


/* == 30-components/comparison-table.css == */
/* Comparison Table Component */
.block-comparison-table {
  padding: var(--space-5) 0;
}

/* Dark Background (default) */
.block-comparison-table--dark {
  background: #000000;
}

.block-comparison-table--dark .comparison-table__row {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.block-comparison-table--dark .comparison-table__row--header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.block-comparison-table--dark .comparison-table__cell--header,
.block-comparison-table--dark .comparison-table__cell--label,
.block-comparison-table--dark .comparison-table__cell--data {
  color: #FFFFFF;
}

/* Light Background */
.block-comparison-table--light {
  background: #FFFFFF;
}

.block-comparison-table--light .comparison-table__row {
  border-bottom: 1px solid rgba(23, 23, 23, 0.15);
}

.block-comparison-table--light .comparison-table__row--header {
  border-bottom: 1px solid rgba(23, 23, 23, 0.25);
}

.block-comparison-table--light .comparison-table__cell--header,
.block-comparison-table--light .comparison-table__cell--label,
.block-comparison-table--light .comparison-table__cell--data {
  color: #171717;
}

.block-comparison-table--light .comparison-table__cell--check-text,
.block-comparison-table--light .comparison-table__cell--cross-text {
  color: #171717;
}

/* Dark background text colors (default) */
.block-comparison-table--dark .comparison-table__cell--check-text,
.block-comparison-table--dark .comparison-table__cell--cross-text {
  color: #FFFFFF;
}

.comparison-table {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 60px;
  max-width: 1324px;
  margin: 0 auto;
}

/* Header Wrapper */
.comparison-table__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Title - Base */
.comparison-table__title {
  width: 100%;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 110%;
  text-align: center;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin: 0;
  flex: none;
  align-self: stretch;
}

/* Title Line 1 - Dark theme (white text) */
.block-comparison-table--dark .comparison-table__title--line1 {
  color: #FFFFFF;
}

/* Title Line 1 - Light theme (black text) */
.block-comparison-table--light .comparison-table__title--line1 {
  color: #171717;
}

/* Title Line 2 - Dark theme (white text) */
.block-comparison-table--dark .comparison-table__title--line2 {
  color: #FFFFFF;
}

/* Title Line 2 - Light theme (black text) */
.block-comparison-table--light .comparison-table__title--line2 {
  color: #171717;
}

/* Table Wrapper */
.comparison-table__wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 0;
  width: 100%;
  flex: none;
  order: 1;
  align-self: stretch;
}

/* Row */
.comparison-table__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  padding: 0px;
  gap: 0;
  width: 100%;
  flex: none;
  align-self: stretch;
  transition: background-color 0.2s ease;
}

.comparison-table__row:last-child {
  border-bottom: none;
}

/* Row Hover - Dark theme */
.block-comparison-table--dark .comparison-table__row:not(.comparison-table__row--header):hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* Row Hover - Light theme */
.block-comparison-table--light .comparison-table__row:not(.comparison-table__row--header):hover {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Cell - Base */
.comparison-table__cell {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px 10px;
  gap: 10px;
  /* Flex instead of a fixed 275px so the data/header columns always fill the row
     evenly, whatever the column count (e.g. after removing the 4th column). The
     empty/label cells override this with flex: 0 0 180px below. */
  flex: 1 1 0;
  min-width: 0;
  min-height: 65px;
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  background: transparent;
}

/* Empty Cell (top-left corner) */
.comparison-table__cell--empty {
  flex: 0 0 180px;
  background: transparent;
  padding: 30px 20px;
}

/* Header Cells */
.comparison-table__cell--header {
  background: transparent;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
  padding: 30px 20px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

/* Header Line 1 - Gray */
.comparison-table__header-line1 {
  color: #BBBAB6;
  display: block;
}

/* Header Line 2 - Dark theme (white text) */
.block-comparison-table--dark .comparison-table__header-line2 {
  color: #FFFFFF;
  display: block;
}

/* Header Line 2 - Light theme (black text) */
.block-comparison-table--light .comparison-table__header-line2 {
  color: #171717;
  display: block;
}

/* Label Cells (left column) */
.comparison-table__cell--label {
  flex: 0 0 180px;
  background: transparent;
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 22px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  padding: 30px 20px;
  align-self: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* Data Cells */
.comparison-table__cell--data {
  background: transparent;
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  line-height: 140%;
  letter-spacing: 0;
  padding: 20px 10px;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  vertical-align: middle;
}

/* Multi-line cell */
.comparison-table__cell--multi {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  justify-content: flex-start !important;
}

/* Ensure multi-line cells inherit text color */
.block-comparison-table--dark .comparison-table__cell--multi {
  color: #FFFFFF;
}

.block-comparison-table--light .comparison-table__cell--multi {
  color: #171717;
}

.comparison-table__cell--multi .comparison-table__cell-item {
  margin-bottom: 0;
}

/* Individual cell item */
.comparison-table__cell-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

/* Checkmark item (only symbol) */
.comparison-table__cell-item--check {
  justify-content: flex-start;
}

.comparison-table__cell-item--check::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #E1FF04;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Cross item (only symbol) */
.comparison-table__cell-item--cross {
  justify-content: flex-start;
}

.comparison-table__cell-item--cross::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #FF0080;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Checkmark item with text */
.comparison-table__cell-item--check-text {
  font-weight: 400;
  font-size: 16px;
  justify-content: flex-start;
  text-align: left;
}

.block-comparison-table--dark .comparison-table__cell-item--check-text {
  color: #FFFFFF;
}

.block-comparison-table--light .comparison-table__cell-item--check-text {
  color: #171717;
}

.comparison-table__cell-item--check-text::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #E1FF04 !important;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Cross item with text */
.comparison-table__cell-item--cross-text {
  font-weight: 400;
  font-size: 16px;
  justify-content: flex-start;
  text-align: left;
}

.block-comparison-table--dark .comparison-table__cell-item--cross-text {
  color: #FFFFFF;
}

.block-comparison-table--light .comparison-table__cell-item--cross-text {
  color: #171717;
}

.comparison-table__cell-item--cross-text::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #FF0080 !important;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Checkmark Styling (only symbol) */
.comparison-table__cell--check {
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 0;
}

.comparison-table__cell--check::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #E1FF04;
  border-radius: 2px;
}

/* Cross Styling (only symbol) */
.comparison-table__cell--cross {
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: 0;
}

.comparison-table__cell--cross::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #FF0080;
  border-radius: 2px;
}

/* Checkmark with text */
.comparison-table__cell--check-text {
  font-weight: 400;
  font-size: 16px;
  justify-content: flex-start;
  text-align: left;
  color: #FFFFFF;
  gap: 10px;
}

.comparison-table__cell--check-text::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #E1FF04;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Cross with text */
.comparison-table__cell--cross-text {
  font-weight: 400;
  font-size: 16px;
  justify-content: flex-start;
  text-align: left;
  color: #FFFFFF;
  gap: 10px;
}

.comparison-table__cell--cross-text::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background: #FF0080;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1400px) {
  .comparison-table {
    max-width: 100%;
  }
  
  .comparison-table__title {
    font-size: clamp(42px, 6vw, 82px);
  }
}

@media (max-width: 900px) {
  .comparison-table {
    gap: 40px;
  }
  
  .comparison-table__title {
    font-size: clamp(32px, 8vw, 52px);
  }
  
  .comparison-table__wrapper {
    overflow-x: auto;
  }
  
  .comparison-table__row {
    min-width: 800px;
  }
  
  .comparison-table__cell--empty,
  .comparison-table__cell--label {
    flex: 0 0 180px;
  }
  
  .comparison-table__cell--header {
    font-size: 16px;
    line-height: 22px;
    padding: 25px 15px;
  }
  
  .comparison-table__cell--label {
    font-size: 22px;
    line-height: 110%;
    padding: 25px 15px;
  }
  
  .comparison-table__cell--data {
    font-size: 15px;
    line-height: 22px;
    padding: 25px 15px;
  }
}

@media (max-width: 600px) {
  .comparison-table {
    gap: 30px;
  }
  
  .comparison-table__cell--empty,
  .comparison-table__cell--label {
    flex: 0 0 140px;
    padding: 20px 12px;
  }
  
  .comparison-table__cell--header {
    font-size: 14px;
    line-height: 20px;
  }
  
  .comparison-table__cell--label {
    font-size: 18px;
    line-height: 110%;
  }
  
  .comparison-table__cell--data {
    font-size: 14px;
    line-height: 20px;
    padding: 20px 12px;
  }
  
  .comparison-table__cell--check::before,
  .comparison-table__cell--cross::before {
    width: 13px;
    height: 13px;
  }
}



/* == 30-components/faq.css == */
/* FAQ Block */
.block-faq {
  background: #ffffff;
  position: relative;
  padding: clamp(60px, 10vw, 120px) clamp(24px, 4vw, 58px);
  /* Background spans full width ("infinite"); the inner .block-faq__inner
     (max-width:1440) keeps the content contained. */
}

.block-faq__inner {
  max-width: calc(1440px - 116px); /* 1324 content — same as header/megamenu/1vs2 (1440 minus 58px gutters); bg stays full width */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 70px;
  align-items: flex-end;
}

/* With Toggle variant - beige background */
.block-faq--with-toggle {
  background: #f5f5f3;
}

/* Header with title and toggle */
.block-faq__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 20px;
}

/* Simple header (default) - just title and subtitle.
   align-items: flex-start so the subtitle icon/text top edge aligns with
   the title's top edge (not vertically centred). */
.block-faq__header--simple {
  align-items: flex-start;
}

.block-faq__header--simple .block-faq__subtitle {
  flex-shrink: 0;
}

.block-faq__title {
  font-family: 'Switzer', sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 6vw, 82px);
  line-height: 1.1;
  letter-spacing: clamp(-2.4px, -0.3vw, -4.1px);
  text-transform: uppercase;
  max-width: 1240px;
  margin: 0;
  color: #000;
  white-space: pre-wrap;
}

.block-faq__toggle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* With-toggle variant - no subtitle above toggle */
.block-faq--with-toggle .block-faq__toggle-wrapper {
  flex-direction: row;
  gap: 0;
}

.block-faq__subtitle {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  color: #000;
}

.block-faq__subtitle--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #000;
  flex-shrink: 0;
}

.block-faq__subtitle--icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .block-faq__subtitle--icon {
    width: 42px;
    height: 42px;
  }
}

.block-faq__toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.block-faq__toggle-option {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 1px solid #000;
  background: transparent;
  transition: all 0.3s ease;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: #000;
}

.block-faq__toggle-option.is-active {
  background: #000;
  color: #fff;
}

.block-faq__toggle-option[data-mode="icons"] svg {
  width: 24px;
  height: 24px;
}

.block-faq__toggle-option.is-active[data-mode="icons"] svg path {
  fill: #fff;
}

/* Description */
.block-faq__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: clamp(-1.2px, -0.125vw, -1.8px);
  max-width: 652px;
  margin: 0;
  color: #000;
  white-space: pre-wrap;
}

/* Accordion - same as sharks accordion */
.block-faq .accordion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0;
  width: 100%;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
}

/* Accordion Item */
.block-faq .accordion__item {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  width: 100%;
  border-bottom: 1px solid #BBBAB6;
  flex: none;
  align-self: stretch;
  flex-grow: 0;
  transition: none;
}

.block-faq .accordion__item:not(.is-open):hover {
  background-color: var(--faq-accent, #E1FF04);
}

.block-faq .accordion__item:not(.is-open):hover .accordion__header--transparent {
  opacity: 1;
}

.block-faq .accordion__item:not(.is-open):hover .accordion__number,
.block-faq .accordion__item:not(.is-open):hover .accordion__title,
.block-faq .accordion__item:not(.is-open):hover .accordion__icon svg {
  /* Default to solid black instead of `inherit`. Pages set --faq-accent-text
     explicitly (#000000), but the SEO page does not, so it fell back to
     `inherit` — which resolves to the ancestor's colour and, combined with the
     `transition: color` on a transient touch-hover, rendered the wrong tone on
     mobile. An explicit colour matches every other page on every device. */
  color: var(--faq-accent-text, #000000);
}

/* Accordion Header (Button) */
.block-faq .accordion__header {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 30px 20px;
  gap: 20px;
  width: 100%;
  height: 95px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s ease;
  flex: none;
  align-self: stretch;
}

.block-faq .accordion__header--transparent:hover {
  opacity: 0.8;
}

/* Title Wrapper */
.block-faq .accordion__title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 50px;
  flex: 1;
  min-width: 0;
}

/* Number */
.block-faq .accordion__number {
  width: 60px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #BBBAB6;
  flex: none;
  flex-grow: 0;
  transition: color 0.3s ease;
}

/* Number color when open */
.block-faq .accordion__item.is-open .accordion__number {
  color: #000000;
}

/* Title */
.block-faq .accordion__title {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Icon */
.block-faq .accordion__icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0px;
  gap: 9.52px;
  width: 32px;
  height: 32px;
  flex: none;
  flex-grow: 0;
}

.block-faq .accordion__icon svg {
  width: 22.63px;
  height: 22.63px;
  color: #000000;
  transition: transform 0.3s ease;
}

/* Rotate icon when open */
.block-faq .accordion__item.is-open .accordion__icon svg {
  transform: rotate(45deg);
}

/* Content */
.block-faq .accordion__content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 20px 20px 30px;
  gap: 20px;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;
  flex: none;
  align-self: stretch;
}

.block-faq .accordion__content-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px 110px;
  gap: 10px;
  width: 100%;
  align-self: stretch;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: #000000;
  flex: none;
  flex-grow: 0;
}

.block-faq .accordion__content-inner p {
  margin: 0 0 1rem 0;
}

.block-faq .accordion__content-inner p:last-child {
  margin-bottom: 0;
}

.block-faq__empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--space-4);
}

/* Responsive */
@media (max-width: 768px) {
  .block-faq {
    padding: 60px 24px;
  }
  
  .block-faq__inner {
    gap: 40px;
  }
  
  .block-faq__header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
  
  .block-faq__title {
    /* Scale down on phones so long question-style titles (e.g. a 16-letter word
       like "TURUNDUSSÕBRALIK") fit instead of overflowing the screen at a fixed
       48px. break-word is a safety net for any still-too-long word. */
    font-size: clamp(28px, 8vw, 48px);
    letter-spacing: -1.5px;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .block-faq__description {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-faq__toggle-wrapper {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .block-faq .accordion {
    gap: 20px;
  }
  
  .block-faq .accordion__header {
    padding: 20px 12px;
    height: auto;
    min-height: 70px;
    gap: 12px;
    align-items: flex-start;
  }

  .block-faq .accordion__content {
    padding: 15px 12px 20px;
  }

  .block-faq .accordion__content-inner {
    padding: 0;
  }

  .block-faq .accordion__title-wrapper {
    gap: 16px;
    align-items: flex-start;
  }

  .block-faq .accordion__number {
    width: auto;
    min-width: 28px;
    font-size: 18px;
    line-height: 1.3;
  }

  .block-faq .accordion__title {
    font-size: 18px;
    line-height: 1.25;
    letter-spacing: -0.02em;
  }

  .block-faq .accordion__icon {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .block-faq .accordion__icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 600px) {
  .block-faq {
    padding: 40px 20px;
  }
  
  .block-faq .accordion {
    gap: 15px;
  }
  
  .block-faq .accordion__header {
    padding: 16px 10px;
    gap: 10px;
    height: auto;
    min-height: 60px;
    align-items: flex-start;
  }

  .block-faq .accordion__content {
    padding: 10px 10px 16px;
  }

  .block-faq .accordion__content-inner {
    padding: 0;
    font-size: 15px;
  }

  .block-faq .accordion__title-wrapper {
    gap: 12px;
    align-items: flex-start;
  }

  .block-faq .accordion__number {
    width: auto;
    min-width: 24px;
    font-size: 15px;
    line-height: 1.3;
  }

  .block-faq .accordion__title {
    font-size: 16px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  .block-faq .accordion__icon {
    width: 22px;
    height: 22px;
    margin-top: 2px;
    flex-shrink: 0;
  }

  .block-faq .accordion__icon svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .block-faq {
    padding: 30px 14px;
  }

  .block-faq .accordion__header {
    padding: 14px 6px;
    gap: 8px;
    align-items: flex-start;
  }

  .block-faq .accordion__title-wrapper {
    gap: 10px;
    align-items: flex-start;
  }

  .block-faq .accordion__number {
    min-width: 20px;
    font-size: 14px;
  }

  .block-faq .accordion__title {
    font-size: 15px;
    line-height: 1.3;
  }

  .block-faq .accordion__content-inner {
    padding: 0;
    font-size: 14px;
  }

  .block-faq .accordion__icon {
    width: 20px;
    height: 20px;
  }

  .block-faq .accordion__icon svg {
    width: 14px;
    height: 14px;
  }
}

/* Dark Variant */
.block-faq--dark {
  background: var(--color-bg-dark);
}

.block-faq--dark .block-faq__title {
  color: #fff;
}

.block-faq--dark .block-faq__item {
  background: rgba(255, 255, 255, 0.05);
}

.block-faq--dark .block-faq__question {
  color: #fff;
}

.block-faq--dark .block-faq__question:hover {
  color: var(--color-primary);
}

.block-faq--dark .block-faq__answer-inner {
  color: rgba(255, 255, 255, 0.7);
}

/* Two Column (Marketing Sharks) */
.block-faq--two-column {
  background: #000000;
  padding: clamp(4rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}

.block-faq--two-column .block-faq__inner {
  max-width: 1440px;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  position: relative;
}

.block-faq--two-column .block-faq__sidebar {
  position: relative;
}

.block-faq--two-column .block-faq__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.1);
  margin: 0 0 clamp(3rem, 5vw, 4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

/* Decorative Images */
.block-faq--two-column .block-faq__image {
  max-width: 250px;
  margin: 0;
  border-radius: 0;
  position: absolute;
  z-index: 1;
}

.block-faq--two-column .block-faq__image:first-of-type {
  bottom: -50px;
  left: -50px;
}

.block-faq--two-column .block-faq__image:last-of-type {
  top: -30px;
  right: -30px;
}

.block-faq--two-column .block-faq__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Accordion Styling */
.block-faq--two-column .block-faq__list {
  position: relative;
  z-index: 2;
  gap: 0;
}

.block-faq--two-column .block-faq__item {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0;
}

.block-faq--two-column .block-faq__item:hover {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: none;
}

.block-faq--two-column .block-faq__question {
  font-size: clamp(0.95rem, 1.8vw, 1.125rem);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  padding: clamp(1.25rem, 2vw, 1.75rem) 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.block-faq--two-column .block-faq__question:hover {
  color: rgba(255, 255, 255, 0.8);
}

.block-faq--two-column .block-faq__item.is-open .block-faq__question {
  color: rgba(255, 255, 255, 0.8);
}

.block-faq--two-column .block-faq__icon {
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.5rem;
}

.block-faq--two-column .block-faq__item.is-open .block-faq__icon {
  color: rgba(255, 255, 255, 0.8);
}

.block-faq--two-column .block-faq__answer-inner {
  padding: 0 0 1.5rem;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 900px) {
  .block-faq--two-column .block-faq__inner {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .block-faq--two-column .block-faq__sidebar {
    position: static;
  }
  
  .block-faq--two-column .block-faq__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  
  .block-faq--two-column .block-faq__image {
    max-width: 150px;
  }
  
  .block-faq--two-column .block-faq__image:first-of-type {
    bottom: -30px;
    left: -20px;
  }
  
  .block-faq--two-column .block-faq__image:last-of-type {
    top: -20px;
    right: -20px;
    max-width: 120px;
  }
}

@media (max-width: 640px) {
  .block-faq__question {
    font-size: 1rem;
    padding: var(--space-2);
  }
  
  .block-faq__answer-inner {
    padding: 0 var(--space-2) var(--space-2);
  }
  
  .block-faq--two-column .block-faq__question {
    font-size: 0.875rem;
    padding: var(--space-2) var(--space-3);
  }
  
  .block-faq--two-column .block-faq__answer-inner {
    padding: 0 var(--space-3) var(--space-3);
  }
}



/* == 30-components/testimonials.css == */
/* Testimonials Block */
.block-testimonials {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 58px;
  gap: 80px;
  background: #EAE8E3;
  margin: 0 !important;
}

/* Style variant: Gray */
.block-testimonials.block-testimonials--gray {
  background: #F7F7F5;
}

.block-testimonials__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  max-width: 1324px;
  width: 100%;
}

/* Top row with counter, title, subtitle */
.block-testimonials__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  gap: 70px;
  width: 100%;
  position: relative;
}

.block-testimonials__counter {
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 30px;
  color: #171717;
  flex: none;
  order: 0;
}

.block-testimonials__title-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-testimonials__title {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 110%;
  text-align: center;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #171717;
  margin: 0;
  white-space: nowrap;
}

.block-testimonials__subtitle {
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 22px;
  line-height: 29px;
  text-align: right;
  color: #171717;
  flex: none;
  order: 1;
  margin-left: auto;
}

/* Separator line */
.block-testimonials__separator {
  width: 100%;
  height: 0px;
  border: 1px solid #BBBAB6;
  flex: none;
  align-self: stretch;
}

/* Carousel wrapper */
.block-testimonials__carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 50px;
  width: 100%;
}

/* Slides container with navigation */
.block-testimonials__slides-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 70px;
  width: 100%;
  position: relative;
}

.block-testimonials__slides {
  position: relative;
  width: 995px;
  min-height: 200px;
}

.block-testimonials__slide {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.block-testimonials__slide.is-active {
  opacity: 1;
  visibility: visible;
  position: relative;
}

.block-testimonials__content {
  text-align: center;
}

.block-testimonials__text {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 36px;
  line-height: 110%;
  text-align: center;
  letter-spacing: -0.05em;
  color: #171717;
  margin: 0;
}

/* Author info */
.block-testimonials__author {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px;
  gap: 5px;
  margin-top: 50px;
}

.block-testimonials__author-image {
  width: 62px;
  height: 62px;
  border-radius: 50% !important;
  object-fit: cover;
  flex: none;
  order: 0;
  display: block;
  overflow: hidden;
}

.block-testimonials__author-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.block-testimonials__author-name {
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 22px;
  line-height: 30px;
  color: #171717;
  margin: 0;
  flex: none;
  order: 1;
}

.block-testimonials__author-company {
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  color: #171717;
  flex: none;
  order: 2;
}

/* Navigation Buttons */
.block-testimonials__nav {
  box-sizing: border-box;
  width: 82px;
  height: 82px;
  border: 2.21622px solid #171717;
  border-radius: 242.014px;
  background: transparent;
  color: #171717;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: none;
  position: relative;
}

.block-testimonials__nav:hover {
  background: #171717;
  color: #EAE8E3;
  transform: scale(1.05);
}

.block-testimonials__nav svg {
  width: 26px;
  height: 21px;
}

.block-testimonials__nav--prev {
  order: 0;
  transform: rotate(-180deg);
}

.block-testimonials__nav--prev:hover {
  transform: rotate(-180deg) scale(1.05);
}

.block-testimonials__nav--next {
  order: 2;
}

/* Responsive */
@media (max-width: 1400px) {
  .block-testimonials {
    padding: 80px 40px;
    gap: 60px;
  }
  
  .block-testimonials__inner {
    gap: 60px;
  }
  
  .block-testimonials__title {
    font-size: clamp(52px, 6vw, 82px);
  }
  
  .block-testimonials__text {
    font-size: clamp(28px, 3vw, 36px);
  }
  
  .block-testimonials__slides {
    width: 100%;
    max-width: 900px;
  }
}

@media (max-width: 900px) {
  .block-testimonials {
    padding: 60px 30px;
    gap: 40px;
  }
  
  .block-testimonials__inner {
    gap: 40px;
    padding: 0 20px;
  }
  
  .block-testimonials__header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    padding-left: 0;
  }
  
  .block-testimonials__title-wrapper {
    position: static;
    transform: none;
    align-items: flex-start;
    padding-left: 0;
  }
  
  .block-testimonials__title {
    font-size: clamp(36px, 8vw, 52px);
    white-space: normal;
    text-align: left;
    padding-left: 0;
  }
  
  .block-testimonials__subtitle {
    margin-left: 0;
    text-align: left;
    padding-left: 0;
  }
  
  .block-testimonials__counter,
  .block-testimonials__subtitle {
    font-size: 18px;
    line-height: 24px;
  }
  
  .block-testimonials__slides-wrapper {
    gap: 30px;
  }
  
  .block-testimonials__text {
    font-size: clamp(24px, 5vw, 32px);
    text-align: left;
    padding: 0 20px;
  }
  
  .block-testimonials__nav {
    width: 60px;
    height: 60px;
  }
  
  .block-testimonials__nav svg {
    width: 20px;
    height: 16px;
  }
  
  .block-testimonials__author-name {
    font-size: 18px;
    line-height: 26px;
  }
  
  .block-testimonials__author-company {
    font-size: 16px;
    line-height: 22px;
  }
}

@media (max-width: 600px) {
  .block-testimonials {
    padding: 40px 20px;
    gap: 30px;
  }

  .block-testimonials__inner {
    padding: 0 10px;
    /* positioning context for the lifted arrows */
    position: relative;
  }

  .block-testimonials__title {
    font-size: clamp(28px, 10vw, 42px);
  }

  /* Move the carousel arrows up beside the subtitle (top-right) and give the
     testimonial text the full width — it was squeezed to ~230px between the two
     flanking arrows. */
  .block-testimonials__slides-wrapper {
    position: static;
    gap: 0;
  }

  .block-testimonials__slides {
    width: 100%;
    max-width: 100%;
  }

  .block-testimonials__text {
    padding: 0;
  }

  .block-testimonials__nav {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 150px;
    margin: 0;
  }

  .block-testimonials__nav--prev {
    left: auto;
    right: 72px;
  }

  .block-testimonials__nav--next {
    left: auto;
    right: 10px;
  }
}





/* == 30-components/why-us.css == */
/* Why Us Block */
.block-why-us {
  background-color: #f7f7f5;
  padding: 0;
  margin: 0;
}

/* Style variant: white background + gray cards (inverted from default).
   The CTA card stays black in both variants — it is a deliberate dark accent
   that contrasts with the surrounding cards regardless of the section bg. */
.block-why-us--white-bg {
  background-color: #ffffff;
}

.block-why-us--white-bg .block-why-us__card:not(.block-why-us__card--cta) {
  background: #f7f7f5;
}

.block-why-us__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px 300px;
  margin-bottom: -180px;
}

/*
 * Row 1: title + card-main side by side.
 * Using CSS Grid so both items start at exactly the same Y (grid row top).
 * card-main column matches the card-row column width: (100% - 2*20px) / 3
 */
.block-why-us__row1 {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: start !important;
  gap: 20px;
  margin-bottom: 20px;
}

.block-why-us__title {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 0.9;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
}

/*
 * Remove the natural leading above the first line of the title so its
 * visible glyph top matches the card's box top exactly.
 */
.block-why-us__title::before {
  content: '';
  display: block;
  margin-top: -0.12em;
}

/* Row 2: three equal-width cards */
.block-why-us__row2 {
  display: flex;
  gap: 20px;
}

/* Shared card base */
.block-why-us__card {
  background: #ffffff;
  padding: 25px;
  display: flex;
  flex-direction: column;
}

/*
 * Card-main occupies grid column 3 — the same width as each bottom card
 * since the card-row uses 3 equal 1fr columns.
 */
.block-why-us__card--main {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-content: space-between;
  align-items: flex-end;
}

/* Feature cards */
.block-why-us__card--feature {
  flex: 1;
  height: 313px;
  justify-content: space-between;
  align-items: flex-end;
}

/* Icon */
.block-why-us__card-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-why-us__card-icon svg {
  width: 42px;
  height: 42px;
  display: block;
}

/* Card content */
.block-why-us__card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.block-why-us__card-title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  width: 100%;
}

.block-why-us__card-text {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

/* CTA card */
.block-why-us__card--cta {
  flex: 1;
  background: #000000;
  height: 313px;
  justify-content: flex-end;
  align-items: flex-start;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.block-why-us__card--cta:hover {
  background-color: #1a1a1a;
}

.block-why-us__cta-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  flex: 1;
}

.block-why-us__cta-arrow {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-why-us__cta-arrow svg {
  width: 62px;
  height: 62px;
  display: block;
}

.block-why-us__cta-title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .block-why-us__title {
    font-size: 60px;
    letter-spacing: -3px;
  }

  .block-why-us__card-title,
  .block-why-us__cta-title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-why-us__card-text {
    font-size: 16px;
  }
}

@media (max-width: 900px) {
  .block-why-us__container {
    padding: 80px 40px 120px;
    margin-bottom: 0;
  }

  /* Row1 is a 3-column grid on desktop (display:grid !important), so the
     desktop `flex-direction: column` was ignored and the title kept sitting in
     columns 1-2 while the card sat in column 3 — the title text overflowed and
     overlapped the card. Force a real vertical stack on mobile. */
  .block-why-us__row1 {
    display: flex !important;
    flex-direction: column;
    gap: 20px;
  }

  /* Reset the !important grid placements so the title and main card stack. */
  .block-why-us__title,
  .block-why-us__card--main {
    grid-column: auto !important;
    grid-row: auto !important;
    width: 100%;
  }

  .block-why-us__title {
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .block-why-us__card--main {
    flex: 0 0 auto;
    width: 100%;
  }

  .block-why-us__row2 {
    flex-wrap: wrap;
  }

  .block-why-us__card--feature,
  .block-why-us__card--cta {
    flex: 0 0 calc(50% - 10px);
    height: 280px;
  }
}

@media (max-width: 600px) {
  .block-why-us__container {
    padding: 60px 20px 80px;
  }

  .block-why-us__title {
    font-size: 40px;
    letter-spacing: -2px;
  }

  .block-why-us__card,
  .block-why-us__card--cta {
    padding: 20px;
  }

  .block-why-us__card--feature,
  .block-why-us__card--cta {
    flex: 0 0 100%;
    height: auto;
    min-height: 240px;
  }

  .block-why-us__card-title,
  .block-why-us__cta-title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
}


/* == 30-components/why-that.css == */
/* Why That Block */

.block-why-that {
    background-color: var(--color-bg-alt);
    overflow-x: hidden;
    padding: 100px 0;
}

/* Background color variants */
.block-why-that.is-bg-grey {
    background-color: #F7F7F5;
}

.block-why-that.is-bg-white {
    background-color: #ffffff;
}

.block-why-that.is-bg-black {
    background-color: #000000;
}

.block-why-that.is-bg-black .block-why-that__title {
    color: #ffffff;
}

.block-why-that__container {
    position: relative;
    width: 1440px;
    max-width: 100%;
    height: 923px;
    margin: 0 auto;
    padding: 0;
}

/* Main Title */
.block-why-that__title {
    position: absolute;
    left: calc(50% - 722px/2);
    top: 317px;
    width: 722px;
    height: 270px;
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 500;
    font-size: 82px;
    line-height: 110%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--color-text);
    margin: 0;
}

/* Card Base */
.block-why-that__card {
    position: absolute;
    width: 428px;
    background: var(--color-bg-dark);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Positions */
.block-why-that__card.card-top-left {
    left: 58px;
    top: 100px;
}

.block-why-that__card.card-top-right {
    left: 954px;
    top: 100px;
}

.block-why-that__card.card-bottom {
    left: 282px;
    top: 580px;
}

/* Animation - Cards move away from center on scroll into view */
.block-why-that.is-animated .block-why-that__card.card-top-left {
    transform: translate(-40px, 0);
}

.block-why-that.is-animated .block-why-that__card.card-top-right {
    transform: translate(40px, 0);
}

.block-why-that.is-animated .block-why-that__card.card-bottom {
    transform: translate(0, 40px);
}

/* Individual card hover - card "escapes" when mouse hovers over it */
.block-why-that__card.card-top-left:hover {
    transform: translate(-60px, -15px) scale(1.02);
}

.block-why-that__card.card-top-right:hover {
    transform: translate(60px, -15px) scale(1.02);
}

.block-why-that__card.card-bottom:hover {
    transform: translate(0, 60px) scale(1.02);
}

/* When animated AND hovering individual card - combine transforms */
.block-why-that.is-animated .block-why-that__card.card-top-left:hover {
    transform: translate(-70px, -15px) scale(1.02);
}

.block-why-that.is-animated .block-why-that__card.card-top-right:hover {
    transform: translate(70px, -15px) scale(1.02);
}

.block-why-that.is-animated .block-why-that__card.card-bottom:hover {
    transform: translate(0, 70px) scale(1.02);
}

/* Icon */
.block-why-that__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.block-why-that__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Card Content */
.block-why-that__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--color-bg);
}

.block-why-that__card-title {
    font-family: var(--font-heading);
    font-style: normal;
    font-weight: 500;
    font-size: 32px;
    line-height: 110%;
    letter-spacing: -0.05em;
    text-transform: uppercase;
    color: var(--color-bg);
    margin: 0;
}

.block-why-that__card-description {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
    color: var(--color-bg);
    margin: 0;
    display: flex;
    align-items: center;
}

/* Responsive Design */
@media screen and (max-width: 1440px) {
    .block-why-that__container {
        height: auto;
        min-height: auto;
        padding: 0 5%;
    }

    .block-why-that__title {
        position: relative;
        left: 0;
        top: 0;
        transform: none;
        width: 100%;
        height: auto;
        margin: 0 auto 100px;
        font-size: clamp(40px, 6vw, 82px);
    }

    .block-why-that__card {
        position: relative;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100%;
        max-width: 428px;
        margin: 0 auto 20px;
    }

    .block-why-that__card:last-child {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 768px) {
    .block-why-that {
        padding: 60px 0;
    }

    .block-why-that__container {
        padding: 0 24px;
    }

    .block-why-that__title {
        margin-bottom: 60px;
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: -2px;
    }

    .block-why-that__card {
        padding: 24px;
        gap: 24px;
    }

    .block-why-that__icon {
        width: 36px;
        height: 36px;
    }

    .block-why-that__card-title {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .block-why-that__card-description {
        font-size: 16px;
    }
}

@media screen and (max-width: 480px) {
    .block-why-that {
        padding: 40px 0;
    }

    .block-why-that__container {
        padding: 0 20px;
    }

    .block-why-that__title {
        margin-bottom: 40px;
    }

    .block-why-that__card {
        padding: 20px;
        gap: 20px;
        margin-bottom: 16px;
    }

    .block-why-that__card-title {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .block-why-that__card-description {
        font-size: 15px;
    }
}



/* == 30-components/why-sharks.css == */
/* Why Sharks Block */

.block-why-sharks {
    background-color: #ffffff;
    color: #000000;
}

.block-why-sharks__container {
    display: flex;
    flex-direction: column;
    gap: 62px;
    padding: 100px 58px;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* Header Section */
.block-why-sharks__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1324px;
    margin: 0 auto;
}

.block-why-sharks__section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    color: #000000;
    white-space: nowrap;
    margin: 0;
}

.block-why-sharks__content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 652px;
    max-width: 100%;
    align-items: flex-start;
    line-height: 0;
}

.block-why-sharks__main-heading {
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -1.8px !important;
    color: #000000 !important;
    width: 100%;
}

.block-why-sharks__main-heading p {
    margin: 0 !important;
    margin-bottom: 0 !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 36px !important;
    line-height: 1.1 !important;
    letter-spacing: -1.8px !important;
    color: #000000 !important;
}

.block-why-sharks__description {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    color: #141414;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}

.block-why-sharks__description p {
    margin: 0;
    line-height: 1.4;
}

/* Cards Container */
.block-why-sharks__cards {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 1324px;
    margin: 0 auto;
}

/* Individual Card */
.block-why-sharks__card {
    backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-grow: 1;
    flex-basis: 0;
}

.block-why-sharks__card-number {
    font-family: 'Switzer', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    color: #bbbab6;
    width: 60px;
    margin: 0;
}

.block-why-sharks__card-divider {
    width: 100%;
    height: 0;
    position: relative;
}

.block-why-sharks__card-divider svg {
    position: absolute;
    width: 100%;
    height: 1px;
    left: 0;
    top: -0.5px;
}

.block-why-sharks__card-divider line,
.block-why-sharks__card-divider path {
    stroke: #BBBAB6;
}

.block-why-sharks__card-text {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #000000;
}

.block-why-sharks__card-text p {
    margin: 0;
}

/* Responsive Design */
@media (max-width: 1440px) {
    .block-why-sharks__container {
        padding: 80px 40px;
    }
    
    .block-why-sharks__header,
    .block-why-sharks__cards {
        max-width: 100%;
    }

    .block-why-sharks__content-wrapper {
        width: 100%;
        max-width: 652px;
    }
}

@media (max-width: 1024px) {
    .block-why-sharks__cards {
        flex-wrap: wrap;
    }

    .block-why-sharks__card {
        flex-basis: calc(50% - 10px);
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .block-why-sharks__container {
        gap: 40px;
        padding: 60px 20px;
    }

    .block-why-sharks__header {
        flex-direction: column;
        gap: 30px;
    }

    .block-why-sharks__content-wrapper {
        width: 100%;
    }

    .block-why-sharks__main-heading {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .block-why-sharks__cards {
        flex-direction: column;
        gap: 30px;
    }

    .block-why-sharks__card {
        flex-basis: auto;
    }
}

@media (max-width: 480px) {
    .block-why-sharks__container {
        padding: 40px 16px;
        gap: 32px;
    }

    .block-why-sharks__section-title {
        font-size: 16px;
    }

    .block-why-sharks__main-heading {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .block-why-sharks__description {
        font-size: 16px;
    }

    .block-why-sharks__card-number {
        font-size: 22px;
        letter-spacing: -1.1px;
    }

    .block-why-sharks__card-text {
        font-size: 16px;
    }

    .block-why-sharks__cards {
        gap: 24px;
    }

    .block-why-sharks__card {
        gap: 12px;
    }
}


/* == 30-components/why-sharks-2.css == */
/* Why Sharks 2 Block - Miks valida Marketing Sharks */

.block-why-sharks-2 {
    background-color: #000000;
    color: #ffffff;
}

.block-why-sharks-2__container {
    padding: 120px 58px;
    display: flex;
    flex-direction: column;
    gap: 62px;
    min-height: 701px;
    height: auto;
    max-width: 1440px;
    margin: 0 auto;
}

/* Header Section */
.block-why-sharks-2__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    gap: 20px;
}

.block-why-sharks-2__section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    line-height: normal;
    flex-shrink: 0;
    margin: 0;
    color: #ffffff;
}

.block-why-sharks-2__header-content {
    width: 652px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.block-why-sharks-2__title {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.8px;
    white-space: pre-wrap;
    margin: 0;
    color: #ffffff;
}

.block-why-sharks-2__description {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #ffffff;
}

.block-why-sharks-2__description p {
    margin: 0;
}

/* Features Section */
.block-why-sharks-2__features {
    display: flex;
    gap: 20px;
    width: 100%;
}

.block-why-sharks-2__feature-card {
    width: 316px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex-shrink: 0;
}

.block-why-sharks-2__feature-number {
    font-family: 'Switzer', sans-serif;
    font-weight: 500;
    font-size: 26px;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0;
    color: #ffffff;
}

.block-why-sharks-2__divider {
    width: 100%;
    height: 1px;
    background-color: #BBBAB6;
}

.block-why-sharks-2__feature-content {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.block-why-sharks-2__icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.block-why-sharks-2__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.block-why-sharks-2__feature-text {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    white-space: pre-wrap;
    margin: 0;
    color: #ffffff;
}

/* Responsive Design */
@media (max-width: 1400px) {
    .block-why-sharks-2__features {
        flex-wrap: wrap;
    }
    
    .block-why-sharks-2__feature-card {
        width: calc(50% - 10px);
    }
}

@media (max-width: 1200px) {
    .block-why-sharks-2__container {
        padding: 80px 40px;
        gap: 50px;
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .block-why-sharks-2__container {
        padding: 70px 30px;
        gap: 40px;
    }
    
    .block-why-sharks-2__header {
        flex-direction: column;
        gap: 30px;
    }
    
    .block-why-sharks-2__header-content {
        width: 100%;
    }
    
    .block-why-sharks-2__title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    
    .block-why-sharks-2__features {
        flex-direction: column;
        gap: 30px;
    }
    
    .block-why-sharks-2__feature-card {
        width: 100%;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .block-why-sharks-2__container {
        padding: 70px 24px;
        gap: 40px;
    }
    
    .block-why-sharks-2__header {
        gap: 25px;
    }
    
    .block-why-sharks-2__header-content {
        gap: 20px;
    }
    
    .block-why-sharks-2__section-title {
        font-size: 17px;
    }
    
    .block-why-sharks-2__title {
        font-size: 30px;
        letter-spacing: -1.5px;
    }
    
    .block-why-sharks-2__description {
        font-size: 17px;
    }
    
    .block-why-sharks-2__features {
        gap: 28px;
    }
    
    .block-why-sharks-2__feature-card {
        gap: 20px;
    }
    
    .block-why-sharks-2__feature-number {
        font-size: 24px;
        letter-spacing: -1.2px;
    }
    
    .block-why-sharks-2__icon {
        width: 38px;
        height: 38px;
    }
    
    .block-why-sharks-2__feature-text {
        font-size: 17px;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .block-why-sharks-2__container {
        padding: 60px 20px;
        gap: 35px;
    }
    
    .block-why-sharks-2__header {
        gap: 22px;
    }
    
    .block-why-sharks-2__header-content {
        gap: 18px;
    }
    
    .block-why-sharks-2__section-title {
        font-size: 16px;
    }
    
    .block-why-sharks-2__title {
        font-size: 26px;
        letter-spacing: -1.3px;
    }
    
    .block-why-sharks-2__description {
        font-size: 16px;
    }
    
    .block-why-sharks-2__features {
        gap: 26px;
    }
    
    .block-why-sharks-2__feature-card {
        gap: 18px;
    }
    
    .block-why-sharks-2__feature-number {
        font-size: 22px;
        letter-spacing: -1.1px;
    }
    
    .block-why-sharks-2__icon {
        width: 36px;
        height: 36px;
    }
    
    .block-why-sharks-2__feature-text {
        font-size: 16px;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .block-why-sharks-2__container {
        padding: 60px 18px;
    }
    
    .block-why-sharks-2__title {
        font-size: 24px;
        letter-spacing: -1.2px;
    }
    
    .block-why-sharks-2__feature-number {
        font-size: 21px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .block-why-sharks-2__container {
        padding: 50px 16px;
        gap: 32px;
    }
    
    .block-why-sharks-2__header {
        gap: 20px;
    }
    
    .block-why-sharks-2__header-content {
        gap: 16px;
    }
    
    .block-why-sharks-2__section-title {
        font-size: 15px;
    }
    
    .block-why-sharks-2__title {
        font-size: 22px;
        letter-spacing: -1.1px;
    }
    
    .block-why-sharks-2__description {
        font-size: 15px;
    }
    
    .block-why-sharks-2__features {
        gap: 24px;
    }
    
    .block-why-sharks-2__feature-card {
        gap: 16px;
    }
    
    .block-why-sharks-2__feature-number {
        font-size: 20px;
        letter-spacing: -1px;
    }
    
    .block-why-sharks-2__icon {
        width: 34px;
        height: 34px;
    }
    
    .block-why-sharks-2__feature-text {
        font-size: 15px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .block-why-sharks-2__container {
        padding: 50px 14px;
        gap: 30px;
    }
    
    .block-why-sharks-2__title {
        font-size: 20px;
        letter-spacing: -1px;
    }
    
    .block-why-sharks-2__description {
        font-size: 14px;
    }
    
    .block-why-sharks-2__feature-number {
        font-size: 18px;
    }
    
    .block-why-sharks-2__icon {
        width: 32px;
        height: 32px;
    }
    
    .block-why-sharks-2__feature-text {
        font-size: 14px;
    }
}


/* == 30-components/why-we.css == */
/* Why We Block */
.why-we-block {
    width: 100%;
    background-color: #ffffff;
}

.why-we-container {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 62px;
}

.why-we-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
    width: 100%;
    max-width: 1324px;
}

.why-we-heading {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #000000;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: normal;
}

.why-we-description-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 652px;
    text-align: center;
}

.why-we-main-description {
    font-size: 36px;
    color: #000000;
    line-height: 1.1;
    letter-spacing: -1.8px;
}

.why-we-sub-description {
    font-size: 18px;
    color: #141414;
    line-height: 1.4;
    width: 100%;
    max-width: 497px;
}

.why-we-sub-description p {
    margin: 0;
}

.why-we-stats-container {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 652px;
}

.why-we-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.why-we-stat-number {
    font-family: 'Switzer', sans-serif;
    font-weight: 500;
    font-size: 82px;
    color: #000000;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
}

.why-we-stat-label {
    font-size: 18px;
    color: #141414;
    line-height: 1.4;
    margin-top: 4px;
}

.why-we-stat-label p {
    margin: 0;
}

.why-we-image-wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 0;
}

.why-we-image-wrapper-top-left {
    left: 58px;
    top: 100px;
}

.why-we-image-wrapper-bottom-right {
    right: 58px;
    bottom: 100px;
}

.why-we-image-bg {
    position: absolute;
    inset: 0;
    background-color: #e1ff04;
}

.why-we-laptop-image-1,
.why-we-laptop-image-2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0 !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .why-we-container {
        padding: 60px 24px;
        gap: 40px;
    }

    .why-we-heading {
        font-size: 16px;
    }

    .why-we-main-description {
        font-size: 24px;
        letter-spacing: -1.2px;
    }

    .why-we-sub-description {
        font-size: 16px;
    }

    .why-we-stat-number {
        font-size: 48px;
        letter-spacing: -2.4px;
    }

    .why-we-stat-label {
        font-size: 14px;
    }

    .why-we-stats-container {
        flex-direction: column;
        gap: 32px;
    }

    /* Hide absolutely-positioned corner images on mobile — they overlap text */
    .why-we-image-wrapper {
        display: none;
    }
}


/* == 30-components/sharks-headings.css == */
/* Sharks Headings Block */
.sharks-headings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 58px;
  gap: 50px;
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.sharks-headings__label {
  font-family: 'Manrope', var(--font-sans);
  font-size: 18px;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  text-align: center;
}

.sharks-headings__title {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.sharks-headings__break {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
}

.sharks-headings__part {
  display: inline;
  margin: 0;
}

.sharks-headings__part--dark {
  color: #000000;
}

.sharks-headings__part--light {
  color: #bbbab6;
}

.sharks-headings__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  line-height: 1;
  vertical-align: middle;
  margin: 0 15px;
  position: relative;
  top: 0;
  transform: translateY(-3px);
}

.sharks-headings__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content Wrapper (subtitle + description + read more) */
.sharks-headings__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 700px;
  max-width: 100%;
}

/* Subtitle */
.sharks-headings__subtitle {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.8px;
  text-align: center;
  color: #000000;
  margin: 0;
  width: 100%;
}

/* Description */
.sharks-headings__description {
  font-family: 'Helvetica', Arial, var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  color: #000000;
  margin: 0;
  width: 100%;
  white-space: pre-wrap;
}

/* Read More Link */
.sharks-headings__read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  transition: opacity var(--transition-base);
  cursor: pointer;
}

.sharks-headings__read-more:empty {
  display: none;
}

.sharks-headings__read-more:hover {
  opacity: 0.8;
}

.sharks-headings__read-more-text {
  font-family: 'Switzer', var(--font-sans);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.sharks-headings__read-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.sharks-headings__read-more-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Alignment */
.sharks-headings--left {
  margin-left: 0;
  margin-right: auto;
  align-items: flex-start;
}

.sharks-headings--left .sharks-headings__label {
  text-align: left !important;
}

.sharks-headings--left .sharks-headings__title {
  justify-content: flex-start;
  margin: 0;
}

.sharks-headings--left .sharks-headings__content-wrapper {
  align-items: flex-start;
  width: 700px;
  max-width: 100%;
}

.sharks-headings--left .sharks-headings__subtitle {
  text-align: left !important;
}

.sharks-headings--left .sharks-headings__description {
  text-align: left !important;
}

.sharks-headings--center {
  align-items: center;
}

.sharks-headings--center .sharks-headings__label {
  text-align: center;
}

.sharks-headings--center .sharks-headings__title {
  justify-content: center;
  margin: 0 auto;
  text-align: center;
}

/* Keep the wrapped title text centred on mobile when the text part fills the row */
.sharks-headings--center .sharks-headings__title .sharks-headings__part {
  text-align: center;
}

.sharks-headings--center .sharks-headings__content-wrapper {
  align-items: center;
}

.sharks-headings--center .sharks-headings__subtitle {
  text-align: center;
}

.sharks-headings--center .sharks-headings__description {
  text-align: center;
}

.sharks-headings--center .sharks-headings__read-more {
  margin-inline: auto;
}

.sharks-headings--right {
  margin-left: auto;
  margin-right: 0;
  align-items: flex-end;
}

.sharks-headings--right .sharks-headings__label {
  text-align: right !important;
}

.sharks-headings--right .sharks-headings__title {
  justify-content: flex-end;
  margin: 0 0 0 auto;
}

.sharks-headings--right .sharks-headings__content-wrapper {
  align-items: flex-end;
  width: 700px;
  max-width: 100%;
}

.sharks-headings--right .sharks-headings__subtitle {
  text-align: right !important;
}

.sharks-headings--right .sharks-headings__description {
  text-align: right !important;
}

/* Responsive */
@media (max-width: 1440px) {
  .sharks-headings {
    max-width: 100%;
  }
}

@media (max-width: 1024px) {
  .sharks-headings__title {
    font-size: 60px;
    letter-spacing: -3px;
  }
  
  .sharks-headings__icon {
    width: 48px;
    height: 48px;
    margin: 0 10px;
    transform: translateY(-2px);
  }
}

@media (max-width: 900px) {
  .sharks-headings {
    padding: 80px 30px;
    gap: 40px;
  }
  
  .sharks-headings__label {
    font-size: 16px;
  }
  
  .sharks-headings__subtitle {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .sharks-headings__description {
    font-size: 16px;
  }
  
  .sharks-headings__read-more-text {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .sharks-headings {
    padding: 80px 30px;
    gap: 40px;
  }
  
  .sharks-headings__label {
    font-size: 14px;
  }
  
  .sharks-headings__title {
    font-size: 40px;
    letter-spacing: -2px;
  }
  
  .sharks-headings__icon {
    width: 36px;
    height: 36px;
    margin: 0 7.5px;
    transform: translateY(-2px);
  }
  
  .sharks-headings__content-wrapper {
    width: 100%;
    max-width: 100%;
  }

  .sharks-headings__description {
    font-size: 16px;
  }

  /* In post content the block's own side padding is zeroed by a shared
     `padding-inline: 0 !important` rule in site.css, pushing the heading and
     paragraphs edge-to-edge on mobile. Give the inner content breathing room. */
  .entry-content .sharks-headings__title,
  .entry-content .sharks-headings__label,
  .entry-content .sharks-headings__content-wrapper {
    padding-inline: 24px;
  }
}

@media (max-width: 480px) {
  .sharks-headings {
    padding: 60px 20px;
    gap: 40px;
  }
  
  .sharks-headings__label {
    font-size: 14px;
  }
  
  .sharks-headings__title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .sharks-headings__icon {
    width: 28px;
    height: 28px;
    margin: 0 5px;
    transform: translateY(-1px);
  }
  
  .sharks-headings__subtitle {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .sharks-headings__description {
    font-size: 14px;
  }
  
  .sharks-headings__read-more-text {
    font-size: 18px;
  }
}



/* == 30-components/content-grey.css == */
/* Content Grey Block */
.block-content-grey {
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
}

.block-content-grey__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
}

/* When the block has no bottom content (no CTA, no image, no read-more),
   reduce the container's bottom padding so the section doesn't leave a large
   empty white area below the text. */
.block-content-grey--no-bottom .block-content-grey__container {
  padding-bottom: 0;
}

.block-content-grey__wrapper {
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* Main Section */
.block-content-grey__main {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  gap: 40px;
}

/* Left Column */
.block-content-grey__left {
  display: flex;
  flex-direction: column;
  gap: 62px;
  flex: 1;
  min-width: 0;
}

.block-content-grey__heading {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
}

.block-content-grey__heading-part {
  display: inline;
}

.block-content-grey__heading-part--black {
  color: #000000;
}

.block-content-grey__heading-part--gray {
  color: #bbbab6;
}

.block-content-grey__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: baseline;
  margin-bottom: -0.15em;
}

.block-content-grey__heading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-content-grey__heading-break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.block-content-grey__subtitle {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000000;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.block-content-grey__subtitle p {
  margin: 0;
}

/* Right Column */
.block-content-grey__right {
  width: 428px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.block-content-grey__content {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  white-space: pre-wrap;
}

.block-content-grey__content p {
  margin: 0;
}

.block-content-grey__read-more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.block-content-grey__read-more:hover {
  opacity: 0.7;
}

.block-content-grey__read-more-text {
  font-family: 'Switzer', var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.block-content-grey__read-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.block-content-grey__read-more-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Bottom Section */
.block-content-grey__bottom {
  display: flex;
  gap: 40px;
  width: 100%;
}

.block-content-grey__cta {
  background-color: #000000;
  height: 112px;
  width: 100%;
  padding: 25px;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: background-color var(--transition-base);
}

.block-content-grey__cta:hover {
  background-color: #1a1a1a;
}

.block-content-grey__cta-text {
  font-family: 'Switzer', var(--font-heading);
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: #ffffff;
  font-weight: 500;
  flex: 1;
}

.block-content-grey__cta-arrow {
  width: 62px;
  height: 62px;
  border: 1.676px solid #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.block-content-grey__cta:hover .block-content-grey__cta-arrow {
  transform: scale(1.05);
}

.block-content-grey__image {
  width: 100%;
  overflow: hidden;
}

.block-content-grey__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* When both CTA and image are present */
.block-content-grey__bottom:has(.block-content-grey__cta):has(.block-content-grey__image) .block-content-grey__cta {
  width: 50%;
}

.block-content-grey__bottom:has(.block-content-grey__cta):has(.block-content-grey__image) .block-content-grey__image {
  width: 50%;
}

/* Responsive */
@media (max-width: 1024px) {
  .block-content-grey__main {
    flex-direction: column;
  }
  
  .block-content-grey__left,
  .block-content-grey__right {
    width: 100%;
  }
  
  .block-content-grey__heading {
    font-size: 60px;
    letter-spacing: -3px;
    height: auto;
  }
  
  .block-content-grey__subtitle {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-content-grey__cta-text {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
}

@media (max-width: 768px) {
  .block-content-grey__container {
    padding: 60px 30px;
  }
  
  .block-content-grey__wrapper {
    gap: 40px;
  }
  
  .block-content-grey__left {
    gap: 40px;
  }
  
  .block-content-grey__heading {
    height: auto;
    gap: 20px 15px;
    font-size: 42px;
    letter-spacing: -2.1px;
  }
  
  .block-content-grey__heading-icon {
    width: 42px;
    height: 42px;
  }
  
  .block-content-grey__subtitle {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
  
  .block-content-grey__content {
    font-size: 16px;
  }
  
  .block-content-grey__content p {
    margin-bottom: 16px;
  }
  
  .block-content-grey__read-more-text {
    font-size: 18px;
  }
  
  .block-content-grey__bottom {
    flex-direction: column;
  }
  
  .block-content-grey__bottom:has(.block-content-grey__cta):has(.block-content-grey__image) .block-content-grey__cta,
  .block-content-grey__bottom:has(.block-content-grey__cta):has(.block-content-grey__image) .block-content-grey__image {
    width: 100%;
  }
  
  .block-content-grey__cta {
    height: 90px;
    padding: 20px;
  }
  
  .block-content-grey__cta-text {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-content-grey__cta-arrow {
    width: 48px;
    height: 48px;
  }
}



/* == 30-components/service-cards.css == */
/* Service Cards Block */
.block-service-cards {
  background-color: #000000;
  padding: 0;
  margin: 0;
}

.block-service-cards__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 150px 58px;
  display: flex;
  flex-direction: column;
  gap: 70px;
}

/* Header */
.block-service-cards__header {
  display: flex;
  align-items: center;
  max-width: 1324px;
}

.block-service-cards__title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.block-service-cards__title-part {
  display: inline-block;
  white-space: nowrap;
}

.block-service-cards__title-part:not(:last-child) {
  margin-right: 30px;
}

.block-service-cards__title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: middle;
}

.block-service-cards__title-icon:not(:last-child) {
  margin-right: 30px;
}

.block-service-cards__title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-service-cards__title-break {
  display: block;
  flex-basis: 100%;
  width: 100%;
  height: 0;
  line-height: 0;
}

/* Intro Text */
.block-service-cards__intro {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #ffffff;
  max-width: 652px;
  margin: 0 0 0 auto;
}

/* Cards Grid */
.block-service-cards__grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.block-service-cards__row {
  display: flex;
  gap: 20px;
  width: 100%;
}

/* Individual Card */
.block-service-cards__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 42px;
  border: 1px solid #ffffff;
  background-color: #000000;
  position: relative;
  transition: background-color 0.4s ease, border-color 0.4s ease;
  min-height: 439px;
}

.block-service-cards__card:hover {
  background-color: #f7f7f5;
  border-color: #f7f7f5;
}

/* Card Number */
.block-service-cards__card-number {
  width: fit-content;
  padding: 25px 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  transition: all 0.4s ease;
}

.block-service-cards__card:hover .block-service-cards__card-number {
  background-color: var(--hover-number-bg, #000000);
  color: var(--hover-number-color, #ffffff);
}

/* Card Content */
.block-service-cards__card-content {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.block-service-cards__card-title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  color: #ffffff;
  margin: 0;
  transition: color 0.4s ease;
}

.block-service-cards__card:hover .block-service-cards__card-title {
  color: #000000;
}

.block-service-cards__card-description {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  margin: 22px 0 0 0;
  opacity: 0;
  transition: opacity 0.4s ease, color 0.4s ease;
}

.block-service-cards__card:hover .block-service-cards__card-description {
  opacity: 1;
  color: #000000;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-service-cards__title {
    font-size: 60px;
    letter-spacing: -3px;
  }
  
  .block-service-cards__intro {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
}

@media (max-width: 900px) {
  .block-service-cards__container {
    padding: 100px 40px;
    gap: 50px;
  }
  
  .block-service-cards__row {
    flex-direction: column;
  }
  
  .block-service-cards__title {
    font-size: 48px;
    letter-spacing: -2.4px;
  }
  
  .block-service-cards__title-icon {
    width: 48px;
    height: 48px;
  }
  
  .block-service-cards__intro {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-service-cards__card-title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
}

@media (max-width: 768px) {
  .block-service-cards__container {
    padding: 80px 30px;
  }
  
  .block-service-cards__title {
    font-size: 42px;
    letter-spacing: -2.1px;
  }
  
  .block-service-cards__title-icon {
    width: 40px;
    height: 40px;
  }
  
  .block-service-cards__intro {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
  
  .block-service-cards__card {
    padding: 30px;
  }
  
  .block-service-cards__card-title {
    font-size: 26px;
    letter-spacing: -1.3px;
  }
  
  .block-service-cards__card-description {
    font-size: 16px;
  }
  
  /* Mobile: show description by default */
  .block-service-cards__card-description {
    opacity: 1;
    max-height: none;
  }
}

@media (max-width: 480px) {
  .block-service-cards__container {
    padding: 60px 20px;
  }
  
  .block-service-cards__title {
    font-size: 30px;
    letter-spacing: -1.5px;
  }

  .block-service-cards__title-icon {
    width: 28px;
    height: 28px;
  }
  
  .block-service-cards__intro {
    font-size: 20px;
    letter-spacing: -1px;
  }
  
  .block-service-cards__card {
    padding: 25px;
  }
  
  .block-service-cards__card-title {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-service-cards__card-description {
    font-size: 15px;
  }
}

@media (max-width: 375px) {
  .block-service-cards__title {
    font-size: 26px;
    letter-spacing: -1.3px;
  }
  
  .block-service-cards__intro {
    font-size: 18px;
  }
  
  .block-service-cards__card-title {
    font-size: 22px;
  }
}



/* == 30-components/specialist.css == */
/* Specialist Block */
.block-specialist {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
}

.block-specialist__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
}

.block-specialist__content {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
}

/* Left Column */
.block-specialist__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 779px;
}

.block-specialist__heading-wrapper {
  height: 270px;
  width: 100%;
  position: relative;
  margin-top: -14px;
}

.block-specialist__heading {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.block-specialist__heading-part {
  display: inline;
  white-space: nowrap;
}

.block-specialist__heading-part--black {
  color: #000000;
}

.block-specialist__heading-part--gray {
  color: #bbbab6;
}

.block-specialist__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: baseline;
  margin-bottom: -0.15em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.block-specialist__heading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-specialist__heading-break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.block-specialist__bio {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  width: 428px;
  max-width: 100%;
}

.block-specialist__bio p {
  margin: 0 0 18px 0;
}

.block-specialist__bio p:last-child {
  margin-bottom: 0;
}

/* Right Column */
.block-specialist__right {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 428px;
}

.block-specialist__image {
  width: 100%;
  height: 666px;
  overflow: hidden;
}

.block-specialist .block-specialist__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.block-specialist__image--placeholder {
  background-color: #d9d9d9;
}

.block-specialist__info {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.block-specialist__name-wrapper {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 204px;
}

.block-specialist__name {
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

.block-specialist__position {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

.block-specialist__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.block-specialist__linkedin:hover {
  opacity: 0.7;
}

.block-specialist__linkedin-text {
  font-family: 'Switzer', var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

.block-specialist__linkedin-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

.block-specialist__linkedin-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-specialist__content {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .block-specialist__left,
  .block-specialist__right {
    width: 100%;
  }
  
  .block-specialist__left {
    min-height: auto;
    gap: 60px;
  }
  
  .block-specialist__heading {
    font-size: 60px;
    letter-spacing: -3px;
  }
  
  .block-specialist__heading-icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 768px) {
  .block-specialist__container {
    padding: 80px 30px;
  }
  
  .block-specialist__heading-wrapper {
    height: auto;
  }
  
  .block-specialist__heading {
    font-size: 42px;
    letter-spacing: -2.1px;
    position: relative;
  }
  
  .block-specialist__heading-icon {
    width: 40px;
    height: 40px;
  }
  
  .block-specialist__bio {
    font-size: 16px;
    width: 100%;
  }
  
  .block-specialist__image {
    height: 500px;
  }
  
  .block-specialist__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  
  .block-specialist__name-wrapper {
    width: 100%;
  }
  
  .block-specialist__name {
    font-size: 20px;
  }
  
  .block-specialist__position {
    font-size: 16px;
  }
  
  .block-specialist__linkedin-text {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .block-specialist__container {
    padding: 60px 20px;
  }
  
  .block-specialist__heading {
    font-size: 36px;
    letter-spacing: -1.8px;
  }
  
  .block-specialist__heading-icon {
    width: 32px;
    height: 32px;
  }
  
  .block-specialist__bio {
    font-size: 15px;
  }
  
  .block-specialist__image {
    height: 400px;
  }
}

@media (max-width: 375px) {
  .block-specialist__heading {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
  
  .block-specialist__image {
    height: 350px;
  }
}




/* == 30-components/team.css == */
/* Team Block */
.block-team {
  background-color: #f7f7f5;
  padding: 0;
  margin: 0;
}

.block-team__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  flex-direction: column;
  gap: 62px;
  align-items: center;
  min-height: 100vh;
}

/* Header Styles */
.block-team__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-team__title-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.block-team__title-row {
  display: flex;
  align-items: center;
}

.block-team__title-gray {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #bbbab6;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.block-team__title-row-main {
  display: flex;
  gap: 30px;
  align-items: center;
}

.block-team__title-black {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

.block-team__icon-frame {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

.block-team__icon-frame svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Team Row Styles */
.block-team__row {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

.block-team__row--justify-end {
  justify-content: flex-end;
}

/* Team Card Styles */
.block-team__card {
  width: 428px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-shrink: 0;
}

.block-team__image-container {
  width: 100%;
  height: 428px;
  position: relative;
  overflow: hidden;
}

.block-team__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
}

/* A global `.entry-content img { height: auto }` rule out-specifies the
   height:100% above, so portrait-short team photos didn't fill the fixed-height
   container and the black hover background showed as a box below the photo
   (e.g. for everyone except Tanel, whose photo is tall enough to fill it).
   Force the photo to fill the container so the black never shows when idle. */
.block-team__image-container img.block-team__image {
  height: 100%;
}

.block-team__image-container--hover {
  background-color: #000;
}

.block-team__image-container--hover .block-team__image {
  transition: opacity 0.3s ease;
}

.block-team__image-container--hover:hover .block-team__image {
  opacity: 0;
}

/* Overlay Text on Hover Card */
.block-team__overlay-text {
  position: absolute;
  left: 25px;
  top: 50%;
  transform: translateY(-50%);
  width: 378px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.block-team__image-container--hover:hover .block-team__overlay-text {
  opacity: 1;
}

.block-team__overlay-text p {
  font-size: 18px;
  line-height: 1.4;
  margin: 0;
}

.block-team__corner-icon {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 42px;
  height: 42px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.block-team__image-container--hover:hover .block-team__corner-icon {
  opacity: 1;
}

.block-team__corner-icon svg {
  width: 100%;
  height: 100%;
}

.block-team__hover-small-image {
  position: absolute;
  top: 110px;
  left: 303px;
  width: 23px;
  height: 35px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.block-team__image-container--hover:hover .block-team__hover-small-image {
  opacity: 1;
}

/* Info Styles */
.block-team__info {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.block-team__name {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000;
  margin: 0;
}

.block-team__position {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: #f237a6;
  margin: 0;
}

/* Contact Styles */
.block-team__contact {
  width: 100%;
}

.block-team__contact p {
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  margin: 0;
}

.block-team__contact-bold {
  font-weight: 700;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .block-team__title-gray,
  .block-team__title-black {
    font-size: 52px;
    letter-spacing: -2.6px;
  }

  .block-team__icon-frame {
    width: 42px;
    height: 42px;
  }

  .block-team__card {
    width: calc(50% - 10px);
  }
}

@media (max-width: 768px) {
  .block-team__container {
    padding: 60px 20px;
    gap: 40px;
  }

  .block-team__title-gray,
  .block-team__title-black {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-team__title-row-main {
    gap: 15px;
  }

  .block-team__icon-frame {
    width: 32px;
    height: 32px;
  }

  .block-team__card {
    width: 100%;
  }

  .block-team__name {
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .block-team__overlay-text {
    width: calc(100% - 50px);
  }
}

@media (max-width: 480px) {
  .block-team__container {
    padding: 40px 16px;
  }

  .block-team__title-gray,
  .block-team__title-black {
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .block-team__name {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .block-team__position,
  .block-team__contact p,
  .block-team__overlay-text p {
    font-size: 16px;
  }
}


/* == 30-components/label-bar.css == */
/* Label Bar Block */
.block-label-bar {
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-label-bar__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0;
}

.block-label-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 20px 58px;
  gap: 30px;
  width: 100%;
}

.block-label-bar__label {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.block-label-bar__label:hover {
  opacity: 0.8;
}

.block-label-bar__separator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.block-label-bar__separator svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-label-bar__inner {
    padding: 20px 40px;
    gap: 20px;
  }
  
  .block-label-bar__label {
    font-size: 16px;
  }
  
  .block-label-bar__separator {
    width: 14px;
    height: 14px;
  }
}

@media (max-width: 768px) {
  .block-label-bar__inner {
    padding: 15px 24px;
    gap: 15px;
    justify-content: center;
  }
  
  .block-label-bar__label {
    font-size: 14px;
  }
  
  .block-label-bar__separator {
    width: 12px;
    height: 12px;
  }
}




/* == 30-components/sharks-heading-2.css == */
/* Sharks Heading 2 Block */
.sharks-heading-2 {
  width: 100%;
  background-color: var(--color-bg, #ffffff);
}

.sharks-heading-2__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding: clamp(3rem, 8vw, 7.5rem) clamp(1rem, 4vw, 3.625rem); /* 120px 58px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 3.75rem); /* 32-60px between label/heading/paragraphs */
}

/* Small Label Wrapper */
.sharks-heading-2__label-wrapper {
  width: 100%;
}

/* Small Label */
.sharks-heading-2__label {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.125rem); /* 18px = 1.125rem */
  font-weight: 700;
  line-height: 1; /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}

/* Heading Wrapper */
.sharks-heading-2__heading {
  width: 100%;
  max-width: 1324px;
  margin-left: 0;
  margin-right: auto;
}

/* Main Heading */
.sharks-heading-2__title {
  font-family: 'Switzer', var(--font-heading, sans-serif);
  font-size: clamp(3rem, 8vw, 5.125rem); /* 82px = 5.125rem */
  font-weight: 500;
  line-height: 1.1; /* 110% */
  letter-spacing: -0.05em; /* -5% */
  text-align: left;
  text-transform: uppercase;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  row-gap: 0; /* let line-height handle vertical spacing between wrapped lines */
  column-gap: clamp(0.75rem, 2vw, 1.875rem); /* 30px between words on same line */
}

/* Word with custom color */
.sharks-heading-2__word {
  display: inline-block;
  color: var(--color-text, #171717); /* default dark */
  transition: color 0.3s ease;
}

/* Icon — 0.85em matches visual cap-height of the heading text */
.sharks-heading-2__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.85em;
  height: 0.85em;
  color: var(--color-text, #171717); /* default dark */
  flex-shrink: 0;
}

.sharks-heading-2__icon svg {
  width: 100%;
  height: 100%;
}

/* Line Break */
.sharks-heading-2__break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

/* Paragraphs Container */
.sharks-heading-2__paragraphs {
  display: flex;
  flex-direction: row;
  gap: clamp(2rem, 4vw, 4rem);
  width: 100%;
  max-width: 988px;
  margin-left: auto;
  margin-right: 0;
  align-items: flex-start;
  justify-content: space-between;
}

/* Individual Paragraph */
.sharks-heading-2__paragraph {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: clamp(0.95rem, 1.2vw, 1.125rem); /* 18px = 1.125rem */
  font-weight: 400;
  line-height: 1.4; /* 140% */
  letter-spacing: 0;
  color: var(--color-text, #171717);
  margin: 0;
  flex: 0 0 auto;
  width: 100%;
  max-width: 428px;
}

/* Inherit typography for <p> tags inside paragraph wrapper (WYSIWYG output) */
.sharks-heading-2__paragraph p {
  margin: 0 0 1em 0;
  font: inherit;
  color: inherit;
  line-height: inherit;
}

.sharks-heading-2__paragraph p:last-child {
  margin-bottom: 0;
}

.sharks-heading-2__paragraph strong,
.sharks-heading-2__paragraph b {
  font-weight: 700;
}

.sharks-heading-2__paragraph em,
.sharks-heading-2__paragraph i {
  font-style: italic;
}

/* Links inside paragraphs — black by default, gray on hover */
.sharks-heading-2__paragraph a,
.sharks-heading-2__paragraph a:link,
.sharks-heading-2__paragraph a:visited {
  color: #000000;
  text-decoration: underline;
  transition: color 0.2s ease;
}

.sharks-heading-2__paragraph a:hover,
.sharks-heading-2__paragraph a:focus,
.sharks-heading-2__paragraph a:active {
  color: rgb(187, 186, 182);
}

/* Alignment Support */
.sharks-heading-2.alignwide {
  max-width: 1400px;
  margin-inline: auto;
}

.sharks-heading-2.alignfull {
  max-width: none;
}

/* Responsive */
@media (max-width: 1024px) {
  .sharks-heading-2 {
    padding-block: clamp(3rem, 6vw, 6rem);
  }
  
  .sharks-heading-2__title {
    font-size: clamp(2.5rem, 7vw, 6rem);
    column-gap: clamp(0.6rem, 1.5vw, 1.2rem);
  }


  .sharks-heading-2__paragraphs {
    max-width: 80%;
  }
}

@media (max-width: 768px) {
  .sharks-heading-2 {
    padding-block: clamp(2.5rem, 5vw, 4rem);
  }

  .sharks-heading-2__label {
    font-size: clamp(0.8rem, 1.1vw, 1rem);
  }

  .sharks-heading-2__title {
    font-size: clamp(2rem, 6vw, 4rem);
    column-gap: clamp(0.5rem, 1.2vw, 1rem);
  }
  
  .sharks-heading-2__paragraphs {
    flex-direction: column;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    gap: clamp(1rem, 2vw, 1.5rem);
  }
  
  .sharks-heading-2__paragraph {
    font-size: clamp(0.9rem, 1.1vw, 1rem);
  }
}

@media (max-width: 480px) {
  .sharks-heading-2 {
    padding-block: clamp(2rem, 4vw, 3rem);
    padding-inline: clamp(1rem, 3vw, 1.5rem);
  }
  
  .sharks-heading-2__title {
    font-size: clamp(1.75rem, 5.5vw, 3rem);
    column-gap: clamp(0.4rem, 1vw, 0.8rem);
  }
  
}

@media (max-width: 375px) {
  .sharks-heading-2 {
    padding-inline: 1rem;
  }
  
  .sharks-heading-2__title {
    font-size: clamp(1.5rem, 5vw, 2rem);
    column-gap: 0.5rem;
    letter-spacing: -0.04em;
  }
  
  .sharks-heading-2__paragraph {
    font-size: 0.875rem;
  }
}



/* == 30-components/heading-half.css == */
/* Heading Half Block */
.heading-half {
  margin: 0 !important;
  padding: 0 !important;
  background-color: #F7F7F5;
}

.heading-half__container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-start;
}

.heading-half__content {
  width: 720px;
  max-width: 100%;
  min-height: 804px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 120px 58px;
}

/* When heading-half sits next to another block inside a wp:columns layout,
   compensate for the Switzer font's tall ascender so the visual top of the
   title aligns with the neighbouring block's icon top edge, and shift the
   icons row up so it aligns with the neighbouring block's tab text bottom. */
.wp-block-column .heading-half__content {
  padding-top: 78px;
  padding-bottom: 138px;
}

.heading-half__hero-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.heading-half__title {
  font-family: 'Switzer', var(--font-heading, sans-serif);
  font-size: 82px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  margin: 0;
  color: #000000;
}

.heading-half__break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.heading-half__part {
  display: inline-block;
}

.heading-half__part--dark {
  color: var(--color-text, #171717);
}

.heading-half__part--light {
  color: #bbbab6;
}

.heading-half__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000000;
  margin: 0;
}

.heading-half__part--primary {
  color: var(--color-primary, #e1ff04);
}

.heading-half__part--secondary {
  color: var(--color-secondary, #ffb2e8);
}

.heading-half__part--accent {
  color: var(--color-accent, #bab2fe);
}


/* Icons */
.heading-half__icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 30px;
  width: 246px;
  height: 62px;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.heading-half__icon {
  width: 62px;
  height: 62px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000000;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.heading-half__icon svg {
  width: 100%;
  height: 100%;
}

/* Alignment Support */
.heading-half.alignwide .heading-half__container {
  max-width: 100%;
}

.heading-half.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

.heading-half.alignfull .heading-half__container {
  max-width: var(--container-max, 1200px);
}

/* Responsive */
@media (max-width: 900px) {
  .heading-half__content {
    max-width: 70%;
    padding: 80px 40px;
    min-height: auto;
  }
  
  .heading-half__title {
    font-size: 56px;
    letter-spacing: -2.8px;
  }
  
  .heading-half__description {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .heading-half__icons {
    gap: 20px;
  }
  
  .heading-half__icon {
    width: 48px;
    height: 48px;
  }
}

@media (max-width: 768px) {
  .heading-half__content {
    max-width: 100%;
    padding: 60px 30px;
    min-height: auto;
  }
  
  .heading-half__title {
    font-size: 42px;
    letter-spacing: -2.1px;
  }
  
  .heading-half__description {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
  
  .heading-half__icons {
    gap: 20px;
  }
  
  .heading-half__icon {
    width: 48px;
    height: 48px;
  }
}





/* == 30-components/inquiry.css == */
/* Inquiry Block */
.block-inquiry {
  background: #000000;
  color: #ffffff;
  padding: 120px 58px;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 724px;
  display: flex;
  flex-direction: column;
  gap: 50px;
}

/* Header: Scrolling Title + Icons */
.block-inquiry__header {
  background: #000000;
  padding: 0;
  overflow: hidden;
  position: relative;
  flex: none;
}

.block-inquiry__header-scroll {
  display: flex;
  align-items: center;
  gap: 40px;
  white-space: nowrap;
  animation: scroll-left 30s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.block-inquiry__header-text {
  font-family: 'Manrope', var(--font-sans);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #FFFFFF;
}

.block-inquiry__header-icon {
  width: clamp(36px, 5vw, 72px);
  height: clamp(36px, 5vw, 72px);
  line-height: 1;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.block-inquiry__header-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Content: Form + Submit */
.block-inquiry__content {
  background: transparent;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.block-inquiry__inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 42px;
  gap: 60px;
  width: 1324px;
  max-width: 100%;
  height: 344px;
  background: #FFFFFF;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.block-inquiry__content-inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 60px;
  width: 1240px;
  height: 260px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

/* Left: Form Fields (White Background) */
.block-inquiry__form-wrapper {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 30px;
  width: 590px;
  height: 255px;
  flex: none;
  order: 0;
  flex-grow: 1;
}

/* Right: Submit Section (Black Background) */
.block-inquiry__submit-wrapper {
  background: #000000;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  padding: 25px;
  gap: 40px;
  width: 590px;
  height: 260px;
  flex: none;
  order: 1;
  flex-grow: 1;
  position: relative;
}

.block-inquiry__submit-title {
  font-family: 'Switzer', var(--font-sans);
  font-size: 42px;
  font-weight: 500;
  font-style: normal;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0;
  width: 100%;
  height: 46px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.block-inquiry__submit-button {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  border: 1.68px solid #FFFFFF;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-inquiry__submit-button svg {
  width: 20px;
  height: 20px;
  color: #FFFFFF;
}

.block-inquiry__submit-button:hover {
  background: #FFFFFF;
  transform: scale(1.05);
}

.block-inquiry__submit-button:hover svg {
  color: #000000;
}

/* Submit wrapper hover effect */
.block-inquiry__submit-wrapper {
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.block-inquiry__submit-wrapper:hover {
  background: var(--button-hover-color, #333333);
}

/* Contact Form 7 Styling */
.block-inquiry__form-wrapper .wpcf7-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 30px;
  width: 590px;
  height: 255px;
}

.block-inquiry__form-wrapper .wpcf7-form > p {
  margin: 0;
  width: 100%;
}

/* Row with 2 columns */
.block-inquiry__form-wrapper .inquiry-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 20px;
  width: 590px;
  height: 65px;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.block-inquiry__form-wrapper .inquiry-col {
  display: flex;
  width: 285px;
  height: 65px;
  flex: none;
  flex-grow: 1;
  border-bottom: 1px solid #BBBAB6;
  padding: 10px 10px 20px;
  box-sizing: border-box;
  position: relative;
}

/* Full width field wrapper */
.block-inquiry__form-wrapper .inquiry-full {
  width: 590px;
  height: 65px;
  border-bottom: 1px solid #BBBAB6;
  padding: 10px 10px 20px;
  box-sizing: border-box;
  display: flex;
  position: relative;
}

/* Field wrapper with border bottom */
.block-inquiry__form-wrapper label {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 0;
  font-weight: 400;
  font-style: normal;
  line-height: 140%;
  color: transparent;
  position: relative;
  flex: 1;
  overflow: hidden;
}

.block-inquiry__form-wrapper label > * {
  font-size: 18px;
  color: #000000;
}

/* ── Whole field is clickable ───────────────────────────────────────────────
   The control is only ~25px tall inside a 65px box, so the padding zone around
   it wasn't clickable. A small delegated click handler (cf7-antispam.js,
   setupBoxClickToFocus) focuses the input when the box is clicked; this cursor
   hint signals the affordance. */
.block-inquiry__form-wrapper .inquiry-col,
.block-inquiry__form-wrapper .inquiry-full:not(.inquiry-checkboxes):not(.inquiry-other-field) {
  cursor: text;
}
.block-inquiry__form-wrapper .inquiry-col:has(select),
.block-inquiry__form-wrapper .inquiry-full.inquiry-select {
  cursor: pointer;
}

.block-inquiry__form-wrapper .wpcf7-form-control-wrap {
  display: flex;
  align-items: flex-start;
  flex: 1;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.block-inquiry__form-wrapper input[type="text"],
.block-inquiry__form-wrapper input[type="email"],
.block-inquiry__form-wrapper input[type="tel"],
.block-inquiry__form-wrapper textarea,
.block-inquiry__form-wrapper .wpcf7-text,
.block-inquiry__form-wrapper .wpcf7-email,
.block-inquiry__form-wrapper .wpcf7-tel,
.block-inquiry__form-wrapper .wpcf7-textarea,
.block-inquiry__form-wrapper input,
.block-inquiry__form-wrapper textarea {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: 'Helvetica', Arial, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 140% !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  opacity: 1 !important;
  outline: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 25px !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
}

.block-inquiry__form-wrapper input:focus,
.block-inquiry__form-wrapper textarea:focus {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

.block-inquiry__form-wrapper input:not(:placeholder-shown),
.block-inquiry__form-wrapper textarea:not(:placeholder-shown) {
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
}

/* Textarea wrapper */
.block-inquiry__form-wrapper .inquiry-full {
  height: auto;
  min-height: 65px;
}

.block-inquiry__form-wrapper textarea {
  height: 50px;            /* grows with content via JS; was clipped at 50px */
  min-height: 50px !important;
  max-height: 140px !important;
  resize: none !important;
  overflow-y: auto !important;
}

.block-inquiry__form-wrapper input::placeholder,
.block-inquiry__form-wrapper textarea::placeholder,
.block-inquiry__form-wrapper .wpcf7-text::placeholder,
.block-inquiry__form-wrapper .wpcf7-email::placeholder,
.block-inquiry__form-wrapper .wpcf7-tel::placeholder,
.block-inquiry__form-wrapper .wpcf7-textarea::placeholder {
  color: #757472 !important;
  opacity: 1 !important;
}

.block-inquiry__form-wrapper input:focus,
.block-inquiry__form-wrapper textarea:focus {
  outline: none;
}

.block-inquiry__form-wrapper label:has(input:focus),
.block-inquiry__form-wrapper label:has(textarea:focus) {
  border-bottom-color: #000000;
}

/* Hide default submit button visually but keep it accessible */
.block-inquiry__form-wrapper input[type="submit"],
.block-inquiry__form-wrapper .wpcf7-submit {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Form validation messages — pinned under each field, single line, right aligned */
.block-inquiry__form-wrapper .wpcf7-not-valid-tip {
  color: #F237A6;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Helvetica', Arial, sans-serif;
  display: block;
  position: absolute;
  bottom: 2px;
  left: 10px;
  right: 10px;
  width: calc(100% - 20px);
  max-width: calc(100% - 20px);
  margin: 0;
  padding: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-align: right;
}

.block-inquiry__form-wrapper .wpcf7-response-output {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  font-family: var(--font-sans);
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
}

.block-inquiry__form-wrapper .wpcf7-mail-sent-ok {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

/* Hide CF7 summary boxes — field-level tips show validation errors, and the
   JS success/failure overlay handles sent/failed states. */
.block-inquiry .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry__form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry .wpcf7 form.invalid .wpcf7-response-output,
.block-inquiry .wpcf7 form.unaccepted .wpcf7-response-output,
.block-inquiry .wpcf7 form.payment-required .wpcf7-response-output,
.block-inquiry__form-wrapper .wpcf7-validation-errors,
.block-inquiry__form-wrapper .wpcf7-mail-sent-ng {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Invalid input styling */
.block-inquiry__form-wrapper input.wpcf7-not-valid,
.block-inquiry__form-wrapper textarea.wpcf7-not-valid {
  border-bottom-color: #F237A6 !important;
}

/* Success State - Background with selected color, centered message */
.block-inquiry__inner.form-success {
  background-color: var(--button-hover-color, #ffc0cb) !important;
  min-height: 400px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 40px !important;
  position: relative !important;
}

.inquiry-success-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  padding: 60px 40px;
  max-width: 800px;
  width: 90%;
  /* Was z-index:1000 — equal to the fixed header, so the message painted THROUGH
     the open megamenu. It only needs to sit above its own (hidden) form, so keep
     it low and below the header/megamenu. */
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

.inquiry-success-message.visible {
  opacity: 1;
}

.inquiry-success-message h2 {
  font-family: 'Switzer', var(--font-sans);
  font-size: 48px;
  font-weight: 500;
  color: #000;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.2;
  letter-spacing: -2.4px;
}

/* Responsive */
@media (max-width: 1500px) {
  .block-inquiry {
    width: 100%;
    padding: 100px 40px;
    height: auto;
    min-height: 724px;
  }
  
  .block-inquiry__inner {
    width: 100%;
    max-width: 1324px;
  }
  
  .block-inquiry__content-inner {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .block-inquiry {
    padding: 60px 30px;
    gap: 40px;
    min-height: auto;
  }
  
  .block-inquiry__header-scroll {
    gap: 30px;
  }
  
  .block-inquiry__inner {
    width: 100%;
    height: auto;
    padding: 30px;
    gap: 0;
    background: #FFFFFF;
  }
  
  .block-inquiry__content-inner {
    flex-direction: column;
    width: 100%;
    height: auto;
    gap: 0;
  }
  
  .block-inquiry__form-wrapper {
    width: 100%;
    height: auto;
    padding: 0;
    background: #FFFFFF;
    overflow: hidden;
  }
  
  .block-inquiry__form-wrapper .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .block-inquiry__submit-wrapper {
    width: 100%;
    height: auto;
    min-height: 80px;
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    margin-top: 0;
    background: #FFFFFF;
    border-top: 1px solid #BBBAB6;
  }
  
  .block-inquiry__submit-title {
    display: none;
  }
  
  .block-inquiry__submit-button {
    position: relative;
    top: auto;
    right: auto;
    transform: none;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid #000000;
    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
  }
  
  .block-inquiry__submit-button:hover {
    background: #333333;
  }
  
  .block-inquiry__submit-button svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
    width: 20px;
    height: 20px;
  }
  
  .block-inquiry__submit-button:hover svg {
    color: #FFFFFF;
    stroke: #FFFFFF;
  }
  
  .block-inquiry__form-wrapper .inquiry-row {
    flex-direction: column;
    height: auto;
    gap: 0;
    width: 100%;
    max-width: 100%;
  }
  
  .block-inquiry__form-wrapper .inquiry-col {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
  
  .block-inquiry__form-wrapper .inquiry-full {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .block-inquiry {
    padding: 40px 20px;
    gap: 30px;
  }
  
  .block-inquiry__header-scroll {
    gap: 20px;
  }
  
  .block-inquiry__inner {
    padding: 24px;
  }
  
  .block-inquiry__submit-wrapper {
    padding: 16px;
    min-height: 70px;
  }
  
  .block-inquiry__submit-button {
    width: 50px;
    height: 50px;
  }
  
  .block-inquiry__submit-button svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .block-inquiry {
    padding: 30px 16px;
    gap: 24px;
  }
  
  .block-inquiry__inner {
    padding: 20px;
  }
  
  .block-inquiry__submit-wrapper {
    padding: 12px;
    min-height: 60px;
  }
  
  .block-inquiry__submit-button {
    width: 45px;
    height: 45px;
  }
  
  .block-inquiry__submit-button svg {
    width: 16px;
    height: 16px;
  }
  
  .inquiry-success-message {
    padding: 25px 16px;
  }
  
  .inquiry-success-message h2 {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
}

/* Success message responsive styles */
@media (max-width: 1024px) {
  .inquiry-success-message h2 {
    font-size: 42px;
    letter-spacing: -2.1px;
  }
}

@media (max-width: 768px) {
  .inquiry-success-message {
    padding: 40px 24px;
  }
  
  .inquiry-success-message h2 {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
}

@media (max-width: 640px) {
  .inquiry-success-message {
    padding: 30px 20px;
  }
  
  .inquiry-success-message h2 {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
}


/* == 30-components/inquiry-2.css == */
/* Inquiry 2 Block - Static Title Version */

/* Reset and Base Styles */
.block-inquiry-2 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.block-inquiry-2 {
    position: relative;
    width: 100%;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    margin: 0 !important;
}

/* Main Wrapper */
.block-inquiry-2__wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background-color: #000;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 120px 58px 0 58px;
    overflow: hidden;
}

/* Header Section */
.block-inquiry-2__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.block-inquiry-2__header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.block-inquiry-2__title-line-1 {
    display: flex;
    align-items: center;
}

.block-inquiry-2__title-line-1 p {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    text-align: center;
    color: #757472;
    white-space: pre;
}

.block-inquiry-2__title-line-2 {
    display: flex;
    gap: 30px;
    align-items: center;
}

.block-inquiry-2__title-line-2 p {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    white-space: pre;
}

.block-inquiry-2__icon-x,
.block-inquiry-2__icon-asterisk {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

.block-inquiry-2__subheading {
    margin-top: 50px;
    max-width: 900px;
    text-align: center;
}

.block-inquiry-2__subheading p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

@media (max-width: 768px) {
    .block-inquiry-2__subheading {
        margin-top: 30px;
        padding: 0 20px;
    }

    .block-inquiry-2__subheading p {
        font-size: 22px;
    }
}

/* Form Wrapper */
.block-inquiry-2__form-wrapper {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    margin-bottom: 120px;
}

.block-inquiry-2__form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.block-inquiry-2__form-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 42px;
    width: 100%;
}

/* Form Fields and Submit Section Layout */
.block-inquiry-2__form-content > div {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    width: 100%;
}

.block-inquiry-2__form-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

/* Form Rows */
.block-inquiry-2__form-row {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

/* Input Fields */
.block-inquiry-2__input-field {
    flex: 1;
    position: relative;
    border-bottom: 1px solid #bbbab6;
    min-width: 0;
}

.block-inquiry-2__input-field.full-width {
    width: 100%;
}

.block-inquiry-2__input-field input,
.block-inquiry-2__input-field textarea {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px 10px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    color: #757472;
    background: transparent;
}

.block-inquiry-2__input-field input::placeholder,
.block-inquiry-2__input-field textarea::placeholder {
    color: #757472;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

.block-inquiry-2__input-field textarea {
    resize: vertical;
    min-height: 62px;
}

/* Submit Section */
.block-inquiry-2__submit-section {
    flex: 0 1 auto;
    max-width: 450px;
    background-color: #000;
    height: 260px;
    min-width: 280px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

.block-inquiry-2__submit-section:hover {
    background-color: var(--button-hover-color, #333333);
}

.block-inquiry-2__submit-content {
    display: flex;
    height: 260px;
    align-items: flex-end;
    padding: 25px;
    width: 100%;
}

.block-inquiry-2__submit-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
}

.block-inquiry-2__arrow-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.block-inquiry-2__submit-section:hover .block-inquiry-2__arrow-icon {
    transform: translate(4px, -4px);
}

.block-inquiry-2__submit-text {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -2.1px;
    text-transform: uppercase;
    color: #fff;
    min-width: 100%;
    width: min-content;
}

/* Contact Form 7 Styling */
.block-inquiry-2__form-fields .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.block-inquiry-2__form-fields .wpcf7-form > p {
    margin: 0;
    width: 100%;
}

/* Row with 2 columns */
.block-inquiry-2__form-fields .inquiry-row {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    height: 65px;
    overflow: hidden;
}

.block-inquiry-2__form-fields .inquiry-col {
    flex: 1;
    border-bottom: 1px solid #BBBAB6;
    padding: 20px 10px;
    height: 65px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}

/* Full width field wrapper */
.block-inquiry-2__form-fields .inquiry-full {
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid #BBBAB6;
    padding: 20px 10px;
    height: auto;            /* grow with the message textarea instead of clipping it */
    min-height: 65px;
    overflow: visible;
    position: relative;
}

/* Field wrapper with border bottom */
.block-inquiry-2__form-fields label {
    display: flex;
    width: 100%;
    max-width: 100%;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 0;
    color: transparent;
    position: relative;
    flex: 1;
    align-items: flex-start;
    overflow: hidden;
}

.block-inquiry-2__form-fields label > * {
    font-size: 18px;
    color: #000000;
}

/* ── Whole field is clickable ───────────────────────────────────────────────
   The control is only ~25px tall inside a 65px box, so the padding zone around
   it wasn't clickable. A small delegated click handler (cf7-antispam.js,
   setupBoxClickToFocus) focuses the input when the box is clicked; this cursor
   hint signals the affordance. */
.block-inquiry-2__form-fields .inquiry-col,
.block-inquiry-2__form-fields .inquiry-full:not(.inquiry-checkboxes):not(.inquiry-other-field) {
    cursor: text;
}
.block-inquiry-2__form-fields .inquiry-col:has(select),
.block-inquiry-2__form-fields .inquiry-full.inquiry-select {
    cursor: pointer;
}

.block-inquiry-2__form-fields .wpcf7-form-control-wrap {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.block-inquiry-2__form-fields input[type="text"],
.block-inquiry-2__form-fields input[type="email"],
.block-inquiry-2__form-fields input[type="tel"],
.block-inquiry-2__form-fields textarea,
.block-inquiry-2__form-fields .wpcf7-text,
.block-inquiry-2__form-fields .wpcf7-email,
.block-inquiry-2__form-fields .wpcf7-tel,
.block-inquiry-2__form-fields .wpcf7-textarea,
.block-inquiry-2__form-fields input,
.block-inquiry-2__form-fields textarea {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #757472 !important;
    -webkit-text-fill-color: #757472 !important;
    opacity: 1 !important;
    outline: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 25px !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

.block-inquiry-2__form-fields input:focus,
.block-inquiry-2__form-fields textarea:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.block-inquiry-2__form-fields input:not(:placeholder-shown),
.block-inquiry-2__form-fields textarea:not(:placeholder-shown) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.block-inquiry-2__form-fields textarea {
    height: 25px;            /* single-line look initially; JS grows it as you type */
    min-height: 25px !important;
    max-height: 140px !important;
    resize: none !important;
    overflow-y: auto !important;
}

.block-inquiry-2__form-fields input::placeholder,
.block-inquiry-2__form-fields textarea::placeholder,
.block-inquiry-2__form-fields .wpcf7-text::placeholder,
.block-inquiry-2__form-fields .wpcf7-email::placeholder,
.block-inquiry-2__form-fields .wpcf7-tel::placeholder,
.block-inquiry-2__form-fields .wpcf7-textarea::placeholder {
    color: #757472 !important;
    opacity: 1 !important;
}

/* Hide default submit button visually but keep it accessible */
.block-inquiry-2__form-fields input[type="submit"],
.block-inquiry-2__form-fields .wpcf7-submit {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Form validation messages - inline under each field, single line, right aligned */
.block-inquiry-2__form-fields .wpcf7-not-valid-tip {
    color: #F237A6 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    display: block !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 0 10px 0 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
}

/* Hide CF7 validation box completely - we use inline errors instead */
.block-inquiry-2 .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-2__form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-2__form-fields .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-2 .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
div.block-inquiry-2 div.wpcf7-validation-errors,
div.block-inquiry-2 div.wpcf7 div.wpcf7-response-output.wpcf7-validation-errors {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Keep success message visible */
.block-inquiry-2 .wpcf7-response-output.wpcf7-mail-sent-ok {
    display: block !important;
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 0 0 !important;
}

/* Hide mail failed message - we show success screen instead */
.block-inquiry-2 .wpcf7-response-output.wpcf7-mail-sent-ng {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Extra strong selectors to hide validation errors box - override CF7 defaults */
.block-inquiry-2 .wpcf7 form.invalid .wpcf7-response-output,
.block-inquiry-2 .wpcf7 form.unaccepted .wpcf7-response-output,
.block-inquiry-2 .wpcf7 form.payment-required .wpcf7-response-output,
.block-inquiry-2 .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-2__form-fields .wpcf7 form.invalid .wpcf7-response-output,
.block-inquiry-2__form-fields .wpcf7 form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
span.wpcf7-form-control-wrap + .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-2 * .wpcf7-validation-errors {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.block-inquiry-2__form-fields .wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-sans);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.block-inquiry-2__form-fields .wpcf7-mail-sent-ok {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.block-inquiry-2__form-fields .wpcf7-mail-sent-ng {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b !important;
}

/* Invalid input styling */
.block-inquiry-2__form-fields input.wpcf7-not-valid,
.block-inquiry-2__form-fields textarea.wpcf7-not-valid {
    border-bottom-color: #F237A6 !important;
}

.block-inquiry-2__form-fields .inquiry-col.has-error,
.block-inquiry-2__form-fields .inquiry-full.has-error {
    border-bottom-color: #F237A6;
}

/* Validation placeholder styling */
.block-inquiry-2__form-fields input.show-validation-placeholder::placeholder,
.block-inquiry-2__form-fields textarea.show-validation-placeholder::placeholder {
    color: #F237A6 !important;
    font-weight: 500;
}

/* Success State - Background with selected color, centered message */
.block-inquiry-2__form-wrapper.form-success {
    background-color: var(--button-hover-color, #ffc0cb);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

/* On success, fully remove the form container (its width otherwise lingers and
   pushes the success message off-centre). Only the message remains → centered. */
.block-inquiry-2__form-wrapper.form-success .block-inquiry-2__form-container {
    display: none;
}

.block-inquiry-2__success-message {
    text-align: center;
    padding: 60px 40px;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.block-inquiry-2__success-message h2 {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2.4px;
    text-transform: uppercase;
    color: #ffffff;
    margin-bottom: 20px;
}

.block-inquiry-2__success-message p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* ===== MOBILE: 768px and below ===== */
@media (max-width: 768px) {
    /* Reduce the large bottom margin of the form wrapper */
    .block-inquiry-2__form-wrapper {
        margin-bottom: 60px;
    }

    /* Ensure title text wraps and doesn't overflow */
    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Make inquiry column heights auto so stacked rows don't clip content */
    .block-inquiry-2__form-fields .inquiry-col {
        height: auto;
        min-height: 60px;
        overflow: visible;
    }

    /* Ensure the form content > direct div wrapper stacks on mobile */
    .block-inquiry-2__form-content > div {
        flex-direction: column;
        gap: 0;
    }

    /* Submit section full-width and auto height on mobile.
       Remove border-top: the last form field already has border-bottom,
       so two borders would appear back-to-back. */
    .block-inquiry-2__submit-section {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-top: none !important;
    }
}

/* Responsive Design */
@media (max-width: 1440px) {
    .block-inquiry-2__wrapper {
        width: 100%;
        max-width: 1440px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 42px;
        letter-spacing: -2.1px;
    }
}

@media (max-width: 1024px) {
    .block-inquiry-2__wrapper {
        padding: 80px 40px;
    }

    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 60px;
        letter-spacing: -3px;
    }

    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 48px;
        height: 48px;
    }

    .block-inquiry-2__submit-text {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    
    .block-inquiry-2__success-message {
        padding: 50px 30px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
    }
    
    .block-inquiry-2__success-message p {
        font-size: 16px;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .block-inquiry-2__wrapper {
        padding: 80px 24px;
        gap: 40px;
    }

    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 32px;
        letter-spacing: -1.6px;
        white-space: normal;
        word-break: break-word;
    }

    .block-inquiry-2__title-line-2 {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 42px;
        height: 42px;
    }

    .block-inquiry-2__form-content {
        padding: 30px;
    }

    .block-inquiry-2__form-content > div {
        flex-direction: column;
        gap: 0;
    }
    
    .block-inquiry-2__form-fields .wpcf7-form {
        flex-direction: column;
        gap: 0;
    }
    
    .block-inquiry-2__form-fields .inquiry-row {
        flex-direction: column;
        gap: 0;
        height: auto;
    }

    .block-inquiry-2__form-fields .inquiry-col {
        width: 100%;
    }
    
    /* Textarea wrapper - make taller on mobile */
    .block-inquiry-2__form-fields .inquiry-full {
        width: 100%;
        height: auto;
        min-height: 100px;
        padding: 15px 10px;
    }
    
    /* Textarea field - allow 3 rows */
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-textarea {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 200px !important;
        resize: vertical !important;
        overflow: auto !important;
        line-height: 1.5 !important;
    }

    .block-inquiry-2__submit-section {
        width: 100%;
        max-width: 100%;
        background: #FFFFFF;
        border-top: 1px solid #BBBAB6;
        height: auto;
        min-height: 100px;
        position: relative;
        margin-top: 0;
    }

    .block-inquiry-2__submit-content {
        height: auto;
        min-height: 100px;
        padding: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .block-inquiry-2__submit-content > div {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: auto;
    }
    
    .block-inquiry-2__submit-text {
        display: none;
    }
    
    .block-inquiry-2__arrow-icon {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        background: #000000;
        border: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10;
    }
    
    .block-inquiry-2__arrow-icon:hover {
        background: var(--button-hover-color, #333333);
        transform: scale(1.05);
    }
    
    .block-inquiry-2__arrow-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .block-inquiry-2__success-message {
        padding: 40px 24px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
        margin-bottom: 15px;
    }
    
    .block-inquiry-2__success-message p {
        font-size: 16px;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .block-inquiry-2__wrapper {
        padding: 60px 20px;
        gap: 35px;
    }

    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 26px;
        letter-spacing: -1.3px;
    }

    .block-inquiry-2__title-line-2 {
        gap: 16px;
    }

    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 32px;
        height: 32px;
    }

    .block-inquiry-2__form-content {
        padding: 24px;
    }
    
    /* Textarea wrapper */
    .block-inquiry-2__form-fields .inquiry-full {
        min-height: 95px;
        padding: 14px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-textarea {
        height: 65px !important;
        min-height: 65px !important;
    }

    .block-inquiry-2__submit-content {
        padding: 22px;
        min-height: 90px;
    }

    .block-inquiry-2__arrow-icon {
        width: 56px;
        height: 56px;
    }

    .block-inquiry-2__arrow-icon svg {
        width: 30px;
        height: 30px;
    }

    .block-inquiry-2__success-message h2 {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .block-inquiry-2__wrapper {
        padding: 60px 18px;
        gap: 32px;
    }
    
    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 24px;
        letter-spacing: -1.2px;
    }
    
    .block-inquiry-2__title-line-2 {
        gap: 14px;
    }
    
    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 28px;
        height: 28px;
    }

    .block-inquiry-2__form-content {
        padding: 20px;
    }
    
    .block-inquiry-2__form-fields input[type="text"],
    .block-inquiry-2__form-fields input[type="email"],
    .block-inquiry-2__form-fields input[type="tel"],
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-text,
    .block-inquiry-2__form-fields .wpcf7-email,
    .block-inquiry-2__form-fields .wpcf7-tel,
    .block-inquiry-2__form-fields .wpcf7-textarea,
    .block-inquiry-2__form-fields input,
    .block-inquiry-2__form-fields textarea {
        font-size: 16px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-2__form-fields .inquiry-full {
        min-height: 90px;
        padding: 14px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-textarea {
        height: 60px !important;
        min-height: 60px !important;
    }
    
    .block-inquiry-2__submit-content {
        padding: 20px;
        min-height: 90px;
    }
    
    .block-inquiry-2__arrow-icon {
        width: 52px;
        height: 52px;
    }
    
    .block-inquiry-2__arrow-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .block-inquiry-2__success-message {
        padding: 30px 18px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 28px;
        letter-spacing: -1.4px;
        margin-bottom: 12px;
    }
    
    .block-inquiry-2__success-message p {
        font-size: 15px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .block-inquiry-2__wrapper {
        padding: 50px 16px;
        gap: 30px;
    }
    
    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 22px;
        letter-spacing: -1.1px;
    }
    
    .block-inquiry-2__title-line-2 {
        gap: 12px;
    }
    
    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 26px;
        height: 26px;
    }
    
    .block-inquiry-2__form-content {
        padding: 18px;
    }
    
    .block-inquiry-2__form-fields input[type="text"],
    .block-inquiry-2__form-fields input[type="email"],
    .block-inquiry-2__form-fields input[type="tel"],
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-text,
    .block-inquiry-2__form-fields .wpcf7-email,
    .block-inquiry-2__form-fields .wpcf7-tel,
    .block-inquiry-2__form-fields .wpcf7-textarea,
    .block-inquiry-2__form-fields input,
    .block-inquiry-2__form-fields textarea {
        font-size: 15px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-2__form-fields .inquiry-full {
        min-height: 88px;
        padding: 13px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-textarea {
        height: 60px !important;
        min-height: 60px !important;
    }
    
    .block-inquiry-2__submit-content {
        padding: 18px;
        min-height: 85px;
    }
    
    .block-inquiry-2__arrow-icon {
        width: 48px;
        height: 48px;
    }
    
    .block-inquiry-2__arrow-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .block-inquiry-2__success-message {
        padding: 28px 16px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 26px;
        letter-spacing: -1.3px;
        margin-bottom: 12px;
    }
    
    .block-inquiry-2__success-message p {
        font-size: 14px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .block-inquiry-2__wrapper {
        padding: 50px 14px;
        gap: 28px;
    }
    
    .block-inquiry-2__title-line-1 p,
    .block-inquiry-2__title-line-2 p {
        font-size: 20px;
        letter-spacing: -1px;
    }
    
    .block-inquiry-2__title-line-2 {
        gap: 10px;
    }
    
    .block-inquiry-2__icon-x,
    .block-inquiry-2__icon-asterisk {
        width: 22px;
        height: 22px;
    }
    
    .block-inquiry-2__form-content {
        padding: 16px;
    }
    
    .block-inquiry-2__form-fields input[type="text"],
    .block-inquiry-2__form-fields input[type="email"],
    .block-inquiry-2__form-fields input[type="tel"],
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-text,
    .block-inquiry-2__form-fields .wpcf7-email,
    .block-inquiry-2__form-fields .wpcf7-tel,
    .block-inquiry-2__form-fields .wpcf7-textarea,
    .block-inquiry-2__form-fields input,
    .block-inquiry-2__form-fields textarea {
        font-size: 14px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-2__form-fields .inquiry-full {
        min-height: 85px;
        padding: 12px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-2__form-fields textarea,
    .block-inquiry-2__form-fields .wpcf7-textarea {
        height: 58px !important;
        min-height: 58px !important;
    }
    
    .block-inquiry-2__submit-content {
        padding: 16px;
        min-height: 80px;
    }
    
    .block-inquiry-2__arrow-icon {
        width: 44px;
        height: 44px;
    }
    
    .block-inquiry-2__arrow-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .block-inquiry-2__success-message {
        padding: 25px 14px;
    }
    
    .block-inquiry-2__success-message h2 {
        font-size: 22px;
        letter-spacing: -1.1px;
        margin-bottom: 10px;
    }
    
    .block-inquiry-2__success-message p {
        font-size: 13px;
    }
}



/* == 30-components/inquiry-3.css == */
/* Inquiry 2 Block - Static Title Version */

/* Reset and Base Styles */
.block-inquiry-3 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Container */
.block-inquiry-3 {
    position: relative;
    width: 100%;
    background-color: #000;
    color: #fff;
    overflow-x: hidden;
    margin: 0 !important;
}

/* Main Wrapper */
.block-inquiry-3__wrapper {
    position: relative;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    background-color: #000;
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 120px 58px 0 58px;
    overflow: hidden;
}

/* Header Section */
.block-inquiry-3__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.block-inquiry-3__header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.block-inquiry-3__title-line-1 {
    display: flex;
    align-items: center;
}

.block-inquiry-3__title-line-1 p {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    text-align: center;
    color: #757472;
    white-space: pre;
}

.block-inquiry-3__title-line-2 {
    display: flex;
    gap: 30px;
    align-items: center;
}

.block-inquiry-3__title-line-2 p {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    white-space: pre;
}

.block-inquiry-3__icon-x,
.block-inquiry-3__icon-asterisk {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

.block-inquiry-3__subheading {
    margin-top: 50px;
    max-width: 900px;
    text-align: center;
}

.block-inquiry-3__subheading p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

@media (max-width: 768px) {
    .block-inquiry-3__subheading {
        margin-top: 30px;
        padding: 0 20px;
    }

    .block-inquiry-3__subheading p {
        font-size: 22px;
    }
}

/* Form Wrapper */
.block-inquiry-3__form-wrapper {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    margin-bottom: 120px;
}

.block-inquiry-3__form-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.block-inquiry-3__form-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 42px;
    width: 100%;
}

/* Form Fields and Submit Section Layout — fields left, black CTA box on the
   right stretched to the full height of the form (align-items: stretch) */
.block-inquiry-3__form-content > div {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: stretch;
    width: 100%;
}

.block-inquiry-3__form-fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-width: 0;
}

/* Form Rows */
.block-inquiry-3__form-row {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
}

/* Input Fields */
.block-inquiry-3__input-field {
    flex: 1;
    position: relative;
    border-bottom: 1px solid #bbbab6;
    min-width: 0;
}

.block-inquiry-3__input-field.full-width {
    width: 100%;
}

.block-inquiry-3__input-field input,
.block-inquiry-3__input-field textarea {
    width: 100%;
    border: none;
    outline: none;
    padding: 20px 10px;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    color: #757472;
    background: transparent;
}

.block-inquiry-3__input-field input::placeholder,
.block-inquiry-3__input-field textarea::placeholder {
    color: #757472;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
}

.block-inquiry-3__input-field textarea {
    resize: vertical;
    min-height: 62px;
}

/* Submit Section — vertical box on the right, full form height */
.block-inquiry-3__submit-section {
    flex: 0 0 auto;
    width: 360px;
    max-width: 450px;
    min-width: 280px;
    background-color: #000;
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    cursor: pointer;
    transition: background-color 0.3s ease;
    position: relative;
    z-index: 1;
}

.block-inquiry-3__submit-section:hover {
    background-color: var(--button-hover-color, #333333);
}

.block-inquiry-3__submit-content {
    display: flex;
    height: 100%;
    min-height: 260px;
    align-items: flex-end;
    padding: 25px;
    width: 100%;
}

.block-inquiry-3__submit-content > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    min-width: 0;
}

.block-inquiry-3__arrow-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.block-inquiry-3__submit-section:hover .block-inquiry-3__arrow-icon {
    transform: translate(4px, -4px);
}

.block-inquiry-3__submit-text {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -2.1px;
    text-transform: uppercase;
    color: #fff;
    min-width: 100%;
    width: min-content;
}

/* Contact Form 7 Styling */
.block-inquiry-3__form-fields .wpcf7-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.block-inquiry-3__form-fields .wpcf7-form > p {
    margin: 0;
    width: 100%;
}

/* Row with 2 columns */
.block-inquiry-3__form-fields .inquiry-row {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    height: 65px;
    overflow: hidden;
}

.block-inquiry-3__form-fields .inquiry-col {
    flex: 1;
    border-bottom: 1px solid #BBBAB6;
    padding: 20px 10px;
    height: 65px;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}

/* Full width field wrapper */
.block-inquiry-3__form-fields .inquiry-full {
    width: 100%;
    max-width: 100%;
    border-bottom: 1px solid #BBBAB6;
    padding: 20px 10px;
    height: auto;            /* grow with the message textarea instead of clipping it */
    min-height: 65px;
    overflow: visible;
    position: relative;
}

/* Field wrapper with border bottom */
.block-inquiry-3__form-fields label {
    display: flex;
    width: 100%;
    max-width: 100%;
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 0;
    color: transparent;
    position: relative;
    flex: 1;
    align-items: flex-start;
    overflow: hidden;
}

.block-inquiry-3__form-fields label > * {
    font-size: 18px;
    color: #000000;
}

/* ── Whole field is clickable ───────────────────────────────────────────────
   The control is only ~25px tall inside a 65px box, so the padding zone around
   it wasn't clickable. A small delegated click handler (cf7-antispam.js,
   setupBoxClickToFocus) focuses the input / opens the select when the box is
   clicked; these cursor hints signal the affordance. */
.block-inquiry-3__form-fields .inquiry-col,
.block-inquiry-3__form-fields .inquiry-full:not(.inquiry-checkboxes):not(.inquiry-other-field) {
    cursor: text;
}
.block-inquiry-3__form-fields .inquiry-col:has(select),
.block-inquiry-3__form-fields .inquiry-full.inquiry-select:not(.inquiry-checkboxes):not(.inquiry-other-field) {
    cursor: pointer;
}

.block-inquiry-3__form-fields .wpcf7-form-control-wrap {
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.block-inquiry-3__form-fields input[type="text"],
.block-inquiry-3__form-fields input[type="email"],
.block-inquiry-3__form-fields input[type="tel"],
.block-inquiry-3__form-fields textarea,
.block-inquiry-3__form-fields .wpcf7-text,
.block-inquiry-3__form-fields .wpcf7-email,
.block-inquiry-3__form-fields .wpcf7-tel,
.block-inquiry-3__form-fields .wpcf7-textarea,
.block-inquiry-3__form-fields input,
.block-inquiry-3__form-fields textarea {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: #757472 !important;
    -webkit-text-fill-color: #757472 !important;
    opacity: 1 !important;
    outline: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 25px !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

.block-inquiry-3__form-fields input:focus,
.block-inquiry-3__form-fields textarea:focus {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.block-inquiry-3__form-fields input:not(:placeholder-shown),
.block-inquiry-3__form-fields textarea:not(:placeholder-shown) {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.block-inquiry-3__form-fields textarea {
    height: 25px;            /* single-line look initially; JS grows it as you type */
    min-height: 25px !important;
    max-height: 140px !important;
    resize: none !important;
    overflow-y: auto !important;
}

.block-inquiry-3__form-fields input::placeholder,
.block-inquiry-3__form-fields textarea::placeholder,
.block-inquiry-3__form-fields .wpcf7-text::placeholder,
.block-inquiry-3__form-fields .wpcf7-email::placeholder,
.block-inquiry-3__form-fields .wpcf7-tel::placeholder,
.block-inquiry-3__form-fields .wpcf7-textarea::placeholder {
    color: #757472 !important;
    opacity: 1 !important;
}

/* Hide default submit button visually but keep it accessible */
.block-inquiry-3__form-fields input[type="submit"],
.block-inquiry-3__form-fields .wpcf7-submit {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Form validation messages - inline under each field, single line, right aligned */
.block-inquiry-3__form-fields .wpcf7-not-valid-tip {
    color: #F237A6 !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    font-family: 'Helvetica', Arial, sans-serif !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    display: block !important;
    position: absolute !important;
    bottom: 2px !important;
    left: 10px !important;
    right: 10px !important;
    padding: 0 10px 0 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    text-align: right !important;
}

/* Hide CF7 validation box completely - we use inline errors instead */
.block-inquiry-3 .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-3__form-wrapper .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-3__form-fields .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-3 .wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
div.block-inquiry-3 div.wpcf7-validation-errors,
div.block-inquiry-3 div.wpcf7 div.wpcf7-response-output.wpcf7-validation-errors {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Keep success message visible */
.block-inquiry-3 .wpcf7-response-output.wpcf7-mail-sent-ok {
    display: block !important;
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 0 0 !important;
}

/* Hide mail failed message - we show success screen instead */
.block-inquiry-3 .wpcf7-response-output.wpcf7-mail-sent-ng {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Extra strong selectors to hide validation errors box - override CF7 defaults */
.block-inquiry-3 .wpcf7 form.invalid .wpcf7-response-output,
.block-inquiry-3 .wpcf7 form.unaccepted .wpcf7-response-output,
.block-inquiry-3 .wpcf7 form.payment-required .wpcf7-response-output,
.block-inquiry-3 .wpcf7 form .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-3__form-fields .wpcf7 form.invalid .wpcf7-response-output,
.block-inquiry-3__form-fields .wpcf7 form .wpcf7-response-output,
.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors,
span.wpcf7-form-control-wrap + .wpcf7-response-output.wpcf7-validation-errors,
.block-inquiry-3 * .wpcf7-validation-errors {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.block-inquiry-3__form-fields .wpcf7-response-output {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    font-family: var(--font-sans);
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.block-inquiry-3__form-fields .wpcf7-mail-sent-ok {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.block-inquiry-3__form-fields .wpcf7-mail-sent-ng {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b !important;
}

/* Invalid input styling */
.block-inquiry-3__form-fields input.wpcf7-not-valid,
.block-inquiry-3__form-fields textarea.wpcf7-not-valid {
    border-bottom-color: #F237A6 !important;
}

.block-inquiry-3__form-fields .inquiry-col.has-error,
.block-inquiry-3__form-fields .inquiry-full.has-error {
    border-bottom-color: #F237A6;
}

/* Validation placeholder styling */
.block-inquiry-3__form-fields input.show-validation-placeholder::placeholder,
.block-inquiry-3__form-fields textarea.show-validation-placeholder::placeholder {
    color: #F237A6 !important;
    font-weight: 500;
}

/* Success State - Background with selected color, centered message */
.block-inquiry-3__form-wrapper.form-success {
    background-color: var(--button-hover-color, #ffc0cb);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.block-inquiry-3__success-message {
    text-align: center;
    padding: 60px 40px;
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
}

.block-inquiry-3__success-message h2 {
    font-family: 'Switzer', var(--font-sans);
    font-weight: 500;
    font-size: 48px;
    line-height: 1.2;
    letter-spacing: -2.4px;
    text-transform: uppercase;
    color: #000;
    margin-bottom: 20px;
}

.block-inquiry-3__success-message p {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

/* ===== MOBILE: 768px and below ===== */
@media (max-width: 768px) {
    /* Reduce the large bottom margin of the form wrapper */
    .block-inquiry-3__form-wrapper {
        margin-bottom: 60px;
    }

    /* Ensure title text wraps and doesn't overflow */
    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    /* Make inquiry column heights auto so stacked rows don't clip content */
    .block-inquiry-3__form-fields .inquiry-col {
        height: auto;
        min-height: 60px;
        overflow: visible;
    }

    /* Ensure the form content > direct div wrapper stacks on mobile */
    .block-inquiry-3__form-content > div {
        flex-direction: column;
        gap: 0;
    }

    /* Submit section full-width and auto height on mobile.
       Remove border-top: the last form field already has border-bottom,
       so two borders would appear back-to-back. */
    .block-inquiry-3__submit-section {
        width: 100%;
        max-width: 100%;
        height: auto;
        border-top: none !important;
    }
}

/* Responsive Design */
@media (max-width: 1440px) {
    .block-inquiry-3__wrapper {
        width: 100%;
        max-width: 1440px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 42px;
        letter-spacing: -2.1px;
    }
}

@media (max-width: 1024px) {
    .block-inquiry-3__wrapper {
        padding: 80px 40px;
    }

    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 60px;
        letter-spacing: -3px;
    }

    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 48px;
        height: 48px;
    }

    .block-inquiry-3__submit-text {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
    
    .block-inquiry-3__success-message {
        padding: 50px 30px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
    }
    
    .block-inquiry-3__success-message p {
        font-size: 16px;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .block-inquiry-3__wrapper {
        padding: 80px 24px;
        gap: 40px;
    }

    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 32px;
        letter-spacing: -1.6px;
        white-space: normal;
        word-break: break-word;
    }

    .block-inquiry-3__title-line-2 {
        gap: 20px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 42px;
        height: 42px;
    }

    .block-inquiry-3__form-content {
        padding: 30px;
    }

    .block-inquiry-3__form-content > div {
        flex-direction: column;
        gap: 0;
    }
    
    .block-inquiry-3__form-fields .wpcf7-form {
        flex-direction: column;
        gap: 0;
    }
    
    .block-inquiry-3__form-fields .inquiry-row {
        flex-direction: column;
        gap: 0;
        height: auto;
    }

    .block-inquiry-3__form-fields .inquiry-col {
        width: 100%;
    }
    
    /* Textarea wrapper - make taller on mobile */
    .block-inquiry-3__form-fields .inquiry-full {
        width: 100%;
        height: auto;
        min-height: 100px;
        padding: 15px 10px;
    }
    
    /* Textarea field - allow 3 rows */
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-textarea {
        height: 70px !important;
        min-height: 70px !important;
        max-height: 200px !important;
        resize: vertical !important;
        overflow: auto !important;
        line-height: 1.5 !important;
    }

    .block-inquiry-3__submit-section {
        width: 100%;
        max-width: 100%;
        background: #FFFFFF;
        border-top: 1px solid #BBBAB6;
        height: auto;
        min-height: 100px;
        position: relative;
        margin-top: 0;
    }

    .block-inquiry-3__submit-content {
        height: auto;
        min-height: 100px;
        padding: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .block-inquiry-3__submit-content > div {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        height: auto;
    }
    
    .block-inquiry-3__submit-text {
        display: none;
    }
    
    .block-inquiry-3__arrow-icon {
        position: relative;
        top: auto;
        right: auto;
        transform: none;
        background: #000000;
        border: none;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        z-index: 10;
    }
    
    .block-inquiry-3__arrow-icon:hover {
        background: var(--button-hover-color, #333333);
        transform: scale(1.05);
    }
    
    .block-inquiry-3__arrow-icon svg {
        width: 32px;
        height: 32px;
    }
    
    .block-inquiry-3__success-message {
        padding: 40px 24px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 36px;
        letter-spacing: -1.8px;
        margin-bottom: 15px;
    }
    
    .block-inquiry-3__success-message p {
        font-size: 16px;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .block-inquiry-3__wrapper {
        padding: 60px 20px;
        gap: 35px;
    }

    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 26px;
        letter-spacing: -1.3px;
    }

    .block-inquiry-3__title-line-2 {
        gap: 16px;
    }

    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 32px;
        height: 32px;
    }

    .block-inquiry-3__form-content {
        padding: 24px;
    }
    
    /* Textarea wrapper */
    .block-inquiry-3__form-fields .inquiry-full {
        min-height: 95px;
        padding: 14px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-textarea {
        height: 65px !important;
        min-height: 65px !important;
    }

    .block-inquiry-3__submit-content {
        padding: 22px;
        min-height: 90px;
    }

    .block-inquiry-3__arrow-icon {
        width: 56px;
        height: 56px;
    }

    .block-inquiry-3__arrow-icon svg {
        width: 30px;
        height: 30px;
    }

    .block-inquiry-3__success-message h2 {
        font-size: 32px;
        letter-spacing: -1.6px;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .block-inquiry-3__wrapper {
        padding: 60px 18px;
        gap: 32px;
    }
    
    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 24px;
        letter-spacing: -1.2px;
    }
    
    .block-inquiry-3__title-line-2 {
        gap: 14px;
    }
    
    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 28px;
        height: 28px;
    }

    .block-inquiry-3__form-content {
        padding: 20px;
    }
    
    .block-inquiry-3__form-fields input[type="text"],
    .block-inquiry-3__form-fields input[type="email"],
    .block-inquiry-3__form-fields input[type="tel"],
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-text,
    .block-inquiry-3__form-fields .wpcf7-email,
    .block-inquiry-3__form-fields .wpcf7-tel,
    .block-inquiry-3__form-fields .wpcf7-textarea,
    .block-inquiry-3__form-fields input,
    .block-inquiry-3__form-fields textarea {
        font-size: 16px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-3__form-fields .inquiry-full {
        min-height: 90px;
        padding: 14px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-textarea {
        height: 60px !important;
        min-height: 60px !important;
    }
    
    .block-inquiry-3__submit-content {
        padding: 20px;
        min-height: 90px;
    }
    
    .block-inquiry-3__arrow-icon {
        width: 52px;
        height: 52px;
    }
    
    .block-inquiry-3__arrow-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .block-inquiry-3__success-message {
        padding: 30px 18px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 28px;
        letter-spacing: -1.4px;
        margin-bottom: 12px;
    }
    
    .block-inquiry-3__success-message p {
        font-size: 15px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .block-inquiry-3__wrapper {
        padding: 50px 16px;
        gap: 30px;
    }
    
    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 22px;
        letter-spacing: -1.1px;
    }
    
    .block-inquiry-3__title-line-2 {
        gap: 12px;
    }
    
    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 26px;
        height: 26px;
    }
    
    .block-inquiry-3__form-content {
        padding: 18px;
    }
    
    .block-inquiry-3__form-fields input[type="text"],
    .block-inquiry-3__form-fields input[type="email"],
    .block-inquiry-3__form-fields input[type="tel"],
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-text,
    .block-inquiry-3__form-fields .wpcf7-email,
    .block-inquiry-3__form-fields .wpcf7-tel,
    .block-inquiry-3__form-fields .wpcf7-textarea,
    .block-inquiry-3__form-fields input,
    .block-inquiry-3__form-fields textarea {
        font-size: 15px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-3__form-fields .inquiry-full {
        min-height: 88px;
        padding: 13px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-textarea {
        height: 60px !important;
        min-height: 60px !important;
    }
    
    .block-inquiry-3__submit-content {
        padding: 18px;
        min-height: 85px;
    }
    
    .block-inquiry-3__arrow-icon {
        width: 48px;
        height: 48px;
    }
    
    .block-inquiry-3__arrow-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .block-inquiry-3__success-message {
        padding: 28px 16px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 26px;
        letter-spacing: -1.3px;
        margin-bottom: 12px;
    }
    
    .block-inquiry-3__success-message p {
        font-size: 14px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .block-inquiry-3__wrapper {
        padding: 50px 14px;
        gap: 28px;
    }
    
    .block-inquiry-3__title-line-1 p,
    .block-inquiry-3__title-line-2 p {
        font-size: 20px;
        letter-spacing: -1px;
    }
    
    .block-inquiry-3__title-line-2 {
        gap: 10px;
    }
    
    .block-inquiry-3__icon-x,
    .block-inquiry-3__icon-asterisk {
        width: 22px;
        height: 22px;
    }
    
    .block-inquiry-3__form-content {
        padding: 16px;
    }
    
    .block-inquiry-3__form-fields input[type="text"],
    .block-inquiry-3__form-fields input[type="email"],
    .block-inquiry-3__form-fields input[type="tel"],
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-text,
    .block-inquiry-3__form-fields .wpcf7-email,
    .block-inquiry-3__form-fields .wpcf7-tel,
    .block-inquiry-3__form-fields .wpcf7-textarea,
    .block-inquiry-3__form-fields input,
    .block-inquiry-3__form-fields textarea {
        font-size: 14px !important;
    }
    
    /* Textarea wrapper */
    .block-inquiry-3__form-fields .inquiry-full {
        min-height: 85px;
        padding: 12px 10px;
    }
    
    /* Textarea field */
    .block-inquiry-3__form-fields textarea,
    .block-inquiry-3__form-fields .wpcf7-textarea {
        height: 58px !important;
        min-height: 58px !important;
    }
    
    .block-inquiry-3__submit-content {
        padding: 16px;
        min-height: 80px;
    }
    
    .block-inquiry-3__arrow-icon {
        width: 44px;
        height: 44px;
    }
    
    .block-inquiry-3__arrow-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .block-inquiry-3__success-message {
        padding: 25px 14px;
    }
    
    .block-inquiry-3__success-message h2 {
        font-size: 22px;
        letter-spacing: -1.1px;
        margin-bottom: 10px;
    }
    
    .block-inquiry-3__success-message p {
        font-size: 13px;
    }
}


/* ============================================
   Inquiry 3 — Audit form specific additions
   (form sits on a WHITE background → dark text)
   ============================================ */

/* Collapse the empty CF7 response box so it does not create a big gap
   before the privacy line (we use inline errors + JS success instead). */
.block-inquiry-3__form-fields .wpcf7-response-output:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

/* Collapse the trailing wpautop <p> that wraps the (off-screen) submit
   button — it added ~32px + a 30px flex gap before the privacy line.
   The submit stays clickable via JS (.wpcf7-submit.click()). */
.block-inquiry-3__form-fields .wpcf7-form > p:has(.wpcf7-submit) {
  display: none !important;
}

/* Privacy line below the form fields — single line, tight to last field */
.block-inquiry-3__privacy {
  margin: -16px 10px 0;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8a8986;
  max-width: none;
  white-space: nowrap;
}

/* Checkbox group wrapper — compact, matched roughly to a single field row
   height (like Nimi / Telefon). Override the .inquiry-full clipping. */
.block-inquiry-3__form-fields .inquiry-full.inquiry-checkboxes {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 11px 10px !important;
}

/* Checkbox control wrapper — let it size naturally (the base rule sets
   display:flex; overflow:hidden which inflated the group height) */
.block-inquiry-3__form-fields .inquiry-checkboxes .wpcf7-form-control-wrap {
  display: block !important;
  overflow: visible !important;
  flex: none !important;
  width: 100% !important;
}

/* wpautop wraps the label + checkboxes in a <p> (with a stray <br> and a
   24px bottom margin) — flatten it so the group stays compact (~1 field row) */
.block-inquiry-3__form-fields .inquiry-checkboxes p {
  margin: 0 !important;
  padding: 0 !important;
}
.block-inquiry-3__form-fields .inquiry-checkboxes br {
  display: none !important;
}

/* Group label ("Millised kanalid on täna kasutusel?") — same size as fields */
.block-inquiry-3__form-fields .inquiry-field-label {
  display: block;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.2;
  color: #757472;
  margin-bottom: 12px;
}

/* "Muu" reveal field — hidden until the Muu checkbox is ticked */
.block-inquiry-3__form-fields .inquiry-full.inquiry-other-field {
  display: none;
}
.block-inquiry-3__form-fields .inquiry-full.inquiry-other-field.is-visible {
  display: flex;
}

/* The checkbox list itself */
.block-inquiry-3__form-fields .inquiry-checkboxes .wpcf7-checkbox {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Each option = span.wpcf7-list-item > input + span.wpcf7-list-item-label
   (CF7 renders NO <label> element here) */
.block-inquiry-3__form-fields .inquiry-checkboxes .wpcf7-list-item {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* Reveal the per-option text (defends against any inherited transparent/0 styles) */
.block-inquiry-3__form-fields .inquiry-checkboxes .wpcf7-list-item-label {
  font-family: 'Helvetica', Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  opacity: 1 !important;
  overflow: visible !important;
  white-space: nowrap;
}

/* Custom checkbox box — border identical to the field separator lines
   (1px solid #BBBAB6); checked = black fill with a white tick */
.block-inquiry-3__form-fields .inquiry-checkboxes input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  flex: 0 0 18px;
  border: 1px solid #BBBAB6 !important;
  border-radius: 0 !important;
  background-color: #fff !important;
  cursor: pointer;
  position: static !important;
  z-index: auto !important;
  margin: 0 !important;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.block-inquiry-3__form-fields .inquiry-checkboxes input[type="checkbox"]:checked {
  background-color: #000 !important;
  border-color: #000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2 5 8.7l4.5-5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-size: 12px 12px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Select dropdowns — styled like the text inputs (transparent, grey, chevron) */
.block-inquiry-3__form-fields select,
.block-inquiry-3__form-fields .wpcf7-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  outline: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 25px !important;
  padding: 0 26px 0 0 !important;
  margin: 0 !important;
  font-family: 'Helvetica', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  color: #757472 !important;
  cursor: pointer;
  box-shadow: none !important;
  position: relative;
  z-index: 10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23757472' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right center !important;
  background-size: 14px 8px !important;
}

.block-inquiry-3__form-fields select option {
  color: #000000;
}

/* Privacy line: keep one-line on wide desktop, but allow wrapping on
   narrower viewports where the form column is too narrow for one line. */
@media (max-width: 1200px) {
  .block-inquiry-3__privacy {
    white-space: normal;
  }
}


/* == 30-components/consultation.css == */
/* Consultation Block */

.block-consultation {
  background-color: #000000;
  overflow: hidden;
  position: relative;
}

/* Hero Section */
.block-consultation__hero {
  background-color: #000000;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.block-consultation__hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px 58px;
  gap: 40px;
  position: relative;
  z-index: 2;
}

/* Background Pattern */
.block-consultation__background-pattern {
  position: absolute;
  left: 346.29px;
  top: -101px;
  width: 747.706px;
  height: 747.706px;
  pointer-events: none;
  z-index: 1;
}

/* Star Icon */
.block-consultation__star-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

/* Text Content */
.block-consultation__text-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
  color: white;
}

.block-consultation__heading {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  white-space: nowrap;
  color: white;
  margin: 0;
}

.block-consultation__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  max-width: 486px;
  color: white;
  margin: 0;
}

.block-consultation__description p {
  margin: 0;
}

/* CTA Button */
.block-consultation__button {
  background-color: white;
  color: black;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 12px 12px 26px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.block-consultation__button:hover {
  transform: scale(1.05);
}

.block-consultation__button-text {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.6px;
  white-space: nowrap;
  color: black;
}

.block-consultation__arrow-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Ticker Banner */
.block-consultation__ticker {
  background-color: #f237a6;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.block-consultation__ticker-wrapper {
  display: flex;
  align-items: center;
  padding: 20px 0;
  white-space: nowrap;
}

.block-consultation__ticker-content {
  display: flex;
  align-items: center;
  gap: 50px;
  animation: consultation-ticker-scroll 20s linear infinite;
  padding: 0 50px;
}

.block-consultation__ticker-text {
  color: white;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  white-space: nowrap;
  flex-shrink: 0;
}

.block-consultation__ticker-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@keyframes consultation-ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsive */
@media (max-width: 768px) {
  .block-consultation__hero-content {
    padding: 80px 24px;
  }

  .block-consultation__heading {
    font-size: 28px;
    letter-spacing: -1.4px;
    white-space: normal;
  }

  .block-consultation__description {
    font-size: 16px;
    max-width: 100%;
  }

  .block-consultation__button-text {
    font-size: 18px;
  }

  .block-consultation__background-pattern {
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
  }

  .block-consultation__ticker-text {
    font-size: 16px;
  }

  .block-consultation__ticker-content {
    gap: 30px;
    padding: 0 30px;
  }
}

@media (max-width: 480px) {
  .block-consultation__hero-content {
    padding: 60px 20px;
    gap: 30px;
  }

  .block-consultation__heading {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .block-consultation__description {
    font-size: 15px;
  }

  .block-consultation__button {
    padding: 10px 10px 10px 20px;
    gap: 12px;
  }

  .block-consultation__button-text {
    font-size: 16px;
  }

  .block-consultation__arrow-icon {
    width: 28px;
    height: 28px;
  }

  .block-consultation__star-icon {
    width: 48px;
    height: 48px;
  }

  .block-consultation__ticker-content {
    gap: 20px;
  }

  .block-consultation__ticker-text {
    font-size: 14px;
  }
}


/* == 30-components/ten-steps.css == */
/**
 * 10 Steps Carousel Component
 * Shows 3 steps at a time with navigation
 */

.block-ten-steps {
  background: #000000;
  padding: 150px 0px;
  overflow: hidden;
}

.ten-steps__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 58px;
}

.ten-steps__header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  gap: 40px;
  margin-bottom: 70px;
}

.ten-steps__heading {
  font-family: "Outfit", sans-serif;
  font-size: 82px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -2px;
  font-kerning: normal;
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 30px;
}

.ten-steps__heading-word {
  display: inline;
}

.ten-steps__heading-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ten-steps__heading-icon svg {
  width: 60px;
  height: 60px;
  display: block;
}

.ten-steps__heading-break {
  width: 100%;
  height: 0;
  flex-basis: 100%;
}

/* Carousel Wrapper */
.ten-steps__carousel-wrapper {
  position: relative;
}

/* Carousel Container */
.ten-steps__carousel {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  scroll-behavior: smooth;
  flex-wrap: nowrap;
  overflow: visible;
  width: 1382px;
}

@media (max-width: 767px) {
  .ten-steps__carousel {
    flex-wrap: wrap;
    width: 100%;
  }
}

/* Step Card */
.ten-steps__card {
  background: #000000;
  border: 1px solid #FFFFFF;
  padding: 25px;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  width: 428px;
  height: 320px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: none;
  isolation: isolate;
}

/* Hover effect - white background, black text, show description */
.ten-steps__card:hover {
  background: #FFFFFF;
  border-color: #FFFFFF;
  transform: translateY(-4px);
}

.ten-steps__card:hover .ten-steps__card-heading {
  color: #000000;
}

.ten-steps__card:hover .ten-steps__card-description {
  color: #000000;
}

/* Card Inner */
.ten-steps__card-inner {
  flex: 1;
  min-height: 0;
}

/* Step Number — positioned relative to .ten-steps__card */
.ten-steps__number {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 79px;
  height: 81px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFFFFF;
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #000000;
  z-index: 2;
  transition: background 0.3s ease;
}

.ten-steps__card:hover .ten-steps__number {
  background: var(--hover-color, #E1FF04);
  color: #000000;
}

/* Card Heading — same top as number, guaranteed same line */
.ten-steps__card-heading {
  position: absolute;
  top: 25px;
  left: 25px;
  right: 114px;
  font-family: "Outfit", sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 110%;
  letter-spacing: -1.6px;
  color: #FFFFFF;
  margin: 0;
  text-transform: uppercase;
  transition: color 0.3s ease;
  z-index: 0;
}

/* Card Description — positioned relative to .ten-steps__card */
.ten-steps__card-description {
  position: absolute;
  bottom: 25px;
  left: 25px;
  right: 25px;
  font-family: "Helvetica", Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0;
  color: #FFFFFF;
  margin: 0;
  transition: all 0.3s ease;
  z-index: 1;
}

/* Navigation */
.ten-steps__navigation {
  display: flex;
  gap: 26px;
  justify-content: flex-end;
  width: 230px;
  height: 102px;
  align-items: center;
  flex: none;
  order: 1;
}

.ten-steps__nav-btn {
  width: 102px;
  height: 102px;
  border-radius: 50%;
  border: 2.75676px solid #757472;
  background: transparent;
  color: #757472;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
  box-sizing: border-box;
}

.ten-steps__nav-btn:hover {
  border-color: #FFFFFF;
  color: #FFFFFF;
  background: transparent;
}

.ten-steps__nav-btn--next {
  border-color: #FFFFFF;
  color: #FFFFFF;
}

.ten-steps__nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: #757472;
  color: #757472;
}

.ten-steps__nav-btn:disabled:hover {
  background: transparent;
  border-color: #757472;
  color: #757472;
}

.ten-steps__nav-btn svg {
  width: 32px;
  height: 26px;
}

/* Responsive */
@media (max-width: 767px) {
  .block-ten-steps {
    padding: 3rem 1rem;
  }

  .ten-steps__container {
    max-width: 100%;
    padding: 0 24px;
  }

  .ten-steps__header {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }

  .ten-steps__heading {
    font-size: 42px;
  }

  .ten-steps__heading-icon svg {
    width: 42px;
    height: 42px;
  }

  .ten-steps__carousel {
    flex-direction: column;
    gap: 1.5rem;
    /* Cards stack vertically on mobile — neutralise the carousel's
       JS translateX so the stack never shifts off-screen */
    transform: none !important;
  }

  /* Carousel becomes a simple vertical stack on mobile — the prev/next
     arrows are desktop-only navigation and are not needed here */
  .ten-steps__navigation {
    display: none !important;
  }

  .ten-steps__card {
    width: 100%;
    height: auto;
    min-height: 280px;
    padding: 20px;
  }

  /* On mobile card-inner becomes the positioning context so top/right:0 aligns with 20px padding */
  .ten-steps__card-inner {
    position: relative;
    min-height: 240px;
  }

  .ten-steps__number {
    top: 0;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 14px;
  }

  .ten-steps__card-heading {
    top: 0;
    left: 0;
    right: 50px;
    font-size: 28px;
  }

  .ten-steps__card-description {
    bottom: 0;
    left: 0;
    right: 0;
  }

  .ten-steps__card:hover .ten-steps__card-description {
    color: #000000;
  }

  .ten-steps__navigation {
    justify-content: center;
    width: 100%;
    margin-top: 2rem;
  }

  .ten-steps__nav-btn {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .block-ten-steps {
    padding: 2.5rem 1rem;
  }

  .ten-steps__container {
    padding: 0 20px;
  }

  .ten-steps__heading {
    font-size: 36px;
    /* row-gap halved (20→10): the full-width heading-break sits on its own flex
       line, so row-gap applies twice between the two words. Effective gap 40→20px. */
    gap: 10px 20px;
  }

  .ten-steps__card {
    min-height: 260px;
    padding: 18px;
  }

  .ten-steps__card-inner {
    min-height: 224px;
  }

  .ten-steps__number {
    width: 35px;
    height: 35px;
    font-size: 12px;
  }

  .ten-steps__card-heading {
    right: 45px;
    font-size: 26px;
  }

  .ten-steps__card-description {
    font-size: 16px;
  }

  .ten-steps__card:hover .ten-steps__card-description {
    color: #000000;
  }
}

@media (max-width: 375px) {
  .ten-steps__heading {
    font-size: 32px;
    gap: 8px 16px;
  }

  .ten-steps__number {
    width: 30px;
    height: 30px;
    font-size: 11px;
  }

  .ten-steps__card-heading {
    right: 40px;
    font-size: 22px;
  }

  .ten-steps__card-description {
    font-size: 15px;
  }

  .ten-steps__card:hover .ten-steps__card-description {
    color: #000000;
  }
}



/* == 30-components/select-text.css == */
/* Select Text Block (Tabs) */
.select-text {
  margin: 0;
  padding: 0;
  border-radius: 0;
  overflow: visible;
}

.select-text__container {
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 67px;
  min-height: auto;
}

/* Content wrapper (Frame 99) */
.select-text__container > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  gap: 42px;
  width: 100%;
  max-width: 720px;
}

/* Top Icon (Starburst) */
.select-text__icon-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  color: #000000;
}

.select-text__icon-top svg {
  width: 42px !important;
  height: 42px !important;
  display: block;
}

.select-text__icon-top svg path {
  stroke: #000000;
  stroke-width: 1.4;
  fill: none;
}

/* Content Area */
.select-text__content-area {
  width: 100%;
  max-width: 720px;
  min-height: 240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.select-text__content {
  text-align: center;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #000000;
  width: 100%;
  transition: opacity 0.3s ease;
}

.select-text__content p {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

.select-text__content p + p {
  margin-top: 1rem;
}

/* Tabs Navigation (Frame 97) */
.select-text__tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  padding: 0;
  gap: 10px 40px;
  margin: 0 auto;
  width: 604px;
  max-width: 100%;
  height: 62px;
  flex: none;
}

/* Individual Tab (Frame 96) */
.select-text__tab {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
  flex: none;
  white-space: nowrap;
  text-decoration: none;
}

/* Tab square indicator (Rectangle 42) */
.select-text__tab::before {
  content: '';
  width: 8px;
  height: 8px;
  background: transparent;
  flex: none;
  transition: background 0.2s ease;
}

/* Tab text styling */
.select-text__tab {
  font-family: 'Switzer', var(--font-sans), sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  color: #BBBAB6;
}

/* Active tab */
.select-text__tab--active {
  color: #000000;
  text-decoration: underline;
}

.select-text__tab--active::before {
  background: #000000;
}

/* Hover state */
.select-text__tab:hover {
  color: #000000;
}

/* When inside a Gutenberg wp-block-column, match heading-half block height and
   push tabs to bottom so the two columns visually align at top and bottom. */
.wp-block-column > .select-text,
.wp-block-column > .wp-block-acf-select-text > .select-text,
.wp-block-column .wp-block-acf-select-text > .select-text {
  height: 100%;
}

.wp-block-column .select-text__container {
  min-height: 804px;
  height: 100%;
  justify-content: space-between;
  gap: 0;
}

/* Alignment Support */
.select-text.alignwide .select-text__container {
  max-width: 100%;
}

.select-text.alignfull {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-radius: 0;
}

.select-text.alignfull .select-text__container {
  max-width: var(--container-max, 1200px);
}

/* Responsive */
@media (max-width: 768px) {
  .select-text__container,
  .wp-block-column .select-text__container {
    padding: clamp(60px, 15vw, 120px) clamp(20px, 5vw, 58px);
    gap: clamp(40px, 10vw, 67px);
    min-height: auto;
    height: auto;
    justify-content: flex-start;
  }
  
  .select-text__container > div:first-child {
    width: 100%;
    gap: clamp(30px, 8vw, 42px);
  }
  
  .select-text__icon-top {
    width: clamp(32px, 8vw, 42px);
    height: clamp(32px, 8vw, 42px);
  }
  
  .select-text__icon-top svg {
    width: clamp(32px, 8vw, 42px) !important;
    height: clamp(32px, 8vw, 42px) !important;
  }
  
  .select-text__content-area {
    width: 100%;
    height: auto;
    min-height: 150px;
  }
  
  .select-text__content {
    font-size: clamp(30px, 6.5vw, 48px);
  }
  
  .select-text__tabs {
    width: 100%;
    height: auto;
    gap: 15px 20px;
  }
  
  .select-text__tab {
    font-size: clamp(16px, 4vw, 20px);
    line-height: clamp(20px, 5vw, 26px);
  }
}

@media (max-width: 480px) {
  .select-text__container {
    padding: 40px 20px;
    gap: 30px;
  }
  
  .select-text__container > div:first-child {
    gap: 24px;
  }
  
  .select-text__icon-top {
    width: 32px;
    height: 32px;
  }
  
  .select-text__icon-top svg {
    width: 32px !important;
    height: 32px !important;
  }
  
  .select-text__content {
    font-size: clamp(24px, 6vw, 32px);
  }
  
  .select-text__tabs {
    gap: 12px 16px;
  }
  
  .select-text__tab {
    font-size: 16px;
    line-height: 20px;
    gap: 8px;
  }
  
  .select-text__tab::before {
    width: 6px;
    height: 6px;
  }
}


/* == 30-components/spacer.css == */
/* Spacer Component */
/* Simple spacing element with adjustable height and optional background */

.block-spacer {
  display: block;
  width: 100%;
  flex-shrink: 0;
}

/* When inside column, maintain specified height */
.wp-block-column > .block-spacer {
  flex-grow: 0;
  flex-shrink: 0;
}






/* == 30-components/wide-picture.css == */
/* ========================================
   Wide Picture Block
   ======================================== */

.block-wide-picture {
    width: 100%;
    max-width: 100%;
}

.block-wide-picture__container {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--space-2, 1rem);
    padding-right: var(--space-2, 1rem);
}

.block-wide-picture__figure {
    margin: 0;
    width: 100%;
}

.block-wide-picture__image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Spacing Top */
.block-wide-picture.spacing-top-none {
    padding-top: 0;
}

.block-wide-picture.spacing-top-small {
    padding-top: 2rem;
}

.block-wide-picture.spacing-top-medium {
    padding-top: 4rem;
}

.block-wide-picture.spacing-top-large {
    padding-top: 6rem;
}

/* Spacing Bottom */
.block-wide-picture.spacing-bottom-none {
    padding-bottom: 0;
}

.block-wide-picture.spacing-bottom-small {
    padding-bottom: 2rem;
}

.block-wide-picture.spacing-bottom-medium {
    padding-bottom: 4rem;
}

.block-wide-picture.spacing-bottom-large {
    padding-bottom: 6rem;
}

/* Border Radius */
.block-wide-picture.radius-none .block-wide-picture__image {
    border-radius: 0;
}

.block-wide-picture.radius-small .block-wide-picture__image {
    border-radius: 8px;
}

.block-wide-picture.radius-medium .block-wide-picture__image {
    border-radius: 16px;
}

.block-wide-picture.radius-large .block-wide-picture__image {
    border-radius: 24px;
}

/* Shadow */
.block-wide-picture.has-shadow .block-wide-picture__image {
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

/* Caption */
.block-wide-picture__caption {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-muted, #6b7280);
    text-align: center;
    font-style: italic;
}

/* Responsive */
@media (max-width: 768px) {
    .block-wide-picture.spacing-top-small {
        padding-top: 1.5rem;
    }

    .block-wide-picture.spacing-top-medium {
        padding-top: 2.5rem;
    }

    .block-wide-picture.spacing-top-large {
        padding-top: 4rem;
    }

    .block-wide-picture.spacing-bottom-small {
        padding-bottom: 1.5rem;
    }

    .block-wide-picture.spacing-bottom-medium {
        padding-bottom: 2.5rem;
    }

    .block-wide-picture.spacing-bottom-large {
        padding-bottom: 4rem;
    }

    .block-wide-picture__container {
        padding-left: var(--space-1, 0.5rem);
        padding-right: var(--space-1, 0.5rem);
    }
}

/* Editor Styles */
.editor-styles-wrapper .block-wide-picture {
    margin-bottom: 2rem;
}

.editor-styles-wrapper .block-wide-picture__container {
    max-width: 100%;
}

/* ACF Block Placeholder */
.acf-block-placeholder {
    padding: 2rem;
    text-align: center;
    background: #f3f4f6;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
}

.acf-block-placeholder p {
    margin: 0;
    color: #6b7280;
    font-size: 1rem;
}


/* == 30-components/content-highlighted.css == */
/* Content with Highlighted Block */
.block-content-highlighted {
  background-color: #000000;
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-content-highlighted__container {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 58px;
  width: 100%;
  min-height: 804px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block-content-highlighted__content {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  width: 100%;
  max-width: 496px;
  margin: 0 auto;
}

.block-content-highlighted__icon-container {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-content-highlighted__icon-container svg {
  display: block;
  width: 100%;
  height: 100%;
}

.block-content-highlighted__text {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -1.8px;
  color: #757472;
  width: 100%;
}

.block-content-highlighted__text-highlight {
  color: #ffffff;
}

/* Responsive */
@media (max-width: 900px) {
  .block-content-highlighted__container {
    padding: 80px 40px;
    min-height: auto;
  }
  
  .block-content-highlighted__text {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
}

@media (max-width: 768px) {
  .block-content-highlighted__container {
    padding: 60px 30px;
    min-height: auto;
  }
  
  .block-content-highlighted__content {
    gap: 22px;
  }
  
  .block-content-highlighted__icon-container {
    width: 32px;
    height: 32px;
  }
  
  .block-content-highlighted__text {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
}



/* == 30-components/how-to-start.css == */
/* How to Start Block */
.how-to-start {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
}

.how-to-start__container {
  display: flex;
  width: 100%;
  min-height: 744px;
}

/* Left Section (Light) */
.how-to-start__section {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

.how-to-start__section--light {
  background-color: #f7f7f5;
}

.how-to-start__section--dark {
  background-color: #000000;
}

/* Light Section Content */
.how-to-start__content-light {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 120px 58px;
  height: 100%;
  max-width: 720px;
  margin-left: auto;
  box-sizing: border-box;
}

.how-to-start__hero-text {
  margin-top: -15px;
}

.how-to-start__title {
  margin-top: 0 !important;
}

.how-to-start__hero-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.how-to-start__title {
  font-family: 'Switzer', var(--font-heading, sans-serif);
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}

.how-to-start__title-part {
  display: inline;
}

.how-to-start__title-part--dark {
  color: #000000;
}

.how-to-start__title-part--light {
  color: #bbbab6;
}

.how-to-start__title-part--primary {
  color: var(--color-primary, #e1ff04);
}

.how-to-start__title-part--secondary {
  color: var(--color-secondary, #ffb2e8);
}

.how-to-start__title-part--accent {
  color: var(--color-accent, #bab2fe);
}

.how-to-start__title-break {
  flex: 0 0 100%;
  width: 100%;
  height: 0;
}

.how-to-start__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000000;
  margin: 0;
}

/* Icons Container */
.how-to-start__icons {
  display: flex;
  gap: 30px;
  align-items: center;
}

/* In text-only mode (Meiliturundus), push icons up slightly to align with text baseline */
.how-to-start__container:has(.how-to-start__content-dark--text-only) .how-to-start__icons {
  margin-bottom: 8px;
}

.how-to-start__icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-to-start__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Dark Section Content */
.how-to-start__content-dark {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 120px 58px;
  height: 100%;
  max-width: 720px;
  margin-right: auto;
  box-sizing: border-box;
}

/* Text-only mode: icon at top (120px padding-top), text flows below, last line 120px from bottom */
.how-to-start__content-dark--text-only {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 80px;
  height: auto;
}

.how-to-start__top-icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.how-to-start__top-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Main Content (Center) */
.how-to-start__main-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  text-align: center;
  width: 100%;
}

.how-to-start__main-title {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #ffffff;
  margin: -20px 0 0 0;
  white-space: nowrap;
}

.how-to-start__text-content {
  width: 100%;
  color: #BBBAB6;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
}

/* Text-only mode (e.g. Meiliturundus page) — larger font like Figma */
.how-to-start__content-dark--text-only .how-to-start__text-content {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
}

.how-to-start__text-content p {
  margin: 0 0 28px 0;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Text-only mode keeps tighter paragraph spacing */
.how-to-start__content-dark--text-only .how-to-start__text-content p {
  margin: 0 0 12px 0;
}

.how-to-start__text-content p:last-child {
  margin-bottom: 0;
}

/* <strong> = white color (no bold) */
.how-to-start__text-content strong {
  font-weight: 400;
  color: #ffffff;
}

/* <b> = bold (color inherits) */
.how-to-start__text-content b {
  font-weight: 700;
  color: inherit;
}

/* Combine for bold + white: <b><strong>tekst</strong></b> */
.how-to-start__text-content b strong,
.how-to-start__text-content strong b {
  font-weight: 700;
  color: #ffffff;
}

/* Navigation Tabs */
.how-to-start__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.how-to-start__tab {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.how-to-start__tab:hover {
  opacity: 0.8;
}

.how-to-start__tab-dot {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.how-to-start__tab--active .how-to-start__tab-dot {
  opacity: 1;
}

.how-to-start__tab-label {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.6px;
  color: #757472;
  white-space: nowrap;
  transition: color 0.3s ease, text-decoration 0.3s ease;
}

.how-to-start__tab--active .how-to-start__tab-label {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

/* Tab Content */
.how-to-start__tab-content {
  display: none;
}

.how-to-start__tab-content--active {
  display: block;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .how-to-start__container {
    flex-direction: column;
  }
  
  .how-to-start__section {
    min-height: 100vh;
  }
  
  .how-to-start__title {
    font-size: 56px;
    letter-spacing: -2.8px;
  }
  
  .how-to-start__description,
  .how-to-start__main-title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .how-to-start__main-title {
    white-space: normal;
  }
  
  .how-to-start__content-light,
  .how-to-start__content-dark {
    padding: 80px 40px;
  }
}

@media (max-width: 768px) {
  /* On phones the full-screen (100vh) panels leave huge empty gaps when the
     content is short. Let each section size to its content instead, and pack
     the content from the top rather than spreading it edge-to-edge. */
  .how-to-start__container {
    min-height: 0;
  }

  .how-to-start__section {
    min-height: 0;
  }

  .how-to-start__content-light,
  .how-to-start__content-dark {
    height: auto;
    justify-content: flex-start;
  }

  .how-to-start__title {
    font-size: 42px;
    letter-spacing: -2.1px;
  }
  
  .how-to-start__description,
  .how-to-start__main-title {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
  
  .how-to-start__text-content,
  .how-to-start__content-dark--text-only .how-to-start__text-content {
    font-size: 22px;
    letter-spacing: -1.1px;
  }

  .how-to-start__content-light,
  .how-to-start__content-dark {
    padding: 60px 30px;
  }
  
  .how-to-start__icons {
    gap: 20px;
    /* Desktop spreads text/icons apart with space-between on a full-height
       panel; once the panel is height:auto + flex-start on mobile the icons sit
       flush against the description. Add space so they don't run into the text. */
    margin-top: 40px;
  }

  .how-to-start__icon {
    width: 48px;
    height: 48px;
  }
  
  .how-to-start__tabs {
    gap: 8px 20px;
    /* Space the navigation tabs away from the text above — like the icons,
       they sit flush once the dark panel is height:auto + flex-start on mobile. */
    margin-top: 40px;
  }

  .how-to-start__tab-label {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .how-to-start__title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
  
  .how-to-start__description,
  .how-to-start__main-title {
    font-size: 18px;
    letter-spacing: -0.9px;
  }
  
  .how-to-start__text-content,
  .how-to-start__content-dark--text-only .how-to-start__text-content {
    font-size: 18px;
    letter-spacing: -0.9px;
  }

  .how-to-start__content-light,
  .how-to-start__content-dark {
    padding: 40px 20px;
    min-height: 0;
    height: auto;
    justify-content: flex-start;
  }

  .how-to-start__section {
    min-height: 0;
  }
  
  .how-to-start__icons {
    gap: 15px;
    margin-top: 28px;
  }

  .how-to-start__icon {
    width: 40px;
    height: 40px;
  }
  
  .how-to-start__top-icon {
    width: 32px;
    height: 32px;
  }
  
  .how-to-start__tabs {
    gap: 6px 15px;
    margin-top: 28px;
  }

  .how-to-start__tab-label {
    font-size: 16px;
  }
  
  .how-to-start__tab-dot {
    width: 6px;
    height: 6px;
  }
}



/* == 30-components/four-steps.css == */
/**
 * Four Steps Block Styles
 */

/* Container */
.block-four-steps {
    background-color: #f7f7f5;
    padding: 120px 58px;
    min-height: 834px;
    height: auto;
    /* Background spans full width ("infinite"); the inner .four-steps__container
       (max-width:1440) keeps the content contained. */
}

.four-steps__container {
    max-width: calc(1440px - 116px); /* 1324 content — same as header/megamenu/1vs2 (1440 minus 58px gutters); bg stays full width */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 82px;
}

/* In post content (.entry-content) the block's own side padding is zeroed by a
   shared `padding-inline: 0 !important` rule in site.css, which pushes the title,
   cards and descriptions edge-to-edge on mobile. Give the inner container its
   own horizontal breathing room in that context. */
@media (max-width: 820px) {
    .entry-content .block-four-steps .four-steps__container {
        padding-inline: 20px;
    }
}

@media (max-width: 393px) {
    .entry-content .block-four-steps .four-steps__container {
        padding-inline: 16px;
    }
}

/* Header */
.four-steps__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.four-steps__icon--left,
.four-steps__icon--right {
    width: 58px;
    height: 58px;
    flex-shrink: 0;
}

.four-steps__icon--left svg,
.four-steps__icon--right svg {
    width: 100%;
    height: 100%;
}

.four-steps__title {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    color: black;
    text-align: center;
    margin: 0;
}

/* Content Section */
.four-steps__content {
    display: flex;
    gap: 62px;
    align-items: flex-start;
}

/* Left Column - Card */
.four-steps__left-column {
    display: flex;
    flex-direction: column;
    gap: 22px;
    flex-shrink: 0;
}

.four-steps__card {
    background-color: black;
    width: 513px;
    height: 350px;
    position: relative;
    overflow: hidden;
}

.four-steps__card-background {
    position: absolute;
    width: 381.706px;
    height: 381.706px;
    left: 65.29px;
    top: -15.71px;
    transition: opacity 0.3s ease;
}

.four-steps__card-background svg {
    width: 100%;
    height: 100%;
}

.four-steps__card-number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    color: white;
    transition: opacity 0.3s ease;
}

.four-steps__card-description {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #141414;
    max-width: 513px;
    margin: 0;
    transition: opacity 0.3s ease;
}

/* Right Column - Steps */
.four-steps__right-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0; /* steps stack flush so 4 items fit exactly the card height (350px) */
}

.four-steps__step {
    display: flex;
    align-items: center;
    gap: 50px;
    padding: 26px 0; /* 4 × (26+35+26)=348px ≈ card 350px */
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

.four-steps__step--border {
    border-bottom: 1px solid #bbbab6;
}

.four-steps__step--highlighted {
    background-color: white;
    padding: 26px 0; /* same as regular items — pill width = separator line width */
    margin: 0;
    border-bottom: none !important;
}

/* Active state — pill stays in place, only inner content shifts */
.four-steps__step--active {
    background-color: white !important;
    padding: 26px 0 !important;
    margin: 0 !important;
    border-bottom: none !important;
}

/* On active/hover: shift number + text 20px right, pill stays put */
.four-steps__step--active .four-steps__step-number,
.four-steps__step--active .four-steps__step-text,
.four-steps__step--highlighted .four-steps__step-number,
.four-steps__step--highlighted .four-steps__step-text {
    transform: translateX(20px);
}

.four-steps__step-number,
.four-steps__step-text {
    transition: transform 0.3s ease;
}

.four-steps__step-number {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: #bbbab6;
    width: 60px;
    flex-shrink: 0;
}

.four-steps__step-text {
    font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-weight: 500;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: black;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .block-four-steps {
        padding: 80px 40px;
        height: auto;
        min-height: auto;
    }

    .four-steps__content {
        flex-direction: column;
        gap: 40px;
        /* Stretch columns to full width when stacked. The base rule uses
           align-items: flex-start (to top-align the two columns side-by-side on
           desktop); once stacked, flex-start makes each column shrink to its
           content width, leaving the step rows / highlight pill only ~64% wide
           with empty space on the right. Stretch makes the steps full width. */
        align-items: stretch;
    }

    .four-steps__card {
        width: 100%;
        max-width: 513px;
    }

    .four-steps__right-column {
        width: 100%;
    }

    .four-steps__card-description {
        max-width: 100%;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .block-four-steps {
        padding: 80px 30px;
        height: auto;
        min-height: auto;
    }

    .four-steps__container {
        gap: 50px;
    }

    /* Stack the header vertically on mobile: icon on top (centered), title in
       the middle, second icon at the bottom — all centered with an equal gap.
       (Was flex-wrap:wrap, which left the left icon stuck beside the wrapping
       title and dropped the second icon onto its own line.) */
    .four-steps__header {
        gap: 10px;
        flex-direction: column;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 50px;
        height: 50px;
    }

    .four-steps__title {
        font-size: 56px;
        letter-spacing: -2.8px;
    }

    .four-steps__card {
        width: 100%;
        max-width: 100%;
        height: 300px;
    }

    .four-steps__card-background {
        width: 300px;
        height: 300px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .four-steps__card-number {
        font-size: 64px;
    }

    .four-steps__card-description {
        font-size: 17px;
    }

    .four-steps__step {
        gap: 25px;
        padding: 25px 0;
    }

    .four-steps__step-number {
        font-size: 26px;
        width: 55px;
    }

    .four-steps__step-text {
        font-size: 26px;
        letter-spacing: -1.3px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 25px 0 !important;
        margin: 0 !important;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .block-four-steps {
        padding: 60px 20px;
    }

    .four-steps__container {
        gap: 40px;
    }

    .four-steps__header {
        gap: 7px;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 40px;
        height: 40px;
    }

    .four-steps__title {
        font-size: 26px;
        letter-spacing: -1.3px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 250px;
    }

    .four-steps__card-background {
        width: 250px;
        height: 250px;
    }

    .four-steps__card-number {
        font-size: 52px;
    }

    .four-steps__card-description {
        font-size: 16px;
    }

    .four-steps__step {
        gap: 20px;
        padding: 20px 0;
    }

    .four-steps__step-number {
        font-size: 22px;
        width: 50px;
    }

    .four-steps__step-text {
        font-size: 22px;
        letter-spacing: -1.1px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 20px 0 !important;
        margin: 0 !important;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .block-four-steps {
        padding: 60px 18px;
    }

    .four-steps__title {
        font-size: 22px;
        letter-spacing: -1.1px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 230px;
    }

    .four-steps__card-background {
        width: 230px;
        height: 230px;
    }

    .four-steps__card-number {
        font-size: 48px;
    }

    .four-steps__step-number {
        font-size: 20px;
        width: 45px;
    }

    .four-steps__step-text {
        font-size: 20px;
        letter-spacing: -1px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .block-four-steps {
        padding: 50px 16px;
    }

    .four-steps__container {
        gap: 35px;
    }

    .four-steps__icon--left,
    .four-steps__icon--right {
        width: 35px;
        height: 35px;
    }

    .four-steps__title {
        font-size: 20px;
        letter-spacing: -1px;
        overflow-wrap: anywhere;
    }

    .four-steps__card {
        height: 220px;
    }

    .four-steps__card-background {
        width: 220px;
        height: 220px;
    }

    .four-steps__card-number {
        font-size: 44px;
    }

    .four-steps__card-description {
        font-size: 15px;
    }

    .four-steps__step {
        gap: 15px;
        padding: 18px 0;
    }

    .four-steps__step-number {
        font-size: 18px;
        width: 40px;
    }

    .four-steps__step-text {
        font-size: 18px;
        letter-spacing: -0.9px;
    }

    .four-steps__step--highlighted,
    .four-steps__step--active {
        padding: 18px 0 !important;
        margin: 0 !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .block-four-steps {
        padding: 50px 14px;
    }

    .four-steps__title {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .four-steps__card {
        height: 200px;
    }

    .four-steps__card-background {
        width: 200px;
        height: 200px;
    }

    .four-steps__card-number {
        font-size: 40px;
    }

    .four-steps__card-description {
        font-size: 14px;
    }

    .four-steps__step-number {
        font-size: 16px;
        width: 35px;
    }

    .four-steps__step-text {
        font-size: 16px;
        letter-spacing: -0.8px;
    }
}


/* == 30-components/experience.css == */
/* ====================================
   Experience Block
   ==================================== */

.block-experience {
  width: 100%;
  background-color: white;
}

.block-experience__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  flex-direction: column;
  gap: 62px;
  align-items: flex-start;
}

/* Headline */
.block-experience__headline {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  max-width: 1324px;
  width: 100%;
  white-space: normal;
  margin: 0;
  text-align: left;
}

.block-experience__headline-gray {
  color: #bbbab6;
}

.block-experience__headline-black {
  color: black;
}

/* Content Wrapper */
.block-experience__content-wrapper {
  display: flex;
  gap: 62px;
  align-items: stretch;
}

/* Left Section */
.block-experience__left-section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 834px;
  gap: 62px;
  min-height: 428px;
}

/* Features */
.block-experience__features {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.block-experience__features-row {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}

.block-experience__feature-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  backdrop-filter: blur(20px);
  flex: 0 0 auto;
}

.block-experience__feature-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.block-experience__feature-text {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: black;
  width: 233px;
  margin: 0;
}

/* CTA Button */
.block-experience__cta-button {
  background-color: black;
  width: 100%;
  padding: 25px;
  cursor: pointer;
  transition: opacity 0.3s;
  text-decoration: none;
  display: block;
}

.block-experience__cta-button:hover {
  opacity: 0.9;
}

.block-experience__cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block-experience__cta-text {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: white;
  margin: 0;
}

.block-experience__arrow-icon {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
}

/* Right Section (Images) */
.block-experience__right-section {
  width: 428px;
  height: 428px;
  position: relative;
  flex-shrink: 0;
}

.block-experience__image {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.block-experience__image-1 {
  z-index: 1;
}

.block-experience__image-2 {
  z-index: 2;
  animation: fadeInOut 4s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/* Responsive design */
@media (max-width: 1400px) {
  .block-experience__headline {
    font-size: 60px;
    letter-spacing: -3px;
    width: 100%;
  }

  .block-experience__content-wrapper {
    flex-direction: column;
  }

  .block-experience__left-section {
    width: 100%;
  }

  .block-experience__right-section {
    width: 100%;
    max-width: 428px;
  }
}

@media (max-width: 900px) {
  .block-experience__container {
    padding: 60px 30px;
  }

  .block-experience__headline {
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .block-experience__features-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .block-experience__feature-item {
    width: 100%;
  }

  .block-experience__feature-text {
    width: 100%;
  }

  .block-experience__cta-text {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-experience__arrow-icon {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 600px) {
  .block-experience__container {
    padding: 40px 20px;
    gap: 40px;
  }

  .block-experience__headline {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .block-experience__left-section {
    gap: 40px;
  }

  .block-experience__cta-text {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .block-experience__cta-button {
    padding: 20px;
  }

  .block-experience__arrow-icon {
    width: 40px;
    height: 40px;
  }

  .block-experience__right-section {
    height: 300px;
  }
}


/* == 30-components/certificates.css == */
/* ========================================
   Certificates Block Styles
   ======================================== */

/* Reset and Base Styles */
.certificates-block * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.certificates-block {
    font-family: 'Helvetica', Arial, sans-serif;
    background-color: #f7f7f5;
}

/* Container */
.certificates-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px 58px;
    display: flex;
    flex-direction: column;
    gap: 62px;
}

/* Header */
.certificates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.certificates-header-title {
    font-family: 'Helvetica', sans-serif;
    font-size: 36px;
    line-height: 1.1;
    letter-spacing: -1.8px;
    color: #000000;
    margin: 0;
}

.certificates-icon {
    flex-shrink: 0;
    width: 62px;
    height: 62px;
}

.certificates-icon svg,
.certificates-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

/* Competencies Grid */
.certificates-competencies-grid {
    display: flex;
    gap: 20px;
    width: 100%;
}

.certificates-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Item */
.certificates-item {
    position: relative;
    width: 100%;
}

.certificates-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #bbbab6;
    pointer-events: none;
}

.certificates-item-content {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-bottom: 20px;
    padding-right: 20px;
    width: 100%;
}

.certificates-number {
    font-family: 'Switzer', 'Helvetica', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.1;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    color: #bbbab6;
    width: 60px;
    flex-shrink: 0;
    white-space: pre-wrap;
}

.certificates-description {
    flex: 1;
    font-family: 'Helvetica', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #000000;
    min-width: 0;
}

/* Certificates Section - Infinite Carousel */
.certificates-list {
    display: flex;
    align-items: center;
    gap: 23px;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.certificates-list-wrapper {
    display: flex;
    gap: 23px;
    animation: certificatesScroll 60s linear infinite;
    will-change: transform;
}

.certificates-list-wrapper:hover {
    animation-play-state: paused;
}

/* Infinite scroll animation */
@keyframes certificatesScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.certificates-box {
    flex: 0 0 auto;
    min-width: 200px;
    width: 200px;
    height: 120px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    animation: certificateFloat 3s ease-in-out infinite;
}

/* Floating animation - vertical movement (subtle) */
@keyframes certificateFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-5px);
    }
}

.certificates-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.certificates-box-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.certificates-box-image:hover {
    transform: scale(1.05);
}

/* Lightbox Modal */
.certificates-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.certificates-lightbox.is-active {
    opacity: 1;
    visibility: visible;
}

.certificates-lightbox__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    cursor: pointer;
}

.certificates-lightbox__container {
    position: relative;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.certificates-lightbox.is-active .certificates-lightbox__container {
    transform: scale(1);
}

.certificates-lightbox__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certificates-lightbox__image {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.certificates-lightbox__close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

.certificates-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.certificates-lightbox__close svg {
    width: 24px;
    height: 24px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .certificates-container {
        padding: 80px 40px;
        gap: 50px;
    }

    .certificates-header-title {
        font-size: 32px;
        letter-spacing: -1.6px;
    }

    .certificates-icon {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 1024px) {
    .certificates-container {
        padding: 70px 40px;
        gap: 45px;
    }

    .certificates-header-title {
        font-size: 30px;
        letter-spacing: -1.5px;
    }

    .certificates-icon {
        width: 52px;
        height: 52px;
    }

    .certificates-competencies-grid {
        flex-direction: column;
        gap: 16px;
    }
    
    .certificates-column {
        gap: 16px;
    }
}

/* Tablets and smaller - iPad portrait and below */
@media (max-width: 820px) {
    .certificates-container {
        padding: 60px 24px;
        gap: 40px;
    }

    .certificates-header {
        flex-direction: column;
        gap: 24px;
        align-items: flex-start;
    }

    .certificates-header-title {
        font-size: 26px;
        letter-spacing: -1.3px;
        line-height: 1.3;
    }

    .certificates-icon {
        width: 48px;
        height: 48px;
    }

    .certificates-competencies-grid {
        gap: 14px;
    }
    
    .certificates-column {
        gap: 14px;
    }

    .certificates-item-content {
        gap: 16px;
        padding-bottom: 16px;
    }

    .certificates-number {
        font-size: 22px;
        letter-spacing: -1.1px;
        width: 55px;
    }

    .certificates-description {
        font-size: 17px;
        line-height: 1.5;
    }

    .certificates-list {
        gap: 18px;
    }
    
    .certificates-list-wrapper {
        gap: 18px;
    }

    .certificates-box {
        min-width: 180px;
        width: 180px;
        height: 110px;
    }
}

/* Large phones - iPhone 14 Pro Max and similar */
@media (max-width: 430px) {
    .certificates-container {
        padding: 50px 20px;
        gap: 35px;
    }

    .certificates-header {
        gap: 20px;
    }

    .certificates-header-title {
        font-size: 22px;
        letter-spacing: -1.1px;
    }

    .certificates-icon {
        width: 42px;
        height: 42px;
    }

    .certificates-item-content {
        gap: 14px;
        padding-bottom: 14px;
    }

    .certificates-number {
        font-size: 20px;
        letter-spacing: -1px;
        width: 50px;
    }

    .certificates-description {
        font-size: 16px;
    }

    .certificates-list {
        gap: 16px;
    }
    
    .certificates-list-wrapper {
        gap: 16px;
    }

    .certificates-box {
        min-width: 160px;
        width: 160px;
        height: 100px;
    }
}

/* Standard phones - iPhone 14 Pro, iPhone 13, iPhone 12 */
@media (max-width: 393px) {
    .certificates-container {
        padding: 50px 18px;
        gap: 32px;
    }

    .certificates-header-title {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .certificates-icon {
        width: 38px;
        height: 38px;
    }

    .certificates-number {
        font-size: 19px;
        width: 48px;
    }

    .certificates-description {
        font-size: 15px;
    }

    .certificates-box {
        min-width: 150px;
        width: 150px;
        height: 95px;
    }
}

/* Small phones - iPhone SE, iPhone 13 mini */
@media (max-width: 375px) {
    .certificates-container {
        padding: 45px 16px;
        gap: 30px;
    }

    .certificates-header {
        gap: 18px;
    }

    .certificates-header-title {
        font-size: 18px;
        letter-spacing: -0.9px;
    }

    .certificates-icon {
        width: 36px;
        height: 36px;
    }

    .certificates-item-content {
        gap: 12px;
        padding-bottom: 12px;
    }

    .certificates-number {
        font-size: 18px;
        letter-spacing: -0.9px;
        width: 45px;
    }

    .certificates-description {
        font-size: 14px;
    }

    .certificates-list {
        gap: 14px;
    }
    
    .certificates-list-wrapper {
        gap: 14px;
    }

    .certificates-box {
        min-width: 140px;
        width: 140px;
        height: 90px;
    }

    .certificates-lightbox__container {
        width: 95%;
    }

    .certificates-lightbox__image {
        max-height: 80vh;
    }

    .certificates-lightbox__close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
    }

    .certificates-lightbox__close svg {
        width: 20px;
        height: 20px;
    }
}

/* Very small phones */
@media (max-width: 360px) {
    .certificates-container {
        padding: 40px 14px;
        gap: 28px;
    }

    .certificates-header-title {
        font-size: 16px;
        letter-spacing: -0.8px;
    }

    .certificates-icon {
        width: 32px;
        height: 32px;
    }

    .certificates-item-content {
        gap: 10px;
        padding-bottom: 10px;
    }

    .certificates-number {
        font-size: 16px;
        letter-spacing: -0.8px;
        width: 40px;
    }

    .certificates-description {
        font-size: 13px;
    }

    .certificates-box {
        min-width: 130px;
        width: 130px;
        height: 85px;
    }
}


/* == 30-components/table-2.css == */
/* Table 2 Block */
.block-table-2 {
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-table-2__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  width: 100%;
}

.block-table-2__wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

/* Row */
.block-table-2__row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
  position: relative;
}

.block-table-2__row--header {
  display: flex;
  align-items: flex-start;
}

/* Cell - Base */
.block-table-2__cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px 10px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
}

/* Empty Cell (top-left corner) */
.block-table-2__cell--empty {
  width: 224px;
  padding: 0 10px 20px 0;
}

/* Header Cells */
.block-table-2__cell--header {
  width: 275px;
  padding: 0 10px 20px 10px;
  font-family: 'Switzer', var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.3px;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Label Cells (first column) */
.block-table-2__cell--label {
  width: 224px;
  padding: 20px 10px 20px 0;
  font-family: 'Switzer', var(--font-heading);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.3px;
  text-transform: uppercase;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
}

/* Data Cells */
.block-table-2__cell--data {
  width: 275px;
  padding: 20px 10px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

/* Responsive */
@media (max-width: 1440px) {
  .block-table-2__container {
    padding: 120px 40px;
  }
}

@media (max-width: 1024px) {
  .block-table-2__container {
    padding: 80px 30px;
    overflow-x: auto;
  }
  
  .block-table-2__wrapper {
    /* Fit the full table width so the row separator lines reach the last
       column. A fixed min-width smaller than the summed cell widths left the
       rows (and their border-bottom) short, so the last columns had no line. */
    min-width: max-content;
  }
  
  .block-table-2__cell--header,
  .block-table-2__cell--label {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
  
  .block-table-2__cell--data {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .block-table-2__container {
    padding: 60px 20px;
  }
  
  .block-table-2__wrapper {
    min-width: max-content;
  }
  
  .block-table-2__cell--empty {
    width: 180px;
  }
  
  .block-table-2__cell--label {
    width: 180px;
    font-size: 20px;
    letter-spacing: -1px;
  }
  
  .block-table-2__cell--header {
    width: 240px;
    font-size: 20px;
    letter-spacing: -1px;
  }
  
  .block-table-2__cell--data {
    width: 240px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .block-table-2__container {
    padding: 40px 15px;
  }
  
  .block-table-2__wrapper {
    min-width: max-content;
  }
  
  .block-table-2__cell--empty {
    width: 150px;
  }
  
  .block-table-2__cell--label {
    width: 150px;
    font-size: 18px;
    letter-spacing: -0.9px;
  }
  
  .block-table-2__cell--header {
    width: 200px;
    font-size: 18px;
    letter-spacing: -0.9px;
  }
  
  .block-table-2__cell--data {
    width: 200px;
    font-size: 14px;
  }
}



/* == 30-components/two-box-cta.css == */
/* Two Box CTA Block */
.block-two-box-cta {
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-two-box-cta__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  gap: 20px;
  width: 100%;
}

/* Card */
.block-two-box-cta__card {
  flex: 1;
  background-color: #f7f7f5;
  height: 652px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px;
}

.block-two-box-cta__card-content {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

/* Icon */
.block-two-box-cta__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}

.block-two-box-cta__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Text Section */
.block-two-box-cta__text-section {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Title */
.block-two-box-cta__title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
  margin: 0;
}

/* Features List */
.block-two-box-cta__features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-two-box-cta__feature {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.block-two-box-cta__bullet {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 5px;
  border-radius: 2px;
}

.block-two-box-cta__bullet--yellow {
  background-color: #e1ff04;
}

.block-two-box-cta__bullet--pink {
  background-color: #f237a6;
}

.block-two-box-cta__feature-text {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  flex: 1;
}

/* Description (Plain Text) */
.block-two-box-cta__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
}

/* Button */
.block-two-box-cta__button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.block-two-box-cta__button:hover {
  background-color: #333333;
}

.block-two-box-cta__button-text {
  font-family: 'Switzer', var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.6px;
  color: #ffffff;
}

.block-two-box-cta__button-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.block-two-box-cta__button-arrow svg {
  display: block;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-two-box-cta__container {
    flex-direction: column;
    padding: 60px 30px;
  }
  
  .block-two-box-cta__card {
    height: auto;
    min-height: 500px;
  }
  
  .block-two-box-cta__title {
    font-size: 60px;
    letter-spacing: -3px;
  }
}

@media (max-width: 768px) {
  .block-two-box-cta__container {
    padding: 40px 20px;
  }
  
  .block-two-box-cta__card {
    padding: 30px;
    min-height: auto;
    /* Card height becomes auto on mobile, so `space-between` collapses the gap
       between the feature list and the CTA button to zero — the button ends up
       glued onto (visually overlapping) the last list item. Force a fixed gap. */
    justify-content: flex-start;
    gap: 36px;
  }

  .block-two-box-cta__card-content {
    gap: 30px;
  }
  
  .block-two-box-cta__icon {
    width: 36px;
    height: 36px;
  }
  
  .block-two-box-cta__title {
    font-size: 40px;
    letter-spacing: -2px;
    white-space: normal;
  }
  
  .block-two-box-cta__feature-text,
  .block-two-box-cta__description {
    font-size: 16px;
  }
  
  .block-two-box-cta__button-text {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .block-two-box-cta__container {
    padding: 30px 15px;
  }
  
  .block-two-box-cta__card {
    padding: 25px;
  }
  
  .block-two-box-cta__title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
  
  .block-two-box-cta__feature-text,
  .block-two-box-cta__description {
    font-size: 15px;
  }
  
  .block-two-box-cta__button {
    padding: 10px 20px;
  }
  
  .block-two-box-cta__button-text {
    font-size: 16px;
  }
  
  .block-two-box-cta__button-arrow {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 375px) {
  .block-two-box-cta__title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-two-box-cta__feature-text,
  .block-two-box-cta__description {
    font-size: 14px;
  }
}



/* == 30-components/what-includes.css == */
/* What Includes Block */
.block-what-includes {
  width: 100%;
  padding: 0;
  margin: 0;
}

.block-what-includes__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px 120px 58px;
  width: 100%;
}

/* Heading */
.block-what-includes__heading {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  color: #000000;
  margin: 0 0 60px 0;
}

/* Subtitle row */
.block-what-includes__subtitle-row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: -40px 0 60px 0;
  flex-wrap: wrap;
}

.block-what-includes__subtitle {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: #000000;
  margin: 0;
}

.block-what-includes__subtitle-marker--text {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: #000000;
  text-transform: uppercase;
}

.block-what-includes__subtitle-marker--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  color: #000000;
  flex-shrink: 0;
}

.block-what-includes__subtitle-marker--icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

@media (max-width: 768px) {
  .block-what-includes__subtitle-row {
    margin: -20px 0 40px 0;
    gap: 16px;
  }

  .block-what-includes__subtitle {
    font-size: 20px;
  }

  .block-what-includes__subtitle-marker--text {
    font-size: 20px;
  }

  .block-what-includes__subtitle-marker--icon {
    width: 42px;
    height: 42px;
  }
}

/* Grid */
.block-what-includes__grid {
  display: flex;
  gap: 60px;
}

.block-what-includes__column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Feature Item */
.block-what-includes__item {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #bbbab6;
}

.block-what-includes__content {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}

.block-what-includes__number {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -1.3px;
  text-transform: uppercase;
  color: #bbbab6;
  width: 60px;
  flex-shrink: 0;
  margin: 0;
}

.block-what-includes__text {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  margin: 0;
  white-space: pre-wrap;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-what-includes__container {
    padding: 80px 40px 120px 40px;
  }
  
  .block-what-includes__heading {
    font-size: 60px;
    letter-spacing: -3px;
    margin-bottom: 50px;
  }
  
  .block-what-includes__grid {
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .block-what-includes__container {
    padding: 60px 24px 80px 24px;
  }
  
  .block-what-includes__heading {
    font-size: 42px;
    letter-spacing: -2.1px;
    margin-bottom: 40px;
  }
  
  .block-what-includes__grid {
    flex-direction: column;
    gap: 20px;
  }
  
  .block-what-includes__number {
    font-size: 20px;
    width: 50px;
  }
  
  .block-what-includes__text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .block-what-includes__container {
    padding: 40px 20px 60px 20px;
  }
  
  .block-what-includes__heading {
    font-size: 32px;
    letter-spacing: -1.6px;
    margin-bottom: 30px;
  }
  
  .block-what-includes__content {
    gap: 15px;
    padding-bottom: 15px;
    padding-right: 15px;
  }
  
  .block-what-includes__number {
    font-size: 18px;
    width: 45px;
    letter-spacing: -0.9px;
  }
  
  .block-what-includes__text {
    font-size: 15px;
  }
}

@media (max-width: 375px) {
  .block-what-includes__container {
    padding: 30px 15px 50px 15px;
  }
  
  .block-what-includes__heading {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-what-includes__number {
    font-size: 16px;
    width: 40px;
  }
  
  .block-what-includes__text {
    font-size: 14px;
  }
}



/* == 30-components/two-tab-right.css == */
/* Two Tab Right Block */
.block-two-tab-right {
  width: 100%;
  min-height: 729px;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.block-two-tab-right__container {
  display: flex;
  width: 100%;
  /* 1324px = site content width (1440 container − 58px gutters), so the
     coloured panels line up with the other blocks instead of looking wider. */
  max-width: 1324px;
  min-height: 729px;
  position: relative;
}

/* Left Panel */
.block-two-tab-right__left {
  background-color: #f7f7f5;
  width: 720px;
  padding: 100px 58px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 50px;
  flex-shrink: 0;
  text-align: left;
}

.block-two-tab-right__icon-wrapper {
  width: 42px;
  height: 42px;
  position: relative;
  flex-shrink: 0;
}

.block-two-tab-right__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.block-two-tab-right__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  width: 100%;
  text-align: left;
}

/* Title styles applied inline in PHP to prevent WP/Gutenberg overrides.
   Tag-agnostiline (h1 -> h2), et width säiliks ka peale H1->H2 muutust. */
.block-two-tab-right [data-tab-heading] {
  width: 100%;
}


.block-two-tab-right__text {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
  text-align: left;
  width: 100%;
  white-space: pre-wrap;
}

.block-two-tab-right__text p {
  margin: 0 0 1rem 0;
}

.block-two-tab-right__text p:last-child {
  margin-bottom: 0;
}

/* Right Tabs */
.block-two-tab-right__tab {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

/* Tab 1 - default: colored bg, black icon+text */
.block-two-tab-right__tab[data-tab="tab1"] {
  background-color: var(--tab1-bg, #e1ff04);
  color: #000;
}

.block-two-tab-right__tab[data-tab="tab1"] .block-two-tab-right__tab-title {
  color: #000;
}

/* Tab 1 - hover: stays same */
.block-two-tab-right__tab[data-tab="tab1"]:hover {
  background-color: var(--tab1-bg, #e1ff04);
  color: #000;
}

.block-two-tab-right__tab[data-tab="tab1"]:hover .block-two-tab-right__tab-title {
  color: #000;
}

/* Tab 2 - default: dark bg, white icon, grey text */
.block-two-tab-right__tab[data-tab="tab2"] {
  background-color: var(--tab2-bg, #000000);
  color: #fff;
}

.block-two-tab-right__tab[data-tab="tab2"] .block-two-tab-right__tab-title {
  color: #fff;
}

/* When Tab 2 is hovered: Tab 1 gets dark bg + white icon/text */
.block-two-tab-right__container:has([data-tab="tab2"]:hover) .block-two-tab-right__tab[data-tab="tab1"] {
  background-color: var(--tab2-bg, #000000);
  color: #fff;
}

.block-two-tab-right__container:has([data-tab="tab2"]:hover) .block-two-tab-right__tab[data-tab="tab1"] .block-two-tab-right__tab-title {
  color: #fff;
}

/* Tab 2 - hover: gets colored bg + black icon/text */
.block-two-tab-right__tab[data-tab="tab2"]:hover {
  background-color: var(--tab1-bg, #e1ff04) !important;
  color: #000;
}

.block-two-tab-right__tab[data-tab="tab2"]:hover .block-two-tab-right__tab-title {
  color: #000;
}

.block-two-tab-right__tab-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 120px 58px;
  gap: 42px;
}

.block-two-tab-right__tab-icon-wrapper {
  width: 42px;
  height: 42px;
  position: relative;
  flex-shrink: 0;
}

.block-two-tab-right__tab-icon {
  display: block;
  width: 100%;
  height: 100%;
}

.block-two-tab-right__tab-icon svg path {
  transition: stroke 0.3s ease;
}

.block-two-tab-right__tab-title {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  text-align: center;
  white-space: pre-wrap;
  margin: 0;
  transition: color 0.3s ease;
}

/* Tab 1 - default title color: black (on yellow background) */
.block-two-tab-right__tab[data-tab="tab1"] .block-two-tab-right__tab-title {
  color: #000;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
  .block-two-tab-right__left {
    padding: 80px 40px;
  }

  .block-two-tab-right__title {
    font-size: 64px;
    letter-spacing: -3.2px;
  }

  .block-two-tab-right__text {
    font-size: 16px;
  }

  .block-two-tab-right__tab-title {
    font-size: 32px;
    letter-spacing: -1.6px;
  }
}

@media (max-width: 1024px) {
  .block-two-tab-right {
    height: auto;
    min-height: 0;
  }

  /* Stack the text on top (full width) and place the two tabs side-by-side
     beneath it as a compact toggle, so the whole block — heading, text and
     both Agentuur / In-house options — fits on one mobile screen. Previously
     the container stacked vertically with each tab forced to min-height:300px,
     making the pink + black areas ~600px tall and pushing everything off the
     screen. */
  .block-two-tab-right__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 0;
  }

  .block-two-tab-right__left {
    width: 100%;
    padding: 60px 40px;
    grid-column: 1 / -1;
  }

  .block-two-tab-right__tab {
    min-height: 0;
    transition: opacity 0.25s ease, background-color 0.3s ease;
  }

  /* No :hover on touch to drive the desktop colour choreography. Instead mirror
     desktop with the .is-active state: active tab = pink (tab1 colour), inactive
     tab = black (tab2 colour). Icons use currentColor, so setting `color` also
     swaps the icon. (Previously the inactive black tab was dimmed to 0.45 opacity,
     which read as grey.) */
  .block-two-tab-right__tab:not(.is-active) {
    opacity: 1;
  }

  .block-two-tab-right__tab.is-active {
    background-color: var(--tab1-bg, #e1ff04) !important;
    color: #000 !important;
  }
  .block-two-tab-right__tab.is-active .block-two-tab-right__tab-title {
    color: #000 !important;
  }

  .block-two-tab-right__tab:not(.is-active) {
    background-color: var(--tab2-bg, #000000) !important;
    color: #fff !important;
  }
  .block-two-tab-right__tab:not(.is-active) .block-two-tab-right__tab-title {
    color: #fff !important;
  }

  /* Icon stacked above the label (column) so the full tab width is available
     for the text — "AGENTUUR" / "IN-HOUSE" overflow when placed in a row. */
  .block-two-tab-right__tab-content {
    padding: 24px 12px;
    gap: 20px;
  }

  /* Smaller tab icons (≈half the desktop 42px) with more breathing room above
     the label. The SVG is echoed with a hardcoded width/height="42", so it must
     be forced to fill the wrapper for the smaller size to take effect. */
  .block-two-tab-right__tab-icon-wrapper {
    width: 21px;
    height: 21px;
  }

  .block-two-tab-right__tab-icon-wrapper svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  .block-two-tab-right__tab-title {
    font-size: 22px;
    letter-spacing: -1.1px;
  }
}

@media (max-width: 768px) {
  .block-two-tab-right__left {
    padding: 40px 24px;
  }

  .block-two-tab-right__title {
    font-size: 48px;
    letter-spacing: -2.4px;
  }

  .block-two-tab-right__text {
    font-size: 14px;
  }

  .block-two-tab-right__tab-content {
    padding: 24px 14px;
  }

  .block-two-tab-right__tab-title {
    font-size: 20px;
    letter-spacing: -1px;
  }
}

@media (max-width: 480px) {
  .block-two-tab-right__left {
    padding: 30px 20px;
    gap: 30px;
  }

  .block-two-tab-right__title {
    font-size: 36px;
    letter-spacing: -1.8px;
  }

  .block-two-tab-right__text {
    font-size: 14px;
  }

  .block-two-tab-right__icon-wrapper {
    width: 32px;
    height: 32px;
  }

  .block-two-tab-right__tab-icon-wrapper {
    width: 16px;
    height: 16px;
  }

  .block-two-tab-right__tab-content {
    padding: 22px 12px;
    gap: 16px;
  }

  .block-two-tab-right__tab-title {
    font-size: 18px;
    letter-spacing: -0.9px;
  }
}

/* ============================================================
   Links inside the left-column text styled like the "Loe edasi"
   read-more button: underlined black text + black 26px box with a
   white arrow pointing RIGHT (appended via ::after).
   ============================================================ */
.block-two-tab-right__text a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  color: #000000;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.6px;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  transition: opacity 0.3s ease;
}

.block-two-tab-right__text a:hover {
  opacity: 0.7;
}

.block-two-tab-right__text a::after {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none'%3E%3Cpath d='M8.9375 13H17.0625' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M13.8125 9.75L17.0625 13L13.8125 16.25' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}


/* == 30-components/who-we-are.css == */
/* ====================================
   Who We Are Block
   ==================================== */

.block-who-we-are {
  width: 100%;
  background-color: #ffffff;
}

.block-who-we-are__container {
  width: 100%;
  padding: 100px 58px 62px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Sidebar Title */
.block-who-we-are__sidebar-title {
  font-family: 'Manrope', var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
}

/* Main Content */
.block-who-we-are__main-content {
  width: 652px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.block-who-we-are__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Heading */
.block-who-we-are__heading {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: #000000;
  margin: 0;
}

/* Heading Inline Icon */
.block-who-we-are__heading-icon {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: middle;
  margin: 0 0.05em;
}

/* Description */
.block-who-we-are__description {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  color: #141414;
  margin: 0;
}

/* Read More Link */
.block-who-we-are__read-more {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  text-decoration: none;
  transition: opacity 0.3s ease;
  width: fit-content;
}

.block-who-we-are__read-more:hover {
  opacity: 0.7;
}

.block-who-we-are__read-more-text {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.6px;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  white-space: nowrap;
}

.block-who-we-are__arrow-icon {
  width: 26px;
  height: 26px;
  display: block;
  flex-shrink: 0;
}

.block-who-we-are__arrow-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* No CTA - reduce bottom spacing */
.block-who-we-are--no-cta .block-who-we-are__container {
  padding-bottom: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-who-we-are__container {
    padding: 80px 40px;
  }
  
  .block-who-we-are__main-content {
    width: 600px;
  }
}

@media (max-width: 900px) {
  .block-who-we-are__container {
    flex-direction: column;
    padding: 60px 30px;
    gap: 40px;
    min-height: auto;
  }
  
  .block-who-we-are__sidebar-title {
    white-space: normal;
  }
  
  .block-who-we-are__main-content {
    width: 100%;
  }
  
  .block-who-we-are__heading {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-who-we-are__description {
    font-size: 16px;
  }
  
  .block-who-we-are__read-more-text {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  .block-who-we-are__container {
    padding: 40px 20px;
    gap: 30px;
  }
  
  .block-who-we-are__sidebar-title {
    font-size: 16px;
  }
  
  .block-who-we-are__heading {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-who-we-are__description {
    font-size: 15px;
    line-height: 1.5;
  }
  
  .block-who-we-are__read-more-text {
    font-size: 16px;
  }
  
  .block-who-we-are__arrow-icon {
    width: 22px;
    height: 22px;
  }
}



/* == 30-components/our-facts.css == */
/* ====================================
   Our Facts Block
   ==================================== */

.block-our-facts {
  width: 100%;
  background-color: #f7f7f5;
}

.block-our-facts__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 58px;
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* Hero Section */
.block-our-facts__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0px;
  gap: 22px;
  isolation: isolate;
  width: 1324px;
  height: 435px;
  position: relative;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.block-our-facts__hero-title {
  width: 1324px;
  height: 270px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
  z-index: 0;
}

.block-our-facts__hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 22px;
  width: 652px;
  height: 143px;
  flex: none;
  order: 1;
  flex-grow: 0;
  z-index: 1;
}

.block-our-facts__description {
  width: 652px;
  height: 75px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  display: flex;
  align-items: center;
  color: #141414;
  margin: 0;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* CTA Link — text flows inline up to the full description width, and the
   arrow box always follows the last word (auto-positions for any text length). */
.block-our-facts__cta {
  display: block;
  width: 100%;
  padding: 10px 0px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-our-facts__cta:hover {
  opacity: 0.7;
}

.block-our-facts__cta span {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #000000;
}

.block-our-facts__arrow-icon {
  display: inline-block;
  vertical-align: middle;
  width: 26px;
  height: 26px;
  background: #000000;
  flex-shrink: 0;
  /* gap from the text — same look as the homepage */
  margin-left: 14px;
  /* raise ~2px so it lines up with the text like the sharks-headings box
     (which uses flex centring) instead of sitting slightly low */
  position: relative;
  top: -2px;
}

.block-our-facts__arrow-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* X Icon */
.block-our-facts__x-icon {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 14.76px;
  position: absolute;
  width: 62px;
  height: 62px;
  left: 790px;
  top: 14px;
  flex: none;
  order: 2;
  flex-grow: 0;
  z-index: 2;
}

.block-our-facts__x-icon svg {
  width: 62px;
  height: 62px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

/* Stats Section */
.block-our-facts__stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 20px;
  width: 1324px;
  height: 135px;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.block-our-facts__stat-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0px;
  gap: 10px;
  width: 316px;
  height: 135px;
  flex: none;
  flex-grow: 0;
}

.block-our-facts__stat-number {
  width: 316px;
  height: 90px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 82px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  text-align: left;
  flex: none;
  order: 0;
  align-self: stretch;
  flex-grow: 0;
}

.block-our-facts__stat-divider {
  width: 316px;
  height: 0px;
  border: 1px solid #BBBAB6;
  flex: none;
  order: 1;
  align-self: stretch;
  flex-grow: 0;
}

.block-our-facts__stat-description {
  width: 316px;
  height: 25px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  display: flex;
  align-items: center;
  color: #141414;
  margin: 0;
  flex: none;
  order: 2;
  align-self: stretch;
  flex-grow: 0;
}

/* Responsive */
@media (max-width: 1200px) {
  .block-our-facts__container {
    padding: 80px 40px;
  }
  
  .block-our-facts__hero {
    width: auto;
    height: auto;
  }
  
  .block-our-facts__hero-title {
    width: 100%;
    height: auto;
    font-size: 72px;
    letter-spacing: -3.6px;
  }
  
  .block-our-facts__hero-content {
    width: 100%;
    max-width: 652px;
    height: auto;
  }
  
  .block-our-facts__description {
    width: 100%;
    height: auto;
  }
  
  .block-our-facts__cta {
    width: auto;
    height: auto;
  }
  
  .block-our-facts__cta span {
    width: auto;
    height: auto;
  }
  
  .block-our-facts__stats {
    width: 100%;
    height: auto;
  }
  
  .block-our-facts__stat-card {
    width: auto;
    height: auto;
  }
  
  .block-our-facts__stat-number {
    width: 100%;
    height: auto;
    font-size: 72px;
    letter-spacing: -3.6px;
  }
  
  .block-our-facts__stat-divider {
    width: 100%;
  }
  
  .block-our-facts__stat-description {
    width: 100%;
    height: auto;
  }
  
  .block-our-facts__x-icon {
    left: auto;
    right: 0;
  }
}

@media (max-width: 900px) {
  .block-our-facts__container {
    padding: 60px 30px;
    gap: 50px;
  }
  
  .block-our-facts__hero-title {
    font-size: 56px;
    letter-spacing: -2.8px;
    padding-top: 70px;
  }

  .block-our-facts__description {
    font-size: 16px;
  }

  .block-our-facts__cta span {
    font-size: 18px;
  }

  .block-our-facts__stats {
    flex-wrap: wrap;
  }
  
  .block-our-facts__stat-card {
    width: calc(50% - 10px);
  }
  
  .block-our-facts__stat-number {
    font-size: 64px;
    letter-spacing: -3.2px;
  }
  
  .block-our-facts__x-icon {
    width: 50px;
    height: 50px;
    top: 12px;
  }
  
  .block-our-facts__x-icon svg {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 768px) {
  .block-our-facts__container {
    padding: 50px 24px;
    gap: 40px;
  }
  
  .block-our-facts__hero-title {
    font-size: 28px;
    letter-spacing: -1.4px;
    padding-top: 52px;
  }
  
  .block-our-facts__description {
    font-size: 16px;
  }
  
  .block-our-facts__cta span {
    font-size: 16px;
  }
  
  .block-our-facts__arrow-icon {
    width: 22px;
    height: 22px;
  }
  
  .block-our-facts__stats {
    flex-direction: column;
    gap: 30px;
  }
  
  .block-our-facts__stat-card {
    width: 100%;
  }
  
  .block-our-facts__stat-number {
    font-size: 56px;
    letter-spacing: -2.8px;
  }
  
  .block-our-facts__stat-description {
    font-size: 16px;
  }
  
  .block-our-facts__x-icon {
    width: 40px;
    height: 40px;
    top: 10px;
    right: 0;
  }
  
  .block-our-facts__x-icon svg {
    width: 40px;
    height: 40px;
  }
}


/* ============================================================
   Parts-based heading (admin-editable): text + inline icon + breaks.
   ============================================================ */
.block-our-facts__hero-title .block-our-facts__heading-icon {
  display: inline-block;
  vertical-align: middle;
  line-height: 0;
  /* Bigger gap before the icon (matches the homepage block) */
  margin: 0 0.1em 0 0.32em;
  /* Nudge up so it sits centred on the caps like the homepage icon */
  position: relative;
  top: -0.09em;
}

.block-our-facts__hero-title .block-our-facts__heading-icon svg {
  width: 0.76em;
  height: 0.76em;
  display: block;
}


/* == 30-components/max-accordion.css == */
/* ====================================
   Max Accordion Block
   ==================================== */

.block-max-accordion {
  width: 100%;
}

.block-max-accordion__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 100px 58px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Accordion Item */
.block-max-accordion__item {
  width: 1324px;
  max-width: 100%;
  position: relative;
}

/* Accordion Header */
.block-max-accordion__header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0 20px 30px;
  transition: opacity 0.3s ease;
  position: relative;
  min-height: 65px;
}

.block-max-accordion__header-content-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 62px;
  max-width: 1087px; /* 360px (title) + 62px (gap) + 665px (content) */
  flex-shrink: 0;
  flex: 1;
}

.block-max-accordion__header-title-wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0;
  gap: 28px;
  width: 360px; /* number + title; wide enough for a long single word (e.g. MÜÜGIASSISTENT) */
  flex-shrink: 0;
}

.block-max-accordion__number {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  width: 60px;
  height: 35px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-max-accordion__title {
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  /* Allow long titles to wrap onto a second line within the title column
     instead of overflowing into the description. */
  white-space: normal;
  overflow-wrap: break-word;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  order: 1;
  flex-grow: 1;
}

/* Override the global ".entry-content h2/h3/h4" margin (margin-top: var(--space-4))
   which has higher specificity and pushed the title ~32px down, misaligning it
   with the number when the title wraps to two lines. */
.block-max-accordion .block-max-accordion__title {
  margin: 0;
}

.block-max-accordion__icon-wrapper {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  position: absolute;
  right: 20px;
  top: 0;
}

.block-max-accordion__icon {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

/* Accordion Content */
.block-max-accordion__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 42px;
  width: 665px;
  flex-shrink: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 1.2s ease, opacity 0.9s ease;
}

.block-max-accordion__item.is-expanded .block-max-accordion__content {
  opacity: 1;
}

.block-max-accordion__item.is-expanded .block-max-accordion__icon--plus {
  display: none;
}

.block-max-accordion__item.is-expanded .block-max-accordion__icon--minus {
  display: block !important;
}

.block-max-accordion__content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 42px;
  max-width: 665px;
}

/* Description */
.block-max-accordion__description {
  max-width: 665px;
  flex: none;
  order: 0;
  flex-grow: 0;
}

.block-max-accordion__description p {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  line-height: 140%;
  display: flex;
  align-items: center;
  margin: 0;
}

/* Services Grid */
.block-max-accordion__services-grid {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 0;
  /* row-gap 16px, column-gap 40px — tighter than 62px so all links (incl. the
     last arrow) fit within the 665px content column; wraps if they don't. */
  gap: 16px 40px;
  max-width: 100%;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-max-accordion__services-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  flex: none;
  flex-grow: 0;
}

/* Service Link */
.block-max-accordion__service-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  gap: 8px;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
  flex: none;
  flex-grow: 0;
}

.block-max-accordion__service-link:hover {
  opacity: 0.8;
}

.block-max-accordion__arrow-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .block-max-accordion__container {
    padding: 80px 40px;
  }
  
  .block-max-accordion__item {
    width: 100%;
  }
  
  .block-max-accordion__header-content-wrapper {
    max-width: 100%;
  }
  
  .block-max-accordion__item.is-expanded .block-max-accordion__content {
    width: 100%;
    max-width: 665px;
  }
}

@media (max-width: 1024px) {
  .block-max-accordion__services-grid {
    flex-direction: column;
    gap: 20px;
  }
  
  .block-max-accordion__content-wrapper {
    max-width: 100%;
  }
  
  .block-max-accordion__description {
    max-width: 100%;
  }
  
  .block-max-accordion__item.is-expanded .block-max-accordion__content {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .block-max-accordion__container {
    padding: 60px 30px;
  }
}

@media (max-width: 768px) {
  .block-max-accordion__container {
    padding: 50px 24px;
  }
  
  .block-max-accordion__header {
    padding: 0 0 20px 0;
    flex-wrap: wrap;
  }
  
  .block-max-accordion__header-content-wrapper {
    flex-direction: column;
    gap: 20px;
    width: 100%;
    padding-right: 50px;
  }
  
  .block-max-accordion__header-title-wrapper {
    gap: 20px;
    width: 100%;
  }
  
  .block-max-accordion__number,
  .block-max-accordion__title {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-max-accordion__number {
    width: 50px;
  }
  
  .block-max-accordion__title {
    white-space: normal;
    flex: 1;
  }
  
  .block-max-accordion__item.is-expanded .block-max-accordion__content {
    width: 100%;
    padding-top: 10px;
  }
  
  .block-max-accordion__description {
    max-width: 100%;
  }
  
  .block-max-accordion__description p {
    font-size: 16px;
  }
  
  .block-max-accordion__service-link {
    font-size: 18px;
    white-space: normal;
  }
  
  .block-max-accordion__icon-wrapper {
    right: 0;
  }
}

@media (max-width: 640px) {
  .block-max-accordion__container {
    padding: 40px 20px;
  }
  
  .block-max-accordion__header-content-wrapper {
    padding-right: 40px;
  }
  
  .block-max-accordion__header-title-wrapper {
    gap: 15px;
  }
  
  .block-max-accordion__number,
  .block-max-accordion__title {
    font-size: 20px;
    letter-spacing: -1px;
  }
  
  .block-max-accordion__number {
    width: 40px;
  }
  
  .block-max-accordion__description p {
    font-size: 15px;
  }
  
  .block-max-accordion__service-link {
    font-size: 16px;
    line-height: 22px;
  }
  
  .block-max-accordion__services-grid {
    gap: 15px;
  }
  
  .block-max-accordion__icon-wrapper {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 480px) {
  .block-max-accordion__container {
    padding: 30px 16px;
  }
  
  .block-max-accordion__header {
    padding: 0 0 16px 0;
  }
  
  .block-max-accordion__header-content-wrapper {
    gap: 16px;
    padding-right: 36px;
  }
  
  .block-max-accordion__header-title-wrapper {
    gap: 12px;
  }
  
  .block-max-accordion__number,
  .block-max-accordion__title {
    font-size: 18px;
    letter-spacing: -0.9px;
  }
  
  .block-max-accordion__number {
    width: 35px;
  }
  
  .block-max-accordion__description p {
    font-size: 14px;
  }
  
  .block-max-accordion__service-link {
    font-size: 15px;
    line-height: 20px;
  }
  
  .block-max-accordion__arrow-icon {
    width: 22px;
    height: 22px;
  }
  
  .block-max-accordion__icon-wrapper {
    width: 24px;
    height: 24px;
  }
  
  .block-max-accordion__item.is-expanded .block-max-accordion__content {
    gap: 30px;
  }
  
  .block-max-accordion__content-wrapper {
    gap: 30px;
  }
}



/* == 30-components/portfolio.css == */
/* ====================================
   Portfolio Block
   ==================================== */

.block-portfolio {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
}

.block-portfolio__container {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.block-portfolio__content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 62px;
  align-items: center;
  padding: 120px 58px;
  width: 100%;
  max-width: 1440px;
}

/* Header Section */
.block-portfolio__header-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

.block-portfolio__header-content {
  display: flex;
  gap: 30px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.block-portfolio__icon-container {
  position: relative;
  flex-shrink: 0;
  width: 62px;
  height: 62px;
}

.block-portfolio__icon {
  display: block;
  width: 100%;
  height: 100%;
}

.block-portfolio__main-title {
  font-family: 'Outfit', 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 82px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  color: #000000;
  flex-shrink: 0;
  position: relative;
  margin: 0;
}

/* Navigation Section */
.block-portfolio__nav-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.block-portfolio__nav-item {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.block-portfolio__nav-item:hover {
  opacity: 0.7;
}

.block-portfolio__nav-item span {
  font-family: 'Outfit', 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.6px;
  white-space: nowrap;
  color: #bbbab6;
  position: relative;
}

.block-portfolio__nav-item.active span {
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.block-portfolio__nav-dot {
  width: 8px;
  height: 8px;
  background-color: #000000;
  flex-shrink: 0;
}

/* Portfolio Grid — 3 columns, staggered layout */
.block-portfolio__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 62px 20px;
  width: 100%;
}

/* Staggered positions: items 0,1 → cols 1-2; items 2,3 → cols 2-3 */
.block-portfolio__item--pos-0 { grid-column: 1; }
.block-portfolio__item--pos-1 { grid-column: 2; }
.block-portfolio__item--pos-2 { grid-column: 2; }
.block-portfolio__item--pos-3 { grid-column: 3; }

.block-portfolio__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  transition: opacity 0.3s ease;
}

.block-portfolio__item.hidden {
  display: none;
}

.block-portfolio__image {
  aspect-ratio: 1 / 1;
  width: 100%;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.block-portfolio__image img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Hover: hide image, show bg color + text */
.block-portfolio__image img {
  transition: opacity 0.3s ease;
}

.block-portfolio__item:hover .block-portfolio__image img {
  opacity: 0;
}

/* Category tag — top left, visible on hover */
.block-portfolio__category-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-portfolio__item:hover .block-portfolio__category-tag {
  opacity: 1;
}

/* Project name — bottom left, visible on hover */
.block-portfolio__project-name {
  position: absolute;
  bottom: 20px;
  left: 20px;
  font-family: 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -1.6px;
  text-transform: uppercase;
  color: #000000;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-portfolio__item:hover .block-portfolio__project-name {
  opacity: 1;
}

.block-portfolio__button {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
  text-decoration: none;
}

.block-portfolio__button:hover {
  opacity: 0.7;
}

.block-portfolio__button span {
  font-family: 'Outfit', 'Switzer', 'Helvetica', Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.6px;
  white-space: nowrap;
  color: #000000;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-position: from-font;
}

.block-portfolio__arrow-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  position: relative;
}

.block-portfolio__arrow-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .block-portfolio__content-wrapper {
    padding: 80px 40px;
    gap: 50px;
  }

  .block-portfolio__main-title {
    font-size: 60px;
    letter-spacing: -3px;
  }

  .block-portfolio__icon-container {
    width: 50px;
    height: 50px;
  }

  .block-portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .block-portfolio__item--pos-0 { grid-column: 1; }
  .block-portfolio__item--pos-1 { grid-column: 2; }
  .block-portfolio__item--pos-2 { grid-column: 1; }
  .block-portfolio__item--pos-3 { grid-column: 2; }
}

@media (max-width: 768px) {
  .block-portfolio__content-wrapper {
    padding: 60px 24px;
    gap: 40px;
  }

  .block-portfolio__main-title {
    font-size: 42px;
    letter-spacing: -2px;
  }

  .block-portfolio__header-content {
    gap: 20px;
  }

  .block-portfolio__icon-container {
    width: 40px;
    height: 40px;
  }

  .block-portfolio__nav-section {
    gap: 10px 20px;
  }

  .block-portfolio__nav-item span {
    font-size: 16px;
  }

  .block-portfolio__button span {
    font-size: 16px;
  }

  .block-portfolio__grid {
    grid-template-columns: 1fr;
  }

  .block-portfolio__item--pos-0,
  .block-portfolio__item--pos-1,
  .block-portfolio__item--pos-2,
  .block-portfolio__item--pos-3 {
    grid-column: 1;
  }

  /* Mobile image fix: drop the forced square and show full image naturally */
  .block-portfolio__image {
    aspect-ratio: unset;
    height: auto;
    overflow: visible;
  }

  .block-portfolio__image img {
    position: static;
    width: 100%;
    height: auto;
    object-fit: unset;
  }
}

@media (max-width: 480px) {
  .block-portfolio__content-wrapper {
    padding: 40px 16px;
    gap: 30px;
  }

  .block-portfolio__main-title {
    font-size: 32px;
    letter-spacing: -1.5px;
  }

  .block-portfolio__header-content {
    gap: 15px;
  }

  .block-portfolio__icon-container {
    width: 32px;
    height: 32px;
  }

  .block-portfolio__nav-section {
    gap: 8px 16px;
  }

  .block-portfolio__nav-item span,
  .block-portfolio__button span {
    font-size: 14px;
  }
}






/* == 30-components/works5.css == */
/* Works5 Block */
.block-works5 {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
}

.block-works5__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
}

.block-works5__wrapper {
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* Header Section */
.block-works5__header {
  display: flex;
  justify-content: space-between;
  align-items: last baseline;
  gap: 40px;
  margin-bottom: 0;
}

.block-works5__header-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
}


.block-works5__heading {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 0;
}

.block-works5__heading-part {
  display: inline-block;
  white-space: nowrap;
}

.block-works5__heading-part--black {
  color: #000000;
}

.block-works5__heading-part--gray {
  color: #bbbab6;
}

.block-works5__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: middle;
  color: #000000;
}

.block-works5__heading-icon--black {
  color: #000000;
}

.block-works5__heading-icon--gray {
  color: #bbbab6;
}

.block-works5__heading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-works5__heading-break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.block-works5__subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: inherit;
  margin: 0;
  margin-top: auto;
}

.block-works5__header-right {
  max-width: 428px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.block-works5__description {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: inherit;
}

.block-works5__description p {
  margin: 0 0 18px 0;
}

.block-works5__description p:last-child {
  margin-bottom: 0;
}

.block-works5__description p:empty,
.block-works5__description p:last-child > br:only-child {
  display: none;
}

/* Projects Grid */
.block-works5__projects-large {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.block-works5__projects-small {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.block-works5__project {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.block-works5__project--large {
  width: 652px;
}

.block-works5__project--small {
  width: 428px;
}

.block-works5__project-image-wrapper {
  width: 100%;
  overflow: hidden;
  background-color: #f0f0f0;
  position: relative;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}

.block-works5__project-image-wrapper .block-works5__project-image,
img.block-works5__project-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center;
  display: block;
  transition: opacity 0.3s ease;
  border-radius: 0 !important;
}

.entry-content .block-works5__project-image {
  border-radius: 0 !important;
  height: 100% !important;
}

.block-works5__project-image-wrapper.block-works5__project-image-wrapper--large,
.block-works5__project--large .block-works5__project-image-wrapper {
  height: 652px;
}

.block-works5__project-image-wrapper.block-works5__project-image-wrapper--small,
.block-works5__project--small .block-works5__project-image-wrapper {
  height: 428px;
}

/* Project label — top left, visible on hover */
.block-works5__project-label {
  position: absolute;
  top: 30px;
  left: 30px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.4;
  color: #000000;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-works5__project:hover .block-works5__project-label {
  opacity: 1;
}

/* Project name — bottom left, visible on hover */
.block-works5__project-name {
  position: absolute;
  bottom: 46px;
  left: 30px;
  font-family: 'Switzer', var(--font-heading);
  font-size: 42px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: #000000;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.block-works5__project:hover .block-works5__project-name {
  opacity: 1;
}

/* Hide image on hover to reveal background color */
.block-works5__project[data-hover-color]:hover .block-works5__project-image {
  opacity: 0;
}

/* Project Link */
.block-works5__project-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  gap: 8px;
  width: fit-content;
  height: 46px;
  text-decoration: none;
  transition: opacity 0.3s ease;
  flex: none;
  order: 1;
  flex-grow: 0;
  color: #000000;
}

.block-works5__project-link:visited {
  color: #000000;
}

.block-works5__project-link:hover .block-works5__project-link-icon {
  background: #1a1a1a;
  color: #1a1a1a;
}

.block-works5__project-link-text {
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #000000;
  flex: none;
  order: 0;
  flex-grow: 0;
  white-space: nowrap;
}

.block-works5__project-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #000000;
  color: #000000;
  flex-shrink: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
  position: relative;
  transition: background 0.3s ease, color 0.3s ease;
}

.block-works5__project-link-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Responsive */
@media (max-width: 1400px) {
  .block-works5__projects-large,
  .block-works5__projects-small {
    flex-wrap: wrap;
  }

  .block-works5__project--large,
  .block-works5__project--small {
    width: 100%;
    max-width: 652px;
  }

  .block-works5__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .block-works5__header-right {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .block-works5__container {
    padding: 60px 24px;
  }

  .block-works5__wrapper {
    gap: 40px;
  }

  .block-works5__header-left {
    gap: 40px;
    max-width: 100%;
    min-width: 0;
  }

  .block-works5__heading,
  .block-works5__heading-part,
  .block-works5__subtitle {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
    white-space: normal;
  }

  .block-works5__heading {
    font-size: 32px;
    letter-spacing: -1.6px;
    /* The full-width heading-break sits on its own flex line, so a symmetric
       `gap` applied row-gap twice (line ↔ break ↔ next line) — doubling the
       space before "SOTSIAALMEEDIAS". Keep horizontal spacing but shrink the
       row gap so the two heading lines sit closer (was ~40px, now ~12px). */
    column-gap: 16px;
    row-gap: 6px;
  }

  .block-works5__heading-part {
    font-size: 32px;
    letter-spacing: -1.6px;
  }

  .block-works5__heading-icon {
    width: 32px;
    height: 32px;
  }

  .block-works5__subtitle {
    font-size: 24px;
    letter-spacing: -1.2px;
  }

  .block-works5__description {
    font-size: 16px;
  }

  /* Fix cropped image wrappers — use aspect-ratio instead of fixed height */
  .block-works5__project-image-wrapper.block-works5__project-image-wrapper--large,
  .block-works5__project--large .block-works5__project-image-wrapper {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .block-works5__project-image-wrapper.block-works5__project-image-wrapper--small,
  .block-works5__project--small .block-works5__project-image-wrapper {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .block-works5__projects-large,
  .block-works5__projects-small {
    gap: 16px;
  }
}



/* == 30-components/works3.css == */
/* Works3 Block */
.block-works3 {
  background-color: #000000;
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-works3__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
}

.block-works3__wrapper {
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* Header Section */
.block-works3__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}

.block-works3__header-left {
  flex: 1;
}

.block-works3__heading {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 30px;
  row-gap: 0;
}

.block-works3__heading-part {
  display: inline-block;
  white-space: nowrap;
}

.block-works3__heading-part--white {
  color: #ffffff;
}

.block-works3__heading-part--gray {
  color: #757472;
}

.block-works3__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: middle;
}

.block-works3__heading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-works3__heading-break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.block-works3__header-right {
  width: 428px;
}

.block-works3__description {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: inherit;
}

.block-works3__description p {
  margin: 0;
}

/* Cards Section */
.block-works3__cards {
  display: flex;
  gap: 20px;
  width: 100%;
}

.block-works3__card {
  flex: 1;
  height: 428px;
  border: 1px solid currentColor;
  position: relative;
  background-color: transparent;
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.block-works3__card:hover {
  background-color: var(--hover-bg-color, #FFFFFF);
  color: var(--hover-text-color, #000000);
}

.block-works3__card-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  width: 100%;
  height: 100%;
}

/* Card Info */
.block-works3__card-info {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.block-works3__info-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.block-works3__info-label {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: inherit;
  margin: 0;
}

.block-works3__info-value {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: inherit;
  margin: 0;
}

/* Card Link */
.block-works3__card-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px 0;
  gap: 8px;
  width: fit-content;
  height: 46px;
  text-decoration: none;
  transition: all 0.3s ease;
  flex: none;
  order: 1;
  flex-grow: 0;
}

.block-works3__card:hover .block-works3__card-link {
  opacity: 1;
}

.block-works3__card-link-text {
  width: 111px;
  height: 26px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration-line: underline;
  color: #FFFFFF;
  flex: none;
  order: 0;
  flex-grow: 0;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.block-works3__card:hover .block-works3__card-link-text {
  color: var(--hover-link-text-color, #000000);
}

.block-works3__card-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: #FFFFFF;
  color: #000000;
  flex-shrink: 0;
  flex: none;
  order: 1;
  flex-grow: 0;
  position: relative;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.block-works3__card:hover .block-works3__card-link-icon {
  background: #000000;
  color: #FFFFFF;
}

.block-works3__card-link-icon svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* Responsive Design */
@media screen and (max-width: 1200px) {
  .block-works3__cards {
    flex-direction: column;
  }
  
  .block-works3__card {
    width: 100%;
  }

  .block-works3__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 30px;
  }

  .block-works3__header-right {
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .block-works3__container {
    padding: 60px 30px;
  }

  .block-works3__wrapper {
    gap: 40px;
  }
  
  .block-works3__heading {
    font-size: 48px;
    letter-spacing: -2.4px;
    height: auto;
    gap: 20px;
  }
  
  .block-works3__heading-icon {
    width: 40px;
    height: 40px;
  }
  
  .block-works3__description {
    font-size: 16px;
  }
  
  .block-works3__info-value {
    font-size: 28px;
    letter-spacing: -1.4px;
  }
  
  .block-works3__card-link-text {
    font-size: 18px;
    letter-spacing: -0.5px;
  }
}



/* == 30-components/works1.css == */
/* Works1 Block */
.block-works1 {
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  width: 100%;
}

.block-works1__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
}

.block-works1__wrapper {
  display: flex;
  flex-direction: column;
  gap: 62px;
}

/* Header Section */
.block-works1__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.block-works1__header-left {
  width: 540px;
  display: flex;
  flex-direction: column;
  gap: 62px;
}

.block-works1__heading-wrapper {
  display: flex;
  gap: 30px;
  align-items: center;
}

.block-works1__heading {
  font-family: 'Switzer', var(--font-heading);
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -4.1px;
  text-transform: uppercase;
  font-weight: 500;
  text-align: left;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}

.block-works1__heading-part {
  display: inline-block;
  white-space: nowrap;
}

.block-works1__heading-part--black {
  color: #000000;
}

.block-works1__heading-part--gray {
  color: #bbbab6;
}

.block-works1__heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  vertical-align: middle;
  color: #000000;
}

.block-works1__heading-icon--black {
  color: #000000;
}

.block-works1__heading-icon--gray {
  color: #bbbab6;
}

.block-works1__heading-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-works1__heading-break {
  display: block;
  width: 100%;
  height: 0;
  line-height: 0;
}

.block-works1__subtitle {
  font-family: var(--font-sans);
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -1.8px;
  color: inherit;
  width: 100%;
}

.block-works1__header-right {
  width: 428px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.block-works1__description {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: inherit;
  width: 100%;
}

.block-works1__description p {
  margin: 0 0 18px 0;
}

.block-works1__description p:last-child {
  margin-bottom: 0;
}

/* Image Section */
.block-works1__image-section {
  width: 1324px;
  height: 765px;
  background-color: #000000;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}

.block-works1__image-container {
  position: absolute;
  width: 1041px;
  height: 640.298px;
  left: 50%;
  top: calc(50% + 62.65px);
  transform: translate(-50%, -50%);
}

.block-works1__image-container .block-works1__image,
img.block-works1__image {
  position: absolute;
  bottom: -15.27%;
  left: calc(50% + 0.35px);
  top: -15.27%;
  transform: translateX(-50%);
  width: 1357.706px !important;
  max-width: none !important;
  height: auto;
  object-fit: cover !important;
  object-position: center center;
}

/* Responsive Design */
@media screen and (max-width: 1400px) {
  .block-works1__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .block-works1__header-left,
  .block-works1__header-right {
    width: 100%;
  }

  .block-works1__image-section {
    width: 100%;
    height: auto;
    aspect-ratio: 1324 / 765;
  }

  .block-works1__image-container {
    width: 78.7%;
    height: auto;
    aspect-ratio: 1041 / 640.298;
  }

  .block-works1__image {
    width: 130%;
    height: 130%;
    bottom: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

@media screen and (max-width: 768px) {
  .block-works1__container {
    padding: 60px 20px;
  }

  .block-works1__wrapper {
    gap: 40px;
  }
  
  .block-works1__heading {
    font-size: 48px;
    letter-spacing: -2.4px;
    gap: 20px;
  }
  
  .block-works1__heading-icon {
    width: 40px;
    height: 40px;
  }

  .block-works1__subtitle {
    font-size: 24px;
    letter-spacing: -1.2px;
  }
  
  .block-works1__description {
    font-size: 16px;
  }

  /* Mobile image: override the desktop artistic crop with a natural full-width display */
  .block-works1__image-section {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
    background-color: transparent;
  }

  .block-works1__image-container {
    position: relative;
    width: 100%;
    height: auto;
    left: auto;
    top: auto;
    transform: none;
    aspect-ratio: unset;
  }

  .block-works1__image-container .block-works1__image,
  img.block-works1__image {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    bottom: auto !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    object-fit: contain !important;
    display: block;
  }
}





/* == 30-components/blog-posts.css == */
/* Blog Posts Block */
.blog-posts-block {
    --hover-color: #f237a6;
}

.blog-posts-container {
    padding: 120px 0;
    max-width: 1400px;
    margin: 0 auto;
    padding-left: clamp(20px, 4vw, 58px);
    padding-right: clamp(20px, 4vw, 58px);
}

/* Navigation */
.blog-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 40px;
    margin-bottom: 62px;
}

.blog-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.blog-nav-item.active::before {
    content: '';
    width: 8px;
    height: 8px;
    background-color: black;
    flex-shrink: 0;
}

.blog-nav-item a {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.6px;
    line-height: normal;
    text-decoration: none;
    color: #bbbab6;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.blog-nav-item a:hover {
    color: var(--hover-color);
}

.blog-nav-item.active a {
    color: black;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

/* Grid */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 428px));
    gap: 20px;
    justify-content: center;
}

/* Zigzag pattern */
/* Row 1: Post 1, Post 2, empty */
.blog-post-card:nth-child(6n+1) {
    grid-column: 1;
}

.blog-post-card:nth-child(6n+2) {
    grid-column: 2;
}

/* Row 2: empty, Post 3, Post 4 */
.blog-post-card:nth-child(6n+3) {
    grid-column: 2;
}

.blog-post-card:nth-child(6n+4) {
    grid-column: 3;
}

/* Row 3: Post 5, Post 6, empty */
.blog-post-card:nth-child(6n+5) {
    grid-column: 1;
}

.blog-post-card:nth-child(6n+6) {
    grid-column: 2;
}

.blog-posts-row {
    display: contents;
}

/* Post Card */
.blog-post-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}

/* Stretched link: the existing "Vaata lähemalt" link's clickable area
   extends over the entire card (image, category, title and link). Inner
   text remains selectable; the link wins over hover thanks to z-index. */
.blog-post-card .blog-post-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}

.blog-post-card > *:not(.blog-post-link) {
    position: relative;
}

/* Show the pointer cursor when hovering any part of the card */
.blog-post-card {
    cursor: pointer;
}

.blog-post-image {
    width: 100%;
    aspect-ratio: 1;
    height: auto;
    position: relative;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.blog-post-card:hover .blog-post-image img {
    transform: scale(1.05);
}

.blog-post-category {
    font-size: 18px;
    font-weight: 700;
    color: var(--hover-color);
    line-height: 1.4;
}

.blog-post-title {
    font-size: 36px;
    font-weight: 400;
    color: black;
    line-height: 1.1;
    letter-spacing: -1.8px;
    transition: color 0.3s ease;
}

.blog-post-card:hover .blog-post-title {
    color: var(--hover-color);
}

.blog-post-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    text-decoration: none;
    color: black;
}

.blog-post-link-text {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.6px;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    transition: color 0.3s ease;
}

.blog-post-card:hover .blog-post-link-text {
    color: var(--hover-color);
}

.blog-arrow-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.blog-post-card:hover .blog-arrow-icon {
    transform: translateX(4px);
}

.blog-arrow-icon .arrow-bg {
    transition: fill 0.3s ease;
}

.blog-post-card:hover .blog-arrow-icon .arrow-bg {
    fill: var(--hover-color);
}

/* No posts message */
.blog-no-posts {
    text-align: center;
    font-size: 20px;
    color: #bbbab6;
    padding: 60px 20px;
}

/* Pagination */
.blog-pagination {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

/* When there is only one page the container is left empty — hide it so it
   takes no vertical space (and no leftover page numbers linger after filtering). */
.blog-pagination:empty {
    display: none;
}

.blog-pagination .page-numbers {
    list-style: none;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 0;
    margin: 0;
}

.blog-pagination .page-numbers li {
    list-style: none;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
    display: inline-block;
    padding: 12px 20px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    color: black;
    border: 2px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.blog-pagination .page-numbers a:hover {
    background-color: var(--hover-color);
    border-color: var(--hover-color);
    color: white;
}

.blog-pagination .page-numbers .current {
    background-color: black;
    border-color: black;
    color: white;
}

/* Load More Button */
.blog-load-more-container {
    margin-top: 80px;
    display: flex;
    justify-content: center;
}

.blog-load-more {
    padding: 16px 40px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.6px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blog-load-more:hover {
    background-color: var(--hover-color);
    transform: translateY(-2px);
}

.blog-load-more:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.blog-load-more .load-more-spinner {
    display: none;
}

.blog-load-more.loading .load-more-text {
    display: none;
}

.blog-load-more.loading .load-more-spinner {
    display: inline;
}

/* Responsive */

/* Tablet: 2-veeru paigutus */
@media (max-width: 1100px) {
    .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    /* Tühista zigzag - kõik kaardid voolavad järjest */
    .blog-post-card:nth-child(n) {
        grid-column: auto;
    }
}

/* Mobiil: 1-veeru paigutus */
@media (max-width: 640px) {
    .blog-posts-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .blog-post-card {
        max-width: 428px;
        margin: 0 auto;
        width: 100%;
    }

    .blog-posts-container {
        padding: 60px 20px;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .blog-post-title {
        font-size: 28px;
    }

    .blog-nav {
        gap: 10px 20px;
    }

    .blog-nav-item a {
        font-size: 16px;
    }

    .blog-post-link-text {
        font-size: 16px;
    }

    .blog-pagination .page-numbers a,
    .blog-pagination .page-numbers span {
        padding: 10px 16px;
        font-size: 16px;
    }

    .blog-load-more {
        padding: 14px 32px;
        font-size: 18px;
    }
}


/* == 30-components/single-post.css == */
/* Single Post */
.single-post {
    margin: 0;
    padding: 0;
}

/* Post Header */
.single-post-header {
    max-width: 1440px;
    margin: 0 auto;
    padding: 152px 58px 0;
}

/* Post Title */
.single-post-title {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 82px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    margin: 0 0 62px 0;
    color: #000;
}

/* Meta Row */
.single-post-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 22px;
}

/* Post Meta */
.single-post-meta {
    display: flex;
    gap: 42px;
}

.single-post-meta-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.single-post-meta-label {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    color: #BBBAB6;
}

.single-post-meta-value {
    font-size: 18px;
    line-height: 1.4;
    color: #000;
}

.single-post-author-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.single-post-author-link:hover,
.single-post-author-link:focus-visible {
    color: #f237a6;
    border-bottom-color: currentColor;
}

/* Share Buttons */
.single-post-share {
    display: flex;
    gap: 16px;
}

.single-post-share-btn {
    width: 52px;
    height: 52px;
    background: #000;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
}

.single-post-share-btn:hover {
    background: #F237A6;
    transform: scale(1.05);
}

.single-post-share-btn svg {
    width: 20px;
    height: 20px;
}

/* Hero Image */
.single-post-hero-image {
    width: 100%;
    height: 635px;
    overflow: hidden;
    margin-bottom: 0;
}

.single-post-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Post Content Wrapper - Two Column Layout */
.single-post-content-wrapper {
    max-width: 1440px;
    margin: 0 auto;
    padding: 120px 58px 80px;
    display: flex;
    gap: 64px;
    align-items: flex-start;
    justify-content: center;
}

/* Table of Contents (Left Column) */
.single-post-toc {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    flex-shrink: 0;
    width: 316px;
    position: sticky;
    top: 120px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    align-self: flex-start;
}

/* Custom scrollbar for TOC */
.single-post-toc::-webkit-scrollbar {
    width: 4px;
}

.single-post-toc::-webkit-scrollbar-track {
    background: transparent;
}

.single-post-toc::-webkit-scrollbar-thumb {
    background: #bbbab6;
    border-radius: 2px;
}

.single-post-toc::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* When TOC is hidden, center the content */
.single-post-content-wrapper:has(.single-post-toc[style*="display: none"]) {
    justify-content: center;
}

.single-post-content-wrapper:has(.single-post-toc[style*="display: none"]) .single-post-content {
    margin: 0 auto;
}

.single-post-toc .toc-item {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

.single-post-toc .toc-item-border {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 20px;
    padding-right: 20px;
    width: 100%;
}

.single-post-toc .toc-item-border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-bottom: 1px solid #bbbab6;
}

.single-post-toc .toc-item-content {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    flex-shrink: 0;
    width: 100%;
    white-space: pre-wrap;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.single-post-toc .toc-item-content:hover {
    opacity: 0.7;
}

.single-post-toc .toc-number {
    font-family: 'Switzer', sans-serif;
    font-weight: 500;
    line-height: 1.1;
    flex-shrink: 0;
    color: #bbbab6;
    font-size: 26px;
    letter-spacing: -1.3px;
    text-transform: uppercase;
    width: 60px;
}

.single-post-toc .toc-text {
    flex: 1 0 0;
    font-family: 'Helvetica', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    min-height: 1px;
    min-width: 1px;
    font-size: 18px;
    color: #000;
}

.single-post-toc .toc-item.active .toc-number {
    color: #F237A6;
}

.single-post-toc .toc-item.active .toc-text {
    color: #F237A6;
}

/* Post Content (Right Column) */
.single-post-content {
    /* Täida TOC kõrval olev vaba ruum (varem fikseeritud 652px -> kitsam kui tavaleht).
       Mobiilis (<=920px) jääb width:100% media query'st kehtima. */
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    width: auto;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 62px;
    /* Frame 211 gap */
}

/* Content sections - h2 + following content grouped together */
/* Remove gap before h2 if it follows content */
.single-post-content > *:not(:first-child) {
    margin-top: 0;
}

/* Add proper spacing between sections (h2 groups) */
.single-post-content h2 {
    margin-top: 62px;
}

/* First h2 should not have top margin */
.single-post-content > h2:first-of-type,
.single-post-content > p:first-child + h2 {
    margin-top: 0;
}

/* Elements immediately after h2 should have 20px gap */
.single-post-content h2 + * {
    margin-top: 20px !important;
}

/* Elements within a section (after h2) should have 20px gap between them */
.single-post-content h2 ~ *:not(h2) + *:not(h2) {
    margin-top: 20px;
}

/* But if next element is h2, it should have 62px gap (new section) */
.single-post-content h2 ~ * + h2 {
    margin-top: 62px;
}

/* First paragraph (Intro/Huge Body) */
.single-post-content>p:first-child {
    font-family: 'Helvetica', sans-serif;
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.8px;
    color: #000000 !important;
    margin: 0;
    white-space: pre-wrap;
}

.single-post-content p {
    font-family: 'Helvetica', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    /* Body M line-height */
    margin: 0;
    /* Margin handled by flex gap */
    color: #141414 !important;
}

/* Empty paragraphs (like &nbsp;) should be hidden or minimal */
.single-post-content p:empty,
.single-post-content p:has(br:only-child) {
    display: none;
}

.single-post-content * {
    color: #141414;
}

.single-post-content h1,
.single-post-content h2,
.single-post-content h3,
.single-post-content h4 {
    margin: 0;
}

.single-post-content h2 {
    font-family: 'Switzer', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: #000000 !important;
}

.single-post-content h3 {
    font-family: 'Switzer', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: #000000 !important;
}

.single-post-content h4 {
    font-family: 'Switzer', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    color: #000000 !important;
}

.single-post-content ul,
.single-post-content ol {
    font-size: 18px;
    line-height: 1.4;
    margin: 0;
    padding-left: 27px;
    color: #141414;
}

.single-post-content li {
    margin-bottom: 0;
    line-height: 1.4;
    color: #141414 !important;
}

.single-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 32px 0;
}

.single-post-content blockquote {
    border-left: 4px solid #f237a6;
    padding-left: 24px;
    margin: 32px 0;
    font-size: 20px;
    font-style: italic;
    color: #666 !important;
}

.single-post-content blockquote * {
    color: #666 !important;
}

.single-post-content a {
    color: #f237a6;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.single-post-content a:hover {
    color: #000;
}

/* Tables (e.g. legal / privacy pages) */
.single-post-content .wp-block-table,
.single-post-content figure.wp-block-table {
    margin: 32px 0;
    width: 100%;
    overflow-x: auto;
}

.single-post-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
}

.single-post-content thead th {
    background: #000;
    color: #fff;
    text-align: left;
    font-weight: 600;
    padding: 14px 18px;
    border: 1px solid #000;
}

.single-post-content td,
.single-post-content th {
    padding: 14px 18px;
    border: 1px solid #ddd;
    vertical-align: top;
    text-align: left;
}

.single-post-content tbody tr:nth-child(even) {
    background: #f7f7f5;
}

/* Post Tags */
.single-post-tags {
    max-width: 652px;
    margin: 0 auto;
    padding: 0 58px 80px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.tags-label {
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

.single-post-tags a {
    display: inline-block;
    padding: 8px 16px;
    background: #f5f5f5;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
}

.single-post-tags a:hover {
    background: #f237a6;
    color: white;
}

/* Related Posts */
.related-posts {
    /* White (was #F7F7F5): some featured images have a light-grey background
       that blended into the grey section and looked broken. */
    background: #fff;
    padding: 120px 0;
}

.related-posts-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 58px;
}

.related-posts-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 62px;
}

.related-posts-title {
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 82px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    margin: 0;
    color: #000;
}

.related-posts-icon {
    width: 62px;
    height: 62px;
    flex-shrink: 0;
}

.related-posts-grid {
    display: flex;
    gap: 20px;
}

/* Related Post Card */
.related-post-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.related-post-image {
    width: 100%;
    height: 428px;
    display: block;
    overflow: hidden;
    margin-bottom: 10px;
}

.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.related-post-card:hover .related-post-image img {
    transform: scale(1.05);
}

.related-post-category {
    font-size: 18px;
    font-weight: 700;
    color: #F237A6;
    line-height: 1.4;
    margin-bottom: 10px;
}

.related-post-title {
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -1.8px;
    color: #000;
    margin: 0 0 10px 0;
    transition: color 0.3s ease;
}

.related-post-card:hover .related-post-title {
    color: #F237A6;
}

.related-post-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: underline;
    font-family: 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.6px;
    color: #000;
    padding: 10px 0;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    transition: color 0.3s ease;
}

.related-post-card:hover .related-post-link {
    color: #F237A6;
}

.related-arrow-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.related-post-card:hover .related-arrow-icon {
    transform: translateX(4px);
}

.related-arrow-icon .arrow-bg {
    transition: fill 0.3s ease;
}

.related-post-card:hover .related-arrow-icon .arrow-bg {
    fill: #F237A6;
}

/* Responsive */
@media (max-width: 920px) {
    .single-post-header {
        padding: 100px 20px 0;
    }

    .single-post-title {
        font-size: 48px;
        letter-spacing: -2.4px;
        margin-bottom: 40px;
    }

    .single-post-meta {
        gap: 30px;
    }

    .single-post-meta-label {
        font-size: 20px;
        letter-spacing: -1px;
    }

    .single-post-meta-value {
        font-size: 16px;
    }

    /* Let the featured image show in full at its natural aspect ratio on
       mobile — a fixed height + object-fit:cover cropped the wide title graphic,
       cutting off the icons/text on the sides. */
    .single-post-hero-image {
        height: auto;
    }

    .single-post-hero-image img {
        height: auto;
        object-fit: contain;
    }

    .single-post-content-wrapper {
        flex-direction: column;
        padding: 80px 20px 60px;
        gap: 40px;
    }

    .single-post-toc {
        position: static;
        width: 100%;
        /* Show the table of contents BEFORE the post body on mobile (it was
           order:2 = stranded at the very bottom, after all the content). */
        order: 0;
        margin-bottom: 40px;
    }

    .single-post-content {
        width: 100%;
        max-width: 100%;
        order: 1;
    }

    .single-post-tags {
        padding: 0 20px 60px;
    }
    
    /* When TOC is hidden in mobile, center content */
    .single-post-content-wrapper:has(.single-post-toc[style*="display: none"]) .single-post-content {
        margin: 0 auto;
    }

    .related-posts {
        padding: 80px 0;
    }

    .related-posts-container {
        padding: 0 20px;
    }

    .related-posts-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 40px;
    }

    .related-posts-title {
        font-size: 48px;
        letter-spacing: -2.4px;
    }

    .related-posts-icon {
        width: 48px;
        height: 48px;
    }

    .related-posts-grid {
        flex-direction: column;
        gap: 40px;
    }
}

@media (max-width: 480px) {
    .single-post-header {
        /* 60px left the title tucked under the 85px fixed header. Clear it. */
        padding: 110px 20px 0;
    }

    .single-post-title {
        font-size: 36px;
        letter-spacing: -1.8px;
        margin-bottom: 30px;
    }

    .single-post-meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .single-post-meta {
        gap: 20px;
    }

    .single-post-meta-label {
        font-size: 16px;
        letter-spacing: -0.8px;
    }

    .single-post-meta-value {
        font-size: 14px;
    }

    .single-post-share-btn {
        width: 44px;
        height: 44px;
    }

    .single-post-hero-image {
        height: auto;
    }

    .single-post-content-wrapper {
        padding: 60px 20px 40px;
    }

    .single-post-content p {
        font-size: 16px;
    }

    .single-post-content h2 {
        font-size: 28px;
    }

    .single-post-content h3 {
        font-size: 22px;
    }

    /* The post body is a flex column with a uniform 62px gap, so headings sit
       the same distance from text as paragraphs do from each other and don't
       read as a new section. Add extra top space before a heading (this margin
       ADDS to the flex gap) so sections separate clearly on mobile. The
       higher-specificity selector beats the blanket
       `.single-post-content > :not(:first-child){margin-top:0}` rule. */
    .single-post-content > h2:not(:first-child) {
        margin-top: 28px;
    }

    .single-post-content > h3:not(:first-child) {
        margin-top: 16px;
    }

    .single-post-toc .toc-number {
        font-size: 20px;
        letter-spacing: -1px;
        width: 50px;
    }

    .single-post-toc .toc-text {
        font-size: 16px;
    }

    .related-posts-title {
        font-size: 36px;
        letter-spacing: -1.8px;
    }

    .related-posts-icon {
        width: 40px;
        height: 40px;
    }

    .related-post-card {
        width: 100%;
    }

    .related-post-image {
        height: auto;
        aspect-ratio: 1;
    }

    .related-post-title {
        font-size: 28px;
        letter-spacing: -1.4px;
    }

    .related-post-link {
        font-size: 18px;
    }
}

/* == 30-components/author-page.css == */
/* Author Profile Page */

.author-profile {
    padding: 180px 0 60px;
    background-color: #fff;
    text-align: left;
}

.author-profile-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 58px);
}

.author-profile-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
    text-align: left;
}

.author-avatar {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5f5f5;
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.author-profile-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.author-name {
    font-family: 'Switzer', sans-serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -2.4px;
    text-transform: uppercase;
    margin: 0;
    color: #000;
}

.author-role {
    font-family: 'Helvetica', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #6b6b6b;
    margin: 0;
    font-weight: 500;
}

.author-bio {
    max-width: 720px;
}

.author-bio p {
    font-family: 'Helvetica', sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: #141414;
    margin: 0 0 12px;
}

.author-bio p:last-child {
    margin-bottom: 0;
}

.author-highlights {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.author-highlights li {
    position: relative;
    padding-left: 24px;
    font-family: 'Helvetica', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: #141414;
}

.author-highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--hover-color, #f237a6);
}

.author-socials {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.author-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #000;
    color: #fff;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.author-social:hover,
.author-social:focus-visible {
    background-color: var(--hover-color, #f237a6);
    color: #fff;
    transform: translateY(-2px);
}

.author-social svg {
    width: 20px;
    height: 20px;
}

/* Author posts section */
.author-posts {
    --hover-color: #f237a6;
    padding-top: 40px;
}

.author-posts-header {
    max-width: 1400px;
    margin: 0 auto 62px;
    padding: 0 clamp(20px, 4vw, 58px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.author-posts-title {
    font-family: 'Switzer', sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -1.6px;
    text-transform: uppercase;
    margin: 0;
    color: #000;
}

/* Force 3 columns and reset zigzag */
.author-posts .blog-posts-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    max-width: 1400px;
    margin: 0 auto;
}

.author-posts .blog-post-card {
    grid-column: auto !important;
    width: 100% !important;
}

.author-posts .blog-post-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
}

/* Tablet */
@media (max-width: 920px) {
    .author-profile {
        padding: 140px 0 40px;
    }

    .author-profile-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        text-align: left;
    }

    .author-profile-content {
        align-items: flex-start;
    }

    .author-avatar {
        width: 200px;
        height: 200px;
    }

    .author-name {
        letter-spacing: -1.6px;
    }

    .author-posts .blog-posts-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile */
@media (max-width: 540px) {
    .author-profile {
        padding: 120px 0 30px;
    }

    .author-avatar {
        width: 160px;
        height: 160px;
    }

    .author-name {
        font-size: 36px;
        letter-spacing: -1.2px;
    }

    .author-role {
        font-size: 16px;
    }

    .author-posts .blog-posts-grid {
        grid-template-columns: 1fr !important;
    }

    .author-posts-title {
        font-size: 26px;
    }
}


/* == 30-components/block-styles.css == */
/* Block Style Variations */

/* Hero Block Styles */
.is-style-gradient.block-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: #fff;
}

.is-style-gradient.block-hero .block-hero__title,
.is-style-gradient.block-hero .block-hero__text {
  color: #fff;
}

/* Services Block Styles */
.is-style-minimal.block-services .card {
  box-shadow: none;
  border: 1px solid var(--color-border);
  background: transparent;
}

.is-style-minimal.block-services .card:hover {
  border-color: var(--color-primary);
  transform: none;
  box-shadow: none;
}

/* Pricing Block Styles */
.is-style-compact.block-pricing .pricing-card {
  padding: var(--space-3);
}

.is-style-compact.block-pricing .pricing-card__price {
  margin-bottom: var(--space-2);
}

.is-style-compact.block-pricing .pricing-card__features {
  margin-bottom: var(--space-3);
}

.is-style-highlighted.block-pricing .pricing-card--featured {
  background: var(--color-primary);
  color: #fff;
  transform: scale(1.08);
}

.is-style-highlighted.block-pricing .pricing-card--featured .pricing-card__name,
.is-style-highlighted.block-pricing .pricing-card--featured .pricing-card__amount,
.is-style-highlighted.block-pricing .pricing-card--featured .pricing-card__feature {
  color: #fff;
}

.is-style-highlighted.block-pricing .pricing-card--featured::before {
  background: var(--color-accent);
}

/* Contact Form Block Styles */
.is-style-boxed.block-contact .block-contact__form {
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--color-border);
}

.is-style-side-by-side.block-contact .block-contact__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}

@media (max-width: 900px) {
  .is-style-side-by-side.block-contact .block-contact__inner {
    grid-template-columns: 1fr;
  }
}

/* WordPress Core Block Styles Enhancement */

/* Buttons */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 2px solid currentColor;
}

.wp-block-button.is-style-squared .wp-block-button__link {
  border-radius: var(--radius-sm);
}

/* Images */
.wp-block-image.is-style-rounded img {
  border-radius: var(--radius-xl);
}

.wp-block-image.is-style-shadow img {
  box-shadow: var(--shadow-xl);
}

/* Quotes */
.wp-block-quote.is-style-large {
  font-size: var(--fs-h4);
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-3);
}

/* Lists */
.wp-block-list.is-style-checklist {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-checklist li::before {
  content: '✓';
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--space-1);
  background: var(--color-success);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5rem;
  font-weight: bold;
}



/* == 30-components/mouse-trail.css == */
/**
 * Fluid Simulation Cursor Effect
 * WebGL-based fluid dynamics visualization
 * Reference: https://reactbits.dev/animations/splash-cursor
 */

/* Canvas styling */
#fluid-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  display: block;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Disable on touch-only devices (mobile/tablet) for performance.
   Desktop browsers (Chrome/Edge/Brave/Firefox/Safari) all show the trail —
   JS handles per-browser logic (#fluid-cursor for WebGL, #safari-trail for Safari fallback). */
@media (hover: none) and (pointer: coarse) {
  #fluid-cursor,
  #safari-trail {
    display: none !important;
  }
}


/* == 30-components/modal.css == */
/* Modal Component */
.sharks-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sharks-modal.is-active {
  opacity: 1;
  visibility: visible;
}

.sharks-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.sharks-modal__container {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: #0c1415;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  overflow: hidden;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.sharks-modal.is-active .sharks-modal__container {
  transform: scale(1) translateY(0);
}

.sharks-modal__container--large {
  max-width: 1000px;
}

.sharks-modal__content {
  position: relative;
  padding: 48px 40px;
  overflow-y: auto;
  max-height: 90vh;
}

.sharks-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.sharks-modal__close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.sharks-modal__close svg {
  width: 20px;
  height: 20px;
}

.sharks-modal__title {
  font-family: 'Switzer', var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 24px 0;
  padding-right: 60px;
  line-height: 1.2;
}

.sharks-modal__body {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
}

.sharks-modal__body p {
  margin-bottom: 16px;
}

.sharks-modal__body p:last-child {
  margin-bottom: 0;
}

/* Calendly specific styles */
.sharks-modal__body--calendly {
  padding: 0;
  margin: 0;
}

.sharks-modal--calendly .sharks-modal__content {
  padding: 20px;
}

.sharks-modal--calendly .sharks-modal__close {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.3);
}

/* Contact Form 7 styles in modal */
.sharks-modal__body .wpcf7 {
  margin: 0;
}

.sharks-modal__body .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sharks-modal__body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.sharks-modal__body input[type="text"],
.sharks-modal__body input[type="email"],
.sharks-modal__body input[type="tel"],
.sharks-modal__body textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Manrope', var(--font-sans);
  transition: all 0.2s ease;
}

.sharks-modal__body input[type="text"]:focus,
.sharks-modal__body input[type="email"]:focus,
.sharks-modal__body input[type="tel"]:focus,
.sharks-modal__body textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.sharks-modal__body textarea {
  min-height: 120px;
  resize: vertical;
}

.sharks-modal__body input[type="submit"] {
  padding: 16px 32px;
  background: #ffffff;
  color: #0c1415;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Switzer', var(--font-heading);
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  align-self: flex-start;
}

.sharks-modal__body input[type="submit"]:hover {
  background: #FFE65D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 230, 93, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .sharks-modal__container {
    width: 95%;
    max-height: 95vh;
  }
  
  .sharks-modal__content {
    padding: 32px 24px;
    max-height: 95vh;
  }
  
  .sharks-modal__title {
    font-size: 24px;
    padding-right: 50px;
  }
  
  .sharks-modal__close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
  }
  
  .sharks-modal__close svg {
    width: 18px;
    height: 18px;
  }
  
  .sharks-modal--calendly .sharks-modal__content {
    padding: 12px;
  }
  
  .sharks-modal__body--calendly .calendly-inline-widget {
    height: 600px !important;
  }
}

@media (max-width: 480px) {
  .sharks-modal__content {
    padding: 24px 20px;
  }
  
  .sharks-modal__title {
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .sharks-modal__body {
    font-size: 15px;
  }
  
  .sharks-modal__body input[type="text"],
  .sharks-modal__body input[type="email"],
  .sharks-modal__body input[type="tel"],
  .sharks-modal__body textarea {
    padding: 12px 16px;
    font-size: 15px;
  }
  
  .sharks-modal__body input[type="submit"] {
    padding: 14px 28px;
    font-size: 16px;
  }
}


/* == 30-components/modal-legacy.css == */
/* Legacy Modal Component (for data-modal-trigger links) */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  display: flex;
  opacity: 1;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  background: #0c1415;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 48px 40px;
  overflow-y: auto;
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 10;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.modal-header {
  margin-bottom: 24px;
}

.modal-title {
  font-family: 'Switzer', var(--font-heading);
  font-size: 32px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 12px 0;
  padding-right: 60px;
  line-height: 1.2;
}

.modal-description {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

.modal-body {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
}

.modal-body p {
  margin-bottom: 16px;
}

.modal-body p:last-child {
  margin-bottom: 0;
}

/* Contact Form 7 styles in legacy modal */
.modal-body .wpcf7 {
  margin: 0;
}

.modal-body .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.modal-body .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.modal-body input[type="text"],
.modal-body input[type="email"],
.modal-body input[type="tel"],
.modal-body textarea {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: #ffffff;
  font-size: 16px;
  font-family: 'Manrope', var(--font-sans);
  transition: all 0.2s ease;
}

.modal-body input[type="text"]:focus,
.modal-body input[type="email"]:focus,
.modal-body input[type="tel"]:focus,
.modal-body textarea:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  outline: none;
}

.modal-body textarea {
  min-height: 120px;
  resize: vertical;
}

.modal-body input[type="submit"] {
  padding: 16px 32px;
  background: #ffffff;
  color: #0c1415;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Switzer', var(--font-heading);
  cursor: pointer;
  transition: all 0.2s ease;
  width: auto;
  align-self: flex-start;
}

.modal-body input[type="submit"]:hover {
  background: #FFE65D;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 230, 93, 0.3);
}

/* Responsive */
@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    max-height: 95vh;
    padding: 32px 24px;
  }
  
  .modal-title {
    font-size: 24px;
    padding-right: 50px;
  }
  
  .modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .modal-content {
    padding: 24px 20px;
  }
  
  .modal-title {
    font-size: 20px;
    margin-bottom: 12px;
  }
  
  .modal-description {
    font-size: 15px;
  }
  
  .modal-body {
    font-size: 15px;
  }
  
  .modal-body input[type="text"],
  .modal-body input[type="email"],
  .modal-body input[type="tel"],
  .modal-body textarea {
    padding: 12px 16px;
    font-size: 15px;
  }
  
  .modal-body input[type="submit"] {
    padding: 14px 28px;
    font-size: 16px;
  }
}


/* == 30-components/big-form.css == */
/* Big Form Block */
.block-big-form {
  padding: 0;
  margin: 0;
}

.block-big-form__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 70px;
}

/* Header */
.block-big-form__header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.block-big-form__icons {
  display: flex;
  gap: 30px;
  align-items: center;
}

.block-big-form__icons svg {
  width: 62px;
  height: 62px;
  flex-shrink: 0;
  display: block;
}

.block-big-form__title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 180px;
  line-height: 1;
  letter-spacing: -9px;
  text-transform: uppercase;
  text-align: center;
  color: #000000;
  margin: 0;
  width: 100%;
}

/* Each title line on its own row (title is always two lines) */
.block-big-form__title-line {
  display: block;
}

/* Form wrap */
.block-big-form__form-wrap {
  width: 552px;
  max-width: 100%;
}

/* Placeholder in editor */
.block-big-form__form-placeholder {
  border: 2px dashed #ccc;
  padding: 40px;
  text-align: center;
  color: #999;
  font-size: 16px;
}

/* ===== CF7 form layout =====
 * p is the grid item; label and control-wrap use display:contents to flatten.
 * p has position:relative so ::after pseudo-elements work for asterisks.
 */
.block-big-form .wpcf7-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 10px;
  width: 100%;
}

/* All p tags in form get position:relative for ::after asterisks */
.block-big-form .wpcf7-form p {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}

/* label and control-wrap still flatten so input fills p */
.block-big-form .wpcf7-form .wpcf7-form-control-wrap,
.block-big-form .wpcf7-form label {
  display: contents;
}

/* Full-width containers */
.block-big-form .wpcf7-form p:has(textarea),
.block-big-form .wpcf7-form p:has(input[type="submit"]),
.block-big-form .wpcf7-form p:has(.wpcf7-submit),
.block-big-form .wpcf7-form .wpcf7-response-output {
  grid-column: 1 / -1;
}

/* Center submit button wrapper */
.block-big-form .wpcf7-form p:has(input[type="submit"]),
.block-big-form .wpcf7-form p:has(.wpcf7-submit) {
  text-align: center;
}

/* The CF7 loading spinner sits inline right after the submit button, which
   pushed the (text-align:center) button off-centre to the left. Hide it so the
   button is exactly centred within the form. */
.block-big-form .wpcf7-spinner {
  display: none;
}

/* Asterisk is appended to placeholder text via JS (see big-form.php) */

/* ===== Input & textarea styling ===== */
.block-big-form .wpcf7-form input[type="text"],
.block-big-form .wpcf7-form input[type="email"],
.block-big-form .wpcf7-form input[type="tel"],
.block-big-form .wpcf7-form input[type="number"],
.block-big-form .wpcf7-form textarea {
  width: 100%;
  padding: 20px 10px;
  font-family: var(--font-sans);
  font-size: 18px;
  color: #000000;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #000000 !important;
  border-radius: 0 !important;
  outline: none;
  box-shadow: none !important;
  -webkit-appearance: none;
  appearance: none;
}

.block-big-form .wpcf7-form input[type="text"]::placeholder,
.block-big-form .wpcf7-form input[type="email"]::placeholder,
.block-big-form .wpcf7-form input[type="tel"]::placeholder,
.block-big-form .wpcf7-form input[type="number"]::placeholder,
.block-big-form .wpcf7-form textarea::placeholder {
  color: #bbbab6;
}

.block-big-form .wpcf7-form textarea {
  resize: none;
  min-height: 30px !important;
  height: 58px !important;
  display: block;
}

/* ===== Submit button ===== */
.block-big-form .wpcf7-form input[type="submit"],
.block-big-form .wpcf7-submit {
  background-color: #000000 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11' fill='none'%3E%3Cpath d='M0 5.5L12 5.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 0.5L12.5 5.5L7 10.5' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 18px center !important;
  background-size: 22px auto !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 15px 55px 15px 26px !important;
  font-family: 'Switzer', var(--font-heading) !important;
  font-weight: 500 !important;
  font-size: 20px !important;
  letter-spacing: -0.6px !important;
  text-transform: uppercase !important;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  display: inline-block !important;
  width: auto !important;
  margin-top: 20px !important;
}

.block-big-form .wpcf7-form input[type="submit"]:hover,
.block-big-form .wpcf7-submit:hover {
  opacity: 0.85;
}

/* Validation messages */
.block-big-form .wpcf7-not-valid-tip {
  font-size: 13px;
  color: #F237A6;
  margin-top: 4px;
  display: block;
  text-align: left;          /* left-align like the other fields (incl. full-width Sõnum) */
}

.block-big-form .wpcf7-response-output,
.block-big-form .wpcf7 form .wpcf7-response-output,
.block-big-form .wpcf7-response-output.wpcf7-validation-errors {
  margin: 0;
  padding: 12px 16px;
  font-size: 15px;
  border: none !important;          /* remove the yellow ring */
  background: transparent !important;
  color: #F237A6 !important;        /* pink, like the field tips */
  text-align: center;
}

/* Invalid textarea (Sõnum) keeps a black underline like the other fields —
   overrides the generic pink ".wpcf7-not-valid" border (which out-specifies
   the bare "textarea" rule). */
.block-big-form .wpcf7-form textarea.wpcf7-not-valid {
  border-bottom-color: #000000 !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .block-big-form__title {
    font-size: 120px;
    letter-spacing: -6px;
  }
}

@media (max-width: 768px) {
  .block-big-form__container {
    padding: 80px 30px;
    gap: 50px;
  }

  .block-big-form__title {
    font-size: 72px;
    letter-spacing: -3.6px;
  }

  .block-big-form__form-wrap {
    width: 100%;
  }

  .block-big-form .form-row {
    flex-direction: column;
    gap: 0;
  }
}

@media (max-width: 480px) {
  .block-big-form__container {
    padding: 60px 20px;
    gap: 40px;
  }

  .block-big-form__title {
    font-size: 50px;
    letter-spacing: -2.5px;
  }

  .block-big-form__icons {
    gap: 15px;
  }

  .block-big-form__icons svg {
    width: 42px;
    height: 42px;
  }
}


/* == 30-components/icon-cards.css == */
/* Icon Cards Block */
.block-icon-cards {
  background: #ffffff;
  padding: 0;
  margin: 0;
}

.block-icon-cards__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 65px;
}

/* Header row: words interleaved with icons — single line, scales with viewport */
.block-icon-cards__header {
  display: flex;
  gap: min(22px, 2.1vw);
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-wrap: nowrap;
  overflow: visible;
}

.block-icon-cards__word {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: min(82px, 5.7vw);
  line-height: 1.1;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  color: #000000;
  white-space: nowrap;
}

.block-icon-cards__icon {
  width: min(62px, 4.3vw);
  height: min(62px, 4.3vw);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block-icon-cards__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Cards row */
.block-icon-cards__cards {
  display: flex;
  gap: 20px;
  width: 100%;
  flex-wrap: wrap;
}

.block-icon-cards__card {
  background: #f7f7f5;
  flex: 1;
  min-width: 280px;
  min-height: 380px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}

.block-icon-cards__card-number {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  color: #bbbab6;
  margin: 0;
}

.block-icon-cards__card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.block-icon-cards__card-title {
  font-family: 'Switzer', var(--font-heading);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  color: #000000;
  margin: 0;
}

.block-icon-cards__card-text {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.4;
  color: #000000;
  margin: 0;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .block-icon-cards__container {
    padding: 60px 20px;
    gap: 40px;
  }

  .block-icon-cards__header {
    flex-wrap: wrap;
    gap: 12px;
    overflow: visible;
  }

  .block-icon-cards__word {
    font-size: 10vw;
    letter-spacing: -0.05em;
  }

  .block-icon-cards__icon {
    width: 7vw;
    height: 7vw;
  }

  .block-icon-cards__card {
    flex: 0 0 100%;
    min-height: auto;
  }

  .block-icon-cards__card-title {
    font-size: 28px;
    letter-spacing: -1.4px;
  }

  .block-icon-cards__card-text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .block-icon-cards__word {
    font-size: 12vw;
  }

  .block-icon-cards__icon {
    width: 8vw;
    height: 8vw;
  }
}


/* == 30-components/two-column-grey.css == */
/* 2 Column Grey Block */
.block-two-column-grey {
  padding: 0;
  margin: 0;
}

.block-two-column-grey.is-bg-black {
  background: #000000;
}

.block-two-column-grey.is-bg-white {
  background: #ffffff;
}

.block-two-column-grey.is-bg-grey {
  background: #bbbab6;
}

.block-two-column-grey__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 58px 120px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.block-two-column-grey__card {
  background: #f7f7f5;
  padding: 60px 58px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  color: #000000;
  min-height: 540px;
}

.block-two-column-grey__icon {
  width: 62px;
  height: 62px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

.block-two-column-grey__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.block-two-column-grey__title {
  font-family: 'Switzer', var(--font-heading, var(--font-sans));
  font-weight: 500;
  font-size: 82px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: #000000;
  margin: 0;
  text-transform: uppercase;
}

.block-two-column-grey__text {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  color: #000000;
  margin: 0;
  max-width: 540px;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .block-two-column-grey__container {
    padding: 0 32px 80px;
    gap: 16px;
  }

  .block-two-column-grey__card {
    padding: 40px 32px;
    min-height: auto;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .block-two-column-grey__container {
    grid-template-columns: 1fr;
    padding: 0 20px 60px;
    gap: 16px;
  }

  .block-two-column-grey__card {
    padding: 32px 24px;
    min-height: auto;
  }

  .block-two-column-grey__icon {
    width: 48px;
    height: 48px;
  }

  .block-two-column-grey__title {
    font-size: 64px;
  }

  .block-two-column-grey__text {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .block-two-column-grey__title {
    font-size: 56px;
  }
}


/* == 30-components/h1-text-cta.css == */
/* H1 + Text CTA Block */
.block-h1-text-cta {
  background: #f7f7f5;
  padding: 0;
  margin: 0;
}

/* Remove WordPress default block-gap above the block wrapper so the section
   sits flush against the previous block (no white strip). */
.wp-block-acf-h1-text-cta {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.block-h1-text-cta__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 120px 58px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.block-h1-text-cta__text {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.block-h1-text-cta__title {
  font-family: 'Switzer', var(--font-heading, var(--font-sans));
  font-weight: 500;
  font-size: 82px;
  line-height: 1.1;
  letter-spacing: -0.05em;
  color: #000000;
  margin: 0;
  text-transform: uppercase;
}

.block-h1-text-cta__subtitle {
  font-family: 'Helvetica', Arial, sans-serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.3;
  color: #000000;
  margin: 0;
}

.block-h1-text-cta__box {
  position: relative;
  display: block;
  background: #000000;
  color: #ffffff;
  text-decoration: none;
  aspect-ratio: 16 / 9;
  min-height: 360px;
  padding: 40px 48px;
  transition: background-color 0.25s ease;
}

a.block-h1-text-cta__box:hover {
  background: #1a1a1a;
}

.block-h1-text-cta__box-arrow {
  position: absolute;
  top: 40px;
  right: 40px;
  width: 64px;
  height: 64px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  transition: transform 0.25s ease;
}

a.block-h1-text-cta__box:hover .block-h1-text-cta__box-arrow {
  transform: translate(4px, -4px);
}

.block-h1-text-cta__box-arrow svg {
  width: 26px;
  height: 26px;
}

.block-h1-text-cta__box-text {
  position: absolute;
  left: 48px;
  bottom: 40px;
  font-family: 'Switzer', var(--font-heading, var(--font-sans));
  font-weight: 500;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-transform: uppercase;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .block-h1-text-cta__container {
    padding: 80px 32px;
    gap: 48px;
  }

  .block-h1-text-cta__title {
    font-size: 64px;
  }

  .block-h1-text-cta__subtitle {
    font-size: 22px;
  }

  .block-h1-text-cta__box {
    min-height: 280px;
    padding: 32px 36px;
  }

  .block-h1-text-cta__box-arrow {
    top: 32px;
    right: 32px;
    width: 52px;
    height: 52px;
  }

  .block-h1-text-cta__box-arrow svg {
    width: 22px;
    height: 22px;
  }

  .block-h1-text-cta__box-text {
    left: 36px;
    bottom: 32px;
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  .block-h1-text-cta__container {
    grid-template-columns: 1fr;
    padding: 60px 20px;
    gap: 40px;
  }

  .block-h1-text-cta__text {
    gap: 32px;
  }

  .block-h1-text-cta__title {
    font-size: 56px;
  }

  .block-h1-text-cta__subtitle {
    font-size: 18px;
  }

  .block-h1-text-cta__box {
    aspect-ratio: auto;
    min-height: 240px;
    padding: 24px 28px;
  }

  .block-h1-text-cta__box-arrow {
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
  }

  .block-h1-text-cta__box-arrow svg {
    width: 18px;
    height: 18px;
  }

  .block-h1-text-cta__box-text {
    left: 28px;
    bottom: 24px;
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .block-h1-text-cta__title {
    font-size: 44px;
  }

  .block-h1-text-cta__box-text {
    font-size: 22px;
  }
}


/* == 30-components/hero-portfolio.css == */
/* Hero Portfolio Block */
.block-hero-portfolio {
  padding: 0;
  margin: 0;
  background: #ffffff;
}

.block-hero-portfolio__image-wrap {
  position: relative;
  width: 100%;
  height: 727px;
  overflow: hidden;
  background: #eeeeee;
  cursor: default;
}

.block-hero-portfolio__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}

/* Ring CTA — hidden by default, revealed when hovering the image wrap */
.block-hero-portfolio__ring-cta {
  position: absolute;
  top: 30%;
  left: 22%;
  transform: translate(-50%, -50%);
  width: 240px;
  height: 240px;
  border: 1.5px solid #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  color: #000000;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.block-hero-portfolio__image-wrap:hover .block-hero-portfolio__ring-cta {
  opacity: 1;
  pointer-events: auto;
}

.block-hero-portfolio__ring-cta:link,
.block-hero-portfolio__ring-cta:visited,
.block-hero-portfolio__ring-cta:hover,
.block-hero-portfolio__ring-cta:focus,
.block-hero-portfolio__ring-cta:active {
  color: #000000 !important;
  text-decoration: none;
}

.block-hero-portfolio__ring-cta-text {
  font-family: 'Switzer', var(--font-heading, sans-serif);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: inherit;
  padding: 0 32px;
  word-spacing: 100vw;
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
  /* The image is a wide 2:1 photo and a global `.entry-content img` rule forces
     height:auto, so a fixed wrap height left a tall empty strip below the image
     — and the centred ring ended up half on the photo, half on that empty area.
     Let the wrap match the image height so the photo fills it and the ring
     centres on the picture. */
  .block-hero-portfolio__image-wrap {
    height: auto;
  }

  .block-hero-portfolio__ring-cta {
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    opacity: 1;
    pointer-events: auto;
  }

  .block-hero-portfolio__ring-cta-text {
    font-size: 26px;
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  .block-hero-portfolio__image-wrap {
    height: auto;
  }

  .block-hero-portfolio__ring-cta {
    top: 50%;
    left: 50%;
    width: 160px;
    height: 160px;
    opacity: 1;
    pointer-events: auto;
  }

  .block-hero-portfolio__ring-cta-text {
    font-size: 20px;
    padding: 0 20px;
  }
}


/* == 30-components/two-column-pictures-cta.css == */
/* Two Column and Pictures with CTA Block */
.block-tcpc {
    padding: 120px 0;
}

.block-tcpc__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 58px;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* Top: 2-column section */
.block-tcpc__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 428px;
    gap: 100px;
    align-items: start;
}

.block-tcpc__heading {
    font-family: 'Switzer', var(--font-heading, sans-serif);
    font-weight: 500;
    font-size: 82px;
    line-height: 1.1;
    letter-spacing: -4.1px;
    text-transform: uppercase;
    margin: 0;
    color: #ffffff;
    display: inline;
}

.block-tcpc__label {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(0.95rem, 1.2vw, 1.125rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #BBBAB6;
    margin: 0 0 24px 0;
}

.block-tcpc__heading-part {
    display: inline;
}

.block-tcpc__heading-part--dark {
    color: #000000;
}

.block-tcpc__heading-part--light {
    color: #BBBAB6;
}

.block-tcpc__heading-part--white {
    color: #ffffff;
}

.block-tcpc__heading-icon {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    color: inherit;
    margin: 0 15px;
    transform: translateY(-5px);
}

.block-tcpc__heading > .block-tcpc__heading-icon:first-child,
.block-tcpc__heading-break + .block-tcpc__heading-icon {
    margin-left: 0;
}

.block-tcpc__heading-icon--dark {
    color: #000000;
}

.block-tcpc__heading-icon--light {
    color: #BBBAB6;
}

.block-tcpc__heading-icon--white {
    color: #ffffff;
}

.block-tcpc__heading-icon svg {
    width: 62px;
    height: 62px;
}

.block-tcpc__heading-break {
    display: block;
    width: 100%;
    height: 0;
    line-height: 0;
}

.block-tcpc__text-col {
    font-family: 'Helvetica', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: #BBBAB6;
    width: 428px;
    max-width: 100%;
    justify-self: end;
}

.block-tcpc__text-col p {
    margin: 0 0 24px 0;
}

.block-tcpc__text-col p:last-child {
    margin-bottom: 0;
}

/* Bottom: pictures + box CTA */
.block-tcpc__bottom {
    display: grid;
    grid-template-columns: minmax(0, 674fr) minmax(0, 292fr) minmax(0, 318fr);
    gap: 24px;
    align-items: stretch;
    aspect-ratio: 1332 / 277;
}

.block-tcpc__image-wrap {
    min-width: 0;
    position: relative;
    border-radius: 0 !important;
}

.block-tcpc__image-wrap--2 {
    overflow: hidden;
}

.block-tcpc__image-wrap img {
    border-radius: 0 !important;
    max-width: none !important;
}

.block-tcpc__image-wrap--1,
.block-tcpc__image-wrap--2 {
    height: 100%;
}

.block-tcpc__image-wrap .block-tcpc__image,
img.block-tcpc__image {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
    display: block;
}

/* Ring CTA overlay on image 1 */
.block-tcpc__ring-cta {
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    border: 1.5px solid #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.block-tcpc__image-wrap--1:hover .block-tcpc__ring-cta {
    opacity: 1;
    pointer-events: auto;
}

.block-tcpc__ring-cta:link,
.block-tcpc__ring-cta:visited,
.block-tcpc__ring-cta:hover,
.block-tcpc__ring-cta:focus,
.block-tcpc__ring-cta:active {
    color: #ffffff !important;
    text-decoration: none;
}

.block-tcpc__ring-cta-text {
    font-family: 'Switzer', var(--font-heading, sans-serif);
    font-weight: 500;
    font-size: 32px;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: inherit;
    padding: 0 30px;
    word-spacing: 100vw;
}

/* Black box CTA on the right */
.block-tcpc__box-cta {
    min-width: 0;
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

/* Override default link colors (visited/hover) so the CTA stays white instead of
   showing the browser/theme default blue or purple link color. */
.block-tcpc__box-cta:link,
.block-tcpc__box-cta:visited,
.block-tcpc__box-cta:hover,
.block-tcpc__box-cta:focus,
.block-tcpc__box-cta:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

.block-tcpc__box-cta:hover {
    background-color: var(--box-cta-hover-bg, #141414);
}

.block-tcpc__box-cta-text {
    font-family: 'Switzer', var(--font-heading, sans-serif);
    font-weight: 500;
    font-size: 42px;
    line-height: 1.1;
    letter-spacing: -1.5px;
    text-transform: uppercase;
    color: inherit;
}

.block-tcpc__box-cta-arrow {
    align-self: flex-end;
    border: 1px solid #ffffff;
    border-radius: 50%;
    width: 56px;
    height: 56px;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.block-tcpc__box-cta-arrow svg {
    width: 22px;
    height: 22px;
}

/* Responsive */
@media (max-width: 1024px) {
    .block-tcpc {
        padding: 80px 0;
    }

    .block-tcpc__container {
        gap: 60px;
        padding: 0 30px;
    }

    .block-tcpc__columns {
        display: flex;
        flex-direction: column;
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* The text column is a fixed 428px on desktop — let it fill the width on
       mobile so the paragraph doesn't run off the screen edge. */
    .block-tcpc__heading-col,
    .block-tcpc__text-col {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .block-tcpc__heading {
        font-size: 56px;
        letter-spacing: -2.8px;
    }

    .block-tcpc__heading-icon svg {
        width: 48px;
        height: 48px;
    }

    .block-tcpc__bottom {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .block-tcpc__image-wrap--1 {
        aspect-ratio: 16 / 10;
    }

    .block-tcpc__image-wrap--2 {
        aspect-ratio: 16 / 10;
    }

    .block-tcpc__box-cta {
        grid-column: 1 / -1;
        aspect-ratio: auto;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 40px;
    }

    .block-tcpc__ring-cta {
        width: 180px;
        height: 180px;
    }

    .block-tcpc__ring-cta-text {
        font-size: 18px;
    }

    .block-tcpc__box-cta-text {
        font-size: 32px;
    }
}

@media (max-width: 640px) {
    .block-tcpc {
        padding: 60px 0;
    }

    .block-tcpc__container {
        padding: 0 20px;
        gap: 40px;
    }

    .block-tcpc__heading {
        font-size: 34px;
        letter-spacing: -1.7px;
        line-height: 1.15;
    }

    /* Readability on mobile: the light-grey heading words (#BBBAB6) and the
       grey body text are too low-contrast on a small white screen. Darken them
       so the whole area is comfortably readable. */
    .block-tcpc__heading-part--light,
    .block-tcpc__heading-icon--light,
    .block-tcpc__label {
        color: #8a8a8a;
    }

    .block-tcpc__text-col,
    .block-tcpc__text-col p {
        color: #333333 !important;
    }

    /* Smaller, tighter icons so the inline asterisk/X/star don't compete with
       the heading text and the title reads cleanly on a narrow screen. */
    .block-tcpc__heading-icon {
        margin: 0 7px;
        transform: translateY(-2px);
    }

    .block-tcpc__heading-icon svg {
        width: 24px;
        height: 24px;
    }

    /* Mobile: hide the laptop portfolio images entirely and keep only the
       text and the two CTAs ("VAATA TEHTUD TÖID" + "KÜSI PAKKUMIST"), shown
       as two stacked full-width buttons. */
    .block-tcpc__bottom {
        display: flex;
        flex-direction: column;
        gap: 14px;
        aspect-ratio: auto;
    }

    /* Drop both laptop mockups on mobile */
    .block-tcpc__image-wrap--2 {
        display: none;
    }

    .block-tcpc__image-wrap--1 {
        aspect-ratio: auto;
        height: auto;
        overflow: visible;
    }

    .block-tcpc__image-wrap--1 img.block-tcpc__image,
    .block-tcpc__image-wrap--2 img.block-tcpc__image {
        display: none !important;
    }

    /* "VAATA TEHTUD TÖID" — was a hover-only ring over image 1; on mobile there
       is no hover, so render it as an always-visible outline button. */
    .block-tcpc__ring-cta {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
        width: 100%;
        height: auto;
        border-radius: 0;
        border: 1px solid #000000;
        color: #000000;
        padding: 24px 30px;
        justify-content: center;
    }

    .block-tcpc__ring-cta:link,
    .block-tcpc__ring-cta:visited,
    .block-tcpc__ring-cta:hover,
    .block-tcpc__ring-cta:focus,
    .block-tcpc__ring-cta:active {
        color: #000000 !important;
    }

    .block-tcpc__ring-cta-text {
        word-spacing: normal;
        padding: 0;
        font-size: 26px;
        line-height: 1.1;
    }

    /* "KÜSI PAKKUMIST" — primary filled button */
    .block-tcpc__box-cta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 22px 30px;
        gap: 20px;
        min-height: 0;
        aspect-ratio: auto;
    }

    .block-tcpc__box-cta-text {
        font-size: 26px;
    }
}


/* == 40-layout/grid.css == */
/* Grid System */
.grid {
  display: grid;
  gap: var(--space-3);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.grid--gap-sm {
  gap: var(--space-2);
}

.grid--gap-lg {
  gap: var(--space-4);
}

/* Responsive overrides */
@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .grid--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Gutenberg Columns - Equal Height Support */
.wp-block-columns {
  align-items: stretch !important;
}

.wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

.wp-block-column > * {
  flex-grow: 1;
}



/* == 40-layout/header.css == */
/* Header */
.site-header {
  background: transparent;
  border-bottom: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 0;
  max-width: 100%;
  transition: background var(--transition-base);
}

.site-header.scrolled {
  background: #000000;
}

/* White header for single posts, author archives and legal pages */
.single-post .site-header,
.author .site-header,
.legal-page .site-header {
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.single-post .site-header.scrolled,
.author .site-header.scrolled,
.legal-page .site-header.scrolled {
  background: #ffffff;
}

/* Dark text for white header */
.single-post .site-header .site-logo,
.single-post .site-header .site-nav__menu a,
.single-post .site-header .site-nav__toggle,
.single-post .site-header .site-cta,
.author .site-header .site-logo,
.author .site-header .site-nav__menu a,
.author .site-header .site-nav__toggle,
.author .site-header .site-cta,
.legal-page .site-header .site-logo,
.legal-page .site-header .site-nav__menu a,
.legal-page .site-header .site-nav__toggle,
.legal-page .site-header .site-cta {
  color: #000000;
}

/* Logo SVG color change */
.single-post .site-header .site-logo__image,
.author .site-header .site-logo__image,
.legal-page .site-header .site-logo__image {
  filter: brightness(0) saturate(100%);
}

.single-post .site-header .site-cta,
.author .site-header .site-cta,
.legal-page .site-header .site-cta {
  border-color: #000000;
}

.single-post .site-header .site-cta:hover,
.author .site-header .site-cta:hover,
.legal-page .site-header .site-cta:hover {
  background: rgba(0, 0, 0, 0.05);
}

.single-post .site-header .site-nav__menu a::after,
.author .site-header .site-nav__menu a::after,
.legal-page .site-header .site-nav__menu a::after {
  background: #000000;
}

/* When the mobile burger menu is open, a dark full-screen overlay covers the
   white header used on single posts / author / legal pages. The white-header
   theme colours the menu links black, so on that dark overlay they become
   invisible. Force the menu links, close icon and underline back to white while
   the menu is open (these selectors out-specify the white-header rules above). */
body.sharks-mobile-menu-open.single-post .site-header .site-nav__menu a,
body.sharks-mobile-menu-open.author .site-header .site-nav__menu a,
body.sharks-mobile-menu-open.legal-page .site-header .site-nav__menu a,
body.sharks-mobile-menu-open.single-post .site-header .site-nav__toggle,
body.sharks-mobile-menu-open.author .site-header .site-nav__toggle,
body.sharks-mobile-menu-open.legal-page .site-header .site-nav__toggle {
  color: #ffffff;
}

body.sharks-mobile-menu-open.single-post .site-header .site-nav__menu a::after,
body.sharks-mobile-menu-open.author .site-header .site-nav__menu a::after,
body.sharks-mobile-menu-open.legal-page .site-header .site-nav__menu a::after {
  background: #ffffff;
}

.site-header.scrolled .site-nav__menu .sub-menu {
  top: 110px;
}

.site-header .container {
  max-width: 1440px;
  width: 100%;
  padding: 0;
  margin: 0 auto;
}

.site-header__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 25px;
  padding-right: 58px;
  padding-bottom: 25px;
  padding-left: 58px;
  gap: 30px;
  width: 100%;
  max-width: 1440px;
  height: 110px;
  box-sizing: border-box;
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  transition: opacity var(--transition-fast);
  flex: none;
  order: 0;
}

.site-logo:hover {
  opacity: 0.8;
}

.site-logo__image {
  width: 180px;
  height: 60px;
  max-width: 100%;
}

.site-logo__text {
  font-size: 1.5rem;
  font-weight: 700;
}

.site-logo img {
  width: 180px;
  height: 60px;
}

/* Navigation */
.site-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex: none;
  order: 1;
}

.site-nav__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 30px;
  list-style: none;
  margin: 0 auto;
}

.site-nav__menu a {
  display: block;
  padding: 0;
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  transition: all var(--transition-fast);
  position: relative;
}

.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a {
  color: #ffffff;
}

.site-nav__menu a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 1px;
  background: #ffffff;
  transform: scaleX(0);
  transition: transform var(--transition-base);
}

.site-nav__menu a:hover::after,
.site-nav__menu .current-menu-item > a::after,
.site-nav__menu .current_page_item > a::after {
  transform: scaleX(1);
}

/* Dropdown / Submenu - Mega Menu Style */
.site-nav__menu li {
  position: relative;
}

/* Create invisible bridge between menu item and submenu to prevent closing */
.site-nav__menu .menu-item-has-children::before {
  content: '';
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  height: 60px;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  z-index: 98;
  pointer-events: none;
}

.site-nav__menu .menu-item-has-children:hover::before {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* White header when submenu is open */
.site-header.submenu-open {
  background: #ffffff;
  transition: background 0.3s ease;
}

.site-header.submenu-open .site-logo,
.site-header.submenu-open .site-nav__menu > li > a,
.site-header.submenu-open .site-nav__toggle,
.site-header.submenu-open .site-cta {
  color: #000000;
}

.site-header.submenu-open .site-logo__image {
  filter: brightness(0) saturate(100%);
}

.site-header.submenu-open .site-cta {
  border-color: #000000;
}

.site-header.submenu-open .site-cta:hover {
  background: rgba(0, 0, 0, 0.05);
}

.site-header.submenu-open .site-nav__menu > li > a::after {
  background: #000000;
}

/* ===== MEGA MENU SUBMENU - ISOLATED STYLES ===== */

/* Main submenu wrapper */
.sharks-mega-menu {
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  max-width: calc(1440px - 116px);
  background: #ffffff;
  border-bottom: 1px solid #BBBAB6;
  padding: 42px 58px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  transition-delay: 0s;
  z-index: 99;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 62px;
}

/* Show submenu on hover */
.site-nav__menu li:hover > .sharks-mega-menu,
.site-nav__menu li.is-open > .sharks-mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition-delay: 0s;
}

/* Menu items container */
.sharks-mega-menu__items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0;
  flex: 1;
  max-width: 946px;
  list-style: none;
  margin: 0;
}

/* Each menu item row */
.sharks-mega-menu__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0;
  gap: 12px;
  width: 100%;
  border: none;
  margin-bottom: 0;
  position: relative;
}

/* HR separator line between items */
.sharks-mega-menu__separator {
  width: 100%;
  height: 1px;
  display: block;
  margin: 0;
  padding: 20px 0;
  list-style: none;
}

.sharks-mega-menu__separator svg {
  width: 100%;
  height: 1px;
  display: block;
}

/* Menu item link */
.sharks-mega-menu__link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  padding-left: 0;
  gap: 12px;
  min-height: 46px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 42px;
  line-height: 46px;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-align: left;
  color: #000000;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
  border: none;
  text-decoration: none;
}

.sharks-mega-menu__link::after,
.sharks-mega-menu__link::before {
  display: none;
}

.sharks-mega-menu__link:hover {
  color: #000000;
}

/* Arrow icon in submenu */
.sharks-mega-menu__arrow {
  width: 0;
  height: 46px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
  overflow: hidden;
}

.sharks-mega-menu__arrow svg {
  width: 46px;
  height: 46px;
  display: block;
}

.sharks-mega-menu__link:hover .sharks-mega-menu__arrow {
  width: 46px;
  opacity: 1;
  background: transparent;
}

/* Asterisk container - right side */
.sharks-mega-menu__asterisk {
  width: 316px;
  height: 316px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -42px;
  margin-right: -58px;
}

.sharks-mega-menu__asterisk svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Legacy classes for backwards compatibility */
.sharks-mega-menu__asterisk-bg {
  position: absolute;
  width: 215px;
  height: 215px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #FFC700;
  border: 1px solid #757472;
  z-index: 1;
}

.sharks-mega-menu__asterisk-icon {
  width: 23px;
  height: 35px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* ===== END MEGA MENU SUBMENU ===== */

/* Legacy selectors for backwards compatibility - redirect to new classes */
.site-nav__menu .sub-menu {
  /* Fallback if old class is still used */
  position: fixed;
  top: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  max-width: calc(1440px - 116px);
  background: #ffffff;
  border-bottom: 1px solid #BBBAB6;
  padding: 42px 58px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 99;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 62px;
}

.site-nav__menu li:hover > .sub-menu,
.site-nav__menu li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.site-nav__menu .sub-menu li {
  display: block;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.site-nav__menu .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  padding-left: 0;
  gap: 12px;
  height: 46px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 42px;
  line-height: 110%;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  text-align: left;
  color: #000000;
  transition: all 0.3s ease;
  position: relative;
  background: transparent;
  border: none;
  text-decoration: none;
}

.site-nav__menu .sub-menu a::after,
.site-nav__menu .sub-menu a::before {
  display: none;
}

.site-nav__menu .sub-menu a:hover {
  color: #000000;
}

/* Old class compatibility */
.site-nav__menu .sub-menu-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 0;
  flex: 1;
  max-width: 946px;
  list-style: none;
  margin: 0;
}

.site-nav__menu .sub-menu-container > li {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  gap: 12px;
  width: 100%;
  border-bottom: 1px solid #BBBAB6;
  padding-bottom: 0;
  margin-bottom: 0;
}

.site-nav__menu .sub-menu-container > li:first-child {
  border-top: 1px solid #BBBAB6;
  padding-top: 0;
}

.site-nav__menu .submenu-arrow {
  width: 0;
  height: 46px;
  border-radius: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  flex-shrink: 0;
  overflow: hidden;
}

.site-nav__menu .submenu-arrow svg {
  width: 24.47px;
  height: 19.57px;
}

.site-nav__menu .sub-menu a:hover .submenu-arrow {
  width: 46px;
  opacity: 1;
  background: transparent;
}

.site-nav__menu .submenu-asterisk {
  width: 316px;
  height: 316px;
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  margin-top: -42px;
  margin-right: -58px;
}

.site-nav__menu .submenu-asterisk .asterisk-bg {
  position: absolute;
  width: 215px;
  height: 215px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #FFC700;
  border: 1px solid #757472;
  z-index: 1;
}

.site-nav__menu .submenu-asterisk .asterisk-icon {
  width: 23px;
  height: 35px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* Dropdown indicator arrow - hidden on main menu */
.site-nav__menu .menu-item-has-children > a::before {
  display: none;
}

/* Pointer cursor for parent menu items */
.site-nav__menu .menu-item-has-children > a {
  cursor: pointer;
  position: relative;
}

/* Mega menu overlay backdrop */
.site-nav__menu .menu-item-has-children::after {
  content: '';
  position: fixed;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  z-index: 98;
  pointer-events: none;
}

.site-nav__menu .menu-item-has-children:hover::after,
.site-nav__menu .menu-item-has-children.is-open::after {
  opacity: 1;
  visibility: visible;
}

/* Mobile menu toggle */
.site-nav__toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #ffffff;
}

.site-nav__toggle svg {
  width: 28px;
  height: 28px;
}

/* CTA button in header */
.site-cta {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px 15px 15px 26px;
  gap: 8px;
  margin: 0;
  width: 203px;
  height: 56px;
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  border-radius: 4px;
  font-family: 'Switzer', var(--font-heading);
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.03em;
  text-decoration: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex: none;
  order: 2;
}

.site-cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #ffffff;
  transform: translateY(-1px);
}

/* Mobile menu close button - hidden on desktop */
.site-nav__close {
  display: none;
}

/* Responsive */
@media (max-width: 1200px) {
  .sharks-mega-menu {
    padding: 40px 40px;
    gap: 40px;
  }
  
  .sharks-mega-menu__link {
    font-size: 36px;
  }
  
  .sharks-mega-menu__asterisk {
    width: 280px;
    height: 280px;
    margin-top: -40px;
    margin-right: -40px;
  }
  
  /* Legacy fallback */
  .site-nav__menu .sub-menu {
    padding: 40px 40px;
    gap: 40px;
  }
  
  .site-nav__menu .sub-menu-container {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
  }
  
  .site-nav__menu .sub-menu a {
    font-size: 17px;
    padding: 14px 18px;
  }
}

@media (max-width: 1100px) {
  .site-header__inner {
    gap: 30px;
    padding: 20px 30px;
  }
  
  .site-nav__menu {
    gap: 20px;
  }
  
  .site-nav__menu a {
    font-size: 16px;
  }
  
  .site-cta {
    width: auto;
    padding: 12px 12px 12px 20px;
    font-size: 18px;
  }
  
  .sharks-mega-menu {
    padding: 36px 30px;
    gap: 30px;
  }
  
  .sharks-mega-menu__link {
    font-size: 32px;
  }
  
  .sharks-mega-menu__asterisk {
    width: 250px;
    height: 250px;
    margin-top: -36px;
    margin-right: -30px;
  }
  
  /* Legacy fallback */
  .site-nav__menu .sub-menu {
    padding: 36px 30px;
    gap: 30px;
  }
  
  .site-nav__menu .sub-menu-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
  }
  
  .site-nav__menu .sub-menu a {
    font-size: 16px;
    padding: 12px 16px;
  }
}

@media (max-width: 1365px) {
  .site-header__inner {
    gap: 15px;
    padding: 15px 20px;
    height: auto;
  }
  
  .site-logo__image,
  .site-logo img {
    width: 120px;
    height: 40px;
  }
  
  .site-nav__toggle {
    display: block;
  }
  
  .site-cta {
    display: none;
  }

  .site-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000000;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    padding: 100px 24px 40px 24px;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
    z-index: 9999;
  }

  .site-nav.is-active {
    transform: translateX(0);
  }

  .site-nav__menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    text-align: left;
    width: 100%;
  }

  /* Clean list rows separated by thin lines (matches desktop mega-menu) */
  .site-nav__menu > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    border-radius: 0;
    transition: none;
  }

  .site-nav__menu > li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .site-nav__menu > li:hover {
    background: transparent;
  }

  /* Top-level links — desktop nav typography (Manrope bold) */
  .site-nav__menu a {
    font-family: 'Manrope', var(--font-sans);
    font-size: 20px;
    line-height: 1.2;
    padding: 20px 4px;
    color: #ffffff;
    display: block;
    font-weight: 700;
    letter-spacing: 0;
    transition: color 0.2s ease, opacity 0.2s ease;
    text-align: left;
  }

  .site-nav__menu > li:not(.menu-item-has-children) > a:hover,
  .site-nav__menu > li:not(.menu-item-has-children) > a:active {
    color: #ffffff;
    opacity: 0.6;
  }

  .site-nav__menu .menu-item-has-children {
    position: relative;
  }

  .site-nav__menu .menu-item-has-children > a {
    display: block;
    position: relative;
    font-family: 'Manrope', var(--font-sans);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
    text-transform: none;
    letter-spacing: 0;
    padding: 20px 4px;
    padding-right: 56px;
    transition: color 0.2s ease, opacity 0.2s ease;
    width: 100%;
    pointer-events: auto;
    text-align: left;
  }

  .site-nav__menu .menu-item-has-children > a:hover,
  .site-nav__menu .menu-item-has-children > a:active {
    color: #ffffff;
    opacity: 0.6;
  }

  .site-nav__menu .menu-item-has-children.is-open > a {
    color: #ffffff;
    opacity: 1;
  }
  
  /* Submenu toggle button (chevron area) */
  .site-nav__menu .menu-item-has-children .submenu-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: background 0.3s ease;
    pointer-events: auto;
  }
  
  .site-nav__menu .menu-item-has-children .submenu-toggle:hover {
    background: transparent;
  }

  .site-nav__menu .menu-item-has-children .submenu-toggle:active {
    background: transparent;
  }

  /* Chevron indicator for parent items */
  .site-nav__menu .menu-item-has-children .submenu-toggle::before {
    content: '';
    display: block;
    width: 9px;
    height: 9px;
    border-right: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.7;
  }

  .site-nav__menu .menu-item-has-children.is-open .submenu-toggle::before {
    transform: rotate(-135deg);
    opacity: 1;
    border-color: #ffffff;
  }
  
  /* Hide mega menu overlay on mobile */
  .site-nav__menu .menu-item-has-children::after {
    display: none;
  }
  
  /* Mobile mega menu - override desktop styles */
  .site-nav.is-active .sharks-mega-menu,
  .site-nav .sharks-mega-menu {
    position: static !important;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: none !important;
  }
  
  .site-nav .sharks-mega-menu__items {
    display: block !important;
    padding: 8px 0 0 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  .site-nav .sharks-mega-menu__item {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  
  .site-nav .sharks-mega-menu__item:last-child {
    margin-bottom: 0 !important;
  }
  
  .site-nav .sharks-mega-menu__separator {
    display: none !important;
  }
  
  .site-nav .sharks-mega-menu__asterisk {
    display: none !important;
  }
  
  .site-nav .menu-item-has-children.is-open > .sharks-mega-menu {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 1000px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .site-nav .sharks-mega-menu__link,
  .site-nav.is-active .sharks-mega-menu__link,
  .site-nav .sharks-mega-menu__items .sharks-mega-menu__link {
    font-family: 'Switzer', var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    padding: 14px 4px 14px 20px !important;
    border-radius: 0 !important;
    height: auto !important;
    min-height: auto !important;
    text-transform: uppercase !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
    position: relative !important;
    overflow: visible !important;
    margin: 0 !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: 1.15 !important;
  }

  .site-nav .sharks-mega-menu__arrow {
    display: none !important;
  }

  .site-nav .sharks-mega-menu__link::before,
  .site-nav .sharks-mega-menu__link::after {
    display: none !important;
  }

  .site-nav .sharks-mega-menu__link:hover,
  .site-nav .sharks-mega-menu__link:active {
    color: #ffffff !important;
    opacity: 0.6 !important;
    background: transparent !important;
    transform: none !important;
  }
  
  /* Legacy mobile dropdown - fallback - override desktop styles */
  .site-nav.is-active .sub-menu,
  .site-nav .sub-menu {
    position: static !important;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transform: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: block !important;
    width: 100% !important;
    left: auto !important;
    top: auto !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: none !important;
  }
  
  .site-nav .sub-menu-container {
    display: block !important;
    padding: 8px 0 0 0 !important;
    flex-direction: column !important;
    gap: 0 !important;
    max-width: none !important;
    margin: 0 !important;
  }
  
  .site-nav .sub-menu-container > li {
    border: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    display: block !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }
  
  .site-nav .sub-menu-container > li:last-child {
    margin-bottom: 0 !important;
  }
  
  .site-nav .sub-menu-container > li:first-child {
    border: none !important;
  }
  
  .site-nav .submenu-asterisk {
    display: none !important;
  }
  
  .site-nav .sub-menu::before {
    display: none !important;
  }
  
  .site-nav .menu-item-has-children.is-open > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    max-height: 1000px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .site-nav .sub-menu a,
  .site-nav.is-active .sub-menu a,
  .site-nav .sub-menu-container a {
    font-family: 'Switzer', var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    padding: 14px 4px 14px 20px !important;
    border-radius: 0 !important;
    display: block !important;
    transition: opacity 0.2s ease !important;
    position: relative !important;
    overflow: visible !important;
    letter-spacing: -0.02em !important;
    margin: 0 !important;
    height: auto !important;
    min-height: auto !important;
    text-transform: uppercase !important;
    gap: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    line-height: 1.15 !important;
  }

  .site-nav .sub-menu a::before,
  .site-nav .sub-menu a::after {
    display: none !important;
  }

  .site-nav .sub-menu a:hover,
  .site-nav .sub-menu a:active {
    color: #ffffff !important;
    opacity: 0.6 !important;
    background: transparent !important;
    transform: none !important;
  }
  
  .site-nav .submenu-arrow {
    display: none !important;
  }

  .site-nav__close {
    display: none;
    position: absolute;
    top: 26px;
    right: 20px;
    background: transparent;
    border: none;
    padding: 12px;
    cursor: pointer;
    color: #ffffff;
    border-radius: 0;
    transition: opacity 0.2s ease, transform 0.3s ease;
    z-index: 10000;
  }

  .site-nav__close:hover {
    background: transparent;
    opacity: 0.6;
    transform: rotate(90deg);
  }
  
  .site-nav.is-active .site-nav__close {
    display: block;
  }

  .site-nav__close svg {
    width: 20px;
    height: 20px;
    display: block;
  }
  
  /* Improve scrolling on mobile */
  .site-nav::-webkit-scrollbar {
    width: 4px;
  }
  
  .site-nav::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.03);
  }
  
  .site-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 2px;
  }

  .site-nav::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
  }

}

/* ===== ACCESSIBILITY: TAP TARGET IMPROVEMENTS (WCAG 2.1 AA) ===== */

/* Ensure navigation links have minimum 44x44px tap target — desktop only.
   Keeping this out of global scope so it doesn't override mobile block display:block + text-align:center */
@media (min-width: 1366px) {
  .site-nav__menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 0;
  }
}

/* Mobile: Increase tap targets */
@media (max-width: 1365px) {
  .site-nav__menu a {
    min-height: 48px;
    padding: 20px 4px;
  }

  .site-nav__toggle {
    min-width: 48px;
    min-height: 48px;
    padding: 12px;
  }
}

/* ===== COOKIE BUTTON: STAYS BOTTOM-LEFT WHEN MOBILE MENU IS OPEN ===== */
/* The cookie reopen button keeps its plugin default (bottom-left) even when the
   burger menu is open. It must NOT move to top-left — there it covered the logo
   and looked like the logo had become the cookie icon. (Authoritative override
   lives in megamenu.css, which is cache-busted via filemtime.) */

@media (max-width: 1365px) {
  body.sharks-mobile-menu-open .sharks-cookie-floating-wrap {
    top: auto;
    bottom: 18px;
    left: 16px;
  }
}

/* ===== MOBILE MENU CTA ===== */

/* Hidden on desktop — shown inside burger menu only */
.site-nav__mobile-cta {
  display: none;
}

@media (max-width: 1365px) {
  .site-nav__mobile-cta {
    display: flex;
    justify-content: center;
    padding: 24px 20px 12px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .site-nav__mobile-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 26px;
    background: transparent;
    color: #ffffff;
    border: 1.5px solid #ffffff;
    border-radius: 4px;
    font-family: 'Switzer', var(--font-heading);
    font-weight: 500;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.03em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
    width: 100%;
    max-width: 280px;
  }

  .site-nav__mobile-cta-link:hover,
  .site-nav__mobile-cta-link:focus,
  .site-nav__mobile-cta-link:active {
    background: rgba(255, 255, 255, 0.1);
    /* Keep the text white — without this the global a:hover turned it blue. */
    color: #ffffff;
  }
}

/* CTA Button tap target — no display override (display is set in base and hidden at 1365px) */
.site-cta {
  min-height: 44px;
}

@media (min-width: 1366px) {
  .site-cta {
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }
}


/* == 40-layout/footer.css == */
/* Footer */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Extra bottom padding so the absolutely-positioned "marketing sharks"
     watermark (177px) sits BELOW the bottom row instead of overlapping it
     (the 4→3 column layout made the content taller). */
  padding: 100px 0 220px;
  gap: 50px;
  background: #000000;
  color: #fff;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 622px;
  margin: 0;
  width: 100%;
}

/* Watermark Background */
.site-footer__watermark {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  height: 177px;
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

.site-footer__watermark svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

.site-footer__content {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 50px;
  padding: 0 58px;
  box-sizing: border-box;
}

/* Footer Top: Logo + Columns */
.site-footer__top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0px;
  /* Gap chosen so the first column starts exactly where the FACEBOOK social
     arrow ends in the bottom row (logo right → 148px → column 1). */
  gap: 148px;
  width: 100%;
  flex: none;
  order: 0;
  align-self: stretch;
  z-index: 0;
}

.site-footer__logo {
  display: block;
  width: 185px;
  height: 185px;
  flex: none;
  order: 0;
  position: relative;
}

/* Animated logo wrapper */
.site-footer__logo-animated {
  position: relative;
  width: 185px;
  height: 185px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Rotating circular text */
.site-footer__logo-circle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: rotateText 35s linear infinite;
  pointer-events: none;
}

.site-footer__logo-text-path {
  fill: #FFFFFF;
  font-family: 'Manrope', var(--font-sans);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  filter: brightness(1.5);
}

/* Center logo image */
.site-footer__logo-center {
  position: relative;
  z-index: 1;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #000000;
  transition: transform 0.3s ease;
}

.site-footer__logo:hover .site-footer__logo-center {
  transform: scale(1.05);
}

.site-footer__logo-center img {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: contain;
}

.site-footer__logo-text {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
}

/* Rotation animations */
@keyframes rotateText {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateTextReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Footer Navigation */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0px;
  gap: 30px;
  flex: none;
  order: 1;
}

.site-footer__menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 30px;
  list-style: none;
  margin: 0;
  flex: none;
  order: 0;
  align-self: stretch;
}

.site-footer__menu a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
  flex: none;
}

.site-footer__menu a:hover {
  opacity: 0.7;
}

/* Footer CTA Button */
.site-footer__cta {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 15px 26px 15px 15px;
  gap: 8px;
  background: transparent;
  color: #ffffff;
  border: 1.5px solid #ffffff;
  font-family: 'Helvetica', Arial, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.6px;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex: none;
  order: 1;
  cursor: pointer;
}

.site-footer__cta:hover {
  background: #ffffff;
  color: #000000;
  border-color: #ffffff;
}

.site-footer__cta:hover svg path,
.site-footer__cta:hover svg rect {
  stroke: #000000;
}

.site-footer__cta svg {
  width: 24px;
  height: 24px;
  flex: none;
  order: 1;
}

/* Divider */
.site-footer__divider {
  width: 100%;
  max-width: 1324px;
  height: 0px;
  border: 1px solid #BBBAB6;
  flex: none;
  order: 1;
  z-index: 1;
}

/* Footer Bottom: Social + Copyright */
.site-footer__bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0px;
  gap: 40px;
  width: 100%;
  flex: none;
  order: 2;
  align-self: stretch;
  z-index: 2;
}

/* Social Links */
.site-footer__social {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 30px;
  list-style: none;
  margin: 0;
  flex: none;
  order: 0;
}

.site-footer__social li {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  gap: 15px;
  flex: none;
}

.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  color: #ffffff;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.site-footer__social-link:hover {
  opacity: 0.7;
}

.site-footer__social-link:hover .site-footer__social-icon {
  transform: translateX(2px);
}

.site-footer__social-link span {
  font-family: 'Manrope', var(--font-sans);
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-align: center;
  color: #ffffff;
  flex: none;
  order: 0;
}

.site-footer__social-icon {
  width: 37px;
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  order: 1;
  flex-shrink: 0;
}

.site-footer__social-icon svg {
  width: 37px;
  height: 37px;
  display: block;
}

/* "All rights reserved" stays together → wraps to its own line as a unit */
.site-footer__copyright-rights {
  white-space: nowrap;
}

/* Copyright */
.site-footer__copyright {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.4;
  text-align: center;
  color: #ffffff;
  margin: 0;
  flex: none;
  order: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

/* X separator — matches the label bar separator icon */
.site-footer__copyright-sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.site-footer__copyright-sep svg {
  width: 100%;
  height: 100%;
  display: block;
}

.site-footer__privacy-link {
  font-family: var(--font-sans);
  font-weight: 400;
  /* Match the copyright text (and the other footer links) instead of the default
     blue link colour. `inherit` ties it to .site-footer__copyright's colour. */
  color: inherit !important;
  text-decoration: none;
  transition: opacity var(--transition-base);
}

.site-footer__privacy-link:hover,
.site-footer__privacy-link:focus-visible {
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 1400px) {
  .site-footer {
    padding: 80px 0 200px;
    gap: 40px;
    height: auto;
    min-height: 622px;
  }

  .site-footer__content {
    gap: 40px;
    padding: 0 40px;
  }

  .site-footer__top {
    gap: 40px;
  }

  .site-footer__bottom {
    gap: 40px;
  }

  .site-footer__watermark {
    bottom: 0;
    height: 150px;
  }
}

@media (max-width: 1100px) {
  .site-footer {
    padding: 60px 0 200px;
    height: auto;
  }

  .site-footer__content {
    padding: 0 30px;
  }

  .site-footer__top {
    flex-direction: column;
    gap: 40px;
    align-items: center;
    text-align: center;
  }

  .site-footer__logo {
    width: 150px;
    height: 150px;
  }

  .site-footer__logo-animated {
    width: 150px;
    height: 150px;
  }

  .site-footer__logo-center {
    width: 80px;
    height: 80px;
  }

  .site-footer__logo-center img {
    width: 65px;
    height: 65px;
  }

  .site-footer__logo-text-path {
    font-size: 11px;
    letter-spacing: 2px;
  }

  .site-footer__nav {
    align-items: center;
    width: 100%;
  }

  .site-footer__menu {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }

  .site-footer__cta {
    width: auto;
  }

  .site-footer__bottom {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .site-footer__copyright {
    text-align: center;
  }
}

@media (max-width: 900px) {
  .site-footer {
    /* Reserve space at the bottom for the absolutely-positioned "marketing
       sharks" watermark (120px tall here) so it sits BELOW the copyright /
       privacy links instead of overlapping them on mobile. */
    padding: 50px 0 152px;
    height: auto;
  }

  .site-footer__content {
    padding: 0 20px;
  }

  .site-footer__logo {
    width: 120px;
    height: 120px;
  }

  .site-footer__logo-animated {
    width: 120px;
    height: 120px;
  }

  .site-footer__logo-center {
    width: 65px;
    height: 65px;
  }

  .site-footer__logo-center img {
    width: 50px;
    height: 50px;
  }

  .site-footer__logo-text-path {
    font-size: 9px;
    letter-spacing: 1.5px;
  }

  .site-footer__menu {
    flex-direction: column;
    align-items: center;
    gap: 15px;
  }

  .site-footer__menu a {
    font-size: 16px;
    line-height: 22px;
  }

  .site-footer__cta {
    width: 100%;
    max-width: 250px;
    font-size: 18px;
    padding: 12px 12px 12px 20px;
    height: 50px;
  }

  .site-footer__social {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .site-footer__social-link span {
    font-size: 16px;
  }

  .site-footer__social-icon {
    width: 32px;
    height: 32px;
  }

  .site-footer__copyright {
    font-size: 16px;
    line-height: 22px;
  }

  .site-footer__watermark {
    height: 120px;
    bottom: 0;
  }
}

@media (max-width: 640px) {
  .site-footer {
    /* Bottom space for the 100px "marketing sharks" watermark so it sits below
       the copyright / privacy links rather than overlapping them. */
    padding: 40px 0 128px;
    height: auto;
  }

  .site-footer__content {
    padding: 0 20px;
  }

  .site-footer__watermark {
    height: 100px;
    bottom: 0;
  }

  .site-footer__logo {
    width: 100px;
    height: 100px;
  }

  .site-footer__logo-animated {
    width: 100px;
    height: 100px;
  }

  .site-footer__logo-center {
    width: 55px;
    height: 55px;
  }

  .site-footer__logo-center img {
    width: 42px;
    height: 42px;
  }

  .site-footer__logo-text-path {
    font-size: 8px;
    letter-spacing: 1px;
  }

  .site-footer__cta {
    width: auto;
    align-self: center;
  }
}

/* Ensure footer spans full width */
.site-footer {
  box-sizing: border-box;
}
/* ============================================================
   Footer — 4-column layout (Teenused / Ettevõte / Kontakt / CTA)
   Reuses the existing footer typography & colours (Manrope, #fff).
   ============================================================ */
.site-footer__columns {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  min-width: 0;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.site-footer__col-title {
  margin: 0;
  font-family: 'Manrope', var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #ffffff;
}

/* Link lists (Teenused / Ettevõte) */
.site-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__col-list li {
  margin: 0;
}

/* Drop the trailing space the global menu <li> margin leaves under the last
   link, so the column's content bottom lines up with the CTA button. */
.site-footer__col-list li:last-child {
  margin-bottom: 0;
}

.site-footer__col-list a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Manrope', var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  transition: opacity var(--transition-fast);
}

.site-footer__col-list a:hover {
  opacity: 0.7;
}

/* Contact column */
.site-footer__contact {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__contact-name {
  font-family: 'Manrope', var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 25px;
  color: #ffffff;
}

.site-footer__contact-line {
  font-family: 'Manrope', var(--font-sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 25px;
  color: #ffffff !important;
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

/* Phone / email links: same hover as the other footer links (white + fade),
   never the default blue link colour. */
a.site-footer__contact-line:hover,
a.site-footer__contact-line:focus,
a.site-footer__contact-line:visited {
  color: #ffffff !important;
  opacity: 0.7;
}

/* Pull the e-mail closer to the phone number (14px gap → ~3.5px).
   Targets only the e-mail line — name↔phone spacing and the CTA position
   (pinned to the column bottom) stay unchanged. */
.site-footer__contact a[href^="mailto:"] {
  margin-top: -10.5px;
}

/* CTA button pushed to the bottom of the Kontakt column so its lower edge
   lines up with the last items of the other columns (Paketid / Kontakt). */
.site-footer__col--contact .site-footer__cta {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- Tablet: 2x2 columns ---- */
@media (max-width: 1024px) {
  .site-footer__top {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 48px;
  }
  .site-footer__columns {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 40px;
  }
}

/* ---- Mobile: single full-width column ---- */
@media (max-width: 768px) {
  .site-footer__top {
    align-items: center;
    text-align: center;
    gap: 40px;
  }
  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .site-footer__col {
    align-items: center;
    gap: 18px;
  }
  .site-footer__col-list {
    gap: 18px;
    align-items: center;
  }
  .site-footer__contact {
    align-items: center;
  }
  .site-footer__col--contact .site-footer__cta {
    align-self: center;
  }
}


/* == 40-layout/blog.css == */
/* Blog Layout & Sidebar */

/* Blog Header */
.blog-header {
  width: 100%;
  margin-bottom: var(--space-4);
  position: relative;
  overflow: hidden;
}

.blog-header__top {
  background: #000000;
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.blog-header__top-content {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.blog-header__badge {
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.blog-header__actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.blog-header__action {
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
  border-radius: var(--radius-sm);
}

.blog-header__action:hover {
  opacity: 0.7;
}

.blog-header__action svg {
  stroke: currentColor;
}

.blog-header__image {
  width: 100%;
  height: 60vh;
  min-height: 400px;
  max-height: 600px;
  position: relative;
  overflow: hidden;
}

.blog-header__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(20px) brightness(0.8);
  transform: scale(1.1);
}

.blog-header__gradient {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(135, 206, 250, 0.6) 0%,
    rgba(70, 130, 180, 0.4) 20%,
    rgba(25, 25, 112, 0.3) 40%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(139, 69, 19, 0.4) 60%,
    rgba(205, 133, 63, 0.5) 80%,
    rgba(255, 140, 0, 0.3) 100%
  );
  filter: blur(30px);
  transform: scale(1.2);
}

/* Blog Layout Container */
.blog-layout {
  display: grid;
  gap: var(--space-4, 2rem);
  align-items: start;
  width: 100%;
}

/* No Sidebar - Full Width */
.blog-layout--no-sidebar {
  grid-template-columns: 1fr;
}

.blog-layout--no-sidebar .blog-content {
  max-width: 800px;
  margin: 0 auto;
}

/* Right Sidebar */
.blog-layout--right-sidebar {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 350px);
}

/* Left Sidebar */
.blog-layout--left-sidebar {
  grid-template-columns: minmax(280px, 350px) minmax(0, 1fr);
}

/* Both Sidebars */
.blog-layout--both-sidebars {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px);
}

/* Blog Content */
.blog-content {
  min-width: 0; /* Prevent grid blowout */
}

/* Sidebar Styles */
.sidebar {
  background: var(--color-bg-light, #f8f9fa);
  padding: var(--space-3, 1.5rem);
  border-radius: var(--radius-lg, 12px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: sticky;
  top: calc(80px + var(--space-2, 1rem)); /* Header height + spacing */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.sidebar__widget {
  margin-bottom: var(--space-3);
}

.sidebar__widget:last-child {
  margin-bottom: 0;
}

.sidebar__widget-title {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

/* Widget Styles */
.widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget ul li {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.widget ul li:last-child {
  border-bottom: none;
}

.widget ul li a {
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.widget ul li a:hover {
  color: var(--color-primary);
}

/* Entry Header */
.entry-header {
  margin-bottom: var(--space-3);
}

.entry-title {
  font-size: var(--fs-h1);
  margin-bottom: var(--space-2);
  line-height: var(--lh-tight);
}

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.entry-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Entry Thumbnail */
.entry-thumbnail {
  margin-bottom: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.entry-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* Entry Content */
.entry-content {
  margin-bottom: var(--space-4);
}

.entry-content > * + * {
  margin-top: var(--space-2);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

/* Entry Footer */
.entry-footer {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #e0e0e0);
}

.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: 0.9rem;
}

.entry-tags a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background: var(--color-bg-light);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.entry-tags a:hover {
  background: var(--color-primary);
  color: white;
}

/* Page Links (Pagination for multi-page posts) */
.page-links {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border, #e0e0e0);
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.page-links a,
.page-links > span {
  padding: 0.5rem 0.75rem;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--color-text);
  transition: all var(--transition-fast);
}

.page-links a:hover {
  background: var(--color-primary);
  color: white;
}

.page-links > span {
  background: var(--color-primary);
  color: white;
}

/* Responsive */
@media (max-width: 1024px) {
  /* Adjust sidebar width on smaller screens */
  .blog-layout--right-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px);
  }
  
  .blog-layout--left-sidebar {
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  /* Blog Header Mobile */
  .blog-header__top {
    padding: var(--space-2) var(--space-3);
  }
  
  .blog-header__badge {
    font-size: 0.75rem;
  }
  
  .blog-header__image {
    height: 40vh;
    min-height: 300px;
    max-height: 400px;
  }
  
  .blog-header__actions {
    gap: var(--space-1);
  }
  
  .blog-header__action {
    padding: 0.375rem;
  }
  
  .blog-header__action svg {
    width: 18px;
    height: 18px;
  }
  
  /* All layouts become stacked on mobile */
  .blog-layout--right-sidebar,
  .blog-layout--left-sidebar,
  .blog-layout--both-sidebars {
    grid-template-columns: 1fr !important;
  }
  
  /* Sidebar on mobile */
  .sidebar {
    position: static;
    margin-top: var(--space-3, 1.5rem);
    max-height: none;
  }
  
  .blog-layout--no-sidebar .blog-content {
    max-width: 100%;
  }
  
  .entry-meta {
    font-size: 0.85rem;
    gap: var(--space-1, 0.5rem);
  }
}



/* == site.css (mitte-import osa) == */
/* megamenu.css is enqueued separately in inc/theme.php with filemtime() versioning */



/* Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overflow-x: clip;
  max-width: 100%;
  /* Black root background so the overscroll / rubber-band bounce at the very top
     (revealed through the transparent header) shows black, not the white body —
     fixes the brief white strip when scrolling all the way up. */
  background-color: #000000;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  -webkit-overflow-scrolling: touch;
  overflow-x: clip;
  max-width: 100%;
  position: relative;
}

#page,
.site {
  margin: 0;
  padding: 0;
}

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

/* Container */
.container {
  max-width: var(--container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 2rem);
}

.container--narrow {
  width: min(800px, 92vw);
}

.container--wide {
  width: min(1400px, 92vw);
}

/* Section spacing */
.section {
  padding: clamp(3rem, 8vw, 6rem) 0;
  margin: 0;
}

.section--sm {
  padding: clamp(2rem, 5vw, 4rem) 0;
  margin: 0;
}

.section--lg {
  padding: clamp(4rem, 10vw, 8rem) 0;
  margin: 0;
}

/* Remove all spacing between blocks */
.entry-content {
  margin: 0 !important;
  padding: 0 !important;
  --wp--style--block-gap: 0 !important;
}

/* Stray empty paragraph blocks (the editor keeps re-adding one at the very top of
   the page content) create a ~16px gap that shows the white body above dark
   sections — looks like a white strip under the header. Hide any empty paragraph
   so the gap can never reappear, regardless of content edits. */
.site-main > p:empty,
.entry-content > p:empty,
.site-main .wp-block-paragraph:empty {
  display: none !important;
}

/* Remove spacing from ACF blocks */
.entry-content>[data-type^="acf/"],
.entry-content>.block-cta,
.entry-content>.block-content-grey,
.entry-content>.block-content-highlighted,
.entry-content>.block-table-2,
.entry-content>.block-two-box-cta,
.entry-content>.block-what-includes,
.entry-content>.block-service-cards,
.entry-content>.block-specialist,
.entry-content>.block-team,
.entry-content>.block-label-bar,
.entry-content>.block-testimonials,
.entry-content>.block-hero,
.entry-content>.sharks-headings,
.entry-content>.block-case-story,
.entry-content>.block-works5,
.entry-content>.block-works3,
.entry-content>.block-works1,
.entry-content>.block-wide-picture,
.entry-content>.block-four-steps,
.entry-content>.block-roll-process,
.entry-content>.block-h1-text-cta,
.entry-content>.block-two-column-grey,
.entry-content>.block-hero-portfolio {
  margin: 0 !important;
}




/* Entry Content - add spacing to Gutenberg blocks (but not ACF blocks) */
.entry-content .wp-block-columns:not(:has([data-type^="acf/"])),
.entry-content .wp-block-group:not(:has([data-type^="acf/"])),
.entry-content .wp-block-cover,
.entry-content>p,
.entry-content>h1,
.entry-content>h2,
.entry-content>h3,
.entry-content>h4,
.entry-content>h5,
.entry-content>h6,
.entry-content>ul,
.entry-content>ol {
  padding-inline: clamp(1rem, 3vw, 2rem);
}

/* Ensure ACF blocks have no extra padding from entry-content */
.entry-content>.sharks-headings,
.entry-content>.block-cta,
.entry-content>.block-content-grey,
.entry-content>.block-content-highlighted,
.entry-content>.block-table-2,
.entry-content>.block-two-box-cta,
.entry-content>.block-what-includes,
.entry-content>.block-service-cards,
.entry-content>.block-specialist,
.entry-content>.block-team,
.entry-content>.block-label-bar,
.entry-content>.block-testimonials,
.entry-content>.block-hero,
.entry-content>.block-case-story,
.entry-content>.block-works5,
.entry-content>.block-works3,
.entry-content>.block-works1,
.entry-content>.block-wide-picture,
.entry-content>.block-four-steps,
.entry-content>.block-roll-process,
.entry-content>.block-h1-text-cta,
.entry-content>.block-two-column-grey,
.entry-content>.block-hero-portfolio {
  padding-inline: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Remove spacing before footer */
.site-main,
#main {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.site-footer {
  margin-top: 0 !important;
}

/* Remove padding for columns that contain heading-half */
.entry-content .wp-block-columns:has(.heading-half) {
  padding: 0 !important;
  margin: 0 !important;
  margin-inline: auto !important;
  gap: 0 !important;
  max-width: 1440px !important;
}

.entry-content .wp-block-column:has(.heading-half) {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  position: relative;
  overflow: visible;
}

/* Extend heading-half gray bg to left viewport edge */
.wp-block-column:has(.heading-half)::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background-color: #F7F7F5;
}

/* Also remove gap from wp-block-columns itself */
.wp-block-columns:has(.heading-half) {
  gap: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  --wp--style--block-gap: 0 !important;
  align-items: stretch !important;
  overflow: visible !important;
}

/* Remove any block gap/spacing */
.wp-block-columns:has(.heading-half)>* {
  margin: 0 !important;
}

/* Remove margin-top after heading-half */
.entry-content .heading-half+*,
.entry-content .wp-block-columns:has(.heading-half)+* {
  margin-top: 0 !important;
}

/* Utility classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Skip link for accessibility (WCAG 2.1 AA) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 100000;
  font-size: 14px;
  font-weight: 600;
}

.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Screen reader text - same as visually-hidden but with alias */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.screen-reader-text:focus {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: #000;
  color: #fff;
  z-index: 100000;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

/* Override container max-width to 1440px */
:root {
  --container-max: 1440px !important;
}

/* Update container--wide to match 1440px */
.container--wide {
  width: min(1440px, 92vw);
}

/* Mobile visibility utility */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none !important;
  }
}
/* ===== IMPROVED RESPONSIVE BREAKPOINTS ===== */

/* Small mobile devices */
@media (max-width: 576px) {
  :root {
    --container-padding: 1rem;
  }

  body {
    font-size: 14px;
  }

  .container {
    padding-inline: 1rem;
  }
}

/* Tablet */
@media (min-width: 577px) and (max-width: 768px) {
  :root {
    --container-padding: 1.5rem;
  }

  .container {
    padding-inline: 1.5rem;
  }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 992px) {
  :root {
    --container-padding: 2rem;
  }

  .container {
    padding-inline: 2rem;
  }
}

/* Desktop */
@media (min-width: 993px) and (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
}

/* Large desktop */
@media (min-width: 1201px) {
  .container {
    max-width: var(--container-max, 1440px);
  }
}

/* BEGIN HERMES BLOG ALTERNATING ROW LAYOUT 2026-06-08
   Blog archive: 2 posts left, next 2 posts shifted right, matching sharks.pw reference. */
@media (min-width: 1024px) {
  body.blog .blog-posts-grid,
  body.archive.category .blog-posts-grid {
    max-width: 1160px;
    margin-left: auto;
    margin-right: auto;
  }

  body.blog .blog-posts-grid .blog-posts-row,
  body.archive.category .blog-posts-grid .blog-posts-row {
    display: flex;
    gap: 20px;
    width: 754px;
    margin-bottom: 20px;
  }

  body.blog .blog-posts-grid .blog-posts-row:nth-child(odd),
  body.archive.category .blog-posts-grid .blog-posts-row:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
  }

  body.blog .blog-posts-grid .blog-posts-row:nth-child(even),
  body.archive.category .blog-posts-grid .blog-posts-row:nth-child(even) {
    margin-left: 388px;
    margin-right: 0;
  }

  body.blog .blog-posts-grid .blog-posts-row .blog-post-card,
  body.archive.category .blog-posts-grid .blog-posts-row .blog-post-card {
    width: 367px;
    flex: 0 0 367px;
  }
}

@media (max-width: 1023px) {
  body.blog .blog-posts-grid .blog-posts-row,
  body.archive.category .blog-posts-grid .blog-posts-row {
    margin-left: 0;
    width: auto;
  }
}
/* END HERMES BLOG ALTERNATING ROW LAYOUT 2026-06-08 */