/* ==========================================================================
   Arch International
   A light, technical scheme built around the blue in the logo. Ink stays dark
   enough to read on a workshop phone in daylight; amber is reserved for the one
   action that matters, which is asking for a price.
   ========================================================================== */

:root {
  --page:       #F5F8FA;
  --surface:    #FFFFFF;
  --surface-2:  #EFF4F7;
  --surface-3:  #E6EDF2;

  --line:       #DFE7ED;
  --line-soft:  #EBF0F4;

  --ink:        #16242E;
  --ink-2:      #4C5F6C;
  --ink-3:      #7C8C98;

  --brand:      #1A5E90;
  --brand-dark: #0E4269;
  --brand-deep: #0A3454;
  --brand-tint: #E9F1F8;
  --brand-tint2:#D5E5F1;

  --amber:      #EDA412;
  --amber-dark: #8A5E00;
  --amber-tint: #FDF4E1;

  --good:       #2C7A52;
  --bad:        #B3341A;
  --bad-tint:   #FCF1EE;

  --display: "Barlow Condensed", "Arial Narrow", Helvetica, sans-serif;
  --body:    "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --r:    8px;
  --r-sm: 6px;
  --shell: 1200px;
  --hair: 1px solid var(--line);
  --lift:  0 1px 2px rgba(22,36,46,.05), 0 10px 26px -14px rgba(22,36,46,.22);
  --lift-2:0 2px 4px rgba(22,36,46,.06), 0 18px 40px -18px rgba(22,36,46,.28);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-dark); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: var(--r-sm); }

.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell-narrow { max-width: 760px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 10px; top: 10px; z-index: 60; background: var(--brand);
  color: #fff; padding: 10px 16px; border-radius: var(--r-sm); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }

/* ============================ typography ================================= */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.005em;
  margin: 0;
}

.h-hero { font-size: clamp(2.4rem, 5vw, 3.9rem); font-weight: 700; letter-spacing: -.015em; }
.h-page { font-size: clamp(1.95rem, 3.4vw, 2.85rem); font-weight: 700; letter-spacing: -.012em; }
.h-sect { font-size: clamp(1.6rem, 2.5vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; }
.h-card { font-size: 1.32rem; font-weight: 600; }

.eyebrow {
  font-family: var(--mono);
  font-size: .69rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 12px;
}
.eyebrow-light { color: var(--amber-dark); }

.lede { font-size: 1.09rem; color: var(--ink-2); max-width: 64ch; margin: 0; }

.sect-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 28px;
  border-bottom: 2px solid var(--line);
}
.sect-head p { margin: 8px 0 0; }

/* ============================ header ===================================== */

.topbar { background: var(--brand-deep); color: #B9CEDD; font-size: .82rem; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 9px 24px; max-width: var(--shell);
  margin: 0 auto;
}
.topbar a { color: #FFFFFF; text-decoration: none; font-weight: 500; }
.topbar a:hover { color: var(--amber); }
.topbar-hours {
  font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: #93AFC2;
}

.masthead {
  background: var(--surface);
  border-bottom: var(--hair);
  position: sticky; top: 0; z-index: 40;
}
.masthead-inner {
  display: flex; align-items: center; gap: 24px;
  padding: 15px 24px; max-width: var(--shell); margin: 0 auto;
}

.brand { display: flex; align-items: center; gap: 13px; text-decoration: none;
  color: var(--ink); flex: 0 0 auto; }
.brand-badge {
  width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%;
  background: var(--brand); display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 1.7rem;
  color: #fff; line-height: 1; padding-bottom: 2px;
  box-shadow: 0 2px 8px -2px rgba(26,94,144,.55);
}
.brand-name {
  font-family: var(--display); font-weight: 700; font-size: 1.42rem;
  letter-spacing: -.01em; line-height: 1.05; display: block;
}
.brand-tag {
  font-family: var(--mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); display: block; margin-top: 2px;
}

.mainnav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.mainnav a {
  font-family: var(--display); font-size: 1.06rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .045em;
  padding: 9px 14px; border-radius: var(--r-sm); text-decoration: none;
  color: var(--ink-2);
}
.mainnav a:hover { background: var(--brand-tint); color: var(--brand); }
.mainnav a.is-on { color: var(--brand); background: var(--brand-tint); font-weight: 600; }

.navtoggle { display: none; }

/* ============================ buttons ==================================== */

.btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font-family: var(--display); font-size: 1.05rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  padding: 11px 22px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              transform .1s ease, box-shadow .15s ease;
}
.btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-busy { opacity: .55; cursor: progress; }

/* the one action that matters */
.btn-cta {
  background: var(--amber); border-color: var(--amber); color: #33230A;
  box-shadow: 0 3px 12px -4px rgba(237,164,18,.7);
}
.btn-cta:hover { background: #FFB524; border-color: #FFB524; color: #33230A; }

/* everything navigational */
.btn-steel { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-steel:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }

.btn-quiet { background: transparent; border-color: var(--line); color: var(--ink-2); }
.btn-quiet:hover { background: var(--surface); border-color: var(--brand); color: var(--brand); }

.btn-ondark { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.45); color: #fff; }
.btn-ondark:hover { background: #fff; border-color: #fff; color: var(--brand-dark); }

.btn-sm { padding: 7px 14px; font-size: .93rem; }
.btn-wide { width: 100%; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================ hero ======================================= */

.hero {
  background:
    radial-gradient(1100px 420px at 12% -10%, var(--brand-tint) 0%, transparent 62%),
    linear-gradient(180deg, var(--surface) 0%, var(--page) 100%);
  border-bottom: var(--hair);
  position: relative;
  overflow: hidden;
}
/* faint drawing grid, a nod to the technical drawings on the product pages */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(90deg, rgba(26,94,144,.05) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg,  rgba(26,94,144,.05) 0 1px, transparent 1px 48px);
  mask-image: linear-gradient(115deg, rgba(0,0,0,.85), transparent 70%);
  -webkit-mask-image: linear-gradient(115deg, rgba(0,0,0,.85), transparent 70%);
}
.hero-inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: 52px; align-items: center; padding: 64px 24px 68px;
  max-width: var(--shell); margin: 0 auto;
}
.hero h1 { margin-bottom: 20px; text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--brand); display: block; }
.hero-lede { color: var(--ink-2); font-size: 1.12rem; max-width: 50ch; margin: 0 0 28px; }
.hero .btn-row { margin-bottom: 22px; }
.hero-note {
  font-family: var(--mono); font-size: .73rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); margin: 0;
}

