/* Marketing site. Tokens and page defaults come from assets/tokens.css and assets/base.css.
   The page is art-directed as one evening: dusk at the top, night at the bottom. It always uses the
   light tokens (data-theme="light" on <html>), and the night part uses the dark ones
   (data-theme="dark" on .nightfall and .night). The two dusk colours are the site's own. */

/* Fonts are served from this site, so no visitor data goes to a font CDN. Schibsted Grotesk,
   variable weight, from Fontsource 5.3.0 (SIL Open Font License, fonts/OFL.txt). */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(fonts/schibsted-grotesk-latin-wght-normal.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;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --dusk: #f2eeea;
  --dusk-warm: #f6d9cc;
  --sun-size: min(62svh, 118vw);
  --dusk-sky: linear-gradient(var(--dusk) 25%, var(--dusk-warm) 100%);
  /* Film grain, so large flat shapes read as light rather than clip art. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.23 0 0 0 0 0.31 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; background: var(--plomb); }
body { font-size: 17px; line-height: 26px; background: var(--dusk-warm); }

.section-title {
  margin: 0 0 var(--space-32);
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.02;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* Hero: a small top bar, one line, and the mark as a setting sun at the bottom of the screen. */

.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--dusk-sky);
}
body::after, .scene::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background: var(--grain);
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Top bar: two glass capsules, the logo and "Get in touch". With JavaScript (.dock) it stays at
   the top of the screen and header.js gives it the dark tokens once the night is under it, so the
   colours cross-fade rather than flip. */
.topbar {
  --bar-height: 40px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24) clamp(16px, 3vw, 40px);
}
.dock .topbar { position: fixed; top: 0; left: 0; right: 0; }
.dock .hero-head { margin-top: calc(var(--bar-height) + var(--space-24) * 2); }

/* The lockup's proportions: the wordmark is 0.56 of the mark's height, 0.3 of it away. */
.brand {
  --mark: 32px;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: calc(var(--mark) * 0.3);
  height: var(--bar-height);
  /* The mark sits in the capsule's round end, concentric with it. */
  padding: 0 var(--space-16) 0 calc((var(--bar-height) - var(--mark)) / 2);
  border-radius: var(--radius-pill);
}
.brand:hover { text-decoration: none; }
/* The capsule is drawn behind the logo, so the flight can trim it to the wordmark alone (--trim),
   and the focus ring follows the capsule you see. */
