/* Bodaq Finishes: light system, in the main Bodaq branding.
   The colours are bodaq.com's (the --bq-* tokens below):
   white and warm grey surfaces, Bodaq teal as the working accent, charcoal as the only dark surface,
   the logo amber only in the logo and in the accent part of the line icons (as bodaq.com's icons do).
   --teal is for strokes, fills and large type; --teal-ink is teal text (AA on white); filled
   buttons with white text use --teal2 (#07806e), because white on brand teal is only 3.6:1.
   Typography comes from bodaq-type.css (the shared Bodaq type kit, Proxima Nova, linked before this
   file): font family, sizes, weights, line heights, letter spacing and case. This file sets colour,
   spacing and layout only; where a component needs a kit size without the kit class it uses the
   kit's --t-* tokens. Do not add font-family, letter-spacing or new sizes here. */
:root {
  /* Bodaq brand tokens, the same values as bodaq.com. */
  --bq-teal: #099883; --bq-teal-text: #07806e; --bq-charcoal: #222021; --bq-amber: #de992a;
  --bq-heading: #333333; --bq-body: #5c5b5b; --bq-body-2: #656565;
  --bq-surface: #ffffff; --bq-warm: #f6f5f4; --bq-border: #e4e2e2; --bq-mint: #c8faeb; --bq-tint: #dfede9;
  /* Two shades derived from the brand tokens:
     teal-deep: hover on teal fills, teal surfaces under dimmed white text, and teal text where the
     background is not plain white (warm grey 6.0:1, mint 5.7:1; #07806e is only 4.46:1 on the warm grey);
     amber-light: the icon accent on teal and charcoal (amber 40% on white, as bodaq.com's light icons). */
  --bq-teal-deep: #066a5c; --bq-amber-light: #f2d6aa;

  /* This site's colour roles, mapped to the tokens */
  --paper: var(--bq-surface); --wash: var(--bq-warm); --wash2: #edebeb; --ink: var(--bq-heading); --soft: var(--bq-body); --mute: var(--bq-body-2);
  --line: var(--bq-border); --line2: #d4d2d2; --dark: var(--bq-charcoal);
  --teal: var(--bq-teal); --teal2: var(--bq-teal-text); --teal-ink: var(--bq-teal-text); --teal-t: rgba(9,152,131,.10);
  --brass: var(--bq-amber); --brass-t: rgba(223,237,233,.35); --err: #b3261e;
  --maxw: 1320px; --px: clamp(16px, 4vw, 40px); --py: clamp(56px, 7vw, 96px);
  --m-add: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --m-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--paper); color: var(--ink); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0; color: var(--soft); }
