/* Bodaq USA: a single dark theme. The header is white for the Bodaq USA logo. */
:root {
  --bg: #14110e; --bg2: #211c17; --bg3: #33271d; --bg4: #0f0c09;
  --text: #f7efe2; --muted: #c9bca6; --dim: #a99b83; --gold: #c7a365; --gold2: #d5b36d;
  --line: rgba(247, 239, 226, .18); --line2: rgba(247, 239, 226, .12);
  --err: #f0a08a;
  --paper: #fff; --ink: #1d1813; --ink-line: rgba(20, 17, 14, .16); --gold-ink: #85622a;
  /* One header height for the nav, the sticky products toolbar and every scroll margin under it:
     the logo plus 12px padding top and bottom and the 1px rule, never under 74px (66px on phones). */
  --logo-h: clamp(46px, 3.9vw, 56px); --nav-h: max(74px, calc(var(--logo-h) + 25px));
  --serif: Georgia, "Times New Roman", serif; --sans: Arial, Helvetica, sans-serif;
  --pad-y: clamp(54px, 8vw, 108px); --pad-x: clamp(16px, 5vw, 72px);
  color-scheme: dark;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
body { margin: 0; font-family: var(--sans); font-size: 16px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
h1, h2, h3 { margin: 0; letter-spacing: 0; text-wrap: balance }
h1, h2 { font-family: var(--serif); font-weight: 500 }
p { margin: 0; color: var(--muted); line-height: 1.65 }
p + p { margin-top: 14px }
ul { margin: 0; padding: 0; list-style: none }
.eyebrow { margin: 0 0 12px; color: var(--gold); font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
.sec { padding: var(--pad-y) var(--pad-x); position: relative; background-color: var(--bg); background-image: radial-gradient(ellipse at 82% 8%, rgba(199, 163, 101, .15), transparent 42%) }
main > .sec:nth-of-type(even) { background-image: radial-gradient(ellipse at 14% 92%, rgba(199, 163, 101, .13), transparent 44%) }
.sec.alt { background-color: var(--bg2); border-top: 1px solid var(--line2) }
.sec.samples { background-image: radial-gradient(ellipse at 88% 50%, rgba(199, 163, 101, .22), transparent 45%), radial-gradient(ellipse at 6% 50%, rgba(199, 163, 101, .08), transparent 40%) }
.sec.intro { background-image: radial-gradient(circle at 75% 18%, rgba(199, 163, 101, .16), transparent 38%), radial-gradient(ellipse at 10% 90%, rgba(199, 163, 101, .08), transparent 40%); background-color: #17130f }
.h2 { font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .95 }
.h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 4vw, 3.6rem) }
.lead { max-width: 720px; margin-top: 18px; font-size: 1.05rem }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 14px; border-radius: 4px; background: var(--gold); color: var(--bg); font-weight: 900 }
.skip:focus { top: 12px }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important } html { scroll-behavior: auto } }

/* buttons */
.button { display: inline-block; margin-top: 20px; padding: 13px 17px; border-radius: 4px; color: var(--bg); background: var(--gold); border: 0; font: inherit; font-weight: 900; cursor: pointer; transition: background .2s ease, transform .2s ease; text-align: center }
.button:hover { background: var(--gold2); transform: translateY(-1px) }
.button.ghost { color: var(--text); background: transparent; border: 1px solid rgba(247, 239, 226, .32) }
.button.ghost:hover { background: rgba(247, 239, 226, .06) }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none }
.button.sm { margin-top: 0; padding: 10px 14px; font-size: .88rem }
.actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: var(--nav-h); padding: 12px var(--pad-x); color: var(--ink); position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--ink-line); color-scheme: light }
.nav :focus-visible { outline-color: var(--ink) }
.brand { display: block; flex: none; line-height: 0 }
.brand img { height: var(--logo-h); width: auto }
.mainnav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; font-size: .9rem; margin-left: auto }
.mainnav a { padding: 6px 0; transition: color .2s }
.mainnav a:hover, .mainnav a[aria-current] { color: var(--gold-ink) }
.mainnav a[aria-current] { text-decoration: underline 2px var(--gold); text-underline-offset: 7px }
.navside { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: rgba(247, 239, 226, .86); background: rgba(20, 17, 14, .38); border: 1px solid rgba(247, 239, 226, .2); white-space: nowrap; cursor: pointer; font-family: inherit }
.pill:hover { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }
.pill.gold { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }
.pill.gold:hover { background: var(--text) }
.nav .pill { color: var(--ink); background: var(--paper); border-color: rgba(20, 17, 14, .24) }
.nav .pill:hover, .nav .pill.gold { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }
.nav .pill.gold:hover { color: var(--paper); background: var(--ink); border-color: var(--ink) }
.pill b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--gold); color: var(--bg); font-size: .7rem }
.navmob { display: none; position: relative }
.navmob > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--ink-line); border-radius: 6px; display: flex; align-items: center; justify-content: center; background: var(--paper) }
.navmob > summary::-webkit-details-marker { display: none }
.navmob .burger { display: flex; flex-direction: column; gap: 4px; width: 18px }
.navmob .burger i { display: block; height: 2px; background: var(--ink); border-radius: 1px }
.navmobpanel { color-scheme: dark; color: var(--text); position: absolute; right: 0; top: 52px; width: min(82vw, 300px); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 26px 60px rgba(0, 0, 0, .5); padding: 10px; display: flex; flex-direction: column; z-index: 70 }
.navmobpanel a { padding: 12px 14px; border-radius: 5px; font-size: .95rem; font-weight: 700 }
.navmobpanel a:hover, .navmobpanel a[aria-current] { background: rgba(247, 239, 226, .06); color: var(--gold) }
.navmobpanel .button { margin: 8px 0 0; text-align: center; color: var(--bg) }
.navmobpanel .button:hover { color: var(--bg) }
/* The header stays on one row at every width: tighter gaps under 1200px, the phone pill steps out
   first (under 1130px, or under 1300px while the quote list pill shows), and the menu button takes
   over at 1100px. The open menu scrolls when it is taller than the screen. */
