/* ============================================================
   sc-page.css — Service & Contact Page
   Aesthetic: Precision-Industrial Dark Luxury
   Fonts: Syne (display) · DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --ink:        #08080C;
  --deep:       #0F0F16;
  --panel:      #141420;
  --edge:       rgba(255,255,255,.08);
  --edge-lt:    rgba(0,0,0,.08);
  --snow:       #FFFFFF;
  --chalk:      #F2F2F4;
  --mist:       rgba(255,255,255,.42);
  --fog:        rgba(255,255,255,.15);
  --fire:       #FF5E14;
  --fire-dim:   rgba(255,94,20,.14);
  --fire-glow:  rgba(255,94,20,.28);
  --ember:      #FF8C42;
  --green:      #22D47A;
  --blue:       #4A9EFF;
  --font-d:     'Syne', system-ui, sans-serif;
  --font-b:     'DM Sans', system-ui, sans-serif;
  --ease:       cubic-bezier(.22,.68,0,1.2);
  --smooth:     cubic-bezier(.25,.46,.45,.94);
  --spring:     cubic-bezier(.34,1.56,.64,1);
  --r-sm:       10px;
  --r-md:       16px;
  --r-lg:       24px;
  --r-xl:       32px;
}

/* ── Page-level font override (scoped to sc-page sections) ── */
/* Uses site header/footer as-is; only override inside <main> */
#main-content {
  font-family: var(--font-b);
  -webkit-font-smoothing: antialiased;
}

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes fadeUp     { from { opacity:0; transform:translateY(32px) } to { opacity:1; transform:none } }
@keyframes fadeIn     { from { opacity:0 } to { opacity:1 } }
@keyframes pulse      { 0%,100% { opacity:.5; transform:scale(1) } 50% { opacity:1; transform:scale(1.15) } }
@keyframes liveDot    { 0%,100% { box-shadow:0 0 0 3px rgba(34,212,122,.18) } 50% { box-shadow:0 0 0 8px rgba(34,212,122,.04) } }
@keyframes marquee    { from { transform:translateX(0) } to { transform:translateX(-33.333%) } }
@keyframes shimmer    { from { background-position:-200% 0 } to { background-position:200% 0 } }

/* ── Scroll reveal ──────────────────────────────────────────── */
.rv         { opacity:0; transform:translateY(28px); transition:opacity .72s var(--smooth), transform .72s var(--smooth); }
.rv.in      { opacity:1; transform:none; }
.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  }


/* ════════════════════════════════════════════════════════════
   PARTICLE CANVAS
════════════════════════════════════════════════════════════ */
.sc-canvas {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}


/* ════════════════════════════════════════════════════════════
   HERO
   — padding-top accounts for the site nav bar
════════════════════════════════════════════════════════════ */
.sc-hero {
  position:relative;
  min-height:80vh;
  display:flex;
  align-items:flex-end;
  /* top padding = nav height + breathing room; bottom = spacious */
  /*padding: calc(var(--nav-height, 72px) + 80px) 7% 80px;*/
  background:var(--ink);
  overflow:hidden;
}

/* Grid lines */
.sc-hero-grid {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,94,20,.04)  1px, transparent 1px),
    linear-gradient(90deg, rgba(255,94,20,.04) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 100%, black 30%, transparent 80%);
}

/* Decorative large text */
.sc-hero-bg-num {
  position:absolute; right:6%; top:50%; transform:translateY(-50%);
  font-family:var(--font-d);
  font-size:clamp(12rem, 22vw, 28rem);
  font-weight:900; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.04);
  user-select:none; pointer-events:none; z-index:0;
  letter-spacing:-.06em;
}

/* Glow orbs */
.sc-hero-orb {
  position:absolute; border-radius:50%; pointer-events:none; z-index:0;
  filter:blur(64px);
}
.sc-hero-orb-1 {
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(255,94,20,.09), transparent 65%);
  top:-120px; left:-100px;
  animation:pulse 9s ease-in-out infinite;
}
.sc-hero-orb-2 {
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(74,158,255,.06), transparent 65%);
  bottom:-80px; right:8%;
  animation:pulse 12s ease-in-out infinite reverse;
}
.tap-hero-inner {
  position: relative;
  z-index: 2;
  max-width: none;
}

