/* ==========================================================================
   TechSol Chemicals — Corporate Design System
   Shared across all pages of techsolchemicals.com
   ========================================================================== */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  /* Brand */
  --primary:#0f6fec;
  --primary-dark:#0a52b5;
  --primary-light:#60a5fa;
  --accent:#ff6b2b;
  --accent-dark:#e55a1f;
  --dark:#0b1a2e;
  --dark-2:#122744;
  --dark-3:#162d4d;
  --green:#10b981;
  --amber:#f59e0b;

  /* Neutrals */
  --ink:#1e293b;
  --gray:#64748b;
  --gray-light:#94a3b8;
  --border:#e2e8f0;
  --border-soft:#eef2f7;
  --light:#f4f7fb;
  --white:#fff;

  /* Type — one family, three voices. The group shares IBM Plex; the parent
     speaks in its serif (institutional), GRIPMAX in a condensed grotesque. */
  --font:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'IBM Plex Serif',Georgia,'Times New Roman',serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  /* Layout */
  --max:1200px;
  --radius:12px;
  --radius-lg:16px;
}

html{scroll-behavior:smooth}
body{font-family:var(--font);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
ul{list-style:none}

/* ==========================================================================
   Utility top bar
   ========================================================================== */
.topbar{background:#071322;color:rgba(255,255,255,0.62);font-size:13px;border-bottom:1px solid rgba(255,255,255,0.06)}
.topbar-inner{max-width:var(--max);margin:0 auto;padding:0 24px;height:38px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-left{display:flex;align-items:center;gap:20px}
.topbar a{transition:color .2s}
.topbar a:hover{color:var(--white)}
.topbar-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topbar-item svg{width:14px;height:14px;opacity:.6;flex-shrink:0}
.topbar-right{display:flex;align-items:center;gap:18px}
.topbar-tag{color:var(--accent);font-weight:600;letter-spacing:.3px}

/* ==========================================================================
   Navigation
   ========================================================================== */
.nav{position:sticky;top:0;z-index:100;background:rgba(11,26,46,.97);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.07)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}

.logo{font-size:19px;font-weight:700;color:var(--white);display:flex;align-items:center;gap:11px;flex-shrink:0;letter-spacing:-.2px}
/* the mark is the logo now - no tile, no gradient behind it */
.logo-icon{width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-icon svg{width:100%;height:100%}
/* At 320px the nav row (logo + hamburger) was 3px wider than the viewport. The hamburger
   sits in a fixed nav, so the root's overflow-x cannot clip it - see SITE-NOTES 7f. Drop the
   logo sub-line on the narrowest phones rather than shrinking the mark. */
@media (max-width:360px){ .logo{font-size:17px} .logo-text small{display:none} }
.logo-text{display:flex;flex-direction:column;line-height:1.1}
.logo-text small{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.42);letter-spacing:1.4px;text-transform:uppercase;margin-top:3px}

.nav-links{display:flex;align-items:center;gap:4px}
.nav-links > li{position:relative}
.nav-links > li > a{display:block;color:rgba(255,255,255,.72);font-size:14px;font-weight:500;padding:10px 13px;border-radius:6px;transition:color .2s,background .2s}
.nav-links > li > a:hover{color:var(--white);background:rgba(255,255,255,.06)}
.nav-links > li > a.active{color:var(--white)}
.nav-links > li > a.active::after{content:'';position:absolute;left:13px;right:13px;bottom:-2px;height:2px;background:var(--accent);border-radius:2px}
.has-drop > a::after{content:'';display:inline-block;width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:7px;opacity:.7}

/* In-drawer CTA: hidden on desktop (the standalone .nav-cta is shown instead).
   Selector must out-specify `.nav-links > li > a` (0,1,2) or the button renders twice. */
.nav-links > li > a.nav-drawer-cta{display:none}

/* Dropdown */
.dropdown{position:absolute;top:calc(100% + 10px);left:0;min-width:290px;background:var(--white);border-radius:var(--radius);box-shadow:0 20px 60px rgba(2,12,27,.28);border:1px solid var(--border);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all .2s ease}
.has-drop:hover .dropdown,.has-drop:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown::before{content:'';position:absolute;top:-10px;left:0;right:0;height:10px}
.drop-item{display:flex;gap:12px;padding:12px;border-radius:9px;transition:background .18s}
.drop-item:hover{background:var(--light)}
.drop-mark{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:var(--white);flex-shrink:0;letter-spacing:-.5px}
.drop-mark.gripmax{background:linear-gradient(135deg,var(--accent),#ff9558)}
.drop-mark.soon{background:#cbd5e1;color:#64748b}
.drop-item strong{display:block;font-size:14px;font-weight:700;color:var(--dark);margin-bottom:2px}
.drop-item span{display:block;font-size:12.5px;color:var(--gray);line-height:1.5}
.drop-foot{border-top:1px solid var(--border-soft);margin-top:6px;padding:11px 12px 7px;font-size:12.5px;font-weight:600;color:var(--primary)}
.drop-foot:hover{color:var(--accent)}

.nav-cta{padding:10px 20px;background:var(--accent);color:var(--white);border-radius:7px;font-size:14px;font-weight:600;transition:background .2s,transform .2s;white-space:nowrap;flex-shrink:0}
.nav-cta:hover{background:var(--accent-dark);transform:translateY(-1px)}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:6px;flex-shrink:0}
.hamburger span{display:block;width:24px;height:2px;background:var(--white);margin:5px 0;transition:.3s;border-radius:2px}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border-radius:8px;font-size:15px;font-weight:600;font-family:inherit;transition:all .2s;border:none;cursor:pointer;line-height:1.2}
.btn-accent{background:var(--accent);color:var(--white)}
.btn-accent:hover{background:var(--accent-dark);transform:translateY(-1px);box-shadow:0 10px 26px rgba(255,107,43,.32)}
.btn-primary{background:var(--primary);color:var(--white)}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:0 10px 26px rgba(15,111,236,.3)}
.btn-outline{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.28)}
.btn-outline:hover{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.06)}
.btn-ghost{background:var(--white);color:var(--dark);border:1.5px solid var(--border)}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{padding:10px 20px;font-size:14px}
.btn-block{width:100%}