@media (max-width: 1300px) { .navside:has(> [data-quote-pill]:not([hidden])) > .pill:first-child { display: none } }
@media (max-width: 1200px) { .nav { gap: 18px } .mainnav { gap: 14px } }
@media (max-width: 1130px) { .navside .pill:first-child { display: none } }
@media (max-width: 1100px) { :root { --nav-h: max(66px, calc(var(--logo-h) + 25px)) } .mainnav, .navside { display: none } .navmob { display: block } }
.navmobpanel { max-height: calc(100vh - var(--nav-h) - 8px); max-height: calc(100dvh - var(--nav-h) - 8px); overflow-y: auto; overscroll-behavior: contain }

/* hero */
/* The hero fills the first screen under the sticky header. The copy stays bottom-left with a
   set gap under the header, and the headline also scales with the window height, so short
   windows (a 1440 x 900 screen in a browser) keep that gap and the buttons. */
.hero { position: relative; display: grid; align-content: end; min-height: min(880px, calc(100vh - var(--nav-h))); padding: clamp(96px, 16vh, 168px) clamp(22px, 6vw, 86px) clamp(44px, 6vw, 88px); overflow: hidden; background: var(--bg) }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .48 }
.hero-copy { position: relative; max-width: 900px; padding-right: var(--pad-x) }
.hero h1 { font-size: clamp(3.4rem, min(8vw, 11.5vh), 8rem); line-height: .9 }
.hero p:not(.eyebrow) { max-width: 620px; margin-top: 16px }
@media (max-width: 940px) {
  .hero { min-height: 640px; padding: 120px var(--pad-x) 44px }
  .hero-copy { padding-right: 0; max-width: none }
  .hero h1 { font-size: clamp(2.6rem, 11vw, 4.2rem) }
}
.phero { position: relative; min-height: 460px; display: grid; align-content: end; padding: calc(var(--pad-y) + 20px) var(--pad-x) var(--pad-y); overflow: hidden; isolation: isolate }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.phero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgba(20, 17, 14, var(--shade, .42)), rgba(20, 17, 14, .94)) }
.phero h1 { max-width: 980px; font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .95 }
.phero p:not(.eyebrow) { max-width: 760px; margin-top: 18px }
@media (max-width: 940px) { .phero { min-height: 360px } }

/* intro */
.intro { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; border-top: 1px solid var(--line2) }
.intro h2 { font-size: clamp(2.8rem, 6.2vw, 6.2rem); line-height: 1.03; max-width: 1080px }
.intro p:not(.eyebrow) { margin-top: 18px; max-width: 760px }
.intro .eyerow { max-width: 760px }
.stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(247, 239, 226, .16); max-width: 760px }
.stats > span { display: grid; gap: 4px; padding: 18px; color: var(--muted); background: var(--bg2); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em }
.stats strong { color: var(--gold); font-family: var(--serif); font-size: 1.45rem; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums }
/* Count-up figures (site.js): the width is held while the number runs. */
.count { display: inline-block; font-variant-numeric: tabular-nums; white-space: nowrap }
.construct-img { position: relative; margin: 8px 0 0; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 32px 90px rgba(0, 0, 0, .34); background: #0e0c09 }
.construct-img img { width: 100%; height: auto }
.construct-img figcaption { padding: 12px 16px; color: var(--muted); font-size: .86rem; border-top: 1px solid var(--line2) }
/* The advantages list is baked into the wide render; on phones the crop shows only the layers and the list is text. */
.construct-img .construct-adv { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
@media (max-width: 600px) {
  .construct-img .construct-adv { position: static; width: auto; height: auto; padding: 18px 16px 20px; overflow: visible; clip: auto; white-space: normal; border-top: 1px solid var(--line2) }
  .construct-adv .construct-layers { margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line2); color: var(--muted); font-size: .9rem; line-height: 1.5 }
  .construct-adv .construct-layers b { display: block; margin-bottom: 4px; color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase }
  .construct-adv h3 { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; line-height: 1.15; color: var(--text) }
  .construct-adv ul { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none }
  .construct-adv li { position: relative; padding-left: 26px; color: var(--muted); line-height: 1.45; font-size: .95rem }
  .construct-adv li::before { content: ""; position: absolute; left: 2px; top: .32em; width: 11px; height: 6px; border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); transform: rotate(-45deg) }
}
.panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 8px }
.panel article { min-height: 150px; padding: 22px; background: rgba(33, 28, 23, .82); border: 1px solid rgba(247, 239, 226, .16); border-radius: 8px }
.panel strong, .panel article > span { display: block }
.panel strong { color: var(--text); font-size: 1.15rem }
.panel article > span { margin-top: 8px; color: var(--muted); line-height: 1.55 }
@media (max-width: 940px) { .panel { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px) {
  .intro { gap: 22px }
  .intro h2 { font-size: clamp(2rem, 10vw, 2.7rem); line-height: 1.08 }
  .stats { grid-template-columns: 1fr; grid-auto-flow: row; margin-top: 22px }
  .panel { grid-template-columns: 1fr; margin-top: 0 }
  .panel article { min-height: auto; padding: 18px }
}

.shead { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 28px; align-items: end; margin-bottom: 28px }
.shead h2 { font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .95 }
.shead p:not(.eyebrow) { max-width: 560px }
@media (max-width: 940px) { .shead { grid-template-columns: 1fr } }

/* family cards */
.lines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px }
.line { display: grid; grid-template-rows: auto 1fr; min-height: 520px; color: var(--text); background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .2s ease, transform .2s ease }
.line:hover { transform: translateY(-3px); border-color: rgba(199, 163, 101, .72) }
.line .cov { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.85) contrast(1.05) }
.line > div { display: flex; flex-direction: column; padding: 20px 22px 22px }
.line > div > span { color: var(--gold); font-size: .78rem; font-weight: 900; letter-spacing: .12em }
.line strong { margin-top: 8px; font-family: var(--serif); font-size: 2rem; font-weight: 500 }
.line p { margin-top: 8px }
.line em { margin-top: auto; padding-top: 14px; color: var(--muted); font-style: normal; font-size: .88rem; line-height: 1.5 }
@media (max-width: 1100px) { .lines { grid-template-columns: repeat(2, 1fr) } .line { min-height: 0 } }
@media (max-width: 620px) { .lines { grid-template-columns: 1fr } .line { grid-template-columns: 120px 1fr; grid-template-rows: none } .line .cov { height: 100%; aspect-ratio: auto } .line > div { padding: 14px 16px } .line strong { font-size: 1.5rem; margin-top: 4px } .line p { font-size: .9rem; line-height: 1.5 } }

