/* CSS Custom Properties */

:root {
    --font-family: 'URW Gothic', sans-serif;
    --font-family-alt: 'Helvetica', Arial, sans-serif;
    --font-weight: 400;
    --font-weight-bold: 700;
    --font-weight-black: 900;

    /* 3:4 perfect fourth scale */
    --font-size-x-display: 5.16rem;
    --font-size-display: 4.3rem;
    --font-size-xx-large: 3.583rem;
    --font-size-x-large: 2.488rem;
    --font-size-large: 1.728rem;
    --font-size-medium: 1.44rem;
    --font-size-smedium: 1.25rem;
    --font-size: 112%;
    --font-size-small: 0.833rem;
    --font-size-x-small: 0.694rem;
    --font-size-xx-small: 0.579rem;
    --lineheight-large: 2;
    --lineheight-text: 1.7;
    --lineheight-short: 1.2;

    --color-background: #Ffefdef;
    --color-base: #f9eaf0;
    --color-accent: #c42e66;
    --color-background-selection: #f9eaf0;
    --color-border: #9facdf;
    --color-text-default: #2b2b2b;
    --color-text-link: var(--color-accent);
    --color-text-link-active: var(--color-text-link);
    --color-text-link-focus: var(--color-text-link);
    --color-text-link-hover: #9d7ad4;
    --color-text-link-visited: var(--color-text-link);

    --color-button-default: var(--color-accent:);
    --color-button-border: var(--color-base);
    --color-button-text: #ffffff;
    --color-logo-green: 26, 110, 56;
    --color_forest-green: rgb(15, 63, 15);

    --border-radius-x-small: .25rem;
    --border-radius-small: .5rem;
    --border-radius-medium: .75rem;
    --border-radius-large: 1.5rem;
    --border-radius-circle: 50%;
    --border-width-hairline: 0.5px;
    --border-width: 1px;
    --border-width-thin: 2px;
    --border-width-thick: 5px;

    --grid-64: 3fr 1fr 2fr 2fr 1fr 3fr;
    --grid-gap: 4vw;

    --max-width: 50vw;
    --spacing-xx-small: .125rem;
    --spacing-x-small: .25rem;
    --spacing-small: .5rem;
    --spacing: .75rem;
    --spacing-medium: 1rem;
    --spacing-large: 1.5rem;
    --spacing-x-large: 2rem;
    --spacing-xx-large: 3rem;
    --spacing-xxx-large: 3.5rem;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-size: var(--font-size);
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin: 0;
}

ul,
ol {
    padding: 0 0 0 var(--spacing-large);
    margin: 0;
}

 ul + p, ol + p {
    padding-top: var(--spacing-large);
}


/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
  font-weight: 400;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

html, body {
    height: 100%;
    line-height: var(--lineheight-text);
  }

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-family, --font-family-alt);
    font-weight: var(--font-weight);
    display: flex;
    flex-direction: column;
}

main {
    max-width: 100%;
    padding: var(--spacing-large);
    padding-top: 0;
    flex: 1 0 auto;
}

a {
  color: #000000;
  font-weight: bold;
  text-underline-offset: var(--spacing-x-small);
}

details summary {
  font-weight: bold;
}

header {
    padding: var(--spacing-large) var(--spacing-large) 0 var(--spacing-large);
}

h1 {
    margin: var(--spacing-x-large) 0;
    line-height: var(--lineheight-short);
    font-size: clamp(1.6rem, 2.2vw, 3rem);
}

h2 {
    margin: var(--spacing-large) 0 var(--spacing-medium) 0;
    font-size: clamp(1.4rem, 2vw, 2.75rem);
}

h3 {
    margin-bottom: var(--spacing-medium);
    font-size: clamp(1.25rem, 1.6vw, 2.2rem);
}

footer {
    display: grid;
    justify-content: center;
    gap: var(--spacing-large);
    padding: var(--spacing-large);
    background-color: var(--color_forest-green);
    color: #ffffff;
    flex-shrink: 0;
    z-index: 10;
}

