/* Forms */





/* Buttons */












































.content-wrapper {
  max-width: 1280px;
}

.dnd-section {
  padding-top: 120px;
  padding-bottom: 120px;  
}

@media (max-width: 767px) {
  .dnd-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.dnd-section > .row-fluid {
  max-width: 1280px;
}

.body-container-wrapper {
  background-color: rgba(255, 255, 255, 1.0);
}

.body-container .dnd-section:nth-child(odd) {
  
  background-color: rgba(248, 250, 252, 1.0);
  
}






html {
  font-size: 20px;
}

body {
  color: #002E51;
  font-family: Manrope;
  font-size: 20px;
}

p {
  font-family: Manrope;
}

a {
  color: #0270e0;
}

a:hover,
a:focus {
  color: #0048b8;
}

a:active {
  color: #2a98ff;
}

h1 {
  
  color: #494a52;
  font-family: Manrope;
  font-size: 50px;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

@media(max-width: 1150px) {
  h1 {
    font-size: 42.5px;
  }
}

h2 {
  color: #494a52;
  font-family: Manrope;
  font-size: 38px;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

@media(max-width: 1150px) {
  h2 {
    font-size: 32.3px;
  }
}

h3 {
  color: #002E51;
  font-family: Manrope;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

@media(max-width: 1150px) {
  h3 {
    font-size: 25.5px;
  }
}

h4 {
  color: #002E51;
  font-family: Manrope;
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

@media(max-width: 1150px) {
  h4 {
    font-size: 20.4px;
  }
}

h5 {
  color: #002E51;
  font-family: Manrope;
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

h6 {
  color: #002E51;
  font-family: Manrope;
  font-size: 14px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}

blockquote {
  border-left: 10px solid #002E51;;
}






.form--style-1 form {
  padding: 40px;
  background: #FFFFFF;
}

@media (min-width: 1150px) {
  .form--style-1 {
    margin-left: 80px;
  }
}

@media (max-width: 1150px) {
  .form--style-1 form {
    padding: 20px;
  }
}

@media (max-width: 1150px) {
  .form--style-1 form {
    padding: 20px;
  }
}


.form--style-1 h3 {  
  color: rgba(0, 46, 81, 1.0);  
  padding: 20px;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
  background-color: rgba(255, 255, 255, 1.0);
}

form,
.submitted-message {
  border-color: rgba(0, 46, 81, 1.0) ;
  font-family: Manrope;
}

/* Form Submit Button Styles */



  form input[type=submit],
  form .hs-button {
    font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
    background-color: 

  
  
    
  


  rgba(190, 48, 48, 1.0)

;
    border: 2px solid #be3030;
    border-radius: 50px;
    color: #FFFFFF;
    fill: #FFFFFF;
    padding: 20px 48px;
    text-transform: none;
  }

  form input[type=submit]:hover,
  form input[type=submit]:focus,
  form .hs-button:hover,
  form .hs-button:focus {
    font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
    background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.01)

;
    border: 2px solid #be3030;
    color: #be3030;
  }

  form input[type=submit]:active,
  form .hs-button:active {
    font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
    background-color: rgba(255, 255, 255, 1);
    border: 2px solid #be3030;
    border-color: #ff8080;
}





  form input[type=submit],
  form .hs-button {
    font-size: 16px;
    padding: 20px 48px;
  }











/* Primary Button */

button,
.button {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(190, 48, 48, 1.0)

;
  border: 2px solid #be3030;
  border-radius: 50px;
  color: #FFFFFF;
  fill: #FFFFFF;
  font-size: 16px;
  padding: 20px 48px;
  text-transform: none;
}

button:disabled,
.button:disabled {
  background-color: ;
  color: ;
}

button:hover,
button:focus,
.button:hover,
.button:focus,
button:active,
.button:active {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(255, 255, 255, 0.01)

;
  border: 2px solid #be3030;
  color: #be3030;
  fill: #be3030;
}

button:active,
.button:active {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: rgba(255, 255, 255, 1);
  background-color: #ffffff;
  border: 2px solid #be3030;
  border-color: #ff8080;
}

/* Secondary Button */

.button.button--secondary {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(190, 48, 48, 0.0)

;
  border: 2px solid #be3030;
  border-radius: 50px;
  color: #be3030;
  fill: #be3030;
  padding: 20px 48px;
  text-transform: none;
}

.button.button--secondary:hover,
.button.button--secondary:focus,
.button.button--secondary:active {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: 

  
  
    
  


  rgba(190, 48, 48, 1)

;
  border: 2px solid #be3030;
  color: #FFFFFF;
  fill: #FFFFFF;
}

.button.button--secondary:active {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: 800; text-decoration: none;
  background-color: rgba(255, 128, 128, );
  border: 2px solid #be3030;
  border-color: #ff8080;
  color: #ffffff;
  fill: #ffffff;
}

/* Simple Button */

.button.button--simple {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  color: #002E51 !important;
  fill: #002E51 !important;
  text-transform: none;
}



  .button.button--simple:after {
    content: none;
  }



.button.button--simple:hover,
.button.button--simple:focus {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  border: none;
  color: #1E90FF !important;
  fill: #1E90FF !important;
}



  .button.button--simple:hover:after,
  .button.button--simple:focus:after,
  .button.button--simple:active:after {
    content: none;
  }



.button.button--simple:active {
  font-family: Manrope, sans-serif; font-style: normal; font-weight: normal; text-decoration: none;
  border: none;
  color: #6ee0ff;
  fill: #6ee0ff;
}

/* Button Sizing */

.button.button--small {
  font-size: 14px;
  padding: 18px 40px;
}

.button.button--large {
  font-size: 18px;
  padding: 20px 48px;
}

form label {
  color: rgba(0, 46, 81, 1.0);
}

form legend {
  color: rgba(0, 46, 81, 1.0);
}

form input,
form .hs-input,
form select,
form textarea {
  border-color: rgba(231, 234, 243);
  color: #002E51;
}

form input:focus,
form .hs-input:focus,
form select:focus,
form textarea:focus {
  border-color: rgba(0, 46, 81, 1.0);
}

.fn-date-picker .pika-table thead th {
  color: rgba(255, 255, 255, 0.0);
}

.hs-input:-moz-placeholder,
.hs-input::-webkit-input-placeholder,
.hs-field-desc,
.hs-dateinput:before,
.hs-richtext {
  color: #002E51;
}

.hs-richtext {
  font-size: 20px;
}

.hs-default-font-element,
.hs-main-font-element {
  font-family: Manrope;
}

.fn-date-picker td.is-today .pika-button {
  color: #002E51;
}

.fn-date-picker td.is-selected .pika-button {
  background: #be3030;
}

.fn-date-picker td .pika-button:hover {
  background-color: #be3030 !important;
}





th,
td {
  background-color: rgba(255, 255, 255, 1.0);
  border: 1px solid rgba(0, 46, 81, 1.0);
  color: rgba(0, 46, 81, 1.0);
}

thead th,
thead td {
  background-color: rgba(0, 46, 81, 1.0);
  color: rgba(255, 255, 255, 1.0);
}

tfoot td {
  background-color: rgba(255, 255, 255, 1.0);
  color: rgba(0, 46, 81, 1.0);
}

table,
tbody + tbody {
  border-color: rgba(0, 46, 81, 1.0);
}





.header {
  background-color: rgba(255, 255, 255, 1.0);
}

.header__container {
  max-width: 1280px;
  padding-top: 20px;
  padding-bottom: 20px;
}

body .navigation-primary a,
.header__logo .logo-company-name,
.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  color: rgba(0, 46, 81, 1.0);
}

body .navigation-primary a:hover,
body .navigation-primary a:focus,
.header__language-switcher-label-current:hover,
.header__language-switcher-label-current:focus,
.header__language-switcher .lang_list_class li:hover a,
.header__language-switcher .lang_list_class li a:focus {
  color: rgba(0, 6, 41, 1.0);
}

body .navigation-primary a:active,
body .header__language-switcher-label-current:active,
body .header__language-switcher .lang_list_class li a:active {
  color: rgba(40, 86, 121, 1.0);
}

body .navigation-primary .submenu.level-1 > li > a.active-item:after {
  background-color: #002E51;
}


body .submenu.level-1,
body .submenu.level-2,
body .header__language-switcher .lang_list_class,
.header__cta--mobile {
  background-color: rgba(255, 255, 255, 1.0);
}

body .submenu.level-2 {
  box-shadow: 0 2px 9px 0 rgba(69, 69, 69, 0.2);
  -webkit-box-shadow: 0 2px 9px 0 rgba(69, 69, 69, 0.2);
}

body .submenu.level-2 > li:last-of-type {
  border-bottom: none;
}

.header__language-switcher .lang_list_class:after, .lang_list_class:before {
  display: none !important;
}

.header__language-switcher-label-current,
.header__language-switcher .lang_list_class li a {
  font-family: Manrope;
}

.header__language-switcher--toggle:before {
  color: rgba(0, 46, 81, 1.0);
}

.header__language-switcher-label-current:after {
  border-top-color: rgba(0, 46, 81, 1.0);
}

body .header__navigation--toggle {
  display: none;
  color: rgba(0, 46, 81, 1.0);
}

.header__navigation.open {
  background-color: rgba(255, 255, 255, 1.0);
}

body .header__search--toggle {
  color: rgba(0, 46, 81, 1.0);
}

body .header__menu {
  display: block
}

body .header__search--wrapper {
  display: none
}


  .header__cta.header__cta--main {
    display: none;
  }



  .header__cta.header__cta--secondary {
    display: none;
  }


body .header__search.open {
  background-color: rgba(255, 255, 255, 1.0);
}

body .menu-arrow-bg {
  color: rgba(0, 46, 81, 1.0);
}

@media (min-width: 1150px) {
  
  body .submenu.level-2 > li,
  .header__language-switcher .lang_list_class li {
    border-bottom: 1px solid rgba(73, 74, 82, 1.0);
  }

  body .header.header--transparent .submenu.level-1 {
    background-color: transparent !important;
  }
}

@media (max-width: 1150px) {
  
  body .header__navigation--toggle, body .menu-arrow-bg {
    display: block;    
  }
}

@media(max-width: 767px) {
  .header__navigation {
    background-color: rgba(255, 255, 255, 1.0);
  }

  .header__navigation-toggle svg,
  .menu-arrow-bg {
    fill: red;
  }
}





.footer {
  background-color: rgba(255, 255, 255, 1.0);
}

.footer__container {
  max-width: 1280px;
  padding-top: 40px;
  padding-top: 40px;
}

.footer .social-links__icon {
  background-color: rgba(0, 46, 81, 1.0);
}

.footer .social-links__icon:hover,
.footer .social-links__icon:focus {
  background-color: rgba(0, 46, 81, 8.799999999999999);
}

.footer .social-links__icon:active {
  background-color: rgba(0, 46, 81, 1.0);
}

.footer .social-links__icon svg {
  fill: #FFFFFF;
}

.footer .social-links__icon:hover svg,
.footer .social-links__icon:focus svg,
.footer .social-links__icon:active svg {
  fill: #FFFFFF;
}






.hs-blog-listing, .hs-blog-post {
  background-color: rgba(255, 255, 255, 1.0);  
}

.blog-post__date {
  border-color: #002E51;
}

.blog-header__back a,
.blog-tag-filter__menu-link,
.blog-post__tag-link,
.blog-card__tag-link,
.blog-post__author-name,
.blog-card__title a {
  color: #002E51;
}

.blog-header__back a:hover,
.blog-card__tag-link:hover,
.blog-card__title a:hover,
.blog-tag-filter__menu-link:hover,
.blog-post__tag-link:hover,
.blog-post__author-name:hover,
.blog-card__tag-link:focus,
.blog-card__title a:focus,
.blog-tag-filter__menu-link:focus,
.blog-post__tag-link:focus,
.blog-post__author-name:focus {
  color: #000629;
}

.blog-card__tag-link:active,
.blog-card__title a:active,
.blog-tag-filter__menu-link:active,
.blog-post__tag-link:active,
.blog-post__author-name:active {
  color: #285679;
}

.blog-tag-filter__menu-link--active-item:after {
  background-color: #002E51;
}

.blog-pagination__link {
  color: #002E51;
}

.blog-pagination__link--active:after,
.blog-pagination__prev-link:after,
.blog-pagination__next-link:after {
  background-color: #002E51;
}

.blog-post__title {
  color: #494a52;
  font-family: Manrope;
  font-size: 38px;
  font-style: normal;
  font-weight: 800;
  text-decoration: none;
}

.blog-post__author {
  background-color: #002E51;
}

#comments-listing .comment-reply-to {
  color: rgba(2, 112, 224, 0.0);
}

#comments-listing .comment-reply-to:hover,
#comments-listing .comment-reply-to:focus {
  color: rgba(0, 72, 184, 0.0);
}

#comments-listing .comment-reply-to:active {
  color: rgba(42, 152, 255, 0.0);
}

.blog-index__post-content a {
  color: #494a52;
}

.blog-recent-posts__post {
  color: #494a52 !important;
}










body .icon svg {
  fill: #002E51;
}

body .tns-nav button.tns-nav-active {
  background-color: #002E51;
}

body .tns-nav button:hover,
body .tns-nav button:focus {
  background-color: #002E51;
}

body .team-member__description {
  background-color: #002E51;
}





.no-scroll {
  overflow: hidden;
}

.hidden {
  display: none;
}

.p-fixed {
  position: fixed;
}

.drop-shadow {
  box-shadow: 0px 3px 15px rgba(69, 69, 69, 0.2);
}

.transition-3d-hover {
  transition: all 0.2s ease-in-out;
}

.transition-3d-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0px 10px 40px 10px rgba(69, 69, 69, 0.2);
}

