/* Shared viewport-aware layout. Photos, colors and component interactions stay in their own stylesheets. */
:root {
  --header-row: clamp(88px, 6vw, 110px);
  --site-header-height: calc(var(--header-row) + env(safe-area-inset-top, 0px));
  --header-offset: 0px;
  --page-gutter: clamp(16px, 3.5vw, 60px);
  scroll-padding-top: calc(var(--site-header-height) + var(--header-offset));
}
html, body { width: 100%; min-width: 0; max-width: 100%; }
img, svg, video, iframe { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
input, select, textarea { min-width: 0; }
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }

/* The same height variable controls the fixed header, page offset and hero. */
twin-lain-hero, body.service-view twin-lain-hero { display: block; min-height: 0; padding-top: calc(var(--site-header-height) + var(--header-offset)); }
.site-header, .service-view .site-header { top: var(--header-offset); height: var(--site-header-height); padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); gap: clamp(8px, 1vw, 20px); }
.brand { gap: 8px; }
.brand-mark { width: clamp(64px, 5.5vw, 90px); height: 66px; }
.brand-type { font-size: clamp(21px, 1.7vw, 30px); }
.main-nav { min-width: 0; gap: clamp(4px, .6vw, 12px); }
.nav-link { min-width: 48px; font-size: clamp(13px, .95vw, 16px); }
.nav-link svg { width: 30px; height: 30px; }
.nav-link::after { bottom: 10px; height: 4px; }
.language-switch { margin-left: 0; padding-left: 6px; gap: 0; }
.language-option { min-width: 36px; min-height: 44px; }
.header-contact { min-width: 0; gap: clamp(8px, .9vw, 18px); padding-left: clamp(8px, 1vw, 18px); }
.header-contact .header-recovery { width: clamp(108px, 8vw, 150px); }
.phone-block b { font-size: clamp(15px, 1.15vw, 21px); }
.phone-block > .work-hours { font-size: 12px; }
.messengers { gap: 8px; }
.messenger { width: 44px; height: 44px; }

