/* Irvine Virtual Business Suites — hover/focus states + interactive widget styles.
   The page markup uses the design's exact inline styles; this file adds the
   :hover / :focus behaviour those inline styles can't express, plus small
   helpers for the FAQ accordion and mail demo. */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#ffffff;color:#0f172a;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.faq-icon-open{transform:rotate(45deg)}

/* generated hover / focus rules */
.hx1:hover{color:#fff}
.hx2:hover{color:#0f172a}
.hx3:hover{color:#0f172a}
.hx4:hover{color:#0f172a}
.hx5:hover{color:#0f172a}
.hx6:hover{background:#d2b890}
.hx7:hover{background:#d2b890}
.hx8:hover{background:rgba(255,255,255,0.1)}
.hx9:hover{border-color:#C5A880;color:#9a7b3f;background:#faf7f0}
.hx10:hover{border-color:#C5A880;color:#9a7b3f;background:#faf7f0}
.hx11:hover{border-color:#C5A880;color:#9a7b3f;background:#faf7f0}
.hx12:hover{color:#0f172a}
.hx13:hover{background:#d2b890}
.hx14:hover{background:#d2b890}
.hx15:hover{background:#1e293b}
.hx16:hover{background:#1e293b}
.hx17:hover{color:#7e6433}
.hx18:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx19:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx20:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx21:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx22:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx23:focus{border-color:#C5A880;box-shadow:0 0 0 3px rgba(197,168,128,0.2)}
.hx24:hover{background:#d2b890}
.hx25:hover{color:#fff}
.hx26:hover{color:#fff}
.hx27:hover{color:#fff}
.hx28:hover{color:#fff}
.hx29:hover{background:#d2b890}
.hovFAQ:hover span:first-child{color:#9a7b3f}

/* ============================================================
   Responsive layer. The desktop design's inline styles are the
   source of truth and stay untouched; the @media blocks below
   only override what must change at tablet / phone widths.
   ============================================================ */

/* hamburger + mobile menu — hidden until the mobile breakpoint */
.nav-toggle{display:none;background:none;border:1px solid #e6e8ed;border-radius:8px;padding:6px;cursor:pointer;line-height:0}
.nav-toggle:hover{background:#f6f7f9}
.mobile-menu{display:none}

@media (max-width:1024px){
  /* tablet: ease the widest two-column gaps */
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:0.96fr 1.04fr"],
  [style*="grid-template-columns:0.92fr 1.08fr"]{gap:40px !important}
}

@media (max-width:768px){
  /* stack every multi-column layout grid to a single column */
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:repeat(3,1fr);gap:44px"],
  [style*="grid-template-columns:0.96fr 1.04fr"],
  [style*="grid-template-columns:1fr 1.05fr"],
  [style*="grid-template-columns:1.05fr 0.95fr"],
  [style*="grid-template-columns:1fr 1fr;gap:24px"],
  [style*="grid-template-columns:0.92fr 1.08fr"],
  [style*="grid-template-columns:1fr 1fr;gap:16px"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{
    grid-template-columns:1fr !important; gap:28px !important;
  }
  /* let stacked grid tracks shrink instead of overflowing to min-content */
  [style*="display:grid"] > *{min-width:0 !important}
  /* the long hero eyebrow can wrap on narrow screens */
  [style*="letter-spacing:0.18em"]{white-space:normal !important}
  /* drop fixed min-widths that force horizontal overflow on small screens */
  [style*="min-width:280px"]{min-width:0 !important}

  /* tighten horizontal padding + vertical rhythm */
  [style*="padding:0 32px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="padding:15px 32px"],[style*="padding:9px 32px"]{padding-left:20px !important;padding-right:20px !important}
  [style*="padding:100px 0"]{padding-top:56px !important;padding-bottom:56px !important}
  [style*="padding:84px 0 92px"]{padding-top:48px !important;padding-bottom:56px !important}
  [style*="padding:56px 0"]{padding-top:36px !important;padding-bottom:36px !important}

  /* scale down oversized headings */
  [style*="font-size:56px"]{font-size:34px !important}
  [style*="font-size:54px"]{font-size:42px !important}
  [style*="font-size:42px"]{font-size:28px !important}
  [style*="font-size:40px"]{font-size:27px !important}
  [style*="font-size:38px"]{font-size:26px !important}
  [style*="font-size:32px"]{font-size:24px !important}
  [style*="font-size:18px"]{font-size:16px !important}

  /* shrink the tall feature photos */
  img[style*="height:480px"],img[style*="height:460px"]{height:260px !important}

  /* hide the decorative offset blocks behind the photos */
  [style*="position:absolute"][style*="width:62%"],
  [style*="position:absolute"][style*="width:60%"]{display:none !important}

  /* header: swap the desktop nav for the hamburger */
  .desktop-nav{display:none !important}
  .desktop-cta{display:none !important}
  .nav-toggle{display:inline-flex;align-items:center;margin-left:auto}
  .mobile-menu{display:flex;flex-direction:column;gap:0;padding:8px 20px 16px;background:#fff}
  .mobile-menu[hidden]{display:none}
  .mobile-menu a{font-size:16px;color:#0f172a;text-decoration:none;font-weight:500;padding:13px 4px;border-bottom:1px solid #f1f3f6}
  .mobile-menu a:nth-last-child(2){border-bottom:none}
  .mobile-menu-cta{margin-top:10px;background:#C5A880;text-align:center;border-radius:8px;padding:14px !important;font-weight:600 !important;border-bottom:none !important}

  /* utility bar: drop the hours line, let it wrap */
  .util-inner{white-space:normal !important;font-size:11.5px !important;gap:10px !important}
  .util-hours{display:none}
}

@media (max-width:480px){
  [style*="font-size:56px"]{font-size:30px !important}
  [style*="padding:0 32px"]{padding-left:16px !important;padding-right:16px !important}
}