/* */
.tap-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255,255,255,.4);
  margin-bottom: 32px;
  list-style: none;
  
}

.tap-breadcrumb a {
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--transition);
}
.tap-breadcrumb a:hover {
    color: #FF6A00;   /* orange color */
}

/* Hero inner */
.sc-hero-inner {
	position: relative;
    z-index: 1;
    max-width: none;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* gap: 60px; */
    flex-wrap: wrap;
    width: max-content;
}
.sc-hero-left  { flex:1; min-width:280px; }
.sc-hero-right {
  display:flex; flex-direction:column;
  align-items:flex-end; gap:20px;
  opacity:0; animation:fadeIn .8s .9s ease forwards;
}

/* Tag pill */
.sc-hero-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b);
  font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--fire);
  background:var(--fire-dim); border:1px solid var(--fire-glow);
  border-radius:100px; padding:7px 16px; margin-bottom:28px;
  opacity:0; animation:fadeUp .6s .1s var(--smooth) forwards;
}
.sc-hero-tag-dot {
  width:6px; height:6px; border-radius:50%; background:var(--fire);
  animation:pulse 2s ease infinite;
}

/* Heading */
.sc-hero-h1 {
  font-family:var(--font-d);
  font-size:clamp(3rem, 6vw, 6.2rem);
  font-weight:900; line-height:1.0; letter-spacing:-.04em;
  color:var(--snow);
  margin-bottom:24px;
}
.sc-hero-h1 .line { display:block; overflow:hidden; }
.sc-hero-h1 .line-inner {
  display:block;
  opacity:0; transform:translateY(100%);
  animation:fadeUp .75s var(--smooth) forwards;
}
.sc-hero-h1 .line:nth-child(1) .line-inner { animation-delay:.2s }
.sc-hero-h1 .line:nth-child(2) .line-inner { animation-delay:.36s }
.sc-hero-h1 .line:nth-child(3) .line-inner { animation-delay:.52s }
.sc-hero-accent { color:var(--fire); }

/* Desc */
.sc-hero-desc {
  font-family:var(--font-b);
  font-size:1rem; line-height:1.82;
  color:var(--mist); font-weight:300;
  max-width:480px;
  opacity:0; animation:fadeUp .7s .68s var(--smooth) forwards;
}

/* Stats band */
.sc-hero-stat-band {
  display:flex; gap:0;
  background:rgba(255,255,255,.05);
  border:1px solid var(--edge);
  border-radius:var(--r-md);
  overflow:hidden;
}
.sc-hero-stat {
  padding:20px 28px; text-align:center;
  border-right:1px solid var(--edge);
}
.sc-hero-stat:last-child { border-right:none; }
.sc-hero-stat-val {
  display:block;
  font-family:var(--font-d);
  font-size:1.6rem; font-weight:900; letter-spacing:-.04em;
  color:var(--fire); line-height:1; margin-bottom:4px;
}
.sc-hero-stat-lbl {
  display:block;
  font-family:var(--font-b);
  font-size:.63rem; font-weight:700;
  letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.32);
}

/* CTA buttons */
.sc-hero-btns { 
display:flex; 
gap:12px; 
flex-wrap:wrap;

}
.sc-btn {
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:var(--r-sm);
  font-family:var(--font-b); font-size:13px; font-weight:700;
  letter-spacing:.2px; text-decoration:none; cursor:pointer;
  transition:all .3s var(--smooth); border:none;
  position:relative; overflow:hidden;
}
.sc-btn-icon { transition:transform .3s var(--spring); flex-shrink:0; }
.sc-btn:hover .sc-btn-icon { transform:translateX(4px); }

