/* Provelis site styles | v0.1, 2 Sep 2026
 *
 * Every value comes from tokens.css. If a number appears here that is not a
 * token, it is either a one-off optical correction (commented) or a mistake.
 */

/* ---------------------------------------------------------------- reset --- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }

/* ----------------------------------------------------------------- base --- */

body {
  font-family: var(--font);
  font-size: var(--text-body);
  font-weight: var(--weight-body);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); line-height: var(--leading-snug); }
h3 { font-size: var(--text-h3); line-height: var(--leading-snug); letter-spacing: 0; }

p { max-width: var(--measure); }

a { color: var(--crimson); text-decoration: underline; text-underline-offset: 0.18em; }
a:hover { color: var(--crimson-hover); }
.on-ink a:hover { color: var(--paper); }

:where(a, button, summary, input, textarea):focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius);
}

.skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 10;
  background: var(--ink); color: var(--paper);
  padding: var(--space-2) var(--space-4); text-decoration: none;
  transition: top var(--duration) var(--ease);
}
.skip:focus-visible { top: var(--space-4); color: var(--paper); }

/* --------------------------------------------------------------- layout --- */

.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--wash { background: var(--wash); }
.section--ink { background: var(--ink); }

.overline {
  font-size: var(--text-overline);
  font-weight: var(--weight-heading);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  line-height: 1;
  color: var(--crimson);
  margin-bottom: var(--space-4);
}
.lead { font-size: var(--text-lead); color: var(--text-muted); }
/* Crimson is a light-ground colour. On ink the lifted variant is 3.54:1, which
 * is below AA for 13 px type, so the overline switches to muted white there. */
.on-ink .overline { color: var(--text-muted-on-ink); }
.section-head { max-width: var(--prose-max); margin-bottom: var(--space-7); }
.section-head h2 + .lead { margin-top: var(--space-4); }

/* -------------------------------------------------------------- buttons --- */

.btn {
  display: inline-block;
  font-size: var(--text-small);
  font-weight: var(--weight-medium);
  line-height: 1;
  padding: var(--space-3) var(--space-5);
  border: var(--border) solid var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: #10181F; color: var(--paper); }
.btn--secondary { background: transparent; color: var(--text); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.on-ink .btn--primary { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.on-ink .btn--primary:hover { background: var(--crimson-on-ink); border-color: var(--crimson-on-ink); color: var(--ink); }

/* --------------------------------------------------------------- header --- */

.header {
  position: sticky; top: 0; z-index: 5;
  background: var(--paper);
  border-bottom: var(--border) solid var(--rule);
}
.header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: 4.5rem; }
.header__logo { flex: 0 0 auto; }
.header__logo img { height: 1.75rem; width: auto; }
.header__spacer { flex: 1 1 auto; }

.nav ul { display: flex; align-items: center; gap: var(--space-5); }
.nav a {
  color: var(--text); text-decoration: none;
  font-size: var(--text-small); font-weight: var(--weight-medium);
  padding-block: var(--space-2);
  border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--crimson); color: var(--text); }

.menu { display: none; }
.menu > summary {
  list-style: none; cursor: pointer;
  font-size: var(--text-small); font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-3);
  border: var(--border) solid var(--rule-strong); border-radius: var(--radius);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { border-color: var(--ink); }
.menu__panel {
  position: absolute; left: 0; right: 0;
  background: var(--paper); border-bottom: var(--border) solid var(--rule);
  padding: var(--space-4) var(--gutter) var(--space-6);
}
.menu__panel ul { display: grid; gap: var(--space-1); }
.menu__panel a:not(.btn) {
  display: block; padding: var(--space-3) 0;
  border-bottom: var(--border) solid var(--rule);
  color: var(--text); text-decoration: none;      /* navigation, not prose */
  font-weight: var(--weight-medium);
}
.menu__panel a:not(.btn):hover { color: var(--crimson); }
.menu__cta { margin-top: var(--space-5); }
.menu__cta .btn { display: block; text-align: center; }

/* ----------------------------------------------------------------- hero --- */
/*
 * The type sits on its own solid panel rather than on the footage. That is what
 * lets the video stay bright enough to read: contrast is guaranteed by the
 * panel, so the veil over the footage can be light instead of near-black.
 */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center;
  /* Tall enough to show the subject. The footage is 16:9, so a short hero
   * crops top and bottom, and the subject's head is near the top of the frame.
   * At 1440 this is 720 px against the 810 the full frame would need, which
   * leaves only 80 rows to lose. */
  min-height: clamp(30rem, 50vw, 46rem);
  background: var(--ink) url("/assets/img/hero.jpg") 50% 18% / cover no-repeat;
}
/* min-width:0 is required: a flex item defaults to min-width:auto and will
 * not shrink below its content, which pushes the panel off a narrow screen. */
