/* ASI Global Engineering: site styles.
   Tokens follow figr's tokens.json (04-FIGR-HANDOFF-COMBINED.md). Phone first (390 px).
   Breakpoints: sm 640, md 768, lg 1024, xl 1280.
   Rules: gold (--color-accent) is never text on white, never a fill except the
   Recommended badge, never a button. No movement on hover. No entrance animations. */

/* ---------- Fonts (self-hosted, OFL) ---------- */
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/noto-sans-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/noto-sans-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/noto-sans-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('/assets/fonts/noto-sans-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Devanagari downloads only when Devanagari text appears on the page (unicode-range). */
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/noto-sans-devanagari-devanagari-400-normal.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }
@font-face { font-family: 'Noto Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/noto-sans-devanagari-devanagari-700-normal.woff2') format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; }

/* ---------- Tokens ---------- */
:root {
  --color-primary: #0F5E57;
  --color-primary-hover: #0B4A44;
  --color-primary-tint: #E7F0EE;
  --color-accent: #D4AF37;
  --color-accent-tint: #FBF5E1;
  --color-ink: #233B39;
  --color-slate: #536763;
  --color-mist: #F2F5F4;
  --color-line: #D5DEDC;
  --color-line-strong: #7A8B88;
  --color-surface: #FFFFFF;
  --color-error: #B42318;
  --color-error-tint: #FEF3F2;
  --color-overlay: rgba(35, 59, 57, 0.45);

  --font-sans: 'Noto Sans', 'Noto Sans Devanagari', Arial, sans-serif;

  --space-0-5: 2px; --space-1: 4px; --space-1-5: 6px; --space-2: 8px; --space-2-5: 10px;
  --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px;

  --tap: 44px;
  --button-lg: 48px;
  --content-max: 1200px;
  --header-max: 1360px;
  --form-max: 600px;
  --sheet-max: 480px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-full: 9999px;

  --shadow-menu: 0 4px 12px rgba(35, 59, 57, 0.12);
  --shadow-sheet: 0 -4px 16px rgba(35, 59, 57, 0.12);
  --shadow-float: 0 4px 12px rgba(35, 59, 57, 0.22);

  --motion-hover: 150ms ease-out;
  --motion-overlay: 180ms ease-out;

  --gutter: 16px;
  --section-pad: 40px;
  --phone-bar-h: 64px;
}
@media (min-width: 768px) {
  :root { --gutter: 40px; --section-pad: 64px; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  overflow-wrap: break-word;
}
img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
h1, h2, h3, h4 { color: var(--color-primary); margin: 0 0 var(--space-3); text-wrap: balance; }
h1 { font-size: 26px; line-height: 32px; font-weight: 800; }
h2 { font-size: 21px; line-height: 28px; font-weight: 700; }
h3 { font-size: 18px; line-height: 24px; font-weight: 700; }
p, ul, ol, dl { margin: 0 0 var(--space-4); }
@media (min-width: 768px) {
  h1 { font-size: 36px; line-height: 44px; }
  h2 { font-size: 28px; line-height: 36px; }
}
a { color: var(--color-primary); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-hover), background-color var(--motion-hover); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
strong, b { font-weight: 700; }
small, .text-small { font-size: 14px; line-height: 20px; }
.text-label { font-size: 13px; line-height: 16px; }
.text-slate { color: var(--color-slate); }
.lead { font-size: 18px; line-height: 28px; }

.display { font-size: 28px; line-height: 34px; font-weight: 800; }
@media (min-width: 768px) { .display { font-size: 44px; line-height: 52px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-2); top: -100px; z-index: 100;
  background: var(--color-surface); color: var(--color-primary); font-weight: 700;
  padding: var(--space-3) var(--space-4); border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
}
.skip-link:focus { top: var(--space-2); }

/* Missing fact, shown honestly. Never blank, never "N/A". */
.ask-us { color: var(--color-slate); font-style: italic; font-weight: 400; }
.placeholder {
  display: inline; background: var(--color-accent-tint); color: var(--color-ink);
  font-size: 0.875em; padding: 0 var(--space-1); border-radius: 2px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.placeholder-block {
  background: var(--color-accent-tint); border-left: 3px solid var(--color-accent);
  padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); font-size: 14px; line-height: 20px;
}
.placeholder-block > :last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--content-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
/* Narrow and prose containers keep the left edge of the full container, so headings
   line up with the breadcrumb and the sections above and below (design review, Nov 2026). */
.container--narrow, .container.max-prose {
  margin-left: max(0px, calc((100% - var(--content-max) - 2 * var(--gutter)) / 2));
  margin-right: auto;
}
.container.max-prose { max-width: calc(720px + 2 * var(--gutter)); }
.section { padding: var(--section-pad) 0; }
.section--mist { background: var(--color-mist); }
.section--tight { padding: var(--space-6) 0; }
.section + .section:not(.section--mist) { padding-top: 0; }
.section--mist + .section:not(.section--mist) { padding-top: var(--section-pad); } /* must outrank the rule above: white after mist needs its top padding back */
.section.band-teal + .section:not(.section--mist):not(.band-teal) { padding-top: var(--section-pad); } /* white after a teal band needs its top padding too */
main { display: block; }
.stack > * + * { margin-top: var(--space-4); }
.grid { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 640px) and (max-width: 767px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.page-head { padding: var(--space-4) 0 var(--space-8); }
.page-head__intro { max-width: 720px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--color-surface); border-bottom: 1px solid var(--color-line); }
.site-header__inner {
  max-width: calc(var(--header-max) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-2) var(--gutter);
  display: flex; align-items: center; gap: var(--space-4); min-height: 64px;
}
.site-logo { display: block; flex: none; line-height: 0; }
.site-logo img { height: 48px; width: auto; }
@media (min-width: 768px) { .site-logo img { height: 56px; } }
.site-nav { display: none; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); }
.site-nav a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-2-5);
  color: var(--color-ink); font-weight: 600; font-size: 14px; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-primary); }