.sc-btn-primary {
  background:var(--fire); color:#fff;
  box-shadow:0 4px 20px var(--fire-glow);
}
.sc-btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.18), transparent);
  opacity:0; transition:opacity .3s;
}
.sc-btn-primary:hover::before { opacity:1; }
.sc-btn-primary:hover { transform:translateY(-3px); box-shadow:0 10px 36px var(--fire-glow); }

.sc-btn-ghost {
  background:transparent; color:var(--snow);
  border:1.5px solid rgba(255,255,255,.22);
}
.sc-btn-ghost::before {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,.06);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--smooth);
}
.sc-btn-ghost:hover::before  { transform:scaleX(1); }
.sc-btn-ghost:hover { border-color:rgba(255,255,255,.5); transform:translateY(-2px); }


/* ════════════════════════════════════════════════════════════
   SECTION HEADERS
════════════════════════════════════════════════════════════ */
.sc-sec-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b);
  font-size:9.5px; font-weight:800;
  letter-spacing:3.5px; text-transform:uppercase;
  color:var(--fire); margin-bottom:16px;
}
.sc-sec-tag::before {
  content:''; width:28px; height:2px;
  background:var(--fire); border-radius:1px; flex-shrink:0;
}

/* Dark-background variant (default — used inside dark sections) */
.sc-sec-h2 {
  font-family:var(--font-d);
  font-size:clamp(2.2rem, 3.8vw, 4rem);
  font-weight:900; letter-spacing:-.04em; line-height:1.06;
  color:var(--snow);
}
.sc-sec-h2 em { font-style:normal; color:var(--fire); }

/* Light-background variant — used in contact section */
.sc-sec-tag--dark { color:var(--fire); }
.sc-sec-tag--dark::before { background:var(--fire); }
.sc-sec-h2--dark { color:var(--ink); }
.sc-sec-h2--dark em { color:var(--fire); }


/* ════════════════════════════════════════════════════════════
   MARQUEE
════════════════════════════════════════════════════════════ */
.sc-marquee-strip {
  overflow:hidden; padding:16px 0;
  background:var(--fire);
  position:relative;
}
.sc-marquee-strip::before,
.sc-marquee-strip::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:1;
}
.sc-marquee-strip::before { left:0;  background:linear-gradient(90deg,  var(--fire), transparent); }
.sc-marquee-strip::after  { right:0; background:linear-gradient(-90deg, var(--fire), transparent); }
.sc-marquee-track {
  display:flex; white-space:nowrap; width:max-content;
  animation:marquee 28s linear infinite;
}
.sc-marquee-strip:hover .sc-marquee-track { animation-play-state:paused; }
.sc-marquee-item {
  display:inline-flex; align-items:center; gap:14px;
  padding:0 24px;
  font-family:var(--font-b);
  font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}
.sc-marquee-dot { font-size:5px; opacity:.55; }


/* ════════════════════════════════════════════════════════════
   SERVICES SECTION
════════════════════════════════════════════════════════════ */
.sc-services {
  padding:100px 7%;
  background:var(--ink);
  position:relative; overflow:hidden;
}
.sc-services::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,94,20,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,94,20,.03) 1px, transparent 1px);
  background-size:88px 88px;
}

/* Section header row */
.sc-services-head {
  max-width:1200px; margin:0 auto 64px;
  display:grid; grid-template-columns:1fr 1fr;
  gap:60px; align-items:end;
}
.sc-services-intro-p {
  font-family:var(--font-b);
  font-size:.96rem; line-height:1.84;
  color:var(--mist); font-weight:300;
}

/* ── SERVICE CARD GRID ──────────────────────────────────────
   Layout: col-1 = featured (spans 2 rows)
           col-2 & col-3 = 4 smaller cards (2×2)
   Fixed heights so rows are equal and cards fill cleanly.  */
.sc-svc-grid {
  max-width:1200px; margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:1fr;          /* equal row heights */
  gap:16px;
  align-items:stretch;
}

