/* Licensed webfonts — drop your .woff2 files into /fonts (see fonts/README.txt).
   Falls back to Space Grotesk / Hanken Grotesk until the files are present. */
@font-face { font-family:"ABC Favorit"; src:url("fonts/abc_favorit_book.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"ABC Favorit"; src:url("fonts/abc_favorit_medium.woff2") format("woff2"); font-weight:500 700; font-style:normal; font-display:swap; }
@font-face { font-family:"Domaine"; src:url("fonts/domaine_regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Domaine"; src:url("fonts/domaine_medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Domaine"; src:url("fonts/domaine_bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Inter"; src:url("fonts/inter_variable.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  --bg:    #000000;
  --fg:    #ededee;
  --mid:   #8a8c92;
  --dim:   #5c5e66;
  --faint: #3d3f46;
  --display: "ABC Favorit", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: "Domaine", Georgia, "Times New Roman", serif;
  --maxw: 1280px;
  --pad: 24px;
  --btn-bg: linear-gradient(104deg, rgba(253,253,253,0.05) 5%, rgba(240,240,228,0.10) 100%);
  --btn-bg-h: linear-gradient(104deg, rgba(253,253,253,0.10) 5%, rgba(240,240,228,0.17) 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(255,255,255,0.15); color: #fff; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; }

/* header — no border, blur only */
header { position: sticky; top: 0; z-index: 60; }
header::before { content: ''; position: absolute; inset: 0; backdrop-filter: saturate(150%) blur(14px); background: rgba(0,0,0,0.66); z-index: -1; pointer-events: none; }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 58px; }
.brand { font-family: var(--display); font-weight: 600; letter-spacing: -0.03em; font-size: 18px; display: inline-flex; align-items: center; justify-self: start; }
/* rotating CB monograms in the menu */
.logoset { position: relative; display: inline-block; width: 27px; height: 27px; perspective: 340px; }
.logo { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.6);
        transition: opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1), filter .5s ease; }
.logo.active { opacity: 1; transform: none !important; filter: none !important; }
/* transition types — the from/exit state; JS assigns one at random per switch */
.logo.t-pop   { transform: scale(.4); }
.logo.t-up    { transform: translateY(16px) scale(.9); }
.logo.t-down  { transform: translateY(-16px) scale(.9); }
.logo.t-left  { transform: translateX(-18px); }
.logo.t-right { transform: translateX(18px); }
.logo.t-rot   { transform: rotate(-40deg) scale(.6); }
.logo.t-flip  { transform: rotateY(88deg); }
.logo.t-blur  { transform: scale(1.18); filter: blur(5px); }
.logo svg { width: 27px; height: 27px; stroke: #f2f3f5; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo svg .f { fill: #f2f3f5; stroke: none; }
.logo svg text { font-family: var(--display); font-weight: 700; fill: #f2f3f5; stroke: none; }
.menu { display: flex; align-items: center; gap: 2px; justify-self: center; }
.menu > .item { position: relative; }
.menu > .item > a, .menu > .item > button {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--mid); background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: 8px; transition: color .15s ease;
}
.menu > .item > a:hover, .menu > .item:hover > button, .menu > .item:focus-within > button { color: var(--fg); }
.chev { width: 11px; height: 11px; stroke: currentColor; stroke-width: 1.8; fill: none; transition: transform .18s ease; opacity: .7; }
.menu > .item:hover .chev, .menu > .item:focus-within .chev { transform: rotate(180deg); }
.panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 324px;
  background: linear-gradient(180deg, #141418, #0c0c0e); border: 1px solid rgba(255,255,255,0.10); border-radius: 16px; padding: 8px;
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 30px 64px -22px rgba(0,0,0,0.92); z-index: 70;
}
.panel::before { content:""; position:absolute; top:-10px; left:0; right:0; height:10px; }
.menu > .item:hover .panel, .menu > .item:focus-within .panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.panel a { display: flex; gap: 12px; align-items: center; padding: 10px 11px; border-radius: 11px; transition: background .14s ease; }
.panel a:hover { background: rgba(255,255,255,0.055); }
.panel .pi { width: 36px; height: 36px; flex: none; border: 1px solid rgba(255,255,255,0.10); border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0)); }
.panel .pi svg { width: 17px; height: 17px; stroke: #e4e5e9; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.panel .pt { display: block; font-size: 14px; color: var(--fg); font-weight: 500; }
.panel .pd { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; line-height: 1.4; }
.nav-right { justify-self: end; display: flex; align-items: center; gap: 6px; }
.nav-right .ghost { font-size: 14px; color: var(--mid); padding: 8px 12px; transition: color .15s ease; }
.nav-right .ghost:hover { color: var(--fg); }
.pill { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; color: #fff; background: var(--btn-bg); border: 2px solid rgba(255,255,255,0.07); padding: 8px 15px; border-radius: 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: background .16s ease, border-color .16s ease; }
.pill:hover { border-color: rgba(255,255,255,0.16); background: var(--btn-bg-h); }
.ham { display: none; background: none; border: none; cursor: pointer; padding: 8px 6px; margin-left: 2px; color: var(--mid); border-radius: 8px; transition: color .15s ease; }
.ham:hover { color: var(--fg); }
.ham svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.mob-nav { display: none; flex-direction: column; gap: 2px; position: absolute; top: 100%; left: 0; right: 0; background: rgba(6,6,9,0.97); backdrop-filter: blur(20px); padding: 8px var(--pad) 20px; border-bottom: 1px solid rgba(255,255,255,0.07); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.mob-nav.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mob-item { display: block; padding: 11px 10px; color: var(--mid); font-size: 15px; border-radius: 8px; transition: background .12s ease, color .12s ease; }
.mob-item:hover, .mob-item:active { color: var(--fg); background: rgba(255,255,255,0.055); }
.mob-cta { color: var(--fg); font-weight: 600; }
.mob-divider { height: 1px; background: rgba(255,255,255,0.08); margin: 8px 0; }
@media (max-width: 900px) { .menu, .nav-right .ghost { display: none; } .ham { display: flex; align-items: center; } .mob-nav { display: flex; } .nav-right .pill { font-size: 13px; padding: 7px 12px; } }
@media (max-width: 480px) { .nav-right .pill { display: none; } }

/* buttons */
.actions { margin-top: 42px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: background .16s ease, border-color .16s ease; }
.btn-primary { color: #fff; font-size: 14px; padding: 11px 18px; border-radius: 16px; background: var(--btn-bg); border: 2px solid rgba(255,255,255,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.btn-primary:hover { border-color: rgba(255,255,255,0.16); background: var(--btn-bg-h); }
.btn-text { color: var(--mid); font-size: 15px; padding: 11px 14px; }
.btn-text:hover { color: var(--fg); }
.btn-text .ar { transition: transform .16s ease; display: inline-block; }
.btn-text:hover .ar { transform: translateX(3px); }

/* hero — subtle gray abstract streaks, no color, no border */
.hero { position: relative; padding: 150px 0 120px; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
.hero .wrap { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(46px, 7.4vw, 88px); line-height: 1.03; letter-spacing: -0.015em; margin: 0; max-width: 15ch;
  background: linear-gradient(180deg, #ffffff 34%, #6f7178); -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* The h1 is gradient-filled text, so its own colour is transparent and a plain underline would
   be drawn in nothing at all. The decoration colour is stated outright, and text-decoration
   rather than a border so the line still breaks and wraps with the words. */
.hero h1 .u {
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.5);
  text-decoration-thickness: 0.04em; text-underline-offset: 0.15em;
}
.hero p.lead { margin: 34px 0 0; font-size: clamp(17px, 1.7vw, 20px); color: var(--mid); max-width: 46ch; line-height: 1.5; }

/* thin credibility line — borderless */
.cred { padding: 4px 0 40px; }
.cred .wrap { color: var(--dim); font-size: 14px; }

/* A three-figure stats band used to sit between the hero and the datasets. Removed with its markup. */

/* sections — borderless */
section { padding: 60px 0; }
.sec h2 { font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.035em; margin: 0; line-height: 1.05; }

/* standing pages — careers, news
   A short masthead instead of the home page's hero: no canvas and no claim, just the page's name and
   what is on it. The empty state is a filled panel rather than a grey line, because on both of these
   pages "there is nothing here yet" IS the content and has to read as deliberate. */
.page { padding: 92px 0 8px; }
.page h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(38px, 5.4vw, 64px); line-height: 1.06; letter-spacing: -0.02em; margin: 0;
  background: linear-gradient(180deg, #ffffff 34%, #6f7178); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-lead { margin: 26px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--mid); max-width: 64ch; line-height: 1.58; }
.notice { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)); border-radius: 18px; padding: 40px 36px; max-width: 78ch; }
.notice-h { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.025em; margin: 0; line-height: 1.12; }
.notice p { margin: 16px 0 0; color: var(--mid); font-size: 15.5px; line-height: 1.6; max-width: 62ch; }
.notice .actions { margin-top: 30px; }
@media (max-width: 540px){ .notice { padding: 30px 24px; } .page { padding-top: 64px; } }

/* data grid — gapped cards, subtle fill, NO borders */
.grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 820px){ .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .grid { grid-template-columns: 1fr; } }
.cell { background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.014)); border-radius: 14px; padding: 30px 28px; transition: background .18s ease; }
.cell:hover { background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02)); }
.cell h3 { font-size: 19px; letter-spacing: -0.02em; margin: 0; }
.cell p { margin: 10px 0 0; color: var(--mid); font-size: 14.5px; line-height: 1.5; }

/* services — spacing only, no dividers */
/* One paragraph of argument above the process list. Capped at 78ch rather than the lead's 46:
   it is body copy under a heading, not a standfirst, and at 46 it sets as a narrow column. */
.sec-lead { margin: 0 0 44px; max-width: 78ch; color: var(--mid); font-size: 17px; line-height: 1.62; }
.svc { margin-top: 48px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; }
@media (max-width: 720px){ .svc { grid-template-columns: 1fr; gap: 36px; } }
.svc h3 { font-size: 20px; letter-spacing: -0.02em; margin: 0; }
.svc p { margin: 12px 0 0; color: var(--mid); font-size: 15px; line-height: 1.55; }

/* contact — form panel filled, no outer border */
#contact { padding: 60px 0 110px; }
.cg { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
@media (max-width: 860px){ .cg { grid-template-columns: 1fr; gap: 40px; } }
.cc h2 { font-size: clamp(30px,3.6vw,44px); letter-spacing:-0.035em; margin:0; line-height:1.05; }
.cc p { color: var(--mid); font-size: 16px; line-height: 1.55; margin: 20px 0 0; }
.cc .note { margin-top: 22px; color: var(--dim); font-size: 14px; }
form { border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012)); padding: 30px; }
.field { margin-bottom: 18px; }
.field:last-of-type { margin-bottom: 0; }
label { display: block; font-size: 14px; color: var(--mid); margin-bottom: 8px; }
input, textarea, select { width: 100%; background: rgba(0,0,0,0.35); color: var(--fg); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 12px 14px; font-family: var(--sans); font-size: 15px; line-height: 1.5; transition: border-color .15s ease; -webkit-appearance: none; appearance: none; }
select { cursor: pointer; }
textarea { resize: vertical; min-height: 120px; }
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255,255,255,0.42); background: rgba(0,0,0,0.5); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 520px){ .two { grid-template-columns: 1fr; } }
.two .field { margin-bottom: 0; }
.ff { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
button[type=submit] { font-family: var(--sans); font-size: 14px; font-weight: 600; color: #fff; background: var(--btn-bg); border: 2px solid rgba(255,255,255,0.07); padding: 11px 20px; border-radius: 16px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.25); transition: background .16s ease, border-color .16s ease; }
button[type=submit]:hover:not(:disabled) { border-color: rgba(255,255,255,0.16); background: var(--btn-bg-h); }
button[type=submit]:disabled { opacity: .55; cursor: default; }
.consent { color: var(--faint); font-size: 12.5px; max-width: 30ch; line-height: 1.5; }
.fs { margin-top: 16px; font-size: 14px; min-height: 18px; }
.fs.err { color: #d99; } .fs.ok { color: var(--fg); }
.err-inline { border-color: rgba(217,153,153,0.55) !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* footer — no borders */
footer { padding: 72px 0 0; }
.ft { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 760px){ .ft { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 440px){ .ft { grid-template-columns: 1fr; } }
.ft .legal { max-width: 34ch; color: var(--faint); font-size: 13px; line-height: 1.65; margin: 16px 0 0; }
.fc h5 { margin: 0 0 14px; font-size: 13px; color: var(--dim); font-weight: 500; font-family: var(--sans); }
.fc a { display: block; color: var(--mid); font-size: 14px; padding: 5px 0; transition: color .15s ease; }
.fc a:hover { color: var(--fg); }
.fb { margin-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; color: var(--faint); font-size: 13px; }

/* giant wordmark — sits above footer, very dark by default, chrome-shiny on hover */
.bigmark { position: relative; width: 100%; overflow: hidden; padding: 80px 0; }
.bigmark .word {
  display: block; text-align: center; white-space: nowrap; user-select: none; cursor: default;
  font-family: var(--display); font-weight: 700; letter-spacing: -0.05em;
  font-size: clamp(40px, 13.2vw, 240px); line-height: 1; margin-bottom: -0.16em;
  background: radial-gradient(78% 200% at var(--mx, 50%) -8%, #ffffff 0%, #dde0ec 10%, #a4a8bc 24%, #54586c 42%, #1c1e2e 60%, #060710 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-mask-image: linear-gradient(180deg, #000 46%, rgba(0,0,0,0) 88%);
          mask-image: linear-gradient(180deg, #000 46%, rgba(0,0,0,0) 88%);
  filter: brightness(0.12);
  transition: filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.bigmark:hover .word { filter: brightness(1.08); }

/* live chat theme toggle — sits just above the bubble the widget SDK injects.
   The SDK owns the corner (bubble at 20px, 64px across), so this clears it by height plus a gap.
   z-index matches the SDK's own stacking context: anything lower disappears behind the bubble. */
.chat-theme {
  position: fixed; right: 37px; bottom: 96px; z-index: 2147483000;
  width: 30px; height: 30px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  background: rgba(18,19,23,0.92); color: var(--mid);
  border: 1px solid var(--faint);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: color .15s ease, border-color .15s ease, transform .15s ease, opacity .2s ease;
}
.chat-theme svg { width: 15px; height: 15px; }
.chat-theme:hover { color: var(--fg); border-color: var(--dim); transform: translateY(-1px); }
.chat-theme:focus-visible { outline: 2px solid var(--mid); outline-offset: 2px; }
/* out of the way while the panel is open: it covers this corner and carries its own controls */
.chat-theme--away { opacity: 0; pointer-events: none; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .chat-theme { transition: none; } }

/* The bubble is the widget's launcher, injected into this page and painted with the inbox's
   widget colour as an inline style — hence !important, which is the only way to reach it.
   In dark mode it becomes a dark surface so the launcher matches the panel it opens. */
html[data-chat-theme="dark"] .flare-widget-bubble {
  background: #101114 !important;
  border: 1px solid rgba(255,255,255,0.10);
}