/* Commercial Insights Group: core. Paper, navy ink and brass.
   A drawing set issued to a client: paper and navy ink, solid lines for what is on
   record, dashed for what is estimated, and brass for one meaning only, the window to call in.
   A client account set to a firm keeps this look and carries the firm's mark quietly (app.css).
   Tokens, type, buttons, header, footer and forms. parts.css and inner.css build on these. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("../fonts/archivo-wdth.woff2") format("woff2-variations"), url("../fonts/archivo-wdth.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* CIG's own: navy ink and brass (docs/SPEC.md, section 8) */
  --paper: #fefefe;
  --ink: #101a33;
  --graphite: #0f1834;
  --tint: #f2f4f8;
  --rule: #dde2ea;
  --ink-hover: #26345f;
  --dark-surface: #16214a;
  --dark-surface-2: #1b2752;
  --dark-line: #2a3866;
  --dark-text: #eef1f6;
  --dark-text-2: #cdd3e0;
  --dark-muted: #9aa5bd;
  --dark-btn-hover: #dfe4ee;
  --brass: #c9a35a;
  --brass-hi: #d5b26c;
  --brass-line: #9a7631;  /* dashed edges on paper: holds 3:1 */
  --brass-text: #7a5a1e;  /* brass words on paper: 6.3:1 */
  --brass-tint: rgba(201, 163, 90, .17);
  /* Roles. app.css reads these names too. */
  --bg: var(--paper);
  --surface: #ffffff;
  --surface-2: #eef1f6;
  --line: var(--rule);
  --line-soft: #e8ebf1;
  --field-line: #848da0;  /* a field's edge at 3.4:1 */
  --text: var(--ink);
  --text-2: #39435c;
  --muted: #586178;
  --accent: var(--brass);
  --accent-hi: var(--brass-hi);
  --accent-text: var(--brass-text);
  --accent-tint: var(--brass-tint);
  --on-accent: var(--ink);
  --danger: #b42318;
  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 2px;
  --radius-sm: 2px;
  --section: clamp(72px, 9vw, 128px);
  color-scheme: light;
}

/* The dark sheets: the lease clock's band and the footer */
.dark {
  --bg: var(--graphite);
  --surface: var(--dark-surface);
  --surface-2: var(--dark-surface-2);
  --line: var(--dark-line);
  --rule: var(--dark-line);
  --line-soft: rgba(255, 255, 255, .08);
  --text: var(--dark-text);
  --text-2: var(--dark-text-2);
  --muted: var(--dark-muted);
  --accent-text: #d9b877;
  --brass-line: var(--brass);
  color-scheme: dark;
  background: var(--bg);
  color: var(--text);
}
.tint { background: var(--tint); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; color: var(--text); font-weight: 640; text-wrap: balance; }
p, li, dd { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
/* The firm's photographs (docs/SPEC.md, section 8): framed like a sheet in the set, with no caption */
.photo img { display: block; width: 100%; height: auto; border: 1.5px solid var(--ink); background: var(--surface-2); }
/* Our own pictures (section 8), made with AI. On a building, the lit floor is ringed in dashed brass as in our mark,
   wider than the picture as the mark's ring is wider than its windows, and drawn once as the page opens. */
.pic { position: relative; }
.pic picture { display: block; }
.pic img { display: block; width: 100%; height: auto; background: var(--dark-surface); }
.ring { position: absolute; left: var(--rl); top: var(--rt); width: var(--rw); height: var(--rh); overflow: visible; pointer-events: none; }
@media (max-width: 960px) { .small-960 .ring { left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); } }
@media (max-width: 680px) { .small-680 .ring { left: var(--sl); top: var(--st); width: var(--sw); height: var(--sh); } }
.ring-line { fill: none; stroke: var(--brass-hi); stroke-width: 2.5; stroke-dasharray: 10 7; }
.ring-draw { fill: none; stroke: #fff; stroke-width: 16; stroke-dasharray: 1 1; animation: ring-draw 1.9s .5s cubic-bezier(.62, 0, .24, 1) both; }
@keyframes ring-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* With scripts, site.js starts the drawing once the picture has loaded and is mostly in view, which on a phone can be
   below the first screen; without them it draws as the page opens, and with motion reduced it is simply there */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-ring] .ring-draw { animation: none; stroke-dashoffset: 1; }
  [data-ring].is-in .ring-draw { animation: ring-draw 1.9s .1s cubic-bezier(.62, 0, .24, 1) both; }
}
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden { 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: 100; background: var(--paper); color: var(--ink); padding: 12px 16px; font-weight: 600; text-decoration: none; box-shadow: 0 0 0 2px var(--brass); }  /* paper, to show on the navy header */
.skip:focus { top: 84px; }  /* below the header, clear of our name */

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* Type. One family; its width axis is the voice: titles a little wide and heavy, in sentence case,
   normal width to read, condensed for figures. (A firm's account may set titles its own way: app.css.) */
.display, .h1 { font-weight: 730; font-stretch: 114%; letter-spacing: -.028em; line-height: 1; }
.display { font-size: clamp(2.35rem, .45rem + 5.6vw, 5.15rem); }
.h1 { font-size: clamp(2rem, 1.1rem + 3.6vw, 4rem); }
.h2 { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 640; font-stretch: 112%; }
.h3 { font-size: 1.16rem; line-height: 1.3; letter-spacing: -.006em; font-weight: 620; font-stretch: 106%; }
.h2 .line { display: block; }  /* a heading of two sentences, one to a line */
.lead { font-size: clamp(1.1rem, 1rem + .35vw, 1.24rem); line-height: 1.55; font-weight: 380; color: var(--text-2); max-width: 36em; }
.small { font-size: .875rem; }
.muted { color: var(--muted); }

/* Buttons: ink, square-shouldered */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 24px; border-radius: var(--radius);
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink);
  font: inherit; font-size: 15.5px; font-weight: 600; font-stretch: 108%; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--paper); text-decoration: none; }
