/*@import "tailwindcss/base";*/

.container{width:100%}

@media (min-width: 640px){

.container{max-width:640px}}

@media (min-width: 768px){

.container{max-width:768px}}

@media (min-width: 1024px){

.container{max-width:1024px}}

@media (min-width: 1280px){

.container{max-width:1280px}}

@media (min-width: 1536px){

.container{max-width:1536px}}

@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}

.splide__track--draggable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}

.splide__track--fade>.splide__list>.splide__slide{margin:0!important}

.splide__track--fade>.splide__list>.splide__slide{opacity:0;z-index:0}

.splide__track--fade>.splide__list>.splide__slide.is-active{opacity:1;z-index:1}

.splide--rtl{direction:rtl}

.splide__track--ttb>.splide__list{display:block}

.splide__container{box-sizing:border-box;position:relative}

.splide__list{margin:0!important;padding:0!important}

.splide__list{backface-visibility:hidden;display:flex;height:100%}

.splide.is-initialized:not(.is-active) .splide__list{display:block}

.splide__pagination{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;margin:0;pointer-events:none}

.splide__pagination li{display:inline-block;line-height:1;list-style-type:none;margin:0;pointer-events:auto}

.splide:not(.is-overflow) .splide__pagination{display:none}

.splide__progress__bar{width:0}

.splide{position:relative;visibility:hidden}

.splide.is-initialized,.splide.is-rendered{visibility:visible}

.splide__slide{list-style-type:none!important}

.splide__slide{backface-visibility:hidden;box-sizing:border-box;flex-shrink:0;margin:0;position:relative}

.splide__slide img{vertical-align:bottom}