.shadow-lg {
    box-shadow: 0px 3px 15px rgba(140, 152, 164, 0.2);
}

.shadow-dark {
  box-shadow: 0px 3px 15px rgb(181, 181, 181);
}

.no-shadow {
  box-shadow: initial !important;
}

.auto-margin {
  margin: 0 auto;
}

img {
  max-width: 100%;
}

.header-max-width {
  max-width: 800px;
}

.card {
  position: relative;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: rgba(255, 255, 255, 1.0);
  background-clip: border-box;
}

.text-subheader {
  opacity: 0.7;
}

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

.text-cap {
  text-transform: uppercase;
}

.text-small {
  font-size: 0.8rem;
}

.text-bold {
  font-weight: bold;
}

.image--rounded {
  border-radius: 50%;
}

.module-library__header {
  max-width: 800px;
  padding: 100px 20px 20px 100px;
}

.module-library__header h2 {
  font-size: 24px;
}

.module-library__header p {
  font-size: 0.9rem;
}







/* ======================================================================
   AUTOGEAR (ag-) – Utilities + components (SINGLE SOURCE OF TRUTH)
   Replace your existing AUTOGEAR block with everything below.
====================================================================== */

:root{
  /* Text */
  --ag-text: #0f172a;
  --ag-text-color: hsl(220 15% 22%);
  --ag-title-color: hsl(220 20% 28%);
  --ag-lead-color:  hsl(220 10% 45%);

  /* Borders / surfaces */
  --ag-border: hsla(220, 15%, 88%, 0.8);
  --ag-card: #ffffff;
  --ag-card-soft: hsl(220 20% 97%);
  --ag-surface: #eef2ff;      /* badge bg */
  --ag-icon-surface: hsla(230, 70%, 60%, 0.10);

  /* Layout tokens */
  --ag-gutter: 24px;
  --ag-container: 980px;
  --ag-container-wide: 1120px;
  --ag-container-hero: 1200px;

  /* Gradients */
  --ag-grad-1: #35376D;
  --ag-grad-2: #4C67C9;
  
  /* Brand */
  --ag-brand: #2f5bff;
}


