/* Agaru Liquid UX — 2026.11.03
 * Original CSS-first material layer. No React, SVG rasteriser, canvas or remote dependencies.
 * Child-theme delta: navigation is glass; reading surfaces stay opaque.
 */
:root {
  --agux-ink: #162c35;
  --agux-muted: #52636a;
  --agux-red: #c80d20;
  --agux-line: #d8e2e4;
  --agux-paper: #f2f6f6;
  --agux-glass: rgba(255,255,255,.86);
  --agux-shadow: 0 14px 40px rgba(20,48,60,.10), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(51,78,89,.10);
}
body.home, body:not(.home) { color: var(--agux-ink); }
body.home { background: var(--agux-paper); }
/* One consistent floating navigation material; no nested blur behind the logo. */
body.home .agaru-header,
body:not(.home) .agaru-header {
  top: 12px;
  width: min(calc(100% - 40px), 1312px);
  margin: 12px auto 0;
  border: 1px solid rgba(255,255,255,.98);
  border-radius: 24px;
  background: linear-gradient(125deg, rgba(255,255,255,.94), rgba(244,250,251,.78));
  box-shadow: var(--agux-shadow), 0 0 0 1px rgba(79,106,116,.08);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
}
body.admin-bar .agaru-header { top: 44px; }
body.home .agaru-header__inner,
body:not(.home) .agaru-header__inner { min-height: 72px; gap: 22px; padding: 0 18px; }
body.home .agaru-logo,
body:not(.home) .agaru-logo {
  min-height: 44px;
  padding: 4px 8px;
  border: 0;
  border-radius: 12px;
  background: none;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home .agaru-logo::before,
body:not(.home) .agaru-logo::before { display: none; }
body.home .agaru-logo img,
body:not(.home) .agaru-logo img { width: 146px; filter: none; }
body.home .agaru-nav a,
body:not(.home) .agaru-nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid transparent;
  color: var(--agux-ink);
  font-size: 14px;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
body.home .agaru-nav a::after,
body:not(.home) .agaru-nav a::after { display: none; }
body.home .agaru-nav .current-menu-item > a,
body:not(.home) .agaru-nav .current-menu-item > a,
body.home .agaru-nav a:hover,
body:not(.home) .agaru-nav a:hover {
  border-color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(20,48,60,.07);
  color: #aa1020;
}
/* CTA text remains the actual accessible link text, not generated duplicates. */
body.home .agaru-header__cta,
body:not(.home) .agaru-header__cta,
body.home .agaru-hero__actions .agaru-button {
  min-height: 50px;
  border: 1px solid #bf0a1e;
  border-radius: 999px;
  background: linear-gradient(145deg, #d51227, #b80a1c);
  box-shadow: 0 7px 18px rgba(173,13,30,.17), inset 0 1px 0 rgba(255,255,255,.35);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 800;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
body.home .agaru-header__cta::before,
body:not(.home) .agaru-header__cta::before,
body.home .agaru-hero__actions .agaru-button::before,
body.home .agaru-hero__actions .agaru-text-link::before,
body.home .agaru-footer__cta-button::before { display: none; }
body.home .agaru-header__cta .agaru-arrow-lens,
body:not(.home) .agaru-header__cta .agaru-arrow-lens { display: none; }
/* A compact editorial hero: the product and primary action fit together. */
body.home .agaru-hero {
  background: radial-gradient(ellipse at 91% 28%, #e2eef0 0, transparent 42%),
    radial-gradient(ellipse at 7% 88%, #f6e8e9 0, transparent 36%), #f4f7f7;
}
body.home .agaru-hero__grid { min-height: 600px; gap: 24px; }
body.home .agaru-hero__copy {
  margin: 30px 0;
  padding: clamp(28px, 3.1vw, 44px);
  border: 1px solid #fff;
  border-radius: 30px;
  background: linear-gradient(145deg, #fff 0%, #f8fbfb 100%);
  box-shadow: 0 18px 50px rgba(33,62,72,.08), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home .agaru-hero__copy::before { display: none; }
body.home .agaru-hero h1 {
  max-width: 670px;
  color: #112c36;
  font-size: clamp(44px, 4.25vw, 70px);
  line-height: 1.04;
  letter-spacing: -.052em;
  text-wrap: balance;
}
body.home .agaru-hero h1 em { color: #bf1023; }
body.home .agaru-hero__copy .agaru-eyebrow { margin-bottom: 20px; color: #a60d1e; font-size: 11px; line-height: 1.6; letter-spacing: .15em; }
body.home .agaru-hero__lead { margin-top: 24px; color: #4c6068; font-size: 17px; line-height: 1.7; }
body.home .agaru-hero__actions { flex-wrap: wrap; gap: 12px; margin-top: 28px; }
body.home .agaru-hero__actions .agaru-button { padding: 12px 18px; }
body.home .agaru-hero__actions .agaru-text-link {
  min-height: 50px;
  padding: 12px 18px;
  border: 1px solid #d3e0e3;
  background: #edf4f5;
  color: #1d444e;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: inset 0 1px 0 #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home .agaru-hero__phone { margin-top: 22px; color: #173b47; }
body.home .agaru-hero__phone span { color: #596c74; }
body.home .agaru-hero__visual { min-width: 0; padding: 30px 0 30px 12px; }
body.home .agaru-hero__visual::before { inset: 7% -120px 7% 4%; border-radius: 40px; }
body.home .agaru-hero__image { min-height: 480px; border-radius: 28px; box-shadow: 0 18px 48px rgba(33,54,64,.16); }
body.home .agaru-hero__image::after { opacity: .5; }
/* Each card is a stable readable surface, with a restrained illuminated rim. */
body.home .agaru-capacity-grid a,
body.home .agaru-product-grid .agaru-card,
body.home .agaru-product-grid .agaru-card:first-child,
body:not(.home) .agaru-catalog-card,
body .agaru-news-card {
  border: 1px solid #dbe5e6;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(32,61,72,.045), inset 0 1px 0 #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body.home .agaru-capacity-grid a { min-height: 160px; padding: 26px; }
body.home .agaru-capacity-grid a > span { color: #aa1020; font-size: 12px; }
body.home .agaru-capacity-grid strong { color: #163640; font-size: 23px; line-height: 1.25; }
body.home .agaru-product-grid .agaru-card:first-child .agaru-card__body { background: #fff; }
body.home .agaru-product-grid .agaru-card h3,
body .agaru-news-card h3 { color: #193740; font-size: 23px; line-height: 1.24; letter-spacing: -.025em; }
body.home .agaru-card p,
body .agaru-news-card p,
body .agaru-catalog-card__body > p:not(.agaru-catalog-card__eyebrow) { color: #52636a; font-size: 15px; line-height: 1.7; }
body.home .agaru-card .agaru-text-link,
body .agaru-news-card .agaru-text-link,
body .agaru-catalog-card .agaru-text-link { min-height: 44px; align-items: center; color: #a90b1d; font-size: 14px; }
body.home .agaru-heading h2 { font-size: clamp(34px, 3.8vw, 54px); line-height: 1.1; color: #153440; text-wrap: balance; }
body.home .agaru-heading > p { color: #52636a; font-size: 16px; line-height: 1.75; }
body.home .agaru-section { padding-block: clamp(56px, 6vw, 90px); }
body.home .agaru-heading { gap: 44px; margin-bottom: 36px; }
body.home .agaru-heading--products { margin-top: 64px; }
body.home .agaru-faq details,
body.home .agaru-process li,
body.home .agaru-footer__cta-inner,
body.home .agaru-footer__phone { -webkit-backdrop-filter: none; backdrop-filter: none; }
body.home .agaru-faq details { background: #fff; border-color: #dbe5e6; }
body.home .agaru-faq details[open] { background: #fff; }
body.home .agaru-faq summary { min-height: 56px; color: #163640; }
/* Form and article readability is more valuable than transparency. */
body .agaru-form { border: 1px solid #d5e2e5; border-top: 4px solid #c80d20; border-radius: 24px; background: #fff; box-shadow: 0 14px 36px rgba(29,59,70,.07); }
body .agaru-form__grid { align-items: start; }
body .agaru-field label { color: #213f49; font-size: 14px; }
body .agaru-field input,
body .agaru-field select,
body .agaru-field textarea { min-height: 50px; border: 1px solid #aabcc3; border-radius: 12px; background: #fff; color: #163640; font-size: 16px; line-height: 1.5; }
body .agaru-field textarea { min-height: 132px; }
body .agaru-form__lead,
body .agaru-form__note { color: #52636a; }
body .agaru-field small { color: #52636a; font-size: 12px; line-height: 1.6; }
body .agaru-quote__intro h1,
body .agaru-quote__intro h2 { font-size: clamp(40px, 4.4vw, 64px); line-height: 1.06; color: #173641; }
body .agaru-content h1 { font-size: clamp(36px, 4vw, 60px); line-height: 1.1; }
body .agaru-entry-content { color: #223b45; }
body.home .agaru-footer__cta-button { font-size: 14px; line-height: 1.4; background: #fff; color: #a20b1b; }
body.home .agaru-footer__phone { background: #a50a19; }
body .agaru-footer__col a,
body .agaru-footer__contact > a,
body .agaru-footer__social a { min-height: 44px; }
/* Visible focus is the same high-contrast, two-tone treatment throughout. */
body .agaru-header :where(a,summary):focus-visible,
body #agaru-main :where(a,button,input,select,textarea,summary):focus-visible,
body .agaru-footer :where(a,button):focus-visible {
  outline: 3px solid #164c62;
  outline-offset: 4px;
  box-shadow: 0 0 0 3px #fff;
}
@media (hover:hover) and (pointer:fine) {
  body.home .agaru-capacity-grid a:hover,
  body.home .agaru-product-grid .agaru-card:hover,
  body:not(.home) .agaru-catalog-card:hover,
  body .agaru-news-card:hover { transform: translateY(-3px); border-color: #b2c9cf; box-shadow: 0 12px 30px rgba(25,62,75,.11); }
}
/* Match the theme's actual mobile-menu breakpoint, including tablets. */
@media (max-width: 1060px) {
  body.home .agaru-header__cta,
  body:not(.home) .agaru-header__cta { display: none; }
  body.home .agaru-mobile-menu,
  body:not(.home) .agaru-mobile-menu { position: relative; display: block; z-index: 30; margin-left: auto; }
  body.home .agaru-mobile-menu summary,
  body:not(.home) .agaru-mobile-menu summary {
    width: 48px; height: 48px; border: 1px solid #d8e3e6; border-radius: 16px;
    background: linear-gradient(145deg, #fff, #eef5f6); box-shadow: inset 0 1px 0 #fff, 0 3px 9px rgba(33,67,80,.07);
  }
  body.home .agaru-mobile-menu nav,
  body:not(.home) .agaru-mobile-menu nav {
    position: absolute; top: calc(100% + 14px); right: 0; left: auto; z-index: 40;
    width: min(340px, calc(100vw - 40px)); min-width: 0;
    max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain;
    margin-top: 0; padding: 10px; border: 1px solid #fff; border-radius: 22px;
    background: rgba(255,255,255,.97); box-shadow: 0 18px 48px rgba(20,48,60,.18), 0 0 0 1px rgba(79,106,116,.08);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.home .agaru-mobile-menu nav a,
  body:not(.home) .agaru-mobile-menu nav a {
    display: flex; min-height: 48px; align-items: center; padding: 12px 14px; border: 0;
    border-radius: 12px; color: #163640; font-size: 16px; font-weight: 700;
  }
  body.home .agaru-mobile-menu nav a:hover,
  body:not(.home) .agaru-mobile-menu nav a:hover { background: #edf5f6; }
  body.home .agaru-hero__grid { min-height: 0; gap: 0; }
  body.home .agaru-hero__copy { margin: 24px 0 16px; padding: 34px; }
  body.home .agaru-hero h1 { max-width: 760px; font-size: clamp(44px, 6.6vw, 64px); }
  body.home .agaru-hero__visual { min-height: 0; padding: 16px 0 30px; }
  body.home .agaru-hero__image { min-height: 400px; max-height: 600px; }
  body.home .agaru-hero__visual::before { inset: 0 -30px 6%; }
}
@media (max-width: 767px) {
  body.home .agaru-header,
  body:not(.home) .agaru-header { top: 8px; width: calc(100% - 24px); margin: 8px 12px 0; border-radius: 21px; }
  body.admin-bar .agaru-header { top: 54px; }
  body.home .agaru-header__inner,
  body:not(.home) .agaru-header__inner { min-height: 64px; padding: 0 9px; gap: 10px; }
  body.home .agaru-logo img,
  body:not(.home) .agaru-logo img { width: 120px; }
  body.home .agaru-mobile-menu nav,
  body:not(.home) .agaru-mobile-menu nav { width: min(340px, calc(100vw - 42px)); }
  body.home .agaru-hero__copy { margin: 22px 0 12px; padding: 28px 22px; border-radius: 24px; }
  body.home .agaru-hero h1 { font-size: clamp(38px, 10.3vw, 54px); line-height: 1.07; letter-spacing: -.045em; }
  body.home .agaru-hero__lead { margin-top: 20px; font-size: 16px; line-height: 1.65; }
  body.home .agaru-hero__actions { margin-top: 24px; gap: 10px; }
  body.home .agaru-hero__phone { margin-top: 20px; }
  body.home .agaru-hero__image { min-height: 340px; border-radius: 24px; }
  body.home .agaru-heading { gap: 20px; margin-bottom: 28px; }
  body.home .agaru-heading h2 { font-size: clamp(30px, 7.7vw, 40px); line-height: 1.12; }
  body.home .agaru-capacity-grid a { min-height: 140px; padding: 22px; }
  body.home .agaru-card__body,
  body .agaru-catalog-card__body { padding: 22px; }
  body .agaru-form { padding: 28px 20px; border-radius: 20px; }
  body .agaru-quote__grid { gap: 28px; }
  body .agaru-quote { padding-top: 40px; }
  body .agaru-content { padding-top: 44px; }
}
/* Robust material fallback: no dependency on browser support for blur. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.home .agaru-header,
  body:not(.home) .agaru-header { background: #f8fbfc; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  body.home .agaru-header,
  body:not(.home) .agaru-header,
  body.home .agaru-mobile-menu nav,
  body:not(.home) .agaru-mobile-menu nav { background: #fff; border-color: #738e98; -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.home #button-contact-vr #gom-all-in-one,
  body:not(.home) #button-contact-vr #gom-all-in-one { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.home .agaru-header *, body:not(.home) .agaru-header *,
  body.home .agaru-hero *, body.home .agaru-card *, body .agaru-news-card *,
  body.home .agaru-capacity-grid *, body .agaru-catalog-card *,
  body.home .agaru-footer__cta-inner *, body.home .agaru-faq * {
    animation: none !important; transition: none !important;
  }
  body.home .agaru-capacity-grid a:hover,
  body.home .agaru-product-grid .agaru-card:hover,
  body:not(.home) .agaru-catalog-card:hover,
  body .agaru-news-card:hover,
  body.home .agaru-hero__copy,
  body.home .agaru-hero__visual { animation: none !important; transform: none !important; }
  body.home .agaru-motion-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  body.home .agaru-header, body:not(.home) .agaru-header,
  body.home .agaru-mobile-menu nav, body:not(.home) .agaru-mobile-menu nav,
  body.home .agaru-hero__copy, body.home .agaru-card, body .agaru-form {
    background: Canvas; color: CanvasText; border: 1px solid CanvasText;
    box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body .agaru-header :where(a,summary):focus-visible,
  body #agaru-main :where(a,button,input,select,textarea,summary):focus-visible { outline-color: Highlight; box-shadow: none; }
}
/* Keep portrait source dimensions from inflating the desktop hero grid. */
@media (min-width: 1061px) {
  body.home .agaru-hero__grid { align-items: center; }
  body.home .agaru-hero__visual { min-height: 0; }
  body.home .agaru-hero__image { height: clamp(500px, 62vh, 600px); min-height: 0; max-height: 600px; transform: none; background: #e9e9e7; }
  body.home .agaru-hero__image picture { display: block; width: 100%; height: 100%; }
  body.home .agaru-hero__image img { display: block; width: 100%; height: 100%; object-fit: contain; transform: none; }
}
/* The theme contains real arrow text; do not append a second arrow. */
body.home .agaru-hero__actions .agaru-button::after,
body.home .agaru-hero__actions .agaru-text-link::after { display: none; }
body.home .agaru-hero__actions .agaru-arrow-lens { display: inline-block; flex: 0 0 16px; margin-left: 0; }
body.home .agaru-hero__actions .agaru-button .agaru-arrow-lens { filter: brightness(0) invert(1); }
/* Mobile contact dock: retain the same four destinations without covering fields. */
@media (max-width: 767px) {
  body.home:not(.agaru-quote-modal-page),
  body:not(.home):not(.agaru-quote-modal-page) { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body.home #button-contact-vr,
  body:not(.home) #button-contact-vr {
    position: fixed !important;
    top: auto !important; right: auto !important; left: 50% !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    width: max-content !important; max-width: calc(100vw - 24px) !important; height: auto !important;
    transform: translateX(-50%) !important;
  }
  body.home #button-contact-vr #gom-all-in-one,
  body:not(.home) #button-contact-vr #gom-all-in-one {
    display: flex !important; flex-direction: row !important; align-items: center !important;
    justify-content: center !important; gap: 4px !important;
    width: auto !important; max-width: 100% !important; padding: 6px !important;
    border: 1px solid rgba(255,255,255,.98) !important; border-radius: 24px !important;
    background: rgba(248,252,253,.96) !important;
    box-shadow: 0 8px 26px rgba(20,48,60,.18), inset 0 1px 0 #fff !important;
    -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
    backdrop-filter: blur(12px) saturate(115%) !important;
  }
  body.home #button-contact-vr .button-contact,
  body.home #button-contact-vr .phone-vr,
  body:not(.home) #button-contact-vr .button-contact,
  body:not(.home) #button-contact-vr .phone-vr {
    position: relative !important; display: block !important; float: none !important;
    flex: 0 0 48px !important; width: 48px !important; height: 48px !important;
    min-height: 48px !important; margin: 0 !important; padding: 0 !important;
    animation: none !important; transform: none !important;
  }
  body.home #button-contact-vr .phone-vr-circle-fill,
  body:not(.home) #button-contact-vr .phone-vr-circle-fill { display: none !important; }
  body.home #button-contact-vr .phone-vr-img-circle,
  body:not(.home) #button-contact-vr .phone-vr-img-circle {
    top: 2px !important; left: 2px !important; right: auto !important;
    display: grid !important; place-items: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    border-radius: 16px !important; margin: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 8px rgba(20,48,60,.10) !important;
    animation: none !important; transform: none !important; filter: none !important;
  }
  body.home #button-contact-vr .phone-vr-img-circle a,
  body:not(.home) #button-contact-vr .phone-vr-img-circle a {
    position: static !important; display: grid !important; place-items: center !important;
    width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
    margin: 0 !important; padding: 0 !important; border-radius: 16px !important;
  }
  body.home #button-contact-vr .phone-vr-img-circle img,
  body:not(.home) #button-contact-vr .phone-vr-img-circle img {
    position: static !important; display: block !important; width: 27px !important; height: 27px !important;
    max-width: 27px !important; max-height: 27px !important; margin: 0 !important;
    object-fit: contain !important; transform: none !important; filter: none !important;
  }
  body.agaru-form-editing #button-contact-vr,
  body.agaru-quote-modal-page #button-contact-vr { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
  body.agaru-quote-modal-page { padding-bottom: 0; }
}
@media (max-width: 767px) and (prefers-reduced-transparency: reduce) {
  body.home #button-contact-vr #gom-all-in-one,
  body:not(.home) #button-contact-vr #gom-all-in-one {
    background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}
@media (max-width: 767px) and (forced-colors: active) {
  body.home #button-contact-vr #gom-all-in-one,
  body:not(.home) #button-contact-vr #gom-all-in-one { background: Canvas !important; border: 1px solid CanvasText !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