.brand::before {
  content: "";
  position: absolute;
  inset: 0 var(--trim, 0px) 0 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--duration-grow) var(--ease);
}
.brand:focus-visible { outline: none; }
.brand:focus-visible::before { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.brand-mark { display: block; width: var(--mark); height: var(--mark); }
.wordmark {
  position: relative;
  display: block;
  width: calc(var(--mark) * 2.5364);
  height: calc(var(--mark) * 0.56);
}
.wordmark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.wordmark-night { opacity: 0; transition: opacity var(--duration-grow) var(--ease); }
.topbar[data-theme="dark"] .wordmark-night { opacity: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  height: var(--bar-height);
  padding: 0 var(--space-20);
  border-radius: var(--radius-pill);
  background-color: var(--glass);
  color: var(--label);
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color var(--duration-grow) var(--ease), color var(--duration-grow) var(--ease);
}
.pill:hover { background-color: var(--glass-strong); text-decoration: none; transition-duration: var(--duration-quick); }

/* The flight (header.js). At the top of the page the sun is the mark, and the top bar's capsule
   holds the wordmark alone, 16px from each end: moved left by the mark's end padding, the mark and
   its gap, less 16px (--shift), with the capsule trimmed by as much. Scrolling carries the sun
   into the top bar while the wordmark slides back and the capsule opens; when the sun lands
   (.docked), the top bar's own mark takes over. */
.flight .brand {
  --shift: calc((var(--bar-height) - var(--mark)) / 2 + var(--mark) * 1.3 - var(--space-16));
  --trim: var(--shift);
}
.flight .wordmark { transform: translateX(calc(var(--shift) * -1)); }
.flight .brand-mark { opacity: 0; }
.flight.docked .brand-mark { opacity: 1; }
.airborne .sun { position: fixed; left: 0; top: 0; z-index: 2; transform-origin: 0 0; pointer-events: none; }
.airborne:not(.docked) .sun { will-change: transform; }
.docked .sun { visibility: hidden; }

.hero-head {
  position: relative;
  z-index: 2;
  padding: clamp(32px, 9svh, 104px) var(--space-24) 0;
  text-align: center;
}
.hero-head p { margin: 0 0 var(--space-16); }
.eyebrow { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--label); }
.statement {
  margin: 0;
  font-size: clamp(44px, 7vw, 104px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.sun {
  position: absolute;
  left: calc(50% - var(--sun-size) / 2);
  top: calc(100% - var(--sun-size) * 0.93);
  width: var(--sun-size);
  height: var(--sun-size);
  display: block;
}

/* Without the flight (no JavaScript), the sun sinks as the page scrolls: it moves slower than the
   page and drops behind the fold. Not with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.flight) .sun {
      animation: sun-set linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100svh;
    }
    @keyframes sun-set { to { transform: translateY(38%) scale(1.06); } }
  }
}

/* What Bluecliff does: one large sentence. */

.lede-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(80px, 16svh, 180px) clamp(16px, 4vw, 56px);
}
.lede {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* What we believe: three statements, each with the product's own mark for what it means: the
   provenance captions and the Unknown pill, from the design system. Grey drops under 4.5:1 on the
   warm dusk, so secondary text there uses label. */

.beliefs-section, .differ, .own-word {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-40) clamp(16px, 4vw, 56px) clamp(96px, 18svh, 200px);
}
.beliefs, .principles { list-style: none; margin: 0; padding: 0; }
.belief {
  display: grid;
  grid-template-columns: minmax(150px, 0.55fr) minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-12) var(--space-32);
  align-items: baseline;
  padding: var(--space-32) 0;
  border-top: 1px solid var(--separator-strong);
}
.belief h3 {
  margin: 0;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.belief p { margin: 0; }
.belief-mark, .principle-mark {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.beliefs-section .bc-provenance { color: var(--label); }
/* The marks are read from further away here than in the product: one step up in size. */
.belief-mark .bc-provenance, .principle-mark .bc-provenance { gap: var(--space-6); font-size: 15px; line-height: 20px; }
.belief-mark .bc-status-glyph, .principle-mark .bc-status-glyph { width: 16px; height: 16px; }
.europe { margin: var(--space-32) 0 0; padding-top: var(--space-32); border-top: 1px solid var(--separator-strong); font-weight: 600; }

/* Not another TPRM tool: how the usual approach works, how Bluecliff builds its confidence instead,
   then how we build it. */

.differ-lead { max-width: 58ch; margin: 0 0 var(--space-40); font-size: 19px; line-height: 28px; text-wrap: pretty; }
.differ-statement {
  max-width: 36ch;
  margin: 0 0 clamp(64px, 10svh, 112px);
  font-size: clamp(24px, 2.5vw, 33px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}
/* Their answers stay their own: the same lead and statement, with nothing after the statement. */
.own-word .differ-statement { margin-bottom: 0; }

.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40) var(--space-32);
}
.principle { padding-top: var(--space-24); border-top: 1px solid var(--separator-strong); }
.principle h3 { margin: var(--space-16) 0 var(--space-8); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.principle p { margin: 0; text-wrap: pretty; }
.principle-mark { min-height: 24px; }
.principle .bc-provenance { color: var(--label); }
/* The badge is a working example: it opens its note like it does in the product. Label, not
   label-2, for contrast on the dusk. */
.principle .bc-ai-badge { color: var(--label); }

@media (max-width: 860px) {
  .principles { grid-template-columns: minmax(0, 1fr); }
}
/* In the one-column layout the AI mark sits at the left, so its note opens to the right again.
   Below 600px the design system turns the note into a bottom sheet. */
@media (min-width: 601px) and (max-width: 860px) {
  .principle .bc-ai-note--end { left: 0; right: auto; transform-origin: top left; }
}
@media (max-width: 720px) {
  .belief { grid-template-columns: minmax(0, 1fr); }
}

/* Night: the sun has set. */

.nightfall {
  height: clamp(160px, 30svh, 320px);
  background: linear-gradient(var(--dusk-warm), color-mix(in oklab, var(--dusk-warm), var(--plomb)) 30%, var(--plomb) 70%, var(--ground));
}
.night {
  padding: 0 clamp(16px, 4vw, 56px);
  background: var(--ground);
  color: var(--label);
}
.night a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--separator-strong); }
.night a:hover { text-decoration-color: currentColor; }