/* the buying-steps card */
.plate {
  background: var(--surface);
  border: var(--hair);
  border-top: 3px solid var(--amber);
  border-radius: var(--r);
  box-shadow: var(--lift);
  padding: 24px 26px 20px;
}
.plate-title {
  font-family: var(--display); font-size: 1.24rem; font-weight: 600;
  color: var(--ink); margin: 0 0 6px;
}
.plate-rows { margin: 14px 0 0; display: grid; gap: 0; counter-reset: step; }
.plate-rows > div {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: baseline;
  padding: 10px 0; border-bottom: 1px solid var(--line-soft);
}
.plate-rows > div:last-child { border-bottom: 0; }
.plate-rows dt {
  font-family: var(--mono); font-size: .62rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
  background: var(--brand-tint); border-radius: 4px; padding: 3px 0;
  text-align: center;
}
.plate-rows dd { margin: 0; font-size: .95rem; color: var(--ink); }

/* ============================ sections =================================== */

.band { padding: 60px 0; }
.band-alt { background: var(--surface-2); }
.band-white { background: var(--surface); }
.band-tight { padding: 40px 0; }

.pagehead { background: var(--surface); border-bottom: var(--hair); padding: 32px 0 30px; }
.crumbs {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px;
}
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--brand); }

/* ============================ category tiles ============================= */

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; }
.tile {
  display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: var(--surface); border: var(--hair); border-radius: var(--r);
  padding: 22px 22px 20px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.tile::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--brand); margin-bottom: 14px; transition: background .16s ease, width .16s ease;
}
.tile:hover {
  transform: translateY(-3px); box-shadow: var(--lift-2);
  border-color: var(--brand-tint2); color: var(--ink);
}
.tile:hover::before { background: var(--amber); width: 52px; }
.tile h3 { font-size: 1.26rem; margin-bottom: 7px; }
.tile p { margin: 0 0 14px; font-size: .92rem; color: var(--ink-2); }
.tile-count {
  margin-top: auto; font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); font-weight: 500;
}

/* ============================ product cards ============================== */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }

.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: var(--hair); border-radius: var(--r);
  overflow: hidden;
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card:hover {
  box-shadow: var(--lift-2); transform: translateY(-3px);
  border-color: var(--brand-tint2);
}