footer div:first-child {
    justify-self: start;
}

footer a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 2px;
}

footer > details:has(a[aria-current="page"]) {
    text-decoration: underline;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 2px;
}

.footer-info a {
  color: #ffffff;
}

.footer-info p {
  padding-bottom: 0;
}

footer p {
    margin: 0;
}

footer p + p {
    margin-top: 1rem;
}

nav#main-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
}

nav > ul {
    display: flex;
    align-items: center;
    gap: var(--spacing-large);
    flex-flow: row wrap;
    margin-top: var(--spacing);
    font-weight: var(--font-weight);
}

a:hover, nav summary:hover, .footer-subnav li a:hover {
    color: rgba(var(--color-logo-green));
    text-decoration-style: dotted;
}

summary {
  text-decoration: underline;
}

nav a, summary {
  text-decoration-thickness: 2px;
  text-underline-offset: var(--spacing-x-small);
}

nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(var(--color-logo-green));
    text-decoration-thickness: 2px;
    text-underline-offset: var(--spacing-x-small);
}

nav details:has(a[aria-current="page"]) > summary {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(var(--color-logo-green));
    text-decoration-thickness: 2px;
    text-underline-offset: var(--spacing-x-small);
}

p {
  margin-bottom: var(--spacing-medium);
}

summary {
    list-style-type: none; /* Firefox */
    font-weight: var(--font-weight);
}

summary::-webkit-details-marker {
    display: none; /* Chrome */
}

summary:after {
    content: '\00a0\25be';
}

svg {
    display: block;
}

.at-a-glance li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-small);
  font-family: Libre Baskerville;
  margin-bottom: var(--spacing-x-small);
  font-weight: bold;
}

.at-a-glance > li:before {

  transform: translateY(-0.1em) scaleX(1.2) rotate(45deg);
  display: block;
  width: 0.5em;
  height: 0.5em;
  content: '';
  border-style: solid;
  border-width: 0.09em 0.09em 0 0;
  color: #12911f;
}

.blog-image {
  padding-bottom: var(--spacing);
}

.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: var(--spacing-large);
}

.blog-list a {
  font-size: var(--font-size-smedium);
  padding-bottom: var(--spacing);
  margin-top: var(--spacing);
  display: inline-block;
}

.blog-time {
  padding-bottom: var(--spacing-medium);
  display: block;
}

.blog-title {
  margin-bottom: var(--spacing-medium);
}

.case-study-card {
  outline: 1px solid rgb(88, 214, 88);
  border-radius: 10px;
  overflow: hidden;
  padding: var(--spacing-large);
  margin-top: var(--spacing-large);
}

.case-study-card h1, .case-study-card p {
  margin: 0;
  padding: 0;
  margin-bottom: var(--spacing);
}

.case-study-card > *:last-child {
  margin: 0;
}

.case-study-image--desktop {
  display: none;
}

.case-study-image--desktop img, .case-study-image--mobile img {
  border-radius: 10px;
}

.case-study-image--mobile {
  margin-top: var(--spacing-large);
}

.case-study-image--mobile img {
  vertical-align: bottom;
}

.social-media-link {
  display: inline-block;
}

.submenu, .footer-subnav {
    position: absolute;
    background-color: whitesmoke;
    padding: var(--spacing);
    line-height: var(--lineheight-large);
    z-index: 12;
}

.submenu {
  list-style: none;
  width: max-content;
  top: 20px;
}

.footer-images {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-large);
}

.footer-images a {
  width: 100%;
}

.header-navigation, .footer-navigation, .at-a-glance {
  list-style: none;
  padding: 0;
}

.header-navigation {
  line-height: .8;
  padding-bottom: var(--spacing);
}

.header-navigation .separator:last-of-type, .footer-navigation .separator:last-of-type {
  display: none;
}

.footer-navigation li {
  margin-bottom: 0.2rem;
}

.footer-navigation li a {
  color: #ffffff;
}