.site-nav a[aria-current="page"], .site-nav a[data-section-current] { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }
.site-header__search { display: none; width: 300px; }
.site-header .site-header__quote { display: none; }
.icon-button {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-primary); cursor: pointer; padding: 0; text-decoration: none;
}
.icon-button:hover { background: var(--color-primary-tint); }
.icon-button svg { width: 22px; height: 22px; }
@media (min-width: 768px) {
  .site-header__search { display: block; }
  .site-header__search-icon, .site-header__wa-icon { display: none; }
}
@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-header__menu-button { display: none; }
}
@media (min-width: 1280px) { .site-header .site-header__quote { display: inline-flex; } }

/* Phone menu drawer (JS); without JS the menu button links to the footer menu. */
.drawer[hidden], .search-layer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__backdrop { position: absolute; inset: 0; background: var(--color-overlay); border: 0; padding: 0; width: 100%; cursor: pointer; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 86%; max-width: 360px; background: var(--color-surface);
  overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
}
.drawer__top { display: flex; justify-content: space-between; align-items: center; }
.drawer__title { font-weight: 700; color: var(--color-primary); }
.drawer nav ul { list-style: none; margin: 0; padding: 0; }
.drawer nav a {
  display: flex; align-items: center; min-height: 48px; color: var(--color-ink); font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--color-line);
}
.drawer nav a[aria-current="page"], .drawer nav a[data-section-current] { color: var(--color-primary); box-shadow: inset 3px 0 0 var(--color-accent); padding-left: var(--space-3); }
.drawer .btn { width: 100%; }
.fade-in { animation: fade var(--motion-overlay); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Phone full-screen search layer */
.search-layer { position: fixed; inset: 0; z-index: 60; background: var(--color-surface); padding: var(--space-3) var(--gutter); overflow-y: auto; }
.search-layer__row { display: flex; gap: var(--space-2); align-items: flex-start; }
.search-layer__row .search { flex: 1; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--tap); padding: 0 var(--space-4); border-radius: var(--radius-sm);
  border: 2px solid var(--color-primary); font: inherit; font-size: 16px; font-weight: 700; line-height: 20px;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--motion-hover), color var(--motion-hover), border-color var(--motion-hover);
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lg { min-height: var(--button-lg); }
.btn--block { width: 100%; }
.btn--primary { background: var(--color-primary); color: var(--color-surface); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-surface); }
.btn--secondary { background: var(--color-surface); color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-primary-tint); }
.btn--link { border-color: transparent; background: none; color: var(--color-primary); padding: 0 var(--space-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.btn--link:hover { text-decoration-thickness: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn--primary[disabled], .btn--primary[aria-disabled="true"] { background: var(--color-line-strong); border-color: var(--color-line-strong); }
.btn--secondary[disabled], .btn--secondary[aria-disabled="true"] { color: var(--color-slate); border-color: var(--color-line); background: var(--color-surface); }
.btn-row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 640px) { .btn-row { flex-direction: row; flex-wrap: wrap; align-items: center; } }
.fallback-line { font-size: 13px; line-height: 16px; color: var(--color-slate); margin-top: var(--space-2); }
.fallback-line a { display: inline-flex; align-items: center; min-height: var(--tap); }

.badge-recommended {
  /* Gold only as a thin border, teal text on white: never gold text, never a gold fill
     (project rule, which outranks figr's gold-fill badge). Teal on white 7.6:1. */
  display: inline-block; background: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-accent);
  font-size: 13px; line-height: 16px; font-weight: 700; padding: 0 6px; border-radius: var(--radius-sm); vertical-align: middle;
}
.badge-note { font-size: 13px; color: var(--color-slate); font-weight: 400; }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; padding: 0; margin: var(--space-3) 0 0; }
/* Phone: the four popular chips sit in a 2 x 2 grid instead of wrapping 3 + 1. */
@media (max-width: 639px) { .chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .chips .chip { width: 100%; justify-content: center; } }
.chip {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--space-4);
  border: 2px solid var(--color-line-strong); border-radius: var(--radius-sm); background: var(--color-surface);
  color: var(--color-primary); font-weight: 600; text-decoration: none; cursor: pointer; font: inherit; font-weight: 600;
}
.chip:hover { background: var(--color-primary-tint); }
.chip[aria-pressed="true"], .chip--selected, input:checked + .chip { background: var(--color-primary-tint); border-color: var(--color-primary); }
input:focus-visible + .chip { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ---------- Forms ---------- */
.field { margin: 0 0 var(--space-5); }
.field__label { display: block; font-weight: 700; margin-bottom: var(--space-1-5); color: var(--color-ink); }
.field__optional { font-weight: 400; color: var(--color-slate); }
.field__hint { display: block; font-size: 13px; line-height: 16px; color: var(--color-slate); margin-top: var(--space-1-5); }
.field__error { display: flex; gap: var(--space-1-5); align-items: flex-start; font-size: 14px; line-height: 20px; color: var(--color-error); margin-top: var(--space-1-5); }
.field__error svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.input, .select, .textarea {
  display: block; width: 100%; min-height: var(--button-lg); padding: var(--space-2-5) var(--space-3);
  font: inherit; font-size: 16px; color: var(--color-ink); background: var(--color-surface);
  border: 2px solid var(--color-line-strong); border-radius: var(--radius-sm);
}
.textarea { min-height: 120px; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--color-primary); outline: 2px solid var(--color-primary); outline-offset: 2px; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); }
.input::placeholder { color: var(--color-slate); opacity: 1; }