/* cards */
.cards { display: grid; gap: 12px }
.cards.four { grid-template-columns: repeat(4, 1fr) }
.cards.five { grid-template-columns: repeat(5, 1fr) }
.cards.three { grid-template-columns: repeat(3, 1fr) }
.cards.two { grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: stretch }
.cards > article, .cards > a { display: block; min-height: 150px; padding: 24px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); transition: border-color .2s ease, transform .2s ease }
.cards > a:hover { transform: translateY(-3px); border-color: rgba(199, 163, 101, .72) }
.cards strong { display: block; font-size: 1.25rem }
.cards > * > span { display: block; margin-top: 8px; color: var(--muted); line-height: 1.55 }
.cards em { display: inline-block; margin-top: 14px; color: var(--gold); font-style: normal; font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase }
.cards .reflinks { margin-top: 14px; display: grid; gap: 6px; font-size: .88rem }
.cards .reflinks a { color: var(--gold); font-weight: 700 }
.cards .reflinks a:hover { color: var(--text) }
.cards > .here { border-style: dashed; opacity: .78 }
@media (max-width: 1100px) { .cards.five { grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 940px) { .cards.three, .cards.two { grid-template-columns: 1fr } .cards.four, .cards.five { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px) { .cards.four, .cards.five { grid-template-columns: 1fr } }

.samples { display: flex; align-items: center; justify-content: space-between; gap: 24px; background-color: var(--bg3) }
.samples h2 { max-width: 840px; font-size: clamp(2.2rem, 5vw, 5.2rem); line-height: .95 }
.samples .button { margin-top: 0; flex: none }
@media (max-width: 940px) { .samples { align-items: flex-start; flex-direction: column } }

/* products: search, filters, listing */
.search { width: min(760px, 100%); margin-top: 30px }
.search label { display: block; margin-bottom: 10px; color: var(--gold); font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase }
.search div { display: grid; grid-template-columns: 1fr auto; gap: 10px }
.search input { min-width: 0; padding: 15px 16px; color: var(--text); background: rgba(20, 17, 14, .86); border: 1px solid rgba(247, 239, 226, .28); border-radius: 6px; font: inherit }
.search input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199, 163, 101, .35) }
.search button { padding: 15px 18px; color: var(--bg); background: var(--gold); border: 0; border-radius: 6px; font: inherit; font-weight: 900; cursor: pointer }
.search p { margin: 10px 0 0; color: var(--muted); font-size: .9rem }
.toolbar { position: sticky; top: var(--nav-h); z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; padding: 14px var(--pad-x); background: var(--bg2); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); border-top: 1px solid rgba(247, 239, 226, .14); border-bottom: 1px solid rgba(247, 239, 226, .14); flex-wrap: wrap }
.fchips { display: flex; flex-wrap: wrap; gap: 6px }
.fchip { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 900 }
.fchip b { color: var(--gold); margin-left: 4px; font-variant-numeric: tabular-nums }
.fchip:hover { color: var(--text); border-color: var(--gold) }
.fchip[aria-current] { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }
.fchip[aria-current] b { color: var(--bg) }
.ftoggles { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: .85rem; font-weight: 700; color: var(--muted) }
.ftoggles label { display: inline-flex; gap: 7px; align-items: center; cursor: pointer }
.ftoggles input { width: 18px; height: 18px; accent-color: var(--gold) }
.toolbar .dim { color: var(--muted); font-size: .88rem }
@media (max-width: 940px) { .toolbar { top: var(--nav-h); position: static } }
.sec[id], [role="tabpanel"] { scroll-margin-top: var(--nav-h) }
.done, .form, .docgroup, .ccard { scroll-margin-top: calc(var(--nav-h) + 22px) }
#listing { scroll-margin-top: var(--nav-h) }
.jump { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 16px var(--pad-x) 0; font-size: .82rem }
.jump a { color: var(--gold); font-weight: 900 }
.jump a span { color: var(--muted); font-weight: 400 }
.jump a:hover span { color: var(--text) }
@media (max-width: 940px) { .jump { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 12px; scrollbar-width: thin } .jump a { flex: none; white-space: nowrap } }
.groups { display: grid; gap: 64px; padding: 36px var(--pad-x) var(--pad-y); background-image: radial-gradient(ellipse at 90% 0%, rgba(199, 163, 101, .12), transparent 40%) }
.fgroup { display: grid; gap: 40px; scroll-margin-top: calc(var(--nav-h) + 76px) }
.fhead { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding-bottom: 18px; border-bottom: 1px solid var(--gold) }
.fhead .fnum { display: block; margin-bottom: 8px; color: var(--gold); font-size: .78rem; font-weight: 900; letter-spacing: .12em }
.fhead h2 { font-size: clamp(2.2rem, 5vw, 4.4rem); line-height: .95 }
.group { scroll-margin-top: calc(var(--nav-h) + 76px) }
.ghead { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 16px; border-bottom: 1px solid rgba(247, 239, 226, .16); padding-bottom: 12px }
.ghead h3 { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 500 }
.n { color: var(--gold); font-weight: 900; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
.gintro { max-width: 920px; margin-top: 8px; color: var(--muted); font-size: clamp(.92rem, 1.3vw, 1.02rem); line-height: 1.6 }
@media (max-width: 620px) { .fhead { grid-template-columns: 1fr } .ghead { flex-direction: column; align-items: flex-start; gap: 6px } .groups { gap: 44px } .fgroup { gap: 28px } }
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px }
.pgrid.strip { grid-template-columns: repeat(6, minmax(0, 1fr)) }
.pcard { overflow: hidden; background: var(--bg2); border: 1px solid rgba(247, 239, 226, .16); border-radius: 8px; display: block; color: var(--text); transition: border-color .2s ease }
.pcard:hover { border-color: rgba(199, 163, 101, .72) }
.pcard .imwrap { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1.18; background: #0c0a08 }
.pcard .imwrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease }
.pcard:hover .imwrap img { transform: scale(1.04) }
.pcard strong, .pcard .c { display: block; padding-left: 12px; padding-right: 12px }
.pcard strong { padding-top: 11px; color: var(--text); font-size: .92rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.pcard .c { padding-top: 3px; padding-bottom: 12px; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .1em }
.badge { position: absolute; left: 8px; top: 8px; padding: 4px 7px; color: var(--bg); background: var(--gold); border-radius: 999px; font-size: .62rem; font-style: normal; font-weight: 900; letter-spacing: .06em; text-transform: uppercase }
.badge.ghost { color: var(--text); background: rgba(20, 17, 14, .72); border: 1px solid rgba(247, 239, 226, .3) }
.noresults { color: var(--muted); padding: 0 var(--pad-x) var(--pad-y) }
.pcard.peek-off { display: none }
.gmore { width: 100%; margin-top: 10px; justify-content: center }
@media (max-width: 1280px) { .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)) } }
@media (max-width: 1100px) { .pgrid, .pgrid.strip { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
@media (max-width: 620px) {
  .pgrid, .pgrid.strip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
  .pcard strong { padding: 7px 6px 0; font-size: .72rem }
  .pcard .c { padding: 2px 6px 7px; font-size: .64rem }
  .badge { left: 4px; top: 4px; padding: 3px 5px; font-size: .5rem }
}

/* product detail (dialog) */
.pdetail { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(10px, 3vw, 40px); background: rgba(10, 8, 6, .92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px) }
.pdbox { width: min(1180px, 100%); max-height: 92vh; overflow: auto; overscroll-behavior: contain; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: clamp(18px, 3vw, 36px); position: relative }
.pdbox { display: grid }
.pdbox > * { grid-area: 1 / 1; min-width: 0 }
.pdclose { position: sticky; justify-self: end; align-self: start; top: 0; margin: -6px -6px 0 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 1.4rem; cursor: pointer; font-family: inherit; z-index: 2 }
.pdclose:hover { background: var(--gold); color: var(--bg) }
.ptop { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: start }
.pimg { position: relative; overflow: hidden; background: #0c0a08; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 32px 90px rgba(0, 0, 0, .34); aspect-ratio: 400 / 531 }
.pimg img { width: 100%; height: 100%; object-fit: cover }
.ptop .eyebrow { padding-right: 52px }
.ptop h2.pname { font-size: clamp(2rem, 4vw, 3.8rem); line-height: .95; padding-right: 52px }
.code { margin-top: 10px; color: var(--gold); font-weight: 900; letter-spacing: .12em; font-size: .85rem }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px }
.tags span { padding: 5px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted) }
.tags .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; border: 1px solid rgba(247, 239, 226, .4) }
.dl { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 22px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: rgba(247, 239, 226, .16) }
.dl div { padding: 12px 14px; background: var(--bg2) }
.dl div:last-child:nth-child(odd) { grid-column: 1 / -1 }
.dl dt { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase }
.dl dd { margin: 5px 0 0; color: var(--text) }
.qadd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 22px }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden }
.stepper button { width: 42px; height: 44px; background: var(--bg2); color: var(--text); border: 0; font: inherit; font-size: 1.2rem; cursor: pointer }
.stepper button:hover { background: var(--gold); color: var(--bg) }
.stepper input { width: 56px; height: 44px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: center; font: inherit; font-weight: 900; appearance: textfield; -moz-appearance: textfield }
.stepper input::-webkit-inner-spin-button, .stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0 }
.qadd .button { margin-top: 0 }
.qadd .msg { color: var(--gold); font-weight: 700; font-size: .9rem }
.pphoto { margin: 34px 0 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.pphoto img { width: 100%; height: auto }
.pphoto figcaption { padding: 10px 14px; color: var(--muted); font-size: .86rem; background: var(--bg2) }
.pdbox .pgrid { grid-template-columns: repeat(6, minmax(0, 1fr)) }
@media (max-width: 800px) { .ptop { grid-template-columns: 1fr } .pimg { max-width: min(300px, calc(100% - 56px)) } .dl { grid-template-columns: 1fr } .pdbox .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)) } }