.hero__inner { width: 100%; min-width: 0; }
/* What is left to crop comes off the bottom, not off her head. */
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 18%; z-index: -2;
}
/* Narrow screens crop horizontally instead, and the subject sits left of centre.
 * The panel is nearly the full width there, so it drops to the bottom and the
 * hero grows, leaving a band of footage above it where she is actually visible. */
@media (max-width: 55.99rem) {
  .hero { background-position: 30% 18%; align-items: flex-end; min-height: 44rem; }
  .hero__media { object-position: 30% 18%; }
  .hero__inner { padding-block: 0 var(--space-6); }
}
.hero__veil { position: absolute; inset: 0; background: var(--ink); opacity: 0.22; z-index: -1; }
.hero__inner { padding-block: clamp(3rem, 2rem + 6vw, 6rem); }
.hero__panel {
  background: var(--ink);
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  max-width: 40rem;
  border-left: 3px solid var(--crimson-on-ink);
  border-radius: var(--radius);
}
/* The panel sits right so it does not cover the person in the footage. */
@media (min-width: 56rem) { .hero__panel { margin-left: auto; } }
.hero h1 { font-size: var(--text-display); }
.hero .lead { margin-top: var(--space-5); color: var(--text-muted-on-ink); }
/* 13 px crimson on ink is 3.54:1 and fails AA. The crimson stays as the
 * panel's left border, which is a shape rather than text. */
.hero .overline { color: var(--text-muted-on-ink); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero .btn--secondary { color: var(--paper); border-color: var(--paper); }
.hero .btn--secondary:hover { background: var(--paper); color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .hero__media { display: none; } }

/* A banner hero on an inner page: shorter than the home hero, and its heading
 * is page sized rather than display sized. */
.hero--page { min-height: clamp(24rem, 34vw, 32rem); background-size: cover; background-position: 50% 30%; }
.hero--page h1 { font-size: var(--text-h1); }
@media (max-width: 55.99rem) {
  .hero--page { min-height: 34rem; background-position: 35% 25%; }
}

/* ------------------------------------------------------------- page head --- */

.pagehead { padding-block: clamp(2.5rem, 1.5rem + 5vw, 5rem); border-bottom: var(--border) solid var(--rule); }
.pagehead__grid { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) { .pagehead__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } }
.pagehead h1 { font-size: var(--text-h1); max-width: 18ch; }
.pagehead .lead { margin-top: var(--space-5); }
.pagehead__figure { margin: 0; }
.pagehead__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
figcaption { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--text-muted); }

/* ------------------------------------------------------------- triggers --- */

.triggers { border-top: var(--border) solid var(--rule); }
.triggers li {
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--space-4);
  padding-block: var(--space-5);
  border-bottom: var(--border) solid var(--rule);
  max-width: var(--measure);
}
.triggers .n {
  font-size: var(--text-small); font-weight: var(--weight-heading);
  color: var(--crimson); font-variant-numeric: tabular-nums;
  padding-top: 0.15em;   /* optical: aligns the numeral to the first line */
}

/* -------------------------------------------------- pillars, steps, cards --- */

.cols { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .cols--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
@media (min-width: 60rem) { .cols--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 40rem) and (max-width: 59.99rem) { .cols--4 { grid-template-columns: repeat(2, 1fr); } }

.pillar { border-top: 2px solid var(--ink); padding-top: var(--space-5); }
.pillar h3 { margin-bottom: var(--space-3); }
.pillar p { color: var(--text-muted); }

.step { border-top: var(--border) solid var(--rule); padding-top: var(--space-4); }
.step .n {
  font-size: var(--text-h1); font-weight: var(--weight-heading);
  color: var(--text-quiet); line-height: 1; display: block; margin-bottom: var(--space-3);
}
.step h3 { margin-bottom: var(--space-3); }
.step p { color: var(--text-muted); font-size: var(--text-small); }

.card {
  display: block; text-decoration: none; color: inherit;
  border: var(--border) solid var(--rule); border-radius: var(--radius);
  padding: var(--space-5);
  transition: border-color var(--duration) var(--ease);
}
.card:hover { border-color: var(--ink); color: inherit; }
.card { padding: 0; overflow: hidden; }
/* height:auto is required: the width/height attributes on the img map to a
 * presentational CSS height that otherwise beats aspect-ratio. */
.card__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.card > :not(.card__img) { margin-inline: var(--space-5); }
.card h3 { margin: var(--space-5) var(--space-5) var(--space-2); font-size: var(--text-lead); }
.card .go { margin-bottom: var(--space-5); }
.card p { color: var(--text-muted); font-size: var(--text-small); }
.card .go { display: inline-block; margin-top: var(--space-4); color: var(--crimson); font-size: var(--text-small); font-weight: var(--weight-medium); }

/* ---------------------------------------------------------------- proof --- */

.proof { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .proof { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); } }
.proof__figure {
  font-size: var(--text-h1); font-weight: var(--weight-heading);
  line-height: 1; letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-3);
}
.proof__label { color: var(--text-muted); font-size: var(--text-small); }
.proof__note { margin-top: var(--space-7); color: var(--text-muted); font-size: var(--text-small); max-width: var(--measure); }

