/* ============================================================================
   NMG TOOLING — DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Palette unchanged (crimson / ink / paper). What changed:

   1. TYPE  Anton is now reserved for true display sizes only. Every heading
            below ~28px uses Inter at 750–800 weight with tightened tracking,
            sentence case rather than blanket uppercase. A condensed uppercase
            face at 15px is what made headings feel cramped and shouty.
   2. SPACE A single 4px-based spacing scale drives section padding, card
            padding and stack gaps, so vertical rhythm is consistent.
   3. DEPTH Shadows are now rare and soft. Structure comes from hairline
            borders and background steps, not from everything floating.
   ========================================================================== */

:root{
  /* Brand palette — unchanged */
  --red: #D22630;
  --red-dark: #A81F28;
  --red-tint: #FBEAEA;
  --ink: #17181B;
  --charcoal: #262B31;
  --slate: #4B5563;
  --line: #E7E4E2;
  --paper: #FAF8F7;
  --white: #FFFFFF;
  --gold: #C9972F;

  /* Extended neutrals for finer hierarchy */
  --line-soft: #F0EDEB;
  --line-strong: #D8D3D0;
  --muted: #6B7280;
  --ink-70: #4A4C52;

  /* Type scale */
  --fs-display: clamp(38px, 5.2vw, 62px);
  --fs-h1: clamp(30px, 3.6vw, 44px);
  --fs-h2: clamp(24px, 2.6vw, 32px);
  --fs-h3: 19px;
  --fs-h4: 15.5px;
  --fs-body: 15.5px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-micro: 11px;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(23,24,27,.04), 0 8px 24px rgba(23,24,27,.06);
  --shadow-lift: 0 2px 4px rgba(23,24,27,.05), 0 16px 40px rgba(23,24,27,.10);
  --maxw: 1240px;
  --ease: cubic-bezier(.4,0,.2,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body{
  margin:0;
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- TYPOGRAPHY --------------------------------------------------- */
h1,h2,h3,h4,h5{ margin: 0 0 .45em; letter-spacing: -0.021em; line-height: 1.18; font-weight: 800; }
h1{ font-size: var(--fs-h1); line-height: 1.1; }
h2{ font-size: var(--fs-h2); line-height: 1.14; }
h3{ font-size: var(--fs-h3); letter-spacing: -0.014em; }
h4{ font-size: var(--fs-h4); letter-spacing: -0.008em; }
h5{ font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }

/* Anton only where it earns its keep: true display type and stat numerals. */
.display, .hero h1, .stat b, .tcalc-result-value, .pl-card-badge, .rm-dot, .step-num{
  font-family:'Anton','Archivo Black',sans-serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  line-height: 1.02;
}

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }
.lead{ font-size: 17.5px; line-height: 1.62; color: var(--ink-70); }
.muted{ color: var(--muted); }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
strong,b{ font-weight: 700; }

.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

/* ---------- ICONS -------------------------------------------------------- */
/* One line-icon set at a single stroke weight, inheriting colour from context.
   Replaces emoji, which render differently per OS and read as consumer-grade. */
.ic{ width: 1.15em; height: 1.15em; flex-shrink: 0; vertical-align: -0.18em; }
.ic-lg{ width: 22px; height: 22px; }
.site-banner .ic{ vertical-align: -0.22em; margin-right: 2px; }
.blog-cover .ic{ width: 46px; height: 46px; vertical-align: 0; stroke-width: 1.3; }
.card .ico .ic, .wiz-card .ic{ width: 100%; height: 100%; vertical-align: 0; }
.btn .ic{ width: 1.05em; height: 1.05em; }
.search-box .ic, .mobile-toggle .ic{ width: 17px; height: 17px; opacity:.6; }
.callout .ic{ width: 18px; height: 18px; }

/* Eyebrow — calmer than the old red pill */
.eyebrow{
  display:inline-flex; align-items:center; gap: var(--s2);
  color: var(--red-dark); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s3);
}
.eyebrow::before{ content:''; width:18px; height:2px; background: var(--red); border-radius:2px; }

/* ---------- BUTTONS ------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap: var(--s2); justify-content:center;
  font-family: inherit; font-weight: 700; font-size: var(--fs-sm); letter-spacing: .01em;
  padding: 13px 24px; border-radius: var(--radius-sm); border:1.5px solid transparent;
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease),
    border-color .18s var(--ease), transform .18s var(--ease);
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--red); color:#fff; border-color: var(--red); }
.btn-primary:hover{ background: var(--red-dark); border-color: var(--red-dark); }
.btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--ink); background: var(--ink); color:#fff; }
.btn-white{ background:#fff; color: var(--ink); border-color:#fff; }
.btn-white:hover{ background: var(--paper); border-color: var(--paper); }
.btn-ghost{ background:transparent; color: var(--red-dark); border-color:transparent; padding-left:0; padding-right:0; }
.btn-ghost:hover{ color: var(--red); }
.btn-sm{ padding: 9px 16px; font-size: var(--fs-xs); }
.btn-lg{ padding: 16px 30px; font-size: 15px; }

/* ---------- HEADER ------------------------------------------------------- */
.site-header{
  position: sticky; top:0; z-index: 100; background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex; align-items:center; gap: var(--s5); padding: 14px 28px;
  max-width: var(--maxw); margin: 0 auto;
}
.logo{ display:flex; align-items:center; flex-shrink:0; }
.logo img{ height:42px; width:auto; max-width:none; display:block; }

nav.main-nav{ display:flex; align-items:center; gap: 2px; flex:1; }
nav.main-nav > .nav-item{ position:relative; }
nav.main-nav > .nav-item > a, nav.main-nav > .nav-item > button{
  display:flex; align-items:center; gap: 5px; font-weight:600; font-size: var(--fs-sm);
  padding: 9px 13px; background:none; border:none; cursor:pointer; color: var(--ink-70);
  font-family: inherit; border-radius: var(--radius-sm);
  transition: color .16s var(--ease), background .16s var(--ease);
}
nav.main-nav > .nav-item > a:hover, nav.main-nav > .nav-item > button:hover{
  color: var(--ink); background: var(--paper);
}
nav.main-nav > .nav-item.active > a, nav.main-nav > .nav-item.active > button{
  color: var(--red); font-weight: 700;
}
nav.main-nav > .nav-item > button svg{ transition: transform .18s var(--ease); opacity:.55; }
nav.main-nav > .nav-item:hover > button svg{ transform: rotate(180deg); opacity:1; }

.dropdown{
  position:absolute; top: calc(100% + 6px); left:0; background:#fff;
  border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lift); min-width: 236px; padding: 6px;
  opacity:0; visibility:hidden; transform: translateY(4px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav-item:hover .dropdown{ opacity:1; visibility:visible; transform: translateY(0); }
.dropdown a{
  display:block; padding: 9px 12px; border-radius: 6px; font-size: var(--fs-sm);
  font-weight:500; color: var(--ink-70);
  transition: background .14s var(--ease), color .14s var(--ease);
}
.dropdown a:hover{ background: var(--paper); color: var(--red-dark); }

.search-box{
  display:flex; align-items:center; gap: var(--s2); border:1px solid var(--line);
  background: var(--paper); border-radius: var(--radius-sm);
  padding: 9px 14px; font-size: var(--fs-sm); color: var(--muted); min-width: 230px;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.search-box:focus-within{ border-color: var(--line-strong); background:#fff; }
.search-box svg{ flex-shrink:0; opacity:.5; }
.header-cta{ margin-left:auto; display:flex; align-items:center; gap: var(--s3); }
.badge-new{
  background: var(--red-tint); color: var(--red-dark); font-size: 9.5px; font-weight:800;
  padding: 2px 6px; border-radius: 4px; margin-left: 5px; letter-spacing:.04em;
  text-transform: uppercase; vertical-align: middle;
}
.mobile-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 11px; cursor:pointer; font-size:16px; line-height:1;
}

/* ---------- SECTIONS ----------------------------------------------------- */
section{ padding: var(--s9) 0; }
section.tight{ padding: var(--s7) 0; }
.section-head{ max-width: 660px; margin-bottom: var(--s7); }
.section-head h2{ margin-bottom: var(--s3); }
.section-head p{ color: var(--muted); font-size: 16px; margin:0; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.bg-tint{ background: var(--paper); }
.bg-ink{ background: var(--ink); color:#fff; }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:#fff; }
.bg-ink .slate, .bg-ink .muted{ color:#A8AEB8; }
.divider{ height:1px; background: var(--line); margin: var(--s8) 0; border:0; }

/* Section header with an action on the right */
.head-row{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: var(--s5); margin-bottom: var(--s6); flex-wrap: wrap;
}
.head-row .section-head{ margin-bottom:0; }

/* ---------- GRIDS -------------------------------------------------------- */
.grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: var(--s5); }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: var(--s4); }
.grid-auto{ display:grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: var(--s4); }

/* ---------- CARDS -------------------------------------------------------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.card .ico{
  width:40px; height:40px; border-radius: var(--radius-sm); background: var(--paper);
  color: var(--red); display:flex; align-items:center; justify-content:center;
  margin-bottom: var(--s4); border:1px solid var(--line);
}
.card .ico svg{ width:20px; height:20px; }
.card h3{ font-size: 16.5px; margin-bottom: 6px; }
.card p{ color: var(--muted); font-size: var(--fs-sm); margin:0; }

/* ---------- FILTER TAGS -------------------------------------------------- */
.tag-row{ display:flex; gap: var(--s2); flex-wrap:wrap; margin-bottom: var(--s6); }
.tag{
  padding: 8px 15px; border-radius: 999px; border:1px solid var(--line);
  font-size: var(--fs-xs); font-weight:600; cursor:pointer; background:#fff; color: var(--ink-70);
  transition: all .16s var(--ease);
}
.tag:hover{ border-color: var(--line-strong); color: var(--ink); }
.tag.active{ background: var(--ink); border-color: var(--ink); color:#fff; font-weight:700; }

/* ---------- HERO --------------------------------------------------------- */
.hero{ background: var(--white); padding: var(--s9) 0 var(--s8); border-bottom:1px solid var(--line); }
.hero-grid{ display:grid; grid-template-columns: 1.25fr .85fr; gap: var(--s8); align-items:center; }
.hero h1{ font-size: var(--fs-display); margin: 0 0 var(--s5); }
.hero h1 .accent{ color: var(--red); }
.hero p.lead{ max-width: 540px; margin-bottom: var(--s6); }
.hero-ctas{ display:flex; gap: var(--s3); margin-bottom: var(--s7); flex-wrap: wrap; }
.stat-row{ display:flex; gap: var(--s7); flex-wrap:wrap; }
.stat b{ font-size: 34px; color: var(--ink); display:block; }
.stat span{
  font-size: var(--fs-micro); color: var(--muted); text-transform:uppercase;
  letter-spacing: .09em; font-weight:700;
}

/* ---------- BRAND PILLS -------------------------------------------------- */
.brand-card{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--s5);
}
.brand-card h4{
  font-size: var(--fs-micro); letter-spacing: .1em; color: var(--muted);
  text-transform:uppercase; font-weight:700; margin-bottom: var(--s4);
}
.brand-list{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.brand-pill{
  background:#fff; border-radius: var(--radius-sm); padding: 11px 13px; font-weight:700;
  font-size: var(--fs-xs); display:flex; align-items:center; gap: var(--s2);
  border:1px solid var(--line); transition: border-color .16s var(--ease);
}
.brand-pill:hover{ border-color: var(--line-strong); }
.brand-pill::before{ content:''; width:5px; height:5px; border-radius:50%; background: var(--red); flex-shrink:0; }

/* ---------- BRAND LOGO STRIP --------------------------------------------- */
/* Equal-width cells on a single row, so the marks sit on a shared baseline
   grid regardless of how wide each logo is.
   Heights are set per logo rather than shared: the eye compares logo AREA,
   not height, so a 5:1 wordmark at the same height as a 1.3:1 square mark
   looks far bigger. Each height below is derived as K / aspect^0.4 from the
   trimmed artwork, which balances them optically. */
.logo-strip{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  align-items:center;
  gap: var(--s5);
  padding: var(--s5) 0;
}
.logo-strip a{
  display:flex; align-items:center; justify-content:center;
  height: 54px; min-width:0;
}
.logo-strip img{
  max-width:100%; width:auto; object-fit:contain;
  transition: transform .2s var(--ease);
}
.logo-strip a:hover img{ transform: scale(1.06); }

/* Per-logo optical heights (from trimmed artwork aspect ratios) */
.logo-strip img[alt="Indian Tools"]{ height:52px; }
.logo-strip img[alt="Dormer Pramet"]{ height:43px; }
.logo-strip img[alt="Ceratizit"]{ height:33px; }
.logo-strip img[alt="Miranda Tools"]{ height:29px; }
.logo-strip img[alt="YG1"]{ height:39px; }
.logo-strip img[alt="Insize"]{ height:34px; }
.logo-strip img[alt="Lenox"]{ height:37px; }
.logo-strip img[alt="Strub"]{ height:35px; }

@media (max-width: 1080px){
  .logo-strip{ grid-template-columns: repeat(4, 1fr); gap: var(--s4) var(--s5); }
}
@media (max-width: 560px){
  .logo-strip{ grid-template-columns: repeat(2, 1fr); }
}

/* ---------- CTA BANNER --------------------------------------------------- */
.cta-banner{ background: var(--ink); color:#fff; border-radius: var(--radius-lg); overflow:hidden; }
.cta-banner-inner{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s6);
  padding: var(--s7); flex-wrap: wrap;
}
.cta-banner h2{ margin-bottom: var(--s2); color:#fff; }
.cta-banner p{ color:#A8AEB8; margin:0; max-width: 520px; }
.cta-phone{ font-size: 21px; margin-top: var(--s2); display:block; font-weight:800; }

/* ---------- FOOTER ------------------------------------------------------- */
footer{ background: var(--charcoal); color:#A8AEB8; padding: var(--s8) 0 0; font-size: var(--fs-sm); }
.footer-grid{
  display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s7);
  padding-bottom: var(--s7);
}
.footer-grid h5{
  color:#fff; letter-spacing:.1em; font-size: var(--fs-micro); text-transform:uppercase;
  margin-bottom: var(--s4); font-weight:700;
}
.footer-grid a{ display:block; padding: 5px 0; color:#A8AEB8; transition: color .15s var(--ease); }
.footer-grid a:hover{ color:#fff; }
.footer-grid p{ color:#8B929C; line-height:1.65; }
.footer-bottom{
  border-top:1px solid #3A4048; padding: var(--s5) 0; font-size: var(--fs-xs);
  text-align:center; color:#7D848E;
}

/* ---------- MISC --------------------------------------------------------- */
.pill-badge{
  display:inline-flex; align-items:center; gap: 6px; background: var(--paper);
  border:1px solid var(--line); border-radius: 999px; padding: 7px 14px;
  font-size: var(--fs-xs); font-weight:600; color: var(--ink-70);
  transition: border-color .16s var(--ease);
}
a.pill-badge:hover{ border-color: var(--line-strong); color: var(--ink); }

.site-banner{
  background: var(--ink); color:#C9CDD3; text-align:center; font-size: var(--fs-xs);
  font-weight:500; padding: 8px 20px; letter-spacing:.01em;
}
.site-banner b{ color: var(--gold); font-weight:700; }
.site-banner a{ text-decoration:underline; margin-left:6px; }

/* Callout / notice block */
.callout{
  display:flex; gap: var(--s3); align-items:flex-start; padding: var(--s4) var(--s5);
  border-radius: var(--radius); font-size: var(--fs-sm); line-height:1.6;
  border:1px solid var(--line); background: var(--paper); color: var(--ink-70);
}
.callout-warn{ background:#FFFBF0; border-color:#F0DFB4; color:#7A5B10; }
.callout-warn b{ color:#5C4409; }
.callout-icon{ flex-shrink:0; margin-top:1px; }

/* ---------- ROADMAP ------------------------------------------------------ */
.roadmap{ display:grid; grid-template-columns: repeat(4,1fr); gap:0; position:relative; }
.roadmap::before{
  content:''; position:absolute; top:24px; left:8%; right:8%; height:2px;
  background: var(--line); z-index:0;
}
.rm-step{ position:relative; z-index:1; text-align:center; padding: 0 var(--s3); }
.rm-dot{
  width:48px; height:48px; border-radius:50%; background:#fff; border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; margin:0 auto var(--s4);
  color: var(--muted); font-size:16px;
}
.rm-step.done .rm-dot{ background: var(--red); border-color: var(--red); color:#fff; }
.rm-step h4{ margin-bottom:5px; }
.rm-step p{ font-size: var(--fs-xs); color: var(--muted); }
.rm-phase{
  font-size: 10px; color: var(--red); font-weight:800; letter-spacing:.1em;
  margin-bottom:5px; display:block; text-transform:uppercase;
}

/* ---------- CERTIFICATES ------------------------------------------------- */
.cert-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.cert-card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow); }
.cert-thumb{
  aspect-ratio: 4/3; background: var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap: var(--s3);
  border-bottom:1px solid var(--line); position:relative; padding: var(--s5);
}
.cert-thumb .seal{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--gold);
  color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:22px;
}
.cert-thumb .seal-logo{
  width:60px; height:60px; border-radius:50%; border:2px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
  padding:9px; overflow:hidden;
}
.cert-thumb .seal-logo img{ max-width:100%; max-height:100%; object-fit:contain; }
.cert-thumb .brandname{ font-size: var(--fs-h4); font-weight:800; text-align:center; letter-spacing:-.01em; }
.cert-meta{
  padding: var(--s4) var(--s5); display:flex; align-items:center;
  justify-content:space-between; font-size: var(--fs-xs);
}
.verified{ display:flex; align-items:center; gap:6px; color:#15803D; font-size: var(--fs-xs); font-weight:700; }
.verified::before{
  content:'✓'; background:#15803D; color:#fff; width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:9px;
}

/* ---------- CATALOG BRAND CARDS ------------------------------------------ */
.brand-catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap: var(--s4); }
.brand-card-v2{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:visible; transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.brand-card-v2:hover{ border-color: var(--line-strong); box-shadow: var(--shadow); }
.brand-card-v2-head{
  display:flex; align-items:center; gap: var(--s3); padding: var(--s5);
  border-bottom:1px solid var(--line-soft);
}
.brand-logo-img{
  width:52px; height:52px; border-radius: var(--radius-sm); border:1px solid var(--line);
  background:#fff; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:7px; overflow:hidden;
}
.brand-logo-img img{ max-width:100%; max-height:100%; object-fit:contain; }
.brand-card-v2-title{ font-weight:800; font-size: var(--fs-h4); letter-spacing:-.01em; }
.brand-card-v2-sub{ font-size: var(--fs-xs); color: var(--muted); margin-top:1px; }
.brand-card-v2-body{ padding: var(--s4) var(--s5) var(--s5); }
.cat-dd{ position:relative; }
.cat-dd-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: var(--s3);
  padding: 11px 14px; background: var(--paper); border:1px solid var(--line);
  border-radius: var(--radius-sm); font-weight:600; font-size: var(--fs-sm); cursor:pointer;
  color: var(--ink); font-family:inherit; transition: border-color .16s var(--ease);
}
.cat-dd-toggle svg{ transition: transform .2s var(--ease); flex-shrink:0; opacity:.5; }
.cat-dd.open .cat-dd-toggle svg{ transform: rotate(180deg); }
.cat-dd-toggle:hover{ border-color: var(--line-strong); }
.cat-dd-menu{
  display:none; margin-top: var(--s2); border:1px solid var(--line);
  border-radius: var(--radius-sm); overflow:hidden; max-height:280px; overflow-y:auto;
}
.cat-dd.open .cat-dd-menu{ display:block; }
.cat-dd-menu a{
  display:flex; align-items:center; justify-content:space-between; gap: var(--s2);
  padding: 10px 14px; font-size: var(--fs-xs); font-weight:500; color: var(--ink-70);
  border-top:1px solid var(--line-soft);
}
.cat-dd-menu a:first-child{ border-top:none; }
.cat-dd-menu a:hover{ background: var(--paper); color: var(--red-dark); }
.cat-dd-menu a .arrow{ opacity:.35; font-size: var(--fs-xs); }
.brand-card-v2-foot{ margin-top: var(--s3); }
.brand-card-v2-foot a{
  display:flex; align-items:center; justify-content:center; gap:5px; font-size: var(--fs-xs);
  font-weight:600; color: var(--muted); padding: 7px; border-radius: 6px;
}
.brand-card-v2-foot a:hover{ color: var(--red-dark); background: var(--paper); }

/* ---------- NOTICES & BLOG ----------------------------------------------- */
.notice-list{ display:flex; flex-direction:column; gap: var(--s3); }
.notice{
  display:flex; gap: var(--s4); padding: var(--s5); border:1px solid var(--line);
  border-radius: var(--radius); align-items:flex-start; background:#fff;
  transition: border-color .18s var(--ease);
}
.notice:hover{ border-color: var(--line-strong); }
.notice-date{
  background: var(--paper); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: 9px 12px; text-align:center; min-width:60px; flex-shrink:0;
}
.notice-date b{ display:block; font-size: 19px; color: var(--ink); font-weight:800; line-height:1.1; }
.notice-date span{ font-size: 10px; text-transform:uppercase; font-weight:700; color: var(--muted); }
.notice-tag{
  display:inline-block; font-size: 10px; font-weight:700; letter-spacing:.07em;
  text-transform:uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: var(--s2);
}
.tag-arrival{ background:#EFF6FF; color:#1D4ED8; }
.tag-notice{ background:#FFFBEB; color:#92600E; }
.tag-blog{ background: var(--red-tint); color: var(--red-dark); }

.blog-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  overflow:hidden; display:flex; flex-direction:column;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.blog-card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.blog-cover{
  aspect-ratio: 16/9; background: var(--paper); display:flex; align-items:center;
  justify-content:center; border-bottom:1px solid var(--line); color: var(--red);
}
.blog-cover svg{ width: 54px; height: 54px; }
.blog-body{ padding: var(--s5); display:flex; flex-direction:column; flex:1; }
.blog-meta{
  font-size: var(--fs-micro); color: var(--muted); margin-bottom: var(--s2);
  font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.blog-body h3{ font-size: 17px; margin-bottom: var(--s2); line-height:1.3; }
.blog-body p{ font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s3); }
.blog-body .mat-goto{ margin-top:auto; }
.mat-goto{
  font-size: var(--fs-xs); font-weight:700; color: var(--red-dark);
  display:inline-flex; align-items:center; gap:5px;
}
.mat-goto:hover{ color: var(--red); }

/* ---------- FORMS -------------------------------------------------------- */
.subscribe-box{
  display:flex; gap: var(--s2); background:#fff; padding: 6px; border-radius: var(--radius-sm);
  border:1px solid var(--line); max-width:440px;
}
.subscribe-box input{ border:none; outline:none; flex:1; padding: 10px 12px; font-size: var(--fs-sm); font-family:inherit; }

/* ---------- QUOTE EMBED -------------------------------------------------- */
.quote-frame-wrap{
  border:1px solid var(--line); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow); background:#fff;
}
.quote-frame-bar{
  background: var(--ink); color:#fff; padding: 11px 18px; display:flex;
  align-items:center; justify-content:space-between; font-size: var(--fs-xs);
}
.quote-frame-bar .dots{ display:flex; gap:6px; }
.quote-frame-bar .dots span{ width:9px; height:9px; border-radius:50%; }
.dot-r{ background:#FF5F57; } .dot-y{ background:#FEBC2E; } .dot-g{ background:#28C840; }
iframe.quote-embed{ width:100%; height: 88vh; min-height: 780px; border:none; display:block; }

.steps{ display:grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-top: var(--s7); }
.step-card{ text-align:center; padding: var(--s5) var(--s4); }
.step-num{
  width:38px; height:38px; border-radius:50%; background: var(--ink); color:#fff;
  display:flex; align-items:center; justify-content:center; margin: 0 auto var(--s3); font-size:16px;
}

/* ---------- WIZARD ------------------------------------------------------- */
.wiz-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap: var(--s3); margin-top: var(--s2); }
.wiz-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5) var(--s3); text-align:center; transition: all .18s var(--ease);
  display:flex; flex-direction:column; align-items:center; gap: var(--s3);
}
.wiz-card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-2px); }
.wiz-card svg{ width:40px; height:40px; color: var(--red); }
.wiz-card span{ font-size: var(--fs-xs); font-weight:700; color: var(--ink); line-height:1.35; }
.wiz-card.wiz-catchall{ background: var(--ink); border-color: var(--ink); }
.wiz-card.wiz-catchall:hover{ background: var(--charcoal); }
.wiz-card.wiz-catchall svg, .wiz-card.wiz-catchall span{ color:#fff; }

/* ---------- FLOATING CTA (calm, no pulsing) ------------------------------ */
.floating-quote-cta{
  position:fixed; right:22px; bottom:22px; z-index:999;
  background: var(--red); color:#fff; padding: 13px 20px; border-radius: 999px;
  font-weight:700; font-size: var(--fs-sm); box-shadow: 0 6px 22px rgba(210,38,48,.32);
  display:flex; align-items:center; gap: var(--s2);
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.floating-quote-cta:hover{
  background: var(--red-dark); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(210,38,48,.42);
}

/* ---------- TABLES ------------------------------------------------------- */
table.tref{ width:100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.tref th{
  text-align:left; padding: 11px 14px; background: var(--paper); font-size: var(--fs-micro);
  text-transform:uppercase; letter-spacing:.07em; color: var(--muted);
  border-bottom:1px solid var(--line); white-space:nowrap; font-weight:700;
}
table.tref td{ padding: 10px 14px; border-bottom:1px solid var(--line-soft); }
table.tref tbody tr:hover{ background: var(--paper); }
table.tref tbody tr:last-child td{ border-bottom:none; }
.table-wrap{
  overflow-x:auto; border:1px solid var(--line); border-radius: var(--radius); background:#fff;
}

/* ---------- TOOL ILLUSTRATION SLOTS -------------------------------------- */
/* Every product image is a drop-in slot: swap the inner markup for a real
   photo later and the surrounding layout is untouched. */
.tool-art{
  aspect-ratio: 5/3; background: var(--paper); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; padding: var(--s4);
  overflow:hidden;
}
.tool-art svg, .tool-art img{
  width:100%; height:100%; object-fit:contain; display:block;
  transition: transform .3s var(--ease);
}
.tool-art-sm{ aspect-ratio: 1/1; padding: var(--s2); border-radius: var(--radius-sm); border:1px solid var(--line); background: var(--paper); }

/* ---------- CROPPED CATALOG PHOTOS --------------------------------------- */
/* .tp-frame clips to the tool; the img inside is scaled up and translated so
   only the product region of the catalog page is visible. */
.tp-frame{ position:relative; overflow:hidden; background:#fff; }
.tp-frame .tp-img{
  position:absolute; top:0; left:0; height:auto; display:block;
  transform-origin:0 0; transition:transform .35s var(--ease);
}
.tp-frame.tp-art{
  background:var(--paper); display:flex; align-items:center;
  justify-content:center; padding:10px;
}
.tp-frame.tp-art svg{ width:100%; height:100%; display:block; }

/* ---------- CONTACT DETAILS ---------------------------------------------- */
.contact-block{
  font-style:normal; color:var(--ink-70); font-size:var(--fs-sm);
  line-height:1.6; margin-bottom:var(--s4);
}
.contact-block strong{ display:block; color:var(--ink); margin-bottom:3px; }
.contact-lines{ display:flex; flex-direction:column; gap:var(--s3); }
.contact-line{ display:flex; gap:var(--s3); align-items:flex-start; }
.contact-line > svg{ width:18px; height:18px; color:var(--muted); flex-shrink:0; margin-top:2px; }
.contact-label{
  display:block; font-size:var(--fs-micro); font-weight:700; color:var(--muted);
  letter-spacing:.07em; text-transform:uppercase; margin-bottom:1px;
}
.contact-line a{ color:var(--red-dark); font-weight:700; font-size:var(--fs-sm); }
.contact-line a:hover{ color:var(--red); text-decoration:underline; }
.contact-sep{ color:var(--line-strong); margin:0 4px; }
.contact-plain{ font-size:var(--fs-sm); font-weight:600; color:var(--ink-70); }

/* ---------- UTILITIES ---------------------------------------------------- */
.stack-1{ display:flex; flex-direction:column; gap: var(--s1); }
.stack-2{ display:flex; flex-direction:column; gap: var(--s2); }
.stack-3{ display:flex; flex-direction:column; gap: var(--s3); }
.row{ display:flex; align-items:center; gap: var(--s3); flex-wrap:wrap; }
.text-center{ text-align:center; }
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- RESPONSIVE --------------------------------------------------- */
@media (max-width: 1080px){
  .hero-grid{ grid-template-columns: 1fr; gap: var(--s7); }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px){
  :root{ --s9: 56px; --s8: 44px; --s7: 32px; }
  nav.main-nav{ display:none; }
  .search-box{ display:none; }
  .mobile-toggle{ display:block; margin-left:auto; }
  .header-cta .btn{ padding: 10px 16px; font-size: var(--fs-xs); }
  .grid-2, .grid-3{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; gap: var(--s5); }
  .roadmap{ grid-template-columns: 1fr; gap: var(--s5); }
  .roadmap::before{ display:none; }
  .steps{ grid-template-columns: 1fr; }
  .cta-banner-inner{ padding: var(--s6); }
  .logo-strip{ gap: var(--s5); }
}
@media (max-width: 600px){
  .wrap{ padding: 0 18px; }
  .grid-4{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .logo img{ height: 34px; }
  .floating-quote-cta{ right:14px; bottom:14px; padding: 11px 16px; font-size: var(--fs-xs); }
  .stat-row{ gap: var(--s5); }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}