/* ==========================================================================
   Layout primitives
   ========================================================================== */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
.section{padding:88px 0}
.section-sm{padding:60px 0}
.section-light{background:var(--light)}
.section-dark{background:linear-gradient(135deg,var(--dark),var(--dark-3));color:var(--white)}

.section-header{text-align:center;max-width:680px;margin:0 auto 56px}
.section-header.left{text-align:left;margin-left:0}
.section-header h2{font-family:var(--font-display);font-size:clamp(26px,3.3vw,38px);font-weight:600;color:var(--dark);margin-bottom:14px;letter-spacing:-.4px;line-height:1.2}
.section-header p{font-size:16.5px;color:var(--gray);line-height:1.75}
.section-dark .section-header h2{color:var(--white)}
.section-dark .section-header p{color:rgba(255,255,255,.66)}

/* Eyebrow: a datasheet label, not a pill. Mono ties it to the group's technical voice. */
.tag{display:inline-block;font-family:var(--font-mono);color:var(--accent);font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;margin-bottom:16px;padding:0 0 7px;border-bottom:1px solid currentColor}
.tag-blue{color:var(--primary)}
.tag-green{color:var(--green)}
.section-dark .tag-blue{color:var(--primary-light)}

.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split-wide{grid-template-columns:1.15fr .85fr}

/* ==========================================================================
   Page hero (interior pages)
   ========================================================================== */