.who, .faq {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-56) 0;
}
.who-text { max-width: 60ch; margin: 0 0 var(--space-24); color: var(--label-2); text-wrap: pretty; }
.links { display: flex; gap: var(--space-24); margin: 0; font-weight: 600; }

/* Under construction: the text inside the seal's ring of squares, three of them still to place. */

.construction {
  display: grid;
  place-items: center;
  padding: clamp(64px, 12svh, 140px) 0;
}
.construction-ring {
  display: grid;
  place-items: center;
  width: min(620px, 100%);
  aspect-ratio: 1;
  text-align: center;
}
.construction-squares, .construction-body { grid-area: 1 / 1; }
.construction-squares { display: block; width: 100%; height: 100%; fill: var(--cordeau); }
.construction-slot { fill: none; stroke: var(--separator-strong); stroke-width: 0.4; }
.construction-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-56) calc(var(--space-56) * 1.5);
}
.construction-title {
  max-width: 12ch;
  margin: 0 0 var(--space-16);
  font-size: clamp(32px, 4.8vw, 54px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.construction-text { max-width: 32ch; margin: 0 0 var(--space-28); color: var(--label-2); text-wrap: pretty; }
.construction-action { margin: 0; }
/* On a phone the ring can't hold all the text: it holds the title, and the rest follows below. */
@media (max-width: 560px) {
  .construction-ring { width: 100%; aspect-ratio: auto; }
  .construction-body { display: contents; }
  .construction-squares { width: min(340px, 100%); height: auto; aspect-ratio: 1; }
  .construction-title { grid-area: 1 / 1; max-width: 9ch; margin: 0; font-size: 28px; }
  .construction-text { margin-top: var(--space-28); }
}

/* Questions: one line each, the answer under it. */

.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--separator); }
.faq-item:first-child { border-top: 1px solid var(--separator); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-20) 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background: linear-gradient(currentColor, currentColor) center / 14px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 14px no-repeat;
  transition: transform var(--duration-state) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { max-width: 64ch; margin: 0; padding: 0 0 var(--space-24); color: var(--label-2); text-wrap: pretty; }

.cta {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--space-28);
  border-radius: var(--radius-pill);
  background: var(--action);
  color: var(--on-action);
  font-weight: 600;
  transition: background var(--duration-quick) ease, transform var(--duration-press) var(--ease-press);
}
.night a.cta { color: var(--on-action); text-decoration: none; }
.cta:hover { background: var(--action-hover); }
.cta:active { transform: scale(0.97); }

.footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-32) 0 var(--space-56);
  border-top: 1px solid var(--separator);
  font-size: 14px;
  line-height: 20px;
  color: var(--label-2);
}
.footer p { margin: 0 0 var(--space-8); }
.legal summary { cursor: pointer; width: fit-content; }
.legal[open] summary { margin-bottom: var(--space-12); }

/* Intro. Only runs when the head script adds .intro to <html>; without it the page is final. */

.scene { display: none; }
.intro .scene {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10;
  background: var(--dusk-sky);
}
.scene svg { display: block; width: 100%; height: 100%; }
.intro .scene.is-gone { display: none; }