/* ---------- Search ---------- */
.search { position: relative; }
.search__label { display: block; font-weight: 700; margin-bottom: var(--space-2); }
.search__row { display: flex; gap: var(--space-2); }
.search__field { position: relative; flex: 1; min-width: 0; }
.search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-slate); pointer-events: none; }
.search__input { padding-left: 40px; padding-right: 44px; -webkit-appearance: none; appearance: none; }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search--header .search__input { min-height: var(--tap); }
.search__clear {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: var(--tap); height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--color-slate); cursor: pointer; border-radius: var(--radius-sm);
}
.search__clear[hidden] { display: none; }
.search__clear svg { width: 18px; height: 18px; }
.search__panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-sm); box-shadow: var(--shadow-menu);
  padding: var(--space-1) 0; max-height: 70vh; overflow-y: auto;
}
.search-layer .search__panel { position: static; box-shadow: none; border: 0; max-height: none; }
.search__panel[hidden] { display: none; }
.search__heading { font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-slate); padding: var(--space-2) var(--space-4) var(--space-1); margin: 0; }
.search__list { list-style: none; margin: 0; padding: 0; }
.search__option { display: block; padding: var(--space-2) var(--space-4); min-height: var(--tap); color: var(--color-ink); text-decoration: none; cursor: pointer; }
.search__option[aria-selected="true"], .search__option:hover { background: var(--color-primary-tint); }
.search__option-title { display: block; font-weight: 600; }
.search__option-title b { font-weight: 800; color: var(--color-primary); }
.search__option-sub { display: block; font-size: 13px; line-height: 16px; color: var(--color-slate); }
.search__empty { padding: var(--space-3) var(--space-4); }
.search__empty p { margin-bottom: var(--space-3); }