.page-hero{padding:72px 0 64px;background:linear-gradient(135deg,var(--dark) 0%,var(--dark-2) 55%,var(--dark) 100%);color:var(--white);position:relative;overflow:hidden}
.page-hero::before{content:'';position:absolute;top:-55%;right:-8%;width:520px;height:520px;background:radial-gradient(circle,rgba(255,107,43,.12),transparent 70%);border-radius:50%;pointer-events:none}
.page-hero::after{content:'';position:absolute;bottom:-60%;left:-6%;width:460px;height:460px;background:radial-gradient(circle,rgba(15,111,236,.13),transparent 70%);border-radius:50%;pointer-events:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:var(--font-display);font-size:clamp(29px,4.2vw,46px);font-weight:600;letter-spacing:-.6px;line-height:1.18;margin-bottom:18px;max-width:800px}
.page-hero .lede{font-size:17.5px;color:rgba(255,255,255,.7);line-height:1.75;max-width:660px}

.breadcrumb{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:22px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--white)}
.breadcrumb span[aria-hidden]{opacity:.5}
.breadcrumb .current{color:var(--accent);font-weight:600}

/* ==========================================================================
   Cards
   ========================================================================== */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:30px;transition:transform .28s,box-shadow .28s,border-color .28s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(2,12,27,.07);border-color:var(--primary)}
.card h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:9px;line-height:1.35}
.card p{font-size:14px;color:var(--gray);line-height:1.75}
.card-icon{width:48px;height:48px;border-radius:11px;background:rgba(15,111,236,.08);display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:18px}
.card-icon.accent{background:rgba(255,107,43,.09)}
.card-icon.green{background:rgba(16,185,129,.1)}
.card-tag{display:inline-block;font-family:var(--font-mono);color:var(--gray-light);font-size:10.5px;font-weight:500;margin-top:16px;letter-spacing:.14em;text-transform:uppercase}

/* ---- Icons (replace the emoji that used to sit in these wells) ---- */
.ico{width:1em;height:1em;display:block;flex-shrink:0}
.card-icon{color:var(--primary)}
.card-icon.accent{color:var(--accent)}
.card-icon.green{color:var(--green)}
.trust-icon{color:var(--accent);display:flex;align-items:center}
.ci-icon{color:var(--primary)}
.section-dark .card-icon{color:var(--accent)}

.card-dark{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px;transition:border-color .28s,background .28s}
.card-dark:hover{border-color:rgba(255,107,43,.4);background:rgba(255,255,255,.07)}
.card-dark h3{font-size:17px;font-weight:700;color:var(--white);margin-bottom:9px}
.card-dark p{font-size:14px;color:rgba(255,255,255,.62);line-height:1.75}

/* ==========================================================================
   Stats / metrics
   ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--border);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--white);padding:30px 24px;text-align:center}
/* Solid, not gradient-filled — the number is data, not decoration. */
.stat-num{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);font-weight:600;letter-spacing:-.6px;color:var(--primary);line-height:1.1}
.stat-label{font-size:13px;color:var(--gray);margin-top:9px;font-weight:400;line-height:1.55}
.stats-dark .stat-num{color:var(--accent)}

.stats-dark{background:rgba(255,255,255,.09)}
.stats-dark .stat{background:var(--dark-2)}
.stats-dark .stat-label{color:rgba(255,255,255,.6)}

/* ==========================================================================
   Trust bar
   ========================================================================== */
.trust-bar{padding:26px 0;background:var(--white);border-bottom:1px solid var(--border)}
.trust-inner{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:var(--dark)}
.trust-icon{font-size:19px}

/* ==========================================================================
   Feature list / checklist
   ========================================================================== */