.splide__spinner{animation:splide-loading 1s linear infinite;border:2px solid #999;border-left-color:transparent;border-radius:50%;bottom:0;contain:strict;display:inline-block;height:20px;left:0;margin:auto;position:absolute;right:0;top:0;width:20px}

.splide__sr{clip:rect(0 0 0 0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

.splide__toggle.is-active .splide__toggle__play,.splide__toggle__pause{display:none}

.splide__toggle.is-active .splide__toggle__pause{display:inline}

.splide__track{overflow:hidden;position:relative;z-index:0}

html {
}

body {
  line-height: 1.3;
}

/* ==========================================================================
   Accessibility
   The theme previously defined no focus styles at all: every :focus rule on a
   rendered page came from the Instagram Feed plugin or WordPress core, so keyboard
   users had nothing reliable to follow. WCAG 2.2 AA is binding here (PRODUCT.md).
   ========================================================================== */

/* Ink rather than the brand green: #00f000 is too light to be a dependable focus
   indicator against white, and DESIGN.md forbids introducing new green-on-light. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #262626;
  outline-offset: 3px;
  border-radius: 0;
}

/* Over dark photography and dark surfaces the ink ring disappears, so invert it. */

:where(.hero, .module-lift-big, .mobilenav, footer.main)
  :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: #fff;
}

/* Keep a ring for browsers without :focus-visible, but never suppress focus outright. */

:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

.screen-reader-text {
  position: absolute !important;
}

.screen-reader-text {
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 0.8rem;
  top: -10rem;
  z-index: 200;
  padding: 1.6rem 2.4rem;
  background-color: #262626;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  -webkit-text-decoration: none;
  text-decoration: none;
  transition: top 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.skip-link:focus {
  top: 0.8rem;
  outline: 3px solid #00f000;
  outline-offset: 2px;
}

/* The skip target must not draw a ring of its own when focused programmatically. */

main:focus {
  outline: none;
}

/* --------------------------------------------------------------------------
   Nav controls promoted from <div>/<a href="#"> to real <button> elements.
   Strip the UA button chrome so they keep their legacy appearance, and give them
   a 44px touch target (legacy markup had none).
   -------------------------------------------------------------------------- */

.menu-trigger,
.close-mobilenav {
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: 0;
  cursor: pointer;
}

.menu-trigger {
  min-width: 4.4rem;
  min-height: 4.4rem;
}

.close-mobilenav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  min-height: 4.4rem;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body:not(.home) .hero{position:relative}

body:not(.home) .hero h1,
    body:not(.home) .hero h2{margin:0px;--tw-text-opacity:1;color:rgba(255, 255, 255, 1);color:rgba(255, 255, 255, var(--tw-text-opacity));
      text-shadow: 3px 5px 20px rgba(0, 0, 0, 0.3)}

body:not(.home) .hero picture::after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:0;background-color:rgba(0, 0, 0, 0.3);background-color:rgba(0, 0, 0, var(--tw-bg-opacity));--tw-bg-opacity:0.3;
        content: ""}

body:not(.home) main section {
      margin-bottom: 10rem;
    }

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

/* The frozen legacy bundle carries three conflicting h2 declarations (30px uppercase
   letterspaced, 26px green, 40px grey). Their cascade landed on a 50px heading with a
   36px line-height, so any heading long enough to wrap had its lines overlap. Headings
   are re-anchored here to unitless ratios that can never fall below the font size.
   See "The Line-Height Floor Rule" in DESIGN.md. */

h1,
h2,
h3,
h4 {
  line-height: 1.15;
}

h1 {
  line-height: 1.05;
}

/* The legacy bundle also pins headings inside .services-list and .content to absolute
   line-heights (2.6rem, 40px) that sit below their rendered font-size. Those selectors
   outrank a bare element selector, so match their specificity here; this bundle is
   enqueued last, so equal specificity resolves in our favour. Per-module line-heights
   set in modules.css are deliberately left to win. */

.services-list h2,
.services-list .h2,
.services-list h3,
.content h1,
.content h2,
.content .h2 {
  line-height: 1.15;
}

h3{font-size:2.2rem;--tw-text-opacity:1;color:rgba(0, 0, 0, 1);color:rgba(0, 0, 0, var(--tw-text-opacity))}

@media (min-width: 768px){

h3{font-size:2.6rem}}

h3 {
  line-height: 1.2;
}

.wrapper--news{padding-top:6rem;padding-bottom:6rem}

/* Footer credential badges.

   Two of these used to render stretched. The `width` attribute in the markup is a
   presentation hint that sets a real used `width`, and the frozen legacy sheet
   (build/production-old/css/old.css, not buildable from this repo) pins `height` on any
   badge wrapped in a link. With both axes fixed and the default `object-fit: fill`, the
   badge was scaled to whatever box those two numbers described rather than to its own
   proportions — the square "Vastuullinen yritys" mark was drawn at 300x100, three times
   too wide. `.aa` and `.avainlippu` escaped it only because they were already getting
   `width: auto` here.

   So: `width: auto` on every badge, which beats the attribute hint and lets the real
   aspect ratio decide, plus `object-fit: contain` so nothing can distort even if a
   future rule pins both axes again.

   The !important and the redundant-looking selectors are both deliberate. old.css sets
   `height` with !important, so matching it needs an equally specific selector — the
   `a img` and `a img.resposible-company` forms tie its two rules and win on source
   order, since lib/assets.php enqueues this bundle after the legacy one. */

/* The badges are a mix of bare <img> and <img> wrapped in a link, so as inline-blocks they
   aligned on four different baselines and their centres drifted ~10px apart. A flex row
   centres them on one axis regardless of which wrapper they have, and `gap` replaces the
   per-item margins that used to space them. */

.footer--logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem 3rem;
  /* Full width below the breakpoint. Shrink-to-fit plus the legacy `.col-` padding left
     this column narrower than the badges it holds, so they spilled out of it. border-box
     because `.col-` carries its own padding, which content-box would add on top of the
     100% and push the column past the wrapper. */
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 48em) {
  .footer--logos {
    width: auto;
    margin-left: auto;
    justify-content: flex-end;
  }
}

/* The legacy sheet gives each linked badge a 4rem left margin, which was its way of
   spacing the row. `gap` does that now, and flex centring counts a margin as part of the
   item — so leaving it shunted the two linked badges ~20px right of the two bare ones on
   the centred mobile layout. */

.footer--logos a {
  display: flex;
  align-items: center;
  margin-left: 0;
}

.footer--logos img,
.footer--logos a img,
.footer--logos a img.resposible-company {
  height: auto !important;
}

.footer--logos img,
.footer--logos a img,
.footer--logos a img.resposible-company {
  /* Both axes auto, bounded by a box. The image then scales itself down to fit whichever
     limit it reaches first and keeps its own ratio, so the element never reserves more
     space than the artwork fills:

       vastuullinen 1:1     -> height-bound, 100x100
       luotteva     2.94:1  -> width-bound,  220x75
       platinum     2.99:1  -> width-bound,  220x74
       avainlippu   1.03:1  -> height-bound, 103x100

     Pinning `height` instead would let the ~3:1 wordmarks run three times the width of
     the square marks and unbalance the row; capping width alone would leave them in a
     box taller than the artwork. */
  width: auto;
  max-height: 10rem;
  max-width: 22rem;
  -o-object-fit: contain;
     object-fit: contain;
}

.sbi_load_btn{font-size:2.2rem !important}

.sbi_load_btn{font-weight:700;text-transform:uppercase}

.button{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;
  border: 5px solid #00f000;
  padding: 25px 45px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 19px;
  font-size: 16px;
  display: inline-flex;
  text-align: center;
  background-color: #00f000;
  color: #fff}

.button:hover{background-color:transparent;--tw-text-opacity:1;color:rgba(0, 240, 0, 1);color:rgba(0, 240, 0, var(--tw-text-opacity))}

.button--only-border{background-color:transparent;--tw-text-opacity:1;color:rgba(0, 240, 0, 1);color:rgba(0, 240, 0, var(--tw-text-opacity))}

.button--only-border:hover{--tw-bg-opacity:1;background-color:rgba(0, 240, 0, 1);background-color:rgba(0, 240, 0, var(--tw-bg-opacity));--tw-text-opacity:1;color:rgba(255, 255, 255, 1);color:rgba(255, 255, 255, var(--tw-text-opacity))}

/* Card-scale variant. Same square shape, uppercase label and letterspacing as the
     full-size button, just sized for a listing card rather than a hero. The border stays
     at the system's 5px: DESIGN.md calls thick borders a structural device and forbids
     thin hairline accents, so a smaller button gets less padding, not a thinner edge. */

.button--small {
    padding: 1.3rem 2.6rem;
    font-size: 1.4rem;
    line-height: 1.6rem;
  }

.button.gform_button,
  .button.gform_button_select_files {
    padding: 1rem;
  }

.home .hero{position:relative}

/*
      Scrim over the hero video so the white copy and the buttons keep their contrast
      against whatever frame happens to be playing. It sits above the video and below
      .video-container-content — both are z-0, so DOM order decides, and the content
      block comes later in front-page.twig.

      .no-shadow opts an individual hero out.
    */

.home .hero .video-container:not(.no-shadow)::after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:0;background-color:rgba(0, 0, 0, 0.4);background-color:rgba(0, 0, 0, var(--tw-bg-opacity));--tw-bg-opacity:0.4;
        content: ""}

.home .hero p:has(strong){margin-bottom:0.5rem;--tw-text-opacity:1;color:rgba(0, 240, 0, 1);color:rgba(0, 240, 0, var(--tw-text-opacity))}

.home .hero h1{--tw-text-opacity:1;color:rgba(255, 255, 255, 1);color:rgba(255, 255, 255, var(--tw-text-opacity))}

.module {

  /* `&-icons` used to live here, sizing the icons with a 100px min-width/min-height. That
     is the rule the band is now built without: a minimum outranks both `width` and
     `max-width`, so it pinned every icon at 100px square and no later rule could size them.
     The module is defined in full further down this file. */
}

.module-lift-big{position:relative}

.module-lift-big picture::after{position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:0;background-color:rgba(0, 0, 0, 0.5);background-color:rgba(0, 0, 0, var(--tw-bg-opacity));--tw-bg-opacity:0.5;
        content: ""}

.module-lift-big h2{--tw-text-opacity:1;color:rgba(255, 255, 255, 1);color:rgba(255, 255, 255, var(--tw-text-opacity))}

.module-service-lifts:first-child {
      margin-top: -10rem;
    }

.module-service-lifts:last-child {
      margin-bottom: 0;
    }

.module-service-lifts h2{margin-bottom:10rem;font-weight:400}

@media (min-width: 768px){

.module-service-lifts h2{font-size:5rem}}

.module-ingress h2{margin-bottom:6rem;font-weight:400;line-height:1.25;--tw-text-opacity:1;color:rgba(0, 240, 0, 1);color:rgba(0, 240, 0, var(--tw-text-opacity))}

@media (min-width: 768px){

.module-ingress h2{font-size:5rem}}

/*
 * The key figures are meant to read as a Black weight. The theme ships exactly two Gilroy
 * faces — Light at 400 and ExtraBold at 700 (see the @font-face blocks in the frozen
 * build/production-old/css/old.css) — so `font-weight: 900` would resolve straight back to
 * the 700 face and change nothing on screen. The stroke thickens that face optically
 * instead; drop it the day a real Gilroy Black webfont lands in fonts/.
 */

.lift-numbers__value {
  -webkit-text-stroke: 0.025em currentColor;
  letter-spacing: -0.02em;
}

.lift-numbers__symbol {
  font-size: 0.55em;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Ikoninostot — modules/contents/icons.twig
   -------------------------------------------------------------------------- */

.module-icons {
  background-color: #f9f9f9;
  padding: 8rem 0;
  text-align: center;
}

/* Same treatment as .clients__heading, for the same reason: the frozen legacy sheet
   styles every h2 bold, black and 40px, so each band has to opt out explicitly. */

.module-icons__heading {
  margin: 0 0 5rem;
  max-width: none;
  color: #00f000;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}

.module-icons__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12rem;
  text-align: center;
}

@media (min-width: 48em) {
  .module-icons__heading {
    font-size: 3.6rem;
  }

  .module-icons__list {
    gap: 5rem 4rem;
  }

  .module-icons__item {
    width: 16rem;
  }
}

/* The fixed box is the whole point. Each icon is stored as inline SVG carrying its own
   hardcoded size, so without this they render at five different sizes and — because their
   heights differ — push every label to a different height. */

/* A plain block, not a flex container: as a flex item the <svg> picked up an automatic
   minimum size that outranked `max-width`, and it kept overflowing this box. */

.module-icons__glyph {
  display: block;
  width: 9rem;
  height: 9rem;
  margin-bottom: 2.4rem;
}

/* The icons arrive as inline SVG at five different hardcoded sizes (119x132, 143x139,
   117x121, 133x101, 120x102), which is what made them mismatch and pushed every label to a
   different height. Sizing the element outright — rather than clamping it and hoping the
   intrinsic size cooperates — puts all five on the same square. The artwork is not
   stretched to fill it: each has a viewBox, so the default preserveAspectRatio scales the
   drawing proportionally and centres it, keeping the designed shapes. */

.module-icons__glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}

.module-icons__label {
  font-size: 1.8rem;
  line-height: 1.3;
  color: #262626;
}

/* --------------------------------------------------------------------------
   Kuva ja sisältö — modules/contents/image-and-content.twig
   -------------------------------------------------------------------------- */

/* The photo is nudged out of its bordered box so the green shows as an L along the two
   opposite edges, rather than as a frame all the way round. Moved here from inline styles
   because the offset has to mirror with the layout, which an inline style cannot express. */

.module-image-and-content__frame {
  border: 10px solid #00f000;
}

.module-image-and-content__picture {
  transform: translate(-20px, 20px);
}

/* Image right, text left: the whole band is mirrored, so the offset mirrors with it and
   the green keeps pointing in towards the text instead of off the edge of the page. */

.module-image-and-content--image-right .module-image-and-content__picture {
  transform: translate(20px, 20px);
}

/* --------------------------------------------------------------------------
   Prosessin vaiheet — modules/contents/process-steps.twig
   -------------------------------------------------------------------------- */

.module-process-steps {
  /* Shows through wherever the photograph does not reach, and is the band's own colour
     when no image is set at all. */
  background-color: #262626;
}

.module-process-steps__media {
  display: block;
  position: relative;
}

/* Scrim. The copy is white and green over an uncontrolled photograph, so the band cannot
   rely on the image being dark enough on its own.

   0.65 rather than the 0.5 lift-big uses. Measured against a bright aerial photograph, the
   worst pixel under the copy gives white 7.0:1 and the green 4.5:1; at 0.5–0.55 the green
   falls to about 3:1, which only clears AA because the heading and figures are large text
   and leaves nothing spare for a lighter image. */

.module-process-steps__media::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.65);
}