/* tables, notes, faq, steps */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 26px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; font-size: .95rem }
.tbl th { text-align: left; padding: 14px 18px; color: var(--gold); font-size: .74rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--line); background: rgba(20, 17, 14, .5) }
.tbl td, .tbl tbody th { padding: 15px 18px; border-bottom: 1px solid var(--line2); vertical-align: top; color: var(--muted); line-height: 1.5; text-align: left }
.tbl tbody th { color: var(--text); font-weight: 700; font-size: .95rem; letter-spacing: 0; text-transform: none; background: transparent }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0 }
.tbl a { color: var(--gold); font-weight: 700 }
.tblwrap { overflow-x: auto; }
@media (max-width: 620px) { .tbl { font-size: .88rem } .tbl td, .tbl th, .tbl tbody th { padding: 12px } .tbl.stack thead { display: none } .tbl.stack tr { display: block; border-bottom: 1px solid var(--line) } .tbl.stack td, .tbl.stack tbody th { display: block; border: 0; padding: 6px 14px } .tbl.stack tbody th { padding-top: 14px; color: var(--gold) } .tbl.stack td[data-l]::before { content: attr(data-l) ": "; color: var(--text); font-weight: 700 } .tbl.stack tr:last-child td:last-child { padding-bottom: 14px } }
.note { margin-top: 22px; padding: 18px 22px; background: var(--bg2); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 6px; color: var(--muted); line-height: 1.6; font-size: .95rem }
.note b { color: var(--text) }
.note a { color: var(--gold); font-weight: 900 }
.faq { margin-top: 28px; border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; position: relative; color: var(--text) }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font-size: 1.6rem; color: var(--gold); line-height: 1; font-family: var(--sans) }
.faq details[open] summary::after { content: "\2013" }
.faq details p { padding: 0 40px 22px 0; max-width: 76ch }
.faq details p a { color: var(--gold); font-weight: 700 }
.steps { display: grid; gap: 12px; margin-top: 30px }
.steps article { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 22px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px }
.steps .num { font-family: var(--serif); font-size: 2rem; color: var(--gold); line-height: 1 }
.steps strong { display: block; font-size: 1.15rem }
.steps p { margin-top: 6px }
.steps.five { grid-template-columns: repeat(5, 1fr) }
.steps.five article { grid-template-columns: 1fr; gap: 10px }
@media (max-width: 1100px) { .steps.five { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px) { .steps.five { grid-template-columns: 1fr } .steps article { grid-template-columns: 44px 1fr; padding: 18px; gap: 12px } }
.two { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(24px, 5vw, 72px); align-items: start }
@media (max-width: 940px) { .two { grid-template-columns: 1fr } }

/* projects */
.projects { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.project { margin: 0; overflow: hidden; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px }
.project > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover }
.project figcaption { padding: 14px 16px 16px }
.project strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.3rem }
.ptags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.ptags a { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; color: var(--muted) }
.ptags a:hover { border-color: var(--gold); color: var(--text) }
.ptags img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover }
.ptags b { color: var(--gold) }
@media (max-width: 1100px) { .projects { grid-template-columns: 1fr 1fr } }
@media (max-width: 620px) { .projects { grid-template-columns: 1fr } }

