:root {
      --red: #C0392B;
      --red-dk: #A93226;
      --red-lt: #FDECEA;
      --snow: #FFFFFF;
      --off: #F8F5F1;
      --cream: #F2EDE6;
      --sand: #EAE3D9;
      --ink: #1E1E1E;
      --ink2: #3D3D3D;
      --muted: #7A7A7A;
      --border: #E0D9D0;
      --gold: #C9922A;
  }

  *,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'DM Sans', sans-serif;
      background: var(--snow);
      color: var(--ink);
      overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 999;
      padding: 16px 0;
      background: rgba(255, 255, 255, 0.93);
      backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border);
      transition: padding .4s, box-shadow .4s;
  }

  nav.scrolled {
      padding: 11px 0;
      box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
  }

  .nav-brand {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.85rem;
      letter-spacing: 2px;
      color: var(--ink);
      text-decoration: none;
  }

  .nav-brand span {
      color: var(--red);
  }

  .nl {
      color: var(--muted) !important;
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: 1.8px;
      text-transform: uppercase;
      text-decoration: none;
      padding: 4px 0;
      position: relative;
      transition: color .3s;
  }

  .nl::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 1.5px;
      background: var(--red);
      transition: width .35s;
  }

  .nl:hover {
      color: var(--ink) !important;
  }

  .nl:hover::after {
      width: 100%;
  }

  .btn-nav {
      background: var(--red);
      color: #fff;
      border: none;
      padding: 9px 22px;
      border-radius: 3px;
      font-size: .76rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      font-weight: 600;
      text-decoration: none;
      display: inline-block;
      transition: background .3s, transform .2s;
  }

  .btn-nav:hover {
      background: var(--red-dk);
      transform: translateY(-1px);
      color: #fff;
  }

  /* ── HERO ── */
  #hero {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 55% 45%;
      padding-top: 80px;
  }

  .hl {
      background: var(--off);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 80px 60px 80px 80px;
      position: relative;
  }

  .hl::after {
      content: '';
      position: absolute;
      top: 10%;
      right: 0;
      width: 1px;
      height: 80%;
      background: linear-gradient(to bottom, transparent, var(--red), transparent);
  }

  .h-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 26px;
  }

  .h-eyebrow .dash {
      width: 36px;
      height: 2px;
      background: var(--red);
  }

  .h-eyebrow span {
      font-size: .7rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--muted);
      font-weight: 500;
  }

  .h-headline {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3.8rem, 5.5vw, 7rem);
      line-height: .95;
      letter-spacing: 2px;
      color: var(--ink);
  }

  .h-headline em {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      color: var(--red);
      display: block;
      font-size: .62em;
      line-height: 1.3;
  }

  .h-sub {
      margin-top: 26px;
      color: var(--muted);
      font-size: .95rem;
      line-height: 1.8;
      max-width: 390px;
  }

  .h-actions {
      margin-top: 38px;
      display: flex;
      gap: 16px;
      align-items: center;
  }

  .btn-hp {
      background: var(--red);
      color: #fff;
      border: none;
      padding: 13px 32px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      border-radius: 3px;
      text-decoration: none;
      display: inline-block;
      transition: background .3s, transform .2s;
  }

  .btn-hp:hover {
      background: var(--red-dk);
      transform: translateY(-2px);
      color: #fff;
  }

  .btn-hg {
      color: var(--ink);
      font-size: .8rem;
      font-weight: 500;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: gap .3s;
  }

  .btn-hg:hover {
      gap: 14px;
      color: var(--ink);
  }

  .h-stats {
      margin-top: 52px;
      display: flex;
      gap: 36px;
      padding-top: 32px;
      border-top: 1px solid var(--border);
  }

  .stat-box {
      display: flex;
      flex-direction: column;
      gap: 3px;
  }

  .stat-n {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.4rem;
      color: var(--ink);
      line-height: 1;
  }

  .stat-n sup {
      color: var(--red);
      font-size: 1.4rem;
  }

  .stat-l {
      font-size: .68rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
  }

  .hr-side {
      background: var(--sand);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: stretch;
  }

  .hr-bg {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(0, 0, 0, .018) 28px, rgba(0, 0, 0, .018) 29px);
  }

  .hr-inner {
      position: relative;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 46px;
  }

  .hr-glow {
      position: absolute;
      top: -80px;
      right: -80px;
      width: 340px;
      height: 340px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(192, 57, 43, .12) 0%, transparent 70%);
  }

  .hr-ring {
      position: absolute;
      bottom: 70px;
      left: 20px;
      width: 180px;
      height: 180px;
      border: 1px solid rgba(192, 57, 43, .18);
      border-radius: 50%;
  }

  .hr-badge {
      position: absolute;
      top: 44px;
      right: 44px;
      width: 100px;
      height: 100px;
      border: 1.5px solid rgba(30, 30, 30, .12);
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: rgba(255, 255, 255, .65);
  }

  .hr-badge strong {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.9rem;
      color: var(--gold);
      line-height: 1;
  }

  .hr-badge small {
      font-size: .55rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--muted);
  }

  .hcards {
      display: flex;
      flex-direction: column;
      gap: 10px;
  }

  .hcard {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 20px;
      background: rgba(255, 255, 255, .72);
      border: 1px solid rgba(255, 255, 255, .9);
      border-radius: 4px;
      backdrop-filter: blur(6px);
      transition: background .3s, box-shadow .3s;
  }

  .hcard:hover {
      background: rgba(255, 255, 255, .96);
      box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
  }

  .hc-icon {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      background: var(--red-lt);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .hc-icon i {
      color: var(--red);
      font-size: 1rem;
  }

  .hc-title {
      font-size: .88rem;
      font-weight: 600;
      color: var(--ink);
  }

  .hc-sub {
      font-size: .72rem;
      color: var(--muted);
  }

  /* ── MARQUEE ── */
  .mstrip {
      background: var(--red);
      padding: 13px 0;
      overflow: hidden;
      white-space: nowrap;
  }

  .mtrack {
      display: inline-flex;
      animation: marquee 22s linear infinite;
  }

  .mi {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: .95rem;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, .88);
      margin-right: 56px;
  }

  .mi i {
      font-size: .65rem;
      opacity: .55;
  }

  @keyframes marquee {
      from {
          transform: translateX(0);
      }

      to {
          transform: translateX(-50%);
      }
  }

  /* about */

  .about-img {
      max-width: 1200px;
      
       
  }

  /* ── COMMON ── */
  section {
      padding: 100px 0;
  }

  .sl {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
  }

  .sl .d {
      width: 28px;
      height: 2px;
      background: var(--red);
  }

  .sl span {
      font-size: .68rem;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--muted);
  }

  .st {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.4rem, 3.5vw, 3.8rem);
      letter-spacing: 2px;
      line-height: 1;
      color: var(--ink);
  }

  .st em {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      color: var(--red);
  }

  /* ── ABOUT ── */
  #about {
      background: var(--snow);
  }

  .acard {
      padding: 28px 26px;
      border: 1px solid var(--border);
      border-radius: 5px;
      background: var(--off);
      transition: border-color .3s, box-shadow .3s;
      height: 100%;
  }

  .acard:hover {
      border-color: rgba(192, 57, 43, .35);
      box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
  }

  .aci {
      width: 46px;
      height: 46px;
      background: var(--red-lt);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
  }

  .aci i {
      color: var(--red);
      font-size: 1.2rem;
  }

  .acard h5 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.25rem;
      letter-spacing: 1px;
      color: var(--ink);
      margin-bottom: 8px;
  }

  .acard p {
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.75;
  }

  .abody p {
      color: var(--ink2);
      line-height: 1.85;
      font-size: .95rem;
  }

  /* ── SERVICES ── */
  #services {
      background: var(--off);
  }

  .srow {
      border-top: 1px solid var(--border);
      padding: 32px 0;
      display: flex;
      align-items: center;
      gap: 36px;
      transition: background .3s, padding-left .3s;
      cursor: default;
      border-radius: 4px;
  }

  .srow:last-child {
      border-bottom: 1px solid var(--border);
  }

  .srow:hover {
      background: rgba(192, 57, 43, .04);
      padding-left: 14px;
  }

  .sn {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      color: var(--border);
      min-width: 46px;
      transition: color .3s;
  }

  .srow:hover .sn {
      color: var(--red);
  }

  .sb {
      flex: 1;
  }

  .sb h4 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.75rem;
      letter-spacing: 1.5px;
      color: var(--ink);
      margin-bottom: 7px;
  }

  .sb p {
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.75;
      max-width: 520px;
  }

  .stags {
      display: flex;
      gap: 7px;
      flex-wrap: wrap;
      margin-top: 10px;
  }

  .stg {
      padding: 3px 11px;
      border: 1px solid var(--border);
      border-radius: 20px;
      font-size: .68rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--snow);
  }

  .sarr {
      width: 42px;
      height: 42px;
      border: 1px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      flex-shrink: 0;
      transition: all .3s;
  }

  .srow:hover .sarr {
      background: var(--red);
      border-color: var(--red);
      color: #fff;
      transform: rotate(45deg);
  }

  /* ── PROCESS ── */
  #process {
      background: var(--cream);
  }

  .pcard {
      padding: 32px 26px;
      background: var(--snow);
      border: 1px solid var(--border);
      border-radius: 5px;
      height: 100%;
      position: relative;
      overflow: hidden;
      transition: box-shadow .3s, border-color .3s;
  }

  .pcard:hover {
      box-shadow: 0 10px 36px rgba(0, 0, 0, .08);
      border-color: rgba(192, 57, 43, .3);
  }

  .pcard::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: var(--red);
      transition: width .5s;
  }

  .pcard:hover::after {
      width: 100%;
  }

  .pbg {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 6rem;
      line-height: 1;
      color: rgba(0, 0, 0, .04);
      position: absolute;
      top: -10px;
      right: 10px;
      pointer-events: none;
  }

  .pico {
      width: 44px;
      height: 44px;
      background: var(--red-lt);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px;
  }

  .pico i {
      color: var(--red);
      font-size: 1.05rem;
  }

  .pcard h5 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 1px;
      color: var(--ink);
      margin-bottom: 10px;
  }

  .pcard p {
      color: var(--muted);
      font-size: .85rem;
      line-height: 1.75;
  }

  /* ── WHY ── */
  #why {
      background: var(--snow);
  }

  .wgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--border);
      border-radius: 6px;
      overflow: hidden;
  }

  .wcell {
      padding: 38px 34px;
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: var(--snow);
      transition: background .3s;
  }

  .wcell:nth-child(2n) {
      border-right: none;
  }

  .wcell:nth-child(3),
  .wcell:nth-child(4) {
      border-bottom: none;
  }

  .wcell:hover {
      background: var(--off);
  }

  .wico {
      width: 48px;
      height: 48px;
      background: var(--red-lt);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 14px;
  }

  .wico i {
      color: var(--red);
      font-size: 1.2rem;
  }

  .wcell h5 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.3rem;
      letter-spacing: 1px;
      color: var(--ink);
      margin-bottom: 8px;
  }

  .wcell p {
      color: var(--muted);
      font-size: .87rem;
      line-height: 1.75;
  }

  /* ── TESTIMONIALS ── */
  #testimonials {
      background: var(--off);
  }

  .tcard {
      background: var(--snow);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 32px;
      height: 100%;
      transition: box-shadow .3s, border-color .3s;
  }

  .tcard:hover {
      box-shadow: 0 10px 36px rgba(0, 0, 0, .08);
      border-color: rgba(192, 57, 43, .25);
  }

  .qm {
      font-family: 'Playfair Display', serif;
      font-size: 4.5rem;
      line-height: .6;
      color: var(--red);
      opacity: .25;
      margin-bottom: 10px;
  }

  .tt {
      color: var(--ink2);
      font-size: .92rem;
      line-height: 1.8;
      font-style: italic;
      margin-bottom: 26px;
  }

  .tau {
      display: flex;
      align-items: center;
      gap: 14px;
  }

  .tav {
      width: 42px;
      height: 42px;
      flex-shrink: 0;
      border-radius: 50%;
      background: var(--red);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1rem;
      color: #fff;
  }

  .tn {
      font-weight: 600;
      font-size: .87rem;
      color: var(--ink);
  }

  .tl {
      font-size: .73rem;
      color: var(--muted);
  }

  .ts {
      color: var(--gold);
      font-size: .74rem;
      margin-bottom: 2px;
  }

  /* ── CTA ── */
  #cta {
      background: var(--red);
      padding: 88px 0;
      position: relative;
      overflow: hidden;
  }

  #cta::before {
      content: 'Roofing';
      position: absolute;
      top: -30px;
      right: -40px;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 20rem;
      letter-spacing: 10px;
      color: rgba(255, 255, 255, .06);
      pointer-events: none;
  }

  .cta-t {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(2.4rem, 4.5vw, 4.8rem);
      letter-spacing: 3px;
      color: #fff;
      line-height: 1;
  }

  .cta-s {
      color: rgba(255, 255, 255, .72);
      font-size: 1rem;
      line-height: 1.75;
  }

  .btn-cw {
      background: #fff;
      color: var(--red);
      border: none;
      padding: 14px 34px;
      font-size: .8rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      border-radius: 3px;
      text-decoration: none;
      display: inline-block;
      transition: transform .2s, box-shadow .3s;
  }

  .btn-cw:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
      color: var(--red);
  }

  .btn-co {
      background: transparent;
      color: #fff;
      border: 1.5px solid rgba(255, 255, 255, .5);
      padding: 14px 34px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      border-radius: 3px;
      text-decoration: none;
      display: inline-block;
      transition: border-color .3s;
  }

  .btn-co:hover {
      border-color: #fff;
      color: #fff;
  }

  /* ── CONTACT ── */
  #contact {
      background: var(--cream);
  }

  .cbox {
      background: var(--snow);
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
  }

  .chead {
      background: var(--red);
      padding: 40px 50px;
      position: relative;
      overflow: hidden;
  }

  .chead::after {
      content: '';
      position: absolute;
      bottom: -40px;
      right: -40px;
      width: 160px;
      height: 160px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .07);
  }

  .chead h3 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: 2.4rem;
      letter-spacing: 2px;
      color: #fff;
      margin-bottom: 6px;
  }

  .chead p {
      color: rgba(255, 255, 255, .7);
      font-size: .9rem;
  }

  .cbody {
      padding: 40px 50px;
  }

  .cgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 28px;
  }

  .ci {
      display: flex;
      gap: 16px;
      align-items: flex-start;
  }

  .cico {
      width: 46px;
      height: 46px;
      flex-shrink: 0;
      background: var(--red-lt);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .cico i {
      color: var(--red);
      font-size: 1.1rem;
  }

  .clabel {
      font-size: .68rem;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3px;
  }

  .cval {
      font-size: .93rem;
      color: var(--ink);
      font-weight: 500;
  }

  .csub {
      font-size: .8rem;
      color: var(--muted);
      margin-top: 2px;
  }

  .cdiv {
      border-color: var(--border);
      margin: 32px 0;
  }

  .ebar {
      background: var(--red-lt);
      border: 1px solid rgba(192, 57, 43, .2);
      border-radius: 5px;
      padding: 18px 24px;
      display: flex;
      align-items: center;
      gap: 16px;
  }

  .ebar i {
      color: var(--red);
      font-size: 1.3rem;
      flex-shrink: 0;
  }

  .ebar strong {
      color: var(--ink);
      font-size: .9rem;
      display: block;
  }

  .ebar span {
      color: var(--muted);
      font-size: .8rem;
  }

  .socrow {
      display: flex;
      gap: 10px;
      margin-top: 28px;
  }

  .socb {
      width: 38px;
      height: 38px;
      border: 1px solid var(--border);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      text-decoration: none;
      font-size: .9rem;
      transition: border-color .3s, color .3s, background .3s;
  }

  .socb:hover {
      border-color: var(--red);
      color: var(--red);
      background: var(--red-lt);
  }

  /* ── FOOTER ── */
  footer {
      background: var(--ink);
      padding: 0px;
  }

  .fhr {
      border-color: rgba(255, 255, 255, .08);
      margin: 40px 0 22px;
  }

  .fcp {
      color: rgba(255, 255, 255, .3);
      font-size: 0.89rem;
  }

  .fsocs {
      display: flex;
      gap: 10px;
      margin-top: 18px;
  }

  .fsoc {
      width: 34px;
      height: 34px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255, 255, 255, .4);
      text-decoration: none;
      font-size: .84rem;
      transition: border-color .3s, color .3s;
  }

  .fsoc:hover {
      border-color: var(--red);
      color: var(--red);
  }

  /* ── ANIMATIONS ── */
  .rv {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
  }

  .rv.vis {
      opacity: 1;
      transform: translateY(0);
  }

  .rv.d1 {
      transition-delay: .1s;
  }

  .rv.d2 {
      transition-delay: .2s;
  }

  .rv.d3 {
      transition-delay: .3s;
  }

  .rv.d4 {
      transition-delay: .4s;
  }

  .rv.d5 {
      transition-delay: .5s;
  }

  .rv.d6 {
      transition-delay: .6s;
  }

  .wl {
      display: inline-block;
      position: relative;
  }

  .wl::after {
      content: '';
      position: absolute;
      bottom: 3px;
      left: 0;
      width: 100%;
      height: 3px;
      background: var(--red);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .65s ease .7s;
  }

  .wl.vis::after {
      transform: scaleX(1);
  }

  /* ── RESPONSIVE ── */
  @media(max-width:991px) {
      #hero {
          grid-template-columns: 1fr;
      }

      .hl {
          padding: 60px 30px;
      }

      .hr-side {
          height: 500px;
          width: 100%;
      }

      .hl::after {
          display: none;
      }

      .wgrid {
          grid-template-columns: 1fr;
      }

      .wcell {
          border-right: none;
      }

      .cgrid {
          grid-template-columns: 1fr;
      }

      .chead,
      .cbody {
          padding: 28px;
      }

      .about-img img
      {
        width: 100%;
        height: 100%;
        object-fit: cover;


      }
  }

  @media(max-width:576px) {
      .h-actions {
          flex-direction: column;
          align-items: flex-start;
      }

      .h-stats {
          flex-wrap: wrap;
          gap: 20px;
      }
  }