:root{
    --bg-dark:#0a0a0a; --text:#111; --muted:#6b7280;
    --brand:#fcb900; --brand-text:#000000; --accent:#e5e7eb;
  }

  *{ box-sizing:border-box }
  html,body{ margin:0; padding:0; scroll-behavior:smooth; max-width:100%; overflow-x:hidden }
  body{
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    color:var(--text); line-height:1.5; background:#fff
  }
  a{ color:inherit; text-decoration:none }
  .container{ width:min(1100px,92%); margin-inline:auto }
  .skip-link{ position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden }
  .skip-link:focus{ left:12px; top:12px; width:auto; height:auto; background:#fff; border:2px solid var(--brand); padding:8px; border-radius:8px; z-index:10000 }

  /* NAVBAR */
  .navbar{ background:#777; border-bottom:1px solid var(--accent); position:relative; margin:0 }
  .nav__inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px }
  .nav__brand{ display:flex; align-items:center; gap:10px; font-weight:800 }
  .nav__logo{ height:66px; width:auto; display:block }
  .nav__menu{ display:flex; gap:18px; align-items:center; left:0; right:0 }
  .nav__menu a{ color:#000; padding:10px 8px; border-radius:8px }
  .nav__menu a:hover,.nav__menu a:focus{ background:var(--brand); color:var(--brand-text); outline:none }
  .nav__toggle{ display:none; appearance:none; background:transparent; border:0; padding:0; margin:0 }
  .nav__toggle svg{ width:28px; height:28px; display:block; pointer-events:none }
  .nav__toggle svg path{ stroke:currentColor; stroke-width:2.5 }
  @media (max-width:900px){
    .nav__toggle{ display:inline-flex; margin-left:auto; width:28px; height:28px }
    .nav__menu{
      position:absolute; left:0; right:0; top:100%; background:#fff;
      padding:0; border:0; max-height:0; overflow:hidden; display:grid; gap:6px;
      transition:max-height .25s ease, padding .2s ease, border .2s ease; z-index:999;
    }
    .nav__menu.open{ padding:12px; border-bottom:1px solid var(--accent); max-height:360px }
  }

  /* HERO */
  .hero{
    position:relative; margin:-1px; min-height:60vh; display:grid; place-items:center;
    text-align:center; color:#fff; padding:48px 10px; overflow:hidden
  }
  .hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.55)); z-index:1 }
  .hero__content{ position:relative; z-index:2; max-width:820px; padding:0 12px }
  .hero h1{ margin:0 0 10px; font-size:clamp(22px,5vw,38px) }
  .hero p{ margin:6px 0 20px; color:#e5e7eb; font-size:clamp(14px,3.5vw,18px) }
  .btn{ display:inline-block; padding:12px 18px; border-radius:10px; background:var(--brand); color:var(--brand-text); font-weight:600 }
  .btn--call{ white-space:nowrap }
  .hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; aspect-ratio:16/9 }

  /* SECTIONS */
  section{ padding:42px 0; content-visibility:auto; contain-intrinsic-size:1px 1000px }
  .grid{ display:grid; gap:24px; align-items:center }
  .grid--2{ grid-template-columns:1fr }
  @media (min-width:900px){ .grid--2{ grid-template-columns:1fr 1fr } }
  .section-img{ width:100%; height:auto; border-radius:12px; margin:0 0 16px 0; display:block; aspect-ratio:3/2 }

  /* PANELS & FORMS */
  .panel{ background:#fafafa; border:1px solid var(--accent); border-radius:12px; padding:20px }
  .panel h3{ margin:0 0 8px }
  .muted{ color:var(--muted) }
  form{ display:grid; gap:12px }
  input,textarea,button{ width:100%; padding:12px; border:1px solid var(--accent); border-radius:10px; font:inherit }
  textarea{ min-height:120px; resize:vertical }
  button{ background:var(--brand); color:var(--brand-text); font-weight:600; cursor:pointer; border:1px solid transparent }

  /* FOOTER */
  footer{ padding:18px 0; border-top:1px solid var(--accent); text-align:center }
  footer p{ margin:0; color:#4b5563; font-size:14px } /* high-contrast friendly */
  img,svg,video,canvas{ max-width:100%; display:block; height:auto }

  /* CALL BAR (mobile) */
  .callbar{
    position:fixed; left:0; right:0; bottom:0; background:var(--bg-dark); color:#fff;
    z-index:2147483647; display:none; box-shadow:0 -6px 16px rgba(0,0,0,.25);
    cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  .callbar, .callbar *{
    -webkit-user-select:none; -ms-user-select:none; user-select:none; -webkit-touch-callout:none;
  }
  .callbar__label{
    text-align:center; display:block; width:100%; padding-top:8px;
    color:#c9c9c9; white-space:normal; word-break:break-word;
  }
  .callbar__cta{
    display:flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
    text-align:center; color:#fff !important; padding:14px 12px; font-weight:800;
    font-size:18px; letter-spacing:.3px; white-space:nowrap; line-height:1.2;
  }
  .callbar__cta:visited{ color:#fff }
  .callbar__text strong{ font-weight:900 }

  /* Phone icon (emoji-friendly + animation) */
  .callbar__icon{
    font-size:1.1em; line-height:1; display:inline-block; transform-origin:60% 40%;
    animation:rb-ring 1.4s ease-in-out infinite;
    font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif;
  }

  /* Flashing label */
  #dynamicCallbarLabel.flash{ animation:rb-flash 1.25s ease-in-out infinite }
  @keyframes rb-flash{
    0%,60%{ opacity:1; color:#fff }
    100%  { opacity:.45; color:#c9c9c9 }
  }

  /* Ring animation */
  @keyframes rb-ring{
    0%{transform:rotate(0deg)}
    10%{transform:rotate(18deg)}
    20%{transform:rotate(-16deg)}
    30%{transform:rotate(12deg)}
    40%{transform:rotate(-10deg)}
    50%{transform:rotate(6deg)}
    60%{transform:rotate(-3deg)}
    70%,100%{transform:rotate(0deg)}
  }

  /* Show callbar on mobile + safe area padding */
  @media (max-width:900px){
    .callbar{ display:block }
    .callbar__cta{ padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)) }
    body{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)) }
  }

  /* Contrast & accessibility niceties */
  body#home{ color:#111 !important }
  .panel .muted{ color:#6b7280 !important }
  @media (prefers-contrast: more){
    footer p, .panel .muted{ color:#374151 !important }
  }
  @media (forced-colors: active){
    .btn, a{ forced-color-adjust:auto }
    .callbar{ forced-color-adjust:none } /* prevent OS color overrides on the bar */
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce){
    #dynamicCallbarLabel.flash, .callbar__icon{ animation:none !important }
  }