/* documents */
.docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px }
.docgroup { scroll-margin-top: calc(var(--nav-h) + 26px) }
.docgroup h3 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; display: flex; gap: 12px; align-items: baseline }
.docgroup h3 span { font-family: var(--sans); font-size: .76rem; font-weight: 900; color: var(--gold); letter-spacing: .1em }
.docgroup > p { margin-top: 6px; font-size: .95rem }
.doclist { margin-top: 14px; border-top: 1px solid var(--line) }
.doclist a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 13px 4px; border-bottom: 1px solid var(--line2) }
.doclist a:hover strong { color: var(--gold) }
.doclist strong { font-size: .98rem; transition: color .2s }
.doclist span { grid-column: 1; color: var(--muted); font-size: .86rem }
.doclist em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: .7rem; font-weight: 900; letter-spacing: .1em; color: var(--gold); border: 1px solid rgba(199, 163, 101, .5); border-radius: 4px; padding: 3px 6px }
@media (max-width: 940px) { .docs { grid-template-columns: 1fr } }
.catgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.catcard { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 16px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; align-items: center }
.catcard img { width: 120px; height: 140px; object-fit: cover; border-radius: 4px }
.catcard strong { display: block; font-size: 1.1rem }
.catcard span { display: block; margin-top: 6px; color: var(--muted); font-size: .9rem; line-height: 1.5 }
.catlinks { margin-top: 10px !important; display: flex; gap: 14px; flex-wrap: wrap }
.catlinks a { color: var(--gold); font-weight: 900; font-size: .88rem }
@media (max-width: 1100px) { .catgrid { grid-template-columns: 1fr } }

/* forms */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px }
.tabs button { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 900; cursor: pointer }
.tabs button[aria-selected="true"] { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px }
.form .full { grid-column: 1 / -1 }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0 }
.field label, .field legend { color: var(--gold); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; padding: 0 }
.field label i, .field legend i { color: var(--dim); font-style: normal; font-weight: 700; letter-spacing: .04em; text-transform: none }
.field input, .field select, .field textarea { font: inherit; padding: 14px 16px; color: var(--text); background: rgba(20, 17, 14, .86); border: 1px solid rgba(247, 239, 226, .28); border-radius: 6px; width: 100%; min-width: 0 }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199, 163, 101, .35) }
.field input:disabled, .field select:disabled, .field textarea:disabled { opacity: .55; cursor: not-allowed }
.field textarea { min-height: 120px; resize: vertical }
.field [aria-invalid="true"] { border-color: var(--err) }
.field .err { color: var(--err); font-size: .82rem; font-weight: 700 }
.field .hint { color: var(--dim); font-size: .82rem }
fieldset.field { border: 0; margin: 0; padding: 0 }
.radios { display: flex; flex-wrap: wrap; gap: 8px }
.radios label { display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer }
.radios input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0 }
.radios label:has(input:checked) { border-color: var(--gold); background: rgba(199, 163, 101, .1) }
.check { display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: .9rem; line-height: 1.5 }
.check input { width: 18px; height: 18px; accent-color: var(--gold); margin: 2px 0 0; flex: none }
.formerr { color: var(--err); font-weight: 700 }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden }
.done { margin-top: 22px; padding: 22px; border: 1px solid var(--gold); border-radius: 8px; background: rgba(199, 163, 101, .08) }
.done h3 { font-family: var(--serif); font-weight: 500; font-size: 1.8rem }
.done p { margin-top: 10px }
.done pre { margin: 14px 0 0; padding: 14px; max-height: 260px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: .85rem/1.55 ui-monospace, Menlo, Consolas, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 6px }
.done .actions .button { margin-top: 14px }
@media (max-width: 700px) { .form { grid-template-columns: 1fr } }