/* Sits in the same grid area as the picture, so it needs its own stacking position to
   land on top of the scrim rather than under it. */

.module-process-steps__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0;
  text-align: center;
}

.module-process-steps__heading {
  margin: 0 0 6rem;
  max-width: none;
  color: #00f000;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}

.module-process-steps__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.module-process-steps__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 12rem;
}

.module-process-steps__number {
  display: block;
  color: #00f000;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
  /* The theme ships no Gilroy Black, so the figures are thickened the same way
     .lift-numbers__value does it rather than by adding a webfont. */
  -webkit-text-stroke: 0.025em currentColor;
  letter-spacing: -0.02em;
}

.module-process-steps__label {
  display: block;
  margin-top: 1.6rem;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
}

@media (min-width: 48em) {
  .module-process-steps__heading {
    font-size: 3.6rem;
  }

  .module-process-steps__list {
    gap: 5rem 4rem;
  }

  .module-process-steps__item {
    width: 16rem;
  }

  .module-process-steps__number {
    font-size: 8rem;
  }

  .module-process-steps__label {
    font-size: 2rem;
  }
}

/* --------------------------------------------------------------------------
   Lift big (ilman taustakuvaa) — the optional tinted variant
   -------------------------------------------------------------------------- */

/* Both classes deliberately: common.css gives every section in main a 10rem bottom margin
   via `body:not(.home) main section`, which is one class and three elements. Two classes
   outrank that, so the margin can be dropped without !important and without depending on
   which stylesheet happens to be imported last. */