@media (max-width: 767px){
  :root{ --ag-gutter: 16px; }
}

/* =========================
   Wrapper utilities
========================= */
.ag-wrap{
  width: min(var(--ag-container), calc(100% - (var(--ag-gutter) * 2)));
  margin-inline: auto;
}
.ag-wrap--wide{
  width: min(var(--ag-container-wide), calc(100% - (var(--ag-gutter) * 2)));
  margin-inline: auto;
}
.ag-wrap--hero{
  width: min(var(--ag-container-hero), calc(100% - (var(--ag-gutter) * 2)));
  margin-inline: auto;
}

/* =========================
   Layout
========================= */
.ag-section{
  padding: 6rem 0;
  background: #ffffff;
}
.ag-section--alt{
  background: var(--section-alt, hsl(220 15% 96%));
}
@media (max-width: 767px){
  .ag-section{ padding: 72px 0; }
}

.ag-container{
  max-width: var(--ag-container);
  margin: 0 auto;
  padding: 0 var(--ag-gutter);
}
.ag-container--wide{
  max-width: var(--ag-container-wide);
}

.ag-center{ text-align: center; }
.ag-left{ text-align: left; }

/* spacing utilities */
.ag-mb-8  { margin-bottom: .5rem; }
.ag-mb-12 { margin-bottom: .85rem; }
.ag-mb-16 { margin-bottom: 1rem !important; }
.ag-mb-20 { margin-bottom: 1.25rem; }
.ag-mb-24 { margin-bottom: 1.5rem !important; }
.ag-mb-32 { margin-bottom: 2rem; }