/* ---------- Breadcrumb ---------- */
.breadcrumb { padding-top: var(--space-2); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; line-height: 20px; color: var(--color-slate); }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-slate); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb [aria-current="page"] { color: var(--color-ink); font-weight: 600; display: inline-flex; align-items: center; min-height: var(--tap); }
.breadcrumb svg { width: 16px; height: 16px; margin: 0 var(--space-1); color: var(--color-line-strong); }

/* ---------- Section heading ---------- */
.section-heading { margin-bottom: var(--space-5); }
.section-heading__eyebrow { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: 0.025em; text-transform: uppercase; color: var(--color-primary); }
.section-heading__eyebrow::before { content: ''; width: 12px; height: 12px; border: 2px solid var(--color-accent); flex: none; }
.section-heading__title { margin-bottom: 0; }
/* Major sections: the catalogue's hollow gold square sits on the heading itself. The all-caps
   label above it repeated the heading word for word ("CHISELS" over "Popular chisel models"),
   so it is gone (frontend-design pass, Nov 2026). */
.section-heading__title--marked::before { content: ''; display: inline-block; width: 12px; height: 12px; border: 2px solid var(--color-accent); margin-right: 12px; vertical-align: 0.15em; }
.section-heading__title::after { content: ''; display: block; width: 40px; height: 2px; background: var(--color-accent); margin-top: var(--space-3); }
.section-heading__intro { margin: var(--space-3) 0 0; max-width: 720px; }

/* ---------- Proof strip ---------- */
.proof { list-style: none; margin: 0; padding: var(--space-5) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
@media (min-width: 768px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); } }
.proof__item { display: flex; flex-direction: column; gap: var(--space-1); }
.proof__item svg { width: 20px; height: 20px; color: var(--color-primary); }
.proof__title { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-ink); }
.proof__detail { font-size: 13px; line-height: 16px; color: var(--color-slate); }

/* ---------- Cards and tiles ---------- */
.card { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-surface); }
.card > :last-child { margin-bottom: 0; }
.card--link { display: block; text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--color-primary); }
.card__title { font-size: 18px; line-height: 24px; font-weight: 700; color: var(--color-primary); margin-bottom: var(--space-1); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 768px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.tile { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--color-line); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-ink); background: var(--color-surface); overflow: hidden; }
.tile:hover { border-color: var(--color-primary); }
.tile__media { aspect-ratio: 4 / 3; background: var(--color-mist); display: flex; align-items: center; justify-content: center; color: var(--color-slate); font-size: 13px; text-align: center; padding: var(--space-2); }
.tile__media img { width: 100%; height: 100%; object-fit: contain; }
.tile__body { padding: var(--space-3); }
.tile__name { display: block; font-weight: 800; color: var(--color-primary); font-size: 18px; line-height: 24px; }
.tile__sub { display: block; font-size: 13px; line-height: 16px; color: var(--color-slate); }
.link-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.link-list li + li { border-top: 1px solid var(--color-line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-4); text-decoration: none; color: var(--color-ink); font-weight: 600; }
.link-list a:hover { background: var(--color-mist); color: var(--color-primary); }
.link-list svg { width: 16px; height: 16px; color: var(--color-primary); flex: none; }
.link-list__sub { display: block; font-weight: 400; font-size: 13px; line-height: 16px; color: var(--color-slate); }

/* Image slot for photos not yet supplied. Never a stock or AI image. */
.photo-slot {
  aspect-ratio: 4 / 3; background: var(--color-mist); border: 1px dashed var(--color-line-strong); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4);
  color: var(--color-slate); font-size: 13px; line-height: 16px;
}
.figure { margin: 0 0 var(--space-4); }
.figure img { border-radius: var(--radius-sm); width: 100%; }
.figure figcaption { font-size: 13px; line-height: 16px; color: var(--color-slate); margin-top: var(--space-2); }