/* quote list (company page) */
.qlist { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden }
.qlist li { display: grid; grid-template-columns: 44px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--bg2); border-bottom: 1px solid var(--line2) }
.qlist li:last-child { border-bottom: 0 }
.qlist img { width: 44px; height: 58px; object-fit: cover; border-radius: 4px }
.qlist strong { display: block; font-size: .95rem }
.qlist span { color: var(--gold); font-size: .75rem; font-weight: 900; letter-spacing: .1em }
.qlist .stepper button { width: 34px; height: 36px; font-size: 1rem }
.qlist .stepper input { width: 44px; height: 36px }
.qlist .rm { background: 0; border: 0; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 8px 4px }
.qlist .rm:hover { color: var(--gold) }
.qempty { margin-top: 10px; color: var(--dim); font-size: .9rem }
.qempty a { color: var(--gold); font-weight: 700 }
@media (max-width: 520px) { .qlist li { grid-template-columns: 36px 1fr auto; } .qlist img { width: 36px; height: 48px } .qlist .rm { grid-column: 2 / -1; justify-self: start; padding: 0 } }

/* company */
.ccard { padding: clamp(20px, 4vw, 44px); background: var(--bg2); border: 1px solid rgba(247, 239, 226, .16); border-radius: 8px; min-width: 0 }
.ccard h2 { font-size: clamp(1.9rem, 4vw, 3.6rem) }
.ccard dl { display: grid; gap: 18px; margin: 30px 0 0 }
.ccard dl div { padding-top: 18px; border-top: 1px solid rgba(247, 239, 226, .14) }
.ccard dt { color: var(--gold); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase }
.ccard dd { margin: 6px 0 0; color: var(--text); line-height: 1.5; overflow-wrap: anywhere }
.ccard dd a:hover { color: var(--gold) }
.copy { margin-left: 8px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; font-size: .68rem; font-weight: 900; cursor: pointer; vertical-align: middle }
.copy:hover { color: var(--bg); background: var(--gold2); border-color: var(--gold2) }

/* footer */
.site-footer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 6vw, 88px); padding: clamp(42px, 6vw, 72px) var(--pad-x) 28px; color: var(--text); background: var(--bg4); background-image: radial-gradient(ellipse at 10% 0%, rgba(199, 163, 101, .10), transparent 45%); border-top: 1px solid var(--line2) }
.site-footer a:hover { color: var(--gold) }
.fbrand p { max-width: 480px; margin: 16px 0 0 }
/* The logo has dark lettering, so on the dark footer it sits on a white plate. */
.flogo { display: inline-flex; padding: 14px 18px; background: var(--paper); border-radius: 8px; line-height: 0 }
.flogo img { height: 46px; width: auto }
.site-footer .flogo:focus-visible { outline-offset: 3px }
.fmaker { margin-top: 22px; color: var(--dim); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.flinks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px) }
.flinks h2 { margin: 0 0 14px; font-family: var(--sans); font-weight: 700; color: var(--text); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase }
.flinks a, .flinks span { display: block; margin-top: 10px; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere }
.flinks b { display: block; color: var(--text); font-weight: 700; font-size: .86rem }
.flinks address { display: block; margin-top: 10px; color: var(--muted); line-height: 1.5; font-style: normal }
.nw { white-space: nowrap }
.flinks .nw { display: inline; margin: 0 }
.flinks .here { color: var(--dim) }
.flinks .here b { color: var(--gold) }
.fbottom { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 24px; color: var(--dim); font-size: .86rem; border-top: 1px solid var(--line2) }
@media (max-width: 1100px) { .site-footer { grid-template-columns: 1fr } }
@media (max-width: 620px) { .flinks { grid-template-columns: 1fr 1fr } }
/* Footer button that opens the assistant: reads like the footer links, 44px tall to tap. */
.fask { display: flex; align-items: center; min-height: 44px; margin: 10px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; line-height: 1.5; text-align: left; cursor: pointer }
.fask:hover { color: var(--gold) }
/* The note over the quote form when the assistant hands a question over (company page). */
.note.handoff { margin: 0 0 4px; scroll-margin-top: calc(var(--nav-h) + 22px) }

/* ------------------------------------------------------------------ assistant (assets/js/assistant.js) */
/* The launcher: a gold pill at the bottom right (a circle on phones), under the sticky header in
   the stacking order, so the open phone menu always covers it. It also steps aside (.is-tucked)
   while the menu or the pattern detail is open and while it would sit over a form or the footer's
   last line. --ask-lift (on html) raises it above any bar fixed to the bottom of the screen. */
