/* Cambrian Works — shared stylesheet
   Slate navy, cyan-teal links, copper for hardware accents.
   Type: At Aero headings, Fira Sans body; both self-hosted in theme/fonts/ (see README there re: At Aero licence). */

@font-face { font-family: "At Aero"; src: url("../fonts/AtAero-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "At Aero"; src: url("../fonts/AtAero-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "At Aero"; src: url("../fonts/AtAero-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "At Aero"; src: url("../fonts/AtAero-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url("../fonts/FiraSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --bg:     #0a1a38;   /* page: saturated dark blue (logo blue, darker) */
  --bg2:    #10264d;   /* curves */
  --bg3:    #06122a;   /* footer, wells */
  --barbg:  #83491f;   /* nav bar bottom colour (wave SVG fill below must match) */
  --bartop: #d99c69;   /* nav bar top colour */
  --barmid: #b46f3b;   /* nav bar middle (porthole-ring copper) */
  --barink: #241709;   /* nav text on copper */
  --tile1:  #102449;   /* tiles cycle through these */
  --tile2:  #132a53;
  --tile3:  #0e2143;
  --tile4:  #162e58;
  --ink:    #e8edf3;
  --mute:   #93a3b7;
  --rule:   #1f3a66;
  --link:   #3aa8ff;
  --link2:  #8ccfff;
  --copper: #c7844f;
  --copper-hi: #eab98d;
  --copper-lo: #7a4424;
  --radius: 16px;
  --shadow: 0 6px 18px rgba(0, 0, 0, .35);
  --sans: "Fira Sans", "Segoe UI", system-ui, sans-serif;
  --head: "At Aero", var(--sans);
  --wrap: 1120px;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; position: relative; overflow-x: hidden; background: var(--bg); color: var(--ink);
  font: 400 16px/1.55 var(--sans); overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 1.5rem; }

/* Type: light, large headlines; small quiet body */
h1, h2, h3 { font-family: var(--head); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-weight: 600; font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); letter-spacing: -.005em; }
h2 { font-weight: 600; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); }
h3 { font-weight: 600; font-size: 1.02rem; }
p  { margin: 0 0 1em; max-width: var(--measure); text-wrap: pretty; }
.lede  { font-size: 1.05rem; color: #c9d3de; }
.muted { color: var(--mute); }
.small { font-size: .85rem; }

/* Links: color only; underline appears on hover */
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link2); text-decoration: underline; text-underline-offset: .2em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }

/* Header: frozen, logo + left-aligned nav, wavy bottom edge with shadow */
.site-head { position: sticky; top: 0; z-index: 10; background: linear-gradient(180deg, var(--bartop), var(--barmid) 55%, var(--barbg));
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.site-head::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 16px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0,0 H1200 V6 C1060,26 900,24 740,12 C580,0 420,2 290,14 C170,25 70,22 0,10 Z' fill='%2383491f'/%3E%3C/svg%3E") no-repeat;
  background-size: 100% 100%; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2.5rem; min-height: 52px; padding-top: 12px; }  /* items stay centred at 32px */
.logo { display: flex; align-items: center; gap: .6rem; padding: 0; text-decoration: none; }
.logo:hover { text-decoration: none; }
/* Wordmark: official CW artwork (images-brand/wordmark.svg, white text + blue rule; wordmark_dark.svg for light backgrounds) */
.logo img.wordmark { height: 24px; width: auto; margin-top: 4px; }
.logo img { height: 33px; width: auto; filter: drop-shadow(0 1px .5px rgba(0, 0, 0, .75)); }
.nav { display: flex; gap: .9rem; }
/* Nav: pale copper text, drop shadow like the logo; active page framed by two copper bars */
.nav a { position: relative; font-family: var(--head); font-size: .95rem; letter-spacing: .03em; color: #f6dcc0; padding: .3rem .6rem;
  text-shadow: 0 1px .5px rgba(0, 0, 0, .75); }