/* =========================
   Typography utilities
========================= */
.ag-title{
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ag-title-color);
}
.ag-h1{ font-size: clamp(2.25rem, 4.2vw, 3.2rem); }
.ag-h2{
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  line-height: 1.2;
}

.ag-lead{
  margin: 0;
  color: var(--ag-lead-color);
  line-height: 1.7;
  font-size: 1.0625rem;
  max-width: 56ch;
}
.ag-muted{ color: var(--ag-lead-color) !important; }

/* Gradient text – alias */
.text-gradient,
.ag-text-gradient,
.ag-title-gradient{
  display: inline-block;
  background: linear-gradient(135deg, #35376D 0%, #3F4BA3 45%, #4C67C9 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #35376D;
}


/* =========================
   AG Buttons (global)
   Extracted from hero
========================= */

.ag-button{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;

  padding: .9rem 1.45rem;
  border-radius: .75rem;

  font-weight: 600;
  font-family: "Space Grotesk", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1;

  text-decoration: none !important;

  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;

  transition:
    transform .18s ease,
    box-shadow .25s ease,
    filter .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.ag-button:focus{ outline: none; }

.ag-button:focus-visible{
  outline: 2px solid hsl(210 90% 65% / .9);
  outline-offset: 3px;
}

/* =========================
   Primary
========================= */

a.ag-button.ag-button--primary,
button.ag-button.ag-button--primary{
  color:#fff !important;

  /* force same gradient as titles */
  background: linear-gradient(135deg, var(--ag-grad-1) 0%, #3F4BA3 45%, var(--ag-grad-2) 100%) !important;
  background-color: transparent !important;
  background-image: linear-gradient(135deg, var(--ag-grad-1) 0%, #3F4BA3 45%, var(--ag-grad-2) 100%) !important;

  border-color: transparent !important;

  box-shadow:
    0 8px 20px rgba(15,23,42,0.18),
    0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

a.ag-button.ag-button--primary:hover,
button.ag-button.ag-button--primary:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.03);
  box-shadow:
    0 14px 35px rgba(76,103,201,0.22),
    0 10px 24px rgba(53,55,109,0.14),
    0 0 0 1px rgba(255,255,255,0.10) inset !important;
}

a.ag-button.ag-button--primary:active,
button.ag-button.ag-button--primary:active{
  transform: translateY(0);
  filter: brightness(.98);
}

/* subtle glow under primary button */

.ag-button--primary::after{
  content:"";
  position:absolute;
  inset:0;

  border-radius:inherit;

  background: linear-gradient(
    135deg,
    var(--ag-grad-1),
    var(--ag-grad-2)
  );

  opacity:.22;
  filter: blur(16px);

  z-index:-1;

  transition: opacity .25s ease;
}

.ag-button--primary:hover::after{
  opacity:.32;
}






/* =========================
   CTA spacing tweaks
========================= */
.ag-cta__actions{
  display:flex;
  justify-content:center;
  margin-top: 1.75rem;
}

.ag-cta__tagline{
  margin-top: 1.25rem;   /* mer luft under knappen */
  line-height: 1.6;
}

/* =========================
   Outline
========================= */

.ag-button--outline{
  color: var(--ag-text, #0f172a);
  background: transparent;
  border-color: var(--ag-border, rgba(0,0,0,0.15));

  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.ag-button--outline:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.18);
}

.ag-button--outline:active{
  transform: translateY(0);
}

/* =========================
   AG Button — Outline (dark / glass)
   Used on dark backgrounds (hero)
========================= */

.ag-button--outline-dark{
  color: hsl(0 0% 100% / 0.92) !important;
  background: hsl(0 0% 100% / 0.04);

border: 1px solid hsl(0 0% 100% / 0.32);
  border-radius: .75rem;

  backdrop-filter: blur(6px);

  text-decoration: none;

  box-shadow:
    0 10px 24px hsl(220 40% 2% / 0.25),
    0 0 0 1px hsl(0 0% 100% / 0.04) inset;
}

.ag-button--outline-dark:hover{
  transform: translateY(-1px);

  background: hsl(0 0% 100% / 0.07);
  border-color: hsl(0 0% 100% / 0.45);

  color:#fff !important;

  box-shadow:
    0 14px 30px hsl(220 40% 2% / 0.30),
    0 0 0 1px hsl(0 0% 100% / 0.08) inset;
}

.ag-button--outline-dark:active{
  transform: translateY(0);
}

/* =========================
   Sizes
========================= */

.ag-button--sm{
  padding: .6rem 1rem;
  font-size: .9rem;
}

.ag-button--lg{
  padding: 1.1rem 1.75rem;
  font-size: 1.05rem;
}

/* =========================
   CTA layout
========================= */

.ag-cta__inner{
  max-width: 760px;
  margin-inline: auto;
}

.ag-cta__actions{
  margin-top: 1.75rem;
  display: flex;
  justify-content: center;
}
.ag-cta__tagline{
  margin-top: .9rem;
  font-size: .9rem;
  color: var(--ag-lead-color, rgba(0,0,0,0.6));
}





/* =========================
   Section title helper (optional)
========================= */
.ag-section-title{
  margin-bottom: 1.25rem;
}
.ag-section-title.ag-center{
  max-width: 70ch;
  margin-inline: auto;
}

/* =========================
   Badge / pill
========================= */
.ag-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.45rem 1rem;
  border-radius:999px;
  font-weight:700;
  font-size:.8125rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:1px solid var(--ag-border);
  background: var(--ag-card);
  color: var(--ag-title-color);
}

.ag-badge--soft{
  background: var(--ag-surface);
  border-color: transparent;
  color: #1e2b7b;
}

.ag-badge--on-dark{
  background: hsl(0 0% 100% / 0.10);
  border-color: hsl(0 0% 100% / 0.12);
  color: hsl(0 0% 100% / 0.92);
}
}
.ag-badge svg{ width: 16px; height: 16px; }

/* =========================
   Icon boxes (sm / md / lg)
========================= */
.ag-icon-box--sm,
.ag-icon-box--md,
.ag-icon-box--lg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.75rem;
  background: var(--ag-icon-surface);
}

