/* ═══════════════════════════════════════════════════════════════════════
   FETSCO public site — shared design system
   One dark, warm-accented identity across every page (marketing homepage
   and every dedicated appliance page): deep aubergine background, an
   orange→pink gradient as the single accent, Space Grotesk for display
   type, Inter for body copy, JetBrains Mono for small data-style labels
   (job IDs, coverage stats) — the same three-typeface pairing the rest of
   this site already used, kept intentionally rather than swapped out.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#140B1D; --bg-2:#1B1128; --bg-3:#241732; --surface:#1E1430; --surface-2:#251A38;
  --border:rgba(255,255,255,.09); --border-soft:rgba(255,255,255,.05); --border-strong:rgba(255,255,255,.16);
  --text:#F5F1FA; --text-dim:#A79BB8; --text-faint:#6E6482;
  --accent-a:#FF7A3D; --accent-b:#FF3D6E;
  --accent-grad:linear-gradient(135deg,var(--accent-a),var(--accent-b));
  --accent-grad-soft:linear-gradient(135deg,rgba(255,122,61,.14),rgba(255,61,110,.14));
  --success:#3ED598; --info:#4FD1E8; --danger:#FF6B6B;
  --radius:14px; --radius-lg:20px; --radius-sm:9px;
  --container:1180px;
  --shadow-glow:0 20px 60px -20px rgba(255,61,110,.35);
  --nav-glass:rgba(20,11,29,.82); --shadow-nav:0 8px 24px -12px rgba(0,0,0,.5);
  --orb-opacity:.28;
  --icon-stroke:#FF7A3D;
  color-scheme: dark;
}
/* ── Light mode — toggled by adding data-theme="light" to <html> (see the inline
   FOUC-prevention snippet in each page's <head>, and the toggle button wired up in site.js).
   Same brand accent (orange→pink) in both themes; only background/surface/text/border flip,
   so nothing about the identity changes, just which mode it's presented in. ── */
[data-theme="light"]{
  --bg:#FBF8FC; --bg-2:#F3EEF7; --bg-3:#EAE1F0; --surface:#FFFFFF; --surface-2:#F6F1FA;
  --border:rgba(20,11,29,.10); --border-soft:rgba(20,11,29,.06); --border-strong:rgba(20,11,29,.18);
  --text:#1E1229; --text-dim:#5C5069; --text-faint:#8B8098;
  --accent-grad-soft:linear-gradient(135deg,rgba(255,122,61,.10),rgba(255,61,110,.10));
  --success:#12965F; --info:#0E86A6; --danger:#D9483F;
  --shadow-glow:0 20px 60px -20px rgba(255,61,110,.22);
  --nav-glass:rgba(251,248,252,.86); --shadow-nav:0 8px 24px -12px rgba(20,11,29,.16);
  --orb-opacity:.14;
  color-scheme: light;
}
[data-theme="light"] .logo-mark, [data-theme="light"] .btn-primary{color:#2A1508;}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;background:var(--bg);transition:background .3s ease;}
body{color:var(--text);font-family:'Inter',sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:color .3s ease;}
a{color:var(--accent-a);text-decoration:none;}
a:hover{color:var(--accent-b);}
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;margin:0;text-wrap:balance;font-weight:600;}
p{margin:0;}
img{max-width:100%;display:block;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--container);margin:0 auto;padding:0 64px;}
.section{padding:100px 0;}
.section-tight{padding:64px 0;}
.eyebrow{font-size:13px;font-weight:600;color:var(--accent-a);}
.grad-text{background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ── Buttons ── */
.btn-primary,.btn-ghost{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:13px 24px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:none;}
.btn-primary{background:var(--accent-grad);color:#1A0E0E;transition:filter .15s,transform .15s;}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px);color:#1A0E0E;}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);transition:background .15s,border-color .15s;}
.btn-ghost:hover{background:var(--bg-3);border-color:var(--border-strong);color:var(--text);}

/* ── Light/dark toggle ── */
.theme-toggle{width:38px;height:38px;flex-shrink:0;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:border-color .15s,color .15s;}
.theme-toggle:hover{border-color:var(--border-strong);color:var(--text);}
.theme-toggle svg{width:17px;height:17px;}
.theme-toggle .icon-moon{display:block;}
.theme-toggle .icon-sun{display:none;}
[data-theme="light"] .theme-toggle .icon-moon{display:none;}
[data-theme="light"] .theme-toggle .icon-sun{display:block;}

/* ── Nav ── */
.site-nav{position:sticky;top:0;z-index:40;background:var(--nav-glass);backdrop-filter:blur(14px);border-bottom:1px solid var(--border-soft);transition:padding .2s,box-shadow .2s,background .3s;}
.site-nav.scrolled{box-shadow:var(--shadow-nav);}
.site-nav .bar{display:flex;align-items:center;justify-content:space-between;padding:18px 64px;transition:padding .2s;}
.site-nav.scrolled .bar{padding:12px 64px;}
.site-nav .links{display:flex;gap:32px;align-items:center;}
.nav-link{color:var(--text-dim);font-size:14px;font-weight:500;text-decoration:none;transition:color .15s;}
.nav-link:hover{color:var(--text);}
.logo{display:flex;align-items:center;gap:10px;color:var(--text);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;}
.logo-mark{width:34px;height:34px;border-radius:9px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;color:#1A0E0E;font-weight:800;flex-shrink:0;}
.logo-img{height:56px;width:auto;display:block;transition:height .2s ease;}
.site-nav.scrolled .logo-img{height:40px;}

/* Utility-bar Client/Staff Login — these used to be plain 12px text, easy to miss entirely next to
   the phone number. Styled as small, clearly-clickable pill buttons instead. */
.utility-login-btn{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-size:12px;font-weight:600;padding:6px 14px;border-radius:100px;border:1px solid var(--border-strong);background:var(--surface);transition:border-color .15s,background .15s,transform .15s;}
.utility-login-btn:hover{border-color:var(--accent-a);background:var(--accent-grad-soft);color:var(--accent-a);transform:translateY(-1px);}

/* ── Cards ── */
.card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);}
.card-hover{transition:border-color .2s,transform .2s;}
.card-hover:hover{border-color:rgba(255,122,61,.4);transform:translateY(-2px);}

/* ── Scroll-reveal: one restrained utility, not a different effect per
   section. Small opacity+rise, staggered by --d (ms), respects reduced motion. ── */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease;transition-delay:var(--d,0ms);}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{transition:none;opacity:1;transform:none;}}

