@charset "utf-8";
/* --------------------------------- */



/*----------------------------------
  Loader
------------------------------------*/
    .loader {
      position: fixed;
      width: 100%;
      height: 100%;
      background: white;
      z-index: 555;
      top: 0;
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .loader .loading-logo {
      width: 25%;
      display: none;
    }

/*----------------------------------
  Header
------------------------------------*/
    /* Reset */
    *,*::before,*::after {
      box-sizing:border-box
    }
    /* Utility */
    .container {
      max-width:1100px;
      margin:0 auto;
      padding:0 20px
    }
    .center {
      text-align:center
    }
    .muted {
      color:#666;
      font-size:0.95rem
    }

    /* Header */
    header {
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding:18px 20px;
      border-bottom:1px solid #eee;
      background:#fff;
      position:sticky;
      top:0;
      z-index:30
    }
    .logo {
      width: 25%;
    }
     
    .phone {
      display:flex;
      align-items:center;
      gap:10px
    }
    .phone a {
      color:#111;
      text-decoration:none;
      font-weight:600
    }

    /* Hero */
    .hero {
      position:relative;
      padding:0;
      margin:0
    }
    .hero__img {
      width:100%;
      height:100vh;
      min-height:320px;
      object-fit:cover;
      display:block
    }
    .hero__overlay {
      position:absolute;
      left:0;
      right:0;
      top:0;
      bottom:0;
      display:flex;
      align-items:center
    }
    .hero__content {
      max-width:1000px;
      margin-left:40px;
      color:#fff;
      text-shadow:0 6px 18px rgba(0,0,0,0.6)
    }
    .eyebrow {
      background:rgba(0,0,0,0.5);
      display:inline-block;
      padding:6px 10px;
      border-radius:6px;
      margin-bottom:8px
    }
    .hero h1 {
      font-size:clamp(20px,4vw,60px);
      margin:0 0 12px;
      color:white;
      filter: drop-shadow(2px 2px 4px black);
    }
    .hero h1 strong {

    }
    .hero h1 strong::after {
      content: '\A';
      white-space: pre;
    }
    .hero p {
      margin:0;
      font-size:clamp(12px,1.2vw,18px)
    }

    /* Feature strip */
    .feature-strip {
      background: #fafafa;
      padding: 5rem 0 34px;
      /* margin-top: 3rem; */
      background: whitesmoke;
    }
    .feature-grid {
      display:grid;
      grid-template-columns:repeat(5,1fr);
      gap:14px;
      align-items:start
    }
    .feature {
      background:#fff;
      padding:18px;
      border-radius:8px;
      box-shadow:0 2px 6px rgba(0,0,0,0.04);
      text-align:center
    }
    .feature .icon {
      font-size:2rem;
      display:block;
      margin-bottom:8px
    }
    .intro {
      display:inline-block;
      background:#fff;
      padding:12px 18px;
      border-radius:10px;
      box-shadow:0 6px 18px rgba(0,0,0,0.06);
      margin-bottom:18px;
      font-size:x-large
    }
    .feature h4 {
      margin:6px 0 0;
      font-size:1.2rem
    }

    /* Product lineup */
    .section {
      padding:48px 0;
    }
    .section h2 {
      font-size:1.4rem;
      margin:0 0 2rem
    }
    h2.ttl {
      font-size: x-large;
      display: flex;
      justify-content: center;
    }
    .ttl div {
      background: linear-gradient(40deg,rgba(0, 206, 233, 1) 0%, rgba(33, 122, 255, 1) 100%);
      padding: .8rem 1rem;
      margin-right: 3px;
      color: white;
      transform: rotate(4deg);
    }
    .ttl div span {
      display: block;
      transform: rotate(-4deg);
    }
    .product-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top: 22px;
    }
    .product-card {
      background:#fff;
      border-radius:6px;
      padding:12px;
      text-align:center;
      border:1px solid #eee
    }
    .product-card img {
      max-width:100%;
      height:330px;
      object-fit:cover;
      border-radius:4px
    }
    .product-card p {
      margin:10px 0 0;
      font-weight:700
    }

    /* Install types (icons grid) */
    .install-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:20px
    }
    .install {
      padding:22px;
      background:#fff;
      border-radius:8px;
      border:1px solid #eee;
      text-align:center
    }
    .install img {
      width:100%;
      height:296px;
      object-fit:cover;
      border-radius:6px
    }
    .install.other {
      display:flex;
      align-items:center;
      justify-content:center;
      flex-direction:column
    }
    .install .label {
      display:block;
      margin-top:10px;
      font-weight:700
    }

    /* Hero gallery small */
    .gallery-small {
      display:flex;
      gap:8px;
      flex-wrap:wrap
    }
    .gallery-small img {
      width:32%;
      height:90px;
      object-fit:cover;
      border-radius:6px
    }

    /* Testimonials */
    .testimonials {
      background:#fafafa;
      padding:36px 0
    }
    .test-grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:18px
    }
    .test-card {
      background:#fff;
      padding:18px;
      border-radius:8px;
      border:1px solid #eee
    }
    .test-card h4 {
      margin:0 0 8px
    }
    .test-card p {
      margin:0;color:#444
    }
    .outline {
      width: 50%;
      margin: 5% auto 0;
    }
    .outline h3 {
      margin-bottom: 5%;
      text-align: center;
    }
    .outline table {
      margin: 5% auto;
      width: 100%;
    }
    .outline table th {
      background: linear-gradient(40deg, rgba(0, 206, 233, 1) 0%, rgba(33, 122, 255, 1) 100%);
      border: solid 1px #ccc;
      color: #fff;
      padding: 10px;
      width: 20%;
      vertical-align: middle;
    }
    .outline table td {
      border: solid 1px #ccc;
      padding: 10px;
      width: 80%;
    }

    /* Contact / footer */
    footer {
      /*background:#0f1724;*/
      background: url(../images/footer.jpg)no-repeat;
      background-size: cover;
      color:#fff;
      padding:48px 0
    }
    .footer-contact {
      background:rgba(255,255,255,0.06);
      padding:28px;
      border-radius:8px
    }
    .footer-contact h3 {
      color: white;
      margin:0 0 8px
    }
    .footer-contact p {
      color: white;      
    }
    .tel, .form {
      margin-top:12px
    }
    .tel a {
      display:inline-block;
      background: #fff;
      color:#0b1220;
      padding:10px 16px;
      border-radius:6px;
      text-decoration:none;
      font-weight:700
    }
    .form a {
      display:inline-block;
      background: greenyellow;
      color:#0b1220;
      padding:10px 16px;
      border-radius:6px;
      text-decoration:none;
      font-weight:700
    }
    .footer-foot {
      margin-top:18px;
      font-size:0.9rem;
      color:#cbd5e1;
    }

    /* Responsive tweaks */
    @media (max-width:1000px){
      .feature-grid{grid-template-columns:repeat(3,1fr)}
      .product-grid{grid-template-columns:repeat(2,1fr)}
      .install-grid{grid-template-columns:repeat(2,1fr)}
      .test-grid{grid-template-columns:repeat(2,1fr)}
      .hero__content{margin-left:20px;padding-right:20px}
      .loader .loading-logo {width: 80%;}

    }
    @media (max-width:640px){
      header{padding: 12px !important}
      .hero__img{height:44vh}
      .hero__content{margin-left:12px}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
      .product-grid{grid-template-columns:1fr}
      .install-grid{grid-template-columns:1fr}
      .test-grid{grid-template-columns:1fr}
      .gallery-small img{width:49%}
      .hero h1{font-size:1.4rem}
      .ttl div{padding:.3rem .5rem;}
      .outline{width:90%;}
      .outline img{width:100%;height:auto;}
      table {width:100%;display:table;margin-bottom:1.5rem;font-size: 0.9rem;}
      .outline table th {width:30%;}
      .outline table td {width:70%;}
    }

    /* small helper for icon blocks similar to wireframe "keys" */
    .kbd {
      display:inline-block;
      background:#111;
      color:#fff;
      border-radius:4px;
      padding:8px 10px;
      font-weight:700;
      letter-spacing:2px
    }