.module-lift-big-without-bg.module-lift-big-without-bg--tinted {
  background-color: #fafafa;
  margin-bottom: 0;
}

.module-icons + .module-lift-big {
  margin-top: -10rem;
}

.module-stories + .module-lift-big {
  margin-bottom: 0 !important;
}

.services-list__item {
  padding-left: 0 !important;
}

.carousel .splide__pagination{margin-top:3rem;gap:0.5rem}

.carousel .splide__pagination__page{cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:4px;border-style:solid;--tw-border-opacity:1;border-color:rgba(0, 240, 0, 1);border-color:rgba(0, 240, 0, var(--tw-border-opacity));
      width: 20px;
      height: 20px}

.carousel .splide__pagination__page.is-active{--tw-bg-opacity:1;background-color:rgba(0, 240, 0, 1);background-color:rgba(0, 240, 0, var(--tw-bg-opacity))}

/* ==========================================================================
   Ajankohtaista archive: grid, cards, pagination.

   Square corners, heavy borders, flat surfaces, one accent green. See DESIGN.md.
   Remember 1rem = 10px here (the legacy bundle sets html { font-size: 62.5% }).
   ========================================================================== */

.news-archive {
  background-color: #f9f9f9;
  padding-top: 8rem;
  padding-bottom: 10rem;
}

/* The shared hero carries mb-40 (10rem), which on this archive stacks on top of the
   section's own padding and leaves a wide white band between the hero and the first row.
   The listing's grey band should start where the hero ends. */

.post-type-archive-news .hero {
  margin-bottom: 0;
}

/* The shared .wrapper caps at 1144px, which squeezes a three-column card grid down to
   ~320px per card. The listing needs the full measure, so widen it here rather than
   changing .wrapper globally and reflowing every other page on the site. */

.news-archive .wrapper {
  max-width: 160rem;
  width: 92%;
}

.news-archive__empty {
  text-align: center;
  padding: 6rem 0;
}

.news-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4rem;
  gap: 4rem;
  /* Stretch, so every card in a row shares the row's height and the card bottoms line
     up. The buttons are pushed to the bottom below, which is what keeps that alignment
     from reading as accidental whitespace. */
  align-items: stretch;
}

@media (min-width: 48em) {
  .news-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 62em) {
  .news-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem;
  }
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 0;
}

.news-card__media {
  display: block;
  overflow: hidden;
}

.news-card__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 420;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.news-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1 1 auto;
  padding: 4rem 4rem 4.5rem;
}

.news-card__title {
  margin: 0;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.25;
  color: #262626;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  max-width: none;
}

.news-card__link {
  color: inherit;
  -webkit-text-decoration: none;
  text-decoration: none;
}

/* Stretch the title link across the whole card so the entire surface is clickable,
   while the accessible name stays on real text rather than a wrapper div. */

.news-card__link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.news-card__link:focus-visible {
  outline: none;
}

.news-card:focus-within {
  outline: 3px solid #262626;
  outline-offset: 3px;
}

.news-card__date {
  display: block;
  margin-top: 1.4rem;
  color: #00f000;
  font-size: 1.9rem;
  line-height: 1.2;
}

.news-card__excerpt {
  margin: 2.2rem 0 3rem;
  font-size: 1.7rem;
  line-height: 1.55;
  color: #262626;
}

/* auto pushes the button to the card floor so buttons align across a row; the excerpt's
   bottom margin above guarantees a minimum gap when the card is short. */

.news-card__button {
  margin-top: auto;
}

/* --------------------------------------------------------------------------
   Featured variant: photograph behind the whole card, standard black overlay
   on top of it. No new surface colour is introduced (DESIGN.md, Two-Band Rule).
   -------------------------------------------------------------------------- */

.news-card--featured {
  background-color: #262626;
  overflow: hidden;
}

.news-card--featured .news-card__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.news-card--featured .news-card__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Bottom-weighted gradient rather than a flat tint: the photograph stays readable at the
   top of the card, while the area the text actually sits on is dark enough to hold white
   type over any image an editor uploads, including a bright one. */