.btn-quiet { background: transparent; color: var(--text); border-color: var(--text); }
.btn-quiet:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.dark .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.dark .btn:hover { background: var(--dark-btn-hover); border-color: var(--dark-btn-hover); color: var(--ink); }
.dark .btn-quiet { background: transparent; color: var(--text); border-color: var(--text); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Grade tags: dashed for an estimate, solid for a recorded date, as on a drawing */
.grade { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.grade.est, .grade.estimated { border: 1.5px dashed var(--brass-line); color: var(--accent-text); }
.grade.rec, .grade.recorded { background: var(--brass); color: var(--ink); border: 1.5px solid var(--brass); }

/* Header: navy on the public site, our light mark beside our name (changed 28 Oct 2026, from paper). Signed-in pages
   keep a paper header (app.css). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--graphite);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.site-header .inner.dark { background: none; }
.site-header.paper { background: rgba(254, 254, 254, .94); border-bottom-color: var(--rule); }  /* a signed-in page's error */
.site-header .inner { display: flex; align-items: center; gap: 32px; height: 72px; }
.brands { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 640; font-stretch: 110%; font-size: 15px; letter-spacing: -.004em; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 28px; flex: none; }
/* A firm's account: its mark follows ours, quieter (docs/SPEC.md, section 8) */
.for { display: inline-flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid var(--rule); height: 28px; color: var(--text-2); font-weight: 560; font-size: 14.5px; white-space: nowrap; min-width: 0; }
.for img { height: 24px; width: auto; flex: none; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a, .actions .signin { color: var(--text-2); text-decoration: none; font-size: 15px; }
.nav a:hover, .nav a[aria-current="page"], .actions .signin:hover, .actions .signin[aria-current="page"] { color: var(--text); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 8px; }
.nav a[aria-current="page"], .actions .signin[aria-current="page"] { text-decoration-color: var(--brass); text-decoration-thickness: 2px; }
.actions { display: flex; align-items: center; gap: 22px; }
.menu { display: none; position: relative; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--text); border-radius: var(--radius); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span, .menu summary span::before, .menu summary span::after { display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; content: ""; transition: transform .2s; }
.menu summary span::before { position: absolute; top: -6px; }
.menu summary span::after { position: absolute; top: 6px; }
.menu[open] summary span { background: transparent; }
.menu[open] summary span::before { transform: translateY(6px) rotate(45deg); }
.menu[open] summary span::after { transform: translateY(-6px) rotate(-45deg); }
.menu-panel { position: fixed; left: 0; right: 0; top: 72px; background: var(--paper); border-bottom: 1px solid var(--text); padding: 8px var(--gutter) 24px; display: grid; }
.menu-panel a { color: var(--text); text-decoration: none; font-size: 18px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-panel .btn { margin-top: 18px; color: var(--paper); border-bottom: 1.5px solid var(--ink); }
.dark .menu-panel { background: var(--dark-surface); border-bottom-color: rgba(255, 255, 255, .18); }  /* a layer above the navy page */
/* Open, the menu dims the page beneath it, which stays still; a click on it closes the menu (site.js). Only while the
   menu can show: a window widened past it never keeps a locked page. */
@media (max-width: 1020px) {
  .menu[open]::before { content: ""; position: fixed; inset: 72px 0 0; background: rgba(6, 10, 24, .64); cursor: pointer; }
  body:has(.menu[open]) { overflow: hidden; }
}
@media (forced-colors: active) {  /* the menu button's lines are drawn with backgrounds, which high contrast removes */
  .menu summary span, .menu summary span::before, .menu summary span::after { background: CanvasText; forced-color-adjust: none; }
  .menu[open] summary span { background: transparent; }
}
.dark .menu-panel .btn { color: var(--ink); border-bottom-color: var(--paper); }

/* Sections */
.section { padding-top: var(--section); padding-bottom: var(--section); }
.section-head { max-width: 780px; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head .lead { margin-top: 18px; }
.rule-top { border-top: 1px solid var(--rule); }
.more { margin-top: 36px; }

/* Forms */
label { display: block; }
.field { display: grid; gap: 7px; }
.field > span, .field > label { font-size: 14px; font-weight: 560; color: var(--text); }
.field .opt { color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], input:not([type]), select, textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--surface); color: var(--text); border: 1px solid var(--field-line);
  font: inherit; font-size: 16px; line-height: 1.4; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink); vertical-align: -3px; margin: 0 8px 0 0; }
input[type="range"] { width: 100%; margin: 14px 0 0; accent-color: var(--ink); height: 28px; }
input[type="file"] { color: var(--muted); font-size: 14px; max-width: 100%; }
input[type="file"]::file-selector-button { margin-right: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--text); border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .full { grid-column: 1 / -1; }
.form-note { font-size: 13.5px; color: var(--muted); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice, .alert { padding: 14px 18px; font-size: 15px; border-radius: var(--radius); }
.notice { background: var(--brass-tint); border: 1px solid var(--brass-line); color: var(--text); }
.alert { background: #fdf0ef; border: 1px solid var(--danger); color: var(--text); }
.dark .alert { background: rgba(240, 120, 110, .12); }

/* Wide tables scroll sideways (site and app) */
.table-wrap { position: relative; overflow-x: auto; }

/* Footer: black */
.site-footer { --bg: var(--ink); padding: 72px 0 40px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-brand > * + * { margin-top: 14px; }
.foot-brand p { color: var(--muted); max-width: 28em; }
.site-footer nav h2 { font-size: 14px; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.site-footer nav a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }
.site-footer a { color: var(--text-2); }
.foot-legal { margin-top: 48px; color: var(--muted); font-size: 13.5px; max-width: 80ch; }
.foot-legal + .foot-base { margin-top: 16px; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.foot-base a { color: var(--muted); }
.site-footer.slim { padding: 0 0 26px; }  /* a signed-in page's error: just the base line */
.site-footer.slim .foot-legal { margin-top: 0; padding-top: 26px; }
.site-footer.slim .foot-base { margin-top: 0; padding-top: 26px; border-top: 0; }
.site-footer.slim .foot-legal + .foot-base { padding-top: 10px; }

/* Responsive */
@media (max-width: 1180px) {
  .nav { gap: 22px; }
  .site-header .inner { gap: 24px; }
}
@media (max-width: 1080px) {
  .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
  .nav, .actions { display: none; }
  .menu { display: block; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .brands.with-firm .for > span { display: none; }  /* the firm's logo carries its name; CIG keeps its own */
  .display, .h1 { line-height: 1.02; }
  .site-header .inner { gap: 16px; }
  .brand { gap: 10px; font-size: 14px; }
  .brands { gap: 12px; }
  .for { padding-left: 12px; }
}
@media (max-width: 389px) {  /* the smallest phones: both marks smaller, so both names still fit beside the menu */
  .brand { gap: 8px; font-size: 13px; }
  .brand img { width: 24px; height: 22px; }
  .brands { gap: 10px; }
  .for { padding-left: 10px; height: 26px; }
  .for img { height: 20px; }  /* the firm's mark stays smaller than ours */
}
@media (max-width: 353px) {
  .brands.with-firm .for { display: none; }  /* no room for two marks: the call sheet's welcome panel names the firm */
}
@media (max-width: 420px) {
  .btn-row .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .site-footer, .menu, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .dark { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --line: #bbb; --rule: #bbb; --line-soft: #ddd;
    --text: #000; --text-2: #222; --muted: #444; --accent-text: #5c4416; background: #fff; color: #000; }
  .dark h1 { color: #000 !important; }  /* the navy pages print in black on white, their white titles too */
  .ring { display: none; }
}