/* Clver Labs — adapted from the clver.uk design.
   Kept: the mark, the brand colours, near-black ink on white, the oversized
   geometric headline with a coloured second line, and the floating slash over a
   drawing. Dropped: jQuery, Modernizr, Google Analytics, the slick carousel, the
   licensed FF Mark webfont and the mirrored googleapis copy — see README for the
   font decision. Nothing here loads off-origin. */

:root {
  --ink: #212121;
  --ink-soft: #55595e;
  --ink-faint: #8b9096;
  --rule: #e6e8ea;
  --bg: #ffffff;

  /* The mark's eight colours, in its own clockwise order. */
  --amber: #ffbc00;
  --yellow: #ffce48;
  --purple: #7021a3;
  --indigo: #5e54c4;
  --green: #009a6a;
  --teal: #009d9f;
  --red: #f7252f;
  --orange: #ff6a02;

  /* clver.uk's .grid-container is 1120px at >=1180px viewport, 15px gutters.
     Matched here so the slash lands in the same place relative to the text. */
  --max: 1120px;
  --gutter: 15px;
  /* The graphic column's CONTENT width, and the figure everything about the
     slash resolves against. clver.uk gets 530px at this breakpoint by a route
     worth spelling out: .grid-row cancels the container's 15px padding with
     -15px margins, so the row is the full 1120; each .grid-col-6 is 50% =
     560px BORDER-box and re-adds 15px padding a side, leaving 530px of content.
     Reproduced here as a 30px grid gap, so (1090 - 30) / 2 = 530. Getting this
     wrong by the 15px is what put the slash 15px off its true position. */
  --slash-col: calc((var(--max) - 2 * var(--gutter) - 30px) / 2);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* JOST — self-hosted, replacing the geometric system stack that stood in for FF
   Mark. clver.uk sets everything in FF Mark, a commercial Monotype face whose
   webfont kit is licensed per-domain; that licence does not reach clver.ca, so
   the original files are deliberately not shipped. Jost is the closest free
   equivalent (both are Futura-descended geometrics) and is SIL OFL 1.1, which
   permits self-hosting and redistribution — fonts/OFL.txt travels with it,
   because that is the licence's one real condition and refusing FF Mark on
   licence grounds while being careless with Jost's would be incoherent.

   ONE VARIABLE FILE, 26KB, covering weights 100-900 — smaller than the two
   static cuts (400 and 700) it replaces, and it leaves the intermediate weights
   available for nothing extra.

   Latin subset only. The arrow glyph U+2192 is NOT in it (Google's latin subset
   carries U+2191 and U+2193 but not U+2192), so any "→" falls back to a system
   face. That is invisible in practice and the alternative is shipping a second
   file for one character. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  /* swap, not block: the page is legible in the fallback immediately and
     reflows once. A 26KB font is not worth a blank first paint. */
  font-display: swap;
  src: url("fonts/jost-latin.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;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  /* Fallbacks stay geometric so a blocked or failed font load degrades to
     something the same shape rather than to Arial. */
  font: 400 17px/1.6 "Jost", "Century Gothic", "Avenir Next", Avenir,
        ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── nav ──────────────────────────────────────────────────────────────── */

/* TRANSPARENT, so the slash runs up through the nav strip and past the rule —
   which is the top half of "floating". It was briefly opaque to stop the slash
   washing out a right-hand nav link; that link is gone, and with only the mark
   at the far left there is nothing up here for the slash to reach. The
   border-bottom still paints over it, so the rule reads as continuous. */
nav { border-bottom: 1px solid var(--rule); }

nav .wrap { display: flex; align-items: center; gap: 1.5rem; height: 4.5rem; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand img { width: 28px; height: 28px; display: block; }
.brand b { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.01em; }

nav a.navlink { margin-left: auto; color: var(--indigo); font-weight: 700; font-size: 0.95rem; text-decoration: none; }
nav a.navlink:hover { color: var(--purple); }

/* ── hero ─────────────────────────────────────────────────────────────── */

/* Two equal columns, as clver.uk's .grid-col-6-desktop (width:50%). Text left,
   graphic right. NO overflow:hidden and NO z-index on the hero itself — either
   one creates a stacking context that would trap the slash and clip away the
   overhang that makes it float. */
.hero { position: relative; border-bottom: 1px solid var(--rule); }

.hero .wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 30px = the two 15px column paddings the original's grid re-adds between the
     columns. This is what makes each column resolve to exactly 530px. */
  gap: 30px;
  align-items: start;
  padding-top: 5rem;
}

/* The original fades in the TEXT, not the graphic — only .home-carousel and the
   "Our story" wrapper carry class="stagger", and Velocity animates them on
   window load (opacity 0->1, translateY 10px->0, scale .98->1, 1000ms).
   Reproduced in CSS. The slash deliberately does NOT move on entry: giving it
   its own fly-in shifted it off its column for the first second. */
.hero-text { animation: text-in 1000ms cubic-bezier(.16,.84,.44,1) both; }

/* What the original RENDERED, not what it declared. Velocity's transition.GVIn
   asks for opacity 0->1, translateY 10px->0, scale .98->1, translateZ 100px->0
   and rotateX -14deg->0 — but the stylesheet sets `perspective` nowhere, so
   translateZ is a no-op and rotateX(-14deg) flattens to scaleY(cos 14°) = .970.
   Net: .98 x .970 = .951 vertically, .98 horizontally. */
@keyframes text-in {
  from { opacity: 0; transform: translateY(10px) scaleX(.98) scaleY(.951); }
  to   { opacity: 1; transform: none; }
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 700;
  /* Both halves of this headline ended on a one-word line ("are", then "are."),
     which at 3.9rem is a hole in the middle of the page. `balance` lets the
     browser even the lines out instead of filling greedily. It is a progressive
     enhancement — where unsupported the text simply wraps as before — and it is
     cheap only because browsers cap it at a handful of lines, which is why it
     belongs on headings and never on body copy. */
  text-wrap: balance;
}

h1 em { font-style: normal; color: var(--purple); display: block; }

.eyebrow {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}

.hero p {
  margin: 1.75rem 0 0;
  max-width: 38ch;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.7;
}

/* ── the floating slash ───────────────────────────────────────────────── */

/*
 * Geometry lifted from clver.uk rather than eyeballed:
 *
 *   .slashGraphic { width:100%; padding-top:157.73584906%;
 *                   margin-top:-10%; margin-bottom:-35% }
 *   .slashGraphic-slide { z-index:-200 }
 *   .slashGraphic-slash { mix-blend-mode:multiply }
 *
 * padding-top:157.73584906% is the aspect ratio (1 : 1.5774) expressed the
 * pre-`aspect-ratio` way. The negative margins are the float: a percentage
 * margin resolves against the containing block's WIDTH, so in a 560px column
 * they are -56px up and -196px down. The bottom one is what makes the shape
 * hang past the section rule into the space below instead of stopping at it.
 *
 * It stays INSIDE the content column — half of 1120px — which is why it reads as
 * sitting in the layout rather than bleeding off the right edge of the screen.
 */
.slash {
  position: relative;
  width: 100%;
  /* NOT the original's 157.73584906%. That number is the aspect ratio of
     home-top.jpg (1060x1672) — a tall photograph this design does not have — and
     at a 530px column it makes an 836px box, twice the height of the text beside
     it. The slash then hung ~186px below the hero and pushed the next section
     down with it. Sized to the hero instead. */
  aspect-ratio: 530 / 620;
  margin-top: -10%;
  /* Was -35%. The overhang is the float, but it is also dead space that every
     following section has to be pushed clear of, so it buys less the bigger it
     gets. Keep it read-as-deliberate, not read-as-a-gap. */
  margin-bottom: -20%;
  /* Negative, echoing the original's z-index:-200: the slash passes BEHIND all
     normal content, so anything it reaches stays readable. Clearance below is
     still the real fix — this is the safety net, not the plan. */
  z-index: -1;
  pointer-events: none;
}

.slash-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* The back layer trails the slash — 0.32 is the original's ratio:
     h.css({transform:"translate("+k.x*f+"px,"+k.y*f+"px)"}) with f=.32 */
  transform: translate3d(calc(var(--px, 0px) * 0.32), calc(var(--py, 0px) * 0.32), 0);
  will-change: transform;
}

/* ONE band, as on clver.uk — not three. */
.slash i {
  position: absolute;
  /* Inboard, not hard right. The skew moves the band's TOP right by
     (height/2) * tan(19°) ≈ 113px, so a band that looks centred at rest reaches
     a long way further right at its top edge — which is precisely where the nav
     links are. Positioned so the top edge stays clear of them. */
  left: 10%;
  /* Overhangs the TOP only — far enough to clear the nav entirely and run off
     the top of the page, so like the original it has NO visible top edge. At
     -6% it stopped 10px inside the nav strip, which read as a shape that had
     been cut off rather than one passing behind. The bottom stays flush with the
     box (top + height = 100%), because that edge IS meant to be seen and any
     bottom overhang has to be paid for in clearance below. */
  top: -20%;
  width: 46%;
  height: 120%;
  display: block;
  background: var(--indigo);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) skewX(-19deg);
  will-change: transform;
  /* The original's transparency. multiply keeps the drawing legible THROUGH the
     colour instead of hiding it, which plain opacity would not: opacity would
     also wash the slash out against the white page, where multiply leaves it
     full strength on white and only darkens where the artwork is. */
  mix-blend-mode: multiply;
}