.ask-launch { position: fixed; z-index: 45; right: max(24px, env(safe-area-inset-right)); bottom: calc(max(24px, env(safe-area-inset-bottom)) + var(--ask-lift, 0px)); display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 14px; border: 1px solid rgba(20, 17, 14, .4); border-radius: 999px; background: var(--gold); color: var(--bg); box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8), 0 0 0 4px rgba(20, 17, 14, .35); font: inherit; font-size: .92rem; font-weight: 900; cursor: pointer }
.ask-launch:hover { background: var(--gold2) }
.ask-launch .ico { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round }
.ask-launch.is-tucked { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none }
@media (max-width: 640px) {
  .ask-launch { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--ask-lift, 0px)); width: 56px; height: 56px; padding: 0; justify-content: center }
  .ask-launch-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
}
/* The panel: a modal dialog at the bottom right on wider screens, full screen on phones. */
.ask { position: fixed; inset: auto max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) auto; margin: 0; padding: 0; width: min(420px, calc(100vw - 48px)); height: min(660px, calc(100vh - 48px)); height: min(660px, calc(100dvh - 48px)); max-width: none; max-height: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9); overflow: hidden; color-scheme: dark }
.ask[open] { display: flex; flex-direction: column }
.ask::backdrop { background: rgba(10, 8, 6, .6) }
.ask-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; background-color: var(--bg2); background-image: radial-gradient(ellipse at 100% 0%, rgba(199, 163, 101, .26), transparent 62%); border-bottom: 1px solid var(--line2) }
.ask-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(199, 163, 101, .6) }
.ask-badge .ico { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.ask-head-t { min-width: 0 }
.ask-title { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: var(--text) }
.ask-title:focus { outline: none }
.ask-desc { margin-top: 2px; color: var(--muted); font-size: .82rem; line-height: 1.4 }
.ask-close { flex: none; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer }
.ask-close:hover { background: rgba(247, 239, 226, .08); color: var(--gold) }
.ask-close:focus-visible { outline-offset: -3px }
.ask-log { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 12px; background: var(--bg) }
.ask-log:focus-visible { outline-offset: -3px }
.ask-msg { max-width: 92% }
.ask-msg.is-bot { align-self: flex-start }
.ask-msg.is-you { align-self: flex-end; max-width: 85% }
.ask-bubble { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: .94rem; line-height: 1.55 }
.ask-bubble p, .ask-bubble li { margin: 0; font-size: inherit; line-height: inherit }
.is-bot .ask-bubble { background: var(--bg2); border: 1px solid var(--line2); border-top-left-radius: 3px }
.is-bot .ask-bubble p, .is-bot .ask-bubble li { color: var(--text) }
.ask-bubble p + p, .ask-bubble .ask-list + p { margin-top: 8px }
.is-you .ask-bubble { background: var(--gold); color: var(--bg); border-top-right-radius: 3px; font-weight: 700; white-space: pre-wrap; overflow-wrap: anywhere }
ul.ask-list { margin: 8px 0 0; padding-left: 20px; list-style: disc }
ol.ask-list { margin: 8px 0 0; padding-left: 22px; list-style: decimal }
.ask-list li + li { margin-top: 4px }
.ask-list li::marker { color: var(--gold) }
.ask-bubble .ask-src { margin-top: 10px; color: var(--dim); font-size: .82rem; line-height: 1.4 }
.ask-src-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--gold); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px }
.ask-src-link:hover { color: var(--gold2) }
.ask-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.ask-act { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(199, 163, 101, .6); border-radius: 6px; background: transparent; color: var(--gold); font: inherit; font-size: .86rem; font-weight: 900; line-height: 1.3; text-align: left; cursor: pointer }
.ask-act:hover { background: rgba(199, 163, 101, .12); color: var(--gold2) }
.ask-act.is-primary { background: var(--gold); border-color: var(--gold); color: var(--bg) }
.ask-act.is-primary:hover { background: var(--gold2); border-color: var(--gold2); color: var(--bg) }
.ask-nb { white-space: nowrap }
.ask-dots { display: inline-flex; gap: 5px; padding: 4px 2px }
.ask-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); opacity: .6 }
.ask-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; border-top: 1px solid var(--line2); background: var(--bg2) }
.ask-chip { min-height: 44px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: .84rem; font-weight: 700; line-height: 1.3; text-align: left; cursor: pointer }
.ask-chip:hover { border-color: var(--gold); color: var(--gold) }
.ask-form { flex: none; display: flex; gap: 8px; padding: 10px 16px 8px; background: var(--bg2) }
.ask-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1px solid rgba(247, 239, 226, .28); border-radius: 6px; background: rgba(20, 17, 14, .86); color: var(--text); font: inherit }
.ask-input::placeholder { color: var(--dim); opacity: 1 }
.ask-input:focus { outline: 0; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199, 163, 101, .35) }
.ask-send { flex: none; margin: 0; min-height: 48px; padding: 0 20px }
.ask-send:hover { transform: none }
.ask-note { flex: none; margin: 0; padding: 0 16px 14px; background: var(--bg2); color: var(--dim); font-size: .78rem; line-height: 1.45 }
@media (max-width: 640px) {
  .ask { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0 }
  html.ask-open { overflow: hidden }
  .ask-msg { max-width: 100% }
  /* suggestions in one row that scrolls sideways, so the conversation keeps the room */
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 16px; scrollbar-width: none; padding-bottom: 8px }
  .ask-chips::-webkit-scrollbar { display: none }
  .ask-chip { flex: none; white-space: nowrap }
}
/* Short screens (a phone on its side, a small window): a compact head, one row of suggestions and
   no footnote, and the conversation keeps at least 96px. */
@media (max-height: 560px) {
  .ask { overflow-y: auto }
  .ask-head { padding: 6px 8px 6px 12px; gap: 10px }
  .ask-badge { width: 32px; height: 32px }
  .ask-badge .ico { width: 20px; height: 20px }
  .ask-title { font-size: 1.1rem }
  .ask-desc { display: none }
  .ask-log { flex: 1 0 96px; min-height: 96px; padding: 12px 12px 8px }
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 12px }
  .ask-chips::-webkit-scrollbar { display: none }
  .ask-chip { flex: none; white-space: nowrap }
  .ask-form { padding: 6px 12px }
  .ask-note { display: none }
}
@media (max-height: 560px) and (min-width: 641px) {
  .ask { inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) auto; height: calc(100vh - 24px); height: calc(100dvh - 24px) }
}
@media (prefers-reduced-motion: no-preference) {
  .ask-launch { transition: opacity .2s, transform .2s, visibility 0s linear 0s, background-color .15s }
  .ask-launch.is-tucked { transition: opacity .2s, transform .2s, visibility 0s linear .2s }
  .ask[open] { animation: ask-in .22s cubic-bezier(.2, .8, .2, 1) }
  .ask[open]::backdrop { animation: ask-fade .22s ease-out }
  .ask-dots i { animation: ask-dot 1.2s ease-in-out infinite }
  .ask-dots i:nth-child(2) { animation-delay: .15s }
  .ask-dots i:nth-child(3) { animation-delay: .3s }
}
@keyframes ask-in { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }
@keyframes ask-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes ask-dot { 0%, 80%, 100% { opacity: .3 } 40% { opacity: 1 } }