.checklist{display:flex;flex-direction:column;gap:14px}
.check-item{display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.65}
.check-mark{width:23px;height:23px;border-radius:50%;background:rgba(16,185,129,.13);color:var(--green);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px}
.check-mark.cross{background:rgba(239,68,68,.12);color:#ef4444}
.section-dark .check-item{color:rgba(255,255,255,.82)}

/* ==========================================================================
   Timeline
   ========================================================================== */
.timeline{position:relative;padding-left:34px;display:flex;flex-direction:column;gap:34px}
.timeline::before{content:'';position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--primary),var(--accent));opacity:.28}
.tl-item{position:relative}
.tl-item::before{content:'';position:absolute;left:-33px;top:5px;width:18px;height:18px;border-radius:50%;background:var(--white);border:3px solid var(--primary)}
.tl-item.done::before{background:var(--primary)}
.tl-item.active::before{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 5px rgba(255,107,43,.16)}
.tl-year{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.15em;text-transform:uppercase;margin-bottom:6px}
.tl-item h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:7px}
.tl-item p{font-size:14px;color:var(--gray);line-height:1.75}

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;position:relative}
.steps::before{content:'';position:absolute;top:32px;left:16%;right:16%;height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.2}
.step{text-align:center;position:relative}
.step-num{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--accent));display:flex;align-items:center;justify-content:center;font-size:23px;font-weight:800;color:var(--white);margin:0 auto 20px;position:relative;z-index:1}
.step h3{font-size:16.5px;font-weight:700;margin-bottom:9px;color:var(--dark)}
.step p{font-size:14px;color:var(--gray);line-height:1.7}

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;min-width:640px}
.data-table th,.data-table td{padding:15px 22px;text-align:left;font-size:14px;border-bottom:1px solid var(--border-soft)}
.data-table thead th{background:var(--dark);color:var(--white);font-family:var(--font-mono);font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.13em;white-space:nowrap}
.data-table thead th.ours{background:var(--accent);text-align:center}
.data-table thead th.center{text-align:center}
.data-table td.center{text-align:center;font-weight:600}
.data-table td.yes{color:var(--green);text-align:center;font-weight:600}
.data-table td.no{color:#ef4444;text-align:center;font-weight:600}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr:hover{background:#fafbfd}

/* ==========================================================================
   FAQ / accordion
   ========================================================================== */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:var(--white);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:var(--primary)}
