@layer reset, helper;

img[alt="__ALT__"] {border: 20px solid tomato;}

:root {
  --br-common: 8px;
  --br-min: 4px;
  --c-blue: #00638f;
  --c-blue-dark: #143c4f;
  --c-blue-opacity: #00638f33;
  --c-green: #77ad1c;
  --c-green-dark: #538312;
  --c-green-opacity: #77ad1c33;
  --c-grey-light: #f5f5f5;
  --c-text: #222;
  --c-text-light: #757575;
  --c-white: #fff;
  --ff-primary: 'Montserrat', sans-serif;
  --ff-accent: 'Merriweather', serif;
  --fs-txt-body: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);  /* Body text from 16px to 20px */
  --fs-txt-small: clamp(0.875rem, 1vw + 0.5rem, 1rem);  /* Small text from 14px to 16px */
  --fs-ttl-page: clamp(1.8rem, 4vw + 0.5rem, 2.4rem);   /* Page title from 28.8px to 38.4px */
  --fs-ttl-sub: clamp(1.3rem, 3vw + 0.5rem, 1.65rem);    /* Sub title from 22.4px to 28.8px */
  --fs-ttl-area: clamp(1.5rem, 3.5vw + 0.5rem, 2rem);   /* Area title from 24px to 32px */
  --lh-txt-body: 1.5;
  --lh-txt-small: 1.4;
  --lh-ttl-page: 1.2;
  --lh-ttl-sub: 1.35;
  --lh-ttl-area: 1.25;
  --sp-gutter: 1.25rem;
  --sp-gutter-max: calc(var(--sp-gutter) * 2);
  --sp-gutter-min: calc(var(--sp-gutter) / 2);
  --sp-tighter-lettering: -0.035ch;
}

body {
  font: var(--fs-txt-body)/var(--lh-txt-body) var(--ff-primary);
}

strong {
  background-image: linear-gradient(transparent 45%, var(--c-blue-opacity) 35%, var(--c-blue-opacity) 100%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--c-blue-dark);
  padding-inline: 0.25ch;
  position: relative;
}