/* All cards */
.sc-svc-card {
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--r-lg);
  overflow:hidden;
  position:relative;
  display:flex; flex-direction:column; /* so body can flex-grow */
  min-height:280px;
  transition:transform .42s var(--smooth), border-color .35s, box-shadow .42s;
  cursor:default;
}
.sc-svc-card:hover {
  transform:translateY(-5px);
  border-color:rgba(255,94,20,.3);
  box-shadow:0 20px 56px rgba(0,0,0,.4), 0 0 0 1px rgba(255,94,20,.12);
}

/* Shine sweep on hover */
.sc-svc-card::after {
  content:''; position:absolute; top:0; left:-130%; width:70%; height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.05), transparent);
  transition:left .6s var(--smooth); pointer-events:none;
}
.sc-svc-card:hover::after { left:140%; }

/* Featured card — spans column 1, rows 1–2 */
.sc-svc-card--feat {
  grid-column:1;
  grid-row:1 / 3;
  min-height:0; /* let grid rows define height */
  background:var(--deep);
}
.sc-svc-card--feat .sc-svc-visual {
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 55% at 50% 0%, rgba(255,94,20,.13) 0%, transparent 65%);
}

/* Card number badge — top-left */
.sc-svc-card-num {
  position:absolute; top:22px; left:24px;
  font-family:var(--font-d);
  font-size:11px; font-weight:800; letter-spacing:1.5px;
  color:var(--fire); background:var(--fire-dim);
  border-radius:6px; padding:3px 9px;
  z-index:2;
}

/* Icon — top-right */
.sc-svc-card-icon {
  position:absolute; top:20px; right:22px;
  width:50px; height:50px; border-radius:var(--r-sm);
  background:rgba(255,255,255,.07); border:1px solid var(--edge);
  display:grid; place-items:center;
  transition:all .4s var(--spring);
  z-index:2;
}
.sc-svc-card:hover .sc-svc-card-icon {
  background:var(--fire); border-color:var(--fire);
  transform:scale(1.08) rotate(-8deg);
  box-shadow:0 0 28px var(--fire-glow);
}
.sc-svc-card--feat .sc-svc-card-icon {
  width:60px; height:60px; border-radius:var(--r-md);
}
.sc-svc-card-icon svg { stroke:var(--fire); transition:stroke .3s; fill:none; }
.sc-svc-card:hover .sc-svc-card-icon svg { stroke:#fff; }

/* Colour accent bar (non-featured cards) */
.sc-svc-card-accent {
  position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--clr, var(--fire)); overflow:hidden; z-index:2;
}
.sc-svc-card-accent::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation:shimmer 2.5s linear infinite;
  animation-delay:var(--shimmer-delay, 0s);
}

/* Card body — flex-grow fills remaining height */
.sc-svc-card-body {
  position:relative; z-index:1;
  padding:72px 24px 28px; /* top clears the abs-positioned icon row */
  display:flex; flex-direction:column;
  flex:1;
}
.sc-svc-card--feat .sc-svc-card-body {
  padding:80px 32px 36px;
  justify-content:flex-end; /* push content to bottom in tall card */
}

/* Badge */
.sc-svc-badge {
  display:inline-flex; align-items:center;
  font-family:var(--font-b);
  font-size:.65rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:4px 10px; border-radius:100px; margin-bottom:12px;
  background:rgba(255,255,255,.06); color:rgba(255,255,255,.45);
  width:fit-content;
}

/* Title */
.sc-svc-card-title {
  font-family:var(--font-d);
  font-size:1.15rem; font-weight:800; letter-spacing:-.025em;
  color:var(--snow); margin-bottom:10px; line-height:1.25;
}
.sc-svc-card--feat .sc-svc-card-title {
  font-size:1.65rem; margin-bottom:14px;
}

/* Description */
.sc-svc-card-desc {
  font-family:var(--font-b);
  font-size:.82rem; line-height:1.72;
  color:var(--mist); font-weight:300;
  margin-bottom:20px;
}
.sc-svc-card--feat .sc-svc-card-desc { font-size:.92rem; }