/* Hyundai L&C manufacturer mark */
.hylogo { display: block; height: 34px; width: auto; opacity: .92 }
.hylogo.sm { height: 22px }
.hylogo.inline { display: inline-block; height: 16px; vertical-align: -3px; margin-right: 6px }
.eyerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap }
.eyerow .eyebrow { margin: 0 }
.hero .eyerow { justify-content: flex-start; gap: 14px }
.hero .eyerow .hylogo { height: 20px }
.fmaker .hylogo { height: 30px }

/* animated gold line icons */
.pico { display: block; margin-bottom: 14px; width: 48px; height: 48px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible }
.cards article .pico, .cards a .pico { margin-bottom: 16px }
.pico .sw { fill: var(--gold); fill-opacity: .12; animation: swfill 3.2s ease-in-out infinite }
.pico .sw2 { animation-delay: .4s } .pico .sw3 { animation-delay: .8s } .pico .sw4 { animation-delay: 1.2s }
@keyframes swfill { 0%, 60%, 100% { fill-opacity: .12 } 15%, 40% { fill-opacity: .55 } }
.pico .ly { fill: var(--gold); fill-opacity: .14; transform-box: fill-box; transform-origin: center; animation: 3.6s ease-in-out infinite }
.pico .ly1 { fill-opacity: .42; animation-name: lyfloat1 } .pico .ly2 { animation-name: lyfloat2 } .pico .ly3 { fill-opacity: .06; animation-name: lyfloat3 }
@keyframes lyfloat1 { 0%, 20%, 80%, 100% { transform: translateY(-6px) } 45%, 55% { transform: translateY(-11px) } }
@keyframes lyfloat2 { 0%, 100% { transform: translateY(0) } }
@keyframes lyfloat3 { 0%, 20%, 80%, 100% { transform: translateY(6px) } 45%, 55% { transform: translateY(11px) } }
.pico .strip, .pico .strip2 { stroke-dasharray: 32; stroke-dashoffset: 32; animation: unroll 3.4s ease-in-out infinite }
.pico .strip2 { opacity: .45; animation-delay: .25s }
.pico .core { stroke-dasharray: 6 4; transform-box: fill-box; transform-origin: center; animation: spin 3.4s linear infinite }
@keyframes unroll { 0% { stroke-dashoffset: 32 } 35%, 70% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 32 } }
@keyframes spin { to { transform: rotate(360deg) } }
.pico .tick { stroke-dasharray: 24; stroke-dashoffset: 24; stroke-width: 2; animation: draw 3.6s ease-in-out infinite }
@keyframes draw { 0%, 25% { stroke-dashoffset: 24 } 45%, 80% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 24 } }
.pico .cardA { fill: var(--gold); fill-opacity: .08 }
.pico .cardB { fill: var(--bg2); transform-box: fill-box; transform-origin: center; animation: lift 3.6s ease-in-out infinite }
@keyframes lift { 0%, 30%, 100% { transform: translate(0, 0) } 50%, 75% { transform: translate(3px, -4px) } }
.pico .bar { fill: var(--gold); fill-opacity: .25; transform-box: fill-box; transform-origin: bottom; animation: grow 3.6s ease-in-out infinite }
.pico .b2 { animation-delay: .2s } .pico .b3 { animation-delay: .4s }
@keyframes grow { 0%, 15% { transform: scaleY(.3) } 40%, 80% { transform: scaleY(1) } 100% { transform: scaleY(.3) } }
.pico .truck { animation: drive 3.6s ease-in-out infinite }
.pico .road { stroke-dasharray: 3 4; animation: roadmove 1.2s linear infinite }
@keyframes drive { 0%, 10% { transform: translateX(-3px) } 50%, 60% { transform: translateX(3px) } 100% { transform: translateX(-3px) } }
@keyframes roadmove { to { stroke-dashoffset: -7 } }
.pico .ln { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 3.6s ease-in-out infinite }
.pico .l2 { animation-delay: .25s } .pico .l3 { animation-delay: .5s }
.pico .sig { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 3.6s ease-in-out infinite; animation-delay: .8s }
.pico .seal { fill: var(--gold); fill-opacity: .1; animation: pulse 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center }
@keyframes pulse { 0%, 100% { fill-opacity: .1; transform: scale(1) } 50% { fill-opacity: .3; transform: scale(1.06) } }
.pico .sq { animation: wipe 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center }
.pico .wipe { stroke-dasharray: 20; stroke-dashoffset: 20; animation: draw 3.6s ease-in-out infinite } .pico .w2 { animation-delay: .3s }
@keyframes wipe { 0%, 20%, 100% { transform: translate(0, 0) } 50%, 70% { transform: translate(-4px, 4px) } }
.pico .arc, .pico .arc2 { stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw60 3.6s ease-in-out infinite } .pico .arc2 { animation-delay: .3s; opacity: .5 }
@keyframes draw60 { 0%, 15% { stroke-dashoffset: 60 } 45%, 80% { stroke-dashoffset: 0 } 100% { stroke-dashoffset: 60 } }
.pico .dot { fill: var(--gold) }
.pico .wave { animation: waft 3s ease-in-out infinite } .pico .w3 { animation-delay: .6s }
@keyframes waft { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(3px) } }
.pico .flame { fill: var(--gold); fill-opacity: .12; transform-box: fill-box; transform-origin: bottom; animation: flicker 2.4s ease-in-out infinite }
@keyframes flicker { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.04, .96) } }
.pico .pin { transform-box: fill-box; transform-origin: bottom; animation: bob 3.6s ease-in-out infinite }
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }
@media (prefers-reduced-motion: reduce) {
  .pico * { animation: none !important }
  .pico .strip, .pico .strip2, .pico .tick, .pico .ln, .pico .sig, .pico .wipe, .pico .arc, .pico .arc2 { stroke-dashoffset: 0 }
  .pico .ly1 { transform: translateY(-7px) } .pico .ly3 { transform: translateY(7px) }
}

/* quote section: keep the promise cards beside the long form on wide screens */
@media (min-width: 941px) { #quote .two > div:last-child { position: sticky; top: calc(var(--nav-h) + 26px) } }