/* ── Count-up stat numbers ── */
.stat-num{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:36px;color:var(--text);}

/* ── FAQ accordion ── */
.faq-item{border-bottom:1px solid var(--border);}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0;cursor:pointer;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:600;color:var(--text);}
.faq-q .plus{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .25s;}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;background:var(--accent-a);border-radius:2px;}
.faq-q .plus::before{left:0;top:50%;width:100%;height:2px;margin-top:-1px;}
.faq-q .plus::after{top:0;left:50%;height:100%;width:2px;margin-left:-1px;transition:opacity .2s;}
.faq-item.open .plus{transform:rotate(180deg);}
.faq-item.open .plus::after{opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{padding:0 0 22px;font-size:14.5px;color:var(--text-dim);line-height:1.7;max-width:70ch;}
.faq-item.open .faq-a{max-height:400px;}

/* ── Appliance category grid (homepage hub → dedicated pages) ── */
.appliance-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.appliance-tile{padding:22px 18px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:border-color .2s,transform .2s,background .2s;display:block;}
.appliance-tile:hover{border-color:rgba(255,122,61,.45);transform:translateY(-3px);background:var(--surface-2);}
.appliance-tile .ic{width:40px;height:40px;border-radius:10px;background:var(--accent-grad-soft);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.appliance-tile h4{font-size:14.5px;color:var(--text);}
.appliance-tile .sub{font-size:11.5px;color:var(--text-faint);margin-top:4px;}

/* ── Appliance detail page components ── */
.problem-card{border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);padding:26px;}
.problem-card .tag{display:inline-block;font-size:11px;font-weight:600;color:var(--accent-a);background:rgba(255,122,61,.12);padding:4px 10px;border-radius:100px;margin-bottom:12px;}
.problem-card h3{font-size:17px;margin-bottom:10px;}
.problem-card .cause{font-size:13.5px;color:var(--text-dim);line-height:1.7;margin-bottom:12px;}
.problem-card .fix{font-size:13.5px;color:var(--text);line-height:1.7;border-top:1px solid var(--border-soft);padding-top:12px;}
.problem-card .fix b{color:var(--success);}

.step-row{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--border-soft);}
.step-row:last-child{border-bottom:none;}
.step-num{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--accent-a);}
.step-row h4{font-size:15px;color:var(--text);margin-bottom:6px;}
.step-row p{font-size:13.5px;color:var(--text-dim);line-height:1.7;}

.brand-chip{padding:8px 16px;border:1px solid var(--border);border-radius:100px;font-size:13px;color:var(--text-dim);background:var(--surface);}

/* ── Solution (service-type) cards — homepage "What we do" grid + solutions hub pages ── */
.solution-card{display:block;position:relative;}
.solution-card .ic-badge{width:44px;height:44px;border-radius:12px;background:var(--accent-grad-soft);display:flex;align-items:center;justify-content:center;}
.solution-card .learn-more{display:inline-block;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--accent-a);opacity:0;transform:translateX(-4px);transition:opacity .2s,transform .2s;}
.solution-card:hover .learn-more{opacity:1;transform:translateX(0);}

/* ── Icon animation system — one consistent treatment reused everywhere an icon sits inside a
   card badge (.ic-badge / .appliance-tile .ic / .related-icon), rather than a bespoke animation
   per section: on hover the badge fills with the full accent gradient and the icon pops with a
   slight overshoot + tilt (spring easing); the icon itself recolors to stay legible against the
   now-solid gradient. Appliance-grid icons additionally get a slow, gently staggered idle float —
   the one place a continuous ambient animation earns its keep, since it's a 17-tile grid that
   otherwise sits completely still between scroll reveals. ── */