/* ---------- Tables (generic) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table caption { text-align: left; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--space-3); border-bottom: 1px solid var(--color-line); }
.table thead th { background: var(--color-mist); color: var(--color-primary); font-weight: 700; }
.table tbody tr:hover { background: var(--color-mist); }
.table td { font-weight: 600; }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); margin: 0; }
.dl-grid dt { font-size: 13px; line-height: 16px; color: var(--color-slate); }
.dl-grid dd { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; }

/* ---------- Spec table ---------- */
.spec-note { background: var(--color-accent-tint); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: 14px; line-height: 20px; margin-bottom: var(--space-4); }
.spec-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.spec-card { border: 2px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-4); background: var(--color-surface); }
.spec-card--recommended { border-color: var(--color-primary); }
.spec-card.is-highlighted, .spec-table tr.is-highlighted { background: var(--color-accent-tint); }
.spec-card.is-highlighted { border-color: var(--color-accent); }
.spec-card__title { font-size: 18px; line-height: 24px; font-weight: 800; margin: 0 0 var(--space-1); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.spec-card__code { font-size: 14px; line-height: 20px; color: var(--color-slate); margin: 0 0 var(--space-3); }
.spec-card .dl-grid { margin: var(--space-4) 0 0; } /* button sits above the sizes so it shows in the first screen (M1) */
.spec-card__foot { font-size: 13px; line-height: 16px; color: var(--color-slate); margin: var(--space-2) 0 0; }
.spec-card__notmade, .spec-table__notmade { color: var(--color-slate); font-size: 14px; }
.spec-table { display: none; }
@media (min-width: 768px) {
  .spec-cards { display: none; }
  .spec-table { display: table; }
  .spec-table th[scope="row"] { font-weight: 800; color: var(--color-primary); }
  .spec-table td:last-child { text-align: right; white-space: nowrap; }
}

/* ---------- Grade table ---------- */
.grade-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.grade-table th, .grade-table td { padding: var(--space-3); vertical-align: top; text-align: left; border-bottom: 1px solid var(--color-line); }
.grade-table thead th { font-size: 16px; }
.grade-table .col-rec { background: var(--color-primary-tint); }
.grade-table thead .col-rec { border-top: 3px solid var(--color-accent); }
.grade-table tbody .col-rec { background: rgba(231, 240, 238, 0.5); font-weight: 600; }
.grade-table__name { display: block; color: var(--color-primary); font-weight: 800; }
.grade-table__sub { display: block; font-size: 13px; color: var(--color-slate); font-weight: 400; margin-top: var(--space-1); }
.grade-table .row-label { display: none; }
.grade-table .cell-label { display: block; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-slate); margin-bottom: var(--space-1); }
.grade-table .pending { color: var(--color-slate); font-style: italic; }
@media (min-width: 768px) {
  .grade-table .row-label { display: table-cell; width: 180px; font-weight: 700; color: var(--color-ink); }
  .grade-table .cell-label { display: none; }
}
.value-line { background: var(--color-mist); border-left: 3px solid var(--color-accent); padding: var(--space-4); margin-top: var(--space-4); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.value-line > :last-child { margin-bottom: 0; }

/* ---------- Hardness by zone ---------- */
.zones { margin: 0; }
.zones__list { list-style: none; margin: var(--space-3) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.zones__cell { background: var(--color-surface); border-top: 3px solid var(--color-accent); padding: var(--space-3); }
.zones__zone { display: block; font-size: 13px; line-height: 16px; font-weight: 700; color: var(--color-slate); }
.zones__value { display: block; font-size: 28px; line-height: 36px; font-weight: 800; color: var(--color-primary); margin: var(--space-1) 0; }
.zones__value small { font-size: 13px; font-weight: 700; color: var(--color-slate); }
.zones__n { white-space: nowrap; }
@media (max-width: 639px) { .zones__about { display: block; line-height: 16px; } .zones__value { font-size: 26px; line-height: 32px; } }
.zones__drawing { display: block; width: 100%; height: auto; } /* drawing's zones are equal thirds, so they sit over the three cells */
@media (min-width: 768px) { .zones__value { font-size: 32px; line-height: 40px; } }
.zones__purpose { display: block; font-size: 13px; line-height: 16px; color: var(--color-slate); }
.zones figcaption { font-size: 13px; line-height: 16px; color: var(--color-slate); }

/* ---------- Process steps ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); counter-reset: step; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { border: 1px solid var(--color-line); border-radius: var(--radius-sm); overflow: hidden; }
.step__body { padding: var(--space-4); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--color-accent); font-weight: 800; color: var(--color-primary); margin-bottom: var(--space-2); }
.step__title { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-1); }
.step__detail { font-size: 14px; line-height: 20px; color: var(--color-slate); margin: 0; }
.step .photo-slot { border-radius: 0; border: 0; border-bottom: 1px solid var(--color-line); }

/* ---------- Case study card ---------- */
.cases { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 768px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { border: 1px solid var(--color-line); border-radius: var(--radius-sm); padding: var(--space-4); display: flex; flex-direction: column; }
.case__part { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-3); }
.case__cells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: 0 0 var(--space-2); }
.case__cell { padding: var(--space-3); background: var(--color-mist); }
.case__cell--after { background: var(--color-primary-tint); border-left: 3px solid var(--color-accent); }
.case__cell dt { font-size: 13px; line-height: 16px; color: var(--color-slate); }
.case__cell dd { margin: 0; font-weight: 800; font-size: 18px; line-height: 24px; }
.case__cell--after dd { color: var(--color-primary); }
.case__unit { font-size: 13px; line-height: 16px; color: var(--color-slate); margin: 0 0 var(--space-2); }
.case__more { margin-top: auto; }

/* ---------- Kit list ---------- */
.kit { list-style: none; margin: 0 0 var(--space-4); padding: 0; border: 1px solid var(--color-line); border-radius: var(--radius-sm); }
.kit__row { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); }
.kit__row--no-thumb { grid-template-columns: 1fr; }
.kit__row--no-thumb .kit__action { grid-column: 1; }
@media (min-width: 768px) { .kit__row.kit__row--no-thumb { grid-template-columns: 1fr auto; } .kit__row--no-thumb .kit__action { grid-column: auto; } }
.kit__row + .kit__row { border-top: 1px solid var(--color-line); }
.kit__row.is-highlighted { background: var(--color-accent-tint); }
.kit__thumb { width: 56px; height: 56px; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-mist); object-fit: contain; }
.kit__name { font-weight: 700; margin: 0; }
.kit__code { font-size: 13px; line-height: 16px; color: var(--color-slate); margin: 0; }
.kit__action { grid-column: 2; }
@media (min-width: 768px) { .kit__row { grid-template-columns: 56px 1fr auto; } .kit__action { grid-column: auto; } }