.picture__img {
  height: auto;
  margin-block: var(--sp-gutter-min);
  margin-inline: auto;
  position: relative;
  transform: rotate(-5deg);
  transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 300ms cubic-bezier(0.4, 0, 0.2, 1);
  width: min-content;

  &::after,
  &::before {
    bottom: 0;
    content: '';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              transform 300ms cubic-bezier(0.4, 0, 0.2, 1), 
              filter 300ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  &::after {
    background-color: var(--c-green);
    transform: rotate(5deg);
    z-index: -1;
  }

  &::before {
    background-color: var(--c-blue);
    transform: rotate(2.5deg);
    z-index: -2;
  }

  &:hover {
    transform: rotate(0);

    &::after,
    &::before {
      transform: rotate(0);
    }
  }

  img {
    height: auto;
    max-width: 82vw;
  }
}

.picture--case-study {
  margin: var(--sp-gutter-max) auto;
  max-width: 96%;

  .picture__img {
    height: auto;
    transform: rotate(-1.5deg);
    max-width: 100%;
    width: unset;

    &::after {
      transform: rotate(1.5deg);
    }
  
    &::before {
      transform: rotate(.75deg);
    }

    &:hover {
      transform: rotate(0);
  
      &::after,
      &::before {
        transform: rotate(0);
      }
    }

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

  figcaption {
    caption-side: bottom;
    color: var(--c-text-light);
    display: block;
    font-family: var(--ff-accent);
    font-size: var(--fs-txt-small);
    font-style: italic;
    line-height: var(--lh-txt-small);
    padding: var(--sp-gutter-min) var(--sp-gutter);
    position: relative;
    text-wrap-style: pretty;

    @media only screen and (min-width: 880px) {
      padding: var(--sp-gutter) var(--sp-gutter-max);
    }

    &::after {
      background-color: var(--c-green);
      content: '';
      height: 1px;
      inset-block-end: 0;
      inset-inline-start: var(--sp-gutter);
      position: absolute;
      width: 25%;

      @media only screen and (min-width: 880px) {
        inset-inline-start: var(--sp-gutter-max);
      }
    }
  }
}

.btn {
  background-color: var(--c-green-dark);
  border-radius: 4rem;
  color: var(--c-white);
  font-size: var(--fs-txt-small);
  padding: var(--sp-gutter-min) var(--sp-gutter);
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.2s linear;
  width: fit-content;

  &:focus,
  &:hover {
    background-color: var(--c-green-dark);
  }
  &:active {
    padding-block: calc(var(--sp-gutter-min) + 1px) calc(var(--sp-gutter-min) - 1px);
  }
}

.btn--contrast {
  background-color: var(--c-blue);

  &:focus,
  &:hover {
    background-color: var(--c-blue-dark);
  }
}

.card {
  background-color: var(--c-white);
  border-radius: var(--br-common);
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter);
  margin-inline: auto;
  padding: var(--sp-gutter);
  width: 85vw;

  @media only screen and (min-width: 880px) {
    padding: var(--sp-gutter);
    width: 24ch;
  }

  p {
    margin: 0;
  }

  .card__title {
    font-weight: bold;
    padding-bottom: var(--sp-gutter);
    position: relative;
    text-align: center;
    text-transform: uppercase;

    &::after {
      --angle: 90deg;
      --size: 25px;
      --thickness: 12px;
      --_g: var(--size) repeat-x conic-gradient(from calc(var(--angle) / -2) at bottom, #0000, #000 1deg calc(var(--angle) - 1deg), #0000 var(--angle));
      background: var(--c-green);
      content: '';
      display: block;
      height: calc(var(--thickness) + var(--size) /(2* tan(var(--angle) / 2)));
      left: 50%;
      margin-left: -2.1ch;
      mask: 50% calc(-1* var(--thickness)) / var(--_g) exclude, 50% / var(--_g);
      position: absolute;
      width: 4.2ch;
    }
  }

  .card__overview {
    font-size: var(--fs-txt-small);
    line-height: var(--lh-txt-small);

    dt {
      color: var(--c-text-light);
    }

    dd + dt {
      margin-block-start: var(--sp-gutter-min);
    }
  }

  .card__picture {
    aspect-ratio: 16 / 9;
    height: 20vh;
    width: 100%;
  }
}
.card--contrast {
  --c-text-light: #707070;
  background-color: var(--c-grey-light);
}

.page-title {
  font-family: var(--ff-accent);
  font-size: var(--fs-ttl-page);
  line-height: var(--lh-ttl-page);
  text-wrap: pretty;
}
.main-content > .container > .page-title {
  margin-top: var(--sp-gutter);
}

.sub-title {
  font-size: var(--fs-ttl-sub);
  font-variant: all-petite-caps;
  font-weight: 600;
  letter-spacing: var(--sp-tighter-lettering);
  line-height: var(--lh-ttl-sub);
  position: relative;

  & + p {
    margin-block-start: 0;
  }
}

.site-header {
  padding-block: var(--sp-gutter-min);

  .site-header__container {
    align-items: center;
    display: flex;
    flex-direction: row;    
    justify-content: space-between;
  }

  .main-nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: var(--sp-gutter);

    a {
      color: var(--c-blue);
      text-decoration: none;
      transition: all 1s linear;

      &:focus,
      &:hover {
        text-decoration: underline;
        text-decoration-thickness: 0.2rem;
        text-underline-offset: 0.2rem;
      }
    }

    .current a {
      background-image: linear-gradient(transparent 45%, var(--c-green-opacity) 35%, var(--c-green-opacity) 100%, transparent 100%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      color: var(--c-green-dark);
      font-weight: bold;
      padding-inline: 0.25ch;
      position: relative;
    }
  }
}

.about-page .site-header {
  margin-block-end: var(--sp-gutter-max);
}

.site-footer .container {
  color: var(--c-text-light);
  display: flex;
  flex-direction: column;
  font-size: var(--fs-txt-small);
  line-height: var(--lh-txt-small);

  p {
    margin: unset;
  }

  @media only screen and (min-width: 880px) {
    flex-direction: row;
    gap: var(--sp-gutter-min);
  }
}

.area {
  padding-block: var(--sp-gutter-max);

  .area__title {
    font-family: var(--ff-accent);
    font-size: var(--fs-ttl-area);
    line-height: var(--lh-ttl-area);
    margin-block-end: var(--sp-gutter);
    text-wrap: pretty;
  }
}

.area--contrast {
  background: var(--c-grey-light);
}

.area--intro {
  .container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gutter);

    @media only screen and (min-width: 880px) {
      flex-direction: row;
      gap: var(--sp-gutter-max);
    }
  }

  .intro__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gutter-min);

    & > p {
      margin: 0;
    }
  }

  .greeting {
    color: var(--c-text-light);
  }

  .hook--part-2 {
    color: var(--c-text-light);
    font-family: var(--ff-accent);
    font-size: var(--fs-ttl-sub);
    line-height: var(--lh-ttl-sub);
  }
}