/* Feature list */
.sc-svc-card-feats {
  list-style:none;
  display:flex; flex-direction:column; gap:9px;
  border-top:1px solid var(--edge); padding-top:18px;
  margin-top:auto; /* push to bottom of flex column */
}
.sc-svc-card-feats li {
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-b);
  font-size:.77rem; color:rgba(255,255,255,.5); line-height:1.4;
}
.sc-svc-card-feats li svg { stroke:var(--fire); flex-shrink:0; fill:none; }

/* CTA link */
.sc-svc-link {
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-b);
  font-size:.78rem; font-weight:700; color:var(--fire);
  text-decoration:none; margin-top:18px;
  transition:gap .22s; width:fit-content;
}
.sc-svc-link:hover { gap:11px; }
.sc-svc-link svg { stroke:var(--fire); fill:none; flex-shrink:0; }

/* Stats row inside featured card */
.sc-svc-stats {
  display:flex; gap:0;
  background:rgba(255,255,255,.04); border:1px solid var(--edge);
  border-radius:var(--r-sm); overflow:hidden; margin-bottom:24px;
}
.sc-svc-stat {
  flex:1; padding:14px 0; text-align:center;
  border-right:1px solid var(--edge);
}
.sc-svc-stat:last-child { border-right:none; }
.sc-svc-stat-v {
  display:block; font-family:var(--font-d);
  font-size:1.1rem; font-weight:800;
  color:var(--fire); letter-spacing:-.03em;
}
.sc-svc-stat-l {
  display:block; font-family:var(--font-b);
  font-size:.6rem; font-weight:700; letter-spacing:.8px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-top:2px;
}


/* ════════════════════════════════════════════════════════════
   CONTACT SECTION  (light background)
════════════════════════════════════════════════════════════ */
.sc-contact {
  background:var(--chalk);
  padding:100px 7%;
  position:relative; overflow:hidden;
}
.sc-contact::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 92% 8%, rgba(255,94,20,.05), transparent);
}

/* Layout: form left | info right */
.sc-contact-layout {
  max-width:1200px; margin:0 auto;
  display:grid; grid-template-columns:1.08fr 1fr;
  gap:60px; align-items:start;
}

/* Contact heading */
.sc-contact-head { margin-bottom:36px; }

/* Tab bar */
.sc-tabs {
  display:flex;
  background:rgba(0,0,0,.07);
  border-radius:12px; padding:4px; gap:0;
  margin-bottom:32px; position:relative;
}
.sc-tab {
  flex:1; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:11px 14px; border-radius:9px;
  font-family:var(--font-b); font-size:12.5px; font-weight:700;
  color:rgba(0,0,0,.4); /* visible on light bg */
  background:transparent; border:none; cursor:pointer;
  transition:color .22s; position:relative; z-index:1;
  white-space:nowrap;
}
.sc-tab.active { color:var(--ink); }
.sc-tab svg { stroke:currentColor; fill:none; flex-shrink:0; transition:transform .3s var(--spring); }
.sc-tab:hover svg { transform:scale(1.15); }

.sc-tab-glider {
  position:absolute; height:calc(100% - 8px); top:4px;
  background:#fff; border-radius:9px;
  box-shadow:0 2px 10px rgba(0,0,0,.1);
  transition:left .35s var(--spring), width .35s var(--spring);
  z-index:0;
}

/* Form */
.sc-form { display:flex; flex-direction:column; gap:0; }
.sc-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.sc-field { position:relative; margin-bottom:28px; }
.sc-field-full { grid-column:1/-1; }

/* Floating-label inputs */
.sc-input {
  width:100%; padding:22px 0 9px;
  background:transparent; border:none;
  border-bottom:1.5px solid rgba(0,0,0,.16);
  font-family:var(--font-b); font-size:.9rem;
  color:var(--ink); /* dark text on light bg */
  outline:none; transition:border-color .28s; display:block;
  -webkit-appearance:none;
}
.sc-input:focus { border-bottom-color:var(--fire); }
.sc-field-bar {
  position:absolute; bottom:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--fire), var(--ember));
  transform:scaleX(0); transform-origin:left;
  transition:transform .35s var(--smooth); border-radius:2px;
}
.sc-input:focus    ~ .sc-field-bar,
.sc-input.has-v    ~ .sc-field-bar { transform:scaleX(1); }