.news-card--featured .news-card__bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.82) 100%
  );
}

.news-card--featured .news-card__body {
  position: relative;
  z-index: 1;
  /* Content sits at the foot of the card so the photograph reads above it. */
  justify-content: flex-end;
  /* Floor only: on desktop the grid row sets the real height, but in the single-column
     layout there is no sibling to match, and without this the card would collapse to
     text height and stop reading as a photograph. */
  min-height: 34rem;
}

/* The plain card pushes its button to the floor with margin-top:auto so buttons align
   across a row. On the featured card that auto margin would eat all the free space and
   fight justify-content, splitting the text to the top and the button to the bottom. */

.news-card--featured .news-card__button {
  margin-top: 0;
}

.news-card--featured .news-card__title,
.news-card--featured .news-card__excerpt {
  color: #fff;
}

.news-card--featured:focus-within {
  outline-color: #fff;
}

/* --------------------------------------------------------------------------
   The same cards inside a Splide carousel — the Ajankohtaista band on the front page.
   -------------------------------------------------------------------------- */

.news-lifts .wrapper {
  /* Match .news-archive: the shared .wrapper caps at 1144px, which squeezes three cards
     down to ~320px each. */
  max-width: 160rem;
  width: 92%;
}

.news-lifts {
  padding-bottom: 8rem;
}

.news-carousel {
  margin-bottom: 2rem;
}

/* Splide's list is a flex row, so slides already stretch to the tallest one. The card
   itself is the flex child that has to fill that height, or short cards float with their
   buttons halfway up the slide. */

.news-carousel .news-card {
  height: 100%;
}

/* The featured card's focus ring is drawn outside the card, and the track clips overflow.
   Pull the ring inside so keyboard focus stays visible on the dark slide. */

.news-carousel .news-card:focus-within {
  outline-offset: -3px;
}

.news-carousel .splide__pagination {
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   Pagination: green squares, the current page filled.
   -------------------------------------------------------------------------- */

.pagination {
  margin-top: 8rem;
}

.pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__item {
  display: flex;
}

.pagination__page {
  display: block;
  /* 2.6rem square, but the tap target is padded out to the 44px minimum below. The
     border is the system's 5px (DESIGN.md: thick borders, never a hairline accent), so
     the square is sized to carry it without closing up. */
  width: 2.6rem;
  height: 2.6rem;
  border: 5px solid #00f000;
  border-radius: 0;
  background-color: transparent;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination__page.is-current {
  background-color: #00f000;
}

a.pagination__page:hover {
  background-color: #00f000;
}

a.pagination__page:focus-visible {
  outline: 3px solid #262626;
  outline-offset: 3px;
}

/* Keep the visual square small while giving pointers and touch a 44px target. */

.pagination__item {
  position: relative;
}

.pagination__item a.pagination__page {
  position: relative;
}

.pagination__item a.pagination__page::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -50%);
}

.pagination__page--gap {
  border-color: transparent;
  position: relative;
}

.pagination__page--gap::after {
  content: "…";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #262626;
}

/* --------------------------------------------------------------------------
   Single news post
   -------------------------------------------------------------------------- */

.news-single {
  padding-top: 6rem;
  padding-bottom: 10rem;
}

.news-single__date {
  display: block;
  margin-bottom: 2rem;
  color: #00f000;
  font-size: 1.9rem;
}

.news-single__back {
  margin-top: 6rem;
}

/* ==========================================================================
   Ajankohtainen single: hero, article blocks, person card.
   Remember 1rem = 10px (the legacy bundle sets html { font-size: 62.5% }).
   ========================================================================== */

/* Shared measure for the hero copy and every article block, so the article has one
   consistent left edge from the title all the way down to the contact card. */

.article-container {
  width: 90%;
  max-width: 88rem;
  margin: 0 auto;
}

/* The Referenssi layout sets its running text in a markedly narrower column than an
   Ajankohtainen article, which reads as a case study rather than a news piece. */

.article-container--narrow {
  max-width: 58rem;
}

.article-container--center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero--article {
  margin-bottom: 0;
}

/* The shared 30% overlay from common.css is tuned for centred hero copy over a chosen
   hero image. An article hero falls back to the post's featured photo, which is whatever
   the editor attached and is often bright, so this one darkens further and weights the
   gradient toward the lower left where the title and date actually sit. */

.hero--article picture::after {
  background-color: transparent !important;
}

.hero--article picture::after {
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.55) 45%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

.hero--article__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8rem 0 6rem;
}

.hero--article__title {
  margin: 0;
  max-width: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.15;
}

@media (min-width: 48em) {
  .hero--article__title {
    font-size: 4.4rem;
  }
}