/* Content stays in normal flow; short viewports may grow vertically. */
.hero, body.service-view .service-detail-hero {
  display: flex; align-items: flex-end; position: relative;
  height: auto; max-height: none;
  min-height: calc(100vh - var(--site-header-height) - var(--header-offset));
  min-height: calc(100svh - var(--site-header-height) - var(--header-offset));
  /* Keep the hero's reference height stable while mobile browser bars collapse.
     Dynamic viewport height (dvh) makes bottom-aligned content jump on first scroll. */
  padding: 0;
}
.hero-content, body.service-view .service-detail-heading {
  display: flex; flex-direction: column; width: min(72%, 1120px); height: auto;
  min-width: 0; padding: clamp(24px, 3vw, 60px) var(--page-gutter);
}
.hero .eyebrow { align-self: flex-start; max-width: 100%; margin: 0 0 14px; padding: 9px 20px; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.15; }
.hero h1, body.service-view .service-detail-heading h1 { margin: 0 0 20px; font-size: clamp(30px, 4.5vw, 64px); line-height: 1.06; white-space: normal; text-wrap: balance; }
body.service-view .service-detail-heading h1 { font-size: clamp(30px, 3.8vw, 60px); margin-bottom: 8px; }
body.service-view .service-detail-heading h1::after { margin-top: 12px; }
body.service-view .service-detail-region { margin: 0 0 18px; font-size: clamp(20px, 2vw, 30px); }
.hero .benefits, .service-view .service-detail-benefits { width: 100%; max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.hero .benefits .benefit, .service-view .service-detail-benefits .benefit { min-height: 0; min-width: 0; padding: 8px; grid-template-rows: clamp(36px, 4vh, 52px) minmax(2.3em, auto) minmax(2.3em, auto); gap: 3px; }
.hero .benefits .benefit svg, .service-view .service-detail-benefits .benefit svg { width: clamp(32px, 3vw, 48px); height: clamp(32px, 3vw, 48px); margin: 0; }
.hero .benefits .benefit h2, .service-view .service-detail-benefits .benefit h2 { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.15; }
.hero .benefits .benefit p, .service-view .service-detail-benefits .benefit p { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.2; }
.hero .hero-actions, .service-view .service-detail-actions { width: 100%; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(16px, 3vh, 32px); gap: 16px; }
.hero .action-stack, .service-view .service-detail-actions .action-stack { min-width: 0; gap: 12px; }
.hero .cta, .hero .location, .service-view .service-detail-actions .cta, .service-view .service-detail-actions .location { width: 100%; min-width: 0; min-height: clamp(50px, 7vh, 64px); height: auto; aspect-ratio: auto; padding: 12px 16px; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.2; white-space: normal; text-align: center; gap: 8px; }
.hero .cta, .service-view .service-detail-actions .cta { padding-right: 42px; }
.hero .cta .cta-arrow, .service-view .service-detail-actions .cta .cta-arrow { right: 14px; width: 22px; height: 22px; }
.hero .location svg, .service-view .service-detail-actions .location svg { width: 26px; height: 26px; }
.hero .power-note, .service-view .service-detail-actions .power-note { width: 100%; flex-wrap: nowrap; padding: 9px 10px; font-size: 15px; line-height: 1.3; gap: 8px; }
.hero .power-note span, .service-view .service-detail-actions .power-note span { min-width: 0; flex: 1; }
.hero .power-note svg, .service-view .service-detail-actions .power-note svg { flex: 0 0 22px; width: 22px; height: 22px; }
.comfort-note { max-width: 27%; font-size: clamp(16px, 1.3vw, 22px); right: 5%; bottom: 28px; }

/* Fluid section typography and touch targets, without changing section order or content. */
.advantages-heading h2, .services-heading h2, .reviews-heading h2, .works-heading h2, .company-intro h2, .blog-heading h2, .contact-content h2 { font-size: clamp(26px, 2.8vw, 44px); line-height: 1.12; }
.company-details h3 { font-size: clamp(22px, 2.2vw, 30px); }
.service-card h3, .advantage-card h3, .review-card h3, .blog-card h3 { font-size: clamp(20px, 1.65vw, 24px); }
.service-description, .blog-summary, .review-work, .review-summary, .company-paragraphs p, .company-direction p, .company-principles li { font-size: 15px; }
.company-footer, .services-help, .works-bottom, .article-contact { flex-wrap: wrap; }
.company-footer > p, .services-help > div, .article-contact > div { flex: 1 1 280px; min-width: 0; }
.company-contact-button, .service-order-button, .services-help-button, .advantages-button, .works-call-button, .contact-submit { max-width: 100%; min-height: 44px; font-size: clamp(14px, 1.15vw, 17px); white-space: normal; text-align: center; }
.contact-inner, .contact-content, .contact-form, .contact-field, .footer-column, .company-direction > div { min-width: 0; }
.contact-field input, .contact-field select { font-size: 16px; min-height: 50px; }
.footer-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, .9fr); }
.footer-navigation a, .footer-contacts a, .footer-services > a:not(.footer-request), .footer-legal a { min-height: 44px; }
.footer-legal nav { flex-wrap: wrap; }
.footer-contacts a svg { flex-shrink: 0; }
.article-topbar, .legal-topbar { flex-wrap: wrap; }
.article-top-actions, .legal-top-actions { flex-wrap: wrap; min-width: 0; }
.article-brand, .legal-brand { white-space: normal; }
.article-language-option, .legal-language-option { min-width: 44px; min-height: 44px; }
.article-content h1, .legal-document h1 { font-size: clamp(30px, 3.4vw, 54px); overflow-wrap: anywhere; }
.article-breadcrumbs, .legal-breadcrumbs { flex-wrap: wrap; }
.article-body, .legal-document { overflow-wrap: anywhere; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; }

/* Dialogs keep their controls reachable when the keyboard or browser chrome reduces the viewport. */
.contact-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.contact-dialog-panel { padding: clamp(22px, 4vw, 40px); }
.contact-dialog-panel .contact-eyebrow { padding-right: 40px; line-height: 1.5; }
.contact-dialog-close, .footer-legal-close, .review-dialog-close { min-width: 44px; min-height: 44px; }
.footer-legal-dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
.footer-legal-dialog-header, .footer-legal-dialog-footer { flex-shrink: 0; }
.footer-legal-dialog-body { min-height: 0; overflow-wrap: anywhere; }
.review-dialog[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.review-dialog-toolbar { flex: 0 0 auto; flex-wrap: wrap; }
.review-dialog .review-dialog-frame { flex: 1 1 0; min-height: 0; height: auto; }
.works-lightbox { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); }

