/*
Theme Name: ArbitraLex Theme
Version: 1.0
*/

@layer tokens, fonts, reset, base, layouts, components, sections;

@layer tokens {
  :root {
    --color-text: #0C2D32;
    --color-text-light: rgb(12 45 50 / 0.7);

    --color-green: #154C56;
    --color-taupe: #9E9B98;
    --color-purple: #594669;
    --color-purple-bright: #96407D;

    --color-beige-arb: #DABF94;
    --color-off-white: #F7F5E8;

    --color-beige: #C8C1B8;
    --color-light-bg: #F2F1EF;

    /* RGB helpers (for alpha usage) */
    --color-green-rgb: 21 76 86;
    --color-beige-rgb: 200 193 184;
    --color-text-rgb: 12 45 50;
    --color-taupe-rgb: 158 155 152;

    --font-text: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-header: "Kontora", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    --fs-14: 0.875rem;
    --fs-15: 1rem;
    --fs-16: 1.1rem;
    --fs-18: 1.1rem;
    --fs-20: 1.1rem;
    --fs-22: 1.2rem;
    --fs-26: 1.5rem;

    --fs-40: 2rem;
    --fs-50: 2.5rem;
    --fs-60: 3rem;
    --fs-76: 10vw;
    --fs-80: clamp(2.1rem, 12vw, 3.6rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --lh-tight: 1.1;
    --lh-normal: 1.3;
    --lh-body: 1.5;

    --ls-wide: 0.02em;
    --ls-extrawide: 0.02em;

    --bp-sm: 768px;    /* tablet / desktop-lite */
    --bp-md: 1024px;   /* base desktop */
    --bp-lg: 1280px;   /* comfortable desktop */
    --bp-xl: 1440px;   /* fine tuning */
    --bp-xxl: 1600px;  /* wide desktop */
    --bp-max: 1920px;  /* hard ceiling */

    --columns: 3;
    --container-max: 2560px;

    --outer: 22px;   /* outer margin */
    --gutter: 16px;  /* col gap */
    --outer-half: calc(var(--outer) / 2);
    --outer-x2: calc(var(--outer) * 2);
    --col-width: calc((var(--content) - ((var(--columns) - 1) * var(--gutter)))/ var(--columns));
    --col-space: calc(var(--col-width) + var(--gutter));

    --container: calc(100vw - var(--outer) - 2px);
    --content: calc(var(--container) - var(--outer));

    --brd: 1px solid var(--color-beige);
    --brd-taupe: 1px solid var(--color-taupe);
    --brd-radius: 2px;

    --gutter-x2: calc(var(--gutter)*2);
    --gutter-x3: calc(var(--gutter)*3);
    --gutter-x4: calc(var(--gutter)*4);
  }

  @media (min-width: 361px) {
    :root {
      --ls-extrawide: 0.05em;
    }
  }

  @media (min-width: 768px) {
    :root {
      --fs-14: 0.78rem;
      --fs-15: 0.8333rem; /* 15/18 */
      --fs-16: 0.8889rem; /* 16/18 */
      --fs-18: 1rem;      /* 18/18 */
      --fs-20: 1.1111rem; /* 20/18 */
      --fs-22: 1.2222rem; /* 20/18 */
      --fs-26: 1.4rem; /* 20/18 */

      --fs-40: 2.22rem;
      --fs-50: 2.77rem;
      --fs-60: 3.33rem;
      --fs-76: 4.2222rem;
      --fs-80: clamp(3.6rem, 6vw, 4.4444rem);

      --columns: 6;
      --outer: 24px;
      --gutter: 16px;
    }
  }

  @media (min-width: 1024px) {
    :root {
      --columns: 12;
      --outer: 40px;
      --gutter: 20px;
    }
  }

  @media (min-width: 1440px) {
    :root {
      /* 40 → 71.1111 */
      --outer: clamp(40px, calc(40px * (100vw / 1440px)), 71.1111px);

      /* 20 → 35.5556 */
      --gutter: clamp(20px, calc(20px * (100vw / 1440px)), 35.5556px);
    }
  }
}

@layer fonts {
  @font-face {
    font-family: "Kontora";
    src: url("assets/fonts/Kontora-SemiBold.otf") format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: "Kontora";
    src: url("assets/fonts/Kontora-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
}

@layer reset {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  :where(html) {
    color-scheme: light dark;
    hanging-punctuation: first allow-end last;
    word-break: break-word;
    interpolate-size: allow-keywords;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    text-size-adjust: none;
    tab-size: 2;
    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
  }

  :where(html.translated-rtl) {
    direction: rtl;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(html) {
      scroll-behavior: auto;
    }
  }

  :where(body) {
    min-block-size: 100svb;
    min-inline-size: 300px;
  }

  :where(canvas, img, picture, svg, video) {
    block-size: auto;
    border: none;
    display: block;
    max-inline-size: 100%;
  }

  :where(button, input, progress, select, textarea) {
    appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    hanging-punctuation: none;
    line-height: inherit;
    text-align: start;
    touch-action: manipulation;
  }

  :where(button) {
    cursor: pointer;
    user-select: none;
  }

  :where(textarea) {
    resize: vertical;
  }

  :where(textarea:not([rows])) {
    field-sizing: content;
  }

  :where(fieldset, iframe) {
    border: none;
  }

  :where(p, li, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  :where(abbr[title]) {
    border: none;
    text-decoration: none;
  }

  :where(cite) {
    font-style: inherit;
  }

  :where(small) {
    font-size: inherit;
  }

  :where(li, ol, ul) {
    list-style: none;
  }

  :where(dialog, [popover]) {
    background: transparent;
    border: none;
    color: inherit;
    margin: auto;
    max-block-size: none;
    max-inline-size: none;
    position: fixed;
  }

  :where([popover]) {
    inset: auto;
  }

  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
    display: none;
  }

  :where([hidden]:not([hidden="until-found"])) {
    display: none !important;
  }

  :target {
    scroll-margin: 3rlh;
  }
}

@layer base {
  html {
    font:
      clamp(1rem, 1rem + 0.15vw, 2rem) / var(--lh-body) system-ui, sans-serif;
  }

  body {
    background-color: var(--color-light-bg);
    font-family: var(--font-text);
    font-weight: var(--fw-regular);
    color: var(--color-text);
  }

  h1,
  h2 {
    
  }
  h1,
  h2,
  h3 {
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6, .title   {
    text-wrap: balance;
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);

    strong {
      font-weight: inherit;
    }
  }

  a {
    color: var(--color-green);
    text-underline-offset: 2px;

    &:not(:is(:hover, :focus)) {
      text-decoration-color: color-mix(in srgb, currentColor, transparent 50%);
    }

    &.btn {
      text-decoration: none;
    }

    &:hover {
      color: var(--color-purple);
      text-decoration-color: var(--color-purple);
    }
  }

  p {
    /*font-size: var(--fs-15);*/
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    inset-block-end: -0.25em;
  }
  sup {
    inset-block-start: -0.5em;
  }

  .title-xsmall {
    font-size: var(--fs-16);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-extrawide);
    margin-bottom: 0.5em;
  }

  .title-small {
    font-size: var(--fs-20);
    line-height: var(--lh-normal);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
    color: var(--color-purple);
  }

  @media screen and (min-width: 768px) {
    h2.title-small {
      font-size: 1em;
    }
  }

  .title-smallcaps {
    font-size: var(--fs-20);
    line-height: var(--lh-body);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-extrawide);
    text-transform: uppercase;
  }

  .title-mid {
    font-size: var(--fs-40);
    text-transform: uppercase;
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-extrawide);

    em {
      text-transform: uppercase;
      font-style: normal;
    }

    strong {
      font-size: var(--fs-20);
      font-family: var(--font-text);
      color: var(--color-text-light);
      display: block;
      font-weight: normal;
      line-height: var(--lh-body);
      letter-spacing: normal;
    }
  }

  .title-big {
    font-size: var(--fs-60);
    text-transform: uppercase;
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-extrawide);
    margin-bottom: 0.425em;
  }

  .title-extra {
    font-size: var(--fs-76);
    line-height: var(--lh-tight);
    font-weight: var(--fw-medium);
    letter-spacing: var(--ls-extrawide);
    text-transform: uppercase;
    margin-bottom: 0.425em;
  }

  .title-gradient {
    background: linear-gradient(271.2deg, var(--color-green) 0%, var(--color-purple) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .subheading {
    font-size: var(--fs-26);
    color: var(--color-green);
    font-family: var(--font-header);
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-normal);
    font-weight: var(--fw-semibold);
  }

  .color-beige {
    color: var(--color-beige);
  }

  .color-green {
    color: var(--color-green);
  }

  .color-purple {
    color: var(--color-purple);
  }

  .bg-beige {
    background-color: rgba(var(--color-beige-rgb) / 0.2);

    .title-smallcaps {
      color: var(--color-green);
    }
  }

  .btn {
    text-decoration: none;
    font-family: var(--font-header);
    font-size: 0.75rem;
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-extrawide);
    line-height: 1;
    padding-block: 1.0625em calc(1.0625em - 2px);
    padding-inline: 1.5em;
    background-color: var(--color-green);
    color: var(--color-off-white);
    border-radius: var(--brd-radius);
    min-width: fit-content;
    display: inline-block;
    text-align: center;

    em {
      text-transform: uppercase;
      font-style: inherit;
    }

    &:hover {
      background-color: var(--color-purple);
      color: var(--color-off-white);
    }
  }

  .link-with-arr {
    display: inline-flex;
    align-items: baseline;
    font-size: 0.85rem;
    padding-block: .2em;
    border-bottom: 1px solid rgba(var(--color-green-rgb) / .5);
    color: var(--color-green); 
    text-decoration: none; 
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-extrawide);
    line-height: 1.2;

    em {
      font-style: normal;
      text-transform: uppercase;

      &::before {
        content: "\00a0";
      }
    }

    &::after {
      content: url(/wp-content/themes/aksresolution-theme/assets/svg/arrow-tr-green.svg);
      margin-left: 0.625em;
    }

    &:not(a) {
      border: none;
      padding-block: 0;

      &::after {
        transform: rotate(90deg);
      }
    }

    &.white {
      border-bottom-color: rgba(var(--color-beige-rgb) / .5);
      color: var(--color-off-white);
      
      &::after {
        content: url(/wp-content/themes/aksresolution-theme/assets/svg/arrow-tr-white.svg);
      }
    }
  }

  a.link-with-arr:hover {
    color: var(--color-purple-bright);
    border-bottom-color: var(--color-purple-bright);

    &::after {
      content: url(/wp-content/themes/aksresolution-theme/assets/svg/arrow-tr-purple.svg);
    }
  }

  @media (min-width: 361px) {
    .btn {
      font-size: 0.8125rem;
    }

    .link-with-arr {
      font-size: 1rem;
    }
  }


  @media (min-width: 768px) {
    .link-with-arr, .btn {
      font-size: var(--fs-16);
    }

    .link-with-arr {
      padding-block: .4em;
    }
  }


  .btn-beige {
    background-color: var(--color-beige);
    color: var(--color-off-white);
  }

  .desktop {
    display: none;
  }

  @media screen and (min-width: 1024px) {
    .mobile {
      display: none;
    }
    
    .desktop {
      display: initial;
    }
  }
}