.cases {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter-max);
}
.case {
  background-color: var(--c-white);
  border-radius: var(--br-common);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;

  @media only screen and (min-width: 880px) {
    flex-direction: row;
  }

  .case__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gutter-min);
    padding: var(--sp-gutter);
  }

  .case__title {
    font-size: var(--fs-ttl-sub);
    letter-spacing: var(--sp-tighter-lettering);
    line-height: var(--lh-ttl-sub);
  }

  .case__description {
    color: var(--c-text-light);
  }
  
  .case__picture {
    background-color: aliceblue;
    height: auto;
    object-fit: cover;
    width: 100%;

    @media only screen and (min-width: 880px) {
      max-width: 40%;
    }
  }

  .case__btn {
    &::before {
      border-radius: var(--br-common);
      bottom: 0;
      content: '';
      cursor: pointer;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  
  .protected {
    &::after {
      content: '🔒';
    }
  }
}

.hook {
  color: var(--c-text-light);
  font-family: var(--ff-accent);
  font-size: var(--fs-ttl-sub);
  line-height: var(--lh-ttl-sub);
}

.area--about {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter);

  @media only screen and (min-width: 880px) {
    flex-direction: row;
    gap: var(--sp-gutter-max);
  }
}

.area__extra {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter);

  @media only screen and (min-width: 560px) {
    flex-direction: row;
  }

  @media only screen and (min-width: 880px) {
    flex-direction: column;
    gap: var(--sp-gutter-max);
    width: 30ch;
  }
}

.area {
  .card-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gutter);
  
    @media only screen and (min-width: 880px) {
      flex-direction: row;
      gap: var(--sp-gutter-max);
    }
  
    & > .card {
      flex: 1;
    }
  }
}

.area--growth {
  .card:first-of-type {
    flex-basis: 33%;
  }
  
  li {
    font-size: var(--fs-txt-small);
    line-height: var(--lh-txt-small);
  }
}

.area--beyond {
  .card-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-gutter);

    @media only screen and (min-width: 880px) {
      gap: var(--sp-gutter-max);
    }
  }
  .card {
    width: auto;
    
    @media only screen and (min-width: 880px) {
      flex-direction: row;
      gap: var(--sp-gutter-max);
    }

    & .card__content {
      display: flex;
      flex-direction: column;
      gap: var(--sp-gutter);
    }
  }
  .card:nth-child(2) {
    @media only screen and (min-width: 880px) {
      background-color: var(--c-grey-light);
      flex-direction: row-reverse;
    }
  }
}

.linkedin {
  margin-block: calc(2 * var(--sp-gutter-max));

  a {
    position: relative;

    &::after {
      color: var(--c-white);
      content: '🔗';
      padding-inline-start: var(--sp-gutter-min);
    }
  }
}

.ixdf {
  display: block;
  height: auto;
  margin-inline: auto;
  width: 90%;  
}

.animals {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter-min);

  @media only screen and (min-width: 600px) {
    flex-direction: row;
  }
}

.article-header {
  --bg-image: url(https://picsum.photos/1920/800);
  align-items: flex-end;
  background-attachment: fixed;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 85), rgba(0, 0, 0, 0.25)), var(--bg-image);
  background-position: 0 0, 50%;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
  color: var(--c-white);
  display: flex;
  justify-content: center;
  height: 800px;
  margin-bottom: var(--sp-gutter-max);
  max-height: 82vh;

  .container > p {
    margin-block-end: var(--sp-gutter-max);
  }
}

.case-study-picture {
  background-color: var(--c-white);
  border-radius: var(--br-min);
  margin: var(--sp-gutter-max) auto;
  padding: var(--sp-gutter);
  position: relative;
  width: 90%;

  &::after,
  &::before {
    background-color: var(--c-grey-light);
    content: '';
    height: 15%;
    position: absolute;
    width: 5%;
    z-index: -1;
  }

  &::after {
    background-color: var(--c-blue);
    border-end-end-radius: var(--br-common);
    bottom: -.25rem;
    right: -.25rem;
  }

  &::before {
    background-color: var(--c-green);
    border-start-start-radius: var(--br-common);
    left: -.25rem;
    top: -.25rem;
  }

  img {
    border-radius: var(--br-common);
    height: auto;
    width: 100%;
  }

  figcaption {
    color: var(--c-text-light);
    font-family: var(--ff-accent);
    font-size: var(--fs-txt-small);
    font-style: italic;
    line-height: var(--lh-txt-small);
    padding: var(--sp-gutter-min);
    text-wrap-style: pretty;
  }
}

