/* ==========================================================
   SkidGreen Élite — INNER PAGES STYLESHEET
   Extends style.css. Uses the same design tokens (colors,
   fonts, radius, easing) defined in :root inside style.css.
   ========================================================== */

body{ font-size:15px; line-height:1.65; }
p{ font-size:1rem; }

/* ---------- Breadcrumb + Page Hero ---------- */
.sg-breadcrumb{
  max-width:1500px; margin:0 auto; padding:14px 32px 0;
  font-size:.8rem; color:var(--sg-gray-600); display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.sg-breadcrumb a{ color:var(--sg-gray-600); }
.sg-breadcrumb a:hover{ color:var(--sg-blue-dark); }
.sg-breadcrumb span{ color:var(--sg-gray-200); }
.sg-breadcrumb .current{ color:var(--sg-black); font-weight:600; }

.sg-pagehero{
  position:relative; margin:18px 32px 0; border-radius:14px; overflow:hidden;
  min-height:340px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
}
.sg-pagehero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(23,26,32,.88) 0%, rgba(23,26,32,.55) 45%, rgba(23,26,32,.15) 100%);
}
.sg-pagehero-inner{ position:relative; z-index:1; padding:44px 40px 34px; color:#fff; max-width:900px; }
.sg-pagehero .sg-eyebrow{ color:var(--sg-blue); }
.sg-pagehero h1{ font-size:clamp(1.9rem, 4vw, 3rem); margin:8px 0 12px; color:#fff; line-height:1.08; }
.sg-pagehero p{ color:#e9e9e9; font-size:1.02rem; max-width:640px; margin:0 0 20px; }
@media (max-width:640px){
  .sg-pagehero{ margin:12px 16px 0; min-height:280px; }
  .sg-pagehero-inner{ padding:28px 22px 26px; }
  .sg-breadcrumb{ padding:12px 16px 0; }
}

/* ---------- Shared eyebrow / heads reused from style.css: .sg-eyebrow, .sg-section-head ---------- */
.sg-inner-section{ padding:64px 0; }
.sg-inner-section--tight{ padding:44px 0; }
.sg-inner-section--alt{ background:var(--sg-gray-100); }
.sg-inner-section--dark{ background:var(--sg-black); color:#fff; }
.sg-inner-section--dark .sg-eyebrow{ color:var(--sg-blue); }
.sg-inner-section--dark p{ color:#c7c8ca; }
.sg-inner-section--dark h2, .sg-inner-section--dark h3{ color:#fff; }

/* ---------- Split (image / copy) rows, alternating ---------- */
.sg-split{
  max-width:1500px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;
}
.sg-split + .sg-split{ margin-top:64px; }
.sg-split-media img{ width:100%; border-radius:12px; display:block; aspect-ratio:4/3; object-fit:cover; }
.sg-split-copy h3{ font-size:1.5rem; margin:10px 0 14px; }
.sg-split-copy p{ color:var(--sg-gray-600); margin-bottom:16px; }
.sg-split-copy ul{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:10px; }
.sg-split-copy ul li{ display:flex; gap:10px; align-items:flex-start; font-size:.95rem; color:var(--sg-gray-900); }
.sg-split-copy ul li i{ color:var(--sg-blue); margin-top:3px; }
/*.sg-split.sg-split--rev .sg-split-media{ order:2; }*/
@media (max-width:900px){
  .sg-split{ grid-template-columns:1fr; gap:26px; }
  .sg-split.sg-split--rev .sg-split-media{ order:0; }
  .sg-split + .sg-split{ margin-top:40px; }
}

/* ---------- Stat strip ---------- */
.sg-stat-strip{
  max-width:1500px; margin:0 auto; padding:0 0px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--sg-gray-200); border-radius:12px; overflow:hidden;
}
.sg-stat-strip div{ background:#fff; padding:28px 20px; text-align:center; }
.sg-stat-strip strong{ display:block; font-family:var(--sg-font-head); font-size:clamp(1.6rem,3vw,2.2rem); color:var(--sg-blue-dark); }
.sg-stat-strip span{ font-size:.82rem; color:var(--sg-gray-600); text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:700px){ .sg-stat-strip{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Timeline / process ---------- */
.sg-vtimeline{ max-width:900px; margin:0 auto; padding:0 32px; position:relative; }
.sg-vtimeline::before{ content:""; position:absolute; left:51px; top: 122px;
    bottom: 13px; width:2px; background:var(--sg-gray-200); }
.sg-vtimeline-step{ position:relative; display:flex; gap:24px; padding-bottom:36px; }
.sg-vtimeline-step:last-child{ padding-bottom:0; }
.sg-vtimeline-num{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--sg-black); color:#fff;
  display:flex; align-items:center; justify-content:center; font-family:var(--sg-font-head); font-weight:700; font-size:1.05rem; z-index:1;
}
.sg-vtimeline-step.is-accent .sg-vtimeline-num{ background:var(--sg-blue); }
.sg-vtimeline-body h4{ margin:6px 0 6px; font-size:1.1rem; }
.sg-vtimeline-body p{ color:var(--sg-gray-600); margin:0; font-size:.94rem; }
@media (max-width:640px){
  .sg-vtimeline::before{ left:31px; }
  .sg-vtimeline-num{ flex-basis:32px; width:32px; height:32px; font-size:.9rem; }
  .sg-vtimeline-step{ gap:16px; }
}

/* ---------- Icon feature grid ---------- */
.sg-feature-grid{
  max-width:1500px; margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.sg-feature-card{
  background:#fff; border:1px solid var(--sg-gray-200); border-radius:12px; padding:26px 24px;
  transition:transform .25s var(--sg-ease), box-shadow .25s var(--sg-ease);
}
.sg-feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08); }
.sg-feature-card i{ font-size:1.4rem; color:var(--sg-blue); background:rgba(116,192,79,.12); width:48px; height:48px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.sg-feature-card h4{ font-size:1.05rem; margin:0 0 8px; }
.sg-feature-card p{ font-size:.9rem; color:var(--sg-gray-600); margin:0; }
@media (max-width:900px){ .sg-feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .sg-feature-grid{ grid-template-columns:1fr; } }

/* ---------- Comparison table ---------- */
.sg-compare-wrap{ max-width:1100px; margin:0 auto; padding:0 32px; overflow-x:auto; }
table.sg-compare{ width:100%; border-collapse:collapse; min-width:560px; background:#fff; }
table.sg-compare th, table.sg-compare td{ padding:16px 18px; border-bottom:1px solid var(--sg-gray-200); text-align:left; font-size:.92rem; }
table.sg-compare thead th{ font-family:var(--sg-font-head); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--sg-gray-600); border-bottom:2px solid var(--sg-black); }
table.sg-compare td:first-child, table.sg-compare th:first-child{ font-weight:600; }
table.sg-compare td.yes{ color:var(--sg-blue-dark); font-weight:700; }
table.sg-compare td.no{ color:#c23434; }

/* ---------- CTA banner ---------- */
.sg-cta-banner{
  max-width:1500px; margin:0 auto; padding:48px 48px; border-radius:14px;
  background:var(--sg-black); color:#fff; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.sg-cta-banner h3{ margin:0 0 8px; font-size:1.5rem; color:#fff; }
.sg-cta-banner p{ margin:0; color:#c7c8ca; max-width:520px; font-size:.95rem; }
@media (max-width:640px){ .sg-cta-banner{ padding:32px 24px; } }

/* ---------- Testimonial ---------- */
.sg-testi{
  max-width:820px; margin:0 auto; padding:0 32px; text-align:center;
}
.sg-testi blockquote{ font-family:var(--sg-font-head); font-size:1.3rem; line-height:1.4; margin:0 0 18px; }
.sg-testi cite{ font-style:normal; font-size:.85rem; color:var(--sg-gray-600); }

/* ---------- Gallery ---------- */
.sg-gallery{ max-width:1500px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.sg-gallery img{ width:100%; height:190px; object-fit:cover; border-radius:10px; display:block; }
@media (max-width:900px){ .sg-gallery{ grid-template-columns:repeat(2,1fr); } }

/* ---------- FAQ accordion (reuses bootstrap accordion, restyled) ---------- */
.sg-faq-wrap{ max-width:820px; margin:0 auto; padding:0 32px; }
.sg-faq-wrap .accordion-item{ border:none; border-bottom:1px solid var(--sg-gray-200); border-radius:0; }
.sg-faq-wrap .accordion-button{ font-family:var(--sg-font-head); font-weight:600; font-size:1rem; padding:18px 15px; box-shadow:none; }
.sg-faq-wrap .accordion-button:not(.collapsed){ color:var(--sg-blue-dark); background:transparent; }
.sg-faq-wrap .accordion-body{ padding:0 15px 20px; color:var(--sg-gray-600); font-size:.94rem; }
.sg-faq-wrap .accordion-button:focus{ box-shadow:none; }

/* ---------- Contact / form panel ---------- */
.sg-contact-grid{ max-width:1500px; margin:0 auto; padding:0 32px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; }
.sg-contact-form{ background:#fff; border:1px solid var(--sg-gray-200); border-radius:14px; padding:34px; }
.sg-contact-form .sg-field{ margin-bottom:18px; }
.sg-contact-form label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; color:var(--sg-gray-900); }
.sg-contact-form input, .sg-contact-form select, .sg-contact-form textarea{
  width:100%; padding:.7rem .9rem; border:1px solid var(--sg-gray-200); border-radius:var(--sg-radius); font-family:var(--sg-font-body); font-size:.95rem; background:#fff;
}
.sg-contact-form input:focus, .sg-contact-form select:focus, .sg-contact-form textarea:focus{ outline:2px solid var(--sg-blue); border-color:var(--sg-blue); }
.sg-contact-side{ display:flex; flex-direction:column; gap:18px; }
.sg-contact-card{ background:#fff; border-radius:12px; padding:22px 24px; }
.sg-contact-card i{ color:var(--sg-blue); width:22px; }
.sg-contact-card h4{ font-size:.95rem; margin:0 0 4px; }
.sg-contact-card p{ margin:0; font-size:.88rem; color:var(--sg-gray-600); }
@media (max-width:900px){ .sg-contact-grid{ grid-template-columns:1fr; } }

/* ---------- Utility ---------- */
.sg-text-center{ text-align:center; }
.sg-mt-0{ margin-top:0 !important; }
.sg-chip{ display:inline-flex; align-items:center; gap:6px; background:rgba(116,192,79,.12); color:var(--sg-blue-dark); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:.04em; }
@media(max-width:768px)
{
    .sg-fsd-stats strong {
    line-height: 1.2;
}
.sg-calc-result-row {
  
    gap: 20px;
}
.sg-calc-result-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--sg-gray-200); font-size:.92rem; color:var(--sg-gray-600);
}
.sg-calc-result-row strong {
   
    text-align: end;
}
 .sg-slider--cards.sg-slider--peek .sg-card-slide   .sg-card-copy {
        left: 20px;
        bottom: 50px;
    }
}