/* ---------------------------------------------------------- endorsement --- */

.endorse {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-6) var(--space-8);
  padding-block: var(--space-6);
  border-block: var(--border) solid var(--rule);
}
.endorse__text { flex: 1 1 24rem; }
.endorse__text .overline { margin-bottom: var(--space-3); }
.endorse__text p { font-size: var(--text-small); color: var(--text-muted); margin: 0; }
.endorse__parties { display: flex; align-items: center; gap: var(--space-6); flex: 0 1 auto; }
.endorse__party { display: grid; gap: var(--space-3); justify-items: start; }
.endorse__label {
  font-size: var(--text-caption); text-transform: uppercase;
  letter-spacing: var(--tracking-overline); color: var(--text-muted);
}
/* The two partner marks are balanced optically, not mathematically: the Zuzani
 * wordmark is wide and letterspaced so it reads large, while the SmartImage
 * lockup packs an icon and a word into a shorter box and reads small. */
.endorse__mark { height: 1.7rem; width: auto; }
.endorse__mark--zuzani { height: 1.35rem; }
.endorse__rule { width: 1px; align-self: stretch; background: var(--rule); }

/* ---------------------------------------------------------------- icons --- */

.icon { width: 3rem; height: 3rem; margin-bottom: var(--space-4); }
.icon--sm { width: 2rem; height: 2rem; margin: 0; flex: 0 0 auto; }

.included { margin-top: var(--space-7); padding-top: var(--space-6); border-top: var(--border) solid var(--rule); }
.included li { display: flex; gap: var(--space-4); align-items: flex-start; }
.included div { font-size: var(--text-small); color: var(--text-muted); }
.included strong { color: var(--text); font-weight: var(--weight-medium); }

/* ------------------------------------------------------------------ cta --- */

.cta { text-align: left; }
.cta h2 { max-width: 20ch; }
.cta .lead { margin-top: var(--space-4); color: var(--text-muted-on-ink); }
.cta .btn { margin-top: var(--space-6); }

/* --------------------------------------------------------------- footer --- */

.footer { background: var(--ink); padding-block: var(--space-8) var(--space-6); }
.footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-7); } }
.footer img.footer__logo { height: 1.6rem; width: auto; margin-bottom: var(--space-4); }
.footer h3 { font-size: var(--text-caption); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--text-muted-on-ink); margin-bottom: var(--space-4); }
.footer li { margin-bottom: var(--space-3); }
.footer a { color: var(--text); text-decoration: none; font-size: var(--text-small); }
.footer a:hover { text-decoration: underline; color: var(--text); }
.footer__legal {
  margin-top: var(--space-7); padding-top: var(--space-5);
  border-top: var(--border) solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  font-size: var(--text-caption); color: var(--text-muted-on-ink);
}
.footer__legal p { margin: 0; max-width: none; }

/* --------------------------------------------------------- small screens --- */

@media (max-width: 63.99rem) {
  .nav { display: none; }
  .menu { display: block; }
  .header__cta { display: none; }
}

/* ------------------------------------------------------- split sections --- */

.split { display: grid; gap: var(--space-6); align-items: center; }
@media (min-width: 56rem) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .split--flip .split__text { order: 2; }
}
.split__text .section-head { margin-bottom: var(--space-5); }
.split__text p { margin-bottom: var(--space-4); }
.split__figure { margin: 0; }
.split__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* --------------------------------------------------------------- lists --- */

