/* ======================================================================
   MAPLE COATING SYSTEMS - Design System v2
   Single source of truth for all visual tokens and components.
   ====================================================================== */

/* - 1. TOKENS - */
:root {
  --red:         #F05A1A;
  --red-dark:    #D04E16;
  --red-soft:    rgba(240,90,26,0.12);
  --red-glow:    rgba(240,90,26,0.25);
  --dark:        #3D3D3D;
  --card-bg:     #4A4A4A;
  --card-alt:    #1A1A1A;
  --mid:         #5A5A5A;
  --surface:     #F5F5F5;
  --txt-body:    #3D3D3D;
  --txt-muted:   #6B7280;
  --txt-faint:   #9CA3AF;
  --txt-on-dark: rgba(255,255,255,0.70);
  --bdr-dark:    rgba(255,255,255,0.07);
  --bdr-light:   rgba(0,0,0,0.09);
  --bdr-red:     rgba(240,90,26,0.30);
  --ff-display:  'Manrope', Impact, sans-serif;
  --ff-body:     'Inter', system-ui, sans-serif;
  --ff-script:   'Covered By Your Grace', cursive;
  --sp-1:  8px;  --sp-2:  16px; --sp-3:  24px; --sp-4:  32px;
  --sp-5:  40px; --sp-6:  48px; --sp-7:  56px; --sp-8:  64px;
  --sp-10: 80px; --sp-12: 96px; --sp-16: 128px;
  --r-xs: 2px;  --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;
  --sh-1: 0 1px  6px  rgba(0,0,0,0.10);
  --sh-2: 0 4px  16px rgba(0,0,0,0.15);
  --sh-3: 0 8px  32px rgba(0,0,0,0.22);
  --sh-4: 0 20px 60px rgba(0,0,0,0.30);
  --sh-r: 0 8px  32px var(--red-glow);
  --ease:     cubic-bezier(0.4,0,0.2,1);
  --t-xs:  120ms; --t-sm: 200ms; --t-md: 320ms; --t-lg: 600ms; --t-xl: 900ms;
  --max-w: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h:  72px;
}