p + p { margin-top: 14px; }
[hidden] { display: none !important; }
/* focus: bodaq.com's 2px teal ring; white on the teal band, mint on charcoal (see those sections) */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--bq-mint); color: var(--bq-heading); }
section[id], div[id] { scroll-margin-top: calc(var(--head-h, 67px) + 16px); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { max-width: var(--maxw); margin: 0 auto; }
.sec { position: relative; padding: var(--py) var(--px); background-color: var(--paper); background-image: radial-gradient(ellipse at 85% 10%, var(--teal-t), transparent 42%), radial-gradient(ellipse at 8% 95%, var(--brass-t), transparent 40%); }
.sec:nth-of-type(even) { background-image: radial-gradient(ellipse at 12% 12%, var(--brass-t), transparent 42%), radial-gradient(ellipse at 90% 90%, var(--teal-t), transparent 40%); }
/* teal text on the warm grey and on the hero glows takes the deeper teal (AA); on plain white it is #07806e */
.sec.wash, .hero, .phero, .navmobpanel, .vizbar { --teal-ink: var(--bq-teal-deep); }
.sec.wash { background-color: var(--wash); }
.sec.dark { background-color: var(--dark); color: #fff; background-image: radial-gradient(ellipse at 85% 15%, rgba(9,152,131,.30), transparent 45%), radial-gradient(ellipse at 10% 90%, rgba(200,250,235,.08), transparent 45%); }
.sec.dark h2, .sec.dark h3, .sec.dark b { color: #fff; }
.sec.dark p { color: rgba(255,255,255,.76); }
.sec.dark :focus-visible, .site-foot :focus-visible { outline-color: var(--bq-mint); }
.kicker { margin: 0 0 14px; color: var(--teal-ink); display: flex; align-items: center; gap: 12px; }
.kicker .ico { width: 24px; height: 24px; }
.kicker .no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--teal); font-variant-numeric: tabular-nums; }
.sec.dark .kicker { color: var(--bq-mint); } .sec.dark .kicker .ico { width: 24px; height: 24px; }
.sec.dark .kicker .no { border-color: var(--bq-mint); }
.lede, .phero .t-lead { color: var(--soft); max-width: 66ch; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.sec-head > div { max-width: 760px; }
.sec-head p.lede { margin-top: 14px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 940px) { .split { grid-template-columns: 1fr; } }
.note { color: var(--mute); }
.mt { margin-top: 28px; }
.tc { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(7,128,110,.4); color: var(--teal-ink); }
.tc:hover { text-decoration-color: currentColor; }
.ext::after { content: " \2197"; }

/* buttons */
/* type: .btn is an alias of the kit's .t-btn (14px, uppercase); variants change the box only */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 30px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; text-align: center; }
.btn:hover { transform: translateY(-1px); }
/* bodaq.com's buttons: primary = teal fill (#07806e so white text passes AA), outline = teal line and
   teal label that fills on hover, ghost = white line on dark that fills teal on hover */
.btn-teal { background: var(--teal2); color: #fff; border-color: var(--teal2); } .btn-teal:hover { background: var(--bq-teal-deep); border-color: var(--bq-teal-deep); }
.btn-dark { background: var(--dark); color: #fff; border-color: var(--dark); } .btn-dark:hover { background: #000; }
.btn-outline { background: transparent; color: var(--teal-ink); border-color: var(--teal); } .btn-outline:hover { background: var(--teal2); border-color: var(--teal2); color: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; } .btn-light:hover { background: var(--bq-mint); border-color: var(--bq-mint); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-ghost:hover { background: var(--teal2); border-color: var(--teal2); }
.btn-sm { padding: 11px 20px; }
.btns { display: flex; gap: 14px; flex-wrap: wrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@media (max-width: 480px) { .btn { white-space: normal; } .hero .btns .btn, .phero .btns .btn { flex: 1 1 100%; } }

/* header */
.site-head { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: 14px var(--px); display: flex; align-items: center; gap: 26px; }
/* Logo lockup: the official Bodaq logo (img/brand/bodaq-logo.svg, the same file bodaq.com uses) and
   the site name, "Finishes", in Proxima Semibold at the kit's h4 size, after a hairline. Logo 148px
   wide as in the bodaq.com header, 128px on phones. The footer uses the white logo. */
.brand { margin-right: auto; display: flex; align-items: center; gap: 12px; white-space: nowrap; min-width: 0; }
.brand-logo { display: block; width: 148px; height: auto; flex: none; }
.brand-name { display: block; padding: 3px 0 3px 12px; border-left: 1px solid var(--line2); font-size: var(--t-h4-size); font-weight: var(--t-semibold); line-height: 1.2; color: var(--bq-charcoal); }
.foot-brand { display: flex; align-items: center; gap: 14px; margin: 0; }
.foot-brand .brand-logo { width: 168px; }
.foot-brand .brand-name { color: #fff; border-left-color: rgba(255,255,255,.28); }
@media (max-width: 560px) { .brand-logo { width: 128px; } .brand { gap: 10px; } .brand-name { padding-left: 10px; } }
.nav-primary { display: flex; align-items: center; gap: 22px; }
.nav-link { color: var(--ink); transition: color .15s; white-space: nowrap; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--teal-ink); }
.nav-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--teal); padding-bottom: 3px; }
.navmob { display: none; position: relative; }
.navmob > summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #fff; }
.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; transition: transform .2s, opacity .2s; }
.navmob[open] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navmob[open] .burger i:nth-child(2) { opacity: 0; }
.navmob[open] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* the menu sits in the sticky header, so on a short screen (a phone on its side) it scrolls inside
   itself instead of running off the bottom of the screen */
.navmobpanel { position: absolute; right: 0; top: 54px; width: min(calc(100vw - 32px), 320px); max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 26px 60px rgba(0,0,0,.14); padding: 10px; display: flex; flex-direction: column; z-index: 70; }
.navmobpanel a { padding: 12px 14px; border-radius: 6px; }
.navmobpanel a:hover, .navmobpanel a[aria-current="page"] { background: var(--wash); color: var(--teal-ink); }
.navmobpanel .btn { margin-top: 8px; color: #fff; }
.navmobpanel .btn:hover { background: var(--bq-teal-deep); color: #fff; }
/* spacing and logo tighten from 1380 px and the phone menu takes over at 1160 px, so the logo lockup
   never shrinks. The visible tabs plus Trade Account fit from 1161 px with room to spare; a longer nav
   (the hidden pages' tabs back in it) needs measuring again */
@media (max-width: 1380px) { .nav-primary { gap: 16px; } .nav-inner { gap: 18px; } .brand-logo { width: 128px; } }
@media (min-width: 1281px) and (max-width: 1300px) { .nav-primary { gap: 14px; } }
@media (max-width: 1160px) { .nav-primary, .head-cta { display: none; } .navmob { display: block; } }

/* hero (home) */
.hero { position: relative; min-height: min(78vh, 720px); display: grid; align-items: center; overflow: hidden; background: var(--wash); }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 38%, rgba(255,255,255,.55) 66%, rgba(255,255,255,.18) 100%); }
.hero-glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 30%, var(--teal-t), transparent 45%), radial-gradient(ellipse at 70% 80%, var(--brass-t), transparent 40%); }
.hero-inner { position: relative; max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: clamp(56px, 8vw, 110px) var(--px); width: 100%; }
.hero-inner > div { max-width: 680px; }
.hero-kick { margin: 0 0 18px; color: var(--teal-ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hero-kick img { height: 16px; width: auto; opacity: .9; }
.hero h1 { margin: 0 0 20px; max-width: 20ch; }
.hero-sub { color: var(--soft); max-width: 56ch; margin: 0 0 32px; }
.rise { animation: rise .8s ease-out both; }
.rise:nth-child(2) { animation-delay: .1s; } .rise:nth-child(3) { animation-delay: .2s; } .rise:nth-child(4) { animation-delay: .3s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 940px) { .hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.86) 60%, rgba(255,255,255,.5) 100%); } }

/* page hero (sub-pages) */
.phero { position: relative; background: var(--wash); border-bottom: 1px solid var(--line); overflow: hidden; min-height: min(62vh, 560px); display: grid; align-items: center; }
.phero .hero-inner { padding: clamp(48px, 7vw, 96px) var(--px); }
.phero .hero-inner > div { max-width: 800px; }
.phero .btns { margin-top: 28px; }
.phero .btn-outline { background: rgba(255,255,255,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 700px) { .phero .hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.9) 70%, rgba(255,255,255,.62) 100%); } }

