/* ======================================================
   YOUR CARPET GUY — Global Styles (overhauled)
   Plain HTML/CSS/JS only
   ====================================================== */

/* -----------------------------
   0) Design Tokens
   ----------------------------- */
:root{
  /* Brand palette */
  --navy:#0b1a2a; --denim:#1e3a5f; --denim-600:#22466f; --red:#c1121f;
  --paper:#f5f7fb; --ink:#0b1320; --muted:#66748a;

  /* Effects */
  --radius:18px;
  --shadow-sm:0 2px 6px rgba(5,11,20,.08);
  --shadow:0 10px 30px rgba(5,11,20,.10);
  --ring:0 0 0 3px rgba(0, 0, 0, 0.25); /* focus ring */

  /* Header system (single source of truth) */
  --logo-h: 96px;               /* desktop logo height */
  --topbar-pad-y: 8px;          /* vertical padding in .topbar-inner */
  --topbar-h: 128px;            /* measured header row on desktop */
  --nav-h: 48px;                /* blue row */

  /* Z layers */
  --z-topbar: 9999;
  --z-nav: 9998;
}

/* -----------------------------
   1) Base / Reset
   ----------------------------- */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family:Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;

  /* Reserve space for BOTH fixed rows (topbar + nav) */
  padding-top: calc(var(--topbar-h) + var(--nav-h));
}
img{ max-width:100%; height:auto; display:block }
.container{ width:min(1100px,92%); margin-inline:auto }
:focus-visible{ outline: none; box-shadow: var(--ring) }

/* -----------------------------
   2) Buttons / Badges / Cards
   ----------------------------- */
.btn{
  --_bg:var(--denim); --_fg:#fff;
  background:var(--_bg); color:var(--_fg);
  padding:12px 18px; border-radius:12px; border:0;
  font-weight:700; letter-spacing:.2px;
  box-shadow:var(--shadow-sm);
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn:hover{ background:#f500007e; transform: translateY(-2px) }
.btn:active{ transform: translateY(0); box-shadow:none }
.btn-accent{ --_bg:var(--red) }
.badge{
  display:inline-block; background:var(--paper); color:var(--denim);
  padding:6px 10px; border-radius:999px; font-size:.82rem;
  border:1px solid rgba(30,58,95,.2)
}
.card{
  background:#fff; border:1px solid #e6ebf2; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:22px
}

/* -----------------------------
   3) Header (Fixed Stack)
   ----------------------------- */

/* Row 1: Top bar (logo + call) */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-topbar);
  background:#fff; border-bottom:1px solid #e6ebf2;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  height:var(--topbar-h);          /* lock visual height */
}
.topbar-inner{
  height:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:var(--topbar-pad-y) 0;
}
.topbar-inner > *{ margin:0 }

/* Brand + logo (never distort) */
.brand{display:flex; align-items:center; gap:12px; font-weight:800; color:var(--navy); text-decoration:none; flex-shrink:0}
.brand img.logo{ display:block; width:auto; height:var(--logo-h); max-width:none; object-fit:contain }