/* - 2. TYPOGRAPHY - */
.ds-label {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--sp-2);
}
.ds-title {
  font-family: var(--ff-display);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #1A1A1A;
}
.ds-title--hero    { font-size: clamp(44px, 7.5vw, 92px); }
.ds-title--section { font-size: clamp(24px, 3.2vw, 48px); }
.ds-title--card    { font-size: clamp(20px, 2.8vw, 30px); }
.ds-title--red em  { font-style: normal; color: var(--red); }
.ds-title--white   { color: #fff; }
.ds-body    { font-family: var(--ff-body); font-weight: 400; line-height: 1.7; color: var(--txt-body); }
.ds-body--lg  { font-size: clamp(15px, 1.8vw, 18px); }
.ds-body--md  { font-size: 16px; }
.ds-body--sm  { font-size: 14px; }
.ds-body--muted   { color: var(--txt-muted); }
.ds-body--on-dark { color: var(--txt-on-dark); }

/* - 3. BUTTONS - */
.btn-ds {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: all var(--t-md) var(--ease);
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
  transform: scale(1);
}
.btn-ds::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-25deg);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 1;
}
.btn-ds:hover::before {
  left: 150%;
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn-ds:active {
  transform: scale(0.96);
}
.btn-ds > * {
  position: relative;
  z-index: 2;
}
.btn-ds-red        { background: var(--red);  color: #fff; border-color: var(--red); }
.btn-ds-red:hover  { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); box-shadow: var(--sh-r); color: #fff; }
.btn-ds-ghost      { background: transparent; color: #fff; border-color: rgba(255,255,255,0.30); }
.btn-ds-ghost:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.70); color: #fff; }
.btn-ds-dark       { background: var(--dark); color: #fff; border-color: var(--mid); }
.btn-ds-dark:hover { background: var(--mid); transform: translateY(-2px); color: #fff; }
.btn-ds-red-ghost       { background: transparent; color: var(--red); border-color: var(--red); }
.btn-ds-red-ghost:hover { background: var(--red); color: #fff; }
.btn-ds-sm { padding: 9px 18px; font-size: 11px; }
.btn-ds-lg { padding: 16px 36px; font-size: 13px; }
.btn-ds-xl { padding: 18px 48px; font-size: 14px; }

/* - 4. CARDS - */
.card-ds {
  background: var(--card-bg);
  border: 1px solid var(--bdr-dark);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-md) var(--ease), box-shadow var(--t-md) var(--ease), border-color var(--t-md) var(--ease);
}
.card-ds:hover { transform: translateY(-5px); box-shadow: var(--sh-4); border-color: var(--bdr-red); }
.card-ds-light {
  background: #fff;
  border: 1px solid var(--bdr-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-md) var(--ease), box-shadow var(--t-md) var(--ease);
}
.card-ds-light:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }

/* - 5. SECTION + LAYOUT - */
.section-ds          { position: relative; overflow: hidden; }
.section-ds--dark    { background: var(--dark);    color: #fff; }
.section-ds--card    { background: var(--card-bg); color: #fff; }
.section-ds--mid     { background: var(--card-alt); color: #fff; }
.section-ds--light   { background: var(--surface);  color: #1A1A1A; }
.section-ds--white   { background: #fff;            color: #1A1A1A; }
.section-ds--pad     { padding: var(--sp-12) 0; }
.section-ds--pad-sm  { padding: var(--sp-10) 0; }
.section-ds--pad-lg  { padding: clamp(80px,10vw,140px) 0; }

.ctr { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
.grid-2c { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: start; }
.grid-3c { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.grid-4c { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-3); }
.grid-6c { display: grid; grid-template-columns: repeat(6,1fr); gap: var(--sp-3); }
@media(max-width:1024px){ .grid-6c{grid-template-columns:repeat(3,1fr);} .grid-4c{grid-template-columns:repeat(2,1fr);} }
@media(max-width:768px) { .grid-2c,.grid-3c{grid-template-columns:1fr;} .grid-6c{grid-template-columns:repeat(2,1fr);} }
@media(max-width:480px) { .grid-4c,.grid-6c{grid-template-columns:1fr;} }

/* - 6. UTILITIES - */
.ds-label      { }
.ds-divider    { width: 44px; height: 3px; background: var(--red); border-radius: 2px; margin: 10px 0 20px; }
.tag-ds        { display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; border-radius: var(--r-xs); background: var(--red); color: #fff; }
.tag-ds--dark  { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); }
.icon-box-ds   { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius: var(--r-md); background: var(--red-soft); color: var(--red); font-size:20px; flex-shrink:0; transition: background var(--t-md) var(--ease); }
.icon-box-ds--sm { width:40px; height:40px; font-size:16px; }
.icon-box-ds--lg { width:64px; height:64px; font-size:24px; border-radius: var(--r-lg); }
.img-cover     { width:100%; height:100%; object-fit:cover; display:block; transition: transform var(--t-lg) var(--ease); }
.img-zoom:hover .img-cover { transform: scale(1.05); }

/* Removed header overrides to allow style.css to manage header styling */

/* - 8. SCROLL REVEAL - unified timing - */
.reveal, .reveal-left, .reveal-right, .reveal-scale {
  transition-duration: var(--t-lg) !important;
  transition-timing-function: var(--ease) !important;
}

/* - ANIMATIONS - */
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(30px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.92); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes pulse {
  0%,100% { transform:scale(1); }
  50%     { transform:scale(1.05); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position:200% 0; }
}

/* Button hover animations */
.btn-ds {
  position: relative;
  overflow: hidden;
}
.btn-ds::after {
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:0; height:0;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width 0.5s, height 0.5s;
}
.btn-ds:hover::after {
  width:300px;
  height:300px;
}

/* Image hover zoom */
.img-hover-zoom {
  overflow:hidden;
  border-radius: var(--r-lg);
}
.img-hover-zoom img,
.img-hover-zoom .img-cover {
  transition: transform 0.6s var(--ease);
}
.img-hover-zoom:hover img,
.img-hover-zoom:hover .img-cover {
  transform: scale(1.06);
}

/* Card tilt on hover */
.card-ds:hover,
.card-ds-light:hover {
  transform: translateY(-6px) rotate(-0.5deg);
}

/* Scroll reveal classes */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease);
}
.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease);
}
.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--t-lg) var(--ease), transform var(--t-lg) var(--ease);
}
.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* Staggered delays */
[data-delay='1'] { transition-delay: 0.1s !important; }
[data-delay='2'] { transition-delay: 0.2s !important; }
[data-delay='3'] { transition-delay: 0.3s !important; }
[data-delay='4'] { transition-delay: 0.4s !important; }
[data-delay='5'] { transition-delay: 0.5s !important; }
[data-delay='6'] { transition-delay: 0.6s !important; }

/* - MOBILE RESPONSIVENESS - */
@media (max-width: 768px) {
  :root { --nav-h: 60px; }
  .section-ds--pad    { padding: 64px 0; }
  .section-ds--pad-sm { padding: 48px 0; }
  .section-ds--pad-lg { padding: 80px 0; }
  .grid-2c { gap: 32px; }
  .btn-ds-lg { padding: 14px 28px; font-size: 12px; }
  .btn-ds-xl { padding: 15px 32px; font-size: 13px; }
  .ds-title--hero { font-size: clamp(32px, 8vw, 48px); text-align: center; }
  .ds-title--section { font-size: clamp(26px, 6vw, 40px); text-align: center; margin-left: auto; margin-right: auto; }
  .ds-label { display: block; text-align: center; margin-left: auto; margin-right: auto; }
  
  /* Center paragraphs immediately following a section title if they are max-width constrained (section descriptions) */
  .ds-title--section + .ds-body,
  div:has(> .ds-title--section) + .ds-body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Override inline 2-column grids on mobile */
  [style*="grid-template-columns:0."],
  [style*="grid-template-columns: 0."],
  [style*="grid-template-columns:1."],
  [style*="grid-template-columns: 1."],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Reduce large gaps on mobile for inline grids */
  [style*="gap:78px"], [style*="gap: 78px"],
  [style*="gap:80px"], [style*="gap: 80px"],
  [style*="gap:50px"], [style*="gap: 50px"],
  [style*="gap:60px"], [style*="gap: 60px"],
  [style*="gap:55px"], [style*="gap: 55px"] {
    gap: 32px !important;
  }
  
  /* Override inline repeat grids (e.g. repeat(4, 1fr)) to be 1 column on mobile */
  .ctr > div[style*="grid-template-columns:repeat"],
  .ctr > div[style*="grid-template-columns: repeat"],
  section[style*="grid-template-columns:repeat"],
  section[style*="grid-template-columns: repeat"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns:repeat(6"],
  [style*="grid-template-columns: repeat(6"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .ds-title--hero { font-size: 32px; }
  .ds-title--section { font-size: 26px; }
  .btn-ds { padding: 11px 20px; font-size: 11px; }
}
.btn-ds i { font-size: 11px; transition: transform var(--t-md) var(--ease); }

/* -- Global Quote Modal ------------------------------ */
.quote-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  padding: 20px;
}
.quote-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.quote-modal-content {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 32px;
  width: 100%;
  max-width: 600px;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}
.quote-modal-overlay.active .quote-modal-content {
  transform: translateY(0);
}
.quote-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--red);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 2;
}
.quote-modal-close:hover {
  transform: scale(1.1);
  background: #d04000;
}