/* ---------- Certificate card ---------- */
.cert { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-3); }
.cert svg { width: 24px; height: 24px; color: var(--color-primary); }
.cert__name { font-weight: 700; margin: 0; }
.cert__issuer { color: var(--color-slate); font-size: 14px; margin: 0 0 var(--space-2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--color-line); }
.faq details { border-bottom: 1px solid var(--color-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: var(--space-3) 0; cursor: pointer; font-weight: 700; color: var(--color-primary); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform var(--motion-hover); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq__answer { padding: 0 0 var(--space-4); }
.faq__answer > :last-child { margin-bottom: 0; }

/* ---------- Article (guides) ---------- */
.prose { max-width: 720px; }
.prose h2 { margin-top: var(--space-8); }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-1); }
.short-answer { background: var(--color-mist); border-left: 3px solid var(--color-accent); padding: var(--space-4); margin-bottom: var(--space-6); }
.short-answer > :last-child { margin-bottom: 0; }

/* ---------- Certificates and exhibitions line (home section 9) ---------- */
.proof-line { border-top: 1px solid var(--color-line); padding-top: var(--space-5); font-size: 15px; line-height: 24px; color: var(--color-ink); margin: 0; }
.proof-line strong { color: var(--color-primary); }

/* ---------- End block ---------- */
.end-block { background: var(--color-mist); padding: var(--space-8) 0; }
.end-block__inner { display: flex; flex-direction: column; gap: var(--space-4); }
.end-block h2 { margin: 0; }
.end-block__reply { margin: var(--space-1) 0 0; color: var(--color-slate); font-size: 14px; line-height: 20px; }
@media (min-width: 768px) {
  .end-block__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 2px solid var(--color-accent); background: var(--color-surface); padding: var(--space-10) 0 calc(var(--phone-bar-h) + 32px + env(safe-area-inset-bottom)); font-size: 14px; line-height: 20px; }
@media (min-width: 768px) { .site-footer { padding-bottom: var(--space-10); } }
.site-footer__grid { display: grid; gap: var(--space-8); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); } }
.site-footer__logo img { width: 100%; max-width: 360px; height: auto; }
.site-footer address { font-style: normal; margin: var(--space-4) 0; }
.site-footer h2 { font-size: 14px; line-height: 20px; font-weight: 700; color: var(--color-ink); margin: 0 0 var(--space-2); text-transform: none; }
.site-footer h2::after { display: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li a, .site-footer__contact a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--color-primary); }
.site-footer__legal { border-top: 1px solid var(--color-line); margin-top: var(--space-8); padding-top: var(--space-4); color: var(--color-slate); font-size: 13px; line-height: 16px; }