.ticks { margin-top: var(--space-4); }
.ticks li {
  position: relative; padding-left: var(--space-5); margin-bottom: var(--space-3);
  max-width: var(--measure);
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 0.5rem; background: var(--crimson);
}
.on-ink .ticks li::before { background: var(--crimson-on-ink); }
.ordered { counter-reset: n; margin-top: var(--space-4); }
.ordered li {
  counter-increment: n; position: relative; padding-left: var(--space-6);
  margin-bottom: var(--space-4); font-size: var(--text-small); color: var(--text-muted);
}
.ordered li::before {
  content: counter(n, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-weight: var(--weight-heading); color: var(--crimson); font-size: var(--text-caption);
  font-variant-numeric: tabular-nums;
}
.on-ink .ordered li { color: var(--text-muted-on-ink); }

/* --------------------------------------------------------------- prose --- */

.prose { max-width: var(--prose-max); }
.prose h2 { font-size: var(--text-h3); margin: var(--space-7) 0 var(--space-4); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--text-lead); margin: var(--space-6) 0 var(--space-3); }
.prose p, .prose li { margin-bottom: var(--space-4); }
.prose ul { margin-bottom: var(--space-5); }
.prose ul li { position: relative; padding-left: var(--space-5); }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.375rem; height: 0.375rem; background: var(--rule-strong); }
.prose dl { margin-bottom: var(--space-5); }
.prose dt { font-weight: var(--weight-medium); margin-top: var(--space-4); }
.prose dd { margin: 0 0 var(--space-3); color: var(--text-muted); }
.note { font-size: var(--text-caption); color: var(--text-muted); max-width: var(--measure); margin-top: var(--space-5); }

/* --------------------------------------------------------------- table --- */

/* Wide tables scroll inside their own box. The page never scrolls sideways. */
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: var(--text-small); }
th, td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: var(--border) solid var(--rule); vertical-align: top; }
thead th { background: var(--ink); color: var(--paper); font-weight: var(--weight-medium); border-bottom: none; }
tbody th { font-weight: var(--weight-medium); }

/* ----------------------------------------------------------------- faq --- */

.faq { max-width: var(--prose-max); border-top: var(--border) solid var(--rule); }
.faq details { border-bottom: var(--border) solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: var(--space-5) var(--space-6) var(--space-5) 0;
  font-weight: var(--weight-medium); position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: var(--space-5);
  color: var(--crimson); font-weight: var(--weight-heading);
}
.faq details[open] summary::after { content: "\2212"; }
.faq__a { padding-bottom: var(--space-5); color: var(--text-muted); }
.faq__a p { margin-bottom: var(--space-3); }

/* ------------------------------------------------------------- contact --- */

.contact { display: grid; gap: var(--space-7); }
@media (min-width: 56rem) { .contact { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); } }
.field { margin-bottom: var(--space-5); max-width: 32rem; }
.field label { display: block; font-size: var(--text-small); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.field .opt { font-weight: var(--weight-body); color: var(--text-muted); }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--text-body); color: var(--text);
  padding: var(--space-3); background: var(--paper);
  border: var(--border) solid var(--rule-strong); border-radius: var(--radius);
}
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--ink); }
.contact__aside h3 { font-size: var(--text-lead); margin-bottom: var(--space-3); }
.contact__aside h3 + p, .contact__aside .ordered { margin-bottom: var(--space-6); }
.contact__aside p { font-size: var(--text-small); color: var(--text-muted); }

/* ------------------------------------------------------- enquiry dialog --- */
/*
 * The Capture4U pattern: every call to action opens a modal form rather than
 * moving the reader to another page. Built on the native <dialog>, so focus
 * trapping, Escape and the backdrop come from the browser. Every trigger is
 * still a real link to /contact/, so the site works with the script disabled.
 */

.enq { border: 0; padding: 0; max-width: 34rem; width: calc(100% - 2rem); border-radius: var(--radius); background: var(--paper); color: var(--text); }
.enq::backdrop { background: rgb(31 42 51 / 0.66); }
.enq__inner { position: relative; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.enq__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 2.25rem; height: 2.25rem; line-height: 1; font-size: 1.5rem;
  background: transparent; border: var(--border) solid var(--rule);
  border-radius: var(--radius); color: var(--text-muted); cursor: pointer;
}
.enq__close:hover { border-color: var(--ink); color: var(--text); }
.enq h2 { font-size: var(--text-h2); margin-bottom: var(--space-3); }
.enq__lead { color: var(--text-muted); font-size: var(--text-small); margin-bottom: var(--space-6); }
.enq form { margin: 0; }
.enq .field { max-width: none; }

.enq__status:empty { display: none; }
.enq__status { font-size: var(--text-small); margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--wash); }
.enq__status--ok { background: var(--crimson-wash); border-left: 3px solid var(--crimson); }
.enq__status--bad { background: var(--wash); border-left: 3px solid var(--caution); }

/* Honeypot: off screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.field__error { display: block; margin-top: var(--space-2); font-size: var(--text-caption); color: var(--crimson); }
.field__error:empty { display: none; }
[aria-invalid="true"] { border-color: var(--crimson) !important; }