/* =========================================================
   Carpet Corner - static rebuild of staging homepage
   Palette + type derived from the original Divi build
   ========================================================= */

:root{
  --black:#000000;
  --accent:#a6ba36;      /* brand green: buttons, icons, accents */
  --accent-dark:#8ea22f; /* button hover */
  --olive:#636b2f;       /* eyebrows + subheadings */
  --light:#eaebe6;       /* light section / left card background */
  --white:#ffffff;
  --ink:#2f2f2f;         /* body text */
  --muted:#6b6b6b;
  --dark:#141414;        /* dark cards / contact */
  --display:'Poppins',Helvetica,Arial,sans-serif;
  --heading:'Lato',Helvetica,Arial,sans-serif;
  --body:'Montserrat',Helvetica,Arial,sans-serif;
  --maxw:1180px;
  --header-h:140px;      /* desktop header height, used to overlay the hero */
  --topbar-h:44px;       /* black utility bar height */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  font-size:16px;
  line-height:1.7;
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--heading);margin:0;line-height:1.2;color:#1c1c1c}
p{margin:0 0 1em}

.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
  font-family:var(--heading);
  color:var(--olive);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:700;
  font-size:14px;
  margin:0 0 10px;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--body);
  font-weight:600;
  font-size:15px;
  letter-spacing:.02em;
  padding:14px 30px;
  border-radius:5px;
  cursor:pointer;
  border:none;
  transition:background-color .2s ease,color .2s ease;
}
.btn-green{background:var(--accent);color:var(--white)}
.btn-green:hover{background:var(--accent-dark)}
.btn-light{background:var(--light);color:#1c1c1c}
.btn-light:hover{background:#dcdcd4}
.btn-outline-light{background:transparent;color:var(--white);border:2px solid var(--white)}
.btn-outline-light:hover{background:rgba(255,255,255,.15)}

/* =========================================================
   Top bar
   ========================================================= */
.topbar{background:var(--black);color:var(--white)}
.topbar .container{
  display:flex;align-items:center;justify-content:space-between;
  min-height:44px;padding-top:6px;padding-bottom:6px;
}
.topbar a{display:inline-flex;align-items:center}
.topbar .phone{gap:10px;font-family:var(--body);font-weight:600;font-size:15px;color:#fff}
.topbar .phone svg{width:16px;height:16px;fill:var(--accent)}
.socials{display:flex;gap:8px}
.socials a{
  width:30px;height:30px;background:var(--accent);
  align-items:center;justify-content:center;border-radius:3px;
}
.socials a:hover{background:var(--accent-dark)}
.socials svg{width:15px;height:15px;fill:#fff}

/* =========================================================
   Header
   ========================================================= */
.navbar{position:fixed;top:0;left:0;right:0;z-index:40}
.site-header{
  position:relative;
  background:transparent;border-bottom:none;
  transition:background-color .3s ease,box-shadow .3s ease;
}
.site-header.scrolled{
  background:var(--light);
  box-shadow:0 2px 14px rgba(0,0,0,.10);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  min-height:var(--header-h);
}
.site-header .logo img{height:132px;width:auto;transition:height .3s ease}
.site-header.scrolled .logo img{height:104px}
.nav{display:flex;align-items:center;gap:26px}
.nav a{
  font-family:var(--body);font-weight:600;font-size:13.5px;
  text-transform:uppercase;letter-spacing:.04em;color:#222;
}
.nav a:hover,.nav a.active{color:var(--olive)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:26px;height:3px;background:#222;margin:5px 0;border-radius:2px}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:calc(var(--topbar-h) + var(--header-h) + 24px) 0 110px;
  background:
    linear-gradient(180deg,#eaebe6 0%,rgba(234,235,230,.94) 40%,rgba(234,235,230,.6) 72%,rgba(234,235,230,0) 100%),
    url('CC_Home_Hero1.webp') center/cover no-repeat;
  text-align:center;
}
.hero .container{position:relative;z-index:2;max-width:940px}
.hero h1{
  font-family:var(--display);font-weight:800;color:#111;
  text-transform:uppercase;font-size:78px;letter-spacing:.01em;
  margin-bottom:16px;
}
.hero .sub{
  font-family:var(--display);font-weight:600;color:var(--olive);
  font-size:20px;margin-bottom:20px;
}
.hero p.lead{
  color:#161616;font-size:16px;max-width:760px;margin:0 auto 30px;
}

/* =========================================================
   Showroom
   ========================================================= */
.showroom{padding:76px 0;text-align:center;background:var(--white)}
.showroom h2{font-size:32px;margin-bottom:18px}
.showroom .intro{max-width:900px;margin:0 auto 44px;color:#444}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:960px;margin:0 auto}
.trio .cell .label{
  font-family:var(--heading);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:18px;margin-bottom:14px;color:#1c1c1c;
}
.trio .cell img{border-radius:6px;width:100%;height:320px;object-fit:cover;box-shadow:0 10px 24px rgba(0,0,0,.12)}

/* =========================================================
   Find Something You'll Love
   ========================================================= */
.find{
  position:relative;
  background:url('CC_Home_Img6.webp') center/cover no-repeat;
  padding:120px 0;
}
.find .container{position:relative;z-index:2;max-width:var(--maxw)}
.find .box{max-width:520px}
.find h2{
  font-family:var(--display);font-weight:700;color:#1c1c1c;
  font-size:82px;line-height:1.02;margin-bottom:22px;
}
.find p{color:#2c2c2c;font-weight:700;max-width:440px;margin-bottom:26px}

/* =========================================================
   Flooring Types (products grid)
   ========================================================= */
.products{padding:80px 0;background:var(--white);scroll-margin-top:150px}
.products .head{margin-bottom:40px}
.products h2{font-size:40px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}

/* left "product" card: text + image split, light bg */
.card-product{
  background:var(--light);border-radius:6px;overflow:hidden;
  display:grid;grid-template-columns:1fr 42%;min-height:210px;
}
.card-product .body{padding:26px 24px;display:flex;flex-direction:column;align-items:flex-start}
.card-product h3{font-size:22px;margin-bottom:10px}
.card-product p{font-size:14px;color:#5a5a5a;margin-bottom:18px}
.card-product .thumb{background-size:cover;background-position:center}

/* right "brand" card: dark photo bg, light text */
.card-brand{
  position:relative;border-radius:6px;overflow:hidden;
  min-height:210px;display:flex;align-items:center;
  background-size:cover;background-position:center;
}
.card-brand::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}
.card-brand .body{position:relative;z-index:2;padding:28px 30px;color:#fff;max-width:78%}
.card-brand h3{color:#fff;font-size:22px;margin-bottom:12px}
.card-brand p{color:#e7e7e7;font-size:14px;margin-bottom:18px}

/* =========================================================
   About
   ========================================================= */
.about{padding:80px 0;background:var(--white)}
.about .container{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about h2{font-size:34px;margin-bottom:22px}
.about p{color:#4a4a4a;margin-bottom:18px}
.about .media img{border-radius:6px;width:100%;height:100%;max-height:420px;object-fit:cover}

/* =========================================================
   Contact
   ========================================================= */
.contact{
  position:relative;
  background:linear-gradient(rgba(10,10,10,.82),rgba(10,10,10,.82)),url('CC_Home_Img8.webp') center/cover no-repeat;
  padding:74px 0;
}
.contact .container{position:relative;z-index:2}
.contact h2{color:#fff;text-align:center;font-size:38px;margin-bottom:34px}
.form{max-width:900px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form .full{grid-column:1 / -1}
.form input,.form textarea{
  width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--body);font-size:15px;border-radius:4px;
}
.form input::placeholder,.form textarea::placeholder{color:#cfcfcf}
.form textarea{min-height:130px;resize:vertical}
.form .submit-wrap{grid-column:1 / -1;text-align:center;margin-top:6px}
.btn-submit{background:#2ea3f2;color:#fff;padding:14px 46px;border-radius:4px;font-weight:600;border:none;cursor:pointer;font-family:var(--body)}
.btn-submit:hover{background:#1f8fd8}

/* =========================================================
   Footer
   ========================================================= */
.footer{background:var(--black);color:#cfcfcf}
.footer .top{display:grid;grid-template-columns:1.1fr 1.2fr .95fr;gap:46px;padding:60px 0 40px}
.footer .logo-white{width:170px;margin-bottom:20px}
.footer .about-text{font-size:13.5px;color:#a9a9a9;line-height:1.8;max-width:360px}
.footer .fsocials{display:flex;gap:10px;margin-top:22px}
.footer .fsocials a{width:34px;height:34px;background:transparent;border:1px solid #444;display:inline-flex;align-items:center;justify-content:center;border-radius:3px}
.footer .fsocials a:hover{background:var(--accent);border-color:var(--accent)}
.footer .fsocials svg{width:15px;height:15px;fill:#fff}
.footer h3{color:#fff;font-size:20px;margin-bottom:20px}
.footer .footer-map{border-radius:8px;overflow:hidden;border:1px solid #333}
.footer .footer-map iframe{display:block;width:100%;height:220px;border:0}
.footer .info-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:30px}
.hours{width:100%;border-collapse:collapse;font-size:13.5px}
.hours td{padding:3px 0;color:#bdbdbd}
.hours td:last-child{text-align:right;color:#e6e6e6}
.footer .contact-lines{font-size:13.5px;color:#bdbdbd;margin-top:18px}
.footer .contact-lines div{margin-bottom:6px}
.footer .flinks{list-style:none;padding:0;margin:0;font-size:13.5px}
.footer .flinks li{margin-bottom:9px}
.footer .flinks a:hover{color:var(--accent)}
.footer .bar{border-top:1px solid #262626}
.footer .bar .container{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 24px;font-size:12.5px;color:#8f8f8f;gap:14px;flex-wrap:wrap;
}
.footer .bar a:hover{color:var(--accent)}

/* =========================================================
   Responsive - tablet
   ========================================================= */
@media (max-width:980px){
  .hero h1{font-size:46px}
  .find h2{font-size:50px}
  .grid{grid-template-columns:1fr}
  .about .container{grid-template-columns:1fr;gap:32px}
  .footer .top{grid-template-columns:1fr;gap:36px}
}

/* =========================================================
   Responsive - mobile
   ========================================================= */
@media (max-width:767px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:#fff;border-top:1px solid #eee;
    box-shadow:0 12px 24px rgba(0,0,0,.12);padding:8px 0;z-index:50;
  }
  :root{--header-h:88px}
  .site-header .logo img{height:72px}
  .site-header.scrolled .logo img{height:60px}
  .site-header .container.open .nav{display:flex}
  .nav a{padding:12px 24px;width:100%;border-bottom:1px solid #f0f0f0}
  .nav-toggle{display:block}

  .hero{padding:calc(var(--topbar-h) + var(--header-h) + 30px) 0 64px}
  .hero h1{font-size:40px}
  .hero .sub{font-size:16px}

  .showroom{padding:54px 0}
  .showroom h2{font-size:26px}
  .trio{grid-template-columns:1fr;gap:30px;max-width:420px}
  .trio .cell img{height:300px}

  /* find section: full-width on mobile with a light scrim so the dark heading stays legible */
  .find{
    background:linear-gradient(rgba(234,235,230,.55),rgba(234,235,230,.55)),url('CC_Home_Img6.webp') center/cover no-repeat;
    padding:72px 0;text-align:center;
  }
  .find .box{max-width:100%}
  .find h2{font-size:40px}
  .find p{margin:0 auto 24px}

  .products{padding:54px 0}
  .products h2{font-size:30px}
  .card-product{grid-template-columns:1fr}
  .card-product .thumb{min-height:180px;order:2}

  .about{padding:54px 0}
  .contact{padding:54px 0}
  .form{grid-template-columns:1fr}
  .footer .info-cols{grid-template-columns:1fr}
  .footer .bar .container{justify-content:center;text-align:center}
}

/* =========================================================
   Subpages: About / Carpets & Rugs / Flooring / Contact
   ========================================================= */
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.pay-line{font-size:12.5px;color:#9a9a9a;margin-top:16px}

/* page banner */
.page-hero{
  background:linear-gradient(180deg,#eaebe6 0%,#f4f4f2 100%);
  padding:calc(var(--topbar-h) + var(--header-h) + 46px) 0 52px;
  text-align:center;
}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{
  font-family:var(--display);font-weight:800;color:#111;
  text-transform:uppercase;font-size:52px;letter-spacing:.01em;margin-bottom:22px;
}
.page-hero .call{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent);color:#fff;font-family:var(--body);font-weight:700;
  font-size:19px;padding:14px 30px;border-radius:6px;
  box-shadow:0 6px 18px rgba(166,186,54,.35);
}
.page-hero .call:hover{background:var(--accent-dark)}
.page-hero .call svg{width:18px;height:18px;fill:#fff}

/* content sections */
.section{padding:72px 0;background:var(--white)}
.section.alt{background:var(--light)}
.section h2{font-size:34px;margin-bottom:18px}
.section h3{font-size:24px;margin:0 0 12px}
.prose{max-width:820px;color:#454545}
.prose p{margin:0 0 18px}
.lead-q{font-family:var(--heading);font-weight:700;color:#1c1c1c;font-size:19px;margin-bottom:6px}

/* about split: text + image */
.split{display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center}
.split .media img{border-radius:8px;width:100%;height:100%;max-height:440px;object-fit:cover;box-shadow:0 14px 30px rgba(0,0,0,.14)}

/* brand chips */
.brands{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;max-width:880px}
.brands .chip{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid #dcdcd6;border-radius:6px;
  padding:14px 22px;min-width:150px;text-align:center;
  font-family:var(--heading);font-weight:700;color:#3a3a3a;font-size:15px;
  box-shadow:0 2px 8px rgba(0,0,0,.04);
}
.brands-note{margin-top:16px;color:#5a5a5a;font-size:14px}
.brands-note strong{color:#1c1c1c}

/* flooring type blocks */
.floor-block{padding:52px 0;border-bottom:1px solid #ececec}
.floor-block:last-of-type{border-bottom:none}
.floor-block h2{font-size:30px;margin-bottom:14px}

/* testimonial */
.testimonial{background:var(--light);padding:56px 0;text-align:center}
.testimonial .stars{color:#e8b400;font-size:22px;letter-spacing:3px;margin-bottom:12px}
.testimonial blockquote{
  font-family:var(--display);font-weight:600;color:#1c1c1c;font-size:26px;
  max-width:760px;margin:0 auto 12px;line-height:1.4;
}
.testimonial .cite{color:#666;font-size:14px}

/* contact page: form + map/info */
.contact-split{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:start}
.contact-split h3{font-size:22px;margin:0 0 16px}
.map-wrap{border-radius:8px;overflow:hidden;box-shadow:0 12px 28px rgba(0,0,0,.14);margin-bottom:22px}
.map-wrap iframe{display:block;width:100%;height:330px;border:0}
.info-line{color:#454545;margin-bottom:8px}
.info-line strong{color:#1c1c1c}
.hours-list{width:100%;border-collapse:collapse;margin-top:6px;max-width:340px}
.hours-list td{padding:4px 0;color:#4a4a4a;font-size:14.5px}
.hours-list td:last-child{text-align:right}

/* light form variant (on light/white sections) */
.form.light input,.form.light textarea{border:1px solid #cfcfc9;background:#fff;color:#1c1c1c}
.form.light input::placeholder,.form.light textarea::placeholder{color:#8a8a8a}

@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:30px}
  .contact-split{grid-template-columns:1fr;gap:34px}
}
@media (max-width:767px){
  .page-hero{padding:calc(var(--topbar-h) + var(--header-h) + 30px) 0 40px}
  .page-hero h1{font-size:34px}
  .page-hero .call{font-size:16px;padding:12px 22px}
  .section{padding:48px 0}
  .floor-block{padding:38px 0}
  .section h2{font-size:26px}
  .testimonial blockquote{font-size:21px}
  .brands .chip{min-width:calc(50% - 6px);padding:12px 10px;font-size:13.5px}
}