:root{
      --black:#1B1B1B;
      --navy:#010054;
      --blue:#010054;
      --lightgray:#F5F5F5;
      --yellow:#FF9C00;
      --accent:#018A9C;

      --hero-blue:#010054;

      /* accent borders */
      --yellow-border:#cc7d00;
      --accent-border:#018A9C;

      /* accent hover */
      --yellow-hover:#e68c00;
      --accent-hover:#018A9C;

      /* ✅ global radius = 4px */
      --radius: 4px;

      --container: 1120px;

      --h1: clamp(34px, 3vw, 50px);
      --h1-lh: 1.06;
      --body: 15px;
      --body-lh: 1.55;
      --meta: 13px;
      --meta-lh: 1.35;

      --hero-pad: 66px;
    }

    *{ box-sizing:border-box; }
    html{ min-height:100%; }
    body{ min-height:100vh; height:auto; }
    body{
      margin:0;
      font-family:"Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      font-weight: 300;
      font-size:var(--body);
      line-height:var(--body-lh);
      color:var(--black);
      background:#fff;
    }

    h1,h2,h3,h4,h5,h6{ font-weight:700; color:var(--blue); margin:0 0 10px 0; }
    h1{ font-size:var(--h1); line-height:var(--h1-lh); letter-spacing:-0.02em; }
    p{ margin:0 0 14px 0; }
    a{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }

    .container{ max-width:var(--container); margin:0 auto; padding:0 18px; }

    /* Sticky header: shift only the ticker out of view on scroll. */
    .stickywrap{
      position: sticky;
      top: calc(-1 * var(--roimon-ticker-height, 42px));
      z-index: 200;
    }
    .navbar{ position:relative; z-index:80; }

    .benefitbar{ background: var(--accent); color:#fff; }
    .benefitbar-inner{
      display:none; align-items:center; justify-content:center;
      gap:22px; padding:10px 0;
      font-size:14px; line-height:1; white-space:nowrap;
    }
    .benefit{ display:flex; align-items:center; gap:8px; opacity:.98; }
    .check{ width:16px; height:16px; display:inline-block; flex:0 0 16px; }
    .check svg{ display:block; width:100%; height:100%; }

    /* Responsive, continuous benefit ticker. JS controls the movement on modern
       browsers; this single CSS animation is a fallback if JS is delayed. */
    .ticker {
      display: block;
      width: 100%;
      overflow: hidden;
    }
    .ticker-track {
      display: flex;
      width: max-content;
      align-items: center;
      animation: roimon-ticker-scroll var(--roimon-ticker-duration, 120s) linear infinite;
      will-change: transform;
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
    .ticker-track.is-js-controlled {
      animation: none;
      -webkit-animation: none;
    }
    .ticker-group {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 26px;
      padding: 10px 26px 10px 0;
      white-space: nowrap;
    }
    .ticker-group .benefit { flex: 0 0 auto; }
    @keyframes roimon-ticker-scroll {
      from { transform: translate3d(0,0,0); }
      to { transform: translate3d(-50%,0,0); }
    }
    /* Reduced motion stays gentle rather than becoming a frozen ticker.
       When JS runs, it sets the reduced speed to 12px per second. */
    @media (prefers-reduced-motion: reduce) {
      .ticker-track:not(.is-js-controlled) { animation-duration: 180s; }
    }
    .logo-text[hidden]{display:none!important}
    .logo-text{font-size:20px;font-weight:700;color:#fff;white-space:nowrap}
    @media (max-width: 680px){
      .benefitbar-inner{ display:none; }
      .ticker{ display:block; }
      .ticker .container{ padding:0 10px; }
    }

    .navbar{
      background: var(--blue);
      color:#fff;
      border-bottom: 0.5px solid rgba(255,255,255,.50);
    }
    .nav-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap:14px; padding:12px 0;
    }

    .brand{ display:flex; align-items:center; min-width:220px; }
    .logo{ display:flex; align-items:center; color:#fff; text-decoration:none; }
    .logo-img{
      height: 56px; /* ✅ 2x */
      width:auto;
      display:block;
      filter: brightness(0) invert(1);
    }

    .menu{
      display:flex; align-items:center; gap:18px;
      margin:0 8px; padding:0; list-style:none; flex:1;
    }
    .menu a{
      color:#fff; text-decoration:none;
      font-weight:500;
      font-size:14px; opacity:.95;
    }
    .menu a:hover{ opacity:1; text-decoration:underline; text-underline-offset:3px; }

/* === Mega menu (from compare_v26) === */
@media (min-width: 981px){
      /* Ensure mega menu positions relative to the full-width navbar, not the <li> */
      .navbar{
        position: relative;
        overflow: visible;
        z-index: 80;
      }
      .menu > li.has-mega{ position: static; }

      .menu > li.has-mega > a::after{
        content:"▾";
        font-size: 12px;
        opacity:.85;
        margin-left: 8px;
        transform: translateY(-1px);
        display:inline-block;
      }

      .mega-overlay{
        position: absolute;          /* sit under navbar */
        left: 0;
        right: 0;
        top: calc(100% - 1px);
        background: var(--blue);
        color: #fff;
        padding: 12px 0 16px 0;
        box-shadow:none;
        opacity: 0;
        pointer-events: none;
        z-index: 70;
        transition: opacity .15s ease;
      }

      .has-mega:hover .mega-overlay,
      .has-mega:focus-within .mega-overlay,
      .has-mega.is-open .mega-overlay{
        opacity: 1;
        pointer-events: auto;
      }

      .mega-cols{
        display:grid;
        grid-template-columns: 300px 1fr 330px;
        gap: 18px;
        padding: 0;                  /* container already has padding; align with logo */
        align-items:start;
      }

      .mega-cats{
        border-right: 1px solid rgba(255,255,255,.18);
        padding-right: 16px;
      }

      /* Left menu: outline only on hover (0.5px), 4px radius */
      .mega-cat{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding: 11px 12px;
        border: 0.5px solid transparent;
        background: transparent;
        color:#fff;
        border-radius: 4px;
        font-weight: 500;
        font-size: 14px;
        cursor:pointer;
        text-align:left;
      }
      .mega-cat + .mega-cat{ margin-top: 8px; }

      .mega-cat:hover{
        border-color: rgba(255,255,255,.95);
        background: transparent;
      }

      /* Active: subtle background cue only (NO vertical bar) */
      .mega-cat.is-active{
        background: rgba(255,255,255,.08);
      }

      /* Middle column: no heading block */
      .mega-main-head{ display:none; }

      .mega-panel{ display:none; }
      .mega-panel.is-active{ display:block; }

      .mega-item{
        display:block;
        text-decoration:none;
        color:#fff;
        padding: 10px 10px;
        border-radius: 4px;
      }
      .mega-item + .mega-item{ margin-top: 8px; }
      .mega-item:hover{ background: rgba(255,255,255,.08); }

      .mega-item strong{
        display:block;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
      }
      .mega-item span{
        display:block;
        font-size: 12px;
        line-height: 1.35;
        color: rgba(255,255,255,.82);
        font-weight: 400;
      }

      .mega-actions{
        border-left: 1px solid rgba(255,255,255,.18);
        padding-left: 16px;
      }
      .mega-actions-panel{ display:none; }
      .mega-actions-panel.is-active{
        display:flex;
        flex-direction:column;
        gap: 12px;
      }

      /* Right column buttons: 0.5px outline + 4px radius */
      .mega-tile{
        display:flex;
        align-items:center;
        gap: 12px;
        padding: 14px 14px;
        border-radius: 4px;
        border: 0.5px solid rgba(255,255,255,.40);
        background: rgba(255,255,255,.02);
        text-decoration:none;
        color:#fff;
        min-height: 56px;
      }
      .mega-tile:hover{ background: rgba(255,255,255,.08); }

      .mega-ico{
        width: 38px;
        height: 38px;
        border-radius: 4px;
        display:flex;
        align-items:center;
        justify-content:center;
        background: rgba(255,255,255,.06);
        flex: 0 0 38px;
      }
      .mega-ico svg{ width: 22px; height: 22px; color:#fff; }
      .mega-txt{
        font-weight: 500;
        font-size: 14px;
        letter-spacing: -0.01em;
      }
    }

@media (max-width: 980px){
      .mega-overlay{ display:none !important; }
    }

@media (min-width: 981px){
      .mega-overlay,
      .mega-overlay *{
        font-family: "Be Vietnam Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
      }
    }

@media (min-width: 981px){
      .mega-overlay{
        top: calc(100% - 1px) !important; /* remove gap under navbar */
      }
      .mega-overlay::before{
        content:"";
        position:absolute;
        top:-14px;
        left:0;
        right:0;
        height:14px; /* invisible hover bridge */
      }
    }


    .nav-right{ display:flex; align-items:center; gap:12px; }

    .nav-right .search{ position:relative; width: min(210px, 20vw); }
    .nav-right .search input{
      width:100%;
      padding:11px 42px 11px 12px;
      border-radius: var(--radius);
      border:1px solid #ffffff;
      background: rgba(3,36,86,.12);
      color:#fff;
      outline:none;
      font:inherit;
    }
    .nav-right .search input::placeholder{ color: rgba(255,255,255,.78); }
    .nav-right .search .icon{
      position:absolute; right:12px; top:50%;
      transform:translateY(-50%);
      width:18px; height:18px;
      pointer-events:none;
    }

    .lang{
      border:1px solid #ffffff;
      background: rgba(3,36,86,.12);
      color:#fff;
      border-radius: var(--radius);
      padding:10px 38px 10px 12px;
      font:inherit;
      outline:none;
      cursor:pointer;

      appearance:none;
      -webkit-appearance:none;
      -moz-appearance:none;

      background-image:
        linear-gradient(45deg, transparent 50%, #ffffff 50%),
        linear-gradient(135deg, #ffffff 50%, transparent 50%);
      background-position:
        calc(100% - 16px) 50%,
        calc(100% - 11px) 50%;
      background-size: 6px 6px, 6px 6px;
      background-repeat:no-repeat;
    }

    .hamburger{
      display:none;
      width:44px; height:44px;
      border-radius: var(--radius);
      border:1px solid rgba(255,255,255,.35);
      background: rgba(3,36,86,.10);
      cursor:pointer;
    }
    .hamburger span{
      display:block; width:20px; height:2px; background:#fff;
      margin:4px auto; border-radius:2px; opacity:.92;
    }

    @media (max-width: 980px){ .nav-right .search{ width: min(210px, 26vw); } }
    @media (max-width: 860px){ .menu{ display:none; } .nav-right .search{ width: min(240px, 48vw); } }
    @media (max-width: 760px){ .nav-right .search, .nav-right .lang{ display:none; } .hamburger{ display:block; } .brand{ min-width:unset; } }

    /* HERO */
    .hero{
      position:relative;
      background: var(--hero-blue);
      padding: var(--hero-pad) 0 var(--hero-pad) 0;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background-image: var(--hero-bg-desktop, var(--hero-bg, none));
      background-position:center;
      background-size:cover;
      background-repeat:no-repeat;
      opacity: .20; /* 80% transparent */
      pointer-events:none;
    }
    .hero > .container{ position:relative; z-index:1; }

    .hero-inner{ max-width:70%; color:#fff; }
    
    @media (max-width: 760px){
      .hero::before{
        background-image: var(--hero-bg-mobile, var(--hero-bg-desktop, var(--hero-bg, none)));
      }
    }

    @media (max-width: 720px){
      .hero-inner{ max-width: 100%; }
    }
.hero-inner h1{ color:#fff; }
    .hero-inner p{ color: rgba(255,255,255,.92); }

    .kicker{
      display:inline-flex; align-items:center; gap:8px;
      font-size:var(--meta); line-height:var(--meta-lh);
      color: rgba(255,255,255,.92);
      margin-bottom:12px;
    }
    .pill{
      background: var(--yellow);
      color: var(--black);
      border-radius: var(--radius);
      padding: 4px 10px;
      font-weight: 400;
      font-size: 12px;
      border: 0.5px solid rgba(0,0,0,.18);
    }

    .subheadline{
      font-size:18px;
      margin:0 0 18px 0;
      color: rgba(255,255,255,.92);
      max-width:58ch;
    }

    .benefits5{
      display:grid; grid-template-columns:1fr;
      gap:10px; margin:16px 0 22px 0;
      padding:0; list-style:none;
    }
    .benefits5 li{
      display:flex; align-items:flex-start; gap:10px;
      color: rgba(255,255,255,.94);
    }
    .benefits5 .check{
      color:#ffffff;
      flex:0 0 18px;
      width:18px; height:18px;
      opacity:.95;
    }

    .cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap:10px;
      padding: 15px 16px;
      border-radius: var(--radius);
      border: 0.5px solid transparent;
      font-weight: 400;
      text-decoration:none;
      line-height:1;
      cursor:pointer;
      user-select:none;
      transition: transform .08s ease, background .12s ease;
      text-transform:uppercase;
      white-space:nowrap;
    }
    /* Form submits and text-only button controls follow the same uppercase convention. */
    button:not(.btn), input[type="submit"], input[type="button"], input[type="reset"]{ text-transform:uppercase; }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{ background: var(--yellow); color: var(--black); border-color: var(--yellow-border); }
    .btn-primary:hover{ background: var(--yellow-hover); }
    .btn-secondary{ background: var(--accent); color:#fff; border-color: var(--accent-border); }
    .btn-secondary:hover{ background: var(--accent-hover); }

    /* Logo slider */
    .knownfrom{
      background:#fff;
      padding: 44px 0;
      border-bottom:1px solid rgba(27,64,121,.12);
    }
    .knownfrom-row{ display:flex; align-items:center; gap:14px; }
    .knownfrom-label{ font-size:14px; color:var(--black); white-space:nowrap; }
    .slider{ overflow:hidden; flex:1; }
    .slider-track{
      display:flex; align-items:center;
      gap: 42px;
      width:max-content;
      animation: logos 64s linear infinite; /* ✅ 2x slower */
    }
    @keyframes logos{
      0%{ transform: translateX(0); }
      100%{ transform: translateX(-50%); }
    }
    .logo-text{
      font-weight:700;
      letter-spacing:.02em;
      font-size: 28px;
      color: rgba(27,27,27,.40);
      filter: grayscale(1);
      opacity:.9;
      white-space:nowrap;
      line-height: 1;
    }

    /* ✅ New benefits section (4 cards) */
    .benefits-section{
      background:#fff;
      padding: 56px 0; /* equal top/bottom */
    }
    .benefits-heading{
      text-align:center;
      max-width: 820px;
      margin: 0 auto 28px auto; /* space below title block */
    }
    .benefits-heading h2{ margin: 0 0 10px 0; }
    .benefits-heading p{
      margin:0;
      color: rgba(27,27,27,.72);
      font-size: var(--body);
      line-height: var(--body-lh);
    }
    .benefits-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
      margin: 0; /* no extra bottom margin -> keeps padding symmetry */
    }
    .benefit-card{
      background:#fff;
      border: 1px solid rgba(27,27,27,.18); /* small grey outline */
      border-radius: var(--radius); /* as in example; can adjust to 8 later */
      padding: 22px 18px 20px 18px;
      box-shadow:none; /* light shadow */
      transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
      min-height: 250px;
      text-align:center;
    }
    .benefit-card:hover{
      border-color: var(--accent); /* accent outline on hover */
      box-shadow:none;
      transform: translateY(-1px);
    }
    .benefit-icon{
      width: 78px;
      height: 78px;
      border-radius: 999px;
      background: rgba(1,138,156,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 auto 14px auto;
    }
    .benefit-icon svg{
      width: 34px;
      height: 34px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .benefit-card h3{
      color: var(--blue); /* titles/headlines are blue */
      font-weight: 700;
      font-size: 20px;
      line-height: 1.25;
      margin: 0 0 10px 0;
      letter-spacing: -0.01em;
    }
    .benefit-card p{
      margin:0;
      color: rgba(27,27,27,.70);
      font-size: var(--body);
      line-height: var(--body-lh);
    }

    @media (max-width: 1100px){
      .benefits-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px){
      .benefits-heading{ text-align:left; padding:0; }

      /* slider: first card ~60%, next peeks ~40% */
      .benefits-grid{
        display:flex;
        gap: 18px;
        overflow-x: auto;
        padding: 0 18px 10px 18px;
        margin: 0; /* keep left/right spacing */
        scroll-snap-type: x mandatory;
        scroll-padding-left: 18px;
        scroll-padding-right: 18px;
        -webkit-overflow-scrolling: touch;
      }
      .benefits-grid::-webkit-scrollbar{ height: 8px; }
      .benefits-grid::-webkit-scrollbar-thumb{ background: rgba(27,27,27,.14); border-radius: 99px; }
      .benefits-grid::-webkit-scrollbar-track{ background: rgba(27,27,27,.06); border-radius: 99px; }

      .benefit-card{
        flex: 0 0 83.33%;
        min-width: 83.33%;
        scroll-snap-align: start;
        text-align: left; /* keep text readable */
        padding: 18px 16px;
        min-height: 220px;
      }

      /* icon centered on mobile and 60% size */
      .benefit-icon{
        width: 47px;
        height: 47px;
        margin: 0 auto 12px auto;
      }
      .benefit-icon svg{
        width: 20px;
        height: 20px;
      }
    }
@media (prefers-reduced-motion: reduce){
      .slider-track{ animation:none; }
      .slider{ overflow:auto; }
    }

    .section{ padding:34px 0; background: var(--lightgray); }
    .card{ background:#fff; border: 0.5px solid rgba(27,64,121,.45); border-radius: var(--radius); padding:18px; }

    /* Blog teaser section (horizontal scroll, equal heights) */
    .blogs-section{
      background: var(--blue);
      padding: 56px 0; /* match benefits section spacing */
      color: #fff;
    }

    .blogs-top{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin: 0 0 28px 0;
    }
    .blogs-header{
      max-width: 820px;
    }
    .blogs-header h2{
      color:#fff;
      margin: 0 0 10px 0;
    }
    .blogs-header p{
      margin:0;
      color: rgba(255,255,255,.85);
      font-size: var(--body);
      line-height: var(--body-lh);
    }
    .viewall{
      color:#fff;
      font-size: var(--body);
      line-height: var(--body-lh);
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
      opacity: .95;
    }
    .viewall:hover{ opacity: 1; }

    /* Horizontal row: show ~4.5 items on desktop, scroll to more */
    .blogs-row{
      display:flex;
      gap: 28px;            /* more space between items */
      overflow-x: auto;
      padding: 0 0 8px 0;   /* a little room for scrollbar */
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .blogs-row::-webkit-scrollbar{ height: 8px; }
    .blogs-row::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 99px; }
    .blogs-row::-webkit-scrollbar-track{ background: rgba(255,255,255,.08); border-radius: 99px; }

    .blog-item{
      flex: 0 0 calc((100% - 3 * 28px) / 4.5); /* ~4.5 visible */
      min-width: 230px;
      max-width: 320px;
      scroll-snap-align: start;
      display:flex;
      flex-direction: column;
    }

    .blog-image{
      display:block;
      width:100%;
      height: 120px;
      object-fit: cover;
      border-radius: var(--radius); /* 4px */
      margin: 0 0 14px 0;
    }

    .blog-label{
      display:inline-block;
      margin: 0 0 10px 0;
    }

    /* Titles lighter + smaller */
    .blog-title{
      margin: 0 0 10px 0;
      color:#fff;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.01em;
      font-weight: 500; /* lighter than 700 */
      display: -webkit-box;
      -webkit-line-clamp: 2;          /* keep equal heights */
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: calc(1.25em * 2);
    }

    .blog-meta{
      display:flex;
      align-items:center;
      gap: 8px;
      font-size: 14px;
      color: rgba(255,255,255,.75);
      margin: 0 0 10px 0;
      white-space: nowrap;
    }
    .blog-meta .dot{ opacity:.7; }

    .blog-excerpt{
      margin:0;
      color: rgba(255,255,255,.82);
      font-size: var(--body);
      line-height: var(--body-lh);
      display: -webkit-box;
      -webkit-line-clamp: 3;          /* keep equal heights */
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: calc(var(--body-lh) * 1em * 3);
    }

    @media (max-width: 720px){
      .blogs-top{ align-items:flex-start; }
    }

  
    /* Blog label overlay tweak (v200a) */
    .blog-media{ position: relative; margin: 0 0 14px 0; }
    .blog-media .blog-image{ display:block; width:100%; }
    .blog-label{
      position:absolute;
      top:10px;
      right:10px;
      left:auto;
      margin:0;
      width:max-content;
      display:inline-block;
    }

  
  /* Services section (small cards, like benefits cards but smaller) */
    .services-section{
      background:#fff;
      padding: 56px 0; /* same vertical rhythm as benefits/news */
    }
    .services-heading{
      text-align:left;
      max-width: 820px;
      margin: 0 0 28px 0;
    }
    .services-heading h2{ margin:0 0 10px 0; }
    .services-heading p{
      margin:0;
      color: rgba(27,27,27,.72);
      font-size: var(--body);
      line-height: var(--body-lh);
    }

    .services-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 18px;
    }

    .service-card{
      background:#fff;
      border: 1px solid rgba(27,27,27,.18);
      border-radius: var(--radius);
      padding: 18px 16px;
      box-shadow:none;
      transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
      display:flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align:center;
      min-height: 140px; /* smaller than benefits cards */
    }
    .service-card:hover{
      border-color: var(--accent);
      box-shadow:none;
      transform: translateY(-1px);
    }

    .service-icon{
      width: 62px;
      height: 62px;
      border-radius: 999px;
      background: rgba(1,138,156,.08);
      display:flex;
      align-items:center;
      justify-content:center;
      margin: 0 0 12px 0;
    }
    .service-icon svg{
      width: 30px;
      height: 30px;
      stroke: var(--accent);
      fill: none;
      stroke-width: 2.2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .service-title{
      margin:0;
      color: var(--black);
      font-weight: 700;
      font-size: 18px;
      line-height: 1.25;
      letter-spacing: -0.01em;
    }

    @media (max-width: 1100px){
      .services-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px){
      .services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); width:100%; }
      .service-card{
        min-width:0;
        width:100%;
        align-items: center;
        text-align: center;
        min-height: 140px;
      }
      .service-icon{ margin: 0 0 12px 0; }
      .service-title{ max-width:100%; min-width:0; font-size:16px; hyphens:auto; overflow-wrap:break-word; }
    }
/* Reviews slider (salmon only for reviews) */
    .reviews-section{
      background: #F9E8DE; /* reviews background */
      padding: 56px 0;     /* same vertical rhythm */
      color: var(--black);
    }
    .reviews-top{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin: 0 0 28px 0;
    }
    .reviews-header{
      max-width: 820px;
    }
    .reviews-header h2{
      margin: 0 0 10px 0;
      color: var(--blue);
    }
    .reviews-header p{
      margin:0;
      color: rgba(27,27,27,.75);
      font-size: var(--body);
      line-height: var(--body-lh);
    }

    /* Same slider feel as news items (approx 4.5 visible) */
    .reviews-row{
      display:flex;
      gap: 42px;           /* slider standard spacing */
      overflow-x:auto;
      padding: 0 0 10px 0;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .reviews-row::-webkit-scrollbar{ height: 8px; }
    .reviews-row::-webkit-scrollbar-thumb{ background: rgba(27,27,27,.18); border-radius: 99px; }
    .reviews-row::-webkit-scrollbar-track{ background: rgba(255,255,255,.35); border-radius: 99px; }

    .review-card{
      flex: 0 0 calc((100% - 3 * 42px) / 4.5);
      min-width: 260px;
      max-width: 340px;
      scroll-snap-align: start;

      background:#FDF5EB;
      border: 1px solid #c7b9b1;
      border-radius: var(--radius);
      box-shadow:none;
      padding: 18px 18px 16px 18px;
      transition: border-color .12s ease, box-shadow .12s ease, transform .08s ease;
    }
    .review-card:hover{
      border-color: #b8a79f;
      box-shadow:none;
      transform: translateY(-1px);
    }

    .review-title{
      margin: 0 0 10px 0;
      color: var(--blue);
      font-size: 18px;
      line-height: 1.25;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .review-text{
      margin: 0 0 14px 0;
      color: rgba(27,27,27,.82);
      font-size: var(--body);
      line-height: var(--body-lh);

      display: -webkit-box;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      min-height: calc(var(--body-lh) * 1em * 4);
          font-style: italic;
      font-weight: 400;
    }
    .review-.review-name{
      font-weight: 700;
      color: var(--black);
    }

    @media (max-width: 1100px){
      .review-card{ flex-basis: calc((100% - 1 * 42px) / 2.2); }
    }
    @media (max-width: 720px){
      .reviews-top{ align-items:flex-start; }
      .reviews-row{ gap: 18px; } /* mobile spacing OK */
      .review-card{ flex-basis: 83.33%; min-width: 83.33%; max-width: none; } /* 1 + ~20% next */
    }

  
    /* Services header top row with View all */
    .services-top{
      display:flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      margin: 0 0 28px 0;
    }
    .services-viewall{
      color: var(--blue);
      font-size: var(--body);
      line-height: var(--body-lh);
      text-decoration: underline;
      text-underline-offset: 2px;
      white-space: nowrap;
      opacity: .95;
    }
    .services-viewall:hover{ opacity: 1; }

  
    /* FAQ (native details/summary) */
    .faq-section{
      background:#fff;
      padding: 56px 0; /* consistent vertical rhythm */
    }
    .faq-heading{
      text-align:left;
      max-width: 820px;
      margin: 0 0 28px 0;
    }
    .faq-heading h2{ margin:0 0 10px 0; }
    .faq-heading p{
      margin:0;
      color: rgba(27,27,27,.72);
      font-size: var(--body);
      line-height: var(--body-lh);
    }

    .faq-list{
      display:flex;
      flex-direction: column;
      gap: 12px;
    }

    details.faq-item{
      background:#fff;
      border: 1px solid rgba(27,27,27,.18);
      border-radius: var(--radius);
      box-shadow:none;
      padding: 0;
      overflow:hidden;
      transition: border-color .12s ease, box-shadow .12s ease;
    }
    details.faq-item:hover{
      border-color: rgba(27,27,27,.28);
      box-shadow:none;
    }

    summary.faq-q{
      list-style:none;
      cursor:pointer;
      padding: 16px 16px;
      display:flex;
      align-items:center;
      justify-content: space-between;
      gap: 14px;
      color: var(--blue);
      font-weight: 700;
      font-size: 16px;
      line-height: 1.35;
    }
    /* remove default marker */
    summary.faq-q::-webkit-details-marker{ display:none; }

    .faq-icon{
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      position: relative;
      opacity: .9;
    }
    .faq-icon::before,
    .faq-icon::after{
      content:"";
      position:absolute;
      left:0; top:50%;
      width: 18px; height: 2px;
      background: var(--blue);
      transform: translateY(-50%);
      border-radius: 2px;
    }
    .faq-icon::after{
      transform: translateY(-50%) rotate(90deg);
      transition: transform .12s ease;
    }
    details[open] .faq-icon::after{
      transform: translateY(-50%) rotate(0deg);
    }

    .faq-a{
      padding: 0 16px 16px 16px;
      color: rgba(27,27,27,.78);
      font-size: var(--body);
      line-height: var(--body-lh);
    }
    .faq-a p{ margin:0; }

    /* nicer focus */
    summary.faq-q:focus{ outline: none; }

  
    /* Footer (blue background, white text) */
    footer.site-footer{
      background: var(--blue);
      color: rgba(255,255,255,.88);
      padding: 56px 0 34px 0;
    }
    footer.site-footer a{
      color: #fff;
      text-decoration: none;
    }
    footer.site-footer a:hover{
      text-decoration: underline;
      text-underline-offset: 3px;
    }

    .footer-grid{
      display:grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 28px;
    }
    .footer-col h4{
      margin: 0 0 12px 0;
      color: #fff;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 700;
    }
    .footer-col .footer-rule{
      height: 2px;
      background: rgba(255,255,255,.45);
      border-radius: 2px;
      margin: 0 0 16px 0;
    }
    .footer-links{
      list-style:none;
      padding:0;
      margin:0;
      display:flex;
      flex-direction: column;
      gap: 12px;
    }
    .footer-links a{
      color: rgba(255,255,255,.88);
    }

    .footer-divider{
      height: 1px;
      background: rgba(255,255,255,.18);
      margin: 34px 0;
    }

    .footer-help{
      display:flex;
      align-items:flex-start;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
    }
    .footer-help .help-title{
      color:#fff;
      font-weight:700;
      margin:0 0 6px 0;
      font-size: 18px;
      line-height: 1.25;
    }
    .footer-help p{
      margin:0;
      color: rgba(255,255,255,.85);
      font-size: var(--body);
      line-height: var(--body-lh);
    }
    .footer-help a{
      font-size: var(--body);
      line-height: var(--body-lh);
      text-decoration: underline;
      text-underline-offset: 3px;
      white-space: nowrap;
      color:#fff;
      font-weight: 500;
    }

    .footer-legal{
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255,255,255,.75);
    }
    .footer-legal strong{ color: rgba(255,255,255,.92); font-weight:700; }

    @media (max-width: 1100px){
      .footer-grid{ grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 720px){
      footer.site-footer{ padding: 44px 0 28px 0; }
      .footer-grid{ grid-template-columns: 1fr; }
    }

  
    @media (max-width: 720px){
      .hero{ padding-top: 33px; padding-bottom: 33px; } /* 50% less */
      .kicker{ margin-bottom: 8px; }
    }

  
    /* News items: whole item clickable + underline title on hover */
    .blogs-grid a.blog-link,
    .blogs-row a.blog-link{
      display:block;
      color: inherit;
      text-decoration: none;
    }

    @media (max-width: 1100px){
      .blog-item{ flex-basis: calc((100% - 1 * 28px) / 2.2); }
    }
    @media (max-width: 720px){
      .blog-item{ flex-basis: 78%; min-width: 78%; max-width: none; }
    }

    .blogs-grid a.blog-link:hover .blog-title,
    .blogs-row a.blog-link:hover .blog-title{
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
    }

  
/* ===== Mobile menu (draft) ===== */
    .mobile-menu{
      display:none;
    }

    @media (max-width: 860px){
      .mobile-menu{
        display:block;
      }

      .mobile-menu{
        position: fixed;
        inset: 0;
        z-index: 120;
        pointer-events: none;
      }

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

      .mobile-backdrop{
        position:absolute;
        inset:0;
        background: rgba(0,0,0,.42);
        opacity: 0;
        transition: opacity .18s ease;
      }
      .mobile-menu.is-open .mobile-backdrop{
        opacity: 1;
      }

      .mobile-drawer{
        position:absolute;
        top: 0;
        right: 0;
        height: 100%;
        width: min(420px, 92vw);
        background: var(--blue);
        color: #fff;
        transform: translateX(102%);
        transition: transform .22s ease;
        display:flex;
        flex-direction: column;
        overflow: auto;
        padding-bottom: 18px;
      }
      .mobile-menu.is-open .mobile-drawer{
        transform: translateX(0);
      }

      .mobile-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
        padding: 16px 14px;
        border-bottom: 1px solid rgba(255,255,255,.16);
        position: sticky;
        top: 0;
        background: var(--blue);
        z-index: 1;
      }
      .mobile-head-title{
        font-weight: 700;
        font-size: 18px;
        letter-spacing: -0.01em;
      }
      .mobile-close{
        width: 40px;
        height: 40px;
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.32);
        background: rgba(255,255,255,.06);
        color:#fff;
        font-size: 22px;
        line-height: 1;
        cursor:pointer;
      }

      .mobile-section{
        padding: 14px 14px 0 14px;
      }

      .mobile-search input{
        width:100%;
        padding: 12px 12px;
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.32);
        background: rgba(255,255,255,.06);
        color:#fff;
        outline:none;
        font: inherit;
      }
      .mobile-search input::placeholder{ color: rgba(255,255,255,.70); }

      .mobile-label{
        font-size: 13px;
        color: rgba(255,255,255,.78);
        margin-bottom: 8px;
        font-weight: 500;
      }
      .mobile-select{
        width:100%;
        padding: 12px 12px;
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.32);
        background: rgba(255,255,255,.06);
        color:#fff;
        font: inherit;
        appearance: none;
      }

      .mobile-nav{
        padding: 14px 14px 0 14px;
        display:flex;
        flex-direction: column;
        gap: 10px;
      }

      .mobile-link{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 10px;
        padding: 12px 12px;
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.22);
        background: rgba(255,255,255,.02);
        color:#fff;
        text-decoration:none;
        font-weight: 600;
      }
      .mobile-accordion-head{
        display:flex;
        width:100%;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
      }
      .mobile-parent-link{
        flex: 1 1 auto;
        min-width: 0;
        margin-right:auto;
        color:#fff;
        text-decoration:none;
        font: inherit;
        font-weight: inherit;
      }
      .mobile-parent-link.is-static{
        cursor: default;
      }
      .mobile-accordion-toggle{
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        border: 0.5px solid rgba(255,255,255,.22);
        background: rgba(255,255,255,.04);
        color:#fff;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 34px;
        cursor:pointer;
        transition: background .18s ease, transform .18s ease;
      }
      .mobile-accordion-toggle:active{
        background: rgba(255,255,255,.10);
      }
      .mobile-accordion-toggle span{
        display:inline-block;
        font-size: 18px;
        line-height: 1;
        transform: rotate(90deg);
        transition: transform .18s ease;
      }
      .mobile-link:active{ background: rgba(255,255,255,.08); }

      .mobile-accordion{
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.22);
        overflow:hidden;
        background: rgba(255,255,255,.02);
      }
      .mobile-link-summary{
        list-style:none;
        cursor:pointer;
      }
      .mobile-link-summary::-webkit-details-marker{ display:none; }

      .mobile-sub[hidden],
      .mobile-sub2[hidden]{
        display:none !important;
      }

      .mobile-sub{
        border-top: 1px solid rgba(255,255,255,.14);
        padding: 10px 10px;
        display:grid;
        gap: 8px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition: height .18s ease, opacity .18s ease, transform .18s ease;
      }
      .mobile-sublink{
        display:block;
        padding: 10px 10px;
        border-radius: var(--radius);
        color:#fff;
        text-decoration:none;
        border: 0.5px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.02);
        font-weight: 500;
      }
      .mobile-sublink:active{ background: rgba(255,255,255,.08); }
      .mobile-sublink.mobile-accordion-head{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap: 12px;
      }

      /* Sticky bottom language selector */
      .mobile-drawer{
        display:flex;
        flex-direction: column;
      }
      .mobile-nav{
        flex: 1 1 auto;
      }
      .mobile-foot{
        margin-top: auto;
        padding: 14px 14px 18px 14px;
        border-top: 1px solid rgba(255,255,255,.16);
        background: var(--blue);
        position: sticky;
        bottom: 0;
      }
      /* Toggle arrow state */
      .mobile-accordion.is-open > .mobile-accordion-head .mobile-accordion-toggle span,
      .mobile-sub-accordion.is-open > .mobile-accordion-head .mobile-accordion-toggle span{
        transform: rotate(-90deg);
      }

      /* 2nd and 3rd layer styling */
      .mobile-sub-accordion{
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.18);
        overflow:hidden;
        background: rgba(255,255,255,.02);
      }
      .mobile-sub-accordion + .mobile-sub-accordion{
        margin-top: 10px;
      }

      .mobile-sub2{
        border-top: 1px solid rgba(255,255,255,.14);
        padding: 10px 10px;
        display:grid;
        gap: 8px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition: height .18s ease, opacity .18s ease, transform .18s ease;
      }
      .mobile-sub2link{
        display:block;
        padding: 10px 10px;
        border-radius: var(--radius);
        color:#fff;
        text-decoration:none;
        border: 0.5px solid rgba(255,255,255,.18);
        background: rgba(255,255,255,.02);
        font-weight: 400;
      }
      .mobile-sub2link:active{ background: rgba(255,255,255,.08); }

      .mobile-actions{
        margin-top: 12px;
        display:grid;
        gap: 10px;
      }
      .mobile-action{
        display:block;
        padding: 12px 12px;
        border-radius: var(--radius);
        border: 0.5px solid rgba(255,255,255,.26);
        color:#fff;
        text-decoration:none;
        background: rgba(255,255,255,.04);
        font-weight: 600;
      }
      .mobile-action:active{ background: rgba(255,255,255,.10); }


      /* Mobile menu: keep sub-items light (no outlines), keep actions outlined with icons */
      .mobile-sub-accordion{
        border: none !important;
        background: transparent !important;
      }

      .mobile-sublink{
        border: none !important;
        background: transparent !important;
        padding: 10px 2px !important;
        font-weight: 400 !important;
      }

      .mobile-sub2{
        border-top: 0 !important;
        padding: 6px 0 0 0 !important;
        gap: 6px !important;
      }

      .mobile-sub2link{
        border: none !important;
        background: transparent !important;
        padding: 8px 2px 8px 18px !important; /* slight indent */
        font-weight: 400 !important;
        opacity: .92;
      }

      .mobile-actions{
        margin-top: 14px !important;
        gap: 10px !important;
      }
      .mobile-action{
        display:flex !important;
        align-items:center !important;
        gap: 10px !important;
        border: 0.5px solid rgba(255,255,255,.30) !important;
        border-radius: var(--radius) !important;
        background: rgba(255,255,255,.04) !important;
        font-weight: 600 !important;
      }
      .mobile-action-ico{
        width: 22px;
        height: 22px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        flex: 0 0 22px;
      }
      .mobile-action-ico svg{
        width: 20px;
        height: 20px;
      }


      /* Mobile menu: one size bigger */
      .mobile-link{ font-size: 16px; }
      .mobile-sublink{ font-size: 15px; }
      .mobile-sub2link{ font-size: 14px; }
      .mobile-action{ font-size: 15px; }


      /* Language select: show arrow */
      .mobile-select{
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 18px 18px;
        padding-right: 44px;
      }


      /* Prevent iOS zoom on focus */
      .mobile-search input,
      .mobile-select{
        font-size: 16px;
      }


      /* Mobile menu: increase sizes for 2nd/3rd level */
      .mobile-sublink{ font-size: 16px !important; }
      .mobile-sub2link{ font-size: 15px !important; }

      /* Prevent body scroll when open */
      body.mobile-menu-open{
        overflow:hidden;
      }
    }



    /* === Mobile homepage tweaks (v305) === */


    /* When main menu disappears, ensure hamburger is visible (tablet + mobile) */
    @media (max-width: 860px){
      .search, .lang{ display:none !important; }
      .hamburger{ display:block !important; }
      .brand{ min-width:unset !important; }
    }

    /* HERO: make both CTA buttons 50/50 on mobile */
    @media (max-width: 720px){
      .hero .cta-row{
        display:flex !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
      }
      .hero .cta-row .btn{
        flex: 1 1 0 !important;
        width: auto !important;
        justify-content: center !important;
        white-space: nowrap;
      }
    }

    /* Benefits slider: align first card with title start + center card text */
    @media (max-width: 720px){
      .benefits-grid{
        padding-left: 0 !important;
        padding-right: 0 !important;
        scroll-padding-left: 0 !important;
        scroll-padding-right: 0 !important;
      }

      .benefit-card{
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
      }
      .benefit-icon{ margin: 0 !important; }
      .benefit-card h3{ margin: 0 !important; }
      .benefit-card p{ margin: 0 !important; }
    }

    /* Reviews: prevent shadow being clipped on bottom */
    @media (max-width: 720px){
      .reviews-row{ padding-bottom: 26px !important; }
    }

    /* Mobile menu layering fix: keep the drawer above the sticky header */
    @media (max-width: 860px){
      .mobile-menu{
        z-index: 9999 !important;
      }

      .mobile-backdrop,
      .mobile-drawer{
        position: fixed;
      }

      .mobile-backdrop{
        inset: 0;
      }

      .mobile-drawer{
        top: 0;
        right: 0;
        bottom: 0;
        height: 100dvh;
        max-height: 100dvh;
        overscroll-behavior: contain;
      }

      body.mobile-menu-open .stickywrap{
        z-index: 1 !important;
      }
    }



@media (max-width: 860px){
  .mobile-accordion > .mobile-accordion-head,
  .mobile-sub-accordion > .mobile-accordion-head{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
  }

  .mobile-accordion-toggle{
    margin-left:auto !important;
  }

  .mobile-sub[hidden],
  .mobile-sub2[hidden]{
    display:none !important;
    height:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
  }
}


    /* Header refinements: only white elements at 50% opacity */
    @media (min-width: 761px){
      .nav-right .search input{
        border: 0.5px solid rgba(255,255,255,.50);
        background: rgba(3,36,86,.12);
        color:#fff;
      }
      .nav-right .search input::placeholder{
        color: rgba(255,255,255,.78);
      }
      .nav-right .search .icon svg path{
        stroke: #FFFFFF;
      }
      .lang{
        border: 0.5px solid rgba(255,255,255,.50);
        background-color: rgba(3,36,86,.12);
        color:#fff;
        -webkit-appearance:none;
        -moz-appearance:none;
        appearance:none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-opacity='0.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat:no-repeat;
        background-position:right 12px center;
        background-size:18px 18px;
        padding-right:44px;
      }
    }


footer.site-footer,footer.site-footer p,footer.site-footer a,footer.site-footer strong,footer.site-footer h4,footer.site-footer .footer-legal,footer.site-footer .footer-help,footer.site-footer .footer-label{color:#FFFFFF!important}footer.site-footer .footer-rule,footer.site-footer .footer-divider,footer.site-footer hr{display:none!important}

.logo-text{color:#fff;font-weight:700;font-size:20px}

/* v0.2.18: preserve original navigation outlines; prevent empty broken-logo box. */
.logo-img[hidden]{display:none!important}
.logo:has(.logo-text:not([hidden])) .logo-img{display:none!important}

/* Local logo/wordmark presentation retained from v0.2.20. */
.header-logo-wordmark{color:#fff;font-size:21px;font-weight:700;line-height:1.1;white-space:nowrap;letter-spacing:-.02em}
.logo .logo-img{max-width:min(220px,55vw);object-fit:contain}

/* === ROIMonitor primary navigation 1.044: native WP menu + dynamic children === */
@media (min-width: 981px){
  .mega-cat{
    box-sizing:border-box;
    text-decoration:none !important;
  }
  .mega-cat:hover,
  .mega-cat:focus{
    text-decoration:none !important;
  }
  .mega-cols.mega-cols-no-actions{
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .mega-simple-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 14px;
    padding: 2px 0 4px;
  }
  .mega-simple-item{
    display:block;
    min-height:46px;
    padding:12px 12px;
    border:0.5px solid transparent;
    border-radius:4px;
    color:#fff;
    text-decoration:none !important;
    background:transparent;
  }
  .mega-simple-item:hover,
  .mega-simple-item:focus{
    border-color:rgba(255,255,255,.40);
    background:rgba(255,255,255,.08);
    text-decoration:none !important;
  }
  .mega-simple-item strong{
    display:block;
    color:#fff;
    font-size:14px;
    line-height:1.35;
    font-weight:500;
  }
  .mega-simple-item span{
    display:block;
    margin-top:4px;
    color:rgba(255,255,255,.82);
    font-size:12px;
    line-height:1.35;
    font-weight:400;
  }
}

/* === ROIMonitor primary navigation 1.046: classic vertical dropdown === */
@media (min-width: 981px){
  .menu > li.has-dropdown{
    position:relative;
  }
  .menu > li.has-dropdown > .dropdown-trigger::after{
    content:"▾";
    font-size:12px;
    opacity:.85;
    margin-left:8px;
    transform:translateY(-1px);
    display:inline-block;
  }
  .nav-dropdown{
    position:absolute;
    left:-12px;
    top:100%;
    width:320px;
    padding:8px;
    background:var(--blue);
    color:#fff;
    border:0.5px solid rgba(255,255,255,.28);
    border-radius:4px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:95;
    transition:opacity .15s ease, visibility .15s ease;
  }
  .has-dropdown:hover > .nav-dropdown,
  .has-dropdown:focus-within > .nav-dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-dropdown-list{
    list-style:none;
    margin:0;
    padding:0;
  }
  .nav-dropdown-row{
    position:relative;
    margin:0;
    padding:0;
  }
  .nav-dropdown-row + .nav-dropdown-row{
    margin-top:4px;
  }
  .nav-dropdown-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:11px 12px;
    border:0.5px solid transparent;
    border-radius:4px;
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px !important;
    line-height:1.35;
    font-weight:500 !important;
  }
  .nav-dropdown-link:hover,
  .nav-dropdown-link:focus,
  .nav-dropdown-row:focus-within > .nav-dropdown-link{
    border-color:rgba(255,255,255,.40);
    background:rgba(255,255,255,.08);
    text-decoration:none !important;
  }
  .nav-dropdown-arrow{
    flex:0 0 auto;
    opacity:.88;
    font-size:17px;
    line-height:1;
  }
  .nav-submenu{
    position:absolute;
    left:calc(100% + 8px);
    top:-8px;
    width:390px;
    max-height:calc(100vh - 150px);
    overflow:auto;
    padding:8px;
    background:var(--blue);
    color:#fff;
    border:0.5px solid rgba(255,255,255,.28);
    border-radius:4px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:96;
    transition:opacity .15s ease, visibility .15s ease;
  }
  .nav-submenu::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:-9px;
    width:9px;
  }
  .nav-dropdown-row.has-submenu:hover > .nav-submenu,
  .nav-dropdown-row.has-submenu:focus-within > .nav-submenu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-submenu-head{
    padding:7px 10px 9px;
    border-bottom:0.5px solid rgba(255,255,255,.18);
    margin-bottom:4px;
  }
  .nav-submenu-head a{
    color:#fff !important;
    font-size:13px !important;
    line-height:1.35;
    font-weight:600 !important;
    text-decoration:none !important;
  }
  .nav-submenu-links{
    display:flex;
    flex-direction:column;
  }
  .nav-submenu-link{
    display:block;
    padding:9px 10px;
    border-radius:4px;
    color:#fff !important;
    font-size:13px !important;
    line-height:1.35;
    font-weight:400 !important;
    text-decoration:none !important;
  }
  .nav-submenu-link:hover,
  .nav-submenu-link:focus{
    background:rgba(255,255,255,.08);
    text-decoration:none !important;
  }
  .nav-submenu-more{
    margin-top:5px;
    padding-top:11px;
    border-top:0.5px solid rgba(255,255,255,.18);
    font-weight:600 !important;
  }
}


/* ROIMonitor 1.047: simplified site-wide footer */
footer.site-footer .footer-col .footer-rule,
footer.site-footer .footer-help{display:none!important}
footer.site-footer .footer-grid{align-items:start}
footer.site-footer .footer-col h4{margin-bottom:18px}
footer.site-footer .footer-links{gap:10px}
footer.site-footer .footer-divider{display:block!important;height:1px!important;background:rgba(255,255,255,.18)!important;margin:34px 0 20px!important}
footer.site-footer .footer-legal-compact p{margin:0!important}
@media (max-width:720px){
  footer.site-footer .footer-grid{gap:34px}
  footer.site-footer .footer-divider{margin:30px 0 18px!important}
}


/* === ROIMonitor 1.048: tighter desktop dropdowns + lighter mobile submenu === */
@media (min-width: 981px){
  .menu > li.has-dropdown > .nav-dropdown{
    top:100%;
    margin-top:0;
  }
}
@media (max-width: 980px){
  .mobile-sub > .mobile-sublink,
  .mobile-sub-accordion > .mobile-accordion-head,
  .mobile-sub-accordion > .mobile-accordion-head .mobile-parent-link,
  .mobile-sub2link{
    font-weight:400 !important;
  }
  .mobile-accordion-head.is-static-toggle,
  .mobile-accordion-head.is-static-toggle .mobile-parent-link.is-static{
    cursor:pointer;
  }
}

/* 1.052: linked homepage tool cards keep the existing card appearance. */
.services-grid a.service-card{color:inherit;text-decoration:none;}

/* === ROIMonitor 1.055: homepage hero hierarchy aligned with standard heroes === */
.hero-btn-label-mobile{ display:none; }

@media (min-width: 721px){
  body.home .hero > .container{
    max-width:none;
    padding-left:max(18px, calc((100vw - var(--container)) / 2 + 18px));
    padding-right:18px;
  }
  body.home .hero .hero-inner{
    max-width:80vw;
    width:80vw;
    text-align:left;
  }
  body.home .hero .hero-inner h1{
    font-size:clamp(30px, 3vw, 44px);
    line-height:1.08;
    letter-spacing:-0.02em;
    max-width:100%;
  }
  body.home .hero .subheadline{
    font-size:var(--body);
    line-height:var(--body-lh);
    font-weight:300;
    max-width:100%;
    margin-bottom:18px;
  }
  body.home .hero .benefits5{
    max-width:100%;
  }
  body.home .hero .benefits5 li{
    font-size:14px;
    line-height:1.5;
    font-weight:300;
  }
}

@media (max-width: 720px){
  body.home .hero .hero-inner{
    max-width:100%;
    width:100%;
    text-align:left;
  }
  body.home .hero .hero-inner h1{
    font-size:clamp(30px, 3vw, 44px);
    line-height:1.08;
    letter-spacing:-0.02em;
  }
  body.home .hero .subheadline{
    font-size:var(--body);
    line-height:var(--body-lh);
    font-weight:300;
    max-width:100%;
    margin-bottom:16px;
  }
  body.home .hero .benefits5{
    gap:8px;
    margin:14px 0 20px 0;
  }
  body.home .hero .benefits5 li{
    font-size:13px;
    line-height:1.45;
    font-weight:300;
  }
  body.home .hero .cta-row{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:10px!important;
    width:100%;
  }
  body.home .hero .cta-row .btn{
    flex:0 0 calc(50% - 5px)!important;
    width:calc(50% - 5px)!important;
    min-width:0;
    padding-left:10px;
    padding-right:10px;
    justify-content:center!important;
  }
  body.home .hero .hero-btn-label-desktop{ display:none; }
  body.home .hero .hero-btn-label-mobile{ display:inline; }
}


/* === ROIMonitor 1.056: prevent mobile viewport horizontal page drift === */
@media (max-width: 720px){
  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
  @supports (overflow: clip){
    html,
    body{ overflow-x:clip; }
  }
}


/* 1.057: homepage mobile end-of-page rhythm. The retired floating CTA no longer reserves space. */
@media (max-width: 760px){
  body.home main > .section:last-child,
  body.home main > section.section:last-child{
    padding-bottom: 24px;
  }
  body.home main{
    padding-bottom: 0;
  }
}

/* v1.061: public language choice is temporarily hidden while translations are unfinished. */
.wpml-ls-statics-footer, #lang_sel_footer{display:none!important;}