/* Match the header and service card content width; keep the mobile layout. */
@media (min-width:801px) {
 .hero {width:min(1560px,calc(100% - 96px));margin-inline:auto;background:#f8fcff;}
 .hero .hero-inner {width:100%;}
 .hero::before {background-size:cover;background-position:center 53%;background-repeat:no-repeat;}
 .hero .hero-copy {width:54%;max-width:665px;}
}
@media (min-width:801px) and (max-width:1250px) {
 .hero {width:calc(100% - 64px);}
 .hero .hero-copy {width:58%;}
}

/* Wider home page with neutral section backgrounds. */

@media(min-width:1251px){.container{width:min(1560px,calc(100% - 96px));}.hero .hero-inner{width:100%;}}

/* Unified burnt orange sampled from the header wordmark. */
:root{--orange:#c45300;--wp--preset--color--luminous-vivid-orange:#c45300;}
body .brand em,body .site-footer .brand em{color:#c45300;}
body .button:not(.outline){background:#c45300;box-shadow:0 7px 20px #c4530015;}
body .button:not(.outline):hover{background:#c45300;box-shadow:0 8px 24px #c4530033;}
.wp-gr{--color:#c45300;--star-color:#c45300;--rpi-star-color:#c45300;--slider-act-dot-color:#c45300;}

/* Neutral backgrounds throughout service, company and article pages. */


/* Bound tinted sections and their border to the same content width. */
:root{--du-section-width:min(1560px,calc(100% - 96px));}
.page-hero,.services-strip,.trust-strip,.values-band{
 width:var(--du-section-width);margin-inline:auto;margin-block:18px;
 border:1px solid var(--line);border-radius:12px;padding-inline:24px;
}
.page-hero>.container,.services-strip>.container,.trust-strip>.container,.values-band>.container{width:100%;max-width:none;}
@media(max-width:1250px){:root{--du-section-width:calc(100% - 64px);}}
@media(max-width:800px){:root{--du-section-width:calc(100% - 40px);}.page-hero,.services-strip,.trust-strip,.values-band{padding-inline:18px;}}
@media(max-width:480px){:root{--du-section-width:calc(100% - 32px);}.page-hero,.services-strip,.trust-strip,.values-band{padding-inline:14px;}}
/* Mobil: halványuló kép, az ikonsor alatt. */
@media (max-width: 800px) {
  .hero {
    display: block;
    position: relative;
    isolation: isolate;
    background: #f8fcff;
  }

  .hero .hero-inner {
    display: block;
    min-height: 0;
    padding-top: 30px;
    padding-bottom: 300px;
  }

  .hero .hero-copy {
    width: 100%;
    max-width: none;
  }

  .hero::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    width: 100%;
    height: 340px;
    z-index: -2;
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
  }

  .hero::after {
    content: "";
    display: block;
    position: absolute;
    inset: auto 0 0;
    height: 340px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      #f8fcff 0%,
      rgba(248,252,255,.96) 12%,
      rgba(248,252,255,.65) 28%,
      rgba(248,252,255,0) 55%
    );
  }

  .hero .benefits {
    position: relative;
    margin-top: 24px;
    margin-bottom: 0;
  }

  .hero .hero-note {
    position: absolute;
    right: 0;
    bottom: 20px;
    max-width: 100%;
    font-size: 11px;
  }
}