.ic-badge, .appliance-tile .ic{transition:background .3s ease, transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;}
.ic-badge svg, .appliance-tile .ic svg{transition:stroke .25s ease, transform .4s cubic-bezier(.34,1.56,.64,1);}
.card-hover:hover .ic-badge, .solution-card:hover .ic-badge, .appliance-tile:hover .ic, .related-card:hover .ic-badge{
  background:var(--accent-grad); transform:scale(1.14) rotate(-7deg); box-shadow:0 10px 24px -8px rgba(255,61,110,.5);
}
.card-hover:hover .ic-badge svg, .solution-card:hover .ic-badge svg, .appliance-tile:hover .ic svg, .related-card:hover .ic-badge svg{
  stroke:#1A0E0E; transform:scale(1.05);
}
@keyframes iconFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-4px);}}
.appliance-tile .ic{animation:iconFloat 3.4s ease-in-out infinite; animation-delay:var(--fd,0ms);}
.appliance-tile:hover .ic{animation-play-state:paused;}
@media (prefers-reduced-motion: reduce){.appliance-tile .ic{animation:none;}}

/* Checkmark "draws itself in" once its card scrolls into view — .reveal already adds .in-view
   via the shared IntersectionObserver, this just extends that moment to the check path itself
   rather than decorating for its own sake (a checkmark completing IS the meaningful animation
   for a "what's included" list). */
.check-draw{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s ease .15s;}
.in-view .check-draw{stroke-dashoffset:0;}

.related-card{display:block;padding:18px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);transition:border-color .2s,transform .2s;}
.related-card:hover{border-color:rgba(255,122,61,.4);transform:translateY(-2px);}
.related-card h5{font-size:13.5px;color:var(--text);}

.breadcrumb{font-size:12.5px;color:var(--text-faint);display:flex;gap:8px;align-items:center;}
.breadcrumb a{color:var(--text-faint);}
.breadcrumb a:hover{color:var(--accent-a);}

/* ── Footer ── */
.footer-link{color:var(--text-dim);font-size:13.5px;text-decoration:none;transition:color .15s;}
.footer-link:hover{color:var(--text);}

@media (max-width: 900px){
  .site-nav .links, .site-nav .actions-desktop{display:none !important;}
  .nav-mobile-toggle{display:inline-flex !important;align-items:center;justify-content:center;}
  .wrap, .section, header, section, footer{padding-left:22px !important;padding-right:22px !important;}
  .site-nav .bar{padding-left:22px;padding-right:22px;}
  h1{font-size:30px !important;line-height:1.22 !important;}
  h2{font-size:23px !important;}
  .appliance-grid{grid-template-columns:repeat(2,1fr) !important;}
  /* Catches every asymmetric hero/content split used across the ~30 pages — "1.15fr .85fr" (hero
     text+card), "1.1fr .9fr", "1.05fr .95fr", the "1.3fr 1fr 1fr 1fr" footer columns, etc. These
     live on plain <div>s, not just <section>s (the original rules below only ever matched
     <section>), so this drops the tag restriction and matches by attribute alone — anything whose
     inline grid starts with a decimal ratio collapses to one column on mobile. The more specific
     footer rule further down still wins for the footer specifically (higher selector specificity),
     giving it 2 columns instead of a full stack. */
  [style*="grid-template-columns:1."]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important;}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important;}
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  footer > div:first-child{grid-template-columns:1fr 1fr !important;}
  /* Flex rows written inline (feature lists, stat rows, button groups) — wrap instead of forcing
     everything onto one cramped horizontal line and clipping off the edge of the screen. */
  [style*="display:flex"][style*="gap:"]{flex-wrap:wrap;}
  table{font-size:12.5px;}
}
@media (max-width: 560px){
  h1{font-size:25px !important;}
  h2{font-size:20px !important;}
  .btn-primary, .btn-ghost{width:100%;justify-content:center;}
  img{max-width:100%;height:auto;}
}

/* Floating WhatsApp button — injected by site.js on every page (see initWhatsAppFloat()) */
.wa-float-btn{position:fixed;bottom:22px;right:22px;width:58px;height:58px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(37,211,102,.45);z-index:60;transition:transform .18s;text-decoration:none;}
.wa-float-btn:hover{transform:scale(1.08);}
.wa-float-btn svg{width:30px;height:30px;}
@media (max-width:640px){.wa-float-btn{bottom:16px;right:16px;width:52px;height:52px;}.wa-float-btn svg{width:27px;height:27px;}}

/* ═══════ 3D tilt — the site's one signature interactive moment (see site.js initTilt3D) ═══════
   Applied to the homepage's live tracker-card and the matching "why choose us" card that appears
   in the same hero position on every service/solution/area page — one consistent, deliberate
   treatment reused across the site rather than scattered hover effects on every card. Mouse-only
   by design (skipped entirely on touch devices and when prefers-reduced-motion is set) — a tilt
   that doesn't track a real cursor has nothing to respond to and would just look broken. */
.tilt-3d{transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;will-change:transform;}
.tilt-3d.tilting{transition:transform .06s linear;}
@media (prefers-reduced-motion: reduce){.tilt-3d{transition:none !important;}}