.hero--article__date {
  display: block;
  margin-top: 1.2rem;
  color: #00f000;
  font-size: 1.8rem;
  line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Article blocks
   -------------------------------------------------------------------------- */

.article {
  padding-top: 7rem;
  padding-bottom: 9rem;
}

.article-block + .article-block {
  margin-top: 7rem;
}

.article-heading {
  margin: 0 0 2.4rem;
  max-width: none;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.2;
}

.article-heading--primary {
  color: #00f000;
  font-size: 3rem;
  font-weight: 700;
}

@media (min-width: 48em) {
  .article-heading--primary {
    font-size: 3.6rem;
  }
}

.article-heading--secondary {
  color: #262626;
  font-size: 1.9rem;
  font-weight: 700;
}

.article-ingress,
.article-body {
  color: #262626;
  font-size: 1.8rem;
  line-height: 1.6;
}

.article-ingress {
  font-size: 1.9rem;
}

.article-ingress p,
.article-body p {
  margin: 0 0 1.8rem;
}

.article-ingress p:last-child,
.article-body p:last-child {
  margin-bottom: 0;
}

/* Typography for editor output. These blocks deliberately do not carry the legacy
   `.content` class: it brings `padding: 5em 0` and a 76rem max-width along with its type
   styles, which fought the block spacing and the two-column measure. */

.article-ingress a,
.article-body a {
  color: #262626;
  font-weight: 700;
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

.article-ingress a:hover,
.article-body a:hover {
  text-decoration-thickness: 2px;
}

.article-ingress ul,
.article-ingress ol,
.article-body ul,
.article-body ol {
  margin: 0 0 1.8rem;
  padding-left: 2.4rem;
}

.article-ingress li,
.article-body li {
  margin-bottom: 0.6rem;
}

.article-body h3,
.article-body h4 {
  margin: 3rem 0 1.4rem;
  text-align: left;
  color: #262626;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.3;
}

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

/* --------------------------------------------------------------------------
   Two-column text + image
   -------------------------------------------------------------------------- */

.article-cols {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 4rem;
  gap: 4rem;
  align-items: start;
}

@media (min-width: 48em) {
  .article-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 6rem;
  }

  /* Source order is text first, so the image column is moved rather than the text: the
     reading order stays text-then-image for screen readers and on mobile either way. */
  .article-block--image-left .article-cols__text {
    order: 2;
  }

  .article-block--image-left .article-cols__media {
    order: 1;
  }
}

.article-figure {
  display: block;
}

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Green frame: a bordered box with the picture translated out of it, revealing green
   along two edges. A transform, never a shadow (DESIGN.md, Frame-Not-Float Rule). */

@media (min-width: 48em) {
  /* 10px, which is what DESIGN.md specifies for framed images (buttons are the 5px
     case). Matches the existing image-and-content page module. */
  .article-cols__media--framed {
    border: 10px solid #00f000;
  }

  .article-cols__media--framed .article-figure {
    transform: translate(2.4rem, -2.4rem);
  }
}

/* --------------------------------------------------------------------------
   Quote over a full-bleed photograph
   -------------------------------------------------------------------------- */

.article-block--quote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42rem;
  padding: 8rem 5%;
  overflow: hidden;
  background-color: #262626;
}

.article-quote__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
}

.article-quote__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

/* Flat 50%, the DESIGN.md overlay weight for large image blocks. The quote sits in the
   middle of the frame rather than at one edge, so there is nothing for a gradient to
   weight toward. */

.article-quote__bg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.article-quote {
  position: relative;
  z-index: 1;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

.article-quote__mark {
  display: block;
  width: 4.4rem;
  height: 3.2rem;
  margin: 0 auto 2.4rem;
}

.article-quote__text {
  margin: 0;
  color: #fff;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.5;
}

.article-quote__source {
  display: block;
  margin-top: 2.4rem;
  color: #00f000;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Icon row
   -------------------------------------------------------------------------- */

.article-block--icons {
  background-color: #f9f9f9;
  padding: 7rem 0;
}

.article-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  /* Narrow enough that three still sit on one row at 390px, rather than stacking into
     three full-height rows on the phone the design was drawn three-across for. */
  gap: 4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-icons__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 9.5rem;
  text-align: center;
}

@media (min-width: 48em) {
  .article-icons {
    gap: 5rem 6rem;
  }

  .article-icons__item {
    width: 16rem;
  }
}

.article-icons__glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-bottom: 2.4rem;
}

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