/* Call area */
.call-wrap{
  display:flex; flex-direction:column; align-items:flex-end; gap:6px;
  flex:1 1 360px; min-width:240px
}
.call-note{
  margin:0;
  font-family:"Playfair Display", serif; font-weight:700; font-style:italic;
  color:var(--denim);
  font-size:clamp(.82rem,1.7vw,.98rem); line-height:1.15; text-align:right;
}
.call-btn{
  background:var(--red); color:#fff; display:inline-flex; align-items:center; gap:8px;
  padding:clamp(8px,1.1vw,12px) clamp(12px,1.5vw,16px);
  font-size:clamp(.9rem,1.9vw,1rem); border:0; border-radius:12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer; text-decoration:none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.call-btn:hover{ background:#a20f1a; transform: translateY(-2px) }
.call-btn:active{ transform: none; box-shadow:none }
.call-btn svg{ width:1em; height:1em }
.phone-text{ font-weight:800 }

/* Row 2: Primary nav — fixed directly under the topbar */
nav.primary{
  position:fixed; left:0; right:0; top:var(--topbar-h);
  z-index:var(--z-nav);
  background:var(--navy); color:#fff;
}
.nav-inner{
  display:flex; align-items:center; justify-content:center; gap:18px;
  min-height:var(--nav-h); padding:6px 0
}
.nav-inner a{
  color:#e7eefb; text-decoration:none; padding:8px 12px; border-radius:8px;
  transition: background .2s ease, color .2s ease
}
.nav-inner a:hover, .nav-inner a[aria-current="page"]{
  background:rgba(255,255,255,.12)
}
.nav-inner a:focus-visible{ box-shadow: var(--ring) }

/* Ultra‑narrow phones */
@media (max-width:720px){
  :root{
    --logo-h: 74px;
    --topbar-pad-y: 6px;
    --topbar-h: 140px; /* measured stacked height (logo + note + button) */
  }

  .topbar-inner{ flex-direction:column; align-items:center; justify-content:center; row-gap:6px }
  .call-wrap{ align-items:center; min-width:0 }
  .call-note{ text-align:center; font-size:.86rem; visibility:hidden; position:relative }
  .call-note::after{
    content:"Proudly Servicing Colorado Springs";
    visibility:visible; position:absolute; inset:0
  }
  .call-btn{ padding:5px 8px }
  .call-btn .phone-text{ visibility:hidden; position:relative; display:inline-block }
  .call-btn .phone-text::after{
    content:"Call now for free estimate!"; visibility:visible; position:absolute; inset:0; text-align:center
  }
}

/* Small tablets */
@media (max-width:900px){
  :root{ --logo-h: 88px }
}

/* -----------------------------
   4) Hero
   ----------------------------- */
.hero{ position:relative; isolation:isolate; background:var(--navy); color:#fff }
.hero-media{ position:absolute; inset:0; z-index:-1; overflow:hidden }
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 9%; opacity:.45; filter:contrast(1.05)
}
.hero .container{ padding:84px 0 96px }
.hero h1{ font-family:"Playfair Display", serif; font-size:clamp(36px,4.6vw,64px); line-height:1.05; margin:0 0 12px }
.hero p{ font-size:clamp(16px,1.5vw,20px); max-width:62ch }
.hero-cta{ display:flex; gap:12px; margin-top:16px; flex-wrap:wrap }
.kicker{ color:#c8d6f4; letter-spacing:.12em; text-transform:uppercase; font-size:.82rem; font-weight:700 }

/* -----------------------------
   5) Value Strip
   ----------------------------- */
.strip{
  background:var(--paper); padding:18px 0;
  border-top:1px solid #e6ebf2; border-bottom:1px solid #e6ebf2
}
.strip .items{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.strip .item{ display:flex; gap:12px; align-items:center }
.strip .icon{
  width:38px; aspect-ratio:1/1; border-radius:12px;
  background:rgba(193,18,31,.1); color:var(--red);
  display:grid; place-items:center; font-weight:800
}

/* -----------------------------
   6) Sections / Headings
   ----------------------------- */
section{ padding:64px 0 }
h2{ font-size:clamp(28px,3vw,40px); margin:0 0 6px }
.muted{ color:var(--muted) }

/* -----------------------------
   7) Services
   ----------------------------- */
.services{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.service .media{ border-radius:14px; overflow:hidden; aspect-ratio:16/10; background:#eaf0fb }
.service h3{ margin:10px 0 4px }

/* -----------------------------
   8) Before/After Sliders
   ----------------------------- */
.ba-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px }
.ba-card{ border-radius:14px; overflow:hidden; border:1px solid #e6ebf2; position:relative }
.ba{ position:relative; overflow:hidden }
.ba img{ display:block; width:100%; height:100%; object-fit:cover }
.ba .before{ position:absolute; inset:0; overflow:hidden }
.ba .before img{ width:100%; height:100%; object-fit:cover }

/* Slider */
.ba input[type=range]{
  position:absolute; inset:auto 12px 12px 12px;
  width:auto; height:25px;
  -webkit-appearance:none; appearance:none;
  background:transparent; cursor:ew-resize;
  outline:none; border:none
}
.ba input[type=range]:focus-visible{ box-shadow: var(--ring) }
.ba input[type=range]::-moz-focus-outer{ border:0 }

/* Track */
.ba input[type=range]::-webkit-slider-runnable-track{
  height:2px; border-radius:999px; border:none;
  background:rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(5,11,20,.20)
}
.ba input[type=range]::-moz-range-track{
  height:3px; border-radius:999px; border:none;
  background:rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(5,11,20,.20)
}

/* Thumb */
.ba input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px;
  background:#fffffff5; border:none; border-radius:0;
  box-shadow:0 10px 10px rgba(0,0,0,.30);
  margin-top:-7px;
  transition: transform .15s ease, box-shadow .15s ease
}
.ba input[type=range]::-moz-range-thumb{
  width:16px; height:16px; background:#fff; border:none; border-radius:0; box-shadow:none
}
.ba input[type=range]:hover::-webkit-slider-thumb,
.ba input[type=range]:focus-visible::-webkit-slider-thumb{
  transform: scale(1.06);
  box-shadow:0 0 0 5px rgba(18,21,193,.25), 0 4px 16px rgba(0,0,0,.35)
}

/* Divider line */
.ba .divider{
  position:absolute; top:0; bottom:0; left:50%;
  width:2px; pointer-events:none;
  background:linear-gradient(transparent, rgba(255,255,255,.9), transparent);
  filter:drop-shadow(0 0 2px rgba(0,0,0,.25))
}

/* Label */
.ba .label{
  position:absolute; top:5px; right:5px;
  background:rgba(11,26,42,.671); color:#fff;
  padding:3px 6px; border-radius:999px; font-size:.6rem; font-weight:500
}

/* -----------------------------
   9) Forms / Layout Grids
   ----------------------------- */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:24px }
input, textarea{
  padding:12px 14px; border:1.5px solid #d7e0ee; border-radius:12px; font:inherit
}
input:focus, textarea:focus{
  outline:none; border-color:var(--denim); box-shadow:none
}
textarea{ min-height:130px }
.map{ border-radius:14px; overflow:hidden; min-height:300px; background:#eaf0fb; border:1px solid #e1e9f5 }

/* -----------------------------
   10) Footer
   ----------------------------- */
footer{
  background:linear-gradient(180deg, var(--denim), #000000);
  color:#e8f0ff;
  font-size:.95rem;
}
.footer-inner{ padding:48px 0 28px }
.foot-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:32px;
}
.foot-brand p{ max-width:50ch; color:#d8e3fb; margin-top:8px }
.foot-grid h3{
  font-size:1rem; letter-spacing:.05em;
  margin:0 0 10px; color:#fff; text-transform:uppercase;
}
.foot-grid ul{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
footer a,
footer a:visited{
  color:#fff;
  text-decoration:none;
  transition:color 1s;
}
footer a:hover,
footer a:focus-visible{
  color:var(--red);
}


.foot-contact li{ display:flex; align-items:center; gap:8px }
.foot-contact svg{ width:18px; height:18px; flex-shrink:0; color:var(--red)}

.foot-social{
  margin:26px 0 12px;
  display:flex; gap:14px; justify-content:center;
}
.foot-social a{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%; background:rgba(255,255,255,.1); color:#ffdde1;
  transition: background .5s, transform 1s;
}
.foot-social a:hover{ background:var(--red); color:#fff; transform:translateY(-2px) }
.foot-social svg{ width:18px; height:18px }

.copyright{
  border-top:1px solid rgba(255,255,255,.15);
  margin-top:22px; padding-top:16px;
  text-align:center; font-size:.85rem; color:#c9d6f2;
}

/* Responsive */
@media (max-width: 900px){
  .foot-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .foot-grid{ grid-template-columns:1fr }
  .foot-social{ justify-content:flex-start }
}


/* -----------------------------
   11) Responsive Grids
   ----------------------------- */
@media (max-width: 900px){
  .services, .ba-grid, .strip .items, .contact-grid, .foot-grid{ grid-template-columns:1fr 1fr }
}
@media (max-width: 640px){
  .services, .ba-grid, .strip .items, .contact-grid, .foot-grid{ grid-template-columns:1fr }
}

/* ===========================
   12) Gallery – Tabs + Carousel
   =========================== */

/* Tabs — upgraded aesthetics */
.tabs{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:12px 0 18px; padding-bottom:8px;
  border-bottom:1px solid #e6ebf2;
}
.tab{
  appearance:none; border:1px solid #e6ebf2; background:#fff; color:var(--ink);
  padding:8px 14px; border-radius:999px; font-weight:700; letter-spacing:.2px;
  cursor:pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.tab:hover, .tab:focus-visible{ transform:translateY(-1px); box-shadow:0 2px 10px rgba(5,11,20,.10) }
.tab.is-active{ border-color:var(--red); box-shadow:inset 0 0 0 2px var(--red) }

/* Panel spacing */
.g2-panel{ margin-top:8px }

/* Stage */
.g2-stage{
  position:relative;
  background:#0c1626;
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.g2-stage-inner{
  aspect-ratio: 1/1;
  min-height:160px;
  display:grid; place-items:center;
}
.g2-stage-inner img{
  width:100%; height:100%;
  object-fit:contain; object-position:center;
  display:block;
}



/* Nav buttons — fully INSIDE the frame */
.g2-nav{
  position:absolute; top:50%;
  transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(0,0,0,.1); background:#ffffffea; color:var(--navy);
  display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.2);
  cursor:pointer
}
.g2-nav:focus-visible{ box-shadow:var(--ring) }
.g2-nav:hover{ filter:brightness(.98) }
.g2-nav:active{ transform:translateY(-50%) scale(.97) }
.g2-prev{ left:12px }
.g2-next{ right:12px }
.g2-nav svg{ width:22px; height:22px }
@media (max-width: 660px){
  .g2-prev{ left:8px } .g2-next{ right:8px }
}

/* Status (a11y) */
.g2-status-wrap{ position:relative; padding:10px 10px 0; color:#fff ; font-size:.9rem }

/* Thumbs row — extra left padding prevents red outline clipping on first item */
.g2-thumbs{
  margin-top:12px; display:flex; gap:10px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 10px 8px 14px;   /* ← extra left padding */
}
.g2-thumb{
  flex:0 0 auto; width:92px; aspect-ratio:4/3;
  border-radius:12px; background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 14px rgba(5,11,20,.10); cursor:pointer;
  scroll-snap-align:start; position:relative
}
.g2-thumb img{
  width:100%; height:100%; object-fit:cover; object-position:center; border-radius:inherit; display:block
}
.g2-thumb.is-active{ outline:2px solid var(--red); outline-offset:0px }

/* No‑JS fallback */
@media (max-width: 900px){ .g2-stage-inner{ aspect-ratio:4/3 } }

/* -----------------------------
   13) Animations
   ----------------------------- */
.fade-in{ opacity:0; transform:translateY(20px); animation: fadeInUp 2.4s ease-out forwards }
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0) } }
.fade-scroll{ opacity:0; transform:translateY(30px); transition: opacity .8s ease-out, transform .8s ease-out }
.fade-scroll.show{ opacity:1; transform:translateY(0) }