.sc-label {
  position:absolute; top:14px; left:0;
  font-family:var(--font-b); font-size:.83rem; font-weight:500;
  color:rgba(0,0,0,.4); /* visible dark placeholder on light bg */
  pointer-events:none; transition:all .24s var(--smooth); transform-origin:left top;
}
.sc-input:focus    ~ .sc-label,
.sc-input.has-v    ~ .sc-label {
  top:2px; font-size:.61rem; font-weight:800;
  letter-spacing:.7px; text-transform:uppercase; color:var(--fire);
}
.sc-req { color:var(--fire); }
.sc-textarea { resize:vertical; min-height:110px; padding-top:26px; }
.sc-select    { cursor:pointer; }

/* Product chips */
.sc-chips-label {
  font-family:var(--font-b);
  font-size:.61rem; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--fire); margin-bottom:10px;
}
.sc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.sc-chip input { display:none; }
.sc-chip span {
  display:inline-flex; align-items:center;
  padding:7px 16px; font-family:var(--font-b); font-size:.77rem; font-weight:600;
  color:rgba(0,0,0,.5); /* visible on chalk bg */
  background:rgba(0,0,0,.05);
  border:1.5px solid rgba(0,0,0,.12); border-radius:100px;
  cursor:pointer; transition:all .22s var(--smooth); user-select:none;
}
.sc-chip span:hover    { border-color:var(--fire); color:var(--ink); transform:translateY(-1px); }
.sc-chip input:checked + span {
  background:var(--fire); color:#fff; border-color:var(--fire);
  box-shadow:0 4px 16px var(--fire-glow);
}

/* Submit button */
.sc-submit-wrap { padding-top:4px; }
.sc-submit {
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:17px 28px; border-radius:var(--r-sm);
  background:var(--ink); color:#fff;
  font-family:var(--font-b); font-size:.93rem; font-weight:800;
  border:none; cursor:pointer; letter-spacing:.2px;
  transition:all .3s var(--smooth);
  position:relative; overflow:hidden;
}
.sc-submit::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, var(--fire), var(--ember));
  transform:translateX(-102%); transition:transform .42s var(--smooth);
}
.sc-submit:hover::before { transform:translateX(0); }
.sc-submit:hover { transform:translateY(-3px); box-shadow:0 12px 40px var(--fire-glow); }
.sc-submit:active { transform:translateY(-1px); }
.sc-submit:disabled { opacity:.55; transform:none; box-shadow:none; }
#scSubmitTxt, .sc-submit-ico { position:relative; z-index:1; }
.sc-submit-ico svg { stroke:currentColor; fill:none; transition:transform .3s var(--spring); }
.sc-submit:hover .sc-submit-ico svg { transform:translateX(4px); }

/* Privacy note */
.sc-privacy {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--font-b); font-size:.71rem;
  color:rgba(0,0,0,.4); margin-top:14px;
}
.sc-privacy svg { stroke:rgba(0,0,0,.35); fill:none; flex-shrink:0; }
.sc-privacy a { color:var(--fire); text-decoration:none; font-weight:600; }

/* Alert boxes */
.sc-alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:10px; margin-bottom:20px;
  font-family:var(--font-b); font-size:.83rem; font-weight:500; line-height:1.5;
}
.sc-alert--success { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.sc-alert--error   { background:#fef2f2; border:1px solid #fca5a5; color:#991b1b; }
.sc-alert svg { flex-shrink:0; margin-top:1px; fill:none; stroke:currentColor; }


/* ── RIGHT — Info cards + map ───────────────────────────── */
.sc-contact-right { display:flex; flex-direction:column; gap:20px; }

/* 2×2 info card grid */
.sc-info-cards {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.sc-info-card {
  background:var(--ink); /* dark card on light section */
  border-radius:var(--r-md);
  padding:22px;
  border:1px solid var(--edge);
  text-decoration:none;
  display:flex; flex-direction:column; gap:0;
  transition:all .35s var(--smooth);
  position:relative; overflow:hidden;
}
.sc-info-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle 120px at var(--mx,50%) var(--my,50%), rgba(255,94,20,.08), transparent);
  opacity:0; transition:opacity .3s;
}
.sc-info-card:hover::before { opacity:1; }
.sc-info-card:hover {
  border-color:rgba(255,94,20,.3);
  transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.28);
}