@layer layouts {

  body {    
    display: grid;
    justify-items: center;

    .footer, .header, main {
      justify-self: stretch;
    }
  }

  .container {
    padding-inline: var(--outer-half);
    margin-inline: var(--outer-half);
  }
  
  @media screen and (min-width: 2560px) {
    .container {    
      max-width: calc(var(--container-max) - var(--outer));
      width: var(--container);        
      justify-self: center;
    }
  }    

  .grid {
    display: grid;
    gap: var(--gutter);
  }
  

}

@layer components {
  .header {
    grid-template-columns: 1fr max-content max-content;
    align-items: center;
    border: var(--brd);
    padding-block: var(--outer-half);
    margin-top: var(--outer-half);

    .btn {
      padding-inline: .75em;
    }
  }

  .header-logo {
    display: grid;

    svg {
      height: 2.6em;
      max-height: var(--fs-60);
      width: auto;
    }

    .logo-sign {
      fill: var(--color-beige);
    }

    .logo-name {
      fill: var(--color-text);
    }
  }

  .menu-primary {
    display: flex;
    flex-direction: row;    
    gap: 1.5em;
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-16);
    letter-spacing: var(--ls-extrawide);
    margin-right: var(--gutter);
    line-height: 1;

    a {
      text-decoration: none;
      color: var(--color-text);

      &:hover {
        color: var(--color-purple);
      }
    }
  }

  .nav-primary {
    display: none;
  }

  .nav-mobile {
    svg {
      fill: var(--color-text);
      height: var(--fs-16);
    }
  }

  .mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 1000;
  }

  .mobile-menu.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-menu-panel {
    background: linear-gradient(57.48deg, var(--color-green) 0%, var(--color-purple) 100%);
    height: 100%;
    width: 100%;
    max-width: 100%;
    transform: translateX(100%);
    transition: transform .35s ease;
    padding: var(--outer-x2);
    display: grid;
    grid-gap: var(--outer-x2);
    grid-template-rows: min-content 1fr;
    overflow: scroll;
  }

  .mobile-menu.is-open .mobile-menu-panel {
    transform: translateX(0);
  }
  
  .mobile-menu-close, .popup-close {
    justify-self: end;
    cursor: pointer;

    svg {
      height: 1.5rem;
      fill: var(--color-off-white);
    }
  }

  nav.nav-mobile {
    padding-bottom: var(--col-width);
    font-size: 1.5em;
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);
    display: grid;
    justify-content: center;
    align-content: center;

    a {
      color: var(--color-off-white);
    }

    li {
      margin-bottom: 1em;
    }

    .sub-menu {
      font-size: 0.8em;
      margin-top: .5em;
      margin-left: .5em;

      li {
        margin-block: .25em 0;
      }
    }
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
  }

  @media (max-height: 768px) and (orientation: landscape) {
    nav.nav-mobile li {
      margin-bottom: .5em;
    }
  }

  @media (min-width: 1024px) {
    .header { 
      grid-template-columns: 1fr max-content;
      position: relative;
    }

    .nav-mobile {
      display: none;
    }

    .nav-primary {
      display: grid;
      align-items: center;  
      grid-template-columns: max-content max-content;

      .sub-menu {
        display: none;

        a {
          color:  var(--color-off-white);
          font-size: .9em;
        }

        li:not(:first-child) {
          a::before {
            content: "•";
            margin-right: .5em;
          }
        }
      }

      .menu-primary {      
        height: 100%;
        align-items: center;

        li {
          height: 100%;                
          display: grid;
          align-content: center;
        }
      }

      .menu-item-has-children {

        &::after {                 
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: var(--outer-half);
        }

        &:hover, &:focus-within {
          .sub-menu {
            display: flex;
            position: absolute;
            gap: .75em;
            background-color: var(--color-text);
            padding: calc(var(--gutter) / 2) var(--gutter);
            width: max-content;
            top: 100%;
            right: 0;
          }
        }
      }
    }   
  }

  @media screen and (min-width: 1280px) {       
    .header { 
      .btn {
        width: calc(var(--col-width)*2 + var(--gutter));
        text-align: center;
      }
    }

    .nav-primary {
      display: grid;
      align-items: center;  
      grid-template-columns: 1fr max-content;
    }
  }

  @media screen and (min-width: 1440px) {          
    .header { 
      grid-template-columns: 7fr 5fr;
    }
  }

  .page-inner {        
    counter-reset: list;
  }

  main:has(.testimonials-grid) {
    display: grid;
    overflow-x: hidden;
  }

  .page-home {
    width: 100%;
    overflow-x: hidden;
  }
  
  .page-home, .page-inner { 
    .section {
      border: var(--brd);
      border-top: none;
    }
  }

  .footer {
    background-color: rgba(var(--color-beige-rgb) / 0.3);
    padding-block: var(--outer-half) var(--outer);
    margin-top: var(--outer);

    .container {
      border: var(--brd-taupe);
      padding-inline: 0;
    }
  }

  .footer-logo {
    border-bottom: var(--brd-taupe);
    padding-block: var(--gutter-x2);
    margin-bottom: var(--gutter-x2);
    justify-content: center;
    justify-items: center;
    text-align: center;
    row-gap: var(--gutter-x3);

    svg {
      height: 2.6em;
      max-height: var(--fs-60);
      width: auto;
    }

    .logo-sign {
      fill: var(--color-beige);
    }

    .logo-name {
      fill: var(--color-text);
    }

    .title-smallcaps {
      font-weight: var(--fw-medium);
      font-size: var(--fs-16);
    }
  }

  .footer-menu {
    padding-bottom: var(--gutter-x2);
    a {
      color: inherit;

      &:hover {
        color: var(--color-purple);
        text-decoration: underline;
      }
    }

    li.menu-item-has-children>a {
      font-size: var(--fs-16);
      font-family: var(--font-header);
      letter-spacing: var(--ls-extrawide);
      color: var(--color-taupe);
      font-weight: var(--fw-medium);
      text-transform: uppercase;
      text-align: center;
      text-decoration: none;
    }

    ul {
      margin-top: var(--fs-16);
      font-size: var(--fs-15);
      color: var(--color-green);

      li {
        margin-bottom: .5em;
      }

    }
  }



  .footer-content {
    margin-bottom: var(--gutter-x4);    
    row-gap: var(--gutter-x4);
    justify-items: center;
    text-align: center;
    
    div {
      display: grid;
      max-width: 280px;

    }

    nav {
      border-bottom: var(--brd-taupe);
      justify-self: stretch;
      display: grid;
      justify-content: center;
    }
  }

  .footer-title {
    font-size: var(--fs-16);
    font-family: var(--font-header);
    letter-spacing: var(--ls-extrawide);
    color: var(--color-taupe);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 1em;
  }

  .footer-text {
    font-size: var(--fs-15);
    color: var(--color-text-light);

    .icon {
      width: 1em;
    }

    &[data-content="contact"] {
      font-size: var(--fs-20);
      font-weight: var(--fw-medium);
    }

    &:not(:last-of-type) {      
      margin-bottom: 1em;
    }
  }

  .footer-link:has(.icon), .footer-text:has(svg) {
    display: flex;
    align-items: center;
    gap: 1em;    
    justify-self: center;
  }

  .footer-copy {
    padding-block: var(--gutter);
    padding-inline: var(--outer-half);
    border-top: var(--brd-taupe);
    font-size: var(--fs-14);
    color: var(--color-text-light);

    .menu {
      display: flex;
      flex-direction: row;
      gap: 2em;
    }

    div:has(p+nav) {
      display: flex;
      flex-direction: column;
      gap: var(--gutter);      
    }
  }

  @media screen and (min-width: 768px) {
    .footer-logo {
      grid-template-columns: repeat(2, 1fr);
      text-align: left;
      justify-items: start;
      align-items: center;
      column-gap: var(--col-width);

      svg, h2 {
        max-width: 20em;
      }

      div:has(svg) {
        justify-self: end;
      }
    }

    .footer-copy {
      div:has(p+nav) {
        justify-content: space-between;
        flex-direction: row;
      }
    }

    .footer-content {
      padding-inline: var(--gutter-x2);
      grid-template-columns: repeat(2, 1fr);    
      row-gap: var(--gutter-x2);
      column-gap: var(--col-width);
      justify-items: start;
      text-align: left;
      max-width: none;
      align-items: start;

      nav {
        border-bottom: none;
        justify-content: start;
      }

      .linkid {
        align-self: start;
        padding-top: .3em;
      }
    }
    
    .footer-title {
      text-align: left;
    }

    .footer-link:has(.icon), .footer-text:has(svg) { 
      justify-self: start;
    }

    .footer-menu {
      padding-bottom: 0;
    }

    .link-with-arr {
      font-size: var(--fs-15);
    }
  }

  @media screen and (min-width: 1024px) {
    .footer-logo {
      div:has(svg) {
        padding-left: calc(var(--col-space)*3);        
      }

      .title-smallcaps {
        font-size: var(--fs-20);
      }
    }

    .footer-text {
      max-width: 18vw;
    }

    .footer-content {
      grid-template-columns: repeat(4, 1fr);
      column-gap: var(--gutter);

      .linkid {
        align-self: center;
        padding-top: 0;
      }
    }
  }

  @media screen and (min-width: 1440px) {
    .footer-content {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .slider-nav {
    display: flex;
    gap: var(--gutter);
  }

  .slider-arr {
    width: 2.4rem;
    height: 2.4rem;
    border: var(--brd);
    border-radius: 50%;
    display: grid;
    justify-content: center;
    align-content: center;

    svg {
      fill: var(--color-beige);
      width: 0.75rem;
      height: 0.75rem;
    }

    &:not(.slider-arr-disabled):hover {
      border-color: var(--color-purple);
      
      svg {
        fill: var(--color-purple);
      }
    }
  }

  .slider-arr-disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  .slider-arr-left {
    svg {
      transform: rotate(-135deg);
    }
  }

  .slider-arr-right {
    svg {
      transform: rotate(45deg);
    }
  }

  .page-privacy {
    max-width: 80vw;
    margin: 3em auto;

    h1 {
      text-align: center;
      margin-bottom: 1em;
    }

    p {
      margin-bottom: 1em;
    }

    h2 {
      margin-block: 1em .5em;
    }
  }

  @media screen and (min-width: 768px) {
    .page-privacy {
      max-width: 60vw;
    }
  }

  .service-note {
    background-color: rgba(var(--color-beige-rgb) / 0.2);
    margin-bottom: var(--gutter-x3);
    padding: var(--gutter);
    color: var(--color-text-light);
    font-size: var(--fs-15);
  }
}

@layer sections {

  .page-inner + .section-legal, .page-inner + .section-cta {    
    margin-top: var(--outer-half);
  }

  .section-legal {
    background: linear-gradient(57.48deg, var(--color-green) 0%, var(--color-purple) 100%);
    padding: var(--gutter-x2);
    color: var(--color-light-bg);
    margin-bottom: var(--outer-half);

    &:last-child {
      /*margin-bottom: 6.6em;*/
      margin-bottom: 0;
    }

    .logo-sign {
      fill: var(--color-beige-arb);
    }
    
    .logo-name {
      fill: var(--color-off-white);
    }

    .section-legal-logo svg {
      max-width: 10em;
      margin-top: 2em;
    }
  }

  .section-legal-text p {
    margin-bottom: 1em;
  }

  @media screen and (min-width: 768px) {
    .section-legal {
      padding-block: 6.6em;
      grid-template-columns: repeat(2, 1fr);

      .section-legal-text {
        grid-row: span 2;
      }

      h2 {
        padding-right: var(--col-width);
      }

      &.col-2 {
        grid-template-columns: 2fr 1fr;        
        align-self: end;

        h2 {
          padding-right: var(--col-width);
        }

        .section-legal-text {
          align-self: end;
          grid-row: initial;
        }
      }
    }    
  }

  @media screen and (min-width: 1024px) {
    .section-legal {      
      grid-template-columns: repeat(3, 1fr);
      padding-inline: var(--outer-half);

      h2, .section-legal-logo {
        padding-inline: var(--col-width);
      }

      .section-legal-text {        
        grid-row: initial;
      }
      
      .section-legal-logo svg {
        max-width: 12em;
        margin-top: 0;
      }

      &.col-2 {
        grid-template-columns: 2fr repeat(2, 1fr);
        
        .section-legal-text {        
          align-self: start;;
        }

        .section-legal-logo {
          padding-inline: 0 var(--col-width);
        }
      }    
    }
  }

  .section-cta {
    border: var(--brd);
    padding-block: var(--outer-half);
    grid-template-rows: 40vh auto;

    h2 {
      margin-top: .5em;
    }

    .btn {    
      justify-self: start;
      align-self: start;
    }

    ul {
      border: var(--brd);
      align-self: end;
      color: var(--color-taupe);
      font-size: var(--fs-15);
      font-family: var(--font-header);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-extrawide);
      margin-top: 2rem;
    }

    li {
      padding-block: 0.6875em;
      padding-inline: var(--gutter);
    }
    
    li:first-child {
      border-bottom: var(--brd);
    }

    li:last-child {
      border-top: var(--brd);
    }

    img {
      height: 100%;
      width: 100%;
      object-fit: cover;
    }

    &:first-child {
      border-top: none;
    }

    .title-smallcaps {
      font-size: var(--fs-20);
      color: var(--color-purple);
      font-family: var(--font-header);
    }
  }

  .section + .section-cta {
    border-top: none;
  }

  .section-cta-text:has(.title-smallcaps) {
    padding-block: var(--gutter-x2);
  }

  @media screen and (min-width: 768px) {
    .section-cta {
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;

      ul {
        display: grid;
        grid-template-columns: 2fr 3fr;
      }
    
      li:first-child {
        border-right: var(--brd);
        border-bottom: none;
      }

      li:last-child {
        grid-column: span 2;
      }
    }

    .section-cta-text {
      padding-left: var(--gutter);
    }
  }

  @media screen and (min-width: 1024px) {
    .section-cta {
      grid-template-columns: 1fr calc((var(--col-width) + var(--gutter))*5);
      grid-column-gap: calc(var(--col-width)/2);

      img {
        max-height: 24em;
      }
    }

    .section-cta-text {
      grid-template-rows: min-content;
    }
    
    .section-cta-text:has(.title-smallcaps) {
      padding-block: var(--gutter);
      grid-template-rows: 1fr min-content min-content min-content;
    }
  }

  .page-contact {
    margin-bottom: var(--outer-half);
    padding-top: var(--gutter-x4);

    &>div:first-child {
      padding-bottom: var(--gutter-x2);
      margin-bottom: var(--gutter-x2);
      border-bottom: var(--brd);
    }

    .title-mid {
      margin-bottom: 1em;
      text-transform: none;
    }

    .title-smallcaps {
      margin-bottom: 1em;
    
      &:not(h3 + h4) {
        margin-top: 2em;
      }
    }

    a {
      font-weight: var(--fw-semibold);
    }

    .linkid svg {
      height: var(--fs-20);
    }

    .link-with-arr {
      font-size: 1rem;
    }

    p:has(svg) {
      display: flex;
      gap: var(--gutter);
    }
  }


  @media (min-width: 1024px) {
    .page-contact {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: var(--gutter);

      &>div {
        padding-inline: var(--col-width);
      }

      &>div:first-child {
        border-bottom: none;
        border-right: var(--brd);
        margin-bottom: 0;
      }
    }
  }

  .popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1000;
  }

  .popup-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }

  .popup-dialog {
    position: relative;
    background: #fff;
    max-width: 40em;
    width: 100%;
    margin: var(--outer);
    padding: var(--gutter) var(--gutter-x2);
    border-radius: var(--brd-radius);
    max-height: 90vh;
    overflow-y: auto;
    display: grid;
    grid-gap: var(--gutter);

    .title-mid {
      margin-bottom: 0;
    }
  }

  .popup-close svg {
    fill: var(--color-text-light);
  }

  .img-full-width {
    border-top: var(--brd);

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      max-height: 35vh;
      min-height: 14rem;
    }
  }

  .page-home {
    .img-full-width {
      border-top: none;
    }
  }

  .home-hero {
    padding-block: var(--gutter-x3) var(--gutter-x2);

    .title-extra {
      font-size: var(--fs-80);
      background: linear-gradient(271.2deg, var(--color-green) 0%, var(--color-purple) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;

      em {
        font-style: normal;
        background: linear-gradient(271.2deg, #154C56 0%, #96407D 49.04%, var(--color-purple) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
      }
    }

    p:has(a) {
      color: var(--color-text-light);
      font-size: var(--fs-16);
      margin-bottom: 2em;
    }

    img {
      border-radius: var(--brd-radius);
    }
  }

  .home-why {
    padding-bottom: var(--gutter-x3);

    div:first-child {
      padding-top: var(--gutter-x3);
      grid-gap: var(--gutter-x2);
    }
    
    ul {
      margin-top: var(--gutter-x3);
      margin-right: var(--gutter);
      
      p {
        color: var(--color-text-light);
        font-size: var(--fs-15);
      }
    }

    li:not(:last-child) {
      border-bottom: var(--brd);
      padding-bottom: var(--gutter);
      margin-bottom: var(--gutter);
    }

    .btn {
      justify-self: start;
    }

    .title-extra {
      background: linear-gradient(271.2deg, #96407D 5.29%, var(--color-green) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }
  }

  .inner-hero {
    padding-block: var(--gutter-x3) 0;
    border-bottom: var(--brd);

    .title-big {
      background: linear-gradient(271.2deg, var(--color-purple-bright) 5.29%, var(--color-green) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
    }

    
    .subheading:has(+ p) {
      margin-bottom: var(--gutter);
    }

    .link-with-arr {
      font-size: var(--fs-20);
      margin-bottom: .5em;
    }

    img {
      border-radius: var(--brd-radius) var(--brd-radius) 0 0;
      max-height: 50vh;
      height: 100%;
      object-fit: cover;
      width: 100%;
    }
  }

  @media screen and (min-width: 1024px) {
    .home-hero, .home-why, .inner-hero {      
      grid-template-columns: 7fr 5fr;

      div:first-child {
        border-right: var(--brd);
      }
    }

    .home-hero {     
      padding-bottom: 0;
      row-gap: var(--gutter-x2);

      div:first-child {
        grid-template-rows: min-content min-content 1fr min-content;

        p, .title-small {
          align-self: end;
          padding-right: var(--col-space);
        }

        h1+p {
          text-align: right;
        }
      }

      figure {
        max-height: 34rem;
        overflow: hidden;
        display: grid;
        align-content: start;
      }
    }

    .home-why {
      div:first-child {
        grid-template-rows: min-content min-content 1fr;
      }

      p:has(.btn) {
        align-self: end;
      }
    }

    .inner-hero {
      .grid:first-child {
        grid-template-rows: min-content min-content 1fr min-content;
        
        p:not([class]) {
          align-self: end;
          margin-bottom: 1em;
          padding-right: var(--col-width);
        }
      }

      .title-extra {
        max-width: 8em;
        margin-bottom: 0;
      }

      .title-extra + .subheading {
        max-width: 23em;
      }

      img {
        max-height: 35rem;
      }
    }
  }

  .home-services {
    counter-reset: services;
  }

  .services-item {
    padding-bottom: var(--gutter);

    div, ul {
      padding-top: var(--gutter);
    }

    .title-mid {
      text-transform: none;
      line-height: var(--lh-normal);
    }

    &::before {
      counter-increment: services;
      content: "0"counter(services) "/";
      padding-top: var(--gutter);
      font-size: var(--fs-40);
      line-height: var(--lh-normal);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-extrawide);
      color: var(--color-beige);
      font-family: var(--font-header);
    }

    &:last-child {
      padding-bottom: var(--gutter-x2);
    }

    .link-with-arr {
      font-size: var(--fs-14);
    }

    li {
      font-size: var(--fs-15);
      color: var(--color-text-light);
      line-height: var(--lh-normal);
    }

    ul:not(.services-item-tags) {
      li:not(:last-child) {
        margin-bottom: 0.9em;
      }
    }

    .services-item-tags {
      display: flex;
      gap: var(--gutter);
      flex-direction: row;
      flex-wrap: wrap;

      li {
        color: var(--color-taupe);
        background-color: rgba(var(--color-beige-rgb) / 0.2);
        padding: var(--gutter);
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .services-item {
      grid-template-columns: 1fr 5fr 3fr 3fr;

      div:first-child {
        border-right: var(--brd);
      }
      
      p:has(.link-with-arr) {
        align-self: end;
      }
    }
  }

  @media screen and (min-width: 1280px) {
    .services-item {
      grid-template-columns: 1fr 6fr 2fr 3fr;      

      ul:not(.services-item-tags) {
        margin-left: var(--col-space);
      }
    }
  }

  .home-about {
    padding-block: var(--gutter) var(--gutter-x2);
    margin-bottom: var(--gutter-x4);
    
    img {
      border-radius: var(--brd-radius);
      width: 100%;
      object-fit: cover;
    }

    .title-big {
      margin-top: .6em;
    }

    .title-big + p {
      font-family: var(--font-header);
      font-weight: var(--fw-semibold);
      font-size: var(--fs-20);
      letter-spacing: var(--ls-wide);
      color: var(--color-purple);
      margin-bottom: 2em;
    }

    .grid {
      p {
        font-size: var(--fs-16);
        color: var(--color-text-light);
      }
    }
  }

  @media screen and (min-width: 768px) {
    .home-about {
      padding-block: 0;
      grid-template-columns: 1fr 2fr;
      align-items: start;

      &>figure.wp-block-image {
        position: relative;
        left: calc(-1*var(--gutter));

        img {
          border-radius: 0;
        }
      }

      figure.wp-block-image {
        grid-row: span 2;
        align-self: stretch;
      }

      .grid {
        grid-template-columns: 1fr 3fr;
        align-items: start;
        padding-bottom: var(--gutter-x4);

        p:has(.link-with-arr) {
          align-self: end;
        }
      }
    }
  }
  @media screen and (min-width: 1280px) {
    .home-about {
      grid-template-columns: 5fr 7fr;

      h2, h2+p {
        max-width: 40vw;
      }

      & > figure.wp-block-image {
        padding-inline: 0 var(--col-width);
      }

      .grid {
        grid-template-columns: 1fr 2fr;

        p:not(:has(a)) {
          max-width: 30vw;
        }
      }
    }    
  }

  @media screen and (min-width: 1600px) {
    .home-about {
      .grid {
        margin-right: var(--col-space);
      }
    }
  }

  .home-testimonials {
    padding-inline: var(--gutter);
    margin-bottom: var(--gutter-x4);
  }

  .testimonials-header {
    display: flex;
    gap: var(--gutter);
    margin-bottom: 1.5em;
  }

  .testimonials-grid {
    display: flex;
    gap: var(--gutter);
    width: max-content;

    .item {
      border: var(--brd);
      padding-block: var(--gutter-x2);
      padding-inline: var(--gutter) var(--gutter-x2);
      display: grid;
      grid-template-columns: auto 1fr;
      width: 75vw;

      div:has(svg) {
        justify-self: end;
      }
      
      svg {
        height: 1em;
      }

      p:not(.caption) {
        margin-block: 1.7rem 1em;
      }

      .caption {
        color: var(--color-text-light);
        font-size: var(--fs-15);
      }

      &.hidden {
        background-color: rgba(var(--color-beige-rgb) / 0.2);
        border: none;

        svg path {
          fill: var(--color-beige);
        }

        p:not(.caption) {
          color: var(--color-text-light);
        }

        .caption {
          color: rgba(var(--color-text-rgb) / 0.5);
        }
      }
      
      
    }
  }
  
  @media screen and (min-width: 1024px) {
    .home-testimonials {
      padding-inline: calc(var(--gutter-x4) + var(--col-width)*3) 0;
    }

    .testimonials-header {
      gap: var(--col-width);
    }

    .testimonials-grid {
      .item {
        width: calc(var(--col-width)*6 + var(--gutter)*5);
        grid-template-columns: var(--col-width) 1fr;
        padding-inline: 0 var(--col-width);
        padding-block: calc(var(--gutter)*2.5);
      }
      
      svg {
        height: 1.3em;
      }
    }
  }

  .inner-list-numbers {
    padding-block: var(--gutter-x2);

    .title-mid {      
      text-transform: none;
      line-height: var(--lh-normal);
    }
  }

  .inner-list-numbers:has(.title-mid) {

    &::before {
      counter-increment: list;
      content: "0"counter(list) "/";
      font-size: var(--fs-40);
      line-height: var(--lh-normal);
      font-weight: var(--fw-medium);
      letter-spacing: var(--ls-extrawide);
      color: var(--color-beige);
      font-family: var(--font-header);
    }
  }

  

  @media screen and (min-width: 1024px) {
    .inner-list-numbers {
      grid-template-columns: 1fr 11fr;
      row-gap: var(--gutter-x2);

      .title-smallcaps {
        grid-column-start: 2;
        font-size: var(--fs-26);
        color: var(--color-green);
        max-width: calc(var(--col-space)*5);
      }
    }    
  }

  .list-blocks {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(2, 1fr);

    li {
      font-size: var(--fs-20);
      padding: var(--gutter);
      font-family: var(--font-header);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-wide);
      line-height: var(--lh-normal);
      background-color: rgba(var(--color-beige-rgb) / 0.2);
    }

    em {
      font-style: normal;
      font-family: var(--font-text);
      font-size: var(--fs-14);
      color: var(--color-text-light);
      line-height: var(--lh-normal);
      display: block;
      font-weight: normal;
      margin-top: 0.6em;
      letter-spacing: normal;
    }

    li:has(.wp-block-image) {
      background-color: #fff;
      padding: var(--gutter);
      display: grid;
      align-content: center;
    }
  }

  .list-gallery {}

  @media screen and (min-width: 768px) {
    .list-blocks {
      grid-template-columns: repeat(3, 1fr);

      li {
        min-height: 10rem;
        font-size: var(--fs-22);
        padding: calc(var(--gutter)*1.5);

        em {
          font-size: var(--fs-14);
        }
      }
    }
  }

  @media screen and (min-width: 1024px) {    
    .list-blocks {
      grid-column: span 2;
      grid-template-columns: repeat(4, 1fr);
    }

    .list-gallery {
      grid-column: span 2;
    }
  }

  @media (min-width: 1920px) {
    .list-blocks {
      grid-template-columns: repeat(6, 1fr);

      li {
        min-height: 6rem;
      }
    }
  }

  .services-section.col-2 {
    display: flex;
    gap: var(--gutter);
    flex-direction: column;
    
    .title-mid {
      margin-bottom: var(--gutter);
    }

    .list-blocks {
      grid-template-columns: auto;
    }

    p {
      width: max-content;
      align-self: center;
      min-width: 1.5em;
      text-align: center;
    }
  }

  @media screen and (min-width: 768px) {
    .services-section.col-2 {
      display: grid;
      grid-template-columns: 1fr max-content 1fr;

      .title-mid {
        grid-column: span 3;
      }
    }
  }

  @media screen and (min-width: 1024px) {    
    .services-section.col-2 {
      display: flex;
      flex-direction: row;
    
      .title-mid {
        min-width: 8em;
      }
    }
  }

  @media screen and (min-width: 1024px) {    
    .services-section.col-2 {
      .list-blocks {
        width: calc(var(--col-width)*3 + var(--gutter-x2)*2);
      }
    }
  }


  
      


  .list-blocks-text {
    display: grid;
    gap: var(--gutter);

    p {
      font-size: var(--fs-22);
      padding: var(--gutter) calc(var(--gutter)*1.5);
      font-family: var(--font-header);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-wide);
      line-height: var(--lh-normal);
      background-color: rgba(var(--color-beige-rgb) / 0.2);
      margin-bottom: 1em;
    }

    li {
      color: var(--color-text-light);
      line-height: var(--lh-normal);
      margin-bottom: 1em;
      display: flex;
      gap: .3em;

      &::before {
        content: "•";
        color: currentColor;
      }
    }

    ul {  
      margin-inline: calc(var(--gutter)*1.5);
    }
  }

  @media screen and (min-width: 768px) {
    .list-blocks-text {
      grid-template-columns: repeat(2, 1fr);

      p {
        min-height: 5.5rem;
      }
    }
  }

  @media screen and (min-width: 1024px) {    
    .list-blocks-text {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1120px) {
    .list-blocks-text {
      p {
        min-height: 7rem;
      }
    }
  }

  @media (min-width: 1920px) {
    .list-blocks-text {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  .profile-list {
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-wide);    
    line-height: var(--lh-normal);
    font-size: var(--fs-20);
    margin-block: 1em 2em;
    display: grid;
    grid-gap: var(--gutter);

    li {
      background-color: rgba(var(--color-beige-rgb) / 0.2);
      padding: calc(var(--gutter)*1.5);
    }
  }

  @media screen and (min-width: 1024px) {
    .profile-list {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  section:has(.profile-list) {
    padding-top: var(--gutter-x2);

    .title-mid {
      color: var(--color-green);

      & + p {
        font-family: var(--font-header);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--ls-wide);
        color: var(--color-green);
        margin-block: .2em 2em;
        max-width: 40em;
      }
    }

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

  .hero-services {
    padding-bottom: var(--gutter-x2);

    .title-mid {
      font-size: var(--fs-26);
      font-weight: var(--fw-semibold);
      color: var(--color-purple);
    }

    .title-mid, .title-big {
      margin-bottom: var(--gutter-x2);
      max-width: 90vw;
    }

    .title-big ~ p:not(:last-child) {
      margin-bottom: var(--gutter);
      max-width: 90vw;
    }

    figure:has(img) + p {
      color: var(--color-text-light);
      margin-block: 1em 0;
      padding-right: 0;
    }

    .wp-block-image img {
      border-radius: var(--brd-radius);
      width: 100%;
    }

    .title-big + .title-smallcaps {
      color: var(--color-green);
      margin-bottom: 1em;
    }

    .title-smallcaps + .subheading {
      font-size: var(--fs-22);
      padding-bottom: var(--gutter-x2);
    }

    p.grid {
      grid-template-columns: 6rem max-content 1fr;

      em {
        font-style: normal;
      }
    }

    p.grid ~ p:last-of-type {
      color: var(--color-text-light);
      font-size: var(--fs-16);
    }
  }

  @media screen and (min-width: 1024px) {
    .hero-services {
      div:has(h1) {
        padding-right: var(--col-space);
      }

      .title-mid, .title-big, .title-big ~ p:not(.last-child) {
        max-width: 38rem;
      }
    }
  }

  .services-section {
    padding-block: var(--gutter-x2);

    .title-mid {
      text-transform: none;
      margin-bottom: var(--gutter-x2);
    }

    .title-mid + .title-smallcaps {
      font-size: var(--fs-26);
      color: var(--color-green);
      margin-bottom: .75em;
      line-height: var(--lh-normal);
      max-width: 34em;
    }

    .title-mid + .subheading {
      margin-bottom: var(--gutter-x2);
      max-width: 26em;
    }

    &>.title-smallcaps:first-child {
      margin-bottom: var(--gutter);
      color: var(--color-green);
      font-size: var(--fs-26);
    }

    .list-blocks li:has(img) {
      padding: 0;
    }

    .list-blocks:has(em) {
      grid-template-columns: initial;
    }

    .counter .title-smallcaps {
      font-size: var(--fs-22);
      color: var(--color-green);
      display: grid;
      grid-template-columns: calc(var(--gutter)*2.5) 1fr;
      margin-bottom: var(--gutter);

      &::before {
        color: var(--color-beige);
      }
    }

    .mediation-img {
      padding-top: 0;
    }
    
  }

  #counter-approach {      
    counter-reset: counter-approach;
      
    .title-smallcaps::before {
      counter-increment: counter-approach;
      content: "0"counter(counter-approach) "/";
    }
  }

  #counter-areas {      
    counter-reset: counter-areas;
    
    .title-smallcaps::before {
      counter-increment: counter-areas;
      content: "0"counter(counter-areas) "/";
    }
  }

  #counter-benefits {
    counter-reset: counter-benefits;
      
    .title-smallcaps::before {
      counter-increment: counter-benefits;
      content: "0"counter(counter-benefits) "/";
    }
  }

  #counter-process {
    counter-reset: counter-process;
    
    .title-smallcaps::before {
      counter-increment: counter-process;
      content: "0"counter(counter-process) "/";
    }
  }

  #counter-reasons {
    counter-reset: counter-reasons;
    
    .title-smallcaps::before {
      counter-increment: counter-reasons;
      content: "0"counter(counter-reasons) "/";
    }
  }


  .list-outlines {
    row-gap: var(--gutter-x3);
    
    li {
      padding-inline: calc(var(--gutter)*2.5) var(--gutter);
      padding-block: 1em;
      border: var(--brd);

      &:not(:last-child) {
        border-bottom: none;
      }
    }
  }

  @media screen and (min-width: 786px) {
    .list-outlines, .services-section .list-blocks:has(em) {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media screen and (min-width: 1024px) {
    .list-outlines {
      grid-template-columns: repeat(3, 1fr);
    }

    .services-section .list-blocks:has(em) {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1500px) {
    .counter .title-smallcaps {
      height: 2.6em;
      max-width: 18em;
    }
  }

  @media screen and (min-width: 1280px) {
    .services-section {
      .title-mid {
        max-width: 60vw;
      }
    }
  }

  @media screen and (min-width: 1920px) {
    .list-outlines {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .services-pricing {
    row-gap: var(--gutter-x2);
    
    .title-small {
      font-size: var(--fs-22);
      margin-bottom: var(--gutter);

      &:not(.color-green) {
        color: var(--color-text);
      }
    }

    .title-small + p:has(.btn) {
      margin-top: 2em;
    }

    li {
      color: var(--color-text-light);
      line-height: var(--lh-normal);
      margin-bottom: 1em;
      display: flex;
      gap: .3em;

      &::before {
        content: "•";
        color: currentColor;
      }
    }

    .subheading {
      color: var(--color-purple);
    }

    .subheading + p:not([class]) {
      font-family: var(--font-header);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-normal);
      letter-spacing: var(--ls-wide);
      color: var(--color-text-light);
      font-size: var(--fs-20);
      margin-block: .5em var(--gutter-x2);
    }
  }

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

    &:not(.grid) {
      .btn {
        margin-top: var(--gutter);
      }
    }
  }

  .price-item {
    font-family: var(--font-header);    
    letter-spacing: var(--ls-wide);
    border: var(--brd);
    padding: calc(var(--gutter)*1.5);
    color: var(--color-purple);
    line-height: var(--lh-normal);
    font-size: var(--fs-22);
    font-weight: var(--fw-semibold);

    strong {
      font-weight: var(--fw-semibold);
      font-size: var(--fs-26);
      display: block;

      &:last-of-type {
        margin-bottom: 0.6rem;
      }
    }

    em {
      font-family: var(--font-text);
      font-style: normal;
      font-size: var(--fs-16);
      color: var(--color-text-light);
      font-family: var(--font-text);
      display: block;
      font-weight: normal;
      margin-top: 0.6rem;
    }

    ul {
      font-family: var(--font-text);
      color: var(--color-text-light);
      font-size: var(--fs-16);
      letter-spacing: normal;
      line-height: var(--lh-normal);
      border-top: var(--brd);
      font-weight: normal;
      margin-top: var(--gutter);
      padding-top: var(--gutter);
    }

    li {
      display: flex;
      gap: .3em;

      &:not(:last-child) {
        margin-bottom: 1em;      
      }

      &::before {
        content: "•";
        color: currentColor;
      }
    }
  }
  
  @media screen and (min-width: 768px) {
    .services-pricing {

      .title-small + ul {    
        column-count: 2;
      }

      p.price-item:not(:first-of-type) {
        border-left: none;
      }

      &>.grid:not(.price-with-description):has(p.price-item) {
        grid-template-columns: 1fr 1fr;
        gap: 0;
      }
    }

    .services-pricing:not(:has(.price-with-description)) .price-block {
      grid-template-columns: 1fr 1fr;
      gap: var(--gutter);
    }


  }

  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .services-pricing:has(.price-with-description) .price-block {
      width: 50%;      
    }
  }

  @media screen and (min-width: 1024px) {
    .services-pricing {
      grid-template-columns: 1fr 1fr;

      &.grid > *:nth-child(even) {
        padding-left: var(--col-space);
      }
    }

    .price-block {
      width: 50%;   
    }
  }

  .price-with-description {
  }
  
  .price-support {
    padding: var(--gutter-x2);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--gutter);

    .title-small {
      flex: 0 0 100%;
    }

    p:nth-child(2), p:nth-child(4) {
      flex: 1 1 0;
      min-width: 0;
      font-weight: var(--fw-medium);
      line-height: var(--lh-normal);
    }

    p:nth-child(3) {
      flex: 0 0 1.5em;
      align-self: center;
      color: var(--color-text-light);
      font-size: var(--fs-16);
    }
  }

  .price-description {
    .title-small:last-child {
      font-size: var(--fs-18);
      border-top: var(--brd);
      margin-top: var(--gutter);
      padding-top: var(--gutter);
      margin-bottom: 0;
    }
  }

  @media screen and (min-width: 1024px) {
    .price-with-description {
      grid-template-columns: 1fr 2fr;

      .price-block {
        padding-right: var(--col-space);
        border-right: var(--brd);
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        width: auto;
      }

      .price-block:has(h2.title-mid) {
        grid-template-columns: 1fr;
      }
    }

    .price-description {
      padding-right: var(--col-space);
      align-self: start;
    }
  }

  @media screen and (min-width: 1280px) {
    .price-description {
      padding-right: calc(var(--col-space)*2);
    }
  }

  .mediation-img {
    padding-block: var(--gutter-x2);

    .title-mid {
      text-transform: none;
      margin-bottom: .5em;
    }

    .subheading {
      font-size: var(--fs-20);
      color: var(--color-purple);
    }

    img {
      border-radius: var(--brd-radius);
      min-height: 30vh;
      object-fit: cover;
    }
  }

  @media screen and (min-width: 768px) {
    .mediation-img {
      grid-template-columns: 1fr 1fr;
      align-items: end;

      figure:has(img) {
        padding-right: var(--gutter);
        border-right: var(--brd);
      }

      img {
        min-height: 25rem;
        max-height: none;
      }

      &:has(.subheading) {
        align-items: center;
      }

      .title-mid:last-child {
        margin-bottom: 0;
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .mediation-img {
      div {
        padding-right: var(--col-space);
      }
    }

  }

  @media screen and (min-width: 1280px) {
     .mediation-img {
      .title-mid {
        max-width: 12em;
      }
    }
  }

  .mediation-text {
    counter-reset: mediation;

    .title-smallcaps {
      font-size: var(--fs-22);
      color: var(--color-green);
      display: grid;
      grid-template-columns: max-content 1fr;
      gap: 0.5rem;
      border-bottom: var(--brd);
      padding-block: var(--gutter-x2) var(--gutter);

      &::before {
        color: var(--color-beige);
        counter-increment: mediation;
        content: "0"counter(mediation) "/";
      }

    }

    div {
      padding-bottom: var(--gutter-x2);
      border-bottom: var(--brd);

      &:last-child {
        border-bottom: none;
      }
    }

    p {
      font-size: var(--fs-16);
      color: var(--color-text-light);
      padding-top: var(--gutter);
      max-width: 90%;
    }
  }

  @media screen and (min-width: 768px) {
    .mediation-text {
      grid-template-columns: repeat(2, 1fr);

      .title-smallcaps {
        height: 5em;
        overflow: hidden;
      }

      div:div:nth-child(3) {
        border-bottom: var(--brd);
      }

      div:first-child, div:nth-child(3) {
        border-right: var(--brd);
      }
    }
  }

  @media screen and (min-width: 1024px) {
    .mediation-text {
      grid-template-columns: repeat(4, 1fr);

      div {
        border: none;
      }

      div:not(:last-child) {        
        border-right: var(--brd);
        
        .title-smallcaps, p {
          padding-right: var(--gutter);
        }
      }

      .title-smallcaps {
        height: 7em;
      }
      
      p {
        max-width: none;
      }
    }
  }
    
  @media screen and (min-width: 1600px) {
    .mediation-text {

      .title-smallcaps {
        height: 5.5em;
      }
    }
  }

  .mediation-cols {
    padding-block: var(--outer-half);

    .title-big {
      padding-top: var(--gutter-x2);
      padding-inline: var(--gutter-x2);
    }

    .title-mid {
      font-size: var(--fs-26);
      color: var(--color-purple);
      font-weight: var(--fw-semibold);
      line-height: var(--lh-normal);

      & ~ p {
        margin-top: 1em;
        color: var(--color-text-light);
      }
    }

    div:first-of-type {
      padding-block: 0 var(--gutter-x2);
      padding-inline: var(--gutter-x2);

      p:not(:last-child) {
        margin-bottom: 1em;
      }
    }

    div:last-child {
      background-color: rgba(var(--color-beige-rgb) / 0.2);
      padding: var(--gutter-x2);
    }

    &.bg-beige {
      div:last-child {
        background-color: initial;
        border: var(--brd);
      }
    }
  }

  @media screen and (min-width: 768px) {
    .mediation-cols {
      grid-template-columns: repeat(2, 1fr);

      .title-big {
        padding-inline: var(--gutter-x3) 0;
      }

      div:first-of-type {
        padding-block: var(--gutter-x2);
        padding-inline: 0 var(--gutter);
      }

      div:last-child {
        grid-column: span 2;
        padding: var(--gutter-x3);
      }
    }
  }

  @media screen and (min-width: 1280px) {
    .mediation-cols {
      grid-template-columns: repeat(3, 1fr);

      .title-big {
        padding-inline: calc(var(--col-width)/2);
      }

      div:first-of-type {
        border-right: var(--brd);
        padding-inline: 0 calc(var(--col-width)/2);
      }

      div:last-child {
        grid-column: initial;
        padding-inline: calc(var(--col-width)/2);
      }

      &.bg-beige {
        div:first-of-type {
          border-right: none;
        }
      }
    }
  }

  .mediation-cols-3 {
    padding-block: var(--outer-half) var(--gutter-x2);
    .title-big {
      font-size: var(--fs-40);
      line-height: var(--lh-normal);
    }

    &>.title-mid:first-child {
      font-size: var(--fs-40);
      color: var(--color-green);
      padding-inline: var(--gutter-x2);

      strong {
        font-size: var(--fs-22);
        display: block;
        text-transform: none;
        letter-spacing: var(--ls-wide);
        font-weight: var(--fw-semibold);
        color: inherit;
        font-family: inherit;
        margin-top: var(--gutter);
      }
    }

    .title-small {
      font-size: var(--fs-22);
      color: initial;
    }

    ul {
      margin-top: var(--gutter);
    }

    li {      
      line-height: var(--lh-normal);
      display: flex;
      gap: .3em;

      &:not(:last-child) {
        margin-bottom: 1em;
      }
      
      &::before {
        content: "•";
        color: currentColor;
      }
    }
    
    div:last-child {
      ul {
        color: var(--color-text-light);

        &.list-no {
          color: var(--color-text);

          li {
            gap: .5em;
          }

          li::before {
            content: "❌";
          }
        }
      }
    }

    &.bg-beige {
      padding-top: var(--gutter-x3);

      .title-smallcaps {
        font-size: var(--fs-26);

        & + p {
          margin-top: var(--gutter);
          font-weight: var(--fw-medium);
          line-height: var(--lh-normal);
          font-weight: var(--fw-medium);

          strong {
            font-weight: var(--fw-medium);
          }
        }
      }
      
      div:first-of-type {
        padding-top: 0;
        border: none;
      }
    }
  }

  @media screen and (min-width: 768px) and (max-width: 1023px) {
    .mediation-cols-3 {
      &.bg-beige {
        grid-template-columns: repeat(2, 1fr);

        .title-mid:first-child {
          grid-column: span 2;          
        }

        div:first-of-type {
          padding-left: var(--gutter-x2);
        }

        div:last-child {
          grid-column: initial;
          padding-block: var(--gutter-x2);
        }        
      }
    }

    .subsection .title-small:first-child {
      padding-left: var(--gutter-x2);
    }
  }

  @media screen and (min-width: 1024px) {
    .mediation-cols-3 {
      grid-template-columns: repeat(3, 1fr);

      &>.title-mid:first-child {
        padding-inline: 0;
      }

      .title-big {
        padding-inline: 0;
      }

      div:first-of-type {
        border-right: var(--brd);
        padding-inline: 0 calc(var(--col-width)/2);
        padding-bottom: 0;
      }

      div:last-child {
        grid-column: initial;
        padding-inline: calc(var(--col-width)/2);
        padding-block: var(--gutter-x2);
      }

      &.bg-beige {

        div:last-child {
          padding: var(--gutter-x2);
          align-self: start;
        }
      }
    }
  }

  @media screen and (min-width: 1280px) {
    .mediation-cols-3 {

      .title-big {
        font-size: var(--fs-50);
        padding-inline: var(--gutter-x2) 0;
      }
      
      &.bg-beige {
        .title-mid:first-child {
          padding-left: var(--gutter-x2);
        }
      }
    }

    .subsection .title-small:first-child {
      padding-left: var(--gutter-x2);
    }
  }

  @media screen and (min-width: 1500px) {
    .mediation-cols-3 {
      .title-big {
        padding-inline: var(--gutter-x3) var(--gutter-x2);
      }
    }
  }

  .services-ext {
    padding-bottom: 0;

    .counter {
      row-gap: unset;

      &>div:not(:last-child) {
        border-bottom: var(--brd);
      }

      &>div {
        padding-block: var(--gutter-x2);  

        &:first-child {
          padding-top: 0;
        }
        
        & > ul, .title-smallcaps + p, p:has(em) {
            margin-left: calc(var(--gutter)*2.5);
        }
      }    
    }
    
    .title-smallcaps + p {            
      font-size: var(--fs-20);
      color: var(--color-green);
      margin-bottom: 1em;
      font-weight: var(--fw-medium);
      line-height: var(--lh-normal);
    }
    
    p:has(em) {
      color: var(--color-text-light);
      line-height: normal;
      font-size: var(--fs-14);
      margin-top: var(--gutter-x2);
    }
    
    li {      
      line-height: var(--lh-normal);
      display: flex;
      gap: .3em;
      color: var(--color-text-light);
      
      &:not(:last-child) {
        margin-bottom: 1em;
      }
      
      &::before {
        content: "•";
        color: currentColor;
      }
    }
  }

  .services-consulting-ext {
    .list-blocks-text {
      margin-inline: calc(var(--gutter)*2.5) var(--gutter);
      p {
        font-size: var(--fs-18);
        padding: var(--gutter);
      }

      ul {
        margin-inline: var(--gutter);
      }      
    }
  }

  @media screen and (min-width: 1024px) {
    .services-ext {
      .counter {
        grid-template-columns: repeat(3, 1fr);

        &>div {
          &:nth-child(1), &:nth-child(2), &:nth-child(4) {
            border-right: var(--brd);
            padding-right: var(--gutter);
          }

          &:nth-child(2), &:nth-child(3) {
            padding-top: 0;
          }
          
          &:nth-child(4), &:nth-child(5) {
            padding-block: var(--gutter-x2);     
            border-bottom: none;      
          } 
        }
      }
    }

    .services-consulting-ext {
      grid-column: span 2;
      
      .list-blocks-text {
        grid-template-columns: repeat(3, 1fr);
        margin-inline: calc(var(--gutter)*2.5) var(--gutter);

      }

      .title-smallcaps {
        max-width: none;
        height: auto;
      }
    }
  }

  @media screen and (min-width: 1024px) and (max-width: 1280px) {
    .services-ext .counter div:not(.services-consulting-ext) .title-smallcaps {
      height: 4.5em;
      max-width: 13em;
    }
  }

  @media screen and (min-width: 1600px) {
    .services-ext .counter>div:not(.services-consulting-ext) {
      padding-right: var(--gutter-x3);
    }
  }

  .subsection {
    padding: var(--gutter-x2);

    .title-small {
      font-size: var(--fs-22);
      color: inherit;
      max-width: 20rem;
    }

    p {
      color: var(--color-text-light);
      line-height: var(--lh-normal);
      padding-right: var(--gutter-x2);
    }

    strong {
      text-transform: uppercase;
      color: var(--color-text);
      display: block;
      line-height: var(--lh-body);
      font-family: var(--font-header);
      font-weight: var(--fw-semibold);
      letter-spacing: var(--ls-extrawide);
    }
  }

  @media (min-width: 768px) {
    .subsection {
      grid-template-columns: repeat(3, 1fr);
      padding-inline: var(--outer-half);
    }
  }
}


/* overwrites */

figure {
  margin: 0;

  &.container {
    margin-inline: var(--outer-half);
    padding-inline: 0;
  }
}

.ff_t_c {
  font-size: var(--fs-15);
}

.page-form {
  .ff-default .ff-el-form-control {
    border-radius: 2px !important;
    font-size: var(--fs-15);
    color: var(--color-text) !important;
    border-color: rgb(var(--color-text-rgb) / 0.2) !important;
    padding: 0.75em 1em !important;
    font-family: inherit !important;

  }

  .ff-default .ff-el-input--label label {
    font-size: var(--fs-15);
    color: var(--color-text-light) !important;
    font-family: var(--font-header);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wide);
  }
}

.img-full-height {
  img {
    height: 100%;
    object-fit: cover;
  }
}

.list-gallery {
  gap: var(--gutter) !important;

  figure {
    padding: var(--gutter);
    background-color: #fff;
  }

  figure, .list-img-vertical {
    width: var(--col-width) !important;
  }
}

@media screen and (min-width: 768px) {
  .list-gallery {  
    figure {
      width: calc(var(--col-width)*3 + var(--gutter)*2) !important;
    } 

    .list-img-vertical {
      width: calc(var(--col-width)*2 + var(--gutter)) !important;
    }
  }
}

.list-blocks li:has(img) {

  img {
    width: 100%;
    height: 100%;   
    object-fit: cover;
    max-height: 30vh;
  }
}

@media screen and (min-width: 1024px) {
  .list-blocks li:has(img) {
    img {
      max-height: none;
    }
  }
}

@media screen and (min-width: 1024px) {
  .hero-services {
    .wp-block-image img {
      height: 100%;
      max-height: 36rem;
    }
  }
}