.card-media {
  display: block; background: var(--surface-2); border-bottom: var(--hair);
  position: relative; line-height: 0;
}
.card-media img, .card-media svg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-tag {
  position: absolute; top: 11px; left: 11px;
  font-family: var(--mono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; background: rgba(255,255,255,.94); color: var(--brand);
  padding: 4px 9px; border-radius: 100px; box-shadow: 0 1px 3px rgba(22,36,46,.14);
}

.card-body { padding: 17px 18px 19px; display: flex; flex-direction: column; gap: 10px;
  flex: 1 0 auto; }
.card-cat { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0; }
.card-title { margin: 0; }
.card-title a { color: var(--ink); text-decoration: none; }
.card-title a:hover { color: var(--brand); }
.card-model {
  font-family: var(--mono); font-size: .77rem; color: var(--brand);
  background: var(--brand-tint); padding: 3px 9px; border-radius: 100px;
  display: inline-block;
}
.card-sum { margin: 0; font-size: .91rem; color: var(--ink-2); flex: 1 0 auto; }

.keyspecs { margin: 0; padding: 13px 0 0; border-top: 1px solid var(--line-soft);
  display: grid; gap: 6px; }
.keyspecs > div { display: grid; grid-template-columns: auto 1fr; gap: 10px;
  font-size: .8rem; align-items: baseline; }
.keyspecs dt { color: var(--ink-3); }
.keyspecs dd { margin: 0; font-family: var(--mono); color: var(--ink);
  text-align: right; font-size: .78rem; }

.card-foot { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.card-foot .btn { flex: 1 1 auto; }

/* price is withheld on purpose, so label it rather than leave a gap */
.onreq {
  font-family: var(--mono); font-size: .65rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber-dark);
  border: 1px solid #F0D79A; border-radius: 100px; padding: 4px 10px;
  background: var(--amber-tint); white-space: nowrap;
}

/* ============================ catalogue page ============================= */

.catalogue { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 34px;
  align-items: start; }

.sidebar { position: sticky; top: 96px; }
.sidebar h2 {
  font-size: 1.1rem; padding-bottom: 11px; border-bottom: 2px solid var(--line);
  margin-bottom: 6px;
}
.catlist { list-style: none; margin: 0; padding: 0; }
.catlist a {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 10px 12px; text-decoration: none; color: var(--ink-2);
  border-radius: var(--r-sm); font-size: .93rem;
}
.catlist a:hover { background: var(--surface); color: var(--brand); }
.catlist a.is-on { background: var(--brand); color: #fff; font-weight: 500; }
.catlist a.is-on span { color: #BFD9EC; }
.catlist span { font-family: var(--mono); font-size: .73rem; color: var(--ink-3); }

.searchbar { display: flex; gap: 0; margin-bottom: 24px; }
.searchbar input {
  flex: 1 1 auto; min-width: 0; font: inherit; padding: 12px 15px;
  border: var(--hair); border-right: 0;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.searchbar input:focus { border-color: var(--brand); }
.searchbar .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

.chiprow { display: none; gap: 8px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 18px; }
.chip {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-family: var(--display); font-size: .98rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  padding: 8px 15px; border: var(--hair); border-radius: 100px;
  background: var(--surface); color: var(--ink-2);
}
.chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.resultline { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; }

.empty {
  background: var(--surface); border: 1px dashed var(--line);
  border-radius: var(--r); padding: 48px 26px; text-align: center;
}
.empty p { max-width: 48ch; margin: 0 auto 20px; color: var(--ink-2); }

/* ============================ product detail ============================= */

.detail { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 44px; align-items: start; }
.detail-media { background: var(--surface); border: var(--hair); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--lift); }
.detail-media img, .detail-media svg { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-note {
  font-family: var(--mono); font-size: .67rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 10px 15px; border-top: var(--hair); background: var(--surface-2); margin: 0;
}

.detail-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.detail h1 { margin-bottom: 12px; }

.askbox {
  background: var(--surface); border: var(--hair);
  border-top: 3px solid var(--amber);
  border-radius: var(--r); padding: 22px; margin: 24px 0 28px;
  box-shadow: var(--lift);
}
.askbox h2 { font-size: 1.28rem; margin-bottom: 7px; }
.askbox p { margin: 0 0 16px; font-size: .93rem; color: var(--ink-2); }

.applist { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.applist li {
  font-size: .82rem; padding: 5px 12px; border-radius: 100px;
  background: var(--brand-tint); color: var(--brand-dark);
}

.prose p { margin: 0 0 15px; }
.prose p:last-child { margin-bottom: 0; }

/* spec sheet */
.specwrap { background: var(--surface); border: var(--hair); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--lift); }
.specwrap-head {
  background: var(--brand); color: #fff; padding: 14px 16px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.specwrap-head h2 { font-size: 1.16rem; color: #fff; }
.specwrap-head span {
  font-family: var(--mono); font-size: .67rem; color: #BFD9EC;
  letter-spacing: .1em; text-transform: uppercase;
}
.specsheet { margin: 0; }
.specsheet > div {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.specsheet > div:nth-child(even) { background: #FAFCFD; }
.specsheet > div:last-child { border-bottom: 0; }
.specsheet dt { color: var(--ink-2); font-size: .9rem; }
.specsheet dd { margin: 0; font-family: var(--mono); font-size: .87rem; color: var(--ink); }
.specs-empty { padding: 28px 18px; text-align: center; color: var(--ink-2); font-size: .92rem; }

/* ============================ forms ====================================== */

.field { margin-bottom: 17px; }
.field > label {
  display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 12px 14px;
  border: var(--hair); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.field textarea { min-height: 100px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
  outline: none;
}
.field input[type=file] { padding: 10px; background: var(--surface-2); font-size: .9rem; }
.field-bad input, .field-bad textarea, .field-bad select {
  border-color: var(--bad); background: var(--bad-tint);
}
.field-err { color: #8C2914; font-size: .84rem; margin: 6px 0 0; }
.field-hint { color: var(--ink-3); font-size: .82rem; margin: 6px 0 0; }
.req { color: var(--bad); }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.honey { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

.formcard { background: var(--surface); border: var(--hair); border-radius: var(--r);
  padding: 28px; box-shadow: var(--lift); }
.notice {
  border-left: 4px solid var(--bad); background: var(--bad-tint);
  padding: 13px 16px; border-radius: var(--r-sm); margin: 0 0 20px; font-size: .93rem;
}
.notice-ok { border-left-color: var(--good); background: #F1F8F4; }
.notice-warn { border-left-color: var(--amber); background: var(--amber-tint); }
.flashes { display: grid; gap: 8px; padding-top: 18px; }

/* ============================ CTA band =================================== */

.ctaband {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-deep) 100%);
  color: #fff;
}
.ctaband-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px;
  align-items: center; padding: 46px 24px; max-width: var(--shell); margin: 0 auto;
}
.ctaband h2 { color: #fff; margin-bottom: 10px; }
.ctaband p { color: #C9DEEE; margin: 0; max-width: 58ch; }

/* ============================ promises =================================== */

.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
.promise { padding-left: 16px; border-left: 3px solid var(--amber); }
.promise h3 { font-size: 1.18rem; margin-bottom: 7px; }
.promise p { margin: 0; font-size: .92rem; color: var(--ink-2); }

/* ============================ panels and tables ========================== */

.panel { background: var(--surface); border: var(--hair); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--lift); }
.panel-pad { padding: 24px; }
.scroller { overflow-x: auto; }

.rows { width: 100%; border-collapse: collapse; }
.rows th, .rows td { padding: 12px 14px; text-align: left; vertical-align: top; }
.rows thead th {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400;
  background: var(--surface-2); border-bottom: var(--hair); white-space: nowrap;
}
.rows tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.rows tbody tr:hover td { background: #FAFCFD; }

.statcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 16px; margin-bottom: 28px; }
.stat {
  background: var(--surface); border: var(--hair); border-radius: var(--r);
  padding: 16px 18px; box-shadow: var(--lift); border-top: 3px solid var(--brand);
}
.stat-hot { border-top-color: var(--amber); }
.stat dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.stat dd { margin: 0; font-family: var(--display); font-size: 1.85rem; font-weight: 700;
  line-height: 1; }

.tag {
  font-family: var(--mono); font-size: .64rem; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 100px;
  border: 1px solid var(--line); color: var(--ink-2); background: var(--surface-2);
  white-space: nowrap; display: inline-block;
}
.tag-New { border-color: #F0D79A; color: var(--amber-dark); background: var(--amber-tint); }
.tag-Won { border-color: #A9D3BC; color: var(--good); background: #F1F8F4; }
.tag-Closed { color: var(--ink-3); }

.pillnav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.pillnav a {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none;
  padding: 8px 13px; border: var(--hair); border-radius: 100px;
  background: var(--surface); color: var(--ink-2);
}
.pillnav a:hover { border-color: var(--brand); color: var(--brand); }
.pillnav a.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }

.selectmini { font: inherit; font-size: .85rem; padding: 6px 9px; border: var(--hair);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }

details.editor { border-bottom: 1px solid var(--line-soft); }
details.editor:last-child { border-bottom: 0; }
details.editor > summary {
  cursor: pointer; padding: 14px 18px; font-size: .94rem;
  display: flex; justify-content: space-between; gap: 14px; align-items: baseline;
}
details.editor > summary:hover { background: var(--surface-2); }
details.editor[open] > summary { background: var(--brand-tint); }
.editor-body { padding: 8px 18px 24px; }
.notes-cell textarea { width: 100%; min-height: 56px; font: inherit; font-size: .86rem;
  padding: 8px 10px; border: var(--hair); border-radius: var(--r-sm); resize: vertical; }

/* ---- photo manager in the admin editor ---- */
.photo-manager {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px;
  align-items: start; padding: 18px; margin-bottom: 22px;
  background: var(--surface-2); border-radius: var(--r); border: var(--hair);
}
.photo-thumb {
  aspect-ratio: 4 / 3; background: var(--surface); border: var(--hair);
  border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-none {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
  padding: 12px; line-height: 1.7;
}
.photo-actions .field { margin-bottom: 12px; }

/* ============================ footer ===================================== */

.footer {
  margin-top: auto; background: var(--brand-deep); color: #A9C2D4;
  padding: 52px 0 22px;
}
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 36px;
  max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.footer h2 {
  font-size: .96rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 15px; font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a { color: #D9E6EF; text-decoration: none; font-size: .93rem; }
.footer a:hover { color: var(--amber); }
.footer p { margin: 0 0 11px; font-size: .93rem; }
.footer-name {
  font-family: var(--display); font-size: 1.4rem; font-weight: 700;
  color: #fff; letter-spacing: -.01em; margin-bottom: 10px;
}
.colophon {
  margin: 38px auto 0; padding: 18px 24px 0; max-width: var(--shell);
  border-top: 1px solid rgba(255,255,255,.13);
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: #7E9AB0;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* ============================ toasts ==================================== */

.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 70; display: grid; gap: 8px;
  max-width: min(340px, calc(100vw - 40px)); }
.toast {
  background: var(--ink); color: #fff; border-left: 4px solid var(--amber);
  border-radius: var(--r-sm); padding: 13px 16px; font-size: .91rem;
  box-shadow: 0 10px 30px -8px rgba(22,36,46,.55); animation: pop .2s ease-out;
}
.toast-bad { border-left-color: #E86A4C; }
@keyframes pop { from { opacity: 0; transform: translateY(10px); } }

/* ============================ responsive ================================= */

@media (max-width: 1040px) {
  .hero-inner { grid-template-columns: 1fr; gap: 36px; padding: 48px 24px 52px; }
  .detail { grid-template-columns: 1fr; gap: 28px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .ctaband-inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .catalogue { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .chiprow { display: flex; }
}

@media (max-width: 760px) {
  .masthead { position: static; }
  .masthead-inner { flex-wrap: wrap; gap: 12px; }
  .navtoggle {
    display: inline-block; margin-left: auto; font-family: var(--display);
    font-size: 1.02rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
    padding: 9px 15px; border: 1.5px solid var(--brand); border-radius: var(--r-sm);
    background: var(--surface); color: var(--brand); cursor: pointer;
  }
  .mainnav {
    order: 5; flex: 1 1 100%; flex-direction: column; align-items: stretch;
    gap: 2px; margin-left: 0; display: none; padding-top: 10px;
    border-top: var(--hair);
  }
  .mainnav.is-open { display: flex; }
  .mainnav a { padding: 12px 12px; font-size: 1.1rem; }
  .pair { grid-template-columns: 1fr; gap: 0; }
  .band { padding: 44px 0; }
  .topbar-hours { display: none; }
  .photo-manager { grid-template-columns: 1fr; }
  .photo-thumb { max-width: 240px; }
  .rows-stack thead { display: none; }
  .rows-stack tbody tr { display: block; padding: 16px 14px; }
  .rows-stack tbody tr + tr { border-top: var(--hair); }
  .rows-stack tbody tr + tr td { border-top: 0; }
  .rows-stack td { display: block; padding: 4px 0; }
  .rows-stack td[data-label]::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: .61rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 2px;
  }
}

@media (max-width: 560px) {
  .shell { padding: 0 16px; }
  .topbar-inner, .masthead-inner, .footer-inner, .colophon,
  .hero-inner, .ctaband-inner { padding-left: 16px; padding-right: 16px; }
  .brand-tag { display: none; }
  .brand-name { font-size: 1.2rem; }
  .brand-badge { width: 38px; height: 38px; font-size: 1.42rem; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .grid, .tiles { grid-template-columns: 1fr; }
  .formcard, .panel-pad { padding: 18px; }
  .h-hero { font-size: 2.2rem; }
}

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

@media print {
  .topbar, .mainnav, .navtoggle, .ctaband, .footer, .toasts, .askbox { display: none; }
  body { background: #fff; }
  .card, .panel, .specwrap, .detail-media { box-shadow: none; }
}

/* ======================= 2026 experience refresh ======================== */
:root {
  --navy-950: #061724;
  --navy-900: #071d2d;
  --navy-800: #0b2d44;
  --electric: #2e9ddd;
  --cyan: #68d4ef;
  --amber-bright: #ffb81c;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

.page-progress { position: fixed; inset: 0 auto auto 0; height: 3px; width: 0; z-index: 100;
  background: linear-gradient(90deg, var(--amber), #ffd873); box-shadow: 0 0 14px rgba(237,164,18,.7); }
.masthead { transition: box-shadow .3s ease, background .3s ease; }
.masthead.is-scrolled { box-shadow: 0 12px 32px rgba(6,23,36,.1); }
.brand-badge { overflow: hidden; background: var(--brand-deep); }
.brand-badge svg { width: 31px; height: 31px; fill: #fff; stroke: var(--amber); stroke-width: 2; }
.nav-cta { margin-left: 8px; gap: 10px; }
.nav-cta span { transition: transform .25s ease; }
.nav-cta:hover span { transform: translate(2px,-2px); }

.hero-home { position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(circle at 72% 45%, rgba(24,103,150,.35), transparent 32%),
              linear-gradient(125deg, #061724 0%, #0a2c43 60%, #082337 100%); }
.hero-home::after { content: "ARCH / COMBUSTION"; position: absolute; right: -1vw; bottom: -3.5vw;
  font: 700 clamp(5rem, 12vw, 12rem)/.8 var(--display); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.045); z-index: -1; white-space: nowrap; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .16;
  background-image: linear-gradient(rgba(117,184,220,.26) 1px,transparent 1px),linear-gradient(90deg,rgba(117,184,220,.26) 1px,transparent 1px);
  background-size: 54px 54px; mask-image: linear-gradient(90deg,#000,transparent 80%); }
.hero-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(90px); opacity: .15; z-index: -1; }
.hero-glow-one { background: var(--electric); right: 10%; top: -35%; }
.hero-glow-two { background: var(--amber); left: -12%; bottom: -55%; }
.hero-home .hero-inner { min-height: 690px; padding-top: 74px; padding-bottom: 74px; grid-template-columns: minmax(0,.92fr) minmax(480px,1.08fr); gap: 30px; }
.hero-copy { position: relative; z-index: 3; }
.hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; color: #a8cadc; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: #5de0a2; box-shadow: 0 0 0 0 rgba(93,224,162,.6); animation: pulse 2s infinite; }
.hero-home .h-hero { max-width: 720px; margin: 22px 0 22px; font-size: clamp(3.5rem,6vw,6.15rem); line-height: .89; letter-spacing: -.035em; }
.hero-home .h-hero em { display: block; margin-top: .12em; color: var(--amber-bright); font-style: normal; }
.hero-home .hero-lede { max-width: 620px; color: #c4d9e5; font-size: 1.09rem; line-height: 1.75; }
.btn-lg { min-height: 52px; padding: 14px 22px; }
.btn-glass { color: #fff; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.07); backdrop-filter: blur(8px); }
.btn-glass:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.58); }
.hero-trust { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 30px; color: #a8c2d1; font-size: .82rem; }
.hero-trust span { display: flex; align-items: center; gap: 7px; }
.hero-trust b { color: #64dfa4; }

.hero-machine { position: relative; min-height: 520px; align-self: center; transition: transform .25s ease-out; }
.machine-art { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 28px 32px rgba(0,0,0,.35)); animation: machineFloat 5s ease-in-out infinite; }
.machine-shadow { fill: rgba(0,0,0,.34); filter: blur(10px); }
.machine-body { transform-origin: center; }
.measure-lines { opacity: .55; }
.orbit { position: absolute; border: 1px solid rgba(104,212,239,.25); border-radius: 50%; animation: orbitSpin 14s linear infinite; }
.orbit-one { width: 420px; height: 420px; left: 85px; top: 48px; }
.orbit-two { width: 320px; height: 320px; left: 135px; top: 98px; animation-direction: reverse; animation-duration: 10s; }
.orbit i { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); }
.machine-label { position: absolute; z-index: 2; padding: 8px 12px; border: 1px solid rgba(122,190,225,.35); border-radius: 4px;
  background: rgba(6,23,36,.74); backdrop-filter: blur(8px); color: #d1e4ee; font: 500 .66rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.machine-label span { color: var(--amber); margin-right: 7px; }
.label-a { right: 3%; top: 29%; }.label-b { left: 2%; top: 58%; }.label-c { right: 3%; bottom: 24%; }
.availability-card { position: absolute; right: 1%; bottom: 3%; z-index: 3; display: flex; align-items: center; gap: 12px;
  min-width: 235px; padding: 14px 16px; border-radius: 8px; background: rgba(255,255,255,.95); box-shadow: 0 18px 40px rgba(0,0,0,.28); color: var(--ink-2); font-size: .73rem; }
.availability-card i { width: 10px; height: 10px; border-radius: 50%; background: #2eb67d; box-shadow: 0 0 0 5px rgba(46,182,125,.12); }
.availability-card span { display: grid; gap: 3px; }.availability-card b { color: var(--ink); font-size: .84rem; }

.stats-strip { position: relative; z-index: 4; background: #fff; border-bottom: var(--hair); box-shadow: 0 16px 42px -35px rgba(6,23,36,.5); }
.stats-strip-inner { display: grid; grid-template-columns: repeat(4,1fr); }
.stats-strip-inner > div { padding: 27px 28px; border-right: var(--hair); display: flex; align-items: center; gap: 14px; }
.stats-strip-inner > div:first-child { border-left: var(--hair); }
.stats-strip strong { font: 700 2rem/1 var(--display); color: var(--brand); white-space: nowrap; }
.stats-strip span { color: var(--ink-2); font-size: .78rem; line-height: 1.35; }

.section-intro { max-width: 57ch; color: var(--ink-2); line-height: 1.65; margin: 12px 0 0; }
.category-section { padding-top: 92px; padding-bottom: 96px; }
.tiles { counter-reset: tile; }
.tile { position: relative; min-height: 228px; overflow: hidden; padding-top: 28px; transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease; }
.tile::after { content:""; position:absolute; width:120px; height:120px; border:1px solid var(--brand-tint2); border-radius:50%; right:-52px; bottom:-52px; transition: transform .5s var(--ease-out), background .3s ease; }
.tile:hover { transform: translateY(-8px); box-shadow: 0 24px 55px -30px rgba(13,66,105,.5); border-color: var(--brand-tint2); }
.tile:hover::after { transform: scale(1.35); background: var(--brand-tint); }
.tile-index { display: block; margin-bottom: 28px; color: var(--brand); font: 500 .68rem/1 var(--mono); letter-spacing: .13em; }
.tile-count { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.tile-count b { font-size: 1.2rem; transition: transform .25s ease; }.tile:hover .tile-count b { transform: translateX(5px); }

.process-section { background: var(--navy-950); color: #fff; padding-top: 94px; padding-bottom: 100px; position: relative; overflow: hidden; }
.process-section::before { content:""; position:absolute; inset:0; background: radial-gradient(circle at 85% 20%,rgba(46,157,221,.18),transparent 30%); }
.process-section .shell { position: relative; }.process-section .h-sect { color:#fff; }.process-section .eyebrow { color: var(--amber); }
.process-head { align-items: end; }.process-head .section-intro { color:#9ab5c5; }
.process-grid { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:54px 0 0; list-style:none; counter-reset:process; }
.process-grid li { position:relative; padding: 12px 30px 8px 0; min-height:240px; border-top:1px solid rgba(255,255,255,.17); }
.process-grid li:not(:last-child)::after { content:""; position:absolute; right:0; top:-4px; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 5px rgba(237,164,18,.12); }
.process-grid li > span { position:absolute; right:22px; top:18px; color:rgba(255,255,255,.15); font:700 2.5rem/1 var(--display); }
.process-icon { display:grid; place-items:center; width:48px; height:48px; margin:25px 0 28px; border-radius:50%; border:1px solid rgba(104,212,239,.3); color:var(--cyan); font:500 1.2rem var(--mono); }
.process-grid h3 { color:#fff; font-size:1.15rem; margin-bottom:10px; }.process-grid p { color:#8faaba; font-size:.88rem; line-height:1.65; max-width:25ch; }

.featured-section { padding-top: 94px; padding-bottom: 102px; }
.featured-section .card { transition-duration: .45s; }.featured-section .card:hover { transform:translateY(-9px); }
.trust-section { padding-top: 94px; padding-bottom: 100px; }.trust-heading { margin-bottom:46px; }
.promises { gap: 0; border-top: var(--hair); border-bottom: var(--hair); }
.promise { position:relative; border-left:0; padding: 30px 28px 34px; }
.promise + .promise { border-left:var(--hair); }.promise-number { display:block; color:var(--brand); font:500 .67rem var(--mono); letter-spacing:.12em; margin-bottom:34px; }
.promise h3 { font-size:1.24rem; }.promise p { line-height:1.65; }

.copy-ref { width:100%; display:flex; align-items:center; gap:12px; margin: 0 0 18px; padding:11px 13px; border:var(--hair); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); cursor:pointer; text-align:left; }
.copy-ref span { color:var(--ink-3); font:500 .65rem var(--mono); letter-spacing:.09em; text-transform:uppercase; }.copy-ref b { font:500 .8rem var(--mono); }.copy-ref i { margin-left:auto; color:var(--brand); font:500 .67rem var(--mono); font-style:normal; text-transform:uppercase; }
.copy-ref:hover { border-color:var(--brand); background:var(--brand-tint); }
.searchbar-enhanced { position:relative; }.searchbar-enhanced .search-icon { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:var(--ink-3); z-index:1; font-size:1.15rem; }.searchbar-enhanced input { padding-left:42px; }

.whatsapp-float { position:fixed; right:22px; bottom:22px; z-index:60; display:flex; align-items:center; gap:9px; padding:11px 15px 11px 12px; border-radius:100px; color:#fff; background:#159b56; text-decoration:none; font-size:.82rem; font-weight:600; box-shadow:0 13px 34px rgba(6,52,31,.3); transition:transform .25s ease, box-shadow .25s ease; }
.whatsapp-float svg { width:22px; height:22px; fill:#fff; }.whatsapp-float:hover { transform:translateY(-3px); box-shadow:0 17px 38px rgba(6,52,31,.4); }

[data-reveal] { opacity:0; transform:translateY(28px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out); }
[data-reveal].is-visible { opacity:1; transform:none; }
.tiles [data-reveal]:nth-child(2),.process-grid [data-reveal]:nth-child(2),.promises [data-reveal]:nth-child(2) { transition-delay:.08s; }
.tiles [data-reveal]:nth-child(3),.process-grid [data-reveal]:nth-child(3),.promises [data-reveal]:nth-child(3) { transition-delay:.16s; }
.tiles [data-reveal]:nth-child(4),.process-grid [data-reveal]:nth-child(4),.promises [data-reveal]:nth-child(4) { transition-delay:.24s; }

@keyframes pulse { 70% { box-shadow:0 0 0 8px rgba(93,224,162,0); } 100% { box-shadow:0 0 0 0 rgba(93,224,162,0); } }
@keyframes machineFloat { 0%,100% { transform:translateY(0) rotate(-.25deg); } 50% { transform:translateY(-10px) rotate(.25deg); } }
@keyframes orbitSpin { to { transform:rotate(360deg); } }

@media (max-width:1040px) {
  .hero-home .hero-inner { grid-template-columns:1fr; padding-top:70px; }.hero-home .h-hero { font-size:clamp(3.7rem,9vw,6rem); }
  .hero-machine { min-height:480px; max-width:680px; width:100%; margin:0 auto; }.stats-strip-inner { grid-template-columns:1fr 1fr; }.stats-strip-inner > div:nth-child(3) { border-left:var(--hair); border-top:var(--hair); }.stats-strip-inner > div:nth-child(4) { border-top:var(--hair); }
  .process-grid { grid-template-columns:1fr 1fr; gap:36px 0; }.process-grid li:nth-child(2)::after { display:none; }
}
@media (max-width:760px) {
  .nav-cta { margin-left:0; }.navtoggle { display:flex; align-items:center; gap:9px; }.navtoggle-lines,.navtoggle-lines::before,.navtoggle-lines::after { display:block; width:17px; height:2px; background:currentColor; content:""; transition:transform .25s ease; }.navtoggle-lines { position:relative; }.navtoggle-lines::before { position:absolute; top:-5px; }.navtoggle-lines::after { position:absolute; top:5px; }.navtoggle[aria-expanded=true] .navtoggle-lines { background:transparent; }.navtoggle[aria-expanded=true] .navtoggle-lines::before { top:0; transform:rotate(45deg); }.navtoggle[aria-expanded=true] .navtoggle-lines::after { top:0; transform:rotate(-45deg); }
  .hero-home .hero-inner { padding-top:56px; }.hero-home .h-hero { font-size:clamp(3.1rem,15vw,4.8rem); }.hero-machine { min-height:410px; margin-top:-20px; }.machine-label { display:none; }.orbit-one { width:340px; height:340px; left:calc(50% - 170px); top:40px; }.orbit-two { width:260px; height:260px; left:calc(50% - 130px); top:80px; }.availability-card { right:5%; bottom:0; }
  .process-grid { grid-template-columns:1fr; gap:30px; }.process-grid li { min-height:0; padding-bottom:18px; }.process-grid li::after { display:none; }.process-grid p { max-width:45ch; }.promises { grid-template-columns:1fr; }.promise + .promise { border-left:0; border-top:var(--hair); }
}
@media (max-width:560px) {
  .hero-home .hero-inner { min-height:auto; }.hero-home .hero-lede { font-size:1rem; }.hero-copy .btn-row { display:grid; }.hero-copy .btn { width:100%; }.hero-trust { display:grid; gap:10px; }.hero-machine { min-height:330px; }.availability-card { min-width:205px; padding:11px 13px; }.stats-strip-inner > div { padding:21px 16px; display:grid; gap:8px; }.stats-strip strong { font-size:1.7rem; }.stats-strip span { font-size:.7rem; }.category-section,.featured-section,.trust-section,.process-section { padding-top:66px; padding-bottom:70px; }.process-grid { margin-top:38px; }.whatsapp-float span { display:none; }.whatsapp-float { padding:13px; }
}
@media (prefers-reduced-motion:reduce) { [data-reveal] { opacity:1; transform:none; }.machine-art,.orbit,.pulse-dot { animation:none !important; } }

/* ===================== catalogue-photo hero refresh ===================== */
.hero-collage-home .hero-inner { grid-template-columns:minmax(0,.98fr) minmax(500px,1.02fr); min-height:720px; }
.hero-collage-home .hero-copy { max-width:680px; }

.hero-brands { display:flex; flex-wrap:wrap; gap:8px 20px; padding:0; margin:0 0 24px; list-style:none;
  color:#bdd2df; font:500 .68rem/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.hero-brands li { display:flex; align-items:center; gap:9px; white-space:nowrap; }
.hero-brands li::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--amber); box-shadow:0 0 8px rgba(237,164,18,.65); }

.hero-home .h-hero-typewriter { margin:0 0 23px; font-size:clamp(3.4rem,5.35vw,5.7rem); line-height:.88; }
.hero-heading-top { display:block; color:#fff; }
.hero-home .h-hero .typewriter-slot { display:inline-grid; grid-template-areas:"word"; width:max-content; min-block-size:1em;
  margin-top:.13em; color:var(--amber-bright); font-style:normal; vertical-align:top; }
.typewriter-slot > span { grid-area:word; }
.typewriter-reserve { visibility:hidden; pointer-events:none; }
.typewriter-word { white-space:nowrap; }
.typewriter-word::after { content:""; display:inline-block; width:.055em; height:.7em; margin-left:.075em;
  background:currentColor; box-shadow:0 0 10px rgba(255,184,28,.42); animation:caretBlink .82s steps(1,end) infinite; }
.hero-quote { max-width:620px; margin:0 0 28px; padding:0 0 0 18px; border-left:2px solid rgba(104,212,239,.5);
  color:#c8dce7; font-size:1.02rem; line-height:1.72; }

.hero-collage { position:relative; min-height:560px; align-self:center; perspective:1200px; transform-style:preserve-3d; transition:transform .25s ease-out; }
.collage-ring { position:absolute; width:430px; height:430px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(104,212,239,.19); box-shadow:0 0 0 62px rgba(104,212,239,.025),0 0 0 124px rgba(104,212,239,.018); }
.collage-card { --card-rotate:0deg; position:absolute; z-index:2; width:210px; margin:0; overflow:hidden; border-radius:10px;
  background:#fff; border:1px solid rgba(255,255,255,.5); box-shadow:0 22px 52px rgba(0,0,0,.34);
  transform:rotate(var(--card-rotate)); animation:collageFloat 7s ease-in-out infinite; animation-delay:calc(var(--collage-index) * -1.15s); }
.collage-media { aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#fff,#edf3f6); }
.collage-media img,.collage-media svg { display:block; width:100%; height:100%; object-fit:contain; }
.collage-card figcaption { min-height:44px; display:flex; align-items:center; gap:8px; padding:8px 10px; color:var(--ink);
  font:600 .64rem/1.3 var(--body); }
.collage-card figcaption span { color:var(--brand); font:500 .59rem/1 var(--mono); }
.collage-card-1 { left:4%; top:3%; --card-rotate:-4deg; width:220px; z-index:3; }
.collage-card-2 { right:3%; top:9%; --card-rotate:4deg; width:190px; }
.collage-card-3 { left:27%; top:32%; --card-rotate:1.5deg; width:228px; z-index:5; }
.collage-card-4 { right:0; top:47%; --card-rotate:-3deg; width:195px; z-index:4; }
.collage-card-5 { left:2%; bottom:2%; --card-rotate:3.5deg; width:185px; }
.collage-card-6 { right:22%; bottom:-1%; --card-rotate:-2deg; width:180px; z-index:6; }
.collage-note { position:absolute; right:0; bottom:2%; z-index:8; display:flex; align-items:center; gap:11px; min-width:225px;
  padding:13px 15px; border-radius:8px; background:rgba(7,29,45,.9); border:1px solid rgba(104,212,239,.28);
  box-shadow:0 18px 38px rgba(0,0,0,.3); color:#a9c3d2; font-size:.68rem; backdrop-filter:blur(8px); }
.collage-note i { width:9px; height:9px; border-radius:50%; background:#54daa0; box-shadow:0 0 0 5px rgba(84,218,160,.12); }
.collage-note span { display:grid; gap:3px; }.collage-note b { color:#fff; font-size:.78rem; }

.stats-strip strong { min-width:max-content; }.stats-strip-inner > div:last-child strong { font-size:1.45rem; }

.company-story { position:relative; overflow:hidden; background:var(--navy-950); color:#fff; padding-top:100px; padding-bottom:100px; }
.company-story::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 14% 28%,rgba(46,157,221,.16),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:auto,60px 60px; }
.company-story-grid { position:relative; display:grid; grid-template-columns:minmax(0,.82fr) minmax(540px,1.18fr); gap:76px; align-items:start; }
.story-copy { position:sticky; top:120px; }.story-copy .eyebrow { color:var(--amber); }.story-copy .h-sect { color:#fff; font-size:clamp(2.4rem,3.7vw,4rem); line-height:.98; }
.story-copy > p:not(.eyebrow) { margin:25px 0 28px; color:#9eb7c6; line-height:1.75; }
.text-link { display:inline-flex; align-items:center; gap:10px; color:#fff; text-decoration:none; font-weight:600; border-bottom:1px solid rgba(255,255,255,.3); padding-bottom:5px; }
.text-link span { color:var(--amber); transition:transform .25s ease; }.text-link:hover span { transform:translateX(5px); }
.story-pillars { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid rgba(255,255,255,.14); border-left:1px solid rgba(255,255,255,.14); }
.story-pillars article { min-height:245px; padding:30px; border-right:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); }
.story-pillars article > span { color:var(--amber); font:500 .65rem var(--mono); letter-spacing:.12em; }
.story-pillars h3 { margin:48px 0 10px; color:#fff; font-size:1.18rem; }.story-pillars p { margin:0; color:#90aaba; font-size:.88rem; line-height:1.65; }

.pagehead-about .h-page { max-width:830px; }.pagehead-about .lede { margin-top:16px; max-width:750px; }
.about-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:70px; align-items:start; }
.about-story { max-width:760px; }.about-story h2 { margin:36px 0 11px; }.about-story p { line-height:1.78; }
.about-dropcap { font-size:1.16rem; color:var(--ink); }.about-dropcap::first-letter { float:left; margin:8px 9px 0 0; color:var(--brand); font:700 4rem/.7 var(--display); }
.about-facts { position:sticky; top:110px; overflow:hidden; }
.about-facts-head { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; color:#fff; background:var(--brand); }
.about-facts-head span { font:600 1.05rem var(--display); text-transform:uppercase; letter-spacing:.05em; }.about-facts-head strong { color:#b9d8eb; font:500 .64rem var(--mono); }
.about-facts-actions { display:grid; gap:10px; padding:18px; border-top:var(--hair); }
.values-section { padding-top:88px; padding-bottom:96px; }.values-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:44px 0 0; padding:0; list-style:none; border-top:var(--hair); border-left:var(--hair); }
.values-grid li { min-height:145px; display:flex; flex-direction:column; justify-content:space-between; gap:25px; padding:22px; border-right:var(--hair); border-bottom:var(--hair); background:#fff; transition:background .25s ease,color .25s ease; }
.values-grid li span { color:var(--brand); font:500 .64rem var(--mono); letter-spacing:.1em; }.values-grid li strong { font:600 1rem/1.35 var(--display); text-transform:uppercase; letter-spacing:.025em; }
.values-grid li:hover { color:#fff; background:var(--brand); }.values-grid li:hover span { color:var(--amber); }

@keyframes caretBlink { 0%,48% { opacity:1; } 49%,100% { opacity:0; } }
@keyframes collageFloat { 0%,100% { transform:translate3d(0,0,0) rotate(var(--card-rotate)); } 50% { transform:translate3d(0,-10px,12px) rotate(var(--card-rotate)); } }

@media (max-width:1100px) {
  .hero-collage-home .hero-inner { grid-template-columns:1fr; }.hero-collage-home .hero-copy { max-width:760px; }
  .hero-collage { width:min(690px,100%); min-height:560px; margin:-18px auto 0; }
  .company-story-grid { grid-template-columns:1fr; gap:48px; }.story-copy { position:static; max-width:700px; }.values-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px) {
  .hero-brands { gap:9px 16px; }.hero-home .h-hero-typewriter { font-size:clamp(3rem,13.5vw,4.7rem); }
  .hero-collage { min-height:470px; }.collage-card { width:160px; }.collage-card-1 { width:175px; }.collage-card-2 { width:150px; }.collage-card-3 { width:180px; }.collage-card-4 { width:150px; }.collage-card-5 { width:145px; }.collage-card-6 { width:140px; }
  .collage-card figcaption { min-height:36px; font-size:.54rem; padding:6px 8px; }.collage-note { right:2%; bottom:0; min-width:200px; }
  .about-layout { grid-template-columns:1fr; gap:44px; }.about-facts { position:static; }.values-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .hero-brands { margin-bottom:20px; }.hero-home .h-hero-typewriter { font-size:clamp(2.7rem,13vw,4rem); }.hero-quote { font-size:.92rem; }
  .hero-collage { min-height:390px; margin-top:5px; }.collage-ring { width:290px; height:290px; }.collage-card-1 { left:0; top:2%; width:145px; }.collage-card-2 { right:0; top:7%; width:125px; }.collage-card-3 { left:25%; top:30%; width:150px; }.collage-card-4 { right:0; top:48%; width:120px; }.collage-card-5 { left:0; bottom:0; width:120px; }.collage-card-6 { right:26%; bottom:-2%; width:112px; }.collage-note { display:none; }
  .story-pillars { grid-template-columns:1fr; }.story-pillars article { min-height:190px; }.story-pillars h3 { margin-top:32px; }.values-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .collage-card,.typewriter-word::after { animation:none !important; }
  .typewriter-word::after { opacity:0; }
}

/* ===================== monochrome homepage direction ==================== */
.page-index {
  --home-black:#0a0a0a;
  --home-ink:#151515;
  --home-grey:#5f5f5f;
  --home-line:#dededb;
  --home-paper:#ffffff;
  --home-soft:#f4f4f1;
  --home-red:#c9252d;
  background:var(--home-paper);
}
.page-index .page-progress { background:var(--home-red); box-shadow:0 0 14px rgba(201,37,45,.35); }
.page-index .topbar { background:var(--home-black); color:#cfcfcb; }
.page-index .topbar a { color:#fff; }.page-index .topbar a:hover { color:#ff6b70; }
.page-index .masthead { background:#fff; border-bottom:1px solid #e4e4e1; }
.page-index .masthead.is-scrolled { box-shadow:0 14px 34px rgba(0,0,0,.09); }
.page-index .brand-badge { background:var(--home-black); box-shadow:0 8px 18px rgba(0,0,0,.16); }
.page-index .brand-badge svg { stroke:var(--home-red); }
.page-index .brand-name { color:var(--home-black); }.page-index .brand-tag { color:#777; }
.page-index .mainnav a { color:#3c3c3c; }.page-index .mainnav a:hover { color:#000; background:#f0f0ee; }
.page-index .mainnav a.is-on { color:#000; background:#ededeb; }
.page-index .nav-cta { color:#fff; background:var(--home-black); border-color:var(--home-black); box-shadow:none; }
.page-index .nav-cta:hover { color:#fff; background:var(--home-red); border-color:var(--home-red); }

.page-index .hero-home { color:var(--home-ink);
  background:radial-gradient(circle at 76% 35%,rgba(201,37,45,.055),transparent 31%),linear-gradient(135deg,#fff 0%,#fff 58%,#f5f5f2 100%); }
.page-index .hero-home::after { color:transparent; -webkit-text-stroke:1px rgba(0,0,0,.035); }
.page-index .hero-grid { opacity:.72; background-image:linear-gradient(rgba(0,0,0,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.035) 1px,transparent 1px); mask-image:linear-gradient(90deg,#000,transparent 88%); }
.page-index .hero-glow-one { background:#bdbdb8; opacity:.12; }.page-index .hero-glow-two { background:var(--home-red); opacity:.055; }
.page-index .hero-brands { color:#4e4e4e; }.page-index .hero-brands li::before { background:var(--home-red); box-shadow:none; }
.page-index .hero-heading-top { color:var(--home-black); }
.page-index .hero-home .h-hero .typewriter-slot { color:var(--home-red); }
.page-index .typewriter-word::after { box-shadow:none; }
.page-index .hero-quote { color:#424242; border-left-color:var(--home-black); }
.page-index .hero-copy .btn-cta { color:#fff; background:var(--home-black); border-color:var(--home-black); box-shadow:0 10px 24px rgba(0,0,0,.15); }
.page-index .hero-copy .btn-cta:hover { color:#fff; background:var(--home-red); border-color:var(--home-red); }
.page-index .hero-copy .btn-glass { color:var(--home-black); background:rgba(255,255,255,.72); border-color:var(--home-black); backdrop-filter:blur(8px); }
.page-index .hero-copy .btn-glass:hover { color:#fff; background:var(--home-black); border-color:var(--home-black); }
.page-index .hero-trust { color:#555; }.page-index .hero-trust b { color:var(--home-red); }

.page-index .collage-ring { border-color:rgba(0,0,0,.11); box-shadow:0 0 0 62px rgba(0,0,0,.018),0 0 0 124px rgba(0,0,0,.012); }
.page-index .collage-card { border-color:#dededb; box-shadow:0 20px 48px rgba(0,0,0,.18); }
.page-index .collage-media { background:linear-gradient(145deg,#fff,#f2f2ef); }
.page-index .collage-card figcaption { color:var(--home-black); }.page-index .collage-card figcaption span { color:var(--home-red); }
.page-index .collage-note { color:#bdbdb8; background:rgba(10,10,10,.92); border-color:#222; }
.page-index .collage-note i { background:var(--home-red); box-shadow:0 0 0 5px rgba(201,37,45,.14); }

.page-index .stats-strip { color:#fff; background:var(--home-black); border:0; box-shadow:none; }
.page-index .stats-strip-inner > div { border-color:#303030; }.page-index .stats-strip-inner > div:first-child { border-left-color:#303030; }
.page-index .stats-strip strong { color:#fff; }.page-index .stats-strip-inner > div:nth-child(2) strong { color:#ff5960; }
.page-index .stats-strip span { color:#aaa; }

.page-index .category-section { background:#fff; }.page-index .category-section .eyebrow,.page-index .featured-section .eyebrow { color:var(--home-red); }
.page-index .category-section .h-sect,.page-index .featured-section .h-sect { color:var(--home-black); }
.page-index .category-section .btn-quiet { color:var(--home-black); border-color:#c9c9c5; background:#fff; }
.page-index .category-section .btn-quiet:hover { color:#fff; border-color:var(--home-black); background:var(--home-black); }
.page-index .tile { color:var(--home-black); border-color:var(--home-line); background:#fff; box-shadow:none; }
.page-index .tile:hover { border-color:#aaa; box-shadow:0 24px 50px -34px rgba(0,0,0,.42); }
.page-index .tile-index,.page-index .tile-count { color:var(--home-red); }
.page-index .tile::after { border-color:#e4e4e1; }.page-index .tile:hover::after { background:#f1f1ee; }

.page-index .company-story { color:#fff; background:var(--home-black); }
.page-index .company-story::before { background:radial-gradient(circle at 14% 28%,rgba(201,37,45,.12),transparent 30%),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:auto,60px 60px; }
.page-index .story-copy .eyebrow,.page-index .story-pillars article > span,.page-index .text-link span { color:#ff5960; }
.page-index .story-pillars { border-color:#303030; }.page-index .story-pillars article { border-color:#303030; }

.page-index .featured-section { background:var(--home-soft); }
.page-index .featured-section .card { border-color:#d7d7d3; box-shadow:0 12px 30px -24px rgba(0,0,0,.4); }
.page-index .featured-section .card-tag { color:#fff; background:rgba(10,10,10,.9); }
.page-index .featured-section .card-model { color:var(--home-black); background:#ecece9; border-color:#d7d7d3; }
.page-index .featured-section .onreq { color:#8e1b21; border-color:#e1aeb1; background:#fff3f3; }
.page-index .featured-section .btn-steel { color:#fff; background:var(--home-black); border-color:var(--home-black); }
.page-index .featured-section .btn-steel:hover { background:var(--home-red); border-color:var(--home-red); }

.page-index .ctaband { background:var(--home-black); border-top:1px solid #262626; }
.page-index .ctaband p { color:#aaa; }.page-index .ctaband .btn-cta { color:#fff; background:var(--home-red); border-color:var(--home-red); }
.page-index .ctaband .btn-cta:hover { background:#a91f25; border-color:#a91f25; }
.page-index .ctaband .btn-ondark { color:#fff; border-color:#777; }.page-index .ctaband .btn-ondark:hover { background:#fff; color:#000; border-color:#fff; }
.page-index .footer { background:#050505; color:#999; }.page-index .footer h2 { color:#ff5960; }
.page-index .footer a { color:#d3d3cf; }.page-index .footer a:hover { color:#fff; }.page-index .colophon { color:#777; border-top-color:#242424; }

@media (max-width:760px) {
  .page-index .mainnav { background:#fff; }
  .page-index .navtoggle { color:#000; border-color:#000; }
  .page-index .stats-strip-inner > div:nth-child(3),.page-index .stats-strip-inner > div:nth-child(4) { border-top-color:#303030; }
}