.footer-navigation summary:hover {
  text-decoration-style: dotted;
}

.footer-navigation > li a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 1.5px;
    text-underline-offset: var(--spacing-small);
}

.footer-navigation details:has(a[aria-current="page"]) > summary {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #ffffff;
    text-decoration-thickness: 1.5px;
    text-underline-offset: var(--spacing-small);
}

.footer-subnav > li a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: #000000;
  text-decoration-thickness: 1.5px;
  text-underline-offset: var(--spacing-small);
}

.footer-subnav {
    margin-left: var(--spacing-large);
}

.footer-subnav li a {
  color: #000000;
}

.dropdown-item {
    position: relative;
    margin-right: -0.6rem;
}

.intro {
  display: grid;
  grid-template-columns: 1fr;
}

.intro-image--top-margin {
  margin-top: var(--spacing-x-large);
}

.about-image img {
  margin-bottom: var(--spacing-x-large);
}

.logo {
    display: block;
    padding-bottom: var(--spacing-large);
}

.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-x-large);
}

.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-x-large);
}

.services-grid-item {
    display: flex;
    flex-direction: column;
}

.services-grid p {
    margin: 0 0 1rem 0;
}

.services-grid p:has(a) {
    margin-bottom: 0;
    margin-top: auto;
}

details {
    cursor: pointer;
}

img {
    max-width: 100%;
    height: auto;
}

.logo {
  width: 60%;
}

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 0;
    padding: var(--spacing-large);
}

blockquote p {
    display: inline;
}

h1, h2, h3 {
    font-family: 'Libre Baskerville', 'Times New Roman', Times, serif;
}

address {
  font-style: normal;
}

@media screen and (min-width: 500px) {
  .blog-image {
    display: block;
    float: right;
    margin-left: var(--spacing-x-large);
    padding-bottom: 0;
  }
}

@media screen and (min-width: 800px) {
    main {
      padding: 0 var(--spacing-xxx-large) var(--spacing-xxx-large) var(--spacing-xxx-large);
    }
    header {
        padding: var(--spacing-xxx-large) var(--spacing-xxx-large) 0 var(--spacing-xxx-large);
    }
    footer {
        grid-template-columns: 1fr 1fr 1fr;
        padding: var(--spacing-xx-large) var(--spacing-xxx-large);
        align-items: start;
        justify-items: center;
    }
    footer div {
        padding-bottom: 0;
    }
    nav#main-nav {
        display: block;
    }
    .footer-images {
        flex-direction: row;
    }
    .logo {
      width: 40%;
    }
}

@media screen and (min-width: 1000px) {
    .services-grid {
        grid-template-columns: 1fr 1fr;
    }
    .case-study-image--desktop {
      display: block;
      float: right;
      margin-left: var(--spacing-x-large);
    }
    .case-study-image--mobile {
      display: none;
    }

}

@media screen and (min-width: 1200px) {
  main {
    width: 70%;
  }
  main:has(.case-study-wrapper) {
    width: 85%;
  }
  p {
    margin-bottom: 0;
    padding-bottom: var(--spacing-large);
  }
  .how-grid-item p {
    padding-bottom: var(--spacing);
  }
  .about-image img {
    margin-bottom: 0;
  }
  .intro {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-column-gap: var(--grid-gap);
  }
  .contact {
    grid-template-columns: auto auto;
  }
  .intro-image--align {
    align-self: center;
  }
  .logo {
    width: 30%;
  }
}

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

/* start contact form */
.honeypot {
  position: absolute;
  left: -9999px;
}

.contact-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 500px;
}

.contact-form abbr {
  text-decoration: none;
}

.contact-form label {
  font-weight: bold;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}

.contact-form textarea#text {
  min-height: 200px;
}

.contact-form_send-input {
  background-color: var(--color_forest-green);
  color: white;
  padding: var(--spacing-medium);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
}

.contact-form_send-input:hover {
  background-color: rgba(var(--color-logo-green));
}