/* ---------- Phone action bar (< 768) and floating WhatsApp (>= 768) ---------- */
.phone-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--color-surface);
  border-top: 1px solid var(--color-line); padding: var(--space-2) var(--space-4) calc(var(--space-2) + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2);
}
.phone-bar .btn { min-height: var(--button-lg); }
.float-wa { display: none; }
@media (min-width: 768px) {
  .phone-bar { display: none; }
  .float-wa {
    position: fixed; right: 24px; bottom: 24px; z-index: 30; display: inline-flex; border-radius: var(--radius-full);
    box-shadow: var(--shadow-float); padding: 0 var(--space-5); min-height: var(--button-lg);
  }
  /* Hidden (no transition) while another WhatsApp button is on screen, so it never
     covers a spec-row button and never doubles the one in view. Set by site.js. */
  .float-wa.is-covered { display: none; }
}

/* ---------- Utilities ---------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--space-2); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); }
.mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.max-prose { max-width: 720px; }
.split { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) { .split { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; } }

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

@media print {
  .site-header, .phone-bar, .float-wa, .end-block, .drawer, .search-layer { display: none !important; }
  .site-footer { padding-bottom: 0; }
}

/* ---------- Real photos ---------- */
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.photo--hero { aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 4px solid var(--color-accent); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } /* figr: gold 4 px base rule */
.photo--portrait { max-width: 280px; margin-bottom: var(--space-4); }
.step > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--color-line); }