/* Icon */
.sc-info-card-icon {
  width:40px; height:40px; border-radius:9px;
  background:var(--fire-dim); display:grid; place-items:center;
  margin-bottom:14px; flex-shrink:0;
  transition:all .3s var(--spring);
}
.sc-info-card:hover .sc-info-card-icon {
  background:var(--fire);
  transform:scale(1.1) rotate(-6deg);
  box-shadow:0 0 20px var(--fire-glow);
}
.sc-info-card-icon svg { stroke:var(--fire); fill:none; transition:stroke .25s; }
.sc-info-card:hover .sc-info-card-icon svg { stroke:#fff; }

/* Label — small uppercase on dark card */
.sc-info-card-label {
  font-family:var(--font-b);
  font-size:.61rem; font-weight:800; letter-spacing:1.2px; text-transform:uppercase;
  color:rgba(255,255,255,.35); /* white on dark card */
  margin-bottom:5px;
}
/* Value — prominent white text on dark card */
.sc-info-card-value {
  font-family:var(--font-b);
  font-size:.88rem; font-weight:600;
  color:var(--snow); /* white on dark card */
  line-height:1.55;
}

/* Arrow decoration */
.sc-info-card-arrow {
  position:absolute; top:18px; right:18px;
  font-size:14px; color:rgba(255,255,255,.18);
  transition:all .25s;
}
.sc-info-card:hover .sc-info-card-arrow { color:var(--fire); transform:translate(2px,-2px); }

/* Address card spans full row */
.sc-info-card--addr { grid-column:1/-1; }

/* Online badge */
.sc-online-badge {
  display:inline-flex; align-items:center; gap:7px; margin-top:8px;
  font-family:var(--font-b);
  font-size:.68rem; font-weight:700;
  color:var(--green);
  background:rgba(34,212,122,.1); border:1px solid rgba(34,212,122,.2);
  border-radius:100px; padding:4px 12px; width:fit-content;
}
.sc-online-dot {
  width:6px; height:6px; border-radius:50%; background:var(--green);
  animation:liveDot 2s ease infinite;
}

/* Hours bar */
.sc-hours {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 18px;
  background:var(--ink); border-radius:var(--r-sm);
  border:1px solid var(--edge);
  font-family:var(--font-b);
  font-size:.78rem; font-weight:500;
  color:rgba(255,255,255,.5); /* white on dark bg */
}
.sc-hours strong { color:var(--snow); font-weight:700; }
.sc-hours-dot {
  width:8px; height:8px; border-radius:50%; background:var(--green);
  box-shadow:0 0 0 3px rgba(34,212,122,.18); flex-shrink:0;
  animation:liveDot 2s ease infinite;
}

/* Map card */
.sc-map-card {
  border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--edge);
  position:relative;
  border: 2px solid #FF5E14; /* orange border */
  border-radius: 12px;       /* optional: match your card style */
  overflow: hidden;  
}
.sc-map-card iframe {
  width:100%; height:240px; border:none; display:block;
  filter:grayscale(20%) contrast(1.05);
}
.sc-map-footer {
  background:var(--ink); padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.sc-map-label {
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-b);
  font-size:.8rem; font-weight:500;
  color:var(--snow); /* white on dark footer */
}
.sc-map-label svg { stroke:var(--fire); fill:none; flex-shrink:0; }
.sc-map-dir {
  font-family:var(--font-b);
  font-size:.75rem; font-weight:700; color:var(--fire);
  text-decoration:none; display:flex; align-items:center; gap:4px;
  transition:gap .2s; white-space:nowrap;
}
.sc-map-dir:hover { gap:8px; }