@media (max-width: 720px) {
  .review-dialog[open] {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom);
    border: 0;
    border-radius: 0;
  }
  .review-dialog-toolbar {
    min-height: 56px;
    padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
    gap: 8px;
  }
  .review-dialog-open { min-width: 0; font-size: 12px; }
  .review-dialog-close { flex: 0 0 auto; }
  .review-dialog .review-dialog-frame {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    height: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 1500px) and (min-width: 1151px) { .messengers { display: none; } }
@media (max-width: 1150px) {
  :root { --header-row: 84px; }
  .site-header { gap: 14px; }
  .brand-mark { width: 64px; height: 54px; }
  .brand-type { font-size: 23px; }
  .header-contact { margin-left: auto; border: 0; padding: 0; }
  .messengers, .header-contact .header-recovery { display: none; }
  .nav-toggle { display: flex; flex: 0 0 44px; width: 44px; height: 44px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; order: 3; border: 1px solid #ffffff5c; border-radius: 8px; background: #092a49; color: #fff; cursor: pointer; }
  .nav-toggle span { width: 20px; height: 2px; background: currentColor; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; height: auto; max-height: calc(100vh - var(--site-header-height) - var(--header-offset)); max-height: calc(100dvh - var(--site-header-height) - var(--header-offset)); overflow-y: auto; padding: 14px 18px max(20px, env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; background: #031c37f5; border-top: 1px solid #ffffff20; }
  .main-nav.is-open { display: flex; }
  .main-nav .nav-recovery { display: block; flex: 0 0 190px; width: 190px; }
  .nav-link { min-width: 86px; min-height: 64px; height: auto; padding: 8px; font-size: 14px; }
  .nav-link::after { bottom: 0; }
  .nav-link.is-clicked::after, .nav-link:hover::after, .nav-link:focus-visible::after { width: 40px; height: 3px; }
  .language-switch { width: 100%; justify-content: center; padding: 0; }
  .language-option { min-width: 44px; }
  .hero-content, body.service-view .service-detail-heading { width: 82%; }
}
@media (max-width: 980px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .contact-visual { min-height: 0; aspect-ratio: .85; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .hero-content, body.service-view .service-detail-heading { width: 100%; }
  .hero-photo { top: 0; bottom: 0; right: 0; height: 100%; width: 75%; opacity: .94; }
  .hero h1 { font-size: clamp(40px, 6vw, 60px); }
  .comfort-note { display: none; }
  .hero .hero-actions, .service-view .service-detail-actions { max-width: 760px; }
}
@media (max-height: 760px) and (min-width: 701px) {
  .hero-content, body.service-view .service-detail-heading { padding-block: 20px; }
  .hero h1, body.service-view .service-detail-heading h1 { font-size: clamp(32px, 3.8vw, 50px); margin-bottom: 12px; }
  .hero .benefits .benefit, .service-view .service-detail-benefits .benefit { grid-template-rows: 34px minmax(2.3em, auto) minmax(2.3em, auto); padding: 6px; }
  .hero .benefits .benefit svg, .service-view .service-detail-benefits .benefit svg { width: 32px; height: 32px; }
  .hero .hero-actions, .service-view .service-detail-actions { margin-top: 16px; }
}
@media (max-width: 700px) {
  :root { --header-row: 76px; --page-gutter: 16px; }
  body.service-view { --header-offset: 8px; }
  .site-header { padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right)); gap: 8px; }
  .brand { gap: 5px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-type { font-size: 17px; }
  .brand-type strong { margin-top: 4px; }
  .header-contact { flex-direction: column; align-items: flex-end; gap: 5px; }
  .phone-block b { font-size: 12px; }
  .phone-number { gap: 4px; }
  .header-phone-icon { width: 17px; height: 17px; }
  .phone-block > .work-hours { display: none; }
  .header-contact .mobile-recovery { display: block; width: 100px; }
  .main-nav .nav-recovery { display: none; }
  .main-nav { padding-inline: 12px; }
  .nav-link { min-width: 82px; }
  .hero-content, body.service-view .service-detail-heading { width: 100%; padding: clamp(36px, calc(100svh - 670px), 180px) 16px max(18px, env(safe-area-inset-bottom)); }
  body.service-view .service-detail-heading { padding-top: clamp(32px, calc(100svh - 730px), 160px); }
  .hero .eyebrow { font-size: 18px; padding: 7px 14px; margin-bottom: 10px; }
  .hero h1 { font-size: clamp(32px, 8.5vw, 46px); margin-bottom: 14px; }
  body.service-view .service-detail-heading h1 { font-size: clamp(30px, 7.6vw, 40px); margin-bottom: 6px; }
  body.service-view .service-detail-heading h1::after { margin-top: 8px; }
  body.service-view .service-detail-region { font-size: 22px; margin-bottom: 12px; }
  .hero .benefits, .service-view .service-detail-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .hero .benefits .benefit, .service-view .service-detail-benefits .benefit { grid-template-rows: 28px auto auto; padding: 7px; gap: 3px; min-height: 92px; border-right: 1px solid var(--yellow); }
  .hero .benefits .benefit:nth-child(2n), .service-view .service-detail-benefits .benefit:nth-child(2n) { border-right: 0; }
  .hero .benefits .benefit svg, .service-view .service-detail-benefits .benefit svg { width: 28px; height: 28px; }
  .hero .benefits .benefit h2, .service-view .service-detail-benefits .benefit h2 { font-size: 15px; }
  .hero .benefits .benefit p, .service-view .service-detail-benefits .benefit p { font-size: 14px; }
  .hero .hero-actions, .service-view .service-detail-actions { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 14px; padding-right: 48px; }
  .hero .action-stack, .service-view .service-detail-actions .action-stack { gap: 10px; }
  .hero .cta, .hero .location, .service-view .service-detail-actions .cta, .service-view .service-detail-actions .location { min-height: 48px; font-size: 17px; }
  .hero .power-note, .service-view .service-detail-actions .power-note { font-size: 14px; padding: 8px; }
  .hero-photo { top: 0; right: 0; width: 100%; height: clamp(340px, 58svh, 580px); background-position: center top; background-size: auto 100%; opacity: .94; filter: brightness(1.22) saturate(1.08) contrast(1.02); }
  .hero-shade { background: linear-gradient(90deg,#031c37b0,#03213b55 70%,#03213b12),linear-gradient(0deg,#031c37 0%,#031c37bd 35%,#031c3733 72%,transparent); }
  body.service-view .service-detail-photo { inset: 0; }
  body.service-view .service-detail-photo img { object-position: 60% center; }
  body.service-view .service-detail-photo::after { background: linear-gradient(0deg,#031c37e8 0%,#031c37c2 40%,#031c3750 78%,#031c3730); }
  .comfort-note { display: none; }
  .contact-inner { grid-template-columns: minmax(0, 1fr); gap: 26px; width: min(540px, 100%); }
  .contact-visual { aspect-ratio: 1.55; }
  .contact-content { max-width: none; padding: 0; }
  .contact-visual figcaption { right: 14px; left: 14px; flex-wrap: wrap; }
  .floating-contacts { top: auto; right: max(8px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); flex-direction: column; gap: 7px; transform: none; }
  .floating-contact { width: 44px; height: 44px; }
  .floating-contact svg { width: 21px; height: 21px; }
  .footer-main { width: calc(100% - 32px); gap: 28px 20px; }
  .footer-about { grid-column: 1 / -1; padding: 0; }
  .footer-legal { flex-direction: column; align-items: flex-start; width: calc(100% - 32px); }
  .footer-legal nav { justify-content: flex-start; }
  .footer-legal-modal { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .works-lightbox { width: calc(100% - 16px); padding: 56px 44px 48px; }
  .company-footer > p, .services-help > div, .article-contact > div { flex-basis: auto; }
}
@media (max-width: 380px) {
  .brand-mark { width: 34px; height: 36px; }
  .brand-type { font-size: 14px; }
  .phone-block b { font-size: 11px; }
  .header-contact .mobile-recovery { width: 88px; }
  .site-header { gap: 5px; }
  .footer-main { grid-template-columns: minmax(0, 1fr); }
  .footer-about { grid-column: auto; }
  .footer-legal nav { display: grid; grid-template-columns: minmax(0, 1fr); }
  .works-call-button { flex-wrap: wrap; }
  .works-call-number { border: 0; padding-left: 0; }
  .hero .hero-actions, .service-view .service-detail-actions { padding-right: 40px; }
  .hero .cta, .service-view .service-detail-actions .cta { font-size: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --header-row: 64px; }
  .hero-content, body.service-view .service-detail-heading { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

 .services-carousel-arrow { display: none; }
.mobile-carousel-arrow { display: none; }

@media (max-width: 620px) {
  .services-carousel { position: relative; }
  .services-carousel-arrow {
    position: absolute;
    z-index: 3;
    top: 80px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid #ffe681;
    border-radius: 50%;
    color: #06213e;
    background: linear-gradient(180deg,#ffd735,#ffbe00);
    box-shadow: 0 4px 12px #00132980;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
  }
  .services-carousel-arrow:hover:not(:disabled) { transform: scale(1.06); }
  .services-carousel-arrow:disabled { opacity: .45; cursor: default; }
  .services-carousel-arrow svg { width: 21px; height: 21px; }
  .services-carousel-prev { left: 12px; }
  .services-carousel-next { right: calc(12% + 8px); }
  .services-grid {
    grid-template-columns: none;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: min(88%, 360px);
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 4px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .services-grid::-webkit-scrollbar { display: none; }
  .services-grid .service-card { width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .services-pagination { display: none; }
}

@media (max-width: 720px) {
  .reviews-carousel,
  .works-carousel,
  .blog-carousel { position: relative; }
  .reviews-grid,
  .works-grid,
  .blog-grid {
    grid-template-columns: none;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 42px 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 42px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .reviews-grid::-webkit-scrollbar,
  .works-grid::-webkit-scrollbar,
  .blog-grid::-webkit-scrollbar { display: none; }
  .reviews-grid .review-card,
  .works-grid .work-card,
  .blog-grid .blog-card { width: 100%; scroll-snap-align: start; scroll-snap-stop: always; }
  .mobile-carousel-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid #ffe681;
    border-radius: 50%;
    color: #06213e;
    background: linear-gradient(180deg,#ffd735,#ffbe00);
    box-shadow: 0 4px 12px #00132970;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
  }
  .mobile-carousel-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.06); }
  .mobile-carousel-arrow:disabled { opacity: .42; cursor: default; }
  .mobile-carousel-arrow svg { width: 20px; height: 20px; }
  .mobile-carousel-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .reviews-carousel-prev,
  .works-carousel-prev,
  .blog-carousel-prev { left: 0; }
  .reviews-carousel-next,
  .works-carousel-next,
  .blog-carousel-next { right: 0; }
}


@media (min-width: 901px) {
  .hero-photo::after {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, #031c37 0%, #031c37b3 12%, transparent 40%, transparent 77%, #031c37a6 96%, #031c37 100%),
      linear-gradient(0deg, #031c37b0 0%, transparent 21%);
    content: "";
    pointer-events: none;
  }
  .hero-shade {
    background:
      linear-gradient(90deg, #031c37 0%, #032342f7 30%, #032342e6 43%, #032342b0 55%, #03234261 67%, #03234212 78%, transparent 84%),
      linear-gradient(0deg, #03203dc7 0%, transparent 24%);
  }
}

/* Subtle emphasis for the four benefits on the main hero only. */
.hero .benefits .benefit {
  border-radius: 12px;
  background: linear-gradient(155deg, #ffffff0d 0%, #ffffff05 78%, #ffffff02 100%);
  box-shadow: inset 0 0 0 1px #ffffff13, 0 5px 16px #00172e1c;
}
.hero .benefits .benefit svg { filter: drop-shadow(0 0 7px #ffc40026); }
.hero .benefits .benefit:first-child {
  background: linear-gradient(155deg, #ffc40020 0%, #ffc4000b 76%, #ffffff03 100%);
  box-shadow: inset 0 0 0 1px #ffc40045, 0 5px 18px #ffc40016;
}
.hero .benefits .benefit:first-child svg { filter: drop-shadow(0 0 9px #ffc4004a); }
.hero .benefits .benefit:first-child h2 { text-shadow: 0 0 12px #ffc40028; }

/* First-scroll stability: the initial hero must not be a scroll anchor. */
twin-lain-hero, .hero, .service-detail-hero { overflow-anchor: none; }