.success {
  color: var(--color_forest-green);
  font-weight: bold;
}

.error {
  color: var(--color-accent);
  font-weight: bold;
}
/* end contact form */

/* start Slider */

:where(.gui-carousel) {
    --size-5: 1.8rem;
    --size-6: 2rem;
    --size-8: 3rem;
    --size-10: 3.5rem;
    --_carousel-item-size: 80%;
    --_carousel-gutters: max(4rem, calc((100% - var(--_carousel-item-size)) / 2));
    --_carousel-scrollbar-gutter: var(--size-6);
    --_carousel-pagination-size: var(--size-8);

    display: grid;
    grid-template-columns: 0 1fr 0;
    grid-template-rows:
    [carousel-scroller] 1fr [carousel-pagination] var(--_carousel-pagination-size);

    &:focus-visible {
      outline-offset: -5px;
    }

    /* configuration handlers */
    &[carousel-pagination="gallery"] {
      --_carousel-pagination-size: var(--size-10);

      & > .gui-carousel--pagination {
        -webkit-mask-image: linear-gradient(to right, #0000 0%, #000 5%, 95%, #000, #0000);
      }
    }

    &[carousel-pagination="none"] {
      grid-template-rows: [carousel-scroller] 1fr;

      & > .gui-carousel--pagination {
        display: none;
      }
    }

    &[carousel-controls="none"] {
      grid-template-columns: 0 1fr 0;

      & > .gui-carousel--controls {
        display: none;
      }
    }

    &[carousel-scrollbar="none"] {
      --_carousel-pagination-size: var(--size-5);

      & > .gui-carousel--scroller {
        scrollbar-width: none;

        &::-webkit-scrollbar {
          display: none;
        }
      }

      & > .gui-carousel--pagination {
        place-self: start center;
      }
    }

    &[carousel-snapstop="always"] .gui-carousel--snap {
      scroll-snap-stop: always;
    }
  }

  :where(.gui-carousel--scroller) {
    grid-row: 1;
    grid-column: 2;

    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--_carousel-gutters);

    padding-block: var(--size-2) var(--_carousel-scrollbar-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--_carousel-gutters);

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(.gui-carousel--snap) {
    scroll-snap-align: center;
  }

  :where(.gui-carousel--controls) {
    display: flex;
    justify-content: space-between;
    padding-inline: var(--_carousel-gutters);
    display: contents;

    & > .gui-carousel--control {
      margin-block-end: var(--_carousel-scrollbar-gutter);

      &:not([disabled="true"]):active {
        transform: scale(.95);
      }
    }
  }

  :where(.gui-carousel--control) {
    --border-size-1: 1px;
    --ease-1: cubic-bezier(.25,0,.5,1);
    --ease-2: cubic-bezier(.25,0,.4,1);
    --ease-3: cubic-bezier(.25,0,.3,1);
    --ease-4: cubic-bezier(.25,0,.2,1);
    --ease-squish-1: cubic-bezier(.5,-.1,.1,1.5);
    --ease-squish-2: cubic-bezier(.5,-.3,.1,1.5);
    --ease-squish-3: cubic-bezier(.5,-.5,.1,1.5);
    --ease-squish-4: cubic-bezier(.5,-.7,.1,1.5);
    --ease-squish-5: cubic-bezier(.5,-.9,.1,1.5);
    --layer-1: 1;
    --link: rgba(var(--color-logo-green));
    --radius-round: 1e5px;
    --ratio-square: 1;
    --_shadow-size: 0;
    --_shadow-highlight-light: hsl(0 0% 50% / 10%);
    --_shadow-highlight-dark: hsl(0 0% 100% / 20%);
    --_shadow-highlight: var(--_shadow-highlight-light);
    --_shadow-size: 0;
    --size-2: 0.5rem;
    --size-4: 0.8rem;
    --size-6: 2rem;
    --size-8: 3rem;
    --surface-1: #f8f9fa;
    --text-1: #212529;
    --text-2: #495057

    grid-row: 1;
    place-self: center;
    background: var(--surface-1);
    color: var(--text-2);
    inline-size: var(--size-8);
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-round);
    box-shadow: 0 0 0 var(--_shadow-size) var(--_shadow-highlight);
    border: var(--border-size-1) solid transparent;
    text-indent: 10ch;
    padding: 0;
    overflow: hidden;
    z-index: var(--layer-1);
    transition: opacity .5s var(--ease-2) .5s;

    @media (prefers-reduced-motion: no-preference) {
      transition:
        opacity .5s var(--ease-2) .5s,
        transform .2s var(--ease-4),
        box-shadow .2s var(--ease-4),
        outline-offset 145ms var(--ease-2)
      ;
    }

    @media (prefers-color-scheme: dark) {
      --_shadow-highlight: var(--_shadow-highlight-dark);
    }

    &:hover {
      --_shadow-size: 6px;
    }

    &.--previous {
      grid-column: 1;
      border: 3px solid rgba(var(--color-logo-green), 0.3);
    }

    &.--next {
      grid-column: 3;
      border: 3px solid rgba(var(--color-logo-green), 0.3);
    }

    @nest [dir="rtl"] & > svg {
      transform: rotateY(180deg);
    }

    &[disabled] {
      cursor: not-allowed;
      transition-delay: 0s;

      & > svg {
        opacity: .25;
      }
    }

    &:not([disabled]):is(:hover, :focus-visible) {
      color: var(--link);
    }

    &:not([disabled]) svg > path {
      @media (prefers-reduced-motion: no-preference) {
        --_transform: translateX(var(--_x)) scale(.95);
        transition: transform .5s var(--ease-squish-3);
        transform-origin: center center;
      }
    }

    &[aria-label="Next Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
      --_x: 2px;
      transform: var(--_transform);
    }

    &[aria-label="Previous Item"]:not([disabled]):is(:hover, :focus-visible) svg > path {
      --_x: -2px;
      transform: var(--_transform);
    }
  }

  :where(.gui-carousel--pagination) {
    --link: rgb(221, 103, 221);
    --radius-1: 2px;
    --radius-2: 5px;
    --radius-3: 1rem;
    --radius-4: 2rem;
    --radius-5: 4rem;
    --radius-6: 8rem;
    --size-2: 0.5rem;
    --size-3: 0.7rem;
    --size-4: 0.8rem;
    --size-fluid-5: clamp(4rem,5vw,5rem);
    --surface-1: #f8f9fa;
    --surface-2: #e9ecef;
    --surface-3: #dee2e6;
    --surface-4: #ced4da;

    grid-column: 1/-1;
    place-self: center;

    display: grid;
    grid-auto-flow: column;
    gap: var(--spacing);

    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;

    padding-block: var(--size-2);
    padding-inline: var(--size-4);

    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }

    @nest [carousel-pagination="gallery"] & {
      margin-block-end: 0;
    }

    & > [aria-selected="true"] {
      background: var(--link);
    }

    & > [aria-selected="false"] {
      transform: scale(.75);
    }

    & > button {
      inline-size: var(--size-3);
      background-color: var(--surface-4);
      border: var(--border-size-1) solid transparent;

      &.--gallery {
        inline-size: var(--size-fluid-5);
        border-radius: var(--radius-2);
        border: none;
        background-origin: border-box;
        background-size: cover;
      }
    }
  }

  @keyframes gui-carousel--control-keypress {
    0%  { outline-offset: 5px }
    50% { outline-offset: 0; }
  }

  @keyframes carousel-scrollstart {
    from { scroll-snap-align: center }
    to   { scroll-snap-align: unset }
  }

  /* end Slider */

  /* start Utilities */

  .remove-margin {
    margin: 0;
  }

  .margin-bottom-l {
    margin-bottom: var(--spacing-large);
  }

  @media screen and (max-width: 1200px) {
    .margin-top-l-small {
      margin-top: var(--spacing-large);
    }
  }
  /* end Utilities */