/* spec bar */
.specbar { border-bottom: 1px solid var(--line); background: #fff; }
/* one row of equal columns, however many figures there are; three across (the second row centred when
   it is short) under 940 px, two across under 520 px with an odd last figure centred */
.grid-stats { max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: 30px var(--px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; list-style: none; }
.grid-stats li { text-align: center; display: grid; justify-items: center; gap: 6px; }
.grid-stats .ico { width: 40px; height: 40px; margin-bottom: 4px; }
.grid-stats b { display: block; }
.grid-stats li > span { display: block; color: var(--mute); margin-top: 4px; }
@media (max-width: 940px) {
  .grid-stats { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid-stats li { grid-column: span 2; }
  .grid-stats li:nth-child(3n + 1):nth-last-child(2) { grid-column: 2 / span 2; }
  .grid-stats li:nth-child(3n + 1):last-child { grid-column: 3 / span 2; }
}
@media (max-width: 520px) {
  .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .grid-stats li, .grid-stats li:nth-child(3n + 1):nth-last-child(2), .grid-stats li:nth-child(3n + 1):last-child { grid-column: auto; }
  .grid-stats li:nth-child(odd):last-child { grid-column: 1 / -1; }
}

/* icons */
.ico { width: 52px; height: 52px; display: block; fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
.ico .fill { fill: var(--teal); fill-opacity: .1; stroke: none; }
/* the accent part of each icon (.brass) is the logo amber, as on bodaq.com */
.ico .brass { stroke: var(--brass); }
.ico .bfill { fill: var(--brass); fill-opacity: .16; stroke: none; }
.sec.dark .ico { stroke: var(--bq-mint); } .sec.dark .ico .fill { fill: var(--bq-mint); } .sec.dark .ico .brass { stroke: var(--bq-amber-light); }

/* cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards.three { grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card { display: block; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 28px 26px; transition: border-color .2s, transform .2s, box-shadow .2s, background-color .25s, color .25s; color: inherit; }
.card .ico { width: 64px; height: 64px; margin-bottom: 20px; transform-origin: center bottom; animation: icofloat 5s ease-in-out infinite; transition: transform .35s cubic-bezier(.2,.8,.2,1), stroke .25s; }
.cards .card:nth-child(2n) .ico { animation-delay: -1.6s; } .cards .card:nth-child(3n) .ico { animation-delay: -3.1s; }
@keyframes icofloat { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-2.5deg); } 65% { transform: translateY(-2px) rotate(2deg); } }
/* hover: the card turns deep Bodaq teal (white text 6.5:1, the dimmed copy 5.5:1) */
a.card:hover, a.card:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 44px -28px rgba(34,32,33,.25); background: var(--bq-teal-deep); border-color: var(--bq-teal-deep); color: #fff; }
a.card:hover p, a.card:focus-visible p { color: rgba(255,255,255,.88); }
a.card:hover .go, a.card:hover .num, a.card:focus-visible .go, a.card:focus-visible .num { color: #fff; }
a.card:hover .ico, a.card:focus-visible .ico { stroke: #fff; transform: translateY(-6px) scale(1.14) rotate(-3deg); animation-play-state: paused; }
a.card:hover .ico .fill { fill: #fff; fill-opacity: .22; }
a.card:hover .ico .brass { stroke: var(--bq-amber-light); }
a.card:hover .ico .bfill { fill: var(--bq-amber-light); fill-opacity: .35; }
a.card:hover .ico .draw, a.card:hover .ico .bob, a.card:hover .ico .pulse, a.card:hover .ico .slide, a.card:hover .ico .grow, a.card:hover .ico .blink { animation-duration: 1.8s; }
a.card:hover .ico .spin { animation-duration: 2.4s; }
.card h3 { margin-bottom: 8px; }
.card .go { display: inline-block; margin-top: 14px; color: var(--teal-ink); }
.card .num { position: absolute; top: 18px; right: 20px; color: var(--mute); font-variant-numeric: tabular-nums; }
@media (max-width: 940px) { .cards, .cards.three { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cards, .cards.three, .cards.two { grid-template-columns: 1fr; } .card { padding: 24px 22px; } }

/* teal gradient section: Bodaq teal (#07806e) deepening to teal-deep, never lighter than #07806e,
   so the white text on it stays at 4.9:1 or more */
.sec.teal { background-color: var(--teal2); background-image: radial-gradient(ellipse at 10% 100%, rgba(6,106,92,.9), transparent 50%), linear-gradient(160deg, var(--teal2) 0%, var(--bq-teal-deep) 100%); color: #fff; }
.sec.teal h2 { color: #fff; }
.sec.teal .lede, .sec.teal .sec-head p { color: #fff; }
.sec.teal .kicker { color: #fff; } .sec.teal .kicker .ico { width: 24px; height: 24px; }
.sec.teal .kicker .no { border-color: rgba(255,255,255,.75); }
.sec.teal :focus-visible { outline-color: #fff; }
.sec.teal .btn-outline { color: #fff; border-color: rgba(255,255,255,.6); } .sec.teal .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.1); }
.sec.teal .card { background: rgba(255,255,255,.97); border-color: rgba(255,255,255,.6); color: var(--ink); }
.sec.teal .card p { color: var(--soft); }
.sec.teal a.card:hover, .sec.teal a.card:focus-visible { background: var(--bq-teal-deep); border-color: rgba(255,255,255,.55); color: #fff; box-shadow: 0 26px 50px -24px rgba(0,0,0,.45); }
.sec.teal a.card:hover p { color: rgba(255,255,255,.88); }

/* timeline */
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.timeline::before { content: ""; position: absolute; left: 26px; right: 26px; top: 26px; height: 2px; background: var(--line2); }
.timeline::after { content: ""; position: absolute; left: 26px; top: 26px; height: 2px; width: calc(100% - 52px); background: var(--teal); transform-origin: left; animation: tl 6s ease-in-out infinite; }
@keyframes tl { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.tstep { position: relative; padding-top: 70px; }
.tstep .dot { position: absolute; z-index: 1; left: 0; top: 0; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 2px solid var(--line2); display: grid; place-items: center; }
.tstep .dot .ico { width: 26px; height: 26px; }
.tstep .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--teal); opacity: 0; animation: ping 6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ping { 0%, 8% { opacity: 0; transform: scale(.8); } 12% { opacity: .8; transform: scale(1); } 30%, 100% { opacity: 0; transform: scale(1.25); } }
.tstep em { display: block; font-style: normal; color: var(--mute); }
.tstep h3 { margin: 6px 0 8px; }
@media (max-width: 940px) {
  .timeline { grid-template-columns: 1fr; gap: 10px; }
  .timeline::before, .timeline::after { left: 25px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; transform-origin: top; }
  .timeline::after { animation-name: tlv; }
  .tstep { padding: 8px 0 20px 72px; min-height: 64px; }
}
@keyframes tlv { 0% { transform: scaleY(0); } 70%, 100% { transform: scaleY(1); } }

/* section image strips */
.strip { position: relative; margin: 0 0 34px; height: clamp(120px, 16vw, 210px); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(34,32,33,.35); background: var(--wash2); }
.strip img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transform: scale(1.04); animation: stripdrift 18s ease-in-out infinite alternate; }
@keyframes stripdrift { from { object-position: 48% 50%; transform: scale(1.04); } to { object-position: 52% 50%; transform: scale(1.08); } }
.strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,152,131,.22), rgba(9,152,131,0) 45%), linear-gradient(0deg, rgba(34,32,33,.34), rgba(34,32,33,0) 55%); }
.strip figcaption { position: absolute; left: 18px; right: 18px; bottom: 14px; z-index: 1; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }

/* 03 material */
.matgrid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
.matfig { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(34,32,33,.35); }
.matfig img { width: 100%; height: auto; display: block; }
.matfig figcaption { padding: 12px 18px; border-top: 1px solid var(--line); color: var(--mute); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.layers-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.layer-row { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; animation: layerhi 10s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); transition: border-color .2s; }
.layer-row .n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--teal); color: var(--teal-ink); font-size: var(--t-small-size); font-weight: var(--t-semibold); font-variant-numeric: tabular-nums; }
.layer-row p { color: var(--soft); margin: 3px 0 0; }
.layer-row:hover { border-color: var(--teal); }
@keyframes layerhi { 0%, 16%, 100% { border-color: var(--line); box-shadow: none; transform: none; } 5%, 12% { border-color: var(--teal); box-shadow: 0 16px 34px -22px rgba(9,152,131,.7); transform: translateX(8px); } }
.matbelow { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 44px; align-items: start; }
.spec-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 0; }
.spec-list div { background: #fff; padding: 14px 16px; }
.spec-list dt { color: var(--mute); }
.spec-list dd { margin: 4px 0 0; color: var(--ink); }
@media (max-width: 940px) { .matgrid, .matbelow { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .spec-list { grid-template-columns: 1fr; } }

/* 04 applications */
.grid-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid-gallery figure { margin: 0; position: relative; border-radius: 10px; overflow: hidden; background: var(--wash2); }
.grid-gallery img { width: 100%; aspect-ratio: 3 / 3.8; object-fit: cover; display: block; transition: transform .6s; }
.grid-gallery figure:hover img { transform: scale(1.04); }
.grid-gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 16px; background: linear-gradient(180deg, rgba(34,32,33,0), rgba(34,32,33,.82)); color: #fff; display: flex; align-items: flex-end; gap: 12px; }
.grid-gallery figcaption .ico { width: 34px; height: 34px; stroke: #fff; }
.grid-gallery figcaption .ico .fill { fill: #fff; }
.grid-gallery b { display: block; }
.grid-gallery span { display: block; color: rgba(255,255,255,.82); }
@media (max-width: 940px) { .grid-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-gallery { grid-template-columns: 1fr; } .grid-gallery img { aspect-ratio: 4 / 3.4; } }

/* 05 collections */
.coll-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.coll-tile { display: block; color: inherit; }
.coll-media { display: block; position: relative; aspect-ratio: 302 / 180; overflow: hidden; border-radius: 8px; background-color: var(--wash); }
.coll-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
/* pills and chips: 13px Regular, sentence case, no tracking (the kit's rule for chips) */
.coll-media .fam { position: absolute; left: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--ink); }
.coll-tile:hover .coll-media img { transform: scale(1.05); }
.coll-tile:hover strong { color: var(--teal-ink); }
.coll-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 10px; }
.coll-meta em { font-style: normal; color: var(--mute); white-space: nowrap; }
@media (max-width: 940px) { .coll-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }
.coll-more { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 26px; align-items: start; }
.coll-more > * { min-width: 0; }
.coll-more h3 { color: var(--mute); margin-bottom: 12px; }
@media (max-width: 940px) { .coll-more { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 700px) {
  .coll-more .chip-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: calc(-1 * var(--px)); padding-right: var(--px); scrollbar-width: thin; }
  .coll-more .chip-row li { flex: none; }
}
@media (max-width: 560px) { .coll-meta { flex-direction: column; gap: 0; } }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip { display: inline-flex; gap: 6px; align-items: baseline; color: var(--ink); border: 1px solid var(--line2); border-radius: 999px; padding: 8px 15px; font-size: var(--t-small-size); font-weight: var(--t-regular); line-height: 1.3; background: #fff; cursor: pointer; }
.chip:hover { border-color: var(--teal); color: var(--teal-ink); }
/* selected: bodaq.com's pill (mint fill, teal line), text in teal-deep (5.7:1 on mint) */
.chip[aria-pressed="true"], .chip[aria-current="true"] { border-color: var(--teal); color: var(--bq-teal-deep); background: var(--bq-mint); }
.chip em { font-style: normal; color: var(--mute); }

/* search box (home + patterns) */
.search label { display: block; margin-bottom: 8px; color: var(--mute); }
.search .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.search input { min-width: 0; width: 100%; padding: 14px 18px; border: 1px solid var(--line2); border-radius: 999px; background: #fff; color: var(--ink); }
.search input:focus { outline: 2px solid var(--teal2); outline-offset: 1px; border-color: var(--teal); }
.search button { padding: 12px 20px; }

/* pattern browser */
.browser-bar { position: sticky; top: var(--head-h, 67px); z-index: 30; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.browser-bar .wrap { padding: 14px var(--px); max-width: calc(var(--maxw) + 2 * var(--px)); display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.browser-bar .search { flex: 1 1 280px; }
.browser-bar .search label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.browser-bar .search input { padding: 11px 16px; }
.fselect { display: flex; align-items: center; gap: 8px; }
.fselect label { color: var(--mute); }
.fselect select { padding: 10px 34px 10px 14px; border: 1px solid var(--line2); border-radius: 999px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333333' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; -webkit-appearance: none; color: var(--ink); max-width: 100%; }
.toggles { display: flex; gap: 8px; flex-wrap: wrap; }
.tog { position: relative; }
.tog input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tog span { display: inline-block; padding: 9px 14px; border: 1px solid var(--line2); border-radius: 999px; font-size: var(--t-small-size); line-height: 1.3; background: #fff; }
.tog input:checked + span { border-color: var(--teal); color: var(--bq-teal-deep); background: var(--bq-mint); }
.tog input:checked + span::before { content: "\2713  "; }
.tog input:focus-visible + span { outline: 2px solid var(--teal2); outline-offset: 2px; }
.famchips { flex: 1 1 640px; }
.bcount { margin-left: auto; color: var(--mute); white-space: nowrap; }
@media (max-width: 700px) {
  .browser-bar { position: static; }
  .browser-bar .wrap { gap: 10px; }
  .fselect { flex: 1 1 100%; } .fselect select { flex: 1; }
  .bcount { margin-left: 0; flex-basis: 100%; }
  .famchips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .famchips li { flex: none; }
}
.groups { display: grid; gap: 52px; max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: 44px var(--px) var(--py); }
.group { scroll-margin-top: calc(var(--head-h, 67px) + 140px); }
.ghead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 18px; }
.ghead .n { color: var(--mute); }
.ghead a { color: var(--teal-ink); }
.pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; list-style: none; margin: 0; padding: 0; }
.pcard { position: relative; }
.pcard .im { display: block; position: relative; aspect-ratio: 240 / 319; border-radius: 8px; overflow: hidden; background: var(--sw, var(--wash)); transition: transform .3s, box-shadow .3s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.pcard .im img { width: 100%; height: 100%; object-fit: cover; }
.pcard a:hover .im, .pcard a:focus-visible .im { transform: translateY(-3px); box-shadow: 0 18px 30px -20px rgba(34,32,33,.45); }
.pcard a { display: block; color: inherit; }
.pcard a:focus-visible { outline-offset: 4px; }
/* pattern name and code: same type as the main site's pattern cards (small size) */
.pcard strong { display: block; font-size: .875rem; font-weight: var(--t-semibold); margin-top: 10px; line-height: var(--t-h4-lh); }
.pcard .sku { display: block; font-size: .75rem; color: var(--mute); margin-top: 2px; font-variant-numeric: tabular-nums; }
.pcard a:hover strong { color: var(--teal-ink); }
.pbadges { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; flex-wrap: wrap; pointer-events: none; }
.pbadges span { padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.94); font-size: .6875rem; font-weight: var(--t-semibold); line-height: 1.5; text-transform: uppercase; color: var(--ink); }
.pbadges .new { background: var(--teal2); color: #fff; }
.shortbtn { position: absolute; right: 8px; top: 8px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.94); color: var(--ink); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s, transform .15s; }
.shortbtn::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m-add) center / contain no-repeat; mask: var(--m-add) center / contain no-repeat; }
.shortbtn[aria-pressed="true"] { background: var(--teal2); color: #fff; border-color: var(--teal2); }
.shortbtn[aria-pressed="true"]::before { -webkit-mask-image: var(--m-ok); mask-image: var(--m-ok); }
.shortbtn:hover { transform: scale(1.08); }
@media (max-width: 1100px) { .pgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: 18px 10px; } }
@media (max-width: 460px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
/* per-collection preview: site.js shows the first rows of each group and a "Show more" button */
.gmore { display: flex; width: fit-content; max-width: 100%; margin: 22px auto 0; }
.gmore em { font-style: normal; color: var(--mute); }
.noresults { max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: 40px var(--px) 0; color: var(--soft); }

/* shortlist tray */
.tray { position: fixed; left: 50%; bottom: 16px; z-index: 60; transform: translateX(-50%); width: min(calc(100% - 24px), 860px); background: var(--dark); color: #fff; border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); padding: 12px 12px 12px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tray p { color: rgba(255,255,255,.85); margin: 0; flex: 1 1 200px; min-width: 0; }
.tray p b { color: #fff; }
.tray .codes { display: block; color: rgba(255,255,255,.66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tray .btn { padding: 10px 16px; }
.tray .btn-clear { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.tray { transition: opacity .25s ease, transform .25s ease, visibility .25s; }
.tray.away { opacity: 0; visibility: hidden; transform: translate(-50%, 24px); pointer-events: none; }

/* 06 performance */
/* table: column heads use the kit's spec label, cells its card copy, row heads Regular */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.tbl th { text-align: left; padding: 12px 16px; font-size: var(--t-spec-label-size); line-height: var(--t-spec-label-lh); font-weight: var(--t-regular); text-transform: uppercase; color: var(--mute); background: var(--wash); border-bottom: 1px solid var(--line); }
.tbl td, .tbl tbody th { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--soft); text-align: left; font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); font-weight: var(--t-light); text-transform: none; background: #fff; }
.tbl tbody th { color: var(--ink); font-weight: var(--t-regular); }
.tbl tr:last-child td, .tbl tr:last-child th { border-bottom: 0; }
@media (max-width: 700px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl tbody th { display: block; width: 100%; }
  .tbl tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl td, .tbl tbody th { border: 0; padding: 3px 16px; }
  .tbl td::before { content: attr(data-label); display: block; font-size: var(--t-spec-label-size); line-height: var(--t-spec-label-lh); font-weight: var(--t-regular); text-transform: uppercase; color: var(--mute); margin-top: 4px; }
}
.badges { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.badge { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.badge .ico { width: 40px; height: 40px; }
.badge p { color: var(--soft); margin-top: 2px; }
@media (max-width: 940px) { .badges { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .badges { grid-template-columns: 1fr; } }

/* 07 guides: document list */
.docs { margin-top: 30px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.docs h3 { color: var(--mute); margin-bottom: 12px; }
.docs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 24px; }
.docs a { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: var(--t-footer-link-size); line-height: var(--t-footer-link-lh); }
.docs a:hover { color: var(--teal-ink); }
.docs a span { margin-left: auto; color: var(--mute); white-space: nowrap; }
@media (max-width: 940px) { .docs ul { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .docs ul { grid-template-columns: 1fr; } }

/* 07 guides: "What Is Bodaq Film?", the first guide (intro and link beside the four basics) */
.guide-feature { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 48px); align-items: start; margin-bottom: 18px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 30px 70px -48px rgba(34,32,33,.35); }
.guide-feature .ico { width: 64px; height: 64px; margin-bottom: 18px; }
.gf-intro .t-eyebrow { color: var(--teal-ink); margin: 0 0 8px; }
.gf-intro h3 { margin-bottom: 10px; }
.gf-intro .btns { margin-top: 22px; align-items: center; }
.gf-intro .t-link { color: var(--teal-ink); }
.gf-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gf-facts li { background: #fff; padding: 18px 20px; }
.gf-facts h4 { margin-bottom: 6px; }
@media (max-width: 940px) { .guide-feature { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .gf-facts { grid-template-columns: 1fr; } }

/* architectural film: why people choose it (headline figure, title, line) */
.whys { list-style: none; margin: 0; padding: 0; }
.whys .t-stat { display: block; color: var(--teal-ink); margin-bottom: 16px; }

/* projects: photo, space, title and films; three across, two on tablets, one on phones */
.proj-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 22px; }
.proj { margin: 0; }
.proj-img { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--wash2); border: 1px solid var(--line); }
.proj-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj figcaption { display: grid; gap: 4px; margin-top: 12px; }
.proj figcaption .t-eyebrow { color: var(--teal-ink); }
.proj figcaption .t-small { color: var(--mute); }
.proj-group + .proj-group { margin-top: 52px; }
.proj-group > h3 { margin-bottom: 18px; }
@media (max-width: 940px) { .proj-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .proj-grid { grid-template-columns: 1fr; } }

/* footer contact line: state and phone */

/* 08 faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
/* question: the main site's FAQ question (17 to 18px Semibold, line height 1.375) */
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; font-size: var(--t-intro-size); font-weight: var(--t-semibold); line-height: 1.375; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.5px; background: var(--teal2); transition: transform .2s; }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0); }
.faq details > div { padding: 0 44px 22px 0; max-width: 76ch; }
.faq details a { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }

/* 09 order band */
.sec.buy .btns { flex-direction: column; align-items: stretch; gap: 12px; min-width: 320px; }
.sec.buy .btns .btn { padding-left: 24px; padding-right: 24px; }
.ulink { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.5); }
.ulink:hover { text-decoration-color: #fff; }
@media (max-width: 940px) { .sec.buy .btns { min-width: 0; width: 100%; max-width: 420px; } }

/* 10 start: form */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { color: var(--mute); }
.field label i { font-style: normal; color: var(--err); }
.field input, .field select, .field textarea { padding: 13px 16px; border: 1px solid var(--line2); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; min-width: 0; }
.field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23333333' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 38px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--teal2); outline-offset: 1px; border-color: var(--teal); }
.field [aria-invalid="true"] { border-color: var(--err); }
.field .err { color: var(--err); }
.field .hint { color: var(--mute); }
.field textarea { min-height: 130px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { grid-column: 1 / -1; color: var(--mute); }
.formdone { grid-column: 1 / -1; border: 1px solid var(--teal); border-radius: 12px; padding: 22px; background: linear-gradient(180deg, rgba(9,152,131,.07), #fff); }
.formdone h3 { margin-bottom: 6px; }
.formdone pre { margin: 16px 0 0; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 8px; background: #fff; color: var(--soft); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto; }
.formdone .btns { margin-top: 16px; }
.start-side .cards { margin-top: 28px; }
.copyline { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }

/* visualizer page */
.vizframe { display: block; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -48px rgba(34,32,33,.5); color: inherit; }
.vizbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--wash); }
.vizbar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); display: block; }
.vizbar span { flex: 1; min-width: 0; margin-left: 8px; padding: 5px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vizbar em { font-style: normal; color: var(--teal-ink); white-space: nowrap; }
.vizshot { position: relative; }
.vizshot img { width: 100%; height: auto; }
.vizframe:hover .vizbar em { color: var(--ink); }
.vizcap { margin-top: 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* the screenshot is the visualizer's room view (940 x 800), shown at its own width */
.vizfig { max-width: 940px; margin: 0 auto; }
/* .vizsoon: one line and the scope button in place of "Open" */
.sec-head > .vizsoon { max-width: 380px; display: grid; gap: 14px; justify-items: start; }

/* footer */
.site-foot { background: var(--dark); color: #fff; }
.foot-inner { max-width: calc(var(--maxw) + 2 * var(--px)); margin: 0 auto; padding: 64px var(--px) 36px; }
/* five columns: the brand, then Services, Reference, Patterns and Contact. Up to 1300 px the brand
   takes its own row above the four (the email needs a 190 px column) */
.grid-footer { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 44px; margin-bottom: 48px; }
@media (max-width: 1300px) { .grid-footer { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; } .grid-footer > :first-child { grid-column: 1 / -1; } }
.grid-footer > * { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.grid-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot-blurb { margin: 14px 0 0; color: rgba(255,255,255,.66); max-width: 34ch; }
.foot-h { color: rgba(255,255,255,.62); }
.footer-link { color: rgba(255,255,255,.84); }
.footer-link:hover { color: #fff; text-decoration: underline; }
.footer-family { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.footer-family ul { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 0; padding: 0; }
.footer-family .footer-link { color: rgba(255,255,255,.74); }
.footer-family .here { color: #fff; font-weight: var(--t-semibold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px; display: flex; justify-content: space-between; gap: 12px 24px; color: rgba(255,255,255,.62); flex-wrap: wrap; }
.foot-hy { height: 18px; width: auto; opacity: .8; margin-top: 14px; filter: invert(1) brightness(1.4); }
/* Contact column: the email may break rather than push the column wider; "Ask the automated assistant"
   looks like the footer links, with a 44px tall target that reaches into the gaps around it */
.foot-mail { overflow-wrap: anywhere; }
.foot-loc { color: rgba(255,255,255,.62); }
.foot-ask { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; padding: 0; border: 0; background: none; color: rgba(255,255,255,.84); text-align: left; cursor: pointer; }
.foot-ask:hover { color: #fff; text-decoration: underline; }
@media (max-width: 940px) { .grid-footer { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid-footer { grid-template-columns: 1fr; gap: 32px; } }

/* ------------------------------------------------------------------ assistant (assets/js/assistant.js) */
/* The launcher: a teal pill at the bottom right (an icon-only circle on phones). It sits below the
   sticky header in the stacking order (45 < 50) and hides while the phone menu is open (.nav-open), so
   it never covers the menu. It steps aside (.is-tucked) while it would sit over the scope form, and
   --ask-lift (set by the script) raises it above the shortlist tray on the patterns page. White text
   sits on --teal2, as on every filled button. */
.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 22px 0 14px; border: 2px solid #fff; border-radius: 999px; background: var(--teal2); color: #fff; box-shadow: 0 18px 40px -16px rgba(34,32,33,.6); cursor: pointer; }
.ask-launch .ico { width: 30px; height: 30px; stroke: #fff; stroke-width: 2.6; }
.ask-launch:hover { background: var(--bq-teal-deep); }
.ask-launch.is-tucked, .nav-open .ask-launch { opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; }
/* room under the footer's last line, so the launcher never sits on it at the end of the page */
.has-ask .foot-inner { padding-bottom: 96px; }
@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; }
  .has-ask .foot-inner { padding-bottom: 104px; }
}
/* 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: 16px; background: #fff; color: var(--ink); box-shadow: 0 40px 90px -30px rgba(34,32,33,.6); overflow: hidden; }
.ask[open] { display: flex; flex-direction: column; }
.ask::backdrop { background: rgba(34,32,33,.28); }
.ask :focus-visible { outline-offset: 2px; }
.ask-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 16px; background-color: var(--dark); color: #fff; background-image: radial-gradient(ellipse at 100% 0%, rgba(9,152,131,.42), transparent 60%); }
.ask-head :focus-visible { outline-color: var(--bq-mint); }
.ask-badge { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(200,250,235,.55); }
.ask-badge .ico { width: 26px; height: 26px; stroke: var(--bq-mint); stroke-width: 2.4; }
.ask-head-t { min-width: 0; }
.ask-title { color: #fff; }
.ask-title:focus { outline: none; }
.ask-desc { margin-top: 2px; color: rgba(255,255,255,.78); }
.ask-close { flex: none; margin-left: auto; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #fff; cursor: pointer; }
.ask-close:hover { background: rgba(255,255,255,.12); }
.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(--wash); }
.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: 14px; }
.is-bot .ask-bubble { background: #fff; border: 1px solid var(--line); border-top-left-radius: 4px; }
.is-bot .ask-bubble p, .is-bot .ask-bubble li { color: var(--ink); }
.ask-bubble p + p, .ask-bubble .ask-list + p { margin-top: 8px; }
.is-you .ask-bubble { background: var(--teal2); color: #fff; border-top-right-radius: 4px; font-weight: var(--t-regular); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-list { margin: 8px 0 0; padding-left: 20px; }
.ask-list li + li { margin-top: 4px; }
.is-bot .ask-bubble .ask-src { margin-top: 10px; color: var(--mute); }
.ask-src-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ask-src-link:hover { color: var(--bq-teal-deep); }
.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: 1.5px solid var(--teal); border-radius: 8px; background: #fff; color: var(--teal-ink); text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.ask-act:hover, .ask-act.is-primary { background: var(--teal2); border-color: var(--teal2); color: #fff; }
.ask-act.is-primary:hover { background: var(--bq-teal-deep); border-color: var(--bq-teal-deep); }
.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(--mute); opacity: .6; }
.ask-chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; border-top: 1px solid var(--line); background: #fff; }
.ask-chip { min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--teal); border-radius: 999px; background: #fff; color: var(--teal-ink); font-size: var(--t-label-size); font-weight: var(--t-regular); line-height: 1.3; text-align: left; cursor: pointer; }
.ask-chip:hover { background: var(--teal2); border-color: var(--teal2); color: #fff; }
.ask-form { flex: none; display: flex; gap: 8px; padding: 10px 16px 8px; background: #fff; }
.ask-input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 11px 14px; border: 1.5px solid #8a8889; border-radius: 10px; background: #fff; color: var(--ink); }
.ask-input::placeholder { color: var(--mute); opacity: 1; }
.ask-input:focus { outline: 2px solid var(--teal2); outline-offset: 1px; border-color: var(--teal); }
.ask-send { flex: none; padding: 12px 20px; }
.ask-note { flex: none; padding: 0 16px 14px; background: #fff; color: var(--mute); }
@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 (phones and short screens), so the conversation keeps
   the room */
@media (max-width: 640px), (max-height: 560px) {
  .ask-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-padding-inline: 16px; scrollbar-width: none; padding-top: 8px; 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): the head gets compact, the conversation keeps
   at least 140px (120px under 320px tall) and the whole panel scrolls when that leaves too little
   room, with the head and its close button held at the top. */
@media (max-height: 560px) {
  .ask { overflow-y: auto; overscroll-behavior: contain; }
  .ask-head { position: sticky; top: 0; z-index: 1; padding-top: 6px; padding-bottom: 6px; }
  .ask-badge { width: 34px; height: 34px; } .ask-badge .ico { width: 22px; height: 22px; }
  .ask-desc { display: none; }
  .ask-log { min-height: 140px; }
  .ask-form { padding-top: 8px; padding-bottom: 6px; }
  .ask-note { padding-bottom: 10px; }
}
@media (max-height: 560px) and (min-width: 641px) {
  .ask { top: max(8px, env(safe-area-inset-top)); bottom: max(8px, env(safe-area-inset-bottom)); height: auto; }
}
@media (max-height: 320px) { .ask-log { min-height: 120px; } }
@media (prefers-reduced-motion: no-preference) {
  .ask-launch { transition: opacity .2s, transform .2s, visibility 0s linear 0s, background-color .15s; }
  .ask-launch.is-tucked, .nav-open .ask-launch { 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; } }
/* the note the hand-off puts above the scope form, clear of the sticky header when scrolled to */
.handoff-note { margin: 0; padding: 14px 16px; border: 1px solid var(--teal); border-radius: 10px; background: #fff; color: var(--ink); scroll-margin-top: calc(var(--head-h, 67px) + 16px); }

/* animated icon motion */
.ico .draw { stroke-dasharray: 80; stroke-dashoffset: 80; animation: draw 4s ease-in-out infinite; }
.ico .d2 { animation-delay: .3s; } .ico .d3 { animation-delay: .6s; }
@keyframes draw { 0%, 15% { stroke-dashoffset: 80; } 45%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 80; } }
.ico .spin { transform-box: fill-box; transform-origin: center; animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ico .bob { transform-box: fill-box; transform-origin: center; animation: bob 3.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ico .pulse { transform-box: fill-box; transform-origin: center; animation: pulse 3.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: .75; } }
.ico .slide { animation: slide 4s ease-in-out infinite; }
@keyframes slide { 0%, 20%, 100% { transform: translateX(0); } 50%, 70% { transform: translateX(5px); } }
.ico .grow { transform-box: fill-box; transform-origin: bottom; animation: grow 4s ease-in-out infinite; }
.ico .g2 { animation-delay: .2s; } .ico .g3 { animation-delay: .4s; }
@keyframes grow { 0%, 15% { transform: scaleY(.35); } 45%, 80% { transform: scaleY(1); } 100% { transform: scaleY(.35); } }
.ico .blink { animation: blink 4s ease-in-out infinite; } .ico .b2 { animation-delay: .4s; } .ico .b3 { animation-delay: .8s; } .ico .b4 { animation-delay: 1.2s; }
@keyframes blink { 0%, 60%, 100% { fill-opacity: .1; } 20%, 40% { fill-opacity: .5; } }
.ico .layer { transform-box: fill-box; transform-origin: center; animation: lyr2 7s ease-in-out infinite; }
.ico .l1 { animation-name: lyr1; } .ico .l3 { animation-name: lyr3; }
@keyframes lyr1 { 0%, 20%, 80%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(-7px); } }
@keyframes lyr2 { 0%, 20%, 80%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(-2px); } }
@keyframes lyr3 { 0%, 20%, 80%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(5px); } }
.count { font-variant-numeric: tabular-nums; }

/* reduced motion: every animation and transition stops; icons show their finished state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ico .draw { stroke-dashoffset: 0; }
  .timeline::after { transform: none; }
}

@media print {
  .site-head, .tray, .navmob, .browser-bar, .strip, .ask-launch, .ask { display: none !important; }
  .sec { padding: 24px 0; background: none !important; }
}