/* GrandCAD site — shared chrome on top of the Industry design system. Brand theme: GrandCAD maroon by default (2026 rev — #9A2A3A ramp); switches to the Industry steel variant. Duotone imagery is off unless . */ :root, html[data-accent="maroon"]{ --color-accent:#9A2A3A;--color-accent-100:#F7E9EB;--color-accent-200:#EBCDD2;--color-accent-300:#D9A6AE; --color-accent-400:#D9707F;--color-accent-500:#9A2A3A;--color-accent-600:#7E1F2C;--color-accent-700:#5C1721; --color-accent-800:#47121A;--color-accent-900:#28090D; --color-accent-2:#9A2A3A;--color-accent-2-100:#F7E9EB;--color-accent-2-200:#EBCDD2;--color-accent-2-300:#D9A6AE; --color-accent-2-400:#D9707F;--color-accent-2-500:#9A2A3A;--color-accent-2-600:#7E1F2C;--color-accent-2-700:#5C1721; --color-accent-2-800:#47121A;--color-accent-2-900:#28090D; } html[data-accent="steel"]{ --color-accent:#3E7CB1;--color-accent-100:#E7F0F7;--color-accent-200:#CADEED;--color-accent-300:#9BC0DC; --color-accent-400:#7FB2D8;--color-accent-500:#3E7CB1;--color-accent-600:#2E608C;--color-accent-700:#244B6E; --color-accent-800:#1A3750;--color-accent-900:#0C1B2A; --color-accent-2:#3E7CB1;--color-accent-2-100:#E7F0F7;--color-accent-2-200:#CADEED;--color-accent-2-300:#9BC0DC; --color-accent-2-400:#7FB2D8;--color-accent-2-500:#3E7CB1;--color-accent-2-600:#2E608C;--color-accent-2-700:#244B6E; --color-accent-2-800:#1A3750;--color-accent-2-900:#0C1B2A; } html:not([data-duotone]) .duotone{filter:none!important} html:not([data-duotone]) .duotone::before, html:not([data-duotone]) .duotone::after{display:none!important} html:not([data-duotone]) .duotone>*{filter:none!important;mix-blend-mode:normal!important} html{scroll-behavior:smooth} body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:hidden} a{color:var(--color-accent-700);text-decoration:none} a:hover{color:var(--color-accent-600)} @keyframes gc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* outlined display type */ .gc-stroke{color:transparent;-webkit-text-stroke:2px white} .gc-stroke--accent{color:transparent;-webkit-text-stroke:2px var(--color-accent-700)} /* — header — */ .gc-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--space-6);padding:10px var(--space-6);background:color-mix(in oklab, var(--color-bg) 90%, white);border-bottom:1px solid var(--color-neutral-200);backdrop-filter:blur(6px)} .gc-nav .nav-brand{display:flex;align-items:center} .gc-nav .nav-brand img{height:36px;width:auto;display:block} .gc-nav nav{display:flex;gap:var(--space-4);margin-left:auto;align-items:center;font-family:var(--font-heading);font-size:14px;letter-spacing:0.14em;text-transform:uppercase} .gc-nav nav a{color:var(--color-text)} .gc-nav nav a[aria-current="page"]{color:var(--color-accent-700);border-bottom:2px solid var(--color-accent)} .gc-nav nav .btn{position:relative} /* — page header block — */ .gc-page-head{max-width:1280px;margin:0 auto;padding:var(--space-8) var(--space-6) var(--space-4)} .gc-page-head h1{margin:0;font-family:var(--font-heading);font-weight:700;text-transform:uppercase;line-height:0.9} .gc-page-head .gc-lede{margin-top:var(--space-3);font-size:15px;color:var(--color-neutral-600)} /* — numbered kicker above page headlines — */ .gc-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:var(--space-3);font-family:var(--font-heading);letter-spacing:0.2em;text-transform:uppercase;font-size:12px;color:var(--color-accent-700)} .gc-eyebrow .rule{width:44px;height:1px;background:var(--color-accent-400)} .gc-eyebrow .label{color:var(--color-neutral-600)} /* — dark accent band — */ .gc-band{background:var(--color-accent-900);color:white} .gc-band-inner{max-width:1280px;margin:0 auto;padding:var(--space-8) var(--space-6)} .gc-kicker{font-family:var(--font-heading);letter-spacing:0.18em;text-transform:uppercase;font-size:13px;opacity:0.7} /* — footer — */ .gc-footer{display:flex;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap;max-width:1280px;margin:0 auto;padding:var(--space-6);font-size:13px;color:var(--color-neutral-600)} @media (max-width: 900px){ .gc-nav{gap:var(--space-4);flex-wrap:wrap} .gc-nav nav{flex-wrap:wrap;gap:var(--space-3)} }