/* ════════════════════════════════════════════════════════════
   BOTTOM CTA STRIP  (dark)
════════════════════════════════════════════════════════════ */
.sc-cta {
  padding:88px 7%;
  background:var(--deep);
  position:relative; overflow:hidden; text-align:center;
}
.sc-cta::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,94,20,.07), transparent);
}
.sc-cta-topline {
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--fire), transparent);
}
.sc-cta-inner { position:relative; z-index:1; max-width:700px; margin:0 auto; }

.sc-cta-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-b);
  font-size:10px; font-weight:700; letter-spacing:3px; text-transform:uppercase;
  color:var(--fire); margin-bottom:24px;
}
.sc-cta-h2 {
  font-family:var(--font-d);
  font-size:clamp(2.2rem, 4vw, 3.8rem);
  font-weight:900; letter-spacing:-.04em; line-height:1.08;
  color:var(--snow); margin-bottom:18px;
}
.sc-cta-h2 em { font-style:normal; color:var(--fire); }
.sc-cta-p {
  font-family:var(--font-b);
  font-size:.97rem; line-height:1.8;
  color:var(--mist); font-weight:300; margin-bottom:40px;
}
.sc-cta-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.sc-cta-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 32px; border-radius:var(--r-sm);
  font-family:var(--font-b); font-size:14px; font-weight:800;
  text-decoration:none; transition:all .32s var(--smooth);
  border:none; cursor:pointer; position:relative; overflow:hidden; letter-spacing:.2px;
}
.sc-cta-btn-ico { transition:transform .3s var(--spring); flex-shrink:0; }
.sc-cta-btn:hover .sc-cta-btn-ico { transform:translateX(4px); }
.sc-cta-btn svg { stroke:currentColor; fill:none; }

.sc-cta-btn-primary {
  background:var(--fire); color:#fff;
  box-shadow:0 6px 28px var(--fire-glow);
}
.sc-cta-btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.2), transparent);
  opacity:0; transition:opacity .3s;
}
.sc-cta-btn-primary:hover::before { opacity:1; }
.sc-cta-btn-primary:hover { transform:translateY(-4px); box-shadow:0 16px 44px var(--fire-glow); }

.sc-cta-btn-ghost {
  background:transparent; color:var(--snow);
  border:2px solid rgba(255,255,255,.22);
}
.sc-cta-btn-ghost:hover { border-color:rgba(255,255,255,.6); transform:translateY(-3px); background:rgba(255,255,255,.06); }


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */
@media (max-width:1100px) {
  .sc-services-head  { grid-template-columns:1fr; gap:24px; }
  .sc-svc-grid       { grid-template-columns:repeat(2, 1fr); grid-auto-rows:auto; }
  .sc-svc-card--feat { grid-column:1/-1; grid-row:auto; min-height:360px; }
  .sc-contact-layout { grid-template-columns:1fr; }
}

@media (max-width:768px) {
  .sc-hero {
    padding-top: calc(var(--nav-height, 72px) + 52px);
    padding-bottom: 64px;
    min-height:auto;
  }
  .sc-hero-inner    { flex-direction:column; align-items:flex-start; }
  .sc-hero-right    { width:100%; align-items:flex-start; }
  .sc-hero-stat-band { width:100%; }

  .sc-services      { padding:72px 5%; }
  .sc-contact       { padding:72px 5%; }
  .sc-cta           { padding:72px 5%; }

  .sc-svc-grid      { grid-template-columns:1fr; }
  .sc-svc-card--feat { min-height:460px; }

  .sc-row           { grid-template-columns:1fr; }
  .sc-info-cards    { grid-template-columns:1fr; }
  .sc-info-card--addr { grid-column:1; }
}

@media (max-width:480px) {
  .sc-hero-btns  { flex-direction:column; width:100%; }
  .sc-btn        { justify-content:center; }
  .sc-cta-btns   { flex-direction:column; align-items:stretch; }
  .sc-cta-btn    { justify-content:center; }
}