.faq-item summary{padding:19px 24px;font-size:15px;font-weight:600;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--dark)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:21px;font-weight:300;color:var(--gray);flex-shrink:0}
.faq-item[open] summary::after{content:'\2212'}
.faq-item .faq-body{padding:0 24px 20px;font-size:14.5px;color:var(--gray);line-height:1.8}

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{padding:80px 0;background:linear-gradient(135deg,var(--dark),var(--dark-3));text-align:center;color:var(--white);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:-45%;left:50%;transform:translateX(-50%);width:760px;height:520px;background:radial-gradient(circle,rgba(255,107,43,.13),transparent 68%);pointer-events:none}
.cta-band .container{position:relative;z-index:1}
.cta-band h2{font-family:var(--font-display);font-size:clamp(26px,3.6vw,38px);font-weight:600;margin-bottom:16px;letter-spacing:-.4px;line-height:1.2}
.cta-band p{font-size:16.5px;color:rgba(255,255,255,.7);margin:0 auto 34px;max-width:560px;line-height:1.75}
.cta-btns{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-info{display:flex;flex-direction:column;gap:24px}
.contact-item{display:flex;gap:16px;align-items:flex-start}
.ci-icon{width:46px;height:46px;border-radius:11px;background:rgba(15,111,236,.08);display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.contact-item h4{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:4px}
.contact-item p,.contact-item address{font-size:14px;color:var(--gray);font-style:normal;line-height:1.75}
.contact-item a{color:var(--primary);font-weight:600}
.contact-item a:hover{color:var(--accent)}

.form{display:flex;flex-direction:column;gap:16px;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px}
.form label{font-size:13px;font-weight:600;color:var(--dark);margin-bottom:6px;display:block}
.form input,.form textarea,.form select{width:100%;padding:12px 15px;border:1px solid var(--border);border-radius:8px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;background:var(--white)}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,111,236,.1)}
.form textarea{resize:vertical;min-height:108px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-note{font-size:12.5px;color:var(--gray-light);line-height:1.6}

/* ==========================================================================
   Prose (long-form copy)
   ========================================================================== */
.prose{max-width:760px}
.prose h2{font-family:var(--font-display);font-size:25px;font-weight:600;color:var(--dark);margin:40px 0 14px;letter-spacing:-.3px;line-height:1.28}
.prose h3{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--dark);margin:30px 0 10px}
.prose p{font-size:15.5px;color:var(--gray);line-height:1.85;margin-bottom:16px}
.prose ul{margin:0 0 18px;padding-left:0;display:flex;flex-direction:column;gap:10px}
.prose ul li{font-size:15px;color:var(--gray);line-height:1.75;padding-left:26px;position:relative}
.prose ul li::before{content:'';position:absolute;left:6px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.prose strong{color:var(--dark);font-weight:650}

/* ==========================================================================
   Callout
   ========================================================================== */
.callout{border-left:3px solid var(--accent);background:rgba(255,107,43,.05);padding:20px 24px;border-radius:0 10px 10px 0;margin:26px 0}
.callout p{font-size:14.5px;color:var(--ink);line-height:1.75;margin:0}
.callout strong{color:var(--dark)}
.callout.blue{border-left-color:var(--primary);background:rgba(15,111,236,.05)}

/* ==========================================================================
   Brand tiles
   ========================================================================== */
.brand-tile{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--white);display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s}
.brand-tile:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(2,12,27,.1)}
.brand-head{padding:36px 32px;background:linear-gradient(135deg,var(--dark),var(--dark-3));color:var(--white);position:relative;overflow:hidden}
.brand-head.flagship::after{content:'FLAGSHIP';position:absolute;top:16px;right:-30px;background:var(--accent);color:var(--white);font-family:var(--font-mono);font-size:9px;font-weight:500;padding:4px 36px;transform:rotate(45deg);letter-spacing:.12em}
.brand-head.pipeline{background:linear-gradient(135deg,#475569,#334155)}
/* Same band length as the FLAGSHIP ribbon; longer strings clip on the corner. */
.brand-head.pipeline::after{content:'PIPELINE';position:absolute;top:16px;right:-30px;background:var(--amber);color:#422006;font-family:var(--font-mono);font-size:9px;font-weight:500;padding:4px 36px;transform:rotate(45deg);letter-spacing:.12em}
/* Real brand mark rather than a typographic stand-in. The logo is white-on-transparent,
   so it only ever sits on the dark brand-head / card-dark grounds. */
.brand-mark{height:30px;width:auto;margin-bottom:14px}
.brand-head .brand-mark{height:34px}
.brand-wordmark{font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.4px;line-height:1.12;margin-bottom:10px}
.brand-wordmark .mx{color:var(--accent)}
.brand-head p{font-size:13.5px;color:rgba(255,255,255,.66);line-height:1.65}
.brand-body{padding:28px 32px 32px;flex:1;display:flex;flex-direction:column}
.brand-body h3{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:12px}
.brand-body ul{display:flex;flex-direction:column;gap:9px;margin-bottom:22px;flex:1}
.brand-body ul li{font-size:13.5px;color:var(--gray);line-height:1.6;padding-left:20px;position:relative}
.brand-body ul li::before{content:'';position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.brand-status{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-light);padding-top:16px;border-top:1px solid var(--border-soft)}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{background:var(--dark);color:rgba(255,255,255,.58);padding:60px 0 26px}
.footer-inner{display:grid;grid-template-columns:2.1fr 1fr 1fr 1fr 1.1fr;gap:40px;margin-bottom:44px}
.footer h4{font-family:var(--font-mono);color:rgba(255,255,255,.5);font-size:10.5px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.15em;font-weight:500}
.footer a{font-size:13.5px;line-height:2.15;display:block;transition:color .2s}
.footer a:hover{color:var(--white)}
.footer-brand p{font-size:13.5px;margin-top:14px;line-height:1.8;max-width:330px}
.footer-contact{margin-top:18px;display:flex;flex-direction:column;gap:7px}
.footer-contact a,.footer-contact span{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.6}
.footer-contact svg{width:14px;height:14px;opacity:.55;flex-shrink:0}
.footer-phone{color:var(--white)!important;font-weight:600}
.footer-bottom{padding-top:24px;border-top:1px solid rgba(255,255,255,.09);display:flex;justify-content:space-between;align-items:center;font-size:12.5px;flex-wrap:wrap;gap:10px}
.footer-legal{display:flex;gap:18px;flex-wrap:wrap}
.footer-legal a{display:inline;line-height:1.6}
.footer-disclaimer{font-size:11.5px;color:rgba(255,255,255,.34);line-height:1.7;margin-top:14px;max-width:640px}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:1024px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .stats{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1.6fr 1fr 1fr;gap:32px}
}
@media(max-width:900px){
  .split,.split-wide{grid-template-columns:1fr;gap:36px}
  .grid-3{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:26px}
  .steps::before{display:none}
  .contact-grid{grid-template-columns:1fr;gap:40px}
  .section{padding:64px 0}
}
/* 1080px, not 820px. The desktop nav row — logo + links + the "Request a
   quote" button — needs 1081px to lay out. Between 821 and 1080 the hamburger
   had not appeared yet but the row no longer fitted, so it hung off the right
   edge and dragged the page sideways by up to 200px.
   KEEP IN SYNC with the resize handler in site.js. */
@media(max-width:1080px){
  .topbar-left .topbar-item.hide-sm{display:none}
  .topbar-right{display:none}
  .hamburger{display:block}
  .nav-cta{display:none}

  /* MUST stay off while the drawer exists. backdrop-filter makes .nav a
     containing block for its position:fixed descendants, so the drawer was
     sized to the nav bar instead of the viewport — measured top=39 h=120
     against a 700px viewport, with 0 of its 12 links inside the panel. The
     mobile menu did not work at all. Removing the blur restores top=0 h=full.
     Do not move backdrop-filter, transform, filter or contain onto .nav. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none}

  /* Mobile drawer.
     display:none when closed is load-bearing: parked at translateX(102%) the
     closed drawer sat 320px past the right edge, and a fixed element there
     still extends the document's scrollable area, so the page could be dragged
     sideways. overflow-x:clip on the root does not clip a fixed element.
     It also drops the closed links out of the tab order.
     allow-discrete + @starting-style keep the slide-in animation. */
  .nav-links{display:none;position:fixed;top:0;right:0;bottom:0;width:min(320px,84vw);background:var(--dark-2);flex-direction:column;align-items:stretch;gap:2px;padding:88px 20px 32px;transform:translateX(102%);transition:transform .3s cubic-bezier(.4,0,.2,1),display .3s allow-discrete;overflow-y:auto;box-shadow:-14px 0 44px rgba(0,0,0,.4);z-index:99}
  .nav-links.open{display:flex;transform:translateX(0)}
  @starting-style{ .nav-links.open{transform:translateX(102%)} }
  .nav-links > li > a{padding:14px 12px;font-size:15.5px;border-radius:8px}
  .nav-links > li > a.active::after{display:none}
  .nav-links > li > a.active{background:rgba(255,107,43,.14);color:var(--accent)}
  .has-drop > a::after{display:none}
  .dropdown{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:rgba(255,255,255,.04);min-width:0;margin:2px 0 8px;padding:6px}
  .drop-item:hover{background:rgba(255,255,255,.06)}
  .drop-item strong{color:var(--white)}
  .drop-item span{color:rgba(255,255,255,.55)}
  .drop-foot{color:var(--accent);border-top-color:rgba(255,255,255,.1)}
  .nav-links > li > a.nav-drawer-cta{display:block;margin-top:14px;text-align:center}
  .nav-backdrop{position:fixed;inset:0;background:rgba(3,10,20,.6);opacity:0;visibility:hidden;transition:all .3s;z-index:98}
  .nav-backdrop.open{opacity:1;visibility:visible}
}
@media(max-width:640px){
  .grid-4,.grid-2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .form{padding:24px 20px}
  .form-row{grid-template-columns:1fr}
  .trust-inner{gap:20px 26px}
  .section-header{margin-bottom:40px}
  .page-hero{padding:52px 0 48px}
}