/* The slash fades, but never MOVES on entry — see .hero-text above. Opacity
   only, so its geometry is correct from the first frame. --slash-opacity carries
   the resting value through the keyframes; animating straight to 1 would
   override the reduced mobile setting further down. */
.slash { --slash-opacity: 1; animation: slash-in 1000ms ease-out both; }

@keyframes slash-in {
  from { opacity: 0; }
  to   { opacity: var(--slash-opacity); }
}

/* ── sections ─────────────────────────────────────────────────────────── */

/*
 * CLEARANCE. The slash hangs 35% of its own width below the hero — ~180px at
 * full size — and the section under it is a full-width three-column grid, so
 * without this the third column sits under the colour. clver.uk never hit this
 * because its next section only uses the left half.
 *
 * calc: the slash is half the content width, so its overhang is
 * 0.35 * (max/2), plus breathing room.
 *
 * Selector is `main.wrap`, not `main`. <main> carries class="wrap", and
 * `.wrap`'s `padding` SHORTHAND resets padding-top to 0 — a plain `main`
 * selector loses on specificity and the clearance silently disappears, which is
 * exactly how the third column ended up underneath the slash.
 */
main.wrap { padding-top: calc(0.20 * var(--slash-col) + 2.5rem); }

section { margin-bottom: 4rem; }