.ag-icon-box--sm{ width: 2.5rem; height: 2.5rem; } /* 40px */
.ag-icon-box--md{ width: 3rem;   height: 3rem;   } /* 48px */
.ag-icon-box--lg{ width: 3.5rem; height: 3.5rem; } /* 56px */

.ag-icon-box--sm svg{ width: 1.25rem; height: 1.25rem; }
.ag-icon-box--md svg{ width: 1.5rem;  height: 1.5rem;  }
.ag-icon-box--lg svg{ width: 1.75rem; height: 1.75rem; }

.ag-icon-box--sm svg,
.ag-icon-box--md svg,
.ag-icon-box--lg svg{
  display: block;
  color: var(--primary, #2C3E8F);
}

/* =========================
   Card base (scoped)
========================= */
.ag-card{
  background: var(--ag-card);
  border: 1px solid var(--ag-border);
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

/* =========================
   Challenge (Utfordringen)
========================= */
.ag-challenge-grid{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 4rem;
  align-items: start;
}
.ag-challenge-grid .ag-title.ag-h2{ margin-bottom: 1.75rem; }
.ag-challenge-grid .ag-lead.ag-mb-16{ margin-bottom: 1.25rem !important; }

@media (min-width: 1024px){
  .ag-challenge-list{ padding-top: 1.15rem; }
}

.ag-challenge-list{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ag-challenge-item{
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--ag-card);
  border: 1px solid var(--ag-border);
  border-radius: 1rem;
  padding: 1.125rem 1.25rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}
.ag-challenge-text{
  font-weight: 600;
  color: var(--ag-text-color);
  line-height: 1.25;
}

/* =========================
   Solution grid (2 col)
========================= */
.ag-solution-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Checklist */
.ag-checklist{
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  padding: 0;
}
.ag-checkitem{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--ag-text-color);
}
.ag-checkitem svg{
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  margin-top: 0.15rem;
  color: var(--primary, #2C3E8F);
}
.ag-checkitem span{
  font-weight: 300;
  line-height: 1.35;
  color: var(--ag-text);
}

/* Note */
.ag-note{
  font-size: 0.875rem;
  color: var(--ag-lead-color);
  font-style: italic;
  margin-top: 0.75rem;
}

/* Result box */
.ag-result-box{
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--ag-card-soft);
  border: 1px solid var(--ag-border);
}
.ag-result-box .label{
  color: var(--primary, #2C3E8F);
  font-weight: 700;
}

/* =========================
   Embed (always image)
========================= */
.ag-embed{
  width: 100%;
  display: block;
}
.ag-embed--alt{
  background: var(--section-alt, hsl(220 15% 96%));
}
.ag-embed .page-center{
  max-width: var(--ag-container-wide);
  margin: 0 auto;
  padding: 6rem var(--ag-gutter);
}
.ag-embed__grid{
  display: grid;
  align-items: center; /* vertikal sentrering */
  grid-template-columns: 65% 35%;
  gap: 3rem;
}
.ag-embed__left{  grid-area: left; }
.ag-embed__right{ grid-area: right; }
.ag-embed__media{
  display:block;
  width:100%;
  overflow:hidden;     /* klipper bildet */
  border-radius:16px;  /* runding */
}

.ag-embed__media img{
  display:block;
  width:100%;
  height:auto;
}

.ag-embed__media--placeholder{
  background: var(--ag-card-soft);
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ag-embed__placeholder{
  color: var(--ag-lead-color);
  font-weight: 600;
}

@media (max-width: 900px){
  .ag-embed__grid{
    grid-template-columns:1fr;
  }
}

/* supports both hyphen and underscore class names */
.ag-embed__grid--image-right{ grid-template-areas: "left right"; }
.ag-embed__grid--image-left{  grid-template-areas: "right left"; }
.ag-embed__grid--image_right{ grid-template-areas: "left right"; }
.ag-embed__grid--image_left{  grid-template-areas: "right left"; }

/* =========================
   Driver (SINGLE column by default)
========================= */
.ag-driver-grid{
  display: block;            /* <-- force single column */
  max-width: 640px;
}
.ag-driver-media{ margin-top: 2rem; }

.ag-feature-list{
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
}
.ag-feature{
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.ag-feature__text{ flex: 1; min-width: 0; }

.ag-feature__title{
  margin: 0 0 .25rem;
  font-weight: 700;
  color: var(--ag-text);
  line-height: 1.2;
}
.ag-feature__desc{
  margin: 0;
  color: var(--ag-lead-color);
  line-height: 1.5;
}

.ag-driver-media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 1.25rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
}


.ag-driver .ag-driver__grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.ag-driver .ag-driver__features{
  display:grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.ag-driver .ag-driver__feature{
  display:flex;
  gap: 1rem;
  align-items:flex-start;
  padding: 1rem 1.1rem;
 /*   border: 1px solid var(--ag-border);
  border-radius: 1rem;
 background: hsl(0 0% 100% / 0.55);*/
  backdrop-filter: blur(6px);
}

.ag-driver .ag-icon-box{
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: hsla(230, 70%, 60%, 0.10);
  color: var(--primary, #2C3E8F);
  flex: 0 0 auto;
}

.ag-driver .ag-driver__feature-title{
  margin: 0 0 .25rem 0;
  font-size: 1.05rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ag-text);
  font-weight: 700;
}

.ag-driver .ag-driver__feature-text{
  margin: 0;
  color: var(--ag-lead-color);
  line-height: 1.55;
}

.ag-driver .ag-driver__result{
  display:flex;
  gap: .5rem;
  align-items: baseline;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  border: 1px solid var(--ag-border);
  background: hsl(220 15% 96%);
}

.ag-driver .ag-driver__result-label{
  font-weight: 700;
  color: var(--ag-text);
}

.ag-driver .ag-driver__media{
  display:flex;
  justify-content:center;
}

.ag-driver .ag-driver__media-placeholder{
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
  border: 1px solid var(--ag-border);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--ag-lead-color);
}

/* Responsive */
@media (max-width: 900px){
  .ag-driver .ag-driver__grid{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .ag-driver .ag-driver__media{
    order: -1;
  }
}




/* =========================
   Benefits (ag-)
========================= */
.ag-benefits-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

.ag-benefit-card{
  background: transparent;
  border: 1px solid var(--ag-border);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.ag-benefit-card .ag-icon-box--lg{
  border-radius: 999px;
  width: 4.25rem;
  height: 4.25rem;
  background: hsla(230, 70%, 60%, 0.12);
}
.ag-benefit-card .ag-icon-box--lg svg{
  width: 1.5rem;
  height: 1.5rem;
}

.ag-benefit-text{
  margin: 0;
  font-weight: 500;
  color: var(--ag-text-color);
  line-height: 1.35;
}

/* =========================
   Docs (ag-)
========================= */
.ag-docs-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.ag-doc-card{
  background: transparent;
  border: 1px solid var(--ag-border);
  border-radius: 1rem;
  padding: 2rem 1.75rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.ag-doc-card .ag-icon-box--md{
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
}

.ag-doc-card h3{
  margin: 0 0 .75rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ag-text);
}

.ag-doc-card p{
  margin: 0;
  color: var(--ag-lead-color);
  line-height: 1.6;
}

/* =========================
   Quote (ag-)
========================= */
.ag-quote{
  padding: 0;
}
.ag-quote-card{
  max-width: 980px;
  margin: 0 auto;
  padding: 3.25rem 3rem;
  border-radius: 1.25rem;
  border: 1px solid var(--ag-border);
  background: hsla(220, 20%, 98%, 0.9);
}

.ag-quote-mark{
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
  opacity: 0.35;
}

.ag-quote-body{
  margin: 0;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.6;
  color: var(--ag-text);
  text-align: center;
}

.ag-quote-accent{
  width: 10px;
  border-radius: 99px;
  background: var(--ag-text);
  opacity: 0.9;
}

.ag-quote-footer{
  margin-top: 2rem;
  text-align: center;
}
.ag-quote-name{
  margin: 0;
  font-weight: 700;
  color: var(--ag-text);
}
.ag-quote-meta{
  margin: .5rem 0 0;
  color: var(--ag-lead-color);
}

/* =========================
   CTA (ag-)
========================= */
.ag-cta{
  text-align: center;
  position: relative;
}
.ag-cta-inner{
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem var(--ag-gutter);
}
.ag-cta-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: hsla(230, 70%, 60%, 0.12);
  margin-bottom: 1rem;
}
.ag-cta h2{
  margin: 0 0 .75rem;
}
.ag-cta p{
  margin: 0 auto 1.5rem;
  max-width: 60ch;
  color: var(--ag-lead-color);
  line-height: 1.7;
}
.ag-cta .button,
.ag-cta .btn,
.ag-cta button{
  border-radius: 0.875rem;
  padding: 14px 22px;
}
.ag-cta .ag-cta-sub{
  margin-top: 1.25rem;
  font-weight: 700;
  color: var(--primary, #2C3E8F);
}



/* Responsive for benefits/docs */
@media (max-width: 1024px){
  .ag-challenge-grid,
  .ag-solution-grid,
  .ag-embed__grid{
    grid-template-columns: 1fr;
  }
  .benefits-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .docs-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .benefits-grid{ grid-template-columns: 1fr; }
  .docs-grid{ grid-template-columns: 1fr; }
  .ag-embed .page-center{ padding: 4rem var(--ag-gutter); }
}


/* =========================
   BENEFITS (ag-)
   Matches desired layout (centered title + 5 cards row)
========================= */

.ag-section--alt{
  background: var(--section-alt, hsl(220 15% 96%));
}

/* section title (if not already defined elsewhere) */
.ag-section-title{
  max-width: 72ch;
  margin-inline: auto;
}
.ag-section-title .ag-title{ margin: 0; }
.ag-section-title .ag-lead{ margin-top: .75rem; }

/* grid */
.ag-benefits-grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}

/* card */
.ag-benefit-card{
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--ag-border);
  border-radius: 1.25rem;
  padding: 1.75rem 1.25rem;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 180px;
}

/* make icon look like the reference (circle) without changing global icon-box */
.ag-benefit-card .ag-icon-box--lg{
  width: 3.75rem;  /* 60px */
  height: 3.75rem; /* 60px */
  border-radius: 999px;
  background: hsla(230, 70%, 60%, 0.10);
}
.ag-benefit-card .ag-icon-box--lg svg{
  width: 1.5rem;
  height: 1.5rem;
  color: var(--primary, #2C3E8F);
}

/* text */
.ag-benefit-text{
  margin: 1rem 0 0;
  font-weight: 600;
  color: var(--ag-text-color);
  line-height: 1.35;
  max-width: 22ch;
}

/* responsive */
@media (max-width: 1100px){
  .ag-benefits-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px){
  .ag-benefits-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .ag-benefits-grid{ grid-template-columns: 1fr; }
  .ag-benefit-card{ min-height: 0; }
}

/* =========================
   Docs (ag-)
========================= */

.ag-docs-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(260px,1fr));
  gap:1.75rem;
  justify-content:center;
}

@media (max-width:1100px){
  .ag-docs-grid{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .ag-docs-grid{ grid-template-columns:1fr; }
}

/* card */

.ag-doc-card{
  background:#f6f7fb;
  border:1px solid var(--ag-border);
  border-radius:1.25rem;
  padding:2.25rem 2rem;
}

/* icon */

.ag-doc-card .ag-icon-box--md{
  width:3.25rem;
  height:3.25rem;
  border-radius:.85rem;
  background:rgba(44,62,143,.12);

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:1.25rem;
}

.ag-doc-card .ag-icon-box--md svg{
  width:20px;
  height:20px;
  color:var(--primary);
}

/* text */

.ag-doc-card__title{
  font-size:1.6rem;
  font-weight:700;
  line-height:1.2;
  margin:0 0 .75rem;
  letter-spacing:-.02em;
}

.ag-doc-card__desc{
  color:var(--ag-lead-color);
  line-height:1.6;
}


/* =========================
   Testimonial (ag-)
========================= */

.ag-testimonial{
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 3rem;

  border-radius: 1.25rem;
  border: 1px solid var(--ag-border);

  background: var(--ag-card);
  box-shadow: 0 20px 48px rgba(15,23,42,.06);

  text-align: center;
}

.ag-testimonial__icon{
  display:block;
  margin:0 auto 1.25rem;
  color: rgba(99,102,241,.6);
}

.ag-testimonial__quote{
  position:relative;

  margin:0 auto 1.75rem;
  padding-left:1rem;

  max-width:68ch;

  border-left:6px solid #1e293b;

  font-size:1.25rem;
  line-height:1.7;
  font-weight:500;

  color:var(--ag-text);
}

.ag-testimonial__name{
  margin:0;
  font-weight:700;
  font-size:1.1rem;
}

.ag-testimonial__role{
  margin:.35rem 0 0;
  color:var(--ag-lead-color);
}

/* responsive */

@media (max-width:768px){

  .ag-testimonial{
    padding:2rem 1.5rem;
  }

  .ag-testimonial__quote{
    font-size:1.1rem;
  }