.intro .wordmark { clip-path: inset(0 100% 0 0); }
.intro:not(.s-settle) .brand::before { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.intro.s-word .wordmark {
  clip-path: inset(0 0 0 0);
  transition: clip-path 760ms cubic-bezier(0.65, 0, 0.35, 1);
}

.intro .reveal { opacity: 0; }
.intro.s-settle .reveal { animation: bc-rise 640ms var(--ease) both; }
.intro.s-settle .statement { animation-delay: 90ms; }
.intro.s-settle .pill { animation-delay: 300ms; }

/* Page not found (404.html): one screen of the hero with the sun lower, nearly set, and a way home.
   Served for any unknown path, however deep, and runs no script. */

.lost-title {
  max-width: 14ch;
  margin: 0 auto var(--space-16);
  font-size: clamp(36px, 6vw, 80px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero-head .lost-text { max-width: 36ch; margin: 0 auto var(--space-28); font-size: 19px; line-height: 28px; text-wrap: balance; }
.hero-head .lost-action { margin: 0; }
.lost .cta:hover { text-decoration: none; }
/* The sun sits in the flow under the text, so a short screen grows the page rather than letting
   the sun cover the link; the hero clips its lower quarter, as the sea would. */
.lost {
  --sun-size: min(44svh, 92vw);
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: max(100svh, 560px);
}
.lost .sun {
  position: relative;
  left: auto;
  top: auto;
  flex: none;
  align-self: center;
  margin: auto 0 calc(var(--sun-size) * -0.25);
}
.lost-head { padding-bottom: var(--space-40); }

/* Text pages (security/index.html): the top bar on the dusk, one column of text, then the night
   with the footer. They run no script, so the top bar scrolls away with the page. */

.doc-page { background: var(--dusk-sky); }
.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(40px, 10svh, 112px) clamp(16px, 4vw, 56px) clamp(64px, 12svh, 140px);
}
.doc-title {
  margin: 0 0 var(--space-24);
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.doc-lead { max-width: 40ch; margin: 0; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; text-wrap: pretty; }
.doc-section { margin-top: var(--space-56); padding-top: var(--space-24); border-top: 1px solid var(--separator-strong); }
.doc-section h2 { margin: 0 0 var(--space-16); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
.doc-section p, .doc-section ul { max-width: 64ch; margin: 0 0 var(--space-16); text-wrap: pretty; }
.doc-section ul { padding-left: var(--space-24); }
.doc-section li + li { margin-top: var(--space-8); }
.doc a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* Accessibility statement (accessibility/index.html): the top bar and the title on the dusk,
   then the text on the plain ground, where label-2 keeps its contrast. Runs no script, so the
   top bar scrolls away with the page. */

.statement-page {
  /* The side room: the site's gutter, or more, so the text lines up with a 1240px column. */
  --statement-side: max(clamp(16px, 4vw, 56px), (100% - 1240px) / 2);
  background: var(--ground);
}
/* A flat dusk, not the home page's gradient, so axe can measure the title's contrast. */
.statement-bar, .statement-head { background: var(--dusk); }
.statement-head {
  padding: clamp(40px, 10svh, 112px) var(--statement-side) clamp(40px, 8svh, 88px);
  border-bottom: 1px solid var(--separator);
}
.statement-title {
  margin: 0 0 var(--space-24);
  font-size: clamp(40px, 7vw, 88px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}
.statement-lead { max-width: 52ch; margin: 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.statement-body { padding: var(--space-56) var(--statement-side) var(--space-24); }
.statement-body > * { max-width: 68ch; }
.statement-body section { margin-bottom: var(--space-56); }
.statement-body h2 { margin: 0 0 var(--space-16); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; }
.statement-body p, .statement-body ul { margin: 0 0 var(--space-16); text-wrap: pretty; }
.statement-body ul { padding-left: var(--space-24); }
.statement-body li + li { margin-top: var(--space-12); }
.statement-body a { color: var(--label); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--separator-strong); }
.statement-body a:hover { text-decoration-color: currentColor; }
.statement-date { color: var(--label-2); }
.statement-footer { max-width: none; margin-inline: var(--statement-side); }