.article-icons__label {
  font-size: 1.8rem;
  line-height: 1.3;
  color: #262626;
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */

.article-cta__text {
  margin: 0 0 2.4rem;
  color: #262626;
  font-size: 1.8rem;
  font-weight: 700;
}

/* Centred variant closes a case study: lighter heading, regular body weight, filled
   button. The left-aligned variant stays the mid-article prompt it already was. */

.article-block--cta-center {
  padding: 7rem 0 8rem;
  text-align: center;
}

.article-cta__heading {
  margin: 0 0 1.8rem;
  max-width: none;
  color: #262626;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

@media (min-width: 48em) {
  .article-cta__heading {
    font-size: 3.4rem;
  }
}

.article-block--cta-center .article-cta__text {
  font-weight: 400;
  margin-bottom: 3.2rem;
}

/* --------------------------------------------------------------------------
   Person card
   -------------------------------------------------------------------------- */

.article-block--person {
  margin-top: 9rem;
}

.person-card {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  max-width: 52rem;
  background-color: #fff;
}

.person-card__media {
  flex: 0 0 auto;
  width: 14rem;
}

.person-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.person-card__body {
  flex: 1 1 22rem;
  padding: 2.4rem 2.8rem;
}

.person-card__name {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 700;
  color: #262626;
}

.person-card__role {
  margin: 0;
  font-size: 1.7rem;
  line-height: 1.4;
  color: #262626;
}

.person-card__contact {
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.person-card__contact li + li {
  margin-top: 0.6rem;
}

.person-card__contact a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: #262626;
  font-size: 1.7rem;
  -webkit-text-decoration: none;
  text-decoration: none;
}

.person-card__contact a:hover span {
  -webkit-text-decoration: underline;
  text-decoration: underline;
}

.person-card__contact svg {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  fill: #00f000;
}

/* ==========================================================================
   Referenssit archive: client logo wall, listing heading.

   The card grid, cards and pagination are shared with Ajankohtaista and live in
   news.css; only what is specific to this archive is here.
   Remember 1rem = 10px (the legacy bundle sets html { font-size: 62.5% }).
   ========================================================================== */

/* Both bands sit directly under the hero, so drop the hero's 10rem bottom margin the
   same way the news archive does. */

.post-type-archive-cases .hero,
.single-cases .hero {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Referenssit band on the front page.

   Mirrors the Ajankohtaista band (.news-lifts) but inverts the surfaces: that one is a
   grey band carrying white cards, this one is a white band carrying grey cards, so two
   card carousels can sit on the same page without merging into one field of grey.
   -------------------------------------------------------------------------- */

.cases-lifts {
  background-color: #fff;
  padding-bottom: 8rem;
}

.cases-lifts .wrapper {
  /* Match .news-lifts and .news-archive: the shared .wrapper caps at 1144px, which
     squeezes three cards down to ~320px each. */
  max-width: 160rem;
  width: 92%;
}

.cases-lifts .news-card {
  background-color: #f5f5f5;
}

/* Splide's list is a flex row, so slides already stretch to the tallest. The card is the
   flex child that has to fill that height, or short cards float with their buttons
   halfway up the slide. */

.cases-carousel .news-card {
  height: 100%;
}

.cases-carousel .splide__pagination {
  margin-top: 5rem;
  margin-bottom: 5rem;
  padding-left: 0;
}

/* --------------------------------------------------------------------------
   Single Referenssi header
   -------------------------------------------------------------------------- */

/* The hero says "Referenssit", not the case name: every case study opens with the same
   branded header as the archive. It is a label, not the page heading — the <h1> is the
   case name below — so it is set at hero scale but carries no heading semantics. */

.hero--case__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8rem 0;
}

.hero--case__label {
  margin: 0;
  color: #fff;
  font-size: 3.4rem;
  font-weight: 400;
  line-height: 1.15;
  text-align: center;
}

@media (min-width: 48em) {
  .hero--case__label {
    font-size: 4.4rem;
  }
}

/* The bottom padding is the header's own, not the first block's: the article's blocks
   only space themselves against each other (.article-block + .article-block), so
   whichever block comes first would otherwise butt straight into the subtitle. */

.case-header {
  padding: 7rem 0 4.5rem;
  text-align: center;
}

.case-header__title {
  margin: 0;
  max-width: none;
  color: #262626;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

@media (min-width: 48em) {
  .case-header__title {
    font-size: 3.2rem;
  }
}

.case-header__subtitle {
  margin: 0.4rem 0 0;
  color: #262626;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.25;
}

@media (min-width: 48em) {
  .case-header__subtitle {
    font-size: 3.2rem;
  }
}

/* The case header supplies the opening space, so the article's own top padding would
   double it. */

.article--case {
  padding-top: 0;
}

/* --------------------------------------------------------------------------
   Asiakkaitamme
   -------------------------------------------------------------------------- */

.clients {
  background-color: #fff;
  padding: 8rem 0 7rem;
  text-align: center;
}

.clients__heading {
  margin: 0 0 2.4rem;
  max-width: none;
  color: #00f000;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
}

@media (min-width: 48em) {
  .clients__heading {
    font-size: 3.6rem;
  }
}

.clients__intro {
  max-width: 58rem;
  margin: 0 auto 5rem;
  font-size: 1.7rem;
  line-height: 1.5;
  color: #262626;
}

.clients__intro p {
  margin: 0 0 1.2rem;
}

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

/* A wall, not a table: the logos are supplied at wildly different aspect ratios, so each
   cell fixes a height and lets the logo find its own width inside it. */

/* Deliberately narrower than the .wrapper it sits in. At full wrapper width the logos
   spread into a thin band that reads as a toolbar; the design clusters them into a tight
   block under the intro, which at this measure lands six across. */

.clients__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 3rem 2.4rem;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.clients__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10rem;
  height: 7rem;
}

@media (min-width: 48em) {
  .clients__item {
    width: 12rem;
    height: 8rem;
  }
}

.clients__item img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.clients__item a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.clients__item a:focus-visible {
  outline: 3px solid #262626;
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Asiakastarinat
   -------------------------------------------------------------------------- */

.cases-archive__heading {
  margin: 0 0 5rem;
  max-width: none;
  color: #00f000;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  letter-spacing: normal;
}

@media (min-width: 48em) {
  .cases-archive__heading {
    font-size: 3.6rem;
  }
}

/* The listing card's second line. Ajankohtaista puts a green date here; a case puts its
   site and city, which is a continuation of the title rather than a label, so it takes
   the body colour and the title's weight-free treatment. */

.news-card__subtitle {
  margin: 0.4rem 0 0;
  /* Matches the card title's size, set regular: the design reads the two lines as one
     unit, "who" over "where", rather than as a heading with a caption under it. */
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1.25;
  color: #262626;
}

.news-card--featured .news-card__subtitle {
  color: #fff;
}

.relative{position:relative}

.z-0{z-index:0}

.z-20{z-index:20}

.z-30{z-index:30}

.m-auto{margin:auto}

.my-12{margin-top:3rem;margin-bottom:3rem}

.-mt-20{margin-top:-5rem}

.mb-0{margin-bottom:0px}

.mb-12{margin-bottom:3rem}

.mb-40{margin-bottom:10rem}

.mb-8{margin-bottom:2rem}

.mr-12{margin-right:3rem}

.mr-6{margin-right:1.5rem}

.mt-\[16rem\]{margin-top:16rem}

.block{display:block}

.inline{display:inline}

.flex{display:flex}

.grid{display:grid}

.contents{display:contents}

.hidden{display:none}

.aspect-video{aspect-ratio:16 / 9}

.h-\[24px\]{height:24px}

.h-\[25px\]{height:25px}

.h-\[7px\]{height:7px}

.h-full{height:100%}

.w-\[24px\]{width:24px}

.w-\[25px\]{width:25px}

.w-\[7px\]{width:7px}

.w-\[80vw\]{width:80vw}

.w-full{width:100%}

.max-w-\[600px\]{max-width:600px}

.max-w-\[800px\]{max-width:800px}

.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}

.resize{resize:both}

.flex-row{flex-direction:row}

.flex-col{flex-direction:column}

.flex-wrap{flex-wrap:wrap}

.items-start{align-items:flex-start}

.items-center{align-items:center}

.justify-end{justify-content:flex-end}

.justify-center{justify-content:center}

.space-y-8 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(2rem * (1 - 0));margin-top:calc(2rem * (1 - var(--tw-space-y-reverse)));margin-top:calc(2rem * calc(1 - 0));margin-top:calc(2rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(2rem * 0);margin-bottom:calc(2rem * var(--tw-space-y-reverse))}

.whitespace-nowrap{white-space:nowrap}

.border-0{border-width:0px}

.border-b-4{border-bottom-width:4px}

.border-solid{border-style:solid}

.border-primary{--tw-border-opacity:1;border-color:rgba(0, 240, 0, 1);border-color:rgba(0, 240, 0, var(--tw-border-opacity))}

.bg-\[\#b5b5b5\]{--tw-bg-opacity:1;background-color:rgba(181, 181, 181, 1);background-color:rgba(181, 181, 181, var(--tw-bg-opacity))}

.bg-deep-grey{--tw-bg-opacity:1;background-color:rgba(38, 38, 38, 1);background-color:rgba(38, 38, 38, var(--tw-bg-opacity))}

.bg-white{--tw-bg-opacity:1;background-color:rgba(255, 255, 255, 1);background-color:rgba(255, 255, 255, var(--tw-bg-opacity))}

.fill-primary{fill:#00f000}

.object-cover{-o-object-fit:cover;object-fit:cover}

.object-center{-o-object-position:center;object-position:center}

.p-0{padding:0px}

.p-12{padding:3rem}

.p-24{padding:6rem}

.px-8{padding-left:2rem;padding-right:2rem}

.py-12{padding-top:3rem;padding-bottom:3rem}

.py-24{padding-top:6rem;padding-bottom:6rem}

.pb-8{padding-bottom:2rem}

.pt-48{padding-top:12rem}

.text-center{text-align:center}

.text-2xl{font-size:2.2rem}

.text-7xl{font-size:5rem}

.text-\[20rem\]{font-size:20rem}

.font-bold{font-weight:700}

.leading-none{line-height:1}

.text-deep-grey{--tw-text-opacity:1;color:rgba(38, 38, 38, 1);color:rgba(38, 38, 38, var(--tw-text-opacity))}

.text-primary{--tw-text-opacity:1;color:rgba(0, 240, 0, 1);color:rgba(0, 240, 0, var(--tw-text-opacity))}

.text-white{--tw-text-opacity:1;color:rgba(255, 255, 255, 1);color:rgba(255, 255, 255, var(--tw-text-opacity))}

.underline{text-decoration-line:underline}

.shadow{--tw-shadow:0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);box-shadow:0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow)}

.outline{outline-style:solid}

.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

@media (min-width: 640px){

.sm\:w-1\/2{width:50%}

.sm\:flex-row{flex-direction:row}}

@media (min-width: 768px){

.md\:order-first{order:-9999}

.md\:order-last{order:9999}

.md\:-mx-8{margin-left:-2rem;margin-right:-2rem}

.md\:block{display:block}

.md\:w-1\/2{width:50%}

.md\:w-5\/12{width:41.666667%}

.md\:w-7\/12{width:58.333333%}

.md\:grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}

.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}

.md\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}