h2 { margin: 0 0 1.1rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
h2.amber { color: var(--orange); }
h2.teal { color: var(--teal); }
h2.purple { color: var(--purple); }

p { margin: 0 0 1rem; color: var(--ink-soft); }
p:last-child { margin-bottom: 0; }
.narrow { max-width: 62ch; }

a { color: var(--indigo); }
a:hover { color: var(--purple); }

/* ── columns ──────────────────────────────────────────────────────────── */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One neutral rule on every column. The per-column brand colours competed with
   the slash for attention and made three equal items look ranked. */
.cols li { border-top: 2px solid var(--rule); padding-top: 1rem; }
.cols b { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.cols span { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.65; }

/* ── contact ──────────────────────────────────────────────────────────── */

.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.5rem; margin: 0; }
.contact dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.3rem; }
.contact dd { margin: 0; font-size: 1rem; }
.contact a { text-decoration: none; border-bottom: 2px solid var(--rule); }
.contact a:hover { border-color: currentColor; }

/* ── footer ───────────────────────────────────────────────────────────── */

footer { border-top: 1px solid var(--rule); padding: 2rem 0 3rem; color: var(--ink-faint); font-size: 0.86rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; align-items: center; }
footer a { color: var(--ink-faint); }
footer .spacer { margin-left: auto; }

/* ── responsive ───────────────────────────────────────────────────────── */

/* clver.uk drops to one column below 740px (grid-col-12 on the text, and the
   graphic column has no -12 class at all, so it collapses). Same here. */
@media (max-width: 60rem) {
  .hero .wrap { grid-template-columns: 1fr; padding-top: 3.5rem; }
  .slash {
    /* Behind the text now rather than beside it, so it fades right back. */
    --slash-opacity: 0.16;
    position: absolute;
    inset: 0 0 auto auto;
    width: 60%;
    margin: 0;
  }
  .hero p { max-width: none; }
  /* main.wrap for the same specificity reason as above. */
  main.wrap { padding-top: 3.5rem; }
}

@media (max-width: 40rem) {
  :root { --gutter: 1.25rem; }
  body { font-size: 16px; }
  .slash { width: 78%; --slash-opacity: 0.12; }
}

/* ── reduced motion ───────────────────────────────────────────────────── */

/* The original had no opinion here. A slash that flies in on load and then
   tracks the cursor is a vestibular trigger; slash.js checks the same query and
   never attaches its listeners. */
@media (prefers-reduced-motion: reduce) {
  .slash, .hero-text { animation: none; opacity: 1; }
  .slash { opacity: var(--slash-opacity); }
  .slash i { transform: skewX(-19deg); }
  .slash-art { transform: none; }
}