:root{
    --red:#C8102E;
    --red-dark:#9E0C24;
    --ink:#181818;
    --charcoal:#2B2B2B;
    --grey:#6E6E6E;
    --line:#E4E4E4;
    --paper:#FFFFFF;
    --offwhite:#F5F5F3;
  }
  *{box-sizing:border-box;}
  body{margin:0; font-family:'Open Sans',sans-serif; color:var(--ink); background:var(--paper);}
  h1,h2,h3,h4{font-family:'Oswald',sans-serif; text-transform:uppercase; margin:0;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  ul{list-style:none; margin:0; padding:0;}

  /* ---------- Top info bar ---------- */
  .topbar{
    background:var(--ink);
    color:#bdbdbd;
    font-size:0.82rem;
    padding:0.6rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0.5rem;
  }
  .topbar .tb-left{display:flex; gap:1.8rem; flex-wrap:wrap;}
  .topbar .tb-left span strong{color:#fff;}
  .topbar .tb-social a{
    display:inline-block;
    margin-left:0.8rem;
    color:#bdbdbd;
  }
  .topbar .tb-social a:hover{color:var(--red);}

  /* ---------- Header / nav ---------- */
  .site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:1.1rem 2rem;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .logo{
    font-family:'Oswald',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    text-transform:uppercase;
    letter-spacing:0.02em;
    color:var(--ink);
  }
  .logo span{color:var(--red);}
  nav.main-nav > ul{display:flex; align-items:center;}
  nav.main-nav > ul > li{position:relative; margin-left:2.2rem;}
  nav.main-nav > ul > li > a{
    display:inline-flex;
    align-items:center;
    gap:0.3rem;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    font-size:0.88rem;
    letter-spacing:0.04em;
    color:var(--ink);
    padding-bottom:4px;
    border-bottom:2px solid transparent;
    line-height:1;
  }
  /* Desktop: hover opens the dropdown */
  @media (hover:hover) and (pointer:fine){
    nav.main-nav > ul > li:hover > a{color:var(--red); border-bottom-color:var(--red);}
    nav.main-nav > ul > li:hover > .dropdown{display:block;}
  }
  /* Any device: a submenu that's been tapped/clicked open via JS gets this class */
  nav.main-nav > ul > li.open > a{color:var(--red); border-bottom-color:var(--red);}
  nav.main-nav > ul > li.open > .dropdown{display:block;}

  .caret{font-size:0.65rem; transition:transform 0.15s;}
  li.open .caret{transform:rotate(180deg);}

  .dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    box-shadow:0 10px 24px rgba(0,0,0,0.12);
    min-width:210px;
    padding:0.6rem 0;
    z-index:20;
  }
  .align-right > .dropdown{left:auto; right:0;}
  .dropdown li{margin:0;}
  .dropdown a{
    display:block;
    padding:0.55rem 1.2rem;
    font-family:'Open Sans',sans-serif;
    text-transform:none;
    font-size:0.9rem;
    letter-spacing:0;
    border-bottom:none;
  }
  .dropdown a:hover{background:var(--offwhite); color:var(--red);}

  /* Hamburger button (mobile only) */
  .nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:40px;
    height:40px;
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
  }
  .nav-toggle span{
    display:block;
    height:2px;
    width:100%;
    background:var(--ink);
    transition:transform 0.2s, opacity 0.2s;
  }
  .nav-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.active span:nth-child(2){opacity:0;}
  .nav-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .quote-btn{
    background:var(--red);
    color:#fff !important;
    padding:0.6rem 1.3rem;
    border-radius:2px;
  }
  .quote-btn:hover{background:var(--red-dark); border-bottom-color:transparent !important;}

  /* ---------- Hero slider ---------- */
  .hero{
    position:relative;
    height:560px;
    overflow:hidden;
    background:var(--ink);
  }
  .hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    opacity:0;
    transition:opacity 1s ease;
    background-size:cover;
    background-position:center;
  }
  .hero-slide.active{opacity:1; z-index:1;}
  .hero-slide::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(10,10,10,0.82) 0%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.25) 100%);
  }
  .hero-content{
    position:relative;
    z-index:2;
    color:#fff;
    max-width:640px;
    padding:0 4rem;
  }
  .hero-eyebrow{
    color:var(--red);
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.85rem;
    margin-bottom:0.8rem;
    display:block;
  }
  .hero-content h1{
    font-size:clamp(2.1rem,4.5vw,3.4rem);
    line-height:1.15;
    margin-bottom:1.6rem;
  }
  .hero-content h1 em{font-style:normal; color:var(--red);}
  .hero-btn{
    display:inline-block;
    background:var(--red);
    color:#fff;
    padding:0.85rem 1.8rem;
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.05em;
    font-size:0.9rem;
    border-radius:2px;
  }
  .hero-btn:hover{background:var(--red-dark);}

  /* ---------- Intro strip ---------- */
  .intro{
    text-align:center;
    padding:3.5rem 2rem 1rem;
  }
  .intro .stub{
    color:var(--red);
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    letter-spacing:0.1em;
    font-size:0.85rem;
  }
  .intro h2{
    font-size:1.9rem;
    margin:0.6rem 0 0.8rem;
  }
  .intro p{
    max-width:640px;
    margin:0 auto;
    color:var(--grey);
    line-height:1.6;
  }

  /* ---------- Services grid ---------- */
  .services{padding:2.5rem 2rem 5rem;}
  .service-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
    gap:1.6rem;
  }
  .service-tile{
    border:1px solid var(--line);
    padding:2rem 1.6rem;
    text-align:left;
  }
  .service-icon{
    width:46px; height:46px;
    margin-bottom:1.1rem;
    color:var(--red);
  }
  .service-tile h3{font-size:1.05rem; margin-bottom:0.6rem;}
  .service-tile p{color:var(--grey); font-size:0.92rem; line-height:1.55; margin:0;}

  /* ---------- Why us cards ---------- */
  .whyus{background:var(--offwhite); padding:5rem 2rem;}
  .whyus-inner{max-width:1180px; margin:0 auto;}
  .whyus-layout{display:grid; grid-template-columns:0.9fr 1.3fr; gap:3rem; align-items:center;}
  .whyus-photo{
    border-radius:3px;
    overflow:hidden;
    box-shadow:0 20px 40px rgba(0,0,0,0.15);
  }
  .whyus-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  @media (max-width:900px){
    .whyus-layout{grid-template-columns:1fr;}
    .whyus-photo{max-height:340px;}
  }
  .whyus .section-title{text-align:left; margin-bottom:2.2rem;}
  .whyus .section-title .stub{color:var(--red); font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:0.1em; font-size:0.85rem;}
  .whyus .section-title h2{font-size:1.9rem; margin-top:0.5rem;}
  .why-grid{
    display:flex;
    flex-direction:column;
    gap:1.4rem;
  }
  .why-card{
    background:#fff;
    padding:1.6rem 1.8rem;
    text-align:left;
    border-left:3px solid var(--red);
    border-top:none;
    display:flex;
    align-items:flex-start;
    gap:1.2rem;
  }
  .why-card .why-num{
    font-family:'Oswald',sans-serif;
    color:var(--red);
    font-size:1.8rem;
    display:block;
    margin-bottom:0;
    flex-shrink:0;
  }
  .why-card h4{font-size:1rem; margin-bottom:0.4rem;}
  .why-card p{color:var(--grey); font-size:0.9rem; line-height:1.55; margin:0;}

  /* ---------- CTA banner ---------- */
  .cta-banner{
    background:var(--red);
    color:#fff;
    text-align:center;
    padding:3.5rem 2rem;
  }
  .cta-banner h2{font-size:1.7rem; margin-bottom:1.2rem;}
  .cta-banner .hero-btn{background:#fff; color:var(--red);}
  .cta-banner .hero-btn:hover{background:#f0f0f0;}

  /* ---------- Footer ---------- */
  footer{background:var(--ink); color:#b9b9b9; padding:4rem 2rem 0;}
  .footer-grid{
    max-width:1180px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
    gap:2.5rem;
    padding-bottom:3rem;
    border-bottom:1px solid #333;
  }
  footer h4{color:#fff; font-size:1rem; margin-bottom:1.2rem;}
  footer p, footer a{font-size:0.9rem; line-height:1.7; color:#b9b9b9;}
  footer a:hover{color:var(--red);}
  .footer-bottom{
    max-width:1180px;
    margin:0 auto;
    text-align:center;
    padding:1.6rem 0;
    font-size:0.82rem;
    color:#777;
  }
  .footer-logo{
    font-family:'Oswald',sans-serif;
    text-transform:uppercase;
    color:#fff;
    font-weight:600;
    letter-spacing:0.03em;
    margin-bottom:0.4rem;
  }
  .footer-logo span{color:var(--red);}

  .placeholder-note{
    background:#FFF3E0;
    border:1px dashed var(--red);
    color:#7a2200;
    font-size:0.8rem;
    padding:0.8rem 1.2rem;
    max-width:1180px;
    margin:0 auto;
    text-align:center;
  }

  @media (max-width:860px){
    .nav-toggle{display:flex;}

    nav.main-nav{
      position:absolute;
      top:100%;
      left:0;
      right:0;
      background:#fff;
      border-bottom:1px solid var(--line);
      box-shadow:0 14px 24px rgba(0,0,0,0.1);
      max-height:0;
      overflow:hidden;
      transition:max-height 0.25s ease;
      z-index:30;
    }
    nav.main-nav.open{max-height:600px;}
    nav.main-nav > ul{flex-direction:column; align-items:stretch; padding:0.5rem 0;}
    nav.main-nav > ul > li{margin-left:0;}
    nav.main-nav > ul > li > a{
      padding:0.9rem 2rem;
      border-bottom:1px solid var(--line);
    }
    .quote-btn{margin:0.9rem 2rem; text-align:center;}
    .dropdown{
      position:static;
      box-shadow:none;
      padding-left:1rem;
      display:none;
    }
    .site-header{position:relative;}
    .hero-content{padding:0 1.8rem;}
  }