.md\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}

.md\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}

.md\:grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}

.md\:flex-row{flex-direction:row}

.md\:flex-row-reverse{flex-direction:row-reverse}

.md\:space-x-8 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(2rem * 0);margin-right:calc(2rem * var(--tw-space-x-reverse));margin-left:calc(2rem * (1 - 0));margin-left:calc(2rem * (1 - var(--tw-space-x-reverse)));margin-left:calc(2rem * calc(1 - 0));margin-left:calc(2rem * calc(1 - var(--tw-space-x-reverse)))}

.md\:space-y-0 > :not([hidden]) ~ :not([hidden]){--tw-space-y-reverse:0;margin-top:calc(0px * (1 - 0));margin-top:calc(0px * (1 - var(--tw-space-y-reverse)));margin-top:calc(0px * calc(1 - 0));margin-top:calc(0px * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(0px * 0);margin-bottom:calc(0px * var(--tw-space-y-reverse))}

.md\:bg-transparent{background-color:transparent}

.md\:p-24{padding:6rem}

.md\:px-24{padding-left:6rem;padding-right:6rem}

.md\:px-8{padding-left:2rem;padding-right:2rem}}

@media (min-width: 1024px){

.lg\:flex{display:flex}

.lg\:hidden{display:none}

.lg\:w-3\/12{width:25%}

.lg\:text-6xl{font-size:4rem}}

@media (min-width: 1280px){

.xl\:text-\[7rem\]{font-size:7rem}}

@media (min-width: 1536px){

.\32xl\:max-h-\[70vh\]{max-height:70vh}}