/* ---------- Web Interface Guidelines pass (vercel-labs web-design-guidelines, Nov 2026) ---------- */
a, button, summary, label, .btn, .chip { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* no double-tap zoom delay; focus ring and hover states still show */
.drawer__panel, .search-layer, .search__panel { overscroll-behavior: contain; } /* scrolling a menu or the suggestions doesn't scroll the page behind */
.table, .spec-card .dl-grid, .case__cell dd, .zones__value, .grade-table { font-variant-numeric: tabular-nums; } /* sizes and hours line up */
.section-heading__intro, .lead, .page-head__intro { max-width: 68ch; } /* under 80 characters a line */

/* ---------- ui-ux-pro-max pass (Nov 2026) ---------- */
/* press-feedback: the grey tap flash is off, so give every control a visible pressed state */
.btn--primary:active { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--secondary:active, .chip:active, .icon-button:active, .tile:active, .card--link:active, .link-list a:active { background: var(--color-primary-tint); }
a:active { text-decoration-thickness: 2px; }
/* focus-not-obscured (WCAG 2.2 AA 2.4.11): keyboard focus never lands under the phone bar or the floating button */
html { scroll-padding-bottom: 96px; }
/* touch-target-size: the call and form links in the small fallback line get a 44 px tall hit area without moving the text */
.fallback-line a { display: inline-block; padding: 14px 2px; margin: -14px 0; }
p > a:only-child, .proof-line a { display: inline-block; padding: 11px 0; margin: -11px 0; } /* stand-alone text links: 44 px hit area, same layout */
main p a[href^="tel:"], main p a[href^="mailto:"] { display: inline-block; padding: 11px 0; margin: -11px 0; } /* phone and email links: 44 px hit area */

/* =====================================================================
   Revamp (Nov 2026): teal hero bands, bigger type, stronger tiles, plant band.
   Teal surfaces carry white text (7.6:1). Gold stays thin: rules, marker, badge border.
   ===================================================================== */
.band-teal { background: var(--color-primary); color: var(--color-surface); }
.band-teal h1, .band-teal h2, .band-teal h3, .band-teal .section-heading__title { color: var(--color-surface); }
.band-teal a:not(.btn) { color: var(--color-surface); }
.band-teal :focus-visible { outline-color: var(--color-surface); }
.band-teal .text-slate, .band-teal .fallback-line, .band-teal .page-head__intro, .band-teal dt { color: #D7E6E3; } /* 5.9:1 on teal */
.band-teal .lead, .band-teal p { color: var(--color-surface); }
.band-teal .fallback-line { color: #D7E6E3; }
.band-teal .btn--primary { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-primary); }
.band-teal .btn--primary:hover, .band-teal .btn--primary:active { background: var(--color-primary-tint); border-color: var(--color-primary-tint); color: var(--color-primary); }
.band-teal .btn--secondary { background: transparent; border-color: var(--color-surface); color: var(--color-surface); }
.band-teal .btn--secondary:hover, .band-teal .btn--secondary:active { background: rgba(255, 255, 255, 0.12); }
.band-teal .chip { background: transparent; border-color: #B9D3CE; color: var(--color-surface); } /* border 4.8:1 */
.band-teal .chip:hover, .band-teal .chip:active { background: rgba(255, 255, 255, 0.12); border-color: var(--color-surface); }
.band-teal .search__label { color: var(--color-surface); }
.band-teal .search__input { border-color: var(--color-surface); }
.band-teal .ask-us { color: #D7E6E3; }
.band-teal .placeholder { color: var(--color-ink); }

.hero { padding: var(--space-8) 0 var(--space-10); border-bottom: 3px solid var(--color-accent); }
@media (min-width: 768px) { .hero { padding: var(--space-16) 0; } }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); } }
.hero .display { font-size: 34px; line-height: 40px; letter-spacing: -0.01em; margin-bottom: var(--space-4); }
@media (min-width: 768px) { .hero .display { font-size: 56px; line-height: 62px; } }
.hero .lead { font-size: 18px; line-height: 28px; }
@media (min-width: 768px) { .hero .lead { font-size: 20px; line-height: 30px; } }
.hero__photo { margin: 0; }
.hero__photo .photo--hero { border-bottom: 0; border-radius: var(--radius-sm); }
.hero__photo figcaption { font-size: 13px; line-height: 16px; color: #D7E6E3; margin-top: var(--space-2); }

/* Inner-page heroes (chisel hub, model pages): same band, quieter type */
.hero--page { padding: var(--space-6) 0 var(--space-8); }
@media (min-width: 768px) { .hero--page { padding: var(--space-10) 0 var(--space-12); } .hero--page h1 { font-size: 44px; line-height: 52px; } }
.hero--page .photo--hero { border-bottom: 0; }
.breadcrumb + .hero { margin-top: var(--space-2); }
/* Phone model page: keep the band compact so the first chisel's WhatsApp button stays on the first screen (M1) */
@media (max-width: 767px) {
  .hero--model { padding: var(--space-4) 0 var(--space-4); }
  .hero--model h1 { margin-bottom: var(--space-2); }
  .hero--model .dl-grid { margin-top: var(--space-3); }
}
.hero--model + #chisels { padding-top: var(--space-6); }

/* Bigger type scale for section headings */
@media (min-width: 768px) { h2, .section-heading__title { font-size: 32px; line-height: 40px; } }

/* Proof strip: bigger and calmer, straight under the hero */
.proof { padding: var(--space-6) 0; border-top: 0; }
.proof__item svg { width: 28px; height: 28px; }
.proof__title { font-size: 16px; line-height: 24px; }
.proof__detail { font-size: 14px; line-height: 20px; }

/* Model tiles: a teal top edge, the model name large, a clear "see chisels" row */
.tile--text { border-top: 4px solid var(--color-primary); }
.tile--text:hover { border-color: var(--color-primary); }
.tile__name { font-size: 22px; line-height: 28px; }
.tile--text .tile__cta { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--color-line); margin-top: var(--space-3); padding-top: var(--space-3); text-decoration: none; }
.tile--text .tile__cta::after { content: '›'; font-size: 22px; line-height: 1; }
.tile--text:hover .tile__cta { text-decoration: underline; }

/* Results: the "with ASI" number is the headline */
.case__cell--after dd { font-size: 26px; line-height: 32px; }
@media (min-width: 768px) { .case__cell--after dd { font-size: 30px; line-height: 36px; } }

/* Plant band: real photos of ASI's own plant */
.plant__head { max-width: 760px; }
.plant__grid { list-style: none; margin: var(--space-6) 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 1024px) { .plant__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } }
.plant__grid figure { margin: 0; }
.plant__grid img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); border-bottom: 3px solid var(--color-accent); }
.plant__grid figcaption { margin-top: var(--space-2); font-size: 14px; line-height: 20px; color: #D7E6E3; }
.plant__grid figcaption strong { display: block; color: var(--color-surface); font-size: 16px; }
.plant__certs { max-width: 760px; font-size: 16px; line-height: 26px; }
.plant__certs strong { color: var(--color-surface); }