.nav a::before, .nav a::after { content: ""; position: absolute; top: 50%; width: 3px; height: 1.15em; margin-top: -.58em; border-radius: 1px;
  background: #a9521f; box-shadow: 0 1px .5px rgba(0, 0, 0, .75); opacity: 0; transition: opacity .15s; }
.nav a::before { left: 0; }
.nav a::after { right: 0; }
.nav a:hover { color: #fff4e6; text-decoration: none; }
.nav a:hover::before, .nav a:hover::after { opacity: .5; }
.nav a[aria-current="page"]::before, .nav a[aria-current="page"]::after { opacity: 1; }
.nav-btn { display: none; }

/* Buttons: raised pills */
.btns { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.btn { display: inline-block; font: 500 1rem var(--sans); letter-spacing: .02em; text-decoration: none; padding: .65rem 1.5rem;
  border-radius: 999px; color: var(--ink); background: linear-gradient(180deg, #2f4460, #22334a); border: 1px solid #3a5270;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); transition: transform .12s, box-shadow .12s; }
.btn:hover { color: #fff; text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 7px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 2px rgba(0, 0, 0, .3); }
.btn.primary { color: #0d1a26; background: linear-gradient(180deg, #6cc2ff, #2a96ff); border-color: #1f86e6; }
.btn.primary:hover { color: #0d1a26; }
.btn.small { font-size: .9rem; padding: .45rem 1.1rem; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } .btn:hover, .btn:active { transform: none; } }

/* Decorative curves (generated SVG) behind content */
.page-art { position: absolute; top: 72px; right: 0; width: min(52vw, 720px); z-index: 0; pointer-events: none; }
.page-art svg { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent); mask-image: linear-gradient(to bottom, #000 65%, transparent); }
.page-art .shape { fill: var(--bg2); }
.page-art .dot { fill: var(--link); }
/* Nebula photo, upper right, fading to the page background along a 45° diagonal.
   Replaces the generated curve art (.page-art) for now. */
.page-photo { position: absolute; top: 0; right: 0; width: min(62vw, 920px); aspect-ratio: 16 / 10; z-index: 0; pointer-events: none;
  background: center / cover no-repeat; opacity: .95;
  /* diagonal fade, intersected with fades to the left and bottom edges so no edge shows */
  -webkit-mask-image: linear-gradient(to bottom left, #000 10%, rgba(0,0,0,.55) 35%, transparent 65%),
                      linear-gradient(to left, #000 55%, transparent 98%), linear-gradient(to bottom, #000 45%, transparent 96%);
  -webkit-mask-composite: source-in, source-in;
          mask-image: linear-gradient(to bottom left, #000 10%, rgba(0,0,0,.55) 35%, transparent 65%),
                      linear-gradient(to left, #000 55%, transparent 98%), linear-gradient(to bottom, #000 45%, transparent 96%);
          mask-composite: intersect; }
main, .site-foot { position: relative; z-index: 1; }
main { padding-block: 3.5rem 1rem; }

/* Tiles: rounded blocks, shades cycle so neighbours differ slightly */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; margin: 1.25rem 0 0; }
.tiles.two { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); max-width: 820px; }
.tile { --tile: var(--tile1); display: block; background: var(--tile); border-radius: var(--radius); padding: 1.25rem 1.3rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .04); color: var(--ink); }
.tiles > .tile:nth-child(4n+2) { --tile: var(--tile2); }
.tiles > .tile:nth-child(4n+3) { --tile: var(--tile3); }
.tiles > .tile:nth-child(4n+4) { --tile: var(--tile4); }
.tile p { font-size: .95rem; color: #c9d3de; }
.tile p:last-child { margin-bottom: 0; }
.tile h3 { margin-bottom: .35em; }
a.tile { text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
a.tile:hover h3 { color: var(--link2); }
@media (prefers-reduced-motion: reduce) { a.tile { transition: none; } a.tile:hover { transform: none; } }
.panel { --tile: var(--tile1); }
.chips { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.chip { padding: .9rem 1.1rem; font-size: .95rem; border-radius: 12px; }
h3.sub { margin-top: 2rem; color: var(--mute); font-weight: 600; }
.more { margin-top: 1rem; }

/* Product tiles */
.ptiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.ptile, .prod { text-align: center; }
.ptile .porthole, .prod .porthole { margin: .25rem auto 1rem; }
.prods { margin-top: 1.5rem; }
.prod { text-align: left; }
.prod .porthole { margin-left: 0; }
.status { color: var(--mute); font-size: .85rem; margin: -.2rem 0 .7rem; }
.specs { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1rem; margin: 0 0 .9rem; font-size: .9rem; }
.specs dt { color: var(--mute); }
.specs dd { margin: 0; font-variant-numeric: tabular-nums; }
details { margin: 0 0 1rem; font-size: .95rem; }
summary { cursor: pointer; color: var(--link); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: " +"; }
details[open] summary::after { content: " −"; }
details[open] summary { margin-bottom: .5rem; }

/* Porthole: thin copper ring, recessed glass */
.porthole { position: relative; border-radius: 50%; aspect-ratio: 1; padding: 3.5%; max-width: 100%;
  background: linear-gradient(145deg, var(--copper-hi), var(--copper) 40%, var(--copper-lo) 100%);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .35); }
.porthole .glass { width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #1c3a6e, var(--bg3) 75%);
  box-shadow: inset 0 6px 16px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .35); }
.porthole img { width: 100%; height: 100%; object-fit: contain; padding: 10%; }
.porthole::after { content: ""; position: absolute; inset: 3.5%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 38%); }
.porthole.md { width: 170px; padding: 6px; }
.porthole.md::after { inset: 6px; }

/* GigFamily scale row */
.scale { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 2rem; justify-content: start; margin: 1.75rem 0 .5rem; }
.scale figure { margin: 0; }
.scale .porthole { width: 100%; }
.scale figcaption { font-family: var(--head); font-size: 1rem; margin-top: .75rem; text-align: center; }

/* Comparison table */
.tablewrap { overflow-x: auto; margin-top: 1.25rem; max-width: 900px; padding: .5rem 1rem; }
.compare { border-collapse: collapse; font-size: .95rem; min-width: 560px; width: 100%; }
.compare th, .compare td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-family: var(--head); font-weight: 500; border-bottom: 2px solid var(--copper); }
.compare tbody th { color: var(--mute); font-weight: 400; white-space: nowrap; }
.compare td { font-variant-numeric: tabular-nums; }
.compare .tbd { color: var(--mute); font-style: italic; }

/* Size graphics (outline / iso) */
.sizefig { display: block; width: 100%; max-width: 640px; height: auto; margin: 1.5rem 0 .25rem; }
.sizefig rect, .sizefig polygon { stroke: var(--link); stroke-width: 1.25; stroke-linejoin: round; fill: var(--link); }
.sizefig .t0 { fill: #1b2c40; fill: color-mix(in srgb, var(--link) 8%, var(--bg)); }
.sizefig .t1 { fill: #1f344b; fill: color-mix(in srgb, var(--link) 16%, var(--bg)); }
.sizefig .t2 { fill: #243c56; fill: color-mix(in srgb, var(--link) 24%, var(--bg)); }
.sizefig .top { fill: #28445f; fill: color-mix(in srgb, var(--link) 30%, var(--bg)); }
.sizefig .l { fill: #1d3046; fill: color-mix(in srgb, var(--link) 12%, var(--bg)); }
.sizefig text { font-family: var(--head); text-anchor: end; }
.sizefig .s { text-anchor: start; }
.sizefig .n { fill: var(--ink); font-size: 13px; }
.sizefig .d { fill: var(--mute); font-size: 11px; }
.sizefig .n.s { font-size: 15px; } .sizefig .d.s { font-size: 12px; }
.sizefig .lead { stroke: var(--mute); stroke-width: 1; }

/* QR landing pages */
.product.solo { display: grid; grid-template-columns: 240px 1fr; gap: 2.5rem; align-items: center; }
.product.solo > .porthole { width: 240px; padding: 8px; }
.product.solo > .porthole::after { inset: 8px; }

/* News tiles */
.post { display: flex; flex-direction: column; }
.post img { width: calc(100% + 2.6rem); max-width: none; margin: -1.25rem -1.3rem 1rem; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius) var(--radius) 0 0; }
.post .post-art { width: calc(100% + 2.6rem); margin: -1.25rem -1.3rem 1rem; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0; background: var(--bg3); }
.post .post-art svg { display: block; width: 100%; height: 100%; }
.post .post-art.flip svg { transform: scaleX(-1); }
.post .post-art .shape { fill: var(--bg2); }
.post .post-art .dot { fill: var(--link); }
.post .meta { color: var(--mute); font-size: .82rem; margin-bottom: .4rem; }
.post p:not(.meta) { font-size: .85rem; }
.nowrap { white-space: nowrap; }
.post h3 { font-size: 1.08rem; font-weight: 500; }
.year { margin-top: 2.5rem; color: var(--mute); font-weight: 300; }

/* Video, documents */
.video { aspect-ratio: 16 / 9; max-width: 720px; margin: 1rem 0; background: var(--bg3); border-radius: 12px; overflow: hidden; }
.video iframe { width: 100%; height: 100%; border: 0; display: block; }
.doclist { list-style: none; margin: .25rem 0 0; padding: 0; }
.doclist li { padding: .3rem 0; }
.doclist .muted { display: block; font-size: .8rem; }

/* Contact */
.contact { display: grid; grid-template-columns: max-content 1fr; gap: .75rem 2rem; margin: 1.25rem 0 0; max-width: 640px; }
.contact dt { color: var(--mute); }
.contact dd { margin: 0; }
.mission { max-width: 720px; font-size: 1.1rem; }
.mission p { color: var(--ink); }
address { font-style: normal; }

/* Markdown pages */
.prose > h1 + p { margin-top: 0; }
.prose h2 { margin-top: 2.5rem; }
.prose ul:not([class]) { max-width: var(--measure); padding-left: 1.1rem; }
.prose ul:not([class]) li { margin-bottom: .5rem; }
.postpage { max-width: 760px; }
.postpage img { margin: 1rem 0; border-radius: 12px; }
.postpage .meta { color: var(--mute); font-size: .9rem; }

/* Footer: small, quiet, Contact in right third */
.site-foot { background: var(--bg3); margin-top: 4rem; font-size: .85rem; color: var(--mute); }
.foot-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; padding-block: 1.25rem; }
.foot-row > :last-child { text-align: right; }

/* Phone */
@media (max-width: 720px) {
  body { font-size: 15.5px; }
  .wrap { padding-inline: 1.1rem; }
  .nav-btn { display: inline-block; margin-left: auto; font-family: var(--head); font-size: 1.05rem; letter-spacing: .03em; color: #f6dcc0;
    text-shadow: 0 1px .5px rgba(0, 0, 0, .75); cursor: pointer;
    background: linear-gradient(180deg, #8c4a24, #6b3414); border: 1px solid #52260c; border-radius: 999px; padding: .4rem 1.1rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 220, 180, .22); }
  .nav-btn:hover { color: #fff4e6; }
  .nav-btn[aria-expanded="true"] { background: linear-gradient(180deg, #6b3414, #7d3f1c); color: #fff4e6; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); }
  .nav { flex-basis: 100%; flex-direction: column; gap: 0; padding-bottom: .5rem; }
  .js .nav { display: none; }
  .js .site-head.open .nav { display: flex; }
  .nav a { font-size: 1.05rem; color: #f6dcc0; padding: .85rem .75rem; border-bottom: 1px solid rgba(0, 0, 0, .15); border-left: 3px solid transparent; }
  .nav a:hover { border-bottom-color: rgba(0, 0, 0, .15); }
  .nav a:active { background: rgba(0, 0, 0, .08); }
  .nav a[aria-current="page"] { border-bottom-color: rgba(0, 0, 0, .15); border-left-color: #a9521f; }
  .nav a::before, .nav a::after { display: none; }
  .page-art { width: 95vw; opacity: .5; }
  .page-photo { width: 100vw; opacity: .8; }
  .ptiles { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .ptile { padding: 1rem .75rem; }
  .ptile .porthole.md { width: 118px; padding: 4px; }
  .ptile .porthole.md::after { inset: 4px; }
  .ptile p { font-size: .85rem; }
  main { padding-top: 2.5rem; }
  .scale { gap: .75rem; }
  .scale figcaption { font-size: .85rem; }
  .compare { min-width: 0; font-size: .85rem; }
  .compare th, .compare td { padding: .45rem .35rem; }
  .compare tbody th { white-space: normal; }
  .tablewrap { padding: .25rem .5rem; }
  .product.solo { grid-template-columns: 1fr; gap: 1.25rem; }
  .product.solo > .porthole { margin-inline: auto; }
  .btns .btn { flex: 1 1 100%; text-align: center; padding: .85rem 1rem; }
  .contact { grid-template-columns: 1fr; gap: .15rem; }
  .contact dd { margin-bottom: .9rem; }
  .foot-row { grid-template-columns: 1fr; }
  .foot-row > :nth-child(2), .foot-row > :last-child { text-align: left; }
}

/* Team grid: photos are pre-cropped 400x400 greyscale; CSS only rounds and sizes them */
.team { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1rem; margin: 1rem 0 2rem; align-items: start; }  /* 4 columns like the tiles above; 2 on tablets, 1 on phones */
.team figure { min-width: 0; margin: 0; padding-inline: 1.1rem; text-align: center; }
.team .porthole { width: 100%; max-width: 150px; margin: 0 auto .7rem; padding: 5px; }
.team .porthole::after { inset: 5px; }
.team .porthole img { object-fit: cover; padding: 0; }  /* team photos are pre-converted to black and white with matched face levels (design/team_color holds the colour masters) */
.team .initials { display: grid; place-items: center; width: 100%; height: 100%; font: 300 2.1rem var(--head); letter-spacing: .04em; color: #8fb4e8; }
.team figcaption b { display: block; font: 500 .98rem/1.25 var(--head); }
.team figcaption span { display: block; color: var(--mute); font-size: .82rem; line-height: 1.3; }
.team .bio { margin: .6rem 0 0; text-align: left; color: var(--mute); font-size: .82rem; line-height: 1.45; }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .team { grid-template-columns: 1fr; max-width: 380px; margin-inline: auto; } }

/* QR button: scannable code that opens an enlarged view (for showing at a booth) */
.qrbtn { display: inline-flex; align-items: center; gap: .9rem; margin-top: 1.25rem; padding: .6rem .9rem .6rem .6rem; border-radius: 14px;
  background: var(--tile2); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.qrbtn:hover { text-decoration: none; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.qrcode { display: block; background: #fff; border-radius: 8px; border: 2px solid var(--copper); padding: 4px; }
.qrcode svg { display: block; width: 100%; height: 100%; }
.qrcode path { fill: #0a1a38; }
.qrbtn .qrcode { width: 88px; height: 88px; }
.qrlabel { font-size: .85rem; color: var(--mute); line-height: 1.35; }
.qrlabel b { display: block; font: 400 1rem var(--head); color: var(--ink); }
.qrbig { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; background: rgba(4, 10, 24, .88); text-align: center; }
.qrbig:target { display: grid; }
.qrbig .qrcode { width: min(80vw, 420px); height: min(80vw, 420px); margin: 0 auto 1rem; }
.qrbig p { margin: 0 auto; color: var(--ink); font: 400 1.2rem var(--head); }
.qrbig .close { position: absolute; inset: 0; }

/* Home */
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); line-height: 1.08; margin-bottom: .6em; }
.hero .lede { max-width: 58ch; }
.pullquote { margin: 2.75rem 0; padding: .3rem 0 .3rem 1.4rem; border-left: 3px solid var(--copper); max-width: 34ch;
  font: 300 clamp(1.3rem, 1.05rem + 1vw, 1.75rem)/1.3 var(--head); color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 330px); gap: 2.5rem; align-items: start; margin: 2.5rem 0 1rem; }
.split h2 { margin-top: 0; }
.feature { width: 100%; border-radius: var(--radius); border: 1px solid #3a5270; box-shadow: var(--shadow); }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; gap: 1.25rem; } }

/* Contact form */
.cform { display: grid; gap: 1rem; max-width: 640px; }
.cform fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: .6rem; }
.cform legend { font: 400 1.05rem var(--head); color: var(--ink); margin-bottom: .4rem; }
.cform .intgrid { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: .3rem 1.25rem; }
.cform .intgrid .fld { display: contents; }
.cform .intgrid .fld > span { grid-column: 1; grid-row: 1; }
.cform .intgrid textarea { grid-column: 1; grid-row: 2; height: 100%; min-height: 9rem; resize: vertical; }
/* product ticks: 40% smaller than before, one column to the right of the Interest box */
.cform .chks { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: .3rem; align-self: start; }
.cform .chk { display: inline-flex; align-items: center; gap: .27rem; font-size: .57rem; color: var(--mute); cursor: pointer; white-space: nowrap; }
.cform .chk input { width: .63rem; height: .63rem; accent-color: var(--link); margin: 0; }
.cform .pref { grid-auto-flow: column; justify-content: start; gap: 1.25rem; }
.cform .pref legend { font: 400 .9rem var(--sans); color: var(--mute); }
.cform .fld { display: grid; gap: .3rem; font-size: .9rem; color: var(--mute); }
.cform input:not([type=checkbox]):not([type=radio]), .cform textarea { font: 400 1rem var(--sans); color: var(--ink); background: var(--bg3);
  border: 1px solid var(--rule); border-radius: 10px; padding: .6rem .75rem; }
.cform input:focus, .cform textarea:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.cform .two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.cform .hp { position: absolute; left: -9999px; }
.cform .btn { justify-self: start; }
.form-msg { margin: 0; min-height: 1.2em; font-size: .9rem; }
.form-msg.err { color: #ff9a8a; } .form-msg.ok { color: #9be3a8; }
@media (max-width: 720px) { .cform .two { grid-template-columns: 1fr; } }

.req { color: #e6b07f; font-weight: 600; }
@media (max-width: 520px) { /* phones: tick boxes drop below the Interest box at a tappable size */
  .cform .intgrid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .cform .chks { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .5rem; }
  .cform .chk { font-size: .9rem; gap: .4rem; }
  .cform .chk input { width: 1.05rem; height: 1.05rem; }
}

/* News: "More" cue on each tile; older items behind a button */
.tilemore { display: block; margin-top: .6rem; font-size: .85rem; color: var(--link); letter-spacing: .02em; }
a.tile:hover .tilemore { color: var(--link2); }
details.older { margin-top: 1.75rem; }
details.older > summary { cursor: pointer; list-style: none; }
details.older > summary::-webkit-details-marker { display: none; }
details.older[open] > summary { margin-bottom: .5rem; }

/* Products page: shared-features list and plain QR with caption */
ul.shared { margin: .25rem 0 1.5rem; padding-left: 1.2rem; line-height: 1.6; }
ul.shared li::marker { color: #c7844f; }
.qrplain { display: flex; align-items: center; gap: .75rem; margin: 2rem 0 0; color: var(--mute); font-size: .85rem; }
.qrplain .qrcode { display: block; width: 72px; height: 72px; background: #fff; padding: 4px; border-radius: 4px; flex: none; }
.qrplain .qrcode svg { display: block; width: 100%; height: 100%; }
h3.shared-h { font: 500 1.1rem/1.3 var(--head); color: var(--ink); margin: 1.5rem 0 .4rem; }

/* draft review box (only in --drafts preview builds) */
.review { border: 2px dashed #e0a458; border-radius: var(--radius); background: rgba(224,164,88,.08);
  padding: .9rem 1.2rem; margin: 0 0 1.5rem; font-size: .95rem; }
.review h2 { font-size: 1.1rem; margin: 0 0 .4rem; color: #f0c088; }
.review h3 { font-size: .95rem; margin: .6rem 0 .2rem; }
.review ul { margin: 0 0 .4rem 1.1rem; }
.review code { font-size: .85em; }
.cform .chk.rad { font-size: .9rem; gap: .4rem; }
.cform .chk.rad input { width: 1rem; height: 1rem; }

/* staff menu: preview builds only (build.py --drafts) */
.staffbar { position: fixed; right: .8rem; bottom: .8rem; z-index: 50; font-size: .8rem;
  background: var(--bg3); border: 1px solid #a9521f; border-radius: 6px; box-shadow: var(--shadow); }
.staffbar summary { cursor: pointer; padding: .25rem .7rem; color: #f6dcc0; list-style: none; }
.staffbar summary::-webkit-details-marker { display: none; }
.staffbar[open] { padding-bottom: .5rem; }
.staffbar b, .staffbar a, .staffbar span { display: block; padding: .15rem .8rem; }
.staffbar b { color: var(--mute); font-weight: 500; }
.staffbar span { color: var(--mute); font-size: .7rem; }

/* test builds only (build.py --test) */
.testribbon { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: .3rem 1rem; text-align: center;
  font-size: .8rem; background: #a9521f; color: #fff; }

/* Review improvements: visible keyboard skip link and validation state. */
.skip-link { position: fixed; top: .5rem; left: 1rem; z-index: 100;
  padding: .65rem 1rem; border-radius: 6px; background: var(--bg3); color: var(--ink);
  transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.cform [aria-invalid="true"] { border-color: #ff9a8a; }

/* product photos link to the product page */
.figlink{color:inherit;text-decoration:none;display:block}
.figlink:hover figcaption,.figlink:focus-visible figcaption{text-decoration:underline}

/* Products dropdown (desktop: hover/focus; phone: always open, indented) and breadcrumbs */
.nav .has-sub { position: relative; display: flex; align-items: center; }
.nav .sub { display: none; position: absolute; top: 100%; left: 0; min-width: 16rem; z-index: 20; flex-direction: column; padding: .45rem .3rem .55rem;
  background: linear-gradient(180deg, var(--barmid), var(--barbg)); border-radius: 0 0 10px 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.nav .has-sub:hover .sub, .nav .has-sub:focus-within .sub { display: flex; }
.nav .sub a { white-space: nowrap; padding: .35rem .9rem; }
.nav .sub a::before, .nav .sub a::after { display: none; }
.nav .sub .sub-g { margin-top: .3rem; font-weight: 600; }
.nav .sub .sub-g:first-child { margin-top: 0; }
.nav .sub .sub-p { padding-left: 1.9rem; font-size: .88rem; }
.crumb { font-size: .85rem; color: #9fb0c3; margin: 0 0 .5rem; }
.crumb a { color: inherit; }
section h2 a { color: inherit; text-decoration: none; }
section h2 a:hover { color: var(--link2); }
@media (max-width: 720px) {
  .nav .has-sub { display: block; }
  .nav .sub { display: flex; position: static; min-width: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .nav .sub a { padding: .6rem .75rem .6rem 1.6rem; font-size: .95rem; border-bottom: 1px solid rgba(0, 0, 0, .15); }
  .nav .sub .sub-g { margin-top: 0; }
  .nav .sub .sub-p { padding-left: 2.6rem; font-size: .9rem; }
}

/* Dropdown caret; footer stays at least a page-bottom (and 4rem below content) on short pages */
.caret { display: inline-block; margin-left: .4em; vertical-align: middle; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
body > main, body > .site-head, body > .site-foot { width: 100%; }   /* auto side margins in a flex column would otherwise shrink-wrap to the widest content */
.site-foot { flex-shrink: 0; }
@media (max-width: 720px) { .caret { display: none; } }

.faq { max-width: 46rem; margin-top: 1.5rem; }
.faq section { margin: 0 0 1.5rem; }
.faq h2 { font-size: 1.1rem; margin: 0 0 .3em; }
.faq p { margin: 0; }
.site-foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* About: text below the team stays left aligned and no larger than team names. */
.team-followup { text-align: left; font-size: .9rem; }
.prose .team-followup h2 { text-align: left; font-size: .98rem; }
.team-followup p { text-align: left; font-size: .9rem; }

/* About sections share the same edges, column tracks and text insets. */
.tiles.about-markets { max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles.about-outlook { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.team .bio { max-width: none; }
@media (max-width: 900px) { .tiles.about-outlook { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .tiles.about-markets, .tiles.about-outlook { grid-template-columns: 1fr; }
  .team { max-width: none; margin-inline: 0; }
}