.bringing-government-closer-page {
  .container:has(.hook) {
    margin-block-end: var(--sp-gutter-max);
  }

  .area--challenge {
    p + .sub-title {
      margin-block-start: calc(2 * var(--sp-gutter-max));
    }
  }

  .area--approach {
    .block-wrapper {

      @media only screen and (min-width: 880px) {
        align-items: center;
        gap: var(--sp-gutter);
      }
    }

    .picture__img {
      img {
        max-width: 35vw;

        @media only screen and (min-width: 880px) {
          max-width: 170px;
        }
      }
    }
  }
}

.growing-ux-maturity-page {
  .area:first-of-type {
    p + .sub-title {
      margin-block-start: calc(2 * var(--sp-gutter-max));
    }
  }
}

.block-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sp-gutter);

  @media only screen and (min-width: 880px) {
    flex-direction: row;
    gap: var(--sp-gutter-max);
  }

  aside {
    align-self: start;
    margin-inline: auto;
    width: 65vw;

    & + aside {
      margin-block-start: var(--sp-gutter);
    }

    @media only screen and (min-width: 880px) {
      min-width: 30ch;
    }
  }
}

.preview {
  margin-bottom: var(--sp-gutter-max);
  position: relative;

  &::after {
    background: linear-gradient(rgba(255, 255, 255, 0), rgb(255, 255, 255));
    content: '';
    height: 20rem;
    inset-block-end: 0;
    inset-inline: 0;
    position: absolute;
  }
}

.confidential {
  margin-bottom: var(--sp-gutter-max);

  .container {
    background-color: var(--c-green-opacity);
    border-radius: var(--br-common);
    color: var(--c-blue-dark);
    margin-bottom: var(--sp-gutter-max);
    padding: var(--sp-gutter);
  }
}



@layer reset {
  /*! normalize.css v3.0.2 | MIT License | git.io/normalize */
  html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;} body {margin: 0;} article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block;} audio, canvas, progress, video {display: inline-block; vertical-align: baseline;} audio:not([controls]) {display: none; height: 0;} [hidden], template {display: none;} a {background-color: transparent;} a:active, a:hover {outline: 0;} abbr[title] {border-bottom: 1px dotted; text-decoration: none;} b, strong {font-weight: bold;} dfn {font-style: italic;} h1 {font-size: 2em;margin: 0.67em 0;} mark {background: #ff0; color: #000;} small {font-size: 80%;} sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;} sup {top: -0.5em;} sub {bottom: -0.25em;} img {border: 0;} svg:not(:root) {overflow: hidden;} figure {margin: 1em 40px;} hr {-moz-box-sizing: content-box; box-sizing: content-box; height: 0;} pre {overflow: auto;} code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;} button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} button {overflow: visible;} button, select {text-transform: none;} button, html input[type="button"], input[type="reset"], input[type="submit"] {-webkit-appearance: button; cursor: pointer;} button[disabled], html input[disabled] {cursor: default;} button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0;} input {line-height: normal;} input[type="checkbox"], input[type="radio"] {box-sizing: border-box; padding: 0;} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {height: auto;} input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;} fieldset {border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em;} legend {border: 0; padding: 0;} textarea {overflow: auto;} optgroup {font-weight: bold;} table {border-collapse: collapse; border-spacing: 0;} td, th {padding: 0;}
  /* HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
  * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
  html {color: #222; font-size: 1em; line-height: 1.4;}
  ::-moz-selection {background: var(--c-green); color: rgb(255, 255, 255); text-shadow: none;}
  ::selection {background: var(--c-green); color: rgb(255, 255, 255); text-shadow: none;}
  hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
  audio, canvas, iframe, img, svg, video {vertical-align: middle;}
  fieldset {border: 0; margin: 0; padding: 0;}
  textarea {resize: vertical;}
  .browserupgrade {margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;}
}

@layer helper {
  .hidden {display: none !important; visibility: hidden;}
  .visuallyhidden {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;}
  .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;}
  .invisible {visibility: hidden;}
  .clearfix:before, .clearfix:after {content: " "; display: table;}
  .clearfix:after {clear: both;}
  /* Author*/
  * {outline-color: var(--c-blue);}
  html {scroll-behavior: smooth;}
  h1, h2, h3, h4, h5, h6, nav > ol, .listing, .listing dd, figure {font-weight: 500; list-style: none; margin: 0; padding: 0;}
  abbr {cursor: help;}
  small {color: var(--c-text-light); font-size: var(--fs-txt-small); line-height: var(--lh-txt-small);}
  .container {
    margin: 0 auto; 
    max-width: 1080px; 
    padding-inline: var(--sp-gutter-min);
    position: relative; 
    width: 100%;

    @media only screen and (min-width: 2000px) {
      padding-inline: unset;
    }
  }
}